middleground_code_v2/src/views/apiLogs/rightDialog.vue

<template>
  <div>
    <base-right-dialog
      ref="baseRightDialog"
      :footerShow="true"
      :dialogVisible.sync="dialogVisible"
      :title="dialogTitle + ' 消息管理日志'"
      @handleClose="handleDialogClose"
      :type="dialogType"
      :submitShow="submitShow"
      :size="'65%'"
      @handleConfirmClick="handleConfirmClick"
    >
      <base-form
        ref="basicsForm"
        :formRow="formRow"
        :isFunBtn="false"
        :rules="basicsRules"
        class="dialog_form"
        :spanWidth="`120px`"
        :loading="vLoading"
        style="padding-bottom:20px;"
      >
        <div slot="sourceData" class="code-json-editor">
          <vue-json-editor
            class="editor"
            v-model="sourceData"
            :showBtns="false"
            :mode="'code'"
            @json-change="onSourceDataJsonChange"
            @json-save="onSourceDataSave"
            @has-error="onSourceDataError"
          />
        </div>
        <div slot="targetData" class="code-json-editor">
          <vue-json-editor
            class="editor"
            v-model="targetData"
            :showBtns="false"
            :mode="'code'"
            @json-change="onTargetDataChange"
            @json-save="onTargetDataSave"
            @has-error="onTargetDataError"
          />
        </div>
      </base-form>
    </base-right-dialog>
  </div>
</template>

<script>
import vueJsonEditor from 'vue-json-editor'
import baseRightDialog from '@/components/base/baseRightDialog'
import baseForm from '@/components/base/baseNewForm'
import baseTable from '@/components/base/baseTable'
import configData from './configData'
import { authApi } from '@/api/apis/auth'
import { getApiModuleApi } from '@/api/apiChunks/index.js'

export default {
  components: {
    baseRightDialog,
    baseForm,
    baseTable,
    vueJsonEditor
  },
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
      dialogType: '',
      formRow: configData.formRow,
      basicsRules: configData.basicsRules,
      vLoading: false,
      submitShow: true,
      sourceData: {},
      sourceDataFlag: true,
      targetData: {},
      targetDataFlag: true
    }
  },
  methods: {
    openDialog(type, row) {
      this.querysysAppService()
      // this.querysysAppApiService();
      this.formRow = configData.formRow
      this.submitShow = true
      // 编辑
      if (type == 'edit') {
        this.dialogTitle = '编辑'
        this.dialogType = 'edit'
        this.messageLogGetById(row.id)
      }
      // 查看
      if (type == 'show') {
        this.submitShow = false
        this.formRow = configData.formRowShow
        this.dialogTitle = '查看'
        this.dialogType = 'show'
        this.messageLogGetById(row.id, row)
      }
      this.dialogVisible = true
    },
    // 编辑详情
    async messageLogGetById(id, row) {
      let params = {
        id: id,
        status: row.status
      }
      let res = await authApi(
        'sysMessageManageLogService',
        'messageManage',
        'thirdInterfacequeryEntity',
        '',
        params
      )
      if (res.status == '200') {
        this.$nextTick(() => {
          this.$refs.basicsForm.incomingParameters(res.attribute)
        })
      }
    },
    // 实时保存 源数据
    onSourceDataJsonChange(value) {
      this.onSourceDataSave(value)
    },
    onSourceDataSave(value) {
      this.sourceData = value
      this.sourceDataFlag = true
    },
    onSourceDataError(value) {
      this.sourceDataFlag = false
    },
    checkSourceDataJson() {
      if (this.sourceDataFlag === false) {
        return false
      } else {
        return true
      }
    },
    // 实时保存 目标数据
    onTargetDataChange(value) {
      this.onTargetDataSave(value)
    },
    onTargetDataSave(value) {
      this.targetData = value
      this.targetDataFlag = true
    },
    onTargetDataError(value) {
      this.targetDataFlag = false
    },
    checkTargetDataJson() {
      if (this.targetDataFlag === false) {
        return false
      } else {
        return true
      }
    },
    // 弹窗关闭
    handleDialogClose() {
      this.$refs.basicsForm.resetFields()
      this.dialogVisible = false
    },
    // 弹窗确认按钮
    handleConfirmClick() {
      let checkSource = this.checkSourceDataJson()
      if (!checkSource) {
        this.$vmNews('源数据格式应为JSON格式！', 'warning')
        return
      }
      let checkTarget = this.checkTargetDataJson()
      if (!checkTarget) {
        this.$vmNews('目标数据格式应为JSON格式！', 'warning')
        return
      }
      let params = {
        ...this.$refs.basicsForm.ruleForm,
        sourceData: this.sourceData,
        targetData: this.targetData
      }
      if (this.dialogType == 'edit') {
        this.openLoading('submit')
        this.messageLogUpdateDto(params)
      }
    },
    // 编辑保存
    async messageLogUpdateDto(params) {
      let res = await authApi(
        'sysMessageManageLogService',
        'messageManage',
        'updateEntity',
        '',
        params
      )
      if (res.status == '200') {
        this.handleDialogClose()
        this.$vmNews('更新成功', 'success')
        this.$emit('resetTable')
      }
    },
    // 应用
    async querysysAppService() {
      const res = await getApiModuleApi({
        tl: 'sysApplicationService',
        as: 'application',
        dj: 'thirdInterfacequeryApp'
      }, {
        'pageNum': 1,
        'pageSize': 999
      })
      this.formRow[0].elCol[0].options = res.attribute.list
      // if (res.status == "200") {
      //   this.formRow[1].elCol[0].options = res.attribute.list;
      //   this.formRow[2].elCol[0].options = res.attribute.list;
      // }
    },
    // 应用者
    async querysysAppApiService() {
      let params = {
        pageSize: 9999,
        pageNum: 1
      }
      let res = await authApi(
        'appApiService',
        'appApi',
        'queryPage',
        '',
        params
      )
      if (res.status == '200') {
        // this.formRow[1].elCol[1].options = res.attribute.list;
        // this.formRow[2].elCol[1].options = res.attribute.list;
      }
    }
  }
}
</script>
<style lang="less" scoped>
.code-json-editor {
  /* jsoneditor右上角默认有一个链接,加css去掉 */

  /deep/ .jsoneditor-poweredBy {
    display: none !important;
  }

  /deep/ .ace-jsoneditor {
    height: 150px !important;
  }

}
</style>
<style scoped lang="scss">
::v-deep textarea.el-textarea__inner {
  min-height: 150px !important;
}

.dialogList {
  padding: 16px 0;
  border-top: 1px solid #dcdfe6;
  display: flex;
  flex-direction: column;
}

.updateBtn {
  border: 1px solid #ebedf1;
  padding: 5px 0;
  border-radius: 3px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  width: 100px;
}

.updateBtn:hover {
  color: #1890ff;
  border-color: #badeff;
  background-color: #e8f4ff;
}

::v-deep .el-table__body-wrapper.is-scrolling-none {
  height: auto !important;
}

::v-deep .app-container {
  height: auto !important;
}
</style>