EXEED_manage/src/views/BasicSetting/_rewardRule/index.vue

<template>
    <div class="main-content">
       <div class="area-form">
       </div>
       <div class="button-tab">
           <el-popover v-model:visible="visible" placement="bottom" :width="180">
               <h5>添加规则</h5>
               <el-form>
                   <el-form-item style="width:80%">
                       <el-input v-model="setForm.name" placeholder="请输入规则名称"></el-input>
                   </el-form-item>
                   <el-form-item>
                       <el-button type="primary">确定</el-button>
                       <el-button @click="visible = false">取消</el-button>
                   </el-form-item>
               </el-form>
               <template #reference>
                   <el-button size="default" type="primary" @click="visible = true">添加奖励规则</el-button>
               </template>
           </el-popover>
       </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="360"></el-table-column>
               <el-table-column prop="isDefault" :formatter="statusFormatter" label="是否默认"></el-table-column>
               <el-table-column prop="action" label="操作" fixed="right" width="240">
                   <template #default="scope">
                        <el-link type="primary" @click="handlerEdit(scope.row.id)">编辑</el-link>
                        <el-link type="primary" style="margin-left: 8px" v-if="scope.row.isDefault == false">设为默认</el-link>
                        <el-link type="danger" @click="singleDel(scope.row.id)" style="margin-left: 8px" v-if="scope.row.isDefault == false">删除</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-drawer v-model="drawerVisible">
            <template #header>
                <span style="font-size: 16px;font-weight: bold">{{drawerData.activeType==1?'查看部门':'查看员工'}}</span>
            </template>
            <template #footer>
                <el-button type="primary" @click="drawerVisible = false" size="default">确定</el-button>
            </template>
       </el-drawer>
    </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({
            type: undefined,
            series: undefined,
            tag: ''
        });
        const tableData = reactive({
            data: [],
        });
        const pagination = reactive({
            total: 0,
            current: 1,
            pageSize: 10
        });
        const setForm = reactive({
            name: ''
        });
        const visible = ref(false);
        const drawerVisible = ref(false);
        const drawerData = reactive({
            activeId: undefined, //抽屉数据的当前id
            activeType: undefined, //抽屉数据的当前类型 1,部门 2,员工
            data: [],
        });
        return {
            form,setForm,
            tableData,
            pagination,
            statusFormatter,
            visible,drawerVisible,drawerData
        }
    },
    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,
                    name: '星途揽月新款抖音视频',
                    isDefault: true,
                },
                {
                    id: 2,
                    name: '星途抖音视频需求',
                    isDefault: false,
                },
                {
                    id: 3,
                    name: '星途揽月新款抖音视频宣传推广视频图文需求',
                    isDefault: false,
                },
            ]
        },
        addSet() {

        },
        handlerEdit(value) {

        },
        //删除
        singleDel(id) {
            this.$alert(
                '是否删除'+id+'?', //文字
                '删除', //标题
                {type: 'warning'}
            ).then(() => {
                this.$message.success('删除成功')
            }).catch(() => {})
        }
    }
})
</script>

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