<template>
|
<basic-container>
|
<el-header>
|
<div style="margin-bottom: 15px">
|
编码规则：
|
<el-select v-model="select" :filter-method="filterValue" filterable placeholder="请选择" size="small" v-loading="selectLoading"
|
@change="selectHandler">
|
<el-option v-for="(item,index) in queryReleasedList"
|
:key="item.oid"
|
:label="item.name + ' (' + item.id + ')'"
|
:value="item.oid"></el-option>
|
</el-select>
|
</div>
|
</el-header>
|
<el-main>
|
<el-table
|
v-loading="loading"
|
:data="tableData"
|
:header-cell-style="{background:'#FAFAFA',color:'#505050'}"
|
border
|
style="width: 100%;height: calc(100vh - 315px)"
|
@cell-click="cellClickHandler">
|
<el-table-column align="center" label="1" prop="1"></el-table-column>
|
<el-table-column align="center" label="2" prop="2"></el-table-column>
|
<el-table-column align="center" label="3" prop="3"></el-table-column>
|
<el-table-column align="center" label="4" prop="4"></el-table-column>
|
<el-table-column align="center" label="5" prop="5"></el-table-column>
|
<el-table-column align="center" label="6" prop="6"></el-table-column>
|
<el-table-column align="center" label="7" prop="7"></el-table-column>
|
<el-table-column align="center" label="8" prop="8"></el-table-column>
|
<el-table-column align="center" label="9" prop="9"></el-table-column>
|
<el-table-column align="center" label="10" prop="10"></el-table-column>
|
<el-table-column align="center" label="11" prop="11"></el-table-column>
|
<el-table-column align="center" label="12" prop="12"></el-table-column>
|
<el-table-column align="center" label="13" prop="13"></el-table-column>
|
<el-table-column align="center" label="14" prop="14"></el-table-column>
|
<el-table-column align="center" label="15" prop="15"></el-table-column>
|
</el-table>
|
</el-main>
|
<el-footer>
|
<div style="width: 460px; display: flex; align-items: center;margin-top: 5px">
|
<p>值：</p>
|
<el-input v-model="characterValue" size="small" style="flex: 1; display: flex;">
|
<template slot="prefix">
|
<div style="display: flex; align-items: center;height: 100%;text-align: center;margin-left: 5px">
|
<el-tag v-for="(item,index) in this.editValueList" :key="index" closable size="small"
|
@close="handleClose(item,index)">
|
{{ item }}
|
</el-tag>
|
</div>
|
</template>
|
</el-input>
|
</div>
|
</el-footer>
|
<el-dialog :visible.sync="editVisble" append-to-body title="修改可用字符" width="40%">
|
<el-input v-model="characterValue" size="small"></el-input>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="editVisble = false">取 消</el-button>
|
<el-button type="primary" @click="editSaveHandler">确 定</el-button>
|
</span>
|
</el-dialog>
|
<div style="margin-bottom: 10px;text-align: center">
|
<el-button icon="el-icon-plus" plain size="small" type="success" @click="addSaveHandler">添加</el-button>
|
<el-button icon="el-icon-edit" plain size="small" type="primary" @click="editDialog">修改</el-button>
|
<el-button icon="el-icon-delete" plain size="small" type="danger" @click="delSaveHandler">删除</el-button>
|
</div>
|
</basic-container>
|
</template>
|
|
<script>
|
import {getList, addSave, editSave, deleteSave} from "@/api/code/codeCharcter"
|
import {gridCodeRule} from "@/api/code/mdmrule"
|
|
export default {
|
name: "usableCharacter",
|
data() {
|
return {
|
loading: false,
|
editValueList: [],
|
//下拉框数组
|
queryReleasedList: [],
|
//下拉框初始数据数组
|
characterReleasedList: [],
|
characterValue: "",
|
characterEditOldValue: "",
|
tableData: [],
|
select: "",
|
selectValue: "",
|
editVisble: false,
|
selectLoading:false,
|
}
|
},
|
watch: {
|
select: {
|
handler(newV) {
|
// console.log(newV)
|
}
|
}
|
},
|
created() {
|
this.getCodeRule();
|
},
|
methods: {
|
editDialog() {
|
if (this.editValueList.length > 1) {
|
this.$message.warning('只能选择一条数据！');
|
return;
|
}
|
if (this.editValueList.length === 0) {
|
this.$message.warning('请选择一条数据！');
|
return;
|
}
|
this.editVisble = true;
|
},
|
handleClose(tag, index) {
|
this.$delete(this.editValueList, index);
|
if (this.editValueList.length === 0) {
|
this.characterValue = "";
|
return;
|
}
|
},
|
cellClickHandler(row, column) {
|
this.characterValue = row[column.property];
|
this.characterEditOldValue = row[column.property];
|
if (this.editValueList.includes(row[column.property])) {
|
this.$message.warning('请检查字符集是否有重复！')
|
} else if (row[column.property] === undefined || row[column.property] === null) {
|
this.$message.warning('请检查字符集是否有空值！');
|
} else {
|
this.editValueList.push(row[column.property]);
|
}
|
// else if (this.editValueList.some(value => value.trim() === '')) {
|
// this.$message.warning('请检查字符集是否有空值！');
|
// }
|
},
|
async getCodeRule() {
|
try {
|
// 编码规则已发布数据源
|
const res = await gridCodeRule(1,-1);
|
this.characterReleasedList = res.data.data.records;
|
this.queryReleasedList = this.characterReleasedList;
|
this.select = this.characterReleasedList[0].oid;
|
this.loading = true;
|
const res2 = await getList({codeRuleId: this.select, chartType: "charset", chartValue: this.characterValue});
|
this.tableData = res2.data.data;
|
this.loading = false;
|
this.selectLoading = false;
|
} catch (error) {
|
this.$message.warning(error)
|
}
|
},
|
//编码规则下拉框搜索
|
filterValue(query) {
|
if (query !== "") {
|
this.queryReleasedList = this.characterReleasedList.filter(item => {
|
return item.name.includes(query.toString());
|
});
|
} else {
|
this.queryReleasedList = this.characterReleasedList;
|
}
|
},
|
selectHandler(val) {
|
this.selectValue = val;
|
this.characterValue = ""
|
this.getTableData()
|
},
|
getTableData() {
|
this.loading = true;
|
// const targetObject = this.characterReleasedList.find(obj => obj.oid === this.selectValue);
|
// const chartValue = targetObject.name;
|
getList({codeRuleId: this.select, chartType: "charset", chartValue: this.characterValue}).then(res => {
|
// console.log(res.data.data);
|
this.tableData = res.data.data;
|
this.loading = false;
|
});
|
},
|
addSaveHandler() {
|
if (!this.characterValue) {
|
this.$message.warning('请填写要添加的值！');
|
return; // 判断输入值
|
}
|
;
|
if (this.editValueList.length != 0) {
|
this.$message.warning('请先取消已选择的值！');
|
return; // 判断输入值
|
}
|
;
|
const targetObject = this.characterReleasedList.find(obj => obj.oid === this.select);
|
if (!targetObject) {
|
return; // 查找对应typeText
|
}
|
;
|
const codeRuleCharacterVO = {
|
codeRuleId: this.select,
|
chartType: "charset",
|
chartValue: this.characterValue,
|
chartTypeText: targetObject.name
|
};
|
|
addSave(codeRuleCharacterVO)
|
.then(res => {
|
this.$message.success(res.data.msg);
|
this.characterValue = "";
|
this.getTableData();
|
}).catch(error => {
|
this.$message.error('添加失败');
|
});
|
},
|
editSaveHandler() {
|
if (this.characterEditOldValue === "") {
|
this.$message.warning('请选择修改的值！');
|
return; // 判断选择值
|
}
|
|
if (this.characterValue === "") {
|
this.$message.warning('请填写要修改的值！');
|
return; // 判断输入值
|
}
|
|
const targetObject = this.characterReleasedList.find(obj => obj.oid === this.select);
|
if (!targetObject) {
|
return; // 查找对应typeText
|
}
|
|
const codeRuleCharacterVO = {
|
codeRuleId: this.select,
|
chartType: "charset",
|
chartValue: this.characterValue,
|
oldChartValue: this.characterEditOldValue,
|
chartTypeText: targetObject.name
|
};
|
|
editSave(codeRuleCharacterVO)
|
.then(res => {
|
this.$message.success(res.data.msg);
|
this.characterValue = "";
|
this.editVisble = false;
|
this.editValueList = [];
|
this.getTableData();
|
}).catch(error => {
|
this.$message.error('修改失败');
|
});
|
},
|
delSaveHandler() {
|
//判断选择数据characterEditOldValue
|
if (this.characterEditOldValue === "" || this.characterValue === "") {
|
this.$message.warning('请选择要删除的值');
|
return;
|
}
|
|
const targetObject = this.characterReleasedList.find(obj => obj.oid === this.select);
|
if (!targetObject) {
|
return; // 查找对应typeText
|
}
|
const value = this.editValueList.join("");
|
const codeRuleCharacterVO = {
|
codeRuleId: this.select,
|
chartType: "charset",
|
chartValue: value,
|
chartTypeText: targetObject.name
|
};
|
|
deleteSave(codeRuleCharacterVO)
|
.then(res => {
|
this.$message.success(res.data.msg);
|
this.editValueList = [];
|
this.characterValue = "";
|
this.getTableData();
|
}).catch(error => {
|
this.$message.error('删除失败');
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.el-header {
|
padding: 0;
|
}
|
</style>
|
