cv
This commit is contained in:
liuye
223
project/biaopin/AppIntegratingTask/components/List.vue
Normal file
223
project/biaopin/AppIntegratingTask/components/List.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<ai-list class="activitiesList">
|
||||
<ai-title
|
||||
slot="title"
|
||||
title="活动管理"
|
||||
isShowBottomBorder
|
||||
isShowArea
|
||||
:hideLevel="$store.state.user.info.areaList.length - 1"
|
||||
v-model="search.areaId"
|
||||
:instance="instance"
|
||||
@change="search.current = 1, getList()">
|
||||
</ai-title>
|
||||
<template #content>
|
||||
<ai-search-bar bottomBorder>
|
||||
<template #left>
|
||||
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')" >创建活动</el-button>
|
||||
<el-date-picker
|
||||
v-model="search.beginDate"
|
||||
type="date"
|
||||
size="small"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择开始日期"
|
||||
@change="search.current = 1, getList()">
|
||||
</el-date-picker>
|
||||
<el-date-picker
|
||||
v-model="search.endDate"
|
||||
type="date"
|
||||
size="small"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择结束日期"
|
||||
@change="search.current = 1, getList()">
|
||||
</el-date-picker>
|
||||
<ai-select
|
||||
v-model="search.status"
|
||||
clearable
|
||||
placeholder="活动状态"
|
||||
:selectList="dict.getDict('fdIntegralTaskStatus')"
|
||||
@change="search.current = 1, getList()">
|
||||
</ai-select>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input
|
||||
v-model="search.title"
|
||||
size="small"
|
||||
placeholder="活动名称/创建人"
|
||||
clearable
|
||||
v-throttle="() => {getList()}"
|
||||
@clear="search.title = '', getList()"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:total="search.total"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@getList="getList"
|
||||
:col-configs="colConfigs"
|
||||
:dict="dict">
|
||||
<el-table-column slot="qrcode" width="200px" label="二维码" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="qrcode">
|
||||
<el-button type="text" @click="qrcode(row.qrCode, row.id)">{{ row.qrCode ? '预览' : '生成' }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column slot="options" label="操作" fixed="right" align="center" width="120px">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click.native="toDetail(row.id)">详情</el-button>
|
||||
<el-button type="text" :disabled="row.status ==2" @click.native="stopBtn(row.id)">结束</el-button>
|
||||
<!-- <el-button type="text" @click.native="handleDelete(row.id)">删除</el-button> -->
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
<div class="qrCode" v-viewer="{movable: true}" v-show="false">
|
||||
<img :src="img">
|
||||
</div>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
title: '',
|
||||
areaId: '',
|
||||
status: '',
|
||||
beginDate: '',
|
||||
endDate: ''
|
||||
},
|
||||
tableData: [],
|
||||
img: '',
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.search.areaId = this.$store.state.user.info.areaId
|
||||
this.$dict.load('fdIntegralTaskStatus').then(()=> {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
computed: {
|
||||
colConfigs() {
|
||||
return [
|
||||
{ prop: "title", label: "活动名称", align: "left" },
|
||||
{ prop: "areaName", label: "活动地区", align: "center" },
|
||||
{ prop: "createUserName", label: "创建人", align: "center" },
|
||||
{
|
||||
prop: "intoBegintime",
|
||||
label: "开始结束时间",
|
||||
align: "center",
|
||||
width: "400px",
|
||||
render: (h, {row}) => h('p',
|
||||
{
|
||||
textAlign: 'center'
|
||||
},
|
||||
row.exitEndtime ? `${row.intoBegintime}至${row.exitEndtime}` : row.intoBegintime)
|
||||
},
|
||||
{ prop: "status", label: "活动状态", align: "center", dict:"fdIntegralTaskStatus" },
|
||||
{ slot: "qrcode" },
|
||||
{ slot: "options", },
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance.post(`/app/appintegraltask/list`,null, {
|
||||
params: {
|
||||
...this.search,
|
||||
}
|
||||
}).then(res=> {
|
||||
if(res?.data) {
|
||||
this.tableData = res.data.records
|
||||
this.search.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toDetail (id) {
|
||||
this.$emit('change', {
|
||||
type: 'Detail',
|
||||
params: {
|
||||
id: id || '',
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toAdd(id) {
|
||||
this.$emit('change', {
|
||||
type: 'Add',
|
||||
params: {
|
||||
id: id || '',
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
qrcode (qrcode, id) {
|
||||
if (!qrcode) {
|
||||
this.isLoading = true
|
||||
this.instance.post(`/app/appintegraltask/generateQrCode?id=${id}&width=400&height=400`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('二维码生成成功！')
|
||||
this.getList()
|
||||
}
|
||||
this.isLoading = false
|
||||
})
|
||||
} else {
|
||||
this.img = qrcode
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
const viewer = this.$el.querySelector('.qrCode').$viewer
|
||||
viewer.view()
|
||||
}, 600)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
handleDelete (id) {
|
||||
this.$confirm('确定删除该活动？').then(() => {
|
||||
this.instance.post(`/app/appintegraltask/delete?ids=${id}`).then(res=>{
|
||||
if(res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
stopBtn (id) {
|
||||
this.$confirm('确定要结束该活动吗？').then(() => {
|
||||
this.instance.post(`/app/appintegraltask/stop?id=${id}`).then(res=>{
|
||||
if(res.code == 0) {
|
||||
this.$message.success('结束成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.activitiesList {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user