| | |
| | | <template> |
| | | <div class="app-container"> |
| | | |
| | | <el-row> |
| | | <el-col :span="8" v-for="(item) in contractList" :key="item" style="margin: 10px;width: 30%;"> |
| | | <el-row v-loading="loading"> |
| | | <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']" |
| | | fit="cover" src="https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357" |
| | | <ImagePreview style="width: 100%;height: 187px;" |
| | | fit="cover" :src="item.attachment" |
| | | class="image" /> |
| | | <div style="padding: 14px;"> |
| | | <span>{{ item.name }}</span> |
| | |
| | | <!-- 合同详情 --> |
| | | <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-tooltip class="item" v-for="(item, index) in item.children" :key="index" effect="dark" :content="item.deductCategory + ' ' + item.calcFraction + (item.calcUnit ? '/' + item.calcUnit : '')" placement="top"> |
| | | <el-tooltip class="item" v-for="(item, index) in item.children" :key="index" effect="dark" :content="item.deductCategory == '分数乘以数量' ? '扣' + item.calcFraction + '乘以数量 ' : item.deductCategory == '除以数量后乘以分数' ? '扣' + item.calcFraction + '分/' + item.calcUnit + '小时' : item.deductCategory + ' ' + item.calcFraction" placement="top"> |
| | | <span>{{ item.ruleCondition }}<br/></span> |
| | | <!-- {{ item.deductCategory }} {{ item.calcFraction }}{{ item.calcUnit ? "/" + item.calcUnit : '' }} --> |
| | | </el-tooltip> |
| | | </div> |
| | | </el-collapse-item> |
| | | <el-collapse-item title="考核结果应用规则" :name="ruleData.length"> |
| | | <div class="inline-input-container"> |
| | | <span v-for="(item, index) in moneyRules" :key="index"> |
| | | <div> |
| | | <span>{{ item.scoreCondition }}</span> |
| | | <el-tooltip class="item" effect="dark" :content="item.description" placement="top"> |
| | | <span style="margin-left: 20px;">{{ item.description }}</span> |
| | | </el-tooltip> |
| | | </div> |
| | | </span> |
| | | </div> |
| | | </el-collapse-item> |
| | | <el-form-item label="合同附件" prop="attachment" class="top"> |
| | |
| | | </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" |
| | | :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" |
| | | :data="upload" |
| | | :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"> |
| | |
| | | <script> |
| | | import { listContract, getContract, updateContract } from "@/api/platform/contract"; |
| | | import { getRuleListByContractId } from "../../../api/platform/calculate-rule"; |
| | | import { getMoneyRulesByContractId } from "../../../api/platform/calculate-money-rule"; |
| | | import { unitSelect } from "../../../api/platform/unit"; |
| | | import { deptSelect } from "../../../api/system/dept"; |
| | | import { getToken } from "@/utils/auth"; |
| | | import { ImagePreview } from "@/components/ImagePreview"; |
| | | |
| | | export default { |
| | | name: "Contract", |
| | | comments: { ImagePreview }, |
| | | data() { |
| | | return { |
| | | loading: false, |
| | | contractInfo: {}, |
| | | // 合同导入参数 |
| | | upload: { |
| | |
| | | headers: { Authorization: "Bearer " + getToken() }, |
| | | // 上传的地址 |
| | | url: process.env.VUE_APP_BASE_API + "/system/contract/importData", |
| | | ruleList: [], |
| | | unitId: '', |
| | | startTime: '', |
| | | endTime: '' |
| | |
| | | // 是否显示详情 |
| | | detail: false, |
| | | ruleData: [], |
| | | moneyRules: [], |
| | | // 表单参数 |
| | | form: { |
| | | }, |
| | |
| | | ], |
| | | 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(); |
| | | that.upload.ruleList = JSON.stringify(this.upload.ruleList); |
| | | that.loading = true; |
| | | that.upload.open = false; |
| | | that.$refs.upload.submit().then(() => { |
| | | that.loading = false; |
| | | that.reset(); |
| | | }); |
| | | } |
| | | }) |
| | | }, |
| | |
| | | this.form.id = item.id; |
| | | this.contractInfo = item; |
| | | }); |
| | | getMoneyRulesByContractId(item.id).then(response => { |
| | | this.moneyRules = response.data; |
| | | }); |
| | | }, |
| | | /** 新增按钮操作 */ |
| | | handleAdd() { |
| | |
| | | /** 下载按钮操作 */ |
| | | handleDownload (data) { |
| | | this.$download.resource(data); |
| | | }, |
| | | reset () { |
| | | this.upload = { |
| | | open: false, |
| | | name: undefined, |
| | | unitId: undefined, |
| | | timezone: undefined, |
| | | ruleList: [] |
| | | }; |
| | | this.resetForm("form"); |
| | | } |
| | | } |
| | | }; |
| | |
| | | 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> |