jonhon-mes-web/src/views/basicData/warehouseMaintenance.vue

<template>
  <basic-container>
    <el-tabs v-model="tabPosition" class="demo-tabs" @tab-change="tabPositionChange">
      <el-tab-pane label="库房设置" name="warehouseSetup"></el-tab-pane>
      <el-tab-pane label="库管设置" name="inventorySetup"></el-tab-pane>
      <el-tab-pane label="库位设置" name="storageSetup"></el-tab-pane>
    </el-tabs>
    <avue-crud
      v-if="tabPosition != 'inventorySetup'"
      :option="option"
      :table-loading="loading"
      :data="data"
      v-model="form"
      v-model:page="page"
      ref="crud"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template #menu="{ row }">
        <el-button type="text" v-if="tabPosition == 'warehouseSetup'"
          >管理员设置</el-button
        >
      </template>
    </avue-crud>
    <div v-if="tabPosition == 'inventorySetup'" class="setup-height">
      <div style="margin-bottom: 10px">
        <el-button type="primary" @click="selectFn(1)">按人员设置</el-button>
        <el-button type="primary" @click="selectFn(2)">按库房设置</el-button>
      </div>
      <el-select v-model="value" placeholder="请选择人员" v-if="isUser == 1">
        <el-option label="人员一" value="1"> </el-option>
        <el-option label="人员二" value="2"> </el-option>
      </el-select>
      <el-select v-model="value" placeholder="请选择库房" v-if="isUser == 2">
        <el-option label="库房一" value="1"> </el-option>
        <el-option label="库房二" value="2"> </el-option>
      </el-select>
      <el-transfer
        style="margin-top: 10px; height: 580px"
        filterable
        :titles="['未选择', '已选择']"
        :filter-method="filterMethod"
        filter-placeholder="请输入城市拼音"
        v-model="value"
        :data="transferData"
      >
      </el-transfer>
      <div
        style="
          margin-top: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <el-button type="primary">保 存</el-button>
      </div>
    </div>
  </basic-container>
</template>
<script>
import warehouseMain from "./js/warehouseMain";
export default {
  data() {
    return {
      loading: false,
      tabPosition: "warehouseSetup",
      data: [],
      form: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option: {
        columnSort: true,
        tip: false,
        height: "auto",
        align: "center",
        calcHeight: 32,
        simplePage: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: true,
        selection: true,
        viewBtn: false,
        addBtn: true,
        delBtn: true,
        editBtn: true,
        editBtnIcon: " ",
        delBtnIcon: " ",
        labelWidth: 120,
        menu: true,
        menuWidth: 200,
        dialogWidth: 920,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: true,
        gridBtn: false,
        searchShowBtn: false,
        showOverflowTooltip: true,
        searchLabelPosition: "left",
        searchLabelPosition: "left",
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: "left",
        gridBtn: false,
        searchMenuPosition: "right",
        addBtnIcon: " ",
        viewBtnIcon: " ",
        delBtnIcon: " ",
        editBtnIcon: " ",
        column: [],
      },
      isUser: 1,
    };
  },
  mounted() {
    this.option.delBtn = true;
    this.option.editBtn = true;
    this.option.column = warehouseMain[this.tabPosition];
  },
  methods: {
    selectFn(val) {
      this.isUser = val;
    },
    tabPositionChange(val) {
      this.option.delBtn = false;
      this.option.editBtn = false;
      if (this.tabPosition == "warehouseSetup") {
        this.option.delBtn = true;
        this.option.editBtn = true;
        this.option.column = warehouseMain[this.tabPosition];
      } else if (this.tabPosition == "storageSetup") {
        this.option.delBtn = true;
        this.option.editBtn = true;
        this.option.column = warehouseMain[this.tabPosition];
      }
    },
    rowDel() {
      this.$confirm("确定删除此条数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {});
    },
    onLoad() {
      this.data = [
        {
          id: 1,
          shCode: "001",
          shName: "名称一",
          memo: "",
          toolingTypeStr: "001",
          typeStr: "",
          shLevel: "",
          userName: "",
        },
        {
          id: 1,
          shCode: "001",
          shName: "名称一",
          memo: "",
          toolingTypeStr: "001",
          typeStr: "",
          shLevel: "",
          userName: "",
        },
        {
          id: 1,
          shCode: "001",
          shName: "名称一",
          memo: "",
          toolingTypeStr: "001",
          typeStr: "",
          shLevel: "",
          userName: "",
        },
      ];
      this.page.total = this.data.length;
    },
  },
};
</script>
<style lang="scss" scoped>
// ::v-deep.el-transfer {
//     .el-transfer-panel {
//         width: 44% !important;
//     }
// }

.setup-height {
  height: calc(100vh - 54px - 40px - 40px - 56px - 35px);
}
</style>