jonhon-mes-web/src/views/productionManagement/coatingMaterial.vue

<template>
  <basic-container>
    <el-tabs v-model="tabPosition" class="demo-tabs" @tab-change="tabPositionChange">
      <el-tab-pane label="物料需求申报" name="materialRequirements"></el-tab-pane>
      <el-tab-pane label="添加量申报" name="addRequirements"></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 v-if="tabPosition == 'materialRequirements'" #menu-left="row">
        <el-button  type="primary" @click="handleAdd">新 增</el-button>
        <el-button @click="handleApprove">批量审核</el-button>
        <el-button @click="addQuantityClick">添加量申报</el-button>
      </template>
      <template #menu="{ row }">
        <el-button type="text" @click="handleView(row)">详情</el-button>
        <el-button type="text" @click="closeRow(row)" v-show="row.status != '3' && tabPosition == 'materialRequirements'">关闭</el-button>
        <el-button type="text" v-show="row.status == '3' && tabPosition == 'materialRequirements'" @click="deleteRow">删除</el-button>
        <el-button type="text" v-show="row.status == '1' && tabPosition == 'materialRequirements'" @click="approveRow(row)">审核</el-button>
      </template>
    </avue-crud>
    <coating-add-dialog :show-dialog="showDialog" @closeDialog="closeDialog"></coating-add-dialog>
    <material-detail :material-dialog="materialDialog" @closeDialog="closeDialog"></material-detail>
    <add-quantity :add-quantity="addQuantity"  @closeDialog="closeDialog"></add-quantity>
    <add-dialog :add-dialog="addDialog" @closeDialog="closeDialog"></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="approveREsult">
          <el-radio-group v-model="approveForm.approveREsult" @input="changeType">
            <el-radio :label="1">审批通过</el-radio>
            <el-radio :label="0">审批不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审批意见" prop="approvalOpinion">
          <el-input type="textarea" v-model="approveForm.approvalOpinion"></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>
  </basic-container>
</template>

<script>
import coatingAddDialog from './components/coatingAddDialog.vue';
import coatingColumnData from './js/coatingColumnData';
import materialDetail from './components/materialDetail.vue';
import addQuantity from './components/addQuantity.vue';
import addDialog from './components/addDialog.vue';
export default {
  components: {
    coatingAddDialog,
    materialDetail,
    addQuantity,
    addDialog
  },
  data() {
    return {
      searchForm: {},
      tabPosition: 'materialRequirements',
      loading: false,
      data: [],
      form: {},
      addDialog:false,
      showDialog: false,
      materialDialog: 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,
        delBtnIcon: ' ',
        addBtn: false,
        labelWidth: 120,
        searchLabelWidth: 120,
        menu: true,
        menuWidth: 180,
        dialogWidth: 600,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: true,
        gridBtn: false,
        searchShowBtn: false,
        showOverflowTooltip: true,
        searchLabelPosition:'left',
        filterBtn:true,
searchLabelPosition:'left',
 searchGutter:24,
  searchSpan:6,
menuAlign: 'left',
gridBtn:false,
searchMenuPosition:'right',
        column: []
      },
      approveRules:{
        approveREsult:[{required:true,message:'请选择审批结果',trigger:'blur'}]
      },
      approveDialog:false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList:[]
    }
  },
  mounted() {
    this.option.column = coatingColumnData[this.tabPosition]

  },
  methods: {
    tabPositionChange() {
      this.option.column = coatingColumnData[this.tabPosition]
      if (this.tabPosition == 'materialRequirements') {
        this.data = [
          {
            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'
          },
          {
            requiredCode: "002", workCenter: 1, goodsCode: 'wl_001', goodsName: "物料名称", goldPotassium: 20,
            silverPotassium: 30, coefficient: 2, usageAmount: 20, goodsDemandResidue: 20, status: 2,
            ordersNumber: 15, createMan: '张三', createTime: '2025-10-20 11:20:32'
          },
          {
            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'
          },
          {
            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'
          },
          {
            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'
          },
        ]
        this.page.total = this.data.length
      } else {
        this.data = [
          {
            requiredCode: "001", workCenter: 1, goodsCode: 'wl_001', goodsName: "物料名称", goldPotassium: 20,
            silverPotassium: 30, coefficient: 2, usageAmount: 20, goodsDemandResidue: 20, status: 2,
            ordersNumber: 15, createMan: '张三', createTime: '2025-10-20 11:20:32'
          },
          {
            requiredCode: "002", workCenter: 1, goodsCode: 'wl_001', goodsName: "物料名称", goldPotassium: 20,
            silverPotassium: 30, coefficient: 2, usageAmount: 20, goodsDemandResidue: 20, status: 2,
            ordersNumber: 15, createMan: '张三', createTime: '2025-10-20 11:20:32'
          },
        ]
        this.page.total = this.data.length
      }
    },
    // 多选
    selectionChange(list) {
      this.selectionList = list;
    },
    // 点击详情
    handleView(row) {
      if(this.tabPosition == 'materialRequirements'){
        this.materialDialog = true
      }else{
        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() {
      this.showDialog = false
      this.materialDialog = false
      this.addQuantity = false
      this.addDialog = false
    },
    addQuantityClick(){
      if(this.selectionList.length == 0){
        this.$message.error('请至少选择一条数据!')
      }else{
        this.addQuantity = true
      }
    },
    approveRow(){
      this.approveDialog = true
    },
    handleApprove(){
      if(this.selectionList.length != 0){
        this.approveDialog = true
      }else{
        this.$message.error('请至少选择一条数据!')
      }
    },
    submitApprove(){
      this.$refs.approveForm.validate(valid => {
        console.log('valid==============',valid)
        if (valid) {
          this.approveDialog = false
        }
      })
    },
    onLoad() {
      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'
        },
        {
          id:2,
          requiredCode: "002", workCenter: 1, goodsCode: 'wl_001', goodsName: "物料名称", goldPotassium: 20,
          silverPotassium: 30, coefficient: 2, usageAmount: 20, goodsDemandResidue: 20, status: 2,
          ordersNumber: 15, createMan: '张三', createTime: '2025-10-20 11:20:32'
        },
        {
          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'
        },
        {
          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'
        },
        {
          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'
        },
      ]
      this.page.total = this.data.length
    },
  }
}
</script>

<style></style>