feat: 通行记录、车辆通行记录
This commit is contained in:
@@ -1,41 +1,12 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import { getDictOptions } from '#/utils/dict';
|
||||
import { renderDict } from '#/utils/render';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'actionTime',
|
||||
label: '通行时间',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'customerName',
|
||||
label: '人员姓名',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'organFullPath',
|
||||
label: '组织机构',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'doorName',
|
||||
label: '门/电梯名称',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'deviceName',
|
||||
label: '设备名称',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('wy_txjllx'),
|
||||
},
|
||||
fieldName: 'recordType',
|
||||
label: '记录类型',
|
||||
fieldName: 'orderId',
|
||||
label: '订单编号',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -54,22 +25,31 @@ export const columns: VxeGridProps['columns'] = [
|
||||
{
|
||||
title: '订单编号',
|
||||
field: 'orderId',
|
||||
width: 100,
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
title: '车场名称',
|
||||
field: 'plName',
|
||||
width: 100,
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
title: '停车类型',
|
||||
field: 'carBusiType',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return renderDict(row.deviceType, 'wy_txjlsblb');
|
||||
},
|
||||
},
|
||||
width: 100,
|
||||
formatter: ({ cellValue }) => {
|
||||
// 停车类型转换
|
||||
// 10：临时车，11, 12, 13：月租车，其他：未知
|
||||
switch (cellValue) {
|
||||
case 10:
|
||||
return '临时车';
|
||||
case 11:
|
||||
case 12:
|
||||
case 13:
|
||||
return '月租车';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '车牌号',
|
||||
@@ -80,6 +60,18 @@ export const columns: VxeGridProps['columns'] = [
|
||||
title: '车辆类型',
|
||||
field: 'carType',
|
||||
width: 100,
|
||||
formatter: ({ cellValue }) => {
|
||||
switch (cellValue) {
|
||||
case 1:
|
||||
return '大型车';
|
||||
case 2:
|
||||
return '小型车';
|
||||
case 3:
|
||||
return '新能源车';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '应收',
|
||||
@@ -89,55 +81,99 @@ export const columns: VxeGridProps['columns'] = [
|
||||
{
|
||||
title: '实收',
|
||||
field: 'orderActFee',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return renderDict(row.cardType, 'wy_txjlmklb');
|
||||
},
|
||||
},
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '停车时长',
|
||||
field: 'parkingDuration',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return renderDict(row.gatewayType, 'wy_txjlcrlx');
|
||||
width: 150,
|
||||
formatter: ({ cellValue }) => {
|
||||
// 将秒数转换为友好的时间格式
|
||||
if (!cellValue && cellValue !== 0) return '';
|
||||
|
||||
const totalSeconds = Number(cellValue);
|
||||
if (isNaN(totalSeconds)) return cellValue;
|
||||
|
||||
// 计算天、小时、分钟和秒
|
||||
const days = Math.floor(totalSeconds / 86400);
|
||||
const hours = Math.floor((totalSeconds % 86400) / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const seconds = Math.floor(totalSeconds % 60);
|
||||
|
||||
// 格式化显示
|
||||
let result = '';
|
||||
if (days > 0) result += `${days}天`;
|
||||
if (hours > 0) result += `${hours}小时`;
|
||||
if (minutes > 0) result += `${minutes}分钟`;
|
||||
if (seconds > 0 || result === '') result += `${seconds}秒`;
|
||||
|
||||
return result;
|
||||
},
|
||||
},
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '进场时间',
|
||||
field: 'parkInTime',
|
||||
width: 100,
|
||||
width: 150,
|
||||
formatter: ({ cellValue }) => {
|
||||
// 如果没有值，直接返回空字符串
|
||||
if (!cellValue) return '';
|
||||
|
||||
// 使用 dayjs 格式化时间戳
|
||||
// 如果是时间戳（数字或数字字符串）
|
||||
if (typeof cellValue === 'number' || /^\d+$/.test(cellValue.toString())) {
|
||||
return dayjs(Number(cellValue)).format('YYYY-MM-DD HH:mm:ss');
|
||||
}
|
||||
|
||||
// 如果已经是日期字符串，尝试解析后格式化
|
||||
const date = dayjs(cellValue);
|
||||
if (date.isValid()) {
|
||||
return date.format('YYYY-MM-DD HH:mm:ss');
|
||||
}
|
||||
|
||||
// 如果无法解析，返回原始值
|
||||
return cellValue;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '出场时间',
|
||||
field: 'parkOutTime',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return renderDict(row.recordType, 'wy_txjllx');
|
||||
},
|
||||
},
|
||||
width: 100,
|
||||
formatter: ({ cellValue }) => {
|
||||
// 如果没有值，直接返回空字符串
|
||||
if (!cellValue) return '';
|
||||
|
||||
// 使用 dayjs 格式化时间戳
|
||||
// 如果是时间戳（数字或数字字符串）
|
||||
if (typeof cellValue === 'number' || /^\d+$/.test(cellValue.toString())) {
|
||||
return dayjs(Number(cellValue)).format('YYYY-MM-DD HH:mm:ss');
|
||||
}
|
||||
|
||||
// 如果已经是日期字符串，尝试解析后格式化
|
||||
const date = dayjs(cellValue);
|
||||
if (date.isValid()) {
|
||||
return date.format('YYYY-MM-DD HH:mm:ss');
|
||||
}
|
||||
|
||||
// 如果无法解析，返回原始值
|
||||
return cellValue;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
field: 'remark',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return renderDict(row.recordType, 'wy_txjllx');
|
||||
},
|
||||
},
|
||||
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
field: 'parkState',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return renderDict(row.recordType, 'wy_txjllx');
|
||||
},
|
||||
formatter: ({ cellValue }) => {
|
||||
switch (cellValue) {
|
||||
case 10:
|
||||
return '在场';
|
||||
case 20:
|
||||
return '离场';
|
||||
}
|
||||
},
|
||||
width: 100,
|
||||
},
|
||||
|
||||
@@ -1,21 +1,72 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted,ref } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
||||
import { getVxePopupContainer } from '@vben/utils';
|
||||
|
||||
import { Modal, Popconfirm, Space } from 'ant-design-vue';
|
||||
import { Space } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
vxeCheckboxChecked,
|
||||
type VxeGridProps,
|
||||
} from '#/adapter/vxe-table';
|
||||
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
import { columns, querySchema } from './data';
|
||||
import { getVisitorList } from '#/api/property/resident/passRecordManagement';
|
||||
const token = ref('')
|
||||
import recordDetailModal from './record-detail-modal.vue';
|
||||
import { Radio } from 'ant-design-vue';
|
||||
import type { RadioChangeEvent } from 'ant-design-vue';
|
||||
const token = ref('');
|
||||
const parkStates = ref('10');
|
||||
// 外部登录接口：页面加载时请求
|
||||
async function externalLoginOnLoad() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
'https://server.cqnctc.com:6081/web/oAuth/login',
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
loginCode: 'zhfwzx',
|
||||
loginPassword: 'nc123456',
|
||||
}),
|
||||
},
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Request failed: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
// 检查登录是否成功
|
||||
if (result?.data?.token) {
|
||||
token.value = result.data.token;
|
||||
// 将 token 存储到 sessionStorage 中
|
||||
sessionStorage.setItem('token', token.value);
|
||||
// try{
|
||||
const response = await fetch(
|
||||
`https://server.cqnctc.com:6081/web/oAuth/getUserInfo?token=${sessionStorage.getItem('token')}`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Auth-Token': `${sessionStorage.getItem('token')}`,
|
||||
// Authorization: `Bearer ${sessionStorage.getItem('token')}`,
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Request failed: ${response.status}`);
|
||||
}
|
||||
|
||||
const result2 = await response.json();
|
||||
console.log(result2);
|
||||
// }
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('External login error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
commonConfig: {
|
||||
labelWidth: 120,
|
||||
@@ -43,11 +94,69 @@ const gridOptions: VxeGridProps = {
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues = {}) => {
|
||||
return await getVisitorList({
|
||||
// 修改：添加对token的使用，如果token存在则请求外部接口，否则使用原接口
|
||||
console.log(1243);
|
||||
sessionStorage.removeItem('token');
|
||||
await externalLoginOnLoad();
|
||||
console.log(23423310248);
|
||||
|
||||
if (token.value) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
'https://server.cqnctc.com:6081/web/lot/net/queryOrderParkForPage',
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-Auth-Token': `${sessionStorage.getItem('token')}`,
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${sessionStorage.getItem('token')}`,
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
// pageReq: {
|
||||
// pageNum: page.currentPage,
|
||||
// pageSize: page.pageSize,
|
||||
// },
|
||||
// parkStates: parkStates.value,
|
||||
// parkOrderTypes: [100, 200, 201, 300, 500],
|
||||
// plNos: ['PFN000000022', 'PFN000000012', 'PFN000000025'],
|
||||
// terminalSource: 50,
|
||||
// orderStates: [],
|
||||
// orgId: 10012,
|
||||
// ...formValues,
|
||||
pageReq: {
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
plNos: ['PFN000000025', 'PFN000000022', 'PFN000000012'],
|
||||
carNumber: null,
|
||||
orgId: 10012,
|
||||
parkStates: Number(parkStates.value),
|
||||
orderStates: [],
|
||||
parkOrderTypes: [100, 200, 201, 300, 500],
|
||||
terminalSource: 50,
|
||||
}),
|
||||
},
|
||||
);
|
||||
|
||||
// if (!response.ok) {
|
||||
// throw new Error(
|
||||
// `External API request failed: ${response.status}`,
|
||||
// );
|
||||
// }
|
||||
|
||||
const result = await response.json();
|
||||
console.log(result);
|
||||
|
||||
// 根据返回数据结构调整
|
||||
return {
|
||||
rows: result.data.dataList || [],
|
||||
total: result.data.pageTotals || 0,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('External API request error:', error);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -74,43 +183,36 @@ function handleDownloadExcel() {
|
||||
// );
|
||||
}
|
||||
|
||||
// 外部登录接口：页面加载时请求
|
||||
async function externalLoginOnLoad() {
|
||||
try {
|
||||
const response = await fetch('https://server.cqnctc.com:6081/web/oAuth/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
loginCode: 'zhfwzx',
|
||||
loginPassword: 'nc123456',
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Request failed: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
if (result?.data?.token) {
|
||||
token.value = result.data.token;
|
||||
}
|
||||
console.log('external login result:', result);
|
||||
} catch (error) {
|
||||
console.error('external login error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
externalLoginOnLoad();
|
||||
// onMounted(() => {
|
||||
// externalLoginOnLoad();
|
||||
// });
|
||||
const [RecordDetailModal, recordDetailModalApi] = useVbenModal({
|
||||
connectedComponent: recordDetailModal,
|
||||
});
|
||||
async function handleInfo(row: any) {
|
||||
recordDetailModalApi.setData({ data: row });
|
||||
recordDetailModalApi.open();
|
||||
}
|
||||
// 切换视图模式
|
||||
async function handleViewModeChange(e: RadioChangeEvent): Promise<void> {
|
||||
parkStates.value = e.target.value;
|
||||
await tableApi.query();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page :auto-content-height="true">
|
||||
<BasicTable table-title="通行记录列表">
|
||||
<template #toolbar-tools>
|
||||
<template #toolbar-tools style="width: 100%">
|
||||
<div style="margin-right: 20px">
|
||||
<Radio.Group
|
||||
v-model:value="parkStates"
|
||||
@change="handleViewModeChange"
|
||||
>
|
||||
<Radio.Button value="10">在场</Radio.Button>
|
||||
<Radio.Button value="20">离场</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
<Space>
|
||||
<a-button @click="handleDownloadExcel">
|
||||
{{ $t('pages.common.export') }}
|
||||
@@ -119,9 +221,10 @@ onMounted(() => {
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button> 查看 </ghost-button>
|
||||
<ghost-button @click.stop="handleInfo(row)"> 查看 </ghost-button>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<RecordDetailModal />
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,256 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { Descriptions, DescriptionsItem } from 'ant-design-vue';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
// 格式化停车时长（将秒数转换为友好的时间格式）
|
||||
function formatParkingDuration(seconds: number | string): string {
|
||||
// 将秒数转换为友好的时间格式
|
||||
if (!seconds && seconds !== 0) return '';
|
||||
|
||||
const totalSeconds = Number(seconds);
|
||||
if (isNaN(totalSeconds)) return seconds as string;
|
||||
|
||||
// 计算天、小时、分钟和秒
|
||||
const days = Math.floor(totalSeconds / 86400);
|
||||
const hours = Math.floor((totalSeconds % 86400) / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const secs = Math.floor(totalSeconds % 60);
|
||||
|
||||
// 格式化显示
|
||||
let result = '';
|
||||
if (days > 0) result += `${days}天`;
|
||||
if (hours > 0) result += `${hours}小时`;
|
||||
if (minutes > 0) result += `${minutes}分钟`;
|
||||
if (secs > 0 || result === '') result += `${secs}秒`;
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const picture1 = ref('');
|
||||
const detail = ref<any>();
|
||||
// const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
// {
|
||||
// initializedGetter: defaultFormValueGetter(formApi),
|
||||
// currentGetter: defaultFormValueGetter(formApi),
|
||||
// },
|
||||
// );
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[70%]',
|
||||
fullscreenButton: false,
|
||||
onClosed: handleClosed,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
const { data } = modalApi.getData() as { data: any };
|
||||
detail.value = data;
|
||||
picture1.value = data.pictureUrl;
|
||||
const response = await fetch(
|
||||
'https://server.cqnctc.com:6081/web/toCFile/selectToCFileList',
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-Auth-Token': `${sessionStorage.getItem('token')}`,
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${sessionStorage.getItem('token')}`,
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
sourceId: data.orderId,
|
||||
fileTypes: [4, 5],
|
||||
}),
|
||||
},
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
for (const item of result.data) {
|
||||
if (item.fileName.includes('进场图片')) {
|
||||
data.parkInImgPath = item.filePath;
|
||||
console.log('图片路径:', data.parkInImgPath);
|
||||
} else {
|
||||
data.parkOutImgPath = item.filePath;
|
||||
}
|
||||
}
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.lock(true);
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
async function handleClosed() {
|
||||
detail.value = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal title="详情">
|
||||
<Descriptions
|
||||
v-if="detail"
|
||||
size="small"
|
||||
:column="2"
|
||||
bordered
|
||||
:labelStyle="{ width: '100px' }"
|
||||
>
|
||||
<DescriptionsItem label="订单编号">
|
||||
{{ detail.orderId }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="车场名称">
|
||||
{{ detail.plName }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="停车类型">
|
||||
{{
|
||||
detail.carBusiType === 10
|
||||
? '临时车'
|
||||
: [11, 12, 13].includes(detail.carBusiType)
|
||||
? '月租车'
|
||||
: '未知'
|
||||
}}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="车牌号">
|
||||
{{ detail.carNumber }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="车辆类型">
|
||||
{{
|
||||
detail.carType === 1
|
||||
? '大型车'
|
||||
: detail.carType === 2
|
||||
? '小型车'
|
||||
: detail.carType === 3
|
||||
? ' 新能源车'
|
||||
: '未知'
|
||||
}}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="应收">
|
||||
{{ detail.orderTotalFee }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="停车时长">
|
||||
{{ formatParkingDuration(detail.parkingDuration) }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="进场时间">
|
||||
{{
|
||||
detail.parkInTime
|
||||
? dayjs(detail.parkInTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
: ''
|
||||
}}
|
||||
</DescriptionsItem>
|
||||
<!-- <DescriptionsItem label="入驻位置">-->
|
||||
<!-- {{ detail.locathon }}-->
|
||||
<!-- </DescriptionsItem>-->
|
||||
<DescriptionsItem label="进场图片">
|
||||
<img
|
||||
v-if="detail.parkInImgPath"
|
||||
:src="detail.parkInImgPath"
|
||||
alt="图片加载失败"
|
||||
class="h-[100px] w-[100px]"
|
||||
/>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="出场时间">
|
||||
{{
|
||||
detail.parkOutTime
|
||||
? dayjs(detail.parkOutTime).format('YYYY-MM-DD HH:mm:ss')
|
||||
: ''
|
||||
}}
|
||||
</DescriptionsItem>
|
||||
<!-- <DescriptionsItem label="入驻位置">-->
|
||||
<!-- {{ detail.locathon }}-->
|
||||
<!-- </DescriptionsItem>-->
|
||||
<DescriptionsItem label="出场图片">
|
||||
<img
|
||||
v-if="detail.parkOutImgPath"
|
||||
:src="detail.parkOutImgPath"
|
||||
alt="图片加载失败"
|
||||
class="h-[100px] w-[100px]"
|
||||
/>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="备注">
|
||||
{{ detail.remark }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="状态">
|
||||
{{ detail.parkState == 10 ? '在场' : '离场' }}
|
||||
</DescriptionsItem>
|
||||
</Descriptions>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.detail-wrapper {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(0, 0, 0, 0.06),
|
||||
0 1px 2px rgba(0, 0, 0, 0.08);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.detail-thumb {
|
||||
width: 220px;
|
||||
height: 260px;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.detail-thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.detail-caption {
|
||||
margin-top: 12px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.detail-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.detail-thumb {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -54,11 +54,19 @@ const gridOptions: VxeGridProps = {
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues = {}) => {
|
||||
return await personList({
|
||||
// return await personList({
|
||||
// pageNum: page.currentPage,
|
||||
// pageSize: page.pageSize,
|
||||
// ...formValues,
|
||||
// })
|
||||
const res = await personList({
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
})
|
||||
});
|
||||
console.log(res);
|
||||
|
||||
return res;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -4,31 +4,31 @@ import { getDictOptions } from '#/utils/dict';
|
||||
import { renderDict } from '#/utils/render';
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'actionTime',
|
||||
label: '通行时间',
|
||||
},
|
||||
// {
|
||||
// component: 'Input',
|
||||
// fieldName: 'actionTime',
|
||||
// label: '通行时间',
|
||||
// },
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'customerName',
|
||||
label: '人员姓名',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'organFullPath',
|
||||
label: '组织机构',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'doorName',
|
||||
label: '门/电梯名称',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'deviceName',
|
||||
label: '设备名称',
|
||||
},
|
||||
// {
|
||||
// component: 'Input',
|
||||
// fieldName: 'organFullPath',
|
||||
// label: '组织机构',
|
||||
// },
|
||||
// {
|
||||
// component: 'Input',
|
||||
// fieldName: 'doorName',
|
||||
// label: '门/电梯名称',
|
||||
// },
|
||||
// {
|
||||
// component: 'Input',
|
||||
// fieldName: 'deviceName',
|
||||
// label: '设备名称',
|
||||
// },
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
|
||||
@@ -1,16 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
||||
import { getVxePopupContainer } from '@vben/utils';
|
||||
|
||||
import { Modal, Popconfirm, Space } from 'ant-design-vue';
|
||||
import { Space } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
vxeCheckboxChecked,
|
||||
type VxeGridProps,
|
||||
} from '#/adapter/vxe-table';
|
||||
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
import { columns, querySchema } from './data';
|
||||
import { getVisitorList } from '#/api/property/resident/passRecordManagement';
|
||||
@@ -97,6 +90,6 @@ async function handleInfo(row: any) {
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<RecordDetailModal/>
|
||||
<RecordDetailModal />
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
@@ -1,26 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep, handleNode } from '@vben/utils';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import {
|
||||
resident_unitAdd,
|
||||
resident_unitInfo,
|
||||
resident_unitUpdate,
|
||||
} from '#/api/property/resident/unit';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
|
||||
import { communityTree } from '#/api/property/community';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
||||
});
|
||||
const picture1 = ref('')
|
||||
// const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
// {
|
||||
|
||||
Reference in New Issue
Block a user