合同进度页面前端开发

@@ -444,6 +444,26 @@ export const getRegisterExchangeList = () => request({
   method: 'get'
 })
 
+/** 获取合同列表 */
+export const getContractList = (params) => request({
+  url: `${import.meta.env.VITE_API_NEW_PORTAL}/dam-contract/page-list`,
+  method: 'post',
+  data: params
+})
+
+/** 获取会员列表 */
+export const getTenantList = (params) => request({
+  url: `${import.meta.env.VITE_APP_PERSONAL_URL}/tenant/singlePage`,
+  method: 'post',
+  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. */

@@ -217,6 +217,27 @@ const routes: RouteRecordRaw[] = [
         },
       },
     ]
+  },
+  {
+    path: '/data-asset-register/contract-progress',
+    component: Layout,
+    meta: {
+      title: '合同进度一览',
+      icon: 'ep:grid',
+    },
+    children: [
+      {
+        path: '',
+        name: 'contractProgress',
+        component: () => import('@/views/data_asset/contractProgress.vue'),
+        meta: {
+          title: '合同进度一览',
+          sidebar: false,
+          cache: true,
+          breadcrumb: false,
+        },
+      },
+    ]
   }
 ]
 export default routes

+<route lang="yaml">
+  name: contractProgress
+  </route>
+
+<script lang="ts" setup name="contractProgress">
+import { ref } from 'vue';
+import { TableColumnWidth, commonPageConfig } from '@/utils/enum';
+import {
+  getContractList,
+  getParamsList,
+  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";
+
+const { proxy } = getCurrentInstance() as any;
+const userStore = useUserStore();
+const userData = JSON.parse(userStore.userData)
+const { required } = useValidator();
+const contractTypes: any = ref([]);
+
+/** 交易合同节点 */
+const tradeContractNodesList: any = ref([]);
+
+/** 资产合同节点 */
+const registerContractNodesList: any = ref([]);
+
+const partyAList: any = ref([]);
+
+const partyBList: any = ref([]);
+
+const searchItemList = ref([
+  {
+    type: "input",
+    label: "",
+    field: "contractName",
+    default: "",
+    maxlength: 50,
+    placeholder: "合同名称",
+    clearable: true,
+  },
+  {
+    label: "",
+    type: "select",
+    placeholder: "合同类型",
+    field: "contractTypeCode",
+    options: contractTypes.value,
+    default: '',
+    filterable: true,
+    clearable: true,
+  },
+  {
+    type: 'select',
+    label: '',
+    field: 'contractNodeCode',
+    default: '',
+    placeholder: '进展阶段',
+    options: [],
+    clearable: true
+  },
+  {
+    type: "date-time",
+    field: "dateRange",
+    default: null,
+    placeholder: "开始日期~结束日期",
+    clearable: true,
+    required: true
+  }
+]);
+
+const page = ref({
+  ...commonPageConfig,
+  contractName: '',
+  contractTypeCode: '',
+  contractNodeCode: '',
+  dateRange: []
+});
+
+const toSearch = (val: any, clear: boolean = false) => {
+  page.value.curr = 1;
+  if (clear) {
+    searchItemList.value.map((item) => (item.default = ""));
+    page.value.contractName = '';
+    page.value.contractTypeCode = "";
+    page.value.contractNodeCode = "";
+    page.value.dateRange = [];
+  } else {
+    page.value.contractName = val.contractName;
+    page.value.contractTypeCode = val.contractTypeCode;
+    page.value.contractNodeCode = val.contractNodeCode;
+    page.value.dateRange = val.dateRange;
+  }
+  getTableData();
+};
+
+const getTableData = () => {
+  //tableInfo.value.loading = true;
+  // getContractList({
+  //   pageSize: page.value.limit,
+  //   pageIndex: page.value.curr,
+  //   contractName: page.value.contractName,
+  //   contractTypeCode: page.value.contractTypeCode,
+  //   contractNodeCode: page.value.contractNodeCode,
+  //   startDate: page.value.dateRange?.[0] || '',
+  //   endDate: page.value.dateRange?.[1] || '',
+  // }).then((res: any) => {
+  //   tableInfo.value.loading = false
+  //   if (res.code == proxy.$passCode) {
+  //     const data = res.data || {}
+  //     tableInfo.value.data = data.records || [];
+  //     tableInfo.value.page.curr = data.pageIndex;
+  //     tableInfo.value.page.rows = data.totalRows || 0;
+  //   } else {
+  //     proxy.$ElMessage.error(res.msg);
+  //   }
+  // })
+}
+
+const tableInfo = ref({
+  id: 'contract-data-table',
+  rowKey: 'guid',
+  loading: false,
+  fields: [
+    { label: "合同名称", field: "contractName", width: 180, align: "left" },
+    { label: "合同类型", field: "contractTypeName", width: 140 },
+    { label: "甲方名称", field: "partyAName", width: 180 },
+    { label: "乙方名称", field: "partyBName", width: 180 },
+    { label: "签约日期", field: "signContractDate", width: TableColumnWidth.DATE },
+  ],
+  childFields: [
+    { label: "进展节点", field: "contractNodeName", width: 140, align: "left" },
+    { label: "开始日期", field: "startDate", width: TableColumnWidth.DATE },
+    { label: "结束日期", field: "endDate", width: TableColumnWidth.DATE },
+    { label: "工作内容描述", field: "endDate", width: 280 },
+  ],
+  data: [],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...page.value,
+  }
+});
+
+const getNodeSteps = (scope) => {
+  return [];
+}
+
+const contractEditFormItems = ref([
+  {
+    label: "合同类型",
+    type: "select",
+    placeholder: "请选择",
+    field: "contractTypeCode",
+    options: contractTypes.value,
+    default: '',
+    filterable: true,
+    clearable: true,
+    required: true,
+  },
+  {
+    type: "input",
+    label: "合同名称",
+    field: "contractName",
+    default: "",
+    maxlength: 50,
+    placeholder: "请输入",
+    clearable: true,
+    required: true,
+  },
+  {
+    label: "甲方名称",
+    type: "select",
+    placeholder: "请选择",
+    field: "partyAGuid",
+    options: partyAList.value,
+    props: {
+      value: 'guid',
+      label: 'tenantName'
+    },
+    default: '',
+    filterable: true,
+    clearable: true,
+    required: true,
+  },
+  {
+    label: "乙方名称",
+    type: "select",
+    placeholder: "请选择",
+    field: "partyBGuid",
+    options: partyBList.value,
+    props: {
+      value: 'guid',
+      label: 'tenantName'
+    },
+    default: '',
+    filterable: true,
+    clearable: true,
+    required: true,
+  },
+  {
+    label: "跟进节点",
+    type: "select",
+    placeholder: "请选择",
+    field: "contractNodeCodes",
+    options: [],
+    props: {
+      value: 'paramValue',
+      label: 'paramName'
+    },
+    multiple: true,
+    default: [],
+    filterable: true,
+    clearable: true,
+    required: true,
+  },
+  {
+    label: '签约日期',
+    type: 'date',
+    placeholder: '请输入',
+    field: 'signContractDate',
+    default: "",
+    unlink: true,
+    disabled: false,
+    clearable: true,
+    required: true
+  },
+]);
+
+const contractEditFormRules = ref({
+  contractTypeCode: [required('请选择合同类型')],
+  contractName: [required('请填写合同名称')],
+  partyAGuid: [required('请选择甲方名称')],
+  partyBGuid: [required('请选择乙方名称')],
+  contractNodeCodes: [required('请选择跟进节点')],
+  signContractDate: [required('请选择签约日期')],
+});
+
+
+/** 新增分类的form */
+const contractEditFormInfo = ref({
+  type: "form",
+  title: "",
+  col: "span",
+  formInfo: {
+    id: "add-class-form",
+    readonly: false,
+    items: contractEditFormItems.value,
+    rules: contractEditFormRules.value,
+  },
+});
+
+const drawerRef = ref();
+
+/** 新增编辑分类。 */
+const drawerInfo = ref({
+  visible: false,
+  direction: 'rtl',
+  size: 550,
+  header: {
+    title: '新增合同',
+  },
+  type: '',
+  container: {
+    contents: [contractEditFormInfo.value],
+  },
+  footer: {
+    visible: true,
+    btns: [
+      { type: 'default', label: '取消', value: 'cancel' },
+      { type: 'primary', label: '确定', value: 'save', loading: false },
+    ]
+  }
+})
+
+const drawerBtnClick = async (btn, info) => {
+  if (btn.value == 'cancel') {
+    drawerInfo.value.visible = false;
+  } else {
+
+  }
+}
+
+const drawerSelectChange = (val, row, info) => {
+
+}
+
+const handleNodeFileView = (scope) => {
+
+}
+
+const handleTableEdit = (scope) => {
+
+}
+
+const handleTableDel = (scope) => {
+
+}
+
+const handleCreate = () => {
+  drawerInfo.value.visible = true;
+  drawerInfo.value.header.title = '新增合同';
+
+}
+
+const nodesInfo: any = ref([]);
+
+const nodeFormItems = ref([{
+  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',
+  accept: '.xls, .xlsx, .doc, .docx, .rar, .zip',
+  required: true,
+  block: true,
+  visible: true,
+  default: [],
+  field: 'nodeAchievement',
+  limit: 1,
+}, {
+  label: '工作内容描述',
+  type: 'textarea',
+  placeholder: '请输入',
+  field: 'description',
+  default: '',
+  clearable: true,
+},]);
+
+const nodeFormRules = ref({
+  startDate: [required('请填写开始日期')],
+  endDate: [required('请填写结束日期')],
+  nodeAchievement: [{
+    validator: (rule: any, value: any, callback: any) => {
+      if (!value?.length) {
+        callback(new Error('请上传节点成果附件'))
+      } else {
+        callback();
+      }
+    }, trigger: 'change'
+  }],
+});
+
+const addNode = () => {
+
+}
+
+onBeforeMount(() => {
+  getParamsList({
+    dictType: "资产合同类型"
+  }).then((res: any) => {
+    contractTypes.value = [];
+    if (res.code == proxy.$passCode) {
+      contractTypes.value = res.data || [];
+      searchItemList.value[1].options = contractTypes.value;
+      contractEditFormItems.value[0].options = contractTypes.value;
+    } else {
+      proxy.$ElMessage.error(res.msg);
+    }
+  })
+  getParamsList({
+    dictType: "登记合同节点"
+  }).then((res: any) => {
+    tradeContractNodesList.value = [];
+    if (res.code == proxy.$passCode) {
+      tradeContractNodesList.value = res.data || [];
+    } else {
+      proxy.$ElMessage.error(res.msg);
+    }
+  })
+  getParamsList({
+    dictType: "交易合同节点"
+  }).then((res: any) => {
+    registerContractNodesList.value = [];
+    if (res.code == proxy.$passCode) {
+      registerContractNodesList.value = res.data || [];
+    } else {
+      proxy.$ElMessage.error(res.msg);
+    }
+  })
+  getTenantList({
+    bizState: 'Y',
+    pageSize: -1
+  }).then((res: any) => {
+    partyAList.value = [];
+    if (res.code == proxy.$passCode) {
+      partyAList.value = res.data?.records || [];
+      contractEditFormItems.value[2].options = partyAList.value;
+    } else {
+      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);
+    }
+  })
+})
+
+</script>
+
+<template>
+  <div class="container_wrap">
+    <div class="table_tool_wrap">
+      <TableTools :searchItems="searchItemList" :searchId="'contract-data-search'" @search="toSearch" :init="true" />
+    </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"
+        :style="{ width: '100%', height: 'calc(100% - 8px)', marginTop: '8px', 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
+              height="100%" tooltip-effect="light" :style="{
+                width: '100%',
+                'max-height': '100%',
+                display: 'inline-block',
+              }">
+              <el-table-column label="序号" type="index" width="56px" align="center" show-overflow-tooltip>
+              </el-table-column>
+              <el-table-column v-for="field in tableInfo.childFields" :prop="field.field" :label="field.label"
+                :width="field.width" :align="field.align" show-overflow-tooltip>
+                <template #default="scope">
+                  <span>{{ scope.row[field.field || ''] || '--' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="附件信息" minWidth="120px" align="left" fixed="right" show-overflow-tooltip>
+                <template #default="scope">
+                  <span class="text_btn" @click="handleNodeFileView(scope)">查看</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </template>
+        </el-table-column>
+        <el-table-column label="序号" type="index" width="56px" align="center" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column v-for="field in tableInfo.fields" :prop="field.field" :label="field.label" :width="field.width"
+          :align="field.align" show-overflow-tooltip>
+          <template #default="scope">
+            <span>{{ scope.row[field.field || ''] || '--' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="进展阶段" width="320px" align="center">
+          <template #default="scope">
+            <div class="custom-steps" v-if="scope.row.contractNodes?.length">
+              <StepBar :steps-info="getNodeSteps(scope)" />
+            </div>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" minWidth="120px" align="left" fixed="right" show-overflow-tooltip>
+          <template #default="scope">
+            <span class="text_btn" @click="handleTableEdit(scope)">编辑</span>
+            <span class="text_btn ml4" @click="handleTableDel(scope)">删除</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <Drawer :drawerInfo="drawerInfo" @drawerBtnClick="drawerBtnClick" ref="drawerRef"
+      @drawerSelectChange='drawerSelectChange'>
+      <!-- 传递到 Form 组件中的默认插槽 -->
+      <template v-slot:default>
+        <template v-if="drawerRef.getDrawerConRef()?.formInline?.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>
+            <Form ref="nodeFormRef" :itemList="nodeFormItems" formId="node-form" :rules="nodeFormRules" col="col2" />
+          </div>
+
+          <!-- 新增按钮 -->
+          <div class="bottm_tools"
+            v-show="nodesInfo.length < drawerRef.getDrawerConRef()?.formInline?.contractNodeCodes?.length"
+            @click="addNode">
+            <el-icon>
+              <Plus />
+            </el-icon>
+            <span>新增规则</span>
+          </div>
+        </template>
+      </template>
+    </Drawer>
+  </div>
+</template>
+
+<style lang="scss">
+.container_wrap {
+  padding: 0 16px;
+}
+
+.table_panel_wrap {
+  height: calc(100% - 48px);
+}
+
+.ml4 {
+  margin-left: 4px;
+}
+
+:deep(.custom-steps) {
+  width: 100%;
+  height: 60px;
+  display: flex;
+
+  .el-steps {
+    width: 100%;
+  }
+}
+
+.title-label {
+  margin-bottom: 4px;
+}
+
+.bottm_tools {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #fafafa;
+  color: #999;
+  font-size: 14px;
+  border: 1px dashed var(--el-border-color-regular);
+  margin-bottom: 12px;
+
+  >span {
+    margin-left: 8px;
+  }
+
+  &:hover {
+    background: #EBF6F7;
+    border: 1px dashed var(--el-color-primary);
+  }
+}
+</style>
\ No newline at end of file