Merge branch 'master' of http://47.109.37.87:3000/by2025/admin-vben5
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
This commit is contained in:
@@ -5,7 +5,7 @@ export interface ShiftVO {
|
||||
/**
|
||||
* 主键id
|
||||
*/
|
||||
id: string | number;
|
||||
id: string;
|
||||
|
||||
/**
|
||||
* 班次名称
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
import type { ContingenPlanVO, ContingenPlanForm, ContingenPlanQuery } 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 contingenPlanList(params?: ContingenPlanQuery) {
|
||||
return requestClient.get<PageResult<ContingenPlanVO>>('/property/contingenPlan/list', { params });
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出应急预案管理列表
|
||||
* @param params
|
||||
* @returns 应急预案管理列表
|
||||
*/
|
||||
export function contingenPlanExport(params?: ContingenPlanQuery) {
|
||||
return commonExport('/property/contingenPlan/export', params ?? {});
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询应急预案管理详情
|
||||
* @param id id
|
||||
* @returns 应急预案管理详情
|
||||
*/
|
||||
export function contingenPlanInfo(id: ID) {
|
||||
return requestClient.get<ContingenPlanVO>(`/property/contingenPlan/${id}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增应急预案管理
|
||||
* @param data
|
||||
* @returns void
|
||||
*/
|
||||
export function contingenPlanAdd(data: ContingenPlanForm) {
|
||||
return requestClient.postWithMsg<void>('/property/contingenPlan', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新应急预案管理
|
||||
* @param data
|
||||
* @returns void
|
||||
*/
|
||||
export function contingenPlanUpdate(data: ContingenPlanForm) {
|
||||
return requestClient.putWithMsg<void>('/property/contingenPlan', data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除应急预案管理
|
||||
* @param id id
|
||||
* @returns void
|
||||
*/
|
||||
export function contingenPlanRemove(id: ID | IDS) {
|
||||
return requestClient.deleteWithMsg<void>(`/property/contingenPlan/${id}`);
|
||||
}
|
||||
159
apps/web-antd/src/api/property/customerService/contingenPlan/model.d.ts
vendored
Normal file
159
apps/web-antd/src/api/property/customerService/contingenPlan/model.d.ts
vendored
Normal file
@@ -0,0 +1,159 @@
|
||||
import type { PageQuery, BaseEntity } from '#/api/common';
|
||||
|
||||
export interface ContingenPlanVO {
|
||||
/**
|
||||
* 主键
|
||||
*/
|
||||
id: string | number;
|
||||
|
||||
/**
|
||||
* 预案类型(1.自然灾害,2事故灾难3公共卫生,4社会安全)
|
||||
*/
|
||||
contingenPlanType: string;
|
||||
|
||||
/**
|
||||
* 预案名称
|
||||
*/
|
||||
contingenPlanName: string;
|
||||
|
||||
/**
|
||||
* 预案内容
|
||||
*/
|
||||
contingenPlanContent: string;
|
||||
|
||||
/**
|
||||
* 发起人
|
||||
*/
|
||||
initiat: string;
|
||||
|
||||
/**
|
||||
* 责任人
|
||||
*/
|
||||
dutyPersion: number;
|
||||
|
||||
/**
|
||||
* 风险等级
|
||||
*/
|
||||
grade: number;
|
||||
|
||||
/**
|
||||
* 完成时间
|
||||
*/
|
||||
compleTimes: string;
|
||||
|
||||
/**
|
||||
* 状态(1.待审核2待进行3已完成)
|
||||
*/
|
||||
status: string;
|
||||
|
||||
/**
|
||||
* 搜索值
|
||||
*/
|
||||
searchValue: string;
|
||||
|
||||
}
|
||||
|
||||
export interface ContingenPlanForm extends BaseEntity {
|
||||
/**
|
||||
* 主键
|
||||
*/
|
||||
id?: string | number;
|
||||
|
||||
/**
|
||||
* 预案类型(1.自然灾害,2事故灾难3公共卫生,4社会安全)
|
||||
*/
|
||||
contingenPlanType?: string;
|
||||
|
||||
/**
|
||||
* 预案名称
|
||||
*/
|
||||
contingenPlanName?: string;
|
||||
|
||||
/**
|
||||
* 预案内容
|
||||
*/
|
||||
contingenPlanContent?: string;
|
||||
|
||||
/**
|
||||
* 发起人
|
||||
*/
|
||||
initiat?: string;
|
||||
|
||||
/**
|
||||
* 责任人
|
||||
*/
|
||||
dutyPersion?: number;
|
||||
|
||||
/**
|
||||
* 风险等级
|
||||
*/
|
||||
grade?: number;
|
||||
|
||||
/**
|
||||
* 完成时间
|
||||
*/
|
||||
compleTimes?: string;
|
||||
|
||||
/**
|
||||
* 状态(1.待审核2待进行3已完成)
|
||||
*/
|
||||
status?: string;
|
||||
|
||||
/**
|
||||
* 搜索值
|
||||
*/
|
||||
searchValue?: string;
|
||||
|
||||
}
|
||||
|
||||
export interface ContingenPlanQuery extends PageQuery {
|
||||
/**
|
||||
* 预案类型(1.自然灾害,2事故灾难3公共卫生,4社会安全)
|
||||
*/
|
||||
contingenPlanType?: string;
|
||||
|
||||
/**
|
||||
* 预案名称
|
||||
*/
|
||||
contingenPlanName?: string;
|
||||
|
||||
/**
|
||||
* 预案内容
|
||||
*/
|
||||
contingenPlanContent?: string;
|
||||
|
||||
/**
|
||||
* 发起人
|
||||
*/
|
||||
initiat?: string;
|
||||
|
||||
/**
|
||||
* 责任人
|
||||
*/
|
||||
dutyPersion?: number;
|
||||
|
||||
/**
|
||||
* 风险等级
|
||||
*/
|
||||
grade?: number;
|
||||
|
||||
/**
|
||||
* 完成时间
|
||||
*/
|
||||
compleTimes?: string;
|
||||
|
||||
/**
|
||||
* 状态(1.待审核2待进行3已完成)
|
||||
*/
|
||||
status?: string;
|
||||
|
||||
/**
|
||||
* 搜索值
|
||||
*/
|
||||
searchValue?: string;
|
||||
|
||||
/**
|
||||
* 日期范围参数
|
||||
*/
|
||||
params?: any;
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
<script setup lang="ts">
|
||||
import {ref, shallowRef} from 'vue';
|
||||
import {useVbenModal} from '@vben/common-ui';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Descriptions,
|
||||
DescriptionsItem,
|
||||
Table,
|
||||
} from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import duration from 'dayjs/plugin/duration';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import {renderDict} from "#/utils/render";
|
||||
import {groupInfo} from "#/api/property/attendanceManagement/attendanceGroupSettings";
|
||||
import type {GroupVO} from "#/api/property/attendanceManagement/attendanceGroupSettings/model";
|
||||
import {
|
||||
infoCycleColumns,
|
||||
infoClockingColumns,
|
||||
infoNoClockingColumns,
|
||||
infoWeekdayColumns
|
||||
} from "#/views/property/attendanceManagement/attendanceGroupSettings/data";
|
||||
import holidayCalendar from './holiday-calendar.vue'
|
||||
|
||||
dayjs.extend(duration);
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
onOpenChange: handleOpenChange,
|
||||
onClosed() {
|
||||
groupDetail.value = null;
|
||||
},
|
||||
});
|
||||
|
||||
const groupDetail = shallowRef<null | GroupVO>(null);
|
||||
|
||||
const weekdayData = ref<any[]>([])
|
||||
const cycleData = ref<any[]>([])
|
||||
const unCheckInData = ref<any[]>([])
|
||||
const checkInData = ref<any[]>([])
|
||||
|
||||
async function handleOpenChange(open: boolean) {
|
||||
if (!open) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
const {id} = modalApi.getData() as { id: number | string };
|
||||
groupDetail.value = await groupInfo(id);
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
|
||||
const [HolidayCalendar, holidayApi] = useVbenModal({
|
||||
connectedComponent: holidayCalendar,
|
||||
});
|
||||
|
||||
/**
|
||||
* 查看法定节假日日历
|
||||
*/
|
||||
async function showHoliday() {
|
||||
holidayApi.open()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :footer="false" :fullscreen-button="false" title="考勤组信息" class="w-[70%]">
|
||||
<div v-if="groupDetail" class="des-container">
|
||||
<Descriptions size="small" :column="1" :labelStyle="{width:'100px'}">
|
||||
<DescriptionsItem label="考勤组名称">
|
||||
{{ groupDetail.groupName }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="考勤类型">
|
||||
<component
|
||||
:is="groupDetail.attendanceType ? renderDict(groupDetail.attendanceType,'wy_kqlx') : ''"
|
||||
/>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="状态">
|
||||
<component
|
||||
:is="renderDict(groupDetail.status,'wy_state')"
|
||||
/>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="工作日设置" v-if="groupDetail.attendanceType==0">
|
||||
<div class="item-font" style="width: 100%;">
|
||||
<Table style="width: 90%" bordered :columns="infoWeekdayColumns"
|
||||
:data-source="weekdayData"
|
||||
size="small" :pagination="false">
|
||||
</Table>
|
||||
<Checkbox class="item-padding-top" v-model:checked="groupDetail.isAutomatic">
|
||||
法定节假日自动排休
|
||||
</Checkbox>
|
||||
<Button type="link" @click="showHoliday">查看法定节假日日历</Button>
|
||||
<p class="item-padding-top item-font-weight">特殊日期：</p>
|
||||
<p class="item-padding">无需打卡日期：</p>
|
||||
<Table style="width: 75%" bordered :columns="infoNoClockingColumns"
|
||||
:data-source="unCheckInData"
|
||||
size="small" :pagination="false">
|
||||
<template #bodyCell="{ column,record,index }">
|
||||
<template v-if="column.dataIndex==='dateTime'">
|
||||
<span v-if="record.dateType==0">{{ record.startDate }}</span>
|
||||
<span v-else>{{ record.startDate + '~' + record.endDate }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
<p class="item-padding">必须打卡日期：</p>
|
||||
<Table style="width: 75%" bordered :columns="infoClockingColumns"
|
||||
:data-source="checkInData"
|
||||
size="small" :pagination="false">
|
||||
<template #bodyCell="{ column,record,index }">
|
||||
<template v-if="column.dataIndex==='dateTime'">
|
||||
<span v-if="record.dateType==0">{{ record.startDate }}</span>
|
||||
<span v-else>{{ record.startDate + '~' + record.endDate }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="排班周期" v-if="groupDetail.attendanceType==1">
|
||||
<p class="item-font">周期天数
|
||||
<span class="item-font-weight item-font-color">{{ cycleData.length }}</span>
|
||||
天</p>
|
||||
<Table style="width: 80%;margin-top: 5px" bordered :columns="infoCycleColumns" :data-source="cycleData"
|
||||
size="small" :pagination="false">
|
||||
<template #bodyCell="{ column,record,index }">
|
||||
<template v-if="column.dataIndex==='day'">
|
||||
<span>{{ '第' + (index + 1) + '天' }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex==='shiftId'">
|
||||
<!-- {{item.name+'\xa0'}}-->
|
||||
<!-- <span v-if="item.isRest">{{item.startTime+'~'+item.restStartTime+'\xa0'+item.restEndTime+'~'+item.endTime}}</span>-->
|
||||
<!-- <span v-else>{{item.startTime+'~'+item.endTime}}</span>-->
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
</DescriptionsItem>
|
||||
</Descriptions>
|
||||
<HolidayCalendar></HolidayCalendar>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.des-container {
|
||||
.item-font {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.item-font-weight {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-font-color {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.item-padding-top {
|
||||
padding-top: 1.1rem;
|
||||
}
|
||||
|
||||
.item-padding {
|
||||
padding: 1.1rem 0 0.5rem 0;
|
||||
}
|
||||
|
||||
:deep(.ant-descriptions .ant-descriptions-item-container .ant-descriptions-item-content) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -14,19 +14,21 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
onConfirm: handleConfirm,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{ shiftInfo: [info: ShiftVO], shiftList: [list: ShiftVO[]] }>();
|
||||
const emit = defineEmits(['shiftInfo', 'shiftList', 'afterValue']);
|
||||
|
||||
const handleType = ref<number>(1);
|
||||
const tableLoading = ref<boolean>(true);
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.lock(true);
|
||||
if (state.selectedRowKeys.length) {
|
||||
let arr = shiftData.value.filter(item => state.selectedRowKeys.includes(item.id))
|
||||
if (handleType.value == 1 && arr.length) {
|
||||
await emit('shiftInfo', arr[0]);
|
||||
} else if (handleType.value == 2 && arr.length) {
|
||||
await emit('shiftList', arr);
|
||||
let arr = shiftData.value.filter((item: ShiftVO) => state.selectedRowKeys.includes(item.id));
|
||||
if (handleType.value === 1 && arr.length) {
|
||||
emit('shiftInfo', arr[0]);
|
||||
} else if (handleType.value === 2 && arr.length) {
|
||||
emit('shiftList', arr);
|
||||
} else if (handleType.value === 3 && arr.length) {
|
||||
emit('afterValue', arr[0]);
|
||||
}
|
||||
}
|
||||
modalApi.close();
|
||||
@@ -41,10 +43,11 @@ async function handleOpenChange(open: boolean) {
|
||||
if (!open) {
|
||||
return null;
|
||||
}
|
||||
state.selectedRowKeys = []
|
||||
handleType.value = modalApi.getData()?.type;
|
||||
await queryShiftData()
|
||||
modalApi.modalLoading(true);
|
||||
state.selectedRowKeys = []
|
||||
const {type} = await modalApi.getData() as {type:number};
|
||||
handleType.value = type;
|
||||
await queryShiftData()
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
|
||||
@@ -52,7 +55,6 @@ const shiftData = ref<ShiftVO[]>([])
|
||||
const shiftName = ref<string>('')
|
||||
|
||||
async function queryShiftData() {
|
||||
tableLoading.value = true
|
||||
let params = {
|
||||
name: shiftName.value,
|
||||
pageNum: 1,
|
||||
@@ -60,17 +62,16 @@ async function queryShiftData() {
|
||||
}
|
||||
const res = await shiftList(params)
|
||||
shiftData.value = res.rows
|
||||
tableLoading.value = false
|
||||
}
|
||||
|
||||
// 行勾选状态
|
||||
const state = reactive({
|
||||
selectedRowKeys: [],
|
||||
selectedRowKeys: [] as string[],
|
||||
});
|
||||
|
||||
// 勾选变化时的回调
|
||||
const onSelectChange = (selectedRowKeys: string[]) => {
|
||||
if (selectedRowKeys.length > 1 && handleType.value == 1) {
|
||||
if (selectedRowKeys.length > 1 && (handleType.value == 1||handleType.value == 3)) {
|
||||
state.selectedRowKeys = selectedRowKeys.slice(-1);
|
||||
} else {
|
||||
state.selectedRowKeys = selectedRowKeys;
|
||||
@@ -110,7 +111,6 @@ const resetHandle = () => {
|
||||
:pagination="false"
|
||||
rowKey="id"
|
||||
:scroll="{ y: 350 }"
|
||||
:loading="tableLoading"
|
||||
>
|
||||
<template #bodyCell="{ column, record,index }">
|
||||
<template v-if="column.dataIndex==='id'">
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
import {computed, ref} from 'vue';
|
||||
import {useVbenModal} from '@vben/common-ui';
|
||||
import {cloneDeep} from '@vben/utils';
|
||||
import {useVbenForm} from '#/adapter/form';
|
||||
import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
|
||||
import {clockInModalSchema} from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
const isClockIn = ref(false);
|
||||
const emit = defineEmits(['checkIn', 'unCheckIn']);
|
||||
const isClockIn = ref(false);
|
||||
|
||||
const title = computed(() => {
|
||||
return isClockIn.value ? '必须打卡日期' : '无需打卡日期';
|
||||
return isClockIn.value ? '必须打卡日期' : '无需打卡日期';
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
@@ -26,7 +26,7 @@ const [BasicForm, formApi] = useVbenForm({
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
|
||||
{
|
||||
initializedGetter: defaultFormValueGetter(formApi),
|
||||
currentGetter: defaultFormValueGetter(formApi),
|
||||
@@ -44,8 +44,8 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
const { type } = modalApi.getData() as { type?: number };
|
||||
isClockIn.value = !!type;
|
||||
const {check} = modalApi.getData() as { check?: boolean };
|
||||
isClockIn.value = check;
|
||||
await markInitialized();
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
@@ -54,11 +54,20 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.lock(true);
|
||||
const { valid } = await formApi.validate();
|
||||
const {valid} = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
if (data.dateType == 1) {
|
||||
data.startDate = data.timeSlot[0]
|
||||
data.endDate = data.timeSlot[1]
|
||||
}
|
||||
if (isClockIn.value) {
|
||||
emit('checkIn', data)
|
||||
} else {
|
||||
emit('unCheckIn', data)
|
||||
}
|
||||
resetInitialized();
|
||||
await modalApi.close();
|
||||
} catch (error) {
|
||||
|
||||
@@ -72,6 +72,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
fieldName: 'groupName',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
formItemClass:'col-span-1'
|
||||
},
|
||||
{
|
||||
label: '考勤类型',//(0:固定班制,1:排班制)
|
||||
@@ -82,7 +83,7 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
options: getDictOptions('wy_kqlx'),
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
defaultValue: '0'
|
||||
defaultValue: '0',
|
||||
},
|
||||
{
|
||||
label: '工作日设置',
|
||||
@@ -174,10 +175,10 @@ export const weekdayColumns: TableColumnsType = [
|
||||
},
|
||||
{
|
||||
title: '班次',
|
||||
key: 'shift',
|
||||
key: 'shiftValue',
|
||||
minWidth: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'shift'
|
||||
dataIndex: 'shiftValue'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
@@ -191,10 +192,10 @@ export const weekdayColumns: TableColumnsType = [
|
||||
export const noClockingColumns: TableColumnsType = [
|
||||
{
|
||||
title: '无需打卡日期',
|
||||
key: 'label',
|
||||
key: 'dateTime',
|
||||
minWidth: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'label'
|
||||
dataIndex: 'dateTime'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
@@ -208,10 +209,10 @@ export const noClockingColumns: TableColumnsType = [
|
||||
export const clockingColumns: TableColumnsType = [
|
||||
{
|
||||
title: '必须打卡日期',
|
||||
key: 'label',
|
||||
key: 'dateTime',
|
||||
minWidth: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'label'
|
||||
dataIndex: 'dateTime'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
@@ -225,17 +226,17 @@ export const clockingColumns: TableColumnsType = [
|
||||
export const cycleColumns: TableColumnsType = [
|
||||
{
|
||||
title: '天数',
|
||||
key: 'label',
|
||||
key: 'day',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
dataIndex: 'label'
|
||||
dataIndex: 'day'
|
||||
},
|
||||
{
|
||||
title: '班次',
|
||||
key: 'label',
|
||||
key: 'shiftId',
|
||||
minWidth: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'label'
|
||||
dataIndex: 'shiftId'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
@@ -271,24 +272,24 @@ export const shiftColumns = [
|
||||
];
|
||||
|
||||
const typeOptions = [
|
||||
{label: '单个日期', value: 1},
|
||||
{label: '时间段', value: 2},
|
||||
{label: '单个日期', value: 0},
|
||||
{label: '时间段', value: 1},
|
||||
];
|
||||
export const clockInModalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: '添加方式',
|
||||
fieldName: 'type',
|
||||
fieldName: 'dateType',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
options: typeOptions,
|
||||
buttonStyle: 'solid',
|
||||
},
|
||||
defaultValue:1,
|
||||
defaultValue:0,
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '日期',
|
||||
fieldName: 'singleTime',
|
||||
fieldName: 'startDate',
|
||||
component: 'DatePicker',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
@@ -296,8 +297,8 @@ export const clockInModalSchema: FormSchemaGetter = () => [
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
},
|
||||
dependencies: {
|
||||
show: (formValue) => formValue.type==1,
|
||||
triggerFields: ['type'],
|
||||
show: (formValue) => formValue.dateType==0,
|
||||
triggerFields: ['dateType'],
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -310,10 +311,64 @@ export const clockInModalSchema: FormSchemaGetter = () => [
|
||||
},
|
||||
rules: 'required',
|
||||
dependencies: {
|
||||
show: (formValue) => formValue.type==2,
|
||||
triggerFields: ['type'],
|
||||
show: (formValue) => formValue.dateType==1,
|
||||
triggerFields: ['dateType'],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
export const infoWeekdayColumns: TableColumnsType = [
|
||||
{
|
||||
title: '工作日',
|
||||
key: 'label',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
dataIndex: 'label'
|
||||
},
|
||||
{
|
||||
title: '班次',
|
||||
key: 'shiftValue',
|
||||
minWidth: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'shiftValue'
|
||||
},
|
||||
]
|
||||
|
||||
export const infoNoClockingColumns: TableColumnsType = [
|
||||
{
|
||||
title: '无需打卡日期',
|
||||
key: 'dateTime',
|
||||
minWidth: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'dateTime'
|
||||
},
|
||||
]
|
||||
|
||||
export const infoClockingColumns: TableColumnsType = [
|
||||
{
|
||||
title: '必须打卡日期',
|
||||
key: 'dateTime',
|
||||
minWidth: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'dateTime'
|
||||
},
|
||||
]
|
||||
|
||||
export const infoCycleColumns: TableColumnsType = [
|
||||
{
|
||||
title: '天数',
|
||||
key: 'day',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
dataIndex: 'day'
|
||||
},
|
||||
{
|
||||
title: '班次',
|
||||
key: 'shiftId',
|
||||
minWidth: 180,
|
||||
align: 'center',
|
||||
dataIndex: 'shiftId'
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ import {
|
||||
noClockingColumns,
|
||||
weekdayColumns
|
||||
} from './data';
|
||||
import {Tag, Button, Table, Checkbox} from 'ant-design-vue'
|
||||
import {Tag, Button, Table, Checkbox, Select, SelectOption,message} from 'ant-design-vue'
|
||||
import {getDictOptions} from "#/utils/dict";
|
||||
import holidayCalendar from './holiday-calendar.vue'
|
||||
import changeShiftSchedule from './change-shift-schedule.vue'
|
||||
@@ -30,7 +30,7 @@ import {PlusOutlined, MinusOutlined} from '@ant-design/icons-vue';
|
||||
import type {ShiftVO} from "#/api/property/attendanceManagement/shiftSetting/model";
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const groupId = ref<string | number>();
|
||||
const isUpdate = ref(false);
|
||||
const weekdayData = ref<any[]>([])
|
||||
const title = computed(() => {
|
||||
@@ -86,7 +86,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 +120,9 @@ async function handleConfirm() {
|
||||
async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
cycleData.value = []
|
||||
unCheckInData.value = []
|
||||
checkInData.value = []
|
||||
}
|
||||
|
||||
const [HolidayCalendar, holidayApi] = useVbenModal({
|
||||
@@ -142,59 +147,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 +292,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 +312,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 +335,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 +359,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 +381,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 +414,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 +428,10 @@ async function restHandle(index){
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-font-color {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.item-padding-top {
|
||||
padding-top: 1.1rem;
|
||||
}
|
||||
|
||||
@@ -20,6 +20,7 @@ import type { GroupForm } from '#/api/property/attendanceManagement/attendanceGr
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
|
||||
import groupModal from './group-modal.vue';
|
||||
import attendanceGroupDetail from './attendance-group-detail.vue';
|
||||
import { columns, querySchema } from './data';
|
||||
import {TableSwitch} from "#/components/table";
|
||||
import {useAccess} from "@vben/access";
|
||||
@@ -77,6 +78,10 @@ const [GroupModal, modalApi] = useVbenModal({
|
||||
connectedComponent: groupModal,
|
||||
});
|
||||
|
||||
const [AttendanceGroupDetail, detailApi] = useVbenModal({
|
||||
connectedComponent: attendanceGroupDetail,
|
||||
});
|
||||
|
||||
function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
@@ -87,6 +92,11 @@ async function handleEdit(row: Required<GroupForm>) {
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleInfo(row: Required<GroupForm>) {
|
||||
detailApi.setData({ id: row.id });
|
||||
detailApi.open();
|
||||
}
|
||||
|
||||
async function handleDelete(row: Required<GroupForm>) {
|
||||
await groupRemove(row.id);
|
||||
await tableApi.query();
|
||||
@@ -143,6 +153,12 @@ function handleDownloadExcel() {
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
v-access:code="['Property:group:info']"
|
||||
@click.stop="handleInfo(row)"
|
||||
>
|
||||
{{ $t('pages.common.info') }}
|
||||
</ghost-button>
|
||||
<ghost-button
|
||||
v-access:code="['Property:group:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
@@ -177,5 +193,6 @@ function handleDownloadExcel() {
|
||||
</template>
|
||||
</BasicTable>
|
||||
<GroupModal @reload="tableApi.query()" />
|
||||
<AttendanceGroupDetail></AttendanceGroupDetail>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, reactive } from 'vue';
|
||||
import { computed, ref, 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,55 @@ 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';
|
||||
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 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 +97,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,44 +111,6 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
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 ? 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: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
|
||||
@@ -175,42 +178,122 @@ 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);
|
||||
// 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');
|
||||
}
|
||||
|
||||
}
|
||||
// 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();
|
||||
}
|
||||
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>
|
||||
@@ -223,15 +306,9 @@ function handleAdd() {
|
||||
<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="确认删除？"
|
||||
title="确认移除？"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<ghost-button
|
||||
@@ -239,7 +316,7 @@ function handleAdd() {
|
||||
v-access:code="['property:arrangement:remove']"
|
||||
@click.stop=""
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
移除
|
||||
</ghost-button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
@@ -250,4 +327,16 @@ function handleAdd() {
|
||||
<!-- 底部按钮区 -->
|
||||
</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>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, reactive } from 'vue';
|
||||
import { computed, ref, reactive, onMounted } from 'vue';
|
||||
import { SyncOutlined } from '@ant-design/icons-vue';
|
||||
import { Tree, InputSearch, Skeleton, Empty, Button } from 'ant-design-vue';
|
||||
|
||||
@@ -15,7 +15,7 @@ import {
|
||||
} from '#/adapter/vxe-table';
|
||||
import { modalSchema,unitColumns,unitQuerySchema } from './data';
|
||||
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
||||
|
||||
import { resident_unitList } from '#/api/property/resident/unit';
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
const selectDeptId = ref<string[]>([]);
|
||||
const isUpdate = ref(false);
|
||||
@@ -26,22 +26,28 @@ const showSearch = ref(true);
|
||||
const searchValue = ref('');
|
||||
const selectedDeptIds = ref<string[]>([]);
|
||||
const showTreeSkeleton = ref(false);
|
||||
|
||||
// mock 部门树数据
|
||||
const deptTree = ref([
|
||||
//单位树
|
||||
const deptTree = reactive([
|
||||
{
|
||||
id: '1',
|
||||
label: '公司',
|
||||
id: '',
|
||||
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 tableData = ref([
|
||||
{ dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
|
||||
{ dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
|
||||
{ dept: '', users: [] },
|
||||
]);
|
||||
//已选人
|
||||
const staticData = [
|
||||
{ id: 1, dept: 'xx部门', name: '张三' },
|
||||
{ id: 2, dept: 'yy部门', name: '李四' },
|
||||
];
|
||||
|
||||
|
||||
function handleReload() {
|
||||
showTreeSkeleton.value = true;
|
||||
@@ -181,16 +187,7 @@ const formModel = reactive({
|
||||
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() {
|
||||
@@ -239,15 +236,18 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
});
|
||||
async function handleEdit(row: any){
|
||||
modalApi.setData({ id: row.id });
|
||||
modalApi.open();
|
||||
}
|
||||
async function handleDelete(row: any) {
|
||||
console.log(12);
|
||||
}
|
||||
async function loadDetail() {
|
||||
|
||||
async function getUnitList(){
|
||||
const res = await resident_unitList();
|
||||
for(const item of res.rows){
|
||||
deptTree.
|
||||
}
|
||||
console.log(res);
|
||||
}
|
||||
onMounted(() => {
|
||||
getUnitList();
|
||||
console.log(tableData.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -258,7 +258,7 @@ 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;"
|
||||
>
|
||||
@@ -289,36 +289,16 @@ 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;">
|
||||
已选人员：
|
||||
</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>
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
import type {FormSchemaGetter} from '#/adapter/form';
|
||||
import type {VxeGridProps} from '#/adapter/vxe-table';
|
||||
import {renderDict} from "#/utils/render";
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'orderNo',
|
||||
label: '工单编号',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'orderName',
|
||||
label: '工单名称',
|
||||
},
|
||||
// {
|
||||
// component: 'Select',
|
||||
// componentProps: {
|
||||
// options: getDictOptions('wy_gdclzt'),
|
||||
// },
|
||||
// fieldName: 'status',
|
||||
// label: '状态',
|
||||
// },
|
||||
];
|
||||
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{
|
||||
title: '工单编号',
|
||||
field: 'orderNo',
|
||||
},
|
||||
{
|
||||
title: '工单名称',
|
||||
field: 'orderName',
|
||||
},
|
||||
{
|
||||
title: '工单类型',
|
||||
field: 'typeName',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
field: 'status',
|
||||
slots: {
|
||||
default: ({row}) => {
|
||||
return renderDict(row.status, 'wy_gdclzt');
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
field: 'location',
|
||||
},
|
||||
{
|
||||
title: '计划完成时间',
|
||||
field: 'planCompleTime',
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
fixed: 'right',
|
||||
slots: {default: 'action'},
|
||||
title: '操作',
|
||||
width: 120,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@@ -1,11 +1,92 @@
|
||||
<script setup lang="ts">
|
||||
import {Page, useVbenModal, type VbenFormProps} from '@vben/common-ui';
|
||||
import {Space} from 'ant-design-vue';
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
type VxeGridProps
|
||||
} from '#/adapter/vxe-table';
|
||||
import {
|
||||
workOrdersList,
|
||||
} from '#/api/property/businessManagement/workOrders';
|
||||
import workOrdersDetail from './work-orders-detail.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',
|
||||
},
|
||||
columns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({page}, formValues = {}) => {
|
||||
return await workOrdersList({
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
status:'0',
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'property-workOrders-index'
|
||||
};
|
||||
|
||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
});
|
||||
|
||||
const [WorkOrdersDetail, detailApi] = useVbenModal({
|
||||
connectedComponent: workOrdersDetail,
|
||||
});
|
||||
|
||||
function handleInfo(row:any) {
|
||||
detailApi.setData({id:row.id});
|
||||
detailApi.open();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<Page :auto-content-height="true">
|
||||
<BasicTable table-title="工单待办列表" class="order-work-left-radio">
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
v-access:code="['property:workOrders:info']"
|
||||
@click.stop="handleInfo(row)"
|
||||
>
|
||||
{{ $t('pages.common.info') }}
|
||||
</ghost-button>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<WorkOrdersDetail/>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
<script setup lang="ts">
|
||||
import {useVbenModal} from '@vben/common-ui';
|
||||
import {cloneDeep} from '@vben/utils';
|
||||
import {useVbenForm} from '#/adapter/form';
|
||||
import {
|
||||
workOrdersInfo,
|
||||
workOrdersUpdate
|
||||
} from '#/api/property/businessManagement/workOrders';
|
||||
import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
|
||||
import {ordersModalSchema} from './data';
|
||||
import {personList} from "#/api/property/resident/person";
|
||||
import {renderDictValue} from "#/utils/render";
|
||||
import {onMounted, ref} from "vue";
|
||||
import { useUserStore } from '@vben/stores';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-1',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 80,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
}
|
||||
},
|
||||
schema: ordersModalSchema(),
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
|
||||
{
|
||||
initializedGetter: defaultFormValueGetter(formApi),
|
||||
currentGetter: defaultFormValueGetter(formApi),
|
||||
},
|
||||
);
|
||||
|
||||
const record = ref({})
|
||||
const title = ref('派单')
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[550px]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
onClosed: handleClosed,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
await queryPersonData()
|
||||
const {id} = modalApi.getData() as { id?: number | string };
|
||||
const {mean} = modalApi.getData() as { rob?: number | string };
|
||||
if (id) {
|
||||
record.value = await workOrdersInfo(id);
|
||||
if(mean === 'rob'){
|
||||
title.value = '抢单'
|
||||
record.value.status = '2';
|
||||
record.value.handler = record.value.initiatorPeople;
|
||||
}else{
|
||||
title.value = '派单'
|
||||
record.value.status = '1';
|
||||
record.value.handler = null;
|
||||
}
|
||||
await formApi.setValues(record.value);
|
||||
}
|
||||
await markInitialized();
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.lock(true);
|
||||
const {valid} = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
if(title.value === '派单'){
|
||||
record.value.handler = data.handler
|
||||
}else{
|
||||
record.value.handler = userStore.userInfo.userId
|
||||
}
|
||||
await workOrdersUpdate(record.value)
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
}
|
||||
|
||||
async function queryPersonData() {
|
||||
let params = {
|
||||
pageSize: 1000,
|
||||
pageNum: 1,
|
||||
}
|
||||
const res = await personList(params);
|
||||
const options = res.rows.map((user) => ({
|
||||
label: user.userName + '-' + renderDictValue(user.gender, 'sys_user_sex') + '-' + user.phone,
|
||||
value: user.id,
|
||||
}));
|
||||
formApi.updateSchema([
|
||||
{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
showSearch:true,
|
||||
filterOption: filterOption
|
||||
}),
|
||||
fieldName: 'handler',
|
||||
}])
|
||||
}
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm/>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, shallowRef} from 'vue';
|
||||
import {useVbenModal} from '@vben/common-ui';
|
||||
import {Descriptions, DescriptionsItem, Timeline, TimelineItem, Rate,Divider} from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import duration from 'dayjs/plugin/duration';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import {renderDict} from "#/utils/render";
|
||||
import {workOrdersInfo} from "#/api/property/businessManagement/workOrders";
|
||||
import type {WorkOrdersVO} from "#/api/property/businessManagement/workOrders/model";
|
||||
|
||||
dayjs.extend(duration);
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
onOpenChange: handleOpenChange,
|
||||
onClosed() {
|
||||
orderDetail.value = null;
|
||||
},
|
||||
});
|
||||
|
||||
const orderDetail = shallowRef<null | WorkOrdersVO>(null);
|
||||
const handleRecords=ref<any[]>([])
|
||||
async function handleOpenChange(open: boolean) {
|
||||
if (!open) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
const {id} = modalApi.getData() as { id: number | string };
|
||||
orderDetail.value = await workOrdersInfo(id);
|
||||
if(orderDetail.value){
|
||||
handleRecords.value = orderDetail.value.workOrdersRecordVoList.map( (item, index) => ({
|
||||
status: item.status,
|
||||
createTime: item.createTime,
|
||||
handlerName: index === 0 ? item.initiatorPeople : item.handlerName
|
||||
}))
|
||||
}
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :footer="false" :fullscreen-button="false" title="工单详情信息" class="w-[70%]">
|
||||
<div v-if="orderDetail">
|
||||
<Descriptions size="small" :column="2" :labelStyle="{width:'100px'}">
|
||||
<DescriptionsItem label="订单号">
|
||||
{{ orderDetail.orderNo }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="工单名称">
|
||||
{{ orderDetail.orderName }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="工单类型">
|
||||
{{orderDetail.typeName}}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="发起人">
|
||||
{{ orderDetail.initiatorPeople }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="具体位置">
|
||||
{{ orderDetail.location }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="计划完成时间">
|
||||
{{ orderDetail.planCompleTime }}
|
||||
</DescriptionsItem>
|
||||
</Descriptions>
|
||||
<Divider orientation="left" orientation-margin="0px">
|
||||
处理记录
|
||||
</Divider>
|
||||
<Timeline>
|
||||
<TimelineItem v-for="(item,index) in handleRecords" :key="index">
|
||||
<p style="display: flex;">类型：
|
||||
<component
|
||||
:is="renderDict(item.status,'wy_gdclzt')"
|
||||
/></p>
|
||||
<p>时间：{{item.createTime}}</p>
|
||||
<p>处理人：{{item.handlerName}}</p>
|
||||
</TimelineItem>
|
||||
</Timeline>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -0,0 +1,163 @@
|
||||
<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 {
|
||||
workOrdersAdd,
|
||||
workOrdersInfo,
|
||||
workOrdersUpdate
|
||||
} from '#/api/property/businessManagement/workOrders';
|
||||
import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
|
||||
|
||||
import {modalSchema} from './data';
|
||||
import {personList} from "#/api/property/resident/person";
|
||||
import {renderDictValue} from "#/utils/render";
|
||||
import {workOrdersTypeList} from "#/api/property/businessManagement/workOrdersType";
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
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);
|
||||
await queryPersonData()
|
||||
await queryWorkOrdersType()
|
||||
const {id} = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await workOrdersInfo(id);
|
||||
record.isTimeOut = record.isTimeOut?.toString()
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
await markInitialized();
|
||||
|
||||
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 ? workOrdersUpdate(data) : workOrdersAdd(data));
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
}
|
||||
|
||||
async function queryPersonData() {
|
||||
let params = {
|
||||
pageSize: 1000,
|
||||
pageNum: 1,
|
||||
}
|
||||
const res = await personList(params);
|
||||
const options = res.rows.map((user) => ({
|
||||
label: user.userName + '-' + renderDictValue(user.gender, 'sys_user_sex') + '-' + user.phone,
|
||||
value: user.id,
|
||||
}));
|
||||
formApi.updateSchema([{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
showSearch:true,
|
||||
filterOption: filterOption
|
||||
}),
|
||||
fieldName: 'initiatorName',
|
||||
},
|
||||
{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
showSearch:true,
|
||||
filterOption: filterOption
|
||||
}),
|
||||
fieldName: 'handler',
|
||||
}])
|
||||
}
|
||||
|
||||
async function queryWorkOrdersType() {
|
||||
let params = {
|
||||
pageSize: 1000,
|
||||
pageNum: 1
|
||||
}
|
||||
const res = await workOrdersTypeList(params)
|
||||
const options = res.rows.map((item) => ({
|
||||
label: item.orderTypeName,
|
||||
value: item.id,
|
||||
}));
|
||||
formApi.updateSchema([{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
filterOption: filterOption,
|
||||
showSearch:true,
|
||||
}),
|
||||
fieldName: 'type',
|
||||
}])
|
||||
}
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm/>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
import type {FormSchemaGetter} from '#/adapter/form';
|
||||
import type {VxeGridProps} from '#/adapter/vxe-table';
|
||||
import {renderDict} from "#/utils/render";
|
||||
import {h} from "vue";
|
||||
import {Rate} from "ant-design-vue";
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'orderNo',
|
||||
label: '工单编号',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'orderName',
|
||||
label: '工单名称',
|
||||
},
|
||||
// {
|
||||
// component: 'Select',
|
||||
// componentProps: {
|
||||
// options: getDictOptions('wy_gdclzt'),
|
||||
// },
|
||||
// fieldName: 'status',
|
||||
// label: '状态',
|
||||
// },
|
||||
];
|
||||
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{
|
||||
title: '工单编号',
|
||||
field: 'orderNo',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '工单名称',
|
||||
field: 'orderName',
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
title: '工单类型',
|
||||
field: 'typeName',
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
title: '派单时间',
|
||||
field: 'dispatchTime',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
field: 'status',
|
||||
slots: {
|
||||
default: ({row}) => {
|
||||
return renderDict(row.status, 'wy_gdclzt');
|
||||
},
|
||||
},
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
field: 'location',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '计划完成时间',
|
||||
field: 'planCompleTime',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '完成时间',
|
||||
field: 'compleTime',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '评价',
|
||||
field: 'serviceEvalua',
|
||||
width: 180,
|
||||
slots: {
|
||||
default: ({row}) => {
|
||||
return h(Rate, {
|
||||
value: row.serviceEvalua || 0,
|
||||
disabled: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '是否超时',
|
||||
field: 'isTimeOut',
|
||||
width: 100,
|
||||
slots: {
|
||||
default: ({row}) => {
|
||||
return row.isTimeOut ? renderDict(row.isTimeOut, 'wy_sf') : '';
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
fixed: 'right',
|
||||
slots: {default: 'action'},
|
||||
title: '操作',
|
||||
width: 120,
|
||||
},
|
||||
];
|
||||
@@ -1,11 +1,92 @@
|
||||
<script setup lang="ts">
|
||||
import {Page, useVbenModal, type VbenFormProps} from '@vben/common-ui';
|
||||
import {Space} from 'ant-design-vue';
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
type VxeGridProps
|
||||
} from '#/adapter/vxe-table';
|
||||
import {
|
||||
workOrdersList,
|
||||
} from '#/api/property/businessManagement/workOrders';
|
||||
import workOrdersDetail from './work-orders-detail.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',
|
||||
},
|
||||
columns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({page}, formValues = {}) => {
|
||||
return await workOrdersList({
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
status:'4',
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'property-workOrders-index'
|
||||
};
|
||||
|
||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
});
|
||||
|
||||
const [WorkOrdersDetail, detailApi] = useVbenModal({
|
||||
connectedComponent: workOrdersDetail,
|
||||
});
|
||||
|
||||
function handleInfo(row:any) {
|
||||
detailApi.setData({id:row.id});
|
||||
detailApi.open();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<Page :auto-content-height="true">
|
||||
<BasicTable table-title="工单已办列表" class="order-work-left-radio">
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
v-access:code="['property:workOrders:info']"
|
||||
@click.stop="handleInfo(row)"
|
||||
>
|
||||
{{ $t('pages.common.info') }}
|
||||
</ghost-button>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<WorkOrdersDetail/>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
<script setup lang="ts">
|
||||
import {useVbenModal} from '@vben/common-ui';
|
||||
import {cloneDeep} from '@vben/utils';
|
||||
import {useVbenForm} from '#/adapter/form';
|
||||
import {
|
||||
workOrdersInfo,
|
||||
workOrdersUpdate
|
||||
} from '#/api/property/businessManagement/workOrders';
|
||||
import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
|
||||
import {ordersModalSchema} from './data';
|
||||
import {personList} from "#/api/property/resident/person";
|
||||
import {renderDictValue} from "#/utils/render";
|
||||
import {ref} from "vue";
|
||||
import { useUserStore } from '@vben/stores';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-1',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 80,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
}
|
||||
},
|
||||
schema: ordersModalSchema(),
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
|
||||
{
|
||||
initializedGetter: defaultFormValueGetter(formApi),
|
||||
currentGetter: defaultFormValueGetter(formApi),
|
||||
},
|
||||
);
|
||||
|
||||
const record = ref({})
|
||||
const title = ref('派单')
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[550px]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
onClosed: handleClosed,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
await queryPersonData()
|
||||
const {id} = modalApi.getData() as { id?: number | string };
|
||||
const {mean} = modalApi.getData() as { rob?: number | string };
|
||||
if (id) {
|
||||
record.value = await workOrdersInfo(id);
|
||||
if(mean === 'rob'){
|
||||
title.value = '抢单'
|
||||
record.value.status = '2';
|
||||
record.value.handler = record.value.initiatorPeople;
|
||||
}else{
|
||||
title.value = '派单'
|
||||
record.value.status = '1';
|
||||
record.value.handler = null;
|
||||
}
|
||||
await formApi.setValues(record.value);
|
||||
}
|
||||
await markInitialized();
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.lock(true);
|
||||
const {valid} = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
if(title.value === '派单'){
|
||||
record.value.handler = data.handler
|
||||
}else{
|
||||
record.value.handler = userStore.userInfo.userId
|
||||
}
|
||||
await workOrdersUpdate(record.value)
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
}
|
||||
|
||||
async function queryPersonData() {
|
||||
let params = {
|
||||
pageSize: 1000,
|
||||
pageNum: 1,
|
||||
}
|
||||
const res = await personList(params);
|
||||
const options = res.rows.map((user) => ({
|
||||
label: user.userName + '-' + renderDictValue(user.gender, 'sys_user_sex') + '-' + user.phone,
|
||||
value: user.id,
|
||||
}));
|
||||
formApi.updateSchema([
|
||||
{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
showSearch:true,
|
||||
filterOption: filterOption
|
||||
}),
|
||||
fieldName: 'handler',
|
||||
}])
|
||||
}
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm/>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, shallowRef} from 'vue';
|
||||
import {useVbenModal} from '@vben/common-ui';
|
||||
import {Descriptions, DescriptionsItem, Timeline, TimelineItem, Rate,Divider} from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import duration from 'dayjs/plugin/duration';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import {renderDict} from "#/utils/render";
|
||||
import {workOrdersInfo} from "#/api/property/businessManagement/workOrders";
|
||||
import type {WorkOrdersVO} from "#/api/property/businessManagement/workOrders/model";
|
||||
|
||||
dayjs.extend(duration);
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
onOpenChange: handleOpenChange,
|
||||
onClosed() {
|
||||
orderDetail.value = null;
|
||||
},
|
||||
});
|
||||
|
||||
const orderDetail = shallowRef<null | WorkOrdersVO>(null);
|
||||
const handleRecords=ref<any[]>([])
|
||||
async function handleOpenChange(open: boolean) {
|
||||
if (!open) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
const {id} = modalApi.getData() as { id: number | string };
|
||||
orderDetail.value = await workOrdersInfo(id);
|
||||
if(orderDetail.value){
|
||||
handleRecords.value = orderDetail.value.workOrdersRecordVoList.map( (item, index) => ({
|
||||
status: item.status,
|
||||
createTime: item.createTime,
|
||||
handlerName: index === 0 ? item.initiatorPeople : item.handlerName
|
||||
}))
|
||||
}
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :footer="false" :fullscreen-button="false" title="工单详情信息" class="w-[70%]">
|
||||
<div v-if="orderDetail">
|
||||
<Descriptions size="small" :column="2" :labelStyle="{width:'120px'}">
|
||||
<DescriptionsItem label="订单号">
|
||||
{{ orderDetail.orderNo }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="工单名称">
|
||||
{{ orderDetail.orderName }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="工单类型">
|
||||
{{orderDetail.typeName}}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="发起人">
|
||||
{{ orderDetail.initiatorPeople }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="派单/抢单时间">
|
||||
{{ orderDetail.dispatchTime }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="处理人">
|
||||
{{ orderDetail.handlerText }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="具体位置" :span="2">
|
||||
{{ orderDetail.location }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="计划完成时间">
|
||||
{{ orderDetail.planCompleTime }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="完成时间">
|
||||
{{ orderDetail.compleTime }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="服务评价">
|
||||
<Rate :value="orderDetail.serviceEvalua" disabled/>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="是否超时">
|
||||
<component
|
||||
:is="orderDetail.isTimeOut ? renderDict(orderDetail.isTimeOut,'wy_sf') : ''"
|
||||
/>
|
||||
</DescriptionsItem>
|
||||
</Descriptions>
|
||||
<Divider orientation="left" orientation-margin="0px">
|
||||
处理记录
|
||||
</Divider>
|
||||
<Timeline>
|
||||
<TimelineItem v-for="(item,index) in handleRecords" :key="index">
|
||||
<p style="display: flex;">类型：
|
||||
<component
|
||||
:is="renderDict(item.status,'wy_gdclzt')"
|
||||
/></p>
|
||||
<p>时间：{{item.createTime}}</p>
|
||||
<p>处理人：{{item.handlerName}}</p>
|
||||
</TimelineItem>
|
||||
</Timeline>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -0,0 +1,163 @@
|
||||
<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 {
|
||||
workOrdersAdd,
|
||||
workOrdersInfo,
|
||||
workOrdersUpdate
|
||||
} from '#/api/property/businessManagement/workOrders';
|
||||
import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
|
||||
|
||||
import {modalSchema} from './data';
|
||||
import {personList} from "#/api/property/resident/person";
|
||||
import {renderDictValue} from "#/utils/render";
|
||||
import {workOrdersTypeList} from "#/api/property/businessManagement/workOrdersType";
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
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);
|
||||
await queryPersonData()
|
||||
await queryWorkOrdersType()
|
||||
const {id} = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await workOrdersInfo(id);
|
||||
record.isTimeOut = record.isTimeOut?.toString()
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
await markInitialized();
|
||||
|
||||
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 ? workOrdersUpdate(data) : workOrdersAdd(data));
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
}
|
||||
|
||||
async function queryPersonData() {
|
||||
let params = {
|
||||
pageSize: 1000,
|
||||
pageNum: 1,
|
||||
}
|
||||
const res = await personList(params);
|
||||
const options = res.rows.map((user) => ({
|
||||
label: user.userName + '-' + renderDictValue(user.gender, 'sys_user_sex') + '-' + user.phone,
|
||||
value: user.id,
|
||||
}));
|
||||
formApi.updateSchema([{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
showSearch:true,
|
||||
filterOption: filterOption
|
||||
}),
|
||||
fieldName: 'initiatorName',
|
||||
},
|
||||
{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
showSearch:true,
|
||||
filterOption: filterOption
|
||||
}),
|
||||
fieldName: 'handler',
|
||||
}])
|
||||
}
|
||||
|
||||
async function queryWorkOrdersType() {
|
||||
let params = {
|
||||
pageSize: 1000,
|
||||
pageNum: 1
|
||||
}
|
||||
const res = await workOrdersTypeList(params)
|
||||
const options = res.rows.map((item) => ({
|
||||
label: item.orderTypeName,
|
||||
value: item.id,
|
||||
}));
|
||||
formApi.updateSchema([{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
filterOption: filterOption,
|
||||
showSearch:true,
|
||||
}),
|
||||
fieldName: 'type',
|
||||
}])
|
||||
}
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm/>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
@@ -8,12 +8,10 @@ import {
|
||||
type VxeGridProps
|
||||
} from '#/adapter/vxe-table';
|
||||
import {
|
||||
workOrdersExport,
|
||||
workOrdersList,
|
||||
workOrdersRemove,
|
||||
} from '#/api/property/businessManagement/workOrders';
|
||||
import type {WorkOrdersForm} from '#/api/property/businessManagement/workOrders/model';
|
||||
import {commonDownloadExcel} from '#/utils/file/download';
|
||||
import workOrdersModal from './workOrders-modal.vue';
|
||||
import workOrdersDetail from './work-orders-detail.vue';
|
||||
import ordersModal from './orders-modal.vue';
|
||||
@@ -130,12 +128,6 @@ function handleMultiDelete() {
|
||||
});
|
||||
}
|
||||
|
||||
function handleDownloadExcel() {
|
||||
commonDownloadExcel(workOrdersExport, '工单处理数据', tableApi.formApi.form.values, {
|
||||
fieldMappingTime: formOptions.fieldMappingTime,
|
||||
});
|
||||
}
|
||||
|
||||
async function queryOrderType() {
|
||||
let params = {
|
||||
pageSize: 1000,
|
||||
@@ -170,12 +162,6 @@ onMounted(async () => {
|
||||
</template>
|
||||
<template #toolbar-tools>
|
||||
<Space>
|
||||
<a-button
|
||||
v-access:code="['property:workOrders:export']"
|
||||
@click="handleDownloadExcel"
|
||||
>
|
||||
{{ $t('pages.common.export') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
danger
|
||||
@@ -197,11 +183,13 @@ onMounted(async () => {
|
||||
<Space>
|
||||
<ghost-button
|
||||
@click.stop="handleOrders(row,'group')"
|
||||
v-if="row.status!=='1' && row.status!=='2'"
|
||||
>
|
||||
{{ '派单' }}
|
||||
</ghost-button>
|
||||
<ghost-button
|
||||
@click.stop="handleOrders(row,'rob')"
|
||||
v-if="row.status!=='1' && row.status!=='2'"
|
||||
>
|
||||
{{ '抢单' }}
|
||||
</ghost-button>
|
||||
|
||||
@@ -10,8 +10,10 @@ import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
|
||||
import {ordersModalSchema} from './data';
|
||||
import {personList} from "#/api/property/resident/person";
|
||||
import {renderDictValue} from "#/utils/render";
|
||||
import {ref} from "vue";
|
||||
import {onMounted, ref} from "vue";
|
||||
import { useUserStore } from '@vben/stores';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
@@ -81,7 +83,11 @@ async function handleConfirm() {
|
||||
return;
|
||||
}
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
record.value.handler = data.handler
|
||||
if(title.value === '派单'){
|
||||
record.value.handler = data.handler
|
||||
}else{
|
||||
record.value.handler = userStore.userInfo.userId
|
||||
}
|
||||
await workOrdersUpdate(record.value)
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
@@ -122,7 +128,6 @@ async function queryPersonData() {
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -42,7 +42,7 @@ async function handleOpenChange(open: boolean) {
|
||||
<template>
|
||||
<BasicModal :footer="false" :fullscreen-button="false" title="工单详情信息" class="w-[70%]">
|
||||
<div v-if="orderDetail">
|
||||
<Descriptions size="small" :column="2" :labelStyle="{width:'100px'}">
|
||||
<Descriptions size="small" :column="2" :labelStyle="{width:'120px'}">
|
||||
<DescriptionsItem label="订单号">
|
||||
{{ orderDetail.orderNo }}
|
||||
</DescriptionsItem>
|
||||
@@ -55,7 +55,7 @@ async function handleOpenChange(open: boolean) {
|
||||
<DescriptionsItem label="发起人">
|
||||
{{ orderDetail.initiatorPeople }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="派单时间">
|
||||
<DescriptionsItem label="派单/抢单时间">
|
||||
{{ orderDetail.dispatchTime }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="处理人">
|
||||
|
||||
@@ -67,7 +67,7 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await workOrdersInfo(id);
|
||||
record.isTimeOut=record.isTimeOut.toString()
|
||||
record.isTimeOut = record.isTimeOut?.toString()
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
await markInitialized();
|
||||
|
||||
@@ -58,7 +58,7 @@ const schema =[
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
options: getDictOptions('wy_cbfylx'),
|
||||
onChange: async (value:any) => {
|
||||
onChange: async (value:any) => {
|
||||
// 请求并更新下拉
|
||||
if (!value) {
|
||||
costItemsOptions.value = [];
|
||||
@@ -205,7 +205,7 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
if (isUpdate.value && id) {
|
||||
const record = await costMeterWaterInfo(id);
|
||||
console.log(1,record);
|
||||
|
||||
|
||||
const costItemsRes = await costItemSettingList({ pageSize: 1000000000, pageNum: 1, costType: record.costType });
|
||||
costItemsOptions.value = (costItemsRes?.rows || []).map(item => ({
|
||||
label: item.chargeItem,
|
||||
@@ -234,7 +234,7 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
]);
|
||||
await formApi.setValues(record);
|
||||
console.log(2,await formApi.getValues());
|
||||
|
||||
|
||||
}
|
||||
await markInitialized();
|
||||
|
||||
@@ -252,7 +252,7 @@ async function handleConfirm() {
|
||||
// getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
console.log(data);
|
||||
|
||||
|
||||
await (isUpdate.value ? costMeterWaterUpdate(data) : costMeterWaterAdd(data));
|
||||
resetInitialized();
|
||||
//必须要手动清空，不然ref会保留值
|
||||
@@ -378,4 +378,3 @@ async function setupCommunitySelect() {
|
||||
-webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -0,0 +1,170 @@
|
||||
<script setup lang="ts">
|
||||
import { EditOutlined } from '@ant-design/icons-vue';
|
||||
import {EchartsUI, type EchartsUIType, useEcharts} from "@vben/plugins/echarts";
|
||||
import {onMounted, ref} from "vue";
|
||||
import {statisticsByTime} from "#/api/property/reportStatistics";
|
||||
|
||||
const orderLineRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(orderLineRef);
|
||||
const xAxisData = ref<any[]>([]);
|
||||
const seriesData = ref<any[]>([]);
|
||||
async function fetchOrderTrend() {
|
||||
const res = await statisticsByTime({ timeUnit: 1 });
|
||||
xAxisData.value = res?.time ?? [];
|
||||
seriesData.value = res?.counts ?? [];
|
||||
renderEcharts({
|
||||
title: { text: '客户续租率趋势' },
|
||||
tooltip: { trigger: 'axis' },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData.value,
|
||||
boundaryGap: false,
|
||||
},
|
||||
yAxis: { type: 'value', axisLabel: { formatter: (value) => `${value * 100}%` } },
|
||||
series: [
|
||||
{
|
||||
name: '订单趋势',
|
||||
type: 'line',
|
||||
data: seriesData.value || [],
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
onMounted(async () => {
|
||||
await fetchOrderTrend();
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="panel">
|
||||
|
||||
<div class="bulletin-board">
|
||||
<div class="bulletin-board-title">工单看板</div>
|
||||
<div class="bulletin-board-content">
|
||||
<div>
|
||||
<div>
|
||||
<div>工单总数：</div>
|
||||
<div>56</div>
|
||||
<div style="color: #1890FF">点击前往工单池</div>
|
||||
</div>
|
||||
<div class="icon-edit"><EditOutlined /></div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div>待派工单数：</div>
|
||||
<div>56</div>
|
||||
<div style="color: #1890FF">点击前往工单待办</div>
|
||||
</div>
|
||||
<div class="icon-edit"><EditOutlined /></div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div>未办结超时工单：</div>
|
||||
<div>56</div>
|
||||
<div>处理中的工单数：<span style="color: green">5</span></div>
|
||||
</div>
|
||||
<div class="icon-edit"><EditOutlined /></div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div>当月工单超时率：</div>
|
||||
<div>56</div>
|
||||
<div>超时工单数：<span style="color: red">0</span></div>
|
||||
</div>
|
||||
<div class="icon-edit"><EditOutlined /></div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div>当月满意度：</div>
|
||||
<div>100%</div>
|
||||
<div>满意度：5</div>
|
||||
</div>
|
||||
<div class="icon-edit"><EditOutlined /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div class="chart-one">
|
||||
<div>
|
||||
<EchartsUI
|
||||
ref="orderLineRef"
|
||||
height="350px"
|
||||
width="100%"
|
||||
style="background: #fff; border-radius: 8px"
|
||||
/>
|
||||
</div>
|
||||
<div style="background-color: red"></div>
|
||||
</div>
|
||||
<div class="chart-two">
|
||||
<div>
|
||||
<EchartsUI
|
||||
ref="orderLineRef"
|
||||
height="350px"
|
||||
width="100%"
|
||||
style="background: #fff; border-radius: 8px"
|
||||
/>
|
||||
</div>
|
||||
<div style="background-color: red"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.panel{
|
||||
width: 100%;
|
||||
padding: 40px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.bulletin-board{
|
||||
|
||||
.bulletin-board-title{
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.bulletin-board-content{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 40px;
|
||||
|
||||
> div{
|
||||
height: auto;
|
||||
background-color: #FFFFFF;
|
||||
padding: 18px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
> div:first-child {
|
||||
line-height: 32px;
|
||||
|
||||
div:nth-child(2) {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.icon-edit{
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart{
|
||||
|
||||
.chart-one{
|
||||
margin-top:40px;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
.chart-two{
|
||||
margin-top:40px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
import type {ContingenPlanVO} from '#/api/property/customerService/contingenPlan/model';
|
||||
import {shallowRef} from 'vue';
|
||||
import {useVbenModal} from '@vben/common-ui';
|
||||
import {Descriptions, DescriptionsItem} from 'ant-design-vue';
|
||||
import {contingenPlanInfo} from '#/api/property/customerService/contingenPlan';
|
||||
import {renderDict} from "#/utils/render";
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
onOpenChange: handleOpenChange,
|
||||
onClosed() {
|
||||
contingenPlanIDetail.value = null;
|
||||
},
|
||||
});
|
||||
|
||||
const contingenPlanIDetail = shallowRef<null | ContingenPlanVO>(null);
|
||||
|
||||
async function handleOpenChange(open: boolean) {
|
||||
if (!open) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
const {id} = modalApi.getData() as { id: number | string };
|
||||
const response = await contingenPlanInfo(id);
|
||||
contingenPlanIDetail.value = response;
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :footer="false" :fullscreen-button="false" title="详情" class="w-[70%]">
|
||||
<Descriptions v-if="contingenPlanIDetail" size="small" :column="2" bordered :labelStyle="{width:'100px'}">
|
||||
<DescriptionsItem label="预案名称">
|
||||
{{ contingenPlanIDetail.contingenPlanName }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="预案类型" v-if="contingenPlanIDetail.contingenPlanType!=null">
|
||||
<component
|
||||
:is="renderDict(contingenPlanIDetail.contingenPlanType,'type_contingency_plan')"
|
||||
/>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="发起人">
|
||||
{{ contingenPlanIDetail.initiat }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="演练状态" v-if="contingenPlanIDetail.status!=null">
|
||||
<component
|
||||
:is="renderDict(contingenPlanIDetail.status,'pro_exercise_status')"
|
||||
/>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="责任人">
|
||||
{{ contingenPlanIDetail.dutyPersion}}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="完成时间">
|
||||
{{ contingenPlanIDetail.compleTimes }}
|
||||
</DescriptionsItem>
|
||||
</Descriptions>
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -0,0 +1,133 @@
|
||||
<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 { contingenPlanAdd, contingenPlanInfo, contingenPlanUpdate } from '#/api/property/customerService/contingenPlan';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
import {personList} from "#/api/property/resident/person";
|
||||
import { modalSchema } from './data';
|
||||
import {renderDictValue} from "#/utils/render";
|
||||
|
||||
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-[60%]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
onClosed: handleClosed,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
await queryPersonData()
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await contingenPlanInfo(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 ? contingenPlanUpdate(data) : contingenPlanAdd(data));
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function queryPersonData() {
|
||||
let params = {
|
||||
pageSize: 1000,
|
||||
pageNum: 1,
|
||||
}
|
||||
const res = await personList(params);
|
||||
const options = res.rows.map((user) => ({
|
||||
label: user.userName + '-' + renderDictValue(user.gender, 'sys_user_sex') + '-' + user.phone,
|
||||
value: user.id,
|
||||
}));
|
||||
formApi.updateSchema([
|
||||
{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
showSearch:true,
|
||||
filterOption: filterOption
|
||||
}),
|
||||
fieldName: 'initiat',
|
||||
},
|
||||
{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
showSearch:true,
|
||||
filterOption: filterOption
|
||||
}),
|
||||
fieldName: 'dutyPersion',
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
||||
async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm />
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,158 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import { getDictOptions } from '#/utils/dict';
|
||||
import { renderDict } from '#/utils/render';
|
||||
import {h} from "vue";
|
||||
import {Rate} from "ant-design-vue";
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('type_contingency_plan'),
|
||||
},
|
||||
fieldName: 'contingenPlanType',
|
||||
label: '预案类型',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'dutyPersion',
|
||||
label: '责任人',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('pro_exercise_status'),
|
||||
},
|
||||
fieldName: 'status',
|
||||
label: '演练状态',
|
||||
},
|
||||
];
|
||||
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '序号',
|
||||
field: 'id',
|
||||
slots: {
|
||||
default: ({rowIndex}) => {
|
||||
return (rowIndex + 1).toString();
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '预案名称',
|
||||
field: 'contingenPlanName',
|
||||
},
|
||||
{
|
||||
title: '预案类型',
|
||||
field: 'contingenPlanType',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return renderDict(row.contingenPlanType, 'type_contingency_plan');
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '风险等级',
|
||||
field: 'grade',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return h(Rate, {
|
||||
value: row.grade || 0,
|
||||
disabled: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
minWidth: '150'
|
||||
},
|
||||
{
|
||||
title: '发起人',
|
||||
field: 'initiat',
|
||||
},
|
||||
{
|
||||
title: '演练状态',
|
||||
field: 'status',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return renderDict(row.status, 'pro_exercise_status');
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '责任人',
|
||||
field: 'dutyPersion',
|
||||
},
|
||||
{
|
||||
title: '完成时间',
|
||||
field: 'compleTimes',
|
||||
},
|
||||
{
|
||||
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: 'contingenPlanName',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '预案类型',
|
||||
fieldName: 'contingenPlanType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('type_contingency_plan'),
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
label: '发起人',
|
||||
fieldName: 'initiat',
|
||||
component: 'ApiSelect',
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
label: '责任人',
|
||||
fieldName: 'dutyPersion',
|
||||
component: 'ApiSelect',
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
label: '预案内容',
|
||||
fieldName: 'contingenPlanContent',
|
||||
component: 'RichTextarea',
|
||||
componentProps: {
|
||||
// disabled: false, // 是否只读
|
||||
// height: 400 // 高度 默认400
|
||||
},
|
||||
formItemClass: 'col-span-2'
|
||||
},
|
||||
{
|
||||
label: '风险等级',
|
||||
fieldName: 'grade',
|
||||
component: 'Rate',
|
||||
componentProps: {
|
||||
allowHalf: false,
|
||||
count: 5,
|
||||
tooltips: ['1星', '2星', '3星', '4星', '5星'],
|
||||
defaultValue: 0
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,178 @@
|
||||
<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 {
|
||||
contingenPlanExport,
|
||||
contingenPlanList,
|
||||
contingenPlanRemove,
|
||||
} from '#/api/property/customerService/contingenPlan';
|
||||
import type { ContingenPlanForm } from '#/api/property/customerService/contingenPlan/model';
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
|
||||
import contingenPlanModal from './contingenPlan-modal.vue';
|
||||
import contingenPlanDetail from './contingenPlan-detail.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,
|
||||
},
|
||||
columns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues = {}) => {
|
||||
return await contingenPlanList({
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'system-contingenPlan-index'
|
||||
};
|
||||
|
||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
});
|
||||
|
||||
const [ContingenPlanModal, modalApi] = useVbenModal({
|
||||
connectedComponent: contingenPlanModal,
|
||||
});
|
||||
|
||||
const [contingenPlanDetailModal, contingenPlanDetailApi] = useVbenModal({
|
||||
connectedComponent: contingenPlanDetail,
|
||||
});
|
||||
|
||||
async function handleInfo(row: Required<ContingenPlanForm>) {
|
||||
contingenPlanDetailApi.setData({ id: row.id });
|
||||
contingenPlanDetailApi.open();
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleEdit(row: Required<ContingenPlanForm>) {
|
||||
modalApi.setData({ id: row.id });
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleDelete(row: Required<ContingenPlanForm>) {
|
||||
await contingenPlanRemove(row.id);
|
||||
await tableApi.query();
|
||||
}
|
||||
|
||||
function handleMultiDelete() {
|
||||
const rows = tableApi.grid.getCheckboxRecords();
|
||||
const ids = rows.map((row: Required<ContingenPlanForm>) => row.id);
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
okType: 'danger',
|
||||
content: `确认删除选中的${ids.length}条记录吗？`,
|
||||
onOk: async () => {
|
||||
await contingenPlanRemove(ids);
|
||||
await tableApi.query();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleDownloadExcel() {
|
||||
commonDownloadExcel(contingenPlanExport, '应急预案管理数据', 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:contingenPlan:export']"
|
||||
@click="handleDownloadExcel"
|
||||
>
|
||||
{{ $t('pages.common.export') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
danger
|
||||
type="primary"
|
||||
v-access:code="['system:contingenPlan:remove']"
|
||||
@click="handleMultiDelete">
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
v-access:code="['system:contingenPlan:add']"
|
||||
@click="handleAdd"
|
||||
>
|
||||
{{ $t('pages.common.add') }}
|
||||
</a-button>
|
||||
</Space>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
@click.stop="handleInfo(row)"
|
||||
>
|
||||
{{ $t('pages.common.info') }}
|
||||
</ghost-button>
|
||||
<ghost-button
|
||||
v-access:code="['system:contingenPlan: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:contingenPlan:remove']"
|
||||
@click.stop=""
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</ghost-button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<ContingenPlanModal @reload="tableApi.query()" />
|
||||
<contingenPlanDetailModal/>
|
||||
</Page>
|
||||
</template>
|
||||
@@ -147,7 +147,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: '入驻位置',
|
||||
|
||||
Reference in New Issue
Block a user