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