zc

src/views/integratedManagement/messageNotice/warningNotice/forewarningConfig.vue

@@ -264,27 +264,63 @@
     <el-dialog class="forewarningUp-dialog" title='预警升级配置' width="1300px" append-to-body
                :visible.sync="dialogType" v-if="dialogType" @close="dialogOff()"
                :close-on-click-modal="false" :close-on-press-escape="false">
-      <div class="question-box">
-        <i class="el-icon-question question-icon"></i>
-        <i class="question-text">如在设定的处理时间内未处理，则报警升级执行下一步流程。</i>
+      <div class="forewarningUp-dialog-max-box">
+        <div class="question-box">
+          <p class="el-icon-question question-icon"></p>
+          <p class="question-text">如在设定的处理时间内未处理，则报警升级执行下一步流程。</p>
+        </div>
+        <el-form :model="dialogForm" ref="dialogForm" :inline="true"
+                 :rules="dialogRules" class="addCheckPage-min">
+          <el-form-item label="适合学院：" prop="dialogData1" label-width="90px">
+            <el-select v-model="dialogForm.dialogData1" placeholder="请选择" style="width: 435px">
+              <el-option
+                v-for="dict in deptOptions"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <div class="for-max-big-box" v-for="(item,index) in dialogForm.dialogData2" :key="index">
+            <div class="for-max-big-title-box">
+              <p class="position-index">{{index+1}}</p>
+              <el-form-item label="处理时间：" class="time-form-item" prop="searchValue" label-width="142px">
+                <el-input-number v-model="item.dialogTime" style="width:435px;"
+                                 :controls="false" :min="1" :max="1440">
+                </el-input-number>
+              </el-form-item>
+              <p class="time-p">分钟</p>
+              <p class="null-p"></p>
+              <p class="page-submit-common-style-button for-del-button" @click="delBigDialogData(index)">删除</p>
+              <p class="page-submit-common-style-button for-add-button" @click="addBigDialogData(index)">+  添加处理流程</p>
+            </div>
+            <div class="for-max-box">
+              <div class="for-box" v-for="(minItem,minIndex) in item.dialogUserList" :key="minIndex">
+                <el-form-item label="通知对象：" prop="searchValue" label-width="142px">
+                  <el-input
+                    style="width:300px;"
+                    maxlength="8"
+                    v-model="minItem.dialogName"
+                    placeholder="未填写"
+                  />
+                </el-form-item>
+                <p class="el-icon-search look-min-button"></p>
+                <el-form-item label="手机号码：" prop="searchValue" label-width="120px">
+                  <el-input
+                    style="width:300px;"
+                    maxlength="11"
+                    v-model="minItem.dialogValue"
+                    placeholder="未填写"
+                    onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
+                  />
+                </el-form-item>
+                <p class="el-icon-delete del-min-button" @click="delMinDialogData"></p>
+                <p class="el-icon-circle-plus-outline add-min-button" @click="addMinDialogData"></p>
+              </div>
+            </div>
+          </div>
+        </el-form>
       </div>
-      <el-form :model="dialogForm" ref="dialogForm" :inline="true" :rules="dialogRules" class="addCheckPage-min" label-width="80px">
-        <el-form-item label="名称" prop="dictKey">
-          <el-input v-model="dialogForm.dictKey" placeholder="请输入名称" maxLength="10" style="width:320px;"/>
-        </el-form-item>
-        <el-form-item label="关联值" prop="dictValue">
-          <el-input v-model="dialogForm.dictValue" placeholder="请输入标识" maxLength="20" style="width:320px;"/>
-        </el-form-item>
-        <el-form-item label="排序" prop="sort">
-          <el-input-number v-model="dialogForm.sort" controls-position="right" :min="1" :max="9999" style="width:320px;"></el-input-number>
-        </el-form-item>
-        <el-form-item label="状态" prop="state">
-          <el-radio-group v-model="dialogForm.state" style="width:320px;">
-            <el-radio :label="true">启用</el-radio>
-            <el-radio :label="false">禁用</el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
       <div slot="footer" class="dialog-footer dialog-footer-box">
         <p class="dialog-footer-button-null"></p>
         <p class="dialog-footer-button-info" @click="dialogOff()">取消</p>
