代码修改

This commit is contained in:
qiuyuan 2025-10-10 18:37:34 +08:00
parent abf0748855
commit 18caad38cb
6 changed files with 1508 additions and 20 deletions

View File

@ -44,4 +44,5 @@ export default {
serviceMenu: '服务设施', serviceMenu: '服务设施',
serviceSites: '服务站点', serviceSites: '服务站点',
serviceOrganization: '服务组织', serviceOrganization: '服务组织',
nodeAdministration: '节点管理',
} }

View File

@ -34,7 +34,20 @@ export default [
keepAlive: true, keepAlive: true,
permission: '*', permission: '*',
}, },
},
{
path: 'nodeAdministration',
name: 'nodeAdministration',
component: 'serviceMenu/nodeAdministration/index.vue',
meta: {
title: '节点管理',
isMenu: true,
keepAlive: true,
permission: '*',
},
} }
], ],
}, },
] ]

View File

@ -0,0 +1,687 @@
<template>
<a-modal
:width="800"
:open="modal.open"
:title="modal.title"
:confirm-loading="modal.confirmLoading"
:after-close="onAfterClose"
:cancel-text="cancelText"
:ok-text="okText"
@ok="handleOk"
@cancel="handleCancel"
>
<a-form layout="vertical" ref="formRef" :model="formData" :rules="formRules">
<a-card class="mb-4">
<a-row :gutter="16">
<!-- 基本信息区域 -->
<a-col :span="12">
<a-form-item :label="'站点名称'" name="name" :required="true">
<a-input v-model:value="formData.name"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'所在节点'" name="nodeType" :required="true">
<a-select v-model:value="formData.nodeType" @change="handleChange">
<a-select-option value="jack">已结单</a-select-option>
<a-select-option value="lucy">已作废</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'机构代码'" name="code" :required="true">
<a-input v-model:value="formData.code"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'站点类型'" name="type" :required="true">
<a-select v-model:value="formData.type" @change="handleChange">
<a-select-option value="type1">社区服务中心</a-select-option>
<a-select-option value="type2">养老服务站</a-select-option>
<a-select-option value="type3">综合服务中心</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'负责人姓名'" name="manager" :required="true">
<a-input v-model:value="formData.manager"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'联系电话'" name="phone" :required="true">
<a-input v-model:value="formData.phone" placeholder="请输入联系电话"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'星级等级'" name="starLevel">
<a-select v-model:value="formData.starLevel">
<a-select-option value="1">一星</a-select-option>
<a-select-option value="2">二星</a-select-option>
<a-select-option value="3">三星</a-select-option>
<a-select-option value="4">四星</a-select-option>
<a-select-option value="5">五星</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'人员编制(个)'" name="staffCount">
<a-input-number v-model:value="formData.staffCount" min="0" style="width: 100%"></a-input-number>
</a-form-item>
</a-col>
</a-row>
</a-card>
<!-- 地址信息区域 -->
<a-card class="mb-4" title="地址信息">
<a-row :gutter="16">
<a-col :span="24">
<a-form-item :label="'服务中心地址'" name="address">
<a-cascader
v-model:value="formData.address"
:options="addressOptions"
placeholder="请选择省/市/区"
style="width: 100%"
></a-cascader>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item :label="'详细地址'" name="detailAddress">
<a-input v-model:value="formData.detailAddress" placeholder="请输入详细地址"></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item :label="'地图定位地址'" name="location">
<a-row :gutter="8">
<a-col :span="18">
<a-input
v-model:value="formData.location"
placeholder="请选择地图位置"
readonly
></a-input>
</a-col>
<a-col :span="6">
<a-button type="primary" block @click="openMapSelector">选择地图位置</a-button>
</a-col>
</a-row>
</a-form-item>
</a-col>
</a-row>
</a-card>
<!-- 站点信息区域 -->
<a-card class="mb-4" title="站点信息">
<a-row :gutter="16">
<a-col :span="12">
<a-form-item :label="'建成时间'" name="buildTime">
<a-date-picker
v-model:value="formData.buildTime"
format="YYYY-MM-DD"
placeholder="请选择建成时间"
></a-date-picker>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'建筑面积(平方米)'" name="area">
<a-input-number
v-model:value="formData.area"
min="0"
style="width: 100%"
placeholder="请输入建筑面积"
></a-input-number>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item :label="'服务介绍'" name="description">
<a-textarea
v-model:value="formData.description"
rows="4"
placeholder="请输入服务介绍"
></a-textarea>
</a-form-item>
</a-col>
</a-row>
</a-card>
<!-- 服务信息区域 -->
<a-card class="mb-4" title="服务信息">
<a-row :gutter="16">
<a-col :span="12">
<a-form-item :label="'开始营业时间'" name="openTime">
<a-time-picker
v-model:value="formData.openTime"
format="HH:mm"
placeholder="请选择开始营业时间"
></a-time-picker>
<a-time-picker
v-model:value="formData.closeTime"
format="HH:mm"
placeholder="请选择结束营业时间"
></a-time-picker>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'营业状态'" name="businessStatus">
<a-select v-model:value="formData.businessStatus">
<a-select-option value="open">营业中</a-select-option>
<a-select-option value="closed">已关闭</a-select-option>
<a-select-option value="suspended">暂停营业</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item name="services">
<template #label>
<span>
提供服务
<a-tooltip>
<template #title>
勾选以下服务类型在小程序可见
</template>
<question-circle-outlined class="info-icon" />
</a-tooltip>
</span>
</template>
<div class="service-tags">
<a-tag
v-for="service in allServices"
:key="service.value"
:checked="formData.services?.includes(service.value)"
@click="handleServiceClick(service.value)"
:class="{'ant-tag-checkable-checked': formData.services?.includes(service.value)}"
class="service-tag"
>
{{ service.label }}
</a-tag>
</div>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'是否有厨房'" name="hasKitchen">
<a-select v-model:value="formData.hasKitchen">
<a-select-option value="yes"></a-select-option>
<a-select-option value="no"></a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'提供餐饮'" name="provideMeal">
<a-select v-model:value="formData.provideMeal">
<a-select-option value="yes"></a-select-option>
<a-select-option value="no"></a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'支持送餐'" name="supportDelivery">
<a-select v-model:value="formData.supportDelivery">
<a-select-option value="yes"></a-select-option>
<a-select-option value="no"></a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'助餐点名称'" name="mealPointName">
<a-input v-model:value="formData.mealPointName" placeholder="请输入助餐点名称"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'床位数'" name="bedCount" :required="true">
<a-input-number v-model:value="formData.bedCount" placeholder="请输入床位数" min="0" style="width: 100%"></a-input-number>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'日间照料中心名称'" name="daycareCenterName">
<a-input v-model:value="formData.daycareCenterName" placeholder="请输入日间照料中心名称"></a-input>
</a-form-item>
</a-col>
</a-row>
</a-card>
<!-- 图片上传区域 -->
<a-card class="mb-4" title="图片上传">
<a-row :gutter="16">
<a-col :span="12">
<a-form-item :label="'资质附件'" name="qualificationFiles">
<a-upload
list-type="picture-card"
v-model:file-list="formData.qualificationFiles"
:before-upload="beforeUpload"
>
<div v-if="formData.qualificationFiles.length < 5">
<plus-outlined />
<div class="ant-upload-text">上传</div>
</div>
</a-upload>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :label="'站点图片'" name="siteImages">
<a-upload
list-type="picture-card"
v-model:file-list="formData.siteImages"
:before-upload="beforeUpload"
>
<div v-if="formData.siteImages.length < 5">
<plus-outlined />
<div class="ant-upload-text">上传</div>
</div>
</a-upload>
</a-form-item>
</a-col>
</a-row>
</a-card>
</a-form>
</a-modal>
</template>
<script setup>
import { cloneDeep } from 'lodash-es'
import { QuestionCircleOutlined, PlusOutlined } from '@ant-design/icons-vue'
import apis from '@/apis'
import { useModal, useForm } from '@/hooks'
import { menuTypeEnum, statusTypeEnum } from '@/enums/system'
import { ref, reactive } from 'vue'
import { config } from '@/config'
import { useI18n } from 'vue-i18n'
import storage from '@/utils/storage'
import { message } from 'ant-design-vue'
const emit = defineEmits(['ok'])
const { t } = useI18n() // t
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formData, formRef, formRules, resetForm } = useForm()
//
formData.value = {
name: '', //
parent_id: '',
nodeType: '',
code: '',
type: '',
manager: '',
phone: '',
starLevel: '',
staffCount: 0,
address: [], //
detailAddress: '',
location: '', //
buildTime: null, //
area: 0, //
description: '', //
openTime: null, //
closeTime: null, //
businessStatus: '', //
services: [], //
hasKitchen: '', //
provideMeal: '', //
supportDelivery: '', //
mealPointName: '', //
bedCount: 0, //
daycareCenterName: '', //
qualificationFiles: [], //
siteImages: [], //
resources: []
}
//
formRules.value = {
name: [
{ required: true, message: '请输入站点名称' }
],
nodeType: [
{ required: true, message: '请选择所在节点' }
],
code: [
{ required: true, message: '请输入机构代码' }
],
type: [
{ required: true, message: '请选择站点类型' }
],
manager: [
{ required: true, message: '请输入负责人姓名' }
],
phone: [
{ required: true, message: '请输入联系电话' },
{
pattern: /^1[3-9]\d{9}$/,
message: '请输入正确的联系电话'
}
],
bedCount: [
{ required: true, message: '请输入床位数' },
{
validator: (_, value) => {
if (value !== null && value !== undefined && value !== '') {
if (typeof value === 'number' && value >= 0) {
return Promise.resolve();
}
return Promise.reject(new Error('床位数必须为非负数'));
}
return Promise.reject(new Error('请输入床位数'));
}
}
],
address: { required: true, message: '请选择省市区' },
detailAddress: { required: true, message: '请输入详细地址' },
buildTime: { required: true, message: '请选择建成时间' },
area: {
required: true,
validator: (_, value) => {
if (value && value > 0) {
return Promise.resolve();
}
return Promise.reject(new Error('请输入有效的建筑面积'));
}
},
openTime: { required: true, message: '请选择开始营业时间' },
closeTime: { required: true, message: '请选择结束营业时间' },
businessStatus: { required: true, message: '请选择营业状态' },
services: {
required: true,
validator: (_, value) => {
if (value && value.length > 0) {
return Promise.resolve();
}
return Promise.reject(new Error('请至少选择一项服务'));
}
},
hasKitchen: { required: true, message: '请选择是否有厨房' },
provideMeal: { required: true, message: '请选择是否提供餐饮' }
}
//
const columns = [
{ title: t('pages.system.menu.form.path'), dataIndex: 'types', key: 'types' },
{ title: t('button.action'), dataIndex: 'action', key: 'action' }
]
//
const reqType = ['GET', 'POST', 'PUT', 'PATCH', 'HEAD', 'DELETE']
//
const cancelText = ref(t('button.cancel'))
const okText = ref(t('button.confirm'))
const platform = ref('')
// -
const addressOptions = ref([
{
value: 'beijing',
label: '北京',
children: [
{
value: 'haidian',
label: '海淀区',
children: [
{ value: 'zhongguancun', label: '中关村' },
{ value: 'wudaokou', label: '五道口' }
]
},
{
value: 'chaoyang',
label: '朝阳区',
children: [
{ value: 'cbd', label: 'CBD' },
{ value: 'sanlitun', label: '三里屯' }
]
}
]
},
{
value: 'shanghai',
label: '上海',
children: [
{
value: 'pudong',
label: '浦东新区',
children: [
{ value: 'lujiazui', label: '陆家嘴' },
{ value: 'zhangjiang', label: '张江' }
]
}
]
}
])
//
const allServices = [
{ value: 'meal', label: '助餐' },
{ value: 'daycare', label: '日间照料' },
{ value: 'equipment', label: '辅具租赁' },
{ value: 'entertainment', label: '休闲/娱乐' },
{ value: 'health', label: '健康管理' }
]
/**
* 新建
*/
function handleCreate() {
formData.value.resources = []
formData.value.qualificationFiles = []
formData.value.siteImages = []
showModal({
type: 'create',
title: '新增服务站点',
})
}
/**
* 添加下级
*/
function handleCreateChild(record = {}) {
formData.value.resources = []
formData.value.qualificationFiles = []
formData.value.siteImages = []
showModal({
type: 'create',
title: '新增服务站点',
})
formData.value.parent_id = record.id
}
/**
* 编辑
*/
async function handleEdit(record = {}) {
showModal({
type: 'edit',
title: t('pages.system.menu.edit'),
})
const { data } = await apis.menu.getMenu(record.id).catch(() => {
throw new Error()
})
formData.value = cloneDeep(data)
formData.value.properties = formData.value.properties ? JSON.parse(formData.value.properties) : ''
formData.value.resources = formData.value.resources || []
formData.value.qualificationFiles = formData.value.qualificationFiles || []
formData.value.siteImages = formData.value.siteImages || []
platform.value = data.platform
}
/**
* 确定提交
*/
function handleOk() {
formRef.value
.validateFields()
.then(async (values) => {
try {
showLoading()
const params = {
...values,
}
params.sequence = Number.parseInt(params.sequence) || 0
params.properties = JSON.stringify(params.properties)
//
params.province = params.address[0]
params.city = params.address[1]
params.district = params.address[2]
let result = null
switch (modal.value.type) {
case 'create':
params.platform = storage.local.getItem('platform')
result = await apis.menu.createMenu(params).catch(() => {
throw new Error()
})
break
case 'edit':
newApiData()
params.resources = formData.value.resources
params.platform = platform.value
result = await apis.menu.updateMenu(formData.value.id, params).catch(() => {
throw new Error()
})
break
}
hideLoading()
if (config('http.code.success') === result?.success) {
hideModal()
emit('ok')
}
} catch (error) {
hideLoading()
}
})
.catch(() => {
hideLoading()
})
}
/**
* 取消
*/
function handleCancel() {
hideModal()
}
/**
* 处理API数据
*/
function newApiData() {
if (formData.value.resources)
formData.value.resources.forEach((item) => {
item.menu_id = formData.value.id
})
}
/**
* 关闭后重置
*/
function onAfterClose() {
resetForm()
hideLoading()
}
/**
* 添加API
*/
function handleAddApi() {
formData.value.resources.push({
method: 'GET',
path: '',
})
}
/**
* 删除API
*/
function handleDelete(index) {
formData.value.resources.splice(index, 1)
}
/**
* 处理服务点击事件
*/
function handleServiceClick(value) {
if (!formData.value.services) {
formData.value.services = []
}
const index = formData.value.services.indexOf(value)
if (index > -1) {
//
formData.value.services.splice(index, 1)
} else {
//
formData.value.services.push(value)
}
}
/**
* 打开地图选择器
*/
function openMapSelector() {
//
// 使
formData.value.location = '北京市海淀区中关村大街1号 (经纬度: 39.9847, 116.3055)'
}
/**
* 上传前处理
*/
function beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
if (!isJpgOrPng) {
message.error('只能上传JPG/PNG格式的图片!')
return false
}
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
message.error('图片大小不能超过2MB!')
return false
}
return true
}
defineExpose({
handleCreate,
handleCreateChild,
handleEdit,
})
</script>
<style lang="less" scoped>
.service-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px 0;
}
//
.service-tag {
cursor: pointer;
&.ant-tag-checkable-checked {
background-color: #1890ff; //
color: #fff; //
border-color: #1890ff;
&:hover {
background-color: #40a9ff;
border-color: #40a9ff;
}
}
&:not(.ant-tag-checkable-checked) {
&:hover {
border-color: #1890ff;
}
}
}
//
.info-icon {
margin-left: 4px;
color: #1890ff;
cursor: pointer;
}
.ant-upload-list {
margin-top: 8px;
}
</style>

