kd-aiot-frontend-aps/src/views/productionPlan/components/homogeneityInspectDialog.vue

<template>
  <div>
  <ele-modal
    width="80vw"
    :visible.sync="visible"
    :close-on-click-modal="false"
    row-key="code"
    custom-class="ele-dialog-form"
    :title="'齐套性检查'"
  >
    <div class="form-wrapper">
<!--      <el-form :model="requestData" label-width="0" :show-message="false">-->
<!--        <el-descriptions title="" :column="2" border>-->
<!--          <el-descriptions-item label="计划编号">-->
<!--            {{ formData.code }}</el-descriptions-item-->
<!--          >-->

<!--          <el-descriptions-item label="产品编码">{{-->
<!--            formData.productCode-->
<!--            }}</el-descriptions-item>-->

<!--          <el-descriptions-item label="产品名称">{{-->
<!--            formData.productName-->
<!--            }}</el-descriptions-item>-->

<!--          <el-descriptions-item label="牌号|型号">-->
<!--            {{ formData.brandNo }}|{{ formData.model }}</el-descriptions-item-->
<!--          >-->

<!--          <el-descriptions-item label="批次号">{{-->
<!--            formData.batchNo-->
<!--            }}</el-descriptions-item>-->

<!--          <el-descriptions-item label="工艺路线">{{-->
<!--            formData.produceRoutingName-->
<!--            }}</el-descriptions-item>-->

<!--          <el-descriptions-item label="要求生产数量">{{-->
<!--            formData.requiredFormingNum-->
<!--            }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="要求完成日期">{{-->
<!--            formData.reqMoldTime-->
<!--            }}</el-descriptions-item>-->
<!--        </el-descriptions>-->
<!--      </el-form>-->

<!--      <headerTitle title="剩余拆批" class="mt20"> </headerTitle>-->
      <div class="optionButton">
        <el-button type="primary" @click="merge"
        >合并</el-button>
      </div>
      <el-tabs v-model="activeName" @tab-click="tabClick()" type="card" size="mini">
        <el-tab-pane label="自制件" name="first"></el-tab-pane>
        <el-tab-pane label="装配件" name="second"></el-tab-pane>
      </el-tabs>
      <el-form ref="form" :model="form" :rules="rules">
<!--        <ele-pro-table-->
<!--          ref="table"-->
<!--          :needPage="false"-->
<!--          :columns="columns"-->
<!--          :datasource="form.surplusUnpack"-->
<!--        >-->
<!--          <template v-slot:toolbar>-->
<!--            <el-button-->
<!--              size="small"-->
<!--              type="primary"-->
<!--              icon="el-icon-plus"-->
<!--              class="ele-btn-icon"-->
<!--              :disabled="requiredFormingNum == 0 ? true : false"-->
<!--              @click="openUnpack"-->
<!--            >-->
<!--              拆批-->
<!--            </el-button>-->
<!--          </template>-->

<!--          <template v-slot:requiredFormingNum="scope">-->
<!--            <el-form-item-->
<!--              v-if="requiredFormingNum != 0"-->
<!--              :prop="'surplusUnpack.' + scope.$index + '.requiredFormingNum'"-->
<!--              :rules="[-->
<!--                {-->
<!--                  required: true,-->
<!--                  message: '请输入要求生产数量',-->
<!--                  trigger: 'change'-->
<!--                },-->
<!--                {-->
<!--                  pattern: /^\d+(\.{0,1}\d+){0,1}$/,-->
<!--                  message: '拆批数超过生产数量',-->
<!--                  trigger: ['blur', 'change']-->
<!--                }-->
<!--              ]"-->
<!--            >-->
<!--              <el-input-->
<!--                disabled-->
<!--                v-model="requiredFormingNum"-->
<!--                placeholder="请输入"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->

<!--            <el-form-item v-else> 工单已全部拆完 </el-form-item>-->
<!--          </template>-->

<!--          <template v-slot:splitResidue="scope">-->
<!--            {{ formData.splitResidue }}-->
<!--          </template>-->

<!--        </ele-pro-table>-->

<!--        <headerTitle title="拆批" class="mt20"> </headerTitle>-->

        <ele-pro-table
          ref="table"
          :needPage="false"
          :columns="columns"
          :key="activeName"
          :init-load="false"
          :datasource="datasource"
        >
          <template v-slot:stockCount="{ row }">
            <el-link type="primary" :underline="false" @click="stockDetail(row)">
              {{ row.stockCount }}
            </el-link>
          </template>
          <template v-slot:currentCount="{ row }">
            <el-link type="primary" :underline="false" @click="currentDetail(row)">
              {{ row.currentCount }}
            </el-link>
          </template>
          <template v-slot:stockColor="{ row }">
            <div :class="{'statusRed' : row.stockStatus == '缺料'}">
              {{row.stockStatus}}
            </div>
          </template>
          <template v-slot:currentColor="{ row }">
            <div :class="{'statusRed' : row.currentStatus == '缺料'}">
              {{row.currentStatus}}
            </div>
          </template>
          <template v-slot:finishColor="{ row }">
            <div :class="{'statusRed' : row.finishStatus == '缺料'}">
              {{row.finishStatus}}
            </div>
          </template>
          <template v-slot:finishCount="{ row }">
            <div>
              <div v-if="row.finishCount > 0">{{row.finishCount}}</div>
              <div v-else>-</div>
            </div>
          </template>



