Merge branch 'mergeBranch' of http://124.70.211.186:3000/zhangqi/yos_web into mergeBranch

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

@@ -0,0 +1,278 @@
+<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>

src/HManagement/salesForecastTemplate/modules/add.vue

@@ -6,77 +6,69 @@
         <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-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 label="提报要求">
+                <el-input type="text" v-model="form.remarks" placeholder="输入提报要求"></el-input>
               </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-form-item label="提报周期">
+                <el-radio-group v-model="form.isrepeat" @change="onRadioChange">
+                  <el-radio :label="true">月度提报</el-radio>
+                  <el-radio :label="false">单次提报</el-radio>
+                </el-radio-group>
+              </el-form-item>
             </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-col :span="12" v-if="form.isrepeat">
+              <el-form-item label="设置周期" prop="periodpoint">
+                <div class="submit__date_List">
+                  <div class="list_title flex-align-center">
+                    <p>开始时间</p>
+                    <p>提报周期</p>
+                  </div>
+                  <div v-for="(item,index) in sdList" :key="index" class="flex-align-center mt-10">
+                    <el-date-picker
+                      style="width:150px;flex:1 0 auto"
+                      type="date"
+                      v-model="item.periodpoint"
+                      format="每月 d 日"
+                      placeholder="选择日期"
+                      @change="onDateChange">
+                    </el-date-picker>&nbsp;
+                    <el-input v-model="item.taskday" @change="onDateChange" size="small" placeholder="请输入周期天数"></el-input>&emsp;
+                    <el-button size="small" type="text" @click="deleteperiod(index)">删 除</el-button>
+                  </div>
+                  <div class="flex-align-center">
+                    <el-input style="width:150px;flex:1 0 auto" readonly v-model="addDate.periodpoint" size="small" placeholder=""></el-input>&nbsp;
+                    <el-input readonly v-model="addDate.taskday" size="small" placeholder=""></el-input>&emsp;
+                    <el-button size="small" type="text" @click="addperiod">添 加</el-button>
+                  </div>
+                </div>
               </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-col :span="12" v-else>
+              <el-form-item label="设置周期" prop="taskdays">
+                <div class="submit__date_List">
+                  <div class="list_title flex-align-center">
+                    <p>开始时间</p>
+                    <p>提报周期</p>
+                  </div>
+                  <div class="flex-align-center">
+                    <el-date-picker
+                      style="width:150px;flex:1 0 auto"
+                      type="date"
+                      v-model="form.begdate"
+                      value-format="yyyy-MM-dd"
+                      placeholder="选择日期"
+                      @change="onDateChange">
+                    </el-date-picker>&nbsp;
+                    <el-input v-model="addDate.taskday" @change="onDateChange" size="small" placeholder=""></el-input>&emsp;
+                  </div>
+                </div>
               </el-form-item>
             </el-col>
             <el-col :span="24">
@@ -99,24 +91,32 @@
 
 <script>
 export default {
-  data () {    
+  data () {   
+    var validatePass2 = (rule, value, callback) => {
+      console.log(value)
+      if (value.length === 0) {
+        callback(new Error('请设置提报周期'));
+      } else {
+        callback();
+      }
+    }; 
     return {
       error:false,
       dialogFormVisible:false,
+      visible:false,
       form:{
         sa_salesforecastmodelid:0,
         title:'',
         remarks:'',
-        begdate:'',
-        enddate:'',
+        begdate:null,
+        enddate:null,
         periodtype:'周',
         periodpoint:[],
         baseonproject:false,
         isrepeat:true,
-        taskdays:0,
+        taskdays:[],
         sales:[],
         roles:[],
-        
       },
       period:7,
       act:0,
@@ -125,56 +125,32 @@ export default {
         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' },
+        roles: [
+          { required: true, message: '请选择角色', trigger: 'change' }
         ],
         periodpoint:[
-          { validator: this.checkPeriodpoint, trigger: 'blur' }
+          { validator: validatePass2, trigger: 'change' }
         ],
-        roles: [
-          { required: true, message: '请选择角色', trigger: 'change' }
+        taskdays:[
+          { validator: validatePass2, trigger: 'change' }
         ],
       },
       pickerOptions:{
         disabledDate(time) {
           return time.getTime() < Date.now() - 8.64e7;
         }
-      }
+      },
+      sdList:[],
+      nsdList:[],
+      addDate:{
+        periodpoint:'',
+        taskday:'',
+      },
+      value:''
+
     }
   },
   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
@@ -185,7 +161,6 @@ export default {
             "roleid": e
           }
         })
-        data.periodtype === 'once'?data.periodtype= '':data.periodtype
 
         const res = await this.$api.requested({
           "id": 20220906150103,
@@ -199,21 +174,6 @@ export default {
         })
       });
     },
-    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,
@@ -229,22 +189,39 @@ export default {
       })
       this.rolelist = res.data
     },
-    refrehsh () {
-      this.form = {
-        sa_salesforecastmodelid:0,
-        title:'',
-        remarks:'',
-        begdate:'',
-        enddate:'',
-        periodtype:'周',
-        periodpoint:[],
-        baseonproject:false,
-        isrepeat:true,
-        taskdays:0,
-        sales:[],
-        roles:[],
-        
+    addperiod () {
+      this.sdList = [...this.sdList,...[this.addDate]]
+      this.sdList = this.tool.deepClone(this.sdList)
+    },
+    deleteperiod (index) {
+      console.log(index)
+      this.sdList = this.sdList.filter((e,idx)=>{
+        if (idx !== index)  return e
+      })
+    },
+    onRadioChange () {
+      this.sdList = []
+      this.form.taskdays = []
+      this.form.taskdays = []
+      this.form.begdate = ''
+      this.addDate = {
+        periodpoint:'',
+        taskday:'',
+      }
+    },
+    onDateChange () {
+      if (this.form.isrepeat) {
+        this.form.periodpoint = this.sdList.map(e=>{
+          return e.periodpoint.getDay()
+        })
+        this.form.taskdays = this.sdList.map(e=>{
+          return e.taskday
+        })
+      } else {
+        this.form.taskdays = this.addDate.taskday === ''?[]:[this.addDate.taskday]
       }
+      console.log(this.form.taskdays)
+      this.$refs['form'].validate(async (valid) => {})
     }
   },
   mounted () {
@@ -275,4 +252,14 @@ export default {
 .error{
   border:1px solid red !important;;
 }
+.submit__date_List{
+  width: 400px;
+  padding: 10px;
+  background: #f1f2f3;
+
+}
+.list_title p{
+  flex: 1;
+  text-align: center;
+}
 </style>

src/utils/tool.js

@@ -139,4 +139,26 @@ export default {
       parent.$emit.apply(parent, [eventName]);
     }
   },
+  deepClone(obj) {
+    let res = null;
+    const reference = [Date, RegExp, Set, WeakSet, Map, WeakMap, Error];
+    if (reference.includes(obj?.constructor)) {
+        res = new obj.constructor(obj);
+    } else if (Array.isArray(obj)) {
+        res = [];
+        obj.forEach((e, i) => {
+            res[i] = this.deepClone(e);
+        });
+    } else if (typeof obj === "object" && obj !== null) {
+        res = {};
+        for (const key in obj) {
+            if (Object.hasOwnProperty.call(obj, key)) {
+                res[key] = this.deepClone(obj[key]);
+            }
+        }
+    } else {
+        res = obj;
+    }
+    return res;
+  }
 }