合同材料

src/views/debit-pay/material/components/material/dataModal.vue

@@ -44,13 +44,23 @@
                         <hc-info-table-td is-title width="10%">材料基准价格：</hc-info-table-td>
                         <hc-info-table-td>
                             <el-form-item>
-                                <el-input v-model="formModel.key5" disabled />
+                                <el-input v-model="formModel.key5" disabled>
+                                    <template #suffix>元</template>
+                                </el-input>
                             </el-form-item>
                         </hc-info-table-td>
                         <hc-info-table-td is-title width="10%">施工期市场价格：</hc-info-table-td>
                         <hc-info-table-td>
                             <el-form-item prop="key6">
-                                <el-input v-model="formModel.key6" disabled />
+                                <el-input v-model="formModel.key6" disabled>
+                                    <template #suffix>元</template>
+                                    <template #append>
+                                        <el-button type="primary" color="#C99AD7">
+                                            <hc-icon name="add" />
+                                            <span>选择实时价格</span>
+                                        </el-button>
+                                    </template>
+                                </el-input>
                             </el-form-item>
                         </hc-info-table-td>
                     </tr>
@@ -88,7 +98,26 @@
             </el-form>
         </div>
         <div class="hc-info-form-table">
-            1111111
+            <el-divider border-style="dashed">
+                <el-segmented v-model="tab_key" :options="['材料明细', '上传附件']" />
+            </el-divider>
+            <div v-if="tab_key === '材料明细'" class="loop-refresh-icon">
+                <hc-icon name="loop-left" />
+            </div>
+            <div v-if="tab_key === '材料明细'" class="table-body">
+                <hc-table :column="tableColumn1" :datas="tableData1" :index-style="{ width: 60 }" :loading="tableLoading1">
+                    <template #key3="{ row }">
+                        <el-link type="primary">{{ row.key3 }}</el-link>
+                    </template>
+                </hc-table>
+            </div>
+            <div v-if="tab_key === '上传附件'" class="table-body">
+                <hc-table :column="tableColumn2" :datas="tableData2" :index-style="{ width: 60 }" :loading="tableLoading2">
+                    <template #key3="{ row }">
+                        <el-link type="primary">{{ row.key3 }}</el-link>
+                    </template>
+                </hc-table>
+            </div>
         </div>
         <template #footer>
             <el-button hc-btn @click="modalClose">取消</el-button>
@@ -137,6 +166,9 @@ watch(isShow, (val) => {
     if (val) detailsModalShow()
 })
 
+//分段器
+const tab_key = ref('材料明细')
+
 //表单数据
 const formRef = ref(null)
 const formModel = ref({})
@@ -149,6 +181,19 @@ const detailsModalShow = () => {
     console.log(dataId.value)
 }
 
+
+//材料明细表格
+const tableColumn1 = []
+const tableData1 = ref([])
+const tableLoading1 = ref(false)
+
+
+//上传附件
+const tableColumn2 = []
+const tableData2 = ref([])
+const tableLoading2 = ref(false)
+
+
 //保存数据
 const saveLoaing = ref(false)
 const submitData = async () => {
@@ -200,6 +245,40 @@ const modalClose = () => {
 }
 .hc-info-form-table {
     position: relative;
-    height: calc(100% - 357px);
+    height: calc(100% - 382px);
+    .el-divider {
+        border-color: #008200;
+    }
+    .el-divider .el-divider__text {
+        padding: 0 4px;
+    }
+    .el-divider .el-segmented {
+        --el-segmented-color: #008200;
+        --el-segmented-item-hover-color: #008200;
+        --el-segmented-item-selected-bg-color: #008200;
+        --el-segmented-item-hover-bg-color: transparent;
+        border: 1px solid #008200;
+    }
+    .loop-refresh-icon {
+        position: absolute;
+        color: #008200;
+        font-size: 26px;
+        height: 32px;
+        width: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: white;
+        left: 10px;
+        top: -14px;
+        cursor: pointer;
+        &:hover {
+            color: #035903;
+        }
+    }
+    .table-body {
+        position: relative;
+        height: calc(100% - 25px);
+    }
 }
 </style>