qimall/backend/modules/mall/views/goods/index.php

<?php

use common\enums\AddonsEnum;
use common\helpers\AddonHelper;
use common\helpers\ComponentHelper;
use common\models\common\Addons;

ComponentHelper::loadComponentView('component/com-add-cat',__DIR__);
ComponentHelper::loadComponentView('com-export-dialog');

if (!empty($pay_success_jump_component)) {
    ComponentHelper::loadComponentView('pay-success-select-jump-url',
        AddonHelper::getAddonRootPath('PaySuccessJump') . 'backend/views/components');
}

?>
<style>
    <?= ComponentHelper::loadComponentView('index', __DIR__ . '/css', [],true, 'css'); ?>
</style>
<div id="app" v-cloak>
    <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="handle('edit')">添加商品</el-button>
                <el-button v-if="synchronize_goods_dialog > 0" type="primary" size="small" @click="syncGoods">同步商品</el-button>
<!--                //todo v2-->
<!--             <el-button type="primary" size="small">商品导出</el-button>-->
                <el-button class="all_button" type="primary" size="small" @click="importGoods" >批量导入</el-button>
                <com-export-dialog
                        style="float: right;margin-left: 10px;"
                        :field_list='export_list'
                        :action_url="export_url"
                        :params="search_data">
                </com-export-dialog>
            </div>
        </div>
        <div class="table-body">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-for="item in tabs" :key="item.value" :label="item.name" :name="item.value">
                    <el-form :inline="true" :model="search_data" size="small" class="demo-form-inline">
                        <el-form-item>
                            <el-button size="small" @click="$refs.cats.openDialog()">分类筛选</el-button>
                            <el-button size="small" v-if="search_data.cats && search_data.cats.length > 0" type="danger" @click="clearCat">清除分类</el-button>
                        </el-form-item>
                        <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="请输入商品名称" @keyup.enter.native="search" v-model="search_data.goods_name"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input size="small" placeholder="请输入商品ID精准搜索" @keyup.enter.native="search" 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="danger" @click="clearSearch" v-if="show_clear_search_btn">清除条件</el-button>
                        </el-form-item>
                    </el-form>

                    <template >
                        <el-button @click="upDownBatch(1)" size="mini">批量上架</el-button>
                        <el-button @click="upDownBatch(0)" size="mini">批量下架</el-button>
                    </template>
                    <el-button  @click="allDeleteBatch" size="mini">批量删除</el-button>
                    <el-button v-if="alipay_mini_app_id"  @click="batchSetTemplate" size="mini">批量设置广告模板</el-button>
                    <template>
                        <el-button @click="openScoreSetting(1)" size="mini">积分批量抵扣</el-button>
                        <el-button @click="openScoreSetting(2)" size="mini">积分批量赠送</el-button>
                    </template>
                    <el-table v-loading="listLoading" :data="list" stripe style="width: 100%" @sort-change="sortChange" @selection-change="handleSelectionChange" :row-key="(row) => { return row.id }">
                        <el-table-column type="selection" align="center" width="60" :reserve-selection="true"></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 v-if="goods_name_id != scope.row.id" flex="cross:center">
                                        <el-tooltip class="item" effect="dark" :content="scope.row.goods_name+''" placement="top">
                                            <span class="over2">{{scope.row.goods_name}}</span>
                                        </el-tooltip>
                                        <el-button class="edit-sort" type="text" @click="edit(scope.row,'goods_name')">
                                            <img src="resources/img/mall/order/edit.png" alt="">
                                        </el-button>
                                    </div>
                                    <div style="display: flex;align-items: center" v-else>
                                        <el-input style="min-width: 70px" size="mini" class="change" v-model="goods_name" autocomplete="off"></el-input>
                                        <el-button class="change-quit" type="text" style="color: #F56C6C;padding: 0 5px" icon="el-icon-error" circle @click="cancelEdit('goods_name')"></el-button>
                                        <el-button class="change-success" type="text" style="margin-left: 0;color: #67C23A;padding: 0 5px" icon="el-icon-success" circle @click="handle('goods_name',scope.row)">
                                        </el-button>
                                    </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" min-width="150">
                            <template slot-scope="scope">
                                <div v-if="scope.row.attr.length < 2">
                                    <div v-if="goods_stock_id != scope.row.id">
                                        <el-tooltip class="item" effect="dark" content="库存" placement="top">
                                            <span style="color: red;" v-if="scope.row.stock<=scope.row.stock_warning">{{scope.row.stock}}</span>
                                            <span>{{scope.row.stock}}</span>
                                        </el-tooltip>
                                        <el-button class="edit-sort" type="text" @click="edit(scope.row,'goods_stock')"
                                                   v-if="scope.row.goods_source == '' && scope.row.goods_type != 3">
                                            <img src="resources/img/mall/order/edit.png" alt="">
                                        </el-button>
                                    </div>
                                    <div style="display: flex;align-items: center" v-else>
                                        <el-input style="min-width: 70px" type="number" size="mini" class="change"
                                                  v-model="goods_stock" autocomplete="off"></el-input>
                                        <el-button class="change-quit" type="text" style="color: #F56C6C;padding: 0 5px"
                                                   icon="el-icon-error" circle
                                                   @click="cancelEdit('goods_stock')"></el-button>
                                        <el-button class="change-success" type="text"
                                                   style="margin-left: 0;color: #67C23A;padding: 0 5px"
                                                   icon="el-icon-success" circle
                                                   @click="handle('goods_stock',scope.row)">
                                        </el-button>
                                    </div>
                                </div>
                                <div v-else>
                                    <div>
                                        <el-tooltip class="item" effect="dark" content="库存" placement="top">
                                            <span style="color: red;" v-if="scope.row.stock<=scope.row.stock_warning">{{scope.row.stock}}</span>
                                            <span>{{scope.row.stock}}</span>
                                        </el-tooltip>
                                        <el-button class="edit-sort" type="text" @click="edit(scope.row,'attr_goods_stock')"
                                                   v-if="scope.row.goods_source == '' && scope.row.goods_type != 3">
                                            <img src="resources/img/mall/order/edit.png" alt="">
                                        </el-button>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="虚拟销量" prop="virtual_sales" align="center" width="150">
                            <!-- <template slot-scope="scope">
                                <div size="small">{{scope.row.virtual_sales}}</div>
                            </template> -->

                            <template slot-scope="scope">
                                <div v-if="virtual_sales_id != scope.row.id">
                                    <el-tooltip class="item" effect="dark" content="虚拟销量" placement="top">
                                        <span>{{scope.row.virtual_sales}}</span>
                                    </el-tooltip>
                                    <el-button class="edit-sort" type="text" @click="edit(scope.row,'virtual_sales')">
                                        <img src="resources/img/mall/order/edit.png" alt="">
                                    </el-button>
                                </div>
                                <div style="display: flex;align-items: center" v-else>
                                    <el-input style="min-width: 70px" type="number" size="mini" class="change" v-model="virtual_sales" autocomplete="off"></el-input>
                                    <el-button class="change-quit" type="text" style="color: #F56C6C;padding: 0 5px" icon="el-icon-error" circle @click="cancelEdit('virtual_sales')"></el-button>
                                    <el-button class="change-success" type="text" style="margin-left: 0;color: #67C23A;padding: 0 5px" icon="el-icon-success" circle @click="handle('virtual_sales',scope.row)">
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="销量数量" prop="sales" align="center">
                            <template slot-scope="scope">
                                <div size="small">{{scope.row.sales_num}}</div>
                            </template>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="is_on_sale" align="center">
                            <template slot-scope="scope">
                                <div size="small" v-if="scope.row.is_on_sale == 1">上架</div>
                                <div size="small" v-if="scope.row.is_on_sale == 0">下架</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sort" label="排序" width="150">
                            <template slot-scope="scope">
                                <div v-if="sort_id != scope.row.id">
                                    <el-tooltip class="item" effect="dark" content="排序" placement="top">
                                        <span>{{scope.row.sort}}</span>
                                    </el-tooltip>
                                    <el-button class="edit-sort" type="text" @click="edit(scope.row,'sort')">
                                        <img src="resources/img/mall/order/edit.png" alt="">
                                    </el-button>
                                </div>
                                <div style="display: flex;align-items: center" v-else>
                                    <el-input style="min-width: 70px" type="number" size="mini" class="change" v-model="sort" autocomplete="off"></el-input>
                                    <el-button class="change-quit" type="text" style="color: #F56C6C;padding: 0 5px" icon="el-icon-error" circle @click="cancelEdit('sort')"></el-button>
                                    <el-button class="change-success" type="text" style="margin-left: 0;color: #67C23A;padding: 0 5px" icon="el-icon-success" circle @click="handle('sort',scope.row)">
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="类型" prop="goods_type" align="center">
                            <template slot-scope="scope">
                                <div size="small" v-if="scope.row.goods_type == 1">实体商品</div>
                                <div size="small" v-if="scope.row.goods_type == 2">虚拟商品</div>
                                <div size="small" v-if="scope.row.goods_type == 3">预约商品</div>
                            </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 v-if="scope.row.addons_name!=''">
                                    <el-tooltip class="item" effect="dark" content="该商品正在参与营销活动,暂不可操作" placement="left-start">
                                        <el-tag size="small" type="warning">{{scope.row.addons_name}}</el-tag>
                                    </el-tooltip>
                                </template>
                                <template v-else="group_buy_active_arr[scope.row.id]">
                                    <el-button type="text" @click="handle('edit',scope.row)">编辑</el-button>
                                    <el-button type="text" @click="handle('destroy',scope.row)">删除</el-button>
                                    <el-button type="text" @click="handle('is_on_sale',scope.row)">
                                        <span size="small" v-if="scope.row.is_on_sale == 0">上架</span>
                                        <span size="small" v-if="scope.row.is_on_sale == 1">下架</span>
                                    </el-button>
                                </template>
                                <el-button v-if="is_compliance == 0" type="text" @click="handle('model',scope.row)">模式</el-button>

                                <el-dropdown style="margin-left: 10px">
                                    <el-button type="text" class="el-dropdown-link">
                                      更多<i class="el-icon-arrow-down el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item>
                                            <div style="width: 100%; height: 100%;" @click="onCopyAlipayMiniQrCodeUrl(scope.row.id)">
                                                <el-button type="text" class="copy_btn">复制支付宝小程序短链接</el-button>
                                            </div>
                                        </el-dropdown-item>
                                        <el-dropdown-item v-if="show_sku_dialog == 1">
                                            <div style="width: 100%; height: 100%;" @click="handle('sku', scope.row)">
                                                <el-button type="text">规格</el-button>
                                            </div>
                                        </el-dropdown-item>
                                        <el-dropdown-item>
                                            <div style="width: 100%; height: 100%;" @click="handle('copy', scope.row)">
                                                <el-button type="text">复制商品</el-button>
                                            </div>
                                        </el-dropdown-item>
                                        <el-dropdown-item v-if="pay_success_jump > 0">
                                            <div style="width: 100%; height: 100%;" @click="onChangeJumpUrl(scope.row)">
                                                <el-button type="text">支付后跳转设置</el-button>
                                            </div>
                                        </el-dropdown-item>
                                        <el-dropdown-item>
                                            <div style="width: 100%; height: 100%;"  @click="copyLink(scope.row.h5_url)">
                                                <el-button type="text">复制h5链接</el-button>
                                            </div>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="text-align: right;margin: 20px 0;">
                        <el-pagination @size-change="handleSizeChange" @current-change="pagination" v-if="pageCount > 0" :current-page="page"  background layout="prev, pager, next, sizes, jumper"  :page-sizes="[10, 20, 50, 100]"  :page-count="pageCount" :page-size="pageSize"></el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-card>

    <el-dialog :close-on-click-modal="false" title="批量选择广告模版" :visible.sync="goodsDialogVisible" width="50%">
	    <el-table stripe v-loading="templateListLoading" :data="templateList" style="margin-top: 5px;"
	            @selection-change="selectionChange">
	      <el-table-column width="100px" label="ID" props="id" align="center">
	          <template slot-scope="props">
	              <el-radio-group v-model="tempory_template_id" @change="selectionChange(props.row)">
	                  <el-radio :label="props.row.id"></el-radio>
	              </el-radio-group>
	          </template>
	      </el-table-column>
	      <el-table-column label="模版编号" prop="id"></el-table-column>
          <el-table-column label="模版名称" prop="name"></el-table-column>
          <el-table-column label="是否为默认模版" prop="is_default">
            <template slot-scope="scope">
                <div size="small" v-if="scope.row.is_default == 1">是</div>
                <div size="small" v-else>否</div>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="created_at">
            <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="状态" prop="status">
            <template slot-scope="scope">
                <div size="small" v-if="scope.row.status == 1">启用</div>
                <div size="small" v-if="scope.row.status == 0">禁用</div>
            </template>
          </el-table-column>
