1. 增加教材授权

2. 升级依赖

.vscode/base.code-snippets

@@ -1,21 +0,0 @@
-{
-  "api request": {
-    "scope": "javascript",
-    "prefix": "api",
-    "body": [
-      "/**",
-      " * ",
-      " * @param {$4} ${5|data,params|}",
-      " */",
-      "export function ${0:n}(data) {",
-      "  return request({",
-      "    method: 'post',",
-      "    url: process.env.${2|VUE_APP_FileServer,VUE_APP_LearnWebSI,VUE_APP_BookWebSI|},",
-      "    params: getRequestParams('$3'),",
-      "    data",
-      "  });",
-      "}"
-    ],
-    "description": "api 请求基本格式"
-  }
-}

.vscode/launch.json

@@ -5,16 +5,15 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "type": "pwa-chrome",
+      "type": "chrome",
       "request": "launch",
       "name": "vuejs: chrome",
-      "url": "http://localhost:7878",
+      "url": "http://localhost:7979",
       "webRoot": "${workspaceFolder}/src",
-      "breakOnLoad": true,
       "sourceMapPathOverrides": {
-        // 对应浏览器sources下 webpack:/// 的 .目录 和 src目录
-        "webpack:///src/*": "${webRoot}/*",
-        "webpack:///./src/*.js": "${webRoot}/*.js"
+        // 对应浏览器 sources下 webpack:/// 的 .目录 和 src目录
+        "webpack://gcls_sys_manager/src/*": "${webRoot}/*",
+        "webpack://gcls_sys_manager/./src/*.js": "${webRoot}/*.js"
       }
     }
   ]

package-lock.json

@@ -6382,9 +6382,9 @@
       "dev": true
     },
     "element-ui": {
-      "version": "2.15.8",
-      "resolved": "https://repo.huaweicloud.com/repository/npm/element-ui/-/element-ui-2.15.8.tgz",
-      "integrity": "sha512-N54zxosRFqpYax3APY3GeRmtOZwIls6Z756WM0kdPZ5Q92PIeKHnZgF1StlamIg9bLxP1k+qdhTZvIeQlim09A==",
+      "version": "2.15.10",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/element-ui/-/element-ui-2.15.10.tgz",
+      "integrity": "sha512-jmD++mU2wKXbisvx4fxOl2mHaU+HWHTAq/3Wf8x9Bwyu4GdDZPLABb+CGi3DWN6fPqdgRcd74aX39DO+YHObLw==",
       "requires": {
         "async-validator": "~1.8.1",
         "babel-helper-vue-jsx-merge-props": "^2.0.0",

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "axios": "^0.27.2",
     "core-js": "^3.25.1",
-    "element-ui": "2.15.8",
+    "element-ui": "^2.15.10",
     "js-cookie": "^3.0.1",
     "md5": "^2.3.0",
     "normalize.css": "^8.0.1",
@@ -22,7 +22,7 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.13",
+    "@babel/core": "^7.19.0",
     "@babel/eslint-parser": "^7.18.9",
     "@rushstack/eslint-patch": "^1.1.4",
     "@vue/cli-plugin-babel": "~5.0.8",

src/api/org.js

@@ -158,3 +158,29 @@ export function GetOrgQuotaRemind(data) {
     data
   });
 }
+
+/**
+ * 分页查询教材列表
+ * @param {Object} data
+ */
+export function PageQueryOrgBookFreeLicenseList(data) {
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_BookWebSI,
+    params: getRequestParams('page_query-PageQueryOrgBookFreeLicenseList'),
+    data
+  });
+}
+
+/**
+ * 设置教材针对机构免费授权
+ * @param {Object} data
+ */
+export function SetOrgFreeLicenseForBook(data) {
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_BookWebSI,
+    params: getRequestParams('book-book_manager-SetOrgFreeLicenseForBook'),
+    data
+  });
+}

src/components/common/CommonTable.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="common-table">
     <div class="common-table-list" :style="{ 'min-height': `${minHeight}px` }">
-      <div class="common-table-list-title">
+      <div v-if="name.length > 0" class="common-table-list-title">
         <div>{{ name }}</div>
         <slot name="button"></slot>
       </div>
