FE-V2-PC/src/views/comprehensive/message/addContent/index.vue

<template>
  <div class="app-container addContent" @click="clickPicker(1)">
    <div class="top-title-box">
      <p>信息发布</p>
      <p class="inquire-button-one" @click="submitForm">发布</p>
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="发送对象：" prop="messClass" class="form-tiem-box-two">
        <el-radio-group  v-model="form.messClass">
          <el-radio style="width:100px;" :label='1'>人员</el-radio>
          <el-radio style="width:100px;" :label='3'>实验室</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="发送范围：" prop="picker" class="form-tiem-box" v-if="form.messClass == 1">
        <div class="picker-form-item">
          <!--<div class="border-box" @click.stop="clickPicker(2)">{{pickerNameLeft}}{{pickerNameLeft!=''&&pickerNameRight!=''?'/':''}}{{pickerNameRight}}</div>-->
          <div class="border-box" @click.stop="clickPicker(2)">{{pickerNameLeft==''&&pickerNameRight==''?'请选择':(pickerNameLeft!=''&&pickerNameRight!=''?pickerNameLeft+'/'+pickerNameRight:pickerNameLeft+pickerNameRight)}}</div>
          <div class="list-box">
            <p v-for="(item,index) in userList" :key="index">{{item.nickName}}</p>
          </div>
          <div class="position-box" v-if="positionType">
            <div class="position-top-box">
              <div class="position-left-box scrollbar-box">
                <p v-for="(item,index) in listDepartmentsList"
                   :class="leftPositionType == item.deptId?'colorP':''"
                   :key="index" @click.stop="positionClick(1,item)">{{item.deptName}}</p>
              </div>
              <div class="position-right-box scrollbar-box">
                <p v-for="(item,index) in optionselectList"
                   :class="rightPositionType == item.postId?'colorP':''"
                   :key="index" @click.stop="positionClick(2,item)">{{item.postName}}</p>
              </div>
            </div>
            <div class="position-bottom-box" @click="userClick(3)">人员列表 》</div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="发送范围：" prop="picker" class="form-tiem-box" v-if="form.messClass == 3">
        <div class="picker-form-item">
          <div class="border-box" @click.stop="subjectTypeClick(4)">{{subsData[0]?'已选择':'请选择'}}</div>
          <div class="list-box">
            <p v-for="(item,index) in subsData" :key="index">{{item.name}}</p>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="过期日期：" prop="expirationDate" class="form-tiem-box" v-if="form.messClass == 3">
        <el-date-picker
          style="width:300px;"
          v-model="form.expirationDate"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择过期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="内容：" prop="content" class="form-tiem-box">
        <el-input
          style="width:600px;"
          type="textarea"
          :rows="6"
          maxlength="200"
          placeholder="请输入内容"
          v-model="form.content">
        </el-input>
      </el-form-item>
    </el-form>
    <subject-list ref="subjectOpen"></subject-list>
    <user-list ref="userOpen"></user-list>
  </div>
</template>

