feat(feedback): add feedback page

mock/demo/account.ts

@@ -3,7 +3,7 @@ import { resultSuccess, resultError } from '../_util';
 import { ResultEnum } from '../../src/enums/httpEnum';
 
 const userInfo = {
-  name: 'Vben',
+  name: '4dage',
   userid: '00000001',
   email: 'test@gmail.com',
   signature: '海纳百川，有容乃大',
@@ -39,7 +39,7 @@ const userInfo = {
   notifyCount: 12,
   unreadCount: 11,
   country: 'China',
-  address: 'Xiamen City 77',
+  address: 'Zhuhai City 77',
   phone: '0592-268888888',
 };
 

mock/feedback/list.ts

@@ -0,0 +1,43 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { mock, Random } from 'mockjs';
+import { resultPageSuccess } from '../_util';
+Random.extend({
+  phone: function () {
+    const phonePrefixs = ['132', '135', '189']; // 自己写前缀哈
+    return this.pick(phonePrefixs) + mock(/\d{8}/); //Number()
+  },
+});
+// console.log(Random.phone());
+// 生成 1 - 10 个 随机手机号码
+
+const demoList = (() => {
+  const result: any[] = [];
+  for (let index = 0; index < 200; index++) {
+    const { phone } = mock({
+      phone: '@phone',
+    });
+
+    result.push({
+      id: `${index}`,
+      name: '@ctitle(5,15)',
+      nickName: '@ctitle(5,15)',
+      phone: phone,
+      'feedbackType|1': [0, 1, 2, 3, 4],
+      content: '@cparagraph(1, 3)',
+      createTime: '@datetime',
+    });
+  }
+  return result;
+})();
+
+export default [
+  {
+    url: '/basic-api/zfb/feedback/list',
+    timeout: 1000,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, demoList);
+    },
+  },
+] as MockMethod[];

src/api/feedback/list.ts

@@ -0,0 +1,20 @@
+import { defHttp } from '/@/utils/http/axios';
+import { PageParams, RentListGetResultModel } from './model';
+
+enum Api {
+  pageList = '/zfb/feedback/list',
+}
+
+/**
+ * @description: Get sample list value
+ */
+
+export const ListApi = (params: PageParams) =>
+  defHttp.get<RentListGetResultModel>({
+    url: Api.pageList,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });

src/api/feedback/model.ts

@@ -0,0 +1,20 @@
+import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
+/**
+ * @description: Request list interface parameters
+ */
+export type PageParams = BasicPageParams;
+
+export interface OrderListItem {
+  id: number;
+  name: string;
+  nickName: string;
+  phone: string;
+  feedbackType: number;
+  content: string;
+  createTime: string;
+}
+
+/**
+ * @description: Request list return value
+ */
+export type RentListGetResultModel = BasicFetchResult<OrderListItem>;

src/views/dashboard/feedback/list.vue

@@ -1,5 +1,154 @@
 <template>
-  <div> 反馈列表 </div>
+  <div class="p-4">
+    <BasicTable @register="registerTable">
+      <template #toolbar> </template>
+      <template #feedbackType="{ record }">
+        {{ renderFeedbackType(record.feedbackType) }}
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              icon: 'mdi:information-outline',
+              label: '详情',
+              onClick: () => {
+                go(`/order/list/detail/${record.orderNo}`);
+              },
+            },
+            {
+              icon: 'mdi:printer-outline',
+              label: '打印',
+              color: 'error',
+              onClick: () => {
+                createMessage.info(`暂未接入`);
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+  </div>
 </template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, BasicColumn, FormProps, TableAction } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { uploadApi } from '/@/api/sys/upload';
+  // import { Switch } from 'ant-design-vue';
+  // import { h } from 'vue';
+  import { ListApi } from '/@/api/feedback/list';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  // import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useGo } from '/@/hooks/web/usePage';
 
-<script lang="ts" setup></script>
+  export default defineComponent({
+    components: { BasicTable, TableAction },
+    setup() {
+      const { createMessage } = useMessage();
+      const go = useGo();
+      const { t } = useI18n();
+      const columns: BasicColumn[] = [
+        {
+          title: 'ID',
+          dataIndex: 'id',
+          fixed: 'left',
+          width: 60,
+        },
+        {
+          title: '会员名称',
+          dataIndex: 'name',
+          width: 160,
+        },
+        {
+          title: '会员昵称',
+          dataIndex: 'nickName',
+          width: 80,
+        },
+        {
+          title: '手机',
+          dataIndex: 'phone',
+          width: 80,
+        },
+        {
+          title: '反馈类型',
+          dataIndex: 'feedbackType',
+          slots: { customRender: 'feedbackType' },
+          sorter: true,
+          width: 80,
+        },
+        {
+          title: '详细内容',
+          dataIndex: 'content',
+          width: 250,
+        },
+        {
+          title: '反馈时间',
+          dataIndex: 'createTime',
+          width: 130,
+        },
+        // {
+        //   title: '操作',
+        //   dataIndex: '',
+        //   slots: { customRender: 'action' },
+        //   fixed: 'right',
+        //   width: 140,
+        // },
+      ];
+
+      const searchForm: Partial<FormProps> = {
+        labelWidth: 100,
+        schemas: [
+          {
+            field: 'name',
+            label: '会员名称',
+            component: 'Input',
+            colProps: {
+              xl: 5,
+              xxl: 5,
+            },
+          },
+        ],
+      };
+
+      const [registerTable] = useTable({
+        title: '反馈列表',
+        api: ListApi,
+        columns: columns,
+        useSearchForm: true,
+        formConfig: searchForm,
+        showTableSetting: true,
+        tableSetting: { fullScreen: true },
+        showIndexColumn: false,
+        rowKey: 'id',
+        pagination: { pageSize: 20 },
+        bordered: true,
+      });
+
+      function renderFeedbackType(type: number): string {
+        switch (type) {
+          case 0:
+            return '商口相关';
+          case 1:
+            return '物流状况';
+          case 2:
+            return '客户服务';
+          case 3:
+            return '产品建议';
+          case 4:
+            return '其他';
+          default:
+            return '';
+        }
+      }
+
+      return {
+        registerTable,
+        createMessage,
+        t,
+        go,
+        renderFeedbackType,
+        uploadApi: uploadApi as any,
+      };
+    },
+  });
+</script>