实习笔记③

1
export const querySchema: FormSchemaGetter = () => [
2
  {
3
    component: 'Input',
4
    fieldName: 'noticeTitle',
5
    label: '留言标题',
6
  },
7
  {
8
    component: 'RangePicker',
9
    fieldName: 'noticeTime',
10
    label: '留言时间',
11
  },
12
  {
13
    component: 'Select',
14
    fieldName: 'handleStatus',
15
    label: '办理状态',
16
    defaultValue: '',
17
    componentProps: {
18
      getPopupContainer,
19
      options: statusOptions,
20
    },
21
  },
22
];

1
export const columns: VxeGridProps['columns'] = [
2
  {
3
    title: '留言标题',
4
    field: 'noticeTitle',
5
    align: 'left',
6
  },
7
  {
8
    title: '是否公开',
9
    field: 'isPublic',
10
    align: 'center',
11
    width: 100,
12
    slots: {
13
      default: 'isPublic',
14
    },
15
  },
16
  {
17
    title: '留言时间',
18
    field: 'noticeTime',
19
    align: 'left',
20
    width: 200,
21
  },
22
  {
23
    title: '办理状态',
24
    field: 'handleStatus',
25
    align: 'left',
26
    width: 100,
27
    slots: {
28
      default: ({ row }) => {
29
        if (row.handleStatus == '1') {
30
          return '已答复';
31
        } else {
32
          return '待答复';
33
        }
34
      },
35
    },
36
  },
37
  {
38
    field: 'action',
39
    fixed: 'right',
40
    width: 'auto',
41
    align: 'left',
42
    slots: { default: 'action' },
43
    title: '操作',
44
    resizable: false,
45
  },
46
];

1
const formOptions: VbenFormProps = {
2
  commonConfig: {
3
    labelWidth: 80,
4
    componentProps: {
5
      allowClear: true,
6
    },
7
  },
8
  schema: querySchema(),
9
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
10
  fieldMappingTime: [
11
    [
12
      'noticeTime',
13
      ['params[beginTime]', 'params[endTime]'],
14
      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
15
    ],
16
  ],
17
};

1
const gridOptions: VxeGridProps = {
2
  border: true,
3
  checkboxConfig: {
4
    highlight: true,
5
    reserve: true,
6
  },
7
  columns,
8
  height: 'auto',
9
  keepSource: true,
10
  pagerConfig: {},
11
  proxyConfig: {
12
    ajax: {
13
      query: async ({ page }, formValues = {}) => {
14
        return await noticeBoardList({
15
          pageNum: page.currentPage,
16
          pageSize: page.pageSize,
17
          ...formValues,
18
        });
19
      },
20
    },
21
  },
22
  rowConfig: {
23
    keyField: 'id',
24
  },
25
  id: 'massage-board-handle-index',
26
};

1
interface MessageBoardRow {
2
  id: string;
3
  isPublic: string;
4
}
5

6
async function handlePublicChange(row: MessageBoardRow, checked: boolean) {
7
  Modal.confirm({
8
    title: '提示',
9
    content: '确认要修改吗？',
10
    onOk: async () => {
11
      try {
12
        await updatePublic({
13
          id: row.id,
14
          isPublic: checked ? '1' : '0',
15
        });
16
        row.isPublic = checked ? '1' : '0';
17
        message.success(checked ? '已设为公开' : '已设为不公开');
18
      } catch {
19
        message.error('操作失败');
20
      }
21
    },
22
  });
23
}

1
<template>
2
  <Page :auto-content-height="true">
3
    <BasicTable table-title="留言列表">
4
      <template #isPublic="{ row }">
5
        <a-switch :checked="row.isPublic === '1'" @change="(checked) => handlePublicChange(row, checked)" />
6
      </template>
7
      <template #action="{ row }">
8
        <Space>
9
          <Space v-if="row.handleStatus == '1'">
10
            <ghost-button @click.stop="handleView(row)"> 查看</ghost-button>
11
          </Space>
12
          <ghost-button @click.stop="handleReply(row)" v-else>
13
            答复</ghost-button>
14
        </Space>
15
      </template>
16
    </BasicTable>
17
  </Page>
18
</template>

1
import { Page } from '@vben/common-ui';
2
import { useTabs } from '@vben/hooks';
3
import { checkLoginBeforeDownload } from '#/api/system/oss';
4
import { useRouter, useRoute } from 'vue-router';
5
import { onMounted, reactive, ref } from 'vue';
6
import {
7
  queryByMessageBoardById,
8
  reply,
9
  replySecond,
10
  revoke,
11
  revokeSecond,
12
  fileData,
13
} from '#/api/business/message-board/index';
14
import { useAppConfig } from '@vben/hooks';
15
import { useAccessStore } from '@vben/stores';
16
import { stringify } from '@vben/request';
17
import { downloadByUrl } from '#/utils/file/download';

