ljr-cli 1.0.0 → 1.0.2

package/lib/templates/vue2.7.16/src/main.js

@@ -0,0 +1,79 @@
+import Vue from "vue"
+import App from "./App.vue"
+import router from "./router"
+import store from "./store"
+
+import "l-global/css/index.css"
+import "./css/coverage-style.css"
+
+// 引入 ElementUI
+import ElementUI from "element-ui"
+import "element-ui/lib/theme-chalk/index.css"
+Vue.use(ElementUI, { size: "small" })
+
+// 引入原型扩展
+import prototype from "@/prototype/index.js"
+Vue.use(prototype)
+
+// 引入指令
+import directive from "@/directive/index.js"
+Vue.use(directive)
+
+// 引入全局组件
+import "@/components/index.js"
+
+Vue.config.productionTip = false
+
+import { mapGetters } from "vuex"
+
+new Vue({
+  router,
+  store,
+  computed: {
+    ...mapGetters(["dd"]),
+  },
+  render: (h) => h(App),
+  /** 这里是因为store的方法没有返回值，所以挂载到全局上 */
+  methods: {
+    /** 数据字典编码转换名称
+     * @param { Object } obj 对象类型
+     * @returns { String } 返回值，不存在或者不是对象格式返回空串
+     * @example
+     * $root.ddCodeToName({ sex: "1" })
+     */
+    ddCodeToName(obj) {
+      // 不存在直接返回空串
+      if (!obj) {
+        console.error("数据字典编码转换名称：参数为空，返回空字符串")
+        return ""
+      }
+
+      // 如果不是对象格式，返回空串
+      if (Object.prototype.toString.call(obj) !== "[object Object]") {
+        console.error(`ddCodeToName方法需要对象格式! 像 ddCodeToName({ sex: "1" })`)
+        return ""
+      }
+
+      // 如果是空对象，返回空串
+      if (!Object.keys(obj).length) {
+        console.error(`ddCodeToName方法需要对象格式! 像 ddCodeToName({ sex: "1" })，不能为空对象`)
+        return ""
+      }
+
+      const ddKey = Object.keys(obj)[0] // 数据字典的key
+      const dd = this.$root.dd?.[ddKey] || null
+      if (dd?.length) {
+        const currentDD = dd.filter((f) => f.value === obj[ddKey])[0] || null
+        if (currentDD) {
+          return currentDD.label
+        }
+        if (!currentDD) {
+          return obj[ddKey]
+        }
+      }
+      if (!dd) {
+        return obj[ddKey]
+      }
+    },
+  },
+}).$mount("#app")

package/lib/templates/vue2.7.16/src/prototype/README.md

@@ -0,0 +1 @@
+# 此文件夹是放一些挂载到原型上的

package/lib/templates/vue2.7.16/src/prototype/el-dialog.js

