settledIn/src/views/product/productExamine/index.vue

<template>
  <div class="divBox">
    <div class="selCard">
      <el-form
        inline
        size="small"
        :model="tableFrom"
        ref="searchForm"
        label-width="103px"
      >
        <el-form-item label="商品分类：" prop="pid">
          <el-cascader
            v-model="tableFrom.pid"
            class="selWidth"
            :options="merCateList"
            :props="{ checkStrictly: true, emitPath: false }"
            clearable
            @change="getList(1)"
          />
        </el-form-item>
        <el-form-item label="店铺名称：" prop="mer_id">
          <el-select
            v-model="tableFrom.mer_id"
            clearable
            filterable
            placeholder="请选择"
            class="selWidth"
            @change="getList(1)"
          >
            <el-option
              v-for="item in merSelect"
              :key="item.mer_id"
              :label="item.mer_name"
              :value="item.mer_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商户类别：" prop="is_trader">
          <el-select
            v-model="tableFrom.is_trader"
            clearable
            placeholder="请选择"
            class="selWidth"
            @change="getList(1)"
          >
            <el-option label="自营" value="1" />
            <el-option label="非自营" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品状态：" prop="us_status">
          <el-select
            v-model="tableFrom.us_status"
            placeholder="请选择"
            class="filter-item selWidth"
            clearable
            @change="getList(1)"
          >
            <el-option
              v-for="item in productStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="推荐级别：" prop="star">
          <el-select
            v-model="tableFrom.star"
            placeholder="请选择"
            class="filter-item selWidth"
            clearable
            @change="getList(1)"
          >
            <el-option
              v-for="item in recommendedLevelStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="标签：" prop="sys_labels">
          <el-select
            v-model="tableFrom.sys_labels"
            placeholder="请选择"
            class="filter-item selWidth"
            clearable
            filterable
            @change="getList(1)"
          >
            <el-option
              v-for="item in labelList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="会员价：" prop="svip_price_type">
        <el-select v-model="tableFrom.svip_price_type" placeholder="请选择" class="selWidth" clearable @change="getList(1)">
          <el-option label="未设置" value="0" />
          <el-option label="默认设置" value="1" />
          <el-option label="自定义设置" value="2" />
        </el-select>
      </el-form-item> -->
        <el-form-item label="商品推荐：" prop="hot_type">
          <el-select
            v-model="tableFrom.hot_type"
            placeholder="请选择"
            class="filter-item selWidth"
            clearable
            filterable
            @change="getList(1)"
          >
            <el-option
              v-for="item in recommendList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品类型：" prop="audit_type">
          <el-select
            v-model="tableFrom.audit_type"
            placeholder="请选择"
            class="filter-item selWidth"
            clearable
            @change="getList(1)"
          >
            <el-option
              v-for="item in productTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品搜索：" prop="keyword">
          <el-input
            v-model="tableFrom.keyword"
            @keyup.enter.native="getList(1)"
            placeholder="请输入商品名称，关键字，产品编号"
            class="selWidth"
          />
        </el-form-item>
        <el-form-item label="标记：" prop="tag_name">
          <el-input
            v-model="tableFrom.tag_name"
            @keyup.enter.native="getList(1)"
            placeholder="请输入标记"
            class="selWidth"
          />
        </el-form-item>
        <el-form-item label="时间选择：" prop="create_time">
          <el-date-picker
            v-model="timeVal"
            value-format="yyyy/MM/dd HH:mm:ss"
            format="yyyy/MM/dd HH:mm:ss"
            size="small"
            type="datetimerange"
            placement="bottom-end"
            placeholder="自定义时间"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 280px"
            :picker-options="pickerOptions"
            @change="onchangeTime"
            clearable
          />
        </el-form-item>
        <el-form-item label="更新时间：" prop="update_date">
          <el-date-picker
            v-model="updateTimeVal"
            value-format="yyyy/MM/dd HH:mm:ss"
            format="yyyy/MM/dd HH:mm:ss"
            size="small"
            type="datetimerange"
            placement="bottom-end"
            placeholder="自定义时间"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 280px"
            :picker-options="pickerOptions"
            @change="onchangeUpdateTime"
            clearable
          />
        </el-form-item>
        <!-- <el-form-item label="是否惠美乡村：" prop="is_huimei">
          <el-select
            v-model="tableFrom.is_huimei"
            placeholder="请选择"
            class="filter-item selWidth"
            clearable
            @change="getList(1)"
          >
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="审核状态：" prop="is_audited">
          <el-select
            v-model="tableFrom.is_audited"
            placeholder="请选择"
            class="filter-item selWidth"
            clearable
            @change="getList(1)"
          >
            <el-option label="首次提报" value="0" />
            <el-option label="已上架提报" value="1" />
            <el-option label="首次修改" value="2" />
            <el-option label="已上架修改" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="待审核状态："
          prop="status"
          v-if="Number(tableFrom.type) == 12"
        >
          <el-select
            v-model="tableFrom.status"
            placeholder="请选择"
            class="filter-item selWidth"
            clearable
            @change="getList(1)"
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="操作人：" prop="operator">
          <el-input
            v-model="tableFrom.operator"
            @keyup.enter.native="getList(1)"
            placeholder="请输入操作人"
            class="selWidth"
          />
        </el-form-item>
        <el-form-item label="定制产品：" prop="is_customize">
          <el-select
            v-model="tableFrom.is_customize"
            clearable
            filterable
            placeholder="请选择"
            class="selWidth"
            @change="getList(1)"
          >
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getList(1)"
            >搜索</el-button
          >
          <el-button size="small" @click="searchReset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card class="mt14">
      <el-tabs
        v-model="tableFrom.type"
        @tab-click="getList(1), getLstFilterApi(), setSort()"
      >
        <el-tab-pane
          v-for="(item, index) in headeNum"
          :key="index"
          :name="item.type.toString()"
          :label="item.name + '(' + item.count + ')'"
        />
      </el-tabs>
      <div class="mt5 mb20">
        <el-button
          v-show="tableFrom.type === '11'"
          size="small"
          :disabled="multipleSelection.length == 0"
          @click="batch"
          >批量审核</el-button
        >
        <el-button
          size="small"
          :disabled="multipleSelection.length == 0"
          @click="batchOff"
          >批量强制下架</el-button
        >
        <el-button
          size="small"
          :disabled="multipleSelection.length == 0"
          @click="batchShow(0)"
          >批量不显示</el-button
        >
        <el-button
          size="small"
          :disabled="multipleSelection.length == 0"
          @click="batchShow(1)"
          >批量显示</el-button
        >
        <el-button
          :disabled="multipleSelection.length == 0"
          size="small"
          @click="batchLabel"
          >批量设置标记</el-button
        >
        <el-button
          :disabled="multipleSelection.length == 0"
          size="small"
          @click="batchRecommend"
          >批量设置推荐</el-button
        >
        <el-button type="primary" size="small" @click="exports"
          >导出列表</el-button
        >
      </div>
      <el-table
        v-loading="listLoading"
        max-height="600"
        :data="tableData.data"
        size="small"
        ref="table"
        @sort-change="handleSortChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          v-if="Number(tableFrom.type) < 7 || Number(tableFrom.type) == 11"
          key="2"
          type="selection"
          width="55"
        />
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="平台分类：">
                <span>{{
                  props.row.storeCategory
                    ? props.row.storeCategory.cate_name
                    : "-"
                }}</span>
              </el-form-item>
              <el-form-item label="商品分类：">
                <template v-if="props.row.merCateId.length">
                  <span
                    v-for="(item, index) in props.row.merCateId"
                    :key="index"
                    class="mr10"
                    >{{ item.category ? item.category.cate_name : "-" }}</span
                  >
                </template>
                <span v-else>-</span>
              </el-form-item>
              <el-form-item label="品牌：">
                <span>{{
                  props.row.brand ? props.row.brand.brand_name : "其它"
                }}</span>
              </el-form-item>
              <el-form-item label="市场价格：">
                <span>{{ props.row.ot_price | filterEmpty }}</span>
              </el-form-item>
              <el-form-item label="成本价：">
                <span>{{ props.row.cost | filterEmpty }}</span>
              </el-form-item>
              <el-form-item label="收藏：">
                <span>{{ props.row.care_count | filterEmpty }}</span>
              </el-form-item>
              <el-form-item label="已售数量：">
                <span>{{ props.row.ficti | filterEmpty }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="product_id" label="ID" min-width="60" />
        <el-table-column prop="tag_name" label="标记" min-width="60" />
        <el-table-column prop="as_price" label="成长值" min-width="60" />
        <el-table-column prop="audit_type" label="商品类型" min-width="80">
          <template slot-scope="scope">
            {{ productTypeList[scope.row.audit_type].label }}
          </template>
        </el-table-column>
        <el-table-column label="商品图" min-width="70">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 36px; height: 36px"
                :src="scope.row.image"
                :preview-src-list="[scope.row.image]"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="store_name" label="商品名称" min-width="120">
          <template slot-scope="scope">
            <div>
              <span class="tags_name" :class="'name' + scope.row.spec_type">{{
                scope.row.spec_type == 0 ? "[单规格]" : "[多规格]"
              }}</span
              >{{ scope.row.store_name || "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="is_customize" label="定制产品" min-width="80">
          <template slot-scope="scope">
            <div>
              {{ scope.row.is_customize ? "是" : "否" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="店铺名称" min-width="100">
          <template slot-scope="scope">
            <span>{{
              scope.row.merchant ? scope.row.merchant.mer_name : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="is_audited" label="待审核类型" min-width="90">
          <template slot-scope="scope">
            {{ auditedList[scope.row.is_audited] }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="商品售价" min-width="80" />
        <el-table-column prop="refusal" label="拒绝/锁定原因" min-width="110" />
        <el-table-column prop="operator" label="操作人" min-width="110" />
        <el-table-column
          prop="create_time"
          sortable="custom"
          label="创建时间"
          min-width="120"
        />
        <el-table-column
          prop="update_time"
          sortable="custom"
          label="更新时间"
          min-width="120"
        />
        <!-- <el-table-column label="是否惠美乡村店铺" min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.merchant.is_huimei ? "是" : "否" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否惠美乡村产品" min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.is_huimei ? "是" : "否" }}</span>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="storeCategory.cate_name"
          label="平台分类"
          min-width="80"
        />
        <el-table-column prop="remark" label="商家备注" min-width="100" />
        <el-table-column prop="status" label="是否显示" min-width="80">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_used"
              :active-value="1"
              :inactive-value="0"
              active-text="显示"
              inactive-text="隐藏"
              @change="onchangeIsShow(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="商品状态" min-width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.us_status | productStatusFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="推荐级别" min-width="150">
          <template slot-scope="scope">
            <el-rate disabled v-model="scope.row.star" :colors="colors">
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column prop="rank" label="排序" min-width="60" />
        <el-table-column prop="sales" label="销量" min-width="70" />
        <el-table-column prop="browse" label="浏览量" min-width="70" />
        <el-table-column prop="stock" label="库存" min-width="70" />
        <el-table-column key="8" label="操作" min-width="260" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="onDetails(scope.row.product_id)"
              >详情</el-button
            >
            <el-button
              v-if="audit"
              type="text"
              size="small"
              @click.native="toExamine(scope.row.product_id)"
              >审核</el-button
            >
            <el-button
              v-if="audit"
              type="text"
              size="small"
              @click="openLock(scope.row.product_id)"
              >锁定</el-button
            >
            <el-button
              v-if="scope.row.lock == 1"
              type="text"
              size="small"
              @click.native="openUnlock(scope.row.product_id)"
              >解锁</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="getBack(scope.row.product_id)"
              v-if="[7, 9, 10, 11].includes(Number(tableFrom.type))"
              >{{ tableFrom.type == 7 ? "撤回" : "返回" }}</el-button
            >
            <el-button
              type="text"
              size="small"
              class="mr10"
              @click="handlePreview(scope.row.product_id)"
              >预览</el-button
            >
            <el-dropdown>
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-if="Number(tableFrom.type) < 7 || tableFrom.type === '9'"
                  @click.native="onEdit(scope.row.product_id)"
                  >编辑商品</el-dropdown-item
                >
                <el-dropdown-item
                  v-if="Number(tableFrom.type) < 7 || tableFrom.type === '9'"
                  @click.native="onAuditFree(scope.row)"
                  >价格编辑</el-dropdown-item
                >
                <el-dropdown-item v-if="tableFrom.type != 5">
                  <router-link
                    :to="{
                      path:
                        roterPre +
                        '/product/comment/?product_id=' +
                        scope.row.product_id,
                    }"
                    style="font-size: 14px"
                  >
                    查看评价
                  </router-link>
                </el-dropdown-item>
                <!-- <el-dropdown-item v-if="tableFrom.type !== '5'" @click.native="onEditLabel(scope.row)">编辑标签</el-dropdown-item> -->
                <el-dropdown-item
                  @click.native="setTagName(scope.row.product_id)"
                  >编辑标记</el-dropdown-item
                >
                <el-dropdown-item
                  v-if="
                    tableFrom.type === '6' ||
                    tableFrom.type === '1' ||
                    tableFrom.type === '9'
                  "
                  @click.native="toVirtualSales(scope.row.product_id)"
                  >已售数量</el-dropdown-item
                >
                <el-dropdown-item
                  v-if="Number(tableFrom.type) < 3"
                  @click.native="toOff(scope.row.product_id)"
                  >强制下架</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          :page-size="tableFrom.limit"
          :current-page="tableFrom.page"
          layout="total, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <info-from
      ref="infoFrom"
      :is-show="isShow"
      :ids="OffId"
      @subSuccess="subSuccess"
    />
    <el-dialog
      title="商品编辑"
      :visible.sync="dialogVisible"
      width="960px"
      :before-close="handleClose"
      :append-to-body="append"
    >
      <el-form
        ref="formValidate"
        v-loading="fullscreenLoading"
        class="formValidate mt20"
        :rules="ruleValidate"
        :model="formValidate"
        size="small"
        label-width="100px"
        @submit.native.prevent
      >
        <el-form-item label="商品类型：" prop="audit_type">
          <el-radio-group v-model="formValidate.audit_type">
            <el-radio :label="0">食品及保健品</el-radio>
            <el-radio :label="1">化妆品及日化品</el-radio>
            <el-radio :label="2">其他品类</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="品牌名称：" prop="store_name">
          <el-input
            :disabled="true"
            :value="
              formValidate.qualification &&
              formValidate.qualification.brands_name
            "
            size="small"
            placeholder="请输入商品名称"
          />
        </el-form-item>
        <el-form-item label="商品名称：" prop="store_name">
          <el-input
            v-model="formValidate.store_name"
            size="small"
            placeholder="请输入商品名称"
          />
        </el-form-item>
        <el-form-item label="商品关键字：" prop="keyword">
          <el-input
            v-model="formValidate.keyword"
            placeholder="请输入商品关键字"
            size="small"
          />
        </el-form-item>
        <div style="display: flex">
          <!-- <el-form-item label="商品封面图：" prop="image">
            <div class="demo-image__preview">
              <el-image
                style="width: 60px; height: 60px"
                :src="formValidate.image"
                :preview-src-list="[formValidate.image]"
              />
            </div>
          </el-form-item> -->
          <el-form-item label="商品封面图：" prop="image">
            <div
              class="upLoadPicBox"
              title="750*750px"
              @click="modalPicTap('1')"
            >
              <div v-if="formValidate.image" class="pictrue">
                <img :src="formValidate.image" />
              </div>
              <div v-else class="upLoad">
                <i class="el-icon-camera cameraIconfont" />
              </div>
            </div>
          </el-form-item>
          <el-form-item
            style="margin-left: 100px"
            label="定制产品："
            prop="audit_type"
          >
            <el-radio-group v-model="formValidate.is_customize">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>

        <el-form-item label="星级推荐：">
          <el-rate
            class="rate_star"
            v-model="formValidate.star"
            :colors="colors"
            style="margin-top: 4px"
          ></el-rate>
          <span style="margin-top: 4px; font-size: 12px"
            >备注：5星为最高推荐级别，1星为最低推荐级别，设置后会在商城商品列表、搜索商品列表中体现。</span
          >
        </el-form-item>
        <el-form-item label="商品推荐：">
          <el-checkbox-group
            v-model="checkboxGroup"
            size="small"
            @change="onChangeGroup"
          >
            <el-checkbox
              v-for="(item, index) in recommend"
              :key="index"
              :label="item.value"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="排序：">
          <el-input-number
            v-model="formValidate.rank"
            size="small"
            placeholder="请输入排序序号"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="平台商品分类：" prop="cate_id" label-width="110px">
          <el-cascader
            v-model="formValidate.cate_id"
            size="small"
            :options="merCateList"
            :props="props"
            filterable
            clearable
          />
        </el-form-item>
        <el-form-item label="商品轮播图：" prop="slider_image">
          <div class="acea-row">
            <div
              v-for="(item, index) in formValidate.slider_image"
              :key="index"
              class="pictrue"
              draggable="false"
              @dragstart="handleDragStart($event, item)"
              @dragover.prevent="handleDragOver($event, item)"
              @dragenter="handleDragEnter($event, item)"
              @dragend="handleDragEnd($event, item)"
            >
              <!-- <img :src="item"> -->
              <el-image
                style="width: 60px; height: 60px"
                :src="item"
                :preview-src-list="[item]"
              />
              <i class="el-icon-error btndel" @click="handleRemove(index)" />
            </div>
            <div
              v-if="formValidate.slider_image.length < 10"
              class="uploadCont"
              title="750*750px"
            >
              <div class="upLoadPicBox" @click="modalPicTap('2')">
                <div class="upLoad">
                  <i class="el-icon-camera cameraIconfont" />
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-col :span="24">
          <el-form-item label="商品详情：">
            <ueditor-from
              v-model="formValidate.content"
              :content="formValidate.content"
            />
          </el-form-item>
        </el-col>
        <el-form-item style="margin-top: 30px">
          <el-button
            type="primary"
            class="submission"
            size="small"
            @click="handleSubmit('formValidate')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--预览商品-->
    <div v-if="previewVisible">
      <div class="bg" @click.stop="previewVisible = false" />
      <preview-box
        v-if="previewVisible"
        ref="previewBox"
        :goods-id="goodsId"
        :product-type="0"
        :preview-key="previewKey"
      />
    </div>
    <!--编辑标签-->
    <el-dialog
      v-if="dialogLabel"
      title="编辑标记"
      :visible.sync="dialogLabel"
      width="470px"
      :before-close="handleClose"
    >
      <el-form
        ref="labelForm"
        :model="labelForm"
        inline
        :rules="rules"
        @submit.native.prevent
        size="small"
      >
        <el-form-item label="标记" prop="tag_name">
          <el-input
            v-model="labelForm.tag_name"
            placeholder="请输入商品关键字"
            size="small"
            class="selWidth"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogLabel = false">取消</el-button>
        <el-button type="primary" size="small" @click="submitForm('labelForm')"
          >提交</el-button
        >
      </span>
    </el-dialog>
    <!--编辑推荐-->
    <el-dialog
      v-if="dialogRecommend"
      title="推荐设置"
      :visible.sync="dialogRecommend"
      width="800px"
      :before-close="handleClose"
    >
      <el-form @submit.native.prevent size="small">
        <el-form-item label="商品推荐：">
          <el-checkbox-group
            v-model="recommendGroup"
            @change="onChangeRecommend"
            size="small"
          >
            <el-checkbox
              v-for="(item, index) in recommend"
              :key="index"
              :label="item.value"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRecommendForm">提交</el-button>
      </span>
    </el-dialog>
    <!--商品详情-->
    <pro-detail
      ref="proDetail"
      :productId="product_id"
      @closeDrawer="closeDrawer"
      @changeDrawer="changeDrawer"
      :drawer="drawer"
    ></pro-detail>
    <edit-attr ref="editAttr" />
  </div>
</template>

<script>
import {
  changeApi,
  productLstApi,
  productDetailApi,
  categoryListApi,
  productUpdateApi,
  lstFilterApi,
  merSelectApi,
  productOffApi,
  toVirtualSalesApi,
  getProductLabelApi,
  updatetProductLabel,
  batchesLabelsApi,
  batchesTagNameApi,
  batchesRecommendApi,
  batchesOnOffApi,
  exportProductApi,
  setTagNameApi,
  productLockApi,
  productBackApi,
} from "@/api/product";
import { roterPre } from "@/settings";
import infoFrom from "./info";
import editAttr from "./editAttr";
import ueditorFrom from "@/components/ueditorFrom";
import previewBox from "@/components/previewBox/index";
import proDetail from "./proDetails.vue";
import timeOptions from "@/utils/timeOptions";
import createWorkBook from "@/utils/newToExcel.js";
const proOptions = [
  {
    name: "热门榜单",
    value: "is_hot",
  },
  {
    name: "特惠专区",
    value: "is_benefit",
  },
  {
    name: "精品推荐",
    value: "is_best",
  },
  {
    name: "首发新品",
    value: "is_new",
  },
];
export default {
  name: "ProductExamine1",
  components: {
    infoFrom,
    ueditorFrom,
    previewBox,
    proDetail,
    editAttr,
  },
  data() {
    return {
      props: { emitPath: false },
      pickerOptions: timeOptions,
      timeVal: [],
      updateTimeVal: [],
      ruleValidate: {
        store_name: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "blur",
          },
        ],
      },

      dialogVisible: false,
      dialogRecommend: false,
      append: true,
      checkboxGroup: [],
      recommendGroup: [],
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      recommendedLevelStatus: [
        { label: "全部", value: "" },
        { label: "5星", value: 5 },
        { label: "4星", value: 4 },
        { label: "3星", value: 3 },
        { label: "2星", value: 2 },
        { label: "1星", value: 1 },
      ],
      // 0 产品部审核 9 产品部复审 10 运维专员审核 11 最终审核
      statusList: [
        { label: "产品部审核", value: 0 },
        { label: "产品部复审", value: 9 },
        { label: "运维专员审核", value: 10 },
        { label: "最终审核", value: 11 },
      ],
      auditedList: ["首次提报", "已上架提报", "首次修改", "已上架修改"],
      recommend: proOptions,
      recommendList: [
        {
          name: "热门榜单",
          value: "hot",
        },
        {
          name: "特惠专区",
          value: "good",
        },
        {
          name: "精品推荐",
          value: "best",
        },
        {
          name: "首发新品",
          value: "new",
        },
      ],
      formValidate: {
        is_hot: 0,
        is_customize: 0,
        is_best: 0,
        is_new: 0,
        is_benefit: 0,
        ficti: 0,
        is_ficti: "",
        content: "",
        store_name: "",
        rank: 0,
        us_status: "",
        star: 0,
        keyword: "",
        cate_id: 0,
        slider_image: [],
        qualification: {},
        image: "",
        audit_type: 0,
      },
      productStatusList: [
        { label: "上架显示", value: 1 },
        // { label: "下架", value: 0 },
        { label: "平台关闭", value: -1 },
      ],
      productTypeList: [
        { label: "食品及保健品", value: 0 },
        { label: "化妆品及日化品", value: 1 },
        { label: "其他品类", value: 2 },
      ],
      fullscreenLoading: false,
      isShow: false,
      roterPre: roterPre,
      listLoading: true,
      tableData: {
        data: [],
        total: 0,
      },
      tableFrom: {
        page: 1,
        limit: 20,
        date: "",
        is_customize: "",
        cate_id: "",
        sys_labels: "",
        pid: "",
        operator: "",
        tag_name: "",
        store_name: "",
        audit_type: "",
        type: "6",
        mer_id: "",
        keyword: "",
        is_trader: "",
        hot_type: "",
        star: "",
        svip_price_type: "",
        is_audited: "",
        is_huimei: "",
        order: "",
        product_id: this.$route.query.id ? this.$route.query.id : "",
      },
      categoryList: [],
      merCateList: [],
      multipleSelection: [],
      headeNum: [],
      merSelect: [],
      OffId: [],
      productId: 0,
      tabClickIndex: "",
      previewVisible: false,
      goodsId: "",
      previewKey: "",
      product_id: "",
      labelList: [],
      dialogLabel: false,
      isBatch: false,
      labelForm: {
        ids: [],
        tag_name: "",
      },
      rules: {
        tag_name: [{ required: true, message: "请输入标记", trigger: "blur" }],
      },
      recommendForm: {},
      drawer: false,
    };
  },
  mounted() {
    this.getMerSelect();
    this.getList("");
    this.getCategorySelect();
    this.getLstFilterApi();
    this.getLabelLst();
  },
  computed: {
    audit() {
      return (
        this.tableFrom.type === "6" ||
        this.tableFrom.type === "10" ||
        this.tableFrom.type === "11" ||
        this.tableFrom.type === "9"
      );
    },
  },
  methods: {
    handleSortChange(row) {
      switch (row.prop) {
        case "create_time":
          this.tableFrom.order =
            row.order == "ascending" ? "create_asc" : "create_desc";
          break;
        case "update_time":
          this.tableFrom.order =
            row.order == "ascending" ? "update_asc" : "update_desc";
          break;
        default:
          break;
      }
      this.getList("");
    },
    setSort() {
      this.$refs.table.clearSort();
      this.tableFrom.order = "";
      this.tableFrom.status = "";
    },
    getBack(id) {
      this.$modalForm(productBackApi(id)).then(() => this.getList(""));
      this.getLstFilterApi();
    },
    // 解锁
    openUnlock(id) {
      this.$modalForm(productLockApi(id)).then(() => this.getList(""));
      this.getLstFilterApi();
    },
    // 锁定
    openLock(id) {
      this.$modalForm(productLockApi(id)).then(() => this.getList(""));
      this.getLstFilterApi();
    },
    // 价格编辑
    onAuditFree(row) {
      this.$refs.editAttr.getAttrDetail(row.product_id);
    },
    async exports() {
      let excelData = JSON.parse(JSON.stringify(this.tableFrom)),
        data = [];
      excelData.page = 1;
      excelData.limit = 200;
      let pageCount = 1;
      let lebData = {};
      for (let i = 0; i < pageCount; i++) {
        lebData = await this.downData(excelData);
        pageCount = Math.ceil(lebData.count / excelData.limit);
        if (lebData.export.length) {
          data = data.concat(lebData.export);
          excelData.page++;
        }
      }
      createWorkBook(
        lebData.header,
        lebData.title,
        data,
        lebData.foot,
        lebData.filename
      );
      return;
    },
    /**订单列表 */
    downData(excelData) {
      return new Promise((resolve, reject) => {
        exportProductApi(excelData).then((res) => {
          return resolve(res.data);
        });
      });
    },
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e;
      this.tableFrom.date = e ? this.timeVal.join("-") : "";
      this.getList(1);
    },
    // 具体日期
    onchangeUpdateTime(e) {
      this.updateTimeVal = e;
      this.tableFrom.update_date = e ? this.updateTimeVal.join("-") : "";
      this.getList(1);
    },
    /**重置 */
    searchReset() {
      this.timeVal = [];
      this.updateTimeVal = [];
      this.tableFrom.date = "";
      this.tableFrom.update_date = "";
      this.setSort();
      this.$refs.searchForm.resetFields();
      this.getList(1);
    },
    subSuccess() {
      this.getList("");
      this.getLstFilterApi();
    },
    // 点击商品图
    modalPicTap(tit, num, i) {
      const _this = this;
      const attr = [];
      this.$modalUpload(function (img) {
        if (tit === "1" && !num) {
          _this.formValidate.image = img[0];
          // _this.OneattrValue[0].image = img[0];
        }
        if (tit === "2" && !num) {
          img.map((item) => {
            attr.push(item.attachment_src);
            _this.formValidate.slider_image.push(item);
            if (_this.formValidate.slider_image.length > 10) {
              _this.formValidate.slider_image.length = 10;
            }
          });
        }
        if (tit === "1" && num === "dan") {
          _this.OneattrValue[0].image = img[0];
        }
        if (tit === "1" && num === "duo") {
          _this.ManyAttrValue[i].image = img[0];
        }
        if (tit === "1" && num === "pi") {
          _this.oneFormBatch[0].image = img[0];
        }
      }, tit);
    },
    onchangeIsShow(row) {
      changeApi(row.product_id, row.is_used)
        .then(({ message }) => {
          this.$message.success(message);
          this.getList("");
          this.getLstFilterApi();
        })
        .catch(({ message }) => {
          this.$message.error(message);
        });
    },
    // 预览
    handlePreview(id) {
      this.previewVisible = true;
      this.goodsId = id;
      this.previewKey = "";
    },
    // 获取标签项
    getLabelLst() {
      getProductLabelApi()
        .then((res) => {
          this.labelList = res.data;
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },
    // 编辑标签
    onEditLabel(row) {
      this.dialogLabel = true;
      this.product_id = row.product_id;
      this.labelForm = {
        sys_labels: row.sys_labels,
      };
    },
    handleRemove(i) {
      this.formValidate.slider_image.splice(i, 1);
    },
    // 查看详情
    onDetails(id) {
      this.product_id = id;
      this.drawer = true;
      this.$refs.proDetail.getInfo(id);
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = "move";
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = "move";
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.formValidate.slider_image];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.formValidate.slider_image = newItems;
    },
    changeDrawer(v) {
      this.drawer = v;
    },
    closeDrawer() {
      this.drawer = false;
    },
    submitForm(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.isBatch
            ? batchesTagNameApi(this.labelForm)
                .then(({ message }) => {
                  this.$message.success(message);
                  this.getList("");
                  this.dialogLabel = false;
                  this.isBatch = false;
                })
                .catch((res) => {
                  this.$message.error(res.message);
                })
            : updatetProductLabel(this.product_id, this.labelForm)
                .then(({ message }) => {
                  this.$message.success(message);
                  this.getList("");
                  this.dialogLabel = false;
                })
                .catch((res) => {
                  this.$message.error(res.message);
                });
        } else {
          return;
        }
      });
    },
    batchRecommend() {
      this.dialogRecommend = true;
      this.recommendGroup = [];
    },
    submitRecommendForm() {
      this.recommendForm.ids = this.OffId;
      batchesRecommendApi(this.recommendForm)
        .then(({ message }) => {
          this.$message.success(message);
          this.getList("");
          this.dialogRecommend = false;
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },
    getInfo(id) {
      this.fullscreenLoading = true;
      this.checkboxGroup = [];
      productDetailApi(id)
        .then((res) => {
          const info = res.data;
          this.formValidate = {
            is_hot: info.is_hot,
            is_best: info.is_best,
            is_new: info.is_new,
            is_benefit: info.is_benefit,
            ficti: info.ficti,
            content: info.content,
            store_name: info.store_name,
            rank: info.rank,
            star: info.star,
            keyword: info.keyword,
            cate_id: info.cate_id,
            slider_image: info.slider_image,
            qualification: info.qualification,
            image: info.image,
            audit_type: info.audit_type,
            is_customize: info.is_customize || 0,
          };
          if (info.is_benefit === 1) this.checkboxGroup.push("is_benefit");
          if (info.is_hot === 1) this.checkboxGroup.push("is_hot");
          if (info.is_best === 1) this.checkboxGroup.push("is_best");
          if (info.is_new === 1) this.checkboxGroup.push("is_new");
          this.fullscreenLoading = false;
        })
        .catch((res) => {
          this.$message.error(res.message);
          this.fullscreenLoading = false;
        });
    },
    onEdit(id) {
      this.productId = id;
      this.getInfo(id);
      this.dialogVisible = true;
    },
    // 编辑虚拟销量
    toVirtualSales(id) {
      this.$modalForm(toVirtualSalesApi(id)).then(() => this.getList(""));
    },
    // 编辑标签
    setTagName(id) {
      this.$modalForm(setTagNameApi(id)).then(() => this.getList(""));
    },
    // 提交
    handleSubmit(name) {
      console.log(this.formValidate);
      this.$refs[name].validate((valid) => {
        if (valid) {
          productUpdateApi(this.productId, this.formValidate)
            .then(async (res) => {
              this.fullscreenLoading = false;
              this.$message.success(res.message);
              this.dialogVisible = false;
              this.getList("");
            })
            .catch((res) => {
              this.fullscreenLoading = false;
              this.$message.error(res.message);
            });
        } else {
          return false;
        }
      });
    },
    onChangeGroup() {
      this.checkboxGroup.includes("is_benefit")
        ? (this.formValidate.is_benefit = 1)
        : (this.formValidate.is_benefit =
            0 && this.checkboxGroup.remove("is_benefit"));
      this.checkboxGroup.includes("is_best")
        ? (this.formValidate.is_best = 1)
        : (this.formValidate.is_best =
            0 && this.checkboxGroup.remove("is_best"));
      this.checkboxGroup.includes("is_new")
        ? (this.formValidate.is_new = 1)
        : (this.formValidate.is_new = 0 && this.checkboxGroup.remove("is_new"));
      this.checkboxGroup.includes("is_hot")
        ? (this.formValidate.is_hot = 1)
        : (this.formValidate.is_hot = 0 && this.checkboxGroup.remove("is_hot"));
    },
    onChangeRecommend() {
      this.recommendForm.is_benefit = Number(
        this.recommendGroup.includes("is_benefit")
      );
      this.recommendForm.is_best = Number(
        this.recommendGroup.includes("is_best")
      );
      this.recommendForm.is_new = Number(
        this.recommendGroup.includes("is_new")
      );
      this.recommendForm.is_hot = Number(
        this.recommendGroup.includes("is_hot")
      );
    },
    handleClose() {
      this.dialogVisible = false;
      this.dialogLabel = false;
      this.dialogRecommend = false;
    },
    // 批量下架
    batchOff() {
      if (this.multipleSelection.length === 0)
        return this.$message.warning("请先选择商品");
      this.toOff(this.OffId);
    },
    // 批量设置标签
    batchLabel() {
      this.labelForm = {
        tag_name: "",
        ids: this.OffId,
      };
      console.log(this.labelForm);
      this.isBatch = true;
      this.dialogLabel = true;
    },
    // 批量显示不显示
    batchShow(status) {
      if (this.multipleSelection.length === 0)
        return this.$message.warning("请先选择商品");
      let data = { status: status, ids: this.OffId };
      batchesOnOffApi(data)
        .then((res) => {
          this.$message.success(res.message);
          this.getList("");
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },
    // 下架
    toOff(id) {
      this.$prompt("强制下架", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputErrorMessage: "请输入强制下架原因",
        inputType: "textarea",
        inputPlaceholder: "请输入强制下架原因",
        inputValidator: (value) => {
          if (!value) {
            return "请输入强制下架原因";
          }
        },
      })
        .then(({ value }) => {
          productOffApi({
            id: id,
            status: -2,
            refusal: value,
          })
            .then((res) => {
              this.$message({
                type: "success",
                message: "提交成功",
              });
              this.getLstFilterApi();
              this.getList("");
            })
            .catch((res) => {
              this.$message.error(res.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 列表表头；
    getLstFilterApi() {
      lstFilterApi()
        .then((res) => {
          this.headeNum = res.data;
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },
    // 商户列表；
    getMerSelect() {
      merSelectApi()
        .then((res) => {
          this.merSelect = res.data;
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },
    batch() {
      if (this.multipleSelection.length === 0)
        return this.$message.warning("请先选择商品");
      this.isShow = false;
      this.$refs.infoFrom.dialogVisible = true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      const data = [];
      this.multipleSelection.map((item) => {
        data.push(item.product_id);
      });
      this.OffId = data;
    },
    toExamine(id) {
      this.$refs.infoFrom.dialogVisible = true;
      this.isShow = true;
      this.$refs.infoFrom.getInfo(id);
    },
    // 商户分类；
    getCategorySelect() {
      categoryListApi()
        .then((res) => {
          this.merCateList = res.data;
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },
    // 列表
    getList(num) {
      this.listLoading = true;
      this.tableFrom.page = num ? num : this.tableFrom.page;
      productLstApi(this.tableFrom)
        .then((res) => {
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.count;
          this.listLoading = false;
        })
        .catch((res) => {
          this.listLoading = false;
          this.$message.error(res.message);
        });
    },
    pageChange(page) {
      this.tableFrom.page = page;
      this.getList("");
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val;
      this.getList("");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-select-dropdown__item {
  max-width: 350px !important;
}
// ::v-deep.el-table .el-table__fixed-right .el-table__fixed-body-wrapper .el-table__body {
//   padding-bottom: 18px!important;
// }
/deep/.el-table__fixed,
/deep/.el-table__fixed-left,
/deep/.el-table__fixed-right {
  height: calc(100% - 16px) !important;
}

/deep/.el-table__fixed-body-wrapper {
  height: 100% !important;
}

/deep/.el-table__fixed-body-wrapper .el-table__body {
  /*滚动条高度*/
  padding-bottom: 16px !important;
}
.template {
  overflow: hidden;
}
.label-list {
  height: 100%;
}
.bg {
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
}
.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
  }
}
.btndel {
  position: absolute;
  z-index: 1;
  width: 20px !important;
  height: 20px !important;
  left: 46px;
  top: -4px;
}
.tags_name {
  font-size: 10px;
  height: 16px;
  line-height: 16px;
  padding: 0 2px;
  margin-right: 2px;
  &.name0 {
    color: var(--prev-color-primary);
  }
  &.name1 {
    color: #ff8a4d;
  }
}
.rate_star {
  position: relative;
  top: 5px;
}
table .el-image {
  display: inline-block;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand ::v-deep label {
  width: 105px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33.33%;
}
.seachTiele {
  line-height: 35px;
}
.el-dropdown-link {
  cursor: pointer;
  color: var(--prev-color-primary);
  font-size: 12px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>