用户管理-详情

src/views/system/receiver/schema.ts

@@ -13,6 +13,7 @@ import { getDistributorId } from '/@/commonSchemaProperty';
 import { usePermission } from '/@/hooks/web/usePermission';
 import { BatchVerifyParams } from '/@/api/model/receiver';
 import { useUserStore } from '/@/store/modules/user';
+import { phoneRule } from '/@/commonSchemaProperty/formRules';
 const { hasPermission } = usePermission();
 const userStore = useUserStore();
 export enum YesNoEnum {
@@ -147,10 +148,7 @@ export const schema = {
         },
         colProps,
         component: 'Input',
-        rules: [
-          { required: true, message: '请输入电话！' },
-          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码！', trigger: 'blur' },
-        ],
+        rules: [{ required: true, message: '请输入电话！' }, phoneRule()],
       },
       table: {},
     },

src/views/system/user/detail.vue

 <template>
-  <Card :bordered="false">
-    <Descriptions bordered :column="3">
-      <Descriptions.Item
-        v-for="p in displayProps"
-        :key="p.title"
-        :label="p.title"
-        :span="['avatar'].includes(p.name) ? 3 : 1"
-      >
-        <span v-if="p.key === 'avatar'">
-          <img :src="p.value" style="width: 120px; height: 120px" />
-        </span>
-        <template v-else>
-          {{ p.value }}
-        </template>
-      </Descriptions.Item>
-    </Descriptions>
-  </Card>
+  <div>
+    <Card :bordered="false" :loading="!data.isOver">
+      <template #extra v-if="data.isOver">
+        <a-button type="primary" v-if="isShowHandleEdit(data.detail.status)" @click="handleEdit">
+          <template #icon> <Icon icon="clarity:note-edit-line" /></template>
+          编辑
+        </a-button>
+        <a-popconfirm
+          class="ml-4"
+          title="确定通过吗"
+          ok-text="是"
+          cancel-text="否"
+          @confirm="handleVerify(StatusValEnum.PASSED)"
+        >
+          <a-button type="primary" v-if="isShowHandlePassed(data.detail.status)">通过</a-button>
+        </a-popconfirm>
+
+        <a-popconfirm
+          class="ml-4"
+          title="确定拒绝吗"
+          ok-text="是"
+          cancel-text="否"
+          @confirm="handleVerify(StatusValEnum.PASSED)"
+        >
+          <a-button type="danger" v-if="isShowHandleReject(data.detail.status)">拒绝</a-button>
+        </a-popconfirm>
+
+        <a-popconfirm
+          class="ml-4"
+          title="确定禁用吗"
+          ok-text="是"
+          cancel-text="否"
+          @confirm="handleVerify(StatusValEnum.FORBIDDEN)"
+        >
+          <a-button type="danger" v-if="isShowHandleForbidden(data.detail.status)">禁用</a-button>
+        </a-popconfirm>
+
+        <a-popconfirm class="ml-4" title="确定删除吗" ok-text="是" cancel-text="否" @confirm="handleDelete">
+          <a-button type="danger" v-if="isShowHandleDelete()">删除</a-button>
+        </a-popconfirm>
+      </template>
+      <Descriptions bordered :column="3">
+        <Descriptions.Item
+          v-for="p in displayProps"
+          :key="p.title"
+          :label="p.title"
+          :span="['avatar'].includes(p.name) ? 3 : 1"
+        >
+          <span v-if="p.key === 'avatar'">
+            <img :src="p.value" style="width: 120px; height: 120px" />
+          </span>
+          <template v-else>
+            {{ p.value }}
+          </template>
+        </Descriptions.Item>
+      </Descriptions>
+    </Card>
+    <UserDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
 </template>
-<script lang="ts" setup name="DeviceDetail">
+<script lang="ts" setup name="UserDetail">
   import { onMounted, computed, ref, reactive } from 'vue';
-  import { useRoute } from 'vue-router';
+  import { useRoute, useRouter } from 'vue-router';
   import { ComputedRef } from '@vue/reactivity';
   import { Descriptions, Card } from 'ant-design-vue';
   import { descriptionColumns } from './schema';
   import * as UserApi from '/@/api/system/userApi';
