jonhon-mes-web/src/views/productionManagement/components/coatingMater/addRequirements.vue

<template>
  <div>
    <!-- 表格数据 -->
    <avue-crud
      :height="460"
      :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="row">
        <!-- <el-button type="primary" @click="handleAdd">需求申报</el-button>-->
        <el-button type="primary" @click="addQuantityClick">添加量申报</el-button>
        <el-button type="primary" @click="handleApprove">批量审核</el-button>
      </template>
      <template #menu-right>
        <el-button type="warning" @click="pendingReviewFn()">待审核</el-button>
      </template>
      <template #menu="{ row }">
        <el-button type="text" @click="handleView(row)">详情</el-button>
      </template>
    </avue-crud>
    <add-quantity :add-quantity="addQuantity" @closeDialog="closeDialog"></add-quantity>
    <add-dialog :add-dialog="addDialog" @closeDialog="closeDialog" :id="id"></add-dialog>
    <el-dialog append-to-body width="550px" title="审批" v-model="approveDialog">
      <el-form ref="approveForm" :model="approveForm" :rules="approveRules">
        <el-form-item label="审批结果" prop="approvalStatus">
          <el-radio-group v-model="approveForm.approvalStatus" @input="changeType">
            <el-radio :label="10001">审批通过</el-radio>
            <el-radio :label="10005">审批不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审批意见" prop="approvalMemo">
          <el-input type="textarea" v-model="approveForm.approvalMemo"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="approveDialog = false">取消</el-button>
          <el-button type="primary" @click="submitApprove">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getList, confirmBatch } from '@/api/productionManagement/addRequirements';
