dy-admin-manager/src/views/businessManager/shopManager/shopList.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      商品列表
    </h2>
    <div class="m-core">
      <el-button
        type="primary"
        @click="onShopOperation('create')"
        v-permission="'/shopOperation'"
        style="margin-bottom: 20px"
        >添加</el-button
      >
      <!-- <el-upload
        v-permission="'import/goods'"
        style="display: inline-block; margin: 0 10px"
        action="/api-web/import/goods"
        :show-file-list="false"
        :before-upload="beforeUpload"
        accept=".xlsx,.xls"
        :headers="headers"
        :on-error="handleError"
        :on-success="handleSuccess"
      >
        <el-button type="primary" style="margin-bottom: 20px">商品导入</el-button>
      </el-upload> -->
      <!-- <el-upload v-permission="'export/goods'"
                 style="display: inline-block; margin: 0 10px;"
                 action="/api-web/export/goods"
                 :show-file-list="false"
                 :before-upload="beforeUpload"
                 accept=".xlsx,.xls"
                 :headers="headers"
                 :on-error="handleError"
                 :on-success="handleSuccess">
        <el-button >商品导出</el-button>
      </el-upload> -->
      <el-button
        v-permission="'export/goods'"
        type="primary"
        style="margin-bottom: 20px"
        @click="exportShopList"
        >商品导出</el-button
      >
      <!-- <el-button
        type="primary"
        style="margin-bottom: 20px"
        @click="onDownload"
        v-permission="'import/downloadTemplate'"
        >下载模板</el-button
      > -->
      <el-button
        type="primary"
        style="margin-bottom: 20px"
        v-permission="'goods/add/commonAdd'"
        @click="onShopComAdd"
        >添加组合商品</el-button
      >
      <!-- 搜索类型 -->
      <save-form
        :inline="true"
        class="searchForm"
        ref="searchForm"
        @submit="onSearch"
        @reset="onReset"
        :model="searchForm"
      >
        <el-form-item prop="search">
          <el-input
            v-model.trim="searchForm.search"
            clearable
            placeholder="商品编号/货号/商品名称"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item prop="organId">
          <el-select
            v-model.trim="searchForm.organId"
            clearable
            placeholder="所属分部"
          >
            <el-option
              v-for="item in selects.branchs"
              :key="item.id"
              :label="item.name"
              :value="item.id.toString()"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item prop="studentShowOrganId">
          <el-select
            v-model.trim="searchForm.studentShowOrganId"
            clearable
            placeholder="学生端可见分部"
          >
            <el-option
              v-for="item in selects.branchs"
              :key="item.id"
              :label="item.name"
              :value="item.id.toString()"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item prop="educationShowOrganId">
          <el-select
            v-model.trim="searchForm.educationShowOrganId"
            clearable
            placeholder="管理端APP可售分部"
          >
            <el-option
              v-for="item in selects.branchs"
              :key="item.id"
              :label="item.name"
              :value="item.id.toString()"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="courseFeeShowOrganId">
          <el-select
            v-model.trim="searchForm.courseFeeShowOrganId"
            clearable
            placeholder="课程收费团可售分部"
          >
            <el-option
              v-for="item in selects.branchs"
              :key="item.id"
              :label="item.name"
              :value="item.id.toString()"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="memberFeeShowOrganId">
          <el-select
            v-model.trim="searchForm.memberFeeShowOrganId"
            clearable
            placeholder="会员收费团可见分部"
          >
            <el-option
              v-for="item in selects.branchs"
              :key="item.id"
              :label="item.name"
              :value="item.id.toString()"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="replacementShowOrganId" v-if="tenantId==1">
          <el-select
            v-model.trim="searchForm.replacementShowOrganId"
            clearable
            placeholder="乐器置换可见分部"
          >
            <el-option
              v-for="item in selects.branchs"
              :key="item.id"
              :label="item.name"
              :value="item.id.toString()"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="type">
          <el-select
            v-model.trim="searchForm.type"
            clearable
            placeholder="商品类型"
          >
            <el-option
              v-for="(item, index) in goodsType"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="goodsCategoryId">
          <el-select
            v-model.trim="searchForm.goodsCategoryId"
            clearable
            placeholder="商品分类"
          >
            <el-option
              v-for="(item, index) in categoryList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="status">
          <el-select
            v-model.trim="searchForm.status"
            clearable
            placeholder="是否是上架"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="groupGoods">
          <el-select
            v-model.trim="searchForm.groupGoods"
            clearable
            placeholder="是否是组合商品"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item prop="clientShow">
          <el-select
            v-model.trim="searchForm.clientShow"
            clearable
            placeholder="学生端是否是展示"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item prop="educationalShow">
          <el-select
            v-model.trim="searchForm.educationalShow"
            clearable
            placeholder="管理端是否是展示"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item prop="musicGroupShow">
          <el-select
            v-model.trim="searchForm.musicGroupShow"
            clearable
            placeholder="乐团是否是展示"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item prop="courseViewType">
          <el-select
            v-model.trim="searchForm.courseViewType"
            placeholder="乐团收费模式"
            clearable
          >
            <el-option label="课程收费" value="0"></el-option>
            <el-option label="系统收费" value="1"></el-option>
            <el-option label="团练宝收费" value="2"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item prop="replacementShow">
          <el-select
            v-model.trim="searchForm.replacementShow"
            clearable
            placeholder="是否参与置换"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item>
          <el-date-picker v-model.trim="orderDate" style="width:410px;" type="daterange" value-format="yyyy-MM-dd"
            @change="searchOrderDate" range-separator="至" :picker-options="{ firstDayOfWeek: 1 }" start-placeholder="开始日期"
            end-placeholder="结束日期"></el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button type="danger" native-type="submit">搜索</el-button>
          <el-button type="primary" native-type="reset">重置</el-button>
        </el-form-item>
      </save-form>
      <!-- 列表 -->
      <div class="tableWrap">
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        >
          <el-table-column align="center" prop="id" label="商品编号">
          </el-table-column>
          <el-table-column align="center" prop="sn" label="货号">
          </el-table-column>
          <el-table-column align="center" prop="brand" label="品牌">
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="商品名称"
            width="150px"
          >
            <template slot-scope="scope">
              <overflow-text :text="scope.row.name" width="100%" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否组合商品">
            <template slot-scope="scope">
              {{ scope.row.complementGoodsIdList ? "是" : "否" }}
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="学员是否展示">
            <template slot-scope="scope">
              {{ scope.row.clientShow ? "是" : "否" }}
            </template>
          </el-table-column> -->
          <!-- <el-table-column align="center" label="教务端是否展示">
            <template slot-scope="scope">
              {{ scope.row.educationalShow ? "是" : "否" }}
            </template>
          </el-table-column> -->
          <!-- <el-table-column align="center" label="乐团是否展示">
            <template slot-scope="scope">
              {{ scope.row.musicGroupShow ? "是" : "否" }}
            </template>
          </el-table-column> -->
          <!-- <el-table-column align="center" label="乐团收费模式">
            <template slot-scope="scope">
              <Tooltip
                :content="scope.row.courseViewType | courseViewTypeFormat"
              />
            </template>
          </el-table-column> -->
          <el-table-column align="center" label="是否库存预警" v-if="tenantId==1">
            <template slot-scope="scope">
              <span v-if="!scope.row.complementGoodsIdList">
                {{ scope.row.stockWarning ? "是" : "否" }}
              </span>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="是否参与置换">
            <template slot-scope="scope">
              <span>
                {{ scope.row.replacementShow ? "是" : "否" }}
              </span>
            </template>
          </el-table-column> -->
          <el-table-column align="center" label="商品类型">
            <template slot-scope="scope">
              {{ scope.row.type | shopType }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="goodsCategoryName"
            label="商品分类"
          >
          </el-table-column>
          <el-table-column align="center" prop="specification" label="具体型号">
            <template slot-scope="scope">
              <span style="max-height: 64px; display: block">{{
                scope.row.specification
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="stockCount" label="内部库存" v-if="tenantId==1">
            <template slot-scope="scope">
              <!-- 先判断是否是组合商品 -->
              <span v-if="scope.row.complementGoodsIdList">
                {{ scope.row.stockCount ? scope.row.stockCount : "" }}
              </span>
              <span v-else>{{ scope.row.stockCount }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="taxStockCount" label="税务库存">
            <template slot-scope="scope">
              <!-- 先判断是否是组合商品 -->
              <span v-if="scope.row.complementGoodsIdList">
                {{ scope.row.taxStockCount ? scope.row.taxStockCount : "" }}
              </span>
              <span v-else>{{ scope.row.taxStockCount }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="stockType" label="库存类型" v-if="tenantId==1">
            <template slot-scope="scope">
              {{ scope.row.stockType | stockTypeStatus }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="marketPrice" label="市场价(元)">
            <template slot-scope="scope">
              {{ scope.row.marketPrice | moneyFormat }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="marketPrice" label="零售价(元)">
            <template slot-scope="scope">
              {{ scope.row.discountPrice | moneyFormat }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="groupPurchasePrice"
            label="商品团购价(元)"
          >
            <template slot-scope="scope">
              {{ scope.row.groupPurchasePrice | moneyFormat }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            cell-style="padding: 0"
            label="商品缩略图"
          >
            <template slot-scope="scope">
              <img class="shopImage" :src="scope.row.image" alt="" srcset="" />
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="所属分部">
            <template slot-scope="scope">
              <div>
                 <Tooltip :content="scope.row.organName" />
              </div>

            </template>
          </el-table-column> -->
          <el-table-column align="center" label="商品描述">
            <template slot-scope="scope">
              <Tooltip :content="scope.row.brief" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品详情">
            <template slot-scope="scope">
              <Tooltip :content="scope.row.desc" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="180px"
            label="操作"
            fixed="right"
          >
            <template slot-scope="scope">
              <!-- 组合商品没有进货清单按钮 v-permission="'/purchaseLlist'" -->
              <el-button
                v-if="
                  !scope.row.complementGoodsIdList &&
                  permission('/purchaseLlist')
                "
                @click="onPurchaseList(scope.row)"
                type="text"
                >进货清单</el-button
              >
              <el-button
                v-if="
                  scope.row.status == 0 && permission('goods/updateGoodsStatus')
                "
                @click="onUpdate(scope.row, 0)"
                type="text"
                >上架</el-button
              >
              <el-button
                v-if="
                  scope.row.status == 1 &&
                  permission('goods/updateGoodsStatus/downGoods')
                "
                @click="onUpdate(scope.row, 1)"
                type="text"
                >下架</el-button
              >
              <el-button
                v-if="
                  scope.row.status == 0 &&
                  permission('/shopOperation/updateShop')
                "
                @click="onShopOperation('update', scope.row)"
                type="text"
                >修改</el-button
              >
              <el-button
                v-if="
                  scope.row.status == 1 && permission('/shopOperation/shopLook')
                "
                @click="onShopOperation('look', scope.row)"
                type="text"
                >查看</el-button
              >

              <el-button
                v-if="permission('/shopOperation/copyShop')"
                @click="onShopOperation('copy', scope.row)"
                type="text"
                >复制</el-button
              >
              <!-- <el-button v-if="scope.row.status == 0"
                         v-permission="'goods/del'"
                         @click="onDelete(scope.row)"
                         type="text">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <pagination
          sync
          :total.sync="pageInfo.total"
          :page.sync="pageInfo.page"
          :limit.sync="pageInfo.limit"
          :page-sizes="pageInfo.page_size"
          @pagination="getList"
        />
      </div>
    </div>

    <el-dialog
      :title="addString[addType] + '组合商品'"
      v-if="routeShopStatus"
      :visible.sync="routeShopStatus"
      @close="onFormClose('ruleForm')"
      width="1000px"
    >
      <el-form :model="form" :rules="rules" ref="ruleForm" :inline="true">
        <el-alert
          title="基础信息"
          :closable="false"
          class="alert"
          type="info"
        />
        <el-form-item
          label="商品名称"
          prop="name"
          :label-width="formLabelWidth"
        >
          <el-input
            style="width: 220px !important"
            placeholder="请输入商品名称"
            type="text"
            :disabled="addDisabled"
            v-model.trim="form.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="货号" prop="sn" :label-width="formLabelWidth">
          <el-input
            style="width: 220px !important"
            placeholder="请输入货号"
            type="text"
            :disabled="addDisabled"
            v-model.trim="form.sn"
          ></el-input>
        </el-form-item>
        <el-form-item label="品牌" prop="brand" :label-width="formLabelWidth">
          <el-input
            style="width: 220px !important"
            v-model.trim="form.brand"
            :disabled="addDisabled"
            placeholder="请输入品牌"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="所属分部" :label-width="formLabelWidth" prop="organIdList">
          <select-all v-model.trim="form.organIdList"
                     filterable
                     placeholder="请选择所属分部"
                     style="width: 100% !important"
                     multiple
                     :disabled="addDisabled || addType == 'update'"
                     @change="onOrganChange"
                     clearable>
            <el-option v-for="item in selects.branchs"
              :key="item.id"
              :label="item.name"
              :value="item.id.toString()"></el-option>
          </select-all>
        </el-form-item> -->
        <el-form-item
          label="商品类型"
          prop="type"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model.trim="form.type"
            :disabled="addDisabled"
            style="width: 220px !important"
            placeholder="请选择商品类型"
          >
            <el-option
              v-for="(item, index) in goodsType"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="商品分类"
          prop="goodsCategoryId"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model.trim="form.goodsCategoryId"
            style="width: 220px !important"
            placeholder="请选择商品分类"
            :disabled="addDisabled"
            filterable
          >
            <el-option
              v-for="item in categoryList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="商品型号"
          prop="specification"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model.trim="form.specification"
            :disabled="addDisabled"
            style="width: 220px !important"
            placeholder="请输入商品型号"
          ></el-input>
        </el-form-item>

        <div v-for="(goodsList, index) in form.goodsList" :key="index">
          <el-form-item
            :label="'商品' + (index + 1)"
            :label-width="formLabelWidth"
            style="display: inline-block; width: 80% !important"
            :prop="'goodsList.' + index + '.id'"
            :rules="[
              { required: true, message: '请选择商品', trigger: 'change' },
            ]"
          >
            <el-select
              v-model.trim="goodsList.id"
              @change="onGoodsChange"
              filterable
              style="width: 220px !important"
              :disabled="addDisabled"
              placeholder="请选择商品"
            >
              <el-option
                v-for="(item, index) in selectGoodsList"
                :key="index"
                :disabled="item.disabled"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <div v-if="!addDisabled" style="display: inline-block">
            <el-button
              icon="el-icon-minus"
              v-if="form.goodsList.length > 1"
              @click.prevent="removeGoodsList(goodsList)"
              circle
            ></el-button>
            <el-button
              icon="el-icon-plus"
              @click.prevent="addGoodsList"
              circle
              style="margin-left: 5px"
            ></el-button>
          </div>
        </div>
        <el-alert
          title="价格信息"
          :closable="false"
          class="alert"
          type="info"
        />
        <el-form-item
          label="市场价"
           class="hiddenStart"
          prop="marketPrice"
          :label-width="formLabelWidth"
        >
        <template slot="label">
            <p style="position: relative">
              <span style="color: #f56c6c; margin-right: 4px">*</span>
              市场价
              <el-tooltip placement="top" popper-class="mTooltip">
                <div slot="content">
                  商品标价，仅在商品购买时做展示，不以该价格向学员销售商品
                </div>
                <i
                  class="el-icon-question"
                  style="
                    font-size: 18px;
                    color: #f56c6c;
                    position: relative;
                    top: 2px;
                  "
                ></i>
              </el-tooltip>
            </p>
          </template>
          <el-input
            type="number"
            placeholder="请输入市场价"
            :disabled="addDisabled"
            @mousewheel.native.prevent
            v-model.trim="form.marketPrice"
            style="width: 220px !important"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="零售价"
           class="hiddenStart"
          prop="discountPrice"
          :label-width="formLabelWidth"
        >
         <template slot="label">
            <p style="position: relative">
              <span style="color: #f56c6c; margin-right: 4px">*</span>
              零售价
              <el-tooltip placement="top" popper-class="mTooltip">
                <div slot="content">
                  管理端APP、乐器维修时学员购买该商品的价格
                </div>
                <i
                  class="el-icon-question"
                  style="
                    font-size: 18px;
                    color: #f56c6c;
                    position: relative;
                    top: 2px;
                  "
                ></i>
              </el-tooltip>
            </p>
          </template>
          <el-input
            type="number"
            placeholder="请输入零售价"
            :disabled="addDisabled"
            @mousewheel.native.prevent
            v-model.trim="form.discountPrice"
            style="width: 220px !important"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品团购价"
          prop="groupPurchasePrice"
           class="hiddenStart"
          :label-width="formLabelWidth"
        >
         <template slot="label">
            <p style="position: relative">
              <span style="color: #f56c6c; margin-right: 4px">*</span>
              团购价
              <el-tooltip placement="top" popper-class="mTooltip">
                <div slot="content">乐团报名缴费时学员购买该商品的价格</div>
                <i
                  class="el-icon-question"
                  style="
                    font-size: 18px;
                    color: #f56c6c;
                    position: relative;
                    top: 2px;
                  "
                ></i>
              </el-tooltip>
            </p>
          </template>
          <el-input
            type="number"
            placeholder="请输入商品团购价"
            :disabled="addDisabled"
            @mousewheel.native.prevent
            v-model.trim="form.groupPurchasePrice"
            style="width: 220px !important"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item
          label="学员是否展示"
          prop="clientShow"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="form.clientShow"
            style="width: 100% !important"
            :disabled="addDisabled"
            placeholder="请选择学员是否展示"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="教务端是否展示"
          prop="educationalShow"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="form.educationalShow"
            style="width: 100% !important"
            :disabled="addDisabled"
            placeholder="请选择教务端是否展示"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="乐团是否展示"
          prop="musicGroupShow"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="form.musicGroupShow"
            style="width: 100% !important"
            :disabled="addDisabled"
            placeholder="请选择乐团是否展示"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="乐团收费模式"
          :label-width="formLabelWidth"
          prop="courseViewType"
        >
          <select-all
            v-model.trim="form.courseViewType"
            filterable
            placeholder="请选择乐团收费模式"
            multiple
            :disabled="
              addDisabled ||
              (form.musicGroupShow != 0 && form.musicGroupShow != 1)
            "
            clearable
          >
            <el-option label="课程收费" value="0"></el-option>
            <el-option label="系统收费" value="1"></el-option>
            <el-option label="团练宝收费" value="2"></el-option>
          </select-all> -->
        <!-- <el-select
            v-model="form.courseViewType"
            multiple
            placeholder="请选择乐团收费模式"
            :disabled="addDisabled"
          >
            <el-option label="课程收费" :value="0"></el-option>
            <el-option label="系统收费" :value="1"></el-option>
            <el-option label="团练宝收费" :value="2"></el-option>
          </el-select> -->
        <!-- </el-form-item> -->
        <!-- <el-form-item
          label="是否参与置换"
          prop="replacementShow"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="form.replacementShow"
            style="width: 100% !important"
            :disabled="addDisabled"
            placeholder="是否参与置换"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item> -->
        <el-alert
          title="销售渠道"
          :closable="false"
          class="alert"
          type="info"
        />
        <!--      :disabled="pageDisabled || pageType == 'update'" -->
        <!-- <el-form-item
          label="学员可见分部"
          prop="studentShowOrganId"
          :label-width="formLabelWidth"
        >
          <select-all
            v-model.trim="form.studentShowOrganId"
            filterable
            placeholder="请选择学员可见分部"
            style="width: 400px !important"
            multiple
            clearable
             :disabled="addDisabled"
          >
            <el-option
              v-for="item in selects.branchs"
              :key="item.id"
              :label="item.name"
              :value="item.id.toString()"
            ></el-option>
          </select-all>
        </el-form-item> -->
        <!--   :disabled="pageDisabled || pageType == 'update'" -->
        <el-form-item
          label="管理端APP可售分部"
          prop="educationShowOrganId"
          :label-width="formLabelWidth"
        >
          <select-all
            v-model.trim="form.educationShowOrganId"
            filterable
            placeholder="管理端APP可售分部"
            style="width: 400px !important"
            multiple
            clearable
             :disabled="addDisabled"
          >
            <el-option
              v-for="item in selects.branchs"
              :key="item.id"
              :label="item.name"
              :value="item.id.toString()"
            ></el-option>
          </select-all>
        </el-form-item>
        <!--   :disabled="pageDisabled || pageType == 'update'" -->
        <el-form-item
          label="课程收费乐团可售分部"
          prop="courseFeeShowOrganId"
          :label-width="formLabelWidth"
        >
          <select-all
            v-model.trim="form.courseFeeShowOrganId"
            filterable
            placeholder="课程收费乐团可售分部"
            style="width: 400px !important"
            multiple
            clearable
             :disabled="addDisabled"
          >
            <el-option
              v-for="item in selects.branchs"
              :key="item.id"
              :label="item.name"
              :value="item.id.toString()"
            ></el-option>
          </select-all>
        </el-form-item>
        <!--  :disabled="pageDisabled || pageType == 'update'" -->
        <el-form-item
          label="会员收费乐团可售分部"
          prop="memberFeeShowOrganId"
          :label-width="formLabelWidth"
        >
          <select-all
            v-model.trim="form.memberFeeShowOrganId"
            filterable
            placeholder="请选择会员收费团可见分部"
            style="width: 400px !important"
            multiple
            clearable
             :disabled="addDisabled"
          >
            <el-option
              v-for="item in selects.branchs"
              :key="item.id"
              :label="item.name"
              :value="item.id.toString()"
            ></el-option>
          </select-all>
        </el-form-item>
        <!--  :disabled="pageDisabled || pageType == 'update'"  -->
        <el-form-item  v-if="tenantId==1"
          label="乐器置换可售分部"
          prop="replacementShowOrganId"
          :label-width="formLabelWidth"
        >
          <select-all
            v-model.trim="form.replacementShowOrganId"
            filterable
            placeholder="请选择乐器置换可售分部"
            style="width: 400px !important"
            multiple
            clearable
             :disabled="addDisabled"
          >
            <el-option
              v-for="item in selects.branchs"
              :key="item.id"
              :label="item.name"
              :value="item.id.toString()"
            ></el-option>
          </select-all>
        </el-form-item>
        <el-alert
          title="商品信息"
          :closable="false"
          class="alert"
          type="info"
        />
        <el-form-item
          label="商品图片"
          prop="image"
          :label-width="formLabelWidth"
        >
          <!-- <upload
            v-model="form.image"
            :imageWidthM="400"
            :disabled="addDisabled"
            :imageHeightM="400"
          ></upload> -->
          <image-cropper :options="cropperOptions" :disabled="addDisabled" :imgSize="2" :imageUrl="form.image"  @crop-upload-success="cropSuccess" />
          <p style="color: red">
            请上传大小2M以内，格式为jpg、png、gif图片
          </p>
        </el-form-item>
        <br />
        <el-form-item
          label="商品描述"
          prop="brief"
          :label-width="formLabelWidth"
        >
          <el-input
            type="textarea"
            :disabled="addDisabled"
            v-model.trim="form.brief"
            style="width: 400px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品详情"
          prop="desc"
          :label-width="formLabelWidth"
        >
          <el-input
            type="textarea"
            :disabled="addDisabled"
            v-model.trim="form.desc"
            style="width: 400px"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" v-if="!addDisabled" class="dialog-footer">
        <el-button @click="routeShopStatus = false">取 消</el-button>
        <el-button @click="onShopSubmit('ruleForm')" type="primary"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import Upload from "@/components/Upload/index";
import {
  categoryListTree,
  goodsQuery,
  goodsAdd,
  goodsUpdate,
  goodsDelete,
  updateGoodsStatus,
} from "@/api/businessManager";
import qs from "qs";
import cleanDeep from "clean-deep";
import store from "@/store";
import Tooltip from "@/components/Tooltip/index";
import { Export } from "@/utils/downLoadFile";
import { getToken, getTenantId } from "@/utils/auth";
import { goodsType } from "@/utils/searchArray";
import load from "@/utils/loading";
import { permission } from "@/utils/directivePage";
import ImageCropper from '@/components/ImageCropper'
// import courseEvaluateVue from '@/views/teamDetail/componentCourse/courseEvaluate.vue';
let validPrice = (rule, value, callback) => {
  if ((value == "" && typeof value == "string") || value == null) {
    callback(new Error("请输入金额"));
  } else if (value < 0) {
    callback(new Error("输入金额必须大于或等于0"));
  } else if (value >= 100000) {
    callback(new Error("输入金额必须小于100000"));
  } else {
    callback();
  }
};
let validStock = (rule, value, callback) => {
  if ((value == "" && typeof value == "string") || value == null) {
    callback(new Error("请输入库存"));
  } else if (value < 0) {
    callback(new Error("库存数量必须大于或等于0"));
  } else {
    callback();
  }
};
export default {
  components: {
    pagination,
    Tooltip,
    Upload,
    ImageCropper
  },
  name: "shopList",
  data() {
    return {
      goodsType: goodsType,
      categoryList: [],
      goodsLoading: false,
      organId: null,
      orderDate: null,
      searchForm: {
        search: null,
        groupGoods: null,
        organId: null,
        type: null,
        status: null,
        goodsCategoryId: null,
        startTime: null,
        endTime: null,
        status: null,
        clientShow: null,
        educationalShow: null,
        musicGroupShow: null,
        courseViewType: null,
        replacementShow: null,
        courseFeeShowOrganId:null,
        educationShowOrganId:null,
        memberFeeShowOrganId:null,
        replacementShowOrganId:null,
        studentShowOrganId:null
      },
      headers: {
        Authorization: getToken(),
        tenantId: getTenantId()
      },
      searchLsit: [],
      tableList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      formLabelWidth: "160px",
      routeShopStatus: false,
      addType: "create",
      addString: {
        create: "添加",
        update: "修改",
        look: "查看",
        copy: "复制",
      },
      addDisabled: false,
      form: {
        sn: null,
        brand: null,
        supplyChannel: null,
        name: null,
        type: null,
        organIdList: [],
        goodsCategoryId: null,
        specification: null,
        marketPrice: null,
        discountPrice: null,
        groupPurchasePrice: null,
        clientShow: null,
        educationalShow: null,
        musicGroupShow: null,
        courseViewType: [],
        stockWarning: null,
        image: null,
        complementGoodsIdList: null,
        goodsList: [
          {
            id: null,
          },
        ],
        brief: null,
        desc: null,
        replacementShow: null,
        studentShowOrganId: null,
        educationShowOrganId: null,
        courseFeeShowOrganId: null,
        memberFeeShowOrganId: null,
        replacementShowOrganId: null,
      },
      goodsTree: [], // 选择商品列表
      rules: {
        sn: [
          {
            required: true,
            message: "请输入商品货号",
            trigger: "blur",
          },
        ],
        brand: [
          {
            required: true,
            message: "请输入品牌",
            trigger: "blur",
          },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
        supplyChannel: [
          {
            required: true,
            message: "请输入备查货号",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择商品分类",
            trigger: "change",
          },
        ],
        organIdList: [
          {
            required: true,
            message: "请选择所属分部",
            trigger: "change",
          },
        ],
        goodsCategoryId: [
          {
            required: true,
            message: "请选择商品类型",
            trigger: "change",
          },
        ],
        specification: [
          {
            required: true,
            message: "请输入商品型号",
            trigger: "blur",
          },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
        marketPrice: [
          {
            required: true,
            validator: validPrice,
            trigger: "blur",
          },
        ],
        discountPrice: [
          {
            required: true,
            validator: validPrice,
            trigger: "blur",
          },
        ],
        groupPurchasePrice: [
          {
            required: true,
            validator: validPrice,
            trigger: "blur",
          },
        ],
        clientShow: [
          {
            required: true,
            message: "请选择学员是否展示",
            trigger: "change",
          },
        ],
        educationalShow: [
          {
            required: true,
            message: "请选择教务端是否展示",
            trigger: "change",
          },
        ],
        musicGroupShow: [
          {
            required: true,
            message: "请选择乐团是否展示",
            trigger: "change",
          },
        ],
        courseViewType: [
          { required: true, message: "请选乐团收费模式", trigger: "change" },
        ],
        replacementShow: [
          {
            required: true,
            message: "请选择是否参与置换",
            trigger: "change",
          },
        ],
        stockWarning: [
          {
            required: true,
            message: "请选择是否库存预警",
            trigger: "change",
          },
        ],
        image: [
          {
            required: true,
            message: "请选择图片",
            trigger: "blur",
          },
        ],
        brief: [
          {
            required: true,
            message: "请输入商品描述",
            trigger: "blur",
          },
        ],
        desc: [
          {
            required: true,
            message: "请输入商品详情",
            trigger: "blur",
          },
        ],
      },
      selectGoodsList: [],
      tenantId:'',
      cropperOptions: {
        autoCrop: true, //是否默认生成截图框
        autoCropWidth: 300, //默认生成截图框宽度
        autoCropHeight: 300, //默认生成截图框高度
        fixedBox: true, //是否固定截图框大小 不允许改变
        previewsCircle: false, //预览图是否是圆形
        title: '商品图片', //模态框上显示的标题
      },
    };
  },
async  mounted() {
    // 获取分部
    this.tenantId = this.$helpers.tenantId
  await  this.$store.dispatch("setBranchs");
    this.init();
  },
  methods: {
    permission(str) {
      return permission(str);
    },
    init() {
      this.getList();
      this.getCategory();
    },
    getCategory() {
      let params = {
        delFlag: 0,
        rows: 9999,
      };
      categoryListTree(params).then((res) => {
        let result = res.data;
        if (res.code == 200) {
          let tempArray = [];
          result.rows.forEach((row) => {
            tempArray.push({
              label: row.name,
              value: row.id,
            });
          });
          this.categoryList = tempArray;
        }
      });
    },
    cropSuccess(data) {
      this.form.image = data.data.url;
    },
    async onUpdate(row, type) {
      let title = type == 1 ? "你是否下架该商品？" : "你是否上架该商品？";
      this.$confirm(title, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await updateGoodsStatus({
            goodsId: row.id,
            status: row.status ? 0 : 1,
          }).then((res) => {
            this.messageTips(row.status ? "下架" : "上架", res);
          });
        })
        .catch(() => {});
    },
    onPurchaseList(row) {
      this.$router.push({
        path: "/shopManager/purchaseLlist",
        query: {
          name: row.name,
          goodsId: row.id,
        },
      });
    },
    onDelete(row) {
      this.$confirm("您确定删除该商品吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          goodsDelete(row.id).then((res) => {
            this.messageTips("删除", res);
          });
        })
        .catch(() => {});
    },
    searchOrderDate(value) {
      if (value) {
        this.searchForm.startTime = value[0];
        this.searchForm.endTime = value[1];
      } else {
        this.searchForm.startTime = null;
        this.searchForm.endTime = null;
      }
    },
    messageTips(title, res) {
      if (res.code == 200) {
        this.$message.success(title + "成功");
        this.typeStatus = false;
        this.getList();
      } else {
        this.$message.error(res.msg);
      }
    },
    getList() {
      let params = Object.assign({}, this.searchForm);
      params.organId = this.organId;
      params.rows = this.pageInfo.limit;
      params.page = this.pageInfo.page;
      goodsQuery(params).then((res) => {
        if (res.code == 200 && res.data) {
          this.tableList = res.data.rows;
          this.pageInfo.total = res.data.total;
        }
      });
    },
    getAllGoodsList(organId) {
      // 获取所有商品
      goodsQuery({
        rows: 9999,
        page: 1,
        groupGoods: 0,
        organId,
        status: 1,
      }).then((res) => {
        if (res.code == 200 && res.data) {
          this.selectGoodsList = res.data.rows;
        }
      });
    },
    onSearch() {
      this.pageInfo.page = 1;
      this.getList();
    },
    onReset() {
      // 重置
      this.$refs.searchForm.resetFields();
      this.getList();
    },
    onShopComAdd() {
      this.form = {
        sn: null,
        brand: null,
        supplyChannel: null,
        name: null,
        type: null,
        goodsCategoryId: null,
        specification: null,
        marketPrice: null,
        discountPrice: null,
        groupPurchasePrice: null,
        clientShow: null,
        educationalShow: null,
        musicGroupShow: null,
        organIdList: [],
        courseViewType: [],
        stockWarning: null,
        image: null,
        complementGoodsIdList: null,
        goodsList: [
          {
            id: null,
          },
        ],
        brief: null,
        desc: null,
        replacementShow: null,
      };
      this.onValidGoodsStatus();
      this.routeShopStatus = true;
      this.addType = "create";
      this.addDisabled = false;

      this.$nextTick((res) => {
        if (this.$refs["ruleForm"]) {
          this.$refs["ruleForm"].resetFields();
        }
      });
    },
    onOrganChange(val) {
      if (val && val.length > 0) {
        // 获取所有商品
        this.getAllGoodsList(val.join(","));
      }
    },
    async onValidGoodsStatus() {
      // 更新商品选择状态
      await this.getAllGoodsList();
      console.log(this.form.goodsList);
      let goodsList = this.form.goodsList;
      let tempIds = [];
      goodsList.forEach((item) => {
        tempIds.push(item.id);
      });
      this.selectGoodsList.forEach((item) => {
        item.disabled = false;
        if (tempIds.includes(item.id)) {
          item.disabled = true;
        }
      });
    },
    onShopOperation(type, row) {
      // 添加或修改
      let params = {
        type: type,
      };
      if (row) {
        params.id = row.id;
      }
      let paramInfo = JSON.stringify(params);
      this.addType = type;
      this.addDisabled = type == "look" ? true : false;
      // 判断是否是修改组合商品
      if (
        (type == "update" || type == "look" || type == "copy") &&
        row.complementGoodsIdList
      ) {
        this.routeShopStatus = true;

        let form = this.form;
        for (let i in form) {
          form[i] = row[i];
        }
        let ids = row.complementGoodsIdList.split(",");
        let goodsList = [];
        ids.forEach((item) => {
          goodsList.push({
            id: Number(item),
          });
        });
        form.goodsList = goodsList;
        form.id = row.id;

        if (row.courseViewType) {
          form.courseViewType = row.courseViewType.split(",");
        }

        if (row.studentShowOrganId) {
          form.studentShowOrganId = row.studentShowOrganId.split(",");
        }

        if (row.educationShowOrganId) {
          form.educationShowOrganId = row.educationShowOrganId.split(",");
        }

        if (row.courseFeeShowOrganId) {
          form.courseFeeShowOrganId = row.courseFeeShowOrganId.split(",");
        }

        if (row.memberFeeShowOrganId) {
          form.memberFeeShowOrganId = row.memberFeeShowOrganId.split(",");
        }

        if (row.replacementShowOrganId) {
          form.replacementShowOrganId = row.replacementShowOrganId.split(",");
        }

        // if (row.organIdList) {
        //   form.organIdList = row.organIdList.split(",");

        // }
        this.getAllGoodsList();

        this.onValidGoodsStatus();
      } else {
        let pageTitle = "添加";
        if (type == "update") {
          pageTitle = "修改";
        } else if (type == "look") {
          pageTitle = "查看";
        } else if (type == "copy") {
          pageTitle = "复制";
        }
        this.$router.push(
          {
            path: "/shopManager/shopOperation",
            query: {
              paramInfo,
            },
          },
          (route) => {
            route.meta.title = pageTitle + "商品";
          }
        );
      }
    },
    beforeUpload(file) {
      // console.log(file.type)
      // const isJPG = file.type === '.xlsx' || file.type === '.xls';
      // // const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // return isJPG;
      // this.goodsLoading = true
      load.startLoading();
    },
    handleSuccess(response, file, fileList) {
      // 导入商品
      // 报表导出
      load.endLoading();
      if (response.code == 200) {
        this.$message.success("导入成功");
        this.getList();
      } else {
        this.$message.error(response.msg);
      }
    },
    handleError(err, file, fileList) {
      load.endLoading();
    },
    onDownload() {
      // 下载模板
      // // 报表导出
      Export(this, {
        url: "/api-web/import/downloadTemplate",
        params: {
          templateType: "GOODS",
        },
        fileName: "商品导入模板.xls",
      });
    },
    exportShopList() {
      Export(
        this,
        {
          url: "/api-web/export/goods",
          params: qs.stringify(cleanDeep(this.searchForm)),
          fileName: "商品导出.xls",
          method: "post",
        },
        "确定导出商品"
      );
    },
    onFormClose(formName) {
      // 关闭弹窗重置验证
      this.$refs[formName].resetFields();
    },
    onGoodsChange() {
      let selectGoodsList = this.selectGoodsList;
      let goodsList = this.form.goodsList;
      let tempIds = [];
      goodsList.forEach((item) => {
        if (item.id) {
          tempIds.push(item.id);
        }
      });
      selectGoodsList.forEach((item) => {
        if (tempIds.includes(item.id)) {
          item.disabled = true;
        } else {
          item.disabled = false;
        }
      });

      this.calcPrice();
    },
    removeGoodsList(item) {
      let tempId = item.id;
      let selectGoodsList = this.selectGoodsList;
      selectGoodsList.forEach((item) => {
        if (item.id == tempId) {
          item.disabled = false;
        }
      });

      const index = this.form.goodsList.indexOf(item);
      if (index !== -1) {
        this.form.goodsList.splice(index, 1);
      }

      this.calcPrice();
    },
    addGoodsList() {
      this.form.goodsList.push({
        id: null,
      });
    },
    onShopSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let form = Object.assign({}, this.form);
          let tempIds = [];
          form.goodsList.forEach((item) => {
            if (item.id) {
              tempIds.push(item.id);
            }
          });
          form.complementGoodsIdList = tempIds.join(",");
          // form.courseViewType = form.courseViewType.join(",");
          // form.organIdList = form.courseViewType.join(",");
          if (form.studentShowOrganId) {
            form.studentShowOrganId = form.studentShowOrganId.join(",");
          }
          if (form.educationShowOrganId) {
            form.educationShowOrganId = form.educationShowOrganId.join(",");
          }

          if (form.courseFeeShowOrganId) {
            form.courseFeeShowOrganId = form.courseFeeShowOrganId.join(",");
          }
          if (form.memberFeeShowOrganId) {
            form.memberFeeShowOrganId = form.memberFeeShowOrganId.join(",");
          }
          if (form.replacementShowOrganId) {
            form.replacementShowOrganId = form.replacementShowOrganId.join(",");
          }
          if(!form.studentShowOrganId&&!form.educationShowOrganId&&!form.courseFeeShowOrganId&&!form.courseFeeShowOrganId&&!form.replacementShowOrganId){
            this.$message.error('请至少选择一个可见分部')
            return
          }
          form.goodsList = null;
          if (this.addType == "create" || this.addType == "copy") {
            if (this.form.id) {
              // 判断有没有Id，如果有则删除
              delete this.form.id;
            }
            form.status = "NO"; // 默认上架
            goodsAdd(cleanDeep(form)).then((res) => {
              this.messageTips("保存", res);
            });
          } else if (this.addType == "update") {
            goodsUpdate(cleanDeep(form)).then((res) => {
              this.messageTips("保存", res);
            });
          }
        } else {
          this.$nextTick(() => {
            let isError = document.getElementsByClassName("is-error");
            isError[0].scrollIntoView({
              block: "center",
              behavior: "smooth",
            });
          });
          return false;
        }
      });
    },
    messageTips(title, res) {
      if (res.code == 200) {
        this.$message.success(title + "成功");
        this.getList();
        this.routeShopStatus = false;
      } else {
        this.$message.error(res.msg);
      }
    },
    calcPrice() {
      let selectGoodsList = this.selectGoodsList;
      let form = this.form;
      let goodsList = form.goodsList;
      let tempIds = [];
      goodsList.forEach((item) => {
        if (item.id) {
          tempIds.push(item.id);
        }
      });
      let groupPurchasePrice = 0,
        marketPrice = 0,
        discountPrice = 0;
      selectGoodsList.forEach((item) => {
        if (tempIds.includes(item.id)) {
          groupPurchasePrice += item.groupPurchasePrice;
          marketPrice += item.marketPrice;
          discountPrice += item.discountPrice;
        }
      });

      form.groupPurchasePrice = Number(groupPurchasePrice.toFixed(2));
      form.discountPrice = Number(discountPrice.toFixed(2));
      form.marketPrice = Number(marketPrice.toFixed(2));
    },
  },
  filters: {
    courseViewTypeFormat(value) {
      let template = ["课程收费", "AMR收费", "会员收费"];
      if (!value) {
        return "";
      }
      let ids = value.split(",");
      let str = [];
      ids.forEach((item) => {
        str.push(template[item]);
      });
      return str.join(",");
    },
  },
};
</script>
<style lang="scss" scoped>
.alert {
  margin-bottom: 22px;
}
.shopImage {
  width: 60px;
  height: 60px;
}
.shopDesc {
  max-height: 70px;
  overflow: hidden;
}

.el-select__tags .el-tag.el-tag--info.el-tag--small.el-tag--light {
  max-width: 95px;
}
.hiddenStart {
  /deep/.el-form-item__label:before {
    content: "" !important;
    position: absolute;
    color: transparent;
    margin-right: 4px;
  }
}

</style>