EXEED_manage/src/views/ReviewManage/_transEffect/index.vue

<template>
    <div class="main-content">
        <el-tabs v-model="form.status" @tab-change="statusChange">
            <el-tab-pane label="待审核" :name="1"></el-tab-pane>
            <el-tab-pane label="审核通过" :name="2"></el-tab-pane>
            <el-tab-pane label="审核不通过" :name="3"></el-tab-pane>
        </el-tabs>
       <div class="area-form">
           <el-form :inline="true" size="default">
               <el-form-item label="申请人">
                   <el-input clearable v-model="form.providerName" placeholder="请输入"></el-input>
               </el-form-item>
               <el-form-item label="部门">
                   <el-select clearable v-model="form.departmentId" placeholder="请选择">
                       <el-option v-for="(item) in departmentList" :key="item.id" :label="item.name" :value="item.departmentId">
                       </el-option>
                   </el-select>
               </el-form-item>
               <el-form-item label="任务标题">
                   <el-input clearable v-model="form.taskTitle" placeholder="请输入"></el-input>
               </el-form-item>
               <el-form-item label="时间范围">
                   <el-date-picker clearable value-format="YYYY-MM-DD HH:mm:ss" @change="timeChange" v-model="selTime" type="daterange"></el-date-picker>
               </el-form-item>  
               <el-form-item>
                   <el-button type="primary" @click="confirm">查 询</el-button>
                   <el-button @click="reset">重 置</el-button>
               </el-form-item>
           </el-form>
       </div>
       <el-button size="default" type="primary" @click="download">导出excel</el-button>
       <div class="area-table">
           <el-table :data="tableData.data" size="default" border :header-cell-style="{background: '#EEE'}">
               <el-table-column prop="providerName" label="申请人" width="200"></el-table-column>
               <el-table-column prop="taskTitle" label="任务标题" width="300"></el-table-column>
               <el-table-column prop="type" label="传播平台" width="240" :formatter="statusFormatter"></el-table-column>
               <el-table-column prop="url" label="传播效果" width="272">
                   <template #default="scope">
                        <el-link type="primary" :href="scope.row.url" target="_blank">
                            <i>{{scope.row.url}}</i>
                        </el-link>
                    </template>
               </el-table-column>
               <el-table-column prop="effectResult" label="传播值" width="120" v-if="form.status == 2"></el-table-column>
               <el-table-column prop="playNum" label="播放数" width="120" v-if="form.status == 2"></el-table-column>
               <el-table-column prop="commendNum" label="点赞数" width="120" v-if="form.status == 2"></el-table-column>
               <el-table-column prop="collectionNum" label="收藏数" width="120" v-if="form.status == 2"></el-table-column>
               <el-table-column prop="commentNum" label="评论数" width="120" v-if="form.status == 2"></el-table-column>
               <el-table-column prop="reSendNum" label="转发数" width="120" v-if="form.status == 2"></el-table-column>
               <el-table-column prop="recommendNum" label="推荐数" width="120" v-if="form.status == 2"></el-table-column>
               <el-table-column prop="creatAt" label="提交时间" width="280"></el-table-column>
               <el-table-column prop="reason" label="未通过原因" width="300" v-if="form.status == 3"></el-table-column>
               <el-table-column prop="action" v-if="form.status != 2" label="操作" fixed="right" width="260">
                   <template #default="scope">
                       <el-link @click="review(scope.row.id,scope.row.type)" type="primary" style="margin-right: 8px">审核</el-link>
                   </template>
               </el-table-column>
           </el-table>
           <el-pagination
                v-model:currentPage="pagination.current"
                v-model:page-size="pagination.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
            />
       </div>
       <el-dialog v-model="reviewVisible" width="30%" title="审核">
           <el-form label-width="80px" size="default">
               <el-form-item label="审核结果">
                   <el-radio-group v-model="reviewForm.status">
                        <el-radio :label="2">通过</el-radio>
                        <el-radio :label="3">拒绝</el-radio>
                    </el-radio-group>
               </el-form-item>
               <!-- <el-form-item v-if="reviewForm.status == 2" label="平台类型">
                   <el-select disabled v-model="platformType">
                       <el-option label="抖音" :value="1"></el-option>
                       <el-option label="快手" :value="2"></el-option>
                       <el-option label="朋友圈" :value="3"></el-option>
                       <el-option label="视频号" :value="4"></el-option>
                   </el-select>
               </el-form-item> -->
               <el-form-item v-if="reviewForm.status == 2 && (platformType == 1 || platformType == 2)" label="播放次数">
                   <el-input-number @change="getTransVal" v-model="reviewForm.playNum"></el-input-number>
               </el-form-item>
               <el-form-item v-if="reviewForm.status == 2" label="点赞次数">
                   <el-input-number @change="getTransVal" v-model="reviewForm.commendNum"></el-input-number>
               </el-form-item>
               <el-form-item v-if="reviewForm.status == 2 && (platformType == 1 || platformType == 2)" label="收藏次数">
                   <el-input-number @change="getTransVal" v-model="reviewForm.collectionNum"></el-input-number>
               </el-form-item>
               <el-form-item v-if="reviewForm.status == 2" label="评论次数">
                   <el-input-number @change="getTransVal" v-model="reviewForm.commentNum"></el-input-number>
               </el-form-item>
               <el-form-item v-if="reviewForm.status == 2 && platformType == 4" label="转发次数">
                   <el-input-number @change="getTransVal" v-model="reviewForm.reSendNum"></el-input-number>
               </el-form-item>
               <el-form-item v-if="reviewForm.status == 2 && platformType == 4" label="推荐次数">
                   <el-input-number @change="getTransVal" v-model="reviewForm.recommendNum"></el-input-number>
               </el-form-item>
               <el-form-item v-if="reviewForm.status == 2" label="传播值" style="width: 50%">
                   {{transformValue}}
               </el-form-item>
               <el-form-item type="textarea" v-if="reviewForm.status == 3" label="拒绝理由">
                   <el-input v-model="reviewForm.reason"></el-input>
               </el-form-item>
           </el-form>
           <template #footer>
               <el-button @click="reviewCancel">取消</el-button>
               <el-button @click="reviewConfirm" type="primary">确定</el-button>
           </template>
       </el-dialog>
    </div>
