CostumingPlatform/ant-design-vue-jeecg/src/views/productplan/ProductplanManage.vue

<template>
  <a-card :bordered="false">
    <template>
      <div>
        <el-descriptions border :column='4'>
          <el-descriptions-item label="工单编号 ">{{ planInfo.productCode }}</el-descriptions-item>
          <el-descriptions-item label="生产企业">{{ planInfo.productOrg }}</el-descriptions-item>
          <!--          <el-descriptions-item label="企业负责人 ">admin</el-descriptions-item>-->
          <el-descriptions-item label="车间 ">{{ planInfo.workshop }}</el-descriptions-item>
          <!--          <el-descriptions-item label="车间负责人 ">admin</el-descriptions-item>-->
          <el-descriptions-item label="班组">{{ planInfo.team }}</el-descriptions-item>
          <el-descriptions-item label="班组长">{{ planInfo.teamLade }}</el-descriptions-item>
          <el-descriptions-item label="产品类型">{{ planInfo.productType }}</el-descriptions-item>
          <el-descriptions-item label="产品编号">{{ planInfo.productNo }}</el-descriptions-item>
          <el-descriptions-item label="产品名称">{{ planInfo.productName }}</el-descriptions-item>
          <el-descriptions-item label="开始时间">{{ planInfo.workTime }}</el-descriptions-item>
          <el-descriptions-item label="生产时长">{{ planInfo.duration }}</el-descriptions-item>
          <el-descriptions-item label="生产状态">{{ planInfo.status }}</el-descriptions-item>
          <el-descriptions-item label="加急">{{ planInfo.speedUp }}</el-descriptions-item>
          <el-descriptions-item label="销售企业">{{ planInfo.salesEnterprise }}</el-descriptions-item>
          <el-descriptions-item label="订货期">{{ planInfo.orderTime }}</el-descriptions-item>
          <!--          <el-descriptions-item label="制定人">100</el-descriptions-item>-->
          <!--          <el-descriptions-item label="制定时间">100</el-descriptions-item>-->
          <el-descriptions-item label="审核人">{{ planInfo.auditBy }}</el-descriptions-item>
          <el-descriptions-item label="审核时间">{{ planInfo.auditTimr }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </template>

    <!-- table区域-begin -->
    <div>
      <j-vxe-table
        ref="xTable"
        toolbar
        :toolbarConfig="toolbarConfig"
        row-number
        row-selection
        keep-source
        :rowSelection="clickTrue"
        :clickSelectRow="clickTrue"
        :loading="loading"
        :columns="columns"
        @selectRowChange="handleSelectRowChange"
        :dataSource="dataSource"
        @valueChange="handleValueChange"
        @save="handleTableSave"
      >
        <template v-slot:toolbarSuffix>
          <a-button type="primary" icon="plus-circle" @click="syncProductProcess()">读取工序</a-button>
          <a-button type="primary" icon="download" @click="handleExportXls('计划工序')">导出</a-button>
          <a-button type="primary" icon="rollback" @click="fanHui()">返回</a-button>
        </template>
        <template v-slot:action="props">
          <a @click="jump2MianLiao('mianLiao',props)">面料</a>
            <a-divider type="vertical"/>
          <a @click="jump2FuLiao('fuLiao',props)">辅料</a>
            <a-divider type="vertical"/>
          <a @click="detail(props)">详情</a>
        </template>
      </j-vxe-table>
    </div>
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {getAction, postAction} from "@api/manage";
import {filterObj, pushIfNotExist, randomNumber, randomUUID} from "@/utils/util";
import {JVXETypes} from '@/components/jeecg/JVxeTable'
import Area from "@comp/_util/Area";

export default {
  name: 'ZyPlanProcessDataList',
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      toolbarConfig: {
        // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
        btn: ['save',]
      },
      description: '生产计划工序管理页面',
      loading: false,
      dataSource: [],
      columns: [
        {
          title: '工序名称',
          key: 'processName',
          width: '180px',
        },
        {
          title: '工位ID',
          key: 'stationId',
          type: JVXETypes.hidden,
        },
        {
          title: '工位名称',
          key: 'stationName',
          type: JVXETypes.select,
          width: '200px',
          options: [],
          placeholder: '请选择${title}',
        },
        {
          title: '设备名称',
          key: 'machineIds',
          type: JVXETypes.hidden
        },
        {
          title: '设备名称',
          key: 'machineNames',
          type: JVXETypes.selectMultiple,
          width: '180px',
          options: [],
          placeholder: '请选择${title}',
        },
        {
          title: 'toodsIds',
          key: 'toolsIds',
          type: JVXETypes.hidden,
        },
        {
          title: '工具名称',
          key: 'toolsNames',
          type: JVXETypes.selectMultiple,
          width: '180px',
          options: [],
          placeholder: '请选择${title}',
        },
        {key: 'proProcess', type: JVXETypes.hidden, title: '前导工序ID', width: '120px'},
        {
          title: '前导工序',
          key: 'proProcessName',
          type: JVXETypes.popup,
          width: '180px',
          popupCode: 'zy_process',
          field: 'id,process_code,process_name,process_describe',
          // orgFields: 'id,process_code,process_name,process_describe',
          // destFields: 'proProcessName,process_code,process_name,process_describe',
          orgFields: 'process_name,id',
          destFields: 'proProcessName,proProcess',
        },
        {key: 'postProcess', type: JVXETypes.hidden, title: '后导工序ID', width: '120px'},
        {
          title: '后导工序',
          key: 'postProcessName',
          type: JVXETypes.popup,
          width: '180px',
          popupCode: 'zy_process',
          field: 'id,process_code,process_name,process_describe',
          orgFields: 'process_name,id',
          destFields: 'postProcessName,postProcess',
        },
        {key: 'inputProduct', title: '输入产品', width: '150', type: JVXETypes.input},
        {key: 'semiProduct', title: '成品/半成品', width: '150', type: JVXETypes.input},
        // {key: 'semiProduct', title: '面料', width: '150', type: JVXETypes.input},
        {key: 'totalMachine', title: '机器时长', width: '80', type: JVXETypes.normal},
        {key: 'totalMaunal', title: '人工时长', width: '80', type: JVXETypes.normal},
        {
          title: '管理',
          key: 'action',
          type: JVXETypes.slot,
          fixed: 'right',
          minWidth: '150px',
          align: 'center',
          slotName: 'action',
        },
      ],
      url: {
        list: "/org.jeecg.modules.productplan/zyPlanProcess/getProcessDatalist",
        getPlanInfo: "/org.jeecg.modules.productplan/zyPlanProcess/getPlanInfo",
        syncProductProcess: "/org.jeecg.modules.productplan/zyPlanProcess/syncProductProcess",
        stationToolslist: "/stationTool/list2",
        stationMachinelist: "/stationMachine/list2",
        addProcessBatch: "/org.jeecg.modules.productplan/zyPlanProcess/addProcessBatch",
      },
      loadRouteType: false,
      planId: "",
      dictOptions: {},
      planInfo: {},
      superFieldList: [],
      stationIdList: [],
      toolsList: [],
      machineList: [],
      clickTrue: true,
    }
  },
  created() {
    this.loadParameter();
    this.getPlanInfo(this.planId);
  },
  methods: {
    jump2MianLiao(key,props){
      console.log("mianLiao() ----key:",key)
      console.log("mianLiao() ----props:",props)
      this.$router.push({
        path: '/productplan/ZyPlanProcessFabricList',
        // query: {  // 路由携带参数
        //   'planProcessId': record.id,
        // },
      });
    },

    jump2FuLiao(key,props){
      console.log("fuLiao() ----key:",key)
      console.log("fuLiao() ----props:",props)
    },
    detail(props){
      alert("稍等，正在开发中。。。")
    },
    getPlanInfo(planId) {
      // debugger;
      getAction(this.url.getPlanInfo, {"planId": planId}).then((res) => {
        if (res.success) {
          this.planInfo = res.result.records || res.result;
          // console.log("getPlanInfo------------:" + JSON.stringify(this.planInfo));
        } else {
          // this.stationIdCode = "station,station_name,id,depart_id in (select workshop_id from zy_product_plan where id='" + this.planId + "')";
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },

    // 【整体保存】点击保存按钮时触发的事件
    handleTableSave({$table, target}) {
      console.log("生产计划工序保存开始-----------------")
      // 校验整个表格
      $table.validate().then((errMap) => {
        // 校验通过
        if (!errMap) {
          // 获取所有数据
          let tableData = target.getTableData()
          console.log('当前保存的数据是：', tableData)
          // 【模拟保存】
          this.loading = true
          postAction(this.url.addProcessBatch, tableData).then(res => {
            if (res.success) {
              this.$message.success(`保存成功！`)
            } else {
              this.$message.warn(`保存失败：` + res.message)
            }
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    fanHui() {
      this.$router.push({
        path: '/productplan/ZyProductPlanList',
      });
    },

    //读取工序
    syncProductProcess() {
      getAction(this.url.syncProductProcess, {"planId": this.planId}).then((res) => {
        if (res.success) {
          this.$message.success("操作成功");
          this.loadData();
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },

    //加载传递参数
    loadParameter() {
      // debugger;
      if (this.loadRouteType === false) {
        this.planId = this.$route.query.planId;
        // this.biaoTi = this.$route.query.styleNames+"款式面料管理";
        console.log("*******传递的planId:" + this.planId)
        this.loadRouteType = true;
      }
    },
    loadData(arg) {
      console.log("the loadData---------开始");
      // var that = this;
      if (!this.url.list) {
        this.$message.error("请设置url.list属性!")
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      this.loadParameter();
      var params = this.getQueryParams();//查询条件
      this.loading = true;
      console.log("----------------the params:", params);
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records || res.result;
          // this.stationId = this.dataSource[0].stationId;
          this.stationIdList = this.dataSource[0].stationIdList;
        } else {
          // this.stationIdCode = "station,station_name,id,depart_id in (select workshop_id from zy_product_plan where id='" + this.planId + "')";
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    getQueryParams() {
      //获取查询条件
      let sqp = {}
      if (this.superQueryParams) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams)
        sqp['superQueryMatchType'] = this.superQueryMatchType
      }
      var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters);
      param.field = this.getQueryField();
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      param.planId = this.planId;
      return filterObj(param);
    },

    // 当选择的行变化时触发的事件
    handleSelectRowChange(event) {
      // console.log("handleSelectRowChange")
      console.log("handleSelectRowChange-event:", event)
      const {type, row, column, value, target, $table} = event
      console.log("stationIdList", JSON.stringify(this.stationIdList));
      target.$refs.vxe.columns[4].options = this.stationIdList;
    },
    /** 当选项被改变时，联动其他组件 */
    handleValueChange(event) {
      const {type, row, column, value, target} = event
      console.log("选择列-" + column.key + "：的事件-----", event)
      console.log("选择列-" + column.key + "：所在行数据-----", row)
      // console.log("row", row)
      // 选中工位列操作
      if (column.key === 'stationName') {
        let selectedStationId = event.value;
        // 设置第二列的 options
        // console.log('选择的工位列id---------:', selectedStationId)
        row.stationId = selectedStationId;
        // 清空后两列的数据
        target.setValues([{
          rowKey: row.id,
          values: {machineIds: '', toolsIds: '', machineNames: '', toolsNames: ''}
        }])
        target.$refs.vxe.columns[6].options = []
        target.$refs.vxe.columns[8].options = []

        getAction(this.url.stationMachinelist, {"stationId": selectedStationId}).then((res) => {
          if (res.success) {
            this.machineList = res.result.records || res.result;
            console.log("machineList", JSON.stringify(this.machineList))
            target.$refs.vxe.columns[6].options = this.machineList;
          } else {
            this.$message.warning(res.message)
          }
        });

        getAction(this.url.stationToolslist, {"stationId": selectedStationId}).then((res) => {
          if (res.success) {
            this.toolsList = res.result.records || res.result;
            console.log("toolsList", JSON.stringify(this.toolsList))
            target.$refs.vxe.columns[8].options = this.toolsList;
          } else {
            this.$message.warning(res.message)
          }
        });
      }

      //选中列操作
      if (column.key === 'machineNames') {
        row.machineIds = event.value;
      }
      if (column.key === 'toolsNames') {
        row.toolsIds = event.value;
      }
    }
  },
};
</script>