zfire-newmall-admin/src/views/mallManagement/goods/goods_index/index.vue

<template>
  <div class="app-container">
    <div class="tab-container clearfix">
      <div class="tab-list fl">
        <div class="item" :class="screenForm.type === '' ? 'current':''" @click="changeType('')">全部({{ goodsStateCount.total ? goodsStateCount.total : 0 }})</div>
        <div class="item" :class="screenForm.type === 'S' ? 'current':''" @click="changeType('S')">出售中({{ goodsStateCount.csz ? goodsStateCount.csz : 0 }})</div>
        <div class="item" :class="screenForm.type === 'O' ? 'current':''" @click="changeType('O')">已售罄({{ goodsStateCount.ysq ? goodsStateCount.ysq : 0 }})</div>
        <div class="item" :class="screenForm.type === 'W' ? 'current':''" @click="changeType('W')">仓库中({{ goodsStateCount.ckz ? goodsStateCount.ckz : 0 }})</div>
        <div class="item" :class="screenForm.type === 'A' ? 'current':''" @click="changeType('A')">活动中({{ goodsStateCount.hdz ? goodsStateCount.hdz : 0 }})</div>
      </div>
      <!-- <el-button type="primary" size="small" @click="addOrEdit('add')">添加商品</el-button> -->
    </div>

    <div class="screen2-container">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="2" :lg="3" style="opacity: 0;">.</el-col>

        <el-col :xs="24" :sm="20" :lg="18">
          <el-form ref="form" :model="screenForm" label-width="80px">
            <div class="search">
              <el-input v-model="screenForm.keyword" placeholder="想快速搜索什么商品呢？输入商品名称，商品id，商品分类都可快速找到" class="input-with-select" clearable @change="getListByScreen">
                <el-button slot="append" icon="el-icon-search" @click="getListByScreen"></el-button>
              </el-input>
            </div>
            <div class="screen clearfix">
              <el-row :gutter="20">
                <el-col :xs="8" :sm="8" :lg="4">
                  <el-form-item label-width="0">
                    <el-cascader
                      v-model="screenForm.classify"
                      :options="classifyList"
                      :props="{ label: 'name', value: 'categoryId' }"
                      size="small"
                      @change="getListByScreen">
                    </el-cascader>
                    <!-- <el-select v-model="screenForm.classify" placeholder="全部" size="small" @change="getListByScreen">
                      <el-option label="商品分类" value=""></el-option>
                      <el-option :label="item.name" :value="item.categoryId" v-for="item in classifyList" :key="item.categoryId"></el-option>
                    </el-select> -->
                  </el-form-item>
                </el-col>
                <el-col :xs="8" :sm="8" :lg="4">
                  <el-form-item label-width="0">
                    <el-select v-model="screenForm.status" placeholder="上下架状态" size="small" clearable @change="getListByScreen">
                      <el-option :label="item.label" :value="item.value" v-for="(item, index) in select_status" :key="index"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="8" :sm="8" :lg="4">
                  <el-form-item label-width="0">
                    <el-select v-model="screenForm.isTrade" placeholder="是否支持以旧换新" size="small" clearable @change="getListByScreen">
                      <el-option label="支持以旧换新" value="YES"></el-option>
                      <el-option label="不支持以旧换新" value="NO"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="12" :lg="6">
                  <el-form-item label="销售价格" label-width="80px">
                    <el-input v-model="screenForm.price1" size="small" @change="getListByScreen" clearable ></el-input>
                    <span>至</span>
                    <el-input v-model="screenForm.price2" size="small" @change="getListByScreen" clearable ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="12" :lg="6">
                  <el-form-item label="分销金额" label-width="80px">
                    <el-input v-model="screenForm.amount1" size="small" @change="getListByScreen" clearable ></el-input>
                    <span>至</span>
                    <el-input v-model="screenForm.amount2" size="small" @change="getListByScreen" clearable ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </el-col>

        <el-col :xs="24" :sm="2" :lg="3" style="opacity: 0;">.</el-col>
      </el-row>
    </div>

    <div class="mymain-container">
      <div class="btn-group clearfix">
        <div class="fl">
          <el-button v-if="$restrict('add')" type="primary" icon="el-icon-plus" size="small" @click="addOrEdit('add')">添加商品</el-button>
          <el-button v-if="$restrict('batchSet')" size="small" @click="batchOperation('module')">批量设置模块</el-button>
          <el-button v-if="$restrict('batchSetfreight')" size="small" @click="batchOperation('freight')">批量设置运费</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button v-if="$restrict('batchLaunch')" size="small" @click="batchOperation('status', 'on')">批量上架</el-button>
          <el-button v-if="$restrict('batchRemova')" size="small" @click="batchOperation('status', 'off')">批量下架</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button v-if="$restrict('batchTrade')" size="small" @click="batchOperation('isTrade', 'YES')">开启以旧换新</el-button>
          <el-button v-if="$restrict('batchTrade')" size="small" @click="batchOperation('isTrade', 'NO')">关闭以旧换新</el-button>
        </div>
      </div>

      <div class="table">
        <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe @selection-change="handleTableSelection">
          <el-table-column align="center" type="selection" width="55" fixed></el-table-column>
          <el-table-column align="center" label="商品图片" prop="imgUrl" width="85">
            <template slot-scope="scope">
              <el-image style="width: 60px; height: 60px; display: block;" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]" fit="cover"></el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品名称" prop="goodsName" min-width="200">
            <template slot-scope="scope">
              <!-- {{ scope.row.goodsName }} -->
              <span style="margin-right: 10px">{{ scope.row.goodsName }}</span>
              <i class="el-icon-edit pointer" @click="editData('goodsName', scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" class-name="status-col">
            <template slot-scope="scope">
              <div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: center;">
                <el-tag size="small" :type="scope.row.status ? 'success':'danger'">{{ scope.row.status ? '上架':'下架' }}</el-tag>
                <el-tag size="small" v-if="scope.row.promotionGroup" style="margin-top: 4px;">团购商品</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="销售价格" prop="goodsPrice" min-width="110" sortable>
            <template slot-scope="scope">
              <!-- ¥{{ scope.row.goodsPrice }} -->
              <span style="margin-right: 10px">¥{{ scope.row.goodsPrice }}</span>
              <i class="el-icon-edit pointer" @click="editData('price', scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="分销金额" prop="shareAmount" min-width="110" sortable>
            <template slot-scope="scope">
              <!-- ¥{{ scope.row.shareAmount }} -->
              <span style="margin-right: 10px">¥{{ scope.row.shareAmount }}</span>
              <i class="el-icon-edit pointer" @click="editData('shareAmount', scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="佣金比例" prop="sharePercent" min-width="110" sortable>
            <template slot-scope="scope">
              <!-- ¥{{ scope.row.sharePercent }} -->
              <span style="margin-right: 10px">{{ scope.row.sharePercent }}%</span>
              <i class="el-icon-edit pointer" @click="editData('sharePercent', scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="内部分销金额" prop="innerShareAmount" min-width="130" sortable>
            <template slot-scope="scope">
              <!-- ¥{{ scope.row.sharePercent }} -->
              <span style="margin-right: 10px">¥{{ scope.row.innerShareAmount }}</span>
              <i class="el-icon-edit pointer" @click="editData('innerShareAmount', scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="内部佣金比列" prop="innerSharePercent" min-width="130" sortable>
            <template slot-scope="scope">
              <!-- ¥{{ scope.row.sharePercent }} -->
              <span style="margin-right: 10px">{{ scope.row.innerSharePercent }}%</span>
              <i class="el-icon-edit pointer" @click="editData('innerSharePercent', scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品库存" prop="stockNum" min-width="110" sortable>
            <template slot-scope="scope">
              <!-- {{ scope.row.stockNum }} -->
              <span style="margin-right: 10px">{{ scope.row.stockNum }}</span>
              <i class="el-icon-edit pointer" @click="editData('stockNum', scope.row)"></i>
            </template>
          </el-table-column>
		  <el-table-column align="center" label="仓库库存" prop="allStockNum" min-width="110" sortable>
			  <template slot-scope="scope">
			    <span style="margin-right: 10px">{{ scope.row.allStockNum || 0 }}</span>
			    <i class="el-icon-s-data pointer" @click="editData('stockNum', scope.row)"></i>
			  </template>
		  </el-table-column>
          <el-table-column align="center" label="销量" prop="soldNum" min-width="110" sortable></el-table-column>
          <el-table-column align="center" label="是否支持以旧换新" prop="isTrade" min-width="130">
            <template slot-scope="scope">
              {{ {YES: '支持', NO: '不支持'}[scope.row.isTrade] }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="排序" prop="sortNum" min-width="110" sortable>
            <template slot-scope="scope">
              <!-- {{ scope.row.sortNum }} -->
              <span style="margin-right: 10px">{{ scope.row.sortNum }}</span>
              <i class="el-icon-edit pointer" @click="editData('sortNum', scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商户" prop="companyName" min-width="120"></el-table-column>

          <el-table-column align="center" label="操作" width="280" fixed="right">
            <template slot-scope="scope">
              <!-- <template>
                <el-popconfirm v-if="scope.row.status" style="margin-right: 10px;" title="确定冻结吗？" @confirm="changeMemberStatus(scope.row.goodsId, 0)" >
                  <el-button slot="reference" type="text">冻结</el-button>
                </el-popconfirm>
                <el-popconfirm v-else style="margin-right: 10px;" title="确定恢复吗？" @confirm="changeMemberStatus(scope.row.goodsId, 1)" >
                  <el-button slot="reference" type="text">恢复</el-button>
                </el-popconfirm>
              </template> -->

              <el-button v-if="$restrict('edit')" type="primary" size="mini" @click="addOrEdit('edit', scope.row.goodsId)">编辑</el-button>
              <el-popconfirm v-if="$restrict('clone')" style="margin-left: 10px; margin-right: 10px" title="确定克隆吗？" @confirm="clone(scope.row.goodsId)" >
                <el-button slot="reference" type="primary" size="mini">克隆</el-button>
              </el-popconfirm>
              <el-button v-if="$restrict('copyLink')" type="primary" size="mini" class="tag-read" @click="copy(scope.row.goodsId)" :data-clipboard-text="scope.row.goodsId">复制链接</el-button>
              <el-popconfirm v-if="$restrict('del')" style="margin-left: 10px;" title="确定删除吗？" @confirm="delItem(scope.row.goodsId, scope.row.goodsSpecId)" >
                <el-button slot="reference" size="mini">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination clearfix">
        <div class="fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal">
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 编辑规格数据 -->
    <el-dialog title="编辑" :visible.sync="editSpecVisible" :show-close="false" width="60%" :close-on-click-modal="false">
      <el-table :data="editGoodsDetail.goodsSpecs" element-loading-text="Loading" border fit highlight-current-row stripe style="margin-bottom: 20px">
        <el-table-column align="center" label="规格名称" prop="name"></el-table-column>
        <el-table-column align="center" label="规格值" prop="specValue"></el-table-column>
        <el-table-column align="center" label="规格图片" prop="imgUrl">
          <template slot-scope="scope">
            <el-image style="width: 40px; height: 40px;" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="成本价格" prop="costPrice"></el-table-column>
        <el-table-column align="center" label="销售价格" prop="price" min-width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price" :disabled="editType != 'price'"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="分销金额" prop="shareAmount" min-width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.shareAmount" :disabled="editType != 'shareAmount'"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="佣金比例(%)" prop="sharePercent" min-width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sharePercent" :disabled="editType != 'sharePercent'"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="内部分销金额" prop="innerShareAmount" min-width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.innerShareAmount" :disabled="editType !== 'innerShareAmount'"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="内部佣金比例(%)" prop="innerSharePercent" min-width="130">
          <template slot-scope="scope">
            <el-input v-model="scope.row.innerSharePercent" :disabled="editType !== 'innerSharePercent'"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品库存" prop="stockNum" min-width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.stockNum" :disabled="editType != 'stockNum'"></el-input>
          </template>
        </el-table-column>
		<el-table-column align="center" label="仓库库存" prop="goodsMaterialStock">
			<template slot-scope="scope">
			  {{scope.row.goodsMaterialStock || 0}}
			</template>
		</el-table-column>
        <el-table-column align="center" label="物料编号" prop="goodsCode" min-width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.goodsCode"></el-input>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEditSpecForm">取 消</el-button>
        <el-button type="primary" @click="submitEditSpecForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 批量设置模块 -->
    <el-dialog :title="'设置模块 (已选择' + tableSelection.length + '件商品)'" :visible.sync="setModuleVisible" :show-close="false" width="30%" :close-on-click-modal="false">
      <el-form ref="setModuleForm" :model="setModuleForm" :rules="setModuleFormRules" label-position="left" label-width="80px">
        <el-form-item label="说明模块" prop="module">
          <el-select v-model="setModuleForm.module" placeholder="请选择说明模块" style="width: 250px;">
            <el-option v-for="item in moduleList" :key="item.commonTemplateId" :label="item.name" :value="item.commonTemplateId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSetModuleForm">取 消</el-button>
        <el-button type="primary" @click="submitSetModuleForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 批量设置运费 -->
    <el-dialog :title="'设置运费 (已选择' + tableSelection.length + '件商品)'" :visible.sync="setFreightVisible" :show-close="false" width="30%" :close-on-click-modal="false">
      <el-form ref="setFreightForm" :model="setFreightForm" :rules="setFreightFormRules" label-position="left" label-width="80px">
        <el-form-item label="运费模版" prop="freight">
          <el-select v-model="setFreightForm.freight" placeholder="请选择运费模版" style="width: 250px;">
            <el-option v-for="item in freightList" :key="item.freightTemplateId" :label="item.name" :value="item.freightTemplateId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSetFreightForm">取 消</el-button>
        <el-button type="primary" @click="submitSetFreightForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getGoodsList, deleteGoods, getClassifyList, getGoodsStateCount, cloneGoods, editGoods, goodsPutOn, goodsPutOff, checkSeckill, getGoodsDetail, getModuleList, setCommomModule, setFreight, getFreightList, batchTrade } from '@/api/goods'
import Clipboard from 'clipboard'
import { EventBus } from '@/utils/eventBus'
export default {
  data() {
    return {
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数

      screenForm: {
        type: '',
        keyword: '',
        classify: '',
        status: '',
        isTrade: '',
        price1: '',
        price2: '',
        amount1: '',
        amount2: '',
      },
      select_status: [ // 筛选字段 - 状态
        { label: '上架', value: true },
        { label: '下架', value: false }
      ],
      classifyList: [],
      goodsStateCount: {
        total: 0,
        csz: 0,
        ysq: 0,
        ckz: 0,
        hdz: 0,
      },

      tableSelection: [],

      editSpecVisible: false,
      editGoodsDetail: {},
      editType: '',

      setModuleVisible: false,
      moduleList: [],
      setModuleForm: {
        module: '',
      },
      setModuleFormRules: {
        module: [
          { required: true, message: '请选择说明模块', trigger: 'change' }
        ],
      },

      setFreightVisible: false,
      freightList: [],
      setFreightForm: {
        freight: '',
      },
      setFreightFormRules: {
        freight: [
          { required: true, message: '请选择运费模块', trigger: 'change' }
        ],
      },

    }
  },
  created() {
    this.getList();
    
    this.getClassifyList();
    EventBus.$on("updateGoodsListPage",()=>{
      this.getList();
    })
  },
  methods: {

    getClassifyList() {
      let params = {
        name: '',
        status: true
      };
      getClassifyList(params).then(res => {
        res.data.unshift({
          name: '全部',
          categoryId: '',
          children: null,
        });
        this.classifyList = res.data;
      })
    },

    getList() {
      this.listLoading = true;

      let categoryId = '';
      if(this.screenForm.classify) {
        categoryId = this.screenForm.classify[1];
      }

      let params = {
        flag: this.screenForm.type,
        keyword: this.screenForm.keyword,
        categoryId: categoryId,
        status: this.screenForm.status,
        isTrade: this.screenForm.isTrade,
        startPrice: this.screenForm.price1,
        endPrice: this.screenForm.price2,
        startShare: this.screenForm.amount1,
        endShare: this.screenForm.amount2,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };

      getGoodsList(params).then(res => {
        console.log('-----------',res.data.records)
        this.dataList = res.data.records;
        this.listTotal = res.data.total;
        this.listLoading = false;
      })

      getGoodsStateCount({}).then(res => {
        this.goodsStateCount = res.data;
      })
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },

    // 筛选后重新获取列表
    getListByScreen() {
      this.currentPage = 1;
      this.getList();
    },

    // 切换类型
    changeType(type) {
      this.screenForm.type = type;
      this.getListByScreen();
    },

    // 删除商品
    delItem(goodsId, goodsSpecId) {
      deleteGoods({
        goodsId,
        goodsSpecId
      }).then(res => {
        this.getList();
        this.$successMsg();
      })
    },

    // 添加商品
    addOrEdit(type, id) {
      if(type == 'add') {
        this.$router.push({
          name: 'goods_add',
          query: {}
        })
      }else {
        this.$router.push({
          name: 'goods_add',
          query: {
            id
          }
        })
      }
    },

    // 克隆
    clone(id) {
      cloneGoods({
        goodsId: id
      }).then(res => {
        this.getList();
      })
    },

    copy() {
      const clipboard = new Clipboard('.tag-read');
      // clipboard.on('success', e => {
      //   this.$successMsg('复制成功');
      // })
      clipboard.on('error', e =>{
        console.log('该浏览器不支持复制');
        return false;
      })
      this.$successMsg('复制成功');
    },

    // 编辑数据
    async editData(type, item) {
      const typeMap = {
        goodsName: '商品名称',
        price: '销售价格',
        shareAmount: '分销金额',
        sharePercent: '佣金比例',
        innerShareAmount: '内部分销金额',
        innerSharePercent: '内部佣金比例',
        stockNum: '商品库存',
        sortNum: '排序'
      }
      await getGoodsDetail({goodsId: item.goodsId}).then(res => {
        this.editGoodsDetail = res.data;
      })
      if(['sortNum', 'goodsName'].includes(type)) {
        let promptObj = {};
        if(['sortNum'].includes(type)) {
          promptObj = {
            inputType: 'number',
            inputValidator: function(value) {
              if(!value && value !== 0) return '请输入'+typeMap[type]
              if(value*1 < 0) return typeMap[type]+'不能小于0'
            },
          }
        }else {
          promptObj = {
            inputValidator: function(value) {
              if(!value) return '请输入'+typeMap[type]
            },
          }
        }
        this.$prompt('请输入'+typeMap[type], '编辑', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: this.editGoodsDetail[type],
          ...promptObj
        }).then(({ value }) => {
          let params = this.editGoodsDetail;
          params[type] = value;
          editGoods(params).then(res => {
            this.$successMsg('编辑成功');
            this.getList();
          })
        }).catch(() => {});
      }
      else {
        if(type == 'shareAmount' && item.sharePercent != 0) {
          return this.$errorMsg('佣金比例不为0的时候无法修改分销金额');
        }
        if(type === 'innerShareAmount' && item.innerSharePercent !== 0) {
          return this.$errorMsg('内部佣金比例不为0的时候无法修改内部分销金额');
        }
        this.editType = type;
        this.editSpecVisible = true;
      }

    },

    // 取消 编辑规格数据
    cancelEditSpecForm(){
      this.editSpecVisible = false;
    },

    // 提交 编辑规格数据
    submitEditSpecForm(){
      let specList = this.editGoodsDetail.goodsSpecs;
      for(let i=0; i<specList.length; i++) {
        if(specList[i].shareAmount / specList[i].price > 0.4) {
            this.formLoading = false;
            this.$errorMsg('单个规格的分销金额不能超过销售价的40%');
            return;
          }
        if(Number(specList[i].sharePercent) < 0 || Number(specList[i].sharePercent) > 40) {
          this.formLoading = false;
          this.$errorMsg('单个规格的佣金比例范围在0-40');
          return;
        }
        if(specList[i].innerShareAmount / specList[i].price > 0.4) {
          this.formLoading = false;
          this.$errorMsg('单个规格的内部分销金额不能超过销售价的40%');
          return;
        }
        if(Number(specList[i].innerSharePercent) < 0 || Number(specList[i].innerSharePercent) > 40) {
          this.formLoading = false;
          this.$errorMsg('单个规格的内部佣金比例范围在0-40');
          return;
        }
      }

      let allPrice = [];
      specList.forEach(item => {
        allPrice.push(item.price);
      })
      this.editGoodsDetail.goodsPrice = Math.min(...allPrice);

      let params = this.editGoodsDetail;
      editGoods(params).then(res => {
        this.editSpecVisible = false;
        this.$successMsg('编辑成功');
        this.getList();
      })
    },

    // 表格选择列
    handleTableSelection(val) {
      this.tableSelection = val;
    },

    // 批量操作
    batchOperation(type, status) {
      if(this.tableSelection.length < 1) {
        return this.$errorMsg('至少选择一个商品');
      }

      // 批量上架/批量下架
      if(type == 'status') {
        this.$confirm(`您确定要批量${{on: '上架', off: '下架'}[status]}选中商品吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let goodsIds = [];
          this.tableSelection.forEach(item => {
            goodsIds.push(item.goodsId);
          });
          // 批量上架
          if(status == 'on') {
            goodsPutOn(goodsIds).then(res => {
              this.$successMsg();
              this.getList();
            })
          }
          // 批量下架
          else if(status == 'off') {
            checkSeckill(goodsIds).then(res => {
              if(res.data && res.data.length > 0) {
                let goodsNames = [];
                res.data.forEach(item => {
                  let index = this.$findElem(this.tableSelection, 'goodsId', item);
                  goodsNames.push('【' + this.tableSelection[index].goodsName + '】');
                })
                this.$confirm('你所选中的商品'+goodsNames.join('、')+'正在参与秒杀活动，是否确定下架？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  goodsPutOff(goodsIds).then(res => {
                    this.$successMsg();
                    this.getList();
                  })
                }).catch(() => {});
              }else {
                goodsPutOff(goodsIds).then(res => {
                  this.$successMsg();
                  this.getList();
                })
              }
            })
          }

        }).catch(() => {});
      }

      // 批量开启关闭以旧换新
      else if(type == 'isTrade') {
        this.$confirm(`您确定要批量${{YES: '开启', NO: '关闭'}[status]}以旧换新吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let goodsIds = [];
          this.tableSelection.forEach(item => {
            goodsIds.push(item.goodsId);
          });
          batchTrade({
            goodsIds: goodsIds.join(','),
            isTrade: status
          }).then(res => {
            this.$successMsg();
            this.getList();
          })
        }).catch(() => {});
      }

      // 批量设置模块
      else if(type == 'module') {
        this.getModuleList();
        this.setModuleVisible = true;
      }

      // 批量设置运费
      else if(type == 'freight') {
        this.getFreightList();
        this.setFreightVisible = true;
      }

    },

    // 获取模块列表
    getModuleList() {
      getModuleList({
        pageNum: 1,
        pageSize: 1000
      }).then(res => {
        this.moduleList = res.data.records;
      })
    },

    // 取消 设置模块
    cancelSetModuleForm(){
      this.setModuleVisible = false;
      this.$refs.setModuleForm.resetFields();
    },

    // 提交 设置模块
    submitSetModuleForm() {
      let goodsIds = [];
      this.tableSelection.forEach(item => {
        goodsIds.push(item.goodsId);
      });
      setCommomModule({
        goodsIdList: goodsIds,
        templateId: this.setModuleForm.module
      }).then(res => {
        this.cancelSetModuleForm();
        this.$successMsg();
        this.getList();
      })
    },

    // 获取运费模版列表
    getFreightList() {
      getFreightList({
        pageNum: 1,
        pageSize: 1000
      }).then(res => {
        this.freightList = res.data.records;
      })
    },

    // 取消 设置运费
    cancelSetFreightForm(){
      this.setFreightVisible = false;
      this.$refs.setFreightForm.resetFields();
    },

    // 提交 设置运费
    submitSetFreightForm() {
      let goodsIds = [];
      this.tableSelection.forEach(item => {
        goodsIds.push(item.goodsId);
      });
      setFreight({
        goodsIdList: goodsIds,
        freightTemplateId: this.setFreightForm.freight
      }).then(res => {
        this.cancelSetFreightForm();
        this.$successMsg();
        this.getList();
      })
    }

  }

}

</script>

<style scoped lang="scss">
  .tab-container {
    .tab-list {
      .item {
        float: left;
        font-size: 14px;
        margin-right: 20px;
        cursor: pointer;
        line-height: 32px;
        &.current {
          color: #409EFF;
        }
      }
    }
  }

  .screen2-container {
    .search {
      margin-top: 30px;
    }
    .screen {
      margin-top: 20px;
      .el-input {
        width: 40%;
      }
      span {
        width: 20%;
        display: inline-block;
        text-align: center;
        color: #666666;
      }
    }
  }

  .pointer {
    cursor: pointer;
    color: #409EFF;
  }
</style>

<style lang="scss">
  .screen2-container {
    .el-form-item__label {
      line-height: 32px;
    }
    .el-form-item__content {
      line-height: 32px;
    }
  }

  .el-image-viewer__wrapper .el-icon-circle-close {
    color: #ffffff !important;
    font-size: 60px;
  }
</style>