kd-aiot-frontend-aps/src/views/workOrder/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      
      <order-search @search="reload" ref="searchRef"> </order-search>
      <!--      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="未完成工单" name="first"></el-tab-pane>
        <el-tab-pane label="已完成工单" name="second"></el-tab-pane>
      </el-tabs> -->
      <!-- 数据表格 -->

      <!-- <plan-statistics></plan-statistics> -->

      <!-- <ele-pro-table
        ref="table"
        :columns="newColumns"
        :datasource="datasource"
        cache-key="workOrderTable"
         row-key="code"
        @sort-change="onSortChange"
        height="calc(100vh - 380px)"
        autoAmendPage
        :parse-data="parseData"
      > -->
      <ele-pro-table ref="table" :columns="newColumns" :datasource="datasource" cache-key="workOrderTable" row-key="id"
        @sort-change="onSortChange" autoAmendPage :parse-data="parseData" :cache-key="cacheKeyUrl" @columns-change="handleColumnChange"
        >
        <!-- :key="activeName" -->
        <!-- :selection.sync="selection" -->
        <!-- @update:selection="handleSelectionChange" -->

        <template v-slot:code="{ row }">
          {{ row.code }}
        </template>

        <template v-slot:formingWeight="{ row }">
          {{ row.formingWeight }} {{ row.newWeightUnit }}
        </template>

        <template v-slot:priority="{ row }">
          <div style="display: flex">
            <el-input v-model="row.priority" type="number" size="mini" :min="0" :max="10" @change="priorityChange(row)"
              style="width: 80px"></el-input>
            <el-popover placement="right" width="200" trigger="hover" content="数值越大优先级越高（0-3普通, 4-6优先, 7-10紧急）">
              <div class="sort-wrap" slot="reference">
                <i class="el-icon-caret-top" @click="sortTop(row)"></i>
                <i class="el-icon-caret-bottom" @click="sortBottom(row)"></i>
              </div>
            </el-popover>
          </div>
        </template>

        <template v-slot:status="{ row }">
          <span :class="{ 'ele-text-danger': row.status == 3 }">
            {{ statusFormatter(row.status) }}
          </span>
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link type="primary" :underline="false" @click="toUnpack(row)" v-if="
            (clientEnvironmentId != '4' && row.status == 8) ||
            (clientEnvironmentId == '4' &&
              !row.productName.includes('板材') &&
              row.status == 8)
          ">
            拆单
          </el-link>

          <el-link type="primary" :underline="false" icon="el-icon-truck" @click="toRelease(row)" v-if="
            row.isSplit != 1 &&
            (clientEnvironmentId != '4' && row.status == 8) ||
            (clientEnvironmentId == '4' &&
              !row.productName.includes('板材') &&
              row.status == 8)
          ">
            派单
          </el-link>
          <!-- <el-link type="primary" :underline="false" icon="el-icon-truck" @click="toReleaseOpen(row)" v-if="
            row.isSplit != 1 &&
            (clientEnvironmentId != '4' && row.status == 8) ||
            (clientEnvironmentId == '4' &&
              !row.productName.includes('板材') &&
              row.status == 8)
          ">
            派单2
          </el-link> -->
        </template>
      </ele-pro-table>
    </el-card>

    <el-dialog :visible.sync="visible" title="派单" width="500px">

      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="100px">
        <el-form-item label="报工类型:" prop="singleReport">
          <el-radio-group v-model="form.singleReport">
            <el-radio :label="1" v-if="clientEnvironmentId != 2">单件报工</el-radio>
            <el-radio :label="0">批量报工</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="指定:" prop="assignType">
          <el-radio-group v-model="form.assignType" size="mini" @change="assignTypeFn">
            <el-radio-button :label="1">工位</el-radio-button>
            <el-radio-button :label="2">人员</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="班组:" prop="teamId">

          <el-select class="ele-block" v-model="form.teamId" placeholder="请选择班组" size="mini" filterable
            @change="stationChange">
            <el-option v-for="item in teamsList" :key="item.id" :label="item.name + '（' + item.code + '）'"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="工位:" prop="workstationIds" v-if="form.assignType == 1">
          <el-select class="ele-block" v-model="form.workstationIds" placeholder="请选择工位" size="mini" multiple
            filterable>
            <el-option v-for="item in stationList" :key="item.id" :label="item.name + '（' + item.code + '）'"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="人员:" prop="crewIds" v-if="form.assignType == 2">
          <el-select class="ele-block" v-model="form.crewIds" placeholder="请选择人员" size="mini" filterable multiple>
            <el-option v-for="item in crewList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div class="footer" slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" v-click-once @click="confirm">确定</el-button>
      </div>
    </el-dialog>

    <unpackDialog ref="unpackRef" @success="createSuccess" />
    <releaseDialog ref="releaseRef" @success="createSuccess" />
  </div>
