kd-aiot-frontend-mes/src/views/produce/components/prenatalExamination/index.vue

<template>
  <el-dialog
    title="报工"
    :visible.sync="dialogVisible"
    width="600px"
    :before-close="handleClose"
  >
    <div>
      <!-- <el-button type="primary" plain round @click="openMaintenancePlan">
        设备保养计划
      </el-button> -->
      <div
        v-if="loading || ruleRecordsList.length > 0"
        class="step-list"
        v-loading="loading"
      >
        <div
          class="step-item"
          v-for="(item, index) in ruleRecordsList"
          :key="item.id"
          @click="openMaintenancePlan(item)"
        >
          <div class="circle">{{ index + 1 }}</div>
          <div class="desc">{{ item.ruleName || item.itemTaskName }}</div>
          <div class="methods">{{ item.recordRulesExecuteMethodName }}</div>

          <el-button
            :type="item.executeStatus == 0 ? 'primary' : 'default'"
            class="status-btn"
          >
            {{ executeStatusTest(item.executeStatus) }}
          </el-button>
        </div>
      </div>
      <el-empty v-else></el-empty>
    </div>
    <template #footer>
      <el-button @click="handleUpdate" type="primary" :loading="butLoad"
        >更新</el-button
      >
      <el-button @click="handleConfirm" type="primary">确定</el-button>
      <el-button @click="handleClose">取消</el-button>
    </template>

    <programRulesDialog
      ref="programRulesDialogRef"
      :dialogTitle="dialogTitle"
      @reload="getData"
    />

    <releaseRulesDialog ref="releaseRulesDialogRef" @reload="getData" />

    <taskDialog ref="taskDialogRef" @reload="getData" />
  </el-dialog>
</template>

<script>
  import releaseRulesDialog from './releaseRulesDialog.vue';
  import programRulesDialog from './programRulesDialog.vue';
  import { getLastRuleRecords } from '@/api/producetaskrulerecord/index.js';
  import { getDate } from '@/utils/dateUtils';
  import taskDialog from './taskDialog.vue';

  export default {
    components: { programRulesDialog, releaseRulesDialog, taskDialog },
    data() {
      return {
        dialogVisible: false,
        dialogTitle: '设备保养计划',
        ruleRecordsList: [],
        // 工艺路线
        workOrderInfo: null,
        // 工序信息
        produceTaskInfo: null,
        // 	报工类型，参考字典项：record_rules_report_work_type，1-产前准备，2-过程监测，3-产后检查
        reportWorkType: 1,
        butLoad: false,
        // 记录规则
        showReleaseRulesDialog: false,
        loading: true
      };
    },
    methods: {
      open(workOrderInfo, produceTaskInfo, reportWorkType) {
        console.log('workOrderInfo 工单信息', workOrderInfo);
        console.log('工序信息', produceTaskInfo);
        this.workOrderInfo = workOrderInfo;
        this.produceTaskInfo = produceTaskInfo;
        this.reportWorkType = reportWorkType;

        this.dialogVisible = true;
        this.getData(workOrderInfo.id, produceTaskInfo.id);
      },
      executeStatusTest(status) {
        switch (status) {
          case 0:
            return '未报工';
          case 1:
            return '执行中';
          default:
            return '已报工';
        }
      },
      // 获取数据
      async getData() {
        this.loading = true;
        const body = {
          workOrderId: this.workOrderInfo.id,
          produceTaskId: this.produceTaskInfo.id,
          reportWorkType: this.reportWorkType,
          isTempRecord: 0
        };
        const data = await getLastRuleRecords(body);
        this.ruleRecordsList = data.map(i => {
          // 工序名称
          i.produceTaskName = this.produceTaskInfo.name
          return i;
        });
        console.log('报工流程 事项', this.ruleRecordsList);
        this.loading = false;
      },
      handleClose() {
        this.$emit('close');
        this.dialogVisible = false;
      },
      async handleUpdate() {
        try {
          this.butLoad = true;
          await this.getData();
          // 更新逻辑
          this.$message.success('已更新');
          this.butLoad = false;
        } catch (error) {
          this.butLoad = false;
        }
      },
      handleConfirm() {
        // 确定逻辑
        this.dialogVisible = false;
      },
      openMaintenancePlan(item) {
        console.log('item', item);

        if (item.executeMethod == 1) {
          // 设备保养计划相关逻辑
          this.dialogTitle = '新增设备保养计划';
          this.$refs.programRulesDialogRef.init(
            item,
            this.workOrderInfo,
            this.produceTaskInfo
          );
        } else if (item.executeMethod == 2) {
          this.$refs.releaseRulesDialogRef.open(
            item,
            this.workOrderInfo,
            this.produceTaskInfo
          );
        } else {
          // 任务确认
          this.$refs.taskDialogRef.open(
            item,
            this.workOrderInfo,
            this.produceTaskInfo
          );
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .step-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
  }

  .step-item {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 32px;

    .circle {
      width: 28px;
      height: 28px;
      background: #6cb300;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: bold;
      flex-shrink: 0;
    }

    .desc {
      flex: 1;
      font-size: 14px;
      color: #333;
      max-width: 300px;
      white-space: pre-line;
      word-break: break-all;
    }

    .methods {
      max-width: 90px;
      white-space: pre-line;
      word-break: break-all;
    }

    .status-btn {
      width: 100px;
      height: 40px;
      font-size: 16px;
      &.el-button--default {
        background: #e1e1e1;
        color: #999;
        border: none;
      }
      &.el-button--primary {
        background: #17a2f8;
        color: #fff;
        border: none;
      }
    }
  }
</style>