日历修改

imcs-ui/src/views/zuihou/classScheduleMgr/settingClassSchedul/components/Edit.vue

@@ -1,280 +1,285 @@
-<template>
-  <el-dialog 
-  	:close-on-click-modal="false" 
-  	:close-on-press-escape="false" 
-  	:title="title" 
-  	:append-to-body="true"
-  	:visible.sync="isVisible" 
-  	width="500px" 
-  	top="50px"
-  >
-    <el-form ref="form" :model="tenant" :rules="rules" label-position="right" label-width="130px">
-    	<el-form-item :label='$t("calssSchedule.form.deptUsers")+"："' prop="userList">
-          <el-cascader 
-          	v-model="tenant.userList" 
-          	key="1"
-          	:options="applyList" 
-          	:props="{ multiple: true, checkStrictly: true , emitPath: false, expandTrigger: 'click'}" 
-          	:show-all-levels="false"
-          	filterable
-          	clearable 
-          	:placeholder='$t("common.pleaseSelect")'
-          	style="width: 100%;"
-          >
-        	</el-cascader>
-      </el-form-item>
-      <el-form-item :label='$t("calssSchedule.form.setDate")+"："' prop="dateList">
-      	<el-date-picker v-model="tenant.dateList" type="dates" value-format="yyyy-MM-dd" :placeholder='$t("common.pleaseSelect")' style="width: 100%;"></el-date-picker>
-      </el-form-item>
-      <el-form-item :label='$t("calssSchedule.form.setClass")+"："' prop="frequencyId">
-      	<template>
-				  <el-select v-model="tenant.frequencyId" :placeholder='$t("common.pleaseSelect")' style="width: 100%;">
-				    <el-option
-				      v-for="item in classesList"
-				      :key="item.id"
-				      :label="item.name.data"
-				      :value="item.id">
-				    </el-option>
-				  </el-select>
-				</template>
-      </el-form-item>
-    </el-form>
-    <div slot="footer" class="dialog-footer">
-      <el-button plain type="warning" @click="isVisible = false">{{ $t('common.cancel') }}</el-button>
-      <el-button plain type="primary" :disabled="confirmDisabled" @click="submitForm">{{ $t('common.confirm') }}</el-button>
-    </div>
-  </el-dialog>
-</template>
-<script>
-	// 【设置班表】-API
-	import settingClassSchedulApi from "@/api/classScheduleMgr/settingClassSchedul"
-	// 【班次管理】-API
-	import classesMgrApi from "@/api/classScheduleMgr/classesMgr"
-	// 【部门组织】-API
-	import orgApi from "@/api/Org"
-
-export default {
-  name: 'TenantEdit',
-  props: {
-    dialogVisible: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  data () {
-    return {
-      type: 'add',
-      tenant: this.initTenant(),
-      screenWidth: 0,
-      width: this.initWidth(),
-      confirmDisabled: false,
-      classesList: [], // 班次设置，下拉数据
-      applyList: [],
-      applyCheckbox: [],  // 【更换班表-申请人】
-      updateCheckbox: [],  // 【更换班表-更换人】
-      dicts:{
-        NATION: {}
-      },
-      roles: [],
-      rules: {
-      	userList: [
-        	{ required: true, message: this.$t("rules.require"), trigger: 'change' }
-        ],
-        date: [
-        	{ required: true, message: this.$t("rules.require"), trigger: 'change' }
-        ],
-        frequencyId: [
-        	{ required: true, message: this.$t("rules.require"), trigger: 'change' }
-        ]
-      }
-    }
-  },
-  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
-  created() {
-  	// [部门人员]的获取
-  	// this.applyList = this.$constWKS.CASCADERLIST
-  	this.getDeptUser()
-  	// [设置班次]的获取
-  	this.getClassesList()
-	},
-  computed: {
-    isVisible: {
-      get () {
-        return this.dialogVisible
-      },
-      set () {
-        this.close()
-        this.reset()
-      }
-    }
-  },
-  mounted () {
-    window.onresize = () => {
-      return (() => {
-        this.width = this.initWidth()
-      })()
-    }
-  },
-  methods: {
-    initTenant () {
-      return {
-      	frequencyId: '',
-      	dateList: [],
-        userList: []
-      }
-    },
-    initWidth () {
-      this.screenWidth = document.body.clientWidth
-      if (this.screenWidth < 991) {
-        return '90%'
-      } else if (this.screenWidth < 1400) {
-        return '45%'
-      } else {
-        return '800px'
-      }
-    },
-    setTenant (val, dicts) {
-    	if(val){
-    		this.tenant = { ...val }
-    	}
-      // 字典表
-      this.dicts = dicts
-    },
-    close () {
-      this.$emit('close')
-    },
-    reset () {
-      // 先清除校验，再清除表单，不然有奇怪的bug
-      this.$refs.form.clearValidate()
-      this.$refs.form.resetFields()
-      this.tenant = this.initTenant()
-    },
-    submitForm () {
-    	//console.log("Form数据：", this.tenant)
-    	//return false
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.confirmDisabled = true
-          if (this.type === 'add') {
-            this.save()
-          } else {
-            this.update()
-          }
-        } else {
-          return false
-        }
-      })
-    },
-    save () {
-      settingClassSchedulApi.setSchedule(this.tenant)
-        .then((response) => {
-          const res = response.data
-          if (res.isSuccess) {
-            this.isVisible = false
-            this.$message({
-              message: this.$t('tips.createSuccess'),
-              type: 'success'
-            })
-            // 通知列表
-	          this.$emit("success");
-	          // 通知列表-并关闭弹出框
-	          this.$emit("close");
-          }
-        }).finally(() => {
-          this.confirmDisabled = false
-          return true
-        })
-    },
-    update () {
-      settingClassSchedulApi.update(this.tenant)
-        .then((response) => {
-          const res = response.data
-          if (res.isSuccess) {
-            this.isVisible = false
-            this.$message({
-              message: this.$t('tips.updateSuccess'),
-              type: 'success'
-            })
-            // 通知列表
-	          this.$emit("success");
-	          // 通知列表-并关闭弹出框
-	          this.$emit("close");
-          }
-        }).finally(() => {
-          this.confirmDisabled = false
-          return true
-        })
-    },
-    // 【更换班表】-列表数据
-    applyClassList(flag, val){
-    	classesMgrApi.getListById({userId: ''}).then(res => {
-    		res = res.data
-    		console.log("【更换班表】-列表数据: ", res)
-    		if (res.isSuccess) {
-    			// 如果是【申请人-更换班表】
-		    	if(flag){
-		    		this.applyCheckbox = res.data
-		    	}else{  // 如果是【更换人-更换班表】
-		    		this.updateCheckbox =  res.data
-		    	}
-	      }
-    	})
-    },
-    // [设置班次]下拉的数据
-    getClassesList(){
-    	classesMgrApi.getList({}).then(res => {
-    		res = res.data
-    		console.log("【设置班次】-列表数据: ", res)
-    		if (res.isSuccess) {
-		    	this.classesList =  res.data
-	      }
-    	})
-    },
-    // 【部门人员】-级联数据
-    getDeptUser(){
-    	orgApi.getDeptUser({}).then(res => {
-    		res = res.data
-    		// console.log("【部门人员】-级联数据: ", res)
-    		if(res.isSuccess){
-    			this.applyList = res.data
-    		}
-    	})
-    }
-
-  }
-}
-</script>
-<style lang="scss" >
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409eff;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 100px;
-  height: 100px;
-  line-height: 100px;
-  text-align: center;
-}
-.avatar {
-  width: 100px;
-  height: 100px;
-  display: block;
-}
-.checkUsed{
-	display: inline-block;
-	margin-left: 10px;
-	color: #1890ff;
-}
-</style>
+<template>
+  <el-dialog
+  	:close-on-click-modal="false"
+  	:close-on-press-escape="false"
+  	:title="title"
+  	:append-to-body="true"
+  	:visible.sync="isVisible"
+  	width="500px"
+  	top="50px"
+  >
+    <el-form ref="form" :model="tenant" :rules="rules" label-position="right" label-width="130px">
+    	<el-form-item :label='$t("calssSchedule.form.deptUsers")+"："' prop="userList">
+          <el-cascader
+          	v-model="tenant.userList"
+          	key="1"
+          	:options="applyList"
+          	:props="{ multiple: true, checkStrictly: true , emitPath: false, expandTrigger: 'click'}"
+          	:show-all-levels="false"
+          	filterable
+          	clearable
+          	:placeholder='$t("common.pleaseSelect")'
+          	style="width: 100%;"
+          >
+        	</el-cascader>
+      </el-form-item>
+      <el-form-item :label='$t("calssSchedule.form.setDate")+"："' prop="dateList">
+      	<el-date-picker :picker-options="pickerOptions" v-model="tenant.dateList" type="dates" value-format="yyyy-MM-dd" :placeholder='$t("common.pleaseSelect")' style="width: 100%;"></el-date-picker>
+      </el-form-item>
+      <el-form-item :label='$t("calssSchedule.form.setClass")+"："' prop="frequencyId">
+      	<template>
+				  <el-select v-model="tenant.frequencyId" :placeholder='$t("common.pleaseSelect")' style="width: 100%;">
+				    <el-option
+				      v-for="item in classesList"
+				      :key="item.id"
+				      :label="item.name.data"
+				      :value="item.id">
+				    </el-option>
+				  </el-select>
+				</template>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button plain type="warning" @click="isVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button plain type="primary" :disabled="confirmDisabled" @click="submitForm">{{ $t('common.confirm') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+	// 【设置班表】-API
+	import settingClassSchedulApi from "@/api/classScheduleMgr/settingClassSchedul"
+	// 【班次管理】-API
+	import classesMgrApi from "@/api/classScheduleMgr/classesMgr"
+	// 【部门组织】-API
+	import orgApi from "@/api/Org"
+
+export default {
+  name: 'TenantEdit',
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      pickerOptions: {
+        disabledDate: (time) => {
+          return time.getTime() < Date.now() - 86400000;
+        },
+      },
+      type: 'add',
+      tenant: this.initTenant(),
+      screenWidth: 0,
+      width: this.initWidth(),
+      confirmDisabled: false,
+      classesList: [], // 班次设置，下拉数据
+      applyList: [],
+      applyCheckbox: [],  // 【更换班表-申请人】
+      updateCheckbox: [],  // 【更换班表-更换人】
+      dicts:{
+        NATION: {}
+      },
+      roles: [],
+      rules: {
+      	userList: [
+        	{ required: true, message: this.$t("rules.require"), trigger: 'change' }
+        ],
+        date: [
+        	{ required: true, message: this.$t("rules.require"), trigger: 'change' }
+        ],
+        frequencyId: [
+        	{ required: true, message: this.$t("rules.require"), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
+  created() {
+  	// [部门人员]的获取
+  	// this.applyList = this.$constWKS.CASCADERLIST
+  	this.getDeptUser()
+  	// [设置班次]的获取
+  	this.getClassesList()
+	},
+  computed: {
+    isVisible: {
+      get () {
+        return this.dialogVisible
+      },
+      set () {
+        this.close()
+        this.reset()
+      }
+    }
+  },
+  mounted () {
+    window.onresize = () => {
+      return (() => {
+        this.width = this.initWidth()
+      })()
+    }
+  },
+  methods: {
+    initTenant () {
+      return {
+      	frequencyId: '',
+      	dateList: [],
+        userList: []
+      }
+    },
+    initWidth () {
+      this.screenWidth = document.body.clientWidth
+      if (this.screenWidth < 991) {
+        return '90%'
+      } else if (this.screenWidth < 1400) {
+        return '45%'
+      } else {
+        return '800px'
+      }
+    },
+    setTenant (val, dicts) {
+    	if(val){
+    		this.tenant = { ...val }
+    	}
+      // 字典表
+      this.dicts = dicts
+    },
+    close () {
+      this.$emit('close')
+    },
+    reset () {
+      // 先清除校验，再清除表单，不然有奇怪的bug
+      this.$refs.form.clearValidate()
+      this.$refs.form.resetFields()
+      this.tenant = this.initTenant()
+    },
+    submitForm () {
+    	//console.log("Form数据：", this.tenant)
+    	//return false
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.confirmDisabled = true
+          if (this.type === 'add') {
+            this.save()
+          } else {
+            this.update()
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    save () {
+      settingClassSchedulApi.setSchedule(this.tenant)
+        .then((response) => {
+          const res = response.data
+          if (res.isSuccess) {
+            this.isVisible = false
+            this.$message({
+              message: this.$t('tips.createSuccess'),
+              type: 'success'
+            })
+            // 通知列表
+	          this.$emit("success");
+	          // 通知列表-并关闭弹出框
+	          this.$emit("close");
+          }
+        }).finally(() => {
+          this.confirmDisabled = false
+          return true
+        })
+    },
+    update () {
+      settingClassSchedulApi.update(this.tenant)
+        .then((response) => {
+          const res = response.data
+          if (res.isSuccess) {
+            this.isVisible = false
+            this.$message({
+              message: this.$t('tips.updateSuccess'),
+              type: 'success'
+            })
+            // 通知列表
+	          this.$emit("success");
+	          // 通知列表-并关闭弹出框
+	          this.$emit("close");
+          }
+        }).finally(() => {
+          this.confirmDisabled = false
+          return true
+        })
+    },
+    // 【更换班表】-列表数据
+    applyClassList(flag, val){
+    	classesMgrApi.getListById({userId: ''}).then(res => {
+    		res = res.data
+    		console.log("【更换班表】-列表数据: ", res)
+    		if (res.isSuccess) {
+    			// 如果是【申请人-更换班表】
+		    	if(flag){
+		    		this.applyCheckbox = res.data
+		    	}else{  // 如果是【更换人-更换班表】
+		    		this.updateCheckbox =  res.data
+		    	}
+	      }
+    	})
+    },
+    // [设置班次]下拉的数据
+    getClassesList(){
+    	classesMgrApi.getList({}).then(res => {
+    		res = res.data
+    		console.log("【设置班次】-列表数据: ", res)
+    		if (res.isSuccess) {
+		    	this.classesList =  res.data
+	      }
+    	})
+    },
+    // 【部门人员】-级联数据
+    getDeptUser(){
+    	orgApi.getDeptUser({}).then(res => {
+    		res = res.data
+    		// console.log("【部门人员】-级联数据: ", res)
+    		if(res.isSuccess){
+    			this.applyList = res.data
+    		}
+    	})
+    }
+
+  }
+}
+</script>
+<style lang="scss" >
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+}
+.avatar {
+  width: 100px;
+  height: 100px;
+  display: block;
+}
+.checkUsed{
+	display: inline-block;
+	margin-left: 10px;
+	color: #1890ff;
+}
+</style>