great_service/src/views/otaMr/tiktok/dialog/dataEdit.vue

<!--
 * @Description: 新增/编辑弹框
 * @Author: Sugar.
 * @Date: 2023-11-24 13:55:00
 * @LastEditors: Sugar.
 * @LastEditTime: 2023-11-24 13:55:00
 * @FilePath: \cattle_webui\src\views\otaMr\dialog\dataEdit.vue
 * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="70vw"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel"
  >
    <div class="dialog">
      <div>
        <el-form :model="form" ref="form" size="small" :rules="rules" :inline="true" label-width="100px">
          <el-form-item label="门店POIID" prop="poiId">
            <el-input
              v-model="form.poiId"
              placeholder="请输入门店POIID"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="商品类目ID" prop="categoryId">
            <el-select
              v-model="form.categoryId"
              placeholder="商品类目ID"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in dict.type.tiktok_category"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="投放渠道" prop="showChannel">
            <el-select
              v-model="form.showChannel"
              placeholder="投放渠道"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in dict.type.tiktok_showChannel"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-table 
      row-key="tableId"
      ref="tables" 
      v-loading="loading" 
      :data="goodsList" 
      border 
      @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
        <el-table-column label="座位类型" align="center" prop="priceName" />
        <el-table-column label="开始时间" align="center" prop="timeStart" />
        <el-table-column label="结束时间" align="center" prop="timeEnd" />
        <el-table-column label="抖音排期状态" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.tiktok_scheduling_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              v-if="scope.row.status"
              @click="openCalendarFun(scope.row)"
            >日历价格配置</el-button>
            <!-- <el-button
              size="mini"
              type="text"
              @click="submitForm1(scope.row)"
            >{{ scope.row.status == 1  ? '下架':'上架' }}</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button  @click="cancel">取消</el-button>
      <el-button
        type="primary"
        @click="submitForm"
        :disabled="!multipleSelection || multipleSelection.length == 0"
        :loading="loading"
      >
        <span v-if="loading">提交中...</span>
        <span v-else>推送已选</span>
      </el-button>
    </span>

    <!--  选择日期 价格  -->
    <el-dialog
      :visible.sync="openCalendar"
      width="70%"
      class="text-dia-log-class"
      append-to-body
      :close-on-click-modal="false"
      @close="openPrice = false"
    >
      <div class="dialog calendar-dialog" v-loading="calendarLoading">
        <div>
          <el-button type="primary" @click="openCalendarPrice()">价格设置</el-button>
          <el-button type="primary" @click="clearCalendarPrice()">一键清空</el-button>
        </div>
        <el-calendar v-model="timeValue">
          <template
            slot="dateCell"
            slot-scope="{date, data}">
            <div :class="['calendar_box', selectTime(data)]" @mouseover="mouseoverFun(data)" @click.stop="clickTimeFun(data)">
              <span>{{ data.day.split('-').slice(1).join('-') }}</span>
              <div style="width: 100%; display: flex;flex-wrap: wrap;" >
                <div 
                :key="index"
                v-for="(item,index) in getPerFormList(data)"
                >
                {{ item.title }}：{{ item.money }}
                </div>
              </div>
              
            </div>
            
          </template>
        </el-calendar>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openCalendar = false">返回</el-button>
      </span>
    </el-dialog>

    <!-- 设置价格  -->
    <el-dialog
      title="价格设置"
      :visible.sync="openPrice"
      width="400px"
      class="text-dia-log-class"
      append-to-body
      :close-on-click-modal="false"
      @close="openPrice = false"
    >
      <div v-loading="priceLoading">
        <el-form :model="formPrice" ref="formPrice" size="small" :rules="rulesPrice" label-width="100px">
          <el-form-item label="日期区间">
            {{ this.timeValueObj.prev +" - "+ this.timeValueObj.next }}
          </el-form-item>
          <el-form-item label="市场价" prop="originalAmount">
            <el-input-number v-model="formPrice.originalAmount" controls-position="right" :min="0"></el-input-number>
            元
          </el-form-item>
          <el-form-item label="销售价" prop="saleAmount">
            <el-input-number v-model="formPrice.saleAmount" controls-position="right" :min="0"></el-input-number>
            元
          </el-form-item>
          <el-form-item label="结算价" prop="costAmount">
            <el-input-number v-model="formPrice.costAmount" controls-position="right" :min="0"></el-input-number>
            元
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openPrice = false">返回</el-button>
        <el-button @click="submitFormPrice('formPrice','calendarPrice')">提交</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { 
  pushById,
  getCalendarPriceApi,
  setCalendarPriceApi,
  getPushListApi,
  deleteCalendarPriceApi
 } from "@/api/otaMr/tiktok";
 import moment from "moment"
