jonhon-mes-web/src/views/equiptManagement/workwearManagement/index.vue

<template>
  <basic-container>
    <el-tabs v-model="tabPosition" class="demo-tabs" @tab-change="tabPositionChange">
      <el-tab-pane label="飞靶设置" name="feiBaSet"></el-tab-pane>
      <el-tab-pane label="挂具设置" name="rackSet"></el-tab-pane>
    </el-tabs>

    <avue-crud
      v-if="tabPosition == 'feiBaSet'"
      :option="feiBaOption"
      :table-loading="feibaLoading"
      :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"
    >
      <template #menu-left>
        <el-button type="danger" plain @click="removeFn">删除</el-button>
      </template>
    </avue-crud>

    <avue-crud
      v-if="tabPosition == 'rackSet'"
      :option="rackOption"
      :table-loading="gjLoading"
      :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"
    >
      <template #menu-left>
        <el-button type="danger" plain @click="removeFn">删除</el-button>
      </template>
    </avue-crud>
   
  </basic-container>
</template>
<script>
import columnData from "./columnData.js";
import {getFeiBaSetList,addFeiBaSet,editFeiBaSet,deleteFeiba,getRackSetList,addRackSet,editRackSet,deleteRackSet} from '@/api/equiptManagement/workwearManagement'
import { add } from '@/api/system/menu.js';
import {feiBaOption,rackOption} from './columnData.js'
export default {
  data() {
    return {
      loading: false,
      tabPosition: "feiBaSet",
      feibaLoading:false,
      gjLoading:false,
      feiBaOption:feiBaOption,
      rackOption:rackOption,
      selectionList: [],
      formInline: {
        type: "", //统计类型
        user: "", //调度员
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option: {
        columnSort: true,
        tip: false,
        height: "auto",
        calcHeight: 32,
        simplePage: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: true,
        selection: true,
        viewBtn: false,
        delBtn: false,
        labelWidth: 120,
        searchLabelWidth: 120,
        menuWidth: 100,
        dialogWidth: 600,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: true,
        gridBtn: false,
        index: false,
        searchShowBtn: false,
        searchLabelPosition: "left",
        searchLabelPosition: "left",
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: "left",
        gridBtn: false,
        searchMenuPosition: "right",
        addBtnIcon: " ",
        viewBtnIcon: " ",
        delBtnIcon: " ",
        editBtnIcon: " ",
        align: "center",

        column: [],
      },
      data: [],
    };
  },
  methods: {
    // 选中表格数据
    selectionChange(list) {
      this.selectionList = list;
    },
    removeFn() {
      if (this.selectionList.length === 0) {
        return this.$message.warning("请先选择数据再进行删除！");
      }
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if(this.tabPosition == "feiBaSet"){
          deleteFeiba({ids:this.selectionList.map(item => item.id).join(',')}).then(res =>{
            if(res.data.code == 200){
              this.$message.success('删除成功')
              this.getFeiBa()
            }
          })
        }else{
          deleteRackSet({ids:this.selectionList.map(item => item.id).join(',')}).then(res =>{
            if(res.data.code == 200){
              this.$message.success('删除成功')
              this.getRackSet()
            }
          })
        }
      }).catch(() => {
        this.$message.info("取消删除");
      });
    },
    // 搜索
    searchChange(params, done) {
      if (this.tabPosition == "feiBaSet") {
        this.query = params;
        this.page.currentPage = 1;
        this.getFeiBa();
        done();
      }else{
        this.query = params;
        this.page.currentPage = 1;
        this.getRackSet();
        done();
      }
      
    },
    // 重置
    searchReset() {
      if (this.tabPosition == "feiBaSet") {
        this.query = {};
        this.getFeiBa();
        done();
      }else{
        this.query = {};
        this.getRackSet();
        done();
      }
    },
    rowSave(row, done, loading){
      if (this.tabPosition == "feiBaSet") {
        let params = {
          fsCode:row.fsCode,
          fsType:row.fsType
        }
        addFeiBaSet(params).then(res =>{
          if(res.data.code == 200){
            this.$message.success('新增成功')
            done()
            this.getFeiBa()
          }
        })
      }else{
        let params = {
          rsCode:row.rsCode,
          rsType:row.rsType
        }
        addRackSet(params).then(res =>{
          if(res.data.code == 200){
            this.$message.success('新增成功')
            done()
            this.getRackSet()
          }
        })
      }
    },
    rowUpdate(row, index, done, loading){
      if (this.tabPosition == "feiBaSet") {
        let params = {
          id:row.id,
          fsCode:row.fsCode,
          fsType:row.fsType
        }
        editFeiBaSet(params).then(res =>{
          if(res.data.code == 200){
            this.$message.success('修改成功')
            done()
            this.getFeiBa()
          }else{
            this.$message.error(res.data.message)
            done()
          }
        })
      }else{
        let params = {
          id:row.id,
          rsCode:row.rsCode,
          rsType:row.rsType
        }
        editRackSet(params).then(res =>{
          if(res.data.code == 200){
            this.$message.success('修改成功')
            done()
            this.getRackSet()
          }else{
            this.$message.error(res.data.message)
            done()
          }
        })
      }
    },
    getFeiBa(){
      // this.feibaLoading = true
      getFeiBaSetList({
          current:this.page.currentPage,
          size:this.page.pageSize,
          ...this.query
        }).then(res =>{
          this.data = res.data.data.records
          this.page.total = res.data.data.total
          // setTimeout(() => {
          //   this.feibaLoading = false
          // }, 50);
        })
    },
    getRackSet(){
      // this.gjLoading = true
      getRackSetList({
        current:this.page.currentPage,
        size:this.page.pageSize,
        ...this.query
      }).then(res =>{
        this.data = res.data.data.records
        this.page.total = res.data.data.total
        // setTimeout(() => {
        //   this.gjLoading = false
        // }, 50);
      })
    },
    tabPositionChange(value, event) {
      this.option.column = columnData[this.tabPosition];
      if (this.tabPosition == "feiBaSet") {
        this.getFeiBa()
      } else {
        this.getRackSet()
      }
    },
    onLoad() {},
  },
  mounted() {
    this.option.column = columnData[this.tabPosition];
    this.tabPositionChange();
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
  margin: 0 12px 0 12px !important;
}
</style>