EXEED_manage/src/views/StarwayInfo/index.vue

<template>
    <div class="main-content">
       <div class="area-form">
           <el-form :inline="true" size="default">
               <el-form-item label="标题">
                   <el-input clearable v-model="form.keyword" 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="400"></el-table-column>
               <el-table-column prop="type" label="动态类型" :formatter="statusFormatter" width="100"></el-table-column>
               <el-table-column prop="type" label="是否显示在首页" width="180">
                   <template #default="scope">
                       <el-switch @change="changeIsShow(scope.row)" :model-value="scope.row.showAtIndex" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否"></el-switch>
                   </template>
               </el-table-column>
               <el-table-column prop="sortWeight" label="排序">
                   <template #default="scope">
                       <el-input v-model="sortValue" @change="handlerChangeSort(value)" style="width: 120px" v-if="isEditing && scope.row.id == activeId"></el-input>
                       <span v-else>{{scope.row.sortWeight}}</span>
                       <el-icon @click="handlerSortEdit(scope.row)"><Edit /></el-icon>
                   </template>
               </el-table-column>
               <el-table-column prop="playNum" label="阅读数"></el-table-column>
               <el-table-column prop="cover" label="封面" >
                   <template #default="scope">
                       <img style="width: 160px;height: 120px" :src="$ImgUrl(scope.row.cover)" />
                   </template>
               </el-table-column>
               <el-table-column prop="action" label="操作" fixed="right" width="240">
                   <template #default="scope">
                       <el-link type="primary" style="margin-right: 8px" @click="goDetail(scope.row.id)">查看</el-link>
                       <el-link type="primary" style="margin-right: 8px" @click="goEdit(scope.row.id)">编辑</el-link>
                       <el-link type="danger" style="margin-right: 8px" @click="singleDel(scope.row.id)">删除</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>
    </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({
            keyword: '',
        });
        const tableData = reactive({
            data: [],
        });
        const { proxy } = getCurrentInstance();
        const pagination = reactive({
            total: 0,
            current: 1,
            pageSize: 10
        });
        const isEditing = ref(false);
        const activeId = ref(undefined);
        const sortValue = ref(undefined);
        return {
            form,proxy,
            tableData,pagination,
            isEditing,activeId,sortValue,
            statusFormatter
        }
    },
    mounted() {
        this.getData()
        watch(() => (this.pagination.pageSize), () => {
            this.getData()
        });
        watch(() => (this.pagination.current), () => {
            this.getData()
        })
    },
    methods: {
        getData() {
            let obj = Object.assign(this.form,{pageNum: this.pagination.current,pageSize: this.pagination.pageSize})
            this.proxy.$post("/topicActivity/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()
        },
        goRelease() {
            this.$router.push({ name: "ActRelease" })
        },
        goEdit(value) {
            this.$router.push({ name: "ActEdit", query:{id:value}})
        },
        goDetail(value) {
            this.$router.push({ name: "ActDetail", query:{id:value}})
        },
        //删除
        singleDel(id) {
            this.$alert(
                '是否删除?', //文字
                '删除', //标题
                {type: 'warning'}
            ).then(() => {
                this.proxy.$post("/topicActivity/del", {id: id}).then(res => {
                    this.getData()
                    this.$message.success(res.data)
                }).catch(() => {});
            }).catch(() => {})
        },
        //改变是否显示在首页
        changeIsShow(val) {
            let obj = {id: val.id, showAtIndex: val.showAtIndex == 1?0:1};
            this.proxy.$post("/topicActivity/showAtIndex", obj).then(res => {
                if(res.code == 200) {
                    this.getData();
                    this.$message.success(res.data)
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => {});
        },
        //编辑排序
        handlerSortEdit(value) {
            this.activeId = value.id;
            this.isEditing = true;
        },
        editCancel() {
            this.isEditing = false;
        },
        handlerChangeSort(value) {
            let obj = {id: this.activeId,sortWeight: this.sortValue*1}
                this.proxy.$post("/topicActivity/updSort", obj).then(res => {
                this.getData();
                this.isEditing = false;
                this.activeId = undefined;
                this.sortValue = undefined;
                this.$message.success(res.data)
            }).catch(() => {});
        }
    }
})
</script>

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