@@ -407,7 +443,22 @@
         tableButtonType:this.hasPermiDom(['demo:demo:detail','demo:demo:edit','demo:demo:del',]),
         //dialog配置
         dialogType:true,
-        dialogForm:{},
+        dialogForm:{
+          dialogData1:null,
+          dialogData2:[
+            {
+              dialogTime:null,
+              dialogUserList:[
+                {
+                  dialogName:null,
+                  dialogValue:null,
+                }
+              ],
+            }
+          ],
+        },
+        //学院列表
+        deptOptions:[],
       }
     },
     created(){
@@ -510,11 +561,40 @@
       //关闭弹层
       dialogOff(){
 
+      },
+      //新增规则流程
+      addBigDialogData(index){
+
+      },
+      //删除规则流程
+      delBigDialogData(index){
+
+      },
+      //新增规则人员
+      addMinDialogData(index){
+
+      },
+      //删除规则人员
+      delMinDialogData(index){
+
       },
       //弹层提交
       dialogSubmit(){
 
       },
+      //手机号验证
+      checkPhone(rule, value, callback) {
+        if (!value) {
+          return callback(new Error('不能为空'))
+        } else {
+          const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
+          if (reg.test(value)) {
+            callback()
+          } else {
+            return callback(new Error('请输入正确的手机号码'))
+          }
+        }
+      },
     },
   }
 </script>
@@ -665,19 +745,111 @@
 </style>
 <style lang="scss">
   .forewarningUp-dialog{
-    .question-box{
-      padding:0 45px 20px;
-      .question-icon{
-        color:#FFC000;
-        font-size:16px;
-        height:20px;
-        line-height:16px;
+    .forewarningUp-dialog-max-box{
+      padding:0 40px;
+      .question-box{
+        display: flex;
+        padding:0 8px 20px;
+        .question-icon{
+          color:#FFC000;
+          font-size:16px;
+          height:20px;
+          line-height:16px;
+        }
+        .question-text{
+          color:#333;
+          margin-left:12px;
+          height:20px;
+          line-height:16px;
+          font-size:16px;
+        }
       }
-      .question-text{
-        margin-left:12px;
-        height:20px;
-        line-height:16px;
-        font-size:16px;
+      .for-max-big-box{
+        .for-max-big-title-box{
+          display: flex;
+          background-color: #F5F5F5;
+          height:70px;
+          position: relative;
+          .position-index{
+            position: absolute;
+            left:0;
+            right:0;
+            width:30px;
+            height:30px;
+            border-bottom-right-radius: 10px;
+            text-align: center;
+            line-height:30px;
+            background-color: #0183FA;
+            color:#fff;
+            font-size:16px;
+          }
+          .time-form-item{
+
+            margin-top:15px;
+            margin-right:0;
+            input{
+              border-bottom-right-radius:0;
+              border-top-right-radius:0;
+            }
+          }
+          .time-p{
+            margin-top:15px;
+            font-size:16px;
+            color:#333;
+            width:60px;
+            height:40px;
+            line-height:40px;
+            background-color: #E0E0E0;
+            text-align: center;
+          }
+          .null-p{
+            flex:1;
+          }
+          .for-del-button{
+            margin-top:15px;
+            width:80px;
+            margin-right:10px;
+          }
+          .for-add-button{
+            margin-top:15px;
+            width:150px;
+            margin-right:27px;
+          }
+        }
+        .for-max-box{
+          border:1px solid #E0E0E0;
+          padding:25px 0;
+          .for-box{
+
+          }
+          .look-min-button{
+            font-size:14px;
+            text-align: center;
+            width:20px;
+            line-height:20px;
+            margin:10px 10px 0 0;
+            cursor: pointer;
+            color:#A2A2A2;
+          }
+          .del-min-button{
+            font-size:14px;
+            text-align: center;
+            width:20px;
+            line-height:20px;
+            margin:10px 10px 0 0;
+            cursor: pointer;
+            color:#A2A2A2;
+          }
+          .add-min-button{
+            font-size:14px;
+            text-align: center;
+            width:20px;
+            line-height:20px;
+            margin:10px 10px 0 0;
+            cursor: pointer;
+            color:#0183FA;
+          }
+        }
       }
     }
   }