<template>
|
<div>
|
<el-card style="margin: 10px;" class="affix-container">
|
<div>
|
<div style="display: flex;justify-content: space-between">
|
<div>
|
<b style="margin-right: 20px">
|
{{ $t('menu.QuestionMaster') }}
|
</b>
|
<el-button link size="default" type="primary" :icon="icon.CirclePlus" @click="showAddView">
|
{{ $t('button.New') }}
|
</el-button>
|
</div>
|
<div>
|
<el-popover placement="right" trigger="click" width="auto">
|
<template #reference>
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
style="width: 230px; margin-right: 10px;" @change="subjectChange"
|
v-model="searchValue.subjectname"
|
:placeholder="$t('label.Subject')">
|
</el-input>
|
</template>
|
<el-tree :data="subjects" :props="defaultProps"
|
accordion
|
@node-click="handleSubjectSelectClick"></el-tree>
|
</el-popover>
|
<el-button :icon="icon.Search" type="primary" size="default" @click="SearchData"
|
:disabled="showAdvanceSearchView">
|
{{ $t('button.Search') }}
|
</el-button>
|
<el-button type="warning" size="default"
|
:icon="showAdvanceSearchView ? icon.CaretTop : icon.CaretBottom"
|
@click="showAdvanceSearchView = !showAdvanceSearchView">
|
{{ $t('button.AdvancedSearch') }}
|
</el-button>
|
</div>
|
</div>
|
<transition name="slide-fade">
|
<div v-show="showAdvanceSearchView" class="advanced-search-box">
|
<el-form label-width="120px">
|
<el-row :style="{ margin: '10px 0px 0px 0px' }">
|
<el-col :span="7">
|
<el-form-item :label="$t('label.Code')" :style="{ marginBottom: '0px' }">
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
v-model="searchValue.code" placeholder=""></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item :label="$t('label.Subject')" :style="{ marginBottom: '0px' }">
|
<el-popover placement="right" trigger="click" width="auto">
|
<template #reference>
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
style="width: 100%;" @change="subjectChange"
|
v-model="searchValue.subjectname"
|
:placeholder="$t('label.Subject')">
|
</el-input>
|
</template>
|
<el-tree :data="subjects" :props="defaultProps"
|
accordion
|
@node-click="handleSubjectSelectClick"></el-tree>
|
</el-popover>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item :label="$t('label.KnowledgePoint')" :style="{ marginBottom: '0px' }">
|
<el-popover placement="right" trigger="click" width="auto">
|
<template #reference>
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
style="width: 100%;" @change="subjectKnowledgePointChange"
|
v-model="searchValue.knowledgepointname">
|
</el-input>
|
</template>
|
<el-tree :data="knowledgepoints" :props="defaultProps"
|
accordion
|
@node-click="handleSubjectKnowledgePointSelectClick"></el-tree>
|
</el-popover>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :style="{ margin: '10px 0px 0px 0px' }">
|
<el-col :span="7">
|
<el-form-item :label="$t('label.Category')" :style="{ marginBottom: '0px' }">
|
<el-popover placement="right" trigger="click" width="auto">
|
<template #reference>
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
style="width: 100%;" @change="categoryChange"
|
v-model="searchValue.categoryname">
|
</el-input>
|
</template>
|
<el-tree :data="categories" :props="defaultProps"
|
accordion
|
@node-click="handleCategorySelectClick"></el-tree>
|
</el-popover>
|
</el-form-item>
|
</el-col>
|
<el-col :span="14">
|
<el-form-item :label="$t('label.Status')" :style="{ marginBottom: '0px' }">
|
<el-radio-group size="default" v-model="searchValue.status">
|
<el-radio :label="null">{{ $t('label.All') }}</el-radio>
|
<el-radio :label="0">{{ $t('label.Enabled') }}</el-radio>
|
<el-radio :label="1">{{ $t('label.Disabled') }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :style="{ margin: '10px 0px 0px 0px' }">
|
<el-col :span="21" :style="{ textAlign: 'right' }" :offset="0">
|
<el-button size="default" :icon="icon.Search" type="primary" @click="SearchData">
|
{{ $t('button.Search') }}
|
</el-button>
|
<el-button size="default" :icon="icon.Delete" type="info" plain
|
@click="ClearSearchData">
|
{{ $t('button.Clear') }}
|
</el-button>
|
<el-button size="default" :icon="icon.CircleClose" type="danger" plain
|
@click="showAdvanceSearchView = !showAdvanceSearchView">
|
{{ $t('button.Close') }}
|
</el-button>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</transition>
|
</div>
|
<el-divider :style="{ 'margin': '10px 0px' }"></el-divider>
|
<el-table :data="entityList" stripe border size="default" v-loading="loading"
|
element-loading-text="Loading..." element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
:header-row-style="{ height: '40px', color: 'var(--el-color-primary)', background: '#f5f4f4', }"
|
:header-cell-style="{ height: '40px', margin: '0px', padding: '0px', background: 'transparent' }"
|
:row-style="{ height: '30px', margin: '0px', padding: '0px', }"
|
:cell-style="{ height: '30px', margin: '0px', padding: '0px', }"
|
@row-dblclick="showEditView"
|
@selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="40"/>
|
<el-table-column type="index" fixed :label="$t('label.Index')" width="65"/>
|
<el-table-column prop="code" sortable align="left" :label="$t('label.Code')" width="100"/>
|
<el-table-column prop="name" align="left" :label="$t('label.Name')" width="150"/>
|
<el-table-column prop="subjectname" sortable align="left" :label="$t('label.Subject')" width="250">
|
<template #default="scope">
|
{{ scope.row.subjectcode ? `(${scope.row.subjectcode})${scope.row.subjectname}` : "" }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="knowledgepointname" sortable align="left" :label="$t('label.KnowledgePoint')"
|
width="250"/>
|
<el-table-column prop="categoryname" align="left" :label="$t('label.Category')" width="250"/>
|
<el-table-column prop="status" sortable align="left" :label="$t('label.Status')" width="150">
|
<template #default="scope">
|
<el-tag v-if="scope.row.status === 0" type="success">
|
{{ $t('label.Enabled') }}
|
</el-tag>
|
<el-tag v-else-if="scope.row.status === 1" type="danger">
|
{{ $t('label.Disabled') }}
|
</el-tag>
|
<el-tag v-else type="info">
|
{{ $t('label.Undefined') }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="score" sortable align="center" :label="$t('label.Score')" width="100"/>
|
<el-table-column prop="level" sortable align="center" :label="$t('label.Level')" width="130">
|
<template #default="scope">
|
<el-rate disabled v-model="scope.row.level"/>
|
</template>
|
</el-table-column>
|
<el-table-column prop="remark" sortable align="left" :label="$t('label.Remark')" min-width="300"
|
width="*"/>
|
<el-table-column fixed="right" :label="$t('label.Operation')" width="110">
|
<template #default="scope">
|
<el-button @click="showEditView(scope.row)" :icon="icon.Edit" size="small" type="primary"
|
circle>
|
</el-button>
|
<el-button @click="deleteItem(scope.row)" :icon="icon.Delete" size="small" type="danger" circle>
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-affix position="bottom" :offset="10" target=".affix-container">
|
<div style="background: white;padding-bottom:10px;">
|
<el-divider :style="{ 'margin': '10px 0px' }"></el-divider>
|
<el-row>
|
<el-col :span="12" align="left">
|
|
</el-col>
|
<el-col :span="12" align="right">
|
<div style="display: flex;justify-content: flex-end">
|
<el-pagination
|
:currentPage="pageIndex"
|
:page-size="pageSize"
|
background
|
@current-change="currentChange"
|
@size-change="sizeChange"
|
:page-sizes="[10, 20, 50, 100, 200]"
|
layout="sizes, prev, pager, next, jumper, ->, total, slot"
|
:total="total">
|
</el-pagination>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</el-affix>
|
</el-card>
|
<div v-dialogdrag>
|
<el-dialog :title="title" id="detailDialog" v-model="dialogVisible" :close-on-click-modal="false"
|
class="el-dialog-customer" width="1000px">
|
<template #header>
|
<el-row>
|
<el-col :span="12">
|
<el-icon style="font:normal bold 20px arial,sans-serif;vertical-align: -10%"
|
v-if="dialogMode === 'new'">
|
<plus/>
|
</el-icon>
|
<el-icon v-else style="font:normal bold 20px arial,serif;vertical-align: -10%">
|
<edit/>
|
</el-icon>
|
<span style="margin-left: 10px; font:normal bold 20px arial,serif;">{{ title }}</span>
|
</el-col>
|
</el-row>
|
</template>
|
<el-card style="margin-top: 0px;">
|
<el-form :model="entity" :rules="rules" ref="dialogForm" label-width="120px" size="default">
|
<el-tabs style="min-height: 300px" v-if="dialogVisible">
|
<el-tab-pane :label="$t('label.BasicInformation')">
|
<el-row>
|
<el-col :span="14">
|
<el-form-item :label="$t('label.Name')" prop="name">
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
v-model="entity.name">
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item :label="$t('label.Code')" prop="code">
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
v-model="entity.code" disabled="disabled">
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item :label="$t('label.Subject')" prop="subjectname">
|
<el-popover placement="right" trigger="click" width="auto">
|
<template #reference>
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
style="width: 230px;" @change="subjectChange"
|
v-model="entity.subjectname"
|
:placeholder="$t('label.Subject')">
|
</el-input>
|
</template>
|
<el-tree :data="subjects" :props="defaultProps"
|
accordion
|
@node-click="handleSubjectSelectClick"></el-tree>
|
</el-popover>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item :label="$t('label.KnowledgePoint')" prop="knowledgepointname">
|
<el-popover placement="right" trigger="click" width="auto">
|
<template #reference>
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
style="width: 100%" @change="subjectKnowledgePointChange"
|
v-model="entity.knowledgepointname">
|
</el-input>
|
</template>
|
<el-tree :data="knowledgepoints" :props="defaultProps"
|
accordion
|
@node-click="handleSubjectKnowledgePointSelectClick"></el-tree>
|
</el-popover>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item :label="$t('label.Category')" prop="categoryname">
|
<el-popover placement="right" trigger="click" width="auto">
|
<template #reference>
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
style="width: 100%" @change="categoryChange"
|
v-model="entity.categoryname">
|
</el-input>
|
</template>
|
<el-tree :data="categories" :props="defaultProps"
|
accordion
|
@node-click="handleCategorySelectClick"></el-tree>
|
</el-popover>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item :label="$t('label.Score')" prop="score">
|
<el-input-number size="default" :prefix-icon="icon.Edit"
|
maxlength="64"
|
:precision="1" :step="0.1"
|
v-model="entity.score"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item :label="$t('label.Level')" prop="level">
|
<el-rate v-model="entity.level"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="14">
|
<el-form-item :label="$t('label.Status')" prop="status">
|
<el-radio-group v-model="entity.status">
|
<el-radio :label="0">{{ $t('label.Enabled') }}</el-radio>
|
<el-radio :label="1">{{ $t('label.Disabled') }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="21">
|
<el-form-item :label="$t('label.Remark')" prop="remark">
|
<el-input type="textarea" :rows="5" maxlength="500" placeholder=""
|
v-model="entity.remark"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane :label="$t('label.Stem')">
|
<div style="border: 1px solid #ccc">
|
<wangEditorExt v-if="entity.stem" :content="entity.stem" height="300px"
|
ref="stemEditor"/>
|
<wangEditorExt v-else :content="entity.stem" height="300px"
|
ref="stemEditor"/>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane :label="$t('label.Option')">
|
<div style="border: 1px solid #ccc">
|
<div>
|
<div>
|
<el-tabs v-if="entity.options&&entity.options.length>0" style="background-color: white;"
|
class="demo-tabs" type="border-card" closable @tab-remove="deleteOptionItem"
|
v-model="optionActiveTab" :label="$t('label.BasicInformation')">
|
<el-tab-pane v-for="(option, index) in entity.options"
|
:key="index"
|
:name="option.sequenceno">
|
<template #label>
|
<div>
|
<el-icon>
|
<Menu/>
|
</el-icon>
|
<b style="margin-left: 5px;">
|
{{ `${$t('label.Option')}-${option.sequenceno}` }}
|
</b>
|
</div>
|
</template>
|
<div>
|
<div>
|
<el-row :style="{ 'margin': '10px 0px 10px 0px' }">
|
<el-col :span="24">
|
<el-space wrap>
|
<el-form-item :label="$t('label.Key')">
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
v-model="option.qkey"/>
|
</el-form-item>
|
<el-form-item :label="$t('label.SequenceNo')">
|
<el-input-number size="default" :prefix-icon="icon.Edit" maxlength="64"
|
:precision="0" :step="1" v-model="option.sequenceno"/>
|
</el-form-item>
|
</el-space>
|
</el-col>
|
</el-row>
|
</div>
|
<el-divider :style="{ 'margin': '10px 0px' }"></el-divider>
|
<div>
|
<wangEditorExt v-if="option.qvalue" :content="option.qvalue" height="100px"
|
:ref="`optionEditor-${option.qkey}`"/>
|
<wangEditorExt v-else :content="option.qvalue" height="100px"
|
:ref="`optionEditor-${option.qkey}`"/>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
<el-empty v-else :image-size="100" :description="$t('message.NoData')"/>
|
</div>
|
<el-button link size="default" type="primary" :icon="icon.CirclePlusFilled"
|
style="margin-top: 5px;"
|
@click="addOptionItem">
|
{{ $t('button.Add') }}
|
</el-button>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane :label="$t('label.Answer')">
|
<div style="border: 1px solid #ccc">
|
<div>
|
<el-tabs v-if="entity.answers&&entity.answers.length>0" style="background-color: white;"
|
class="demo-tabs" type="border-card" closable @tab-remove="deleteAnswerItem"
|
v-model="answerActiveTab" :label="$t('label.BasicInformation')" ref="answersTabs">
|
<el-tab-pane v-for="(answer, index) in entity.answers"
|
:key="index"
|
:name="answer.sequenceno">
|
<template #label>
|
<div>
|
<el-icon>
|
<Menu/>
|
</el-icon>
|
<b style="margin-left: 5px;">
|
{{ `${$t('label.Option')}-${answer.sequenceno}` }}
|
</b>
|
</div>
|
</template>
|
<div>
|
<div>
|
<el-row :style="{ 'margin': '10px 0px 10px 0px' }">
|
<el-col :span="24">
|
<el-space wrap>
|
<el-form-item :label="$t('label.Key')">
|
<el-input size="default" :prefix-icon="icon.Edit" maxlength="64"
|
v-model="answer.qkey"/>
|
</el-form-item>
|
<el-form-item :label="$t('label.SequenceNo')">
|
<el-input-number size="default" :prefix-icon="icon.Edit" maxlength="64"
|
:precision="0" :step="1" v-model="answer.sequenceno"/>
|
</el-form-item>
|
</el-space>
|
</el-col>
|
</el-row>
|
</div>
|
<el-divider :style="{ 'margin': '10px 0px' }"></el-divider>
|
<div>
|
<wangEditorExt v-if="answer.qvalue" :content="answer.qvalue" height="100px"
|
:ref="`answerEditor-${answer.qkey}`"/>
|
<wangEditorExt v-else :content="answer.qvalue" height="100px"
|
:ref="`answerEditor-${answer.qkey}`"/>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
<el-empty v-else :image-size="100" :description="$t('message.NoData')"/>
|
</div>
|
<div>
|
<el-button link size="default" type="primary" :icon="icon.CirclePlusFilled"
|
style="margin-top: 5px;"
|
@click="addAnswerItem">
|
{{ $t('button.Add') }}
|
</el-button>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane :label="$t('label.Answer')">
|
<div style="border: 1px solid #ccc">
|
<wangEditorExt v-if="entity.answer" :content="entity.answer" height="300px"
|
ref="answerEditor"/>
|
<wangEditorExt v-else :content="entity.answer" height="300px"
|
ref="answerEditor"/>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane :label="$t('label.Analysis')">
|
<div style="border: 1px solid #ccc">
|
<wangEditorExt v-if="entity.analysis" :content="entity.analysis" height="300px"
|
ref="analysisEditor"/>
|
<wangEditorExt v-else :content="entity.analysis" height="300px"
|
ref="analysisEditor"/>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</el-form>
|
</el-card>
|
<template #footer>
|
<el-button type="primary" @click="onSubmit" :icon="icon.CircleCheck" size="default">
|
{{ $t('button.Submit') }}
|
</el-button>
|
<el-button type="danger" @click="dialogVisible = false" :icon="icon.CircleClose" size="default"
|
plain>
|
{{ $t('button.Close') }}
|
</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as icon from '@element-plus/icons-vue'
|
import {getCurrentInstance, onBeforeUnmount, onMounted, reactive, toRefs, shallowRef, ref, onActivated} from "vue";
|
import {formatDate, NewGuid, DownloadBlobFileStream} from '@/utils/common'
|
import {
|
GetQuestionMastersWithBLOBsExtend,
|
GetQuestionMasters,
|
CreateQuestionMaster,
|
UpdateQuestionMaster,
|
DeleteQuestionMaster,
|
GetQuestionCategoryTree,
|
GetQuestionSubjects,
|
GetQuestionMasterDetail,
|
GetQuestionKnowledgePointTree
|
} from "@/api/admin/question"
|
|
import {useBasicInfoStore} from "@/store/basicInfo";
|
import wangEditorExt from '../../../components/common/wangEditorExt.vue'
|
import * as elementplus from "element-plus";
|
import MenuButton from "../../../components/common/MenuButton.vue";
|
|
export default {
|
name: "QuestionMaster",
|
components: {wangEditorExt, MenuButton},
|
setup() {
|
let {proxy} = getCurrentInstance();
|
const store = useBasicInfoStore();
|
const state = reactive({
|
//common properties
|
title: '',
|
total: 0,
|
pageIndex: 1,
|
pageSize: store.config.ListSize,
|
loading: false,
|
windowWidth: document.documentElement.clientWidth,
|
windowHeight: document.documentElement.clientHeight,
|
dialogVisible: false,
|
dialogMode: 'new',
|
showAdvanceSearchView: false,
|
searchValue: {
|
filter: "",
|
code: "",
|
name: "",
|
subjectid: "",
|
subjectname: "",
|
subjectcode: "",
|
categoryid: "",
|
categoryname: "",
|
knowledgepointid: "",
|
knowledgepointname: "",
|
knowledgepointcode: "",
|
status: null,
|
},
|
entityList: [],
|
multipleSelection: [],
|
entity: {
|
id: "",
|
code: "",
|
name: "",
|
status: 0,
|
level: null,
|
score: null,
|
remark: "",
|
subjectid: "",
|
subjectname: "",
|
subjectcode: "",
|
categoryid: "",
|
categoryname: "",
|
knowledgepointid: "",
|
knowledgepointname: "",
|
knowledgepointcode: "",
|
stem: null,
|
answer: null,
|
analysis: null,
|
answers: [],
|
options: [],
|
},
|
optionActiveTab: '',
|
answerActiveTab: '',
|
defaultProps: {
|
children: 'children',
|
label: 'name'
|
},
|
subjects: [],
|
categories: [],
|
knowledgepoints: [],
|
rules: {
|
subjectname: [{
|
required: true,
|
message: `${proxy.$t('message.IsRequired', {name: proxy.$t('label.Subject')})}`,
|
trigger: 'blur'
|
}],
|
categoryname: [{
|
required: true,
|
message: `${proxy.$t('message.IsRequired', {name: proxy.$t('label.Category')})}`,
|
trigger: 'blur'
|
}],
|
},
|
});
|
|
onMounted(() => {
|
Init();
|
LoadData();
|
LoadCategory();
|
LoadSubject();
|
});
|
onBeforeUnmount(() => {
|
|
});
|
onActivated(() => {
|
//Init();
|
});
|
|
const Init = () => {
|
|
};
|
const getSearchCondition = () => {
|
let condition;
|
if (!state.showAdvanceSearchView) {
|
condition = {
|
pageIndex: state.pageIndex,
|
pageSize: state.pageSize,
|
filter: state.searchValue.filter,
|
permissionLevel: store.permissionLevel,
|
subjectid: state.searchValue.subjectid,
|
subjectname: state.searchValue.subjectname,
|
subjectcode: state.searchValue.subjectcode,
|
categoryid: state.searchValue.categoryid,
|
categoryname: state.searchValue.categoryname,
|
knowledgepointid: state.searchValue.knowledgepointid,
|
knowledgepointname: state.searchValue.knowledgepointname,
|
knowledgepointcode: state.searchValue.knowledgepointcode,
|
}
|
} else {
|
condition = {
|
pageIndex: state.pageIndex,
|
pageSize: state.pageSize,
|
code: state.searchValue.code,
|
name: state.searchValue.name,
|
status: state.searchValue.status,
|
subjectid: state.searchValue.subjectid,
|
subjectname: state.searchValue.subjectname,
|
subjectcode: state.searchValue.subjectcode,
|
categoryid: state.searchValue.categoryid,
|
categoryname: state.searchValue.categoryname,
|
knowledgepointid: state.searchValue.knowledgepointid,
|
knowledgepointname: state.searchValue.knowledgepointname,
|
knowledgepointcode: state.searchValue.knowledgepointcode,
|
}
|
}
|
|
return condition;
|
};
|
const LoadData = () => {
|
state.entityList = [];
|
state.total = 0;
|
|
// if (!state.searchValue.subjectcode) {
|
// return;
|
// }
|
|
state.loading = true;
|
let condition = getSearchCondition();
|
|
GetQuestionMastersWithBLOBsExtend(condition).then(resp => {
|
state.loading = false;
|
console.info(resp.data);
|
if (resp.data) {
|
state.entityList = resp.data.data;
|
state.total = resp.data.total;
|
}
|
}).catch(err => {
|
console.error(err);
|
});
|
};
|
|
const LoadSubject = () => {
|
GetQuestionSubjects({}).then(resp => {
|
state.loading = false
|
if (resp.data) {
|
state.subjects = resp.data.data
|
}
|
}).catch(err => {
|
console.error(err)
|
})
|
};
|
const handleSubjectSelectClick = (data) => {
|
state.searchValue.subjectname = data.name;
|
state.searchValue.subjectcode = data.code;
|
|
state.entity.subjectid = data.id;
|
state.entity.subjectname = data.name;
|
state.entity.subjectcode = data.code;
|
|
LoadSubjectKnowledgePoint();
|
SearchData();
|
};
|
const subjectChange = (data) => {
|
if (!data) {
|
state.entity.subjectid = "";
|
state.entity.subjectname = "";
|
state.entity.subjectcode = "";
|
}
|
};
|
|
const LoadSubjectKnowledgePoint = () => {
|
state.knowledgepoints = [];
|
|
if (!state.searchValue.subjectcode) {
|
return;
|
}
|
|
GetQuestionKnowledgePointTree({subjectcode: state.searchValue.subjectcode}).then(resp => {
|
state.loading = false
|
if (resp.data) {
|
state.knowledgepoints = resp.data
|
}
|
}).catch(err => {
|
console.error(err)
|
})
|
};
|
const handleSubjectKnowledgePointSelectClick = (data) => {
|
state.searchValue.knowledgepointname = data.name;
|
state.searchValue.knowledgepointcode = data.code;
|
|
state.entity.knowledgepointid = data.id;
|
state.entity.knowledgepointname = data.name;
|
state.entity.knowledgepointcode = data.code;
|
|
// SearchData();
|
};
|
const subjectKnowledgePointChange = (data) => {
|
if (!data) {
|
state.entity.knowledgepointid = "";
|
state.entity.knowledgepointname = "";
|
state.entity.subjectknowledgepointcode = "";
|
}
|
};
|
|
const LoadCategory = () => {
|
GetQuestionCategoryTree().then(resp => {
|
state.loading = false
|
if (resp.data) {
|
state.categories = resp.data;
|
}
|
}).catch(err => {
|
console.error(err)
|
})
|
};
|
const handleCategorySelectClick = (data) => {
|
state.searchValue.categoryname = data.name;
|
|
state.entity.categoryid = data.id;
|
state.entity.categoryname = data.name;
|
|
// SearchData();
|
};
|
const categoryChange = (data) => {
|
if (!data) {
|
state.entity.categoryid = "";
|
state.entity.categoryname = "";
|
}
|
};
|
|
const sizeChange = (currentSize) => {
|
state.pageSize = currentSize;
|
store.config.ListSize = state.pageSize;
|
LoadData();
|
};
|
const currentChange = (currentPage) => {
|
state.pageIndex = currentPage;
|
|
LoadData();
|
};
|
const clearAddOrEditModel = () => {
|
state.entity = {
|
id: "",
|
code: "",
|
name: "",
|
status: 0,
|
level: null,
|
score: null,
|
remark: "",
|
subjectid: "",
|
subjectname: "",
|
subjectcode: "",
|
categoryid: "",
|
categoryname: "",
|
stem: null,
|
answer: null,
|
analysis: null,
|
answers: [],
|
options: [],
|
}
|
};
|
const SearchData = () => {
|
state.pageIndex = 1;
|
LoadData();
|
};
|
const ClearSearchData = () => {
|
state.searchValue = {
|
filter: "",
|
code: "",
|
name: "",
|
status: null,
|
};
|
};
|
|
const showAddView = () => {
|
clearAddOrEditModel();
|
LoadCategory();
|
|
state.title = proxy.$t('button.New');
|
state.dialogMode = 'new';
|
state.dialogVisible = true;
|
};
|
const showEditView = (data) => {
|
state.title = `${proxy.$t('button.Edit')} [${data.name}]`;
|
state.dialogMode = 'edit';
|
state.entity = data;
|
state.dialogVisible = true;
|
LoadCategory();
|
|
state.optionActiveTab = "";
|
if (state.entity.options) {
|
state.optionActiveTab = state.entity.options[0].sequenceno;
|
}
|
|
state.answerActiveTab = "";
|
if (state.entity.answers) {
|
state.answerActiveTab = state.entity.answers[0].sequenceno;
|
}
|
};
|
|
const handleSelectionChange = (val) => {
|
state.multipleSelection = val
|
};
|
const exportSelectionvalue = () => {
|
return state.multipleSelection;
|
}
|
|
const addOptionItem = () => {
|
if (!state.entity.options || state.entity.options.length <= 0) {
|
state.entity.options = [];
|
} else if (state.entity.options.length > 7) {
|
return;
|
}
|
|
let newoption = {
|
id: NewGuid(),
|
sequenceno: state.entity.options.length + 1,
|
qkey: "",
|
qvalue: "",
|
};
|
state.entity.options.push(newoption);
|
state.optionActiveTab = newoption.sequenceno;
|
};
|
const deleteOptionItem = (data) => {
|
if (!state.entity.options || state.entity.options.length <= 0) {
|
state.entity.options = [];
|
}
|
|
state.entity.options = state.entity.options.filter(e => e.sequenceno !== data);
|
if (state.entity.options && state.entity.options.length > 0) {
|
state.optionActiveTab = state.entity.options[0].sequenceno;
|
}
|
};
|
const addAnswerItem = () => {
|
if (!state.entity.answers || state.entity.answers.length <= 0) {
|
state.entity.answers = [];
|
} else if (state.entity.answers.length > 7) {
|
return;
|
}
|
|
let newanswer = {
|
id: NewGuid(),
|
sequenceno: state.entity.answers.length + 1,
|
qkey: "",
|
qvalue: "",
|
};
|
state.entity.answers.push(newanswer);
|
state.answerActiveTab = newanswer.sequenceno;
|
};
|
const deleteAnswerItem = (data) => {
|
if (!state.entity.answers || state.entity.answers.length <= 0) {
|
state.entity.answers = [];
|
}
|
|
state.entity.answers = state.entity.answers.filter(e => e.sequenceno !== data);
|
if (state.entity.answers && state.entity.answers.length > 0) {
|
state.answerActiveTab = state.entity.answers[0].sequenceno;
|
}
|
};
|
|
const onSubmit = () => {
|
if (state.entity.options && state.entity.options.length > 0) {
|
state.entity.options.map(e => {
|
let editors = proxy.$refs[`optionEditor-${e.qkey}`];
|
if (editors && editors.length > 0) {
|
return e.qvalue = editors[0].exportvalue();
|
}
|
})
|
}
|
if (state.entity.answers && state.entity.answers.length > 0) {
|
state.entity.answers.map(e => {
|
let editors = proxy.$refs[`answerEditor-${e.qkey}`];
|
if (editors && editors.length > 0) {
|
return e.qvalue = editors[0].exportvalue();
|
}
|
})
|
}
|
|
state.entity.stem = proxy.$refs.stemEditor.exportvalue();
|
state.entity.answer = proxy.$refs.answerEditor.exportvalue();
|
state.entity.analysis = proxy.$refs.analysisEditor.exportvalue();
|
|
if (state.entity.id) {
|
proxy.$refs['dialogForm'].validate(valid => {
|
if (valid) {
|
proxy.$confirm(`${proxy.$t('message.AreYouSureToSubmit')}`, `${proxy.$t('label.SystemConfirm')}`, {
|
confirmButtonText: `${proxy.$t('button.Yes')}`,
|
cancelButtonText: `${proxy.$t('button.No')}`,
|
type: 'warning',
|
center: true
|
}).then(() => {
|
const rLoading = proxy.openLoading("#detailDialog");
|
UpdateQuestionMaster(state.entity).then(resp => {
|
if (resp) {
|
if (resp.data && resp.data.code !== 200) {
|
elementplus.ElMessageBox.alert(
|
`${proxy.$t('message.' + resp.data.message)}`,
|
'',
|
{
|
confirmButtonText: 'OK',
|
type: 'error',
|
}
|
);
|
} else {
|
state.dialogVisible = false;
|
LoadData();
|
}
|
}
|
rLoading.close();
|
});
|
}).catch((error) => {
|
console.error(error)
|
})
|
}
|
});
|
} else {
|
proxy.$refs['dialogForm'].validate(valid => {
|
if (valid) {
|
proxy.$confirm(`${proxy.$t('message.AreYouSureToSubmit')}`, `${proxy.$t('label.SystemConfirm')}`, {
|
confirmButtonText: `${proxy.$t('button.Yes')}`,
|
cancelButtonText: `${proxy.$t('button.No')}`,
|
type: 'warning',
|
center: true
|
}).then(() => {
|
const rLoading = proxy.openLoading("#detailDialog");
|
CreateQuestionMaster(state.entity).then(resp => {
|
if (resp) {
|
if (resp.data && resp.data.code !== 200) {
|
elementplus.ElMessageBox.alert(
|
`${proxy.$t('message.' + resp.data.message)}`,
|
'',
|
{
|
confirmButtonText: 'OK',
|
type: 'error',
|
}
|
);
|
} else {
|
state.dialogVisible = false;
|
LoadData();
|
}
|
}
|
rLoading.close();
|
});
|
}).catch((error) => {
|
console.error(error)
|
})
|
}
|
});
|
}
|
};
|
const deleteItem = (data) => {
|
proxy.$confirm(`${proxy.$t('message.AreYouSureToRemove')}`, `${proxy.$t('label.SystemConfirm')}`, {
|
confirmButtonText: `${proxy.$t('button.Yes')}`,
|
cancelButtonText: `${proxy.$t('button.No')}`,
|
confirmButtonClass: 'confirmButtonClass',
|
cancelButtonClass: 'cancelButtonClass',
|
type: 'warning',
|
center: true,
|
}).then(() => {
|
state.loading = true;
|
DeleteQuestionMaster(data.id).then(resp => {
|
if (resp) {
|
if (resp.data && resp.data.code !== 200) {
|
elementplus.ElMessageBox.alert(
|
`${proxy.$t('message.' + resp.data.message)}`,
|
'',
|
{
|
confirmButtonText: 'OK',
|
type: 'error',
|
}
|
);
|
} else {
|
LoadData();
|
}
|
}
|
state.loading = false;
|
});
|
}).catch((error) => {
|
console.error(error);
|
state.loading = false;
|
});
|
};
|
const GoBack = () => {
|
proxy.$router.back();
|
};
|
|
//formatter
|
const formatterDatetime = (row, column) => {
|
let date = null;
|
switch (column.property) {
|
case "createtime":
|
if (!row.createtime)
|
return null;
|
date = new Date(row.createtime);
|
break;
|
case "birthday":
|
if (!row.birthday)
|
return null;
|
date = new Date(row.birthday);
|
break;
|
case "actiontime":
|
if (!row.actiontime)
|
return null;
|
date = new Date(row.actiontime);
|
break;
|
case "validdateto":
|
if (!row.validdateto)
|
return null;
|
date = new Date(row.validdateto);
|
break;
|
case "validdatefrom":
|
if (!row.validdatefrom)
|
return null;
|
date = new Date(row.validdatefrom);
|
break;
|
}
|
|
return formatDate(date, 'yyyy-MM-dd hh:mm');
|
};
|
const formatterStatusBoolean = (row, column) => {
|
var ret = ''
|
if (row.status) {
|
ret = "Valid";
|
} else {
|
ret = "Invalid";
|
}
|
return ret;
|
};
|
const capitalize = (value) => {
|
if (!value) return ''
|
value = value.toString()
|
return value.charAt(0).toUpperCase() + value.slice(1)
|
};
|
|
return {
|
...toRefs(state),
|
icon,
|
LoadData,
|
sizeChange,
|
currentChange,
|
clearAddOrEditModel,
|
SearchData,
|
ClearSearchData,
|
showAddView,
|
showEditView,
|
deleteItem,
|
onSubmit,
|
handleSelectionChange,
|
exportSelectionvalue,
|
formatterDatetime,
|
formatterStatusBoolean,
|
capitalize,
|
handleCategorySelectClick,
|
categoryChange,
|
handleSubjectSelectClick,
|
subjectChange,
|
handleSubjectKnowledgePointSelectClick,
|
subjectKnowledgePointChange, addOptionItem, addAnswerItem, deleteAnswerItem, deleteOptionItem,
|
GoBack
|
}
|
},
|
}
|
</script>
|
|
<style></style>
|
