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

<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">
      {{ JSON.stringify(planDevices) }}
    </div>

    <template v-slot:footer>
      <div class="footer-box">
        <div class="txt-tip">
          共
          <span class="active">
            {{ rulesInfo ? rulesInfo.planDevices.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.planDevices.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';
  export default {
    mixins: [dictMixins],
    data() {
      return {
        visible: false,
        title: '巡点检',
        // 规则信息
        rulesInfo: null,
        // 当前项
        activeIndex: 0
      };
    },
    computed: {
      // 当前设备信息
      planDevices() {
        if (this.rulesInfo && this.rulesInfo.planDevices) {
          return this.rulesInfo.planDevices[this.activeIndex];
        }
        return null;
      }
    },
    methods: {
      // 外部调用，打开弹窗
      open(data, title = '') {
        if (title) {
          this.title = title;
        }
        this.rulesInfo = data;
        console.log('this.rulesInfo', this.rulesInfo);
        this.visible = true;
      },
      // 关闭时清理表单
      handleClose() {
        this.$nextTick(() => {
          this.visible = false;
        });
      }
    }
  };
</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>