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:
@@ -7,21 +7,20 @@ import { commonExport } from '#/api/helper';
|
|||||||
import { requestClient } from '#/api/request';
|
import { requestClient } from '#/api/request';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 查询排班列表
|
* 分页查询排班列表
|
||||||
* @param params
|
* @param params
|
||||||
* @returns 排班列表
|
* @returns 排班列表
|
||||||
*/
|
*/
|
||||||
export function arrangementList(params?: ArrangementQuery) {
|
export function arrangementList(params?: ArrangementQuery) {
|
||||||
return requestClient.get<PageResult<ArrangementVO>>('/property/arrangement/list', { params });
|
return requestClient.get<PageResult<ArrangementVO>>('/property/arrangement/list', { params });
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 导出排班列表
|
* 根据月份查询排班列表
|
||||||
* @param params
|
* @param params
|
||||||
* @returns 排班列表
|
* @returns 排班列表
|
||||||
*/
|
*/
|
||||||
export function arrangementExport(params?: ArrangementQuery) {
|
export function arrangementCalender(params?: ArrangementQuery) {
|
||||||
return commonExport('/property/arrangement/export', params ?? {});
|
return requestClient.get<any>('/property/arrangement/explore', { params });
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@@ -40,7 +40,6 @@ export interface ArrangementVO {
|
|||||||
* 状态:0-未生效,1-已生效
|
* 状态:0-未生效,1-已生效
|
||||||
*/
|
*/
|
||||||
status: number;
|
status: number;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ArrangementForm extends BaseEntity {
|
export interface ArrangementForm extends BaseEntity {
|
||||||
@@ -83,7 +82,10 @@ export interface ArrangementForm extends BaseEntity {
|
|||||||
* 状态:0-未生效,1-已生效
|
* 状态:0-未生效,1-已生效
|
||||||
*/
|
*/
|
||||||
status?: number;
|
status?: number;
|
||||||
|
/**
|
||||||
|
* 排班人员详情
|
||||||
|
*/
|
||||||
|
userGroupList: any[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ArrangementQuery extends PageQuery {
|
export interface ArrangementQuery extends PageQuery {
|
||||||
@@ -123,7 +125,12 @@ export interface ArrangementQuery extends PageQuery {
|
|||||||
status?: number;
|
status?: number;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 日期范围参数
|
* 日期范围参数
|
||||||
*/
|
*/
|
||||||
params?: any;
|
params?: any;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 月份
|
||||||
|
*/
|
||||||
|
month?: string;
|
||||||
}
|
}
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 556 KiB After Width: | Height: | Size: 553 KiB |
Binary file not shown.
Before Width: | Height: | Size: 549 KiB After Width: | Height: | Size: 548 KiB |
@@ -34,12 +34,47 @@ const isUpdate = ref(false);
|
|||||||
const title = computed(() => {
|
const title = computed(() => {
|
||||||
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
||||||
});
|
});
|
||||||
|
//表单项
|
||||||
|
let 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 formRef = ref();
|
||||||
|
let singleDate = ref(''); //排班日期单个日期
|
||||||
|
let longDate = ref(''); //排班日期从此日起长期有效
|
||||||
|
let rangeDate = ref(['', '']); //排班日期在此期间有效
|
||||||
|
const rules = {
|
||||||
|
groupId: [{ required: true, message: '请选择考勤组' }],
|
||||||
|
attendanceType: [{ required: true }],
|
||||||
|
dateType: [{ required: true, message: '请选择排班日期' }],
|
||||||
|
};
|
||||||
const groupOptions = ref<any[]>([]);
|
const groupOptions = ref<any[]>([]);
|
||||||
const groupMap = ref<Record<string, any>>({}); // 用于快速查找
|
const groupMap = ref<Record<string, any>>({}); // 用于快速查找
|
||||||
const tableData = reactive<
|
let tableData = reactive<
|
||||||
{ dept: { unitId: string | number; unitName: string }; users: PersonVO[] }[]
|
{ dept: { unitId: string | number; unitName: string }; users: PersonVO[] }[]
|
||||||
>([]);
|
>([]); //存放考勤组人员列表数据
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
title: '序号',
|
title: '序号',
|
||||||
@@ -108,44 +143,44 @@ function handleRemoveRow(index: number) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleTableData(newTableData: any) {
|
function handleTableData(newTableData: any) {
|
||||||
tableData.splice(0, tableData.length, ...newTableData);
|
// 如果现有数据为空,直接替换
|
||||||
|
if (tableData.length === 0) {
|
||||||
|
tableData.splice(0, 0, ...newTableData);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果新数据为空,不做处理
|
||||||
|
if (newTableData.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理有数据的情况
|
||||||
|
for (const newItem of newTableData) {
|
||||||
|
// 查找是否已存在相同部门
|
||||||
|
const existingDeptIndex = tableData.findIndex(
|
||||||
|
(item) => item.dept.unitId === newItem.dept.unitId,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (existingDeptIndex !== -1) {
|
||||||
|
// 找到相同部门,检查人员是否有重复
|
||||||
|
const existingDept = tableData[existingDeptIndex];
|
||||||
|
for (const newUser of newItem.users) {
|
||||||
|
// 检查该用户是否已存在
|
||||||
|
const userExists = existingDept?.users.some(
|
||||||
|
(existingUser) => existingUser.id === newUser.id,
|
||||||
|
);
|
||||||
|
if (!userExists) {
|
||||||
|
// 用户不存在,添加到现有部门
|
||||||
|
existingDept?.users.push(newUser);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 部门不存在,直接添加新部门
|
||||||
|
tableData.push(newItem);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
//表单项
|
|
||||||
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({
|
const [BasicForm, formApi] = useVbenForm({
|
||||||
commonConfig: {
|
commonConfig: {
|
||||||
// 默认占满两列
|
// 默认占满两列
|
||||||
@@ -173,7 +208,7 @@ const [UnitPersonModal, unitPersonmodalApi] = useVbenModal({
|
|||||||
});
|
});
|
||||||
const [BasicModal, modalApi] = useVbenModal({
|
const [BasicModal, modalApi] = useVbenModal({
|
||||||
// 在这里更改宽度
|
// 在这里更改宽度
|
||||||
class: 'w-[70%]',
|
class: 'w-[85%]',
|
||||||
fullscreenButton: false,
|
fullscreenButton: false,
|
||||||
onBeforeClose,
|
onBeforeClose,
|
||||||
onClosed: handleClosed,
|
onClosed: handleClosed,
|
||||||
@@ -183,7 +218,6 @@ const [BasicModal, modalApi] = useVbenModal({
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
await getGroupList();
|
await getGroupList();
|
||||||
console.log(getDictOptions('wy_kqlx'));
|
|
||||||
modalApi.modalLoading(true);
|
modalApi.modalLoading(true);
|
||||||
const { id } = modalApi.getData() as { id?: number | string };
|
const { id } = modalApi.getData() as { id?: number | string };
|
||||||
isUpdate.value = !!id;
|
isUpdate.value = !!id;
|
||||||
@@ -220,7 +254,6 @@ async function getGroupList() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
function chooseGroup(value: any) {
|
function chooseGroup(value: any) {
|
||||||
console.log(value);
|
|
||||||
const group = groupMap.value[value];
|
const group = groupMap.value[value];
|
||||||
if (group) {
|
if (group) {
|
||||||
formModel.attendanceType = String(group.attendanceType);
|
formModel.attendanceType = String(group.attendanceType);
|
||||||
@@ -232,12 +265,10 @@ async function handleDateTypeChange(value: any) {
|
|||||||
async function handleConfirm() {
|
async function handleConfirm() {
|
||||||
try {
|
try {
|
||||||
modalApi.lock(true);
|
modalApi.lock(true);
|
||||||
// await formRef.value.validate(); // 先校验
|
await formRef.value.validate(); // 先校验
|
||||||
const data = formModel;
|
const data = formModel;
|
||||||
const { id } = modalApi.getData() as { id?: string };
|
const { id } = modalApi.getData() as { id?: string };
|
||||||
data.id = id ? id : '';
|
data.id = id ? id : '';
|
||||||
console.log(data);
|
|
||||||
|
|
||||||
if (data.dateType == 1) {
|
if (data.dateType == 1) {
|
||||||
if (singleDate.value) {
|
if (singleDate.value) {
|
||||||
data.startDate = dayjs(singleDate.value).format('YYYY-MM-DD');
|
data.startDate = dayjs(singleDate.value).format('YYYY-MM-DD');
|
||||||
@@ -264,10 +295,36 @@ async function handleConfirm() {
|
|||||||
data.endDate = dayjs(rangeDate.value[1]).format('YYYY-MM-DD');
|
data.endDate = dayjs(rangeDate.value[1]).format('YYYY-MM-DD');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// await (isUpdate.value ? arrangementUpdate(data) : arrangementAdd(data));
|
for (const item of tableData) {
|
||||||
|
for (const user of item.users) {
|
||||||
|
data.userGroupList.push({
|
||||||
|
deptId: item.dept.unitId, //部门ID
|
||||||
|
deptName: item.dept.unitName, //部门名称
|
||||||
|
employeeId: user.id, //员工ID
|
||||||
|
employeeName: user.userName, //员工姓名
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await (isUpdate.value ? arrangementUpdate(data) : arrangementAdd(data));
|
||||||
resetInitialized();
|
resetInitialized();
|
||||||
emit('reload');
|
emit('reload');
|
||||||
|
// 重置表单数据
|
||||||
|
Object.assign(formModel, {
|
||||||
|
id: '',
|
||||||
|
groupId: '',
|
||||||
|
attendanceType: '',
|
||||||
|
dateType: undefined,
|
||||||
|
startDate: '',
|
||||||
|
endDate: '',
|
||||||
|
userGroupList: [],
|
||||||
|
});
|
||||||
|
// 重置其他数据
|
||||||
|
tableData.length = 0;
|
||||||
|
singleDate.value = '';
|
||||||
|
longDate.value = '';
|
||||||
|
rangeDate.value = ['', ''];
|
||||||
modalApi.close();
|
modalApi.close();
|
||||||
|
await formApi.resetForm();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
} finally {
|
} finally {
|
||||||
@@ -276,8 +333,27 @@ async function handleConfirm() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function handleClosed() {
|
async function handleClosed() {
|
||||||
|
// 重置表单数据
|
||||||
|
Object.assign(formModel, {
|
||||||
|
id: '',
|
||||||
|
groupId: '',
|
||||||
|
attendanceType: '',
|
||||||
|
dateType: undefined,
|
||||||
|
startDate: '',
|
||||||
|
endDate: '',
|
||||||
|
userGroupList: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
// 重置其他数据
|
||||||
|
tableData.length = 0;
|
||||||
|
singleDate.value = '';
|
||||||
|
longDate.value = '';
|
||||||
|
rangeDate.value = ['', ''];
|
||||||
|
|
||||||
|
// 重置表单状态
|
||||||
await formApi.resetForm();
|
await formApi.resetForm();
|
||||||
resetInitialized();
|
resetInitialized();
|
||||||
|
modalApi.close();
|
||||||
}
|
}
|
||||||
onMounted(() => {});
|
onMounted(() => {});
|
||||||
</script>
|
</script>
|
||||||
|
@@ -1,11 +1,13 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { Radio, Button, Calendar, DatePicker } from 'ant-design-vue';
|
import { Radio, Button, Calendar, DatePicker, message } from 'ant-design-vue';
|
||||||
import type { RadioChangeEvent, BadgeProps } from 'ant-design-vue';
|
import type { RadioChangeEvent, BadgeProps } from 'ant-design-vue';
|
||||||
import { ref } from 'vue';
|
import { ref, onMounted, reactive } from 'vue';
|
||||||
import { Dayjs } from 'dayjs';
|
import { Dayjs } from 'dayjs';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
import arrangementModal from './arrangement-modal.vue';
|
import arrangementModal from './arrangement-modal.vue';
|
||||||
import { useVbenModal } from '@vben/common-ui';
|
import { useVbenModal } from '@vben/common-ui';
|
||||||
import type { PersonVO } from './type';
|
import { arrangementCalender } from '#/api/property/attendanceManagement/arrangement'; // 导入接口
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(e: 'changeView', value: boolean): void;
|
(e: 'changeView', value: boolean): void;
|
||||||
}>();
|
}>();
|
||||||
@@ -13,6 +15,57 @@ const props = defineProps<{
|
|||||||
viewMode: 'calender' | 'schedule';
|
viewMode: 'calender' | 'schedule';
|
||||||
}>();
|
}>();
|
||||||
const selectedDate = ref();
|
const selectedDate = ref();
|
||||||
|
const calendarData = reactive<any[]>([]);
|
||||||
|
const loading = ref(false);
|
||||||
|
// 查询日历数据
|
||||||
|
const fetchCalendarData = async (month?: string) => {
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
const params = {
|
||||||
|
month:
|
||||||
|
month ||
|
||||||
|
selectedDate.value?.format('YYYY-MM') ||
|
||||||
|
dayjs().format('YYYY-MM'),
|
||||||
|
};
|
||||||
|
const res = await arrangementCalender(params);
|
||||||
|
const currentMonth =
|
||||||
|
month ||
|
||||||
|
selectedDate.value?.format('YYYY-MM') ||
|
||||||
|
dayjs().format('YYYY-MM'); //当前月份的开始日期
|
||||||
|
// 生成日历渲染数据结构
|
||||||
|
for (const row of res.rows) {
|
||||||
|
if (row.endDate) {
|
||||||
|
//当开始时间小于当前月份的开始日期
|
||||||
|
if (row.startDate <= currentMonth) {
|
||||||
|
console.log(row, '小');
|
||||||
|
|
||||||
|
//如果结束时间小于当前月份的结束时间,则生成当前月份开始时间到row.endDate结束时间的n条数据
|
||||||
|
//如果结束时间大于等于当前月份的结束时间,则生成当前月份开始时间到当前月份结束时间(即当前月份天数)的n条数据
|
||||||
|
} else {
|
||||||
|
//当开始时间大于当前月份的开始日期
|
||||||
|
//如果结束时间小于当前月份的结束时间,则生成开始时间到结束时间的n条数据
|
||||||
|
console.log(row, '大');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
calendarData.push({
|
||||||
|
data: row.startDate,
|
||||||
|
item: {
|
||||||
|
id: row.id,
|
||||||
|
groupName: row.attendanceGroup.groupName,
|
||||||
|
groupId: row.attendanceGroup.id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// if (response) {
|
||||||
|
// calendarData.value = response.data || [];
|
||||||
|
// console.log('日历数据:', calendarData.value);
|
||||||
|
// }
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 切换视图模式
|
// 切换视图模式
|
||||||
function handleViewModeChange(e: RadioChangeEvent): void {
|
function handleViewModeChange(e: RadioChangeEvent): void {
|
||||||
// 将父组件的isCalenderView变为true
|
// 将父组件的isCalenderView变为true
|
||||||
@@ -28,13 +81,22 @@ const scheduleData: {
|
|||||||
{ date: '2025-07-06', list: [{ type: 'success', content: '8月8日事件' }] },
|
{ date: '2025-07-06', list: [{ type: 'success', content: '8月8日事件' }] },
|
||||||
// ...
|
// ...
|
||||||
];
|
];
|
||||||
|
|
||||||
const getListData2 = (
|
const getListData2 = (
|
||||||
current: Dayjs,
|
current: Dayjs,
|
||||||
): { type: BadgeProps['status']; content: string }[] => {
|
): { type: BadgeProps['status']; content: string }[] => {
|
||||||
const dateStr = current.format('YYYY-MM-DD');
|
const dateStr = current.format('YYYY-MM-DD');
|
||||||
const found = scheduleData.find((item) => item.date === dateStr);
|
// 优先使用接口数据
|
||||||
return found ? found.list : [];
|
if (calendarData.length > 0) {
|
||||||
|
const found = calendarData.find((item) => item.date === dateStr);
|
||||||
|
if (found) {
|
||||||
|
return found.list || [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 如果没有找到数据,返回空数组
|
||||||
|
return [];
|
||||||
};
|
};
|
||||||
|
|
||||||
const getListData = (
|
const getListData = (
|
||||||
value: Dayjs,
|
value: Dayjs,
|
||||||
): { type: BadgeProps['status']; content: string }[] => {
|
): { type: BadgeProps['status']; content: string }[] => {
|
||||||
@@ -84,6 +146,11 @@ function handleAdd() {
|
|||||||
modalApi.setData({});
|
modalApi.setData({});
|
||||||
modalApi.open();
|
modalApi.open();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 页面初始化时加载数据
|
||||||
|
onMounted(() => {
|
||||||
|
fetchCalendarData();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="flex h-full flex-col">
|
<div class="flex h-full flex-col">
|
||||||
@@ -98,7 +165,11 @@ function handleAdd() {
|
|||||||
</Radio.Group>
|
</Radio.Group>
|
||||||
<div class="my-auto flex gap-1">
|
<div class="my-auto flex gap-1">
|
||||||
<div class="my-auto">排班日历</div>
|
<div class="my-auto">排班日历</div>
|
||||||
<DatePicker picker="month" v-model:value="selectedDate" />
|
<DatePicker
|
||||||
|
picker="month"
|
||||||
|
v-model:value="selectedDate"
|
||||||
|
@change="fetchCalendarData()"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -110,6 +181,7 @@ function handleAdd() {
|
|||||||
v-model:value="selectedDate"
|
v-model:value="selectedDate"
|
||||||
:mode="'month'"
|
:mode="'month'"
|
||||||
:headerRender="customHeader"
|
:headerRender="customHeader"
|
||||||
|
:loading="loading"
|
||||||
>
|
>
|
||||||
<template #dateCellRender="{ current }">
|
<template #dateCellRender="{ current }">
|
||||||
<ul class="events">
|
<ul class="events">
|
||||||
@@ -140,7 +212,7 @@ function handleAdd() {
|
|||||||
</template>
|
</template>
|
||||||
</Calendar>
|
</Calendar>
|
||||||
</div>
|
</div>
|
||||||
<ArrangementModal @reload="" />
|
<ArrangementModal @reload="fetchCalendarData()" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
@@ -62,10 +62,10 @@ const deptTree = reactive<
|
|||||||
]);
|
]);
|
||||||
|
|
||||||
//勾选内容
|
//勾选内容
|
||||||
const selectedUsers = ref<PersonVO[]>([]);
|
let selectedUsers = ref<PersonVO[]>([]);
|
||||||
//已选内容,需要展示到父组件
|
//已选内容,需要展示到父组件
|
||||||
|
|
||||||
const tableData = reactive<
|
let tableData = reactive<
|
||||||
{
|
{
|
||||||
dept: { unitId: string | number; unitName: string };
|
dept: { unitId: string | number; unitName: string };
|
||||||
users: PersonVO[];
|
users: PersonVO[];
|
||||||
@@ -236,6 +236,8 @@ async function handleConfirm() {
|
|||||||
console.log(tableData);
|
console.log(tableData);
|
||||||
resetInitialized();
|
resetInitialized();
|
||||||
emit('reload', tableData);
|
emit('reload', tableData);
|
||||||
|
tableData = [];
|
||||||
|
selectedUsers.value =[];
|
||||||
modalApi.close();
|
modalApi.close();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
|
@@ -23,8 +23,10 @@ import { resident_unitList } from '#/api/property/resident/unit';
|
|||||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||||
|
|
||||||
import cleanDetailModal from './clean-detail-modal.vue';
|
import cleanDetailModal from './clean-detail-modal.vue';
|
||||||
import { modalSchema } from './data';
|
// import { modalSchema } from './data';
|
||||||
import { communityTree } from '#/api/property/community';
|
import { communityTree } from '#/api/property/community';
|
||||||
|
import { getDictOptions } from '#/utils/dict';
|
||||||
|
|
||||||
const emit = defineEmits<{ reload: [] }>();
|
const emit = defineEmits<{ reload: [] }>();
|
||||||
|
|
||||||
// 计算合计费用
|
// 计算合计费用
|
||||||
@@ -59,7 +61,142 @@ let unitListData: { id: any; name: string }[] = [];
|
|||||||
const editUnitId = ref('');
|
const editUnitId = ref('');
|
||||||
const editCleanOrderId = ref('');
|
const editCleanOrderId = ref('');
|
||||||
const detailModal = ref(null);
|
const detailModal = ref(null);
|
||||||
|
const modalSchema = [
|
||||||
|
{
|
||||||
|
label: '主键id',
|
||||||
|
fieldName: 'id',
|
||||||
|
component: 'Input',
|
||||||
|
dependencies: {
|
||||||
|
show: () => false,
|
||||||
|
triggerFields: [''],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '服务地址(房间号)',
|
||||||
|
component: 'TreeSelect',
|
||||||
|
defaultValue: undefined,
|
||||||
|
fieldName: 'location',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '开始时间',
|
||||||
|
fieldName: 'starTime',
|
||||||
|
component: 'DatePicker',
|
||||||
|
componentProps: {
|
||||||
|
showTime: true,
|
||||||
|
format: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
placeholder: '请选择开始时间',
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '结束时间',
|
||||||
|
fieldName: 'endTime',
|
||||||
|
component: 'DatePicker',
|
||||||
|
componentProps: (values: any) => ({
|
||||||
|
showTime: true,
|
||||||
|
format: 'YYYY-MM-DD HH:mm:ss',
|
||||||
|
placeholder: !values.starTime
|
||||||
|
? '请先选择开始时间'
|
||||||
|
: `请选择结束时间(结束时间不能早于开始时间)`,
|
||||||
|
disabled: isReadonly.value || !values.starTime, // 没选开始时间时禁用
|
||||||
|
disabledDate: (current: any) => {
|
||||||
|
if (!values.starTime) return false;
|
||||||
|
// 只允许选择大于等于开始时间的日期
|
||||||
|
return current && current < dayjs(values.starTime).startOf('second');
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
rules: 'required',
|
||||||
|
dependencies: {
|
||||||
|
triggerFields: ['starTime'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '申请人',
|
||||||
|
fieldName: 'persion',
|
||||||
|
component: 'Input',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '联系电话',
|
||||||
|
fieldName: 'phone',
|
||||||
|
component: 'Input',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '申请单位',
|
||||||
|
fieldName: 'unitId',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
componentProps: {
|
||||||
|
api: resident_unitList,
|
||||||
|
resultField: 'rows',
|
||||||
|
labelField: 'name',
|
||||||
|
valueField: 'id',
|
||||||
|
placeholder: '请选择单位',
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '支付状态',
|
||||||
|
fieldName: 'payState',
|
||||||
|
component: 'Select',
|
||||||
|
componentProps: {
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '待支付',
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '已支付',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '保洁类型',
|
||||||
|
fieldName: 'type',
|
||||||
|
component: 'Select',
|
||||||
|
componentProps: {
|
||||||
|
options: getDictOptions('pro_cleaning_type'),
|
||||||
|
},
|
||||||
|
rules: 'selectRequired',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '评价',
|
||||||
|
fieldName: 'serviceEvalua',
|
||||||
|
component: 'Rate',
|
||||||
|
componentProps: {
|
||||||
|
allowHalf: false,
|
||||||
|
count: 5,
|
||||||
|
tooltips: ['1星', '2星', '3星', '4星', '5星'],
|
||||||
|
defaultValue: 0,
|
||||||
|
},
|
||||||
|
dependencies: {
|
||||||
|
show: () => (isReadonly.value ? true : false),
|
||||||
|
triggerFields: [''],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '评价文本',
|
||||||
|
fieldName: 'serviceEvaluaText',
|
||||||
|
component: 'Input',
|
||||||
|
dependencies: {
|
||||||
|
show: () => (isReadonly.value ? true : false),
|
||||||
|
triggerFields: [''],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '联系电话',
|
||||||
|
fieldName: 'imgUrl',
|
||||||
|
component: 'Input',
|
||||||
|
dependencies: {
|
||||||
|
show: () => (isReadonly.value ? true : false),
|
||||||
|
triggerFields: [''],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
const [BasicForm, formApi] = useVbenForm({
|
const [BasicForm, formApi] = useVbenForm({
|
||||||
commonConfig: {
|
commonConfig: {
|
||||||
// 默认占满两列
|
// 默认占满两列
|
||||||
@@ -71,7 +208,6 @@ const [BasicForm, formApi] = useVbenForm({
|
|||||||
class: 'w-full',
|
class: 'w-full',
|
||||||
disabled: isReadonly.value,
|
disabled: isReadonly.value,
|
||||||
})),
|
})),
|
||||||
schema: modalSchema(isReadonly.value),
|
|
||||||
},
|
},
|
||||||
// 1. 使用正确的属性名 handleValuesChange
|
// 1. 使用正确的属性名 handleValuesChange
|
||||||
handleValuesChange: async (values, fieldsChanged) => {
|
handleValuesChange: async (values, fieldsChanged) => {
|
||||||
@@ -103,7 +239,10 @@ const [BasicForm, formApi] = useVbenForm({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
schema: modalSchema(),
|
// schema: computed(() => {
|
||||||
|
// modalSchema(isReadonly.value);
|
||||||
|
// }),
|
||||||
|
schema: modalSchema,
|
||||||
showDefaultActions: false,
|
showDefaultActions: false,
|
||||||
wrapperClass: 'grid-cols-2',
|
wrapperClass: 'grid-cols-2',
|
||||||
});
|
});
|
||||||
@@ -126,6 +265,8 @@ const [BasicModal, modalApi] = useVbenModal({
|
|||||||
if (!isOpen) {
|
if (!isOpen) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
console.log(isReadonly.value);
|
||||||
|
|
||||||
// 查询服务地址树形结构
|
// 查询服务地址树形结构
|
||||||
setupCommunitySelect();
|
setupCommunitySelect();
|
||||||
modalApi.modalLoading(true);
|
modalApi.modalLoading(true);
|
||||||
@@ -372,6 +513,8 @@ async function handleClosed() {
|
|||||||
// 获取服务地址
|
// 获取服务地址
|
||||||
async function setupCommunitySelect() {
|
async function setupCommunitySelect() {
|
||||||
const areaList = await communityTree(4);
|
const areaList = await communityTree(4);
|
||||||
|
console.log(areaList);
|
||||||
|
|
||||||
// 选中后显示在输入框的值 即父节点 / 子节点
|
// 选中后显示在输入框的值 即父节点 / 子节点
|
||||||
// addFullName(areaList, 'areaName', ' / ');
|
// addFullName(areaList, 'areaName', ' / ');
|
||||||
const splitStr = '/';
|
const splitStr = '/';
|
||||||
|
@@ -5,10 +5,10 @@ import { resident_unitList } from '#/api/property/resident/unit';
|
|||||||
import { useCleanStore } from '#/store';
|
import { useCleanStore } from '#/store';
|
||||||
import type { FormSchema } from '../../../../../../../packages/@core/ui-kit/form-ui/src/types';
|
import type { FormSchema } from '../../../../../../../packages/@core/ui-kit/form-ui/src/types';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import {h} from "vue";
|
import { h } from 'vue';
|
||||||
import {Rate} from "ant-design-vue";
|
import { Rate } from 'ant-design-vue';
|
||||||
import {getDictOptions} from "#/utils/dict";
|
import { getDictOptions } from '#/utils/dict';
|
||||||
import {renderDict} from "#/utils/render";
|
import { renderDict } from '#/utils/render';
|
||||||
const cleanStore = useCleanStore();
|
const cleanStore = useCleanStore();
|
||||||
|
|
||||||
export const querySchema: (areaList: any[]) => FormSchema[] = (areaList) => [
|
export const querySchema: (areaList: any[]) => FormSchema[] = (areaList) => [
|
||||||
@@ -120,7 +120,7 @@ export const columns: VxeGridProps['columns'] = [
|
|||||||
field: 'type',
|
field: 'type',
|
||||||
width: 180,
|
width: 180,
|
||||||
slots: {
|
slots: {
|
||||||
default: ({row}) => {
|
default: ({ row }) => {
|
||||||
return renderDict(row.type, 'pro_cleaning_type');
|
return renderDict(row.type, 'pro_cleaning_type');
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -130,7 +130,7 @@ export const columns: VxeGridProps['columns'] = [
|
|||||||
field: 'serviceEvalua',
|
field: 'serviceEvalua',
|
||||||
width: 180,
|
width: 180,
|
||||||
slots: {
|
slots: {
|
||||||
default: ({row}) => {
|
default: ({ row }) => {
|
||||||
return h(Rate, {
|
return h(Rate, {
|
||||||
value: row.serviceEvalua || 0,
|
value: row.serviceEvalua || 0,
|
||||||
disabled: true,
|
disabled: true,
|
||||||
@@ -153,12 +153,13 @@ export const columns: VxeGridProps['columns'] = [
|
|||||||
fixed: 'right',
|
fixed: 'right',
|
||||||
slots: { default: 'action' },
|
slots: { default: 'action' },
|
||||||
title: '操作',
|
title: '操作',
|
||||||
width:'200'
|
width: '200',
|
||||||
},
|
},
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
||||||
export const modalSchema: (isReadonly: boolean) => FormSchema[] = (isReadonly) => [
|
export const modalSchema: (isReadonly: boolean) => FormSchema[] = (
|
||||||
|
isReadonly,
|
||||||
|
) => [
|
||||||
{
|
{
|
||||||
label: '主键id',
|
label: '主键id',
|
||||||
fieldName: 'id',
|
fieldName: 'id',
|
||||||
@@ -193,9 +194,11 @@ export const modalSchema: (isReadonly: boolean) => FormSchema[] = (isReadonly) =
|
|||||||
componentProps: (values) => ({
|
componentProps: (values) => ({
|
||||||
showTime: true,
|
showTime: true,
|
||||||
format: 'YYYY-MM-DD HH:mm:ss',
|
format: 'YYYY-MM-DD HH:mm:ss',
|
||||||
placeholder: !values.starTime?'请先选择开始时间':`请选择结束时间(结束时间不能早于开始时间)`,
|
placeholder: !values.starTime
|
||||||
|
? '请先选择开始时间'
|
||||||
|
: `请选择结束时间(结束时间不能早于开始时间)`,
|
||||||
disabled: isReadonly || !values.starTime, // 没选开始时间时禁用
|
disabled: isReadonly || !values.starTime, // 没选开始时间时禁用
|
||||||
disabledDate: (current:any) => {
|
disabledDate: (current: any) => {
|
||||||
if (!values.starTime) return false;
|
if (!values.starTime) return false;
|
||||||
// 只允许选择大于等于开始时间的日期
|
// 只允许选择大于等于开始时间的日期
|
||||||
return current && current < dayjs(values.starTime).startOf('second');
|
return current && current < dayjs(values.starTime).startOf('second');
|
||||||
@@ -266,8 +269,29 @@ export const modalSchema: (isReadonly: boolean) => FormSchema[] = (isReadonly) =
|
|||||||
allowHalf: false,
|
allowHalf: false,
|
||||||
count: 5,
|
count: 5,
|
||||||
tooltips: ['1星', '2星', '3星', '4星', '5星'],
|
tooltips: ['1星', '2星', '3星', '4星', '5星'],
|
||||||
defaultValue: 0
|
defaultValue: 0,
|
||||||
|
},
|
||||||
|
dependencies: {
|
||||||
|
show: () => (isReadonly ? true : false),
|
||||||
|
triggerFields: [''],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '评价文本',
|
||||||
|
fieldName: 'serviceEvaluaText',
|
||||||
|
component: 'Input',
|
||||||
|
dependencies: {
|
||||||
|
show: () => (isReadonly ? true : false),
|
||||||
|
triggerFields: [''],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '联系电话',
|
||||||
|
fieldName: 'imgUrl',
|
||||||
|
component: 'Input',
|
||||||
|
dependencies: {
|
||||||
|
show: () => (isReadonly ? true : false),
|
||||||
|
triggerFields: [''],
|
||||||
},
|
},
|
||||||
rules: 'required',
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
@@ -135,7 +135,6 @@ function handleView(row: Required<CleanForm>) {
|
|||||||
function handleAudit(row: any) {
|
function handleAudit(row: any) {
|
||||||
// 审核逻辑
|
// 审核逻辑
|
||||||
// TODO: 实现审核功能
|
// TODO: 实现审核功能
|
||||||
console.log('审核', row);
|
|
||||||
modalApi.setData({ id: row.id, readonly: true, audit: true, row: row });
|
modalApi.setData({ id: row.id, readonly: true, audit: true, row: row });
|
||||||
modalApi.open();
|
modalApi.open();
|
||||||
}
|
}
|
||||||
@@ -143,7 +142,6 @@ function handleAudit(row: any) {
|
|||||||
function handleRefund(row: any) {
|
function handleRefund(row: any) {
|
||||||
// 退定逻辑
|
// 退定逻辑
|
||||||
// TODO: 实现退定功能
|
// TODO: 实现退定功能
|
||||||
console.log('退定', row);
|
|
||||||
modalApi.setData({ id: row.id, readonly: true, refund: true, row: row });
|
modalApi.setData({ id: row.id, readonly: true, refund: true, row: row });
|
||||||
modalApi.open();
|
modalApi.open();
|
||||||
}
|
}
|
||||||
|
@@ -7,7 +7,7 @@ import { carChargeAdd } from '#/api/property/carCharge';
|
|||||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||||
import { addModalSchema } from './data';
|
import { addModalSchema } from './data';
|
||||||
import { communityTree } from '#/api/property/community';
|
import { communityTree } from '#/api/property/community';
|
||||||
import { cloneDeep,handleNode,getPopupContainer } from '@vben/utils';
|
import { cloneDeep, handleNode, getPopupContainer } from '@vben/utils';
|
||||||
|
|
||||||
const emit = defineEmits<{ reload: [] }>();
|
const emit = defineEmits<{ reload: [] }>();
|
||||||
|
|
||||||
@@ -41,11 +41,11 @@ const [BasicModal, modalApi] = useVbenModal({
|
|||||||
onConfirm: handleConfirm,
|
onConfirm: handleConfirm,
|
||||||
onOpenChange: async (isOpen) => {
|
onOpenChange: async (isOpen) => {
|
||||||
if (!isOpen) return null;
|
if (!isOpen) return null;
|
||||||
setupCommunitySelect()
|
setupCommunitySelect();
|
||||||
modalApi.modalLoading(true);
|
modalApi.modalLoading(true);
|
||||||
await formApi.resetForm();
|
await formApi.resetForm();
|
||||||
await markInitialized();
|
await markInitialized();
|
||||||
await formApi.setValues({costType:'2'});
|
await formApi.setValues({ costType: '2' });
|
||||||
modalApi.modalLoading(false);
|
modalApi.modalLoading(false);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -72,12 +72,12 @@ async function handleClosed() {
|
|||||||
resetInitialized();
|
resetInitialized();
|
||||||
}
|
}
|
||||||
async function setupCommunitySelect() {
|
async function setupCommunitySelect() {
|
||||||
const areaList = await communityTree(4);
|
const areaList = await communityTree(3);
|
||||||
// 选中后显示在输入框的值 即父节点 / 子节点
|
// 选中后显示在输入框的值 即父节点 / 子节点
|
||||||
// addFullName(areaList, 'areaName', ' / ');
|
// addFullName(areaList, 'areaName', ' / ');
|
||||||
const splitStr = '/';
|
const splitStr = '/';
|
||||||
handleNode(areaList, 'label', splitStr, function (node: any) {
|
handleNode(areaList, 'label', splitStr, function (node: any) {
|
||||||
if (node.level != 4) {
|
if (node.level != 3) {
|
||||||
node.disabled = true;
|
node.disabled = true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -112,7 +112,7 @@ async function setupCommunitySelect() {
|
|||||||
<BasicModal :title="title">
|
<BasicModal :title="title">
|
||||||
<BasicForm />
|
<BasicForm />
|
||||||
</BasicModal>
|
</BasicModal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* 使用 :deep() 穿透 scoped 样式,影响子组件 */
|
/* 使用 :deep() 穿透 scoped 样式,影响子组件 */
|
||||||
@@ -126,4 +126,4 @@ async function setupCommunitySelect() {
|
|||||||
/* 有些浏览器需要这个来覆盖默认颜色 */
|
/* 有些浏览器需要这个来覆盖默认颜色 */
|
||||||
-webkit-text-fill-color: rgb(0 0 0 / 65%) !important;
|
-webkit-text-fill-color: rgb(0 0 0 / 65%) !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@@ -111,7 +111,6 @@ const schema = [
|
|||||||
itemId: '',
|
itemId: '',
|
||||||
meterTypeId: '',
|
meterTypeId: '',
|
||||||
});
|
});
|
||||||
console.log(await formApi.getValues());
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -216,8 +215,6 @@ const [BasicModal, modalApi] = useVbenModal({
|
|||||||
isUpdate.value = !!id;
|
isUpdate.value = !!id;
|
||||||
if (isUpdate.value && id) {
|
if (isUpdate.value && id) {
|
||||||
const record = await costMeterWaterInfo(id);
|
const record = await costMeterWaterInfo(id);
|
||||||
console.log(1, record);
|
|
||||||
|
|
||||||
const costItemsRes = await costItemSettingList({
|
const costItemsRes = await costItemSettingList({
|
||||||
pageSize: 1000000000,
|
pageSize: 1000000000,
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
@@ -253,7 +250,6 @@ const [BasicModal, modalApi] = useVbenModal({
|
|||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
await formApi.setValues(record);
|
await formApi.setValues(record);
|
||||||
console.log(2, await formApi.getValues());
|
|
||||||
}
|
}
|
||||||
await markInitialized();
|
await markInitialized();
|
||||||
|
|
||||||
@@ -270,8 +266,6 @@ async function handleConfirm() {
|
|||||||
}
|
}
|
||||||
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
||||||
const data = cloneDeep(await formApi.getValues());
|
const data = cloneDeep(await formApi.getValues());
|
||||||
console.log(data);
|
|
||||||
|
|
||||||
await (isUpdate.value
|
await (isUpdate.value
|
||||||
? costMeterWaterUpdate(data)
|
? costMeterWaterUpdate(data)
|
||||||
: costMeterWaterAdd(data));
|
: costMeterWaterAdd(data));
|
||||||
|
@@ -4,146 +4,6 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
|
|||||||
import { getDictOptions } from '#/utils/dict';
|
import { getDictOptions } from '#/utils/dict';
|
||||||
import { renderDict } from '#/utils/render';
|
import { renderDict } from '#/utils/render';
|
||||||
|
|
||||||
export const querySchema: FormSchemaGetter = () => [
|
|
||||||
{
|
|
||||||
component: 'Input',
|
|
||||||
fieldName: 'userId',
|
|
||||||
label: '用户ID,关联用户表',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Input',
|
|
||||||
fieldName: 'username',
|
|
||||||
label: '申请人姓名',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Input',
|
|
||||||
fieldName: 'departmentId',
|
|
||||||
label: '部门ID,关联部门表',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Input',
|
|
||||||
fieldName: 'departmentName',
|
|
||||||
label: '部门名称',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Select',
|
|
||||||
componentProps: {
|
|
||||||
},
|
|
||||||
fieldName: 'leaveType',
|
|
||||||
label: '请假类型',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'DatePicker',
|
|
||||||
componentProps: {
|
|
||||||
showTime: true,
|
|
||||||
format: 'YYYY-MM-DD HH:mm:ss',
|
|
||||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
||||||
},
|
|
||||||
fieldName: 'startTime',
|
|
||||||
label: '开始时间',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'DatePicker',
|
|
||||||
componentProps: {
|
|
||||||
showTime: true,
|
|
||||||
format: 'YYYY-MM-DD HH:mm:ss',
|
|
||||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
||||||
},
|
|
||||||
fieldName: 'endTime',
|
|
||||||
label: '结束时间',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Input',
|
|
||||||
fieldName: 'totalDuration',
|
|
||||||
label: '合计时间,如3天5个小时',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Textarea',
|
|
||||||
fieldName: 'reason',
|
|
||||||
label: '请假事由',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Select',
|
|
||||||
componentProps: {
|
|
||||||
// 可选从DictEnum中获取 DictEnum.WY_SQZT 便于维护
|
|
||||||
options: getDictOptions('wy_sqzt'),
|
|
||||||
},
|
|
||||||
fieldName: 'status',
|
|
||||||
label: '申请状态',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Input',
|
|
||||||
fieldName: 'searchValue',
|
|
||||||
label: '搜索值',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
|
||||||
// export const columns: () => VxeGridProps['columns'] = () => [
|
|
||||||
export const columns: VxeGridProps['columns'] = [
|
|
||||||
{ type: 'checkbox', width: 60 },
|
|
||||||
{
|
|
||||||
title: '',
|
|
||||||
field: 'id',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '用户ID,关联用户表',
|
|
||||||
field: 'userId',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '申请人姓名',
|
|
||||||
field: 'username',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '部门ID,关联部门表',
|
|
||||||
field: 'departmentId',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '部门名称',
|
|
||||||
field: 'departmentName',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '请假类型',
|
|
||||||
field: 'leaveType',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '开始时间',
|
|
||||||
field: 'startTime',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '结束时间',
|
|
||||||
field: 'endTime',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '合计时间,如3天5个小时',
|
|
||||||
field: 'totalDuration',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '请假事由',
|
|
||||||
field: 'reason',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '申请状态',
|
|
||||||
field: 'status',
|
|
||||||
slots: {
|
|
||||||
default: ({ row }) => {
|
|
||||||
// 可选从DictEnum中获取 DictEnum.WY_SQZT 便于维护
|
|
||||||
return renderDict(row.status, 'wy_sqzt');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '搜索值',
|
|
||||||
field: 'searchValue',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'action',
|
|
||||||
fixed: 'right',
|
|
||||||
slots: { default: 'action' },
|
|
||||||
title: '操作',
|
|
||||||
width: 180,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export const modalSchema: FormSchemaGetter = () => [
|
export const modalSchema: FormSchemaGetter = () => [
|
||||||
{
|
{
|
||||||
@@ -156,24 +16,16 @@ export const modalSchema: FormSchemaGetter = () => [
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '用户ID,关联用户表',
|
label: '姓名',
|
||||||
fieldName: 'userId',
|
|
||||||
component: 'Input',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '申请人姓名',
|
|
||||||
fieldName: 'username',
|
fieldName: 'username',
|
||||||
component: 'Input',
|
component: 'Input',
|
||||||
|
rules:'required'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '部门ID,关联部门表',
|
label: '部门',
|
||||||
fieldName: 'departmentId',
|
fieldName: 'departmentId',
|
||||||
component: 'Input',
|
component: 'ApiSelect',
|
||||||
},
|
rules:'required'
|
||||||
{
|
|
||||||
label: '部门名称',
|
|
||||||
fieldName: 'departmentName',
|
|
||||||
component: 'Input',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '请假类型',
|
label: '请假类型',
|
||||||
@@ -181,6 +33,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
|||||||
component: 'Select',
|
component: 'Select',
|
||||||
componentProps: {
|
componentProps: {
|
||||||
},
|
},
|
||||||
|
rules:'required'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '开始时间',
|
label: '开始时间',
|
||||||
@@ -191,6 +44,8 @@ export const modalSchema: FormSchemaGetter = () => [
|
|||||||
format: 'YYYY-MM-DD HH:mm:ss',
|
format: 'YYYY-MM-DD HH:mm:ss',
|
||||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||||
},
|
},
|
||||||
|
rules:'required'
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '结束时间',
|
label: '结束时间',
|
||||||
@@ -201,29 +56,19 @@ export const modalSchema: FormSchemaGetter = () => [
|
|||||||
format: 'YYYY-MM-DD HH:mm:ss',
|
format: 'YYYY-MM-DD HH:mm:ss',
|
||||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||||
},
|
},
|
||||||
|
rules:'required'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '合计时间,如3天5个小时',
|
label: '合计时间',
|
||||||
fieldName: 'totalDuration',
|
fieldName: 'totalDuration',
|
||||||
component: 'Input',
|
component: 'Input',
|
||||||
|
disabled:true,
|
||||||
|
rules:'required'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '请假事由',
|
label: '请假事由',
|
||||||
fieldName: 'reason',
|
fieldName: 'reason',
|
||||||
component: 'Textarea',
|
component: 'Textarea',
|
||||||
},
|
rules:'required'
|
||||||
{
|
}
|
||||||
label: '申请状态',
|
|
||||||
fieldName: 'status',
|
|
||||||
component: 'Select',
|
|
||||||
componentProps: {
|
|
||||||
// 可选从DictEnum中获取 DictEnum.WY_SQZT 便于维护
|
|
||||||
options: getDictOptions('wy_sqzt'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '搜索值',
|
|
||||||
fieldName: 'searchValue',
|
|
||||||
component: 'Input',
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
@@ -1,188 +1,39 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Recordable } from '@vben/types';
|
|
||||||
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
|
||||||
import { getVxePopupContainer } from '@vben/utils';
|
|
||||||
|
|
||||||
import { Modal, Popconfirm, Space } from 'ant-design-vue';
|
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
import {
|
|
||||||
useVbenVxeGrid,
|
|
||||||
vxeCheckboxChecked,
|
|
||||||
type VxeGridProps,
|
|
||||||
} from '#/adapter/vxe-table';
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
leaveApplicationExport,
|
leaveApplicationExport,
|
||||||
leaveApplicationList,
|
leaveApplicationList,
|
||||||
leaveApplicationRemove,
|
leaveApplicationRemove,
|
||||||
} from '#/api/property/personalCenter/leaveApplication';
|
} from '#/api/property/personalCenter/leaveApplication';
|
||||||
import type { LeaveApplicationForm } from '#/api/property/personalCenter/leaveApplication/model';
|
import type { LeaveApplicationForm } from '#/api/property/personalCenter/leaveApplication/model';
|
||||||
import { commonDownloadExcel } from '#/utils/file/download';
|
|
||||||
|
|
||||||
import leaveApplicationModal from './leaveApplication-modal.vue';
|
import { useVbenForm } from '#/adapter/form';
|
||||||
import { columns, querySchema } from './data';
|
import { useVbenModal} from '@vben/common-ui';
|
||||||
|
import {modalSchema} from "./data";
|
||||||
|
import { useVModel } from '@vueuse/core';
|
||||||
|
|
||||||
const formOptions: VbenFormProps = {
|
const [BasicForm, formApi] = useVbenForm({
|
||||||
commonConfig: {
|
commonConfig: {
|
||||||
labelWidth: 80,
|
formItemClass: 'col-span-1',
|
||||||
|
// 默认label宽度 px
|
||||||
|
labelWidth: 160,
|
||||||
|
// 通用配置项 会影响到所有表单项
|
||||||
componentProps: {
|
componentProps: {
|
||||||
allowClear: true,
|
class: 'w-full',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
schema: querySchema(),
|
schema: modalSchema(),
|
||||||
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
showDefaultActions: false,
|
||||||
// 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
|
wrapperClass: 'grid-cols-2 gap-x-10 gap-y-2',
|
||||||
// 不需要直接删除
|
|
||||||
// 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 leaveApplicationList({
|
|
||||||
pageNum: page.currentPage,
|
|
||||||
pageSize: page.pageSize,
|
|
||||||
...formValues,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
rowConfig: {
|
|
||||||
keyField: 'id',
|
|
||||||
},
|
|
||||||
// 表格全局唯一表示 保存列配置需要用到
|
|
||||||
id: 'property-leaveApplication-index',
|
|
||||||
};
|
|
||||||
|
|
||||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
|
||||||
formOptions,
|
|
||||||
gridOptions,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const [LeaveApplicationModal, modalApi] = useVbenModal({
|
|
||||||
connectedComponent: leaveApplicationModal,
|
|
||||||
});
|
|
||||||
|
|
||||||
function handleAdd() {
|
|
||||||
modalApi.setData({});
|
|
||||||
modalApi.open();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleEdit(row: Required<LeaveApplicationForm>) {
|
|
||||||
modalApi.setData({ id: row.id });
|
|
||||||
modalApi.open();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleDelete(row: Required<LeaveApplicationForm>) {
|
|
||||||
await leaveApplicationRemove(row.id);
|
|
||||||
await tableApi.query();
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleMultiDelete() {
|
|
||||||
const rows = tableApi.grid.getCheckboxRecords();
|
|
||||||
const ids = rows.map((row: Required<LeaveApplicationForm>) => row.id);
|
|
||||||
Modal.confirm({
|
|
||||||
title: '提示',
|
|
||||||
okType: 'danger',
|
|
||||||
content: `确认删除选中的${ids.length}条记录吗?`,
|
|
||||||
onOk: async () => {
|
|
||||||
await leaveApplicationRemove(ids);
|
|
||||||
await tableApi.query();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDownloadExcel() {
|
|
||||||
commonDownloadExcel(
|
|
||||||
leaveApplicationExport,
|
|
||||||
'请假申请数据',
|
|
||||||
tableApi.formApi.form.values,
|
|
||||||
{
|
|
||||||
fieldMappingTime: formOptions.fieldMappingTime,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Page :auto-content-height="true">
|
<div class="p-8">
|
||||||
<BasicTable table-title="请假申请列表">
|
<div class="text-2xl font-bold">请假申请</div>
|
||||||
<template #toolbar-tools>
|
<div class="m-6 bg-white p-4">
|
||||||
<Space>
|
<BasicForm/>
|
||||||
<a-button
|
</div>
|
||||||
v-access:code="['property:leaveApplication:export']"
|
</div>
|
||||||
@click="handleDownloadExcel"
|
|
||||||
>
|
|
||||||
{{ $t('pages.common.export') }}
|
|
||||||
</a-button>
|
|
||||||
<a-button
|
|
||||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
|
||||||
danger
|
|
||||||
type="primary"
|
|
||||||
v-access:code="['property:leaveApplication:remove']"
|
|
||||||
@click="handleMultiDelete"
|
|
||||||
>
|
|
||||||
{{ $t('pages.common.delete') }}
|
|
||||||
</a-button>
|
|
||||||
<a-button
|
|
||||||
type="primary"
|
|
||||||
v-access:code="['property:leaveApplication:add']"
|
|
||||||
@click="handleAdd"
|
|
||||||
>
|
|
||||||
{{ $t('pages.common.add') }}
|
|
||||||
</a-button>
|
|
||||||
</Space>
|
|
||||||
</template>
|
|
||||||
<template #action="{ row }">
|
|
||||||
<Space>
|
|
||||||
<ghost-button
|
|
||||||
v-access:code="['property:leaveApplication:edit']"
|
|
||||||
@click.stop="handleEdit(row)"
|
|
||||||
>
|
|
||||||
{{ $t('pages.common.edit') }}
|
|
||||||
</ghost-button>
|
|
||||||
<Popconfirm
|
|
||||||
:get-popup-container="getVxePopupContainer"
|
|
||||||
placement="left"
|
|
||||||
title="确认删除?"
|
|
||||||
@confirm="handleDelete(row)"
|
|
||||||
>
|
|
||||||
<ghost-button
|
|
||||||
danger
|
|
||||||
v-access:code="['property:leaveApplication:remove']"
|
|
||||||
@click.stop=""
|
|
||||||
>
|
|
||||||
{{ $t('pages.common.delete') }}
|
|
||||||
</ghost-button>
|
|
||||||
</Popconfirm>
|
|
||||||
</Space>
|
|
||||||
</template>
|
|
||||||
</BasicTable>
|
|
||||||
<LeaveApplicationModal @reload="tableApi.query()" />
|
|
||||||
</Page>
|
|
||||||
</template>
|
</template>
|
||||||
|
@@ -1,106 +0,0 @@
|
|||||||
<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 {
|
|
||||||
leaveApplicationAdd,
|
|
||||||
leaveApplicationInfo,
|
|
||||||
leaveApplicationUpdate,
|
|
||||||
} from '#/api/property/personalCenter/leaveApplication';
|
|
||||||
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 leaveApplicationInfo(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
|
|
||||||
? leaveApplicationUpdate(data)
|
|
||||||
: leaveApplicationAdd(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>
|
|
@@ -130,7 +130,6 @@ export const modalSchema: FormSchemaGetter = () => [
|
|||||||
fieldName: 'name',
|
fieldName: 'name',
|
||||||
component: 'Input',
|
component: 'Input',
|
||||||
rules: 'required',
|
rules: 'required',
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '单位类型',
|
label: '单位类型',
|
||||||
|
File diff suppressed because it is too large
Load Diff
@@ -549,7 +549,6 @@ onBeforeUnmount(() => {
|
|||||||
if (timer) {
|
if (timer) {
|
||||||
clearInterval(timer);
|
clearInterval(timer);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 从管理器中移除图表
|
// 从管理器中移除图表
|
||||||
if (barChartInstance) {
|
if (barChartInstance) {
|
||||||
removeChartFromResizeManager(barChartInstance);
|
removeChartFromResizeManager(barChartInstance);
|
||||||
@@ -600,11 +599,11 @@ onBeforeUnmount(() => {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.left {
|
.left {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 14.3125rem;
|
width: 18.3125rem;
|
||||||
.left-first {
|
.left-first {
|
||||||
padding-left: 2.3125rem;
|
padding-left: 2.3125rem;
|
||||||
padding-right: 3.5rem;
|
|
||||||
font-size: 1.875rem;
|
font-size: 1.875rem;
|
||||||
|
width: 10.5rem;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
.left-second {
|
.left-second {
|
||||||
|
@@ -862,24 +862,23 @@ onBeforeUnmount(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.left{
|
.left {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 20.3125rem;
|
width: 18.3125rem;
|
||||||
.left-first{
|
.left-first {
|
||||||
padding-left: 2.3125rem;
|
padding-left: 2.3125rem;
|
||||||
padding-right: 3.5rem;
|
font-size: 1.875rem;
|
||||||
font-size: 1.875rem;
|
width: 10.5rem;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
}
|
|
||||||
.left-second{
|
|
||||||
width: 6.5rem;
|
|
||||||
font-family: ShiShangZhongHeiJianTi;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: #FFFFFF;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.left-second {
|
||||||
|
width: 6.5rem;
|
||||||
|
font-family: ShiShangZhongHeiJianTi;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
.center{
|
.center{
|
||||||
font-size: 1.9rem;
|
font-size: 1.9rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@@ -35,7 +35,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="navigation-body-right">
|
<div class="navigation-body-right">
|
||||||
<div @click="goToMonitor()">监控大屏</div>
|
<div @click="goToMonitor()">监控大屏</div>
|
||||||
<div @click="goToDigitalIntelligence()">商务中心</div>
|
<div @click="goToDigitalIntelligence()">综合服务中心</div>
|
||||||
<div @click="goToHome()">后台管理</div>
|
<div @click="goToHome()">后台管理</div>
|
||||||
<!-- <div>能源管理</div>
|
<!-- <div>能源管理</div>
|
||||||
<div>能耗分析</div> -->
|
<div>能耗分析</div> -->
|
||||||
|
@@ -70,12 +70,30 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-center-second">
|
<div class="content-center-second">
|
||||||
<div class="second-item">
|
<div class="second-item" @click="changeToPersonnelDuty">
|
||||||
<div class="second-item-box1">645</div>
|
<div>
|
||||||
<div class="second-item-box2">729</div>
|
<div class="second-item-box1">
|
||||||
<div class="second-item-box3">648</div>
|
645
|
||||||
<div class="second-item-box4">786</div>
|
</div>
|
||||||
<div class="second-item-box5">645</div>
|
<div class="second-item-box-label">采购部</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="second-item-box2">729
|
||||||
|
</div>
|
||||||
|
<div class="second-item-box-label">研发部</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="second-item-box3">648</div>
|
||||||
|
<div class="second-item-box-label">安保部</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="second-item-box4">786</div>
|
||||||
|
<div class="second-item-box-label">人事部</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="second-item-box5">645</div>
|
||||||
|
<div class="second-item-box-label">财务部</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -87,15 +105,19 @@
|
|||||||
<div class="second">
|
<div class="second">
|
||||||
<div class="second-box">
|
<div class="second-box">
|
||||||
<div class="box-content">
|
<div class="box-content">
|
||||||
<div class="box-content-label">服务数量</div>
|
<div class="box-content-label">维修</div>
|
||||||
<div class="box-content-num">132</div>
|
<div class="box-content-num">132</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content">
|
<div class="box-content">
|
||||||
<div class="box-content-label">服务数量</div>
|
<div class="box-content-label">保洁</div>
|
||||||
<div class="box-content-num">862</div>
|
<div class="box-content-num">862</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content">
|
<div class="box-content">
|
||||||
<div class="box-content-label">服务数量</div>
|
<div class="box-content-label">客服服务</div>
|
||||||
|
<div class="box-content-num">272</div>
|
||||||
|
</div>
|
||||||
|
<div class="box-content">
|
||||||
|
<div class="box-content-label">安保</div>
|
||||||
<div class="box-content-num">272</div>
|
<div class="box-content-num">272</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -187,31 +209,47 @@ const initBarChart = () => {
|
|||||||
yAxis: {},
|
yAxis: {},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '销量',
|
name: '数量',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [5, 20, 36, 10, 10, 20],
|
data: [5, 20, 36, 10, 10, 20],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: '已处理',
|
||||||
|
type: 'bar',
|
||||||
|
data: [2, 10, 16, 3, 6, 8],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '待处理',
|
||||||
|
type: 'bar',
|
||||||
|
data: [3, 10, 20, 7, 4, 12],
|
||||||
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 初始化电力图表
|
// 初始化预约情况图表
|
||||||
const initPowerChart = () => {
|
const initPowerChart = () => {
|
||||||
if (!powerChart.value) return;
|
if (!powerChart.value) return;
|
||||||
|
|
||||||
const chart = echarts.init(powerChart.value);
|
const chart = echarts.init(powerChart.value);
|
||||||
const option = {
|
const option = {
|
||||||
tooltip: { trigger: 'axis' },
|
tooltip: { trigger: 'axis' },
|
||||||
grid: { left: 40, right: 20, top: 32, bottom: 20 },
|
grid: { left: 40, right: 50, top: 62, bottom: 20 },
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: Array.from({ length: 19 }, (_, i) => i + 6),
|
data: Array.from({ length: 19 }, (_, i) => i + 6),
|
||||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||||
axisLabel: { color: '#fff' },
|
axisLabel: { color: '#fff' },
|
||||||
|
name: '小时',
|
||||||
|
nameTextStyle: { color: '#fff' },
|
||||||
|
nameLocation: 'end',
|
||||||
|
nameGap: 5,
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '',
|
name: '次',
|
||||||
|
nameTextStyle: { color: '#fff' },
|
||||||
|
nameLocation: 'end',
|
||||||
|
nameGap: 10,
|
||||||
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
||||||
axisLabel: { color: '#fff' },
|
axisLabel: { color: '#fff' },
|
||||||
splitLine: { lineStyle: { color: '#1e90ff22' } },
|
splitLine: { lineStyle: { color: '#1e90ff22' } },
|
||||||
@@ -462,6 +500,10 @@ const initPie3DChart = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const changeToPersonnelDuty=()=>{
|
||||||
|
router.push('/property/attendanceManagement/workforceManagement')
|
||||||
|
}
|
||||||
|
|
||||||
// 组件挂载时初始化
|
// 组件挂载时初始化
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
updateTime();
|
updateTime();
|
||||||
@@ -530,11 +572,11 @@ onBeforeUnmount(() => {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.left {
|
.left {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 14.3125rem;
|
width: 18.3125rem;
|
||||||
.left-first {
|
.left-first {
|
||||||
padding-left: 2.3125rem;
|
padding-left: 2.3125rem;
|
||||||
padding-right: 3.5rem;
|
|
||||||
font-size: 1.875rem;
|
font-size: 1.875rem;
|
||||||
|
width: 10.5rem;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
.left-second {
|
.left-second {
|
||||||
@@ -709,6 +751,7 @@ onBeforeUnmount(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
.second-item-box1 {
|
.second-item-box1 {
|
||||||
width: 7rem;
|
width: 7rem;
|
||||||
height: 7rem;
|
height: 7rem;
|
||||||
@@ -722,6 +765,14 @@ onBeforeUnmount(() => {
|
|||||||
background: url('../../../assets/property/personnel-duty-circle1.png');
|
background: url('../../../assets/property/personnel-duty-circle1.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
.second-item-box-label{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
.second-item-box2 {
|
.second-item-box2 {
|
||||||
width: 7rem;
|
width: 7rem;
|
||||||
height: 7rem;
|
height: 7rem;
|
||||||
|
@@ -750,23 +750,23 @@ onBeforeUnmount(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.left{
|
.left {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 14.3125rem;
|
width: 18.3125rem;
|
||||||
.left-first{
|
.left-first {
|
||||||
padding-left: 2.3125rem;
|
padding-left: 2.3125rem;
|
||||||
padding-right: 3.5rem;
|
font-size: 1.875rem;
|
||||||
font-size: 1.875rem;
|
width: 10.5rem;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
}
|
|
||||||
.left-second{
|
|
||||||
width: 6.5rem;
|
|
||||||
font-family: ShiShangZhongHeiJianTi;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.left-second {
|
||||||
|
width: 6.5rem;
|
||||||
|
font-family: ShiShangZhongHeiJianTi;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
.center{
|
.center{
|
||||||
font-size: 1.9rem;
|
font-size: 1.9rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@@ -136,11 +136,9 @@ function handleCheck(checked: Key[] | { checked: Key[]; halfChecked: Key[] }, in
|
|||||||
info.checkedNodesPositions.forEach((item: any) => {
|
info.checkedNodesPositions.forEach((item: any) => {
|
||||||
switch (item.node.label) {
|
switch (item.node.label) {
|
||||||
case 'accessControl':
|
case 'accessControl':
|
||||||
console.log('item.node', item.node)
|
|
||||||
acIds.value = acIds.value.concat(item.node.code)
|
acIds.value = acIds.value.concat(item.node.code)
|
||||||
break
|
break
|
||||||
case 'floor':
|
case 'floor':
|
||||||
console.log('item.node', item.node)
|
|
||||||
floorIds.value = floorIds.value.concat(item.node.code)
|
floorIds.value = floorIds.value.concat(item.node.code)
|
||||||
eleIds.value = eleIds.value.concat(item.node.parentCode)
|
eleIds.value = eleIds.value.concat(item.node.parentCode)
|
||||||
break
|
break
|
||||||
|
@@ -98,7 +98,7 @@
|
|||||||
<SelectOption value="50">50条/页</SelectOption>
|
<SelectOption value="50">50条/页</SelectOption>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 算法详情弹窗 -->
|
<!-- 算法详情弹窗 -->
|
||||||
<AlgorithmDetailModal />
|
<AlgorithmDetailModal />
|
||||||
|
@@ -149,6 +149,7 @@ const handleAccountLogin = async () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="login-footer">重庆数字南川大数据产业发展有限公司</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div
|
<!-- <div
|
||||||
@@ -431,4 +432,11 @@ input:-webkit-autofill {
|
|||||||
.login-form input::placeholder {
|
.login-form input::placeholder {
|
||||||
color: rgba(255, 255, 255, 0.42); /* 例如灰色 */
|
color: rgba(255, 255, 255, 0.42); /* 例如灰色 */
|
||||||
}
|
}
|
||||||
|
.login-footer{
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Reference in New Issue
Block a user