赛赛用户管理页面
tianea
3 years ago
parent
2cbfe68e4d
commit
b71d1b00b2
@ -0,0 +1,46 @@
|
||||
import request from '@/utils/request'
|
||||
let baseUrl = '/pc/competition/task/'
|
||||
export function getList(query) {
|
||||
return request({
|
||||
url: baseUrl+'list',
|
||||
method: 'post',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
export function add(cat) {
|
||||
return request({
|
||||
url: baseUrl+"add",
|
||||
method: 'post',
|
||||
data: cat
|
||||
})
|
||||
}
|
||||
|
||||
export function update(cat) {
|
||||
return request({
|
||||
url: baseUrl+"update",
|
||||
method: 'post',
|
||||
data: cat
|
||||
})
|
||||
}
|
||||
|
||||
export function del(cat) {
|
||||
return request({
|
||||
url: baseUrl+"delete",
|
||||
method: 'post',
|
||||
data: cat
|
||||
})
|
||||
}
|
||||
export function get(cat) {
|
||||
return request({
|
||||
url: baseUrl+"get",
|
||||
method: 'post',
|
||||
data: cat
|
||||
})
|
||||
}
|
||||
export function batch(data){
|
||||
return request({
|
||||
url: baseUrl+"batchupdate",
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
import request from '@/utils/request'
|
||||
let baseUrl = '/pc/competition/team/'
|
||||
export function getList(query) {
|
||||
return request({
|
||||
url: baseUrl+'list',
|
||||
method: 'post',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
export function add(cat) {
|
||||
return request({
|
||||
url: baseUrl+"add",
|
||||
method: 'post',
|
||||
data: cat
|
||||
})
|
||||
}
|
||||
|
||||
export function update(cat) {
|
||||
return request({
|
||||
url: baseUrl+"update",
|
||||
method: 'post',
|
||||
data: cat
|
||||
})
|
||||
}
|
||||
|
||||
export function del(cat) {
|
||||
return request({
|
||||
url: baseUrl+"delete",
|
||||
method: 'post',
|
||||
data: cat
|
||||
})
|
||||
}
|
||||
export function get(cat) {
|
||||
return request({
|
||||
url: baseUrl+"get",
|
||||
method: 'post',
|
||||
data: cat
|
||||
})
|
||||
}
|
||||
export function uploadExcel(data){
|
||||
let fd = new FormData()
|
||||
fd.append("file",data["file"])
|
||||
fd.append("competitionId",data['competitionId'])
|
||||
fd.append("stageId",data['stageId'])
|
||||
return request({
|
||||
url: "/api/competition/upload/excel",
|
||||
method: 'post',
|
||||
data: fd
|
||||
})
|
||||
}
|
||||
export function deleteMember(dt){
|
||||
return request({
|
||||
url: baseUrl+'deleteMember',
|
||||
method: 'post',
|
||||
data: dt
|
||||
})
|
||||
}
|
||||
export function editTeamInfo(dt){
|
||||
return request({
|
||||
url: baseUrl+'editTeamInfo',
|
||||
method: 'post',
|
||||
data: dt
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
import request from '@/utils/request'
|
||||
let baseUrl = '/pc/upload/'
|
||||
export function upload(query) {
|
||||
return request({
|
||||
url: baseUrl+'image',
|
||||
method: 'post',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
Binary file not shown.
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1646107352078" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2034" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M341.312 85.312l64-85.312h213.376l64 85.312H960v85.376H64V85.312h277.312zM170.688 256h682.624v768H170.688V256zM256 341.312v597.376h512V341.312H256z m213.312 85.376v426.624H384V426.688h85.312z m170.688 0v426.624H554.688V426.688H640z" fill="#262626" p-id="2035"></path></svg>
|
||||
|
After Width: | Height: | Size: 650 B |
@ -0,0 +1,25 @@
|
||||
const qType =[
|
||||
{
|
||||
name: '单选题',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
name: '多选题',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
name: '判断题',
|
||||
id: 3
|
||||
}
|
||||
|
||||
]
|
||||
export function getName(id){
|
||||
let tmp = qType.find(t=>t.id == id)
|
||||
if(!tmp){
|
||||
return "未知";
|
||||
}
|
||||
return qType.find(t=>t.id == id).name
|
||||
}
|
||||
export function type(){
|
||||
return qType
|
||||
}
|
||||
@ -0,0 +1,389 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="tz-line">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="add">添加</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="group"
|
||||
element-loading-text="Loading"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column label="赛组名" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="包括类别">
|
||||
<template slot-scope="scope">
|
||||
<span class="tz-span" v-for="item in scope.row.catList" :key="item.id">{{ item.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="操作" width="300" class-name="small-padding fixed-width">
|
||||
<template slot-scope="{row,$index}">
|
||||
<el-button type="primary" size="mini" @click="handleUpdate(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
|
||||
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px">
|
||||
<el-form-item label="赛组名" prop="type">
|
||||
<div class="tz-line">
|
||||
<el-input v-model="temp.name" placeholder="请输入赛组名" /><el-button>查询</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="tab">
|
||||
<div @click="changeType(2)" >所属省份</div>
|
||||
<div @click="changeType(1)" >学校层次</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div class="tbpanel">
|
||||
<ul class="list-box" @keydown="shiftDown" @click="tboxClick" @keyup="shiftUp" data-id="1">
|
||||
<li v-for="(item,$index) in oneOptions" :key="item.id" :tabindex="$index" class="" :data-id="item.id" > {{item.name}} </li>
|
||||
</ul>
|
||||
<div class="tbbpanel">
|
||||
<div @click="removeLi"></div>
|
||||
<div @click="addLi"></div>
|
||||
</div>
|
||||
<ul class="list-box" data-id="2" @keydown="shiftDown" @click="tboxClick" @keyup="shiftUp" >
|
||||
<li v-for="(item, $index ) in twoOptions" :key="item.id" :tabindex="$index" :data-id="item.id"> {{item.name}} </li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="addGroup" >
|
||||
确认
|
||||
</el-button>
|
||||
<el-button @click="dialogFormVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as province from '@/api/province'
|
||||
import * as level from '@/api/level'
|
||||
import * as cgroup from '@/api/group'
|
||||
|
||||
export default {
|
||||
name: 'Group',
|
||||
components: {
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
props: {
|
||||
group: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
cmpId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
minIndex: 0,
|
||||
maxIndex: 0,
|
||||
setAttr: false,
|
||||
list: null,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
pageNo: 0
|
||||
},
|
||||
total: 0,
|
||||
limit: 20,
|
||||
dgroup: 'group',
|
||||
textMap: {
|
||||
update: 'Edit',
|
||||
create: 'Create'
|
||||
},
|
||||
groupName: '',
|
||||
groupType: 2,
|
||||
dialogFormVisible: false,
|
||||
provincOptions: [],
|
||||
levelOptions: [],
|
||||
selectOptions: [],
|
||||
oneOptions: [],
|
||||
twoOptions: [],
|
||||
dialogStatus: '',
|
||||
statusOptions: ['published', 'draft', 'deleted'],
|
||||
temp: {
|
||||
competitionId: 0,
|
||||
name: '',
|
||||
limitType: 1,
|
||||
catList: []
|
||||
},
|
||||
rules: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
if(this.$route.query.id){
|
||||
cgroup.getList({competitionId: parseInt(this.$route.query.id)}).then(res=>{
|
||||
if(res.code == 200 ){
|
||||
this.changeGp(res.data.list,-2)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
this.listLoading = true
|
||||
province.getList().then(response => {
|
||||
this.provincOptions = response.data.list
|
||||
this.listLoading = false
|
||||
})
|
||||
level.getList().then(res=>{
|
||||
if(res.code == 200){
|
||||
this.levelOptions = res.data.list
|
||||
}
|
||||
})
|
||||
},
|
||||
handleUpdate(row) {
|
||||
this.temp = Object.assign({}, row) // copy obj
|
||||
this.groupType = this.temp.limitType;
|
||||
if(this.groupType == 2){
|
||||
this.oneOptions = this.provincOptions
|
||||
}else{
|
||||
this.oneOptions = this.levelOptions
|
||||
}
|
||||
this.twoOptions = this.temp.catList
|
||||
this.dialogFormVisible = true
|
||||
console.log(this.group)
|
||||
},
|
||||
add() {
|
||||
this.dialogFormVisible = true
|
||||
this.oneOptions = Object.assign([], this.provincOptions)
|
||||
this.twoOptions = []
|
||||
this.groupName = ''
|
||||
},
|
||||
shiftDown(event){
|
||||
if(event.key == 'Shift'){
|
||||
this.maxIndex = event.target.attributes['tabindex'].value
|
||||
this.setAttr= true
|
||||
}
|
||||
},
|
||||
shiftUp(event){
|
||||
if(event.key == 'Shift'){
|
||||
this.setAttr= false
|
||||
this.maxIndex = -1
|
||||
}
|
||||
},
|
||||
handleDelete(row,index){
|
||||
// this.group.splice(index,1)
|
||||
this.changeGp(row,index)
|
||||
},
|
||||
tboxClick(event){
|
||||
let current = event.target
|
||||
if(!current.parentElement.attributes["data-id"]) return
|
||||
let parentId = parseInt(current.parentElement.attributes["data-id"].value) -1
|
||||
let tempIndex = current.attributes['tabindex'].value
|
||||
if(this.setAttr==false){
|
||||
let eles = document.getElementsByClassName("list-box")
|
||||
eles[parentId].childNodes.forEach(child =>{
|
||||
let t = child.attributes['class']
|
||||
if(t){
|
||||
t.value=''
|
||||
}
|
||||
})
|
||||
}
|
||||
if(current.attributes['class']){
|
||||
current.attributes['class'].value = 'li-selected'
|
||||
}else{
|
||||
var att=document.createAttribute("class");
|
||||
att.value="li-selected";
|
||||
current.attributes.setNamedItem(att)
|
||||
}
|
||||
if(tempIndex!=this.maxIndex){
|
||||
if(tempIndex>this.maxIndex){
|
||||
this.minIndex = this.maxIndex
|
||||
this.maxIndex = tempIndex
|
||||
}else{
|
||||
this.minIndex = tempIndex
|
||||
}
|
||||
let eles = document.getElementsByClassName("list-box")
|
||||
eles[parentId].childNodes.forEach(child =>{
|
||||
const i = parseInt(child.attributes['tabindex'].value)
|
||||
if(i>=this.minIndex&&i<=this.maxIndex){
|
||||
if(this.setAttr){
|
||||
if(child.attributes['class']){
|
||||
child.attributes['class'].value = 'li-selected';
|
||||
}else{
|
||||
var att=document.createAttribute("class");
|
||||
att.value="li-selected";
|
||||
child.attributes.setNamedItem(att)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
removeLi(){
|
||||
let eles = document.getElementsByClassName("list-box")
|
||||
eles[1].childNodes.forEach(child =>{
|
||||
let c = child.attributes['class']
|
||||
if(c&&c.value=="li-selected"){
|
||||
let id = child.attributes["data-id"].value
|
||||
let tmps = this.twoOptions.find(p=> p.id == parseInt(id))
|
||||
let index = this.twoOptions.indexOf(tmps)
|
||||
this.oneOptions.push(tmps)
|
||||
this.twoOptions.splice(index,1)
|
||||
}
|
||||
})
|
||||
},
|
||||
addLi(){
|
||||
let eles = document.getElementsByClassName("list-box")
|
||||
eles[0].childNodes.forEach(child =>{
|
||||
let c = child.attributes['class']
|
||||
if(c&&c.value=="li-selected"){
|
||||
let id = child.attributes["data-id"].value
|
||||
let tmps = this.oneOptions.find(p=> p.id == parseInt(id))
|
||||
let index = this.oneOptions.indexOf(tmps)
|
||||
this.twoOptions.push(tmps)
|
||||
this.oneOptions.splice(index,1)
|
||||
}
|
||||
})
|
||||
},
|
||||
changeType(type){
|
||||
this.groupType = type
|
||||
if(type === 1){
|
||||
this.oneOptions = Object.assign([], this.levelOptions)
|
||||
}else{
|
||||
this.oneOptions = Object.assign([],this.provincOptions)
|
||||
}
|
||||
this.twoOptions = []
|
||||
},
|
||||
addGroup(){
|
||||
this.temp.limitType = this.groupType
|
||||
this.temp.catList = this.twoOptions
|
||||
this.temp.competitionId = this.cmpId
|
||||
|
||||
let tmp = Object.assign({},this.temp)
|
||||
// this.group.push(tmp)
|
||||
if(tmp.id>0){
|
||||
console.log(this.temp.name)
|
||||
this.changeGp(tmp,-3)
|
||||
}else{
|
||||
this.changeGp(tmp,-1)
|
||||
}
|
||||
this.dialogFormVisible = false
|
||||
},
|
||||
changeGp(val,index){
|
||||
this.$emit("changeGroup",{value: val, index: index})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.tz-line{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.tz-line button{
|
||||
margin-left: 10px;
|
||||
}
|
||||
.tab{
|
||||
display: flex;
|
||||
}
|
||||
.tab div {
|
||||
color: rgb(72, 72, 241);
|
||||
margin-right: 20px;
|
||||
}
|
||||
.board {
|
||||
width: 1000px;
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.el-form {
|
||||
width: 100%;
|
||||
}
|
||||
.tbpanel {
|
||||
display: flex;
|
||||
}
|
||||
.todo {
|
||||
.board-column-header {
|
||||
background: #4A9FF9;
|
||||
}
|
||||
}
|
||||
.working {
|
||||
.board-column-header {
|
||||
background: #f9944a;
|
||||
}
|
||||
}
|
||||
.board-column{
|
||||
min-width: 200px !important;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.done .board-column-header {
|
||||
background: #2ac06d;
|
||||
}
|
||||
.list-box{
|
||||
overflow: scroll;
|
||||
height: 250px;
|
||||
padding-left: 3px;
|
||||
border: 1px solid gray;
|
||||
min-width: 200px;
|
||||
}
|
||||
.list-box>li {
|
||||
list-style-type: none;
|
||||
height:40px;
|
||||
}
|
||||
.list-box>li::selection {
|
||||
background-color: none;
|
||||
}
|
||||
.li-selected {
|
||||
outline-style: none;
|
||||
background: #4A9FF9;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tbbpanel{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.tbbpanel div:nth-child(1){
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background: url('/svg/left.svg');
|
||||
background-size: cover;
|
||||
}
|
||||
.tbbpanel div:nth-child(2){
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background: url('/svg/right_arrow.svg');
|
||||
background-size: cover;
|
||||
}
|
||||
.hidden{
|
||||
display: none;
|
||||
}
|
||||
.tz-span{
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="tbpanel">
|
||||
<ul class="list-box" @keydown="shiftDown" @click="tboxClick" @keyup="shiftUp" data-id="1" @scroll="handleScroll">
|
||||
<li v-for="(item,$index) in oneOptions" :key="item.id" :tabindex="$index" class="" :data-id="item.id" > {{item.name}} </li>
|
||||
</ul>
|
||||
<div class="tbbpanel">
|
||||
<div @click="removeLi"></div>
|
||||
<div @click="addLi"></div>
|
||||
</div>
|
||||
<ul class="list-box" data-id="2" @keydown="shiftDown" @click="tboxClick" @keyup="shiftUp" >
|
||||
<li v-for="(item, $index ) in twoOptions" :key="item.id" :tabindex="$index" :data-id="item.id"> {{item.name}} </li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
oneOptions: [],
|
||||
twoOptions: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.oneOptions = Object.assign([],this.list)
|
||||
},
|
||||
methods:{
|
||||
shiftDown(event){
|
||||
if(event.key == 'Shift'){
|
||||
this.maxIndex = event.target.attributes['tabindex'].value
|
||||
this.setAttr= true
|
||||
}
|
||||
},
|
||||
shiftUp(event){
|
||||
if(event.key == 'Shift'){
|
||||
this.setAttr= false
|
||||
this.maxIndex = -1
|
||||
}
|
||||
},
|
||||
tboxClick(event){
|
||||
let current = event.target
|
||||
if(!current.parentElement.attributes["data-id"]) return
|
||||
let parentId = parseInt(current.parentElement.attributes["data-id"].value) -1
|
||||
let tempIndex = current.attributes['tabindex'].value
|
||||
if(this.setAttr==false){
|
||||
let eles = document.getElementsByClassName("list-box")
|
||||
eles[parentId].childNodes.forEach(child =>{
|
||||
let t = child.attributes['class']
|
||||
if(t){
|
||||
t.value=''
|
||||
}
|
||||
})
|
||||
}
|
||||
if(current.attributes['class']){
|
||||
current.attributes['class'].value = 'li-selected'
|
||||
}else{
|
||||
var att=document.createAttribute("class");
|
||||
att.value="li-selected";
|
||||
current.attributes.setNamedItem(att)
|
||||
}
|
||||
if(tempIndex!=this.maxIndex){
|
||||
if(tempIndex>this.maxIndex){
|
||||
this.minIndex = this.maxIndex
|
||||
this.maxIndex = tempIndex
|
||||
}else{
|
||||
this.minIndex = tempIndex
|
||||
}
|
||||
let eles = document.getElementsByClassName("list-box")
|
||||
eles[parentId].childNodes.forEach(child =>{
|
||||
const i = parseInt(child.attributes['tabindex'].value)
|
||||
if(i>=this.minIndex&&i<=this.maxIndex){
|
||||
if(this.setAttr){
|
||||
if(child.attributes['class']){
|
||||
child.attributes['class'].value = 'li-selected';
|
||||
}else{
|
||||
var att=document.createAttribute("class");
|
||||
att.value="li-selected";
|
||||
child.attributes.setNamedItem(att)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
removeLi(){
|
||||
let eles = document.getElementsByClassName("list-box")
|
||||
eles[1].childNodes.forEach(child =>{
|
||||
let c = child.attributes['class']
|
||||
if(c&&c.value=="li-selected"){
|
||||
let id = child.attributes["data-id"].value
|
||||
let tmps = this.twoOptions.find(p=> p.id == parseInt(id))
|
||||
let index = this.twoOptions.indexOf(tmps)
|
||||
this.oneOptions.push(tmps)
|
||||
this.twoOptions.splice(index,1)
|
||||
}
|
||||
})
|
||||
},
|
||||
addLi(){
|
||||
let eles = document.getElementsByClassName("list-box")
|
||||
eles[0].childNodes.forEach(child =>{
|
||||
let c = child.attributes['class']
|
||||
if(c&&c.value=="li-selected"){
|
||||
let id = child.attributes["data-id"].value
|
||||
let tmps = this.oneOptions.find(p=> p.id == parseInt(id))
|
||||
let index = this.oneOptions.indexOf(tmps)
|
||||
this.twoOptions.push(tmps)
|
||||
this.oneOptions.splice(index,1)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleScroll(e){
|
||||
|
||||
if(e.srcElement.scrollTopMax == e.srcElement.scrollTop){
|
||||
console.log(e.srcElement)
|
||||
console.log(e.srcElement.scrollTopMax, e.target.scrollTop)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.tbpanel {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 250px;
|
||||
min-height: 250px;
|
||||
}
|
||||
.list-box{
|
||||
overflow: scroll;
|
||||
height: 250px;
|
||||
padding-left: 3px;
|
||||
border: 1px solid gray;
|
||||
min-width: 200px;
|
||||
width: 100%;
|
||||
}
|
||||
.list-box>li {
|
||||
list-style-type: none;
|
||||
height:40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.list-box>li::selection {
|
||||
background-color: none;
|
||||
}
|
||||
.li-selected {
|
||||
outline-style: none;
|
||||
background: #4A9FF9;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tbbpanel{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.tbbpanel div:nth-child(1){
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background: url('/svg/left.svg');
|
||||
background-size: cover;
|
||||
}
|
||||
.tbbpanel div:nth-child(2){
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background: url('/svg/right_arrow.svg');
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,388 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="tab">
|
||||
<div v-for="(item,$index) in survey.stageList" :key="item.name" :style="'background-color:'+stageColor[$index]" class="stage" @click="changeTab($index,item.id)" > {{ item.name }} </div>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div v-for="(item,$index) in teamList" :key="item.name" :style="'background-color:'+teamColor[$index]" class="stage" @click="changeTeamTab($index)" > {{ item.name }} </div>
|
||||
</div>
|
||||
<div v-if="teamTabId == 0" class="tbPanel">
|
||||
<div class="filter-container">
|
||||
<el-input placeholder="团队名称" />
|
||||
<el-button>搜索</el-button>
|
||||
<el-button @click="dialogVisable = true">添加团队</el-button>
|
||||
<el-button @click="batchImport">批量导入<input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx" @change="handleClick"></el-button>
|
||||
|
||||
</div>
|
||||
<el-table :data.sync="tableData">
|
||||
<el-table-column label="团队名称">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.teamName}}<i class="el-icon-edit" @click="handleEditTeamInfo(scope.row,1)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="院校" prop="school">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column v-for="item in columnList" :key="item.id" :label="item.lable">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row[item.name].name }} <i v-if="scope.row[item.name].name" @click="deleteMember(scope.row,item.name)" class="el-icon-delete" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="指导老师">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.teacher}}<i class="el-icon-edit" @click="handleEditTeamInfo(scope.row,2)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button class="small" @click="addMember(scope.row)" >添加成员</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
:current-page.sync="teamQuery.pageNo"
|
||||
:page-sizes="[10,15,20]"
|
||||
:page-size.sync="teamQuery.pageSize"
|
||||
layout="total,prev,pager,next,jumper,sizes"
|
||||
:total="teamQuery.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
|
||||
/>
|
||||
</div>
|
||||
<div v-if="teamTabId == 1">
|
||||
<div class="filter-container">
|
||||
<el-input placeholder="姓名/学号" /> <el-button>搜索</el-button> <el-button>添加成员</el-button><el-button>批量导入</el-button>
|
||||
</div>
|
||||
<el-table v-model="userList">
|
||||
<el-table-column label="姓名">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="学号">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.studentNo }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="学校">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.school }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="指导教师">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.name }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<el-button type="danger">移除</el-button>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
</div>
|
||||
<el-dialog title="添加团队" :visible.sync="dialogVisable">
|
||||
<div class="filter-container">
|
||||
<el-input placeholder="输入团队名" class="small" />
|
||||
<el-input placeholder="输入指导老师" class="small"/>
|
||||
<el-input placeholder="输入学号/姓名检索"/>
|
||||
</div>
|
||||
<div class="app-container">
|
||||
<select-panel :list="userList" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog ref="editTeam" :title="editTeamInfo.title" :visible.sync="editTeamNameVisable" >
|
||||
<el-form>
|
||||
<el-form-item>
|
||||
<el-input v-model="editTeamInfo.name" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button class="small" @click="confirmEditTeam" >确定</el-button>
|
||||
<el-button class="small">取消</el-button>
|
||||
</el-dialog>
|
||||
<el-dialog title="添加队员" :visible.sync="addMemberVisable">
|
||||
<div class="filter-container">
|
||||
<el-input v-model="memberQuery.name" placeholder="输入学号或姓名"/>
|
||||
<el-button @click="searchMember">查询</el-button>
|
||||
</div>
|
||||
<el-table :data="addMemberList"
|
||||
@selection-change="onSelect"
|
||||
>
|
||||
<el-table-column type="selection" />
|
||||
<el-table-column label="学号">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.studentNo}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="姓名">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.name}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="层次">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.level}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-button @click="addTeamMember">添加队员</el-button>
|
||||
<el-button @click="addMemberVisable = false">取消</el-button>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SelectPanel from './selectPanel.vue'
|
||||
import * as userApi from '@/api/user'
|
||||
import * as teamApi from '@/api/team'
|
||||
export default {
|
||||
components: {
|
||||
'select-panel': SelectPanel
|
||||
},
|
||||
props: {
|
||||
survey: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
team: {
|
||||
type: Array
|
||||
},
|
||||
competitionType:{
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
teamMinCount: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
teamMaxCount: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
cmpId: {
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
dialogVisable: false,
|
||||
stageColor: [
|
||||
'#1490ce',
|
||||
'#ff8e8e',
|
||||
'#8e00c6',
|
||||
],
|
||||
teamColor: [
|
||||
"#fec52e",
|
||||
"#1490ce"
|
||||
],
|
||||
editTeamInfo: {
|
||||
dv:true,
|
||||
item: {},
|
||||
title: '编辑团队名称',
|
||||
name: '',
|
||||
type:1
|
||||
},
|
||||
editTeamNameVisable: false,
|
||||
addMemberVisable: false,
|
||||
teamList: [],
|
||||
tabId: 0,
|
||||
teamTabId: 0,
|
||||
stageId: null,
|
||||
columnList: [],
|
||||
tableData:[],
|
||||
teamTab: 0,
|
||||
userQuery: {
|
||||
pageNo: 0
|
||||
},
|
||||
teamQuery: {
|
||||
competitionId: this.cmpId,
|
||||
stageId: this.stageId,
|
||||
pageNo: 0,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
},
|
||||
userList: [],
|
||||
addMemberList:[],
|
||||
willAddMemberList:[],
|
||||
memberQuery: {
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.competitionType){
|
||||
this.teamList = [{id: 1,name: '参赛团队'},{id: 2,name: '参赛人员'}]
|
||||
}
|
||||
userApi.getList(this.userQuery).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.userList = res.data.userPage.content
|
||||
}
|
||||
})
|
||||
|
||||
this.stageId = this.survey.stageList[0].id
|
||||
this.teamQuery.stageId = this.stageId
|
||||
for(var i = 0 ;i< this.teamMaxCount;i++){
|
||||
let tmp = {
|
||||
id: i,
|
||||
lable: '组员'+(i+1),
|
||||
name: 'member_'+(i+1)
|
||||
}
|
||||
this.columnList.push(tmp)
|
||||
}
|
||||
|
||||
this.loadData()
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
changeTab(index,id){
|
||||
this.tabId = index
|
||||
this.stageId = id
|
||||
this.teamQuery.stageId = this.stageId
|
||||
this.loadData()
|
||||
},
|
||||
changeTeamTab(index){
|
||||
this.teamTabId = index
|
||||
},
|
||||
addMember(item){
|
||||
console.log(item)
|
||||
this.addMemberList = []
|
||||
this.addMemberVisable=true
|
||||
},
|
||||
batchImport(){
|
||||
this.$refs['excel-upload-input'].click()
|
||||
},
|
||||
handleClick(e) {
|
||||
const files = e.target.files
|
||||
const rawFile = files[0] // only use files[0]
|
||||
console.log(rawFile)
|
||||
teamApi.uploadExcel({
|
||||
file: rawFile,
|
||||
competitionId: this.cmpId,
|
||||
stageId: this.stageId
|
||||
})
|
||||
// if (!rawFile) return
|
||||
// this.upload(rawFile)
|
||||
},
|
||||
handleSizeChange(){
|
||||
this.loadData()
|
||||
},
|
||||
handleCurrentChange(){
|
||||
this.loadData()
|
||||
},
|
||||
deleteMember(row,name){
|
||||
let item = row[name]
|
||||
console.log(item.id)
|
||||
teamApi.deleteMember({id: item.id}).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.loadData()
|
||||
}
|
||||
})
|
||||
},
|
||||
handleEditTeamInfo(item,type){
|
||||
this.editTeamNameVisable = true
|
||||
this.editTeamInfo.item = item
|
||||
this.editTeamInfo.type=type
|
||||
if(type==1){
|
||||
this.editTeamInfo.name = item.teamName
|
||||
}else{
|
||||
this.editTeamInfo.name = item.teacher
|
||||
}
|
||||
},
|
||||
confirmEditTeam(){
|
||||
teamApi.editTeamInfo({
|
||||
type: this.editTeamInfo.type,
|
||||
name: this.editTeamInfo.name,
|
||||
id: this.editTeamInfo.item.id
|
||||
}).then(res=>{
|
||||
if(res.code == 200){
|
||||
this.loadData()
|
||||
this.editTeamNameVisable =false
|
||||
}
|
||||
})
|
||||
},
|
||||
loadData(){
|
||||
teamApi.getList(this.teamQuery).then(res=>{
|
||||
if(res.code == 200){
|
||||
const teamArray = res.data.page.content
|
||||
this.teamQuery.total = res.data.page.totalElements
|
||||
const memberList = res.data.list
|
||||
this.tableData =[]
|
||||
teamArray.forEach(team =>{
|
||||
const teamMembers = memberList.filter(m => m.teamId == team.id)
|
||||
let teamInfo = {
|
||||
id: 0,
|
||||
teamName: '',
|
||||
school: '',
|
||||
member_1: "",
|
||||
member_2: "",
|
||||
member_3: "",
|
||||
member_4: '',
|
||||
member_5: '',
|
||||
teacher: ''
|
||||
}
|
||||
teamInfo.teamName = team.teamName
|
||||
teamInfo.school = team.school
|
||||
teamInfo.teacher = team.teacherName
|
||||
teamInfo.id = team.id
|
||||
for(var i = 0 ;i< teamMembers.length;i++){
|
||||
const m = teamMembers[i]
|
||||
teamInfo["member_"+(i+1)] = m
|
||||
teamInfo.school = m.school
|
||||
|
||||
}
|
||||
this.tableData.push(teamInfo)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
onSelect(val){
|
||||
console.log(val)
|
||||
this.willAddMemberList =val
|
||||
},
|
||||
searchMember(){
|
||||
userApi.getMember(this.memberQuery).then(res=>{
|
||||
if(res.code == 200){
|
||||
const tmp = this.addMemberList.find(item=>item.id == res.data.id)
|
||||
console.log(tmp)
|
||||
if(!tmp){
|
||||
this.addMemberList.push(res.data)
|
||||
}
|
||||
|
||||
}else{
|
||||
this.$notify({
|
||||
title: '操作失败',
|
||||
message: res.msg,
|
||||
type: 'warning',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
addTeamMember(){
|
||||
console.log(this.willAddMemberList)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.tab {
|
||||
display: flex;
|
||||
line-height: 40px;
|
||||
}
|
||||
.tab div{
|
||||
margin-right: 20px;
|
||||
}
|
||||
.stage{
|
||||
padding: 3px;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
padding-left: 80px;
|
||||
padding-right: 80px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.excel-upload-input{
|
||||
display: none;
|
||||
z-index: -9999;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
Loading…
Reference in New Issue