update list

package-lock.json

@@ -41,21 +41,21 @@
       "dev": true
     },
     "@babel/core": {
-      "version": "7.19.1",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/@babel/core/-/core-7.19.1.tgz",
-      "integrity": "sha512-1H8VgqXme4UXCRv7/Wa1bq7RVymKOzC7znjyFM8KiEzwFqcKUKYNoQef4GhdklgNvoBXyW4gYhuBNCM5o1zImw==",
+      "version": "7.19.3",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/@babel/core/-/core-7.19.3.tgz",
+      "integrity": "sha512-WneDJxdsjEvyKtXKsaBGbDeiyOjR5vYq4HcShxnIbG0qixpoHjI3MqeZM9NDvsojNCEBItQE4juOo/bU6e72gQ==",
       "dev": true,
       "requires": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.19.0",
-        "@babel/helper-compilation-targets": "^7.19.1",
+        "@babel/generator": "^7.19.3",
+        "@babel/helper-compilation-targets": "^7.19.3",
         "@babel/helper-module-transforms": "^7.19.0",
         "@babel/helpers": "^7.19.0",
-        "@babel/parser": "^7.19.1",
+        "@babel/parser": "^7.19.3",
         "@babel/template": "^7.18.10",
-        "@babel/traverse": "^7.19.1",
-        "@babel/types": "^7.19.0",
+        "@babel/traverse": "^7.19.3",
+        "@babel/types": "^7.19.3",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -73,18 +73,29 @@
           }
         },
         "@babel/compat-data": {
-          "version": "7.19.1",
-          "resolved": "https://repo.huaweicloud.com/repository/npm/@babel/compat-data/-/compat-data-7.19.1.tgz",
-          "integrity": "sha512-72a9ghR0gnESIa7jBN53U32FOVCEoztyIlKaNoU05zRhEecduGK9L9c3ww7Mp06JiR+0ls0GBPFJQwwtjn9ksg==",
+          "version": "7.19.3",
+          "resolved": "https://repo.huaweicloud.com/repository/npm/@babel/compat-data/-/compat-data-7.19.3.tgz",
+          "integrity": "sha512-prBHMK4JYYK+wDjJF1q99KK4JLL+egWS4nmNqdlMUgCExMZ+iZW0hGhyC3VEbsPjvaN0TBhW//VIFwBrk8sEiw==",
           "dev": true
         },
