parent
02988db332
commit
071ad70fe8
@ -0,0 +1,167 @@
|
|||||||
|
<template>
|
||||||
|
<el-card class="build-contract">
|
||||||
|
<template #header>
|
||||||
|
<div class="header">
|
||||||
|
<div>
|
||||||
|
<span style="margin-right: 10px;">生成合同</span>
|
||||||
|
<small> ( <span style="color: #f56c6c;">*</span> 为必填项 )</small>
|
||||||
|
</div>
|
||||||
|
<el-button type="primary" text @click="() => { }">预览合同</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="content">
|
||||||
|
<div class="lead">
|
||||||
|
<div class="title">
|
||||||
|
<span class="lc"></span>
|
||||||
|
<span class="lh">合同类型</span>
|
||||||
|
</div>
|
||||||
|
<div class="tips">
|
||||||
|
<el-alert title="不同的合同类型可编辑的字段内容不同,合同类型一旦保存不可修改,请选择更匹配你需求的一个。" type="warning" />
|
||||||
|
</div>
|
||||||
|
<div class="types">
|
||||||
|
<el-button-group>
|
||||||
|
<template v-for="item in contract_types" :key="item.value">
|
||||||
|
<el-button :type="item.value == activeType ? 'primary' : 'default'" class="type"
|
||||||
|
:class="item.value == activeType ? 'active' : ''" @click="changeContractType(item.value)">{{ item.label
|
||||||
|
}}</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- <el-button type="default" class="type">销售合同</el-button>
|
||||||
|
<el-button type="default" class="type">仓储合同</el-button> -->
|
||||||
|
</el-button-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-area">
|
||||||
|
<ProcureContract />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<el-divider />
|
||||||
|
<div class="options">
|
||||||
|
<el-button type="primary" style="width: 120px;" size="large">保存</el-button>
|
||||||
|
<el-button type="default" style="width: 120px;" size="large" plain>返回</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts" name="BuildContract">
|
||||||
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
||||||
|
import * as ContractApi from '@/api/xxjj/contract'
|
||||||
|
import ProcureContract from './components/types/procure/ProcureContract.vue'
|
||||||
|
|
||||||
|
const { t } = useI18n() // 国际化
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
|
||||||
|
const contract_types = ref<any>([]);
|
||||||
|
|
||||||
|
const activeType = ref('1');
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
contract_types.value = getStrDictOptions(DICT_TYPE.CONTRACT_TYPE)
|
||||||
|
console.log(contract_types);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 切换合同类型
|
||||||
|
const changeContractType = (typeVal) => {
|
||||||
|
activeType.value = typeVal
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.build-contract {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
::v-deep {
|
||||||
|
.el-card__header {
|
||||||
|
background-color: rgba(249, 249, 249, 1);
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 1500px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.lc {
|
||||||
|
width: 8px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: #409eff;
|
||||||
|
margin-right: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lh {
|
||||||
|
color: #666;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
width: 50%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.types {
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
::v-deep(.el-button) {
|
||||||
|
&:hover {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: #409eff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.type {
|
||||||
|
width: 120px;
|
||||||
|
height: 60px;
|
||||||
|
color: #999;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-area {
|
||||||
|
padding: 0 20px;
|
||||||
|
height: 1500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
height: 100px;
|
||||||
|
|
||||||
|
.options {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<div class="tree-and-table">
|
||||||
|
左树右表弹框
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts" name="TreeAndTable">
|
||||||
|
const emits = defineEmits(['changeRange']);
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
name: string
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const ranges = reactive([
|
||||||
|
{
|
||||||
|
day: 0,
|
||||||
|
text: '今天'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
day: 1,
|
||||||
|
text: '昨天'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
day: 7,
|
||||||
|
text: '最近7天'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
day: 30,
|
||||||
|
text: '最近30天'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.tree-and-table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,55 @@
|
|||||||
|
<template>
|
||||||
|
<div class="annexinfo_a">
|
||||||
|
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading" size="large"
|
||||||
|
label-position="top">
|
||||||
|
<el-row justify="start" style="flex-wrap: wrap;" :gutter="50">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="合同附件" prop="contractAppendices">
|
||||||
|
<UploadFile v-model="formData.contractAppendices" :title="config.title" :limit="config.limit"
|
||||||
|
:file-size="config.fileSize" :file-type="config.fileType" />
|
||||||
|
<!-- <el-input v-model="formData.contractAppendices" placeholder="合同附件" v-show="false" /> -->
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="附属文件" prop="ancillaryDocuments">
|
||||||
|
<UploadFile v-model="formData.ancillaryDocuments" :title="config.title" :limit="config.limit"
|
||||||
|
:file-size="config.fileSize" :file-type="config.fileType" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<!-- <el-col :span="8">
|
||||||
|
<el-button @click="() => { console.log(formData) }">查看</el-button>
|
||||||
|
</el-col> -->
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts" name="AnnexInfo_A">
|
||||||
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
||||||
|
|
||||||
|
const formRef = ref() // 表单 Ref
|
||||||
|
|
||||||
|
const formLoading = ref(false) // 表单加载状态
|
||||||
|
|
||||||
|
const formData = ref<any>({ // 表单数据
|
||||||
|
contractAppendices: [],
|
||||||
|
ancillaryDocuments: [],
|
||||||
|
})
|
||||||
|
|
||||||
|
const formRules = reactive({ // 验证规则
|
||||||
|
contractAppendices: [{ required: false, message: '合同附件不能为空', trigger: 'blur' }],
|
||||||
|
ancillaryDocuments: [{ required: false, message: '附属文件不能为空', trigger: 'blur' }],
|
||||||
|
})
|
||||||
|
|
||||||
|
const config = reactive({
|
||||||
|
title: "上传文件",
|
||||||
|
fileType: ['rar', 'zip', 'doc', 'docx', 'pdf'],
|
||||||
|
fileSize: 20,
|
||||||
|
limit: 4,
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.annexinfo_a {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,101 @@
|
|||||||
|
<template>
|
||||||
|
<div class="baseinfo_a">
|
||||||
|
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading" size="large" label-position="top">
|
||||||
|
<el-row justify="start" style="flex-wrap: wrap;" :gutter="50">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="合同模版" prop="contractTemplateId">
|
||||||
|
<el-input v-model="formData.contractTemplateId" placeholder="请选择合同模版" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="合同编号" prop="contractNumber">
|
||||||
|
<el-input v-model="formData.contractNumber" placeholder="点击后生成合同编号" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="合同名称" prop="contractName">
|
||||||
|
<el-input v-model="formData.contractName" placeholder="请输入合同名称" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="对方合同编号" prop="contractNo">
|
||||||
|
<el-input v-model="formData.contractNo" placeholder="请输入内容" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="签订地点" prop="contractSigned">
|
||||||
|
<el-input v-model="formData.contractSigned" placeholder="请输入内容" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="签订时间" prop="contractSignedTime">
|
||||||
|
<el-input v-model="formData.contractSignedTime" placeholder="选择日期" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="关联业务线" prop="businessId">
|
||||||
|
<el-select v-model="formData.businessId" placeholder="请选择业务类型" style="width: 100%;">
|
||||||
|
<el-option label="业务线" value="1">业务线1</el-option>
|
||||||
|
<el-option label="业务线" value="2">业务线2</el-option>
|
||||||
|
<el-option label="业务线" value="3">业务线3</el-option>
|
||||||
|
<el-option label="业务线" value="4">业务线4</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="业务类型" prop="businessType">
|
||||||
|
<el-select v-model="formData.businessType" placeholder="请选择业务类型" style="width: 100%;">
|
||||||
|
<el-option v-for="dict in getStrDictOptions(DICT_TYPE.CONTRACT_BUSINESS_TYPE)" :key="dict.value"
|
||||||
|
:label="dict.label" :value="dict.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="申报时间" prop="declarationTime">
|
||||||
|
<el-date-picker v-model="formData.declarationTime" type="date" value-format="x" placeholder="选择申报时间"
|
||||||
|
style="width: 100%;" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts" name="BaseInfo_A">
|
||||||
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
||||||
|
|
||||||
|
const emits = defineEmits(["setContractId"]);
|
||||||
|
|
||||||
|
const formRef = ref() // 表单 Ref
|
||||||
|
|
||||||
|
const formLoading = ref(false) // 表单加载状态
|
||||||
|
|
||||||
|
const formData = ref({ // 表单数据
|
||||||
|
contractTemplateId: undefined,
|
||||||
|
contractNumber: undefined,
|
||||||
|
contractName: undefined,
|
||||||
|
contractNo: undefined,
|
||||||
|
contractSigned: undefined,
|
||||||
|
contractSignedTime: undefined,
|
||||||
|
businessId: undefined,
|
||||||
|
businessType: undefined,
|
||||||
|
declarationTime: undefined
|
||||||
|
})
|
||||||
|
|
||||||
|
const formRules = reactive({ // 验证规则
|
||||||
|
contractTemplateId: [{ required: true, message: '合同模板未选择', trigger: 'blur' }],
|
||||||
|
contractNumber: [{ required: true, message: '合同编号不能为空', trigger: 'blur' }],
|
||||||
|
contractName: [{ required: true, message: '合同名称不能为空', trigger: 'blur' }],
|
||||||
|
contractNo: [{ required: false, message: '对方合同编号不能为空', trigger: 'blur' }],
|
||||||
|
contractSigned: [{ required: true, message: '签订地点不能为空', trigger: 'blur' }],
|
||||||
|
contractSignedTime: [{ required: true, message: '签订时间不能为空', trigger: 'blur' }],
|
||||||
|
businessId: [{ required: true, message: '关联业务线不能为空', trigger: 'blur' }],
|
||||||
|
businessType: [{ required: true, message: '业务类型不能为空', trigger: 'change' }],
|
||||||
|
declarationTime: [{ required: true, message: '申报时间不能为空', trigger: 'blur' }]
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.baseinfo_a {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,83 @@
|
|||||||
|
<template>
|
||||||
|
<div class="deliveryinfo_a">
|
||||||
|
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading" size="large"
|
||||||
|
label-position="top">
|
||||||
|
<el-row justify="start" style="flex-wrap: wrap;" :gutter="50">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="交货时间" prop="deliveryTime">
|
||||||
|
<el-date-picker v-model="formData.deliveryTime" type="date" value-format="x" placeholder="选择日期范围"
|
||||||
|
style="width: 100%;" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="交货方式" prop="deliveryModel">
|
||||||
|
<el-select v-model="formData.deliveryModel" placeholder="交货方式" style="width: 100%;">
|
||||||
|
<el-option v-for="dict in getStrDictOptions(DICT_TYPE.CONTRACT_DELIVERY_MODEL)" :key="dict.value"
|
||||||
|
:label="dict.label" :value="dict.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="交货地点" prop="deliveryLocation">
|
||||||
|
<el-input v-model="formData.deliveryLocation" placeholder="输入内容" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="运输方式" prop="modeTransport">
|
||||||
|
<el-select v-model="formData.modeTransport" placeholder="运输方式" style="width: 100%;">
|
||||||
|
<el-option v-for="dict in getStrDictOptions(DICT_TYPE.CONTRACT_MODE_TRANSPORT)" :key="dict.value"
|
||||||
|
:label="dict.label" :value="dict.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="配送方式" prop="deliveryMethod">
|
||||||
|
<el-select v-model="formData.deliveryMethod" placeholder="配送方式" style="width: 100%;">
|
||||||
|
<el-option v-for="dict in getStrDictOptions(DICT_TYPE.CONTRACT_DELIVERY_METHOD)" :key="dict.value"
|
||||||
|
:label="dict.label" :value="dict.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="费用承担主体" prop="costBearingMian">
|
||||||
|
<el-select v-model="formData.costBearingMian" placeholder="费用承担主体" style="width: 100%;">
|
||||||
|
<el-option v-for="dict in getStrDictOptions(DICT_TYPE.CONTRACT_COST_MAIN)" :key="dict.value"
|
||||||
|
:label="dict.label" :value="dict.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts" name="DeliveryInfo_A">
|
||||||
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
||||||
|
|
||||||
|
const formRef = ref() // 表单 Ref
|
||||||
|
|
||||||
|
const formLoading = ref(false) // 表单加载状态
|
||||||
|
|
||||||
|
const formData = ref({ // 表单数据
|
||||||
|
deliveryTime: undefined,
|
||||||
|
deliveryModel: undefined,
|
||||||
|
deliveryLocation: undefined,
|
||||||
|
modeTransport: undefined,
|
||||||
|
deliveryMethod: undefined,
|
||||||
|
costBearingMian: undefined,
|
||||||
|
})
|
||||||
|
|
||||||
|
const formRules = reactive({ // 验证规则
|
||||||
|
deliveryTime: [{ required: true, message: '交货时间不能为空', trigger: 'blur' }],
|
||||||
|
deliveryModel: [{ required: true, message: '交货方式不能为空', trigger: 'blur' }],
|
||||||
|
deliveryLocation: [{ required: true, message: '交货地点不能为空', trigger: 'blur' }],
|
||||||
|
modeTransport: [{ required: true, message: '运输方式不能为空', trigger: 'blur' }],
|
||||||
|
deliveryMethod: [{ required: true, message: '配送方式不能为空', trigger: 'blur' }],
|
||||||
|
costBearingMian: [{ required: true, message: '费用承担主体不能为空', trigger: 'blur' }],
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.deliveryinfo_a {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,131 @@
|
|||||||
|
<template>
|
||||||
|
<div class="extendinfo_a">
|
||||||
|
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading" size="large"
|
||||||
|
label-position="top">
|
||||||
|
<el-row justify="start" style="flex-wrap: wrap;" :gutter="50">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="长协合同" prop="contractAgreement">
|
||||||
|
<el-input v-model="formData.contractAgreement" placeholder="是否合同模版" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="安全协议" prop="securityProtocol">
|
||||||
|
<el-input v-model="formData.securityProtocol" placeholder="输入内容" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="是否招投标" prop="bidding">
|
||||||
|
<el-input v-model="formData.bidding" placeholder="是否招投标" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="扩展字段" prop="extendedField">
|
||||||
|
<el-input v-model="formData.extendedField" placeholder="扩展信息" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="合同标签" prop="contractLabel">
|
||||||
|
<!-- <el-input v-model="formData.contractLabel" placeholder="输入内容" /> -->
|
||||||
|
<el-select v-model="formData.contractLabel" multiple filterable allow-create default-first-option
|
||||||
|
:reserve-keyword="false" placeholder="合同标签" style="width: 100%;">
|
||||||
|
<el-option v-for="item in labelList" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="合同要求" prop="contractRequirement">
|
||||||
|
<el-input v-model="formData.contractRequirement" type="textarea" placeholder="输入内容" :rows="10" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="备注一" prop="remark">
|
||||||
|
<el-input v-model="formData.remark" type="textarea" placeholder="输入内容" :rows="10" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="备注二" prop="remark2">
|
||||||
|
<el-input v-model="formData.remark2" type="textarea" placeholder="输入内容" :rows="10" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="() => console.log(formData)">提交</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts" name="ExtendInfo_A">
|
||||||
|
import { Select } from '@element-plus/icons-vue'
|
||||||
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
||||||
|
|
||||||
|
// const props = defineProps({
|
||||||
|
// contractId: {
|
||||||
|
// type: Number,
|
||||||
|
// require: false,
|
||||||
|
// default: 10001
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// const selectMainBodyInfo = (index) => {
|
||||||
|
// console.log(index);
|
||||||
|
// }
|
||||||
|
const formRef = ref() // 表单 Ref
|
||||||
|
|
||||||
|
const formLoading = ref(false) // 表单加载状态
|
||||||
|
|
||||||
|
const formData = ref({ // 表单数据
|
||||||
|
contractAgreement: undefined,
|
||||||
|
securityProtocol: undefined,
|
||||||
|
extendedField: undefined,
|
||||||
|
bidding: undefined,
|
||||||
|
contractLabel: undefined,
|
||||||
|
contractRequirement: undefined,
|
||||||
|
remark: undefined,
|
||||||
|
remark2: undefined,
|
||||||
|
})
|
||||||
|
|
||||||
|
const formRules = reactive({ // 验证规则
|
||||||
|
contractAgreement: [{ required: true, message: '长协合同未选择', trigger: 'blur' }],
|
||||||
|
securityProtocol: [{ required: true, message: '安全协议不能为空', trigger: 'blur' }],
|
||||||
|
bidding: [{ required: false, message: '是否招投标未选择', trigger: 'blur' }],
|
||||||
|
extendedField: [{ required: false, message: '扩展信息不能为空', trigger: 'blur' }],
|
||||||
|
contractLabel: [{ required: false, message: '合同标签不能为空', trigger: 'blur' }],
|
||||||
|
contractRequirement: [{ required: true, message: '合同要求不能为空', trigger: 'blur' }],
|
||||||
|
remark: [{ required: false, message: '备注一不能为空', trigger: 'blur' }],
|
||||||
|
remark2: [{ required: false, message: '备注一不能为空', trigger: 'change' }],
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const labelList = reactive(
|
||||||
|
[
|
||||||
|
{
|
||||||
|
value: '1',
|
||||||
|
label: '标签1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '2',
|
||||||
|
label: '标签2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '3',
|
||||||
|
label: '标签1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '4',
|
||||||
|
label: '标签4',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '5',
|
||||||
|
label: '标签5',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.extendinfo_a {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,159 @@
|
|||||||
|
<template>
|
||||||
|
<div class="financeinfo_a">
|
||||||
|
<el-form ref="formRef2" :model="formData2" :rules="formRules2" v-loading="formLoading2"
|
||||||
|
size="large">
|
||||||
|
<el-row justify="center" :gutter="50">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-card class="box-card">
|
||||||
|
<el-table :data="tableData" stripe style="width: 100%" size="large" fit :cell-style="{'padding': '24px 0 0 0'}">
|
||||||
|
<el-table-column prop="mainName" label="主体">
|
||||||
|
<template #default>
|
||||||
|
<el-form-item prop="mainName">
|
||||||
|
<el-tooltip class="box-item" effect="dark" :content="formData2.mainName"
|
||||||
|
:visible="formData2.mainName.trim().length > 0" placement="top">
|
||||||
|
<el-input v-model="formData2.mainName" placeholder="主体" />
|
||||||
|
</el-tooltip>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="paymentMethod" label="付款方式">
|
||||||
|
<template #default>
|
||||||
|
<el-form-item prop="paymentMethod">
|
||||||
|
<el-input v-model="formData2.paymentMethod" placeholder="付款方式" />
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="cooperationMethod" label="合作方式">
|
||||||
|
<template #default>
|
||||||
|
<el-form-item prop="cooperationMethod">
|
||||||
|
<el-input v-model="formData2.cooperationMethod" placeholder="合作方式" />
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="settlementMethod" label="结算方式">
|
||||||
|
<template #default>
|
||||||
|
<el-form-item prop="settlementMethod">
|
||||||
|
<el-input v-model="formData2.settlementMethod" placeholder="结算方式" />
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="advanceRatio" label="预付比例">
|
||||||
|
<template #default>
|
||||||
|
<el-form-item prop="advanceRatio">
|
||||||
|
<el-input v-model="formData2.advanceRatio" placeholder="预付比例" />
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="underpaymentMethod" label="压款方式">
|
||||||
|
<template #default>
|
||||||
|
<el-form-item prop="underpaymentMethod">
|
||||||
|
<el-input v-model="formData2.underpaymentMethod" placeholder="压款方式" />
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="depositMethod" label="保证金方式">
|
||||||
|
<template #default>
|
||||||
|
<el-form-item prop="depositMethod">
|
||||||
|
<el-input v-model="formData2.depositMethod" placeholder="保证金方式" />
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="overdueInterestRate" label="逾期利率">
|
||||||
|
<template #default>
|
||||||
|
<el-form-item prop="overdueInterestRate">
|
||||||
|
<el-input v-model="formData2.overdueInterestRate" placeholder="逾期利率" />
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<div style="height: 30px;" content="gap"></div>
|
||||||
|
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading" size="large"
|
||||||
|
label-position="top">
|
||||||
|
<el-row justify="start" style="flex-wrap: wrap;" :gutter="50">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="合计金额(人民币)" prop="totalAmount">
|
||||||
|
<el-input v-model="formData.totalAmount" placeholder="自动计算" disabled>
|
||||||
|
<template #append>元</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="大写金额(人民币) " prop="amountCapitalization">
|
||||||
|
<el-input v-model="formData.amountCapitalization" placeholder="自动编写" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts" name="FinanceInfo_A">
|
||||||
|
import { Select } from '@element-plus/icons-vue'
|
||||||
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
contractId: {
|
||||||
|
type: Number,
|
||||||
|
require: false,
|
||||||
|
default: 10001
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const tableData = reactive([
|
||||||
|
{
|
||||||
|
mainBody: '甲方',
|
||||||
|
mainBodyType: 1, // 甲方
|
||||||
|
contractId: props.contractId,
|
||||||
|
mainName: "--",
|
||||||
|
representativeName: "--",
|
||||||
|
socialUnifiedInformationCode: "--",
|
||||||
|
updateTime: "--"
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const formRef = ref() // 表单 Ref
|
||||||
|
const formLoading = ref(false) // 表单加载状态
|
||||||
|
const formData = ref({ // 表单数据
|
||||||
|
totalAmount: undefined,
|
||||||
|
amountCapitalization: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
const formRules = reactive({ // 验证规则
|
||||||
|
totalAmount: [{ required: true, message: '合计金额不能为空', trigger: 'blur' }],
|
||||||
|
amountCapitalization: [{ required: true, message: '大写金额不能为空', trigger: 'blur' }],
|
||||||
|
})
|
||||||
|
|
||||||
|
const formRef2 = ref() // 表单 Ref
|
||||||
|
const formLoading2 = ref(false) // 表单加载状态
|
||||||
|
const formData2 = ref({ // 表单数据
|
||||||
|
mainName: '',
|
||||||
|
paymentMethod: undefined,
|
||||||
|
cooperationMethod: undefined,
|
||||||
|
settlementMethod: undefined,
|
||||||
|
advanceRatio: undefined,
|
||||||
|
accountPeriod: undefined,
|
||||||
|
underpaymentMethod: undefined,
|
||||||
|
depositMethod: undefined,
|
||||||
|
overdueInterestRate: undefined,
|
||||||
|
})
|
||||||
|
const formRules2 = reactive({ // 验证规则
|
||||||
|
mainName: [{ required: true, message: '主体名称不能为空', trigger: 'blur' }],
|
||||||
|
paymentMethod: [{ required: true, message: '付款方式不能为空', trigger: 'blur' }],
|
||||||
|
cooperationMethod: [{ required: true, message: '合作方式不能为空', trigger: 'blur' }],
|
||||||
|
settlementMethod: [{ required: true, message: '结算方式不能为空', trigger: 'blur' }],
|
||||||
|
advanceRatio: [{ required: true, message: '预付比例不能为空', trigger: 'blur' }],
|
||||||
|
accountPeriod: [{ required: true, message: '账期不能为空', trigger: 'blur' }],
|
||||||
|
underpaymentMethod: [{ required: true, message: '压款方式不能为空', trigger: 'blur' }],
|
||||||
|
depositMethod: [{ required: true, message: '保证金方式不能为空', trigger: 'change' }],
|
||||||
|
overdueInterestRate: [{ required: true, message: '逾期利率不能为空', trigger: 'blur' }]
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.financeinfo_a {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,141 @@
|
|||||||
|
<template>
|
||||||
|
<div class="paymentnodes_a">
|
||||||
|
<el-card class="box-card">
|
||||||
|
<el-form :model="formData" ref="formRef" :rules="formRules" v-loading="formLoading" size="large">
|
||||||
|
<el-table :data="formData.dataList" stripe style="width: 100%" size="large" fit empty-text="暂无节点信息" @current-change="changeRowIndex">
|
||||||
|
<el-table-column prop="paymentNode" label="收付款节点" width="180" class-name="cellstyle">
|
||||||
|
<template #default="{ row, $index }">
|
||||||
|
<!-- {{$index}} -->
|
||||||
|
<el-form-item :prop="'dataList.'+ $index + '.paymentNode'" :rules="formRules.paymentNode">
|
||||||
|
<el-input v-model="row.paymentNode" placeholder="主体" />
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="paymentMethod" label="收付款方式" width="180" class-name="cellstyle">
|
||||||
|
<template #default="{ row, $index }">
|
||||||
|
<el-form-item :prop="'dataList.'+ $index + '.paymentMethod'" :rules="formRules.paymentMethod">
|
||||||
|
<el-input v-model="row.paymentMethod" placeholder="收付款方式" />
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="paymentRatio" label="付款比例" width="180" class-name="cellstyle">
|
||||||
|
<template #default="{ row, $index }">
|
||||||
|
<el-form-item :prop="'dataList.'+ $index + '.paymentRatio'" :rules="formRules.paymentRatio">
|
||||||
|
<el-input v-model="row.paymentRatio" placeholder="付款比例" />
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="price" label="金额" width="180" class-name="cellstyle">
|
||||||
|
<template #default="{ row, $index }">
|
||||||
|
<el-form-item :prop="'dataList.'+ $index + '.price'" :rules="formRules.price">
|
||||||
|
<el-input v-model="row.price" placeholder="金额" />
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="remark" label="备注" class-name="cellstyle">
|
||||||
|
<template #default="{ row, $index }">
|
||||||
|
<el-form-item :prop="'dataList.'+ $index + '.remark'" :rules="formRules.remark">
|
||||||
|
<el-input v-model="row.remark" placeholder="备注" />
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="150px" fixed="left">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button link type="primary" @click="deletePaymentNote(scope.index)">
|
||||||
|
<el-icon>
|
||||||
|
<Delete />
|
||||||
|
</el-icon> 删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-form>
|
||||||
|
<div class="add" @click="addPaymentNote">
|
||||||
|
<el-button link type="primary">
|
||||||
|
<el-icon>
|
||||||
|
<CirclePlus />
|
||||||
|
</el-icon>
|
||||||
|
<span style="margin-left: 5px;">添加节点</span>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts" name="PaymentNodes_A">
|
||||||
|
import { Delete, CirclePlus } from '@element-plus/icons-vue'
|
||||||
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
contractId: {
|
||||||
|
type: Number,
|
||||||
|
require: false,
|
||||||
|
default: 10001
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const formRef = ref() // 表单 Ref
|
||||||
|
const formLoading = ref(false) // 表单加载状态
|
||||||
|
const formData = ref({ // 表单数据
|
||||||
|
dataList: [
|
||||||
|
{
|
||||||
|
contractId: props.contractId,
|
||||||
|
paymentNode: '12345',
|
||||||
|
paymentMethod: '',
|
||||||
|
paymentRatio: '',
|
||||||
|
price: '',
|
||||||
|
remark: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
contractId: props.contractId,
|
||||||
|
paymentNode: '',
|
||||||
|
paymentMethod: '',
|
||||||
|
paymentRatio: '',
|
||||||
|
price: '',
|
||||||
|
remark: '',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const formRules = reactive({ // 验证规则
|
||||||
|
paymentNode: [{ required: true, message: '收付款节点不能为空', trigger: 'blur' }],
|
||||||
|
paymentMethod: [{ required: true, message: '收付款方式不能为空', trigger: 'blur' }],
|
||||||
|
paymentRatio: [{ required: false, message: '付款比例不能为空', trigger: 'blur' }],
|
||||||
|
price: [{ required: true, message: '金额不能为空', trigger: 'blur' }],
|
||||||
|
remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
|
||||||
|
})
|
||||||
|
|
||||||
|
const deletePaymentNote = (index) => {
|
||||||
|
console.log(index);
|
||||||
|
}
|
||||||
|
|
||||||
|
const addPaymentNote = () => {
|
||||||
|
console.log(123456);
|
||||||
|
}
|
||||||
|
|
||||||
|
const changeRowIndex = (currentRow, oldCurrentRow) => {
|
||||||
|
console.log(currentRow, oldCurrentRow);
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.paymentnodes_a {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.add {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 20px;
|
||||||
|
border: 1px dashed #999;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(td.cellstyle) {
|
||||||
|
padding: 24px 0 0 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
@ -0,0 +1,67 @@
|
|||||||
|
<template>
|
||||||
|
<div class="primaryinfo_a">
|
||||||
|
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading" size="large" label-position="top">
|
||||||
|
<el-row justify="start" style="flex-wrap: wrap;" :gutter="50">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="币种" prop="currency">
|
||||||
|
<el-input v-model="formData.currency" placeholder="请选择币种" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="采购模式" prop="procurementModel">
|
||||||
|
<el-input v-model="formData.procurementModel" placeholder="请选择采购模式" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<!-- <el-col :span="8">
|
||||||
|
<el-form-item label="关联销售合同" prop="contractName">
|
||||||
|
<el-input v-model="formData.contractName" placeholder="点击关联销售合同" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col> -->
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="定价模式" prop="pricingModel">
|
||||||
|
<el-input v-model="formData.pricingModel" placeholder="定价模式" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="关联供应商/客户" prop="subject">
|
||||||
|
<el-input v-model="formData.subject" placeholder="点击关联供应商/客户" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="合同期限" prop="contractPeriodTime">
|
||||||
|
<el-input v-model="formData.contractPeriodTime" placeholder="合同期限" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts" name="PrimaryInfo_A">
|
||||||
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
||||||
|
|
||||||
|
const formRef = ref() // 表单 Ref
|
||||||
|
|
||||||
|
const formLoading = ref(false) // 表单加载状态
|
||||||
|
|
||||||
|
const formData = ref({ // 表单数据
|
||||||
|
currency: undefined,
|
||||||
|
procurementModel: undefined,
|
||||||
|
pricingModel: undefined,
|
||||||
|
subject: undefined,
|
||||||
|
contractPeriodTime: undefined,
|
||||||
|
})
|
||||||
|
|
||||||
|
const formRules = reactive({ // 验证规则
|
||||||
|
currency: [{ required: true, message: '交易币种不能为空', trigger: 'blur' }],
|
||||||
|
procurementModel: [{ required: true, message: '采购模式不能为空', trigger: 'blur' }],
|
||||||
|
pricingModel: [{ required: true, message: '定价模式不能为空', trigger: 'blur' }],
|
||||||
|
subject: [{ required: true, message: '关联供应商/客户不能为空', trigger: 'blur' }],
|
||||||
|
contractPeriodTime: [{ required: true, message: '合同期限不能为空', trigger: 'blur' }],
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.primaryinfo_a {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,149 @@
|
|||||||
|
<template>
|
||||||
|
<div class="procure-contract">
|
||||||
|
<div class="item-area">
|
||||||
|
<div class="title">
|
||||||
|
<span class="lc"></span>
|
||||||
|
<span class="lh">基本信息</span>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<BaseInfo_A @setContractId="genContractId"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item-area">
|
||||||
|
<div class="title">
|
||||||
|
<span class="lc"></span>
|
||||||
|
<span class="lh">主体信息</span>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<!-- <SubjectInfo_A :contract-id="contractId"/> -->
|
||||||
|
<SubjectInfo_A />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item-area">
|
||||||
|
<div class="title">
|
||||||
|
<span class="lc"></span>
|
||||||
|
<span class="lh">合同信息</span>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<PrimaryInfo_A />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item-area">
|
||||||
|
<div class="title">
|
||||||
|
<span class="lc"></span>
|
||||||
|
<span class="lh">交货信息</span>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<DeliveryInfo_A />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item-area">
|
||||||
|
<div class="title">
|
||||||
|
<span class="lc"></span>
|
||||||
|
<span class="lh">商品明细</span>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<CommodityList_A />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item-area">
|
||||||
|
<div class="title">
|
||||||
|
<span class="lc"></span>
|
||||||
|
<span class="lh">财务信息</span>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<FinanceInfo_A />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="item-area">
|
||||||
|
<div class="title">
|
||||||
|
<span class="lc"></span>
|
||||||
|
<span class="lh">付款节点</span>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<PaymentNodes_A />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item-area">
|
||||||
|
<div class="title">
|
||||||
|
<span class="lc"></span>
|
||||||
|
<span class="lh">附件信息</span>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<AnnexInfo_A />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item-area">
|
||||||
|
<div class="title">
|
||||||
|
<span class="lc"></span>
|
||||||
|
<span class="lh">其他信息</span>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<ExtendInfo_A />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts" name="ProcureContract">
|
||||||
|
import BaseInfo_A from './BaseInfo_A.vue'
|
||||||
|
import SubjectInfo_A from './SubjectInfo_A.vue'
|
||||||
|
import PrimaryInfo_A from './PrimaryInfo_A.vue'
|
||||||
|
import DeliveryInfo_A from './DeliveryInfo_A.vue'
|
||||||
|
import CommodityList_A from './CommodityList_A.vue'
|
||||||
|
import FinanceInfo_A from './FinanceInfo_A.vue'
|
||||||
|
import PaymentNodes_A from './PaymentNodes_A.vue'
|
||||||
|
import AnnexInfo_A from './AnnexInfo_A.vue'
|
||||||
|
import ExtendInfo_A from './ExtendInfo_A.vue'
|
||||||
|
|
||||||
|
// 合同编号
|
||||||
|
const contractId = ref<number>(0);
|
||||||
|
|
||||||
|
const genContractId = (cid) => {
|
||||||
|
contractId.value = cid;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.procure-contract {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.item-area {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.lc {
|
||||||
|
width: 8px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: #409eff;
|
||||||
|
margin-right: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lh {
|
||||||
|
color: #666;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,148 @@
|
|||||||
|
<template>
|
||||||
|
<div class="subjectinfo_a">
|
||||||
|
<!-- <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading" size="large" label-position="top">
|
||||||
|
<el-row justify="center" style="flex-wrap: wrap;" :gutter="50">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="合同模版" prop="contractTemplateId">
|
||||||
|
<el-input v-model="formData.contractTemplateId" placeholder="请选择合同模版" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="合同编号" prop="contractNumber">
|
||||||
|
<el-input v-model="formData.contractNumber" placeholder="点击后生成合同编号" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="合同名称" prop="contractName">
|
||||||
|
<el-input v-model="formData.contractName" placeholder="请输入合同名称" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="对方合同编号" prop="contractNo">
|
||||||
|
<el-input v-model="formData.contractNo" placeholder="请输入内容" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="签订地点" prop="contractSigned">
|
||||||
|
<el-input v-model="formData.contractSigned" placeholder="请输入内容" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="签订时间" prop="contractSignedTime">
|
||||||
|
<el-input v-model="formData.contractSignedTime" placeholder="选择日期" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="关联业务线" prop="businessId">
|
||||||
|
<el-select v-model="formData.businessId" placeholder="请选择业务类型" style="width: 100%;">
|
||||||
|
<el-option label="业务线" value="1">业务线1</el-option>
|
||||||
|
<el-option label="业务线" value="2">业务线2</el-option>
|
||||||
|
<el-option label="业务线" value="3">业务线3</el-option>
|
||||||
|
<el-option label="业务线" value="4">业务线4</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="业务类型" prop="businessType">
|
||||||
|
<el-select v-model="formData.businessType" placeholder="请选择业务类型" style="width: 100%;">
|
||||||
|
<el-option v-for="dict in getStrDictOptions(DICT_TYPE.CONTRACT_BUSINESS_TYPE)" :key="dict.value"
|
||||||
|
:label="dict.label" :value="dict.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="申报时间" prop="declarationTime">
|
||||||
|
<el-date-picker v-model="formData.declarationTime" type="date" value-format="x" placeholder="选择申报时间"
|
||||||
|
style="width: 100%;" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form> -->
|
||||||
|
<el-card class="box-card">
|
||||||
|
<el-table :data="tableData" stripe style="width: 100%" size="large" fit>
|
||||||
|
<el-table-column prop="mainBody" label="主体" width="180" />
|
||||||
|
<el-table-column prop="mainName" label="主体名称" />
|
||||||
|
<el-table-column prop="representativeName" label="法定代表人" />
|
||||||
|
<el-table-column prop="socialUnifiedInformationCode" label="社会统一信息代码" />
|
||||||
|
<el-table-column prop="updateTime" label="更新时间" width="180" />
|
||||||
|
<el-table-column label="操作" align="center" width="150px" fixed="right">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button link type="primary" @click="selectMainBodyInfo(scope.index)">
|
||||||
|
<el-icon><Select /></el-icon> 选取
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts" name="SubjectInfo_A">
|
||||||
|
import { Select } from '@element-plus/icons-vue'
|
||||||
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
contractId: {
|
||||||
|
type: Number,
|
||||||
|
require: false,
|
||||||
|
default: 10001
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const tableData = reactive([
|
||||||
|
{
|
||||||
|
mainBody: '甲方',
|
||||||
|
mainBodyType: 1, // 甲方
|
||||||
|
contractId: props.contractId,
|
||||||
|
mainName: "--",
|
||||||
|
representativeName: "--",
|
||||||
|
socialUnifiedInformationCode: "--",
|
||||||
|
updateTime: "--"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
mainBody: '乙方',
|
||||||
|
mainBodyType: 2, // 乙方
|
||||||
|
contractId: props.contractId,
|
||||||
|
mainName: "--",
|
||||||
|
representativeName: "--",
|
||||||
|
socialUnifiedInformationCode: "--",
|
||||||
|
updateTime: "--"
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const selectMainBodyInfo = (index) => {
|
||||||
|
console.log(index);
|
||||||
|
}
|
||||||
|
// const formRef = ref() // 表单 Ref
|
||||||
|
|
||||||
|
// const formLoading = ref(false) // 表单加载状态
|
||||||
|
|
||||||
|
// const formData = ref({ // 表单数据
|
||||||
|
// contractTemplateId: undefined,
|
||||||
|
// contractNumber: undefined,
|
||||||
|
// contractName: undefined,
|
||||||
|
// contractNo: undefined,
|
||||||
|
// contractSigned: undefined,
|
||||||
|
// contractSignedTime: undefined,
|
||||||
|
// businessId: undefined,
|
||||||
|
// businessType: undefined,
|
||||||
|
// declarationTime: undefined
|
||||||
|
// })
|
||||||
|
|
||||||
|
// const formRules = reactive({ // 验证规则
|
||||||
|
// contractTemplateId: [{ required: true, message: '合同模板未选择', trigger: 'blur' }],
|
||||||
|
// contractNumber: [{ required: true, message: '合同编号不能为空', trigger: 'blur' }],
|
||||||
|
// contractName: [{ required: true, message: '合同名称不能为空', trigger: 'blur' }],
|
||||||
|
// contractNo: [{ required: false, message: '对方合同编号不能为空', trigger: 'blur' }],
|
||||||
|
// contractSigned: [{ required: true, message: '签订地点不能为空', trigger: 'blur' }],
|
||||||
|
// contractSignedTime: [{ required: true, message: '签订时间不能为空', trigger: 'blur' }],
|
||||||
|
// businessId: [{ required: true, message: '关联业务线不能为空', trigger: 'blur' }],
|
||||||
|
// businessType: [{ required: true, message: '业务类型不能为空', trigger: 'change' }],
|
||||||
|
// declarationTime: [{ required: true, message: '申报时间不能为空', trigger: 'blur' }]
|
||||||
|
// })
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.subjectinfo_a {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in new issue