This commit is contained in:
z9130 2024-09-20 16:51:17 +08:00
commit bb708ffbc0
4 changed files with 1480 additions and 18 deletions

View File

@ -0,0 +1,308 @@
import { DICT_TYPE, getDictObj, getDictOptions } from '#/utils/dict';
import { dict } from '@fast-crud/fast-crud';
/**
*
*
*/
function filterContractTypes(contractTypeData: any = [], parentId: string) {
return contractTypeData
.map((item) => {
item.label = item.contrLevelName;
item.value = item.contrLevelId;
return item;
})
.filter((item) => item.parentId === parentId);
}
export function getFormSchema(params: any = {}) {
const { contractTypeData, readOnly = false } = params;
return {
contractName: {
title: '合同名称',
key: 'contractName',
col: { span: 24 },
component: {
name: 'a-input',
vModel: 'value',
allowClear: false,
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return <span>{form.contractName}</span>;
},
},
rules: [{ required: true }],
},
ctrType: {
title: '合同类别',
key: 'ctrType',
col: { span: 12 },
component: {
name: 'fs-dict-select',
vModel: 'value',
class: 'min-w-[200px]',
dict: dict({
async getData({ form = {} }) {
return filterContractTypes(contractTypeData, '-1');
},
}),
},
valueChange({ form, value, getComponentRef }) {
form.ctrTwoType = undefined;
if (value) {
getComponentRef('ctrTwoType').reloadDict(); // 执行city的select组件的reloadDict()方法触发“city”重新加载字典
}
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
let data = filterContractTypes(contractTypeData, '-1');
for (const item of data) {
if (item.value === form.ctrType) {
return <span>{item.label}</span>;
}
}
return <span></span>;
},
},
rules: [{ required: true }],
},
ctrTwoType: {
title: '二级类别',
key: 'ctrTwoType',
col: { span: 12 },
component: {
name: 'fs-dict-select',
vModel: 'value',
class: 'min-w-[200px]',
dict: dict({
async getData({ form = {} }) {
return filterContractTypes(contractTypeData, form.ctrType);
},
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
let data = filterContractTypes(contractTypeData, form.ctrType);
for (const item of data) {
if (item.value === form.ctrTwoType) {
return <span>{item.label}</span>;
}
}
return <span></span>;
},
},
rules: [{ required: true }],
},
frameProtocol: {
title: '框架协议',
key: 'frameProtocol',
col: { span: 8 },
component: {
name: 'fs-dict-radio',
vModel: 'value',
dict: dict({
data: getDictOptions(DICT_TYPE.common_whether),
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="">
{getDictObj(DICT_TYPE.common_whether, form.frameProtocol)?.label}
</span>
);
},
},
},
frameProtocolCtr: {
title: '框架协议下的合同',
key: 'frameProtocolCtr',
col: { span: 12 },
labelCol: { style: { width: '200px' } },
component: {
name: 'fs-dict-radio',
vModel: 'value',
dict: dict({
data: getDictOptions(DICT_TYPE.common_whether),
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="">
{
getDictObj(DICT_TYPE.common_whether, form.frameProtocolCtr)
?.label
}
</span>
);
},
},
},
fundAllocation: {
title: '资金流向',
key: 'fundAllocation',
col: { span: 12 },
component: {
name: 'fs-dict-select',
vModel: 'value',
allowClear: false,
class: 'min-w-[200px]',
dict: dict({
data: getDictOptions(DICT_TYPE.contract_fund_flow),
}),
},
valueChange: {
immediate: true, //是否立即执行一次
handle({ form }) {
console.log(form);
form.fundAllocationName = getDictObj(
DICT_TYPE.contract_fund_flow,
form.fundAllocation,
)?.label;
},
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="">
{
getDictObj(DICT_TYPE.contract_fund_flow, form.fundAllocation)
?.label
}
</span>
);
},
},
rules: [{ required: true, message: '请选择资金流向' }],
},
fundDitch: {
title: '资金渠道',
key: 'fundDitch',
col: { span: 12 },
component: {
name: 'fs-dict-select',
vModel: 'value',
allowClear: false,
class: 'min-w-[200px]',
dict: dict({
data: getDictOptions(DICT_TYPE.contract_funding_source),
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="">
{
getDictObj(DICT_TYPE.contract_funding_source, form.fundDitch)
?.label
}
</span>
);
},
},
rules: [{ required: true, message: '请选择资金渠道' }],
},
budgetSum: {
title: '预算金额',
key: 'budgetSum',
col: { span: 8 },
colon: false,
component: {
name: 'a-input-number',
vModel: 'value',
class: 'w-full',
min: 0,
max: 9999,
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return <span class="">{form.budgetSum}</span>;
},
},
},
priceType: {
title: '',
key: 'priceType',
col: { span: 6 },
labelCol: { style: { width: '12px' } },
colon: false,
component: {
name: 'fs-dict-select',
vModel: 'value',
dict: dict({
data: getDictOptions(DICT_TYPE.contract_currency_unit),
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="mr-2">
{getDictObj(DICT_TYPE.contract_currency_unit, form.priceType)}
</span>
);
},
},
},
organiza: {
title: '组织形式',
key: 'organiza',
col: { span: 24 },
component: {
name: 'fs-dict-radio',
vModel: 'value',
allowClear: false,
class: 'min-w-[200px]',
dict: dict({
data: getDictOptions(DICT_TYPE.contract_organization_form),
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="">
{getDictObj(DICT_TYPE.contract_organization_form, form.organiza)}
</span>
);
},
},
rules: [{ required: true, message: '请选择组织形式' }],
},
fileList: {
title: '相关附件',
key: 'fileList',
},
};
}

