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

This commit is contained in:
FLL
2025-07-23 15:24:18 +08:00
30 changed files with 2360 additions and 487 deletions

View File

@@ -5,7 +5,7 @@ export interface ShiftVO {
/**
* 主键id
*/
id: string | number;
id: string;
/**
* 班次名称

View File

@@ -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}`);
}

View 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;
}

View File

@@ -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
}

View File

@@ -56,6 +56,16 @@ export interface Resident_unitVO {
*/
remark: string;
/**
* 权限组id
*/
authGroupId?: string | number;
/**
* 权限组名称
*/
authGroupName?: string;
}
export interface Resident_unitForm extends BaseEntity {

View 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}`);
}

View 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;
}

View File

@@ -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,
);
}

View File

@@ -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>

View File

@@ -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'">

View File

@@ -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) {

View File

@@ -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'
},
]

View File

@@ -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;
}

View File

@@ -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>

View File

@@ -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>

View File

@@ -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">

View File

@@ -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
}
];

View 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;
}

View File

@@ -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>

View File

@@ -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>

View File

@@ -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',
},
];

View 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 { 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>

View File

@@ -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>

View File

@@ -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
}

View File

@@ -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'
},
];
]

View File

@@ -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 ?? '-' }}

View 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>

View 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',
},
]

View 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>

View File

@@ -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];