FromTable

2021-01-10
新增data-pick
2021-2-26
select 新增搜索- 新增多选
pick-data 支持时分秒-支持禁选之前日期

data：

      fromParams: {
        showSearchBtn: true,
        showAddBtn: true,
        showResetBtn: false,
        call: (param) => {
          return Object.prototype.toString.call(param) === "[object Function]";
        },
        outSideStyle: {
          width: "600px",
          display: "flex",
          "flex-wrap": "wrap",
          "align-items": "center",
          "pdding-bottom": "20px",
        },
        mainSearchList: [
          {
            type: "select",
            divWidth: "",
            needAutoQuery: false,
            selectLabel: "code",
            selectValue: "id",
            require: true,
            spanName: "产品代码",
            spanWidth: "80px",
            modelObj: {
              objName: "addObject",
              value: "logisticsProductId",
            },
            list: () => {
              return this.productCodeList;
            },
            event: {
              focus: (val) => {
                // 如果搜索没有数据 需要重新赋值
                if (!this.productCodeList.length) {
                  this.productCodeList = this.productCodeListCopy;
                }
                //没选而且copy有值说明搜索过，下次打开只会显示之前搜索的 需要重新赋值初始数据
                if (!this.addObject.logisticsProductId &&
                    this.productCodeListCopy.length) {
                    this.productCodeList = this.productCodeListCopy;
                }
              },
              filter: (val) => {
                if (!this.productCodeListCopy.length) {
                  // 先拷贝一份 后续基于这里搜索
                  this.productCodeListCopy = this.productCodeList;
                }
                if (!val) {
                  //搜索框没传值就重新赋值
                  this.productCodeList = this.productCodeListCopy;
                  return;
                }

                this.productCodeList = [];
                this.productCodeListCopy.length &&
                  this.productCodeListCopy.forEach((item) => {
                    if (item.code.indexOf(val) != -1) {
                      this.productCodeList.push(item); //把匹配到的数据push
                    }
                  });
              },

              changeProduct: (i, autoQuery) => {
                console.log(i);
                this.addObject.goodstypeList = [];
                this.categoryList = [];
                let tempBody = this.addObject.dataTable.tableBody[0];
                this.addObject.dataTable.tableBody = [];
                Object.keys(tempBody).forEach((item) => {
                  tempBody[item].value = "";
                });
                this.addObject.dataTable.tableBody.push(tempBody);

                if (!i) {
                  this.addObject.logisticsProductName = "";
                  return;
                }
                let code;
                this.productCodeList.forEach((e) => {
                  console.log(e);
                  if (e.id == i) {
                    this.addObject.logisticsProductName = e.name;
                    this.addObject.logisticsProductId = e.id;
                    code = e.code;
                  }
                });
                if (code) {
                  // 获取起运和目的List
                  this.getPolAndPodList(code);
                  //   get商品分类
                  this.getGoodsCategory(code);
                }
              },
              clear: (i) => {
                this.getList();
              },
            },
            margin: "0px 10px",
          },

          {
            type: "input",
            size: "mini",
            require: true,
            inputWidth: "250px",
            needAutoQuery: false,
            Name: "产品名称",
            placeholder: "请先选择产品代码",
            disabled: true,
            modelObj: {
              objName: "addObject",
              value: "logisticsProductName",
            },
            event: {
              clear: (i) => {
                // this.getList(1);
              },
            },
            margin: "0 10px 0 0",
          },

          {
            type: "select",
            inputWidth: "100%",
            divMargin: "10px 0 0 0",
            divWidth: "500px",
            multiple: true,
            needAutoQuery: false,
            selectLabel: "namec",
            selectValue: "id",
            require: true,
            spanName: "商品分类",
            spanWidth: "80px",
            modelObj: {
              objName: "addObject",
              value: "goodstypeList",
            },
            list: () => {
              return this.categoryList;
            },
            event: {
              changeProduct: (i, autoQuery) => {
                this.addObject.goodstypeList = i;
                console.log(i);
              },
              clear: (i) => {
                this.getList();
              },
            },
            margin: "0 0 0 10px",
          },
          {
            type: "select",
            divWidth: "",
            needAutoQuery: false,
            selectLabel: "vipcode",
            selectValue: "id",
            require: true,
            spanName: "计费等级",
            spanWidth: "80px",
            modelObj: {
              objName: "addObject",
              value: "vipId",
            },
            list: () => {
              return this.VipList;
            },
            event: {
              changeProduct: (i, autoQuery) => {},
              clear: (i) => {
                this.getList();
              },
            },
            margin: "0px 10px",
          },
          {
            type: "select",
            divWidth: "",
            needAutoQuery: false,
            selectLabel: "name",
            selectValue: "code",
            spanName: "收费币种",
            require: true,
            spanWidth: "80px",
            modelObj: {
              objName: "addObject",
              value: "currency",
            },
            list: () => {
              return this.currencyList;
            },
            event: {
              changeProduct: (i, autoQuery) => {},
              clear: (i) => {
                this.getList();
              },
            },
            margin: "10px 10px",
          },
          {
            type: "date-picke",
            isDatetime: "datetime",
            valueFormat: "yyyy-MM-dd HH:mm",
            size: "mini",
            divWidth: "275px",
            pickerSetTime: true,
            spanWidth: "90px",
            needAutoQuery: false,
            require: true,
            clearable: true,
            name: "有效时间",
            modelObj: {
              objName: "addObject",
              value: "effectiveStartTime",
            },
            placeholder: "",

            event: {
              change: (i, autoQuery) => {},
              clear: () => {
                // console.log(123);
                this.getList();
              },
            },
            margin: "0px 10px",
          },

          {
            type: "date-picke",
            isDatetime: "datetime",
            valueFormat: "yyyy-MM-dd HH:mm",
            size: "mini",
            divWidth: "275px",
            spanWidth: "100px",
            needAutoQuery: false,
            pickerSetTime: true,
            require: true,
            clearable: true,
            name: "失效时间",
            modelObj: {
              objName: "addObject",
              value: "effectiveEndTime",
            },
            placeholder: "",
            event: {
              change: (i, autoQuery) => {
                if (!this.addObject.effectiveStartTime) {
                  this.$message.info("请先选择有效时间");
                  this.addObject.effectiveEndTime = "";
                }
                if (this.addObject.effectiveStartTime < i) {
                } else {
                  this.addObject.effectiveEndTime = "";
                  this.$message.info("失效必须大于有效时间");
                }
              },
              clear: () => {
                this.getList();
              },
            },
            margin: "0px 10px",
          },

          {
            type: "empty",
            Width: "",
            margin: "0 10px 0 0",
          },
        ],
      },

template

<div>
                <h2>基本信息</h2>
                <ErpForm
                  @openAddDialog="openAddDialog"
                  :fromParams="fromParams"
                  :addObject="addObject"
                ></ErpForm>
              </div>