合同进度一览接口联调

lihua
Showing 5 changed files with 370 additions and 97 deletions
src/api/modules/dataAsset.ts
src/components/Drawer/index.vue
src/components/Form/index.vue
src/components/Tools/table_search.vue
src/views/data_asset/contractProgress.vue
--- a/src/api/modules/dataAsset.ts
View file @d12a78b
+++ b/src/api/modules/dataAsset.ts
View file @d12a78b
@@ -451,6 +451,27 @@ export const getContractList = (params) => request({
  data: params
 })
+/** 新增合同 */
+export const saveDamContract = (params) => request({
+  url: `${import.meta.env.VITE_API_NEW_PORTAL}/dam-contract/save`,
+  method: 'post',
+  data: params
+}) 
+/** 更新合同 */
+export const updateDamContract = (params) => request({
+  url: `${import.meta.env.VITE_API_NEW_PORTAL}/dam-contract/update`,
+  method: 'put',
+  data: params
+}) 
+/** 删除合同 */
+export const delDamContract =  (params) => request({
+  url: `${import.meta.env.VITE_API_NEW_PORTAL}/dam-contract/delete`,
+  method: 'delete',
+  data: params
+}) 
 /** 获取会员列表 */
 export const getTenantList = (params) => request({
  url: `${import.meta.env.VITE_APP_PERSONAL_URL}/tenant/singlePage`,
@@ -458,12 +479,6 @@ export const getTenantList = (params) => request({
  data: params
 })
-/** 获取当前用户所在的企业 */
-export const getOwnerTenantList = (userGuid) => request({
-  url: `${import.meta.env.VITE_APP_PERSONAL_URL}/tenant/get-tenant-by-user?userGuid=${userGuid}`,
-  method: 'get'
-})
 // API详情
 /** 查询域名和文根 */
 /** api类型,有表单类型,自定义sql. */
--- a/src/components/Drawer/index.vue
View file @d12a78b
+++ b/src/components/Drawer/index.vue
View file @d12a78b
@@ -106,7 +106,7 @@ const getDrawerConRef = (refName) => {
  }
  //  const drawerForm = drawerFormRef.value[0] || drawerFormRef.value;
  if (refName == 'drawerFormRef') {
-    const drawerForm = drawerFormRef.value[0] || drawerFormRef.value;
+    const drawerForm = drawerFormRef.value?.[0] || drawerFormRef.value;
    return drawerForm
  }
 }
@@ -153,11 +153,13 @@ const tableBtnClick = (scope, btn) => {
 const submitForm = async (formEl: FormInstance | undefined, btn) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
+    const drawerForm = drawerFormRef.value[0] || drawerFormRef.value;
    if (valid) {
-      const drawerForm = drawerFormRef.value[0] || drawerFormRef.value;
      const formInfo = drawerForm.formInline;
      emits("drawerBtnClick", btn, formInfo);
    } else {
+      var obj = fields && Object.keys(fields);
+      obj?.[0] && formEl?.scrollToField(obj?.[0])
      console.log("error submit!", fields);
    }
  });
