feat: 机构管理

src/components/base/AppList.vue

@@ -3,7 +3,7 @@
     <div class="table-list-hd">
       <!-- 筛选 -->
       <div class="table-list-filter" v-if="filters.length">
-        <el-form :inline="true" :model="params" ref="filterForm">
+        <el-form :inline="true" :model="params" ref="filterForm" @submit.native.prevent>
           <template v-for="item in filters">
             <el-form-item :label="item.label" :prop="item.prop" :key="item.prop">
               <template v-if="item.slots">
@@ -11,7 +11,13 @@
               </template>
               <template v-else>
                 <!-- input -->
-                <el-input v-model="params[item.prop]" v-bind="item" clearable v-if="item.type === 'input'" />
+                <el-input
+                  v-model="params[item.prop]"
+                  v-bind="item"
+                  clearable
+                  v-if="item.type === 'input'"
+                  @keyup.native.enter="search"
+                />
                 <!-- select -->
                 <el-select
                   v-model="params[item.prop]"

src/modules/roles/views/List.vue

@@ -5,9 +5,9 @@
         <el-button type="primary" icon="el-icon-plus" @click="handleCreate">添加角色</el-button>
       </template>
       <template v-slot:table-x="{ row }">
-        <el-button type="text" @click="handleUpdate(row)">修改</el-button>
-        <el-button type="text" @click="onRemove(row)">删除</el-button>
-        <el-button type="text" @click="handlePermission(row)">权限配置</el-button>&nbsp;
+        <el-button type="primary" @click="handleUpdate(row)">修改</el-button>
+        <el-button type="danger" @click="onRemove(row)">删除</el-button>
+        <el-button type="info" @click="handlePermission(row)">权限配置</el-button>&nbsp;
       </template>
     </app-list>
     <!-- 创建/编辑 -->
@@ -52,7 +52,7 @@ export default {
           { label: '角色名称', prop: 'name' },
           { label: '角色描述', prop: 'desc' },
           { label: '创建时间', prop: 'created_at' },
-          { label: '操作', slots: 'table-x', align: 'right', width: 200, fixed: 'right' }
+          { label: '操作', slots: 'table-x', align: 'right', width: 240, fixed: 'right' }
         ]
       }
     }

src/modules/school/api.js

@@ -4,7 +4,7 @@ import httpRequest from '@/utils/axios'
  * 获取机构列表
  */
 export function getOrgList(params) {
-  return httpRequest.get('/api/xedu/admin/v1/organization', { params })
+  return httpRequest.get('/api/xedu/admin/v1/organizations', { params })
 }
 
 /**
@@ -34,3 +34,10 @@ export function updateOrg(data) {
 export function deleteOrg(data) {
   return httpRequest.delete(`/api/xedu/admin/v1/organization/${data.id}`, data)
 }
+
+/**
+ * 获取角色列表
+ */
+export function getRoleList(params) {
+  return httpRequest.get('/api/xedu/admin/v1/roles', { params })
+}

src/modules/school/components/Editform.vue

 <template>
   <el-dialog :title="title" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="500px">
     <el-form ref="form" :model="form" :rules="rules" label-position="top">
-      <el-form-item label="登录手机号" prop="account">
-        <el-input v-model="form.account" clearable placeholder="请输入登录手机号" />
+      <el-form-item label="登录手机号" prop="login_mobile">
+        <el-input v-model="form.login_mobile" clearable placeholder="请输入登录手机号" />
       </el-form-item>
       <el-form-item label="机构名称" prop="name">
         <el-input v-model="form.name" clearable placeholder="请输入机构名称" />
@@ -20,13 +20,14 @@
       </el-form-item>
       <el-form-item label="机构角色" prop="role_id">
         <el-select v-model="form.role_id" clearable placeholder="请选择机构角色" style="width: 100%">
-          <el-option v-for="item in contentPermission" :label="item.label" :value="item.value" :key="item.value" />
+          <el-option v-for="item in roleList" :label="item.name" :value="item.id" :key="item.id" />
         </el-select>
       </el-form-item>
       <el-form-item label="有效期" prop="validity_date">
         <el-date-picker
           v-model="form.validity_date"
           type="date"
+          value-format="yyyy-MM-dd"
           :picker-options="pickerOptions"
           placeholder="请选择该机构有效期"
         />
@@ -40,7 +41,7 @@
 </template>
 
 <script>
