index.vue

<template>
  <div class="manage-container mallManage-wrapper">
    <el-row class="manage-head-wrapper">
      <el-col :span="17" :sm="17">
        <div class="manage-select-box">
          <el-select v-model="condition.countryName" filterable :placeholder="$t('pholder.countries')"
            @change="changeEditCountry">
            <template v-if="countryList.length > 0">
              <el-option :label="$t('pholder.all')" :value="null" />
            </template>
            <el-option v-for="item in countryList" :key="item.countryCode" :label="item.countryName"
              :value="item.countryCode" />
          </el-select>
          <el-select v-model="condition.provinceName" filterable :placeholder="$t('pholder.provinces')"
            @change="changeEditProvince">
            <template v-if="provinceList.length > 0">
              <el-option :label="$t('pholder.all')" :value="null" />
            </template>
            <el-option v-for="item in provinceList" :key="item.provinceId" :label="item.areaName"
              :value="item.provinceId" />
          </el-select>
          <el-select v-model="condition.cityName" filterable :placeholder="$t('pholder.city')">
            <template v-if="cityList.length > 0">
              <el-option :label="$t('pholder.all')" :value="null" />
            </template>
            <el-option v-for="item in cityList" :key="item.cityId" :label="item.areaName" :value="item.cityId" />
          </el-select>
          <el-select v-model="condition.status" :placeholder="$t('pholder.state')">
            <el-option v-for="item in statusList" :key="item.statusId" :label="item.statusName"
              :value="item.statusId" />
          </el-select>
        </div>
        <div class="manage-input-box">
          <!-- <el-input class="search-inp" v-model="name_like" :placeholder="$t('pholder.shop')" clearable /> -->
        </div>
        <el-button type="primary" class="search-btn" size="mini" plain @click="searchFun">{{$t('button.search')}}
        </el-button>
      </el-col>
      <el-col :span="7" :sm="7">
      </el-col>
    </el-row>
    <el-row class="manage-content">
      <el-col :span="24">
        <el-table :data="tableData" :max-height="tableHeight" style="width: 100%"
          header-row-class-name="manage-tab-head" tooltip-effect="light">
          <el-table-column prop="tabOrder" align="center" :label="$t('table.order')" width="80" />
          <el-table-column prop="mallName" width="230" :label="$t('table.squareName')" align="center" show-overflow-tooltip />
          <el-table-column prop="name" :label="$t('moreSetting.CustomerMatch')" align="center">
            <template slot-scope="scope">
              <el-switch @change="updSetting(scope.row.customCompareConfig,scope.row.mallId)" class="setting-switch"
                active-color="#dbdbdb" inactive-color="#409EFF" v-model="scope.row.customCompareConfig.configValue" active-value="0"
                inactive-value="1" />
            </template>
          </el-table-column>
          <el-table-column prop="name" :label="$t('moreSetting.FullBodyPhotoFeatureExtraction')" align="center" >
            <template slot-scope="scope">
              <el-switch @change="updSetting(scope.row.bodyFeatureConfig,scope.row.mallId,scope.row)" class="setting-switch"
                active-color="#dbdbdb" inactive-color="#409EFF" v-model="scope.row.bodyFeatureConfig.configValue" active-value="0"
                inactive-value="1" />
            </template>
          </el-table-column>
          <el-table-column prop="name" :label="$t('moreSetting.customerIdentification')" align="center" >
            <template slot-scope="scope">
              <el-switch @change="updSetting(scope.row.customerBodyMatchConfig,scope.row.mallId,scope.row)" class="setting-switch"
                active-color="#dbdbdb" inactive-color="#409EFF" v-model="scope.row.customerBodyMatchConfig.configValue" active-value="0"
                inactive-value="1" />
            </template>
          </el-table-column>
          <el-table-column prop="name" :label="$t('moreSetting.regularClerkIdentification')" align="center" >
            <template slot-scope="scope">
              <el-switch @change="updSetting(scope.row.clerkCompareConfig,scope.row.mallId)" class="setting-switch"
                active-color="#dbdbdb" inactive-color="#409EFF" v-model="scope.row.clerkCompareConfig.configValue" active-value="0"
                inactive-value="1" />
            </template>
          </el-table-column>
          <el-table-column prop="name" :label="$t('moreSetting.PeopleBody')" align="center" >
            <template slot-scope="scope">
              <el-switch @change="updSetting(scope.row.staffBodyMatchConfig,scope.row.mallId,scope.row)" class="setting-switch"
                active-color="#dbdbdb" inactive-color="#409EFF" v-model="scope.row.staffBodyMatchConfig.configValue" active-value="0"
                inactive-value="1" />
            </template>
          </el-table-column>
          <el-table-column prop="name" :label="$t('moreSetting.PeopleLibraryMatching')" align="center" >
            <template slot-scope="scope">
              <el-switch @change="updSetting(scope.row.personLibCompareConfig,scope.row.mallId)" class="setting-switch"
                active-color="#dbdbdb" inactive-color="#409EFF" v-model="scope.row.personLibCompareConfig.configValue" active-value="0"
                inactive-value="1" />
            </template>
          </el-table-column>

          <el-table-column prop="name" :label="$t('moreSetting.humanIdentification')" align="center" >
            <template slot-scope="scope">
              <el-switch @change="updSetting(scope.row.personBodyMatchConfig,scope.row.mallId,scope.row)" class="setting-switch"
                active-color="#dbdbdb" inactive-color="#409EFF" v-model="scope.row.personBodyMatchConfig.configValue" active-value="0"
                inactive-value="1" />
            </template>
          </el-table-column>
          <el-table-column prop="name" :label="$t('moreSetting.allDayAnalysisReid')" align="center" >
            <template slot-scope="scope">
              <el-switch @change="updSetting(scope.row.enableReid,scope.row.mallId,scope.row)" class="setting-switch"
                active-color="#dbdbdb" inactive-color="#409EFF" v-model="scope.row.enableReid.configValue" active-value="0"
                inactive-value="1" />
            </template>
          </el-table-column>


          <el-table-column prop="name" :label="$t('moreSetting.PrivacySetting')" align="center">
            <template slot-scope="scope">
              <el-switch @change="updSetting(scope.row.privacyConfig,scope.row.mallId)" class="setting-switch"
                active-color="#dbdbdb" inactive-color="#409EFF" v-model="scope.row.privacyConfig.configValue" active-value="0"
                inactive-value="1" />
            </template>
          </el-table-column>

          <el-table-column prop="action" :label="$t('table.operate')" align="center">
            <template slot-scope="scope">
              <el-button @click="moreSet(scope.row)" type="text" size="small" class="tab-btn">{{$t('button.moreSetting')}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="manage-pagination-box" background :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" @size-change="sizeChange"
          @current-change="currentChange" layout="sizes, prev, pager, next, slot" :total="total">
          <span class="slot-ele-total">{{$t('table.pageHead')}} {{ total }} {{$t('table.pageTail')}}</span>
        </el-pagination>
      </el-col>
    </el-row>
    <more-setting-dialog ref="moresettingModel" />
  </div>
</template>
<script>
  import moreSetting from "../MallManage/moreSetting.vue";
  export default {
    components: {
      "more-setting-dialog": moreSetting
    },
    data() {
      return {
        condition: {
          countryName: null,
          provinceName: null,
          cityName: null,
          status: 1
        },
        noDataText: "load",
        blocValue: "",
        name_like: "",
        tableData: [],
        total: 0,
        pageSize: 10,
        currentPage: 1,
        mallList: [],
        countryList: [],
        provinceList: [],
        cityList: [],
        AllcityList: {},
        accountList: [],
        statusList: [{
            statusId: "",
            statusName: this.$t("pholder.allstate")
          },
          {
            statusId: 1,
            statusName: this.$t("table.OpenShop")
          },
          {
            statusId: 2,
            statusName: this.$t("table.CloseShop")
          },
          {
            statusId: 3,
            statusName: this.$t("table.NotOpenShop")
          }
        ],
        mapLoading: true,
        searchKw: "",
        countryCode: null,
        externalId: ''
      };
    },
    computed: {
      tableHeight() {
        const windowInnerHeight = window.innerHeight;
        return windowInnerHeight - windowInnerHeight * 0.24;
      }
    },
    async mounted() {
      await this.getCountryList();
      const sessionProvinceList = window.sessionStorage.getItem("provinceList");
      const sessionCityList = sessionStorage.getItem("cityMap");
      this.provinceList = JSON.parse(sessionProvinceList) || [];
      this.AllcityList = JSON.parse(sessionCityList);
      if (!sessionProvinceList) {
        await this.getProvinceList();
      } else {
        await this.editChangeGetCity(this.condition.provinceName);
      }
      if (!sessionCityList) {
        this.getCityList();
      }
      this.getAccountList();
    },
    methods: {
      // 查询门店列表
      getTableData() {
        this.tableData = [];
        let tabelParams = {
          accountId: this.blocValue,
          countryCode: this.condition.countryName,
          provinceId: this.condition.provinceName,
          cityId: this.condition.cityName,
          status: this.condition.status,
          externalId_like: this.externalId === '' ? null : ("%" + this.externalId + "%"),
          name_like: this.name_like === '' ? null : ("%" + this.name_like + "%"),
          pageNum: this.currentPage,
          pageSize: this.pageSize,
        };
        this.$api.management.mallComparisonConfig(tabelParams, null, true).then(data => {
          let result = data.data;
          result.data.list.forEach((item, index) => {
            item.tabOrder = (this.currentPage - 1) * this.pageSize + index + 1;
            item.children = [];
            item.businessTime = null
          })
          this.tableData = result.data.list;
          this.total = result.data.total
        })
      },
      sizeChange(val) {
        this.pageSize = val;
        this.currentPage = 1
        this.getTableData();
      },
      currentChange(val) {
        this.currentPage = val;
        this.getTableData();
      },
      updSetting(curSetting,mallId,row,val,secondConfigKey) {
          let updParam = {
            mallId: mallId,
            accountId: this.blocValue,
            configKey: curSetting.configKey,
            name: curSetting.name,
            configValue: curSetting.configValue
          };
          this.$api.management.editMallConfig(curSetting.id, updParam).then(res => {
              let result = res.data;
              if (result.code === 200) {
                this.$message({
                  type: "success",
                  message: this.$t("message.editSuccess"),
                  showClose: true,
                  duration: 800
                });
                // 假如这四个任意一个为打开状态，默认打开全身照特征提取
                if ((curSetting.configKey == 'customerBodyMatchConfig')|| (curSetting.configKey == 'personBodyMatchConfig')||(curSetting.configKey == 'staffBodyMatchConfig')||(curSetting.configKey == 'enableReid')) {
                  // 判断全身照特征提取是否已经打开，若打开不用操作，同时还需要这四个也是打开状态
                  if((row.bodyFeatureConfig.configValue !=1) && (curSetting.configValue==1)){
                    if(val){
                      return false
                    }
                    let bodyFeature = {
                      configKey: row.bodyFeatureConfig.configKey,
                      name: row.bodyFeatureConfig.name,
                      configValue: 1,
                      id:row.bodyFeatureConfig.id,
                    }
                    this.updSetting(bodyFeature,mallId,row,'',curSetting.configKey)
                  }
                }
                // 假如是全身照特征提取为打开，默认打开其他的四个，若关闭，其他四个也为关闭状态
                setTimeout(()=>{
                  if(val){
                    return
                  }
                  if(curSetting.configKey == 'bodyFeatureConfig' && curSetting.configValue=='0'){
                    let customerBodyMatchConfig = {
                      configKey: 'customerBodyMatchConfig',
                      name: '顾客人体识别',
                      configValue: 0,
                      id:row.customerBodyMatchConfig.id,
                    }
                    let personBodyMatchConfig = {
                      configKey: 'personBodyMatchConfig',
                      name: '人员人体识别',
                      configValue: 0,
                      id:row.personBodyMatchConfig.id,
                    }
                    let staffBodyMatchConfig = {
                      configKey: 'staffBodyMatchConfig',
                      name: '店员人体识别',
                      configValue: 0,
                      id:row.staffBodyMatchConfig.id,
                    }
                    let enableReid = {
                      configKey: 'enableReid',
                      name: 'reid',
                      configValue: 0,
                      id:row.enableReid.id,
                    }
                    // 判断是否是单独打开一个时候同时打开全身照特征提取
                    if(secondConfigKey){

                    }else{
                      if(curSetting.configValue != row.customerBodyMatchConfig.configValue){
                        this.updSetting(customerBodyMatchConfig,mallId,row,1)
                      }
                      if(curSetting.configValue != row.personBodyMatchConfig.configValue){
                        this.updSetting(personBodyMatchConfig,mallId,row,1)
                      }
                      if(curSetting.configValue != row.staffBodyMatchConfig.configValue){
                        this.updSetting(staffBodyMatchConfig,mallId,row,1)
                      }
                      if(curSetting.configValue != row.enableReid.configValue){
                        this.updSetting(enableReid,mallId,row,1)
                      }
                    }
                  }
                },0)
                this.getTableData();
              }
              if (result.code != 200) {
                this.$message({
                  type: "error",
                  message: this.$t("message.editFailed"),
                  showClose: true
                });
              }
              this.canEdit = true
            })
            .catch(err => {
              this.canEdit = true
            });

      },
      moreSet(row) {
        // 更多配置
        row.id = row.mallId
        this.$refs.moresettingModel.dialogInit(row,'strategy');
      },
      // 搜索
      async searchFun() {
        this.currentPage = 1;
        this.pageSize = 10;
        this.getTableData();
      },
      // 国家 change handle
      changeEditCountry(val) {
        this.countryCode = val;
        this.getProvinceList();
      },
      //修改省份change
      changeEditProvince(val) {
        this.condition.cityName = null;
        this.editChangeGetCity(val);
      },
      getCountryList() {
        const lang = localStorage.getItem("lang");
        this.$api.base.country().then(data => {
            var result = data.data;
            this.countryList = result.data.reduce((prev, curVal) => {
              curVal.countryName =
                lang === "en_US" ? curVal.countryEn : curVal.countryCn;
              prev.push(curVal);
              return prev;
            }, []);
            window.sessionStorage.setItem(
              "countryList",
              JSON.stringify(this.countryList)
            );
            this.countryList.length &&
              (this.countryCode = this.countryList[0].countryCode);
          })
          .catch(error => {
            console.error(error);
          });
      },
      getProvinceList() {
        this.condition.provinceName = null;
        this.$api.base.city({
          level: 1,
          countryCode: this.countryCode || this.condition.countryName
        }).then(data => {
          var result = data.data;
          window.sessionStorage.setItem(
            "provinceList",
            JSON.stringify(result.data)
          );
          this.provinceList = result.data;
          this.editChangeGetCity(this.condition.provinceName);
        })
      },
      getCityList() {
        this.$api.base.city().then(data => {
          var result = data.data;
          const formatCityList = result.data.reduce((prevVal, curVal) => {
            prevVal[curVal.id] = curVal.areaName;
            return prevVal;
          }, {});
          window.sessionStorage.setItem(
            "cityMap",
            JSON.stringify(formatCityList)
          );
          this.AllcityList = formatCityList;
        })
      },
      editChangeGetCity(provinceId) {
        this.condition.cityName = null;
        this.$api.base.city({
          level: 2,
          countryCode: this.condition.countryName,
          provinceId: provinceId
        }).then(data => {
          let result = data.data;
          this.cityList = result.data;
        })
      },
      getAccountList() {
        this.blocValue = this.$cookie.get("accountId");
        this.getTableData();
      },
      provinceFormatter(row, column, cellValue, index) {
        const filterProvince = this.provinceList.find(
          item => item.provinceId === cellValue
        );
        return (
          (filterProvince && filterProvince.provinceName) || filterProvince.areaName || ""
        );
      },
      cityFormatter(row, column, cellValue, index) {
        if (cellValue) {
          return (this.AllcityList && this.AllcityList[cellValue]) || "--";
        }
      }
    }
  };
</script>