qgb-process 0.2.3 → 0.2.7

package/src/formBuilder/component/components/purchaseIndex.vue

@@ -1,1109 +1,1109 @@
-<template>
-  <div class="wrapper">
-    <div class="opt">
-      <el-button
-        v-if="!edit"
-        @click="addValue"
-      >添加</el-button>
-    </div>
-    <div class="tables">
-      <el-tooltip
-        content="从左侧拖拽来添加字段"
-        placement="top"
-        :disabled="!edit"
-      >
-        <div class="tables-sub">
-          <div
-            class="parts"
-            v-for="(val,indexs) in computedValue"
-            :key="indexs"
-          >
-            <!-- <div class="msg " v-if="edit">从左侧拖拽来添加字段</div> -->
-            <draggable
-              :animation="200"
-              :disabled="!edit"
-              :list="columns"
-              ghost-class="ghost"
-              @add="handleAdd"
-              @end="handleMoveEnd"
-              @start="handleMoveStart"
-              :group="{ name: 'form', pull: false, put: true}"
-              style="display: flex;"
-              filter='.nodraggable'
-            >
-
-              <template v-for="(item,index) in columnsValue">
-                <div
-                  class="botom"
-                  :class="{'form-item-active': (selSubIndex != null && selSubIndex == index && edit && list[activeFormName][selectIndex].field == desc.field),'disoption': edit,'nodraggable': !item.isFlex}"
-                  :key="index+1"
-                  v-show="isShowTag(val,item)"
-                  @click.stop="handleFormItemClick(item,index)"
-                >
-                  <template v-if="item.content">
-                    <el-form-item>
-                      <component
-                        v-if="item.content.type "
-                        :desc="item.content"
-                        :is="item.content.type"
-                        :options="setItemOption(item,index,indexs)"
-                        v-bind="getAttrs(item.content)"
-                        v-model="val[item.prop]"
-                        v-on="item.content.on"
-                        :class="{'over-height': item.prop == 'category'}"
-                        :ref="item.prop+indexs"
-                      >
-                      </component>
-                      <!-- <el-select
-                        v-model="value"
-                        v-else-if="item.content.field == 'brand'"
-                        :placeholder="'请选择'+item.content.label"
-                      >
-                        <el-option-group
-                          v-for="group in item.content.options"
-                          :key="group.value"
-                          :label="group.text"
-                        >
-                          <el-option
-                            v-for="item in group.options"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                          >
-                          </el-option>
-                        </el-option-group>
-                      </el-select> -->
-                      <!-- <el-select
-                        v-model="val[item.prop]"
-                        :placeholder="'请选择'+item.content.label"
-                        :multiple="item.content.attrs.multiple"
-                        v-else
-                      >
-                        <el-option
-                          v-for="item2 in item.content.options"
-                          :key="item2.value"
-                          :label="item2.text"
-                          :value="item2.value"
-                        >
-                        </el-option>
-                      </el-select> -->
-                    </el-form-item>
-                  </template>
-                  <!-- 复制按钮 -->
-                  <template v-if="item.isFlex">
-                    <!-- <el-button
-                      @click.stop="handleCopy(index)"
-                      class="form-item-copy-btn"
-                      icon="el-icon-document-copy"
-                      size="mini"
-                      style="border-radius: 0"
-                      type="primary"
-                      v-if="selSubIndex != null && selSubIndex === index && edit && list[activeFormName][selectIndex].field == desc.field"
-                    >
-                    </el-button> -->
-                    <!-- 删除按钮 -->
-                    <el-button
-                      @click.stop="handleDelete(index)"
-                      class="form-item-delete-btn"
-                      icon="el-icon-delete"
-                      size="mini"
-                      style="border-radius: 0"
-                      type="primary"
-                      v-if="selSubIndex != null && selSubIndex === index && edit && list[activeFormName][selectIndex].field == desc.field"
-                    >
-                    </el-button>
-                  </template>
-                </div>
-                <!-- TODO: 多选后如果有自定义选项 则渲染在选择项后方 -->
-                <template v-if="propertyList[indexs] && propertyList[indexs].length && item.prop =='goodType'">
-                  <div
-                    class="botom"
-                    v-for="(pro,j) in propertyList[indexs]"
-                    :key="'pro'+j"
-                  >
-                    <el-form-item>
-
-                      <component
-                        :desc="{label: pro.name,on: {'change': (val)=>{setProStr(val,pro,indexs)}}}"
-                        :is="pro.key == 0 ? 'ele-form-input' : 'ele-form-select'"
-                        :options="propertyList[indexs][j].data"
-                        v-model="val['pro-'+pro.propertyId]"
-                      >
-                      </component>
-                    </el-form-item>
-                    <span
-                      style="padding-left: 4px; word-break: keep-all;"
-                      v-if="pro.unit"
-                    >{{pro.unit}}</span>
-
-                  </div>
-                </template>
-              </template>
-
-              <!-- TODO: 这里暂放市场参考字段 -->
-              <!-- <div class="msg nodraggable">市场参考：</div> -->
-              <div
-                class="msg nodraggable"
-                v-if="columnsValue.length === 0"
-              >暂未添加字段</div>
-              <div
-                class="msg nodraggable"
-                v-if="columnsValue.length > 0 &&  edit"
-              > </div>
-              <div
-                class="botom"
-                v-if="!edit"
-              >
-                <el-button
-                  type="text"
-                  @click="deteleVal(indexs)"
-                >删除</el-button>
-              </div>
-            </draggable>
-          </div>
-        </div>
-      </el-tooltip>
-    </div>
-
-  </div>
-</template>
-
-<script>
-import * as _ from "lodash";
-// import draggable from "vuedraggable";
-
-const draggable = () => ({
-  // 需要加载的组件 (应该是一个 `Promise` 对象)
-  component: import("vuedraggable"),
-  // 异步组件加载时使用的组件
-  loading: "",
-  // 加载失败时使用的组件
-  error: "",
-  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
-  delay: 200,
-  // 如果提供了超时时间且组件加载也超时了，
-  // 则使用加载失败时使用的组件。默认值是：`Infinity`
-  timeout: 3000
-});
-import { mapGetters, mapMutations, mapState } from "vuex";
-import {
-  getGooodsType,
-  getGooodsBrand,
-  getMachineryList,
-  getMachineryType,
-  getEquipmentList,
-  getUnitListData,
-  getGooodsProperty,
-  concreteStrongAll,
-  concreteAdmixtureAll,
-  getMechanicsAttr,
-  getEquipProp,
-  modelSelect,
-  brandSelect,
-  gearboxSelect,
-  gethouseType,
-  getTeamCategory
-} from "@/formBuilder/apiBusiness.js";
-import columnsVue from "../../components/app-main/components/components/columns.vue";
-// import { requesTypeOptions } from "../../../views/CustomerManagement/MemberChance/mock";
-import itemOptionVue from "../../components/app-main/components/components/itemOption.vue";
-import { isArraysEqual } from "@fullcalendar/core";
-import { carSeating, driveModel, carYear } from "./data";
-export default {
-  name: "Purchase",
-  extends: {},
-  components: {
-    draggable
-  },
-  props: {
-    value: {
-      type: Array,
-      default: () => []
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    desc: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    edit: {
-      type: Boolean,
-      default: () => false
-    }
-  },
-  data() {
-    return {
-      // 商品分类
-      goodsOption: [],
-      Mechanics: [],
-      equipment: [],
-      team: [],
-      bidding: [],
-      biddingType: [
-        { text: "商品/材料", value: "3" },
-        { text: "工程分包", value: "4" },
-        { text: "机械设备租赁", value: "1" },
-        { text: "劳务", value: "2" }
-      ],
-      // 自定义属性
-      muster: {
-        brand: []
-      },
-      unitList: [],
-      propertyList: [],
-      strength: [],
-      admixture: [],
-      // 车辆信息
-      carModel: [],
-      carBrand: [],
-      carGearbox: [],
-      carSeating: carSeating,
-      driveModel: driveModel,
-      carYear: carYear(),
-      houseType: [],
-      category: []
-    };
-  },
-  computed: {
-    ...mapState(["selSubIndex", "activeFormName", "list", "selectIndex"]),
-    ...mapGetters(["currentFormItem"]),
-    computedValue: function() {
-      if (this.value.length > 0) {
-        return this.value;
-      } else {
-        const type = ["checkbox", "datetimerange", "cascader"];
-        const arr = {};
-        this.columns.forEach(item => {
-          if (item.prop) {
-            const typeStr = item.content.type.replace("ele-form-", "");
-            arr[item.prop] = type.indexOf(typeStr) > -1 ? [] : "";
-          }
-        });
-        return [arr];
-      }
-    },
-    draggableColumns() {
-      return this.columns;
-    },
-    columnsValue() {
-      return _.cloneDeep(this.columns);
-    }
-  },
-  methods: {
-    ...mapMutations(["updateSelSubIndex", "updateSelectIndex", "updateList"]),
-    isShowTag(val, item) {
-      if (item.content && item.content.vif && Array.isArray(item.content.vif)) {
-        const node = item.isLink ? item.isLink : "leaseType";
-        return item.content.vif.indexOf(val[node]) > -1;
-      } else {
-        return true;
-      }
-    },
-    setProStr(val, pro, j) {
-      if (!val) return;
-      const name =
-        pro.key == 1 && pro.data.length > 0
-          ? pro.data.filter(item => item.value == val)[0].text
-          : val;
-      this.value[j]["pro-" + pro.propertyId + "-Str"] = {
-        value: name,
-        property: pro.name,
-        unit: pro.unit
-      };
-      this.$emit("input", this.value);
-    },
-    setValue(prop, index) {
-      if (prop) {
-        const val = this.value.filter(item => item[prop]);
-        return val[0][prop];
-      } else {
-        return index + 1;
-      }
-    },
-    getAttrs(item) {
-      return Object.assign({}, item.attrs);
-    },
-    // option设置
-    setItemOption(item, index, indexs) {
-      const arr = [];
-      const vm = this;
-
-      if (!item.content.options) return [];
-      if (item.content.field == "leaseType") {
-        item.content["on"] = {
-          change: newVal => {
-            vm.leaseTypeChange(newVal, item, indexs);
-          }
-        };
-      }
-      if (item.content.options && typeof item.content.options != "string") {
-        return item.content.options;
-      } else {
-        if (item.content.types) {
-          //   vm.$nextTick(function() {
-          item.content["on"] = {
-            change: async newVal => {
-              await vm.handleChange(newVal, item, indexs);
-            }
-          };
-          item["on"] = {
-            change: async newVal => {
-              await vm.handleChange(newVal, item, indexs);
-            }
-          };
-          //   });
-          return vm[item.content.options];
-        } else if (!item.content.types) {
-          item.content["on"] = {
-            change: newVal => {
-              vm.handleChangeOption(newVal, item, indexs);
-            }
-          };
-          const key = item.content.options;
-          !this.muster[key] && this.$set(this.muster, key, []);
-          !this.muster[key][indexs] && this.$set(this.muster[key], indexs, []);
-          return this.muster[key][indexs];
-        }
-      }
-    },
-    // 租赁类型变化
-    leaseTypeChange(newVal, item, indexs) {
-      if (newVal == 1) {
-        this.getMachineryList();
-      } else if (newVal == 2) {
-        this.getEquipmentList();
-      } else if (newVal == 3) {
-        this.initCarInfo();
-      } else if (newVal == 4) {
-        this.getHouse();
-      }
-      Object.keys(this.value[indexs]).forEach(k => {
-        if (k.indexOf("pro-") > -1) {
-          delete this.value[indexs][k];
-        } else if (k != "leaseType") {
-          const type = Array.isArray(this.value[indexs][k]);
-          this.value[indexs][k] = type ? [] : "";
-        }
-      });
-      this.$emit("input", this.value);
-    },
-    // 加载车辆选择框信息
-    async initCarInfo() {
-      if (this.carModel.length == 0) {
-        const res = await modelSelect();
-        this.carModel =
-          res.data.code == 200
-            ? res.data.data.map((item, index) => ({
-              text: item.name,
-              value: item.key
-            }))
-            : [];
-      }
-      if (this.carBrand.length == 0) {
-        const res = await brandSelect();
-        this.carBrand =
-          res.data.code == 200
-            ? res.data.data.map((item, index) => ({
-              text: item.name,
-              value: item.key
-            }))
-            : [];
-      }
-      if (this.carGearbox.length == 0) {
-        const res = await gearboxSelect();
-        this.carGearbox =
-          res.data.code == 200
-            ? res.data.data.map((item, index) => ({
-              text: item.value,
-              value: item.key
-            }))
-            : [];
-      }
-    },
-    // 父级元素数据发生变化
-    handleChange(val, item, indexs) {
-      // TODO: 在这里进行了点击事件的获取值
-      const vm = this;
-      if (item.content.types == "goods") {
-        const str = this.goodsOption.filter(k => val[0] && k.id == val[0]);
-        if (str[0] && str[0].name == "商砼") {
-          this.getConcrete(val, item, indexs);
-        } else {
-          this.getGooodsBrand(val, item, indexs);
-          this.getGooodsProperty(val, item, indexs);
-        }
-      } else if (item.content.types == "Mechanics") {
-        this.getMachineryType(val, item, indexs);
-      } else if (item.content.types == "equipment") {
-        this.getEquipmentType(val, item, indexs);
-      } else if (item.content.types == "team") {
-        this.setTeamStr(val, item, indexs, "team");
-      } else if (item.content.types == "car") {
-        this.setTeamStr(val, item, indexs, item.prop);
-      } else if (item.content.types == "houseType") {
-        setTimeout(() => {
-          const text = vm.$refs[item.content.field + indexs][0].presentText;
-          vm.value[indexs][item.content.field + "Str"] = text || "";
-          vm.$emit("input", vm.value);
-        }, 200);
-      } else if (item.content.types == "category") {
-        setTimeout(() => {
-          const tags = vm.$refs[item.content.field + indexs][0].presentTags;
-          const text = tags.map ? tags.map((item, index) => item.text) : [];
-          vm.value[indexs][item.content.field + "Str"] = text.join(",");
-          vm.$emit("input", vm.value);
-        }, 200);
-      } else if (item.content.types == "unitList") {
-        vm.setTeamStr(val, item, indexs, "unitList");
-      }
-    },
-    setTeamStr(val, item, indexs, types) {
-      const name = this[types].filter(i => i.value == val);
-      this.value[indexs][item.content.field + "Str"] = name[0]
-        ? name[0].text
-        : "";
-      this.$emit("input", this.value);
-    },
-    // 子级元素发生变化
-    handleChangeOption(newVal, item, indexs) {
-      console.log(newVal, item, indexs);
-      const name = this.muster[item.content.options][indexs].filter(
-        i => i.value == newVal
-      );
-      const nameStr = name[0].text;
-      const key = item.content.field + "Str";
-      this.value[indexs][key] = nameStr;
-      this.$emit("input", this.value);
-      if (item.prop == "classify" || item.prop == "equipClassify") {
-        this.getClassifyPro(newVal, item, indexs);
-      }
-    },
-    // 获取机械自定义属性
-    async getClassifyPro(newVal, item, indexs) {
-      Object.keys(this.value[indexs]).forEach(k => {
-        if (k.indexOf("pro-") > -1) {
-          delete this.value[indexs][k];
-        }
-      });
-      const params = {
-        categoryNo:
-          item.prop == "classify"
-            ? this.value[indexs].Mechanics
-            : this.value[indexs].equipment,
-        typeNo: newVal
-      };
-      const res =
-        item.prop == "classify"
-          ? await getMechanicsAttr(params)
-          : await getEquipProp(params);
-      if (res.data.code == 200) {
-        let propertyList = [];
-        if (item.prop == "classify") {
-          propertyList = res.data.data.map((item, index) => {
-            item.data = item.valList.map(i => ({
-              text: i.startVal,
-              value: i.startVal
-            }));
-            item.propertyId = index;
-            return item;
-          });
-        } else {
-          res.data.data.forEach((item, index) => {
-            item.data = item.valList.map(i => ({ text: i.val, value: i.val }));
-            item.propertyId = index;
-            propertyList.push({
-              name: item.name,
-              propertyId: index,
-              data: item.data,
-              unit: item.unit,
-              key: item.attrKey
-            });
-          });
-        }
-        this.$set(this.propertyList, indexs, propertyList);
-      }
-    },
-    // 点击选中
-    handleFormItemClick(item, index) {
-      if (!this.edit) return;
-      if (item.type != "index") {
-        this.list[this.activeFormName].forEach((i, v) => {
-          if (i.field == this.desc.field) {
-            this.updateSelectIndex(v);
-          }
-        });
-        this.updateSelSubIndex(index);
-      }
-    },
-    // 复制
-    handleCopy(index) {
-      const obj = _.cloneDeep(this.columns[index]);
-      obj.field = `key_${Date.now()}`;
-      this.columns.splice(index + 1, 0, obj);
-      this.setListColumns(this.columns);
-      this.updateSelSubIndex(index + 1);
-    },
-    // 删除
-    handleDelete(index) {
-      this.columns.splice(index, 1);
-      this.setListColumns(this.columns);
-      // 如果删除的最后一个, 则重新选择最后一个
-      if (index >= this.columns.length) {
-        this.updateSelSubIndex(this.columns.length - 1);
-      } else if (index - 1 < 1 && this.columns > 1) {
-        this.updateSelSubIndex(1);
-      } else {
-        this.updateSelSubIndex(null);
-      }
-    },
-    // 新增
-
-    handleAdd(res) {
-      const vm = this;
-      if (!this.columns[res.newIndex]) {
-        res.newIndex = this.columns.length - 1;
-      }
-      // if (!this.columns[res.newIndex].type) {
-      //   this.$message.error("业务组件字段请添加至最右侧");
-      //   return;
-      // }
-      if (
-        this.columns[res.newIndex].type &&
-        (this.columns[res.newIndex].type.indexOf("custom-table") > -1 ||
-          this.columns[res.newIndex].type.indexOf("columns") > -1 ||
-          this.columns[res.newIndex].type.indexOf("quill-editor") > -1)
-      ) {
-        this.$message.error("不支持添加此类型控件，请添加其他类型控件");
-        this.columns.splice(res.newIndex, 1);
-        return;
-      }
-      // let obj = this.columns[res.newIndex].type?this.columns[res.newIndex]:this.columns[res.newIndex+1] ;
-      const obj = this.columns[res.newIndex];
-      let content = {};
-      // 如果是单选框 多选框 进入表格 则添加下拉框
-      if (obj.type && (obj.type === "radio" || obj.type === "checkbox")) {
-        if (obj.type === "checkbox") {
-          obj.attrs["multiple"] = true;
-        }
-        obj.type = "ele-form-select";
-        content = obj;
-        this.columns[res.newIndex] = {
-          prop: obj.field,
-          label: obj.label,
-          isFlex: true,
-          content: content
-        };
-      }
-      // if (!obj.type) {
-      vm.columns.map((e, i) => {
-        if (e.field) {
-          e.type = "ele-form-" + e.type;
-          this.columns[i] = {
-            prop: e.field,
-            label: e.label,
-            isFlex: true,
-            content: e
-          };
-        }
-        if (e.type === "ele-form-radio" || e.type === "ele-form-checkbox") {
-          if (e.type === "ele-form-checkbox") {
-            e.attrs["multiple"] = true;
-          }
-          e.type = "ele-form-select";
-        }
-      });
-      // }
-      this.setListColumns(this.columns);
-      this.list[this.activeFormName].forEach((i, v) => {
-        if (i.field == vm.desc.field) {
-          this.updateSelectIndex(v);
-        }
-      });
-      this.updateSelSubIndex(res.newIndex);
-    },
-
-    // 移动开始
-    handleMoveStart(res) {
-      this.updateSelSubIndex(res.oldIndex);
-    },
-    // 移动结束
-    handleMoveEnd(res) {
-      const columns = this.columns.filter(item => !item.isFlex);
-      if (res.newIndex < columns.length) {
-        return false;
-      }
-      this.setListColumns(this.columns);
-      this.updateSelSubIndex(res.newIndex);
-    },
-    setListColumns(columns) {
-      const vm = this;
-      const list = _.cloneDeep(this.list);
-      list[vm.activeFormName].forEach(item => {
-        if (item.field == vm.desc.field) {
-          item.attrs.columns = columns;
-        }
-      });
-      vm.updateList({
-        name: vm.activeFormName,
-        newList: list[vm.activeFormName]
-      });
-    },
-    addValue() {
-      const type = ["checkbox", "datetimerange", "cascader"];
-
-      const obj = {};
-      this.columns.forEach(item => {
-        if (item.prop) {
-          const typeStr = item.content.type.replace("ele-form-", "");
-          obj[item.prop] = type.indexOf(typeStr) > -1 ? [] : "";
-        }
-      });
-      this.value.push(obj);
-      this.$emit("input", this.value);
-    },
-    deteleVal(index) {
-      if (this.value.length < 2) {
-        this.$message.error("至少保留一条数据");
-        return;
-      }
-      Object.keys(this.muster).forEach(item => {
-        this.muster[item].splice(index, 1);
-      });
-      this.propertyList.splice(index, 1);
-      this.value.splice(index, 1);
-      this.$emit("input", this.value);
-    },
-    // 房产分类
-    async getHouse() {
-      if (this.houseType.length == 0) {
-        const res = await gethouseType({ type: 0 });
-        this.houseType = res.data.code == 200 ? res.data.data : [];
-      }
-    },
-    // 商品分类
-    async getGooodsType() {
-      const res = await getGooodsType({ type: "purchase" });
-      if (res.status == 200) {
-        this.goodsOption = this.formatChildData(res.data);
-      }
-    },
-    formatChildData(data) {
-      data.forEach((item, index) => {
-        if (item.children && item.children.length > 0) {
-          return this.formatChildData(item.children);
-        } else {
-          delete item.children;
-        }
-      });
-      return data;
-    },
-    // 商品品牌
-    async getGooodsBrand(val, item, indexs, flg) {
-      let value = [];
-      const vm = this;
-      const key = item.content.link;
-      if (!flg) {
-        vm.value[indexs].brand = "";
-        vm.value[indexs].brandStr = "";
-        setTimeout(() => {
-          const text =
-            vm.$refs[item.content.field + indexs][0].$refs.input.value;
-          vm.value[indexs][item.content.field + "Str"] = text || "";
-          vm.$emit("input", vm.value);
-        }, 100);
-      }
-      const data = val[val.length - 1];
-      if (!data) return;
-      const res = await getGooodsBrand(data, indexs);
-      if (res.data.code == 0) {
-        value = res.data.data.reduce(
-          (total, currentValue) => total.concat(currentValue.options),
-          []
-        );
-        value = value.map(i => ({ text: i.brandName, value: i.id }));
-      }
-
-      vm.$set(vm.muster[key], indexs, value);
-    },
-    // 商品属性
-    async getGooodsProperty(val, item, indexs, flg) {
-      const id = val[val.length - 1];
-      if (!id) return;
-      if (!flg) {
-        Object.keys(this.value[indexs]).forEach(k => {
-          if (k.indexOf("pro-") > -1) {
-            delete this.value[indexs][k];
-          }
-        });
-        this.$emit("input", this.value);
-      }
-      const res = await getGooodsProperty(id, indexs);
-      if (res.data.code == 0) {
-        const list = res.data.data;
-        const propertyList = []; // 商品属性列表
-        for (let i = 0; i < list.length; i++) {
-          if (list[i].itemparamname === "仓储") {
-            continue;
-          }
-          let flag = true;
-          for (let j = 0; j < propertyList.length; j++) {
-            // 去重 合并属性名相同的项
-            if (propertyList[j].name === list[i].itemparamname) {
-              propertyList[j].data.push({
-                text: list[i].valdata,
-                value: list[i].id
-              });
-              flag = false;
-              break;
-            }
-          }
-          if (flag) {
-            // 非重复 添加商品属性和id
-            const obj = {
-              name: list[i].itemparamname,
-              data: [],
-              key: 1
-            };
-            obj.data.push({ text: list[i].valdata, value: list[i].id });
-            obj.propertyId = list[i].itemparamid;
-            propertyList.push(obj);
-          }
-        }
-        this.$set(this.propertyList, indexs, propertyList);
-      } else {
-        this.$set(this.propertyList, indexs, []);
-      }
-    },
-    // 商砼属性
-    async getConcrete(val, item, indexs, flg) {
-      const vm = this;
-      setTimeout(() => {
-        const text = vm.$refs[item.content.field + indexs][0].$refs.input.value;
-        vm.value[indexs][item.content.field + "Str"] = text || "";
-        vm.$emit("input", vm.value);
-      }, 100);
-      if (this.strength.length == 0) {
-        const business = await concreteStrongAll();
-        this.strength = business.data.result.map
-          ? business.data.result.map(i => ({
-            text: i.strongLevel,
-            value: i.sort
-          }))
-          : [];
-      }
-      if (this.admixture.length == 0) {
-        const res = await concreteAdmixtureAll();
-        this.admixture = this.formatData(res.data.result);
-      }
-      if (!flg) {
-        Object.keys(this.value[indexs]).forEach(k => {
-          if (k.indexOf("pro-") > -1) {
-            delete this.value[indexs][k];
-          }
-        });
-        this.$emit("input", this.value);
-      }
-      const propertyList = [];
-      propertyList.push({
-        name: "强度等级",
-        data: this.strength,
-        propertyId: "1",
-        key: 1
-      });
-      propertyList.push({
-        name: "外加剂",
-        data: this.admixture,
-        propertyId: "2",
-        key: 1
-      });
-      this.$set(this.propertyList, indexs, propertyList);
-    },
-    // 数据分组
-    setGroup(arr) {
-      const dataInfo = {};
-      arr.forEach((item, index) => {
-        const { admixtureName, spec } = item;
-        if (!dataInfo[admixtureName]) {
-          dataInfo[admixtureName] = {
-            admixtureName: item.admixtureName,
-            spec: item.admixtureName,
-            children: []
-          };
-        }
-        if (item.spec && item.admixtureName) {
-          dataInfo[admixtureName].children.push({
-            admixtureName: item.admixtureName + "-" + item.spec,
-            spec: item.admixtureName + "-" + item.spec
-          });
-        } else {
-          dataInfo[admixtureName].children = null;
-        }
-      });
-      const list = Object.values(dataInfo);
-      return list;
-    },
-    // 外加剂
-    formatData(data) {
-      return data.map((item, index) => {
-        const name = item.admixtureName + item.spec;
-        return { text: name, value: name };
-      });
-    },
-    // 机械分类
-    async getMachineryList() {
-      const res = await getMachineryList();
-      if (res.data.code == 200) {
-        this.Mechanics = res.data.data.map(item => ({
-          text: item.name,
-          value: item.no
-        }));
-      }
-    },
-    // 机械类型
-    async getMachineryType(val, item, indexs, flg) {
-      let value = [];
-      const key = item.content.link;
-      if (!flg) {
-        const name = this.Mechanics.filter(i => i.value == val);
-        this.value[indexs][item.content.field + "Str"] = name[0]
-          ? name[0].text
-          : "";
-        this.value[indexs].classify = "";
-        this.value[indexs].classifyStr = "";
-        this.$emit("input", this.value);
-      }
-      const res = await getMachineryType({ categoryNo: val }, indexs);
-      if (res.data.code == 200) {
-        value = res.data.data.map(item => ({
-          text: item.name,
-          value: item.no
-        }));
-      }
-      this.$set(this.muster[key], indexs, value);
-    },
-    // 设备分类
-    async getEquipmentList(val, item, indexs) {
-      const res = await getEquipmentList({});
-      if (res.data.code == 200) {
-        this.equipment = res.data.data.map(item => ({
-          text: item.name,
-          value: item.no
-        }));
-      }
-    },
-    // 设备类型
-    async getEquipmentType(val, item, indexs, flg) {
-      let value = [];
-      const key = item.content.link;
-      if (!flg) {
-        const name = this.equipment.filter(i => i.value == val);
-        this.value[indexs][item.content.field + "Str"] = name[0]
-          ? name[0].text
-          : "";
-        this.value[indexs].equipClassify = "";
-        this.value[indexs].equipClassifyStr = "";
-        this.$emit("input", this.value);
-      }
-      const res = await getEquipmentList({ categoryNo: val }, indexs);
-      if (res.data.code == 200) {
-        value = res.data.data.map(item => ({
-          text: item.name,
-          value: item.no
-        }));
-      }
-      this.$set(this.muster[key], indexs, value);
-    },
-    // 获取单位
-    async getUnitList() {
-      const res = await getUnitListData();
-      if (res.data.code == 0) {
-        res.data.data = res.data.data.map(item => ({
-          text: item.name,
-          value: item.id
-        }));
-        this.unitList = res.data.data;
-      }
-    },
-    // 获取团队主营业务
-    async getTeamBusiness() {
-      const res = await getTeamCategory();
-      this.category = res.data && res.data.code == 200 ? res.data.data : [];
-    },
-    init() {
-      if (this.desc.business == "1") {
-        this.getGooodsType();
-        this.getUnitList();
-      } else if (this.desc.business == "2") {
-        this.getMachineryList();
-      } else if (this.desc.business == "4") {
-        this.getTeamBusiness();
-      }
-    }
-  },
-  created() {
-    !this.edit && this.init();
-    setTimeout(() => {
-      if (this.value.length == 0) {
-        this.addValue();
-      }
-    }, 1000);
-    this.getHouse();
-  },
-  mounted() {},
-  watch: {
-    value: {
-      handler(nv, ov) {
-        const vm = this;
-        nv.map((e, i) => {
-          // return {
-          //   Price: e.Price,
-          //   amount: e.amount,
-          //   brand: e.brand,
-          //   goodType: e.goodType,
-          //   total: e.Price * e.amount,
-          //   unit: e.unit,
-          //   unitStr: e.unitStr
-          // }
-          if (!vm.edit && e.Price * e.amount != 0) {
-            vm.$set(vm.value[i], "total", e.Price * e.amount);
-          }
-          vm.$set(vm.value[i], "scck", "市场参考：");
-        });
-      },
-      deep: true
-    }
-  }
-};
-</script>
-<style lang="scss" scoped>
-::-webkit-scrollbar {
-  // width:16px;
-  height: 4px;
-  background-color: #f5f5f5;
-}
-::-webkit-scrollbar-thumb {
-  height: 4px;
-  background: #e4e7ed;
-  border-radius: 2px;
-}
-.wrapper {
-  .tables {
-    margin-top: 20px;
-    // border-left: 1px solid #ebeef5;
-  }
-  .tables-sub {
-    border: 1px solid #ebeef5;
-    // border-right: 1px solid #ebeef5;
-    // border-bottom: 1px solid #ebeef5;
-    min-height: 80px;
-    // width: 100%;
-    overflow: auto;
-    // max-width: 980px;
-    .disoption {
-      &:after {
-        content: " ";
-        display: block;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        position: absolute;
-        z-index: 2;
-        cursor: move;
-      }
-    }
-    .el-icon-remove-outline {
-      font-size: 26px;
-    }
-    .parts {
-      position: relative;
-      text-align: center;
-      .heard {
-        font-weight: 500;
-        height: 40px;
-      }
-      .botom {
-        box-sizing: border-box;
-        // border-bottom: 1px solid #ebeef5;
-        padding: 10px 10px 10px 20px;
-        height: 70px;
-        position: relative;
-        display: flex;
-      }
-    }
-  }
-  .msg {
-    min-width: 200px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #ccc;
-    text-align: center;
-    width: 100%;
-    // border-left: 1px solid #ebeef5;
-    height: 70px;
-  }
-  .form-item-active {
-    border: 1px dashed #409eff !important;
-    background-color: rgba(2, 134, 223, 0.06) !important;
-    position: relative;
-  }
-  /deep/ .el-icon-delete {
-    font-size: 17px !important;
-  }
-  /deep/ .el-icon-document-copy {
-    font-size: 17px !important;
-  }
-  .form-item-delete-btn {
-    background-color: #ff0000;
-    border-color: #ff0000;
-    height: 30px;
-    width: 30px;
-    border-radius: 100% !important;
-    position: absolute;
-    right: 10px;
-    top: -15px;
-    z-index: 3;
-    padding: 4px 6px;
-  }
-  .form-item-copy-btn {
-    position: absolute;
-    height: 30px;
-    width: 30px;
-    border-radius: 100% !important;
-    right: 37px;
-    top: -15px;
-    z-index: 3;
-    margin-right: 10px;
-    padding: 4px 6px;
-  }
-  /deep/ .botom .el-form-item__content > div {
-    display: flex;
-    .el-radio {
-      margin-right: 30px !important;
-    }
-    .el-checkbox {
-      margin-right: 30px !important;
-    }
-  }
-  /deep/ .botom .el-form-item__content {
-    min-width: 150px;
-  }
-  /deep/ .over-height {
-    height: 40px !important;
-    overflow: auto;
-  }
-  /deep/ .over-height .el-cascader__tags {
-    top: 5px;
-    transform: translateY(0);
-  }
-  .ghost {
-    opacity: 0.5;
-    background: rgb(106, 188, 232);
-  }
-}
-</style>
+<template>
+  <div class="wrapper">
+    <div class="opt">
+      <el-button
+        v-if="!edit"
+        @click="addValue"
+      >添加</el-button>
+    </div>
+    <div class="tables">
+      <el-tooltip
+        content="从左侧拖拽来添加字段"
+        placement="top"
+        :disabled="!edit"
+      >
+        <div class="tables-sub">
+          <div
+            class="parts"
+            v-for="(val,indexs) in computedValue"
+            :key="indexs"
+          >
+            <!-- <div class="msg " v-if="edit">从左侧拖拽来添加字段</div> -->
+            <draggable
+              :animation="200"
+              :disabled="!edit"
+              :list="columns"
+              ghost-class="ghost"
+              @add="handleAdd"
+              @end="handleMoveEnd"
+              @start="handleMoveStart"
+              :group="{ name: 'form', pull: false, put: true}"
+              style="display: flex;"
+              filter='.nodraggable'
+            >
+
+              <template v-for="(item,index) in columnsValue">
+                <div
+                  class="botom"
+                  :class="{'form-item-active': (selSubIndex != null && selSubIndex == index && edit && list[activeFormName][selectIndex].field == desc.field),'disoption': edit,'nodraggable': !item.isFlex}"
+                  :key="index+1"
+                  v-show="isShowTag(val,item)"
+                  @click.stop="handleFormItemClick(item,index)"
+                >
+                  <template v-if="item.content">
+                    <el-form-item>
+                      <component
+                        v-if="item.content.type "
+                        :desc="item.content"
+                        :is="item.content.type"
+                        :options="setItemOption(item,index,indexs)"
+                        v-bind="getAttrs(item.content)"
+                        v-model="val[item.prop]"
+                        v-on="item.content.on"
+                        :class="{'over-height': item.prop == 'category'}"
+                        :ref="item.prop+indexs"
+                      >
+                      </component>
+                      <!-- <el-select
+                        v-model="value"
+                        v-else-if="item.content.field == 'brand'"
+                        :placeholder="'请选择'+item.content.label"
+                      >
+                        <el-option-group
+                          v-for="group in item.content.options"
+                          :key="group.value"
+                          :label="group.text"
+                        >
+                          <el-option
+                            v-for="item in group.options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                          >
+                          </el-option>
+                        </el-option-group>
+                      </el-select> -->
+                      <!-- <el-select
+                        v-model="val[item.prop]"
+                        :placeholder="'请选择'+item.content.label"
+                        :multiple="item.content.attrs.multiple"
+                        v-else
+                      >
+                        <el-option
+                          v-for="item2 in item.content.options"
+                          :key="item2.value"
+                          :label="item2.text"
+                          :value="item2.value"
+                        >
+                        </el-option>
+                      </el-select> -->
+                    </el-form-item>
+                  </template>
+                  <!-- 复制按钮 -->
+                  <template v-if="item.isFlex">
+                    <!-- <el-button
+                      @click.stop="handleCopy(index)"
+                      class="form-item-copy-btn"
+                      icon="el-icon-document-copy"
+                      size="mini"
+                      style="border-radius: 0"
+                      type="primary"
+                      v-if="selSubIndex != null && selSubIndex === index && edit && list[activeFormName][selectIndex].field == desc.field"
+                    >
+                    </el-button> -->
+                    <!-- 删除按钮 -->
+                    <el-button
+                      @click.stop="handleDelete(index)"
+                      class="form-item-delete-btn"
+                      icon="el-icon-delete"
+                      size="mini"
+                      style="border-radius: 0"
+                      type="primary"
+                      v-if="selSubIndex != null && selSubIndex === index && edit && list[activeFormName][selectIndex].field == desc.field"
+                    >
+                    </el-button>
+                  </template>
+                </div>
+                <!-- TODO: 多选后如果有自定义选项 则渲染在选择项后方 -->
+                <template v-if="propertyList[indexs] && propertyList[indexs].length && item.prop =='goodType'">
+                  <div
+                    class="botom"
+                    v-for="(pro,j) in propertyList[indexs]"
+                    :key="'pro'+j"
+                  >
+                    <el-form-item>
+
+                      <component
+                        :desc="{label: pro.name,on: {'change': (val)=>{setProStr(val,pro,indexs)}}}"
+                        :is="pro.key == 0 ? 'ele-form-input' : 'ele-form-select'"
+                        :options="propertyList[indexs][j].data"
+                        v-model="val['pro-'+pro.propertyId]"
+                      >
+                      </component>
+                    </el-form-item>
+                    <span
+                      style="padding-left: 4px; word-break: keep-all;"
+                      v-if="pro.unit"
+                    >{{pro.unit}}</span>
+
+                  </div>
+                </template>
+              </template>
+
+              <!-- TODO: 这里暂放市场参考字段 -->
+              <!-- <div class="msg nodraggable">市场参考：</div> -->
+              <div
+                class="msg nodraggable"
+                v-if="columnsValue.length === 0"
+              >暂未添加字段</div>
+              <div
+                class="msg nodraggable"
+                v-if="columnsValue.length > 0 &&  edit"
+              > </div>
+              <div
+                class="botom"
+                v-if="!edit"
+              >
+                <el-button
+                  type="text"
+                  @click="deteleVal(indexs)"
+                >删除</el-button>
+              </div>
+            </draggable>
+          </div>
+        </div>
+      </el-tooltip>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import * as _ from "lodash";
+// import draggable from "vuedraggable";
+
+const draggable = () => ({
+  // 需要加载的组件 (应该是一个 `Promise` 对象)
+  component: import("vuedraggable"),
+  // 异步组件加载时使用的组件
+  loading: "",
+  // 加载失败时使用的组件
+  error: "",
+  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
+  delay: 200,
+  // 如果提供了超时时间且组件加载也超时了，
+  // 则使用加载失败时使用的组件。默认值是：`Infinity`
+  timeout: 3000
+});
+import { mapGetters, mapMutations, mapState } from "vuex";
+import {
+  getGooodsType,
+  getGooodsBrand,
+  getMachineryList,
+  getMachineryType,
+  getEquipmentList,
+  getUnitListData,
+  getGooodsProperty,
+  concreteStrongAll,
+  concreteAdmixtureAll,
+  getMechanicsAttr,
+  getEquipProp,
+  modelSelect,
+  brandSelect,
+  gearboxSelect,
+  gethouseType,
+  getTeamCategory
+} from "@/formBuilder/apiBusiness.js";
+import columnsVue from "../../components/app-main/components/components/columns.vue";
+// import { requesTypeOptions } from "../../../views/CustomerManagement/MemberChance/mock";
+import itemOptionVue from "../../components/app-main/components/components/itemOption.vue";
+import { isArraysEqual } from "@fullcalendar/core";
+import { carSeating, driveModel, carYear } from "./data";
+export default {
+  name: "Purchase",
+  extends: {},
+  components: {
+    draggable
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    desc: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    edit: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  data() {
+    return {
+      // 商品分类
+      goodsOption: [],
+      Mechanics: [],
+      equipment: [],
+      team: [],
+      bidding: [],
+      biddingType: [
+        { text: "商品/材料", value: "3" },
+        { text: "工程分包", value: "4" },
+        { text: "机械设备租赁", value: "1" },
+        { text: "劳务", value: "2" }
+      ],
+      // 自定义属性
+      muster: {
+        brand: []
+      },
+      unitList: [],
+      propertyList: [],
+      strength: [],
+      admixture: [],
+      // 车辆信息
+      carModel: [],
+      carBrand: [],
+      carGearbox: [],
+      carSeating: carSeating,
+      driveModel: driveModel,
+      carYear: carYear(),
+      houseType: [],
+      category: []
+    };
+  },
+  computed: {
+    ...mapState(["selSubIndex", "activeFormName", "list", "selectIndex"]),
+    ...mapGetters(["currentFormItem"]),
+    computedValue: function() {
+      if (this.value.length > 0) {
+        return this.value;
+      } else {
+        const type = ["checkbox", "datetimerange", "cascader"];
+        const arr = {};
+        this.columns.forEach(item => {
+          if (item.prop) {
+            const typeStr = item.content.type.replace("ele-form-", "");
+            arr[item.prop] = type.indexOf(typeStr) > -1 ? [] : "";
+          }
+        });
+        return [arr];
+      }
+    },
+    draggableColumns() {
+      return this.columns;
+    },
+    columnsValue() {
+      return _.cloneDeep(this.columns);
+    }
+  },
+  methods: {
+    ...mapMutations(["updateSelSubIndex", "updateSelectIndex", "updateList"]),
+    isShowTag(val, item) {
+      if (item.content && item.content.vif && Array.isArray(item.content.vif)) {
+        const node = item.isLink ? item.isLink : "leaseType";
+        return item.content.vif.indexOf(val[node]) > -1;
+      } else {
+        return true;
+      }
+    },
+    setProStr(val, pro, j) {
+      if (!val) return;
+      const name =
+        pro.key == 1 && pro.data.length > 0
+          ? pro.data.filter(item => item.value == val)[0].text
+          : val;
+      this.value[j]["pro-" + pro.propertyId + "-Str"] = {
+        value: name,
+        property: pro.name,
+        unit: pro.unit
+      };
+      this.$emit("input", this.value);
+    },
+    setValue(prop, index) {
+      if (prop) {
+        const val = this.value.filter(item => item[prop]);
+        return val[0][prop];
+      } else {
+        return index + 1;
+      }
+    },
+    getAttrs(item) {
+      return Object.assign({}, item.attrs);
+    },
+    // option设置
+    setItemOption(item, index, indexs) {
+      const arr = [];
+      const vm = this;
+
+      if (!item.content.options) return [];
+      if (item.content.field == "leaseType") {
+        item.content["on"] = {
+          change: newVal => {
+            vm.leaseTypeChange(newVal, item, indexs);
+          }
+        };
+      }
+      if (item.content.options && typeof item.content.options != "string") {
+        return item.content.options;
+      } else {
+        if (item.content.types) {
+          //   vm.$nextTick(function() {
+          item.content["on"] = {
+            change: async newVal => {
+              await vm.handleChange(newVal, item, indexs);
+            }
+          };
+          item["on"] = {
+            change: async newVal => {
+              await vm.handleChange(newVal, item, indexs);
+            }
+          };
+          //   });
+          return vm[item.content.options];
+        } else if (!item.content.types) {
+          item.content["on"] = {
+            change: newVal => {
+              vm.handleChangeOption(newVal, item, indexs);
+            }
+          };
+          const key = item.content.options;
+          !this.muster[key] && this.$set(this.muster, key, []);
+          !this.muster[key][indexs] && this.$set(this.muster[key], indexs, []);
+          return this.muster[key][indexs];
+        }
+      }
+    },
+    // 租赁类型变化
+    leaseTypeChange(newVal, item, indexs) {
+      if (newVal == 1) {
+        this.getMachineryList();
+      } else if (newVal == 2) {
+        this.getEquipmentList();
+      } else if (newVal == 3) {
+        this.initCarInfo();
+      } else if (newVal == 4) {
+        this.getHouse();
+      }
+      Object.keys(this.value[indexs]).forEach(k => {
+        if (k.indexOf("pro-") > -1) {
+          delete this.value[indexs][k];
+        } else if (k != "leaseType") {
+          const type = Array.isArray(this.value[indexs][k]);
+          this.value[indexs][k] = type ? [] : "";
+        }
+      });
+      this.$emit("input", this.value);
+    },
+    // 加载车辆选择框信息
+    async initCarInfo() {
+      if (this.carModel.length == 0) {
+        const res = await modelSelect();
+        this.carModel =
+          res.data.code == 200
+            ? res.data.data.map((item, index) => ({
+              text: item.name,
+              value: item.key
+            }))
+            : [];
+      }
+      if (this.carBrand.length == 0) {
+        const res = await brandSelect();
+        this.carBrand =
+          res.data.code == 200
+            ? res.data.data.map((item, index) => ({
+              text: item.name,
+              value: item.key
+            }))
+            : [];
+      }
+      if (this.carGearbox.length == 0) {
+        const res = await gearboxSelect();
+        this.carGearbox =
+          res.data.code == 200
+            ? res.data.data.map((item, index) => ({
+              text: item.value,
+              value: item.key
+            }))
+            : [];
+      }
+    },
+    // 父级元素数据发生变化
+    handleChange(val, item, indexs) {
+      // TODO: 在这里进行了点击事件的获取值
+      const vm = this;
+      if (item.content.types == "goods") {
+        const str = this.goodsOption.filter(k => val[0] && k.id == val[0]);
+        if (str[0] && str[0].name == "商砼") {
+          this.getConcrete(val, item, indexs);
+        } else {
+          this.getGooodsBrand(val, item, indexs);
+          this.getGooodsProperty(val, item, indexs);
+        }
+      } else if (item.content.types == "Mechanics") {
+        this.getMachineryType(val, item, indexs);
+      } else if (item.content.types == "equipment") {
+        this.getEquipmentType(val, item, indexs);
+      } else if (item.content.types == "team") {
+        this.setTeamStr(val, item, indexs, "team");
+      } else if (item.content.types == "car") {
+        this.setTeamStr(val, item, indexs, item.prop);
+      } else if (item.content.types == "houseType") {
+        setTimeout(() => {
+          const text = vm.$refs[item.content.field + indexs][0].presentText;
+          vm.value[indexs][item.content.field + "Str"] = text || "";
+          vm.$emit("input", vm.value);
+        }, 200);
+      } else if (item.content.types == "category") {
+        setTimeout(() => {
+          const tags = vm.$refs[item.content.field + indexs][0].presentTags;
+          const text = tags.map ? tags.map((item, index) => item.text) : [];
+          vm.value[indexs][item.content.field + "Str"] = text.join(",");
+          vm.$emit("input", vm.value);
+        }, 200);
+      } else if (item.content.types == "unitList") {
+        vm.setTeamStr(val, item, indexs, "unitList");
+      }
+    },
+    setTeamStr(val, item, indexs, types) {
+      const name = this[types].filter(i => i.value == val);
+      this.value[indexs][item.content.field + "Str"] = name[0]
+        ? name[0].text
+        : "";
+      this.$emit("input", this.value);
+    },
+    // 子级元素发生变化
+    handleChangeOption(newVal, item, indexs) {
+      console.log(newVal, item, indexs);
+      const name = this.muster[item.content.options][indexs].filter(
+        i => i.value == newVal
+      );
+      const nameStr = name[0].text;
+      const key = item.content.field + "Str";
+      this.value[indexs][key] = nameStr;
+      this.$emit("input", this.value);
+      if (item.prop == "classify" || item.prop == "equipClassify") {
+        this.getClassifyPro(newVal, item, indexs);
+      }
+    },
+    // 获取机械自定义属性
+    async getClassifyPro(newVal, item, indexs) {
+      Object.keys(this.value[indexs]).forEach(k => {
+        if (k.indexOf("pro-") > -1) {
+          delete this.value[indexs][k];
+        }
+      });
+      const params = {
+        categoryNo:
+          item.prop == "classify"
+            ? this.value[indexs].Mechanics
+            : this.value[indexs].equipment,
+        typeNo: newVal
+      };
+      const res =
+        item.prop == "classify"
+          ? await getMechanicsAttr(params)
+          : await getEquipProp(params);
+      if (res.data.code == 200) {
+        let propertyList = [];
+        if (item.prop == "classify") {
+          propertyList = res.data.data.map((item, index) => {
+            item.data = item.valList.map(i => ({
+              text: i.startVal,
+              value: i.startVal
+            }));
+            item.propertyId = index;
+            return item;
+          });
+        } else {
+          res.data.data.forEach((item, index) => {
+            item.data = item.valList.map(i => ({ text: i.val, value: i.val }));
+            item.propertyId = index;
+            propertyList.push({
+              name: item.name,
+              propertyId: index,
+              data: item.data,
+              unit: item.unit,
+              key: item.attrKey
+            });
+          });
+        }
+        this.$set(this.propertyList, indexs, propertyList);
+      }
+    },
+    // 点击选中
+    handleFormItemClick(item, index) {
+      if (!this.edit) return;
+      if (item.type != "index") {
+        this.list[this.activeFormName].forEach((i, v) => {
+          if (i.field == this.desc.field) {
+            this.updateSelectIndex(v);
+          }
+        });
+        this.updateSelSubIndex(index);
+      }
+    },
+    // 复制
+    handleCopy(index) {
+      const obj = _.cloneDeep(this.columns[index]);
+      obj.field = `key_${Date.now()}`;
+      this.columns.splice(index + 1, 0, obj);
+      this.setListColumns(this.columns);
+      this.updateSelSubIndex(index + 1);
+    },
+    // 删除
+    handleDelete(index) {
+      this.columns.splice(index, 1);
+      this.setListColumns(this.columns);
+      // 如果删除的最后一个, 则重新选择最后一个
+      if (index >= this.columns.length) {
+        this.updateSelSubIndex(this.columns.length - 1);
+      } else if (index - 1 < 1 && this.columns > 1) {
+        this.updateSelSubIndex(1);
+      } else {
+        this.updateSelSubIndex(null);
+      }
+    },
+    // 新增
+
+    handleAdd(res) {
+      const vm = this;
+      if (!this.columns[res.newIndex]) {
+        res.newIndex = this.columns.length - 1;
+      }
+      // if (!this.columns[res.newIndex].type) {
+      //   this.$message.error("业务组件字段请添加至最右侧");
+      //   return;
+      // }
+      if (
+        this.columns[res.newIndex].type &&
+        (this.columns[res.newIndex].type.indexOf("custom-table") > -1 ||
+          this.columns[res.newIndex].type.indexOf("columns") > -1 ||
+          this.columns[res.newIndex].type.indexOf("quill-editor") > -1)
+      ) {
+        this.$message.error("不支持添加此类型控件，请添加其他类型控件");
+        this.columns.splice(res.newIndex, 1);
+        return;
+      }
+      // let obj = this.columns[res.newIndex].type?this.columns[res.newIndex]:this.columns[res.newIndex+1] ;
+      const obj = this.columns[res.newIndex];
+      let content = {};
+      // 如果是单选框 多选框 进入表格 则添加下拉框
+      if (obj.type && (obj.type === "radio" || obj.type === "checkbox")) {
+        if (obj.type === "checkbox") {
+          obj.attrs["multiple"] = true;
+        }
+        obj.type = "ele-form-select";
+        content = obj;
+        this.columns[res.newIndex] = {
+          prop: obj.field,
+          label: obj.label,
+          isFlex: true,
+          content: content
+        };
+      }
+      // if (!obj.type) {
+      vm.columns.map((e, i) => {
+        if (e.field) {
+          e.type = "ele-form-" + e.type;
+          this.columns[i] = {
+            prop: e.field,
+            label: e.label,
+            isFlex: true,
+            content: e
+          };
+        }
+        if (e.type === "ele-form-radio" || e.type === "ele-form-checkbox") {
+          if (e.type === "ele-form-checkbox") {
+            e.attrs["multiple"] = true;
+          }
+          e.type = "ele-form-select";
+        }
+      });
+      // }
+      this.setListColumns(this.columns);
+      this.list[this.activeFormName].forEach((i, v) => {
+        if (i.field == vm.desc.field) {
+          this.updateSelectIndex(v);
+        }
+      });
+      this.updateSelSubIndex(res.newIndex);
+    },
+
+    // 移动开始
+    handleMoveStart(res) {
+      this.updateSelSubIndex(res.oldIndex);
+    },
+    // 移动结束
+    handleMoveEnd(res) {
+      const columns = this.columns.filter(item => !item.isFlex);
+      if (res.newIndex < columns.length) {
+        return false;
+      }
+      this.setListColumns(this.columns);
+      this.updateSelSubIndex(res.newIndex);
+    },
+    setListColumns(columns) {
+      const vm = this;
+      const list = _.cloneDeep(this.list);
+      list[vm.activeFormName].forEach(item => {
+        if (item.field == vm.desc.field) {
+          item.attrs.columns = columns;
+        }
+      });
+      vm.updateList({
+        name: vm.activeFormName,
+        newList: list[vm.activeFormName]
+      });
+    },
+    addValue() {
+      const type = ["checkbox", "datetimerange", "cascader"];
+
+      const obj = {};
+      this.columns.forEach(item => {
+        if (item.prop) {
+          const typeStr = item.content.type.replace("ele-form-", "");
+          obj[item.prop] = type.indexOf(typeStr) > -1 ? [] : "";
+        }
+      });
+      this.value.push(obj);
+      this.$emit("input", this.value);
+    },
+    deteleVal(index) {
+      if (this.value.length < 2) {
+        this.$message.error("至少保留一条数据");
+        return;
+      }
+      Object.keys(this.muster).forEach(item => {
+        this.muster[item].splice(index, 1);
+      });
+      this.propertyList.splice(index, 1);
+      this.value.splice(index, 1);
+      this.$emit("input", this.value);
+    },
+    // 房产分类
+    async getHouse() {
+      if (this.houseType.length == 0) {
+        const res = await gethouseType({ type: 0 });
+        this.houseType = res.data.code == 200 ? res.data.data : [];
+      }
+    },
+    // 商品分类
+    async getGooodsType() {
+      const res = await getGooodsType({ type: "purchase" });
+      if (res.status == 200) {
+        this.goodsOption = this.formatChildData(res.data);
+      }
+    },
+    formatChildData(data) {
+      data.forEach((item, index) => {
+        if (item.children && item.children.length > 0) {
+          return this.formatChildData(item.children);
+        } else {
+          delete item.children;
+        }
+      });
+      return data;
+    },
+    // 商品品牌
+    async getGooodsBrand(val, item, indexs, flg) {
+      let value = [];
+      const vm = this;
+      const key = item.content.link;
+      if (!flg) {
+        vm.value[indexs].brand = "";
+        vm.value[indexs].brandStr = "";
+        setTimeout(() => {
+          const text =
+            vm.$refs[item.content.field + indexs][0].$refs.input.value;
+          vm.value[indexs][item.content.field + "Str"] = text || "";
+          vm.$emit("input", vm.value);
+        }, 100);
+      }
+      const data = val[val.length - 1];
+      if (!data) return;
+      const res = await getGooodsBrand(data, indexs);
+      if (res.data.code == 0) {
+        value = res.data.data.reduce(
+          (total, currentValue) => total.concat(currentValue.options),
+          []
+        );
+        value = value.map(i => ({ text: i.brandName, value: i.id }));
+      }
+
+      vm.$set(vm.muster[key], indexs, value);
+    },
+    // 商品属性
+    async getGooodsProperty(val, item, indexs, flg) {
+      const id = val[val.length - 1];
+      if (!id) return;
+      if (!flg) {
+        Object.keys(this.value[indexs]).forEach(k => {
+          if (k.indexOf("pro-") > -1) {
+            delete this.value[indexs][k];
+          }
+        });
+        this.$emit("input", this.value);
+      }
+      const res = await getGooodsProperty(id, indexs);
+      if (res.data.code == 0) {
+        const list = res.data.data;
+        const propertyList = []; // 商品属性列表
+        for (let i = 0; i < list.length; i++) {
+          if (list[i].itemparamname === "仓储") {
+            continue;
+          }
+          let flag = true;
+          for (let j = 0; j < propertyList.length; j++) {
+            // 去重 合并属性名相同的项
+            if (propertyList[j].name === list[i].itemparamname) {
+              propertyList[j].data.push({
+                text: list[i].valdata,
+                value: list[i].id
+              });
+              flag = false;
+              break;
+            }
+          }
+          if (flag) {
+            // 非重复 添加商品属性和id
+            const obj = {
+              name: list[i].itemparamname,
+              data: [],
+              key: 1
+            };
+            obj.data.push({ text: list[i].valdata, value: list[i].id });
+            obj.propertyId = list[i].itemparamid;
+            propertyList.push(obj);
+          }
+        }
+        this.$set(this.propertyList, indexs, propertyList);
+      } else {
+        this.$set(this.propertyList, indexs, []);
+      }
+    },
+    // 商砼属性
+    async getConcrete(val, item, indexs, flg) {
+      const vm = this;
+      setTimeout(() => {
+        const text = vm.$refs[item.content.field + indexs][0].$refs.input.value;
+        vm.value[indexs][item.content.field + "Str"] = text || "";
+        vm.$emit("input", vm.value);
+      }, 100);
+      if (this.strength.length == 0) {
+        const business = await concreteStrongAll();
+        this.strength = business.data.result.map
+          ? business.data.result.map(i => ({
+            text: i.strongLevel,
+            value: i.sort
+          }))
+          : [];
+      }
+      if (this.admixture.length == 0) {
+        const res = await concreteAdmixtureAll();
+        this.admixture = this.formatData(res.data.result);
+      }
+      if (!flg) {
+        Object.keys(this.value[indexs]).forEach(k => {
+          if (k.indexOf("pro-") > -1) {
+            delete this.value[indexs][k];
+          }
+        });
+        this.$emit("input", this.value);
+      }
+      const propertyList = [];
+      propertyList.push({
+        name: "强度等级",
+        data: this.strength,
+        propertyId: "1",
+        key: 1
+      });
+      propertyList.push({
+        name: "外加剂",
+        data: this.admixture,
+        propertyId: "2",
+        key: 1
+      });
+      this.$set(this.propertyList, indexs, propertyList);
+    },
+    // 数据分组
+    setGroup(arr) {
+      const dataInfo = {};
+      arr.forEach((item, index) => {
+        const { admixtureName, spec } = item;
+        if (!dataInfo[admixtureName]) {
+          dataInfo[admixtureName] = {
+            admixtureName: item.admixtureName,
+            spec: item.admixtureName,
+            children: []
+          };
+        }
+        if (item.spec && item.admixtureName) {
+          dataInfo[admixtureName].children.push({
+            admixtureName: item.admixtureName + "-" + item.spec,
+            spec: item.admixtureName + "-" + item.spec
+          });
+        } else {
+          dataInfo[admixtureName].children = null;
+        }
+      });
+      const list = Object.values(dataInfo);
+      return list;
+    },
+    // 外加剂
+    formatData(data) {
+      return data.map((item, index) => {
+        const name = item.admixtureName + item.spec;
+        return { text: name, value: name };
+      });
+    },
+    // 机械分类
+    async getMachineryList() {
+      const res = await getMachineryList();
+      if (res.data.code == 200) {
+        this.Mechanics = res.data.data.map(item => ({
+          text: item.name,
+          value: item.no
+        }));
+      }
+    },
+    // 机械类型
+    async getMachineryType(val, item, indexs, flg) {
+      let value = [];
+      const key = item.content.link;
+      if (!flg) {
+        const name = this.Mechanics.filter(i => i.value == val);
+        this.value[indexs][item.content.field + "Str"] = name[0]
+          ? name[0].text
+          : "";
+        this.value[indexs].classify = "";
+        this.value[indexs].classifyStr = "";
+        this.$emit("input", this.value);
+      }
+      const res = await getMachineryType({ categoryNo: val }, indexs);
+      if (res.data.code == 200) {
+        value = res.data.data.map(item => ({
+          text: item.name,
+          value: item.no
+        }));
+      }
+      this.$set(this.muster[key], indexs, value);
+    },
+    // 设备分类
+    async getEquipmentList(val, item, indexs) {
+      const res = await getEquipmentList({});
+      if (res.data.code == 200) {
+        this.equipment = res.data.data.map(item => ({
+          text: item.name,
+          value: item.no
+        }));
+      }
+    },
+    // 设备类型
+    async getEquipmentType(val, item, indexs, flg) {
+      let value = [];
+      const key = item.content.link;
+      if (!flg) {
+        const name = this.equipment.filter(i => i.value == val);
+        this.value[indexs][item.content.field + "Str"] = name[0]
+          ? name[0].text
+          : "";
+        this.value[indexs].equipClassify = "";
+        this.value[indexs].equipClassifyStr = "";
+        this.$emit("input", this.value);
+      }
+      const res = await getEquipmentList({ categoryNo: val }, indexs);
+      if (res.data.code == 200) {
+        value = res.data.data.map(item => ({
+          text: item.name,
+          value: item.no
+        }));
+      }
+      this.$set(this.muster[key], indexs, value);
+    },
+    // 获取单位
+    async getUnitList() {
+      const res = await getUnitListData();
+      if (res.data.code == 0) {
+        res.data.data = res.data.data.map(item => ({
+          text: item.name,
+          value: item.id
+        }));
+        this.unitList = res.data.data;
+      }
+    },
+    // 获取团队主营业务
+    async getTeamBusiness() {
+      const res = await getTeamCategory();
+      this.category = res.data && res.data.code == 200 ? res.data.data : [];
+    },
+    init() {
+      if (this.desc.business == "1") {
+        this.getGooodsType();
+        this.getUnitList();
+      } else if (this.desc.business == "2") {
+        this.getMachineryList();
+      } else if (this.desc.business == "4") {
+        this.getTeamBusiness();
+      }
+    }
+  },
+  created() {
+    !this.edit && this.init();
+    setTimeout(() => {
+      if (this.value.length == 0) {
+        this.addValue();
+      }
+    }, 1000);
+    this.getHouse();
+  },
+  mounted() {},
+  watch: {
+    value: {
+      handler(nv, ov) {
+        const vm = this;
+        nv.map((e, i) => {
+          // return {
+          //   Price: e.Price,
+          //   amount: e.amount,
+          //   brand: e.brand,
+          //   goodType: e.goodType,
+          //   total: e.Price * e.amount,
+          //   unit: e.unit,
+          //   unitStr: e.unitStr
+          // }
+          if (!vm.edit && e.Price * e.amount != 0) {
+            vm.$set(vm.value[i], "total", e.Price * e.amount);
+          }
+          vm.$set(vm.value[i], "scck", "市场参考：");
+        });
+      },
+      deep: true
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+::-webkit-scrollbar {
+  // width:16px;
+  height: 4px;
+  background-color: #f5f5f5;
+}
+::-webkit-scrollbar-thumb {
+  height: 4px;
+  background: #e4e7ed;
+  border-radius: 2px;
+}
+.wrapper {
+  .tables {
+    margin-top: 20px;
+    // border-left: 1px solid #ebeef5;
+  }
+  .tables-sub {
+    border: 1px solid #ebeef5;
+    // border-right: 1px solid #ebeef5;
+    // border-bottom: 1px solid #ebeef5;
+    min-height: 80px;
+    // width: 100%;
+    overflow: auto;
+    // max-width: 980px;
+    .disoption {
+      &:after {
+        content: " ";
+        display: block;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        position: absolute;
+        z-index: 2;
+        cursor: move;
+      }
+    }
+    .el-icon-remove-outline {
+      font-size: 26px;
+    }
+    .parts {
+      position: relative;
+      text-align: center;
+      .heard {
+        font-weight: 500;
+        height: 40px;
+      }
+      .botom {
+        box-sizing: border-box;
+        // border-bottom: 1px solid #ebeef5;
+        padding: 10px 10px 10px 20px;
+        height: 70px;
+        position: relative;
+        display: flex;
+      }
+    }
+  }
+  .msg {
+    min-width: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ccc;
+    text-align: center;
+    width: 100%;
+    // border-left: 1px solid #ebeef5;
+    height: 70px;
+  }
+  .form-item-active {
+    border: 1px dashed #409eff !important;
+    background-color: rgba(2, 134, 223, 0.06) !important;
+    position: relative;
+  }
+  /deep/ .el-icon-delete {
+    font-size: 17px !important;
+  }
+  /deep/ .el-icon-document-copy {
+    font-size: 17px !important;
+  }
+  .form-item-delete-btn {
+    background-color: #ff0000;
+    border-color: #ff0000;
+    height: 30px;
+    width: 30px;
+    border-radius: 100% !important;
+    position: absolute;
+    right: 10px;
+    top: -15px;
+    z-index: 3;
+    padding: 4px 6px;
+  }
+  .form-item-copy-btn {
+    position: absolute;
+    height: 30px;
+    width: 30px;
+    border-radius: 100% !important;
+    right: 37px;
+    top: -15px;
+    z-index: 3;
+    margin-right: 10px;
+    padding: 4px 6px;
+  }
+  /deep/ .botom .el-form-item__content > div {
+    display: flex;
+    .el-radio {
+      margin-right: 30px !important;
+    }
+    .el-checkbox {
+      margin-right: 30px !important;
+    }
+  }
+  /deep/ .botom .el-form-item__content {
+    min-width: 150px;
+  }
+  /deep/ .over-height {
+    height: 40px !important;
+    overflow: auto;
+  }
+  /deep/ .over-height .el-cascader__tags {
+    top: 5px;
+    transform: translateY(0);
+  }
+  .ghost {
+    opacity: 0.5;
+    background: rgb(106, 188, 232);
+  }
+}
+</style>