admin-manage/src/views/operationManage/goodsManage/homeGoodsSet.vue

<template>
  <div class="homeGoodsSet app-container">
     <div class="tab-list">
      <div class="tab" :class="[query.regionCode == item.regionCode?'active':'']" v-for="item in tableData2" :key="item.regionCode" @click="handleRegionCode(item.regionCode)">{{item.region}}</div>
    </div>
    <div class="tab-list">
      <div class="tab" :class="[query.productType == ''?'active':'']" @click="handleTab('')">全部</div>
      <div class="tab" :class="[query.productType == item.value?'active':'']" v-for="item in tabList" :key="item.value" @click="handleTab(item.value)">{{item.label}}</div>
    </div>
   
     <div class="search">
      <div>

        <el-input
          v-model="query.title"
          size="small"
          placeholder="请输入产品名称"
          clearable
          class="item-width-200 "
        ></el-input>
        <el-button
        class="ml10"
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleSearch"
      >
        搜索
      </el-button>
      </div>
       <!-- <el-button class="add-btn" type="primary" size="small" @click="handleAdd"
        >添加</el-button
      > -->
     
    </div>

    <div class="search">
      <div>
          <el-button class="add-btn" type="primary" size="small" :disabled="!pids.length" v-if="btnAuthObj.blacklist" @click="handleBatch(true)"
          >批量加入黑名单</el-button
        >
      </div>

      <div>
        <el-button class="add-btn" size="small" v-if="btnAuthObj.setProduct" @click="handleSetting"
          >产品配置</el-button
        >
        <el-button class="add-btn" size="small" @click="handleList"
          >黑名单</el-button
        >
      </div>
    </div>

    <el-table
      @selection-change="handleSelectionChange"
      :data="tableData"
      tooltip-effect="dark"
      border
      v-loading="loading"
      style="width: 100%"
    >
     <el-table-column
      align="center"
      type="selection"
      width="55">
    </el-table-column>
     <el-table-column
        width="250px"
        align="center"
        label="产品信息"
        prop="产品信息"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
        <div class="info">
        <el-image
        v-if="scope.row.cover&&scope.row.cover.length"
        :src="scope.row.cover[0]"
          class="small-img"
          style="width: 40px; height: 40px;"
          fit="cover"
          >
          </el-image>
          <span class="ml10">{{scope.row.title}}</span>
        </div>
      </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="价格"
        prop="salePrice"
        show-overflow-tooltip
      >
      </el-table-column>
       <el-table-column
        align="center"
        label="销量"
        prop="salesCount"
        show-overflow-tooltip
      >
      </el-table-column>
       <el-table-column
        align="center"
        label="区域"
        prop="regionCode"
        show-overflow-tooltip
      >
      </el-table-column>
       <el-table-column
        align="center"
        label="产品类型"
        prop="productType"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
        {{productType[scope.row.productType]||'暂无分类'}}
      </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="排序"
        prop="top"
        show-overflow-tooltip
      >
       <template slot-scope="scope">
        <span>{{scope.row.top}}</span> <i class="el-icon-edit"  @click="handleTop(scope.row)"></i>
      </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
   
          <el-button type="text" size="small" v-if="btnAuthObj.blacklist" @click="handleDel(scope.row,true)"
            >加入黑名单</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="query.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

      <el-dialog title="黑名单" width="80%" :visible.sync="dialogFormVisible3">
         <div class="search">
          <el-button class="add-btn" type="primary" size="small" :disabled="!pids1.length" @click="handleBatch(false)"
          >批量移除黑名单</el-button>
        </div>
        <el-table
        :data="tableData1"
        tooltip-effect="dark"
        border
        v-loading="loading"
        style="width: 100%"
        @selection-change="handleSelectionChange1"
      >
      <el-table-column
        align="center"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
          align="center"
          label="产品信息"
          prop="产品信息"
          show-overflow-tooltip
        >
        <template slot-scope="scope">
           <div class="info">
        <el-image
        v-if="scope.row.cover&&scope.row.cover.length"
        :src="scope.row.cover[0]"
          class="small-img"
          style="width: 40px; height: 40px;"
          fit="cover"
          >
          </el-image>
          <span class="ml10">{{scope.row.title}}</span>
        </div>
        </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="价格"
          prop="salePrice"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="销量"
          prop="salesCount"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="区域"
          prop="regionCode"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="产品类型"
          prop="productType"
          show-overflow-tooltip
        >
        <template slot-scope="scope">
          {{productType[scope.row.productType]||'暂无分类'}}
        </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="排序"
          prop="top"
          show-overflow-tooltip
        >
        <template slot-scope="scope">
          <span>{{scope.row.top}}</span> <i class="el-icon-edit"  @click="handleTop(scope.row)"></i>
        </template>
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template slot-scope="scope">

            <el-button type="text" size="small" v-if="btnAuthObj.blacklist" @click="handleDel(scope.row,false)"
              >移除黑名单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          background
          :current-page="query1.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="query1.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total1"
        >
        </el-pagination>
      </div>
  
    </el-dialog>

