shuhi-ui/src/views/recycle/fallbackLog/index.vue

<template>
  <ele-page flex-table>
    <book-search @search="reload"></book-search>

    <common-table
      ref="pageRef"
      :pageConfig="pageConfig"
      :columns="columns"
      :tools="false"
    >
      <template #cover="{ row }">
        <el-image
          style="width: 90px; height: 120px; border-radius: 4px"
          fit="cover"
          :src="row.coverUrl"
          :preview-src-list="[row.coverUrl]"
          :initial-index="0"
          preview-teleported
        />
      </template>
      <template #feedbackTime="{ row }">
        <div
          style="display: flex; flex-direction: column; justify-content: center"
          ><el-text>反馈时间：</el-text>
          <el-text>{{ row.feenbackTime }}</el-text>
        </div>
        <div
          style="display: flex; flex-direction: column; justify-content: center"
          ><el-text>处理时间：</el-text>
          <el-text>{{ row.handTime || '-' }}</el-text>
        </div>
      </template>
      <template #baseInfo="{ row }">
        <book-info :row="row" :showFormat="false" @refresh="reload"></book-info>
      </template>

      <template #action="{ row }">
        <el-button
          type="primary"
          link
          v-permission="'recycle:fallbackLog:updateBook'"
          @click="handleUpdateBook(row)"
        >
          [编辑]
        </el-button>
        <el-button
          type="success"
          link
          v-permission="'recycle:fallbackLog:viewPic'"
          @click="handleViewPic(row)"
        >
          [查看图片]
        </el-button>
        <el-button
          type="primary"
          v-if="row.handStatus == 0"
          link
          v-permission="'recycle:fallbackLog:completed'"
          @click="handleComleted(row)"
        >
          [处理完成]
        </el-button>
      </template>
    </common-table>

    <books-edit ref="editRef" @success="reload()"></books-edit>
  </ele-page>
</template>

<script setup>
  import { ref, reactive, getCurrentInstance } from 'vue';
  import CommonTable from '@/components/CommonPage/CommonTable.vue';
  import booksEdit from '@/views/data/books/components/books-edit.vue';
  import bookSearch from './components/book-search.vue';
  import bookInfo from '@/views/recycle/components/book-info.vue';
  import bookOtherInfo from '@/views/recycle/components/book-other-info.vue';
  import { useDictData } from '@/utils/use-dict-data';
  import request from '@/utils/request';
  import { ElMessage } from 'element-plus';

  defineOptions({ name: 'fallbackLog' });
  let { proxy } = getCurrentInstance();
  const [useStatusDicts] = useDictData(['use_status']);

  /** 表格列配置 */
  const columns = ref([
    {
      type: 'selection',
      columnKey: 'selection',
      width: 50,
      align: 'center',
      fixed: 'left'
    },
    { label: '图片', prop: 'cover', width: 120, slot: 'cover' },
    { label: '信息', prop: 'baseInfo', slot: 'baseInfo', minWidth: 500 },
    { label: '反馈人', prop: 'feedbackUserName', width: 100 },
    { label: '反馈内容', prop: 'feedbackContent', minWidth: 200 },
    {
      label: '处理状态',
      prop: 'handStatus',
      width: 100,
      formatter: (row) => (row.handStatus == 1 ? '已处理' : '未处理')
    },
    { label: '时间', prop: 'feedbackTime', width: 160, slot: 'feedbackTime' },
    {
      columnKey: 'action',
      label: '操作',
      width: 120,
      slot: 'action',
      fixed: 'right'
    }
  ]);

  /** 页面组件实例 */
  const pageRef = ref(null);

  const pageConfig = reactive({
    pageUrl: '/book/feedback/list',
    fileName: '图书反馈记录',
    cacheKey: 'fallbackLogTable'
  });

  //刷新表格
  function reload(where) {
    pageRef.value?.reload(where);
  }

  //编辑
  const editRef = ref(null);
  function handleUpdateBook(row) {
    let params = { id: row.bookId };
    editRef.value?.handleOpen(params);
  }
  //查看图片
  function handleViewPic(row) {
    if (!row.imgUrl) return ElMessage.warning('暂无图片');
    console.log(proxy, 'xxxx');
    if (row.imgUrl) {
      proxy.$viewerApi({ images: [row.imgUrl] });
    }
  }
  //处理完成
  function handleComleted(row) {
    pageRef.value?.messageBoxConfirm({
      message: '确认处理完成？',
      fetch: () => request.post('/book/feedback/complete', { id: row.id })
    });
  }
</script>