FE-V2-PC/src/views/safetyCheck/schoolInspection/inspectionPlan/addPage.vue

<template>
  <div class="selfInspectionManagement-addPage">
    <div class="title-max-box">
      <p class="title-p">{{addType?'开始检查':'编辑详情'}}</p>
      <p class="title-button add-button-one-90" @click="outButton">返回</p>
      <img class="position-img" v-if="imgType == 1" src="@/assets/ZDimages/safetyCheck/icon_xyxc_qx.png">
      <img class="position-img" v-if="imgType == 2" src="@/assets/ZDimages/safetyCheck/icon_xyxc_sys.png">
      <img class="position-img" v-if="imgType == 3" src="@/assets/ZDimages/safetyCheck/icon_xyxc_xy.png">
    </div>
    <div class="content-max-box scrollbar-box">
      <el-form  :model="addForm" :rules="rules" label-width="82px">
        <div class="top-form-box">
          <div class="top-form-left-box">
            <el-form-item label="计划标题" prop="data1">
              <el-input disabled v-model="addForm.data1" placeholder="未填写" maxLength="10" style="width: 690px"/>
            </el-form-item>
            <div style="display: flex">
              <el-form-item label="学院" prop="data2">
                <el-input disabled v-model="addForm.data2" placeholder="未填写" maxLength="10" style="width: 300px"/>
              </el-form-item>
              <el-form-item label="实验室" prop="data3" label-width="110px">
                <el-input disabled v-model="addForm.data3" placeholder="未填写" maxLength="10" style="width: 280px"/>
              </el-form-item>
            </div>
            <el-form-item label="检查要求" prop="data4">
              <el-input disabled v-model="addForm.data4" placeholder="未填写" maxLength="10" style="width: 690px"/>
            </el-form-item>
            <el-form-item label="检查结果" prop="data5">
              <el-select v-model="addForm.data5" placeholder="请选择检查结果" style="width: 690px">
                <el-option :key="0" label="不符合" :value="0"></el-option>
                <el-option :key="1" label="符合" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="整改通知" prop="data6">
              <el-radio-group v-model="addForm.data6" style="margin-top:5px;">
                <el-radio :label="0">整改告知书</el-radio>
                <el-radio :label="1">整改通知书</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="top-form-right-box">
            <el-form-item label="检查类型" prop="data7">
              <el-input disabled v-model="addForm.data7" placeholder="未填写" maxLength="10" style="width: 450px"/>
            </el-form-item>
            <el-form-item label="楼栋" prop="data8">
              <el-input disabled v-model="addForm.data8" placeholder="未填写" maxLength="10" style="width: 450px"/>
            </el-form-item>
            <el-form-item label="计划周期" prop="data9">
              <el-input disabled v-model="addForm.data9" placeholder="未填写" maxLength="10" style="width: 450px"/>
            </el-form-item>
            <el-form-item label="整改期限" prop="data10">
              <el-date-picker
                style="width: 450px"
                v-model="addForm.data10"
                type="date"
                :clearable="false"
                placeholder="选择整改期限">
              </el-date-picker>
            </el-form-item>
          </div>
        </div>
        <div class="bottom-form-box">
          <div class="bottom-form-title-box">
            <p>不符合项</p>
            <p>隐患数：{{addForm.rectificationList.length}}</p>
          </div>
          <div class="for-max-big-box" v-for="(item,index) in addForm.rectificationList" :key="index">
            <div class="for-title-box">
              <p class="for-title-p">第{{index+1}}隐患项</p>
              <div class="for-del-box">
                <p class="el-icon-delete"></p>
                <p>删除此项</p>
              </div>
              <div class="for-button-box" @click="dataLookButton(item)">
                <p :class="item.lookType?'el-icon-arrow-up':'el-icon-arrow-down'"></p>
                <p>{{item.lookType?'收起':'展开'}}</p>
              </div>
            </div>
            <div class="for-big-box" v-if="item.lookType">
              <el-form-item label="隐患等级" :prop="'rectificationList.'+index+'.list1'" :rules="rules.list1" label-width="123px">
                <el-select v-model="item.list1" clearable placeholder="请选择隐患等级" style="width: 408px">
                  <el-option :key="0" label="一般隐患" :value="0"></el-option>
                  <el-option :key="1" label="重大隐患" :value="1"></el-option>
                  <el-option :key="2" label="管理问题" :value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="检查项目" :prop="'rectificationList.'+index+'.list2'" :rules="rules.list2" label-width="123px">
                <el-cascader
                  v-model="item.list2"
                  style="width: 898px"
                  placeholder="请选择检查项"
                  :options="options"
                  filterable></el-cascader>
              </el-form-item>
              <el-form-item label="检查要点" label-width="123px">
                <el-input
                  style="width: 898px"
                  type="textarea"
                  :autosize="{ minRows: 6, maxRows: 6}"
                  placeholder="请输入检查要点"
                  resize="none"
                  maxlength="100"
                  show-word-limit
                  v-model="item.list3">
                </el-input>
              </el-form-item>
              <el-form-item label="隐患描述" :prop="'rectificationList.'+index+'.list4'" :rules="rules.list4" label-width="123px">
                <el-input
                  style="width: 898px"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4}"
                  placeholder="请输入隐患描述"
                  resize="none"
                  maxlength="100"
                  show-word-limit
                  v-model="item.list4">
                </el-input>
              </el-form-item>
              <el-form-item label="隐患照片" label-width="123px">
                <div class="for-img-box" v-for="(img,imgIndex) in item.imgList" :key="imgIndex">
                  <img class="for-img" :src="img.url">
                  <p class="for-del-button el-icon-circle-close" @click="delImg(index,imgIndex)"></p>
                </div>
                <el-upload
                  style="display: inline-block;overflow: hidden"
                  class="avatar-uploader"
                  :action="uploadImgUrl"
                  :show-file-list="false"
                  :on-success="(res)=>handleAvatarSuccess(res,item)"
                  :headers="headers"
                  :before-upload="(res)=>beforeAvatarUpload(res,item)">
                  <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
                </el-upload>
              </el-form-item>
              <el-form-item label="" label-width="123px" style="margin-bottom:40px;">
                <p>支持jpg/png/bmp/gif格式，且不超过2M，最多上传5张</p>
              </el-form-item>
            </div>
          </div>
          <p class="add-bottom-button" @click="addObject">+新增隐患检查项</p>
        </div>
      </el-form>
    </div>
    <div class="bottom-button-max-box">
      <p></p>
      <p class="reset-button-one">取消</p>
      <p class="add-button-two-90">保存</p>
      <p class="inquire-button-one">提交</p>
    </div>
  </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  export default {
    name: 'addPage',
    data(){
      return{
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        //新增-编辑
        addType:true,
        imgType:1,
        options:[{value:'zhinan',label:'指南',children:[{value:'shejiyuanze',label:'设计原则',children:[{value:'yizhi',label:'一致'},{value:'fankui',label:'反馈'},{value:'xiaolv',label:'效率'},{value:'kekong',label:'可控'}]},{value:'daohang',label:'导航',children:[{value:'cexiangdaohang',label:'侧向导航'},{value:'dingbudaohang',label:'顶部导航'}]}]},{value:'zujian',label:'组件',children:[{value:'basic',label:'Basic',children:[{value:'layout',label:'Layout 布局'},{value:'color',label:'Color 色彩'},{value:'typography',label:'Typography 字体'},{value:'icon',label:'Icon 图标'},{value:'button',label:'Button 按钮'}]},{value:'form',label:'Form',children:[{value:'radio',label:'Radio 单选框'},{value:'checkbox',label:'Checkbox 多选框'},{value:'input',label:'Input 输入框'},{value:'input-number',label:'InputNumber 计数器'},{value:'select',label:'Select 选择器'},{value:'cascader',label:'Cascader 级联选择器'},{value:'switch',label:'Switch 开关'},{value:'slider',label:'Slider 滑块'},{value:'time-picker',label:'TimePicker 时间选择器'},{value:'date-picker',label:'DatePicker 日期选择器'},{value:'datetime-picker',label:'DateTimePicker 日期时间选择器'},{value:'upload',label:'Upload 上传'},{value:'rate',label:'Rate 评分'},{value:'form',label:'Form 表单'}]},{value:'data',label:'Data',children:[{value:'table',label:'Table 表格'},{value:'tag',label:'Tag 标签'},{value:'progress',label:'Progress 进度条'},{value:'tree',label:'Tree 树形控件'},{value:'pagination',label:'Pagination 分页'},{value:'badge',label:'Badge 标记'}]},{value:'notice',label:'Notice',children:[{value:'alert',label:'Alert 警告'},{value:'loading',label:'Loading 加载'},{value:'message',label:'Message 消息提示'},{value:'message-box',label:'MessageBox 弹框'},{value:'notification',label:'Notification 通知'}]},{value:'navigation',label:'Navigation',children:[{value:'menu',label:'NavMenu 导航菜单'},{value:'tabs',label:'Tabs 标签页'},{value:'breadcrumb',label:'Breadcrumb 面包屑'},{value:'dropdown',label:'Dropdown 下拉菜单'},{value:'steps',label:'Steps 步骤条'}]},{value:'others',label:'Others',children:[{value:'dialog',label:'Dialog 对话框'},{value:'tooltip',label:'Tooltip 文字提示'},{value:'popover',label:'Popover 弹出框'},{value:'card',label:'Card 卡片'},{value:'carousel',label:'Carousel 走马灯'},{value:'collapse',label:'Collapse 折叠面板'}]}]},{value:'ziyuan',label:'资源',children:[{value:'axure',label:'Axure Components'},{value:'sketch',label:'Sketch Templates'},{value:'jiaohu',label:'组件交互文档'}]}],
        addForm:{
          data1:"asdasdasd",
          data5:0,
          data6:0,
          rectificationList:[
            {
              lookType:true,
              imgList:[],
            }
          ],
        },
        //上传用名称保存
        upDataName:"",
        // 表单校验
        rules: {
          list1: [
            { required: true, message: "请选择隐患等级", trigger: "change" },
          ],
          list2: [
            { required: true, message: "请选择检查项目", trigger: "change" },
          ],
          list4: [
            { required: true, message: "请输入隐患描述", trigger: "change" },
            { required: true, message: "请输入隐患描述", validator: this.spaceJudgment, trigger: "change" },
          ],
        },
      }
    },
    created(){},
    mounted(){},
    methods:{
      //返回事件
      outButton(){
        this.$parent.goAddPage(1);
      },
      // 删除图片
      delImg(index,imgIndex){
        this.addForm.rectificationList[index].imgList.splice(imgIndex,1);
      },
      //收起/展开
      dataLookButton(item){
        item.lookType = !item.lookType
      },
      //新增检查
      addObject(){
        if(this.addForm.rectificationList.length<10){
          let obj = {
            lookType:true,
            imgList:[],
          };
          this.addForm.rectificationList.push(obj);
        }
      },/*==========上传相关==========*/
      handleAvatarSuccess(res,item) {
        if(item.imgList.length>4){
          this.msgError('最多只可上传5张')
          return
        }
        let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
        //判断文件名中是否有逗号和分号
        if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
        }else{
          this.msgError('文件名里包含逗号或分号，请修改后重新上传！')
          return
        }
        let obj ={
          name:this.upDataName,
          url:res.data.url,
        };
        item.imgList.push(obj);
        this.$forceUpdate()
      },
      beforeAvatarUpload(file,item) {
        if(item.imgList.length>4){
          this.msgError('最多只可上传5张')
          return false
        }
        let type = false;
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif' || file.type == 'image/bmp') {
          if(file.size> 2000000){
            this.msgError('上传图片大小不能超过2M')
            return false
          }
          this.upDataName = file.name;
          type = true;
        }else{
          this.msgError('png/jpeg/gif格式')
          type = false;
        }
        return type;
      },
    }
  }