<el-dialog title="产品配置" width="750px" :visible.sync="dialogFormVisible1">
  <el-table
        :data="tableData2"
        tooltip-effect="dark"
        border
        v-loading="loading1"
        style="width: 100%"
      >
      <el-table-column
          align="center"
          label="行政区域"
          prop="region"
          show-overflow-tooltip
          width="150px"
        >
        </el-table-column>
     
        <el-table-column
          align="center"
          label="产品类型"
          prop="productType"
          show-overflow-tooltip
        >
        <template slot-scope="scope">
          {{  formatType(scope.row.types)}}
        </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="100px">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)"
              > 编辑</el-button
            >

            <el-button type="text" size="small" @click="handleRemove(scope.row.regionCode)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button type="text" size="small" @click="handleAdd">+添加</el-button>
   
</el-dialog>

<el-dialog :title="title" width="550px" :visible.sync="dialogFormVisible4">

    <el-form label-width="130px" :model="setQuery1"
      ref="setQuery1"
      :rules="rules1">
       <el-form-item label="区域"  prop="regionCode">
            <el-select v-model="setQuery1.regionCode" filterable class="item-width-300" placeholder="请选择">
              <el-option
                v-for="item in cityOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="产品类型"  prop="types">
            <el-select v-model="setQuery1.types" filterable multiple class="item-width-300" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
    </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
    <el-button type="primary" :loading="btnLoading1" @click="save">确 定</el-button>
  </div>
</el-dialog>

    <el-dialog title="排序" width="550px" :visible.sync="dialogFormVisible2">
        <el-form label-width="130px" :model="topFrom"
          ref="topFrom"
          :rules="rules2">
            <el-form-item label="排序"  prop="top">
               <el-input
              v-model.number="topFrom.top"
              class="item-width-300"
              ></el-input>
            </el-form-item>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" :loading="btnLoading2" @click="save2">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>
  
  <script>
import { debounce } from "@/utils/index";
import { homeGoodsList,setHidden,listShowTypes,listAllTypes,setShowTypes,setTop,listHidden,removeType,listSetTypesRegions } from "@/api/goods";
import { getCityList } from "@/api/common";

