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

<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;
          return time.getTime() < new Date(this.tenant.monthBeginDay).getTime() || time.getTime() > new Date(this.tenant.monthLastDay).getTime()
        },
      },
      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: [],
        monthBeginDay: '',
        monthLastDay: '',
      }
    },
    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,monthBeginDay,monthLastDay) {
    	if(val){
    		this.tenant = { ...val }
    	}
      this.tenant.monthBeginDay = monthBeginDay
      this.tenant.monthLastDay = monthLastDay
      // 字典表
      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>