Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
9c5ba139 by lihua
Options

合同进度一览接口联调

1 parent f6e2f544
Inline Side-by-side
Showing 5 changed files with 370 additions and 97 deletions
src/api/modules/dataAsset.ts
......@@ -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. */
......
src/components/Drawer/index.vue
......@@ -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);
}
});
......
src/components/Form/index.vue
......@@ -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'"
......
src/components/Tools/table_search.vue
......@@ -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" />
......
src/views/data_asset/contractProgress.vue
......@@ -6,15 +6,19 @@
import { ref } from 'vue';
import { TableColumnWidth, commonPageConfig } from '@/utils/enum';
import {
saveDamContract,
updateDamContract,
delDamContract,
getContractList,
getParamsList,
getTenantList,
getOwnerTenantList
getTenantList
} 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;
// 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);
// }
// })
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 currTableData: any = ref({});
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: "contractName", width: 160, align: "left" },
{ 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: '开始日期',
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,
label: "开始日期~结束日期",
type: "date-picker",
field: "dateRange",
default: [],
placeholder: "开始日期~结束日期",
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('请填写开始日期')],
endDate: [required('请填写结束日期')],
dateRange: [{
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 {
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;
contractEditFormItems.value[3].options = partyAList.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"
:style="{ width: '100%', height: 'calc(100% - 8px)', marginTop: '8px', display: 'inline-block', }">
border height="100%" tooltip-effect="light" row-key="guid" class="expand-table"
: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>
<Form ref="nodeFormRef" :itemList="nodeFormItems" formId="node-form" :rules="nodeFormRules" col="col2" />
<div class="title-row"><span class="title">{{ row.contractNodeName }}</span><span class="btns"
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"
v-show="nodesInfo.length < drawerRef.getDrawerConRef()?.formInline?.contractNodeCodes?.length"
@click="addNode">
<div class="bottm_tools" v-show="nodesInfo.length < 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
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!