export default {
  name: "marketing",
  data() {
    return {
      regionOptions:[],
      cityOptions:[],
      date:'',
      title:'',
      tableData: [],
      tableData1: [],
      tableData2: [],
      loading: false,
      loading1: false,
      btnLoading: false,
      dialogFormVisible: false,
      btnLoading1: false,
      dialogFormVisible1: false,
      btnLoading2: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      query: {
        distance:100000000,
        latitude:30.57447,
        longitude:103.92377,
        regionCode:"",
        productType:'',
        title:'',
        page: 1,
        size: 10,
      },
      query1: {
        page: 1,
        size: 10,
      },
      total: 0,
      total1: 0,
      setQuery1:{
        "region": [
          "区域"
        ],
        "regionCode": [
          "区域编码"
        ],
        "types": [
          "显示产品类型"
        ]
      },
      options:[],
      setQuery:{
        "activityContent": "",
        "activityId": "",
        "activityMoney": 0,
        "endTime": "",
        "id": 0,
        "startTime": ""
      },
      topFrom:{
        pid:"",
        top:0,
        regionCode:''
      },
      rules:{
         activityId: [{ required: true, message: "请输入活动ID", trigger: "blur" }],
         activityMoney: [{ required: true, message: "请输入活动金额", trigger: "blur" }],
         startTime: [{ required: true, message: "请选择活动时间", trigger: "change" }],
      },
      rules1:{
         regionCode: [{ required: true, message: "请选择区域", trigger: "change" }],
         types: [{ type:'array',required: true, message: "请选择产品类型", trigger: "change" }],
      },
      rules2:{
         top: [{ required: true, message: "请输入排序", trigger: "blur" }],
      },
      productType:{
        'Web'
				    :'链接',
				'Recharge'
				    :'充值类',
				'Scenic'
				    :'景区',
				'ScenicTicket'
				    :'景区门票',
				'StudyTour'
				    :'研学旅游',
				'Hotel'
				    :'酒店',
				'HotelRoom'
				    :'酒店房型',
				'Cinema'
				    :'电影院',
				'MovieTicket'
				    :'电影票',
				'Restaurant'
				    :'餐厅',
				'RestaurantFood'
				    :'餐厅美食',
				'CarMaintain'
				    :'汽车保养门店',
				'CarMaintainGoods'
				    :'汽车保养商品',
				'CarMaintainService'
				    :'汽车保养服务',
				'Shop'
				    :'店铺',
				'ShopGoods'
				    :'店铺商品',
				'ShopService'
				    :'店铺服务',
				'Coupon'
				    :'优惠券',
				'PetrolStation'
				    :'加油站',
			
      },
      pids:[],//拉黑 
      pids1:[],// 解除
    };
  },
  watch: {

     date(val){
      if(val){
        this.setQuery.startTime = val[0]
        this.setQuery.endTime = val[1]
      }else{
        this.setQuery.startTime = ''
        this.setQuery.endTime = ''
      }
    },
  },
  computed: {
    tabList() {
      let types = []
      this.tableData2.map(item => {
        if(item.regionCode == this.query.regionCode){
          types = item.types
        }
      })
      let list = types.map(item => {
        return {
          label:item.productTypeDesc,
          value:item.productType
        }
      })
      return list
    }
  },
  methods: {
    formatType(types){
      let str = ''
      types.map(item=>{
        str += this.productType[item.productType] + '、'
      })
      return str
    },
    handleSelectionChange(val){
      this.pids = val.map(item => {
        return { pid:item.pid,regionCode:item.regionCode}
      })
    },
    handleSelectionChange1(val){
      this.pids1 = val.map(item => {
         return { pid:item.pid,regionCode:item.regionCode}
      })
    },
    handleList(){
      this.dialogFormVisible3 = true
      this.query1.page = 1
      this.listHidden()
    },
    handleTab(val){
      this.query.productType = val
      this.handleSearch()
    },
    handleRegionCode(val){
       this.query.regionCode = val
       this.query.productType = ''
      this.handleSearch()
    },
    handleSetting(){
      this.dialogFormVisible1 = true
    },
    handleSearch(){
        this.query.page = 1;
        this.getList();
    },
    handleRemove(code){
      this.$confirm(`此操作将删除该数据, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeType(code).then(res=>{
            if(res.state == 'Success'){
               this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success'
              });
               this.listShowTypes();
                this.handleSearch()
            }
          })
        })
    },
    handleEdit(row){
      this.title = '编辑'
      this.dialogFormVisible4 = true
      this.setQuery1 = {
         regionCode:row.regionCode,
         types:row.types.map(item=>item.productType)
      }
    
    },
    handleAdd() {
      this.title = '添加'
      this.setQuery1 = {
        regionCode:'',types:[]
      }
      this.dialogFormVisible4 = true

    },

    handleTop(row){
      this.topFrom.pid = row.pid
      this.dialogFormVisible2 = true
      this.topFrom.top = row.top
      this.topFrom.regionCode = row.regionCode
    },
    // 删除
     handleDel(item,hidden) {
      let str = ''
      if(hidden){
        str = '拉黑'
      }else{
        str = '取消拉黑'
      }
       this.$confirm(`此操作将${str}该数据, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          setHidden({products:[{pid:item.pid,regionCode:item.regionCode}],hidden}).then(res=>{
            if(res.state == 'Success'){
               this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success'
              });
              if(hidden){
                this.getList()

              }else{
                this.listHidden()
              }
            }
          })
        })
    },
    handleBatch(hidden){
      let str = ''
      let products
      if(hidden){
        str = '拉黑'
        products = this.pids
      }else{
        str = '取消拉黑'
        products = this.pids1
      }
       this.$confirm(`此操作将批量${str}该数据, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          setHidden({products,hidden}).then(res=>{
            if(res.state == 'Success'){
              this.dialogFormVisible3 = false
              this.pids = []
               this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success'
              });
              if(hidden){

              }else{
                // this.listHidden()
              }
              this.handleSearch()
            }
          })
        })
    },
    handleSizeChange(val) {
      this.query.page = 1;
      this.query.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getList();
    },
     handleSizeChange1(val) {
      this.query1.page = 1;
      this.query1.size = val;
      this.listHidden();
    },
    handleCurrentChange1(val) {
      this.query1.page = val;
      this.listHidden();
    },

    search() {
      this.query.page = 1;
      this.getList();
    },
    // 首页列表
    getList() {
      this.loading = true
      let query = JSON.parse(JSON.stringify(this.query))
      query.page-=1
      homeGoodsList(query).then((res) => {
        this.loading = false
        if (res.state == "Success") {
          this.tableData = res.content.content;
          this.total = res.content.totalElements
        }
      });
    },
    // 拉黑列表
    listHidden(){
       let query = JSON.parse(JSON.stringify(this.query1))
      query.page-=1
      listHidden(query).then(res=>{
        if (res.state == "Success") {
          this.tableData1 = res.content.content;
          this.total1 = res.content.totalElements
        }
      })
    },
    // 所有产品类型
    listAllTypes(){
       listAllTypes().then((res) => {
        if (res.state == "Success") {
          res.content.map(item=>{
            this.options.push({
              value:item.productType,
              label:item.productTypeDesc
            })
          })
        }
      });
    },
    // 所有设置的区域产品类型
    listShowTypes(){
      return new Promise((resolve, reject) => {
        this.loading1 = true
        listShowTypes().then(res=>{
          this.loading1 = false
          if (res.state == "Success") {
            if(res.content.content.length){

              this.query.regionCode = res.content.content[0].regionCode
            }

            this.tableData2 = res.content.content
            resolve()
            // this.setQuery1.type = res.content.map(item=>item.productType)
          }
        })
      })

    },
    // 添加编辑区域产品类型
    save(){
        this.$refs.setQuery1.validate((v) => {
        if (v) {
          this.btnLoading1 = true
          let setQuery1 = JSON.parse(JSON.stringify(this.setQuery1))
          setQuery1.types = setQuery1.types.map(item=>{
            return {productType:item}
          })
          setShowTypes(setQuery1).then(res=>{
            this.btnLoading1 = false
            if(res.state == 'Success'){
                this.dialogFormVisible4 = false
              this.$notify({
                  title: '成功',
                  message: '操作成功',
                  type: 'success'
                });
                this.listShowTypes();
                this.handleSearch()

            }
          })
              
        }
      });
    },
    // 设置排序
    save2(){
        this.$refs.topFrom.validate((v) => {
        if (v) {
          this.btnLoading2 = true
          setTop(this.topFrom).then(res=>{
            this.btnLoading2 = false
            if(res.state == 'Success'){
                this.dialogFormVisible2 = false
              this.$notify({
                  title: '成功',
                  message: '操作成功',
                  type: 'success'
                });
                this.getList();

            }
          })
              
        }
      });
    },
    getCityList() {
      this.loading = true
      getCityList({name:'',
        page: 0,
        size: 999,}).then((res) => {
        this.loading = false
        if (res.state == "Success") {
          this.cityOptions = res.content.content.map(item => {
            return {
              value: item.code,
              label: item.name
              }
            })
        }
      });
    },
    listSetTypesRegions() {
      listSetTypesRegions().then((res) => {
        if (res.state == "Success") {
          this.regionOptions = res.content.map(item => {
            return {
              value: item.code,
              label: item.name
            }
          })
        }
      });
    }
  
  },
  created() {
    // this.listSetTypesRegions();
    this.getCityList();
    this.listAllTypes()
    this.listShowTypes().then(() => {
      this.getList();
    })

  },
};
</script>
  
<style lang="scss" >
.homeGoodsSet {
  .tab-list{
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    flex-wrap: wrap;
    width: 100%;
    .tab{
      font-size: 14px;
      color: #222;
      cursor: pointer;
    }
    .tab+.tab{
      margin-left: 10px;
    }
    .tab.active{
      color: #2836fe;
      font-weight: bold;
    }
  }
  .info{
    display: flex;
    align-items: center;
    .small-img{
      width: 40px;
      height: 40px;
    }
  }
}
</style>