feat: 解决，设备管理，功能权限，翻页面，回到之前界面数据不刷新

src/views/device/category/index.vue

@@ -1,4 +1,4 @@
-<!-- 设备分类 详情 -->
+<!--设备管理 设备分类 -->
 <template>
   <div class="app-container">
     <!-- 搜索 -->
@@ -87,7 +87,7 @@
 import { create, edit, list, remove } from "@/api/device/category";
 import { dialogCallBack } from "@/utils/DialogUtil";
 export default {
-  name:"DeviceCategory",
+  name: "DeviceCategory",
   data() {
     return {
       // 遮罩层

src/views/device/class/detail.vue

@@ -1,32 +1,68 @@
 <template>
-  <div class='app-container'>
-    <el-form :model="form" ref="form" :rules="rules" label-width="auto" :disabled="disabled">
+  <div class="app-container">
+    <el-form
+      :model="form"
+      ref="form"
+      :rules="rules"
+      label-width="auto"
+      :disabled="disabled"
+    >
       <el-form-item label="大类名称：" prop="name">
         <el-input v-model="form.name" placeholder="请输入大类名称" />
       </el-form-item>
       <el-form-item label="设备分类：" prop="categoryId">
         <el-select v-model="form.categoryId" placeholder="请选择设备分类">
-          <el-option v-for="item in categoryOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option
+            v-for="item in categoryOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="设备类型：" prop="type">
         <el-select v-model="form.type" placeholder="请选择设备类型">
-          <el-option v-for="item in devTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option
+            v-for="item in devTypeOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="是否热门：" prop="isHot">
         <el-select v-model="form.isHot" placeholder="请选择是否热门">
-          <el-option v-for="item in yesOrNoOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option
+            v-for="item in yesOrNoOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="关联设备：" prop="deviceIds">
-        <el-select v-model="form.deviceIds" filterable multiple placeholder="请选择关联的设备">
-          <el-option v-for="item in devOptions" :key="item.clientTypeId" :value="item.clientTypeId" :label="item.name" />
+        <el-select
+          v-model="form.deviceIds"
+          filterable
+          multiple
+          placeholder="请选择关联的设备"
+        >
+          <el-option
+            v-for="item in devOptions"
+            :key="item.clientTypeId"
+            :value="item.clientTypeId"
+            :label="item.name"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="可见用户：" prop="userType">
         <el-select v-model="form.userType" placeholder="请选择可见用户">
-          <el-option v-for="item in pushOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option
+            v-for="item in pushOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item v-if="form.userType === 3" label="指定用户：" prop="user">
@@ -35,154 +71,292 @@
       <el-row :gutter="70">
         <el-col :span="12">
           <el-form-item label="在线图片：" prop="img">
-            <Upload listType="picture-card" :url="form.img" @upload="upload($event, 'img')" :disabled="disabled" />
+            <Upload
+              listType="picture-card"
+              :url="form.img"
+              @upload="upload($event, 'img')"
+              :disabled="disabled"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="离线图片：" prop="offlineImg">
-            <Upload listType="picture-card" :url="form.offlineImg" @upload="upload($event, 'offlineImg')"
-              :disabled="disabled" />
+            <Upload
+              listType="picture-card"
+              :url="form.offlineImg"
+              @upload="upload($event, 'offlineImg')"
+              :disabled="disabled"
+            />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-button v-if="disabled === false && form.typeList.length < 4" type="primary" icon="el-icon-plus"
-        @click="getAdd">新增</el-button>
+      <el-button
+        v-if="disabled === false && form.typeList.length < 4"
+        type="primary"
+        icon="el-icon-plus"
+        @click="getAdd"
+        >新增</el-button
+      >
       <div class="sub-form" v-for="(i, index) in form.typeList" :key="i.id">
-        <el-form-item label="设备模式：" :prop="`typeList.${index}.type`"
-          :rules="{ required: true, message: '请选择设备模式', trigger: 'change' }">
-          <el-select v-model="i.type" placeholder="请选择设备模式" @change="getTypeChange(i)">
-            <el-option v-for="item in devModeOptions" :key="item.value" :value="item.value" :label="item.label"
-              :disabled="item.disabled" />
+        <el-form-item
+          label="设备模式："
+          :prop="`typeList.${index}.type`"
+          :rules="{
+            required: true,
+            message: '请选择设备模式',
+            trigger: 'change',
+          }"
+        >
+          <el-select
+            v-model="i.type"
+            placeholder="请选择设备模式"
+            @change="getTypeChange(i)"
+          >
+            <el-option
+              v-for="item in devModeOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="item.label"
+              :disabled="item.disabled"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-if="i.type !== 3" label="功能权限：" :prop="`typeList.${index}.functionList`"
-          :rules="{ type: 'array', required: true, message: '请选择功能权限', trigger: 'change' }">
-          <el-select v-model="i.functionList" multiple placeholder="请选择功能权限">
-            <el-option v-for="item in devFucOptions" :key="item.value" :value="item.value.toString()"
-              :label="item.label" />
+        <el-form-item
+          v-if="i.type !== 3"
+          label="功能权限："
+          :prop="`typeList.${index}.functionList`"
+          :rules="{
+            type: 'array',
+            required: true,
+            message: '请选择功能权限',
+            trigger: 'change',
+          }"
+        >
+          <el-select
+            v-model="i.functionList"
+            multiple
+            placeholder="请选择功能权限"
+          >
+            <el-option
+              v-for="item in devFucOptions"
+              :key="item.value"
+              :value="item.value.toString()"
+              :label="item.label"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item v-if="i.type == 2" label="连接方式：" :prop="`typeList.${index}.connectType`"
-          :rules="{ required: true, message: '请选择连接方式', trigger: 'change' }">
+        <el-form-item
+          v-if="i.type == 2"
+          label="连接方式："
+          :prop="`typeList.${index}.connectType`"
+          :rules="{
+            required: true,
+            message: '请选择连接方式',
+            trigger: 'change',
+          }"
+        >
           <el-select v-model="i.connectType" placeholder="请选择连接方式">
