646 lines
27 KiB
HTML
646 lines
27 KiB
HTML
<!--#
|
||
layout("/layouts/platform.html"){
|
||
#-->
|
||
|
||
|
||
<div id="app" class="platform" v-cloak>
|
||
<guava ref="guava">
|
||
<template>
|
||
<el-card shadow="never">
|
||
<div class="search">
|
||
|
||
|
||
<div class="d-search-item btn-group tool-button mr10">
|
||
<el-checkbox-group @change="doSearch" v-model="pageForm.isMenWomen">
|
||
<el-checkbox-button :key="2" :label="2">男子</el-checkbox-button>
|
||
<el-checkbox-button :key="3" :label="3">女子</el-checkbox-button>
|
||
</el-checkbox-group>
|
||
</div>
|
||
<div class="d-search-item btn-group tool-button mr10">
|
||
<el-checkbox-group @change="doSearch" v-model="pageForm.isMenWomen">
|
||
<el-checkbox-button :key="4" :label="4">单项</el-checkbox-button>
|
||
<el-checkbox-button :key="5" :label="5">团体</el-checkbox-button>
|
||
</el-checkbox-group>
|
||
|
||
</div>
|
||
|
||
<div class="d-search-item btn-group tool-button mr10">
|
||
<el-select v-model="pageForm.group" @focus="focusGroup" placeholder="请选择比赛组别" clearable
|
||
style="width: 100%">
|
||
<el-option
|
||
v-for="item in groupList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
|
||
<div class="d-search-item btn-group tool-button mr10">
|
||
<el-select @focus="exerciseType" clearable filterable placeholder="请选择运动类型"
|
||
style="width: 100%" v-model="pageForm.events">
|
||
<el-option
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
v-for="item in exerciseTypeList">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
|
||
|
||
<div class="search-query">
|
||
<el-button type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
|
||
<el-card shadow="never" class="mt10">
|
||
<table-tool label="比赛项目列表" :app="this">
|
||
|
||
<template #label_end>
|
||
|
||
</template>
|
||
|
||
<template #func>
|
||
<el-date-picker
|
||
class="ml10"
|
||
v-model="pageForm.ageDate"
|
||
type="daterange"
|
||
range-separator="-"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
format="yyyy 年 MM 月 dd 日"
|
||
value-format="yyyy-MM-dd">
|
||
</el-date-picker>
|
||
<el-button class="ml10" type="primary" icon="el-icon-check" @click="doAssignmentDate">统赋年龄限制
|
||
</el-button>
|
||
<el-button type="primary" icon="el-icon-edit-outline"
|
||
@click="openAdd">
|
||
创建比赛项目
|
||
</el-button>
|
||
</template>
|
||
</table-tool>
|
||
|
||
|
||
<el-table :data="tableData" style="width: 100%;margin-bottom: 20px" row-key="id"
|
||
@sort-change="pageOrder"
|
||
v-loading="tableLoading" :size="tableSize" class="vi-table">
|
||
<el-table-column align="center" header-align="center" type="index" :index="indexMethod" label="序号"
|
||
width="80px"></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
header-align="center"
|
||
v-for="column in tableColumns"
|
||
:label="column.label"
|
||
:prop="column.prop" :sortable="column.sortable"
|
||
:sortable="column.sortable" show-overflow-tooltip>
|
||
|
||
<template scope="{row}" v-if="column.prop=='baname'">
|
||
<span>{{row.baname!=null?row.baname:'暂无'}}</span>
|
||
</template>
|
||
|
||
<template scope="{row}" v-else-if="column.prop=='diname'">
|
||
<span>{{row.diname!=null?row.diname:'暂无'}}</span>
|
||
</template>
|
||
|
||
<template scope="{row}" v-else-if="column.prop=='isMenWomen'">
|
||
<span v-if="row.isMenWomen==1">男子</span>
|
||
<span v-if="row.isMenWomen==2">女子</span>
|
||
</template>
|
||
|
||
<template scope="{row}" v-else-if="column.prop=='spname'">
|
||
<span>{{row.spname!=null?row.spname:''}}</span>
|
||
</template>
|
||
|
||
<template scope="{row}" v-else-if="column.prop=='projectType'">
|
||
<span>{{row.projectType=='1'?'单项':'团体'}}</span>
|
||
</template>
|
||
|
||
<template scope="{row}" v-else-if="column.prop=='note'">
|
||
<span>{{row.note!=''?row.note:'暂无'}}</span>
|
||
</template>
|
||
|
||
<template scope="{row}" v-else-if="column.prop=='whetherEnable'">
|
||
<el-switch @change="switchChange(row)" v-model="row.whetherEnable" active-color="#13ce66"
|
||
inactive-color="#ff4949"></el-switch>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="userOnline" align="center" header-align="center" label="操作"
|
||
width="150px">
|
||
<template scope="{row}">
|
||
<el-dropdown @command="dropdownCommand">
|
||
<el-button size="mini" :loading="row.loading">
|
||
<i class="ti-settings"></i>
|
||
<span class="ti-angle-down"></span>
|
||
</el-button>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item :command="{type:'edit',row}">
|
||
编辑
|
||
</el-dropdown-item>
|
||
<el-dropdown-item :command="{type:'delete',row}">
|
||
删除
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!--#include("/layouts/pagination.html"){}#-->
|
||
</el-card>
|
||
|
||
|
||
</template>
|
||
|
||
|
||
<template #edit>
|
||
|
||
<vi-title title="填写比赛项目信息"></vi-title>
|
||
|
||
|
||
<el-form :model="formData" ref="form" :rules="formRules" label-width="120px"
|
||
label-suffix="：">
|
||
<el-row gutter="40">
|
||
<el-col :span="24">
|
||
<el-form-item prop="isInterest" label="是否趣味项目">
|
||
<el-checkbox v-model="formData.isInterest">{{formData.isInterest?'是趣味':'不是趣味'}}
|
||
</el-checkbox>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item prop="isMenWomen" label="性别">
|
||
<el-select v-model="formData.isMenWomen" placeholder="请选择男女分组" allow-create filterable
|
||
default-first-option clearable style="width: 100%">
|
||
<el-option
|
||
v-for="item in menWomenList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item prop="competitionCategory" label="比赛组别">
|
||
<el-select v-model="formData.competitionCategory" @focus="focusGroup" placeholder="请选择比赛组别"
|
||
clearable style="width: 100%">
|
||
<el-option
|
||
v-for="item in groupList"
|
||
:key="item.id"
|
||
:label="item.name+'（'+item.code+'）'"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item prop="distance" label="距离">
|
||
<el-select v-model="formData.distance" @focus="focusDistance" placeholder="请选择距离"
|
||
clearable style="width: 100%">
|
||
<el-option
|
||
v-for="item in distanceList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item prop="exerciseType" label="运动类型">
|
||
<el-select v-model="formData.exerciseType" @focus="exerciseType"
|
||
@change="changeExercise_typeList" placeholder="请选择运动类型"
|
||
filterable
|
||
clearable style="width: 100%">
|
||
<el-option
|
||
v-for="item in exerciseTypeList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item prop="sports" label="运动项目">
|
||
<el-select v-model="formData.sports" placeholder="请选择具体运动项目"
|
||
clearable style="width: 100%">
|
||
<el-option
|
||
v-for="item in exerciseTypeList2"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item prop="projectType" label="项目类型">
|
||
<el-select v-model="formData.projectType" placeholder="请选择具体运动项目" allow-create filterable
|
||
default-first-option clearable style="width: 100%">
|
||
<el-option
|
||
v-for="item in projectTypeList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item prop="ageDate" label="年龄限制范围" v-if="formData.projectType==1">
|
||
<el-date-picker
|
||
style="width: 100%"
|
||
v-model="formData.ageDate"
|
||
type="daterange"
|
||
range-separator="-"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
format="yyyy 年 MM 月 dd 日"
|
||
value-format="yyyy-MM-dd">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
|
||
</el-col>
|
||
|
||
|
||
</el-row>
|
||
|
||
</el-form>
|
||
<div style="float: right;margin: 20px 0">
|
||
<el-button type="primary" @click="formData.id?doEdit():doAdd()">提 交</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
</guava>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
const vue = new Vue({
|
||
el: '#app',
|
||
mixins: [initTableMixins],
|
||
data() {
|
||
return {
|
||
groupList: [],
|
||
exerciseTypeList: [],
|
||
distanceList: [],
|
||
exerciseTypeList2: [],
|
||
eventDialog: false,
|
||
loading: false,
|
||
title: "",
|
||
pageForm: {
|
||
activityId: null,
|
||
ageDate: null,
|
||
isMenWomen: []
|
||
},
|
||
tableColumns: [
|
||
{prop: 'isMenWomen', label: '男子/女子', sortable: true},
|
||
{prop: 'baname', label: '比赛组别', sortable: true},
|
||
{prop: 'diname', label: '距离', sortable: true},
|
||
{prop: 'exename', label: '运动类型', sortable: true},
|
||
{prop: 'spname', label: '运动项目', sortable: true},
|
||
{prop: 'projectType', label: '项目类型', sortable: true},
|
||
{prop: 'whetherEnable', label: '是否启用'},
|
||
{prop: 'allName', label: '全称'},
|
||
],
|
||
projectTypeList: [
|
||
{id: '1', name: '单项'},
|
||
{id: '2', name: '团体'},
|
||
],
|
||
menWomenList: [
|
||
{id: 1, name: '男子'},
|
||
{id: 2, name: '女子'},
|
||
],
|
||
formRules: {
|
||
exerciseType: [{required: true, message: '必填', trigger: ['change', 'blur']}],
|
||
projectType: [{required: true, message: '必填', trigger: ['change', 'blur']}],
|
||
/* competitionCategory: [{required: true, message: '必填', trigger: ['change', 'blur']}],
|
||
distance: [{required: true, message: '必填', trigger: ['change', 'blur']}],
|
||
exerciseType: [{required: true, message: '必填', trigger: ['change', 'blur']}],
|
||
*/
|
||
},
|
||
}
|
||
},
|
||
components: {
|
||
'guava': httpVueLoader('/components/plugins/Guava.vue'),
|
||
},
|
||
methods: {
|
||
async doAssignmentDate() {
|
||
const aa = this.pageForm.isMenWomen.map(v => {
|
||
if (v == 5) {
|
||
return true
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
if (aa.find(v => v == true) || this.pageForm.isMenWomen.length == 0) {
|
||
this.$notify({
|
||
title: '警告',
|
||
message: '只能设置单项项目',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
|
||
if (this.pageForm.ageDate == null) {
|
||
this.$notify({
|
||
title: '警告',
|
||
message: '请选择需要赋值的时间段',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
const confirm = await this.$confirm('确定要统一给单项的项目赋年龄限制吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
if (confirm === "confirm") {
|
||
const data = await $.post(loc() + "/doAssignmentDate", {
|
||
startAgeDate: this.pageForm.ageDate[0],
|
||
endAgeDate: this.pageForm.ageDate[1],
|
||
eventIds: JSON.stringify(this.tableData.map(v => v.id))
|
||
})
|
||
this.$notify.success({title: '成功', message: data.msg});
|
||
this.doSearch()
|
||
}
|
||
|
||
|
||
},
|
||
dropdownCommand(command) {
|
||
const {type, row} = command
|
||
if (type === 'edit') {
|
||
this.openEdit(row)
|
||
} else if (type === 'delete') {
|
||
this.doDelete(row)
|
||
}
|
||
},
|
||
openAdd() {
|
||
this.$refs.guava.edit()
|
||
if (this.$refs['form']) {
|
||
this.$refs['form'].resetFields()
|
||
}
|
||
this.formData = {}
|
||
},
|
||
|
||
//查询比赛组别
|
||
async focusGroup() {
|
||
const resp = await $.post(loc() + "/focusGroup")
|
||
requestLaterFun(resp, () => {
|
||
this.groupList = resp.data;
|
||
}, () => {
|
||
this.$notify.error({title: '失败', message: resp.msg});
|
||
})
|
||
},
|
||
|
||
//查询运动类型
|
||
async exerciseType() {
|
||
const resp = await $.post(loc() + "/exerciseType")
|
||
requestLaterFun(resp, () => {
|
||
this.exerciseTypeList = resp.data;
|
||
}, () => {
|
||
this.$notify.error({title: '失败', message: resp.msg});
|
||
})
|
||
},
|
||
|
||
//查询距离
|
||
async focusDistance() {
|
||
const resp = await $.post(loc() + "/focusDistance")
|
||
requestLaterFun(resp, () => {
|
||
this.distanceList = resp.data;
|
||
}, () => {
|
||
this.$notify.error({title: '失败', message: resp.msg});
|
||
})
|
||
},
|
||
|
||
//根据运动id查询下面有哪些具体的运动项目
|
||
async changeExercise_typeList() {
|
||
const resp = await $.post(loc() + "/changeExercise_typeList", {exerciseType: this.formData.exerciseType})
|
||
requestLaterFun(resp, () => {
|
||
this.exerciseTypeList2 = resp.data;
|
||
}, () => {
|
||
this.$notify.error({title: '失败', message: resp.msg});
|
||
})
|
||
},
|
||
doAdd() {
|
||
this.$refs["form"].validate(async (valid) => {
|
||
if (valid) {
|
||
let allName = '';
|
||
|
||
this.menWomenList.find(v => {
|
||
if (v.id === this.formData.isMenWomen) {
|
||
allName += v.name
|
||
}
|
||
})
|
||
|
||
|
||
this.groupList.find(v => {
|
||
if (v.id === this.formData.competitionCategory) {
|
||
allName += v.name
|
||
}
|
||
})
|
||
|
||
this.distanceList.find(v => {
|
||
if (v.id === this.formData.distance) {
|
||
allName += v.name + '米'
|
||
}
|
||
})
|
||
|
||
/* this.exerciseTypeList.find(v => {
|
||
if (v.id === this.formData.exerciseType) {
|
||
allName += v.name
|
||
}
|
||
})*/
|
||
|
||
this.exerciseTypeList2.find(v => {
|
||
if (v.id === this.formData.sports) {
|
||
allName += v.name
|
||
}
|
||
})
|
||
|
||
this.projectTypeList.find(v => {
|
||
if (v.id === this.formData.projectType) {
|
||
allName += "(" + v.name + ")"
|
||
}
|
||
})
|
||
|
||
|
||
this.formData.allName = allName
|
||
if (this.formData.ageDate && this.formData.ageDate.length > 0) {
|
||
this.formData.startAgeDate = this.formData.ageDate[0]
|
||
this.formData.endAgeDate = this.formData.ageDate[1]
|
||
}
|
||
|
||
|
||
this.loading = true
|
||
const resp = await $.post(loc() + "/doAdd", this.formData)
|
||
requestLaterMsgFun(this, resp, () => {
|
||
this.pageData();
|
||
this.$refs.guava.index()
|
||
}, (data, msg) => {
|
||
this.$message.error(msg);
|
||
})
|
||
}
|
||
})
|
||
},
|
||
pageData() {
|
||
sublime.showLoadingbar();
|
||
this.tabLoading = true
|
||
const pageForm = clone(this.pageForm)
|
||
pageForm.isMenWomen = JSON.stringify(pageForm.isMenWomen)
|
||
$.post(base + "/platform/activity/basic/event/pageData", pageForm, (data) => {
|
||
sublime.closeLoadingbar();
|
||
this.tabLoading = false
|
||
if (data.code == 0) {
|
||
this.tableData = data.data.list;
|
||
this.pageForm.totalCount = data.data.totalCount;
|
||
} else {
|
||
this.$message({
|
||
message: data.msg,
|
||
type: 'error'
|
||
});
|
||
}
|
||
}, "json");
|
||
},
|
||
async switchChange(data) {
|
||
this.formData = data
|
||
const resp = await $.post(loc() + "/doEdit", this.formData)
|
||
requestLaterFun(resp, () => {
|
||
this.$notify.success({title: '成功', message: resp.msg});
|
||
}, () => {
|
||
this.$notify.error({title: '失败', message: resp.msg});
|
||
}, () => {
|
||
this.pageData()
|
||
})
|
||
},
|
||
doEdit() {
|
||
this.$refs["form"].validate(async (valid) => {
|
||
if (valid) {
|
||
let allName = '';
|
||
|
||
this.menWomenList.find(v => {
|
||
if (v.id === this.formData.isMenWomen) {
|
||
allName += v.name
|
||
}
|
||
})
|
||
|
||
|
||
this.groupList.find(v => {
|
||
if (v.id === this.formData.competitionCategory) {
|
||
allName += v.name
|
||
}
|
||
})
|
||
|
||
this.distanceList.find(v => {
|
||
if (v.id === this.formData.distance) {
|
||
allName += v.name + '米'
|
||
}
|
||
})
|
||
|
||
/* this.exerciseTypeList.find(v => {
|
||
if (v.id === this.formData.exerciseType) {
|
||
allName += v.name
|
||
}
|
||
})*/
|
||
|
||
this.exerciseTypeList2.find(v => {
|
||
if (v.id === this.formData.sports) {
|
||
allName += v.name
|
||
}
|
||
})
|
||
|
||
this.projectTypeList.find(v => {
|
||
if (v.id === this.formData.projectType) {
|
||
allName += "(" + v.name + ")"
|
||
}
|
||
})
|
||
|
||
|
||
this.formData.allName = allName
|
||
if (this.formData.ageDate && this.formData.ageDate.length > 0) {
|
||
this.formData.startAgeDate = this.formData.ageDate[0]
|
||
this.formData.endAgeDate = this.formData.ageDate[1]
|
||
}
|
||
|
||
this.loading = true
|
||
const resp = await $.post(loc() + "/doEdit", this.formData)
|
||
requestLaterMsgFun(this, resp, () => {
|
||
this.pageData();
|
||
this.$refs.guava.index()
|
||
}, (data, msg) => {
|
||
this.$message.error(msg);
|
||
})
|
||
}
|
||
});
|
||
},
|
||
openEdit(data) {
|
||
this.focusGroup()
|
||
this.exerciseType()
|
||
this.focusDistance()
|
||
this.formData = {
|
||
id: data.id,
|
||
isInterest: data.isInterest,
|
||
competitionCategory: data.competitionCategory,
|
||
distance: data.distance,
|
||
exerciseType: data.exerciseType,
|
||
sports: data.sports,
|
||
projectType: data.projectType,
|
||
note: data.note,
|
||
isMenWomen: data.isMenWomen
|
||
|
||
}
|
||
if (data.startAgeDate != null) {
|
||
this.$set(this.formData, "ageDate", [data.startAgeDate, data.endAgeDate])
|
||
}
|
||
|
||
this.changeExercise_typeList()
|
||
this.$refs.guava.edit()
|
||
},
|
||
doDelete(row) {
|
||
const {id} = row
|
||
this.$confirm('确定要删除该活动吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
callback: async (a, b) => {
|
||
if ("confirm" === a) {//确认后再执行
|
||
|
||
this.$set(row, "loading", true)
|
||
|
||
const resp = await $.post(loc() + "/doDelete", {id: id});
|
||
|
||
requestLaterMsgFun(vue, resp, async () => {
|
||
this.pageData()
|
||
}, () => {
|
||
}, () => {
|
||
this.$set(row, "loading", false)
|
||
})
|
||
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
async created() {
|
||
this.pageData()
|
||
}
|
||
})
|
||
</script>
|
||
|
||
|
||
<!--#
|
||
}
|
||
#-->
|