@@ -0,0 +1,127 @@
+const dialogMixin = {
+  props: {
+    title: {
+      type: [String],
+      default: "",
+    },
+    width: {
+      type: [String],
+      default: "50%",
+    },
+    fullscreen: {
+      type: [Boolean],
+      default: false,
+    },
+    top: {
+      type: [String],
+      default: "15vh",
+    },
+    modal: {
+      type: [Boolean],
+      default: true,
+    },
+    modalAppendToBody: {
+      type: [Boolean],
+      default: true,
+    },
+    appendToBody: {
+      type: [Boolean],
+      default: true,
+    },
+    lockScroll: {
+      type: [Boolean],
+      default: true,
+    },
+    customClass: {
+      type: [String],
+      default: "",
+    },
+    closeOnClickModal: {
+      type: [Boolean],
+      default: true,
+    },
+    closeOnPressEscape: {
+      type: [Boolean],
+      default: true,
+    },
+    showClose: {
+      type: [Boolean],
+      default: true,
+    },
+    beforeClose: {
+      type: [Function],
+    },
+    center: {
+      type: [Boolean],
+      default: false,
+    },
+    destroyOnClose: {
+      type: [Boolean],
+      default: false,
+    },
+    on: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      visible: false,
+    }
+  },
+  watch: {
+    visible(value) {
+      // 动画结束后销毁实例
+      if (value === false) {
+        setTimeout(() => {
+          this.$destroy()
+          if (this?.$el?.parentNode) {
+            this.$el.parentNode.removeChild(this.$el)
+          }
+        }, 400)
+      }
+    },
+  },
+  mounted() {
+    document.body.appendChild(this.$el)
+    this.visible = true
+  },
+  methods: {
+    // 关闭对话框
+    close(refresh) {
+      this.visible = false
+      if (refresh) {
+        this?.on?.refresh(true) // 刷新
+      }
+    },
+  },
+}
+
+export default {
+  install(Vue, config = {}) {
+    Vue.prototype[`$${config.prefix}Dialog`] = (component, props) => {
+      component.default && (component = component.default)
+      const mixins = component.mixins || []
+      mixins.push(dialogMixin) // 实现自动打开，动态了混入生命周期函数和销毁操作
+      component.mixins = mixins
+      const Dialog = Vue.extend(component)
+      const dialog = new Dialog({
+        propsData: props || {},
+      })
+      dialog.$mount()
+    }
+  },
+}
+
+// 使用示例
+// 1.在需要调用的地方调用
+// ce() {
+//     this.$LDialog(require("./ce.vue"), {
+//         title: "创建编辑",
+//         on: {
+//             refresh: () => {
+//                 console.log("刷新方法")
+//             }
+//         }
+//     })
+// }

package/lib/templates/vue2.7.16/src/prototype/index.js

@@ -0,0 +1,53 @@
+// 全局配置
+import globalConfig from "@/global-config.js"
+
+import request from "@/api/request.js"
+
+// 要挂载到原型的弹窗组件
+import elDialog from "./el-dialog.js"
+
+export default {
+  install(Vue) {
+    Vue.use(elDialog, globalConfig)
+    // 全局事件总线
+    Vue.prototype.$eventBus = new Vue()
+    // 挂载请求方法到原型
+    Vue.prototype.$api = request
+    // 原型的请求使用示例
+
+    // this.$api
+    //   .service({
+    //     method: "get",
+    //     url,
+    //     headers: {
+    //       ...(header || {}),
+    //     },
+    //     responseType,
+    //     params,
+    //   })
+    //   .then((res) => {
+    //     console.log("res=====>", res)
+    //   })
+    //   .catch((err) => {
+    //     console.log("err=====>", err)
+    //   })
+    //   .finally((err) => {
+    //     console.log("err=====>", err)
+    //   })
+
+    // // get示例
+    // this.$api.get(this.remoteUrl, {}).then((res) => {
+    //     console.log("res=====>", res)
+    // })
+
+    // // post示例
+    // this.$api.post(url, params).then((res) => {
+    //     console.log("res=====>", res)
+    // })
+
+    // // postFormData示例
+    // this.$api.postFormData(url, params).then((res) => {
+    //     console.log("res=====>", res)
+    // })
+  },
+}

package/lib/templates/vue2.7.16/src/router/index.js

