FE-V2-PC/src/views/secureAccess/approval_handle/addPage.vue

<!--安全准入办理-->
<template>
  <div class="addPage approval_handle_addPage">
    <div class="top-title-box">
      <p>准入申请</p>
      <p class="button-p reset-button-one" @click="backPage">返回</p>
    </div>
    <div class="addPage-max-box">
      <el-form :model="form" ref="form" :rules="rules" label-position="left" label-width="100px">
        <div class="addPage-type-one" style="text-align: center" v-if="minType == 1">
          <p class="addPage-type-one-title">实验室安全准入是进入实验室所需的必要手续，为保障您能够顺利申请准入资格，请在申请前请认真阅读以下内容。</p>
          <div style="text-align: left;margin-left:36%">
            <p class="addPage-type-one-title-min">1、您在申请前请提前了解所申请实验室的准入材料并提前准备相应材料；</p>
            <p class="addPage-type-one-title-min">2、为保障您的安全，请在申请准入前认真学习相关实验室知识；</p>
            <p class="addPage-type-one-title-min">3、如您提供的材料涉嫌造假，将会剥夺您的准入申请资格；</p>
            <el-form-item label="申请实验室" prop="subjectId"  >
              <el-select
                style="width:300px;"
                v-model="form.subjectId"
                filterable
                remote
                reserve-keyword
                @change="selectChange"
                placeholder="请输入实验室关键词"
                :remote-method="userSelectList"
                :loading="loading">
                <el-option
                  v-for="item in laboratoryOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="申请期限" prop="dateRange" >
              <el-date-picker
                :clearable="false"
                v-model="dateRange"
                size="small"
                style="width: 300px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                :picker-options="pickerOptions0"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="申请备注" prop="applyCause" >
              <el-input type="textarea" style="width: 300px" v-model="form.applyCause" placeholder="请输入申请备注" maxlength="50" />
            </el-form-item>
          </div>
          <p class="inquire-button-one" style="width:750px;margin:200px 0 0 85px;" @click="typeClick">我已选择实验室，上传准入材料</p>
        </div>
        <!--学生-->
        <div class="addPage-type-two"  v-if="minType == 2&&subjectData.sysUser.userType == '22'">
          <el-form class="item-max-box" :model="queryParams" ref="queryParams" :rules="rules" label-width="80px">
            <div class="item-title-box">
              <p>*</p>
              <p>身份卡</p>
              <p>(关联学生信息材料)</p>
            </div>
            <el-row>
              <el-col :span="6">
                <el-form-item label="申请人" prop="nickName">
                  <el-input v-model="queryParams.nickName"  :disabled="nickNameIs"  placeholder="学生姓名" clearable size="small" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系方式" prop="phonenumber">
                  <el-input v-model="queryParams.phonenumber"  :disabled="phonenumberIs" placeholder="联系方式" clearable size="small" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="学号" prop="userName">
                  <el-input v-model="queryParams.userName"  :disabled="userNameIs" placeholder="学号" clearable size="small" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="物理卡号" prop="cardNum">
                  <el-input v-model="queryParams.cardNum" :disabled="cardNumIs" placeholder="物理卡号" clearable size="small" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="班级" prop="grade">
                  <el-input v-model="queryParams.grade" :disabled="gradeIs" maxlength="10"  placeholder="班级" clearable size="small" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="导师" prop="tutorUserId"  class="form-item">
                  <el-select
                    :disabled="tutorUserIdIs"
                    style="width:175px;"
                    v-model="queryParams.tutorUserId"
                    filterable
                    remote
                    clearable
                    reserve-keyword
                    placeholder="请输入至少2个字符搜索相关人员"
                    :remote-method="selectUserListByName"
                    :loading="loading">
                    <el-option
                      v-for="item in optionsUser"
                      :key="item.userId"
                      :label="item.nickName"
                      :value="item.userId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div v-for="(item,index) in subjectData.listStudent" :key="index">
            <div class="item-max-box" v-if="item.materialType==2&&item.relationType==2">
              <div class="item-title-box">
                <p>*</p>
                <p>安全考试证书</p>
                <p>(已同步证书信息)：</p>
              </div>
              <img v-if="subjectData.listcert[0]" class="item-img-box" :src="subjectData.listcert[0].cert_url">
              <p v-if="!subjectData.listcert[0]" style="margin-left:40px;color:#999;font-size:14px;">暂无证书</p>
            </div>
            <div class="item-max-box" v-if="item.materialType==1">
              <div class="item-title-box">
                <p>*</p>
                <p>{{item.materialName}}：</p>
                <p></p>
              </div>
              <p class="item-title-text">{{item.materialDescribe}}</p>
              <el-form-item label="" prop="userIds" label-width="0">
                <div class="item-input-box">
                  <input type="text" v-model="form.proveImg" disabled :placeholder="item.materialName">
                  <el-upload
                    class="avatar-uploader"
                    :action="uploadImgUrl"
                    :show-file-list="false"
                    accept=".jpeg,.gif,.png,.pdf,.doc,.docx"
                    :on-success="(res)=>handleAvatarSuccess(res,item)"
                    :headers="headers"
                    :before-upload="beforeAvatarUpload">
                    <p class="inquire-button-one">上传</p>
                  </el-upload>
                </div>