</template>

<script>
import {defineComponent, reactive, ref, watch, getCurrentInstance} from 'vue'
import {statusFormatter} from './config.js'
export default defineComponent({
    name: 'v-questList',
    setup() {
        const form = reactive({
            status: 1,
            departmentId: undefined,
            providerName: undefined,
            taskTitle: undefined,
            beginTime: undefined,
            endTime: undefined,
        });
        const reviewForm = reactive({
            id: undefined,
            status: 2, //2通过 3拒绝
            playNum: 0, //播放量
            commendNum: 0, //点赞
            collectionNum: 0, //收藏
            commentNum: 0, //评论
            reSendNum: 0, //转发
            recommendNum: 0, //推荐
            reason: ''
        });
        const tableData = reactive({
            data: [],
        });
        const pagination = reactive({
            total: 0,
            current: 1,
            pageSize: 10
        })
        const selTime = ref([]);
        const transformValue = ref(0)
        const platformType = ref(1);
        const departmentList = ref([]);
        const { proxy } = getCurrentInstance();
        const reviewVisible = ref(false);
        return {
            form,reviewForm,pagination,proxy,platformType,transformValue,
            tableData,departmentList,selTime,
            statusFormatter,
            reviewVisible
        }
    },
    mounted() {
        this.getApi();
        this.getData();
        watch(() => (this.pagination.pageSize), () => {
            this.getData()
        });
        watch(() => (this.pagination.current), () => {
            this.getData()
        })
    },
    methods: {
        getApi() {
            let obj = Object.assign({})
            this.proxy.$post("/user/department", obj).then(res => {
                const data = res.data;
                this.departmentList = data;
            }).catch(() => {});
        },
        getData() {
            let obj = Object.assign(this.form,{pageNum: this.pagination.current,pageSize: this.pagination.pageSize})
            this.proxy.$post("/video/list", obj).then(res => {
                if(res.code == 200) {
                    const data = res.data
                    this.tableData.data = data.records;
                    this.pagination.total = data.total
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => {});
        },
        confirm() {
            this.getData()
        },
        reset() {
            this.form.departmentId = undefined;
            this.form.providerName = undefined;
            this.form.taskTitle = undefined;
            this.form.beginTime = undefined;
            this.form.endTime = undefined;
            this.selTime = [];
            this.getData();
        },
        //切换状态
        statusChange(index) {
            this.getData()
        },
        //删除
        singleDel(id) {
            this.$alert(
                '是否删除'+id+'?', //文字
                '删除', //标题
                {type: 'warning'}
            ).then(() => {
                this.$message.success('删除成功')
            }).catch(() => {})
        },
        //审核
        review(value,type) {
            this.reviewVisible = true;
            this.platformType = type;
            this.reviewForm.id = value;
        },
        reviewConfirm() {
            this.proxy.$post("/video/valid", this.reviewForm).then(res => {
                if(res.code == 200) {
                    this.$message.success(res.data);
                    this.getData();
                    this.reviewCancel();
                } else {
                    this.$message.error(res.msg);
                }
            }).catch(() => {});
        },
        reviewCancel() {
            this.reviewVisible = false;
            this.reviewForm.status = 2;
            this.reviewForm.playNum = 0;
            this.reviewForm.commendNum = 0
            this.reviewForm.collectionNum = 0
            this.reviewForm.commentNum = 0
            this.reviewForm.reSendNum = 0
            this.reviewForm.recommendNum = 0
            this.reviewForm.reason = ''
        },
        //计算传播值
        getTransVal() {
            this.proxy.$post("/video/cal", this.reviewForm).then(res => {
                this.transformValue = res.data
            }).catch(() => {});
        },
        //改变时间
        timeChange(value) {
            if(value) {
                this.form.beginTime = value[0];
                this.form.endTime = value[1];
            } else {
                this.form.beginTime = undefined;
                this.form.endTime = undefined;
            }
        },
        //导出
        download() {
            let obj = {
                status: this.form.status,
                departmentId: this.form.departmentId,
            }
            let filename = '传播效果审核列表.xlsx';
            if (this.form.status == 1) {
                filename = '待审核列表.xlsx'
            } else if (this.form.status == 2) {
                filename = '审核通过列表.xlsx'
            } else {
                filename = '审核不通过列表.xlsx'
            }
            this.proxy.$download("/video/excel", obj, filename).then(() => {}).catch(() => {});
        }
    }
})
</script>

<style lang="less" scoped>
.area-table {
    margin-top: 16px
}
</style>