Merge branch 'master' of http://47.109.37.87:3000/by2025/admin-vben5
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
# Conflicts: # apps/web-antd/vite.config.mts
@ -70,7 +70,7 @@ export interface Clean_orderVO {
|
||||
* 联系电话
|
||||
*/
|
||||
phone: string;
|
||||
|
||||
relationList: any[];
|
||||
}
|
||||
|
||||
export interface Clean_orderForm extends BaseEntity {
|
||||
|
@ -0,0 +1,61 @@
|
||||
import type { InspectionItemVO, InspectionItemForm, InspectionItemQuery } from './model';
|
||||
|
||||
import type { ID, IDS } from '#/api/common';
|
||||
import type { PageResult } from '#/api/common';
|
||||
|
||||
import { commonExport } from '#/api/helper';
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
/**
|
||||
* 查询巡检项目列表
|
||||
* @param params
|
||||
* @returns 巡检项目列表
|
||||
*/
|
||||
export function inspectionItemList(params?: InspectionItemQuery) {
|
||||
return requestClient.get<PageResult<InspectionItemVO>>('/property/inspectionItem/list', { params });
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出巡检项目列表
|
||||
* @param params
|
||||
* @returns 巡检项目列表
|
||||
*/
|
||||
export function inspectionItemExport(params?: InspectionItemQuery) {
|
||||
return commonExport('/property/inspectionItem/export', params ?? {});
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询巡检项目详情
|
||||
* @param id id
|
||||
* @returns 巡检项目详情
|
||||
*/
|
||||
export function inspectionItemInfo(id: ID) {
|
||||
return requestClient.get<InspectionItemVO>(`/property/inspectionItem/${id}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增巡检项目
|
||||
* @param data
|
||||
* @returns void
|
||||
*/
|
||||
export function inspectionItemAdd(data: InspectionItemForm) {
|
||||
return requestClient.postWithMsg<void>('/property/inspectionItem', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新巡检项目
|
||||
* @param data
|
||||
* @returns void
|
||||
*/
|
||||
export function inspectionItemUpdate(data: InspectionItemForm) {
|
||||
return requestClient.putWithMsg<void>('/property/inspectionItem', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除巡检项目
|
||||
* @param id id
|
||||
* @returns void
|
||||
*/
|
||||
export function inspectionItemRemove(id: ID | IDS) {
|
||||
return requestClient.deleteWithMsg<void>(`/property/inspectionItem/${id}`);
|
||||
}
|
49
apps/web-antd/src/api/property/inspectionManagement/inspectionItem/model.d.ts
vendored
Normal file
@ -0,0 +1,49 @@
|
||||
import type { PageQuery, BaseEntity } from '#/api/common';
|
||||
|
||||
export interface InspectionItemVO {
|
||||
/**
|
||||
* 主键id
|
||||
*/
|
||||
id: string | number;
|
||||
|
||||
/**
|
||||
* 项目名称
|
||||
*/
|
||||
itemName: string;
|
||||
|
||||
/**
|
||||
* 备注
|
||||
*/
|
||||
remark: string;
|
||||
|
||||
}
|
||||
|
||||
export interface InspectionItemForm extends BaseEntity {
|
||||
/**
|
||||
* 主键id
|
||||
*/
|
||||
id?: string | number;
|
||||
|
||||
/**
|
||||
* 项目名称
|
||||
*/
|
||||
itemName?: string;
|
||||
|
||||
/**
|
||||
* 备注
|
||||
*/
|
||||
remark?: string;
|
||||
|
||||
}
|
||||
|
||||
export interface InspectionItemQuery extends PageQuery {
|
||||
/**
|
||||
* 项目名称
|
||||
*/
|
||||
itemName?: string;
|
||||
|
||||
/**
|
||||
* 日期范围参数
|
||||
*/
|
||||
params?: any;
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
import type { MeetbookingVO, MeetbookingForm, MeetbookingQuery } from './model';
|
||||
import type { MeetbookingVO, MeetbookingForm, MeetbookingQuery, MeetbookingAppointmentQuery } from './model';
|
||||
|
||||
import type { ID, IDS } from '#/api/common';
|
||||
import type { PageResult } from '#/api/common';
|
||||
|
@ -222,3 +222,4 @@ export interface MeetbookingQuery extends PageQuery {
|
||||
*/
|
||||
params?: any;
|
||||
}
|
||||
|
||||
|
@ -68,3 +68,12 @@ export function countAchieved() {
|
||||
export function countByCusScore() {
|
||||
return requestClient.get<any>('/property/orderMaintain/countByCusScore');
|
||||
}
|
||||
|
||||
/**
|
||||
* 统计下单客户总数
|
||||
* @param
|
||||
* @returns void
|
||||
*/
|
||||
export function countCustomers() {
|
||||
return requestClient.get<any>('/property/rentalOrder/countCustomers');
|
||||
}
|
||||
|
@ -0,0 +1,21 @@
|
||||
import type { getAppointmentListByDateQuery,getAppointmentListByIdQuery } from './model';
|
||||
|
||||
import type { PageResult } from '#/api/common';
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
/**
|
||||
* 按照日期查询已预约会议预约记录列表
|
||||
* @param params
|
||||
* @returns 会议预约列表
|
||||
*/
|
||||
export function getAppointmentListByDate(params?: getAppointmentListByDateQuery) {
|
||||
return requestClient.get<any>('/property/meetbooking/appointment-list', { params });
|
||||
}
|
||||
/**
|
||||
* 按照会议室Id查询已预约会议预约记录列表
|
||||
* @param params
|
||||
* @returns 会议预约列表
|
||||
*/
|
||||
export function getAppointmentListBymeetId(params?: getAppointmentListByIdQuery) {
|
||||
return requestClient.get<any>('/property/meetbooking/meet-appointment-list', { params });
|
||||
}
|
12
apps/web-antd/src/api/property/roomBooking/conferenceView/model.d.ts
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
export interface getAppointmentListByDateQuery {
|
||||
/**
|
||||
* 日期
|
||||
*/
|
||||
appointmentDate?: string;
|
||||
}
|
||||
export interface getAppointmentListByIdQuery {
|
||||
/**
|
||||
* 会议室id
|
||||
*/
|
||||
meetId?: string;
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
import type { RoomBookingVO, RoomBookingForm, RoomBookingQuery } from './model';
|
||||
import type { RoomBookingVO, RoomBookingForm, RoomBookingQuery,GetMeetNameVO } from './model';
|
||||
|
||||
import type { ID, IDS } from '#/api/common';
|
||||
import type { PageResult } from '#/api/common';
|
||||
@ -6,6 +6,15 @@ import type { PageResult } from '#/api/common';
|
||||
import { commonExport } from '#/api/helper';
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
/**
|
||||
* 查询会议室名称列表
|
||||
* @param getMeetName 后端约定传'getMeetName'
|
||||
* @returns 会议室名称列表
|
||||
*/
|
||||
export function getMeetName() {
|
||||
return requestClient.get<PageResult<GetMeetNameVO>>(`/property/enum-fetcher/enum-values/${'getMeetName'}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询会议管理列表
|
||||
* @param params
|
||||
@ -59,3 +68,11 @@ export function roomBookingUpdate(data: RoomBookingForm) {
|
||||
export function roomBookingRemove(id: ID | IDS) {
|
||||
return requestClient.deleteWithMsg<void>(`/property/roomBooking/${id}`);
|
||||
}
|
||||
/**
|
||||
* 按照日期查询已预约会议预约记录列表
|
||||
* @param params
|
||||
* @returns 会议预约列表
|
||||
*/
|
||||
export function meetbookingAppointmentList(params?: MeetbookingAppointmentQuery) {
|
||||
return requestClient.get<PageResult<MeetbookingVO>>('/property/meetbooking/appointment-list', { params });
|
||||
}
|
@ -1,5 +1,9 @@
|
||||
import type { PageQuery, BaseEntity } from '#/api/common';
|
||||
|
||||
export interface GetMeetNameVO {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
export interface RoomBookingVO {
|
||||
/**
|
||||
* 会议室id
|
||||
|
61
apps/web-antd/src/api/sis/elevatorInfo/index.ts
Normal file
@ -0,0 +1,61 @@
|
||||
import type { ElevatorInfoVO, ElevatorInfoForm, ElevatorInfoQuery } from './model';
|
||||
|
||||
import type { ID, IDS } from '#/api/common';
|
||||
import type { PageResult } from '#/api/common';
|
||||
|
||||
import { commonExport } from '#/api/helper';
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
/**
|
||||
* 查询电梯基本信息列表
|
||||
* @param params
|
||||
* @returns 电梯基本信息列表
|
||||
*/
|
||||
export function elevatorInfoList(params?: ElevatorInfoQuery) {
|
||||
return requestClient.get<PageResult<ElevatorInfoVO>>('/sis/elevatorInfo/list', { params });
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出电梯基本信息列表
|
||||
* @param params
|
||||
* @returns 电梯基本信息列表
|
||||
*/
|
||||
export function elevatorInfoExport(params?: ElevatorInfoQuery) {
|
||||
return commonExport('/sis/elevatorInfo/export', params ?? {});
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询电梯基本信息详情
|
||||
* @param elevatorId id
|
||||
* @returns 电梯基本信息详情
|
||||
*/
|
||||
export function elevatorInfoInfo(elevatorId: ID) {
|
||||
return requestClient.get<ElevatorInfoVO>(`/sis/elevatorInfo/${elevatorId}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增电梯基本信息
|
||||
* @param data
|
||||
* @returns void
|
||||
*/
|
||||
export function elevatorInfoAdd(data: ElevatorInfoForm) {
|
||||
return requestClient.postWithMsg<void>('/sis/elevatorInfo', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新电梯基本信息
|
||||
* @param data
|
||||
* @returns void
|
||||
*/
|
||||
export function elevatorInfoUpdate(data: ElevatorInfoForm) {
|
||||
return requestClient.putWithMsg<void>('/sis/elevatorInfo', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除电梯基本信息
|
||||
* @param elevatorId id
|
||||
* @returns void
|
||||
*/
|
||||
export function elevatorInfoRemove(elevatorId: ID | IDS) {
|
||||
return requestClient.deleteWithMsg<void>(`/sis/elevatorInfo/${elevatorId}`);
|
||||
}
|
294
apps/web-antd/src/api/sis/elevatorInfo/model.d.ts
vendored
Normal file
@ -0,0 +1,294 @@
|
||||
import type { PageQuery, BaseEntity } from '#/api/common';
|
||||
|
||||
export interface ElevatorInfoVO {
|
||||
/**
|
||||
*
|
||||
*/
|
||||
elevatorId: string | number;
|
||||
|
||||
/**
|
||||
* 电梯编号
|
||||
*/
|
||||
elevatorCode: string;
|
||||
|
||||
/**
|
||||
* 电梯名称
|
||||
*/
|
||||
elevatorName: string;
|
||||
|
||||
/**
|
||||
* 安装位置
|
||||
*/
|
||||
location: string;
|
||||
|
||||
/**
|
||||
* 品牌
|
||||
*/
|
||||
brand: string;
|
||||
|
||||
/**
|
||||
* 型号
|
||||
*/
|
||||
model: string;
|
||||
|
||||
/**
|
||||
* 生产日期
|
||||
*/
|
||||
manufactureDate: string;
|
||||
|
||||
/**
|
||||
* 安装日期
|
||||
*/
|
||||
installationDate: string;
|
||||
|
||||
/**
|
||||
* 最大载重(kg)
|
||||
*/
|
||||
maxLoad: number;
|
||||
|
||||
/**
|
||||
* 服务楼层数
|
||||
*/
|
||||
floorsServed: number;
|
||||
|
||||
/**
|
||||
* 维保公司
|
||||
*/
|
||||
maintenanceCompany: string;
|
||||
|
||||
/**
|
||||
* 维保电话
|
||||
*/
|
||||
maintenancePhone: string;
|
||||
|
||||
/**
|
||||
* 上次年检日期
|
||||
*/
|
||||
lastInspectionDate: string;
|
||||
|
||||
/**
|
||||
* 下次年检日期
|
||||
*/
|
||||
nextInspectionDate: string;
|
||||
|
||||
/**
|
||||
* 梯控厂商
|
||||
*/
|
||||
controlFactory: string;
|
||||
|
||||
/**
|
||||
* 梯控设备ip
|
||||
*/
|
||||
controlIp: string;
|
||||
|
||||
/**
|
||||
* 梯控设备编码
|
||||
*/
|
||||
controlPort: number;
|
||||
|
||||
/**
|
||||
* 梯控设备登录账号
|
||||
*/
|
||||
controlAccount: string;
|
||||
|
||||
/**
|
||||
* 梯控设备登录密码
|
||||
*/
|
||||
controlPwd: string;
|
||||
|
||||
}
|
||||
|
||||
export interface ElevatorInfoForm extends BaseEntity {
|
||||
/**
|
||||
*
|
||||
*/
|
||||
elevatorId?: string | number;
|
||||
|
||||
/**
|
||||
* 电梯编号
|
||||
*/
|
||||
elevatorCode?: string;
|
||||
|
||||
/**
|
||||
* 电梯名称
|
||||
*/
|
||||
elevatorName?: string;
|
||||
|
||||
/**
|
||||
* 安装位置
|
||||
*/
|
||||
location?: string;
|
||||
|
||||
/**
|
||||
* 品牌
|
||||
*/
|
||||
brand?: string;
|
||||
|
||||
/**
|
||||
* 型号
|
||||
*/
|
||||
model?: string;
|
||||
|
||||
/**
|
||||
* 生产日期
|
||||
*/
|
||||
manufactureDate?: string;
|
||||
|
||||
/**
|
||||
* 安装日期
|
||||
*/
|
||||
installationDate?: string;
|
||||
|
||||
/**
|
||||
* 最大载重(kg)
|
||||
*/
|
||||
maxLoad?: number;
|
||||
|
||||
/**
|
||||
* 服务楼层数
|
||||
*/
|
||||
floorsServed?: number;
|
||||
|
||||
/**
|
||||
* 维保公司
|
||||
*/
|
||||
maintenanceCompany?: string;
|
||||
|
||||
/**
|
||||
* 维保电话
|
||||
*/
|
||||
maintenancePhone?: string;
|
||||
|
||||
/**
|
||||
* 上次年检日期
|
||||
*/
|
||||
lastInspectionDate?: string;
|
||||
|
||||
/**
|
||||
* 下次年检日期
|
||||
*/
|
||||
nextInspectionDate?: string;
|
||||
|
||||
/**
|
||||
* 梯控厂商
|
||||
*/
|
||||
controlFactory?: string;
|
||||
|
||||
/**
|
||||
* 梯控设备ip
|
||||
*/
|
||||
controlIp?: string;
|
||||
|
||||
/**
|
||||
* 梯控设备编码
|
||||
*/
|
||||
controlPort?: number;
|
||||
|
||||
/**
|
||||
* 梯控设备登录账号
|
||||
*/
|
||||
controlAccount?: string;
|
||||
|
||||
/**
|
||||
* 梯控设备登录密码
|
||||
*/
|
||||
controlPwd?: string;
|
||||
|
||||
}
|
||||
|
||||
export interface ElevatorInfoQuery extends PageQuery {
|
||||
/**
|
||||
* 电梯编号
|
||||
*/
|
||||
elevatorCode?: string;
|
||||
|
||||
/**
|
||||
* 电梯名称
|
||||
*/
|
||||
elevatorName?: string;
|
||||
|
||||
/**
|
||||
* 安装位置
|
||||
*/
|
||||
location?: string;
|
||||
|
||||
/**
|
||||
* 品牌
|
||||
*/
|
||||
brand?: string;
|
||||
|
||||
/**
|
||||
* 型号
|
||||
*/
|
||||
model?: string;
|
||||
|
||||
/**
|
||||
* 生产日期
|
||||
*/
|
||||
manufactureDate?: string;
|
||||
|
||||
/**
|
||||
* 安装日期
|
||||
*/
|
||||
installationDate?: string;
|
||||
|
||||
/**
|
||||
* 最大载重(kg)
|
||||
*/
|
||||
maxLoad?: number;
|
||||
|
||||
/**
|
||||
* 服务楼层数
|
||||
*/
|
||||
floorsServed?: number;
|
||||
|
||||
/**
|
||||
* 维保公司
|
||||
*/
|
||||
maintenanceCompany?: string;
|
||||
|
||||
/**
|
||||
* 维保电话
|
||||
*/
|
||||
maintenancePhone?: string;
|
||||
|
||||
/**
|
||||
* 上次年检日期
|
||||
*/
|
||||
lastInspectionDate?: string;
|
||||
|
||||
/**
|
||||
* 下次年检日期
|
||||
*/
|
||||
nextInspectionDate?: string;
|
||||
|
||||
/**
|
||||
* 梯控厂商
|
||||
*/
|
||||
controlFactory?: string;
|
||||
|
||||
/**
|
||||
* 梯控设备ip
|
||||
*/
|
||||
controlIp?: string;
|
||||
|
||||
/**
|
||||
* 梯控设备编码
|
||||
*/
|
||||
controlPort?: number;
|
||||
|
||||
/**
|
||||
* 梯控设备登录账号
|
||||
*/
|
||||
controlAccount?: string;
|
||||
|
||||
/**
|
||||
* 梯控设备登录密码
|
||||
*/
|
||||
controlPwd?: string;
|
||||
|
||||
/**
|
||||
* 日期范围参数
|
||||
*/
|
||||
params?: any;
|
||||
}
|
BIN
apps/web-antd/src/assets/222.gif
Normal file
After Width: | Height: | Size: 25 MiB |
BIN
apps/web-antd/src/assets/from.png
Normal file
After Width: | Height: | Size: 394 KiB |
BIN
apps/web-antd/src/assets/juxing.png
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
apps/web-antd/src/assets/login.png
Normal file
After Width: | Height: | Size: 965 KiB |
BIN
apps/web-antd/src/assets/mima.png
Normal file
After Width: | Height: | Size: 323 B |
BIN
apps/web-antd/src/assets/my.png
Normal file
After Width: | Height: | Size: 358 B |
BIN
apps/web-antd/src/assets/navigation.png
Normal file
After Width: | Height: | Size: 988 KiB |
BIN
apps/web-antd/src/assets/return.png
Normal file
After Width: | Height: | Size: 358 B |
BIN
apps/web-antd/src/assets/shine-lines.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
apps/web-antd/src/assets/shine.png
Normal file
After Width: | Height: | Size: 1.4 KiB |
@ -2,6 +2,10 @@ import type {FormSchemaGetter} from '#/adapter/form';
|
||||
import type {VxeGridProps} from '#/adapter/vxe-table';
|
||||
import {renderDict} from "#/utils/render";
|
||||
import {getDictOptions} from "#/utils/dict";
|
||||
import {h} from "vue";
|
||||
import {Rate} from "ant-design-vue";
|
||||
import type {Dayjs} from "dayjs";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
@ -15,12 +19,6 @@ export const querySchema: FormSchemaGetter = () => [
|
||||
fieldName: 'orderName',
|
||||
label: '工单名称',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {},
|
||||
fieldName: 'type',
|
||||
label: '工单类型',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
@ -45,12 +43,12 @@ export const columns: VxeGridProps['columns'] = [
|
||||
},
|
||||
{
|
||||
title: '工单类型',
|
||||
field: 'type',
|
||||
slots: {
|
||||
default: ({row}) => {
|
||||
return renderDict(row.type, 'wy_gdlx');
|
||||
},
|
||||
},
|
||||
field: 'typeName',
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
title: '派单时间',
|
||||
field: 'dispatchTime',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
@ -63,26 +61,6 @@ export const columns: VxeGridProps['columns'] = [
|
||||
},
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '派单时间',
|
||||
field: 'dispatchTime',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '发起人姓名',
|
||||
field: 'initiatorName',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '发起人手机号',
|
||||
field: 'initiatorPhone',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '处理人姓名',
|
||||
field: 'handler',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
field: 'location',
|
||||
@ -101,12 +79,26 @@ export const columns: VxeGridProps['columns'] = [
|
||||
{
|
||||
title: '评价',
|
||||
field: 'serviceEvalua',
|
||||
width: 100,
|
||||
width: 180,
|
||||
slots: {
|
||||
default: ({row}) => {
|
||||
return h(Rate, {
|
||||
value: row.serviceEvalua || 0,
|
||||
disabled: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
title: '是否超时',
|
||||
field: 'isTimeOut',
|
||||
width: 100,
|
||||
slots: {
|
||||
default: ({row}) => {
|
||||
return renderDict(row.status, 'wy_sf');
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
@ -136,7 +128,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: '工单类型',
|
||||
fieldName: 'type',
|
||||
component: 'Select',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
@ -158,6 +150,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
disabledDate: disabledDate
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
@ -169,11 +162,6 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
rules: 'selectRequired',
|
||||
|
||||
},
|
||||
// {
|
||||
// label: '发起人手机号',
|
||||
// fieldName: 'initiatorPhone',
|
||||
// component: 'Input',
|
||||
// },
|
||||
{
|
||||
label: '处理人',
|
||||
fieldName: 'handler',
|
||||
@ -228,3 +216,6 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
];
|
||||
const disabledDate = (current: Dayjs) => {
|
||||
return current && current < dayjs().endOf('day');
|
||||
};
|
||||
|
@ -1,8 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
||||
import { getVxePopupContainer } from '@vben/utils';
|
||||
import {Page, useVbenModal, type VbenFormProps} from '@vben/common-ui';
|
||||
import {getVxePopupContainer} from '@vben/utils';
|
||||
|
||||
import { Modal, Popconfirm, Space } from 'ant-design-vue';
|
||||
import {Modal, Popconfirm, Space, RadioGroup, RadioButton} from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
@ -15,12 +15,17 @@ import {
|
||||
workOrdersList,
|
||||
workOrdersRemove,
|
||||
} from '#/api/property/businessManagement/workOrders';
|
||||
import type { WorkOrdersForm } from '#/api/property/businessManagement/workOrders/model';
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
import type {WorkOrdersForm} from '#/api/property/businessManagement/workOrders/model';
|
||||
import {commonDownloadExcel} from '#/utils/file/download';
|
||||
|
||||
import workOrdersModal from './workOrders-modal.vue';
|
||||
import { columns, querySchema } from './data';
|
||||
import workOrdersDetail from './work-orders-detail.vue';
|
||||
import {columns, querySchema} from './data';
|
||||
import {onMounted, ref} from "vue";
|
||||
import {workOrdersTypeList} from "#/api/property/businessManagement/workOrdersType";
|
||||
|
||||
const ordersTypeList = ref<any[]>([]);
|
||||
const ordersType = ref<string>('0');
|
||||
const formOptions: VbenFormProps = {
|
||||
commonConfig: {
|
||||
labelWidth: 80,
|
||||
@ -30,6 +35,14 @@ const formOptions: VbenFormProps = {
|
||||
},
|
||||
schema: querySchema(),
|
||||
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||
handleReset: async () => {
|
||||
ordersType.value = '0';
|
||||
const { formApi, reload } = tableApi;
|
||||
await formApi.resetForm();
|
||||
const formValues = formApi.form.values;
|
||||
formApi.setLatestSubmissionValues(formValues);
|
||||
await reload(formValues);
|
||||
},
|
||||
};
|
||||
|
||||
const gridOptions: VxeGridProps = {
|
||||
@ -41,15 +54,14 @@ const gridOptions: VxeGridProps = {
|
||||
// 点击行选中
|
||||
// trigger: 'row',
|
||||
},
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// columns: columns(),
|
||||
columns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues = {}) => {
|
||||
query: async ({page}, formValues = {}) => {
|
||||
formValues.type = ordersType.value=='0'?undefined:ordersType.value;
|
||||
return await workOrdersList({
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
@ -74,13 +86,21 @@ const [WorkOrdersModal, modalApi] = useVbenModal({
|
||||
connectedComponent: workOrdersModal,
|
||||
});
|
||||
|
||||
const [WorkOrdersDetail, detailApi] = useVbenModal({
|
||||
connectedComponent: workOrdersDetail,
|
||||
});
|
||||
|
||||
function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
}
|
||||
function handleInfo(row:any) {
|
||||
detailApi.setData({id:row.id});
|
||||
detailApi.open();
|
||||
}
|
||||
|
||||
async function handleEdit(row: Required<WorkOrdersForm>) {
|
||||
modalApi.setData({ id: row.id });
|
||||
modalApi.setData({id: row.id});
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
@ -108,11 +128,39 @@ function handleDownloadExcel() {
|
||||
fieldMappingTime: formOptions.fieldMappingTime,
|
||||
});
|
||||
}
|
||||
|
||||
async function queryOrderType() {
|
||||
let params = {
|
||||
pageSize: 1000,
|
||||
pageNum: 1
|
||||
}
|
||||
const res = await workOrdersTypeList(params)
|
||||
ordersTypeList.value = res.rows.map((item) => ({
|
||||
label: item.orderTypeName,
|
||||
value: item.id,
|
||||
}));
|
||||
ordersTypeList.value.unshift({
|
||||
label: '全部工单',
|
||||
value: '0',
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await queryOrderType()
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page :auto-content-height="true">
|
||||
<BasicTable table-title="工单处理列表">
|
||||
<BasicTable table-title="工单处理列表" class="order-work-left-radio">
|
||||
<template #table-title>
|
||||
<RadioGroup v-model:value="ordersType" button-style="solid"
|
||||
@change="() => tableApi.reload()">
|
||||
<RadioButton v-for="item in ordersTypeList"
|
||||
:value="item.value">{{ item.label }}
|
||||
</RadioButton>
|
||||
</RadioGroup>
|
||||
</template>
|
||||
<template #toolbar-tools>
|
||||
<Space>
|
||||
<a-button
|
||||
@ -140,6 +188,12 @@ function handleDownloadExcel() {
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
v-access:code="['property:workOrders:info']"
|
||||
@click.stop="handleInfo(row)"
|
||||
>
|
||||
{{ $t('pages.common.info') }}
|
||||
</ghost-button>
|
||||
<ghost-button
|
||||
v-access:code="['property:workOrders:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
@ -163,6 +217,22 @@ function handleDownloadExcel() {
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<WorkOrdersModal @reload="tableApi.query()" />
|
||||
<WorkOrdersModal @reload="tableApi.query()"/>
|
||||
<WorkOrdersDetail/>
|
||||
</Page>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
:where(.css-dev-only-do-not-override-aza1th).ant-radio-group {
|
||||
white-space: nowrap;
|
||||
overflow-y: hidden;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.order-work-left-radio{
|
||||
.vxe-toolbar .vxe-buttons--wrapper, .vxe-toolbar .vxe-tools--wrapper {
|
||||
max-width: 70% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -0,0 +1,103 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import {ref, shallowRef} from 'vue';
|
||||
|
||||
import {useVbenModal} from '@vben/common-ui';
|
||||
|
||||
import {Descriptions, DescriptionsItem, Timeline, TimelineItem, Rate,Divider} from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import duration from 'dayjs/plugin/duration';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
|
||||
import {renderDict} from "#/utils/render";
|
||||
import {workOrdersInfo} from "#/api/property/businessManagement/workOrders";
|
||||
import type {WorkOrdersVO} from "#/api/property/businessManagement/workOrders/model";
|
||||
|
||||
dayjs.extend(duration);
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
onOpenChange: handleOpenChange,
|
||||
onClosed() {
|
||||
orderDetail.value = null;
|
||||
},
|
||||
});
|
||||
|
||||
const orderDetail = shallowRef<null | WorkOrdersVO>(null);
|
||||
const handleRecords=ref<any[]>([])
|
||||
async function handleOpenChange(open: boolean) {
|
||||
if (!open) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const {id} = modalApi.getData() as { id: number | string };
|
||||
// 赋值
|
||||
orderDetail.value = await workOrdersInfo(id);
|
||||
if(orderDetail.value){
|
||||
handleRecords.value=[
|
||||
{type:orderDetail.value.typeName,time:orderDetail.value.compleTime,personName:orderDetail.value.handlerText},
|
||||
{type:'跟进',time:orderDetail.value.dispatchTime,personName:orderDetail.value.initiatorNameText},
|
||||
{type:'创建工单',time:orderDetail.value.createTime,personName:orderDetail.value.initiatorNameText},
|
||||
]
|
||||
}
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :footer="false" :fullscreen-button="false" title="工单详情信息" class="w-[70%]">
|
||||
<div v-if="orderDetail">
|
||||
<Descriptions size="small" :column="2" :labelStyle="{width:'100px'}">
|
||||
<DescriptionsItem label="订单号">
|
||||
{{ orderDetail.orderNo }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="工单名称">
|
||||
{{ orderDetail.orderName }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="工单类型">
|
||||
{{orderDetail.typeName}}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="发起人">
|
||||
{{ orderDetail.initiatorNameText+'-'+orderDetail.initiatorPhone}}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="派单时间">
|
||||
{{ orderDetail.dispatchTime }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="处理人">
|
||||
{{ orderDetail.handlerText }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="具体位置" :span="2">
|
||||
{{ orderDetail.location }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="计划完成时间">
|
||||
{{ orderDetail.planCompleTime }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="完成时间">
|
||||
{{ orderDetail.compleTime }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="服务评价">
|
||||
<Rate :value="orderDetail.serviceEvalua" disabled/>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="是否超时">
|
||||
<component
|
||||
:is="renderDict(orderDetail.isTimeOut,'wy_sf')"
|
||||
/>
|
||||
</DescriptionsItem>
|
||||
</Descriptions>
|
||||
<Divider orientation="left" orientation-margin="0px">
|
||||
处理记录
|
||||
</Divider>
|
||||
<Timeline v-if="handleRecords.length">
|
||||
<TimelineItem v-for="item in handleRecords">
|
||||
<p>类型:{{item.type}}</p>
|
||||
<p>时间:{{item.time}}</p>
|
||||
<p>处理人:{{item.personName}}</p>
|
||||
</TimelineItem>
|
||||
</Timeline>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
@ -16,6 +16,7 @@ import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
|
||||
import {modalSchema} from './data';
|
||||
import {personList} from "#/api/property/resident/person";
|
||||
import {renderDictValue} from "#/utils/render";
|
||||
import {workOrdersTypeList} from "#/api/property/businessManagement/workOrdersType";
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
@ -60,11 +61,13 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
await queryPersonData()
|
||||
await queryWorkOrdersType()
|
||||
const {id} = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await workOrdersInfo(id);
|
||||
record.isTimeOut=record.isTimeOut.toString()
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
await markInitialized();
|
||||
@ -111,6 +114,7 @@ async function queryPersonData() {
|
||||
formApi.updateSchema([{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
showSearch:true,
|
||||
filterOption: filterOption
|
||||
}),
|
||||
fieldName: 'initiatorName',
|
||||
@ -118,14 +122,35 @@ async function queryPersonData() {
|
||||
{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
showSearch:true,
|
||||
filterOption: filterOption
|
||||
}),
|
||||
fieldName: 'handler',
|
||||
}])
|
||||
}
|
||||
|
||||
async function queryWorkOrdersType() {
|
||||
let params = {
|
||||
pageSize: 1000,
|
||||
pageNum: 1
|
||||
}
|
||||
const res = await workOrdersTypeList(params)
|
||||
const options = res.rows.map((item) => ({
|
||||
label: item.orderTypeName,
|
||||
value: item.id,
|
||||
}));
|
||||
formApi.updateSchema([{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
filterOption: filterOption,
|
||||
showSearch:true,
|
||||
}),
|
||||
fieldName: 'type',
|
||||
}])
|
||||
}
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
@ -39,6 +39,8 @@ const totalSumPeices = computed(() => {
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const isReadonly = ref(false);
|
||||
const isAudit = ref(false);
|
||||
const isRefund = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value ? $t('pages.common.edit') : isReadonly.value ? '详情' : $t('pages.common.add');
|
||||
});
|
||||
@ -121,12 +123,16 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
// 查询服务地址树形结构
|
||||
setupCommunitySelect()
|
||||
modalApi.modalLoading(true);
|
||||
const { id, readonly } = modalApi.getData() as {
|
||||
const { id, readonly,audit,refund } = modalApi.getData() as {
|
||||
id?: string;
|
||||
readonly?: boolean;
|
||||
audit?: boolean;
|
||||
refund?: boolean;
|
||||
};
|
||||
editCleanOrderId.value = id || '';
|
||||
isReadonly.value = !!readonly;
|
||||
isAudit.value = !!audit;
|
||||
isRefund.value = !!refund;
|
||||
//判断是否是编辑状态需要先判断是否是只读状态
|
||||
if(isReadonly.value){
|
||||
isUpdate.value = false;
|
||||
@ -139,6 +145,14 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
if (record.endTime) record.endTime = dayjs(record.endTime);
|
||||
editUnitId.value = record.unitId || '';
|
||||
detailTable.value = record.cleanList || [];
|
||||
for(const item of record.relationList){
|
||||
for(let i = 0; i < detailTable.value.length; i++){
|
||||
if(item.cleanId === detailTable.value[i].id){
|
||||
detailTable.value[i].area = item.areas;
|
||||
detailTable.value[i].sumPeices = item.sumPrice;
|
||||
}
|
||||
}
|
||||
}
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
await markInitialized();
|
||||
@ -275,14 +289,10 @@ function handleAddDetail() {
|
||||
}
|
||||
// 添加订单服务详情
|
||||
function handleDetailReload(data: any) {
|
||||
console.log(data,'afawed');
|
||||
|
||||
detailTable.value.push(data);
|
||||
}
|
||||
// 编辑订单服务详情
|
||||
function handleEditDetailReload(data: any) {
|
||||
console.log(data,'1203342423');
|
||||
|
||||
detailTable.value[data.index] = data;
|
||||
|
||||
}
|
||||
@ -326,7 +336,8 @@ async function handleConfirm() {
|
||||
data.unit = unitObj ? unitObj.name : data.unit || '';
|
||||
data.name = cleanObj ? cleanObj.name : data.name || '';
|
||||
data.unitId = unitObj ? unitObj.id : isUpdate.value ? editUnitId.value : '';
|
||||
data.sumPeices = parseInt(totalSumPeices.value, 10);
|
||||
data.sumPeices = Number(totalSumPeices.value)
|
||||
// data.sumPeices = parseInt(totalSumPeices.value, 10);
|
||||
// 组装 cleanIds
|
||||
// data.cleanIds = detailTable.value.map((item: any) => item.id);
|
||||
data.cleanList = detailTable.value;
|
||||
@ -382,6 +393,46 @@ async function setupCommunitySelect() {
|
||||
},
|
||||
]);
|
||||
}
|
||||
async function handleAudit(params: any) {
|
||||
modalApi.lock(true);
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
// 单位数据缓存
|
||||
if (unitListData.length === 0) {
|
||||
const res = await resident_unitList();
|
||||
unitListData = res.rows || [];
|
||||
}
|
||||
// 劳务数据缓存 cleanListData 已有
|
||||
// 查找label
|
||||
const unitObj = unitListData.find((item) => item.id === data.unitId);
|
||||
const cleanObj = cleanListData.find((item) => item.id === data.name);
|
||||
data.unit = unitObj ? unitObj.name : data.unit || '';
|
||||
data.name = cleanObj ? cleanObj.name : data.name || '';
|
||||
data.unitId = unitObj ? unitObj.id : isUpdate.value ? editUnitId.value : '';
|
||||
data.sumPeices = Number(totalSumPeices.value)
|
||||
data.starTime = dayjs(data.starTime).format('YYYY-MM-DD HH:mm:ss');
|
||||
data.endTime = dayjs(data.endTime).format('YYYY-MM-DD HH:mm:ss');
|
||||
// data.sumPeices = parseInt(totalSumPeices.value, 10);
|
||||
// 组装 cleanIds
|
||||
// data.cleanIds = detailTable.value.map((item: any) => item.id);
|
||||
data.cleanList = detailTable.value;
|
||||
if(params.isRefund){
|
||||
data.isUnbooking = 1;
|
||||
} else if(params.isAudit){
|
||||
data.state = 1;
|
||||
}else{
|
||||
data.state = 2;
|
||||
}
|
||||
console.log(data,'data');
|
||||
// 0:未审核 1:审核通过 2:审核不通过
|
||||
await clean_orderUpdate({...data,id:editCleanOrderId.value})
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -422,7 +473,16 @@ async function setupCommunitySelect() {
|
||||
<div>费用合计:{{ totalSumPeices }}元</div>
|
||||
</div>
|
||||
<CleanDetailModal @reload="handleDetailReload" @editReload="handleEditDetailReload"/>
|
||||
</BasicModal>
|
||||
<template #footer v-if="isAudit">
|
||||
<a-button @click="modalApi.close()">取消</a-button>
|
||||
<a-button type="primary" @click="handleAudit({isAudit:true})">审核通过</a-button>
|
||||
<a-button danger @click="handleAudit({isAudit:false})">审核不通过</a-button>
|
||||
</template>
|
||||
<template #footer v-if="isRefund">
|
||||
<a-button @click="modalApi.close()">取消</a-button>
|
||||
<a-button type="primary" @click="handleAudit({isRefund:true})">退定</a-button>
|
||||
</template>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
@ -127,10 +127,26 @@ function handleDownloadExcel() {
|
||||
);
|
||||
}
|
||||
|
||||
async function handleView(row: Required<CleanForm>) {
|
||||
function handleView(row: Required<CleanForm>) {
|
||||
modalApi.setData({ id: row.id, readonly: true });
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
function handleAudit(row:any) {
|
||||
// 审核逻辑
|
||||
// TODO: 实现审核功能
|
||||
console.log('审核', row);
|
||||
modalApi.setData({ id: row.id, readonly: true,audit:true });
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
function handleRefund(row:any) {
|
||||
// 退定逻辑
|
||||
// TODO: 实现退定功能
|
||||
console.log('退定', row);
|
||||
modalApi.setData({ id: row.id, readonly: true,refund:true });
|
||||
modalApi.open();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -170,26 +186,13 @@ async function handleView(row: Required<CleanForm>) {
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button @click.stop="handleView(row)"> 查看 </ghost-button>
|
||||
<ghost-button
|
||||
v-access:code="['property:clean:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
>
|
||||
{{ $t('pages.common.edit') }}
|
||||
</ghost-button>
|
||||
<Popconfirm
|
||||
:get-popup-container="getVxePopupContainer"
|
||||
placement="left"
|
||||
title="确认删除?"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<ghost-button
|
||||
danger
|
||||
v-access:code="['property:clean:remove']"
|
||||
@click.stop=""
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</ghost-button>
|
||||
</Popconfirm>
|
||||
<template v-if="row.state === 0">
|
||||
<ghost-button type="primary" @click.stop="handleAudit(row)">审核</ghost-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<ghost-button danger @click.stop="handleRefund(row)" v-if="row.isUnbooking === 0">退定</ghost-button>
|
||||
<ghost-button disabled v-else>已退定</ghost-button>
|
||||
</template>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
|
@ -53,7 +53,6 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
|
@ -5,7 +5,8 @@ import { onMounted, ref } from 'vue';
|
||||
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { Button,Radio } from 'ant-design-vue';
|
||||
import type { RadioChangeEvent } from 'ant-design-vue';
|
||||
|
||||
import { statisticsByTime,
|
||||
countByRentalType,
|
||||
@ -13,6 +14,7 @@ import { statisticsByTime,
|
||||
countRenewRate,
|
||||
countByCusScore,
|
||||
countOrderAndAmount,
|
||||
countCustomers,
|
||||
countAchievedRate,
|
||||
countAchieved
|
||||
} from '#/api/property/reportStatistics';
|
||||
@ -42,17 +44,23 @@ const timeUnit = ref<number>(1)
|
||||
const countOrderAndAmountDataAmount = ref<number>(0);
|
||||
const countOrderAndAmountDataOrder = ref<number>(0);
|
||||
const countAchievedRateData = ref<any>(null);
|
||||
const countCustomersData = ref<any>(null);
|
||||
const xAxisData = ref<any[]>([]);
|
||||
const seriesData = ref<any[]>([]);
|
||||
onMounted(async () => {
|
||||
// 任务数
|
||||
const countOrderAndAmountData= await countOrderAndAmount();
|
||||
countOrderAndAmountDataAmount.value = countOrderAndAmountData.amount;
|
||||
countOrderAndAmountDataOrder.value = countOrderAndAmountData.num;
|
||||
//活跃用户
|
||||
const countCustomersDataRes: any = await countCustomers();
|
||||
countCustomersData.value = countCustomersDataRes.count;
|
||||
const countAchievedRateDataRes: any = await countAchievedRate();
|
||||
countAchievedRateData.value = countAchievedRateDataRes.rate;
|
||||
// 查询订单数量趋势
|
||||
const res = await statisticsByTime({ timeUnit: timeUnit.value });
|
||||
const xAxisData = res?.time ?? [];
|
||||
const seriesData = res?.counts ?? [];
|
||||
xAxisData.value = res?.time ?? [];
|
||||
seriesData.value = res?.counts ?? [];
|
||||
// 租赁金额分布
|
||||
const data = await countByRentalType();//返回的内容是amount: 1, type: "单点"
|
||||
// 转换字段名为value和name
|
||||
@ -76,7 +84,7 @@ onMounted(async () => {
|
||||
tooltip: { trigger: 'axis' },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
data: xAxisData.value,
|
||||
boundaryGap: false,
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
@ -84,7 +92,7 @@ onMounted(async () => {
|
||||
{
|
||||
name: '订单数',
|
||||
type: 'line',
|
||||
data: seriesData ||[],
|
||||
data: seriesData.value ||[],
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
@ -229,13 +237,29 @@ onMounted(async () => {
|
||||
],
|
||||
});
|
||||
});
|
||||
const nodeOptions = [
|
||||
{ label: '日', value: 1 },
|
||||
{ label: '周', value: 2 },
|
||||
{ label: '月', value: 3 },
|
||||
];
|
||||
function handleAssociationChange(e: any) {
|
||||
// 切换视图模式
|
||||
async function handleViewModeChange(e: RadioChangeEvent): Promise<void> {
|
||||
timeUnit.value = e.target.value;
|
||||
const res = await statisticsByTime({ timeUnit: timeUnit.value });
|
||||
xAxisData.value = res?.time ?? [];
|
||||
seriesData.value = res?.counts ?? [];
|
||||
renderEcharts({
|
||||
tooltip: { trigger: 'axis' },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData.value,
|
||||
boundaryGap: false,
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{
|
||||
name: '订单数',
|
||||
type: 'line',
|
||||
data: seriesData.value ||[],
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
function formatNumber(num: number | string) {
|
||||
if (!num && num !== 0) {
|
||||
@ -277,6 +301,10 @@ function formatNumber(num: number | string) {
|
||||
<div class="title">累计租赁金额</div>
|
||||
<div class="number">{{ formatNumber(countOrderAndAmountDataOrder) }}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="title">当前活跃客户数</div>
|
||||
<div class="number">{{ formatNumber(countCustomersData) }}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="title">绿植养护完成率</div>
|
||||
<div class="number">{{ countAchievedRateData }}</div>
|
||||
@ -287,13 +315,11 @@ function formatNumber(num: number | string) {
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
|
||||
<span style="font-size: 18px; font-weight: bold;">订单数量趋势</span>
|
||||
<div>
|
||||
<RadioGroup
|
||||
v-model:value="timeUnit"
|
||||
:options="nodeOptions"
|
||||
button-style="solid"
|
||||
option-type="button"
|
||||
@change="handleAssociationChange"
|
||||
/>
|
||||
<Radio.Group v-model:value="timeUnit" @change="handleViewModeChange">
|
||||
<Radio.Button value=1>日</Radio.Button>
|
||||
<Radio.Button value=2>周</Radio.Button>
|
||||
<Radio.Button value=3>月</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
</div>
|
||||
<EchartsUI
|
||||
@ -357,7 +383,6 @@ function formatNumber(num: number | string) {
|
||||
.box {
|
||||
height: 100%;
|
||||
margin: 40px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -384,7 +409,8 @@ function formatNumber(num: number | string) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.box{
|
||||
width: 300px;
|
||||
width: 250px;
|
||||
max-width: 300px;
|
||||
height: 120px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
|
@ -0,0 +1,59 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'itemName',
|
||||
label: '项目名称',
|
||||
},
|
||||
];
|
||||
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// export const columns: () => VxeGridProps['columns'] = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '主键id',
|
||||
field: 'id',
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
field: 'itemName',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
field: 'remark',
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
fixed: 'right',
|
||||
slots: { default: 'action' },
|
||||
title: '操作',
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
|
||||
export const modalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: '主键id',
|
||||
fieldName: 'id',
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
show: () => false,
|
||||
triggerFields: [''],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '项目名称',
|
||||
fieldName: 'itemName',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
fieldName: 'remark',
|
||||
component: 'Input',
|
||||
},
|
||||
];
|
@ -0,0 +1,182 @@
|
||||
<script setup lang="ts">
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
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 dayjs from 'dayjs';
|
||||
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
vxeCheckboxChecked,
|
||||
type VxeGridProps
|
||||
} from '#/adapter/vxe-table';
|
||||
|
||||
import {
|
||||
inspectionItemExport,
|
||||
inspectionItemList,
|
||||
inspectionItemRemove,
|
||||
} from '#/api/property/inspectionManagement/inspectionItem';
|
||||
import type { InspectionItemForm } from '#/api/property/inspectionManagement/inspectionItem/model';
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
|
||||
import inspectionItemModal from './inspectionItem-modal.vue';
|
||||
import { columns, querySchema } from './data';
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
commonConfig: {
|
||||
labelWidth: 80,
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
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 = {
|
||||
checkboxConfig: {
|
||||
// 高亮
|
||||
highlight: true,
|
||||
// 翻页时保留选中状态
|
||||
reserve: true,
|
||||
// 点击行选中
|
||||
// trigger: 'row',
|
||||
},
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// columns: columns(),
|
||||
columns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues = {}) => {
|
||||
return await inspectionItemList({
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'property-inspectionItem-index'
|
||||
};
|
||||
|
||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
});
|
||||
|
||||
const [InspectionItemModal, modalApi] = useVbenModal({
|
||||
connectedComponent: inspectionItemModal,
|
||||
});
|
||||
|
||||
function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleEdit(row: Required<InspectionItemForm>) {
|
||||
modalApi.setData({ id: row.id });
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleDelete(row: Required<InspectionItemForm>) {
|
||||
await inspectionItemRemove(row.id);
|
||||
await tableApi.query();
|
||||
}
|
||||
|
||||
function handleMultiDelete() {
|
||||
const rows = tableApi.grid.getCheckboxRecords();
|
||||
const ids = rows.map((row: Required<InspectionItemForm>) => row.id);
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
okType: 'danger',
|
||||
content: `确认删除选中的${ids.length}条记录吗?`,
|
||||
onOk: async () => {
|
||||
await inspectionItemRemove(ids);
|
||||
await tableApi.query();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleDownloadExcel() {
|
||||
commonDownloadExcel(inspectionItemExport, '巡检项目数据', tableApi.formApi.form.values, {
|
||||
fieldMappingTime: formOptions.fieldMappingTime,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page :auto-content-height="true">
|
||||
<BasicTable table-title="巡检项目列表">
|
||||
<template #toolbar-tools>
|
||||
<Space>
|
||||
<a-button
|
||||
v-access:code="['property:inspectionItem:export']"
|
||||
@click="handleDownloadExcel"
|
||||
>
|
||||
{{ $t('pages.common.export') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
danger
|
||||
type="primary"
|
||||
v-access:code="['property:inspectionItem:remove']"
|
||||
@click="handleMultiDelete">
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
v-access:code="['property:inspectionItem:add']"
|
||||
@click="handleAdd"
|
||||
>
|
||||
{{ $t('pages.common.add') }}
|
||||
</a-button>
|
||||
</Space>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
v-access:code="['property:inspectionItem:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
>
|
||||
{{ $t('pages.common.edit') }}
|
||||
</ghost-button>
|
||||
<Popconfirm
|
||||
:get-popup-container="getVxePopupContainer"
|
||||
placement="left"
|
||||
title="确认删除?"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<ghost-button
|
||||
danger
|
||||
v-access:code="['property:inspectionItem:remove']"
|
||||
@click.stop=""
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</ghost-button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<InspectionItemModal @reload="tableApi.query()" />
|
||||
</Page>
|
||||
</template>
|
@ -0,0 +1,101 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { inspectionItemAdd, inspectionItemInfo, inspectionItemUpdate } from '#/api/property/inspectionManagement/inspectionItem';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
|
||||
import { modalSchema } from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 80,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
}
|
||||
},
|
||||
schema: modalSchema(),
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
{
|
||||
initializedGetter: defaultFormValueGetter(formApi),
|
||||
currentGetter: defaultFormValueGetter(formApi),
|
||||
},
|
||||
);
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[550px]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
onClosed: handleClosed,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await inspectionItemInfo(id);
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
await markInitialized();
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.lock(true);
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
await (isUpdate.value ? inspectionItemUpdate(data) : inspectionItemAdd(data));
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm />
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
@ -153,14 +153,15 @@ async function queryUnitData() {
|
||||
formApi.updateSchema([{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
filterOption: filterOption
|
||||
filterOption: filterOption,
|
||||
showSearch:true,
|
||||
}),
|
||||
fieldName: 'unit',
|
||||
}])
|
||||
}
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
||||
async function changeProjectNum() {
|
||||
|
@ -122,14 +122,15 @@ async function queryPerson() {
|
||||
formApi.updateSchema([{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
filterOption: filterOption
|
||||
filterOption: filterOption,
|
||||
showSearch:true,
|
||||
}),
|
||||
fieldName: 'principals',
|
||||
}])
|
||||
}
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -4,17 +4,16 @@ import { Page } from '@vben/common-ui';
|
||||
import dayjs from 'dayjs';
|
||||
import type { TableColumnType } from 'ant-design-vue';
|
||||
import { Radio, Select, Button, Table } from 'ant-design-vue';
|
||||
import { conferenceList } from '#/api/property/conference';
|
||||
import { roomBookingList } from '#/api/property/roomBooking';
|
||||
import { getMeetName } from '#/api/property/roomBooking';
|
||||
import { getAppointmentListByDate,getAppointmentListBymeetId } from '#/api/property/roomBooking/conferenceView';
|
||||
import type { RadioChangeEvent } from 'ant-design-vue';
|
||||
import type { SelectValue } from 'ant-design-vue/es/select';
|
||||
|
||||
// 首先定义会议室和预约信息的接口类型
|
||||
// 会议室和预约信息的接口类型
|
||||
interface ConferenceRoom {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface ConferenceBooking {
|
||||
id: string | number;
|
||||
tbConferenceId: string | number; // 会议室ID
|
||||
@ -43,21 +42,22 @@ const selectedDate = ref<string>('');
|
||||
const weekDates = ref<string[]>([]);
|
||||
|
||||
// 预约数据
|
||||
const bookings = ref<ConferenceBooking[]>([]);
|
||||
const bookings = ref<any[]>([]);
|
||||
// 新增:表格渲染用的结构
|
||||
const bookingTable = ref<Record<string, Record<string, any>>>({});
|
||||
// 新增:加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 时间段
|
||||
const timeSlots = [
|
||||
'8:00', '8:30', '9:00', '9:30', '10:00', '10:30',
|
||||
'11:00', '11:30', '12:00', '12:30', '13:00', '13:30',
|
||||
'14:00', '14:30', '15:00', '15:30', '16:00', '16:30',
|
||||
'17:00', '17:30'
|
||||
];
|
||||
// 时间段只显示"上午" "下午"
|
||||
const timeSlots = ['上午', '下午'];
|
||||
|
||||
// 生成一周日期
|
||||
function generateWeekDates(): void {
|
||||
const today = dayjs();
|
||||
// 获取本周的周一
|
||||
const startOfWeek = today.startOf('week');
|
||||
const dates = Array.from({ length: 7 }, (_, i) => {
|
||||
return today.add(i, 'day').format('YYYY-MM-DD');
|
||||
return startOfWeek.add(i, 'day').format('YYYY-MM-DD');
|
||||
});
|
||||
weekDates.value = dates;
|
||||
selectedDate.value = dates[0] ?? '';
|
||||
@ -65,39 +65,84 @@ function generateWeekDates(): void {
|
||||
|
||||
// 获取预约数据
|
||||
async function fetchBookings(): Promise<void> {
|
||||
loading.value = true;
|
||||
try {
|
||||
if (viewMode.value === 'date') {
|
||||
// 先获取会议室列表
|
||||
const roomRes = await conferenceList();
|
||||
console.log(roomRes);
|
||||
|
||||
// roomList.value = roomRes.rows || [];
|
||||
|
||||
// // 然后获取每个会议室的预约信息
|
||||
// const bookingPromises = roomList.value.map(room =>
|
||||
// roomBookingList({
|
||||
// appointmentDate: selectedDate.value,
|
||||
// bookingStatus: 2,
|
||||
// reviewStatus: 1,
|
||||
// tbConferenceId: room.id
|
||||
// })
|
||||
// );
|
||||
|
||||
// const bookingResults = await Promise.all(bookingPromises);
|
||||
// // 合并所有预约数据
|
||||
// bookings.value = bookingResults.flatMap(res => res.rows || []);
|
||||
} else {
|
||||
// 按会议室视图时直接查询该会议室的预约
|
||||
const res = await roomBookingList({
|
||||
appointmentDate: selectedDate.value,
|
||||
bookingStatus: 2,
|
||||
reviewStatus: 1,
|
||||
tbConferenceId: selectedRoom.value
|
||||
const roomRes = await getMeetName();
|
||||
roomList.value = ([roomRes]).map((item: any) => ({
|
||||
id: item.value,
|
||||
name: item.name
|
||||
}));
|
||||
const appointmentRes = await getAppointmentListByDate({
|
||||
appointmentDate: selectedDate.value
|
||||
});
|
||||
bookings.value = res.rows || [];
|
||||
bookings.value = (appointmentRes || []).map((item: any) => ({
|
||||
id: item.id,
|
||||
meetId: item.meetId,
|
||||
name: item.name,
|
||||
person: item.person,
|
||||
scheduledEndtime: item.scheduledEndtime,
|
||||
scheduledStarttime: item.scheduledStarttime,
|
||||
unit: item.unit,
|
||||
personName: item.personName,
|
||||
slots: item.slots,
|
||||
unitName: item.unitName,
|
||||
subject: item.subject,
|
||||
deptName: item.unitName,
|
||||
bookingName: item.personName,
|
||||
startTime: item.scheduledStarttime,
|
||||
endTime: item.scheduledEndtime,
|
||||
bookingDate: item.scheduledStarttime,
|
||||
tbConferenceId: item.meetId,
|
||||
// 兼容后续渲染
|
||||
}));
|
||||
// 处理为表格结构
|
||||
const table: Record<string, Record<string, any>> = { '上午': {}, '下午': {} };
|
||||
roomList.value.forEach(room => {
|
||||
['上午', '下午'].forEach(slot => {
|
||||
const booking = bookings.value.find(b => b.name === room.name && b.slots === slot);
|
||||
table[slot][room.name] = booking || null;
|
||||
});
|
||||
});
|
||||
bookingTable.value = table;
|
||||
} else {
|
||||
const res = await getAppointmentListBymeetId({
|
||||
meetId: selectedRoom.value
|
||||
});
|
||||
bookings.value = (res || []).map((item: any) => ({
|
||||
id: item.id,
|
||||
meetId: item.meetId,
|
||||
name: item.name,
|
||||
person: item.person,
|
||||
scheduledEndtime: item.scheduledEndtime,
|
||||
scheduledStarttime: item.scheduledStarttime,
|
||||
unit: item.unit,
|
||||
personName: item.personName,
|
||||
slots: item.slots,
|
||||
unitName: item.unitName,
|
||||
subject: item.subject,
|
||||
deptName: item.unitName,
|
||||
bookingName: item.personName,
|
||||
startTime: item.scheduledStarttime,
|
||||
endTime: item.scheduledEndtime,
|
||||
bookingDate: item.scheduledStarttime,
|
||||
tbConferenceId: item.meetId,
|
||||
}));
|
||||
const table: Record<string, Record<string, any>> = { '上午': {}, '下午': {} };
|
||||
weekDates.value.forEach(date => {
|
||||
['上午', '下午'].forEach(slot => {
|
||||
const booking = bookings.value.find(b => dayjs(b.scheduledStarttime).format('YYYY-MM-DD') === date && b.slots === slot);
|
||||
table[slot][date] = booking || null;
|
||||
});
|
||||
});
|
||||
bookingTable.value = table;
|
||||
}
|
||||
console.log(bookingTable.value,'bookingTable.value');
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取预约数据失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -124,45 +169,63 @@ function handleRoomChange(value: SelectValue): void {
|
||||
fetchBookings();
|
||||
}
|
||||
|
||||
// 获取单元格预约信息
|
||||
// 获取单元格预约信息(上午/下午)
|
||||
function getCellBooking(col: string, time: string): ConferenceBooking | undefined {
|
||||
// 判断时间属于上午还是下午
|
||||
function isMorning(startTime: string) {
|
||||
const hour = dayjs(startTime).hour();
|
||||
return hour < 12;
|
||||
}
|
||||
if (viewMode.value === 'date') {
|
||||
const room = roomList.value.find(r => r.name === col);
|
||||
return bookings.value.find(b =>
|
||||
b.tbConferenceId === room?.id &&
|
||||
dayjs(b.startTime).format('HH:mm') === time
|
||||
return bookings.value.find(b =>
|
||||
b.tbConferenceId === room?.id &&
|
||||
((time === '上午' && isMorning(b.startTime)) || (time === '下午' && !isMorning(b.startTime)))
|
||||
);
|
||||
} else {
|
||||
return bookings.value.find(b =>
|
||||
dayjs(b.bookingDate).format('YYYY-MM-DD') === col &&
|
||||
dayjs(b.startTime).format('HH:mm') === time
|
||||
return bookings.value.find(b =>
|
||||
dayjs(b.bookingDate).format('YYYY-MM-DD') === col &&
|
||||
((time === '上午' && isMorning(b.startTime)) || (time === '下午' && !isMorning(b.startTime)))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// 修改渲染预约单元格的函数
|
||||
function renderBookingCell(booking: ConferenceBooking) {
|
||||
return h('div',
|
||||
{
|
||||
class: 'booking-cell'
|
||||
},
|
||||
return h('div',
|
||||
{
|
||||
class: 'booking-cell'
|
||||
},
|
||||
[
|
||||
h('span',
|
||||
{ class: 'booking-user' },
|
||||
h('span',
|
||||
{ class: 'booking-user' },
|
||||
`预约人:${booking.bookingName}`
|
||||
),
|
||||
h('span',
|
||||
{ class: 'booking-dept' },
|
||||
h('span',
|
||||
{ class: 'booking-dept' },
|
||||
`单位:${booking.deptName}`
|
||||
),
|
||||
h('span',
|
||||
{ class: 'booking-subject' },
|
||||
h('span',
|
||||
{ class: 'booking-subject' },
|
||||
`主题:${booking.subject}`
|
||||
)
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
// 随机浅色背景色生成函数
|
||||
function getRandomBgColor() {
|
||||
const r = Math.floor(200 + Math.random() * 55);
|
||||
const g = Math.floor(200 + Math.random() * 55);
|
||||
const b = Math.floor(200 + Math.random() * 55);
|
||||
return {
|
||||
background: `rgba(${r},${g},${b},0.5)`,
|
||||
borderRadius: '6px',
|
||||
padding: '60px 10px',
|
||||
transition: 'background 0.3s'
|
||||
};
|
||||
}
|
||||
|
||||
// 表格列配置
|
||||
interface TableRecord {
|
||||
time: string;
|
||||
@ -170,43 +233,54 @@ interface TableRecord {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
// 会议室列补全到7个
|
||||
function getFullRoomList() {
|
||||
const rooms = roomList.value.slice();
|
||||
const count = rooms.length;
|
||||
if (viewMode.value === 'date' && count < 7) {
|
||||
for (let i = count; i < 7; i++) {
|
||||
rooms.push({ id: `empty_${i}`, name: '' });
|
||||
}
|
||||
}
|
||||
return rooms;
|
||||
}
|
||||
|
||||
const columns = computed<TableColumnType<TableRecord>[]>(() => {
|
||||
const baseColumns: TableColumnType<TableRecord>[] = [{
|
||||
title: '时间',
|
||||
dataIndex: 'time',
|
||||
dataIndex: 'slot',
|
||||
key: 'slot',
|
||||
width: 100,
|
||||
fixed: 'left' as const
|
||||
}];
|
||||
|
||||
const dynamicColumns: TableColumnType<TableRecord>[] = viewMode.value === 'date'
|
||||
? roomList.value.map(room => ({
|
||||
title: room.name,
|
||||
dataIndex: room.id,
|
||||
? getFullRoomList().map(room => ({
|
||||
title: room.name || ' ',
|
||||
dataIndex: room.name,
|
||||
key: room.name,
|
||||
width: 200,
|
||||
customRender: ({ record }) => {
|
||||
const booking = getCellBooking(room.name, record.time);
|
||||
return booking ? renderBookingCell(booking) : null;
|
||||
}
|
||||
}))
|
||||
: weekDates.value.map(date => ({
|
||||
title: dayjs(date).format('MM-DD'),
|
||||
title: dayjs(date).format('YYYY-MM-DD'),
|
||||
dataIndex: date,
|
||||
key: date,
|
||||
width: 200,
|
||||
customRender: ({ record }) => {
|
||||
const booking = getCellBooking(date, record.time);
|
||||
return booking ? renderBookingCell(booking) : null;
|
||||
}
|
||||
}));
|
||||
|
||||
return [...baseColumns, ...dynamicColumns];
|
||||
});
|
||||
|
||||
// 表格数据
|
||||
const tableData = computed<TableRecord[]>(() => {
|
||||
return timeSlots.map(time => ({
|
||||
time,
|
||||
key: time,
|
||||
}));
|
||||
const slots = ['上午', '下午'];
|
||||
return slots.map(slot => {
|
||||
const row: any = { slot };
|
||||
const cols = viewMode.value === 'date'
|
||||
? getFullRoomList().map(room => room.name)
|
||||
: weekDates.value;
|
||||
cols.forEach(col => {
|
||||
row[col] = bookingTable.value[slot]?.[col] || null;
|
||||
});
|
||||
return row;
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
@ -224,8 +298,6 @@ onMounted(() => {
|
||||
<Radio.Button value="date">按日期</Radio.Button>
|
||||
<Radio.Button value="room">按会议室</Radio.Button>
|
||||
</Radio.Group>
|
||||
|
||||
<!-- 按会议室视图的下拉选择 -->
|
||||
<Select
|
||||
v-if="viewMode === 'room'"
|
||||
v-model:value="selectedRoom"
|
||||
@ -233,7 +305,7 @@ onMounted(() => {
|
||||
placeholder="请选择会议室"
|
||||
@change="handleRoomChange"
|
||||
>
|
||||
<Select.Option
|
||||
<Select.Option
|
||||
v-for="room in roomList"
|
||||
:key="room.id"
|
||||
:value="room.id"
|
||||
@ -241,59 +313,68 @@ onMounted(() => {
|
||||
{{ room.name }}
|
||||
</Select.Option>
|
||||
</Select>
|
||||
|
||||
<!-- 按日期视图的日期选择 -->
|
||||
<div v-if="viewMode === 'date'" class="date-buttons">
|
||||
<Button
|
||||
v-for="date in weekDates"
|
||||
:key="date"
|
||||
:type="date === selectedDate ? 'primary' : 'default'"
|
||||
@click="handleDateChange(date)"
|
||||
>
|
||||
{{ dayjs(date).format('MM-DD') }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日程表格 -->
|
||||
<div v-if="viewMode === 'date'" class="date-buttons">
|
||||
<Button
|
||||
v-for="date in weekDates"
|
||||
:key="date"
|
||||
:type="date === selectedDate ? 'primary' : 'default'"
|
||||
@click="handleDateChange(date)"
|
||||
>
|
||||
{{ dayjs(date).format('YYYY-MM-DD') }}
|
||||
</Button>
|
||||
</div>
|
||||
<Table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:pagination="false"
|
||||
bordered
|
||||
:scroll="{ x: 'max-content' }"
|
||||
/>
|
||||
:loading="loading"
|
||||
tableLayout="fixed"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex !== 'slot'">
|
||||
<div
|
||||
v-if="record[column.dataIndex]"
|
||||
:style="getRandomBgColor()"
|
||||
>
|
||||
<div>预约人:{{ record[column.dataIndex].personName }}</div>
|
||||
<div>单位:{{ record[column.dataIndex].unitName }}</div>
|
||||
</div>
|
||||
<div v-else></div>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.conference-view {
|
||||
padding: 16px;
|
||||
|
||||
.control-panel {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.room-select {
|
||||
width: 200px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.date-buttons {
|
||||
margin-top: 16px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
:deep(.ant-btn) {
|
||||
margin-right: 8px;
|
||||
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.booking-cell {
|
||||
background: #e6f7ff;
|
||||
padding: 8px;
|
||||
@ -302,29 +383,33 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
|
||||
|
||||
&.booking-user {
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
&.booking-dept {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
&.booking-subject {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
background: #bae7ff;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody > tr > td:first-child) {
|
||||
padding: 10px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
231
apps/web-antd/src/views/sis/elevatorInfo/data.ts
Normal file
@ -0,0 +1,231 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'elevatorCode',
|
||||
label: '电梯编号',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'elevatorName',
|
||||
label: '电梯名称',
|
||||
},
|
||||
];
|
||||
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// export const columns: () => VxeGridProps['columns'] = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '电梯编号',
|
||||
field: 'elevatorCode',
|
||||
},
|
||||
{
|
||||
title: '电梯名称',
|
||||
field: 'elevatorName',
|
||||
},
|
||||
{
|
||||
title: '安装位置',
|
||||
field: 'location',
|
||||
},
|
||||
{
|
||||
title: '品牌',
|
||||
field: 'brand',
|
||||
},
|
||||
{
|
||||
title: '型号',
|
||||
field: 'model',
|
||||
},
|
||||
{
|
||||
title: '生产日期',
|
||||
field: 'manufactureDate',
|
||||
},
|
||||
{
|
||||
title: '安装日期',
|
||||
field: 'installationDate',
|
||||
},
|
||||
{
|
||||
title: '最大载重(kg)',
|
||||
field: 'maxLoad',
|
||||
},
|
||||
{
|
||||
title: '服务楼层数',
|
||||
field: 'floorsServed',
|
||||
},
|
||||
{
|
||||
title: '维保公司',
|
||||
field: 'maintenanceCompany',
|
||||
},
|
||||
/*{
|
||||
title: '维保电话',
|
||||
field: 'maintenancePhone',
|
||||
},
|
||||
{
|
||||
title: '上次年检日期',
|
||||
field: 'lastInspectionDate',
|
||||
},
|
||||
{
|
||||
title: '下次年检日期',
|
||||
field: 'nextInspectionDate',
|
||||
},*/
|
||||
{
|
||||
title: '梯控厂商',
|
||||
field: 'controlFactory',
|
||||
},
|
||||
{
|
||||
title: '梯控ip',
|
||||
field: 'controlIp',
|
||||
},
|
||||
{
|
||||
title: '梯控端口',
|
||||
field: 'controlPort',
|
||||
},
|
||||
{
|
||||
title: '梯控账号',
|
||||
field: 'controlAccount',
|
||||
},
|
||||
{
|
||||
title: '梯控密码',
|
||||
field: 'controlPwd',
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
fixed: 'right',
|
||||
slots: { default: 'action' },
|
||||
title: '操作',
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
|
||||
export const modalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: '',
|
||||
fieldName: 'elevatorId',
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
show: () => false,
|
||||
triggerFields: [''],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '电梯名称',
|
||||
fieldName: 'elevatorName',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'TreeSelect',
|
||||
fieldName: 'unitId',
|
||||
defaultValue: undefined,
|
||||
label: '社区建筑',
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
label: '安装位置',
|
||||
fieldName: 'location',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '品牌',
|
||||
fieldName: 'brand',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '型号',
|
||||
fieldName: 'model',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '生产日期',
|
||||
fieldName: 'manufactureDate',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '安装日期',
|
||||
fieldName: 'installationDate',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '最大载重(kg)',
|
||||
fieldName: 'maxLoad',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '服务楼层数',
|
||||
fieldName: 'floorsServed',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '维保公司',
|
||||
fieldName: 'maintenanceCompany',
|
||||
component: 'Input',
|
||||
},
|
||||
/* {
|
||||
label: '维保电话',
|
||||
fieldName: 'maintenancePhone',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '上次年检日期',
|
||||
fieldName: 'lastInspectionDate',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '下次年检日期',
|
||||
fieldName: 'nextInspectionDate',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
},*/
|
||||
{
|
||||
label: '梯控厂商',
|
||||
fieldName: 'controlFactory',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '梯控ip',
|
||||
fieldName: 'controlIp',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '梯控端口',
|
||||
fieldName: 'controlPort',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '梯控账号',
|
||||
fieldName: 'controlAccount',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '梯控密码',
|
||||
fieldName: 'controlPwd',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
];
|
142
apps/web-antd/src/views/sis/elevatorInfo/elevatorInfo-modal.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep, getPopupContainer, handleNode } from '@vben/utils';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { elevatorInfoAdd, elevatorInfoInfo, elevatorInfoUpdate } from '#/api/sis/elevatorInfo';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
|
||||
import { modalSchema } from './data';
|
||||
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 [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-1',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 100,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
}
|
||||
},
|
||||
schema: modalSchema(),
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
{
|
||||
initializedGetter: defaultFormValueGetter(formApi),
|
||||
currentGetter: defaultFormValueGetter(formApi),
|
||||
},
|
||||
);
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[60%]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
onClosed: handleClosed,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
setupCommunitySelect()
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await elevatorInfoInfo(id);
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
await markInitialized();
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.lock(true);
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
await (isUpdate.value ? elevatorInfoUpdate(data) : elevatorInfoAdd(data));
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化城市
|
||||
*/
|
||||
async function setupCommunitySelect() {
|
||||
const areaList = await communityTree(3);
|
||||
// 选中后显示在输入框的值 即父节点 / 子节点
|
||||
// addFullName(areaList, 'areaName', ' / ');
|
||||
const splitStr = '/';
|
||||
handleNode(areaList, 'label', splitStr, function (node: any) {
|
||||
if (node.level != 3) {
|
||||
node.disabled = true;
|
||||
}
|
||||
});
|
||||
formApi.updateSchema([
|
||||
{
|
||||
componentProps: () => ({
|
||||
class: 'w-full',
|
||||
fieldNames: {
|
||||
key: 'id',
|
||||
label: 'label',
|
||||
value: 'code',
|
||||
children: 'children',
|
||||
},
|
||||
getPopupContainer,
|
||||
placeholder: '请选择建筑',
|
||||
showSearch: true,
|
||||
treeData: areaList,
|
||||
treeDefaultExpandAll: true,
|
||||
treeLine: { showLeafIcon: false },
|
||||
// 筛选的字段
|
||||
treeNodeFilterProp: 'label',
|
||||
// 选中后显示在输入框的值
|
||||
treeNodeLabelProp: 'fullName',
|
||||
}),
|
||||
fieldName: 'unitId',
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm />
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
182
apps/web-antd/src/views/sis/elevatorInfo/index.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<script setup lang="ts">
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
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 dayjs from 'dayjs';
|
||||
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
vxeCheckboxChecked,
|
||||
type VxeGridProps
|
||||
} from '#/adapter/vxe-table';
|
||||
|
||||
import {
|
||||
elevatorInfoExport,
|
||||
elevatorInfoList,
|
||||
elevatorInfoRemove,
|
||||
} from '#/api/sis/elevatorInfo';
|
||||
import type { ElevatorInfoForm } from '#/api/sis/elevatorInfo/model';
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
|
||||
import elevatorInfoModal from './elevatorInfo-modal.vue';
|
||||
import { columns, querySchema } from './data';
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
commonConfig: {
|
||||
labelWidth: 80,
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
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 = {
|
||||
checkboxConfig: {
|
||||
// 高亮
|
||||
highlight: true,
|
||||
// 翻页时保留选中状态
|
||||
reserve: true,
|
||||
// 点击行选中
|
||||
// trigger: 'row',
|
||||
},
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// columns: columns(),
|
||||
columns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues = {}) => {
|
||||
return await elevatorInfoList({
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'elevatorId',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'sis-elevatorInfo-index'
|
||||
};
|
||||
|
||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
});
|
||||
|
||||
const [ElevatorInfoModal, modalApi] = useVbenModal({
|
||||
connectedComponent: elevatorInfoModal,
|
||||
});
|
||||
|
||||
function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleEdit(row: Required<ElevatorInfoForm>) {
|
||||
modalApi.setData({ id: row.elevatorId });
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleDelete(row: Required<ElevatorInfoForm>) {
|
||||
await elevatorInfoRemove(row.elevatorId);
|
||||
await tableApi.query();
|
||||
}
|
||||
|
||||
function handleMultiDelete() {
|
||||
const rows = tableApi.grid.getCheckboxRecords();
|
||||
const ids = rows.map((row: Required<ElevatorInfoForm>) => row.elevatorId);
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
okType: 'danger',
|
||||
content: `确认删除选中的${ids.length}条记录吗?`,
|
||||
onOk: async () => {
|
||||
await elevatorInfoRemove(ids);
|
||||
await tableApi.query();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleDownloadExcel() {
|
||||
commonDownloadExcel(elevatorInfoExport, '电梯基本信息数据', tableApi.formApi.form.values, {
|
||||
fieldMappingTime: formOptions.fieldMappingTime,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page :auto-content-height="true">
|
||||
<BasicTable table-title="电梯基本信息列表">
|
||||
<template #toolbar-tools>
|
||||
<Space>
|
||||
<a-button
|
||||
v-access:code="['sis:elevatorInfo:export']"
|
||||
@click="handleDownloadExcel"
|
||||
>
|
||||
{{ $t('pages.common.export') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
danger
|
||||
type="primary"
|
||||
v-access:code="['sis:elevatorInfo:remove']"
|
||||
@click="handleMultiDelete">
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
v-access:code="['sis:elevatorInfo:add']"
|
||||
@click="handleAdd"
|
||||
>
|
||||
{{ $t('pages.common.add') }}
|
||||
</a-button>
|
||||
</Space>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
v-access:code="['sis:elevatorInfo:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
>
|
||||
{{ $t('pages.common.edit') }}
|
||||
</ghost-button>
|
||||
<Popconfirm
|
||||
:get-popup-container="getVxePopupContainer"
|
||||
placement="left"
|
||||
title="确认删除?"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<ghost-button
|
||||
danger
|
||||
v-access:code="['sis:elevatorInfo:remove']"
|
||||
@click.stop=""
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</ghost-button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<ElevatorInfoModal @reload="tableApi.query()" />
|
||||
</Page>
|
||||
</template>
|
@ -114,5 +114,10 @@
|
||||
"canvas",
|
||||
"node-gyp"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons-vue": "^7.0.1",
|
||||
"ant-design-vue": "^4.2.6",
|
||||
"postcss-antd-fixes": "^0.2.0"
|
||||
}
|
||||
}
|
||||
|
@ -1,4 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
<!-- <script setup lang="ts">
|
||||
import type { ToolbarType } from './types';
|
||||
|
||||
import { preferences, usePreferences } from '@vben/preferences';
|
||||
@ -34,12 +34,122 @@ withDefaults(defineProps<Props>(), {
|
||||
|
||||
const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
|
||||
usePreferences();
|
||||
</script> -->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '../../../../../apps/web-antd/src/store'
|
||||
import { Checkbox } from 'ant-design-vue';
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// 响应式数据
|
||||
const username = ref('admin')
|
||||
const password = ref('admin123')
|
||||
const rememberMe = ref(false)
|
||||
|
||||
// 页面加载时恢复用户名
|
||||
onMounted(() => {
|
||||
const savedUser = localStorage.getItem('rememberedUser')
|
||||
if (savedUser) {
|
||||
username.value = savedUser
|
||||
rememberMe.value = true
|
||||
}
|
||||
})
|
||||
|
||||
// 登录逻辑
|
||||
const login = () => {
|
||||
// 验证输入
|
||||
if (!username.value.trim()) {
|
||||
alert('请输入用户名')
|
||||
return
|
||||
}
|
||||
|
||||
if (!password.value.trim()) {
|
||||
alert('请输入密码')
|
||||
return
|
||||
}
|
||||
|
||||
// 模拟登录请求
|
||||
console.log('正在登录...', { username: username.value, password: password.value })
|
||||
|
||||
setTimeout(() => {
|
||||
alert('登录成功!')
|
||||
|
||||
// 存储用户名
|
||||
if (rememberMe.value) {
|
||||
localStorage.setItem('rememberedUser', username.value)
|
||||
} else {
|
||||
localStorage.removeItem('rememberedUser')
|
||||
}
|
||||
|
||||
// 跳转页面
|
||||
router.push('/navigation')
|
||||
}, 800)
|
||||
}
|
||||
const handleAccountLogin = async () => {
|
||||
try {
|
||||
// const requestParam: any = omit(values, ['code']);
|
||||
// 登录
|
||||
await authStore.authLogin({
|
||||
grantType: "password",
|
||||
password: password.value,
|
||||
tenantId: "000000",
|
||||
username: username.value,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-bg">
|
||||
<div class="login-wapter">
|
||||
<div class="login-wapter1">欢迎登录</div>
|
||||
<div class="login-wapter2">南川区综合服务中心数智平台</div>
|
||||
</div>
|
||||
<div class="login-bg_1">
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
|
||||
<div class="login-form">
|
||||
<h3>用户登录</h3>
|
||||
<!-- 用户名输入 -->
|
||||
<div class="input-group">
|
||||
<img src="../../../../../apps/web-antd/src/assets/my.png" alt="User Icon" class="input-icon">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="请输入您的用户名"
|
||||
v-model="username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 密码输入 -->
|
||||
<div class="input-group">
|
||||
<img src="../../../../../apps/web-antd/src/assets/mima.png" alt="Password Icon" class="input-icon">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="请输入您的密码"
|
||||
v-model="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 记住密码 -->
|
||||
<!-- <div class="remember-me">
|
||||
<Checkbox v-model:checked="rememberMe">记住密码</Checkbox>
|
||||
</div> -->
|
||||
<!-- 登录按钮 -->
|
||||
<button @click="handleAccountLogin">点 击 登 录</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:class="[isDark ? 'dark' : '']"
|
||||
class="flex min-h-full flex-1 select-none overflow-x-hidden"
|
||||
style="display: none;"
|
||||
>
|
||||
<template v-if="toolbar">
|
||||
<slot name="toolbar">
|
||||
@ -137,7 +247,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<!-- <style scoped>
|
||||
.login-background {
|
||||
background: linear-gradient(
|
||||
154deg,
|
||||
@ -159,4 +269,148 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
|
||||
filter: blur(100px);
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
<style scoped>
|
||||
.login-bg {
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background:
|
||||
url('../../../../../apps/web-antd/src/assets/juxing.png') no-repeat center center fixed,
|
||||
url('../../../../../apps/web-antd/src/assets/222.gif');
|
||||
background-size: cover, cover;
|
||||
color: #fff;
|
||||
}
|
||||
.login-bg_1 {
|
||||
flex: 1 1 auto;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background: url('../../../../../apps/web-antd/src/assets/from.png') no-repeat center center fixed;
|
||||
}
|
||||
.login-wapter{
|
||||
.login-wapter1 {
|
||||
font-size: 36px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-wapter2 {
|
||||
font-size: 50px;
|
||||
margin-bottom: 38px;
|
||||
color: #ccc;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.login-form {
|
||||
border-radius: 10px;
|
||||
padding: 45px;
|
||||
width: 397px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login-form h3 {
|
||||
font-size: 26px;
|
||||
margin-bottom: 40px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.login-form input {
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #fff; /* 设置边框线为白色 */
|
||||
border-radius: 2px;
|
||||
width: 364px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
-webkit-text-fill-color: #fff;
|
||||
}
|
||||
input:-webkit-autofill {
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
.login-form label {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
margin-top: 5px;
|
||||
margin-left: 7px;
|
||||
font-size: 16px;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.login-form button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-top: 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #19DCF8;
|
||||
color: #0254A5;
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
margin-top: 70px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.login-form button:hover {
|
||||
background-color: #00aaff;
|
||||
}
|
||||
|
||||
.remember-me {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 25px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 新增 .input-group 样式 */
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
padding: 0px 10px 10px 10px;
|
||||
pointer-events: none; /* 确保用户不能点击图标 */
|
||||
position: absolute;
|
||||
/* top: 17px; */
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.login-form input {
|
||||
height: 40px;
|
||||
line-height: 40px; /* 必须与 height 一致 */
|
||||
padding-left: 33px;
|
||||
border: 0.1px solid rgba(255, 255, 255, 0.44);
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
.login-form input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.42); /* 例如灰色 */
|
||||
}
|
||||
</style>
|
||||
|