-import { createOrg, updateOrg } from '../api.js'
+import { createOrg, updateOrg, getRoleList } from '../api.js'
 export default {
   props: {
     isEdit: { type: Boolean, default: false },
@@ -49,7 +50,7 @@ export default {
   data() {
     return {
       form: {
-        account: '',
+        login_mobile: '',
         name: '',
         contact_name: '',
         contact_information: '',
@@ -58,7 +59,7 @@ export default {
         validity_date: ''
       },
       rules: {
-        account: [{ required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入登录手机号', trigger: 'blur' }],
+        login_mobile: [{ required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入登录手机号', trigger: 'blur' }],
         name: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
         contact_name: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
         contact_information: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
@@ -66,14 +67,15 @@ export default {
         role_id: [{ required: true, message: '请选择机构角色', trigger: 'change' }]
       },
       contentPermission: [
-        { label: '免费内容', value: '1' },
-        { label: '付费内容', value: '2' }
+        { label: '付费内容', value: 1 },
+        { label: '免费内容', value: 2 }
       ],
       pickerOptions: {
         disabledDate(time) {
           return time.getTime() < Date.now()
         }
-      }
+      },
+      roleList: [] // 角色列表
     }
   },
   watch: {
@@ -89,7 +91,15 @@ export default {
       return this.isEdit ? '编辑机构' : '添加机构'
     }
   },
+  beforeMount() {
+    this.getRoleList()
+  },
   methods: {
+    getRoleList() {
+      getRoleList({ limit: 100 }).then(res => {
+        this.roleList = res.data.data
+      })
+    },
     // 取消
     onCancel() {
       this.$emit('update:visible', false)

src/modules/school/views/Detail.vue

 <template>
-  <app-card title="机构信息">
+  <app-card :title="detail.name">
     <template #header-aside>
       <el-button type="primary" @click="visible = true">编辑</el-button>
     </template>
-    <el-descriptions :title="detail.name" :column="1">
+    <el-descriptions :column="1" size="medium">
       <!-- <el-descriptions-item label="机构名称">{{ detail.name }}</el-descriptions-item> -->
       <el-descriptions-item label="联系人">{{ detail.contact_name }}</el-descriptions-item>
       <el-descriptions-item label="联系方式">{{ detail.contact_information }}</el-descriptions-item>
       <el-descriptions-item label="机构内容权限">
-        <el-tag size="small">{{ detail.content_permissions }}</el-tag>
+        <el-tag>{{ contentPermissionName(detail.content_permissions) }}</el-tag>
       </el-descriptions-item>
       <el-descriptions-item label="机构角色">
-        <el-tag size="small">{{ detail.role_id }}</el-tag>
+        <el-tag>{{ detail.role_name }}</el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="有效期"
+        >{{ detail.validity_date }}
+        <el-tag v-if="detail.is_valid">未过期</el-tag>
+        <el-tag type="danger" v-else>已过期</el-tag>
       </el-descriptions-item>
-      <el-descriptions-item label="有效期">{{ detail.validity_date }}</el-descriptions-item>
     </el-descriptions>
     <!-- 编辑 -->
     <editform
@@ -30,6 +34,9 @@
 import { getOrg } from '../api.js'
 
 export default {
+  components: {
+    Editform: () => import('../components/Editform.vue')
+  },
   data() {
     return {
       visible: false,
@@ -38,7 +45,7 @@ export default {
   },
   computed: {
     id() {
-      return this.$route.params.id
+      return this.$route.query.id
     }
   },
   beforeMount() {
@@ -46,13 +53,17 @@ export default {
   },
   methods: {
     getDetail() {
-      getOrg(this.id).then(res => {
+      getOrg({ id: this.id }).then(res => {
         this.detail = res.data
       })
     },
     // 更新成功
     handleUpdateSuccess(data) {
       this.getDetail()
+    },
+    contentPermissionName(value) {
+      const map = { 1: '付费内容', 2: '免费内容' }
+      return map[value] || value
     }
   }
 }

src/modules/school/views/List.vue

@@ -4,12 +4,19 @@
       <template #header-aside>
         <el-button type="primary" icon="el-icon-plus" @click="handleCreate">添加机构</el-button>
       </template>
+      <template v-slot:table-role="{ row }">
+        <el-tag>{{ row.role_name }}</el-tag>
+      </template>
+      <template v-slot:table-status="{ row }">
+        <el-tag v-if="row.is_valid">未过期</el-tag>
+        <el-tag type="danger" v-else>已过期</el-tag>
+      </template>
       <template v-slot:table-x="{ row }">
-        <router-link :to="{ path: 'class/view', query: { id: row.id } }" target="_blank">
-          <el-button type="text">查看</el-button>
+        <router-link :to="{ path: 'school/view', query: { id: row.id } }" target="_blank" style="margin-right: 10px">
+          <el-button>查看</el-button>
         </router-link>
-        <el-button type="text" @click="handleUpdate(row)">编辑</el-button>
-        <el-button type="text" @click="onRemove(row)">删除</el-button>
+        <el-button type="primary" @click="handleUpdate(row)">编辑</el-button>
+        <el-button type="danger" @click="onRemove(row)">删除</el-button>
       </template>
     </app-list>
     <!-- 创建/编辑 -->
@@ -25,7 +32,7 @@
 
 <script>
 // 接口
-import { getOrgList, deleteOrg } from '../api'
+import { getOrgList, deleteOrg, getRoleList } from '../api'
 
 export default {
   components: {
@@ -35,7 +42,8 @@ export default {
     return {
       visible: false,
       isEdit: false, // 是否是编辑状态
-      editRaw: {} // 编辑的数据
+      editRaw: {}, // 编辑的数据
+      roleList: [] // 角色列表
     }
   },
   computed: {
@@ -44,9 +52,14 @@ export default {
       return {
         remote: {
           httpRequest: getOrgList,
-          params: {}
+          params: { id: '', name: '', content_permissions: '', role_id: '' }
         },
         filters: [
+          {
+            type: 'input',
+            prop: 'id',
+            placeholder: '机构ID'
+          },
           {
             type: 'input',
             prop: 'name',
@@ -54,34 +67,62 @@ export default {
           },
           {
             type: 'select',
-            prop: 'permission',
+            prop: 'content_permissions',
             placeholder: '机构内容权限',
             options: [
-              { label: '免费内容', value: '1' },
-              { label: '付费内容', value: '2' }
+              { label: '付费内容', value: 1 },
+              { label: '免费内容', value: 2 }
             ]
           },
           {
             type: 'select',
-            prop: 'role',
-            placeholder: '机构角色'
+            prop: 'role_id',
+            placeholder: '机构角色',
+            options: this.roleList,
+            labelKey: 'name',
+            valueKey: 'id'
           }
         ],
         columns: [
           { label: '机构ID', prop: 'id' },
           { label: '机构名称', prop: 'name' },
-          { label: '机构内容权限', prop: 'permission' },
-          { label: '机构角色', prop: 'role' },
-          { label: '创建人', prop: 'create' },
-          { label: '机构内用户数', prop: 'count' },
-          { label: '创建时间', prop: 'date' },
-          { label: '状态', prop: 'status' },
-          { label: '操作', slots: 'table-x', align: 'right', width: '120', fixed: 'right' }
+          {
+            label: '机构内容权限',
+            prop: 'content_permissions',
+            computed({ row }) {
+              const map = { 1: '付费内容', 2: '免费内容' }
+              return map[row.content_permissions] || row.content_permissions
+            }
+          },
+          { label: '机构角色', prop: 'role_name', slots: 'table-role' },
+          {
+            label: '创建人',
+            prop: 'created_by.realname',
+            computed({ row }) {
+              return row.created_by.realname || row.created_by.username
+            }
+          },
+          { label: '机构内用户数', prop: 'edu_staff_count' },
+          { label: '创建时间', prop: 'created_at' },
+          {
+            label: '状态',
+            prop: 'is_valid',
+            slots: 'table-status'
+          },
+          { label: '操作', slots: 'table-x', align: 'right', width: '220', fixed: 'right' }
         ]
       }
     }
   },
+  beforeMount() {
+    this.getRoleList()
+  },
   methods: {
+    getRoleList() {
+      getRoleList({ limit: 100 }).then(res => {
+        this.roleList = res.data.data
+      })
+    },
     // 创建成功刷新列表
     handleSuccess() {
       this.$refs.list.refetch()
@@ -100,7 +141,7 @@ export default {
     },
     // 删除
     onRemove(row) {
-      this.$confirm('班级删除请谨慎操作，确定删除？', '删除班级', {
+      this.$confirm('机构删除请谨慎操作，确定删除？', '删除机构', {
         confirmButtonText: '删除',
         cancelButtonText: '取消',
         type: 'warning'