index.vue

<template>
  <div class="template-box content_div_main">
    <div class="setting-box">
      <el-row class="mb10">
        <el-col :span="2">
          <el-checkbox v-model="daychecked">天计划</el-checkbox>
        </el-col>
        <el-col :span="10">
          <el-time-select
            v-model="timer"
            :picker-options="{
              start: '08:00',
              step: '01:00',
              end: '18:00'
            }"
            placeholder="选择时间">
          </el-time-select>
        </el-col>
      </el-row>
      <el-row class="mb10">
        <el-col :span="2">
          <el-checkbox v-model="weekchecked">周计划</el-checkbox>
        </el-col>
        <el-col :span="10">
           <el-select v-model="week" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-col>
      </el-row>
      <el-row class="mb10">
        <el-col :span="2">
          <el-checkbox v-model="monthchecked">月计划</el-checkbox>
        </el-col>
        <el-col :span="10">
           <el-select v-model="month" placeholder="请选择">
              <el-option
                v-for="item in 31"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <span class="month-title">不满31天月份将按照当月月底进行调整</span>
        </el-col>
      </el-row>
      <div class="persion-box">
          <el-transfer v-model="user"
           :titles="['成员列表', '选中成员']"
           :data="sysData"></el-transfer>
      </div>
      <div class="btn-box">
        <el-button type="primary">保存设置</el-button>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      radio:3,
      userdata:[],
      daychecked:false,
      weekchecked:false,
      monthchecked:false,
      value:[1,4],
      options:[{
        value: '1',
        label: '星期一'
      },{
        value: '2',
        label: '星期二'
      },{
        value: '3',
        label: '星期三'
      },{
        value: '4',
        label: '星期四'
      },{
        value: '5',
        label: '星期五'
      },{
        value: '6',
        label: '星期六'
      },{
        value: '7',
        label: '星期日'
      }],
      week:'',
      timer:'',
      month:'',
      user:[],
      sysData:[]
    }
  },
  methods: {
    saveSet(){
      let data = {
        day:"09:00",
        week:1,
        month:12,
        openState:'day'
      }
      this.axios.post('',data).then(res => {
        console.log(res.data);
      })
    },
    getSysUser() {
      var Vthis = this;
      this.axios
        .get(this.API.auth.user, {
          params: {
            limit: 10000,
            offset: 0,
            is_active: true,
            user_type: "user",
            norm_type: "login"
          }
        }).then((response) => {
          let resdata = response.data.list_data;
          let sysArr = []
          resdata.forEach(ele => {
            let obj = {
              key:ele.user_unid,
              label:ele.name
            }
            sysArr.push(obj)
          });
          this.sysData = sysArr
        });
    },
  },
  created() {
    this.getSysUser()
  },
};
</script>
<style lang="stylus" scoped>
.setting-box{
  margin 20px 40px
  color #333
  .el-checkbox{
     color #666
  }
}
.sysuser{
  background #fff
}
.importas {
  .el-form-item {
    background: red;
  }
}

.el-checkbox {
  color: #fff;
}

.role-box {
  max-height 500px;
  overflow auto;
  padding: 0px 0 60px 0;
}
.left-box,.right-box
  width 90%
  height 300px
  overflow auto
  border 1px solid #999
  position relative
  text-align left
.claer-float
  clear both
.editrolebtn-box
  position absolute
  bottom 5px
  right 10px
  button
    float right
.mb10
  margin-bottom 10px
.persion-box{
  margin-top 30px
}
.btn-box{
  margin-top 20px
}
.month-title{
  font-size 12px
  color #e4393c
}
</style>