kd-aiot-frontend-mes/src/views/outsourcing/components/details.vue

<template>
  <el-dialog
    title="详情"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="80%"
  >
    <el-form ref="form" label-width="100px" class="create-form">
      <headerTitle title="基本信息" style="margin-top: 15px"></headerTitle>

      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="委外单编码:" prop="code">
            <el-input v-model="row.code" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="委外单名称:" prop="name">
            <el-input v-model="row.name" disabled />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="工单编码:" prop="factoriesName">
            <el-input v-model="row.workOrderCode" style="width: 100%" disabled>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预计到货日期:" prop="factoriesName">
            <el-input
              v-model="row.requireDeliveryTime"
              style="width: 100%"
              disabled
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间:" prop="factoriesName">
            <el-input v-model="row.createTime" style="width: 100%" disabled>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="状态:" prop="status">
            <el-tag>{{ row.status == 1 ? '已发布' : '未发布' }}</el-tag>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      v-if="detailType == 1"
      :columns="columns"
      :datasource="row.detailList"
      cache-key="detailsTable"
      height="calc(100vh - 350px)"
    >
      <template v-slot:totalCount="{ row }">
        {{ row.totalCount }}{{ row.measuringUnit }}
      </template>

      <template v-slot:sourceType="{ row }">
        <el-tag v-if="row.sourceType == 1" size="mini" type="success"
          >物品清单</el-tag
        >
        <el-tag v-if="row.sourceType == 2" size="mini" type="warning"
          >带料清单</el-tag
        >
        <el-tag v-if="row.sourceType == 3" size="mini" type="danger"
          >产出清单</el-tag
        >
      </template>
    </ele-pro-table>

    <ele-pro-table
      ref="table2"
      v-if="detailType == 2"
      :columns="columns2"
      cache-key="detailsTable2"
      height="calc(100vh - 350px)"
    >
      <template v-slot:totalCount="{ row }">
        {{ row.totalCount }}{{ row.measuringUnit }}
      </template>

      <template v-slot:sourceType="{ row }">
        <el-tag v-if="row.sourceType == 1" size="mini" type="success"
          >物品清单</el-tag
        >
        <el-tag v-if="row.sourceType == 2" size="mini" type="warning"
          >带料清单</el-tag
        >
        <el-tag v-if="row.sourceType == 3" size="mini" type="danger"
          >产出清单</el-tag
        >
      </template>
    </ele-pro-table>
  </el-dialog>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        visible: false,
        detailTitle: null,
        row: {},
        detailType: ''
      };
    },

    computed: {
      // 表格列配置
      columns() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },

          {
            prop: 'categoryCode',
            label: '编码',
            align: 'center'
          },
          {
            prop: 'categoryName',
            label: '名称',
            align: 'center'
          },

          {
            prop: 'sourceType',
            slot: 'sourceType',
            label: '类型',
            align: 'center'
          },

          {
            prop: 'brandNum',
            label: '牌号',
            align: 'center'
          },

          {
            prop: 'specification',
            label: '规格',
            align: 'center'
          },

          {
            prop: 'modelType',
            label: '型号',
            align: 'center'
          },

          {
            slot: 'totalCount',
            label: '数量',
            align: 'center'
          }
        ];
      },

      columns2() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },

          {
            prop: 'categoryCode',
            label: '编码',
            align: 'center'
          },
          {
            prop: 'categoryName',
            label: '名称',
            align: 'center'
          },

          {
            prop: 'sourceType',
            slot: 'sourceType',
            label: '类型',
            align: 'center'
          },

          {
            prop: 'brandNum',
            label: '牌号',
            align: 'center'
          },

          {
            prop: 'modelType',
            label: '型号',
            align: 'center'
          },

          {
            prop: 'specification',
            label: '规格',
            align: 'center'
          },

          {
            label: '物料代号',
            prop: 'extInfo.materielCode',
            align: 'center'
          },
          {
            label: '客户代号',
            prop: 'extInfo.clientCode',
            align: 'center'
          },
          {
            label: '刻码',
            prop: 'extInfo.engrave',
            align: 'center'
          },
          {
            label: '重量',
            prop: 'extInfo.newWeight',
            align: 'center'
          },

          {
            slot: 'totalCount',
            label: '数量',
            align: 'center'
          }
        ];
      },

      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },

    watch: {},
    methods: {
      open(row) {
        this.visible = true;
        // if (row.detailTitle == 1) {
        //   this.detailType = 1;
        //   this.$nextTick(() => {
        //     this.$refs.table.setData([...row.detailList]);
        //   });
        // } else if (row.detailTitle == 2) {
        //   this.detailType = 2;
        //   this.$nextTick(() => {
        //     this.$refs.table2.setData([...row.detailList]);
        //   });
        // }

        if (row.detailType == 1) {
          this.detailType = 1;
          // this.$nextTick(() => {
          //   this.$refs.table.setData([...row.detailList]);
          // });
        } else if (row.detailType == 2) {
          this.detailType = 2;
          // this.$nextTick(() => {
          //   this.$refs.table2.setData([...row.detailList]);
          // });
        }

        this.row = row;
      },

      handleClose() {
        this.visible = false;
      }
    }
  };
</script>

<style lang="scss" scoped></style>