smartContractManagement.vue 12 KB
<route lang="yaml">
    name: smartContractManagement
    </route>

<script lang="ts" setup name="smartContractManagement">
import { ref } from 'vue';
import TableTools from "@/components/Tools/table_tools.vue";
import {
  getContractPageList,
  contractStatusList,
  deleteContract,
  cancelContract,
} from "@/api/modules/dataSmartContract"
import useDataSmartContract from "@/store/modules/dataSmartContract";
import { commonPageConfig, USERROLE } from '@/utils/enum';

const userData = JSON.parse(localStorage.userData);
const tenantData = JSON.parse(localStorage.tenantInfo);
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance() as any;
const dataSmartContractStore = useDataSmartContract();

/** 是否是数据提供方 */
const isDataUse = computed(() => {
  return localStorage.getItem('userRole') == USERROLE.USE;
})

const searchItemList = ref([
  {
    type: "input",
    label: "",
    field: "contractName",
    default: "",
    placeholder: "合约名称",
    maxlength: 50,
    clearable: true,
  },
  {
    type: 'select',
    label: '',
    field: 'contractStatus',
    default: '',
    placeholder: '合约状态',
    options: contractStatusList,
    filterable: true,
    clearable: true
  }
]);

const tableFields = ref([
  { label: "序号", type: "index", width: 56, align: "center" },
  { label: "合约名称", field: "contractName", width: 160, },
  { label: "签署方式", field: "signModeName", width: 120 },
  { label: "合约状态", field: "contractStatus", type: "tag", width: 96, align: 'center' },
  { label: "合约编号", field: "contractId", width: 355 },
  { label: "发起主体", field: "tenantName", width: 200 },
  { label: "创建人", field: "createUserName", width: 130 },
  { label: "创建时间", field: "createTime", width: 170 },
  { label: "提交企业", field: "submitTenantName", width: 200 },
  { label: "提交时间", field: "submitTime", width: 170 },
]);

const page = ref({
  ...commonPageConfig,
  contractName: '',
  contractStatus: ''
});

