jonhon-mes-web/src/views/warehouseManagement/materialMaintenance.vue

<template>
  <basic-container>
    <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"
      @row-update="rowUpdate"
      :before-open="beforeOpen"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
      :row-class-name="tableRowClassName"
      @sort-change="sortChange"
    >
      <template #deptName="{ row }">{{ row.dept && row.dept.deptName }}</template>
      <template #materialGoods="{ row }">{{ row.materialGoods.goodsCode }}</template>
      <template #menu-left>
        <div style="display: flex">
          <el-input v-model="goodsCode" placeholder="请输入物料编码"></el-input>
          <el-button type="primary" style="margin-left: 10px" @click="handleAdd" v-if="permission.materialMaintain_add">新增</el-button>
        </div>
      </template>
      <template #used="scope">
        <el-switch
          v-model="scope.row.used"
          :active-value="true"
          :inactive-value="false"
          active-color="#ff4949"
          inactive-color="#13ce66"
          :disabled="!permission.materialMaintain_isUsed"
          @change="rowUpdate(scope.row)"
        />
      </template>
      <template #minWarning="scope">
        <el-switch
          v-model="scope.row.minWarning"
          :active-value="true"
          :inactive-value="false"
          active-color="#ff4949"
          :disabled="!permission.materialMaintain_minWarning"
          inactive-color="#13ce66"
          @change="rowUpdate(scope.row)"
        />
      </template>
    </avue-crud>
    <!-- 新增 -->
    <materialAdd
      v-if="materialAddShow"
      :show-dialog="materialAddShow"
      :rowItem="rowItem"
      @closeDialog="closeDialog"
    ></materialAdd>
  </basic-container>
</template>

