jonhon-mes-web/src/views/productionManagement/beforeAndAfterPlating/afterPlating.vue

<template>
  <basic-container>
    <el-tabs v-model="tabPosition" class="demo-tabs" @tab-change="tabPositionChange">
      <el-tab-pane label="镀前入库" name="beforePlatingEntry"></el-tab-pane>
      <el-tab-pane label="镀前出库" name="beforePlatingBound"></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"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template #menu-left>
        <el-button type="primary" @click="handleAdd(tabPosition)">新 增</el-button>
      </template>
      <template #tsId="scope">
        {{ scope.row.tsId == '' ? scope.row.ocId : scope.row.tsId }}
      </template>
    </avue-crud>
    <!-- 镀前入库新增 -->
    <before-plating-entry-dialog
      :show-dialog="showDialog"
      @closeDialog="closeDialog"
    ></before-plating-entry-dialog>
    <!-- 镀前出库 -->
    <before-plating-bound-dialog
      :show-dialog="boundDialog"
      @closeDialog="closeDialog"
    ></before-plating-bound-dialog>
    <!-- 镀后入库 -->
    <after-plating-entry-dialog
      :show-dialog="afterBoundDialog"
      @closeDialog="closeDialog"
    ></after-plating-entry-dialog>
  </basic-container>
</template>

<script>
import columnData from '../js/platingColumnData';
import beforePlatingEntryDialog from './components/beforePlatingEntryDialog.vue';
import beforePlatingBoundDialog from './components/beforePlatingBoundDialog.vue';
import afterPlatingEntryDialog from './components/afterPlatingEntryDialog.vue';
import { getList, deleteById } from '@/api/productionManagement/beforeAndAfterPlating';
export default {
  components: {
    beforePlatingEntryDialog,
    beforePlatingBoundDialog,
    afterPlatingEntryDialog,
  },
  data() {
    return {
      tabPosition: 'beforePlatingEntry',
      showDialog: false,
      boundDialog: false,
      afterBoundDialog: false,
      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: false,
        viewBtn: false,
        delBtn: true,
        editBtn: false,
        addBtn: false,
        labelWidth: 120,
        menu: false,
        menuWidth: 140,
        dialogWidth: 600,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: true,
        gridBtn: false,
        searchShowBtn: false,
        showOverflowTooltip: true,
        searchLabelPosition: 'left',
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: 'left',
        gridBtn: false,
        searchMenuPosition: 'right',
        addBtnIcon: ' ',
        viewBtnIcon: ' ',
        delBtnIcon: ' ',
        editBtnIcon: ' ',
        column: [],
      },
      data: [],
      tableData: [],
      cardNo: '',
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      query: {
        paType: 1, //1-镀前入库 2-镀前出库 3-镀后入库
      },
    };
  },
  mounted() {
    this.option.column = columnData[this.tabPosition];
  },
  methods: {
    // 点击新增按钮
    handleAdd(val) {
      if (val == 'beforePlatingEntry') {
        this.showDialog = true;
      } else if (val == 'beforePlatingBound') {
        this.boundDialog = true;
      } else {
        this.afterBoundDialog = true;
      }
    },
    rowDel() {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteById().then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.onLoad(this.page, this.query);
        });
      });
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page, this.query);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page, this.query);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page, this.query);
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    // 关闭弹窗
    closeDialog() {
      this.showDialog = false;
      this.boundDialog = false;
      this.afterBoundDialog = false;
      this.onLoad(this.page, this.query);
    },
    tabPositionChange(value, event) {
      this.option.column = columnData[this.tabPosition];
      this.option.menu = false;
      if (this.tabPosition == 'beforePlatingEntry') {
        this.query.paType = 1;
        this.onLoad(this.page, this.query);
      } else if (this.tabPosition == 'beforePlatingBound') {
        this.query.paType = 2;
        this.onLoad(this.page, this.query);
      } else {
        this.option.menu = true;
        this.query.paType = 3;
        this.onLoad(this.page, this.query);
      }
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        this.data = res.data.data.records;
        this.loading = false;
        this.page.total = res.data.data.total;
      });
    },
  },
};
</script>

<style></style>