<!--          <template v-slot:requiredFormingNum="scope">-->
<!--            <el-form-item-->
<!--              :prop="'unpackList.' + scope.$index + '.requiredFormingNum'"-->
<!--              :rules="{-->
<!--                required: true,-->
<!--                message: '请输入要求生产数量',-->
<!--                trigger: 'change'-->
<!--              }"-->
<!--            >-->
<!--              <el-input-number-->
<!--                type="number"-->
<!--                @change="changeNum(scope.$index)"-->
<!--                :min="0"-->
<!--                v-model="scope.row.requiredFormingNum"-->
<!--                placeholder="请输入"-->
<!--              ></el-input-number>-->
<!--            </el-form-item>-->
<!--          </template>-->

<!--          <template v-slot:reqMoldTime="scope">-->
<!--            <el-form-item-->
<!--              :prop="'unpackList.' + scope.$index + '.reqMoldTime'"-->
<!--              :rules="{-->
<!--                required: true,-->
<!--                message: '请选择开始计划时间',-->
<!--                trigger: 'change'-->
<!--              }"-->
<!--            >-->
<!--              <el-date-picker-->
<!--                class="w100"-->
<!--                v-model="scope.row.reqMoldTime"-->
<!--                type="date"-->
<!--                value-format="yyyy-MM-dd"-->
<!--              ></el-date-picker>-->
<!--            </el-form-item>-->
<!--          </template>-->
        </ele-pro-table>
      </el-form>
    </div>
    <div slot="footer">
      <el-button plain @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
  </ele-modal>

  <stockDetailDialog ref="stockDetailDialog" />

  <currentDetailDialog ref="currentDetailDialog" />
  </div>
</template>

<script>
  import { homogeneityInspect, homogeneityInspectMerge } from '@/api/productionPlan/index.js';
  import stockDetailDialog from './stockDetailDialog.vue';
  import currentDetailDialog from './currentDetailDialog.vue';
  export default {
    components: {
      stockDetailDialog,
      currentDetailDialog
    },
    data() {
      return {
        visible: false,

        formData: {},
        requestData: {
          deviceCode: '',
          deviceName: '',
          deviceId: ''
        },
        requiredFormingNum: 0,

        form: {
          homogeneityInspect: []
        },

        rules: {},

        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'productCode',
            label: '计划编号',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'opCode',
            label: '工序编码',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'opName',
            label: '工序名称',
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'bomCode',
            label: '物料编码',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'bomName',
            label: '物料名称',
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'count',
            label: '定额数量',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'stockCount',
            prop: 'stockCount',
            label: '库存数量',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'stockColor',
            prop: 'stockStatus',
            label: '库存状态',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'currentCount',
            prop: 'currentCount',
            label: '在途数量',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'currentColor',
            prop: 'currentStatus',
            label: '在途状态',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'finishCount',
            prop: 'finishCount',
            label: '最终缺料数量',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'finishColor',
            prop: 'finishStatus',
            label: '最终状态',
            align: 'center',
            minWidth: 80
          },
        ],
        ids: [],
        activeName: 'first',
      };
    },
    methods: {
      reload(where) {
        this.$nextTick(() => {
          this.$refs.table.reload({ page: 1, where });
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        return homogeneityInspect({
          pageNum: page,
          size: limit,
          ...where,
        });
      },
       stockDetail(row) {
         this.$refs.stockDetailDialog.open(row);
       },
       currentDetail(row) {
         this.$refs.currentDetailDialog.open(row);
       },
      open(ids) {
         this.visible = true;
         this.ids = ids;
         this.reload({planIds: ids});
      },
      cancel() {
        this.formData = {};
        this.visible = false;
      },

      confirm() {
        this.visible = false;
      },
      async merge(){
        if(this.activeName == 'first'){
          this.reload({planIds: this.ids, productType: 1, merge: 2});
        }
        if(this.activeName == 'second'){
          this.reload({planIds: this.ids, productType: 2, merge: 2});
        }
      },
      tabClick(){
        if(this.activeName == 'first'){
          this.reload({planIds: this.ids, productType: 1});
        }
        if(this.activeName == 'second'){
          this.reload({planIds: this.ids, productType: 2});
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .mt20 {
    margin-top: 20px;
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }
  .optionButton {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 3px;
  }
  .statusRed{
    color: red;
  }
</style>