@@ -21,20 +21,21 @@
 
 <script>
 export default {
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    minHeight: {
-      type: Number,
-      default: 594
-    }
+  name: 'CommonTable'
+};
+</script>
+
+<script setup>
+defineProps({
+  name: {
+    type: String,
+    default: ''
   },
-  data() {
-    return {};
+  minHeight: {
+    type: Number,
+    default: 594
   }
-};
+});
 </script>
 
 <style lang="scss" scoped>

src/components/common/SelectDate.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-dialog :visible="visible" width="400px" title="授权到期日" :before-close="close">
+    <div>
+      <span>到期日期：</span
+      ><el-date-picker
+        v-model="date"
+        size="small"
+        format="yyyy/MM/dd"
+        value-format="yyyy-MM-dd"
+        type="date"
+        placeholder="选择日期"
+      />
+    </div>
+    <div slot="footer">
+      <el-button size="small" type="primary" @click="confirm">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'SelectDate'
+};
+</script>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { Message } from 'element-ui';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const emits = defineEmits(['close', 'selectDate']);
+
+watch(
+  () => props.visible,
+  newVal => {
+    if (!newVal) date.value = '';
+  }
+);
+
+let date = ref('');
+function confirm() {
+  if (date.value.length <= 0) {
+    return Message.warning('请选择日期');
+  }
+  emits('selectDate', date.value);
+}
+
+function close() {
+  emits('close');
+}
+</script>
+
+<style lang="scss" scoped>
+.el-dialog {
+  :deep &__body {
+    padding-bottom: 5px;
+  }
+
+  .el-button.el-button--primary {
+    background-color: #597ef7;
+    border-color: #597ef7;
+  }
+}
+</style>

src/router/index.js

@@ -74,6 +74,14 @@ const routes = [
         beforeEnter: (to, form, next) => {
           beforeRouterPopedom(1000001, next);
         }
+      },
+      {
+        path: '/free_license/:org_id',
+        meta: { title: '教材授权' },
+        component: () => import('@/views/org_manager/FreeLicense.vue'),
+        beforeEnter: (to, form, next) => {
+          beforeRouterPopedom(1000001, next);
+        }
       }
     ]
   },

src/utils/list.js

@@ -0,0 +1,30 @@
+import { ref } from 'vue';
+
+/**
+ * 列表公用数据和方法
+ */
+export function useList() {
+  let page_capacity = ref(10); // 每页容量
+  let cur_page = ref(1); // 当前页
+  let total_count = ref(0); // 总记录数
+  let list = ref([]); // 列表
+
+  function changePage(newPage, fn) {
+    cur_page.value = newPage;
+    fn();
+  }
+
+  function changePageSize(pageSize, fn) {
+    page_capacity.value = pageSize;
+    fn();
+  }
+
+  return {
+    page_capacity,
+    cur_page,
+    total_count,
+    list,
+    changePage,
+    changePageSize
+  };
+}

