小程序vue2到vue3

src/components/Breadcrumb/index.vue

@@ -1,216 +1,180 @@
 <template>
-  <div class="container">
+  <el-breadcrumb class="app-breadcrumb" separator="/">
-    <img
+    <transition-group name="breadcrumb">
-      src="@/assets/images/position.png"
+      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
-      alt=""
+        <span
-    />
+          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
-
+          class="no-redirect"
-    <el-breadcrumb
-      class="app-breadcrumb"
-      separator="/"
-    >
-      <transition-group name="breadcrumb">
-        <el-breadcrumb-item
-          v-for="(item, index) in levelList"
-          :key="item.path"
         >
-          <span
+          {{ item.meta.title }}
-            v-if="
+        </span>
-              item.redirect === 'noRedirect' || index == levelList.length - 1
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
-            "
+      </el-breadcrumb-item>
-            class="no-redirect"
+    </transition-group>
-            >{{ item.meta.title }}</span
+  </el-breadcrumb>
-          >
-          <a
-            v-else
-            @click.prevent="handleLink(item)"
-            >{{ item.meta.title }}</a
-          >
-        </el-breadcrumb-item>
-      </transition-group>
-    </el-breadcrumb>
-  </div>
 </template>
 
-<script setup>
+<script setup name="Breadcrumb">
-import usePermissionStore from "@/store/modules/permission";
+import { ref, watch, onMounted, computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { usePermissionStore } from "@/store/modules/permission";
 
 const route = useRoute();
 const router = useRouter();
 const permissionStore = usePermissionStore();
+
 const levelList = ref([]);
 
-function getBreadcrumb() {
+// 从 pinia 获取路由数据
-  // only show routes with meta.title
+const sidebarRouters = computed(() => permissionStore.sidebarRouters);
-  // 当前全部侧边栏
+
-  let sidebarRouters = permissionStore.sidebarRouters;
+// 监听路由变化
-  let matched = route.matched.filter((item) => item.meta && item.meta.title);
+watch(() => route.path, (path) => {
-  if (matched[0].path == "/assetsAuth") {
+  if (path.startsWith('/redirect/')) {
-    // 管理端--资产管理--新增资产
+    return;
-    const activeRoute = sidebarRouters.filter(
-      (item) => item.path == "/assetsManage"
-    );
-    const childrenRoute = activeRoute[0].children;
-    levelList.value = [
-      activeRoute[0],
-      childrenRoute[Number(matched[0].meta.type)],
-      matched[0],
-    ];
-  } else if (
-    matched[0].path == "/taskInfo" ||
-    matched[0].path == "/taskAudit"
-  ) {
-    // 管理端--任务管理--任务审核/任务详情
-    const activeRoute = sidebarRouters.filter(
-      (item) => item.path == "/" && item.children[0].path == "task"
-    );
-    levelList.value = [activeRoute[0].children[0], matched[0]];
-  } else if (
-    matched[0].path == "/mytaskInfo" ||
-    matched[0].path == "/mytaskAudit"
-  ) {
-    // 单位端--我的任务--资产核查/任务详情
-    const activeRoute = sidebarRouters.filter(
-      (item) => item.path == "/" && item.children[0].path == "myTask"
-    );
-    levelList.value = [activeRoute[0].children[0], matched[0]];
-  } else if (matched[0].path == "/myAssetsAuth") {
-    // 单位端--我的资产--资产详情
-    const activeRoute = sidebarRouters.filter(
-      (item) => item.path == "/myAssets"
-    );
-    const childrenRoute = activeRoute[0].children;
-    levelList.value = [
-      activeRoute[0],
-      childrenRoute[Number(matched[0].meta.type)],
-      matched[0],
-    ];
-  } else if (matched[0].path == "/taskAuditInfo") {
-    // 管理端--任务管理--任务审核--资产审核
-    const activeRoute = sidebarRouters.filter(
-      (item) => item.path == "/" && item.children[0].path == "task"
-    );
-    const route = sidebarRouters.filter((item) => item.path == "");
-    const twoActiveRoute = route[0].children.filter(
-      (item) => item.path == "taskInfo"
-    );
-    levelList.value = [
-      activeRoute[0].children[0],
-      twoActiveRoute[0],
-      matched[0],
-    ];
-  } else if (matched[0].path == "/taskAuditInfolishichakan") {
-    // 管理端--任务管理--任务审核--任务管理历史详情
-    const activeRoute = sidebarRouters.filter(
-      (item) => item.path == "/" && item.children[0].path == "task"
-    );
-    const route = sidebarRouters.filter((item) => item.path == "");
-    const twoActiveRoute = route[0].children.filter(
-      (item) => item.path == "taskInfo"
-    );
-    levelList.value = [
-      activeRoute[0].children[0],
-      twoActiveRoute[0],
-      matched[0],
-    ];
-  } else if (matched[0].path == "/mytaskAuditInfo") {
-    // 单位端--我的任务--资产核查--资产审核详情
-    const activeRoute = sidebarRouters.filter(
-      (item) => item.path == "/" && item.children[0].path == "myTask"
-    );
-    const route = sidebarRouters.filter((item) => item.path == "");
-    const twoActiveRoute = route[0].children.filter(
-      (item) => item.path == "mytaskInfo"
-    );
-    levelList.value = [
-      activeRoute[0].children[0],
-      twoActiveRoute[0],
-      matched[0],
-    ];
-  } else if (matched[0].path == "/unitAuth") {
-    // 管理端--单位管理--新增单位/修改单位/查看单位
-    const activeRoute = sidebarRouters.filter(
-      (item) => item.path == "/" && item.children[0].path == "unit"
-    );
-    levelList.value = [activeRoute[0].children[0], matched[0]];
-  } else if (matched[0].path == "/assetsAuthRecord") {
-    // 单位端--资产填报记录--查看详情/修改资产
-    const activeRoute = sidebarRouters.filter(
-      (item) => item.path == "/" && item.children[0].path == "assetRecord"
-    );
-    levelList.value = [activeRoute[0].children[0], matched[0]];
-  } else if (matched[0].path == "/unitAssetsAuth") {
-    // 管理端--单位自主填报--查看详情/审核资产
-    const activeRoute = sidebarRouters.filter(
-      (item) => item.path == "/" && item.children[0].path == "unitFill"
-    );
-    levelList.value = [activeRoute[0].children[0], matched[0]];
-  } else {
-    levelList.value = matched.filter(
-      (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
-    );
-  }
-}
-function findPathNum(str, char = "/") {
-  let index = str.indexOf(char);
-  let num = 0;
-  while (index !== -1) {
-    num++;
-    index = str.indexOf(char, index + 1);
   }
-  return num;
+  getBreadcrumb();
-}
+});
-function getMatched(pathList, routeList, matched) {
+
-  let data = routeList.find(
+// 初始化
-    (item) =>
+onMounted(() => {
-      item.path == pathList[0] || (item.name += "").toLowerCase() == pathList[0]
+  getBreadcrumb();
-  );
+});
-  if (data) {
+
-    matched.push(data);
+// 获取面包屑数据
-    if (data.children && pathList.length) {
+const getBreadcrumb = () => {
-      pathList.shift();
+  try {
-      getMatched(pathList, data.children, matched);
+    // 当前全部侧边栏
+    const currentSidebarRouters = sidebarRouters.value || [];
+    let matched = route.matched.filter(item => item?.meta?.title);
+
+    if (!matched.length) {
+      levelList.value = [];
+      return;
+    }
+
+    if (matched[0]?.path == "/assetsAuth") {
+      // 管理端--资产管理--新增资产
+      const activeRoute = currentSidebarRouters.filter(item => item?.path == '/assetsManage');
+      if (activeRoute?.[0]?.children) {
+        const childrenRoute = activeRoute[0].children;
+        levelList.value = [activeRoute[0], childrenRoute[Number(matched[0].meta.type)], matched[0]];
+      }
+    } else if (matched[0]?.path == "/taskInfo" || matched[0]?.path == "/taskAudit") {
+      // 管理端--任务管理--任务审核/任务详情
+      const activeRoute = currentSidebarRouters.filter(item => item?.path == '/' && item?.children?.[0]?.path == 'task');
+      if (activeRoute?.[0]?.children?.[0]) {
+        levelList.value = [activeRoute[0].children[0], matched[0]];
+      }
+    } else if (matched[0]?.path == "/mytaskInfo" || matched[0]?.path == "/mytaskAudit") {
+      // 单位端--我的任务--资产核查/任务详情
+      const activeRoute = currentSidebarRouters.filter(item => item?.path == '/' && item?.children?.[0]?.path == 'myTask');
+      if (activeRoute?.[0]?.children?.[0]) {
+        levelList.value = [activeRoute[0].children[0], matched[0]];
+      }
+    } else if (matched[0]?.path == "/myAssetsAuth") {
+      // 单位端--我的资产--资产详情
+      const activeRoute = currentSidebarRouters.filter(item => item?.path == '/myAssets');
+      if (activeRoute?.[0]?.children) {
+        const childrenRoute = activeRoute[0].children;
+        levelList.value = [activeRoute[0], childrenRoute[Number(matched[0].meta.type)], matched[0]];
+      }
+    } else if (matched[0]?.path == "/taskAuditInfo") {
+      // 管理端--任务管理--任务审核--资产审核
+      const activeRoute = currentSidebarRouters.filter(item => item?.path == '/' && item?.children?.[0]?.path == 'task');
+      const route = currentSidebarRouters.filter(item => item?.path == '');
+      if (route?.[0]?.children) {
+        const twoActiveRoute = route[0].children.filter(item => item?.path == "taskInfo");
+        if (activeRoute?.[0]?.children?.[0] && twoActiveRoute?.[0]) {
+          levelList.value = [activeRoute[0].children[0], twoActiveRoute[0], matched[0]];
+        }
+      }
+    } else if (matched[0]?.path == "/taskAuditInfolishichakan") {
+      // 管理端--任务管理--任务审核--任务管理历史详情
+      const activeRoute = currentSidebarRouters.filter(item => item?.path == '/' && item?.children?.[0]?.path == 'task');
+      const route = currentSidebarRouters.filter(item => item?.path == '');
+      if (route?.[0]?.children) {
+        const twoActiveRoute = route[0].children.filter(item => item?.path == "taskInfo");
+        if (activeRoute?.[0]?.children?.[0] && twoActiveRoute?.[0]) {
+          levelList.value = [activeRoute[0].children[0], twoActiveRoute[0], matched[0]];
+        }
+      }
+    } else if (matched[0]?.path == "/mytaskAuditInfo") {
+      // 单位端--我的任务--资产核查--资产审核详情
+      const activeRoute = currentSidebarRouters.filter(item => item?.path == '/' && item?.children?.[0]?.path == 'myTask');
+      const route = currentSidebarRouters.filter(item => item?.path == '');
+      if (route?.[0]?.children) {
+        const twoActiveRoute = route[0].children.filter(item => item?.path == "mytaskInfo");
+        if (activeRoute?.[0]?.children?.[0] && twoActiveRoute?.[0]) {
+          levelList.value = [activeRoute[0].children[0], twoActiveRoute[0], matched[0]];
+        }
+      }
+    } else if (matched[0]?.path == "/unitAuth") {
+      // 管理端--单位管理--新增单位/修改单位/查看单位
+      const activeRoute = currentSidebarRouters.filter(item => item?.path == '/' && item?.children?.[0]?.path == 'unit');
+      if (activeRoute?.[0]?.children?.[0]) {
+        levelList.value = [activeRoute[0].children[0], matched[0]];
+      }
+    } else if (matched[0]?.path == "/assetsAuthRecord") {
+      // 单位端--资产填报记录--查看详情/修改资产
+      const activeRoute = currentSidebarRouters.filter(item => item?.path == '/' && item?.children?.[0]?.path == 'assetRecord');
+      if (activeRoute?.[0]?.children?.[0]) {
+        levelList.value = [activeRoute[0].children[0], matched[0]];
+      }
+    } else if (matched[0]?.path == "/unitAssetsAuth") {
+      // 管理端--单位自主填报--查看详情/审核资产
+      const activeRoute = currentSidebarRouters.filter(item => item?.path == '/' && item?.children?.[0]?.path == 'unitFill');
+      if (activeRoute?.[0]?.children?.[0]) {
+        levelList.value = [activeRoute[0].children[0], matched[0]];
+      }
+    } else {
+      levelList.value = matched.filter(item => item?.meta?.title && item?.meta?.breadcrumb !== false);
     }
+  } catch (error) {
+    console.error('getBreadcrumb error:', error);
+    levelList.value = [];
   }
-}
+};
-function isDashboard(route) {
+
-  const name = route && route.name;
+const isDashboard = (route) => {
+  const name = route?.name;
   if (!name) {
     return false;
   }
   return name.trim() === "Index";
-}
+};
-function handleLink(item) {
+
+const handleLink = (item) => {
   const { redirect, path } = item;
   if (redirect) {
     router.push(redirect);
     return;
   }
-  router.push(path);
+  if (
-}
+    path == "assets" ||
-
+    path == "program" ||
-watchEffect(() => {
+    path == "officialAccount" ||
-  // if you go to the redirect page, do not update the breadcrumbs
+    path == "email" ||
-  if (route.path.startsWith("/redirect/")) {
+    path == "mobileApplication"
+  ) {
+    router.push("assetsManage/" + path);
     return;
   }
-  getBreadcrumb();
+  if (
-});
+    path == "myWebAssets" ||
-getBreadcrumb();
+    path == "myProgram" ||
+    path == "myOfficialAccount" ||
+    path == "myEmail" ||
+    path == "myMobileApplication"
+  ) {
+    router.push("myAssets/" + path);
+    return;
+  }
+  router.push(path);
+};
 </script>
 
 <style lang="scss" scoped>
-.container {
-  width: auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  img {
-    width: 14px;
-    margin-bottom: 1px;
-    margin-right: 10px;
-  }
-}
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
   font-size: 14px;

src/components/HeaderSearch/index.vue

@@ -49,7 +49,7 @@ import Fuse from 'fuse.js'
 import { getNormalPath } from '@/utils/ruoyi'
 import { isHttp } from '@/utils/validate'
 import useSettingsStore from '@/store/modules/settings'
-import usePermissionStore from '@/store/modules/permission'
+import { usePermissionStore } from '@/store/modules/permission'
 
 const search = ref('')
 const options = ref([])

src/components/TopNav/index.vue

@@ -37,7 +37,7 @@ import { constantRoutes } from "@/router"
 import { isHttp } from '@/utils/validate'
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
-import usePermissionStore from '@/store/modules/permission'
+import { usePermissionStore } from '@/store/modules/permission'
 
 // 顶部栏初始数
 const visibleNumber = ref(null)

src/layout/components/Navbar.vue

@@ -51,7 +51,7 @@
 
 <script setup>
 import { ElMessageBox } from "element-plus";
-import Breadcrumb from "@/components/Breadcrumb";
+import Breadcrumb from "@/components/Breadcrumb/index.vue";
 import TopNav from "@/components/TopNav";
 import Hamburger from "@/components/Hamburger";
 import Screenfull from "@/components/Screenfull";

src/layout/components/Settings/index.vue

@@ -81,7 +81,7 @@
 <script setup>
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
-import usePermissionStore from '@/store/modules/permission'
+import { usePermissionStore } from '@/store/modules/permission'
 import { handleThemeStyle } from '@/utils/theme'
 
 const { proxy } = getCurrentInstance()

src/layout/components/Sidebar/index.vue

@@ -34,7 +34,7 @@ import SidebarItem from "./SidebarItem";
 import variables from "@/assets/styles/variables.module.scss";
 import useAppStore from "@/store/modules/app";
 import useSettingsStore from "@/store/modules/settings";
-import usePermissionStore from "@/store/modules/permission";
+import { usePermissionStore } from "@/store/modules/permission";
 
 const route = useRoute();
 const appStore = useAppStore();

src/layout/components/TagsView/index.vue

@@ -46,7 +46,7 @@ import ScrollPane from './ScrollPane'
 import { getNormalPath } from '@/utils/ruoyi'
 import useTagsViewStore from '@/store/modules/tagsView'
 import useSettingsStore from '@/store/modules/settings'
-import usePermissionStore from '@/store/modules/permission'
+import { usePermissionStore } from '@/store/modules/permission'
 
 const visible = ref(false)
 const top = ref(0)

src/main.js

@@ -1,7 +1,6 @@
 import { createApp } from 'vue'
 
 import Cookies from 'js-cookie'
-
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
@@ -44,7 +43,6 @@ import ImagePreview from "@/components/ImagePreview"
 import DictTag from '@/components/DictTag'
 
 const app = createApp(App)
-
 // 全局方法挂载
 app.config.globalProperties.useDict = useDict
 app.config.globalProperties.download = download

src/permission.js

@@ -7,7 +7,7 @@ import { isHttp, isPathMatch } from '@/utils/validate'
 import { isRelogin } from '@/utils/request'
 import useUserStore from '@/store/modules/user'
 import useSettingsStore from '@/store/modules/settings'
-import usePermissionStore from '@/store/modules/permission'
+import { usePermissionStore } from '@/store/modules/permission'
 
 NProgress.configure({ showSpinner: false })
 

src/store/modules/dict.js

@@ -1,3 +1,5 @@
+import { defineStore } from 'pinia'
+
 const useDictStore = defineStore(
   'dict',
   {

src/store/modules/permission.js

@@ -1,3 +1,4 @@
+import { defineStore } from 'pinia'
 import auth from "@/plugins/auth";
 import router, { constantRoutes, dynamicRoutes } from "@/router";
 import { getRouters } from "@/api/menu";
@@ -8,7 +9,7 @@ import InnerLink from "@/layout/components/InnerLink";
 // 匹配views里面所有的.vue文件
 const modules = import.meta.glob("./../../views/**/*.vue");
 
-const usePermissionStore = defineStore("permission", {
+export const usePermissionStore = defineStore("permission", {
   state: () => ({
     routes: [],
     addRoutes: [],
@@ -123,5 +124,3 @@ export const loadView = (view) => {
   }
   return res;
 };
-
-export default usePermissionStore;

src/utils/dict.js

@@ -1,3 +1,4 @@
+import { ref, toRefs } from 'vue'
 import useDictStore from '@/store/modules/dict'
 import { getDicts } from '@/api/system/dict/data'
 

src/utils/dict/Dict.js

@@ -0,0 +1,82 @@
+import Vue from 'vue'
+import { mergeRecursive } from "@/utils/ruoyi";
+import DictMeta from './DictMeta'
+import DictData from './DictData'
+
+const DEFAULT_DICT_OPTIONS = {
+  types: [],
+}
+
+/**
+ * @classdesc 字典
+ * @property {Object} label 标签对象，内部属性名为字典类型名称
+ * @property {Object} dict 字段数组，内部属性名为字典类型名称
+ * @property {Array.<DictMeta>} _dictMetas 字典元数据数组
+ */
+export default class Dict {
+  constructor() {
+    this.owner = null
+    this.label = {}
+    this.type = {}
+  }
+
+  init(options) {
+    if (options instanceof Array) {
+      options = { types: options }
+    }
+    const opts = mergeRecursive(DEFAULT_DICT_OPTIONS, options)
+    if (opts.types === undefined) {
+      throw new Error('need dict types')
+    }
+    const ps = []
+    this._dictMetas = opts.types.map(t => DictMeta.parse(t))
+    this._dictMetas.forEach(dictMeta => {
+      const type = dictMeta.type
+      Vue.set(this.label, type, {})
+      Vue.set(this.type, type, [])
+      if (dictMeta.lazy) {
+        return
+      }
+      ps.push(loadDict(this, dictMeta))
+    })
+    return Promise.all(ps)
+  }
+
+  /**
+   * 重新加载字典
+   * @param {String} type 字典类型
+   */
+  reloadDict(type) {
+    const dictMeta = this._dictMetas.find(e => e.type === type)
+    if (dictMeta === undefined) {
+      return Promise.reject(`the dict meta of ${type} was not found`)
+    }
+    return loadDict(this, dictMeta)
+  }
+}
+
+/**
+ * 加载字典
+ * @param {Dict} dict 字典
+ * @param {DictMeta} dictMeta 字典元数据
+ * @returns {Promise}
+ */
+function loadDict(dict, dictMeta) {
+  return dictMeta.request(dictMeta)
+    .then(response => {
+      const type = dictMeta.type
+      let dicts = dictMeta.responseConverter(response, dictMeta)
+      if (!(dicts instanceof Array)) {
+        console.error('the return of responseConverter must be Array.<DictData>')
+        dicts = []
+      } else if (dicts.filter(d => d instanceof DictData).length !== dicts.length) {
+        console.error('the type of elements in dicts must be DictData')
+        dicts = []
+      }
+      dict.type[type].splice(0, Number.MAX_SAFE_INTEGER, ...dicts)
+      dicts.forEach(d => {
+        Vue.set(dict.label[type], d.value, d.label)
+      })
+      return dicts
+    })
+}

src/utils/dict/DictConverter.js

@@ -0,0 +1,17 @@
+import DictOptions from './DictOptions'
+import DictData from './DictData'
+
+export default function(dict, dictMeta) {
+  const label = determineDictField(dict, dictMeta.labelField, ...DictOptions.DEFAULT_LABEL_FIELDS)
+  const value = determineDictField(dict, dictMeta.valueField, ...DictOptions.DEFAULT_VALUE_FIELDS)
+  return new DictData(dict[label], dict[value], dict)
+}
+
+/**
+ * 确定字典字段
+ * @param {DictData} dict
+ * @param  {...String} fields
+ */
+function determineDictField(dict, ...fields) {
+  return fields.find(f => Object.prototype.hasOwnProperty.call(dict, f))
+}

src/utils/dict/DictData.js

@@ -0,0 +1,13 @@
+/**
+ * @classdesc 字典数据
+ * @property {String} label 标签
+ * @property {*} value 标签
+ * @property {Object} raw 原始数据
+ */
+export default class DictData {
+  constructor(label, value, raw) {
+    this.label = label
+    this.value = value
+    this.raw = raw
+  }
+}

src/utils/dict/DictMeta.js

@@ -0,0 +1,38 @@
+import { mergeRecursive } from "@/utils/ruoyi";
+import DictOptions from './DictOptions'
+
+/**
+ * @classdesc 字典元数据
+ * @property {String} type 类型
+ * @property {Function} request 请求
+ * @property {String} label 标签字段
+ * @property {String} value 值字段
+ */
+export default class DictMeta {
+  constructor(options) {
+    this.type = options.type
+    this.request = options.request
+    this.responseConverter = options.responseConverter
+    this.labelField = options.labelField
+    this.valueField = options.valueField
+    this.lazy = options.lazy === true
+  }
+}
+
+
+/**
+ * 解析字典元数据
+ * @param {Object} options
+ * @returns {DictMeta}
+ */
+DictMeta.parse= function(options) {
+  let opts = null
+  if (typeof options === 'string') {
+    opts = DictOptions.metas[options] || {}
+    opts.type = options
+  } else if (typeof options === 'object') {
+    opts = options
+  }
+  opts = mergeRecursive(DictOptions.metas['*'], opts)
+  return new DictMeta(opts)
+}

src/utils/dict/DictOptions.js

@@ -0,0 +1,51 @@
+import { mergeRecursive } from "@/utils/ruoyi";
+import dictConverter from './DictConverter'
+
+export const options = {
+  metas: {
+    '*': {
+      /**
+       * 字典请求，方法签名为function(dictMeta: DictMeta): Promise
+       */
+      request: (dictMeta) => {
+        console.log(`load dict ${dictMeta.type}`)
+        return Promise.resolve([])
+      },
+      /**
+       * 字典响应数据转换器，方法签名为function(response: Object, dictMeta: DictMeta): DictData
+       */
+      responseConverter,
+      labelField: 'label',
+      valueField: 'value',
+    },
+  },
+  /**
+   * 默认标签字段
+   */
+  DEFAULT_LABEL_FIELDS: ['label', 'name', 'title'],
+  /**
+   * 默认值字段
+   */
+  DEFAULT_VALUE_FIELDS: ['value', 'id', 'uid', 'key'],
+}
+
+/**
+ * 映射字典
+ * @param {Object} response 字典数据
+ * @param {DictMeta} dictMeta 字典元数据
+ * @returns {DictData}
+ */
+function responseConverter(response, dictMeta) {
+  const dicts = response.content instanceof Array ? response.content : response
+  if (dicts === undefined) {
+    console.warn(`no dict data of "${dictMeta.type}" found in the response`)
+    return []
+  }
+  return dicts.map(d => dictConverter(d, dictMeta))
+}
+
+export function mergeOptions(src) {
+  mergeRecursive(options, src)
+}
+
+export default options

src/utils/dict/index.js

@@ -0,0 +1,33 @@
+import Dict from './Dict'
+import { mergeOptions } from './DictOptions'
+
+export default function(Vue, options) {
+  mergeOptions(options)
+  Vue.mixin({
+    data() {
+      if (this.$options === undefined || this.$options.dicts === undefined || this.$options.dicts === null) {
+        return {}
+      }
+      const dict = new Dict()
+      dict.owner = this
+      return {
+        dict
+      }
+    },
+    created() {
+      if (!(this.dict instanceof Dict)) {
+        return
+      }
+      options.onCreated && options.onCreated(this.dict)
+      this.dict.init(this.$options.dicts).then(() => {
+        options.onReady && options.onReady(this.dict)
+        this.$nextTick(() => {
+          this.$emit('dictReady', this.dict)
+          if (this.$options.methods && this.$options.methods.onDictReady instanceof Function) {
+            this.$options.methods.onDictReady.call(this, this.dict)
+          }
+        })
+      })
+    },
+  })
+}

src/views/auditPages/assetsManagement/assetsAuth.vue

@@ -1,11 +1,14 @@
 <template>
-  <assetsTypeOne :pageType="$route.query.pageType" :id="$route.query.id" :queryData="$route.query.queryData" v-if="$route.query.type == 0" />
+  <assetsTypeOne :pageType="route.query.pageType" :id="route.query.id" :queryData="route.query.queryData" v-if="route.query.type == 0" />
-  <assetsTypeTwo :pageType="$route.query.pageType" :id="$route.query.id" :queryData="$route.query.queryData" v-else-if="$route.query.type == 1" />
+  <assetsTypeTwo :pageType="route.query.pageType" :id="route.query.id" :queryData="route.query.queryData" v-else-if="route.query.type == 1" />
-  <assetsTypeThree :pageType="$route.query.pageType" :id="$route.query.id" :queryData="$route.query.queryData" v-else-if="$route.query.type == 2" />
+  <assetsTypeThree :pageType="route.query.pageType" :id="route.query.id" :queryData="route.query.queryData" v-else-if="route.query.type == 2" />
-  <assetsTypeFour :pageType="$route.query.pageType" :id="$route.query.id" :queryData="$route.query.queryData" v-else-if="$route.query.type == 3" />
+  <assetsTypeFour :pageType="route.query.pageType" :id="route.query.id" :queryData="route.query.queryData" v-else-if="route.query.type == 3" />
-  <assetsTypeFive :pageType="$route.query.pageType" :id="$route.query.id" :queryData="$route.query.queryData" v-else-if="$route.query.type == 4" />
+  <assetsTypeFive :pageType="route.query.pageType" :id="route.query.id" :queryData="route.query.queryData" v-else-if="route.query.type == 4" />
 </template>
-<script>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 // web资产
 import assetsTypeOne from "@/views/components/assetsType/index.vue"
 // 小程序资产
@@ -16,24 +19,13 @@ import assetsTypeThree from "@/views/components/assetsType/index_v2.vue"
 import assetsTypeFour from "@/views/components/assetsType/index_v3.vue"
 // 移动应用系统
 import assetsTypeFive from "@/views/components/assetsType/index_v4.vue"
-export default {
+
-  name: "AssetsAuth",
+const route = useRoute()
-  components:{
+const router = useRouter()
-    assetsTypeOne,
+
-    assetsTypeTwo,
+// 路由导航守卫
-    assetsTypeThree,
+router.beforeEach((to, from) => {
-    assetsTypeFour,
+  if (to.name === 'AssetsAuth') {
-    assetsTypeFive,
-  },
-  data() {
-    return {
-    }
-  },
-  mounted(){
-  },
-  methods:{
-  },
-  beforeRouteEnter(to,from,next){
     to.meta.type = to.query.type
     if(to.meta.type == 0) {
       to.meta.activeMenu = "/assetsManage/assets"
@@ -46,6 +38,7 @@ export default {
     } else if(to.meta.type == 4) {
       to.meta.activeMenu = "/assetsManage/mobileApplication"
     }
+
     if(to.query.pageType == 'add') {
       to.meta.title = '新增资产'
     } else if(to.query.pageType == 'change') {
@@ -53,7 +46,11 @@ export default {
     } else if(to.query.pageType == 'look') {
       to.meta.title = '资产详情'
     }
-    next();
+  }
-  },
+  return true
-}
+})
+
+onMounted(() => {
+  // 如果需要在组件挂载时执行某些操作，可以在这里添加
+})
 </script>

src/views/auditPages/assetsManagement/index.vue

@@ -372,29 +372,30 @@ export default {
     },
     // 查看详情
     goInfo(row,id){
-      if(id == 1) {
+      console.log(this.formInline,'this.formInline')
-        this.$router.push({name: 'AssetsAuth',query: {
+      // if(id == 1) {
-          pageType: "look",
+      //   this.$router.push({name: 'AssetsAuth',query: {
-          type:0,
+      //     pageType: "look",
-          id:row.id,
+      //     type:0,
-          queryData:this.formInline,
+      //     id:row.id,
-        }})
+      //     queryData:this.formInline,
-      } else if(id == 2) {
+      //   }})
-        this.$router.push({name: 'AssetsAuth',query: {
+      // } else if(id == 2) {
-          pageType: "change",
+      //   this.$router.push({name: 'AssetsAuth',query: {
-          type:0,
+      //     pageType: "change",
-          id:row.id,
+      //     type:0,
-          queryData:this.formInline,
+      //     id:row.id,
-        }})
+      //     queryData:this.formInline,
-      } else if(id == 3) {
+      //   }})
-        const userIds = row.id;
+      // } else if(id == 3) {
-        this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function() {
+      //   const userIds = row.id;
-          return deleteAssetInfo(userIds);
+      //   this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function() {
-        }).then(() => {
+      //     return deleteAssetInfo(userIds);
-          this.getList();
+      //   }).then(() => {
-          this.$modal.msgSuccess("删除成功");
+      //     this.getList();
-        }).catch(() => {});
+      //     this.$modal.msgSuccess("删除成功");
-        }
+      //   }).catch(() => {});
+      //   }
     },
     // 编辑
     edit(){

src/views/auditPages/assetsManagement/program.vue

@@ -549,6 +549,7 @@ function handleAdd() {
 }
 
 function goInfo(row, id) {
+  console.log(formInline.value,'row')
   if (id === 1) {
     router.push({
       name: "AssetsAuth",

src/views/components/assetsType/index_v1.vue

@@ -9,7 +9,7 @@
         <el-form
           :model="ruleForm"
           :rules="rules"
-          ref="ruleForm"
+          ref="ruleFormRef"
           label-width="170px"
           class="demo-ruleForm"
           label-position="right"
@@ -89,7 +89,7 @@
                   @change="changeState"
                 >
                   <el-option
-                    v-for="dict in dict.type.gzh_state"
+                    v-for="dict in gzh_state"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -115,7 +115,7 @@
                   placeholder="请选择小程序包状态"
                 >
                   <el-option
-                    v-for="dict in dict.type.email_state"
+                    v-for="dict in email_state"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -132,7 +132,7 @@
                   placeholder="请选择认证状态"
                 >
                   <el-option
-                    v-for="dict in dict.type.gzh_rzzt"
+                    v-for="dict in gzh_rzzt"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -158,7 +158,7 @@
               <el-form-item label="认证类型" required>
                 <el-select v-model="ruleForm.rzlx" placeholder="请选择认证类型">
                   <el-option
-                    v-for="dict in dict.type.gzh_rzlx"
+                    v-for="dict in gzh_rzlx"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -221,7 +221,7 @@
               <el-form-item label="所属行业" required>
                 <el-select v-model="ruleForm.sshy" placeholder="请选择所属行业">
                   <el-option
-                    v-for="dict in dict.type.app_sshy"
+                    v-for="dict in app_sshy"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -235,7 +235,7 @@
               <el-form-item label="重点行业" required>
                 <el-select v-model="ruleForm.zdhy" placeholder="请选择重点行业">
                   <el-option
-                    v-for="dict in dict.type.app_zdhy"
+                    v-for="dict in app_zdhy"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -247,7 +247,7 @@
               <el-form-item label="行政区划" required>
                 <el-select v-model="ruleForm.xzqh" placeholder="请选择行政区划">
                   <el-option
-                    v-for="dict in dict.type.app_xzqh"
+                    v-for="dict in app_xzqh"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -388,128 +388,153 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
 import {
   assetMiniPrograms,
   miniProgramsInfo,
   unitAllList,
-} from "@/api/auditPagesApi/index";
+} from "@/api/auditPagesApi/index"
-import equalToPassword from "@/views/components/assetsType/mainx.js";
+import equalToPassword from "@/views/components/assetsType/mainx.js"
-export default {
+import { useDict } from '@/utils/dict'
-  dicts: [
+
-    "app_xzqh",
+const props = defineProps({
-    "app_sshy",
+  pageType: String,
-    "app_zdhy",
+  id: [String, Number],
-    "gzh_state",
+  queryData: Object
-    "gzh_rzzt",
+})
-    "gzh_rzlx",
+
-    "email_state",
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+
+// 字典数据
+const {
+  app_xzqh,
+  app_sshy,
+  app_zdhy,
+  gzh_state,
+  gzh_rzzt,
+  gzh_rzlx,
+  email_state,
+} = useDict(
+  "app_xzqh",
+  "app_sshy",
+  "app_zdhy",
+  "gzh_state",
+  "gzh_rzzt",
+  "gzh_rzlx",
+  "email_state"
+)
+
+const ruleFormRef = ref(null)
+const loading = ref(false)
+const disabled = ref(false)
+
+const ruleForm = reactive({})
+
+// 表单验证规则
+const changeSateTetx = (rule, value, callback) => {
+  if (ruleForm.state == 7 && !value) {
+    callback(new Error("请填写"))
+  } else {
+    callback()
+  }
+}
+
+const rules = {
+  bfyy: [{ validator: changeSateTetx, trigger: "blur" }],
+  ssdw: [
+    { required: true, message: "所属单位不能为空", trigger: "blur" },
+    { required: true, validator: equalToPassword, trigger: "change" },
   ],
-  data() {
+  xcxmc: [
-    const changeSateTetx = (rule, value, callback) => {
+    { required: true, message: "小程序名称不能为空", trigger: "blur" },
-      if (this.ruleForm.state == 7 && !value) {
+  ],
-        callback(new Error("请填写"));
+}
+
+// 状态改变
+const changeState = (e) => {
+  if (e != 7) {
+    ruleForm.bfyy = ""
+  }
+}
+
+// 获取信息
+const getInfo = (id) => {
+  miniProgramsInfo(id).then((res) => {
+    Object.assign(ruleForm, res.data)
+  })
+}
+
+// 单位名称模糊查询
+const querySearchAsync = (queryString, cb) => {
+  let results = []
+  unitAllList({ nickName: queryString }).then((res) => {
+    res.data.forEach((item) => {
+      results.push({
+        value: item.nickName,
+        id: item.id,
+        tyshxydm: item.userName,
+      })
+    })
+    cb(results)
+  })
+}
+
+// 单位名称点击搜索到的数据
+const handleSelect = (item) => {
+  ruleForm.tyshxydm = item.tyshxydm
+}
+
+// 新增资产确认按钮
+const newAssets = () => {
+  if (!ruleFormRef.value) return
+  
+  ruleFormRef.value.validate((valid) => {
+    if (valid) {
+      loading.value = true
+      if (props.pageType == "change") {
+        assetMiniPrograms("put", ruleForm).then((res) => {
+          loading.value = false
+          proxy.$modal.msgSuccess("修改成功")
+          router.push({ name: "Program", params: props.queryData })
+        })
       } else {
-        callback();
+        assetMiniPrograms("post", ruleForm).then((res) => {
+          loading.value = false
+          proxy.$modal.msgSuccess("新增成功")
+          router.go(-1)
+        })
       }
-    };
-    return {
-      ruleForm: {},
-      rules: {
-        bfyy: [{ validator: changeSateTetx, trigger: "blur" }],
-        ssdw: [
-          { required: true, message: "所属单位不能为空", trigger: "blur" },
-          { required: true, validator: equalToPassword, trigger: "change" },
-        ],
-        xcxmc: [
-          { required: true, message: "小程序名称不能为空", trigger: "blur" },
-        ],
-      },
-      loading: false,
-      disabled: false,
-      // disabledTwo:true
-    };
-  },
-  props: ["pageType", "id", "queryData"],
-  mounted() {
-    if (this.pageType == "look") {
-      this.getInfo(this.id);
-      this.disabled = true;
-      this.$nextTick(() => {
-        const inputElements = document.querySelectorAll(".el-input__inner");
-        const textareaInputElements = document.querySelectorAll(
-          ".el-textarea__inner"
-        );
-        inputElements.forEach((input) => {
-          input.placeholder = "";
-        });
-        textareaInputElements.forEach((input) => {
-          input.placeholder = "";
-        });
-      });
-    } else if (this.pageType == "change") {
-      this.getInfo(this.id);
-      this.disabled = false;
-      // this.disabledTwo = false;
     }
-  },
+  })
-  methods: {
+}
-    changeState(e) {
+
-      if (e != 7) {
+const sendBack = () => {
-        this.ruleForm.bfyy = "";
+  router.push({ name: "Program", params: props.queryData })
-      }
+}
-    },
+
-    getInfo(id) {
+onMounted(() => {
-      miniProgramsInfo(id).then((res) => {
+  if (props.pageType == "look") {
-        this.ruleForm = res.data;
+    getInfo(props.id)
-      });
+    disabled.value = true
-    },
+    nextTick(() => {
-    // 单位名称模糊查询
+      const inputElements = document.querySelectorAll(".el-input__inner")
-    querySearchAsync(queryString, cb) {
+      const textareaInputElements = document.querySelectorAll(
-      let results = [];
+        ".el-textarea__inner"
-      unitAllList({ nickName: queryString }).then((res) => {
+      )
-        res.data.forEach((item) => {
+      inputElements.forEach((input) => {
-          results.push({
+        input.placeholder = ""
-            value: item.nickName,
+      })
-            id: item.id,
+      textareaInputElements.forEach((input) => {
-            tyshxydm: item.userName,
+        input.placeholder = ""
-          });
+      })
-        });
+    })
-      });
+  } else if (props.pageType == "change") {
-      cb(results);
+    getInfo(props.id)
-    },
+    disabled.value = false
-    // 单位名称点击搜索到的数据
+  }
-    handleSelect(item) {
+})
-      this.ruleForm.tyshxydm = item.tyshxydm;
-    },
-    // 新增资产确认按钮
-    newAssets() {
-      this.$refs["ruleForm"].validate((valid) => {
-        if (valid) {
-          this.loading = true;
-          if (this.pageType == "change") {
-            assetMiniPrograms("put", this.ruleForm).then((res) => {
-              // console.log(res,"res");
-              this.loading = false;
-              this.$modal.msgSuccess("修改成功");
-              // this.$router.go(-1);
-              this.$router.push({ name: "Program", params: this.queryData });
-            });
-          } else {
-            assetMiniPrograms("post", this.ruleForm).then((res) => {
-              // console.log(res,"res");
-              this.loading = false;
-              this.$modal.msgSuccess("新增成功");
-              this.$router.go(-1);
-            });
-          }
-        }
-      });
-    },
-    sendBack() {
-      // this.$router.go(-1);
-      this.$router.push({ name: "Program", params: this.queryData });
-    },
-  },
-};
 </script>