@@ -0,0 +1,257 @@
+import Vue from "vue"
+import VueRouter from "vue-router"
+import store from "@/store/index.js"
+// 左侧菜单和顶部信息布局组件
+import LeftMenuAndTopInfo from "@/components/layout/left-menu-and-top-info.vue"
+
+Vue.use(VueRouter)
+const routes = [
+  {
+    // WARNING: 最终的生成的路径是父级+子级的路径，注意子级不要加/，否则视为绝对路径
+    path: "/",
+    component: LeftMenuAndTopInfo,
+    children: [
+      {
+        path: "",
+        name: "home",
+        component: () => import("@/views/home.vue"),
+        meta: {
+          /** 标题 */
+          title: "主页",
+          /** 菜单图标 */
+          titleIcon: "el-icon-s-home",
+          /** 是否菜单 */
+          isMenu: true,
+        },
+      },
+    ],
+  },
+  {
+    path: "/demo",
+    component: LeftMenuAndTopInfo,
+    meta: {
+      title: "案例",
+      titleIcon: "el-icon-star-on",
+      isMenu: true,
+    },
+    children: [
+      {
+        path: "global-dialog",
+        name: "globalDialog",
+        component: () => import("@/views/demo/全局弹窗/index.vue"),
+        meta: {
+          title: "全局弹窗",
+          titleIcon: "el-icon-postcard",
+          isMenu: true,
+        },
+      },
+      {
+        path: "global-store-dd",
+        name: "globalStoreDD",
+        component: () => import("@/views/demo/全局store数据字典/index.vue"),
+        meta: {
+          title: "全局store数据字典",
+          titleIcon: "el-icon-s-data",
+          isMenu: true,
+        },
+      },
+      {
+        path: "global-directive",
+        name: "globalDirective",
+        component: () => import("@/views/demo/全局指令/index.vue"),
+        meta: {
+          title: "全局指令",
+          titleIcon: "el-icon-s-grid",
+          isMenu: true,
+        },
+      },
+      {
+        path: "api-demo",
+        name: "apiDemo",
+        component: () => import("@/views/demo/请求示例/index.vue"),
+        meta: {
+          title: "请求示例",
+          titleIcon: "el-icon-s-grid",
+          isMenu: true,
+        },
+      },
+    ],
+  },
+  {
+    path: "/template",
+    component: LeftMenuAndTopInfo,
+    meta: {
+      title: "模版",
+      titleIcon: "el-icon-star-on",
+      isMenu: true,
+    },
+    children: [
+      {
+        path: "list",
+        name: "list",
+        component: () => import("@/views/template/list/index.vue"),
+        meta: {
+          title: "列表",
+          titleIcon: "el-icon-document",
+          isMenu: true,
+        },
+      },
+      {
+        path: "base-info",
+        name: "baseInfo",
+        component: () => import("@/views/template/base-info.vue"),
+        meta: {
+          title: "基础信息布局",
+          titleIcon: "el-icon-document",
+          isMenu: true,
+          needPadding: false,
+        },
+      },
+      {
+        path: "base-info2",
+        name: "baseInfo2",
+        component: () => import("@/views/template/base-info2.vue"),
+        meta: {
+          title: "基础信息布局2",
+          titleIcon: "el-icon-coffee-cup",
+          isMenu: true,
+          needPadding: false,
+        },
+      },
+    ],
+  },
+  {
+    path: "/Pitfalls",
+    component: LeftMenuAndTopInfo,
+    meta: {
+      title: "遇到的坑",
+      titleIcon: "el-icon-star-on",
+      isMenu: true,
+    },
+    children: [
+      {
+        path: "memory-overflow",
+        name: "memoryOverflow",
+        component: () => import("@/views/Pitfalls/内存溢出/index.vue"),
+        meta: {
+          title: "内存溢出",
+          titleIcon: "el-icon-postcard",
+          isMenu: true,
+        },
+      },
+    ],
+  },
+  {
+    path: "/login",
+    name: "login",
+    component: () => import("@/views/login.vue"),
+    meta: {
+      title: "登录页",
+      titleIcon: "el-icon-s-custom",
+      isMenu: true,
+    },
+  },
+  {
+    path: "/",
+    component: LeftMenuAndTopInfo,
+    children: [
+      {
+        path: "about",
+        name: "about",
+        component: () => import("@/views/about.vue"),
+        meta: {
+          title: "关于页",
+          titleIcon: "el-icon-s-comment",
+          isMenu: true,
+        },
+      },
+      {
+        path: "404",
+        name: "404",
+        meta: {
+          title: "404",
+          titleIcon: "el-icon-menu",
+          isMenu: true,
+        },
+        component: () => import("@/views/404.vue"),
+      },
+    ],
+  },
+  {
+    path: "*",
+    redirect: "/404", // 重定向到404页面
+  },
+]
+
+const router = new VueRouter({
+  mode: "hash", // hash | history
+  base: process.env.BASE_URL,
+  routes,
+})
+
+// 全局路由守卫
+router.beforeEach((to, from, next) => {
+  // 需要登录 并且 登录状态为false 并且 不是登录页面
+  if (store.state.needLogin && !store.state.loginStatus && to.name !== "login") {
+    if (from.name !== "login") {
+      router.push({ name: "login" })
+    }
+    next(false)
+    return
+  }
+  next()
+})
+
+/** 获取菜单，仅支持两级 */
+export const getMenu = function () {
+  const menu = []
+  router.options.routes.forEach((e1) => {
+    // 如果父级有配置isMenu，并且没有子级，则作为一级菜单
+    if (!e1.children?.length && e1.meta?.isMenu) {
+      menu.push({
+        fullPath: e1.path,
+        title: e1.meta?.title,
+        titleIcon: e1.meta?.titleIcon,
+      })
+    }
+
+    // 循环子级，如果子级有配置isMenu，则将父级作为一级菜单，自己作为二级菜单
+    if (e1.children?.length) {
+      // 子级菜单
+      const childrenMenu = e1.children.filter((f) => f.meta?.isMenu)
+      if (childrenMenu.length) {
+        // 如果第一级有配置isMenu
+        if (e1.meta?.isMenu) {
+          const currentFather = {
+            fullPath: e1.path,
+            title: e1.meta?.title,
+            titleIcon: e1.meta?.titleIcon,
+            children: [],
+          }
+          childrenMenu.forEach((e2) => {
+            currentFather.children.push({
+              fullPath: e1.path + "/" + e2.path,
+              title: e2.meta?.title,
+              titleIcon: e2.meta?.titleIcon,
+            })
+          })
+          menu.push(currentFather)
+        }
+
+        // 如果第一级没有配置isMenu，则将第二级菜单作为父级菜单
+        if (!e1.meta?.isMenu) {
+          childrenMenu.forEach((e2) => {
+            menu.push({
+              fullPath: e1.path + e2.path,
+              title: e2.meta?.title,
+              titleIcon: e2.meta?.titleIcon,
+            })
+          })
+        }
+      }
+    }
+  })
+  return menu
+}
+
+export default router