export default {
  name: "dataEdit",
  dicts: ['tiktok_category','tiktok_scheduling_status','tiktok_showChannel'],
  data() {
    return {
      title: "排期推送设置",
      model: "EDIT",
      open: false,
      loading: false,
      goodsList: [],
      form: {},
      rules: {
        poiId: [{ required: true, message: "请输入门店POIID", trigger: ["change","blur"] }],
        categoryId: [{ required: true, message: "请选择商品类目ID", trigger: ["change","blur"] }],
        showChannel: [{ required: true, message: "请选择投放渠道", trigger: ["change","blur"] }]
      },
      multipleSelection: [],

      openCalendar: false,
      timeValue: new Date(),
      timeValueObj: {
        prev: null,
        next: null,
        hover: null
      },
      calendarLoading: false,
      perFormList: [],

      openPrice: false,
      priceLoading: false,
      formPrice: {},
      rulesPrice: {
        originalAmount: [{ required: true, message: "请输入市场价", trigger: ["change","blur"] }],
        saleAmount: [{ required: true, message: "请输入销售价", trigger: ["change","blur"] }],
        costAmount: [{ required: true, message: "请输入结算价", trigger: ["change","blur"] }],
      },
      seatTypeId: null,
      calendarId: null,
    };
  },
  methods: {
    /**
     * 打开弹框
     * @date 2023-11-22
     * @param {any} obj
     * @returns {any}
     */
     async openDialog(title, obj, type) {
      this.open = true;
      this.goodsList = []
      this.multipleSelection = []
      this.timeValueObj = {}
      if(obj.showChannel || obj.showChannel === 0) {
        obj.showChannel = obj.showChannel.toString()
      }
      this.form = JSON.parse(JSON.stringify(obj))
      
      await this.getPushListFun(obj,type)

      this.$nextTick(()=>{
        this.goodsList.forEach((item)=>{
          if(item.checkFlag == 1) {
            this.$refs.tables.toggleRowSelection(item,true)
          }
        })
        this.$refs["form"].clearValidate()
      })
    },
    /**  获取设置的日历价格  */
    async getPushListFun(obj,type) {
      try {
        let res = await getPushListApi({
          id: obj.id
        })
        if(res.code == 200) {
          let list = []
          if(type == 'yesPush') {
            list = res.data
          }else {
            if( res.data && res.data.length > 0){
              obj.sku.forEach((item,index)=>{
                let obj1 = JSON.parse(JSON.stringify(item))
                res.data.forEach((item1,index1)=>{
                  if(item1.id == obj1.id){
                    obj1 =  JSON.parse(JSON.stringify(item1))
                  }
                  
                })
                list.push({
                  ...obj1,
                  tableId: "id_" + index
                })
              })
              
              this.goodsList = res.data
            }else {
              obj.sku.forEach((item,index)=>{
                list.push({
                  ...item,
                  tableId: "id_" + index
                })
              })
            }
          }
          
          this.goodsList = JSON.parse(JSON.stringify(list))
        }
      } catch (error) {
        this.loading = false
      }
    },
    /**
     * 保存
     * @date 2023-11-22
     * @returns {any}
     */
    submitForm() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          try {
            if(!this.multipleSelection && this.multipleSelection.length <= 0) {
              this.$message.error("请选择上推送的数据!!!");
              return
            } 
            let flog = false
            let list = []
            this.multipleSelection.forEach((item)=>{
              list.push({
                ...item,
                checkFlag: 1
              })
              // if((!item.actualAmount && item.actualAmount !=0) || (!item.originAmount && item.originAmount !=0)) {
              //   flog = true
              // } 
            })
            // if(flog) {
            //   this.$message.error("请输入销售价和结算价!!!");
            //   return
            // }
            this.loading = true;
            const { code } = await pushById({ 
              ...this.form,
              sku: list
            });
            if (code === 200) {
              this.$message.success("操作成功!");
              this.$emit("getList");
              this.cancel();
            }
          } catch (error) {
            console.error("error====",error)
          } finally {
            this.loading = false;
          }
        }else {

        }
      })
    },
    /**
     * 重置
     * @date 2023-11-22
     * @returns {any}
     */
    reset() {
      this.$refs["form"].clearValidate()
    },
    /**
     * 关闭弹框
     * @date 2023-11-22
     * @returns {any}
     */
    cancel() {
      this.reset();
      this.open = false;
    },
    isCheck(row){
      let flog = false
      this.multipleSelection.forEach((item,index)=>{
        if(item.tableId == row.tableId) {
          flog = true
        }
      })
      return flog
    },
    handleSelectionChange(val) {
      console.log("选中了====", val)
      this.multipleSelection = val;
    },

    getPerFormList(data) {
      let list = []
      this.perFormList.forEach((item,index)=>{
        if(item.priceDate && item.priceDate.indexOf(data.day) != -1) {
          list = [
            { title: '市场价', money: item.originalAmount + '元'  },
            { title: '销售价', money: item.saleAmount + '元' },
            { title: '结算价', money: item.costAmount + '元' },
          ]
        }
      })
      return list
    },
    /**  打开价格设置   */
    openCalendarPrice(){
      if( this.timeValueObj.prev && this.timeValueObj.next ) {
        this.openPrice = true
        this.formPrice = {}
        this.$nextTick(()=>{
          this.$refs.formPrice.clearValidate()
        })
      }else {
        this.$message.error("请选择时间区间!!!");
      }
      
    },  
    /** 一键清除  */
    async clearCalendarPrice() {
      try {
        if( this.timeValueObj.prev && this.timeValueObj.next ) {
          let minTime = moment(this.timeValueObj.prev).valueOf()
          let maxTime = moment(this.timeValueObj.next).valueOf()
          let startDate = null
          let endDate = null
          if(minTime > maxTime){
            startDate = this.timeValueObj.next
            endDate = this.timeValueObj.prev
          }else {
            startDate = this.timeValueObj.prev
            endDate = this.timeValueObj.next
          }
          let daysList = [];
          let SDate = moment(startDate);
          let EDate = moment(endDate);
          daysList.push({
            "priceDate":  SDate.startOf('day').format("YYYY-MM-DD HH:mm:ss"),
          });
          while (SDate.add(1, "days").isBefore(EDate)) { // 注意这里add方法处理后SDate对象已经改变。      
            daysList.push({
              "priceDate":  SDate.startOf('day').format("YYYY-MM-DD HH:mm:ss"),
            });
          }
          if(this.timeValueObj.next != this.timeValueObj.prev){
            daysList.push({
              "priceDate": EDate.startOf('day').format("YYYY-MM-DD HH:mm:ss"),
            });
          }
          let res = await deleteCalendarPriceApi({
            "id": this.form.id,
            "goodsId": this.form.goodsId,
            "seatTypeId": this.seatTypeId,
            "data": daysList
          })
          if(res.code == 200) {
            this.openPrice = false
            this.getCalendarPrice()
          }
        }else {
          this.$message.error("请选择时间区间!!!");
        }
      } catch (error) {
        
      }
    },
    submitFormPrice(formName,funName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this[funName]()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    openCalendarFun(row){
      this.seatTypeId = row.seatTypeId
      this.calendarId = row.id
      this.getCalendarPrice()
      
    },
    /**  获取设置的日历价格  */
    async getCalendarPrice() {
      try {
        this.timeValueObj = {}
        let res = await getCalendarPriceApi({
          "goodsId": this.form.goodsId,
          "seatTypeId": this.seatTypeId
        })
        if(res.code == 200) {
          this.openCalendar = true
          this.perFormList = res.data
        }
      } catch (error) {
        
      }
    },
    /**  设置价格  */
    async calendarPrice(type){
      try {
        if( this.timeValueObj.prev && this.timeValueObj.next ) {
          let minTime = moment(this.timeValueObj.prev).valueOf()
          let maxTime = moment(this.timeValueObj.next).valueOf()
          let startDate = null
          let endDate = null
          if(minTime > maxTime){
            startDate = this.timeValueObj.next
            endDate = this.timeValueObj.prev
          }else {
            startDate = this.timeValueObj.prev
            endDate = this.timeValueObj.next
          }
          let daysList = [];
          let SDate = moment(startDate);
          let EDate = moment(endDate);
          daysList.push({
              "id": null,
              "priceDate":  SDate.startOf('day').format("YYYY-MM-DD HH:mm:ss"),
              "originalAmount": this.formPrice.originalAmount,
              "saleAmount": this.formPrice.saleAmount,
              "costAmount": this.formPrice.costAmount
            });
          while (SDate.add(1, "days").isBefore(EDate)) { // 注意这里add方法处理后SDate对象已经改变。      
            daysList.push({
              "id": null,
              "priceDate":  SDate.startOf('day').format("YYYY-MM-DD HH:mm:ss"),
              "originalAmount": this.formPrice.originalAmount,
              "saleAmount": this.formPrice.saleAmount,
              "costAmount": this.formPrice.costAmount
            });
          }
          if(this.timeValueObj.next != this.timeValueObj.prev){
            daysList.push({
             "id": null,
              "priceDate": EDate.startOf('day').format("YYYY-MM-DD HH:mm:ss"),
              "originalAmount": this.formPrice.originalAmount,
              "saleAmount": this.formPrice.saleAmount,
              "costAmount": this.formPrice.costAmount
            });
          }
          console.log("daysList===",daysList)
          daysList.forEach((item,index)=>{
            this.perFormList.forEach((item1,index1)=>{
              if(moment(item.priceDate).format("YYYY-MM-DD") == moment(item1.priceDate).format("YYYY-MM-DD") ) {
                daysList[index].id = item1.id
              }
            })
          })
          let res = await setCalendarPriceApi({
            "id": this.calendarId,
            "goodsId": this.form.goodsId,
            "seatTypeId": this.seatTypeId,
            "data": daysList
          })
          if(res.code == 200) {
            this.openPrice = false
            this.getCalendarPrice()
          }
        }else {
          this.$message.error("请选择时间区间!!!");
        }
      } catch (error) {
        
      }
      
    },

    /** 选中得时间  */
    selectTime(data) {
      let srt = ''
      let newTime = moment(data.day).startOf('day').valueOf()
      let newTime1 = moment().startOf('day').valueOf()
      if(newTime < newTime1 ) {
        return "disable_time"
      }
      if( this.timeValueObj ) {
        if( this.timeValueObj.prev && this.timeValueObj.next ) {
          let minTime = moment(this.timeValueObj.prev).valueOf()
          let maxTime = moment(this.timeValueObj.next).valueOf()
          if(minTime > maxTime){
            if(minTime >= newTime && maxTime <= newTime){
              srt = 'is-select_time'
            }
          }else {
            if(minTime <= newTime && maxTime >= newTime){
              srt = 'is-select_time'
            }
          }
        }else if( this.timeValueObj.prev && !this.timeValueObj.next && this.timeValueObj.hover ){
          let minTime = moment(this.timeValueObj.prev).valueOf()
          let maxTime = moment(this.timeValueObj.hover).valueOf()
          if(minTime > maxTime){
            if(minTime >= newTime && maxTime <= newTime){
              srt = 'is-select_time_hover'
            }
          }else {
            if(minTime <= newTime && maxTime >= newTime){
              srt = 'is-select_time_hover'
            }
          }
        }
      }
      return srt
    },
    clickTimeFun(data) {
      let newTime1 = moment(data.day).startOf('day').valueOf()
      let newTime = moment().startOf('day').valueOf()
      if(newTime1 < newTime ) {
        return 
      }
      if(moment(data.day).format("YYYY-MM") != moment(this.timeValue).format("YYYY-MM") ) {
        return
      }
      if( !this.timeValueObj || !this.timeValueObj.prev ) {
        this.timeValueObj.prev = moment(data.day).format("YYYY-MM-DD")
      }else if( this.timeValueObj.prev && !this.timeValueObj.next ){
        this.timeValueObj.next = moment(data.day).format("YYYY-MM-DD")
      }else if( this.timeValueObj.prev && this.timeValueObj.next ) {
        this.timeValueObj.prev = moment(data.day).format("YYYY-MM-DD")
        this.timeValueObj.next = null
      }
    },
    mouseoverFun(data) {
      if(moment(data.day).format("YYYY-MM") != moment(this.timeValue).format("YYYY-MM") ) {
        return
      }
      if( this.timeValueObj.prev && !this.timeValueObj.next ){
        this.timeValueObj.hover = moment(data.day).format("YYYY-MM-DD")
        this.timeValue = new Date(this.timeValueObj.hover)
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  padding: 0 30px;
  max-height: 65vh;
  overflow-y: auto;
}
.dialog {
  padding: 0 30px;
  .upload-btn {
    width: 100px;
    height: 100px;
    background-color: #fbfdff;
    border: dashed 1px #c0ccda;
    border-radius: 5px;
    i {
      font-size: 30px;
      margin-top: 20px;
    }
    &-text {
      margin-top: -10px;
    }
  }
  .avatar {
    cursor: pointer;
  }
}

.calendar-dialog ::v-deep .el-calendar-table .el-calendar-day {
  padding: none !important;
  height: auto;
}

.calendar_box {
  width: 100%;
  min-height: 86px;
}

.disable_time {
  user-select: none;
  cursor: not-allowed;
}

.is-select_time {
  background-color: rgba(30,144,255,0.8);
}

.is-select_time_hover {
  background-color: rgba(30,144,255,0.4);
}
</style>