From 262119fd58357f1d930d65a6e3252176d29b2ce5 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 28 一月 2021 18:54:48 +0800
Subject: [PATCH] 朔黄人员管理页面调试

---
 src/pages/datapush/index/RightEvent.vue |  248 ++++++++++++++++++++++++++++++++++++++++++++----
 1 files changed, 224 insertions(+), 24 deletions(-)

diff --git a/src/pages/datapush/index/RightEvent.vue b/src/pages/datapush/index/RightEvent.vue
index c0a6f68..5722008 100644
--- a/src/pages/datapush/index/RightEvent.vue
+++ b/src/pages/datapush/index/RightEvent.vue
@@ -184,11 +184,59 @@
         <b>瑙勫垯</b>
         <div class="div-border" v-html="taskEditData.eventTxt"></div>
       </div>
+      <div class="config-item">
+        <b>鎺ㄩ�佸瓧娈�</b>
+        <el-button type="primary" size="mini" @click="pushFieldDialog=true">璁剧疆</el-button>
+      </div>
       <div class="save-btn">
         <el-button type="info" size="small" @click="onCancle" style="color:#222">鍙栨秷</el-button>
         <el-button type="primary" @click="eventPushsSave" size="small">淇濆瓨</el-button>
       </div>
     </div>
+    <el-dialog
+      :visible="pushFieldDialog"
+      :append-to-body="false"
+      :close-on-click-modal="false"
+      class="dialog-push-field"
+      @close="pushFieldDialog=false"
+    >
+      <div slot="title" class="slot-title">
+        <p>璇烽�夋嫨鎯宠鎺ㄩ�佺殑瀛楁</p>
+        <div class="right">
+          <el-checkbox v-model="allFieldChecked"></el-checkbox>
+        </div>
+      </div>
+      <div class="check-area" v-for="configObj in pushFields" :key="configObj.id">
+        <div class="header">
+          <div class="title">{{configObj.name}}</div>
+          <div class="right">
+            <el-checkbox v-model="configObj.checked" @change="toggleConfigCheck(configObj)">鍏ㄩ��</el-checkbox>
+          </div>
+        </div>
+        <div class="flex-box flex-wrap">
+          <div class="param flex-box" v-for="param in configObj.children" :key="param.id">
+            <el-checkbox v-model="param.checked"></el-checkbox>
+            <span class="param-name">{{param.name}}</span>
+            <el-input
+              v-model="param.alias"
+              size="mini"
+              :ref="`input_${param.id}`"
+              @input="varifyField(param)"
+              :style="{color:param.error?'red':'',borderColor:param.error?'red':''}"
+            ></el-input>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="text-center">
+        <el-button size="small">鍙栨秷</el-button>
+        <el-button
+          size="small"
+          type="primary"
+          :disabled="disabledPushFieldSet"
+          @click="submitPushFieldSet"
+        >淇濆瓨</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -208,11 +256,11 @@
     }
   },
   computed: {
-    urls() {
+    urls () {
       return this.taskEditData.urls
     }
   },
-  data() {
+  data () {
     return {
       taskEditData: {},
       dataList: [],
@@ -236,11 +284,15 @@
         operatorTypeOpionts: {},
         ruleValueOptions: []
       },
+      pushFieldDialog: false,
+      pushFields: [],
+      allFieldChecked: false,
+      disabledPushFieldSet: true,
     };
   },
   watch: {
     eventObject: {
-      handler(newVal, oldVal) {
+      handler (newVal, oldVal) {
         this.taskEditData.enable = this.eventObject.enable;
         if (newVal !== oldVal) {
           if (this.taskEditData.id !== newVal.id) {
@@ -273,31 +325,107 @@
         }
       },
       deep: true
+    },
+    pushFields: {
+      handler (n, o) {
+        let _this = this;
+        let flag = false;
+        n.forEach(configObj => {
+          let notChecked = configObj.children.find(param => !param.checked);
+          if (!notChecked) {
+            configObj.checked = true;
+          } else {
+            configObj.checked = false;
+          }
+          let someoneChecked = configObj.children.find(param => param.checked);
+          if (someoneChecked) {
+            flag = true
+          }
+
+        });
+        if (flag) {
+          this.disabledPushFieldSet = false;
+        } else {
+          this.disabledPushFieldSet = true;
+        }
+      },
+      deep: true
     }
   },
-  created() {
+  created () {
     this.reAdd();
   },
-  mounted() {
-    // 鍔犺浇瀛楀吀瀛楀吀
+  mounted () {
+    // 鍔犺浇瀛楀吀
     this.findByType();
     this.getCameras();
     this.getTasks();
+    this.getPushFields();
   },
   methods: {
-    addUrl() {
+    varifyField (param) {
+      var reg = /^[A-Za-z]+[0-9-_]?$/;
+      if (!reg.test(param.alias)) {
+        this.$message('璇疯緭鍏ュ悎娉曞瓧娈靛悕');
+        debugger
+        param.error = true;
+      } else {
+        param.error = false;
+      }
+      // this.pushFields.forEach(configObj => {
+      //   configObj.children.find(param => param.error)
+      // })
+
+    },
+    submitPushFieldSet () {
+      let flag = false;
+      this.pushFields.forEach(configObj => {
+        let errorOne = configObj.children.find(param => param.checked && param.error);
+        if (errorOne) {
+          this.$notify({
+            type: 'error',
+            message: '璇峰皢閫変腑瀛楁杈撳叆鍚堟硶瀛楁鍚�'
+          })
+          flag = true
+        }
+      });
+      if(flag){
+        return
+      }
+      alert('submit')
+    },
+    toggleConfigCheck (configObj) {
+      configObj.children.forEach(child => {
+        child.checked = configObj.checked
+      })
+    },
+    getPushFields () {
+      this.pushFields = [
+        {          id: 'sxjxx', name: '鎽勫儚鏈轰俊鎭�', checked: false, alias: '',
+          children: [
+            { name: '鎽勫儚鏈篒D', checked: false, alias: 'cameraID', id: 'cameraID', children: null },
+            { name: '鎽勫儚鏈哄悕绉�', checked: false, alias: 'cameraName', id: 'cameraName', children: null },
+            { name: '鎽勫儚鏈哄湴鍧�', checked: false, alias: 'cameraAddr', id: 'cameraAddr', children: null },
+            { name: '鎽勫儚鏈哄潃', checked: false, alias: 'cameraAdr', id: 'cameraAdr', children: null }
+          ]        },
+        {          id: 'cjxx', name: '鍦烘櫙淇℃伅', checked: false, alias: '',
+          children: [{ name: '鍦烘櫙ID', checked: false, alias: 'taskId', id: 'tskId', children: null }]        },
+      ];
+
+    },
+    addUrl () {
       this.taskEditData.urls.push({
         checked: true,
         hash: Math.random().toString(36).substr(2),
         url: "",
       });
     },
-    delUrl(index) {
+    delUrl (index) {
       this.$set(this.taskEditData.urls, index, this.baseRule)
       this.taskEditData.urls.splice(index, 1)
     },
     // 淇濆瓨
-    async eventPushsSave() {
+    async eventPushsSave () {
       // 鍒ゆ柇淇濆瓨鐨刬p鏄惁绗﹀悎鏍煎紡瑕佹眰
       if (this.taskEditData.urls.length < 1) {
         this.$notify({
@@ -372,7 +500,7 @@
       }
     },
     // 鏌ユ壘瀛楀吀
-    async findByType() {
+    async findByType () {
       let res = await findDictionaryByType();
       if (res && res.success) {
         this.dictionary = Object.assign(this.dictionary, res.data)
@@ -386,7 +514,7 @@
         })
       }
     },
-    async getCameras() {
+    async getCameras () {
       let rsp = await findByEventTopic({ topic: 'camera', type: 'name' });
       if (rsp && rsp.success) {
         this.dictionary['camera'] = rsp.data
@@ -402,7 +530,7 @@
         })
       }
     },
-    async getTasks() {
+    async getTasks () {
       this.dictionary['task'] = []
       let rsp = await getTaskList();
       if (rsp && rsp.success) {
@@ -419,22 +547,22 @@
       }
     },
     // 鏂板缓閰嶇疆
-    createSet() {
+    createSet () {
       this.dataList.push(JSON.parse(JSON.stringify(this.baseRule)));
     },
-    cleanSet() {
+    cleanSet () {
       this.dataList.splice(0, this.dataList.length);
     },
     // 娣诲姞瀛愯鍒�
-    addRule() {
+    addRule () {
       this.dataList.push(JSON.parse(JSON.stringify(this.baseRule)));
     },
     // 鍒犻櫎瀛愯鍒�
-    delRule(index) {
+    delRule (index) {
       this.dataList.splice(index, 1);
     },
     // 瑙勫垯涓笅鎷夋鐨勯�夋嫨鍥炶皟
-    selectTopic(rule, resetNext = false) {
+    selectTopic (rule, resetNext = false) {
       rule.topicTypeOptions.forEach(element => {
         if (element.value === rule.topic_type) {
           rule.topicArgOptions = element.children;
@@ -445,7 +573,7 @@
         }
       });
     },
-    selectArg(rule, resetNext = false) {
+    selectArg (rule, resetNext = false) {
       let argInfo = rule.topicArgOptions.filter(arg => {
         return arg.value === rule.topic_arg
       })
@@ -464,7 +592,7 @@
         this.selectOperator(rule, resetNext)
       }
     },
-    selectOperator(rule, resetNext = false) {
+    selectOperator (rule, resetNext = false) {
       if (rule.operator_type === "option") {
         rule.ruleValueOptions = this.dictionary[rule.topic_type] ? this.dictionary[rule.topic_type] : []
         rule.rule_values = rule.rule_value.split(",")
@@ -475,11 +603,11 @@
         rule.rule_values = [];
       }
     },
-    selectValue(rule, val) {
+    selectValue (rule, val) {
       rule.rule_value = val.join(",")
     },
     // 鏍规嵁value杩斿洖瀵瑰簲鐨刵ame
-    getNameByValue(arr, value) {
+    getNameByValue (arr, value) {
       let s = arr.find(item => {
         return item.value === value;
       });
@@ -487,7 +615,7 @@
       return s.name;
     },
     // 娓呯┖閲嶆柊鏂板
-    reAdd() {
+    reAdd () {
       this.taskEditData = {
         id: "",
         name: "",
@@ -516,7 +644,7 @@
       };
       this.dataList = [];
     },
-    onCancle() {
+    onCancle () {
       this.$emit('onCancle')
     }
   }
@@ -574,7 +702,12 @@
       margin-left: 895px;
     }
   }
-
+  .config-item {
+    margin: 20px 0;
+    b {
+      margin-right: 10px;
+    }
+  }
   .el-button--text {
     text-decoration: unset;
   }
@@ -604,5 +737,72 @@
     color: #3d68e1;
     line-height: 39px;
   }
+  .dialog-push-field {
+    .el-button--primary.is-disabled,
+    .el-button--primary.is-disabled:hover {
+      background-color: #9eb4f0 !important;
+      border-color: #9eb4f0 !important;
+    }
+    .el-dialog {
+      width: 910px;
+      height: 700px;
+      .el-dialog__body {
+        padding-top: 14px;
+        height: 540px;
+        overflow-y: auto;
+      }
+    }
+    .text-center {
+      text-align: center;
+    }
+    .slot-title {
+      position: relative;
+      .right {
+        position: absolute;
+        top: 0;
+        right: 30px;
+      }
+    }
+    .check-area {
+      padding-bottom: 10px;
+      .header {
+        position: relative;
+        background: #efefef;
+        line-height: 30px;
+        margin-bottom: 14px;
+        font-weight: bold;
+        .title {
+          border-left: 3px solid #2481fa;
+          padding-left: 10px;
+        }
+        .right {
+          position: absolute;
+          top: 0;
+          right: 30px;
+        }
+      }
+      .flex-box.flex-wrap {
+        flex-wrap: wrap;
+      }
+      .param.flex-box {
+        word-break: keep-all;
+        align-items: center;
+        margin: 0 10px;
+        min-width: 260px;
+        margin-bottom: 10px;
+        .param-name {
+          margin: 0 5px;
+        }
+        .el-input {
+          border-color: #dcdfe6;
+          color: #606266;
+          .el-input__inner {
+            color: inherit;
+            border-color: inherit;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

--
Gitblit v1.8.0