1
const router = useRouter();
2
const route = useRoute();
3
const { closeCurrentTab, setTabTitle } = useTabs();
4

5
const formData = reactive<any>({
6
  replyContent: '',
7
});
8

9
const typeOptions = ref([
10
  { label: '政策咨询', value: '1' },
11
  { label: '服务诉求', value: '2' },
12
  { label: '意见建议', value: '4' },
13
  { label: '问题投诉', value: '5' },
14
]);
15

16
const supportImageList = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
17

18
interface MessageBoardFile {
19
  url: string;
20
  fileSuffix: string;
21
  originalName: string;
22
  ossId: string;
23
}
24

25
const messageBoardFiles = ref<MessageBoardFile[]>([]);
26
const messageBoardImgs = ref<MessageBoardFile[]>([]);
27
const currentMessageBoard = ref();
28
const currentEditType = ref('');
29
const operType = ref('');

1
async function initFormData(id: any) {
2
  const res = await queryByMessageBoardById(id);
3
  currentMessageBoard.value = res;
4

5
  if (operType.value == 'reply') {
6
    if (!currentMessageBoard.value.secondReplyContent) {
7
      currentEditType.value = '2';
8
    }
9
    if (!currentMessageBoard.value.replyContent) {
10
      currentEditType.value = '1';
11
    }
12
  }
13

14
  if (currentMessageBoard.value.noticeFileId) {
15
    const ossFileList = await fileData(currentMessageBoard.value.noticeFileId);
16
    let files = ossFileList.rows;
17
    messageBoardFiles.value = [];
18
    messageBoardImgs.value = [];
19

20
    if (files.length) {
21
      messageBoardImgs.value = files.filter((item: MessageBoardFile) => {
22
        return isImageFile(item?.fileSuffix);
23
      });
24
      messageBoardFiles.value = files.filter((item: MessageBoardFile) => {
25
        return !isImageFile(item?.fileSuffix);
26
      });
27
    }
28
  }
29
}

1
const { apiURL, clientId } = useAppConfig(import.meta.env, import.meta.env.PROD);
2
const accessStore = useAccessStore();
3

4
async function handleDownload(row: any) {
5
  await checkLoginBeforeDownload();
6

7
  const params = {
8
    clientid: clientId,
9
    Authorization: `Bearer ${accessStore.accessToken}`,
10
  };
11

12
  const downloadLink = `${apiURL}/resource/oss/download/${row.ossId}?${stringify(params)}`;
13

14
  downloadByUrl({ fileName: row.fileName, url: downloadLink });
15
}

1
<div class="info-row file-ul" v-if="messageBoardFiles.length || messageBoardImgs.length">
2
  <div class="img-box">
3
    <a-image
4
      v-for="item in messageBoardImgs"
5
      :width="120"
6
      :height="115"
7
      :src="`${apiURL}/resource/oss/preview/${item.ossId}`"
8
      fallback="..."
9
    />
10
  </div>
11
  <div v-for="item in messageBoardFiles">
12
    <p v-if="isPdfFile(item?.fileSuffix)">
13
      <a href="javascript:;" @click.stop="pdfPreview(item?.url)">
14
        {{ item?.originalName }}
15
      </a>
16
    </p>
17
    <p v-else>
18
      <a href="javascript:;" @click.stop="handleDownload(item)">
19
        {{ item?.originalName }}
20
      </a>
21
    </p>
22
  </div>
23
</div>

1
<template v-if="currentMessageBoard && currentMessageBoard.replyContent">
2
  <div class="info-row">
3
    <p class="bolder">
4
      <span>答复单位：{{ (currentMessageBoard && currentMessageBoard.replyDeptName) || '/' }}</span>
5
      <span>办理人：{{ (currentMessageBoard && currentMessageBoard.handleUserName) || '/' }}</span>
6
      <span>办理时间：{{ (currentMessageBoard && currentMessageBoard.handleTime) || '/' }}</span>
7
    </p>
8
  </div>
9
  <div class="info-row reply-row" v-if="currentMessageBoard && currentMessageBoard.replyContent">
10
    <p class="reply-info">
11
      {{ (currentMessageBoard && currentMessageBoard.replyContent) || '/' }}
12
    </p>
13
    <div v-if="currentMessageBoard.replyContent && !currentMessageBoard.handleGrade">
