|
|
@@ -1,183 +1,110 @@
|
|
|
<template>
|
|
|
- <div class="app-container">
|
|
|
- <el-form
|
|
|
- :inline="true"
|
|
|
- ref="form"
|
|
|
- :model="form"
|
|
|
- :rules="rules"
|
|
|
- label-width="auto"
|
|
|
- style="margin-top: 20px"
|
|
|
- disabled
|
|
|
- >
|
|
|
- <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-form-item
|
|
|
- label="合同模板名称:"
|
|
|
- prop="zfcName"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="form.zfcName"
|
|
|
- placeholder="请输入合同模板名称"
|
|
|
- /> </el-form-item
|
|
|
- ></el-col>
|
|
|
- <el-col :span="8"
|
|
|
- ><el-form-item
|
|
|
- label="合同类型:"
|
|
|
- prop="zfcType"
|
|
|
- >
|
|
|
- <el-select
|
|
|
- v-model="form.zfcType"
|
|
|
- placeholder="请选择合同类型"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="dict in typeOptions"
|
|
|
- :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="zfcManagementId"
|
|
|
- >
|
|
|
- <el-select
|
|
|
- style="width: 95%"
|
|
|
- v-model="form.zfcManagementId"
|
|
|
- placeholder="请选择资金方"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in companyList"
|
|
|
- :key="index"
|
|
|
- :label="item.scyName"
|
|
|
- :value="item.scyId"
|
|
|
- />
|
|
|
- </el-select> </el-form-item
|
|
|
- ></el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-form-item style="margin-left: 100px" >
|
|
|
- <el-table ref="tableContract" :data="nodeList" @selection-change="handleSelectionChange" style="width: 500px" >
|
|
|
- <el-table-column
|
|
|
- type="selection"
|
|
|
- width="50"
|
|
|
- align="center"/>
|
|
|
- <el-table-column label="签署节点" align="center" prop="zfcNode" :show-overflow-tooltip="true" >
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="盖章关键字" align="center" prop="zfcSignKeyword" :show-overflow-tooltip="true">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-input
|
|
|
- v-model="scope.row.zfcSignKeyword"
|
|
|
- size="small"
|
|
|
- maxlength="200"
|
|
|
- ></el-input>
|
|
|
- </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-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="16">
|
|
|
- <el-form-item
|
|
|
- label="合同描述:"
|
|
|
- prop="zfcDesc"
|
|
|
-
|
|
|
- >
|
|
|
- <el-input
|
|
|
- type="textarea"
|
|
|
- maxlength="100"
|
|
|
- style="width:250%"
|
|
|
- show-word-limit
|
|
|
- v-model="form.zfcDesc"
|
|
|
- placeholder="请输入合同描述"
|
|
|
- /> </el-form-item
|
|
|
- ></el-col>
|
|
|
- </el-row>
|
|
|
- <!-- 合同模板文件 -->
|
|
|
- <el-divider content-position="left">合同模板文件</el-divider>
|
|
|
- <el-form-item label="合同模板文件" style="margin-left: 100px">
|
|
|
- <el-upload
|
|
|
- ref="upload"
|
|
|
- class="upload-demo"
|
|
|
- action=""
|
|
|
- :http-request="httpRequest"
|
|
|
- :before-remove="beforeRemove"
|
|
|
- :on-preview="handleFileDownload"
|
|
|
- accept=".doc,.docx"
|
|
|
- multiple
|
|
|
- :limit="1"
|
|
|
- :on-exceed="handleExceed"
|
|
|
- :file-list="fileList"
|
|
|
- :auto-upload="false"
|
|
|
- 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
|
|
|
- > -->
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- </el-form>
|
|
|
+ <div class="app-container zap-main">
|
|
|
+ <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-detail__title">基础信息</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <div class="zap-contract-detail">
|
|
|
+ <div class="zap-contract-detial__inner">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="3">
|
|
|
+ <div class="zap-contract-detail__label">合同模板名称</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <div class="zap-contract-detail__value">{{form.zfcName}}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3">
|
|
|
+ <div class="zap-contract-detail__label">合同类型</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <div class="zap-contract-detail__value">{{dictValue2Lable(form.zfcType, typeOptions, 'dictLabel', 'dictValue')}}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="3">
|
|
|
+ <div class="zap-contract-detail__label">资金方</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <div class="zap-contract-detail__value">{{dictValue2Lable(form.zfcManagementId, companyList, 'scyName', 'scyId')}}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3">
|
|
|
+ <div class="zap-contract-detail__label"></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <div class="zap-contract-detail__value"></div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row v-for="item in nodeList" :key="item.zfcNode">
|
|
|
+ <el-col :span="3">
|
|
|
+ <div class="zap-contract-detail__label">签署节点</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <div class="zap-contract-detail__value">{{item.zfcNode}}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3">
|
|
|
+ <div class="zap-contract-detail__label">盖章关键字</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <div class="zap-contract-detail__value">{{item.zfcSignKeyword}}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- 合同模板描述 -->
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="3">
|
|
|
+ <div class="zap-contract-detail__label zap-contract-detail--desc">合同描述</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="21">
|
|
|
+ <div class="zap-contract-detail__value zap-contract-detail--desc">{{form.zfcDesc}}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- 合同模板文件 -->
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="3">
|
|
|
+ <div class="zap-contract-detail__label zap-contract-detail--template">合同模板文件</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="21">
|
|
|
+ <div class="zap-contract-detail__value zap-contract-detail--template">
|
|
|
+ <el-upload
|
|
|
+ ref="upload"
|
|
|
+ class="upload-demo"
|
|
|
+ action=""
|
|
|
+ :http-request="httpRequest"
|
|
|
+ :before-remove="beforeRemove"
|
|
|
+ :on-preview="handleFileDownload"
|
|
|
+ accept=".doc,.docx"
|
|
|
+ multiple
|
|
|
+ :limit="1"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :file-list="fileList"
|
|
|
+ :auto-upload="false"
|
|
|
+ style="width:800px"
|
|
|
+ >
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
<!-- 保存 -->
|
|
|
- <div style="margin-top: 100px; margin-left:45%">
|
|
|
- <el-button type="info" @click="cancel">取消</el-button>
|
|
|
- <!-- <el-button type="success" @click="submitForm"
|
|
|
- >提交</el-button> -->
|
|
|
+ <div class="zap-buttons">
|
|
|
+ <el-button type="primary" plain @click="cancel">取消</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -448,6 +375,16 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ dictValue2Lable (value, dict, dictKey, dictValue) {
|
|
|
+ let label = ''
|
|
|
+ for (let item of dict) {
|
|
|
+ if (item[dictValue] === value) {
|
|
|
+ label = item[dictKey]
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return label
|
|
|
+ }
|
|
|
// submitData() {
|
|
|
// this.open = false;
|
|
|
// },
|
|
|
@@ -461,3 +398,60 @@ export default {
|
|
|
}
|
|
|
|
|
|
</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-detail__title{
|
|
|
+ padding: 25px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.zap-contract-detail{
|
|
|
+ padding: 0 25px 20px;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.zap-contract-detial__inner{
|
|
|
+ border: 3px solid #eaeaea;
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+.zap-contract-detail__label,
|
|
|
+.zap-contract-detail__value{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 48px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ border-bottom: 3px solid #eaeaea;
|
|
|
+}
|
|
|
+.zap-contract-detail__label{
|
|
|
+ background-color: #f1f4f9;
|
|
|
+
|
|
|
+}
|
|
|
+.zap-contract-detail__value{
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.zap-contract-detail--desc{
|
|
|
+ height: 90px;
|
|
|
+}
|
|
|
+.zap-contract-detail--template{
|
|
|
+ height: 165px;
|
|
|
+}
|
|
|
+.zap-buttons{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 38px;
|
|
|
+}
|
|
|
+</style>
|
guolufei123