kd-aiot-frontend-mes/src/views/batchRecord/components/detialsModal.vue

<template>
  <ele-modal
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    @close="handleClose"
    resizable
    maxable
    width="80%"
  >
    <div
      class="switch"
      v-if="
        details &&
        details.executeMethod == 2 &&
        details.approvalStatus != null &&
        details.approvalStatus != 0
      "
      :maxable="true"
      style="margin-bottom: 20px"
    >
      <div class="switch_left">
        <ul>
          <li
            v-for="item in tabOptions"
            :key="item.key"
            :class="{ active: activeComp == item.key }"
            @click="activeComp = item.key"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <el-form
      v-if="details && activeComp == 'main'"
      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.workOrderCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工序名称">
            <el-input :value="details.produceTaskName" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 20px">
        <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.productName" 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-row>
      <el-row style="margin-bottom: 20px">
        <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.productModel" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="要求生产数量">
            <el-input :value="details.formingNum" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <header-title title="基本信息"></header-title>
      <!-- 记录规则 -->
      <template v-if="details.executeMethod == 2">
        <el-row style="margin-bottom: 20px">
          <el-col :span="8">
            <el-form-item label="记录规则名称">
              <el-input :value="details.ruleName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="记录规则分类">
              <DictSelection
                dictName="记录规则类型"
                clearable
                v-model="details.recordRulesClassify"
                disabled
              >
              </DictSelection>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车间区域">
              <el-input
                :value="details.workshopArea"
                disabled
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row style="margin-bottom: 20px">
          <el-col :span="8">
            <el-form-item label="检查完成时间">
              <el-input
                :value="details.checkFinishTime"
                disabled
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="检查有效期">
              <el-input
                placeholder="请输入"
                v-model="details.checkValidity"
                type="text"
                disabled
              >
                <template slot="append">
                  <div style="width: 40px; box-sizing: border-box">
                    <el-form-item required>
                      <DictSelection
                        dictName="检查有效期单位"
                        clearable
                        v-model="details.checkValidityUnit"
                        placeholder="单位"
                        style="
                          width: auto;
                          box-sizing: border-box;
                          height: 36px;
                        "
                        disabled
                      >
                      </DictSelection>
                    </el-form-item>
                  </div>
                </template>
              </el-input> </el-form-item
          ></el-col>
          <el-col :span="8">
            <el-form-item label="结论">
              <el-radio-group v-model="details.conclution" disabled>
                <el-radio :label="1">合格</el-radio>
                <el-radio :label="2">不合格</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </template>

      <header-title
        v-if="details.executeMethod == 2"
        title="检查项目"
      ></header-title>
      <!-- 记录规则 -->
      <div v-if="details.executeMethod == 2">
        <el-table
          v-loading="loading"
          :data="details.details"
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column label="检查内容">
            <template slot-scope="scope">
              <div>
                {{ scope.row.paramValue }}
              </div>
            </template>
          </el-table-column>

          <el-table-column label="检查工具">
            <template slot-scope="scope">
              <div>
                {{ scope.row.toolNames }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="检查人">
            <template slot-scope="scope">
              <div style="display: flex; align-items: center; cursor: pointer">
                <div>{{ showCheckUserNames(scope.row.checkUsers) }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="检查情况">
            <template slot-scope="scope">
              <div>
                <div>
                  <el-radio-group v-model="scope.row.checkStatus" disabled>
                    <el-radio :label="1">已检查</el-radio>
                    <el-radio :label="0">未检查</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="检查结果">
            <template slot-scope="scope">
              <div>
                <el-radio-group v-model="scope.row.checkResult" disabled>
                  <el-radio :label="1">合格</el-radio>
                  <el-radio :label="0">不合格</el-radio>
                </el-radio-group>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="异常描述">
            <template slot-scope="scope">
              <div>
                <el-input
                  type="textarea"
                  :rows="1"
                  placeholder="请输入"
                  v-model="scope.row.errorMsg"
                  disabled
                >
                </el-input>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 事项规则 -->
      <div v-if="details.executeMethod == 1 && eamPlanInfo">
        <el-row style="margin-bottom: 20px">
          <el-col :span="8">
            <el-form-item label="计划配置单号">
              <el-input :value="eamPlanInfo.code" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划配置名称">
              <el-input :value="eamPlanInfo.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="自动派单">
              <el-select
                v-model="eamPlanInfo.autoOrder"
                size="small"
                style="width: 100%"
                disabled
              >
                <el-option :value="1" label="是"></el-option>
                <el-option :value="0" label="否"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划完成时长">
              <el-input :value="eamPlanInfo.duration" disabled
                ><template #suffix>分钟</template></el-input
              >
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部门">
              <el-input :value="eamPlanInfo.groupName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人" prop="executorId">
              <el-select
                v-model="eamPlanInfo.executorId"
                size="small"
                style="width: 100%"
                multiple
                filterable
                disabled
              >
                <el-option
                  v-for="item in executorList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核人" prop="approvalUserId">
              <el-select
                v-model="eamPlanInfo.approvalUserId"
                size="small"
                clearable
                style="width: 100%"
                filterable
                disabled
              >
                <el-option
                  v-for="item in uerList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="紧急程度" prop="urgent">
              <DictSelection
                dictName="紧急程度"
                clearable
                v-model="eamPlanInfo.urgent"
                disabled
              >
              </DictSelection>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                resize="none"
                v-model="eamPlanInfo.remark"
                :rows="2"
                placeholder="请详细说明"
                size="small"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-tabs type="card">
          <el-tab-pane v-if="ruleInfo" :label="ruleInfo.name">
            <div class="el-tab_box">
              <div class="equipmentList_box">
                <header-title title="设备列表"> </header-title>
                <el-table :data="deviceList" border>
                  <el-table-column label="序号" type="index" width="50">
                  </el-table-column>
                  <el-table-column label="设备名称" align="center" prop="name">
                    <template slot-scope="{ row }">
                      <template>
                        {{ row.name }}
                      </template>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="编号"
                    align="center"
                    prop="codeNumber"
                  >
                    <template slot-scope="{ row }">
                      <template>
                        {{ row.codeNumber }}
                      </template>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="固资编码"
                    align="center"
                    prop="fixCode"
                  >
                    <template slot-scope="{ row }">
                      <template>
                        {{ row.fixCode }}
                      </template>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="ruleMatters_box">
                <header-title title="规则事项"> </header-title>
                <el-table v-if="ruleInfo" :data="ruleInfo.ruleItems" border>
                  <el-table-column label="序号" width="50">
                    <template slot-scope="scope">
                      <span>{{ scope.$index + 1 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="零部件编码"
                    prop="categoryCode"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div v-if="scope.row.isNew">
                        <el-input
                          v-model="scope.row.categoryCode"
                          placeholder="请输入零部件编码"
                        ></el-input>
                      </div>
                      <div v-else>
                        <span>{{ scope.row.categoryCode }}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="零部件名称" prop="categoryName">
                    <template slot-scope="scope">
                      <div v-if="scope.row.isNew">
                        <el-input
                          v-model="scope.row.categoryName"
                          placeholder="请输入零部件名称"
                        ></el-input>
                      </div>
                      <div v-else>
                        <span>{{ scope.row.categoryName }}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="事项" prop="name">
                    <template slot-scope="scope">
                      <div v-if="scope.row.isNew">
                        <el-input
                          v-model="scope.row.name"
                          placeholder="请输入内容"
                        ></el-input>
                      </div>
                      <div v-else>
                        <span>{{ scope.row.name }}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="内容" prop="content">
                    <template slot-scope="scope">
                      <div v-if="scope.row.isNew">
                        <el-input
                          v-model="scope.row.content"
                          placeholder="请输入内容"
                        ></el-input>
                      </div>
                      <div v-else>
                        <span>{{ scope.row.content }}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作指导" prop="operationGuide">
                    <template slot-scope="scope">
                      <div class="operationGuide_box">
                        <div class="left_content">
                          <template v-if="scope.row.operationGuide">
                            <div
                              v-for="(item, index) in scope.row.operationGuide
                                .toolList"
                              :key="item.id"
                              >{{ index + 1 }}.{{ item.name }}</div
                            >
                          </template>
                        </div>
                        <div class="right_content">
                          <template v-if="scope.row.operationGuide">
                            <div
                              v-for="(item, index) in scope.row.operationGuide
                                .procedureList"
                              :key="item.id"
                              >{{ index + 1 }}.{{ item.content }}</div
                            >
                          </template>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="标准" prop="norm" width="100">
                    <template slot-scope="scope">
                      <div v-if="scope.row.isNew">
                        <el-input
                          v-model="scope.row.norm"
                          placeholder="请输入内容"
                        ></el-input>
                      </div>
                      <div v-else>
                        <span>{{ scope.row.norm }}</span>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>

        <!--  -->
      </div>
    </el-form>

    <bpmDetail
      v-if="activeComp == 'bpm' && details && details.processInstanceId"
      :id="details.processInstanceId"
    >
    </bpmDetail>

    <!-- 底部审批 -->
    <el-row
      v-if="
        details &&
        visible &&
        details.processInstanceId &&
        details.approvalStatus == 1
      "
      :gutter="20"
      style="margin-top: 40px"
    >
      <bpmSubmit
        :id="details.processInstanceId"
        :taskId="currenNode ? currenNode.id : ''"
        :businessId="details.id"
        :taskDefinitionKey="currenNode ? currenNode.taskDefinitionKey : ''"
        @handleAudit="handleAudit"
      ></bpmSubmit>
      <bpmList
        :id="details.processInstanceId"
        @setCurrenNode="setCurrenNode"
      ></bpmList>
    </el-row>

    <template v-slot:footer>
      <el-button @click="handleClose">返回</el-button>
    </template>
  </ele-modal>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import { getById } from '@/api/producetaskrecordrulesrecord/index.js';
  import { getById as maintenanceGetById } from '@/api/maintenance/patrol_maintenance.js';
  import { getUserPage } from '@/api/system/organization';
  import bpmDetail from '@/views/bpm/processInstance/detail.vue';
  import bpmSubmit from './bpmSubmit.vue';
  import bpmList from './bpmList.vue';

  export default {
    name: 'editModal',
    mixins: [dictMixins],
    components: {
      bpmDetail,
      bpmSubmit,
      bpmList
    },
    data() {
      const formBaseData = {};

      return {
        visible: false,
        title: '表单弹窗',
        formBaseData,
        form: JSON.parse(JSON.stringify(formBaseData)),
        rules: {},
        tabOptions: [
          { key: 'main', name: '记录表' },
          { key: 'bpm', name: '流程详情' }
        ],
        // 详情或者是审核
        type: 'detail',
        // 当前选项
        activeComp: 'main',
        details: null,
        loading: false,
        // 计划信息
        eamPlanInfo: null,
        // 事项规则相关数据
        // 负责人
        executorList: [],
        // 审核人
        uerList: [],
        deviceList: [],
        // ruleInfo
        ruleInfo: '',
        currenNode: null
      };
    },
    methods: {
      // 外部调用，打开弹窗
      open(data, type) {
        this.type = type;
        this.title = type == 'detail' ? '详情' : '审核';
        this.activeComp = 'main';
        console.log('当前行数据', data);
        this.getDatails(data.id);
        if (data.executeMethod == 1) {
          // 查询事项规则信息
          this.maintenanceGetById(data.eamPlanId);
          // 获取审核人列表数据
          this.getUserList();
        }
        this.visible = true;
      },
      // 关闭时清理表单
      handleClose() {
        this.currenNode = null;
        this.visible = false;
      },
      // 获取详情
      async getDatails(id) {
        try {
          this.loading = true;
          const data = await getById(id);
          console.log('data 详情数据', data);
          this.details = data;
          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) {}
      },
      // currenNode
      setCurrenNode(currenNode) {
        this.currenNode = currenNode;
      },
      // 审核通过刷新数据
      handleAudit() {
        this.getDatails(this.details.id);
      }
    }
  };
</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>