shop-admin/src/views/sales/product/index.vue

<template>
    <div class="list-container">
        <table-list
            v-loading="loading"
            :code="code"
            :config="config"
            :data="list"
            :operation="['search', 'create']"
            :reset="handleReset"
            title="商品"
            :total="total"
            @create="handleCreate"
            @search="handleSearch"
        >
            <template #search>
                <el-form inline>
                    <el-form-item label="商品名称" prop="name">
                        <el-input v-model="state.condition.name" />
                    </el-form-item>
                    <el-form-item label="商品分类" prop="categoryId">
                        <el-cascader
                            v-model="state.condition.categoryId"
                            :options="opts.category"
                            :props="{
                                checkStrictly: true,
                                expandTrigger: 'hover',
                                label: 'name',
                                value: 'id',
                                children: 'childList',
                                emitPath: false,
                            }"
                        />
                    </el-form-item>
                </el-form>
            </template>
        </table-list>
    </div>
</template>

<script setup lang="jsx">
    import ElButton from '@/components/extra/ElButton.vue';
    import ElIcon from '@/components/extra/ElIcon.vue';
    import ElImage from '@/components/extra/ElImage.vue';
    import ElSwitch from '@/components/extra/ElSwitch.vue';
    const router = useRouter();
    const store = useStore();
    const loading = ref(false);
    const code = computed(() => store.state.product.code);
    const list = computed(() => _.cloneDeep(store.state.product.list));
    const total = computed(() => store.state.product.total);
    const opts = computed(() => store.state.product.opts);
    if (!unref(opts).init) {
        store.dispatch('product/load');
    }

    /* 查询订单 */
    const state = reactive({
        condition: {
            name: null,
            categoryId: null,
        },
    });
    watch(
        () => state.condition,
        (value) => {
            store.commit('product/setCondition', _.cloneDeep(value));
        },
        { immediate: true, deep: true }
    );
    const handleReset = () => {
        state.condition = {
            name: null,
            categoryId: null,
        };
    };
    const handleSearch = async () => {
        loading.value = true;
        await store.dispatch('product/search');
        loading.value = false;
    };
    onActivated(handleSearch);

    /* 新增 */
    const handleCreate = () => {
        router.push({
            name: 'CreateProduct',
        });
    };

    /* 编辑 */
    const handleUpdate = (row) => {
        router.push({
            name: 'UpdateProduct',
            params: { id: row.id },
        });
    };

    /* 删除 */
    const handleRemove = (row) => {
        store.dispatch('product/remove', [row.id]);
    };

    /* SKU */
    const handleSku = (row) => {
        router.push({
            name: 'UpdateProduct',
            params: {
                id: row.id,
                step: 2,
            },
        });
    };

    /* 上下架 */
    const handleEnabled = async (row) => {
        loading.value = true;
        await store.dispatch('product/enable', { id: row.id, isEnable: row.isEnable });
        loading.value = false;
    };

    /* 列表配置 */
    const config = reactive({
        columns: [
            {
                label: '编号',
                prop: 'id',
                minWidth: 100,
                fixed: 'left',
            },
            {
                label: '商品图片',
                minWidth: 100,
                slots: {
                    default: ({ row }) => <ElImage src={row.mainPicture} alt={row.name} height="100px" />,
                },
            },
            {
                label: '商品名称',
                prop: 'name',
                minWidth: 240,
            },
            {
                label: '价格',
                prop: 'startingPrice',
                minWidth: 120,
            },
            {
                label: 'SKU库存',
                width: 120,
                slots: {
                    default: ({ row }) => (
                        <div>
                            <div>{row.totalStock || 0}</div>
                            <ElButton type="text" onClick={() => handleSku(row)}>
                                <ElIcon name="Edit" size="20" />
                            </ElButton>
                        </div>
                    ),
                },
            },
            {
                label: '上/下架',
                width: 120,
                slots: {
                    default: ({ row }) => <ElSwitch v-model={row.isEnable} onChange={() => handleEnabled(row)} />,
                },
            },
            {
                label: '操作',
                fixed: 'right',
                width: 120,
                slots: {
                    default: ({ row }) => (
                        <div>
                            <ElButton type="text" onClick={() => handleUpdate(row)}>
                                编辑
                            </ElButton>
                            <ElButton type="text" onClick={() => handleRemove(row)}>
                                删除
                            </ElButton>
                        </div>
                    ),
                },
            },
        ],
    });
</script>

<style lang="less" scoped>
    .list-container {
        display: flex;
        flex-direction: column;
        .common-list {
            flex-shrink: 1;
        }
    }
</style>