refactor(group): Migration to Vue3 (#420)

re #418

Author: vanoneang

package-lock.json

@@ -16,7 +16,6 @@
     "@antv/g2plot": "^0.11.35",
     "@babel/polyfill": "^7.4.4",
     "@tinymce/tinymce-vue": "^2.0.0",
-    "@vue/composition-api": "^0.5.0",
     "axios": "~0.18.0",
     "core-js": "^3.6.5",
     "element-plus": "^1.0.1-beta.19",

package.json

@@ -4,8 +4,7 @@
       <ul class="menu-tab">
         <router-link :to="tab.path" v-for="tab in menuTabs" :key="tab.path" ref="menuTabs">
           <li ref="tabList" class="menu-li">
-            <!-- eslint-disable-next-line vue/no-deprecated-filter -->
-            <i :class="tab.icon" /> <span class="title">{{ tab.title | filterTitle }}</span>
+            <i :class="tab.icon" /> <span class="title">{{ $filters.filterTitle(tab.title) }}</span>
           </li>
         </router-link>
       </ul>

src/component/layout/menu-tab.vue

@@ -41,7 +41,7 @@ const adminRouter = {
       ],
     },
     {
-      route: '/admin/group',
+      route: '/admin/group/list',
       name: null,
       title: '分组管理',
       type: 'tab', // 取 route 为默认加载页

src/config/stage/admin.js

@@ -5,10 +5,10 @@
       <el-col :lg="16" :md="20" :sm="24" :xs="24">
         <div class="content">
           <el-form
+            ref="form"
             status-icon
             :rules="rules"
             :model="group"
-            ref="form"
             label-position="right"
             label-width="100px"
             v-loading="loading"
@@ -21,12 +21,7 @@
               <el-input size="medium" clearable v-model="group.info"></el-input>
             </el-form-item>
             <el-form-item>
-              <group-permissions
-                @updatePermissions="updatePermissions"
-                @updateAllPermissions="updateAllPermissions"
-                ref="groupPermissions"
-                title="分配权限"
-              >
+              <group-permissions title="分配权限" ref="groupPermissions" @updatePermissions="updatePermissions">
               </group-permissions>
             </el-form-item>
             <el-form-item class="submit">
@@ -41,6 +36,7 @@
 </template>
 
 <script>
+import { useRouter } from 'vue-router'
 import { ref, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 import AdminModel from '@/lin/model/admin'
@@ -50,45 +46,38 @@ export default {
   components: {
     GroupPermissions,
   },
-  inject: ['eventBus'],
-  setup(props, ctx) {
+  setup() {
     /**
      * 表单验证规则
      */
-    const checkName = (rule, value, callback) => {
-      if (!value) {
-        return callback(new Error('分组名称不能为空'))
-      }
-      callback()
-    }
-    const rules = {
-      name: [{ validator: checkName, trigger: ['blur', 'change'], required: true }],
-      info: [],
-    }
+    const { rules } = getRules()
 
     // originally data properties
+    const form = ref(null)
+    const groupPermissions = ref(null)
+
     const loading = ref(false)
+    const router = useRouter()
     const permissions = ref([])
     const allPermissions = ref([])
-    const { router } = ctx.root.$options
     const group = reactive({ name: '', info: '' })
 
     /**
      * 重置表单
      */
-    const resetForm = formName => {
-      ctx.refs[formName].resetFields()
-      ctx.refs.groupPermissions.getGroupPermissions()
+    const resetForm = () => {
+      form.value.resetFields()
+      groupPermissions.value.getGroupPermissions()
     }
 
     /**
      * 提交表单
      * 添加新的分组
      */
-    const submitForm = async formName => {
-      ctx.refs[formName].validate(async valid => {
+    const submitForm = async () => {
+      form.value.validate(async valid => {
         if (valid) {
-          let res
+          let res = {}
           const finalPermissions = permissions.value.filter(x => Object.keys(allPermissions.value).indexOf(x) < 0)
           try {
             loading.value = true
@@ -101,7 +90,7 @@ export default {
             loading.value = false
             ElMessage.success(`${res.message}`)
             router.push('/admin/group/list')
-            resetForm('form')
+            resetForm()
           } else {
             loading.value = false
             ElMessage.error(`${res.message}`)
@@ -119,23 +108,28 @@ export default {
       permissions.value = picked
     }
 
-    /**
-     * 全部权限
-     */
-    const updateAllPermissions = all => {
-      allPermissions.value = all
-    }
-
     return {
+      form,
       rules,
       group,
       resetForm,
       submitForm,
+      groupPermissions,
       updatePermissions,
-      updateAllPermissions,
     }
   },
 }
+
+function getRules() {
+  const checkName = (rule, value, callback) => {
+    if (!value) {
+      return callback(new Error('分组名称不能为空'))
+    }
+    callback()
+  }
+  const rules = { info: [], name: [{ validator: checkName, trigger: ['blur', 'change'], required: true }] }
+  return { rules }
+}
 </script>
 
 <style lang="scss" scoped>

src/view/admin/group/group-create.vue

@@ -27,6 +27,7 @@
 
 <script>
 import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import AdminModel from '@/lin/model/admin'
 import GroupPermissions from './group-permission'
@@ -35,10 +36,12 @@ export default {
   components: {
     GroupPermissions,
   },
-  setup(props, ctx) {
+  setup() {
+    const route = useRoute()
+    const router = useRouter()
     // originally data properties
-    const allPermissions = ref([])
     const permissions = ref([])
+    const allPermissions = ref([])
     const cachePermissions = ref([])
 
     /**
@@ -78,10 +81,10 @@ export default {
           .filter(v => !cachePermissions.value.includes(v))
 
         if (addPermissions.length > 0) {
-          addRes = await AdminModel.dispatchPermissions(ctx.root.$route.query.id, addPermissions)
+          addRes = await AdminModel.dispatchPermissions(route.query.id, addPermissions)
         }
         if (deletePermissions.length > 0) {
-          delRes = await AdminModel.removePermissions(ctx.root.$route.query.id, deletePermissions)
+          delRes = await AdminModel.removePermissions(route.query.id, deletePermissions)
         }
         if (addRes.code < window.MAX_SUCCESS_CODE || delRes.code < window.MAX_SUCCESS_CODE) {
           ElMessage.success('权限修改成功')
@@ -93,14 +96,16 @@ export default {
      * 返回
      */
     const back = () => {
-      const { router } = ctx.root.$options
       router.go(-1)
     }
 
     return {
       back,
+      permissions,
       confirmEdit,
+      allPermissions,
       getCacheAuthIds,
+      cachePermissions,
       updatePermissions,
       updateAllPermissions,
     }

src/view/admin/group/group-edit.vue

@@ -2,33 +2,34 @@
   <!-- 列表页面 -->
   <div class="container">
     <div class="title">分组列表信息</div>
-    <el-table :data="tableData" v-loading="loading">
+    <el-table :data="tableData" v-loading="loading" @row-dblclick="rowDoubleClick">
       <el-table-column prop="name" label="名称"></el-table-column>
       <el-table-column prop="info" label="分组描述"></el-table-column>
       <el-table-column label="操作" fixed="right" width="275">
         <template #default="scope">
-          <el-button plain size="mini" type="primary" @click="handleEdit(scope.row.id)">信息</el-button>
+          <el-button plain size="mini" type="primary" @click="handleEdit(scope.row)">信息</el-button>
           <el-button plain size="mini" type="info" @click="goToGroupEditPage(scope.row.id)">权限</el-button>
           <el-button plain size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
+    <!-- 分组信息 -->
     <el-dialog
       title="分组信息"
       :append-to-body="true"
-      v-model:visible="dialogFormVisible"
+      v-model="dialogFormVisible"
       :before-close="handleClose"
       class="groupListInfoDialog"
     >
       <div style="margin-top:-25px;">
         <el-form
-          status-icon
-          v-if="dialogFormVisible"
           ref="form"
-          label-width="120px"
+          status-icon
+          :rules="rules"
           :model="group"
+          label-width="120px"
+          v-if="dialogFormVisible"
           label-position="labelPosition"
-          :rules="rules"
           style="margin-left:-35px;margin-bottom:-35px;margin-top:15px;"
         >
           <el-form-item label="分组名称" prop="name">
@@ -42,18 +43,20 @@
       <template #footer>
         <div class="dialog-footer" style="padding-left:5px;">
           <el-button type="primary" @click="confirmEdit">确 定</el-button>
-          <el-button @click="resetForm('form')">重 置</el-button>
+          <el-button @click="resetForm">重 置</el-button>
         </div>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { useGroupList, useEditGroup } from './hook'
+import { useRouter } from 'vue-router'
+import { useGroupList, useEditGroup } from './use-group'
 
 export default {
   setup(props, ctx) {
+    const router = useRouter()
     /**
      * 分组列表所需数据
      */
@@ -64,37 +67,38 @@ export default {
      */
     const {
       id,
+      form,
       rules,
       group,
-      rowClick,
       resetForm,
       handleEdit,
       confirmEdit,
       handleClose,
+      rowDoubleClick,
       dialogFormVisible,
     } = useEditGroup(ctx, getAllGroups)
 
     /**
      * 前往修改分组权限页
      */
-    const goToGroupEditPage = val => {
-      id.value = val.row.id
-      const { router } = ctx.root.$options
-      router.push({ path: '/admin/group/edit', query: { id: val.row.id } })
+    const goToGroupEditPage = groupId => {
+      id.value = groupId
+      router.push({ path: '/admin/group/edit', query: { id: groupId } })
     }
 
     return {
       id,
+      form,
       rules,
       group,
       loading,
-      rowClick,
       tableData,
       resetForm,
       handleEdit,
       confirmEdit,
       handleClose,
       handleDelete,
+      rowDoubleClick,
       goToGroupEditPage,
       dialogFormVisible,
     }