by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1、入驻人员

Browse Source
This commit is contained in:
dev_ljl
2025-06-23 09:39:53 +08:00
parent 255481861a
commit 8c5d26c12e
12 changed files with 696 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
apps/web-antd/src/api/property/resident/person/model.d.ts vendored
View File

@@ -197,3 +197,71 @@ export interface PersonQuery extends PageQuery {
*/
params?: any;
}
export interface Person extends BaseEntity{
/**
* 主键id
*/
id: string | number;
/**
* 用户id
*/
userId: string | number;
/**
* 用户名称
*/
userName: string;
/**
* 联系电话
*/
phone: string;
/**
* 性别
*/
gender: number;
/**
* 人脸图片
*/
img: string;
/**
* 所属单位id
*/
unitId: string | number;
/**
* 所属单位名称
*/
unitName: string;
/**
* 入驻位置
*/
locathon: string;
/**
* 入驻时间
*/
time: string;
/**
* 车牌号码
*/
carNumber: string;
/**
* 状态
*/
state: number;
/**
* 备注
*/
remark: string;
}

58
apps/web-antd/src/api/property/resident/unit/model.d.ts vendored
View File

@@ -167,3 +167,61 @@ export interface Resident_unitQuery extends PageQuery {
*/
params?: any;
}
export interface Unit extends BaseEntity {
/**
* id
*/
id?: string | number;
/**
* 入驻单位名称
*/
name?: string;
/**
* 单位编号
*/
unitNumber?: number;
/**
* 企业类型
*/
type?: number;
/**
* 联系人
*/
contactPerson?: string;
/**
* 联系电话
*/
phone?: number;
/**
* 入驻位置
*/
location?: string;
/**
* 入驻时间
*/
time?: string;
/**
* 状态
*/
state?: number;
/**
* 员工人数
*/
number?: number;
/**
* 备注
*/
remark?: string;
}

4
apps/web-antd/src/utils/render.tsx
View File