const currTableData: any = ref({});
const tableInfo = ref({
  id: 'contract-table',
  rowKey: 'guid',
  loading: false,
  fields: tableFields.value,
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 160,
    btns: (scope) => {
      let row = scope.row;
      let btns: any = [];
      let contractStatus = row.contractStatus;
      if (contractStatus == '00') { //撤回状态,如果是合约发起方有重新提交按钮,否则只能查看
        if (userData.tenantGuid == row.tenantGuid) { //是本人发起的。
          btns.push({ value: 'view', label: '查看', click: () => btnHandles['view'](scope) });
          row.isDisable != 'Y' && btns.push({ value: 'edit', label: '重新提交', click: () => btnHandles['edit'](scope) });
          btns.push({ value: 'delete', label: '删除', click: () => btnHandles['delete'](scope) })
        } else {
          btns.push({ value: 'view', label: '查看', click: () => btnHandles['view'](scope) });
        }
      } else if (contractStatus == '01') { //发起状态
        btns.push({ value: 'edit', label: '编辑', click: () => btnHandles['edit'](scope) });
        btns.push({ value: 'delete', label: '删除', click: () => btnHandles['delete'](scope) })
      } else if (contractStatus == '02') { // 协商
        btns.push({ value: 'view', label: '查看', click: () => btnHandles['view'](scope) });
        /**
         * 1. 中介签署,只需要两方都协商,中介不显示按钮。
         * 2. 点对点的话,只有对方需要协商。只要有继续协商变动之后,就需要对方确认。发起方提交后,如果对方还没协商过,发起方就没有协商按钮。
         */
        if (row.signModeCode == '01') {
          if (row.negotiateEntityGuid == row.dataProviderGuid && userData.tenantGuid == row.dataUserGuid || (row.negotiateEntityGuid == row.dataUserGuid && userData.tenantGuid == row.dataProviderGuid)) {
            btns.push({ value: 'consult', label: '协商', click: () => btnHandles['consult'](scope) });
          }
        } else { //中介协商。
          if (!row.confirmGuids?.length) { //没有确认guids。
            if (row.negotiateEntityGuid != row.dataProviderGuid && row.negotiateEntityGuid != row.dataUserGuid) { //都不是,是中介。
              if ((userData.tenantGuid == row.dataUserGuid || userData.tenantGuid == row.dataProviderGuid)) { //中介新建,两方都有。
                btns.push({ value: 'consult', label: '协商', click: () => btnHandles['consult'](scope) });
              }
            }
          } else { //其中一方继续协商或确认都有confirmGuids
            // 其中一方确认。协商guid还是上次的。
            if (!row.confirmGuids.includes(userData.tenantGuid) && (userData.tenantGuid == row.dataUserGuid || userData.tenantGuid == row.dataProviderGuid)) {
              btns.push({ value: 'consult', label: '协商', click: () => btnHandles['consult'](scope) });
            }
          }
        }
        // 合约发起方才有撤回按钮
        if (userData.tenantGuid == row.tenantGuid) {
          btns.push({ value: 'revoke', label: '撤回', click: () => btnHandles['revoke'](scope) });
        }
      } else if (contractStatus == '03') { //签署,签署过的一方不需要显示签署。
        btns.push({ value: 'view', label: '查看', click: () => btnHandles['view'](scope) });
        if (row.signModeCode == '01') {
          if (!row.signatureList?.includes(userData.tenantGuid)) {
            btns.push({ value: 'sign', label: '签署', click: () => btnHandles['sign'](scope) });
          }
        } else { //中介
          if (!row.signatureList?.includes(userData.tenantGuid) && (userData.tenantGuid == row.dataUserGuid || userData.tenantGuid == row.dataProviderGuid)) {
            btns.push({ value: 'sign', label: '签署', click: () => btnHandles['sign'](scope) });
          }
        }
        // 合约发起方才有撤回按钮
        if (userData.tenantGuid == row.tenantGuid) {
          btns.push({ value: 'revoke', label: '撤回', click: () => btnHandles['revoke'](scope) });
        }
      } else if (contractStatus == '05') { //合约履行中
        btns.push({ value: 'view', label: '查看', click: () => btnHandles['view'](scope) });
        //合约发起方才有合约解除
        if (userData.tenantGuid == row.tenantGuid) {
          btns.push({ value: 'termination', label: '解除', click: () => btnHandles['termination'](scope) });
        }
      } else if (contractStatus == '06' || contractStatus == '0302') {
        btns.push({ value: 'view', label: '查看', click: () => btnHandles['view'](scope) });
      }
      return btns;
    }
  }
});

const btnHandles = {
  edit: (scope) => {
    router.push({
      name: 'smartContractCreate',
      query: {
        guid: scope.row.guid,
        name: scope.row.contractName
      }
    });
  },
  delete: (scope) => {
    proxy.$openMessageBox("此操作将永久删除, 是否继续?", () => {
      deleteContract([scope.row.guid]).then((res: any) => {
        if (res?.code == proxy.$passCode) {
          page.value.curr = 1;
          getTableData();
          proxy.$ElMessage.success('删除成功');
        } else {
          res?.msg && proxy.$ElMessage.error(res?.msg);
        }
      });
    }, () => {
      proxy.$ElMessage.info("已取消");
    })
  },
  consult: (scope) => {
    router.push({
      name: 'smartContractDetail',
      query: {
        guid: scope.row.guid,
        name: scope.row.contractName,
        type: 'consult'
      }
    });
  },
  sign: (scope) => {
    router.push({
      name: 'smartContractDetail',
      query: {
        guid: scope.row.guid,
        name: scope.row.contractName,
        type: 'sign'
      }
    });
  },
  revoke: (scope) => {
    proxy.$openMessageBox("确定撤回该连合约吗?", () => {
      tableInfo.value.loading = true;
      cancelContract(scope.row.guid).then((res: any) => {
        tableInfo.value.loading = false;
        if (res.code == proxy.$passCode) {
          proxy.$ElMessage.success('合约撤回成功');
          getTableData();
        } else {
          proxy.$ElMessage.error(res.msg);
        }
      });
    }, () => {
      proxy.$ElMessage.info("已取消撤回");
    })
  },
  termination: (scope) => {//解除合同
    router.push({
      name: 'smartContractDetail',
      query: {
        guid: scope.row.guid,
        name: scope.row.contractName,
        type: 'reject'
      }
    });
  },
  view: (scope) => {//查看
    if (scope.row.contractStatus == '05') {
      router.push({
        name: 'smartContractDetail',
        query: {
          guid: scope.row.guid,
          name: scope.row.contractName,
          type: 'keepAgree',
          isDetail: 'Y'
        }
      });
    } else {
      router.push({
        name: 'smartContractDetail',
        query: {
          guid: scope.row.guid,
          name: scope.row.contractName,
          isDetail: 'Y'
        }
      });
    }
  }
}