View File

@ -1,13 +1,221 @@
<template>
<div>
<script setup lang="ts">
import { ref, computed, reactive, onMounted, nextTick, onUnmounted } from 'vue';
import { MdiAdd } from '@vben/icons';
import { Page, useVbenModal } from '@vben/common-ui';
import { dict, type FormScopeContext } from '@fast-crud/fast-crud';
import { MdiUpload } from '@vben/icons';
import { useRouter } from 'vue-router';
import dayjs, { Dayjs } from 'dayjs';
import Apis from '#/api';
import {
message,
Modal,
type UploadChangeParam,
type UploadProps,
} from 'ant-design-vue';
import { useUserStore } from '@vben/stores';
import { useRoute } from 'vue-router';
import { getFormSchema } from './curd';
import { FileUploader } from '#/utils/file';
import { DICT_TYPE, getDictObj, getDictOptions } from '#/utils/dict';
import { useVxeTable } from '#/hooks/vxeTable';
import { useRender } from '#/hooks/useRender';
import type { VxeGridPropTypes } from 'vxe-table';
const { xGridRef, gridProps, triggerProxy } = useVxeTable({ ref: 'xGridRef' });
const userStore = useUserStore();
const fileUploader = new FileUploader({});
const router = useRouter();
const route = useRoute();
const id = ref(route.params.id);
const pageRef = ref();
const currData = ref({});
const formRef = ref();
let isLoading = ref(false);
let contractTypeData = ref([]);
let collapses = ['1', '2'];
let collapseActiveKey = ref(collapses);
const formBinding = ref({
col: { span: 24 },
initialForm: {
contractName: '',
frameProtocol: '0',
frameProtocolCtr: '0',
priceType: 'CNY',
},
labelCol: { style: { width: '120px' } },
columns: {},
});
function getColumns(params?): any {
let columns: VxeGridPropTypes.Columns = [
{ type: 'seq', title: '序号', width: 60 },
{ field: 'basisId', title: '依据号', width: 130 },
{
field: 'basisName',
title: '依据名称',
width: 200,
},
{ field: 'basisNum', title: '依据编号', width: 180 },
{
field: 'basisTypeId',
title: '依据类型',
width: 100,
slots: {
default: ({ row }) => {
return getDictObj(DICT_TYPE.contract_basis_type, row.basisTypeId)
?.label;
},
},
},
{
field: 'endDate',
title: '有效期',
width: 150,
slots: {
default: ({ row }) => {
return useRender.renderDate(row.endDate, 'YYYY-MM-DD');
},
},
},
];
if (!id.value || (id.value && currData.value.step == 'edit')) {
columns.push({
title: '操作',
width: 120,
slots: { default: 'operate' },
});
}
return columns;
}
/** Hooks - 表格 */
const gridOptions = reactive(
gridProps({
height: '200px',
columns: getColumns(),
data: [],
toolbarConfig: {
enabled: false,
},
pagerConfig: {
enabled: false,
},
rowConfig: {
useKey: true,
isCurrent: false,
},
}),
);
onMounted(async () => {
isLoading.value = true;
console.log(id.value);
try {
let contractReferTypeData = await Apis.contractReferType.get_list({
params: {},
});
contractTypeData.value = contractReferTypeData.rows || [];
if (id.value) {
let data: any = await Apis.contractBaseInfo.get_getOne({
params: { guid: id.value },
});
console.log(data);
currData.value = data;
formBinding.value.columns = getFormSchema({
contractTypeData: contractTypeData.value,
readOnly: !id.value || currData.value.step != 'edit',
});
xGridRef.value.reloadColumn(getColumns());
nextTick(() => {
formRef.value.setFormData(data);
});
//
if (data.basisId) {
let basisList = await Apis.lxBasisSale.get_page({
params: { basisId: data.basisId },
});
nextTick(() => {
xGridRef.value.insert(basisList.rows);
});
}
if (data.fileUuid) {
let files = await fileUploader.select(data.fileUuid);
console.log(files);
nextTick(() => {
formRef.value.setFormData({
fileList: files,
});
});
}
loadDataByContractTypeData();
} else {
formBinding.value.columns = getFormSchema({
contractTypeData: contractTypeData.value,
readOnly: false,
});
}
} catch (error) {
console.log(error);
Modal.error({
title: '提示',
content: '当前合同信息不存在',
onOk() {
back();
},
});
} finally {
isLoading.value = false;
}
});
</script>
<template>
<div class="flex h-full w-full flex-col">
<a-collapse v-model:activeKey="collapseActiveKey" :bordered="false">
<a-collapse-panel key="1" header="基本信息" class="w-full">
<fs-form ref="formRef" class="w-full" v-bind="formBinding">
<template #form_fileList="scope">
<a-upload
v-model:fileList="scope.form.fileList"
accept=".pdf,.ppt,.pptx"
:max-count="3"
name="file"
>
</a-upload>
</template>
</fs-form>
</a-collapse-panel>
<a-collapse-panel key="2" header="签约依据" class="w-full">
<template #extra> </template>
<VxeGrid ref="xGridRef" v-bind="gridOptions" class="">
<template #toolbar_buttons></template>
</VxeGrid>
</a-collapse-panel>
</a-collapse>
</div>
</template>
<script lang="ts" setup>
</script>
<style>
</style>
<style scoped></style>

