shop-admin/src/views/goods/comment/list.vue

<!--
 * @Author: ch
 * @Date: 2022-06-15 17:29:32
 * @LastEditors: ch
 * @LastEditTime: 2022-06-30 16:14:29
 * @Description: file content
-->
<template>
    <div>
        <table-list
            v-loading="loading"
            :operation="['search']"
            :code="_pagingCode"
            :config="config"
            :data="list"
            :total="total"
            @search="handleSearch"
            :reset="handleReset"
        >
            <template #search>
                <el-form inline>
                    <el-form-item label="商品名称" prop="productName">
                        <el-input v-model="state.condition.productName" />
                    </el-form-item>
                    <el-form-item label="用户昵称">
                        <el-input v-model="state.condition.userName" />
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="state.condition.phone" />
                    </el-form-item>
                    <el-form-item label="评分" prop="name">
                        <el-select v-model="state.condition.scoreList" multiple collapse-tags collapse-tags-tooltip>
                            <el-option
                                v-for="(item, idx) in opts.score"
                                :key="idx"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否显示" prop="name">
                        <el-select v-model="state.condition.isShow">
                            <el-option
                                v-for="(item, idx) in opts.isShow"
                                :key="idx"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="评价时间" prop="dateRange">
                        <el-date-picker
                            v-model="state.condition.dateRange"
                            :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                        />
                    </el-form-item>
                </el-form>
            </template>

            <template #operation="{ selection }">
                <div class="batch-show-hide" v-if="selection.length">
                    <el-select v-model="allShowHideVal">
                        <el-option
                            v-for="(item, idx) in opts.isShow"
                            :key="idx"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                    <el-button type="primary" @click="handleAllShowHide(selection)">确定</el-button>
                </div>
            </template>
        </table-list>
    </div>
</template>
<script setup lang="jsx">
    import ElButton from '@/components/extra/ElButton.vue';
    import ElSwitch from '@/components/extra/ElSwitch.vue';
    const router = useRouter();
    const store = useStore();
    const loading = ref(false);
    // 页面字典表数据
    const opts = computed(() => store.state.comment.opts);
    // 表格数据
    const list = computed(() => _.cloneDeep(store.state.comment.list));
    const total = computed(() => store.state.comment.total);
    // 分页code需要使用此code到全局sotre取分页参数
    const _pagingCode = 'CommentManagement';
    // 表格查询参数
    const _condition = {
        productName: '',
        userName: '',
        phone: '',
        scoreList: [],
        isShow: '',
        dateRange: '',
    };
    const state = reactive({
        condition: { ..._condition },
    });
    // 批量操作的值
    const allShowHideVal = ref(true);

    // store.dispatch('comment/search', { pagingCode: _pagingCode });

    /**
     * 搜索
     */
    const handleSearch = async () => {
        loading.value = true;
        await store.dispatch('comment/search', { ...state.condition, pagingCode: _pagingCode });
        loading.value = false;
    };
    onActivated(handleSearch);
    /**
     * 重置
     */
    const handleReset = () => {
        state.condition = { ..._condition };
    };
    /**
     * 单行操作显示隐藏
     *
     */
    const handleShowHide = async (row) => {
        loading.value = true;
        try {
            await store.dispatch('comment/updateShow', {
                idList: [row.id],
                isShow: row.isShow,
            });
        } catch (e) {
            row.isShow = !row.isShow;
        }
        loading.value = false;
    };
    /**
     * 批量操作显示隐藏
     */
    const handleAllShowHide = async (selection) => {
        loading.value = true;
        let val = allShowHideVal.value;
        try {
            await store.dispatch('comment/updateShow', {
                idList: selection.map((i) => i.id),
                isShow: val,
            });
        } catch (e) {
            val = !val;
        }
        loading.value = false;
        selection.forEach((item) => {
            item.isShow = val;
        });
    };
    const handleDetail = (id) => {
        router.push({
            name: 'CommentDetail',
            params: {
                id: id,
            },
        });
    };

    const config = reactive({
        columns: [
            {
                type: 'selection',
                fixed: 'left',
                width: 60,
            },
            {
                label: '商品名称',
                width: 180,
                align: 'left',
                slots: {
                    default: ({ row }) => <div class="row-ellipsis">{row.productName}</div>,
                },
            },
            {
                label: '评价内容',
                align: 'left',
                slots: {
                    default: ({ row }) => (
                        <div class="row-ellipsis ctx-link" onClick={() => handleDetail(row.id)}>
                            {row.commentContent}
                        </div>
                    ),
                },
            },
            {
                label: '评分',
                prop: 'scoreName',
                width: 70,
            },
            {
                label: '用户',
                width: 120,
                slots: {
                    default: ({ row }) => (
                        <div>
                            <p class="row-ellipsis">{row.userName}</p>
                            <p>{row.phone}</p>
                        </div>
                    ),
                },
            },
            {
                label: '评价时间',
                prop: 'time',
                width: 120,
                slots: {
                    default: ({ row }) => (
                        <div>
                            <p>{row.createTime.split(' ')[0]}</p>
                            <p>{row.createTime.split(' ')[1]}</p>
                        </div>
                    ),
                },
            },
            {
                label: '显示',
                width: 80,
                slots: {
                    default: ({ row }) => <ElSwitch v-model={row.isShow} onChange={() => handleShowHide(row)} />,
                },
            },
            {
                label: '操作',
                width: 70,
                slots: {
                    default: ({ row }) => (
                        <ElButton type="text" onClick={() => handleDetail(row.id)}>
                            查看
                        </ElButton>
                    ),
                },
            },
        ],
    });
</script>
<style lang="less" scoped>
    .batch-show-hide {
        margin-left: 20px;
    }
    :deep(.row-ellipsis) {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    :deep(.ctx-link) {
        cursor: pointer;
        &:hover {
            color: var(--el-color-primary);
        }
    }
</style>