const toSearch = (val: any, clear: boolean = false) => {
  if (clear) {
    searchItemList.value.map((item) => (item.default = ""));
    page.value.contractName = '';
    page.value.contractStatus = "";
  } else {
    page.value.contractName = val.contractName;
    page.value.contractStatus = val.contractStatus;
  }
  getTableData();
};

const getTableData = () => {
  tableInfo.value.loading = true
  getContractPageList({
    pageIndex: page.value.curr,
    pageSize: page.value.limit,
    contractName: page.value.contractName,
    contractStatus: page.value.contractStatus
  }).then((res: any) => {
    tableInfo.value.loading = false
    if (res?.code == proxy.$passCode) {
      const data = res.data || {}
      tableInfo.value.data = data.records || []
      tableInfo.value.page.limit = data.pageSize
      tableInfo.value.page.curr = data.pageIndex
      tableInfo.value.page.rows = data.totalRows
    } else {
      res?.msg && proxy.$ElMessage.error(res?.msg)
    }
  }).catch(() => {
    tableInfo.value.loading = false
  })
};

const tablePageChange = (info) => {
  page.value.curr = Number(info.curr);
  page.value.limit = Number(info.limit);
  tableInfo.value.page.curr = page.value.curr;
  tableInfo.value.page.limit = page.value.limit;
  getTableData();
};

const newCreate = () => {
  if (isDataUse.value) {
    proxy.$ElMessage.error('数据使用方不能新建合约');
    return;
  }
  let exec = () => {
    // 连接器不需要单独控制,没有认证的都不可以进入此菜单权限
    // if (tenantData.isCertification != 'Y' && !currTenantDetailInfo.value.trustedIdentityCredential) { //认证过的
    //   if (userData.superTubeFlag != 'Y') {//平台用户
    //     proxy.$ElMessage.error('请先完成企业认证后再进行创建');
    //     return;
    //   }
    // }
    router.push({
      name: 'smartContractCreate'
    });
  }
  if (psLogon.value) {
    psLogon.value.then(() => {
      exec();
    })
  } else {
    exec();
  }
}

onActivated(() => {
  if (dataSmartContractStore.isRefresh) {//如果是首次加载,则不需要调用
    page.value.curr = 1;
    getTableData();
    dataSmartContractStore.set(false);
  }
})

const psLogon = ref();

onBeforeMount(() => {
  !dataSmartContractStore.isRefresh && toSearch({})
})

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <TableTools :searchItems="searchItemList" :searchId="'contract-search'" @search="toSearch" :init="false" />
      <!-- 数据使用方没有新增按钮 -->
      <div class="tools_btns" v-if="!isDataUse">
        <el-button type="primary" @click="newCreate">新增</el-button>
      </div>
    </div>
    <div class="table_panel_wrap" :style="{ height: !isDataUse ? 'calc(100% - 88px)' : 'calc(100% - 44px)' }">
      <Table :tableInfo="tableInfo" @tablePageChange="tablePageChange" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container_wrap {
  padding: 0px 16px;
}

:deep(.el-tag.el-tag--primary) {
  color: #0E5FD8;
  background: #F2F9FF;
  border: 1px solid rgba(224, 239, 255, 1);
}
</style>