|
|
@@ -1,5 +1,5 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { onMounted, ref, useTemplateRef } from 'vue';
|
|
|
+import { ref, useTemplateRef } from 'vue';
|
|
|
import { message } from 'ant-design-vue';
|
|
|
import dayjs, { Dayjs } from 'dayjs';
|
|
|
|
|
|
@@ -7,19 +7,21 @@ import ConfirmModal from '@/components/ConfirmModal.vue';
|
|
|
import OrganizationalStructure from '@/components/OrganizationalStructure.vue';
|
|
|
import { useRequest } from '@/hooks/request';
|
|
|
import { t } from '@/i18n';
|
|
|
-import { addAccount, getFindRolesByOrgIds } from '@/api';
|
|
|
+import { addAccount, batchDeleteAccount, getFindRolesByOrgIds, getUserPageList, updateAccount } from '@/api';
|
|
|
|
|
|
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
|
|
import type { Key } from 'ant-design-vue/es/table/interface';
|
|
|
-import type { AccountForm, CharacterPageItem, UserPageParams } from '@/types';
|
|
|
+import type { AccountForm, CharacterPageItem, UserPageItem, UserPageParams } from '@/types';
|
|
|
|
|
|
const modalComponentRef = useTemplateRef('modalComponent');
|
|
|
const { handleRequest } = useRequest();
|
|
|
const accountKeys = ref<Key[]>([]);
|
|
|
-const searchContent = ref<string>();
|
|
|
+const searchContent = ref<string>('');
|
|
|
const accountTerm = ref<[Dayjs, Dayjs]>();
|
|
|
const orgId = ref<number>();
|
|
|
const formRef = ref<FormInstance>();
|
|
|
+const titleAccount = ref<boolean>(true);
|
|
|
+const accountId = ref<number>(0);
|
|
|
const accountPageParam = ref<UserPageParams>({
|
|
|
pageIndex: 1,
|
|
|
pageSize: 10,
|
|
|
@@ -28,12 +30,11 @@ const accountPageParam = ref<UserPageParams>({
|
|
|
startTenancy: '',
|
|
|
endTenancy: '',
|
|
|
enabled: undefined,
|
|
|
- orgId: 1,
|
|
|
+ orgId: undefined,
|
|
|
roleId: undefined,
|
|
|
});
|
|
|
const accountTotal = ref<number>();
|
|
|
const accountOpen = ref<boolean>(false);
|
|
|
-const checkOpen = ref<boolean>(false);
|
|
|
const characterPageList = ref<CharacterPageItem[]>([]);
|
|
|
const accountForm = ref<AccountForm>({
|
|
|
userName: '',
|
|
|
@@ -41,77 +42,76 @@ const accountForm = ref<AccountForm>({
|
|
|
password: '',
|
|
|
enabled: true,
|
|
|
roleId: undefined,
|
|
|
- accountTerm: [dayjs(), dayjs()],
|
|
|
+ accountTerm: undefined,
|
|
|
});
|
|
|
-const accountList = ref([
|
|
|
- {
|
|
|
- deviceName: '15972030052',
|
|
|
- deviceName1: '王某某',
|
|
|
- deviceName2: '管理员',
|
|
|
- deviceName3: '2024-12-31 23:12:00',
|
|
|
- deviceName4: '2024-12-31 23:12:00',
|
|
|
- deviceName5: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- deviceName: '15872040051',
|
|
|
- deviceName1: '李某某',
|
|
|
- deviceName2: '操作工',
|
|
|
- deviceName3: '2024-12-31 23:12:00',
|
|
|
- deviceName4: '2024-12-31 23:12:00',
|
|
|
- deviceName5: 0,
|
|
|
- },
|
|
|
-]);
|
|
|
+const accountList = ref<UserPageItem[]>([]);
|
|
|
const accountColumns = [
|
|
|
{
|
|
|
title: '手机号',
|
|
|
- dataIndex: 'deviceName',
|
|
|
- key: 'deviceName',
|
|
|
+ dataIndex: 'mobile',
|
|
|
+ key: 'mobile',
|
|
|
ellipsis: true,
|
|
|
},
|
|
|
{
|
|
|
title: '姓名',
|
|
|
- dataIndex: 'deviceName1',
|
|
|
- key: 'deviceName1',
|
|
|
+ dataIndex: 'userName',
|
|
|
+ key: 'userName',
|
|
|
ellipsis: true,
|
|
|
},
|
|
|
{
|
|
|
title: '角色',
|
|
|
- dataIndex: 'deviceName2',
|
|
|
- key: 'deviceName2',
|
|
|
+ dataIndex: 'roleName',
|
|
|
+ key: 'roleName',
|
|
|
ellipsis: true,
|
|
|
},
|
|
|
{
|
|
|
- title: '创建时间',
|
|
|
- dataIndex: 'deviceName3',
|
|
|
- key: 'deviceName3',
|
|
|
+ title: '创建日期',
|
|
|
+ dataIndex: 'startTenancy',
|
|
|
+ key: 'startTenancy',
|
|
|
ellipsis: true,
|
|
|
},
|
|
|
{
|
|
|
- title: '到期时间',
|
|
|
- dataIndex: 'deviceName4',
|
|
|
- key: 'deviceName4',
|
|
|
+ title: '到期日期',
|
|
|
+ dataIndex: 'endTenancy',
|
|
|
+ key: 'endTenancy',
|
|
|
ellipsis: true,
|
|
|
},
|
|
|
{
|
|
|
title: '状态',
|
|
|
- dataIndex: 'deviceName5',
|
|
|
- key: 'deviceName5',
|
|
|
+ dataIndex: 'enabled',
|
|
|
+ key: 'enabled',
|
|
|
ellipsis: true,
|
|
|
},
|
|
|
];
|
|
|
const rules: Record<string, Rule[]> = {
|
|
|
userName: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
|
|
|
- mobile: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
|
|
|
+ mobile: [
|
|
|
+ { required: true, message: t('common.cannotEmpty'), trigger: 'change' },
|
|
|
+ {
|
|
|
+ validator: (_rule: unknown, value: string) => {
|
|
|
+ if (!isValidPhone(value)) {
|
|
|
+ return Promise.reject('手机号格式错误');
|
|
|
+ }
|
|
|
+ return Promise.resolve();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
password: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
|
|
|
enabled: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
|
|
|
roleId: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
|
|
|
accountTerm: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
|
|
|
};
|
|
|
+// 手机号校验函数
|
|
|
+const isValidPhone = (phone: string): boolean => {
|
|
|
+ return /^1[3-9]\d{9}$/.test(phone);
|
|
|
+};
|
|
|
const accountChange = (selectedRowKeys: Key[]) => {
|
|
|
accountKeys.value = selectedRowKeys;
|
|
|
};
|
|
|
const confirm = () => {
|
|
|
handleRequest(async () => {
|
|
|
+ await batchDeleteAccount(accountKeys.value as number[]);
|
|
|
+ getUserList();
|
|
|
modalComponentRef.value?.hideView();
|
|
|
});
|
|
|
};
|
|
|
@@ -123,12 +123,62 @@ const addDelete = () => {
|
|
|
};
|
|
|
const addOpenAccount = () => {
|
|
|
accountOpen.value = true;
|
|
|
+ titleAccount.value = true;
|
|
|
+};
|
|
|
+const addCheck = (item: UserPageItem) => {
|
|
|
+ accountOpen.value = true;
|
|
|
+ titleAccount.value = false;
|
|
|
+
|
|
|
+ const { userName, mobile, roleId, enabled, startTenancy, endTenancy, id } = item;
|
|
|
+ accountId.value = id;
|
|
|
+ Object.assign(accountForm.value, {
|
|
|
+ userName,
|
|
|
+ mobile,
|
|
|
+ roleId,
|
|
|
+ password: '',
|
|
|
+ enabled: enabled === 1 ? true : false,
|
|
|
+ accountTerm: [dayjs(startTenancy, 'YYYY-MM-DD'), dayjs(endTenancy, 'YYYY-MM-DD')],
|
|
|
+ });
|
|
|
+};
|
|
|
+const addQuery = () => {
|
|
|
+ if (accountTerm.value) {
|
|
|
+ accountPageParam.value.startTenancy = accountTerm.value[0].format('YYYY-MM-DD');
|
|
|
+ accountPageParam.value.endTenancy = accountTerm.value[1].format('YYYY-MM-DD');
|
|
|
+ } else {
|
|
|
+ accountPageParam.value.startTenancy = '';
|
|
|
+ accountPageParam.value.endTenancy = '';
|
|
|
+ }
|
|
|
+ console.log(searchContent.value);
|
|
|
+ accountPageParam.value.mobile = searchContent.value;
|
|
|
+ accountPageParam.value.userName = searchContent.value;
|
|
|
+ accountPageParam.value.pageIndex = 1;
|
|
|
+ getUserList();
|
|
|
};
|
|
|
-const addCheck = () => {
|
|
|
- checkOpen.value = true;
|
|
|
+
|
|
|
+const resetItem = () => {
|
|
|
+ searchContent.value = '';
|
|
|
+ accountTerm.value = undefined;
|
|
|
+ accountPageParam.value.startTenancy = '';
|
|
|
+ accountPageParam.value.endTenancy = '';
|
|
|
+ accountPageParam.value.pageIndex = 1;
|
|
|
+ accountPageParam.value.enabled = undefined;
|
|
|
+ accountPageParam.value.roleId = undefined;
|
|
|
+ getUserList();
|
|
|
+};
|
|
|
+
|
|
|
+const handleClose = () => {
|
|
|
+ accountForm.value = {
|
|
|
+ userName: '',
|
|
|
+ mobile: '',
|
|
|
+ password: '',
|
|
|
+ enabled: true,
|
|
|
+ roleId: undefined,
|
|
|
+ accountTerm: undefined,
|
|
|
+ };
|
|
|
+};
|
|
|
+const addReset = () => {
|
|
|
+ resetItem();
|
|
|
};
|
|
|
-const addQuery = () => {};
|
|
|
-const addReset = () => {};
|
|
|
const switchPages = () => {};
|
|
|
const bindingAccount = () => {
|
|
|
formRef.value
|
|
|
@@ -136,29 +186,60 @@ const bindingAccount = () => {
|
|
|
.then(() => {
|
|
|
handleRequest(async () => {
|
|
|
const { userName, mobile, password, enabled, roleId, accountTerm } = accountForm.value;
|
|
|
- await addAccount({
|
|
|
- userName,
|
|
|
- mobile,
|
|
|
- password,
|
|
|
- roleId: roleId as number,
|
|
|
- enabled: enabled ? '1' : '0',
|
|
|
- startTenancy: accountTerm[0].format('YYYY-MM-DD'),
|
|
|
- endTenancy: accountTerm[1].format('YYYY-MM-DD'),
|
|
|
- orgId: orgId.value as number,
|
|
|
- });
|
|
|
+ if (titleAccount.value) {
|
|
|
+ await addAccount({
|
|
|
+ userName,
|
|
|
+ mobile,
|
|
|
+ password,
|
|
|
+ roleId: roleId as number,
|
|
|
+ enabled: enabled ? '1' : '0',
|
|
|
+ startTenancy: accountTerm![0].format('YYYY-MM-DD'),
|
|
|
+ endTenancy: accountTerm![1].format('YYYY-MM-DD'),
|
|
|
+ orgId: orgId.value as number,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ await updateAccount({
|
|
|
+ id: accountId.value,
|
|
|
+ userName,
|
|
|
+ mobile,
|
|
|
+ password,
|
|
|
+ roleId: roleId as number,
|
|
|
+ enabled: enabled ? '1' : '0',
|
|
|
+ startTenancy: accountTerm![0].format('YYYY-MM-DD'),
|
|
|
+ endTenancy: accountTerm![1].format('YYYY-MM-DD'),
|
|
|
+ orgId: orgId.value as number,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ getUserList();
|
|
|
+
|
|
|
accountOpen.value = false;
|
|
|
});
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
};
|
|
|
-const bindingCheck = () => {};
|
|
|
+
|
|
|
const clickOrganizationChange = (id: number) => {
|
|
|
orgId.value = id;
|
|
|
+ searchContent.value = '';
|
|
|
+ accountTerm.value = undefined;
|
|
|
+ accountPageParam.value.startTenancy = '';
|
|
|
+ accountPageParam.value.endTenancy = '';
|
|
|
handleRequest(async () => {
|
|
|
characterPageList.value = await getFindRolesByOrgIds([id]);
|
|
|
+ getUserList();
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const getUserList = () => {
|
|
|
+ handleRequest(async () => {
|
|
|
+ accountPageParam.value.orgId = orgId.value;
|
|
|
+ accountPageParam.value.mobile = searchContent.value;
|
|
|
+ accountPageParam.value.userName = searchContent.value;
|
|
|
+ const { records, total } = await getUserPageList(accountPageParam.value);
|
|
|
+ accountList.value = records;
|
|
|
+ accountTotal.value = total;
|
|
|
});
|
|
|
};
|
|
|
-onMounted(() => {});
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -197,6 +278,7 @@ onMounted(() => {});
|
|
|
:options="characterPageList"
|
|
|
:field-names="{ label: 'roleName', value: 'id' }"
|
|
|
:placeholder="t('common.plzSelect')"
|
|
|
+ :allow-clear="true"
|
|
|
/>
|
|
|
</AFlex>
|
|
|
<AFlex align="center" class="margin-bottom">
|
|
|
@@ -204,22 +286,27 @@ onMounted(() => {});
|
|
|
<ARangePicker
|
|
|
v-model:value="accountTerm"
|
|
|
class="input-width"
|
|
|
- :allow-clear="false"
|
|
|
+ :allow-clear="true"
|
|
|
:separator="$t('common.to')"
|
|
|
/>
|
|
|
</AFlex>
|
|
|
|
|
|
<AFlex align="center" class="margin-bottom">
|
|
|
<div class="account-content-text">状态</div>
|
|
|
- <ASelect class="input-width" v-model:value="accountPageParam.enabled" :placeholder="$t('common.plzSelect')">
|
|
|
+ <ASelect
|
|
|
+ class="input-width"
|
|
|
+ v-model:value="accountPageParam.enabled"
|
|
|
+ :placeholder="$t('common.plzSelect')"
|
|
|
+ :allow-clear="true"
|
|
|
+ >
|
|
|
<ASelectOption value="1">正常</ASelectOption>
|
|
|
<ASelectOption value="0">停用</ASelectOption>
|
|
|
</ASelect>
|
|
|
</AFlex>
|
|
|
- <AFlex class="margin-bottom">
|
|
|
- <AButton type="primary" @click="addQuery"> 查询 </AButton>
|
|
|
- <AButton class="default-button margin-left" @click="addReset"> 重置 </AButton>
|
|
|
- </AFlex>
|
|
|
+ </AFlex>
|
|
|
+ <AFlex class="margin-bottom" justify="flex-end">
|
|
|
+ <AButton type="primary" @click="addQuery"> 查询 </AButton>
|
|
|
+ <AButton class="default-button margin-left" @click="addReset"> 重置 </AButton>
|
|
|
</AFlex>
|
|
|
<ATable
|
|
|
:row-selection="{
|
|
|
@@ -233,11 +320,11 @@ onMounted(() => {});
|
|
|
:pagination="false"
|
|
|
>
|
|
|
<template #bodyCell="{ column, record }">
|
|
|
- <template v-if="column.key === 'deviceName'">
|
|
|
- <div @click="addCheck" class="mobile-phone">{{ record.deviceName }}</div>
|
|
|
+ <template v-if="column.key === 'mobile'">
|
|
|
+ <div @click="addCheck(record as UserPageItem)" class="mobile-phone">{{ record.mobile }}</div>
|
|
|
</template>
|
|
|
- <template v-if="column.key === 'deviceName5'">
|
|
|
- <div v-if="record.deviceName5 == 1" class="tag-style success">启用中</div>
|
|
|
+ <template v-if="column.key === 'enabled'">
|
|
|
+ <div v-if="record.enabled == 1" class="tag-style success">启用中</div>
|
|
|
<div v-else class="tag-style default">停用</div>
|
|
|
</template>
|
|
|
</template>
|
|
|
@@ -259,11 +346,12 @@ onMounted(() => {});
|
|
|
</AFlex>
|
|
|
<AModal
|
|
|
v-model:open="accountOpen"
|
|
|
- title="添加"
|
|
|
+ :title="titleAccount ? '添加' : '编辑'"
|
|
|
width="460px"
|
|
|
:footer="null"
|
|
|
:mask-closable="false"
|
|
|
:keyboard="false"
|
|
|
+ :after-close="handleClose"
|
|
|
>
|
|
|
<AForm
|
|
|
ref="formRef"
|
|
|
@@ -279,7 +367,7 @@ onMounted(() => {});
|
|
|
<AInput class="input-width" v-model:value="accountForm.userName" placeholder="请输入" />
|
|
|
</AFormItem>
|
|
|
<AFormItem label="手机号" name="mobile">
|
|
|
- <AInput class="input-width" v-model:value="accountForm.mobile" placeholder="请输入" />
|
|
|
+ <AInputNumber class="input-width" v-model:value="accountForm.mobile" placeholder="请输入" />
|
|
|
</AFormItem>
|
|
|
<AFormItem label="角色" name="roleId">
|
|
|
<ASelect
|
|
|
@@ -314,47 +402,6 @@ onMounted(() => {});
|
|
|
<AButton class="button-style" type="primary" @click="bindingAccount">{{ $t('common.save') }}</AButton>
|
|
|
</AFlex>
|
|
|
</AModal>
|
|
|
- <AModal
|
|
|
- v-model:open="checkOpen"
|
|
|
- title="用户详情"
|
|
|
- width="460px"
|
|
|
- :footer="null"
|
|
|
- :mask-closable="false"
|
|
|
- :keyboard="false"
|
|
|
- >
|
|
|
- <div class="check-div">
|
|
|
- <AFlex>
|
|
|
- <div>姓名：</div>
|
|
|
- <div class="check-text">王某某</div>
|
|
|
- </AFlex>
|
|
|
- <AFlex>
|
|
|
- <div>手机号：</div>
|
|
|
- <div class="check-text">15622321170</div>
|
|
|
- </AFlex>
|
|
|
- <AFlex>
|
|
|
- <div>角色：</div>
|
|
|
- <div class="check-text">管理员</div>
|
|
|
- </AFlex>
|
|
|
- <AFlex>
|
|
|
- <div>到期时间：</div>
|
|
|
- <div class="check-text">2026-10-24</div>
|
|
|
- </AFlex>
|
|
|
- <AFlex>
|
|
|
- <div>密码：</div>
|
|
|
- <div class="check-text">00000000</div>
|
|
|
- </AFlex>
|
|
|
- <AFlex class="margin-top">
|
|
|
- <div>启用：</div>
|
|
|
- <ASwitch />
|
|
|
- </AFlex>
|
|
|
- </div>
|
|
|
- <AFlex justify="flex-end">
|
|
|
- <AButton class="button-style" type="primary" ghost @click="checkOpen = false">{{
|
|
|
- $t('common.cancel')
|
|
|
- }}</AButton>
|
|
|
- <AButton class="button-style" type="primary" @click="bindingCheck">{{ $t('common.save') }}</AButton>
|
|
|
- </AFlex>
|
|
|
- </AModal>
|
|
|
<ConfirmModal
|
|
|
ref="modalComponent"
|
|
|
:title="t('common.deleteConfirmation')"
|
wangcong
wangshun