boss/pages/main/index/dynamic_comment.vue

<template>
<div>
    <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
            <el-col :span="8">
                <el-form-item label="状态" prop="status">
                    <el-select v-model="formData.status" placeholder="请选择状态" :style="{width: '100%'}">
                        <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item size="large">
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-col>
        </el-form>
    </el-row>

    <el-table v-loading="loading" :border="true" :data="table" style="width: 100%">
        <el-table-column prop="type_text" label="动态id+名称" width="190">
            <template slot-scope="scope">
                <div>动态id：{{scope.row.dynamicId}}</div>
                <!-- <div>名称：{{scope.row.content}}</div> -->
            </template>
        </el-table-column>
        <el-table-column label="评论用户" width="200">
            <template slot-scope="scope">
                <el-avatar :src="scope.row.user_info.icon_url">
                </el-avatar>
                <span>{{scope.row.user_info.nickname}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="content" label="标题" width="300">
        </el-table-column>

        <el-table-column prop="addtime" label="发布时间" width="190">
        </el-table-column>
        <el-table-column prop="status_text" label="状态" width="190">

        </el-table-column>
        <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
                <template v-if="scope.row.status == 1">
                    <el-button type="success" size="mini" @click="setDynamicPass(scope.row.comId)">通过</el-button>
                    <el-button type="warning" size="mini" @click="callDynamicReject(scope.row.comId)">拒绝</el-button>
                </template>
                <template v-if="scope.row.status == 2">
                    <!-- <el-button type="primary" size="mini" @click="setDynamicRecommend(scope.row.comId)">神评</el-button> -->
                    <el-button type="warning" size="mini" @click="callDynamicReject(scope.row.comId,scope.row)">拒绝</el-button>
                </template>
                <template v-if="scope.row.status == 3">
                    <el-button type="success" size="mini" @click="setDynamicPass(scope.row.comId)">通过</el-button>
                </template>

                <el-button type="danger" size="mini" @click="delDynamic(scope.row.comId)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-row :gutter="24">
        <el-col :span="23" :offset="1">
            <div class="mt-20 mb-20">
                <el-pagination :page-size="page_size" :current-page="page" @current-change="pageChange" @size-change="handleSizeChange" background :page-sizes="[10, 30, 50]" layout="total,sizes,prev, pager, next,jumper" :total="total">
                </el-pagination>
            </div>
        </el-col>
    </el-row>

    <el-dialog :visible="visible" v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="请填写拒绝原因">
        <el-form ref="modalForm" :model="modalFormData" :rules="modalFormDataRules" size="medium" label-width="100px">
            <el-form-item label="评论id">
                <el-input v-model="rejectDynamicId" :disabled="true" placeholder="请输入拒绝原因" clearable :style="{width: '100%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="内容">
                <el-input v-model="rejectTypeText" :disabled="true" placeholder="请输入拒绝原因" clearable :style="{width: '100%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="拒绝原因" prop="memo">
                <el-input v-model="modalFormData.memo" placeholder="请输入拒绝原因" clearable :style="{width: '100%'}">
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="handelConfirm">确定</el-button>
        </div>
    </el-dialog>

</div>
</template>

<script>
export default {
    inheritAttrs: false,
    components: {},
    props: [],
    data() {
        return {
            formData: {
                status: 0
            },
            rules: {
                status: [],
            },
            statusOptions: [{
                "label": "全部",
                "value": 0
            }, {
                "label": "未审核",
                "value": 1
            }, {
                "label": "审核通过",
                "value": 2
            }, {
                "label": "审核拒绝",
                "value": 3
            }],

            table: [],
            page: 1,
            page_size: 10,
            total: 0,

            loading: false,

            // 模态表单
            visible: false,
            rejectTypeText: '',
            rejectDynamicId: "",
            modalFormData: {
                memo: "",
            },
            modalFormDataRules: {
                memo: [{
                    required: true,
                    message: '请输入拒绝原因',
                    trigger: 'blur'
                }],
            },

        }
    },
    computed: {},
    watch: {},
    created() {

    },
    mounted() {
        this.fetchData()
    },
    methods: {
        submitForm() {
            this.$refs['elForm'].validate(valid => {
                if (!valid) return
                // 重置页数
                this.page = 1
                this.fetchData()
                // TODO 提交表单
            })
        },
        resetForm() {
            this.$refs['elForm'].resetFields()
        },
        pageChange(val) {
            this.page = val
            this.fetchData()
        },
        handleSizeChange(e) {
            this.page_size = e;
            this.fetchData()
        },
        async fetchData() {
            this.loading = true;
            let res = await this.$post("/uapi/v1/m/dynamic/get_admin_dynamic_comment_list", {
                status: this.formData.status + "",
                page: this.page,
                page_size: this.page_size

            });
            this.loading = false;
            if (res && res.status === 1) {
                this.table = [...res.data.list]
                this.total = res.data.total
            }
        },
        // 设置通过
        async setDynamicPass(comId) {
            this.$post("/uapi/v1/m/dynamic/set_user_dynamic_comment_status", {
                status: 2,
                comId

            }).then((res) => {
                if (res.status == 1) {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    this.fetchData()
                }
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "操作失败"
                });
            });
        },
        // 设置拒绝
        async setDynamicReject(comId, memo) {
            this.$post("/uapi/v1/m/dynamic/set_user_dynamic_comment_status", {
                status: 3,
                comId,
                memo: memo

            }).then((res) => {
                if (res.status == 1) {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    this.close()
                    this.fetchData()
                }
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "操作失败"
                });
            });
        },
        async delDynamic(comId){
            this.$post("/uapi/dynamic/del_dynamic_comment", {
                comId

            }).then((res) => {
                if (res.status == 1) {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    this.close()
                    this.fetchData()
                }
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "操作失败"
                });
            });
        },
        // 设置推荐
        async setDynamicRecommend(dynamicId) {

            this.$post("/uapi/v1/m/dynamic/set_user_dynamic_is_hot", {
                is_hot: 1,
                dynamicId

            }).then((res) => {
                if (res.status == 1) {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    this.fetchData()
                }
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "操作失败"
                });
            });

        },

        callDynamicReject(comId, item) {
            this.rejectDynamicId = comId
            this.rejectTypeText = item.content
            this.visible = true
        },

        // 弹出表单

        onOpen() {},
        onClose() {
            this.$refs['modalForm'].resetFields()
            this.rejectDynamicId = ""
            this.rejectTypeText = ""
            this.visible = false
        },
        close() {
            this.$emit('update:visible', false)
            this.rejectDynamicId = ""
            this.rejectTypeText = ""
            this.visible = false

        },
        handelConfirm() {
            this.$refs['modalForm'].validate(valid => {
                if (!valid) return
                let memo = this.modalFormData.memo

                this.setDynamicReject(this.rejectDynamicId, memo)
                // this.close()
            })
        },

    }
}
</script>