kd-aiot-frontend-mes/src/views/produceOrder/picking.vue

<template>
  <div class="ele-body">
    <el-form
      inline
      ref="formRef"
      :show-error-message="false"
      class="form-wrapper"
    >
      <el-card>
        <div class="page-title">
          <el-page-header @back="$router.go(-1)">
            <div slot="content" class="pageContent">
              <div>{{ title }}领料</div>
            </div>
          </el-page-header>
          <el-button type="primary" @click="handleReport">一键报工</el-button>
        </div>

        <header-title title="工单信息">
          <el-form-item label="执行人工号">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="执行日期">
            <el-input></el-input>
          </el-form-item>
        </header-title>

        <ele-pro-table
          :columns="orderColumns"
          :datasource="orderList"
          cache-key="picking-table"
        >
          <template v-slot:toolbar>
            <el-link type="primary" @click="addOrder">加入工单</el-link>
          </template>
          <template v-slot:action="{ $index }">
            <el-link type="danger" @click="delOrder($index)">删除</el-link>
          </template>
        </ele-pro-table>
        <header-title title="物料信息"> </header-title>

        <ele-pro-table
          :columns="materialColumns"
          :datasource="materialList"
          cache-key="picking-table-material"
        >
          <template v-slot:toolbar>
            <el-link type="primary" @click="addMaterial">添加物料</el-link>
          </template>
          <template v-slot:action="{ $index }">
            <el-link type="danger" @click="delMaterial($index)">删除</el-link>
          </template>
          <template v-slot:warehouse="{ row }">
            <el-select v-model="row.w">
              <el-option>ss</el-option>
            </el-select>
          </template>
          <template v-slot:requireNum="{ row }">
            <el-input v-model="row.c"></el-input>
          </template>
        </ele-pro-table>
      </el-card>
    </el-form>

    <orderDailog ref="orderDailogRef" @success="orderSuccess" />
    <ChooseMaterial ref="ChooseMaterialRef" @success="materialSuccess" />
  </div>
</template>

<script>
  import Extrusion from './components/report/Extrusion';
  import Drying from './components/report/Drying';
  import Heating from './components/report/Heating';
  import HalfAdded from './components/report/HalfAdded';
  import Processing from './components/report/Processing';
  import Package from './components/report/Package';
  import Warehousing from './components/report/Warehousing';
  import Sinter from './components/report/Sinter';
  import Furnace from './components/report/Furnace';
  import orderDailog from './components/order-dailog';
  import ChooseMaterial from '@/components/material/ChooseMaterial';
  import { batchSave } from '@/api/produceOrder';
  export default {
    components: {
      orderDailog,
      ChooseMaterial,
      Extrusion,
      Drying,
      Heating,
      HalfAdded,
      Processing,
      Package,
      Sinter,
      Furnace,
      Warehousing
    },
    data () {
      return {
        descriptionsShow: true,
        activeName: '1',
        orderColumns: [
          {
            label: '工单号',
            prop: 'code'
          },
          {
            label: '产品编码',
            prop: 'productCode'
          },
          {
            label: '产品名称',
            prop: 'productName'
          },
          {
            label: '牌号',
            prop: 'brandNo'
          },
          {
            label: '型号',
            prop: 'model'
          },
          {
            label: '要求成型数量',
            prop: 'formingNum'
          },
          {
            label: '要求成型重量',
            prop: 'formingWeight'
          },
          {
            label: '未成型数量',
            prop: 'a',
            formatter: (row) => {
              return row.formingNum - row.formedNum;
            }
          },
          {
            label: '未成型重量',
            prop: 'a',
            formatter: (row) => {
              return row.formingWeight - row.formedWeight;
            }
          },
          {
            label: '计划开始时间',
            prop: 'planStartTime'
          },
          {
            label: '实际开始时间',
            prop: 'startTime'
          },
          {
            slot: 'action',
            label: '操作'
          }
        ],
        orderList: [],
        materialList: [],
        materialColumns: [
          {
            label: '序号',
            type: 'index',
            width: 55
          },
          {
            label: '编码',
            prop: 'a'
          },
          {
            label: '名称',
            prop: 'a'
          },
          {
            label: '类型',
            prop: 'a'
          },
          {
            label: '单位',
            prop: 'a'
          },
          {
            label: '牌号',
            prop: 'a'
          },
          {
            label: '型号',
            prop: 'a'
          },
          {
            label: '规格',
            prop: 'a'
          },
          {
            slot: 'requireNum',
            label: '需求数量'
          },
          {
            slot: 'warehouse',
            label: '仓库'
          },
          {
            slot: 'action',
            label: '操作',
            prop: 'a'
          }
        ]
      };
    },
    computed: {
      title () {
        return this.$route.query.name;
      }
    },
    methods: {
      addOrder () {
        this.$refs.orderDailogRef.open(this.orderList.slice(0));
      },
      orderSuccess (list) {
        this.orderList = list;
      },
      materialSuccess (list) {
        this.orderList = list;
      },
      addMaterial () {
        this.$refs.ChooseMaterialRef.open(this.materialList.slice(0));
      },
      materialSuccess (list) {
        const obj = {};
        this.materialList = [...this.materialList, ...list].reduce(
          (next, pre) => {
            if (!obj[pre.id]) {
              obj[pre.id] = true;
              next.push(pre);
            }
          },
          []
        );
      },
      delMaterial (index) {
        this.$confirm('是否删除', '提示')
          .then(() => {
            this.materialList.splice(index, 1);
          })
          .catch(() => {});
      },
      delOrder (index) {
        this.$confirm('是否删除', '提示')
          .then(() => {
            this.orderList.splice(index, 1);
          })
          .catch(() => {});
      },
      async handleReport () {
        this.$refs.formRef.validate(async (value) => {
          if (value) {
            await batchSave();
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .el-tabs {
    margin-top: 20px;
  }
  .el-button {
    margin-top: 10px;
  }
  .slideUp-icon {
    transform: rotate(-90deg);
  }
  .slideDown-icon {
    transform: rotate(90deg);
  }

  .form-wrapper {
    :deep(.el-form-item) {
      margin-bottom: 0;
    }
  }
</style>