New file |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="slot"> |
| | | <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="75px"> |
| | | <el-form-item label="项目码类型" prop="projectCodeType"> |
| | | <el-select v-model="queryParams.projectCodeType" placeholder="项目码类型" @change="handleQuery"> |
| | | <el-option |
| | | v-for="dict in dict.type.coding_type" |
| | | :key="dict.value" |
| | | :value="dict.value" |
| | | :label="dict.label" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | |
| | | </el-form-item> |
| | | <el-form-item label="区间类型" prop="intervalType"> |
| | | <el-select v-model="queryParams.intervalType" placeholder="区间类型" @change="handleQuery"> |
| | | <el-option |
| | | v-for="dict in dict.type.interval_type" |
| | | :key="dict.value" |
| | | :value="dict.value" |
| | | :label="dict.label" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
| | | <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div class="right-section"> |
| | | <div class="add-btn"> |
| | | <el-tooltip content="新增" effect="dark" placement="top"> |
| | | <el-button :disabled="!isReserve" circle icon="el-icon-plus" @click="add()" size="small"/> |
| | | </el-tooltip> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <el-table |
| | | :data="tableData" |
| | | row-key="id" |
| | | border |
| | | @selection-change="handleSelectionChange"> |
| | | <el-table-column |
| | | type="selection" |
| | | width="55"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | |
| | | prop="projectCodeType" |
| | | label="项目码类型" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <dict-tag :options="dict.type.coding_type" :value="scope.row.projectCodeType"/> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="intervalType" |
| | | label="区间类型" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <dict-tag :options="dict.type.interval_type" :value="scope.row.intervalType"/> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="leftSymbol" |
| | | label="左符号" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <dict-tag :options="dict.type.sys_coding_operator" :value="scope.row.leftSymbol"/> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="leftValue" |
| | | label="左值" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="rightSymbol" |
| | | label="右符号" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <dict-tag :options="dict.type.sys_coding_operator" :value="scope.row.rightSymbol"/> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="rightValue" |
| | | label="右值" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="status" |
| | | label="状态" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-tag :type="scope.row.status === 0 ? 'info' : 'success'"> |
| | | {{scope.row.status === 0 ? "未启用" : "启用"}} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="操作" min-width="100"> |
| | | <template slot-scope="scope"> |
| | | <el-button v-if="editShow" size="medium" type="text" icon="el-icon-open" @click="changeStatus(scope.row)"> |
| | | {{scope.row.status === 0 ? "启动" : "关闭"}} |
| | | </el-button> |
| | | |
| | | <el-button v-if="editShow" size="medium" type="text" icon="el-icon-edit" @click="editCodingRuler(scope.row)" |
| | | :disabled="scope.row.status === 1" |
| | | >编辑</el-button> |
| | | |
| | | <el-button v-if="delShow" size="medium" |
| | | type="text" |
| | | icon="el-icon-delete" @click="deleteCodingRuler(scope.row)" |
| | | :disabled="scope.row.status === 1" |
| | | >删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | |
| | | <pagination |
| | | v-show="total>0" |
| | | :total="total" |
| | | :page.sync="queryParams.currentPage" |
| | | :limit.sync="queryParams.pageSize" |
| | | @pagination="getList" |
| | | /> |
| | | |
| | | <el-dialog width="45%" :title="dialogTitle" @close="closeDialog" :visible.sync="open" :show-close="true" :close-on-click-modal="true" :destroy-on-close="true"> |
| | | <el-form :model="codingRulerForm" :rules="rules" ref="codingRulerForm"> |
| | | <el-form-item label="项目码类型" :label-width="formLabelWidth" prop="projectCodeType"> |
| | | <el-select v-model="codingRulerForm.projectCodeType" placeholder="项目码类型" @change="changeOption($event)"> |
| | | <el-option |
| | | v-for="dict in dict.type.coding_type" |
| | | :key="dict.value" |
| | | :value="dict.value" |
| | | :label="dict.label" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="区间类型" :label-width="formLabelWidth" prop="intervalType"> |
| | | <el-select v-model="codingRulerForm.intervalType" placeholder="区间类型" @change="changeOption($event)"> |
| | | <el-option |
| | | v-for="dict in dict.type.interval_type" |
| | | :key="dict.value" |
| | | :value="dict.value" |
| | | :label="dict.label" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="左符号" :label-width="formLabelWidth" prop="leftSymbol" > |
| | | <el-select v-model="codingRulerForm.leftSymbol" placeholder="选择符号" @change="changeOption($event)"> |
| | | <el-option |
| | | v-for="dict in leftOption" |
| | | :key="dict.value" |
| | | :value="dict.value" |
| | | :label="dict.label.replace('大于', '>') |
| | | .replace('小于', '<') |
| | | .replace('大等于', '>=') |
| | | .replace('等于', '=') |
| | | .replace('小于等于', '<=')" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="左值" :label-width="formLabelWidth" prop="leftValue"> |
| | | <el-input v-model="codingRulerForm.leftValue" autocomplete="off" type="number" :min="0"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <el-form :model="singleForm" :rules="rules2" ref="singleForm" v-show="isSingleInterval"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="右符号" :label-width="formLabelWidth" prop="rightSymbol" > |
| | | <el-select v-model="singleForm.rightSymbol" placeholder="选择符号" @change="changeOption($event)"> |
| | | <el-option |
| | | v-for="dict in rightOption" |
| | | :key="dict.value" |
| | | :value="dict.value" |
| | | :label="dict.label.replace('大于', '>') |
| | | .replace('小于', '<') |
| | | .replace('大等于', '>=') |
| | | .replace('等于', '=') |
| | | .replace('小于等于', '<=')" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="右值" :label-width="formLabelWidth" prop="rightValue"> |
| | | <el-input v-model="singleForm.rightValue" autocomplete="off" type="number" :min="0"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | </el-form> |
| | | |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button @click="closeDialog">取 消</el-button> |
| | | <el-button type="primary" @click="addOrEditCodingRuler">确 定</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | addCodingRuler, |
| | | changeCodingRulerStatus, |
| | | deleteCodingRulerById, |
| | | editCodingRuler, |
| | | getCodingRulers |
| | | } from '@/api/codingRuler/codingRuler.js' |
| | | |
| | | export default { |
| | | dicts: ['sys_coding_operator','coding_type','interval_type'], |
| | | name: "CodingRulerDialog", |
| | | data() { |
| | | return { |
| | | rules2:{ |
| | | rightSymbol:[{ required: true, message: '请输入右符号', trigger: 'blur' }], |
| | | rightValue:[{ required: true, message: '请输入右值', trigger: 'blur' }], |
| | | }, |
| | | rules:{ |
| | | projectCodeType: [{ required: true, message: '请输入项目码类型', trigger: 'blur' }], |
| | | intervalType: [{ required: true, message: '请输入区间类型', trigger: 'blur' }], |
| | | leftSymbol: [{ required: true, message: '请输入左符号', trigger: 'blur' }], |
| | | leftValue: [{ required: true, message: '请输入左值', trigger: 'blur' }], |
| | | }, |
| | | // 是否为单区间 |
| | | isSingleInterval:false, |
| | | // 弹出框标题 |
| | | dialogTitle:"", |
| | | //是否新增条件 |
| | | isReserve: true, |
| | | // 能否修改条件 |
| | | editShow:true, |
| | | // 能否删除条件 |
| | | delShow:true, |
| | | // 总条数 |
| | | total:0, |
| | | // 表格内容 |
| | | tableData:[], |
| | | // 是否开启搜索条件 |
| | | showSearch:true, |
| | | queryParams:{ |
| | | intervalType:'', |
| | | currentPage: 1, |
| | | pageSize: 10, |
| | | projectCodeType:'', |
| | | }, |
| | | formLabelWidth: '120px', |
| | | // 表单参数 |
| | | codingRulerForm:{ |
| | | projectCodeType:'', |
| | | intervalType:'', |
| | | leftSymbol:'', |
| | | leftValue:'', |
| | | |
| | | }, |
| | | singleForm:{ |
| | | rightSymbol:'', |
| | | rightValue:'', |
| | | }, |
| | | // 是否显示弹出层 |
| | | open: false, |
| | | // 选中数组 |
| | | ids: [], |
| | | // //左符号 |
| | | // leftOption:[], |
| | | // //右符号 |
| | | // rightOption:[], |
| | | } |
| | | }, |
| | | computed:{ |
| | | leftOption(){ |
| | | if (this.codingRulerForm.intervalType === null || this.codingRulerForm.intervalType === ''){ |
| | | return this.dict.type.sys_coding_operator |
| | | }else { |
| | | if (this.codingRulerForm.intervalType === 'interval'){ |
| | | return this.dict.type.sys_coding_operator.filter(item => item.value <= 2); |
| | | }else { |
| | | return this.dict.type.sys_coding_operator; |
| | | |
| | | } |
| | | } |
| | | }, |
| | | rightOption(){ |
| | | return this.dict.type.sys_coding_operator.filter(item => item.value >= 2); |
| | | } |
| | | }, |
| | | created(){ |
| | | |
| | | }, |
| | | mounted() { |
| | | // 初始化表单数据 |
| | | this.getList(); |
| | | }, |
| | | watch:{ |
| | | 'codingRulerForm.intervalType'(val){ |
| | | if (val && val === 'single_interval'){ |
| | | this.isSingleInterval = false; |
| | | }else if (val === 'interval'){ |
| | | this.isSingleInterval =true; |
| | | }else { |
| | | this.isSingleInterval =false; |
| | | } |
| | | |
| | | } |
| | | |
| | | }, |
| | | methods: { |
| | | // 清除验证样式以及单区间右符号的值 |
| | | changeOption(e){ |
| | | if (e === 'single_interval'){ |
| | | this.singleForm.rightValue = null; |
| | | this.singleForm.rightSymbol = null; |
| | | } |
| | | }, |
| | | // 获取表格数据 |
| | | getList(){ |
| | | getCodingRulers(this.queryParams).then(res =>{ |
| | | this.tableData = res.data; |
| | | this.total = res.total; |
| | | }) |
| | | |
| | | }, |
| | | // 修改 |
| | | editCodingRuler(row){ |
| | | this.open = true; |
| | | this.dialogTitle = "编辑"; |
| | | // 表单赋值 |
| | | // 拷贝 |
| | | this.codingRulerForm = {...row}; |
| | | this.singleForm = {...row}; |
| | | }, |
| | | // 删除 |
| | | deleteCodingRuler(row){ |
| | | this.$modal.confirm('是否删除选中编码规则?').then(function(){ |
| | | return deleteCodingRulerById(row.id); |
| | | }).then(() =>{ |
| | | this.getList(); |
| | | this.$modal.msgSuccess("删除成功"); |
| | | }).catch(() => {}); |
| | | }, |
| | | // 新增 |
| | | add(){ |
| | | this.open = true; |
| | | this.dialogTitle = "新增"; |
| | | }, |
| | | // 取消 |
| | | closeDialog() { |
| | | this.open = false; |
| | | this.clearForm(); |
| | | }, |
| | | // 清空表单 |
| | | clearForm() { |
| | | this.codingRulerForm = { |
| | | id :null, |
| | | projectCodeType:null, |
| | | intervalType:null, |
| | | leftSymbol:null, |
| | | leftValue:null, |
| | | } |
| | | this.singleForm ={ |
| | | rightSymbol:null, |
| | | rightValue:null, |
| | | } |
| | | this.resetForm("codingRulerForm"); |
| | | this.resetForm("singleForm"); |
| | | this.isSingleInterval = false; |
| | | }, |
| | | |
| | | handleSelectionChange(val) { |
| | | this.ids = val.map(item => item.id) |
| | | console.log(ids) |
| | | }, |
| | | // 搜索按钮操作 |
| | | handleQuery() { |
| | | this.queryParams.pageNum = 1; |
| | | this.getList(); |
| | | }, |
| | | // 重置搜索 |
| | | resetQuery(){ |
| | | this.resetForm("queryForm"); |
| | | this.handleQuery(); |
| | | }, |
| | | // 状态切换 |
| | | changeStatus(row){ |
| | | changeCodingRulerStatus(row.id).then(res =>{ |
| | | this.getList(); |
| | | this.$message.info(res.msg) |
| | | }) |
| | | }, |
| | | async addOrEditCodingRuler() { |
| | | |
| | | // 默认 |
| | | let intervalState = false; |
| | | |
| | | if(this.codingRulerForm.intervalType && this.codingRulerForm.intervalType === "interval"){ |
| | | // 区间情况 |
| | | intervalState = true; |
| | | }else { |
| | | intervalState = false; |
| | | } |
| | | if (intervalState){ |
| | | let need1 = false; |
| | | let need2 = false; |
| | | let warning = false; |
| | | await this.$refs["singleForm"].validate((valid) =>{ |
| | | if (valid){ |
| | | need1 = true; |
| | | } |
| | | }) |
| | | await this.$refs["codingRulerForm"].validate((valid) => { |
| | | if (valid) { |
| | | need2 = true; |
| | | if(this.codingRulerForm.leftValue >= this.singleForm.rightValue){ |
| | | warning = true; |
| | | } |
| | | } |
| | | }); |
| | | if (warning){ |
| | | this.$message.warning("右值应该大于左值") |
| | | return |
| | | } |
| | | if (need1 && need2){ |
| | | this.addOrEdit(); |
| | | } |
| | | }else { |
| | | this.$refs["codingRulerForm"].validate((valid) => { |
| | | if (valid) { |
| | | this.addOrEdit(); |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | async addOrEdit(){ |
| | | const form = this.codingRulerForm; |
| | | form.rightSymbol = this.singleForm.rightSymbol; |
| | | form.rightValue = this.singleForm.rightValue; |
| | | if (this.dialogTitle === "新增") { |
| | | await addCodingRuler(form).then((res) => { |
| | | this.$message.success(res.msg); |
| | | this.open = false; |
| | | this.getList(); |
| | | }) |
| | | } else if (this.dialogTitle === "编辑" && this.codingRulerForm.id){ |
| | | await editCodingRuler(form).then((res) => { |
| | | this.$message.success(res.msg); |
| | | this.open = false; |
| | | this.getList() |
| | | }) |
| | | } |
| | | this.isSingleInterval = false; |
| | | } |
| | | |
| | | |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .right-section { |
| | | display: flex; |
| | | |
| | | |
| | | .add-btn { |
| | | margin: 0 10px; |
| | | } |
| | | } |
| | | .slot { |
| | | display: flex; |
| | | } |
| | | </style> |