-            <el-option v-for="item in connectOptions" :key="item.value" :value="item.value" :label="item.label" />
+            <el-option
+              v-for="item in connectOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="item.label"
+            />
           </el-select>
         </el-form-item>
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item :label="[1, 3].includes(i.type) ? '连接引导图：' : '开机引导图：'" :prop="`typeList.${index}.icon1`"
-              :rules="{ required: true, message: '请上传引导图', trigger: 'change' }">
-              <Upload listType="picture-card" :url="i.icon1" @upload="upload($event, 'icon1', index)"
-                :disabled="disabled" />
+            <el-form-item
+              :label="[1, 3].includes(i.type) ? '连接引导图：' : '开机引导图：'"
+              :prop="`typeList.${index}.icon1`"
+              :rules="{
+                required: true,
+                message: '请上传引导图',
+                trigger: 'change',
+              }"
+            >
+              <Upload
+                listType="picture-card"
+                :url="i.icon1"
+                @upload="upload($event, 'icon1', index)"
+                :disabled="disabled"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="配对引导图：" :prop="`typeList.${index}.icon2`"
-              :rules="{ required: true, message: '请上传引导图', trigger: 'change' }">
-              <Upload listType="picture-card" :url="i.icon2" @upload="upload($event, 'icon2', index)"
-                :disabled="disabled" />
+            <el-form-item
+              label="配对引导图："
+              :prop="`typeList.${index}.icon2`"
+              :rules="{
+                required: true,
+                message: '请上传引导图',
+                trigger: 'change',
+              }"
+            >
+              <Upload
+                listType="picture-card"
+                :url="i.icon2"
+                @upload="upload($event, 'icon2', index)"
+                :disabled="disabled"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-form-item v-if="[1, 3].includes(i.type)" label="引导页：">
-          <Editor v-model="i.guidePageContent" :min-height="250" :readOnly="disabled" />
+          <Editor
+            v-model="i.guidePageContent"
+            :min-height="250"
+            :readOnly="disabled"
+          />
         </el-form-item>
-        <el-form-item v-else label="引导图：" :prop="`typeList.${index}.icon`"
-          :rules="{ required: true, message: '请上传引导图', trigger: 'change' }">
-          <Upload listType="picture-card" :url="i.icon" @upload="upload($event, 'icon', index)" :disabled='disabled' />
+        <el-form-item
+          v-else
+          label="引导图："
+          :prop="`typeList.${index}.icon`"
+          :rules="{
+            required: true,
+            message: '请上传引导图',
+            trigger: 'change',
+          }"
+        >
+          <Upload
+            listType="picture-card"
+            :url="i.icon"
+            @upload="upload($event, 'icon', index)"
+            :disabled="disabled"
+          />
         </el-form-item>
