质检关联清单样式修改

src/views/debit-pay/admin/certificate.vue

@@ -9,8 +9,9 @@
                         type="warning"
                         :loading="recalculateLoading"
                         @click="recalculateClick"
-                        >重新计算</el-button
                     >
+                        重新计算
+                    </el-button>
                 </hc-tooltip>
                 <el-button hc-btn type="primary" @click="addModalClick">
                     <hc-icon name="add" />
@@ -31,38 +32,45 @@
                         type="primary"
                         :disabled="!row.rawUrl"
                         @click="rowViewRawPdf(row)"
-                        >查看电签报表</el-link
-                    >
-                    <el-link type="primary" @click="rowViewPdf(row)"
-                        >查看报表</el-link
                     >
+                        查看电签报表
+                    </el-link>
+                    <el-link type="primary" @click="rowViewPdf(row)">
+                        查看报表
+                    </el-link>
                     <el-link
                         type="primary"
                         :disabled="row.approveStatus === 0"
                         @click="eVisaRowClick(row)"
-                        >查看电签流程</el-link
                     >
+                        查看电签流程
+                    </el-link>
                     <el-link
                         type="success"
                         :disabled="row.isLock === 1"
                         @click="rowEditClick(row)"
-                        >修改</el-link
                     >
+                        修改
+                    </el-link>
                     <el-link
                         type="danger"
                         :disabled="row.isLock === 1 || row.approveStatus === 2"
                         @click="rowDelClick(row)"
-                        >删除</el-link
                     >
+                        删除
+                    </el-link>
                     <el-link
                         v-loading="row?.recalculateLoading"
                         :disabled="row.isLock === 1 || row.approveStatus !== 0"
                         @click="rowRecalculateClick(row)"
-                        >重新计算</el-link
                     >
-                    <el-link type="warning" @click="rowLockingClick(row)">{{
-                        row.isLock === 1 ? "取消锁定" : "锁定"
-                    }}</el-link>
+                        重新计算
+                    </el-link>
+                    <el-link type="warning" @click="rowLockingClick(row)">
+                        {{
+                            row.isLock === 1 ? "取消锁定" : "锁定"
+                        }}
+                    </el-link>
                 </template>
             </hc-table>
             <template #action>
@@ -92,116 +100,116 @@
 </template>
 
 <script setup>
-import { onActivated, ref, watch } from "vue";
-import { useAppStore } from "~src/store";
-import { delMessage } from "~uti/tools";
-import { getArrValue, isNullES } from "js-fast-way";
-import HcAddModal from "./components/certificate/addModal.vue";
-import HcEditModal from "./components/certificate/editModal.vue";
-import HcTaskModal from "~src/components/task-modal/task-modal.vue";
-import mainApi from "~api/debit-pay/admin/certificate";
-import { toPdfPage } from "~uti/btn-auth";
-import { useRoute } from "vue-router";
+import { onActivated, ref, watch } from 'vue'
+import { useAppStore } from '~src/store'
+import { delMessage } from '~uti/tools'
+import { getArrValue, isNullES } from 'js-fast-way'
+import HcAddModal from './components/certificate/addModal.vue'
+import HcEditModal from './components/certificate/editModal.vue'
+import HcTaskModal from '~src/components/task-modal/task-modal.vue'
+import mainApi from '~api/debit-pay/admin/certificate'
+import { toPdfPage } from '~uti/btn-auth'
+import { useRoute } from 'vue-router'
 
-const useAppState = useAppStore();
-const useRoutes = useRoute();
-const projectId = ref(useAppState.getProjectId || "");
-const contractId = ref(useAppState.getContractId || "");
+const useAppState = useAppStore()
+const useRoutes = useRoute()
+const projectId = ref(useAppState.getProjectId || '')
+const contractId = ref(useAppState.getContractId || '')
 
 defineOptions({
-    name: "DebitPayAdminCertificate",
-});
+    name: 'DebitPayAdminCertificate',
+})
 
 //渲染完成
 onActivated(() => {
-    getTableData();
-});
-const isReportDrawer = ref(false);
+    getTableData()
+})
+const isReportDrawer = ref(false)
 watch(
     () => useRoutes,
     (val) => {
         if (val) {
-            isReportDrawer.value = false;
+            isReportDrawer.value = false
         }
     },
-    { immediate: true, deep: true }
-);
+    { immediate: true, deep: true },
+)
 
 //搜索表单
