FE-V2-PC/src/views/comprehensive/laboratoryManagement/timingExhaustAir/addPage.vue

<template>
    <div class="timingExhaustAirAddPage">
      <div class="top-title-box">
        <p>{{propsData.id?'编辑':'新增'}}定时排风任务 </p>
        <p class="add-button-one-90" @click="backPage">返回</p>
      </div>
      <div class="content-max-big-box scrollbar-box">
        <el-form :model="formData" ref="upForm" :rules="rules">
          <el-form-item label="任务名称" prop="taskName" class="form-item" label-width="80px">
            <el-input
              style="width:500px;"
              maxlength="20"
              show-word-limit
              v-model="formData.taskName"
              placeholder="输入定时排风任务名称"
              clearable
              size="small"
            />
          </el-form-item>
          <div class="form-time-box" v-for="(item,index) in formData.exhaustPeriodVoList" :key="index">
            <el-form-item :label="index == 0 ?'排风时段':''" class="form-item" label-width="80px"
                          :rules="rules.beginTime" :prop="'exhaustPeriodVoList.'+ index +'.beginTime'">
              <el-time-select
                style="width:200px;"
                placeholder="请选择"
                v-model="item.beginTime"
                :picker-options="{
                start: '00:00',
                step: '00:30',
                end: '24:00'
              }">
              </el-time-select>
            </el-form-item>
            <p style="width:48px;text-align: center">至</p>
            <el-form-item label="" class="form-item" label-width="0px"
                          :rules="rules.endTime" :prop="'exhaustPeriodVoList.'+ index +'.endTime'">
              <el-time-select
                style="width:200px;"
                placeholder="请选择"
                v-model="item.endTime"
                :picker-options="{
                start: '00:00',
                step: '00:30',
                end: '24:00'
              }">
              </el-time-select>
            </el-form-item>
            <el-form-item label="" class="form-item" label-width="0px" style="margin:0 40px;">
              <el-radio-group v-model="item.timedType">
                <el-radio :label="1">工作日（周一至周五）</el-radio>
                <el-radio :label="2">周（周一至周日）</el-radio>
                <el-radio :label="3">自定义</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="" class="form-item" label-width="0px" v-if="item.timedType==3" style="margin-right:20px;"
                          :rules="rules.customTime" :prop="'exhaustPeriodVoList.'+ index +'.customTime'">
              <el-select v-model="item.customTime" multiple placeholder="请选择"
                         style="width: 350px;">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <i class="el-icon-delete del-button-i" v-if="formData.exhaustPeriodVoList[1]" @click="timeListDelObj(index)"></i>
          </div>
          <p class="add-button-on" @click="timeListAddObj">+  新增排风时段</p>
          <div class="form-time-box">
            <div class="form-title-box">
              <span v-show="formData.executionDateVoList[1]">*</span>
              <span v-show="!formData.executionDateVoList[1]"></span>
              <p class="form-title-p">执行日期</p>
              <div class="festival-box" @click="festivalButton" v-if="festival[0]">
                <img src="@/assets/ZDimages/personnelManagement/icon_xzqx_zc.png" v-if="formData.executionDateType!=1">
                <img src="@/assets/ZDimages/personnelManagement/icon_xzqx_xz.png" v-if="formData.executionDateType==1">
                <p>节假日不执行排风</p>
              </div>
              <p class="form-title-text" v-if="festival[0]">不指定排风日期表示所有日期均执行排风</p>
              <p class="form-title-text" v-if="!festival[0]">无法通过网络获取节假日，请手动填写排风日期并排除节假日。</p>
            </div>
          </div>
          <div class="form-period-max-box">
            <div class="form-period-box" v-for="(item,index) in formData.executionDateVoList">
              <div class="form-period-min-box">
                <el-form-item label="" class="form-item" label-width="0px" style="margin-right:8px;"
                              :rules="rules.dateRange" :prop="'executionDateVoList.'+ index +'.dateRange'">
                  <el-date-picker
                    @change="festivalButtonPicker"
                    :clearable="false"
                    v-model="item.dateRange"
                    style="width: 448px;height:40px;"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
                <i class="el-icon-circle-plus-outline i-add-button"
                   v-if="index == formData.executionDateVoList.length-1"
                   @click="periodListAddObj"></i>
                <i class="el-icon-delete i-del-button"
                   v-if="formData.executionDateVoList[1]"
                   @click="periodListDelObj(index)"></i>
              </div>
            </div>
            <div class="form-period-box" v-if="!formData.executionDateVoList[0]">
              <div class="form-period-min-box" style="height:79px;">
                <i class="el-icon-circle-plus-outline i-add-button" style="margin-top:17px;"
                   @click="periodListAddObj"></i>
              </div>
            </div>
          </div>
          <el-form-item label="状态" prop="exhaustType" class="form-item" label-width="80px">
            <el-switch
              @click.native="changeIsNeedCaptcha"
              class="switch"
              v-model="formData.exhaustType"
              :active-value="1"
              :inactive-value="0"
              active-color="#0183FA"
              inactive-color="#E0E0E0"
              active-text="启用"
              inactive-text="停用"
              disabled
            ></el-switch>
          </el-form-item>
        </el-form>
        <div class="button-max-box">
          <p></p>
          <p @click="backPage">取消</p>
          <p @click="subButton">确认</p>
          <p></p>
        </div>
      </div>
    </div>
