Explorar el Código

Merge branch 'master' of http://git.tjyourong.com.cn/ctop/adsp-vue

魏志佳 hace 4 años
padre
commit
45fbe9d60c

+ 3 - 3
src/views/modules/kuaishouapp/account/stepForm/Step2.vue

@@ -196,7 +196,6 @@
         <selectCheckAll style="width:100%" v-show="allForm.scheduleTime == '2'"
           :scheduleTime.sync="allForm.scheduleTimeData" ref="selectCheck" />
       </a-form-item>
-
       <a-form-item label="创意展现方式" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
         :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
         <!-- v-decorator="['speed', { initialValue: '1' }]" -->
@@ -369,7 +368,7 @@
   import targetedPopulation from './stepModule/targetedPopulation.vue'
 
   import selectCheckAll from './stepModule/test'
-
+  import toutiaoTime from './stepModule/toutiaoTime'
   let dateQuantumRangeConst = ''
   const columns = [{
       title: '人群',
@@ -476,7 +475,8 @@
     components: {
       creatApplication,
       targetedPopulation,
-      selectCheckAll
+      selectCheckAll,
+      toutiaoTime
     },
     props: {
       campaignId: {

+ 336 - 0
src/views/modules/kuaishouapp/account/stepForm/stepModule/toutiaoTime.vue

@@ -0,0 +1,336 @@
+<template>
+  <div class="calendar">
+    <table class="time_table table" v-on:mouseleave="mouseleave">
+      <thead>
+        <tr>
+          <th rowspan="2" style="width:120px">日期/时间(时)</th>
+        </tr>
+        <tr>
+          <th class="unselectable" colspan="2" v-for="(num, index) in numData" :key="index" style="width:50px">{{ num }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(options, index) in timeData" :key="index">
+          <th scope="row">{{ options.date }}</th>
+          <td v-for="(timeItem, key) in options.time" :key="key" style="width:15px"
+            :class="[{ active_select: timeItem.isSelected, active_select_move: timeItem.show }]"
+            v-on:mousedown="mousedown(index, key)" v-on:mouseover="mouseover(index, key)"
+            v-on:mouseup="mouseup(index, key)" @click="showOne(index, key)"></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script>
+  var arr = []
+  for (let i = 0; i < 48; i++) {
+    arr.push(i / 2)
+  }
+  export default {
+    name: 'calendar-table',
+    props: {
+      scheduleTime: {
+        type: String,
+        default () {
+          var str = ''
+          for (let i = 0; i < 7 * 48; i++) {
+            str += '0'
+          }
+          return str
+        }
+      }
+    },
+    data() {
+      return {
+        show: false,
+        numData: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, ],
+        // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, ],
+        dateTime: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        timeData: [{
+            date: '周一',
+            time: []
+          },
+          {
+            date: '周二',
+            time: []
+          },
+          {
+            date: '周三',
+            time: []
+          },
+          {
+            date: '周四',
+            time: []
+          },
+          {
+            date: '周五',
+            time: []
+          },
+          {
+            date: '周六',
+            time: []
+          },
+          {
+            date: '周日',
+            time: []
+          }
+        ],
+        selectFlag: false,
+        max: {
+          x: 0,
+          y: 0
+        },
+        dataString: ''
+      }
+    },
+    methods: {
+      // handleClose(item) {
+      //   var index = Math.floor(item / 24)
+      //   var key = item % 7
+      //   if (this.timeData[index].time[key].value == false) {
+      //     if (this.timeData[index].time[key].isSelected) {
+      //       this.timeData[index].time[key].isSelected = false
+      //     } else {
+      //       this.$set(this.timeData[index].time[key], 'isSelected', true)
+      //     }
+      //   }
+      // },
+      showOne(index, key) {
+        //   this.timeData[index].time[key].isSelected = !this.timeData[index].time[key].isSelected
+      },
+      mousedown: function (index, key) {
+        this.selectStart = []
+        this.selectFlag = true
+        if (this.timeData[index].time[key].value == false) {
+          if (this.timeData[index].time[key].isSelected) {
+            this.timeData[index].time[key].isSelected = false
+          } else {
+            this.$set(this.timeData[index].time[key], 'isSelected', true)
+          }
+        }
+        this.selectStart.push({
+          index: index,
+          key: key
+        })
+      },
+      mouseover: function (index, key) {
+        // x 垂直方向  y 水平方向
+        if (this.selectFlag) {
+          if (index >= this.max.x) {
+            this.max.x = index
+          }
+          if (key >= this.max.y) {
+            this.max.y = key
+          }
+          var start = {
+            x: this.selectStart[0].index,
+            y: this.selectStart[0].key
+          }
+          var end = {
+            x: index,
+            y: key
+          }
+          for (var i = end.x; i <= this.max.x; i++) {
+            for (var j = end.y; j <= this.max.y; j++) {
+              this.$set(this.timeData[i].time[j], 'isSelected', false)
+            }
+          }
+          /* 渲染选中的区域 */
+          // for (var i = start.x; i <= end.x; i++) {
+          //   for (var j = start.y; j <= end.y; j++) {
+          //     // this.$set(this.timeData[i].time[j], 'isSelected', true)
+          //     this.$set(this.timeData[i].time[j], 'show', true)
+          //   }
+          // }
+          for (var i = start.x; i <= end.x; i++) {
+            for (var j = start.y; j <= end.y; j++) {
+              this.$set(this.timeData[i].time[j], 'isSelected', true)
+            }
+          }
+        }
+      },
+      mouseup: function (index, key) {
+        var start = {
+          x: this.selectStart[0].index,
+          y: this.selectStart[0].key
+        }
+        var end = {
+          x: index,
+          y: key
+        }
+        /* 渲染选中的区域 */
+        var data = []
+        var arr = []
+        //   for (let i = 0; i < this.timeData.length; i++) {
+        //     for (let j = 0; j < this.timeData[i].time.length; j++) {
+        //       this.timeData[i].time[j].show = false
+        //     }
+        //   }
+        arr = data.concat(
+          this.timeData[0].time,
+          this.timeData[1].time,
+          this.timeData[2].time,
+          this.timeData[3].time,
+          this.timeData[4].time,
+          this.timeData[5].time,
+          this.timeData[6].time
+        )
+        this.dataString = arr.map(item => {
+          if (item.isSelected) {
+            return 1
+          } else {
+            return 0
+          }
+        })
+        console.log(this.dataString.join(''))
+        this.$emit('update:scheduleTime', this.dataString.join(''))
+        this.selectFlag = false
+        this.max = {
+          x: 0,
+          y: 0
+        }
+      },
+      mouseleave: function () {
+        this.selectFlag = false
+      },
+      setItemDate(sum) {
+        let i = sum
+        if (i < 24) {
+          return '周一' + i + ':00~' + (i + 1) + ':00'
+        } else if (i < 48 && i >= 24) {
+          return '周二' + (i - 24) + ':00~' + (i - 23) + ':00'
+        } else if (i < 72 && i >= 48) {
+          return '周三' + (i - 48) + ':00~' + (i - 47) + ':00'
+        } else if (i < 96 && i >= 72) {
+          return '周四' + (i - 72) + ':00~' + (i - 71) + ':00'
+        } else if (i < 120 && i >= 96) {
+          return '周五' + (i - 96) + ':00~' + (i - 95) + ':00'
+        } else if (i < 144 && i >= 120) {
+          return '周六' + (i - 120) + ':00~' + (i - 119) + ':00'
+        } else {
+          return '周日' + (i - 144) + ':00~' + (i - 143) + ':00'
+        }
+      },
+      init() {
+        var str = this.scheduleTime
+        var arr = str.split('')
+        this.timeData = [{
+            date: '周一',
+            time: []
+          },
+          {
+            date: '周二',
+            time: []
+          },
+          {
+            date: '周三',
+            time: []
+          },
+          {
+            date: '周四',
+            time: []
+          },
+          {
+            date: '周五',
+            time: []
+          },
+          {
+            date: '周六',
+            time: []
+          },
+          {
+            date: '周日',
+            time: []
+          }
+        ]
+        for (let i = 0; i < arr.length; i++) {
+          if (i < 48) {
+            this.timeData[0].time.push({
+              isSelected: arr[i] == 1 ? true : false,
+              move: false,
+              value: false
+            })
+          } else if (i < 96 && i >= 48) {
+            this.timeData[1].time.push({
+              isSelected: arr[i] == 1 ? true : false,
+              move: false,
+              value: false
+            })
+          } else if (i < 144 && i >= 96) {
+            this.timeData[2].time.push({
+              isSelected: arr[i] == 1 ? true : false,
+              move: false,
+              value: false
+            })
+          } else if (i < 192 && i >= 144) {
+            this.timeData[3].time.push({
+              isSelected: arr[i] == 1 ? true : false,
+              move: false,
+              value: false
+            })
+          } else if (i < 240 && i >= 192) {
+            this.timeData[4].time.push({
+              isSelected: arr[i] == 1 ? true : false,
+              move: false,
+              value: false
+            })
+          } else if (i < 288 && i >= 240) {
+            this.timeData[5].time.push({
+              isSelected: arr[i] == 1 ? true : false,
+              move: false,
+              value: false
+            })
+          } else {
+            this.timeData[6].time.push({
+              isSelected: arr[i] == 1 ? true : false,
+              move: false,
+              value: false
+            })
+          }
+        }
+      }
+    },
+    watch: {
+      scheduleTime: {
+        immediate: true, // immediate选项可以开启首次赋值监听
+        handler(newVal, oldVal) {
+          this.init()
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .time_table {
+    border: 1px solid #ccc;
+    border-collapse: collapse;
+  }
+
+  .time_table th,
+  .time_table td {
+    border: 1px solid #ccc;
+    text-align: center;
+  }
+
+  .time_table .unselectable {
+    width: 5px !important;
+    height: 30px;
+  }
+
+  .active_select {
+    background: cornflowerblue;
+  }
+
+  .active_select_move {
+    background: aqua;
+  }
+
+  * {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+</style>

+ 2 - 2
vue.config.js

@@ -56,13 +56,13 @@ module.exports = {
     port: 3000,
     proxy: {
       '/jeecg-boot': {
-        target: 'http://192.168.1.90:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
+        // target: 'http://192.168.1.90:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
         // target: 'http://192.168.1.72:8088', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云
         // target: 'http://192.168.1.94:8804', //请求本地 需要jeecg-boot后台项目  孙震
         // target: 'http://192.168.1.51:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.1.165:8848', //请求本地 需要jeecg-boot后台项目  毕洁泉
-        // target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目 
+        target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目 
         // target: 'https://trac.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目 
         // target: 'http://192.168.1.251:8088', //请求本地 需要jeecg-boot后台项目 
         // target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目