index.vue

<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item :label="$t('商品编码')" prop="productCode">
        <el-input
          v-model.trim="queryParams.productCode"
          :placeholder="$t('请输入商品编码')"
          clearable
          @keyup.enter.native="handleQuery"
          onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"
        />
      </el-form-item>

      <el-form-item :label="$t('海关编码')" prop="customsCode">
        <el-input
          v-model.trim="queryParams.customsCode"
          :placeholder="$t('请输入海关编码')"
          clearable
          @keyup.enter.native="handleQuery"
          onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"
        />
      </el-form-item>

      <el-form-item :label="$t('商品名称')" prop="titleZh">
        <el-input
          v-model="queryParams.titleZh"
          :placeholder="$t('请输入商品名称')"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item :label="$t('商品类型')" prop="attrId">
        <el-select
          v-model="queryParams.typeId"
          multiple
          :placeholder="$t('选择商品类型')"
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="types in typeList"
            :key="types.id"
            :label="$l(types, 'title')"
            :value="types.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('商品特性')" prop="attrId">
        <el-select
          v-model="queryParams.attrId"
          multiple
          :placeholder="$t('选择商品特性')"
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="attr in attrList"
            :key="attr.id"
            :label="attr.attrName"
            :value="attr.id"
          />
        </el-select>
      </el-form-item>

      <!-- <el-form-item :label="$t('审核状态')" prop="auditStatus">
        <el-select v-model="queryParams.auditStatus" :placeholder="$t('选择审核状态')" clearable>
          <el-option v-for="auditStatusItem in auditStatusDictDatas" :key="auditStatusItem.id" :label="auditStatusItem.label" :value="auditStatusItem.value" />
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('上架状态')" prop="status">
        <el-select v-model="queryParams.status" :placeholder="$t('选择上架状态')" clearable>
          <el-option v-for="statusItem in statusDictDatas" :key="statusItem.id" :label="statusItem.value == CommonStatusEnum.ENABLE ? '已上架' : '已下架'" :value="statusItem.value" />
        </el-select>
      </el-form-item> -->

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{
          $t("搜索")
        }}</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">{{
          $t("重置")
        }}</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['ecw:product:create']"
          >{{ $t("新增") }}</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-setting"
          size="mini"
          @click="handleEdit"
          v-hasPermi="['ecw:product:attr']"
          >{{ $t("批量设置商品属性") }}</el-button
        >
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['ecw:product-price:export']"
          :loading="exportLoading"
          >{{ $t("导出") }}</el-button
        >
      </el-col>

      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-table
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column :label="$t('商品编号')" align="center" prop="id" />
      <el-table-column :label="$t('商品类型')" align="center" prop="typeId">
        <template slot-scope="scope">
          <span>{{ getTypeName(scope.row.typeId) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('海关编码')"
        align="center"
        prop="customsCode"
      />
      <el-table-column :label="$t('中文标题')" align="center" prop="titleZh" />
      <el-table-column :label="$t('英文标题')" align="center" prop="titleEn" />
      <el-table-column :label="$t('商品属性')" align="center" prop="attrId">
        <template slot-scope="scope">
          <span>{{ getAttrName(scope.row.attrId) }}</span>
        </template>
      </el-table-column>
      <!--商品特性-->
      <el-table-column :label="$t('商品图片')" align="center" prop="attrId">
        <template slot-scope="scope">
          <el-image
            :src="firstImg(scope.row.imgs)"
            style="width: 50px; height: 50px"
            >{{ $t("无") }}</el-image
          >
        </template>
      </el-table-column>

      <el-table-column
        prop="auditStatus"
        align="center"
        :label="$t('是否审核')"
        width="120"
      >
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.auditStatus"
            @change="handleStatusChange(scope.row, 'auditStatus')"
          >
            <el-option
              v-for="auditStatusItem in auditStatusDictDatas"
              :key="auditStatusItem.id"
              :label="$l(auditStatusItem, 'label')"
              :value="parseInt(auditStatusItem.value)"
            />
          </el-select>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('添加人')"
        align="center"
        prop="creatorName"
      />

      <el-table-column :label="$t('添加时间')" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('修改人')"
        align="center"
        prop="updaterName"
      />

      <el-table-column :label="$t('修改时间')" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column prop="status" align="center" :label="$t('状态')" width="120">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
        </template>
      </el-table-column> -->

      <el-table-column
        :label="$t('操作')"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="toPriceManager(scope.row)"
            v-hasPermi="['ecw:product-price:query']"
            >{{ $t("路线价格") }}</el-button
          >

          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['ecw:product:update']"
            >{{ $t("修改") }}</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['ecw:product:delete']"
            >{{ $t("删除") }}</el-button
          >
          <!--要有价格复制权限 lanbm 2024-06-19 添加注释-->
          <el-button
            v-if="scope.row.auditStatus === 2"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="copyPrice(scope.row)"
            v-hasPermi="['ecw:product:copyPrice']"
            >{{ $t("复制价格") }}</el-button
          >

          <!-- <div v-else>
          <el-button  size="mini" type="text" @click="toPriceManager(scope.row)" v-hasPermi="['ecw:product-price:query']">{{$t('路线价格')}}</el-button>

          <el-button  size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['ecw:product:update']">{{$t('修改')}}</el-button>
          <el-button  size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['ecw:product:delete']">{{$t('删除')}}</el-button>
         </div> -->
          <!-- <el-button v-else size="mini" type="text" icon="el-icon-edit" @click="copyPrice(scope.row)" v-hasPermi="['ecw:product:copyPrice']">{{$t('复制价格')}}</el-button> -->
        </template>
        <!-- <template v-else>
          <el-button size="mini" type="text" @click="toPriceManager(scope.row)" v-hasPermi="['ecw:product-price:query']">{{$t('路线价格')}}</el-button>

          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['ecw:product:update']">{{$t('修改')}}</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['ecw:product:delete']">{{$t('删除')}}</el-button>

      
        </template> -->
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 对话框(添加 / 修改) -->
    <el-dialog
      :modal="false"
      :modal-append-to-body="true"
      :title="title"
      :visible.sync="open"
      width="850px"
    >
      <el-form
        v-if="open"
        ref="form"
        :model="form"
        :rules="rules"
        label-width="110px"
      >
        <el-form-item :label="$t('商品类型')" prop="typeId">
          <el-select
            v-model="form.typeId"
            :placeholder="$t('选择商品类型')"
            clearable
          >
            <el-option
              v-for="types in typeList"
              :key="types.id"
              :label="types.titleZh"
              :value="types.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('中文标题')" prop="titleZh">
          <el-input
            v-model="form.titleZh"
            :placeholder="$t('请输入中文标题')"
          />
        </el-form-item>

        <el-form-item :label="$t('英文标题')" prop="titleEn">
          <el-input
            v-model="form.titleEn"
            :placeholder="$t('请输入英文标题')"
          />
        </el-form-item>

        <el-form-item :label="$t('商品图片')" prop="img">
          <image-upload v-model="form.imgs" />
        </el-form-item>

        <el-form-item prop="auditStatus" :label="$t('是否审核')">
          <template slot-scope="scope">
            <el-select v-model="form.auditStatus">
              <el-option
                v-for="auditStatusItem in auditStatusDictDatas"
                :key="auditStatusItem.id"
                :label="$l(auditStatusItem, 'label')"
                :value="parseInt(auditStatusItem.value)"
              />
            </el-select>
          </template>
        </el-form-item>
        <el-form-item :label="$t('商品编码')" prop="productCode">
          <el-input
            v-model="form.productCode"
            :placeholder="$t('请输入商品编码')"
          />
        </el-form-item>

        <el-form-item :label="$t('海关编码')" prop="customsCode">
          <el-input
            v-model="form.customsCode"
            :placeholder="$t('请输入海关编码')"
          />
        </el-form-item>

        <el-form-item :label="$t('商品特性')" prop="attrArray">
          <el-select
            v-model="form.attrArray"
            :placeholder="$t('选择商品特性')"
            clearable
            multiple
          >
            <el-option
              v-for="attr in attrList"
              :key="attr.id"
              :label="attr.attrName"
              :value="attr.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('商品材质')" prop="materialType">
          <el-select
            v-model="form.materialType"
            :placeholder="$t('选择商品材质')"
            clearable
          >
            <el-option
              v-for="materialItem in materialList"
              :key="materialItem.value"
              :label="materialItem.label"
              :value="materialItem.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('出运要求')" prop="requirements">
          <el-checkbox
            v-model="form.requirements"
            :checked="form.requirements === 1 ? true : false"
            :true-label="1"
            :false-label="0"
            >{{ $t("证书要求") }}（{{ $t("支持多证书") }}）</el-checkbox
          >
        </el-form-item>

        <el-form-item :label="$t('包装要求')" prop="packaging">
          <el-select
            v-model="form.packaging"
            :placeholder="$t('选择包装要求')"
            clearable
          >
            <el-option
              v-for="packageItem in packagingList"
              :key="packageItem.value"
              :label="packageItem.label"
              :value="packageItem.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('默认货柜位置')" prop="containerLocation">
          <el-select
            v-model="form.containerLocation"
            :placeholder="$t('选择货柜位置')"
            clearable
          >
            <el-option
              v-for="locationItem in locationList"
              :key="locationItem.value"
              :label="locationItem.label"
              :value="locationItem.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('订单方数上限')" prop="square">
          <el-input v-model.number="form.square" type="number">
            <!-- <template slot="append">{{$t('立方米')}}</template> -->
          </el-input>
        </el-form-item>

        <el-form-item :label="$t('是否预约入仓')" prop="needBook">
          <el-radio v-model.number="form.needBook" :label="1">{{
            $t("是")
          }}</el-radio>
          <el-radio v-model.number="form.needBook" :label="0">{{
            $t("否")
          }}</el-radio>
        </el-form-item>
        <!--        <el-form-item :label="$t('可参与优惠活动')" prop="you">
                  <el-select v-model="form.you" :placeholder="$t('可参与优惠活动')" clearable>
                    <el-option v-for="packageItem in packagingList" :key="packageItem.value" :label="packageItem.label" :value="packageItem.value" />
                  </el-select>
                </el-form-item> -->
        <el-form-item
          :label="$t('每日入仓上限')"
          prop="dayLimit"
          v-if="form.needBook == 1"
        >
          <el-input v-model.number="form.dayLimit" type="number">
            <template slot="append">{{ $t("立方米") }}</template>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('可参与优惠')">
          <div
            style="
              width: 300px;
              height: 400px;
              border: 1px solid;
              overflow-y: auto;
            "
          >
            <div
              @click="selectMoveAbout(item)"
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
              :style="{ cursor: item.mandatory ? 'no-drop' : 'pointer' }"
              v-for="item in preferentialList"
              :key="item.couponId"
            >
              <div>
                {{ $l(item, "title") }}
              </div>
              <i
                v-if="form.couponIds.includes(item.couponId)"
                style="margin-right: 20px"
                class="el-icon-check"
              ></i>
            </div>
          </div>
        </el-form-item>
        <!--        <el-form-item label-width="150px" label="空运订单重量上限kg">-->
        <!--          <el-input-number v-model="form.airWeightLimit"  controls-position="right"  ></el-input-number>-->

        <!--        </el-form-item>-->
        <!--        <packaging-type  key-arr="priceStepClearanceList" v-model="form">-->
        <!--          <el-button @click="visible =  true; open = false;" type="text">选择空运模板</el-button>-->
        <!--        </packaging-type>-->
        <!--         <p v-if="lineNum">-->
        <!--           <span>-->
        <!--             复制模板线路价格：{{lineNum}}个-->
        <!--           </span>-->
        <!--           <span @click="toPriceManager(formCopy, true)" style="color: #0a84ff;cursor: pointer;">-->
        <!--             查看《#{{$l(formCopy,'title')}}#》路线价格-->
        <!--           </span>-->
        <!--           <el-button style="font-size: 12px;margin-left: 15px;color: red;" type="text" @click="form.priceStepClearanceList = [];lineNum = 0"  >清除路线</el-button>-->
        <!--         </p>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{
          $t("确定")
        }}</el-button>
        <el-button @click="cancel">{{ $t("取消") }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      width="60%"
      :visible.sync="visible"
      @close="
        () => {
          open = true;
        }
      "
    >
      <product-dialog @copyLine="copyLine"></product-dialog>
    </el-dialog>
  </div>
</template>

<script>
import {
  createProduct,
  deleteProduct,
  exportProductExcel,
  getProduct,
  getProductPage,
  product_coupon_newProd,
  updateProduct,
} from "@/api/ecw/product";
import { getProductAttrList } from "@/api/ecw/productAttr";
import { getProductTypeList } from "@/api/ecw/productType";
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
import { AuditStatusEnum, CommonStatusEnum } from "@/utils/constants";
import { uploadFile } from "@/api/infra/file";
import ImageUpload from "@/components/ImageUpload";
import PackagingType from "@/views/ecw/channel/componrnts/packaging-type.vue";
import ProductDialog from "@/views/ecw/product/product-dialog.vue";

export default {
  name: "EcwProductIndex",
  components: {
    ProductDialog,
    PackagingType,
    ImageUpload,
  },
  data() {
    return {
      visible: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      //特性列表
      attrList: [],
      //类型列表
      typeList: [],
      //材质列表
      materialList: [],
      //包装列表
      packagingList: [],
      //货柜位置
      locationList: [],

      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产品列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      dateRangeCreateTime: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        typeId: null,
        attrId: null,
        titleZh: null,
        titleEn: null,
        auditStatus: null,
        status: null,
      },
      // 表单参数
      form: {},
      formCopy: {},
      // 表单校验
      rules: {
        typeId: [
          {
            required: true,
            message: this.$t("商品类型不能为空"),
            trigger: "change",
          },
        ],
        attrArray: [
          {
            required: true,
            message: this.$t("商品特性不能为空"),
            trigger: "change",
          },
        ],
        titleZh: [
          {
            required: true,
            message: this.$t("中文标题不能为空"),
            trigger: "blur",
          },
        ],
        titleEn: [
          {
            required: true,
            message: this.$t("英文标题不能为空"),
            trigger: "blur",
          },
        ],
        // materialType: [{ required: true, message: this.$t("商品材质不能为空"), trigger: "blur" }],
        // packaging: [{ required: true, message: this.$t("包装要求不能为空"), trigger: "blur" }],
        // containerLocation: [{ required: true, message: this.$t("默认货柜位置不能为空"), trigger: "blur" }],
        // square: [{ required: true, message: this.$t("订单方数上线不能为空"), trigger: "blur" }],
        // needBook: [{ required: true, message: this.$t("是否预约入仓不能为空"), trigger: "blur" }],
      },

      CommonStatusEnum: CommonStatusEnum,
      AuditStatusEnum: AuditStatusEnum,
      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
      auditStatusDictDatas: getDictDatas(DICT_TYPE.AUDIT_STATUS),
      materialList: getDictDatas(DICT_TYPE.ECW_PRODUCT_MATERIAL),
      packagingList: getDictDatas(DICT_TYPE.ECW_PACKAGING_TYPE),
      locationList: getDictDatas(DICT_TYPE.ECW_CONTAINER_LOCATION),
      preferentialList: [],
      exceptionProductId: 0, //新增商品异常传的id
      lineNum: 0,
    };
  },

  computed: {
    getTypeName() {
      return (typeId) => {
        for (let index in this.typeList) {
          let typeItem = this.typeList[index];
          if (typeItem.id == typeId) {
            return this.$l(typeItem, "title");
          }
        }
      };
    },

    getAttrName() {
      return (attrIds) => {
        let productAttrArray = [];
        let attrArray = attrIds.split(",");
        for (let attrIndex in attrArray) {
          let attrId = attrArray[attrIndex];
          for (let index in this.attrList) {
            let attrItem = this.attrList[index];
            if (attrItem.id == attrId) {
              productAttrArray.push(this.$l(attrItem, "attrName"));
            }
          }
        }
        return productAttrArray.join(",");
      };
    },
    firstImg() {
      return (imgString) => {
        if (!imgString || imgString == "") return imgString;
        let imgs = imgString.split(",");
        return imgs.length ? imgs[0] : null;
      };
    },
  },

  activated() {
    if (this.$route.query.typeId != this.queryParams.typeId) {
      this.queryParams.typeId = +this.$route.query.typeId || null;
    }
    //新增商品异常跳转商品修改
    if (this.$route.query.prodId) {
      this.exceptionProductId = this.$route.query.prodId;
      this.handleUpdate({ id: this.$route.query.prodId });
    }
    this.getList();
  },
  created() {
    //新增商品异常跳转商品修改
    if (this.$route.query.prodId) {
      this.exceptionProductId = this.$route.query.prodId;
      this.handleUpdate({ id: this.$route.query.prodId });
    }
    let typeId = this.$route.query.typeId;
    if (typeId) {
      this.queryParams.typeId = parseInt(typeId);
    }
    this.getAttrList();
    this.getTypeList();
    this.getList();
  },
  methods: {
    // copyLine(val , bol){
    //   this.formCopy = val;
    //   let copy = ()=>{
    //     if(val.priceStepClearanceList.length === 0) return  this.form.priceStepClearanceList = []
    //     this.form.airWeightLimit = val.airWeightLimit;
    //     val.priceStepClearanceList.forEach((item ,index) =>{
    //       if(this.form.priceStepClearanceList[index]){
    //         this.form.priceStepClearanceList[index].clearancePrice = item.clearancePrice
    //         this.form.priceStepClearanceList[index].clearancePriceUnit = item.clearancePriceUnit
    //         this.form.priceStepClearanceList[index].clearanceVolumeUnit = item.clearanceVolumeUnit
    //         this.form.priceStepClearanceList[index].endNum = item.endNum
    //         this.form.priceStepClearanceList[index].startNum = item.startNum
    //         this.form.priceStepClearanceList[index].weightUnit = item.weightUnit
    //       }else {
    //         let p = {
    //           "channelId":undefined,
    //           "clearancePrice":item.clearancePrice,
    //           "clearancePriceUnit":item.clearancePriceUnit,
    //           "clearanceVolumeUnit":item.clearanceVolumeUnit,
    //           "endNum":item.endNum,
    //           "packagingId":undefined,
    //           "startNum":item.startNum,
    //           "weightUnit":item.weightUnit
    //         }
    //         this.form.priceStepClearanceList.push(p)
    //       }
    //     })
    //   }
    //   this.visible = false;
    //   if(bol){
    //     let message = this.$l(this.form,'title') ? `请确认是否要将#${this.$l(val,'title')}#的所有路线价格复制到当前商品#${this.$l(this.form,'title')}#中？` : `请确认是否要将#${this.$l(val,'title')}#的所有路线价格复制到当前商品中？`
    //     this.$confirm(message, '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     }).then(() => {
    //       // this.form.priceLineCount = val.id;
    //       this.lineNum = val.priceLineCount;
    //       this.form.productTemplateId = val.id;
    //       this.form.isCopyProductPriceTemplate = true;
    //       copy()
    //       this.open = true;
    //     }).catch(() => {
    //       this.open = true;
    //     });
    //   }else {
    //     this.open = true;
    //     copy()
    //     this.lineNum = 0
    //     this.form.isCopyProductPriceTemplate = false;
    //   }
    //   this.$forceUpdate()
    // },
    /** 获取产品属性列表 */
    getAttrList() {
      getProductAttrList().then((response) => {
        this.attrList = response.data;
      });
    },

    /** 获取产品类型列表 */
    getTypeList() {
      getProductTypeList().then((response) => {
        this.typeList = response.data;
      });
    },

    /**跳转价格管理 */
    toPriceManager(row, flag = false) {
      /* localStorage.setItem('product', JSON.stringify(row));
      localStorage.setItem('typeList', JSON.stringify(this.typeList)); */
      let p;
      if (flag) {
        p = {
          product_id: row.id,
          product_type: row.typeId,
          transportType: 3,
        };
      } else {
        p = {
          product_id: row.id,
          product_type: row.typeId,
        };
      }
      this.$router.push({
        name: "ProductPrice",
        query: p,
      });
    },

    handleStatusChange(row, statusType) {
      updateProduct(row)
        .then(() => {
          this.$modal.msgSuccess(this.$t("修改成功"));
        })
        .catch(function () {
          if (statusType == "status") {
            row.status =
              row.status === CommonStatusEnum.ENABLE
                ? CommonStatusEnum.DISABLE
                : CommonStatusEnum.ENABLE;
          } else {
            row.auditStatus =
              row.auditStatus === AuditStatusEnum.PASS
                ? AuditStatusEnum.NOT_PASS
                : AuditStatusEnum.PASS;
          }
        });
    },
    //复制价格
    copyPrice(row) {
      this.$router.push({
        path: "/product/copyPrice",
        query: { titleZh: row.titleZh, id: row.id },
      });
    },

    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      let params = { ...this.queryParams };
      params.filter = false;
      this.addBeginAndEndTime(params, this.dateRangeCreateTime, "createTime");
      // 执行查询
      params.status = 0;
      getProductPage(params).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        typeId: undefined,
        attrArray: undefined,
        attrId: undefined,
        titleZh: undefined,
        titleEn: undefined,
        auditStatus: undefined,
        status: undefined,
        requirements: 0,
        needBook: 0,
        couponIds: [],
        airWeightLimit: undefined,
        priceStepClearanceList: [],
        isCopyProductPriceTemplate: false,
        productTemplateId: undefined,
      };
      this.lineNum = 0;
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreateTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = this.$t("添加商品");
      product_coupon_newProd().then((r) => {
        this.preferentialList = r.data;
        this.form.couponIds = this.preferentialList
          .filter((i) => i.isDefault)
          .map((i) => i.couponId);
      });
      if (this.queryParams.typeId) {
        this.form.typeId = this.queryParams.typeId;
      }
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      // this.reset();
      console.log(row);
      const id = row.id;
      getProduct(id).then((response) => {
        this.form = { ...response.data, couponIds: [] };
        this.form.channelPriceStepClearanceList =
          this.form.priceStepClearanceList;
        let attrArray = this.form.attrId ? this.form.attrId.split(",") : [];
        for (let index in attrArray) {
          let value = attrArray[index];
          attrArray[index] = parseInt(value);
        }
        this.$nextTick(() => {
          this.$set(this.form, "attrArray", attrArray);
        });
        this.open = true;
        this.title = this.$t("修改商品");
        product_coupon_newProd({ prodId: id }).then((r) => {
          this.preferentialList = r.data;
          this.form.couponIds = this.preferentialList
            .filter((i) => i.isDefault)
            .map((i) => i.couponId);
          // this.reset()
        });
      });
    },
    verify(row) {
      return (
        row.startNum !== "" &&
        row.endNum !== "" &&
        row.clearancePrice !== "" &&
        row.clearancePriceUnit !== "" &&
        row.clearanceVolumeUnit !== ""
      );
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        // if(!this.form.airWeightLimit){
        //   return this.$message.warning('请输入空运订单重量上限')
        // }
        // if(this.form.priceStepClearanceList.length === 0){
        //   return this.$message.warning('阶梯定价输入不完整！')
        // }else {
        //    let bol = this.form.priceStepClearanceList.every(this.verify)
        //   if(!bol){
        //     return this.$message.warning('阶梯定价输入不完整！')
        //   }
        //
        // }
        //商品特性转字符串
        this.form.attrId = this.form.attrArray.join(",");
        // 修改的提交
        if (this.form.id != null) {
          this.form.priceStepClearanceList.forEach((i) => {
            i.productId = this.form.id;
          });
          if (this.exceptionProductId) {
            this.form.productId = this.exceptionProductId;
            this.form.status = 0;
          } else {
            this.form.productId = this.form.id;
          }
          updateProduct(this.form).then((response) => {
            this.$modal.msgSuccess(this.$t("修改成功"));
            this.open = false;
            if (this.exceptionProductId) {
              this.exceptionProductId = null;
              this.$router.replace({ path: "/product/product-list" });
            }
            this.getList();
            this.lineNum = 0;
          });
          return;
        }
        // 添加的提交
        createProduct(this.form).then((response) => {
          this.$modal.msgSuccess(this.$t("新增成功"));
          this.open = false;
          this.getList();
          this.lineNum = 0;
        });
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id;
      this.$modal
        .confirm(this.$t("是否确认删除商品编号为{id}的数据项?", { id }))
        .then(function () {
          return deleteProduct(id);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess(this.$t("删除成功"));
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      // 处理查询参数
      let params = { ...this.queryParams };
      params.pageNo = undefined;
      params.pageSize = undefined;
      this.addBeginAndEndTime(params, this.dateRangeCreateTime, "createTime");
      // 执行导出
      this.$modal
        .confirm(this.$t("是否确认导出所有商品数据项?"))
        .then(() => {
          this.exportLoading = true;
          return exportProductExcel(params);
        })
        .then((response) => {
          // this.$download.excel(response, '商品.xlsx');
          this.$message.success(
            this.$t("已加入导出队列，请稍后在下载日志中下载")
          );
          this.exportLoading = false;
        })
        .catch(() => {});
    },
    // 上传预处理
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.$modal.msgError(
          this.$t("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
        );
      } else {
        //上传
        let formData = new FormData();
        formData.append("file", file);
        // formData.append("path", this.uuid());
        uploadFile(formData).then((response) => {
          this.$set(this.form, "imgs", response.data);
          // this.form.img = response.data;
        });
      }
    },

    uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      var uuid = s.join("");
      return uuid;
    },
    // 表格多选
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 批量设置商品属性
    handleEdit() {
      this.$router.push({
        path: "product-attr/edit",
        query: {
          ids: this.ids,
        },
      });
    },
    selectMoveAbout(val) {
      if (!val.mandatory) {
        let index = this.form.couponIds.findIndex((i) => val.couponId == i);
        if (index >= 0) {
          this.$confirm(
            this.$t(
              `您确定要将商品从优惠活动${this.$l(val, "title")}中移出吗？`
            ),
            this.$t("提示"),
            {
              confirmButtonText: this.$t("确定"),
              cancelButtonText: this.$t("取消"),
              type: "warning",
            }
          )
            .then(() => {
              this.form.couponIds.splice(index, 1);
              this.$forceUpdate();
            })
            .catch(() => {});
        } else {
          this.$confirm(
            this.$t(
              `您确定要将商品加入到优惠活动${this.$l(val, "title")}中吗？`
            ),
            this.$t("提示"),
            {
              confirmButtonText: this.$t("确定"),
              cancelButtonText: this.$t("取消"),
              type: "warning",
            }
          )
            .then(() => {
              this.form.couponIds.push(val.couponId);
              this.$forceUpdate();
            })
            .catch(() => {});
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>