View File

@ -0,0 +1,459 @@
<template>
<div class="org-management">
<!-- <div class="header">
<h1>组织管理</h1>
<a-button type="primary" @click="showAddModal()">添加根节点</a-button>
</div> -->
<div class="org-table">
<a-table
:columns="columns"
:data-source="dataSource"
:pagination="false"
row-key="orgId"
:expand-icon-as-cell="false"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'projectType'">
<a-tag :color="record.projectType === 'Supervision' ? 'blue' : 'green'">
{{ record.projectType === 'Supervision' ? '监管' : '居家养老床位' }}
</a-tag>
</template>
<template v-if="column.key === 'status'">
<a-tag :color="record.status === 0 ? 'green' : 'red'">
{{ record.status === 0 ? '启用' : '禁用' }}
</a-tag>
</template>
<template v-if="column.key === 'actions'">
<div class="actions">
<a-button
size="small"
type="primary"
@click="showAddModal(record)"
v-if="record.projectType === 'Supervision'"
>
添加子节点
</a-button>
<a-button
size="small"
danger
@click="handleDelete(record)"
>
删除
</a-button>
</div>
</template>
</template>
</a-table>
</div>
<!-- 添加节点模态框 -->
<a-modal
v-model:visible="addModalVisible"
:title="isEditing ? '编辑节点' : '添加节点'"
@ok="handleAdd"
@cancel="handleCancel"
:confirm-loading="confirmLoading"
>
<a-form
ref="formRef"
:model="formState"
:rules="rules"
layout="vertical"
>
<a-form-item label="节点名称" name="name">
<a-input v-model:value="formState.name" placeholder="请输入节点名称" />
</a-form-item>
<a-form-item label="节点类型" name="projectType">
<a-select v-model:value="formState.projectType" placeholder="请选择节点类型">
<a-select-option value="Supervision">监管</a-select-option>
<a-select-option value="HomeCareBed">居家养老床位</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="状态" name="status">
<a-radio-group v-model:value="formState.status">
<a-radio :value="0">启用</a-radio>
<a-radio :value="1">禁用</a-radio>
</a-radio-group>
</a-form-item>
</a-form>
</a-modal>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { message, Modal } from 'ant-design-vue';
// subOrgList children
const convertData = (data) => {
return data.map(item => {
const converted = {
...item,
key: item.orgId, // 使 orgId key
};
if (item.subOrgList && item.subOrgList.length > 0) {
converted.children = convertData(item.subOrgList);
}
return converted;
});
};
//
const originalData = ref([
{
"id": 5066,
"orgId": "1813150290069417984",
"name": "南通市通州区互联网+智慧养老居家上门服务项目",
"path": "/0/1813150290069417984",
"parentId": "0",
"status": 0,
"tenantId": "1813150290048446464",
"projectType": "Supervision",
"subOrgList": [
{
"id": 5093,
"orgId": "1813400548804390913",
"name": "东社镇",
"parentId": "1813150290069417984",
"path": "/0/1813150290069417984/1813400548804390913",
"status": 0,
"tenantId": "1813150290048446464",
"projectType": "Supervision",
"createBy": "1694238554834726912",
"createTime": "2024-07-17T10:29:17",
"updateBy": "1694238554834726912",
"updateTime": "2024-07-17T10:29:17",
"subOrgList": [
{
"id": 5094,
"orgId": "1813400640336556032",
"name": "东社镇服务站",
"parentId": "1813400548804390913",
"path": "/0/1813150290069417984/1813400548804390913/1813400640336556032",
"status": 0,
"tenantId": "1813150290048446464",
"projectType": "HomeCareBed",
"createBy": "1694238554834726912",
"createTime": "2024-07-17T10:29:39",
"updateBy": "1694238554834726912",
"updateTime": "2024-07-17T10:29:39",
"subOrgList": [],
"disabled": false
}
],
"disabled": false
},
{
"id": 5071,
"orgId": "1813396942931881985",
"name": "二甲镇",
"parentId": "1813150290069417984",
"path": "/0/1813150290069417984/1813396942931881985",
"status": 0,
"tenantId": "1813150290048446464",
"projectType": "Supervision",
"createBy": "1694238554834726912",
"createTime": "2024-07-17T10:14:57",
"updateBy": "1694238554834726912",
"updateTime": "2024-07-17T10:14:57",
"subOrgList": [
{
"id": 5072,
"orgId": "1813397035642646528",
"name": "二甲镇服务站",
"parentId": "1813396942931881985",
"path": "/0/1813150290069417984/1813396942931881985/1813397035642646528",
"status": 0,
"tenantId": "1813150290048446464",
"projectType": "HomeCareBed",
"createBy": "1694238554834726912",
"createTime": "2024-07-17T10:15:19",
"updateBy": "1694238554834726912",
"updateTime": "2024-07-17T10:15:19",
"subOrgList": [],
"disabled": false
}
],
"disabled": false
},
{
"id": 5091,
"orgId": "1813400338249674753",
"name": "五接镇",
"parentId": "1813150290069417984",
"path": "/0/1813150290069417984/1813400338249674753",
"status": 0,
"tenantId": "1813150290048446464",
"projectType": "Supervision",
"createBy": "1694238554834726912",
"createTime": "2024-07-17T10:28:27",
"updateBy": "1694238554834726912",
"updateTime": "2024-07-17T10:28:27",
"subOrgList": [
{
"id": 5092,
"orgId": "1813400446438469632",
"name": "五接镇服务站",
"parentId": "1813400338249674753",
"path": "/0/1813150290069417984/1813400338249674753/1813400446438469632",
"status": 0,
"tenantId": "1813150290048446464",
"projectType": "HomeCareBed",
"createBy": "1694238554834726912",
"createTime": "2024-07-17T10:28:53",
"updateBy": "1694238554834726912",
"updateTime": "2024-07-17T10:28:53",
"subOrgList": [],
"disabled": false
}
],
"disabled": false
}
],
"disabled": false
}
]);
//
const dataSource = ref([]);
//
const addModalVisible = ref(false);
const isEditing = ref(false);
const currentParent = ref(null);
const confirmLoading = ref(false);
//
const formState = reactive({
name: '',
projectType: 'Supervision',
status: 0
});
//
const rules = {
name: [
{ required: true, message: '请输入节点名称', trigger: 'blur' }
],
projectType: [
{ required: true, message: '请选择节点类型', trigger: 'change' }
]
};
//
const columns = [
{
title: '组织名称',
dataIndex: 'name',
key: 'name',
},
{
title: '组织类型',
dataIndex: 'projectType',
key: 'projectType',
width: 150,
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
width: 100,
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
width: 180,
},
{
title: '更新时间',
dataIndex: 'updateTime',
key: 'updateTime',
width: 180,
},
{
title: '操作',
key: 'actions',
width: 200,
},
];
//
const initData = () => {
dataSource.value = convertData(originalData.value);
};
//
const handleDelete = (record) => {
Modal.confirm({
title: '确认删除',
content: `确定要删除"${record.name}"吗?${record.children && record.children.length > 0 ? '此操作将同时删除所有子节点。' : ''}`,
onOk() {
deleteNode(originalData.value, record.orgId);
initData();
message.success('删除成功');
}
});
};
//
const deleteNode = (data, orgId) => {
for (let i = 0; i < data.length; i++) {
if (data[i].orgId === orgId) {
data.splice(i, 1);
return true;
}
if (data[i].subOrgList && data[i].subOrgList.length > 0) {
if (deleteNode(data[i].subOrgList, orgId)) {
return true;
}
}
}
return false;
};
//
const showAddModal = (parent = null) => {
currentParent.value = parent;
isEditing.value = false;
//
Object.assign(formState, {
name: '',
projectType: 'Supervision',
status: 0
});
addModalVisible.value = true;
};
//
const handleAdd = async () => {
if (!formState.name) {
message.error('请输入节点名称');
return;
}
confirmLoading.value = true;
try {
//
await new Promise(resolve => setTimeout(resolve, 500));
const newNode = {
id: Date.now(),
orgId: `new_${Date.now()}`,
name: formState.name,
parentId: currentParent.value ? currentParent.value.orgId : '0',
path: currentParent.value ? `${currentParent.value.path}/${formState.name}` : `/0/${formState.name}`,
status: formState.status,
tenantId: "1813150290048446464",
projectType: formState.projectType,
createBy: "system",
createTime: new Date().toISOString().split('T')[0],
updateBy: "system",
updateTime: new Date().toISOString().split('T')[0],
subOrgList: [],
disabled: false
};
if (currentParent.value) {
// subOrgList
addChildNode(originalData.value, currentParent.value.orgId, newNode);
} else {
//
originalData.value.push(newNode);
}
//
initData();
addModalVisible.value = false;
message.success('添加成功');
} catch (error) {
console.error('添加失败:', error);
message.error('添加失败');
} finally {
confirmLoading.value = false;
}
};
//
const addChildNode = (data, parentId, newNode) => {
for (let i = 0; i < data.length; i++) {
if (data[i].orgId === parentId) {
if (!data[i].subOrgList) {
data[i].subOrgList = [];
}
data[i].subOrgList.push(newNode);
return true;
}
if (data[i].subOrgList && data[i].subOrgList.length > 0) {
if (addChildNode(data[i].subOrgList, parentId, newNode)) {
return true;
}
}
}
return false;
};
//
const handleCancel = () => {
addModalVisible.value = false;
};
onMounted(() => {
initData();
});
</script>
<style scoped>
.org-management {
margin: 0 auto;
padding: 10px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 0 10px;
}
.org-table {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.actions {
display: flex;
gap: 8px;
}
.header h1 {
margin: 0;
color: #1f1f1f;
font-size: 24px;
font-weight: 600;
}
:deep(.ant-table-thead > tr > th) {
background-color: #fafafa;
font-weight: 600;
}
:deep(.ant-table-row-level-0) {
font-weight: 600;
}
:deep(.ant-table-row-level-1) {
font-weight: 500;
}
:deep(.ant-table-row-level-2) {
font-weight: 400;
}
</style>

View File

@ -0,0 +1,283 @@
<template>
<!-- 主弹框标题显示当前组织名称 -->
<a-modal
:title="`${orgRecord.orgName || '组织'} - 设备管理`"
v-model:visible="visible"
:maskClosable="false"
:width="800"
@cancel="handleCancel"
>
<!-- 顶部添加设备按钮 -->
<div class="flex justify-end mb-4" style="margin: 10px 0;">
<a-button type="primary" @click="showAddModal = true">
<plus-outlined />
添加设备
</a-button>
</div>
<!-- 设备表格 -->
<a-table
:columns="columns"
:data-source="devices"
row-key="deviceId"
:pagination="false"
>
<!-- 连接状态列用徽章显示 -->
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'online'">
<a-badge :status="record.online ? 'success' : 'error'">
{{ record.online ? '在线' : '离线' }}
</a-badge>
</template>
<!-- 操作列编辑/删除 -->
<template v-if="column.key === 'action'">
<a-button size="small" type="link" @click="handleEdit(record)">
编辑
</a-button>
<a-button size="small" type="link" danger @click="handleDelete(record)">
删除
</a-button>
</template>
</template>
</a-table>
<!-- 添加/编辑设备子弹框 -->
<a-modal
:title="isEditing ? '编辑设备' : '添加设备'"
v-model:visible="showAddModal"
:maskClosable="false"
@cancel="showAddModal = false"
@ok="handleFormSubmit"
>
<a-form
:model="formData"
:rules="formRules"
ref="formRef"
layout="horizontal"
:label-col="{ span: 6 }"
:wrapper-col="{ span: 16 }"
>
<a-form-item
name="deviceId"
label="设备ID"
:rules="[{ required: true, message: '请输入设备ID' }]"
>
<a-input
v-model:value="formData.deviceId"
placeholder="请输入设备ID"
:disabled="isEditing"
/>
</a-form-item>
<a-form-item
name="deviceName"
label="设备名称"
:rules="[{ required: true, message: '请输入设备名称' }]"
>
<a-input
v-model:value="formData.deviceName"
placeholder="请输入设备名称"
/>
</a-form-item>
<a-form-item
name="deviceType"
label="设备类型"
:rules="[{ required: true, message: '请选择设备类型' }]"
>
<a-select
v-model:value="formData.deviceType"
placeholder="请选择设备类型"
>
<a-select-option value="sensor">传感器</a-select-option>
<a-select-option value="controller">控制器</a-select-option>
<a-select-option value="gateway">网关</a-select-option>
<a-select-option value="camera">摄像头</a-select-option>
</a-select>
</a-form-item>
<a-form-item
name="deviceManufacturer"
label="设备供应商"
:rules="[{ required: true, message: '请选择设备供应商' }]"
>
<a-select
v-model:value="formData.deviceManufacturer"
placeholder="请选择设备供应商"
>
<a-select-option value="vendor1">供应商A</a-select-option>
<a-select-option value="vendor2">供应商B</a-select-option>
<a-select-option value="vendor3">供应商C</a-select-option>
<a-select-option value="vendor4">供应商D</a-select-option>
</a-select>
</a-form-item>
</a-form>
</a-modal>
</a-modal>
</template>
<script setup>
import { ref, reactive, defineProps, defineEmits, defineExpose } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { message, Form } from 'ant-design-vue';
// 1. props
const props = defineProps({
orgRecord: {
type: Object,
default: () => ({ orgName: '默认组织' }), //
required: false
}
})
//
const visible = ref(false);
const showAddModal = ref(false);
const formRef = ref(null);
const isEditing = ref(false);
// 2.
const columns = ref([
{ title: '设备ID', dataIndex: 'deviceId', key: 'deviceId', align: 'center' },
{ title: '设备名称', dataIndex: 'deviceName', key: 'deviceName', align: 'center' },
{
title: '设备类型',
dataIndex: 'deviceType',
key: 'deviceType',
align: 'center',
render: (type) => {
const typeMap = {
'sensor': '传感器', 'controller': '控制器',
'gateway': '网关', 'camera': '摄像头'
};
return typeMap[type] || type;
}
},
{
title: '设备供应商',
dataIndex: 'deviceManufacturer',
key: 'deviceManufacturer',
align: 'center',
render: (vendor) => {
const vendorMap = {
'vendor1': '供应商A', 'vendor2': '供应商B',
'vendor3': '供应商C', 'vendor4': '供应商D'
};
return vendorMap[vendor] || vendor;
}
},
{ title: '连接状态', dataIndex: 'online', key: 'online', align: 'center' },
{ title: '操作', key: 'action', align: 'center', fixed: 'right', width: 120 }
]);
// orgRecord.id
const devices = ref([
{ deviceId: 'DEV001', deviceName: '温度传感器', deviceType: 'sensor', deviceManufacturer: 'vendor1', online: true },
{ deviceId: 'DEV002', deviceName: '智能控制器', deviceType: 'controller', deviceManufacturer: 'vendor2', online: false },
{ deviceId: 'DEV003', deviceName: '网络网关', deviceType: 'gateway', deviceManufacturer: 'vendor3', online: true },
]);
//
const formData = reactive({
deviceId: '',
deviceName: '',
deviceType: '',
deviceManufacturer: '',
});
//
const formRules = reactive({
deviceId: [{ required: true, message: '请输入设备ID' }],
deviceName: [{ required: true, message: '请输入设备名称' }],
deviceType: [{ required: true, message: '请选择设备类型' }],
deviceManufacturer: [{ required: true, message: '请选择设备供应商' }],
});
// 3.
function open(options = {}) {
const { orgRecord } = options;
if (orgRecord) {
//
props.orgRecord = orgRecord;
}
visible.value = true;
}
//
function handleCancel() {
visible.value = false;
//
showAddModal.value = false;
resetForm();
}
// /
async function handleFormSubmit() {
try {
//
await formRef.value.validate();
if (isEditing.value) {
//
const index = devices.value.findIndex(dev => dev.deviceId === formData.deviceId);
if (index !== -1) {
devices.value[index] = { ...formData, online: devices.value[index].online };
message.success('设备编辑成功');
}
} else {
// ID
const isExist = devices.value.some(dev => dev.deviceId === formData.deviceId);
if (isExist) {
message.error('设备ID已存在');
return;
}
// 线
devices.value.push({ ...formData, online: false });
message.success('设备添加成功');
}
//
showAddModal.value = false;
resetForm();
} catch (error) {
console.log('表单验证失败:', error);
}
}
//
function resetForm() {
if (formRef.value) {
formRef.value.resetFields();
}
isEditing.value = false;
formData.deviceId = '';
formData.deviceName = '';
formData.deviceType = '';
formData.deviceManufacturer = '';
}
//
function handleEdit(record) {
isEditing.value = true;
formData.deviceId = record.deviceId;
formData.deviceName = record.deviceName;
formData.deviceType = record.deviceType;
formData.deviceManufacturer = record.deviceManufacturer;
showAddModal.value = true;
}
//
function handleDelete(record) {
devices.value = devices.value.filter(dev => dev.deviceId !== record.deviceId);
message.success('设备已删除');
}
// 4.
defineExpose({
open,
});
</script>
<style scoped>
/* 可选:调整弹框内边距 */
.ant-modal-body {
padding: 20px;
}
</style>

View File

@ -16,14 +16,14 @@
</a-col> </a-col>
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item :label="'负责人'" name="name"> <a-form-item :label="'负责人'" name="contactPerson">
<a-input :placeholder="'请输负责人'" v-model:value="searchFormData.name"></a-input> <a-input :placeholder="'请输负责人'" v-model:value="searchFormData.contactPerson"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item :label="'等级'" name="type"> <a-form-item :label="'等级'" name="level">
<a-select v-model:value="searchFormData.type" @change="handleChange"> <a-select v-model:value="searchFormData.level" @change="handleChange">
<a-select-option value="jack">已结单</a-select-option> <a-select-option value="jack">已结单</a-select-option>
<a-select-option value="lucy">已作废</a-select-option> <a-select-option value="lucy">已作废</a-select-option>
</a-select> </a-select>
@ -31,8 +31,8 @@
</a-col> </a-col>
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item :label="'可用钱包'" name="type"> <a-form-item :label="'可用钱包'" name="wallet">
<a-select v-model:value="searchFormData.type" @change="handleChange"> <a-select v-model:value="searchFormData.wallet" @change="handleChange">
<a-select-option value="jack">已结单</a-select-option> <a-select-option value="jack">已结单</a-select-option>
<a-select-option value="lucy">已作废</a-select-option> <a-select-option value="lucy">已作废</a-select-option>
</a-select> </a-select>
@ -40,8 +40,8 @@
</a-col> </a-col>
<a-col v-bind="colSpan"> <a-col v-bind="colSpan">
<a-form-item :label="'收否中标'" name="type"> <a-form-item :label="'收否中标'" name="bidStatus">
<a-select v-model:value="searchFormData.type" @change="handleChange"> <a-select v-model:value="searchFormData.bidStatus" @change="handleChange">
<a-select-option value="jack">已结单</a-select-option> <a-select-option value="jack">已结单</a-select-option>
<a-select-option value="lucy">已作废</a-select-option> <a-select-option value="lucy">已作废</a-select-option>
</a-select> </a-select>
@ -117,6 +117,8 @@
</a-card> </a-card>
<edit-dialog @ok="onOk" ref="editDialogRef" /> <edit-dialog @ok="onOk" ref="editDialogRef" />
<!-- 设备管理弹框组件 -->
<device-management-modal ref="deviceManagementModalRef" />
</template> </template>
<script setup> <script setup>
@ -129,7 +131,8 @@ import { menuTypeEnum, statusTypeEnum } from '@/enums/system'
import { usePagination, useForm } from '@/hooks' import { usePagination, useForm } from '@/hooks'
import { formatUtcDateTime } from '@/utils/util' import { formatUtcDateTime } from '@/utils/util'
import EditDialog from './components/EditDialog.vue' import EditDialog from './components/EditDialog.vue'
// //
import DeviceManagementModal from './components/AddEquipments.vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import storage from '@/utils/storage' import storage from '@/utils/storage'
@ -141,6 +144,11 @@ const { t } = useI18n() // 解构出t方法
// / // /
const showImportModal = ref(false) const showImportModal = ref(false)
// ref -
const deviceManagementModalRef = ref(null)
// ref
const editDialogRef = ref(null)
const columns = ref([ const columns = ref([
{ title: '序号', dataIndex: 'serialNumber', key: 'serialNumber', fixed: true, width: 180 }, { title: '序号', dataIndex: 'serialNumber', key: 'serialNumber', fixed: true, width: 180 },
{ title: '机构编号', dataIndex: 'orgCode', key: 'orgCode', width: 240 }, { title: '机构编号', dataIndex: 'orgCode', key: 'orgCode', width: 240 },
@ -161,7 +169,6 @@ const columns = ref([
const { listData, loading, showLoading, hideLoading, searchFormData, paginationState, resetPagination } = const { listData, loading, showLoading, hideLoading, searchFormData, paginationState, resetPagination } =
usePagination() usePagination()
const { resetForm } = useForm() const { resetForm } = useForm()
const editDialogRef = ref()
getMenuList() getMenuList()
@ -305,16 +312,57 @@ function handleDetail(record) {
} }
function handleToggleStatus(record) { function handleToggleStatus(record) {
// / //
const newStatus = record.status === 'active' ? 'inactive' : 'active' const isActivate = record.status !== 'active';
console.log(`切换状态为: ${newStatus}`, record) const actionText = isActivate ? '启用' : '停用';
message.info(`${record.status === 'active' ? '停用' : '启用'}功能待实现`) const confirmText = isActivate ? '确定要启用该组织吗?' : '确定要停用该组织吗?';
Modal.confirm({
title: `${actionText}组织`,
content: confirmText,
okText: '确定',
cancelText: '取消',
okType: isActivate ? 'primary' : 'danger',
onOk: async () => {
try {
// API
console.log(`${actionText}操作执行`, record);
// API
// const { success } = await apis.org.toggleStatus({ id: record.id, status: isActivate ? 'active' : 'inactive' });
//
const success = true;
if (success) {
message.success(`${actionText}成功`);
//
record.status = isActivate ? 'active' : 'inactive';
//
await getMenuList();
} else {
message.error(`${actionText}失败`);
}
} catch (error) {
message.error(`${actionText}过程中发生错误: ${error.message}`);
}
},
onCancel() {
console.log('取消操作');
},
});
} }
//
function handleDeviceManagement(record) { function handleDeviceManagement(record) {
// //
console.log('设备管理', record) if (deviceManagementModalRef.value) {
message.info('设备管理功能待实现') // open
deviceManagementModalRef.value.open({ orgRecord: record });
} else {
console.error('设备管理弹框组件未正确初始化');
message.error('设备管理功能加载失败,请刷新页面重试');
}
} }
</script> </script>
@ -344,6 +392,3 @@ function handleDeviceManagement(record) {
} }
} }
</style> </style>