<!--                <div style="color: #999;padding-left: 12px;">此处为准入条件中的材料备注</div>-->

                <div class="item-input-for-box">
                  <!--循环-->
                  <div class="item-input-for-big" v-for="(minItem,minIndex) in item.upList" :key="minIndex">
                    <div class="item-input-for-min">
                      <p>{{minItem.name}}</p>
<!--                      <a class="file_list_look" :href="minItem.url" target="_blank">查看</a>-->
                      <i style="font-style:normal;"  @click="lookFile(minItem.url)">查看</i>
                      <i style="font-style:normal;" @click="delUpData(item,minIndex)">删除</i>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>

        </div>
        <!--老师-->
        <div class="addPage-type-two" v-if="minType == 2&&subjectData.sysUser.userType == '11'" v-for="(item,index) in subjectData.listTeacher" :key="index">
          <div class="item-max-box" v-if="item.materialType==2&&item.relationType==1">
            <div class="item-title-box">
              <p>*</p>
              <p>身份卡</p>
              <p>(关联教职工信息材料)：</p>
            </div>
            <div class="item-user-box">
              <div>
                <p>姓名：</p>
                <p>{{subjectData.sysUser.nickName}}</p>
              </div>
              <div>
                <p>工号：</p>
                <p>{{subjectData.sysUser.userName}}</p>
              </div>
              <div>
                <p>学院：</p>
                <p>{{subjectData.sysUser.dept.deptName}}</p>
              </div>
            </div>
          </div>
          <div class="item-max-box" v-if="item.materialType==1">
            <div class="item-title-box">
              <p>*</p>
              <p>{{item.materialName}}：</p>
              <p></p>
            </div>
            <p class="item-title-text">{{item.materialDescribe}}</p>
            <el-form-item label="" prop="userIds" label-width="0">
              <div class="item-input-box">
                <input type="text" v-model="form.proveImg" disabled :placeholder="item.materialName">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadImgUrl"
                  :show-file-list="false"
                  :on-success="(res)=>handleAvatarSuccess(res,item)"
                  :headers="headers"
                  :before-upload="beforeAvatarUpload">
                  <p class="inquire-button-one">上传</p>
                </el-upload>
              </div>
              <div class="item-input-for-box">
                <!--循环-->
                <div class="item-input-for-big" v-for="(minItem,minIndex) in item.upList" :key="minIndex">
                  <div class="item-input-for-min">
                    <p>{{minItem.name}}</p>
                    <img src="@/assets/newImages/off.png" @click="delUpData(item,minIndex)">
                  </div>
                </div>
              </div>
            </el-form-item>
          </div>
        </div>
        <p v-if="minType == 2" class="inquire-button-one" style="width:750px;margin:50px 0 50px 85px;" @click="upDataButton">准入材料上传完毕，提交申请</p>
      </el-form>
    </div>
    <el-image  style=" width: 10px;height: 10px;visibility: hidden;" ref="preview"  :src="url"  :preview-src-list="srcList"> </el-image>
  </div>
</template>