View File

@ -0,0 +1,703 @@
import { DICT_TYPE, getDictObj, getDictOptions } from '#/utils/dict';
import { dict } from '@fast-crud/fast-crud';
/**
*
*
*/
function filterContractTypes(contractTypeData: any = [], parentId: string) {
return contractTypeData
.map((item) => {
item.label = item.contrLevelName;
item.value = item.contrLevelId;
return item;
})
.filter((item) => item.parentId === parentId);
}
export function getFormSchema(params: any = {}) {
const { contractTypeData, readOnly = false } = params;
return {
contractName: {
title: '合同名称',
key: 'contractName',
col: { span: 24 },
component: {
name: 'a-input',
vModel: 'value',
allowClear: false,
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return <span>{form.contractName}</span>;
},
},
rules: [{ required: true }],
},
ctrType: {
title: '合同类别',
key: 'ctrType',
col: { span: 12 },
component: {
name: 'fs-dict-select',
vModel: 'value',
class: 'min-w-[200px]',
dict: dict({
async getData({ form = {} }) {
return filterContractTypes(contractTypeData, '-1');
},
}),
},
valueChange({ form, value, getComponentRef }) {
form.ctrTwoType = undefined;
if (value) {
getComponentRef('ctrTwoType').reloadDict(); // 执行city的select组件的reloadDict()方法触发“city”重新加载字典
}
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
let data = filterContractTypes(contractTypeData, '-1');
for (const item of data) {
if (item.value === form.ctrType) {
return <span>{item.label}</span>;
}
}
return <span></span>;
},
},
rules: [{ required: true }],
},
ctrTwoType: {
title: '二级类别',
key: 'ctrTwoType',
col: { span: 12 },
component: {
name: 'fs-dict-select',
vModel: 'value',
class: 'min-w-[200px]',
dict: dict({
async getData({ form = {} }) {
return filterContractTypes(contractTypeData, form.ctrType);
},
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
let data = filterContractTypes(contractTypeData, form.ctrType);
for (const item of data) {
if (item.value === form.ctrTwoType) {
return <span>{item.label}</span>;
}
}
return <span></span>;
},
},
rules: [{ required: true }],
},
frameProtocol: {
title: '框架协议',
key: 'frameProtocol',
col: { span: 8 },
component: {
name: 'fs-dict-radio',
vModel: 'value',
dict: dict({
data: getDictOptions(DICT_TYPE.common_whether),
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="">
{getDictObj(DICT_TYPE.common_whether, form.frameProtocol)?.label}
</span>
);
},
},
},
frameProtocolCtr: {
title: '框架协议下的合同',
key: 'frameProtocolCtr',
col: { span: 12 },
labelCol: { style: { width: '200px' } },
component: {
name: 'fs-dict-radio',
vModel: 'value',
dict: dict({
data: getDictOptions(DICT_TYPE.common_whether),
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="">
{
getDictObj(DICT_TYPE.common_whether, form.frameProtocolCtr)
?.label
}
</span>
);
},
},
},
fundAllocation: {
title: '资金流向',
key: 'fundAllocation',
col: { span: 12 },
component: {
name: 'fs-dict-select',
vModel: 'value',
allowClear: false,
class: 'min-w-[200px]',
dict: dict({
data: getDictOptions(DICT_TYPE.contract_fund_flow),
}),
},
valueChange: {
immediate: true, //是否立即执行一次
handle({ form }) {
console.log(form);
form.fundAllocationName = getDictObj(
DICT_TYPE.contract_fund_flow,
form.fundAllocation,
)?.label;
},
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="">
{
getDictObj(DICT_TYPE.contract_fund_flow, form.fundAllocation)
?.label
}
</span>
);
},
},
rules: [{ required: true, message: '请选择资金流向' }],
},
fundDitch: {
title: '资金渠道',
key: 'fundDitch',
col: { span: 12 },
component: {
name: 'fs-dict-select',
vModel: 'value',
allowClear: false,
class: 'min-w-[200px]',
dict: dict({
data: getDictOptions(DICT_TYPE.contract_funding_source),
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="">
{
getDictObj(DICT_TYPE.contract_funding_source, form.fundDitch)
?.label
}
</span>
);
},
},
rules: [{ required: true, message: '请选择资金渠道' }],
},
budgetSum: {
title: '预算金额',
key: 'budgetSum',
col: { span: 8 },
colon: false,
component: {
name: 'a-input-number',
vModel: 'value',
class: 'w-full',
min: 0,
max: 9999,
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return <span class="">{form.budgetSum}</span>;
},
},
},
priceType: {
title: '',
key: 'priceType',
col: { span: 6 },
labelCol: { style: { width: '12px' } },
colon: false,
component: {
name: 'fs-dict-select',
vModel: 'value',
dict: dict({
data: getDictOptions(DICT_TYPE.contract_currency_unit),
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="mr-2">
{getDictObj(DICT_TYPE.contract_currency_unit, form.priceType)}
</span>
);
},
},
},
organiza: {
title: '组织形式',
key: 'organiza',
col: { span: 24 },
component: {
name: 'fs-dict-radio',
vModel: 'value',
allowClear: false,
class: 'min-w-[200px]',
dict: dict({
data: getDictOptions(DICT_TYPE.contract_organization_form),
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="">
{getDictObj(DICT_TYPE.contract_organization_form, form.organiza)}
</span>
);
},
},
rules: [{ required: true, message: '请选择组织形式' }],
},
fileList: {
title: '相关附件',
key: 'fileList',
},
};
}
export function getFormSchema2(params: any = {}) {
const { contractTypeData, readOnly = false } = params;
return {
contractName: {
title: '项目',
key: 'contractName',
col: { span: 12 },
component: {
name: 'a-input',
vModel: 'value',
allowClear: false,
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return <span>{form.contractName}</span>;
},
},
rules: [{ required: true }],
},
ctrType: {
title: '项目类别',
key: 'ctrType',
col: { span: 12 },
component: {
name: 'fs-dict-select',
vModel: 'value',
class: 'min-w-[200px]',
dict: dict({
async getData({ form = {} }) {
return filterContractTypes(contractTypeData, '-1');
},
}),
},
valueChange({ form, value, getComponentRef }) {
form.ctrTwoType = undefined;
if (value) {
getComponentRef('ctrTwoType').reloadDict(); // 执行city的select组件的reloadDict()方法触发“city”重新加载字典
}
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
let data = filterContractTypes(contractTypeData, '-1');
for (const item of data) {
if (item.value === form.ctrType) {
return <span>{item.label}</span>;
}
}
return <span></span>;
},
},
rules: [{ required: true }],
},
ctrTwoType: {
title: '项目名称',
key: 'ctrTwoType',
col: { span: 24 },
component: {
name: 'fs-dict-select',
vModel: 'value',
class: 'min-w-[200px]',
dict: dict({
async getData({ form = {} }) {
return filterContractTypes(contractTypeData, form.ctrType);
},
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
let data = filterContractTypes(contractTypeData, form.ctrType);
for (const item of data) {
if (item.value === form.ctrTwoType) {
return <span>{item.label}</span>;
}
}
return <span></span>;
},
},
rules: [{ required: true }],
},
frameProtocol: {
title: '商务计价方式',
key: 'frameProtocol',
col: { span: 24 },
component: {
name: 'fs-dict-radio',
vModel: 'value',
dict: dict({
data: getDictOptions(DICT_TYPE.common_whether),
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="">
{getDictObj(DICT_TYPE.common_whether, form.frameProtocol)?.label}
</span>
);
},
},
},
frameProtocolCtr: {
title: '选商方式',
key: 'frameProtocolCtr',
col: { span: 24 },
labelCol: { style: { width: '200px' } },
component: {
name: 'fs-dict-radio',
vModel: 'value',
dict: dict({
data: getDictOptions(DICT_TYPE.common_whether),
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="">
{
getDictObj(DICT_TYPE.common_whether, form.frameProtocolCtr)
?.label
}
</span>
);
},
},
},
fundAllocation: {
title: '选商方式说明',
key: 'fundAllocation',
col: { span: 24 },
component: {
name: 'fs-dict-select',
vModel: 'value',
allowClear: false,
class: 'min-w-[200px]',
dict: dict({
data: getDictOptions(DICT_TYPE.contract_fund_flow),
}),
},
valueChange: {
immediate: true, //是否立即执行一次
handle({ form }) {
console.log(form);
form.fundAllocationName = getDictObj(
DICT_TYPE.contract_fund_flow,
form.fundAllocation,
)?.label;
},
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="">
{
getDictObj(DICT_TYPE.contract_fund_flow, form.fundAllocation)
?.label
}
</span>
);
},
},
rules: [{ required: true, message: '请选择资金流向' }],
},
fundDitch: {
title: '资质要求',
key: 'fundDitch',
col: { span: 24 },
component: {
name: 'fs-dict-select',
vModel: 'value',
allowClear: false,
class: 'min-w-[200px]',
dict: dict({
data: getDictOptions(DICT_TYPE.contract_funding_source),
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="">
{
getDictObj(DICT_TYPE.contract_funding_source, form.fundDitch)
?.label
}
</span>
);
},
},
rules: [{ required: true, message: '请选择资金渠道' }],
},
budgetSum: {
title: '受托招标代理',
key: 'budgetSum',
col: { span: 24 },
colon: false,
component: {
name: 'a-input-number',
vModel: 'value',
class: 'w-full',
min: 0,
max: 9999,
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return <span class="">{form.budgetSum}</span>;
},
},
},
priceType: {
title: '',
key: 'priceType',
col: { span: 6 },
labelCol: { style: { width: '12px' } },
colon: false,
component: {
name: 'fs-dict-select',
vModel: 'value',
dict: dict({
data: getDictOptions(DICT_TYPE.contract_currency_unit),
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="mr-2">
{getDictObj(DICT_TYPE.contract_currency_unit, form.priceType)}
</span>
);
},
},
},
organiza: {
title: '推荐供应商',
key: 'organiza',
col: { span: 24 },
component: {
name: 'fs-dict-radio',
vModel: 'value',
allowClear: false,
class: 'min-w-[200px]',
dict: dict({
data: getDictOptions(DICT_TYPE.contract_organization_form),
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="">
{getDictObj(DICT_TYPE.contract_organization_form, form.organiza)}
</span>
);
},
},
rules: [{ required: true, message: '请选择组织形式' }],
},
organiza1: {
title: '项目范围',
key: 'organiza',
col: { span: 24 },
component: {
name: 'a-input',
vModel: 'value',
allowClear: false,
class: 'min-w-[200px]',
dict: dict({
data: getDictOptions(DICT_TYPE.contract_organization_form),
}),
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return (
<span class="">
{getDictObj(DICT_TYPE.contract_organization_form, form.organiza)}
</span>
);
},
},
rules: [{ required: true, message: '请选择组织形式' }],
},
contractName1: {
title: '项目内容',
key: 'contractName',
col: { span: 12 },
component: {
name: 'a-input',
vModel: 'value',
allowClear: false,
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return <span>{form.contractName}</span>;
},
},
rules: [{ required: true }],
},
contractName2: {
title: '工期要求(质量要求)',
key: 'contractName',
col: { span: 12 },
component: {
name: 'a-input',
vModel: 'value',
allowClear: false,
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return <span>{form.contractName}</span>;
},
},
rules: [{ required: true }],
},
contractName3: {
title: '工程量(采购量)',
key: 'contractName',
col: { span: 12 },
component: {
name: 'a-input',
vModel: 'value',
allowClear: false,
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return <span>{form.contractName}</span>;
},
},
rules: [{ required: true }],
},
contractName4: {
title: '计划投资明细',
key: 'contractName',
col: { span: 12 },
component: {
name: 'a-input',
vModel: 'value',
allowClear: false,
},
conditionalRender: {
match({ form }) {
return readOnly;
},
render({ form }) {
return <span>{form.contractName}</span>;
},
},
rules: [{ required: true }],
},
fileList: {
title: '相关附件',
key: 'fileList',
},
};
}

