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 v-model="form.name" placeholder="请输入"></el-input>
               </el-form-item>
               <el-form-item label="部门">
                   <el-select v-model="form.department" placeholder="请选择">
                       <el-option label="北京4S店" :value="1"></el-option>
                       <el-option label="上海4S店" :value="2"></el-option>
                   </el-select>
               </el-form-item>
               <el-form-item label="任务标题">
                   <el-input v-model="form.title" placeholder="请输入"></el-input>
               </el-form-item>
               <el-form-item>
                   <el-button type="primary" @click="confirm">查 询</el-button>
               </el-form-item>
           </el-form>
       </div>
       <div class="area-table">
           <el-table :data="tableData.data" size="default" border :header-cell-style="{background: '#EEE'}">
               <el-table-column prop="name" label="申请人" width="240"></el-table-column>
               <el-table-column prop="department" label="部门" :formatter="statusFormatter"></el-table-column>
               <el-table-column prop="title" label="任务标题" ></el-table-column>
               <el-table-column prop="platform" label="传播平台" ></el-table-column>
               <el-table-column prop="effect" label="传播效果截图" ></el-table-column>
               <el-table-column prop="time" label="提交时间" ></el-table-column>
               <el-table-column prop="action" label="操作" fixed="right" width="180">
                   <template #default="scope">
                       <el-link @click="review(scope.row.id)" 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  .result">
                        <el-radio :label="1">通过</el-radio>
                        <el-radio :label="2">未通过</el-radio>
                    </el-radio-group>
               </el-form-item>
               <el-form-item label="传播值" style="width: 50%">
                   <el-input-number v-model="reviewForm.value" placeholder="请输入"></el-input-number>
               </el-form-item>
               <el-form-item label="奖励积分">
                   {{reviewForm.point}}
               </el-form-item>
           </el-form>
           <template #footer>
               <el-button @click="reviewVisible = false">取消</el-button>
               <el-button @click="reviewConfirm" type="primary">确定</el-button>
           </template>
       </el-dialog>
    </div>
</template>

<script>
import {defineComponent, reactive, ref, watch} from 'vue'
import {statusFormatter} from './config.js'
export default defineComponent({
    name: 'v-questList',
    setup() {
        const form = reactive({
            status: 1,
            department: undefined,
            name: '',
            title: '',
        });
        const reviewForm = reactive({
            id: undefined,
            result: 1,
            value: 0,
            point: 0,
        });
        const tableData = reactive({
            data: [],
        });
        const pagination = reactive({
            total: 0,
            current: 1,
            pageSize: 10
        })
        const reviewVisible = ref(false);
        return {
            form,reviewForm,pagination,
            tableData,
            statusFormatter,
            reviewVisible
        }
    },
    mounted() {
        this.getData();
        watch(() => (this.pagination.pageSize), () => {
            this.getData()
        });
        watch(() => (this.pagination.current), () => {
            this.getData()
        })
    },
    methods: {
        getData() {
            this.tableData.data = [
                {
                    id: 1,
                    title: '星途揽月新款抖音视频',
                    type: 1,
                },
                {
                    id: 2,
                    title: '星途抖音视频需求',
                    type: 2,
                },
                {
                    id: 3,
                    title: '星途揽月新款抖音视频宣传推广视频图文需求',
                    type: 3,
                },
            ]
        },
        confirm() {
            this.getData()
        },
        //切换状态
        statusChange(index) {
            this.getData()
        },
        //删除
        singleDel(id) {
            this.$alert(
                '是否删除'+id+'?', //文字
                '删除', //标题
                {type: 'warning'}
            ).then(() => {
                this.$message.success('删除成功')
            }).catch(() => {})
        },
        //审核
        review(value) {
            this.reviewVisible = true;
            this.reviewForm.id = value;
        },
        reviewConfirm() {

        }
    }
})
</script>

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