合同工程清单

src/views/project/debit/contract/pay.vue

@@ -21,7 +21,7 @@
                 <infoTable />
                 <hc-title title="汇总项">
                     <template #extra>
-                        <el-link type="primary">添加汇总项</el-link>
+                        <el-link type="primary" @click="isCollectShow = true">添加汇总项</el-link>
                     </template>
                 </hc-title>
                 <hc-table :column="tableColumn1" :datas="tableData1" is-new :index-style="{ width: 60 }">
@@ -37,6 +37,26 @@
 
         <!-- 修改项目支付项 -->
         <rowDataInfo v-model="isEditRowShow" />
+
+        <!-- 添加汇总项 -->
+        <hc-new-dialog v-model="isCollectShow" is-table widths="1200px" title="添加汇总项" @save="collectModalSave">
+            <div class="hc-flex-column">
+                <div class="hc-flex-shrink hc-alert-primary">
+                    <span class="mr-1">当前表格已选择</span>
+                    <span class="text-4">0</span>
+                    <span class="ml-1">项</span>
+                </div>
+                <div class="hc-flex-content">
+                    <hc-body padding="0px">
+                        <hc-table
+                            :column="tableCollectColumn" :datas="tableCollectData" :loading="tableCollectLoading"
+                            is-new :check-style="{ width: 29 }" :index-style="{ width: 60 }"
+                            is-check @selection-change="tableCollectCheckChange"
+                        />
+                    </hc-body>
+                </div>
+            </div>
+        </hc-new-dialog>
     </div>
 </template>
 
@@ -120,4 +140,25 @@ const isEditRowShow = ref(false)
 const editRowClick = () => {
     isEditRowShow.value = true
 }
+
+//添加汇总项
+const isCollectShow = ref(false)
+const collectModalSave = () => {
+    isCollectShow.value = false
+}
+
+//添加汇总项
+const tableCollectColumn = ref([
+    { key: 'key1', name: '支付项编号' },
+    { key: 'key2', name: '支付项名称' },
+    { key: 'key3', name: '支付项类型' },
+    { key: 'key4', name: '是否为扣款项' },
+    { key: 'key5', name: '是否合计项' },
+    { key: 'key5', name: '支付项适用类型' },
+])
+const tableCollectData = ref([])
+const tableCollectLoading = ref(false)
+const tableCollectCheckChange = () => {
+
+}
 </script>