-        <el-link class="el-icon-close" v-if="form.typeList.length > 1" :underline="false"
-          @click="getDelete(i.type, index)" :disabled="disabled" />
+        <el-link
+          class="el-icon-close"
+          v-if="form.typeList.length > 1"
+          :underline="false"
+          @click="getDelete(i.type, index)"
+          :disabled="disabled"
+        />
       </div>
     </el-form>
     <div>
       <el-button @click="close">取消</el-button>
-      <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
+      <el-button v-if="!disabled" type="primary" @click="getSubmit"
+        >确定</el-button
+      >
     </div>
   </div>
 </template>
 
 <script>
-import { devList, submit, detail } from '@/api/device/class'
-import { devModeMixin, yesOrNoMixin, devTypeMixin, devCategoryMixin, devFucMixin } from '@/mixin/index'
+import { devList, submit, detail } from "@/api/device/class";
+import {
+  devModeMixin,
+  yesOrNoMixin,
+  devTypeMixin,
+  devCategoryMixin,
+  devFucMixin,
+} from "@/mixin/index";
 export default {
-  name:"deviceClassDetail",
-  mixins: [devModeMixin, yesOrNoMixin, devTypeMixin, devCategoryMixin, devFucMixin],
+  name: "deviceClassDetail",
+  mixins: [
+    devModeMixin,
+    yesOrNoMixin,
+    devTypeMixin,
+    devCategoryMixin,
+    devFucMixin,
+  ],
   data() {
     return {
       // 表单
       form: {
         id: this.$route.query.id,
         deviceIds: [],
-        typeList: [{
-          functionList: [],
-        }],
+        typeList: [
+          {
+            functionList: [],
+          },
+        ],
       },
       // 校验
       rules: {
-        name: [{ required: true, message: '请输入大类名称', trigger: 'blur' }],
-        categoryId: [{ required: true, message: '请选择设备分类', trigger: 'chang' }],
-        type: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
-        isHot: [{ required: true, message: '请选择是否热门', trigger: 'change' }],
-        deviceIds: [{ required: true, message: '请选择关联的设备', trigger: 'change' }],
-        userType: [{ required: true, message: '请选择可见用户', trigger: 'change' }],
-        user: [{ required: true, message: '请输入指定用户', trigger: 'blur' }],
-        img: [{ required: true, message: '请上传在线图片', trigger: 'change' }],
-        offlineImg: [{ required: true, message: '请上传离线图片', trigger: 'change' }]
+        name: [{ required: true, message: "请输入大类名称", trigger: "blur" }],
+        categoryId: [
+          { required: true, message: "请选择设备分类", trigger: "chang" },
+        ],
+        type: [
+          { required: true, message: "请选择设备类型", trigger: "change" },
+        ],
+        isHot: [
+          { required: true, message: "请选择是否热门", trigger: "change" },
+        ],
+        deviceIds: [
+          { required: true, message: "请选择关联的设备", trigger: "change" },
+        ],
+        userType: [
+          { required: true, message: "请选择可见用户", trigger: "change" },
+        ],
+        user: [{ required: true, message: "请输入指定用户", trigger: "blur" }],
+        img: [{ required: true, message: "请上传在线图片", trigger: "change" }],
+        offlineImg: [
+          { required: true, message: "请上传离线图片", trigger: "change" },
+        ],
       },
       // 设备列表
       devOptions: [],
       // 可见用户
-      pushOptions: [{
-        value: 1,
-        label: '全部'
-      }, {
-        value: 3,
-        label: '指定'
-      }],
+      pushOptions: [
+        {
+          value: 1,
+          label: "全部",
+        },
+        {
+          value: 3,
+          label: "指定",
+        },
+      ],
       // 设备连接
-      connectOptions: [{
-        value: 2,
-        label: 'UPnP'
-      }, {
-        value: 3,
-        label: 'MQTT'
-      }],
+      connectOptions: [
+        {
+          value: 2,
+          label: "UPnP",
+        },
+        {
+          value: 3,
+          label: "MQTT",
+        },
+      ],
       // 只读
-      disabled: Boolean(this.$route.query.boolean)
-    }
+      disabled: Boolean(this.$route.query.boolean),
+    };
   },
   mounted() {
-    this.getCateGory(1)
-    this.getDevList()
+    this.getCateGory(1);
+    this.getDevList();
     if (this.form.id) {
-      this.getDetail()
+      this.getDetail();
     }
   },
   methods: {
     // 详情
     getDetail() {
-      detail(this.form.id).then(res => {
+      detail(this.form.id).then((res) => {
         if (res.code === 0) {
-          this.form = res.data
-          this.form.deviceIds = res.data.deviceIds.split(',')
+          this.form = res.data;
+          this.form.deviceIds = res.data.deviceIds.split(",");
           this.form.typeList.map((i) => {
             this.devModeOptions[i.type - 1].disabled = true;
-          })
+          });
         }
-      })
+      });
     },
 
     // 设备列表
     getDevList() {
       devList({
         type: 2,
-        id: this.form.id
-      }).then(res => {
+        id: this.form.id,
+      }).then((res) => {
         if (res.code === 0) {
-          this.devOptions = res.data
+          this.devOptions = res.data;
         }
-      })
+      });
     },
 
     // 新增子表单
