pengchen-exam-vue/src/views/paper/question/ChoiceForm.vue

<template>
  <div class="edit-dialog">
    <Dialog v-model="dialogVisible" :title="dialogTitle" width="85%" top="10vh">
      <el-scrollbar>
        <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 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
                      :data="keywordList"
                      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="编辑关键字"
                      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
                      :data="mediumList"
                      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">
                  <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
                      :data="documentList"
                      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'
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 annexList = ref([])
// 保留选项的值
const optionsContent = reactive({})

// 关键字

const keywordList = ref([] as any)
const multipleKeywordSelection = ref([] as any)
const handleKeywordSelectionChange = (val: any) => {
  multipleKeywordSelection.value = val
}
const keyVisible = ref(false)
const keyEditType = ref('')

const keyWord = ref([null])

const editKeyword = (key) => {
  keyEditType.value = key
  keyVisible.value = true
}
const keyDialogClose = () => {
  keyVisible.value = false
}
const confirmKeyDialogVisible = () => {
  if (keyEditType.value === 'create') {
    keywordList.value.push({
      keyword: keyWord.value
    })
  }

  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 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>