-const searchForm = ref({ current: 1, size: 20, total: 0 });
+const searchForm = ref({ current: 1, size: 20, total: 0 })
 
 //分页
 const pageChange = ({ current, size }) => {
-    searchForm.value.current = current;
-    searchForm.value.size = size;
-    getTableData();
-};
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
 
 //表格数据
-const tableLoading = ref(false);
+const tableLoading = ref(false)
 const tableColumn = ref([
-    { key: "periodNumber", name: "期号" },
-    { key: "certificateNumber", name: "证书编号" },
-    { key: "startDate", name: "开始日期" },
-    { key: "endDate", name: "结束日期" },
-    { key: "printDate", name: "打印日期" },
-    { key: "calculateDate", name: "重新计算时间" },
+    { key: 'periodNumber', name: '期号' },
+    { key: 'certificateNumber', name: '证书编号' },
+    { key: 'startDate', name: '开始日期' },
+    { key: 'endDate', name: '结束日期' },
+    { key: 'printDate', name: '打印日期' },
+    { key: 'calculateDate', name: '重新计算时间' },
     // { key: 'payMoney', name: '支付金额' },
-    { key: "action", name: "操作", width: 440, align: "center" },
-]);
-const tableData = ref([]);
+    { key: 'action', name: '操作', width: 440, align: 'center' },
+])
+const tableData = ref([])
 const getTableData = async () => {
-    tableData.value = [];
-    tableLoading.value = true;
+    tableData.value = []
+    tableLoading.value = true
     const { data } = await mainApi.getPage({
         ...searchForm.value,
         projectId: projectId.value,
         contractId: contractId.value,
-    });
-    tableData.value = getArrValue(data["records"]);
-    searchForm.value.total = data.total || 0;
-    tableLoading.value = false;
-};
+    })
+    tableData.value = getArrValue(data['records'])
+    searchForm.value.total = data.total || 0
+    tableLoading.value = false
+}
 
 //新增
-const addModalShow = ref(false);
+const addModalShow = ref(false)
 const addModalClick = () => {
-    addModalShow.value = true;
-};
+    addModalShow.value = true
+}
 const addModalFinish = () => {
-    getTableData();
-};
+    getTableData()
+}
 
 //多选
-const tableCheckedKeys = ref([]);
+const tableCheckedKeys = ref([])
 const tableSelectionChange = (rows) => {
-    tableCheckedKeys.value = rows;
-};
+    tableCheckedKeys.value = rows
+}
 
 //修改
-const editModalShow = ref(false);
-const editModalIds = ref("");
+const editModalShow = ref(false)
+const editModalIds = ref('')
 const rowEditClick = (row) => {
-    editModalIds.value = row.id;
-    editModalShow.value = true;
-};
+    editModalIds.value = row.id
+    editModalShow.value = true
+}
 const editModalFinish = () => {
-    getTableData();
-    editModalIds.value = false;
-};
+    getTableData()
+    editModalIds.value = false
+}
 
 //删除
 const rowDelClick = (row) => {
     delMessage(async () => {
-        const { error, code, msg } = await mainApi.remove({ ids: row.id });
+        const { error, code, msg } = await mainApi.remove({ ids: row.id })
         if (!error && code === 200) {
-            window.$message.success("删除成功");
-            getTableData().then();
+            window.$message.success('删除成功')
+            getTableData().then()
         } else {
-            window.$message.error(msg ?? "删除失败");
+            window.$message.error(msg ?? '删除失败')
         }
-    });
-};
+    })
+}
 
 //锁定还是解锁
 const rowLockingClick = async (row) => {
@@ -209,46 +217,46 @@ const rowLockingClick = async (row) => {
     const { error, code, msg } = await mainApi.setLocking({
         id: row.id,
         isLock: row.isLock,
-    });
+    })
     if (!error && code === 200) {
-        window.$message.success("操作成功");
-        getTableData().then();
+        window.$message.success('操作成功')
+        getTableData().then()
     } else {
-        window.$message.error(msg ?? "操作失败");
+        window.$message.error(msg ?? '操作失败')
     }