@@ -191,46 +365,48 @@ export default {
         type: null,
         functionList: [],
         connectType: null,
-        icon1: '',
-        icon2: '',
-        guidePageContent: ''
-      })
+        icon1: "",
+        icon2: "",
+        guidePageContent: "",
+      });
     },
 
     // 删除子表单
     getDelete(type, index) {
-      this.form.typeList.splice(index, 1)
+      this.form.typeList.splice(index, 1);
       if (type) {
-        this.devModeOptions.find(i => i.value == type).disabled = false
+        this.devModeOptions.find((i) => i.value == type).disabled = false;
       }
     },
 
     // 修改设备模式
     getTypeChange(i) {
       for (let key in this.devModeOptions) {
-        this.devModeOptions[key].disabled = false
+        this.devModeOptions[key].disabled = false;
       }
       // 选中的设备模式禁止再选
-      this.form.typeList.map(item => {
+      this.form.typeList.map((item) => {
         if (item.type) {
-          let index = this.devModeOptions.findIndex(j => j.value == item.type)
-          this.devModeOptions[index].disabled = true
+          let index = this.devModeOptions.findIndex(
+            (j) => j.value == item.type
+          );
+          this.devModeOptions[index].disabled = true;
         }
-      })
+      });
       // 除了设备模式都为空
-      Object.keys(i).map(e => {
-        if (!['type', 'icon'].includes(e)) {
-          i[e] = e === 'functionList' ? [] : null
+      Object.keys(i).map((e) => {
+        if (!["type", "icon"].includes(e)) {
+          i[e] = e === "functionList" ? [] : null;
         }
-      })
+      });
     },
 
     // 上传图片
     upload(e, key, index) {
       if (index == undefined) {
-        this.form[key] = e.file
+        this.form[key] = e.file;
       } else {
-        this.form.typeList[index][key] = e.file
+        this.form.typeList[index][key] = e.file;
       }
     },
 
@@ -238,25 +414,25 @@ export default {
     getSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          this.form.deviceIds = this.form.deviceIds.join(',')
-          submit(this.form).then(res => {
+          this.form.deviceIds = this.form.deviceIds.join(",");
+          submit(this.form).then((res) => {
             if (res.code === 0) {
-              this.$message.success('提交成功！')
-              this.close()
+              this.$message.success("提交成功！");
+              this.close();
             }
-          })
+          });
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
 
     // 取消
     close() {
-      this.$tab.closeOpenPage('/device/class')
-    }
-  }
-}
+      this.$tab.closeOpenPage("/device/class");
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/views/device/function/index.vue

@@ -1,3 +1,4 @@
+<!--设备管理 功能权限 -->
 <template>
   <div class="app-container">
     <!-- 搜索 -->
@@ -82,6 +83,7 @@
 import { create, edit, list } from "@/api/device/function";
 import { dialogCallBack } from "@/utils/DialogUtil";
 export default {
+  name: "DeviceFunction",
   dicts: ["sys_normal_disable"],
   data() {
     return {