+        "@babel/generator": {
+          "version": "7.19.3",
+          "resolved": "https://repo.huaweicloud.com/repository/npm/@babel/generator/-/generator-7.19.3.tgz",
+          "integrity": "sha512-fqVZnmp1ncvZU757UzDheKZpfPgatqY59XtW2/j/18H7u76akb8xqvjw82f+i2UKd/ksYsSick/BCLQUUtJ/qQ==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.19.3",
+            "@jridgewell/gen-mapping": "^0.3.2",
+            "jsesc": "^2.5.1"
+          }
+        },
         "@babel/helper-compilation-targets": {
-          "version": "7.19.1",
-          "resolved": "https://repo.huaweicloud.com/repository/npm/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.1.tgz",
-          "integrity": "sha512-LlLkkqhCMyz2lkQPvJNdIYU7O5YjWRgC2R4omjCTpZd8u8KMQzZvX4qce+/BluN1rcQiV7BoGUpmQ0LeHerbhg==",
+          "version": "7.19.3",
+          "resolved": "https://repo.huaweicloud.com/repository/npm/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.3.tgz",
+          "integrity": "sha512-65ESqLGyGmLvgR0mst5AdW1FkNlj9rQsCKduzEoEPhBCDFGXvz2jW6bXFG6i0/MrV2s7hhXjjb2yAzcPuQlLwg==",
           "dev": true,
           "requires": {
-            "@babel/compat-data": "^7.19.1",
+            "@babel/compat-data": "^7.19.3",
             "@babel/helper-validator-option": "^7.18.6",
             "browserslist": "^4.21.3",
             "semver": "^6.3.0"
@@ -108,9 +119,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.19.1",
-          "resolved": "https://repo.huaweicloud.com/repository/npm/@babel/parser/-/parser-7.19.1.tgz",
-          "integrity": "sha512-h7RCSorm1DdTVGJf3P2Mhj3kdnkmF/EiysUkzS2TdgAYqyjFdMQJbVuXOBej2SBJaXan/lIVtT6KkGbyyq753A==",
+          "version": "7.19.3",
+          "resolved": "https://repo.huaweicloud.com/repository/npm/@babel/parser/-/parser-7.19.3.tgz",
+          "integrity": "sha512-pJ9xOlNWHiy9+FuFP09DEAFbAn4JskgRsVcc169w2xRBC3FRGuQEwjeIMMND9L2zc0iEhO/tGv4Zq+km+hxNpQ==",
           "dev": true
         },
         "@babel/template": {
@@ -125,33 +136,44 @@
           }
         },
         "@babel/traverse": {
-          "version": "7.19.1",
-          "resolved": "https://repo.huaweicloud.com/repository/npm/@babel/traverse/-/traverse-7.19.1.tgz",
-          "integrity": "sha512-0j/ZfZMxKukDaag2PtOPDbwuELqIar6lLskVPPJDjXMXjfLb1Obo/1yjxIGqqAJrmfaTIY3z2wFLAQ7qSkLsuA==",
+          "version": "7.19.3",
+          "resolved": "https://repo.huaweicloud.com/repository/npm/@babel/traverse/-/traverse-7.19.3.tgz",
+          "integrity": "sha512-qh5yf6149zhq2sgIXmwjnsvmnNQC2iw70UFjp4olxucKrWd/dvlUsBI88VSLUsnMNF7/vnOiA+nk1+yLoCqROQ==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.18.6",
-            "@babel/generator": "^7.19.0",
+            "@babel/generator": "^7.19.3",
             "@babel/helper-environment-visitor": "^7.18.9",
             "@babel/helper-function-name": "^7.19.0",
             "@babel/helper-hoist-variables": "^7.18.6",
             "@babel/helper-split-export-declaration": "^7.18.6",
-            "@babel/parser": "^7.19.1",
-            "@babel/types": "^7.19.0",
+            "@babel/parser": "^7.19.3",
+            "@babel/types": "^7.19.3",
             "debug": "^4.1.0",
             "globals": "^11.1.0"
           }
         },
         "@babel/types": {
-          "version": "7.19.0",
-          "resolved": "https://repo.huaweicloud.com/repository/npm/@babel/types/-/types-7.19.0.tgz",
-          "integrity": "sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==",
+          "version": "7.19.3",
+          "resolved": "https://repo.huaweicloud.com/repository/npm/@babel/types/-/types-7.19.3.tgz",
+          "integrity": "sha512-hGCaQzIY22DJlDh9CH7NOxgKkFjBk0Cw9xDO1Xmh2151ti7wiGfQ3LauXzL4HP1fmFlTX6XjpRETTpUcv7wQLw==",
           "dev": true,
           "requires": {
             "@babel/helper-string-parser": "^7.18.10",
-            "@babel/helper-validator-identifier": "^7.18.6",
+            "@babel/helper-validator-identifier": "^7.19.1",
             "to-fast-properties": "^2.0.0"
           }
+        },
+        "@jridgewell/gen-mapping": {
+          "version": "0.3.2",
+          "resolved": "https://repo.huaweicloud.com/repository/npm/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+          "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+          "dev": true,
+          "requires": {
+            "@jridgewell/set-array": "^1.0.1",
+            "@jridgewell/sourcemap-codec": "^1.4.10",
+            "@jridgewell/trace-mapping": "^0.3.9"
+          }
         }
       }
     },
