editor.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667
  1. <template>
  2. <el-dialog
  3. title="编辑问题"
  4. v-model="showQuestionDialog"
  5. width="500px"
  6. :close-on-click-modal="false"
  7. class="question-dialog"
  8. @close="resetForm"
  9. >
  10. <div class="question-form">
  11. <div class="form-item">
  12. <div class="form-label">
  13. 题目内容<span class="required">*</span>
  14. </div>
  15. <el-input
  16. v-model="questionForm.content"
  17. type="textarea"
  18. rows="4"
  19. placeholder="请描述一次你如何在紧迫的时间内完成一个复杂的后端开发任务的经历"
  20. maxlength="300"
  21. show-word-limit
  22. />
  23. </div>
  24. <div class="form-item">
  25. <div class="form-label">胜任力标签</div>
  26. <el-select
  27. v-model="competencyTagsValue"
  28. placeholder="请选择胜任力标签"
  29. class="full-width"
  30. multiple
  31. >
  32. <el-option
  33. v-for="tag in competencyTagOptions"
  34. :key="tag.id"
  35. :label="tag.name"
  36. :value="tag.id"
  37. />
  38. </el-select>
  39. <div class="form-tip">选择胜任力标签和胜任力标签,可多选</div>
  40. </div>
  41. <div class="form-item">
  42. <div class="form-label">
  43. 胜任力配置
  44. </div>
  45. <div class="competency-config">
  46. <div class="config-row">
  47. <span class="config-label">标签</span>
  48. <span class="config-label">权重</span>
  49. </div>
  50. <div class="config-row" v-for="(tag, index) in questionForm.competency_tags" :key="tag.id">
  51. <span class="tag-name">{{ tag.name }}</span>
  52. <el-input-number
  53. v-model="tag.weight"
  54. :min="0"
  55. :max="100"
  56. :step="1"
  57. controls-position="right"
  58. @change="(value: number) => handleWeightChange(index, value)"
  59. /> %
  60. </div>
  61. </div>
  62. <div class="form-tip">
  63. 配置各个胜任力标签的权重,总和需要100%
  64. <span class="weight-sum" :class="{ 'weight-error': getTotalWeight() !== 100 }">
  65. (当前总计: {{ getTotalWeight() }}%)
  66. </span>
  67. <br/>
  68. <el-icon style="color: #409eff; margin-right: 4px; margin-top: 4px;"><InfoFilled /></el-icon>
  69. <span style="color: #909399; font-size: 11px;">
  70. 修改任意权重时,其他权重会自动按比例调整以保持总和为100%。点击"平均分配"可快速平均分配所有权重。
  71. </span>
  72. </div>
  73. </div>
  74. <div class="form-item">
  75. <div class="form-label">题目形式</div>
  76. <el-select
  77. v-model="questionForm.type"
  78. placeholder="开放问题"
  79. class="full-width"
  80. @change="handleQuestionTypeChange"
  81. >
  82. <el-option label="开放问题" value="open" />
  83. <el-option label="单选题" value="single" />
  84. <el-option label="多选题" value="multiple" />
  85. <el-option label="填空题" value="fill" />
  86. <el-option label="自言语" value="self" />
  87. </el-select>
  88. <div class="form-tip">选择题目的形式:开放问题、单选题、多选题、填空题、自言语</div>
  89. </div>
  90. <div class="form-item">
  91. <div class="form-label">适用职位</div>
  92. <el-select
  93. v-model="questionForm.position"
  94. placeholder="请选择适用职位类型"
  95. class="full-width"
  96. multiple
  97. >
  98. <el-option
  99. v-for="pos in positionOptions"
  100. :key="pos.value"
  101. :label="pos.label"
  102. :value="pos.value"
  103. />
  104. </el-select>
  105. <div class="form-tip">选择题目适用的职位类型,可多选</div>
  106. </div>
  107. <div class="form-item" v-if="questionForm.question_form === 1 || questionForm.question_form === 2">
  108. <div class="form-label">选项</div>
  109. <div>
  110. <div class="option-header" style="display: flex; margin-bottom: 10px; font-weight: bold;">
  111. <span style="flex: 1;">选项内容</span>
  112. <span style="width: 80px; text-align: center;">是否正确</span>
  113. </div>
  114. <div
  115. v-for="(option, index) in questionForm.options"
  116. :key="index"
  117. class="option-item"
  118. style="display: flex; align-items: center; margin-bottom: 10px;"
  119. >
  120. <el-input
  121. v-model="option.text"
  122. placeholder="请输入选项内容"
  123. style="flex: 1; margin-right: 10px;"
  124. />
  125. <el-tooltip
  126. content="设置为正确答案"
  127. placement="top"
  128. effect="light"
  129. >
  130. <div
  131. @click="() => handleOptionCorrectChange(index)"
  132. style="cursor: pointer; width: 80px; text-align: center;"
  133. >
  134. <template v-if="questionForm.question_form === 1">
  135. <el-radio
  136. v-model="option.is_correct"
  137. :label="true"
  138. />
  139. </template>
  140. <template v-else>
  141. <el-checkbox
  142. v-model="option.is_correct"
  143. />
  144. </template>
  145. </div>
  146. </el-tooltip>
  147. </div>
  148. <div style="display: flex; justify-content: space-between; margin-top: 10px;">
  149. <el-button
  150. type="primary"
  151. @click="addOption"
  152. >
  153. 添加选项
  154. </el-button>
  155. <el-button
  156. v-if="questionForm.options && questionForm.options.length > 2"
  157. type="danger"
  158. @click="removeLastOption"
  159. >
  160. 删除最后一项
  161. </el-button>
  162. </div>
  163. </div>
  164. <div class="form-tip">添加选项并设置正确答案,单选题只能有一个正确答案,多选题可以有多个正确答案</div>
  165. </div>
  166. <div class="form-item">
  167. <div class="form-label">分类</div>
  168. <el-select
  169. v-model="questionForm.category"
  170. placeholder="请选择题目分类"
  171. class="full-width"
  172. >
  173. <el-option
  174. v-for="cat in categoryOptions"
  175. :key="cat.value"
  176. :label="cat.label"
  177. :value="cat.value"
  178. />
  179. </el-select>
  180. <div class="form-tip">选择题目所属分类</div>
  181. </div>
  182. <div class="form-item">
  183. <div class="form-label">标签</div>
  184. <el-select
  185. v-model="questionForm.tags"
  186. placeholder="请选择标签"
  187. class="full-width"
  188. multiple
  189. >
  190. <el-option
  191. v-for="tag in tagOptions"
  192. :key="tag.value"
  193. :label="tag.label"
  194. :value="tag.value"
  195. />
  196. </el-select>
  197. <div class="form-tip">选择题目相关标签,可多选</div>
  198. </div>
  199. <div class="form-item" v-if="questionForm.question_form === 1">
  200. <div class="form-label">是否为红线题</div>
  201. <el-select v-model="questionForm.is_required_correct" placeholder="请选择是否为红线问题" style="width: 100%;">
  202. <el-option label="否" :value="false" />
  203. <el-option label="是" :value="true" />
  204. </el-select>
  205. </div>
  206. <div class="form-item">
  207. <div class="form-label">建议时长(秒)</div>
  208. <el-input-number
  209. v-model="questionForm.suggestedDuration"
  210. :min="0"
  211. :step="1"
  212. controls-position="right"
  213. placeholder="请输入建议回答时长"
  214. class="full-width"
  215. />
  216. <div class="form-tip">建议回答题目的时长,单位为秒</div>
  217. </div>
  218. <div class="form-item">
  219. <div class="form-label">评价标准</div>
  220. <el-input
  221. v-model="questionForm.scoring_reference"
  222. type="textarea"
  223. rows="4"
  224. placeholder="评分标准说明,例如:【团队协作能力】1.优秀:xxxxxx。2.xxxx。3.一般:xxxxx。"
  225. class="full-width"
  226. />
  227. <div class="form-tip">评分标准说明,例如:【团队协作能力】1.优秀:xxxxxx。2.xxxx。3.一般:xxxxx。</div>
  228. </div>
  229. </div>
  230. <template #footer>
  231. <span class="dialog-footer">
  232. <el-button @click="cancelAddQuestion">取消</el-button>
  233. <el-button type="primary" @click="confirmAddQuestion">确认</el-button>
  234. </span>
  235. </template>
  236. </el-dialog>
  237. </template>
  238. <script lang="ts" setup>
  239. import { ref, reactive, watch, onMounted } from 'vue'
  240. import { InfoFilled } from '@element-plus/icons-vue'
  241. import { ElMessage } from 'element-plus';
  242. import { Session } from '/@/utils/storage';
  243. import { getBaseURL } from '/@/utils/baseUrl';
  244. import * as api from '../../list/api';
  245. // 添加 props 定义
  246. const props = defineProps({
  247. questionId: {
  248. type: [String, Number],
  249. default: ''
  250. }
  251. });
  252. // 类型定义
  253. interface CompetencyTag {
  254. id: number
  255. name: string
  256. weight: number
  257. }
  258. interface QuestionOption {
  259. text: string
  260. is_correct: boolean
  261. sort: number
  262. }
  263. interface QuestionForm {
  264. content: string
  265. type: string
  266. position: string[]
  267. category: string
  268. tags: string[]
  269. competency_tags: CompetencyTag[]
  270. options: QuestionOption[]
  271. question_form: number
  272. suggestedDuration: number
  273. scoring_reference: string
  274. is_required_correct: Boolean
  275. }
  276. // 对话框显示状态
  277. const showQuestionDialog = ref(false)
  278. // 监听对话框显示状态
  279. watch(() => showQuestionDialog.value, (newVal) => {
  280. if (newVal && props.questionId) {
  281. fetchQuestionDetail(props.questionId);
  282. }
  283. });
  284. // 获取问题详情的函数
  285. const fetchQuestionDetail = async (id: string | number) => {
  286. if (!id) return;
  287. try {
  288. const response = await api.GetObj({ question_id: id });
  289. if (response?.code === 2000 && response.data) {
  290. const questionData = response.data;
  291. // 更新表单数据
  292. questionForm.content = questionData.question || '';
  293. questionForm.type = questionData.question_form === 1 ? 'single' :
  294. questionData.question_form === 2 ? 'multiple' : 'open';
  295. questionForm.position = questionData.position_types || [];
  296. questionForm.category = questionData.category_id || '';
  297. questionForm.tags = questionData.tags || [];
  298. const competencyTags = questionData.competency_tags || [];
  299. questionForm.competency_tags = competencyTags;
  300. questionForm.options = questionData.options || [];
  301. questionForm.question_form = questionData.question_form;
  302. questionForm.suggestedDuration = questionData.recommended_duration || 0;
  303. questionForm.scoring_reference = questionData.scoring_reference || '';
  304. questionForm.is_required_correct=questionData.is_required_correct
  305. // 更新胜任力标签选择
  306. competencyTagsValue.value = competencyTags.map((tag: any) => tag.id);
  307. } else {
  308. ElMessage.warning('未找到问题详情数据');
  309. }
  310. } catch (error: any) {
  311. console.error('获取问题详情失败:', error);
  312. ElMessage.error(error.message || '获取问题详情失败');
  313. }
  314. };
  315. // 监听 questionId 变化
  316. watch(() => props.questionId, (newVal) => {
  317. console.log(newVal)
  318. fetchQuestionDetail(newVal);
  319. }, { immediate: true });
  320. // 加载初始数据
  321. onMounted(async () => {
  322. try {
  323. // 加载胜任力标签选项
  324. const competencyResponse = await api.GetCompetencyList({page:1,limit:300})
  325. console.log(competencyResponse)
  326. if (competencyResponse && competencyResponse.code === 2000 && competencyResponse.data) {
  327. competencyTagOptions.value = competencyResponse.data.items.map((item: any) => ({
  328. id: item.id,
  329. name: item.name,
  330. weight: 0
  331. }));
  332. }
  333. // 加载职位选项
  334. const positionResponse = await api.GetPositionList({page:1,limit:50,tenant_id:Session.get('tenant_id')});
  335. if (positionResponse && positionResponse.code === 2000 && positionResponse.data) {
  336. positionOptions.value = positionResponse.data.map((item: any) => ({
  337. value: item.id,
  338. label: item.title
  339. }));
  340. }
  341. // 加载分类选项
  342. const categoryResponse = await api.GetcategoryList({page:1, limit:50, tenant_id:Session.get('tenant_id')})
  343. if (categoryResponse && categoryResponse.code === 2000 && categoryResponse.data.items) {
  344. categoryOptions.value = categoryResponse.data.items.map((item: any) => ({
  345. value: item.id,
  346. label: item.name
  347. }));
  348. }
  349. // 加载标签选项
  350. const tagResponse =await api.GetTagList({page:1, limit:50, tenant_id:Session.get('tenant_id')});
  351. if (tagResponse && tagResponse.code === 2000 && tagResponse.data.items) {
  352. tagOptions.value = tagResponse.data.items.map((item: any) => ({
  353. value: item.id,
  354. label: item.name
  355. }));
  356. }
  357. } catch (error) {
  358. console.error('加载选项数据失败:', error);
  359. ElMessage.error('加载选项数据失败');
  360. }
  361. });
  362. // 表单数据
  363. const questionForm = reactive<QuestionForm>({
  364. content: '',
  365. type: 'open',
  366. position: [],
  367. category: '',
  368. tags: [],
  369. competency_tags: [],
  370. options: [],
  371. question_form: 0,
  372. suggestedDuration: 0,
  373. scoring_reference: '',
  374. is_required_correct:false
  375. })
  376. // 胜任力标签相关
  377. const competencyTagsValue = ref<number[]>([])
  378. const competencyTagOptions = ref<CompetencyTag[]>([])
  379. // 监听胜任力标签选择变化
  380. watch(() => competencyTagsValue.value, (newVal) => {
  381. if (!newVal) return;
  382. // 根据选中的ID更新competency_tags
  383. questionForm.competency_tags = newVal.map(id => {
  384. const tag = competencyTagOptions.value.find(t => t.id === id);
  385. return {
  386. id: tag?.id || 0,
  387. name: tag?.name || '',
  388. weight: tag?.weight || 0
  389. };
  390. });
  391. // 如果有标签,自动平均分配权重
  392. if (questionForm.competency_tags.length > 0) {
  393. const averageWeight = Math.floor(100 / questionForm.competency_tags.length);
  394. const remainder = 100 - (averageWeight * questionForm.competency_tags.length);
  395. questionForm.competency_tags.forEach((tag, index) => {
  396. tag.weight = averageWeight + (index === 0 ? remainder : 0);
  397. });
  398. }
  399. });
  400. // 职位选项
  401. interface PositionOption {
  402. value: string
  403. label: string
  404. }
  405. const positionOptions = ref<PositionOption[]>([])
  406. // 分类选项
  407. interface CategoryOption {
  408. value: string
  409. label: string
  410. }
  411. const categoryOptions = ref<CategoryOption[]>([])
  412. // 标签选项
  413. interface TagOption {
  414. value: string
  415. label: string
  416. }
  417. const tagOptions = ref<TagOption[]>([])
  418. // 方法定义
  419. const getTotalWeight = () => {
  420. return questionForm.competency_tags.reduce((sum, tag) => sum + (tag.weight || 0), 0)
  421. }
  422. const handleWeightChange = (index: number, value: number): void => {
  423. const tags = questionForm.competency_tags;
  424. if (!tags || tags.length <= 1) return;
  425. const oldWeight = tags[index].weight;
  426. const weightDiff = value - oldWeight;
  427. // 如果权重差为0,不需要调整
  428. if (weightDiff === 0) return;
  429. // 计算其他标签的总权重
  430. const otherTotalWeight = tags.reduce((sum, tag, i) => i !== index ? sum + tag.weight : sum, 0);
  431. // 如果其他标签总权重为0,平均分配剩余权重
  432. if (otherTotalWeight === 0) {
  433. const remainingWeight = 100 - value;
  434. const averageWeight = Math.floor(remainingWeight / (tags.length - 1));
  435. const remainder = remainingWeight - (averageWeight * (tags.length - 1));
  436. tags.forEach((tag, i) => {
  437. if (i !== index) {
  438. tag.weight = averageWeight + (i === 0 ? remainder : 0);
  439. }
  440. });
  441. } else {
  442. // 按比例调整其他标签的权重
  443. tags.forEach((tag, i) => {
  444. if (i !== index) {
  445. const proportion = tag.weight / otherTotalWeight;
  446. tag.weight = Math.max(0, Math.round(tag.weight - (weightDiff * proportion)));
  447. }
  448. });
  449. }
  450. }
  451. const handleQuestionTypeChange = (value: string) => {
  452. questionForm.question_form = value === 'single' ? 1 : value === 'multiple' ? 2 : 0
  453. if (value === 'single' || value === 'multiple') {
  454. if (!questionForm.options || questionForm.options.length === 0) {
  455. questionForm.options = [
  456. { text: '', is_correct: false, sort: 1 },
  457. { text: '', is_correct: false, sort: 2 }
  458. ]
  459. }
  460. } else {
  461. questionForm.options = []
  462. }
  463. }
  464. const handleOptionCorrectChange = (index: number) => {
  465. if (questionForm.question_form === 1) {
  466. // 单选题:只能有一个正确答案
  467. questionForm.options.forEach((item, idx) => {
  468. item.is_correct = (idx === index)
  469. })
  470. }
  471. // 多选题不需要特殊处理,直接使用checkbox的值
  472. }
  473. const addOption = () => {
  474. const sort = questionForm.options.length > 0 ?
  475. Math.max(...questionForm.options.map(o => o.sort || 0)) + 1 : 1
  476. questionForm.options.push({ text: '', is_correct: false, sort })
  477. }
  478. const removeLastOption = () => {
  479. if (questionForm.options && questionForm.options.length > 2) {
  480. questionForm.options.pop()
  481. }
  482. }
  483. // 重置表单数据
  484. const resetForm = () => {
  485. questionForm.content = ''
  486. questionForm.type = 'open'
  487. questionForm.position = []
  488. questionForm.category = ''
  489. questionForm.tags = []
  490. questionForm.competency_tags = []
  491. questionForm.options = []
  492. questionForm.suggestedDuration = 0
  493. questionForm.scoring_reference = ''
  494. questionForm.is_required_correct=false
  495. competencyTagsValue.value = []
  496. }
  497. const cancelAddQuestion = () => {
  498. resetForm()
  499. showQuestionDialog.value = false
  500. }
  501. // 修改确认添加/编辑方法
  502. const confirmAddQuestion = async () => {
  503. try {
  504. // 构建请求数据
  505. const requestData = {
  506. id: props.questionId,
  507. question: questionForm.content,
  508. question_form: questionForm.question_form,
  509. position_types: questionForm.position,
  510. category_id: questionForm.category,
  511. tags: questionForm.tags,
  512. competency_tags: questionForm.competency_tags,
  513. options: questionForm.options,
  514. recommended_duration: questionForm.suggestedDuration,
  515. scoring_reference: questionForm.scoring_reference,
  516. is_required_correct:questionForm.is_required_correct
  517. };
  518. /* console.log(questionForm)
  519. return */
  520. // 发送请求
  521. try {
  522. const response = await api.UpdateObj(requestData);
  523. if (response && response.code === 2000) {
  524. ElMessage.success(props.questionId ? '编辑成功' : '添加成功');
  525. showQuestionDialog.value = false;
  526. // 触发刷新事件
  527. window.dispatchEvent(new CustomEvent('refreshQuestionList'));
  528. } else {
  529. throw new Error(response.msg || '保存失败');
  530. }
  531. } catch (error: any) {
  532. throw new Error(error.message || '保存失败');
  533. }
  534. } catch (error: any) {
  535. console.error('保存问题失败:', error);
  536. ElMessage.error(error.message || '保存失败');
  537. }
  538. };
  539. // 导出方法供父组件使用
  540. defineExpose({
  541. showQuestionDialog
  542. })
  543. </script>
  544. <style scoped>
  545. .question-dialog {
  546. .question-form {
  547. max-height: 60vh;
  548. overflow-y: auto;
  549. padding: 0 20px;
  550. }
  551. .form-item {
  552. margin-bottom: 20px;
  553. }
  554. .form-label {
  555. margin-bottom: 8px;
  556. font-weight: bold;
  557. }
  558. .form-tip {
  559. margin-top: 4px;
  560. color: #909399;
  561. font-size: 12px;
  562. }
  563. .required {
  564. color: #f56c6c;
  565. margin-left: 4px;
  566. }
  567. .full-width {
  568. width: 100%;
  569. }
  570. .competency-config {
  571. border: 1px solid #dcdfe6;
  572. border-radius: 4px;
  573. padding: 10px;
  574. margin-bottom: 8px;
  575. }
  576. .config-row {
  577. display: flex;
  578. align-items: center;
  579. justify-content: space-between;
  580. margin-bottom: 10px;
  581. &:last-child {
  582. margin-bottom: 0;
  583. }
  584. }
  585. .config-label {
  586. width: 105px;
  587. margin-right: 10px;
  588. }
  589. .tag-name {
  590. flex: 1;
  591. margin-right: 10px;
  592. }
  593. .weight-sum {
  594. &.weight-error {
  595. color: #f56c6c;
  596. }
  597. }
  598. }
  599. </style>