【新增】试题单选题弹窗代码迁移

src/views/paper/question/ChoiceForm.vue

@@ -1,10 +1,7 @@
 <template>
-  <Dialog
+  <div class="edit-dialog">
-          v-model="dialogVisible"
+    <Dialog v-model="dialogVisible" :title="dialogTitle" width="85%" top="10vh">
-          :title="dialogTitle"
+      <el-scrollbar>
-          width="70%"
-          top="10vh">
-    <el-scrollbar height="700px">
         <div class="main">
           <el-form
             ref="formRef"
@@ -45,7 +42,6 @@
               </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">
@@ -57,11 +53,7 @@
               </el-tabs>
             </div>
             <div class="edit-right bottom-common">
-          <el-tabs
+              <el-tabs v-model="rightActiveName" class="demo-tabs" @tab-click="rightHandleClick">
-              v-model="rightActiveName"
-              class="demo-tabs"
-              @tab-click="rightHandleClick"
-          >
                 <el-tab-pane class="answer" label="试题答案" name="answer">
                   <div class="block">
                     <div class="tip">
@@ -82,11 +74,7 @@
                       </el-select>
                     </div>
                     <el-radio-group v-model="radio">
-                  <div
+                      <div class="options" v-for="item in optionNumVal" :key="item">
-                      class="options"
-                      v-for="item in optionNumVal"
-                      :key="item"
-                  >
                         <div class="content">
                           <el-radio :label="String.fromCharCode(64 + item)">
                             {{ String.fromCharCode(64 + item) }}
@@ -119,15 +107,9 @@
                         </span>
                         <template #dropdown>
                           <el-dropdown-menu>
-                        <el-dropdown-item @click="editKeyword('create')"
+                            <el-dropdown-item @click="editKeyword('create')">新建</el-dropdown-item>
-                        >新建</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('create')"
-                        >编辑</el-dropdown-item
-                        >
-                        <el-dropdown-item @click="editKeyword('delete')"
-                        >删除</el-dropdown-item
-                        >
                             <el-dropdown-item @click="editKeyword('deleteall')"
                               >删除全部</el-dropdown-item
                             >
@@ -138,15 +120,14 @@
                   </template>
                   <div class="block">
                     <el-table
-                    ref="keywordTableRef"
+                      :data="keywordList"
-                    row-key="id"
-                    :columns="keywordColumns"
-                    :datasource="keywordList"
-                    :toolbar="false"
-                    :show-overflow-tooltip="true"
-                    highlight-current-row
                       style="width: 100%"
-                />
+                      @selection-change="handleKeywordSelectionChange"
+                    >
+                      <el-table-column type="index" width="50" />
+                      <el-table-column type="selection" width="55" />
+                      <el-table-column prop="keyword" label="关键字" />
+                    </el-table>
                     <el-dialog
                       v-model="keyVisible"
                       title="编辑关键字"
@@ -156,17 +137,10 @@
                       :close-on-press-escape="false"
                     >
                       <div class="main" style="width: 100%; height: 100%">
-                    <el-input
+                        <el-input v-model="keyWord" placeholder="请输入关键字" size="large" />
-                        v-model="keyWord"
-                        placeholder="请输入关键字"
-                        size="large"
-                    />
                         <div class="dialog-footer">
                           <el-button @click="keyDialogClose">取消</el-button>
-                      <el-button
+                          <el-button type="primary" @click="confirmKeyDialogVisible">
-                          type="primary"
-                          @click="confirmKeyDialogVisible"
-                      >
                             确定
                           </el-button>
                         </div>
@@ -204,15 +178,17 @@
                   </template>
                   <div class="block">
                     <el-table
-                    ref="mediumTableRef"
+                      :data="mediumList"
-                    row-key="id"
-                    :columns="mediumColumns"
-                    :datasource="mediumList"
-                    :toolbar="false"
-                    :show-overflow-tooltip="true"
-                    highlight-current-row
                       style="width: 100%"
-                />
+                      @selection-change="handleMediumSelectionChange"
+                    >
+                      <el-table-column type="index" width="50" />
+                      <el-table-column type="selection" width="55" />
+                      <el-table-column prop="type" label="媒体类型" width="80" />
+                      <el-table-column prop="title" label="标题" />
+                      <el-table-column prop="displayIndex" label="显示序号" />
+                      <el-table-column prop="size" label="大小" />
+                    </el-table>
                   </div>
                 </el-tab-pane>
                 <el-tab-pane name="annex">
@@ -237,26 +213,27 @@
                   </template>
                   <div class="block">
                     <el-table
-                    ref="annexTableRef"
+                      :data="documentList"
-                    row-key="id"
-                    :columns="annexColumns"
-                    :datasource="annexList"
-                    :toolbar="false"
-                    :show-overflow-tooltip="true"
-                    highlight-current-row
                       style="width: 100%"
