by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

视频预警

Browse Source
This commit is contained in:
fyy
2025-08-12 13:51:35 +08:00
parent 0a77934d8b
commit 1d1afb0162
22 changed files with 2260 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
apps/web-antd/src/layouts/basic.vue
View File

@@ -11,7 +11,6 @@ import {
GiteeIcon,
GitHubOutlined,
UserOutlined,
} from '@vben/icons';
import {
BasicLayout,
@@ -58,34 +57,34 @@ const menus = computed(() => {
icon: UserOutlined,
text: $t('ui.widgets.profile'),
},
// {
// handler: () => {
// openWindow('https://gitee.com/dapppp/ruoyi-plus-vben5', {
// target: '_blank',
// });
// },
// icon: () => h(GiteeIcon, { class: 'text-red-800' }),
// text: 'Gitee项目地址',
// },
// {
// handler: () => {
// openWindow(VBEN_GITHUB_URL, {
// target: '_blank',
// });
// },
// icon: GitHubOutlined,
// text: 'Vben官方地址',
// },
// {
// handler: () => {
// openWindow(`${VBEN_GITHUB_URL}/issues`, {
// target: '_blank',
// });
// },
// icon: CircleHelp,
// text: $t('ui.widgets.qa'),
// },
{
handler: () => {
openWindow('https://gitee.com/dapppp/ruoyi-plus-vben5', {
target: '_blank',
});
},
icon: () => h(GiteeIcon, { class: 'text-red-800' }),
text: 'Gitee项目地址',
},
{
handler: () => {
openWindow(VBEN_GITHUB_URL, {
target: '_blank',
});
},
icon: GitHubOutlined,
text: 'Vben官方地址',
},
{
handler: () => {
openWindow(`${VBEN_GITHUB_URL}/issues`, {
target: '_blank',
});
},
icon: CircleHelp,
text: $t('ui.widgets.qa'),
},
{
handler: () => {
router.push('/navigation');
},

52
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { reactive, onMounted, computed } from 'vue';
import { useVbenModal } from '@vben/common-ui';
@@ -60,7 +60,7 @@ const rules = {
const groupOptions = ref<any[]>([]);
const groupMap = ref<Record<string, any>>({}); // 用于快速查找
let tableData = reactive<
{ dept: { unitId: string | number; unitName: string }; users: PersonVO[] }[]
{ dept: { deptId: string | number; deptName: string }; users: PersonVO[] }[]
>([]); //存放考勤组人员列表数据
const columns = [
{
@@ -75,20 +75,41 @@ const columns = [
dataIndex: ['dept', 'unitName'],
key: 'dept',
width: 120,
customRender: ({ record }: { record: any }) => record.dept.unitName,
customRender: ({
record,
}: {
record: {
dept: { deptId: string | number; deptName: string };
users: PersonVO[];
};
}) => record.dept.deptName,
},
{
title: '已选人数',
dataIndex: 'users',
key: 'userCount',
width: 100,
customRender: ({ record }: { record: any }) => record.users.length,
customRender: ({
record,
}: {
record: {
dept: { deptId: string | number; deptName: string };
users: PersonVO[];
};
}) => record.users.length,
},
{
title: '人员',
dataIndex: 'users',
key: 'users',
customRender: ({ record }: { record: any }) =>
customRender: ({
record,
}: {
record: {
dept: { deptId: string | number; deptName: string };
users: PersonVO[];
};
}) =>
record.users.map((user: any) =>
h(
Tag,
@@ -129,7 +150,12 @@ function handleRemoveRow(index: number) {
tableData.splice(index, 1);
}
function handleTableData(newTableData: any) {
function handleTableData(
newTableData: {
dept: { deptId: string | number; deptName: string };
users: PersonVO[];
}[],
) {
// 如果现有数据为空，直接替换
if (tableData.length === 0) {
tableData.splice(0, 0, ...newTableData);
@@ -145,7 +171,7 @@ function handleTableData(newTableData: any) {
for (const newItem of newTableData) {
// 查找是否已存在相同部门
const existingDeptIndex = tableData.findIndex(
(item) => item.dept.unitId === newItem.dept.unitId,
(item) => item.dept.deptId === newItem.dept.deptId,
);
if (existingDeptIndex !== -1) {
@@ -154,7 +180,7 @@ function handleTableData(newTableData: any) {
for (const newUser of newItem.users) {
// 检查该用户是否已存在
const userExists = existingDept?.users.some(
(existingUser) => existingUser.id === newUser.id,
(existingUser) => existingUser.userId === newUser.userId,
);
if (!userExists) {
// 用户不存在，添加到现有部门
@@ -187,7 +213,9 @@ const [BasicModal, modalApi] = useVbenModal({
modalApi.modalLoading(false);
},
});
const totalSelected: number = 0;
const totalSelected = computed(() =>
tableData.reduce((sum, row) => sum + (row.users?.length || 0), 0),
);
function handleAdd() {
unitPersonmodalApi.setData({});
@@ -255,9 +283,9 @@ async function handleConfirm() {
for (const item of tableData) {
for (const user of item.users) {
data.userGroupList.push({
deptId: item.dept.unitId, //部门ID
deptName: item.dept.unitName, //部门名称
employeeId: user.id, //员工ID
deptId: item.dept.deptId, //部门ID
deptName: item.dept.deptName, //部门名称
employeeId: user.userId, //员工ID
employeeName: user.userName, //员工姓名
});
}

34
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts
View File

@@ -106,7 +106,10 @@ export const columns: VxeGridProps['columns'] = [
field: 'attendanceGroup.attendanceType',
slots: {
default: ({ row }) => {
return renderDict(String(row.attendanceGroup.attendanceType),'wy_kqlx')
return renderDict(
String(row.attendanceGroup.attendanceType),
'wy_kqlx',
);
},
},
width: 'auto',
@@ -118,9 +121,12 @@ export const columns: VxeGridProps['columns'] = [
slots: {
default: ({ row }) => {
if (row.attendanceShift.startTime && row.attendanceShift.endTime) {
if(row.attendanceShift.restEndTime&&row.attendanceShift.restStartTime){
if (
row.attendanceShift.restEndTime &&
row.attendanceShift.restStartTime
) {
return `${row.attendanceShift.startTime}～${row.attendanceShift.endTime} ${row.shift.restStartTime}～${row.shift.restEndTime}`;
}else{
} else {
return `${row.attendanceShift.startTime}～${row.attendanceShift.endTime}`;
}
}
@@ -193,12 +199,12 @@ export const unitColumns: VxeGridProps['columns'] = [
},
{
title: '所属单位',
field: 'unitName',
field: 'deptName',
width: 'auto',
},
{
title: '电话',
field: 'phone',
field: 'phonenumber',
minWidth: 120,
},
];
@@ -266,7 +272,7 @@ export const modalSchema: FormSchemaGetter = () => [
];
//排班日期详情
export const workforceDayDetailColumns:VxeGridProps['columns'] =[
export const workforceDayDetailColumns: VxeGridProps['columns'] = [
{
title: '序号',
field: 'id',
@@ -287,16 +293,18 @@ export const workforceDayDetailColumns:VxeGridProps['columns'] =[
field: 'attendanceGroup.attendanceType',
slots: {
default: ({ row }) => {
return renderDict(String(row.attendanceGroup.attendanceType),'wy_kqlx')
return renderDict(
String(row.attendanceGroup.attendanceType),
'wy_kqlx',
);
},
},
width: 'auto',
},
{
title: '班次名称',
field: 'shift.name',
width:'auto' ,
width: 'auto',
},
{
title: '考勤时间',
@@ -305,9 +313,9 @@ export const workforceDayDetailColumns:VxeGridProps['columns'] =[
slots: {
default: ({ row }) => {
if (row.shift.startTime && row.shift.endTime) {
if(row.shift.restEndTime&&row.shift.restStartTime){
if (row.shift.restEndTime && row.shift.restStartTime) {
return `${row.shift.startTime}～${row.shift.endTime} ${row.shift.restStartTime}～${row.shift.restEndTime}`;
}else{
} else {
return `${row.shift.startTime}～${row.shift.endTime}`;
}
}
@@ -318,7 +326,7 @@ export const workforceDayDetailColumns:VxeGridProps['columns'] =[
{
title: '班组人数',
field: 'userCount',
width:100,
width: 100,
slots: { default: 'userCount' },
},
{
@@ -328,4 +336,4 @@ export const workforceDayDetailColumns:VxeGridProps['columns'] =[
fixed: 'right',
slots: { default: 'userGroupList' },
},
]
];

122
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/dept-tree.vue Normal file
View File

@@ -0,0 +1,122 @@
<script setup lang="ts">
import type { PropType } from 'vue';
import type { DeptTree } from '#/api/system/user/model';
import { onMounted, ref } from 'vue';
import { SyncOutlined } from '@ant-design/icons-vue';
import { Empty, InputSearch, Skeleton, Tree } from 'ant-design-vue';
import { getDeptTree } from '#/api/system/user';
defineOptions({ inheritAttrs: false });
withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
const emit = defineEmits<{
/**
* 点击刷新按钮的事件
*/
reload: [];
/**
* 点击节点的事件
*/
select: [];
}>();
const selectDeptId = defineModel('selectDeptId', {
required: true,
type: Array as PropType<string[]>,
});
const searchValue = defineModel('searchValue', {
type: String,
default: '',
});
/** 部门数据源 */
type DeptTreeArray = DeptTree[];
const deptTreeArray = ref<DeptTreeArray>([]);
/** 骨架屏加载 */
const showTreeSkeleton = ref<boolean>(true);
async function loadTree() {
showTreeSkeleton.value = true;
searchValue.value = '';
selectDeptId.value = [];
const ret = await getDeptTree();
deptTreeArray.value = ret;
showTreeSkeleton.value = false;
}
async function handleReload() {
await loadTree();
emit('reload');
}
onMounted(loadTree);
</script>
<template>
<div :class="$attrs.class">
<Skeleton
:loading="showTreeSkeleton"
:paragraph="{ rows: 8 }"
active
class="p-[8px]"
>
<div
class="bg-background flex h-full flex-col overflow-y-auto rounded-lg"
>
<!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
<div
v-if="showSearch"
class="bg-background z-100 sticky left-0 top-0 p-[8px]"
>
<InputSearch
v-model:value="searchValue"
:placeholder="$t('pages.common.search')"
size="small"
>
<template #enterButton>
<a-button @click="handleReload">
<SyncOutlined class="text-primary" />
</a-button>
</template>
</InputSearch>
</div>
<div class="h-full overflow-x-hidden px-[8px]">
<Tree
v-bind="$attrs"
v-if="deptTreeArray.length > 0"
v-model:selected-keys="selectDeptId"
:class="$attrs.class"
:field-names="{ title: 'label', key: 'id' }"
:show-line="{ showLeafIcon: false }"
:tree-data="deptTreeArray"
:virtual="false"
default-expand-all
@select="$emit('select')"
>
<template #title="{ label }">
<span v-if="label.indexOf(searchValue) > -1">
{{ label.substring(0, label.indexOf(searchValue)) }}
<span style="color: #f50">{{ searchValue }}</span>
{{
label.substring(
label.indexOf(searchValue) + searchValue.length,
)
}}
</span>
<span v-else>{{ label }}</span>
</template>
</Tree>
<!-- 仅本人数据权限 可以考虑直接不显示 -->
<div v-else class="mt-5">
<Empty
:image="Empty.PRESENTED_IMAGE_SIMPLE"
description="无部门数据"
/>
</div>
</div>
</div>
</Skeleton>
</div>
</template>

3
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/scheduleView.vue
View File

@@ -114,6 +114,7 @@ async function handleDelete(row: Required<ArrangementForm>) {
border: '1px solid #d9d9d9',
borderRadius: '4px',
}"
class="calendar"
>
<Calendar
v-model:value="value"
@@ -158,7 +159,7 @@ async function handleDelete(row: Required<ArrangementForm>) {
</div>
</template>
<style scoped>
:deep(.ant-radio-group) {
.calendar :deep(.ant-radio-group) {
display: none;
}
</style>

109
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/type.d.ts vendored
View File

@@ -1,67 +1,52 @@
//列表数据，用于展示人员列表
export interface PersonVO {
/**
* 主键id
*/
id: string | number;
/**
* 用户id
*/
userId: string | number;
/**
* 用户名称
*/
userId: string;
tenantId: string;
deptId: number;
userName: string;
/**
* 联系电话
*/
phone: string;
/**
* 性别
*/
gender: number;
/**
* 人脸图片
*/
img: string;
/**
* 所属单位id
*/
unitId: string | number;
/**
* 所属单位名称
*/
unitName: string;
/**
* 入驻位置
*/
locathon: string;
/**
* 入驻时间
*/
time: string;
/**
* 车牌号码
*/
carNumber: string;
/**
* 状态
*/
state: number | string;
/**
* 备注
*/
nickName: string;
userType: string;
email: string;
phonenumber: string;
sex: string;
avatar?: string;
status: string;
loginIp: string;
loginDate: string;
remark: string;
createTime: string;
dept: Dept;
roles: Role[];
roleIds?: string[];
postIds?: number[];
roleId: string;
deptName: string;
}
export interface Dept {
deptId: number;
parentId: number;
parentName?: string;
ancestors: string;
deptName: string;
orderNum: number;
leader: string;
phone?: string;
email?: string;
status: string;
createTime?: string;
}
export interface Role {
roleId: string;
roleName: string;
roleKey: string;
roleSort: number;
dataScope: string;
menuCheckStrictly?: boolean;
deptCheckStrictly?: boolean;
status: string;
remark: string;
createTime?: string;
flag: boolean;
superAdmin: boolean;
}

204
apps/web-antd/src/views/property/attendanceManagement/workforceManagement/unit-person-modal.vue
View File

@@ -1,35 +1,22 @@
<script setup lang="ts">
import { computed, ref, reactive, onMounted, watch } from 'vue';
import { SyncOutlined } from '@ant-design/icons-vue';
import {
Tree,
InputSearch,
Skeleton,
Empty,
Button,
Tag,
} from 'ant-design-vue';
import { computed, ref, reactive, watch } from 'vue';
import { Tag } from 'ant-design-vue';
import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import {
arrangementAdd,
arrangementInfo,
arrangementUpdate,
} from '#/api/property/attendanceManagement/arrangement';
import { arrangementInfo } from '#/api/property/attendanceManagement/arrangement';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { useVbenVxeGrid, type VxeGridProps } 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';
import { personList } from '#/api/property/resident/person';
import { useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { userList } from '#/api/system/user';
import type { PersonVO } from './type';
import DeptTree from './dept-tree.vue';
const emit = defineEmits<{
reload: [
tableData: {
dept: { unitId: string | number; unitName: string };
dept: { deptId: string | number; deptName: string };
users: PersonVO[];
}[],
];
@@ -39,27 +26,8 @@ const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const showSearch = ref(true);
const searchValue = ref('');
const selectedDeptIds = ref<string[]>([]);
const showTreeSkeleton = ref(false);
//单位树
const deptTree = reactive<
{
id: string;
label: string;
children: {
id: string;
label: string;
}[];
}[]
>([
{
id: '',
label: '全部单位',
children: [],
},
]);
//勾选内容
let selectedUsers = ref<PersonVO[]>([]);
@@ -67,34 +35,10 @@ let selectedUsers = ref<PersonVO[]>([]);
let tableData = reactive<
{
dept: { unitId: string | number; unitName: string };
dept: { deptId: string | number; deptName: string };
users: PersonVO[];
}[]
>([]);
function handleReload() {
showTreeSkeleton.value = true;
setTimeout(() => {
showTreeSkeleton.value = false;
}, 800);
}
const filteredDeptTree = computed(() => {
if (!searchValue.value) return deptTree;
// 递归过滤树
function filter(tree: any[]): any[] {
return tree
.map((node) => {
if (node.label.includes(searchValue.value)) return node;
if (node.children) {
const children = filter(node.children);
if (children.length) return { ...node, children };
}
return null;
})
.filter(Boolean);
}
return filter(deptTree);
});
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
@@ -159,6 +103,15 @@ const formOptions: VbenFormProps = {
// ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
// ],
// ],
handleReset: async () => {
selectDeptId.value = [];
const { formApi, reload } = tableApi;
await formApi.resetForm();
const formValues = formApi.form.values;
formApi.setLatestSubmissionValues(formValues);
await reload(formValues);
},
};
const gridOptions: VxeGridProps = {
checkboxConfig: {
@@ -178,11 +131,17 @@ const gridOptions: VxeGridProps = {
pagerConfig: {},
proxyConfig: {
ajax: {
query: async ({ page }) => {
return await personList({
query: async ({ page }, formValues = {}) => {
// 部门树选择处理
if (selectDeptId.value.length === 1) {
formValues.deptId = selectDeptId.value[0];
} else {
Reflect.deleteProperty(formValues, 'deptId');
}
return await userList({
pageNum: page.currentPage,
pageSize: page.pageSize,
unitId: selectedDeptIds.value[0],
...formValues,
});
},
},
@@ -222,13 +181,13 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
async function handleConfirm() {
try {
for (const user of selectedUsers.value) {
if (tableData.find((item) => item.dept.unitId === user.unitId)) {
if (tableData.find((item) => item.dept.deptId === user.deptId)) {
tableData
.find((item) => item.dept.unitId === user.unitId)!
.find((item) => item.dept.deptId === user.deptId)!
.users.push(user);
} else {
tableData.push({
dept: { unitId: user.unitId, unitName: user.unitName },
dept: { deptId: user.deptId, deptName: user.deptName },
users: [user],
});
}
@@ -237,7 +196,7 @@ async function handleConfirm() {
resetInitialized();
emit('reload', tableData);
tableData = [];
selectedUsers.value =[];
selectedUsers.value = [];
modalApi.close();
} catch (error) {
console.error(error);
@@ -250,19 +209,6 @@ async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
async function getUnitList() {
deptTree[0]!.children = [];
const res = await resident_unitList();
if (deptTree[0] && Array.isArray(deptTree[0].children)) {
for (const item of res.rows) {
deptTree[0].children.push({
id: item.id as string,
label: item.name as string,
});
}
}
}
// 查询对应部门人员列表
async function fetchDeptUsers() {
tableApi.query();
@@ -272,85 +218,35 @@ watch(selectedDeptIds, (newVal) => {
fetchDeptUsers();
}
});
onMounted(() => {
getUnitList();
});
</script>
<template>
<BasicModal :title="title">
<div class="mb-2 flex">
<div>
<Skeleton
:loading="showTreeSkeleton"
:paragraph="{ rows: 8 }"
active
class="p-[8px]"
>
<Page :auto-content-height="true">
<div class="flex h-full gap-[8px]">
<DeptTree
v-model:select-dept-id="selectDeptId"
class="w-[200px]"
@reload="() => tableApi.reload()"
@select="() => tableApi.reload()"
/>
<div class="flex-1 overflow-hidden">
<div
class="bg-background z-100 sticky left-0 top-0 flex items-center p-[8px]"
class="mb-2 flex overflow-auto"
style="max-height: 80px; font-size: 14px"
>
<InputSearch
v-model:value="searchValue"
placeholder="搜索单位"
size="small"
style="flex: 1"
已选人员：
<span
v-for="user in selectedUsers"
:key="user.userId"
style="margin-right: 8px"
>
<template #enterButton>
<Button type="text" @click="getUnitList">
<SyncOutlined class="text-primary" />
</Button>
</template>
</InputSearch>
<Tag>{{ user.userName }}</Tag>
</span>
</div>
<div class="h-full overflow-x-hidden px-[8px]">
<Tree
v-if="filteredDeptTree.length > 0"
v-model:selectedKeys="selectedDeptIds"
:field-names="{ title: 'label', key: 'id' }"
:show-line="{ showLeafIcon: false }"
:tree-data="filteredDeptTree"
:virtual="false"
default-expand-all
>
<template #title="{ label }">
<span v-if="searchValue && label.indexOf(searchValue) > -1">
{{ label.substring(0, label.indexOf(searchValue)) }}
<span style="color: #f50">{{ searchValue }}</span>
{{
label.substring(
label.indexOf(searchValue) + searchValue.length,
)
}}
</span>
<span v-else>{{ label }}</span>
</template>
</Tree>
<div v-else class="mt-5">
<Empty
:image="Empty.PRESENTED_IMAGE_SIMPLE"
description="无单位数据"
/>
</div>
</div>
</Skeleton>
</div>
<div class="flex-1">
<div
class="mb-2 flex overflow-auto"
style="max-height: 80px; font-size: 14px"
>
已选人员：
<span
v-for="user in selectedUsers"
:key="user.id"
style="margin-right: 8px"
>
<Tag>{{ user.userName }}</Tag>
</span>
<BasicTable> </BasicTable>
</div>
<BasicTable> </BasicTable>
</div>
</div>
</Page>
</BasicModal>
</template>

1
apps/web-antd/src/views/videoSystem/videoWarning/videoAlertList/index.vue
View File

@@ -38,7 +38,6 @@
class="cursor-pointer overflow-hidden rounded-lg border border-gray-200 transition-shadow hover:shadow-md"
@click="handleViewDetail(item)"
>
<!-- 视频缩略图 -->
<div
class="relative h-48 bg-gray-100"
:style="{

265
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/data.ts Normal file
View File

@@ -0,0 +1,265 @@
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';
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'alarmType',
label: '视频预警类型',
},
{
component: 'Select',
componentProps: {
options: [
{ label: '特大', value: '特大' },
{ label: '重要', value: '重要' },
{ label: '一般', value: '一般' },
],
},
fieldName: 'level',
label: '级别',
},
{
component: 'Select',
componentProps: {
options: [
{ label: '待分配', value: '待分配' },
{ label: '处理中', value: '处理中' },
{ label: '已完成', value: '已完成' },
],
},
fieldName: 'processingStatus',
label: '处理状态',
},
];
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '预警编号',
field: 'alarmId',
width: 150,
},
{
title: '预警时间',
field: 'alarmTime',
width: 150,
},
{
title: '设备名称',
field: 'deviceName',
width: 150,
},
{
title: '级别',
field: 'level',
width: 100,
slots: {
default: ({ row }: any) => {
const levelColors: Record<string, string> = {
特大: 'red',
重要: 'orange',
一般: 'blue',
};
return h(
'span',
{
style: {
color: levelColors[row.level] || '#666',
fontWeight: 'bold',
},
},
row.level,
);
},
},
},
{
title: '预警类型',
field: 'alarmType',
width: 120,
},
{
title: '描述',
field: 'description',
minWidth: 200,
},
{
title: '所在位置',
field: 'location',
width: 150,
},
{
title: '处理状态',
field: 'processingStatus',
width: 100,
slots: {
default: ({ row }: any) => {
const statusColors: Record<string, string> = {
待分配: 'red',
处理中: 'orange',
已完成: 'green',
};
return h(
'span',
{
style: {
color: statusColors[row.processingStatus] || '#666',
fontWeight: 'bold',
},
},
row.processingStatus,
);
},
},
},
{
title: '处理情况',
field: 'processingDetails',
width: 150,
},
{
title: '预期处理时间',
field: 'expectedProcessingTime',
width: 150,
},
{
title: '处理时间',
field: 'processingTime',
width: 150,
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 380,
},
];
export const modalSchema: FormSchemaGetter = () => [
{
label: '主键',
fieldName: 'id',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '预警编号',
fieldName: 'alarmId',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '预警时间',
fieldName: 'alarmTime',
component: 'DatePicker',
componentProps: {
format: 'YYYY.MM.DD HH:mm',
valueFormat: 'YYYY.MM.DD HH:mm',
showTime: true,
},
rules: 'required',
disabled: true,
},
{
label: '预警类型',
fieldName: 'alarmType',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '描述',
fieldName: 'description',
component: 'Input',
formItemClass: 'col-span-2',
disabled: true,
},
{
label: '所在位置',
fieldName: 'location',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '设备名称',
fieldName: 'deviceName',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '处理情况',
fieldName: 'processingDetails',
component: 'Input',
componentProps: {
rows: 3,
},
formItemClass: 'col-span-2',
disabled: true,
},
{
label: '处理时间',
fieldName: 'processingTime',
component: 'DatePicker',
componentProps: {
format: 'YYYY.MM.DD HH:mm',
valueFormat: 'YYYY.MM.DD HH:mm',
showTime: true,
},
disabled: true,
},
{
label: '处理图片',
fieldName: 'imgUrl',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '级别',
fieldName: 'level',
component: 'Select',
componentProps: {
options: [
{ label: '特大', value: '特大' },
{ label: '重要', value: '重要' },
{ label: '一般', value: '一般' },
],
},
rules: 'selectRequired',
},
{
label: '处理状态',
fieldName: 'processingStatus',
component: 'Select',
componentProps: {
options: [
{ label: '待分配', value: '待分配' },
{ label: '处理中', value: '处理中' },
{ label: '已完成', value: '已完成' },
],
},
rules: 'selectRequired',
},
{
label: '预期处理时间',
fieldName: 'expectedProcessingTime',
component: 'DatePicker',
componentProps: {
format: 'YYYY.MM.DD HH:mm',
valueFormat: 'YYYY.MM.DD HH:mm',
showTime: true,
},
rules: 'required',
},
];

279
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/index.vue Normal file
View File

@@ -0,0 +1,279 @@
<script setup lang="ts">
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space, Tag } from 'ant-design-vue';
import { ref, watch } from 'vue';
import {
useVbenVxeGrid,
vxeCheckboxChecked,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { commonDownloadExcel } from '#/utils/file/download';
import { renderDict } from '#/utils/render';
import { columns, querySchema } from './data';
import warningModal from './warning-modal.vue';
import warningDetail from './warning-detail.vue';
import LevelSettingModal from './level-setting-modal.vue';
import imgPng from '../../../../assets/algorithmManagement/image.png';
// 假数据
const mockData = ref([
{
id: 1,
alarmId: 'JWD-3434234',
alarmTime: '2025.07.21 12:20',
level: '特大',
alarmType: '越界侦测',
description: '温度高于80度发生火宅',
location: '1栋3号电梯旁',
processingStatus: '已完成',
processingDetails: '',
processingTime: '',
},
{
id: 2,
alarmId: 'JWD-3434235',
alarmTime: '2025.07.21 11:15',
level: '重要',
alarmType: '异常行为',
description: '人员异常聚集',
location: '2栋大厅',
processingStatus: '已完成',
processingDetails: '已派人员前往处理',
processingTime: '2025.07.21 11:30',
imgUrl: imgPng,
},
{
id: 3,
alarmId: 'JWD-3434236',
alarmTime: '2025.07.21 10:45',
level: '一般',
alarmType: '设备故障',
description: '摄像头离线',
location: '3栋走廊',
processingStatus: '已完成',
processingDetails: '已修复设备',
processingTime: '2025.07.21 11:00',
imgUrl: imgPng,
},
{
id: 4,
alarmId: 'JWD-3434236',
alarmTime: '2025.07.21 10:45',
level: '一般',
alarmType: '设备故障',
description: '摄像头离线',
location: '3栋走廊',
processingStatus: '已完成',
processingDetails: '已修复设备',
processingTime: '2025.07.21 11:00',
imgUrl: imgPng,
},
]);
const formOptions: VbenFormProps = {
commonConfig: {
labelWidth: 100,
componentProps: {
allowClear: true,
},
},
schema: querySchema(),
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
};
const gridOptions: VxeGridProps = {
columns,
height: 'auto',
data: mockData.value,
pagerConfig: {
currentPage: 1,
pageSize: 10,
total: mockData.value.length,
},
rowConfig: {
keyField: 'id',
},
id: 'video-warning-processing-index',
};
const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions,
gridOptions,
});
// 监听数据变化，强制重新渲染表格
const tableKey = ref(0);
watch(
mockData,
() => {
tableKey.value++;
},
{ deep: true },
);
const [WarningModal, modalApi] = useVbenModal({
connectedComponent: warningModal,
});
const [WarningDetail, detailApi] = useVbenModal({
connectedComponent: warningDetail,
});
const [LevelSettingModalComp, levelModalApi] = useVbenModal({
connectedComponent: LevelSettingModal,
});
// 级别设置
function handleLevelSetting(row: any) {
levelModalApi.setData({ id: row.id, level: row.level, data: mockData.value });
levelModalApi.open();
}
// 查看详情
async function handleView(row: any) {
detailApi.setData({ id: row.id, data: mockData.value });
detailApi.open();
}
// 编辑
async function handleEdit(row: any) {
modalApi.setData({ id: row.id, data: mockData.value });
modalApi.open();
}
// // 分配处理
// function handleAssign(row: any) {
// Modal.confirm({
// title: '分配处理',
// content: `确定要分配预警 ${row.alarmId} 给处理人员吗？`,
// onOk() {
// // 模拟分配处理
// const index = mockData.value.findIndex((item: any) => item.id === row.id);
// if (index !== -1) {
// mockData.value[index].processingStatus = '处理中';
// mockData.value[index].processingDetails = '已分配给处理人员';
// mockData.value[index].processingTime = new Date().toLocaleString();
// tableApi.query();
// }
// },
// });
// }
// 删除
async function handleDelete(row: any) {
const index = mockData.value.findIndex((item: any) => item.id === row.id);
if (index !== -1) {
mockData.value.splice(index, 1);
await tableApi.query();
}
}
// 批量删除
function handleMultiDelete() {
const rows = tableApi.grid.getCheckboxRecords();
const ids = rows.map((row: any) => row.id);
Modal.confirm({
title: '提示',
okType: 'danger',
content: `确认删除选中的${ids.length}条记录吗？`,
onOk: async () => {
ids.forEach((id) => {
const index = mockData.value.findIndex((item: any) => item.id === id);
if (index !== -1) {
mockData.value.splice(index, 1);
}
});
await tableApi.query();
},
});
}
</script>
<template>
<Page :auto-content-height="true">
<BasicTable
:key="tableKey"
class="flex-1 overflow-hidden"
table-title="视频预警处理"
>
<template #toolbar-tools>
<Space>
<a-button
:disabled="!vxeCheckboxChecked(tableApi)"
danger
type="primary"
v-access:code="['video:warning:remove']"
@click="handleMultiDelete"
>
{{ $t('pages.common.delete') }}
</a-button>
</Space>
</template>
<template #action="{ row }">
<Space>
<!-- <ghost-button
v-access:code="['video:warning:level']"
@click.stop="handleLevelSetting(row)"
>
级别设置
</ghost-button> -->
<ghost-button
v-access:code="['video:warning:view']"
@click.stop="handleView(row)"
>
{{ $t('pages.common.info') }}
</ghost-button>
<ghost-button
v-access:code="['video:warning:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</ghost-button>
<!-- <ghost-button
v-access:code="['video:warning:assign']"
@click.stop="handleAssign(row)"
:disabled="row.processingStatus === '已完成'"
>
分配处理
</ghost-button> -->
<Popconfirm
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['video:warning:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<WarningModal @reload="tableApi.query()" />
<WarningDetail />
<LevelSettingModalComp @reload="tableKey++" />
</Page>
</template>
<style scoped lang="scss">
.ant-table-wrapper {
.ant-table-thead > tr > th {
background-color: #fafafa;
font-weight: 600;
}
}
.ant-pagination {
.ant-pagination-item-active {
background-color: #1890ff;
border-color: #1890ff;
}
}
</style>

45
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/level-setting-modal.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<BasicModal>
<RadioGroup v-model:value="selectedLevel">
<Radio value="特大">特大</Radio>
<Radio value="重要">重要</Radio>
<Radio value="一般">一般</Radio>
</RadioGroup>
</BasicModal>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { RadioGroup, Radio } from 'ant-design-vue';
const emit = defineEmits<{ reload: [] }>();
const selectedLevel = ref('一般');
const [BasicModal, modalApi] = useVbenModal({
class: 'w-[360px]',
title: '设置级别',
onOpenChange: async (isOpen) => {
if (!isOpen) return null;
const { level } = modalApi.getData() as { level?: string };
selectedLevel.value = level || '一般';
},
onConfirm: handleConfirm,
});
function handleConfirm() {
const { id, data } = modalApi.getData() as {
id: number | string;
data: any[];
};
if (id != null && data) {
const idx = data.findIndex((item: any) => item.id === id);
if (idx !== -1) {
data[idx].level = selectedLevel.value;
}
}
emit('reload');
modalApi.close();
}
</script>

147
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/warning-detail.vue Normal file
View File

@@ -0,0 +1,147 @@
<script setup lang="ts">
import { shallowRef } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import {
Descriptions,
DescriptionsItem,
Tag,
Timeline,
TimelineItem,
} from 'ant-design-vue';
const [BasicModal, modalApi] = useVbenModal({
onOpenChange: handleOpenChange,
onClosed() {
warningDetail.value = null;
},
});
const warningDetail = shallowRef<any>(null);
async function handleOpenChange(open: boolean) {
if (!open) {
return null;
}
modalApi.modalLoading(true);
const { id, data } = modalApi.getData() as {
id: number | string;
data: any[];
};
// 从传递的数据中查找对应的记录
const record = data.find((item: any) => item.id === id);
if (record) {
warningDetail.value = record;
}
modalApi.modalLoading(false);
}
</script>
<template>
<BasicModal
:footer="false"
:fullscreen-button="false"
title="预警详情"
class="w-[70%]"
>
<Descriptions
v-if="warningDetail"
size="small"
:column="2"
bordered
:labelStyle="{ width: '120px' }"
style="margin-bottom: 30px"
>
<DescriptionsItem label="预警编号">
{{ warningDetail.alarmId }}
</DescriptionsItem>
<DescriptionsItem label="预警时间">
{{ warningDetail.alarmTime }}
</DescriptionsItem>
<DescriptionsItem label="级别">
<Tag
:color="
warningDetail.level === '特大'
? 'red'
: warningDetail.level === '重要'
? 'orange'
: 'blue'
"
>
{{ warningDetail.level }}
</Tag>
</DescriptionsItem>
<DescriptionsItem label="预警类型">
{{ warningDetail.alarmType }}
</DescriptionsItem>
<DescriptionsItem label="描述" :span="2">
{{ warningDetail.description }}
</DescriptionsItem>
<DescriptionsItem label="所在位置">
{{ warningDetail.location }}
</DescriptionsItem>
<DescriptionsItem label="处理状态">
<Tag
:color="
warningDetail.processingStatus === '待分配'
? 'red'
: warningDetail.processingStatus === '处理中'
? 'orange'
: 'green'
"
>
{{ warningDetail.processingStatus }}
</Tag>
</DescriptionsItem>
<DescriptionsItem label="处理情况" :span="2">
{{ warningDetail.processingDetails || '-' }}
</DescriptionsItem>
<DescriptionsItem label="处理时间">
{{ warningDetail.processingTime || '-' }}
</DescriptionsItem>
<DescriptionsItem label="设备名称">
{{ warningDetail.deviceName || '-' }}
</DescriptionsItem>
<DescriptionsItem
label="预处理时间"
v-if="warningDetail.processingStatus === '处理中'"
>
{{ warningDetail.expectedProcessingTime || '-' }}
</DescriptionsItem>
<DescriptionsItem
label="处理图片"
v-if="warningDetail.processingStatus === '已完成'"
>
<img
:src="warningDetail.imgUrl"
alt="处理图片"
style="max-width: 200px; max-height: 150px"
/>
</DescriptionsItem>
</Descriptions>
<Timeline>
<TimelineItem>
<p style="display: flex">类型：已完成</p>
<p>时间：2025-06-01 11:07:59</p>
<p>处理人：张三</p>
</TimelineItem>
<TimelineItem>
<p style="display: flex">类型：处理异常</p>
<p>时间：2025-06-01 11:07:59</p>
<p>处理人：张三</p>
<p>异常原因：时长不够</p>
</TimelineItem>
<TimelineItem>
<p style="display: flex">类型：处理中</p>
<p>时间：2025-06-01 11:07:59</p>
<p>处理人：张三</p>
</TimelineItem>
<TimelineItem>
<p style="display: flex">类型：创建预警</p>
<p>时间：2025-06-01 11:07:59</p>
<p>处理人：张三</p>
</TimelineItem>
</Timeline>
</BasicModal>
</template>

122
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningHasDone/warning-modal.vue Normal file
View File

@@ -0,0 +1,122 @@
<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 { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { modalSchema } from './data';
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
formItemClass: 'col-span-1',
labelWidth: 110,
componentProps: {
class: 'w-full',
},
},
schema: modalSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
{
initializedGetter: defaultFormValueGetter(formApi),
currentGetter: defaultFormValueGetter(formApi),
},
);
const [BasicModal, modalApi] = useVbenModal({
class: 'w-[70%]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
if (!isOpen) {
return null;
}
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
isUpdate.value = !!id;
if (isUpdate.value && id) {
// 从传递的数据中查找对应的记录
const { data } = modalApi.getData() as {
id: number | string;
data: any[];
};
const record = data.find((item: any) => item.id === id);
if (record) {
await formApi.setValues(record);
}
}
await markInitialized();
modalApi.modalLoading(false);
},
});
async function handleConfirm() {
try {
modalApi.lock(true);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
const formData = cloneDeep(await formApi.getValues());
// 更新表格数据
const { data } = modalApi.getData() as { id: number | string; data: any[] };
const index = data.findIndex((item: any) => item.id === formData.id);
if (index !== -1) {
// 更新数据
Object.assign(data[index], formData);
}
resetInitialized();
emit('reload');
modalApi.close();
} catch (error) {
console.error(error);
} finally {
modalApi.lock(false);
}
}
async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
</script>
<template>
<BasicModal :title="title">
<BasicForm />
</BasicModal>
</template>
<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-disabled .ant-picker-input > input) {
/* 设置一个更深的颜色 */
color: rgb(0 0 0 / 65%) !important;
/* 有些浏览器需要这个来覆盖默认颜色 */
-webkit-text-fill-color: rgb(0 0 0 / 65%) !important;
}
</style>

103
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/data.ts
View File

@@ -48,6 +48,11 @@ export const columns: VxeGridProps['columns'] = [
field: 'alarmTime',
width: 150,
},
{
title: '设备名称',
field: 'deviceName',
width: 150,
},
{
title: '级别',
field: 'level',
@@ -116,6 +121,11 @@ export const columns: VxeGridProps['columns'] = [
field: 'processingDetails',
width: 150,
},
{
title: '预期处理时间',
field: 'expectedProcessingTime',
width: 150,
},
{
title: '处理时间',
field: 'processingTime',
@@ -145,6 +155,7 @@ export const modalSchema: FormSchemaGetter = () => [
fieldName: 'alarmId',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '预警时间',
@@ -156,6 +167,63 @@ export const modalSchema: FormSchemaGetter = () => [
showTime: true,
},
rules: 'required',
disabled: true,
},
{
label: '预警类型',
fieldName: 'alarmType',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '描述',
fieldName: 'description',
component: 'Input',
formItemClass: 'col-span-2',
disabled: true,
},
{
label: '所在位置',
fieldName: 'location',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '设备名称',
fieldName: 'deviceName',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '处理情况',
fieldName: 'processingDetails',
component: 'Input',
componentProps: {
rows: 3,
},
formItemClass: 'col-span-2',
disabled: true,
},
{
label: '处理时间',
fieldName: 'processingTime',
component: 'DatePicker',
componentProps: {
format: 'YYYY.MM.DD HH:mm',
valueFormat: 'YYYY.MM.DD HH:mm',
showTime: true,
},
disabled: true,
},
{
label: '处理图片',
fieldName: 'imgUrl',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '级别',
@@ -170,27 +238,6 @@ export const modalSchema: FormSchemaGetter = () => [
},
rules: 'selectRequired',
},
{
label: '预警类型',
fieldName: 'alarmType',
component: 'Input',
rules: 'required',
},
{
label: '描述',
fieldName: 'description',
component: 'InputTextArea',
componentProps: {
rows: 3,
},
formItemClass: 'col-span-2',
},
{
label: '所在位置',
fieldName: 'location',
component: 'Input',
rules: 'required',
},
{
label: '处理状态',
fieldName: 'processingStatus',
@@ -205,22 +252,14 @@ export const modalSchema: FormSchemaGetter = () => [
rules: 'selectRequired',
},
{
label: '处理情况',
fieldName: 'processingDetails',
component: 'InputTextArea',
componentProps: {
rows: 3,
},
formItemClass: 'col-span-2',
},
{
label: '处理时间',
fieldName: 'processingTime',
label: '预期处理时间',
fieldName: 'expectedProcessingTime',
component: 'DatePicker',
componentProps: {
format: 'YYYY.MM.DD HH:mm',
valueFormat: 'YYYY.MM.DD HH:mm',
showTime: true,
},
rules: 'required',
},
];

152
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/index.vue
View File

@@ -1,73 +1,3 @@
<template>
<Page :auto-content-height="true">
<BasicTable
:key="tableKey"
class="flex-1 overflow-hidden"
table-title="视频预警处理"
>
<template #toolbar-tools>
<Space>
<a-button
:disabled="!vxeCheckboxChecked(tableApi)"
danger
type="primary"
v-access:code="['video:warning:remove']"
@click="handleMultiDelete"
>
{{ $t('pages.common.delete') }}
</a-button>
</Space>
</template>
<template #action="{ row }">
<Space>
<ghost-button
v-access:code="['video:warning:level']"
@click.stop="handleLevelSetting(row)"
>
级别设置
</ghost-button>
<ghost-button
v-access:code="['video:warning:view']"
@click.stop="handleView(row)"
>
{{ $t('pages.common.info') }}
</ghost-button>
<ghost-button
v-access:code="['video:warning:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</ghost-button>
<ghost-button
v-access:code="['video:warning:assign']"
@click.stop="handleAssign(row)"
:disabled="row.processingStatus === '已完成'"
>
分配处理
</ghost-button>
<Popconfirm
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['video:warning:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<WarningModal @reload="tableApi.query()" />
<WarningDetail />
<LevelSettingModalComp @reload="tableKey++" />
</Page>
</template>
<script setup lang="ts">
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
@@ -88,6 +18,7 @@ import { columns, querySchema } from './data';
import warningModal from './warning-modal.vue';
import warningDetail from './warning-detail.vue';
import LevelSettingModal from './level-setting-modal.vue';
import imgPng from '../../../../assets/algorithmManagement/image.png';
// 假数据
const mockData = ref([
@@ -102,6 +33,7 @@ const mockData = ref([
processingStatus: '待分配',
processingDetails: '',
processingTime: '',
deviceName: '监控设备',
},
{
id: 2,
@@ -114,6 +46,8 @@ const mockData = ref([
processingStatus: '处理中',
processingDetails: '已派人员前往处理',
processingTime: '2025.07.21 11:30',
expectedProcessingTime: '2025.07.21 11:30',
deviceName: '门禁设备',
},
{
id: 3,
@@ -126,6 +60,8 @@ const mockData = ref([
processingStatus: '已完成',
processingDetails: '已修复设备',
processingTime: '2025.07.21 11:00',
imgUrl: imgPng,
deviceName: '消防设备',
},
]);
@@ -209,9 +145,9 @@ function handleAssign(row: any) {
// 模拟分配处理
const index = mockData.value.findIndex((item: any) => item.id === row.id);
if (index !== -1) {
mockData.value[index].processingStatus = '处理中';
mockData.value[index].processingDetails = '已分配给处理人员';
mockData.value[index].processingTime = new Date().toLocaleString();
// mockData.value[index].processingStatus = '处理中';
// mockData.value[index].processingDetails = '已分配给处理人员';
// mockData.value[index].processingTime = new Date().toLocaleString();
tableApi.query();
}
},
@@ -247,7 +183,75 @@ function handleMultiDelete() {
});
}
</script>
<template>
<Page :auto-content-height="true">
<BasicTable
:key="tableKey"
class="flex-1 overflow-hidden"
table-title="视频预警处理"
>
<template #toolbar-tools>
<Space>
<a-button
:disabled="!vxeCheckboxChecked(tableApi)"
danger
type="primary"
v-access:code="['video:warning:remove']"
@click="handleMultiDelete"
>
{{ $t('pages.common.delete') }}
</a-button>
</Space>
</template>
<template #action="{ row }">
<Space>
<!-- <ghost-button
v-access:code="['video:warning:level']"
@click.stop="handleLevelSetting(row)"
>
级别设置
</ghost-button> -->
<ghost-button
v-access:code="['video:warning:view']"
@click.stop="handleView(row)"
>
{{ $t('pages.common.info') }}
</ghost-button>
<ghost-button
v-access:code="['video:warning:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</ghost-button>
<ghost-button
v-access:code="['video:warning:assign']"
@click.stop="handleAssign(row)"
:disabled="row.processingStatus === '已完成'"
>
分配处理
</ghost-button>
<Popconfirm
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['video:warning:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<WarningModal @reload="tableApi.query()" />
<WarningDetail />
<LevelSettingModalComp @reload="tableKey++" />
</Page>
</template>
<style scoped lang="scss">
.ant-table-wrapper {
.ant-table-thead > tr > th {

79
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-detail.vue
View File

@@ -1,17 +1,36 @@
<script setup lang="ts">
import { shallowRef } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Descriptions, DescriptionsItem, Tag } from 'ant-design-vue';
import {
Descriptions,
DescriptionsItem,
Tag,
Timeline,
TimelineItem,
} from 'ant-design-vue';
const [BasicModal, modalApi] = useVbenModal({
onOpenChange: handleOpenChange,
onClosed() {
warningDetail.value = null;
// warningDetail.value = null;
modalApi.close();
},
});
const warningDetail = shallowRef<any>(null);
// 时间线显示条件配置
const timelineConfig = {
'已完成': ['已完成'],
'处理异常': ['已完成', '处理异常'],
'处理中': ['已完成', '处理中', '处理异常']
};
function showTimelineItem(type: string): boolean {
const currentStatus = warningDetail.value?.processingStatus;
return timelineConfig[type as keyof typeof timelineConfig]?.includes(currentStatus) || false;
}
async function handleOpenChange(open: boolean) {
if (!open) {
return null;
@@ -45,6 +64,7 @@ async function handleOpenChange(open: boolean) {
:column="2"
bordered
:labelStyle="{ width: '120px' }"
style="margin-bottom: 30px"
>
<DescriptionsItem label="预警编号">
{{ warningDetail.alarmId }}
@@ -93,6 +113,61 @@ async function handleOpenChange(open: boolean) {
<DescriptionsItem label="处理时间">
{{ warningDetail.processingTime || '-' }}
</DescriptionsItem>
<DescriptionsItem label="设备名称">
{{ warningDetail.deviceName || '-' }}
</DescriptionsItem>
<DescriptionsItem label="预处理时间" v-if="warningDetail.processingStatus === '处理中'">
{{ warningDetail.expectedProcessingTime || '-' }}
</DescriptionsItem>
<DescriptionsItem label="处理图片" v-if="warningDetail.processingStatus === '已完成'">
<img :src="warningDetail.imgUrl" alt="处理图片" style="max-width: 200px; max-height: 150px;">
</DescriptionsItem>
</Descriptions>
<!-- <Timeline>
<TimelineItem v-if="showTimelineItem('已完成')">
<p style="display: flex">类型：已完成</p>
<p>时间：2025-06-01 11:07:59</p>
<p>处理人：张三</p>
</TimelineItem>
<TimelineItem v-if="showTimelineItem('处理异常')">
<p style="display: flex">类型：处理异常</p>
<p>时间：2025-06-01 11:07:59</p>
<p>处理人：张三</p>
<p>异常原因：时长不够</p>
</TimelineItem>
<TimelineItem v-if="showTimelineItem('处理中')">
<p style="display: flex">类型：处理中</p>
<p>时间：2025-06-01 11:07:59</p>
<p>处理人：张三</p>
</TimelineItem>
<TimelineItem>
<p style="display: flex">类型：创建预警</p>
<p>时间：2025-06-01 11:07:59</p>
<p>处理人：张三</p>
</TimelineItem>
</Timeline> -->
<Timeline>
<TimelineItem v-if="warningDetail.processingStatus === '已完成'">
<p style="display: flex">类型：已完成</p>
<p>时间：2025-06-01 11:07:59</p>
<p>处理人：张三</p>
</TimelineItem>
<TimelineItem v-if="warningDetail.processingStatus === '已完成' || warningDetail.processingStatus === '处理异常'">
<p style="display: flex">类型：处理异常</p>
<p>时间：2025-06-01 11:07:59</p>
<p>处理人：张三</p>
<p>异常原因：时长不够</p>
</TimelineItem>
<TimelineItem v-if="warningDetail.processingStatus === '已完成'|| warningDetail.processingStatus === '处理中' || warningDetail.processingStatus === '处理异常'">
<p style="display: flex">类型：处理中</p>
<p>时间：2025-06-01 11:07:59</p>
<p>处理人：张三</p>
</TimelineItem>
<TimelineItem>
<p style="display: flex">类型：创建预警</p>
<p>时间：2025-06-01 11:07:59</p>
<p>处理人：张三</p>
</TimelineItem>
</Timeline>
</BasicModal>
</template>

13
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-modal.vue
View File

@@ -106,3 +106,16 @@ async function handleClosed() {
<BasicForm />
</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-disabled .ant-picker-input > input) {
/* 设置一个更深的颜色 */
color: rgb(0 0 0 / 65%) !important;
/* 有些浏览器需要这个来覆盖默认颜色 */
-webkit-text-fill-color: rgb(0 0 0 / 65%) !important;
}
</style>

265
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/data.ts Normal file
View File

@@ -0,0 +1,265 @@
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';
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'alarmType',
label: '视频预警类型',
},
{
component: 'Select',
componentProps: {
options: [
{ label: '特大', value: '特大' },
{ label: '重要', value: '重要' },
{ label: '一般', value: '一般' },
],
},
fieldName: 'level',
label: '级别',
},
{
component: 'Select',
componentProps: {
options: [
{ label: '待分配', value: '待分配' },
{ label: '处理中', value: '处理中' },
{ label: '已完成', value: '已完成' },
],
},
fieldName: 'processingStatus',
label: '处理状态',
},
];
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '预警编号',
field: 'alarmId',
width: 150,
},
{
title: '预警时间',
field: 'alarmTime',
width: 150,
},
{
title: '设备名称',
field: 'deviceName',
width: 150,
},
{
title: '级别',
field: 'level',
width: 100,
slots: {
default: ({ row }: any) => {
const levelColors: Record<string, string> = {
特大: 'red',
重要: 'orange',
一般: 'blue',
};
return h(
'span',
{
style: {
color: levelColors[row.level] || '#666',
fontWeight: 'bold',
},
},
row.level,
);
},
},
},
{
title: '预警类型',
field: 'alarmType',
width: 120,
},
{
title: '描述',
field: 'description',
minWidth: 200,
},
{
title: '所在位置',
field: 'location',
width: 150,
},
{
title: '处理状态',
field: 'processingStatus',
width: 100,
slots: {
default: ({ row }: any) => {
const statusColors: Record<string, string> = {
待分配: 'red',
处理中: 'orange',
已完成: 'green',
};
return h(
'span',
{
style: {
color: statusColors[row.processingStatus] || '#666',
fontWeight: 'bold',
},
},
row.processingStatus,
);
},
},
},
{
title: '处理情况',
field: 'processingDetails',
width: 150,
},
{
title: '预期处理时间',
field: 'expectedProcessingTime',
width: 150,
},
{
title: '处理时间',
field: 'processingTime',
width: 150,
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 380,
},
];
export const modalSchema: FormSchemaGetter = () => [
{
label: '主键',
fieldName: 'id',
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
},
{
label: '预警编号',
fieldName: 'alarmId',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '预警时间',
fieldName: 'alarmTime',
component: 'DatePicker',
componentProps: {
format: 'YYYY.MM.DD HH:mm',
valueFormat: 'YYYY.MM.DD HH:mm',
showTime: true,
},
rules: 'required',
disabled: true,
},
{
label: '预警类型',
fieldName: 'alarmType',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '描述',
fieldName: 'description',
component: 'Input',
formItemClass: 'col-span-2',
disabled: true,
},
{
label: '所在位置',
fieldName: 'location',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '设备名称',
fieldName: 'deviceName',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '处理情况',
fieldName: 'processingDetails',
component: 'Input',
componentProps: {
rows: 3,
},
formItemClass: 'col-span-2',
disabled: true,
},
{
label: '处理时间',
fieldName: 'processingTime',
component: 'DatePicker',
componentProps: {
format: 'YYYY.MM.DD HH:mm',
valueFormat: 'YYYY.MM.DD HH:mm',
showTime: true,
},
disabled: true,
},
{
label: '处理图片',
fieldName: 'imgUrl',
component: 'Input',
rules: 'required',
disabled: true,
},
{
label: '级别',
fieldName: 'level',
component: 'Select',
componentProps: {
options: [
{ label: '特大', value: '特大' },
{ label: '重要', value: '重要' },
{ label: '一般', value: '一般' },
],
},
rules: 'selectRequired',
},
{
label: '处理状态',
fieldName: 'processingStatus',
component: 'Select',
componentProps: {
options: [
{ label: '待分配', value: '待分配' },
{ label: '处理中', value: '处理中' },
{ label: '已完成', value: '已完成' },
],
},
rules: 'selectRequired',
},
{
label: '预期处理时间',
fieldName: 'expectedProcessingTime',
component: 'DatePicker',
componentProps: {
format: 'YYYY.MM.DD HH:mm',
valueFormat: 'YYYY.MM.DD HH:mm',
showTime: true,
},
rules: 'required',
},
];

276
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/index.vue Normal file
View File

@@ -0,0 +1,276 @@
<script setup lang="ts">
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space, Tag } from 'ant-design-vue';
import { ref, watch } from 'vue';
import {
useVbenVxeGrid,
vxeCheckboxChecked,
type VxeGridProps,
} from '#/adapter/vxe-table';
import { commonDownloadExcel } from '#/utils/file/download';
import { renderDict } from '#/utils/render';
import { columns, querySchema } from './data';
import warningModal from './warning-modal.vue';
import warningDetail from './warning-detail.vue';
import LevelSettingModal from './level-setting-modal.vue';
import imgPng from '../../../../assets/algorithmManagement/image.png';
// 假数据
const mockData = ref([
{
id: 1,
alarmId: 'JWD-3434234',
alarmTime: '2025.07.21 12:20',
level: '特大',
alarmType: '越界侦测',
description: '温度高于80度发生火宅',
location: '1栋3号电梯旁',
processingStatus: '待分配',
processingDetails: '',
processingTime: '',
},
{
id: 2,
alarmId: 'JWD-3434235',
alarmTime: '2025.07.21 11:15',
level: '重要',
alarmType: '异常行为',
description: '人员异常聚集',
location: '2栋大厅',
processingStatus: '待分配',
processingDetails: '已派人员前往处理',
processingTime: '2025.07.21 11:30',
},
{
id: 3,
alarmId: 'JWD-3434236',
alarmTime: '2025.07.21 10:45',
level: '一般',
alarmType: '设备故障',
description: '摄像头离线',
location: '3栋走廊',
processingStatus: '待分配',
processingDetails: '已修复设备',
processingTime: '2025.07.21 11:00',
},
{
id: 4,
alarmId: 'JWD-3434236',
alarmTime: '2025.07.21 10:45',
level: '一般',
alarmType: '设备故障',
description: '摄像头离线',
location: '3栋走廊',
processingStatus: '待分配',
processingDetails: '等待接受',
processingTime: '2025.07.21 11:00',
},
]);
const formOptions: VbenFormProps = {
commonConfig: {
labelWidth: 100,
componentProps: {
allowClear: true,
},
},
schema: querySchema(),
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
};
const gridOptions: VxeGridProps = {
columns,
height: 'auto',
data: mockData.value,
pagerConfig: {
currentPage: 1,
pageSize: 10,
total: mockData.value.length,
},
rowConfig: {
keyField: 'id',
},
id: 'video-warning-processing-index',
};
const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions,
gridOptions,
});
// 监听数据变化，强制重新渲染表格
const tableKey = ref(0);
watch(
mockData,
() => {
tableKey.value++;
},
{ deep: true },
);
const [WarningModal, modalApi] = useVbenModal({
connectedComponent: warningModal,
});
const [WarningDetail, detailApi] = useVbenModal({
connectedComponent: warningDetail,
});
const [LevelSettingModalComp, levelModalApi] = useVbenModal({
connectedComponent: LevelSettingModal,
});
// 级别设置
function handleLevelSetting(row: any) {
levelModalApi.setData({ id: row.id, level: row.level, data: mockData.value });
levelModalApi.open();
}
// 查看详情
async function handleView(row: any) {
detailApi.setData({ id: row.id, data: mockData.value });
detailApi.open();
}
// 编辑
async function handleEdit(row: any) {
modalApi.setData({ id: row.id, data: mockData.value });
modalApi.open();
}
// 分配处理
function handleAssign(row: any) {
Modal.confirm({
title: '分配处理',
content: `确定要分配预警 ${row.alarmId} 给处理人员吗？`,
onOk() {
// 模拟分配处理
const index = mockData.value.findIndex((item: any) => item.id === row.id);
if (index !== -1) {
// mockData.value[index].processingStatus = '处理中';
// mockData.value[index].processingDetails = '已分配给处理人员';
// mockData.value[index].processingTime = new Date().toLocaleString();
tableApi.query();
}
},
});
}
// 删除
async function handleDelete(row: any) {
const index = mockData.value.findIndex((item: any) => item.id === row.id);
if (index !== -1) {
mockData.value.splice(index, 1);
await tableApi.query();
}
}
// 批量删除
function handleMultiDelete() {
const rows = tableApi.grid.getCheckboxRecords();
const ids = rows.map((row: any) => row.id);
Modal.confirm({
title: '提示',
okType: 'danger',
content: `确认删除选中的${ids.length}条记录吗？`,
onOk: async () => {
ids.forEach((id) => {
const index = mockData.value.findIndex((item: any) => item.id === id);
if (index !== -1) {
mockData.value.splice(index, 1);
}
});
await tableApi.query();
},
});
}
</script>
<template>
<Page :auto-content-height="true">
<BasicTable
:key="tableKey"
class="flex-1 overflow-hidden"
table-title="视频预警处理"
>
<template #toolbar-tools>
<Space>
<a-button
:disabled="!vxeCheckboxChecked(tableApi)"
danger
type="primary"
v-access:code="['video:warning:remove']"
@click="handleMultiDelete"
>
{{ $t('pages.common.delete') }}
</a-button>
</Space>
</template>
<template #action="{ row }">
<Space>
<!-- <ghost-button
v-access:code="['video:warning:level']"
@click.stop="handleLevelSetting(row)"
>
级别设置
</ghost-button> -->
<ghost-button
v-access:code="['video:warning:view']"
@click.stop="handleView(row)"
>
{{ $t('pages.common.info') }}
</ghost-button>
<ghost-button
v-access:code="['video:warning:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</ghost-button>
<ghost-button
v-access:code="['video:warning:assign']"
@click.stop="handleAssign(row)"
:disabled="row.processingStatus === '已完成'"
>
分配处理
</ghost-button>
<Popconfirm
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除？"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['video:warning:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<WarningModal @reload="tableApi.query()" />
<WarningDetail />
<LevelSettingModalComp @reload="tableKey++" />
</Page>
</template>
<style scoped lang="scss">
.ant-table-wrapper {
.ant-table-thead > tr > th {
background-color: #fafafa;
font-weight: 600;
}
}
.ant-pagination {
.ant-pagination-item-active {
background-color: #1890ff;
border-color: #1890ff;
}
}
</style>

45
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/level-setting-modal.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<BasicModal>
<RadioGroup v-model:value="selectedLevel">
<Radio value="特大">特大</Radio>
<Radio value="重要">重要</Radio>
<Radio value="一般">一般</Radio>
</RadioGroup>
</BasicModal>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { RadioGroup, Radio } from 'ant-design-vue';
const emit = defineEmits<{ reload: [] }>();
const selectedLevel = ref('一般');
const [BasicModal, modalApi] = useVbenModal({
class: 'w-[360px]',
title: '设置级别',
onOpenChange: async (isOpen) => {
if (!isOpen) return null;
const { level } = modalApi.getData() as { level?: string };
selectedLevel.value = level || '一般';
},
onConfirm: handleConfirm,
});
function handleConfirm() {
const { id, data } = modalApi.getData() as {
id: number | string;
data: any[];
};
if (id != null && data) {
const idx = data.findIndex((item: any) => item.id === id);
if (idx !== -1) {
data[idx].level = selectedLevel.value;
}
}
emit('reload');
modalApi.close();
}
</script>

147
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/warning-detail.vue Normal file
View File

@@ -0,0 +1,147 @@
<script setup lang="ts">
import { shallowRef } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import {
Descriptions,
DescriptionsItem,
Tag,
Timeline,
TimelineItem,
} from 'ant-design-vue';
const [BasicModal, modalApi] = useVbenModal({
onOpenChange: handleOpenChange,
onClosed() {
warningDetail.value = null;
},
});
const warningDetail = shallowRef<any>(null);
async function handleOpenChange(open: boolean) {
if (!open) {
return null;
}
modalApi.modalLoading(true);
const { id, data } = modalApi.getData() as {
id: number | string;
data: any[];
};
// 从传递的数据中查找对应的记录
const record = data.find((item: any) => item.id === id);
if (record) {
warningDetail.value = record;
}
modalApi.modalLoading(false);
}
</script>
<template>
<BasicModal
:footer="false"
:fullscreen-button="false"
title="预警详情"
class="w-[70%]"
>
<Descriptions
v-if="warningDetail"
size="small"
:column="2"
bordered
:labelStyle="{ width: '120px' }"
style="margin-bottom: 30px"
>
<DescriptionsItem label="预警编号">
{{ warningDetail.alarmId }}
</DescriptionsItem>
<DescriptionsItem label="预警时间">
{{ warningDetail.alarmTime }}
</DescriptionsItem>
<DescriptionsItem label="级别">
<Tag
:color="
warningDetail.level === '特大'
? 'red'
: warningDetail.level === '重要'
? 'orange'
: 'blue'
"
>
{{ warningDetail.level }}
</Tag>
</DescriptionsItem>
<DescriptionsItem label="预警类型">
{{ warningDetail.alarmType }}
</DescriptionsItem>
<DescriptionsItem label="描述" :span="2">
{{ warningDetail.description }}
</DescriptionsItem>
<DescriptionsItem label="所在位置">
{{ warningDetail.location }}
</DescriptionsItem>
<DescriptionsItem label="处理状态">
<Tag
:color="
warningDetail.processingStatus === '待分配'
? 'red'
: warningDetail.processingStatus === '处理中'
? 'orange'
: 'green'
"
>
{{ warningDetail.processingStatus }}
</Tag>
</DescriptionsItem>
<DescriptionsItem label="处理情况" :span="2">
{{ warningDetail.processingDetails || '-' }}
</DescriptionsItem>
<DescriptionsItem label="处理时间">
{{ warningDetail.processingTime || '-' }}
</DescriptionsItem>
<DescriptionsItem label="设备名称">
{{ warningDetail.deviceName || '-' }}
</DescriptionsItem>
<DescriptionsItem
label="预处理时间"
v-if="warningDetail.processingStatus === '处理中'"
>
{{ warningDetail.expectedProcessingTime || '-' }}
</DescriptionsItem>
<DescriptionsItem
label="处理图片"
v-if="warningDetail.processingStatus === '已完成'"
>
<img
:src="warningDetail.imgUrl"
alt="处理图片"
style="max-width: 200px; max-height: 150px"
/>
</DescriptionsItem>
</Descriptions>
<Timeline>
<TimelineItem>
<p style="display: flex">类型：已完成</p>
<p>时间：2025-06-01 11:07:59</p>
<p>处理人：张三</p>
</TimelineItem>
<TimelineItem>
<p style="display: flex">类型：处理异常</p>
<p>时间：2025-06-01 11:07:59</p>
<p>处理人：张三</p>
<p>异常原因：时长不够</p>
</TimelineItem>
<TimelineItem>
<p style="display: flex">类型：处理中</p>
<p>时间：2025-06-01 11:07:59</p>
<p>处理人：张三</p>
</TimelineItem>
<TimelineItem>
<p style="display: flex">类型：创建预警</p>
<p>时间：2025-06-01 11:07:59</p>
<p>处理人：张三</p>
</TimelineItem>
</Timeline>
</BasicModal>
</template>

121
apps/web-antd/src/views/videoSystem/videoWarning/videoWarningToDone/warning-modal.vue Normal file
View File

@@ -0,0 +1,121 @@
<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 { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { modalSchema } from './data';
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
formItemClass: 'col-span-1',
labelWidth: 110,
componentProps: {
class: 'w-full',
},
},
schema: modalSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
{
initializedGetter: defaultFormValueGetter(formApi),
currentGetter: defaultFormValueGetter(formApi),
},
);
const [BasicModal, modalApi] = useVbenModal({
class: 'w-[70%]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
if (!isOpen) {
return null;
}
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
isUpdate.value = !!id;
if (isUpdate.value && id) {
// 从传递的数据中查找对应的记录
const { data } = modalApi.getData() as {
id: number | string;
data: any[];
};
const record = data.find((item: any) => item.id === id);
if (record) {
await formApi.setValues(record);
}
}
await markInitialized();
modalApi.modalLoading(false);
},
});
async function handleConfirm() {
try {
modalApi.lock(true);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
const formData = cloneDeep(await formApi.getValues());
// 更新表格数据
const { data } = modalApi.getData() as { id: number | string; data: any[] };
const index = data.findIndex((item: any) => item.id === formData.id);
if (index !== -1) {
// 更新数据
Object.assign(data[index], formData);
}
resetInitialized();
emit('reload');
modalApi.close();
} catch (error) {
console.error(error);
} finally {
modalApi.lock(false);
}
}
async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
</script>
<template>
<BasicModal :title="title">
<BasicForm />
</BasicModal>
</template>
<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-disabled .ant-picker-input > input) {
/* 设置一个更深的颜色 */
color: rgb(0 0 0 / 65%) !important;
/* 有些浏览器需要这个来覆盖默认颜色 */
-webkit-text-fill-color: rgb(0 0 0 / 65%) !important;
}
</style>