feat(设备管理): 新增设备任务执行相关功能及优化界面

- 添加设备任务执行视图和路由配置
- 重构设备树选择组件，使用el-tree替换Treeselect
- 优化设备任务执行步骤界面，替换图标组件和图片预览组件
- 调整设备维修和设备任务执行界面的表单布局和样式
- 修改设备维修模块的报修类型为本地配置
- 修复设备任务执行中的扫码认证组件引用问题

src/views/deviceManagement/components/BaseDeviceAccountTreeSelect/index.vue

@@ -1,31 +1,35 @@
 <template>
   <div>
-    <Treeselect
-      style="width: 240px"
+    <el-tree
       v-bind="$attrs"
+      style="width: 240px"
+      :data="deptOptions"
+      :props="defaultProps"
+      default-expand-all
       highlight-current
-      filterable
-      :options="deptOptions"
-      :normalizer="normalizer"
+      :filter-node-method="filterNode"
+      ref="tree"
+      @node-click="handleNodeClick"
       placeholder="请选择设备"
-      clearable />
+    />
   </div>
 </template>
 
 <script>
 import * as deviceAccountApi from '@/api/deviceManagement/deviceaccount'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { handleTree } from '@/utils/ruoyi'
 
 export default {
   name: 'BaseDeviceAccountTreeSelect',
-  components: {
-    Treeselect
-  },
   data() {
     return {
-      deptOptions: []
+      deptOptions: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label',
+        value: 'id'
+      },
+      filterText: ''
     }
   },
   mounted() {
@@ -36,20 +40,34 @@ export default {
       this.deptOptions = []
       deviceAccountApi.getSelectTree().then((res) => {
         if (res.code == 200) {
-          console.log(res.data)
           this.deptOptions = handleTree(res.data, 'id', 'parentId', 'children')
         }
       })
     },
-    normalizer(node) {
-      return {
-        id: node.id,
-        label: node.label,
-        children: node.children
-      }
+    handleNodeClick(data) {
+      // 触发input事件，将选中的值传递给父组件
+      this.$emit('input', data.id)
+      // 触发change事件
+      this.$emit('change', data.id)
+    },
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    }
+  },
+  watch: {
+    // 监听filterText变化，实现过滤功能
+    filterText(val) {
+      this.$refs.tree.filter(val)
     }
   }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.el-tree {
+  width: 100%;
+  max-height: 300px;
+  overflow-y: auto;
+}
+</style>