--- a/src/components/Form/index.vue
View file @d12a78b
+++ b/src/components/Form/index.vue
View file @d12a78b
@@ -1452,7 +1452,8 @@ const panelChange = (scope, row) => {
          :disabled="item.disabled || readonly" @change="(val) => cascaderChange(val, item)" />
        <template v-else-if="item.type && item.type.indexOf('date') > -1">
          <el-date-picker :class="[item.col, { is_block: item.block }]" v-if="item.type == 'date-picker'"
-            v-model="formInline[item.field]" type="daterange" range-separator="至" start-placeholder="开始日期"
+            v-model="formInline[item.field]" type="daterange" range-separator="至" start-placeholder="开始日期" :format="item.format ?? ''"
+            :value-format="item.valueFormat ?? ''"
            end-placeholder="结束日期" :unlink-panels="item.unlink ?? false" :shortcuts="item.shortcuts ?? []"
            :default-value="item.defaultDate" :disabled="item.disabled ?? false" />
          <el-date-picker :class="[item.col, { is_block: item.block }]" v-else-if="item.type == 'date-year'"
--- a/src/components/Tools/table_search.vue
View file @d12a78b
+++ b/src/components/Tools/table_search.vue
View file @d12a78b
@@ -182,6 +182,10 @@ onMounted(() => {
          <el-date-picker v-model="formInline[item.field]" type="datetimerange" start-placeholder="开始时间"
            end-placeholder="结束时间" />
        </template>
+        <template v-else-if="item.type == 'date-range'">
+          <el-date-picker v-model="formInline[item.field]" type="daterange" start-placeholder="开始日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+            end-placeholder="结束日期" />
+        </template>
        <template v-else-if="item.type == 'radio-button'">
          <el-radio-group v-model="formInline[item.field]" @change="radioGroupChange">
            <el-radio-button v-for="opts in item.options" :label="opts.label" />
--- a/src/views/data_asset/contractProgress.vue
View file @d12a78b
+++ b/src/views/data_asset/contractProgress.vue
View file @d12a78b
@@ -6,15 +6,19 @@
 import { ref } from 'vue';
 import { TableColumnWidth, commonPageConfig } from '@/utils/enum';
 import {
+  saveDamContract,
+  updateDamContract,
+  delDamContract,
  getContractList,
  getParamsList,
-  getTenantList,
+  getTenantList
-  getOwnerTenantList
 } from "@/api/modules/dataAsset";
 import { Plus } from "@element-plus/icons-vue";
 import TableTools from "@/components/Tools/table_tools.vue";
 import { useValidator } from '@/hooks/useValidator';
 import useUserStore from "@/store/modules/user";
+import { cloneDeep } from 'lodash-es';
+import { onUploadFileDownload } from '@/api/modules/common';
 const { proxy } = getCurrentInstance() as any;
 const userStore = useUserStore();
@@ -28,10 +32,9 @@ const tradeContractNodesList: any = ref([]);
 /** 资产合同节点 */
 const registerContractNodesList: any = ref([]);
+/** 甲方乙方的下拉会员列表 */
 const partyAList: any = ref([]);
-const partyBList: any = ref([]);
 const searchItemList = ref([
  {
    type: "input",
@@ -62,7 +65,7 @@ const searchItemList = ref([
    clearable: true
  },
  {
-    type: "date-time",
+    type: "date-range",
    field: "dateRange",
    default: null,
    placeholder: "开始日期~结束日期",
@@ -96,36 +99,47 @@ const toSearch = (val: any, clear: boolean = false) => {
  getTableData();
 };
+const tableTools = ref();
+const handleSearchChange = (val, row, info) => {
+  if (row.field == 'contractTypeCode') {
+    tableTools.value.toolSearch.formInline.contractNodeCode = '';
+    searchItemList.value[2].options = val == '1' ? registerContractNodesList.value : tradeContractNodesList.value;
+  }
+}
 const getTableData = () => {
-  //tableInfo.value.loading = true;
+  tableInfo.value.loading = true;
-  // getContractList({
+  getContractList({
-  //   pageSize: page.value.limit,
+    pageSize: page.value.limit,
-  //   pageIndex: page.value.curr,
+    pageIndex: page.value.curr,
-  //   contractName: page.value.contractName,
+    contractName: page.value.contractName,
-  //   contractTypeCode: page.value.contractTypeCode,
+    contractTypeCode: page.value.contractTypeCode,
-  //   contractNodeCode: page.value.contractNodeCode,
+    contractNodeCode: page.value.contractNodeCode,
-  //   startDate: page.value.dateRange?.[0] || '',
+    startDate: page.value.dateRange?.[0] || '',
-  //   endDate: page.value.dateRange?.[1] || '',
+    endDate: page.value.dateRange?.[1] || '',
-  // }).then((res: any) => {
+  }).then((res: any) => {
-  //   tableInfo.value.loading = false
+    tableInfo.value.loading = false
-  //   if (res.code == proxy.$passCode) {
+    if (res.code == proxy.$passCode) {
-  //     const data = res.data || {}
+      const data = res.data || {}
-  //     tableInfo.value.data = data.records || [];
+      tableInfo.value.data = data.records || [];
-  //     tableInfo.value.page.curr = data.pageIndex;
+      tableInfo.value.page.curr = data.pageIndex;
-  //     tableInfo.value.page.rows = data.totalRows || 0;
+      tableInfo.value.page.rows = data.totalRows || 0;
-  //   } else {
+    } else {
-  //     proxy.$ElMessage.error(res.msg);
+      proxy.$ElMessage.error(res.msg);
-  //   }
+    }
-  // })
+  })
 }
+const currTableData: any = ref({});
 const tableInfo = ref({
  id: 'contract-data-table',
  rowKey: 'guid',
  loading: false,
  fields: [
-    { label: "合同名称", field: "contractName", width: 180, align: "left" },
+    { label: "合同名称", field: "contractName", width: 160, align: "left" },
-    { label: "合同类型", field: "contractTypeName", width: 140 },
+    { label: "合同类型", field: "contractTypeName", width: 120 },
    { label: "甲方名称", field: "partyAName", width: 180 },
    { label: "乙方名称", field: "partyBName", width: 180 },
    { label: "签约日期", field: "signContractDate", width: TableColumnWidth.DATE },
@@ -134,7 +148,7 @@ const tableInfo = ref({
    { label: "进展节点", field: "contractNodeName", width: 140, align: "left" },
    { label: "开始日期", field: "startDate", width: TableColumnWidth.DATE },
    { label: "结束日期", field: "endDate", width: TableColumnWidth.DATE },
-    { label: "工作内容描述", field: "endDate", width: 280 },
+    { label: "工作内容描述", field: "contentDescribe", width: 280 },
  ],
  data: [],
  page: {
@@ -145,7 +159,22 @@ const tableInfo = ref({
 });
 const getNodeSteps = (scope) => {
-  return [];
+  let contractNodeCodes = scope.row.contractNodeCodes || [];
+  return {
+    list: contractNodeCodes.map((n, index) => {
+      return {
+        tooltip: {
+          placement: 'top',
+          content: n.name,
+          className: 'step_title_tooltip',
+          effect: 'light',
+        },
+        title: n.name,
+        value: index + 1
+      }
+    }),
+    step: scope.row.contractNodes.length - 1
+  }
 }
 const contractEditFormItems = ref([
@@ -190,7 +219,7 @@ const contractEditFormItems = ref([
    type: "select",
    placeholder: "请选择",
    field: "partyBGuid",
-    options: partyBList.value,
+    options: partyAList.value,
    props: {
      value: 'guid',
      label: 'tenantName'
@@ -206,13 +235,11 @@ const contractEditFormItems = ref([
    placeholder: "请选择",
    field: "contractNodeCodes",
    options: [],
-    props: {
-      value: 'paramValue',
-      label: 'paramName'
-    },
    multiple: true,
    default: [],
    filterable: true,
+    collapse: true,
+    tagsTooltip: true,
    clearable: true,
    required: true,
  },
@@ -275,59 +302,235 @@ const drawerInfo = ref({
  }
 })
+const validate = async () => {
+  if (!nodesInfo.value?.length) {
+    return true;
+  }
+  let taskIndex = 0;
+  for (const task of nodesInfo.value) {
+    let res = await depFormRef.value['ref-' + task.contractNodeCode]?.ruleFormRef?.validate((valid, errorItem) => {
+      if (!valid) {
+        var obj = Object.keys(errorItem);
+        depFormRef.value['ref-' + task.contractNodeCode]?.ruleFormRef?.scrollToField(obj[0]);
+        return false;
+      }
+    })
+    if (!res) {
+      return res;
+    }
+    taskIndex++;
+  }
+  return true;
+}
 const drawerBtnClick = async (btn, info) => {
  if (btn.value == 'cancel') {
    drawerInfo.value.visible = false;
  } else {
+    let res = await validate();
+    if (!res) {
+      return
+    }
+    info.contractNodes = [];
+    let index = 0;
+    for (const n of nodesInfo.value) {
+      let formInline = depFormRef.value['ref-' + n.contractNodeCode].formInline;
+      if (index != 0) {
+        if (formInline.dateRange[0] < info.contractNodes[index - 1].endDate) {
+          proxy.$ElMessage.error(`【${n.contractNodeName}】的开始日期应大于等于上一个节点的结束日期`);
+          depFormRef.value['ref-' + n.contractNodeCode]?.ruleFormRef?.scrollToField('dateRange');
+          return;
+        }
+      }
+      info.contractNodes.push(Object.assign({}, formInline, {
+        contractNodeCode: n.contractNodeCode,
+        contractGuid: currTableData.value.guid,
+        contractTypeCode: info.contractTypeCode,
+        startDate: formInline.dateRange[0],
+        endDate: formInline.dateRange[1],
+        nodeAchievement: formInline.nodeAchievement?.map(n => {
+          return {
+            name: n.name,
+            url: n.url
+          }
+        }) || []
+      }))
+      index++;
+    }
+    drawerInfo.value.footer.btns[1].loading = true;
+    if (drawerInfo.value.type == 'add') {
+      saveDamContract(info).then((res: any) => {
+        drawerInfo.value.footer.btns[1].loading = false;
+        if (res.code == proxy.$passCode) {
+          page.value.curr = 1;
+          getTableData();
+          proxy.$ElMessage.success('新增合同成功');
+          drawerInfo.value.visible = false;
+        } else {
+          proxy.$ElMessage.error(res.msg);
+        }
+      })
+    } else {
+      const params = { ...info };
+      params.guid = currTableData.value.guid;
+      updateDamContract(params).then((res: any) => {
+        drawerInfo.value.footer.btns[1].loading = false;
+        if (res.code == proxy.$passCode) {
+          getTableData();
+          proxy.$ElMessage.success('修改合同成功');
+          drawerInfo.value.visible = false;
+        } else {
+          proxy.$ElMessage.error(res.msg);
+        }
+      })
+    }
  }
 }
 const drawerSelectChange = (val, row, info) => {
+  if (row.field == 'contractTypeCode') {
+    contractEditFormItems.value.forEach(item => {
+      item.default = info[item.field];
+      if (item.field == 'contractNodeCodes') {
+        item.default = '';
+        nodesInfo.value = [];
+        item.options = val == '1' ? registerContractNodesList.value : tradeContractNodesList.value;
+      }
+    });
+  } else if (row.field == 'contractNodeCodes') {
+    info.contractNodeCodes = val?.sort((a, b) => parseInt(a) - parseInt(b));
+    let oldNodesInfo = nodesInfo.value;
+    let nodeInfo: any[] = [];
+    info.contractNodeCodes?.forEach(code => {
+      let node = oldNodesInfo.find(on => on.contractNodeCode == code);
+      if (node) {
+        let formInline = depFormRef.value['ref-' + node.contractNodeCode]?.formInline || {};
+        node.nodeFormItems.forEach(item => {
+          item.default = formInline[item.field];
+        })
+        nodeInfo.push(node);
+      } else {
+        if (oldNodesInfo.length > 0 && parseInt(code) < parseInt(oldNodesInfo[oldNodesInfo.length - 1].contractNodeCode)) {
+          nodeInfo.push({
+            contractNodeCode: code,
+            contractNodeName: registerContractNodesList.value.find(r => r.value == code)?.label || tradeContractNodesList.value.find(r => r.value == code)?.label,
+            nodeFormItems: cloneDeep(nodeFormItems.value),
+            nodeFormRules: nodeFormRules.value
+          });
+        }
+      }
+    }) || [];
+    nodesInfo.value = nodeInfo;
+  }
 }
-const handleNodeFileView = (scope) => {
+const contractNodeCodes = computed(() => {
+  return drawerRef.value?.getDrawerConRef('drawerFormRef')?.formInline?.contractNodeCodes;
+})
+const handleNodeFileView = (scope) => {
+  let file = scope.row?.nodeAchievement?.[0];
+  onUploadFileDownload(file);
 }
 const handleTableEdit = (scope) => {
+  drawerInfo.value.visible = true;
+  drawerInfo.value.type = 'edit';
+  drawerInfo.value.header.title = '编辑合同';
+  currTableData.value = scope.row;
+  contractEditFormItems.value.forEach(item => {
+    item.default = scope.row[item.field];
+    if (item.field == 'contractNodeCodes') {
+      item.default = scope.row.contractNodeCodes?.map(c => c.code) || [];
+      item.options = scope.row.contractTypeCode == '1' ? registerContractNodesList.value : tradeContractNodesList.value;
+    }
+  })
+  nodesInfo.value = scope.row.contractNodes?.map(node => {
+    let items = cloneDeep(nodeFormItems.value);
+    items.forEach(item => {
+      item.default = node[item.field];
+      if (item.field == 'dateRange') {
+        item.default = [node.startDate, node.endDate];
+      }
+    })
+    return Object.assign({}, node, {
+      nodeFormItems: items,
+      nodeFormRules: nodeFormRules.value
+    })
+  }) || [];
 }
 const handleTableDel = (scope) => {
+  proxy.$openMessageBox("确定要删除该登记合同吗?", () => {
+    delDamContract([scope.row.guid]).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        page.value.curr = 1;
+        getTableData();
+        proxy.$ElMessage.success('删除登记合同成功');
+      } else {
+        proxy.$ElMessage.error(res.msg);
+      }
+    });
+  }, () => {
+    proxy.$ElMessage.info("已取消删除");
+  })
 }
 const handleCreate = () => {
  drawerInfo.value.visible = true;
+  drawerInfo.value.type = 'add';
  drawerInfo.value.header.title = '新增合同';
+  contractEditFormItems.value.forEach(item => {
+    item.default = '';
+    if (item.field == 'partyBGuid') {
+      item.default = userData.tenantGuid;
+    }
+  })
 }
 const nodesInfo: any = ref([]);
+const depFormRef = ref({});
+const setDepItemRef = (el: any, index: string) => {
+  if (el) {
+    depFormRef.value['ref-' + index] = el;
+  }
+}
 const nodeFormItems = ref([{
-  label: '开始日期',
+  label: "开始日期~结束日期",
-  type: 'date',
+  type: "date-picker",
-  placeholder: '请输入',
+  field: "dateRange",
-  field: 'startDate',
+  default: [],
-  default: "",
+  placeholder: "开始日期~结束日期",
-  unlink: true,
-  disabled: false,
-  clearable: true,
-  required: true
-}, {
-  label: '结束日期',
-  type: 'date',
-  placeholder: '请输入',
-  field: 'endDate',
-  default: "",
-  unlink: true,
-  disabled: false,
  clearable: true,
-  required: true
+  format: 'YYYY-MM-DD',
-}, {
+  valueFormat: 'YYYY-MM-DD',
+  block: true,
+  required: true,
+},
+//   {
+//   label: '开始日期',
+//   type: 'date',
+//   placeholder: '请选择',
+//   field: 'startDate',
+//   default: "",
+//   unlink: true,
+//   disabled: false,
+//   clearable: true,
+//   required: true
+// }, {
+//   label: '结束日期',
+//   type: 'date',
+//   placeholder: '请选择',
+//   field: 'endDate',
+//   default: "",
+//   unlink: true,
+//   disabled: false,
+//   clearable: true,
+//   required: true
+// }, 
+{
  label: '节点成果上传',
  tip: '支持格式：xls .xlsx .doc .docx .rar .zip',
  type: 'upload-file',
@@ -342,14 +545,19 @@ const nodeFormItems = ref([{
  label: '工作内容描述',
  type: 'textarea',
  placeholder: '请输入',
-  field: 'description',
+  field: 'contentDescribe',
  default: '',
+  maxlength: 200,
+  block: true,
  clearable: true,
 },]);
 const nodeFormRules = ref({
-  startDate: [required('请填写开始日期')],
+  dateRange: [{
-  endDate: [required('请填写结束日期')],
+    type: 'array', required: true, message: '请填写开始日期~结束日期', trigger: 'change',
+  }],
+  // startDate: [required('请填写开始日期')],
+  // endDate: [required('请填写结束日期')],
  nodeAchievement: [{
    validator: (rule: any, value: any, callback: any) => {
      if (!value?.length) {
@@ -362,7 +570,22 @@ const nodeFormRules = ref({
 });
 const addNode = () => {
+  let len = nodesInfo.value.length;
+  let code = contractNodeCodes.value[len];
+  nodesInfo.value.push({
+    contractNodeCode: code,
+    contractNodeName: registerContractNodesList.value.find(r => r.value == code)?.label || tradeContractNodesList.value.find(r => r.value == code)?.label,
+    nodeFormItems: cloneDeep(nodeFormItems.value),
+    nodeFormRules: nodeFormRules.value
+  })
+}
+const handleDelNode = (index) => {
+  proxy.$openMessageBox("确定要删除该进展阶段节点信息录入吗?", () => {
+    nodesInfo.value.splice(index, 1);
+  }, () => {
+    proxy.$ElMessage.info("已取消删除");
+  })
 }
 onBeforeMount(() => {
@@ -379,7 +602,7 @@ onBeforeMount(() => {
    }
  })
  getParamsList({
-    dictType: "登记合同节点"
+    dictType: "交易合同节点"
  }).then((res: any) => {
    tradeContractNodesList.value = [];
    if (res.code == proxy.$passCode) {
@@ -389,7 +612,7 @@ onBeforeMount(() => {
    }
  })
  getParamsList({
-    dictType: "交易合同节点"
+    dictType: "登记合同节点"
  }).then((res: any) => {
    registerContractNodesList.value = [];
    if (res.code == proxy.$passCode) {
@@ -406,15 +629,7 @@ onBeforeMount(() => {
    if (res.code == proxy.$passCode) {
      partyAList.value = res.data?.records || [];
      contractEditFormItems.value[2].options = partyAList.value;
-    } else {
+      contractEditFormItems.value[3].options = partyAList.value;
-      proxy.$ElMessage.error(res.msg);
-    }
-  })
-  getOwnerTenantList(userData.userGuid).then((res: any) => {
-    partyAList.value = [];
-    if (res.code == proxy.$passCode) {
-      partyBList.value = res.data || [];
-      contractEditFormItems.value[3].options = partyBList.value;
    } else {
      proxy.$ElMessage.error(res.msg);
    }
@@ -426,15 +641,16 @@ onBeforeMount(() => {
 <template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
-      <TableTools :searchItems="searchItemList" :searchId="'contract-data-search'" @search="toSearch" :init="true" />
+      <TableTools ref="tableTools" :searchItems="searchItemList" :searchId="'contract-data-search'" @search="toSearch"
+        :init="true" @select-change="handleSearchChange" />
    </div>
    <div class="tools_btns">
      <el-button type="primary" @click="handleCreate">新增</el-button>
    </div>
    <div class="table_panel_wrap">
      <el-table v-loading="tableInfo.loading" ref="tableRef" :data="tableInfo.data" :highlight-current-row="true" stripe
-        border height="100%" tooltip-effect="light" row-key="guid"
+        border height="100%" tooltip-effect="light" row-key="guid" class="expand-table"
-        :style="{ width: '100%', height: 'calc(100% - 8px)', marginTop: '8px', display: 'inline-block', }">
+        :style="{ width: '100%', height: 'calc(100% - 8px)', margin: '8px 0px', display: 'inline-block', }">
        <el-table-column type="expand">
          <template #default="scope">
            <el-table ref="fieldsTableRef" :data="scope.row.contractNodes" :highlight-current-row="true" stripe border
@@ -451,7 +667,7 @@ onBeforeMount(() => {
                  <span>{{ scope.row[field.field || ''] || '--' }}</span>
                </template>
              </el-table-column>
-              <el-table-column label="附件信息" minWidth="120px" align="left" fixed="right" show-overflow-tooltip>
+              <el-table-column label="附件信息" width="120px" align="left" fixed="right" show-overflow-tooltip>
                <template #default="scope">
                  <span class="text_btn" @click="handleNodeFileView(scope)">查看</span>
                </template>
@@ -467,9 +683,9 @@ onBeforeMount(() => {
            <span>{{ scope.row[field.field || ''] || '--' }}</span>
          </template>
        </el-table-column>
-        <el-table-column label="进展阶段" width="320px" align="center">
+        <el-table-column label="进展阶段" width="370px" align="center">
          <template #default="scope">
-            <div class="custom-steps" v-if="scope.row.contractNodes?.length">
+            <div class="custom-steps" v-if="scope.row.contractNodeCodes?.length">
              <StepBar :steps-info="getNodeSteps(scope)" />
            </div>
            <span v-else>--</span>
@@ -487,18 +703,18 @@ onBeforeMount(() => {
      @drawerSelectChange='drawerSelectChange'>
      <!-- 传递到 Form 组件中的默认插槽 -->
      <template v-slot:default>
-        <template v-if="drawerRef.getDrawerConRef()?.formInline?.contractNodeCodes?.length > 0">
+        <template v-if="contractNodeCodes?.length > 0">
          <div class="title-label">进展阶段录入</div>
          <!-- 渲染行 -->
          <div v-for="(row, index) in nodesInfo" :key="index" class="match-content-wrapper">
-            <div class="title-row"><span>{{ row.contractNodeName }}</span><span>删除</span></div>
+            <div class="title-row"><span class="title">{{ row.contractNodeName }}</span><span class="btns"
-            <Form ref="nodeFormRef" :itemList="nodeFormItems" formId="node-form" :rules="nodeFormRules" col="col2" />
+                v-show="index == nodesInfo.length - 1" @click="handleDelNode(index)">删除</span></div>
+            <Form :ref="(el: any) => { setDepItemRef(el, row.contractNodeCode) }" :itemList="row.nodeFormItems"
+              :formId="'node-form' + index" :rules="row.nodeFormRules" col="col2" />
          </div>
          <!-- 新增按钮 -->
-          <div class="bottm_tools"
+          <div class="bottm_tools" v-show="nodesInfo.length < contractNodeCodes?.length" @click="addNode">
-            v-show="nodesInfo.length < drawerRef.getDrawerConRef()?.formInline?.contractNodeCodes?.length"
-            @click="addNode">
            <el-icon>
              <Plus />
            </el-icon>
@@ -510,13 +726,13 @@ onBeforeMount(() => {
  </div>
 </template>
-<style lang="scss">
+<style lang="scss" scoped>
 .container_wrap {
  padding: 0 16px;
 }
 .table_panel_wrap {
-  height: calc(100% - 48px);
+  height: calc(100% - 94px);
 }
 .ml4 {
@@ -525,7 +741,7 @@ onBeforeMount(() => {
 :deep(.custom-steps) {
  width: 100%;
-  height: 60px;
+  height: 64px;
  display: flex;
  .el-steps {
@@ -535,6 +751,27 @@ onBeforeMount(() => {
 .title-label {
  margin-bottom: 4px;
+  font-size: 18px;
+  color: #212121;
+}
+.title-row {
+  height: 48px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .title {
+    color: #212121;
+    font-size: 16px;
+    font-weight: 600;
+  }
+  .btns {
+    cursor: pointer;
+    color: var(--el-color-primary);
+    font-size: 14px;
+  }
 }
 .bottm_tools {
@@ -558,4 +795,18 @@ onBeforeMount(() => {
    border: 1px dashed var(--el-color-primary);
  }
 }
+:deep(.el-table.expand-table) {
+  .el-table__expanded-cell.el-table__cell {
+    background: #fff !important;
+    padding-left: 48px;
+    padding-right: 8px;
+  }
+}
+:deep(.el-steps) {
+  .el-step__head.is-finish .el-step__icon.is-icon {
+    background-color: transparent;
+  }
+}
 </style>
\ No newline at end of file