预约查询和放号管理页面搭建

src/views/booklist/index.vue

@@ -207,6 +207,8 @@ export default {
   },
   computed: {
    
+  },
+  created() {
   },
   methods: {
     handleRegister(){

src/views/booknumber/index.vue

@@ -26,31 +26,55 @@
     <el-drawer
       :visible.sync="isNumber"
       :append-to-body="true"
-      :direction="direction"
       :with-header="false"
       custom-class="number_box">
       <div class="title_box">
         <div class="title_txt">
-          <div class="txt">新增号源</div>
+          <div class="txt">{{title}}</div>
           <div class="img_box" @click="closeDraw">
             <img src="~@/assets/image/close.png" alt="">
           </div>
         </div>
-        <div class="sub_txt">请先设置时段以及对应号源数量后选择该号源投放日期。</div>
+        <div class="sub_txt">{{subtitle}}</div>
       </div>
-      <div>
+      <div class="tab_box" v-show="isShow">
         <el-tabs v-model="activeName" @tab-click="handleClick">
           <el-tab-pane label="单眼视力" name="first">
-            <avue-form :option="addOption" v-model="addForm">
+            <div class="form_box">
-              <template slot-scope="{row}" slot="input">
+              <div class="monment_txt">上午</div>
-                  <el-tag>{{row.input}}</el-tag>
+              <avue-form :option="addOption" v-model="addForm">
-              </template>
+                <!-- <template slot-scope="{row}" slot="input">
-            </avue-form>
+                    <el-tag>{{row.input}}</el-tag>
+                </template> -->
+              </avue-form>
+              <div class="monment_txt">下午</div>
+              <avue-form :option="addOption1" v-model="addForm1">
+                <!-- <template slot-scope="{row}" slot="input">
+                    <el-tag>{{row.input}}</el-tag>
+                </template> -->
+              </avue-form>
+            </div>
+            
           </el-tab-pane>
           <el-tab-pane label="听力" name="second">听力</el-tab-pane>
           <el-tab-pane label="四肢" name="third">四肢</el-tab-pane>
         </el-tabs>
       </div>
+      <div v-show="!isShow">
+        <el-calendar v-model="calValue">
+          <template
+          slot="dateCell"
+          slot-scope="{date, data}">
+          <p :class="[Date.parse(new Date(data.day)) < new Date().getTime() + 3600 * 1000 * 24 * 7 ? 'selected' : 'select',dayArr.find(item => item == data.day) ? 'isSelected' : '']" @click="clickCalc(data.day)">
+             {{ data.day.slice(-2) }}
+          </p>
+        </template>
+        </el-calendar>
+      </div>
+      <div class="button_box">
+        <el-button>取消</el-button>
+        <el-button type="primary" @click="submitForm">提交</el-button>
+      </div>
     </el-drawer>
   </basic-container>
 </template>
@@ -73,6 +97,9 @@ export default {
       form: {},
       selectionList: [],
       query: {},
+      calValue:new Date(),
+      title:'投放号源',
+      subtitle:'请先设置时段以及对应号源数量后选择该号源投放日期。',
       loading: true,
       parentId: 0,
       page: {
@@ -80,59 +107,96 @@ export default {
         currentPage: 1,
         total: 0,
       },
+      isShow:false,
       addForm: {
-          dynamic: [{
+        addData: [
+          {
+            timeFrame: 1,
+            timeFrame: 1
+          },
+          {
+            timeFrame: 2,
+            timeFrame: 2
+          }
+        ]
+      },
+      addForm1: {
+        addData: [
+          {
             input: 1,
             select: 1
-          }, {
+          },
+          {
             input: 2,
             select: 2
-          }]
+          }
-        },
+        ]
-      addOption: {
+      },
-          column: [
+      addOption:{
-            {
+        emptyBtn:false,
-              label: '子表单',
+        submitBtn:false,
-              prop: 'dynamic',
+        column: [
-              type: 'dynamic',
+          {
-              span:24,
+            prop: 'addData',
-              children: {
+            type: 'dynamic',
-                align: 'center',
+            span:24,
-                headerAlign: 'center',
+            children: {
-                rowAdd:(done)=>{
+              align: 'center',
-                  this.$message.success('新增回调');
+              headerAlign: 'center',
-                    done({
+              column: [
-                      input:'默认值'
+                {
-                    });
+                  label: "时段设置",
+                  prop:'timerange',
+                  type: 'timerange',
+                  format:'hh:mm a',
+                  valueFormat:'HH:mm',
+                  popperClass:'time',
                 },
-                rowDel:(row,done)=>{
+                {
-                  this.$message.success('删除回调'+JSON.stringify(row));
+                  label:'放号数量',
-                  done();
+                  prop:'num',
+                  controlsPosition:'',
+                  type:'number',
+                  min:1,
+                  span:10,
+                }
+              ]
+            }
+          },
+        ]
+      },
+      addOption1:{
+        emptyBtn:false,
+        submitBtn:false,
+        column: [
+          {
+            prop: 'addData',
+            type: 'dynamic',
+            span:24,
+            children: {
+              align: 'center',
+              headerAlign: 'center',
+              column: [
+                {
+                  label: "时段设置",
+                  prop:'timerange',
+                  type: 'timerange',
+                  format:'hh:mm a',
+                  valueFormat:'HH:mm',
+                  popperClass:'time',
                 },
-                column: [
+                {
-                  {
+                  label:'放号数量',
-                    width: 200,
+                  prop:'num',
-                    label: '输入框',
+                  controlsPosition:'',
-                    prop: "input"
+                  type:'number',
-                  }, 
+                  min:1,
-                  {
+                }
-                    label: '选择框',
+              ]
-                    prop: "select",
-                    type: 'select',
-                    dicData: [{
-                      label: '测试1',
-                      value: 1
-                    }, {
-                      label: '测试2',
-                      value: 2
-                    }
-                    ]
-                  }
-                ]
-              }
             }
-          ]
+          },
-        },
+        ]
+      },
       activeName: 'first',
       isNumber:false,
       option: {
@@ -213,13 +277,25 @@ export default {
           },
         ]
       },
-      data: []
+      data: [],
+      count:0,
+      dayArr:[]
     };
   },
   computed: {
    
   },
   methods: {
+    clickCalc(day){
+      let tmp = this.dayArr.find(item => item == day)
+      console.log(tmp)
+      if(!tmp){
+        this.dayArr.push(day)
+      }else{
+        this.dayArr = this.dayArr.filter(item => item != tmp)
+      }
+      console.log(this.dayArr)
+    },
     spanMethod({ row, column, rowIndex, columnIndex }) {
       // console.log(row)
       // console.log(column)
@@ -235,8 +311,46 @@ export default {
     //   }
       done();
     },
+    // handleClick(){},
+    submitForm(){
+      this.count = 0
+      this.addForm.addData.map(item =>{
+        console.log(item)
+        this.count += item.num
+      })
+       this.addForm1.addData.map(item =>{
+        this.count += item.num
+      })
+      let tmp = this.addForm.addData.find(item =>{item.timerange !== ''})
+      let tmp1 = this.addForm1.addData.find(item =>{item.timerange !== ''})
+      console.log(tmp)
+      console.log(tmp1)
+      if(!tmp && !tmp1){
+        this.$message.error('请设置时段')
+      }else{
+        console.log(tmp)
+      }
+     
+    },
+    closeDraw(){
+      this.isNumber = false
+    },
     addNumber(){
-      this.isNumber = true
+      this.isNumber = true;
+      this.dayArr = []
+      console.log(this.calValue)
+      this.addForm = {
+        addData:[
+           {
+            timerange: "08:00am,08:30am",
+            num: 1
+          },
+          {
+            timerange: "09:00am,09:30am",
+            num: 2
+          }
+        ]
+      }
     },
     beforeClose(done) {
     //   this.parentId = "";
@@ -287,14 +401,45 @@ export default {
 ::v-deep .cla{
   color: #F93A4A;
 }
+::v-deep .avue-input-number{
+        width: 40% !important;
+      }
+::v-deep .el-calendar-day{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+ ::v-deep .selected{
+    background: rgba(22, 119, 255,.3);
+    cursor: not-allowed;
+    pointer-events:none;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+ ::v-deep .select{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  ::v-deep .isSelected{
+    background: #1677FF;
+  }
 </style>
 <style lang="scss">
 .el-drawer__wrapper{
   .number_box{
     width: 45% !important;
-    padding: 0 40px;
+    overflow: hidden !important;
+    .el-drawer__body{
+      overflow: hidden;
+    }
     .title_box{
-      // padding: 0 40px;
+      padding: 0 40px;
       margin-top: 40px;
       .title_txt{
         display: flex;
@@ -324,6 +469,37 @@ export default {
         line-height: 16px;
       }
     }
+    .tab_box{
+      margin-top: 40px;
+      padding: 0 40px;
+
+      .monment_txt{
+        margin: 15px 0 20px 0;
+        font-size: 16px;
+        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+        font-weight: bold;
+        color: #333333;
+      }
+      .form_box{
+        height: 650px;
+        overflow: scroll;
+      }
+      
+    }
+
+    .button_box{
+      width: 100%;
+      height: 90px;
+      background: #FFFFFF;
+      box-shadow: 0px -8px 16px 1px rgba(32,50,101,0.15);
+      position: absolute;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
+ 
 }
+ 
 </style>