yos_web/src/HManagement/salesForecastTemplate/modules/add copy.vue

<template>
  <div>
    <el-button type="primary" size="small" @click="queryRoles(dialogFormVisible = true)">新 建</el-button>
    <el-drawer append-to-body title="新建模板" :visible.sync="dialogFormVisible" size="800px">
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="80px" size="small">
            <el-col :span="24">
              <el-form-item label="标题" prop="title">
                <el-input type="text" v-model="form.title" placeholder="输入提报标题"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="开始日期" prop="begdate">
              <el-date-picker
                style="width:100%"
                v-model="form.begdate"
                type="date"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束日期" prop="enddate">
                <el-date-picker
                  style="width:100%"
                  v-model="form.enddate"
                  type="date"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="提醒时间" prop="taskdays">
                <div class="flex-align-center"><span style="width:40px">提 前:</span><el-input type="number" style="width:200px" v-model="form.taskdays" placeholder="输入提醒时间"></el-input>&emsp;<span>天</span></div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="flex-align-center my-error-panel">
                <el-form-item label="提报周期" prop="periodtype">
                  <el-select style="width:120px" v-model="form.periodtype" placeholder="请选择提报周期" @change="handleChange">
                    <el-option label="每周" value="周"></el-option>
                    <el-option label="每月" value="月"></el-option>
                    <el-option label="仅一次" value="once"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label-width="0px" prop="periodpoint">
                  <el-popover
                    v-if="form.periodtype !== 'once'"
                    placement="bottom"
                    width="400"
                    trigger="click">
                    <div :class="error?'error':''" class="periodTags" slot="reference">
                      <p v-if="form.periodpoint.length === 0">请选择</p>
                      <div v-else>
                        <el-tag v-for="item in form.periodpoint" type="info" size="mini" :key="item.index" style="margin-right:5px" @close="closeDate(item)" closable>
                          {{form.periodtype === '周'?'周'+ `${item===7?'日':item}`:item+'日'}}
                        </el-tag>
                      </div>
                    </div>
                    <el-row>
                      <el-col :class="act === item?'act':''" @click.native="clickdate(item)" style="height:50px;line-height:50px;text-align:center;cursor: pointer;"  v-for="item in period" :key="item" :span="form.periodtype==='月'?4:8">{{form.periodtype === '周'?'周'+ `${item===7?'日':item}`:item+'日'}}</el-col>
                    </el-row>
                  </el-popover>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="24">
              <el-form-item label="提报要求">
                <el-checkbox v-model="form.baseonproject" :true-label="1" :false-label="0">按项目及产品类别预测</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remarks" placeholder="请输入备注" :rows="3"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="发布范围" prop="roles">
                <el-select style="width:100%" v-model="form.roles" placeholder="请选择角色" multiple>
                  <el-option v-for="item in rolelist" :key="item.roleid" :label="item.rolename" :value="item.roleid"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data () {    
    return {
      error:false,
      dialogFormVisible:false,
      form:{
        sa_salesforecastmodelid:0,
        title:'',
        remarks:'',
        begdate:'',
        enddate:'',
        periodtype:'周',
        periodpoint:[],
        baseonproject:false,
        isrepeat:true,
        taskdays:0,
        sales:[],
        roles:[],
        
      },
      period:7,
      act:0,
      rolelist:[],
      rules:{
        title: [
          { required: true, message: '请输入提报标题', trigger: 'blur' },
        ],
        periodtype: [
          { required: true, message: '请选择周期', trigger: 'change' }
        ],
        begdate: [
          { required: true, message: '请选择开始日期', trigger: 'change' }
        ],
        enddate: [
          { validator:this.validateEndDate, required: true, trigger: 'change' }
        ],
        taskdays:[
          { required: false, message: '请输提醒天数', trigger: 'blur' },
        ],
        periodpoint:[
          { validator: this.checkPeriodpoint, trigger: 'blur' }
        ],
        roles: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ],
      },
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      }
    }
  },
  methods:{
    checkPeriodpoint (rule, value, callback) {
      if (value.length === 0 && this.form.periodtype !== 'once') {
        this.error = true
        return callback(new Error('请选择周期'));
      } else {
        this.error = false
        callback();
      }
    },
    validateEndDate(rule, value, callback){
      let start = (new Date(this.form.begdate)).getTime()
      let end = (new Date(this.form.enddate)).getTime()
      if (value === '') {
        callback(new Error('请选择结束日期'));
      } else if (end < start) {
        callback(new Error('结束日期不能小于开始日期'));
      } else {
        // if (this.form.enddate !== '') {
        //   this.$refs['form'].validateField('enddate');
        // }
        callback();
      }
    },
    onSubmit () {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        let data = Object.assign({},this.form)
        data.roles = this.form.roles.map(e=>{
          return {
            "sa_salesforecastmodelroleid":0, 
            "roleid": e
          }
        })
        data.periodtype === 'once'?data.periodtype= '':data.periodtype

        const res = await this.$api.requested({
          "id": 20220906150103,
          "version":1,
          "content": data
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.dialogFormVisible = false
          this.refrehsh()
        })
      });
    },
    clickdate (item) {
      this.act = item
      this.form.periodpoint.push(item)
      this.form.periodpoint = [...[],...new Set(this.form.periodpoint)]      
    },
    closeDate (item) {
      this.form.periodpoint = this.form.periodpoint.filter(e=>{
        return e !== item
      })
    },
    handleChange (val) {
      this.form.isrepeat = true
      this.form.periodpoint = []
      val === '月'?this.period = 31:val==='周'?this.period =7:this.form.isrepeat = false
    },
    async queryRoles () {
      const res = await this.$api.requested({
        "id":20221101131902,
        "content": {
          "pageNumber": 1,
          "pageSize": 1000,
          "where":{
            "condition":"",
            "usertype":"",
            "issystem":1
          }
        }
      })
      this.rolelist = res.data
    },
    refrehsh () {
      this.form = {
        sa_salesforecastmodelid:0,
        title:'',
        remarks:'',
        begdate:'',
        enddate:'',
        periodtype:'周',
        periodpoint:[],
        baseonproject:false,
        isrepeat:true,
        taskdays:0,
        sales:[],
        roles:[],
        
      }
    }
  },
  mounted () {
  }
}

</script>
<style>
.my-error-panel .el-form-item__error{
  text-indent: 10px;
}
</style>
<style scoped>
.periodTags{
  border:1px solid #dcdfe6;
  min-height:32px;
  /* margin-bottom:18px; */
  padding:0 10px;
  margin-left:10px;
  line-height:32px;
  border-radius: 4px;
  min-width: 400px;
  cursor: pointer;
}
.act{
  background: #dcdfe6;
}
.error{
  border:1px solid red !important;;
}
</style>