@@ -5702,9 +5724,9 @@
       }
     },
     "core-js": {
-      "version": "3.25.2",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/core-js/-/core-js-3.25.2.tgz",
-      "integrity": "sha512-YB4IAT1bjEfxTJ1XYy11hJAKskO+qmhuDBM8/guIfMz4JvdsAQAqvyb97zXX7JgSrfPLG5mRGFWJwJD39ruq2A=="
+      "version": "3.25.3",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/core-js/-/core-js-3.25.3.tgz",
+      "integrity": "sha512-y1hvKXmPHvm5B7w4ln1S4uc9eV/O5+iFExSRUimnvIph11uaizFR8LFMdONN8hG3P2pipUfX4Y/fR8rAEtcHcQ=="
     },
     "core-js-compat": {
       "version": "3.25.0",

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
-    "core-js": "^3.25.2",
+    "core-js": "^3.25.3",
     "element-ui": "^2.15.10",
     "js-cookie": "^3.0.1",
     "md5": "^2.3.0",
@@ -22,7 +22,7 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.1",
+    "@babel/core": "^7.19.3",
     "@babel/eslint-parser": "^7.19.1",
     "@rushstack/eslint-patch": "^1.2.0",
     "@vue/cli-plugin-babel": "~5.0.8",

src/components/quota/SetOrgQuotaRemind.vue

@@ -73,7 +73,7 @@ export default {
 
 <style lang="scss" scoped>
 .el-dialog {
-  ::v-deep &__body {
+  :deep &__body {
     padding-top: 16px;
     padding-bottom: 16px;
   }

src/views/account_manager/index.vue

@@ -26,12 +26,12 @@
       :page-size="page_capacity"
       :total="total_count"
       :current-page="cur_page"
-      @prev-click="changePage"
-      @next-click="changePage"
-      @current-change="changePage"
-      @size-change="changePageSize"
+      @prev-click="changePage($event, queryAccountList)"
+      @next-click="changePage($event, queryAccountList)"
+      @current-change="changePage($event, queryAccountList)"
+      @size-change="changePageSize($event, queryAccountList)"
     >
-      <el-table :data="user_list">
+      <el-table :data="list">
         <el-table-column prop="user_name" label="用户名" width="180" />
         <el-table-column prop="real_name" label="姓名" width="180" />
         <el-table-column prop="user_type_name" label="用户类型" width="120" />
@@ -43,70 +43,58 @@
 </template>
 
 <script>
+export default {
+  name: 'AccountManager'
+};
+</script>
+
+<script setup>
+import { ref } from 'vue';
 import { pageQueryUserList } from '@/api/list';
+import { useList } from '@/utils/list';
+
 import CommonTable from '@/components/common/CommonTable.vue';
 
-export default {
-  name: 'AccountManager',
-  components: { CommonTable },
-  data() {
-    return {
-      // 搜索选项
-      org_id: '',
-      user_type: '',
-      userTypeList: [
-        {
-          value: 'TEACHER',
-          label: '教师'
-        },
-        {
-          value: 'STUDENT',
-          label: '学员'
-        },
-        {
-          value: 'ADMIN',
-          label: '系统管理员'
-        }
-      ],
-      user_name: '',
-      real_name: '',
-      user_list: [],
-      page_capacity: 10,
-      total_count: 0,
-      cur_page: 1
-    };
+// 搜索条件
+let org_id = ref('');
+let user_type = ref('');
+let user_name = ref('');
+let real_name = ref('');
+const userTypeList = [
+  {
+    value: 'TEACHER',
+    label: '教师'
   },
-  created() {
-    this.queryAccountList();
+  {
+    value: 'STUDENT',
+    label: '学员'
   },
-  methods: {
-    changePage(newPage) {
-      this.cur_page = newPage;
-      this.queryAccountList();
-    },
-    changePageSize(pageSize) {
-      this.page_capacity = pageSize;
-      this.queryAccountList();
-    },
-    queryAccountList() {
-      pageQueryUserList({
-        user_name: this.user_name,
-        real_name: this.real_name,
-        page_capacity: this.page_capacity,
-        cur_page: this.cur_page,
-        org_id: this.org_id,
-        user_type: this.user_type
-      }).then(({ cur_page, user_list, total_count }) => {
-        this.cur_page = cur_page;
-        this.user_list = user_list;
-        this.total_count = total_count;
-      });
-    }
+  {
+    value: 'ADMIN',
+    label: '系统管理员'
   }
-};
+];
+
+const { page_capacity, cur_page, total_count, list, changePage, changePageSize } = useList();
+
+function queryAccountList() {
+  pageQueryUserList({
+    user_name: user_name.value,
+    real_name: real_name.value,
+    page_capacity: page_capacity.value,
+    cur_page: cur_page.value,
+    org_id: org_id.value,
+    user_type: user_type.value
+  }).then(({ cur_page: page, user_list, total_count: total }) => {
+    cur_page.value = page;
+    list.value = user_list;
+    total_count.value = total;
+  });
+}
+queryAccountList();
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import '~@/styles/mixin';
 
 .account-manager {

src/views/login/index.vue

@@ -88,8 +88,16 @@ import md5 from 'md5';
 
 const router = useRouter();
 let isRemember = ref(true);
-let loading = ref(false);
 let isAgree = ref(true);
+
+let title = ref('');
+GetLogo().then(res => {
+  document.title = res.title;
+  title.value = res.title;
+  setConfig(res);
+});
+
+let image_content_base64 = ref('');
 let loginForm = ref({
   verification_code_image_text: '',
   user_name: 'admin',
@@ -102,14 +110,6 @@ let loginRules = ref({
   user_name: [{ required: true, trigger: 'blur', message: '用户名不能为空！' }],
   verification_code_image_text: [{ required: true, trigger: 'blur', message: '验证码不能为空' }]
 });
-let image_content_base64 = ref('');
-let title = ref('');
-
-GetLogo().then(res => {
-  document.title = res.title;
-  title.value = res.title;
-  setConfig(res);
-});
 function updateVerificationCode() {
   GetVerificationCodeImage().then(({ image_id, image_content_base64: img_content }) => {
     loginForm.value.verification_code_image_id = image_id;
@@ -119,6 +119,7 @@ function updateVerificationCode() {
 updateVerificationCode();
 
 let login = ref();
+let loading = ref(false);
 function handleLogin() {
   login.value.validate(valid => {
     if (valid) {

src/views/org_manager/index.vue

@@ -87,14 +87,8 @@ import ShowOrg from './ShowOrg.vue';
 import UpdateOrg from './UpdateOrg.vue';
 import CommonTable from '@/components/common/CommonTable.vue';
 
-let reset = ref();
-let show_org = ref();
-let update_org = ref();
-
+// 搜索条件
 let search = ref(''); // 名称
-let curUserId = ref(''); // 当前用户id
-let curOrgId = ref(''); // 当前机构id
-let popedom_list = ref(''); // 权限列表
 
 const { page_capacity, cur_page, total_count, list, changePage, changePageSize } = useList();
 
@@ -111,16 +105,20 @@ function queryOrgList() {
 }
 queryOrgList();
 
+let show_org = ref();
 function showOrg(id) {
   curOrgId.value = id;
   show_org.value.show();
 }
 
+let update_org = ref();
+let curOrgId = ref(''); // 当前机构id
 function updateOrg(id) {
-  curOrgId = id;
+  curOrgId.value = id;
   update_org.value.show();
 }
 
+let popedom_list = ref(''); // 权限列表
 // 得到机构管理员可分配的权限列表
 function getDistributablePopedomList_OrgManager(org_id) {
   GetDistributablePopedomList_OrgManager({ org_id }).then(({ popedom_list: list }) => {
@@ -144,6 +142,8 @@ function setDistributablePopedom_OrgManager(org_id) {
 }
 
 // 重置管理员机构密码
+let reset = ref();
+let curUserId = ref(''); // 当前用户id
 function resetOrgAdminPassword(id) {
   curUserId.value = id;
   reset.value.show();

src/views/quota/LiveDetail.vue

@@ -138,7 +138,7 @@ export default {
       color: #000;
     }
 
-    ::v-deep .el-table th.el-table__cell {
+    :deep .el-table th.el-table__cell {
       color: #000;
     }
   }

src/views/quota/SetQuota.vue

@@ -228,7 +228,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-dialog__body {
+:deep .el-dialog__body {
   padding-top: 0;
 }
 
@@ -251,11 +251,11 @@ export default {
   > div {
     padding-top: 8px;
 
-    ::v-deep .textarea textarea {
+    :deep .textarea textarea {
       width: 280px;
     }
 
-    ::v-deep .el-input-group__prepend {
+    :deep .el-input-group__prepend {
       background-color: #fff;
     }
 
@@ -297,7 +297,7 @@ export default {
   }
 
   .el-table {
-    ::v-deep th.el-table__cell {
+    :deep th.el-table__cell {
       padding: 5px 0;
       color: #333;
       background-color: #f5f5f5;
@@ -315,7 +315,7 @@ export default {
       line-height: 28px;
     }
 
-    ::v-deep .el-pager {
+    :deep .el-pager {
       li {
         min-width: 24px;
         height: 24px;

src/views/quota/UsageRecord.vue

@@ -152,7 +152,7 @@ export default {
       color: #000;
     }
 
-    ::v-deep .el-table th.el-table__cell {
+    :deep .el-table th.el-table__cell {
       color: #000;
     }
   }

src/views/quota/index.vue

@@ -1,7 +1,16 @@
 <template>
   <div class="quota">
-    <div class="quota-list">
-      <el-table :data="data_list">
+    <CommonTable
+      :page-size="page_capacity"
+      :min-height="554"
+      :total="total_count"
+      :current-page="cur_page"
+      @prev-click="changePage($event, pageQueryOrgQuotaList)"
+      @next-click="changePage($event, pageQueryOrgQuotaList)"
+      @current-change="changePage($event, pageQueryOrgQuotaList)"
+      @size-change="changePageSize($event, pageQueryOrgQuotaList)"
+    >
+      <el-table :data="list">
         <el-table-column label="机构" width="176">
           <template slot-scope="{ row }">
             <router-link :to="`/quota/usageRecord/${row.org_id}/${row.org_name}`">
@@ -38,101 +47,77 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
+    </CommonTable>
 
-    <el-pagination
-      background
-      :page-sizes="[10, 20, 30, 40, 50]"
-      :page-size="page_capacity"
-      layout="prev, pager, next, total, sizes, jumper"
-      :total="total_count"
-      :current-page="cur_page"
-      @prev-click="changePage"
-      @next-click="changePage"
-      @current-change="changePage"
-      @size-change="changePageSize"
-    />
-
-    <set-quota :org-id="curOrgId" :visible="visible" @close="closeSetQuota" />
-    <set-remind :org-id="curOrgId" :visible="visible_remind" @close="closeQuotaRemind" />
+    <SetQuota :org-id="curOrgId" :visible="visible" @close="closeSetQuota" />
+    <SetRemind :org-id="curOrgId" :visible="visible_remind" @close="closeQuotaRemind" />
   </div>
 </template>
 
 <script>
+export default {
+  name: 'QuotaList'
+};
+</script>
+
+<script setup>
+import { ref } from 'vue';
 import { PageQueryOrgQuotaList } from '@/api/list';
 import { EnableOrgQuota } from '@/api/org';
+import { useList } from '@/utils/list';
+import { Message } from 'element-ui';
+
+import CommonTable from '@/components/common/CommonTable.vue';
 import SetQuota from './SetQuota.vue';
 import SetRemind from '@/components/quota/SetOrgQuotaRemind.vue';
 
-export default {
-  name: 'QuotaList',
-  components: { SetQuota, SetRemind },
-  data() {
-    return {
-      data_list: [],
-      page_capacity: 10,
-      total_count: 0,
-      cur_page: 1,
-      visible: false,
-      visible_remind: false,
-      curOrgId: ''
-    };
-  },
-  created() {
-    this.pageQueryOrgQuotaList();
-  },
-  methods: {
-    pageQueryOrgQuotaList() {
-      PageQueryOrgQuotaList({
-        page_capacity: this.page_capacity,
-        cur_page: this.cur_page
-      }).then(({ data_list, total_count, cur_page }) => {
-        this.data_list = data_list;
-        this.total_count = total_count;
-        this.cur_page = cur_page;
-      });
-    },
-    changePage(newPage) {
-      this.cur_page = newPage;
-      this.pageQueryOrgQuotaList();
-    },
-    changePageSize(pageSize) {
-      this.page_capacity = pageSize;
-      this.pageQueryOrgQuotaList();
-    },
-
-    setQuota(org_id) {
-      this.visible = true;
-      this.curOrgId = org_id;
-    },
-
-    setStatus(org_id, is_enabled) {
-      EnableOrgQuota({
-        org_id,
-        is_enabled
-      }).then(() => {
-        this.$message.success(`${is_enabled ? '启用' : '停用'}机构配额成功`);
-        this.pageQueryOrgQuotaList();
-      });
-    },
-
-    closeSetQuota() {
-      this.visible = false;
-      this.curOrgId = '';
-    },
-
-    // 余额提醒
-    quotaRemind(org_id) {
-      this.visible_remind = true;
-      this.curOrgId = org_id;
-    },
-
-    closeQuotaRemind() {
-      this.visible_remind = false;
-      this.curOrgId = '';
-    }
-  }
-};
+const { page_capacity, cur_page, total_count, list, changePage, changePageSize } = useList();
+
+function pageQueryOrgQuotaList() {
+  PageQueryOrgQuotaList({
+    page_capacity: page_capacity.value,
+    cur_page: cur_page.value
+  }).then(({ data_list, total_count: total, cur_page: page }) => {
+    list.value = data_list;
+    total_count.value = total;
+    cur_page.value = page;
+  });
+}
+pageQueryOrgQuotaList();
+
+let visible = ref(false);
+let curOrgId = ref('');
+function setQuota(org_id) {
+  visible.value = true;
+  curOrgId.value = org_id;
+}
+
+function closeSetQuota() {
+  visible.value = false;
+  curOrgId.value = '';
+}
+
+let visible_remind = ref(false);
+// 余额提醒
+function quotaRemind(org_id) {
+  visible_remind.value = true;
+  curOrgId.value = org_id;
+}
+
+function closeQuotaRemind() {
+  visible_remind.value = false;
+  curOrgId.value = '';
+}
+
+function setStatus(org_id, is_enabled) {
+  EnableOrgQuota({
+    org_id,
+    is_enabled
+  }).then(() => {
+    Message.success(`${is_enabled ? '启用' : '停用'}机构配额成功`);
+    pageQueryOrgQuotaList();
+  });
+}
 </script>
 
 <style lang="scss" scoped>
@@ -140,24 +125,17 @@ export default {
 
 .quota {
   @include container;
-  @include pagination;
   @include dialog;
 
   padding: 24px 0 46px;
 
-  &-list {
-    @include list;
-
-    padding: 0 32px;
-
-    .el-table {
-      .set-quota {
-        margin-right: 12px;
-      }
+  .el-table {
+    .set-quota {
+      margin-right: 12px;
+    }
 
-      ::v-deep th.el-table__cell {
-        color: #000;
-      }
+    :deep th.el-table__cell {
+      color: #000;
     }
   }
 }

src/views/student_manager/index.vue

@@ -22,7 +22,7 @@
           <el-select v-model="is_valid" class="account-search">
             <el-option v-for="item in validList" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
-          <span class="search-name">审核</span>
+          <span class="search-name">状态</span>
           <el-select v-model="is_audited" class="account-search">
             <el-option v-for="item in auditList" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
@@ -56,26 +56,26 @@
         <el-table-column prop="org_name" label="机构名称" width="180" />
         <el-table-column prop="user_email" label="邮箱" width="180" />
         <el-table-column prop="join_org_time" label="加入机构时间" width="160" />
-        <el-table-column prop="is_audited" label="已审核">
+        <el-table-column prop="is_audited" label="状态">
           <template slot-scope="{ row }">
-            <div :style="{ 'text-align': 'center', width: '40px' }">{{ row.is_audited === 'true' ? '√' : '' }}</div>
+            <div :style="{ color: '#34CC83' }">{{ row.is_audited === 'true' ? '√ 已开通' : '' }}</div>
           </template>
         </el-table-column>
-        <el-table-column prop="is_valid" label="有效">
+        <el-table-column prop="is_valid" label="有效" align="center">
           <template slot-scope="{ row }">
-            <div :style="{ 'text-align': 'center', width: '40px' }">{{ row.is_valid === 'true' ? '√' : '' }}</div>
+            <div>{{ row.is_valid === 'true' ? '√' : '' }}</div>
           </template>
         </el-table-column>
-        <el-table-column fixed="right" width="160">
+        <el-table-column fixed="right" width="80">
           <template slot-scope="{ row }">
             <el-row type="flex" justify="space-between">
               <el-col>
                 <el-link
                   :underline="false"
-                  :type="row.is_audited === 'true' ? 'danger' : 'success'"
+                  :style="{ color: row.is_audited === 'false' ? '#0085FF' : '' }"
                   @click="auditOrgStudentUser(row.id, row.is_audited)"
                 >
-                  审核{{ row.is_audited === 'true' ? '拒绝' : '同意' }}
+                  {{ row.is_audited === 'true' ? '停用' : '开通' }}
                 </el-link>
               </el-col>
             </el-row>
@@ -99,6 +99,12 @@
   </div>
 </template>
 
+<script>
+export default {
+  name: 'StudentManager'
+};
+</script>
+
 <script setup>
 import { ref } from 'vue';
 import { PageQueryOrgStudentUserList } from '@/api/list';
@@ -136,14 +142,15 @@ const auditList = [
   },
   {
     value: 'true',
-    label: '已审核'
+    label: '停用'
   },
   {
     value: 'false',
-    label: '未审核'
+    label: '开通'
   }
 ];
 
+// 搜索条件
 let user_name = ref('');
 let user_real_name = ref('');
 let is_valid = ref('');
@@ -168,6 +175,11 @@ function pageQueryOrgStudentUserList() {
 }
 pageQueryOrgStudentUserList();
 
+/**
+ * 审核机构学员用户
+ * @param {String} id
+ * @param {String} is_audited
+ */
 function auditOrgStudentUser(id, is_audited) {
   AuditOrgStudentUser({
     id_list: [id],
@@ -177,10 +189,9 @@ function auditOrgStudentUser(id, is_audited) {
   });
 }
 
+// 批量导入
 let visible = ref(false);
 let visible_executive = ref(false);
-
-// 批量导入
 let loading = ref(false);
 let percentage = ref(0);
 let timer = null;
@@ -280,6 +291,14 @@ function batchRegister(file_id) {
     border-color: #0085ff;
   }
 
+  .el-table {
+    .el-link {
+      padding: 2px 8px;
+      border: 1px solid #ebebeb;
+      border-radius: 4px;
+    }
+  }
+
   .loading {
     position: fixed;
     top: 0;

src/views/teacher_manager/index.vue

@@ -18,11 +18,11 @@
             type="text"
             @keyup.enter.native="queryOrgTeacherUserList"
           />
-          <span class="search-name">审核状态</span>
+          <span class="search-name">状态</span>
           <el-select v-model="is_audited" :style="{ 'margin-right': '12px' }">
             <el-option v-for="{ value, label } in auditedList" :key="value" :value="value" :label="label" />
           </el-select>
-          <date-search ref="dateSearch" name="加入机构时间" />
+          <DateSearch ref="dateSearch" name="加入机构时间" />
         </el-col>
         <el-col :span="2">
           <el-button class="search-button" icon="el-icon-search" @click="queryOrgTeacherUserList" />
@@ -36,20 +36,22 @@
       :page-size="page_capacity"
       :total="total_count"
       :current-page="cur_page"
-      @prev-click="changePage"
-      @next-click="changePage"
-      @current-change="changePage"
-      @size-change="changePageSize"
+      @prev-click="changePage($event, queryOrgTeacherUserList)"
+      @next-click="changePage($event, queryOrgTeacherUserList)"
+      @current-change="changePage($event, queryOrgTeacherUserList)"
+      @size-change="changePageSize($event, queryOrgTeacherUserList)"
     >
-      <el-table :data="org_teacher_user_list">
+      <el-table :data="list">
         <el-table-column prop="user_name" label="用户名" width="180" />
         <el-table-column prop="user_real_name" label="姓名" width="180" />
         <el-table-column prop="org_name" label="服务机构" width="180" />
         <el-table-column prop="user_email" label="邮箱" width="180" />
         <el-table-column prop="join_org_time" label="加入机构时间" width="180" />
-        <el-table-column prop="is_audited" label="已审核">
+        <el-table-column prop="is_audited" label="状态">
           <template slot-scope="{ row }">
-            <div :style="{ 'text-align': 'center', width: '40px' }">{{ row.is_audited === 'true' ? '√' : '' }}</div>
+            <span :style="{ color: '#34CC83' }">
+              {{ row.is_audited === 'true' ? '√ 已开通' : '' }}
+            </span>
           </template>
         </el-table-column>
         <el-table-column fixed="right" width="180">
@@ -58,23 +60,35 @@
               <el-col>
                 <el-link
                   :underline="false"
-                  :type="row.is_audited === 'true' ? 'danger' : 'success'"
+                  :style="{ color: row.is_audited === 'false' ? '#0085FF' : '' }"
                   @click="auditOrgTeacher(row)"
                 >
-                  {{ row.is_audited === 'true' ? '拒绝' : '接受' }}
+                  {{ row.is_audited === 'true' ? '停用' : '开通' }}
                 </el-link>
               </el-col>
               <el-col>
-                <el-popover trigger="click" width="200" @show="getPopedomList(row.id)">
+                <el-popover
+                  trigger="click"
+                  width="200"
+                  :disabled="row.is_audited === 'false'"
+                  @show="getPopedomList(row.id)"
+                >
                   <div class="popedom">
                     <span class="popedom-manager">权限管理</span>
-                    <div v-for="item in popedom_list" :key="item.popedom_code" class="popedom-list">
+                    <div v-for="item in popedomList" :key="item.popedom_code" class="popedom-list">
                       <span>{{ item.popedom_name }}</span>
                       <el-switch v-model="item.is_selected" active-color="#34CC83" inactive-color="#C4C4C4" />
                     </div>
                     <el-button type="primary" @click="setPopedom(row.id)">保存</el-button>
                   </div>
-                  <el-link slot="reference" :underline="false">权限</el-link>
+                  <el-link
+                    slot="reference"
+                    :style="{ color: row.is_audited === 'false' ? '#ababab' : '' }"
+                    :class="{ disabled: row.is_audited === 'false' }"
+                    :underline="false"
+                  >
+                    权限
+                  </el-link>
                 </el-popover>
               </el-col>
             </el-row>
@@ -86,116 +100,105 @@
 </template>
 
 <script>
+export default {
+  name: 'TeacherManager'
+};
+</script>
+
+<script setup>
+import { ref } from 'vue';
 import { pageQueryOrgTeacherUserList } from '@/api/list';
 import { auditOrgTeacherUser, getPopedomList_OrgTeacherUse, setPopedom_OrgTeacherUser } from '@/api/teacher';
+import { useList } from '@/utils/list';
+import { Message } from 'element-ui';
+
 import DateSearch from '@/components/common/DateSearch.vue';
 import CommonTable from '@/components/common/CommonTable.vue';
 
-export default {
-  name: 'TeacherManager',
-  components: {
-    DateSearch,
-    CommonTable
+const auditedList = [
+  {
+    value: '',
+    label: '所有'
   },
-  data() {
-    return {
-      user_name: '',
-      user_real_name: '',
-      org_teacher_user_list: [],
-      page_capacity: 10,
-      total_count: 0,
-      cur_page: 1,
-      popedom_list: [],
-      auditedList: [
-        {
-          value: '',
-          label: '所有'
-        },
-        {
-          value: true,
-          label: '已审核'
-        },
-        {
-          value: false,
-          label: '未审核'
-        }
-      ],
-      is_audited: ''
-    };
+  {
+    value: true,
+    label: '开通'
   },
-  created() {
-    this.queryOrgTeacherUserList();
-  },
-  methods: {
-    changePage(newPage) {
-      this.cur_page = newPage;
-      this.queryOrgTeacherUserList();
-    },
-
-    changePageSize(pageSize) {
-      this.page_capacity = pageSize;
-      this.queryOrgTeacherUserList();
-    },
-
-    queryOrgTeacherUserList() {
-      pageQueryOrgTeacherUserList({
-        user_name: this.user_name,
-        user_real_name: this.user_real_name,
-        page_capacity: this.page_capacity,
-        cur_page: this.cur_page,
-        is_audited: this.is_audited,
-        join_org_time_min: this.$refs?.dateSearch?.join_org_time_min ?? '',
-        join_org_time_max: this.$refs?.dateSearch?.join_org_time_max ?? ''
-      }).then(({ cur_page, org_teacher_user_list, total_count }) => {
-        this.cur_page = cur_page;
-        this.org_teacher_user_list = org_teacher_user_list;
-        this.total_count = total_count;
-      });
-    },
-    // 审核教师
-    auditOrgTeacher(row) {
-      auditOrgTeacherUser({
-        id_list: [row.id],
-        is_audited: row.is_audited !== 'true'
-      }).then(() => {
-        this.queryOrgTeacherUserList();
-      });
-    },
-    // 得到权限列表
-    getPopedomList(user_org_id) {
-      getPopedomList_OrgTeacherUse({ user_org_id }).then(({ popedom_list }) => {
-        popedom_list.forEach((el, i, arr) => {
-          el.is_selected = el.is_selected === 'true';
-          arr[i] = el;
-        });
-        this.popedom_list = popedom_list;
-      });
-    },
-    // 设置教师权限
-    setPopedom(user_org_id) {
-      let popedom_code_list = this.popedom_list
-        .map(({ popedom_code, is_selected }) => {
-          if (is_selected) return popedom_code;
-        })
-        .filter(item => item !== undefined);
-
-      setPopedom_OrgTeacherUser({
-        user_org_id,
-        popedom_code_list
-      }).then(() => {
-        this.$message.success('设置教师权限成功');
-      });
-    }
+  {
+    value: false,
+    label: '停用'
   }
-};
+];
+
+// 搜索条件
+let user_name = ref('');
+let user_real_name = ref('');
+let is_audited = ref('');
+let dateSearch = ref();
+
+const { page_capacity, cur_page, total_count, list, changePage, changePageSize } = useList();
+
+function queryOrgTeacherUserList() {
+  pageQueryOrgTeacherUserList({
+    user_name: user_name.value,
+    user_real_name: user_real_name.value,
+    page_capacity: page_capacity.value,
+    cur_page: cur_page.value,
+    is_audited: is_audited.value,
+    join_org_time_min: dateSearch.value?.join_org_time_min ?? '',
+    join_org_time_max: dateSearch.value?.join_org_time_max ?? ''
+  }).then(({ cur_page: page, org_teacher_user_list, total_count: total }) => {
+    cur_page.value = page;
+    list.value = org_teacher_user_list;
+    total_count.value = total;
+  });
+}
+queryOrgTeacherUserList();
+
+// 审核教师
+function auditOrgTeacher(row) {
+  auditOrgTeacherUser({
+    id_list: [row.id],
+    is_audited: row.is_audited !== 'true'
+  }).then(() => {
+    queryOrgTeacherUserList();
+  });
+}
+
+let popedomList = ref([]);
+// 得到权限列表
+function getPopedomList(user_org_id) {
+  getPopedomList_OrgTeacherUse({ user_org_id }).then(({ popedom_list }) => {
+    popedom_list.forEach((el, i, arr) => {
+      el.is_selected = el.is_selected === 'true';
+      arr[i] = el;
+    });
+    popedomList.value = popedom_list;
+  });
+}
+
+// 设置教师权限
+function setPopedom(user_org_id) {
+  let popedom_code_list = popedomList.value
+    .map(({ popedom_code, is_selected }) => {
+      if (is_selected) return popedom_code;
+    })
+    .filter(item => item !== undefined);
+
+  setPopedom_OrgTeacherUser({
+    user_org_id,
+    popedom_code_list
+  }).then(() => {
+    Message.success('设置教师权限成功');
+  });
+}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import '~@/styles/mixin';
 
 .teacher-manager {
   @include container;
-  @include pagination;
 
   padding: 24px 0 46px;
 
@@ -217,6 +220,18 @@ export default {
       float: right;
     }
   }
+
+  .el-table {
+    .el-link {
+      padding: 2px 8px;
+      border: 1px solid #ebebeb;
+      border-radius: 4px;
+
+      &.disabled {
+        background-color: #f4f4f4;
+      }
+    }
+  }
 }
 
 // 权限管理

src/views/upload/uploadList.vue

@@ -1,4 +1,4 @@
-<!--  -->
+<!-- 文件静态资源 -->
 <template>
   <div class="book-vocab">
     <div class="book-vocab-content">
@@ -8,10 +8,10 @@
       <div class="book-vocab-content-search">
         <el-form :inline="true" :model="searchForm" size="mini">
           <el-form-item label="名称">
-            <el-input v-model="searchForm.name" placeholder="请输入关键词"></el-input>
+            <el-input v-model="searchForm.name" placeholder="请输入关键词" />
           </el-form-item>
           <el-form-item label="备注">
-            <el-input v-model="searchForm.memo" placeholder="请输入关键词"></el-input>
+            <el-input v-model="searchForm.memo" placeholder="请输入关键词" />
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSearch">查询</el-button>
@@ -20,9 +20,9 @@
       </div>
       <div class="book-vocab-content-table">
         <el-table :data="book_List">
-          <el-table-column label="键值" prop="resource_key" width="200"></el-table-column>
-          <el-table-column label="名称" prop="name"></el-table-column>
-          <el-table-column label="备注" prop="memo"></el-table-column>
+          <el-table-column label="键值" prop="resource_key" width="200" />
+          <el-table-column label="名称" prop="name" />
+          <el-table-column label="备注" prop="memo" />
           <el-table-column fixed="right" label="操作" width="100">
             <template slot-scope="{ row }">
               <el-button size="small" type="text" @click="handleView(row)">查看</el-button>
@@ -45,7 +45,7 @@
       </div>
     </div>
     <el-dialog :before-close="handleClose" :visible.sync="dialogFlag">
-      <upload-detail :resource-key="resource_key" :upload-type="uploadType" @closeDialog="closeDialog"></upload-detail>
+      <upload-detail :resource-key="resource_key" :upload-type="uploadType" @closeDialog="closeDialog" />
     </el-dialog>
   </div>
 </template>

src/views/vocabulary/index.vue

@@ -1,4 +1,4 @@
-<!--  -->
+<!-- 多语言词汇 -->
 <template>
   <div class="book-vocab">
     <div class="book-vocab-content">
@@ -8,7 +8,7 @@
       <div class="book-vocab-content-search">
         <el-form :inline="true" :model="searchForm" size="mini">
           <el-form-item label="中文词汇">
-            <el-input v-model="searchForm.word" placeholder="请输入关键词"></el-input>
+            <el-input v-model="searchForm.word" placeholder="请输入关键词" />
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSearch">查询</el-button>