factory_web/src/views/mtm/materials.vue

<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
      </div>
    </el-header>
    <el-main class="nopadding">
      <el-container>
        <el-header>
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" type="card">
            <el-tab-pane v-for="item in tabOptions" v-bind:key="item.name" :label="item.label" :name="item.name">
            </el-tab-pane>
          </el-tabs>
          <el-checkbox v-model="showHidden" label="显示隐式物料" @change="hiddenChange" />
        </el-header>
        <el-main class="nopadding">
          <scTable ref="table" :apiObj="apiObj" row-key="id" stripe>
            <el-table-column type="index" width="50" />
            <el-table-column label="物料编号" prop="number">
            </el-table-column>
            <el-table-column label="物料名称" prop="name">
            </el-table-column>
            <el-table-column label="物料类别" prop="type">
              <template #default="scope">
                <span><el-tag type="primary">{{ typeOptions[scope.row.type] }}</el-tag>
                  <el-tag type="warning" v-if="scope.row.is_assemb">组</el-tag>
                  <el-tag type="warning" v-if="scope.row.process_name">{{ scope.row.process_name }}</el-tag>
                  <el-tag type="warning" v-if="scope.row.is_hidden">隐</el-tag></span>
              </template>
            </el-table-column>
            <el-table-column label="规格型号" prop="specification">
            </el-table-column>
            <el-table-column label="关联物料" prop="brothers">
              <template #default="scope">
                <el-icon v-if="scope.row.brothers.length>0" color="green">
                    <CircleCheckFilled />
                </el-icon>
              </template>
            </el-table-column>
            <el-table-column label="计量单位" prop="unit">
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="100">
              <template #default="scope">
                <el-link type="primary" @click="table_edit(scope.row)" v-auth="'material.update'">
                  编辑
                </el-link>
                <el-divider direction="vertical"></el-divider>
                <el-link type="danger" @click="table_del(scope.row)" v-auth="'material.delete'">
                  删除
                </el-link>
              </template>
            </el-table-column>
          </scTable>
        </el-main>
      </el-container>

    </el-main>
  </el-container>
  <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess"
    @closed="dialog.save = false"></save-dialog>
</template>
<script>
import saveDialog from "./materials_form.vue";
export default {
  name: "rparty",
  components: {
    saveDialog,
  },
  data() {
    return {
      dialog: {
        save: false,
      },
      apiObj: null,
      query: { type: 10, is_hidden: false },
      activeName: '主要原料',
      selection: [],
      state_: {
        10: '完好',
        20: '限用',
        30: '在修',
        40: '禁用',
      },
      tabOptions: [
        { label: "成品", name: 10 },
        { label: "半成品", name: 20 },
        { label: "主要原料", name: 30 },
        { label: "辅助材料", name: 40 },
        { label: "加工工具", name: 50 },
        { label: "辅助工装", name: 60 },
        { label: "办公用品", name: 70 },
        // { label: "电/水/气", name: 0 },
      ],
      typeOptions: {
        0: '电/水/气',
        10: '成品',
        20: '半成品',
        30: '主要原料',
        40: '辅助材料',
        50: '加工工具',
        60: '辅助工装',
        70: '办公用品',
      },
      showHidden: false,
    };
  },
  mounted() {
    this.apiObj = this.$API.mtm.material.list
    this.$refs.table.queryData(this.query)
  },
  methods: {
    handleClick(pane, ev) {
      this.query.type = pane.props.name
      this.query.page = 1
      this.$refs.table.queryData(this.query)
    },
    //添加
    add() {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("add");
      });
    },
    //编辑
    table_edit(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("edit").setData(row);
      });
    },
    //查看
    table_show(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("show").setData(row);
      });
    },
    //删除
    async table_del(row) {
      this.$confirm(`确定删除吗？`, "提示", {
        type: "warning",
      }).then(() => {
        this.$API.mtm.material.delete.req(row.id).then((res) => {
          this.$message.success("删除成功");
          this.$refs.table.refresh();
          return res;
        }).catch((err) => {
          return err;
        });
      }).catch(() => { });
    },

    //本地更新数据
    handleSaveSuccess(data, mode) {
      if (mode == "add") {
        this.$refs.table.refresh();
      } else if (mode == "edit") {
        this.$refs.table.refresh();
      }
    },
    handleQuery() {
      this.$refs.table.queryData(this.query)
    },
    resetQuery() {
      this.query = {};
    },
    hiddenChange(val) {
      if (val) {
        this.query.is_hidden = ''
      }
      else {
        this.query.is_hidden = false
      }
      this.$refs.table.queryData(this.query)
    }
  },
};
</script>