<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { DictEnum } from '@/enums/DictEnum'
import type { TabPaneName } from 'element-plus'
import {
getAllDemandList,
getContractTemplateList,
getBusinessBaseByTenantId,
getPersonInfoByTenantId,
createdContract,
getDemandRelease,
} from '@/api/contract/account'
import { CreateContractParams } from '@/types/api/contract/account'
import Preview from '@/views/contract/mould/components/preview/index.vue'
import { DemandTypeEnum } from '@/enums/DemandTypeEnum'
import { getParamByCode } from '@/api/system/parameter'
import { getQueryByCategoryCode } from '@/api/system/app'
import { SysParameterEnum } from '@/enums/SysParameter'
const app = getCurrentInstance()
const ruleFormRef = ref<FormInstance>()
const contentRuleFormRef = ref<FormInstance>()
const aInputFormRef = ref<FormInstance>()
const bInputFormRef = ref<FormInstance>()
const previewRef = ref()
const emit = defineEmits(['reload'])
// 查询参数
let queryParam = reactive<CreateContractParams>({
templateId: '',
demandId: '',
name: '',
amount: null,
payMode: '1',
firstPayAmount: null,
firstPayRatio: null,
secondPayAmount: null,
secondPayRatio: null,
fillingContent: {},
platformFirstPayRatio: 40,
platformSecondPayRatio: 60,
})
const formContent = ref<any>({})
const htmlContent = ref('')
const newHtmlContent = ref('')
const priceLimit = ref(0)
// 合同模板的类型(B2C,B2B...)
const templateTypeName = ref('')
// 需求名称的类型(B2C,B2B...)
const typeName = ref('')
const activeName = ref('a')
const templateData = ref<any>([])
const demandList = ref<any>([])
// 甲方id
const aId = ref('')
// 乙方id
const bId = ref('')
// ----甲乙双方个人信息------
const aBusiness = ref({
'${a_name}': '',
'${a_legal}': '',
'${a_link}': '',
'${a_idCard}': '',
'${a_mobile}': '',
'${a_address}': '',
})
const aPerson = ref({
'${a_name}': '',
'${a_legal}': '',
'${a_link}': '',
'${a_idCard}': '',
'${a_mobile}': '',
'${a_address}': '',
})
const bBusiness = ref({
'${b_name}': '',
'${b_legal}': '',
'${b_link}': '',
'${b_idCard}': '',
'${b_mobile}': '',
'${b_address}': '',
})
const bPerson = ref({
'${b_name}': '',
'${b_legal}': '',
'${b_link}': '',
'${b_idCard}': '',
'${b_mobile}': '',
'${b_address}': '',
})
// -----甲乙双方输入框内容------
const aInputForm = ref<any>({})
const bInputForm = ref<any>({})
const validateAmount = (rule: any, value: any, callback: any) => {
// console.log(value)
if (value === '' || value == null) {
callback(new Error('请输入合同金额'))
} else if (value <= 0) {
queryParam.amount = null
} else if (value < priceLimit.value) {
callback(new Error('合同金额最小为' + priceLimit.value + '元'))
} else if (value > 100000000) {
callback(new Error('合同金额最大为1亿元'))
} else {
queryParam.amount = Number(Number(value).toFixed(2))
callback()
}
}
const rules = reactive<FormRules>({
templateId: [
{
required: true,
message: '请选择合同模板',
trigger: 'change',
},
],
name: [
{
required: true,
message: '请输入合同名称',
trigger: 'blur',
},
{ pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/, message: '只能输入中文、英文、数字' },
],
demandId: [
{
required: true,
message: '请选择需求名称',
trigger: 'change',
},
],
amount: [
{
required: true,
validator: validateAmount,
trigger: 'blur',
},
],
payMode: [
{
required: true,
message: '请选择支付方式',
trigger: 'change',
},
],
firstPayRatio: [
{
required: true,
message: '请输入',
trigger: 'change',
},
],
firstPayAmount: [
{
required: true,
message: ' ',
trigger: 'change',
},
],
secondPayRatio: [
{
required: true,
message: '请输入',
trigger: 'change',
},
],
secondPayAmount: [
{
required: true,
message: ' ',
trigger: 'change',
},
],
})
const aInputFormRules = reactive<FormRules>({
textRules: [{ pattern: /[^<>\\/]$/, message: '不能输入特殊字符' }],
numberRules: [{ pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '只能输入数字,可含2位小数' }],
})
// 模板数据map
let templateTypeMap = new Map()
let templateDataMap = new Map()
// 需求数据map
let demandTypeMap = new Map()
let demandDataMap = new Map()
const loadTemplateDataMap = () => {
if (templateData.value) {
templateData.value.forEach((item: any) => {
item.typeName = item.typeName.split('_')[item.typeName.split('_').length - 1]
templateDataMap.set(item.id, item)
let templates = templateTypeMap.get(item.typeName)
if (templates && templates.length > 0) {
templates.push(item)
} else {
templates = []
templates.push(item)
templateTypeMap.set(item.typeName, templates)
}
})
}
}
const loadDemandDataMap = () => {
if (demandList.value) {
demandList.value.forEach((item: any) => {
demandDataMap.set(item.id, item)
let demands = demandTypeMap.get(item.operationMode)
if (demands && demands.length > 0) {
demands.push(item)
} else {
demands = []
demands.push(item)
demandTypeMap.set(item.operationMode, demands)
}
})
}
}
// 弹窗显示
const visible = ref(false)
const saveLoading = ref(false)
const systemType = ref('')
// 打开弹框
const openDialog = (demandId?: string, systemTypeStr?: string) => {
// 获取合同模板
let demandTypeStr = ''
// 区分设计制造集采获取合同模板
if (systemTypeStr == '1' || systemTypeStr == 'demand_design') {
systemType.value = '1'
demandTypeStr = 'demand_design'
} else if (systemTypeStr == '2' || systemTypeStr == 'demand_make') {
systemType.value = '2'
demandTypeStr = 'demand_make'
}
getContractTemplateList(systemType.value).then((res) => {
templateData.value = res.data
console.log(templateData.value)
loadTemplateDataMap()
// 获取需求名称
getAllDemandList(demandTypeStr).then((res) => {
// 需要过滤掉客户指定的需求
demandList.value = res.data
if (demandList.value) {
demandList.value = demandList.value.filter((item: any) => item.publishMethod == '1')
}
loadDemandDataMap()
// demandId,需求管理表格点击创建合同传递过来的
if (demandId && demandList.value.length > 0) {
queryParam.demandId = demandId
changeDemandName(demandId)
}
})
visible.value = true
})
}
// 关闭弹框
const closeDialog = () => {
queryParam.templateId = ''
queryParam.demandId = ''
queryParam.name = ''
queryParam.amount = null
queryParam.payMode = '1'
queryParam.firstPayAmount = null
queryParam.firstPayRatio = null
queryParam.secondPayAmount = null
queryParam.secondPayRatio = null
queryParam.platformFirstPayRatio = 40
queryParam.platformSecondPayRatio = 60
activeName.value = 'a'
// 需清空
// 模板数据map
templateTypeMap = new Map()
templateDataMap = new Map()
// 需求数据map
demandTypeMap = new Map()
demandDataMap = new Map()
visible.value = false
}
// 选择合同模板
const changeTemplate = (id: string) => {
if (!id) {
templateTypeName.value = ''
demandList.value = [...demandDataMap.values()]
formContent.value = {}
} else {
let item = templateDataMap.get(id)
htmlContent.value = item.content
templateTypeName.value = item.typeName
formContent.value = item.needFillContent
formContent.value.a = formContent.value.a.filter((aItem: any, index: number, arr: any) => {
let arrCodes = arr.map((item: any) => {
return item.labelKey
})
return arrCodes.indexOf(aItem.labelKey, 0) === index
})
formContent.value.b = formContent.value.b.filter((aItem: any, index: number, arr: any) => {
let arrCodes = arr.map((item: any) => {
return item.labelKey
})
return arrCodes.indexOf(aItem.labelKey, 0) === index
})
formContent.value.a.forEach((aItem: any) => {
aInputForm.value[aItem.labelKey] = null
})
formContent.value.b.forEach((bItem: any) => {
bInputForm.value[bItem.labelKey] = null
})
if (templateTypeName.value != typeName.value && templateTypeName.value && typeName.value) {
ElMessage.error('合同模板与需求名称类型不匹配')
queryParam.templateId = ''
}
demandList.value = demandTypeMap.get(item.typeName)
if (!queryParam.demandId) {
if (demandList.value && demandList.value.length == 1) {
queryParam.demandId = demandList.value[0].id
changeDemandName(queryParam.demandId)
}
}
}
}
// 需求名称与需求内容准备替换
const demandReplace = ref({
name: '',
content: '',
})
// 选择需求名称
const changeDemandName = (id: string) => {
if (!id) {
typeName.value = ''
console.log(templateDataMap.values())
templateData.value = [...templateDataMap.values()]
aBusiness.value = {} as any
aPerson.value = {} as any
bBusiness.value = {} as any
bPerson.value = {} as any
} else {
console.log(id)
let item = demandDataMap.get(id)
demandReplace.value.name = item.name
queryParam.name = item.name
console.log(systemType.value, 'systemType')
// process_class
// 获取需求内容，根据id转换需求内容
let demandType = ''
let content = null as any
if (systemType.value == '1') {
demandType = 'demand_content'
content = item.demandContent
} else if (systemType.value == '2') {
demandType = 'process_class'
content = item.processClass
}
getQueryByCategoryCode(demandType).then((res) => {
let myDemandName = ''
let myDemandNameJoin = ''
let demandArr = [] as any
res.data.forEach((v: any) => {
demandArr.push(...v.nodeList)
})
console.log(demandArr)
console.log(item)
myDemandNameJoin = content
?.map((v: any) => {
demandArr.forEach((vv: any) => {
if (vv.id == v) {
myDemandName = vv.name
}
})
return myDemandName
})
.join('、')
demandReplace.value.content = myDemandNameJoin
console.log(demandReplace.value.content)
})
demandReplace.value.content = item.demandContent
typeName.value = item.operationMode
aId.value = item.tenantId
bId.value = item.serviceSupplierTenant
let code = '' as string
if (item.type === DemandTypeEnum.DESIGN) {
code = SysParameterEnum.DESIGN_CONTRACT_AMOUNT_LIMIT
} else if (item.type === DemandTypeEnum.MAKE) {
code = SysParameterEnum.MAKE_CONTRACT_AMOUNT_LIMIT
}
getParamByCode(code).then((res: any) => {
priceLimit.value = Number(res.data.value)
})
if (typeName.value == 'B2B') {
getBusinessInfo(aId.value, 'aBusiness')
getBusinessInfo(bId.value, 'bBusiness')
} else if (typeName.value == 'B2C') {
getBusinessInfo(aId.value, 'aBusiness')
getPersonInfo(bId.value, 'bPerson')
} else if (typeName.value == 'C2B') {
getPersonInfo(aId.value, 'aPerson')
getBusinessInfo(bId.value, 'bBusiness')
} else if (typeName.value == 'C2C') {
getPersonInfo(aId.value, 'aPerson')
getPersonInfo(bId.value, 'bPerson')
}
if (templateTypeName.value != typeName.value && templateTypeName.value && typeName.value) {
ElMessage.error('合同模板与需求名称类型不匹配')
queryParam.demandId = ''
demandReplace.value.name = ''
demandReplace.value.content = ''
queryParam.name = ''
typeName.value = ''
}
templateData.value = templateTypeMap.get(item.operationMode)
console.log(templateData.value)
console.log(item.operationMode)
if (!queryParam.templateId) {
if (templateData.value && templateData.value.length == 1) {
queryParam.templateId = templateData.value[0].id
changeTemplate(queryParam.templateId)
}
}
}
}
// 是否可切换tab
const isCanTabCheck = ref(true)
const beforeTabLeave = async (activeName: TabPaneName, oldActiveName: TabPaneName) => {
if ((activeName == 'b' || activeName == 'c') && oldActiveName == 'a') {
await aInputFormRef.value?.validate((valid, fields) => {
if (valid) {
isCanTabCheck.value = true
} else {
ElMessage.error('请填写正确的内容！')
isCanTabCheck.value = false
}
})
return isCanTabCheck.value
}
if ((activeName == 'a' || activeName == 'c') && oldActiveName == 'b') {
await bInputFormRef.value?.validate((valid, fields) => {
if (valid) {
isCanTabCheck.value = true
} else {
ElMessage.error('请填写正确的内容！')
isCanTabCheck.value = false
}
})
return isCanTabCheck.value
}
}
// 获取企业信息
const getBusinessInfo = (id: string, type: string) => {
getBusinessBaseByTenantId(id).then((res) => {
if (type == 'aBusiness') {
let alink = ''
let aPhoneNumber = ''
// 获取主要联系人
res.data.linkmans?.forEach((item: any) => {
if (item.isDefault) {
alink = item.name
aPhoneNumber = item.phoneNumber
}
})
aBusiness.value['${a_name}'] = res.data.enterpriseName ?? ''
aBusiness.value['${a_legal}'] = res.data.legalPerson ?? ''
aBusiness.value['${a_link}'] = alink ?? ''
aBusiness.value['${a_mobile}'] = aPhoneNumber ?? ''
aBusiness.value['${a_address}'] = res.data.detailedAddress ?? ''
} else {
let blink = ''
let bPhoneNumber = ''
res.data.linkmans?.forEach((item: any) => {
if (item.isDefault) {
blink = item.name
bPhoneNumber = item.phoneNumber
}
})
bBusiness.value['${b_name}'] = res.data.enterpriseName ?? ''
bBusiness.value['${b_legal}'] = res.data.legalPerson ?? ''
bBusiness.value['${b_link}'] = blink ?? ''
bBusiness.value['${b_mobile}'] = bPhoneNumber ?? ''
bBusiness.value['${b_address}'] = res.data.detailedAddress ?? ''
}
})
}
// 获取个人信息
const getPersonInfo = (id: string, type: string) => {
getPersonInfoByTenantId(id).then((res) => {
if (type == 'aPerson') {
aPerson.value['${a_name}'] = res.data.name ?? ''
aPerson.value['${a_idCard}'] = res.data.idCard ?? ''
aPerson.value['${a_mobile}'] = res.data.phone ?? ''
aPerson.value['${a_address}'] = res.data.fullAddress ?? ''
} else {
bPerson.value['${b_name}'] = res.data.name ?? ''
bPerson.value['${b_idCard}'] = res.data.idCard ?? ''
bPerson.value['${b_mobile}'] = res.data.phone ?? ''
bPerson.value['${b_address}'] = res.data.fullAddress ?? ''
}
})
}
// 清空第一期第二期百分比金额
const clearRatioAmount = () => {
queryParam.firstPayAmount = null
queryParam.firstPayRatio = null
queryParam.secondPayAmount = null
queryParam.secondPayRatio = null
queryParam.platformFirstPayRatio = 40
queryParam.platformSecondPayRatio = 60
}
// 改变合同金额
const changeAmount = (val: any) => {
clearRatioAmount()
}
// 一次性还是两次付款切换
const changeRadio = (val: any) => {
if (val == 1) {
queryParam.firstPayRatio = null
queryParam.firstPayAmount = null
queryParam.secondPayRatio = null
queryParam.secondPayAmount = null
queryParam.platformFirstPayRatio = 40
queryParam.platformSecondPayRatio = 60
}
}
// 改变第一期百分比
const changeFirstPayRatio = (val: string) => {
let numVal = Number(val)
if (numVal > 100 || numVal <= 0) {
queryParam.firstPayRatio = null
clearRatioAmount()
return
}
if (!val) {
clearRatioAmount()
}
if (queryParam.amount) {
queryParam.firstPayRatio = Number(Number(val).toFixed(0))
queryParam.firstPayAmount = Number(Number((queryParam.amount * queryParam.firstPayRatio) / 100).toFixed(2))
queryParam.firstPayRatio ? (queryParam.secondPayRatio = 100 - queryParam.firstPayRatio) : (queryParam.secondPayRatio = 0)
queryParam.secondPayAmount = Number((queryParam.amount - queryParam.firstPayAmount).toFixed(2))
queryParam.platformFirstPayRatio = queryParam.firstPayRatio
queryParam.platformSecondPayRatio = queryParam.secondPayRatio
}
}
// 改变第二期百分比
const changeSecondPayRatio = (val: string) => {
let numVal = Number(val)
if (numVal > 100 || numVal <= 0) {
queryParam.secondPayRatio = null
clearRatioAmount()
return
}
if (!val) {
clearRatioAmount()
}
if (queryParam.amount) {
if (queryParam.secondPayRatio) {
queryParam.secondPayRatio = Number(Number(val).toFixed(0))
queryParam.secondPayAmount = Number(Number((queryParam.amount * queryParam.secondPayRatio) / 100).toFixed(2))
queryParam.firstPayRatio = 100 - queryParam.secondPayRatio
queryParam.firstPayAmount = Number((queryParam.amount - queryParam.secondPayAmount).toFixed(2))
queryParam.platformFirstPayRatio = queryParam.firstPayRatio
queryParam.platformSecondPayRatio = queryParam.secondPayRatio
}
}
}
// 改变第一期价格
const changeFirstPayAmount = (val: string) => {
let numVal = Number(val)
if (queryParam.amount && (numVal <= 0 || numVal >= queryParam.amount)) {
queryParam.firstPayAmount = null
clearRatioAmount()
return
}
if (!val) {
clearRatioAmount()
}
if (queryParam.amount) {
queryParam.firstPayRatio = (Number(val) / queryParam.amount) * 100
queryParam.secondPayRatio = 100 - queryParam.firstPayRatio
queryParam.secondPayAmount = queryParam.amount - Number(val)
queryParam.platformFirstPayRatio = queryParam.firstPayRatio
queryParam.platformSecondPayRatio = queryParam.secondPayRatio
}
}
// 改变第二期价格
const changeSecondPayAmount = (val: string) => {
let numVal = Number(val)
if (queryParam.amount && (numVal <= 0 || numVal >= queryParam.amount)) {
queryParam.secondPayAmount = null
clearRatioAmount()
return
}
if (!val) {
clearRatioAmount()
}
if (queryParam.amount) {
queryParam.secondPayRatio = (Number(val) / queryParam.amount) * 100
queryParam.firstPayRatio = 100 - queryParam.secondPayRatio
queryParam.firstPayAmount = queryParam.amount - Number(val)
queryParam.platformFirstPayRatio = queryParam.firstPayRatio
queryParam.platformSecondPayRatio = queryParam.secondPayRatio
}
}
/**
* @description 将数值金额转换成大写金额
* @date 2019-01-29
* @export
* @param {*} n 数值金额
* @returns string
*/
const digitUppercase = (n: any) => {
const fraction = ['角', '分']
const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
const unit = [
['元', '万', '亿'],
['', '拾', '佰', '仟'],
]
let num = Math.abs(n)
let s = ''
fraction.forEach((item, index) => {
s += (digit[Math.floor(num * 10 * 10 ** index) % 10] + item).replace(/零./, '')
})
s = s || '整'
num = Math.floor(num)
for (let i = 0; i < unit[0].length && num > 0; i += 1) {
let p = ''
for (let j = 0; j < unit[1].length && num > 0; j += 1) {
p = digit[num % 10] + unit[1][j] + p
num = Math.floor(num / 10)
}
s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s
}
return s
.replace(/(零.)*零元/, '元')
.replace(/(零.)+/g, '零')
.replace(/^整$/, '零元整')
}
// 预览
const previewHandler = async (save: boolean) => {
// -------校验4个form表单----------
// 左上角表单
const rule1 = new Promise((resolve: (value?: any) => void, reject) => {
ruleFormRef.value?.validate((valid) => {
if (valid) {
resolve(true)
} else {
reject(false)
return false
}
})
})
// 内容条款表单
const rule2 = new Promise((resolve: (value?: any) => void, reject) => {
contentRuleFormRef.value?.validate((valid) => {
if (valid) {
resolve(true)
} else {
reject('c')
return false
}
})
})
// 甲方输入表单
const aInputFormRule = new Promise((resolve: (value?: any) => void, reject) => {
aInputFormRef.value?.validate((valid) => {
if (valid) {
resolve(true)
} else {
reject('甲方不对')
ElMessage.error('请填写正确的内容！')
return false
}
})
})
// 乙方输入表单
const bInputFormRule = new Promise((resolve: (value?: any) => void, reject) => {
bInputFormRef.value?.validate((valid) => {
if (valid) {
resolve(true)
} else {
reject('乙方不对')
ElMessage.error('请填写正确的内容！')
return false
}
})
})
const ruleArr = [rule1, rule2]
if (activeName.value == 'a') {
ruleArr.unshift(aInputFormRule)
} else if (activeName.value == 'b') {
ruleArr.unshift(bInputFormRule)
}
await ruleArr[0]
.then((res) => {
console.log(res, 1)
})
.catch((err) => {
console.log(err, 2)
})
Promise.all(ruleArr)
.then(() => {
//进行的操作
if (!save) {
// 预览按钮
newHtmlContent.value = htmlContent.value.replaceAll('${contract_name}', queryParam.name)
newHtmlContent.value = newHtmlContent.value.replaceAll('${contract_code}', '自动生成')
if (typeName.value == 'B2B') {
newHtmlContent.value = infoReplace(aBusiness.value, newHtmlContent.value)
newHtmlContent.value = infoReplace(bBusiness.value, newHtmlContent.value)
} else if (typeName.value == 'B2C') {
newHtmlContent.value = infoReplace(aBusiness.value, newHtmlContent.value)
newHtmlContent.value = infoReplace(bPerson.value, newHtmlContent.value)
} else if (typeName.value == 'C2B') {
newHtmlContent.value = infoReplace(aPerson.value, newHtmlContent.value)
newHtmlContent.value = infoReplace(bBusiness.value, newHtmlContent.value)
} else if (typeName.value == 'C2C') {
newHtmlContent.value = infoReplace(aPerson.value, newHtmlContent.value)
newHtmlContent.value = infoReplace(bPerson.value, newHtmlContent.value)
}
// 区分设计制造
const secondPayRatioFn = () => {
if (systemType.value == '1') {
return queryParam.platformSecondPayRatio || ''
} else if (systemType.value == '2') {
return queryParam.platformSecondPayRatio ? queryParam.platformSecondPayRatio / 2 : ''
}
}
// 内容条款替换
let payContent = {
'${amount}': queryParam.amount,
'${amount_words}': digitUppercase(queryParam.amount),
'${payMode_1}': '',
'${payMode_2}': '',
'${firstPayRatio}': queryParam.firstPayRatio || '',
'${firstPayAmount}': queryParam.firstPayAmount || '',
'${secondPayRatio}': queryParam.secondPayRatio || '',
'${secondPayAmount}': queryParam.secondPayAmount || '',
'${platformFirstPayRatio}': queryParam.platformFirstPayRatio || '',
'${platformSecondPayRatio}': secondPayRatioFn(),
'${contract_date}': app?.proxy?.$dayjs.toDD(new Date().toDateString()),
} as any
let demandReplace2 = {
'${demand_name}': demandReplace.value.name,
'${demand_content}': demandReplace.value.content,
} as any
if (queryParam.payMode == 1) {
payContent['${payMode_1}'] = 'B'
} else {
payContent['${payMode_2}'] = 'A'
}
const replaceObj = { ...payContent, ...demandReplace2 }
newHtmlContent.value = infoReplace(replaceObj, newHtmlContent.value)
// for (let k in demandReplace2) {
// newHtmlContent.value = newHtmlContent.value.replaceAll(k, demandReplace2[k])
// }
// for (let k in payContent) {
// newHtmlContent.value = newHtmlContent.value.replaceAll(k, payContent[k])
// }
for (let k in aInputForm.value) {
if (k.indexOf('textArea') >= 0) {
newHtmlContent.value = newHtmlContent.value.replaceAll(
k,
(aInputForm.value[k] || '').split('\n').join('<br> ')
)
} else {
newHtmlContent.value = newHtmlContent.value.replaceAll(k, aInputForm.value[k] || '')
}
}
for (let k in bInputForm.value) {
if (k.indexOf('textArea') >= 0) {
newHtmlContent.value = newHtmlContent.value.replaceAll(
k,
(bInputForm.value[k] || '').split('\n').join('<br> ')
)
} else {
newHtmlContent.value = newHtmlContent.value.replaceAll(k, bInputForm.value[k] || '')
}
}
previewRef.value.openDialog({ content: newHtmlContent.value })
} else {
// 保存按钮
saveLoading.value = true
queryParam.fillingContent = {}
if (aInputForm.value) {
for (let k in aInputForm.value) {
queryParam.fillingContent[k] = aInputForm.value[k] || ''
}
}
if (bInputForm.value) {
for (let k in bInputForm.value) {
queryParam.fillingContent[k] = bInputForm.value[k] || ''
}
}
createdContract(queryParam)
.then((res) => {
saveLoading.value = false
ElMessage.success('保存成功')
emit('reload')
visible.value = false
})
.catch(() => {
saveLoading.value = false
})
}
})
.catch((err) => {
if (err == 'c') {
activeName.value = 'c'
}
})
}
// 内容替换
const infoReplace = (objectTpe: any, html: any): any => {
// console.log(objectTpe)
for (let k in objectTpe) {
html = html.replaceAll(k, `<u>${objectTpe[k]}</u>`)
}
return html
}
// 保存合同
const saveContract = () => {
previewHandler(true)
}
// 暴露方法给父组件
defineExpose({
openDialog,
})
</script>
<template>
<div>
<el-dialog
v-model="visible"
:close-on-click-modal="false"
:destroy-on-close="true"
fullscreen
:modal="false"
class="bigDialog"
:show-close="false"
@close="closeDialog">
<template #header>
<div class="dialog-title">创建合同</div>
<span class="backBn">
<el-button type="primary" @click="closeDialog">返回</el-button>
</span>
</template>
<el-row :gutter="60">
<!-- 左侧 -->
<el-col :span="10" :xl="10" :lg="15">
<el-form :inline="false" label-width="80px" ref="ruleFormRef" :rules="rules" :model="queryParam">
<el-form-item label="合同模板" prop="templateId">
<el-select
v-model="queryParam.templateId"
clearable
style="width: 100%"
placeholder="请选择合同模板"
@change="changeTemplate">
<el-option v-for="item in templateData" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="合同名称" prop="name">
<el-input style="width: 100%" v-model="queryParam.name" clearable placeholder="请输入合同名称"></el-input>
</el-form-item>
<el-form-item label="需求名称" prop="demandId">
<el-select
v-model="queryParam.demandId"
clearable
style="width: 100%"
placeholder="请选择需求名称"
@change="changeDemandName">
<el-option v-for="item in demandList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-form>
<el-tabs v-model="activeName" type="card" :before-leave="beforeTabLeave">
<el-tab-pane label="甲方" name="a">
<el-form :model="aBusiness" class="infoForm" v-if="typeName == 'B2C' || typeName == 'B2B'">
<el-form-item label="公司名称">
<el-input disabled v-model="aBusiness['${a_name}']"></el-input>
</el-form-item>
<el-form-item label="法人代表">
<el-input disabled v-model="aBusiness['${a_legal}']"></el-input>
</el-form-item>
<el-form-item label="联 系 人">
<el-input disabled v-model="aBusiness['${a_link}']"></el-input>
</el-form-item>
<el-form-item label="联系电话">
<el-input disabled v-model="aBusiness['${a_mobile}']"></el-input>
</el-form-item>
<el-form-item label="地 址">
<el-input disabled v-model="aBusiness['${a_address}']" type="textarea" autosize></el-input>
</el-form-item>
</el-form>
<el-form :model="aPerson" class="infoForm" v-if="typeName == 'C2C' || typeName == 'C2B'">
<el-form-item label="姓 名">
<el-input disabled v-model="aPerson['${a_name}']"></el-input>
</el-form-item>
<el-form-item label="证件号码">
<el-input disabled v-model="aPerson['${a_idCard}']"></el-input>
</el-form-item>
<el-form-item label="联系电话">
<el-input disabled v-model="aPerson['${a_mobile}']"></el-input>
</el-form-item>
<el-form-item label="地 址">
<el-input disabled v-model="aPerson['${a_address}']" type="textarea" autosize></el-input>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="乙方" name="b">
<el-form :model="bBusiness" class="infoForm" v-if="typeName == 'B2B' || typeName == 'C2B'">
<el-form-item label="公司名称">
<el-input disabled v-model="bBusiness['${b_name}']"></el-input>
</el-form-item>
<el-form-item label="法人代表">
<el-input disabled v-model="bBusiness['${b_legal}']"></el-input>
</el-form-item>
<el-form-item label="联 系 人">
<el-input disabled v-model="bBusiness['${b_link}']"></el-input>
</el-form-item>
<el-form-item label="联系电话">
<el-input disabled v-model="bBusiness['${b_mobile}']"></el-input>
</el-form-item>
<el-form-item label="地 址">
<el-input disabled v-model="bBusiness['${b_address}']" type="textarea" autosize></el-input>
</el-form-item>
</el-form>
<el-form :model="bPerson" class="infoForm" v-if="typeName == 'C2C' || typeName == 'B2C'">
<el-form-item label="姓 名">
<el-input disabled v-model="bPerson['${b_name}']"></el-input>
</el-form-item>
<el-form-item label="证件号码">
<el-input disabled v-model="bPerson['${b_idCard}']"></el-input>
</el-form-item>
<el-form-item label="联系电话">
<el-input disabled v-model="bPerson['${b_mobile}']"></el-input>
</el-form-item>
<el-form-item label="地 址">
<el-input disabled v-model="bPerson['${b_address}']" type="textarea" autosize></el-input>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="内容条款" name="c">
<el-form class="infoForm" :model="queryParam" :rules="rules" ref="contentRuleFormRef">
<el-form-item label="合同金额" prop="amount">
<el-input min="1" v-model="queryParam.amount" type="number" @change="changeAmount">
<template #append>元,含税</template>
</el-input>
</el-form-item>
<el-form-item label="支付方式" prop="payMode">
<el-radio-group v-model="queryParam.payMode" @change="changeRadio">
<!-- 一次性全款、两次性付款 -->
<el-radio
v-for="(item, index) in $getDictOptions(DictEnum.PAYMENT_METHOD)"
:key="index"
:label="item.code"
>{{ item.name }}</el-radio
>
</el-radio-group>
</el-form-item>
<div style="padding: 0 30px 0 30px" v-if="queryParam.payMode == 2">
<el-form-item label="第一期" required>
<el-form-item prop="firstPayRatio">
<el-input
style="width: 180px"
v-model="queryParam.firstPayRatio"
type="number"
@change="changeFirstPayRatio">
<template #append>%</template>
</el-input>
</el-form-item>
<el-form-item prop="firstPayAmount" style="width: 180px">
<el-input
v-model="queryParam.firstPayAmount"
type="number"
@change="changeFirstPayAmount"
disabled>
<template #append>元</template>
</el-input>
</el-form-item>
</el-form-item>
<el-form-item label="第二期" required>
<el-form-item prop="secondPayRatio">
<el-input
style="width: 180px"
v-model="queryParam.secondPayRatio"
type="number"
@change="changeSecondPayRatio">
<template #append>%</template>
</el-input>
</el-form-item>
<el-form-item prop="secondPayAmount" style="width: 180px">
<el-input
v-model="queryParam.secondPayAmount"
type="number"
@change="changeSecondPayAmount"
disabled>
<template #append>元</template>
</el-input>
</el-form-item>
</el-form-item>
</div>
</el-form>
</el-tab-pane>
</el-tabs>
</el-col>
<!-- 右侧 -->
<el-col :span="14" :xl="14" :lg="9">
<!-- 甲方 -->
<el-form :model="aInputForm" label-width="150px" v-if="activeName == 'a'" :rules="aInputFormRules" ref="aInputFormRef">
<h3 class="infoTitle">甲方输入内容</h3>
<div v-for="(aItem, index) in formContent.a" :key="index">
<el-form-item
v-if="aItem.key == '${a_text}'"
:label="aItem.label"
:prop="aItem.labelKey"
:rules="aInputFormRules.textRules">
<el-input type="text" v-model="aInputForm[aItem.labelKey]" :maxlength="256"></el-input>
</el-form-item>
<el-form-item
v-if="aItem.key == '${a_number}'"
:label="aItem.label"
:prop="aItem.labelKey"
:rules="aInputFormRules.numberRules">
<el-input-number
v-model="aInputForm[aItem.labelKey]"
:controls="false"
:min="0"
:max="999999999"></el-input-number>
</el-form-item>
<el-form-item v-if="aItem.key == '${a_textArea}'" :label="aItem.label" :prop="aItem.labelKey">
<el-input type="textarea" v-model="aInputForm[aItem.labelKey]"></el-input>
</el-form-item>
</div>
</el-form>
<!-- 乙方 -->
<el-form :model="bInputForm" label-width="150px" v-if="activeName == 'b'" :rules="aInputFormRules" ref="bInputFormRef">
<h3 class="infoTitle">乙方输入内容</h3>
<div v-for="(bItem, index) in formContent.b" :key="index">
<el-form-item v-if="bItem.key == '${b_text}'" :label="bItem.label" :prop="bItem.labelKey">
<el-input type="text" v-model="bInputForm[bItem.labelKey]" :maxlength="256"></el-input>
</el-form-item>
<el-form-item
v-if="bItem.key == '${b_number}'"
:label="bItem.label"
:prop="bItem.labelKey"
:rules="aInputFormRules.numberRules">
<el-input-number
v-model="bInputForm[bItem.labelKey]"
:controls="false"
:min="0"
:max="999999999"></el-input-number>
</el-form-item>
<el-form-item v-if="bItem.key == '${b_textArea}'" :label="bItem.label" :prop="bItem.labelKey">
<el-input type="textarea" v-model="bInputForm[bItem.labelKey]"></el-input>
</el-form-item>
</div>
</el-form>
<h3 v-if="activeName == 'c'" class="infoTitle">无内容</h3>
</el-col>
</el-row>
<Preview ref="previewRef" />
<template #footer>
<el-button type="info" plain @click="closeDialog">取消</el-button>
<el-button type="success" plain @click="previewHandler(false)">预览</el-button>
<el-button type="success" @click="saveContract" :loading="saveLoading">保存</el-button>
</template>
</el-dialog>
</div>
</template>
<style lang="scss" scoped>
.el-dialog__title {
font-size: 20px;
}
:deep(.el-dialog__footer) {
display: flex;
justify-content: center;
}
:deep(.el-tabs__item) {
// width: 202px;
text-align: center;
&.is-active {
background-color: $qtColor;
color: #fff;
}
}
:deep(.infoForm) {
.el-form-item__label {
display: inline-block;
width: 80px;
}
}
:deep(.el-tabs__header) {
margin: 0 8px 15px 0;
}
.infoTitle {
margin: 0 0 30px 50px;
font-size: 16px;
color: #303133;
font-weight: normal;
}
:deep(.el-form-item__content) {
flex-wrap: nowrap !important;
}
:deep(.el-tabs__nav) {
display: flex;
width: 100%;
.el-tabs__item {
flex: 1;
}
}
:deep(.el-dialog__footer) {
justify-content: center !important;
}
:deep(.el-input-number) {
width: 100%;
.el-input__inner {
text-align: left;
}
}
</style>
811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
