EXEED_manage/src/views/MatManage/_matList/index.vue

<template>
    <div class="main-content">
       <div class="area-form">
           <el-form :inline="true" size="default">
               <el-form-item label="分组">
                   <el-select v-model="form.type" placeholder="请选择">
                       <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-option label="趣味互动" :value="5"></el-option>
                   </el-select>
               </el-form-item>
               <el-form-item label="车型">
                   <el-select v-model="form.series" placeholder="请选择">
                       <el-option label="全部" :value="1"></el-option>
                       <el-option label="车系1" :value="2"></el-option>
                       <el-option label="车系2" :value="3"></el-option>
                   </el-select>
               </el-form-item>
               <el-form-item label="标签">
                   <el-input v-model="form.tag" 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="button-tab">
           <el-button size="default" type="primary" @click="goRelease">发布任务</el-button>
       </div>
       <div class="area-table">
           <el-table :data="tableData.data" size="default" border  :header-cell-style="{background: '#EEE'}">
               <el-table-column prop="title" label="任务标题" width="360"></el-table-column>
               <el-table-column prop="tag" label="标签" width="240">
                   <template #default="scope">
                       <el-tag style="margin-right: 8px" v-for="(item,index) in scope.row.tag" :key="index">
                           {{item == 1?'媒体评测':item == 2?'产品宣传':'其他'}}
                        </el-tag>
                   </template>
               </el-table-column>
               <el-table-column prop="status" label="状态" :formatter="statusFormatter"></el-table-column>
               <el-table-column prop="action" label="操作" fixed="right" width="240">
                   <template #default="scope">
                       <div v-if="scope.row.status == 1">
                           <el-link type="primary" @click="goEdit(scope.row.id)">编辑</el-link>
                       </div>
                       <div v-else>
                           <el-link type="primary" style="margin-right: 8px">查看</el-link>
                           <el-link type="primary" style="margin-right: 8px">传播效果</el-link>
                           <el-link v-if="scope.row.status == 2" type="primary" style="margin-right: 8px">终止</el-link>
                       </div>
                   </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>
    </div>
</template>

<script>
import {defineComponent, reactive, watch} from 'vue'
import {statusFormatter} from './config.js'
export default defineComponent({
    name: 'v-questList',
    setup() {
        const form = reactive({
            type: undefined,
            series: undefined,
            tag: ''
        });
        const tableData = reactive({
            data: [],
        });
        const pagination = reactive({
            total: 0,
            current: 1,
            pageSize: 10
        });
        return {
            form,
            tableData,
            pagination,
            statusFormatter
        }
    },
    mounted() {
        this.getData();
        watch(() => (this.pagination.pageSize), () => {
            this.getData()
        });
        watch(() => (this.pagination.current), () => {
            this.getData()
        })
    },
    methods: {
        getData() {
            this.pagination.total = 3;
            this.tableData.data = [
                {
                    id: 1,
                    title: '星途揽月新款抖音视频',
                    tag: [1],
                    status: 1,
                },
                {
                    id: 2,
                    title: '星途抖音视频需求',
                    tag: [1,3],
                    status: 2,
                },
                {
                    id: 3,
                    title: '星途揽月新款抖音视频宣传推广视频图文需求',
                    tag: [1,2,3],
                    status: 3,
                },
            ]
        },
        confirm() {
            this.getData()
        },
        goRelease() {
            this.$router.push({ name: "QuestRelease" })
        },
        goEdit(value) {
            this.$router.push({ name: "QuestRelease",params:{id:value}})
        },
    }
})
</script>

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