</script>

<style scoped lang="scss">
  .selfInspectionManagement-addPage{
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    *{
      font-weight:500;
    }
    .title-max-box{
      position: relative;
      height:90px;
      display: flex;
      border-bottom:1px solid #dedede;
      .title-p{
        flex:1;
        color:#0045AF;
        margin-left:64px;
        line-height:90px;
        font-size:16px;
      }
      .title-button{
        width:70px;
        margin:24px 31px;
      }
      .position-img{
        width:80px;
        height:80px;
        position: absolute;
        top:0;
        left:0;
      }
    }
    .content-max-box{
      flex:1;
      display: flex;
      flex-direction: column;
      .top-form-box{
        padding:40px 85px 20px;
        display: flex;
        .top-form-left-box{
          height:317px;
          width:770px;
          margin-right:90px;
        }
        .top-form-right-box{
          height:317px;
          width:534px;

        }
      }
      .bottom-form-box{
        .bottom-form-title-box{
          background: #F5F5F5;
          display: flex;
          margin-bottom:31px;
          p{
            font-size:16px;
            line-height:50px;
          }
          p:nth-child(1){
            color:#333;
            margin-left:30px;
            flex:1;
          }
          p:nth-child(2){
            color:#0183FA;
            margin-right:37px;
          }
        }
        .add-bottom-button{
          cursor: pointer;
          color:#0183FA;
          border-radius:4px;
          border:1px dashed #0183FA;
          width:800px;
          line-height:40px;
          text-align: center;
          font-size:14px;
          margin: 20px auto;
        }
      }
    }
    .for-max-big-box{
      border:1px solid #dedede;
      overflow: hidden;
      margin:0 81px;
      .for-title-box{
        display: flex;
        background: #F5F5F5;
        border-bottom:1px solid #dedede;
        line-height:50px;
        .for-title-p{
          color:#333333;
          font-size:16px;
          margin-left: 30px;
          flex:1;
        }
        .for-del-box{
          color:#0183FA;
          margin-left:46px;
          cursor: pointer;
          display: flex;
          p{
            font-size:14px;
            line-height:50px;
            margin-right:8px;
          }
        }
        .for-button-box{
          color:#0183FA;
          margin-left:46px;
          margin-right:43px;
          cursor: pointer;
          display: flex;
          p{
            font-size:14px;
            line-height:50px;
            margin-right:8px;
          }
        }
      }
      .for-big-box{
        height:540px;
        padding-top:27px;
        .up-img-p{
          height:80px;
          width:80px;
          line-height:80px;
          text-align: center;
          font-size:16px;
          border-radius:4px;
          border:1px dashed #E0E0E0;
        }
        .for-img-box{
          width:80px;
          height:80px;
          border-radius:4px;
          display: inline-block;
          overflow: hidden;
          margin-right:20px;
          position: relative;
          .for-img{
            width:80px;
            height:80px;
            display: inline-block;
            overflow: hidden;
          }
          .for-del-button{
            background: rgba(0,0,0,0.7);
            width:20px;
            height:20px;
            line-height: 20px;
            text-align: center;
            color:#fff;
            border-bottom-left-radius:4px;
            cursor: pointer;
            position: absolute;
            top:0;
            right:0;
          }
        }
      }
    }
    .bottom-button-max-box{
      height:80px;
      display: flex;
      border-top:1px solid #dedede;
      p{
        margin-top:20px;
      }
      p:nth-child(1){
        flex:1;
      }
      p:nth-child(2){
        width:90px;
        margin-right:20px;
      }
      p:nth-child(3){
        width:90px;
        margin-right:20px;
      }
      p:nth-child(4){
        width:90px;
        margin-right:20px;
      }
    }
  }
  ::v-deep .is-disabled{
    .el-input__inner{
      background-color: #f5f5f5;
      color: #333;
      border-color: #f5f5f5;
      cursor:auto;
    }
  }
</style>