@@ -159,6 +159,10 @@ export function renderDict(value: number | string, dictName: string) {
const dictInfo = getDictOptions(dictName);
return renderDictTag(value, dictInfo);
}
export function renderDictValue(value: number | string, dictName: string) {
const dictInfo = getDictOptions(dictName);
return dictInfo[0].label??'';
}
export function renderIconSpan(
icon: ComponentType,
value: string,

220
apps/web-antd/src/views/property/resident/person/data.ts
View File

@@ -1,84 +1,45 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import {getDictOptions} from "#/utils/dict";
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'userId',
label: '用户id',
fieldName: 'unitId',
label: '所属单位',
},
{
component: 'Input',
fieldName: 'userName',
label: '用户名称',
label: '员工名称',
},
{
component: 'Input',
fieldName: 'phone',
label: '联系电话',
},
{
component: 'Input',
fieldName: 'gender',
label: '性别',
},
{
component: 'Input',
fieldName: 'img',
label: '人脸图片',
},
{
component: 'Input',
fieldName: 'unitId',
label: '所属单位id',
},
{
component: 'Input',
fieldName: 'unitName',
label: '所属单位名称',
},
{
component: 'Input',
fieldName: 'locathon',
label: '入驻位置',
},
{
component: 'DatePicker',
component: 'Select',
componentProps: {
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
options: getDictOptions('wy_state'),
},
fieldName: 'time',
label: '入驻时间',
},
{
component: 'Textarea',
fieldName: 'carNumber',
label: '车牌号码',
},
{
component: 'Input',
fieldName: 'state',
label: '状态',
},
];
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// export const columns: () => VxeGridProps['columns'] = () => [
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '主键id',
title: '序号',
field: 'id',
slots: {
default: ({ rowIndex }) => {
return (rowIndex + 1).toString();
},
},
},
{
title: '用户id',
title: '员工编号',
field: 'userId',
},
{
title: '用户名称',
title: '员工名称',
field: 'userName',
},
{
@@ -90,15 +51,13 @@ export const columns: VxeGridProps['columns'] = [
field: 'gender',
},
{
title: '人脸图片',
field: 'img',
title: '人脸图片',
slots: { default: 'img' },
minWidth: 80,
},
{
title: '所属单位id',
field: 'unitId',
},
{
title: '所属单位名称',
title: '所属单位',
field: 'unitName',
},
{
@@ -116,6 +75,7 @@ export const columns: VxeGridProps['columns'] = [
{
title: '状态',
field: 'state',
// slots: { default: 'state' },
},
{
title: '备注',
@@ -141,49 +101,37 @@ export const modalSchema: FormSchemaGetter = () => [
},
},
{
label: '用户id',
label: '入住员工',
fieldName: 'userId',
component: 'Input',
rules: 'required',
component: "Select",
rules: 'selectRequired',
formItemClass: 'col-span-2'
},
{
label: '用户名称',
fieldName: 'userName',
component: 'Input',
rules: 'required',
},
{
label: '联系电话',
fieldName: 'phone',
component: 'Input',
rules: 'required',
},
{
label: '性别',
fieldName: 'gender',
component: 'Input',
rules: 'required',
},
{
label: '人脸图片',
fieldName: 'img',
component: 'Input',
},
{
label: '所属单位id',
label: '所属单位',
fieldName: 'unitId',
component: 'Input',
},
{
label: '所属单位名称',
fieldName: 'unitName',
component: 'Input',
component: 'Select',
formItemClass: 'col-span-2',
rules:'selectRequired',
},
{
label: '入驻位置',
fieldName: 'locathon',
component: 'Input',
rules:'required',
formItemClass: 'col-span-2',
},
{
label: '人脸图片',
fieldName: 'img',
component: 'ImageUpload',
componentProps: {
// accept: 'image/*', // 可选拓展名或者mime类型 ,拼接
maxCount: 1, // 最大上传文件数 默认为1 为1会绑定为string而非string[]类型
},
formItemClass: 'col-span-2',
},
{
label: '入驻时间',
fieldName: 'time',
@@ -197,17 +145,93 @@ export const modalSchema: FormSchemaGetter = () => [
{
label: '车牌号码',
fieldName: 'carNumber',
component: 'Textarea',
},
{
label: '状态',
fieldName: 'state',
component: 'Input',
rules: 'required',
},
{
label: '备注',
fieldName: 'remark',
component: 'Textarea',
formItemClass: 'col-span-2',
},
];
//门禁记录
export const accessControlColumns: VxeGridProps['columns'] = [
{
title: '序号',
field: 'id',
},
{
title: '通过时间',
field: 'userId',
},
{
title: '进出类型',
field: 'userName',
},
{
title: '位置',
field: 'phone',
},
{
title: '设备名称',
field: 'gender',
},
{
title: '门禁类型',
field: 'img',
},
{
title: '识别类型',
field: 'unitName',
},
{
title: '状态',
field: 'locathon',
},
];
//车辆记录
export const carColumns: VxeGridProps['columns'] = [
{
title: '序号',
field: 'id',
},
{
title: '通过时间',
field: 'userId',
},
{
title: '进出类型',
field: 'userName',
},
{
title: '位置',
field: 'phone',
},
{
title: '设备名称',
field: 'gender',
},
{
title: '进出方式',
field: 'img',
},
{
title: '停车类型',
field: 'unitName',
},
{
title: '费用（元）',
field: 'locathon',
},
{
title: '状态',
field: 'state',
},
{
title: '备注',
field: 'remark',
},
];

42
apps/web-antd/src/views/property/resident/person/index.vue
View File

@@ -3,7 +3,7 @@
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import {Avatar, Modal, Popconfirm, Space} from 'ant-design-vue';
import {
useVbenVxeGrid,
@@ -20,7 +20,9 @@ import type { PersonForm } from '#/api/property/resident/person/model';
import { commonDownloadExcel } from '#/utils/file/download';
import personModal from './person-modal.vue';
import personDetail from './person-detail.vue';
import { columns, querySchema } from './data';
// import {TableSwitch} from "#/components/table";
const formOptions: VbenFormProps = {
commonConfig: {
@@ -31,15 +33,6 @@ const formOptions: VbenFormProps = {
},
schema: querySchema(),
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
// 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
// 不需要直接删除
// fieldMappingTime: [
// [
// 'createTime',
// ['params[beginTime]', 'params[endTime]'],
// ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
// ],
// ],
};
const gridOptions: VxeGridProps = {
@@ -83,6 +76,10 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
const [PersonModal, modalApi] = useVbenModal({
connectedComponent: personModal,
});
const [PersonDetail, personDetailApi] = useVbenModal({
connectedComponent: personDetail,
});
function handleAdd() {
modalApi.setData({});
@@ -118,6 +115,12 @@ function handleDownloadExcel() {
fieldMappingTime: formOptions.fieldMappingTime,
});
}
function handleInfo(row: Required<PersonForm>) {
personDetailApi.setData({ id: row.id });
personDetailApi.open();
}
</script>
<template>
@@ -148,8 +151,26 @@ function handleDownloadExcel() {
</a-button>
</Space>
</template>
<template #img="{ row }">
<Avatar :src="row.img" />
</template>
<!-- <template #state="{ row }">-->
<!-- <TableSwitch-->
<!-- v-model:value="row.status"-->
<!-- :api="() => personStatusChange(row)"-->
<!-- :disabled="-->
<!-- row.userId === 1 || !hasAccessByCodes(['system:user:edit'])-->
<!-- "-->
<!-- @reload="() => tableApi.query()"-->
<!-- />-->
<!-- </template>-->
<template #action="{ row }">
<Space>
<ghost-button
@click.stop="handleInfo(row)"
>
{{ $t('pages.common.info') }}
</ghost-button>
<ghost-button
v-access:code="['property:person:edit']"
@click.stop="handleEdit(row)"
@@ -174,5 +195,6 @@ function handleDownloadExcel() {
</template>
</BasicTable>
<PersonModal @reload="tableApi.query()" />
<PersonDetail></PersonDetail>
</Page>
</template>

105
apps/web-antd/src/views/property/resident/person/person-detail.vue Normal file
View File

@@ -0,0 +1,105 @@
<script setup lang="ts">
import {ref, shallowRef} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {Descriptions, DescriptionsItem, Tabs, TabPane, Table} from 'ant-design-vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
// import {personInfo} from '#/api/property/resident/person';
import type {Person} from "#/api/property/resident/person/model";
import {accessControlColumns,carColumns} from "#/views/property/resident/person/data";
// import {personList} from "#/api/property/resident/person";
// import {renderDict} from "#/utils/render";
dayjs.extend(duration);
dayjs.extend(relativeTime);
const personDetail = shallowRef<null | Person>(null);
const [BasicModal, modalApi] = useVbenModal({
onOpenChange: handleOpenChange,
onClosed() {
personDetail.value = null;
},
});
const activeKey = ref('1');
async function handleOpenChange(open: boolean) {
if (!open) {
return null;
}
modalApi.modalLoading(true);
// const {id} = modalApi.getData() as { id: number | string };
// const response = await personInfo(id);
const response = {id:1};
// 赋值
personDetail.value = response;
modalApi.modalLoading(false);
}
</script>
<template>
<BasicModal :footer="false" :fullscreen-button="false" title="入驻人员信息" class="w-[70%]">
<Descriptions v-if="personDetail" size="small" :column="1" bordered :labelStyle="{width:'100px'}">
<DescriptionsItem label="入驻人员">
{{ '入驻人员' }}
</DescriptionsItem>
<DescriptionsItem label="所属单位">
{{ '单位名称' }}
</DescriptionsItem>
<DescriptionsItem label="入驻位置">
{{ '单位名称' }}
</DescriptionsItem>
<DescriptionsItem label="人脸图片">
{{ '单位名称' }}
</DescriptionsItem>
<DescriptionsItem label="入驻时间">
{{ '单位名称' }}
</DescriptionsItem>
<DescriptionsItem label="车牌号码">
{{ '单位名称' }}
</DescriptionsItem>
<DescriptionsItem label="备注">
{{ '单位名称' }}
</DescriptionsItem>
</Descriptions>
<div class="foot-tabs">
<Tabs v-model:activeKey="activeKey" type="card">
<TabPane key="1" tab="门禁记录">
<Table :dataSource="[]" :columns="accessControlColumns" :pagination="false" >
<template #bodyCell="{ column, index }">
<template v-if="column.field === 'id'">
{{ index + 1 }}
</template>
</template>
</Table>
</TabPane>
<TabPane key="2" tab="车辆记录">
<Table :dataSource="[]" :columns="carColumns" :pagination="false" >
<template #bodyCell="{ column, index }">
<template v-if="column.field === 'id'">
{{ index + 1 }}
</template>
</template>
</Table>
</TabPane>
</Tabs>
</div>
</BasicModal>
</template>
<style lang="scss" scoped>
.foot-tabs {
margin-top:20px;
}
</style>

41
apps/web-antd/src/views/property/resident/person/person-modal.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import {computed, reactive, ref} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {$t} from '@vben/locales';
@@ -10,6 +10,8 @@ import { personAdd, personInfo, personUpdate } from '#/api/property/resident/per
import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
import {modalSchema} from './data';
import QueryUserList from './query-user-list.vue'
import QueryUnitList from './query-unit-list.vue'
const emit = defineEmits<{ reload: [] }>();
@@ -17,11 +19,17 @@ const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
let userInfo = reactive({
userId: '',
userName: '',
phone: '',
gender: '',
});
let unitName = ref('');
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
// 默认占满两列
formItemClass: 'col-span-2',
formItemClass: 'col-span-1',
// 默认label宽度 px
labelWidth: 80,
// 通用配置项 会影响到所有表单项
@@ -43,7 +51,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
const [BasicModal, modalApi] = useVbenModal({
// 在这里更改宽度
class: 'w-[550px]',
class: 'w-[70%]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
@@ -75,7 +83,13 @@ async function handleConfirm() {
return;
}
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
const data = cloneDeep(await formApi.getValues());
let data = cloneDeep(await formApi.getValues());
if (!isUpdate.value) {
data.userName = userInfo.userName
data.phone = userInfo.phone
data.gender = userInfo.gender
data.unitName = unitName.value
}
await (isUpdate.value ? personUpdate(data) : personAdd(data));
resetInitialized();
emit('reload');
@@ -91,11 +105,26 @@ async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
function getUserInfo(user: any) {
userInfo = user;
}
function getUnitInfo(unit: { name: string }) {
unitName.value = unit.name;
}
</script>
<template>
<BasicModal :title="title">
<BasicForm />
<BasicForm>
<template #userId="slotProps">
<QueryUserList @update:userInfo="getUserInfo" v-bind="slotProps" :disabled="isUpdate"/>
</template>
<template #unitId="slotProps">
<QueryUnitList @update:unitInfo="getUnitInfo" v-bind="slotProps" :disabled="isUpdate"/>
</template>
</BasicForm>
</BasicModal>
</template>

74
apps/web-antd/src/views/property/resident/person/query-unit-list.vue Normal file
View File

@@ -0,0 +1,74 @@
<script lang="ts" setup>
import {ref} from 'vue';
import {Select} from 'ant-design-vue';
// import {resident_unitList} from "#/api/property/resident/unit";
import {userList} from "#/api/system/user";
defineOptions({name: 'QueryUnitList'});
withDefaults(defineProps<{ disabled?: boolean; placeholder?: string }>(), {
disabled: false,
placeholder: '可根据单位名称进行搜索...',
});
//todo
// async function queryUnit(value: string, callback: any) {
// const queryData = {
// nickName: value,
// pageSize: 100,
// pageNum: 1,
// }
// const res = await resident_unitList(queryData);
// const options = res.rows.map((unit) => ({
// label: unit.name+'-'+unit.unitNumber,
// value: unit.id,
// }));
// callback(options);
// }
async function queryUnit(value: string, callback: any) {
const queryData = {
nickName: value,
pageSize: 100,
pageNum: 1,
}
const res = await userList(queryData);
const options = res.rows.map((unit) => ({
label: unit.nickName+'-'+unit.phonenumber,
value: unit.userId,
}));
callback(options);
}
const data = ref<any[]>([]);
const value = ref();
const handleSearch = (val: string) => {
queryUnit(val, (d: any[]) => (data.value = d));
};
const emit = defineEmits(['update:unitInfo']);
const handleChange = (val: string) => {
value.value = val;
const unitInfoStr = data.value.find(option => option.value === val)?.label;
let arr = unitInfoStr.split('-')
let unitInfo = {
name: arr[0],
unitNumber: arr[1],
}
emit('update:unitInfo', unitInfo);
};
</script>
<template>
<!-- v-model:value="value"-->
<Select
show-search
:placeholder="placeholder"
style="width: 100%"
:default-active-first-option="false"
:show-arrow="false"
:filter-option="false"
:not-found-content="null"
:options="data"
@search="handleSearch"
@change="handleChange"
></Select>
</template>

66
apps/web-antd/src/views/property/resident/person/query-user-list.vue Normal file
View File

@@ -0,0 +1,66 @@
<script lang="ts" setup>
import {ref} from 'vue';
import {Select} from 'ant-design-vue';
import {userList} from "#/api/system/user";
import {renderDictValue} from "#/utils/render";
defineOptions({name: 'QueryUserList'});
withDefaults(defineProps<{ disabled?: boolean; placeholder?: string }>(), {
disabled: false,
placeholder: '可根据员工姓名进行搜索...',
});
async function queryUser(value: string, callback: any) {
const queryData = {
nickName: value,
pageSize: 100,
pageNum: 1,
}
const res = await userList(queryData);
const options = res.rows.map((user) => ({
label: user.nickName + '-' + renderDictValue(user.sex, 'sys_user_sex') + '-' + user.phonenumber,
value: user.userId,
}));
callback(options);
}
const data = ref<any[]>([]);
const value = ref();
const handleSearch = (val: string) => {
queryUser(val, (d: any[]) => (data.value = d));
};
const emit = defineEmits(['update:userInfo']);
const handleChange = (val: string) => {
value.value = val;
const userInfoStr = data.value.find(option => option.value === val)?.label;
let arr = userInfoStr.split('-')
let userInfo = {
userName: arr[0],
gender: arr[1],
phone: arr[2],
}
queryUser(val, (d: any[]) => (data.value = d));
emit('update:userInfo', userInfo);
};
</script>
<template>
<!-- v-model:value="value"-->
<Select
show-search
:placeholder="placeholder"
style="width: 100%"
:default-active-first-option="false"
:show-arrow="false"
:filter-option="false"
:not-found-content="null"
:options="data"
@search="handleSearch"
@change="handleChange"
></Select>
</template>

22
apps/web-antd/src/views/property/resident/unit/data.ts
View File

@@ -2,6 +2,7 @@ import type {FormSchemaGetter} from '#/adapter/form';
import type {VxeGridProps} from '#/adapter/vxe-table';
import {getDictOptions} from "#/utils/dict";
import {renderDict} from "#/utils/render";
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
@@ -30,13 +31,17 @@ export const columns: VxeGridProps['columns'] = [
field: 'id',
slots: {
default: ({ rowIndex }) => {
return rowIndex + 1;
return (rowIndex + 1).toString();
},
},
},
{
title: '单位编号',
field: 'unitNumber',
slots:{
default: ({ row }) => {
return row.id;
}}
},
{
title: '单位名称',
@@ -47,7 +52,7 @@ export const columns: VxeGridProps['columns'] = [
field: 'type',
slots: {
default: ({ row }) => {
return renderDict(row.type, 'wy_rzdwlx');
return renderDict(row.type, 'wy_qylx');
},
},
},
@@ -70,11 +75,7 @@ export const columns: VxeGridProps['columns'] = [
{
title: '状态',
field: 'state',
slots: {
default: ({ row }) => {
return renderDict(row.state, 'wy_state');
},
},
slots: {default: 'state'}
},
{
title: '员工数量',
@@ -112,15 +113,16 @@ export const modalSchema: FormSchemaGetter = () => [
fieldName: 'name',
component: 'Input',
rules: 'required',
},
{
label: '单位类型',
fieldName: 'type',
component: 'Select',
rules: 'required',
componentProps: {
options: getDictOptions('wy_rzdwlx'),
options: getDictOptions('wy_qylx'),
},
rules: 'required',
},
{
label: '联系人',
@@ -134,11 +136,13 @@ export const modalSchema: FormSchemaGetter = () => [
component: 'Input',
rules: 'required',
},
{
label: '入驻位置',
fieldName: 'location',
component: 'Input',
rules: 'required',
formItemClass: 'col-span-2'
},
{
label: '入驻时间',

29
apps/web-antd/src/views/property/resident/unit/index.vue
View File

@@ -20,7 +20,11 @@ import type { Resident_unitForm } from '#/api/property/resident/unit/model';
import { commonDownloadExcel } from '#/utils/file/download';
import resident_unitModal from './unit-modal.vue';
import unitInfoModal from './unit-detail.vue';
import { columns, querySchema } from './data';
import {userStatusChange} from "#/api/system/user";
import {TableSwitch} from "#/components/table";
import {useAccess} from "@vben/access";
const formOptions: VbenFormProps = {
commonConfig: {
@@ -42,8 +46,6 @@ const gridOptions: VxeGridProps = {
// 点击行选中
// trigger: 'row',
},
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// columns: columns(),
columns,
height: 'auto',
keepSource: true,
@@ -84,9 +86,12 @@ async function handleEdit(row: Required<Resident_unitForm>) {
modalApi.setData({ id: row.id });
modalApi.open();
}
const [UnitInfoModal, unitInfoModalApi] = useVbenModal({
connectedComponent: unitInfoModal,
});
async function handleInfo(row: Required<Resident_unitForm>) {
modalApi.setData({ id: row.id });
modalApi.open();
unitInfoModalApi.setData({ id: row.id });
unitInfoModalApi.open();
}
async function handleDelete(row: Required<Resident_unitForm>) {
await resident_unitRemove(row.id);
@@ -112,6 +117,7 @@ function handleDownloadExcel() {
fieldMappingTime: formOptions.fieldMappingTime,
});
}
const { hasAccessByCodes } = useAccess();
</script>
<template>
@@ -142,8 +148,22 @@ function handleDownloadExcel() {
</a-button>
</Space>
</template>
<template #state="{ row }">
<TableSwitch
v-model:value="row.state"
:api="() => userStatusChange(row)"
:disabled=" !hasAccessByCodes(['property:unit:edit'])
"
@reload="() => tableApi.query()"
/>
</template>
<template #action="{ row }">
<Space>
<ghost-button
@click.stop="handleInfo(row)"
>
{{ $t('pages.common.info') }}
</ghost-button>
<ghost-button
v-access:code="['property:unit:edit']"
@click.stop="handleEdit(row)"
@@ -168,5 +188,6 @@ function handleDownloadExcel() {
</template>
</BasicTable>
<Resident_unitModal @reload="tableApi.query()" />
<UnitInfoModal/>
</Page>
</template>

84
apps/web-antd/src/views/property/resident/unit/unit-detail.vue Normal file
View File

@@ -0,0 +1,84 @@
<script setup lang="ts">
import type {Unit} from '#/api/property/resident/unit/model';
import {shallowRef} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {Descriptions, DescriptionsItem} from 'ant-design-vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
import {resident_unitInfo} from '#/api/property/resident/unit';
import {renderDict} from "#/utils/render";
dayjs.extend(duration);
dayjs.extend(relativeTime);
const [BasicModal, modalApi] = useVbenModal({
onOpenChange: handleOpenChange,
onClosed() {
unitDetail.value = null;
},
});
const unitDetail = shallowRef<null | Unit>(null);
async function handleOpenChange(open: boolean) {
if (!open) {
return null;
}
modalApi.modalLoading(true);
const {id} = modalApi.getData() as { id: number | string };
const response = await resident_unitInfo(id);
// 赋值
unitDetail.value = response;
modalApi.modalLoading(false);
}
</script>
<template>
<BasicModal :footer="false" :fullscreen-button="false" title="入驻单位信息" class="w-[70%]">
<Descriptions v-if="unitDetail" size="small" :column="2" bordered :labelStyle="{width:'100px'}">
<DescriptionsItem label="单位编号">
{{ unitDetail.id }}
</DescriptionsItem>
<DescriptionsItem label="单位名称">
{{ unitDetail.name }}
</DescriptionsItem>
<DescriptionsItem label="单位类型" v-if="unitDetail.type!=null">
<component
:is="renderDict(unitDetail.type,'wy_qylx')"
/>
</DescriptionsItem>
<DescriptionsItem label="联系人">
{{ unitDetail.contactPerson +'-'+unitDetail.phone}}
</DescriptionsItem>
<DescriptionsItem label="入驻位置" :span="2">
{{ unitDetail.location }}
</DescriptionsItem>
<DescriptionsItem label="入驻时间">
{{ unitDetail.time }}
</DescriptionsItem>
<DescriptionsItem label="员工数量">
{{ unitDetail.number }}
</DescriptionsItem>
<DescriptionsItem label="创建时间">
{{ unitDetail.createTime ?? '-' }}
</DescriptionsItem>
<DescriptionsItem label="状态" v-if="unitDetail.state!=null">
<component
:is="renderDict(unitDetail.state,'wy_state')"
/>
</DescriptionsItem>
<DescriptionsItem label="备注">
{{ unitDetail.remark ?? '-' }}
</DescriptionsItem>
</Descriptions>
</BasicModal>
</template>