feat:设备类标页面

dict.js

@@ -1,7 +1,7 @@
 (function () {
     const result = []
-    const dictId = "1943578448759869442"
-    const dictType = "dh_org_type"
+    const dictId = "1944581845801713666"
+    const dictType = "dh_device_model"
     let children = document.querySelector("#doc").children;
     if (children) {
         children = Array.from(children)

src/api/device/deviceManage.ts

@@ -1,10 +1,14 @@
 import request from "/@/utils/request"
 
-export function fetchList(query?: Object) {
+export function fetchList(query: any) {
   return request({
     url: '/admin/deviceManage/page',
-    method: 'get',
-    params: query
+    method: 'post',
+    params: {
+			current: query.current,
+			size: query.size,
+		},
+    data: query
   })
 }
 

src/components/DraggableOrgTree/index.vue

@@ -0,0 +1,261 @@
+<template>
+	<Splitpanes @resize="state.treeWidth = $event[0].size">
+		<pane :size="state.treeWidth">
+			<!-- 树 -->
+			<div v-loading="state.loading" class="h-full flex flex-col m-1">
+				<!-- 头部区域 -->
+				<div class="flex items-center pb-2 shadow-gray-400 z-10"
+					style="box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.1)">
+					<div class="w-4/5">
+						<el-input v-model="state.searchName" suffix-icon="search" :placeholder="placeholder" clearable
+							@change="handleSearchInputChange" />
+					</div>
+					<div class="flex-1 ml-[5%] leading-none" v-if="showExpand">
+						<el-dropdown :hide-on-click="false">
+							<el-icon style="transform: rotate(90deg)">
+								<MoreFilled />
+							</el-icon>
+							<template #dropdown>
+								<el-dropdown-menu>
+									<el-dropdown-item>
+										<el-button
+											class="!h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+											link :icon="state.isExpand ? 'expand' : 'fold'"
+											@click="toggleRowExpansionAll(state.isExpand ? false : true)">
+											{{ state.isExpand ? "折叠" : "展开" }}
+										</el-button>
+									</el-dropdown-item>
+								</el-dropdown-menu>
+							</template>
+						</el-dropdown>
+					</div>
+				</div>
+
+				<!-- 树形结构 -->
+				<div class="flex-1 overflow-hidden hover:overflow-auto">
+					<el-tree ref="treeRef" :props="props.props" :data="state.treeDataList" :expand-on-click-node="false"
+						node-key="id" :highlight-current="nodeClickable ? true : false" default-expand-all show-checkbox
+						@node-click="handleNodeClick" @check="handleCheck">
+						<template #default="{ node, data }">
+							<el-tooltip v-if="data.isLock" effect="dark" :content="$t('sysuser.noDataScopeTip')"
+								placement="right">
+								<span>
+									{{ node.label }}
+									<SvgIcon name="ele-Lock" />
+								</span>
+							</el-tooltip>
+						</template>
+					</el-tree>
+				</div>
+
+				<!-- 底部区域 -->
+				<div class="flex justify-center items-center pt-2 z-50 sticky bottom-0 overflow-hidden"
+					style="box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.1)">
+					<el-switch v-model="state.switch" @change="handleSwitchChange" :inactive-text="switchInactiveText"
+						:active-text="switchActiveText"
+						:disabled="nodeClickable && state.checkedTreeNodes.length > 0" />
+				</div>
+			</div>
+		</pane>
+
+		<pane :size="100 - state.treeWidth" class="pl-1 relative">
+			<!-- 折叠按钮 -->
+			<div class="w-[12px] h-[56px] bg-gray-200 absolute left-0 top-[44vh] translate-y-[-50%] transition-all cursor-pointer rounded-tr-2xl rounded-br-2xl"
+				@click="handleClickTreeFold()">
+				<i class="text-gray-400 inline-block text-center leading-[62px] hover:opacity-50">
+					<el-icon>
+						<ArrowLeftBold v-if="state.treeWidth > 0" />
+						<ArrowRightBold v-else />
+					</el-icon>
+				</i>
+			</div>
+
+			<div class="w-full h-full p-3 overflow-auto">
+				<slot name="default" />
+			</div>
+		</pane>
+	</Splitpanes>
+</template>
+
+<script setup lang="ts" name="DraggableOrgTree">
+import { computed } from "vue"
+import { useMessage } from "/@/hooks/message"
+import { getTree } from "/@/api/sys/sysOrg"
+
+const props = withDefaults(
+	defineProps<{
+		placeholder?: string // 输入框占位符
+		showExpand?: boolean // 折叠控制
+		query?: (searchName?: string) => Promise<any> // 查询函数
+		props?: object
+		nodeClickable?: boolean
+		switchInactiveText?: string | undefined
+		switchActiveText?: string | undefined
+		defaultTreeWidth?: number | string
+	}>(),
+	{
+		placeholder: "",
+		showExpand: true,
+		query: (name?: string) => getTree({ orgName: name || "" }),
+		props: () => {
+			return {
+				label: "name",
+				children: "children",
+				value: "id",
+				disabled: "isLock",
+			}
+		},
+		nodeClickable: true,
+		switchInactiveText: "当前级",
+		switchActiveText: "当前级及子级",
+		defaultTreeWidth: 20,
+	},
+)
+const emit = defineEmits(["getSelectNode"])
+
+const treeRef = ref() // 树组件ref
+const state = reactive({
+	searchName: "", // 查询关键字
+	isExpand: true, // 是否展开树所有节点
+	treeWidth: Number(props.defaultTreeWidth), // 树组件宽度
+	treeWidthMemo: Number(props.defaultTreeWidth), // 树组件宽度记录
+	treeDataList: [],
+	curClickedNode: {},
+	checkedTreeNodes: [], // 被勾选的树节点
+	loading: false,
+	switch: false, // switch开关
+})
+// 是否折叠树组件
+const treeVisible = computed(() => state.treeWidth > 0)
+
+// 获取部门树形结构数据
+const getTreeData = () => {
+	if (props.query instanceof Function) {
+		state.loading = true
+		const result = props.query(state.searchName)
+		// 如果查询结果为 Promise 类型，则进行后续处理
+		if ((typeof result === "object" || typeof result === "function") && typeof result.then === "function") {
+			result
+				.then((r: any) => {
+					if (r.data && r.data.length) {
+						r.data = filterVisibleNodes(r.data)
+					}
+					state.treeDataList = r.data
+				})
+				.catch((err) => {
+					useMessage().error(err.msg)
+				})
+				.finally(() => (state.loading = false))
+		}
+	}
+}
+
+// 过滤visible为false
+const filterVisibleNodes = (nodes: Array<any>) => {
+	if (!Array.isArray(nodes)) return [];
+	return nodes.reduce((filtered, node) => {
+		if (node.visible) {
+			const filteredNode = { ...node };
+			if (node.children?.length) {
+				filteredNode.children = filterVisibleNodes(node.children);
+			}
+			filtered.push(filteredNode);
+		} else if (node.children?.length) {
+			// 如果当前节点不是visible，但是它的子节点可能是visible，所以需要继续检查
+			const filteredChildren = filterVisibleNodes(node.children);
+			if (filteredChildren.length > 0) {
+				filtered.push({ ...node, children: filteredChildren });
+			}
+		}
+		return filtered;
+	}, []);
+}
+
+// 点击折叠树组件
+const handleClickTreeFold = () => {
+	if (treeVisible.value) {
+		state.treeWidthMemo = state.treeWidth
+		state.treeWidth = 0
+	} else {
+		state.treeWidth = state.treeWidthMemo
+	}
+}
+
+// 输入框改变
+const handleSearchInputChange = () => {
+	treeRef.value!.setCheckedKeys([], false)
+	state.checkedTreeNodes = []
+	state.curClickedNode = {}
+	getTreeData()
+}
+
+// 点击树形结构节点
+const handleNodeClick = (nodeData: any) => {
+	if (!props.nodeClickable) return
+	state.curClickedNode = nodeData
+	emit("getSelectNode", state.curClickedNode, state.checkedTreeNodes, state.switch)
+}
+
+// 勾选树节点时
+const handleCheck = (data: any, checkStatus: any) => {
+	const { checkedNodes } = checkStatus
+	console.log("checkedNodes", checkedNodes)
+	state.checkedTreeNodes = checkedNodes
+	if (props.nodeClickable && state.checkedTreeNodes.length > 0) {
+		state.switch = false
+	}
+	emit("getSelectNode", state.curClickedNode, state.checkedTreeNodes, state.switch)
+}
+
+// switch改变时
+const handleSwitchChange = () => emit("getSelectNode", state.curClickedNode, state.checkedTreeNodes, state.switch)
+
+// 切换所有节点的展开/收起状态。status：true 为展开，false 为收起
+const toggleRowExpansionAll = (status: boolean) => {
+	state.isExpand = status
+	const nodes = treeRef.value.store._getAllNodes()
+	for (let i = 0; i < nodes.length; i++) {
+		nodes[i].expanded = status
+	}
+}
+
+// 重置数据
+const resetData = () => {
+	state.searchName = ""
+	state.checkedTreeNodes = []
+	state.curClickedNode = {}
+	state.switch = false
+	getTreeData()
+}
+onMounted(() => {
+	getTreeData()
+})
+
+defineExpose({
+	getTreeData,
+	resetData,
+})
+</script>
+
+<style>
+.splitpanes {
+	/* height: initial !important; */
+}
+
+.splitpanes--vertical>.splitpanes__splitter {
+	background: var(--el-color-primary);
+	/* min-width: 2px; */
+	width: 2px;
+	transition: all 0.3s ease;
+}
+
+.splitpanes--vertical>.splitpanes__splitter:active {
+	background: var(--el-color-primary);
+	opacity: 0.6;
+}
+
+.splitpanes--vertical>.splitpanes__splitter:hover {
+	background: var(--el-color-primary);
+	opacity: 0.6;
+}
+</style>

src/components/index.ts

@@ -13,6 +13,7 @@ import SvgIcon from '/@/components/SvgIcon/index.vue';
 import Sign from '/@/components/Sign/index.vue';
 import ChinaArea from '/@/components/ChinaArea/index.vue';
 import OrgSelector from '/@/components/OrgSelector/index.vue';
+import DraggableOrgTree from "/@/components/DraggableOrgTree/index.vue"
 
 import PreviewImage from "/@/components/PreviewImage/index.vue"
 
@@ -61,6 +62,7 @@ export default {
 		app.component('Sign', Sign);
 
 		app.component('PreviewImage', PreviewImage)
+		app.component('DraggableOrgTree', DraggableOrgTree)
 
 		app.component('TagOnline', TagOnline);
 		app.component('TagSex', TagSex);

src/views/device/deviceManage/index.vue

@@ -1,79 +1,98 @@
 <template>
   <div class="layout-padding">
     <div class="layout-padding-auto layout-padding-view">
-      <el-row shadow="hover" v-show="showSearch" class="ml10">
-        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
-          <el-form-item style="width: 250px;" label="状态" prop="isOnline">
-            <dict-select v-model="state.queryForm.isOnline" dict-code="is_nline" />
-          </el-form-item>
-          <el-form-item style="width: 250px;" label="同步状态" prop="isSync">
-            <dict-select v-model="state.queryForm.isSync" dict-code="is_sync" />
-          </el-form-item>
-          <el-form-item>
-            <el-button icon="search" type="primary" @click="getDataList">
-              {{ $t('common.queryBtn') }}
-            </el-button>
-            <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
-          </el-form-item>
-        </el-form>
-      </el-row>
-      <el-row>
-        <div class="mb8" style="width: 100%">
-          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
-            v-auth="'admin_deviceManage_add'">
-            新 增
-          </el-button>
-          <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'admin_deviceManage_del'"
-            @click="handleDelete(selectObjs)">
-            删除
-          </el-button>
-          <right-toolbar v-model:showSearch="showSearch" :export="'admin_deviceManage_export'"
-            @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
-            @queryTable="getDataList"></right-toolbar>
-        </div>
-      </el-row>
-      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-        @sort-change="sortChangeHandle">
-        <el-table-column type="selection" width="40" align="center" />
-        <el-table-column type="index" label="#" width="80" />
-        <el-table-column prop="deviceCode" align="left" min-width="100" label="设备编码" />
-        <el-table-column prop="deviceName" align="left" min-width="150" label="设备名称" />
-        <el-table-column prop="deviceIp" align="left" min-width="150" label="ip" />
-        <el-table-column prop="devicePort" align="left" min-width="100" label="端口" />
-        <el-table-column prop="deviceCategory" align="left" min-width="150" label="设备大类">
-          <template #default="{ row }">
-            <dict-tag :options="device_category" :value="row.deviceCategory" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="deviceManufacturer" align="left" min-width="100" label="厂商类型" />
-        <el-table-column prop="deviceModel" align="left" min-width="100" label="设备型号" />
-        <el-table-column prop="ownerCode" align="left" min-width="150" label="设备所属组织" />
-        <el-table-column prop="isOnline" align="left" min-width="120" label="状态">
-          <template #default="{ row }">
-            <tag-online :isOnline="row.isOnline == 1" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="isSync" align="left" min-width="120" label="同步状态">
-          <template #default="{ row }">
-            <tag-sync :isSync="row.isSync == 1" />
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" fixed="right" width="150">
-          <template #default="scope">
-            <el-button icon="edit-pen" text type="primary" v-auth="'admin_deviceManage_edit'"
-              @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
-            <el-button icon="delete" text type="primary" v-auth="'admin_deviceManage_del'"
-              @click="handleDelete([scope.row.id])">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
-    </div>
+      <draggable-org-Tree ref="draggableDepTreeRef" placeholder="请输入部门名称" :show-expand="true"
+        @getSelectNode="handleGetSelectNode" switch-inactive-text="包含" switch-active-text="不包含" :defaultTreeWidth="20"
+        :nodeClickable="false">
+        <template #default>
 
+          <el-row shadow="hover" v-show="showSearch" class="ml10">
+            <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+              <el-form-item style="width: 250px;" label="设备名" prop="deviceName">
+                <el-input v-model="state.queryForm.deviceName" placeholder="请输入设备名" />
+              </el-form-item>
+              <el-form-item style="width: 250px;" label="状态" prop="isOnline">
+                <dict-select v-model="state.queryForm.isOnline" :options="is_nline" />
+              </el-form-item>
+              <el-form-item style="width: 250px;" label="同步状态" prop="isSync">
+                <dict-select v-model="state.queryForm.isSync" :options="is_sync" />
+              </el-form-item>
+              <el-form-item>
+                <el-button icon="search" type="primary" @click="getDataList">
+                  {{ $t('common.queryBtn') }}
+                </el-button>
+                <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+              </el-form-item>
+            </el-form>
+          </el-row>
+          <el-row>
+            <div class="mb8" style="width: 100%">
+              <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
+                v-auth="'admin_deviceManage_add'">
+                新 增
+              </el-button>
+              <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'admin_deviceManage_del'"
+                @click="handleDelete(selectObjs)">
+                删除
+              </el-button>
+              <right-toolbar v-model:showSearch="showSearch" :export="'admin_deviceManage_export'"
+                @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
+                @queryTable="getDataList"></right-toolbar>
+            </div>
+          </el-row>
+          <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+            :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
+            @sort-change="sortChangeHandle">
+            <el-table-column type="selection" width="40" align="center" />
+            <el-table-column type="index" label="#" width="80" />
+            <el-table-column prop="deviceCode" align="left" min-width="100" label="设备编码" />
+            <el-table-column prop="deviceName" align="left" min-width="150" label="设备名称" />
+            <el-table-column prop="deviceIp" align="left" min-width="150" label="ip" />
+            <el-table-column prop="devicePort" align="left" min-width="100" label="端口" />
+            <el-table-column prop="deviceCategory" align="left" min-width="150" label="设备大类">
+              <template #default="{ row }">
+                <dict-tag :options="device_category" :value="row.deviceCategory" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="deviceManufacturer" align="left" min-width="100" label="厂商类型">
+              <template #default="{ row }">
+                <dict-tag :options="dh_device_manufacturer" :value="row.deviceManufacturer" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="orgName" align="left" min-width="150" label="设备所属组织" />
+            <el-table-column prop="isOnline" align="left" min-width="120" label="状态">
+              <template #default="{ row }">
+                <tag-online :isOnline="row.isOnline == 1" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="isSync" align="left" min-width="120" label="同步状态">
+              <template #default="{ row }">
+                <tag-sync :isSync="row.isSync == 1" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="offlineReason" align="left" min-width="120" label="离线原因">
+              <template #default="{ row }">
+                {{ row.offlineReason }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" fixed="right" width="200">
+              <template #default="scope">
+                <el-button icon="VideoPlay" text type="primary" v-auth="'admin_deviceManage_edit'"
+                  @click="formDialogRef.openDialog(scope.row.id)">预览</el-button>
+                <el-button icon="edit-pen" text type="primary" v-auth="'admin_deviceManage_edit'"
+                  @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
+                <el-button icon="delete" text type="primary" v-auth="'admin_deviceManage_del'"
+                  @click="handleDelete([scope.row.id])">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+        </template>
+      </draggable-org-Tree>
+
+    </div>
     <!-- 编辑、新增  -->
     <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-
   </div>
 </template>
 
@@ -86,7 +105,7 @@ import { useDict } from '/@/hooks/dict';
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import('./form.vue'));
 // 定义查询字典
-const { device_category } = useDict("device_category")
+const { device_category, is_sync, is_nline, dh_device_manufacturer } = useDict("device_category", "is_sync", "is_nline", "dh_device_manufacturer")
 // 定义变量内容
 const formDialogRef = ref()
 // 搜索变量
@@ -95,6 +114,7 @@ const showSearch = ref(true)
 // 多选变量
 const selectObjs = ref([]) as any
 const multiple = ref(true)
+const draggableDepTreeRef = ref()
 
 const state: BasicTableProps = reactive<BasicTableProps>({
   queryForm: {},
@@ -117,6 +137,7 @@ const resetQuery = () => {
   queryRef.value?.resetFields()
   // 清空多选
   selectObjs.value = []
+  draggableDepTreeRef.value.resetData()
   getDataList()
 }
 
@@ -131,6 +152,14 @@ const selectionChangHandle = (objs: { id: string }[]) => {
   multiple.value = !objs.length;
 };
 
+// 树节点选择时
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: boolean) => {
+  state.queryForm.ownerCode = curClickedNode.id
+  state.queryForm.orgCodes = checkedTreeNodes.map((item: any) => item.id)
+  state.queryForm.isInclude = !isDeepTree
+  getDataList()
+}
+
 // 删除操作
 const handleDelete = async (ids: string[]) => {
   try {

src/views/gen/template/form.vue

@@ -24,7 +24,8 @@
 		<template #footer>
 			<span class="dialog-footer">
 				<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
-				<el-button @click="onSubmit" type="primary" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
+				<el-button @click="onSubmit" type="primary" :disabled="loading">{{ $t('common.confirmButtonText')
+				}}</el-button>
 			</span>
 		</template>
 	</el-dialog>
@@ -35,7 +36,7 @@
 import { useMessage } from '/@/hooks/message';
 import { addObj, getObj, putObj } from '/@/api/gen/template';
 import { useI18n } from 'vue-i18n';
-import {rule} from "/@/utils/validate";
+import { rule } from "/@/utils/validate";
 
 const CodeEditor = defineAsyncComponent(() => import('/@/components/CodeEditor/index.vue'));
 const emit = defineEmits(['refresh']);
@@ -60,9 +61,9 @@ const form = reactive({
 
 // 定义校验规则
 const dataRules = ref({
-	templateName: [{ validator: rule.overLength, trigger: 'blur' },{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
-	generatorPath: [{ validator: rule.overLength, trigger: 'blur' },{ required: true, message: '模板路径不能为空', trigger: 'blur' }],
-	templateDesc: [{ validator: rule.overLength, trigger: 'blur' },{ required: true, message: '模板描述不能为空', trigger: 'blur' }],
+	templateName: [{ validator: rule.overLength, trigger: 'blur' }, { required: true, message: '模板名称不能为空', trigger: 'blur' }],
+	generatorPath: [{ validator: rule.overLength, trigger: 'blur' }, { required: true, message: '模板路径不能为空', trigger: 'blur' }],
+	templateDesc: [{ validator: rule.overLength, trigger: 'blur' }, { required: true, message: '模板描述不能为空', trigger: 'blur' }],
 });
 
 // 打开弹窗
@@ -83,7 +84,7 @@ const openDialog = (id: string) => {
 
 // 提交
 const onSubmit = async () => {
-	const valid = await dataFormRef.value.validate().catch(() => {});
+	const valid = await dataFormRef.value.validate().catch(() => { });
 	if (!valid) return false;
 
 	// 校验模板是否为空
@@ -114,7 +115,7 @@ defineExpose({
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .splitpanes__pane {
 	display: flex;
 	justify-content: center;

src/views/sys/sysOrg/index.vue

@@ -31,7 +31,7 @@
                 children: 'children',
                 value: 'id',
               }" ref="orgTreeRef" :loading="data.treeLoading" node-key="id" highlight-current
-                :default-expand-all="true" @node-click="handleNodeClick">
+                :default-expand-all="true" :expand-on-click-node="false" @node-click="handleNodeClick">
                 <template #default="{ node, data }" v-if="$slots.default">
                   <slot :node="node" :data="data"></slot>
                 </template>