<!--          <el-table-column label="已绑定推荐人" prop="parent_name"></el-table-column>-->
        </el-table>
        <div style="text-align: right;margin: 20px 0;">
            <el-pagination @current-change="templatePagination" background layout="prev, pager, next"
                :page-count="templatePageCount" :current-page="templatePage"></el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="goodsDialogVisible = false">取 消</el-button>
            <el-button :loading="btnLoading" type="primary" @click="confirmSelectTemplate">确认</el-button>
        </span>
	</el-dialog>

    <!--支付宝小程序url复制-->
    <el-dialog :close-on-click-modal="false" title="支付支付宝小程序链接" :visible.sync="copyAlipayMiniDialogVisible" width="50%">
        <el-form>
            <el-form-item label="商品页面路径及参数">
                <el-input v-model="alipay_goods_path" :disabled="true">
                    <template #append>
                        <el-button @click="onCopyAlipayUrl(alipay_goods_path, 'btn-copy-alipay-goods-path')" class="btn-copy-alipay-goods-path">复制</el-button>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="支付宝小程序URL(参数已转)">
                <el-input v-model="alipay_mini_goods_path" :disabled="true">
                    <template #append>
                        <el-button @click="onCopyAlipayUrl(alipay_mini_goods_path, 'btn-copy-alipay-mini-goods-path')" class="btn-copy-alipay-mini-goods-path">复制</el-button>
                    </template>
                </el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="copyAlipayMiniDialogVisible = false">关 闭</el-button>
        </span>
    </el-dialog>

    <!-- 查看规格 -->
    <el-dialog :close-on-click-modal="false" title="查看规格" :visible.sync="skuDialogVisible" width="50%">
        <div>
            <div style="text-align: center; color: red; font-size: 18px; padding-bottom: 15px;">
                <p><strong>若未启用自定义商品编码，请将第三方对应的商品编码修改为规格ID</strong></p>
                <p><strong>若启用自定义商品编码，则以输入的商品编码为准</strong></p>
            </div>
            <el-form :rules='rules' ref='ruleForm' :model="ruleForm">
                <el-table border v-loading="skuLoading" :data="ruleForm.skus">
                    <el-table-column prop="id" label="规格ID" width="180"> </el-table-column>
                    <el-table-column width="180" prop="price" label="销售价格"> </el-table-column>
                    <el-table-column prop="name" label="规格名称">
                        <template slot-scope="scope">
                            {{scope.row.name != '' ? scope.row.name : '默认规格'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="是否启用商品编码">
                        <template slot="header" slot-scope="scope">
                            <span>是否启用商品编码</span>
                            <el-switch v-model="ruleForm.is_show_code" :active-value="1" :inactive-value="0"></el-switch>
                        </template>
                        <template slot-scope="scope">
                            <el-form-item class='form-item' :prop="'skus.'+ scope.$index + '.spec_no'" :rules="rules.spec_no" label='' v-if="ruleForm.is_show_code==1">
                                <el-input v-model='scope.row.spec_no' size="small"></el-input>       
                            </el-form-item>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div style="margin-top:10px;font-weight:bold;">
                <p>注意：若商品的规格进行变动（包括但不限于新增，删除，移动规格位置），规格ID会变动，</p>
                <p>对应自定义商品编码会清空，需及时重新输入，否则订单会推送失败；</p>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="skuDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="setSkusData">确认</el-button>
        </span>
    </el-dialog>

    <!-- 同步商品至门店 -->
    <el-dialog :close-on-click-modal="false" title="同步商品" :visible.sync="syncGoods2Store" width="50%" center>
        <div class="el-row" style="margin-bottom: 16px;">
            <div class="el-col el-col-10">
                <el-radio-group v-model="syncType" @change="changeSyncType">
                    <el-radio :label="0">指定门店</el-radio>
                    <el-radio :label="1">全部门店</el-radio>
                </el-radio-group>
            </div>
        </div>
        <div class="el-row">
            <div class="el-col el-col-21">
                <el-input v-model="storeSearch.store_name" :disabled="syncType == 1" size="small" clearable @clear="searchStore" placeholder="请输入名称或者ID"></el-input>
            </div>
            <div class="el-col el-col-3" style="display:flex;justify-content:center">
                <el-button slot="append" icon="el-icon-search" :disabled="syncType == 1" @click="searchStore" type="primary" size="small" style="width:100px"></el-button>
            </div>
        </div>
        <el-table border v-loading="syncGoods2StoreLoading" :data="syscStoreList" style="margin-top: 5px;" ref="multipleTable" @select-all="handleSelectAll" @select="handleSyncSelect" :row-key="getRowKey">
            <el-table-column type="selection" :selectable='checkboxT' :reserve-selection="true" width="60" align='center'>
            </el-table-column>
            <el-table-column label="门店id" prop="id" align="center"></el-table-column>
            <el-table-column label="门店名称" prop="store_name" align="center">
                <template slot-scope="scope">
                    <div style="display:flex;justify-content:center">
                        <div style="padding-right:3px;">
                            <el-image style="width: 50px; height: 50px; border-radius:3px;" :src="scope.row.logo_img" fit="fit">
                            </el-image>
                        </div>
                        <div style="display:flex;align-items:center">
                            {{scope.row.store_name}}
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="会员" prop="store_name" align="center">
                <template slot-scope="scope">
                    <div style="display:flex;justify-content:center">
                        <div style="padding-right:3px;">
                            <el-image style="width: 50px; height: 50px; border-radius:3px;" :src="scope.row.avatar_url" fit="fit">
                            </el-image>
                        </div>
                        <div style="display:flex;align-items:center">
                            {{scope.row.nickname}}
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="店长姓名" prop="shop_owner" align="center"></el-table-column>

        </el-table>
        <div style="text-align: right;margin: 20px 0;">
            <el-pagination @current-change="storePagination" background layout="prev, pager, next" :page-count="storePageCount" :current-page="storePage"></el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="syncGoods2Store = false" size="small">取 消</el-button>
            <el-button :loading="btnLoading" type="primary" @click="confirmSyncGoods" size="small">确认</el-button>
        </span>
    </el-dialog>

    <!-- 分类筛选 -->
    <com-add-cat ref="cats" :new-cats="search_data.cats" @select="selectCat" :mch_id="mch_id"></com-add-cat>
    <textarea style="opacity: 0;width: 0;height: 0;" id="copy-container"></textarea>

    <!-- 绑定跳转链接 -->
    <pay-success-select-jump-url :goods="currentItem" :show="paySuccessSelectJumpUrlDialogVisible"
                                 @hide="hidePaySuccessSelectJumpUrlDialogVisible"></pay-success-select-jump-url>

    <template>
        <?= ComponentHelper::loadComponentView('batch-set-score', __DIR__.'/part') ?>
    </template>

    <el-dialog
            :close-on-click-modal="false"
            title="库存修改"
            :visible.sync="attrStockDialogVisible"
            width="70%"
    >
        <!-- 批量操作栏 -->
        <div class="batch-bar" style="display:flex;align-items:center;box-sizing: border-box; padding: 0 0 20px 11px">
            <el-checkbox
                    v-model="selectAll"
                    :indeterminate="isIndeterminate"
                    @change="handleSelectAllAttr"
            >全选</el-checkbox>
            <div style="box-sizing: border-box;padding-left: 40px;">批量设置:</div>
            <el-input-number
                    v-model="batchValue"
                    precision="0"
                    :min="0"
                    :step="1"
                    style="width: 200px; margin-left: 15px;"
                    placeholder="批量设置库存"
            ></el-input-number>
            <el-button
                    type="primary"
                    style="margin-left: 10px;"
                    @click="applyBatchStock"
            >确定</el-button>
        </div>

        <!-- 动态表格 -->
        <el-table
                ref="stockTable"
                :data="processedStockData"
                v-loading="attrStockListLoading"
                border
                stripe
                @selection-change="handleSelectionChangeAttr"
        >
            <!-- 选择列 -->
            <el-table-column type="selection" width="55"></el-table-column>

            <!-- 动态属性列 -->
            <el-table-column
                    v-for="(group, index) in attr_goods_stock_group"
                    :key="group.attr_group_id"
                    :label="group.attr_group_name"
                    align="center"
            >
                <template slot-scope="{ row }">
                    {{ row[`colum${index + 1}`] }}
                </template>
            </el-table-column>

            <!-- 库存列 -->
            <el-table-column label="库存" align="center">
                <template slot-scope="{ row }">
                    <el-input-number
                            v-model.number="row.stock"
                            :min="0"
                            :step="1"
                            controls-position="right"
                    ></el-input-number>
                </template>
            </el-table-column>
        </el-table>

        <span slot="footer" class="dialog-footer">
      <el-button @click="attrStockDialogVisible = false">取消</el-button>
      <el-button
              type="primary"
              :loading="btnLoading"
              @click="handleConfirm"
      >确认修改</el-button>
    </span>
    </el-dialog>

</div>
<script src="/resources/unpkg/clipboard@1.5.12/dist/clipboard.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        props: {
            import_goods_url: {
                type: String,
                default: 'mall/goods/import-goods'
            },
        },
        data() {
            return {
                goods_name: '',
                goods_id: '',
                tabs: [{
                        name: '全部',
                        value: 'all'
                    },
                    {
                        name: '销售中',
                        value: 'onsale'
                    },
                    {
                        name: '下架中',
                        value: 'offline'
                    },
                    {
                        name: '售罄',
                        value: 'sell-out'
                    },
                    {
                        name: '库存不足',
                        value: 'stock-lack'
                    },
                ],
                activeName: 'all',
                list: [],
                listLoading: false,
                page: 1,
                pageCount: 0,
                pageSize: 10,
                mch_id: 0, // 这个地方不知道要怎么获取
                searchCats: [],
                datetime: [],
                search_data: { // 筛选条件
                    type: null,
                    cats: [],
                    start: null,
                    end: null,
                    goods_id: null,
                    goods_name: null,
                    choose_list: null,
                    goods_type: null,
                },
                sort: 0,
                sort_id: 0,
                virtual_sales: 0,
                virtual_sales_id: 0,
                goods_name_id: 0,
                batchUpdateStatusUrl: '',
                choose_list: [],
                chooseList: [],
                is_bath: 1,
                btnLoading: false,
                batchExtraParams: [],
                export_url: 'mall/goods/export-excel',
                export_list: {},
                group_buy_active_arr: {},
                goodsDialogVisible: false,
                templateList: [],
                templateListLoading: false,
                tempory_template_id: 0,
                templatePage: 1,
                templatePageCount: 0,
                alipay_mini_app_id: null,
                synchronize_goods_dialog: null,
                mall_sign: '',
                copyAlipayMiniDialogVisible: false,
                alipay_goods_path: '',
                alipay_mini_goods_path: '',
                show_sku_dialog: 0,
                pay_success_jump: 0,
                skuDialogVisible: false,
                skuLoading: false,
                paySuccessSelectJumpUrlDialogVisible: false,
                currentItem: {},
                ruleForm: {
                    is_show_code: 0,
                    skus: [],
                },
                syncGoods2Store: false,
                syncGoods2StoreLoading: false,
                syscStoreList: [],
                selectedRowIds: [],
                syncType: 1,
                storePage: 1,
                storePageCount: 0,
                storeSearch: {
                    store_name: ''
                },
                goodsScore: {
                    goodsScoreDeductVisible: false,
                    goodsScoreSetVisible: false,
                    give:{give_num: 0,give_type: 1, settlement: 0},
                    deduct:{deduct_num: 0, deduct_type: 1, type: 1},
                },
                goods_stock_id:0,
                goods_stock: 0,
                is_compliance :  <?= $is_compliance; ?>,
                attrDialogVisible: true,
                attr_goods_stock_id: 0,
                attr_goods_stock: [],
                attr_goods_stock_group: [],
                attrStockDialogVisible: false,
                selectAll: false,
                isIndeterminate: false,
                attrStockListLoading: false,
                batchValue: null,
                selectedRows: [],
                processedStockData: [],
                rules: {
                    spec_no: [
                        {required: true, message: '请输入商家编码', trigger: 'blur'},
                    ],
                },
            };
        },
        mounted: function() {
            this.page = Number(getQuery('page')) || 1;
            if(this.page > 1){
                this.pagination(this.page);
            }
            this.getList();
        },
        computed: {
            show_clear_search_btn: function() {
                return !isEmpty(this.search_data.cats) || !isEmpty(this.search_data.start) ||
                    !isEmpty(this.search_data.end) || !isEmpty(this.search_data.goods_id) ||
                    !isEmpty(this.search_data.goods_name);
            }
        },
        watch: {
            chooseList: {
                handler(newValue, oldValue) {
                    this.search_data.choose_list = newValue
                },
            },
            deep: true,
            immediate: true
        },
        methods: {
            getRowKey(row) {
                return row.id;
            },
            handleSelectAll() {
                let _this = this
                if(_this.syncType == 1){
                    return
                }
                _this.syscStoreList.map(function(item, index) {
                    _this.selectedRowIds.push(item.id)
                })

            },
            handleSyncSelect(selection, row) {
                this.selectedRowIds.push(row.id)
            },
            importGoods() {
                navigateTo({
                    r: this.import_goods_url,
                    page: this.page
                });
            },
            selectCat(arr) {
                this.search_data.cats = [];
                arr.forEach(it => this.search_data.cats.push(it.id))
                this.getList()
            },
            clearCat() { // 清除分类
                this.search_data.cats = []
                this.getList()
            },
            changeTime(e) {
                // console.log(e)
                this.search_data.start = e[0]
                this.search_data.end = e[1]
            },
            handleClick(res) { //标签页切换
                if (this.search_data.status == this.activeName) return;
                this.search_data.type = this.activeName;
                this.getList();
            },
            sortChange(row) {
                if (row.prop) {
                    this.search_data.sort_field = row.prop;
                    this.search_data.sort_type = row.order == "descending" ? 'desc' : 'asc';
                } else {
                    this.search_data.sort_prop = null;
                    this.search_data.sort_type = null;
                }
                this.getList();
            },
            search() {
                this.page = 1;
                this.getList();
            },
            // 全选单前页
            handleSelectionChange(val) {
                let self = this;
                self.chooseList = [];
                val.forEach(function(item) {
                    self.chooseList.push(item.id);
                })
            },
            checkChooseList() {
                if (this.isAllChecked) {
                    this.dialogTitle = '已选所有商品';
                    return true;
                }
                if (this.chooseList.length > 0) {
                    this.dialogTitle = '已选商品' + this.chooseList.length + '种';
                    return true;
                }
                this.$message.warning('请先勾选要设置的商品');
                return false;
            },
            upDown(command) {
                let self = this;
                if (!self.checkChooseList()) {
                    return false;
                }
                if (command === 1) {
                    this.statusChange(1)
                }
                let text = this.isAllChecked ? '警告:批量' + (command === 1 ? '上架' : '下架') + '所有商品?' : '批量' + (command === 1 ? '上架' : '下架') + ',是否继续';
                this.batchAction({
                    url: self.batchUpdateStatusUrl,
                    content: text,
                    params: {
                        batch_ids: this.chooseList,
                        status: command,
                        type: 'is_on_sale',
                    }
                });
            },
            upDownBatch(command) {
                operate_type = command == 1 ? '上架' : '下架';
                this.$confirm('是否' + operate_type + '该商品?', '警告', {type: 'warning'}).then(() => {
                    let self = this;
                    let ids = this.getIds();
                    request({
                        params: {
                            r: 'mall/goods/do-on-sale-batch',
                        },
                        method: 'post',
                        data: {
                            id:ids,
                            is_on_sale:command
                        }
                    }).then(e => {
                        if (e.data.code == 0) {
                            self.$message.success(e.data.msg);
                            self.getList();
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                });

            },
            getIds(){
                let self = this;
                if(this.chooseList.length==0){
                    self.$message.error('请选择商品');
                    return [];
                }
                let listMap = [];
                self.list.forEach(function (value, k) {
                    listMap[value.id] = value;
                });
                let goods_name = '';
                let ids = [];
                this.chooseList.forEach(function (id, index){
                    var value = listMap[id]
                    if(value && value.addons_name){
                        goods_name = goods_name + '【' + value.goods_name + '】';
                    }else{
                        ids.push(id);
                    }
                });
                if(goods_name){
                    self.$message.error('商品' + goods_name + '正在参与营销活动，不可以操作');
                    return [];
                }
                return ids
            },
            allDeleteBatch() {
                this.$confirm('警告:是否确认删除所有商品?').then(() => {
                    let self = this;
                    let ids = this.getIds();
                    if(ids.length==0){
                        return false;
                    }
                    request({
                        params: {
                            r: 'mall/goods/del-batch',
                        },
                        method: 'post',
                        data: {
                            id:ids
                        }
                    }).then(e => {
                        if (e.data.code == 0) {
                            self.$message.success(e.data.msg);
                            self.getList();
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                });

            },
            allDelete() {
                let self = this;
                if (!self.checkChooseList()) {
                    return false;
                }

                let text = this.isAllChecked ? '警告:是否确认删除所有商品?' : '是否确认删除选中的商品?';
                this.batchAction({
                    url: self.batchDestroyUrl,
                    content: text,
                    params: {
                        batch_ids: this.chooseList,
                        type: 'destroy',
                    }
                });
            },
            // 上架状态开关，弹框文字提示
            statusChange(res) {
                let text = this.statusChangeText;
                if (res && text) {
                    this.$alert(text, '提示', {
                        confirmButtonText: '确定',
                        callback: action => {}
                    });
                }
            },
            batchAction(data) {
                let self = this;
                self.is_bath = 2;
                self.batchExtraParams.forEach(function (item) {
                    data.params[item.key] = item.value;
                });
                self.$confirm(data.content, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.btnLoading = true;
                    let goods_name = '';
                    let num = 0;
                    data.params.batch_ids.forEach(function (item, key) {
                        //判断营销产品不给操作
                        let is_make = 1;
                        self.list.forEach(function (value, k) {
                            if (item == value.id && value.addons_name) {
                                goods_name = goods_name + '【' + value.goods_name + '】';
                                is_make = 2;
                            }
                        });
                        if (is_make == 1) {
                            num++;
                            param = {
                                id: item,
                                is_on_sale: data.params.status,
                                type: data.params.type,
                                data_index: key,
                                data_count_index: data.params.batch_ids.length,
                                goods_name: goods_name,
                            };
                            self.send(param);
                        } else {
                            if (key == (data.params.batch_ids.length - 1)) {
                                if (goods_name) {
                                    self.$message.success('商品' + goods_name + '正在参与营销活动，不可以操作，其他商品操作成功');
                                } else {
                                    self.$message.success('操作成功');
                                }
                                self.getList();
                            }
                        }
                    });

                }).catch((e) => {

                });

            },
            clearSearch() {
                this.search_data.cats = [];
                this.search_data.start = null;
                this.search_data.end = null;
                this.search_data.goods_id = null;
                this.search_data.goods_name = null;
                this.datetime = [];
                this.getList();
            },
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'edit':
                        let params = {
                            r: 'mall/goods/edit'
                        };
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        navigateTo(params,true);
                        break;
                    case 'model': // 模式跳转
                        param = {
                            r: 'mall/goods/goods-model'
                        };
                        if (id) param = Object.assign(param, {
                            id: id
                        });
                        navigateTo(param);
                        break;
                    case 'destroy':
                        param = {
                            id: data.id,
                            type
                        };
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.del(param)
                        })
                        break;
                    case 'sort':
                        param = {
                            id: id,
                            sort: this.sort,
                            type
                        };
                        this.do_sort(param);
                        break;
                    case 'goods_name':
                        param = {
                            id: id,
                            goods_name: this.goods_name,
                            type
                        };
                        this.do_goods_name(param);
                        break;
                    case 'virtual_sales':
                        param = {
                            id: id,
                            virtual_sales: this.virtual_sales,
                            type
                        };
                        this.do_virtual_sales(param);
                        break;
                    case 'is_on_sale':
                        param = {
                            id: id,
                            is_on_sale: data.is_on_sale == 0 ? 1 : 0,
                            type
                        };
                        operate_type = data.is_on_sale == 0 ? '上架' : '下架';
                        this.$confirm('是否' + operate_type + '该商品?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.do_on_sale(param)
                        })
                        break;
                    case 'sku':
                        this.ruleForm.is_show_code = 0;
                        this.skuDialogVisible = true;
                        this.getSku(data)
                        break
                    case 'copy':
                        param = {
                            id: data.id
                        };
                        this.$confirm('是否复制该商品?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.copy_goods(param)
                        })
                        break;
                    case 'goods_stock':
                        param = {
                            id: id,
                            stock: this.goods_stock,
                            type
                        };
                        this.do_goods_stock(param);
                        break;
                }
                this.cancelEdit(type);
            },
            send(params) {
                let self = this;
                request({
                    params: {
                        r: 'mall/goods/index',
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (!params.data_count_index || (params.data_count_index - 1) == params.data_index) {
                        if (e.data.code == 0) {
                            if (params.goods_name) {
                                self.$message.success('商品' + params.goods_name + '正在参与营销活动，不可以操作，其他商品操作成功');
                            } else {
                                self.$message.success(e.data.msg);
                            }
                            self.getList();
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            del(params) {
                let self = this;
                request({
                    params: {
                        r: 'mall/goods/del',
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            do_on_sale(params) {
                let self = this;
                request({
                    params: {
                        r: 'mall/goods/do-on-sale',
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            copy_goods(params) {
                let self = this;
                request({
                    params: {
                        r: 'mall/goods/copy-goods',
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            do_sort(params) {
                let self = this;
                request({
                    params: {
                        r: 'mall/goods/do-sort',
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            do_goods_name(params) {
                let self = this;
                request({
                    params: {
                        r: 'mall/goods/do-goods-name',
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            do_virtual_sales(params) {
                let self = this;
                request({
                    params: {
                        r: 'mall/goods/do-virtual-sales',
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            do_goods_stock(params) {
                let self = this;
                request({
                    params: {
                        r: 'mall/goods/do-goods-stock',
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            edit(row, type) {
                switch (type) {
                    case 'sort':
                        this.sort = row.sort;
                        this.sort_id = row.id;
                        break;
                    case 'goods_name':
                        this.goods_name_id = row.id;
                        this.goods_name = row.goods_name;
                        break;
                    case 'virtual_sales':
                        this.virtual_sales_id = row.id;
                        this.virtual_sales = row.virtual_sales;
                        break;
                    case 'goods_stock':
                        this.goods_stock_id = row.id;
                        this.goods_stock = row.stock;
                        break;
                    case 'attr_goods_stock':
                        this.attr_goods_stock_id = row.id;
                        this.attr_goods_stock = row.attr;
                        this.attr_goods_stock_group = JSON.parse(row.attr_groups);
                        this.processedStockData = this.stockData();
                        this.batchValue = null;
                        this.attrStockDialogVisible = true;
                        break;
                }
            },
            stockData() {
                return this.attr_goods_stock.map(item => {
                    const signIdStr = String(item.sign_id);
                    const signIds = !signIdStr.includes(':') ? [item.sign_id] : signIdStr.split(':');

                    const processedItem = { id: item.id, stock: item.stock }

                    this.attr_goods_stock_group.forEach((group, index) => {
                        const attrId = signIds[index]
                        const attr = group.attr_list.find(a => a.attr_id == attrId)
                        processedItem[`colum${index + 1}`] = attr ? attr.attr_name : '未知属性'
                    })

                    return processedItem
                })
            },
            handleSelectAllAttr(val) {
                this.$refs.stockTable.clearSelection()
                if (val) {
                    this.processedStockData.forEach(row => {
                        this.$refs.stockTable.toggleRowSelection(row)
                    })
                }
            },

            // 选择变化
            handleSelectionChangeAttr(selection) {
                this.selectedRows = selection
                const total = this.processedStockData.length
                this.selectAll = selection.length === total
                this.isIndeterminate = selection.length > 0 && selection.length < total
            },

            // 应用批量设置
            applyBatchStock() {
                if (this.batchValue === null) return
                this.selectedRows.forEach(row => {
                    row.stock = this.batchValue
                })
                // this.batchValue = null
            },

            // 确认操作
            async handleConfirm() {
                try {
                    this.btnLoading = true
                    const attr_stock = this.processedStockData.map(item => ({
                        id: item.id,
                        stock: item.stock
                    }))

                    let self = this;
                    self.attrStockListLoading = true;
                    request({
                        params: {
                            r: 'mall/goods/do-goods-attr-stock',
                        },
                        method: 'post',
                        data: {
                            id: this.attr_goods_stock_id,
                            type: 'attr_stock',
                            attr_stock: attr_stock,
                        }
                    }).then(e => {
                        if (e.data.code == 0) {
                            self.$message.success(e.data.msg);
                            this.$message.success('库存更新成功')
                            this.attrStockDialogVisible = false
                            self.attrStockListLoading = false;
                            self.getList();
                        } else {
                            self.$message.error(e.data.msg);
                            self.attrStockListLoading = false;
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                    return false;
                    // 这里调用保存接口
                    // await saveStock(payload)
                } catch (error) {
                    console.error(error)
                } finally {
                    this.btnLoading = false
                }
            },
            cancelEdit(type) {
                switch (type) {
                    case 'sort':
                        this.sort = 0;
                        this.sort_id = 0;
                        break;
                    case 'goods_name':
                        this.goods_name = '';
                        this.goods_name_id = 0;
                        break;
                    case 'virtual_sales':
                        this.virtual_sales = 0;
                        this.virtual_sales_id = 0;
                        break;
                    case 'goods_stock':
                        this.goods_stock_id = 0;
                        this.goods_stock = 0;
                        break;
                }
            },
            searchClick() {
                this.page = 1;
                this.getList();
            },
            handleSizeChange(val) {
                let self = this;
                self.limit = val;
                self.getList();
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                sessionStorage.setItem('goodsPage', self.page)
                self.getList();
            },
            // 获取商品列表
            getList() {
                let self = this;
                let basic_params = {
                    r: 'mall/goods/index',
                    page: self.page,
                    limit:self.limit
                };
                params = Object.assign(basic_params, this.search_data);
                if (self.listLoading == false) {
                    self.listLoading = true;
                    request({
                        params: params,
                        method: 'get',
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code == 0) {
                            self.list = e.data.data.list;
                            self.group_buy_active_arr = e.data.data.group_buy_active_arr;
                            self.pageCount = e.data.data.page_count;
                            self.pageSize = e.data.data.page_size;
                            this.export_list = e.data.data.export_list;
                            this.alipay_mini_app_id = e.data.data.alipay_mini_app_id
                            this.synchronize_goods_dialog = e.data.data.synchronize_goods_dialog
                            this.mall_sign = e.data.data.mall_sign
                            this.show_sku_dialog = e.data.data.show_sku_dialog
                            this.pay_success_jump = e.data.data.pay_success_jump
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        self.$message.error(e.data.msg);
                        self.listLoading = false;
                    });
                }
            },
            selectionChange(e) {
                this.tempory_template_id = e.id;
            },
            templatePagination(currentPage) {
                this.templatePage = currentPage;
                this.getTemplateList();
            },
            storePagination(currentPage) {
                this.storePage = currentPage;
                this.getStoreList();
            },
            searchStore(){
                this.storePage = 1
                this.getStoreList()
            },
            getStoreList() {
                let _this = this;
                let basic_params = {
                    r: 'store/store/index',
                    page: this.storePage,
                    limit: 10,
                    status: 1,
                    ..._this.storeSearch
                };
                params = Object.assign(basic_params, {});
                if (_this.syncGoods2StoreLoading == false) {
                    _this.syncGoods2StoreLoading = true;
                    request({
                        params: params,
                        method: 'get',
                    }).then(e => {
                        _this.syncGoods2StoreLoading = false;
                        if (e.data.code == 0) {
                            _this.syscStoreList = e.data.data.list;
                            _this.storePageCount = e.data.data.page_count;
                            if(_this.syncType == 1){
                                for (i = 0; i < _this.syscStoreList.length; i++) {
                                    this.$refs.multipleTable.toggleRowSelection(_this.syscStoreList[i],true);
                                }
                            }
                        } else {
                            _this.$message.error(e.data.data.msg);
                        }
                    }).catch(e => {
                        _this.$message.error(e.data.data.msg);
                        _this.syncGoods2StoreLoading = false;
                    });
                }
            },
            getTemplateList() {
                let self = this;
                let basic_params = {
                    r: 'mall/goods-template/index',
                    status: 1,
                    limit: 12
                };
                params = Object.assign(basic_params, {});
                if (self.templateListLoading == false) {
                    self.templateListLoading = true;
                    request({
                        params: params,
                        method: 'get',
                    }).then(e => {
                        self.templateListLoading = false;
                        if (e.data.code == 0) {
                            self.templateList = e.data.data.list;
                            self.pageCount = e.data.data.page_count;
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        self.$message.error(e.data.msg);
                        self.templateListLoading = false;
                    });
                }
            },
            batchSetTemplate() {
                if (this.chooseList.length <= 0) {
                    this.$message.error('请选择要设置广告模板的商品');
                    return false;
                }
                this.goodsDialogVisible = true;
                this.getTemplateList();
            },
            syncGoods() {
                if (this.chooseList.length <= 0) {
                    this.$message.error('请选择要同步的商品');
                    return false;
                }
                this.syncGoods2Store = true;
                this.getStoreList();
            },
            confirmSelectTemplate() {
                if (this.tempory_template_id == 0) {
                    this.$message.error('请选择要设置的广告模板');
                    return false;
                }
                this.$confirm('确定设置广告模板?', '警告', {
                    type: 'warning'
                }).then(() => {
                    this.btnLoading = true;
                    request({
                        params: {
                            r: 'mall/goods-template/batch-set'
                        },
                        method: 'post',
                        data: {
                            chooseList: this.chooseList,
                            template_id: this.tempory_template_id
                        }
                    }).then(res => {
                        if (res.data.code == 0) {
                            this.$message.success(res.data.msg);
                        } else {
                            this.$message.error(res.data.msg);
                        }
                        self.getList();
                    }).catch(err => {
                        console.info(err);
                        this.goodsDialogVisible = false;
                        this.btnLoading = false;
                    })
                });
            },
            confirmSyncGoods() {
                if (this.syncType == 0 && this.selectedRowIds.length <= 0) {
                    this.$message.error('请选择要同步的门店');
                    return false;
                }
                this.$confirm('确定要同步商品到这些门店?', '警告', {
                    type: 'warning'
                }).then(() => {
                    this.btnLoading = true;
                    request({
                        params: {
                            r: 'mall/goods/sync-goods-store'
                        },
                        method: 'post',
                        data: {
                            selected_goods_ids: this.chooseList,
                            selected_store_ids: this.selectedRowIds,
                            sync_type: this.syncType,
                        }
                    }).then(res => {
                        if (res.data.code == 0) {
                            this.$message.success(res.data.msg);
                            this.syncGoods2Store = false;
                            this.btnLoading = false;
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    }).catch(err => {
                        console.info(err);
                        this.syncGoods2Store = false;
                        this.btnLoading = false;
                    })
                });
            },
            onCopyAlipayMiniQrCodeUrl(id) {
                let query = encodeURIComponent(`proId=${id}`)
                this.alipay_mini_goods_path = `alipays://platformapi/startapp?appId=${this.alipay_mini_app_id}&page=/plugins/pages/goods/detail&query=${query}`
                this.alipay_goods_path = `&page=/plugins/pages/goods/detail?proId=${id}`
                this.copyAlipayMiniDialogVisible = true;
            },
            onCopyAlipayUrl(str, btn) {
                var clipboard = new Clipboard(`.${btn}`, {
                    text: function() {
                        return str;
                    }
                });
                var self = this;
                clipboard.on('success', function(e) {
                    self.$message.success('复制成功');
                    e.clearSelection();
                    clipboard.destroy()
                });
                clipboard.on('error', function(e) {
                    self.$message.error('复制失败，请手动复制');
                });
            },
            getSku(item) {
                this.skuLoading = true;
                request({
                    params: {
                        r: 'mall/goods/sku',
                        id: item.id
                    },
                    method: 'get',
                }).then(e => {
                    this.skuLoading = false;
                    if (e.data.code == 0) {
                        this.ruleForm.skus = e.data.data
                        if (this.ruleForm.skus[0].is_show_code == 1) this.ruleForm.is_show_code = 1;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error(e.data.msg);
                    this.skuLoading = false;
                });
            },
            // 复制首页链接
            copyLink(link) {
                var input = document.getElementById("copy-container");
                input.value = link; // 修改文本框的内容
                input.select(); // 选中文本
                document.execCommand("copy"); // 执行浏览器复制命令
                this.$message.success('复制成功');
            },
            checkboxT(row, index) {
                return !this.syncType
            },
            changeSyncType(val){
                let _this = this
                _this.syncType = val
                if(_this.syncType == 0){
                    _this.$refs.multipleTable.clearSelection()
                }
                _this.getStoreList()
            },
            hidePaySuccessSelectJumpUrlDialogVisible() {
                this.paySuccessSelectJumpUrlDialogVisible = false
            },
            onChangeJumpUrl(goods) {
                this.currentItem = goods
                this.paySuccessSelectJumpUrlDialogVisible = true
            },
            openScoreSetting(type){
                if (this.chooseList.length <= 0) {
                    this.$message.error('请选择需要设置的商品');
                    return false;
                }
                if(type == 1){
                    this.goodsScore.goodsScoreDeductVisible = true
                }else if(type == 2){
                    this.goodsScore.goodsScoreSetVisible = true
                }
            },
            batchSetGiveScore(type) {
                this.$confirm('确定要设置些商品?', '警告', {
                    type: 'warning'
                }).then(() => {
                    this.btnLoading = true;
                    let data = {
                        selected_goods_ids: this.chooseList,
                        set_type: type
                    }
                    if(type == 2){
                        Object.assign(data, this.goodsScore.give)
                    }else{
                        Object.assign(data, this.goodsScore.deduct)
                    }
                    request({
                        params: {
                            r: 'mall/goods/batch-set-score'
                        },
                        method: 'post',
                        data
                    }).then(res => {
                        if (res.data.code == 0) {
                            this.$message.success(res.data.msg);
                            this.btnLoading = false;
                            if(type == 1){
                                this.goodsScore.goodsScoreDeductVisible = false
                            }else if(type == 2){
                                this.goodsScore.goodsScoreSetVisible = false
                            }
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    }).catch(err => {
                        console.info(err);
                        this.btnLoading = false;
                        if(type == 1){
                            this.goodsScore.goodsScoreDeductVisible = false
                        }else if(type == 2){
                            this.goodsScore.goodsScoreSetVisible = false
                        }
                    })
                });
            },
            setSkusData() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;

                        request({
                            params: {
                                r: 'mall/goods/set-skus-code',
                            },
                            method: 'post',
                            data: this.ruleForm
                        }).then(e => {
                            this.btnLoading = false;
                            this.skuDialogVisible = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.$message.error(e);
                            this.btnLoading = false;
                        })
                    } else {
                        this.btnLoading = false;
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    });
</script>
<style>
    @media screen and (max-width: 1500px) {
        #app {
            min-width: 1270px;
        }
    }
</style>