package/lib/templates/vue2.7.16/src/store/index.js

@@ -0,0 +1,50 @@
+import Vue from "vue"
+import Vuex from "vuex"
+import VuexPersistence from "vuex-persist"
+import dd from "./modules/dd.js"
+import permissions from "./modules/permissions.js"
+
+Vue.use(Vuex)
+
+const vuexLocal = new VuexPersistence({
+  storage: window.localStorage,
+})
+
+export default new Vuex.Store({
+  state: {
+    /** 是否需要登录 */
+    needLogin: false,
+
+    /** 登录状态 */
+    loginStatus: false,
+  },
+  /** 对store进行派生 */
+  getters: {
+    dd: (state) => state.dd.all,
+    permissions: (state) => state.permissions.permissions,
+  },
+  /** 同步函数，也是唯一修改state的方法，可以直接通过this.$store.commit() 触发 */
+  mutations: {
+    /** 改变登录状态，这里仅演示，不调用任何接口直接改变状态 */
+    changeLoginStatus(state) {
+      state.loginStatus = !state.loginStatus
+    },
+    /** 改变是否需要登录 */
+    changeNeedLogin(state) {
+      state.needLogin = !state.needLogin
+    },
+  },
+  /** 异步函数，可以通过 store.dispatch('asyncActionsFn') */
+  actions: {
+    asyncActionsFn() {
+      console.log("我是异步actions方法=====>")
+    },
+  },
+  /** 模块 */
+  modules: {
+    dd,
+    permissions,
+  },
+  /** 插件 */
+  plugins: [vuexLocal.plugin],
+})

package/lib/templates/vue2.7.16/src/store/modules/dd.js

