From c1ad1b68e2e868a6983b90ae5d9b2497d085eb6d Mon Sep 17 00:00:00 2001 From: YuShifan <894402575bt@gmail.com> Date: Fri, 3 Dec 2021 15:53:26 +0800 Subject: [PATCH] fix(msg): fix save properties issue --- src/components/MsgPublish.vue | 119 ++++++++------------ src/views/connections/ConnectionsDetail.vue | 4 - 2 files changed, 50 insertions(+), 73 deletions(-) diff --git a/src/components/MsgPublish.vue b/src/components/MsgPublish.vue index 108580c31..ad939c92c 100644 --- a/src/components/MsgPublish.vue +++ b/src/components/MsgPublish.vue @@ -13,7 +13,7 @@
-
+
@@ -58,16 +58,6 @@ /> - - - - - + + + + +
@@ -118,7 +118,7 @@ :effect="currentTheme !== 'light' ? 'light' : 'dark'" :content="$t('connections.metaTips')" > - + v !== null && v !== undefined).length > 0 || - this.listData.filter((pair) => pair.key !== '').length > 0 + this.userPropsList.filter((pair) => pair.key !== '').length > 0 ) } private saveMeta() { this.formRef.validate((valid) => { if (valid) { - const checkedList = this.listData.filter((pair) => !(pair.key === '' || !pair.checked)) + const checkedList = this.userPropsList.filter((pair) => !(pair.key === '' || !pair.checked)) const userProps: { [key: string]: string } = {} @@ -318,24 +311,24 @@ export default class MsgPublish extends Vue { } public defaultPropObj = { key: '', value: '', checked: true } - public listData: UserPropsPairObject[] = [_.cloneDeep(this.defaultPropObj)] + public userPropsList: UserPropsPairObject[] = [_.cloneDeep(this.defaultPropObj)] private hasMqtt5Prop: boolean = false private deleteItem(index: number) { - if (this.listData.length > 1) { - this.listData.splice(index, 1) - } else if (this.listData.length === 1) { - this.listData = [_.cloneDeep(this.defaultPropObj)] + if (this.userPropsList.length > 1) { + this.userPropsList.splice(index, 1) + } else if (this.userPropsList.length === 1) { + this.userPropsList = [_.cloneDeep(this.defaultPropObj)] } } private addItem() { - this.listData.push(_.cloneDeep(this.defaultPropObj)) + this.userPropsList.push(_.cloneDeep(this.defaultPropObj)) } private checkItem(index: number) { - this.listData[index].checked = !this.listData[index].checked + this.userPropsList[index].checked = !this.userPropsList[index].checked } private headersHistory: HistoryMessageHeaderModel[] | [] = [] @@ -418,27 +411,7 @@ export default class MsgPublish extends Vue { // destroy the editor when rout jump to creation page editorRef.destroyEditor() } - this.listData = [] - this.MQTT5Props = {} - const { messageService } = useServices() - if (this.mqtt5PropsEnable) { - const propHistory = await messageService.getPushProp(this.$route.params.id) - if (propHistory) { - this.MQTT5Props = propHistory - if (propHistory.userProperties) { - this.listData = Object.entries(propHistory.userProperties).map(([key, value]) => { - return { - key, - value, - checked: true, - } as UserPropsPairObject - }) - } else { - return _.cloneDeep(this.defaultMsgRecord) - } - this.hasMqtt5Prop = this.getHasMqtt5PropState() - } - } + this.loadProperties() } private handleHeaderChange(val: HistoryMessageHeaderModel) { @@ -471,7 +444,6 @@ export default class MsgPublish extends Vue { this.msgRecord.id = getMessageId() this.msgRecord.createAt = time.getNowDate() this.mqtt5PropsEnable && (this.msgRecord.properties = this.MQTT5Props) - await this.updatePushProp() this.$emit('handleSend', this.msgRecord, this.payloadType, this.loadHistoryData) } @@ -496,27 +468,10 @@ export default class MsgPublish extends Vue { } private async loadHistoryData(isNewPayload?: boolean, isLoadData?: boolean) { - const { historyMessageHeaderService, historyMessagePayloadService, messageService } = useServices() + const { historyMessageHeaderService, historyMessagePayloadService } = useServices() const headersHistory = (await historyMessageHeaderService.getAll()) ?? [] const payloadsHistory = (await historyMessagePayloadService.getAll()) ?? [] - if (this.mqtt5PropsEnable) { - const propHistory = await messageService.getPushProp(this.$route.params.id) - if (propHistory) { - this.MQTT5Props = propHistory - if (propHistory.userProperties) { - this.listData = Object.entries(propHistory.userProperties).map(([key, value]) => { - return { - key, - value, - checked: true, - } as UserPropsPairObject - }) - } - } - } - const historyMsg = payloadsHistory[payloadsHistory.length - 1] - if (historyMsg && isLoadData) { this.payloadType = historyMsg.payloadType } @@ -540,6 +495,32 @@ export default class MsgPublish extends Vue { if (headersHistoryIndex) { this.payloadType = headersHistoryIndex.payloadType } + this.loadProperties() + } + + private async loadProperties() { + this.userPropsList = [] + this.MQTT5Props = {} + if (this.mqtt5PropsEnable) { + const { messageService } = useServices() + const pushProps = await messageService.getPushProp(this.$route.params.id) + console.log(pushProps) + if (pushProps) { + this.MQTT5Props = pushProps + if (pushProps.userProperties) { + this.userPropsList = Object.entries(pushProps.userProperties).map(([key, value]) => { + return { + key, + value, + checked: true, + } as UserPropsPairObject + }) + } else { + this.userPropsList = [_.cloneDeep(this.defaultPropObj)] + } + this.hasMqtt5Prop = this.getHasMqtt5PropState() + } + } } private formatJsonValue() { diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue index 0a0ebb06e..109b134ae 100644 --- a/src/views/connections/ConnectionsDetail.vue +++ b/src/views/connections/ConnectionsDetail.vue @@ -1176,10 +1176,6 @@ export default class ConnectionsDetail extends Vue { if (properties && Object.entries(properties).filter(([_, v]) => v !== null && v !== undefined).length > 0) { const propRecords = Object.entries(properties).filter(([_, v]) => v !== null && v !== undefined) props = Object.fromEntries(propRecords) - if (propRecords.length > 0) { - const { messageService } = useServices() - this.record.id && messageService.addPushProp(props, this.record.id) - } } if (!topic) {