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

<template>
  <div style="margin-top: 20px">
    <el-form
      v-if="details"
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="130px"
      v-loading="loading"
    >
      <header-title title="订单生产计划信息"></header-title>
      <el-row style="margin-bottom: 20px">
        <el-col :span="8">
          <el-form-item label="计划编号">
            <el-input :value="details.code" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划类型">
            <el-input :value="planType" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品名称">
            <el-input :value="details.productName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品编码">
            <el-input :value="details.productCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="批次号">
            <el-input :value="details.batchNo" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="牌号">
            <el-input :value="details.brandNo" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规格">
            <el-input :value="details.specification" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="型号">
            <el-input :value="details.model" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="销售单数量">
            <el-input :value="details.codeNum" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产类型">
            <el-input :value="produceTypeText" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工艺路线">
            <el-input :value="details.produceRoutingName" disabled></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="订单总数量">
            <el-input :value="details.contractNum" disabled>
              <template slot="append">{{ details.measuringUnit }}</template>
            </el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="订单重量">
            <el-input :value="details.newSumOrderWeight" disabled>
              <template slot="append">{{ details.weightUnit }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="要求生产数量">
            <el-input :value="details.requiredFormingNum" disabled>
              <template slot="append">{{ details.measuringUnit }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="要求生产重量">
            <el-input :value="details.requiredFormingWeight" disabled>
              <template slot="append">{{ details.newWeightUnit }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划开始日期">
            <el-input :value="details.startTime" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划结束日期">
            <el-input :value="details.endTime" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="要求完成日期">
            <el-input :value="details.reqMoldTime" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属工厂">
            <el-input :value="details.factoriesName" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import { getByCode } from '@/api/system/dictionary-data';
  import { getById } from '@/api/bpm/components/producePlan';
  // import { getById as maintenanceGetById } from '@/api/maintenance/patrol_maintenance.js';
  import { getUserPage } from '@/api/system/organization';

  export default {
    name: 'editModal',
    mixins: [dictMixins],
    props: {
      // 业务id
      businessId: {
        default: ''
      }
    },
    data() {
      const formBaseData = {
        username: '',
        email: ''
      };

      return {
        visible: false,
        title: '表单弹窗',
        formBaseData,
        form: JSON.parse(JSON.stringify(formBaseData)),
        rules: {},
        tabOptions: [
          { key: 'main', name: '记录表1' },
          { key: 'bpm', name: '流程详情2' }
        ],
        // 详情或者是审核
        type: 'detail',
        // 当前选项
        activeComp: 'main',
        details: null,
        loading: false,
        // 计划信息
        eamPlanInfo: null,
        // 事项规则相关数据
        // 负责人
        executorList: [],
        // 审核人
        uerList: [],
        deviceList: [],
        // ruleInfo
        ruleInfo: '',
        planTypeList: [],
        planType: ''
      };
    },
    mounted() {
      this.getPlanTypeList('plan_type');
      setTimeout(() => {
        this.getDatails(this.businessId);
      }, 500);
    },

    computed: {
      produceTypeText() {
        const map = {
          1: 'PBOM',
          2: 'MBOM',
          3: 'ABOM'
        };
        return map[this.details.produceType] || '';
      }
    },
    methods: {
      // 关闭时清理表单
      handleClose() {
        this.visible = false;
      },

      async getPlanTypeList(code) {
        let { data: res } = await getByCode(code);

        this.planTypeList = res.map((item) => {
          let values = Object.keys(item);
          return {
            value: Number(values[0]),
            label: item[values[0]]
          };
        });
      },

      // 获取详情
      async getDatails(id) {
        try {
          this.loading = true;
          const data = await getById(id);
          console.log('data 详情数据', data);
          this.details = data;
          const typeData = this.planTypeList.find(
            (it) => it.value == this.details.planType
          );
          if ((Object.keys(typeData).length = !0)) {
            this.planType = typeData.label;
          }
          this.loading = false;
        } catch (error) {
          this.loading = false;
        }
      },
      showCheckUserNames(userList) {
        if (userList.length == 0) return '';

        return userList
          .map((i) => {
            return i.groupName + '-' + i.userName;
          })
          .join(',');
      },
      // 事项规则 详情
      async maintenanceGetById(id) {
        const { data } = await maintenanceGetById(id);
        console.log('事项规则 data', data);
        data.executorId = data.executorId.split(',');
        this.eamPlanInfo = data;
        this.getUserList({ groupId: data.groupId });

        this.ruleInfo = data.ruleInfo;
        this.ruleInfo.ruleItems = data.planDeviceList[0]?.workItems || [];

        this.deviceList = data.planDeviceList.map((item) => {
          return {
            name: item.substance.name,
            position: item.substance.position,
            id: item.substance.id,
            fixCode: item.substance.fixCode,
            codeNumber: item.substance.codeNumber
          };
        });
      },
      // 获取审核人列表、巡点检人员
      async getUserList(params) {
        try {
          let data = { pageNum: 1, size: -1 };
          // 如果传了参数就是获取巡点检人员数据
          if (params) {
            data = Object.assign(data, params);
          }
          const res = await getUserPage(data);
          if (params) {
            this.executorList = res.list;
          } else {
            this.uerList = res.list;
          }
        } catch (error) {}
      }
    }
  };
</script>

<style scoped lang="scss">
  .el-form-item .el-form-item {
    margin-bottom: 0 !important;
  }

  ::v-deep .el-tab_box {
    display: flex;
    margin-top: 10px;
    height: 300px;
    width: 100%;

    .equipmentList_box {
      flex: 1;
      height: 100%;
      margin-right: 10px;
      display: flex;
      flex-direction: column;

      .divider {
        flex: 0 0 50px;

        .title {
          height: 35px;
        }
      }

      .el-table {
        overflow: auto;
      }
    }

    .ruleMatters_box {
      flex: 3;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .divider {
        flex: 0 0 50px;

        .title {
          height: 35px;
        }
      }

      .el-table {
        overflow: auto;

        .operationGuide_box {
          width: 100%;
          height: 50px;
          display: flex;
          overflow: hidden;
          cursor: pointer;

          .left_content {
            flex: 0 0 200px;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #c0c4cc;
            border-radius: 10px;
            margin-right: 10px;
            overflow-y: auto;
          }

          .right_content {
            flex: 1;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #c0c4cc;
            border-radius: 10px;
            overflow-y: auto;
          }
        }
      }

      .el-table::before {
        display: none;
      }
    }
  }
</style>