@@ -0,0 +1,128 @@
+import { cloneDeep } from "lodash"
+
+const dd = {
+  state: {
+    // 为了不一定那么多字段，所以这里定义一个对象
+    all: {
+      // sex: null, // 这里不需要定义也可以
+      // citys: null // 这里不需要定义也可以
+    },
+  },
+  // 同步执行，专注于修改State，理论上是修改State的唯一途径
+  // 调用 this.$store.commit('SET_DD')
+  mutations: {
+    /** 设置字典 */
+    SET_DD: (state, { code, data }) => {
+      const temp = cloneDeep(state.all)
+      temp[code] = data
+      state.all = temp
+    },
+    /** 清空字典 */
+    CLEAR_DD: (state) => {
+      state.all = {}
+    },
+  },
+  // 异步，但不能直接操作State，一般用来写业务代码、异步请求
+  // 调用 this.$store.dispatch('GET_DD')
+  actions: {
+    /** 获取字典 */
+    getDD({ commit, state }, code) {
+      if (state.all[code] && state.all[code] !== null) {
+        return
+      }
+      // 先随便设置一个 null 以外的值，以免重复请求
+      commit("SET_DD", { code, data: [] })
+      if (code === "sex") {
+        commit("SET_DD", {
+          code,
+          data: [
+            { label: "男", value: "1" },
+            { label: "女", value: "0" },
+          ],
+        })
+      }
+      if (code === "citys") {
+        commit("SET_DD", {
+          code,
+          data: [
+            { label: "北京", value: "1" },
+            { label: "上海", value: "2" },
+            { label: "广州", value: "3" },
+            { label: "深圳", value: "4" },
+            { label: "厦门", value: "5" },
+          ],
+        })
+      }
+    },
+  },
+}
+
+// 使用说明：
+// 1.使用的页面需要调用一下getDD方法，如果数据字典的code !== null，则不会再次请求，为了优化性能不会一开始就全部存到store里
+// this.$store.dispatch("getDD", "sex")
+// this.$store.dispatch("getDD", "citys")
+
+// 2.然后在真正需要使用数据字典的地方  $store.getters.dd.***  ***表示字典的code
+// 例子：
+// <el-select v-model="activeCity" placeholder="请选择">
+//   <el-option v-for="item in $store.getters.dd.citys" :key="item.value" :label="item.label" :value="item.value">
+//   </el-option>
+// </el-select>
+
+// 如果需要把code转换成name，可以使用下面的方法：
+
+// 1.在main.js里添加
+// import { mapGetters } from "vuex"
+
+// 2.在new Vue() 里添加计算属性和全局字典转换name方法
+// new Vue({
+//   el: "#app",
+//   computed: {
+//     ...mapGetters(["dd"]),
+//   },
+//   methods: {
+//     /** 数据字典编码转换名称
+//      * @param { Object } obj 对象类型
+//      * @returns { String } 返回值，不存在或者不是对象格式返回空串
+//      * @example
+//      * $root.ddCodeToName({ sex: "1" })
+//      */
+//     ddCodeToName(obj) {
+//       // 不存在直接返回空串
+//       if (!obj) {
+//         console.error("数据字典编码转换名称：参数为空，返回空字符串")
+//         return ""
+//       }
+
+//       // 如果不是对象格式，返回空串
+//       if (Object.prototype.toString.call(obj) !== "[object Object]") {
+//         console.error(`ddCodeToName方法需要对象格式! 像 ddCodeToName({ sex: "1" })`)
+//         return ""
+//       }
+
+//       // 如果是空对象，返回空串
+//       if (!Object.keys(obj).length) {
+//         console.error(`ddCodeToName方法需要对象格式! 像 ddCodeToName({ sex: "1" })，不能为空对象`)
+//         return ""
+//       }
+
+//       const ddKey = Object.keys(obj)[0] // 数据字典的key
+//       const dd = this.$root.dd?.[ddKey] || null
+//       if (dd?.length) {
+//         const currentDD = dd.filter((f) => f.value === obj[ddKey])[0] || null
+//         if (currentDD) {
+//           return currentDD.label
+//         }
+//         if (!currentDD) {
+//           return obj[ddKey]
+//         }
+//       }
+//       if (!dd) {
+//         return obj[ddKey]
+//       }
+//     },
+//   },
+//   render: (h) => h(App),
+// })
+
+export default dd