tire-platform-ui/src/views/tirePartsMall/basicData/warehouse/index.vue

<template>
  <basic-container class="page-crad" v-if="flag">
    <avue-crud :option="option" :data="dataList" ref="crud" v-model="form" :page.sync="page" @row-del="rowDel"
      @row-update="rowUpdate" :before-open="beforeOpen" :before-close="beforeClose" @row-save="rowSave"
      @search-change="searchChange" @search-reset="searchReset" @on-load="onLoad"
      @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 264)"
      @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 264)" @search-criteria-switch="searchCriteriaSwitch"
      @tree-load="treeLoad">
    </avue-crud>
  </basic-container>
</template>

<script>
import {
  customerList,
  typeSave,
  detail,
  deleteDetails
} from "@/api/tirePartsMall/basicData/warehouse";
import {
  customerListAll
} from "@/api/tirePartsMall/basicData/warehouse";
export default {
  name: "customerInformation",
  data() {
    return {
      form: {},
      option: {},
      optionBack: {
        headerAlign: "center",
        align: "center",
        border: true,
        index: true,
        // lazy: true,
        stripe: true,
        height: "auto",
        tip: false,
        simplePage: true,
        searchShow: true,
        tree: true,
        searchMenuSpan: 16,
        searchSpan: 8,
        searchIcon: true,
        searchIndex: 2,
        selection: true,
        viewBtn: false,
        menuWidth: 140,
        column: [{
          label: "仓库编码",
          prop: "code",
          search: true,
          overHidden: true,
          // width: 120,
          rules: [
            {
              required: true,
              message: " ",
              trigger: "blur"
            }
          ]
        }, {
          label: "仓库名称",
          prop: "cname",
          search: true,
          overHidden: true,
          // width: 120,
          rules: [
            {
              required: true,
              message: " ",
              trigger: "blur"
            }
          ]
        }, {
          label: "联系人",
          prop: "contacts",
          search: true,
          overHidden: true,
          // width: 120,
          rules: [
            {
              required: true,
              message: " ",
              trigger: "blur"
            }
          ]
        }, {
          label: "联系电话",
          prop: "tel",
          search: true,
          overHidden: true,
          // width: 120,
          rules: [
            {
              required: true,
              message: " ",
              trigger: "blur"
            }
          ]
        }, {
          label: "是否计费",
          prop: "chargeOrNot",
          search: true,
          overHidden: true,
          // width: 120,
          type: "select",
          dicData: [{
            label: "是",
            value: 0
          }, {
            label: "否",
            value: 1
          }],
          rules: [
            {
              required: true,
              message: " ",
              trigger: "blur"
            }
          ]
        }, {
          label: "库容",
          prop: "storageCapacity",
          search: true,
          overHidden: true,
          // width: 120,
          rules: [
            {
              required: true,
              message: " ",
              trigger: "blur"
            }
          ]
        }, {
          label: "所属公司",
          prop: "salesCompanyId",
          search: true,
          overHidden: true,
          // width: 120,
          type: 'select',
          props: {
            label: 'cname',
            value: 'id'
          },
          dicUrl: '/api/blade-sales-part/storageDesc/listAll',
          rules: [
            {
              required: true,
              message: " ",
              trigger: "blur"
            }
          ]
        }, {
          label: "共享公司",
          prop: "sharedCompany",
          search: true,
          overHidden: true,
          // width: 120,
          type: 'select',
          props: {
            label: 'cname',
            value: 'id'
          },
          dicUrl: '/api/blade-sales-part/storageDesc/listAll',
          rules: [
            {
              required: true,
              message: " ",
              trigger: "blur"
            }
          ]
        }, {
          label: "备注",
          prop: "remarks",
          type: "textarea",
          minRows: 3,
          span: 24,
          overHidden: true,
          // width: 200
        }]
      },
      parentId: 0,
      dataList: [],
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500]
      },
      treeDeptId: "",
      corpTypeListCk: [],
      flag:false,
    };
  },
  async created() {
    this.option = await this.getColumnData(this.getColumnName(264), this.optionBack);
    this.key++
    let i = 0;
    this.option.column.forEach(item => {
      if (item.search) i++
    })
    if (i % 3 !== 0) {
      const num = 3 - Number(i % 3)
      this.option.searchMenuSpan = num * 8;
      this.option.searchMenuPosition = "right";
    }
    setTimeout(()=>{
      this.flag = true
    },200)
  },
  methods: {
    //删除列表后面的删除按钮触发触发(row, index, done)
    rowDel(row, index, done) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return deleteDetails(row.id);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          // 数据回调进行刷新
          done(row);
        });
    },
    //修改时的修改按钮点击触发
    rowUpdate(row, index, done, loading) {
      typeSave(row).then(
        () => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          // 数据回调进行刷新
          done(row);
        },
        error => {
          window.console.log(error);
          loading();
        }
      );
    },
    //新增修改时保存触发
    rowSave(row, done, loading) {
      console.log(row);
      typeSave(row).then(
        res => {
          console.log(res);
          this.page.currentPage = 1;
          this.onLoad(this.page, {});
          done();
        },
        error => {
          window.console.log(error);
          loading();
        }
      );
    },
    //新增子项触发
    handleAdd(row) {
      this.parentId = row.id;
      // const column = this.findObject(this.option.column, "parentId");
      // column.value = row.id;
      // column.addDisabled = true;
      this.$refs.crud.rowAdd();
    },
    //新增子项和新增触发查询所有
    beforeOpen(done, type) {
      if (["add", "edit"].includes(type)) {
        this.option.column.forEach(e => {
          if (e.prop == "storageTypeId") {
            this.$set(this.option.column, 3, { ...e, value: this.treeDeptId });
          }
        });
      }
      if (["edit", "view"].includes(type)) {
        detail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    //点击新增时触发
    beforeClose(done) {
      this.parentId = "";
      // const column = this.findObject(this.option.column, "parentId");
      // column.value = "";
      // column.addDisabled = false;
      done();
    },
    //点击搜索按钮触发
    searchChange(params, done) {
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    searchReset() {
      this.query = {};
      this.treeDeptId = "";
      this.onLoad(this.page);
    },
    onLoad(page, params = { parentId: 0 }) {
      let queryParams = Object.assign({}, params, {
        size: page.pageSize,
        current: page.currentPage,
        parentId: 0,
        storageTypeId: this.treeDeptId
      });
      customerList(queryParams).then(res => {
        this.dataList = res.data.data.records;
        this.page.total = res.data.data.total;
      });
    },
    searchCriteriaSwitch(type) {
      this.$refs.crud.doLayout();
      this.$refs.crud.getTableHeight();
    },
    //树桩列点击展开触发
    treeLoad(tree, treeNode, resolve) {
      const parentId = tree.id;
      customerList({ parentId: parentId }).then(res => {
        resolve(res.data.data.records);
      });
    },
    //自定义列保存
    async saveColumnTwo(ref, option, optionBack, code) {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumnTwo(ref, option, optionBack, code) {
      this[option] = this[optionBack];
      const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    }
  }
};
</script>

<style scoped>
.page-crad ::v-deep .basic-container__card {
  height: 94.8vh;
}
</style>