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
      :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-left>
        <el-button type="danger" plain @click="removeFn">删除</el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>
<script>
import columnData from "./columnData.js";
export default {
  data() {
    return {
      loading: false,
      tabPosition: "feiBaSet",
      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: 140,
        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(() => {
          //   const obj = { list: [] };
          //   this.selectionArr.forEach((item) => {
          //     obj.list.push(item.rsId);
          //   });
          //   this.$ajax.post('bsRackSet/signDelete', obj).then((res) => {
          //     if (this.$ifAjax(res)) {
          //       this.$message.success(this.$t('global.deleteOk'));
          //       this.$refs.myTable.load();
          //     }
          //   });
        })
        .catch(() => {
          this.$message.info("取消删除");
        });
    },
    tabPositionChange(value, event) {
      this.option.column = columnData[this.tabPosition];
      if (this.tabPosition == "feiBaSet") {
        this.data = [
          {
            bindQty: 0,
            deleted: false,
            fsCode: "44444",
            fsId: 321,
            fsStatus: 1,
            fsStatusTitle: "空闲",
            fsType: "轱辘机",
            keyValue: 321,
          },
          {
            bindQty: 8,
            deleted: false,
            fsCode: "8DAu-GLJ2-022",
            fsId: 314,
            fsStatus: 2,
            fsStatusTitle: "已绑定",
            fsType: "轱辘机",
            keyValue: 314,
          },
          {
            bindQty: 3,
            deleted: false,
            fsCode: "DAu-GLJ2-021",
            fsId: 313,
            fsStatus: 2,
            fsStatusTitle: "已绑定",
            fsType: "轱辘机",
            keyValue: 313,
          },
          {
            bindQty: 2,
            deleted: false,
            fsCode: "DAu-GLJ2-020",
            fsId: 312,
            fsStatus: 2,
            fsStatusTitle: "已绑定",
            fsType: "轱辘机",
            keyValue: 312,
          },
        ];
      } else {
        this.data = [
          {
            bindQty: 0,
            deleted: false,
            keyValue: 341,
            rsCode: "77777",
            rsId: 341,
            rsStatus: 1,
            rsStatusTitle: "空闲",
            rsType: "挂具",
          },
          {
            bindQty: 1,
            deleted: false,
            keyValue: 337,
            rsCode: "RHNi-GJ-060",
            rsId: 337,
            rsStatus: 2,
            rsStatusTitle: "已绑定",
            rsType: "挂具",
          },
          {
            bindQty: 0,
            deleted: false,
            keyValue: 336,
            rsCode: "RHNi-GJ-059",
            rsId: 336,
            rsStatus: 1,
            rsStatusTitle: "空闲",
            rsType: "挂具",
          },
          {
            bindQty: 0,
            deleted: false,
            keyValue: 335,
            rsCode: "RHNi-GJ-058",
            rsId: 335,
            rsStatus: 1,
            rsStatusTitle: "空闲",
            rsType: "挂具",
          },
        ];
      }
      this.page.total = this.data.length;
    },
    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>