合同计量单元修改

src/views/tasks/components/hc-data/task-review.vue

@@ -26,7 +26,26 @@
                 </div>
                 <div class="hc-task-table">
                     <hc-body class="hc-task-body-card" padding="10px">
-                        222
+                        <hc-table
+                            :column="tableColumn" :datas="tableData"
+                            :loading="tableLoading" :is-stripe="false"
+                            is-new :index-style="{ width: 60 }" is-current-row
+                            @row-click="tableRowClick"
+                        >
+                            <template #action="{ row }">
+                                <div class="hc-task-table-action" :class="row.isRemark ? 'is-cur' : ''">
+                                    <i class="i-iconoir-star-solid" />
+                                </div>
+                            </template>
+                            <template #state="{ row }">
+                                <div class="hc-task-table-state">
+                                    <i v-if="row.state === 1" class="i-iconoir-xmark-circle-solid is-danger" />
+                                    <i v-else-if="row.state === 2" class="i-iconoir-check-circle-solid is-success" />
+                                    <span v-else-if="row.state === 3">审批结束</span>
+                                    <i v-else class="i-iconoir-help-circle-solid" />
+                                </div>
+                            </template>
+                        </hc-table>
                     </hc-body>
                 </div>
                 <div class="hc-task-form">
@@ -85,8 +104,20 @@ watch(isShow, (val) => {
 
 //设置任务信息
 const setTaskInfo = async () => {
-    const { taskName } = rowInfo.value
+    const { taskName, type } = rowInfo.value
     taskInfo.value.taskName = taskName
+    taskInfo.value.type = type
+    if (type === 1) {
+        tableColumn.value = middlepayTableColumn.value
+    } else if (type === 2) {
+        tableColumn.value = startWorkTableColumn.value
+    } else if (type === 3) {
+        tableColumn.value = alterTableColumn.value
+    } else if (type === 4) {
+        tableColumn.value = materialTableColumn.value
+    } else {
+        tableColumn.value = []
+    }
 }
 
 //流程信息
@@ -95,17 +126,53 @@ const flowList = ref([
     { currentBol: false, current: true, name: '李四', time: '2023-11-01 09:00:21', content: '结束流程</br>同意' },
 ])
 
-//表格数据
-const tableColumn = ref([
-    { key: 'action', name: '批注', width: 80, align: 'center' },
+//中间计量单的表格数据
+const middlepayTableColumn = ref([
+    { key: 'action', name: '批注', width: 45, align: 'center' },
     { key: 'key1', name: '计量单编号' },
     { key: 'key2', name: '计量金额', width: 100 },
     { key: 'key3', name: '工程划分' },
-    { key: 'key4', name: '审批状态', fixed: 'right', width: 80, align: 'center' },
+    { key: 'state', name: '审批状态', fixed: 'right', width: 70, align: 'center' },
+])
+//开工预付款计量单的表格数据
+const startWorkTableColumn = ref([
+    { key: 'action', name: '批注', width: 45, align: 'center' },
+    { key: 'key1', name: '计量期', minWidth: 100, align: 'center' },
+    { key: 'key2', name: '业务日期', width: 160, align: 'center' },
+    { key: 'key3', name: '计量金额', width: 100, align: 'center' },
+    { key: 'state', name: '审批状态', fixed: 'right', width: 70, align: 'center' },
+])
+//变更令的表格数据
+const alterTableColumn = ref([
+    { key: 'action', name: '批注', width: 45, align: 'center' },
+    { key: 'key1', name: '变更编号', minWidth: 120, align: 'center' },
+    { key: 'key2', name: '变更名称', minWidth: 120, align: 'center' },
+    { key: 'key3', name: '变更金额', width: 100, align: 'center' },
+    { key: 'key4', name: '变更批复日期', width: 160, align: 'center' },
+    { key: 'state', name: '审批状态', fixed: 'right', width: 70, align: 'center' },
+])
+//材料计量单的表格数据
+const materialTableColumn = ref([
+    { key: 'action', name: '批注', width: 45, align: 'center' },
+    { key: 'key1', name: '计量期', minWidth: 100, align: 'center' },
+    { key: 'key2', name: '合同材料', minWidth: 120, align: 'center' },
+    { key: 'key3', name: '材料到场编号', width: 120, align: 'center' },
+    { key: 'key4', name: '计量金额', width: 100, align: 'center' },
+    { key: 'state', name: '审批状态', fixed: 'right', width: 70, align: 'center' },
+])
+
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = ref([])
+const tableData = ref([
+    { isRemark: false, key1: '你猜1', key2: '猜猜1', state: 1 },
+    { isRemark: false, key1: '你猜2', key2: '猜猜2', state: 1 },
+    { isRemark: true, key1: '你猜3', key2: '猜猜3', state: 2 },
+    { isRemark: true, key1: '你猜4', key2: '猜猜4', state: 2 },
 ])
-const tableData = ref([])
 
-const tableRowClick = () => {
+//表格行被点击
+const tableRowClick = ({ row, index }) => {
 
 }
 
@@ -121,6 +188,9 @@ const cancelClick = () => {
     taskInfo.value = {}
     rowInfo.value = {}
     tabsKey.value = ''
+    tableLoading.value = false
+    tableColumn.value = []
+    //tableData.value = []
     emit('close')
 }
 </script>
@@ -151,6 +221,39 @@ const cancelClick = () => {
         border-right: 1px solid #e5e5e5;
     }
 }
+
+
+//表格图标
+.hc-task-table-action, .hc-task-table-state {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    font-size: 20px;
+    color: #929293;
+    i {
+        display: inline-flex;
+    }
+}
+
+//表格批注
+.hc-task-table-action.is-cur {
+    color: #F2B90B;
+}
+
+//表格状态
+.hc-task-table-state {
+    .is-success {
+        color: #25a62d;
+    }
+    .is-danger {
+        color: #F5221D;
+    }
+    span {
+        color: #1A1a1a;
+    }
+}
 </style>
 
 <style lang="scss">