提交用户中心的文件错误

src/api/customer.ts

@@ -0,0 +1,38 @@
+import axios from 'axios';
+import { ListParams, queryList } from '@/api/list';
+
+export interface ListRecord {
+  id: undefined;
+  username: string;
+  phone: string;
+  email: string;
+  enable: string;
+  nickname: string;
+  avater: string;
+  address: string;
+}
+
+// 更新用户
+export function update(data: ListRecord) {
+  return axios.patch(`/api/rest/user/${data.id}`, data);
+}
+
+// 删除用户
+export function remove(id: string) {
+  return axios.delete(`/api/rest/role/${id}`);
+}
+
+// 模糊查询用户列表
+export function queryRoles(params?: ListParams<Partial<ListRecord>>) {
+  return queryList(`/api/rest/user/query`, params);
+}
+
+// 添加用户
+export function addUser(params: ListRecord) {
+  return axios.post('/api/rest/user/register', params);
+}
+
+// 是否启用
+export function enabled(id: string) {
+  return axios.patch(`/api/rest/user/${id}/toggle`);
+}

src/locale/zh-CN.ts

@@ -28,7 +28,7 @@ import localeUserSetting from '@/views/user/setting/locale/zh-CN';
 
 import systemUser from '@/views/system/user/locale/zh-CN';
 