<script>
import { getGoodsList, addGoods, editGoods } from '@/api/storeManagement/materialMaintenance';
// import { edit } from '@/api/orderManagement/exceptionOrder';
import materialAdd from './components/materialAdd.vue';
import { mapGetters } from 'vuex';
export default {
  components: { materialAdd },
  data() {
    return {
      materialAddShow: false,
      rowItem: {},
      goodsCode: '',
      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: false,
        editBtn: true,
        addBtnIcon: ' ',
        viewBtnIcon: ' ',
        delBtnIcon: ' ',
        editBtnIcon: ' ',
        editBtnText: '修改',
        addBtn: false,
        labelWidth: 120,
        searchLabelWidth: 120,
        menu: true,
        menuWidth: 80,
        dialogWidth: '60%',
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: true,
        gridBtn: false,
        searchShowBtn: false,
        showOverflowTooltip: true,
        searchLabelPosition: 'left',
        searchLabelWidth: 'auto',
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: 'center',
        gridBtn: false,
        searchMenuPosition: 'right',
        column: [
          {
            label: '物料编码',
            prop: 'goodsCode',
            span: 12,
            sortable: 'custom',
            editDisabled: true,
            overflow: true,
            search: true,
            width: 120,
          },
          {
            label: '物料名称',
            prop: 'goodsName',
            editDisabled: true,
            sortable: 'custom',
            span: 12,
            overflow: true,
            search: true,
            width: 120,
          },
          {
            label: '采购部门',
            prop: 'deptName',
            span: 12,
            editDisplay: false,
            overflow: true,
            search: false,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入采购部门',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '型号/牌号',
            prop: 'specifications',
            span: 12,
            sortable: 'custom',
            overflow: true,
            editDisplay: false,
            search: true,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入型号/牌号',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '计量单位',
            prop: 'unitName',
            sortable: 'custom',
            span: 12,
            // editDisplay: false,
            overflow: true,
            search: false,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入计量单位',
                trigger: 'blur',
              },
            ],
          },
          {
            label: 'PDM单位',
            prop: 'pdmUnit',
            sortable: 'custom',
            span: 12,
            editDisplay: false,
            overflow: true,
            search: false,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入PDM单位',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '物料类别',
            prop: 'gcId',
            span: 12,
            sortable: 'custom',
            type: 'select',
            // editDisplay: false,
            overflow: true,
            search: false,
            width: 120,
            rules: [
              {
                required: false,
                message: '请输入物料类别',
                trigger: 'blur',
              },
            ],
            dicUrl: '/api/blade-wms/stGoodsClass/findGoodsClass',
            props: {
              label: 'gcName',
              value: 'id',
            },
          },
          {
            label: '是否工艺审批',
            prop: 'processApproval',
            sortable: 'custom',
            type: 'select',
            dicData: [
              { label: '是', value: true },
              { label: '否', value: false },
            ],
            span: 12,
            overflow: true,
            search: false,
            width: 120,
            // rules: [
            //     {
            //         required: true,
            //         message: '请输入是否工艺审批',
            //         trigger: 'blur',
            //     },
            // ],
          },
          {
            label: '补制类型',
            prop: 'reissueType',
            type: 'select',
            sortable: 'custom',
            dicData: [
              // /**
              // * 补制类型 - 无
              // */
              // public static Short REISSUE_TYPE_NONE = 0;

              // /**
              //  * 补制类型 - 物料出库
              //  */
              // public static Short REISSUE_TYPE_GOODS_OUT = 1;

              // /**
              //  * 补制类型 - 最低库存
              //  */
              // public static Short REISSUE_TYPE_MIN_STOCK = 2;
              { label: '无', value: 0 },
              { label: '物料出库', value: 1 },
              { label: '最低库存', value: 2 },
            ],
            span: 12,
            overflow: true,
            search: false,
            width: 120,
            rules: [
              {
                required: true,
                message: '请选择补制类型',
                trigger: 'blur',
              },
            ],
            change: val => {
              if (val.value != 0) {
                let tmp = this.option.column.find(item => item.prop == 'gcId');
                tmp.rules[0].required = true;
                if (val.value == 2) {
                  let tmp = this.option.column.find(item => item.prop == 'minNum');
                  tmp.rules[0].required = true;
                } else {
                  let tmp = this.option.column.find(item => item.prop == 'minNum');
                  tmp.rules[0].required = false;
                }
              } else {
                let tmp = this.option.column.find(item => item.prop == 'gcId');
                tmp.rules[0].required = false;
                let tmp1 = this.option.column.find(item => item.prop == 'minNum');
                tmp1.rules[0].required = false;
              }
            },
          },
          {
            label: '等级',
            prop: 'grade',
            editDisplay: false,
            span: 12,
            overflow: true,
            sortable: 'custom',
            search: false,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入等级',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '最高库存',
            prop: 'maxNum',
            span: 12,
            overflow: true,
            search: false,
            sortable: 'custom',
            width: 120,
            // rules: [
            //     {
            //         required: true,
            //         message: '请输入最高库存',
            //         trigger: 'blur',
            //     },
            // ],
          },
          {
            label: '最低库存',
            prop: 'minNum',
            span: 12,
            overflow: true,
            sortable: 'custom',
            search: false,
            width: 120,
            rules: [
              {
                required: false,
                message: '请输入最低库存',
                trigger: 'blur',
              },
            ],
          },

          {
            label: '采购数量',
            prop: 'purchaseQuantity',
            span: 12,
            sortable: 'custom',
            overflow: true,
            search: false,
            width: 120,
            // rules: [
            //     {
            //         required: true,
            //         message: '请输入采购数量',
            //         trigger: 'blur',
            //     },
            // ],
          },
          {
            label: '是否启用',
            editDisplay: true,
            prop: 'used',
            sortable: 'custom',
            type: 'switch',
            dicData: [
              { label: '关', value: false },
              { label: '开', value: true },
            ],
            span: 12,
            overflow: true,
            search: false,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入是否停用',
                trigger: 'blur',
              },
            ],
          },
          // {
          //     label: '周期/天',
          //     prop: 'cycle',
          //     span: 12,
          //     overflow: true,
          //     search: false,
          //     width: 120,
          //     // rules: [
          //     //     {
          //     //         required: true,
          //     //         message: '请输入周期/天',
          //     //         trigger: 'blur',
          //     //     },
          //     // ],
          // },
          {
            label: '版本',
            prop: 'releaseNo',
            span: 12,
            overflow: true,
            editDisplay: false,
            search: false,
            sortable: 'custom',
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入版本',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '属性',
            prop: 'materialProperty',
            span: 12,
            overflow: true,
            editDisplay: false,
            search: false,
            sortable: 'custom',
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入属性',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '当前库存',
            prop: 'currentQuantity',
            editDisplay: false,
            sortable: 'custom',
            span: 12,
            overflow: true,
            search: false,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入当前库存',
                trigger: 'blur',
              },
            ],
          },
          {
            editDisplay: false,
            label: '在途',
            prop: 'onthewayQuantity',
            sortable: 'custom',
            span: 12,
            overflow: true,
            search: false,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入在途',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '锁料',
            prop: 'lockQuantity',
            sortable: 'custom',
            span: 12,
            overflow: true,
            editDisplay: false,
            search: false,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入锁料',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '组件模式',
            prop: 'prtType',
            span: 12,
            overflow: true,
            search: false,
            sortable: 'custom',
            hide: true,
            width: 120,
            // rules: [
            //     {
            //         required: true,
            //         message: '请输入组件模式',
            //         trigger: 'blur',
            //     },
            // ],
          },
          {
            label: '最低库存预警',
            prop: 'minWarning',
            sortable: 'custom',
            type: 'switch',
            dicData: [
              { label: '关', value: false },
              { label: '开', value: true },
            ],
            span: 12,
            overflow: true,
            search: false,
            width: 120,
            rules: [
              {
                required: true,
                message: '请选择是否开启最低库存预警',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
      loading: false,
      data: [],
      form: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      query: {},
    };
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        editBtn: this.validData(this.permission.materialMaintain_edit, false),
      };
    },
  },
  mounted() {},
  methods: {
    // 排序
    sortChange({ prop, order }) {
      this.query.descs = undefined;
      this.query.ascs = undefined;
      let orderByFieldKey = order === 'descending' ? 'descs' : 'ascs';
      this.query[orderByFieldKey] = !prop
        ? undefined
        : prop.replace(/([a-z])([A-Z0-9])/g, '$1_$2').toUpperCase();
        // 重新加载数据
      this.onLoad(this.page, this.query);
    },
    closeDialog() {
      this.materialAddShow = false;
      this.onLoad(this.page);
    },
    handleAdd() {
      if (this.goodsCode == '') {
        this.$message.error('请填写物料编码');
        return;
      }
      addGoods({
        goodsCode: this.goodsCode,
      }).then(res => {
        if (res.data.code == 200) {
          this.rowItem = res.data.data;
          this.title = '新增';
          this.materialAddShow = true;
        }
      });
    },
    tableRowClassName({ row }) {
      if (!row.unitName) {
        return 'warning-row';
      }
      return '';
    },

    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad();
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad();
    },
    beforeOpen(done, type) {
      if (type == 'edit') {
        this.form.minWarning = this.form.minWarning != '' ? this.form.minWarning : false;
        this.form.reissueType =
          this.form.reissueType && this.form.reissueType != -1 ? this.form.reissueType : 0;
        this.form.gcId = this.form.gcId == -1 ? '' : this.form.gcId;
        if (this.form.reissueType != 0) {
          let tmp = this.option.column.find(item => item.prop == 'gcId');
          tmp.rules[0].required = true;
          if (this.form.reissueType == 2) {
            let tmp = this.option.column.find(item => item.prop == 'minNum');
            tmp.rules[0].required = true;
          } else {
            let tmp = this.option.column.find(item => item.prop == 'minNum');
            tmp.rules[0].required = false;
          }
        } else {
          let tmp = this.option.column.find(item => item.prop == 'gcId');
          tmp.rules[0].required = false;
          let tmp1 = this.option.column.find(item => item.prop == 'minNum');
          tmp1.rules[0].required = false;
        }
        done();
      } else {
        done();
      }
    },
    rowUpdate(row, index, done, loading) {
      console.log('row----------------', row);
      row.minWarning = row.minWarning ? 1 : 0;
      editGoods(row).then(res => {
        if (res.data.code == 200) {
          this.$message.success('修改成功');
          this.onLoad();
          done();
        }
      });
    },
    onLoad() {
      getGoodsList({
        current: this.page.currentPage,
        size: this.page.pageSize,
        ...this.query,
      }).then(res => {
        res.data.data.records.forEach(item => {
          item.minWarning = item.minWarning == 1 ? true : false;
        });
        this.data = res.data.data.records;
        this.page.total = res.data.data.total;
      });
    },
  },
};
</script>

<style scoped>
:deep(.warning-row) {
  background-color: rgba(40, 167, 69, 0.5) !important; /* 淡红色背景 */
}
</style>