新增器械公告功能

src/api/anno/anncmntDev.js

@@ -0,0 +1,32 @@
+import axios from "@/utils/request";
+
+export function list(query) {
+  return axios({
+    url: "/anno/anncmnt/dev/list",
+    method: "get",
+    params: query
+  });
+}
+
+
+// 保存
+export function savegg(data, formName, method = "post") {
+  let url =
+    formName !== "edit"
+      ? "/anno/anncmnt/dev/save"
+      : "/anno/anncmnt/dev/edit";
+  return axios({
+    url: url,
+    method: method,
+    data: data
+  });
+}
+
+// 删除
+export function deletegg(data) {
+  return axios({
+    url: "/anno/anncmnt/dev/delete",
+    method: "post",
+    data: data
+  });
+}

src/api/system/sysCustomConfig.js

@@ -0,0 +1,41 @@
+import axios from "@/utils/request";
+
+export function list(query) {
+  return axios({
+    url: "/system/custom/config/list",
+    method: "get",
+    params: query
+  });
+}
+
+
+// 保存
+export function saveCustomConfig(data, formName, method = "post") {
+  let url =
+    formName !== "edit"
+      ? "/system/custom/config/save"
+      : "/system/custom/config/edit";
+  return axios({
+    url: url,
+    method: method,
+    data: data
+  });
+}
+
+// 删除
+export function devCustomConfig(data) {
+  return axios({
+    url: "/system/custom/config/delete",
+    method: "post",
+    data: data
+  });
+}
+
+
+export function getConfigs(query) {
+  return axios({
+    url: "/system/custom/config/getConfigs",
+    method: "post",
+    data: query
+  });
+}

src/api/system/sysCustomConfigDetail.js

@@ -0,0 +1,32 @@
+import axios from "@/utils/request";
+
+export function list(query) {
+  return axios({
+    url: "/system/custom/configDetail/list",
+    method: "get",
+    params: query
+  });
+}
+
+
+// 保存
+export function saveCustomConfig(data, formName, method = "post") {
+  let url =
+    formName !== "edit"
+      ? "/system/custom/configDetail/save"
+      : "/system/custom/configDetail/edit";
+  return axios({
+    url: url,
+    method: method,
+    data: data
+  });
+}
+
+// 删除
+export function devCustomConfig(data) {
+  return axios({
+    url: "/system/custom/configDetail/delete",
+    method: "post",
+    data: data
+  });
+}

src/utils/customConfig.js

