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
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
This commit is contained in:
@@ -5,7 +5,7 @@ export interface ShiftVO {
|
||||
/**
|
||||
* 主键id
|
||||
*/
|
||||
id: string | number;
|
||||
id: string;
|
||||
|
||||
/**
|
||||
* 班次名称
|
||||
|
@@ -0,0 +1,61 @@
|
||||
import type { FeedbacksVO, FeedbacksForm, FeedbacksQuery } 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 feedbacksList(params?: FeedbacksQuery) {
|
||||
return requestClient.get<PageResult<FeedbacksVO>>('/system/feedbacks/list', { params });
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出意见反馈列表
|
||||
* @param params
|
||||
* @returns 意见反馈列表
|
||||
*/
|
||||
export function feedbacksExport(params?: FeedbacksQuery) {
|
||||
return commonExport('/system/feedbacks/export', params ?? {});
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询意见反馈详情
|
||||
* @param id id
|
||||
* @returns 意见反馈详情
|
||||
*/
|
||||
export function feedbacksInfo(id: ID) {
|
||||
return requestClient.get<FeedbacksVO>(`/system/feedbacks/${id}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增意见反馈
|
||||
* @param data
|
||||
* @returns void
|
||||
*/
|
||||
export function feedbacksAdd(data: FeedbacksForm) {
|
||||
return requestClient.postWithMsg<void>('/system/feedbacks', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新意见反馈
|
||||
* @param data
|
||||
* @returns void
|
||||
*/
|
||||
export function feedbacksUpdate(data: FeedbacksForm) {
|
||||
return requestClient.putWithMsg<void>('/system/feedbacks', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除意见反馈
|
||||
* @param id id
|
||||
* @returns void
|
||||
*/
|
||||
export function feedbacksRemove(id: ID | IDS) {
|
||||
return requestClient.deleteWithMsg<void>(`/system/feedbacks/${id}`);
|
||||
}
|
159
apps/web-antd/src/api/property/customerService/feedbacks/model.d.ts
vendored
Normal file
159
apps/web-antd/src/api/property/customerService/feedbacks/model.d.ts
vendored
Normal file
@@ -0,0 +1,159 @@
|
||||
import type { PageQuery, BaseEntity } from '#/api/common';
|
||||
|
||||
export interface FeedbacksVO {
|
||||
/**
|
||||
* 主键
|
||||
*/
|
||||
id: string | number;
|
||||
|
||||
/**
|
||||
* 反馈类型(0保修1保洁2会议)
|
||||
*/
|
||||
feedbackType: string;
|
||||
|
||||
/**
|
||||
* 反馈人
|
||||
*/
|
||||
feedbackPersion: number;
|
||||
|
||||
/**
|
||||
* 反馈人电话
|
||||
*/
|
||||
feedbackPersionPhone: string;
|
||||
|
||||
/**
|
||||
* 反馈内容
|
||||
*/
|
||||
feedbackContent: string;
|
||||
|
||||
/**
|
||||
* 反馈位置
|
||||
*/
|
||||
feedbackLocation: string;
|
||||
|
||||
/**
|
||||
* 反馈图片
|
||||
*/
|
||||
feedbackImg: string;
|
||||
|
||||
/**
|
||||
* 是否转至工单
|
||||
*/
|
||||
isWorkOrder: string;
|
||||
|
||||
/**
|
||||
* 状态(1待处理2处理中3处理完成)
|
||||
*/
|
||||
status: string;
|
||||
|
||||
/**
|
||||
* 客服电话
|
||||
*/
|
||||
serviceName: string;
|
||||
|
||||
}
|
||||
|
||||
export interface FeedbacksForm extends BaseEntity {
|
||||
/**
|
||||
* 主键
|
||||
*/
|
||||
id?: string | number;
|
||||
|
||||
/**
|
||||
* 反馈类型(0保修1保洁2会议)
|
||||
*/
|
||||
feedbackType?: string;
|
||||
|
||||
/**
|
||||
* 反馈人
|
||||
*/
|
||||
feedbackPersion?: number;
|
||||
|
||||
/**
|
||||
* 反馈人电话
|
||||
*/
|
||||
feedbackPersionPhone?: string;
|
||||
|
||||
/**
|
||||
* 反馈内容
|
||||
*/
|
||||
feedbackContent?: string;
|
||||
|
||||
/**
|
||||
* 反馈位置
|
||||
*/
|
||||
feedbackLocation?: string;
|
||||
|
||||
/**
|
||||
* 反馈图片
|
||||
*/
|
||||
feedbackImg?: string;
|
||||
|
||||
/**
|
||||
* 是否转至工单
|
||||
*/
|
||||
isWorkOrder?: string;
|
||||
|
||||
/**
|
||||
* 状态(1待处理2处理中3处理完成)
|
||||
*/
|
||||
status?: string;
|
||||
|
||||
/**
|
||||
* 客服电话
|
||||
*/
|
||||
serviceName?: string;
|
||||
|
||||
}
|
||||
|
||||
export interface FeedbacksQuery extends PageQuery {
|
||||
/**
|
||||
* 反馈类型(0保修1保洁2会议)
|
||||
*/
|
||||
feedbackType?: string;
|
||||
|
||||
/**
|
||||
* 反馈人
|
||||
*/
|
||||
feedbackPersion?: number;
|
||||
|
||||
/**
|
||||
* 反馈人电话
|
||||
*/
|
||||
feedbackPersionPhone?: string;
|
||||
|
||||
/**
|
||||
* 反馈内容
|
||||
*/
|
||||
feedbackContent?: string;
|
||||
|
||||
/**
|
||||
* 反馈位置
|
||||
*/
|
||||
feedbackLocation?: string;
|
||||
|
||||
/**
|
||||
* 反馈图片
|
||||
*/
|
||||
feedbackImg?: string;
|
||||
|
||||
/**
|
||||
* 是否转至工单
|
||||
*/
|
||||
isWorkOrder?: string;
|
||||
|
||||
/**
|
||||
* 状态(1待处理2处理中3处理完成)
|
||||
*/
|
||||
status?: string;
|
||||
|
||||
/**
|
||||
* 客服电话
|
||||
*/
|
||||
serviceName?: string;
|
||||
|
||||
/**
|
||||
* 日期范围参数
|
||||
*/
|
||||
params?: any;
|
||||
}
|
@@ -1,70 +1,75 @@
|
||||
import type { PageQuery, BaseEntity } from '#/api/common';
|
||||
import type { PageQuery, BaseEntity } from '#/api/common'
|
||||
|
||||
export interface PersonVO {
|
||||
/**
|
||||
* 主键id
|
||||
*/
|
||||
id: string | number;
|
||||
id: string | number
|
||||
|
||||
/**
|
||||
* 用户id
|
||||
*/
|
||||
userId: string | number;
|
||||
userId: string | number
|
||||
|
||||
/**
|
||||
* 用户名称
|
||||
*/
|
||||
userName: string;
|
||||
userName: string
|
||||
|
||||
/**
|
||||
* 联系电话
|
||||
*/
|
||||
phone: string;
|
||||
phone: string
|
||||
|
||||
/**
|
||||
* 性别
|
||||
*/
|
||||
gender: number;
|
||||
gender: number
|
||||
|
||||
/**
|
||||
* 人脸图片
|
||||
*/
|
||||
img: string;
|
||||
img: string
|
||||
|
||||
/**
|
||||
* 所属单位id
|
||||
*/
|
||||
unitId: string | number;
|
||||
unitId: string | number
|
||||
|
||||
/**
|
||||
* 所属单位名称
|
||||
*/
|
||||
unitName: string;
|
||||
unitName: string
|
||||
|
||||
/**
|
||||
* 入驻位置
|
||||
*/
|
||||
locathon: string;
|
||||
locathon: string
|
||||
|
||||
/**
|
||||
* 入驻时间
|
||||
*/
|
||||
time: string;
|
||||
time: string
|
||||
|
||||
/**
|
||||
* 车牌号码
|
||||
*/
|
||||
carNumber: string;
|
||||
carNumber: string
|
||||
|
||||
/**
|
||||
* 状态
|
||||
*/
|
||||
state: number|string;
|
||||
state: number | string
|
||||
|
||||
/**
|
||||
* 备注
|
||||
*/
|
||||
remark: string;
|
||||
remark: string
|
||||
|
||||
/**
|
||||
* 权限组id
|
||||
*/
|
||||
authGroupId?: string | number
|
||||
|
||||
}
|
||||
|
||||
@@ -72,67 +77,72 @@ export interface PersonForm extends BaseEntity {
|
||||
/**
|
||||
* 主键id
|
||||
*/
|
||||
id?: string | number;
|
||||
id?: string | number
|
||||
|
||||
/**
|
||||
* 用户id
|
||||
*/
|
||||
userId?: string | number;
|
||||
userId?: string | number
|
||||
|
||||
/**
|
||||
* 用户名称
|
||||
*/
|
||||
userName?: string;
|
||||
userName?: string
|
||||
|
||||
/**
|
||||
* 联系电话
|
||||
*/
|
||||
phone?: string;
|
||||
phone?: string
|
||||
|
||||
/**
|
||||
* 性别
|
||||
*/
|
||||
gender?: number;
|
||||
gender?: number
|
||||
|
||||
/**
|
||||
* 人脸图片
|
||||
*/
|
||||
img?: string;
|
||||
img?: string
|
||||
|
||||
/**
|
||||
* 所属单位id
|
||||
*/
|
||||
unitId?: string | number;
|
||||
unitId?: string | number
|
||||
|
||||
/**
|
||||
* 所属单位名称
|
||||
*/
|
||||
unitName?: string;
|
||||
unitName?: string
|
||||
|
||||
/**
|
||||
* 入驻位置
|
||||
*/
|
||||
locathon?: string;
|
||||
locathon?: string
|
||||
|
||||
/**
|
||||
* 入驻时间
|
||||
*/
|
||||
time?: string;
|
||||
time?: string
|
||||
|
||||
/**
|
||||
* 车牌号码
|
||||
*/
|
||||
carNumber?: string;
|
||||
carNumber?: string
|
||||
|
||||
/**
|
||||
* 状态
|
||||
*/
|
||||
state?: number;
|
||||
state?: number
|
||||
|
||||
/**
|
||||
* 备注
|
||||
*/
|
||||
remark?: string;
|
||||
remark?: string
|
||||
|
||||
/**
|
||||
* 权限组id
|
||||
*/
|
||||
authGroupId?: string | number
|
||||
|
||||
}
|
||||
|
||||
@@ -140,128 +150,128 @@ export interface PersonQuery extends PageQuery {
|
||||
/**
|
||||
* 用户id
|
||||
*/
|
||||
userId?: string | number;
|
||||
userId?: string | number
|
||||
|
||||
/**
|
||||
* 用户名称
|
||||
*/
|
||||
userName?: string;
|
||||
userName?: string
|
||||
|
||||
/**
|
||||
* 联系电话
|
||||
*/
|
||||
phone?: string;
|
||||
phone?: string
|
||||
|
||||
/**
|
||||
* 性别
|
||||
*/
|
||||
gender?: number;
|
||||
gender?: number
|
||||
|
||||
/**
|
||||
* 人脸图片
|
||||
*/
|
||||
img?: string;
|
||||
img?: string
|
||||
|
||||
/**
|
||||
* 所属单位id
|
||||
*/
|
||||
unitId?: string | number;
|
||||
unitId?: string | number
|
||||
|
||||
/**
|
||||
* 所属单位名称
|
||||
*/
|
||||
unitName?: string;
|
||||
unitName?: string
|
||||
|
||||
/**
|
||||
* 入驻位置
|
||||
*/
|
||||
locathon?: string;
|
||||
locathon?: string
|
||||
|
||||
/**
|
||||
* 入驻时间
|
||||
*/
|
||||
time?: string;
|
||||
time?: string
|
||||
|
||||
/**
|
||||
* 车牌号码
|
||||
*/
|
||||
carNumber?: string;
|
||||
carNumber?: string
|
||||
|
||||
/**
|
||||
* 状态
|
||||
*/
|
||||
state?: number;
|
||||
state?: number
|
||||
|
||||
/**
|
||||
* 日期范围参数
|
||||
*/
|
||||
params?: any;
|
||||
params?: any
|
||||
}
|
||||
|
||||
export interface Person extends BaseEntity{
|
||||
export interface Person extends BaseEntity {
|
||||
/**
|
||||
* 主键id
|
||||
*/
|
||||
id: string | number;
|
||||
id: string | number
|
||||
|
||||
/**
|
||||
* 用户id
|
||||
*/
|
||||
userId: string | number;
|
||||
userId: string | number
|
||||
|
||||
/**
|
||||
* 用户名称
|
||||
*/
|
||||
userName: string;
|
||||
userName: string
|
||||
|
||||
/**
|
||||
* 联系电话
|
||||
*/
|
||||
phone: string;
|
||||
phone: string
|
||||
|
||||
/**
|
||||
* 性别
|
||||
*/
|
||||
gender: number;
|
||||
gender: number
|
||||
|
||||
/**
|
||||
* 人脸图片
|
||||
*/
|
||||
img: string;
|
||||
img: string
|
||||
|
||||
/**
|
||||
* 所属单位id
|
||||
*/
|
||||
unitId: string | number;
|
||||
unitId: string | number
|
||||
|
||||
/**
|
||||
* 所属单位名称
|
||||
*/
|
||||
unitName: string;
|
||||
unitName: string
|
||||
|
||||
/**
|
||||
* 入驻位置
|
||||
*/
|
||||
locathon: string;
|
||||
locathon: string
|
||||
|
||||
/**
|
||||
* 入驻时间
|
||||
*/
|
||||
time: string;
|
||||
time: string
|
||||
|
||||
/**
|
||||
* 车牌号码
|
||||
*/
|
||||
carNumber: string;
|
||||
carNumber: string
|
||||
|
||||
/**
|
||||
* 状态
|
||||
*/
|
||||
state: number;
|
||||
state: number
|
||||
|
||||
/**
|
||||
* 备注
|
||||
*/
|
||||
remark: string;
|
||||
remark: string
|
||||
|
||||
}
|
||||
|
@@ -56,6 +56,16 @@ export interface Resident_unitVO {
|
||||
*/
|
||||
remark: string;
|
||||
|
||||
/**
|
||||
* 权限组id
|
||||
*/
|
||||
authGroupId?: string | number;
|
||||
|
||||
/**
|
||||
* 权限组名称
|
||||
*/
|
||||
authGroupName?: string;
|
||||
|
||||
}
|
||||
|
||||
export interface Resident_unitForm extends BaseEntity {
|
||||
|
61
apps/web-antd/src/api/sis/authGroup/index.ts
Normal file
61
apps/web-antd/src/api/sis/authGroup/index.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import type { AuthGroupVO, AuthGroupForm, AuthGroupQuery } 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 authGroupList(params?: AuthGroupQuery) {
|
||||
return requestClient.get<PageResult<AuthGroupVO>>('/sis/authGroup/list', { params });
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出授权组列表
|
||||
* @param params
|
||||
* @returns 授权组列表
|
||||
*/
|
||||
export function authGroupExport(params?: AuthGroupQuery) {
|
||||
return commonExport('/sis/authGroup/export', params ?? {});
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询授权组详情
|
||||
* @param id id
|
||||
* @returns 授权组详情
|
||||
*/
|
||||
export function authGroupInfo(id: ID) {
|
||||
return requestClient.get<AuthGroupVO>(`/sis/authGroup/${id}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增授权组
|
||||
* @param data
|
||||
* @returns void
|
||||
*/
|
||||
export function authGroupAdd(data: AuthGroupForm) {
|
||||
return requestClient.postWithMsg<void>('/sis/authGroup', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新授权组
|
||||
* @param data
|
||||
* @returns void
|
||||
*/
|
||||
export function authGroupUpdate(data: AuthGroupForm) {
|
||||
return requestClient.putWithMsg<void>('/sis/authGroup', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除授权组
|
||||
* @param id id
|
||||
* @returns void
|
||||
*/
|
||||
export function authGroupRemove(id: ID | IDS) {
|
||||
return requestClient.deleteWithMsg<void>(`/sis/authGroup/${id}`);
|
||||
}
|
69
apps/web-antd/src/api/sis/authGroup/model.d.ts
vendored
Normal file
69
apps/web-antd/src/api/sis/authGroup/model.d.ts
vendored
Normal file
@@ -0,0 +1,69 @@
|
||||
import type { PageQuery, BaseEntity } from '#/api/common';
|
||||
|
||||
export interface AuthGroupVO {
|
||||
/**
|
||||
* 主键id
|
||||
*/
|
||||
id: string | number;
|
||||
|
||||
/**
|
||||
* 权限名称
|
||||
*/
|
||||
name: string;
|
||||
|
||||
/**
|
||||
* 面向对象(1-单位、2-个人)
|
||||
*/
|
||||
groupType: number;
|
||||
|
||||
/**
|
||||
* 是否启用(0:禁用,1启用)
|
||||
*/
|
||||
isEnable: boolean;
|
||||
|
||||
}
|
||||
|
||||
export interface AuthGroupForm extends BaseEntity {
|
||||
/**
|
||||
* 主键id
|
||||
*/
|
||||
id?: string | number;
|
||||
|
||||
/**
|
||||
* 权限名称
|
||||
*/
|
||||
name?: string;
|
||||
|
||||
/**
|
||||
* 面向对象(1-单位、2-个人)
|
||||
*/
|
||||
groupType?: number;
|
||||
|
||||
/**
|
||||
* 是否启用(0:禁用,1启用)
|
||||
*/
|
||||
isEnable?: boolean;
|
||||
|
||||
}
|
||||
|
||||
export interface AuthGroupQuery extends PageQuery {
|
||||
/**
|
||||
* 权限名称
|
||||
*/
|
||||
name?: string;
|
||||
|
||||
/**
|
||||
* 面向对象(1-单位、2-个人)
|
||||
*/
|
||||
groupType?: number;
|
||||
|
||||
/**
|
||||
* 是否启用(0:禁用,1启用)
|
||||
*/
|
||||
isEnable?: boolean;
|
||||
|
||||
/**
|
||||
* 日期范围参数
|
||||
*/
|
||||
params?: any;
|
||||
}
|
@@ -7,7 +7,14 @@ import { requestClient } from '#/api/request';
|
||||
* @returns 人像信息列表
|
||||
*/
|
||||
export function addStreamProxy(params?: any) {
|
||||
return requestClient.post<AddStreamProxyResult>('sis/stream//realtime/add', {
|
||||
return requestClient.post<AddStreamProxyResult>(
|
||||
'sis/stream/realtime/add',
|
||||
params,
|
||||
});
|
||||
);
|
||||
}
|
||||
export function addFFmpegStreamProxy(params?: any) {
|
||||
return requestClient.post<AddStreamProxyResult>(
|
||||
'sis/stream/realtime/addFfmpeg',
|
||||
params,
|
||||
);
|
||||
}
|
||||
|
@@ -0,0 +1,218 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, shallowRef } from 'vue';
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Descriptions,
|
||||
DescriptionsItem,
|
||||
Table,
|
||||
} 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 { groupInfo } from '#/api/property/attendanceManagement/attendanceGroupSettings';
|
||||
import type { GroupVO } from '#/api/property/attendanceManagement/attendanceGroupSettings/model';
|
||||
import {
|
||||
infoCycleColumns,
|
||||
infoClockingColumns,
|
||||
infoNoClockingColumns,
|
||||
infoWeekdayColumns,
|
||||
} from '#/views/property/attendanceManagement/attendanceGroupSettings/data';
|
||||
import holidayCalendar from './holiday-calendar.vue';
|
||||
|
||||
dayjs.extend(duration);
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
onOpenChange: handleOpenChange,
|
||||
onClosed() {
|
||||
groupDetail.value = null;
|
||||
},
|
||||
});
|
||||
|
||||
const groupDetail = shallowRef<null | GroupVO>(null);
|
||||
|
||||
const weekdayData = ref<any[]>([]);
|
||||
const cycleData = ref<any[]>([]);
|
||||
const unCheckInData = ref<any[]>([]);
|
||||
const checkInData = ref<any[]>([]);
|
||||
|
||||
async function handleOpenChange(open: boolean) {
|
||||
if (!open) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
const { id } = modalApi.getData() as { id: number | string };
|
||||
groupDetail.value = await groupInfo(id);
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
|
||||
const [HolidayCalendar, holidayApi] = useVbenModal({
|
||||
connectedComponent: holidayCalendar,
|
||||
});
|
||||
|
||||
/**
|
||||
* 查看法定节假日日历
|
||||
*/
|
||||
async function showHoliday() {
|
||||
holidayApi.open();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal
|
||||
:footer="false"
|
||||
:fullscreen-button="false"
|
||||
title="考勤组信息"
|
||||
class="w-[70%]"
|
||||
>
|
||||
<div v-if="groupDetail" class="des-container">
|
||||
<Descriptions size="small" :column="1" :labelStyle="{ width: '100px' }">
|
||||
<DescriptionsItem label="考勤组名称">
|
||||
{{ groupDetail.groupName }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="考勤类型">
|
||||
<component
|
||||
:is="
|
||||
groupDetail.attendanceType
|
||||
? renderDict(groupDetail.attendanceType, 'wy_kqlx')
|
||||
: ''
|
||||
"
|
||||
/>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="状态">
|
||||
<component :is="renderDict(groupDetail.status, 'wy_state')" />
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem
|
||||
label="工作日设置"
|
||||
v-if="groupDetail.attendanceType == 0"
|
||||
>
|
||||
<div class="item-font" style="width: 100%">
|
||||
<Table
|
||||
style="width: 90%"
|
||||
bordered
|
||||
:columns="infoWeekdayColumns"
|
||||
:data-source="weekdayData"
|
||||
size="small"
|
||||
:pagination="false"
|
||||
>
|
||||
</Table>
|
||||
<Checkbox
|
||||
class="item-padding-top"
|
||||
v-model:checked="groupDetail.isAutomatic"
|
||||
>
|
||||
法定节假日自动排休
|
||||
</Checkbox>
|
||||
<Button type="link" @click="showHoliday">查看法定节假日日历</Button>
|
||||
<p class="item-padding-top item-font-weight">特殊日期:</p>
|
||||
<p class="item-padding">无需打卡日期:</p>
|
||||
<Table
|
||||
style="width: 75%"
|
||||
bordered
|
||||
:columns="infoNoClockingColumns"
|
||||
:data-source="unCheckInData"
|
||||
size="small"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === 'dateTime'">
|
||||
<span v-if="record.dateType == 0">{{
|
||||
record.startDate
|
||||
}}</span>
|
||||
<span v-else>{{
|
||||
record.startDate + '~' + record.endDate
|
||||
}}</span>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
<p class="item-padding">必须打卡日期:</p>
|
||||
<Table
|
||||
style="width: 75%"
|
||||
bordered
|
||||
:columns="infoClockingColumns"
|
||||
:data-source="checkInData"
|
||||
size="small"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === 'dateTime'">
|
||||
<span v-if="record.dateType == 0">{{
|
||||
record.startDate
|
||||
}}</span>
|
||||
<span v-else>{{
|
||||
record.startDate + '~' + record.endDate
|
||||
}}</span>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem
|
||||
label="排班周期"
|
||||
v-if="groupDetail.attendanceType == 1"
|
||||
>
|
||||
<p class="item-font">
|
||||
周期天数
|
||||
<span class="item-font-weight item-font-color">{{
|
||||
cycleData.length
|
||||
}}</span>
|
||||
天
|
||||
</p>
|
||||
<Table
|
||||
style="width: 80%; margin-top: 5px"
|
||||
bordered
|
||||
:columns="infoCycleColumns"
|
||||
:data-source="cycleData"
|
||||
size="small"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === 'day'">
|
||||
<span>{{ '第' + (index + 1) + '天' }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'shiftId'">
|
||||
<!-- {{item.name+'\xa0'}}-->
|
||||
<!-- <span v-if="item.isRest">{{item.startTime+'~'+item.restStartTime+'\xa0'+item.restEndTime+'~'+item.endTime}}</span>-->
|
||||
<!-- <span v-else>{{item.startTime+'~'+item.endTime}}</span>-->
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
</DescriptionsItem>
|
||||
</Descriptions>
|
||||
<HolidayCalendar></HolidayCalendar>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.des-container {
|
||||
.item-font {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.item-font-weight {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-font-color {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.item-padding-top {
|
||||
padding-top: 1.1rem;
|
||||
}
|
||||
|
||||
.item-padding {
|
||||
padding: 1.1rem 0 0.5rem 0;
|
||||
}
|
||||
|
||||
:deep(
|
||||
.ant-descriptions
|
||||
.ant-descriptions-item-container
|
||||
.ant-descriptions-item-content
|
||||
) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
@@ -14,19 +14,21 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
onConfirm: handleConfirm,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{ shiftInfo: [info: ShiftVO], shiftList: [list: ShiftVO[]] }>();
|
||||
const emit = defineEmits(['shiftInfo', 'shiftList', 'afterValue']);
|
||||
|
||||
const handleType = ref<number>(1);
|
||||
const tableLoading = ref<boolean>(true);
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.lock(true);
|
||||
if (state.selectedRowKeys.length) {
|
||||
let arr = shiftData.value.filter(item => state.selectedRowKeys.includes(item.id))
|
||||
if (handleType.value == 1 && arr.length) {
|
||||
await emit('shiftInfo', arr[0]);
|
||||
} else if (handleType.value == 2 && arr.length) {
|
||||
await emit('shiftList', arr);
|
||||
let arr = shiftData.value.filter((item: ShiftVO) => state.selectedRowKeys.includes(item.id));
|
||||
if (handleType.value === 1 && arr.length) {
|
||||
emit('shiftInfo', arr[0]);
|
||||
} else if (handleType.value === 2 && arr.length) {
|
||||
emit('shiftList', arr);
|
||||
} else if (handleType.value === 3 && arr.length) {
|
||||
emit('afterValue', arr[0]);
|
||||
}
|
||||
}
|
||||
modalApi.close();
|
||||
@@ -41,10 +43,11 @@ async function handleOpenChange(open: boolean) {
|
||||
if (!open) {
|
||||
return null;
|
||||
}
|
||||
state.selectedRowKeys = []
|
||||
handleType.value = modalApi.getData()?.type;
|
||||
await queryShiftData()
|
||||
modalApi.modalLoading(true);
|
||||
state.selectedRowKeys = []
|
||||
const {type} = await modalApi.getData() as {type:number};
|
||||
handleType.value = type;
|
||||
await queryShiftData()
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
|
||||
@@ -52,7 +55,6 @@ const shiftData = ref<ShiftVO[]>([])
|
||||
const shiftName = ref<string>('')
|
||||
|
||||
async function queryShiftData() {
|
||||
tableLoading.value = true
|
||||
let params = {
|
||||
name: shiftName.value,
|
||||
pageNum: 1,
|
||||
@@ -60,17 +62,16 @@ async function queryShiftData() {
|
||||
}
|
||||
const res = await shiftList(params)
|
||||
shiftData.value = res.rows
|
||||
tableLoading.value = false
|
||||
}
|
||||
|
||||
// 行勾选状态
|
||||
const state = reactive({
|
||||
selectedRowKeys: [],
|
||||
selectedRowKeys: [] as string[],
|
||||
});
|
||||
|
||||
// 勾选变化时的回调
|
||||
const onSelectChange = (selectedRowKeys: string[]) => {
|
||||
if (selectedRowKeys.length > 1 && handleType.value == 1) {
|
||||
if (selectedRowKeys.length > 1 && (handleType.value == 1||handleType.value == 3)) {
|
||||
state.selectedRowKeys = selectedRowKeys.slice(-1);
|
||||
} else {
|
||||
state.selectedRowKeys = selectedRowKeys;
|
||||
@@ -110,7 +111,6 @@ const resetHandle = () => {
|
||||
:pagination="false"
|
||||
rowKey="id"
|
||||
:scroll="{ y: 350 }"
|
||||
:loading="tableLoading"
|
||||
>
|
||||
<template #bodyCell="{ column, record,index }">
|
||||
<template v-if="column.dataIndex==='id'">
|
||||
|
@@ -1,16 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
import {computed, ref} from 'vue';
|
||||
import {useVbenModal} from '@vben/common-ui';
|
||||
import {cloneDeep} from '@vben/utils';
|
||||
import {useVbenForm} from '#/adapter/form';
|
||||
import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
|
||||
import {clockInModalSchema} from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
const isClockIn = ref(false);
|
||||
const emit = defineEmits(['checkIn', 'unCheckIn']);
|
||||
const isClockIn = ref(false);
|
||||
|
||||
const title = computed(() => {
|
||||
return isClockIn.value ? '必须打卡日期' : '无需打卡日期';
|
||||
return isClockIn.value ? '必须打卡日期' : '无需打卡日期';
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
@@ -26,7 +26,7 @@ const [BasicForm, formApi] = useVbenForm({
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
|
||||
{
|
||||
initializedGetter: defaultFormValueGetter(formApi),
|
||||
currentGetter: defaultFormValueGetter(formApi),
|
||||
@@ -44,8 +44,8 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
const { type } = modalApi.getData() as { type?: number };
|
||||
isClockIn.value = !!type;
|
||||
const {check} = modalApi.getData() as { check?: boolean };
|
||||
isClockIn.value = check;
|
||||
await markInitialized();
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
@@ -54,11 +54,20 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.lock(true);
|
||||
const { valid } = await formApi.validate();
|
||||
const {valid} = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
if (data.dateType == 1) {
|
||||
data.startDate = data.timeSlot[0]
|
||||
data.endDate = data.timeSlot[1]
|
||||
}
|
||||
if (isClockIn.value) {
|
||||
emit('checkIn', data)
|
||||
} else {
|
||||
emit('unCheckIn', data)
|
||||
}
|
||||
resetInitialized();
|
||||
await modalApi.close();
|
||||
} catch (error) {
|
||||
|
@@ -72,6 +72,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
fieldName: 'groupName',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
formItemClass:'col-span-1'
|
||||
},
|
||||
{
|
||||
label: '考勤类型',//(0:固定班制,1:排班制)
|
||||
@@ -82,7 +83,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
options: getDictOptions('wy_kqlx'),
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
defaultValue: '0'
|
||||
defaultValue: '0',
|
||||
},
|
||||
{
|
||||
label: '工作日设置',
|
||||
@@ -174,10 +175,10 @@ export const weekdayColumns: TableColumnsType = [
|
||||
},
|
||||
{
|
||||
title: '班次',
|
||||
key: 'shift',
|
||||
key: 'shiftValue',
|
||||
minWidth: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'shift'
|
||||
dataIndex: 'shiftValue'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
@@ -191,10 +192,10 @@ export const weekdayColumns: TableColumnsType = [
|
||||
export const noClockingColumns: TableColumnsType = [
|
||||
{
|
||||
title: '无需打卡日期',
|
||||
key: 'label',
|
||||
key: 'dateTime',
|
||||
minWidth: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'label'
|
||||
dataIndex: 'dateTime'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
@@ -208,10 +209,10 @@ export const noClockingColumns: TableColumnsType = [
|
||||
export const clockingColumns: TableColumnsType = [
|
||||
{
|
||||
title: '必须打卡日期',
|
||||
key: 'label',
|
||||
key: 'dateTime',
|
||||
minWidth: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'label'
|
||||
dataIndex: 'dateTime'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
@@ -225,17 +226,17 @@ export const clockingColumns: TableColumnsType = [
|
||||
export const cycleColumns: TableColumnsType = [
|
||||
{
|
||||
title: '天数',
|
||||
key: 'label',
|
||||
key: 'day',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
dataIndex: 'label'
|
||||
dataIndex: 'day'
|
||||
},
|
||||
{
|
||||
title: '班次',
|
||||
key: 'label',
|
||||
key: 'shiftId',
|
||||
minWidth: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'label'
|
||||
dataIndex: 'shiftId'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
@@ -271,24 +272,24 @@ export const shiftColumns = [
|
||||
];
|
||||
|
||||
const typeOptions = [
|
||||
{label: '单个日期', value: 1},
|
||||
{label: '时间段', value: 2},
|
||||
{label: '单个日期', value: 0},
|
||||
{label: '时间段', value: 1},
|
||||
];
|
||||
export const clockInModalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: '添加方式',
|
||||
fieldName: 'type',
|
||||
fieldName: 'dateType',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
options: typeOptions,
|
||||
buttonStyle: 'solid',
|
||||
},
|
||||
defaultValue:1,
|
||||
defaultValue:0,
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '日期',
|
||||
fieldName: 'singleTime',
|
||||
fieldName: 'startDate',
|
||||
component: 'DatePicker',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
@@ -296,8 +297,8 @@ export const clockInModalSchema: FormSchemaGetter = () => [
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
},
|
||||
dependencies: {
|
||||
show: (formValue) => formValue.type==1,
|
||||
triggerFields: ['type'],
|
||||
show: (formValue) => formValue.dateType==0,
|
||||
triggerFields: ['dateType'],
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -310,10 +311,64 @@ export const clockInModalSchema: FormSchemaGetter = () => [
|
||||
},
|
||||
rules: 'required',
|
||||
dependencies: {
|
||||
show: (formValue) => formValue.type==2,
|
||||
triggerFields: ['type'],
|
||||
show: (formValue) => formValue.dateType==1,
|
||||
triggerFields: ['dateType'],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
export const infoWeekdayColumns: TableColumnsType = [
|
||||
{
|
||||
title: '工作日',
|
||||
key: 'label',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
dataIndex: 'label'
|
||||
},
|
||||
{
|
||||
title: '班次',
|
||||
key: 'shiftValue',
|
||||
minWidth: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'shiftValue'
|
||||
},
|
||||
]
|
||||
|
||||
export const infoNoClockingColumns: TableColumnsType = [
|
||||
{
|
||||
title: '无需打卡日期',
|
||||
key: 'dateTime',
|
||||
minWidth: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'dateTime'
|
||||
},
|
||||
]
|
||||
|
||||
export const infoClockingColumns: TableColumnsType = [
|
||||
{
|
||||
title: '必须打卡日期',
|
||||
key: 'dateTime',
|
||||
minWidth: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'dateTime'
|
||||
},
|
||||
]
|
||||
|
||||
export const infoCycleColumns: TableColumnsType = [
|
||||
{
|
||||
title: '天数',
|
||||
key: 'day',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
dataIndex: 'day'
|
||||
},
|
||||
{
|
||||
title: '班次',
|
||||
key: 'shiftId',
|
||||
minWidth: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'shiftId'
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
@@ -20,7 +20,7 @@ import {
|
||||
noClockingColumns,
|
||||
weekdayColumns
|
||||
} from './data';
|
||||
import {Tag, Button, Table, Checkbox} from 'ant-design-vue'
|
||||
import {Tag, Button, Table, Checkbox, Select, SelectOption,message} from 'ant-design-vue'
|
||||
import {getDictOptions} from "#/utils/dict";
|
||||
import holidayCalendar from './holiday-calendar.vue'
|
||||
import changeShiftSchedule from './change-shift-schedule.vue'
|
||||
@@ -30,7 +30,6 @@ import {PlusOutlined, MinusOutlined} from '@ant-design/icons-vue';
|
||||
import type {ShiftVO} from "#/api/property/attendanceManagement/shiftSetting/model";
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const weekdayData = ref<any[]>([])
|
||||
const title = computed(() => {
|
||||
@@ -86,7 +85,9 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
weekdayData.value.push({
|
||||
dayOfWeek: item.value,
|
||||
label: item.label,
|
||||
shift: item.value == '6' || item.value == '7' ? '休息' : '常规班次:08:00:00~12:00:00 14:00:00~17:00:00'
|
||||
shiftValue: '休息',
|
||||
isRest: true,
|
||||
shiftId: null,
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -118,6 +119,9 @@ async function handleConfirm() {
|
||||
async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
cycleData.value = []
|
||||
unCheckInData.value = []
|
||||
checkInData.value = []
|
||||
}
|
||||
|
||||
const [HolidayCalendar, holidayApi] = useVbenModal({
|
||||
@@ -142,59 +146,122 @@ async function showHoliday() {
|
||||
* 更改班次
|
||||
* @param type 1.设置班次 2.选择班次
|
||||
*/
|
||||
async function shiftScheduleHandle(type) {
|
||||
await shiftApi.open()
|
||||
await shiftApi.setData({type})
|
||||
}
|
||||
|
||||
async function changeShiftHandle(type, index) {
|
||||
await shiftApi.open()
|
||||
await shiftApi.setData({type})//3.更改班次
|
||||
}
|
||||
|
||||
async function selectDateHandle(type) {
|
||||
checkInDateApi.open()
|
||||
checkInDateApi.setData({type})
|
||||
async function shiftScheduleHandle(type: number) {
|
||||
shiftApi.setData({type})
|
||||
shiftApi.open()
|
||||
}
|
||||
|
||||
const shiftInfo = ref<ShiftVO>()
|
||||
const shiftList = ref<ShiftVO[]>([])
|
||||
const handleShiftInfo = (info) => {
|
||||
shiftInfo.value = info;
|
||||
const handleShiftInfo = (info: ShiftVO) => {
|
||||
if (info) {
|
||||
shiftInfo.value = info;
|
||||
weekdayData.value.forEach(item => {
|
||||
item.shiftId = info.id
|
||||
let str = ''
|
||||
if (info.isRest) {
|
||||
str = `${info.name}:${info.startTime}~${info.restStartTime} ${info.restEndTime}~${info.endTime}`;
|
||||
} else {
|
||||
str = `${info.name}:${info.startTime}~${info.endTime}`;
|
||||
}
|
||||
item.shiftValue = str
|
||||
item.isRest = false
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
const handleShiftList = (list) => {
|
||||
const handleShiftList = (list: any[]) => {
|
||||
shiftList.value = list;
|
||||
};
|
||||
|
||||
const handleAfterValue = (val) => {
|
||||
console.log(val, '===val')
|
||||
};
|
||||
|
||||
const cycleData = ref<any[]>([])
|
||||
const unCheckInData = ref<any[]>([])
|
||||
const checkInData = ref<any[]>([])
|
||||
|
||||
async function addCycleHandle() {
|
||||
cycleData.value.push({
|
||||
shiftId: '',
|
||||
})
|
||||
if(cycleData.value.length<31){
|
||||
cycleData.value.push({
|
||||
shiftId: '',
|
||||
})
|
||||
}else {
|
||||
message.warning('周期天数最多31天。');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteCycleHandle(index) {
|
||||
cycleData.value.splice(index, 1)
|
||||
async function deleteCycleHandle(index: number) {
|
||||
if(cycleData.value.length>2){
|
||||
cycleData.value.splice(index, 1)
|
||||
}else {
|
||||
message.warning('周期天数最少2天。');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteUnCheckInHandle(index) {
|
||||
async function deleteUnCheckInHandle(index: number) {
|
||||
unCheckInData.value.splice(index, 1)
|
||||
}
|
||||
|
||||
async function deleteCheckInHandle(index) {
|
||||
async function deleteCheckInHandle(index: number) {
|
||||
checkInData.value.splice(index, 1)
|
||||
}
|
||||
|
||||
async function restHandle(index){
|
||||
const tableIndex = ref(-1)
|
||||
|
||||
async function changeShiftHandle(type: number, index: number) {
|
||||
tableIndex.value = index
|
||||
shiftApi.setData({type})//3.更改班次
|
||||
shiftApi.open()
|
||||
|
||||
}
|
||||
|
||||
async function restHandle(index: number) {
|
||||
weekdayData.value[index].isRest = true
|
||||
weekdayData.value[index].shiftValue = '休息'
|
||||
}
|
||||
|
||||
const handleAfterValue = (val: ShiftVO) => {
|
||||
if (tableIndex.value > -1 && val) {
|
||||
weekdayData.value[tableIndex.value].shiftId = val.id
|
||||
let str = ''
|
||||
if (val.isRest) {
|
||||
str = `${val.name}:${val.startTime}~${val.restStartTime} ${val.restEndTime}~${val.endTime}`;
|
||||
} else {
|
||||
str = `${val.name}:${val.startTime}~${val.endTime}`;
|
||||
}
|
||||
weekdayData.value[tableIndex.value].shiftValue = str
|
||||
weekdayData.value[tableIndex.value].isRest = false
|
||||
}
|
||||
};
|
||||
|
||||
const closeHandle = (i: number) => {
|
||||
shiftList.value.splice(i, 1)
|
||||
};
|
||||
|
||||
const checkInIndex = ref(-1)
|
||||
|
||||
async function addCheckInHandle(index: number) {
|
||||
checkInIndex.value = index
|
||||
checkInDateApi.setData({check: true})
|
||||
checkInDateApi.open()
|
||||
}
|
||||
|
||||
const getCheckInData = (val: any) => {
|
||||
if (val) {
|
||||
checkInData.value.push(val)
|
||||
}
|
||||
}
|
||||
const unCheckInIndex = ref(-1)
|
||||
|
||||
async function addUnCheckInHandle(index: number) {
|
||||
unCheckInIndex.value = index
|
||||
checkInDateApi.setData({check: false})
|
||||
checkInDateApi.open()
|
||||
}
|
||||
|
||||
const getUnCheckInData = (val: any) => {
|
||||
if (val) {
|
||||
unCheckInData.value.push(val)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -224,8 +291,11 @@ async function restHandle(index){
|
||||
size="small" :pagination="false">
|
||||
<template #bodyCell="{ column, record,index }">
|
||||
<template v-if="column.dataIndex==='action'">
|
||||
<Button type="link" size="small" @click="changeShiftHandle(3)">更改班次</Button>
|
||||
<Button type="link" size="small" @click="restHandle(index)">休息</Button>
|
||||
<Button type="link" size="small" @click="changeShiftHandle(3,index)">更改班次
|
||||
</Button>
|
||||
<Button type="link" size="small" @click="restHandle(index)" v-if="!record.isRest">
|
||||
休息
|
||||
</Button>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
@@ -241,17 +311,21 @@ async function restHandle(index){
|
||||
<template #headerCell="{ column }">
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<Button size="small" type="primary" shape="circle"
|
||||
@click="selectDateHandle"
|
||||
@click="addUnCheckInHandle"
|
||||
:icon="h(PlusOutlined)">
|
||||
</Button>
|
||||
</template>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record,index }">
|
||||
<template #bodyCell="{ column,record,index }">
|
||||
<template v-if="column.dataIndex==='action'">
|
||||
<Button size="small" type="primary" shape="circle"
|
||||
danger :icon="h(MinusOutlined)" @click="deleteUnCheckInHandle(index)">
|
||||
</Button>
|
||||
</template>
|
||||
<template v-if="column.dataIndex==='dateTime'">
|
||||
<span v-if="record.dateType==0">{{ record.startDate }}</span>
|
||||
<span v-else>{{ record.startDate + '~' + record.endDate }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
<p class="item-padding">必须打卡日期:</p>
|
||||
@@ -260,12 +334,16 @@ async function restHandle(index){
|
||||
<template #headerCell="{ column }">
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<Button size="small" type="primary" shape="circle"
|
||||
@click="selectDateHandle"
|
||||
@click="addCheckInHandle"
|
||||
:icon="h(PlusOutlined)">
|
||||
</Button>
|
||||
</template>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record,index }">
|
||||
<template #bodyCell="{ column,record,index }">
|
||||
<template v-if="column.dataIndex==='dateTime'">
|
||||
<span v-if="record.dateType==0">{{ record.startDate }}</span>
|
||||
<span v-else>{{ record.startDate + '~' + record.endDate }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex==='action'">
|
||||
<Button size="small" type="primary" shape="circle"
|
||||
danger :icon="h(MinusOutlined)" @click="deleteCheckInHandle(index)">
|
||||
@@ -280,15 +358,17 @@ async function restHandle(index){
|
||||
</template>
|
||||
<template #shiftData>
|
||||
<div v-if="shiftList">
|
||||
<Tag closable color="processing" v-for="(item,index) in shiftList">
|
||||
<Tag closable color="processing" v-for="(item,i) in shiftList" @close="closeHandle(i)">
|
||||
{{ item.name }}
|
||||
</Tag>
|
||||
</div>
|
||||
</template>
|
||||
<template #schedulingCycle>
|
||||
<span class="item-font">周期天数
|
||||
<span style="font-weight: 500;color: red">{{ cycleData.length }}</span>
|
||||
天</span>
|
||||
<span class="item-font-weight item-font-color">{{ cycleData.length }}</span>
|
||||
天
|
||||
<span style="color:#b2b0b0;">(周期最少2天,最多31天)</span>
|
||||
</span>
|
||||
</template>
|
||||
<template #cycleData>
|
||||
<Table style="width: 80%" bordered :columns="cycleColumns" :data-source="cycleData"
|
||||
@@ -300,12 +380,30 @@ async function restHandle(index){
|
||||
</Button>
|
||||
</template>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record,index }">
|
||||
<template #bodyCell="{ column,record,index }">
|
||||
<template v-if="column.dataIndex==='action'">
|
||||
<Button size="small" type="primary" shape="circle"
|
||||
danger :icon="h(MinusOutlined)" @click="deleteCycleHandle(index)">
|
||||
</Button>
|
||||
</template>
|
||||
<template v-if="column.dataIndex==='day'">
|
||||
<span>{{ '第' + (index + 1) + '天' }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex==='shiftId'">
|
||||
<Select
|
||||
ref="select"
|
||||
style="width: 100%"
|
||||
v-model:value="record.shiftId"
|
||||
placeholder="请选择班次"
|
||||
>
|
||||
<SelectOption v-for="item in shiftList" :value="item.id">
|
||||
{{ item.name + '\xa0' }}
|
||||
<span
|
||||
v-if="item.isRest">{{ item.startTime + '~' + item.restStartTime + '\xa0' + item.restEndTime + '~' + item.endTime }}</span>
|
||||
<span v-else>{{ item.startTime + '~' + item.endTime }}</span>
|
||||
</SelectOption>
|
||||
</Select>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
</template>
|
||||
@@ -315,7 +413,9 @@ async function restHandle(index){
|
||||
@shiftList="handleShiftList"
|
||||
@afterValue="handleAfterValue"
|
||||
></ChangeShiftSchedule>
|
||||
<CheckInDate></CheckInDate>
|
||||
<CheckInDate @checkIn="getCheckInData"
|
||||
@unCheckIn="getUnCheckInData"
|
||||
></CheckInDate>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@@ -327,6 +427,10 @@ async function restHandle(index){
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-font-color {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.item-padding-top {
|
||||
padding-top: 1.1rem;
|
||||
}
|
||||
|
@@ -20,6 +20,7 @@ import type { GroupForm } from '#/api/property/attendanceManagement/attendanceGr
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
|
||||
import groupModal from './group-modal.vue';
|
||||
import attendanceGroupDetail from './attendance-group-detail.vue';
|
||||
import { columns, querySchema } from './data';
|
||||
import {TableSwitch} from "#/components/table";
|
||||
import {useAccess} from "@vben/access";
|
||||
@@ -77,6 +78,10 @@ const [GroupModal, modalApi] = useVbenModal({
|
||||
connectedComponent: groupModal,
|
||||
});
|
||||
|
||||
const [AttendanceGroupDetail, detailApi] = useVbenModal({
|
||||
connectedComponent: attendanceGroupDetail,
|
||||
});
|
||||
|
||||
function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
@@ -87,6 +92,11 @@ async function handleEdit(row: Required<GroupForm>) {
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleInfo(row: Required<GroupForm>) {
|
||||
detailApi.setData({ id: row.id });
|
||||
detailApi.open();
|
||||
}
|
||||
|
||||
async function handleDelete(row: Required<GroupForm>) {
|
||||
await groupRemove(row.id);
|
||||
await tableApi.query();
|
||||
@@ -143,6 +153,12 @@ function handleDownloadExcel() {
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
v-access:code="['Property:group:info']"
|
||||
@click.stop="handleInfo(row)"
|
||||
>
|
||||
{{ $t('pages.common.info') }}
|
||||
</ghost-button>
|
||||
<ghost-button
|
||||
v-access:code="['Property:group:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
@@ -177,5 +193,6 @@ function handleDownloadExcel() {
|
||||
</template>
|
||||
</BasicTable>
|
||||
<GroupModal @reload="tableApi.query()" />
|
||||
<AttendanceGroupDetail></AttendanceGroupDetail>
|
||||
</Page>
|
||||
</template>
|
||||
|
@@ -1,9 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, reactive } from 'vue';
|
||||
import { computed, reactive,onMounted } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { arrangementAdd, arrangementInfo, arrangementUpdate } from '#/api/property/attendanceManagement/arrangement';
|
||||
@@ -13,15 +12,128 @@ import {
|
||||
type VxeGridProps
|
||||
} from '#/adapter/vxe-table';
|
||||
import { modalSchema,attendanceColumns } from './data';
|
||||
import { Radio, Button,Calendar,DatePicker,Form,Input,Select,FormItem } from 'ant-design-vue';
|
||||
import { Radio,DatePicker,Form,Select,FormItem,RadioGroup, message } from 'ant-design-vue';
|
||||
import unitPersonModal from './unit-person-modal.vue';
|
||||
import {groupList} from '#/api/property/attendanceManagement/attendanceGroupSettings'
|
||||
import {getDictOptions} from "#/utils/dict";
|
||||
import dayjs from 'dayjs';
|
||||
import type { PersonVO } from './type';
|
||||
import { ref, h } from 'vue';
|
||||
import { Tag,Table } from 'ant-design-vue';
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
||||
});
|
||||
const groupOptions = ref<any[]>([]);
|
||||
const groupMap = ref<Record<string, any>>({}); // 用于快速查找
|
||||
const tableData = reactive<{dept: {unitId: string | number,unitName: string}, users: PersonVO[]}[]>([]);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
key: 'index',
|
||||
width: 60,
|
||||
customRender: ({ index }: { index: number }) => index + 1,
|
||||
},
|
||||
{
|
||||
title: '部门',
|
||||
dataIndex: ['dept', 'unitName'],
|
||||
key: 'dept',
|
||||
width: 120,
|
||||
customRender: ({ record }: { record: any }) => record.dept.unitName,
|
||||
},
|
||||
{
|
||||
title: '已选人数',
|
||||
dataIndex: 'users',
|
||||
key: 'userCount',
|
||||
width: 100,
|
||||
customRender: ({ record }: { record: any }) => record.users.length,
|
||||
},
|
||||
{
|
||||
title: '人员',
|
||||
dataIndex: 'users',
|
||||
key: 'users',
|
||||
customRender: ({ record }: { record: any }) =>
|
||||
record.users.map((user: any) =>
|
||||
h(
|
||||
Tag,
|
||||
{
|
||||
color: 'blue',
|
||||
closable: true,
|
||||
onClose: (e) => {
|
||||
e.preventDefault();
|
||||
handleRemoveUser(record, user);
|
||||
},
|
||||
style: 'margin-right: 4px;',
|
||||
},
|
||||
() => user.userName
|
||||
)
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 80,
|
||||
customRender: ({ record, index }: { record: any, index: number }) =>
|
||||
h(
|
||||
'a',
|
||||
{
|
||||
style: 'color: #ff4d4f; font-size: 18px; margin-left: 8px; cursor: pointer;',
|
||||
onClick: () => handleRemoveRow(index),
|
||||
},
|
||||
'移除'
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
function handleRemoveUser(row: any, user: any) {
|
||||
row.users = row.users.filter((u: any) => u.id !== user.id);
|
||||
}
|
||||
function handleRemoveRow(index: number) {
|
||||
tableData.splice(index, 1);
|
||||
}
|
||||
|
||||
function handleTableData(newTableData: any) {
|
||||
tableData.splice(0, tableData.length, ...newTableData);
|
||||
}
|
||||
//表单项
|
||||
const formModel = reactive<{
|
||||
id: string;
|
||||
groupId: string;
|
||||
attendanceType: string;
|
||||
dateType: number | undefined;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
userGroupList: any[];
|
||||
}>({
|
||||
id: '',
|
||||
groupId: '',
|
||||
attendanceType:'',//考勤组类型
|
||||
dateType: undefined,//日期类型:1-单个日期,2-长期有效,3-期间有效
|
||||
// dateSingle: null,
|
||||
// dateLong: null,
|
||||
// dateRange: [null, null],
|
||||
startDate:'',//开始日期
|
||||
endDate:'',//结束日期
|
||||
userGroupList:[
|
||||
// scheduleId:undefined,//排班ID
|
||||
// employeeId:undefined,//员工ID
|
||||
// employeeName:undefined,//员工姓名
|
||||
// deptId:undefined,//部门ID
|
||||
// deptName:undefined,//部门名称
|
||||
]//考勤组人员列表
|
||||
});
|
||||
const singleDate = ref('');
|
||||
const longDate = ref('');
|
||||
const rangeDate = ref(['', '']);
|
||||
const formRef = ref();
|
||||
const rules = {
|
||||
groupId: [{ required: true, message: '请选择考勤组' }],
|
||||
attendanceType: [{ required: true }],
|
||||
dateType: [{ required: true, message: '请选择排班日期' }],
|
||||
};
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
@@ -58,6 +170,8 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
await getGroupList();
|
||||
console.log(getDictOptions('wy_kqlx'));
|
||||
modalApi.modalLoading(true);
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
@@ -70,17 +184,76 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
const totalSelected:number = 0;
|
||||
|
||||
function handleAdd() {
|
||||
unitPersonmodalApi.setData({});
|
||||
unitPersonmodalApi.open();
|
||||
}
|
||||
|
||||
async function getGroupList(){
|
||||
const res = await groupList({
|
||||
pageSize:1000000000,
|
||||
pageNum:1,
|
||||
status:1//0:停用 1:启用
|
||||
});
|
||||
groupOptions.value = (res.rows || []).map(item=>({
|
||||
label:item.groupName,
|
||||
value:item.id
|
||||
}));
|
||||
// 构建 id 到 group 对象的映射
|
||||
groupMap.value = {};
|
||||
(res.rows || []).forEach(item => {
|
||||
groupMap.value[item.id] = item;
|
||||
});
|
||||
}
|
||||
function chooseGroup(value:any){
|
||||
console.log(value);
|
||||
const group = groupMap.value[value];
|
||||
if(group){
|
||||
formModel.attendanceType = String(group.attendanceType);
|
||||
}
|
||||
}
|
||||
async function handleDateTypeChange(value:any){
|
||||
formModel.dateType = value;
|
||||
}
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.lock(true);
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
// await formRef.value.validate(); // 先校验
|
||||
const data = formModel;
|
||||
const { id } = modalApi.getData() as { id?:string };
|
||||
data.id = id? id:'';
|
||||
console.log(data);
|
||||
|
||||
if(data.dateType == 1){
|
||||
if(singleDate.value){
|
||||
data.startDate = dayjs(singleDate.value).format('YYYY-MM-DD');
|
||||
}else{
|
||||
message.error('请选择单个日期')
|
||||
return;
|
||||
}
|
||||
}else if(data.dateType == 2){
|
||||
if(longDate.value){
|
||||
data.startDate = dayjs(longDate.value).format('YYYY-MM-DD');
|
||||
}else{
|
||||
message.error('请选择起始日期')
|
||||
return;
|
||||
}
|
||||
}else if(data.dateType == 3){
|
||||
if(!rangeDate.value[0]){
|
||||
message.error('请选择开始日期')
|
||||
return;
|
||||
}else if(!rangeDate.value[1]){
|
||||
message.error('请选择结束日期')
|
||||
return;
|
||||
}else{
|
||||
data.startDate = dayjs(rangeDate.value[0]).format('YYYY-MM-DD');
|
||||
data.endDate = dayjs(rangeDate.value[1]).format('YYYY-MM-DD');
|
||||
}
|
||||
|
||||
}
|
||||
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
await (isUpdate.value ? arrangementUpdate(data) : arrangementAdd(data));
|
||||
// await (isUpdate.value ? arrangementUpdate(data) : arrangementAdd(data));
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
@@ -95,122 +268,44 @@ async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
}
|
||||
|
||||
|
||||
const formModel = reactive({
|
||||
group: '',
|
||||
type: '',
|
||||
dateType: 'long',
|
||||
dateSingle: null,
|
||||
dateLong: null,
|
||||
dateRange: [null, null],
|
||||
startDate:'',
|
||||
endDate:''
|
||||
});
|
||||
|
||||
// mock 表格数据
|
||||
const tableData = ref([
|
||||
{ dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
|
||||
{ dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
|
||||
{ dept: '', users: [] },
|
||||
]);
|
||||
const staticData = [
|
||||
{ id: 1, dept: 'xx部门', name: '张三' },
|
||||
{ id: 2, dept: 'yy部门', name: '李四' },
|
||||
];
|
||||
const totalSelected = computed(() => tableData.value.reduce((sum, row) => sum + row.users.length, 0));
|
||||
|
||||
const gridOptions: VxeGridProps = {
|
||||
checkboxConfig: {
|
||||
// 高亮
|
||||
highlight: true,
|
||||
// 翻页时保留选中状态
|
||||
reserve: true,
|
||||
// 点击行选中
|
||||
// trigger: 'row',
|
||||
},
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
columns: attendanceColumns,
|
||||
// columns,
|
||||
// height: 'auto',
|
||||
keepSource: true,
|
||||
data:staticData,
|
||||
pagerConfig: {},
|
||||
proxyConfig: {
|
||||
// ajax: {
|
||||
// query: async ({ page }, formValues = {}) => {
|
||||
// return await arrangementList({
|
||||
// pageNum: page.currentPage,
|
||||
// pageSize: page.pageSize,
|
||||
// ...formValues,
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'property-arrangement-index',
|
||||
toolbarConfig: {
|
||||
// 隐藏"刷新/重置"按钮(对应 redo)
|
||||
refresh: false,
|
||||
zoom: false, // 显示全屏
|
||||
custom: false, // 隐藏列设置
|
||||
},
|
||||
};
|
||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
gridOptions,
|
||||
});
|
||||
async function handleEdit(row: any){
|
||||
modalApi.setData({ id: row.id });
|
||||
modalApi.open();
|
||||
}
|
||||
async function handleDelete(row: any) {
|
||||
console.log(12);
|
||||
}
|
||||
|
||||
|
||||
function handleAdd() {
|
||||
unitPersonmodalApi.setData({});
|
||||
unitPersonmodalApi.open();
|
||||
}
|
||||
onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<!-- 顶部表单区 -->
|
||||
<Form :model="formModel" layout="horizontal" class="mb-4">
|
||||
<Form :model="formModel" :rules="rules" ref="formRef" layout="horizontal" class="mb-4" >
|
||||
<div class="grid grid-cols-2 gap-x-8 gap-y-2">
|
||||
<FormItem label="选择考勤组" required class="mb-0">
|
||||
<Select v-model:value="formModel.group" placeholder="请选择"/>
|
||||
<FormItem name="groupId" label="请选择考勤组" class="mb-0">
|
||||
<Select v-model:value="formModel.groupId" :options="groupOptions" placeholder="请选择" @change="chooseGroup"/>
|
||||
</FormItem>
|
||||
<FormItem label="考勤类型" required class="mb-0">
|
||||
<Input v-model:value="formModel.type" placeholder="请输入" />
|
||||
<FormItem name="attendanceType" label="考勤类型" class="mb-0">
|
||||
<Select :disabled="true" :options="getDictOptions('wy_kqlx')" v-model:value="formModel.attendanceType" placeholder="请选择考勤组" />
|
||||
</FormItem>
|
||||
<FormItem label="排班日期" class="col-span-2 mb-0">
|
||||
<radio-group v-model:value="formModel.dateType" class="mr-4">
|
||||
<radio value="single">
|
||||
<FormItem label="排班日期" name="dateType" class="col-span-2 mb-0">
|
||||
<RadioGroup v-model:value="formModel.dateType" class="mr-4">
|
||||
<Radio value=1>
|
||||
<span>
|
||||
单个日期
|
||||
<DatePicker/>
|
||||
<DatePicker v-model:value="singleDate" @click="handleDateTypeChange(1)"/>
|
||||
</span>
|
||||
</radio>
|
||||
<radio value="long">
|
||||
</Radio>
|
||||
<Radio value=2>
|
||||
<span>
|
||||
从此日起长期有效
|
||||
<DatePicker/>
|
||||
<DatePicker v-model:value="longDate" @click="handleDateTypeChange(2)"/>
|
||||
</span>
|
||||
</radio>
|
||||
<radio value="range">
|
||||
</Radio>
|
||||
<Radio value=3>
|
||||
<span>
|
||||
在此期间有效
|
||||
<DatePicker v-model:value="formModel.startDate" class="ml-2" />
|
||||
<DatePicker v-model:value="rangeDate[0]" class="ml-2" @click="handleDateTypeChange(3)"/>
|
||||
<span class="mx-2">~</span>
|
||||
<DatePicker v-model:value="formModel.endDate" />
|
||||
<DatePicker v-model:value="rangeDate[1]" @click="handleDateTypeChange(3)"/>
|
||||
</span>
|
||||
</radio>
|
||||
</radio-group>
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</div>
|
||||
</Form>
|
||||
@@ -220,34 +315,28 @@ function handleAdd() {
|
||||
<span>考勤组人员(已选 <span class="text-red-500">{{ totalSelected }}</span> 人)</span>
|
||||
<a-button type="primary" size="small" class="ml-4" @click="handleAdd">+ 添加人员</a-button>
|
||||
</div>
|
||||
<BasicTable>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
v-access:code="['property:arrangement:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
>
|
||||
{{ $t('pages.common.edit') }}
|
||||
</ghost-button>
|
||||
<Popconfirm
|
||||
placement="left"
|
||||
title="确认删除?"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<ghost-button
|
||||
danger
|
||||
v-access:code="['property:arrangement:remove']"
|
||||
@click.stop=""
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</ghost-button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<Table
|
||||
:columns="columns"
|
||||
:dataSource="tableData"
|
||||
:pagination="false"
|
||||
rowKey="dept.unitId"
|
||||
bordered
|
||||
/>
|
||||
</div>
|
||||
<UnitPersonModal />
|
||||
<UnitPersonModal @reload="handleTableData"/>
|
||||
<!-- 底部按钮区 -->
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 使用 :deep() 穿透 scoped 样式,影响子组件 */
|
||||
:deep(.ant-input[disabled]),
|
||||
:deep(.ant-input-number-disabled .ant-input-number-input),
|
||||
:deep(.ant-select-disabled .ant-select-selection-item),
|
||||
:deep(.ant-picker-input input[disabled]),
|
||||
:deep(.ant-picker-disabled .ant-picker-input input) {
|
||||
/* 设置一个更深的颜色,可以自己调整 */
|
||||
color: rgba(0, 0, 0, 0.65) !important;
|
||||
/* 有些浏览器需要这个来覆盖默认颜色 */
|
||||
-webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
|
||||
}
|
||||
</style>
|
@@ -5,7 +5,7 @@ import {ref} from 'vue';
|
||||
import { Dayjs } from 'dayjs';
|
||||
import arrangementModal from './arrangement-modal.vue';
|
||||
import {useVbenModal} from '@vben/common-ui';
|
||||
|
||||
import type { PersonVO } from './type';
|
||||
const emit = defineEmits<{
|
||||
(e: 'changeView',value:boolean):void
|
||||
}>();
|
||||
@@ -77,6 +77,7 @@ function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="h-full flex flex-col">
|
||||
|
@@ -174,17 +174,17 @@ export const unitColumns: VxeGridProps['columns'] = [
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
field: 'scheduleName',
|
||||
field: 'userName',
|
||||
minWidth:120
|
||||
},
|
||||
{
|
||||
title: '所属单位',
|
||||
field: 'scheduleName',
|
||||
field: 'unitName',
|
||||
width:'auto',
|
||||
},
|
||||
{
|
||||
title: '电话',
|
||||
field: 'groupId',
|
||||
field: 'phone',
|
||||
minWidth:120
|
||||
}
|
||||
];
|
||||
|
68
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/type.d.ts
vendored
Normal file
68
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/type.d.ts
vendored
Normal file
@@ -0,0 +1,68 @@
|
||||
//列表数据,用于展示人员列表
|
||||
export interface PersonVO {
|
||||
/**
|
||||
* 主键id
|
||||
*/
|
||||
id: string | number;
|
||||
|
||||
/**
|
||||
* 用户id
|
||||
*/
|
||||
userId: string | number;
|
||||
|
||||
/**
|
||||
* 用户名称
|
||||
*/
|
||||
userName: string;
|
||||
|
||||
/**
|
||||
* 联系电话
|
||||
*/
|
||||
phone: string;
|
||||
|
||||
/**
|
||||
* 性别
|
||||
*/
|
||||
gender: number;
|
||||
|
||||
/**
|
||||
* 人脸图片
|
||||
*/
|
||||
img: string;
|
||||
|
||||
/**
|
||||
* 所属单位id
|
||||
*/
|
||||
unitId: string | number;
|
||||
|
||||
/**
|
||||
* 所属单位名称
|
||||
*/
|
||||
unitName: string;
|
||||
|
||||
/**
|
||||
* 入驻位置
|
||||
*/
|
||||
locathon: string;
|
||||
|
||||
/**
|
||||
* 入驻时间
|
||||
*/
|
||||
time: string;
|
||||
|
||||
/**
|
||||
* 车牌号码
|
||||
*/
|
||||
carNumber: string;
|
||||
|
||||
/**
|
||||
* 状态
|
||||
*/
|
||||
state: number|string;
|
||||
|
||||
/**
|
||||
* 备注
|
||||
*/
|
||||
remark: string;
|
||||
|
||||
}
|
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, reactive } from 'vue';
|
||||
import { computed, ref, reactive, onMounted, watch } from 'vue';
|
||||
import { SyncOutlined } from '@ant-design/icons-vue';
|
||||
import { Tree, InputSearch, Skeleton, Empty, Button } from 'ant-design-vue';
|
||||
import { Tree, InputSearch, Skeleton, Empty, Button,Tag } from 'ant-design-vue';
|
||||
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
@@ -15,8 +15,10 @@ import {
|
||||
} from '#/adapter/vxe-table';
|
||||
import { modalSchema,unitColumns,unitQuerySchema } from './data';
|
||||
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
import { resident_unitList } from '#/api/property/resident/unit';
|
||||
import { personList } from '#/api/property/resident/person';
|
||||
import type { PersonVO } from './type';
|
||||
const emit = defineEmits<{ reload: [tableData: {dept: {unitId: string | number,unitName: string}, users: PersonVO[]}[]] }>();
|
||||
const selectDeptId = ref<string[]>([]);
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
@@ -26,23 +28,30 @@ const showSearch = ref(true);
|
||||
const searchValue = ref('');
|
||||
const selectedDeptIds = ref<string[]>([]);
|
||||
const showTreeSkeleton = ref(false);
|
||||
|
||||
// mock 部门树数据
|
||||
const deptTree = ref([
|
||||
{
|
||||
id: '1',
|
||||
label: '公司',
|
||||
children: [
|
||||
{ id: '1-1', label: '研发部', children: [
|
||||
{ id: '1-1-1', label: '前端组' },
|
||||
{ id: '1-1-2', label: '后端组' },
|
||||
] },
|
||||
{ id: '1-2', label: '市场部' },
|
||||
{ id: '1-3', label: '人事部' },
|
||||
],
|
||||
},
|
||||
//单位树
|
||||
const deptTree = reactive<{
|
||||
id: string;
|
||||
label: string;
|
||||
children: {
|
||||
id: string;
|
||||
label: string;
|
||||
}[];
|
||||
}[]>([
|
||||
{
|
||||
id: '',
|
||||
label: '全部单位',
|
||||
children: [
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
//勾选内容
|
||||
const selectedUsers = ref<PersonVO[]>([]);
|
||||
//已选内容,需要展示到父组件
|
||||
|
||||
const tableData = reactive<{
|
||||
dept: {unitId: string | number,unitName: string},
|
||||
users: PersonVO[]}[]>([]);
|
||||
function handleReload() {
|
||||
showTreeSkeleton.value = true;
|
||||
setTimeout(() => {
|
||||
@@ -51,7 +60,7 @@ function handleReload() {
|
||||
}
|
||||
|
||||
const filteredDeptTree = computed(() => {
|
||||
if (!searchValue.value) return deptTree.value;
|
||||
if (!searchValue.value) return deptTree;
|
||||
// 递归过滤树
|
||||
function filter(tree: any[]): any[] {
|
||||
return tree
|
||||
@@ -65,27 +74,9 @@ const filteredDeptTree = computed(() => {
|
||||
})
|
||||
.filter(Boolean);
|
||||
}
|
||||
return filter(deptTree.value);
|
||||
return filter(deptTree);
|
||||
});
|
||||
const formOptions: VbenFormProps = {
|
||||
commonConfig: {
|
||||
labelWidth: 80,
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
schema: unitQuerySchema(),
|
||||
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 [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
@@ -121,81 +112,35 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
console.log(12)
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
console.log(2)
|
||||
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
console.log(3)
|
||||
|
||||
const record = await arrangementInfo(id);
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
console.log(4)
|
||||
|
||||
// await markInitialized();
|
||||
console.log(5)
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
console.log(6)
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
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 ? arrangementUpdate(data) : arrangementAdd(data));
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
}
|
||||
|
||||
|
||||
const formModel = reactive({
|
||||
group: '',
|
||||
type: '',
|
||||
dateType: 'long',
|
||||
dateSingle: null,
|
||||
dateLong: null,
|
||||
dateRange: [null, null],
|
||||
startDate:'',
|
||||
endDate:''
|
||||
});
|
||||
|
||||
// mock 表格数据
|
||||
const tableData = ref([
|
||||
{ dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
|
||||
{ dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
|
||||
{ dept: '', users: [] },
|
||||
]);
|
||||
const staticData = [
|
||||
{ id: 1, dept: 'xx部门', name: '张三' },
|
||||
{ id: 2, dept: 'yy部门', name: '李四' },
|
||||
];
|
||||
const totalSelected = computed(() => tableData.value.reduce((sum, row) => sum + row.users.length, 0));
|
||||
|
||||
function addRow() {
|
||||
tableData.value.push({ dept: '', users: [] });
|
||||
}
|
||||
const formOptions: VbenFormProps = {
|
||||
commonConfig: {
|
||||
labelWidth: 80,
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
schema: unitQuerySchema(),
|
||||
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: {
|
||||
// 高亮
|
||||
@@ -210,18 +155,18 @@ const gridOptions: VxeGridProps = {
|
||||
// columns,
|
||||
// height: 'auto',
|
||||
keepSource: true,
|
||||
data:staticData,
|
||||
// data:selectedUsers,
|
||||
pagerConfig: {},
|
||||
proxyConfig: {
|
||||
// ajax: {
|
||||
// query: async ({ page }, formValues = {}) => {
|
||||
// return await arrangementList({
|
||||
// pageNum: page.currentPage,
|
||||
// pageSize: page.pageSize,
|
||||
// ...formValues,
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
ajax: {
|
||||
query: async ({ page }) => {
|
||||
return await personList({
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
unitId: selectedDeptIds.value[0],
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
@@ -235,19 +180,74 @@ const gridOptions: VxeGridProps = {
|
||||
custom: false, // 隐藏列设置
|
||||
},
|
||||
};
|
||||
const gridEvents = {
|
||||
checkboxChange:async (params:any) => {
|
||||
const currentRecords = await params.$grid.getCheckboxRecords()??[];
|
||||
const reserveRecords = await params.$grid.getCheckboxReserveRecords()??[];
|
||||
selectedUsers.value = [...reserveRecords, ...currentRecords];
|
||||
},
|
||||
checkboxAll:async (params:any) => {
|
||||
const currentRecords = await params.$grid.getCheckboxRecords()??[];
|
||||
const reserveRecords = await params.$grid.getCheckboxReserveRecords()??[];
|
||||
selectedUsers.value = [...reserveRecords, ...currentRecords];
|
||||
},
|
||||
|
||||
};
|
||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
gridEvents
|
||||
});
|
||||
async function handleEdit(row: any){
|
||||
modalApi.setData({ id: row.id });
|
||||
modalApi.open();
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
for(const user of selectedUsers.value){
|
||||
if(tableData.find(item=>item.dept.unitId === user.unitId)){
|
||||
tableData.find(item=>item.dept.unitId===user.unitId)!.users.push(user);
|
||||
}else{
|
||||
tableData.push({ dept:{unitId:user.unitId,unitName:user.unitName}, users: [user] });
|
||||
}
|
||||
}
|
||||
console.log(tableData);
|
||||
resetInitialized();
|
||||
emit('reload',tableData);
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
async function handleDelete(row: any) {
|
||||
console.log(12);
|
||||
|
||||
async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
}
|
||||
async function loadDetail() {
|
||||
|
||||
async function getUnitList(){
|
||||
deptTree[0]!.children = [];
|
||||
const res = await resident_unitList();
|
||||
if (deptTree[0] && Array.isArray(deptTree[0].children)) {
|
||||
for(const item of res.rows){
|
||||
deptTree[0].children.push({
|
||||
id: item.id as string,
|
||||
label: item.name as string,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
// 查询对应部门人员列表
|
||||
async function fetchDeptUsers() {
|
||||
tableApi.query();
|
||||
}
|
||||
watch(selectedDeptIds, (newVal) => {
|
||||
if (newVal && newVal.length > 0) {
|
||||
fetchDeptUsers();
|
||||
}
|
||||
});
|
||||
onMounted(() => {
|
||||
getUnitList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -258,12 +258,12 @@ async function loadDetail() {
|
||||
<div class="bg-background z-100 sticky left-0 top-0 p-[8px] flex items-center">
|
||||
<InputSearch
|
||||
v-model:value="searchValue"
|
||||
placeholder="搜索部门"
|
||||
placeholder="搜索单位"
|
||||
size="small"
|
||||
style="flex:1;"
|
||||
>
|
||||
<template #enterButton>
|
||||
<Button type="text" @click="handleReload">
|
||||
<Button type="text" @click="getUnitList">
|
||||
<SyncOutlined class="text-primary" />
|
||||
</Button>
|
||||
</template>
|
||||
@@ -289,36 +289,19 @@ async function loadDetail() {
|
||||
</template>
|
||||
</Tree>
|
||||
<div v-else class="mt-5">
|
||||
<Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="无部门数据" />
|
||||
<Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="无单位数据" />
|
||||
</div>
|
||||
</div>
|
||||
</Skeleton>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex mb-2 overflow-auto" style="max-height: 80px;font-size: 14px;">
|
||||
已选人员:
|
||||
<span v-for="user in selectedUsers" :key="user.id" style="margin-right: 8px;">
|
||||
<Tag>{{ user.userName }}</Tag>
|
||||
</span>
|
||||
</div>
|
||||
<BasicTable>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
v-access:code="['property:arrangement:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
>
|
||||
{{ $t('pages.common.edit') }}
|
||||
</ghost-button>
|
||||
<Popconfirm
|
||||
placement="left"
|
||||
title="确认删除?"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<ghost-button
|
||||
danger
|
||||
v-access:code="['property:arrangement:remove']"
|
||||
@click.stop=""
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</ghost-button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</div>
|
||||
|
@@ -58,7 +58,7 @@ const schema =[
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
options: getDictOptions('wy_cbfylx'),
|
||||
onChange: async (value:any) => {
|
||||
onChange: async (value:any) => {
|
||||
// 请求并更新下拉
|
||||
if (!value) {
|
||||
costItemsOptions.value = [];
|
||||
@@ -205,7 +205,7 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
if (isUpdate.value && id) {
|
||||
const record = await costMeterWaterInfo(id);
|
||||
console.log(1,record);
|
||||
|
||||
|
||||
const costItemsRes = await costItemSettingList({ pageSize: 1000000000, pageNum: 1, costType: record.costType });
|
||||
costItemsOptions.value = (costItemsRes?.rows || []).map(item => ({
|
||||
label: item.chargeItem,
|
||||
@@ -234,7 +234,7 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
]);
|
||||
await formApi.setValues(record);
|
||||
console.log(2,await formApi.getValues());
|
||||
|
||||
|
||||
}
|
||||
await markInitialized();
|
||||
|
||||
@@ -252,7 +252,7 @@ async function handleConfirm() {
|
||||
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
console.log(data);
|
||||
|
||||
|
||||
await (isUpdate.value ? costMeterWaterUpdate(data) : costMeterWaterAdd(data));
|
||||
resetInitialized();
|
||||
//必须要手动清空,不然ref会保留值
|
||||
@@ -378,4 +378,3 @@ async function setupCommunitySelect() {
|
||||
-webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
@@ -0,0 +1,168 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import {getDictOptions} from "#/utils/dict";
|
||||
import {renderDict} from "#/utils/render";
|
||||
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options:getDictOptions('wy_yjfklx')
|
||||
},
|
||||
fieldName: 'feedbackType',
|
||||
label: '反馈类型',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options:getDictOptions('wy_yjclzt')
|
||||
},
|
||||
fieldName: 'status',
|
||||
label: '处理状态',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '反馈类型',
|
||||
field: 'feedbackType',
|
||||
slots:{
|
||||
default: ({row})=>{
|
||||
return renderDict(row.feedbackType,'wy_yjfklx')
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '反馈人',
|
||||
field: 'feedbackPersion',
|
||||
},
|
||||
{
|
||||
title: '反馈人电话',
|
||||
field: 'feedbackPersionPhone',
|
||||
},
|
||||
{
|
||||
title: '反馈内容',
|
||||
field: 'feedbackContent',
|
||||
},
|
||||
{
|
||||
title: '反馈位置',
|
||||
field: 'feedbackLocation',
|
||||
},
|
||||
{
|
||||
title: '反馈图片',
|
||||
field: 'feedbackImg',
|
||||
},
|
||||
{
|
||||
title: '是否转至工单',
|
||||
field: 'isWorkOrder',
|
||||
slots:{
|
||||
default: ({row})=>{
|
||||
return renderDict(row.isWorkOrder,'wy_sf')
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '处理状态',
|
||||
field: 'status',
|
||||
slots:{
|
||||
default: ({row})=>{
|
||||
return renderDict(row.status,'wy_yjclzt')
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '客服电话',
|
||||
field: 'serviceName',
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
fixed: 'right',
|
||||
slots: { default: 'action' },
|
||||
title: '操作',
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
|
||||
export const modalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: '主键',
|
||||
fieldName: 'id',
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
show: () => false,
|
||||
triggerFields: [''],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '反馈类型',
|
||||
fieldName: 'feedbackType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options:getDictOptions('wy_yjfklx')
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
label: '反馈人',
|
||||
fieldName: 'feedbackPersion',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '反馈人电话',
|
||||
fieldName: 'feedbackPersionPhone',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '反馈内容',
|
||||
fieldName: 'feedbackContent',
|
||||
component: 'Textarea',
|
||||
rules: 'required',
|
||||
formItemClass:'col-span-2'
|
||||
},
|
||||
{
|
||||
label: '反馈位置',
|
||||
fieldName: 'feedbackLocation',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
formItemClass:'col-span-2'
|
||||
},
|
||||
{
|
||||
label: '反馈图片',
|
||||
fieldName: 'feedbackImg',
|
||||
component: 'ImageUpload',
|
||||
componentProps: {
|
||||
// accept: 'image/*', // 可选拓展名或者mime类型 ,拼接
|
||||
// maxCount: 1, // 最大上传文件数 默认为1 为1会绑定为string而非string[]类型
|
||||
},
|
||||
rules: 'required',
|
||||
formItemClass:'col-span-2'
|
||||
},
|
||||
{
|
||||
label: '转至工单',
|
||||
fieldName: 'isWorkOrder',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
options: getDictOptions('wy_sf'),
|
||||
},
|
||||
defaultValue:'0'
|
||||
},
|
||||
{
|
||||
label: '处理状态',
|
||||
fieldName: 'status',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('wy_yjclzt')
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '客服电话',
|
||||
fieldName: 'serviceName',
|
||||
component: 'Input',
|
||||
},
|
||||
];
|
@@ -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 { feedbacksAdd, feedbacksInfo, feedbacksUpdate } from '#/api/property/customerService/feedbacks';
|
||||
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-1',
|
||||
// 默认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-[70%]',
|
||||
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 feedbacksInfo(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 ? feedbacksUpdate(data) : feedbacksAdd(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>
|
||||
|
@@ -0,0 +1,169 @@
|
||||
<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 {
|
||||
useVbenVxeGrid,
|
||||
vxeCheckboxChecked,
|
||||
type VxeGridProps
|
||||
} from '#/adapter/vxe-table';
|
||||
|
||||
import {
|
||||
feedbacksExport,
|
||||
feedbacksList,
|
||||
feedbacksRemove,
|
||||
} from '#/api/property/customerService/feedbacks';
|
||||
import type { FeedbacksForm } from '#/api/property/customerService/feedbacks/model';
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
|
||||
import feedbacksModal from './feedbacks-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',
|
||||
};
|
||||
|
||||
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 feedbacksList({
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'system-feedbacks-index'
|
||||
};
|
||||
|
||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
});
|
||||
|
||||
const [FeedbacksModal, modalApi] = useVbenModal({
|
||||
connectedComponent: feedbacksModal,
|
||||
});
|
||||
|
||||
function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleEdit(row: Required<FeedbacksForm>) {
|
||||
modalApi.setData({ id: row.id });
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleDelete(row: Required<FeedbacksForm>) {
|
||||
await feedbacksRemove(row.id);
|
||||
await tableApi.query();
|
||||
}
|
||||
|
||||
function handleMultiDelete() {
|
||||
const rows = tableApi.grid.getCheckboxRecords();
|
||||
const ids = rows.map((row: Required<FeedbacksForm>) => row.id);
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
okType: 'danger',
|
||||
content: `确认删除选中的${ids.length}条记录吗?`,
|
||||
onOk: async () => {
|
||||
await feedbacksRemove(ids);
|
||||
await tableApi.query();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleDownloadExcel() {
|
||||
commonDownloadExcel(feedbacksExport, '意见反馈数据', 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="['system:feedbacks:export']"
|
||||
@click="handleDownloadExcel"
|
||||
>
|
||||
{{ $t('pages.common.export') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
danger
|
||||
type="primary"
|
||||
v-access:code="['system:feedbacks:remove']"
|
||||
@click="handleMultiDelete">
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
v-access:code="['system:feedbacks:add']"
|
||||
@click="handleAdd"
|
||||
>
|
||||
{{ $t('pages.common.add') }}
|
||||
</a-button>
|
||||
</Space>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
v-access:code="['system:feedbacks: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="['system:feedbacks:remove']"
|
||||
@click.stop=""
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</ghost-button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<FeedbacksModal @reload="tableApi.query()" />
|
||||
</Page>
|
||||
</template>
|
@@ -1,8 +1,10 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import {getDictOptions} from "#/utils/dict";
|
||||
import {renderDict} from "#/utils/render";
|
||||
import {resident_unitList} from "#/api/property/resident/unit";
|
||||
import type { FormSchemaGetter } from '#/adapter/form'
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table'
|
||||
import { getDictOptions } from "#/utils/dict"
|
||||
import { renderDict } from "#/utils/render"
|
||||
import { resident_unitList } from "#/api/property/resident/unit"
|
||||
import { authGroupList } from '#/api/sis/authGroup'
|
||||
import type { AuthGroupVO, AuthGroupQuery } from '#/api/sis/authGroup/model'
|
||||
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
@@ -19,7 +21,7 @@ export const querySchema: FormSchemaGetter = () => [
|
||||
debounceTime: 500,
|
||||
allowClear: true,
|
||||
placeholder: '请选择所属单位',
|
||||
filterOption:true
|
||||
filterOption: true
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -35,7 +37,7 @@ export const querySchema: FormSchemaGetter = () => [
|
||||
fieldName: 'state',
|
||||
label: '状态',
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
@@ -66,9 +68,9 @@ export const columns: VxeGridProps['columns'] = [
|
||||
{
|
||||
title: '性别',
|
||||
field: 'gender',
|
||||
slots:{
|
||||
default: ({row})=>{
|
||||
return renderDict(row.gender,'sys_user_sex')
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return renderDict(row.gender, 'sys_user_sex')
|
||||
}
|
||||
},
|
||||
width: 100
|
||||
@@ -101,9 +103,9 @@ export const columns: VxeGridProps['columns'] = [
|
||||
{
|
||||
title: '状态',
|
||||
field: 'state',
|
||||
slots:{
|
||||
default: ({row})=>{
|
||||
return renderDict(row.state,'wy_rzryzt')
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return renderDict(row.state, 'wy_rzryzt')
|
||||
}
|
||||
},
|
||||
width: 100
|
||||
@@ -120,8 +122,9 @@ export const columns: VxeGridProps['columns'] = [
|
||||
title: '操作',
|
||||
minWidth: 180,
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
let authGroupArr: AuthGroupVO[] = []
|
||||
export const modalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: '主键id',
|
||||
@@ -144,7 +147,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
fieldName: 'unitId',
|
||||
component: 'Select',
|
||||
formItemClass: 'col-span-2',
|
||||
rules:'selectRequired',
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
// {
|
||||
// label: '入驻位置',
|
||||
@@ -162,7 +165,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
rules:"required"
|
||||
rules: "required"
|
||||
},
|
||||
{
|
||||
label: '车牌号码',
|
||||
@@ -186,7 +189,47 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
componentProps: {
|
||||
options: getDictOptions('wy_rzryzt'),
|
||||
},
|
||||
rules:'selectRequired'
|
||||
rules: 'selectRequired'
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
fieldName: 'time',
|
||||
component: ''
|
||||
},
|
||||
{
|
||||
label: '授权期限',
|
||||
fieldName: 'authTime',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '通行权限组',
|
||||
fieldName: 'authGroupId',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
resultField: 'list', // 根据API返回结构调整
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
// immediate: true,
|
||||
api: async () => {
|
||||
if (!authGroupArr || authGroupArr.length == 0) {
|
||||
const params: AuthGroupQuery = {
|
||||
groupType: 2,
|
||||
pageNum: 1,
|
||||
pageSize: 500,
|
||||
}
|
||||
const res = await authGroupList(params)
|
||||
authGroupArr = res.rows
|
||||
}
|
||||
return authGroupArr
|
||||
},
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
@@ -194,7 +237,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
component: 'Textarea',
|
||||
formItemClass: 'col-span-2',
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
//门禁记录
|
||||
export const accessControlColumns: VxeGridProps['columns'] = [
|
||||
@@ -231,7 +274,7 @@ export const accessControlColumns: VxeGridProps['columns'] = [
|
||||
field: 'locathon',
|
||||
},
|
||||
|
||||
];
|
||||
]
|
||||
|
||||
//车辆记录
|
||||
export const carColumns: VxeGridProps['columns'] = [
|
||||
@@ -275,20 +318,20 @@ export const carColumns: VxeGridProps['columns'] = [
|
||||
title: '备注',
|
||||
field: 'remark',
|
||||
},
|
||||
];
|
||||
]
|
||||
export async function getUnitList(): Promise<{ value: number; label: string }[]> {
|
||||
const queryParam = {
|
||||
pageNum: 1000,
|
||||
pageSize: 1,
|
||||
};
|
||||
const res = await resident_unitList(queryParam);
|
||||
const data: { value: number; label: string }[] = [];
|
||||
}
|
||||
const res = await resident_unitList(queryParam)
|
||||
const data: { value: number; label: string }[] = []
|
||||
|
||||
res.rows.forEach((r: any) => {
|
||||
data.push({
|
||||
value: r.id,
|
||||
label: r.name,
|
||||
});
|
||||
});
|
||||
return data;
|
||||
})
|
||||
})
|
||||
return data
|
||||
}
|
||||
|
@@ -1,8 +1,10 @@
|
||||
import type {FormSchemaGetter} from '#/adapter/form';
|
||||
import type {VxeGridProps} from '#/adapter/vxe-table';
|
||||
import {getDictOptions} from "#/utils/dict";
|
||||
import {renderDict} from "#/utils/render";
|
||||
import {z} from "#/adapter/form";
|
||||
import type { FormSchemaGetter } from '#/adapter/form'
|
||||
import { authGroupList } from '#/api/sis/authGroup'
|
||||
import type { AuthGroupVO, AuthGroupQuery } from '#/api/sis/authGroup/model'
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table'
|
||||
import { getDictOptions } from "#/utils/dict"
|
||||
import { renderDict } from "#/utils/render"
|
||||
import { z } from "#/adapter/form"
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
@@ -23,10 +25,10 @@ export const querySchema: FormSchemaGetter = () => [
|
||||
fieldName: 'state',
|
||||
label: '状态',
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{type: 'checkbox', width: 60},
|
||||
{ type: 'checkbox', width: 60 },
|
||||
// {
|
||||
// title: '序号',
|
||||
// field: 'id',
|
||||
@@ -40,10 +42,11 @@ export const columns: VxeGridProps['columns'] = [
|
||||
{
|
||||
title: '单位编号',
|
||||
field: 'unitNumber',
|
||||
slots:{
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return row.id;
|
||||
}},
|
||||
return row.id
|
||||
}
|
||||
},
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
@@ -56,7 +59,7 @@ export const columns: VxeGridProps['columns'] = [
|
||||
field: 'type',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return renderDict(row.type, 'wy_qylx');
|
||||
return renderDict(row.type, 'wy_qylx')
|
||||
},
|
||||
},
|
||||
width: 100
|
||||
@@ -84,7 +87,7 @@ export const columns: VxeGridProps['columns'] = [
|
||||
{
|
||||
title: '状态',
|
||||
field: 'state',
|
||||
slots: {default: 'state'},
|
||||
slots: { default: 'state' },
|
||||
width: 100,
|
||||
},
|
||||
// {
|
||||
@@ -105,12 +108,13 @@ export const columns: VxeGridProps['columns'] = [
|
||||
{
|
||||
field: 'action',
|
||||
fixed: 'right',
|
||||
slots: {default: 'action'},
|
||||
slots: { default: 'action' },
|
||||
title: '操作',
|
||||
minWidth: 180,
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
let authGroupArr: AuthGroupVO[] = []
|
||||
export const modalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: 'id',
|
||||
@@ -147,7 +151,10 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
label: '联系电话',
|
||||
fieldName: 'phone',
|
||||
component: 'Input',
|
||||
rules: z.string().regex(/^1[3-9]\d{9}$/, { message: '格式错误' }),
|
||||
rules: z.union([
|
||||
z.string().regex(/^1[3-9]\d{9}$/, { message: '手机号格式错误' }),
|
||||
z.number().int().min(1000000000).max(19999999999, { message: '手机号格式错误' })
|
||||
]).transform(val => val.toString()),
|
||||
},
|
||||
{
|
||||
label: '入驻位置',
|
||||
@@ -167,10 +174,50 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
fieldName: 'time',
|
||||
component: ''
|
||||
},
|
||||
{
|
||||
label: '授权期限',
|
||||
fieldName: 'authTime',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '通行权限组',
|
||||
fieldName: 'authGroupId',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
resultField: 'list', // 根据API返回结构调整
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
// immediate: true,
|
||||
api: async () => {
|
||||
if (!authGroupArr || authGroupArr.length == 0) {
|
||||
const params: AuthGroupQuery = {
|
||||
groupType: 1,
|
||||
pageNum: 1,
|
||||
pageSize: 500,
|
||||
}
|
||||
const res = await authGroupList(params)
|
||||
authGroupArr = res.rows
|
||||
}
|
||||
return authGroupArr
|
||||
},
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
fieldName: 'remark',
|
||||
component: 'Textarea',
|
||||
formItemClass: 'col-span-2'
|
||||
},
|
||||
];
|
||||
]
|
||||
|
@@ -44,7 +44,7 @@ async function handleOpenChange(open: boolean) {
|
||||
|
||||
<template>
|
||||
<BasicModal :footer="false" :fullscreen-button="false" title="入驻单位信息" class="w-[70%]">
|
||||
<Descriptions v-if="unitDetail" size="small" :column="2" bordered :labelStyle="{width:'100px'}">
|
||||
<Descriptions v-if="unitDetail" size="small" :column="2" bordered :labelStyle="{width:'110px'}">
|
||||
<DescriptionsItem label="单位编号">
|
||||
{{ unitDetail.id }}
|
||||
</DescriptionsItem>
|
||||
@@ -75,6 +75,9 @@ async function handleOpenChange(open: boolean) {
|
||||
<component
|
||||
:is="renderDict(unitDetail.state,'wy_state')"
|
||||
/>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="通行权限组">
|
||||
{{ unitDetail.authGroupId ?? '-' }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="备注">
|
||||
{{ unitDetail.remark ?? '-' }}
|
||||
|
101
apps/web-antd/src/views/sis/authGroup/authGroup-modal.vue
Normal file
101
apps/web-antd/src/views/sis/authGroup/authGroup-modal.vue
Normal file
@@ -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 { authGroupAdd, authGroupInfo, authGroupUpdate } from '#/api/sis/authGroup';
|
||||
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 authGroupInfo(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 ? authGroupUpdate(data) : authGroupAdd(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>
|
||||
|
75
apps/web-antd/src/views/sis/authGroup/data.ts
Normal file
75
apps/web-antd/src/views/sis/authGroup/data.ts
Normal file
@@ -0,0 +1,75 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form'
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table'
|
||||
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'name',
|
||||
label: '权限名称',
|
||||
},
|
||||
{
|
||||
label: '面向对象',
|
||||
fieldName: 'groupType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [{ 'value': 1, 'label': '单位' }, { 'value': 2, 'label': '个人' }]
|
||||
},
|
||||
}
|
||||
]
|
||||
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// export const columns: () => VxeGridProps['columns'] = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '权限名称',
|
||||
field: 'name',
|
||||
},
|
||||
{
|
||||
title: '面向对象',
|
||||
field: 'groupType',
|
||||
slots: { default: 'groupType' },
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '是否启用',
|
||||
field: 'isEnable',
|
||||
slots: { default: 'isEnable' },
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
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: 'name',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '面向对象',
|
||||
fieldName: 'groupType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [{ 'value': 1, 'label': '单位' }, { 'value': 2, 'label': '个人' }]
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
]
|
170
apps/web-antd/src/views/sis/authGroup/index.vue
Normal file
170
apps/web-antd/src/views/sis/authGroup/index.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<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, Tag } from 'ant-design-vue'
|
||||
import { TableSwitch } from "#/components/table"
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
vxeCheckboxChecked,
|
||||
type VxeGridProps
|
||||
} from '#/adapter/vxe-table'
|
||||
|
||||
import {
|
||||
authGroupExport,
|
||||
authGroupList,
|
||||
authGroupRemove,
|
||||
} from '#/api/sis/authGroup'
|
||||
import type { AuthGroupForm } from '#/api/sis/authGroup/model'
|
||||
import { commonDownloadExcel } from '#/utils/file/download'
|
||||
|
||||
import authGroupModal from './authGroup-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 authGroupList({
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
})
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'sis-authGroup-index'
|
||||
}
|
||||
|
||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
})
|
||||
|
||||
const [AuthGroupModal, modalApi] = useVbenModal({
|
||||
connectedComponent: authGroupModal,
|
||||
})
|
||||
|
||||
function handleAdd() {
|
||||
modalApi.setData({})
|
||||
modalApi.open()
|
||||
}
|
||||
|
||||
async function handleEdit(row: Required<AuthGroupForm>) {
|
||||
modalApi.setData({ id: row.id })
|
||||
modalApi.open()
|
||||
}
|
||||
|
||||
async function handleDelete(row: Required<AuthGroupForm>) {
|
||||
await authGroupRemove(row.id)
|
||||
await tableApi.query()
|
||||
}
|
||||
|
||||
function handleMultiDelete() {
|
||||
const rows = tableApi.grid.getCheckboxRecords()
|
||||
const ids = rows.map((row: Required<AuthGroupForm>) => row.id)
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
okType: 'danger',
|
||||
content: `确认删除选中的${ids.length}条记录吗?`,
|
||||
onOk: async () => {
|
||||
await authGroupRemove(ids)
|
||||
await tableApi.query()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function handleDownloadExcel() {
|
||||
commonDownloadExcel(authGroupExport, '授权组数据', 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:authGroup:export']" @click="handleDownloadExcel">
|
||||
{{ $t('pages.common.export') }}
|
||||
</a-button>
|
||||
<a-button :disabled="!vxeCheckboxChecked(tableApi)" danger type="primary"
|
||||
v-access:code="['sis:authGroup:remove']" @click="handleMultiDelete">
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
<a-button type="primary" v-access:code="['sis:authGroup:add']" @click="handleAdd">
|
||||
{{ $t('pages.common.add') }}
|
||||
</a-button>
|
||||
</Space>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button v-access:code="['sis:authGroup: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:authGroup:remove']" @click.stop="">
|
||||
{{ $t('pages.common.delete') }}
|
||||
</ghost-button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</template>
|
||||
|
||||
<template #isEnable="{ row }">
|
||||
<TableSwitch :checkedValue=true :unCheckedValue=false :value="row.isEnable" @reload="() => tableApi.query()" />
|
||||
</template>
|
||||
|
||||
<template #groupType="{ row }">
|
||||
<Tag v-if="row.groupType === 1" color="processing">单位</Tag>
|
||||
<Tag v-else color="warning">个人</Tag>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<AuthGroupModal @reload="tableApi.query()" />
|
||||
</Page>
|
||||
</template>
|
@@ -40,7 +40,6 @@ import ChannelTree from './channel-tree.vue';
|
||||
import mpegts from 'mpegts.js';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { addStreamProxy } from '#/api/sis/stream';
|
||||
import type { AddStreamProxyQuery } from '#/api/sis/stream/model';
|
||||
|
||||
const selected = 'selected';
|
||||
|
||||
@@ -78,12 +77,13 @@ function playerSelect(index: number) {
|
||||
*/
|
||||
function onPlayerNumChanged(val: number) {
|
||||
// 1个屏幕
|
||||
const changeBeforeNum = playerNum.value;
|
||||
let changeNum = 1;
|
||||
if (val === 1) {
|
||||
playerStyle.value = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
};
|
||||
playerNum.value = 1;
|
||||
}
|
||||
// 4个屏幕 2*2
|
||||
else if (val === 2) {
|
||||
@@ -91,7 +91,7 @@ function onPlayerNumChanged(val: number) {
|
||||
width: '50%',
|
||||
height: '50%',
|
||||
};
|
||||
playerNum.value = 4;
|
||||
changeNum = 4;
|
||||
}
|
||||
// 9个屏幕 3*3
|
||||
else if (val === 3) {
|
||||
@@ -99,7 +99,7 @@ function onPlayerNumChanged(val: number) {
|
||||
width: '33.33%',
|
||||
height: '33.33%',
|
||||
};
|
||||
playerNum.value = 9;
|
||||
changeNum = 9;
|
||||
}
|
||||
// 16个屏幕 4*4
|
||||
else {
|
||||
@@ -107,7 +107,29 @@ function onPlayerNumChanged(val: number) {
|
||||
width: '25%',
|
||||
height: '25%',
|
||||
};
|
||||
playerNum.value = 16;
|
||||
changeNum = 16;
|
||||
}
|
||||
playerNum.value = changeNum;
|
||||
// 缩小布局
|
||||
if (changeBeforeNum > changeNum) {
|
||||
debugger;
|
||||
const playerArr = [];
|
||||
for (let i = 0; i < playerList.length; i++) {
|
||||
const playerBox = playerList[i];
|
||||
if (playerBox) {
|
||||
playerArr.push(playerBox);
|
||||
}
|
||||
playerList[i] = null;
|
||||
}
|
||||
for (let i = 0; i < playerArr.length; i++) {
|
||||
const play = playerArr[i];
|
||||
if (i < changeNum) {
|
||||
// 获取播放元素
|
||||
changeElPlayer(play, i);
|
||||
} else {
|
||||
closePlayVieo(play.player);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -151,8 +173,12 @@ function onNodeChecked(
|
||||
}
|
||||
// 新增
|
||||
if (checked) {
|
||||
if (currentSelectPlayerIndex.value === -1 && checkNode.length == 0) {
|
||||
doPlayer(checkNode[0], currentSelectPlayerIndex.value);
|
||||
/**
|
||||
* 如果当前页面有选择播放未知,并且播放视频只有一个,则播放到制定位置
|
||||
*/
|
||||
debugger;
|
||||
if (currentSelectPlayerIndex.value !== -1 && checkNode.length == 1) {
|
||||
doPlayer(checkNode[0], currentSelectPlayerIndex.value - 1);
|
||||
}
|
||||
// 批量播放 currentSelectPlayerIndex 将不再生效
|
||||
else {
|
||||
@@ -196,6 +222,42 @@ function onNodeChecked(
|
||||
}
|
||||
}
|
||||
|
||||
function changeElPlayer(playerInfo: any, index: number) {
|
||||
const playerData = playerInfo.data;
|
||||
const oldPlayer = playerInfo.player;
|
||||
if (oldPlayer) {
|
||||
closePlayVieo(oldPlayer);
|
||||
}
|
||||
const videoConfig = {
|
||||
type: 'flv',
|
||||
url: playerData.url,
|
||||
isLive: true,
|
||||
hasAudio: false,
|
||||
hasVideo: true,
|
||||
enableWorker: true, // 启用分离的线程进行转码
|
||||
enableStashBuffer: false, // 关闭IO隐藏缓冲区
|
||||
stashInitialSize: 256, // 减少首帧显示等待时长
|
||||
};
|
||||
const playerConfig = {
|
||||
enableErrorRecover: true, // 启用错误恢复
|
||||
autoCleanupMaxBackwardDuration: 30,
|
||||
autoCleanupMinBackwardDuration: 10,
|
||||
};
|
||||
const player = mpegts.createPlayer(videoConfig, playerConfig);
|
||||
const videoElement = itemRefs.value[index];
|
||||
if (videoElement) {
|
||||
player.attachMediaElement(videoElement);
|
||||
player.load();
|
||||
player.play();
|
||||
playerList[index] = {
|
||||
player,
|
||||
data: playerData,
|
||||
};
|
||||
} else {
|
||||
console.log('视频播放元素获取异常');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始播放视频流
|
||||
* @param nodeData 播放的节点数据
|
||||
@@ -213,16 +275,18 @@ function doPlayer(nodeData: any, index: number) {
|
||||
};
|
||||
addStreamProxy(params).then((res) => {
|
||||
const url = res.wsFlv;
|
||||
// 将url 绑定到 nodeData
|
||||
nodeData.url = url;
|
||||
closePlayer(index);
|
||||
const videoConfig = {
|
||||
type: 'flv',
|
||||
url: url,
|
||||
isLive: true,
|
||||
hasAudio: true,
|
||||
hasAudio: false,
|
||||
hasVideo: true,
|
||||
enableWorker: true, // 启用分离的线程进行转码
|
||||
enableStashBuffer: false, // 关闭IO隐藏缓冲区
|
||||
stashInitialSize: 128, // 减少首帧显示等待时长
|
||||
stashInitialSize: 256, // 减少首帧显示等待时长
|
||||
};
|
||||
const playerConfig = {
|
||||
enableErrorRecover: true, // 启用错误恢复
|
||||
@@ -248,6 +312,18 @@ function doPlayer(nodeData: any, index: number) {
|
||||
}
|
||||
}
|
||||
|
||||
function closePlayVieo(plInfo: any) {
|
||||
if (plInfo) {
|
||||
try {
|
||||
plInfo.pause(); // 暂停
|
||||
plInfo.unload(); // 卸载
|
||||
plInfo.destroy(); // 销毁
|
||||
} catch (e) {
|
||||
console.log('播放器关闭失败,e=', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function closePlayer(index: number) {
|
||||
// 如果播放器存在,尝试关闭
|
||||
const pData = playerList[index];
|
||||
|
Reference in New Issue
Block a user