View File

@ -1,13 +1,256 @@
<template>
<div>
<script setup lang="ts">
import { ref, computed, reactive, onMounted, nextTick, onUnmounted } from 'vue';
import { MdiAdd } from '@vben/icons';
import { Page, useVbenModal } from '@vben/common-ui';
import { dict, type FormScopeContext } from '@fast-crud/fast-crud';
import { MdiUpload } from '@vben/icons';
import { useRouter } from 'vue-router';
import dayjs, { Dayjs } from 'dayjs';
import Apis from '#/api';
import {
message,
Modal,
type UploadChangeParam,
type UploadProps,
} from 'ant-design-vue';
import { useUserStore } from '@vben/stores';
import { useRoute } from 'vue-router';
import { getFormSchema,getFormSchema2 } from './curd.tsx';
import { FileUploader } from '#/utils/file';
import { DICT_TYPE, getDictObj, getDictOptions } from '#/utils/dict';
import { useVxeTable } from '#/hooks/vxeTable';
import { useRender } from '#/hooks/useRender';
import type { VxeGridPropTypes } from 'vxe-table';
const { xGridRef, gridProps, triggerProxy } = useVxeTable({ ref: 'xGridRef' });
const userStore = useUserStore();
const fileUploader = new FileUploader({});
const router = useRouter();
const route = useRoute();
const id = ref(route.params.id);
const pageRef = ref();
const currData = ref({});
const formRef = ref();
const formRef2 = ref();
let isLoading = ref(false);
let contractTypeData = ref([]);
let collapses = ['1', '2'];
let collapseActiveKey = ref(collapses);
const formBinding = ref({
col: { span: 24 },
initialForm: {
contractName: '',
frameProtocol: '0',
frameProtocolCtr: '0',
priceType: 'CNY',
},
labelCol: { style: { width: '120px' } },
columns: {},
});
const formBinding2 = ref({
col: { span: 24 },
initialForm: {
contractName: '',
frameProtocol: '0',
frameProtocolCtr: '0',
priceType: 'CNY',
},
labelCol: { style: { width: '120px' } },
columns: {},
});
function getColumns(params?): any {
let columns: VxeGridPropTypes.Columns = [
{ type: 'seq', title: '序号', width: 60 },
{ field: 'basisId', title: '依据号', width: 130 },
{
field: 'basisName',
title: '依据名称',
width: 200,
},
{ field: 'basisNum', title: '依据编号', width: 180 },
{
field: 'basisTypeId',
title: '依据类型',
width: 100,
slots: {
default: ({ row }) => {
return getDictObj(DICT_TYPE.contract_basis_type, row.basisTypeId)
?.label;
},
},
},
{
field: 'endDate',
title: '有效期',
width: 150,
slots: {
default: ({ row }) => {
return useRender.renderDate(row.endDate, 'YYYY-MM-DD');
},
},
},
];
if (!id.value || (id.value && currData.value.step == 'edit')) {
columns.push({
title: '操作',
width: 120,
slots: { default: 'operate' },
});
}
return columns;
}
/** Hooks - 表格 */
const gridOptions = reactive(
gridProps({
height: '200px',
columns: getColumns(),
data: [],
toolbarConfig: {
enabled: false,
},
pagerConfig: {
enabled: false,
},
rowConfig: {
useKey: true,
isCurrent: false,
},
}),
);
onMounted(async () => {
isLoading.value = true;
console.log(id.value);
try {
let contractReferTypeData = await Apis.contractReferType.get_list({
params: {},
});
contractTypeData.value = contractReferTypeData.rows || [];
if (id.value) {
let data: any = await Apis.contractBaseInfo.get_getOne({
params: { guid: id.value },
});
console.log(data);
currData.value = data;
formBinding.value.columns = getFormSchema({
contractTypeData: contractTypeData.value,
readOnly: !id.value || currData.value.step != 'edit',
});
formBinding2.value.columns = getFormSchema2({
contractTypeData: contractTypeData.value,
readOnly: !id.value || currData.value.step != 'edit',
});
xGridRef.value.reloadColumn(getColumns());
nextTick(() => {
formRef.value.setFormData(data);
});
//
if (data.basisId) {
let basisList = await Apis.lxBasisSale.get_page({
params: { basisId: data.basisId },
});
nextTick(() => {
xGridRef.value.insert(basisList.rows);
});
}
if (data.fileUuid) {
let files = await fileUploader.select(data.fileUuid);
console.log(files);
nextTick(() => {
formRef.value.setFormData({
fileList: files,
});
});
}
loadDataByContractTypeData();
} else {
formBinding.value.columns = getFormSchema({
contractTypeData: contractTypeData.value,
readOnly: false,
});
formBinding2.value.columns = getFormSchema2({
contractTypeData: contractTypeData.value,
readOnly: false,
});
}
} catch (error) {
console.log(error);
Modal.error({
title: '提示',
content: '当前合同信息不存在',
onOk() {
back();
},
});
} finally {
isLoading.value = false;
}
});
</script>
<template>
<div class="flex h-full w-full flex-col">
<a-collapse v-model:activeKey="collapseActiveKey" :bordered="false">
<a-collapse-panel key="1" header="合同基本信息" class="w-full">
<fs-form ref="formRef" class="w-full" v-bind="formBinding">
<template #form_fileList="scope">
<a-upload
v-model:fileList="scope.form.fileList"
accept=".pdf,.ppt,.pptx"
:max-count="3"
name="file"
>
</a-upload>
</template>
</fs-form>
</a-collapse-panel>
<a-collapse-panel key="3" header="选商资料" class="w-full">
<fs-form ref="formRef2" class="w-full" v-bind="formBinding2">
<template #form_fileList="scope">
<a-upload
v-model:fileList="scope.form.fileList"
accept=".pdf,.ppt,.pptx"
:max-count="3"
name="file"
>
</a-upload>
</template>
</fs-form>
</a-collapse-panel>
<a-collapse-panel key="2" header="签约依据" class="w-full">
<template #extra> </template>
<VxeGrid ref="xGridRef" v-bind="gridOptions" class="">
<template #toolbar_buttons></template>
</VxeGrid>
</a-collapse-panel>
</a-collapse>
</div>
</template>
<script lang="ts" setup>
</script>
<style>
</style>
<style scoped></style>