-  import { Device } from '/@/api/model/device';
-
+  import { Icon } from '/@/components/Icon';
+  import {
+    isShowHandleEdit,
+    isShowHandlePassed,
+    isShowHandleForbidden,
+    isShowHandleReject,
+    isShowHandleDelete,
+    getVerifyParams,
+    StatusValEnum,
+  } from './schema';
+  import UserDrawer from './drawer.vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import { User } from '/@/api/model/user';
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const router = useRouter();
   const route = useRoute();
   const id = ref(route.params?.id);
   let data = reactive({
@@ -33,7 +88,7 @@
     isOver: false,
   });
   const getDetail = () => {
-    UserApi.getById(id.value).then((res: Device) => {
+    UserApi.getById(id.value).then((res: User) => {
       data.isOver = true;
       data.detail = res;
     });
@@ -42,6 +97,47 @@
   onMounted(() => {
     getDetail();
   });
+  const setLoading = (flag: boolean) => {
+    data.isOver = !flag;
+  };
+  const reload = () => {
+    data.isOver = false;
+    data.detail = {};
+    getDetail();
+  };
+
+  const handleSuccess = () => {
+    reload();
+  };
+
+  const handleVerify = (status: string) => {
+    setLoading(true);
+    UserApi.batchVerify(getVerifyParams(data.detail, status))
+      .then((_) => {
+        reload();
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  };
+
+  const handleEdit = () => {
+    openDrawer(true, {
+      record: data.detail,
+      isUpdate: true,
+    });
+  };
+
+  const handleDelete = () => {
+    setLoading(true);
+    UserApi.remove(data.detail.id)
+      .then((_) => {
+        router.back();
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  };
 
   const displayProps: ComputedRef<Array<any>> = computed(() => {
     if (!data.isOver) return {};

src/views/system/user/index.vue

@@ -95,7 +95,7 @@
     <UserDrawer @register="registerDrawer" @success="handleSuccess" />
   </div>
 </template>
-<script lang="ts" setup name="DeviceIndex">
+<script lang="ts" setup name="AUTH_SYSTEM_USER">
   import {
     isShowHandleEdit,
     isShowHandlePassed,
@@ -119,6 +119,7 @@
   import componentSetting from '/@/settings/componentSetting';
   import UserDrawer from './drawer.vue';
   import { columns, searchFormSchema } from './schema';
+  import { useActivatedReload } from '/@/hooks/myhooks/reLoadHook';
 
   const { hasPermission } = usePermission();
   const go = useGo();
@@ -157,7 +158,7 @@
       fixed: 'right',
     },
   });
-
+  useActivatedReload(reload);
   const handleParams = (params) => {
     const { pageNum, pageSize } = params;
     const handledParams: any = { pageNum, pageSize };
@@ -247,6 +248,6 @@
   };
 
   const handleView = (record) => {
-    go('/system/user/' + record.id);
+    go('/main/system/user/' + record.id);
   };
 </script>

src/views/system/user/schema.ts

@@ -11,6 +11,7 @@ import { FormSchema } from '/@/components/Table';
 import * as RoleApi from '/@/api/system/roleApi';
 import { getDistributorId } from '/@/commonSchemaProperty';
 import { usePermission } from '/@/hooks/web/usePermission';
+import { phoneRule } from '/@/commonSchemaProperty/formRules';
 const { hasPermission } = usePermission();
 export interface BatchVerifyParams {
   /**
@@ -173,6 +174,7 @@ export const schema = {
         },
         colProps,
         component: 'Input',
+        rules: [phoneRule()],
       },
       table: {},
     },
@@ -325,8 +327,8 @@ export const schema = {
   ],
 };
 
-const queryFields = ['distributorId', 'username', 'realName', 'mobile', 'status', 'deleteStatus', 'createTime'];
-const editFields = ['distributorId', 'username', PASSWORD, 'realName', 'mobile', 'roleList', 'deleteStatus'];
+const queryFields = ['distributorId', 'username', 'realName', 'mobile', 'status', 'createTime'];
+const editFields = ['distributorId', 'username', PASSWORD, 'realName', 'mobile', 'roleList'];
 const tableFields = [
   'distributorId',
   'username',
@@ -334,7 +336,6 @@ const tableFields = [
   'mobile',
   'roleList',
   'status',
-  'deleteStatus',
   'editorName',
   'createTime',
 ];
@@ -346,7 +347,6 @@ const descriptionFields = [
   'mobile',
   'status',
   'salePeopleId',
-  'deleteStatus',
   'editorId',
   'editorName',
   'createTime',
@@ -361,6 +361,7 @@ export const searchFormSchema: FormSchema[] = schema.properties
         field,
         label,
         defaultValue: undefined,
+        // @ts-ignore
         rules: rules.filter((r) => !r.required),
         ...formProps,
       } as FormSchema),