kd-aiot-frontend-wt/src/views/bpm/handleTask/components/requirementPlanPick/detailDialog.vue

<template>
  <div>
    <headerTitle title="基本信息"></headerTitle>
    <el-form
      :model="formData"
      ref="formRef"
      label-width="120px"
      class="ele-body"
    >
      <el-row :gutter="10" class="basic">
        <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="12">
          <el-form-item label="计划编号：">
            <el-input v-model="formData.planCode" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="12">
          <el-form-item label="批次号：">
            <el-input v-model="formData.batchNo" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="12">
          <el-form-item label="编码：">
            <el-input v-model="formData.categoryCode" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="12">
          <el-form-item label="名称：">
            <el-input v-model="formData.categoryName" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="12">
          <el-form-item label="零部件图号：">
            <el-input v-model="formData.imgCode" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="12">
          <el-form-item label="领料单号：">
            <el-input v-model="formData.code" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="12">
          <el-form-item label="需求订单号：">
            <el-input
              v-model="formData.materialRequirements"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="12">
          <el-form-item label="顶级产品编号：">
            <el-input v-model="formData.topCategoryName" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="8" :md="12" :sm="12" :xl="8" :xs="12">
          <el-form-item label="顶级产品名称：">
            <el-input v-model="formData.topCategoryName" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
          <el-form-item label="备注">
            <el-input
              v-model="formData.remark"
              type="textarea"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <headerTitle title="领料单信息"></headerTitle>

    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="formData.detailList"
      row-key="id"
      cache-key="entrust_list_data"
      :height="tableHeight"
      :pageSize="20"
      @fullscreen-change="fullscreenChange"
    >
      <template #quantity="{ row }">
        <span
          >{{ row.feedingControlQty ? row.feedingControlQty : 0 }}/{{
            row.quantity ? row.quantity : 0
          }}</span
        >
      </template>

      <template #componentAttribute="{ row }">
        <el-tag size="small" v-if="row.componentAttribute">{{
          componentAttributeMap[row.componentAttribute] || ''
        }}</el-tag>

        <span v-else></span>
      </template>

      <template #attributeType="{ row }">
        <el-tag type="success" size="small" v-if="row.attributeType">{{
          attributeTypeMap[row.attributeType] || ''
        }}</el-tag>
        <span v-else></span>
      </template>

      <template #produceType="{ row }">
        <el-tag type="warning" size="small" v-if="row.produceType">{{
          produceTypeMap[row.produceType] || ''
        }}</el-tag>
        <span v-else></span>
      </template>
    </ele-pro-table>
  </div>
</template>

<script>
  import { pickingOrderPlanInfo } from '@/api/bpm/components/requirementPick/index';

  const COMPONENT_ATTRIBUTE_MAP = {
    1: '自制件',
    2: '采购件',
    3: '外协件',
    4: '受托件'
  };

  const ATTRIBUTE_TYPE_MAP = {
    1: '总装',
    2: '部装',
    3: '零件',
    4: '原材料'
  };

  const PRODUCE_TYPE_MAP = {
    1: '加工',
    2: '装配',
    3: '下料'
  };

  export default {
    props: {
      businessId: {
        default: ''
      }
    },
    mixins: [],

    data() {
      return {
        title: 'aps领料单',
        componentAttributeMap: COMPONENT_ATTRIBUTE_MAP,
        attributeTypeMap: ATTRIBUTE_TYPE_MAP,
        produceTypeMap: PRODUCE_TYPE_MAP,
        tableHeight: 'calc(100vh - 595px)',
        formData: {},

        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'categoryLevelName',
            label: '物料分类',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'componentAttribute',
            label: '属性类型',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'componentAttribute'
          },

          {
            prop: 'attributeType',
            label: '存货类型',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'attributeType'
          },

          {
            prop: 'produceType',
            label: '生产类型',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'produceType'
          },

          {
            prop: 'categoryCode',
            label: '物料编码',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'categoryName',
            label: '物料名称',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'modelType',
            label: '型号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categorySize',
            label: '尺寸',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'measuringUnit',
            label: '计量单位',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'brandNum',
            label: '牌号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'weight',
            label: '重量',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'weightUnit',
            label: '重量单位',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'quantity',
            label: '领料数量',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          }
        ]
      };
    },
    created() {
      this.getDetailData(this.businessId);
    },
    methods: {
      async getDetailData(id) {
        this.loading = true;
        this.formData = (await pickingOrderPlanInfo(id)) || {};
      },

      fullscreenChange(fullscreen) {
        this.tableHeight = fullscreen
          ? 'calc(100vh - 120px)'
          : 'calc(100vh - 595px)';
      }
    }
  };
</script>

<style lang="scss" scoped>
  :deep(.el-table__expanded-cell) {
    padding-bottom: 30px !important;
    border-bottom: 12px solid #ccffcc !important;
  }
</style>