You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
359 lines
11 KiB
359 lines
11 KiB
<template>
|
|
<a-modal v-model:open="visible" :title="title" @ok="handleOk" @cancel="closeModal" width="50%">
|
|
<a-form ref="formRef" :model="form" layout="vertical" :rules="rules">
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<a-form-item label="所属项目" name="projectName">
|
|
<a-select
|
|
v-model:value="form.projectName"
|
|
:options="projectNameOptions"
|
|
placeholder="请选择"
|
|
:fieldNames="{
|
|
label: 'projectName',
|
|
value: 'projectName',
|
|
options: 'options',
|
|
}"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<a-form-item label="合同名称" name="contractName">
|
|
<a-input v-model:value="form.contractName" placeholder="请输入" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<!-- <a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<a-form-item label="父级合同" name="contractParent">
|
|
<a-select
|
|
v-model:value="form.projectName"
|
|
:options="projectNameOptions"
|
|
placeholder="请选择"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row> -->
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<a-form-item label="合同编号" name="contractCode">
|
|
<a-input v-model:value="form.contractCode" placeholder="请输入" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="12">
|
|
<a-form-item label="合同类别" name="contractType">
|
|
<a-select
|
|
v-model:value="form.contractType"
|
|
:options="contractTypeOptions"
|
|
placeholder="请选择"
|
|
:fieldNames="{
|
|
label: 'typeName',
|
|
value: 'id',
|
|
options: 'options',
|
|
}"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="所属区域" name="district">
|
|
<a-select
|
|
v-model:value="form.district"
|
|
:options="districtOptions"
|
|
placeholder="请选择"
|
|
:fieldNames="{
|
|
label: 'districtName',
|
|
value: 'districtName',
|
|
options: 'options',
|
|
}"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="12">
|
|
<a-form-item label="合同金额" name="contractPrice">
|
|
<a-input v-model:value="form.contractPrice" placeholder="请输入" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="签订日期" name="signDate">
|
|
<a-date-picker
|
|
v-model:value="form.signDate"
|
|
placeholder="请选择"
|
|
valueFormat="YYYY-MM-DD"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<a-form-item label="合同工期" name="contractDuration">
|
|
<a-range-picker v-model:value="form.contractDuration" valueFormat="YYYY-MM-DD" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="12">
|
|
<a-form-item label="甲方单位" name="partyA">
|
|
<a-select
|
|
v-model:value="form.partyA"
|
|
:options="partyAOptions"
|
|
placeholder="请选择"
|
|
:fieldNames="{
|
|
label: 'partyName',
|
|
value: 'partyName',
|
|
options: 'options',
|
|
}"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="甲方代表" name="partyAPerson">
|
|
<a-input v-model:value="form.partyAPerson" placeholder="请输入" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="12">
|
|
<a-form-item label="乙方单位" name="partyB">
|
|
<a-select
|
|
v-model:value="form.partyB"
|
|
:options="partyBOptions"
|
|
placeholder="请选择"
|
|
:fieldNames="{
|
|
label: 'partyName',
|
|
value: 'partyName',
|
|
options: 'options',
|
|
}"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item label="乙方代表" name="partyBPerson">
|
|
<a-input v-model:value="form.partyBPerson" placeholder="请输入" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<a-form-item label="合同内容" name="contractContent">
|
|
<a-textarea v-model:value="form.contractContent" :rows="4" placeholder="请输入" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<a-form-item label="备注" name="remark">
|
|
<a-textarea v-model:value="form.remark" :rows="4" placeholder="请输入" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<a-form-item label="附件" name="attachments">
|
|
<a-upload
|
|
v-model:file-list="fileLists"
|
|
:action="`${apiUrl}/resource/oss/upload`"
|
|
:headers="headers"
|
|
@change="handleChange"
|
|
>
|
|
<a-button type="primary"> 上传 </a-button>
|
|
</a-upload>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import { reactive, ref } from 'vue';
|
|
import {
|
|
getInfo,
|
|
add,
|
|
update,
|
|
getPartyInfo,
|
|
getDistrictInfo,
|
|
getProjectInfo,
|
|
getContractType,
|
|
} from './api';
|
|
import { message } from 'ant-design-vue';
|
|
import { getToken } from '@/utils/auth';
|
|
import { useGlobSetting } from '@/hooks/setting';
|
|
export default {
|
|
setup(props,{emit}) {
|
|
const title = ref('新增');
|
|
const formRef = ref();
|
|
const visible = ref(false);
|
|
let form = reactive({
|
|
projectName: null,
|
|
contractName: '',
|
|
contractCode: '',
|
|
// contractParent: '',
|
|
contractType: null,
|
|
district: null,
|
|
contractPrice: '',
|
|
signDate: '',
|
|
contractDuration: [],
|
|
partyA: null,
|
|
partyAPerson: '',
|
|
partyB: null,
|
|
partyBPerson: '',
|
|
contractContent: '',
|
|
remark: '',
|
|
attachments: null,
|
|
id: null,
|
|
});
|
|
//下拉框
|
|
const projectNameOptions = ref([]);
|
|
const contractTypeOptions = ref([]);
|
|
const partyAOptions = ref([]);
|
|
const districtOptions = ref([]);
|
|
const partyBOptions = ref([]);
|
|
const getOptions = async () => {
|
|
const res1 = await getPartyInfo();
|
|
partyAOptions.value = res1.rows.filter((item) => item.partyType == '甲方');
|
|
partyBOptions.value = res1.rows.filter((item) => item.partyType == '乙方');
|
|
const res2 = await getDistrictInfo();
|
|
districtOptions.value = res2;
|
|
const res3 = await getProjectInfo();
|
|
projectNameOptions.value = res3;
|
|
const res4 = await getContractType();
|
|
contractTypeOptions.value = res4.rows;
|
|
};
|
|
getOptions();
|
|
const showModal = async (type, id) => {
|
|
visible.value = true;
|
|
if (type == 1) {
|
|
title.value = '新增';
|
|
} else if (type == 2) {
|
|
title.value = '编辑';
|
|
const data = await getInfo(id);
|
|
for (let i in form) {
|
|
form[i] = data[i];
|
|
}
|
|
if (form.attachments && form.attachments.length > 0) {
|
|
form.attachments.forEach((i) => {
|
|
fileLists.value.push({
|
|
url: i.url,
|
|
name: i.name,
|
|
ossId:i.ossId,
|
|
status: 'done',
|
|
});
|
|
});
|
|
}
|
|
form.contractDuration = [data.startDate, data.endDate];
|
|
}
|
|
};
|
|
|
|
const rules = {
|
|
projectName: [{ required: true, message: '请选择' }],
|
|
contractName: [{ required: true, message: '请输入' }],
|
|
contractCode: [{ required: true, message: '请输入' }],
|
|
contractType: [{ required: true, message: '请选择' }],
|
|
district: [{ required: true, message: '请选择' }],
|
|
contractPrice: [{ required: true, message: '请输入' }],
|
|
signDate: [{ required: true, message: '请选择' }],
|
|
contractDuration: [{ required: true, message: '请选择' }],
|
|
partyA: [{ required: true, message: '请选择' }],
|
|
partyAPerson: [{ required: true, message: '请输入' }],
|
|
partyB: [{ required: true, message: '请选择' }],
|
|
partyBPerson: [{ required: true, message: '请输入' }],
|
|
contractContent: [{ required: true, message: '请输入' }],
|
|
// remark: [{ required: true, message: '请输入' }],
|
|
};
|
|
const handleOk = () => {
|
|
formRef.value.validate().then((valid) => {
|
|
if (valid) {
|
|
if (title.value == '新增') {
|
|
let params = {};
|
|
for (let i in form) {
|
|
params[i] = form[i];
|
|
}
|
|
delete params.id;
|
|
params.startDate = params.contractDuration[0];
|
|
params.endDate = params.contractDuration[1];
|
|
add(params).then((_) => {
|
|
message.success('新增成功');
|
|
emit('success')
|
|
closeModal();
|
|
});
|
|
} else {
|
|
let params = {};
|
|
for (let i in form) {
|
|
params[i] = form[i];
|
|
}
|
|
params.startDate = params.contractDuration[0];
|
|
params.endDate = params.contractDuration[1];
|
|
update(params).then((_) => {
|
|
message.success('编辑成功');
|
|
emit('success')
|
|
closeModal();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
};
|
|
const closeModal = () => {
|
|
formRef.value.resetFields();
|
|
fileLists.value = [];
|
|
visible.value = false;
|
|
};
|
|
//上传功能
|
|
const fileLists = ref([]);
|
|
const globSetting = useGlobSetting();
|
|
const { apiUrl, clientId } = globSetting;
|
|
const handleChange = (info) => {
|
|
if (info.fileList.length > 0) {
|
|
form.attachments = [];
|
|
info.fileList.forEach((i) => {
|
|
if (i.status == 'done') {
|
|
form.attachments.push({
|
|
url: i.response?.data.url || i.url,
|
|
name: i.response?.data.fileName || i.name,
|
|
ossId:i.response?.data.ossId || i.ossId
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
form.attachments = null;
|
|
}
|
|
console.log(fileLists);
|
|
};
|
|
return {
|
|
visible,
|
|
title,
|
|
form,
|
|
showModal,
|
|
handleOk,
|
|
formRef,
|
|
closeModal,
|
|
projectNameOptions,
|
|
contractTypeOptions,
|
|
districtOptions,
|
|
partyAOptions,
|
|
partyBOptions,
|
|
rules,
|
|
apiUrl,
|
|
headers: {
|
|
Authorization: 'Bearer ' + getToken(),
|
|
clientId,
|
|
},
|
|
handleChange,
|
|
fileLists,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 可选样式调整 */
|
|
.ant-modal-body {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
|