| | |
| | | <div class="app-container"> |
| | | |
| | | <el-row> |
| | | <el-col :span="8" v-for="(item) in contractList" :key="item" style="margin: 10px;width: 30%;"> |
| | | <el-col :span="8" v-for="(item, index) in contractList" :key="index" style="margin: 10px;width: 30%;"> |
| | | <el-card :body-style="{ padding: '0px' }"> |
| | | <el-image style="width: 420px;height: 187px;" |
| | | :preview-src-list="['https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357']" |
| | |
| | | <!-- 合同详情 --> |
| | | <el-dialog :title="detailName" :visible.sync="detail" width="800px" append-to-body> |
| | | <el-form label-position="left" inline class="table-expand"> |
| | | <el-collapse v-model="activeNames" @change="handleChange"> |
| | | <el-collapse v-model="activeNames"> |
| | | <el-collapse-item v-for="(item, index) in ruleData" :key="index" :title="item.ruleName" :name="index"> |
| | | <div class="inline-input-container" v-for="(item, index) in item.children" :key="index"> |
| | | <b>{{ item.ruleDesc }}</b> <br v-if="item.ruleDesc"/> |
| | |
| | | </el-dialog> |
| | | |
| | | <!-- 合同导入对话框 --> |
| | | <el-dialog :title="upload.title" :visible.sync="upload.open" width="550px" append-to-body> |
| | | <el-dialog :title="upload.title" :visible.sync="upload.open" width="1000px" append-to-body> |
| | | <el-form ref="form" :model="upload" :rules="rules" label-width="80px"> |
| | | <el-form-item label="合同名称" prop="name"> |
| | | <el-input v-model="upload.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="公司名称" prop="unitId"> |
| | | <el-select v-model="upload.unitId" placeholder="请选择"> |
| | | <el-option v-for="item in unitList" :key="item.id" :label="item.value" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="合同时间" prop="timezone"> |
| | | <el-date-picker :disabled="title === '修改合同时间'" @change="dateChange" v-model="upload.timezone" |
| | | value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" align="right" unlink-panels range-separator="至" |
| | | start-placeholder="开始时间" end-placeholder="结束时间"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" |
| | | :action="upload.url + '?unitId=' + upload.unitId + '&startTime=' + upload.startTime + '&endTime=' + upload.endTime + '&name=' + upload.name" |
| | | :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" |
| | | :auto-upload="false" drag style="text-align: center;"> |
| | | <i class="el-icon-upload"></i> |
| | | <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> |
| | | <div class="el-upload__tip text-center" slot="tip"> |
| | | <span>仅允许导入xls、xlsx格式文件。</span> |
| | | <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" |
| | | @click="importTemplate">下载模板</el-link> |
| | | <el-divider content-position="left">合同信息</el-divider> |
| | | <div class="row-warp"> |
| | | <div class="row"> |
| | | <div class="row-left"> |
| | | <div class="block"> |
| | | <el-form-item label="合同名称" prop="name"> |
| | | <el-input v-model="upload.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="公司名称" prop="unitId"> |
| | | <el-select v-model="upload.unitId" placeholder="请选择"> |
| | | <el-option v-for="item in unitList" :key="item.id" :label="item.value" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="合同时间" prop="timezone"> |
| | | <el-date-picker :disabled="title === '修改合同时间'" @change="dateChange" v-model="upload.timezone" |
| | | value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" align="right" unlink-panels range-separator="至" |
| | | start-placeholder="开始时间" end-placeholder="结束时间"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </div> |
| | | </div> |
| | | <div class="row-right" style="margin-left: 80px;"> |
| | | <div class="margin-5"> |
| | | <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" |
| | | :action="upload.url + '?unitId=' + upload.unitId + '&startTime=' + upload.startTime + '&endTime=' + upload.endTime + '&name=' + upload.name" |
| | | :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" |
| | | :file-list="upload.fileList" |
| | | :auto-upload="false" drag style="text-align: center;"> |
| | | <i class="el-icon-upload"></i> |
| | | <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> |
| | | <div class="el-upload__tip text-center" slot="tip"> |
| | | <span>仅允许导入xls、xlsx格式文件。</span> |
| | | <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" |
| | | @click="importTemplate">下载模板</el-link> |
| | | </div> |
| | | </el-upload> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-upload> |
| | | <el-divider content-position="left">考核结果应用规则</el-divider> |
| | | <div class="row-warp"> |
| | | <div class="row" v-for="(item, index) in upload.ruleList" :key="index"> |
| | | <div class="row-left" style="flex: 0.7;"> |
| | | <div class="block"> |
| | | <el-form-item label="考核条件" prop="ruleList"> |
| | | <el-input v-model="item.scoreCondition" style="width: 250px;" /> |
| | | </el-form-item> |
| | | </div> |
| | | </div> |
| | | <div class="row-right"> |
| | | <div class="margin-5"> |
| | | <el-form-item label="规则描述" prop="ruleList"> |
| | | <el-input type="textarea" v-model="item.description" style="width: 300px;" /> |
| | | <el-button style="margin-left: 50px;" type="danger" icon="el-icon-delete" circle @click="deleteRule(index)"></el-button> |
| | | </el-form-item> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-button style="margin-left: 50px;" type="success" icon="el-icon-plus" circle @click="addRule"></el-button> |
| | | </el-form> |
| | | |
| | | <div slot="footer" class="dialog-footer"> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { listContract, getContract, updateContract } from "@/api/platform/contract"; |
| | | import { listContract, getContract, updateContract, addContract } from "@/api/platform/contract"; |
| | | import { getRuleListByContractId } from "../../../api/platform/calculate-rule"; |
| | | import { unitSelect } from "../../../api/platform/unit"; |
| | | import { deptSelect } from "../../../api/system/dept"; |
| | |
| | | headers: { Authorization: "Bearer " + getToken() }, |
| | | // 上传的地址 |
| | | url: process.env.VUE_APP_BASE_API + "/system/contract/importData", |
| | | ruleList: [], |
| | | fileList: [], |
| | | unitId: '', |
| | | startTime: '', |
| | | endTime: '' |
| | |
| | | ], |
| | | timezone: [ |
| | | { type: "array", required: true, message: "合同时间不能为空", trigger: "change" } |
| | | ], |
| | | ruleList: [ |
| | | { type: "array", required: true, message: "考核结果应用规则不能为空", trigger: "submit" } |
| | | ] |
| | | } |
| | | }; |
| | |
| | | this.selectDept(); |
| | | }, |
| | | methods: { |
| | | addRule() { |
| | | this.upload.ruleList.push({ |
| | | scoreCondition: '', |
| | | description: '' |
| | | }); |
| | | }, |
| | | deleteRule(index) { |
| | | this.upload.ruleList.splice(index, 1); |
| | | }, |
| | | submitForm() { |
| | | updateContract(this.form).then(response => { |
| | | this.detail = false; |
| | |
| | | let that = this; |
| | | this.$refs["form"].validate(valid => { |
| | | if (valid) { |
| | | that.$refs.upload.submit(); |
| | | addContract(this.upload).then (response => { |
| | | if (response.code != 200) { |
| | | this.$message.error("操作失败"); |
| | | } else { |
| | | this.$message.success("操作成功"); |
| | | } |
| | | }); |
| | | // that.$refs.upload.submit(); |
| | | } |
| | | }) |
| | | }, |
| | |
| | | margin-top: 10px; |
| | | } |
| | | </style> |
| | | <style scoped> |
| | | .margin-5 { |
| | | margin-left: 5px; |
| | | } |
| | | .row-warp { |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | .row { |
| | | display: flex; |
| | | flex-direction: row; |
| | | align-items: center; |
| | | justify-content: center; |
| | | margin: 5px 0; |
| | | } |
| | | .row-left { |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: row; |
| | | } |
| | | .row-right { |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: row; |
| | | } |
| | | </style> |
| | | <style> |
| | | .el-cascader-node { |
| | | max-width: 300px; |
| | | } |
| | | .el-divider--horizontal { |
| | | margin-top: 50px; |
| | | margin-bottom: 50px; |
| | | } |
| | | </style> |