14
      <span @click="handleRevoke('1')">撤销</span>
15
      <span @click="handleEdit('1')">修改</span>
16
    </div>
17
  </div>
18
</template>

1
<a-card title="二次反馈" v-if="currentMessageBoard && currentMessageBoard.secondContent">
2
  <div class="info-row">
3
    <span class="label"> 留言时间 </span>
4
    <p class="value">{{ currentMessageBoard && currentMessageBoard.rateTime }}</p>
5
  </div>
6
  <div class="info-row">
7
    <span class="label"> 反馈内容 </span>
8
    <p class="value">{{ currentMessageBoard && currentMessageBoard.secondContent }}</p>
9
  </div>
10
  <div class="info-row reply-row" v-if="currentMessageBoard && currentMessageBoard.secondReplyContent">
11
    <p class="reply-info">
12
      {{ (currentMessageBoard && currentMessageBoard.secondReplyContent) || '/' }}
13
    </p>
14
    <div v-if="currentMessageBoard.secondReplyContent">
15
      <span @click="handleRevoke('2')">撤销</span>
16
      <span @click="handleEdit('2')">修改</span>
17
    </div>
18
  </div>
19
</a-card>

1
<a-card title="答复内容" v-else>
2
  <a-form
3
    ref="formRef"
4
    :style="{ width: '80%' }"
5
    :model="formData"
6
    :wrapper-col="{ span: 24 }"
7
    autocomplete="off"
8
  >
9
    <a-form-item label="">
10
      <a-textarea
11
        v-model:value="formData.replyContent"
12
        :rows="4"
13
        placeholder="请输入内容，最多支持输入500字"
14
        :maxlength="500"
15
      ></a-textarea>
16
    </a-form-item>
17
  </a-form>
18
  <div class="info-row btn-row">
19
    <a-button @click="handleBack" class="default-btn"> 返回 </a-button>
20
    <a-button type="primary" @click="handleSubmit"> 提交 </a-button>
21
  </div>
22
</a-card>

1
:deep(.ant-card) {
2
  margin-bottom: 16px;
3
}
4

5
.info-row {
6
  display: flex;
7
  width: 100%;
8
  margin-bottom: 8px;
9
  justify-content: flex-start;
10
  align-items: flex-start;
11

12
  .label {
13
    width: 80px;
14
    min-width: 80px;
15
  }
16

17
  .bolder {
18
    font-weight: bold;
19
    font-size: 14px;
20
    line-height: 48px;
21

22
    span {
23
      margin-right: 18px;
24
    }
25
  }
26
}
27

28
.reply-row {
29
  display: flex;
30
  justify-content: space-between;
31

32
  .reply-info {
33
    text-indent: 2em;
34
    background-color: rgb(247, 248, 250);
35
    padding: 16px;
36
    flex: 1;
37
    box-sizing: border-box;
38
  }
39

40
  div {
41
    margin-left: 10px;
42
  }
43

44
  div > span {
45
    margin-right: 6px;
46
    cursor: pointer;
47
    color: #1476ff;
48
  }
49
}
50

51
.btn-row {
52
  justify-content: center;
53
  align-items: center;
54

55
  .default-btn {
56
    margin-right: 40px;
57
  }
58
}
59

60
.file-ul {
61
  display: flex;
62
  flex-direction: column;
63
  padding-left: 30px;
64

65
  .img-box {
66
    display: flex;
67
    flex-direction: row;
68

69
    :deep(.ant-image) {
70
      margin-right: 16px !important;
71
    }
72
  }
73

74
  div {
75
    margin-bottom: 4px;
76
  }
77
}

1
interface MessageBoard {
2
  id: string;                    // 留言 ID
3
  noticeTitle: string;           // 留言标题
4
  noticeContent: string;         // 留言内容
5
  noticeType: string;            // 留言类型（1-政策咨询，2-服务诉求，4-意见建议，5-问题投诉）
6
  noticeTime: string;            // 留言时间
7
  userName: string;              // 用户姓名
8
  phonenumber: string;           // 联系方式
9
  email: string;                 // 电子邮箱
10
  isPublic: string;              // 是否公开（0-不公开，1-公开）
11
  handleStatus: string;          // 办理状态（0-待答复，1-已答复）
12
  replyDeptName: string;         // 答复单位名称
13
  handleUserName: string;        // 办理人姓名
14
  handleTime: string;            // 办理时间
15
  replyContent: string;          // 首次答复内容
16
  secondContent: string;         // 二次反馈内容
17
  secondReplyContent: string;    // 二次答复内容
18
  noticeFileId: string;          // 附件关联 ID
19
}