soul2
1 year ago
parent
24ca6499c9
commit
1f2700486d
10 changed files with 1116 additions and 13 deletions
@ -0,0 +1,38 @@ |
|||||||
|
import request from '@/utils/request' |
||||||
|
|
||||||
|
let prefix = 'questionnaire' |
||||||
|
|
||||||
|
export function page(data) { |
||||||
|
return request({ |
||||||
|
url: `/${prefix}/page`, |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function saveOrUpdate(data) { |
||||||
|
return request({ |
||||||
|
url: `/${prefix}/saveOrUpdate`, |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function remove(data) { |
||||||
|
return request({ |
||||||
|
url: `/${prefix}/remove`, |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function updateStatus(data) { |
||||||
|
return request({ |
||||||
|
url: `/${prefix}/status`, |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function ref(data) { |
||||||
|
return request({ |
||||||
|
url: `/${prefix}/ref`, |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
import request from '@/utils/request' |
||||||
|
|
||||||
|
let prefix = 'subject' |
||||||
|
|
||||||
|
export function page(data) { |
||||||
|
return request({ |
||||||
|
url: `/${prefix}/page`, |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function saveOrUpdate(data) { |
||||||
|
return request({ |
||||||
|
url: `/${prefix}/saveOrUpdate`, |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function remove(data) { |
||||||
|
return request({ |
||||||
|
url: `/${prefix}/remove`, |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function updateStatus(data) { |
||||||
|
return request({ |
||||||
|
url: `/${prefix}/status`, |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function items(data) { |
||||||
|
return request({ |
||||||
|
url: `/${prefix}/items`, |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function chooseList(data) { |
||||||
|
return request({ |
||||||
|
url: `/${prefix}/chooseList`, |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,161 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog ref="dialogForm" width="65%" :title="title" :visible.sync="visible" |
||||||
|
@close="closeDialog" |
||||||
|
> |
||||||
|
<el-form label-width="100px" :inline="true" :model="condition" @submit.native.prevent |
||||||
|
@keyup.enter.native="handleQueryList" |
||||||
|
> |
||||||
|
<!-- 查询条件 --> |
||||||
|
<el-form-item label="题目类型" prop="type"> |
||||||
|
<el-select v-model="condition.type" clearable placeholder="请选择题目类型"> |
||||||
|
<el-option label="单选" :value="0"/> |
||||||
|
<el-option label="多选" :value="1"/> |
||||||
|
<el-option label="文字" :value="2"/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<!-- 表格 --> |
||||||
|
<div ref="tableContainer" class="table-container"> |
||||||
|
<!-- 表格主体 --> |
||||||
|
<el-table ref="listTable" v-loading="selectLoading" :max-height="tableMaxHeight" :data="tableData" border |
||||||
|
style="width: 100%" @row-click="handleRowClick" @selection-change="handleSelectionChange" |
||||||
|
> |
||||||
|
<el-table-column type="selection" width="40" align="center"/> |
||||||
|
<el-table-column type="index" label="序号" width="60" align="center"/> |
||||||
|
<el-table-column property="title" label="标题" width="180" align="center"/> |
||||||
|
<el-table-column property="content" label="题目描述" min-width="25%" align="center"/> |
||||||
|
<el-table-column property="type" label="题目类型" width="80" align="center"> |
||||||
|
<template v-slot="scope"> |
||||||
|
<el-tag v-if="scope.row.type === 0">单选</el-tag> |
||||||
|
<el-tag type="success" v-if="scope.row.type === 1">多选</el-tag> |
||||||
|
<el-tag type="warning" v-if="scope.row.type === 2">文字</el-tag> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column property="useCount" label="已用数" width="80" align="center"/> |
||||||
|
</el-table> |
||||||
|
<!-- End 表格主体 --> |
||||||
|
|
||||||
|
<!-- 表格页码控件 --> |
||||||
|
<div class="pagination-container" v-if="total > 1"> |
||||||
|
<el-pagination background layout="total, sizes, prev, pager, next,jumper" |
||||||
|
:current-page.sync="condition.pageNumber" :page-size.sync="condition.pageSize" |
||||||
|
:page-sizes="[6, 10, 20, 30, 50, 100]" :total="total" @size-change="handleQueryList" |
||||||
|
@current-change="handleQueryList" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<!-- End 表格页码控件 --> |
||||||
|
</div> |
||||||
|
<!-- End 表格 --> |
||||||
|
|
||||||
|
<div slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="visible = false">取消</el-button> |
||||||
|
<el-button type="primary" @click="handleSave">保存</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
import { chooseList } from '@/api/subject' |
||||||
|
import { ref } from '@/api/questionnaire' |
||||||
|
|
||||||
|
const default_condition = { |
||||||
|
type: null, |
||||||
|
pageNumber: 1, |
||||||
|
pageSize: 6 |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'ChooseSubjectDialog', |
||||||
|
props: { |
||||||
|
row: { |
||||||
|
type: Object, |
||||||
|
require: true |
||||||
|
}, |
||||||
|
show: { |
||||||
|
type: Boolean, |
||||||
|
default: () => false |
||||||
|
} |
||||||
|
}, |
||||||
|
components: {}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
edit: { id: null }, |
||||||
|
visible: this.show, |
||||||
|
tableData: [], |
||||||
|
total: null, |
||||||
|
condition: Object.assign({}, default_condition), |
||||||
|
multipleSelection: [], |
||||||
|
selectLoading: false, |
||||||
|
tableMaxHeight: null |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
title() { |
||||||
|
return '选择题目' |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
visible() { |
||||||
|
this.$emit('update:show', false) |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
if (this.row !== null) { |
||||||
|
this.edit = JSON.parse(JSON.stringify(this.row)) |
||||||
|
this.condition.qnId = this.edit.id |
||||||
|
// console.log(this.edit) |
||||||
|
} |
||||||
|
this.handleQueryList() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleQueryList() { |
||||||
|
// 查询表 |
||||||
|
this.selectLoading = true |
||||||
|
chooseList(this.condition).then(r => { |
||||||
|
this.tableData = r.data.rows |
||||||
|
this.total = r.data.total |
||||||
|
this.selectLoading = false |
||||||
|
this.$nextTick(() => { |
||||||
|
this.tableData.filter(e => (e.selected === 1)) |
||||||
|
.forEach(item => this.$refs.listTable.toggleRowSelection(item)) |
||||||
|
// console.log('multipleSelection -> ', this.multipleSelection) |
||||||
|
}) |
||||||
|
// console.log('r.data.rows -> ', r.data.rows) |
||||||
|
}) |
||||||
|
}, |
||||||
|
// [事件]表格 - 点击行 |
||||||
|
handleRowClick(row) { |
||||||
|
this.$refs.listTable.toggleRowSelection(row) |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val |
||||||
|
}, |
||||||
|
closeDialog() { |
||||||
|
// 关闭 |
||||||
|
}, |
||||||
|
handleSave() { |
||||||
|
let saveData = { |
||||||
|
qnId: this.row.id, |
||||||
|
subjectIds: this.multipleSelection.map(e => e.id) |
||||||
|
} |
||||||
|
ref(saveData).then(r => { |
||||||
|
if (r.data === true) { |
||||||
|
this.visible = false |
||||||
|
this.$message({ type: 'success', message: '保存成功!' }) |
||||||
|
this.$emit('saved') |
||||||
|
} else { |
||||||
|
this.$message({ type: 'error', message: '保存失败!' }) |
||||||
|
} |
||||||
|
}).catch(r => { |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,97 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog ref="dialogForm" width="45%" :title="title" :visible.sync="visible" @close="closeDialog"> |
||||||
|
<el-form label-width="25%" ref="edit" :rules="rules" :model="edit"> |
||||||
|
<el-input v-show="false" v-model="edit.id"/> |
||||||
|
<el-form-item label="名称" prop="name"> |
||||||
|
<el-col :span="18"> |
||||||
|
<el-input v-model="edit.name"/> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="visible = false">取消</el-button> |
||||||
|
<el-button type="primary" @click="handleSave">保存</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { saveOrUpdate } from '@/api/questionnaire' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'EditDialog', |
||||||
|
props: { |
||||||
|
row: { |
||||||
|
type: Object, |
||||||
|
require: true |
||||||
|
}, |
||||||
|
show: { |
||||||
|
type: Boolean, |
||||||
|
default: () => false |
||||||
|
} |
||||||
|
}, |
||||||
|
components: {}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
edit: { id: null }, |
||||||
|
visible: this.show, |
||||||
|
rules: { |
||||||
|
name: [{ required: true, message: '请输入', trigger: 'blur' }] |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
title() { |
||||||
|
return (this.edit.id === null ? '新增' : '编辑') |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
visible() { |
||||||
|
this.$emit('update:show', false) |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
|
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
if (this.row !== null) { |
||||||
|
this.edit = JSON.parse(JSON.stringify(this.row)) |
||||||
|
// console.log(this.edit) |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
closeDialog() { |
||||||
|
// 关闭 |
||||||
|
}, |
||||||
|
handleSave() { |
||||||
|
this.$refs.edit.validate(valid => { |
||||||
|
if (valid) { |
||||||
|
const loading = this.$loading({ |
||||||
|
background: this.$elementGlobal.loadingBackground |
||||||
|
}) |
||||||
|
saveOrUpdate(this.edit) |
||||||
|
.then(r => { |
||||||
|
loading.close() |
||||||
|
if (r.data === true) { |
||||||
|
this.visible = false |
||||||
|
this.$message({ type: 'success', message: '保存成功!' }) |
||||||
|
this.$emit('saved') |
||||||
|
} else { |
||||||
|
this.$message({ type: 'error', message: '保存失败!' }) |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
loading.close() |
||||||
|
}) |
||||||
|
} else { |
||||||
|
return false |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,299 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container full-height"> |
||||||
|
<!-- 查询条件 --> |
||||||
|
<el-card class="filter-container" shadow="never"> |
||||||
|
<el-form label-width="110px" :inline="true" :model="condition" @submit.native.prevent |
||||||
|
@keyup.enter.native="conditionQuery" |
||||||
|
> |
||||||
|
<!--查询条件--> |
||||||
|
<el-form-item label="名称" prop="name"> |
||||||
|
<el-input v-model="condition.name" placeholder="通过名称查找" clearable/> |
||||||
|
</el-form-item> |
||||||
|
<!-- <el-form-item label="" prop="">--> |
||||||
|
<!-- <el-input v-model="condition." placeholder="请输入" />--> |
||||||
|
<!-- </el-form-item>--> |
||||||
|
<!--End--> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="primary" @click="conditionQuery">查询</el-button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button @click="handleResetCondition">重置</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<!-- 表格操作 --> |
||||||
|
<el-card class="table-operate-container" shadow="never"> |
||||||
|
<el-button size="mini" icon="el-icon-plus" type="primary" plain @click="addRow">添加</el-button> |
||||||
|
<el-button :disabled="!hasSelection" type="danger" size="mini" @click="removeBatchRows">批量删除 |
||||||
|
</el-button> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<!-- 表格 --> |
||||||
|
<div ref="tableContainer" class="table-container"> |
||||||
|
<!-- 表格主体 --> |
||||||
|
<el-table ref="listTable" v-loading="selectLoading" :max-height="tableMaxHeight" :data="tableData" border |
||||||
|
style="width: 100%" @row-click="handleRowClick" @selection-change="handleSelectionChange" |
||||||
|
> |
||||||
|
<el-table-column type="selection" width="40" align="center"/> |
||||||
|
<el-table-column type="index" label="序号" width="60" align="center"/> |
||||||
|
<el-table-column property="name" label="名称" min-width="25%" align="center"/> |
||||||
|
<el-table-column property="hasSubjectCount" label="已选题目" width="100" align="center"> |
||||||
|
<template v-slot="scope"> |
||||||
|
{{ scope.row.hasSubjectCount }}道 |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column property="status" label="状态" width="120" align="center"> |
||||||
|
<template v-slot="scope"> |
||||||
|
<el-tooltip |
||||||
|
v-if="scope.row.id" |
||||||
|
:content="formatterStatus(scope.row.status)" |
||||||
|
placement="top" |
||||||
|
> |
||||||
|
<el-switch |
||||||
|
v-model="scope.row.status" |
||||||
|
:active-value="1" |
||||||
|
:inactive-value="0" |
||||||
|
@click.stop.native |
||||||
|
@change="handleStatusChange(scope.row)" |
||||||
|
/> |
||||||
|
</el-tooltip> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<!--<el-table-column property="" label="" min-width="25%" align="center" />--> |
||||||
|
<!--<el-table-column property="" label="" width="200" align="center" />--> |
||||||
|
<el-table-column label="操作" width="250" align="center"> |
||||||
|
<template v-slot="scope"> |
||||||
|
<el-button size="mini" @click.stop="handleChooseSubject(scope.row)">选择题目</el-button> |
||||||
|
<el-button size="mini" @click.stop="handleEdit(scope.row)">编辑</el-button> |
||||||
|
<el-button type="danger" plain size="mini" @click.stop="handleRemove(scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<!-- End 表格主体 --> |
||||||
|
|
||||||
|
<!-- 表格页码控件 --> |
||||||
|
<div class="pagination-container"> |
||||||
|
<el-pagination background layout="total, sizes, prev, pager, next,jumper" |
||||||
|
:current-page.sync="condition.pageNumber" :page-size.sync="condition.pageSize" |
||||||
|
:page-sizes="[10, 20, 30, 50, 100]" :total="total" @size-change="conditionQuery" |
||||||
|
@current-change="conditionQuery" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<!-- End 表格页码控件 --> |
||||||
|
</div> |
||||||
|
<!-- End 表格 --> |
||||||
|
|
||||||
|
<!-- 编辑弹窗 --> |
||||||
|
<edit-dialog v-if="showDialog" :row="editRowData" :show.sync="showDialog" :is-add="isAddDialog" |
||||||
|
@saved="conditionQuery" |
||||||
|
/> |
||||||
|
|
||||||
|
<choose-subject-dialog v-if="chooseSubjectDialog.show" :row="chooseSubjectDialog.row" |
||||||
|
:show.sync="chooseSubjectDialog.show" @saved="conditionQuery" |
||||||
|
/> |
||||||
|
|
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
/** |
||||||
|
* @version 2.0 |
||||||
|
*/ |
||||||
|
|
||||||
|
/* Base */ |
||||||
|
import { page, remove, updateStatus } from '@/api/questionnaire' |
||||||
|
import EditDialog from '@/views/questionnaire/edit' |
||||||
|
import ChooseSubjectDialog from '@/views/questionnaire/chooseSubject' |
||||||
|
|
||||||
|
const default_condition = { |
||||||
|
pageNumber: 1, |
||||||
|
pageSize: 10 |
||||||
|
} |
||||||
|
/* ↑ Base */ |
||||||
|
export default { |
||||||
|
name: 'Questionnaire', |
||||||
|
components: { ChooseSubjectDialog, EditDialog }, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
chooseSubjectDialog: { show: false, row: null }, |
||||||
|
/* Edit Dialog */ |
||||||
|
editRowData: null, |
||||||
|
showDialog: false, |
||||||
|
isAddDialog: null, |
||||||
|
/* ↑ Edit Dialog */ |
||||||
|
/* Base */ |
||||||
|
condition: JSON.parse(JSON.stringify(default_condition)), |
||||||
|
tableData: [], |
||||||
|
total: null, |
||||||
|
selectLoading: false, |
||||||
|
tableMaxHeight: null, |
||||||
|
multipleSelection: [] |
||||||
|
/* ↑ Base */ |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
hasSelection() { |
||||||
|
return this.multipleSelection.length > 1 |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: {}, |
||||||
|
created() { |
||||||
|
|
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.conditionQuery() |
||||||
|
/* Base */ |
||||||
|
this.resizeTable() |
||||||
|
window.onresize = () => { |
||||||
|
return (() => { |
||||||
|
this.resizeTable() |
||||||
|
})() |
||||||
|
} |
||||||
|
/* ↑ Base */ |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleChooseSubject(row) { |
||||||
|
this.chooseSubjectDialog.show = true |
||||||
|
this.chooseSubjectDialog.row = row |
||||||
|
}, |
||||||
|
formatterStatus(status) { |
||||||
|
return status === 0 ? '禁用' : '启用' |
||||||
|
}, |
||||||
|
handleStatusChange(row) { |
||||||
|
// 保存点击之后v-modeld的值(1，0) ，类型不同，不能生效 |
||||||
|
const status = row.status |
||||||
|
// 保持switch点击前的状态 |
||||||
|
row.status = 1 - parseInt(row.status) |
||||||
|
const title = this.formatterStatus(status) + '这个问卷?' |
||||||
|
this.$confirm(title, '提示', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
const loading = this.$loading({ background: this.$elementGlobal.loadingBackground }) |
||||||
|
let data = JSON.parse(JSON.stringify(row)) |
||||||
|
data.status = status |
||||||
|
updateStatus(data).then((r) => { |
||||||
|
loading.close() |
||||||
|
row.status = status // 这一步很重要，row.status会根据status的值开启或关闭开关 |
||||||
|
this.$message({ type: 'success', message: '修改成功!' }) |
||||||
|
this.conditionQuery() |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
loading.close() |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
/* Base */ |
||||||
|
addRow() { |
||||||
|
// 表格操作 - 添加 |
||||||
|
this.isAddDialog = true |
||||||
|
this.editRowData = null |
||||||
|
this.showDialog = true |
||||||
|
}, |
||||||
|
handleRemove(row) { |
||||||
|
// 表格 - 操作列 - 删除 |
||||||
|
let title = '确定要删除吗? 该操作可能无法恢复!' |
||||||
|
this.$confirm(title, '提示', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
const loading = this.$loading({ |
||||||
|
background: this.$elementGlobal.loadingBackground |
||||||
|
}) |
||||||
|
remove([row.id]).then(r => { |
||||||
|
loading.close() |
||||||
|
if (r.data) { |
||||||
|
this.$message({ |
||||||
|
type: 'success', |
||||||
|
message: '操作成功!' |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.$message({ |
||||||
|
type: 'error', |
||||||
|
message: '操作失败!' |
||||||
|
}) |
||||||
|
} |
||||||
|
this.conditionQuery() |
||||||
|
}).catch(e => { |
||||||
|
loading.close() |
||||||
|
console.log(e) |
||||||
|
}) |
||||||
|
}).catch(() => { |
||||||
|
|
||||||
|
}) |
||||||
|
}, |
||||||
|
removeBatchRows() { |
||||||
|
// 表格操作 - 批量删除 |
||||||
|
const h = this.$createElement |
||||||
|
this.$confirm(h('p', null, [ |
||||||
|
h('p', null, '确定要删除 ' + this.multipleSelection.length + ' 个吗?'), |
||||||
|
h('p', { style: 'color: #f80' }, ' 该操作可能无法恢复!') |
||||||
|
]), '提示', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
const loading = this.$loading({ |
||||||
|
background: this.$elementGlobal.loadingBackground |
||||||
|
}) |
||||||
|
remove(this.multipleSelection.map(e => e.id)).then(r => { |
||||||
|
loading.close() |
||||||
|
if (r.data) { |
||||||
|
this.$message({ |
||||||
|
type: 'success', |
||||||
|
message: '操作成功!' |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.$message({ |
||||||
|
type: 'error', |
||||||
|
message: '操作失败!' |
||||||
|
}) |
||||||
|
} |
||||||
|
this.conditionQuery() |
||||||
|
}).catch(e => { |
||||||
|
loading.close() |
||||||
|
console.log(e) |
||||||
|
}) |
||||||
|
}).catch(() => { |
||||||
|
|
||||||
|
}) |
||||||
|
}, |
||||||
|
// 表格 - 编辑行 |
||||||
|
handleEdit(row) { |
||||||
|
this.isAddDialog = false |
||||||
|
this.showDialog = true |
||||||
|
this.editRowData = row |
||||||
|
}, |
||||||
|
// 表格 - 查询表数据 |
||||||
|
conditionQuery() { |
||||||
|
this.selectLoading = true |
||||||
|
page(this.condition).then(r => { |
||||||
|
this.selectLoading = false |
||||||
|
this.tableData = r.data.rows |
||||||
|
this.total = r.data.total |
||||||
|
// console.log('r.data -> ', r.data) |
||||||
|
}).catch(e => { |
||||||
|
this.selectLoading = false |
||||||
|
console.log('query error -> ', e) |
||||||
|
}) |
||||||
|
}, |
||||||
|
resizeTable() { |
||||||
|
this.tableMaxHeight = window.innerHeight - (this.$refs.tableContainer.offsetTop + 100) |
||||||
|
}, |
||||||
|
// 重置表格查询条件 |
||||||
|
handleResetCondition() { |
||||||
|
this.condition = Object.assign({}, default_condition) |
||||||
|
}, |
||||||
|
// [事件]表格 - 点击行 |
||||||
|
handleRowClick(row) { |
||||||
|
this.$refs.listTable.toggleRowSelection(row) |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val |
||||||
|
} |
||||||
|
/* ↑ Base */ |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,182 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog ref="dialogForm" width="65%" :title="title" :visible.sync="visible" @close="closeDialog"> |
||||||
|
<el-form label-width="20%" ref="edit" :rules="rules" :model="edit"> |
||||||
|
<el-input v-show="false" v-model="edit.id"/> |
||||||
|
<el-row> |
||||||
|
<el-col :span="10" :offset="2" label-width="30%"> |
||||||
|
<el-form-item label="标题" prop="title"> |
||||||
|
<el-input v-model="edit.title"/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="7" :offset="1"> |
||||||
|
<el-form-item label="排序" prop="sort" label-width="30%"> |
||||||
|
<el-input v-model="edit.sort"/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-form-item label="题目描述" prop="content"> |
||||||
|
<el-col :span="19"> |
||||||
|
<el-input v-model="edit.content"/> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="题目类型" prop="type"> |
||||||
|
<el-col :span="18" :offset="1"> |
||||||
|
<el-radio-group v-model="edit.type"> |
||||||
|
<el-radio :label="0">单选</el-radio> |
||||||
|
<el-radio :label="1">多选</el-radio> |
||||||
|
<el-radio :label="2">文字</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<el-card shadow="always" :body-style="{ padding: '5px' }" v-if="edit.type<2"> |
||||||
|
<div slot="header"> |
||||||
|
<div v-for="editItem in edit.items" :key="editItem.itemId"> |
||||||
|
<el-card shadow="hover" :body-style="{ padding: '20px 10px 0px 10px' }"> |
||||||
|
<el-form label-width="25%" size="mini"> |
||||||
|
<el-row> |
||||||
|
<el-col :span="9"> |
||||||
|
<el-form-item label="选项描述"> |
||||||
|
<el-input v-model="editItem.content"/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="4"> |
||||||
|
<el-form-item label="分值" label-width="45%"> |
||||||
|
<el-input v-model="editItem.points"/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="4"> |
||||||
|
<el-form-item label="权重" label-width="45%"> |
||||||
|
<el-input v-model="editItem.weights"/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-form-item label="正确答案" label-width="50%"> |
||||||
|
<el-radio-group v-model="editItem.isRight"> |
||||||
|
<el-radio-button label="1">是</el-radio-button> |
||||||
|
<el-radio-button label="0">否</el-radio-button> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="2" style="text-align: center"> |
||||||
|
<el-popconfirm title="删除这个选项" hide-icon @confirm="handleRemoveItem(editItem)" placement="top"> |
||||||
|
<el-button slot="reference" round circle icon="el-icon-close" size="mini"/> |
||||||
|
</el-popconfirm> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-form> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-col :offset="1"> |
||||||
|
<el-button class="el-icon-plus" type="text" @click="handleAddItem">添加一个选项</el-button> |
||||||
|
</el-col> |
||||||
|
</el-card> |
||||||
|
<div slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="visible = false">取消</el-button> |
||||||
|
<el-button type="primary" @click="handleSave">保存</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { items, saveOrUpdate } from '@/api/subject' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'EditDialog', |
||||||
|
props: { |
||||||
|
row: { |
||||||
|
type: Object, |
||||||
|
require: true |
||||||
|
}, |
||||||
|
show: { |
||||||
|
type: Boolean, |
||||||
|
default: () => false |
||||||
|
} |
||||||
|
}, |
||||||
|
components: {}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
edit: { id: null }, |
||||||
|
visible: this.show, |
||||||
|
rules: { |
||||||
|
title: [{ required: true, message: '请输入标题', trigger: 'blur' }], |
||||||
|
content: [{ required: true, message: '请输入题目描述', trigger: 'blur' }], |
||||||
|
type: [{ required: true, message: '请选择题目类型' }] |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
title() { |
||||||
|
return (this.edit.id === null ? '新增' : '编辑') |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
visible() { |
||||||
|
this.$emit('update:show', false) |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
|
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
if (this.row !== null) { |
||||||
|
this.edit = JSON.parse(JSON.stringify(this.row)) |
||||||
|
// console.log(this.edit) |
||||||
|
} |
||||||
|
items({ id: this.row.id }).then(r => { |
||||||
|
this.edit.items = r.data.items |
||||||
|
console.log('edit.items -> ', this.edit.items) |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleRemoveItem(i) { |
||||||
|
this.edit.items = this.edit.items.filter(e => e !== i) |
||||||
|
}, |
||||||
|
handleAddItem() { |
||||||
|
this.edit.items.push({ isRight: 0 }) |
||||||
|
// console.log('edit -> ', this.edit) |
||||||
|
}, |
||||||
|
closeDialog() { |
||||||
|
// 关闭 |
||||||
|
}, |
||||||
|
handleSave() { |
||||||
|
this.$refs.edit.validate(valid => { |
||||||
|
if (valid) { |
||||||
|
const loading = this.$loading({ |
||||||
|
background: this.$elementGlobal.loadingBackground |
||||||
|
}) |
||||||
|
// 避免保存到空的选项 |
||||||
|
this.edit.items = this.edit.items.filter(e => { |
||||||
|
let empty = true |
||||||
|
for (let key in e) { |
||||||
|
if (key !== 'isRight' && e[key] != null) empty = false |
||||||
|
} |
||||||
|
return empty |
||||||
|
}) |
||||||
|
saveOrUpdate(this.edit) |
||||||
|
.then(r => { |
||||||
|
loading.close() |
||||||
|
if (r.data === true) { |
||||||
|
this.visible = false |
||||||
|
this.$message({ type: 'success', message: '保存成功!' }) |
||||||
|
this.$emit('saved') |
||||||
|
} else { |
||||||
|
this.$message({ type: 'error', message: '保存失败!' }) |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
loading.close() |
||||||
|
}) |
||||||
|
} else { |
||||||
|
return false |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,255 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container full-height"> |
||||||
|
<!-- 查询条件 --> |
||||||
|
<el-card class="filter-container" shadow="never"> |
||||||
|
<el-form label-width="100px" :inline="true" :model="condition" @submit.native.prevent |
||||||
|
@keyup.enter.native="conditionQuery" |
||||||
|
> |
||||||
|
<!--查询条件--> |
||||||
|
<el-form-item label="标题" prop="title"> |
||||||
|
<el-input v-model="condition.title" placeholder="根据标题查找" clearable/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="题目类型" prop="type"> |
||||||
|
<el-select v-model="condition.type" clearable placeholder="请选择题目类型"> |
||||||
|
<el-option label="单选" :value="0"/> |
||||||
|
<el-option label="多选" :value="1"/> |
||||||
|
<el-option label="文字" :value="2"/> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<!-- <el-form-item label="" prop="">--> |
||||||
|
<!-- <el-input v-model="condition." placeholder="请输入" />--> |
||||||
|
<!-- </el-form-item>--> |
||||||
|
<!--End--> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="primary" @click="conditionQuery">查询</el-button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button @click="handleResetCondition">重置</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<!-- 表格操作 --> |
||||||
|
<el-card class="table-operate-container" shadow="never"> |
||||||
|
<el-button size="mini" icon="el-icon-plus" type="primary" plain @click="addRow">添加</el-button> |
||||||
|
<el-button :disabled="!hasSelection" type="danger" size="mini" @click="removeBatchRows">批量删除 |
||||||
|
</el-button> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<!-- 表格 --> |
||||||
|
<div ref="tableContainer" class="table-container"> |
||||||
|
<!-- 表格主体 --> |
||||||
|
<el-table ref="listTable" v-loading="selectLoading" :max-height="tableMaxHeight" :data="tableData" border |
||||||
|
style="width: 100%" @row-click="handleRowClick" @selection-change="handleSelectionChange" |
||||||
|
> |
||||||
|
<el-table-column type="selection" width="40" align="center"/> |
||||||
|
<el-table-column type="index" label="序号" width="60" align="center"/> |
||||||
|
<el-table-column property="title" label="标题" width="180" align="center"/> |
||||||
|
<el-table-column property="content" label="内容" min-width="25%" align="center"/> |
||||||
|
<el-table-column property="type" label="类型" width="70" align="center"> |
||||||
|
<template v-slot="scope"> |
||||||
|
<el-tag v-if="scope.row.type === 0">单选</el-tag> |
||||||
|
<el-tag type="success" v-if="scope.row.type === 1">多选</el-tag> |
||||||
|
<el-tag type="warning" v-if="scope.row.type === 2">文字</el-tag> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column property="sort" label="排列" width="70" align="center"/> |
||||||
|
<!--<el-table-column property="" label="" min-width="25%" align="center" />--> |
||||||
|
<!--<el-table-column property="" label="" width="200" align="center" />--> |
||||||
|
<el-table-column label="操作" width="200" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button size="mini" @click.stop="handleEdit(scope.row)">编辑</el-button> |
||||||
|
<el-button type="danger" plain size="mini" @click.stop="handleRemove(scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<!-- End 表格主体 --> |
||||||
|
|
||||||
|
<!-- 表格页码控件 --> |
||||||
|
<div class="pagination-container"> |
||||||
|
<el-pagination background layout="total, sizes, prev, pager, next,jumper" |
||||||
|
:current-page.sync="condition.pageNumber" :page-size.sync="condition.pageSize" |
||||||
|
:page-sizes="[10, 20, 30, 50, 100]" :total="total" @size-change="conditionQuery" |
||||||
|
@current-change="conditionQuery" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<!-- End 表格页码控件 --> |
||||||
|
</div> |
||||||
|
<!-- End 表格 --> |
||||||
|
|
||||||
|
<!-- 编辑弹窗 --> |
||||||
|
<edit-dialog v-if="showDialog" :row="editRowData" :show.sync="showDialog" :is-add="isAddDialog" |
||||||
|
@saved="conditionQuery" |
||||||
|
/> |
||||||
|
|
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
/** |
||||||
|
* @version 2.0 |
||||||
|
*/ |
||||||
|
|
||||||
|
/* Base */ |
||||||
|
import { page, remove } from '@/api/subject' |
||||||
|
import EditDialog from '@/views/subject/edit' |
||||||
|
|
||||||
|
const default_condition = { |
||||||
|
pageNumber: 1, |
||||||
|
pageSize: 10 |
||||||
|
} |
||||||
|
/* ↑ Base */ |
||||||
|
export default { |
||||||
|
name: 'Subject', |
||||||
|
components: { EditDialog }, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
/* Edit Dialog */ |
||||||
|
editRowData: null, |
||||||
|
showDialog: false, |
||||||
|
isAddDialog: null, |
||||||
|
/* ↑ Edit Dialog */ |
||||||
|
/* Base */ |
||||||
|
condition: JSON.parse(JSON.stringify(default_condition)), |
||||||
|
tableData: [], |
||||||
|
total: null, |
||||||
|
selectLoading: false, |
||||||
|
tableMaxHeight: null, |
||||||
|
multipleSelection: [] |
||||||
|
/* ↑ Base */ |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
hasSelection() { |
||||||
|
return this.multipleSelection.length > 1 |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: {}, |
||||||
|
created() { |
||||||
|
|
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
/* Base */ |
||||||
|
this.resizeTable() |
||||||
|
window.onresize = () => { |
||||||
|
return (() => { |
||||||
|
this.resizeTable() |
||||||
|
})() |
||||||
|
} |
||||||
|
/* ↑ Base */ |
||||||
|
this.conditionQuery() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/* Base */ |
||||||
|
addRow() { |
||||||
|
// 表格操作 - 添加 |
||||||
|
this.isAddDialog = true |
||||||
|
this.editRowData = null |
||||||
|
this.showDialog = true |
||||||
|
}, |
||||||
|
handleRemove(row) { |
||||||
|
// 表格 - 操作列 - 删除 |
||||||
|
let title = '确定要删除吗? 该操作可能无法恢复!' |
||||||
|
this.$confirm(title, '提示', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
const loading = this.$loading({ |
||||||
|
background: this.$elementGlobal.loadingBackground |
||||||
|
}) |
||||||
|
remove([row.id]).then(r => { //todo remove函数未导入 |
||||||
|
loading.close() |
||||||
|
if (r.data) { |
||||||
|
this.$message({ |
||||||
|
type: 'success', |
||||||
|
message: '操作成功!' |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.$message({ |
||||||
|
type: 'error', |
||||||
|
message: '操作失败!' |
||||||
|
}) |
||||||
|
} |
||||||
|
this.conditionQuery() |
||||||
|
}).catch(e => { |
||||||
|
loading.close() |
||||||
|
console.log(e) |
||||||
|
}) |
||||||
|
}).catch(() => { |
||||||
|
|
||||||
|
}) |
||||||
|
}, |
||||||
|
removeBatchRows() { |
||||||
|
// 表格操作 - 批量删除 |
||||||
|
const h = this.$createElement |
||||||
|
this.$confirm(h('p', null, [ |
||||||
|
h('p', null, '确定要删除 ' + this.multipleSelection.length + ' 个吗?'), |
||||||
|
h('p', { style: 'color: #f80' }, ' 该操作可能无法恢复!') |
||||||
|
]), '提示', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
const loading = this.$loading({ |
||||||
|
background: this.$elementGlobal.loadingBackground |
||||||
|
}) |
||||||
|
remove(this.multipleSelection.map(e => e.id)).then(r => { //todo remove函数未导入 |
||||||
|
loading.close() |
||||||
|
if (r.data) { |
||||||
|
this.$message({ |
||||||
|
type: 'success', |
||||||
|
message: '操作成功!' |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.$message({ |
||||||
|
type: 'error', |
||||||
|
message: '操作失败!' |
||||||
|
}) |
||||||
|
} |
||||||
|
this.conditionQuery() |
||||||
|
}).catch(e => { |
||||||
|
loading.close() |
||||||
|
console.log(e) |
||||||
|
}) |
||||||
|
}).catch(() => { |
||||||
|
|
||||||
|
}) |
||||||
|
}, |
||||||
|
// 表格 - 编辑行 |
||||||
|
handleEdit(row) { |
||||||
|
this.isAddDialog = false |
||||||
|
this.showDialog = true |
||||||
|
this.editRowData = row |
||||||
|
}, |
||||||
|
// 表格 - 查询表数据 |
||||||
|
conditionQuery() { |
||||||
|
this.selectLoading = true |
||||||
|
page(this.condition).then(r => { |
||||||
|
this.selectLoading = false |
||||||
|
this.tableData = r.data.rows |
||||||
|
this.total = r.data.total |
||||||
|
}).catch(e => { |
||||||
|
this.selectLoading = false |
||||||
|
console.log('query error -> ', e) |
||||||
|
}) |
||||||
|
}, |
||||||
|
resizeTable() { |
||||||
|
this.tableMaxHeight = window.innerHeight - (this.$refs.tableContainer.offsetTop + 100) |
||||||
|
}, |
||||||
|
// 重置表格查询条件 |
||||||
|
handleResetCondition() { |
||||||
|
this.condition = Object.assign({}, default_condition) |
||||||
|
}, |
||||||
|
// [事件]表格 - 点击行 |
||||||
|
handleRowClick(row) { |
||||||
|
this.$refs.listTable.toggleRowSelection(row) |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val |
||||||
|
} |
||||||
|
/* ↑ Base */ |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue