622 lines
15 KiB
Vue
622 lines
15 KiB
Vue
<template>
|
|
<div>
|
|
|
|
|
|
<el-card shadow="never" class="henader-card">
|
|
|
|
<div class="flx-row">
|
|
<el-form :inline="true" :model="queryData" style="flex: 1;" >
|
|
<span>项目</span> <el-input placeholder="请输入项目名" v-model="queryData.qa_name" style="width: 200px;" clearable >
|
|
</el-input>
|
|
<el-button type="primary" :icon="Search" @click="initDatas" class="ml20"
|
|
></el-button
|
|
>
|
|
|
|
<!-- <span style="margin-left: 32px;">修改时间</span><el-icon><Sort /></el-icon> -->
|
|
<span style="margin-right: 6px;margin-left: 16px;"> 项目状态</span>
|
|
<el-select v-model="queryData.qa_status" placeholder="请选择" @change="initDatas" clearable >
|
|
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
<!-- <span style="margin-right: 6px;margin-left: 16px;"> 有效期</span>
|
|
<el-select v-model="queryData.order.qa_expire_time" placeholder="请选择" @change="initDatas">
|
|
<el-option v-for="item in optionst" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
<span style="margin-right: 6px;margin-left: 16px;"> 题数</span>
|
|
<el-select v-model="queryData.order.qa_quantity" placeholder="请选择" @change="initDatas">
|
|
<el-option v-for="item in optionst" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select> -->
|
|
</el-form>
|
|
<div class="flex-right" >
|
|
<el-button type="primary" @click="addone" >+添加</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</el-card>
|
|
<el-card shadow="never">
|
|
<el-table
|
|
:data="tableData"
|
|
:header-cell-style="{ backgroundColor: '#ecf5ff' }"
|
|
border
|
|
stripe
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column
|
|
v-for="item in optionss2"
|
|
:key="item.type"
|
|
:prop="item.props"
|
|
:label="item.label"
|
|
:width="item.width"
|
|
:align="item.align"
|
|
min-width="420"
|
|
:fixed="item.fixed"
|
|
show-overflow-tooltip
|
|
>
|
|
<!-- <template v-slot:default="scope" v-if="item.props === 'qa_display_type'">
|
|
<span>{{ optionstype[scope.row.qa_display_type-1].label}}</span>
|
|
</template> -->
|
|
<template v-slot:default="scope" v-if="item.props === 'qa_status'">
|
|
<span>{{ optionss[scope.row.qa_status-1].label}}</span>
|
|
</template>
|
|
<template v-slot:default="scope" v-if="item.props === 'actions'">
|
|
<el-button @click="ItemViewshow(scope.row)">
|
|
查看
|
|
</el-button>
|
|
<el-button @click="ItemView(scope.row)">
|
|
密码
|
|
</el-button>
|
|
<el-button @click="ItemViewDetail(scope.row)">
|
|
题库
|
|
</el-button>
|
|
<el-button @click="ItemViewrule(scope.row)">
|
|
规则
|
|
</el-button>
|
|
<el-button @click="linkItemView(scope.row)">
|
|
链接
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
|
|
class="mt-4"
|
|
@current-change="handleCurrentChange" />
|
|
|
|
</el-card>
|
|
<DiaglogView :dialogVisible="dialogVisible" :qa_password="qa_password.qa_password" :action_type="action_type" :qa_rule_content="qa_rule_content.qa_rule_content"
|
|
:dialogWidth="dialogWidth" @save-click="save" @closeDialog="closeDialog" :links="links" ></DiaglogView>
|
|
|
|
<bank :dialogVisible="dialogVisibles" :FormData=FoData :formLabelWidth="formLabelWidth" :action_type="action_type"
|
|
:fileList=fileList @save-click="saves" @closeDialog="closeDialogs" :qa_id="qa_id" ></bank>
|
|
</div>
|
|
|
|
<subject :dialogVisibled="dialogVisibled" :qa_id="qa_id" @closeDialog="closeDialogd" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
Search,
|
|
|
|
} from '@element-plus/icons-vue'
|
|
import request from '../../../api/modules/index.js'
|
|
import { optionss2 } from './options.js'
|
|
import { onMounted, reactive, ref } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import DiaglogView from './DiaglogView.vue'
|
|
import bank from './banktwo.vue'
|
|
import subject from './subject.vue'
|
|
const formLabelWidth = '140px'
|
|
const fileList = ref([]);
|
|
const dialogVisibled=ref(false)
|
|
const qa_password=ref({
|
|
|
|
qa_password:''
|
|
})
|
|
const links=ref('')
|
|
const qa_rule_content=ref({
|
|
qa_rule_content:''
|
|
})
|
|
const qa_id=ref('')
|
|
const optionss = [
|
|
|
|
{
|
|
value: 1,
|
|
label: '正常',
|
|
},
|
|
{
|
|
value: 2,
|
|
label: '过期',
|
|
},
|
|
|
|
]
|
|
const optionst = [
|
|
|
|
{
|
|
value: 'asc',
|
|
label: '顺序',
|
|
},
|
|
{
|
|
value:'desc',
|
|
label: '倒序',
|
|
},
|
|
|
|
]
|
|
const optionstype = [
|
|
|
|
|
|
{
|
|
value: 1,
|
|
label: '常规',
|
|
},
|
|
{
|
|
value: 2,
|
|
label: '飞花令',
|
|
}
|
|
|
|
]
|
|
|
|
const queryData = ref({
|
|
page:1,
|
|
page_size:10,
|
|
qa_name:'',
|
|
qa_type:2,
|
|
|
|
order: {
|
|
|
|
}
|
|
|
|
})
|
|
const FoData=ref({
|
|
qa_name :'',
|
|
qa_rule_content :'',
|
|
qa_quantity:1,
|
|
qa_display_type:2,
|
|
qa_expire_time:'',
|
|
qa_password :'',
|
|
image:'',
|
|
qa_type:2,
|
|
is_turn_timer:0,
|
|
question_qa_timer:[],
|
|
token_question_content:[],
|
|
question_qa_item:[
|
|
{
|
|
question_type:null ,
|
|
first_label_id:'',
|
|
second_label_id:null,
|
|
difficulty:null,
|
|
quantity:null
|
|
|
|
},
|
|
// {
|
|
// question_type:1 ,
|
|
// first_label_id:'',
|
|
// second_label_id:null,
|
|
// difficulty:null,
|
|
// quantity:null
|
|
|
|
// },
|
|
]
|
|
,
|
|
repeat_qa_id:[]
|
|
})
|
|
|
|
|
|
const handleSizeChange = (valr) => {
|
|
|
|
queryData.value.page_size = valr
|
|
initData()
|
|
}
|
|
|
|
|
|
|
|
const dialogWidth = ref('100%')
|
|
|
|
const dialogVisible = ref(false)
|
|
const dialogVisibles = ref(false)
|
|
const tableData = ref([])
|
|
const total = ref(0)
|
|
const action_type=ref('0')//0修改密码//1增加数据//2修改数据//3规则//4链接//5选择题目类型
|
|
|
|
const initData = () => {
|
|
if(queryData.value.qa_status=='')
|
|
{
|
|
delete queryData.value.qa_status
|
|
}
|
|
request.Qapage(queryData.value).then((res) => {
|
|
total.value = res.data.data.total
|
|
tableData.value = res.data.data.data
|
|
|
|
})
|
|
}
|
|
|
|
|
|
const initDatas = () => {
|
|
queryData.value.page=1
|
|
initData()
|
|
|
|
}
|
|
const dialogVisibledShow = () => {
|
|
|
|
dialogVisibled.value = true
|
|
}
|
|
const closeDialogd = () => {
|
|
|
|
dialogVisibled.value = false
|
|
}
|
|
const dialogVisibleShow = () => {
|
|
|
|
dialogVisible.value = true
|
|
}
|
|
const dialogVisibleShows = () => {
|
|
|
|
dialogVisibles.value = true
|
|
}
|
|
const closeDialog=() => {
|
|
|
|
dialogVisible.value = false
|
|
}
|
|
const closeDialogs=() => {
|
|
|
|
dialogVisibles.value = false
|
|
}
|
|
const saves = (action_type,action,content,base_token_item,question_types,question_times,repeat_qa_id) => {
|
|
FoData.value.question_qa_timer=[]
|
|
if(FoData.value.is_turn_timer=='1')
|
|
{
|
|
console.log(question_times)
|
|
if(question_times.type1!='')
|
|
{
|
|
FoData.value.question_qa_timer.push({question_type:1,duration:parseInt(question_times.type1),timer_rule:2})
|
|
}
|
|
if(question_times.type2!='')
|
|
{
|
|
FoData.value.question_qa_timer.push({question_type:2,duration:parseInt(question_times.type2),timer_rule:2})
|
|
}
|
|
if(question_times.type3!='')
|
|
{
|
|
FoData.value.question_qa_timer.push({question_type:3,duration:parseInt(question_times.type3),timer_rule:2})
|
|
}
|
|
if(question_times.type4!='')
|
|
{
|
|
FoData.value.question_qa_timer.push({question_type:4,duration:parseInt(question_times.type4),timer_rule:2})
|
|
}
|
|
}
|
|
console.log(action_type+'action'+action);
|
|
FoData.value.token_question_content=[]
|
|
if(question_types.type1!='')
|
|
{
|
|
FoData.value.token_question_content.push({question_type:1,quantity:parseInt(question_types.type1)})
|
|
}
|
|
if(question_types.type2!='')
|
|
{
|
|
FoData.value.token_question_content.push({question_type:2,quantity:parseInt(question_types.type2)})
|
|
}
|
|
if(question_types.type3!='')
|
|
{
|
|
FoData.value.token_question_content.push({question_type:3,quantity:parseInt(question_types.type3)})
|
|
}
|
|
if(question_types.type4!='')
|
|
{
|
|
FoData.value.token_question_content.push({question_type:4,quantity:parseInt(question_types.type4)})
|
|
}
|
|
FoData.value.qa_rule_content=content
|
|
FoData.value.token_num=parseInt(FoData.value.token_num)
|
|
for(let i=0;i<FoData.value.question_qa_item.length;i++){
|
|
if(FoData.value.question_qa_item[i].quantity!='')
|
|
{
|
|
FoData.value.question_qa_item[i].quantity=parseInt(FoData.value.question_qa_item[i].quantity)
|
|
}
|
|
else
|
|
{
|
|
FoData.value.question_qa_item[i].quantity=0
|
|
}
|
|
|
|
}
|
|
|
|
console.log('repeat_qa_id'+repeat_qa_id)
|
|
|
|
if(repeat_qa_id.length>0)
|
|
{
|
|
FoData.value.repeat_qa_id=[]
|
|
repeat_qa_id.forEach((item,index)=>{
|
|
FoData.value.repeat_qa_id.push({
|
|
qa_id:item,
|
|
|
|
})
|
|
})
|
|
}
|
|
|
|
else
|
|
{
|
|
FoData.value.repeat_qa_id=null
|
|
}
|
|
|
|
if(FoData.value.qa_display_type==2)
|
|
{
|
|
if(base_token_item.length>0)
|
|
{
|
|
FoData.value.base_token_item=[]
|
|
base_token_item.forEach((item,index)=>{
|
|
FoData.value.base_token_item.push({
|
|
token_id:item
|
|
})
|
|
})
|
|
}
|
|
}
|
|
else
|
|
{
|
|
FoData.value.base_token_item=null
|
|
}
|
|
if(action_type=='2')
|
|
{
|
|
FoData.value.action=action
|
|
request.putQa(qa_id.value,FoData.value).then((res) => {
|
|
updateslist(res.data.code,'更新成功',res.data.message)
|
|
delete FoData.value[action];
|
|
|
|
})
|
|
}
|
|
else if(action_type=='1')
|
|
{
|
|
|
|
|
|
request.postQa(FoData.value).then((res) => {
|
|
updateslist(res.data.code,'添加成功',res.data.message)
|
|
|
|
|
|
})
|
|
}
|
|
}
|
|
const updateslist=(code,msg,message)=>
|
|
{
|
|
if(code==200)
|
|
{
|
|
ElMessage({
|
|
message: msg,
|
|
type: 'success',
|
|
})
|
|
initData()
|
|
closeDialog()
|
|
closeDialogs()
|
|
}
|
|
else
|
|
{
|
|
ElMessage({
|
|
message: message,
|
|
type: 'error',
|
|
})
|
|
}
|
|
}
|
|
const save = (action_type,param1) => {
|
|
console.log(action_type);
|
|
console.log(param1);
|
|
if(action_type=='0')
|
|
{
|
|
console.log('action_type');
|
|
qa_password.value.qa_password=param1
|
|
request.updatePassword(qa_id.value,qa_password.value).then((res) => {
|
|
updateslist(res.data.code,'更新成功',res.data.message)
|
|
|
|
})
|
|
}
|
|
else if(action_type=='3')
|
|
{
|
|
|
|
qa_rule_content.value.qa_rule_content=param1
|
|
request.putRule(qa_id.value,qa_rule_content.value).then((res) => {
|
|
updateslist(res.data.code,'更新成功',res.data.message)
|
|
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
const handleCurrentChange = (val) => {
|
|
queryData.value.page = val
|
|
initData()
|
|
}
|
|
const editItemView = (item) => {
|
|
|
|
|
|
ItemViews(item)
|
|
}
|
|
|
|
const ItemView = (item) => {
|
|
action_type.value='0'
|
|
qa_id.value = item.qa_id
|
|
qa_password.value.qa_password = item.qa_password
|
|
dialogVisibleShow()
|
|
}
|
|
const ItemViewDetail = (item) => {
|
|
|
|
qa_id.value = item.qa_id
|
|
|
|
dialogVisibledShow()
|
|
}
|
|
const linkItemView = (item) => {
|
|
action_type.value='4'
|
|
qa_password.value.qa_password = item.qa_password
|
|
links.value = item.qa_share_id
|
|
dialogVisibleShow()
|
|
}
|
|
const ItemViewrule = (item) => {
|
|
action_type.value='3'
|
|
qa_id.value = item.qa_id
|
|
qa_rule_content.value.qa_rule_content = item.qa_rule_content
|
|
dialogVisibleShow()
|
|
}
|
|
const ItemViewshow = (item) => {
|
|
|
|
action_type.value='2'
|
|
qa_id.value = item.qa_id
|
|
request.getQaDetail(qa_id.value).then((res) => {
|
|
|
|
FoData.value.token_question_content=[]
|
|
FoData.value.token_question_content.push(...res.data.data.token_question_content)
|
|
|
|
FoData.value.qa_name=res.data.data.qa_name
|
|
FoData.value.qa_rule_content=res.data.data.qa_rule_content
|
|
FoData.value.qa_quantity=1
|
|
FoData.value.qa_display_type=res.data.data.qa_display_type
|
|
FoData.value.qa_expire_time=res.data.data.qa_expire_time.slice(0,-3)
|
|
FoData.value.qa_password=res.data.data.qa_password
|
|
FoData.value.image=res.data.data.image
|
|
FoData.value.token_num=res.data.data.token_num
|
|
fileList.value=[]
|
|
fileList.value.push({url:FoData.value.image})
|
|
FoData.value.question_qa_item=[]
|
|
res.data.data.item_content.forEach((item,index)=>{
|
|
FoData.value.question_qa_item.push(item)
|
|
|
|
})
|
|
if(res.data.data.base_token_item==null)
|
|
{
|
|
FoData.value.base_token_item=[]
|
|
}
|
|
else
|
|
{
|
|
FoData.value.base_token_item=res.data.data.base_token_item
|
|
}
|
|
FoData.value.is_turn_timer=res.data.data.is_turn_timer
|
|
|
|
if(res.data.data.question_qa_timer==null)
|
|
{
|
|
FoData.value.question_qa_timer=[]
|
|
}
|
|
else
|
|
{
|
|
FoData.value.question_qa_timer=res.data.data.question_qa_timer
|
|
}
|
|
if(res.data.data.repeat_qa_id==null)
|
|
{
|
|
FoData.value.repeat_qa_id=[]
|
|
}
|
|
else
|
|
{
|
|
FoData.value.repeat_qa_id=res.data.data.repeat_qa_id
|
|
}
|
|
|
|
|
|
console.log(FoData.value.question_qa_timer)
|
|
|
|
|
|
dialogVisibleShows()
|
|
})
|
|
dialogVisibleShows()
|
|
|
|
}
|
|
const ItemViews = (item) => {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
const addone = () => {
|
|
|
|
action_type.value='1'
|
|
FoData.value.qa_name=''
|
|
FoData.value.qa_rule_content=''
|
|
FoData.value.qa_quantity=1
|
|
FoData.value.qa_display_type=2
|
|
FoData.value.qa_expire_time=''
|
|
FoData.value.qa_password=''
|
|
FoData.value.image=''
|
|
FoData.value.token_num=1
|
|
FoData.value.is_turn_timer=0
|
|
FoData.value.question_qa_timer=[]
|
|
FoData.value.question_qa_item=[
|
|
{
|
|
question_type:null ,
|
|
first_label_id:'',
|
|
question_type:null ,
|
|
first_label_id:'',
|
|
second_label_id:null,
|
|
difficulty:null,
|
|
quantity:null
|
|
}
|
|
|
|
|
|
]
|
|
fileList.value=[]
|
|
dialogVisibleShows()
|
|
}
|
|
|
|
|
|
const setDialogWidth = () => {
|
|
|
|
var val = document.body.clientWidth
|
|
const def = 800 // 默认宽度
|
|
if (val < def) {
|
|
dialogWidth.value = '100%'
|
|
} else {
|
|
dialogWidth.value = def + 'px'
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
setDialogWidth()
|
|
window.onresize = () => {
|
|
return (() => {
|
|
setDialogWidth()
|
|
})()
|
|
}
|
|
initData()
|
|
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.henader-card {
|
|
margin-bottom: 20px;
|
|
}
|
|
.icon-view {
|
|
font-size: 20px;
|
|
color: #673ab7;
|
|
margin: 0 10px;
|
|
}
|
|
.icon-edit {
|
|
font-size: 20px;
|
|
color: #2f60c2;
|
|
margin: 0 10px;
|
|
}
|
|
.icon-dele {
|
|
font-size: 20px;
|
|
color: #ff5722;
|
|
}
|
|
.mt-4 {
|
|
float: right;
|
|
text-align: right;
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.el-button--text {
|
|
margin-right: 15px;
|
|
}
|
|
.el-select {
|
|
width: 150px;
|
|
}
|
|
.el-input {
|
|
width: 300px;
|
|
}
|
|
.dialog-footer button:first-child {
|
|
margin-right: 10px;
|
|
}
|
|
.el-image-viewer__canvas {
|
|
img {
|
|
width: 120px !important;
|
|
height: auto !important;
|
|
}
|
|
}
|
|
.el-button:focus, .el-button:hover {
|
|
color: var(--el-button-text-color);
|
|
border-color: var(--el-button-border-color);
|
|
background-color: var(--el-button-bg-color);
|
|
}
|
|
</style>
|
|
|