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.productName}}</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="产品类型">10</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="download" @click="handleExportXls('计划工序')">导出</a-button>
          <a-button type="primary" icon="rollback" @click="fanHui()">返回</a-button>
        </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,
      columns: [
        {key: 'workOrderId', title: '工单编号', width: '200px'},
        // {key: 'productName', title: '产品名称', width: '120px'},
        {key: 'departName', title: '车间名称', width: '120px'},
        {key: 'processName', title: '工序名称', width: '120px'},
        {
          title: '工位ID',
          key: 'stationId',
          type: JVXETypes.hidden,
          // width: '200px',
          // options: [],
          // placeholder: '请选择${title}',
        }, {
          title: '工位名称',
          key: 'stationName',
          type: JVXETypes.select,
          width: '200px',
          options: [],
          placeholder: '请选择${title}',
        },
        {
          title: 'stationIds',
          key: 'stationIds',
          type: JVXETypes.hidden,
        },
        {
          title: '设备列表',
          key: 'machineNames',
          type: JVXETypes.selectMultiple,
          width: '200px',
          options: [],
          placeholder: '请选择${title}',
        },
        {
          title: 'toodsIds',
          key: 'toolsIds',
          type: JVXETypes.hidden,
        },
        {
          title: '工具列表',
          key: 'toolsIdNames',
          type: JVXETypes.selectMultiple,
          width: '200px',
          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: 'id,process_code,process_name,process_describe',
          // destFields: 'proProcessName,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},
      ],
      url: {
        list: "/org.jeecg.modules.productplan/zyPlanProcess/getProcessDatalist",
        getPlanInfo: "/org.jeecg.modules.productplan/zyPlanProcess/getPlanInfo",
        stationToolslist: "/stationTool/list2",
        stationMachinelist: "/stationMachine/list2",
        addProcessBatch: "/org.jeecg.modules.productplan/zyPlanProcess/addProcessBatch",
      },
      loadRouteType: false,
      planId: "",
      dictOptions: {},
      planInfo: {},
      superFieldList: [],
      stationId: [],
      stationList: [],
      toolsList: [],
      machineList: [],
      clickTrue: true,
    }
  },
  created() {
    this.loadParameter();
    this.getPlanInfo(this.planId);
  },
  methods: {
    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/ZyPlanProcessList',
      });
    },

    //加载传递参数
    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.stationList = this.dataSource[0].stationList;
        } 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(JSON.stringify(this.stationIdList));
      // target.$refs.vxe.columns[6].dictCode = this.stationIdCode;
      target.$refs.vxe.columns[6].options = this.stationList;
    },
    /** 当选项被改变时，联动其他组件 */
    handleValueChange(event) {
      const {type, row, column, value, target} = event
      console.log("event", event)
      console.log("row", row)
      // if (type === JVXETypes.select) {
      // 第一列
      if (column.key === 'stationId') {
        // 设置第二列的 options
        console.log('this stationid(row.id):', row.stationId)
        // 清空后两列的数据
        target.setValues([{
          rowKey: row.id,
          values: {machineIds: '', toolsIds: ''}
        }])
        target.$refs.vxe.columns[7].options = []
        target.$refs.vxe.columns[8].options = []

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

        getAction(this.url.stationToolslist, {"stationId": row.stationId}).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)
          }
        });
      }
    }
  },
};
</script>