<script>
  import { addContent } from "@/api/laboratory/content";
  import userList from "./userList.vue"
  import subjectList from "./subjectList.vue"
  import { optionselect } from "@/api/laboratory/gradeManage";
  import { getDeptNoAuthList } from "@/api/system/dept";
    export default {
      name: "addContent",
      components: {
        subjectList,
        userList
      },
      data() {
        return{
          //下啦展示状态
          positionType:false,
          leftPositionType:"",
          listDepartmentsList:[],
          rightPositionType:"",
          optionselectList:[],
          pickerNameLeft:"",
          pickerNameRight:"",
          form:{
            messClass:1,
            deptIds:"",
            postIds:"",
            userIds:"",
            subIds:"",
            expirationDate:"",
            content:"",
            picker:"",//判断是否为空
          },
          //选中实验室
          subsData:[],
          //选中用户
          userList:[],
          // 表单校验
          rules: {
            messClass:[
              {required: true, message: '请选择发送对象', trigger: 'change'}
            ],
            picker:[
              {required: true, message: '请选择发送范围', trigger: 'change'}
            ],
            expirationDate:[
              {required: true, message: '请选择过期时间', trigger: 'change'}
            ],
            content:[
              {required: true, message: '请输入内容', trigger: 'change'},
              { required: true, message: "请输入内容", validator: this.spaceJudgment, trigger: "blur" }
            ],
          },
        }
      },
      created() {
      },
      mounted(){
        this.optionselect();
        this.getDeptNoAuthList();
      },
      methods: {
        //选择实验室
        subjectTypeClick(){
          if(this.subsData[0]){
            this.$refs.subjectOpen.show(this.subsData);
          }else{
            this.$refs.subjectOpen.show();
          }
        },
        //接收实验室列表数据
        takeSubjectData(ids,data){
          this.$set(this.form,'subIds',ids);
          this.$set(this,'subsData',data);
          this.$refs.subjectOpen.show();
          if(this.subsData[0]){
            this.form.picker = 1;
          }else{
            this.form.picker = "";
          }
        },
        //选择人员
        userClick(){
          if(this.userList){
            this.$refs.userOpen.show(this.userList);
          }else{
            this.$refs.userOpen.show();
          }
        },
        //接收人员列表数据
        takeUserData(ids,data){
          console.log("人员数据",ids);
          this.$set(this.form,'userIds',ids);
          this.$set(this,'userList',data);
          this.$refs.userOpen.show();
          if(this.userList[0]){
            this.form.picker = 1;
            this.pickerNameLeft = "已选择";
            this.pickerNameRight = "";
          }else{
            this.form.picker = "";
            this.pickerNameLeft = "";
            this.pickerNameRight = "";
          }
          this.leftPositionType = "";
          this.rightPositionType = "";
        },
        //选择人员分类
        positionClick(type,item){
          console.log("type",type)
          console.log("item",item)
          if(type == 1){
            this.leftPositionType = item.deptId;
            this.pickerNameLeft = item.deptName
            this.userList = [];
          }else if(type == 2){
            this.rightPositionType = item.postId;
            this.pickerNameRight = item.postName
            this.userList = [];
          }
          if(this.leftPositionType && this.rightPositionType){
            this.form.picker = 1;
          }else{
            this.form.picker = "";
          }
        },
        //获取职位列表
        optionselect(){
          optionselect({status:0}).then(response => {
            let list = response.data;
            let obj = {
              postName:"全部职位",
              postId:"allMax"
            };
            list.unshift(obj)
            this.optionselectList = list;
          });
        },
        getDeptNoAuthList(){
          getDeptNoAuthList().then(response => {
            let list = response.data;
            let obj = {
              deptName:"全部学院",
              deptId:"allMax"
            };
            list.unshift(obj)
            this.listDepartmentsList = list;
          });
        },
        clickPicker(type){
          console.log("type触发")
          if(type == 1){
            this.positionType = false;
          }else if(type == 2){
            this.positionType = true;
          }else if(type == 3){
            //人员列表选择
          }else if(type == 4){
            //实验室列表选择
          }
        },
        /** 提交按钮 */
        submitForm() {
          let self = this;
          this.$refs["form"].validate(valid => {
            if (valid) {
              let obj ={
                messClass:self.form.messClass,
                content:self.form.content,
              };
              console.log('obj123')
              if(self.form.messClass == 1){
                if(self.userList[0]){
                  obj.userIds = self.form.userIds.join()
                }else{
                  if(self.leftPositionType == 'allMax'){
                    let list = [];
                    for(let i=0;i<self.listDepartmentsList.length;i++){
                      if(self.listDepartmentsList[i].deptId != 'allMax'){
                        list.push(self.listDepartmentsList[i].deptId);
                      }
                    }
                    obj.deptIds = list.join();
                  }else{
                    obj.deptIds = self.leftPositionType;
                  }
                  if(self.rightPositionType == 'allMax'){
                    let list = [];
                    for(let i=0;i<self.optionselectList.length;i++){
                      if(self.optionselectList[i].postId != 'allMax'){
                        list.push(self.optionselectList[i].postId);
                      }
                    }
                    obj.postIds = list.join();
                  }else{
                    obj.postIds = self.rightPositionType;
                  }
                }
              }else if(this.form.messClass == 3){
                obj.expirationDate = self.form.expirationDate;
                obj.subIds = self.form.subIds.join()
              }
              console.log('obj',obj);
              addContent(obj).then(response => {
                self.msgSuccess("新增成功");
                self.form = {
                  messClass:1,
                  deptIds:"",
                  postIds:"",
                  userIds:"",
                  subIds:"",
                  expirationDate:"",
                  content:"",
                  picker:"",//判断是否为空
                };
                self.subsData = "";
                self.userList = "";
                self.subsData = "";
                self.leftPositionType = "";
                self.rightPositionType = "";
                self.pickerNameLeft = "";
                self.pickerNameRight = "";
                self.resetForm("form");
                self.$forceUpdate();
              });
            }
          });
        },
      },
    }
</script>

<style scoped lang="scss">
  .addContent {
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    padding:0 20px 20px!important;
    *{
      margin:0;
    }
    .top-title-box{
      display: flex;
      p:nth-child(1){
        flex:1;
        line-height:80px;
        color:#0045AF;
        font-size:18px;
      }
      p:nth-child(2){
        margin:20px 20px 0 0;
      }
      p:nth-child(3){
        margin-top:20px;
      }
    }
    .form-tiem-box{
      min-height:70px;
    }
    .form-tiem-box-two{
      height:60px;
    }
    .picker-form-item{
      display: flex;
      position: relative;
      .border-box{
        width:300px;
        height:40px;
        line-height:40px;
        border:1px solid #dedede;
        border-radius:4px;
        cursor: pointer;
        font-size:14px;
        padding:0 10px;
        color:#999;
      }
      .list-box{
        p{
          display: inline-block;
          overflow: hidden;
          margin:0 0 10px 10px;
          padding:0 20px;
          background: rgba(204,230,254,1);
          color:#0183FA;
          border-radius:6px;
          text-align: center;
          font-size:14px;
          line-height:40px;
        }
      }
      .position-box{
        position: absolute;
        border:1px solid #dedede;
        background: #fff;
        border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;
        top:38px;
        left:0;
        width:300px;
        height:200px;
        z-index:1;
        display: flex;
        flex-direction: column;
        font-weight:500;
        .position-top-box{
          flex:1;
          display: flex;
          overflow-y: hidden;
          .position-left-box{
            border-right:1px solid #dedede;
            flex:1;
            p{
              height:30px;
              line-height:30px;
              font-size:14px;
              padding:0 10px;
              cursor: pointer;
              display:block;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            p:hover{
              background: rgba(204,230,254,1);
              color:#0183FA;
            }
            .colorP{
              background: rgba(204,230,254,1);
              color:#0183FA;
            }
          }
          .position-right-box{
            flex:1;
            p{
              height:30px;
              line-height:30px;
              font-size:14px;
              padding:0 10px;
              cursor: pointer;
              display:block;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            p:hover{
              background: rgba(204,230,254,1);
              color:#0183FA;
            }
            .colorP{
              background: rgba(204,230,254,1);
              color:#0183FA;
            }
          }
        }
        .position-bottom-box{
          height:30px;
          line-height:30px;
          border-top:1px solid #dedede;
          font-size:14px;
          text-align: center;
          color:#333333;
          cursor: pointer;
        }
      }
    }
  }
</style>