/**
?* 活動菜單 活動列表
?* 注釋菜單
?* 最后修改 2020/8/8 10:25
?* HTML組成：上中下結(jié)構(gòu) ? ? ?上為導(dǎo)航 ? ? ?中為展示列表 ? ?下為分頁表
?* JS：?
?* ? loadActSize 用于載入獲取到一共有多少個活動的API接口 方法為Get
?* ? loadActByPage 用于載入獲取單頁的活動
?* ? cancelAct 用于撤銷刪除活動
?* ? editAct ?用于編輯改變活動（在這里封裝后用于將活動的in_banner）屬性轉(zhuǎn)變?yōu)閠rue 從而添加至輪播圖
?* ? Pagination 為組件中的分頁組件 （element-UI）
?* ? data屬性：
?* ? ? formInline 用于儲存分頁的頁數(shù)內(nèi)容
?* ? ? addToBannerI 用于儲存添加至輪播圖的內(nèi)容
?* ? ? dialogFormVisible 用于控制撤銷原因填寫框是否出現(xiàn)
?* ? ? form 儲存撤銷原因和活動ID
?* ? ? listData 用于儲存列表中的數(shù)據(jù)
?* ? ? pageparm 分頁參數(shù)
?* ? method：
?* ? ? created 創(chuàng)建時調(diào)用getdata方法獲取數(shù)據(jù)
?* ? ? addToBanner 將活動添加到輪播圖
?* ? ? getdata 調(diào)用獲取到一頁的輪播圖列表
?* ? ? callFather 更新分頁參數(shù)
?* ? ? deleteActivity 撤銷活動
?* ? ? jump 跳轉(zhuǎn)到新的頁面
?* CSS:
?* ? ?user-search 搜索欄的屬性?
?*/
<template>
? <div>
? ? <!-- 面包屑導(dǎo)航 -->
? ? <el-breadcrumb separator-class="el-icon-arrow-right">
? ? ? <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
? ? ? <el-breadcrumb-item>活動列表</el-breadcrumb-item>
? ? </el-breadcrumb>
? ? <!-- 搜索篩選 -->
? ? <el-form :inline="true" :model="formInline" class="user-search">
? ? ? <el-form-item label="搜索：">
? ? ? ? <el-input size="small" v-model="formInline.deptName" placeholder="輸入活動名稱"></el-input>
? ? ? </el-form-item>
? ? ? <el-form-item>
? ? ? ? <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
? ? ? ? <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
? ? ? </el-form-item>
? ? </el-form>
? ? <!--列表-->
? ? <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加載中" style="width: 100%;">
? ? ? <el-table-column align="center" type="selection" width="60">
? ? ? </el-table-column>
? ? ? <el-table-column sortable prop="id" label="序號" width="110">
? ? ? </el-table-column>
? ? ? <el-table-column sortable prop="image" label="圖片" width="100">
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <el-image :src="scope.row.image"></el-image>
? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <el-table-column sortable prop="name" label="發(fā)起者昵稱" width="200">
? ? ? </el-table-column>
? ? ? <el-table-column sortable prop="originator_id" label="發(fā)起者id" width="100">
? ? ? </el-table-column>
? ? ? <el-table-column align="center" label="操作" min-width="300">
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <el-button size="mini" type="warning" @click="jump(scope.row.id)">查看</el-button>
? ? ? ? ? <el-button size="mini" type="warning" @click="addToBanner(scope.row)">添加至輪播圖</el-button>
? ? ? ? ? <el-button size="mini" type="danger" @click="dialogFormVisible = true">撤銷</el-button>
? ? ? ? ? <el-dialog title="收貨地址" :visible.sync="dialogFormVisible">
? ? ? ? ? ? <el-form :model="form">
? ? ? ? ? ? ? <el-form-item label="刪除原因" :label-width="formLabelWidth">
? ? ? ? ? ? ? ? <el-input v-model="form.reason" autocomplete="off"></el-input>
? ? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? </el-form>
? ? ? ? ? ? <div slot="footer" class="dialog-footer">
? ? ? ? ? ? ? <el-button @click="dialogFormVisible = false">取 消</el-button>
? ? ? ? ? ? ? <el-button type="primary" @click="deleteActivity(scope.$index,scope.row)">確 定</el-button>
? ? ? ? ? ? </div>
? ? ? ? ? </el-dialog>
? ? ? ? </template>
? ? ? </el-table-column>
? ? </el-table>
? ? <!-- 分頁組件 -->
? ? <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
? </div>
</template>

