<template> <div class="evaluationRule" v-loading="loadingImport"> <div class="evaluationRuleBtn"> <div class="collectSeach"> <div class="exceed"> <span class="exceedSpan" style="width: 80px">业务属性:</span> <el-select v-model="moduleStr" placeholder="请选择业务属性"> <el-option v-for="item in moduleData" :key="item.id" :label="item.sectionName" :value="item.id"> </el-option> </el-select> </div> <el-button type="primary" style="margin-left: 10px;" @click="getSeachData">搜索</el-button> <el-button style="margin-left: 10px;" @click="resetSeach">重置</el-button> </div> <div class="PeriodBtn"> <btns :showImport="false" :showExport="false" :showAdd="$utils.havePurview('evalRules:oneLevel:add')" :showSave="$utils.havePurview('evalRules:oneLevel:save')" :showDelete="$utils.havePurview('evalRules:oneLevel:delete')" :disSave="changeDateSelect.length === 0 || changeDateSelect.length>1" :disDelete="changeDateSelect.length === 0" :disImport="true" :disExport="true" @handleAdd="handleAdd" @handleEdit="handleEdit" @handleDelete="handleDelete" @handleImport="handleImport" @handleExport="handleExport" ></btns> </div> <div class="evaluationRuleTableData"> <el-table :data="evaluationRuleData" style="width: 100%" @select="rowClick" @select-all="rowClick" @row-dblclick="editRuleDetail"> <el-table-column type="selection" label="操作" align="center"></el-table-column> <el-table-column label="规则名称" prop="ruleName" /> <el-table-column label="业务阶段" prop="binStageName" /> <el-table-column label="业务属性" prop="binSectionName" width="200"/> <el-table-column label="描述" width="500"> <template #default="scope"> <span>{{scope.row.des}}</span> </template> </el-table-column> <el-table-column label="创建人" prop="createName" width="120" /> <el-table-column label="创建时间" prop="createTime" width="200"/> <el-table-column label="操作" width="80"> <template #default="scope"> <p class="indicitem" @click="editRuleDetail(scope.row)">详情</p> </template> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.currentPage" :page-size="page.pagesize" layout="total, prev, pager, next, jumper" :total="page.total"> </el-pagination> </div> <div class="indexdialog"> <el-dialog :title="title" v-model="dialogVisible" width="600px" :close-on-click-modal="false"> <div class="periodFrom"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :validate-on-rule-change="false"> <el-form-item label="规则名称" prop="ruleName"> <el-input v-model="ruleForm.ruleName" placeholder="请输入规则名称"></el-input> </el-form-item> <el-form-item label="业务阶段" prop="binStage"> <el-select v-model="ruleForm.binStage" placeholder="请选择业务阶段" :disabled="isSave"> <el-option v-for="item in stageData" :key="item.id" :label="item.stageName" :value="item.id"> </el-option> </el-select> </el-form-item> <el-form-item label="业务属性" prop="binSection"> <el-select v-model="ruleForm.binSection" placeholder="请选择业务属性" :disabled="isSave"> <el-option v-for="item in moduleData" :key="item.id" :label="item.sectionName" :value="item.id"> </el-option> </el-select> </el-form-item> <el-form-item label="描述" prop="desc"> <el-input v-model="ruleForm.desc" :rows="5" type="textarea" placeholder="请输入描述"></el-input> </el-form-item> </el-form> </div> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="saveevaluationRuleMsg('ruleForm')">确 定</el-button> </span> </template> </el-dialog> </div> <rule-detail-page ref="ruleDetail"></rule-detail-page> </div> <import-dailog ref="importPage" @successImport="successImport" @importLoading="importLoading"></import-dailog> </div> </template> <script> import importDailog from '../importPage/importDailog.vue' import ruleDetailPage from './ruleDetailPage.vue' import btns from '../elbuttonS.vue' import {apiGetevaluateRuleList, apiGetevaluateRuleSaveList, apiGetevaluateRuledeleteList, apiGetbinsectionList, apiGetbinstageList} from '../../api/api' export default { components: { importDailog, ruleDetailPage, btns }, data() { return { dialogVisible: false, title: '', isSave: false, changeDateSelect: [], moduleData: [], stageData: [], moduleStr: '', evaluationRuleData:[], ruleForm: { ruleName: '', binSection: '', binStage: '', desc: '' }, rules: { ruleName: [ { required: true, message: '请输入规则名称', trigger: 'blur' } ], binSection: [ { required: true, message: '请输入业务属性', trigger: 'change' } ], binStage: [ { required: true, message: '请输入业务阶段', trigger: 'change' } ], desc: [ { required: true, message: '请输入描述', trigger: 'blur' } ] }, page:{ pagesize: 12, currentPage: 1, total: 0 }, evalradio: {}, loadingImport: false, } }, created() { this.getEvalRuleData() this.getDataDictionary() //模块//阶段 }, methods:{ // 查询指标数据 getEvalRuleData() { let that = this let params = { pageNum: that.page.currentPage, pageSize: that.page.pagesize, binSection: that.moduleStr } apiGetevaluateRuleList(params).then(datas =>{ if (datas && datas.data) { that.evaluationRuleData = datas.data.records that.page.total = datas.data.total } }) }, // 查询规则模块和阶段数据 getDataDictionary() { let that = this apiGetbinsectionList().then(datas =>{ if (datas && datas.data) { that.moduleData = datas.data } }) apiGetbinstageList().then(datas =>{ if (datas && datas.data) { that.stageData = datas.data } }) }, handleAdd() { this.dialogVisible = true this.isSave = false this.title = '新增考评规则' this.$nextTick(() =>{ // this.$refs['ruleForm'].resetFields() this.ruleForm = { ruleName: '', binSection: '', binStage: '', desc: '' } }) }, handleEdit() { this.dialogVisible = true this.isSave = true this.title = '修改考评规则' this.evalradio = this.changeDateSelect[0] this.ruleForm = { ruleName: this.evalradio.ruleName, binSection: this.evalradio.binSection, binStage: this.evalradio.binStage, desc: this.evalradio.des } }, saveevaluationRuleMsg(formName) { let that = this that.$refs[formName].validate((valid) => { if (valid) { that.saveAndEditRuleData() } }); }, //新增/修改指标数据 saveAndEditRuleData() { let that = this let userMes = JSON.parse(window.sessionStorage.getItem('user')) let params = { ruleName: that.ruleForm.ruleName, binSection: that.ruleForm.binSection, binStage: that.ruleForm.binStage, des: that.ruleForm.desc, createBy: userMes.id, createName: userMes.name } if (that.isSave) { params.id = that.evalradio.id } apiGetevaluateRuleSaveList(params).then(datas =>{ if (!datas.success) { that.$message({ message: datas.message, type: 'error' }); } else { if (!that.isSave) { that.$message({ message: '考评规则新增成功', type: 'success' }); } else { that.$message({ message: '考评规则修改成功', type: 'success' }); } that.dialogVisible = false that.changeDateSelect = [] that.getEvalRuleData() } }) }, //删除指标数据 handleDelete() { this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { let that = this let paramsArr = [] that.changeDateSelect.forEach(it =>{ paramsArr.push(it.id) }) apiGetevaluateRuledeleteList(paramsArr.join(',')).then(datas =>{ that.$message({ type: 'success', message: '删除成功!' }); that.changeDateSelect = [] that.getEvalRuleData() }) }) }, rowClick(selection, row) { this.changeDateSelect = selection }, getSeachData() { this.page.currentPage = 1 this.getEvalRuleData() }, resetSeach() { this.page.currentPage = 1 this.moduleStr = '' this.getEvalRuleData() }, successImport(val) { this.loadingImport = false this.getEvalRuleData() }, importLoading(val) { this.loadingImport = true }, handleSizeChange(val){ this.page.pagesize = val this.getEvalRuleData() }, handleCurrentChange(val){ this.page.currentPage =val this.getEvalRuleData() }, handleImport() { this.$refs.importPage.upload.title = "考评指标管理信息导入" this.$refs.importPage.upload.open = true }, //指标项配置 editRuleDetail(row) { this.$refs.ruleDetail.init(row) } } } </script> <style lang="less"> .evaluationRule{ .evaluationRuleBtn{ .collectSeach{ display: flex; padding: 24px 20px; border-bottom: 1px solid#D6DBEA; .exceed{ display: flex; .exceedSpan{ width: 100px; height: 12px; font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #8991B0; line-height: 12px; margin-top: 10px; } .el-select{ line-height: 40px !important; .el-input__inner, .is-disabled{ height:40px !important; } .el-input__suffix{ .el-select__caret{ line-height:40px; } } } } .el-select{ margin-right:10px; .el-input__inner{ height:30px; } .el-input__suffix{ .el-select__caret{ line-height:30px; } } } } span{ font-size:14px; } .PeriodBtn{ display: flex; justify-content: end; padding: 20px 0; } .el-button{ height: 30px; // width:100px; padding: 0 30px ; // padding-top: 8px; span{ margin:0; } } .indexdialog{ .el-overlay{ .el-dialog{ .el-dialog__body{ padding: 30px 60px 30px 20px !important; .periodFrom{ .el-select, .el-input{ width: 100%; } } } } } } } .evaluationRuleTableData{ .el-table{ .el-table__body-wrapper{ height: 60vh !important; } .el-input__inner{ height: 30px !important; } .el-radio__label{ display: none; } .indicitem{ color: #409EFF; font-size: 12px; margin-right: 20px; cursor:pointer; &:hover{ text-decoration: underline; } } } .el-pagination{ margin-top: 20px; text-align: end; position: relative; } } } </style>