模板样式调整

jg-waiwang-pro
mhsnet 7 months ago
parent 679dcf937d
commit d19cab64c7

@ -1,6 +1,3 @@
<template>
<transition name="el-zoom-in-center">
<div class="JNPF-preview-main">
@ -13,242 +10,264 @@
</div>
</div>
<el-row :gutter="15" class=" main" :style="{ margin: '0 auto', width: '100%' }">
<el-form ref="formRef" :model="dataForm" :rules="dataRule" size="small" label-width="130px"
label-position="right">
<template v-if="!loading">
<!-- 具体表单 -->
<el-col :span="12">
<jnpf-form-tip-item label="模板名称" prop="name">
<JnpfInput v-model="dataForm.name" @change="changeData('name', -1)" placeholder="请输入"
clearable :style='{ "width": "100%" }'>
</JnpfInput>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="合同类型" prop="type">
<JnpfSelect v-model="dataForm.type" @change="changeData('type', -1)" placeholder="请选择"
clearable :style='{ "width": "100%" }' :options="typeOptions" :props="typeProps">
</JnpfSelect>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="状态" prop="status">
<JnpfRadio v-model="dataForm.status" @change="changeData('status', -1)" optionType="default"
direction="horizontal" size="small" :options="statusOptions" :props="statusProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="24">
<jnpf-form-tip-item label="模板描述" prop="remark">
<JnpfTextarea v-model="dataForm.remark" @change="changeData('remark', -1)" placeholder="请输入"
:style='{ "width": "100%" }' true type="textarea"
:autosize='{ "minRows": 4, "maxRows": 4 }'>
</JnpfTextarea>
</jnpf-form-tip-item>
</el-col>
<el-col :span="24">
<jnpf-form-tip-item>
<JnpfText
:textStyle='{ "color": "#62A2CB", "font-weight": "bold", "text-decoration": "none", "font-size": 16, "line-height": 32, "font-style": "normal", "text-align": "center" }'
content="模板配置">
</JnpfText>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="合同编号" prop="contractCode">
<JnpfRadio v-model="dataForm.contractCode" @change="changeData('contractCode', -1)"
optionType="default" direction="horizontal" size="small" :options="contractCodeOptions"
:props="contractCodeProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="合同名称" prop="contractName">
<JnpfRadio v-model="dataForm.contractName" @change="changeData('contractName', -1)"
optionType="default" direction="horizontal" size="small" :options="contractNameOptions"
:props="contractNameProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="供方(甲方)" prop="openSupplierA">
<JnpfRadio v-model="dataForm.openSupplierA" @change="changeData('openSupplierA', -1)"
optionType="default" direction="horizontal" size="small" :options="openSupplierAOptions"
:props="openSupplierAProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="需方(乙方)" prop="openBuyerB">
<JnpfRadio v-model="dataForm.openBuyerB" @change="changeData('openBuyerB', -1)"
optionType="default" direction="horizontal" size="small" :options="openBuyerBOptions"
:props="openBuyerBProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="签订时间" prop="openSignTime">
<JnpfRadio v-model="dataForm.openSignTime" @change="changeData('openSignTime', -1)"
optionType="default" direction="horizontal" size="small" :options="openSignTimeOptions"
:props="openSignTimeProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="签订地点" prop="openSignedAt">
<JnpfRadio v-model="dataForm.openSignedAt" @change="changeData('openSignedAt', -1)"
optionType="default" direction="horizontal" size="small" :options="openSignedAtOptions"
:props="openSignedAtProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="24">
<jnpf-form-tip-item>
<JnpfText
:textStyle='{ "color": "#62A2CB", "font-weight": "bold", "text-decoration": "none", "font-size": 16, "line-height": 32, "font-style": "normal", "text-align": "center" }'
content="合同条款">
</JnpfText>
</jnpf-form-tip-item>
</el-col>
<el-col :span="24">
<jnpf-form-tip-item label-width="0">
<div class="JNPF-common-title">
<h2>合同条款</h2>
<el-col :span="24">
<el-form ref="formRef" :model="dataForm" :rules="dataRule" size="small" label-width="130px"
label-position="right">
<template v-if="!loading">
<el-col :span="24">
<div style="padding:15px 0px">
<span style="color: #409EFF;"></span>
<span style="font-size: 14px;font-weight: 500;color:rgb(102, 102, 102);">模板信息</span>
</div>
<el-table :data="dataForm.contractTemplateClauseList" size='mini'>
<el-table-column type="index" width="50" label="序号" align="center" />
<el-table-column label="合同条款" prop="clauseId">
<template slot="header" v-if="true">
<span class="required-sign">*</span>合同条款
</template>
<template slot-scope="scope">
<JnpfSelect v-model="scope.row.clauseId"
@change="changeData('contracttemplateclause-clauseId', scope.$index)"
placeholder="请选择" clearable :style='{ "width": "100%" }'
:options="clauseIdOptions" :props="contracttemplateclauseclauseIdProps">
</JnpfSelect>
</template>
</el-table-column>
<el-table-column label="排序" width="100" prop="sort">
<template slot="header" v-if="false">
<span class="required-sign">*</span>排序
</template>
<template slot-scope="scope">
<JnpfInputNumber v-model="scope.row.sort"
@change="changeData('contracttemplateclause-sort', scope.$index)"
placeholder="数字文本" :step="1">
</JnpfInputNumber>
</template>
</el-table-column>
<el-table-column label="操作" width="50">
<template slot-scope="scope">
<el-button size="mini" type="text" class="JNPF-table-delBtn"
@click="delcontracttemplateclauseList(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="table-actions" @click="addcontracttemplateclauseList()">
<el-button type="text" icon="el-icon-plus">添加</el-button>
</el-col>
<!-- 具体表单 -->
<el-col :span="12">
<jnpf-form-tip-item label="模板名称" prop="name">
<JnpfInput v-model="dataForm.name" @change="changeData('name', -1)"
placeholder="请输入" clearable :style='{ "width": "100%" }'>
</JnpfInput>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="合同类型" prop="type">
<JnpfSelect v-model="dataForm.type" @change="changeData('type', -1)"
placeholder="请选择" clearable :style='{ "width": "100%" }' :options="typeOptions"
:props="typeProps">
</JnpfSelect>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="状态" prop="status">
<JnpfRadio v-model="dataForm.status" @change="changeData('status', -1)"
optionType="default" direction="horizontal" size="small"
:options="statusOptions" :props="statusProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="24">
<jnpf-form-tip-item label="模板描述" prop="remark">
<JnpfTextarea v-model="dataForm.remark" @change="changeData('remark', -1)"
placeholder="请输入" :style='{ "width": "100%" }' true type="textarea"
:autosize='{ "minRows": 4, "maxRows": 4 }'>
</JnpfTextarea>
</jnpf-form-tip-item>
</el-col>
<el-col :span="24">
<div style="padding:15px 0px">
<span style="color: #409EFF;"></span>
<span style="font-size: 14px;font-weight: 500;color:rgb(102, 102, 102);">模板配置</span>
</div>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="合同编号" prop="contractCode">
<JnpfRadio v-model="dataForm.contractCode" @change="changeData('contractCode', -1)"
optionType="default" direction="horizontal" size="small"
:options="contractCodeOptions" :props="contractCodeProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="合同名称" prop="contractName">
<JnpfRadio v-model="dataForm.contractName" @change="changeData('contractName', -1)"
optionType="default" direction="horizontal" size="small"
:options="contractNameOptions" :props="contractNameProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="供方(甲方)" prop="openSupplierA">
<JnpfRadio v-model="dataForm.openSupplierA"
@change="changeData('openSupplierA', -1)" optionType="default"
direction="horizontal" size="small" :options="openSupplierAOptions"
:props="openSupplierAProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="需方(乙方)" prop="openBuyerB">
<JnpfRadio v-model="dataForm.openBuyerB" @change="changeData('openBuyerB', -1)"
optionType="default" direction="horizontal" size="small"
:options="openBuyerBOptions" :props="openBuyerBProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="签订时间" prop="openSignTime">
<JnpfRadio v-model="dataForm.openSignTime" @change="changeData('openSignTime', -1)"
optionType="default" direction="horizontal" size="small"
:options="openSignTimeOptions" :props="openSignTimeProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="签订地点" prop="openSignedAt">
<JnpfRadio v-model="dataForm.openSignedAt" @change="changeData('openSignedAt', -1)"
optionType="default" direction="horizontal" size="small"
:options="openSignedAtOptions" :props="openSignedAtProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="24">
<div style="padding:15px 0px">
<span style="color: #409EFF;"></span>
<span style="font-size: 14px;font-weight: 500;color:rgb(102, 102, 102);">合同条款</span>
</div>
</el-col>
<el-col :span="24">
<jnpf-form-tip-item label-width="0">
<div class="JNPF-common-title">
</div>
<el-table :data="dataForm.contractTemplateClauseList" size='mini' :border="true">
<el-table-column type="index" width="50" label="序号" align="center" />
<el-table-column label="合同条款" prop="clauseId">
<template slot="header" v-if="true">
<span class="required-sign">*</span>合同条款
</template>
<template slot-scope="scope">
<JnpfSelect v-model="scope.row.clauseId"
@change="changeData('contracttemplateclause-clauseId', scope.$index)"
placeholder="请选择" clearable :style='{ "width": "100%" }'
:options="clauseIdOptions"
:props="contracttemplateclauseclauseIdProps">
</JnpfSelect>
</template>
</el-table-column>
<el-table-column label="排序" width="180" prop="sort">
<template slot="header" v-if="false">
<span class="required-sign">*</span>排序
</template>
<template slot-scope="scope">
<JnpfInputNumber v-model="scope.row.sort"
@change="changeData('contracttemplateclause-sort', scope.$index)"
placeholder="数字文本" :step="1" :style='{ "width": "100px" }'>
</JnpfInputNumber>
</template>
</el-table-column>
<el-table-column label="操作" width="60">
<template slot-scope="scope">
<el-button size="mini" type="text" class="JNPF-table-delBtn"
@click="delcontracttemplateclauseList(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="table-actions" @click="addcontracttemplateclauseList()">
<el-button type="text" icon="el-icon-plus">添加</el-button>
</div>
</jnpf-form-tip-item>
</el-col>
<el-col :span="24">
<div style="padding:15px 0px">
<span style="color: #409EFF;"></span>
<span style="font-size: 14px;font-weight: 500;color:rgb(102, 102, 102);">签署项</span>
</div>
</jnpf-form-tip-item>
</el-col>
<el-col :span="24">
<jnpf-form-tip-item>
<JnpfText
:textStyle='{ "color": "#62A2CB", "font-weight": "bold", "text-decoration": "none", "font-size": 16, "line-height": 32, "font-style": "normal", "text-align": "center" }'
content="签署项">
</JnpfText>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="单位名称" prop="openUnitName">
<JnpfRadio v-model="dataForm.openUnitName" @change="changeData('openUnitName', -1)"
optionType="default" direction="horizontal" size="small" :options="openUnitNameOptions"
:props="openUnitNameProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="法定代表人" prop="openLegalRepresentative">
<JnpfRadio v-model="dataForm.openLegalRepresentative"
@change="changeData('openLegalRepresentative', -1)" optionType="default"
direction="horizontal" size="small" :options="openLegalRepresentativeOptions"
:props="openLegalRepresentativeProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="委托代理人" prop="openEntrustedAgent">
<JnpfRadio v-model="dataForm.openEntrustedAgent"
@change="changeData('openEntrustedAgent', -1)" optionType="default"
direction="horizontal" size="small" :options="openEntrustedAgentOptions"
:props="openEntrustedAgentProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="单位地址" prop="openUnitAddress">
<JnpfRadio v-model="dataForm.openUnitAddress" @change="changeData('openUnitAddress', -1)"
optionType="default" direction="horizontal" size="small"
:options="openUnitAddressOptions" :props="openUnitAddressProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="电话" prop="openPhone">
<JnpfRadio v-model="dataForm.openPhone" @change="changeData('openPhone', -1)"
optionType="default" direction="horizontal" size="small" :options="openPhoneOptions"
:props="openPhoneProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="传真" prop="openFax">
<JnpfRadio v-model="dataForm.openFax" @change="changeData('openFax', -1)"
optionType="default" direction="horizontal" size="small" :options="openFaxOptions"
:props="openFaxProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="开户行" prop="openBank">
<JnpfRadio v-model="dataForm.openBank" @change="changeData('openBank', -1)"
optionType="default" direction="horizontal" size="small" :options="openBankOptions"
:props="openBankProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="账号" prop="openAccountNumber">
<JnpfRadio v-model="dataForm.openAccountNumber"
@change="changeData('openAccountNumber', -1)" optionType="default"
direction="horizontal" size="small" :options="openAccountNumberOptions"
:props="openAccountNumberProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="签订时间" prop="openSignTimeB">
<JnpfRadio v-model="dataForm.openSignTimeB" @change="changeData('openSignTimeB', -1)"
optionType="default" direction="horizontal" size="small" :options="openSignTimeBOptions"
:props="openSignTimeBProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="签订地点" prop="openSignedAtB">
<JnpfRadio v-model="dataForm.openSignedAtB" @change="changeData('openSignedAtB', -1)"
optionType="default" direction="horizontal" size="small" :options="openSignedAtBOptions"
:props="openSignedAtBProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<!-- 表单结束 -->
</template>
</el-form>
<SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm" ref="selectDialog"
@select="addForSelect" @close="selectDialogVisible = false" />
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="单位名称" prop="openUnitName">
<JnpfRadio v-model="dataForm.openUnitName" @change="changeData('openUnitName', -1)"
optionType="default" direction="horizontal" size="small"
:options="openUnitNameOptions" :props="openUnitNameProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="法定代表人" prop="openLegalRepresentative">
<JnpfRadio v-model="dataForm.openLegalRepresentative"
@change="changeData('openLegalRepresentative', -1)" optionType="default"
direction="horizontal" size="small" :options="openLegalRepresentativeOptions"
:props="openLegalRepresentativeProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="委托代理人" prop="openEntrustedAgent">
<JnpfRadio v-model="dataForm.openEntrustedAgent"
@change="changeData('openEntrustedAgent', -1)" optionType="default"
direction="horizontal" size="small" :options="openEntrustedAgentOptions"
:props="openEntrustedAgentProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="单位地址" prop="openUnitAddress">
<JnpfRadio v-model="dataForm.openUnitAddress"
@change="changeData('openUnitAddress', -1)" optionType="default"
direction="horizontal" size="small" :options="openUnitAddressOptions"
:props="openUnitAddressProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="电话" prop="openPhone">
<JnpfRadio v-model="dataForm.openPhone" @change="changeData('openPhone', -1)"
optionType="default" direction="horizontal" size="small"
:options="openPhoneOptions" :props="openPhoneProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="传真" prop="openFax">
<JnpfRadio v-model="dataForm.openFax" @change="changeData('openFax', -1)"
optionType="default" direction="horizontal" size="small"
:options="openFaxOptions" :props="openFaxProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="开户行" prop="openBank">
<JnpfRadio v-model="dataForm.openBank" @change="changeData('openBank', -1)"
optionType="default" direction="horizontal" size="small"
:options="openBankOptions" :props="openBankProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="账号" prop="openAccountNumber">
<JnpfRadio v-model="dataForm.openAccountNumber"
@change="changeData('openAccountNumber', -1)" optionType="default"
direction="horizontal" size="small" :options="openAccountNumberOptions"
:props="openAccountNumberProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="签订时间" prop="openSignTimeB">
<JnpfRadio v-model="dataForm.openSignTimeB"
@change="changeData('openSignTimeB', -1)" optionType="default"
direction="horizontal" size="small" :options="openSignTimeBOptions"
:props="openSignTimeBProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<el-col :span="12">
<jnpf-form-tip-item label="签订地点" prop="openSignedAtB">
<JnpfRadio v-model="dataForm.openSignedAtB"
@change="changeData('openSignedAtB', -1)" optionType="default"
direction="horizontal" size="small" :options="openSignedAtBOptions"
:props="openSignedAtBProps">
</JnpfRadio>
</jnpf-form-tip-item>
</el-col>
<!-- 表单结束 -->
</template>
</el-form>
<SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
ref="selectDialog" @select="addForSelect" @close="selectDialogVisible = false" />
</el-col>
<!-- <el-col :span="12">
<el-col :span="24">
<div style="padding:15px 0px">
<span style="color: #409EFF;"></span>
<span style="font-size: 14px;font-weight: 500;color:rgb(102, 102, 102);">在线预览</span>
</div>
</el-col>
<el-col :span="24" style="background-color:lightgrey;padding: 15px;">
<el-row>
<el-col :span="24" style="background-color: white;border: solid 1px gray;">
cs
</el-col>
</el-row>
</el-col>
</el-col> -->
</el-row>
</div>
</transition>

Loading…
Cancel
Save