<script setup lang="ts">
import { ref, reactive, shallowRef, onBeforeUnmount, onMounted, nextTick, watch } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import {
getContractTreeType,
buildContractTemplate,
checkContractTemplate,
editContractTemplate,
checkCode,
} from '@/api/contract/mould'
import { ContractTemplateParams } from '@/types/api/contract/mould'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { SlateTransforms, DomEditor } from '@wangeditor/editor'
import { B2BNodeArr, B2CNodeArr, C2BNodeArr, C2CNodeArr } from './infoData'
import Preview from '../preview/index.vue'
const emit = defineEmits(['reload'])
const ruleFormRef = ref<FormInstance>()
const PreviewRef = ref()
// 组件标识列表
const componentList = [] as string[]
// 查询参数
let queryParam = reactive<ContractTemplateParams>({
typeCode: '',
code: '',
name: '',
status: 0,
content: '', //html内容
version: 1,
nodeContent: [],
needFillContent: { a: [], b: [] }, //甲方乙方 form内容
})
// 信息的html
const infoHtml = ref('')
const treeData = ref([])
// 甲方插入输入框
const insertInput = reactive({
textLabel: '',
numberLabel: '',
textAreaLabel: '',
})
// 乙方插入输入框
const bInsertInput = reactive({
textLabel: '',
numberLabel: '',
textAreaLabel: '',
})
//核对code是否重复
const rulesCheckCode = (rule: any, value: any, callback: any) => {
if (dialogTitle.value == '编辑模板') {
callback()
} else {
checkCode(value)
.then((res) => {
if (res.data) {
callback(new Error('编号已存在请重新输入！'))
} else {
callback()
}
})
.catch(() => {})
}
}
const rules = reactive<FormRules>({
typeCode: [
{
required: true,
message: '请选择模板类型',
trigger: 'blur',
},
],
code: [
{
required: true,
message: '请输入模板编号',
trigger: 'blur',
},
{ pattern: /^[^\u4e00-\u9fa5]+$/, message: '不允许输入中文' },
{ pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号' },
{ validator: rulesCheckCode, trigger: 'blur' },
],
name: [
{
required: true,
message: '请输入合同模板名称',
trigger: 'blur',
},
],
})
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const infoEditorRef = shallowRef()
const toolbarConfig = {} as any
toolbarConfig.excludeKeys = [
'fullScreen', // 排除菜单组，写菜单组 key 的值即可
]
let editorConfig = {
MENU_CONF: {
uploadImage: {},
},
placeholder: '请输入内容...',
}
const handleCreated = (editor: any) => {
editorRef.value = editor // 记录 editor 实例，重要！
nextTick(() => {
const toolbar = DomEditor.getToolbar(editor)
console.log(toolbar?.getConfig().toolbarKeys)
})
}
const handleInfoCreated = (editor: any) => {
infoEditorRef.value = editor // 记录 editor 实例，重要！
infoEditorRef.value.disable()
}
// 弹窗显示
const visible = ref(false)
// 编辑还是创建合同
const operationType = ref('')
// 编辑合同时的id
const editId = ref('')
// 版本
const version = ref(0)
// 弹框标题
const dialogTitle = ref('')
// 打开弹框
const openDialog = (type: string, id: string) => {
insertNum.value = 0
operationType.value = type
type == 'edit' ? (dialogTitle.value = '编辑模板') : (dialogTitle.value = '创建模板')
getContractTreeType().then((res) => {
const newTreeData = JSON.parse(JSON.stringify(res.data).replace(/name/g, 'label').replace(/code/g, 'value'))
newTreeData.forEach((item: any) => {
if (item.pvalue == '0') {
item.disabled = true
}
})
treeData.value = newTreeData
if (type == 'edit') {
editId.value = id
// 查询合同明细
checkContractTemplate(id).then(({ data }) => {
queryParam.typeCode = data.typeCode
queryParam.code = data.code
queryParam.name = data.name
queryParam.content = data.content
queryParam.status = data.status
queryParam.needFillContent = data.needFillContent
queryParam.version = data.version
queryParam.nodeContent = data.nodeContent
// 第一个富文本 甲乙个人信息
checkSelect({ label: data.typeName })
// 第二个富文本编辑器
const nodeContent = JSON.parse(JSON.stringify(queryParam.nodeContent))
const myNodeContent = nodeContent.filter((item: any) => !item.isInfo)
myNodeContent.forEach((item: any) => {
item.children.forEach((item2: any) => {
if (item2.text) {
componentList.push(item2.text)
}
})
})
SlateTransforms.insertNodes(editorRef.value, myNodeContent)
// console.log(componentList)
})
}
visible.value = true
})
}
// 关闭弹框
const closeDialog = () => {
visible.value = false
queryParam.status = 0
queryParam.code = ''
queryParam.name = ''
queryParam.typeCode = ''
queryParam.content = ''
infoHtml.value = ''
}
// 预览
const previewHandler = () => {
let allHtml = infoEditorRef.value.getHtml() + editorRef.value.getHtml()
PreviewRef.value.openDialog({ content: allHtml })
}
const saveLoading = ref(false)
// 保存
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid) => {
if (valid) {
saveLoading.value = true
let nodeArray = editorRef.value.children
console.log(nodeArray)
let infoNodeArray = infoEditorRef.value.children
console.log(infoNodeArray)
queryParam.nodeContent = [...nodeArray, ...infoNodeArray]
let bodyHtml = infoEditorRef.value.getHtml() + editorRef.value.getHtml()
queryParam.content = '<!DOCTYPE html>\n' + '<html lang="zh-CN">\n' + '<body>\n' + `${bodyHtml}\n` + '</body>\n' + '</html>'
console.log(queryParam.content)
if (operationType.value == 'create') {
buildContractTemplate(queryParam)
.then(() => {
saveLoading.value = false
ElMessage.success('保存成功')
emit('reload')
visible.value = false
})
.catch(() => {
saveLoading.value = false
})
} else {
editContractTemplate(editId.value, queryParam)
.then(() => {
saveLoading.value = false
ElMessage.success('编辑成功')
emit('reload')
visible.value = false
})
.catch(() => {
saveLoading.value = false
})
}
} else {
return false
}
})
}
let insertNum = ref(0)
// 插入输入框
const insertInputHandler = (type: string, tag: string, aOrB: string) => {
editorRef.value.focus()
insertNum.value++
// 甲方
if (aOrB == 'a') {
if (type == 'text') {
let aText = 'a_text'
let aTag = '${' + aText + '}'
let aKey = '${' + aText + '_' + insertNum.value + '}'
// console.log(aKey)
let node = {
text: aKey,
isKey: true,
label: insertInput.textLabel,
aOrB: 'a',
underline: true,
mType: aTag,
bold: true,
}
// console.log(node)
editorRef.value.insertNode(node)
// 此处必须添加一个节点，且必须关闭加粗，修改字体颜色， 取消isKey标识. 使得后续输入与前边的标识节点区分开
let node1 = { text: ' ', bold: false, color: 'none' }
editorRef.value.insertNode(node1)
queryParam.needFillContent.a.push({ label: insertInput.textLabel, key: aTag, aOrB: 'a', labelKey: aKey })
// console.log(queryParam.needFillContent.a)
insertInput.textLabel = ''
componentList.push(aKey)
} else if (type == 'textArea') {
let aText = 'a_textArea'
let aTag = '${' + aText + '}'
let aKey = '${' + aText + '_' + insertNum.value + '}'
// console.log(aKey)
let node = {
text: aKey,
isKey: true,
label: insertInput.textAreaLabel,
aOrB: 'a',
underline: false,
mType: aTag,
bold: true,
}
// console.log(node)
editorRef.value.insertNode(node)
// 此处必须添加一个节点，且必须关闭加粗，修改字体颜色， 取消isKey标识. 使得后续输入与前边的标识节点区分开
let node1 = { text: ' ', bold: false, color: 'none' }
editorRef.value.insertNode(node1)
queryParam.needFillContent.a.push({ label: insertInput.textAreaLabel, key: aTag, aOrB: 'a', labelKey: aKey })
// console.log(queryParam.needFillContent.a)
insertInput.textAreaLabel = ''
componentList.push(aKey)
} else {
let aNumber = 'a_number'
let aTag = '${' + aNumber + '}'
let aKey = '${' + aNumber + '_' + insertNum.value + '}'
let node = {
text: aKey,
isKey: true,
label: insertInput.numberLabel,
aOrB: 'a',
underline: true,
mType: aTag,
bold: true,
}
editorRef.value.insertNode(node)
// 此处必须添加一个节点，且必须关闭加粗，修改字体颜色， 取消isKey标识. 使得后续输入与前边的标识节点区分开
let node1 = { text: ' ', bold: false, color: 'none' }
editorRef.value.insertNode(node1)
queryParam.needFillContent.a.push({ label: insertInput.numberLabel, key: aTag, aOrB: 'a', labelKey: aKey })
insertInput.numberLabel = ''
componentList.push(aKey)
}
}
// 乙方
if (aOrB == 'b') {
if (type == 'text') {
let bText = 'b_text'
let bTag = '${' + bText + '}'
let bKey = '${' + bText + '_' + insertNum.value + '}'
let node = {
text: bKey,
isKey: true,
label: bInsertInput.textLabel,
aOrB: 'b',
underline: true,
mType: bTag,
bold: true,
}
editorRef.value.insertNode(node)
// 此处必须添加一个节点，且必须关闭加粗，修改字体颜色， 取消isKey标识. 使得后续输入与前边的标识节点区分开
let node1 = { text: ' ', bold: false, color: 'none' }
editorRef.value.insertNode(node1)
queryParam.needFillContent.b.push({ label: bInsertInput.textLabel, key: bTag, aOrB: 'b', labelKey: bKey })
bInsertInput.textLabel = ''
componentList.push(bKey)
} else if (type == 'textArea') {
let bText = 'b_textArea'
let bTag = '${' + bText + '}'
let bKey = '${' + bText + '_' + insertNum.value + '}'
let node = {
text: bKey,
isKey: true,
label: bInsertInput.textAreaLabel,
aOrB: 'b',
underline: false,
mType: bTag,
bold: true,
}
editorRef.value.insertNode(node)
// 此处必须添加一个节点，且必须关闭加粗，修改字体颜色， 取消isKey标识. 使得后续输入与前边的标识节点区分开
let node1 = { text: ' ', bold: false, color: 'none' }
editorRef.value.insertNode(node1)
queryParam.needFillContent.b.push({ label: bInsertInput.textAreaLabel, key: bTag, aOrB: 'b', labelKey: bKey })
bInsertInput.textAreaLabel = ''
componentList.push(bKey)
} else {
let bNumber = 'b_number'
let bTag = '${' + bNumber + '}'
let bKey = '${' + bNumber + '_' + insertNum.value + '}'
let node = {
text: bKey,
isKey: true,
label: bInsertInput.numberLabel,
aOrB: 'b',
underline: true,
mType: bTag,
bold: true,
}
editorRef.value.insertNode(node)
// 此处必须添加一个节点，且必须关闭加粗，修改字体颜色， 取消isKey标识. 使得后续输入与前边的标识节点区分开
let node1 = { text: ' ', bold: false, color: 'none' }
editorRef.value.insertNode(node1)
queryParam.needFillContent.b.push({ label: bInsertInput.numberLabel, key: bTag, aOrB: 'b', labelKey: bKey })
bInsertInput.numberLabel = ''
componentList.push(bKey)
}
}
// 内容条款
if (aOrB == 'c') {
// console.log(tag)
let node = {
text: tag,
isKey: true,
aOrB: 'c',
underline: true,
bold: true,
}
editorRef.value.insertNode(node)
// 此处必须添加一个节点，且必须关闭加粗，修改字体颜色， 取消isKey标识. 使得后续输入与前边的标识节点区分开
let node1 = { text: ' ', bold: false, color: 'none' }
editorRef.value.insertNode(node1)
componentList.push(tag)
}
// console.log(queryParam.needFillContent)
}
const keyStr = ref('')
const enterKey = ref('')
document.addEventListener('keydown', (e) => {
const event = window.event as KeyboardEvent
keyStr.value = event.key
enterKey.value = event.key
})
// 信息富文本改变事件
const changeInfoEditor = (editor: any) => {
// console.log(editor.children, 'info')
// console.log(infoHtml.value)
// console.log(infoEditorRef.value.children)
}
// 富文本改变文字
const changeEditor = (editor: any) => {
removeNoNormalNode(editorRef.value.children)
if (keyStr.value == 'Backspace') {
return
} else {
let selection = editor.selection
let nodeArray = editor.children
if (selection) {
let nodes = nodeArray[selection.focus.path[0]].children
let node = nodes[selection.focus.path[1]]
if (node != null && node.isKey) {
if (!isComponent(node.text)) {
SlateTransforms.removeNodes(editorRef.value, { at: selection.focus.path })
}
}
// console.log(editorRef.value.getHtml())
if (enterKey.value !== 'Enter') {
// ---多选删除---
const newAInputList = [] as { label: string; key: string; aOrB: string; labelKey: string }[]
const newBInputList = [] as { label: string; key: string; aOrB: string; labelKey: string }[]
// console.log(nodeArray, 'nodeArray')
nodeArray.filter((node: any) => {
node.children.filter((item: any) => {
// console.log(item, 'item')
// eslint-disable-next-line @typescript-eslint/no-extra-semi
if (
item.text.indexOf('a') !== -1 &&
(item.mType == '${a_number}' || item.mType == '${a_text}' || item.mType == '${a_textArea}')
) {
newAInputList.push({ label: item.label, key: item.mType, aOrB: 'a', labelKey: item.text })
}
if (
item.text.indexOf('b') !== -1 &&
(item.mType == '${b_number}' || item.mType == '${b_text}' || item.mType == '${b_textArea}')
) {
newBInputList.push({ label: item.label, key: item.mType, aOrB: 'b', labelKey: item.text })
}
})
})
queryParam.needFillContent.a = newAInputList
queryParam.needFillContent.b = newBInputList
// console.log(queryParam.needFillContent)
}
}
}
}
const isComponent = (tag: string): boolean => {
for (let tagName of componentList) {
if (tagName == tag) {
return true
}
}
return false
}
// 删除操作
const deleteHandle = () => {
let selection = editorRef.value.selection
let nodeArray = editorRef.value.children
let nodes = nodeArray[selection.focus.path[0]].children
let node = nodes[selection.focus.path[1]]
if (node != null && node.isKey) {
SlateTransforms.removeNodes(editorRef.value, { at: selection.focus.path })
}
removeNoNormalNode(editorRef.value.children)
// 单纯backspace按钮
if (node.mType == '${a_number}' || node.mType == '${a_text}' || node.mType == '${a_textArea}') {
if (node.aOrB == 'a') {
const index = queryParam.needFillContent.a.findIndex((item) => item.label == node.label)
queryParam.needFillContent.a.splice(index, 1)
}
return
}
if (node.mType == '${b_number}' || node.mType == '${b_text}' || node.mType == '${b_textArea}') {
if (node.aOrB == 'b') {
const index = queryParam.needFillContent.b.findIndex((item) => item.label == node.label)
queryParam.needFillContent.b.splice(index, 1)
}
return
}
//--- 多选删除---
const newAInputList = [] as { label: string; key: string; aOrB: string; labelKey: string }[]
const newBInputList = [] as { label: string; key: string; aOrB: string; labelKey: string }[]
nodeArray.filter((node: any) => {
node.children.filter((item: any) => {
// eslint-disable-next-line @typescript-eslint/no-extra-semi
if (
item.text.indexOf('a') !== -1 &&
(item.mType == '${a_number}' || item.mType == '${a_text}' || item.mType == '${a_textArea}')
) {
newAInputList.push({ label: item.label, key: item.mType, aOrB: 'a', labelKey: item.text })
}
if (
item.text.indexOf('b') !== -1 &&
(item.mType == '${b_number}' || item.mType == '${b_text}' || item.mType == '${b_textArea}')
) {
newBInputList.push({ label: item.label, key: item.mType, aOrB: 'b', labelKey: item.text })
}
})
})
queryParam.needFillContent.a = newAInputList
queryParam.needFillContent.b = newBInputList
}
// 多选删除
const removeNoNormalNode = (nodeArray: any) => {
if (nodeArray) {
for (let nodeRow of nodeArray) {
if (nodeRow && nodeRow.children) {
let nodeList = nodeRow.children
// console.log(nodeList, '11111111')
for (let node of nodeList) {
if (node.isKey && !isComponent(node.text)) {
let path = DomEditor.findPath(editorRef.value, node)
SlateTransforms.removeNodes(editorRef.value, { at: path })
}
}
}
}
}
}
const selectLabel = ref('')
// 模板类型树控制
const checkSelect = (data: any) => {
// 防止重复点击一直添加<p><br></p>元素，往下移动
infoEditorRef.value.setHtml('<p><br></p>')
infoEditorRef.value.clear()
if (data.label == 'B2B') {
SlateTransforms.insertNodes(infoEditorRef.value, B2BNodeArr)
} else if (data.label == 'B2C') {
SlateTransforms.insertNodes(infoEditorRef.value, B2CNodeArr)
} else if (data.label == 'C2B') {
SlateTransforms.insertNodes(infoEditorRef.value, C2BNodeArr)
} else {
SlateTransforms.insertNodes(infoEditorRef.value, C2CNodeArr)
}
}
const isShowTwo = ref(false)
// 是否显示右边两次付款分期
const isShowTwoPay = (flag: boolean) => {
isShowTwo.value = flag
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
// 暴露方法给父组件
defineExpose({
openDialog,
})
</script>
<template>
<div>
<el-dialog
v-model="visible"
:title="dialogTitle"
:close-on-click-modal="false"
:destroy-on-close="true"
fullscreen
:modal="false"
@close="closeDialog"
:show-close="false"
class="bigDialog">
<template #header>
<div class="dialog-title">{{ dialogTitle }}</div>
<span class="backBn">
<el-button type="primary" @click="closeDialog">返回</el-button>
</span>
</template>
<div class="center">
<el-form ref="ruleFormRef" :model="queryParam" :rules="rules" label-width="120px" :inline="true" status-icon>
<el-form-item label="模板类型" prop="typeCode">
<el-tree-select
v-model="queryParam.typeCode"
:data="treeData"
check-strictly
:render-after-expand="false"
show-checkbox
default-expand-all
check-on-click-node
@check="checkSelect"
style="width: 400px" />
</el-form-item>
<el-form-item label="模板编号" prop="code">
<el-input
v-model="queryParam.code"
:disabled="dialogTitle == '编辑模板'"
clearable
placeholder="请输入模板编号"
maxlength="64"
style="width: 400px">
</el-input>
</el-form-item>
<el-form-item label="模板名称" prop="name">
<el-input v-model="queryParam.name" clearable placeholder="请输入合同模板名称" maxlength="64" style="width: 930px">
</el-input>
</el-form-item>
<el-form-item label=""
><el-checkbox v-model="queryParam.status" :true-label="1" :false-label="0" label="启用" size="large"
/></el-form-item>
</el-form>
</div>
<div class="info">
<div style="border: 1px solid #ccc; width: 1225px">
<Toolbar style="border-bottom: 1px solid #ccc; display: none" :editor="infoEditorRef" mode="default" />
<Editor
style="height: 300px; overflow-y: auto"
v-model="infoHtml"
mode="default"
@onChange="changeInfoEditor"
@onCreated="handleInfoCreated" />
</div>
</div>
<div class="content-box">
<div style="border: 1px solid #ccc; width: 1225px">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
<Editor
style="height: 942px; overflow-y: auto"
:defaultConfig="editorConfig"
mode="default"
@onChange="changeEditor"
@onCreated="handleCreated"
@keyup.delete="deleteHandle" />
</div>
<div class="operation">
<el-card>
<div class="a">
<span class="title-n">甲方</span>
<div>
<el-input
v-model="insertInput.textLabel"
placeholder="请输入标题"
class="line"
style="width: 100px"></el-input>
文本输入框
<el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('text', '${a_text}', 'a')"
>插入</el-button
>
</div>
<div style="margin-top: 20px">
<el-input
v-model="insertInput.numberLabel"
placeholder="请输入标题"
class="line"
style="width: 100px"></el-input>
数字输入框
<el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('number', '${a_number}', 'a')"
>插入</el-button
>
</div>
<div style="margin-top: 20px">
<el-input
v-model="insertInput.textAreaLabel"
placeholder="请输入标题"
class="line"
style="width: 100px"></el-input>
文本域输入框
<el-button
type="primary"
size="small"
style="margin-left: 8px"
@click="insertInputHandler('textArea', '${a_textArea}', 'a')"
>插入</el-button
>
</div>
</div>
</el-card>
<el-card style="margin-top: 20px">
<div class="b">
<span class="title-n">乙方</span>
<div>
<el-input
v-model="bInsertInput.textLabel"
placeholder="请输入标题"
class="line"
style="width: 100px"></el-input>
文本输入框
<el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('text', '${b_text}', 'b')"
>插入</el-button
>
</div>
<div style="margin-top: 20px">
<el-input
v-model="bInsertInput.numberLabel"
placeholder="请输入标题"
class="line"
style="width: 100px"></el-input>
数字输入框
<el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('number', '${b_number}', 'b')"
>插入</el-button
>
</div>
<div style="margin-top: 20px">
<el-input
v-model="bInsertInput.textAreaLabel"
placeholder="请输入标题"
class="line"
style="width: 100px"></el-input>
文本域输入框
<el-button
type="primary"
size="small"
style="margin-left: 8px"
@click="insertInputHandler('textArea', '${b_textArea}', 'b')"
>插入</el-button
>
</div>
</div>
</el-card>
<el-card style="margin-top: 20px">
<div class="c">
<span class="title-n">内容条款</span>
<div style="margin: 10px 0" class="between">
合同金额
<el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('', '${amount}', 'c')"
>插入</el-button
>
</div>
<div style="margin: 10px 0" class="between">
合同金额大写
<el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('', '${amount_words}', 'c')"
>插入</el-button
>
</div>
<div style="margin-top: 20px">
<div>支付方式</div>
<div style="margin: 10px 0" class="between">
一次性全款
<el-button type="warning" size="small" style="margin-left: 20px" @click="isShowTwoPay(false)"
>选择</el-button
>
<el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('', '${payMode_1}', 'c')"
>插入</el-button
>
</div>
<div class="between">
两次性付款
<el-button type="warning" size="small" style="margin-left: 20px" @click="isShowTwoPay(true)"
>选择</el-button
>
<el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('', '${payMode_2}', 'c')"
>插入</el-button
>
</div>
</div>
<div style="margin: 10px 0" v-if="isShowTwo">
第一期 <span style="margin-left: 10px">%</span
><el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('', '${firstPayRatio}', 'c')"
>插入</el-button
>
<span style="margin-left: 10px">元</span
><el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('', '${firstPayAmount}', 'c')"
>插入</el-button
>
</div>
<div style="margin: 10px 0" v-if="isShowTwo">
第二期 <span style="margin-left: 10px">%</span
><el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('', '${secondPayRatio}', 'c')"
>插入</el-button
>
<span style="margin-left: 10px">元</span
><el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('', '${secondPayAmount}', 'c')"
>插入</el-button
>
</div>
<div style="margin-top: 20px">
<div>平台支付</div>
<div style="margin: 10px 0" class="between">
第一次支付比例
<el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('', '${platformFirstPayRatio}', 'c')"
>插入</el-button
>
</div>
<div style="margin: 10px 0" class="between">
第二次支付比例
<el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('', '${platformSecondPayRatio}', 'c')"
>插入</el-button
>
</div>
</div>
<hr style="margin-top: 20px" />
<section class="other-title">其他内容条款</section>
<div style="margin: 10px 0" class="between">
需求名称
<el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('', '${demand_name}', 'c')"
>插入</el-button
>
</div>
<div style="margin: 10px 0" class="between">
需求内容
<el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('', '${demand_content}', 'c')"
>插入</el-button
>
</div>
<div style="margin: 10px 0" class="between">
日期
<el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="insertInputHandler('', '${contract_date}', 'c')"
>插入</el-button
>
</div>
</div>
</el-card>
</div>
</div>
<template #footer>
<el-button type="info" plain @click="closeDialog">取消</el-button>
<el-button type="success" plain @click="previewHandler">预览</el-button>
<el-button type="success" @click="submitForm(ruleFormRef)" :loading="saveLoading">保存</el-button>
</template>
</el-dialog>
<Preview ref="PreviewRef" />
</div>
</template>
<style lang="scss" scoped>
.el-dialog__title {
font-size: 20px;
}
:deep(.el-dialog__footer) {
display: flex;
justify-content: center;
}
.el-form {
margin: 30px 0 0 0;
}
.center {
width: 1200px;
margin: 0 auto;
}
.content-box {
display: flex;
.operation {
margin-left: 20px;
}
}
:deep(.line) {
.el-input__wrapper {
box-shadow: unset;
border-bottom: 1px solid var(--el-input-border-color);
}
}
.info {
margin: 0 0 50px 0;
}
.title-n {
font-size: 18px;
margin-bottom: 15px;
display: inline-block;
color: $qtColor;
}
.other-title {
font-size: 16px;
margin: 10px 0;
display: inline-block;
}
.between {
display: flex;
justify-content: space-between;
}
:deep(.el-dialog__footer) {
justify-content: center !important;
}
</style>
371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