import coatingColumnData from '../../js/coatingColumnData';
import addQuantity from '../addQuantity.vue';
import addDialog from '../addDialog.vue';
export default {
  components: {
    addQuantity,
    addDialog,
  },
  data() {
    return {
      id: null,
      searchForm: {},
      tabPosition: 'addRequirements',
      loading: false,
      data: [],
      form: {},
      addDialog: false,
      showDialog: false,
      approveForm: {},
      addQuantity: false,
      option: {
        columnSort: true,
        tip: false,
        height: 'auto',
        calcHeight: 32,
        simplePage: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: false,
        selection: true,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        addBtnIcon: ' ',
        viewBtnIcon: ' ',
        delBtnIcon: ' ',
        editBtnIcon: ' ',
        addBtn: false,
        labelWidth: 120,
        searchLabelWidth: 120,
        menu: true,
        menuWidth: 70,
        dialogWidth: 600,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: true,
        gridBtn: false,
        searchShowBtn: false,
        showOverflowTooltip: true,
        searchLabelPosition: 'left',
        filterBtn: true,
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: 'left',
        gridBtn: false,
        searchMenuPosition: 'right',
        align: 'center',
        column: [
          {
            label: '需求单号',
            prop: 'demandCode',
            span: 24,
            overflow: true,
            search: true,
            headerAlign: 'center',
            align: 'center',
            searchLabelWidth: 80,
            rules: [
              {
                required: true,
                message: '请输入需求单号',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '作业中心',
            prop: 'wcId',
            span: 24,
            type: 'select',
            width: 150,
            overflow: true,
            search: true,
            headerAlign: 'center',
            align: 'center',
            searchLabelWidth: 80,
            rules: [
              {
                required: true,
                message: '请输入作业中心',
                trigger: 'blur',
              },
            ],
            dicUrl: '/blade-desk/bsWorkCenter/getList',
            props: {
              label: 'wcName',
              value: 'id',
            },
          },
          {
            label: '物料编号',
            prop: 'goodsCode',
            span: 24,
            width: 150,
            overflow: true,
            search: false,
            headerAlign: 'center',
            align: 'center',
            rules: [
              {
                required: true,
                message: '请输入物料编号',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '物料名称',
            prop: 'goodsName',
            span: 24,
            width: 150,
            overflow: true,
            search: false,
            headerAlign: 'center',
            align: 'center',
            rules: [
              {
                required: true,
                message: '请输入物料名称',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '镀层物料需求(克)',
            prop: 'goodsDemand',
            span: 24,
            overflow: true,
            search: false,
            headerAlign: 'center',
            align: 'center',
            width: 160,
            rules: [
              {
                required: true,
                message: '请输入金钾申报量(克)',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '已使用(克)',
            prop: 'usedGoldVal',
            span: 24,
            overflow: true,
            search: false,
            headerAlign: 'center',
            align: 'center',
            rules: [
              {
                required: true,
                message: '请输入金钾申报量(克)',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '申报量(克)',
            prop: 'declaredQuota',
            span: 24,
            overflow: true,
            search: false,
            headerAlign: 'center',
            align: 'center',
            rules: [
              {
                required: true,
                message: '请输入银钾申报量(克)',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '剩余量(克)',
            prop: 'surplus',
            span: 24,
            overflow: true,
            search: false,
            headerAlign: 'center',
            align: 'center',
            rules: [
              {
                required: true,
                message: '请输入银板申报量(克)',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '状态',
            prop: 'status',
            span: 24,
            overflow: true,
            search: true,
            type: 'select',
            headerAlign: 'center',
            align: 'center',
            searchLabelWidth: 50,
            rules: [
              {
                required: true,
                message: '请输入状态',
                trigger: 'blur',
              },
            ],
            dicData: [
              // { label: '待领取', value: 1 },
              // { label: '已领取', value: 2 },
              // { label: '已过期', value: 3 },
              { label: '待审核', value: 10000 },
              { label: '审核通过', value: 10001 },
              { label: '使用中', value: 10002 },
              { label: '审核不通过', value: 10005 },
              { label: '已完成', value: 10004 },
              { label: '已超期', value: 10003 },
              { label: '已关闭', value: 10006 },
            ],
          },
          {
            label: '创建人',
            prop: 'createUserName',
            span: 24,
            overflow: true,
            search: false,
            headerAlign: 'center',
            align: 'center',
            rules: [
              {
                required: true,
                message: '请输入申报人',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '创建时间',
            prop: 'createTime',
            span: 24,
            overflow: true,
            search: false,
            headerAlign: 'center',
            align: 'center',
            width:160,
            rules: [
              {
                required: true,
                message: '请输入创建时间',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
      approveRules: {
        approvalStatus: [{ required: true, message: '请选择审批结果', trigger: 'blur' }],
        approvalMemo: [{ required: true, message: '请输入审核意见', trigger: 'blur' }],
      },
      approveDialog: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      query: {},
    };
  },
  mounted() {
    // this.option.column = coatingColumnData[this.tabPosition];
  },
  methods: {
    // 待审核搜索
    pendingReviewFn() {
      this.query.status = 10000;
      this.onLoad();
      // this.onLoad(this.page, { type: '2' });
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    // 多选
    selectionChange(list) {
      this.selectionList = list;
    },
    // 点击详情
    handleView(row) {
      this.id = row.id;
      this.addDialog = true;
    },
    deleteRow(row) {
      this.$confirm('确定删除此条数据?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {});
    },
    closeRow() {
      this.$confirm('确定删除此条数据?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {});
    },
    // 新增按钮点击
    handleAdd() {
      this.showDialog = true;
    },
    // 关闭弹窗
    closeDialog(val) {
      this.showDialog = false;
      this.addQuantity = false;
      this.addDialog = false;
      if (val) {
        this.onLoad();
      }
    },
    addQuantityClick() {
      // if (this.selectionList.length == 0) {
      //   this.$message.error('请至少选择一条数据!')
      // } else {
      this.addQuantity = true;
      // }
    },
    approveRow() {
      this.approveDialog = true;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    handleApprove() {
      if(this.selectionList.length == 0){
        this.$message.error('请至少选择一条数据!');
        return
      }
      let tmp = this.selectionList.find(item => item.status != 10000)
      if(tmp){
        this.$message.error('请选择状态为【待审核】的数据')
        return
      }
      this.approveDialog = true;
    },
    submitApprove() {
      this.$refs.approveForm.validate(valid => {
        console.log('valid==============', valid);
        if (valid) {
          const ids = this.selectionList.map(item => item.id).join(',');
          confirmBatch({ ...{ ids }, ...this.approveForm }).then(res => {
            if (res.data.code === 200) {
              this.$message.success('审核成功');
              this.approveDialog = false;
              this.$refs.crud.toggleSelection();
              this.onLoad();
            }
          });
          // this.approveDialog = false;
          // this.$refs.crud.toggleSelection();
          // this.onLoad(this.page);
        }
      });
    },
    async onLoad(page, params = {}) {
      try {
        this.loading = true;
        const res = await getList({
          current: this.page.currentPage,
          size: this.page.pageSize,
          ...this.query,
        });
        // if (res.code) {
        this.data = res.data.data.records;
        this.page.total = res.data.data.total;
        // this.selectionClear();
        this.loading = false;
        // }
      } catch (err) {
        console.log(err);
      }
      // this.data = [
      //   {
      //     id: 1,
      //     requiredCode: '001',
      //     workCenter: 1,
      //     goodsCode: 'wl_001',
      //     goodsName: '物料名称',
      //     goldPotassium: 20,
      //     silverPotassium: 30,
      //     coefficient: 2,
      //     usageAmount: 20,
      //     goodsDemandResidue: 20,
      //     status: 1,
      //     ordersNumber: 15,
      //     createMan: '张三',
      //     createTime: '2025-10-20 11:20:32',
      //     saveGoldVal: 10,
      //     usedGoldVal: 20,
      //     saveSilverVal: 20,
      //     saveBoardVal: 0,
      //     createUser: '张三',
      //   },
      //   {
      //     id: 2,
      //     requiredCode: '002',
      //     workCenter: 1,
      //     goodsCode: 'wl_002',
      //     goodsName: '物料名称',
      //     goldPotassium: 20,
      //     silverPotassium: 30,
      //     coefficient: 2,
      //     usageAmount: 20,
      //     goodsDemandResidue: 20,
      //     status: 2,
      //     ordersNumber: 15,
      //     createMan: '张三',
      //     createTime: '2025-10-20 11:20:32',
      //     saveGoldVal: 10,
      //     usedGoldVal: 20,
      //     saveSilverVal: 20,
      //     saveBoardVal: 0,
      //     createUser: '张三',
      //   },
      //   {
      //     id: 3,
      //     requiredCode: '002',
      //     workCenter: 1,
      //     goodsCode: 'wl_001',
      //     goodsName: '物料名称',
      //     goldPotassium: 20,
      //     silverPotassium: 30,
      //     coefficient: 2,
      //     usageAmount: 20,
      //     goodsDemandResidue: 20,
      //     status: 3,
      //     ordersNumber: 15,
      //     createMan: '张三',
      //     createTime: '2025-10-20 11:20:32',
      //     saveGoldVal: 10,
      //     usedGoldVal: 20,
      //     saveSilverVal: 20,
      //     saveBoardVal: 0,
      //     createUser: '张三',
      //   },
      //   {
      //     id: 4,
      //     requiredCode: '002',
      //     workCenter: 1,
      //     goodsCode: 'wl_001',
      //     goodsName: '物料名称',
      //     goldPotassium: 20,
      //     silverPotassium: 30,
      //     coefficient: 2,
      //     usageAmount: 20,
      //     goodsDemandResidue: 20,
      //     status: 4,
      //     ordersNumber: 15,
      //     createMan: '张三',
      //     createTime: '2025-10-20 11:20:32',
      //     saveGoldVal: 10,
      //     usedGoldVal: 20,
      //     saveSilverVal: 20,
      //     saveBoardVal: 0,
      //     createUser: '张三',
      //   },
      //   {
      //     id: 5,
      //     requiredCode: '002',
      //     workCenter: 1,
      //     goodsCode: 'wl_001',
      //     goodsName: '物料名称',
      //     goldPotassium: 20,
      //     silverPotassium: 30,
      //     coefficient: 2,
      //     usageAmount: 20,
      //     goodsDemandResidue: 20,
      //     status: 5,
      //     ordersNumber: 15,
      //     createMan: '张三',
      //     createTime: '2025-10-20 11:20:32',
      //     saveGoldVal: 10,
      //     usedGoldVal: 20,
      //     saveSilverVal: 20,
      //     saveBoardVal: 0,
      //     createUser: '张三',
      //   },
      // ];
    },
  },
};
</script>

<style></style>