You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
437 lines
15 KiB
Vue
437 lines
15 KiB
Vue
2 years ago
|
<template>
|
||
|
|
<!-- 系统管理 组织架构 仓库信息页面 -->
|
||
|
|
<div>
|
||
|
|
<el-card>
|
||
|
|
<el-form :inline="true" :model="query" class="query-form" size="mini">
|
||
|
|
<el-form-item class="query-form-item" label="列名:">
|
||
|
|
<el-input v-model="query.columnName" clearable placeholder="列名"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button-group style="margin-left: 10px; display: flex">
|
||
|
|
<el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
|
||
|
|
<el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
|
||
|
|
<el-button type="primary" icon="el-icon-plus" @click="handleSubForm({}, 'add')">新增</el-button>
|
||
|
|
</el-button-group>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<el-table :data="list" border highlight-current-row row-key="id"
|
||
|
|
style="width: 100%">
|
||
|
|
<el-table-column label="序号" type="index" ref="dataForm"></el-table-column>
|
||
|
|
<el-table-column prop="columnName" label="列名"> </el-table-column>
|
||
|
|
<el-table-column prop="isShow" label="是否展示">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span>{{ isShowMap[scope.row.isShow] }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="columnDesc" label="列描述"></el-table-column>
|
||
|
|
<el-table-column prop="columnType" label="列类型">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span>{{ columnTypeMap[scope.row.columnType] }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="number" label="排序"></el-table-column>
|
||
|
|
<el-table-column prop="width" label="宽度"></el-table-column>
|
||
|
|
<el-table-column prop="lableRule" show-overflow-tooltip="true" label="字典替换规则"></el-table-column>
|
||
|
|
<el-table-column prop="clickFuc" label="事件"></el-table-column>
|
||
|
|
<el-table-column prop="disabledFuc" label="禁用方法"></el-table-column>
|
||
|
|
<el-table-column label="操作">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button
|
||
|
|
type="text"
|
||
|
|
@click.native="handleSubForm(scope.row, 'edit')"
|
||
|
|
>编辑
|
||
|
|
</el-button>
|
||
|
|
<el-button type="text" @click.native="handleDel(scope.row)">删除
|
||
|
|
</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<!--仓库编辑对话框-->
|
||
|
|
<el-dialog :title="formMap[formName]" :close-on-click-modal="false"
|
||
|
|
:close-on-press-escape="false" :visible.sync="formVisible" :before-close="hideForm" width="60%" top="5vh">
|
||
|
|
<el-form :model="subData" ref="dataForm" :rules="formRules" label-width="130px">
|
||
|
|
<el-row :gutter="20" class="el-row" type="flex">
|
||
|
|
<el-col :span="12" class="el-col">
|
||
|
|
<el-form-item label="列名" prop="columnName" class="query-form-item">
|
||
|
|
<el-input v-model="subData.columnName" style="width: 80%" placeholder="请输入业列名"
|
||
|
|
auto-complete="off"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20" class="el-row" type="flex">
|
||
|
|
<el-col :span="12" class="el-col">
|
||
|
|
<el-form-item label="是否展示" prop="columnType">
|
||
|
|
<el-select v-model="subData.isShow" placeholder="请选择是否展示" style="width: 80%">
|
||
|
|
<el-option label="显示" value="1" />
|
||
|
|
<el-option label="隐藏" value="2" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20" class="el-row" type="flex">
|
||
|
|
<el-col :span="12" class="el-col">
|
||
|
|
<el-form-item label="列描述" prop="columnDesc" class="query-form-item">
|
||
|
|
<el-input v-model="subData.columnDesc" style="width: 80%" placeholder="请输入列描述"
|
||
|
|
auto-complete="off"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20" class="el-row" type="flex">
|
||
|
|
<el-col :span="12" class="el-col">
|
||
|
|
<el-form-item label="列类型" prop="columnType">
|
||
|
|
<el-select v-model="subData.columnType" placeholder="请选择列类型" style="width: 80%">
|
||
|
|
<el-option label="输入框" value="input" />
|
||
|
|
<el-option label="下拉框" value="select" />
|
||
|
|
<el-option label="远程搜索" value="selectServer" />
|
||
|
|
<el-option label="区间时间选择框" value="datePicker" />
|
||
|
|
<el-option label="单时间选择框" value="data" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20" class="el-row" type="flex">
|
||
|
|
<el-col :span="12" class="el-col">
|
||
|
|
<el-form-item label="排序" prop="number" class="query-form-item">
|
||
|
|
<el-input v-model="subData.number" style="width: 80%" placeholder="请输入排序"
|
||
|
|
auto-complete="off"></el-input>
|
||
|
|
<div style="color: red">数字越大字段排在越前面</div>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20" class="el-row" type="flex">
|
||
|
|
<el-col :span="12" class="el-col">
|
||
|
|
<el-form-item label="宽度" prop="width" class="query-form-item">
|
||
|
|
<el-input v-model="subData.width" style="width: 80%" placeholder="请输入宽度"
|
||
|
|
auto-complete="off"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20" class="el-row" type="flex">
|
||
|
|
<el-col :span="20" class="el-col">
|
||
|
|
<el-form-item label="字典替换规则" class="query-form-item">
|
||
|
|
<div style="display:flex" :key="i" v-for="(item, i) in conditionForm.lableList">
|
||
|
|
<el-form-item label="值" :prop="'lableList.' + i + '.value'" >
|
||
|
|
<el-input type="input" v-model="item.value" placeholder="请输入值"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="中文名" :prop="'lableList.' + i + '.name'">
|
||
|
|
<el-input type="input" v-model="item.name" placeholder="请输入中文名"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<i v-if="i === 0" @click="addLableList" style="font-size:20px;color:#25c4fe;margin:8px 0 0 10px;" class="el-icon-circle-plus"></i>
|
||
|
|
<i @click="deleteLableList(i)" style="font-size:20px;color:#25c4fe;margin:8px 0 0 10px;" class="el-icon-remove"></i>
|
||
|
|
</div>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20" class="el-row" type="flex">
|
||
|
|
<el-col :span="12" class="el-col">
|
||
|
|
<el-form-item label="事件" prop="clickFuc" class="query-form-item">
|
||
|
|
<el-input v-model="subData.clickFuc" style="width: 80%" placeholder="请输入事件"
|
||
|
|
auto-complete="off"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="20" class="el-row" type="flex">
|
||
|
|
<el-col :span="12" class="el-col">
|
||
|
|
<el-form-item label="禁用方法" prop="clickFuc" class="query-form-item">
|
||
|
|
<el-input v-model="subData.disabledFuc" style="width: 80%" placeholder="请输入禁用方法"
|
||
|
|
auto-complete="off"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
<div slot="footer" class="dialog-footer">
|
||
|
|
<el-button @click.native="hideForm">取消</el-button>
|
||
|
|
<el-button type="primary" @click.native="forSubmit()">提交
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
list,
|
||
|
|
saveCustomConfig,
|
||
|
|
devCustomConfig
|
||
|
|
} from "@/api/system/sysCustomConfigDetail";
|
||
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||
|
|
import Treeselect from "@riophae/vue-treeselect";
|
||
|
|
import {
|
||
|
|
isBlank
|
||
|
|
} from "@/utils/strUtil";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "info",
|
||
|
|
props: {
|
||
|
|
info: {
|
||
|
|
type: Object,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
//---------------仓库相关-------------------
|
||
|
|
query: {
|
||
|
|
columnName: null,
|
||
|
|
configId: this.info.configId,
|
||
|
|
type: this.type,
|
||
|
|
},
|
||
|
|
loading: true,
|
||
|
|
list: [],
|
||
|
|
formName: null,
|
||
|
|
formMap: {
|
||
|
|
add: "配置界面详细-新增",
|
||
|
|
edit: "配置界面详细--编辑",
|
||
|
|
},
|
||
|
|
conditionForm: {
|
||
|
|
lableList: [{
|
||
|
|
name: '',
|
||
|
|
value: ''
|
||
|
|
}],
|
||
|
|
colorList: [{
|
||
|
|
type: '',
|
||
|
|
value: '',
|
||
|
|
color: ''
|
||
|
|
}],
|
||
|
|
buttonList: [{
|
||
|
|
type: '',
|
||
|
|
size: '',
|
||
|
|
style: '',
|
||
|
|
name: '',
|
||
|
|
clickFuc: ''
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
formVisible: false,
|
||
|
|
subData: {},
|
||
|
|
formRules: {
|
||
|
|
columnName: [{ required: true, message: "请输入列名", trigger: "blur" }],
|
||
|
|
columnDesc: [
|
||
|
|
{ required: true, message: "请输入列名", trigger: "blur" },
|
||
|
|
],
|
||
|
|
columnType: [
|
||
|
|
{ required: true, message: "请选择类型", trigger: "blur" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
isExpandAll: true,
|
||
|
|
total: 0,
|
||
|
|
typeMap: {
|
||
|
|
1: "列表",
|
||
|
|
2: "表单",
|
||
|
|
},
|
||
|
|
upUerMap:{
|
||
|
|
true: "是",
|
||
|
|
false: "否",
|
||
|
|
},
|
||
|
|
isShowMap: {
|
||
|
|
"1": "显示",
|
||
|
|
"2": "隐藏",
|
||
|
|
},
|
||
|
|
columnTypeMap: {
|
||
|
|
"input": "输入框",
|
||
|
|
"select": "下拉框",
|
||
|
|
"data": "单时间选择框",
|
||
|
|
"datePicker": "区间时间选择框",
|
||
|
|
"selectServer":"远程搜索",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
info: function () {
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//----------------仓库相关-----------------
|
||
|
|
/* 重置按钮 点击事件 */
|
||
|
|
onReset() {
|
||
|
|
this.$router.push({
|
||
|
|
path: "",
|
||
|
|
});
|
||
|
|
this.query = {
|
||
|
|
configId: this.info.configId,
|
||
|
|
type: this.type,
|
||
|
|
columnName: "",
|
||
|
|
};
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
/* 查询按钮点击事件 */
|
||
|
|
onSubmit() {
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
getList() {
|
||
|
|
if (isBlank(this.info.configId)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.query.configId=this.info.configId;
|
||
|
|
this.query.type=this.type;
|
||
|
|
this.loading = true;
|
||
|
|
this.list = [];
|
||
|
|
list(this.query)
|
||
|
|
.then((response) => {
|
||
|
|
this.loading = false;
|
||
|
|
this.list = response.data.list || [];
|
||
|
|
this.total = response.data.total || 0;
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
this.loading = false;
|
||
|
|
this.total = 0;
|
||
|
|
this.list = [];
|
||
|
|
});
|
||
|
|
},
|
||
|
|
/* 新增 编辑点击事件 */
|
||
|
|
handleSubForm(data, formName) {
|
||
|
|
if (isBlank(this.info.configId)) {
|
||
|
|
this.$message.warning("请先选择配置！");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.formName = formName;
|
||
|
|
this.subData = JSON.parse(JSON.stringify(data));
|
||
|
|
this.subData.configId = this.info.configId,
|
||
|
|
this.subData.type = this.type;
|
||
|
|
this.formVisible = true;
|
||
|
|
if("edit" == formName){
|
||
|
|
const lableRule = this.subData.lableRule;
|
||
|
|
var lableList = [{name: '', value: ''}]
|
||
|
|
if(lableRule){
|
||
|
|
var jsonObj = JSON.parse(lableRule);
|
||
|
|
var lableList = []
|
||
|
|
for(var index in jsonObj){
|
||
|
|
lableList.push({
|
||
|
|
name: jsonObj[index],
|
||
|
|
value: index,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.conditionForm.lableList = lableList;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/* 删除按钮点击事件 */
|
||
|
|
handleDel(row) {
|
||
|
|
if (row.id) {
|
||
|
|
this.$confirm("确认删除该配置吗?", "提示", {
|
||
|
|
type: "warning",
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
this.deleteLoading = true;
|
||
|
|
let para = {
|
||
|
|
id: row.id
|
||
|
|
};
|
||
|
|
devCustomConfig(para)
|
||
|
|
.then((response) => {
|
||
|
|
this.deleteLoading = false;
|
||
|
|
if (response.code !== 20000) {
|
||
|
|
this.$message.error(response.message);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
this.getList();
|
||
|
|
this.$message.success("删除成功");
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
this.deleteLoading = false;
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
this.$message.info("取消删除");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
hideForm() {
|
||
|
|
// 新增，编辑---取消
|
||
|
|
this.formVisible = false;
|
||
|
|
this.resetForm();
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
// 刷新表单
|
||
|
|
resetForm() {
|
||
|
|
if (this.$refs["dataForm"]) {
|
||
|
|
// 清空验证信息表单
|
||
|
|
this.$refs["dataForm"].clearValidate();
|
||
|
|
// 刷新表单
|
||
|
|
this.$refs["dataForm"].resetFields();
|
||
|
|
this.getList();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
forSubmit() {
|
||
|
|
var lableRule = {};
|
||
|
|
this.conditionForm.lableList.forEach(obj => {
|
||
|
|
if(obj.name != ""){
|
||
|
|
lableRule[`${obj.value}`] = obj.name;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.subData.lableRule = "";
|
||
|
|
if(JSON.stringify(lableRule) != "{}"){
|
||
|
|
this.subData.lableRule = JSON.stringify(lableRule);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// 新增，编辑---提交
|
||
|
|
this.$refs["dataForm"].validate((valid) => {
|
||
|
|
if (valid) {
|
||
|
|
saveCustomConfig(this.subData, this.formName)
|
||
|
|
.then((response) => {
|
||
|
|
this.formVisible = false;
|
||
|
|
if (response.code == 20000) {
|
||
|
|
this.getList();
|
||
|
|
} else {
|
||
|
|
this.$message.error(response.message);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
this.formVisible = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 新增
|
||
|
|
addLableList () {
|
||
|
|
this.conditionForm.lableList.push({
|
||
|
|
name: '',
|
||
|
|
value: ''
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 删除
|
||
|
|
deleteLableList (index) {
|
||
|
|
this.conditionForm.lableList.splice(index, 1)
|
||
|
|
},
|
||
|
|
// 新增
|
||
|
|
addColorList () {
|
||
|
|
this.conditionForm.colorList.push({
|
||
|
|
type: '',
|
||
|
|
value: '',
|
||
|
|
color: ''
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 删除
|
||
|
|
deleteColorList (index) {
|
||
|
|
this.conditionForm.colorList.splice(index, 1)
|
||
|
|
},
|
||
|
|
// 新增
|
||
|
|
addButtonList () {
|
||
|
|
this.conditionForm.buttonList.push({
|
||
|
|
type: '',
|
||
|
|
size: '',
|
||
|
|
style: '',
|
||
|
|
name: '',
|
||
|
|
clickFuc: ''
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 删除
|
||
|
|
deleteButtonList (index) {
|
||
|
|
this.conditionForm.buttonList.splice(index, 1)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|