|
|
@@ -1,21 +1,36 @@
|
|
|
<template>
|
|
|
- <div class="app-container">
|
|
|
+ <div class="app-container zap-main zap-contract-add">
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <div class="zap-contract-No">
|
|
|
+ <span>合同模板编号</span>
|
|
|
+ <span>TMPL202101</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- 基础信息 -->
|
|
|
+ <el-row class="zap-margin-top">
|
|
|
+ <el-col>
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <div class="zap-contract-add__title">基本信息</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
<el-form
|
|
|
+ class="zap-contract-add__form"
|
|
|
:inline="true"
|
|
|
ref="form"
|
|
|
:model="form"
|
|
|
:rules="rules"
|
|
|
label-width="auto"
|
|
|
- style="margin-top: 20px"
|
|
|
>
|
|
|
- <el-divider content-position="left">基本信息</el-divider>
|
|
|
- <!-- <el-form-item label="融资产品编号" prop="zfpNumber">
|
|
|
- <el-input v-model="form.zfpNumber" placeholder="请输入融资产品编号" />
|
|
|
- </el-form-item> -->
|
|
|
<el-row>
|
|
|
- <el-col :span="8">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
|
|
|
<el-form-item
|
|
|
- label="合同模板名称:"
|
|
|
+ label-width="135px"
|
|
|
+ label="合同模板名称"
|
|
|
prop="zfcName"
|
|
|
>
|
|
|
<el-input
|
|
|
@@ -25,9 +40,10 @@
|
|
|
maxlength="20"
|
|
|
/> </el-form-item
|
|
|
></el-col>
|
|
|
- <el-col :span="8"
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8"
|
|
|
><el-form-item
|
|
|
- label="合同类型:"
|
|
|
+ label-width="135px"
|
|
|
+ label="合同类型"
|
|
|
prop="zfcType"
|
|
|
>
|
|
|
<el-select
|
|
|
@@ -44,13 +60,13 @@
|
|
|
/>
|
|
|
</el-select> </el-form-item
|
|
|
></el-col>
|
|
|
- <el-col :span="8">
|
|
|
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
|
|
|
<el-form-item
|
|
|
- label="资金方:"
|
|
|
+ label-width="135px"
|
|
|
+ label="资金方"
|
|
|
prop="zfcManagementId"
|
|
|
>
|
|
|
<el-select
|
|
|
- style="width: 95%"
|
|
|
v-model="form.zfcManagementId"
|
|
|
filterable
|
|
|
placeholder="请选择资金方"
|
|
|
@@ -67,7 +83,7 @@
|
|
|
></el-col>
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
- <el-form-item style="margin-left: 100px" >
|
|
|
+ <el-form-item style="margin-left: 135px" >
|
|
|
<el-table :data="nodeList" @selection-change="handleSelectionChange" style="width: 500px" >
|
|
|
<el-table-column
|
|
|
type="selection"
|
|
|
@@ -85,50 +101,12 @@
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
- </el-form-item
|
|
|
- >
|
|
|
- <!-- <el-col :span="8">
|
|
|
- <el-form-item
|
|
|
- label="签署主体:"
|
|
|
- prop="zfcSubject"
|
|
|
- >
|
|
|
- <el-select
|
|
|
- v-model="form.zfcSubject"
|
|
|
- placeholder="请选择签署主体"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="dict in subjectOptions"
|
|
|
- :key="dict.dictValue"
|
|
|
- :label="dict.dictLabel"
|
|
|
- :value="dict.dictValue"
|
|
|
- />
|
|
|
- </el-select> </el-form-item
|
|
|
- ></el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item
|
|
|
- label="签署节点:"
|
|
|
- prop="zfcNode"
|
|
|
- >
|
|
|
- <el-select
|
|
|
- v-model="form.zfcNode"
|
|
|
- placeholder="请选择签署节点"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="dict in nodeOptions"
|
|
|
- :key="dict.dictValue"
|
|
|
- :label="dict.dictLabel"
|
|
|
- :value="dict.dictValue"
|
|
|
- />
|
|
|
- </el-select> </el-form-item
|
|
|
- ></el-col> -->
|
|
|
+ </el-form-item>
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
- <el-col :span="16">
|
|
|
+ <el-col class="zap-contract-add__formcontent">
|
|
|
<el-form-item
|
|
|
+ label-width="135px"
|
|
|
label="合同描述:"
|
|
|
prop="zfcDesc"
|
|
|
|
|
|
@@ -136,7 +114,6 @@
|
|
|
<el-input
|
|
|
type="textarea"
|
|
|
maxlength="100"
|
|
|
- style="width:250%"
|
|
|
show-word-limit
|
|
|
v-model="form.zfcDesc"
|
|
|
placeholder="请输入合同描述"
|
|
|
@@ -144,8 +121,7 @@
|
|
|
></el-col>
|
|
|
</el-row>
|
|
|
<!-- 合同模板文件 -->
|
|
|
- <el-divider content-position="left">合同模板文件</el-divider>
|
|
|
- <el-form-item label="合同模板文件" style="margin-left: 100px">
|
|
|
+ <el-form-item label-width="135px" label="合同模板文件">
|
|
|
<el-upload
|
|
|
ref="upload"
|
|
|
class="upload-demo"
|
|
|
@@ -159,26 +135,38 @@
|
|
|
:before-upload="beforeUpload"
|
|
|
:file-list="fileList"
|
|
|
:auto-upload="true"
|
|
|
- style="width:800px"
|
|
|
>
|
|
|
- <el-button slot="trigger" size="small" type="primary"
|
|
|
- >点击选择</el-button
|
|
|
- >
|
|
|
- <!-- <el-button
|
|
|
- style="margin-left: 10px"
|
|
|
- size="small"
|
|
|
- type="success"
|
|
|
- @click="submitUpload"
|
|
|
- >上传到服务器</el-button
|
|
|
- >-->
|
|
|
+ <!-- 触发文件选择框的内容 -->
|
|
|
+ <div slot="trigger" class="zap-contract-add__upload">
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="zap-upload__text">上传文件</div>
|
|
|
+ </div>
|
|
|
+ <div slot="tip" class="zap-contract-add__tip">
|
|
|
+ 支持格式：.doc .docx .pdf</br>
|
|
|
+ 单个文件不能超过20MB
|
|
|
+ </div>
|
|
|
+ <!-- 设置缩略图模板 -->
|
|
|
+ <div slot="file" slot-scope="{file}" class="zap-contract-add__thumbnail">
|
|
|
+ <img
|
|
|
+ class="zap-contract-add__fileimg"
|
|
|
+ src="../../../assets/images/file_img.png" alt=""
|
|
|
+ >
|
|
|
+ <span class="zap-contractadd__filename">{{file.name}}</span>
|
|
|
+ <span
|
|
|
+ class="zap-contract-add__delete"
|
|
|
+ @click="handleRemove(file)"
|
|
|
+ >
|
|
|
+ <i class="el-icon-error"></i>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</el-upload>
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
|
<!-- 保存 -->
|
|
|
- <div class="footer" style="margin-top: 260px; float: right">
|
|
|
- <el-button type="info" @click="cancel">取消</el-button>
|
|
|
- <el-button type="success" @click="submitForm">提交</el-button>
|
|
|
+ <div class="zap-contract-add__buttons">
|
|
|
+ <el-button type="primary" plain @click="cancel">取消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm">提交</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -418,6 +406,12 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ handleRemove(file) {
|
|
|
+ this.fileList = []
|
|
|
+ },
|
|
|
+ handleDownload(file) {
|
|
|
+
|
|
|
+ }
|
|
|
// submitData() {
|
|
|
// this.open = false;
|
|
|
// },
|
|
|
@@ -430,3 +424,125 @@ export default {
|
|
|
display: none;
|
|
|
}
|
|
|
</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.zap-contract-No{
|
|
|
+ padding: 25px;
|
|
|
+ font-size: 14px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ span:nth-child(1){
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ span:nth-child(2){
|
|
|
+ margin-left: 30px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+}
|
|
|
+.zap-contract-add__title{
|
|
|
+ padding: 25px;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.zap-contract-add__form{
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+::v-deep .el-input--medium .el-input__inner,
|
|
|
+::v-deep .el-input--small .el-input__inner{
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+}
|
|
|
+::v-deep .el-form-item--medium .el-form-item__label{
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+}
|
|
|
+.zap-contract-add__formcontent {
|
|
|
+ ::v-deep .el-form-item--medium .el-form-item__content{
|
|
|
+ width: calc(100% - 170px);
|
|
|
+ }
|
|
|
+ ::v-deep .el-form-item--medium.el-form-item{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ ::v-deep .el-textarea__inner{
|
|
|
+ width: 100%;
|
|
|
+ height: 106px;
|
|
|
+ background-image: linear-gradient(
|
|
|
+ #f4f5f6,
|
|
|
+ #f4f5f6),
|
|
|
+ linear-gradient(
|
|
|
+ #71befe,
|
|
|
+ #71befe);
|
|
|
+ background-blend-mode: normal,
|
|
|
+ normal;
|
|
|
+ border: solid 1px #ebebeb;
|
|
|
+ }
|
|
|
+ ::v-deep .el-textarea .el-input__count{
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+}
|
|
|
+.zap-contract-add__upload{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 140px;
|
|
|
+ height: 140px;
|
|
|
+ border: dashed 1px #e0e0e0;
|
|
|
+ background-color: #f4f5f6;
|
|
|
+}
|
|
|
+.el-icon-upload{
|
|
|
+ font-size: 32px;
|
|
|
+ color: #02c464;
|
|
|
+}
|
|
|
+.zap-upload__text{
|
|
|
+ line-height: 1;
|
|
|
+ margin-top: 12px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #333333;
|
|
|
+}
|
|
|
+.zap-contract-add__tip{
|
|
|
+ width: 140px;
|
|
|
+ margin-top: 15px;
|
|
|
+ line-height: 19px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+// 设置缩略图模版。
|
|
|
+::v-deep .el-upload-list,
|
|
|
+.zap-contract-add__thumbnail{
|
|
|
+ position: relative;
|
|
|
+ width: 110px;
|
|
|
+ height: 110px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.zap-contract-add__thumbnail{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.zap-contract-add__fileimg{
|
|
|
+ width: 56px;
|
|
|
+}
|
|
|
+.zap-contractadd__filename{
|
|
|
+ margin-top: 12px;
|
|
|
+ line-height: 19px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ overflow: hidden; // 超出的文本隐藏
|
|
|
+ text-overflow: ellipsis; // 溢出用省略号显示
|
|
|
+ display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
|
|
|
+ -webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
|
|
|
+ -webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
|
|
|
+}
|
|
|
+.zap-contract-add__delete{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 10px;
|
|
|
+}
|
|
|
+.el-icon-error{
|
|
|
+ font-size: 26px;
|
|
|
+ color: #f41d27;
|
|
|
+}
|
|
|
+.zap-contract-add__buttons{
|
|
|
+ padding: 30px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
guolufei123
