chore: update

package.json

@@ -18,11 +18,11 @@
     "@tinymce/tinymce-vue": "^6.0.1",
     "axios": "^1.7.7",
     "blueimp-md5": "^2.19.0",
-    "element-plus": "^2.8.0",
+    "element-plus": "^2.8.2",
     "file-saver": "^2.0.5",
     "pinia": "^2.2.2",
     "qs": "^6.13.0",
-    "vue": "^3.5.1",
+    "vue": "^3.5.3",
     "vue-router": "^4.4.3"
   },
   "devDependencies": {
@@ -43,6 +43,7 @@
     "typescript": "~5.4.5",
     "unplugin-auto-import": "^0.18.2",
     "vite": "^5.4.3",
+    "vite-plugin-mkcert": "^1.17.6",
     "vue-tsc": "^2.1.6"
   }
 }

src/api/base.ts

@@ -34,3 +34,7 @@ export function uploadFile(data: Record<string, any>) {
 export function deleteComment(data: { id: string }) {
   return httpRequest.post('/api/psp/backend/comment/delete', data)
 }
+
+export function getCourseTypeList(params?: { page_size?: number; page?: number }) {
+  return httpRequest.get('/api/psp/backend-v2/course-category/index', { params })
+}

src/components/layout/Aside.vue

@@ -12,7 +12,8 @@ import {
   Picture,
   Files,
   // VideoCamera,
-  Notebook
+  Notebook,
+  Filter
   // Goods
   // DishDot,
   // QuestionFilled,
@@ -32,6 +33,7 @@ const menuList: IMenuItem[] = [
   { name: '导师管理', path: '/lecturer', icon: School },
   { name: '广告管理', path: '/banner', icon: Picture },
   { name: '课程管理', path: '/course', icon: Notebook },
+  { name: '课程类型', path: '/types', icon: Filter },
   { name: '消息管理', path: '/doc', icon: Files }
   // { name: '视频管理', path: '/video', icon: VideoCamera },
   // { name: '推荐课程', path: '/course/recommend', icon: Goods }

src/composabels/useCourseTypes.ts

+import { getCourseTypeList } from '@/api/base'
+
+interface ICourseType {
+  id: string
+  name: string
+}
+export function useCourseTypes() {
+  const types = ref<ICourseType[]>([])
+  const fetchList = () => {
+    getCourseTypeList({ page_size: 100 }).then(res => {
+      types.value = res.data.list || []
+    })
+  }
+  onMounted(() => {
+    fetchList()
+  })
+  return { types }
+}

src/modules/course/base/components/DialogForm.vue

@@ -2,6 +2,9 @@
 import { ElMessage } from 'element-plus'
 import type { FormInstance } from 'element-plus'
 import { updateCourse } from '../api'
+import { useCourseTypes } from '@/composabels/useCourseTypes'
+
+const { types } = useCourseTypes()
 
 const props = defineProps<{ data: Record<string, any> }>()
 
@@ -33,11 +36,11 @@ function update() {
     emit('success', res.data)
   })
 }
-const categoryList = [
-  { label: '财富管理基础知识', value: '1' },
-  { label: '金融投资工具', value: '2' },
-  { label: '财富管理务实应用', value: '3' }
-]
+// const categoryList = [
+//   { label: '财富管理基础知识', value: '1' },
+//   { label: '金融投资工具', value: '2' },
+//   { label: '财富管理务实应用', value: '3' }
+// ]
 </script>
 
 <template>
@@ -50,9 +53,12 @@ const categoryList = [
         <el-input v-model="form.times" placeholder="请输入" />
       </el-form-item>
       <el-form-item label="课程类型" prop="category">
-        <el-radio-group v-model="form.category">
+        <el-select v-model="form.category">
+          <el-option v-for="item in types" :label="item.name" :value="item.id" :key="item.id"></el-option>
+        </el-select>
+        <!-- <el-radio-group v-model="form.category">
           <el-radio v-for="item in categoryList" :key="item.value" :label="item.label" :value="item.value"></el-radio>
-        </el-radio-group>
+        </el-radio-group> -->
       </el-form-item>
       <el-form-item label="是否显示" prop="status">
         <el-switch v-model="form.status" active-text="显示" active-value="2" inactive-text="不显示" inactive-value="1" />

src/modules/course/base/views/List.vue

@@ -20,7 +20,7 @@ const listOptions = {
       label: '授课教师',
       prop: 'course_lectures',
       computed({ row }: { row: any }) {
-        return row.course_lectures.map((item: any) => item.lecturer_name).join(',')
+        return row.course_lectures?.map((item: any) => item.lecturer_name).join(',')
       }
     },
     { label: '课程描述', prop: 'course_represent', slots: 'table-desc' },

src/modules/student/api.ts

@@ -41,11 +41,23 @@ export function exportUser(params?: { name?: string; mobile?: string }) {
 }
 
 // 学员关联课程时课程列表
-export function getUserCourseList(params: { type: 'new' | 'old'; sso_id: string; category?: string; page?: number; page_size?: number }) {
+export function getUserCourseList(params: { type: 'new' | 'old'; sso_id: string; category?: string; course_name?: string; page?: number; page_size?: number }) {
   return httpRequest.get('/api/psp/backend-v2/user/courses', { params })
 }
 
 // 学员关联课程时课程列表
-export function updateUserCourse(data: { sso_id: string; course_id: string; type: 'add' | 'delete' }) {
+export function updateUserCourse(data: { sso_id: string; course_id: string; type: 'add' | 'delete'; expiration_date?: string }) {
   return httpRequest.post('/api/psp/backend-v2/user/relation', data)
 }
+
+// 批量导入用户
+export function importUser(data: { file: File }) {
+  return httpRequest.post('/api/psp/backend-v2/user/import-excel', data, {
+    headers: { 'Content-Type': 'multipart/form-data' }
+  })
+}
+
+// 导入进度
+export function importUserTasks() {
+  return httpRequest.get('/api/psp/backend-v2/user/import-tasks')
+}

src/modules/student/components/DIalogImport.vue

+<script setup>
+import { Upload } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { useFileDialog } from '@vueuse/core'
+import { importUser } from '../api'
+
+const emit = defineEmits(['success'])
+
+const { files, open } = useFileDialog({
+  multiple: false,
+  accept: '.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
+})
+
+const attrs = useAttrs()
+const handleSubmit = async () => {
+  if (!files.value?.length) return
+  const [file] = files.value
+  await importUser({ file })
+  ElMessage.success('导入成功')
+  emit('success')
+  attrs['onUpdate:modelValue'](false)
+}
+</script>
+
+<template>
+  <el-dialog title="批量导入学员" width="600px">
+    <div style="display: flex; align-items: center; gap: 10px">
+      <el-button :icon="Upload" type="primary" @click="open()">上传文件</el-button>
+      <p v-for="file in files" :key="file.name">{{ file.name }}</p>
+    </div>
+    <p style="margin-top: 20px">
+      <a href="/api/psp/backend-v2/user/download-excel" download="批量导入模板" style="color: blue">下载批量导入模板</a>
+    </p>
+    <template #footer>
+      <el-button @click="$emit('update:modelValue', false)">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">导入</el-button>
+    </template>
+  </el-dialog>
+</template>

src/modules/student/components/DIalogImportView.vue

+<script lang="ts" setup>
+import { importUserTasks } from '../api'
+const listOptions = {
+  remote: {
+    httpRequest: importUserTasks
+  },
+  columns: [
+    { label: '序号', type: 'index', width: 60 },
+    { label: '文件名', prop: 'file_name' },
+    { label: '学员数量', prop: 'nums' },
+    { label: '批量导入时间', prop: 'created_time' },
+    { label: '导入结果', prop: 'result' }
+  ]
+}
+</script>
+
+<template>
+  <el-dialog title="查看导入进度" width="800px">
+    <AppList v-bind="listOptions"></AppList>
+  </el-dialog>
+</template>

src/modules/student/components/DialogCourse.vue

 <script setup lang="ts">
 import { getUserCourseList, updateUserCourse } from '../api'
 import DialogCourseAdd from './DialogCourseAdd.vue'
+import DialogCourseDate from './DialogCourseDate.vue'
 
 const props = defineProps<{ data: Record<string, any> }>()
 
@@ -21,7 +22,8 @@ const listOptions = {
       }
     },
     { label: '学习进度', prop: 'percent' },
-    { label: '操作', slots: 'table-x', width: 100 }
+    { label: '有效期', prop: 'expiration_date' },
+    { label: '操作', slots: 'table-x', width: 170 }
   ]
 }
 
@@ -35,6 +37,12 @@ const handleRemove = async (row: any) => {
   await updateUserCourse({ sso_id: props.data.sso_id, course_id: row.id, type: 'delete' })
   handleRefresh()
 }
+const currentRow = ref(null)
+const dialogDateVisible = ref(false)
+const handleDate = (row: any) => {
+  currentRow.value = row
+  dialogDateVisible.value = true
+}
 </script>
 
 <template>
@@ -47,8 +55,15 @@ const handleRemove = async (row: any) => {
     <AppList v-bind="listOptions" ref="appList">
       <template #table-x="{ row }">
         <el-button text type="primary" @click="handleRemove(row)">删除</el-button>
+        <el-button text type="primary" @click="handleDate(row)">有效期</el-button>
       </template>
     </AppList>
     <DialogCourseAdd v-model="dialogVisible" :data="data" @close="handleRefresh"></DialogCourseAdd>
+    <DialogCourseDate
+      v-model="dialogDateVisible"
+      :data="data"
+      :course="currentRow"
+      @success="handleRefresh"
+      v-if="dialogDateVisible && currentRow"></DialogCourseDate>
   </el-dialog>
 </template>

src/modules/student/components/DialogCourseAdd.vue

 <script setup lang="ts">
 import { getUserCourseList, updateUserCourse } from '../api'
+import { useCourseTypes } from '@/composabels/useCourseTypes'
 const props = defineProps<{ data: Record<string, any> }>()
 
 const appList = ref()
 
-const listOptions = {
-  remote: { httpRequest: getUserCourseList, params: { sso_id: props.data.sso_id, type: 'new' } },
+const { types } = useCourseTypes()
+const listOptions = computed(() => {
+  return {
+    remote: { httpRequest: getUserCourseList, params: { sso_id: props.data.sso_id, type: 'new', course_name: '', category: '' } },
+    filters: [
+      { prop: 'category', type: 'select', options: types.value, labelKey: 'name', valueKey: 'id' },
+      { prop: 'course_name', type: 'input' }
+    ],
     columns: [
       { label: '序号', type: 'index', width: 60 },
       { label: '课程名称', prop: 'course_name' },
       { label: '课程类型', prop: 'category_name' },
       { label: '操作', slots: 'table-x', width: 100 }
     ]
-}
+  }
+})
 
 const handleAdd = async (row: any) => {
   await updateUserCourse({ sso_id: props.data.sso_id, course_id: row.id, type: 'add' })

src/modules/student/components/DialogCourseDate.vue

+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { updateUserCourse } from '../api'
+const props = defineProps<{ data: Record<string, any>; course: Record<string, any> }>()
+const emit = defineEmits(['update:modelValue', 'success'])
+
+const form = reactive({
+  expiration_date: ''
+})
+
+watchEffect(() => {
+  Object.assign(form, props.course)
+})
+const handleAdd = async () => {
+  await updateUserCourse({ sso_id: props.data.sso_id, course_id: props.course.id, type: 'add', expiration_date: form.expiration_date })
+  ElMessage.success('更新成功')
+  emit('success')
+  emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <el-dialog title="课程有效期" :close-on-click-modal="false" width="400px" @update:modelValue="$emit('update:modelValue')">
+    <el-row justify="space-evenly" style="margin: 10px">
+      <div>姓名：{{ data.name }}</div>
+      <div>手机号：{{ data.mobile }}</div>
+    </el-row>
+    <el-form style="text-align: center; margin: 40px">
+      <el-form-item label="课程有效期">
+        <el-date-picker v-model="form.expiration_date" value-format="YYYY-MM-DD" style="width: 100%"></el-date-picker>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="$emit('update:modelValue', false)">取消</el-button>
+      <el-button type="primary" @click="handleAdd">保存</el-button>
+    </template>
+  </el-dialog>
+</template>

src/modules/student/views/List.vue

@@ -5,6 +5,9 @@ import { getUserList, syncUser, exportUser } from '../api'
 // import qs from 'qs'
 import DialogForm from '../components/DialogForm.vue'
 import DialogCourse from '../components/DialogCourse.vue'
+import DialogImport from '../components/DIalogImport.vue'
+import DialogImportView from '../components/DIalogImportView.vue'
+
 const listParams = reactive({ name: '', mobile: '' })
 
 const appList = ref()
@@ -61,14 +64,19 @@ const handleCourse = (row: any) => {
   currentRow.value = row
   dialogCourseVisible.value = true
 }
+
+const dialogImportVisible = ref(false)
+const dialogImportViewVisible = ref(false)
 </script>
 
 <template>
   <AppCard>
     <AppList v-bind="listOptions" ref="appList">
       <template #header-aside>
-        <el-button type="primary" @click="onSyncUser" v-if="false">同步</el-button>
         <el-button type="primary" @click="handleAdd">添加学员</el-button>
+        <el-button type="primary" @click="dialogImportVisible = true">批量导入学员</el-button>
+        <el-button type="primary" @click="dialogImportViewVisible = true">查看导入进度</el-button>
+        <el-button type="primary" @click="onSyncUser" v-if="false">同步</el-button>
         <el-button type="primary" @click="handleExport">导出</el-button>
       </template>
       <template #table-label="{ row }">
@@ -86,5 +94,7 @@ const handleCourse = (row: any) => {
     </AppList>
     <DialogForm v-model="dialogVisible" @success="handleSuccess" v-if="dialogVisible"></DialogForm>
     <DialogCourse v-model="dialogCourseVisible" :data="currentRow" v-if="dialogCourseVisible"></DialogCourse>
+    <DialogImport v-model="dialogImportVisible" @success="handleSuccess" v-if="dialogImportVisible"></DialogImport>
+    <DialogImportView v-model="dialogImportViewVisible" v-if="dialogImportViewVisible"></DialogImportView>
   </AppCard>
 </template>

src/modules/types/api.ts

+import httpRequest from '@/utils/axios'
+
+// 获取课程类型列表
+export function getTypesList(params?: { page?: number; page_size?: number }) {
+  return httpRequest.get('/api/psp/backend-v2/course-category/index', { params })
+}
+
+// 创建课程类型
+export function createTypes(data: { name: string }) {
+  return httpRequest.post('/api/psp/backend-v2/course-category/create', data)
+}
+
+// 更新课程类型
+export function updateTypes(data: { id: string; name: string }) {
+  return httpRequest.post('/api/psp/backend-v2/course-category/update', data)
+}
+
+// 获取课程类型详情
+export function getTypes(params: { id: string }) {
+  return httpRequest.get('/api/psp/backend-v2/course-category/view', { params })
+}
+
+// 删除课程类型
+export function deleteTypes(data: { id: string }) {
+  return httpRequest.post('/api/psp/backend-v2/course-category/delete', data)
+}

src/modules/types/components/DialogForm.vue

+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+import { createTypes, updateTypes } from '../api'
+
+const props = defineProps<{ data?: Record<string, any> }>()
+
+const emit = defineEmits(['update:modelValue', 'success'])
+
+const formRef = ref<FormInstance>()
+const form = reactive({
+  name: ''
+})
+
+watchEffect(() => {
+  Object.assign(form, props.data)
+})
+
+const rules = {
+  name: [{ required: true, message: '请输入课程类别名称', trigger: 'blur' }]
+}
+
+// 提交
+async function onSubmit() {
+  if (!formRef.value) return
+  await formRef.value.validate()
+  props.data ? update() : create()
+}
+// 创建课程
+function create() {
+  createTypes(form).then(res => {
+    ElMessage.success('创建成功')
+    emit('update:modelValue', false)
+
+    emit('success', res.data)
+  })
+}
+// 更新课程
+function update() {
+  updateTypes({ ...form, id: props.data?.id }).then(res => {
+    ElMessage.success('更新成功')
+    emit('update:modelValue', false)
+    emit('success', res.data)
+  })
+}
+</script>
+
+<template>
+  <el-dialog title="添加课程类别" :close-on-click-modal="false" width="600px" @update:modelValue="$emit('update:modelValue')">
+    <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
+      <el-form-item label="课程类别名称" prop="name">
+        <el-input v-model="form.name" placeholder="请输入" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button text @click="emit('update:modelValue', false)">取消</el-button>
+      <el-button type="primary" @click="onSubmit">保存</el-button>
+    </template>
+  </el-dialog>
+</template>

src/modules/types/index.ts

+import type { RouteRecordRaw } from 'vue-router'
+import AppLayout from '@/components/layout/Index.vue'
+
+export const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/types',
+    component: AppLayout,
+    children: [
+      { path: '', component: () => import('./views/List.vue') },
+      { path: 'create', component: () => import('./views/Update.vue') },
+      { path: 'update/:id', component: () => import('./views/Update.vue'), props: true }
+    ]
+  }
+]

src/modules/types/views/List.vue

+<script setup lang="ts">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getTypesList, deleteTypes } from '../api'
+import DialogForm from '../components/DialogForm.vue'
+
+const appList = ref()
+
+const listOptions = {
+  remote: {
+    httpRequest: getTypesList
+  },
+  columns: [
+    { label: 'ID', prop: 'id' },
+    { label: '课程类别', prop: 'name' },
+    { label: '操作', slots: 'table-operate', width: 160 }
+  ]
+}
+
+const onRemove = (row: any) => {
+  ElMessageBox.confirm('确定要删除吗？', '提示').then(() => {
+    deleteTypes({ id: row.id }).then(() => {
+      ElMessage({ type: 'success', message: '删除成功' })
+      handleRefresh()
+    })
+  })
+}
+
+// 刷新
+const handleRefresh = () => {
+  appList.value?.refetch()
+}
+
+const currentRow = ref<any>()
+// 更新
+const dialogVisible = ref<boolean>(false)
+const handleAdd = () => {
+  currentRow.value = null
+  dialogVisible.value = true
+}
+
+const handleUpdate = (row: any) => {
+  currentRow.value = row
+  dialogVisible.value = true
+}
+</script>
+
+<template>
+  <AppCard>
+    <AppList v-bind="listOptions" ref="appList">
+      <template #header-aside>
+        <el-button type="primary" @click="handleAdd">创建</el-button>
+      </template>
+
+      <template #table-operate="{ row }">
+        <el-space>
+          <el-button plain @click="handleUpdate(row)">编辑</el-button>
+          <el-button type="danger" plain @click="onRemove(row)">删除</el-button>
+        </el-space>
+      </template>
+    </AppList>
+    <DialogForm v-model="dialogVisible" :data="currentRow" @success="handleRefresh" v-if="dialogVisible"></DialogForm>
+  </AppCard>
+</template>

src/modules/types/views/Update.vue

+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+// import AppEditor from '@/components/tinymce/Index.vue'
+import { createTypes, updateTypes, getTypes } from '../api'
+
+const props = defineProps<{ id?: string }>()
+
+const router = useRouter()
+
+const formRef = ref<FormInstance>()
+const form = reactive({ name: '' })
+const rules = {
+  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
+}
+// 提交
+const onSubmit = () => {
+  if (!formRef.value) return
+  formRef.value.validate().then(() => {
+    props.id ? update() : create()
+  })
+}
+// 取消
+const onCancel = () => {
+  router.replace('/types')
+}
+// 创建
+const create = () => {
+  createTypes(form).then(() => {
+    ElMessage({ message: '创建成功', type: 'success' })
+    router.push('/types')
+  })
+}
+// 修改
+const update = () => {
+  const params = { ...form, id: props.id as string }
+  updateTypes(params).then(() => {
+    ElMessage({ message: '修改成功', type: 'success' })
+    router.push('/types')
+  })
+}
+
+onMounted(() => {
+  props.id &&
+    getTypes({ id: props.id }).then(res => {
+      Object.assign(form, res.data)
+    })
+})
+</script>
+
+<template>
+  <AppCard>
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+      <el-form-item label="姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" auto-insert-space @click="onSubmit">保存</el-button>
+        <el-button auto-insert-space @click="onCancel">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </AppCard>
+</template>

vite.config.ts

-import fs from 'fs'
-import path from 'path'
+// import fs from 'fs'
+// import path from 'path'
 import { fileURLToPath, URL } from 'url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
+import mkcert from 'vite-plugin-mkcert'
 
 export default defineConfig(({ mode }) => {
   return {
     base: mode === 'prod' ? 'https://webapp-pub.ezijing.com/website/prod/wmpc-center/' : '/',
-    plugins: [vue(), AutoImport({ imports: ['vue', 'vue-router'], dts: true, eslintrc: { enabled: true } })],
+    plugins: [vue(), AutoImport({ imports: ['vue', 'vue-router'], dts: true, eslintrc: { enabled: true } }), mkcert()],
     server: {
       open: true,
       host: 'dev.ezijing.com',
-      https: {
-        key: fs.readFileSync(path.join(__dirname, './https/ezijing.com.key')),
-        cert: fs.readFileSync(path.join(__dirname, './https/ezijing.com.pem'))
-      },
+      // https: {
+      //   key: fs.readFileSync(path.join(__dirname, './https/ezijing.com.key')),
+      //   cert: fs.readFileSync(path.join(__dirname, './https/ezijing.com.pem'))
+      // },
       proxy: {
         '/api': 'https://psp-center.ezijing.com'
       }