</template>

<script>
  import { exhaust,getHoliday,putExhaust } from "@/api/laboratory/exhaustTime";
  export default {
    name: 'addPage',
    props:{
      propsData:{},
    },
    data() {
      //验证时间段时候重复
      const timeVerification  = (rule, value, callback) => {
        let self = this;
        let index = rule.field.split('.')[1];
        let type = rule.field.split('.')[2]=='beginTime'?'1':(rule.field.split('.')[2]=='endTime'?'2':'');
        let oneList = [];
        let towList = [];
        for(let i=0;i<self.PeriodVerificationProcessing.length;i++){
          if(i == index){
            oneList = oneList.concat(self.PeriodVerificationProcessing[i])
          }else{
            towList = towList.concat(self.PeriodVerificationProcessing[i]);
          }
        }
        //验证时间顺序
        let age = 0;
        for(let i=0;i<oneList.length;i++){
          if(oneList[i].beginTime >= oneList[i].endTime){
            age++
          }
        }
        if(age != 0){
          callback(new Error("开始时间不能大于等于结束时间"));
        }
        //验证时间重复
        if(self.PeriodVerificationProcessing[1]){
          let num = 0;
          for(let i=0;i<oneList.length;i++){
            for(let o=0;o<towList.length;o++){
              if (type == 1){
                if(oneList[i].beginTime >= towList[o].beginTime &&
                  oneList[i].beginTime <= towList[o].endTime ){
                  num++
                }
              }else if(type == 2){
                if(oneList[i].endTime >= towList[o].beginTime &&
                  oneList[i].endTime <= towList[o].endTime ){
                  num++
                }
              }
            }
          }
          if(num != 0){
            callback(new Error("时间段不能重复"));
          }else{
            callback()
          }
        }else{
          callback()
        }
      };
      const dateVerification = (rule, value, callback) =>{
        let self = this;
        if(self.formData.executionDateVoList[1]){
          if(value[1]){
            callback()
          }else{
            callback(new Error("请选择执行日期"));
          }
        }
        let index = rule.field.split('.')[1];
        if(!self.DateVerificationProcessing[0]){
          callback()
        }
        let oneList = [];
        let towList = [];
        for(let i=0;i<self.DateVerificationProcessing.length;i++){
          if(i == index){
            oneList.push(self.DateVerificationProcessing[i])
          }else{
            towList.push(self.DateVerificationProcessing[i]);
          }
        }
        //验证时间重复
        if(self.DateVerificationProcessing[1]){
          let num = 0;
          for(let i=0;i<oneList.length;i++){
            for(let o=0;o<towList.length;o++){
              if(oneList[i].beginTime >= towList[o].beginTime &&
                oneList[i].beginTime <= towList[o].endTime ){
                num++
              }
              if(oneList[i].endTime >= towList[o].beginTime &&
                oneList[i].endTime <= towList[o].endTime ){
                num++
              }
            }
          }
          if(num != 0){
            callback(new Error("执行日期不能重复"));
          }else{
            callback()
          }
        }else{
          callback()
        }
      };
      return {
        // 表单校验
        rules: {
          taskName: [
            { required: true, message: "请输入任务名称", trigger: "blur" },
            { required: true, message: "请输入任务名称", validator: this.spaceJudgment, trigger: "blur" },
          ],
          beginTime: [
            { required: true, message: "请选择开始时间", trigger: "blur" },
            { required: true, validator: timeVerification, trigger: "blur" },
          ],
          endTime: [
            { required: true, message: "请选择结束时间", trigger: "blur" },
            { required: true, validator: timeVerification, trigger: "blur" },
          ],
          timedType: [
            { required: true, message: "请选择排风时段", trigger: "blur" }
          ],
          customTime: [
            { required: true, message: "请选择自定义时间", trigger: "blur" },
          ],
          dateRange: [
            { required: true, validator: dateVerification, trigger: "blur" },
          ],
        },
        //周数据
        options: [
          {
            value: '1',
            label: '周一'
          }, {
            value: '2',
            label: '周二'
          }, {
            value: '3',
            label: '周三'
          }, {
            value: '4',
            label: '周四'
          }, {
            value: '5',
            label: '周五'
          }, {
            value: '6',
            label: '周六'
          }, {
            value: '7',
            label: '周日'
          }
        ],
        //表单数据
        formData:{
          taskName:"",
          exhaustType:1,
          exhaustPeriodVoList:[
            {
              beginTime:"",
              endTime:"",
              timedType:1,
              customTime:"",
            },
          ],
          executionDateVoList:[
            {
              dateRange:[],
            }
          ]
        },
        //节日数据
        festival:[],
        //时间段验证数据
        PeriodVerificationProcessing:[],
        //不执行日期验证数据
        DateVerificationProcessing:[],
      }
    },
    created() {
      this.getHoliday();
      if(this.propsData.id){
        let obj = JSON.parse(JSON.stringify(this.propsData))
        let list = [];
        if(obj.executionDateVoList){
          for(let i=0;i<obj.executionDateVoList.length;i++){
            list.push({dateRange:[obj.executionDateVoList[i].beginDate,obj.executionDateVoList[i].endDate]})
          }
        }else{
          list = [{dateRange:[]}];
        }
        obj.executionDateVoList = list;
        this.$set(this,'formData',obj);
      }
    },
    mounted() {

    },
    methods: {
      //时间验证
      timeVerificationProcessing(){
        let self = this;
        let timeNum = 1440;
        let exhaustPeriodVoList = [];
        let executionDateVoList = [];
        //处理时间段验证数据
        for(let i=0;i<self.formData.exhaustPeriodVoList.length;i++){
          let newList = [];
          if(self.formData.exhaustPeriodVoList[i].timedType == 1){
            //周一至周五
            let beginHH = self.accMul(parseInt(self.formData.exhaustPeriodVoList[i].beginTime.split(':')[0]),60);
            let beginMM = parseInt(self.formData.exhaustPeriodVoList[i].beginTime.split(':')[1]);
            let endHH = self.accMul(parseInt(self.formData.exhaustPeriodVoList[i].endTime.split(':')[0]),60);
            let endMM = parseInt(self.formData.exhaustPeriodVoList[i].endTime.split(':')[1]);
            for(let o=0;o<5;o++){
              newList.push({
                beginTime:self.accMul(o,timeNum)+beginHH+beginMM,
                endTime:self.accMul(o,timeNum)+endHH+endMM,
              })
            }
            exhaustPeriodVoList.push(newList);
          }else if(self.formData.exhaustPeriodVoList[i].timedType == 2){
            //周一至周日
            let beginHH = self.accMul(parseInt(self.formData.exhaustPeriodVoList[i].beginTime.split(':')[0]),60);
            let beginMM = parseInt(self.formData.exhaustPeriodVoList[i].beginTime.split(':')[1]);
            let endHH = self.accMul(parseInt(self.formData.exhaustPeriodVoList[i].endTime.split(':')[0]),60);
            let endMM = parseInt(self.formData.exhaustPeriodVoList[i].endTime.split(':')[1]);
            for(let o=0;o<7;o++){
              newList.push({
                beginTime:self.accMul(o,timeNum)+beginHH+beginMM,
                endTime:self.accMul(o,timeNum)+endHH+endMM,
              })
            }
            exhaustPeriodVoList.push(newList);
          }else if(self.formData.exhaustPeriodVoList[i].timedType == 3){
            //自定义时间
            let beginHH = self.accMul(parseInt(self.formData.exhaustPeriodVoList[i].beginTime.split(':')[0]),60);
            let beginMM = parseInt(self.formData.exhaustPeriodVoList[i].beginTime.split(':')[1]);
            let endHH = self.accMul(parseInt(self.formData.exhaustPeriodVoList[i].endTime.split(':')[0]),60);
            let endMM = parseInt(self.formData.exhaustPeriodVoList[i].endTime.split(':')[1]);
            for(let o=0;o<self.formData.exhaustPeriodVoList[i].customTime.length;o++){
              newList.push({
                beginTime:self.accMul(parseInt(self.formData.exhaustPeriodVoList[i].customTime[o])-1,timeNum)+beginHH+beginMM,
                endTime:self.accMul(parseInt(self.formData.exhaustPeriodVoList[i].customTime[o])-1,timeNum)+endHH+endMM,
              })
            }
            exhaustPeriodVoList.push(newList);
          }
        }
        this.$set(this,'PeriodVerificationProcessing',exhaustPeriodVoList);
        //处理不执行日期验证数据
        for(let i=0;i<self.formData.executionDateVoList.length;i++){
          if (self.formData.executionDateVoList[i].dateRange[1]){
            executionDateVoList.push({
              beginTime : Date.parse(new Date(self.formData.executionDateVoList[i].dateRange[0]+' '+'00:00:00'))/1000,
              endTime : Date.parse(new Date(self.formData.executionDateVoList[i].dateRange[1]+' '+'23:59:59'))/1000
            })
          }
        }
        this.$set(this,'DateVerificationProcessing',executionDateVoList);
        return true;
      },
      //提交
      subButton(){
        let self = this;
        if(self.timeVerificationProcessing()){
          self.$refs["upForm"].validate(valid => {
            if (valid) {
              this.$confirm('确认提交?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(function() {
                self.upDataButton();
              }).then(() => {
              }).catch(() => {});
            }
          })
        }
      },
      upDataButton(){
        let newObj = {
          taskName:this.formData.taskName,
          exhaustType:this.formData.exhaustType,
          executionDateType:this.formData.executionDateType,
          exhaustPeriodVoList:this.formData.exhaustPeriodVoList,
          executionDateVoList:this.formData.executionDateVoList
        }
        if(this.formData.id){
          newObj.id = this.formData.id;
        }
        let obj = JSON.parse(JSON.stringify(newObj));
        if(newObj.executionDateVoList[0].dateRange[0]){
          let list = [];
          for(let i=0;i<newObj.executionDateVoList.length;i++){
            list.push({
              beginDate:newObj.executionDateVoList[i].dateRange[0],
              endDate:newObj.executionDateVoList[i].dateRange[1],
            })
          }
          obj.executionDateVoList = list;
        }else{
          obj.executionDateVoList = [];
        }
        for(let i=0;i<obj.exhaustPeriodVoList.length;i++){
          obj.exhaustPeriodVoList[i].customTime = obj.exhaustPeriodVoList[i].customTime+'';
        }
        if(obj.id){
          putExhaust(obj).then( response => {
            this.msgSuccess(response.msg);
            this.$parent.goPage(4,response.data.id);
          });
        }else{
          exhaust(obj).then( response => {
            this.msgSuccess(response.msg);
            this.$parent.goPage(4,response.data.id);
          });
        }
      },
      //启用停用状态切换
      changeIsNeedCaptcha(){
        this.formData.exhaustType = this.formData.exhaustType==1?0:1
      },
      //节日按钮
      festivalButton(){
        let self = this;
        if(this.formData.executionDateType==1){
          this.$set(this.formData,'executionDateType',0)
          this.$set(this.formData,'executionDateVoList',[{dateRange:[]}]);
        }else{
          let num = 0;
          for(let i=0;i<self.formData.executionDateVoList.length;i++){
            if(self.formData.executionDateVoList[i].dateRange[1]){
              num++
            }
          }
          if(num!=0){
            this.$confirm('确认后将覆盖下方录入的排风日期', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              self.$set(self.formData,'executionDateType',1)
              self.dateFormatting();
            }).then(() => {
            }).catch(() => {});
          }else{
            self.$set(this.formData,'executionDateType',1)
            self.dateFormatting();
          }
        }
      },
      //时间变更后重置节假日
      festivalButtonPicker(){
        this.$set(this.formData,'executionDateType',0)
      },
      //添加时段
      periodListAddObj(){
        if(this.formData.executionDateVoList.length<10){
          this.formData.executionDateVoList.push({
            dateRange:[]
          })
          this.$set(this.formData,'executionDateType',0)
        }else{
          this.msgError('最多可以增加10个执行日期')
        }
      },
      //删除时段
      periodListDelObj(index){
        this.formData.executionDateVoList.splice(index,1)
        this.$set(this.formData,'executionDateType',0)
        if(!this.formData.executionDateVoList[1]){
          this.$refs['upForm'].clearValidate('executionDateVoList.'+ '0' +'.dateRange');
        }
      },
      //添加时间
      timeListAddObj(){
        if(this.formData.exhaustPeriodVoList.length<6){
          this.formData.exhaustPeriodVoList.push({
            beginTime:"",
            endTime:"",
            timedType:1,
            customTime:"",
          })
        }else{
          this.msgError('最多可以增加6个排风时段')
        }
      },
      //删除时间
      timeListDelObj(index){
        this.formData.exhaustPeriodVoList.splice(index,1)
      },
      backPage(){
        this.$parent.goPage(1);
      },
      //生成排除节假日后的日期
      dateFormatting(){
        let self = this;
        let myDate = new Date();
        let year = myDate.getFullYear()
        let yearTow = year + 1;
        let age = true;
        let timeList = [];
        let beginTime = "";
        let endTime = "";
        for(let timeStamp = Date.parse(new Date(year+'/1/1'+' '+'00:00:00'))/1000;(new Date(self.accMul(timeStamp,1000)).getFullYear())<yearTow; timeStamp = timeStamp + 86400){
          let num = 0;
          for(let i=0;i<self.festival.length;i++){
            if(timeStamp >= self.festival[i].beginTime && timeStamp <= self.festival[i].endTime){
              num++
            }
          }
          if(num == 0){
            if(age){
              let obj = {beginTime:timeStamp}
              obj = JSON.parse(JSON.stringify(obj))
              beginTime = obj.beginTime;
              age = false;
            }
            endTime = timeStamp;
          }else{
            if(beginTime != ""){
              timeList.push(JSON.parse(JSON.stringify({dateRange:[self.timestampToTimeD(beginTime),self.timestampToTimeD(timeStamp - 1)]})));
              beginTime = "";
              age = true;
            }
          }
        }
        if(beginTime != ""){
          timeList.push(JSON.parse(JSON.stringify({dateRange:[self.timestampToTimeD(beginTime),self.timestampToTimeD(endTime)]})));
        }
        this.$set(this.formData,'executionDateVoList',timeList);
      },
      timestampToTimeD(timestamp) {
        let date = new Date(this.accMul(timestamp,1000)); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let Y = date.getFullYear() + "-";//年
        let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";//月
        let D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());//日
        return Y + M + D;
      },
      //获取节假日数据
      getHoliday(){
        getHoliday().then( response => {
          let self = this;
          let list = response.data
          for(let i=0;i<list.length;i++){
            list[i] = list[i]+'';
            list[i] = list[i].replace(/^(\d{4})(\d{2})(\d{2})$/, "$1-$2-$3")
          }
          let bigList = [];
          let minList = [];
          for(let i=0;i<list.length;i++){
            if(i+1 < list.length){
              minList.push(list[i])
              if(!self.daysRet(list[i],list[i+1])){
                if(minList[1]){
                  // let newList = [minList[0],minList[minList.length-1]];
                  let newList = {
                    beginTime : Date.parse(new Date(minList[0]+' '+'00:00:00'))/1000,
                    endTime : Date.parse(new Date(minList[minList.length-1]+' '+'23:59:59'))/1000
                  };
                  bigList.push(newList)
                }else{
                  // let newList = [minList[0],minList[0]];
                  let newList = {
                    beginTime : Date.parse(new Date(minList[0]+' '+'00:00:00'))/1000,
                    endTime : Date.parse(new Date(minList[0]+' '+'23:59:59'))/1000
                  };
                  bigList.push(newList)
                }
                minList = [];
                if(i+2 == list.length){
                  // bigList.push([list[i+1],list[i+1]]);
                  bigList.push({
                    beginTime : Date.parse(new Date(list[i+1]+' '+'00:00:00'))/1000,
                    endTime : Date.parse(new Date(list[i+1]+' '+'23:59:59'))/1000
                  });
                }
              }else{
                if(i+2 == list.length){
                  minList.push(list[i+1])
                  // let newList = [minList[0],minList[minList.length-1]];
                  let newList = {
                    beginTime : Date.parse(new Date(minList[0]+' '+'00:00:00'))/1000,
                    endTime : Date.parse(new Date(minList[minList.length-1]+' '+'23:59:59'))/1000
                  };
                  bigList.push(newList)
                  minList = [];
                }
              }
            }
          }
          this.$set(this,'festival',bigList);
        });
      },
      //节假日连续判断
      daysRet(timeOne,timeTow){
        let list = [timeOne,timeTow]
        let days = list.sort().map((d, i) => {
          let dt = new Date(d)
          dt.setDate(dt.getDate() + 4 - i) // 处理为相同日期
          // 抹去 时 分 秒 毫秒
          dt.setHours(0)
          dt.setMinutes(0)
          dt.setSeconds(0)
          dt.setMilliseconds(0)
          return +dt
        })
        let ret = true
        days.forEach(d => {
          if (days[0] !== d) {
            ret = false
          }
        })
        return ret
      },
      //乘法
      accMul(arg1,arg2){
        var m=0,s1=arg1.toString(),s2=arg2.toString();
        try{m+=s1.split(".")[1].length}catch(e){}
        try{m+=s2.split(".")[1].length}catch(e){}
        return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
      },
    }
  }