-};
+}
 
 //重新计算
-const recalculateLoading = ref(false);
+const recalculateLoading = ref(false)
 const recalculateClick = async () => {
-    const rows = tableCheckedKeys.value;
+    const rows = tableCheckedKeys.value
     if (rows.length <= 0) {
-        window.$message.warning("请先勾选一条数据");
-        return;
+        window.$message.warning('请先勾选一条数据')
+        return
     }
     if (rows.length > 1) {
-        window.$message.warning("目前仅支持选择一条数据");
-        return;
+        window.$message.warning('目前仅支持选择一条数据')
+        return
     }
-    recalculateLoading.value = true;
-    const isRes = await postRecalculateApi(rows[0]);
-    recalculateLoading.value = false;
+    recalculateLoading.value = true
+    const isRes = await postRecalculateApi(rows[0])
+    recalculateLoading.value = false
     if (isRes) {
-        editModalIds.value = false;
-        getTableData().then();
+        editModalIds.value = false
+        getTableData().then()
     }
-};
+}
 
 //重新计算报表
 const rowRecalculateClick = async (row) => {
-    row.recalculateLoading = true;
-    const isRes = await postRecalculateApi(row);
-    row.recalculateLoading = false;
+    row.recalculateLoading = true
+    const isRes = await postRecalculateApi(row)
+    row.recalculateLoading = false
     if (isRes) {
-        editModalIds.value = false;
-        getTableData().then();
+        editModalIds.value = false
+        getTableData().then()
     }
-};
+}
 
 //发起重新计算请求
 const postRecalculateApi = async ({ id }) => {
@@ -256,45 +264,45 @@ const postRecalculateApi = async ({ id }) => {
         reportId: id,
         type: 0,
         taskType: 1,
-    });
+    })
     if (!error && code === 200) {
-        window.$message.success("操作成功");
-        return true;
+        window.$message.success('操作成功')
+        return true
     } else {
-        window.$message.error(msg ?? "操作失败");
-        return false;
+        window.$message.error(msg ?? '操作失败')
+        return false
     }
-};
+}
 
 //查看报表
-const pdfList = ref([]);
+const pdfList = ref([])
 const rowViewPdf = (row) => {
-    pdfList.value = [];
+    pdfList.value = []
     if (getArrValue(row?.urlListData).length > 0) {
-        pdfList.value = getArrValue(row?.urlListData);
-        console.log(pdfList.value, "pdfList.value");
-        isReportDrawer.value = true;
+        pdfList.value = getArrValue(row?.urlListData)
+        console.log(pdfList.value, 'pdfList.value')
+        isReportDrawer.value = true
     } else {
-        window.$message.warning("暂无报表数据");
+        window.$message.warning('暂无报表数据')
     }
-};
+}
 const rowViewRawPdf = (row) => {
-    toPdfPage(row?.rawUrl);
-};
+    toPdfPage(row?.rawUrl)
+}
 
 //查看电签流程
-const isTaskModal = ref(false);
-const taskDataId = ref("");
+const isTaskModal = ref(false)
+const taskDataId = ref('')
 const eVisaRowClick = ({ taskId }) => {
     if (isNullES(taskId)) {
-        window.$message.warning("暂无电签数据");
-        return;
+        window.$message.warning('暂无电签数据')
+        return
     }
-    taskDataId.value = taskId;
+    taskDataId.value = taskId
     setTimeout(() => {
-        isTaskModal.value = true;
-    }, 200);
-};
+        isTaskModal.value = true
+    }, 200)
+}
 </script>
 
 <style scoped lang="scss"></style>

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

@@ -36,7 +36,7 @@
                             <div class="text-sm text-orange">温馨提示：累计分解量 > 合同变更后量，整行文字红色</div>
                         </template>
                     </HcTitle>