</template>

<script>
import {
  getList,
  releaseWorkOrder,
  updatePriority
} from '@/api/workOrder/index.js';
import {
  teamPage,
  listByFirstTaskId,
  listByWorkCenterId,
  listUserByIds
} from '@/api/mainData/index.js';
import OrderSearch from './components/order-search.vue';
import unpackDialog from './components/unpackDialog.vue';
import releaseDialog from './components/releaseDialog.vue';

import { fieldModel } from '@/api/saleOrder';

import { debounce } from 'lodash';
import PlanStatistics from "@/components/statistics/PlanStatistics.vue";
import tabMixins from '@/mixins/tableColumnsMixin';

export default {
  mixins: [tabMixins],
  components: {
    PlanStatistics,
    OrderSearch,
    unpackDialog,
    releaseDialog
  },
  data() {
    return {
      visible: false,
      loading: false,

      form: {
        assignType: 1,
        crewIds: '',
        workstationIds: '',
        teamId: '',
        singleReport: ''
      },

      rules: {
        singleReport: [
          {
            required: true,
            message: '请选择报工类型',
            trigger: ['blur', 'change']
          }
        ],
        workstationIds: [
          {
            required: true,
            message: '请选择工位',
            trigger: ['blur']
          }
        ],
        teamId: [
          {
            required: true,
            message: '请选择班组',
            trigger: ['blur']
          }
        ]
      },

      teamList: [],

      statusOpt: [
        { label: '待生产', value: 4 },
        { label: '生产中', value: 5 },
        { label: '待下达', value: 8 }
      ],

      newColumns: [],

      stationList: [],
      teamsList: [],
      crewList: [],

      current: null,
      cacheKeyUrl: '3cbbdff9-aps-workOrder',
      columnsVersion:1
    };
  },
  computed: {
    teamId() {
      return this.$store.state.user.info.teamId;
    },
    clientEnvironmentId() {
      return this.$store.state.user.info.clientEnvironmentId;
    },
    // 表格列配置
    columns() {
      const num = this.columnsVersion
      return [
        {
          columnKey: 'index',
          slot: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          slot: 'code',
          label: '生产订单号',
          align: 'center',
          minWidth: 210,
          sortable: true
        },
        {
          prop: 'productionPlanCode',
          label: '计划编号',
          align: 'center',
          minWidth: 150
        },
        {
          prop: 'produceRoutingName',
          label: '工艺路线',
          align: 'center',
          minWidth: 170
        },
        {
          prop: 'productCode',
          label: '编码',
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'productName',
          label: '名称',
          align: 'center',
          minWidth: 170
        },
        {
            prop: 'productionCodes',
            label: '生产编号',
            align: 'center',
            minWidth: 150,
            showOverflowTooltip: true
        },
        {
          prop: 'brandNo',
          label: '牌号',
          align: 'center'
        },

        {
          prop: 'batchNo',
          label: '批次号',
          align: 'center',
          minWidth: 100,
          showOverflowTooltip: true
        },
        {
          prop: 'model',
          label: '型号',
          align: 'center',
          showOverflowTooltip: true
        },

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

        {
          prop: 'formingNum',
          label: '要求生产数量',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'formingWeight',
          label: '要求生产重量',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'formingWeight'
        },
        {
          prop: 'planStartTime',
          label: '计划开始时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },

        {
          prop: 'planCompleteTime',
          label: '计划结束时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },

        {
          prop: 'workCenterName',
          label: '工作中心',
          align: 'center',
          minWidth: 110,
          showOverflowTooltip: true
        },

        {
          prop: 'firstTaskName',
          label: '首工序',
          align: 'center',
          minWidth: 110,
          showOverflowTooltip: true
        },

        {
          prop: 'createTime',
          label: '创建时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          sortable: 'custom'
        },
        {
          slot: 'status',
          label: '状态',
          align: 'center',
          formatter: (row) => {
            const obj = this.statusOpt.find((i) => i.value == row.status);
            return obj && obj.label;
          }
        },
        {
            prop: 'customerName',
            label: '客户名称',
            align: 'center',
            showOverflowTooltip: true
        },
        {
          prop: 'serialNo',
          label: '客户代号',
          align: 'center',
          showOverflowTooltip: true
        },

        {
          prop: 'simpleName',
          label: '客户简称',
          align: 'center',
          showOverflowTooltip: true
        }
      ];
    }
  },
  created() {
    this.getFieldModel();
  },

  methods: {
    assignTypeFn(e) {

    },


    statusFormatter(status) {
      const obj = this.statusOpt.find((i) => i.value == status);
      return obj && obj.label;
    },
    /* 表格数据源 */
    datasource({ page, limit, where }) {
      if (where.status) {
        where.statusList = [];
        where.statusList.push(where.status);
      }
      return getList({
        pageNum: page,
        size: limit,
        ...where,
        ...this.sort
      });
    },

    /* 数据转为树形结构 */
    parseData(data) {
      return {
        ...data,
        list: this.$util.toTreeData({
          data: data.list,
          count: data.total,

          idField: 'code',
          parentIdField: 'originalCode'
        })
      };
    },

    getFieldModel() {
      fieldModel({ fieldModel: 't_main_category' }).then((res) => {
        const privateColumn = [
          {
            columnKey: 'action',
            label: '操作',
            width: 120,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action'
          }
        ];

        let newRes = res.map((m) => {
          return {
            prop: 'extField.' + m.prop,
            label: m.label,
            align: 'center',
            showOverflowTooltip: true
          };
        });

        this.newColumns = [...this.columns, ...newRes, ...privateColumn];

        this.$forceUpdate();
      });
    },

    // 下达
    toRelease(row) {
      this.current = row;
      this.visible = true;
      this.FirstTaskIdFn();
      this.WorkCenterIdFn();
      this.form.singleReport = this.clientEnvironmentId == 2 ? 0 : 1
    },
    // 下达
    confirm() {
      this.$refs.form.validate((valid)=>{
        if (valid) {
          const loading = this.$loading({ text: '加载中...' });

          if (this.form.assignType * 1 == 2) {
            this.form.workstationIds = [];
          } else {
            this.form.crewIds = [];
          }


          releaseWorkOrder({
            id: this.current.id,
            ...this.form
          })
            .then((res) => {
              if (res) {
                this.$message.success('成功');

                this.reData();
                this.reload();
                this.visible = false;
              }
            })
            .finally(() => {
              loading.close();
            }); 
            
        }
      })

    },
    close() {
      this.visible = false;
      this.reData();
    },
    reData() {
      this.form = {
        assignType: 1,
        crewIds: '',
        workstationIds: '',
        teamId: '',
        singleReport: this.clientEnvironmentId == 2 ? 0 : 1
      };
    },

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

    onSortChange(e) {
      let sort = {
        orderBy: e.order,
        sortName: e.prop
      };
      this.sort = sort;
      this.reload();
    },

    sortTop(row) {
      row.priority = Number(row.priority) + 1;
      this.priorityChange(row);
    },
    sortBottom(row) {
      if (row.priority <= 1) {
        return;
      }
      row.priority = Number(row.priority) - 1;
      this.priorityChange(row);
    },

    FirstTaskIdFn() {
      listByFirstTaskId(this.current.firstTaskId).then((res) => {
        this.stationList = res;
      });
    },

    WorkCenterIdFn() {
      listByWorkCenterId(this.current.workCenterId).then((res) => {
        this.teamsList = res;

        this.$nextTick(() => {
          if (this.teamId) {

            this.$set(this.form, 'teamId', this.teamId);
            this.stationChange();
          }

          // this.$refs.form.clearValidate();
        })

      });
    },

    // 拆分
    toUnpack(row) {
      this.$refs.unpackRef.open(row);
    },
    //派单
    toReleaseOpen(row){
      this.$refs.releaseRef.open(row);
    },

    createSuccess() {
      this.reload();
    },

    stationChange() {
      this.crewList = [];
      this.crewIds = [];

      listUserByIds([this.form.teamId]).then((res) => {
        this.crewList = res;
      });
    },

    priorityChange(row) {
      if (row.priority > 10) {
        row.priority = 10; // 如果大于 10，则设置为 10
      } else if (row.priority < 0) {
        row.priority = 0; // 如果小于 0，则设置为 0
      }

      this.priorityFn(row);
    },

    priorityFn: debounce(function (row) {
      let params = {
        id: row.id,
        priority: row.priority
      };
      updatePriority(params).then((res) => { });
    }, 800)
  }
};
</script>

<style lang="scss" scoped>
// ::v-deep .el-table__row {
//   height: 51px !important;
// }</style>