<script>
  let Base64 = require('js-base64').Base64;
  import { mapGetters } from 'vuex'
  import { getToken } from "@/utils/auth";
  import { materialApply,subjectList,materialAdd,materialUpdate,selectUserListByName} from "@/api/laboratory/approval";
  export default {
    name: "addPage",
    props:{
      infoData: {},
      infoType:{},
    },
    data() {
      return {
        url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList:[ 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'],


        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 设置只能选择当前日期及之后的日期
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
          }
        },
        loading:false,
        minType:1,
        laboratoryOptions:[],
        form:{
          validTime:12,
          subjectId:"",
          subjectName:"",
          validBegin_time:"",//开始时间
          validEnd_time:"",//结束时间
          applyCause:"",//备注
        },
        dateRange:[],
        // 表单校验
        rules: {
          validTime: [
            { required: true, message: "请选择资格有效期", trigger: "blur" }
          ],
          subjectId: [
            { required: true, message: "请选择实验室", trigger: "blur" }
          ],
          chName: [
            { required: true, message: "请输入标题", trigger: "blur" },
            { required: true, message: "请输入标题", validator: this.spaceJudgment, trigger: "blur" }
          ],
          code: [
            { required: true, message: "请输入编号", trigger: "blur" },
            { required: true, message: "请输入编号", validator: this.spaceJudgment, trigger: "blur" }
          ],
          content: [
            { required: true, message: "请编辑详情", trigger: "change" },
            { required: true, message: "请编辑详情", validator: this.spaceJudgment, trigger: "blur" }
          ],
       /*   applyCause: [
            { required: true, message: "请输入备注", trigger: "blur" }
          ],*/
          dateRange: [
            {type: '', required: true, message: "请选择申请期限", trigger: '  ' }
          ],
          /*身份卡信息校验*/
          nickName: [
            { required: true, message: "请输入学生姓名", trigger: "change" },
            { required: true, message: "请输入学生姓名", validator: this.spaceJudgment, trigger: "blur" }
          ],
          phonenumber: [
            { required: true, message: "请输入联系方式", trigger: "change" },
            { required: true, message: "请输入联系方式", validator: this.spaceJudgment, trigger: "blur" }
          ],
          userName: [
            { required: true, message: "请输入学号", trigger: "change" },
            { required: true, message: "请输入学号", validator: this.spaceJudgment, trigger: "blur" }
          ],
          cardNum: [
            { required: true, message: "请输入物理卡号", trigger: "change" },
            { required: true, message: "请输入物理卡号", validator: this.spaceJudgment, trigger: "blur" }
          ],
          tutorUserId: [
            { required: true, message: "请输入导师", trigger: "change" },
            { required: true, message: "请输入导师", validator: this.spaceJudgment, trigger: "blur" }
          ],
          grade: [
            { required: true, message: "请输入班级", trigger: "change" },
            { required: true, message: "请输入班级", validator: this.spaceJudgment, trigger: "blur" }
          ],

        },
        subject:{},
        //实验室准入条件
        subjectData:{},
        upDataName:"",
        queryParams:{

        },
        nickNameIs:false,
        phonenumberIs:false,
        userNameIs:false,
        cardNumIs:false,
        tutorUserIdIs:false,
        gradeIs:false,

        optionsUser:[],
        remark:'1',
      };
    },
    computed: {
      ...mapGetters([
        "name"
      ]),
    },
    created() {

      if(this.infoType){
        console.log("重新审核");
        this.remark='';
        this.form.subjectId = this.infoData.labSecurityApply.subjectId;
        console.log(this.infoData)
        this.getApproval();
      }
    },
    methods: {

      //查看
      lookFile(item){
        console.log(item)

        var originUrl = window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress()+'/admin/'+item; //要预览文件的访问地址

        window.open(localStorage.getItem('filePreviewUrl') + '/onlinePreview?url='+encodeURIComponent(Base64.encode(originUrl)));
      },
      /** 导师-懒加载 */
      selectUserListByName(query) {
        if (query !== '' && query.length>1) {
          let obj={
            nickName:query,
            userType:'11',
          }
          selectUserListByName(obj).then(response => {
            this.optionsUser = response.data;
          });
        } else {
          this.optionsUser = [];
        }
      },
      materialUpdate(obj){
        materialUpdate(obj).then(response => {
          this.msgSuccess("提交成功");
          this.$parent.pageClick(1);
        })
      },
      materialAdd(obj){
        materialAdd(obj).then(response => {
          this.msgSuccess("提交成功");
          this.$parent.pageClick(1);
        })
      },
      //提交按钮
      upDataButton(){
        let self = this;
        this.$refs["queryParams"].validate(valid => {
          if (valid) {
            if(this.dateRange&&this.dateRange.length>0){
              this.form.validBegin_time=this.dateRange[0]
              this.form.validEnd_time=this.dateRange[1]
            }else{
              this.form.validBegin_time=null;
              this.form.validEnd_time=null
            }
            let sysUser={
                  nickName:this.queryParams.nickName,
                  phonenumber:this.queryParams.phonenumber,
                  userName:this.queryParams.userName,
                  cardNum:this.queryParams.cardNum,
                  tutorUserId:this.queryParams.tutorUserId,
                  grade:this.queryParams.grade,
                  tutorUserName:this.queryParams.tutorUserName,
                  userId:this.queryParams.userId,
              };
            let obj = {
              subjectAdminid:this.subjectData.fzrsysUser[0].user_id,
              userNumber:this.subjectData.sysUser.userName,//学号/工号
              userMajor:this.subjectData.sysUser.major,//专业
              deptId:this.subject.deptId, //NULL部门id
              deptName:this.subject.deptName, //NULL部门名称
              subjectId:this.subject.id, //NULL实验室id
              subjectName:this.subject.name, //NULL实验室名称
              auditStatus:"0", //NULL审核状态 0待审核 1驳回 2通过
              //validLength:this.form.validTime, //NULL有效期 月份时长
              mrList:[],//上传资料
              sysUser:sysUser,//身份卡用户信息
              validBeginTime:this.form.validBegin_time,//申请期限开始时间
              validEndTime:this.form.validEnd_time,//申请期限结束时间
              applyCause:this.form.applyCause,//申请备注

            };
            if(this.subjectData.sysUser.userType == '22'){
              for(let i=0;i<self.subjectData.listStudent.length;i++){
                if(self.subjectData.listStudent[i].materialType==1){
                  if(!self.subjectData.listStudent[i].upList[0]){
                    this.msgError(self.subjectData.listStudent[i].materialName+"未上传");
                    return
                  }else{
                    let upData = {
                      materialId:self.subjectData.listStudent[i].id,
                      dataName:self.subjectData.listStudent[i].materialName,
                      dataDescribe:self.subjectData.listStudent[i].materialDescribe,
                      dataUrl:"",
                    };
                    for(let o=0;o<self.subjectData.listStudent[i].upList.length;o++){
                      upData.dataUrl = upData.dataUrl + self.subjectData.listStudent[i].upList[o].name + ';' + self.subjectData.listStudent[i].upList[o].url + ',';
                    }
                    obj.mrList.push(upData);
                  }
                }
              }
            }else if(this.subjectData.sysUser.userType == '11'){
              for(let i=0;i<self.subjectData.listTeacher.length;i++){
                if(self.subjectData.listTeacher[i].materialType==1){
                  if(!self.subjectData.listTeacher[i].upList[0]){
                    this.msgError(self.subjectData.listTeacher[i].materialName+"未上传");
                    return
                  }else{
                    let upData = {
                      materialId:self.subjectData.listTeacher[i].id,
                      dataName:self.subjectData.listTeacher[i].materialName,
                      dataDescribe:self.subjectData.listTeacher[i].materialDescribe,
                      dataUrl:"",
                    };
                    for(let o=0;o<self.subjectData.listTeacher[i].upList.length;o++){
                      upData.dataUrl = upData.dataUrl + self.subjectData.listTeacher[i].upList[o].name + ';' + self.subjectData.listTeacher[i].upList[o].url + ',';
                    }
                    obj.mrList.push(upData);
                  }
                }
              }
            }
            if(this.infoType){
              obj.id = this.infoData.labSecurityApply.id;
              this.materialUpdate(obj);
            }else{
              this.materialAdd(obj);
            }
          }
        })

      },
      //删除对应资料
      delUpData(item,index){
        console.log("item",item);
        console.log("index",index);
        item.upList.splice(index,1);
        this.$forceUpdate()
      },
      //查看对应资料
      lookUpData(item,index){
        this.$refs.preview.showViewer = true
        console.log('查看')
        console.log("item",item);
        console.log("index",index);

       // this.$forceUpdate()
      },

      //上传相关
      handleAvatarSuccess(res, item) {
        console.log('resresresresresresresres',res);
        console.log('itemitemitemitemitemitemitemitemitem',item);
        if(item.upList.length>4){
          this.msgError('已到达上传数量上限')
          return
        }
        let suffix= this.upDataName.split('.')[this.upDataName.split('.').length - 1]
        let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
        //判断文件名中是否有逗号和分号
        if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
        }else{
          this.$message.info('文件名里包含逗号或分号，请修改后重新上传！')
          return
        }
        let fileTypeArr= item.fileType.split(',')
        let strArr = [];
        fileTypeArr.forEach(function (item){
          if(item=='1'){
            strArr.push('pdf')
          }else if(item=='2'){
            strArr.push('doc','docx')
          }else if(item=='3'){
            strArr.push('png','jpg','gif')
          }
        })
        if(strArr.indexOf(suffix)==-1){
          console.log('请上传'+strArr.join(',')+'格式文件')
          this.$message.error('请上传'+strArr.join(',')+'格式文件');
        }else{
          console.log('上传')
          let obj ={
            name:this.queryParams.nickName+item.materialName+'.'+this.upDataName.split('.')[this.upDataName.split('.').length - 1],
            url:res.data.url,
          };
          item.upList.push(obj);
          // this.form.cover = res.data.url;
          this.$forceUpdate()

        }
      },
      beforeAvatarUpload(file) {
        //学生名称+文件名称
        // console.log('file',file);
        // console.log('name',this.name);
        let type = false;

        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif'|| file.type == 'application/pdf' || file.type == 'application/msword' || file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
          this.upDataName = file.name;

          type = true;
        }else{
          this.$message.error('只能上传png/jpeg/gif/doc/docx格式');
          type = false;
        }
        return type;
      },
      //实验室选择
      selectChange(e){
        let self = this;
        for(let i=0;i<self.laboratoryOptions.length;i++){
          if(self.laboratoryOptions[i].id == e){
            this.$set(this,"subject",self.laboratoryOptions[i]);
          }
        }
        this.$set(this.form,"subjectId",e);
      },
      //获取当前实验室准入配置
      getApproval(){
        let self = this;
        materialApply({subjectId:this.form.subjectId,remark:this.remark,beginTime:this.dateRange[0],endTime:this.dateRange[1]}).then(response => {
        /*  if(response.data.sysUser.userType!='11'&&response.data.sysUser.userType!='22'){
            this.msgError("您不是学生也不是教职工,无法申请准入");
            return
          }*/
          if(response.data.sysUser.userType!='22'){
            this.msgError("您不是学生,无法申请准入");
            return
          }

          if(response.data.sysUser.userType == '11'){
            if(!response.data.listTeacher[0]){
              this.msgError("该实验室未设置准入条件")
              return
            }
          }
          if(response.data.sysUser.userType == '22'){
            if(!response.data.listStudent[0]){
              this.msgError("该实验室未设置准入条件")
              return
            }
          }
          if(response.data.listStudent){
            for(let i=0;i<response.data.listStudent.length;i++){
              if(response.data.listStudent[i].materialType == 1){
                response.data.listStudent[i].upList = [];
              }
            }
          }
          if(response.data.listTeacher){
            for(let i=0;i<response.data.listTeacher.length;i++){
              if(response.data.listTeacher[i].materialType == 1){
                response.data.listTeacher[i].upList = [];
              }
            }
          }
          this.subjectData = response.data;
          this.queryParams=response.data.sysUser;//个人信息
          //循环判断是否有值禁用
          console.log(this.queryParams)
             if(this.queryParams.nickName){
                this.nickNameIs=true;
              }
             if(this.queryParams.phonenumber){
                this.phonenumberIs=true;
              }
             if(this.queryParams.userName){
                this.userNameIs=true;
              }
             if(this.queryParams.cardNum){
                this.cardNumIs=true;
              }
             if(this.queryParams.tutorUserId){
                this.tutorUserIdIs=true;
              }
             if(this.queryParams.grade){
                this.gradeIs=true;
              }


        /*  if(this.queryParams.adminId){
            this.$set(this.form,'adminId',this.queryParams.adminId)
            this.userSelectList(this.queryParams.adminName);
          }*/

          if(this.queryParams.tutorUserId){
            this.$set(this.queryParams,'tutorUserId',this.queryParams.tutorUserId)
            this.selectUserListByName(this.queryParams.tutorUserName);
          }
          this.minType = 2;
          if(this.infoType){
            this.form.validTime = this.infoData.labSecurityApply.validLength;
            for(let i=0;i<self.infoData.listTemp.length;i++){
              if(self.infoData.listTemp[i].materialType == 1){
                if(self.subjectData.sysUser.userType == '11'){
                  for(let o=0;o<self.subjectData.listTeacher.length;o++){
                    if(self.subjectData.listTeacher[o].materialType == 1 && self.subjectData.listTeacher[o].id == self.infoData.listTemp[i].id){
                      self.subjectData.listTeacher[o].upList = JSON.parse(JSON.stringify(self.infoData.listTemp[i].upList));
                    }
                  }
                }else if(self.subjectData.sysUser.userType == '22'){
                  for(let o=0;o<self.subjectData.listStudent.length;o++){
                    if(self.subjectData.listStudent[o].materialType == 1 && self.subjectData.listStudent[o].id == self.infoData.listTemp[i].id){
                      // self.subjectData.listStudent[o].upList = JSON.parse(JSON.stringify(self.infoData.listTemp[i].listMr));
                      self.subjectData.listStudent[o].upList = JSON.parse(JSON.stringify(self.infoData.listTemp[i].upList));
                    }
                  }
                }
              }
            }
          }
        });
      },
      //状态切换
      typeClick(){
        if(!this.form.subjectId){
          this.msgError("请选择实验室");
          return
        }
        if(this.dateRange.length<=0){
          this.msgError("请选择申请期限");
          return
        }
        /*if(!this.form.applyCause){
          this.msgError("请输入申请备注");
          return
        }*/
        this.getApproval();
      },
      //返回
      backPage(){
        this.$parent.pageClick(1);
      },
      //懒加载
      userSelectList(e){
        subjectList({name:e}).then(response => {
          this.laboratoryOptions = response.data;
        });
      },
    }
  };
