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">
        <avue-crud
          :option="warehouseOption"
          :table-loading="loading"
          :data="data"
          v-model="form"
          v-model:page="page"
          ref="crud"
          @row-del="rowDel"
          @row-save="rowSave"
          @row-update="rowUpdate"
          @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>
      </el-tab-pane>
      <!-- <el-tab-pane label="库管设置" name="inventorySetup"></el-tab-pane> -->
      <el-tab-pane label="库位设置" name="storageSetup">
        <avue-crud
          :option="storageOption"
          :table-loading="loading"
          :data="storageData"
          v-model="form"
          v-model:page="storagePage"
          ref="crud"
          @row-del="rowDel"
          @row-save="rowSave"
          @row-update="rowUpdate"
          @search-change="searchChange"
          @search-reset="searchReset"
          @selection-change="selectionChange"
          @current-change="currentChange"
          @size-change="sizeChange"
          @refresh-change="refreshChange"
          @on-load="onLoad"
        >
          <template #menu-left>
            <el-button type="primary" @click="handleAdd">新增</el-button>
          </template>
          <!-- <template #menu="{ row }">
            <el-button type="text" v-if="tabPosition == 'warehouseSetup'">管理员设置</el-button>
          </template> -->
        </avue-crud>
      </el-tab-pane>
    </el-tabs>
    
    <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>
    <add-edit-dialog v-if="showDialog" :showDialog="showDialog" :title="dialogTitle"
    @closeDialog="closeDialog"></add-edit-dialog>
  </basic-container>
</template>
<script>
import warehouseMain from "./js/warehouseMain";
import addEditDialog from "./components/addEditDialog.vue"
import {warehouseOption,storageOption} from "./js/warehouseMain";
import {getWareList,addWare,editWare,deleteWare,getLocationList,delLocation,editLocation} from "@/api/storeManagement/warehouseMaintenance";
export default {
  components: { addEditDialog },
  data() {
    return {
      loading: false,
      tabPosition: "warehouseSetup",
      data: [],
      form: {},
      query:{},
      dialogTitle:'新增',
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      showDialog:false,
      storageData:[],
      warehouseOption:warehouseOption,
      storageOption:storageOption,
      storagePage:{
        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,
      localQuery:{},
    };
  },
  mounted() {
    this.option.delBtn = true;
    this.option.editBtn = true;
    this.option.column = warehouseMain[this.tabPosition];
    this.$nextTick(() =>{
      this.tabPositionChange()
    })
  },
  methods: {
    searchChange(params, done){
      if(this.tabPosition == "warehouseSetup"){
        this.query = params
        this.page.currentPage = 1;
        this.getWare()
        done()
      }else if(this.tabPosition == "storageSetup"){
        this.localQuery = params
        this.page.currentPage = 1;
        this.getLocation()
        done()
      }
    },
    searchReset(){
      if(this.tabPosition == "warehouseSetup"){
        this.query = {}
        this.getWare()
      }else if(this.tabPosition == "storageSetup"){
        this.localQuery = {}
        this.getLocation()
      }
    },
    selectFn(val) {
      this.isUser = val;
    },
    handleAdd() {
      this.dialogTitle = '新增'
      this.showDialog = true
    },
    getWare(){
      getWareList({
        current:this.page.currentPage,
        size:this.page.pageSize,
        ...this.query
      }).then(res =>{
        res.data.data.records.map(item =>{
          item.houseType = (item.houseType || item.houseType == 0)  ? item.houseType + '' : item.houseType
          item.toolingType = (item.toolingType || item.toolingType == 0)  ? item.toolingType + '' : item.toolingType
        })
        this.data = res.data.data.records
        this.page.total = res.data.data.total;
      })
    },
    getLocation(){
      getLocationList({
        current:this.storagePage.currentPage,
        size:this.storagePage.pageSize,
        ...this.localQuery
      }).then(res =>{
        this.storageData = res.data.data.records
        this.storagePage.total = res.data.data.total;
      })
    },
    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];
        this.getWare()
      } else if (this.tabPosition == "storageSetup") {
        this.option.delBtn = true;
        this.option.editBtn = true;
        this.option.column = warehouseMain[this.tabPosition];
        this.getLocation()
      }
    },
    rowDel(row) {
      this.$confirm("确定删除此条数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if(this.tabPosition == "warehouseSetup"){
          deleteWare({
            ids:row.id
          }).then(res =>{
            if(res.data.code == 200){
              this.$message.success('删除成功')
              this.getWare()
            }
          })
        }else if(this.tabPosition == "storageSetup"){
          delLocation({
            ids:row.id
          }).then(res =>{
            if(res.data.code == 200){
              this.$message.success('删除成功')
              this.getLocation()
            }
          })
        }
      });
    },
    rowSave(row, done, loading){
      if(this.tabPosition == "warehouseSetup"){
        addWare(row).then(res =>{
          if(res.data.code == 200){
            this.$message.success('新增成功')
            done()
            this.getWare()
          }
        })
      }
    },
    rowUpdate(row, index, done, loading) { 
      if(this.tabPosition == "warehouseSetup"){
        console.log('row',row)
        editWare(row).then(res =>{
          if(res.data.code == 200){
            this.$message.success('修改成功')
            done()
            this.getWare()
          }
        })
      }else if(this.tabPosition == "storageSetup"){
        editLocation(row).then(res =>{
          if(res.data.code == 200){
            this.$message.success('修改成功')
            done()
            this.getLocation()
          }
        })
      }
    },
    closeDialog(val){
      console.log('val',val)
      if(val){
        this.showDialog = false
        this.getLocation()
      }
    },
    // 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>