CostumingPlatform/ant-design-vue-jeecg/src/views/hanger/HangerManage.vue

<template>
  <a-card :bordered="false">
    <p style="font-size: 30px;color:#333; padding-left: 30% ">{{ this.workshopName + this.code }}吊挂管理</p>

    <!-- table区域-begin -->
    <div>
      <j-vxe-table
        ref="xTable"
        bordered
        toolbar
        :toolbarConfig="toolbarConfig"
        row-number
        row-selection
        keep-source
        :loading="loading"
        :columns="columns"
        :dataSource="dataSource"
        @selectRowChange="handleSelectRowChange"
        @valueChange="handleValueChange"
        @save="handleTableSave"
      >
        <template v-slot:toolbarSuffix>
          <a-button type="primary" icon="plus-circle" @click="syncHangRecord()">同步吊挂运行记录</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, putAction} from "@api/manage";
import {filterObj, pushIfNotExist, randomNumber, randomUUID} from "@/utils/util";
import {JVXETypes} from '@/components/jeecg/JVxeTable'

export default {
  name: 'ZyPlanProcessDataList',
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      toolbarConfig: {
        // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
        btn: ['save',]
      },
      description: '吊挂管理页面',
      loading: false,
      dataSource: [],
      columns: [
        {
          title: '车间',
          key: 'workshopName',
          // width: '220px',
        },
        {
          title: '吊挂编号',
          key: 'code',
          // width: '220px',
        },
        {
          title: '工站数量',
          key: 'pointnumber',
          width: '220px',
        },
        {
          title: '工站编号',
          key: 'point',
          type: JVXETypes.input,
          // width: '220px',
          /*validateRules: [
            {
              required: true, // 必填
              message: '请输入${title}' // 显示的文本
            },
            {
              // pattern: /^[P][0-9]{4}$/, // 正则
              // pattern: /^[0-9a-zA-Z_]{1,}$/,
              pattern: /^[P]\d[0-9]{4,}$/, // 正则
              // pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则

              message: '${title}必须以字母开头，可包含数字、下划线、横杠'
            },
            {
              unique: true,
              message: '${point}不能重复'
            },
            // {
            //   handler({cellValue, row, column}, callback, target) {
            //     // cellValue 当前校验的值
            //     // callback(flag, message) 方法必须执行且只能执行一次
            //     //          flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
            //     //          message = 提示的类型，默认使用配置的 message
            //     // target 行编辑的实例对象
            //     if (cellValue === 'abc') {
            //       callback(false, '${title}不能是abc')  // false = 未通过校验
            //     } else {
            //       callback(true) // true = 通过验证
            //     }
            //   },
            //   message: '${title}默认提示'
            // }
          ]*/
        },
        {
          title: '工位ID',
          key: 'stationId',
          type: JVXETypes.hidden,
        },
        {
          title: '工位名称',
          key: 'stationName',
          type: JVXETypes.select,
          width: '220px',
          options: [],
          placeholder: '请选择${title}',
        },
        // {
        //   title: '管理',
        //   key: 'action',
        //   type: JVXETypes.slot,
        //   fixed: 'right',
        //   minWidth: '150px',
        //   align: 'center',
        //   slotName: 'action',
        // },
      ],
      url: {
        list: "/org.jeecg.modules.hanger/zyHang/getPointById",
        getStationList: "/jeecg-boot/org.jeecg.modules.hanger/zyHang/getStationList",
        syncHangRecord: "/org.jeecg.modules.hanger/hangRecord/syncHangRecord",
        addBatch: "/org.jeecg.modules.hanger/zyHangPoint/addBatch",
      },
      loadRouteType: false,
      id: "",
      workshopName: "",
      code: "",
      pointnumber: "",
      stationIdList: [],
      clickTrue: true,
    }
  },
  created() {
    this.loadParameter();
  },

/*  updated() {
    console.log("beforeUpdate-------",JSON.stringify(this.stationIdList));
    console.log("this.$refs.vxe.columns[5].options-------",this.$refs.xTable.columns);
    // this.$data.columns[5].options = this.stationIdList;
    if (this.$refs.xTable.columns.concat('stationName2')) {
    // this.$refs.xTable.columns[5].options = this.stationIdList
      console.log("concat")
      this.$refs.xTable.columns[5].options= this.stationIdList;
      this.$refs.xTable.columns[4].options= this.stationIdList;
    }
    // this.$forceUpdate();
    // this.$refs.xTable.columns[6].options = this.stationIdList
    // this.$refs.xTable.columns[7].options = this.stationIdList
  },*/


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

    //同步生产记录到吊挂运行记录表
    syncHangRecord() {
      this.loading = true;
      putAction(this.url.syncHangRecord, {"hangCode": this.code}).then((res) => {
        if (res.success) {
          this.$message.success("操作成功");
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },

    //加载传递参数
    loadParameter() {
      // debugger;
      if (this.loadRouteType === false) {
        this.id = this.$route.query.id;
        this.workshopName = this.$route.query.workshopName;
        this.code = this.$route.query.code;
        this.pointnumber = this.$route.query.pointnumber;
        console.log("*******传递的id:" + this.id)
        this.loadRouteType = true;
      }
    },
    loadData(arg) {
      console.log("the loadData---------开始");
      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.stationIdList = this.dataSource[0].stationIdList;
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.dataSource.forEach(item => {
          item['workshopName'] = this.workshopName;
          item['pointnumber'] = this.pointnumber;
        })
        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.id = this.id;
      return filterObj(param);
    },

    // 当选择的行变化时触发的事件
    handleSelectRowChange(event) {
      console.log("handleSelectRowChange-event:", event)
      const {type, row, column, value, target, $table} = event
      console.log("stationIdList", JSON.stringify(this.stationIdList));
      target.$refs.vxe.columns[7].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') {
        // target.$refs.vxe.columns[6].options = this.stationIdList;
        // debugger;
        let selectedStationId = event.value;
        // console.log('选择的工位列id---------:', selectedStationId)
        row.stationId = selectedStationId;
      }
    }

  },
};
</script>