kd-aiot-frontend-aps/src/views/materialPlan/components/produceOrder.vue

<template>
  <el-dialog :title="title" v-if="visible" :visible.sync="visible" :before-close="handleClose"
    :close-on-click-modal="true" :close-on-press-escape="false" append-to-body width="90%">
    <el-card shadow="never">
      <productionPlanSearch @search="reload" ref="searchRef" :statusOpt="statusOpt" :planType="planType"
        :activeName="activeName" />

      <!-- 数据表格 -->
      <ele-pro-table ref="table" :columns="columns" :datasource="datasource" :selection.sync="selection" row-key="id">
      </ele-pro-table>
    </el-card>

    <div class="btns">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import productionPlanSearch from '@/views/productionPlan/components/productionPlan-search.vue';
import { getList } from '@/api/productionPlan/index.js';
import dictMixins from '@/mixins/dictMixins';
export default {
  components: { productionPlanSearch },
  mixins: [dictMixins],
  data() {
    return {
      visible: false,
      title: '生产计划',

      statusOpt: {
        first: [
          { label: '所有状态', value: '3,2' },
          { label: '待发布', value: '2' },
          { label: '发布失败', value: '3' },
          { label: '已发布', value: '4' }
        ],
        second: [
          { label: '所有状态', value: '7,4,5,6' },
          { label: '待生产', value: '4' },
          { label: '生产中', value: '5' },
          { label: '已完成', value: '6' },
          { label: '已延期', value: '7' }
        ],
        change: [{ label: '已变更', value: '9' }]
      },
      planType: [
        { label: '所有计划类型', value: null },
        { label: '内销计划', value: '1' },
        { label: '外销计划', value: '2' },
        { label: '预制计划', value: '3' }
      ],

      activeName: 'first',


      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          selectable: (row, index) => {
            return !this.tableData.some(
              (it) => it.id == row.id || it.salesOrderId == row.id
            );
          },
          reserveSelection: true,
          fixed: 'left'
        },


        {
          slot: 'batchNo',
          prop: 'batchNo',
          label: '批次号',
          align: 'center',
          minWidth: 140,
          sortable: true
        },

        {
          slot: 'code',
          prop: 'code',
          action: 'code',
          label: '计划编号',
          align: 'center',

          minWidth: 160,
          sortable: true
        },

        {
          prop: 'salesCode',
          action: 'salesCode',
          label: '销售订单号',
          align: 'center',
          minWidth: 160
        },

        {
          prop: 'productCode',
          label: '编码',
          align: 'center',

          minWidth: 140
        },
        {
          prop: 'productName',
          label: '名称',
          align: 'center',

          minWidth: 140
        },

        {
          prop: 'brandNo',
          label: '牌号',
          align: 'center',
          showOverflowTooltip: true
        },

        {
          prop: 'specification',
          label: '规格',
          align: 'center',
          minWidth: 150,

          showOverflowTooltip: true
        },
        {
          prop: 'model',
          label: '型号',
          align: 'center',
          showOverflowTooltip: true
        },

        {
          prop: 'priority',
          label: '优先级',
          align: 'center',
          minWidth: 120,
          slot: 'priority',
          sortable: 'custom'
        },

        {
          prop: 'produceRoutingName',
          label: '工艺路线',
          align: 'center',
          width: 140,
          showOverflowTooltip: true
        },

        {
          prop: 'productNum',
          label: '计划数量',
          align: 'center',

          slot: 'productNum'
        },
        {
          prop: 'productWeight',
          label: '计划重量',
          align: 'center',

          slot: 'productWeight'
        },
        {
          prop: 'requiredFormingNum',
          label: '要求生产数量',
          align: 'center',

          slot: 'requiredFormingNum'
        },

        {
          prop: 'newSumOrderWeight',
          label: '要求生产重量',
          align: 'center',

          slot: 'newSumOrderWeight'
        },

        {
          prop: 'scheduleStatusName',
          label: '进度状态',
          align: 'center',
          minWidth: 100
        },

        {
          prop: '',
          label: '已排产数量',
          align: 'center',
          showOverflowTooltip: true
        },

        {
          prop: '',
          label: '未排产数量',
          align: 'center',
          showOverflowTooltip: true
        },

        {
          prop: '',
          label: '已生产数量',
          align: 'center',
          showOverflowTooltip: true
        },

        {
          prop: '',
          label: '未生产数量',
          align: 'center',
          showOverflowTooltip: true
        },

        {
          prop: 'factoryName',
          label: '所属工厂',
          align: 'center'
        },

        {
          prop: '',
          label: '合格品数',
          align: 'center'
        },

        {
          prop: '',
          label: '不合格品数',
          align: 'center'
        },

        {
          prop: '',
          label: '合格率',
          align: 'center'
        },

        {
          prop: 'moCount',
          label: '模数',
          align: 'center',
          show: this.clientEnvironmentId == '4'
        },

        {
          prop: 'blockCount',
          label: '块数',
          align: 'center',
          show: this.clientEnvironmentId == '4'
        },
        {
          prop: 'noWordCount',
          label: '未排程块数',
          align: 'center',

          show: this.clientEnvironmentId == '4',
          minWidth: 110
        },
        {
          prop: 'reqMoldTime',
          label: '计划完成日期',
          align: 'center',
          width: 110,
          showOverflowTooltip: true
        },

        {
          prop: 'startTime',
          label: '计划开始日期',
          align: 'center',
          width: 110,
          showOverflowTooltip: true
        },

        {
          prop: 'endTime',
          label: '计划结束日期',
          align: 'center',
          width: 110,
          showOverflowTooltip: true
        },



        {
          prop: 'orderType',
          label: '计划类型',
          align: 'center',

          formatter: (row) => {
            const obj = this.planType.find((i) => i.value == row.planType);
            return obj && obj.label;
          }
        },
        {
          prop: 'version',
          label: '版本',
          align: 'center',

          minWidth: 80
        },
        {
          prop: 'createTime',
          label: '创建时间',
          align: 'center',
          width: 110,
          showOverflowTooltip: true
        },

      ],

      // 表格选中数据
      selection: [],

      tableData: [],
      current: null,
      planType: [
        { label: '所有计划类型', value: null },
        { label: '内销计划', value: '1' },
        { label: '外销计划', value: '2' },
        { label: '预制计划', value: '3' }
      ],

    };
  },

  computed: {
    clientEnvironmentId() {
      return this.$store.state.user.info.clientEnvironmentId;
    },
  },
  created() {

  },
  methods: {
    open(item) {
      if (item) {
        this.tableData = item;
      }

      this.visible = true;
    },

    /* 表格数据源 */
    async datasource({ page, limit, where }) {

      const data = await getList({
        ...where,
        pageNum: page,
        size: limit
      });

      return data;
    },

    /* 刷新表格 */
    reload(where) {
      this.$refs.table.reload({ page: 1, where: where });
    },

    handleClose() {
      this.visible = false;
      this.$refs.table.setSelectedRows([]);
      this.selection = [];
    },
    selected() {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.$emit('chooseOrder', this.selection);
      this.handleClose();
    }
  }
};
</script>

<style lang="scss" scoped>
.btns {
  text-align: center;
  padding: 10px 0;
}
</style>