qgb-process 0.1.52 → 0.1.53

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

@@ -1,772 +0,0 @@
-<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>