</script>

<style scoped lang="scss">
  .addPage {
    flex:1;
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    border-radius:10px;
    .top-title-box{
      display: flex;
      border-bottom: 1px solid #E0E0E0;
      padding-top:20px;
      p:nth-child(1){
        flex: 1;
        line-height:60px;
        color: #0045AF;
        font-size:18px;
        margin:0 0 0 40px;
      }
      p:nth-child(2){
        margin-right:20px;
      }
    }
    .addPage-max-box{
      flex:1;
      padding:20px 20px 20px!important;
      .addPage-type-one{
        .addPage-type-one-title{
          font-size:16px;
          font-weight:700;
          line-height:18px;
          margin:26px 38px;
        }
        .addPage-type-one-title-min{
          font-size:14px;
          line-height:16px;
          margin:20px 62px 20px 0;
          color:#666666;
        }
      }
      .addPage-type-two{
        p{
          margin:0;
        }
        .item-max-box{
          margin-left:58px;
          .item-title-box{
            display: flex;
            p{
              font-size:16px;
              line-height:80px;
            }
            p:nth-child(1){
              color:red;
              margin-right:10px;
            }
            p:nth-child(2){
              color:#333;
            }
            p:nth-child(3){
              color:#999;
            }
          }
          .item-user-box{
            display: flex;
            margin-left:15px;
            div{
              display: flex;
              margin-right:60px;
              p{
                font-size:14px;
              }
              p:nth-child(1){
                color:#999;
              }
              p:nth-child(2){
                color:#666;
              }
            }
          }
          .item-title-text{
            margin-left:15px;
            font-size:14px;
            line-height:20px;
            color:#999;
          }
          .item-input-box{
            display: flex;
            margin:20px 0 0 15px;
            input{
              width:390px;
              height:40px;
              padding:0 20px;
              margin-right:20px;
            }
          }
          .item-input-for-box{
            margin:20px 0 0 5px;
            .item-input-for-big{
              display: inline-block;
              border-radius:6px;
              background: rgba(1,131,250,0.2);
              margin:0 10px 10px;
              .item-input-for-min{
                display: flex;
                p{
                  flex:1;
                  padding:0 20px;
                  margin:0;
                  line-height:30px;
                  color:#0183FA;
                }
                i{
                  line-height:30px;
                  color:#0183FA;
                  margin-right: 8px;
                  cursor: pointer;
                }
                a{
                  line-height:30px;
                  color:#0183FA;
                  margin-right: 8px;
                  cursor: pointer;
                }
                img{
                  width:16px;
                  height:16px;
                  margin:7px 7px;
                  cursor: pointer;
                }
              }
            }
          }
          .item-img-box{
            width:240px;
            margin-left:15px;
          }
        }
      }
    }
  }
  /*点击查看图片预览*/
/*  .my-img {
    width: 10px;
    height: 10px;
    visibility: hidden;
  }*/
</style>