</script>

<style scoped lang="scss">
  .timingExhaustAirAddPage{
    flex:1;
    display: flex;
    flex-direction: column;
    font-weight:500;
    overflow: hidden;
    .top-title-box{
      display: flex;
      padding:20px 0;
      border-bottom:1px #E0E0E0 solid;
      p:nth-child(1){
        margin-left:20px;
        flex:1;
        font-size:18px;
        line-height:40px;
        color:#0045AF;
      }
      p:nth-child(2){
        margin-right:20px;
        width:80px;
      }
    }
    .content-max-big-box{
      flex:1;
      display: flex;
      flex-direction: column;
      padding:40px 0 40px 80px;
      .form-time-box{
        display: flex;
        line-height:40px;
        .form-title-box{
          display: flex;
          font-size:14px;
          margin-top:20px;
          span{
            width:10px;
            color:#ff4949;
            margin-left:3px
          }
          .form-title-p{
            color:#333;
            margin-right:10px;
          }
          .festival-box{
            display: flex;
            margin:0 20px 0 11px;
            cursor: pointer;
            img{
              width:14px;
              height:14px;
              margin:13px 4px;
            }
            p{
              line-height:40px;
            }
          }
          .form-title-text{
            color:#CCCCCC;
          }
        }
      }
      .form-period-max-box{
        padding-left:80px;
        .form-period-box{
          width:544px;
          display: inline-block;
          line-height:40px;
          .form-period-min-box{
            display: flex;
            .i-add-button{
              width:40px;
              height:40px;
              line-height:40px;
              text-align: center;
              font-size:14px;
              cursor: pointer;
              color:#0183FA;
            }
            .i-del-button{
              width:40px;
              height:40px;
              line-height:40px;
              text-align: center;
              font-size:14px;
              cursor: pointer;
              color:#999;
            }
          }
        }
      }
      .add-button-on{
        margin-left:80px;
        width:448px;
        line-height:40px;
        border:1px dashed #0183FA;
        border-radius:4px;
        text-align: center;
        color:#0183FA;
        font-size:16px;
        cursor: pointer;
      }
      .del-button-i{
        width:40px;
        height:40px;
        line-height:40px;
        text-align: center;
        font-size:14px;
        color:#999;
        cursor: pointer;
      }
      .button-max-box{
        margin:50px 0;
        display: flex;
        p:nth-child(1){
          flex:1;
        }
        p:nth-child(2){
          width:70px;
          height:30px;
          line-height:30px;
          margin-right:13px;
          font-size:12px;
          color:#999999;
          background: #E0E0E0;
          border-radius:6px;
          text-align: center;
          cursor: pointer;
        }
        p:nth-child(3){
          width:70px;
          height:30px;
          line-height:30px;
          font-size:12px;
          color:#ffffff;
          background: #0045AF;
          border-radius:6px;
          text-align: center;
          cursor: pointer;
        }
        p:nth-child(4){
          flex:1;
        }
      }
    }
  }
</style>