src/views/org_manager/FreeLicense.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="free-license">
+    <CommonTable
+      :page-size="page_capacity"
+      :total="total_count"
+      :current-page="cur_page"
+      @prev-click="changePage($event, pageQuery)"
+      @next-click="changePage($event, pageQuery)"
+      @current-change="changePage($event, pageQuery)"
+      @size-change="changePageSize($event, pageQuery)"
+    >
+      <div class="free-license-container">
+        <el-table :data="list">
+          <el-table-column prop="book_name" label="教材" />
+          <el-table-column label="状态" width="144" align="center" fixed="right">
+            <template slot-scope="{ row }">
+              <span :style="{ color: row.is_free_license === 'true' ? '#019319' : '#CA0000' }">
+                {{ row.is_free_license === 'true' ? '已授权' : '未授权' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="到期时间" width="144" fixed="right">
+            <template slot-scope="{ row }">
+              {{ row.is_free_license === 'true' ? row.free_license_end_date : '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="183" fixed="right">
+            <template slot-scope="{ row }">
+              <span
+                :style="{ cursor: 'pointer' }"
+                @click="setEndDate(row.book_id, row.is_free_license === 'true' ? 'false' : 'true')"
+              >
+                {{ row.is_free_license === 'true' ? '停止授权' : '授权' }}
+              </span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </CommonTable>
+
+    <SelectDate :visible="visible" @close="visible = false" @selectDate="setOrgFree" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FreeLicense'
+};
+</script>
+
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router/composables';
+import { PageQueryOrgBookFreeLicenseList, SetOrgFreeLicenseForBook } from '@/api/org';
+import { Message } from 'element-ui';
+import { useList } from '@/utils/list';
+
+import CommonTable from '@/components/common/CommonTable.vue';
+import SelectDate from '@/components/common/SelectDate.vue';
+
+const route = useRoute();
+const org_id = route.params.org_id; // 机构 id
+
+// 列表所需数据
+const { page_capacity, cur_page, total_count, list, changePage, changePageSize } = useList();
+
+function pageQuery() {
+  PageQueryOrgBookFreeLicenseList({
+    org_id,
+    page_capacity: page_capacity.value,
+    cur_page: cur_page.value
+  }).then(({ total_count: total, cur_page: page, book_list }) => {
+    total_count.value = total;
+    cur_page.value = page;
+    list.value = book_list;
+  });
+}
+pageQuery();
+
+let visible = ref(false);
+let book_id = '';
+let is_free_license = 'true';
+// 设置授权到期日
+function setEndDate(id, is_org_free) {
+  book_id = id;
+  is_free_license = is_org_free;
+  if (is_org_free === 'false') {
+    return setOrgFree('');
+  }
+  visible.value = true;
+}
+
+/**
+ * 设置教材针对机构免费授权
+ * @param {String} free_license_end_date 日期
+ */
+function setOrgFree(free_license_end_date) {
+  SetOrgFreeLicenseForBook({
+    book_id,
+    org_id,
+    is_free_license,
+    free_license_end_date
+  }).then(() => {
+    visible.value = false;
+    Message.success('设置授权成功');
+    pageQuery();
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/styles/mixin';
+
+.free-license {
+  @include container;
+
+  padding: 24px 0 46px;
+
+  &-container {
+    padding: 24px 32px;
+  }
+}
+</style>

src/views/org_manager/index.vue

@@ -8,20 +8,25 @@
       :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, queryOrgList)"
+      @next-click="changePage($event, queryOrgList)"
+      @current-change="changePage($event, queryOrgList)"
+      @size-change="changePageSize($event, queryOrgList)"
     >
       <template #button>
         <el-button icon="el-icon-plus" @click="$router.push('/add_org')">创建机构</el-button>
       </template>
 
-      <el-table :data="org_list">
+      <el-table :data="list">
         <el-table-column prop="name" label="名称" width="240" />
         <el-table-column prop="teacher_count" label="注册教师人数" width="110" />
         <el-table-column prop="teacher_count_audited" label="审核通过的注册教师人数" width="180" />
         <el-table-column prop="admin_user_name" label="机构管理员" />
+        <el-table-column fixed="right" width="100">
+          <template slot-scope="{ row }">
+            <a @click="$router.push({ path: `/free_license/${row.id}` })">教材授权</a>
+          </template>
+        </el-table-column>
         <el-table-column fixed="right" width="70">
           <template slot-scope="{ row }">
             <a @click="showOrg(row.id)">查看</a>
@@ -58,101 +63,91 @@
       </el-table>
     </CommonTable>
 
-    <reset-password ref="reset" :user-id="curUserId" />
-    <show-org ref="showOrg" :org-id="curOrgId" />
-    <update-org ref="updateOrg" :org-id="curOrgId" @refresh="queryOrgList" />
+    <ResetPassword ref="reset" :user-id="curUserId" />
+    <ShowOrg ref="show_org" :org-id="curOrgId" />
+    <UpdateOrg ref="update_org" :org-id="curOrgId" @refresh="queryOrgList" />
   </div>
 </template>
 
 <script>
+export default {
+  name: 'OrgManager'
+};
+</script>
+
+<script setup>
+import { ref } from 'vue';
+import { pageQueryOrgList } from '@/api/list';
+import { GetDistributablePopedomList_OrgManager, SetDistributablePopedom_OrgManager } from '@/api/org';
+import { useList } from '@/utils/list';
+import { Message } from 'element-ui';
+
 import ResetPassword from '@/components/ResetPassword.vue';
 import ShowOrg from './ShowOrg.vue';
 import UpdateOrg from './UpdateOrg.vue';
 import CommonTable from '@/components/common/CommonTable.vue';
-import { pageQueryOrgList } from '@/api/list';
-import { GetDistributablePopedomList_OrgManager, SetDistributablePopedom_OrgManager } from '@/api/org';
 
-export default {
-  name: 'OrgManager',
-  components: {
-    ResetPassword,
-    ShowOrg,
-    UpdateOrg,
-    CommonTable
-  },
-  data() {
-    return {
-      search: '',
-      page_capacity: 10,
-      cur_page: 1,
-      org_list: [],
-      total_count: 0,
-      curUserId: '',
-      curOrgId: '',
-      // 权限列表
-      popedom_list: []
-    };
-  },
-  created() {
-    this.queryOrgList();
-  },
-  methods: {
-    changePage(newPage) {
-      this.cur_page = newPage;
-      this.queryOrgList();
-    },
-    changePageSize(pageSize) {
-      this.page_capacity = pageSize;
-      this.queryOrgList();
-    },
-    queryOrgList() {
-      pageQueryOrgList({
-        name: this.search,
-        page_capacity: this.page_capacity,
-        cur_page: this.cur_page
-      }).then(({ cur_page, org_list, total_count }) => {
-        this.cur_page = cur_page;
-        this.org_list = org_list;
-        this.total_count = total_count;
-      });
-    },
-
-    showOrg(id) {
-      this.curOrgId = id;
-      this.$refs.showOrg.show();
-    },
-
-    updateOrg(id) {
-      this.curOrgId = id;
-      this.$refs.updateOrg.show();
-    },
-
-    getDistributablePopedomList_OrgManager(org_id) {
-      GetDistributablePopedomList_OrgManager({ 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;
-      });
-    },
-
-    setDistributablePopedom_OrgManager(org_id) {
-      let popedom_code_list = [];
-      this.popedom_list.forEach(({ popedom_code, is_selected }) => {
-        if (is_selected) popedom_code_list.push(popedom_code);
-      });
-      SetDistributablePopedom_OrgManager({ org_id, popedom_code_list }).then(() => {
-        this.$message.success('为机构管理员设置可分配的权限成功');
-      });
-    },
-
-    resetOrgAdminPassword(id) {
-      this.curUserId = id;
-      this.$refs.reset.show();
-    }
-  }
-};
+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();
+
+function queryOrgList() {
+  pageQueryOrgList({
+    name: search.value,
+    page_capacity: page_capacity.value,
+    cur_page: cur_page.value
+  }).then(({ cur_page: page, org_list, total_count: total }) => {
+    cur_page.value = page;
+    list.value = org_list;
+    total_count.value = total;
+  });
+}
+queryOrgList();
+
+function showOrg(id) {
+  curOrgId.value = id;
+  show_org.value.show();
+}
+
+function updateOrg(id) {
+  curOrgId = id;
+  update_org.value.show();
+}
+
+// 得到机构管理员可分配的权限列表
+function getDistributablePopedomList_OrgManager(org_id) {
+  GetDistributablePopedomList_OrgManager({ org_id }).then(({ popedom_list: list }) => {
+    list.forEach((el, i, arr) => {
+      el.is_selected = el.is_selected === 'true';
+      arr[i] = el;
+    });
+    popedom_list.value = list;
+  });
+}
+
+// 为机构管理员设置可分配的权限
+function setDistributablePopedom_OrgManager(org_id) {
+  let popedom_code_list = [];
+  popedom_list.value.forEach(({ popedom_code, is_selected }) => {
+    if (is_selected) popedom_code_list.push(popedom_code);
+  });
+  SetDistributablePopedom_OrgManager({ org_id, popedom_code_list }).then(() => {
+    Message.success('为机构管理员设置可分配的权限成功');
+  });
+}
+
+// 重置管理员机构密码
+function resetOrgAdminPassword(id) {
+  curUserId.value = id;
+  reset.value.show();
+}
 </script>
 
 <style lang="scss" scope>