qimall/addons/Happiness/backend/views/store/detail-goods.php

    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>商品列表</span>
            <div style="float: right; margin: -5px 0">
                <el-button type="primary" size="small" @click="addGoods">添加商品</el-button>
            </div>
        </div>
        <div class="table-body">
            <el-tabs v-model="activeName2" @tab-click="handleClick2">
                <el-tab-pane v-for="item in goods_tabs" :key="item.value" :label="item.name" :name="item.value">
                    <el-form :inline="true" :model="search_data" size="small" class="demo-form-inline" style="margin-top:10px;">

                        <el-form-item>
                            <el-date-picker style="margin-top: 1px;" size="small" @change="changeTime" v-model="datetime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input size="small" placeholder="请输入商品名称" v-model="search_data.goods_name"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input size="small" placeholder="请输入商品ID精准搜索" v-model="search_data.goods_id"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="">
                            <el-select size="small" v-model="search_data.goods_type" placeholder="请选择商品类型" style="width: 100%;" clearable>
                                <el-option label="实体商品" :value="1"></el-option>
                                <el-option label="虚拟商品" :value="2"></el-option>
                                <el-option label="预约商品" :value="3"></el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item>
                            <el-button type="primary" @click="search">搜索</el-button>
                            <el-button type="primary" @click="multipleOff">批量下架</el-button>
                            <el-button type="primary" @click="multipleOn">批量上架</el-button>
                            <el-button type="danger" @click="clearSearch" v-if="show_clear_search_btn">清除条件</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table v-loading="listLoading" :data="list" stripe style="width: 100%" @sort-change="sortChange" @selection-change="handleSelectionChange">
                        <el-table-column v-if="item.value=='all'" type="selection" align="center" :selectable="checkSelectable" > </el-table-column>
                        <el-table-column label="ID" prop="id" align="center"></el-table-column>
                        
                        <el-table-column label="商品名称" min-width="200" prop="goods_name" align="center">
                            <template slot-scope="scope">
                                <div flex="cross:center">
                                    <div style="margin-right: 10px;">
                                        <el-image style="width: 50px; height: 50px;border-radius: 5px;" :src="scope.row.cover_pic"></el-image>
                                    </div>
                                    <div>
                                        <el-tooltip class="item" effect="dark" content="商品名称" placement="top">
                                            <span>{{scope.row.goods_name}}</span>
                                        </el-tooltip>
                                    </div>
                                    
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="分类" align="center">
                            <template slot-scope="scope">
                                <div class="goods-cat">
                                    <el-tag v-if="scope.row.cats && scope.row.cats.length > 0" size="mini">
                                        {{scope.row.cats[0].name}}
                                    </el-tag>
                                    <el-tooltip v-if="scope.row.cats && scope.row.cats.length > 1" placement="top">
                                        <div slot="content">
                                            <span v-for="item in scope.row.cats" :key="item.id">{{item.name}}&nbsp;</span>
                                        </div>
                                        <span>...</span>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="售价" prop="price" align="center" sortable="false">
                            <template slot-scope="scope">
                                <div size="small">{{scope.row.price}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="库存" prop="stock" align="center" sortable="false">
                            <template slot-scope="scope">
                                <div size="small" style="color: red;" v-if="scope.row.stock<=scope.row.stock_warning">{{scope.row.stock}}</div>
                                <div size="small" v-else>{{scope.row.stock}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="销售数量" prop="sales_num" align="center" sortable="false" min-width="100">
                            <template slot-scope="scope">
                                <div size="small">{{scope.row.sales_num}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="is_on_sale" align="center">
                            <template slot-scope="scope">
                                <el-switch
                                    v-model="scope.row.is_on_sale"
                                    :active-value="1"
                                    :inactive-value="0"
                                    @change="handle('is_on_sale', scope.row)"
                                    v-if="scope.row.can_change_status"
                                >
                                </el-switch>
                                <el-tooltip class="item" effect="dark" content="该商品仅支持快递配送" placement="left-start" v-else>
                                    <el-switch
                                        v-model="scope.row.is_on_sale"
                                        :active-value="1"
                                        :inactive-value="0"
                                        @change="handle('is_on_sale', scope.row)"
                                        disabled
                                    >
                                    </el-switch>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column label="来源" prop="goods_source" align="center">
                            <template slot-scope="scope">
                                <el-tag size="mini" :type="scope.row.goods_source == '' ? 'success' : 'danger'">
                                    {{scope.row.goods_source == '' ? '自营' : '供应链'}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" width="160" prop="created_at" align="center">
                            <template slot-scope="scope">
                                <div size="small">{{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" min-width="300" align="center">
                            <template slot-scope="scope">
                                <template>
                                    <el-button  type="text" @click="handle('edit',scope.row)">编辑</el-button>
                                    <el-button  type="text" @click="handle('destroy',scope.row)">删除</el-button>
                                </template>
                            </template>
                        </el-table-column>
                        
                    </el-table>
                    <div style="text-align: right;margin: 20px 0;">
                        <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-card>
    <el-dialog title="添加商品" :visible.sync="dialogFormVisible" width="70%">
        <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="160px">
            <el-form-item label="商品信息:" label-width="160px" prop="goods_id">
                <div v-if="ruleForm.goods_id == 0">
                    <com-dialog-screen-select  :url="'happiness/store-goods/search-goods-data'" :params="{store_id:store_id}"  @selected="goodsSelect" title="商品选择">
                        <el-button type="primary" size="small">选择商品</el-button>
                    </com-dialog-screen-select>
                </div>
                <el-table max-height="400" :data="goods_list" size="small" stripe border style="width: 60%;margin-top: 20px;margin-left: 55px">
                    <el-table-column prop="id" label="商品id" align="center" min-width="80">
                    </el-table-column>
                    <el-table-column label="商品" min-width="150">
                        <template slot-scope="scope">
                            <div style="display: flex;align-items: center;">
                                <el-image fit="cover" :src="scope.row.cover_pic" style="width: 40px;height: 40px;display: block;margin-right: 5px;flex-shrink: 0;"></el-image>
                                <div>
                                    <div>{{scope.row.goods_name}}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="stock" label="库存" align="center" min-width="80">
                    </el-table-column>

                    <el-table-column prop="num" label="操作" align="center" min-width="80" v-if="!ruleForm.id">
                        <template slot-scope="scope">
                            <el-button @click="delFun(scope.$index)" type="primary" size="mini">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-form-item>
            <el-form-item label="库存设置:" label-width="160px" v-if="ruleForm.goods_id">
                    <el-table max-height="400" :data="ruleForm.attr" size="small" stripe border style="width: 60%;margin-top: 20px;margin-left: 55px">
                        <el-table-column prop="name" label="规格" align="center" >
                            <template slot-scope="scope">{{scope.row.name || '默认规格'}}</template>
                        </el-table-column>
                        <el-table-column prop="price" label="售价" align="center" ></el-table-column>
                        <el-table-column prop="stock" label="幸福小店库存" align="center" >
                            <template slot-scope="scope">
                                <el-input type="text" v-model="scope.row.stock" onInput="value=value.replace(/[^\d]/g,'')"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false" size='small'>取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" :loading="btnLoading" size='small'>确 定</el-button>
        </div>
    </el-dialog>