添加组织的工作时间

Posted 2023-02-23

【中文标题】添加组织的工作时间

【英文标题】：Add working hours of a Organization

【发布时间】：2018-06-02 15:54:57

【问题描述】：

如果我选择周日、周一和从08.00 到20.00 的工作时间，我需要发送1&08:00&20:00,2&08:00&20:00。我怎样才能在 vue javascript 中实现相同的功能？

我当前的代码是

<script>
submitBox = new Vue(
  el: "#submitBox",
  data: 
    articles: [],
    services: [],
    username: '',
    category: '',
    subcategory: [],
    image: '',
    hours: '',

  ,
  methods: 
    onFileChange(e) 
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;
      this.createImage(files[0]);
    ,
    createImage(file) 
      var image = new Image();
      var reader = new FileReader();
      var vm = this;

      reader.onload = (e) => 
        vm.image = e.target.result;
      ;
      reader.readAsDataURL(file);
    ,

    handelSubmit: function(e) 
      var vm = this;
      data = ;
      data['lat'] = this.$refs.myLatField.value;
      data['lng'] = this.$refs.myLngField.value;
      data['username'] = this.username;
      data['category'] = this.category;
      data['subcategory'] = this.subcategory;
      data['image'] = this.image;
      data['hours'] = this.hours;
      $.ajax(
        url: 'http://127.0.0.1:8000/api/add/post/',
        data: data,
        type: "POST",
        dataType: 'json',
        success: function(e) 
          if (e.status) 
            alert("Registration Success")

            window.location.href = "https://localhost/n2s/registersuccess.html";
           else 
            vm.response = e;

            alert("Registration Failed")
          
        
      );
      return false;
    
  ,
);
</script>

我的html表单是

<div id="submitBox">
  <form method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
    <input type="checkbox" value="1" v-model="hours">Sunday
    <select>From
    <option value="">08.00</option>
    <option value="">12.00</option>
    <option value="">20.00</option>
    <option value="">24.00</option>
    </select>
    <select>To
    <option value="">08.00</option>
    <option value="">12.00</option>
    <option value="">20.00</option>
    <option value="">24.00</option>
    </select><br>
    <input type="checkbox" value="2" v-model="hours">Monday
    <select>
    <option value="">08.00</option>
    <option value="">12.00</option>
    <option value="">20.00</option>
    <option value="">24.00</option>
    </select>
    <select>
    <option value="">08.00</option>
    <option value="">12.00</option>
    <option value="">20.00</option>
    <option value="">24.00</option>
    </select><br>
  </form>
</div>

我能够传递所有其他值。所以，我没有把它包含在表格中。

我怎样才能选择日期和工作时间并相应地通过它。请帮我解决同样的问题

【问题讨论】：

你不知道怎么做？

先生，我被困在了这个.. 没有得到格式 1&08:00&20:00

你能解释一下这种格式的逻辑吗？&代表什么，1代表什么？08:00和20:00分别是几点？

1 代表星期日，2 代表星期一。 08:00开始时间和20:00结束时间

如果你提供一个工作的 jsfiddle 我可能会

【参考方案1】：

我对 vue.js 不熟悉，但您可以尝试以下方法：

   new Vue(
  el: '#example-3',
  data: 
    day:[
    name:"Sunday",val:1,
    name:"Monday",val:2
    ],
    string:''
  ,
   methods: 
    generate: function (event) 
    var arr = [];
    this.day.map(function(v,i) 
     console.log(v.selected == true,);
     if(v.selected == true) 
      
      arr.push(v.val+'&'+v.from+'&'+v.to);
      
    );
    this.string = arr.join(',');
    
    
)

html:

<div id='example-3'>
  <div v-for="value in day">
    <input type="checkbox" id="sun" value="value.val" v-model="value.selected">
    <label for="sun">value.name</label>
    <select v-model="value.from">From
      <option value="08.00">08.00</option>
      <option value="12.00">12.00</option>
      <option value="20.00">20.00</option>
      <option value="24.00">24.00</option>
    </select>
    <select v-model="value.to">To
      <option value="08.00">08.00</option>
      <option value="12.00">12.00</option>
      <option value="20.00">20.00</option>
      <option value="24.00">24.00</option>
    </select>
    <br>

  </div>
  <button v-on:click="generate">generate</button>
  <span>string:  string </span>

演示：https://jsfiddle.net/d8ak8ob6/1/