-                />
+                      @selection-change="handleDocumentSelectionChange"
+                    >
+                      <el-table-column type="index" width="50" />
+                      <el-table-column prop="type" label="附件" />
+                      <el-table-column prop="size" label="大小" width="80" />
+                    </el-table>
                   </div>
                 </el-tab-pane>
               </el-tabs>
             </div>
           </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>
+  </div>
 </template>
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
@@ -292,123 +269,63 @@ const formRef = ref() // 表单 Ref
 const deptList = ref<Tree[]>([]) // 树形结构
 const postList = ref([] as PostApi.PostVO[]) // 岗位列表
 // 左侧试题描述
-const leftActiveName = ref('desc');
+const leftActiveName = ref('desc')
 // 右侧tab
-const rightActiveName = ref('answer');
+const rightActiveName = ref('answer')
 const rightHandleClick = (tab, e) => {
-  rightActiveName.value = tab.paneName.value;
+  rightActiveName.value = tab.paneName.value
-};
+}
-const optionNumVal = ref(4);
+const optionNumVal = ref(4)
-const optionNumber = ref(26);
+const optionNumber = ref(26)
-const radio = ref('A');
+const radio = ref('A')
-const keyEditType = ref('');
+const annexList = ref([])
-const keyVisible = ref(false);
-const keyWord = ref([null]);
-const annexList = ref([]);
-const fileList = [];
-const mediumList = ref([]);
-
-const keywordList = ref([]);
 // 保留选项的值
-const optionsContent = reactive({});
+const optionsContent = reactive({})
-const editKeyword = (key) => {
-  keyEditType.value = key;
-  keyVisible.value = true;
-};
 
 // 关键字
-const keywordColumns = computed(() => {
+
-  return [
+const keywordList = ref([] as any)
-    {
+const multipleKeywordSelection = ref([] as any)
-      type: 'index',
+const handleKeywordSelectionChange = (val: any) => {
-      columnKey: 'index',
+  multipleKeywordSelection.value = val
-      width: 55,
-      align: 'center',
-      showOverflowTooltip: false
-    },
-    {
-      prop: 'keyword',
-      label: '关键字',
-      align: 'left',
-      showOverflowTooltip: true
 }
-  ];
+const keyVisible = ref(false)
-});
+const keyEditType = ref('')
-// 试题附件
+
-const annexColumns = computed(() => {
+const keyWord = ref([null])
-  return [
+
-    {
+const editKeyword = (key) => {
-      type: 'index',
+  keyEditType.value = key
-      columnKey: 'index',
+  keyVisible.value = true
-      width: 55,
-      align: 'center',
-      showOverflowTooltip: false
-    },
-    {
-      prop: 'name',
-      label: '附件',
-      align: 'left',
-      showOverflowTooltip: true
-    },
-    {
-      prop: 'size',
-      label: '大小',
-      align: 'center',
-      width: 55,
-      showOverflowTooltip: false
 }
-  ];
+const keyDialogClose = () => {
-});
+  keyVisible.value = 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;
+  keyVisible.value = false
-};
+}
+
+// 媒体文件
+const mediumList = ref([] as any)
+const multipleMediumSelection = ref([] as any)
+const handleMediumSelectionChange = (val: any) => {
+  multipleMediumSelection.value = val
+}
+const fileList = []
+
+// 媒体文件
+const documentList = ref([] as any)
+const multipleDocumentSelection = ref([] as any)
+const handleDocumentSelectionChange = (val: any) => {
+  multipleDocumentSelection.value = val
+}
 
-const keyDialogClose = () => {
-  keyVisible.value = false;
-};
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
@@ -566,8 +483,7 @@ const resetForm = () => {
                 .setting_icon {
                   width: 16px;
                   height: 16px;
-                  background: url('@/assets/icon/setting_blue.png') no-repeat
+                  background: url('@/assets/icon/setting_blue.png') no-repeat center;
-                  center;
                   background-size: 100%;
                   margin-left: 3px;
                   display: none;

src/views/paper/question/index.vue

@@ -297,7 +297,10 @@ const handleDeptNodeClick = async (row) => {
 }
 
 /** 处理专业被点击 */
-const handleSpecialtyNodeClick = async (row) => {
+const chooseQuestionType = ref('');
+const handleSpecialtyNodeClick = async (row: any) => {
+  chooseQuestionType.value = row.name;
+  
   // 判断点击的层级结构，进行入参
   if (!row.children != null){
     // 说明是题型
@@ -359,8 +362,12 @@ const findNamePathFromTreeList = (treeList: Tree[], targetId: number): string[]
 const formRef = ref()
 const cformRef = ref()
 const openForm = (type: string, id?: number) => {
+  if (chooseQuestionType.value.includes("选择题")){
+    formRef.value.open(type, id)
+  } else {
     cformRef.value.open(type, id)
   }
+}
 
 /** 用户导入 */
 const importFormRef = ref()