Compare commits
96 Commits
126 changed files with 27716 additions and 20090 deletions
@ -1,6 +1,6 @@ |
||||
{ |
||||
"tabWidth": 4, |
||||
"singleQuote": true, |
||||
"trailingComma": "none", |
||||
"printWidth": 140 |
||||
"tabWidth": 2, |
||||
"singleQuote": true, |
||||
"trailingComma": "none", |
||||
"printWidth": 140 |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -1,18 +1,19 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="keywords" content="深圳或然科技中台"> |
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> |
||||
<script src="/styles/tinymce/tinymce.min.js"></script> |
||||
<title>深圳或然科技中台</title> |
||||
</head> |
||||
<body> |
||||
<noscript> |
||||
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
</noscript> |
||||
<div id="app"></div> |
||||
<!-- built files will be auto injected --> |
||||
</body> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
||||
<meta name="keywords" content="深圳或然科技中台" /> |
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> |
||||
<meta name="viewport" content="width=device-width, user-scalable=yes, shrink-to-fit=no" /> |
||||
<title>深圳或然科技中台</title> |
||||
</head> |
||||
<body> |
||||
<noscript> |
||||
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
</noscript> |
||||
<div id="app"></div> |
||||
<!-- built files will be auto injected --> |
||||
<script src="/dev/styles/tinymce/tinymce.min.js"></script> |
||||
</body> |
||||
</html> |
||||
|
||||
@ -1,30 +1,52 @@ |
||||
<template> |
||||
<div id="app"> |
||||
<router-view></router-view> |
||||
</div> |
||||
<div id="app"> |
||||
<el-radio-group v-if="Setting.isDev" class="ip" v-model="ip" @change="ipChange"> |
||||
<el-radio :label="0">刘榕ip</el-radio> |
||||
<el-radio :label="1">陈赓ip</el-radio> |
||||
<el-radio :label="2">测试服ip</el-radio> |
||||
</el-radio-group> |
||||
<router-view></router-view> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'App', |
||||
created () { |
||||
//在页面加载时读取sessionStorage里的状态信息 |
||||
if (sessionStorage.getItem("store") ) { |
||||
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store")))) |
||||
} |
||||
|
||||
//在页面刷新时将vuex里的信息保存到sessionStorage里 |
||||
window.addEventListener("beforeunload",()=>{ |
||||
sessionStorage.getItem("token") && sessionStorage.setItem("store",JSON.stringify(this.$store.state)) |
||||
}) |
||||
import Setting from '@/setting' |
||||
export default { |
||||
name: 'App', |
||||
data () { |
||||
return { |
||||
Setting, |
||||
ip: localStorage.getItem('ip') ? +localStorage.getItem('ip') : 0, |
||||
}; |
||||
}, |
||||
created () { |
||||
window.exitSystem = () => { |
||||
sessionStorage.removeItem('token') |
||||
location.reload() |
||||
} |
||||
//在页面加载时读取sessionStorage里的状态信息 |
||||
if (sessionStorage.getItem("store")) { |
||||
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store")))) |
||||
} |
||||
|
||||
//在页面刷新时将vuex里的信息保存到sessionStorage里 |
||||
window.addEventListener("beforeunload", () => { |
||||
sessionStorage.getItem("token") && sessionStorage.setItem("store", JSON.stringify(this.$store.state)) |
||||
}) |
||||
}, |
||||
methods: { |
||||
ipChange (val) { |
||||
localStorage.setItem('ip', val) |
||||
location.reload() |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
@import "./assets/css/main.css"; |
||||
/* @import "./assets/css/color-dark.css"; */ |
||||
/*深色主题*/ |
||||
@import "./assets/css/theme-green/color-green.css"; |
||||
/* 浅绿色主题 */ |
||||
@import "./assets/css/main.css"; |
||||
/* @import "./assets/css/color-dark.css"; */ |
||||
/*深色主题*/ |
||||
@import "./assets/css/theme-green/color-green.css"; |
||||
/* 浅绿色主题 */ |
||||
</style> |
||||
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 371 B |
|
After Width: | Height: | Size: 330 B |
|
After Width: | Height: | Size: 243 B |
|
After Width: | Height: | Size: 341 B |
|
After Width: | Height: | Size: 244 B |
|
After Width: | Height: | Size: 437 B |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 593 B |
|
After Width: | Height: | Size: 766 B |
|
After Width: | Height: | Size: 545 B |
|
After Width: | Height: | Size: 545 B |
|
After Width: | Height: | Size: 768 B |
@ -1,253 +1,344 @@ |
||||
<template> |
||||
<div class="quill" ref="quill" :class="classes"> |
||||
<div ref="editor" :style="styles" v-loading="loading"></div> |
||||
<el-upload |
||||
:headers="headers" |
||||
:action="this.api.fileupload" |
||||
:before-upload="beforeUpload" |
||||
:on-success="editorUploadSuccess" |
||||
style="display: none"> |
||||
<el-button class="editorUpload" type="primary">点击上传</el-button> |
||||
</el-upload> |
||||
<div> |
||||
<el-radio-group v-if="!readonly && radio" class="type-radio" v-model="editorType" @change="typeChange"> |
||||
<el-radio label="0">富文本</el-radio> |
||||
<el-radio label="1">markdown</el-radio> |
||||
</el-radio-group> |
||||
|
||||
<div v-show="editorType == 0" class="quill" ref="quill" :class="classes"> |
||||
<div ref="editor" :style="styles" v-loading="loading"></div> |
||||
<Upload :max-size="1000" :limit="100" @beforeUpload="beforeUpload" @onSuccess="editorUploadSuccess" |
||||
style="display: none"> |
||||
<div slot="trigger"> |
||||
<el-button :id="'editorUpload' + index" type="primary">点击上传</el-button> |
||||
</div> |
||||
</Upload> |
||||
</div> |
||||
<mavon-editor class="md" v-model="mdVal" v-show="editorType == 1" ref="md" :ishljs="true" :subfield="false" |
||||
@change="mdChange" @imgAdd="imgAdd" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Quill from 'quill'; |
||||
import 'quill/dist/quill.core.css'; |
||||
import 'quill/dist/quill.snow.css'; |
||||
import 'quill/dist/quill.bubble.css'; |
||||
import toolbarOptions from './options' |
||||
|
||||
export default { |
||||
name: 'quill', |
||||
props: { |
||||
value: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
readonly: { |
||||
type: Boolean, |
||||
default:false |
||||
}, |
||||
toTop: { |
||||
type: Boolean, |
||||
default:true |
||||
}, |
||||
border: { |
||||
type: Boolean, |
||||
default:false |
||||
}, |
||||
height: { |
||||
type: Number |
||||
}, |
||||
minHeight: { |
||||
type: Number |
||||
}, |
||||
/* |
||||
* 原本的readOnly失效,对比其他项目，发现是quill版本不同导致， |
||||
* 使用props传入elseRead = 'true'，手动隐藏工具栏 |
||||
*/ |
||||
elseRead:{ |
||||
type:String,default:'false' |
||||
} |
||||
}, |
||||
data () { |
||||
return { |
||||
headers: { |
||||
token: sessionStorage.getItem('token') |
||||
}, |
||||
Quill: null, |
||||
currentValue: '', |
||||
options: { |
||||
theme: 'snow', |
||||
bounds: document.body, |
||||
debug: 'warn', |
||||
modules: { |
||||
toolbar: { |
||||
container: toolbarOptions, |
||||
handlers: { |
||||
'image': function (value) { |
||||
if (value) { |
||||
// 调用iview图片上传 |
||||
document.querySelector('.editorUpload').click() |
||||
} else { |
||||
this.Quill.format('image', false); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
placeholder: '', |
||||
readOnly: this.readonly |
||||
}, |
||||
loading: false |
||||
} |
||||
}, |
||||
computed: { |
||||
classes () { |
||||
return [ |
||||
{ |
||||
'quill-no-border': !this.border |
||||
} |
||||
]; |
||||
}, |
||||
styles () { |
||||
let style = {}; |
||||
if (this.minHeight) { |
||||
style.minHeight = `${this.minHeight}px`; |
||||
} |
||||
if (this.height) { |
||||
style.height = `${this.height}px`; |
||||
} |
||||
return style; |
||||
}, |
||||
import Quill from 'quill'; |
||||
import 'quill/dist/quill.core.css'; |
||||
import 'quill/dist/quill.snow.css'; |
||||
import 'quill/dist/quill.bubble.css'; |
||||
import toolbarOptions from './options' |
||||
import { mavonEditor } from 'mavon-editor' |
||||
import 'mavon-editor/dist/css/index.css' |
||||
import Upload from '@/components/upload'; |
||||
import Oss from '@/components/upload/upload.js' |
||||
|
||||
}, |
||||
watch: { |
||||
value: { |
||||
handler (val) { |
||||
if (val !== this.currentValue) { |
||||
this.currentValue = val; |
||||
if (this.Quill) { |
||||
this.Quill.pasteHTML(this.value); |
||||
} |
||||
} |
||||
}, |
||||
immediate: true |
||||
} |
||||
}, |
||||
created(){ |
||||
}, |
||||
mounted () { |
||||
this.init(); |
||||
// 处理工具栏隐藏样式 |
||||
if(this.elseRead==='true'){ |
||||
let children = this.$refs.quill.children[0].style |
||||
children.padding = '0' |
||||
children.overflow = 'hidden' |
||||
children.height = '0' |
||||
children.borderTop = '0' |
||||
} |
||||
}, |
||||
beforeDestroy () { |
||||
// 在组件销毁后销毁实例 |
||||
this.Quill = null; |
||||
}, |
||||
methods: { |
||||
init () { |
||||
const editor = this.$refs.editor; |
||||
// 初始化编辑器 |
||||
this.Quill = new Quill(editor, this.options); |
||||
const ins = this.Quill |
||||
// 默认值 |
||||
ins.pasteHTML(this.currentValue); |
||||
if(this.toTop){ |
||||
this.$nextTick(() => { |
||||
window.scrollTo(0,0) |
||||
}) |
||||
} |
||||
// 绑定事件 |
||||
ins.on('text-change', (delta, oldDelta, source) => { |
||||
const html = this.$refs.editor.children[0].innerHTML; |
||||
const text = ins.getText(); |
||||
const quill = this.Quill; |
||||
// 更新内部的值 |
||||
this.currentValue = html; |
||||
// 发出事件 v-model |
||||
this.$emit('input', html); |
||||
// 发出事件 |
||||
this.$emit('on-change', { html, text, quill }); |
||||
}); |
||||
// 将一些 quill 自带的事件传递出去 |
||||
ins.on('text-change', (delta, oldDelta, source) => { |
||||
this.$emit('on-text-change', delta, oldDelta, source); |
||||
}); |
||||
ins.on('selection-change', (range, oldRange, source) => { |
||||
this.$emit('on-selection-change', range, oldRange, source); |
||||
}); |
||||
ins.on('editor-change', (eventName, ...args) => { |
||||
this.$emit('on-editor-change', eventName, ...args); |
||||
}); |
||||
// 监听粘贴事件 |
||||
ins.root.addEventListener('paste', evt => { |
||||
if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) { |
||||
evt.preventDefault(); |
||||
// 检测是否粘贴的是图片 |
||||
[].forEach.call(evt.clipboardData.files, file => { |
||||
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) { |
||||
return |
||||
} |
||||
const param = new FormData() |
||||
param.append('file', file) |
||||
// 把图片上传到服务器，不然会直接把base64存到数据库 |
||||
this.$post(this.api.fileupload, param, { |
||||
headers: { "Content-Type": "multipart/form-data" } |
||||
}).then(res => { |
||||
var range = ins.getSelection() |
||||
if (range) { |
||||
// 在当前光标位置插入图片 |
||||
ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl) |
||||
// 将光标移动到图片后面 |
||||
ins.setSelection(range.index + 1) |
||||
} |
||||
}).catch(res => {}) |
||||
}); |
||||
} |
||||
}, false) |
||||
}, |
||||
beforeUpload(file){ |
||||
this.loading = true |
||||
}, |
||||
editorUploadSuccess (res) { |
||||
// 获取富文本组件实例 |
||||
let quill = this.Quill |
||||
// 如果上传成功 |
||||
if (res.data.filesResult.fileUrl) { |
||||
// 获取光标所在位置 |
||||
let lengths; |
||||
if ( quill.getSelection() == null){ |
||||
lengths = 1 |
||||
}else{ |
||||
lengths = quill.getSelection().index; |
||||
} |
||||
// 插入图片，res为服务器返回的图片链接地址 |
||||
quill.insertEmbed(lengths, 'image', res.data.filesResult.fileUrl) |
||||
// 调整光标到最后 |
||||
quill.setSelection(lengths + 1) |
||||
export default { |
||||
name: 'quill', |
||||
components: { |
||||
Upload, |
||||
mavonEditor |
||||
}, |
||||
props: { |
||||
value: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
readonly: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
toTop: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
border: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
height: { |
||||
type: Number |
||||
}, |
||||
minHeight: { |
||||
type: Number |
||||
}, |
||||
/* |
||||
* 原本的readOnly失效,对比其他项目，发现是quill版本不同导致， |
||||
* 使用props传入elseRead = 'true'，手动隐藏工具栏 |
||||
*/ |
||||
elseRead: { |
||||
type: String, default: 'false' |
||||
}, |
||||
// 当前富文本的索引。一个页面引入多个富文本的时候会无法获取到对应的实例，所以通过在父级存储实例的方式来保存 |
||||
index: { |
||||
type: Number, |
||||
default: 0 |
||||
}, |
||||
// 是否需要编辑器切换 |
||||
radio: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
// 编辑器切换 |
||||
type: { |
||||
type: String, |
||||
default: '0' |
||||
}, |
||||
}, |
||||
data () { |
||||
const that = this |
||||
return { |
||||
headers: { |
||||
token: sessionStorage.getItem('token') |
||||
}, |
||||
editorType: '0', |
||||
mdVal: '', |
||||
Quill: null, |
||||
currentValue: '', |
||||
options: { |
||||
theme: 'snow', |
||||
bounds: document.body, |
||||
debug: 'warn', |
||||
modules: { |
||||
toolbar: { |
||||
container: toolbarOptions, |
||||
handlers: { |
||||
'image': function (value) { |
||||
if (value) { |
||||
// 调用iview图片上传 |
||||
document.querySelector("#editorUpload" + that.index).click(); |
||||
} else { |
||||
this.$message.success('图片插入失败') |
||||
this.Quill.format('image', false); |
||||
} |
||||
this.loading = false |
||||
}, |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
placeholder: '', |
||||
readOnly: this.readonly |
||||
}, |
||||
loading: false |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.quill-no-border{ |
||||
.ql-toolbar.ql-snow{ |
||||
border: none; |
||||
border-bottom: 1px solid #e8eaec; |
||||
}, |
||||
computed: { |
||||
classes () { |
||||
return [ |
||||
{ |
||||
'quill-no-border': !this.border |
||||
} |
||||
.ql-container.ql-snow{ |
||||
border: none; |
||||
]; |
||||
}, |
||||
styles () { |
||||
let style = {}; |
||||
if (this.minHeight) { |
||||
style.minHeight = `${this.minHeight}px`; |
||||
} |
||||
if (this.height) { |
||||
style.height = `${this.height}px`; |
||||
} |
||||
return style; |
||||
}, |
||||
|
||||
}, |
||||
watch: { |
||||
type: { |
||||
handler (val) { |
||||
this.editorType = val |
||||
}, |
||||
immediate: true |
||||
}, |
||||
value: { |
||||
handler (val) { |
||||
if (this.type == 0) { |
||||
if (val !== this.currentValue) { |
||||
this.currentValue = val; |
||||
if (this.Quill) { |
||||
this.Quill.pasteHTML(this.value); |
||||
} |
||||
} |
||||
} |
||||
if (!this.mdVal) this.mdVal = val |
||||
}, |
||||
immediate: true |
||||
} |
||||
.else{ |
||||
.ql-toolbar.ql-snow{ |
||||
height: 0; |
||||
overflow: hidden; |
||||
padding: 0; |
||||
border-top: 0; |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.init(); |
||||
// 处理工具栏隐藏样式 |
||||
if (this.elseRead === 'true') { |
||||
let children = this.$refs.quill.children[0].style |
||||
children.padding = '0' |
||||
children.overflow = 'hidden' |
||||
children.height = '0' |
||||
children.border = '0' |
||||
} |
||||
/deep/.ql-snow { |
||||
position: relative; |
||||
.ql-tooltip { |
||||
position: absolute !important; |
||||
top: 0 !important; |
||||
left: -100px !important; |
||||
transform: translateY(10px); |
||||
}, |
||||
beforeDestroy () { |
||||
// 在组件销毁后销毁实例 |
||||
this.Quill = null; |
||||
}, |
||||
methods: { |
||||
// 富文本切换 |
||||
typeChange (val) { |
||||
this.$emit('update:type', val) |
||||
if (!this.mdVal) this.mdVal = this.value |
||||
}, |
||||
|
||||
init () { |
||||
const editor = this.$refs.editor; |
||||
// 初始化编辑器 |
||||
this.Quill = new Quill(editor, this.options); |
||||
const ins = this.Quill |
||||
// 默认值 |
||||
ins.pasteHTML(this.currentValue); |
||||
if (this.toTop) { |
||||
this.$nextTick(() => { |
||||
window.scrollTo(0, 0) |
||||
}) |
||||
} |
||||
// 绑定事件 |
||||
ins.on('text-change', (delta, oldDelta, source) => { |
||||
const html = this.$refs.editor.children[0].innerHTML; |
||||
const text = ins.getText(); |
||||
const quill = this.Quill; |
||||
// 更新内部的值 |
||||
this.currentValue = html; |
||||
// 发出事件 v-model |
||||
this.$emit('input', html); |
||||
// 发出事件 |
||||
this.$emit('on-change', { html, text, quill }); |
||||
}); |
||||
// 将一些 quill 自带的事件传递出去 |
||||
ins.on('text-change', (delta, oldDelta, source) => { |
||||
this.$emit('on-text-change', delta, oldDelta, source); |
||||
}); |
||||
ins.on('selection-change', (range, oldRange, source) => { |
||||
this.$emit('on-selection-change', range, oldRange, source); |
||||
}); |
||||
ins.on('editor-change', (eventName, ...args) => { |
||||
this.$emit('on-editor-change', eventName, ...args); |
||||
}); |
||||
// 监听粘贴事件 |
||||
ins.root.addEventListener('paste', evt => { |
||||
if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) { |
||||
evt.preventDefault(); |
||||
// 检测是否粘贴的是图片 |
||||
[].forEach.call(evt.clipboardData.files, file => { |
||||
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) { |
||||
return |
||||
} |
||||
// 把图片上传到oss，不然会直接把base64存到数据库 |
||||
Oss.upload(file).then(res => { |
||||
var range = ins.getSelection() |
||||
if (range) { |
||||
// 在当前光标位置插入图片 |
||||
ins.insertEmbed(range.index, 'image', res.url) |
||||
// 将光标移动到图片后面 |
||||
ins.setSelection(range.index + 1) |
||||
} |
||||
}) |
||||
}); |
||||
} |
||||
}, false) |
||||
}, |
||||
beforeUpload (file) { |
||||
this.loading = true |
||||
}, |
||||
// quill图片上传 |
||||
editorUploadSuccess (file) { |
||||
// 获取富文本组件实例 |
||||
let quill = this.Quill |
||||
// 如果上传成功 |
||||
if (file.url) { |
||||
// 获取光标所在位置 |
||||
let lengths; |
||||
if (quill.getSelection() == null) { |
||||
lengths = 1 |
||||
} else { |
||||
lengths = quill.getSelection().index; |
||||
} |
||||
// 插入图片，res为服务器返回的图片链接地址 |
||||
quill.insertEmbed(lengths, 'image', file.url) |
||||
// 调整光标到最后 |
||||
quill.setSelection(lengths + 1) |
||||
} else { |
||||
this.$message.success('图片插入失败') |
||||
} |
||||
this.loading = false |
||||
}, |
||||
|
||||
// 类型切换回调 |
||||
mdChange (val) { |
||||
this.$emit('input', val) |
||||
}, |
||||
// markdown图片上传 |
||||
imgAdd (pos, $file) { |
||||
let $vm = this.$refs.md |
||||
// 将图片上传到oss |
||||
Oss.upload($file).then(res => { |
||||
$vm.$img2Url(pos, res.url); |
||||
}) |
||||
}, |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.type-radio { |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.quill-no-border { |
||||
.ql-toolbar.ql-snow { |
||||
border: none; |
||||
border-bottom: 1px solid #e8eaec; |
||||
} |
||||
|
||||
.ql-container.ql-snow { |
||||
border: none; |
||||
} |
||||
} |
||||
|
||||
.else { |
||||
.ql-toolbar.ql-snow { |
||||
height: 0; |
||||
overflow: hidden; |
||||
padding: 0; |
||||
border-top: 0; |
||||
} |
||||
} |
||||
|
||||
/deep/.ql-snow { |
||||
position: relative; |
||||
|
||||
.ql-tooltip { |
||||
position: absolute !important; |
||||
top: 0 !important; |
||||
left: -100px !important; |
||||
transform: translateY(10px); |
||||
} |
||||
} |
||||
|
||||
.md { |
||||
max-height: 300px; |
||||
} |
||||
|
||||
/deep/.v-note-wrapper .v-note-panel { |
||||
min-height: 200px; |
||||
} |
||||
|
||||
/deep/.markdown-body { |
||||
ul { |
||||
list-style: disc; |
||||
|
||||
li { |
||||
list-style: inherit; |
||||
} |
||||
} |
||||
|
||||
ol { |
||||
list-style: decimal; |
||||
|
||||
li { |
||||
list-style: inherit; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,32 @@ |
||||
/** |
||||
* 阿里云oss配置 |
||||
* */ |
||||
|
||||
import router from '@/router/index' |
||||
import { Message } from 'element-ui' |
||||
export default async function () { |
||||
try { |
||||
let RE = localStorage.getItem('osc') |
||||
if (RE) { |
||||
RE = JSON.parse(RE) |
||||
} else { |
||||
sessionStorage.removeItem('token') |
||||
Message.error('登录过期，请重新登录！') |
||||
setTimeout(() => { |
||||
router.replace('/login') |
||||
}, 1500) |
||||
return false |
||||
} |
||||
return { |
||||
// oss账号信息
|
||||
config: { |
||||
region: 'oss-cn-shenzhen', |
||||
accessKeyId: RE[0], |
||||
accessKeySecret: RE[1], |
||||
bucket: 'huoran' |
||||
}, |
||||
// 上传成功url前置部分（成功回调没有返回url）
|
||||
preUrl: 'https://huoran.oss-cn-shenzhen.aliyuncs.com/' |
||||
} |
||||
} catch (e) { } |
||||
} |
||||
@ -0,0 +1,140 @@ |
||||
<template> |
||||
<el-upload :disabled="uploading" :before-upload="beforeUpload" :on-remove="onRemove" :on-error="uploadError" |
||||
:limit="limit" action="" :on-exceed="handleExceed" :show-file-list="showFiles" :file-list="fileList" |
||||
:http-request="handleRequest" name="file"> |
||||
<slot name="trigger"> |
||||
<el-button size="small" :loading="uploading">{{ uploading ? '正在上传' : '上传文件' }}</el-button> |
||||
</slot> |
||||
<div slot="tip" class="el-upload__tip"> |
||||
<el-progress v-if="uploading" class="upload-progress" :stroke-width="3" |
||||
:percentage="uploadProgress"></el-progress> |
||||
<slot name="tip"> |
||||
<p>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</p> |
||||
</slot> |
||||
</div> |
||||
</el-upload> |
||||
</template> |
||||
|
||||
<script> |
||||
import OSS from 'ali-oss' |
||||
import OssConfig from './config.js' |
||||
import Util from '@/libs/util' |
||||
export default { |
||||
props: { |
||||
// 最大允许上传个数 |
||||
limit: { |
||||
type: Number, |
||||
default: 1 |
||||
}, |
||||
// 单个文件最大大小(单位: Mb) |
||||
maxSize: { |
||||
type: Number, |
||||
default: 10 |
||||
}, |
||||
// 是否显示已上传文件列表 |
||||
showFileList: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
// 已上传文件列表 |
||||
fileList: { |
||||
type: Array, |
||||
default: () => [] |
||||
}, |
||||
// 是否要更新fileList（如果要使用自己的fileList，则这个值传false，一般情况不用给这个值） |
||||
changeFileList: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
// 已上传文件列表 |
||||
onRemove: { |
||||
type: Function, |
||||
default: new Function() |
||||
}, |
||||
}, |
||||
data () { |
||||
return { |
||||
client: null, |
||||
uploading: false, |
||||
uploadProgress: 0, |
||||
showFiles: this.showFileList, |
||||
Oss: {}, |
||||
}; |
||||
}, |
||||
mounted () { |
||||
this.initOss() |
||||
}, |
||||
methods: { |
||||
// 初始化oss |
||||
async initOss () { |
||||
this.Oss = await OssConfig() |
||||
this.client = new OSS(this.Oss.config) |
||||
}, |
||||
// 附件上传前 |
||||
beforeUpload (file) { |
||||
const oversize = file.size / 1024 / 1024 < this.maxSize |
||||
if (!oversize) Util.warningMsg(`请上传小于${this.maxSize}MB的附件！`) |
||||
if (oversize) { |
||||
this.$emit('beforeUpload', file) |
||||
return true |
||||
} else { |
||||
return false |
||||
} |
||||
}, |
||||
// 自定义进度条 |
||||
handleProgress (progress) { |
||||
this.uploadProgress = Number((progress * 100).toFixed(2)) |
||||
}, |
||||
// 自定义上传 |
||||
async handleRequest ({ file }) { |
||||
try { |
||||
this.uploadProgress = 0 |
||||
this.uploading = true |
||||
this.showFiles = false |
||||
// 上传到阿里云oss |
||||
const { name } = await this.client.multipartUpload(Date.now() + '.' + Util.getFileExt(file.name), file, { |
||||
progress: this.handleProgress |
||||
}); |
||||
|
||||
this.uploading = false |
||||
const url = this.Oss.preUrl + name |
||||
this.changeFileList && this.$emit('update:fileList', [ |
||||
...this.fileList, |
||||
{ |
||||
name: name, |
||||
url |
||||
} |
||||
]) |
||||
|
||||
this.showFiles = true |
||||
this.$emit('onSuccess', { |
||||
format: Util.getFileExt(file.name), |
||||
name: file.name, |
||||
url, |
||||
size: file.size, |
||||
}) |
||||
} catch (error) { } |
||||
}, |
||||
uploadError (err, file, fileList) { |
||||
this.$message({ |
||||
message: "上传出错，请重试！", |
||||
type: "error", |
||||
center: true |
||||
}) |
||||
}, |
||||
beforeRemove (file, fileList) { |
||||
return this.$confirm(`确定移除 ${file.name}？`); |
||||
}, |
||||
handleExceed (files, fileList) { |
||||
Util.warningMsg(`当前限制选择 ${this.limit} 个文件，如需更换，请删除上一个文件再重新选择！`); |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
/deep/.upload-progress { |
||||
max-width: 300px; |
||||
margin: 10px 0; |
||||
white-space: nowrap; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,40 @@ |
||||
// 阿里云oss上传
|
||||
|
||||
import OSS from 'ali-oss' |
||||
import OssConfig from './config' |
||||
import Util from '@/libs/util' |
||||
|
||||
let client = null |
||||
let Oss |
||||
// 初始化oss
|
||||
const initOss = async () => { |
||||
Oss = await OssConfig() |
||||
if (!client) client = new OSS(Oss.config) |
||||
} |
||||
initOss() |
||||
|
||||
export default { |
||||
// 上传文件
|
||||
upload (file) { |
||||
initOss() |
||||
return new Promise(async (resolve, reject) => { |
||||
try { |
||||
// 上传到阿里云oss
|
||||
const res = await client.multipartUpload(Date.now() + '.' + Util.getFileExt(file.name), file); |
||||
resolve({ |
||||
format: Util.getFileExt(file.name), |
||||
name: file.name, |
||||
url: Oss.preUrl + res.name, |
||||
size: file.size, |
||||
}) |
||||
} catch (error) { |
||||
reject() |
||||
} |
||||
}) |
||||
}, |
||||
// 删除文件（传完整url，不是没有https的name，因为很多接口没有存name，只存url，所以统一使用url）
|
||||
async del (url) { |
||||
initOss() |
||||
await client.delete(url.replace(Oss.preUrl, '')); |
||||
} |
||||
} |
||||
@ -0,0 +1,50 @@ |
||||
export default { |
||||
difficults: [ |
||||
{ |
||||
id: 'basic', |
||||
name: '基础', |
||||
coefficient: 0.2, // 难度系数，试卷里计算试卷难度专用
|
||||
theme: 'success', |
||||
}, |
||||
{ |
||||
id: 'easy', |
||||
name: '普通', |
||||
coefficient: 0.4, |
||||
theme: '', |
||||
}, |
||||
{ |
||||
id: 'medium', |
||||
name: '较难', |
||||
coefficient: 0.6, |
||||
theme: 'warning', |
||||
}, |
||||
{ |
||||
id: 'hard', |
||||
name: '难', |
||||
coefficient: 0.8, |
||||
theme: 'danger', |
||||
}, |
||||
], |
||||
questionTypes: [ |
||||
{ |
||||
id: 'single_choice', |
||||
name: '单选题' |
||||
}, |
||||
{ |
||||
id: 'multiple_choice', |
||||
name: '多选题' |
||||
}, |
||||
{ |
||||
id: 'judgement', |
||||
name: '判断题' |
||||
}, |
||||
{ |
||||
id: 'fill_blank', |
||||
name: '填空题' |
||||
}, |
||||
{ |
||||
id: 'essay', |
||||
name: '问答题' |
||||
}, |
||||
], |
||||
} |
||||
@ -0,0 +1,34 @@ |
||||
export default { |
||||
difficults: [ |
||||
{ |
||||
id: 1, |
||||
name: '简单' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '普通' |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: '较难' |
||||
}, |
||||
{ |
||||
id: 4, |
||||
name: '难' |
||||
}, |
||||
], |
||||
paperTypes: [ |
||||
{ |
||||
id: 0, |
||||
name: '练习' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '考核' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '竞赛' |
||||
}, |
||||
], |
||||
} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,56 @@ |
||||
// 导出压缩包
|
||||
import JSZip from 'jszip' |
||||
import FileSaver from 'file-saver' |
||||
|
||||
//文件以流的形式获取（参数url为文件链接地址）
|
||||
const getImgArrayBuffer = url => { |
||||
return new Promise((resolve, reject) => { |
||||
//通过请求获取文件blob格式
|
||||
let xmlhttp = new XMLHttpRequest(); |
||||
xmlhttp.open('GET', url, true); |
||||
xmlhttp.responseType = 'blob' |
||||
xmlhttp.onload = function () { |
||||
if (xmlhttp.status == 200) { |
||||
resolve(xmlhttp.response); |
||||
} else { |
||||
reject(xmlhttp.response); |
||||
} |
||||
}; |
||||
xmlhttp.send(); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* @param {String} zipName 压缩包名字 |
||||
* @param {Array} files 需要压缩的文件数组 |
||||
* @param {Function | undefined} callback 回调 |
||||
*/ |
||||
export default function (zipName, files, callback) { |
||||
var zip = new JSZip(); |
||||
var promises = []; |
||||
let cache = {}; |
||||
for (let item of files) { |
||||
// item.filePath为文件链接地址
|
||||
// item.fileName为文件名称
|
||||
if(item.filePath) { |
||||
const promise = getImgArrayBuffer(item.filePath).then((data) => { |
||||
// 下载文件, 并存成ArrayBuffer对象(blob)
|
||||
zip.file(item.fileName, data, { binary: true }); // 逐个添加文件
|
||||
cache[item.fileName] = data; |
||||
}); |
||||
promises.push(promise); |
||||
} else { |
||||
// 地址不存在时提示
|
||||
console.log(`附件${item.fileName}地址错误，下载失败`); |
||||
} |
||||
} |
||||
Promise.all(promises).then(() => { |
||||
zip.generateAsync({ type: "blob" }).then((content) => { |
||||
// 生成二进制流
|
||||
FileSaver.saveAs(content, zipName); // 利用file-saver保存文件 zipName: 自定义文件名
|
||||
callback && callback() |
||||
}); |
||||
}).catch((res) => { |
||||
console.log("文件压缩失败"); |
||||
}); |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -1,45 +1,45 @@ |
||||
const util = { |
||||
deepCopy(obj) { // 深拷贝
|
||||
if (obj == null) { |
||||
return null; |
||||
} |
||||
if (typeof obj !== "object") return obj; |
||||
let result; |
||||
if (Array.isArray(obj)) { |
||||
result = []; |
||||
obj.forEach(item => { |
||||
result.push( |
||||
typeof item === "object" && !(item instanceof Date) |
||||
? util.deepCopy(item) |
||||
: item |
||||
); |
||||
}); |
||||
} else { |
||||
result = {}; |
||||
Object.keys(obj).forEach(key => { |
||||
result[key] = |
||||
typeof obj[key] === "object" && !(obj[key] instanceof Date) |
||||
? util.deepCopy(obj[key]) |
||||
: obj[key]; |
||||
}); |
||||
} |
||||
return result; |
||||
}, |
||||
// 传入文件名和数据，下载文件
|
||||
downloadFileDirect(fileName,data) { |
||||
if ('download' in document.createElement('a')) { // 非IE下载
|
||||
const elink = document.createElement('a') |
||||
elink.download = fileName |
||||
elink.style.display = 'none' |
||||
elink.href = URL.createObjectURL(data) |
||||
document.body.appendChild(elink) |
||||
elink.click() |
||||
URL.revokeObjectURL(elink.href) // 释放URL 对象
|
||||
document.body.removeChild(elink) |
||||
} else { // IE10+下载
|
||||
navigator.msSaveBlob(data, fileName) |
||||
} |
||||
}, |
||||
deepCopy (obj) { // 深拷贝
|
||||
if (obj == null) { |
||||
return null; |
||||
} |
||||
if (typeof obj !== "object") return obj; |
||||
let result; |
||||
if (Array.isArray(obj)) { |
||||
result = []; |
||||
obj.forEach(item => { |
||||
result.push( |
||||
typeof item === "object" && !(item instanceof Date) |
||||
? util.deepCopy(item) |
||||
: item |
||||
); |
||||
}); |
||||
} else { |
||||
result = {}; |
||||
Object.keys(obj).forEach(key => { |
||||
result[key] = |
||||
typeof obj[key] === "object" && !(obj[key] instanceof Date) |
||||
? util.deepCopy(obj[key]) |
||||
: obj[key]; |
||||
}); |
||||
} |
||||
return result; |
||||
}, |
||||
// 传入文件名和数据，下载文件
|
||||
downloadFileDirect (fileName, data) { |
||||
if ('download' in document.createElement('a')) { // 非IE下载
|
||||
const elink = document.createElement('a') |
||||
elink.download = fileName |
||||
elink.style.display = 'none' |
||||
elink.href = URL.createObjectURL(data) |
||||
document.body.appendChild(elink) |
||||
elink.click() |
||||
URL.revokeObjectURL(elink.href) // 释放URL 对象
|
||||
document.body.removeChild(elink) |
||||
} else { // IE10+下载
|
||||
navigator.msSaveBlob(data, fileName) |
||||
} |
||||
}, |
||||
}; |
||||
|
||||
export default util; |
||||
@ -1,34 +1,59 @@ |
||||
<template> |
||||
<div class="wrapper"> |
||||
<v-head></v-head> |
||||
<v-sidebar></v-sidebar> |
||||
<div class="content-box" > |
||||
<div class="content"> |
||||
<transition name="move" mode="out-in"> |
||||
<!-- <keep-alive> --> |
||||
<router-view></router-view> |
||||
<!-- </keep-alive> --> |
||||
</transition> |
||||
<el-backtop target=".content"></el-backtop> |
||||
</div> |
||||
</div> |
||||
<div class="wrapper"> |
||||
<v-head></v-head> |
||||
<v-sidebar></v-sidebar> |
||||
<div class="content-box"> |
||||
<div class="content"> |
||||
<transition name="move" mode="out-in"> |
||||
<!-- <keep-alive> --> |
||||
<router-view></router-view> |
||||
<!-- </keep-alive> --> |
||||
</transition> |
||||
<el-backtop target=".content"></el-backtop> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import vHead from '../components/Header.vue'; |
||||
import vSidebar from '../components/Sidebar.vue'; |
||||
import Setting from "@/setting"; |
||||
import util from "@/libs/util"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
tagsList: [], |
||||
}; |
||||
}, |
||||
components: { |
||||
vHead, |
||||
vSidebar, |
||||
}, |
||||
created() { |
||||
data () { |
||||
return { |
||||
tagsList: [], |
||||
}; |
||||
}, |
||||
components: { |
||||
vHead, |
||||
vSidebar, |
||||
}, |
||||
created () { |
||||
// this.autoLogout() |
||||
}, |
||||
methods: { |
||||
// 长时间未操作,自动退出登录 |
||||
autoLogout () { |
||||
let lastTime = new Date().getTime(); |
||||
document.onmousedown = () => { |
||||
lastTime = new Date().getTime(); |
||||
}; |
||||
|
||||
const timer = setInterval(() => { |
||||
if (sessionStorage.getItem('token') && (new Date().getTime() - lastTime) > Setting.autoLogoutTime) { |
||||
clearInterval(timer) |
||||
util.errorMsg("由于您已经有三个小时没有操作，系统自动登出，请重新登录。页面刷新到登录页。"); |
||||
setTimeout(() => { |
||||
localStorage.removeItem('ms_username'); |
||||
localStorage.removeItem('token'); |
||||
sessionStorage.clear() |
||||
location.reload() |
||||
}, 1500); |
||||
} |
||||
}, 1000); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
@ -1,433 +1,568 @@ |
||||
<template> |
||||
<div class="login-wrap"> |
||||
<div class="header"> |
||||
<div class="logo"> |
||||
<img src="../assets/img/logo.png"> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="ms-login"> |
||||
<div class="ms-title"> |
||||
<!-- <p class="title">账号登录</p> --> |
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> |
||||
<el-menu-item index="1">账号登录</el-menu-item> |
||||
<el-menu-item index="2">手机号/邮箱登录</el-menu-item> |
||||
</el-menu> |
||||
<el-form v-show="activeIndex==='1'" :model="param" :rules="rules" ref="login" label-width="0px" style="margin-top: 40px"> |
||||
<el-form-item prop="account"> |
||||
<el-input @blur="blur" v-model="param.account" placeholder="请输入账号"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="password"> |
||||
<el-input |
||||
type="password" |
||||
placeholder="请输入密码" |
||||
v-model="param.password" |
||||
> |
||||
</el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="code" v-if="showVerify"> |
||||
<el-input |
||||
placeholder="请输入验证码" |
||||
v-model="param.code" |
||||
@keyup.enter.native="submitForm()" |
||||
> |
||||
</el-input> |
||||
<img @click="blur" :src="verificationIMG" class="verification" alt=""> |
||||
</el-form-item> |
||||
|
||||
<div style="width:100%;display:flex;justify-content: flex-end;"> |
||||
<el-button type="text" class="forget">忘记密码?</el-button> |
||||
</div> |
||||
<div class="login-btn"> |
||||
<el-button type="primary" @click="submitForm()">马上登录</el-button> |
||||
</div> |
||||
</el-form> |
||||
|
||||
<el-form v-show="activeIndex==='2'" :model="phoneOrEmail" :rules="phoneOrEmailrules" ref="phoneOrEmail" label-width="0px" style="margin-top: 40px"> |
||||
<el-form-item prop="account"> |
||||
<el-input @blur="phoneBlur" v-model="phoneOrEmail.account" placeholder="请输入电话/邮箱"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="password"> |
||||
<el-input |
||||
type="password" |
||||
placeholder="请输入密码" |
||||
v-model="phoneOrEmail.password" |
||||
> |
||||
</el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="code" v-if="showPhoneVerify"> |
||||
<el-input |
||||
placeholder="请输入验证码" |
||||
v-model="phoneOrEmail.code" |
||||
@keyup.enter.native="submitForm('phone')" |
||||
> |
||||
</el-input> |
||||
<img @click="phoneBlur" :src="PhoneVerificationIMG" class="verification" alt=""> |
||||
</el-form-item> |
||||
|
||||
<div style="width:100%;display:flex;justify-content: flex-end;"> |
||||
<el-button type="text" class="forget">忘记密码?</el-button> |
||||
</div> |
||||
<div class="login-btn"> |
||||
<el-button type="primary" @click="submitForm('phone')">马上登录</el-button> |
||||
</div> |
||||
</el-form> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-dialog title="绑定手机号" :visible.sync="phoneVisible" :close-on-click-modal="false" width="576px"> |
||||
<p class="tips">依据国家政策法规，需绑定手机号进行网络实名才可登录使用本平台</p> |
||||
<el-form ref="form" label-width="60px"> |
||||
<el-form-item label="手机号"> |
||||
<el-input placeholder="请输入手机号" v-model="phone" maxlength="11"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="验证码"> |
||||
<div style="display:flex;"> |
||||
<el-input v-model="phoneCode" placeholder="请输入验证码" maxlength="6"></el-input> |
||||
<el-button style="margin-left:10px" @click="sendPhoneCode" :disabled="phoneDisabled">{{phoneBtnText}}</el-button> |
||||
</div> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="phoneVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="phoneSubmit">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
<v-footer class="footer" ref="footer"></v-footer> |
||||
<div class="login-wrap"> |
||||
<div class="header"> |
||||
<div class="logo"> |
||||
<img src="../assets/img/logo.png"> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="ms-login"> |
||||
<div class="ms-title"> |
||||
<!-- <p class="title">账号登录</p> --> |
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> |
||||
<el-menu-item index="1">账号登录</el-menu-item> |
||||
<el-menu-item index="2">手机号/邮箱登录</el-menu-item> |
||||
</el-menu> |
||||
<el-form v-show="activeIndex === '1'" :model="param" :rules="rules" ref="login" label-width="0px" |
||||
style="margin-top: 20px"> |
||||
<el-form-item prop="account"> |
||||
<el-input @blur="blur" v-model="param.account" placeholder="请输入账号"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="password"> |
||||
<el-input type="password" placeholder="请输入密码" v-model="param.password"> |
||||
</el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="code" v-if="showVerify"> |
||||
<el-input placeholder="请输入验证码" v-model="param.code" @keyup.enter.native="submitForm()"> |
||||
</el-input> |
||||
<img @click="blur" :src="verificationIMG" class="verification" alt=""> |
||||
</el-form-item> |
||||
|
||||
<div style="width:100%;display:flex;justify-content: flex-end;"> |
||||
<el-button type="text" class="forget">忘记密码?</el-button> |
||||
</div> |
||||
<div class="login-btn"> |
||||
<el-button type="primary" @click="submitForm()">马上登录</el-button> |
||||
</div> |
||||
</el-form> |
||||
|
||||
<el-form v-show="activeIndex === '2'" :model="phoneOrEmail" :rules="phoneOrEmailrules" ref="phoneOrEmail" |
||||
label-width="0px" style="margin-top: 20px"> |
||||
<el-form-item prop="account"> |
||||
<el-input @blur="phoneBlur" v-model="phoneOrEmail.workNumber" placeholder="请输入电话/邮箱"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="password"> |
||||
<el-input type="password" placeholder="请输入密码" v-model="phoneOrEmail.password"> |
||||
</el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="code" v-if="showPhoneVerify"> |
||||
<el-input placeholder="请输入验证码" v-model="phoneOrEmail.code" @keyup.enter.native="submitForm('phone')"> |
||||
</el-input> |
||||
<img @click="phoneBlur" :src="PhoneVerificationIMG" class="verification" alt=""> |
||||
</el-form-item> |
||||
|
||||
<div style="width:100%;display:flex;justify-content: flex-end;"> |
||||
<el-button type="text" class="forget">忘记密码?</el-button> |
||||
</div> |
||||
<div class="login-btn"> |
||||
<el-button type="primary" @click="submitForm('phone')">马上登录</el-button> |
||||
</div> |
||||
</el-form> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-dialog title="绑定手机号" :visible.sync="phoneVisible" :close-on-click-modal="false" width="576px"> |
||||
<p class="tips">依据国家政策法规，需绑定手机号进行网络实名才可登录使用本平台</p> |
||||
<el-form ref="form" label-width="60px"> |
||||
<el-form-item label="手机号"> |
||||
<el-input placeholder="请输入手机号" v-model="phone" maxlength="11"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="验证码"> |
||||
<div style="display:flex;"> |
||||
<el-input v-model="phoneCode" placeholder="请输入验证码" maxlength="6"></el-input> |
||||
<el-button style="margin-left:10px" @click="sendPhoneCode" :disabled="phoneDisabled">{{ phoneBtnText |
||||
}}</el-button> |
||||
</div> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="phoneVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="phoneSubmit">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
|
||||
<el-dialog title="请选择您要登录的用户" :visible.sync="userVisible" :close-on-click-modal="false" custom-class="user-dia" |
||||
width="500px"> |
||||
<p class="tips">该手机号已绑定以下用户信息</p> |
||||
<ul class="users"> |
||||
<li :class="{ isEnable: !user.isEnable }" v-for="(user, i) in users" :key="i" @click="chooseUser(user)"> |
||||
<span>{{ user.schoolName }}，{{ user.userName }}，{{ user.workNumber }}{{ |
||||
user.isEnable |
||||
? '' |
||||
: '（已禁用）' }}</span> |
||||
<i class="el-icon-right"></i> |
||||
</li> |
||||
</ul> |
||||
</el-dialog> |
||||
<v-footer class="footer" ref="footer"></v-footer> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import vFooter from '../components/Footer' |
||||
import Setting from '@/setting' |
||||
import addRoutes from '@/libs/route/addRoutes' |
||||
import CryptoJS from 'crypto-js' |
||||
import JSEncrypt from 'jsencrypt' |
||||
export default { |
||||
data: function() { |
||||
var regPhoneOrEmail = (rule, value, callback) => {// 验证手机或邮箱 |
||||
let emailReg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ |
||||
let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/ |
||||
if (value === '') { |
||||
callback(new Error('请输入手机或邮箱！')); |
||||
} else if (!emailReg.test(value)&&!phoneReg.test(value)) { |
||||
callback(new Error('输入的手机/邮箱格式不正确!')); |
||||
} else { |
||||
callback(); |
||||
} |
||||
}; |
||||
return { |
||||
activeIndex:"1", |
||||
|
||||
showVerify: true,// 账号-验证码展示 |
||||
verificationIMG:'',// 账号验证码拼接链接 |
||||
|
||||
// 账号 |
||||
param: { |
||||
account: '', |
||||
password: '', |
||||
code:'', |
||||
platform:3, |
||||
random:'', |
||||
distinguish:1, |
||||
type: 2 |
||||
}, |
||||
rules: { |
||||
account: [{ required: true, message: '请输入账号', trigger: 'blur' }], |
||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], |
||||
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }], |
||||
}, |
||||
|
||||
// 手机+邮箱 |
||||
showPhoneVerify:true,// 邮箱-验证码展示 |
||||
PhoneVerificationIMG:'',// 电话或邮箱验证码拼接链接 |
||||
phoneOrEmail: { |
||||
account: '', |
||||
password: '', |
||||
code:'', |
||||
platform:3, |
||||
random:'', |
||||
distinguish:2, |
||||
type: 2 |
||||
}, |
||||
phoneOrEmailrules:{ |
||||
account: [{ validator: regPhoneOrEmail, trigger: 'blur' }], |
||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], |
||||
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }], |
||||
}, |
||||
|
||||
phoneVisible:false, |
||||
phone:'', |
||||
phoneCode:'', |
||||
phoneDisabled:false, |
||||
phoneBtnText: '发送验证码', |
||||
phoneTimer:'', |
||||
phoneOpener:'' |
||||
|
||||
}; |
||||
data: function () { |
||||
var regPhoneOrEmail = (rule, value, callback) => {// 验证手机或邮箱 |
||||
let emailReg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ |
||||
let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/ |
||||
if (value === '') { |
||||
callback(new Error('请输入手机或邮箱！')); |
||||
} else if (!emailReg.test(value) && !phoneReg.test(value)) { |
||||
callback(new Error('输入的手机/邮箱格式不正确!')); |
||||
} else { |
||||
callback(); |
||||
} |
||||
}; |
||||
return { |
||||
activeIndex: "1", |
||||
|
||||
showVerify: true,// 账号-验证码展示 |
||||
verificationIMG: '',// 账号验证码拼接链接 |
||||
|
||||
// 账号 |
||||
param: { |
||||
account: '', |
||||
password: '', |
||||
code: '', |
||||
platform: 3, |
||||
random: '', |
||||
distinguish: 1, |
||||
}, |
||||
rules: { |
||||
account: [{ required: true, message: '请输入账号', trigger: 'blur' }], |
||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], |
||||
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }], |
||||
}, |
||||
|
||||
// 手机+邮箱 |
||||
showPhoneVerify: true,// 邮箱-验证码展示 |
||||
PhoneVerificationIMG: '',// 电话或邮箱验证码拼接链接 |
||||
phoneOrEmail: { |
||||
workNumber: '', |
||||
password: '', |
||||
code: '', |
||||
platform: 3, |
||||
random: '', |
||||
distinguish: 1, |
||||
}, |
||||
phoneOrEmailrules: { |
||||
workNumber: [{ validator: regPhoneOrEmail, trigger: 'blur' }], |
||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], |
||||
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }], |
||||
}, |
||||
|
||||
phoneVisible: false, |
||||
phone: '', |
||||
phoneCode: '', |
||||
phoneDisabled: false, |
||||
phoneBtnText: '发送验证码', |
||||
phoneTimer: '', |
||||
phoneOpener: '', |
||||
|
||||
|
||||
userVisible: false, |
||||
users: [], |
||||
}; |
||||
}, |
||||
components: { |
||||
vFooter |
||||
}, |
||||
watch: { |
||||
verificationIMG: function (val) {// 监听账号--展示验证码框 |
||||
if (val) { |
||||
this.showVerify = true |
||||
} else { |
||||
this.showVerify = false |
||||
} |
||||
}, |
||||
components: { |
||||
vFooter |
||||
PhoneVerificationIMG: function (val) {// 监听账号--展示验证码框 |
||||
if (val) { |
||||
this.showPhoneVerify = true |
||||
} else { |
||||
this.showPhoneVerify = false |
||||
} |
||||
}, |
||||
watch:{ |
||||
verificationIMG:function(val){// 监听账号--展示验证码框 |
||||
if(val){ |
||||
this.showVerify = true |
||||
}else{ |
||||
this.showVerify = false |
||||
}, |
||||
created () { |
||||
if (this.param.account) { |
||||
this.showVerify = true |
||||
} |
||||
this.blur() |
||||
}, |
||||
methods: { |
||||
submitForm (val) { |
||||
let ref = val === 'phone' ? 'phoneOrEmail' : 'login' |
||||
let param = val === 'phone' ? this.phoneOrEmail : this.param |
||||
this.$refs[ref].validate(valid => { |
||||
if (valid) { |
||||
this.$post(this.api.logins, param).then(({ status, data, message }) => { |
||||
localStorage.removeItem('examPath') |
||||
localStorage.removeItem('reviewPath') |
||||
this.getOss() |
||||
if (status == 200) { |
||||
const accounts = data.userAccounts |
||||
// 如果返回的是数组，则弹框给用户选择登录哪个用户，否则，直接登录 |
||||
if (accounts instanceof Array) { |
||||
this.users = accounts |
||||
this.userVisible = true |
||||
} else { |
||||
sessionStorage.setItem('token', data.token) |
||||
this.setLogin() |
||||
} |
||||
} else { |
||||
param.code = '' |
||||
this.$message.error(message) |
||||
} |
||||
}, |
||||
PhoneVerificationIMG:function(val){// 监听账号--展示验证码框 |
||||
if(val){ |
||||
this.showPhoneVerify = true |
||||
}else{ |
||||
this.showPhoneVerify = false |
||||
}).catch(err => { |
||||
if (err.status === 30001) { |
||||
this.phoneVisible = true |
||||
} else if (err.status == 10004 || err.status == 10005) { |
||||
param.code = '' |
||||
this.blur() |
||||
} |
||||
}, |
||||
}); |
||||
} else { |
||||
this.$message.error('请输入账号/密码/验证码'); |
||||
return false; |
||||
} |
||||
}); |
||||
}, |
||||
created(){ |
||||
if(this.param.account){ |
||||
this.showVerify = true |
||||
// 获取oss信息 |
||||
async getOss () { |
||||
const A = (key, encryptedData) => { |
||||
const keyHex = CryptoJS.enc.Base64.parse(key) |
||||
const decrypted = CryptoJS.AES.decrypt(encryptedData, keyHex, { |
||||
mode: CryptoJS.mode.ECB, |
||||
padding: CryptoJS.pad.Pkcs7 |
||||
}) |
||||
return decrypted.toString(CryptoJS.enc.Utf8) |
||||
} |
||||
|
||||
const R = (encryptedKey, privateKey) => { |
||||
const decrypt = new JSEncrypt() |
||||
decrypt.setPrivateKey(privateKey) |
||||
const decryptedKey = decrypt.decrypt(encryptedKey) |
||||
return decryptedKey |
||||
} |
||||
|
||||
const res = await this.$get(this.api.encrypt) |
||||
const RE = A(R(res.encryptedKey, res.privateKey), res.encryptedData).split('/') |
||||
localStorage.setItem('osc', JSON.stringify(RE)) |
||||
}, |
||||
// 选择用户回调 |
||||
chooseUser (user) { |
||||
user.isEnable && this.$post(`${this.api.getToken}?id=${user.id}`).then(({ data }) => { |
||||
sessionStorage.setItem('token', data.token) |
||||
this.token = data.token |
||||
this.setLogin() |
||||
}).catch(res => { }) |
||||
}, |
||||
// 处理登录成功 |
||||
async setLogin () { |
||||
try { |
||||
const res = await this.$get(`${this.api.getUserRolesPermissionMenu}?platformId=${Setting.platformId}`) |
||||
const list = res.permissionMenu |
||||
addRoutes(res.permissionMenu[0].children) |
||||
this.$store.commit('setDataPer', res.dataPermissionList) |
||||
this.$message.success('登录成功！') |
||||
this.$router.push({ |
||||
path: list[0].children[0].path |
||||
}); |
||||
localStorage.setItem('ms_username', this.param.username); |
||||
} catch (e) { |
||||
if (e.status === 500) { |
||||
sessionStorage.clear() |
||||
} |
||||
this.blur() |
||||
} |
||||
}, |
||||
methods: { |
||||
submitForm(val) { |
||||
let ref = val==='phone'?'phoneOrEmail':'login' |
||||
let param = val==='phone'?this.phoneOrEmail:this.param |
||||
this.$refs[ref].validate(valid => { |
||||
if (valid) { |
||||
this.$post(this.api.logins,param).then(res => { |
||||
const { message } = res |
||||
sessionStorage.setItem('token',res.data.token) |
||||
this.$get(`${this.api.getUserRolesPermissionMenu}?platformId=${Setting.platformId}`).then(res => { |
||||
const list = res.permissionMenu |
||||
addRoutes(res.permissionMenu[0].children) |
||||
this.$store.commit('setDataPer', res.dataPermissionList) |
||||
this.$message.success(message); |
||||
this.$router.push({ |
||||
path: list[0].children[0].path |
||||
}); |
||||
localStorage.setItem('ms_username', this.param.username); |
||||
}).catch(err => { |
||||
if (err.status === 500) { |
||||
sessionStorage.clear() |
||||
} |
||||
}) |
||||
}).catch(err => { |
||||
if(err.status===30001){ |
||||
this.phoneVisible = true |
||||
}else if(err.status == 10004){ |
||||
this.blur() |
||||
} |
||||
}); |
||||
} else { |
||||
this.$message.error('请输入账号/密码/验证码'); |
||||
return false; |
||||
} |
||||
}); |
||||
|
||||
}, |
||||
blur(){ |
||||
this.param.random = Math.floor(Math.random()*999999999) |
||||
this.verificationIMG = this.api.verification+'?random='+`${this.param.random}` |
||||
}, |
||||
phoneBlur(){ |
||||
this.phoneOrEmail.random = Math.floor(Math.random()*999999999) |
||||
this.PhoneVerificationIMG = this.api.verification+'?random='+`${this.phoneOrEmail.random}` |
||||
}, |
||||
handleSelect(val){ |
||||
this.activeIndex = val |
||||
this.param.account = ""; |
||||
this.param.password = ""; |
||||
this.param.code = ""; |
||||
this.phoneOrEmail.account = ""; |
||||
this.phoneOrEmail.password = ""; |
||||
this.phoneOrEmail.code = ""; |
||||
this.$refs.phoneOrEmail.clearValidate() |
||||
// this.blur() |
||||
this.phoneBlur() |
||||
}, |
||||
sendPhoneCode(){ |
||||
if(!this.phone) return this.$message.warning('请输入手机号') |
||||
if(!/^1[3456789]\d{9}$/.test(this.phone)) return this.$message.warning('请输入正确的手机号') |
||||
let data = { |
||||
phone: this.phone, |
||||
types: 2 |
||||
} |
||||
this.$post(this.api.sendPhoneOrEmailCode,data).then(res => { |
||||
this.phoneCountdown()// 倒计时 |
||||
if(res.message.opener){ |
||||
this.phoneOpener = res.message.opener |
||||
}else{ |
||||
this.$message(res.message) |
||||
} |
||||
|
||||
}).catch(res => {}) |
||||
}, |
||||
phoneSubmit(){ |
||||
if(!this.phone) return this.$message.warning('请输入手机号') |
||||
if(!/^1[3456789]\d{9}$/.test(this.phone)) return this.$message.warning('请输入正确的手机号') |
||||
if(!this.phoneCode) return this.$message.warning('请输入验证码') |
||||
let data = { |
||||
phone: this.phone, |
||||
types: 2, |
||||
code: this.phoneCode, |
||||
opener: this.phoneOpener, |
||||
platform: 3, |
||||
account: this.param.account |
||||
} |
||||
this.$post(this.api.bindPhoneOrEmail,data).then(res => { |
||||
sessionStorage.setItem('token',res.token) |
||||
this.$router.push({ |
||||
path:'/customer' |
||||
}); |
||||
localStorage.setItem('ms_username', this.param.username); |
||||
this.$message.success('绑定成功') |
||||
// this.form.phone = this.phone |
||||
// this.phoneVisible = false |
||||
}).catch(res => {}) |
||||
}, |
||||
phoneCountdown(){ |
||||
let count = 60 |
||||
if(!this.phoneTimer){ |
||||
this.phoneDisabled = true |
||||
this.phoneTimer = setInterval(() => { |
||||
if(count > 0){ |
||||
count-- |
||||
this.phoneBtnText = `${count}秒后重试` |
||||
}else{ |
||||
this.phoneDisabled = false |
||||
clearInterval(this.phoneTimer) |
||||
this.phoneTimer = null |
||||
this.phoneBtnText = `发送验证码` |
||||
} |
||||
},1000) |
||||
} |
||||
}, |
||||
blur () { |
||||
this.param.random = Math.floor(Math.random() * 999999999) |
||||
this.verificationIMG = this.api.verification + '?random=' + `${this.param.random}` |
||||
}, |
||||
phoneBlur () { |
||||
this.phoneOrEmail.random = Math.floor(Math.random() * 999999999) |
||||
this.PhoneVerificationIMG = this.api.verification + '?random=' + `${this.phoneOrEmail.random}` |
||||
}, |
||||
handleSelect (val) { |
||||
this.activeIndex = val |
||||
this.param.account = ""; |
||||
this.param.password = ""; |
||||
this.param.code = ""; |
||||
this.phoneOrEmail.account = ""; |
||||
this.phoneOrEmail.password = ""; |
||||
this.phoneOrEmail.code = ""; |
||||
this.$refs.phoneOrEmail.clearValidate() |
||||
// this.blur() |
||||
this.phoneBlur() |
||||
}, |
||||
sendPhoneCode () { |
||||
if (!this.phone) return this.$message.warning('请输入手机号') |
||||
if (!/^1[3456789]\d{9}$/.test(this.phone)) return this.$message.warning('请输入正确的手机号') |
||||
let data = { |
||||
phone: this.phone, |
||||
types: 2 |
||||
} |
||||
this.$post(this.api.sendPhoneOrEmailCode, data).then(res => { |
||||
this.phoneCountdown()// 倒计时 |
||||
if (res.message.opener) { |
||||
this.phoneOpener = res.message.opener |
||||
} else { |
||||
this.$message(res.message) |
||||
} |
||||
|
||||
}).catch(res => { }) |
||||
}, |
||||
phoneSubmit () { |
||||
if (!this.phone) return this.$message.warning('请输入手机号') |
||||
if (!/^1[3456789]\d{9}$/.test(this.phone)) return this.$message.warning('请输入正确的手机号') |
||||
if (!this.phoneCode) return this.$message.warning('请输入验证码') |
||||
let data = { |
||||
phone: this.phone, |
||||
types: 2, |
||||
code: this.phoneCode, |
||||
opener: this.phoneOpener, |
||||
platform: 3, |
||||
account: this.param.account |
||||
} |
||||
this.$post(this.api.bindPhoneOrEmail, data).then(res => { |
||||
sessionStorage.setItem('token', res.token) |
||||
this.$router.push({ |
||||
path: '/customer' |
||||
}); |
||||
localStorage.setItem('ms_username', this.param.username); |
||||
this.$message.success('绑定成功') |
||||
// this.form.phone = this.phone |
||||
// this.phoneVisible = false |
||||
}).catch(res => { }) |
||||
}, |
||||
phoneCountdown () { |
||||
let count = 60 |
||||
if (!this.phoneTimer) { |
||||
this.phoneDisabled = true |
||||
this.phoneTimer = setInterval(() => { |
||||
if (count > 0) { |
||||
count-- |
||||
this.phoneBtnText = `${count}秒后重试` |
||||
} else { |
||||
this.phoneDisabled = false |
||||
clearInterval(this.phoneTimer) |
||||
this.phoneTimer = null |
||||
this.phoneBtnText = `发送验证码` |
||||
} |
||||
}, 1000) |
||||
} |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.login-wrap { |
||||
position: relative; |
||||
width: 100%; |
||||
background-image: url(../assets/img/login-bg.png); |
||||
background-size: 100%; |
||||
position: relative; |
||||
width: 100%; |
||||
background-image: url(../assets/img/login-bg.png); |
||||
background-size: 100%; |
||||
} |
||||
|
||||
.ms-title { |
||||
width: 548px; |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 50px; |
||||
transform: translate(-50%,0); |
||||
width: 548px; |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 30px; |
||||
transform: translate(-50%, 0); |
||||
} |
||||
|
||||
/deep/ .ms-login { |
||||
position: relative; |
||||
width: 1200px; |
||||
height: calc(92vh - 40px); |
||||
margin: 60px auto 0; |
||||
background-image: url(../assets/img/login-input.png); |
||||
box-shadow:0px 0px 79px 0px rgba(11,15,65,0.36); |
||||
background-repeat: no-repeat; |
||||
overflow: hidden; |
||||
.el-input__inner { |
||||
height: 80px; |
||||
line-height: 80px; |
||||
border: 1px solid rgba(220, 220, 220, 1); |
||||
border-radius: 2px; |
||||
} |
||||
.verification{ |
||||
position: absolute; |
||||
top: 1px; |
||||
right: 1px; |
||||
width: 160px; |
||||
height: 78px; |
||||
cursor: pointer; |
||||
} |
||||
position: relative; |
||||
width: 1200px; |
||||
height: calc(92vh - 40px); |
||||
margin: 60px auto 0; |
||||
background-image: url(../assets/img/login-input.png); |
||||
box-shadow: 0px 0px 79px 0px rgba(11, 15, 65, 0.36); |
||||
background-repeat: no-repeat; |
||||
overflow: hidden; |
||||
|
||||
.el-input__inner { |
||||
height: 80px; |
||||
line-height: 80px; |
||||
border: 1px solid rgba(220, 220, 220, 1); |
||||
border-radius: 2px; |
||||
} |
||||
|
||||
.verification { |
||||
position: absolute; |
||||
top: 1px; |
||||
right: 1px; |
||||
width: 160px; |
||||
height: 78px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.title{ |
||||
font-size: 16px; |
||||
text-align: center; |
||||
font-weight: bold; |
||||
|
||||
.title { |
||||
font-size: 16px; |
||||
text-align: center; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.login-btn { |
||||
text-align: center; |
||||
text-align: center; |
||||
} |
||||
|
||||
.login-btn button { |
||||
width: 100%; |
||||
height: 88px; |
||||
margin-bottom: 50px; |
||||
font-weight: bold; |
||||
background:linear-gradient(90deg,rgba(94,206,253,1),rgba(91,67,231,1)); |
||||
box-shadow:0px 7px 27px 0px rgba(50,129,255,0.51); |
||||
border-radius:10px; |
||||
width: 100%; |
||||
height: 88px; |
||||
margin-bottom: 50px; |
||||
font-weight: bold; |
||||
background: linear-gradient(90deg, rgba(94, 206, 253, 1), rgba(91, 67, 231, 1)); |
||||
box-shadow: 0px 7px 27px 0px rgba(50, 129, 255, 0.51); |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
.login-tips { |
||||
text-align: center; |
||||
color: #999; |
||||
font-weight:bold; |
||||
text-align: center; |
||||
color: #999; |
||||
font-weight: bold; |
||||
} |
||||
.forget{ |
||||
margin-bottom: 28px; |
||||
text-align: right; |
||||
color: #999; |
||||
font-weight:bold; |
||||
&:hover{ |
||||
color: #0092FF; |
||||
} |
||||
|
||||
.forget { |
||||
margin-bottom: 28px; |
||||
text-align: right; |
||||
color: #999; |
||||
font-weight: bold; |
||||
|
||||
&:hover { |
||||
color: #0092ff; |
||||
} |
||||
} |
||||
.thirdParty{ |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 33px; |
||||
|
||||
.thirdParty { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 33px; |
||||
} |
||||
|
||||
/* 头部 */ |
||||
.header{ |
||||
height: 60px; |
||||
background-color: #fff; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
font-size: 18px; |
||||
.header { |
||||
height: 60px; |
||||
background-color: #fff; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
font-size: 18px; |
||||
} |
||||
.logo{ |
||||
width: 171px; |
||||
height: 40px; |
||||
margin-left: 20px; |
||||
|
||||
.logo { |
||||
width: 171px; |
||||
height: 40px; |
||||
margin-left: 20px; |
||||
} |
||||
img{ |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.header_title{ |
||||
width: 33%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.header_title { |
||||
width: 33%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.header_title a{ |
||||
cursor: pointer; |
||||
|
||||
.header_title a { |
||||
cursor: pointer; |
||||
} |
||||
.header_title a:hover{ |
||||
color: blueviolet; |
||||
|
||||
.header_title a:hover { |
||||
color: blueviolet; |
||||
} |
||||
.nul{ |
||||
width:80px; |
||||
margin-right: 30px; |
||||
|
||||
.nul { |
||||
width: 80px; |
||||
margin-right: 30px; |
||||
} |
||||
|
||||
.el-menu-demo{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
border-bottom: 0; |
||||
background-color: transparent; |
||||
.el-menu-demo { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
border-bottom: 0; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.tips { |
||||
margin: -20px 0 20px 5px; |
||||
font-size: 14px; |
||||
margin: -20px 0 20px 5px; |
||||
font-size: 14px; |
||||
text-align: center; |
||||
color: #666; |
||||
} |
||||
|
||||
/deep/.user-dia { |
||||
.tips { |
||||
margin-bottom: 20px; |
||||
text-align: center; |
||||
color: #666; |
||||
} |
||||
|
||||
.users { |
||||
li { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 0 15px; |
||||
margin-bottom: 10px; |
||||
line-height: 40px; |
||||
font-size: 14px; |
||||
background-color: #ebeef5; |
||||
cursor: pointer; |
||||
|
||||
&.isEnable { |
||||
color: #c0c4cc; |
||||
background-color: #f5f7fa; |
||||
cursor: not-allowed; |
||||
} |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
&:hover { |
||||
background-color: #d3e0ff; |
||||
} |
||||
|
||||
i { |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (max-width: 1600px) { |
||||
/deep/.ms-login { |
||||
width: 1000px; |
||||
|
||||
.el-input__inner { |
||||
height: 50px; |
||||
line-height: 50px; |
||||
} |
||||
|
||||
.verification { |
||||
height: 48px; |
||||
} |
||||
} |
||||
|
||||
.ms-title { |
||||
width: 480px; |
||||
} |
||||
|
||||
.login-btn button { |
||||
height: 60px; |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,90 +1,98 @@ |
||||
<template> |
||||
<!-- 资讯管理 --> |
||||
<div class="page"> |
||||
<ul class="column-tab"> |
||||
<li :class="{active: tabsName == 1}" @click="handleClick(1)"><i class="el-icon-collection-tag"></i> 栏目管理</li> |
||||
<li :class="{active: tabsName == 2}" @click="handleClick(2)"><i class="el-icon-document"></i> 内容管理</li> |
||||
</ul> |
||||
<columnManage class="flex-1" ref="content1" v-if="tabsName == 1" /> |
||||
<ContentManage class="flex-1" ref="content2" v-if="tabsName == 2" /> |
||||
</div> |
||||
<!-- 资讯管理 --> |
||||
<div class="page"> |
||||
<ul class="column-tab"> |
||||
<li :class="{active: tabsName == 1}" |
||||
@click="handleClick(1)"><i class="el-icon-collection-tag"></i> 栏目管理</li> |
||||
<li :class="{active: tabsName == 2}" |
||||
@click="handleClick(2)"><i class="el-icon-document"></i> 内容管理</li> |
||||
</ul> |
||||
<columnManage class="flex-1" |
||||
ref="content1" |
||||
v-if="tabsName == 1" /> |
||||
<ContentManage class="flex-1" |
||||
ref="content2" |
||||
v-if="tabsName == 2" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import ColumnManage from "../columnManage"; |
||||
import ContentManage from "../contentManage"; |
||||
export default { |
||||
components: { |
||||
ColumnManage, |
||||
ContentManage |
||||
components: { |
||||
ColumnManage, |
||||
ContentManage |
||||
}, |
||||
data () { |
||||
return { |
||||
tabsName: this.$store.state.tabId |
||||
}; |
||||
}, |
||||
// 页面离开的时候如果内容管理的排序没有保存则提示 |
||||
beforeRouteLeave (to, from, next) { |
||||
this.routeLeave(next, true) |
||||
}, |
||||
methods: { |
||||
switchTab (id) { |
||||
this.tabsName = id |
||||
this.$store.commit('setInfoTab', id) |
||||
this.$store.commit('setColumnId', '') |
||||
}, |
||||
data() { |
||||
return { |
||||
tabsName: this.$store.state.tabId |
||||
}; |
||||
// 页面离开询问保存 |
||||
routeLeave (fn, param) { |
||||
const tab = this.tabsName |
||||
let content = this.$refs['content' + tab] |
||||
if (tab == 2) content = content.$refs.content |
||||
const { list, originList } = content |
||||
// 更改了信息才需要提示 |
||||
if (JSON.stringify(list) !== JSON.stringify(originList)) { |
||||
this.$confirm(`您已更改了${tab == 1 ? '栏目' : '文章'}排序，是否保存更改？`, '提示', { |
||||
type: 'warning', |
||||
closeOnClickModal: false |
||||
}).then(() => { |
||||
content.sortSubmit() |
||||
fn(param) |
||||
}).catch(() => { |
||||
fn(param) |
||||
}) |
||||
} else { |
||||
fn(param) |
||||
} |
||||
}, |
||||
// 页面离开的时候如果内容管理的排序没有保存则提示 |
||||
beforeRouteLeave(to, from, next) { |
||||
this.routeLeave(next, true) |
||||
}, |
||||
methods: { |
||||
switchTab(id) { |
||||
this.tabsName = id |
||||
this.$store.commit('setInfoTab', id) |
||||
this.$store.commit('setColumnId', '') |
||||
}, |
||||
// 页面离开询问保存 |
||||
routeLeave(fn, param) { |
||||
const tab = this.tabsName |
||||
let content = this.$refs['content' + tab] |
||||
if (tab == 2) content = content.$refs.content |
||||
const { list, originList } = content |
||||
// 更改了信息才需要提示 |
||||
if (JSON.stringify(list) !== JSON.stringify(originList)) { |
||||
this.$confirm(`您已更改了${tab == 1 ? '栏目' : '文章'}排序，是否保存更改？`, '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
content.sortSubmit() |
||||
fn(param) |
||||
}).catch(() => { |
||||
fn(param) |
||||
}) |
||||
} else { |
||||
fn(param) |
||||
} |
||||
}, |
||||
// tab回调 |
||||
handleClick(id) { |
||||
this.routeLeave(this.switchTab, id) |
||||
} |
||||
}, |
||||
mounted() { |
||||
|
||||
// tab回调 |
||||
handleClick (id) { |
||||
this.routeLeave(this.switchTab, id) |
||||
} |
||||
}, |
||||
mounted () { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.flex-1 { |
||||
flex: 1; |
||||
flex: 1; |
||||
} |
||||
.page { |
||||
display: flex; |
||||
display: flex; |
||||
} |
||||
.column-tab { |
||||
width: 120px; |
||||
border-right: solid 1px #e6e6e6; |
||||
li { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 60px; |
||||
cursor: pointer; |
||||
i { |
||||
margin-right: 5px; |
||||
} |
||||
&:hover, &.active { |
||||
color: #9278FF; |
||||
width: 120px; |
||||
border-right: solid 1px #e6e6e6; |
||||
li { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 60px; |
||||
cursor: pointer; |
||||
i { |
||||
margin-right: 5px; |
||||
} |
||||
&:hover, |
||||
&.active { |
||||
color: #9278ff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -1,476 +1,528 @@ |
||||
<template> |
||||
<div> |
||||
<div class="page"> |
||||
<div class="page-content"> |
||||
<div class="p-title">赛程与规则设置</div> |
||||
<el-form :model="form" :rules="validRules" label-width="170px" label-suffix=":" size="small" :disabled="!editing && id"> |
||||
<el-form-item label="竞赛类型"> |
||||
{{ step1.completeCompetitionSetup.competitionType ? '团队赛（' + step1.completeCompetitionSetup.minTeamSize + '-' + step1.completeCompetitionSetup.maxTeamSize + '人/队）' : '个人赛' }} <span class="tips">（如需修改，请返回上一步。）</span> |
||||
</el-form-item> |
||||
<el-form-item prop="rule" label="赛制"> |
||||
<el-radio v-for="(rule, i) in rules" :key="i" v-model="form.rule" :label="rule.id">{{ rule.name }}</el-radio> |
||||
<p class="tips">积分赛——包含多个竞赛阶段，每个阶段的成绩都包含在最终总成绩里，最后一轮结束后总成绩排名靠前的参赛者得到获奖资格。</p> |
||||
<p class="tips">淘汰赛——包含多个竞赛阶段，每个阶段结束后之后只有部分参赛者能晋级下一阶段，晋级最后一轮且在最后一轮排名靠前的参赛者得到获奖资格。</p> |
||||
<p class="tips">单项赛——仅包含一个竞赛阶段，单项的成绩排名即为最终排名，排名靠前的参赛者得到获奖资格。</p> |
||||
<p class="tips">注：系统默认排名规则，优先按分数排名（分数高则排名靠前），分数相同则按用时排名（用时短则排名靠前）。</p> |
||||
</el-form-item> |
||||
<template v-if="form.rule !== 2"> |
||||
<el-form-item prop="stageNum" label="阶段数量"> |
||||
<div class="input-center"> |
||||
<el-select v-model="form.stageNum" @change="stageChange"> |
||||
<el-option v-for="i in 10" :key="i" :label="i" :value="i"></el-option> |
||||
</el-select> |
||||
</div> |
||||
<div v-if="step1.completeCompetitionSetup.competitionType" class="tips"> |
||||
(团队赛是否限制队内每个成员只能参加一个阶段赛项？ |
||||
<el-radio v-model="form.teamLimit" :label="1">是</el-radio> |
||||
<el-radio v-model="form.teamLimit" :label="0">否</el-radio> |
||||
) |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item v-if="!form.rule" prop="resultCalculationMethod" label="总成绩计算方式"> |
||||
<el-radio v-model="form.resultCalculationMethod" :label="0">各阶段成绩加权求和</el-radio> |
||||
<el-radio v-model="form.resultCalculationMethod" :label="1">各阶段成绩直接求和</el-radio> |
||||
<el-radio v-model="form.resultCalculationMethod" :label="2">各阶段成绩取平均值</el-radio> |
||||
<p class="tips">（若选择加权求和，则需要设置每个阶段成绩所占权重，且权重总和须为100%）</p> |
||||
</el-form-item> |
||||
<el-form-item prop="stageNum" label="阶段设置"> |
||||
<div v-for="(item, i) in form.competitionStageList" :key="i" class="step-set"> |
||||
<div class="line"> |
||||
第{{ serials[i] }}阶段 <el-input v-model="item.stageName" clearable placeholder="请输入阶段名称，如“初赛”" style="width: 200px"></el-input> |
||||
</div> |
||||
<div class="line"> |
||||
<span class="req">*</span> |
||||
比赛方式： |
||||
<el-radio v-for="(method, i) in methods" :key="i" v-model="item.method" :label="method.id">{{ method.name }}</el-radio> |
||||
</div> |
||||
<div v-if="step1.completeCompetitionSetup.competitionType" class="line"> |
||||
<span class="req">*</span> |
||||
团队参赛人数限制： |
||||
<el-radio v-model="item.teamNumLimitOpt" :label="0">不限制</el-radio> |
||||
<el-radio v-model="item.teamNumLimitOpt" :label="1">自定义</el-radio> |
||||
<el-input v-model.number="item.teamNumLimit" type="number" style="width: 150px;" :disabled="item.teamNumLimitOpt === 0"></el-input> 人 |
||||
<span class="tips">（可限制本阶段单个团队的出战人数）</span> |
||||
</div> |
||||
<div v-if="step1.completeCompetitionSetup.competitionType" class="line"> |
||||
<span class="req">*</span> |
||||
团队成绩计算方式： |
||||
<el-radio v-for="(j, i) in teamCalculationMethods" :key="i" v-model="item.teamCalculationMethod" :label="j.id">{{ j.name }}</el-radio> |
||||
<span class="tips">（可设置本阶段的团队取分规则）</span> |
||||
</div> |
||||
<div v-if="form.rule === 1 && i !== form.competitionStageList.length - 1" class="line" style="display: flex;"> |
||||
<p> |
||||
<span class="req">*</span>晋级规则： |
||||
</p> |
||||
<div> |
||||
<div class="line"> |
||||
本阶段成绩排名前 |
||||
<el-input v-model.number="item.peopleLimit" type="number" style="width: 100px"></el-input> |
||||
队，可晋级下一阶段比赛 |
||||
</div> |
||||
<div class="line"> |
||||
本阶段成绩排名前 |
||||
<el-input v-model.number="item.percentageLimit" type="number" style="width: 100px"></el-input> |
||||
%，可晋级下一阶段比赛 |
||||
</div> |
||||
<div> |
||||
本阶段成绩 |
||||
<el-select v-model="item.operator" style="width: 80px;margin-right: 10px"> |
||||
<el-option v-for="i in operators" :key="i" :label="i" :value="i"></el-option> |
||||
</el-select> |
||||
<el-input v-model="item.score" type="number" style="width: 100px"></el-input> |
||||
分，可晋级下一阶段比赛 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div v-if="!form.rule" class="line"> |
||||
<span class="req">*</span> |
||||
占总成绩权重： |
||||
<el-input v-model.number="item.pointWeight" type="number" :disabled="form.resultCalculationMethod != 0" style="width: 150px;"></el-input> % |
||||
</div> |
||||
<div class="line"> |
||||
<span class="req">*</span> |
||||
成绩公布时间： |
||||
（阶段）比赛结束后 |
||||
<el-input v-model.number="item.resultAnnouncementTime" type="number" style="width: 120px"></el-input> |
||||
小时，公布（阶段）比赛成绩。 |
||||
</div> |
||||
<div class="line"> |
||||
<span class="req">*</span> |
||||
是否公布成绩详情： |
||||
<el-radio v-model="item.resultsDetails" :label="0">是</el-radio> |
||||
<el-radio v-model="item.resultsDetails" :label="1">否</el-radio> |
||||
<p class="tips">若选择“是”，则公布成绩详情，竞赛结束后参赛者可查看自己的比赛成绩得分详情；</p> |
||||
<p class="tips">若选择“否”，则不公布成绩详情，参赛者只能知晓自己的分数及排名，不能查看得分详情。</p> |
||||
</div> |
||||
<div> |
||||
<div class="page"> |
||||
<div class="page-content"> |
||||
<div class="p-title">赛程与规则设置</div> |
||||
<el-form :model="form" :rules="validRules" label-width="170px" label-suffix=":" size="small" |
||||
:disabled="!!(!editing && id)"> |
||||
<el-form-item label="竞赛类型"> |
||||
{{ step1.completeCompetitionSetup.competitionType ? '团队赛（' + step1.completeCompetitionSetup.minTeamSize + |
||||
'-' + step1.completeCompetitionSetup.maxTeamSize + '人/队）' : '个人赛' }} <span |
||||
class="tips">（如需修改，请返回上一步。）</span> |
||||
</el-form-item> |
||||
<el-form-item prop="rule" label="赛制"> |
||||
<el-radio v-for="(rule, i) in rules" :key="i" v-model="form.rule" :label="rule.id">{{ rule.name |
||||
}}</el-radio> |
||||
<p class="tips">积分赛——包含多个竞赛阶段，每个阶段的成绩都包含在最终总成绩里，最后一轮结束后总成绩排名靠前的参赛者得到获奖资格。</p> |
||||
<p class="tips">淘汰赛——包含多个竞赛阶段，每个阶段结束后之后只有部分参赛者能晋级下一阶段，晋级最后一轮且在最后一轮排名靠前的参赛者得到获奖资格。</p> |
||||
<p class="tips">单项赛——仅包含一个竞赛阶段，单项的成绩排名即为最终排名，排名靠前的参赛者得到获奖资格。</p> |
||||
<p class="tips">注：系统默认排名规则，优先按分数排名（分数高则排名靠前），分数相同则按用时排名（用时短则排名靠前）。</p> |
||||
</el-form-item> |
||||
<template v-if="form.rule !== 2"> |
||||
<el-form-item prop="stageNum" label="阶段数量"> |
||||
<div class="input-center"> |
||||
<el-select v-model="form.stageNum" @change="stageChange"> |
||||
<el-option v-for="i in 10" :key="i" :label="i" :value="i"></el-option> |
||||
</el-select> |
||||
</div> |
||||
<div v-if="step1.completeCompetitionSetup.competitionType" class="tips"> |
||||
(团队赛是否限制队内每个成员只能参加一个阶段赛项？ |
||||
<el-radio v-model="form.teamLimit" :label="1">是</el-radio> |
||||
<el-radio v-model="form.teamLimit" :label="0">否</el-radio> |
||||
) |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item v-if="!form.rule" prop="resultCalculationMethod" label="总成绩计算方式"> |
||||
<el-radio v-model="form.resultCalculationMethod" :label="0">各阶段成绩加权求和</el-radio> |
||||
<el-radio v-model="form.resultCalculationMethod" :label="1">各阶段成绩直接求和</el-radio> |
||||
<el-radio v-model="form.resultCalculationMethod" :label="2">各阶段成绩取平均值</el-radio> |
||||
<p class="tips">（若选择加权求和，则需要设置每个阶段成绩所占权重，且权重总和须为100%）</p> |
||||
</el-form-item> |
||||
<el-form-item prop="stageNum" label="阶段设置"> |
||||
<div v-for="(item, i) in form.competitionStageList" :key="i" class="step-set"> |
||||
<div class="line"> |
||||
第{{ serials[i] }}阶段 <el-input v-model="item.stageName" clearable placeholder="请输入阶段名称，如“初赛”" |
||||
style="width: 200px"></el-input> |
||||
</div> |
||||
<div class="line"> |
||||
<span class="req">*</span> |
||||
比赛方式： |
||||
<el-radio v-for="(method, i) in methods" :key="i" v-model="item.method" :label="method.id">{{ |
||||
method.name }}</el-radio> |
||||
</div> |
||||
<div v-if="step1.completeCompetitionSetup.competitionType" class="line"> |
||||
<span class="req">*</span> |
||||
团队参赛人数限制： |
||||
<el-radio v-model="item.teamNumLimit" :label="0">不限制</el-radio> |
||||
<el-radio v-model="item.teamNumLimit" :label="1">自定义</el-radio> |
||||
<el-input v-model.number="item.customNumber" type="number" min="0" style="width: 150px;" |
||||
:disabled="item.teamNumLimit === 0"></el-input> 人 |
||||
<span class="tips">（可限制本阶段单个团队的出战人数）</span> |
||||
</div> |
||||
<div v-if="step1.completeCompetitionSetup.competitionType" class="line"> |
||||
<span class="req">*</span> |
||||
团队成绩计算方式： |
||||
<el-radio v-for="(j, i) in teamCalculationMethods" :key="i" v-model="item.teamCalculationMethod" |
||||
:label="j.id">{{ j.name }}</el-radio> |
||||
<span class="tips">（可设置本阶段的团队取分规则）</span> |
||||
</div> |
||||
<div v-if="form.rule === 1 && i !== form.competitionStageList.length - 1" class="line" |
||||
style="display: flex;"> |
||||
<p> |
||||
<span class="req">*</span>晋级规则： |
||||
</p> |
||||
<div> |
||||
<div class="line"> |
||||
本阶段成绩排名前 |
||||
<el-input v-model.number="item.peopleLimit" type="number" min="0" style="width: 100px"></el-input> |
||||
队，可晋级下一阶段比赛 |
||||
</div> |
||||
</el-form-item> |
||||
</template> |
||||
<template v-else> |
||||
<el-form-item prop="stageNum" label="规则设置"> |
||||
<div class="step-set"> |
||||
<div class="line"> |
||||
<span class="req">*</span> |
||||
比赛方式： |
||||
<el-radio v-for="(method, i) in methods" :key="i" v-model="form.competitionStageList[0].method" :label="method.id">{{ method.name }}</el-radio> |
||||
</div> |
||||
<div v-if="step1.completeCompetitionSetup.competitionType" class="line"> |
||||
<span class="req">*</span> |
||||
团队成绩计算方式： |
||||
<el-radio v-for="(j, i) in teamCalculationMethods" :key="i" v-model="form.competitionStageList[0].teamCalculationMethod" :label="j.id">{{ j.name }}</el-radio> |
||||
<span class="tips">（可设置本阶段的团队取分规则）</span> |
||||
</div> |
||||
<div class="line"> |
||||
本阶段成绩排名前 |
||||
<el-input v-model.number="item.percentageLimit" type="number" min="0" |
||||
style="width: 100px"></el-input> |
||||
%，可晋级下一阶段比赛 |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item prop="rule" label="成绩公布时间"> |
||||
（阶段）比赛结束后 |
||||
<el-input v-model.number="form.competitionStageList[0].resultAnnouncementTime" type="number" style="width: 120px"></el-input> |
||||
小时，公布（阶段）比赛成绩。 |
||||
</el-form-item> |
||||
<el-form-item prop="resultsDetails" label="是否公布成绩详情"> |
||||
<el-radio v-model="form.competitionStageList[0].resultsDetails" :label="0">是</el-radio> |
||||
<el-radio v-model="form.competitionStageList[0].resultsDetails" :label="1">否</el-radio> |
||||
<p class="tips">若选择“是”，则公布成绩详情，竞赛结束后参赛者可查看自己的比赛成绩得分详情；</p> |
||||
<p class="tips">若选择“否”，则不公布成绩详情，参赛者只能知晓自己的分数及排名，不能查看得分详情。</p> |
||||
</el-form-item> |
||||
</template> |
||||
</el-form> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
本阶段成绩 |
||||
<el-select v-model="item.operator" style="width: 80px;margin-right: 10px"> |
||||
<el-option v-for="i in operators" :key="i" :label="i" :value="i"></el-option> |
||||
</el-select> |
||||
<el-input v-model="item.score" type="number" min="0" style="width: 100px"></el-input> |
||||
分，可晋级下一阶段比赛 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div v-if="!form.rule" class="line"> |
||||
<span class="req">*</span> |
||||
占总成绩权重： |
||||
<el-input v-model.number="item.pointWeight" type="number" min="0" |
||||
:disabled="form.resultCalculationMethod != 0" style="width: 150px;"></el-input> % |
||||
</div> |
||||
<div class="line"> |
||||
成绩公布时间： |
||||
（阶段）比赛结束后 |
||||
<el-input v-model.number="item.resultAnnouncementTime" type="number" min="0" |
||||
style="width: 120px"></el-input> |
||||
小时，公布（阶段）比赛成绩。（为空则不公布成绩，为0则阶段比赛结束后立马公布成绩） |
||||
</div> |
||||
<div |
||||
v-if="item.resultAnnouncementTime !== '' && item.resultAnnouncementTime !== null && item.resultAnnouncementTime !== undefined" |
||||
class="line"> |
||||
是否公布成绩详情： |
||||
<el-radio v-model="item.resultsDetails" :label="0">是</el-radio> |
||||
<el-radio v-model="item.resultsDetails" :label="1">否</el-radio> |
||||
<p class="tips">若选择“是”，则公布成绩详情，竞赛结束后参赛者可查看自己的比赛成绩得分详情；</p> |
||||
<p class="tips">若选择“否”，则不公布成绩详情，参赛者只能知晓自己的分数及排名，不能查看得分详情。</p> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
</template> |
||||
<template v-else> |
||||
<el-form-item prop="stageNum" label="规则设置"> |
||||
<div class="step-set"> |
||||
<div class="line"> |
||||
<span class="req">*</span> |
||||
比赛方式： |
||||
<el-radio v-for="(method, i) in methods" :key="i" v-model="form.competitionStageList[0].method" |
||||
:label="method.id">{{ method.name }}</el-radio> |
||||
</div> |
||||
<div v-if="step1.completeCompetitionSetup.competitionType" class="line"> |
||||
<span class="req">*</span> |
||||
团队成绩计算方式： |
||||
<el-radio v-for="(j, i) in teamCalculationMethods" :key="i" |
||||
v-model="form.competitionStageList[0].teamCalculationMethod" :label="j.id">{{ j.name }}</el-radio> |
||||
<span class="tips">（可设置本阶段的团队取分规则）</span> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item label="成绩公布时间"> |
||||
（阶段）比赛结束后 |
||||
<el-input v-model.number="form.competitionStageList[0].resultAnnouncementTime" type="number" min="0" |
||||
style="width: 120px"></el-input> |
||||
小时，公布（阶段）比赛成绩。（为空则不公布成绩，为0则阶段比赛结束后立马公布成绩） |
||||
</el-form-item> |
||||
<el-form-item |
||||
v-if="form.competitionStageList[0].resultAnnouncementTime !== '' && form.competitionStageList[0].resultAnnouncementTime !== null && form.competitionStageList[0].resultAnnouncementTime !== undefined" |
||||
prop="resultsDetails" label="是否公布成绩详情"> |
||||
<el-radio v-model="form.competitionStageList[0].resultsDetails" :label="0">是</el-radio> |
||||
<el-radio v-model="form.competitionStageList[0].resultsDetails" :label="1">否</el-radio> |
||||
<p class="tips">若选择“是”，则公布成绩详情，竞赛结束后参赛者可查看自己的比赛成绩得分详情；</p> |
||||
<p class="tips">若选择“否”，则不公布成绩详情，参赛者只能知晓自己的分数及排名，不能查看得分详情。</p> |
||||
</el-form-item> |
||||
</template> |
||||
</el-form> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import quill from "@/components/quill"; |
||||
import Const from '@/const/match' |
||||
import _ from 'lodash' |
||||
export default { |
||||
props: ['setupId', 'editing'], |
||||
data() { |
||||
return { |
||||
id: this.$route.query.id, |
||||
updateTime: 0, |
||||
step1: this.$parent.$refs.step1.form, |
||||
serials: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'], |
||||
form: { |
||||
resultCalculationMethod: 0, |
||||
rule: 0, |
||||
stageNum: 3, |
||||
teamLimit: 1, |
||||
competitionStageList: [ |
||||
{ |
||||
method: 0, |
||||
number: 1, |
||||
pointWeight: '', |
||||
stageName: '', |
||||
teamCalculationMethod: 0, |
||||
peopleLimit: '', |
||||
percentageLimit: '', |
||||
scoreLimit: '', |
||||
operator: '>', |
||||
score: '', |
||||
teamNumLimit: '', |
||||
teamNumLimitOpt: 0, |
||||
resultAnnouncementTime: '', |
||||
resultsDetails: 0, |
||||
}, |
||||
{ |
||||
method: 0, |
||||
number: 2, |
||||
pointWeight: '', |
||||
stageName: '', |
||||
teamCalculationMethod: 0, |
||||
peopleLimit: '', |
||||
percentageLimit: '', |
||||
scoreLimit: '', |
||||
operator: '>', |
||||
score: '', |
||||
teamNumLimit: '', |
||||
teamNumLimitOpt: 0, |
||||
resultAnnouncementTime: '', |
||||
resultsDetails: 0, |
||||
}, |
||||
{ |
||||
method: 0, |
||||
number: 3, |
||||
pointWeight: '', |
||||
stageName: '', |
||||
teamCalculationMethod: 0, |
||||
peopleLimit: '', |
||||
percentageLimit: '', |
||||
scoreLimit: '', |
||||
operator: '>', |
||||
score: '', |
||||
teamNumLimit: '', |
||||
teamNumLimitOpt: 0, |
||||
resultAnnouncementTime: '', |
||||
resultsDetails: 0, |
||||
} |
||||
] |
||||
props: ['setupId', 'editing'], |
||||
data () { |
||||
return { |
||||
id: this.$route.query.id, |
||||
updateTime: 0, |
||||
step1: this.$parent.$refs.step1.form, |
||||
serials: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'], |
||||
form: { |
||||
resultCalculationMethod: 0, |
||||
rule: 0, |
||||
stageNum: 3, |
||||
teamLimit: 1, |
||||
competitionStageList: [ |
||||
{ |
||||
method: 0, |
||||
number: 1, |
||||
pointWeight: '', |
||||
stageName: '', |
||||
teamCalculationMethod: 0, |
||||
peopleLimit: '', |
||||
percentageLimit: '', |
||||
scoreLimit: '', |
||||
operator: '>', |
||||
score: '', |
||||
customNumber: '', |
||||
teamNumLimit: 0, |
||||
resultAnnouncementTime: '', |
||||
resultsDetails: '', |
||||
}, |
||||
validRules: { |
||||
rule: [ |
||||
{ required: true, trigger: 'change' } |
||||
], |
||||
stageNum: [ |
||||
{ required: true, trigger: 'change' } |
||||
], |
||||
resultCalculationMethod: [ |
||||
{ required: true, trigger: 'change' } |
||||
], |
||||
resultAnnouncementTime: [ |
||||
{ required: true, message: '请输入成绩公布时间', trigger: 'change' } |
||||
], |
||||
resultsDetails: [ |
||||
{ required: true, trigger: 'change' } |
||||
], |
||||
{ |
||||
method: 0, |
||||
number: 2, |
||||
pointWeight: '', |
||||
stageName: '', |
||||
teamCalculationMethod: 0, |
||||
peopleLimit: '', |
||||
percentageLimit: '', |
||||
scoreLimit: '', |
||||
operator: '>', |
||||
score: '', |
||||
customNumber: '', |
||||
teamNumLimit: 0, |
||||
resultAnnouncementTime: '', |
||||
resultsDetails: '', |
||||
}, |
||||
ruleForm: {}, |
||||
rules: Const.rules, |
||||
methods: Const.methods, |
||||
teamCalculationMethods: Const.teamCalculationMethods, |
||||
operators: ['>', '>=', '=', '<', '<='] |
||||
}; |
||||
{ |
||||
method: 0, |
||||
number: 3, |
||||
pointWeight: '', |
||||
stageName: '', |
||||
teamCalculationMethod: 0, |
||||
peopleLimit: '', |
||||
percentageLimit: '', |
||||
scoreLimit: '', |
||||
operator: '>', |
||||
score: '', |
||||
customNumber: '', |
||||
teamNumLimit: 0, |
||||
resultAnnouncementTime: '', |
||||
resultsDetails: '', |
||||
} |
||||
] |
||||
}, |
||||
validRules: { |
||||
rule: [ |
||||
{ required: true, trigger: 'change' } |
||||
], |
||||
stageNum: [ |
||||
{ required: true, trigger: 'change' } |
||||
], |
||||
resultCalculationMethod: [ |
||||
{ required: true, trigger: 'change' } |
||||
], |
||||
resultAnnouncementTime: [ |
||||
{ required: true, message: '请输入成绩公布时间', trigger: 'change' } |
||||
], |
||||
resultsDetails: [ |
||||
{ required: true, trigger: 'change' } |
||||
], |
||||
}, |
||||
originForm: null, |
||||
ruleForm: {}, |
||||
rules: Const.rules, |
||||
methods: Const.methods, |
||||
teamCalculationMethods: Const.teamCalculationMethods, |
||||
operators: ['>', '>=', '=', '<', '<='] |
||||
}; |
||||
}, |
||||
watch: { |
||||
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
||||
form: { |
||||
handler () { |
||||
this.updateTime++ |
||||
}, |
||||
deep: true |
||||
}, |
||||
watch: { |
||||
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
||||
form: { |
||||
handler(){ |
||||
this.updateTime++ |
||||
}, |
||||
deep:true |
||||
}, |
||||
}, |
||||
mounted () { |
||||
this.ruleForm = JSON.parse(JSON.stringify(this.form.competitionStageList[0])) |
||||
this.id && this.getData() |
||||
this.step1 || this.getStep1() // 如果没有第一步的数据，则直接接口获取 |
||||
}, |
||||
methods: { |
||||
getData () { |
||||
this.$get(this.api.getCompetitionRule, { |
||||
competitionId: this.id |
||||
}).then(res => { |
||||
const rule = res.competitionRule |
||||
if (rule) { |
||||
rule.competitionStageList.map(e => { |
||||
const limit = e.scoreLimit |
||||
if (limit) { |
||||
e.operator = limit.replace(/\d+/, '') |
||||
const num = limit.replace(/\D+/, '') |
||||
if (num) e.score = num |
||||
} else { |
||||
e.operator = '>' |
||||
e.score = '' |
||||
} |
||||
if (!e.peopleLimit) e.peopleLimit = '' |
||||
if (!e.percentageLimit) e.percentageLimit = '' |
||||
e.teamCalculationMethod = +e.teamCalculationMethod |
||||
}) |
||||
this.originForm = _.cloneDeep(rule) |
||||
this.form = rule |
||||
} |
||||
this.$nextTick(() => { |
||||
this.updateTime = 0 |
||||
}) |
||||
}).catch(res => { }) |
||||
}, |
||||
mounted() { |
||||
this.ruleForm = JSON.parse(JSON.stringify(this.form.competitionStageList[0])) |
||||
this.id && this.getData() |
||||
this.step1 || this.getStep1() // 如果没有第一步的数据，则直接接口获取 |
||||
// 获取第二部的数据 |
||||
getStep1 () { |
||||
this.$post(`${this.api.getCompetition}?competitionId=${this.id}`).then(({ competition }) => { |
||||
this.step1 = competition |
||||
const { minTeamSize, maxTeamSize, competitionType } = this.step1.completeCompetitionSetup |
||||
competitionType && minTeamSize !== '' && maxTeamSize !== '' && minTeamSize == maxTeamSize && this.teamCalculationMethods.pop() // 团队上下限人数相等，则不显示求和 |
||||
}).catch(err => { }) |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.$get(this.api.getCompetitionRule, { |
||||
competitionId: this.id |
||||
}).then(res => { |
||||
const rule = res.competitionRule |
||||
if (rule) { |
||||
rule.competitionStageList.map(e => { |
||||
const limit = e.scoreLimit |
||||
if (limit) { |
||||
e.operator = limit.replace(/\d+/, '') |
||||
const num = limit.replace(/\D+/, '') |
||||
if (num) e.score = num |
||||
} else { |
||||
e.operator = '>' |
||||
e.score = '' |
||||
} |
||||
if (!e.peopleLimit) e.peopleLimit = '' |
||||
if (!e.percentageLimit) e.percentageLimit = '' |
||||
e.teamNumLimitOpt = e.teamNumLimit ? 1 : 0 |
||||
e.teamCalculationMethod = +e.teamCalculationMethod |
||||
}) |
||||
this.form = rule |
||||
// 阶段数量选择回调 |
||||
stageChange (val) { |
||||
const stages = this.form.competitionStageList |
||||
const { ruleId } = this.form |
||||
if (stages.length < val) { |
||||
const len = stages.length |
||||
for (let i = 1; i <= val - len; i++) { |
||||
const form = JSON.parse(JSON.stringify(this.ruleForm)) |
||||
form.number = len + i |
||||
if (ruleId) form.ruleId = ruleId |
||||
this.form.competitionStageList.push(form) |
||||
} |
||||
} else { |
||||
this.form.competitionStageList = stages.slice(0, val) |
||||
} |
||||
}, |
||||
// 保存自动分配人员条件 |
||||
async automaticAllocation (next) { |
||||
// 团队赛 |
||||
if (this.step1.completeCompetitionSetup.competitionType) { |
||||
const { form, originForm } = this |
||||
// 赛制、阶段数量、是否限制成员只参加一个阶段、参赛人数限制。这些字段有改一个，则调接口查询其他3个条件；一共4个条件都满足后，才需要弹框；否则直接进入下一步 |
||||
let changeLimit = 0 |
||||
for (const i in form.competitionStageList) { |
||||
const e = form.competitionStageList[i] |
||||
const originStage = originForm.competitionStageList[i] |
||||
if (!originStage || e.teamNumLimit !== originStage.teamNumLimit || e.customNumber !== originStage.customNumber) { |
||||
changeLimit = 1 |
||||
break |
||||
} |
||||
this.$nextTick(() => { |
||||
this.updateTime = 0 |
||||
} |
||||
// new Date(this.$parent.$refs.step1.form.signUpEndTime) |
||||
if (form.rule !== originForm.rule || form.stageNum !== originForm.stageNum || form.teamLimit !== originForm.teamLimit || changeLimit) { |
||||
await this.$post(this.api.updateEventAllocationRecord, { |
||||
competitionId: +this.id, |
||||
whetherToModifyTheRule: 1, |
||||
}) |
||||
}).catch(res => {}) |
||||
}, |
||||
// 获取第二部的数据 |
||||
getStep1() { |
||||
this.$post(`${this.api.getCompetition}?competitionId=${this.id}`).then(({ competition }) => { |
||||
this.step1 = competition |
||||
const { minTeamSize, maxTeamSize, competitionType } = this.step1.completeCompetitionSetup |
||||
competitionType && minTeamSize !== '' && maxTeamSize !== '' && minTeamSize == maxTeamSize && this.teamCalculationMethods.pop() // 团队上下限人数相等，则不显示求和 |
||||
}).catch(err => {}) |
||||
}, |
||||
// 阶段数量选择回调 |
||||
stageChange(val) { |
||||
const stages = this.form.competitionStageList |
||||
const { ruleId } = this.form |
||||
if (stages.length < val) { |
||||
const list = [] |
||||
for (let i = 1; i <= val - stages.length; i++) { |
||||
const form = JSON.parse(JSON.stringify(this.ruleForm)) |
||||
form.number = stages.length + i |
||||
if (ruleId) form.ruleId = ruleId |
||||
this.form.competitionStageList.push(form) |
||||
} |
||||
this.$emit('next', next) |
||||
} else { |
||||
this.form.competitionStageList = stages.slice(0, val) |
||||
this.$emit('next', next) |
||||
} |
||||
}, |
||||
// 提交 |
||||
save(status, next = 0) { |
||||
let { form } = this |
||||
const { rule } = form |
||||
let invalid = 0 |
||||
let pointWeight = 0 |
||||
const { step1 } = this |
||||
// 下一步需要校验 |
||||
if (next === 2) { |
||||
let stages = form.competitionStageList |
||||
if (form.rule === 2) { // 单项赛只需要输入成绩公布时间 |
||||
const e = stages[0] |
||||
e.stageName = step1.name |
||||
if (!e.resultsDetails) { |
||||
if (e.resultAnnouncementTime === '') { |
||||
return util.errorMsg('请填写成绩公布时间') |
||||
} |
||||
if (e.resultAnnouncementTime < 0) { |
||||
return util.errorMsg('成绩公布时间不得小于0') |
||||
} else { |
||||
this.$emit('next', next) |
||||
} |
||||
}, |
||||
// 提交 |
||||
save (status, next = 0) { |
||||
const form = _.cloneDeep(this.form) |
||||
const { rule } = form |
||||
let invalid = 0 |
||||
let pointWeight = 0 |
||||
const { step1 } = this |
||||
// 下一步需要校验 |
||||
if (next === 2) { |
||||
let stages = form.competitionStageList |
||||
if (form.rule === 2) { // 单项赛只需要输入成绩公布时间 |
||||
const e = stages[0] |
||||
e.stageName = step1.name |
||||
if (e.resultsDetails === 0 && e.resultAnnouncementTime !== '') { |
||||
if (e.resultAnnouncementTime < 0) { |
||||
return util.errorMsg('成绩公布时间不得小于0') |
||||
} |
||||
if (e.resultAnnouncementTime % 1) { |
||||
return util.errorMsg('成绩公布时间须为整数') |
||||
} |
||||
e.resultAnnouncementTime = +e.resultAnnouncementTime |
||||
} |
||||
form.competitionStageList = stages.slice(0, 1) // 单项赛只需要存第一个阶段的数据 |
||||
} else { // 非积分赛则全部字段校验 |
||||
let customNumber = 0 |
||||
const { competitionType, minTeamSize, maxTeamSize } = step1.completeCompetitionSetup // 0为个人赛，1为团队赛 |
||||
for (const i in stages) { |
||||
const e = stages[i] |
||||
if (rule !== 2 && !e.stageName) { |
||||
invalid = 1 |
||||
util.errorMsg('请输入阶段名称') |
||||
break |
||||
} |
||||
// rule: 0为积分赛，1为淘汰赛，2为单项赛 |
||||
// 积分赛 |
||||
if (!rule) { |
||||
// 个人 |
||||
if (form.resultCalculationMethod == 0 && (e.pointWeight === '' || e.pointWeight === undefined)) { |
||||
invalid = 1 |
||||
util.errorMsg('请输入权重') |
||||
break |
||||
} |
||||
if (e.resultAnnouncementTime % 1) { |
||||
return util.errorMsg('成绩公布时间须为整数') |
||||
pointWeight += e.pointWeight // 权重求和 |
||||
} else if (rule === 1) { // 淘汰赛 |
||||
// 晋级规则必须至少填一个(最后一个阶段不用填写) |
||||
if (i != stages.length - 1 && e.peopleLimit === '' && e.percentageLimit === '' && e.score === '') { |
||||
invalid = 1 |
||||
util.errorMsg('请至少填写一条晋级规则') |
||||
break |
||||
} |
||||
e.resultAnnouncementTime = +e.resultAnnouncementTime |
||||
if (e.score !== '') e.scoreLimit = e.operator + e.score |
||||
} |
||||
form.competitionStageList = stages.slice(0, 1) // 单项赛只需要存第一个阶段的数据 |
||||
} else { // 非积分赛则全部字段校验 |
||||
for (const i in stages) { |
||||
const e = stages[i] |
||||
if (rule !== 2 && !e.stageName) { |
||||
if (rule !== 2 && competitionType && e.teamNumLimit) { |
||||
if (e.customNumber === '' || e.customNumber === undefined) { |
||||
invalid = 1 |
||||
util.errorMsg('请输入阶段名称') |
||||
util.errorMsg('请输入团队参数人数限制') |
||||
break |
||||
} else if (e.customNumber < 0) { |
||||
invalid = 1 |
||||
util.errorMsg('团队参数人数不得小于0') |
||||
break |
||||
} else if (maxTeamSize !== '' && e.customNumber > maxTeamSize) { |
||||
invalid = 1 |
||||
util.errorMsg('团队参数人数不得大于团队人数上限') |
||||
break |
||||
} |
||||
const { competitionType, maxTeamSize } = step1.completeCompetitionSetup // 0为个人赛，1为团队赛 |
||||
// rule: 0为积分赛，1为淘汰赛，2为单项赛 |
||||
// 积分赛 |
||||
if (!rule) { |
||||
// 个人 |
||||
if (form.resultCalculationMethod == 0 && e.pointWeight === '') { |
||||
invalid = 1 |
||||
util.errorMsg('请输入权重') |
||||
break |
||||
} |
||||
pointWeight += e.pointWeight // 权重求和 |
||||
} else if (rule === 1) { // 淘汰赛 |
||||
// 晋级规则必须至少填一个(最后一个阶段不用填写) |
||||
if (i != stages.length - 1 && e.peopleLimit === '' && e.percentageLimit === '' && e.score === '') { |
||||
invalid = 1 |
||||
util.errorMsg('请至少填写一条晋级规则') |
||||
break |
||||
} |
||||
if (e.score !== '') e.scoreLimit = e.operator + e.score |
||||
} |
||||
if (rule !== 2 && competitionType && e.teamNumLimitOpt) { |
||||
if (e.teamNumLimit === '') { |
||||
invalid = 1 |
||||
util.errorMsg('请输入团队参数人数限制') |
||||
break |
||||
} else if (e.teamNumLimit < 0) { |
||||
invalid = 1 |
||||
util.errorMsg('团队参数人数不得小于0') |
||||
break |
||||
} else if (maxTeamSize !== '' && e.teamNumLimit > maxTeamSize) { |
||||
invalid = 1 |
||||
util.errorMsg('团队参数人数不得大于团队人数上限') |
||||
break |
||||
} |
||||
} |
||||
if (e.resultsDetails === 0 && (e.resultAnnouncementTime !== '' && e.resultAnnouncementTime !== undefined)) { |
||||
if (e.resultAnnouncementTime < 0) { |
||||
invalid = 1 |
||||
util.errorMsg('成绩公布时间不得小于0') |
||||
break |
||||
} |
||||
if (!e.resultsDetails) { |
||||
if (e.resultAnnouncementTime === '') { |
||||
invalid = 1 |
||||
util.errorMsg('请填写成绩公布时间') |
||||
break |
||||
} |
||||
if (e.resultAnnouncementTime < 0) { |
||||
invalid = 1 |
||||
util.errorMsg('成绩公布时间不得小于0') |
||||
break |
||||
} |
||||
if (e.resultAnnouncementTime % 1) { |
||||
invalid = 1 |
||||
util.errorMsg('成绩公布时间须为整数') |
||||
break |
||||
} |
||||
e.resultAnnouncementTime = +e.resultAnnouncementTime |
||||
if (e.resultAnnouncementTime % 1) { |
||||
invalid = 1 |
||||
util.errorMsg('成绩公布时间须为整数') |
||||
break |
||||
} |
||||
e.resultAnnouncementTime = +e.resultAnnouncementTime |
||||
} |
||||
if (invalid) return |
||||
if (form.resultCalculationMethod == 0 && !rule && pointWeight > 0 && pointWeight !== 100) return util.errorMsg('权重须等于100，请重新输入') |
||||
if (e.teamNumLimit && e.customNumber) customNumber += e.customNumber // 各阶段自定义的人数之和 |
||||
if (!e.teamNumLimit) e.customNumber = '' |
||||
} |
||||
} else { // 保存草稿的情况下，只保存输入了阶段名称的阶段 |
||||
form.competitionStageList = form.competitionStageList.filter(e => e.stageName) |
||||
} |
||||
for (const e of form.competitionStageList) { |
||||
if (!e.teamNumLimitOpt) e.teamNumLimit = 0 |
||||
} |
||||
this.$parent.showLoad() |
||||
if (form.ruleId) { |
||||
this.$post(this.api.editCompetitionRule, form).then(res => { |
||||
this.$parent.hideLoad() |
||||
util.successMsg("修改成功"); |
||||
this.$emit('next', next) |
||||
}).catch(err => { |
||||
this.$parent.hideLoad() |
||||
}) |
||||
} else { |
||||
form.setupId = this.setupId |
||||
this.$post(this.api.addCompetitionRule, form).then(res => { |
||||
this.$parent.hideLoad() |
||||
util.successMsg("创建成功"); |
||||
this.$emit('next', next) |
||||
}).catch(err => { |
||||
this.$parent.hideLoad() |
||||
}) |
||||
if (invalid) return |
||||
if (form.teamLimit && competitionType) { |
||||
if (stages.length > minTeamSize) return util.errorMsg('阶段数不得大于团队人数下限') |
||||
if (customNumber > minTeamSize) return util.errorMsg('各阶段自定义的参赛人数之和不得大于团队人数下限') |
||||
} |
||||
if (form.resultCalculationMethod == 0 && !rule && pointWeight > 0 && pointWeight !== 100) return util.errorMsg('权重须等于100，请重新输入') |
||||
} |
||||
}, |
||||
} |
||||
} else { // 保存草稿的情况下，只保存输入了阶段名称的阶段 |
||||
form.competitionStageList = form.competitionStageList.filter(e => e.stageName) |
||||
} |
||||
this.$parent.showLoad() |
||||
if (form.ruleId) { |
||||
this.$post(this.api.editCompetitionRule, form).then(res => { |
||||
this.$parent.hideLoad() |
||||
this.updateTime && util.successMsg("修改成功"); |
||||
this.automaticAllocation(next) |
||||
}).catch(err => { |
||||
this.$parent.hideLoad() |
||||
}) |
||||
} else { |
||||
form.setupId = this.setupId |
||||
this.$post(this.api.addCompetitionRule, form).then(res => { |
||||
this.$parent.hideLoad() |
||||
util.successMsg("创建成功"); |
||||
this.$emit('next', next) |
||||
}).catch(err => { |
||||
this.$parent.hideLoad() |
||||
}) |
||||
} |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
/deep/ .d-inline-block { |
||||
width: 216px; |
||||
.el-select, .el-input { |
||||
width: 100%; |
||||
} |
||||
width: 216px; |
||||
|
||||
.el-select, |
||||
.el-input { |
||||
width: 100%; |
||||
} |
||||
} |
||||
.inline-input { |
||||
.input-wrap { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 10px; |
||||
|
||||
.el-input { |
||||
display: inline-block; |
||||
width: 216px; |
||||
margin-right: 8px; |
||||
} |
||||
.inline-input { |
||||
.input-wrap { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 10px; |
||||
|
||||
.remove { |
||||
width: 16px; |
||||
height: 16px; |
||||
background: url("../../../assets/img/close.png") 0 0/cover no-repeat; |
||||
cursor: pointer; |
||||
} |
||||
.el-input { |
||||
display: inline-block; |
||||
width: 216px; |
||||
margin-right: 8px; |
||||
} |
||||
|
||||
.add-btn { |
||||
margin-left: 32px; |
||||
.remove { |
||||
width: 16px; |
||||
height: 16px; |
||||
background: url('../../../assets/img/close.png') 0 0 / cover no-repeat; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.add-btn { |
||||
margin-left: 32px; |
||||
} |
||||
} |
||||
|
||||
.input-center { |
||||
display: flex; |
||||
align-items: center; |
||||
width: 216px; |
||||
white-space: nowrap; |
||||
|
||||
.el-input { |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
|
||||
.step-set { |
||||
padding: 15px; |
||||
background-color: #fbfbfb; |
||||
} |
||||
|
||||
.tips { |
||||
font-size: 13px; |
||||
color: #959595; |
||||
} |
||||
|
||||
.req { |
||||
color: #f00; |
||||
} |
||||
|
||||
.line { |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
@ -1,53 +1,56 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="modal"> |
||||
<el-steps :space="200" :active="4" finish-status="success"> |
||||
<el-step title="大赛信息填写"></el-step> |
||||
<el-step title="赛程与规则设置"></el-step> |
||||
<el-step title="比赛内容设置"></el-step> |
||||
<el-step title="发布"></el-step> |
||||
</el-steps> |
||||
<h1>大赛已发布！</h1> |
||||
<div class="btns"> |
||||
<el-button type="primary" @click="back">确定</el-button> |
||||
</div> |
||||
<div class="wrap"> |
||||
<div class="modal"> |
||||
<el-steps :space="200" |
||||
:active="4" |
||||
finish-status="success"> |
||||
<el-step title="大赛信息填写"></el-step> |
||||
<el-step title="赛程与规则设置"></el-step> |
||||
<el-step title="比赛内容设置"></el-step> |
||||
<el-step title="发布"></el-step> |
||||
</el-steps> |
||||
<h1>大赛已发布！</h1> |
||||
<div class="btns"> |
||||
<el-button type="primary" |
||||
@click="back">确定</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
data () { |
||||
return { |
||||
|
||||
}; |
||||
}, |
||||
mounted() { |
||||
}; |
||||
}, |
||||
mounted () { |
||||
|
||||
}, |
||||
methods: { |
||||
back() { |
||||
this.$router.push(`/match?page=${this.$store.state.matchPage}`) |
||||
} |
||||
}, |
||||
methods: { |
||||
back () { |
||||
this.$router.push(this.$store.state.referrer || '/match') |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.wrap { |
||||
height: calc(100vh - 300px); |
||||
background-color: #fefefe; |
||||
height: calc(100vh - 300px); |
||||
background-color: #fefefe; |
||||
} |
||||
.modal { |
||||
width: 500px; |
||||
padding-top: 150px; |
||||
margin: 0 auto ; |
||||
h1 { |
||||
margin: 20px; |
||||
text-align: center; |
||||
} |
||||
.btns { |
||||
text-align: center; |
||||
} |
||||
width: 500px; |
||||
padding-top: 150px; |
||||
margin: 0 auto; |
||||
h1 { |
||||
margin: 20px; |
||||
text-align: center; |
||||
} |
||||
.btns { |
||||
text-align: center; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,211 @@ |
||||
<template> |
||||
<!-- 理论考试选择试卷 --> |
||||
<div> |
||||
<el-dialog title="请选择试卷" :visible.sync="listVisible" width="1200px" :close-on-click-modal="false" |
||||
@closed="closeDia"> |
||||
<div class="tool"> |
||||
<ul class="filter"> |
||||
<li> |
||||
<label>试卷库</label> |
||||
<el-select v-model="filter.libraryId" placeholder="请选择试卷库" @change="initData"> |
||||
<el-option v-for="(item, i) in paperLibraries" :key="i" :label="item.libraryName" :value="item.libraryId"> |
||||
</el-option> |
||||
</el-select> |
||||
</li> |
||||
<li> |
||||
<label>建议用途</label> |
||||
<el-select v-model="filter.paperType" clearable placeholder="请选择状态" @change="initData"> |
||||
<el-option v-for="(item, i) in paperTypes" :key="i" :label="item.name" :value="item.id"></el-option> |
||||
</el-select> |
||||
</li> |
||||
<li> |
||||
<label>试卷难度</label> |
||||
<el-select v-model="filter.difficult" clearable multiple placeholder="请选择试卷难度" @change="initData"> |
||||
<el-option v-for="(item, i) in difficults" :key="i" :label="item.name" :value="item.id"></el-option> |
||||
</el-select> |
||||
</li> |
||||
<li> |
||||
<label>题目类型</label> |
||||
<el-select v-model="questionType" clearable multiple placeholder="请选择题目类型" @change="initData"> |
||||
<el-option v-for="(item, i) in questionTypes" :key="i" :label="item.name" :value="item.name"></el-option> |
||||
</el-select> |
||||
</li> |
||||
<li> |
||||
<label>搜索</label> |
||||
<el-input style="width: 250px;" placeholder="请输入试卷名称" prefix-icon="el-icon-search" v-model="filter.keyWord" |
||||
clearable /> |
||||
</li> |
||||
</ul> |
||||
<div> |
||||
<!-- <el-button type="primary" @click="add">自定义理论试卷</el-button> --> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-table :data="papers" class="table" stripe header-align="center" @sort-change="sortChange"> |
||||
<el-table-column width="60" label="选择" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-radio v-model="form.paperId" :label="scope.row.paperId"> </el-radio> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||
<el-table-column prop="name" label="试卷名称" min-width="140" align="center"></el-table-column> |
||||
<el-table-column prop="questionCount" label="试题总数" align="center" min-width="70"></el-table-column> |
||||
<el-table-column prop="score" label="总分" align="center" min-width="70"></el-table-column> |
||||
<el-table-column prop="questionType" label="题型" align="center" min-width="90" |
||||
show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="difficult" label="试卷难度" align="center" min-width="70" sortable="custom"> |
||||
<template slot-scope="scope">{{ difficults.find(e => e.id === scope.row.difficult) ? difficults.find(e => |
||||
e.id === scope.row.difficult).name : '' }}</template> |
||||
</el-table-column> |
||||
<el-table-column prop="suggestTime" label="建议用时" align="center" min-width="70"> |
||||
<template slot-scope="scope">{{ scope.row.suggestTime }}min</template> |
||||
</el-table-column> |
||||
<el-table-column prop="classificationPath" label="试卷分类" align="center" min-width="70" |
||||
show-overflow-tooltip></el-table-column> |
||||
<el-table-column label="建议用途" align="center" min-width="70"> |
||||
<template slot-scope="scope">{{ paperTypes.find(e => e.id === scope.row.paperType) ? paperTypes.find(e => |
||||
e.id === scope.row.paperType).name : '' }}</template> |
||||
</el-table-column> |
||||
<el-table-column prop="updateTime" label="最近编辑时间" align="center" width="170" |
||||
sortable="custom"></el-table-column> |
||||
<el-table-column prop="createUser" label="最近编辑人" align="center" width="110"></el-table-column> |
||||
<el-table-column label="操作" align="center" width="80"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" @click="previewPaper(scope.row)">预览</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background :page-size="pageSize" @current-change="handleCurrentChange" |
||||
layout="total,prev, pager, next" :total="total"></el-pagination> |
||||
</div> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="listVisible = false">取消</el-button> |
||||
<el-button type="primary" :loading="submiting" @click="submit">确定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Setting from '@/setting' |
||||
import Util from '@/libs/util' |
||||
import _ from 'lodash' |
||||
import QuesConst from '@/const/ques' |
||||
import TestPaperConst from '@/const/testPaper' |
||||
export default { |
||||
props: ['visible', 'form'], |
||||
data () { |
||||
return { |
||||
arabicToChinese: Util.arabicToChinese, |
||||
questionTypes: QuesConst.questionTypes, |
||||
difficults: TestPaperConst.difficults, |
||||
paperTypes: TestPaperConst.paperTypes, |
||||
listVisible: false, |
||||
searchTimer: null, |
||||
|
||||
questionType: [], |
||||
paperLibraries: [], |
||||
filter: { |
||||
libraryId: '', |
||||
paperType: '', |
||||
difficult: [], |
||||
keyWord: '', |
||||
}, |
||||
list: [], |
||||
page: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
paperId: '', |
||||
submiting: false, |
||||
|
||||
}; |
||||
}, |
||||
watch: { |
||||
'filter.keyWord': function (val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(this.initData, 500) |
||||
}, |
||||
visible () { |
||||
this.listVisible = this.visible |
||||
this.visible && this.getList() |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.originForm = _.cloneDeep(this.form) |
||||
}, |
||||
methods: { |
||||
// 获取试卷列表 |
||||
async getList () { |
||||
try { |
||||
const res = await this.$post(this.api.examPaperList, { |
||||
...this.filter, |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
type: 1, |
||||
keyWord: this.keyword, |
||||
libraryId: this.systemId |
||||
}) |
||||
this.papers = res.pageList.records |
||||
this.total = res.pageList.total |
||||
} catch (e) { } |
||||
}, |
||||
// 切换页码 |
||||
currentChange (val) { |
||||
this.page = val |
||||
this.getList() |
||||
}, |
||||
handleCurrentChange (val) { |
||||
this.page = val |
||||
this.getList() |
||||
}, |
||||
initData () { |
||||
this.page = 1 |
||||
this.getList() |
||||
}, |
||||
// 排序回调 |
||||
sortChange (column) { |
||||
if (column.prop === 'updateTime') this.filter.updateTimeOrder = column.order ? column.order === 'ascending' ? 1 : 2 : '' |
||||
this.getList() |
||||
}, |
||||
// 新增 |
||||
add () { |
||||
this.form = _.cloneDeep(this.originForm) |
||||
this.detailVisible = true |
||||
}, |
||||
// 预览试卷 |
||||
previewPaper (row) { |
||||
this.$parent.previewPaper(row) |
||||
}, |
||||
// 提交 |
||||
async submit () { |
||||
const { paperId } = this.form |
||||
if (!paperId) return Util.warningMsg('请选择试卷') |
||||
|
||||
const curPaper = this.papers.find(e => e.paperId === paperId) |
||||
if (curPaper) this.form.paperName = curPaper.name |
||||
this.handlePaper() |
||||
}, |
||||
// 复制试卷 |
||||
async handlePaper () { |
||||
const { form } = this |
||||
// 老的试卷名称不等于新的试卷名称，则复制一份试卷，再把新的试卷id替换掉 |
||||
if (form.paperName !== form.originPaperName) { |
||||
const res = await this.$post(this.api.copyExamPaper, { |
||||
associatedID: form.stageId, |
||||
paperId: form.paperId, |
||||
typeId: 1 |
||||
}) |
||||
if (res.examPaper) { |
||||
form.paperId = res.examPaper.paperId |
||||
} |
||||
} |
||||
}, |
||||
// 弹框关闭回调 |
||||
closeDia () { |
||||
this.$emit('update:visible', false) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,630 @@ |
||||
<template> |
||||
<!-- 报名人员 --> |
||||
<div class="page-content" style="padding: 24px"> |
||||
<div class="tool"> |
||||
<ul class="filter"> |
||||
<li> |
||||
<label>搜索：</label> |
||||
<el-input |
||||
:placeholder="'请输入姓名、手机号、' + (info.completeCompetitionSetup.competitionType ? '团队名称、' : '') + '学号、学校'" |
||||
prefix-icon="el-icon-search" v-model="keyword" clearable size="mini" style="width: 350px"></el-input> |
||||
</li> |
||||
<li v-if="info.releaseType"> |
||||
<label>参赛人员状态：</label> |
||||
<el-select v-model="isDisable" @change="initData"> |
||||
<el-option v-for="(item, i) in statusList" :key="i" :label="item.name" :value="item.id"></el-option> |
||||
</el-select> |
||||
</li> |
||||
</ul> |
||||
<div> |
||||
<el-button type="primary" round :loading="exporting" @click="exportAll" |
||||
v-auth="'/match:管理:报名人员:导出'">批量导出</el-button> |
||||
<el-button type="primary" @click="batchDel" round v-auth="'/match:管理:报名人员:导出'">批量删除</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-table ref="table" :data="listData" class="table" stripe header-align="center" |
||||
@selection-change="handleSelectionChange" row-key="id" v-loading="loading" @sort-change="sortChange"> |
||||
<el-table-column type="selection" width="80" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="60" label="序号" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.$index + (page - 1) * pageSize + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="school" label="学生账号归属" sortable="custom" min-width="180" align="center"></el-table-column> |
||||
<el-table-column prop="realSchool" label="学生所在院校" min-width="180" align="center"></el-table-column> |
||||
<el-table-column v-if="info.completeCompetitionSetup.competitionType" prop="teamName" label="团队名称" |
||||
sortable="custom" min-width="140" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="username" label="队长" min-width="140" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="workNumber" label="队长学号" min-width="140" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="phone" label="队长手机号" min-width="140" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="captain" label="是否为队长" min-width="90" align="center"></el-table-column> |
||||
<el-table-column prop="teachers" label="指导老师" min-width="200" align="center" show-overflow-tooltip> |
||||
<template slot-scope="scope"> |
||||
<template v-if="scope.row.teachers"> |
||||
<el-tooltip placement="top"> |
||||
<div slot="content" style="line-height: 1.8"> |
||||
<div v-for="(item, i) in scope.row.teachers" :key="i"> |
||||
{{ item.name }}{{ item.phone ? '，' + item.phone : '' }}{{ item.position ? '，' + item.position : '' }} |
||||
</div> |
||||
</div> |
||||
<p>{{ scope.row.teachers[0].name }}{{ scope.row.teachers[0].phone ? '，' + scope.row.teachers[0].phone : '' |
||||
}}{{ scope.row.teachers[0].position ? '，' + scope.row.teachers[0].position : '' }}</p> |
||||
</el-tooltip> |
||||
</template> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="captain" label="团队状态" min-width="80" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-link type="danger" style="font-size: 16px" @click="toInfo(scope.row)">异常</el-link> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="270"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'/match:管理:报名人员:编辑'" type="text" @click="edit(scope.row)">编辑</el-button> |
||||
<el-button type="text" @click="del(scope.row)">删除</el-button> |
||||
<template v-if="info.releaseType"> |
||||
<el-button v-auth="'/match:管理:报名人员:参赛信息与成绩'" type="text" @click="toInfo(scope.row)">参赛信息与成绩</el-button> |
||||
<el-switch v-auth="'/match:管理:报名人员:禁用'" v-model="scope.row.isDisable" |
||||
:active-text="scope.row.isDisable ? '禁用' : '启用'" :active-value="0" :inactive-value="1" |
||||
style="margin: 0 10px 0 5px" @change="switchOff($event, scope.row, scope.$index)"></el-switch> |
||||
</template> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" |
||||
:current-page="page"> |
||||
</el-pagination> |
||||
</div> |
||||
|
||||
<el-dialog :title="(!isAdd ? '编辑' : '新增') + '参赛人员'" :visible.sync="addVisible" width="440px" class="dialog" |
||||
:close-on-click-modal="false" @close="closeAdd"> |
||||
<el-form ref="form" :model="form" :rules="rules" label-width="110px" style='margin-right: 10px;'> |
||||
<el-form-item v-if="!schoolDisable" prop="schoolId" label="学生账号归属"> |
||||
<el-select v-model="form.schoolId" filterable :disabled="!isAdd" @change="schoolChange" style="width: 100%"> |
||||
<el-option v-for="(item, i) in clients" :key="i" :label="item.schoolName" |
||||
:value="item.schoolId"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item prop="studentAffiliatedInstitutionId" label="学生所在院校"> |
||||
<el-select v-model="form.studentAffiliatedInstitutionId" filterable style="width: 100%"> |
||||
<el-option v-for="(item, i) in schools" :key="i" :label="item.schoolName" |
||||
:value="item.schoolId"></el-option> |
||||
</el-select> |
||||
<p style="margin-top: 10px;line-height: 1.4;font-size: 12px;">学生所属院校为学生实际院校</p> |
||||
</el-form-item> |
||||
<el-form-item prop="workNumber" label="学生学号"> |
||||
<el-input v-model="form.workNumber" placeholder="请输入学生学号" @change="workNumberChange"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="userName" label="学生姓名"> |
||||
<el-input v-model="form.userName" placeholder="请输入学生姓名" :disabled="isAdd"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="账号角色"> |
||||
学生 |
||||
</el-form-item> |
||||
<el-form-item v-if="info.completeCompetitionSetup.competitionType" prop="teamId" label="所属团队"> |
||||
<div style="display: flex;align-items: center"> |
||||
<el-select v-model="form.teamId" :disabled="formEnable && isAdd" filterable |
||||
style="width: 240px;margin-right: 10px"> |
||||
<el-option v-for="(item, i) in teams" :key="i" :label="item.teamName" :value="item.teamId"></el-option> |
||||
</el-select> |
||||
<el-button v-if="isAdd && !formEnable" type="text" @click="createTeam">创建团队</el-button> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item prop="phone" label="手机号"> |
||||
<el-input v-model="form.phone" maxlength="11" placeholder="请输入手机号" :disabled="isAdd"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="email" label="邮箱"> |
||||
<el-input v-model="form.email" placeholder="请输入邮箱" :disabled="isAdd"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<p v-if="!isAdd" class="tips" style="margin-left: 13px">当前页面信息修改会同步修改掉学生账号信息</p> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="addVisible = false">取消</el-button> |
||||
<el-button type="primary" @click="submit">确定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
<el-dialog title="创建团队" :visible.sync="teamVisible" :close-on-click-modal="false" width="300px"> |
||||
<el-form class="dia-form"> |
||||
<el-form-item> |
||||
<el-input placeholder="请输入团队名称" maxlength="10" v-model="teamForm.teamName"></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-input placeholder="请设置团队邀请码" maxlength="6" v-model="teamForm.invitationCode"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button size="small" type="primary" @click="teamSubmit">确定并使用</el-button> |
||||
<el-button size="small" @click="teamVisible = false">取消</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import axios from 'axios' |
||||
import Setting from "@/setting"; |
||||
export default { |
||||
data () { |
||||
return { |
||||
token: sessionStorage.getItem('token'), |
||||
id: +this.$route.query.id, |
||||
info: { |
||||
completeCompetitionSetup: { |
||||
competitionType: 1, |
||||
} |
||||
}, |
||||
isDisable: this.$route.query.isDisable ? +this.$route.query.isDisable : '', |
||||
statusList: [ |
||||
{ |
||||
id: '', |
||||
name: '不限' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '已禁用' |
||||
}, |
||||
{ |
||||
id: 0, |
||||
name: '未禁用' |
||||
} |
||||
], |
||||
keyword: this.$route.query.keyword || '', |
||||
listData: [], |
||||
multipleSelection: [], |
||||
page: +this.$route.query.page || 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
schoolOrder: '', |
||||
teamOrder: '', |
||||
clients: [], |
||||
schools: [], |
||||
addVisible: false, |
||||
formEnable: true, |
||||
isAdd: false, |
||||
form: { |
||||
captain: 0, |
||||
competitionId: this.$route.query.id, |
||||
userName: '', |
||||
workNumber: '', |
||||
schoolId: '', |
||||
studentAffiliatedInstitutionId: '', |
||||
teamId: '', |
||||
whetherSignUp: 0, |
||||
phone: '', |
||||
email: '', |
||||
identification: 1, |
||||
uniqueIdentification: Date.now(), |
||||
password: Setting.initialPassword |
||||
}, |
||||
rules: { |
||||
schoolId: [ |
||||
{ required: true, message: "请选择所属院校", trigger: "change" } |
||||
], |
||||
workNumber: [ |
||||
{ required: true, message: "请输入学号", trigger: "blur" } |
||||
], |
||||
teamId: [ |
||||
{ required: true, message: "请选择所属团队", trigger: "change" } |
||||
] |
||||
}, |
||||
submiting: false, |
||||
|
||||
teamVisible: false, |
||||
teams: [], |
||||
teamNameRepeat: false, |
||||
teamForm: { |
||||
competitionId: this.$route.query.id, |
||||
registrationInvitationCode: '', |
||||
teamName: '', |
||||
invitationCode: '', |
||||
whetherSignUp: 1, |
||||
identification: 1 |
||||
}, |
||||
originForm: {}, |
||||
exitMember: 0, |
||||
notExit: 0, |
||||
schoolDisable: false, |
||||
|
||||
importVisible: false, |
||||
uploadList: [], |
||||
uploadFaild: false, |
||||
uploadTips: '', |
||||
exportCode: '', |
||||
headers: { |
||||
token: sessionStorage.getItem("token") |
||||
}, |
||||
uploading: false, |
||||
isBackstage: 0, |
||||
exporting: false, |
||||
loading: false, |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function (val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.getData() |
||||
this.getInfo() |
||||
this.getTeam() |
||||
}, |
||||
methods: { |
||||
init () { |
||||
this.initData() |
||||
this.getTeam() |
||||
this.getClient() |
||||
}, |
||||
async getData () { |
||||
this.loading = true |
||||
const { data } = await this.$post(this.api.queryAbnormalTeam, { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
competitionId: this.id, |
||||
keyWord: this.keyword, |
||||
isDisable: this.isDisable, |
||||
schoolOrder: this.schoolOrder, |
||||
teamOrder: this.teamOrder, |
||||
}) |
||||
const list = data.records; |
||||
list.map(e => { |
||||
if (e.teacherDetails) { |
||||
e.teachers = JSON.parse(e.teacherDetails) |
||||
} |
||||
}) |
||||
this.listData = list |
||||
this.total = data.total; |
||||
this.$refs.table.clearSelection(); |
||||
this.loading = false |
||||
}, |
||||
// 获取赛事信息 |
||||
getInfo () { |
||||
this.$post(`${this.api.getCompetition}?competitionId=${this.id}`).then(({ competition }) => { |
||||
this.info = competition |
||||
this.getSchool() |
||||
// 非本校内则查询接口获取学校列表 |
||||
if (competition.competitionScope) { |
||||
this.getClient() |
||||
} else { |
||||
this.schoolDisable = true |
||||
this.form.schoolId = competition.schoolId |
||||
} |
||||
}).catch(err => { }) |
||||
}, |
||||
initData () { |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
handleSelectionChange (val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
handleCurrentChange (val) { |
||||
this.page = val; |
||||
this.getData(); |
||||
}, |
||||
switchOff (val, row, index) { |
||||
this.$put(`${this.api.disableRegistration}?competitionRegistrationId=${row.id}&isDisable=${val}`).then(res => { }).catch(err => { }); |
||||
}, |
||||
// 排序回调 |
||||
sortChange (column) { |
||||
// 1上2下 |
||||
if (column.prop === 'school') this.schoolOrder = column.order ? column.order === 'ascending' ? 2 : 1 : '' |
||||
if (column.prop === 'teamName') this.teamOrder = column.order ? column.order === 'ascending' ? 2 : 1 : '' |
||||
this.getData() |
||||
}, |
||||
// 编辑 |
||||
edit (row) { |
||||
this.notExit = 0 |
||||
this.isAdd = false |
||||
this.addVisible = true |
||||
row.userName = row.username |
||||
this.exitMember = 0 |
||||
row.id = row.accountId |
||||
this.originForm = JSON.parse(JSON.stringify(row)) |
||||
this.form = JSON.parse(JSON.stringify(row)) |
||||
}, |
||||
del (row) { |
||||
this.$confirm(!this.info.completeCompetitionSetup.competitionType || row.captain === '否' ? '删除后该参赛人员已有的成绩会一并删除，成绩排名将会受影响，是否确定要删除？' : '删除队长后，该团队下所有成员都会同步移除报名，已有的成绩也会一并删除，成绩排名将会受影响，是否确认删除？', "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(this.api.batchDeleteApplicants, { registrationVOS: [row] }).then(res => { |
||||
util.successMsg("删除成功"); |
||||
this.init() |
||||
}).catch(res => { }); |
||||
}).catch(() => { }); |
||||
}, |
||||
// 学校选择回调 |
||||
schoolChange () { |
||||
if (!this.form.studentAffiliatedInstitutionId) this.form.studentAffiliatedInstitutionId = this.form.schoolId |
||||
}, |
||||
// 学号输入完回调。学校和学号都输入完后，调这个接口查询是否有存在的学生，如果有，才能继续输入，如果不能，不让添加 |
||||
workNumberChange () { |
||||
const { form } = this |
||||
if (this.originForm.workNumber !== form.workNumber) { |
||||
form.schoolId && form.workNumber && this.$get(`${this.api.enquireAboutSchoolStudents}?schoolId=${form.schoolId}&workNumber=${form.workNumber}${this.isAdd ? '' : '&applyFor=1'}`).then(({ account }) => { |
||||
this.notExit = 0 |
||||
this.exitMember = 0 |
||||
if (account) { |
||||
const { studentAffiliatedInstitutionId } = form |
||||
account.studentAffiliatedInstitutionId = studentAffiliatedInstitutionId |
||||
this.form = account |
||||
} |
||||
this.formEnable = !account |
||||
}).catch(res => { |
||||
if (res.message === '学生不存在') this.notExit = 1 |
||||
if (!this.isAdd) this.exitMember = 1 |
||||
}) |
||||
} else { |
||||
this.exitMember = 0 |
||||
} |
||||
}, |
||||
// 新增编辑人员 |
||||
submitForm () { |
||||
const { form } = this |
||||
if (!this.isAdd) { // 编辑 |
||||
this.$post(this.api.updateUser, { |
||||
hrUserAccount: { |
||||
...form, |
||||
id: form.id, |
||||
lastTimeInstitutionId: this.originForm.studentAffiliatedInstitutionId |
||||
}, |
||||
hrUserInfo: { |
||||
userId: form.userId, |
||||
schoolId: form.schoolId, |
||||
email: form.email, |
||||
userName: form.userName |
||||
} |
||||
}).then(res => { |
||||
// 团队有更换，则调加入团队的接口 |
||||
if (this.originForm.teamId !== form.teamId) { |
||||
this.$post(this.api.joinCompetitionTeam, { |
||||
schoolId: form.schoolId, |
||||
studentAffiliatedInstitutionId: form.studentAffiliatedInstitutionId, |
||||
accountId: form.id, |
||||
competitionId: this.id, |
||||
teamId: form.teamId, |
||||
identification: 1, |
||||
whetherSignUp: 1 |
||||
}).then(res => { |
||||
this.addVisible = false |
||||
this.init() |
||||
this.submiting = false |
||||
util.successMsg('编辑成功！') |
||||
}).catch(res => { |
||||
this.submiting = false |
||||
}) |
||||
} else { |
||||
this.addVisible = false |
||||
this.init() |
||||
this.submiting = false |
||||
util.successMsg('编辑成功！') |
||||
} |
||||
}).catch(res => { |
||||
this.submiting = false |
||||
}) |
||||
} else { |
||||
// 新增人员后再调加入团队的接口 |
||||
this.$post(this.api[this.info.completeCompetitionSetup.competitionType ? 'joinCompetitionTeam' : 'addCompetitionRegistration'], { |
||||
schoolId: form.schoolId, |
||||
studentAffiliatedInstitutionId: form.studentAffiliatedInstitutionId, |
||||
accountId: form.id, |
||||
competitionId: this.id, |
||||
teamId: this.form.teamId, |
||||
identification: 1, |
||||
whetherSignUp: 1 |
||||
}).then(res => { |
||||
this.addVisible = false |
||||
this.init() |
||||
this.submiting = false |
||||
util.successMsg('报名成功！') |
||||
}).catch(res => { |
||||
this.submiting = false |
||||
}) |
||||
} |
||||
}, |
||||
// 新增人员 |
||||
submit () { |
||||
this.$refs.form.validate((valid) => { |
||||
if (valid) { |
||||
if (this.submiting) return false |
||||
const { form } = this |
||||
const team = this.teams.find(e => e.teamId == form.teamId) |
||||
if (team && team.invitationCode) form.invitationCode = team.invitationCode |
||||
// 平台id-端id-schoolId-workNumber组成账号 |
||||
form.account = `${Setting.platformId}-3-${form.schoolId}-${form.workNumber}` |
||||
const { phone, email } = form |
||||
if (phone && !/^1[3456789]\d{9}$/.test(phone)) { |
||||
return util.errorMsg("请输入正确的手机号") |
||||
} else if (email && !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(email)) { |
||||
return util.errorMsg("请输入正确的邮箱") |
||||
} else if (this.notExit) { |
||||
return util.errorMsg('学生不存在，无法添加！') |
||||
} else if (this.exitMember) { |
||||
return util.errorMsg('学生已存在') |
||||
} else { |
||||
this.submiting = true |
||||
this.submitForm() |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
// 关闭新增员工对话框 |
||||
closeAdd () { |
||||
this.form = { |
||||
captain: 0, |
||||
competitionId: this.id, |
||||
userName: '', |
||||
workNumber: '', |
||||
schoolId: '', |
||||
teamId: '', |
||||
whetherSignUp: 0, |
||||
phone: '', |
||||
email: '', |
||||
identification: 1, |
||||
uniqueIdentification: Date.now(), |
||||
password: Setting.initialPassword |
||||
} |
||||
}, |
||||
// 创建团队 |
||||
createTeam () { |
||||
this.teamForm = { |
||||
competitionId: this.id, |
||||
registrationInvitationCode: '', |
||||
teamName: '', |
||||
invitationCode: '', |
||||
whetherSignUp: 1, |
||||
identification: 1 |
||||
} |
||||
this.teamVisible = true |
||||
}, |
||||
// 学生所属院校固定查询所有学校 |
||||
async getSchool () { |
||||
const { list } = await this.$get(this.api.querySchoolData) |
||||
this.schools = list |
||||
}, |
||||
// 获取客户 |
||||
async getClient () { |
||||
if (this.info.competitionScope === 2) { |
||||
// 选择了指定范围则查询该赛事指定范围的学校 |
||||
this.$get(`${this.api.schoolsInCompetitionArea}?competitionId=${this.id}`).then(({ schools }) => { |
||||
this.clients = schools |
||||
}).catch(res => { }) |
||||
} else { |
||||
// 选了全平台则查询客户列表 |
||||
const sid = this.$store.state.dataPer.find(e => e.permissionName === '客户管理') |
||||
this.$post(this.api.queryCustomer, { |
||||
customerType: '', |
||||
page: 1, |
||||
size: 10000, |
||||
supplierId: (sid && !sid.all) ? sid.supplierId : '' |
||||
}).then(res => { |
||||
const { list } = res.message |
||||
list.map(e => { |
||||
e.schoolName = e.customerName |
||||
}) |
||||
this.clients = list |
||||
}).catch(res => { }) |
||||
} |
||||
}, |
||||
// 获取团队列表 |
||||
getTeam () { |
||||
this.$get(this.api.searchTeam, { |
||||
teamName: '', |
||||
competitionId: this.id |
||||
}).then(({ teamList }) => { |
||||
this.teams = teamList |
||||
}).catch(res => { }) |
||||
}, |
||||
// 团队提交 |
||||
teamSubmit () { |
||||
const form = this.teamForm |
||||
if (!form.teamName) return util.errorMsg('请输入团队名称') |
||||
if (form.invitationCode.length !== 6) return util.errorMsg('请输入6位数团队邀请码') |
||||
form.accountId = this.form.id |
||||
form.schoolId = this.form.schoolId |
||||
form.studentAffiliatedInstitutionId = this.form.studentAffiliatedInstitutionId |
||||
this.$post(this.api.addCompetitionTeam, form).then(res => { |
||||
this.teamVisible = false |
||||
this.addVisible = false |
||||
this.init() |
||||
util.successMsg('报名成功！') |
||||
}).catch(res => { }) |
||||
}, |
||||
// 参赛信息 |
||||
toInfo (row) { |
||||
this.$store.commit('setInnerReferrer', `${this.$route.path}?id=${this.id}&tab=tab6&name=${this.$route.query.name}&keyword=${this.keyword}&page=${this.page}&isDisable=${this.isDisable}`) |
||||
this.$router.push(`/matchInfo?id=${this.id}&accountId=${row.accountId}`) |
||||
}, |
||||
exportAll () { |
||||
if (this.listData.length) { |
||||
this.exporting = true |
||||
const data = this.multipleSelection |
||||
if (data.length) { |
||||
data.map((e, i) => e.id = i + 1) |
||||
axios.post(this.api.exportDataInBatches, data, { |
||||
headers: { |
||||
token: this.token |
||||
}, |
||||
responseType: 'blob' |
||||
}).then((res) => { |
||||
const name = res.headers['content-disposition'] |
||||
util.downloadFileDirect(name ? decodeURI(name) : '报名人员.xlsx', new Blob([res.data])) |
||||
this.exporting = false |
||||
}).catch(res => { |
||||
this.exporting = false |
||||
}) |
||||
} else { |
||||
axios.get(`${this.api.exportAbnormalData}?competitionId=${this.id}`, { |
||||
headers: { |
||||
token: this.token |
||||
}, |
||||
responseType: 'blob' |
||||
}).then((res) => { |
||||
const name = res.headers['content-disposition'] |
||||
util.downloadFileDirect(name ? decodeURI(name) : '报名人员.xlsx', new Blob([res.data])) |
||||
this.exporting = false |
||||
}).catch(res => { |
||||
this.exporting = false |
||||
}) |
||||
} |
||||
} |
||||
}, |
||||
// 批量删除 |
||||
async batchDel () { |
||||
const list = this.multipleSelection |
||||
const tips = list.length ? (this.info.completeCompetitionSetup.competitionType && list.find(e => e.captain === '是') ? '删除队长后，该团队下所有成员都会同步移除报名，已有的成绩也会一并删除，成绩排名将会受影响，是否确认删除？' : '删除后该参赛人员已有的成绩会一并删除，成绩排名将会受影响，是否确定要删除？') : '删除后参赛人员已有的成绩会一并删除，成绩排名将会受影响，<span style="font-size: 15px;color: #f00">是否确定删除全部报名人员？</span>' |
||||
this.$confirm(tips, "提示", { |
||||
type: "warning", |
||||
dangerouslyUseHTMLString: true |
||||
}).then(async () => { |
||||
if (list.length) { |
||||
await this.$post(this.api.batchDeleteApplicants, { registrationVOS: list }) |
||||
} else { |
||||
await this.$post(`${this.api.deleteAllData}?competitionId=${this.id}`) |
||||
} |
||||
this.init() |
||||
this.$message.success("删除成功"); |
||||
this.$refs.table.clearSelection() |
||||
}).catch(() => { }); |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/deep/.dia-form { |
||||
.w-100 { |
||||
width: 100%; |
||||
} |
||||
|
||||
.tips { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
} |
||||
|
||||
.tips { |
||||
font-size: 12px; |
||||
color: #e90000; |
||||
} |
||||
|
||||
/deep/.import-file { |
||||
.el-progress__text, |
||||
.el-progress, |
||||
.el-upload-list__item-status-label { |
||||
display: none !important; |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,442 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<el-card shadow="hover" |
||||
class="m-b-20"> |
||||
<el-page-header @back="$router.back()" |
||||
content="查看报告"></el-page-header> |
||||
</el-card> |
||||
|
||||
<div class="content"> |
||||
<div class="text-right"> |
||||
<el-button type="primary" |
||||
@click="exportPage">导出报告</el-button> |
||||
</div> |
||||
<h6 class="r-title">标准实验报告</h6> |
||||
<div class="info"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/info1.png" |
||||
alt=""> |
||||
基本信息 |
||||
</h6> |
||||
<ul :class="['info-list', {edit: editing}]"> |
||||
<li> |
||||
<label>学生姓名：</label> |
||||
<el-input v-if="editing" |
||||
v-model="infoData.userName" |
||||
disabled></el-input> |
||||
<span v-else>{{ infoData.userName }}</span> |
||||
</li> |
||||
<li> |
||||
<label>学生学号：</label> |
||||
<el-input v-if="editing" |
||||
v-model="infoData.workNumber" |
||||
disabled></el-input> |
||||
<span v-else>{{ infoData.workNumber }}</span> |
||||
</li> |
||||
<li> |
||||
<label>实验时间：</label> |
||||
<el-input v-if="editing" |
||||
v-model="infoData.submitTime" |
||||
disabled></el-input> |
||||
<span v-else>{{ infoData.submitTime }}</span> |
||||
</li> |
||||
<li> |
||||
<label>实验成绩：</label> |
||||
<el-input v-if="editing" |
||||
v-model="infoData.score" |
||||
disabled></el-input> |
||||
<div v-else |
||||
class="score-wrap"> |
||||
<em>{{ infoData.score }}</em> |
||||
<img src="@/assets/img/point.png" |
||||
alt=""> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<label>学生班级：</label> |
||||
<el-input v-if="editing" |
||||
v-model="infoData.className"></el-input> |
||||
<span v-else>{{ infoData.className }}</span> |
||||
</li> |
||||
<li> |
||||
<label>指导老师：</label> |
||||
<el-input v-if="editing" |
||||
v-model="infoData.instructor"></el-input> |
||||
<span v-else>{{ infoData.instructor }}</span> |
||||
</li> |
||||
<li> |
||||
<label>实验学时：</label> |
||||
<el-input v-if="editing" |
||||
v-model="infoData.period"></el-input> |
||||
<span v-else>{{ infoData.period }}</span> |
||||
</li> |
||||
</ul> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/report2.png" |
||||
alt=""> |
||||
实验项目名称 |
||||
</h6> |
||||
<el-input v-if="editing" |
||||
v-model="form.projectName" |
||||
type="textarea"></el-input> |
||||
<div v-else |
||||
class="pre-wrap" |
||||
v-html="form.projectName"></div> |
||||
</div> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/report3.png" |
||||
alt=""> |
||||
实验目的 |
||||
</h6> |
||||
<div :class="['pre-wrap', {edit: editing}]" |
||||
v-html="form.purpose"></div> |
||||
</div> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/report4.png" |
||||
alt=""> |
||||
实验数据 |
||||
</h6> |
||||
<el-table :data="expData" |
||||
class="table" |
||||
border |
||||
stripe |
||||
header-align="center"> |
||||
<el-table-column type="index" |
||||
label="序号" |
||||
align="center" |
||||
width="60"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.$index + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="judgmentName" |
||||
label="判分点" |
||||
width="270" |
||||
align="center"></el-table-column> |
||||
<el-table-column v-if='project' |
||||
prop="judgmentName" |
||||
label="考核点" |
||||
align="center" |
||||
width="150"> |
||||
<template slot-scope="scope"> |
||||
<div v-for="(item, index) in scope.row.lcRuleRecords" |
||||
:key="index"> |
||||
<span> |
||||
<span>{{index+1}}. </span>{{item.name}} |
||||
</span> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="ruleAnswer" |
||||
label="参考答案" |
||||
style='word-wrap: break-word'> |
||||
<template slot-scope="scope"> |
||||
<div v-if='scope.row.lcRuleRecords'> |
||||
<div v-for="(item, index) in scope.row.lcRuleRecords" |
||||
:key="index"> |
||||
<span> |
||||
<span>{{index+1}}. </span>{{item.ruleAnswer}} |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div v-else |
||||
v-html="scope.row.referenceAnswer"></div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="userAnswer" |
||||
label="学生答案"> |
||||
<template slot-scope="scope"> |
||||
<div v-if='scope.row.lcRuleRecords'> |
||||
<div v-for="(item, index) in scope.row.lcRuleRecords" |
||||
:key="index"> |
||||
<span v-if='item.userAnswer'> |
||||
<span>{{index+1}}. </span>{{item.userAnswer}} |
||||
</span> |
||||
<span v-else> |
||||
<span>{{index+1}}. </span>未填写 |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div v-else |
||||
v-html='scope.row.answer' |
||||
style='white-space: pre-wrap'></div> |
||||
<template v-if="scope.row.runThePictureList"> |
||||
<img v-for="(img, i) in scope.row.runThePictureList" |
||||
:key="i" |
||||
width="200" |
||||
class="result-pic" |
||||
:src="img" |
||||
alt=""> |
||||
</template> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="score" |
||||
label="得分" |
||||
width="80" |
||||
align="center"></el-table-column> |
||||
</el-table> |
||||
</div> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/report5.png" |
||||
alt=""> |
||||
实验总结与体会 |
||||
</h6> |
||||
<quill v-if="editing" |
||||
:border="true" |
||||
v-model="form.summarize" |
||||
:minHeight="150" |
||||
:height="150" /> |
||||
<div v-else |
||||
class="pre-wrap" |
||||
v-html="form.summarize"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
export default { |
||||
data () { |
||||
return { |
||||
reportId: this.$route.query.reportId, |
||||
title: "实验报告", |
||||
form: { |
||||
className: "", |
||||
instructor: "", |
||||
period: "", |
||||
projectName: "", |
||||
summarize: "", |
||||
}, |
||||
infoData: {}, |
||||
expData: [], |
||||
editing: false, |
||||
loadIns: null, |
||||
loading: false, |
||||
project: false, |
||||
userScores: [] |
||||
}; |
||||
}, |
||||
mounted () { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData () { // 查询详情 |
||||
this.$get(`${this.api.reportDetail}?reportId=${this.reportId}`).then(({ report, userScores }) => { |
||||
this.form = report |
||||
this.expData = userScores |
||||
this.project = this.expData.find(e => e.lcRuleRecords) // 银行系统才有lcRuleRecords |
||||
let form = this.form; |
||||
this.infoData = { |
||||
workNumber: form.workNumber, |
||||
experimentalClassName: form.experimentalClassName, |
||||
instructor: form.instructor, |
||||
period: form.period, |
||||
laboratory: form.laboratory, |
||||
submitTime: form.submitTime, |
||||
score: form.score, |
||||
className: form.className, |
||||
userName: form.userName |
||||
} |
||||
const data = report.data |
||||
this.userScores = userScores |
||||
// 如果没有data，则添加，否则，直接使用 |
||||
if (!data) { |
||||
this.handleList(userScores) |
||||
this.$post(this.api.editExperimentalData, { |
||||
reportId, |
||||
data: JSON.stringify(userScores) |
||||
}).then(res => { }).catch(err => { }) |
||||
} else { |
||||
this.handleList(userScores.find(e => e.lcRuleRecords) ? userScores : JSON.parse(data)) |
||||
} |
||||
}).catch(res => { }) |
||||
}, |
||||
// 处理实验数据 |
||||
handleList (list) { |
||||
this.project = list.find(e => e.lcRuleRecords) // 银行系统才有lcRuleRecords |
||||
if (this.project) { |
||||
list.map(e => { |
||||
e.assessmentPoint = '' |
||||
e.referenceAnswer = '' |
||||
e.answer = '' |
||||
e.lcRuleRecords.map((n, i) => { |
||||
e.assessmentPoint += `${i + 1}.${n.name}` |
||||
e.referenceAnswer += `${i + 1}.${n.ruleAnswer}` |
||||
e.answer += `${i + 1}.${n.userAnswer}` |
||||
}) |
||||
}) |
||||
} else { // python系统显示图片（从userScores里取） |
||||
list.forEach(e => { |
||||
const item = this.userScores.find(n => n.judgmentId == e.judgmentId) |
||||
if (item && item.runThePictureList) e.runThePictureList = item.runThePictureList |
||||
}) |
||||
} |
||||
this.expData = list |
||||
}, |
||||
exportPage () { |
||||
const form = Object.assign(this.form, this.infoData) |
||||
const list = JSON.parse(JSON.stringify(this.expData)) |
||||
list.map((e, i) => { |
||||
const item = this.userScores.find(n => n.judgmentId == e.judgmentId) |
||||
if (item && item.runThePicture) e.runThePicture = item.runThePicture |
||||
if (item && item.runThePictureList) e.runThePictureList = item.runThePictureList |
||||
e.id = i + 1 |
||||
// if (e.referenceAnswer && typeof e.referenceAnswer === 'string') e.referenceAnswer = e.referenceAnswer.replace(/<[^>]+>/g, '').replace(/( |&|%s)/g, '').replace(/>/g, '>').replace(/</g, '<') |
||||
if (e.answer && typeof e.answer === 'string') e.answer = e.answer.replace(/<[^>]+>/g, '').replace(/( |&|%s)/g, '').replace(/>/g, '>').replace(/</g, '<') |
||||
}) |
||||
for (const i in form) { |
||||
if (form[i] && typeof form[i] === 'string') form[i] = form[i].replace(/<[^>]+>/g, '') |
||||
} |
||||
form.purpose = form.purpose.replace(/<[^>]+>/g, '') |
||||
this.$post(this.project ? this.api.exportBankExperimentReport : this.api.exportLabReport, { |
||||
...form, |
||||
experimentalData: list |
||||
}).then(res => { |
||||
console.log(res) |
||||
util.downloadFileDirect(`实验报告.docx`, new Blob([res])) |
||||
}).catch(res => { }) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.wrap { |
||||
padding: 12px 300px 20px; |
||||
} |
||||
.text-right { |
||||
text-align: right; |
||||
} |
||||
code, |
||||
kbd, |
||||
samp { |
||||
font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif; |
||||
word-wrap: break-word; |
||||
white-space: pre-wrap; |
||||
} |
||||
/deep/ pre { |
||||
white-space: pre-wrap; /* css-3 */ |
||||
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ |
||||
white-space: pre-wrap; /* Opera 4-6 */ |
||||
white-space: -o-pre-wrap; /* Opera 7 */ |
||||
word-wrap: break-word; /* Internet Explorer 5.5+ */ |
||||
word-break: break-all; |
||||
overflow: hidden; |
||||
font-size: 12px; |
||||
font-weight: 400; |
||||
font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif; |
||||
} |
||||
.content { |
||||
padding: 16px 40px; |
||||
background: #fff; |
||||
&.loading { |
||||
padding-top: 30px; |
||||
} |
||||
.r-title { |
||||
margin-bottom: 40px; |
||||
font-size: 24px; |
||||
text-align: center; |
||||
color: #333; |
||||
} |
||||
.info { |
||||
padding: 20px 16px; |
||||
border: 1px solid #e1e6f2; |
||||
} |
||||
.l-title { |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 5px 8px; |
||||
margin-bottom: 12px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
background-color: #f7f5ff; |
||||
} |
||||
.info-list { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
padding: 10px 0 0 20px; |
||||
li { |
||||
display: inline-flex; |
||||
width: 23%; |
||||
padding: 0 10px; |
||||
margin-bottom: 34px; |
||||
} |
||||
&.edit { |
||||
li { |
||||
align-items: center; |
||||
} |
||||
} |
||||
label { |
||||
font-size: 14px; |
||||
color: #333; |
||||
white-space: nowrap; |
||||
} |
||||
span { |
||||
min-width: 150px; |
||||
padding: 0 10px 3px; |
||||
border-bottom: 1px solid #e1e6f2; |
||||
} |
||||
/deep/.el-input { |
||||
width: 174px; |
||||
} |
||||
} |
||||
.score-wrap { |
||||
position: relative; |
||||
min-width: 150px; |
||||
border-bottom: 1px solid #e1e6f2; |
||||
em { |
||||
position: absolute; |
||||
top: -12px; |
||||
left: 30px; |
||||
font-family: din; |
||||
font-size: 30px; |
||||
font-weight: 600; |
||||
color: #0b1d30; |
||||
} |
||||
img { |
||||
position: absolute; |
||||
bottom: -15px; |
||||
left: 0; |
||||
} |
||||
} |
||||
/deep/.el-textarea .el-textarea__inner, |
||||
.pre-wrap { |
||||
min-height: 72px; |
||||
padding: 10px 16px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
&.edit { |
||||
color: #abb3c6; |
||||
border: 1px solid #cacfdb; |
||||
border-radius: 4px; |
||||
background-color: #f6f7f9; |
||||
} |
||||
} |
||||
/deep/ .table th { |
||||
background-color: #e5dfff !important; |
||||
.cell { |
||||
line-height: 35px; |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
.result-pic { |
||||
margin: 10px 0; |
||||
} |
||||
@media (max-width: 1650px) { |
||||
.wrap { |
||||
padding: 12px 200px 20px; |
||||
} |
||||
} |
||||
@media (max-width: 1430px) { |
||||
.wrap { |
||||
padding: 12px 100px 20px; |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,675 @@ |
||||
<template> |
||||
<div> |
||||
<el-card shadow="hover" class="m-b-20 head-card"> |
||||
<div class="flex-between m-b-20"> |
||||
<el-page-header @back="back" content="成绩管理"></el-page-header> |
||||
</div> |
||||
|
||||
</el-card> |
||||
|
||||
<div v-loading="loading"> |
||||
<el-card v-if="method != 2" shadow="hover" class="m-b-20"> |
||||
<div class="stat"> |
||||
<div class="nums"> |
||||
<div class="item"> |
||||
<p class="name">已参加/应参加人数</p> |
||||
<p class="val">{{ isNaN(statData.totalNumber) ? '' : statData.attendance + '/' + statData.totalNumber }} |
||||
</p> |
||||
</div> |
||||
<div class="item"> |
||||
<p class="name">实验平均分</p> |
||||
<p class="val">{{ avgScore }}</p> |
||||
</div> |
||||
</div> |
||||
<div class="chart" id="chart"></div> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<div v-if="showFile" class="tabs m-b-20"> |
||||
<a class="item" v-for="(item, i) in tabs" :key="i" :class="{ active: i === active }" @click="tabChange(i)">{{ |
||||
item }}</a> |
||||
</div> |
||||
|
||||
|
||||
<div class="tool flex-between"> |
||||
<ul class="filter"> |
||||
<li> |
||||
<label>省份</label> |
||||
<el-select v-model="filter.provinceId" filterable clearable placeholder="请选择省份" @change="provinceChange" |
||||
@clear="clearProvince"> |
||||
<el-option v-for="(item, i) in provinces" :key="i" :label="item.provinceName" |
||||
:value="item.provinceId"></el-option> |
||||
</el-select> |
||||
</li> |
||||
<li> |
||||
<label>城市</label> |
||||
<el-select v-model="filter.cityId" filterable clearable placeholder="请选择城市" :disabled="!filter.provinceId" |
||||
@change="initData"> |
||||
<el-option v-for="(item, i) in cities" :key="i" :label="item.cityName" :value="item.cityId"></el-option> |
||||
</el-select> |
||||
</li> |
||||
<li> |
||||
<label>学校</label> |
||||
<el-select v-model="filter.realSchoolId" clearable filterable placeholder="请选择学校" @change="initData"> |
||||
<el-option v-for="(item, i) in schools" :key="i" :label="item.schoolName" |
||||
:value="item.schoolId"></el-option> |
||||
</el-select> |
||||
</li> |
||||
<li> |
||||
<el-input size="small" placeholder="请输入学生姓名" prefix-icon="el-icon-search" v-model="keyword" clearable |
||||
style="width: 300px"></el-input> |
||||
</li> |
||||
</ul> |
||||
<div v-if="!active"> |
||||
<el-button v-if="method == 2" type="primary" @click="batchImport">上传成绩</el-button> |
||||
<el-button type="primary" :disabled="!!multipleSelection.find(e => method != 2 && !e.reportId)" |
||||
@click="delAllData">批量删除</el-button> |
||||
<el-button type="primary" :loading="exporting" @click="exportData">{{ exporting ? '正在导出' : '批量导出' |
||||
}}</el-button> |
||||
</div> |
||||
<div v-else> |
||||
<el-button type="primary" :loading="exporting1" @click="exportData1">{{ exporting1 ? '正在导出' : '批量导出' |
||||
}}</el-button> |
||||
</div> |
||||
</div> |
||||
<template v-if="!active"> |
||||
<el-table :data="list" class="table" :key="1" ref="table" stripe header-align="center" |
||||
@selection-change="handleSelectionChange" row-key="id"> |
||||
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="60" label="序号" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.$index + (page - 1) * pageSize + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="provinceName" label="省份" min-width="100" align="center"></el-table-column> |
||||
<el-table-column prop="cityName" label="城市" min-width="100" align="center"></el-table-column> |
||||
<el-table-column prop="schoolName" label="学生账号归属" min-width="100" align="center"></el-table-column> |
||||
<el-table-column prop="realSchool" label="学生所在院校" min-width="100" align="center"></el-table-column> |
||||
<el-table-column v-if="competitionType" prop="teamName" label="团队名称" min-width="100" |
||||
align="center"></el-table-column> |
||||
<el-table-column prop="userName" label="学生姓名" min-width="100" align="center"></el-table-column> |
||||
<el-table-column prop="workNumber" label="学号" min-width="100" align="center"></el-table-column> |
||||
<el-table-column prop="score" label="分数" width="90" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.submitTime ? scope.row.score : '--' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="timeSum" label="耗时" width="90" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.timeSum ? scope.row.timeSum + 'min' : '--' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="submitTime" label="提交时间" min-width="150" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.submitTime || '--' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="状态" width="100" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.reportId || method == 2 ? '已参加' : '未参加' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="160"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-if="method != 2 && scope.row.reportId" type="text" |
||||
@click="show(scope.row)">查看成绩报告</el-button> |
||||
<el-button v-if="scope.row.reportId" type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :total="total" |
||||
@current-change="handleCurrentChange" :current-page="page"> |
||||
</el-pagination> |
||||
</div> |
||||
</template> |
||||
<template v-else> |
||||
<el-table :data="list1" class="table" :key="2" stripe header-align="center" |
||||
@selection-change="handleSelectionChange1" row-key="id"> |
||||
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="60" label="序号" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.$index + (page1 - 1) * pageSize + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="provinceName" label="省份" align="center"></el-table-column> |
||||
<el-table-column prop="cityName" label="城市" align="center"></el-table-column> |
||||
<el-table-column prop="schoolName" label="学生账号归属" align="center"></el-table-column> |
||||
<el-table-column prop="realSchool" label="学生所在院校" align="center"></el-table-column> |
||||
<el-table-column v-if="competitionType" prop="teamName" label="团队名称" align="center"></el-table-column> |
||||
<el-table-column prop="userName" label="学生姓名" align="center"></el-table-column> |
||||
<el-table-column prop="workNumber" label="学号" align="center"></el-table-column> |
||||
<el-table-column prop="fileName" label="文件名" align="center"></el-table-column> |
||||
<el-table-column prop="fileSize" label="文件大小" align="center"></el-table-column> |
||||
<el-table-column prop="fileType" label="文件类型" align="center"></el-table-column> |
||||
<el-table-column prop="fileFormat" label="文件格式" align="center"></el-table-column> |
||||
<el-table-column prop="createTime" label="提交时间" width="150" align="center"> |
||||
</el-table-column> |
||||
<el-table-column label="操作" width="200"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-if="!isCompress(scope.row.fileFormat)" type="text" |
||||
@click="preview(scope.row)">预览文件</el-button> |
||||
<el-button type="primary" size="mini" :loading="scope.row.loading" |
||||
@click="exportFile(scope.row)">导出文件</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :total="total1" |
||||
@current-change="handleCurrentChange1" :current-page="page1"> |
||||
</el-pagination> |
||||
</div> |
||||
</template> |
||||
</el-card> |
||||
</div> |
||||
<el-dialog title="批量导入" :visible.sync="importVisible" width="24%" :close-on-click-modal="false" |
||||
@close="cancelUpload"> |
||||
<div style="text-align: center"> |
||||
<template v-if="!uploadFaild"> |
||||
<div style="margin-bottom: 10px;"> |
||||
<el-button type="primary" @click="download">模板下载<i class="el-icon-download el-icon--right"></i></el-button> |
||||
</div> |
||||
<el-upload ref="upload" name="file" accept=".xls,.xlsx" class="import-file" :before-upload="beforeUpload" |
||||
:on-remove="handleRemove" :on-error="uploadError" :on-success="uploadSuccess" :before-remove="beforeRemove" |
||||
:limit="1" :on-exceed="handleExceed" :action="this.api.batchImportGrades" :file-list="uploadList" |
||||
:headers="headers" :disabled="uploading" :data="{ |
||||
competitionId: this.id, |
||||
stageId: this.stageId, |
||||
systemId: 0 |
||||
}"> |
||||
<el-button type="primary" :loading="uploading" class="ml20">上传文件<i |
||||
class="el-icon-upload2 el-icon--right"></i></el-button> |
||||
</el-upload> |
||||
</template> |
||||
<template v-else> |
||||
<p style="margin: -10px 0 13px;font-size: 14px;color: #e90000;">{{ faildData.tip }}</p> |
||||
<p type="primary" |
||||
style="margin-bottom: 10px;font-size: 14px;color: #9076FF;text-decoration: underline;cursor: pointer;" |
||||
@click="showFaild">部分数据导入失败，查看失败原因</p> |
||||
</template> |
||||
</div> |
||||
<span v-if="uploading" slot="footer" class="dialog-footer"> |
||||
<el-button @click="cancelUpload">停止导入</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import * as echarts from "echarts"; |
||||
import axios from 'axios'; |
||||
import Zip from '@/libs/zip' |
||||
export default { |
||||
data () { |
||||
return { |
||||
id: +this.$route.query.id, |
||||
stageId: +this.$route.query.stageId, |
||||
method: +this.$route.query.method, |
||||
competitionType: +this.$route.query.competitionType, |
||||
showFile: this.$route.query.showFile === 'true', |
||||
isCompress: util.isCompress, |
||||
filter: { |
||||
provinceId: '', |
||||
cityId: '', |
||||
realSchoolId: '', |
||||
reviewStatus: '', |
||||
scoreSortOrder: '', |
||||
submitTimeSortOrder: '', |
||||
}, |
||||
provinces: [], |
||||
cities: [], |
||||
schools: [], |
||||
keyword: this.$route.query.keyword || '', |
||||
searchTimer: null, |
||||
list: [], |
||||
multipleSelection: [], |
||||
page: +this.$route.query.page || 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
|
||||
list1: [], |
||||
multipleSelection1: [], |
||||
page1: 1, |
||||
total1: 0, |
||||
|
||||
avgScore: 0, // 平均分 |
||||
importVisible: false, |
||||
uploadList: [], |
||||
uploadFaild: false, |
||||
uploading: false, |
||||
faildData: null, |
||||
headers: { |
||||
token: sessionStorage.getItem("token") |
||||
}, |
||||
statData: {}, |
||||
tabs: ['成绩列表', '文件列表'], |
||||
active: 0, |
||||
loading: false, |
||||
exporting: false, |
||||
exporting1: false, |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function (val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.$router.push({ |
||||
path: '/otherArchList', |
||||
query: { |
||||
...this.$route.query, |
||||
keyword: val |
||||
} |
||||
}) |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.getData() |
||||
this.getProvince() |
||||
this.getSchool() |
||||
}, |
||||
methods: { |
||||
async getData () { |
||||
this.loading = true |
||||
// 文件列表 |
||||
if (this.active) { |
||||
const { data } = await this.$post(this.api.cCompetitionStageFileList, { |
||||
pageNum: this.page1, |
||||
pageSize: this.pageSize, |
||||
competitionId: this.id, |
||||
stageId: this.stageId, |
||||
keyWord: this.keyword, |
||||
...this.filter |
||||
}) |
||||
data.records.forEach(e => { |
||||
e.loading = false |
||||
e.fileType = '其他' |
||||
if (util.isVideo(e.fileFormat)) { |
||||
e.fileType = '视频' |
||||
} else if (util.isAudio(e.fileFormat)) { |
||||
e.fileType = '音频' |
||||
} else if (util.isImg(e.fileFormat)) { |
||||
e.fileType = '图片' |
||||
} else if (util.isDoc(e.fileFormat)) { |
||||
e.fileType = '文档' |
||||
} else if (util.isCompress(e.fileFormat)) { |
||||
e.fileType = '压缩包' |
||||
} else if (e.fileType === 'pdf') { |
||||
e.fileType = 'pdf' |
||||
} |
||||
}) |
||||
this.list1 = data.records |
||||
this.total1 = data.total |
||||
this.loading = false |
||||
} else { // 成绩列表 |
||||
const { data, page } = await this.$post(this.api.stageGradeManagementList, { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
competitionId: this.id, |
||||
keyWord: this.keyword, |
||||
stageId: this.stageId, |
||||
isNakadai: 1, |
||||
...this.filter |
||||
}) |
||||
this.loading = false |
||||
this.total = page.total |
||||
this.list = page.records |
||||
this.statData = data |
||||
this.avgScore = (+data.avgScore).toFixed(2) |
||||
this.method != 2 && this.getChart() |
||||
} |
||||
}, |
||||
initData () { |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
|
||||
// 获取省份 |
||||
async getProvince () { |
||||
const { list } = await this.$get(this.api.queryProvince) |
||||
this.provinces = list |
||||
}, |
||||
// 清除省份 |
||||
clearProvince () { |
||||
this.filter.cityId = '' |
||||
}, |
||||
// 省份选择回调 |
||||
provinceChange () { |
||||
this.clearProvince() |
||||
this.getCity() |
||||
this.initData() |
||||
}, |
||||
// 获取城市 |
||||
async getCity () { |
||||
const id = this.filter.provinceId |
||||
if (id) { |
||||
const { list } = await this.$get(this.api.queryCity, { |
||||
provinceId: id |
||||
}) |
||||
this.cities = list |
||||
} |
||||
}, |
||||
// 获取学校 |
||||
async getSchool () { |
||||
const { list } = await this.$get(this.api.querySchoolData) |
||||
this.schools = list |
||||
}, |
||||
|
||||
// 查看成绩报告 |
||||
show (row) { |
||||
this.$router.push(`/trialReport?reportId=${row.reportId}`) |
||||
}, |
||||
// 导出(有勾选：就导勾选中的；没有勾选：就导全部) |
||||
async exportData () { |
||||
if (this.list.length) { |
||||
this.exporting = true |
||||
// 有选择数据，则导出已选择的，否则导出全部 |
||||
if (this.multipleSelection.length) { |
||||
const res = await axios.post(this.api.exportExperimentalResultsInBatch, this.multipleSelection, { |
||||
headers: this.headers, |
||||
responseType: 'blob' |
||||
}) |
||||
util.downloadFileDirect(`赛事成绩.xls`, new Blob([res.data])) |
||||
this.exporting = false |
||||
} else if (this.list.length) { |
||||
const res = await axios.post(this.api.allExperimentalResultsAreDerived, { |
||||
pageNum: 1, |
||||
pageSize: 10000, |
||||
competitionId: this.id, |
||||
isNakadai: 1, |
||||
stageId: this.stageId, |
||||
}, { |
||||
headers: this.headers, |
||||
responseType: 'blob' |
||||
}) |
||||
util.downloadFileDirect(`赛事成绩.xls`, new Blob([res.data])) |
||||
this.exporting = false |
||||
} |
||||
} |
||||
}, |
||||
// 导出(有勾选：就导勾选中的；没有勾选：就导全部) |
||||
exportData1 () { |
||||
this.exporting1 = true |
||||
let list = this.list1 |
||||
if (this.multipleSelection1.length) { |
||||
list = this.multipleSelection1 |
||||
} |
||||
Zip('批量导出', list, () => { |
||||
this.exporting1 = false |
||||
}) |
||||
}, |
||||
handleDelete (row) { // 删除 |
||||
this.$confirm("确定要删除吗？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(this.api.batchDeleteContestGrade, { |
||||
ids: [this.method == 2 ? row.scoreId : row.reportId], |
||||
competitionId: this.id, |
||||
stageId: this.stageId |
||||
}).then(res => { |
||||
util.successMsg("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
}).catch(() => { }); |
||||
}, |
||||
delAllData () { // 批量删除 |
||||
const list = this.multipleSelection |
||||
this.$confirm(list.length ? '该项目下的所有成绩报告将会删除，是否继续？' : '是否确定删除列表所有成绩数据？', "提示", { |
||||
type: "warning" |
||||
}).then(async () => { |
||||
let ids = [] |
||||
if (list.length) { |
||||
ids = list.map(item => { |
||||
return this.method == 2 ? item.scoreId : item.reportId |
||||
}); |
||||
ids = ids.filter(e => e) |
||||
} |
||||
const data = { |
||||
competitionId: this.id, |
||||
stageId: this.stageId |
||||
} |
||||
if (list.length) data.ids = ids |
||||
await this.$post(this.api.batchDeleteContestGrade, data) |
||||
this.multipleSelection = []; |
||||
this.$refs.table.clearSelection(); |
||||
util.successMsg("删除成功"); |
||||
this.getData(); |
||||
}).catch(() => { }); |
||||
}, |
||||
handleSelectionChange (val) { // 多选 |
||||
this.multipleSelection = val; |
||||
}, |
||||
handleCurrentChange (val) { // 切换分页 |
||||
this.$router.push({ |
||||
path: '/otherArchList', |
||||
query: { |
||||
...this.$route.query, |
||||
page: val |
||||
} |
||||
}) |
||||
this.page = val; |
||||
this.getData(); |
||||
}, |
||||
|
||||
handleSelectionChange1 (val) { // 多选 |
||||
this.multipleSelection1 = val; |
||||
}, |
||||
handleCurrentChange1 (val) { // 切换分页 |
||||
this.page1 = val; |
||||
this.getData(); |
||||
}, |
||||
getChart () { // 初始化折线图 |
||||
const data = [] |
||||
const { statData } = this |
||||
for (let i = 1; i <= 10; i++) { |
||||
data.push(statData['num' + i]) |
||||
} |
||||
let myChart = echarts.init(document.getElementById("chart")); |
||||
myChart.setOption({ |
||||
title: { text: "实验分数分布图" }, |
||||
tooltip: {}, |
||||
xAxis: { |
||||
name: "分数", |
||||
type: "category", |
||||
boundaryGap: false, |
||||
interval: 10, |
||||
data: ["0-10", "10-20", "20-30", "30-40", "40-50", "50-60", "60-70", "70-80", "80-90", "90-100"] |
||||
}, |
||||
yAxis: { |
||||
name: "人数", |
||||
type: "value", |
||||
minInterval: 10 |
||||
}, |
||||
series: [{ |
||||
data, |
||||
type: "line", |
||||
areaStyle: {}, |
||||
label: { |
||||
show: true, |
||||
position: 'top' |
||||
}, |
||||
color: ["#8191fd"] |
||||
}] |
||||
}); |
||||
}, |
||||
// 批量导入 |
||||
batchImport () { |
||||
this.importVisible = true |
||||
this.uploadList = [] |
||||
this.uploadFaild = false |
||||
}, |
||||
// 模板下载 |
||||
download () { |
||||
axios.get(`${this.api.gradeDownloadExcel}?competitionId=${this.id}&stageId=${this.stageId}`, { |
||||
headers: this.headers, |
||||
responseType: 'blob' |
||||
}).then((res) => { |
||||
util.downloadFileDirect('赛事成绩导入模板.xlsx', new Blob([res.data])) |
||||
}).catch(res => { }) |
||||
}, |
||||
// 上传文件 |
||||
handleExceed (files, fileList) { |
||||
util.warningMsg( |
||||
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
||||
) |
||||
}, |
||||
// 下载失败文件 |
||||
showFaild () { |
||||
axios.get(`${this.api.performanceExportFailure}?exportCode=${this.faildData.exportCode}&competitionType=${this.faildData.competitionType}`, { |
||||
headers: this.headers, |
||||
responseType: 'blob' |
||||
}).then((res) => { |
||||
util.downloadFileDirect(`批量导入成绩管理失败数据导出.xls`, new Blob([res.data])) |
||||
}).catch(res => { }) |
||||
}, |
||||
uploadSuccess (res) { |
||||
this.uploading = false |
||||
this.uploadFaild = false |
||||
if (res.status === 200) { |
||||
this.initData() |
||||
const { data } = res |
||||
if (data.exportCode) { |
||||
this.faildData = data |
||||
this.uploadFaild = true |
||||
} else { |
||||
util.successMsg(data.tip, 3000) |
||||
this.importVisible = false |
||||
} |
||||
} else { |
||||
util.errorMsg(res.message || '上传失败，请检查数据') |
||||
} |
||||
}, |
||||
uploadError (err, file, fileList) { |
||||
this.uploading = false |
||||
this.$message({ |
||||
message: "上传出错，请重试！", |
||||
type: "error", |
||||
center: true |
||||
}) |
||||
}, |
||||
beforeUpload (file) { |
||||
this.uploading = true |
||||
}, |
||||
beforeRemove (file, fileList) { |
||||
return this.$confirm(`确定移除 ${file.name}？`) |
||||
}, |
||||
handleRemove (file, fileList) { |
||||
this.uploadList = fileList |
||||
this.uploadFaild = false |
||||
}, |
||||
cancelUpload () { |
||||
this.uploading = false |
||||
if (this.$refs.upload) this.$refs.upload.abort() |
||||
this.keyword = '' |
||||
this.initData() |
||||
this.importVisible = false |
||||
}, |
||||
// tab回调 |
||||
tabChange (i) { |
||||
this.active = i |
||||
this.getData() |
||||
}, |
||||
// 预览附件 |
||||
preview (item) { |
||||
window.open((util.isDoc(item.fileFormat) ? 'https://view.officeapps.live.com/op/view.aspx?src=' : '') + item.filePath) |
||||
}, |
||||
// 导出文件 |
||||
exportFile (item) { |
||||
item.loading = true |
||||
const url = item.filePath |
||||
var x = new XMLHttpRequest() |
||||
x.open("GET", url, true) |
||||
x.responseType = "blob" |
||||
x.onload = function (e) { |
||||
var url = window.URL.createObjectURL(x.response) |
||||
var a = document.createElement("a") |
||||
a.href = url |
||||
a.download = item.userName + '-' + item.fileName |
||||
a.click() |
||||
item.loading = false |
||||
} |
||||
x.send() |
||||
}, |
||||
back () { |
||||
this.$router.push(this.$store.state.innerReferrer) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/deep/ .head-card { |
||||
.el-card__body { |
||||
padding-bottom: 0px; |
||||
|
||||
.el-tabs__header { |
||||
margin-bottom: 1px; |
||||
|
||||
.el-tabs__nav-wrap::after { |
||||
display: none; |
||||
} |
||||
|
||||
.el-tabs__item { |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.stat { |
||||
display: flex; |
||||
|
||||
.nums { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-right: 20px; |
||||
|
||||
.item:nth-child(1) { |
||||
background-image: url('../../../assets/img/total.png'); |
||||
} |
||||
|
||||
.item:nth-child(2) { |
||||
background-image: url('../../../assets/img/avg.png'); |
||||
} |
||||
|
||||
.item { |
||||
width: 300px; |
||||
min-height: 145px; |
||||
padding: 30px 30px; |
||||
margin: 0 10px; |
||||
box-sizing: border-box; |
||||
border-radius: 8px; |
||||
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
||||
|
||||
p { |
||||
font-size: 18px; |
||||
color: #ffffff; |
||||
} |
||||
|
||||
.val { |
||||
margin-top: 10px; |
||||
color: #ffffff; |
||||
font-size: 36px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.chart { |
||||
flex: 1; |
||||
height: 300px; |
||||
} |
||||
} |
||||
|
||||
/deep/.import-file { |
||||
.el-progress__text, |
||||
.el-progress, |
||||
.el-upload-list__item-status-label { |
||||
display: none !important; |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,413 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<el-page-header @back="$router.back()" content="查看报告"></el-page-header> |
||||
</el-card> |
||||
|
||||
<div class="content" v-loading="loading"> |
||||
<div class="text-right"> |
||||
<el-button type="primary" @click="exportPage">导出报告</el-button> |
||||
</div> |
||||
<h6 class="r-title">标准实验报告</h6> |
||||
<div class="info"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/info1.png" alt=""> |
||||
基本信息 |
||||
</h6> |
||||
<ul :class="['info-list', { edit: editing }]"> |
||||
<li> |
||||
<label>学生姓名：</label> |
||||
<el-input v-if="editing" v-model="infoData.userName" disabled></el-input> |
||||
<span v-else>{{ infoData.userName }}</span> |
||||
</li> |
||||
<li> |
||||
<label>学生学号：</label> |
||||
<el-input v-if="editing" v-model="infoData.workNumber" disabled></el-input> |
||||
<span v-else>{{ infoData.workNumber }}</span> |
||||
</li> |
||||
<li> |
||||
<label>实验时间：</label> |
||||
<el-input v-if="editing" v-model="infoData.submitTime" disabled></el-input> |
||||
<span v-else>{{ infoData.submitTime }}</span> |
||||
</li> |
||||
<li> |
||||
<label>实验成绩：</label> |
||||
<el-input v-if="editing" v-model="infoData.score" disabled></el-input> |
||||
<div v-else class="score-wrap"> |
||||
<em>{{ infoData.score }}</em> |
||||
<img src="@/assets/img/point.png" alt=""> |
||||
</div> |
||||
</li> |
||||
<li> |
||||
<label>学生班级：</label> |
||||
<el-input v-if="editing" v-model="infoData.className"></el-input> |
||||
<span v-else>{{ infoData.className }}</span> |
||||
</li> |
||||
<li> |
||||
<label>指导老师：</label> |
||||
<el-input v-if="editing" v-model="infoData.instructor"></el-input> |
||||
<span v-else>{{ infoData.instructor }}</span> |
||||
</li> |
||||
<li> |
||||
<label>实验学时：</label> |
||||
<el-input v-if="editing" v-model="infoData.period"></el-input> |
||||
<span v-else>{{ infoData.period }}</span> |
||||
</li> |
||||
</ul> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/report2.png" alt=""> |
||||
实验项目名称 |
||||
</h6> |
||||
<el-input v-if="editing" v-model="form.projectName" type="textarea"></el-input> |
||||
<div v-else class="pre-wrap" v-html="form.projectName"></div> |
||||
</div> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/report3.png" alt=""> |
||||
实验目的 |
||||
</h6> |
||||
<div :class="['pre-wrap', { edit: editing }]" v-html="form.purpose"></div> |
||||
</div> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/report4.png" alt=""> |
||||
实验数据 |
||||
</h6> |
||||
<el-table :data="expData" class="table" border stripe header-align="center"> |
||||
<el-table-column type="index" label="序号" align="center" width="60"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.$index + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="judgmentName" label="判分点" width="270" align="center"></el-table-column> |
||||
<el-table-column v-if='project' prop="judgmentName" label="考核点" align="center" width="150"> |
||||
<template slot-scope="scope"> |
||||
<div v-for="(item, index) in scope.row.lcRuleRecords" :key="index"> |
||||
<span> |
||||
<span>{{ index + 1 }}. </span>{{ item.name }} |
||||
</span> |
||||
</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="ruleAnswer" label="参考答案" style='word-wrap: break-word'> |
||||
<template slot-scope="scope"> |
||||
<div v-if='scope.row.lcRuleRecords'> |
||||
<div v-for="(item, index) in scope.row.lcRuleRecords" :key="index"> |
||||
<span> |
||||
<span>{{ index + 1 }}. </span>{{ item.ruleAnswer }} |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div v-else v-html="scope.row.referenceAnswer"></div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="userAnswer" label="学生答案"> |
||||
<template slot-scope="scope"> |
||||
<div v-if='scope.row.lcRuleRecords'> |
||||
<div v-for="(item, index) in scope.row.lcRuleRecords" :key="index"> |
||||
<span v-if='item.userAnswer'> |
||||
<span>{{ index + 1 }}. </span>{{ item.userAnswer }} |
||||
</span> |
||||
<span v-else> |
||||
<span>{{ index + 1 }}. </span>未填写 |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div v-else class="pre-code">{{ scope.row.answer }}</div> |
||||
<template v-if="scope.row.runThePictureList"> |
||||
<img v-for="(img, i) in scope.row.runThePictureList" :key="i" width="200" class="result-pic" |
||||
:src="img" alt=""> |
||||
</template> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="quesScore" label="分值" :key="6" width="80" align="center"></el-table-column> |
||||
<el-table-column prop="score" label="得分" width="80" align="center"></el-table-column> |
||||
</el-table> |
||||
</div> |
||||
<div class="m-b-20"> |
||||
<h6 class="l-title"> |
||||
<img src="@/assets/img/report5.png" alt=""> |
||||
实验总结与体会 |
||||
</h6> |
||||
<quill v-if="editing" :border="true" v-model="form.summarize" :minHeight="150" :height="150" /> |
||||
<div v-else class="pre-wrap" v-html="form.summarize"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
export default { |
||||
data () { |
||||
return { |
||||
reportId: this.$route.query.reportId, |
||||
title: "实验报告", |
||||
form: { |
||||
className: "", |
||||
instructor: "", |
||||
period: "", |
||||
projectName: "", |
||||
summarize: "", |
||||
}, |
||||
infoData: {}, |
||||
expData: [], |
||||
editing: false, |
||||
loadIns: null, |
||||
loading: false, |
||||
project: false, |
||||
userScores: [] |
||||
}; |
||||
}, |
||||
mounted () { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData () { // 查询详情 |
||||
this.loading = true |
||||
this.$get(`${this.api.reportDetail}?reportId=${this.reportId}`).then(({ report, userScores }) => { |
||||
this.form = report |
||||
this.project = this.expData.find(e => e.lcRuleRecords) // 银行系统才有lcRuleRecords |
||||
let form = this.form; |
||||
this.infoData = { |
||||
workNumber: form.workNumber, |
||||
experimentalClassName: form.experimentalClassName, |
||||
instructor: form.instructor, |
||||
period: form.period, |
||||
laboratory: form.laboratory, |
||||
submitTime: form.submitTime, |
||||
score: form.score, |
||||
className: form.className, |
||||
userName: form.userName |
||||
} |
||||
const { data } = report |
||||
// 如果没有data，则添加，否则，直接使用 |
||||
if (!data) { |
||||
this.userScores = userScores |
||||
this.handleList(userScores) |
||||
this.$post(this.api.editExperimentalData, { |
||||
reportId, |
||||
data: JSON.stringify(userScores) |
||||
}).then(res => { }).catch(err => { }) |
||||
} else { |
||||
this.handleList(JSON.parse(data)) |
||||
} |
||||
}).catch(res => { |
||||
this.loading = false |
||||
}) |
||||
}, |
||||
// 处理实验数据 |
||||
handleList (list) { |
||||
this.project = list.find(e => e.lcRuleRecords) // 银行系统才有lcRuleRecords |
||||
if (this.project) { |
||||
list.map(e => { |
||||
e.assessmentPoint = '' |
||||
e.referenceAnswer = '' |
||||
e.answer = '' |
||||
e.lcRuleRecords && e.lcRuleRecords.map((n, i) => { |
||||
e.assessmentPoint += `${i + 1}.${n.name}` |
||||
e.referenceAnswer += `${i + 1}.${n.ruleAnswer}` |
||||
e.answer += `${i + 1}.${n.userAnswer}` |
||||
}) |
||||
}) |
||||
} else { // python系统显示图片（从userScores里取） |
||||
list.forEach(e => { |
||||
const item = this.userScores.find(n => n.judgmentId == e.judgmentId) |
||||
if (item && item.runThePictureList) e.runThePictureList = item.runThePictureList |
||||
}) |
||||
} |
||||
this.expData = list |
||||
this.loading = false |
||||
}, |
||||
exportPage () { |
||||
const form = Object.assign(this.form, this.infoData) |
||||
const list = JSON.parse(JSON.stringify(this.expData)) |
||||
list.map((e, i) => { |
||||
const item = this.userScores.find(n => n.judgmentId == e.judgmentId) |
||||
if (item && item.runThePicture) e.runThePicture = item.runThePicture |
||||
if (item && item.runThePictureList) e.runThePictureList = item.runThePictureList |
||||
e.id = i + 1 |
||||
// if (e.referenceAnswer && typeof e.referenceAnswer === 'string') e.referenceAnswer = e.referenceAnswer.replace(/<[^>]+>/g, '').replace(/( |&|%s)/g, '').replace(/>/g, '>').replace(/</g, '<') |
||||
if (e.answer && typeof e.answer === 'string') e.answer = e.answer.replace(/<[^>]+>/g, '').replace(/( |&|%s)/g, '').replace(/>/g, '>').replace(/</g, '<') |
||||
}) |
||||
for (const i in form) { |
||||
if (form[i] && typeof form[i] === 'string') form[i] = form[i].replace(/<[^>]+>/g, '') |
||||
} |
||||
form.purpose = form.purpose.replace(/<[^>]+>/g, '') |
||||
this.$post(this.project ? this.api.exportBankExperimentReport : this.api.exportLabReport, { |
||||
...form, |
||||
experimentalData: list |
||||
}).then(res => { |
||||
console.log(res) |
||||
util.downloadFileDirect(`实验报告.docx`, new Blob([res])) |
||||
}).catch(res => { }) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.wrap { |
||||
padding: 12px 300px 20px; |
||||
} |
||||
|
||||
.pre-code { |
||||
white-space: pre-wrap; |
||||
} |
||||
|
||||
.text-right { |
||||
text-align: right; |
||||
} |
||||
|
||||
code, |
||||
kbd, |
||||
samp { |
||||
font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif; |
||||
word-wrap: break-word; |
||||
white-space: pre-wrap; |
||||
} |
||||
|
||||
/deep/ pre { |
||||
white-space: pre-wrap; |
||||
/* css-3 */ |
||||
white-space: -moz-pre-wrap; |
||||
/* Mozilla, since 1999 */ |
||||
white-space: pre-wrap; |
||||
/* Opera 4-6 */ |
||||
white-space: -o-pre-wrap; |
||||
/* Opera 7 */ |
||||
word-wrap: break-word; |
||||
/* Internet Explorer 5.5+ */ |
||||
word-break: break-all; |
||||
overflow: hidden; |
||||
font-size: 12px; |
||||
font-weight: 400; |
||||
font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif; |
||||
} |
||||
|
||||
.content { |
||||
padding: 16px 40px; |
||||
background: #fff; |
||||
|
||||
.r-title { |
||||
margin-bottom: 40px; |
||||
font-size: 24px; |
||||
text-align: center; |
||||
color: #333; |
||||
} |
||||
|
||||
.info { |
||||
padding: 20px 16px; |
||||
border: 1px solid #e1e6f2; |
||||
} |
||||
|
||||
.l-title { |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 5px 8px; |
||||
margin-bottom: 12px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
background-color: #f7f5ff; |
||||
} |
||||
|
||||
.info-list { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
padding: 10px 0 0 20px; |
||||
|
||||
li { |
||||
display: inline-flex; |
||||
width: 23%; |
||||
padding: 0 10px; |
||||
margin-bottom: 34px; |
||||
} |
||||
|
||||
&.edit { |
||||
li { |
||||
align-items: center; |
||||
} |
||||
} |
||||
|
||||
label { |
||||
font-size: 14px; |
||||
color: #333; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
span { |
||||
min-width: 150px; |
||||
padding: 0 10px 3px; |
||||
border-bottom: 1px solid #e1e6f2; |
||||
} |
||||
|
||||
/deep/.el-input { |
||||
width: 174px; |
||||
} |
||||
} |
||||
|
||||
.score-wrap { |
||||
position: relative; |
||||
min-width: 150px; |
||||
border-bottom: 1px solid #e1e6f2; |
||||
|
||||
em { |
||||
position: absolute; |
||||
top: -12px; |
||||
left: 30px; |
||||
font-family: din; |
||||
font-size: 30px; |
||||
font-weight: 600; |
||||
color: #0b1d30; |
||||
} |
||||
|
||||
img { |
||||
position: absolute; |
||||
bottom: -15px; |
||||
left: 0; |
||||
} |
||||
} |
||||
|
||||
/deep/.el-textarea .el-textarea__inner, |
||||
.pre-wrap { |
||||
min-height: 72px; |
||||
padding: 10px 16px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
|
||||
&.edit { |
||||
color: #abb3c6; |
||||
border: 1px solid #cacfdb; |
||||
border-radius: 4px; |
||||
background-color: #f6f7f9; |
||||
} |
||||
} |
||||
|
||||
/deep/ .table th { |
||||
background-color: #e5dfff !important; |
||||
|
||||
.cell { |
||||
line-height: 35px; |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.result-pic { |
||||
margin: 10px 0; |
||||
} |
||||
|
||||
@media (max-width: 1650px) { |
||||
.wrap { |
||||
padding: 12px 200px 20px; |
||||
} |
||||
} |
||||
|
||||
@media (max-width: 1430px) { |
||||
.wrap { |
||||
padding: 12px 100px 20px; |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,339 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div class="tool"> |
||||
<div class="search-wrap"> |
||||
<el-select v-model="field" |
||||
@change="initData"> |
||||
<el-option v-for="(item, i) in keywords" |
||||
:key="i" |
||||
:label="item.name" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</el-select> |
||||
<el-input class="keyword" |
||||
:placeholder="'请输入' + keywords.find(e => e.id === field).name" |
||||
v-model.trim="keyword" |
||||
clearable></el-input> |
||||
</div> |
||||
<div class="actions"> |
||||
<el-button v-auth="'/parnerOperation:合伙人资讯管理:批量删除'" |
||||
@click="batchDel">批量删除</el-button> |
||||
<el-button v-auth="'/parnerOperation:合伙人资讯管理:新增文章'" |
||||
type="primary" |
||||
@click="add">新增文章</el-button> |
||||
</div> |
||||
</div> |
||||
<el-table :data="list" |
||||
class="table" |
||||
ref="table" |
||||
header-align="center" |
||||
@selection-change="handleSelectionChange" |
||||
row-key="id" |
||||
@sort-change="sortChange"> |
||||
<el-table-column type="selection" |
||||
width="55" |
||||
align="center" |
||||
:reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" |
||||
width="60" |
||||
label="序号" |
||||
align="center"></el-table-column> |
||||
<el-table-column show-overflow-tooltip |
||||
prop="title" |
||||
label="标题" |
||||
align="center" |
||||
min-width="150"></el-table-column> |
||||
<el-table-column prop="classificationName" |
||||
label="所属分类" |
||||
align="center" |
||||
min-width="120" |
||||
sortable="custom"></el-table-column> |
||||
<el-table-column prop="founderName" |
||||
label="录入人" |
||||
align="center" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="editorName" |
||||
label="修改人" |
||||
align="center" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="updateTime" |
||||
label="修改日期" |
||||
align="center" |
||||
min-width="150" |
||||
sortable="custom"></el-table-column> |
||||
<el-table-column prop="releaseTime" |
||||
label="发布日期" |
||||
align="center" |
||||
min-width="100" |
||||
sortable="custom"></el-table-column> |
||||
<el-table-column prop="learnerNumber" |
||||
label="总浏览" |
||||
align="center" |
||||
min-width="70"></el-table-column> |
||||
<el-table-column prop="workNumber" |
||||
label="状态" |
||||
align="center" |
||||
min-width="80"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.isRelease ? '已发布' : '草稿' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="sequence" |
||||
label="置顶" |
||||
align="center" |
||||
min-width="80" |
||||
sortable="custom"> |
||||
<template slot-scope="scope"> |
||||
<i v-if="scope.row.isRelease" |
||||
:class="['squ-icon', scope.row.isTop ? 'el-icon-check' : 'el-icon-close']" |
||||
@click="sticky(scope.row)"></i> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" |
||||
align="center" |
||||
width="210"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'/parnerOperation:合伙人资讯管理:编辑'" |
||||
type="text" |
||||
@click="edit(scope.row)">编辑</el-button> |
||||
<el-button v-auth="'/parnerOperation:合伙人资讯管理:删除'" |
||||
type="text" |
||||
@click="handleDelete(scope.row)">删除</el-button> |
||||
<el-switch v-auth="'/parnerOperation:合伙人资讯管理:禁用'" |
||||
v-if="scope.row.isRelease" |
||||
class="m-l-10" |
||||
v-model="scope.row.isDisable" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
@change="switchOff($event, scope.row, scope.$index)"> |
||||
</el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background |
||||
@current-change="currentChange" |
||||
:current-page="page" |
||||
layout="total, prev, pager, next" |
||||
:total="total"></el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from '@/libs/util' |
||||
export default { |
||||
data () { |
||||
return { |
||||
field: this.$route.query.field || 'title', |
||||
keywords: [ |
||||
{ |
||||
id: 'title', |
||||
name: '标题' |
||||
}, |
||||
{ |
||||
id: 'founder', |
||||
name: '录入人' |
||||
}, |
||||
{ |
||||
id: 'editor', |
||||
name: '修改人' |
||||
} |
||||
], |
||||
keyword: this.$route.query.keyword || '', |
||||
list: [], |
||||
page: +this.$route.query.page || 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
topSort: '', |
||||
classificationNameSort: '', |
||||
releaseDateSort: '', |
||||
editTimeSort: '', |
||||
multipleSelection: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function (val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData() |
||||
}, 500) |
||||
} |
||||
}, |
||||
mounted () { |
||||
const { query } = this.$route |
||||
if (query.page) { |
||||
this.$router.push('/parnerOperation?type=info').catch(() => { }) |
||||
} |
||||
|
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
// 文章列表 |
||||
getData () { |
||||
const { keyword } = this |
||||
this.$post(this.api.partnerOperatingList, { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
querySource: 3, //查询来源(3.中台 4.合伙人平台) |
||||
topSort: this.topSort, |
||||
classificationNameSort: this.classificationNameSort, |
||||
editTimeSort: this.editTimeSort, |
||||
releaseDateSort: this.releaseDateSort, |
||||
typeId: 2, // 类型(1.学习2.资讯) |
||||
title: this.field === 'title' ? keyword : '', |
||||
founderName: this.field === 'founder' ? keyword : '', |
||||
editorName: this.field === 'editor' ? keyword : '' |
||||
}).then(({ page, total }) => { |
||||
page.forEach(e => { |
||||
e.editing = false |
||||
}) |
||||
this.list = page |
||||
this.total = total |
||||
}).catch(err => { }) |
||||
}, |
||||
currentChange (val) { |
||||
this.page = val |
||||
this.getData() |
||||
}, |
||||
handleSelectionChange (val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
initData () { |
||||
this.$refs.table.clearSelection() |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
// 批量删除 |
||||
batchDel () { |
||||
const list = this.multipleSelection |
||||
if (list.length) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
const data = [] |
||||
list.map(e => { |
||||
data.push('ids=' + e.id) |
||||
}) |
||||
this.$post(`${this.api.batchDeletionParnerArticle}?${data.join('&')}`).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
util.successMsg("删除成功") |
||||
this.getData() |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
} else { |
||||
util.errorMsg('请先选择数据 ！') |
||||
} |
||||
}, |
||||
// 删除 |
||||
handleDelete (row) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(`${this.api.batchDeletionParnerArticle}?ids=${row.id}`).then(res => { |
||||
util.successMsg('删除成功') |
||||
this.getData() |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
}, |
||||
// 禁用启用 |
||||
switchOff (val, row) { |
||||
this.$post(`${this.api.articleEnableOrDisable}?id=${row.id}&isDisable=${val}`).then(res => { }).catch((res) => { }) |
||||
}, |
||||
// 排序回调 |
||||
sortChange (column) { |
||||
const { order } = column |
||||
// 三个排序只能同时传1个，所以点了一个排序的时候要清除掉其余两个 |
||||
if (column.prop === 'classificationName') { |
||||
this.classificationNameSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.releaseDateSort = '' |
||||
this.topSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'updateTime') { |
||||
this.editTimeSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.classificationNameSort = '' |
||||
this.releaseDateSort = '' |
||||
this.topSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'releaseTime') { |
||||
this.releaseDateSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.classificationNameSort = '' |
||||
this.topSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'sequence') { |
||||
this.topSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.releaseDateSort = '' |
||||
this.classificationNameSort = '' |
||||
} |
||||
} |
||||
this.getData() |
||||
}, |
||||
// 排序提交 |
||||
submitSequence (row) { |
||||
if (!row.sequence) return Util.errorMsg('请输入排序') |
||||
this.$post(`${this.api.modifiedSort}?articleId=${row.id}&sequenceNumber=${row.sequence}`).then(res => { |
||||
this.initData() |
||||
}).catch(res => { }) |
||||
}, |
||||
// 编辑排序 |
||||
editSequence (row) { |
||||
this.list.forEach(e => { |
||||
e.editing = false |
||||
}) |
||||
row.editing = true |
||||
}, |
||||
// 置顶 |
||||
sticky (row) { |
||||
this.$post(`${this.api.articleTopOperation}?articleId=${row.id}&isTop=${row.isTop ? 0 : 1}`).then(res => { |
||||
this.initData() |
||||
}).catch(res => { }) |
||||
}, |
||||
// 缓存当前页面和参数，详情页返回到列表的时候直接取该url |
||||
setReferrer () { |
||||
this.$store.commit('setReferrer', `${this.$route.fullPath}&keyword=${this.keyword}&field=${this.field}&page=${this.page}`) |
||||
}, |
||||
// 新增 |
||||
add () { |
||||
this.setReferrer() |
||||
this.$router.push(`/learnMg?type=2`) |
||||
}, |
||||
// 编辑 |
||||
edit (row) { |
||||
this.setReferrer() |
||||
this.$router.push(`/learnMg?id=${row.id}&type=2`) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.m-l-10 { |
||||
margin-left: 10px; |
||||
} |
||||
.squ-icon { |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
cursor: pointer; |
||||
color: #f70000; |
||||
&.el-icon-check { |
||||
color: #05991e; |
||||
} |
||||
} |
||||
/deep/.squ-input { |
||||
width: auto; |
||||
.el-input__inner { |
||||
width: 60px; |
||||
padding: 0 10px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,339 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div class="tool"> |
||||
<div class="search-wrap"> |
||||
<el-select v-model="field" |
||||
@change="initData"> |
||||
<el-option v-for="(item, i) in keywords" |
||||
:key="i" |
||||
:label="item.name" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</el-select> |
||||
<el-input class="keyword" |
||||
:placeholder="'请输入' + keywords.find(e => e.id === field).name" |
||||
v-model.trim="keyword" |
||||
clearable></el-input> |
||||
</div> |
||||
<div class="actions"> |
||||
<el-button v-auth="'/parnerOperation:合伙人学习管理:批量删除'" |
||||
@click="batchDel">批量删除</el-button> |
||||
<el-button v-auth="'/parnerOperation:合伙人学习管理:新增文章'" |
||||
type="primary" |
||||
@click="add">新增文章</el-button> |
||||
</div> |
||||
</div> |
||||
<el-table :data="list" |
||||
class="table" |
||||
ref="table" |
||||
header-align="center" |
||||
@selection-change="handleSelectionChange" |
||||
row-key="id" |
||||
@sort-change="sortChange"> |
||||
<el-table-column type="selection" |
||||
width="55" |
||||
align="center" |
||||
:reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" |
||||
width="60" |
||||
label="序号" |
||||
align="center"></el-table-column> |
||||
<el-table-column show-overflow-tooltip |
||||
prop="title" |
||||
label="标题" |
||||
align="center" |
||||
min-width="150"></el-table-column> |
||||
<el-table-column prop="classificationName" |
||||
label="所属分类" |
||||
align="center" |
||||
min-width="120" |
||||
sortable="custom"></el-table-column> |
||||
<el-table-column prop="founderName" |
||||
label="录入人" |
||||
align="center" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="editorName" |
||||
label="修改人" |
||||
align="center" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="updateTime" |
||||
label="修改日期" |
||||
align="center" |
||||
min-width="150" |
||||
sortable="custom"></el-table-column> |
||||
<el-table-column prop="releaseTime" |
||||
label="发布日期" |
||||
align="center" |
||||
min-width="100" |
||||
sortable="custom"></el-table-column> |
||||
<el-table-column prop="learnerNumber" |
||||
label="已学习人数" |
||||
align="center" |
||||
min-width="70"></el-table-column> |
||||
<el-table-column prop="workNumber" |
||||
label="状态" |
||||
align="center" |
||||
min-width="80"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.isRelease ? '已发布' : '草稿' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="sequence" |
||||
label="置顶" |
||||
align="center" |
||||
min-width="80" |
||||
sortable="custom"> |
||||
<template slot-scope="scope"> |
||||
<i v-if="scope.row.isRelease" |
||||
:class="['squ-icon', scope.row.isTop ? 'el-icon-check' : 'el-icon-close']" |
||||
@click="sticky(scope.row)"></i> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" |
||||
align="center" |
||||
width="210"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'/parnerOperation:合伙人学习管理:编辑'" |
||||
type="text" |
||||
@click="edit(scope.row)">编辑</el-button> |
||||
<el-button v-auth="'/parnerOperation:合伙人学习管理:删除'" |
||||
type="text" |
||||
@click="handleDelete(scope.row)">删除</el-button> |
||||
<el-switch v-auth="'/parnerOperation:合伙人学习管理:禁用'" |
||||
v-if="scope.row.isRelease" |
||||
class="m-l-10" |
||||
v-model="scope.row.isDisable" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
@change="switchOff($event, scope.row, scope.$index)"> |
||||
</el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background |
||||
@current-change="currentChange" |
||||
:current-page="page" |
||||
layout="total, prev, pager, next" |
||||
:total="total"></el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from '@/libs/util' |
||||
export default { |
||||
data () { |
||||
return { |
||||
field: this.$route.query.field || 'title', |
||||
keywords: [ |
||||
{ |
||||
id: 'title', |
||||
name: '标题' |
||||
}, |
||||
{ |
||||
id: 'founder', |
||||
name: '录入人' |
||||
}, |
||||
{ |
||||
id: 'editor', |
||||
name: '修改人' |
||||
} |
||||
], |
||||
keyword: this.$route.query.keyword || '', |
||||
list: [], |
||||
page: +this.$route.query.page || 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
topSort: '', |
||||
classificationNameSort: '', |
||||
releaseDateSort: '', |
||||
editTimeSort: '', |
||||
multipleSelection: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function (val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData() |
||||
}, 500) |
||||
} |
||||
}, |
||||
mounted () { |
||||
const { query } = this.$route |
||||
if (query.page) { |
||||
this.$router.push('/parnerOperation?type=learn').catch(() => { }) |
||||
} |
||||
|
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
// 文章列表 |
||||
getData () { |
||||
const { keyword } = this |
||||
this.$post(this.api.partnerOperatingList, { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
querySource: 3, //查询来源(3.中台 4.合伙人平台) |
||||
topSort: this.topSort, |
||||
classificationNameSort: this.classificationNameSort, |
||||
editTimeSort: this.editTimeSort, |
||||
releaseDateSort: this.releaseDateSort, |
||||
typeId: 1, // 类型(1.学习2.资讯) |
||||
title: this.field === 'title' ? keyword : '', |
||||
founderName: this.field === 'founder' ? keyword : '', |
||||
editorName: this.field === 'editor' ? keyword : '' |
||||
}).then(({ page, total }) => { |
||||
page.forEach(e => { |
||||
e.editing = false |
||||
}) |
||||
this.list = page |
||||
this.total = total |
||||
}).catch(err => { }) |
||||
}, |
||||
currentChange (val) { |
||||
this.page = val |
||||
this.getData() |
||||
}, |
||||
handleSelectionChange (val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
initData () { |
||||
this.$refs.table.clearSelection() |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
// 批量删除 |
||||
batchDel () { |
||||
const list = this.multipleSelection |
||||
if (list.length) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
const data = [] |
||||
list.map(e => { |
||||
data.push('ids=' + e.id) |
||||
}) |
||||
this.$post(`${this.api.batchDeletionParnerArticle}?${data.join('&')}`).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
util.successMsg("删除成功") |
||||
this.getData() |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
} else { |
||||
util.errorMsg('请先选择数据 ！') |
||||
} |
||||
}, |
||||
// 删除 |
||||
handleDelete (row) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(`${this.api.batchDeletionParnerArticle}?ids=${row.id}`).then(res => { |
||||
util.successMsg('删除成功') |
||||
this.getData() |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
}, |
||||
// 禁用启用 |
||||
switchOff (val, row) { |
||||
this.$post(`${this.api.articleEnableOrDisable}?id=${row.id}&isDisable=${val}`).then(res => { }).catch((res) => { }) |
||||
}, |
||||
// 排序回调 |
||||
sortChange (column) { |
||||
const { order } = column |
||||
// 三个排序只能同时传1个，所以点了一个排序的时候要清除掉其余两个 |
||||
if (column.prop === 'classificationName') { |
||||
this.classificationNameSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.releaseDateSort = '' |
||||
this.topSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'updateTime') { |
||||
this.editTimeSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.classificationNameSort = '' |
||||
this.releaseDateSort = '' |
||||
this.topSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'releaseTime') { |
||||
this.releaseDateSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.classificationNameSort = '' |
||||
this.topSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'sequence') { |
||||
this.topSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.releaseDateSort = '' |
||||
this.classificationNameSort = '' |
||||
} |
||||
} |
||||
this.getData() |
||||
}, |
||||
// 排序提交 |
||||
submitSequence (row) { |
||||
if (!row.sequence) return Util.errorMsg('请输入排序') |
||||
this.$post(`${this.api.modifiedSort}?articleId=${row.id}&sequenceNumber=${row.sequence}`).then(res => { |
||||
this.initData() |
||||
}).catch(res => { }) |
||||
}, |
||||
// 编辑排序 |
||||
editSequence (row) { |
||||
this.list.forEach(e => { |
||||
e.editing = false |
||||
}) |
||||
row.editing = true |
||||
}, |
||||
// 置顶 |
||||
sticky (row) { |
||||
this.$post(`${this.api.articleTopOperation}?articleId=${row.id}&isTop=${row.isTop ? 0 : 1}`).then(res => { |
||||
this.initData() |
||||
}).catch(res => { }) |
||||
}, |
||||
// 缓存当前页面和参数，详情页返回到列表的时候直接取该url |
||||
setReferrer () { |
||||
this.$store.commit('setReferrer', `${this.$route.fullPath}&keyword=${this.keyword}&field=${this.field}&page=${this.page}`) |
||||
}, |
||||
// 新增 |
||||
add () { |
||||
this.setReferrer() |
||||
this.$router.push(`/learnMg?type=1`) |
||||
}, |
||||
// 编辑 |
||||
edit (row) { |
||||
this.setReferrer() |
||||
this.$router.push(`/learnMg?id=${row.id}&type=1`) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.m-l-10 { |
||||
margin-left: 10px; |
||||
} |
||||
.squ-icon { |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
cursor: pointer; |
||||
color: #f70000; |
||||
&.el-icon-check { |
||||
color: #05991e; |
||||
} |
||||
} |
||||
/deep/.squ-input { |
||||
width: auto; |
||||
.el-input__inner { |
||||
width: 60px; |
||||
padding: 0 10px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,221 +0,0 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div class="tool"> |
||||
<div class="search-wrap"> |
||||
<el-select v-model="field" @change="initData"> |
||||
<el-option |
||||
v-for="(item, i) in keywords" |
||||
:key="i" |
||||
:label="item.name" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</el-select> |
||||
<el-input class="keyword" :placeholder="'请输入' + keywords.find(e => e.id === field).name" v-model.trim="keyword" clearable></el-input> |
||||
</div> |
||||
<div class="actions"> |
||||
<el-button v-auth="'/parnerOperation:方案管理:批量删除'" @click="batchDel">批量删除</el-button> |
||||
<el-button v-auth="'/parnerOperation:方案管理:新增文章'" type="primary" @click="add" >新增文章</el-button> |
||||
</div> |
||||
</div> |
||||
<el-table :data="list" class="table" ref="table" header-align="center" @selection-change="handleSelectionChange" row-key="id" @sort-change="sortChange"> |
||||
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||
<el-table-column show-overflow-tooltip prop="title" label="标题" align="center" min-width="150"></el-table-column> |
||||
<el-table-column prop="classificationName" label="所属分类" align="center" min-width="120" sortable="custom"></el-table-column> |
||||
<el-table-column prop="founderName" label="录入人" align="center" min-width="80"></el-table-column> |
||||
<el-table-column prop="editorName" label="修改人" align="center" min-width="80"></el-table-column> |
||||
<el-table-column prop="updateTime" label="修改日期" align="center" min-width="150" sortable="custom"></el-table-column> |
||||
<el-table-column prop="createTime" label="发布日期" align="center" min-width="100" sortable="custom"></el-table-column> |
||||
<el-table-column prop="workNumber" label="状态" align="center" min-width="80"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.isRelease ? '已发布' : '草稿' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="170"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'/parnerOperation:方案管理:编辑'" type="text" @click="edit(scope.row)">编辑</el-button> |
||||
<el-button v-auth="'/parnerOperation:方案管理:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||
<el-switch |
||||
v-auth="'/parnerOperation:方案管理:禁用'" |
||||
v-if="scope.row.isRelease" |
||||
class="m-l-10" |
||||
v-model="scope.row.isDisable" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
@change="switchOff($event, scope.row, scope.$index)"> |
||||
</el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from '@/libs/util' |
||||
export default { |
||||
data() { |
||||
return { |
||||
field: 'title', |
||||
keywords: [ |
||||
{ |
||||
id: 'title', |
||||
name: '标题' |
||||
}, |
||||
{ |
||||
id: 'founder', |
||||
name: '录入人' |
||||
}, |
||||
{ |
||||
id: 'editor', |
||||
name: '修改人' |
||||
} |
||||
], |
||||
keyword: '', |
||||
list: [], |
||||
page: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
modifiedTimeSort: '', |
||||
releaseDateSort: 'desc', |
||||
classificationNameSort: '', |
||||
editTimeSort: '', |
||||
multipleSelection: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData() |
||||
}, 500) |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
// 文章列表 |
||||
getData() { |
||||
const { keyword } = this |
||||
const data = { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
querySource: 3, //查询来源(3.中台 4.合伙人平台) |
||||
classificationNameSort: this.classificationNameSort, |
||||
editTimeSort: this.editTimeSort, |
||||
createTimeSort: this.releaseDateSort, |
||||
title: this.field === 'title' ? keyword : '', |
||||
founderName: this.field === 'founder' ? keyword : '', |
||||
editorName: this.field === 'editor' ? keyword : '' |
||||
} |
||||
this.$post(this.api.schemeList, data).then(({ data }) => { |
||||
this.list = data.records |
||||
this.total = +data.total |
||||
}).catch(err => {}) |
||||
}, |
||||
currentChange(val) { |
||||
this.page = val |
||||
this.getData() |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
initData() { |
||||
this.$refs.table.clearSelection() |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
// 批量删除 |
||||
batchDel() { |
||||
const list = this.multipleSelection |
||||
if (list.length) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
const data = [] |
||||
list.map(e => { |
||||
data.push('ids=' + e.id) |
||||
}) |
||||
this.$post(`${this.api.batchDeletionScheme}?${data.join('&')}`).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
util.successMsg("删除成功") |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
} else { |
||||
util.errorMsg('请先选择数据 ！') |
||||
} |
||||
}, |
||||
// 删除 |
||||
handleDelete(row) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(`${this.api.batchDeletionScheme}?ids=${row.id}`).then(res => { |
||||
util.successMsg('删除成功') |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
}, |
||||
// 禁用启用 |
||||
switchOff(val, row) { |
||||
this.$post(`${this.api.enableOrDisableScheme}?id=${row.id}&isDisable=${val}`).then(res => {}).catch((res) => {}) |
||||
}, |
||||
// 新增 |
||||
add() { |
||||
this.$router.push(`/schemeSet`) |
||||
}, |
||||
// 排序回调 |
||||
sortChange(column) { |
||||
const { order } = column |
||||
// 三个排序只能同时传1个，所以点了一个排序的时候要清除掉其余两个 |
||||
if (column.prop === 'classificationName') { |
||||
this.classificationNameSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.releaseDateSort = '' |
||||
this.sequenceSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'updateTime') { |
||||
this.editTimeSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.classificationNameSort = '' |
||||
this.releaseDateSort = '' |
||||
this.sequenceSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'createTime') { |
||||
this.releaseDateSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.classificationNameSort = '' |
||||
this.sequenceSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'sequence') { |
||||
this.sequenceSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.releaseDateSort = '' |
||||
this.classificationNameSort = '' |
||||
} |
||||
} |
||||
this.getData() |
||||
}, |
||||
// 编辑 |
||||
edit(row) { |
||||
this.$router.push(`/schemeSet?id=${row.id}`) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.m-l-10 { |
||||
margin-left: 10px; |
||||
} |
||||
</style> |
||||
@ -1,269 +0,0 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div class="tool"> |
||||
<div class="search-wrap"> |
||||
<el-select v-model="field" @change="initData"> |
||||
<el-option |
||||
v-for="(item, i) in keywords" |
||||
:key="i" |
||||
:label="item.name" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</el-select> |
||||
<el-input class="keyword" :placeholder="'请输入' + keywords.find(e => e.id === field).name" v-model.trim="keyword" clearable></el-input> |
||||
</div> |
||||
<div class="actions"> |
||||
<el-button v-auth="'/parnerOperation:合伙人资讯管理:批量删除'" @click="batchDel">批量删除</el-button> |
||||
<el-button v-auth="'/parnerOperation:合伙人资讯管理:新增文章'" type="primary" @click="add" >新增文章</el-button> |
||||
</div> |
||||
</div> |
||||
<el-table :data="list" class="table" ref="table" header-align="center" @selection-change="handleSelectionChange" row-key="id" @sort-change="sortChange"> |
||||
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||
<el-table-column show-overflow-tooltip prop="title" label="标题" align="center" min-width="150"></el-table-column> |
||||
<el-table-column prop="classificationName" label="所属分类" align="center" min-width="120" sortable="custom"></el-table-column> |
||||
<el-table-column prop="founderName" label="录入人" align="center" min-width="80"></el-table-column> |
||||
<el-table-column prop="editorName" label="修改人" align="center" min-width="80"></el-table-column> |
||||
<el-table-column prop="updateTime" label="修改日期" align="center" min-width="150" sortable="custom"></el-table-column> |
||||
<el-table-column prop="releaseTime" label="发布日期" align="center" min-width="100" sortable="custom"></el-table-column> |
||||
<el-table-column prop="learnerNumber" label="总浏览" align="center" min-width="70"></el-table-column> |
||||
<el-table-column prop="workNumber" label="状态" align="center" min-width="80"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.isRelease ? '已发布' : '草稿' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="sequence" label="置顶" align="center" min-width="80" sortable="custom"> |
||||
<template slot-scope="scope"> |
||||
<i v-if="scope.row.isRelease" :class="['squ-icon', scope.row.isTop ? 'el-icon-check' : 'el-icon-close']" @click="sticky(scope.row)"></i> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="210"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'/parnerOperation:合伙人资讯管理:编辑'" type="text" @click="edit(scope.row)">编辑</el-button> |
||||
<el-button v-auth="'/parnerOperation:合伙人资讯管理:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||
<el-switch |
||||
v-auth="'/parnerOperation:合伙人资讯管理:禁用'" |
||||
v-if="scope.row.isRelease" |
||||
class="m-l-10" |
||||
v-model="scope.row.isDisable" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
@change="switchOff($event, scope.row, scope.$index)"> |
||||
</el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting' |
||||
import util from '@/libs/util' |
||||
import { mapMutations } from 'vuex' |
||||
export default { |
||||
data() { |
||||
return { |
||||
field: 'title', |
||||
keywords: [ |
||||
{ |
||||
id: 'title', |
||||
name: '标题' |
||||
}, |
||||
{ |
||||
id: 'founder', |
||||
name: '录入人' |
||||
}, |
||||
{ |
||||
id: 'editor', |
||||
name: '修改人' |
||||
} |
||||
], |
||||
keyword: '', |
||||
list: [], |
||||
page: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
topSort: '', |
||||
classificationNameSort: '', |
||||
releaseDateSort: '', |
||||
editTimeSort: '', |
||||
multipleSelection: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData() |
||||
}, 500) |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
// 文章列表 |
||||
getData() { |
||||
const { keyword } = this |
||||
this.$post(this.api.partnerOperatingList, { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
querySource: 3, //查询来源(3.中台 4.合伙人平台) |
||||
topSort: this.topSort, |
||||
classificationNameSort: this.classificationNameSort, |
||||
editTimeSort: this.editTimeSort, |
||||
releaseDateSort: this.releaseDateSort, |
||||
typeId: 2, // 类型(1.学习2.资讯) |
||||
title: this.field === 'title' ? keyword : '', |
||||
founderName: this.field === 'founder' ? keyword : '', |
||||
editorName: this.field === 'editor' ? keyword : '' |
||||
}).then(({ page, total }) => { |
||||
page.forEach(e => { |
||||
e.editing = false |
||||
}) |
||||
this.list = page |
||||
this.total = total |
||||
}).catch(err => {}) |
||||
}, |
||||
currentChange(val) { |
||||
this.page = val |
||||
this.getData() |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
initData() { |
||||
this.$refs.table.clearSelection() |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
// 批量删除 |
||||
batchDel() { |
||||
const list = this.multipleSelection |
||||
if (list.length) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
const data = [] |
||||
list.map(e => { |
||||
data.push('ids=' + e.id) |
||||
}) |
||||
this.$post(`${this.api.batchDeletionParnerArticle}?${data.join('&')}`).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
util.successMsg("删除成功") |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
} else { |
||||
util.errorMsg('请先选择数据 ！') |
||||
} |
||||
}, |
||||
// 删除 |
||||
handleDelete(row) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(`${this.api.batchDeletionParnerArticle}?ids=${row.id}`).then(res => { |
||||
util.successMsg('删除成功') |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
}, |
||||
// 禁用启用 |
||||
switchOff(val, row) { |
||||
this.$post(`${this.api.articleEnableOrDisable}?id=${row.id}&isDisable=${val}`).then(res => {}).catch((res) => {}) |
||||
}, |
||||
// 新增 |
||||
add() { |
||||
this.$router.push(`/learnMg?type=2`) |
||||
}, |
||||
// 排序回调 |
||||
sortChange(column) { |
||||
const { order } = column |
||||
// 三个排序只能同时传1个，所以点了一个排序的时候要清除掉其余两个 |
||||
if (column.prop === 'classificationName') { |
||||
this.classificationNameSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.releaseDateSort = '' |
||||
this.topSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'updateTime') { |
||||
this.editTimeSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.classificationNameSort = '' |
||||
this.releaseDateSort = '' |
||||
this.topSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'releaseTime') { |
||||
this.releaseDateSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.classificationNameSort = '' |
||||
this.topSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'sequence') { |
||||
this.topSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.releaseDateSort = '' |
||||
this.classificationNameSort = '' |
||||
} |
||||
} |
||||
this.getData() |
||||
}, |
||||
// 排序提交 |
||||
submitSequence(row) { |
||||
if (!row.sequence) return Util.errorMsg('请输入排序') |
||||
this.$post(`${this.api.modifiedSort}?articleId=${row.id}&sequenceNumber=${row.sequence}`).then(res => { |
||||
this.initData() |
||||
}).catch(res => {}) |
||||
}, |
||||
// 编辑排序 |
||||
editSequence(row) { |
||||
this.list.forEach(e => { |
||||
e.editing = false |
||||
}) |
||||
row.editing = true |
||||
}, |
||||
// 置顶 |
||||
sticky(row) { |
||||
this.$post(`${this.api.articleTopOperation}?articleId=${row.id}&isTop=${row.isTop ? 0 : 1}`).then(res => { |
||||
this.initData() |
||||
}).catch(res => {}) |
||||
}, |
||||
// 编辑 |
||||
edit(row) { |
||||
this.$router.push(`/learnMg?id=${row.id}&type=2`) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.m-l-10 { |
||||
margin-left: 10px; |
||||
} |
||||
.squ-icon { |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
cursor: pointer; |
||||
color: #f70000; |
||||
&.el-icon-check { |
||||
color: #05991e; |
||||
} |
||||
} |
||||
/deep/.squ-input { |
||||
width: auto; |
||||
.el-input__inner { |
||||
width: 60px; |
||||
padding: 0 10px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,279 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div class="tool"> |
||||
<div class="search-wrap"> |
||||
<el-select v-model="field" |
||||
@change="initData"> |
||||
<el-option v-for="(item, i) in keywords" |
||||
:key="i" |
||||
:label="item.name" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</el-select> |
||||
<el-input class="keyword" |
||||
:placeholder="'请输入' + keywords.find(e => e.id === field).name" |
||||
v-model.trim="keyword" |
||||
clearable></el-input> |
||||
</div> |
||||
<div class="actions"> |
||||
<el-button v-auth="'/parnerOperation:方案管理:批量删除'" |
||||
@click="batchDel">批量删除</el-button> |
||||
<el-button v-auth="'/parnerOperation:方案管理:新增文章'" |
||||
type="primary" |
||||
@click="add">新增文章</el-button> |
||||
</div> |
||||
</div> |
||||
<el-table :data="list" |
||||
class="table" |
||||
ref="table" |
||||
header-align="center" |
||||
@selection-change="handleSelectionChange" |
||||
row-key="id" |
||||
@sort-change="sortChange"> |
||||
<el-table-column type="selection" |
||||
width="55" |
||||
align="center" |
||||
:reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" |
||||
width="60" |
||||
label="序号" |
||||
align="center"></el-table-column> |
||||
<el-table-column show-overflow-tooltip |
||||
prop="title" |
||||
label="标题" |
||||
align="center" |
||||
min-width="150"></el-table-column> |
||||
<el-table-column prop="classificationName" |
||||
label="所属分类" |
||||
align="center" |
||||
min-width="120" |
||||
sortable="custom"></el-table-column> |
||||
<el-table-column prop="founderName" |
||||
label="录入人" |
||||
align="center" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="editorName" |
||||
label="修改人" |
||||
align="center" |
||||
min-width="80"></el-table-column> |
||||
<el-table-column prop="updateTime" |
||||
label="修改日期" |
||||
align="center" |
||||
min-width="150" |
||||
sortable="custom"></el-table-column> |
||||
<el-table-column prop="createTime" |
||||
label="发布日期" |
||||
align="center" |
||||
min-width="100" |
||||
sortable="custom"></el-table-column> |
||||
<el-table-column prop="workNumber" |
||||
label="状态" |
||||
align="center" |
||||
min-width="80"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.isRelease ? '已发布' : '草稿' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" |
||||
align="center" |
||||
width="170"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'/parnerOperation:方案管理:编辑'" |
||||
type="text" |
||||
@click="edit(scope.row)">编辑</el-button> |
||||
<el-button v-auth="'/parnerOperation:方案管理:删除'" |
||||
type="text" |
||||
@click="handleDelete(scope.row)">删除</el-button> |
||||
<el-switch v-auth="'/parnerOperation:方案管理:禁用'" |
||||
v-if="scope.row.isRelease" |
||||
class="m-l-10" |
||||
v-model="scope.row.isDisable" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
@change="switchOff($event, scope.row, scope.$index)"> |
||||
</el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background |
||||
@current-change="currentChange" |
||||
:current-page="page" |
||||
layout="total, prev, pager, next" |
||||
:total="total"></el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from '@/libs/util' |
||||
export default { |
||||
data () { |
||||
return { |
||||
field: this.$route.query.field || 'title', |
||||
keywords: [ |
||||
{ |
||||
id: 'title', |
||||
name: '标题' |
||||
}, |
||||
{ |
||||
id: 'founder', |
||||
name: '录入人' |
||||
}, |
||||
{ |
||||
id: 'editor', |
||||
name: '修改人' |
||||
} |
||||
], |
||||
keyword: this.$route.query.keyword || '', |
||||
list: [], |
||||
page: +this.$route.query.page || 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
modifiedTimeSort: '', |
||||
releaseDateSort: 'desc', |
||||
classificationNameSort: '', |
||||
editTimeSort: '', |
||||
multipleSelection: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function (val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData() |
||||
}, 500) |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
// 文章列表 |
||||
getData () { |
||||
const { keyword } = this |
||||
const data = { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
querySource: 3, //查询来源(3.中台 4.合伙人平台) |
||||
classificationNameSort: this.classificationNameSort, |
||||
editTimeSort: this.editTimeSort, |
||||
createTimeSort: this.releaseDateSort, |
||||
title: this.field === 'title' ? keyword : '', |
||||
founderName: this.field === 'founder' ? keyword : '', |
||||
editorName: this.field === 'editor' ? keyword : '' |
||||
} |
||||
this.$post(this.api.schemeList, data).then(({ data }) => { |
||||
this.list = data.records |
||||
this.total = +data.total |
||||
}).catch(err => { }) |
||||
}, |
||||
currentChange (val) { |
||||
this.page = val |
||||
this.getData() |
||||
}, |
||||
handleSelectionChange (val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
initData () { |
||||
this.$refs.table.clearSelection() |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
// 批量删除 |
||||
batchDel () { |
||||
const list = this.multipleSelection |
||||
if (list.length) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
const data = [] |
||||
list.map(e => { |
||||
data.push('ids=' + e.id) |
||||
}) |
||||
this.$post(`${this.api.batchDeletionScheme}?${data.join('&')}`).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
util.successMsg("删除成功") |
||||
this.getData() |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
} else { |
||||
util.errorMsg('请先选择数据 ！') |
||||
} |
||||
}, |
||||
// 删除 |
||||
handleDelete (row) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(`${this.api.batchDeletionScheme}?ids=${row.id}`).then(res => { |
||||
util.successMsg('删除成功') |
||||
this.getData() |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
}, |
||||
// 禁用启用 |
||||
switchOff (val, row) { |
||||
this.$post(`${this.api.enableOrDisableScheme}?id=${row.id}&isDisable=${val}`).then(res => { }).catch((res) => { }) |
||||
}, |
||||
// 排序回调 |
||||
sortChange (column) { |
||||
const { order } = column |
||||
// 三个排序只能同时传1个，所以点了一个排序的时候要清除掉其余两个 |
||||
if (column.prop === 'classificationName') { |
||||
this.classificationNameSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.releaseDateSort = '' |
||||
this.sequenceSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'updateTime') { |
||||
this.editTimeSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.classificationNameSort = '' |
||||
this.releaseDateSort = '' |
||||
this.sequenceSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'createTime') { |
||||
this.releaseDateSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.classificationNameSort = '' |
||||
this.sequenceSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'sequence') { |
||||
this.sequenceSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.releaseDateSort = '' |
||||
this.classificationNameSort = '' |
||||
} |
||||
} |
||||
this.getData() |
||||
}, |
||||
// 缓存当前页面和参数，详情页返回到列表的时候直接取该url |
||||
setReferrer () { |
||||
this.$store.commit('setReferrer', `${this.$route.fullPath}&keyword=${this.keyword}&field=${this.field}&page=${this.page}`) |
||||
}, |
||||
// 新增 |
||||
add () { |
||||
this.setReferrer() |
||||
this.$router.push(`/schemeSet`) |
||||
}, |
||||
// 编辑 |
||||
edit (row) { |
||||
this.setReferrer() |
||||
this.$router.push(`/schemeSet?id=${row.id}`) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.m-l-10 { |
||||
margin-left: 10px; |
||||
} |
||||
</style> |
||||
@ -1,268 +0,0 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div class="tool"> |
||||
<div class="search-wrap"> |
||||
<el-select v-model="field" @change="initData"> |
||||
<el-option |
||||
v-for="(item, i) in keywords" |
||||
:key="i" |
||||
:label="item.name" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</el-select> |
||||
<el-input class="keyword" :placeholder="'请输入' + keywords.find(e => e.id === field).name" v-model.trim="keyword" clearable></el-input> |
||||
</div> |
||||
<div class="actions"> |
||||
<el-button v-auth="'/parnerOperation:合伙人学习管理:批量删除'" @click="batchDel">批量删除</el-button> |
||||
<el-button v-auth="'/parnerOperation:合伙人学习管理:新增文章'" type="primary" @click="add" >新增文章</el-button> |
||||
</div> |
||||
</div> |
||||
<el-table :data="list" class="table" ref="table" header-align="center" @selection-change="handleSelectionChange" row-key="id" @sort-change="sortChange"> |
||||
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||
<el-table-column show-overflow-tooltip prop="title" label="标题" align="center" min-width="150"></el-table-column> |
||||
<el-table-column prop="classificationName" label="所属分类" align="center" min-width="120" sortable="custom"></el-table-column> |
||||
<el-table-column prop="founderName" label="录入人" align="center" min-width="80"></el-table-column> |
||||
<el-table-column prop="editorName" label="修改人" align="center" min-width="80"></el-table-column> |
||||
<el-table-column prop="updateTime" label="修改日期" align="center" min-width="150" sortable="custom"></el-table-column> |
||||
<el-table-column prop="releaseTime" label="发布日期" align="center" min-width="100" sortable="custom"></el-table-column> |
||||
<el-table-column prop="learnerNumber" label="已学习人数" align="center" min-width="70"></el-table-column> |
||||
<el-table-column prop="workNumber" label="状态" align="center" min-width="80"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.isRelease ? '已发布' : '草稿' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="sequence" label="置顶" align="center" min-width="80" sortable="custom"> |
||||
<template slot-scope="scope"> |
||||
<i v-if="scope.row.isRelease" :class="['squ-icon', scope.row.isTop ? 'el-icon-check' : 'el-icon-close']" @click="sticky(scope.row)"></i> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="210"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'/parnerOperation:合伙人学习管理:编辑'" type="text" @click="edit(scope.row)">编辑</el-button> |
||||
<el-button v-auth="'/parnerOperation:合伙人学习管理:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||
<el-switch |
||||
v-auth="'/parnerOperation:合伙人学习管理:禁用'" |
||||
v-if="scope.row.isRelease" |
||||
class="m-l-10" |
||||
v-model="scope.row.isDisable" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
@change="switchOff($event, scope.row, scope.$index)"> |
||||
</el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting' |
||||
import util from '@/libs/util' |
||||
export default { |
||||
data() { |
||||
return { |
||||
field: 'title', |
||||
keywords: [ |
||||
{ |
||||
id: 'title', |
||||
name: '标题' |
||||
}, |
||||
{ |
||||
id: 'founder', |
||||
name: '录入人' |
||||
}, |
||||
{ |
||||
id: 'editor', |
||||
name: '修改人' |
||||
} |
||||
], |
||||
keyword: '', |
||||
list: [], |
||||
page: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
topSort: '', |
||||
classificationNameSort: '', |
||||
releaseDateSort: '', |
||||
editTimeSort: '', |
||||
multipleSelection: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData() |
||||
}, 500) |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
// 文章列表 |
||||
getData() { |
||||
const { keyword } = this |
||||
this.$post(this.api.partnerOperatingList, { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
querySource: 3, //查询来源(3.中台 4.合伙人平台) |
||||
topSort: this.topSort, |
||||
classificationNameSort: this.classificationNameSort, |
||||
editTimeSort: this.editTimeSort, |
||||
releaseDateSort: this.releaseDateSort, |
||||
typeId: 1, // 类型(1.学习2.资讯) |
||||
title: this.field === 'title' ? keyword : '', |
||||
founderName: this.field === 'founder' ? keyword : '', |
||||
editorName: this.field === 'editor' ? keyword : '' |
||||
}).then(({ page, total }) => { |
||||
page.forEach(e => { |
||||
e.editing = false |
||||
}) |
||||
this.list = page |
||||
this.total = total |
||||
}).catch(err => {}) |
||||
}, |
||||
currentChange(val) { |
||||
this.page = val |
||||
this.getData() |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
initData() { |
||||
this.$refs.table.clearSelection() |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
// 批量删除 |
||||
batchDel() { |
||||
const list = this.multipleSelection |
||||
if (list.length) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
const data = [] |
||||
list.map(e => { |
||||
data.push('ids=' + e.id) |
||||
}) |
||||
this.$post(`${this.api.batchDeletionParnerArticle}?${data.join('&')}`).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
util.successMsg("删除成功") |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
} else { |
||||
util.errorMsg('请先选择数据 ！') |
||||
} |
||||
}, |
||||
// 删除 |
||||
handleDelete(row) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(`${this.api.batchDeletionParnerArticle}?ids=${row.id}`).then(res => { |
||||
util.successMsg('删除成功') |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
}, |
||||
// 禁用启用 |
||||
switchOff(val, row) { |
||||
this.$post(`${this.api.articleEnableOrDisable}?id=${row.id}&isDisable=${val}`).then(res => {}).catch((res) => {}) |
||||
}, |
||||
// 新增 |
||||
add() { |
||||
this.$router.push(`/learnMg?type=1`) |
||||
}, |
||||
// 排序回调 |
||||
sortChange(column) { |
||||
const { order } = column |
||||
// 三个排序只能同时传1个，所以点了一个排序的时候要清除掉其余两个 |
||||
if (column.prop === 'classificationName') { |
||||
this.classificationNameSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.releaseDateSort = '' |
||||
this.topSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'updateTime') { |
||||
this.editTimeSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.classificationNameSort = '' |
||||
this.releaseDateSort = '' |
||||
this.topSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'releaseTime') { |
||||
this.releaseDateSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.classificationNameSort = '' |
||||
this.topSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'sequence') { |
||||
this.topSort = order ? order === 'ascending' ? 'asc' : 'desc' : '' |
||||
if (order) { |
||||
this.editTimeSort = '' |
||||
this.releaseDateSort = '' |
||||
this.classificationNameSort = '' |
||||
} |
||||
} |
||||
this.getData() |
||||
}, |
||||
// 排序提交 |
||||
submitSequence(row) { |
||||
if (!row.sequence) return Util.errorMsg('请输入排序') |
||||
this.$post(`${this.api.modifiedSort}?articleId=${row.id}&sequenceNumber=${row.sequence}`).then(res => { |
||||
this.initData() |
||||
}).catch(res => {}) |
||||
}, |
||||
// 编辑排序 |
||||
editSequence(row) { |
||||
this.list.forEach(e => { |
||||
e.editing = false |
||||
}) |
||||
row.editing = true |
||||
}, |
||||
// 置顶 |
||||
sticky(row) { |
||||
this.$post(`${this.api.articleTopOperation}?articleId=${row.id}&isTop=${row.isTop ? 0 : 1}`).then(res => { |
||||
this.initData() |
||||
}).catch(res => {}) |
||||
}, |
||||
// 编辑 |
||||
edit(row) { |
||||
this.$router.push(`/learnMg?id=${row.id}&type=1`) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.m-l-10 { |
||||
margin-left: 10px; |
||||
} |
||||
.squ-icon { |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
cursor: pointer; |
||||
color: #f70000; |
||||
&.el-icon-check { |
||||
color: #05991e; |
||||
} |
||||
} |
||||
/deep/.squ-input { |
||||
width: auto; |
||||
.el-input__inner { |
||||
width: 60px; |
||||
padding: 0 10px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,50 @@ |
||||
<template> |
||||
<div> |
||||
<iframe :src="url" frameborder="0" width="100%"></iframe> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting' |
||||
export default { |
||||
data () { |
||||
return { |
||||
url: '' |
||||
}; |
||||
}, |
||||
mounted () { |
||||
const token = sessionStorage.getItem('token') |
||||
const cache = localStorage.getItem('reviewPath') // 理论考试平台每次跳转都会往localStorage存路径 |
||||
let url = `${location.origin}/reviewCenter/` |
||||
if (Setting.isDev) url = `http://192.168.31.125:8099/` |
||||
if (cache) { |
||||
url += '#' + this.replaceParam(cache, Date.now()) |
||||
} else { |
||||
url += `#/myReview?nakadai=1${Setting.isDev ? `&token=${token}` : ''}&v=${Date.now()}` |
||||
} |
||||
console.log("🚀 ~ mounted ~ url:", url) |
||||
localStorage.setItem('review_token', token) |
||||
this.url = url |
||||
}, |
||||
methods: { |
||||
replaceParam (url, newVValue) { |
||||
const vParamRegex = /v=[^&]+/g |
||||
|
||||
let newUrl = url.replace(vParamRegex, `v=${newVValue}`) |
||||
|
||||
const [baseUrl, hash] = newUrl.split('#'); |
||||
if (hash) { |
||||
newUrl = `${baseUrl}#${hash.replace(vParamRegex, `v=${newVValue}`)}` |
||||
} |
||||
|
||||
return newUrl |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
iframe { |
||||
height: calc(100vh - 167px); |
||||
} |
||||
</style> |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue