qimall/addons/StarChain/backend/views/storage/index.php

<?php
    use common\helpers\ComponentHelper;
    ComponentHelper::loadComponentView('com-list-page');
    ComponentHelper::loadComponentView('com-list-table');
?>
<com-list-page :crumbs="crumbs" id="application">
    <com-list-table 
        ref="table"
        :api="'star-chain/storage/index'"
        :search-list="searchList"
        @selection-change="handleSelectionChange"
    >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="spu_id" align="center" label="SPU_ID">
        </el-table-column>
        <el-table-column prop="goods" align="center" width="200px" label="商品">
            <template slot-scope="scope">
                <div class="goods">
                    <div class="goods-img">
                        <el-image :src="scope.row.goods.carousel_img_list[0]" fit="fill" style="width: 60px; height: 60px"></el-image>
                    </div>
                    <div class="goods-name">
                        <span>{{ sub(scope.row.goods.name) }}</span>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="category_name" align="center" label="分类">
            <template slot-scope="scope">
                {{ scope.row.goods.category1.name }}
                {{ scope.row.goods.category2.name }}
                {{ scope.row.goods.category3.name }}
            </template>
        </el-table-column>
        <el-table-column prop="status" label="商品状态" align="center">
            <template slot-scope="scope">
                <!-- {{ scope.row.goods.status == 1 ? '下架' : '上架' }} -->
                <el-tag type="success" v-if="scope.row.goods.status == 0">上架</el-tag>
                <el-tag type="warning" v-if="scope.row.goods.status == 1">下架</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="mall_goods" label="商城ID" align="center">
            <template slot-scope="scope">
                <a href="javascript:;" @click="mallGoods(scope.row.mall_goods_id)" v-if="scope.row.import == 2">
                    {{ scope.row.mall_goods_id }}
                </a>
                <span v-if="scope.row.import == 1">
                    导入中
                </span>
                <span v-if="scope.row.import == 0">
                    未导入
                </span>
                <span v-if="scope.row.import == -1">
                    {{ scope.row.error }}
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="import" label="添加时间" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.import == 2">
                    {{ scope.row.updated_at|dateTimeFormat('Y-m-d H:i:s') }}
                </span>
                <span v-else>
                    --
                </span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <el-button type="text" :loading="btnLoading" @click="againImport([scope.row.id])">重新导入</el-button>
                <el-button type="text" :loading="btnLoading" @click="removeImport([scope.row.id])">移除</el-button>
            </template>
        </el-table-column>
        <template slot="footer-button">
            <el-button size="mini" :loading="btnLoading" type="primary" @click="batchAgainImport">批量导入</el-button>
            <el-button size="mini" :loading="btnLoading" type="danger" @click="batchRemoveImport">批量移除</el-button>
        </template>
    </com-list-table>
</com-list-page>
<script>
const application = new Vue({
    el: '#application',
    data: {
        crumbs: [
            {
                title: '首页',
                router: 'mall/overview/index',
            },
            {
                title: '选品管理',
            }
        ],
        searchList: [
            {
                key: 'name',
                title: '商品名称',
                type: 'text',
            },
            {
                key: 'import',
                title: '导入状态',
                type: 'select',
                options: [
                    {
                        label: '未导入',
                        value: 0,
                    },
                    {
                        label: '导入中',
                        value: 1,
                    },
                    {
                        label: '已导入',
                        value: 2,
                    }
                ],
                valueKey: {
                    label: 'label',
                    value: 'value',
                },
            },
            {
                key: 'category_ids',
                title: '分类',
                type: 'cascader',
                props: {
                    checkStrictly: true,
                    lazy: true,
                    lazyLoad (node, resolve) {
                        let pid = node.value ?? 0
                        setTimeout(() => {
                            request({
                                params: {
                                    r: 'star-chain/goods/category',
                                    pid: pid,
                                },
                            }).then(e => {
                                if (e.data.code === 0) {
                                    let nodes = e.data.data.map(item => ({
                                        value: item.id,
                                        label: item.name,
                                        level: item.level,
                                        leaf: item.level > 2
                                    }))
                                    resolve(nodes);
                                }
                            })
                        }, 50);
                    }
                }
            },
        ],
        btnLoading: false,
    },
    methods: {
        /**
         * 字符串裁剪
         */
        sub (string) {
            string = string + ''
            var reg = /[\u4e00-\u9fa5]/g,    //专业匹配中文
                slice = string.substring(0, 15),
                chineseCharNum = (~~(slice.match(reg) && slice.match(reg).length)),
                realen = slice.length*2 - chineseCharNum;
            return string.substr(0, realen) + (realen < string.length ? "..." : "");
        }, 
        /**
         * 跳转到商城商品
         */
        mallGoods (id) {
            this.$navigate({
                r: 'mall/goods/edit',
                id: id
            })
        },
        /**
         * 移除商品
         */
        removeImport (ids) {
            this.btnLoading = true
            request({
                method: 'post',
                params: {
                    r: 'star-chain/storage/remove-import',
                },
                data: {
                    ids: ids
                },
            }).then(e => {
                if (e.data.code === 0) {
                    this.$message.success(e.data.msg);
                    setTimeout(() => {
                        this.$refs['table'].reload()
                        this.btnLoading = false
                    }, 2000)
                } else {
                    this.$message.error(e.data.msg)
                    this.btnLoading = false
                }
            }).catch(e => {})
        },
        /**
         * 重新导入
         */
        againImport (ids) {
            this.btnLoading = true
            request({
                method: 'post',
                params: {
                    r: 'star-chain/storage/again-import',
                },
                data: {
                    ids: ids
                },
            }).then(e => {
                if (e.data.code === 0) {
                    this.$message.success('导入成功')
                    this.btnLoading = false
                    setTimeout(() => {
                        this.getStorageList()
                    }, 1500)
                } else {
                    this.$message.error(e.data.msg)
                    this.btnLoading = false
                }
            })
        },
        /**
         * 批量移除
         */
        batchRemoveImport() {
            this.$confirm('确认操作吗？').then(() => {
                this.removeImport(this.selectIds)
            })
        },
        /**
         * 批量导入
         */
        batchAgainImport() {
            this.$confirm('确认操作吗？').then(() => {
                this.againImport(this.selectIds)
            })
        },
        /**
         * 全选
         */
        handleSelectionChange(val) {
            this.selectIds = val.map(item => {
                return item.id
            })
        },
    },
    mounted: function() {
        this.getCategoryList()
    },
})
</script>

<style>
    .goods {
        display: flex;
    }

    .goods-name {
        margin-left: 5px;
    }

    .page {
        margin-top: 10px;
    }
</style>