-                    <div style="height: calc(50vh - 210px);">
+                    <div :style="{ height: listHeight }">
                         <hc-table
                             :is-stripe="false" :column="tableColumn" :datas="tableData" :loading="tableLoading"
                             is-new :index-style="{ width: 60 }" :row-style="tableRowStyle"
@@ -46,32 +46,39 @@
                             </template>
                         </hc-table>
                     </div>
-                    <HcTitle title="质检关联清单">
-                        <template #extra>
-                            <el-button hc-btn type="primary" @click="linkDataClick(2)">关联</el-button>
-                            <el-button hc-btn type="primary" :loading="batchCancleload" :disabled="cancelKeys.length == 0" @click="batchCancle">批量取消</el-button>
-                        </template>
-                    </HcTitle>
-                    <div style="height: calc(50vh - 250px);">
-                        <hc-table
-                            :is-stripe="false" :column="qualtableColumn" :datas="qualtableData" :loading="tableLoading"
-                            is-new :index-style="{ width: 60 }"
-                            is-check @selection-change="tableSelectionChange"
-                        >
-                            <template #appStatusName="{ row }">
-                                <el-tag
-                                    v-if="row.appStatusName"
-                                    :type="`${row.appStatusName === '已审批' ? 'success' : row.appStatusName === '已填报-待审批' ? 'warning' : row.appStatusName === '已填报-未上报' ? 'primary' : 'info'}`"
-                                    class="mx-1" effect="dark"
-                                >
-                                    {{ row.appStatusName }}
-                                </el-tag>
-                            </template>
-                            <template #action="{ row }">
-                                <el-button hc-btn type="primary" size="small" :loading="row?.load" @click="cancleLink(row)">取消关联</el-button>
+                    <el-collapse v-model="activeNames" accordion @change="handleChange">
+                        <el-collapse-item name="1">
+                            <template #title>
+                                <div class="co-title-box">
+                                    <div class="co-title-bar">质检关联清单</div>
+                                    <div>
+                                        <el-button hc-btn type="primary" @click="linkDataClick(2)">关联</el-button>
+                                        <el-button hc-btn type="primary" :loading="batchCancleload" :disabled="cancelKeys.length == 0" @click="batchCancle">批量取消</el-button>
+                                    </div>
+                                </div>
                             </template>
-                        </hc-table>
-                    </div>
+                            <div style="height: calc(50vh - 210px);">
+                                <hc-table
+                                    :is-stripe="false" :column="qualtableColumn" :datas="qualtableData" :loading="tableLoading"
+                                    is-new :index-style="{ width: 60 }"
+                                    is-check @selection-change="tableSelectionChange"
+                                >
+                                    <template #appStatusName="{ row }">
+                                        <el-tag
+                                            v-if="row.appStatusName"
+                                            :type="`${row.appStatusName === '已审批' ? 'success' : row.appStatusName === '已填报-待审批' ? 'warning' : row.appStatusName === '已填报-未上报' ? 'primary' : 'info'}`"
+                                            class="mx-1" effect="dark"
+                                        >
+                                            {{ row.appStatusName }}
+                                        </el-tag>
+                                    </template>
+                                    <template #action="{ row }">
+                                        <el-button hc-btn type="primary" size="small" :loading="row?.load" @click="cancleLink(row)">取消关联</el-button>
+                                    </template>
+                                </hc-table>
+                            </div>
+                        </el-collapse-item>
+                    </el-collapse>
                 </div>
             </hc-new-card>
         </div>
@@ -764,4 +771,32 @@ const batchCancle = async ()=>{
          window.$message.error(msg)
      }
 }
+const activeNames = ref(['1'])
+const listHeight = ref( 'calc(50vh - 250px)')
+const handleChange = (val) => {
+  if (val !== '1') {
+         listHeight.value = 'calc(50vh - 5px)'
+  } else {
+      listHeight.value = 'calc(50vh - 250px)'
+  }
+ 
+}
 </script>
+
+<style lang="scss" scoped>
+.co-title-bar{
+
+    font-size: 16px;
+    font-weight: 500;
+    color: #555555;
+    display: flex
+;
+    align-items: center;
+}
+.co-title-box{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding-right: 10px;
+}
+</style>