【新增】试题页面（残缺）上传

src/api/paper/question/index.ts

@@ -0,0 +1,27 @@
+import request from '@/config/axios'
+export interface QuestionQueryVO {
+  specialtyName: string
+  courseName: string
+  subjectName: string
+}
+
+// 查询用户管理列表
+export const getQuestionList = (params: QuestionQueryVO) => {
+  return request.get({ url: '/exam/question/list', params })
+}
+// 获取试题详情
+export const getQuestion = (id: number) => {
+  return request.get({ url: '/exam/question/' + id })
+}
+
+
+// 获取题库列表
+export const getBankList = () => {
+  return request.get({ url: '/exam/bank/list' })
+}
+
+// 删除试题
+export const removeQuestion = (ids: string[]) => {
+  return request.delete({ url: '/exam/question/' + ids})
+}
+

src/api/system/user/index.ts

@@ -37,7 +37,6 @@ export const getUser = (id: number) => {
 export const getTeacherUser = (id: number) => {
   return request.get({ url: '/system/user/getByThId?id=' + id })
 }
-
 // 新增用户
 export const createUser = (data: UserVO) => {
   return request.post({ url: '/system/user/create', data })
@@ -64,7 +63,10 @@ export const updateStudent = (data: UserVO) => {
 export const updateTeacher = (data: UserVO) => {
   return request.put({ url: '/system/user/updateTeacher', data })
 }
-
+// 通过账号类型判断专业授权等信息
+export const getSpecialtyByUserId = () => {
+  return request.get({ url: '/system/user/getSpeciatListByUser' })
+}
 
 // 删除用户
 export const deleteUser = (id: number) => {

src/views/paper/question/CdesignForm.vue

@@ -0,0 +1,174 @@
+<template>
+  <Dialog
+          v-model="dialogVisible"
+          :title="dialogTitle"
+          width="70%"
+          top="10vh">
+    <el-scrollbar height="600px">
+      <el-tabs
+          v-model="activeName"
+          class="demo-tabs"
+          @tab-click="handleClick"
+      >
+        <el-tab-pane label="基本内容" name="common">
+          <div class="line">
+            <div class="title-text">试题题目</div>
+            <div class="block">
+              <Editor v-model="content" height="150px" />
+            </div>
+          </div>
+          <div class="line">
+            <div>答题程序模板</div>
+            <ElTextarea v-model="textarea" :rows="4" />
+          </div>
+          <div class="line">
+            <div class="title-text">基本信息</div>
+            <el-form
+                label-width="80"
+                :inline="false"
+                :model="formData"
+                class="demo-form-inline"
+            >
+              <el-form-item label="知识点">
+                <el-input
+                    disabled
+                    placeholder="请输入知识点"
+                    size="large"
+                />
+              </el-form-item>
+              <el-form-item label="试题版本">
+                <p>测试测试</p>
+              </el-form-item>
+              <el-form-item label="来源">
+                <p>测试测试</p>
+              </el-form-item>
+              <el-form-item label="创建人">
+                <p>测试测试</p>
+              </el-form-item>
+              <el-form-item label="创建时间">
+                <p>测试测试</p>
+              </el-form-item>
+              <el-form-item label="修改人">
+                <p>测试测试</p>
+              </el-form-item>
+              <el-form-item label="修改时间">
+                <p>测试测试</p>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-scrollbar>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import ElTextarea from './components/el-textarea.vue'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as PostApi from '@/api/system/post'
+import * as DeptApi from '@/api/system/dept'
+import * as UserApi from '@/api/system/user'
+import { FormRules } from 'element-plus'
+
+defineOptions({ name: 'SystemUserForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  content: '',
+  specialtyName: '',
+  courseName: '',
+  quBankName: '',
+  required: '',
+  chapteridDictText: '',
+  analysis: ''
+})
+const formRules = reactive<FormRules>({
+  specialtyName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const deptList = ref<Tree[]>([]) // 树形结构
+const postList = ref([] as PostApi.PostVO[]) // 岗位列表
+/** 页面内容开始 */
+const activeName = ref('common');
+const content = ref('');
+const textarea = ref('');
+
+const handleClick = (tab, e) => {
+  activeName.value = tab.paneName.value;
+};
+/** 页面内容结束 */
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await UserApi.getUser(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  // 加载部门树
+  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
+  // 加载岗位列表
+  postList.value = await PostApi.getSimplePostList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  console.log(textarea.value)
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as UserApi.UserVO
+    if (formType.value === 'create') {
+      await UserApi.createUser(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await UserApi.updateUser(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    content: '',
+    specialtyName: '',
+    courseName: '',
+    quBankName: '',
+    required: '',
+    chapteridDictText: '',
+    analysis: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/paper/question/ChoiceForm.vue

@@ -0,0 +1,603 @@
+<template>
+  <Dialog
+          v-model="dialogVisible"
+          :title="dialogTitle"
+          width="70%"
+          top="10vh">
+    <el-scrollbar height="700px">
+      <div class="main">
+        <el-form
+            ref="formRef"
+            v-loading="formLoading"
+            :model="formData"
+            :rules="formRules"
+            label-width="80px"
+        >
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="专业" prop="specialtyName">
+                <el-input v-model="formData.specialtyName" placeholder="请输入专业" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="试题名称" prop="quBankName">
+                <el-input v-model="formData.quBankName" placeholder="请输入专业" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="题库" prop="required">
+                <el-input v-model="formData.required" placeholder="请输入手机题库" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="章节名称" prop="chapteridDictText">
+                <el-input v-model="formData.chapteridDictText" placeholder="请输入章节名称" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="课程" prop="courseName">
+                <el-input v-model="formData.courseName" placeholder="请输入课程" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="edit-bottom">
+        <div class="edit-left bottom-common">
+          <el-tabs v-model="leftActiveName" class="demo-tabs">
+            <el-tab-pane label="试题描述" name="desc">
+              <div class="block">
+                <Editor v-model="formData.content" height="150px" />
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div class="edit-right bottom-common">
+          <el-tabs
+              v-model="rightActiveName"
+              class="demo-tabs"
+              @tab-click="rightHandleClick"
+          >
+            <el-tab-pane class="answer" label="试题答案" name="answer">
+              <div class="block">
+                <div class="tip">
+                  <p>答案设置&nbsp;&nbsp;|&nbsp;选项数：</p>
+                  <el-select
+                      v-model="optionNumVal"
+                      class="m-2"
+                      placeholder="Select"
+                      size="large"
+                      style="width: 30%"
+                  >
+                    <el-option
+                        v-for="item in optionNumber"
+                        :key="item"
+                        :label="item"
+                        :value="item"
+                    />
+                  </el-select>
+                </div>
+                <el-radio-group v-model="radio">
+                  <div
+                      class="options"
+                      v-for="item in optionNumVal"
+                      :key="item"
+                  >
+                    <div class="content">
+                      <el-radio :label="String.fromCharCode(64 + item)">
+                        {{ String.fromCharCode(64 + item) }}
+                      </el-radio>
+                      <el-input
+                          class="text"
+                          v-model="optionsContent[item]"
+                          :rows="3"
+                          type="textarea"
+                          placeholder="请输入答案内容"
+                      />
+                    </div>
+                    <!-- <el-button class="more-btn" @click="moreEdit">更多…</el-button> -->
+                  </div>
+                </el-radio-group>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="试题解析" name="analysis">
+              <div class="block">
+                <Editor v-model="formData.analysis" height="150px" />
+              </div>
+            </el-tab-pane>
+            <el-tab-pane name="keyword">
+              <template #label>
+                <div class="custom-tabs-label">
+                  <p>关键字</p>
+                  <el-dropdown>
+                        <span class="el-dropdown-link" @click.stop="false">
+                          <div class="setting_icon"></div>
+                        </span>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item @click="editKeyword('create')"
+                        >新建</el-dropdown-item
+                        >
+                        <el-dropdown-item @click="editKeyword('create')"
+                        >编辑</el-dropdown-item
+                        >
+                        <el-dropdown-item @click="editKeyword('delete')"
+                        >删除</el-dropdown-item
+                        >
+                        <el-dropdown-item @click="editKeyword('deleteall')"
+                        >删除全部</el-dropdown-item
+                        >
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </template>
+              <div class="block">
+                <el-table
+                    ref="keywordTableRef"
+                    row-key="id"
+                    :columns="keywordColumns"
+                    :datasource="keywordList"
+                    :toolbar="false"
+                    :show-overflow-tooltip="true"
+                    highlight-current-row
+                    style="width: 100%"
+                />
+                <el-dialog
+                    v-model="keyVisible"
+                    title="编辑关键字"
+                    width="50%"
+                    :before-close="keyDialogClose"
+                    :close-on-click-modal="false"
+                    :close-on-press-escape="false"
+                >
+                  <div class="main" style="width: 100%; height: 100%">
+                    <el-input
+                        v-model="keyWord"
+                        placeholder="请输入关键字"
+                        size="large"
+                    />
+                    <div class="dialog-footer">
+                      <el-button @click="keyDialogClose">取消</el-button>
+                      <el-button
+                          type="primary"
+                          @click="confirmKeyDialogVisible"
+                      >
+                        确定
+                      </el-button>
+                    </div>
+                  </div>
+                </el-dialog>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane name="medium">
+              <template #label>
+                <div class="custom-tabs-label">
+                  <p>媒体文件</p>
+                  <el-dropdown>
+                      <span class="el-dropdown-link" @click.stop="false">
+                        <div class="setting_icon"></div>
+                      </span>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item>
+                          <el-upload
+                              v-model:file-list="fileList"
+                              class="upload-demo"
+                              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+                          >
+                            <el-button>导入</el-button>
+                          </el-upload>
+                        </el-dropdown-item>
+                        <el-dropdown-item>导出</el-dropdown-item>
+                        <el-dropdown-item>播放</el-dropdown-item>
+                        <el-dropdown-item>编辑</el-dropdown-item>
+                        <el-dropdown-item>删除选中</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </template>
+              <div class="block">
+                <el-table
+                    ref="mediumTableRef"
+                    row-key="id"
+                    :columns="mediumColumns"
+                    :datasource="mediumList"
+                    :toolbar="false"
+                    :show-overflow-tooltip="true"
+                    highlight-current-row
+                    style="width: 100%"
+                />
+              </div>
+            </el-tab-pane>
+            <el-tab-pane name="annex">
+              <template #label>
+                <div class="custom-tabs-label">
+                  <p>试题附件</p>
+                  <el-dropdown>
+                      <span class="el-dropdown-link" @click.stop="false">
+                        <div class="setting_icon"></div>
+                      </span>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item>导入单文件</el-dropdown-item>
+                        <el-dropdown-item>导入多文件</el-dropdown-item>
+                        <el-dropdown-item>导出</el-dropdown-item>
+                        <el-dropdown-item>删除</el-dropdown-item>
+                        <el-dropdown-item>帮助</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </template>
+              <div class="block">
+                <el-table
+                    ref="annexTableRef"
+                    row-key="id"
+                    :columns="annexColumns"
+                    :datasource="annexList"
+                    :toolbar="false"
+                    :show-overflow-tooltip="true"
+                    highlight-current-row
+                    style="width: 100%"
+                />
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </el-scrollbar>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as PostApi from '@/api/system/post'
+import * as DeptApi from '@/api/system/dept'
+import * as UserApi from '@/api/system/user'
+import { FormRules } from 'element-plus'
+
+defineOptions({ name: 'SystemUserForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  content: '',
+  specialtyName: '',
+  courseName: '',
+  quBankName: '',
+  required: '',
+  chapteridDictText: '',
+  analysis: ''
+})
+const formRules = reactive<FormRules>({
+  specialtyName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const deptList = ref<Tree[]>([]) // 树形结构
+const postList = ref([] as PostApi.PostVO[]) // 岗位列表
+// 左侧试题描述
+const leftActiveName = ref('desc');
+// 右侧tab
+const rightActiveName = ref('answer');
+const rightHandleClick = (tab, e) => {
+  rightActiveName.value = tab.paneName.value;
+};
+const optionNumVal = ref(4);
+const optionNumber = ref(26);
+const radio = ref('A');
+const keyEditType = ref('');
+const keyVisible = ref(false);
+const keyWord = ref([null]);
+const annexList = ref([]);
+const fileList = [];
+const mediumList = ref([]);
+
+const keywordList = ref([]);
+// 保留选项的值
+const optionsContent = reactive({});
+const editKeyword = (key) => {
+  keyEditType.value = key;
+  keyVisible.value = true;
+};
+
+// 关键字
+const keywordColumns = computed(() => {
+  return [
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 55,
+      align: 'center',
+      showOverflowTooltip: false
+    },
+    {
+      prop: 'keyword',
+      label: '关键字',
+      align: 'left',
+      showOverflowTooltip: true
+    }
+  ];
+});
+// 试题附件
+const annexColumns = computed(() => {
+  return [
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 55,
+      align: 'center',
+      showOverflowTooltip: false
+    },
+    {
+      prop: 'name',
+      label: '附件',
+      align: 'left',
+      showOverflowTooltip: true
+    },
+    {
+      prop: 'size',
+      label: '大小',
+      align: 'center',
+      width: 55,
+      showOverflowTooltip: false
+    }
+  ];
+});
+// 媒体文件
+const mediumColumns = computed(() => {
+  return [
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 55,
+      align: 'center',
+      showOverflowTooltip: false
+    },
+    {
+      prop: 'type',
+      label: '媒体类型',
+      align: 'center',
+      width: 80,
+      showOverflowTooltip: false
+    },
+    {
+      prop: 'title',
+      label: '标题',
+      align: 'left',
+      showOverflowTooltip: true
+    },
+    {
+      prop: 'displayIndex',
+      label: '显示序号',
+      align: 'center',
+      showOverflowTooltip: false
+    },
+    {
+      prop: 'size',
+      label: '大小',
+      align: 'center',
+      showOverflowTooltip: false
+    }
+  ];
+});
+const confirmKeyDialogVisible = () => {
+  if (keyEditType.value === 'create') {
+    keywordList.value.push({
+      keyword: keyWord.value
+    });
+  }
+
+  keyVisible.value = false;
+};
+
+const keyDialogClose = () => {
+  keyVisible.value = false;
+};
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await UserApi.getUser(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  // 加载部门树
+  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
+  // 加载岗位列表
+  postList.value = await PostApi.getSimplePostList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as UserApi.UserVO
+    if (formType.value === 'create') {
+      await UserApi.createUser(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await UserApi.updateUser(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    content: '',
+    specialtyName: '',
+    courseName: '',
+    quBankName: '',
+    required: '',
+    chapteridDictText: '',
+    analysis: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>
+<style lang="scss" scoped>
+.edit-dialog {
+  :deep(.el-dialog) {
+    display: flex;
+    flex-direction: column;
+    .el-dialog__header {
+      border-bottom: 1px solid #ededed;
+    }
+    .el-dialog__footer {
+      border-top: 1px solid #ededed;
+    }
+    .el-dialog__body {
+      flex: 1;
+      overflow: hidden;
+      .main {
+        .el-form {
+          padding: 10px;
+          .el-row {
+            justify-content: space-between;
+            margin-bottom: 10px;
+          }
+          .el-form-item {
+            width: 100%;
+            margin-bottom: 0;
+            align-items: center;
+          }
+        }
+        .edit-bottom {
+          display: flex;
+          justify-content: space-between;
+          padding-bottom: 10px;
+          .bottom-common {
+            width: calc(50% - 10px);
+            .el-tabs {
+              height: 100%;
+              .el-tabs__content {
+                flex: 1;
+                overflow-y: auto;
+                .block {
+                  width: 100%;
+                  height: 200px;
+                  overflow: auto;
+                }
+                .answer {
+                  .tip {
+                    color: #8a6d3b;
+                    background-color: #fcf8e3;
+                    border-color: #faebcc;
+                    padding: 10px 20px;
+                    display: flex;
+                    align-items: center;
+                    > p {
+                      flex-shrink: 0;
+                    }
+                  }
+                  .el-radio-group {
+                    width: 100%;
+                    display: inline-flex;
+                    align-items: flex-start;
+                    font-size: 0;
+                    flex-direction: column;
+                    .options {
+                      width: 100%;
+                      margin-top: 15px;
+                      .content {
+                        display: flex;
+                        .text {
+                          width: 100%;
+                          height: 70px;
+                          border: 1px solid #ededed;
+                          .el-textarea__inner {
+                            resize: none;
+                          }
+                        }
+                      }
+                      .more-btn {
+                        margin-top: 8px;
+                        background-color: #ffffff;
+                        border-color: #007bff;
+                        color: #007bff;
+                        width: auto;
+                        height: auto;
+                        padding: 10px 10px;
+                      }
+                    }
+                  }
+                }
+              }
+
+              .custom-tabs-label {
+                display: flex;
+                align-items: center;
+                .setting_icon {
+                  width: 16px;
+                  height: 16px;
+                  background: url('@/assets/icon/setting_blue.png') no-repeat
+                  center;
+                  background-size: 100%;
+                  margin-left: 3px;
+                  display: none;
+                }
+              }
+              .is-active {
+                .custom-tabs-label {
+                  .setting_icon {
+                    display: block;
+                  }
+                }
+              }
+              :deep(.ele-pro-table) {
+                flex: 1;
+                margin-top: 10px;
+                .el-table--fit {
+                  height: 100%;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+:deep(.tox-tinymce) {
+  .tox-statusbar {
+    display: none;
+  }
+}
+</style>

src/views/paper/question/DeptTree.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="head-container">
+    <el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入部门名称">
+      <template #prefix>
+        <Icon icon="ep:search" />
+      </template>
+    </el-input>
+  </div>
+  <div class="head-container">
+    <el-tree
+      ref="treeRef"
+      :data="deptList"
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      :props="defaultProps"
+      default-expand-all
+      highlight-current
+      node-key="id"
+      @node-click="handleNodeClick"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ElTree } from 'element-plus'
+import * as DeptApi from '@/api/system/dept'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+defineOptions({ name: 'SystemUserDeptTree' })
+
+const deptName = ref('')
+const deptList = ref<Tree[]>([]) // 树形结构
+const treeRef = ref<InstanceType<typeof ElTree>>()
+
+/** 获得部门树 */
+const getTree = async () => {
+  const res = await DeptApi.getSimpleDeptList()
+  deptList.value = []
+  deptList.value.push(...handleTree(res))
+}
+
+/** 基于名字过滤 */
+const filterNode = (name: string, data: Tree) => {
+  if (!name) return true
+  return data.name.includes(name)
+}
+
+/** 处理部门被点击 */
+const handleNodeClick = async (row: { [key: string]: any }) => {
+  emits('node-click', row)
+}
+const emits = defineEmits(['node-click'])
+
+/** 监听deptName */
+watch(deptName, (val) => {
+  treeRef.value!.filter(val)
+})
+
+/** 初始化 */
+onMounted(async () => {
+  await getTree()
+})
+</script>

src/views/paper/question/SpecialtyTree.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="head-container">
+    <el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入专业名称">
+      <template #prefix>
+        <Icon icon="ep:search" />
+      </template>
+    </el-input>
+  </div>
+  <div class="head-container">
+    <el-tree
+      ref="treeRef"
+      :data="specialtyList"
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      :props="defaultProps"
+      default-expand-all
+      highlight-current
+      node-key="id"
+      @node-click="handleNodeClick"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ElTree } from 'element-plus'
+import * as UserApi from '@/api/system/user'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+defineOptions({ name: 'PaperQuestionSpecialtyTree' })
+
+const deptName = ref('')
+const specialtyList = ref<Tree[]>([]) // 树形结构
+const treeRef = ref<InstanceType<typeof ElTree>>()
+/** 获得部门树 */
+const getTree = async () => {
+  const res = await UserApi.getSpecialtyByUserId()
+  specialtyList.value = []
+  specialtyList.value.push(...handleTree(res))
+}
+
+/** 基于名字过滤 */
+const filterNode = (name: string, data: Tree) => {
+  if (!name) return true
+  return data.name.includes(name)
+}
+
+/** 处理部门被点击 */
+const handleNodeClick = async (row: { [key: string]: any }) => {
+  emits('node-click', row)
+}
+const emits = defineEmits(['node-click'])
+
+/** 监听deptName */
+watch(deptName, (val) => {
+  treeRef.value!.filter(val)
+})
+
+/** 初始化 */
+onMounted(async () => {
+  await getTree()
+})
+</script>

src/views/paper/question/UserAssignRoleForm.vue

@@ -0,0 +1,96 @@
+<template>
+  <Dialog v-model="dialogVisible" title="分配角色">
+    <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
+      <el-form-item label="用户名称">
+        <el-input v-model="formData.username" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="用户昵称">
+        <el-input v-model="formData.nickname" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="角色">
+        <el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
+          <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as PermissionApi from '@/api/system/permission'
+import * as UserApi from '@/api/system/user'
+import * as RoleApi from '@/api/system/role'
+
+defineOptions({ name: 'SystemUserAssignRoleForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: -1,
+  nickname: '',
+  username: '',
+  roleIds: []
+})
+const formRef = ref() // 表单 Ref
+const roleList = ref([] as RoleApi.RoleVO[]) // 角色的列表
+
+/** 打开弹窗 */
+const open = async (row: UserApi.UserVO) => {
+  dialogVisible.value = true
+  resetForm()
+  // 设置数据
+  formData.value.id = row.id
+  formData.value.username = row.username
+  formData.value.nickname = row.nickname
+  // 获得角色拥有的菜单集合
+  formLoading.value = true
+  try {
+    formData.value.roleIds = await PermissionApi.getUserRoleList(row.id)
+  } finally {
+    formLoading.value = false
+  }
+  // 获得角色列表
+  roleList.value = await RoleApi.getSimpleRoleList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await PermissionApi.assignUserRole({
+      userId: formData.value.id,
+      roleIds: formData.value.roleIds
+    })
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success', true)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: -1,
+    nickname: '',
+    username: '',
+    roleIds: []
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/paper/question/UserImportForm.vue

@@ -0,0 +1,138 @@
+<template>
+  <Dialog v-model="dialogVisible" title="用户导入" width="400">
+    <el-upload
+      ref="uploadRef"
+      v-model:file-list="fileList"
+      :action="importUrl + '?updateSupport=' + updateSupport"
+      :auto-upload="false"
+      :disabled="formLoading"
+      :headers="uploadHeaders"
+      :limit="1"
+      :on-error="submitFormError"
+      :on-exceed="handleExceed"
+      :on-success="submitFormSuccess"
+      accept=".xlsx, .xls"
+      drag
+    >
+      <Icon icon="ep:upload" />
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <template #tip>
+        <div class="el-upload__tip text-center">
+          <div class="el-upload__tip">
+            <el-checkbox v-model="updateSupport" />
+            是否更新已经存在的用户数据
+          </div>
+          <span>仅允许导入 xls、xlsx 格式文件。</span>
+          <el-link
+            :underline="false"
+            style="font-size: 12px; vertical-align: baseline"
+            type="primary"
+            @click="importTemplate"
+          >
+            下载模板
+          </el-link>
+        </div>
+      </template>
+    </el-upload>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as UserApi from '@/api/system/user'
+import { getAccessToken, getTenantId } from '@/utils/auth'
+import download from '@/utils/download'
+
+defineOptions({ name: 'SystemUserImportForm' })
+
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const uploadRef = ref()
+const importUrl =
+  import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/system/student/import'
+const uploadHeaders = ref() // 上传 Header 头
+const fileList = ref([]) // 文件列表
+const updateSupport = ref(0) // 是否更新已经存在的用户数据
+
+/** 打开弹窗 */
+const open = () => {
+  dialogVisible.value = true
+  updateSupport.value = 0
+  fileList.value = []
+  resetForm()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+  if (fileList.value.length == 0) {
+    message.error('请上传文件')
+    return
+  }
+  // 提交请求
+  uploadHeaders.value = {
+    Authorization: 'Bearer ' + getAccessToken(),
+    'tenant-id': getTenantId()
+  }
+  formLoading.value = true
+  uploadRef.value!.submit()
+}
+
+/** 文件上传成功 */
+const emits = defineEmits(['success'])
+const submitFormSuccess = (response: any) => {
+  if (response.code !== 0) {
+    message.error(response.msg)
+    formLoading.value = false
+    return
+  }
+  // 拼接提示语
+  const data = response.data
+  let text = '上传成功数量：' + data.createUsernames.length + ';'
+  for (let username of data.createUsernames) {
+    text += '< ' + username + ' >'
+  }
+  text += '更新成功数量：' + data.updateUsernames.length + ';'
+  for (const username of data.updateUsernames) {
+    text += '< ' + username + ' >'
+  }
+  text += '更新失败数量：' + Object.keys(data.failureUsernames).length + ';'
+  for (const username in data.failureUsernames) {
+    text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
+  }
+  message.alert(text)
+  formLoading.value = false
+  dialogVisible.value = false
+  // 发送操作成功的事件
+  emits('success')
+}
+
+/** 上传错误提示 */
+const submitFormError = (): void => {
+  message.error('上传失败，请您重新上传！')
+  formLoading.value = false
+}
+
+/** 重置表单 */
+const resetForm = async (): Promise<void> => {
+  // 重置上传状态和文件
+  formLoading.value = false
+  await nextTick()
+  uploadRef.value?.clearFiles()
+}
+
+/** 文件数超出提示 */
+const handleExceed = (): void => {
+  message.error('最多只能上传一个文件！')
+}
+
+/** 下载模板操作 */
+const importTemplate = async () => {
+  const res = await UserApi.importUserTemplate()
+  download.excel(res, '用户导入模版.xls')
+}
+</script>

src/views/paper/question/components/el-textarea.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="el-textarea line-number-textarea">
+    <div class="line-numbers" :style="{ paddingTop: paddingTop + 'px' }">
+      <div v-for="n in lineCount" :key="n">{{ n }}</div>
+    </div>
+    <textarea
+        class="el-textarea__inner"
+        :class="{ 'is-disabled': disabled }"
+        :placeholder="placeholder"
+        :maxlength="maxlength"
+        :rows="rows"
+        :disabled="disabled"
+        v-model="localValue"
+        @input="onInput"
+    ></textarea>
+    <span v-if="showWordLimit" class="el-input__count">
+      {{ localValue.length }} / {{ maxlength }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, defineProps, defineEmits } from 'vue'
+
+const props = defineProps({
+  modelValue: String,
+  placeholder: String,
+  rows: {
+    type: Number,
+    default: 5
+  },
+  maxlength: {
+    type: Number,
+    default: 1024
+  },
+  disabled: Boolean,
+  showWordLimit: Boolean
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const localValue = ref(props.modelValue ?? '')
+const lineCount = computed(() => localValue.value.split('\n').length)
+const paddingTop = computed(() => props.rows * 1.5 > lineCount.value ? 8 : 0)
+
+const onInput = (e: Event) => {
+  const val = (e.target as HTMLTextAreaElement).value
+  localValue.value = val
+  emit('update:modelValue', val)
+}
+
+watch(() => props.modelValue, (val) => {
+  if (val !== localValue.value) localValue.value = val ?? ''
+})
+</script>
+
+<style scoped>
+.line-number-textarea {
+  display: flex;
+  position: relative;
+  border-radius: 7px;
+  overflow: hidden;
+  background: white;
+}
+
+.line-numbers {
+  background-color: #f5f7fa;
+  color: #909399;
+  padding: 8px 6px;
+  text-align: right;
+  font-size: 14px;
+  font-family: monospace;
+  line-height: 1.5;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.line-numbers > div {
+  height: 1.5em;
+}
+
+.el-textarea__inner {
+  flex: 1;
+  border: none;
+  padding: 8px;
+  line-height: 1.5;
+  resize: none;
+  font-family: inherit;
+  outline: none;
+  font-size: 14px;
+  min-height: calc(1.5em * var(--rows));
+}
+
+.el-input__count {
+  position: absolute;
+  bottom: 5px;
+  right: 10px;
+  font-size: 12px;
+  color: #909399;
+}
+</style>

src/views/paper/question/index.vue

@@ -0,0 +1,456 @@
+<template>
+  <el-row :gutter="20">
+    <!-- 左侧部门树 -->
+    <el-col :span="4" :xs="24">
+      <ContentWrap class="h-1/2">
+        <SpecialtyTree @node-click="handleSpecialtyNodeClick" />
+      </ContentWrap>
+      <ContentWrap class="h-1/2">
+        <DeptTree @node-click="handleDeptNodeClick" />
+      </ContentWrap>
+    </el-col>
+    <el-col :span="20" :xs="24">
+      <!-- 搜索 -->
+      <ContentWrap>
+        <el-form
+          class="-mb-15px"
+          :model="queryParams"
+          ref="queryFormRef"
+          :inline="true"
+          label-width="68px"
+        >
+<!--          <el-form-item label="用户名称" prop="username">-->
+<!--            <el-input-->
+<!--              v-model="queryParams.username"-->
+<!--              placeholder="请输入用户名称"-->
+<!--              clearable-->
+<!--              @keyup.enter="handleQuery"-->
+<!--              class="!w-240px"-->
+<!--            />-->
+<!--          </el-form-item>-->
+<!--          <el-form-item label="手机号码" prop="mobile">-->
+<!--            <el-input-->
+<!--              v-model="queryParams.mobile"-->
+<!--              placeholder="请输入手机号码"-->
+<!--              clearable-->
+<!--              @keyup.enter="handleQuery"-->
+<!--              class="!w-240px"-->
+<!--            />-->
+<!--          </el-form-item>-->
+<!--          <el-form-item label="状态" prop="status">-->
+<!--            <el-select-->
+<!--              v-model="queryParams.status"-->
+<!--              placeholder="请选择用户状态"-->
+<!--              clearable-->
+<!--              class="!w-240px"-->
+<!--            >-->
+<!--              <el-option-->
+<!--                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"-->
+<!--                :key="dict.value"-->
+<!--                :label="dict.label"-->
+<!--                :value="dict.value"-->
+<!--              />-->
+<!--            </el-select>-->
+<!--          </el-form-item>-->
+<!--          <el-form-item label="创建时间" prop="createTime">-->
+<!--            <el-date-picker-->
+<!--              v-model="queryParams.createTime"-->
+<!--              value-format="YYYY-MM-DD HH:mm:ss"-->
+<!--              type="datetimerange"-->
+<!--              start-placeholder="开始日期"-->
+<!--              end-placeholder="结束日期"-->
+<!--              class="!w-240px"-->
+<!--            />-->
+<!--          </el-form-item>-->
+          <el-form-item>
+            <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
+            <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
+            <el-button
+              type="primary"
+              plain
+              @click="openForm('create')"
+            >
+              <Icon icon="ep:plus" /> 新增
+            </el-button>
+<!--            <el-button-->
+<!--              type="warning"-->
+<!--              plain-->
+<!--              @click="handleImport"-->
+<!--              v-hasPermi="['system:user:import']"-->
+<!--            >-->
+<!--              <Icon icon="ep:upload" /> 导入-->
+<!--            </el-button>-->
+<!--            <el-button-->
+<!--              type="success"-->
+<!--              plain-->
+<!--              @click="handleExport"-->
+<!--              :loading="exportLoading"-->
+<!--              v-hasPermi="['system:user:export']"-->
+<!--            >-->
+<!--              <Icon icon="ep:download" />导出-->
+<!--            </el-button>-->
+          </el-form-item>
+        </el-form>
+      </ContentWrap>
+      <ContentWrap>
+        <el-table v-loading="loading" :data="list">
+          <el-table-column label="试题编号" align="center" key="id" prop="quId" :show-overflow-tooltip="true"/>
+          <el-table-column
+            label="试题名称"
+            align="center"
+            prop="chapteridDictText"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="用户昵称"
+            align="center"
+            prop="nickname"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="难度"
+            align="center"
+            prop="quLevel"
+            :show-overflow-tooltip="true"
+          />
+
+          <el-table-column label="状态" key="status">
+            <template #default="scope">
+              <el-switch
+                  v-model="scope.row.status"
+                  :active-value="0"
+                  :inactive-value="1"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="专业" align="center" prop="specialtyName" width="120" />
+          <el-table-column
+              label="课程"
+              align="center"
+              prop="quBankName"
+              :show-overflow-tooltip="true"
+          />
+          <el-table-column
+              label="知识点"
+              align="center"
+              prop="pointNames"
+              :show-overflow-tooltip="true"
+          />
+          <el-table-column
+              label="审核状态"
+              align="center"
+              prop="audit"
+              :show-overflow-tooltip="true"
+          />
+          <el-table-column
+              label="来源"
+              align="center"
+              prop="resource"
+              :show-overflow-tooltip="true"
+          />
+          <el-table-column
+              label="类别"
+              align="center"
+              prop="type"
+              :show-overflow-tooltip="true"
+          />
+          <el-table-column
+              label="试题版本"
+              align="center"
+              prop="version"
+              :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="创建时间"
+            align="center"
+            prop="createTime"
+            :formatter="dateFormatter"
+            width="180"
+          />
+          <el-table-column label="操作" align="center" width="160">
+            <template #default="scope">
+              <div class="flex items-center justify-center">
+                <el-button
+                  type="primary"
+                  link
+                  @click="openForm('update', scope.row.id)"
+                >
+                  <Icon icon="ep:edit" />修改
+                </el-button>
+                <el-dropdown
+                  @command="(command) => handleCommand(command, scope.row)"
+                >
+                  <el-button type="primary" link><Icon icon="ep:d-arrow-right" /> 更多</el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item
+                        command="handleDelete"
+                        v-if="checkPermi(['system:user:delete'])"
+                      >
+                        <Icon icon="ep:delete" />删除
+                      </el-dropdown-item>
+                      <el-dropdown-item
+                        command="handleResetPwd"
+                      >
+                        <Icon icon="ep:key" />重置密码
+                      </el-dropdown-item>
+                      <el-dropdown-item
+                        command="handleRole"
+                      >
+                        <Icon icon="ep:circle-check" />分配角色
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </ContentWrap>
+    </el-col>
+  </el-row>
+
+  <!-- 添加或修改选择题 -->
+  <ChoiceForm ref="formRef" @success="getList" />
+  <!-- 添加或修改C语言程序设计 -->
+  <CdesignForm ref="cformRef" @success="getList" />
+  <!-- 用户导入对话框 -->
+  <UserImportForm ref="importFormRef" @success="getList" />
+  <!-- 分配角色 -->
+  <UserAssignRoleForm ref="assignRoleFormRef" @success="getList" />
+</template>
+<script lang="ts" setup>
+import { checkPermi } from '@/utils/permission'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { CommonStatusEnum } from '@/utils/constants'
+import * as UserApi from '@/api/system/user'
+import * as QuestionApi from '@/api/paper/question'
+
+import ChoiceForm from './ChoiceForm.vue'
+import CdesignForm from './CdesignForm.vue'
+
+import UserImportForm from './UserImportForm.vue'
+import UserAssignRoleForm from './UserAssignRoleForm.vue'
+import DeptTree from './DeptTree.vue'
+import SpecialtyTree from './SpecialtyTree.vue'
+import {handleTree} from "@/utils/tree";
+
+defineOptions({ name: 'SystemUser' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数
+const queryParams = reactive({
+  specialtyName: "",
+  courseName: "",
+  subjectName: "",
+  pageNo: 1,
+  pageSize: 10,
+})
+const queryFormRef = ref() // 搜索的表单
+const specialtyList = ref<Tree[]>([]) // 树形结构
+/** 获得部门树 */
+const getTree = async () => {
+  const res = await UserApi.getSpecialtyByUserId()
+  specialtyList.value = []
+  specialtyList.value.push(...handleTree(res))
+}
+/** 查询列表 */
+const getList = async () => {
+  await getTree();
+  loading.value = true
+  try {
+    const data = await QuestionApi.getQuestionList(queryParams);
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+
+/** 处理部门被点击 */
+const handleDeptNodeClick = async (row) => {
+  // queryParams.deptId = row.id
+  await getList()
+}
+
+/** 处理专业被点击 */
+const handleSpecialtyNodeClick = async (row) => {
+  // 判断点击的层级结构，进行入参
+  if (!row.children != null){
+    // 说明是题型
+    queryParams.courseName = row.name
+  }
+  const specArr = findNamePathFromTreeList(specialtyList.value, row.id)
+  // 判断长度赋值
+  if (specArr.length == 1) {
+    // 说明是题型
+    queryParams.specialtyName = specArr[0]
+  }
+  if (specArr.length == 2) {
+    queryParams.specialtyName = specArr[0]
+    queryParams.courseName = specArr[1]
+  }
+  if (specArr.length == 3) {
+    queryParams.specialtyName = specArr[0]
+    queryParams.courseName = specArr[1]
+    queryParams.subjectName = specArr[2]
+  }
+  await getList()
+}
+
+interface Tree {
+  id: number
+  name: string
+  children?: Tree[] | any[]
+}
+/**
+ * 递归查找路径
+ */
+/** 递归查找路径（根据 ID 返回 name 路径） */
+const findNamePath = (
+    node: Tree,
+    targetId: number,
+    path: string[] = []
+): string[] | null => {
+  const currentPath = [...path, node.name]
+  if (node.id === targetId) {
+    return currentPath
+  }
+  if (node.children && node.children.length > 0) {
+    for (const child of node.children) {
+      const result = findNamePath(child, targetId, currentPath)
+      if (result) return result
+    }
+  }
+  return null
+}
+/** 入口函数：支持根节点是数组的情况 */
+const findNamePathFromTreeList = (treeList: Tree[], targetId: number): string[] | null => {
+  for (const tree of treeList) {
+    const result = findNamePath(tree, targetId)
+    if (result) return result
+  }
+  return null
+}
+/** 添加/修改操作 */
+const formRef = ref()
+const cformRef = ref()
+const openForm = (type: string, id?: number) => {
+  cformRef.value.open(type, id)
+}
+
+/** 用户导入 */
+const importFormRef = ref()
+
+/** 修改用户状态 */
+const handleStatusChange = async (row: UserApi.UserVO) => {
+  try {
+    // 修改状态的二次确认
+    const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
+    await message.confirm('确认要"' + text + '""' + row.username + '"用户吗?')
+    // 发起修改状态
+    await UserApi.updateUserStatus(row.id, row.status)
+    // 刷新列表
+    await getList()
+  } catch {
+    // 取消后，进行恢复按钮
+    row.status =
+      row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
+  }
+}
+
+/** 导出按钮操作 */
+const exportLoading = ref(false)
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await UserApi.exportUser(queryParams)
+    download.excel(data, '用户数据.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 操作分发 */
+const handleCommand = (command: string, row: UserApi.UserVO) => {
+  switch (command) {
+    case 'handleDelete':
+      handleDelete(row.id)
+      break
+    case 'handleResetPwd':
+      handleResetPwd(row)
+      break
+    case 'handleRole':
+      handleRole(row)
+      break
+    default:
+      break
+  }
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await UserApi.deleteUser(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 重置密码 */
+const handleResetPwd = async (row: UserApi.UserVO) => {
+  try {
+    // 重置的二次确认
+    const result = await message.prompt(
+      '请输入"' + row.username + '"的新密码',
+      t('common.reminder')
+    )
+    const password = result.value
+    // 发起重置
+    await UserApi.resetUserPassword(row.id, password)
+    message.success('修改成功，新密码是：' + password)
+  } catch {}
+}
+
+/** 分配角色 */
+const assignRoleFormRef = ref()
+const handleRole = (row: UserApi.UserVO) => {
+  assignRoleFormRef.value.open(row)
+}
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
+</script>