@@ -0,0 +1,100 @@
+import {getConfigs} from "@/api/system/sysCustomConfig";
+import {Message} from "element-ui";
+function getColer(item,value){
+  const colorRule = item.colorRule;
+  if(colorRule && colorRule.indexOf(",") != -1){
+    var arr = colorRule.split("|");
+    var reColor = "";
+    arr.some(s => {
+      var arrTemp = s.split(",");
+      const type = arrTemp[0]
+      const valueT = arrTemp[1]
+      const color = arrTemp[2]
+      if(type == "=" && value == valueT){
+        reColor = color;
+      }else if(type == ">=" && value >= valueT){
+        reColor = color;
+      }else if(type == ">" && value > valueT){
+        reColor = color;
+      }else if(type == "<" && value < valueT){
+        reColor = color;
+      }else if(type == "<=" && value <= valueT){
+        reColor = color;
+      } else if(type == "0"){
+        reColor = color;
+      }
+    })
+    return reColor;
+  }else{
+    return colorRule;
+  }
+}
+
+
+export async function getHead(businessType,type){
+  try {
+    var subData = {};
+    subData.businessType = businessType;
+    subData.type = type;
+    const re = await getConfigs(subData);
+    if(re.code != 20000){
+      Message.error("获取配置失败");
+    }
+    return re;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+
+export function executeFuc(_this,row,type,clickFuc,obj){
+  //  0 列表点击事件 1 列表页按钮事件 2 编辑页表单事件 3 列表页复选框事件 4列表页颜色方法 5列表查询框方法
+  if("1" == type){
+    //列表页按钮事件
+   return callModelFun(_this,clickFuc,row);
+  }else if("4" == type){
+    //列表页颜色方法
+    if(clickFuc) {
+      return getColer(clickFuc, obj);
+    }
+  }else if("5" == type){
+    //列表查询条件查询input方法
+    if(clickFuc){
+      return callModelFun(_this,clickFuc,row);
+    }else{
+      return false;
+    }
+  }else if("2" == type){
+    if(clickFuc){
+      //编辑页表单事件
+      return callModelFun(_this,clickFuc,row);
+    }else{
+      return true;
+    }
+  }else if("3" == type){
+    //列表页复选框事件
+    if(clickFuc){
+      return callModelFun(_this,clickFuc,row);
+    }else{
+      return true;
+    }
+  }else if("0" == type){
+    //表单点击事件
+    if(clickFuc){
+      return callModelFun(_this,clickFuc,row);
+    }
+     return true;
+  }
+}
+
+
+/**
+ * 根据方法名称调用方法
+ */
+function callModelFun(_this,funcName,row) {
+  let methods = _this.$options.methods;
+  // 解释说明一下, this需要传入目标方法, 否则,在目标方法中修改data中的值, 将不会重新渲染dom, 跟v-if结合使用的过程中需要注意
+  return methods[funcName](_this,row);
+}
+
+

src/views/anno/anncmntDev/index.vue

@@ -0,0 +1,320 @@
+<template>
+  <div>
+    <el-card>
+      <el-form v-if="queryList && queryList.length > 0" :model="filterQuery" class="query-form" size="mini" label-width="120px" :inline="true">
+        <el-row style=" display:flex;  flex-wrap: wrap; ">
+          <template v-for="(item, index) in queryList" >
+            <el-form-item v-if="item.columnType == 'input' && executeEval(row,item.expression,true)" :label="item.columnDesc+`:`" :key="item.id">
+              <el-input
+                v-model="filterQuery[item.columnName]"
+                :placeholder="item.columnDesc"
+                :disabled="executeEval(null,item.disabledFuc,false)"
+                @keyup.enter.native="executeFuc($event,'5',item.clickFuc)"
+                clearable
+              ></el-input>
+            </el-form-item>
+            <el-form-item v-if="item.columnType == 'select' && executeEval(row,item.expression,true)" :label="item.columnDesc+`:`">
+              <el-select v-model="filterQuery[item.columnName]"
+                         :placeholder="item.columnDesc"
+                         :disabled="executeEval(null,item.disabledFuc,false)"
+                         clearable>
+                <el-option
+                  v-for="dict in item.lableRuleObj"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item v-if="item.columnType == 'selectServer' && executeEval(row,item.expression,true)" :label="item.columnDesc+`:`">
+              <el-select
+                v-model="filterQuery[item.columnName]"
+                :placeholder="item.columnDesc"
+                @change="executeFuc($event,'5',item.checkRules)"
+                :disabled="executeEval(null,item.disabledFuc,false)"
+                filterable
+                remote
+                :remote-method="(query) => executeFuc(query,'5',item.clickFuc)"
+                clearable>
+                <el-option
+                  v-for="item in options[item.clickFuc]"
+                  :key="item.code"
+                  :label="item.label"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item v-if="item.columnType == 'datePicker' && executeEval(row,item.expression,true)" :label="item.columnDesc+`:`">
+              <el-date-picker
+                :picker-options="pickerOptions"
+                v-model="actDateRange"
+                type="daterange"
+                format="yyyy 年 MM 月 dd 日"
+                value-format="yyyy-MM-dd"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              ></el-date-picker>
+            </el-form-item>
+            <el-form-item v-if="item.columnType == 'date' && executeEval(row,item.expression,true)" :label="item.columnDesc+`:`">
+              <el-date-picker
+                v-model="filterQuery[item.columnName]"
+                :style="`width:${item.width+'px'}`"
+                value-format="yyyy-MM-dd"
+                :disabled="executeEval(null,item.disabledFuc,false)"
+                type="date"
+                :placeholder="item.columnDesc"
+              ></el-date-picker>
+            </el-form-item>
+          </template>
+          <el-form-item>
+            <el-button-group>
+              <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
+                 <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
+              <el-button type="primary" icon="el-icon-plus" @click="addOrderMuti">新增</el-button>
+            </el-button-group>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <el-table v-loading="loading" :data="list" style="width: 100%"  border highlight-current-row>
+        <template v-for="(item, index) in tableHeader">
+          <el-table-column
+            v-if="item.columnType == 'id' && executeEval(row,item.expression,true)"
+            type="index" :label="item.columnDesc"></el-table-column>
+          <el-table-column
+            v-if="item.columnType == 'selection'"
+            type="selection"
+            :width="item.width"
+            :selectable="(row,number) => executeFuc(row,'3',item.clickFuc)"
+          ></el-table-column>
+
+          <el-table-column
+            v-if="item.columnType == 'radio' && executeEval(row,item.expression,true)"
+            :prop="item.columnName"
+            :label="item.columnDesc"
+            :sortable="item.sort"
+            :width="item.width"
+            :show-overflow-tooltip="item.tooltip"
+            :key="item.columnName"
+          >
+            <template  slot-scope="scope">
+              <el-radio :label="scope.row.id" v-model="radioCheck"><span></span></el-radio>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="item.columnType == 'laber' && executeEval(row,item.expression,true)"
+            :prop="item.columnName"
+            :label="item.columnDesc"
+            :sortable="item.sort"
+            :width="item.width"
+            :show-overflow-tooltip="item.tooltip"
+            :key="item.columnName"
+          >
+            <template   slot-scope="scope">
+              <span :style="{color: executeFuc(scope.row,'4',item.lableRuleObj[scope.row[item.columnName]])}">{{ item.lableRuleObj[scope.row[item.columnName]] }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="item.columnType == 'eltag' && executeEval(row,item.expression,true)"
+            :prop="item.columnName"
+            :label="item.columnDesc"
+            :sortable="item.sort"
+            :width="item.width"
+            :show-overflow-tooltip="item.tooltip"
+            :key="item.columnName"
+          >
+            <template   slot-scope="scope">
+              <el-tag :type="executeFuc(scope.row,'4',item,item.lableRuleObj?item.lableRuleObj[scope.row[item.columnName]]:scope.row[item.columnName])">
+                <span>{{ item.lableRuleObj?item.lableRuleObj[scope.row[item.columnName]]:scope.row[item.columnName] }}</span>
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="item.columnType == 'button' && executeEval(row,item.expression,true)"
+            :prop="item.columnName"
+            :label="item.columnDesc"
+            :width="item.width"
+            :key="item.columnName"
+            fixed="right"
+          >
+            <template slot-scope="scope">
+              <el-button v-for="(buttonItem, buttonIndex) in item.buttonRulObj"
+                         :type="buttonItem.type"
+                         :size="buttonItem.size"
+                         :style="buttonItem.style"
+                         :key="buttonItem"
+                         v-if="executeEval(scope.row,buttonItem.hasPermi,true)"
+                         :disabled="executeEval(scope.row,buttonItem.disabledFuc,false)"
+                         @click.native.stop="executeFuc(scope.row,'1',buttonItem.clickFuc)"
+              >{{ buttonItem.name }}
+              </el-button>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="item.columnType == 'text' && executeEval(row,item.expression,true)"
+            :prop="item.columnName"
+            :label="item.columnDesc"
+            :sortable="item.sort"
+            :width="item.width"
+            :show-overflow-tooltip="item.tooltip"
+            :key="item.columnName"
+          >
+            <template slot-scope="scope">
+              <span :style="{color: executeFuc(scope.row,'4',item,scope.row[item.columnName])}">{{ scope.row[item.columnName] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+      </el-table>
+
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="filterQuery.page"
+        :limit.sync="filterQuery.limit"
+        @pagination="handleCurrentChange"
+
+      ></pagination>
+    </el-card>
+
+    <el-dialog
+      :title="formMap[formName]"
+      :visible.sync="orderMutiSetVisible"
+      :before-close="close"
+      width="60%"
+      v-if="orderMutiSetVisible"
+      @close='closeDialog'
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <indexDialog
+        :closeDialog="closeDialog"
+        :inputQuery="inputQuery"
+        :formName="formName"
+      ></indexDialog>
+    </el-dialog>
+
+  </div>
+</template>
+
+
+
+<script>
+import indexDialog from "@/views/anno/anncmntDev/indexDialog";
+import {deletegg, list} from "@/api/anno/anncmntDev";
+import {
+  getHead,executeFuc
+} from "@/utils/customConfig";
+
+export default {
+  name: "anncmntDev",
+  data() {
+    return {
+      filterQuery: {
+        page: 1,
+        limit: 10,
+      },
+      total: 0,
+      loading: false,
+      list: [],
+      formName: 1,
+      formMap: {
+        1: "新增器械公告",
+        2: "编辑器械公告",
+      },
+      orderMutiSetVisible: false,
+    };
+  },
+  methods: {
+    onSubmit() {
+      this.filterQuery.page = 1;
+      this.getList();
+    },
+    onReset() {
+      this.$router.push({
+        path: "",
+      });
+      this.filterQuery = {
+        page: 1,
+        limit: 10,
+      };
+      this.getList();
+    },
+    handleCurrentChange(val) {
+      this.filterQuery.page = val.page;
+      this.getList();
+    },
+    closeDialog(){
+      this.orderMutiSetVisible = false;
+      this.getList();
+    },
+    addOrderMuti(){
+      this.inputQuery={
+        curInv: null,
+        checkUse: null,
+        fromCorp: null,
+        targetAction: null,
+        remark: null,
+        updateTime: null,
+      }
+      this.formName=1;
+      this.orderMutiSetVisible = true;
+    },
+    editDialog(_this,row){
+      _this.formName=2;
+      _this.inputQuery=row;
+      _this.orderMutiSetVisible = true;
+    },
+    getList() {
+      this.loading = true;
+      list(this.filterQuery)
+        .then((response) => {
+          this.loading = false;
+          this.list = response.data.list || [];
+          this.total = response.data.total || 0;
+        })
+        .catch(() => {
+          this.loading = false;
+          this.list = [];
+          this.total = 0;
+        });
+    },
+    deleteDialog(_this,row) {
+      deletegg(row)
+        .then((response) => {
+          if(response.code == 20000){
+            _this.getList()
+          }else{
+            _this.$message.error(response.message);
+          }
+        })
+        .catch(() => {
+          _this.$message.error(response.message);
+        });
+    },
+    executeFuc(row,type,clickFuc,value){
+      return executeFuc(this,row,type,clickFuc,value);
+    },
+    executeEval(row,expression,defaultRet){
+      if(expression){
+        return eval(expression);
+      }
+      return defaultRet;
+    }
+  },
+  components: {indexDialog},
+  created() {
+     getHead("anncmntDev","1").then((re) => {
+       // 处理返回的数据
+       this.tableObj = re.data;
+       this.tableHeader = re.data.tableList;
+       this.queryList = re.data.queryList;
+       this.fromList = re.data.fromList;
+       this.getList()
+     });
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/anno/anncmntDev/indexDialog.vue

@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <el-card>
+      <el-form  :model="inputQuery"  label-width="120px" >
+      <template v-for="(itemRow, indexRow) in fromList">
+          <el-row :gutter="20" class="el-row" type="flex">
+               <template v-for="(item, index) in itemRow.list">
+                 <el-col :span="item.width" class="el-col" type="flex">
+                   <div class="text item">
+                    <el-form-item v-if="item.columnType =='input'"  :rules="item.checkRulesObj" :prop="item.columnName">
+                        <span slot="label">
+                          {{item.columnDesc}}
+                        </span>
+                      <el-input
+                        v-model="inputQuery[item.columnName]"
+                        :style="item.style"
+                        :size="item.size"
+                        :type="item.inputType"
+                        :placeholder="item.columnDesc"
+                        :disabled="item.disabled"
+                          @change="executeFuc($event,item,'2')"
+                      ></el-input>
+                    </el-form-item>
+
+                     <el-form-item v-if="item.columnType =='radio'" :prop="item.columnName">
+                        <span slot="label">
+                          {{item.columnDesc}}
+                        </span>
+                       <el-radio-group :style="item.style" v-model="inputQuery[item.columnName]">
+                         <el-radio
+                           v-for="dict in item.lableRuleObj"
+                           :key="parseInt(dict.value)"
+                           :label="parseInt(dict.value)"
+                           :disabled="item.disabled"
+                         >{{dict.label}}</el-radio>
+                       </el-radio-group>
+                     </el-form-item>
+
+                     <el-form-item v-if="item.columnType =='select'" :prop="item.columnName">
+                        <span slot="label">
+                          {{item.columnDesc}}
+                        </span>
+                       <el-select v-model="inputQuery[item.columnName]" :style="item.style">
+                         <el-option
+                           v-for="dict in item.lableRuleObj"
+                           :key="dict.value"
+                           :label="dict.label"
+                           :value="dict.value"
+                         />
+                       </el-select>
+                     </el-form-item>
+                     <el-form-item v-if="item.columnType =='selectServer'" :prop="item.columnName">
+                        <span slot="label">
+                          {{item.columnDesc}}
+                        </span>
+                       <el-select
+                         v-model="inputQuery[item.columnName]"
+                         :placeholder="item.columnDesc"
+                         @change="executeFuc($event,'5',item.clickFuc)"
+                         :disabled="executeEval(null,item.disabledFuc,false)"
+                         filterable
+                         remote
+                         :remote-method="(query) => executeFuc(query,'5',item.dataFuc)"
+                         clearable>
+                         <el-option
+                           v-for="item in options[item.dataFuc]"
+                           :key="item.code"
+                           :label="item.label"
+                           :value="item.code"
+                         >
+                         <span style="float: left">{{ item.label }}</span>
+                         <span style="float: right; color: #8492a6; font-size: 13px">{{
+                             item.code
+                           }}</span>
+                         </el-option>
+                       </el-select>
+                     </el-form-item>
+                     <el-form-item v-if="item.columnType =='date'"  :rules="item.checkRulesObj" :prop="item.columnName">
+                        <span slot="label">
+                          {{item.columnDesc}}
+                        </span>
+                       <el-date-picker
+                         v-model="inputQuery[item.columnName]"
+                         :style="item.style"
+                         value-format="yyyy-MM-dd"
+                         type="date"
+                         :placeholder="item.columnDesc"
+                       ></el-date-picker>
+                     </el-form-item>
+                     <el-form-item v-if="item.columnType =='treeCustom'" :prop="item.columnName">
+                        <span slot="label">
+                          {{item.columnDesc}}
+                        </span>
+                       <treeselect
+                         v-model="inputQuery[item.columnName]"
+                         :options="menuOptions"
+                         :normalizer="normalizer"
+                         :show-count="true"
+                         :placeholder="item.columnName"
+                       />
+                     </el-form-item>
+                   </div>
+                 </el-col>
+              </template>
+         </el-row>
+      </template>
+        <div style='text-align: center; margin-bottom: 10px;margin-top: 18px ;'>
+          <el-button  @click="closeDialog">取消</el-button>
+          <el-button type="primary" @click="submitInv">提交</el-button>
+        </div>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+
+import {savegg} from "@/api/anno/anncmntDev";
+import {
+  getHead,executeFuc
+} from "@/utils/customConfig";
+
+export default {
+  name: "indexDialog",
+  props: {
+    closeDialog: {
+      type: Function,
+      required: true,
+    },
+    formName: {
+      type: Object,
+      required: true,
+    },
+    inputQuery: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      tableHeader:[],
+      queryList:[],
+      fromList:[],
+      tableObj:[],
+      options: {
+       
+      },
+    }
+  },
+  methods: {
+    submitInv(){
+      if(this.formName==1){
+        savegg(this.inputQuery,"save").then((response) => {
+          if(response.code == 20000){
+            this.closeDialog();
+          }else{
+            this.$message.error(response.message);
+          }
+
+        })
+          .catch(() => {
+            this.$message.error("添加失败");
+          });
+      }else{
+        savegg(this.inputQuery,"edit").then((response) => {
+          if(response.code == 20000){
+            this.closeDialog();
+          }else{
+            this.$message.error(response.message);
+          }
+
+        })
+          .catch(() => {
+            this.$message.error("添加失败");
+          });
+      }
+    },
+    executeFuc(row,type,clickFuc,value){
+         return executeFuc(this,row,type,clickFuc,value);
+       },
+     executeEval(row,expression,defaultRet){
+       if(expression){
+         return eval(expression);
+       }
+       return defaultRet;
+     }
+  },
+  components: {},
+  created() {
+    getHead("anncmntDev","1").then((re) => {
+      // 处理返回的数据
+      this.tableObj = re.data;
+      this.tableHeader = re.data.tableList;
+      this.queryList = re.data.queryList;
+      this.fromList = re.data.fromList;
+    });
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/system/customConfig/configDetail.vue

@@ -0,0 +1,616 @@
+<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 label="字段是否可以排序" prop="sort">
+          <template slot-scope="scope">
+            <span>{{ upUerMap[scope.row.sort] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="是否缩略" prop="tooltip">
+          <template slot-scope="scope">
+            <span>{{ upUerMap[scope.row.tooltip] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="lableRule" show-overflow-tooltip="true" label="字典替换规则"></el-table-column>
+        <el-table-column prop="colorRule" show-overflow-tooltip="true" label="颜色规则"></el-table-column>
+        <el-table-column prop="buttonRule" show-overflow-tooltip="true" label="按钮规则"></el-table-column>
+        <el-table-column prop="clickFuc" label="点击事件"></el-table-column>
+        <el-table-column prop="hasPermi" label="是否展示eval表达式"></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="70%" 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="id" />
+                <el-option label="复选框" value="selection" />
+                <el-option label="单选框" value="radio" />
+                <el-option label="字典" value="laber" />
+                <el-option label="el-tag" value="eltag" />
+                <el-option label="按钮" value="button" />
+                <el-option label="默认" value="text" />
+                <el-option label="特殊" value="other" />
+              </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="12" class="el-col">
+            <el-form-item
+              label="字段是否可以排序"
+              prop="sort"
+              class="query-form-item"
+            >
+              <el-radio-group v-model="subData.sort">
+                <el-radio :label="true">是</el-radio>
+                <el-radio :label="false">否</el-radio>
+              </el-radio-group>
+            </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="tooltip"
+              class="query-form-item"
+            >
+              <el-radio-group v-model="subData.tooltip">
+                <el-radio :label="true">是</el-radio>
+                <el-radio :label="false">否</el-radio>
+              </el-radio-group>
+            </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="20" class="el-col">
+            <el-form-item label="颜色规则"  class="query-form-item">
+              <div style="display:flex" :key="i" v-for="(item, i) in conditionForm.colorList">
+                <el-form-item label="判断条件" :prop="'colorList.' + i + '.type'">
+                  <el-select clearable v-model="item.type" placeholder="请选择判断条件">
+                    <el-option label="默认" value="0" />
+                    <el-option label="大于" value=">" />
+                    <el-option label="大于等于" value=">=" />
+                    <el-option label="小于" value="<" />
+                    <el-option label="小于等于" value="<=" />
+                    <el-option label="等于" value="=" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="值" :prop="'colorList.' + i + '.value'" >
+                  <el-input  type="input" v-model="item.value" placeholder="请输入值"></el-input>
+                </el-form-item>
+                <el-form-item label="颜色" :prop="'colorList.' + i + '.color'">
+                  <el-input  type="input" v-model="item.color" placeholder="请输入颜色"></el-input>
+                </el-form-item>
+                <i v-if="i === 0" @click="addColorList" style="font-size:20px;color:#25c4fe;margin:8px 0 0 10px;" class="el-icon-circle-plus"></i>
+                <i @click="deleteColorList(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="20" class="el-col">
+            <el-form-item label="按钮规则"  class="query-form-item">
+              <div style="display:flex" :key="i" v-for="(item, i) in conditionForm.buttonList">
+                <el-form-item label-width="50px" label="类型" :prop="'buttonList.' + i + '.type'">
+                  <el-select clearable  style="width: 120px;" v-model="item.type" placeholder="请选择类型">
+                    <el-option label="文本" value="text" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label-width="50px" label="大小" :prop="'buttonList.' + i + '.size'" >
+                  <el-select clearable style="width: 120px;" v-model="item.size" placeholder="请选择大小">
+                    <el-option label="medium" value="medium" />
+                    <el-option label="mini" value="mini" />
+                    <el-option label="small" value="small" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label-width="50px" label="名称" :prop="'buttonList.' + i + '.name'">
+                  <el-input  type="input" style="width: 120px;" v-model="item.name" placeholder="请输入名称"></el-input>
+                </el-form-item>
+<!--                <el-form-item label-width="50px" label="样式" :prop="'buttonList.' + i + '.style'">-->
+<!--                  <el-input  type="input" style="width: 120px;" v-model="item.style" placeholder="请输入样式"></el-input>-->
+<!--                </el-form-item>-->
+                <el-form-item label-width="70px" label="禁用eval表达式" :prop="'buttonList.' + i + '.disabledFuc'">
+                  <el-input  type="input" style="width: 120px;" v-model="item.disabledFuc" placeholder="请输入禁用eval表达式"></el-input>
+                </el-form-item>
+                <el-form-item label-width="70px" label="点击方法" :prop="'buttonList.' + i + '.clickFuc'">
+                  <el-input  type="input" style="width: 120px;" v-model="item.clickFuc" placeholder="请输入点击方法"></el-input>
+                </el-form-item>
+                <el-form-item label-width="70px" label="是否展示eval表达式" :prop="'buttonList.' + i + '.hasPermi'">
+                  <el-input  type="input" style="width: 120px;" v-model="item.hasPermi" placeholder="请输入是否展示eval表达式"></el-input>
+                </el-form-item>
+                <i v-if="i === 0" @click="addButtonList" style="font-size:20px;color:#25c4fe;margin:8px 0 0 10px;" class="el-icon-circle-plus"></i>
+                <i @click="deleteButtonList(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>
+              <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="是否展示eval表达式" prop="hasPermi" class="query-form-item">
+              <el-input v-model="subData.hasPermi" style="width: 80%" placeholder="请输入是否展示eval表达式"
+                        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: '',
+            hasPermi:'',
+          }]
+        },
+        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: "否",
+        },
+        columnTypeMap: {
+          "id": "序号",
+          "selection": "复选框",
+          "radio": "单选框",
+          "laber": "字典",
+          "eltag":"el-tag",
+          "button":"按钮",
+          "text":"默认",
+          "other":"特殊",
+        },
+        isShowMap: {
+          "1": "显示",
+          "2": "隐藏",
+        },
+      };
+    },
+    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 colorRule =  this.subData.colorRule;
+           var colorList = [{type: '', value: '', color: ''}]
+           if(colorRule){
+              var arr = colorRule.split("|");
+              var colorList = []
+              arr.forEach(obj =>{
+                var arrTemp = obj.split(",");
+                colorList.push({
+                  type: arrTemp[0],
+                  value: arrTemp[1],
+                  color: arrTemp[2],
+                })
+             })
+           }
+          this.conditionForm.colorList = colorList;
+
+          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;
+
+          const buttonRule =  this.subData.buttonRule;
+          var buttonList = [{type: '', size: '', style: '', name: '', clickFuc: '', disabledFuc: '', hasPermi: ''}]
+          if(buttonRule){
+            var jsonArr = JSON.parse(buttonRule);
+            var buttonList = []
+            jsonArr.forEach(obj =>{
+              buttonList.push({
+                type: obj.type,
+                size: obj.size,
+                style: obj.style,
+                name: obj.name,
+                clickFuc: obj.clickFuc,
+                disabledFuc: obj.disabledFuc,
+                hasPermi:obj.hasPermi
+              })
+            })
+          }
+          this.conditionForm.buttonList = buttonList;
+        }
+      },
+
+      /* 删除按钮点击事件 */
+      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 colorRule = "";
+        this.conditionForm.colorList.forEach(obj => {
+            if(obj.type != "" && obj.value != ""  && obj.color != "" ){
+              colorRule += obj.type+","+obj.value+","+obj.color+"|"
+            }
+        })
+        this.subData.colorRule = "";
+        if(colorRule != ""){
+          this.subData.colorRule = colorRule.substring(0, colorRule.length-1);
+        }
+
+        var lableRule = {};
+        this.conditionForm.lableList.forEach(obj => {
+          if(obj.name != "" && obj.value != ""){
+            lableRule[`${obj.value}`] = obj.name;
+          }
+        })
+        this.subData.lableRule = "";
+        if(JSON.stringify(lableRule) != "{}"){
+          this.subData.lableRule = JSON.stringify(lableRule);
+        }
+
+        var buttonRule = [];
+        this.conditionForm.buttonList.forEach(obj => {
+          if(obj.type != "" && obj.name != "" && obj.clickFuc != ""){
+            buttonRule.push({
+              type: obj.type,
+              size: obj.size,
+              style: obj.style,
+              name: obj.name,
+              clickFuc: obj.clickFuc,
+              disabledFuc: obj.disabledFuc,
+              hasPermi:obj.hasPermi
+            })
+          }
+        })
+        this.subData.buttonRule = "";
+        if(buttonRule.length > 0){
+          this.subData.buttonRule = JSON.stringify(buttonRule);
+        }
+
+        // 新增，编辑---提交
+        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>

src/views/system/customConfig/configFromDetail.vue

@@ -0,0 +1,517 @@
+<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="lineNumber" label="行号"></el-table-column>
+        <el-table-column prop="number" label="排序"></el-table-column>
+        <el-table-column prop="width" label="col-span"></el-table-column>
+        <el-table-column prop="size" label="组件尺寸"></el-table-column>
+        <el-table-column prop="style" label="样式"></el-table-column>
+        <el-table-column label="是否禁用" prop="disabled">
+          <template slot-scope="scope">
+            <span>{{ upUerMap[scope.row.disabled] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="lableRule" show-overflow-tooltip="true" label="字典替换规则"></el-table-column>
+        <el-table-column prop="checkRules" show-overflow-tooltip="true" label="验证规则"></el-table-column>
+        <el-table-column prop="inputType" label="input类型"></el-table-column>
+        <el-table-column prop="clickFuc" label="内容改变事件"></el-table-column>
+         <el-table-column prop="dataFuc" label="获取数据接口"></el-table-column>
+         <el-table-column label="下拉框显示内容" prop="isShowXx">
+           <template slot-scope="scope">
+             <span>{{ isShowXxMap[scope.row.isShowXx] }}</span>
+           </template>
+         </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="radio" />
+                <el-option label="远程搜索" value="selectServer" />
+                <el-option label="树状自定以" value="treeCustom" />
+                <el-option label="时间选择" value="date" />
+              </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="lineNumber" class="query-form-item">
+              <el-input v-model="subData.lineNumber" 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="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="col-span" prop="width" class="query-form-item">
+              <el-input v-model="subData.width" style="width: 80%" placeholder="请输入col-span"
+                        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="size">
+              <el-select v-model="subData.size" placeholder="请选择组件尺寸" style="width: 80%">
+                <el-option label="medium" value="medium" />
+                <el-option label="small" value="small" />
+                <el-option label="mini" value="mini" />
+              </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="style" class="query-form-item">
+              <el-input v-model="subData.style" 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="input类型" prop="inputType">
+              <el-select v-model="subData.inputType" placeholder="请选择input类型" style="width: 80%">
+                <el-option label="text" value="text" />
+                <el-option label="number" value="number" />
+                <el-option label="textarea" value="textarea" />
+              </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="checkRules">
+              <el-input v-model="subData.checkRules" type="textarea" 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="disabled"
+              class="query-form-item"
+            >
+              <el-radio-group v-model="subData.disabled">
+                <el-radio :label="true">是</el-radio>
+                <el-radio :label="false">否</el-radio>
+              </el-radio-group>
+            </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="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-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="dataFuc" class="query-form-item">
+                    <el-input v-model="subData.dataFuc" 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: "否",
+        },
+        isShowXxMap:{
+          "1": "带code",
+          "2": "默认",
+        },
+        isShowMap: {
+          "1": "显示",
+          "2": "隐藏",
+        },
+        columnTypeMap: {
+          "input": "输入框",
+          "radio": "单选框",
+          "select": "下拉框",
+          "selectServer": "远程搜索",
+          "date":"时间选择",
+          "treeCustom":"树状自定义",
+        },
+      };
+    },
+    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){
+
+        }
+      },
+
+      /* 删除按钮点击事件 */
+      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 != "" && obj.value != ""){
+            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>

src/views/system/customConfig/configQueryDetail.vue

@@ -0,0 +1,475 @@
+<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="禁用eval表达式"></el-table-column>
+        <el-table-column prop="expression" label="是否展示eval表达式"></el-table-column>
+        <el-table-column prop="checkRules" label="change事件"></el-table-column>
+        <el-table-column label="下拉框显示内容" prop="isShowXx">
+          <template slot-scope="scope">
+            <span>{{ isShowXxMap[scope.row.isShowXx] }}</span>
+          </template>
+        </el-table-column>sss
+        <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="禁用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>
+        <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: "否",
+        },
+        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>

