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.
udiwms-vue-frame/src/views/system/customConfig/configQueryDetail.vue

478 lines
17 KiB
Vue

<template>
<!-- 系统管理 组织架构 仓库信息页面 -->
<div>
<el-card>
<el-form :inline="true" :model="query" class="query-form" size="mini">
11 months ago
<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>
11 months ago
<el-table-column prop="columnDesc" label="标题"></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>
11 months ago
<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="禁用eval表达式"></el-table-column>
<el-table-column prop="expression" label="是否展示eval表达式"></el-table-column>
<el-table-column prop="checkRules" label="change事件"></el-table-column>
2 years ago
<el-table-column label="下拉框显示内容" prop="isShowXx">
<template slot-scope="scope">
<span>{{ isShowXxMap[scope.row.isShowXx] }}</span>
</template>
</el-table-column>sss
11 months ago
<el-table-column label="操作" fixed="right" width="100">
<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">
11 months ago
<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>
11 months ago
<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.isShow" placeholder="请选择是否展示" style="width: 80%">
<el-option label="显示" value="1" />
<el-option label="隐藏" value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
11 months ago
<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="禁用eval表达式" prop="clickFuc" class="query-form-item">
<el-input v-model="subData.disabledFuc" style="width: 80%" placeholder="请输入禁用eval表达式"
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="是否展示eval表达式" prop="expression" class="query-form-item">
<el-input v-model="subData.expression" style="width: 80%" placeholder="请输入是否展示eval表达式"
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="change事件" prop="checkRules" class="query-form-item">
<el-input v-model="subData.checkRules" style="width: 80%" placeholder="请输入change事件"
auto-complete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
2 years ago
<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.isShowXx" placeholder="请选择下拉框显示内容" style="width: 80%">
<el-option label="默认" value="2" />
<el-option label="显示code" value="1" />
</el-select>
</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: "否",
},
2 years ago
isShowXxMap:{
"1": "带code",
"2": "默认",
},
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>