qgb-process 0.2.3 → 0.2.7

package/src/formBuilder/components/app-main/components/components/listDesign.vue

@@ -1,772 +1,772 @@
-<template>
-  <div class="wrapper">
-    <div class="tab_left">
-      <div>
-        <el-form
-          :inline="true"
-          :model="formInline"
-          class="demo-form-inline"
-          label-width="100px"
-        >
-          <el-form-item label="申请单位：">
-            <el-select
-              v-model="formInline.company"
-              placeholder="请选择申请单位"
-              disabled
-            >
-              <el-option
-                label="区域一"
-                value="shanghai"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="申请部门：">
-            <el-select
-              v-model="formInline.depment"
-              placeholder="请选择申请部门"
-              disabled
-            >
-              <el-option
-                label="区域一"
-                value="shanghai"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="申请人：">
-            <el-input
-              v-model="formInline.applyer"
-              placeholder="请输入申请人"
-              disabled
-            ></el-input>
-          </el-form-item>
-          <!-- <el-form-item label="经办人：">
-            <el-input
-              v-model="formInline.agent"
-              placeholder="请输入经办人"
-              disabled
-            ></el-input>
-          </el-form-item> -->
-        </el-form>
-        <ele-form
-          class="design"
-          :formDesc="formDesc"
-          v-model="formData"
-          :isLoading="isLoading"
-          @request="handleRequest"
-          v-bind="formAttr"
-        >
-        </ele-form>
-      </div>
-      <div>
-        <table-list
-          :tableData="tableData"
-          :tableConfig="tableConfig"
-          :buttons="buttons"
-          @handleButton="(e) => e.func(e.row)"
-        ></table-list>
-      </div>
-      <div class="btn-grounp">
-        <el-button
-          size="small"
-          type="primary"
-          icon="el-icon-upload2"
-          @click="save"
-        >保存</el-button>
-      </div>
-    </div>
-    <div class="tab_right">
-      <h4>字段设置</h4>
-      <div>
-        <div class="condition">
-          <span>查询条件</span>
-          <el-popover
-            placement="bottom"
-            width="150"
-            trigger="click"
-          >
-            <el-checkbox-group
-              v-if="Object.keys(customForm).length > 0"
-              class="condition-list"
-              v-model="checkList"
-              @change="checkChange"
-            >
-              <el-checkbox
-                v-for="(item, index) in customForm"
-                :label="item.field"
-                :title='item.label'
-                :key="index"
-              >{{item.label}}</el-checkbox>
-            </el-checkbox-group>
-            <span
-              class="nothing"
-              v-else
-            >暂无可选择的查询条件</span>
-            <i
-              slot="reference"
-              class="el-icon-plus"
-            ></i>
-          </el-popover>
-        </div>
-        <ul class='queryList'>
-          <li
-            v-for="(item, index) in conditions"
-            :key="index"
-          >
-            <span>{{ item.name }}</span>
-          </li>
-          <li
-            v-for="(item, key) in formDesc"
-            :key="key"
-          >
-            <span>{{ item.label }}</span>
-            <i
-              class="el-icon-delete"
-              @click="deleteCond(key)"
-            ></i>
-          </li>
-        </ul>
-      </div>
-      <div>
-        <div class="condition">
-          <span>列表字段</span>
-          <!-- <el-checkbox class="all-check" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
-        </div>
-        <el-checkbox-group
-          class="field-list"
-          v-model="checkHeader"
-          @change="headerCheckChange"
-        >
-          <template v-for="(item, index) in listHeader">
-            <template v-if="item.type != 'custom-table'">
-              <el-checkbox
-                :label="item.label == '数据标题'?item.field+'title' :item.field"
-                :key="index"
-                :title="item.label"
-                :disabled="item.label == '数据标题' || isTitle(item.field)"
-              >{{ item.label }}</el-checkbox>
-            </template>
-            <template v-else>
-              <div
-                :key="item.field + 'ind'"
-                style="height: 30px; line-height:30px; font-size:16px"
-              >
-                {{ item.label }}
-              </div>
-              <div
-                class="sub-form"
-                :key="item.field + 'in'"
-              >
-                <template v-for="(i, ind) in item.attrs.columns">
-                  <el-checkbox
-                    v-if="i.content"
-                    :label="item.field + ':' + i.content.field"
-                    :key="i.content.field + ind"
-                  >{{ i.content.label }}</el-checkbox>
-                </template>
-              </div>
-            </template>
-          </template>
-        </el-checkbox-group>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import tableList from "./tableList";
-import _, { indexOf } from "lodash-es";
-import formAttrDefault from "@/store/formBuilder/formAttrDefault";
-import { mapGetters, mapMutations, mapState } from "vuex";
-import {
-  saveListdesign,
-  updateListdesign,
-  queryListdesign,
-  deleteListdesign
-} from "@/api/apiFormBuilder/menu";
-export default {
-  name: "",
-  mixins: [],
-  extends: {},
-  components: {
-    tableList
-  },
-  props: {},
-  data() {
-    return {
-      formInline: {
-        company: "",
-        depment: "",
-        applyer: "",
-        agent: ""
-      },
-      formDesc: {},
-      formData: {},
-      isLoading: false,
-      tableData: [1],
-      tableConfig: [],
-      conditions: [
-        { name: "申请单位" },
-        { name: "申请部门" },
-        { name: "申请人" }
-        // { name: "经办人" }
-      ],
-      checkList: [],
-      isIndeterminate: true,
-      checkAll: false,
-      checkHeader: [],
-      id: "",
-      buttons: [
-        {
-          name: "查看",
-          func: e => {
-            console.log(e);
-          },
-          event: "handleButton"
-        }
-        // {
-        //   name: '删除',
-        //   func: (e)=>{console.log(e)},
-        //   event: 'handleButton'
-        // }
-      ]
-    };
-  },
-  watch: {
-    formBuilder: {
-      deep: true,
-      handler: function(newVal) {
-        if (newVal && newVal.formDesId) {
-          // this.getConfig(newVal);
-        }
-      }
-    },
-    tableConfig: {
-      deep: true,
-      immediate: true,
-      handler: function(newVal, oldVal) {
-        const vm = this;
-        if (newVal.length <= 0) {
-          const data = [];
-          vm.listHeader.forEach(item => {
-            if (item.type != "custom-table" && item.label == "数据标题") {
-              //   if () {
-              //   }
-              var dd = _.find(vm.tableConfig, function(o) {
-                return o.label != "数据标题";
-              });
-              vm.tableConfig.push({ label: item.label, prop: item.field });
-              if (vm.$store.state.formAttr.title.length <= 1) {
-                vm.checkHeader.push(item.field + "title");
-              } else {
-                vm.checkHeader.push(item.field);
-              }
-            } else if (
-              item.type != "custom-table" &&
-              item.label != "数据标题"
-            ) {
-              vm.tableConfig.push({ label: item.label, prop: item.field });
-              vm.checkHeader.push(item.field);
-            }
-          });
-          //   vm.$store.state.formAttr.title.forEach(e => {
-          //     if (vm.checkHeader.indexOf(e) == -1) {
-          //       vm.checkHeader.push(e);
-          //     }
-          //     vm.headerCheckChange(e);
-          //   });
-          //   this.tableConfig = data;
-        } else {
-          //   const arrStr = this.getCurrentTitleArr.join(",")
-          //   if (this.getCurrentTitleArr.length >= 1) {
-          //     vm.checkHeader.push(arrStr)
-          //   }
-        }
-      }
-    },
-    customForm: {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        this.$nextTick(() => {
-          const arr = Object.keys(newVal);
-          for (const name in this.formDesc) {
-            if (arr.indexOf(name) < 0) {
-              delete this.formDesc[name];
-            }
-          }
-          this.formDesc = Object.assign({}, this.formDesc);
-          this.checkList = this.checkList.filter(
-            item => arr.indexOf(item) > -1
-          );
-        });
-      }
-    },
-    listHeader: {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        this.$nextTick(() => {
-          const arr = newVal.map(item => item.field);
-          this.tableConfig = this.tableConfig.filter(
-            item => arr.indexOf(item.prop) > -1
-          );
-          this.checkHeader = this.checkHeader.filter(
-            item => arr.indexOf(item) > -1
-          );
-          this.checkAll =
-            arr.length > 0 && arr.length === this.checkHeader.length;
-          this.isIndeterminate = !this.checkAll;
-        });
-      }
-    },
-    getCurrentTitleArr: {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        const vm = this;
-        vm.checkHeader.splice(0, 1);
-        vm.checkHeader.unshift(newVal.join(","));
-        vm.listHeader.forEach(item => {
-          if (item.type != "custom-table" && item.label == "数据标题") {
-            vm.tableConfig.unshift({ label: item.label, prop: item.field });
-          }
-        });
-        // });
-      }
-    }
-  },
-  computed: {
-    ...mapGetters(["getCurrentTitleArr"]),
-    formAttr() {
-      return Object.assign({}, formAttrDefault, {
-        submitBtnText: "查询",
-        resetBtnText: "重置",
-        isShowSubmitBtn: true,
-        isShowResetBtn: true,
-        inline: true
-      });
-    },
-    // 查询条件-字段
-    customForm() {
-      const type = [
-        "input",
-        "select",
-        "date",
-        "daterange",
-        "time",
-        "datetime",
-        "input-number",
-        "datetimerange",
-        "timerange",
-        "radio",
-        "checkbox"
-      ];
-      const list = this.$store.state.list.default;
-      const con = this.getCuston(list, type);
-      return _.keyBy(con, "field");
-    },
-    // 列表字段-字段
-    listHeader() {
-      const type = [
-        "input",
-        "select",
-        "date",
-        "datetime",
-        "daterange",
-        "datetimerange",
-        "time",
-        "timerange",
-        "radio",
-        "checkbox",
-        "textarea",
-        "custom-table"
-      ]; //, 'custom-table'
-      const list = this.$store.state.list.default;
-      const con = this.getCuston(list, type);
-
-      con.unshift({
-        label: "数据标题",
-        type: "input",
-        error: false,
-        attrs: {
-          size: null,
-          type: "text",
-          showWordLimit: false,
-          clearable: false,
-          autofocus: false,
-          validateEvent: true,
-          summary: "我我我",
-          field: this.$store.state.formAttr.title
-            ? this.$store.state.formAttr.title
-            : {}
-        },
-        field: this.$store.state.formAttr.title
-          ? this.$store.state.formAttr.title.join(",")
-          : {}
-      });
-
-      return con;
-    },
-    // 菜单，表单信息
-    formBuilder() {
-      return this.$store.state.formBuilder;
-    },
-    user() {
-      return this.$store.state.user;
-    },
-    // 是否数据标题
-    isTitle() {
-      return function(x) {
-        return _.includes(this.$store.state.formAttr.title, x);
-      };
-    }
-  },
-  methods: {
-    getCuston(list, type) {
-      const lists = list.filter(item => type.indexOf(item.type) > -1);
-      let condition = [];
-      const layout = list.filter(item => item.type.indexOf("columns") > -1);
-      if (layout.length > 0) {
-        layout.forEach(i => {
-          const arr = i.attrs.columns.length
-            ? i.attrs.columns.filter(item => type.indexOf(item.type) > -1)
-            : [];
-          condition = arr.length > 0 ? condition.concat(arr) : condition;
-        });
-      }
-      condition = condition.concat(_.cloneDeep(lists));
-      return condition;
-    },
-    handleRequest() {},
-    // 选择条件选中
-    checkChange(val) {
-      const json = {};
-      val.forEach(item => {
-        json[item] = this.customForm[item];
-        if (json[item].required) {
-          json[item].required = false;
-        }
-      });
-      this.formDesc = json;
-      const tableConfigKey = this.tableConfig.map(item => item.prop);
-      val.forEach(item => {
-        if (tableConfigKey.indexOf(item) == -1) {
-          this.tableConfig.push({ label: json[item].label, prop: item });
-          this.checkHeader.push(item);
-        }
-      });
-    },
-    // 删除选中的条件
-    deleteCond(key) {
-      const json = this.formDesc;
-      delete json[key];
-      this.checkList = this.checkList.filter(item => item != key);
-      this.formDesc = assign({}, json);
-    },
-    // 列表显示字段全选
-    handleCheckAllChange(val) {
-      this.isIndeterminate = !val;
-      if (val) {
-        this.checkHeader = this.listHeader.map(item => item.field);
-        this.tableConfig = this.listHeader.map(item => ({
-          label: item.label,
-          prop: item.field
-        }));
-      } else {
-        this.checkHeader = [];
-        this.tableConfig = [];
-      }
-    },
-    // 列表选择
-    headerCheckChange(value) {
-      var data = [];
-      this.listHeader.forEach(item => {
-        if (item.label == "数据标题") {
-          if (data.indexOf(item.label) == -1) {
-            data.push({ label: item.label, prop: item.field });
-          }
-        }
-        if (item.type != "custom-table" && value.indexOf(item.field) > -1) {
-          data.push({ label: item.label, prop: item.field });
-        } else if (item.type == "custom-table") {
-          const child = [];
-          item.attrs.columns.forEach((i, index) => {
-            const key = i.content ? item.field + ":" + i.content.field : "0";
-            if (value.indexOf(key) > -1 && i.type != "index") {
-              child.push({ label: i.content.label, prop: i.content.field });
-            }
-          });
-          if (child.length > 0) {
-            data.push({ label: item.label, prop: item.field, children: child });
-          }
-        }
-      });
-      data = _.uniqWith(data, _.isEqual);
-      this.tableConfig = data;
-    },
-    // 保存
-    async save() {
-      if (!this.formBuilder.formDesId) {
-        this.$message.error({
-          message: "请先保存表单设计信息",
-          duration: 1500
-        });
-        return;
-      }
-
-      let data = { formDesc: this.formDesc, tableConfig: this.tableConfig };
-      for (let i = 0; i < this.tableConfig.length; i++) {
-        const e = this.tableConfig[i];
-        if (e.label == "数据标题" && !e.prop) {
-          this.$message.error({
-            message: "请先选择表单设计中的数据标题",
-            duration: 3000
-          });
-          return;
-        }
-      }
-      data = JSON.stringify(data);
-      const parse = {
-        content: data,
-        companyNo: this.user.cno,
-        menuId: this.formBuilder.menuId,
-        formId: this.formBuilder.formDesId
-      };
-      let res;
-      if (this.id) {
-        parse.id = this.id;
-        res = await updateListdesign(parse);
-      } else {
-        res = await saveListdesign(parse);
-      }
-      if (res.data.state == "ok") {
-        this.$message.success({ message: res.data.msg, duration: 1500 });
-        this.id = this.id ? this.id : res.data.data;
-      } else {
-        this.$message.error({
-          message: res.data.msg ? res.data.msg : "保存失败",
-          duration: 1500
-        });
-      }
-    },
-    // 获取表单对应列表配置
-    async getConfig(newVal) {
-      const parse = {
-        companyNo: this.user.cno,
-        menuId: this.formBuilder.menuId,
-        formId: this.formBuilder.formDesId
-      };
-      const res = await queryListdesign(parse);
-      if (res.data.state == "ok" && res.data.data.content) {
-        const content = res.data.data.content;
-        this.formDesc = content.formDesc;
-        this.checkList = Object.keys(this.formDesc);
-        const checkHeader = [];
-        let fields = [];
-        this.$store.state.list.default.forEach(j => {
-          if (j.type.indexOf("columns") > -1) {
-            const arr = j.attrs.columns.map(i => i.field);
-            fields = fields.concat(arr);
-          } else {
-            fields.push(j.field);
-          }
-        });
-        const tableConfig = [];
-        // 筛选报存的列表设计字段，是否在表单设计中删除
-        content.tableConfig.forEach(item => {
-          if (item.label == "数据标题") {
-            tableConfig.push(item);
-            checkHeader.push(item.prop);
-          }
-          if (fields.indexOf(item.prop) == -1) {
-            return;
-          } else if (item.children) {
-            const arr = [];
-            item.children.forEach(i => {
-              checkHeader.push(item.prop + ":" + i.prop);
-            });
-            tableConfig.push(item);
-            return;
-          } else {
-            tableConfig.push(item);
-            checkHeader.push(item.prop);
-          }
-        });
-        this.checkHeader = checkHeader;
-        this.tableConfig = tableConfig;
-
-        this.id = res.data.data.id;
-        debugger;
-        this.$nextTick(() => {
-          this.checkAll =
-            this.listHeader.length > 0 &&
-            this.listHeader.length === this.checkHeader.length;
-          this.isIndeterminate = !this.checkAll;
-        });
-      } else {
-        this.formDesc = {};
-        this.tableConfig = [];
-        this.id = "";
-      }
-    }
-  },
-  created() {
-    this.getConfig()
-    // const vm = this;
-    // vm.$store.state.formAttr.title.forEach(e => {
-    //   if (vm.checkHeader.indexOf(e) == -1) {
-    //     vm.checkHeader.push(e);
-    //   }
-    //   vm.headerCheckChange(e);
-    // });
-  },
-  mounted() {}
-};
-</script>
-<style lang="scss" scoped>
-/deep/ .ele-form-btns {
-  /deep/ .el-button--default {
-    color: #409eff;
-    border-color: #c6e2ff;
-    // background-color: #ecf5ff;
-  }
-}
-.el-checkbox-group {
-  /deep/ .el-checkbox__label {
-    font-size: 14px;
-    font-weight: 400;
-    color: #666666;
-  }
-}
-.queryList {
-  span {
-    font-size: 14px;
-    font-weight: 400;
-    color: #666666;
-  }
-}
-.condition-list {
-  /deep/ .el-checkbox__label {
-    width: 100px !important;
-  }
-}
-.wrapper {
-  height: 100%;
-  background-color: #f5f5f5;
-  display: flex;
-  padding-top: 10px;
-  .tab_left {
-    position: relative;
-    flex: 1;
-    background-color: #fff;
-    padding: 20px 10px 10px 20px;
-    & > div {
-      margin-bottom: 20px;
-    }
-    .search-btn {
-      text-align: right;
-    }
-    .btn-grounp {
-      position: fixed;
-      /* left: 0; */
-      right: 13px;
-      top: 1px;
-      z-index: 2;
-      /* bottom: 38px; */
-      /* height: 56px; */
-      /* background-color: #ebeef5; */
-      text-align: center;
-    }
-  }
-  .tab_right {
-    width: 280px;
-    margin-left: 10px;
-    background-color: #fff;
-    padding: 20px 20px 60px 20px;
-    overflow: auto;
-    h4 {
-      margin: 0;
-      color: #409eff;
-      text-align: center;
-      margin-bottom: 10px;
-      font-size: 18px;
-      font-weight: 400;
-    }
-    ul {
-      margin: 0;
-      padding: 6px 10px;
-      li {
-        padding: 6px 10px;
-        display: flex;
-        justify-content: space-between;
-        &:hover {
-          background-color: rgba(30, 101, 255, 0.05);
-          i {
-            display: block;
-          }
-        }
-        i {
-          cursor: pointer;
-          display: none;
-        }
-      }
-    }
-    .condition {
-      display: flex;
-      justify-content: space-between;
-      & > span {
-        font-weight: 600;
-      }
-    }
-    .field-list {
-      padding: 8px 0 20px 10px;
-      overflow: auto;
-      .sub-form {
-        padding-left: 20px;
-      }
-    }
-  }
-  /deep/ .is-justify-center.el-row--flex > .el-col {
-    width: 100% !important;
-  }
-  /deep/ .el-form .el-row .el-col {
-    width: 33% !important;
-  }
-}
-/deep/ .el-checkbox {
-  display: block;
-  padding: 4px 10px;
-  //   font-size: 16px;
-  margin: 0;
-  &:hover {
-    background-color: rgba(30, 101, 255, 0.05);
-  }
-}
-/deep/ .el-checkbox__input {
-  float: right;
-}
-/deep/ .el-checkbox__label {
-  width: 200px;
-  padding: 0;
-  font-size: 16px;
-  color: #000;
-  overflow: hidden; //超出的文本隐藏
-  text-overflow: ellipsis; //溢出用省略号显示
-  white-space: nowrap; //溢出不换行
-}
-/deep/ .all-check {
-  margin-right: 10px;
-  .el-checkbox__label {
-    float: left;
-    margin-right: 16px;
-  }
-}
-.nothing {
-  height: 60px;
-  line-height: 60px;
-  text-align: center;
-}
-.el-icon-plus {
-  cursor: pointer;
-}
-/deep/ .btn-grounp .el-button {
-  margin-top: 8px;
-}
-</style>
+<template>
+  <div class="wrapper">
+    <div class="tab_left">
+      <div>
+        <el-form
+          :inline="true"
+          :model="formInline"
+          class="demo-form-inline"
+          label-width="100px"
+        >
+          <el-form-item label="申请单位：">
+            <el-select
+              v-model="formInline.company"
+              placeholder="请选择申请单位"
+              disabled
+            >
+              <el-option
+                label="区域一"
+                value="shanghai"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="申请部门：">
+            <el-select
+              v-model="formInline.depment"
+              placeholder="请选择申请部门"
+              disabled
+            >
+              <el-option
+                label="区域一"
+                value="shanghai"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="申请人：">
+            <el-input
+              v-model="formInline.applyer"
+              placeholder="请输入申请人"
+              disabled
+            ></el-input>
+          </el-form-item>
+          <!-- <el-form-item label="经办人：">
+            <el-input
+              v-model="formInline.agent"
+              placeholder="请输入经办人"
+              disabled
+            ></el-input>
+          </el-form-item> -->
+        </el-form>
+        <ele-form
+          class="design"
+          :formDesc="formDesc"
+          v-model="formData"
+          :isLoading="isLoading"
+          @request="handleRequest"
+          v-bind="formAttr"
+        >
+        </ele-form>
+      </div>
+      <div>
+        <table-list
+          :tableData="tableData"
+          :tableConfig="tableConfig"
+          :buttons="buttons"
+          @handleButton="(e) => e.func(e.row)"
+        ></table-list>
+      </div>
+      <div class="btn-grounp">
+        <el-button
+          size="small"
+          type="primary"
+          icon="el-icon-upload2"
+          @click="save"
+        >保存</el-button>
+      </div>
+    </div>
+    <div class="tab_right">
+      <h4>字段设置</h4>
+      <div>
+        <div class="condition">
+          <span>查询条件</span>
+          <el-popover
+            placement="bottom"
+            width="150"
+            trigger="click"
+          >
+            <el-checkbox-group
+              v-if="Object.keys(customForm).length > 0"
+              class="condition-list"
+              v-model="checkList"
+              @change="checkChange"
+            >
+              <el-checkbox
+                v-for="(item, index) in customForm"
+                :label="item.field"
+                :title='item.label'
+                :key="index"
+              >{{item.label}}</el-checkbox>
+            </el-checkbox-group>
+            <span
+              class="nothing"
+              v-else
+            >暂无可选择的查询条件</span>
+            <i
+              slot="reference"
+              class="el-icon-plus"
+            ></i>
+          </el-popover>
+        </div>
+        <ul class='queryList'>
+          <li
+            v-for="(item, index) in conditions"
+            :key="index"
+          >
+            <span>{{ item.name }}</span>
+          </li>
+          <li
+            v-for="(item, key) in formDesc"
+            :key="key"
+          >
+            <span>{{ item.label }}</span>
+            <i
+              class="el-icon-delete"
+              @click="deleteCond(key)"
+            ></i>
+          </li>
+        </ul>
+      </div>
+      <div>
+        <div class="condition">
+          <span>列表字段</span>
+          <!-- <el-checkbox class="all-check" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
+        </div>
+        <el-checkbox-group
+          class="field-list"
+          v-model="checkHeader"
+          @change="headerCheckChange"
+        >
+          <template v-for="(item, index) in listHeader">
+            <template v-if="item.type != 'custom-table'">
+              <el-checkbox
+                :label="item.label == '数据标题'?item.field+'title' :item.field"
+                :key="index"
+                :title="item.label"
+                :disabled="item.label == '数据标题' || isTitle(item.field)"
+              >{{ item.label }}</el-checkbox>
+            </template>
+            <template v-else>
+              <div
+                :key="item.field + 'ind'"
+                style="height: 30px; line-height:30px; font-size:16px"
+              >
+                {{ item.label }}
+              </div>
+              <div
+                class="sub-form"
+                :key="item.field + 'in'"
+              >
+                <template v-for="(i, ind) in item.attrs.columns">
+                  <el-checkbox
+                    v-if="i.content"
+                    :label="item.field + ':' + i.content.field"
+                    :key="i.content.field + ind"
+                  >{{ i.content.label }}</el-checkbox>
+                </template>
+              </div>
+            </template>
+          </template>
+        </el-checkbox-group>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import tableList from "./tableList";
+import _, { indexOf } from "lodash-es";
+import formAttrDefault from "@/store/formBuilder/formAttrDefault";
+import { mapGetters, mapMutations, mapState } from "vuex";
+import {
+  saveListdesign,
+  updateListdesign,
+  queryListdesign,
+  deleteListdesign
+} from "@/api/apiFormBuilder/menu";
+export default {
+  name: "",
+  mixins: [],
+  extends: {},
+  components: {
+    tableList
+  },
+  props: {},
+  data() {
+    return {
+      formInline: {
+        company: "",
+        depment: "",
+        applyer: "",
+        agent: ""
+      },
+      formDesc: {},
+      formData: {},
+      isLoading: false,
+      tableData: [1],
+      tableConfig: [],
+      conditions: [
+        { name: "申请单位" },
+        { name: "申请部门" },
+        { name: "申请人" }
+        // { name: "经办人" }
+      ],
+      checkList: [],
+      isIndeterminate: true,
+      checkAll: false,
+      checkHeader: [],
+      id: "",
+      buttons: [
+        {
+          name: "查看",
+          func: e => {
+            console.log(e);
+          },
+          event: "handleButton"
+        }
+        // {
+        //   name: '删除',
+        //   func: (e)=>{console.log(e)},
+        //   event: 'handleButton'
+        // }
+      ]
+    };
+  },
+  watch: {
+    formBuilder: {
+      deep: true,
+      handler: function(newVal) {
+        if (newVal && newVal.formDesId) {
+          // this.getConfig(newVal);
+        }
+      }
+    },
+    tableConfig: {
+      deep: true,
+      immediate: true,
+      handler: function(newVal, oldVal) {
+        const vm = this;
+        if (newVal.length <= 0) {
+          const data = [];
+          vm.listHeader.forEach(item => {
+            if (item.type != "custom-table" && item.label == "数据标题") {
+              //   if () {
+              //   }
+              var dd = _.find(vm.tableConfig, function(o) {
+                return o.label != "数据标题";
+              });
+              vm.tableConfig.push({ label: item.label, prop: item.field });
+              if (vm.$store.state.formAttr.title.length <= 1) {
+                vm.checkHeader.push(item.field + "title");
+              } else {
+                vm.checkHeader.push(item.field);
+              }
+            } else if (
+              item.type != "custom-table" &&
+              item.label != "数据标题"
+            ) {
+              vm.tableConfig.push({ label: item.label, prop: item.field });
+              vm.checkHeader.push(item.field);
+            }
+          });
+          //   vm.$store.state.formAttr.title.forEach(e => {
+          //     if (vm.checkHeader.indexOf(e) == -1) {
+          //       vm.checkHeader.push(e);
+          //     }
+          //     vm.headerCheckChange(e);
+          //   });
+          //   this.tableConfig = data;
+        } else {
+          //   const arrStr = this.getCurrentTitleArr.join(",")
+          //   if (this.getCurrentTitleArr.length >= 1) {
+          //     vm.checkHeader.push(arrStr)
+          //   }
+        }
+      }
+    },
+    customForm: {
+      deep: true,
+      handler: function(newVal, oldVal) {
+        this.$nextTick(() => {
+          const arr = Object.keys(newVal);
+          for (const name in this.formDesc) {
+            if (arr.indexOf(name) < 0) {
+              delete this.formDesc[name];
+            }
+          }
+          this.formDesc = Object.assign({}, this.formDesc);
+          this.checkList = this.checkList.filter(
+            item => arr.indexOf(item) > -1
+          );
+        });
+      }
+    },
+    listHeader: {
+      deep: true,
+      handler: function(newVal, oldVal) {
+        this.$nextTick(() => {
+          const arr = newVal.map(item => item.field);
+          this.tableConfig = this.tableConfig.filter(
+            item => arr.indexOf(item.prop) > -1
+          );
+          this.checkHeader = this.checkHeader.filter(
+            item => arr.indexOf(item) > -1
+          );
+          this.checkAll =
+            arr.length > 0 && arr.length === this.checkHeader.length;
+          this.isIndeterminate = !this.checkAll;
+        });
+      }
+    },
+    getCurrentTitleArr: {
+      deep: true,
+      handler: function(newVal, oldVal) {
+        const vm = this;
+        vm.checkHeader.splice(0, 1);
+        vm.checkHeader.unshift(newVal.join(","));
+        vm.listHeader.forEach(item => {
+          if (item.type != "custom-table" && item.label == "数据标题") {
+            vm.tableConfig.unshift({ label: item.label, prop: item.field });
+          }
+        });
+        // });
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(["getCurrentTitleArr"]),
+    formAttr() {
+      return Object.assign({}, formAttrDefault, {
+        submitBtnText: "查询",
+        resetBtnText: "重置",
+        isShowSubmitBtn: true,
+        isShowResetBtn: true,
+        inline: true
+      });
+    },
+    // 查询条件-字段
+    customForm() {
+      const type = [
+        "input",
+        "select",
+        "date",
+        "daterange",
+        "time",
+        "datetime",
+        "input-number",
+        "datetimerange",
+        "timerange",
+        "radio",
+        "checkbox"
+      ];
+      const list = this.$store.state.list.default;
+      const con = this.getCuston(list, type);
+      return _.keyBy(con, "field");
+    },
+    // 列表字段-字段
+    listHeader() {
+      const type = [
+        "input",
+        "select",
+        "date",
+        "datetime",
+        "daterange",
+        "datetimerange",
+        "time",
+        "timerange",
+        "radio",
+        "checkbox",
+        "textarea",
+        "custom-table"
+      ]; //, 'custom-table'
+      const list = this.$store.state.list.default;
+      const con = this.getCuston(list, type);
+
+      con.unshift({
+        label: "数据标题",
+        type: "input",
+        error: false,
+        attrs: {
+          size: null,
+          type: "text",
+          showWordLimit: false,
+          clearable: false,
+          autofocus: false,
+          validateEvent: true,
+          summary: "我我我",
+          field: this.$store.state.formAttr.title
+            ? this.$store.state.formAttr.title
+            : {}
+        },
+        field: this.$store.state.formAttr.title
+          ? this.$store.state.formAttr.title.join(",")
+          : {}
+      });
+
+      return con;
+    },
+    // 菜单，表单信息
+    formBuilder() {
+      return this.$store.state.formBuilder;
+    },
+    user() {
+      return this.$store.state.user;
+    },
+    // 是否数据标题
+    isTitle() {
+      return function(x) {
+        return _.includes(this.$store.state.formAttr.title, x);
+      };
+    }
+  },
+  methods: {
+    getCuston(list, type) {
+      const lists = list.filter(item => type.indexOf(item.type) > -1);
+      let condition = [];
+      const layout = list.filter(item => item.type.indexOf("columns") > -1);
+      if (layout.length > 0) {
+        layout.forEach(i => {
+          const arr = i.attrs.columns.length
+            ? i.attrs.columns.filter(item => type.indexOf(item.type) > -1)
+            : [];
+          condition = arr.length > 0 ? condition.concat(arr) : condition;
+        });
+      }
+      condition = condition.concat(_.cloneDeep(lists));
+      return condition;
+    },
+    handleRequest() {},
+    // 选择条件选中
+    checkChange(val) {
+      const json = {};
+      val.forEach(item => {
+        json[item] = this.customForm[item];
+        if (json[item].required) {
+          json[item].required = false;
+        }
+      });
+      this.formDesc = json;
+      const tableConfigKey = this.tableConfig.map(item => item.prop);
+      val.forEach(item => {
+        if (tableConfigKey.indexOf(item) == -1) {
+          this.tableConfig.push({ label: json[item].label, prop: item });
+          this.checkHeader.push(item);
+        }
+      });
+    },
+    // 删除选中的条件
+    deleteCond(key) {
+      const json = this.formDesc;
+      delete json[key];
+      this.checkList = this.checkList.filter(item => item != key);
+      this.formDesc = assign({}, json);
+    },
+    // 列表显示字段全选
+    handleCheckAllChange(val) {
+      this.isIndeterminate = !val;
+      if (val) {
+        this.checkHeader = this.listHeader.map(item => item.field);
+        this.tableConfig = this.listHeader.map(item => ({
+          label: item.label,
+          prop: item.field
+        }));
+      } else {
+        this.checkHeader = [];
+        this.tableConfig = [];
+      }
+    },
+    // 列表选择
+    headerCheckChange(value) {
+      var data = [];
+      this.listHeader.forEach(item => {
+        if (item.label == "数据标题") {
+          if (data.indexOf(item.label) == -1) {
+            data.push({ label: item.label, prop: item.field });
+          }
+        }
+        if (item.type != "custom-table" && value.indexOf(item.field) > -1) {
+          data.push({ label: item.label, prop: item.field });
+        } else if (item.type == "custom-table") {
+          const child = [];
+          item.attrs.columns.forEach((i, index) => {
+            const key = i.content ? item.field + ":" + i.content.field : "0";
+            if (value.indexOf(key) > -1 && i.type != "index") {
+              child.push({ label: i.content.label, prop: i.content.field });
+            }
+          });
+          if (child.length > 0) {
+            data.push({ label: item.label, prop: item.field, children: child });
+          }
+        }
+      });
+      data = _.uniqWith(data, _.isEqual);
+      this.tableConfig = data;
+    },
+    // 保存
+    async save() {
+      if (!this.formBuilder.formDesId) {
+        this.$message.error({
+          message: "请先保存表单设计信息",
+          duration: 1500
+        });
+        return;
+      }
+
+      let data = { formDesc: this.formDesc, tableConfig: this.tableConfig };
+      for (let i = 0; i < this.tableConfig.length; i++) {
+        const e = this.tableConfig[i];
+        if (e.label == "数据标题" && !e.prop) {
+          this.$message.error({
+            message: "请先选择表单设计中的数据标题",
+            duration: 3000
+          });
+          return;
+        }
+      }
+      data = JSON.stringify(data);
+      const parse = {
+        content: data,
+        companyNo: this.user.cno,
+        menuId: this.formBuilder.menuId,
+        formId: this.formBuilder.formDesId
+      };
+      let res;
+      if (this.id) {
+        parse.id = this.id;
+        res = await updateListdesign(parse);
+      } else {
+        res = await saveListdesign(parse);
+      }
+      if (res.data.state == "ok") {
+        this.$message.success({ message: res.data.msg, duration: 1500 });
+        this.id = this.id ? this.id : res.data.data;
+      } else {
+        this.$message.error({
+          message: res.data.msg ? res.data.msg : "保存失败",
+          duration: 1500
+        });
+      }
+    },
+    // 获取表单对应列表配置
+    async getConfig(newVal) {
+      const parse = {
+        companyNo: this.user.cno,
+        menuId: this.formBuilder.menuId,
+        formId: this.formBuilder.formDesId
+      };
+      const res = await queryListdesign(parse);
+      if (res.data.state == "ok" && res.data.data.content) {
+        const content = res.data.data.content;
+        this.formDesc = content.formDesc;
+        this.checkList = Object.keys(this.formDesc);
+        const checkHeader = [];
+        let fields = [];
+        this.$store.state.list.default.forEach(j => {
+          if (j.type.indexOf("columns") > -1) {
+            const arr = j.attrs.columns.map(i => i.field);
+            fields = fields.concat(arr);
+          } else {
+            fields.push(j.field);
+          }
+        });
+        const tableConfig = [];
+        // 筛选报存的列表设计字段，是否在表单设计中删除
+        content.tableConfig.forEach(item => {
+          if (item.label == "数据标题") {
+            tableConfig.push(item);
+            checkHeader.push(item.prop);
+          }
+          if (fields.indexOf(item.prop) == -1) {
+            return;
+          } else if (item.children) {
+            const arr = [];
+            item.children.forEach(i => {
+              checkHeader.push(item.prop + ":" + i.prop);
+            });
+            tableConfig.push(item);
+            return;
+          } else {
+            tableConfig.push(item);
+            checkHeader.push(item.prop);
+          }
+        });
+        this.checkHeader = checkHeader;
+        this.tableConfig = tableConfig;
+
+        this.id = res.data.data.id;
+        debugger;
+        this.$nextTick(() => {
+          this.checkAll =
+            this.listHeader.length > 0 &&
+            this.listHeader.length === this.checkHeader.length;
+          this.isIndeterminate = !this.checkAll;
+        });
+      } else {
+        this.formDesc = {};
+        this.tableConfig = [];
+        this.id = "";
+      }
+    }
+  },
+  created() {
+    this.getConfig()
+    // const vm = this;
+    // vm.$store.state.formAttr.title.forEach(e => {
+    //   if (vm.checkHeader.indexOf(e) == -1) {
+    //     vm.checkHeader.push(e);
+    //   }
+    //   vm.headerCheckChange(e);
+    // });
+  },
+  mounted() {}
+};
+</script>
+<style lang="scss" scoped>
+/deep/ .ele-form-btns {
+  /deep/ .el-button--default {
+    color: #409eff;
+    border-color: #c6e2ff;
+    // background-color: #ecf5ff;
+  }
+}
+.el-checkbox-group {
+  /deep/ .el-checkbox__label {
+    font-size: 14px;
+    font-weight: 400;
+    color: #666666;
+  }
+}
+.queryList {
+  span {
+    font-size: 14px;
+    font-weight: 400;
+    color: #666666;
+  }
+}
+.condition-list {
+  /deep/ .el-checkbox__label {
+    width: 100px !important;
+  }
+}
+.wrapper {
+  height: 100%;
+  background-color: #f5f5f5;
+  display: flex;
+  padding-top: 10px;
+  .tab_left {
+    position: relative;
+    flex: 1;
+    background-color: #fff;
+    padding: 20px 10px 10px 20px;
+    & > div {
+      margin-bottom: 20px;
+    }
+    .search-btn {
+      text-align: right;
+    }
+    .btn-grounp {
+      position: fixed;
+      /* left: 0; */
+      right: 13px;
+      top: 1px;
+      z-index: 2;
+      /* bottom: 38px; */
+      /* height: 56px; */
+      /* background-color: #ebeef5; */
+      text-align: center;
+    }
+  }
+  .tab_right {
+    width: 280px;
+    margin-left: 10px;
+    background-color: #fff;
+    padding: 20px 20px 60px 20px;
+    overflow: auto;
+    h4 {
+      margin: 0;
+      color: #409eff;
+      text-align: center;
+      margin-bottom: 10px;
+      font-size: 18px;
+      font-weight: 400;
+    }
+    ul {
+      margin: 0;
+      padding: 6px 10px;
+      li {
+        padding: 6px 10px;
+        display: flex;
+        justify-content: space-between;
+        &:hover {
+          background-color: rgba(30, 101, 255, 0.05);
+          i {
+            display: block;
+          }
+        }
+        i {
+          cursor: pointer;
+          display: none;
+        }
+      }
+    }
+    .condition {
+      display: flex;
+      justify-content: space-between;
+      & > span {
+        font-weight: 600;
+      }
+    }
+    .field-list {
+      padding: 8px 0 20px 10px;
+      overflow: auto;
+      .sub-form {
+        padding-left: 20px;
+      }
+    }
+  }
+  /deep/ .is-justify-center.el-row--flex > .el-col {
+    width: 100% !important;
+  }
+  /deep/ .el-form .el-row .el-col {
+    width: 33% !important;
+  }
+}
+/deep/ .el-checkbox {
+  display: block;
+  padding: 4px 10px;
+  //   font-size: 16px;
+  margin: 0;
+  &:hover {
+    background-color: rgba(30, 101, 255, 0.05);
+  }
+}
+/deep/ .el-checkbox__input {
+  float: right;
+}
+/deep/ .el-checkbox__label {
+  width: 200px;
+  padding: 0;
+  font-size: 16px;
+  color: #000;
+  overflow: hidden; //超出的文本隐藏
+  text-overflow: ellipsis; //溢出用省略号显示
+  white-space: nowrap; //溢出不换行
+}
+/deep/ .all-check {
+  margin-right: 10px;
+  .el-checkbox__label {
+    float: left;
+    margin-right: 16px;
+  }
+}
+.nothing {
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+}
+.el-icon-plus {
+  cursor: pointer;
+}
+/deep/ .btn-grounp .el-button {
+  margin-top: 8px;
+}
+</style>