修改退款审核、订单详情等页面显示

src/views/system/appstore/components/dict/user-advanced-search.vue

@@ -0,0 +1,36 @@
+<template>
+  <div style="max-width: 160px">
+    <a-input
+      allow-clear
+      size="small"
+      v-model:value="where.nickname"
+      placeholder="输入关键字搜索"
+      prefix-icon="el-icon-search"
+      @change="search"
+    >
+      <template #prefix>
+        <search-outlined class="ele-text-placeholder" />
+      </template>
+    </a-input>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import { SearchOutlined } from '@ant-design/icons-vue';
+  import type { WhereType } from '../types';
+
+  const emit = defineEmits<{
+    (e: 'search', where: WhereType): void;
+  }>();
+
+  // 搜索表单
+  const where = reactive<WhereType>({
+    nickname: ''
+  });
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', where);
+  };
+</script>

src/views/system/appstore/components/dict/user-select.vue

@@ -1,76 +1,91 @@
-<!-- 角色选择下拉框 -->
 <template>
-  <a-select
-    show-search
-    optionFilterProp="label"
-    :options="data"
-    allow-clear
-    :value="value"
-    :placeholder="placeholder"
-    @update:value="updateValue"
-    @search="onSearch"
-    @blur="onBlur"
-  />
+    <div style="max-width: 260px">
+      <ele-table-select
+        ref="selectRef"
+        :multiple="false"
+        :allow-clear="true"
+        placeholder="请选择"
+        value-key="userId"
+        label-key="nickname"
+        v-model:value="selectedValue"
+        :table-config="tableConfig"
+        :overlay-style="{ width: '520px', maxWidth: '80%' }"
+      >
+        <!-- 表头工具栏 -->
+        <template #toolbar>
+          <user-advanced-search @search="search"/>
+        </template>
+      </ele-table-select>
+    </div>
+    <!-- <div style="margin-top: 12px">
+      <a-button type="primary" @click="setInitValue">回显数据</a-button>
+    </div> -->
 </template>
 
 <script lang="ts" setup>
-  import { reactive, ref } from 'vue';
-  import { message } from 'ant-design-vue';
+  import { ref, reactive } from 'vue';
   import { listUsers } from '@/api/system/user';
-  import type { SelectProps } from 'ant-design-vue';
-  import { UserParam } from '@/api/system/user/model';
+  import UserAdvancedSearch from './user-advanced-search.vue';
+  import type { EleTableSelect } from 'ele-admin-pro/es';
+  import type { ProTableProps } from 'ele-admin-pro/es/ele-pro-table/types';
+  import type { WhereType } from '../types';
+  import type { User, UserParam } from '@/api/system/user/model';
 
-  const emit = defineEmits<{
-    (e: 'update:value', value: string): void;
-    (e: 'blur'): void;
-  }>();
+  const selectedValue = ref<number[]>([]);
 
-  withDefaults(
-    defineProps<{
-      value?: string;
-      placeholder?: string;
-    }>(),
-    {
-      placeholder: '请选择客户类型'
-    }
-  );
+  // 选择框实例
+  const selectRef = ref<InstanceType<typeof EleTableSelect> | null>(null);
 
-  // 字典数据
-  const data = ref<SelectProps['options']>([]);
+  // 表格配置
+  const tableConfig = reactive<ProTableProps>({
+    datasource: ({ page, limit, where, orders }) => {
+      return listUsers({ ...where, ...orders, page, limit });
+    },
+    columns: [
+      {
+        title: '用户编号',
+        dataIndex: 'userId',
+        sorter: true,
+        showSorterTooltip: false
+      },
+      {
+        title: '用户名',
+        key: 'nickname',
+        dataIndex: 'nickname',
+        sorter: false,
+        showSorterTooltip: false
+      },
+      ,
+      {
+        title: '手机号',
+        key: 'phone',
+        dataIndex: 'phone',
+        sorter: false,
+        showSorterTooltip: false
+      }
+    ],
+    toolkit: ['reload', 'columns'],
+    pageSize: 5,
+    pageSizeOptions: ['5', '10', '15', '20'],
+    size: 'small',
+    rowSelection: {
+      columnWidth: 38,
+      preserveSelectedRowKeys: true,
+      fixed: 'left'
+    },
+    toolsTheme: 'default',
+    bordered: true,
+    toolStyle: {
+      padding: '0 8px'
+    },
+    scroll: { x: 480 }
+  });
 
-  /* 更新选中数据 */
-  const updateValue = (value: string) => {
-    emit('update:value', value);
-  };
-
-  // 默认搜索条件
-  const where = ref<UserParam>({});
-
-  const search = () => {
-    /* 获取用户列 */
-    listUsers({ ...where?.value })
-      .then((result) => {
-        data.value = result?.map((d) => {
-          return {
-            value: d.userId,
-            label: d.nickname
-          };
-        });
-      })
-      .catch((e) => {
-        message.error(e.message);
-      });
-  };
-
-  const onSearch = (e) => {
-    where.value.nickname = e;
-    search();
-  };
-
-  search();
-
-  /* 失去焦点 */
-  const onBlur = () => {
-    emit('blur');
+  // 搜索
+  const search = (where: WhereType) => {
+    selectRef.value?.reload({
+      where,
+      page: 1
+    });
   };
 </script>

src/views/system/appstore/components/types/index.ts

@@ -0,0 +1,7 @@
+/**
+ * 搜索表单类型
+ */
+export interface WhereType {
+  keywords?: string;
+  nickname?: string;
+}