<script>
import {loadActSize,loadActByPage,cancelAct,editAct} from "../../api/basisMG"
import Pagination from '../../components/Pagination'
export default {
? data() {
? ? return {
? ? ? formInline: {
? ? ? ? page: 1,
? ? ? ? limit: 10,
? ? ? ? size:10,
? ? ? },
? ? ? addToBannerI:{
? ? ? ? actID:'',
? ? ? ? activity:{
? ? ? ? ? in_banner:true
? ? ? ? },
? ? ? ? image:{}
? ? ? },
? ? ? dialogTableVisible: false,
? ? ? dialogFormVisible: false,
? ? ? form: {
? ? ? ? ? actID:1,
? ? ? ? ? reason: '',
? ? ? ? ? date1: '',
? ? ? ? ? date2: '',
? ? ? ? ? delivery: false,
? ? ? ? ? type: [],
? ? ? ? ? resource: '',
? ? ? ? ? desc: ''
? ? ? ? },
? ? ? ? formLabelWidth: '120px',
? ? ? // 刪除
? ? ? userparm: [], //搜索權(quán)限
? ? ? listData: [], //用戶數(shù)據(jù)
? ? ? // 分頁參數(shù)
? ? ? pageparm: {
? ? ? ? currentPage: 1,
? ? ? ? pageSize: 10,
? ? ? ? total: 11
? ? ? }
? ? }
? },
? // 注冊組件
? components: {
? ? Pagination
? },
? /**
? ?* 數(shù)據(jù)發(fā)生改變
? ?*/
? /**
? ?* 創(chuàng)建完畢
? ?*/
? created() {
? ? this.getdata(this.formInline)
? },
? /**
? ?* 里面的方法只有被調(diào)用才會執(zhí)行
? ?*/
? methods: {
? ? //添加至輪播圖
? ? addToBanner(act){
? ? ? console.log(act)
? ? ? this.addToBannerI.actID=act.id
? ? ? console.log(this.addToBannerI)
? ? ? editAct(this.addToBannerI)
? ? ? .then(res=>{
? ? ? ? console.log(res)
? ? ? })
? ? },
? ? // 獲取公司列表
? ? getdata(parameter) {
? ? ??
? ? ? this.loading = true
? ? ? /***
? ? ? ?* 調(diào)用接口，注釋上面模擬數(shù)據(jù) 取消下面注釋
? ? ? ?*/
? ? ? loadActSize(parameter).then(res=>{
? ? ? ? console.log(res);
? ? ? ? this.pageparm.total = res.data
? ? ? ? loadActByPage(parameter)
? ? ? ? .then(res => {
? ? ? ? ? console.log(res);
? ? ? ? ? this.loading = false
? ? ? ? ? this.listData = res.data
? ? ? ? ? // 分頁賦值
? ? ? ? ? this.pageparm.currentPage = this.formInline.page
? ? ? ? ? this.pageparm.pageSize = this.formInline.limit
? ? ? ??
? ? ? ? })
? ? ? ? .catch(err => {
? ? ? ? ? this.loading = false
? ? ? ? ? this.$message.error('菜單加載失敗，請稍后再試！')
? ? ? ? })
? ? ? }) ?
? ? ??
? ? },
? ? callFather(parm) {
? ? ? this.formInline.page = parm.currentPage
? ? ? this.formInline.limit = parm.pageSize
? ? ? this.getdata(this.formInline)
? ? },
? ? // 搜索事件
? ? search() {
? ? ? this.getdata(this.formInline)
? ? },
? ? //刪除活動
? ? deleteActivity(index,row){
? ? ? this.dialogFormVisible = false
? ? ? this.$confirm('是否確認刪除該活動','提示',{
? ? ? ? confirmButtonText:'確定',
? ? ? ? cancelButtonText:'取消',
? ? ? ? type:'warning'
? ? ? }).then(() =>{
? ? ? ? console.log(index);
? ? ? ? console.log(this.listData)
? ? ? ? this.form.actID = this.listData[index].id
? ? ? ? cancelAct(this.form)
? ? ? ? .then(res=>{
? ? ? ? ? console.log(res)
? ? ? ? })
? ? ? ? this.$message({
? ? ? ? ? type:'success',
? ? ? ? ? message:'刪除了該活動'
? ? ? ? });
? ? ? }).catch(() =>{
? ? ? ? this.$message({
? ? ? ? ? type:'info',
? ? ? ? ? message:'已取消刪除該活動'
? ? ? ? })
? ? ? })
? ? },
? ? jump(activityId){
? ? ? ? this.$router.push({path:"/Activity/activityDetail",query:{activityId:activityId}});
? ? }
? }
}
</script>

<style scoped>
.user-search {
? margin-top: 20px;
}
.userRole {
? width: 100%;
}
</style>