sl-sfy-safety/src/views/datamanager/alertformdata/components/common/DetailDialog.vue

<template>
  <div>
    <el-dialog
      v-model="visible"
      title="问题详情"
      width="80%"
      align-center
      :close-on-click-modal="false"
      @close="handleClose"
    >
      <div class="description-box">
        <div class="title">问题描述</div>
        <p>{{ detailDescription }}</p>
      </div>
      <div>
        <div class="title">问题图片/视频</div>
        <SwiperThumbsGallery v-if="updateSwiper" />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <span class="footer-tip">提示：可切换查看问题列表当前分页内数据</span>
          <el-button @click="handlePrevious" :disabled="!hasPreviousRow">上一个</el-button>
          <el-button type="primary" @click="handleNext" :disabled="!hasNextRow">下一个</el-button>
          <el-checkbox
            class="footer-checkbox"
            v-model="curHasBeenChosen"
            label="是否选中"
            @change="handleChooseStatus"
          />
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { computed, nextTick, ref } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useCurImgVideoUrlStore } from '../../store/useCurImgVideoUrl';
  import SwiperThumbsGallery from './SwiperThumbsGallery.vue';

  const curImgVideoUrl = useCurImgVideoUrlStore();
  const { detailRowChosen, hasPreviousRow, hasNextRow, detailDescription } = storeToRefs(curImgVideoUrl);

  const emits = defineEmits(['close', 'update:previous', 'update:next', 'update:choose']);

  const visible = ref(true);
  const updateSwiper = ref(true);

  const curHasBeenChosen = computed(() => {
    return detailRowChosen.value;
  });

  const handleClose = () => {
    emits('close');
  };

  const handlePrevious = () => {
    emits('update:previous');
  };

  const handleNext = () => {
    emits('update:next');
    updateSwiper.value = false;
    nextTick(() => {
      updateSwiper.value = true;
    });
  };

  const handleChooseStatus = () => {
    emits('update:choose', curHasBeenChosen.value);
    updateSwiper.value = false;
    nextTick(() => {
      updateSwiper.value = true;
    });
  };
</script>

<style scoped lang="less">
  :deep(.el-dialog) {
    padding: 0;
    background: #ffffff;
    box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
      0px 3px 6px -4px rgba(0, 0, 0, 0.12);

    .el-dialog__header {
      display: flex;
      align-items: center;
      height: 56px;
      padding-left: 24px;
      padding-bottom: 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .el-dialog__title {
      color: rgba(0, 0, 0, 0.88);
      font-size: 16px;
      font-weight: 500;
    }

    .el-dialog__headerbtn .el-dialog__close {
      color: #000;
    }

    .el-dialog__body {
      height: 690px;
      padding: 20px 40px 0 40px;
      overflow: auto;
    }

    .el-dialog__footer {
      height: 92px;
      padding: 28px 48px;

      .footer-tip {
        margin-right: 40px;
        color: rgba(0, 0, 0, 0.3);
      }

      .footer-checkbox {
        margin-left: 40px;
      }
    }
  }

  .title {
    margin-bottom: 20px;
    color: #303133;
    font-size: 16px;
    font-weight: 500;
  }

  .title:before {
    margin-right: 8px;
    content: '';
    border-left: 3px solid #1777ff;
  }

  .description-box {
    margin-bottom: 20px;

    p {
      color: #606266;
    }
  }
</style>