change datatable

src/views/question-manage/question-list/components/PreviewModal.vue

@@ -0,0 +1,136 @@
+<template>
+  <Modal
+    :options="getModalOptions"
+    :on-close="handleClose"
+  >
+    <template #Context>
+      <div class="carousel__flex">
+        <n-icon size="26" color="#8A8A8A">
+          <LeftOutlined @click="handleCarousel('prev')" />
+        </n-icon>
+        <div class="carousel__container">
+          <n-carousel ref="carouselRef" :default-index="selectIndex" :show-dots="false">
+            <img
+              v-for="item in getCarouselInfo"
+              :key="item.id"
+              class="carousel-img"
+              :src="item.fileMarkerUrl"
+            >
+          </n-carousel>
+        </div>
+        <n-icon size="26" color="#8A8A8A">
+          <RightOutlined @click="handleCarousel('next')" />
+        </n-icon>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script>
+import { LeftOutlined, RightOutlined } from '@vicons/antd'
+import Modal from '@/components/Modal/index.vue'
+import { defineComponent, computed, ref, reactive, toRefs } from 'vue'
+export default defineComponent({
+  name: 'UserModal',
+  components: { Modal, LeftOutlined, RightOutlined },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    data: {
+      type: Array,
+      default: () => null
+    },
+    selectRow: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  emits: {
+    'update:visible': null
+  },
+  setup(props, { emit }) {
+    const formRef = ref()
+    const data = reactive({
+      selectRow: props.selectRow,
+      selectIndex: props.data.findIndex((item) => { return item.id === props.selectRow.id }),
+      selectType: props.selectRow.type
+    })
+    /* 获取弹窗的属性 */
+    const getModalOptions = computed(() => {
+      return {
+        show: props.visible,
+        title: '问题详情',
+        width: 700
+      }
+    })
+
+    const getCarouselInfo = computed(() => {
+      return props.data
+    })
+
+    const carouselRef = ref(null)
+
+    function handleCarousel(type) {
+      const currentIndex = carouselRef.value.getCurrentIndex()
+      switch (type) {
+        case 'prev':
+          if (currentIndex !== 0) {
+            carouselRef.value.prev()
+            data.selectRow = props.data[currentIndex - 1]
+            data.selectType = props.data[currentIndex - 1].type
+          }
+          break
+        case 'next':
+          if (currentIndex !== props.data.length - 1) {
+            carouselRef.value.next()
+            data.selectRow = props.data[currentIndex + 1]
+            data.selectType = props.data[currentIndex + 1].type
+          }
+          break
+      }
+    }
+
+    /* 关闭弹窗 */
+    const handleClose = () => {
+      emit('update:visible', false)
+    }
+
+    return {
+      ...toRefs(data),
+      formRef,
+      getModalOptions,
+      getCarouselInfo,
+      carouselRef,
+      handleCarousel,
+      handleClose
+    }
+  }
+
+})
+</script>
+<style scoped lang='scss'>
+.carousel__flex{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  .carousel__container{
+    width: calc(100% - 100px);
+    display: flex;
+    label{
+      width: 70px;
+      flex-shrink: 0;
+    }
+  }
+  .n-icon{
+    cursor: pointer;
+  }
+  .carousel-img{
+    width: 100%;
+    height: 280px;
+    object-fit: cover
+  }
+}
+</style>

src/views/question-manage/question-list/index.vue

@@ -7,12 +7,15 @@
         :columns="columns"
         :request="loadDataTable"
         :row-key="(row) => row.id"
-        size="large"
+        @fetch-success="getTableData"
       />
     </n-card>
   </div>
 
   <MapDrawer v-model:visible="mapDrawer" :data="rowData" />
+
+  <PreviewModal v-if="previewModal" v-model:visible="previewModal" :data="pageData" :select-row="rowData" />
+
 </template>
 
 <script>
@@ -21,16 +24,18 @@ import search from './tools/search.js'
 import HeadSearch from '@/components/Search/index.vue'
 import DataTable from '@/components/DataTable/index.vue'
 import MapDrawer from './components/MapDrawer.vue'
+import PreviewModal from './components/PreviewModal.vue'
 import { reactive, unref, toRefs } from 'vue'
 import { getQuestionList } from '@/api/task/index.js'
 
 export default {
   name: 'QuestionList',
-  components: { HeadSearch, DataTable, MapDrawer },
+  components: { HeadSearch, DataTable, MapDrawer, PreviewModal },
   setup() {
     const data = reactive({
       search,
-      ...toRefs(table)
+      ...toRefs(table),
+      pageData: []
     })
     /**
      * @description: 加载表格数据
@@ -52,9 +57,14 @@ export default {
       data.modalShow = true
     }
 
+    function getTableData(list) {
+      data.pageData = list.items
+    }
+
     return {
       ...toRefs(data),
       loadDataTable,
+      getTableData,
       handleModal
     }
   }

src/views/question-manage/question-list/tools/table.js

@@ -27,11 +27,17 @@ function handlePositionDrawer(row) {
   data.mapDrawer = true
 }
 
+function handleImgPreview(row) {
+  data.rowData = row
+  data.previewModal = true
+}
+
 const data = reactive({
   tableRef,
   searchParams,
   rowData: {},
   mapDrawer: false,
+  previewModal: false,
   handleSearch,
 
   columns: [
@@ -63,9 +69,9 @@ const data = reactive({
           images: {
             width: 36,
             height: 36,
-            src: row.fileMarkerUrl
-            // previewDisabled: true
-            // onClick: handleImgPreview.bind(null, row)
+            src: row.fileMarkerUrl,
+            previewDisabled: true,
+            onClick: handleImgPreview.bind(null, row)
           }
         })
       }

src/views/task-manage/question/components/ConfirmModal.vue

@@ -124,6 +124,7 @@ export default defineComponent({
         .then(res => {
           if (res.code === 0) {
             data.selectRow.status = 1
+            handleCarousel('next')
             emit('update-data')
           }
         })
@@ -138,6 +139,7 @@ export default defineComponent({
         .then(res => {
           if (res.code === 0) {
             data.selectRow.status = 2
+            handleCarousel('next')
             emit('update-data')
           }
         })