feat: 完成采购，视频分析模块
This commit is contained in:
@@ -0,0 +1,132 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
import { useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
import {
|
||||
procurementApplicationUpdate,
|
||||
procurementApplicationInfo,
|
||||
} from '#/api/property/assetManage/procurementApplication';
|
||||
import type { ProcurementApplicationForm } from '#/api/property/assetManage/procurementApplication/model';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const title = computed(() => '采购审批');
|
||||
|
||||
// 存储完整的申请数据
|
||||
const fullApplicationData = ref<ProcurementApplicationForm>({});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
labelWidth: 80,
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
schema: [
|
||||
{
|
||||
label: '审核状态',
|
||||
fieldName: 'state',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '通过', value: '1' },
|
||||
{ label: '驳回', value: '2' },
|
||||
],
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '审核意见',
|
||||
fieldName: 'auditOpinion',
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
rows: 4,
|
||||
placeholder: '请输入审核意见',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
],
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-1',
|
||||
});
|
||||
|
||||
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
{
|
||||
initializedGetter: defaultFormValueGetter(formApi),
|
||||
currentGetter: defaultFormValueGetter(formApi),
|
||||
},
|
||||
);
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
class: 'w-[500px]',
|
||||
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 };
|
||||
if (id) {
|
||||
// 获取完整的申请数据
|
||||
const record = await procurementApplicationInfo(id);
|
||||
fullApplicationData.value = cloneDeep(record);
|
||||
|
||||
// 设置表单默认值
|
||||
await formApi.setValues({
|
||||
id,
|
||||
state: '',
|
||||
auditOpinion: '',
|
||||
});
|
||||
}
|
||||
await markInitialized();
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.lock(true);
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取审核表单数据
|
||||
const auditData = await formApi.getValues();
|
||||
|
||||
// 合并完整数据，只更新审核相关字段
|
||||
const updateData = {
|
||||
...fullApplicationData.value,
|
||||
state: auditData.state,
|
||||
auditOpinion: auditData.auditOpinion,
|
||||
};
|
||||
|
||||
await procurementApplicationUpdate(updateData);
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
fullApplicationData.value = {};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm />
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -3,48 +3,46 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
import { getDictOptions } from '#/utils/dict';
|
||||
import { renderDict } from '#/utils/render';
|
||||
import { suppliersList } from '#/api/property/assetManage/suppliers';
|
||||
import { depotList } from '#/api/property/assetManage/depot';
|
||||
import { useUserStore } from '@vben/stores';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'title',
|
||||
label: '标题',
|
||||
},
|
||||
// {
|
||||
// component: 'Input',
|
||||
// fieldName: 'title',
|
||||
// label: '标题',
|
||||
// },
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'applicat',
|
||||
label: '申请人id',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'phone',
|
||||
label: '申请人手机号',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'supplier',
|
||||
label: '供应商id',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'capitalId',
|
||||
label: '资产id',
|
||||
label: '申请人',
|
||||
},
|
||||
// {
|
||||
// component: 'Input',
|
||||
// fieldName: 'phone',
|
||||
// label: '申请人手机号',
|
||||
// },
|
||||
// {
|
||||
// component: 'ApiSelect',
|
||||
// fieldName: 'supplier',
|
||||
// label: '供应商',
|
||||
// componentProps: {
|
||||
// api: suppliersList({ pageNum: 1, pageSize: 1000 }),
|
||||
// resultField: 'rows',
|
||||
// labelField: 'assetTypeName',
|
||||
// valueField: 'id',
|
||||
// },
|
||||
// },
|
||||
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {},
|
||||
fieldName: 'buyType',
|
||||
label: '采购方式',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'buyUnitPrice',
|
||||
label: '采购单价',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'buyAmount',
|
||||
label: '采购金额',
|
||||
options: getDictOptions('wy_zccgfs'),
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
@@ -55,21 +53,6 @@ export const querySchema: FormSchemaGetter = () => [
|
||||
fieldName: 'state',
|
||||
label: '状态',
|
||||
},
|
||||
{
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
fieldName: 'applicationTime',
|
||||
label: '申请时间',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'searchValue',
|
||||
label: '搜索值',
|
||||
},
|
||||
];
|
||||
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
@@ -77,12 +60,18 @@ export const querySchema: FormSchemaGetter = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '',
|
||||
title: '序号',
|
||||
field: 'id',
|
||||
slots: {
|
||||
default: ({ rowIndex }) => {
|
||||
return (rowIndex + 1).toString();
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '标题',
|
||||
field: 'title',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
title: '申请人id',
|
||||
@@ -96,21 +85,15 @@ export const columns: VxeGridProps['columns'] = [
|
||||
title: '供应商id',
|
||||
field: 'supplier',
|
||||
},
|
||||
{
|
||||
title: '资产id',
|
||||
field: 'capitalId',
|
||||
},
|
||||
{
|
||||
title: '采购方式',
|
||||
field: 'buyType',
|
||||
},
|
||||
{
|
||||
title: '采购单价',
|
||||
field: 'buyUnitPrice',
|
||||
},
|
||||
{
|
||||
title: '采购金额',
|
||||
field: 'buyAmount',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
// 可选从DictEnum中获取 DictEnum.WY_ZCSQSHZT 便于维护
|
||||
return renderDict(row.buyType, 'wy_zccgfs');
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
@@ -126,20 +109,12 @@ export const columns: VxeGridProps['columns'] = [
|
||||
title: '备注',
|
||||
field: 'remark',
|
||||
},
|
||||
{
|
||||
title: '申请时间',
|
||||
field: 'applicationTime',
|
||||
},
|
||||
{
|
||||
title: '搜索值',
|
||||
field: 'searchValue',
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
fixed: 'right',
|
||||
slots: { default: 'action' },
|
||||
title: '操作',
|
||||
width: 180,
|
||||
width: 280,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -160,73 +135,131 @@ export const modalSchema: FormSchemaGetter = () => [
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '申请人id',
|
||||
fieldName: 'applicat',
|
||||
component: 'Input',
|
||||
label: '存放仓库',
|
||||
fieldName: 'depotId',
|
||||
component: 'ApiSelect',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '申请人手机号',
|
||||
fieldName: 'phone',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '供应商id',
|
||||
fieldName: 'supplier',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '资产id',
|
||||
fieldName: 'capitalId',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '采购方式',
|
||||
fieldName: 'buyType',
|
||||
component: 'Select',
|
||||
componentProps: {},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
label: '采购单价',
|
||||
fieldName: 'buyUnitPrice',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '采购金额',
|
||||
fieldName: 'buyAmount',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
fieldName: 'state',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
// 可选从DictEnum中获取 DictEnum.WY_ZCSQSHZT 便于维护
|
||||
options: getDictOptions('wy_zcsqshzt'),
|
||||
api: async () => {
|
||||
const res = await depotList({ pageNum: 1, pageSize: 1000 });
|
||||
return res;
|
||||
},
|
||||
resultField: 'rows',
|
||||
labelField: 'depotName',
|
||||
valueField: 'id',
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'applicatDisplay', // 显示用
|
||||
label: '申请人',
|
||||
rules: 'required',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
fieldName: 'applicat', // 实际存储ID
|
||||
dependencies: {
|
||||
show: () => false,
|
||||
triggerFields: [''],
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'phone',
|
||||
rules: 'required',
|
||||
label: '申请人手机号',
|
||||
},
|
||||
{
|
||||
component: 'ApiSelect',
|
||||
rules: 'required',
|
||||
fieldName: 'supplier',
|
||||
label: '供应商',
|
||||
componentProps: {
|
||||
api: async () => {
|
||||
const res = await suppliersList({ pageNum: 1, pageSize: 1000 });
|
||||
return res;
|
||||
},
|
||||
resultField: 'rows',
|
||||
labelField: 'suppliersName',
|
||||
valueField: 'id',
|
||||
},
|
||||
},
|
||||
{
|
||||
rules: 'required',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('wy_zccgfs'),
|
||||
},
|
||||
fieldName: 'buyType',
|
||||
label: '采购方式',
|
||||
},
|
||||
// {
|
||||
// label: '采购单价',
|
||||
// fieldName: 'buyUnitPrice',
|
||||
// component: 'Input',
|
||||
// },
|
||||
// {
|
||||
// label: '采购金额',
|
||||
// fieldName: 'buyAmount',
|
||||
// component: 'Input',
|
||||
// },
|
||||
// {
|
||||
// label: '状态',
|
||||
// fieldName: 'state',
|
||||
// component: 'Select',
|
||||
// componentProps: {
|
||||
// // 可选从DictEnum中获取 DictEnum.WY_ZCSQSHZT 便于维护
|
||||
// options: getDictOptions('wy_zcsqshzt'),
|
||||
// },
|
||||
// },
|
||||
{
|
||||
label: '备注',
|
||||
fieldName: 'remark',
|
||||
component: 'Input',
|
||||
},
|
||||
];
|
||||
|
||||
export const detailColumns: VxeGridProps['columns'] = [
|
||||
{
|
||||
label: '申请时间',
|
||||
fieldName: 'applicationTime',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
showTime: true,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
title: '序号',
|
||||
field: 'id',
|
||||
width: 80,
|
||||
slots: {
|
||||
default: ({ rowIndex }) => {
|
||||
return (rowIndex + 1).toString();
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '搜索值',
|
||||
fieldName: 'searchValue',
|
||||
component: 'Input',
|
||||
title: '资产名称',
|
||||
field: 'capitalName',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '规格',
|
||||
field: 'spec',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '购买数量',
|
||||
field: 'buyQuantity',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '采购单价',
|
||||
field: 'buyUnitPrice',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '金额小计',
|
||||
field: 'buyAmount',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
field: 'remark',
|
||||
width: 150,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -24,6 +24,7 @@ import type { ProcurementApplicationForm } from '#/api/property/assetManage/proc
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
|
||||
import procurementApplicationModal from './procurementApplication-modal.vue';
|
||||
import auditModal from './audit-modal.vue';
|
||||
import { columns, querySchema } from './data';
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
@@ -88,12 +89,29 @@ const [ProcurementApplicationModal, modalApi] = useVbenModal({
|
||||
connectedComponent: procurementApplicationModal,
|
||||
});
|
||||
|
||||
const [AuditModal, auditModalApi] = useVbenModal({
|
||||
connectedComponent: auditModal,
|
||||
});
|
||||
|
||||
function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleEdit(row: Required<ProcurementApplicationForm>) {
|
||||
async function handleAudit(row: Required<ProcurementApplicationForm>) {
|
||||
// 检查审核状态，如果已审核则不允许再次审核
|
||||
if (row.state === '1' || row.state === '2') {
|
||||
Modal.warning({
|
||||
title: '提示',
|
||||
content: '该申请已审核，不能重复审核',
|
||||
});
|
||||
return;
|
||||
}
|
||||
auditModalApi.setData({ id: row.id });
|
||||
auditModalApi.open();
|
||||
}
|
||||
|
||||
async function handleDetail(row: Required<ProcurementApplicationForm>) {
|
||||
modalApi.setData({ id: row.id });
|
||||
modalApi.open();
|
||||
}
|
||||
@@ -140,6 +158,13 @@ function handleDownloadExcel() {
|
||||
>
|
||||
{{ $t('pages.common.export') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
v-access:code="['domain:procurementApplication:add']"
|
||||
@click="handleAdd"
|
||||
>
|
||||
新增
|
||||
</a-button>
|
||||
<a-button
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
danger
|
||||
@@ -149,22 +174,23 @@ function handleDownloadExcel() {
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
v-access:code="['domain:procurementApplication:add']"
|
||||
@click="handleAdd"
|
||||
>
|
||||
{{ $t('pages.common.add') }}
|
||||
</a-button>
|
||||
</Space>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
v-access:code="['domain:procurementApplication:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
v-access:code="['domain:procurementApplication:audit']"
|
||||
:disabled="row.state === '1' || row.state === '2'"
|
||||
type="primary"
|
||||
@click.stop="handleAudit(row)"
|
||||
>
|
||||
{{ $t('pages.common.edit') }}
|
||||
审核
|
||||
</ghost-button>
|
||||
<ghost-button
|
||||
v-access:code="['domain:procurementApplication:detail']"
|
||||
@click.stop="handleDetail(row)"
|
||||
>
|
||||
详情
|
||||
</ghost-button>
|
||||
<Popconfirm
|
||||
:get-popup-container="getVxePopupContainer"
|
||||
@@ -183,6 +209,8 @@ function handleDownloadExcel() {
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<!-- Removed ProcurementApplicationModal @reload="tableApi.query()" -->
|
||||
<AuditModal @reload="tableApi.query()" />
|
||||
<ProcurementApplicationModal @reload="tableApi.query()" />
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,200 @@
|
||||
<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 { assetTypeList } from '#/api/property/assetManage/assetType';
|
||||
import { useUserStore } from '@vben/stores';
|
||||
const userStore = useUserStore();
|
||||
const emit = defineEmits<{ reload: [data: any]; editReload: [data: any] }>();
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const isAdd = ref(false);
|
||||
const isView = ref(false);
|
||||
const title = computed(() => {
|
||||
if (isAdd.value) {
|
||||
return $t('pages.common.add');
|
||||
} else if (isView.value) {
|
||||
return '查看';
|
||||
} else {
|
||||
return $t('pages.common.edit');
|
||||
}
|
||||
});
|
||||
|
||||
// 缓存清洁服务数据
|
||||
const detailIndex = ref<number>(); //传index对应详情的某条数据,对该条数据进行编辑修改
|
||||
const detailSchema = [
|
||||
{
|
||||
label: '资产名称',
|
||||
fieldName: 'capitalName',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '资产类型',
|
||||
fieldName: 'capitalType',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
api: async () => {
|
||||
const res = await assetTypeList({ pageNum: 1, pageSize: 1000 });
|
||||
return res;
|
||||
},
|
||||
resultField: 'rows',
|
||||
labelField: 'assetTypeName',
|
||||
valueField: 'id',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '规格',
|
||||
fieldName: 'spec',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '采购单价',
|
||||
fieldName: 'buyUnitPrice',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
onChange: async () => {
|
||||
const formValues = await formApi.getValues();
|
||||
const price = Number(formValues.buyUnitPrice) || 0;
|
||||
const count = Number(formValues.buyQuantity) || 0;
|
||||
const amount = price * count;
|
||||
await formApi.setValues({
|
||||
buyAmount: amount ? amount.toFixed(2) : '',
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '采购数量',
|
||||
fieldName: 'buyQuantity',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
onChange: async () => {
|
||||
const formValues = await formApi.getValues();
|
||||
const price = Number(formValues.buyUnitPrice) || 0;
|
||||
const count = Number(formValues.buyQuantity) || 0;
|
||||
const amount = price * count;
|
||||
await formApi.setValues({
|
||||
buyAmount: amount ? amount.toFixed(2) : '',
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '金额小计',
|
||||
fieldName: 'buyAmount',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
fieldName: 'remark',
|
||||
component: 'Textarea',
|
||||
},
|
||||
];
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
labelWidth: 120,
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
schema: detailSchema,
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
{
|
||||
initializedGetter: defaultFormValueGetter(formApi),
|
||||
currentGetter: defaultFormValueGetter(formApi),
|
||||
},
|
||||
);
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
onBeforeClose,
|
||||
onClosed: handleClosed,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
console.log(userStore.userInfo);
|
||||
|
||||
modalApi.modalLoading(true);
|
||||
const data = modalApi.getData();
|
||||
detailIndex.value = modalApi.getData().index;
|
||||
if (!data || Object.keys(data).length === 0) {
|
||||
//modalApi.getData()为空时表示添加
|
||||
isAdd.value = true;
|
||||
} else if (data.readonly) {
|
||||
isView.value = true;
|
||||
} else {
|
||||
//表示编辑
|
||||
isUpdate.value = true;
|
||||
}
|
||||
// TODO: 获取详情数据
|
||||
await formApi.setValues(modalApi.getData());
|
||||
await markInitialized();
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.lock(true);
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
let data = cloneDeep(await formApi.getValues());
|
||||
if (isUpdate.value) {
|
||||
data.index = detailIndex.value;
|
||||
emit('editReload', data);
|
||||
} else if (isAdd.value) {
|
||||
emit('reload', data);
|
||||
}
|
||||
handleClosed();
|
||||
await markInitialized();
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClosed() {
|
||||
isAdd.value = false;
|
||||
isView.value = false;
|
||||
isUpdate.value = false;
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm> </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) {
|
||||
/* 设置一个更深的颜色，可以自己调整 */
|
||||
color: rgba(0, 0, 0, 0.65) !important;
|
||||
/* 有些浏览器需要这个来覆盖默认颜色 */
|
||||
-webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,36 +1,44 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { procurementApplicationInfo } from '#/api/property/assetManage/procurementApplication';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
|
||||
import { modalSchema } from './data';
|
||||
import procurementDetailModal from './procurement-detail-modal.vue';
|
||||
import { detailColumns } from './data';
|
||||
import {
|
||||
procurementApplicationAdd,
|
||||
procurementApplicationInfo,
|
||||
procurementApplicationUpdate,
|
||||
} from '#/api/property/assetManage/procurementApplication';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
|
||||
import { modalSchema } from './data';
|
||||
import { useUserStore } from '@vben/stores';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const detailData = ref<any[]>([]); //采购资产详情
|
||||
const isUpdate = ref(false);
|
||||
const isDetail = ref(false);
|
||||
const title = computed(() => {
|
||||
if (isDetail.value) {
|
||||
return '采购申请详情';
|
||||
}
|
||||
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
formItemClass: 'col-span-1',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 80,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
disabled: computed(() => isDetail.value),
|
||||
},
|
||||
},
|
||||
schema: modalSchema(),
|
||||
@@ -47,7 +55,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[550px]',
|
||||
class: 'w-[70%]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
onClosed: handleClosed,
|
||||
@@ -57,21 +65,77 @@ const [BasicModal, modalApi] = useVbenModal({
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
// 只有在有id时才设置为详情模式（用于详情查看）
|
||||
isDetail.value = !!id;
|
||||
if (isUpdate.value && id) {
|
||||
const record = await procurementApplicationInfo(id);
|
||||
await formApi.setValues(record);
|
||||
|
||||
// 在详情模式下，设置资产详情数据到表格
|
||||
if (isDetail.value && record.capitalInfoVoList) {
|
||||
detailData.value = record.capitalInfoVoList;
|
||||
// 更新表格数据
|
||||
if (tableApi.grid && tableApi.grid.loadData) {
|
||||
tableApi.grid.loadData(detailData.value);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 新增模式
|
||||
isDetail.value = false; // 确保新增时不是详情模式
|
||||
await formApi.setValues({
|
||||
applicat: userStore.userInfo?.userId, // 存放ID
|
||||
applicatDisplay: userStore.userInfo?.realName, // 显示姓名
|
||||
});
|
||||
}
|
||||
await markInitialized();
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
const [ProcurementDetailModal, detailModalApi] = useVbenModal({
|
||||
connectedComponent: procurementDetailModal,
|
||||
});
|
||||
|
||||
const gridOptions: VxeGridProps = {
|
||||
checkboxConfig: {
|
||||
// 高亮
|
||||
highlight: true,
|
||||
// 翻页时保留选中状态
|
||||
reserve: true,
|
||||
// 点击行选中
|
||||
// trigger: 'row',
|
||||
},
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
columns: detailColumns,
|
||||
data: detailData.value,
|
||||
// height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'domain-procurementApplication-index',
|
||||
toolbarConfig: {
|
||||
// 隐藏"刷新/重置"按钮（对应 redo）
|
||||
refresh: false,
|
||||
zoom: false, // 显示全屏
|
||||
custom: false, // 隐藏列设置
|
||||
},
|
||||
};
|
||||
|
||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
gridOptions,
|
||||
});
|
||||
async function handleConfirm() {
|
||||
// 如果是详情模式，直接关闭弹窗
|
||||
if (isDetail.value) {
|
||||
modalApi.close();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
modalApi.lock(true);
|
||||
const { valid } = await formApi.validate();
|
||||
@@ -82,7 +146,11 @@ async function handleConfirm() {
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
await (isUpdate.value
|
||||
? procurementApplicationUpdate(data)
|
||||
: procurementApplicationAdd(data));
|
||||
: procurementApplicationAdd({
|
||||
...data,
|
||||
capitalInfoBolist: detailData.value,
|
||||
}));
|
||||
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
@@ -97,10 +165,28 @@ async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
}
|
||||
function handleDetailReload(data: any) {
|
||||
detailData.value.push(data);
|
||||
}
|
||||
function handleEditDetailReload() {}
|
||||
//添加物资
|
||||
function handleAddDetail() {
|
||||
detailModalApi.setData({});
|
||||
detailModalApi.open();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm />
|
||||
<div class="flex items-center justify-between" v-if="!isDetail">
|
||||
<div>采购物资：</div>
|
||||
<Button type="primary" @click="handleAddDetail">选择物资</Button>
|
||||
</div>
|
||||
<BasicTable />
|
||||
<ProcurementDetailModal
|
||||
@reload="handleDetailReload"
|
||||
@editReload="handleEditDetailReload"
|
||||
/>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
<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 { getMachineTypeTree } from '#/api/property/machineType';
|
||||
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);
|
||||
function convertTreeLabel(list: any) {
|
||||
return list.map((item: any) => ({
|
||||
...item,
|
||||
label: item.machineTypeName,
|
||||
children: item.children ? convertTreeLabel(item.children) : [],
|
||||
}));
|
||||
}
|
||||
async function loadTree() {
|
||||
showTreeSkeleton.value = true;
|
||||
searchValue.value = '';
|
||||
// selectDeptId.value = []; // 移除这行，刷新树时不清空选中
|
||||
const ret = await getMachineTypeTree();
|
||||
deptTreeArray.value = convertTreeLabel(ret);
|
||||
showTreeSkeleton.value = false;
|
||||
}
|
||||
|
||||
async function handleReload() {
|
||||
await loadTree();
|
||||
emit('reload');
|
||||
}
|
||||
defineExpose({
|
||||
handleReload,
|
||||
});
|
||||
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-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>
|
||||
</div>
|
||||
</Skeleton>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,216 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import { getDictOptions } from '#/utils/dict';
|
||||
import { renderDict } from '#/utils/render';
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'machineName',
|
||||
label: '设备名称',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'machineCode',
|
||||
label: '设备编码',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('wy_sbsyzt'),
|
||||
},
|
||||
fieldName: 'state',
|
||||
label: '使用状态',
|
||||
},
|
||||
];
|
||||
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '设备名称',
|
||||
field: 'machineName',
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
title: '设备编码',
|
||||
field: 'machineCode',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '设备品牌',
|
||||
field: 'machineBrand',
|
||||
width: 100,
|
||||
},
|
||||
// {
|
||||
// title: '设备类型',
|
||||
// field: 'machineTypeId',
|
||||
// width:100
|
||||
// },
|
||||
// {
|
||||
// title: '位置详情',
|
||||
// field: 'locationId',
|
||||
// width:100
|
||||
// },
|
||||
{
|
||||
title: '采购价格',
|
||||
field: 'purchasePrice',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '启用时间',
|
||||
field: 'activationTime',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '保修截至时间',
|
||||
field: 'deadline',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '使用年限',
|
||||
field: 'serviceLife',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '保修周期',
|
||||
field: 'maintenanceCycle',
|
||||
width: 100,
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return renderDict(row.maintenanceCycle, 'wy_sbbxzq');
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '使用状态',
|
||||
field: 'state',
|
||||
width: 100,
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return renderDict(row.state, 'wy_sbsyzt');
|
||||
},
|
||||
},
|
||||
},
|
||||
// {
|
||||
// title: '责任人',
|
||||
// field: 'personId',
|
||||
// width:100
|
||||
// },
|
||||
{
|
||||
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: 'machineName',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
formItemClass: 'col-span-2',
|
||||
},
|
||||
{
|
||||
label: '设备编码',
|
||||
fieldName: 'machineCode',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '设备品牌',
|
||||
fieldName: 'machineBrand',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '设备类型',
|
||||
fieldName: 'machineTypeId',
|
||||
component: 'TreeSelect',
|
||||
rules: 'selectRequired',
|
||||
formItemClass: 'col-span-2',
|
||||
},
|
||||
{
|
||||
label: '位置详情',
|
||||
fieldName: 'locationId',
|
||||
component: 'ApiSelect',
|
||||
rules: 'selectRequired',
|
||||
formItemClass: 'col-span-2',
|
||||
},
|
||||
{
|
||||
label: '采购价格',
|
||||
fieldName: 'purchasePrice',
|
||||
component: 'InputNumber',
|
||||
componentProps: {
|
||||
min: 0,
|
||||
precision: 2,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '启用时间',
|
||||
fieldName: 'activationTime',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '保修截至时间',
|
||||
fieldName: 'deadline',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '使用年限',
|
||||
fieldName: 'serviceLife',
|
||||
component: 'InputNumber',
|
||||
componentProps: {
|
||||
min: 1,
|
||||
precision: 0,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '保修周期',
|
||||
fieldName: 'maintenanceCycle',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('wy_sbbxzq'),
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
label: '使用状态',
|
||||
fieldName: 'state',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('wy_sbsyzt'),
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
label: '责任人',
|
||||
fieldName: 'personId',
|
||||
component: 'ApiSelect',
|
||||
rules: 'selectRequired',
|
||||
formItemClass: 'col-span-2',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,214 @@
|
||||
<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 {
|
||||
machineExport,
|
||||
machineList,
|
||||
machineRemove,
|
||||
} from '#/api/property/equipmentManagement/machine';
|
||||
import type { MachineForm } from '#/api/property/equipmentManagement/machine/model';
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
|
||||
import machineModal from './machine-modal.vue';
|
||||
import { columns, querySchema } from './data';
|
||||
import MachineTypeTree from '../components/machine-type-tree.vue';
|
||||
import machineDetail from './machine-detail.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const selectTypeId = ref([]);
|
||||
|
||||
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',
|
||||
handleReset: async () => {
|
||||
selectTypeId.value = [];
|
||||
const { formApi, reload } = tableApi;
|
||||
await formApi.resetForm();
|
||||
const formValues = formApi.form.values;
|
||||
formApi.setLatestSubmissionValues(formValues);
|
||||
await reload(formValues);
|
||||
},
|
||||
};
|
||||
|
||||
const gridOptions: VxeGridProps = {
|
||||
checkboxConfig: {
|
||||
// 高亮
|
||||
highlight: true,
|
||||
// 翻页时保留选中状态
|
||||
reserve: true,
|
||||
// 点击行选中
|
||||
// trigger: 'row',
|
||||
},
|
||||
columns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues = {}) => {
|
||||
if (selectTypeId.value && selectTypeId.value.length) {
|
||||
formValues.machineTypeId = selectTypeId.value[0];
|
||||
} else {
|
||||
formValues.machineTypeId = [];
|
||||
}
|
||||
return await machineList({
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'property-machine-index',
|
||||
};
|
||||
|
||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
});
|
||||
|
||||
const [MachineModal, modalApi] = useVbenModal({
|
||||
connectedComponent: machineModal,
|
||||
});
|
||||
|
||||
const [MachineDetail, detailApi] = useVbenModal({
|
||||
connectedComponent: machineDetail,
|
||||
});
|
||||
|
||||
function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleEdit(row: Required<MachineForm>) {
|
||||
modalApi.setData({ id: row.id });
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleInfo(row: Required<MachineForm>) {
|
||||
detailApi.setData({ id: row.id });
|
||||
detailApi.open();
|
||||
}
|
||||
|
||||
async function handleDelete(row: Required<MachineForm>) {
|
||||
await machineRemove(row.id);
|
||||
await tableApi.query();
|
||||
}
|
||||
|
||||
function handleMultiDelete() {
|
||||
const rows = tableApi.grid.getCheckboxRecords();
|
||||
const ids = rows.map((row: Required<MachineForm>) => row.id);
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
okType: 'danger',
|
||||
content: `确认删除选中的${ids.length}条记录吗？`,
|
||||
onOk: async () => {
|
||||
await machineRemove(ids);
|
||||
await tableApi.query();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleDownloadExcel() {
|
||||
commonDownloadExcel(
|
||||
machineExport,
|
||||
'设备列表数据',
|
||||
tableApi.formApi.form.values,
|
||||
{
|
||||
fieldMappingTime: formOptions.fieldMappingTime,
|
||||
},
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page :auto-content-height="true">
|
||||
<div class="flex h-full gap-[8px]">
|
||||
<MachineTypeTree
|
||||
v-model:select-dept-id="selectTypeId"
|
||||
class="w-[260px]"
|
||||
@reload="() => tableApi.reload()"
|
||||
@select="() => tableApi.reload()"
|
||||
/>
|
||||
<BasicTable class="flex-1 overflow-hidden" table-title="设备列表列表">
|
||||
<template #toolbar-tools>
|
||||
<Space>
|
||||
<a-button
|
||||
v-access:code="['property:machine:export']"
|
||||
@click="handleDownloadExcel"
|
||||
>
|
||||
{{ $t('pages.common.export') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
danger
|
||||
type="primary"
|
||||
v-access:code="['property:machine:remove']"
|
||||
@click="handleMultiDelete"
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
v-access:code="['property:machine:add']"
|
||||
@click="handleAdd"
|
||||
>
|
||||
{{ $t('pages.common.add') }}
|
||||
</a-button>
|
||||
</Space>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
v-access:code="['property:machine:info']"
|
||||
@click.stop="handleInfo(row)"
|
||||
>
|
||||
{{ $t('pages.common.info') }}
|
||||
</ghost-button>
|
||||
<ghost-button
|
||||
v-access:code="['property:machine:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
>
|
||||
{{ $t('pages.common.edit') }}
|
||||
</ghost-button>
|
||||
<Popconfirm
|
||||
:get-popup-container="getVxePopupContainer"
|
||||
placement="left"
|
||||
title="确认删除？"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<ghost-button
|
||||
danger
|
||||
v-access:code="['property:machine:remove']"
|
||||
@click.stop=""
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</ghost-button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
<MachineModal @reload="tableApi.query()" />
|
||||
<MachineDetail />
|
||||
</Page>
|
||||
</template>
|
||||
@@ -0,0 +1,94 @@
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue';
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { Descriptions, DescriptionsItem } 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';
|
||||
dayjs.extend(duration);
|
||||
dayjs.extend(relativeTime);
|
||||
import { CheckboxGroup } from 'ant-design-vue';
|
||||
import { getDictOptions } from '#/utils/dict';
|
||||
import { machineInfo } from '#/api/property/equipmentManagement/machine';
|
||||
import type { MachineVO } from '#/api/property/equipmentManagement/machine/model';
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
onOpenChange: handleOpenChange,
|
||||
onClosed() {
|
||||
machineDetail.value = null;
|
||||
},
|
||||
});
|
||||
|
||||
const machineDetail = shallowRef<null | MachineVO>(null);
|
||||
|
||||
async function handleOpenChange(open: boolean) {
|
||||
if (!open) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
const { id } = modalApi.getData() as { id: number | string };
|
||||
machineDetail.value = await machineInfo(id);
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal
|
||||
:footer="false"
|
||||
:fullscreen-button="false"
|
||||
title="设备详情"
|
||||
class="w-[70%]"
|
||||
>
|
||||
<Descriptions
|
||||
v-if="machineDetail"
|
||||
size="small"
|
||||
:column="2"
|
||||
bordered
|
||||
:labelStyle="{ width: '120px' }"
|
||||
>
|
||||
<DescriptionsItem label="设备名称">
|
||||
{{ machineDetail.machineName }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="设备编码">
|
||||
{{ machineDetail.machineCode }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="设备品牌">
|
||||
{{ machineDetail.machineBrand }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="设备类型">
|
||||
{{ machineDetail.machineTypeId }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="位置详情">
|
||||
{{ machineDetail.locationId }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="采购价格">
|
||||
{{ machineDetail.purchasePrice }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="启用时间">
|
||||
{{ machineDetail.activationTime }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="保修截至时间">
|
||||
{{ machineDetail.deadline }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="使用年限(年)">
|
||||
{{ machineDetail.serviceLife }}
|
||||
</DescriptionsItem>
|
||||
|
||||
<DescriptionsItem
|
||||
label="保修周期"
|
||||
v-if="machineDetail.maintenanceCycle != null"
|
||||
>
|
||||
<component
|
||||
:is="renderDict(machineDetail.maintenanceCycle, 'wy_sbbxzq')"
|
||||
/>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="使用状态" v-if="machineDetail.state != null">
|
||||
<component :is="renderDict(machineDetail.state, 'wy_sbsyzt')" />
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="责任人">
|
||||
{{ machineDetail.personId }}
|
||||
</DescriptionsItem>
|
||||
</Descriptions>
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -0,0 +1,201 @@
|
||||
<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 {
|
||||
machineAdd,
|
||||
machineInfo,
|
||||
machineUpdate,
|
||||
} from '#/api/property/equipmentManagement/machine';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
|
||||
import { modalSchema } from './data';
|
||||
import { personList } from '#/api/property/resident/person';
|
||||
import { renderDictValue } from '#/utils/render';
|
||||
import { getMachineTypeTree } from '#/api/property/machineType';
|
||||
import { deviceLocationList } from '#/api/property/equipmentManagement/deviceLocation';
|
||||
|
||||
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: 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);
|
||||
await queryPersonData();
|
||||
await setupTypeSelect();
|
||||
await queryLocationData();
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await machineInfo(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 ? machineUpdate(data) : machineAdd(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 +
|
||||
'-' +
|
||||
user.unitName,
|
||||
value: user.id,
|
||||
}));
|
||||
formApi.updateSchema([
|
||||
{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
showSearch: true,
|
||||
optionFilterProp: 'label',
|
||||
optionLabelProp: 'label',
|
||||
}),
|
||||
fieldName: 'personId',
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
*初始化设别类型数据
|
||||
*/
|
||||
async function setupTypeSelect() {
|
||||
const typeList = await getMachineTypeTree();
|
||||
formApi.updateSchema([
|
||||
{
|
||||
componentProps: () => ({
|
||||
class: 'w-full',
|
||||
fieldNames: {
|
||||
key: 'id',
|
||||
label: 'machineTypeName',
|
||||
value: 'id',
|
||||
children: 'children',
|
||||
},
|
||||
placeholder: '请选择',
|
||||
showSearch: true,
|
||||
treeData: typeList,
|
||||
treeDefaultExpandAll: true,
|
||||
treeLine: { showLeafIcon: false },
|
||||
// 筛选的字段
|
||||
treeNodeFilterProp: 'label',
|
||||
// 选中后显示在输入框的值
|
||||
treeNodeLabelProp: 'machineTypeName',
|
||||
}),
|
||||
fieldName: 'machineTypeId',
|
||||
},
|
||||
]);
|
||||
}
|
||||
/**
|
||||
* 查询设备位置数据
|
||||
*/
|
||||
async function queryLocationData() {
|
||||
let params = {
|
||||
pageSize: 1000,
|
||||
pageNum: 1,
|
||||
};
|
||||
const res = await deviceLocationList(params);
|
||||
const options = res.rows.map((item) => ({
|
||||
label:
|
||||
item.locationName +
|
||||
'-' +
|
||||
renderDictValue(item.locationType, 'pro_location_type'),
|
||||
value: item.id,
|
||||
}));
|
||||
formApi.updateSchema([
|
||||
{
|
||||
componentProps: () => ({
|
||||
options: options,
|
||||
showSearch: true,
|
||||
optionFilterProp: 'label',
|
||||
optionLabelProp: 'label',
|
||||
}),
|
||||
fieldName: 'locationId',
|
||||
},
|
||||
]);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm />
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -0,0 +1,94 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import { getDictOptions } from '#/utils/dict';
|
||||
import { renderDict } from '#/utils/render';
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'locationName',
|
||||
label: '位置名称',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('pro_location_type'),
|
||||
},
|
||||
fieldName: 'locationType',
|
||||
label: '位置类型',
|
||||
},
|
||||
];
|
||||
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// export const columns: () => VxeGridProps['columns'] = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '位置编码',
|
||||
field: 'locationCode',
|
||||
},
|
||||
{
|
||||
title: '位置名称',
|
||||
field: 'locationName',
|
||||
},
|
||||
|
||||
{
|
||||
title: '位置类型',
|
||||
field: 'locationType',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
return renderDict(row.locationType, 'pro_location_type');
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
field: 'remark',
|
||||
},
|
||||
{
|
||||
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: 'locationName',
|
||||
// component: 'Input',
|
||||
// rules: 'required',
|
||||
// },
|
||||
// {
|
||||
// label: '位置类型',
|
||||
// fieldName: 'locationType',
|
||||
// component: 'Select',
|
||||
// componentProps: {
|
||||
// options: getDictOptions('pro_location_type'),
|
||||
// },
|
||||
// rules: 'selectRequired',
|
||||
// },
|
||||
// {
|
||||
// component: 'TreeSelect',
|
||||
// fieldName: 'locationObject',
|
||||
// defaultValue: undefined,
|
||||
// label: '位置对象',
|
||||
// rules: 'selectRequired',
|
||||
// },
|
||||
// {
|
||||
// label: '备注',
|
||||
// fieldName: 'remark',
|
||||
// component: 'Textarea',
|
||||
// },
|
||||
// ];
|
||||
@@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import type { DeviceLocationVO } from '#/api/property/equipmentManagement/deviceLocation/model';
|
||||
import { shallowRef } from 'vue';
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { Descriptions, DescriptionsItem } from 'ant-design-vue';
|
||||
import { deviceLocationInfo } from '#/api/property/equipmentManagement/deviceLocation';
|
||||
import { renderDict } from '#/utils/render';
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
onOpenChange: handleOpenChange,
|
||||
onClosed() {
|
||||
deviceLocationDetail.value = null;
|
||||
},
|
||||
});
|
||||
|
||||
const deviceLocationDetail = shallowRef<null | DeviceLocationVO>(null);
|
||||
|
||||
async function handleOpenChange(open: boolean) {
|
||||
if (!open) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
const { id } = modalApi.getData() as { id: number | string };
|
||||
const response = await deviceLocationInfo(id);
|
||||
deviceLocationDetail.value = response;
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal
|
||||
:footer="false"
|
||||
:fullscreen-button="false"
|
||||
title="查看收费"
|
||||
class="w-[70%]"
|
||||
>
|
||||
<Descriptions
|
||||
v-if="deviceLocationDetail"
|
||||
size="small"
|
||||
:column="2"
|
||||
bordered
|
||||
:labelStyle="{ width: '100px' }"
|
||||
>
|
||||
<DescriptionsItem label="位置编码">
|
||||
{{ deviceLocationDetail.locationCode }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="位置名称">
|
||||
{{ deviceLocationDetail.locationName }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem
|
||||
label="位置类型"
|
||||
v-if="deviceLocationDetail.locationType != null"
|
||||
>
|
||||
<component
|
||||
:is="
|
||||
renderDict(deviceLocationDetail.locationType, 'pro_location_type')
|
||||
"
|
||||
/>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="位置对象">
|
||||
{{ deviceLocationDetail.locationObjName }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="备注">
|
||||
{{ deviceLocationDetail.remark }}
|
||||
</DescriptionsItem>
|
||||
</Descriptions>
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -0,0 +1,186 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep, handleNode } from '@vben/utils';
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import {
|
||||
deviceLocationAdd,
|
||||
deviceLocationInfo,
|
||||
deviceLocationUpdate,
|
||||
} from '#/api/property/equipmentManagement/deviceLocation';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
// import { modalSchema } from './data';
|
||||
import { communityTree } from '#/api/property/community';
|
||||
import { getDictOptions } from '#/utils/dict';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
const isUpdate = ref(false);
|
||||
|
||||
const title = computed(() => {
|
||||
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
||||
});
|
||||
|
||||
const modalSchema = [
|
||||
{
|
||||
label: '主键',
|
||||
fieldName: 'id',
|
||||
component: 'Input',
|
||||
dependencies: {
|
||||
show: () => false,
|
||||
triggerFields: [''],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '位置名称',
|
||||
fieldName: 'locationName',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '位置类型',
|
||||
fieldName: 'locationType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: getDictOptions('pro_location_type'),
|
||||
onChange: async (value: string) => {
|
||||
if (value) {
|
||||
await setupCommunitySelect(value);
|
||||
await formApi.setFieldValue('locationObjId', null);
|
||||
}
|
||||
},
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
component: 'TreeSelect',
|
||||
fieldName: 'locationObjId',
|
||||
defaultValue: undefined,
|
||||
label: '位置对象',
|
||||
dependencies: {
|
||||
show: (formValue) => formValue.locationType !== undefined,
|
||||
triggerFields: ['locationType'],
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
fieldName: 'remark',
|
||||
component: 'Textarea',
|
||||
},
|
||||
];
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 80,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
schema: modalSchema,
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
{
|
||||
initializedGetter: defaultFormValueGetter(formApi),
|
||||
currentGetter: defaultFormValueGetter(formApi),
|
||||
},
|
||||
);
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[550px]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
onClosed: handleClosed,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
if (isUpdate.value && id) {
|
||||
const record = await deviceLocationInfo(id);
|
||||
await setupCommunitySelect(record.locationType);
|
||||
record.locationType = record.locationType?.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;
|
||||
}
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
await (isUpdate.value
|
||||
? deviceLocationUpdate(data)
|
||||
: deviceLocationAdd(data));
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
}
|
||||
|
||||
async function setupCommunitySelect(value: any) {
|
||||
const areaList = await communityTree(Number(value) + 1);
|
||||
const splitStr = '/';
|
||||
handleNode(areaList, 'label', splitStr, function (node: any) {
|
||||
if (node.level != Number(value) + 1) {
|
||||
node.disabled = true;
|
||||
}
|
||||
});
|
||||
formApi.updateSchema([
|
||||
{
|
||||
componentProps: () => ({
|
||||
class: 'w-full',
|
||||
fieldNames: {
|
||||
key: 'id',
|
||||
label: 'label',
|
||||
value: 'code',
|
||||
children: 'children',
|
||||
},
|
||||
placeholder: '请选择',
|
||||
showSearch: true,
|
||||
treeData: areaList,
|
||||
treeDefaultExpandAll: true,
|
||||
treeLine: { showLeafIcon: false },
|
||||
// 筛选的字段
|
||||
treeNodeFilterProp: 'label',
|
||||
// 选中后显示在输入框的值
|
||||
treeNodeLabelProp: 'fullName',
|
||||
}),
|
||||
fieldName: 'locationObjId',
|
||||
},
|
||||
]);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm />
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -0,0 +1,163 @@
|
||||
<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 {
|
||||
deviceLocationList,
|
||||
deviceLocationRemove,
|
||||
} from '#/api/property/equipmentManagement/deviceLocation';
|
||||
import type { DeviceLocationForm } from '#/api/property/equipmentManagement/deviceLocation/model';
|
||||
import deviceLocationModal from './deviceLocation-modal.vue';
|
||||
import deviceLocationDetail from './deviceLocation-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 deviceLocationList({
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'property-deviceLocation-index',
|
||||
};
|
||||
|
||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
});
|
||||
|
||||
const [DeviceLocationModal, modalApi] = useVbenModal({
|
||||
connectedComponent: deviceLocationModal,
|
||||
});
|
||||
|
||||
function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleEdit(row: Required<DeviceLocationForm>) {
|
||||
modalApi.setData({ id: row.id });
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleDelete(row: Required<DeviceLocationForm>) {
|
||||
await deviceLocationRemove(row.id);
|
||||
await tableApi.query();
|
||||
}
|
||||
|
||||
function handleMultiDelete() {
|
||||
const rows = tableApi.grid.getCheckboxRecords();
|
||||
const ids = rows.map((row: Required<DeviceLocationForm>) => row.id);
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
okType: 'danger',
|
||||
content: `确认删除选中的${ids.length}条记录吗？`,
|
||||
onOk: async () => {
|
||||
await deviceLocationRemove(ids);
|
||||
await tableApi.query();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const [deviceLocationDetailModal, deviceLocationDetailApi] = useVbenModal({
|
||||
connectedComponent: deviceLocationDetail,
|
||||
});
|
||||
|
||||
async function handleInfo(row: Required<DeviceLocationForm>) {
|
||||
deviceLocationDetailApi.setData({ id: row.id });
|
||||
deviceLocationDetailApi.open();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page :auto-content-height="true">
|
||||
<BasicTable table-title="设备位置列表">
|
||||
<template #toolbar-tools>
|
||||
<Space>
|
||||
<a-button
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
danger
|
||||
type="primary"
|
||||
v-access:code="['property:deviceLocation:remove']"
|
||||
@click="handleMultiDelete"
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
v-access:code="['property:deviceLocation: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="['property:deviceLocation:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
>
|
||||
{{ $t('pages.common.edit') }}
|
||||
</ghost-button>
|
||||
<Popconfirm
|
||||
:get-popup-container="getVxePopupContainer"
|
||||
placement="left"
|
||||
title="确认删除？"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<ghost-button
|
||||
danger
|
||||
v-access:code="['property:deviceLocation:remove']"
|
||||
@click.stop=""
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</ghost-button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<DeviceLocationModal @reload="tableApi.query()" />
|
||||
<deviceLocationDetailModal />
|
||||
</Page>
|
||||
</template>
|
||||
@@ -0,0 +1,125 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
import { getDictOptions } from '#/utils/dict';
|
||||
import { renderDict } from '#/utils/render';
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'machineTypeName',
|
||||
label: '类型名称',
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'machineTypeCode',
|
||||
label: '类型编号',
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
// 可选从DictEnum中获取 DictEnum.WY_KG 便于维护
|
||||
options: getDictOptions('wy_kg'),
|
||||
},
|
||||
fieldName: 'isEnable',
|
||||
label: '是否启用',
|
||||
labelWidth: 100,
|
||||
},
|
||||
];
|
||||
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// export const columns: () => VxeGridProps['columns'] = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
{
|
||||
title: '序号',
|
||||
field: 'id',
|
||||
width: 60,
|
||||
slots: {
|
||||
default: ({ rowIndex }) => {
|
||||
return (rowIndex + 1).toString();
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '类型名称',
|
||||
field: 'machineTypeName',
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
title: '类型编号',
|
||||
field: 'machineTypeCode',
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
title: '是否启用',
|
||||
field: 'isEnable',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
// 可选从DictEnum中获取 DictEnum.WY_KG 便于维护
|
||||
return renderDict(row.isEnable, 'wy_kg');
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
field: 'remark',
|
||||
},
|
||||
{
|
||||
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: 'machineTypeName',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '类型编号',
|
||||
fieldName: 'machineTypeCode',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '上级类型',
|
||||
fieldName: 'parentTypeId',
|
||||
component: 'TreeSelect',
|
||||
defaultValue: undefined,
|
||||
labelWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '是否启用',
|
||||
fieldName: 'isEnable',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
// 可选从DictEnum中获取 DictEnum.WY_KG 便于维护
|
||||
options: getDictOptions('wy_kg'),
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
fieldName: 'remark',
|
||||
component: 'Input',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,221 @@
|
||||
<script setup lang="ts">
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
|
||||
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
||||
import { getVxePopupContainer } from '@vben/utils';
|
||||
|
||||
import { Modal, Popconfirm, Space } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import MachineTypeTree from '../components/machine-type-tree.vue';
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
vxeCheckboxChecked,
|
||||
type VxeGridProps,
|
||||
} from '#/adapter/vxe-table';
|
||||
|
||||
import {
|
||||
machineTypeExport,
|
||||
machineTypeList,
|
||||
machineTypeInfo,
|
||||
getMachineTypeTree,
|
||||
machineTypeRemove,
|
||||
} from '#/api/property/machineType';
|
||||
import type { MachineTypeForm } from '#/api/property/machineType/model';
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
|
||||
import machineTypeModal from './machineType-modal.vue';
|
||||
import { columns } from './data';
|
||||
const selectDeptId = ref<string[]>([]);
|
||||
|
||||
// 新增：详情数据
|
||||
const detailData = ref<any>(null);
|
||||
interface MachineTypeTree {
|
||||
id: number;
|
||||
/**
|
||||
* antd组件必须要这个属性 实际是没有这个属性的
|
||||
*/
|
||||
key: string;
|
||||
parentId: number;
|
||||
label: string;
|
||||
weight: number;
|
||||
children?: MachineTypeTree[];
|
||||
}
|
||||
interface MachineTypeTreeData {
|
||||
id: number;
|
||||
label: string;
|
||||
children?: MachineTypeTreeData[];
|
||||
}
|
||||
async function loadDetail() {
|
||||
// 这里假设 selectDeptId 选中后加载详情，否则加载第一个
|
||||
let id: any = selectDeptId.value[0];
|
||||
if (!id) {
|
||||
// 可选：默认加载第一个类型详情
|
||||
const res: MachineTypeTree[] = await getMachineTypeTree();
|
||||
if (res.length > 0 && res[0]) {
|
||||
id = res[0].id;
|
||||
}
|
||||
}
|
||||
if (id) {
|
||||
// 获取详情接口
|
||||
const { machineTypeInfo } = await import('#/api/property/machineType');
|
||||
detailData.value = await machineTypeInfo(id);
|
||||
} else {
|
||||
detailData.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadDetail);
|
||||
|
||||
watch(selectDeptId, loadDetail);
|
||||
|
||||
const treeRef = ref();
|
||||
|
||||
function reloadTree() {
|
||||
treeRef.value?.handleReload?.();
|
||||
}
|
||||
|
||||
const [MachineTypeModal, modalApi] = useVbenModal({
|
||||
connectedComponent: machineTypeModal,
|
||||
});
|
||||
|
||||
function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleEdit() {
|
||||
if (detailData.value && detailData.value.id) {
|
||||
modalApi.setData({ id: detailData.value.id });
|
||||
modalApi.open();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (detailData.value && detailData.value.id) {
|
||||
await machineTypeRemove(detailData.value.id);
|
||||
reloadTree();
|
||||
await loadDetail();
|
||||
}
|
||||
}
|
||||
// async function handleDelete() {
|
||||
// if (detailData.value && detailData.value.id) {
|
||||
// const currentId = detailData.value.id;
|
||||
// // 1. 获取完整树
|
||||
// const tree = await getMachineTypeTree();
|
||||
|
||||
// // 2. 递归查找当前节点的父节点和同级节点
|
||||
// function findParentAndSiblings(list:any, targetId:any, parent:any = null) {
|
||||
// for (const node of list) {
|
||||
// if (node.id === targetId) {
|
||||
// return { parent, siblings: list };
|
||||
// }
|
||||
// if (node.children && node.children.length) {
|
||||
// const res:any = findParentAndSiblings(node.children, targetId, node);
|
||||
// if (res) return res;
|
||||
// }
|
||||
// }
|
||||
// return null;
|
||||
// }
|
||||
// const found = findParentAndSiblings(tree, currentId);
|
||||
|
||||
// // 3. 删除
|
||||
// await machineTypeRemove(currentId);
|
||||
|
||||
// // 4. 选中逻辑
|
||||
// let nextId = null;
|
||||
// if (found) {
|
||||
// // 同级第一个（排除自己）
|
||||
// const sameLevel = found.siblings.filter((n:any) => n.id !== currentId);
|
||||
// if (sameLevel.length > 0) {
|
||||
// nextId = sameLevel[0].id;
|
||||
// } else if (found.parent) {
|
||||
// nextId = found.parent.id;
|
||||
// }
|
||||
// }
|
||||
// // 5. 设置选中
|
||||
// if (nextId) {
|
||||
// selectDeptId.value = [nextId];
|
||||
// } else {
|
||||
// selectDeptId.value = [];
|
||||
// }
|
||||
|
||||
// // 6. 刷新树和详情
|
||||
// reloadTree();
|
||||
// await loadDetail();
|
||||
// }
|
||||
// }
|
||||
|
||||
function handleDownloadExcel() {
|
||||
commonDownloadExcel(
|
||||
machineTypeExport,
|
||||
'设备类型数据',
|
||||
{},
|
||||
{
|
||||
fieldMappingTime: [],
|
||||
},
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page :auto-content-height="true">
|
||||
<div class="flex h-full gap-[8px]">
|
||||
<MachineTypeTree
|
||||
ref="treeRef"
|
||||
v-model:select-dept-id="selectDeptId"
|
||||
class="w-[260px]"
|
||||
@reload="loadDetail"
|
||||
@select="loadDetail"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<!-- 顶部操作按钮 -->
|
||||
<div class="mb-4 flex gap-2">
|
||||
<a-button
|
||||
danger
|
||||
type="primary"
|
||||
v-access:code="['property:machineType:remove']"
|
||||
@click="handleDelete"
|
||||
:disabled="!detailData || !detailData.id"
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
v-access:code="['property:machineType:add']"
|
||||
@click="handleAdd"
|
||||
>
|
||||
{{ $t('pages.common.add') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
v-if="detailData && detailData.id"
|
||||
type="default"
|
||||
v-access:code="['property:machineType:edit']"
|
||||
@click="handleEdit"
|
||||
>
|
||||
{{ $t('pages.common.edit') }}
|
||||
</a-button>
|
||||
</div>
|
||||
<!-- 详情展示 -->
|
||||
<a-card v-if="detailData" :title="detailData.machineTypeName">
|
||||
<p><b>类型名称：</b>{{ detailData.machineTypeName }}</p>
|
||||
<p><b>类型编号：</b>{{ detailData.machineTypeCode }}</p>
|
||||
<p>
|
||||
<b>是否启用：</b>{{ detailData.isEnable == '1' ? '启用' : '禁用' }}
|
||||
</p>
|
||||
<p><b>备注：</b>{{ detailData.remark || '-' }}</p>
|
||||
</a-card>
|
||||
<a-empty v-else description="暂无详情" />
|
||||
<MachineTypeModal
|
||||
@reload="
|
||||
() => {
|
||||
reloadTree();
|
||||
loadDetail();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
@@ -0,0 +1,139 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep, handleNode, getPopupContainer } from '@vben/utils';
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import {
|
||||
machineTypeAdd,
|
||||
machineTypeInfo,
|
||||
machineTypeUpdate,
|
||||
} from '#/api/property/machineType';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
import { getMachineTypeTree } from '#/api/property/machineType';
|
||||
|
||||
import { modalSchema } from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 80,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
schema: modalSchema(),
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
{
|
||||
initializedGetter: defaultFormValueGetter(formApi),
|
||||
currentGetter: defaultFormValueGetter(formApi),
|
||||
},
|
||||
);
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[550px]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
onClosed: handleClosed,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
setupCommunitySelect();
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await machineTypeInfo(id);
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
await markInitialized();
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
},
|
||||
});
|
||||
async function setupCommunitySelect() {
|
||||
const areaList = await getMachineTypeTree();
|
||||
// 选中后显示在输入框的值 即父节点 / 子节点
|
||||
// addFullName(areaList, 'areaName', ' / ');
|
||||
const splitStr = '/';
|
||||
handleNode(areaList, 'machineTypeName', splitStr, function (node: any) {
|
||||
// if (node.level != 5) {
|
||||
// node.disabled = true;
|
||||
// }
|
||||
});
|
||||
formApi.updateSchema([
|
||||
{
|
||||
componentProps: () => ({
|
||||
class: 'w-full',
|
||||
fieldNames: {
|
||||
key: 'id',
|
||||
label: 'machineTypeName',
|
||||
value: 'id',
|
||||
children: 'children',
|
||||
},
|
||||
getPopupContainer,
|
||||
placeholder: '请选择设备类型',
|
||||
showSearch: true,
|
||||
treeData: areaList,
|
||||
treeDefaultExpandAll: true,
|
||||
treeLine: { showLeafIcon: false },
|
||||
// 筛选的字段
|
||||
treeNodeFilterProp: 'machineTypeName',
|
||||
// 选中后显示在输入框的值
|
||||
treeNodeLabelProp: 'fullName',
|
||||
}),
|
||||
fieldName: 'parentTypeId',
|
||||
},
|
||||
]);
|
||||
}
|
||||
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 ? machineTypeUpdate(data) : machineTypeAdd(data));
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm />
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -0,0 +1,59 @@
|
||||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'libName',
|
||||
label: '库名称',
|
||||
},
|
||||
];
|
||||
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// export const columns: () => VxeGridProps['columns'] = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
|
||||
{
|
||||
title: '人员库编码',
|
||||
field: 'id',
|
||||
},
|
||||
{
|
||||
title: '人员库名称',
|
||||
field: 'libName',
|
||||
},
|
||||
{
|
||||
title: '人员库描述',
|
||||
field: 'libDesc',
|
||||
},
|
||||
{
|
||||
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: 'libName',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '描述',
|
||||
fieldName: 'libDesc',
|
||||
component: 'Input',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,198 @@
|
||||
<script setup lang="ts">
|
||||
import type { VbenFormProps } from '@vben/common-ui';
|
||||
import { Page, useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
|
||||
import type { PersonLibForm } from '#/api/sis/personLib/model';
|
||||
import { getVxePopupContainer } from '@vben/utils';
|
||||
|
||||
import { Modal, Popconfirm, Space, Tag } from 'ant-design-vue';
|
||||
import {
|
||||
personLibExport,
|
||||
personLibList,
|
||||
personLibRemove,
|
||||
} from '#/api/sis/personLib';
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
|
||||
import { columns, querySchema } from './data';
|
||||
import personLibModal from './personLib-modal.vue';
|
||||
import libAuthModal from '#/views/sis/personLib/libAuth-modal.vue';
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
commonConfig: {
|
||||
labelWidth: 80,
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
schema: querySchema(),
|
||||
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||
// 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
|
||||
// 不需要直接删除
|
||||
// fieldMappingTime: [
|
||||
// [
|
||||
// 'createTime',
|
||||
// ['params[beginTime]', 'params[endTime]'],
|
||||
// ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
|
||||
// ],
|
||||
// ],
|
||||
};
|
||||
|
||||
const gridOptions: VxeGridProps = {
|
||||
checkboxConfig: {
|
||||
// 高亮
|
||||
highlight: true,
|
||||
// 翻页时保留选中状态
|
||||
reserve: true,
|
||||
// 点击行选中
|
||||
// trigger: 'row',
|
||||
},
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// columns: columns(),
|
||||
columns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues = {}) => {
|
||||
return await personLibList({
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'sis-personLib-index',
|
||||
};
|
||||
|
||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
});
|
||||
|
||||
const [PersonLibModal, modalApi] = useVbenModal({
|
||||
connectedComponent: personLibModal,
|
||||
});
|
||||
|
||||
const [LibAuthModal, libAuthModalApi] = useVbenModal({
|
||||
connectedComponent: libAuthModal,
|
||||
});
|
||||
|
||||
function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleEdit(row: Required<PersonLibForm>) {
|
||||
modalApi.setData({ id: row.id });
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleDelete(row: Required<PersonLibForm>) {
|
||||
await personLibRemove(row.id);
|
||||
await tableApi.query();
|
||||
}
|
||||
|
||||
function handleMultiDelete() {
|
||||
const rows = tableApi.grid.getCheckboxRecords();
|
||||
const ids = rows.map((row: Required<PersonLibForm>) => row.id);
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
okType: 'danger',
|
||||
content: `确认删除选中的${ids.length}条记录吗？`,
|
||||
onOk: async () => {
|
||||
await personLibRemove(ids);
|
||||
await tableApi.query();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleDownloadExcel() {
|
||||
commonDownloadExcel(
|
||||
personLibExport,
|
||||
'人像库数据',
|
||||
tableApi.formApi.form.values,
|
||||
{
|
||||
fieldMappingTime: formOptions.fieldMappingTime,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function handleAuth(row: Required<PersonLibForm>) {
|
||||
libAuthModalApi.setData({ id: row.id });
|
||||
libAuthModalApi.open();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page :auto-content-height="true">
|
||||
<BasicTable table-title="人像库列表">
|
||||
<template #toolbar-tools>
|
||||
<Space>
|
||||
<a-button
|
||||
v-access:code="['sis:personLib:export']"
|
||||
@click="handleDownloadExcel"
|
||||
>
|
||||
{{ $t('pages.common.export') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
danger
|
||||
type="primary"
|
||||
v-access:code="['sis:personLib:remove']"
|
||||
@click="handleMultiDelete"
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
v-access:code="['sis:personLib:add']"
|
||||
@click="handleAdd"
|
||||
>
|
||||
{{ $t('pages.common.add') }}
|
||||
</a-button>
|
||||
</Space>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button @click.stop="handleAuth(row)"> 授权</ghost-button>
|
||||
|
||||
<ghost-button
|
||||
v-access:code="['sis:personLib:edit']"
|
||||
@click.stop="handleEdit(row)"
|
||||
>
|
||||
{{ $t('pages.common.edit') }}
|
||||
</ghost-button>
|
||||
<Popconfirm
|
||||
:get-popup-container="getVxePopupContainer"
|
||||
placement="left"
|
||||
title="确认删除？"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<ghost-button
|
||||
danger
|
||||
v-access:code="['sis:personLib:remove']"
|
||||
@click.stop=""
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</ghost-button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</template>
|
||||
|
||||
<template #libType="{ row }">
|
||||
<Tag v-if="row.libType == 1" color="#108ee9">人脸库</Tag>
|
||||
<Tag v-else color="#2db7f5">工服库</Tag>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<PersonLibModal @reload="tableApi.query()" />
|
||||
<LibAuthModal @reload="tableApi.query()" />
|
||||
</Page>
|
||||
</template>
|
||||
@@ -0,0 +1,159 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { useBeforeCloseDiff } from '#/utils/popup';
|
||||
import { message, Tree } from 'ant-design-vue';
|
||||
import {
|
||||
authRecordAdd,
|
||||
queryAuthDevice,
|
||||
queryTree,
|
||||
} from '#/api/sis/authRecord';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
const title = ref('门禁授权');
|
||||
const { onBeforeClose } = useBeforeCloseDiff({});
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[700px]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
onClosed: handleClosed,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (isOpen) {
|
||||
const { id } = modalApi.getData();
|
||||
queryAuthDevice(id).then((res = []) => {
|
||||
const arr: any[] = [];
|
||||
res.forEach((item) => {
|
||||
arr.push(item.deviceId);
|
||||
checkedKeys.value = arr;
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// 关闭时清除选中
|
||||
checkedKeys.value = [];
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.lock(true);
|
||||
const { id } = modalApi.getData();
|
||||
|
||||
if (eleIds.value.length === 0 && acIds.value.length === 0) {
|
||||
message.error('请选择授权设备');
|
||||
return;
|
||||
}
|
||||
// if (eleIds.value.length !== 0 && eleIds.value.length === 0) {
|
||||
// message.error('请选择授权设备')
|
||||
// return
|
||||
// }
|
||||
if (eleIds.value.length !== 0 && floorIds.value.length === 0) {
|
||||
message.error('存在电梯未选中授权楼层，请选择！');
|
||||
return;
|
||||
}
|
||||
|
||||
const params = {
|
||||
libId: id,
|
||||
deviceIds: [acIds.value, eleIds.value, floorIds.value],
|
||||
};
|
||||
authRecordAdd(params);
|
||||
// console.log(params)
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleClosed() {
|
||||
// await formApi.resetForm();
|
||||
// resetInitialized();
|
||||
}
|
||||
|
||||
const checkedKeys = ref<any[]>([]);
|
||||
const treeData = ref([]);
|
||||
const fieldNames = {
|
||||
title: 'title',
|
||||
label: 'label',
|
||||
key: 'code',
|
||||
children: 'children',
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadDeviceTree();
|
||||
});
|
||||
|
||||
function loadDeviceTree() {
|
||||
queryTree().then((data: any) => {
|
||||
treeData.value = data;
|
||||
});
|
||||
}
|
||||
|
||||
type Key = string | number;
|
||||
const eleIds = ref<any[]>([]);
|
||||
const acIds = ref<any[]>([]);
|
||||
const floorIds = ref<any[]>([]);
|
||||
function handleCheck(
|
||||
checked: Key[] | { checked: Key[]; halfChecked: Key[] },
|
||||
info: any,
|
||||
) {
|
||||
if (info.checked) {
|
||||
switch (info.node.label) {
|
||||
case 'floor':
|
||||
const floorArr: any[] = [info.node.code];
|
||||
floorIds.value = floorIds.value.concat(floorArr);
|
||||
break;
|
||||
case 'accessControl':
|
||||
const acArr: any[] = [info.node.code];
|
||||
acIds.value = acIds.value.concat(acArr);
|
||||
break;
|
||||
case 'elevator':
|
||||
const eleArr: any[] = [info.node.code];
|
||||
eleIds.value = eleIds.value.concat(eleArr);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch (info.node.label) {
|
||||
case 'floor':
|
||||
floorIds.value = floorIds.value.filter(
|
||||
(item) => item !== info.node.code,
|
||||
);
|
||||
break;
|
||||
case 'accessControl':
|
||||
acIds.value = acIds.value.filter((item) => item !== info.node.code);
|
||||
break;
|
||||
case 'elevator':
|
||||
eleIds.value = eleIds.value.filter((item) => item !== info.node.code);
|
||||
break;
|
||||
}
|
||||
}
|
||||
console.log('floorIds', floorIds.value);
|
||||
console.log('acIds', acIds.value);
|
||||
console.log('eleIds', eleIds.value);
|
||||
// checkData.handlfChecked = [0, 1, 2]
|
||||
// checkedKeys.value = { checked: checkData.checked, halfChecked: checkData.handlfChecked }
|
||||
// console.log("checked---", checked)
|
||||
// console.log("halfChecked---", info)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<div class="p-4">
|
||||
<Tree
|
||||
checkable
|
||||
checkStrictly
|
||||
:tree-data="treeData"
|
||||
:fieldNames="fieldNames"
|
||||
v-model:checkedKeys="checkedKeys"
|
||||
:onCheck="handleCheck"
|
||||
>
|
||||
</Tree>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -0,0 +1,104 @@
|
||||
<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 {
|
||||
personLibAdd,
|
||||
personLibInfo,
|
||||
personLibUpdate,
|
||||
} from '#/api/sis/personLib';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
|
||||
import { modalSchema } from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 80,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
},
|
||||
},
|
||||
schema: modalSchema(),
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
{
|
||||
initializedGetter: defaultFormValueGetter(formApi),
|
||||
currentGetter: defaultFormValueGetter(formApi),
|
||||
},
|
||||
);
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[550px]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
onClosed: handleClosed,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await personLibInfo(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 ? personLibUpdate(data) : personLibAdd(data));
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm />
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -0,0 +1,175 @@
|
||||
import { type FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
import { DictEnum } from '@vben/constants';
|
||||
import { getPopupContainer } from '@vben/utils';
|
||||
|
||||
import { getDictOptions } from '#/utils/dict';
|
||||
import { personLibList } from '#/api/sis/personLib';
|
||||
import type { PersonLibQuery, PersonLibVO } from '#/api/sis/personLib/model';
|
||||
|
||||
let libArr: PersonLibVO[] = [];
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: '图片库',
|
||||
fieldName: 'libId',
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
resultField: 'list', // 根据API返回结构调整
|
||||
labelField: 'libName',
|
||||
valueField: 'id',
|
||||
// immediate: true,
|
||||
api: async () => {
|
||||
if (!libArr || libArr.length == 0) {
|
||||
const params: PersonLibQuery = {
|
||||
pageNum: 1,
|
||||
pageSize: 500,
|
||||
};
|
||||
const res = await personLibList(params);
|
||||
libArr = res.rows;
|
||||
}
|
||||
return libArr;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'imgName',
|
||||
label: '人像名称',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
getPopupContainer,
|
||||
options: getDictOptions(DictEnum.SYS_USER_SEX),
|
||||
},
|
||||
fieldName: 'sex',
|
||||
label: '性别',
|
||||
},
|
||||
];
|
||||
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// export const columns: () => VxeGridProps['columns'] = () => [
|
||||
export const columns: VxeGridProps['columns'] = [
|
||||
{ type: 'checkbox', width: 60 },
|
||||
/* {
|
||||
title: '人员库编码',
|
||||
field: 'libCode',
|
||||
},*/
|
||||
{
|
||||
title: '人像名称',
|
||||
field: 'imgName',
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
field: 'sex',
|
||||
},
|
||||
{
|
||||
title: '邮箱',
|
||||
field: 'email',
|
||||
},
|
||||
{
|
||||
title: '联系方式',
|
||||
field: 'tel',
|
||||
},
|
||||
{
|
||||
title: '证件类型',
|
||||
field: 'certificateType',
|
||||
},
|
||||
{
|
||||
title: '证件号码',
|
||||
field: 'certificateNo',
|
||||
},
|
||||
{
|
||||
title: '出生日期',
|
||||
field: 'birthDate',
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
fixed: 'right',
|
||||
slots: { default: 'action' },
|
||||
title: '操作',
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
|
||||
export const modalSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
label: '图片库',
|
||||
fieldName: 'libIds',
|
||||
component: 'ApiSelect',
|
||||
rules: 'required',
|
||||
componentProps: {
|
||||
resultField: 'list', // 根据API返回结构调整
|
||||
labelField: 'libName',
|
||||
valueField: 'id',
|
||||
mode: 'multiple',
|
||||
// immediate: true,
|
||||
api: async () => {
|
||||
if (!libArr || libArr.length == 0) {
|
||||
const params: PersonLibQuery = {
|
||||
pageNum: 1,
|
||||
pageSize: 500,
|
||||
};
|
||||
const res = await personLibList(params);
|
||||
libArr = res.rows;
|
||||
}
|
||||
return libArr;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '人像名称',
|
||||
fieldName: 'imgName',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '性别',
|
||||
fieldName: 'sex',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
getPopupContainer,
|
||||
options: getDictOptions(DictEnum.SYS_USER_SEX),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '邮箱',
|
||||
fieldName: 'email',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '联系方式',
|
||||
fieldName: 'tel',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '证件类型',
|
||||
fieldName: 'certificateType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
getPopupContainer,
|
||||
options: getDictOptions(DictEnum.SYS_CERTIFICATE_TYPE),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '证件号码',
|
||||
fieldName: 'certificateNo',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '出生日期',
|
||||
fieldName: 'birthDate',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '人像图片',
|
||||
fieldName: 'imgOssId',
|
||||
component: 'ImageUpload',
|
||||
componentProps: {
|
||||
// accept: 'image/*', // 可选拓展名或者mime类型 ,拼接
|
||||
maxCount: 1, // 最大上传文件数 默认为1 为1会绑定为string而非string[]类型
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,156 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { useBeforeCloseDiff } from '#/utils/popup';
|
||||
import { Switch, Transfer, Tree } from 'ant-design-vue';
|
||||
import { queryTree } from '#/api/sis/accessControl';
|
||||
import { authRecordAdd } from '#/api/sis/authRecord';
|
||||
import type { TreeNode } from '#/api/common';
|
||||
import type { AuthRecordForm } from '#/api/sis/authRecord/model';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
const title = ref('门禁授权');
|
||||
const { onBeforeClose } = useBeforeCloseDiff({});
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[700px]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
onClosed: handleClosed,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
checked.value = false;
|
||||
targetKeys.value = []
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
modalApi.lock(true);
|
||||
const { ids, libId } = modalApi.getData() as {
|
||||
ids?: number[] | string[];
|
||||
libId: number | string;
|
||||
};
|
||||
const params: AuthRecordForm = {
|
||||
libId,
|
||||
imgIds: ids,
|
||||
acIds: targetKeys.value,
|
||||
issue: checked.value
|
||||
};
|
||||
const res = await authRecordAdd(params);
|
||||
console.log(res);
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClosed() {
|
||||
// await formApi.resetForm();
|
||||
// resetInitialized();
|
||||
}
|
||||
|
||||
const checked = ref(false);
|
||||
const targetKeys = ref<string[]>([]);
|
||||
const dataSource = ref<TreeNode[]>([]);
|
||||
const treeData = ref<any[]>([]);
|
||||
|
||||
onMounted(() => {
|
||||
queryAcTree();
|
||||
});
|
||||
|
||||
function handleTreeData(treeData: TreeNode[] | any[], datasource: TreeNode[]) {
|
||||
treeData.forEach((item) => {
|
||||
item.title = item.label;
|
||||
item.key = item.code;
|
||||
// 如果不是门禁，则
|
||||
if (item.level != 5) {
|
||||
item.disabled = true;
|
||||
}
|
||||
datasource.push(item);
|
||||
if (item.children) {
|
||||
handleTreeData(item.children, datasource);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function queryAcTree() {
|
||||
queryTree().then((res = []) => {
|
||||
const datasource: TreeNode[] = [];
|
||||
handleTreeData(res, datasource);
|
||||
dataSource.value = datasource;
|
||||
treeData.value = res;
|
||||
});
|
||||
}
|
||||
|
||||
const onChecked = (
|
||||
e: any,
|
||||
checkedKeys: string[],
|
||||
onItemSelect: (n: any, c: boolean) => void,
|
||||
) => {
|
||||
const { eventKey } = e.node;
|
||||
onItemSelect(eventKey, !isChecked(checkedKeys, eventKey));
|
||||
};
|
||||
|
||||
function isChecked(
|
||||
selectedKeys: (string | number)[],
|
||||
eventKey: string | number,
|
||||
) {
|
||||
return selectedKeys.indexOf(eventKey) !== -1;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<div class="p-4">
|
||||
<span>AI盒子授权: </span>
|
||||
<Switch v-model:checked="checked" />
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<Transfer
|
||||
v-model:target-keys="targetKeys"
|
||||
class="tree-transfer h-[400px] overflow-auto"
|
||||
:data-source="dataSource"
|
||||
:render="(item) => item.title"
|
||||
>
|
||||
<template #children="{ direction, selectedKeys, onItemSelect }">
|
||||
<Tree
|
||||
v-if="direction === 'left'"
|
||||
block-node
|
||||
checkable
|
||||
check-strictly
|
||||
:show-line="true"
|
||||
default-expand-all
|
||||
:checked-keys="[...selectedKeys, ...targetKeys]"
|
||||
:tree-data="treeData"
|
||||
@check="
|
||||
(_, props) => {
|
||||
onChecked(
|
||||
props,
|
||||
[...selectedKeys, ...targetKeys],
|
||||
onItemSelect,
|
||||
);
|
||||
}
|
||||
"
|
||||
@select="
|
||||
(_, props) => {
|
||||
onChecked(
|
||||
props,
|
||||
[...selectedKeys, ...targetKeys],
|
||||
onItemSelect,
|
||||
);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</Transfer>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -0,0 +1,205 @@
|
||||
<script setup lang="ts">
|
||||
import type { VbenFormProps } from '@vben/common-ui';
|
||||
import { Page, useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
|
||||
import type { PersonLibImgForm } from '#/api/sis/personLibImg/model';
|
||||
import { getVxePopupContainer } from '@vben/utils';
|
||||
|
||||
import { Modal, Popconfirm, Space } from 'ant-design-vue';
|
||||
import {
|
||||
personLibImgExport,
|
||||
personLibImgList,
|
||||
personLibImgRemove,
|
||||
} from '#/api/sis/personLibImg';
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
|
||||
import { columns, querySchema } from './data';
|
||||
import personLibImgModal from './personLibImg-modal.vue';
|
||||
import imgAuthModal from './imgAuth-modal.vue';
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
commonConfig: {
|
||||
labelWidth: 80,
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
schema: querySchema(),
|
||||
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||
// 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
|
||||
// 不需要直接删除
|
||||
// fieldMappingTime: [
|
||||
// [
|
||||
// 'createTime',
|
||||
// ['params[beginTime]', 'params[endTime]'],
|
||||
// ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
|
||||
// ],
|
||||
// ],
|
||||
};
|
||||
|
||||
const gridOptions: VxeGridProps = {
|
||||
checkboxConfig: {
|
||||
// 高亮
|
||||
highlight: true,
|
||||
// 翻页时保留选中状态
|
||||
reserve: true,
|
||||
// 点击行选中
|
||||
// trigger: 'row',
|
||||
},
|
||||
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
|
||||
// columns: columns(),
|
||||
columns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues = {}) => {
|
||||
return await personLibImgList({
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...formValues,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'system-personLibImg-index',
|
||||
};
|
||||
|
||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
});
|
||||
|
||||
const [PersonLibImgModal, modalApi] = useVbenModal({
|
||||
connectedComponent: personLibImgModal,
|
||||
});
|
||||
|
||||
const [ImgAuthModal, authModalApi] = useVbenModal({
|
||||
connectedComponent: imgAuthModal,
|
||||
});
|
||||
|
||||
function handleAdd() {
|
||||
modalApi.setData({});
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleEdit(row: Required<PersonLibImgForm>) {
|
||||
modalApi.setData({ id: row.id });
|
||||
modalApi.open();
|
||||
}
|
||||
|
||||
async function handleDelete(row: Required<PersonLibImgForm>) {
|
||||
await personLibImgRemove(row.id);
|
||||
await tableApi.query();
|
||||
}
|
||||
|
||||
function handleMultiDelete() {
|
||||
const rows = tableApi.grid.getCheckboxRecords();
|
||||
const ids = rows.map((row: Required<PersonLibImgForm>) => row.id);
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
okType: 'danger',
|
||||
content: `确认删除选中的${ids.length}条记录吗？`,
|
||||
onOk: async () => {
|
||||
await personLibImgRemove(ids);
|
||||
await tableApi.query();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleDownloadExcel() {
|
||||
commonDownloadExcel(
|
||||
personLibImgExport,
|
||||
'人像信息数据',
|
||||
tableApi.formApi.form.values,
|
||||
{
|
||||
fieldMappingTime: formOptions.fieldMappingTime,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 对图像进行门禁授权
|
||||
*/
|
||||
function accessControlAuth() {
|
||||
const rows = tableApi.grid.getCheckboxRecords();
|
||||
const ids = rows.map((row: Required<PersonLibImgForm>) => row.id);
|
||||
authModalApi.setData({ ids, libId: rows[0].libId });
|
||||
authModalApi.open();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page :auto-content-height="true">
|
||||
<BasicTable table-title="人像信息列表">
|
||||
<template #toolbar-tools>
|
||||
<Space>
|
||||
<!-- <a-button
|
||||
type="primary"
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
v-access:code="['system:personLibImg:add']"
|
||||
@click="accessControlAuth"
|
||||
>
|
||||
门禁授权
|
||||
</a-button> -->
|
||||
<a-button
|
||||
v-access:code="['system:personLibImg:export']"
|
||||
@click="handleDownloadExcel"
|
||||
>
|
||||
{{ $t('pages.common.export') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
danger
|
||||
type="primary"
|
||||
v-access:code="['system:personLibImg:remove']"
|
||||
@click="handleMultiDelete"
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
v-access:code="['system:personLibImg:add']"
|
||||
@click="handleAdd"
|
||||
>
|
||||
{{ $t('pages.common.add') }}
|
||||
</a-button>
|
||||
</Space>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
v-access:code="['system:personLibImg: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:personLibImg:remove']"
|
||||
@click.stop=""
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</ghost-button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<PersonLibImgModal @reload="tableApi.query()" />
|
||||
<ImgAuthModal @reload="tableApi.query()" />
|
||||
</Page>
|
||||
</template>
|
||||
@@ -0,0 +1,105 @@
|
||||
<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 {
|
||||
personLibImgAdd,
|
||||
personLibImgInfo,
|
||||
personLibImgUpdate,
|
||||
} from '#/api/sis/personLibImg';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
|
||||
import { modalSchema } from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
const isUpdate = ref(false);
|
||||
const title = computed(() => {
|
||||
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
|
||||
});
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
// 默认占满两列
|
||||
formItemClass: 'col-span-1',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 100,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
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-[700px]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
onClosed: handleClosed,
|
||||
onConfirm: handleConfirm,
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
modalApi.modalLoading(true);
|
||||
|
||||
const { id } = modalApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await personLibImgInfo(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 ? personLibImgUpdate(data) : personLibImgAdd(data));
|
||||
resetInitialized();
|
||||
emit('reload');
|
||||
modalApi.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
modalApi.lock(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClosed() {
|
||||
await formApi.resetForm();
|
||||
resetInitialized();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal :title="title">
|
||||
<BasicForm />
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>视频监控</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -0,0 +1,257 @@
|
||||
<script setup lang="ts">
|
||||
import { shallowRef, ref } from 'vue';
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import {
|
||||
Descriptions,
|
||||
DescriptionsItem,
|
||||
Tag,
|
||||
Image,
|
||||
Tabs,
|
||||
Input,
|
||||
Button,
|
||||
Upload,
|
||||
} from 'ant-design-vue';
|
||||
import { QuestionCircleOutlined, UploadOutlined } from '@ant-design/icons-vue';
|
||||
import image3 from '../../../../assets/algorithmManagement/image3.png';
|
||||
import image4 from '../../../../assets/algorithmManagement/image4.png';
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
onOpenChange: handleOpenChange,
|
||||
onClosed() {
|
||||
algorithmDetail.value = null;
|
||||
},
|
||||
});
|
||||
|
||||
const algorithmDetail = shallowRef<any>(null);
|
||||
const activeTab = ref('recognition');
|
||||
const confidence = ref(64);
|
||||
|
||||
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) {
|
||||
algorithmDetail.value = record;
|
||||
}
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
|
||||
// 获取算法类型颜色
|
||||
const getAlgorithmTypeColor = (type: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
安全监控: 'red',
|
||||
环境监测: 'green',
|
||||
基础设施: 'blue',
|
||||
交通管理: 'orange',
|
||||
};
|
||||
return colorMap[type] || 'default';
|
||||
};
|
||||
|
||||
// 模拟识别结果JSON
|
||||
const recognitionResult = {
|
||||
msg: 'success',
|
||||
code: 200,
|
||||
data: [
|
||||
{
|
||||
image: null,
|
||||
coordinate: {
|
||||
xyxy: [191, 202, 809, 521],
|
||||
},
|
||||
label: 'Fall-Detected',
|
||||
score: '0.64',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 上传图片处理
|
||||
const handleUploadImage = (file: any) => {
|
||||
console.log('上传图片', file);
|
||||
|
||||
// 创建文件URL
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
uploadedImageUrl.value = e.target?.result as string;
|
||||
hasUploadedImage.value = true;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
return false; // 阻止默认上传行为
|
||||
};
|
||||
|
||||
// 上传配置
|
||||
const uploadProps = {
|
||||
beforeUpload: handleUploadImage,
|
||||
showUploadList: false,
|
||||
accept: 'image/*',
|
||||
};
|
||||
|
||||
// 是否已上传图片
|
||||
const hasUploadedImage = ref(false);
|
||||
// 上传的图片URL
|
||||
const uploadedImageUrl = ref('');
|
||||
// 识别框的坐标（模拟数据）
|
||||
const detectionBox = ref({
|
||||
x: 61,
|
||||
y: 52,
|
||||
width: 618, // 809 - 191
|
||||
height: 219, // 521 - 202
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal
|
||||
:footer="false"
|
||||
:fullscreen-button="false"
|
||||
title="人体跌倒识别"
|
||||
class="w-[90%]"
|
||||
>
|
||||
<div v-if="algorithmDetail" class="space-y-6">
|
||||
<!-- 头部信息 -->
|
||||
<div class="flex items-start gap-4">
|
||||
<!-- 缩略图 -->
|
||||
<div class="h-24 w-24 flex-shrink-0 overflow-hidden rounded-lg">
|
||||
<img
|
||||
:src="algorithmDetail.image"
|
||||
:alt="algorithmDetail.title"
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<!-- 标题和描述 -->
|
||||
<div class="flex-1">
|
||||
<h2 class="mb-2 text-xl font-bold text-gray-900">
|
||||
{{ algorithmDetail.title }}
|
||||
</h2>
|
||||
<div class="mb-3 flex flex-wrap gap-2">
|
||||
<Tag
|
||||
v-for="category in [
|
||||
'公安行业',
|
||||
'智慧医院',
|
||||
'地铁站',
|
||||
'交通枢纽',
|
||||
'城市道路',
|
||||
'社区',
|
||||
'园区',
|
||||
]"
|
||||
:key="category"
|
||||
color="blue"
|
||||
>
|
||||
{{ category }}
|
||||
</Tag>
|
||||
</div>
|
||||
<p class="text-gray-600">{{ algorithmDetail.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<!-- 左侧：识别图片 -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900">识别图片</h3>
|
||||
<div v-if="hasUploadedImage" class="relative">
|
||||
<img
|
||||
:src="uploadedImageUrl"
|
||||
:alt="algorithmDetail.title"
|
||||
class="h-60 w-full rounded-lg object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex h-60 items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50"
|
||||
>
|
||||
<Upload v-bind="uploadProps">
|
||||
<div
|
||||
class="cursor-pointer text-center text-gray-500 hover:text-blue-500"
|
||||
>
|
||||
<UploadOutlined class="mb-2 text-4xl" />
|
||||
<p>点击上传图片</p>
|
||||
</div>
|
||||
</Upload>
|
||||
</div>
|
||||
<div v-if="hasUploadedImage" class="text-center">
|
||||
<Upload v-bind="uploadProps">
|
||||
<Button type="primary">
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
重新上传
|
||||
</Button>
|
||||
</Upload>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：识别结果 -->
|
||||
<div v-if="hasUploadedImage" class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<Tabs v-model:activeKey="activeTab" class="flex-1">
|
||||
<Tabs.TabPane key="recognition" tab="识别结果" />
|
||||
<Tabs.TabPane key="json" tab="JSON结果" />
|
||||
</Tabs>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm text-gray-600">置信度</span>
|
||||
<QuestionCircleOutlined class="text-gray-400" />
|
||||
<Input
|
||||
v-model:value="confidence"
|
||||
class="w-16"
|
||||
size="small"
|
||||
placeholder="10~99"
|
||||
/>
|
||||
<span class="text-sm text-gray-600">%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 识别结果内容 -->
|
||||
<div v-if="activeTab === 'recognition'" class="relative">
|
||||
<img
|
||||
:src="uploadedImageUrl"
|
||||
:alt="algorithmDetail.title"
|
||||
class="h-60 w-full rounded-lg object-cover"
|
||||
/>
|
||||
<!-- 红色识别框 -->
|
||||
<div
|
||||
class="absolute border-2 border-red-500"
|
||||
:style="{
|
||||
left: `${detectionBox.x}px`,
|
||||
top: `${detectionBox.y}px`,
|
||||
width: `${detectionBox.width}px`,
|
||||
height: `${detectionBox.height}px`,
|
||||
}"
|
||||
>
|
||||
<!-- 标签文字 -->
|
||||
<div
|
||||
class="absolute -top-6 left-0 rounded bg-red-500 px-2 py-1 text-xs text-white"
|
||||
>
|
||||
Fall-Detected 0.64
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JSON结果内容 -->
|
||||
<div v-else class="rounded-lg bg-gray-50 p-4">
|
||||
<pre class="whitespace-pre-wrap text-sm text-gray-800">{{
|
||||
JSON.stringify(recognitionResult, null, 2)
|
||||
}}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未上传图片时的提示 -->
|
||||
<div
|
||||
v-else
|
||||
class="flex h-60 items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50"
|
||||
>
|
||||
<div class="text-center text-gray-500">
|
||||
<UploadOutlined class="mb-2 text-4xl" />
|
||||
<p>请先上传图片进行识别</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<Page class="h-full w-full">
|
||||
<!-- 导航分类 -->
|
||||
<div class="mb-6">
|
||||
<!-- 第一行分类 -->
|
||||
<div class="mb-2 flex flex-wrap gap-2">
|
||||
<a-button
|
||||
v-for="category in categories1"
|
||||
:key="category"
|
||||
:type="selectedCategory === category ? 'primary' : 'default'"
|
||||
size="small"
|
||||
@click="handleCategoryChange(category)"
|
||||
>
|
||||
{{ category }}
|
||||
</a-button>
|
||||
</div>
|
||||
<!-- 第二行分类 -->
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<a-button
|
||||
v-for="category in categories2"
|
||||
:key="category"
|
||||
:type="selectedCategory === category ? 'primary' : 'default'"
|
||||
size="small"
|
||||
@click="handleCategoryChange(category)"
|
||||
>
|
||||
{{ category }}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索结果和操作 -->
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<div class="text-gray-600">为您找到相关算法{{ totalCount }}个</div>
|
||||
<a-button type="primary" @click="handleImport">
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
导入模型
|
||||
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 算法卡片网格 -->
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<div
|
||||
v-for="algorithm in algorithmList"
|
||||
:key="algorithm.id"
|
||||
class="cursor-pointer overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md"
|
||||
@click="handleAlgorithmClick(algorithm)"
|
||||
>
|
||||
<!-- 算法图片 -->
|
||||
<div class="relative h-48 bg-gray-100">
|
||||
<div
|
||||
:style="{ background: `url(${algorithm.image})`, backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' }"
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
<!-- 算法类型标签 -->
|
||||
<div class="absolute left-2 top-2">
|
||||
<a-tag :color="getAlgorithmTypeColor(algorithm.type)">
|
||||
{{ algorithm.type }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 算法详情 -->
|
||||
<div class="space-y-3 p-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900">{{ algorithm.title }}</h3>
|
||||
<p class="text-sm text-gray-600 leading-relaxed">{{ algorithm.description }}</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-500">准确率: {{ algorithm.accuracy }}</span>
|
||||
<a-button type="link" size="small" @click.stop="handleViewDetail(algorithm)">
|
||||
查看详情
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="mt-6 flex items-center justify-between border-t border-gray-200 pt-4">
|
||||
<div class="text-gray-600">共搜索到{{ filteredCount }}条数据</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<Pagination
|
||||
v-model:current="pagination.current"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="filteredCount"
|
||||
:show-size-changer="false"
|
||||
:show-quick-jumper="true"
|
||||
@change="handlePageChange"
|
||||
/>
|
||||
<Select
|
||||
v-model:value="pagination.pageSize"
|
||||
class="w-24"
|
||||
@change="handlePageSizeChange"
|
||||
>
|
||||
<SelectOption value="10">10条/页</SelectOption>
|
||||
<SelectOption value="20">20条/页</SelectOption>
|
||||
<SelectOption value="50">50条/页</SelectOption>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 算法详情弹窗 -->
|
||||
<AlgorithmDetailModal />
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { Page, useVbenModal } from '@vben/common-ui';
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { message, Pagination, Select, SelectOption } from 'ant-design-vue';
|
||||
import AlgorithmDetailModalComponent from './algorithm-detail-modal.vue';
|
||||
import image from '../../../../assets/algorithmManagement/image.png'
|
||||
import image5 from '../../../../assets/algorithmManagement/image5.png'
|
||||
import image6 from '../../../../assets/algorithmManagement/image6.png'
|
||||
import image7 from '../../../../assets/algorithmManagement/image7.png'
|
||||
|
||||
// 分类数据
|
||||
const categories1 = [
|
||||
'全部', '智慧工地', '公安行业', '智慧医院', '地铁站', '交通枢纽',
|
||||
'城市道路', '社区', '园区', '城市治理', '交通治理', '平安校园',
|
||||
'智慧零售', '小区', '写字楼', '消防行业'
|
||||
];
|
||||
|
||||
const categories2 = [
|
||||
'购物中心', '车站', '化工生产', '智慧电网', '监控室', '后厨',
|
||||
'火车站', '娱乐场所', '机场', '电焊车间', '水务管理', '河道管理', '边境监控'
|
||||
];
|
||||
|
||||
// 状态管理
|
||||
const selectedCategory = ref('园区');
|
||||
const totalCount = ref(4);
|
||||
const filteredCount = ref(2);
|
||||
|
||||
// 分页配置
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
// 算法列表
|
||||
const algorithmList = ref<any[]>([]);
|
||||
|
||||
// 创建详情弹窗
|
||||
const [AlgorithmDetailModal, detailModalApi] = useVbenModal({
|
||||
connectedComponent: AlgorithmDetailModalComponent,
|
||||
});
|
||||
|
||||
// 模拟算法数据
|
||||
const mockAlgorithmData = [
|
||||
{
|
||||
id: 1,
|
||||
title: '人体跌倒识别',
|
||||
type: '安全监控',
|
||||
description: '适用于地铁扶梯/楼梯、老人儿童活动区域等场所，准确率超过90%。',
|
||||
accuracy: '90%+',
|
||||
image: image,
|
||||
category: '园区',
|
||||
features: ['实时检测', '高准确率', '多场景适用'],
|
||||
applications: ['地铁站', '医院', '养老院', '学校']
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '地面垃圾',
|
||||
type: '环境监测',
|
||||
description: '在居民区和城市街道部署智能垃圾识别系统，自动检测并上报垃圾堆积情况。',
|
||||
accuracy: '85%+',
|
||||
image: image5,
|
||||
category: '园区',
|
||||
features: ['自动识别', '实时上报', '智能分类'],
|
||||
applications: ['社区', '街道', '公园', '商业区']
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '烟雾识别',
|
||||
type: '安全监控',
|
||||
description: '在办公楼、居民区、学校等重点场所实施烟雾检测技术，监控并精确定位烟雾源，预防火灾。',
|
||||
accuracy: '95%+',
|
||||
image: image6,
|
||||
category: '园区',
|
||||
features: ['早期预警', '精确定位', '快速响应'],
|
||||
applications: ['办公楼', '居民区', '学校', '工厂']
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '井盖状态识别',
|
||||
type: '基础设施',
|
||||
description: '井盖识别系统监控城市基础设施，识别井盖状态包括损坏、变形或位移，自动报警维护团队。',
|
||||
accuracy: '88%+',
|
||||
image: image7,
|
||||
category: '园区',
|
||||
features: ['状态监测', '自动报警', '维护管理'],
|
||||
applications: ['城市道路', '小区', '工业园区', '市政设施']
|
||||
}
|
||||
];
|
||||
|
||||
// 获取算法类型颜色
|
||||
const getAlgorithmTypeColor = (type: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
'安全监控': 'red',
|
||||
'环境监测': 'green',
|
||||
'基础设施': 'blue',
|
||||
'交通管理': 'orange',
|
||||
};
|
||||
return colorMap[type] || 'default';
|
||||
};
|
||||
|
||||
// 分类变化处理
|
||||
const handleCategoryChange = (category: string) => {
|
||||
selectedCategory.value = category;
|
||||
loadAlgorithmData();
|
||||
};
|
||||
|
||||
// 导入处理
|
||||
const handleImport = () => {
|
||||
message.info('导入功能开发中...');
|
||||
};
|
||||
|
||||
// 算法点击处理
|
||||
const handleAlgorithmClick = (algorithm: any) => {
|
||||
console.log('点击算法:', algorithm);
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const handleViewDetail = (algorithm: any) => {
|
||||
detailModalApi.setData({ id: algorithm.id, data: algorithmList.value });
|
||||
detailModalApi.open();
|
||||
};
|
||||
|
||||
// 分页变化处理
|
||||
const handlePageChange = (page: number) => {
|
||||
pagination.current = page;
|
||||
loadAlgorithmData();
|
||||
};
|
||||
|
||||
// 每页条数变化处理
|
||||
const handlePageSizeChange = (value: any) => {
|
||||
pagination.pageSize = Number(value);
|
||||
pagination.current = 1;
|
||||
loadAlgorithmData();
|
||||
};
|
||||
|
||||
// 加载算法数据
|
||||
const loadAlgorithmData = () => {
|
||||
// 模拟API调用
|
||||
setTimeout(() => {
|
||||
// 根据分类过滤数据
|
||||
let filteredData = [...mockAlgorithmData];
|
||||
|
||||
if (selectedCategory.value !== '全部') {
|
||||
filteredData = filteredData.filter(item =>
|
||||
item.category === selectedCategory.value
|
||||
);
|
||||
}
|
||||
|
||||
// 模拟分页
|
||||
const start = (pagination.current - 1) * pagination.pageSize;
|
||||
const end = start + pagination.pageSize;
|
||||
algorithmList.value = filteredData.slice(start, end);
|
||||
filteredCount.value = filteredData.length;
|
||||
}, 300);
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadAlgorithmData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义样式 */
|
||||
.ant-pagination-item-active {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.ant-pagination-item-active a {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,113 @@
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue';
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { Descriptions, DescriptionsItem, Tag } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const [BasicModal, modalApi] = useVbenModal({
|
||||
onOpenChange: handleOpenChange,
|
||||
onClosed() {
|
||||
alarmDetail.value = null;
|
||||
},
|
||||
});
|
||||
|
||||
const alarmDetail = 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) {
|
||||
alarmDetail.value = record;
|
||||
}
|
||||
|
||||
modalApi.modalLoading(false);
|
||||
}
|
||||
|
||||
// 获取预警类型颜色
|
||||
const getAlarmTypeColor = (type: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
停车侦测: 'blue',
|
||||
区域入侵侦测: 'red',
|
||||
人员聚集: 'orange',
|
||||
异常行为: 'purple',
|
||||
};
|
||||
return colorMap[type] || 'default';
|
||||
};
|
||||
|
||||
// 获取告警级别颜色
|
||||
const getAlarmLevelColor = (level: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
一般: 'blue',
|
||||
重要: 'orange',
|
||||
紧急: 'red',
|
||||
};
|
||||
return colorMap[level] || 'default';
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (time: string) => {
|
||||
return dayjs(time).format('YYYY.MM.DD HH:mm');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicModal
|
||||
:footer="false"
|
||||
:fullscreen-button="false"
|
||||
title="预警详情"
|
||||
class="w-[70%]"
|
||||
>
|
||||
<div v-if="alarmDetail" class="flex gap-6">
|
||||
<!-- 左侧详情信息 -->
|
||||
<div class="flex-1 space-y-4">
|
||||
<Descriptions
|
||||
size="small"
|
||||
:column="1"
|
||||
bordered
|
||||
:labelStyle="{ width: '120px' }"
|
||||
>
|
||||
<DescriptionsItem label="预警编号">
|
||||
{{ alarmDetail.alarmId }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="监控区域">
|
||||
{{ alarmDetail.cameraLocation }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="预警类型">
|
||||
<Tag :color="getAlarmTypeColor(alarmDetail.alarmType)">
|
||||
{{ alarmDetail.alarmType }}
|
||||
</Tag>
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="预警时间">
|
||||
{{ formatTime(alarmDetail.alarmTime) }}
|
||||
</DescriptionsItem>
|
||||
<DescriptionsItem label="告警级别">
|
||||
<Tag :color="getAlarmLevelColor(alarmDetail.alarmLevel)">
|
||||
{{ alarmDetail.alarmLevel }}
|
||||
</Tag>
|
||||
</DescriptionsItem>
|
||||
</Descriptions>
|
||||
</div>
|
||||
<!-- 右侧图片 -->
|
||||
<div class="flex-1">
|
||||
<div
|
||||
:style="{
|
||||
background: `url(${alarmDetail.image})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}"
|
||||
class="h-64 w-full rounded-lg object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<Page class="h-full w-full">
|
||||
<!-- 搜索区域 -->
|
||||
<div
|
||||
class="mb-4 flex items-center justify-between rounded-lg bg-white p-4 shadow-sm"
|
||||
>
|
||||
<!-- 左侧搜索 -->
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-gray-600">共有{{ totalCount }}条预警事件</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧时间范围 -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium text-gray-700">时间范围:</span>
|
||||
<RadioGroup
|
||||
v-model:value="searchForm.timeRange"
|
||||
@change="handleTimeRangeChange"
|
||||
>
|
||||
<Radio value="">时间不限</Radio>
|
||||
<Radio value="1">过去1小时</Radio>
|
||||
<Radio value="24">过去24小时</Radio>
|
||||
<Radio value="168">过去1周</Radio>
|
||||
<Radio value="720">过去1个月</Radio>
|
||||
<Radio value="2160">过去3个月</Radio>
|
||||
<Radio value="8760">过去1年</Radio>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预警事件列表 -->
|
||||
<div class="rounded-lg bg-white shadow-sm">
|
||||
<div
|
||||
class="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
|
||||
>
|
||||
<div
|
||||
v-for="item in alarmList"
|
||||
:key="item.id"
|
||||
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="{
|
||||
background: `url(${item.thumbnail})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}"
|
||||
>
|
||||
<!-- 预警类型标签 -->
|
||||
<div class="absolute left-2 top-2">
|
||||
<a-tag :color="getAlarmTypeColor(item.alarmType)">
|
||||
{{ item.alarmType }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 事件详情 -->
|
||||
<div class="space-y-2 p-3">
|
||||
<div class="text-sm text-gray-600">
|
||||
<span class="font-medium">摄像头点位:</span>
|
||||
{{ item.cameraLocation }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
<span class="font-medium">预警类型:</span>
|
||||
{{ item.alarmType }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
<span class="font-medium">预警时间:</span>
|
||||
{{ formatTime(item.alarmTime) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div
|
||||
class="flex items-center justify-between border-t border-gray-200 p-4"
|
||||
>
|
||||
<div class="text-gray-600">共搜索到{{ filteredCount }}条数据</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<Pagination
|
||||
v-model:current="pagination.current"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="filteredCount"
|
||||
:show-size-changer="false"
|
||||
:show-quick-jumper="true"
|
||||
@change="handlePageChange"
|
||||
/>
|
||||
<Select
|
||||
v-model:value="pagination.pageSize"
|
||||
class="w-24"
|
||||
@change="handlePageSizeChange"
|
||||
>
|
||||
<SelectOption value="10">10条/页</SelectOption>
|
||||
<SelectOption value="20">20条/页</SelectOption>
|
||||
<SelectOption value="50">50条/页</SelectOption>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预警详情弹窗 -->
|
||||
<AlarmDetailModal @reload="loadAlarmData" />
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { Page, useVbenModal } from '@vben/common-ui';
|
||||
import { SearchOutlined } from '@ant-design/icons-vue';
|
||||
import {
|
||||
message,
|
||||
RadioGroup,
|
||||
Radio,
|
||||
Pagination,
|
||||
Select,
|
||||
SelectOption,
|
||||
} from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import AlarmDetailModalComponent from './alarm-detail-modal.vue';
|
||||
import monitor6 from '../../../../assets/monitor/monitor6.png';
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
alarmType: '',
|
||||
timeRange: '2160', // 默认选择过去3个月
|
||||
});
|
||||
|
||||
// 分页配置
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
// 数据状态
|
||||
const totalCount = ref(21);
|
||||
const filteredCount = ref(2);
|
||||
const alarmList = ref<any[]>([]);
|
||||
|
||||
// 创建详情弹窗
|
||||
const [AlarmDetailModal, detailModalApi] = useVbenModal({
|
||||
connectedComponent: AlarmDetailModalComponent,
|
||||
});
|
||||
|
||||
// 查看详情的处理函数
|
||||
const handleViewDetail = (item: any) => {
|
||||
if (item) {
|
||||
detailModalApi.setData({ id: item.id, data: alarmList.value });
|
||||
detailModalApi.open();
|
||||
}
|
||||
};
|
||||
|
||||
// 模拟数据
|
||||
const mockAlarmData = [
|
||||
{
|
||||
id: 1,
|
||||
alarmId: 'JSD-1231',
|
||||
cameraLocation: '1栋3号电梯旁',
|
||||
alarmType: '停车侦测',
|
||||
alarmTime: '2025-07-12 12:35:00',
|
||||
alarmLevel: '一般',
|
||||
thumbnail: monitor6,
|
||||
image: monitor6,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
alarmId: 'JSD-1232',
|
||||
cameraLocation: '1栋3号电梯旁',
|
||||
alarmType: '区域入侵侦测',
|
||||
alarmTime: '2025-07-12 12:35:00',
|
||||
alarmLevel: '一般',
|
||||
thumbnail: monitor6,
|
||||
image: monitor6,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
alarmId: 'JSD-1233',
|
||||
cameraLocation: '1栋3号电梯旁',
|
||||
alarmType: '区域入侵侦测',
|
||||
alarmTime: '2025-07-12 12:35:00',
|
||||
alarmLevel: '一般',
|
||||
thumbnail: monitor6,
|
||||
image: monitor6,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
alarmId: 'JSD-1234',
|
||||
cameraLocation: '1栋3号电梯旁',
|
||||
alarmType: '停车侦测',
|
||||
alarmTime: '2025-07-12 12:35:00',
|
||||
alarmLevel: '一般',
|
||||
thumbnail: monitor6,
|
||||
image: monitor6,
|
||||
},
|
||||
];
|
||||
|
||||
// 获取预警类型颜色
|
||||
const getAlarmTypeColor = (type: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
停车侦测: 'blue',
|
||||
区域入侵侦测: 'red',
|
||||
人员聚集: 'orange',
|
||||
异常行为: 'purple',
|
||||
};
|
||||
return colorMap[type] || 'default';
|
||||
};
|
||||
|
||||
// 获取告警级别颜色
|
||||
const getAlarmLevelColor = (level: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
一般: 'blue',
|
||||
重要: 'orange',
|
||||
紧急: 'red',
|
||||
};
|
||||
return colorMap[level] || 'default';
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (time: string) => {
|
||||
return dayjs(time).format('YYYY.MM.DD HH:mm');
|
||||
};
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = () => {
|
||||
// 模拟搜索逻辑
|
||||
console.log('搜索条件:', searchForm);
|
||||
loadAlarmData();
|
||||
};
|
||||
|
||||
// 时间范围变化处理
|
||||
const handleTimeRangeChange = () => {
|
||||
loadAlarmData();
|
||||
};
|
||||
|
||||
// 分页变化处理
|
||||
const handlePageChange = (page: number) => {
|
||||
pagination.current = page;
|
||||
loadAlarmData();
|
||||
};
|
||||
|
||||
// 每页条数变化处理
|
||||
const handlePageSizeChange = (value: any) => {
|
||||
pagination.pageSize = Number(value);
|
||||
pagination.current = 1;
|
||||
loadAlarmData();
|
||||
};
|
||||
|
||||
// 加载预警数据
|
||||
const loadAlarmData = () => {
|
||||
// 模拟API调用
|
||||
setTimeout(() => {
|
||||
// 根据搜索条件过滤数据
|
||||
let filteredData = [...mockAlarmData];
|
||||
|
||||
if (searchForm.alarmType) {
|
||||
filteredData = filteredData.filter((item) =>
|
||||
item.alarmType.includes(searchForm.alarmType),
|
||||
);
|
||||
}
|
||||
|
||||
// 模拟分页
|
||||
const start = (pagination.current - 1) * pagination.pageSize;
|
||||
const end = start + pagination.pageSize;
|
||||
alarmList.value = filteredData.slice(start, end);
|
||||
filteredCount.value = filteredData.length;
|
||||
}, 300);
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadAlarmData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义样式 */
|
||||
.ant-pagination-item-active {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.ant-pagination-item-active a {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,226 @@
|
||||
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: '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: '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',
|
||||
},
|
||||
{
|
||||
label: '预警时间',
|
||||
fieldName: 'alarmTime',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY.MM.DD HH:mm',
|
||||
valueFormat: 'YYYY.MM.DD HH:mm',
|
||||
showTime: true,
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '级别',
|
||||
fieldName: 'level',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '特大', value: '特大' },
|
||||
{ label: '重要', value: '重要' },
|
||||
{ label: '一般', value: '一般' },
|
||||
],
|
||||
},
|
||||
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',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '待分配', value: '待分配' },
|
||||
{ label: '处理中', value: '处理中' },
|
||||
{ label: '已完成', value: '已完成' },
|
||||
],
|
||||
},
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
label: '处理情况',
|
||||
fieldName: 'processingDetails',
|
||||
component: 'InputTextArea',
|
||||
componentProps: {
|
||||
rows: 3,
|
||||
},
|
||||
formItemClass: 'col-span-2',
|
||||
},
|
||||
{
|
||||
label: '处理时间',
|
||||
fieldName: 'processingTime',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY.MM.DD HH:mm',
|
||||
valueFormat: 'YYYY.MM.DD HH:mm',
|
||||
showTime: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,265 @@
|
||||
<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';
|
||||
|
||||
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';
|
||||
|
||||
// 假数据
|
||||
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',
|
||||
},
|
||||
]);
|
||||
|
||||
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>
|
||||
|
||||
<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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import { shallowRef } from 'vue';
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { Descriptions, DescriptionsItem, Tag } 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' }"
|
||||
>
|
||||
<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>
|
||||
</Descriptions>
|
||||
</BasicModal>
|
||||
</template>
|
||||
@@ -0,0 +1,108 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user