src/views/system/customConfig/index.vue

@@ -0,0 +1,324 @@
+<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.businessType" clearable placeholder="业务标识"></el-input>
+        </el-form-item>
+        <el-form-item class="query-form-item" label="备注:">
+          <el-input v-model="query.remark" clearable placeholder="备注"></el-input>
+        </el-form-item>
+        <el-form-item label="表单类型:" prop="type">
+          <el-select v-model="query.type" placeholder="请选择类型" style="width: 90%">
+            <el-option label="列表" :value="1" />
+            <el-option label="表单" :value="2" />
+          </el-select>
+        </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
+          @current-change="handSubCurrentChange"
+       row-key="id"
+        style="width: 100%">
+        <el-table-column label="序号" type="index" ref="dataForm"></el-table-column>
+        <el-table-column prop="businessType" label="业务标识"> </el-table-column>
+        <el-table-column prop="remark" label="备注"> </el-table-column>
+        <el-table-column prop="type" label="类型">
+          <template slot-scope="scope">
+            <span>{{ typeMap[scope.row.type] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="handleChangeFuc" label="列表点击方法"> </el-table-column>
+        <el-table-column label="操作" width="220">
+          <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>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="query.page"
+        :limit.sync="query.limit"
+        @pagination="getList"
+      />
+    </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="businessType" class="query-form-item">
+              <el-input v-model="subData.businessType" 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="remark" class="query-form-item">
+              <el-input v-model="subData.remark" 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="type">
+              <el-select v-model="subData.type" 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="handleChangeFuc" class="query-form-item">
+              <el-input v-model="subData.handleChangeFuc" 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>
+
+    <el-tabs type="border-card" style="margin: 15px">
+      <el-tab-pane>
+        <span slot="label">自定义列-详细配置</span>
+
+        <config-detail
+          :info="configParms"
+          :type ="1"
+        ></config-detail>
+      </el-tab-pane>
+      <el-tab-pane>
+        <span slot="label">自定义查询框-详细配置</span>
+        <config-query-detail
+          :info="configParms"
+          :type ="2"
+        ></config-query-detail>
+      </el-tab-pane>
+
+      <el-tab-pane>
+        <span slot="label">自定义表单-详细配置</span>
+        <config-from-detail
+          :info="configParms"
+          :type ="3">
+        </config-from-detail>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+  import {
+    list,
+    saveCustomConfig,
+    devCustomConfig
+  } from "@/api/system/sysCustomConfig";
+  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+  import configDetail from "@/views/system/customConfig/configDetail";
+  import configFromDetail from "@/views/system/customConfig/configFromDetail";
+  import configQueryDetail from "@/views/system/customConfig/configQueryDetail";
+  import {
+    isBlank
+  } from "@/utils/strUtil";
+
+  export default {
+    data() {
+      return {
+        //---------------仓库相关-------------------
+        query: {
+          name: null,
+          remark: null,
+          type: null,
+          page: 1,
+          limit: 10,
+        },
+        loading: true,
+        list: [],
+        formName: null,
+        formMap: {
+          add: "配置界面信息-新增",
+          edit: "配置界面信息-编辑",
+        },
+        configParms: {
+          configId:null,
+        },
+        formVisible: false,
+        subData: {},
+        formRules: {
+          businessType: [{ required: true, message: "请输入业务标识", trigger: "blur" }],
+          type: [
+            { required: true, message: "请选择类型", trigger: "blur" },
+          ],
+        },
+        isExpandAll: true,
+        total: 0,
+        typeMap: {
+          1: "列表",
+          2: "表单",
+        },
+      };
+    },
+    methods: {
+      //----------------仓库相关-----------------
+      /* 重置按钮  点击事件 */
+      onReset() {
+        this.$router.push({
+          path: "",
+        });
+        this.query = {
+          name: "",
+          type: "",
+          remark: "",
+          page: 1,
+          limit: 10,
+        };
+        this.getList();
+
+        this.configParms = {
+          configId:null
+        };
+      },
+      /* 查询按钮点击事件 */
+      onSubmit() {
+        this.getList();
+      },
+
+      handSubCurrentChange(row) {
+        //加载货位信息
+        this.configDetail(row);
+
+      },
+      configDetail(row) {
+        this.configParms = {
+          configId: row.id,
+          page:1
+        };
+      },
+      getList() {
+        //获取仓库信息
+        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) {
+        this.formName = formName;
+        this.subData = JSON.parse(JSON.stringify(data));
+        this.formVisible = true;
+
+      },
+
+      /* 删除按钮点击事件 */
+      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() {
+        this.query.page = 1;
+        // 新增，编辑---提交
+        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;
+              });
+          }
+        });
+      },
+    },
+    mounted() {},
+    components: {
+      configDetail,
+      configFromDetail,
+      configQueryDetail,
+    },
+    created() {
+      this.getList();
+    },
+  };
+</script>