feat(产前准备): 新增计划规则弹窗组件用于展示不同状态下的计划详情

src/views/produce/components/prenatalExamination/PlanRulesDialog copy.vue

@@ -0,0 +1,156 @@
+<template>
+  <ele-modal
+    :title="title"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    @close="handleClose"
+    resizable
+    maxable
+    width="80%"
+    append-to-body
+  >
+    <div v-if="rulesInfo && currentPlanOrders">
+      <!-- {{ JSON.stringify(currentPlanOrders) }} -->
+      <!-- 根据当前currentPlanOrders的 planStatus状态展示不同内容 -->
+      <!-- 0 派单, 4为撤回的计划 -->
+      <programRulesDialog
+        v-if="
+          currentPlanOrders.planStatus == 0 || currentPlanOrders.planStatus == 4
+        "
+        :planId="currentPlanOrders.planId"
+        :info="currentPlanOrders"
+        @done="setWorkOrderIdAndStatus"
+      />
+      <!-- 1 报工 -->
+      <signingUpWork
+        v-if="currentPlanOrders.planStatus == 1"
+        :planId="currentPlanOrders.planId"
+        :workOrderId="currentPlanOrders.eamWorkOrderId"
+        @refresh="setPlanStatus(2)"
+      ></signingUpWork>
+      <!-- 2 执行中 3 完成展示详情-->
+      <workOrderDetails
+        v-if="
+          currentPlanOrders.planStatus == 3 || currentPlanOrders.planStatus == 2
+        "
+        :workOrderId="currentPlanOrders.eamWorkOrderId"
+      ></workOrderDetails>
+    </div>
+
+    <template v-slot:footer>
+      <div v-if="rulesInfo" class="footer-box">
+        <div class="txt-tip">
+          共
+          <span class="active">
+            {{ rulesInfo ? rulesInfo.planOrders.length : 0 }}
+          </span>
+          条记录，当前位于第
+          <span class="active">{{ activeIndex + 1 }}</span
+          >条
+        </div>
+
+        <el-button
+          type="primary"
+          icon="el-icon-arrow-left"
+          size="mini"
+          :disabled="activeIndex === 0"
+          @click="activeIndex--"
+        >
+          上一页
+        </el-button>
+
+        <el-button
+          type="primary"
+          size="mini"
+          :disabled="activeIndex === rulesInfo.planOrders.length - 1"
+          @click="activeIndex++"
+        >
+          下一页
+          <i class="el-icon-arrow-right el-icon--right"></i>
+        </el-button>
+
+        <el-button @click="handleClose" size="mini">关 闭</el-button>
+      </div>
+    </template>
+  </ele-modal>
+</template>
+
+<script>
+  import dictMixins from '@/mixins/dictMixins';
+  import signingUpWork from './components/workOrder/signingUpWork.vue';
+  import workOrderDetails from './components/workOrder/details.vue';
+  import programRulesDialog from './components/workOrder/programRulesDialog.vue';
+
+  export default {
+    mixins: [dictMixins],
+    components: {
+      signingUpWork,
+      workOrderDetails,
+      programRulesDialog
+    },
+    data() {
+      return {
+        visible: false,
+        title: '计划规则',
+        // 规则信息
+        rulesInfo: null,
+        // 当前项
+        activeIndex: 0
+      };
+    },
+    computed: {
+      // 当前设备信息
+      currentPlanOrders() {
+        if (this.rulesInfo && this.rulesInfo.planOrders) {
+          return this.rulesInfo.planOrders[this.activeIndex];
+        }
+        return {};
+      }
+    },
+    methods: {
+      // 外部调用，打开弹窗
+      open(data) {
+        this.rulesInfo = data;
+        console.log('this.rulesInfo', this.rulesInfo);
+        this.title = data.planConfigName;
+        this.visible = true;
+      },
+      // 关闭时清理表单
+      handleClose() {
+        this.rulesInfo = null;
+        this.activeIndex = 0;
+        // 触发父组件刷新
+        this.$emit('reload');
+        this.$nextTick(() => {
+          this.visible = false;
+        });
+      },
+      // 报工成功后刷新当前项状态
+      setPlanStatus(status) {
+        this.rulesInfo.planOrders[this.activeIndex].planStatus = status;
+      },
+      setWorkOrderIdAndStatus(workOrderId) {
+        console.log('workOrderId', workOrderId);
+        this.rulesInfo.planOrders[this.activeIndex].eamWorkOrderId =
+          workOrderId;
+        this.setPlanStatus(1);
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  .txt-tip {
+    .active {
+      color: #409eff;
+      font-weight: bold;
+    }
+  }
+
+  .footer-box {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 15px;
+  }
+</style>