-import localRole from '@/views/character/manage/locale/zh-CN';
+import localCustomer from '@/views/customer/manage/locale/zh-CN';
 import localeSettings from './zh-CN/settings';
 
 export default {
@@ -47,6 +47,7 @@ export default {
   'menu.faq': '常见问题',
   'menu.system': '系统管理',
   'menu.role': '角色中心',
+  'menu.customer': '用户中心',
   'navbar.docs': '文档中心',
   'navbar.action.locale': '切换为中文',
   ...localeSettings,
@@ -69,7 +70,7 @@ export default {
   ...locale500,
   ...localeUserInfo,
   ...localeUserSetting,
-  ...localRole,
+  ...localCustomer,
 
   ...systemUser,
 };

src/router/routes/modules/customer.ts

@@ -1,12 +1,12 @@
 import { DEFAULT_LAYOUT } from '../base';
 import { AppRouteRecordRaw } from '../types';
 
-const CHARACTER: AppRouteRecordRaw = {
+const CUSTOMER: AppRouteRecordRaw = {
-  path: '/character',
+  path: '/customer',
-  name: 'character',
+  name: 'customer',
   component: DEFAULT_LAYOUT,
   meta: {
-    locale: 'menu.role',
+    locale: 'menu.customer',
     icon: 'icon-computer',
     requiresAuth: true,
     order: 2,
@@ -15,9 +15,9 @@ const CHARACTER: AppRouteRecordRaw = {
     {
       path: 'manage',
       name: 'Manage',
-      component: () => import('@/views/character/manage/index.vue'),
+      component: () => import('@/views/customer/manage/index.vue'),
       meta: {
-        locale: 'menu.role.manage',
+        locale: 'menu.customer.manage',
         requiresAuth: true,
         permissions: ['*'],
       },
@@ -25,4 +25,4 @@ const CHARACTER: AppRouteRecordRaw = {
   ],
 };
 
-export default CHARACTER;
+export default CUSTOMER;

src/store/index.ts

@@ -3,10 +3,10 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import useAppStore from './modules/app';
 import useUserStore from './modules/user';
 import useTabBarStore from './modules/tab-bar';
-import useRoleStore from './modules/role';
+import useCustomerStore from './modules/customer';
 
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
 
-export { useAppStore, useUserStore, useTabBarStore, useRoleStore };
+export { useAppStore, useUserStore, useTabBarStore, useCustomerStore };
 export default pinia;

src/store/modules/customer/index.ts

@@ -7,10 +7,10 @@ import {
   update,
   enabled,
 } from '@/api/role';
-import { RoleState } from './type';
+import { customerState } from './type';
 
-const useRoleStore = defineStore('role', {
+const useCustomerStore = defineStore('role', {
-  state: (): RoleState => ({
+  state: (): customerState => ({
     current: undefined,
     pageSize: undefined,
     username: undefined,
@@ -23,7 +23,7 @@ const useRoleStore = defineStore('role', {
   }),
 
   getters: {
-    roleInfo(state: RoleState): RoleState {
+    roleInfo(state: customerState): customerState {
       return { ...state };
     },
   },
@@ -51,4 +51,4 @@ const useRoleStore = defineStore('role', {
   },
 });
 
-export default useRoleStore;
+export default useCustomerStore;

src/store/modules/customer/type.ts

@@ -1,7 +1,5 @@
-import { RoleRecord } from '@/api/role';
-
 export type RoleType = '' | '*' | 'admin' | 'user' | string[];
-export interface RoleState {
+export interface customerState {
   current?: string;
   pageSize?: string;
   username?: string;

src/views/character/manage/index.vue

@@ -230,7 +230,7 @@ import { ref, computed, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
 import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
-import { useRoleStore } from '@/store';
+import { useCustomerStore } from '@/store';
 import { ListParams } from '@/api/list';
 import { Pagination } from '@/types/global';
 import { ListRecord } from '@/api/role';
@@ -254,7 +254,7 @@ const generateFormModel = () => {
 
 const { t } = useI18n();
 const { loading, setLoading } = useLoading();
-const roleStore = useRoleStore();
+const roleStore = useCustomerStore();
 const renderData = ref<ListRecord[]>([]);
 const cloneColumns = ref<Column[]>([]);
 const showColumns = ref<Column[]>([]);

src/views/customer/manage/index.vue

@@ -0,0 +1,490 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['menu.customer', 'menu.customer.manage']" />
+
+    <a-card class="general-card" :title="$t('menu.list.searchTable')">
+      <a-row>
+        <a-col :flex="1">
+          <a-form
+            :model="formModel"
+            :label-col-props="{ span: 6 }"
+            :wrapper-col-props="{ span: 18 }"
+            label-align="left"
+          >
+            <a-row :gutter="16">
+              <a-col :span="7">
+                <a-form-item
+                  field="username"
+                  :label="$t('searchTable.form.username')"
+                >
+                  <a-input
+                    v-model="formModel.username"
+                    :placeholder="$t('searchTable.form.username.placeholder')"
+                  />
+                </a-form-item>
+              </a-col>
+
+              <a-col :span="9">
+                <a-form-item
+                  field="phone"
+                  :label="$t('searchTable.form.phone')"
+                >
+                  <a-input
+                    v-model="formModel.phone"
+                    :placeholder="$t('searchTable.form.phone.placeholder')"
+                  />
+                </a-form-item>
+              </a-col>
+
+              <a-col :span="8">
+                <a-form-item
+                  field="email"
+                  :label="$t('searchTable.form.email')"
+                >
+                  <a-input
+                    v-model="formModel.email"
+                    :placeholder="$t('searchTable.form.email.placeholder')"
+                  />
+                </a-form-item>
+              </a-col>
+
+              <!-- <a-col :span="9">
+                <a-form-item field="role" :label="$t('searchTable.form.role')">
+                  <a-select
+                    v-model="formModel.role"
+                    :options="roleOptions"
+                    :placeholder="$t('searchTable.form.role.placeholder')"
+                  />
+                </a-form-item>
+              </a-col> -->
+            </a-row>
+          </a-form>
+        </a-col>
+        <a-divider style="height: 84px" direction="vertical" />
+
+        <!-- 更新和重置按钮 -->
+        <a-col :flex="'86px'" style="text-align: right">
+          <a-space direction="vertical" :size="18">
+            <a-button type="primary" @click="search">
+              <template #icon>
+                <icon-search />
+              </template>
+              {{ $t('searchTable.form.search') }}
+            </a-button>
+            <a-button @click="reset">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              {{ $t('searchTable.form.reset') }}
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+
+      <a-divider style="margin-top: 0" />
+      <a-row :gutter="10">
+        <a-col :span="9">
+          <a-button
+            type="primary"
+            @click="handleClick"
+            style="margin-right: 16px"
+          >
+            <template #icon>
+              <icon-plus />
+            </template>
+            {{ $t('searchTable.operation.create') }}
+          </a-button>
+
+          <!-- <a-button type="primary" status="danger" @click="handleDelete">
+            <template #icon>
+              <icon-close />
+            </template>
+            {{ $t('searchTable.operation.delete') }}
+          </a-button> -->
+        </a-col>
+      </a-row>
+
+      <a-divider style="margin-top: 16px" />
+      <a-table
+        row-key="id"
+        :loading="loading"
+        :pagination="false"
+        :columns="(cloneColumns as TableColumnData[])"
+        :data="renderData"
+        :bordered="false"
+        :size="size"
+        :row-selection="true"
+        @select="selectRow"
+      >
+        <template #index="{ rowIndex }">
+          {{ rowIndex + 1 + (pagination.page - 1) * pagination.size }}
+        </template>
+        <template #enabled="{ record }">
+          <a-switch
+            :model-value="record.enabled"
+            :checked-value="true"
+            :unchecked-value="false"
+            @change="enabledStatus(record)"
+          />
+        </template>
+        <template #operations="{ record }">
+          <a-button
+            type="text"
+            size="small"
+            @click="handleClick(record, 'modify')"
+          >
+            {{ $t('searchTable.columns.operations.detail') }}
+          </a-button>
+        </template>
+      </a-table>
+      <a-space direction="vertical" size="large" style="margin-top: 16px">
+        <a-pagination
+          show-total
+          :current="pagination.page"
+          @change="onPageChange"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+        />
+      </a-space>
+
+      <a-modal
+        v-model:visible="visible"
+        :title="dialogTitle"
+        :mask-closable="false"
+        @cancel="handleCancel"
+        @before-ok="handleBeforeOk"
+      >
+        <a-form :model="formDate">
+          <a-form-item field="username" :label="$t('add.user.info.username')">
+            <a-input
+              v-model="formDate.username"
+              :placeholder="$t('add.user.info.username.placeholder')"
+              :required="required"
+              :rules="[
+                {
+                  required: true,
+                  message: '用户名不能为空',
+                },
+              ]"
+            />
+          </a-form-item>
+          <a-form-item field="password" :label="$t('add.user.info.password')">
+            <a-input-password
+              v-model="formDate.password"
+              :placeholder="$t('add.user.info.password.placeholder')"
+              :rules="[
+                {
+                  required: true,
+                  message: '密码不能为空',
+                },
+              ]"
+            />
+          </a-form-item>
+          <a-form-item field="phone" :label="$t('add.user.info.phone')">
+            <a-input
+              v-model="formDate.phone"
+              :placeholder="$t('add.user.info.phone.placeholder')"
+              :rules="[
+                {
+                  required: true,
+                  message: '手机号码不能为空',
+                },
+              ]"
+            />
+          </a-form-item>
+          <a-form-item field="email" :label="$t('add.user.info.email')">
+            <a-input
+              v-model="formDate.email"
+              :placeholder="$t('add.user.info.email.placeholder')"
+            />
+          </a-form-item>
+          <a-form-item field="nickName" :label="$t('add.user.info.nickName')">
+            <a-input
+              v-model="formDate.nickName"
+              :placeholder="$t('add.user.info.nickName.placeholder')"
+            />
+          </a-form-item>
+          <a-form-item field="address" :label="$t('add.user.info.address')">
+            <a-input
+              v-model="formDate.address"
+              :placeholder="$t('add.user.info.address.placeholder')"
+            />
+          </a-form-item>
+          <a-form-item field="dept" :label="$t('add.user.info.dept')">
+            <a-select
+              v-model="formDate.dept"
+              :placeholder="$t('add.user.info.dept.placeholder')"
+            >
+              <a-option value="user">user</a-option>
+              <a-option value="auditor">auditor</a-option>
+              <a-option value="admin">admin</a-option>
+            </a-select>
+          </a-form-item>
+        </a-form>
+      </a-modal>
+    </a-card>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, computed, reactive, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+import { useCustomerStore } from '@/store';
+import { ListParams } from '@/api/list';
+import { Pagination } from '@/types/global';
+import { ListRecord } from '@/api/customer';
+import { Message } from '@arco-design/web-vue';
+import useLoading from '@/hooks/loading';
+
+type SizeProps = 'mini' | 'small' | 'medium' | 'large';
+type Column = TableColumnData & { checked?: true };
+
+// 搜索的条件数据
+const generateFormModel = () => {
+  return {
+    username: '',
+    phone: '',
+    email: '',
+    role: '',
+  };
+};
+
+const { t } = useI18n();
+const { loading, setLoading } = useLoading();
+const customerStore = useCustomerStore();
+const renderData = ref<ListRecord[]>([]);
+const cloneColumns = ref<Column[]>([]);
+const showColumns = ref<Column[]>([]);
+const size = ref<SizeProps>('medium');
+const seleteRowList = ref();
+const visible = ref(false);
+const messageType = ref();
+let formDifer = {};
+const dialogTitle = ref('添加用户');
+const form = () => {
+  return {
+    id: '',
+    username: '',
+    password: '',
+    phone: '',
+    email: '',
+    nickName: '',
+    address: '',
+    dept: '',
+  };
+};
+
+const formDate = ref(form());
+// 打开弹窗
+const handleClick = (record: any, type: string) => {
+  if (type === 'modify') {
+    messageType.value = 'modify';
+    formDifer = record;
+    formDate.value = { ...record };
+    dialogTitle.value = '修改用户信息';
+  }
+  visible.value = true;
+};
+
+// 做出只修改的部分
+const diffDataForm = (newData: any, oldData: any) => {
+  const result = {}; // 报错修改的字段内容
+  Object.keys(oldData).forEach((key) => {
+    if (oldData[key] !== newData[key] || key === 'id') {
+      result[key] = newData[key];
+    }
+  });
+  return result;
+};
+
+// 提交
+const handleBeforeOk = async (done: any) => {
+  console.log(1);
+
+  try {
+    formDifer = diffDataForm(formDate.value, formDifer);
+
+    if (dialogTitle.value === '修改用户信息') {
+      const res = await customerStore.updateUser(formDifer);
+      if (res.status === 200) {
+        Message.success({
+          content: t('add.user.info.sucess'),
+          duration: 3 * 1000,
+        });
+      } else {
+        Message.error({
+          content: t('add.user.info.fail'),
+          duration: 3 * 1000,
+        });
+      }
+    } else {
+      const res = await customerStore.addUser(formDate.value);
+      if (res.status === 200) {
+        Message.success({
+          content: t('modify.user.info.sucess'),
+          duration: 3 * 1000,
+        });
+      } else {
+        Message.error({
+          content: t('modify.user.info.fail'),
+          duration: 3 * 1000,
+        });
+      }
+    }
+  } catch (err) {
+    // you can report use errorHandler or other
+  } finally {
+    formDate.value = form();
+    dialogTitle.value = '添加用户';
+    search();
+  }
+};
+
+// 是否启用
+const enabledStatus = async (record: string) => {
+  const res = await customerStore.enabledStatus(record.id);
+  search();
+};
+
+// 选择
+const selectRow = (rowKeys: string[]) => {
+  seleteRowList.value = rowKeys;
+};
+
+// 删除
+const handleDelete = async () => {
+  const res = await customerStore.deleteUser(seleteRowList.value);
+};
+
+// 关闭弹窗
+const handleCancel = () => {
+  formDate.value = form();
+  visible.value = false;
+  dialogTitle.value = '添加用户';
+};
+
+// 映射到formModel
+const formModel = ref(generateFormModel());
+
+// 基础分页查询的信息
+const basePagination: Pagination = {
+  page: 1,
+  size: 10,
+};
+
+const pagination = reactive({
+  ...basePagination,
+});
+
+//
+const onPageChange = (current: number) => {
+  const page = current;
+  fetchData({ ...basePagination, page });
+};
+
+// 调用接口请求数据
+const fetchData = async (params: { page: 1; size: 10 }) => {
+  setLoading(true);
+  try {
+    const { data } = await customerStore.getUserInfo(params);
+    renderData.value = data.list;
+    pagination.page = params.page;
+    pagination.total = data.total;
+  } catch (err) {
+    // you can report use errorHandler or other
+  } finally {
+    setLoading(false);
+  }
+};
+
+// 查询
+const search = () => {
+  fetchData({
+    ...basePagination,
+    ...formModel.value,
+  } as unknown as any);
+};
+
+search();
+
+// 重置
+const reset = () => {
+  formModel.value = generateFormModel();
+};
+
+// 表格
+const columns = computed<TableColumnData[]>(() => [
+  {
+    title: t('searchTable.columns.index'),
+    dataIndex: 'index',
+    slotName: 'index',
+  },
+  {
+    title: t('searchTable.columns.username'),
+    dataIndex: 'username',
+  },
+  {
+    title: t('searchTable.columns.phone'),
+    dataIndex: 'phone',
+  },
+  {
+    title: t('searchTable.columns.email'),
+    dataIndex: 'email',
+  },
+  {
+    title: t('searchTable.columns.nickName'),
+    dataIndex: 'nickName',
+  },
+  {
+    title: t('searchTable.columns.address'),
+    dataIndex: 'address',
+  },
+  {
+    title: t('searchTable.columns.enabled'),
+    dataIndex: 'enabled',
+    slotName: 'enabled',
+  },
+  {
+    title: t('searchTable.columns.operations'),
+    dataIndex: 'operations',
+    slotName: 'operations',
+  },
+]);
+
+// 将表格数据可视化
+watch(
+  () => columns.value,
+  (val) => {
+    cloneColumns.value = val;
+    cloneColumns.value.forEach((item, index) => {
+      item.checked = true;
+    });
+    showColumns.value = cloneColumns.value;
+  },
+  { deep: true, immediate: true }
+);
+// 用户身份
+const roleOptions = computed<SelectOptionData[]>(() => [
+  {
+    label: t('searchTable.form.role.user'),
+    vlaue: 'user',
+  },
+  {
+    label: t('searchTable.form.role.auditor'),
+    vlaue: 'auditor',
+  },
+]);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Manage',
+};
+</script>
+
+<style scoped lang="less">
+.container {
+  padding: 0 20px 20px 20px;
+}
+</style>

src/views/customer/manage/locale/en-US.ts

@@ -0,0 +1,45 @@
+export default {
+  'menu.list.searchTable': 'Search Table',
+  'menu.role.manage': 'Role Manage',
+  'searchTable.form.number': 'Set Number',
+  'searchTable.form.number.placeholder': 'Please enter Set Number',
+  'searchTable.form.name': 'Set Name',
+  'searchTable.form.name.placeholder': 'Please enter Set Name',
+  'searchTable.form.contentType': 'Content Type',
+  'searchTable.form.contentType.img': 'image-text',
+  'searchTable.form.contentType.horizontalVideo': 'Horizontal short video',
+  'searchTable.form.contentType.verticalVideo': 'Vertical short video',
+  'searchTable.form.filterType': 'Filter Type',
+  'searchTable.form.filterType.artificial': 'artificial',
+  'searchTable.form.filterType.rules': 'Rules',
+  'searchTable.form.createdTime': 'Create Date',
+  'searchTable.form.status': 'Status',
+  'searchTable.form.status.online': 'Online',
+  'searchTable.form.status.offline': 'Offline',
+  'searchTable.form.search': 'Search',
+  'searchTable.form.reset': 'Reset',
+  'searchTable.form.selectDefault': 'All',
+  'searchTable.operation.create': 'Create',
+  'searchTable.operation.import': 'Import',
+  'searchTable.operation.download': 'Download',
+  // columns
+  'searchTable.columns.index': '#',
+  'searchTable.columns.number': 'Set Number',
+  'searchTable.columns.name': 'Set Name',
+  'searchTable.columns.contentType': 'Content Type',
+  'searchTable.columns.filterType': 'Filter Type',
+  'searchTable.columns.count': 'Count',
+  'searchTable.columns.createdTime': 'CreatedTime',
+  'searchTable.columns.status': 'Status',
+  'searchTable.columns.operations': 'Operations',
+  'searchTable.columns.operations.view': 'View',
+  // size
+  'searchTable.size.mini': 'mini',
+  'searchTable.size.small': 'small',
+  'searchTable.size.medium': 'middle',
+  'searchTable.size.large': 'large',
+  // actions
+  'searchTable.actions.refresh': 'refresh',
+  'searchTable.actions.density': 'density',
+  'searchTable.actions.columnSetting': 'columnSetting',
+};

src/views/customer/manage/locale/zh-CN.ts

@@ -0,0 +1,46 @@
+export default {
+  'menu.list.searchTable': '查询表格',
+  'menu.customer.manage': '用户管理',
+  'roleManage.username': '用户名',
+  'searchTable.form.username': '用户名',
+  'searchTable.form.username.placeholder': '请输入用户名',
+  'searchTable.form.phone': '电话号码',
+  'searchTable.form.phone.placeholder': '请输入电话号码',
+  'searchTable.form.role': '角色',
+  'searchTable.form.role.placeholder': '请选择角色',
+  'searchTable.form.role.user': '普通用户',
+  'searchTable.form.email': 'Email',
+  'searchTable.form.email.placeholder': '请输入Email',
+  'searchTable.form.role.auditor': '审核员',
+  'searchTable.form.search': '查询',
+  'searchTable.form.reset': '重置',
+  'searchTable.columns.nickName': '昵称',
+  'searchTable.columns.username': '用户名',
+  'searchTable.columns.phone': '电话',
+  'searchTable.columns.email': 'Email',
+  'searchTable.columns.enabled': '是否启用',
+  'searchTable.columns.avater': '头像',
+  'searchTable.columns.address': '地址',
+  'searchTable.columns.operations.detail': '详细',
+  'searchTable.operation.create': '添加',
+  'searchTable.operation.delete': '删除',
+  'add.user.info': '添加用户',
+  'add.user.info.username': '用户名',
+  'add.user.info.username.placeholder': '请输入用户名',
+  'add.user.info.password': '密码',
+  'add.user.info.password.placeholder': '请输入密码',
+  'add.user.info.phone': '电话号码',
+  'add.user.info.phone.placeholder': '请输入电话号码',
+  'add.user.info.email': 'Email',
+  'add.user.info.email.placeholder': '请输入Email',
+  'add.user.info.nickName': '昵称',
+  'add.user.info.nickName.placeholder': '请输入昵称',
+  'add.user.info.address': '地址',
+  'add.user.info.address.placeholder': '请输入地址',
+  'add.user.info.dept': '角色',
+  'add.user.info.dept.placeholder': '请选择角色',
+  'add.user.info.sucess': '添加成功',
+  'add.user.info.fail': '添加失败',
+  'modify.user.info.sucess': '修改成功',
+  'modify.user.info.fail': '修改失败',
+};