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

<template>
  <div>
    <HeaderTitle title="基本信息" size="16px"></HeaderTitle>
    <el-form
      :model="addForm"
      class="add_form"
      ref="addFormRef"
      label-width="110px"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="编码" prop="code">
            <span>{{ addForm.code }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="名称" prop="name">
            <span>{{ addForm.executorName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="报损报溢部门" prop="executeGroupId">
            <span>{{ addForm.executeGroupName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="报损报溢人" prop="executorId">
            <span>{{ addForm.executorName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <span>{{ addForm.remark }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <HeaderTitle title="报损报溢工单物品信息" size="16px"> </HeaderTitle>
      <el-table
        ref="table"
        :data="productList"
        :max-height="500"
        row-key="id"
        tooltip-effect="dark"
        border
      >
        <el-table-column width="55px" label="序号" type="index">
        </el-table-column>
        <el-table-column
          prop="code"
          label="盘点单号"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="planName"
          label="计划名称"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="产品分类" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="right">
              <el-table
                :data="scope.row.planDetailVOList"
                :max-height="500"
                border
              >
                <el-table-column label="序号" type="index" width="50">
                </el-table-column>
                <el-table-column
                  label="状态"
                  prop="status"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="{ row }">
                    {{
                      row.status > 0
                        ? statusOption.filter(
                            (item) => item.value == row.status
                          )[0].label
                        : ''
                    }}
                  </template>
                </el-table-column>
                <el-table-column label="数量" :show-overflow-tooltip="true">
                  <template slot-scope="{ row }">
                    {{
                      row.status > 0
                        ? row[
                            statusOption.filter(
                              (item) => item.value == row.status
                            )[0].numKey
                          ]
                        : 0
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  width="150"
                  label="物品名称"
                  prop="categoryName"
                  :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                  label="批次号"
                  prop="batchNo"
                  :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                  width="150"
                  label="包装编码"
                  prop="packageNo"
                  :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                  label="包装数量"
                  prop="info.packingCountBase"
                  :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                  label="单位"
                  prop="info.packingUnit"
                  :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                  label="重量"
                  prop="info.weight"
                  :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                  label="重量单位"
                  prop="info.weightUnit"
                  :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                  width="200"
                  label="仓库"
                  prop="info.warehouseName"
                  :show-overflow-tooltip="true"
                ></el-table-column>
              </el-table>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.categoryLevelName }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="warehouseName"
          label="盘点仓库"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="executeGroupName"
          label="盘点部门"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="executorName"
          label="盘点人员"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="surplusQuantity"
          label="盘盈数量"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="loseQuantity"
          label="盘亏数量"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="wornQuantity"
          label="破损数量"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="盘点审核时间"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
  import storageApi from '@/api/warehouseManagement/index.js';
  export default {
    props: {
      businessId: {
        default: ''
      },
      taskId: {
        default: ''
      },
      taskDefinitionKey: {
        default: ''
      }
    },
    data() {
      return {
        statusOption: [
          {
            label: '盘盈',
            value: '2',
            numKey: 'surplusQuantity'
          },
          {
            label: '丢失',
            value: '3',
            numKey: 'loseQuantity'
          },
          {
            label: '破损',
            value: '4',
            numKey: 'wornQuantity'
          }
        ],
        addForm: {
          name: '', // 规则名称
          code: '', // 计划配置单号
          name: '', // 计划配置名称
          executeGroupId: '', // 执行部门code
          executeGroupName: '', // 执行部门name
          executorId: '', // 执行人id
          executorName: '', // 执行人name
          warehouseId: '', // 盘点仓库Id
          remark: '', // 备注
          approvalUserId: '', // 审核人Id
          approvalUserName: '' // 审核人name
        },
        productList: []
      };
    },
    created() {
      storageApi.getReportPlanDetailById(this.businessId).then(async (res) => {
        this.addForm = res;
        this.productList = res.info;
      });
    },
    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },
    methods: {
      async getTableValue() {
        return this.addForm;
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-row {
    display: flex;
    flex-wrap: wrap;
  }
  .add_form {
    ::v-deep .el-form-item {
      margin-bottom: 20px !important;
    }
  }
  .table_search {
    margin-bottom: 5px;
  }
</style>