11 changed files with 552 additions and 1209 deletions
@ -1,118 +1,146 @@ |
|||||
<template> |
<template> |
||||
<el-row> |
<div class="container"> |
||||
<el-col :span="24" style="margin-bottom: 10px;"> |
<div class="title">修改轮播图</div> |
||||
<div class="grid-content bg-purple-dark"> |
<el-form :model="formLabelAlign" ref="formLabelAlign" label-width="100px" class="demo-ruleForm"> |
||||
<el-col :span="12"> |
<el-form-item label="图片："> |
||||
<div class="grid-content bg-purple">分润对象:</div> |
<el-upload |
||||
</el-col> |
class="avatar-uploader" |
||||
<el-col :span="12"> |
:action="`${BASE_API}/file/upload`" |
||||
<div class="grid-content bg-purple-light">分润比例:</div> |
:show-file-list="false" |
||||
</el-col> |
:on-success="handleAvatarSuccess" |
||||
</div> |
:before-upload="beforeAvatarUpload" |
||||
</el-col> |
> |
||||
<el-col :span="24" v-for="(item,index) in lists" style="margin-bottom: 10px;"> |
<img v-if="formLabelAlign.url" :src="formLabelAlign.url" class="avatar w-full"> |
||||
<el-form :inline="true" class="demo-form-inline"> |
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
||||
<div class="grid-content bg-purple-dark"> |
</el-upload> |
||||
<el-row :gutter="15"> |
</el-form-item> |
||||
<el-col :span="10"> |
<el-form-item label="位置："> |
||||
<div class="grid-content bg-purple"> |
<el-cascader |
||||
<el-select v-model="item.userId" :value="item.userId" placeholder="选择分润对象"> |
v-model="formLabelAlign.showPage" |
||||
<el-option v-for="opi in accounts" :label="opi.name" :value="opi.id"></el-option> |
:props="props" |
||||
</el-select> |
:options="tabList" |
||||
</div> |
@change="handleChange"> |
||||
</el-col> |
</el-cascader> |
||||
<el-col :span="10"> |
</el-form-item> |
||||
<div class="grid-content bg-purple-light"> |
<el-form-item label="状态："> |
||||
<el-input placeholder="" @input="limitMax(item.rate,index)" v-model="item.rate" max="100" min="1"></el-input> |
<el-radio-group v-model="formLabelAlign.recStatus" @change="changeStatus"> |
||||
</div> |
<el-radio :label="0">正常</el-radio> |
||||
</el-col> |
<el-radio :label="1">禁用</el-radio> |
||||
<el-col :span="4"> |
</el-radio-group> |
||||
<div class="grid-content bg-purple-light"> |
</el-form-item> |
||||
<el-button type="danger" @click="deleteObj(index)" icon="el-icon-delete"></el-button> |
<el-form-item> |
||||
</div> |
<el-button type="primary" @click="updateCarousel(formLabelAlign)">确定</el-button> |
||||
</el-col> |
<el-button @click="$emit('close')">取消</el-button> |
||||
|
</el-form-item> |
||||
</el-row> |
|
||||
</div> |
|
||||
</el-form> |
</el-form> |
||||
</el-col> |
</div> |
||||
<el-button @click="addObj">添加分润对象</el-button> |
|
||||
</el-row> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import {GET_ACCOUNT_LIST} from '@/api/privilegeManagement' |
import {BASE_API} from '../../config'; |
||||
import {DETAIL_FIELD_LIST} from '@/api/distribution' |
import {tabList} from '../../filters/code'; |
||||
|
import { |
||||
|
UPDATE_CAROUSEL, |
||||
|
} from '@/api/carousel'; |
||||
import Alert from "@/utils/alert"; |
import Alert from "@/utils/alert"; |
||||
|
|
||||
export default { |
export default { |
||||
name: "detailsOfDistribution", |
name: "detailsOfDistribution", |
||||
props: ['currId'], |
props: ['currList'], |
||||
data() { |
data() { |
||||
return { |
return { |
||||
lists: [], |
labelPosition: 'right', |
||||
accounts: [] |
formLabelAlign: { |
||||
} |
url: '', |
||||
|
showPage: ['00', '0000'], |
||||
|
recStatus: '' |
||||
|
}, |
||||
|
BASE_API, |
||||
|
tabList, |
||||
|
props: { |
||||
|
value: 'code', |
||||
|
label: 'title', |
||||
|
children: 'children' |
||||
}, |
}, |
||||
watch: { |
|
||||
currId() { |
|
||||
|
|
||||
} |
} |
||||
}, |
}, |
||||
|
|
||||
mounted() { |
mounted() { |
||||
this.getAccounts(); |
if(!this.currList) return |
||||
this.getDetail(); |
const { url, showPage, recStatus } = this.currList |
||||
|
this.formLabelAlign.url = url; |
||||
|
this.formLabelAlign.showPage[0] = showPage.slice(0, 2); |
||||
|
this.formLabelAlign.showPage[1] = showPage; |
||||
|
this.formLabelAlign.recStatus = recStatus; |
||||
}, |
}, |
||||
|
|
||||
methods: { |
methods: { |
||||
getDetail() { |
|
||||
let params = { |
|
||||
id: this.currId |
|
||||
}; |
|
||||
DETAIL_FIELD_LIST(params).then(res => { |
|
||||
this.lists = res |
|
||||
}) |
|
||||
}, |
|
||||
/** |
/** |
||||
* 添加分润对象 |
* 上传预览图 |
||||
|
* @param {*} res |
||||
|
* @param {*} file |
||||
*/ |
*/ |
||||
addObj() { |
handleAvatarSuccess(res) { |
||||
let obj = { |
if (res.data && res.data.path) { |
||||
userId: '', |
this.formLabelAlign.url = res.data.path; |
||||
rate: '' |
} |
||||
}; |
}, |
||||
this.lists.push(obj) |
beforeAvatarUpload(file) { |
||||
|
// const isJPG = file.type === 'image/jpeg'; |
||||
|
// if (!isJPG) { |
||||
|
// ElMessage.error('上传头像图片只能是 JPG 格式!'); |
||||
|
// } |
||||
|
const isLt2M = file.size / 1024 / 1024 < 2; |
||||
|
if (!isLt2M) { |
||||
|
ElMessage.error('上传头像图片大小不能超过 2MB!'); |
||||
|
} |
||||
|
return isLt2M; |
||||
|
}, |
||||
|
|
||||
|
// 位置选择 |
||||
|
handleChange(value) { |
||||
|
console.log(value); |
||||
|
this.formLabelAlign.showPage = value |
||||
|
}, |
||||
|
|
||||
|
// 修改状态 |
||||
|
changeStatus(value){ |
||||
|
console.log('value: ', value); |
||||
|
this.formLabelAlign.recStatus = value; |
||||
}, |
}, |
||||
|
|
||||
/** |
/** |
||||
* 删除分润对象 |
* 修改轮播图 |
||||
*/ |
*/ |
||||
deleteObj(idx) { |
async updateCarousel(formName){ |
||||
let lists = []; |
console.log('formName: ', formName); |
||||
this.lists.map((item, index) => { |
const { url, showPage, recStatus } = formName; |
||||
if (idx != index) { |
const { id } = this.currList; |
||||
lists.push(item) |
const params = { |
||||
|
id, |
||||
|
url, |
||||
|
showPage: showPage[1], |
||||
|
recStatus |
||||
|
}; |
||||
|
await UPDATE_CAROUSEL(params).then((res) => { |
||||
|
if(res.code === 200){ |
||||
|
Alert.success('修改成功'); |
||||
|
this.$emit('close', true) |
||||
|
}else{ |
||||
|
Alert.fail(res.msg || '修改失败'); |
||||
} |
} |
||||
return item; |
|
||||
}); |
|
||||
this.lists = lists |
|
||||
}, |
|
||||
getAccounts() { |
|
||||
GET_ACCOUNT_LIST().then(res => { |
|
||||
this.accounts = res; |
|
||||
}) |
}) |
||||
}, |
|
||||
limitMax(val, idx) { |
|
||||
if (val >= 100 || val <= 0) { |
|
||||
Alert.fail('值不能大于100,小于0'); |
|
||||
val = '' |
|
||||
} |
|
||||
|
|
||||
this.lists[idx].rate = val; |
|
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style rel="stylesheet/scss" lang="scss" scoped> |
<style lang="scss" scoped> |
||||
|
.title{ |
||||
|
width: 100%; |
||||
|
margin-bottom: 30px; |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
text-align: center; |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
@ -1,118 +0,0 @@ |
|||||
<template> |
|
||||
<el-row> |
|
||||
<el-col :span="24" style="margin-bottom: 10px;"> |
|
||||
<div class="grid-content bg-purple-dark"> |
|
||||
<el-col :span="12"> |
|
||||
<div class="grid-content bg-purple">分润对象:</div> |
|
||||
</el-col> |
|
||||
<el-col :span="12"> |
|
||||
<div class="grid-content bg-purple-light">分润比例:</div> |
|
||||
</el-col> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :span="24" v-for="(item,index) in lists" style="margin-bottom: 10px;"> |
|
||||
<el-form :inline="true" class="demo-form-inline"> |
|
||||
<div class="grid-content bg-purple-dark"> |
|
||||
<el-row :gutter="15"> |
|
||||
<el-col :span="10"> |
|
||||
<div class="grid-content bg-purple"> |
|
||||
<el-select v-model="item.userId" :value="item.userId" placeholder="选择分润对象"> |
|
||||
<el-option v-for="opi in accounts" :label="opi.name" :value="opi.id"></el-option> |
|
||||
</el-select> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :span="10"> |
|
||||
<div class="grid-content bg-purple-light"> |
|
||||
<el-input placeholder="" @input="limitMax(item.rate,index)" v-model="item.rate" max="100" min="1"></el-input> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :span="4"> |
|
||||
<div class="grid-content bg-purple-light"> |
|
||||
<el-button type="danger" @click="deleteObj(index)" icon="el-icon-delete"></el-button> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
|
|
||||
</el-row> |
|
||||
</div> |
|
||||
</el-form> |
|
||||
</el-col> |
|
||||
<el-button @click="addObj">添加分润对象</el-button> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import {GET_ACCOUNT_LIST} from '@/api/privilegeManagement' |
|
||||
import {DETAIL_FIELD_LIST} from '@/api/distribution' |
|
||||
import Alert from "@/utils/alert"; |
|
||||
|
|
||||
export default { |
|
||||
name: "detailsOfDistribution", |
|
||||
props: ['currId'], |
|
||||
data() { |
|
||||
return { |
|
||||
lists: [], |
|
||||
accounts: [] |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
currId() { |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.getAccounts(); |
|
||||
this.getDetail(); |
|
||||
}, |
|
||||
methods: { |
|
||||
getDetail() { |
|
||||
let params = { |
|
||||
id: this.currId |
|
||||
}; |
|
||||
DETAIL_FIELD_LIST(params).then(res => { |
|
||||
this.lists = res |
|
||||
}) |
|
||||
}, |
|
||||
/** |
|
||||
* 添加分润对象 |
|
||||
*/ |
|
||||
addObj() { |
|
||||
let obj = { |
|
||||
userId: '', |
|
||||
rate: '' |
|
||||
}; |
|
||||
this.lists.push(obj) |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 删除分润对象 |
|
||||
*/ |
|
||||
deleteObj(idx) { |
|
||||
let lists = []; |
|
||||
this.lists.map((item, index) => { |
|
||||
if (idx != index) { |
|
||||
lists.push(item) |
|
||||
} |
|
||||
return item; |
|
||||
}); |
|
||||
this.lists = lists |
|
||||
}, |
|
||||
getAccounts() { |
|
||||
GET_ACCOUNT_LIST().then(res => { |
|
||||
this.accounts = res; |
|
||||
}) |
|
||||
}, |
|
||||
limitMax(val, idx) { |
|
||||
if (val >= 100 || val <= 0) { |
|
||||
Alert.fail('值不能大于100,小于0'); |
|
||||
val = '' |
|
||||
} |
|
||||
|
|
||||
this.lists[idx].rate = val; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style rel="stylesheet/scss" lang="scss" scoped> |
|
||||
|
|
||||
</style> |
|
||||
@ -1,60 +0,0 @@ |
|||||
<template> |
|
||||
<div class="form-container"> |
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline"> |
|
||||
<el-form-item label="场地"> |
|
||||
<el-select v-model="formInline.locationId" value="" placeholder="场地"> |
|
||||
<el-option label="全部" value=""></el-option> |
|
||||
<el-option v-for="item in locationId" :label="item.name" :value="item.id"></el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item style="padding-left:30px"> |
|
||||
<el-button type="default" @click="resetForm1('formInline')">重置</el-button> |
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import {GET_LOCATIONS} from '@/api/common' |
|
||||
|
|
||||
export default { |
|
||||
name: 'form-container', |
|
||||
props: ['label'], |
|
||||
data() { |
|
||||
return { |
|
||||
formInline: { |
|
||||
locationId: '' |
|
||||
}, |
|
||||
locationId: '' |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.getLocationId(); |
|
||||
}, |
|
||||
methods: { |
|
||||
getLocationId() { |
|
||||
GET_LOCATIONS().then(res => { |
|
||||
this.locationId = res |
|
||||
}) |
|
||||
}, |
|
||||
onSubmit() { |
|
||||
this.$emit('submit', this.formInline) |
|
||||
}, |
|
||||
resetForm1() { |
|
||||
this.formInline = { |
|
||||
name: '' |
|
||||
}; |
|
||||
this.$emit('resetForm'); |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style rel="stylesheet/scss" lang="scss" scoped> |
|
||||
.form-container { |
|
||||
padding: 20px; |
|
||||
background: #fff; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,118 +0,0 @@ |
|||||
<template> |
|
||||
<el-row> |
|
||||
<el-col :span="24" style="margin-bottom: 10px;"> |
|
||||
<div class="grid-content bg-purple-dark"> |
|
||||
<el-col :span="12"> |
|
||||
<div class="grid-content bg-purple">分润对象:</div> |
|
||||
</el-col> |
|
||||
<el-col :span="12"> |
|
||||
<div class="grid-content bg-purple-light">分润比例:</div> |
|
||||
</el-col> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :span="24" v-for="(item,index) in lists" style="margin-bottom: 10px;"> |
|
||||
<el-form :inline="true" class="demo-form-inline"> |
|
||||
<div class="grid-content bg-purple-dark"> |
|
||||
<el-row :gutter="15"> |
|
||||
<el-col :span="10"> |
|
||||
<div class="grid-content bg-purple"> |
|
||||
<el-select v-model="item.userId" :value="item.userId" placeholder="选择分润对象"> |
|
||||
<el-option v-for="opi in accounts" :label="opi.name" :value="opi.id"></el-option> |
|
||||
</el-select> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :span="10"> |
|
||||
<div class="grid-content bg-purple-light"> |
|
||||
<el-input placeholder="" @input="limitMax(item.rate,index)" v-model="item.rate" max="100" min="1"></el-input> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :span="4"> |
|
||||
<div class="grid-content bg-purple-light"> |
|
||||
<el-button type="danger" @click="deleteObj(index)" icon="el-icon-delete"></el-button> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
|
|
||||
</el-row> |
|
||||
</div> |
|
||||
</el-form> |
|
||||
</el-col> |
|
||||
<el-button @click="addObj">添加分润对象</el-button> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import {GET_ACCOUNT_LIST} from '@/api/privilegeManagement' |
|
||||
import {DETAIL_FIELD_LIST} from '@/api/distribution' |
|
||||
import Alert from "@/utils/alert"; |
|
||||
|
|
||||
export default { |
|
||||
name: "detailsOfDistribution", |
|
||||
props: ['currId'], |
|
||||
data() { |
|
||||
return { |
|
||||
lists: [], |
|
||||
accounts: [] |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
currId() { |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.getAccounts(); |
|
||||
this.getDetail(); |
|
||||
}, |
|
||||
methods: { |
|
||||
getDetail() { |
|
||||
let params = { |
|
||||
id: this.currId |
|
||||
}; |
|
||||
DETAIL_FIELD_LIST(params).then(res => { |
|
||||
this.lists = res |
|
||||
}) |
|
||||
}, |
|
||||
/** |
|
||||
* 添加分润对象 |
|
||||
*/ |
|
||||
addObj() { |
|
||||
let obj = { |
|
||||
userId: '', |
|
||||
rate: '' |
|
||||
}; |
|
||||
this.lists.push(obj) |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 删除分润对象 |
|
||||
*/ |
|
||||
deleteObj(idx) { |
|
||||
let lists = []; |
|
||||
this.lists.map((item, index) => { |
|
||||
if (idx != index) { |
|
||||
lists.push(item) |
|
||||
} |
|
||||
return item; |
|
||||
}); |
|
||||
this.lists = lists |
|
||||
}, |
|
||||
getAccounts() { |
|
||||
GET_ACCOUNT_LIST().then(res => { |
|
||||
this.accounts = res; |
|
||||
}) |
|
||||
}, |
|
||||
limitMax(val, idx) { |
|
||||
if (val >= 100 || val <= 0) { |
|
||||
Alert.fail('值不能大于100,小于0'); |
|
||||
val = '' |
|
||||
} |
|
||||
|
|
||||
this.lists[idx].rate = val; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style rel="stylesheet/scss" lang="scss" scoped> |
|
||||
|
|
||||
</style> |
|
||||
@ -1,60 +0,0 @@ |
|||||
<template> |
|
||||
<div class="form-container"> |
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline"> |
|
||||
<el-form-item label="场地"> |
|
||||
<el-select v-model="formInline.locationId" value="" placeholder="场地"> |
|
||||
<el-option label="全部" value=""></el-option> |
|
||||
<el-option v-for="item in locationId" :label="item.name" :value="item.id"></el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item style="padding-left:30px"> |
|
||||
<el-button type="default" @click="resetForm1('formInline')">重置</el-button> |
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import {GET_LOCATIONS} from '@/api/common' |
|
||||
|
|
||||
export default { |
|
||||
name: 'form-container', |
|
||||
props: ['label'], |
|
||||
data() { |
|
||||
return { |
|
||||
formInline: { |
|
||||
locationId: '' |
|
||||
}, |
|
||||
locationId: '' |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.getLocationId(); |
|
||||
}, |
|
||||
methods: { |
|
||||
getLocationId() { |
|
||||
GET_LOCATIONS().then(res => { |
|
||||
this.locationId = res |
|
||||
}) |
|
||||
}, |
|
||||
onSubmit() { |
|
||||
this.$emit('submit', this.formInline) |
|
||||
}, |
|
||||
resetForm1() { |
|
||||
this.formInline = { |
|
||||
name: '' |
|
||||
}; |
|
||||
this.$emit('resetForm'); |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style rel="stylesheet/scss" lang="scss" scoped> |
|
||||
.form-container { |
|
||||
padding: 20px; |
|
||||
background: #fff; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,269 +1,40 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div class="pa-4 white"> |
||||
<form-container @submit="submitForm" @resetForm="resetForm"></form-container> |
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick(activeName)"> |
||||
<div class="table"> |
<el-tab-pane label="轮播图管理" name="IMAGE"> |
||||
<el-table |
<banner :showPage="showPage" /> |
||||
:data="lists" |
</el-tab-pane> |
||||
style="width: 100%"> |
<el-tab-pane label="详情页管理" name="DETAIL"> |
||||
<el-table-column |
<detail /> |
||||
prop="name" |
</el-tab-pane> |
||||
label="场地图片"> |
</el-tabs> |
||||
<template slot-scope="lists"> |
|
||||
<img :src="lists.row.image" width="70" height="70" alt=""> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
prop="name" |
|
||||
label="名称"> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
prop="locationName" |
|
||||
label="场地地址"> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
prop="users" |
|
||||
label="分润人数"> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
prop="stateText" |
|
||||
label="状态"> |
|
||||
</el-table-column> |
|
||||
|
|
||||
<el-table-column |
|
||||
fixed="right" |
|
||||
label="操作" |
|
||||
> |
|
||||
<template slot-scope="lists"> |
|
||||
<span |
|
||||
type="text" |
|
||||
size="small" |
|
||||
class="option-span" |
|
||||
@click="suspensionOfRelease(lists.row.id,lists.row.enabled)" |
|
||||
> |
|
||||
<span>{{lists.row.enabled==true?"暂停":"发布"}}</span> |
|
||||
</span> |
|
||||
<span |
|
||||
type="text" |
|
||||
size="small" |
|
||||
style="margin: 0 5px;" |
|
||||
class="option-span" |
|
||||
@click="editModal(lists.row.id)" |
|
||||
> |
|
||||
<span>编辑</span> |
|
||||
</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<div class="pagination"> |
|
||||
<el-pagination |
|
||||
background |
|
||||
:page-size="params.size" |
|
||||
layout="prev, pager, next" |
|
||||
:total="count" |
|
||||
@current-change="currentChange" |
|
||||
> |
|
||||
</el-pagination> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<el-dialog |
|
||||
width="400px" |
|
||||
:show-close="false" |
|
||||
:visible.sync="isEdit"> |
|
||||
<details-of-distribution ref="distribution" :currId="id" v-if="isEdit"></details-of-distribution> |
|
||||
<div slot="footer" class="dialog-footer"> |
|
||||
<el-button @click="isEdit = false">取消</el-button> |
|
||||
<el-button type="primary" @click="determine('ruleForm')">确定</el-button> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
|
|
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
const FormContainer = () => import('./form.vue'); |
import Banner from '@/components/Banner'; |
||||
const DetailsOfDistribution = () => import('./detailsOfDistribution.vue'); |
import Detail from '@/components/Detail'; |
||||
import { |
|
||||
GET_FIELD_LIST, |
|
||||
POST_FIELD_LIST, |
|
||||
ENABLE_FIELD_LIST, |
|
||||
DISABLE_FIELD_LIST, |
|
||||
COUNT_FIELD_LIST |
|
||||
} from '@/api/distribution' |
|
||||
import Alert from "@/utils/alert"; |
|
||||
import {pageSize} from '../../config'; |
|
||||
|
|
||||
export default { |
export default { |
||||
name: "index", |
name: "index", |
||||
|
components: { |
||||
|
Banner, |
||||
|
Detail |
||||
|
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
count: 0, |
activeName: 'IMAGE', |
||||
id: '', |
showPage: '0000' |
||||
isEdit: false, |
|
||||
lists: [], |
|
||||
params: { |
|
||||
from: 0, |
|
||||
size: pageSize, |
|
||||
locationId: '' |
|
||||
} |
} |
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.getList() |
|
||||
}, |
|
||||
components: { |
|
||||
FormContainer, |
|
||||
DetailsOfDistribution |
|
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
submitForm(res) { |
handleClick() { |
||||
this.params = { |
console.log('切换tab'); |
||||
...this.params, |
|
||||
locationId: res.locationId, |
|
||||
}; |
|
||||
this.getList() |
|
||||
}, |
|
||||
resetForm() { |
|
||||
this.params = { |
|
||||
from: 0, |
|
||||
size: pageSize, |
|
||||
locationId: '' |
|
||||
}; |
|
||||
this.getList() |
|
||||
}, |
|
||||
getList() { |
|
||||
GET_FIELD_LIST(this.params).then(res => { |
|
||||
res.map((item) => { |
|
||||
item.stateText = item.enabled ? '生效中' : '失效中'; |
|
||||
item.locationName = item.province + item.city + item.district + item.name; |
|
||||
return item |
|
||||
}); |
|
||||
this.lists = res |
|
||||
}); |
|
||||
|
|
||||
COUNT_FIELD_LIST(this.params).then(res => { |
|
||||
this.count = res |
|
||||
}) |
|
||||
}, |
}, |
||||
|
|
||||
/** |
|
||||
* 分页 |
|
||||
*/ |
|
||||
currentChange(res) { |
|
||||
this.params = { |
|
||||
...this.params, |
|
||||
from: parseInt(res - 1) * this.params.size, |
|
||||
size: pageSize, |
|
||||
}; |
|
||||
this.getList() |
|
||||
}, |
|
||||
|
|
||||
editModal(id) { |
|
||||
this.isEdit = true; |
|
||||
this.id = id; |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 状态操作 |
|
||||
*/ |
|
||||
suspensionOfRelease(id, enabled) { |
|
||||
if (enabled) { |
|
||||
this.PUBLISHED(id) |
|
||||
} else { |
|
||||
this.PAUSEDANDPENDING(id) |
|
||||
} |
|
||||
}, |
|
||||
/** |
|
||||
* 已发布 |
|
||||
* @constructor |
|
||||
*/ |
|
||||
PUBLISHED(id) { |
|
||||
let params = { |
|
||||
id |
|
||||
}; |
|
||||
DISABLE_FIELD_LIST(params).then((res) => { |
|
||||
let lists = []; |
|
||||
this.lists.map((item) => { |
|
||||
if (item.id == id) { |
|
||||
item.stateText = '失效中'; |
|
||||
item.enabled = false; |
|
||||
} |
|
||||
lists.push(item); |
|
||||
return item; |
|
||||
}); |
|
||||
this.lists = lists; |
|
||||
Alert.success("已失效"); |
|
||||
}); |
|
||||
}, |
|
||||
/** |
|
||||
* 已暂停或者待发布 |
|
||||
* @constructor |
|
||||
*/ |
|
||||
PAUSEDANDPENDING(id) { |
|
||||
let params = { |
|
||||
id |
|
||||
}; |
|
||||
ENABLE_FIELD_LIST(params).then((res) => { |
|
||||
let lists = []; |
|
||||
this.lists.map((item) => { |
|
||||
if (item.id == id) { |
|
||||
item.stateText = '生效中'; |
|
||||
item.enabled = true; |
|
||||
} |
|
||||
lists.push(item); |
|
||||
return item; |
|
||||
}); |
|
||||
this.lists = lists; |
|
||||
Alert.success("已生效"); |
|
||||
}); |
|
||||
}, |
|
||||
determine() { |
|
||||
let that = this; |
|
||||
let child = this.$refs.distribution.lists; |
|
||||
let params = { |
|
||||
id: this.id, |
|
||||
items: child |
|
||||
}; |
|
||||
|
|
||||
for (let index in child) { |
|
||||
if (!child[index].rate || !child[index].userId) { |
|
||||
Alert.fail("值不能为空"); |
|
||||
return false; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
for (let i = 0; i < child.length; i++) { |
|
||||
for (let j = i + 1; j < child.length; j++) { |
|
||||
if (child[i].userId == child[j].userId) { |
|
||||
Alert.fail("分润对象不能一样"); |
|
||||
return false; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
POST_FIELD_LIST(params).then(res => { |
|
||||
Alert.success("添加成功"); |
|
||||
that.isEdit = false; |
|
||||
that.getList(); |
|
||||
}); |
|
||||
} |
|
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style rel="stylesheet/scss" lang="scss" scoped> |
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
.table { |
|
||||
margin-top: 20px; |
|
||||
padding: 30px; |
|
||||
background: #fff; |
|
||||
|
|
||||
.option-span { |
|
||||
color: #a90500; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.pagination { |
|
||||
margin-top: 20px; |
|
||||
} |
|
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue