<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>
|
