simple-frame-unit 1.0.2

package/lib/pages/Interface/src/components/InterfaceMessage.vue

@@ -0,0 +1,878 @@
+<template>
+  <ed-dialog ref="BasicDialog" :fullscreen="true" :showOkBtn="false" :title="title"
+          :visible.sync="visibleDialog"
+          v-if="visibleDialog"
+          @close="closeDialog">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>元数据</span>
+        <el-button-group style="float: right;">
+          <el-button :loading="loading" icon="el-icon-document-add" size="small " type="primary"
+                     @click="saveInterfaceMeta">保存
+          </el-button>
+          <el-button :loading="loading" icon="el-icon-refresh-right" size="small " type="" @click="refresh">
+            刷新
+          </el-button>
+        </el-button-group>
+      </div>
+      <el-tabs v-model="activeTabName" @tab-click="handleClick">
+        <el-tab-pane :label="row.keyInfoObject.is_custom === 'xml'?'请求Head':'请求Header'" name="requestHead">
+          <el-tabs style="" tab-position="left">
+            <el-tab-pane label="报文">
+              <el-button size="small" style="margin-bottom: 10px" type="primary" @click="resolveReqHeadMeta">解析元数据
+              </el-button>
+              <ed-code-editor
+                ref="commonEditor"
+                :value="form.xmlReqHeadConstruct"
+                language="javascript"
+                @input="changeTextareaReqHead"
+              ></ed-code-editor>
+
+            </el-tab-pane>
+            <el-tab-pane label="元数据">
+              <div style="display: flex;justify-content: space-between;">
+                <div style="width: 70%">
+                  <el-table
+                    :data="reqHeadTableDataSource"
+                    border
+                    style="width: 100%"
+                    @row-click="clickRowReqHead">
+                    <el-table-column align="center" label="选择" width="55">
+                      <template slot-scope="scope">
+                        <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
+                        <el-radio v-model="selectVal" :label="scope.row.name" class="radio">&nbsp;
+                        </el-radio>
+                      </template>
+                    </el-table-column>
+                    <el-table-column
+                      label="节点"
+                      prop="name"
+                      width="180">
+                    </el-table-column>
+                    <el-table-column
+                      label="路径"
+                      prop="path"
+                      width="180">
+                    </el-table-column>
+                  </el-table>
+                </div>
+                <div style="width: 130%;margin-left: 10px">
+                  <el-form ref="tableInfoForm" :inline="true" :model="tableInfoForm"
+                           class="demo-form-inline">
+                    <el-table
+                      :data="reqHeadFieldDataSource"
+                      border
+                      style="width: 100%">
+                      <el-table-column
+                        label="字段名"
+                        prop="name"
+                        width="180">
+                      </el-table-column>
+                      <el-table-column
+                        label="数据类型"
+                        prop="dataType"
+                        width="180">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-select v-model="scope.row.dataType">
+                              <el-option label="STR" value="STR"></el-option>
+                              <el-option label="PROP" value="PROP"></el-option>
+                              <el-option label="ARRAY" value="ARRAY"></el-option>
+                              <el-option label="OBJECT" value="OBJECT"></el-option>
+                            </el-select>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="备注"
+                        prop="remark"
+                        width="180">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-input v-model="scope.row.remark"
+                                      placeholder="备注"></el-input>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="字段映射"
+                        prop="fieldMapping"
+                        width="180">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-input v-model="scope.row.fieldMapping"
+                                      placeholder="字段映射"></el-input>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="接口变量"
+                        prop="interfaceVariable"
+                        width="180">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-input v-model="scope.row.interfaceVariable"
+                                      placeholder="字段映射"></el-input>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="是否必输"
+                        prop="isRequired"
+                        width="100">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-select v-model="scope.row.isRequired">
+                              <el-option :value="true" label="是"></el-option>
+                              <el-option :value="false" label="否"></el-option>
+                            </el-select>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </el-form>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-tab-pane>
+        <el-tab-pane :lazy="true" label="请求Body" name="requestBody">
+          <el-tabs style="" tab-position="left">
+            <el-tab-pane label="报文">
+              <el-button size="small" style="margin-bottom: 10px" type="primary" @click="resolveReqBodyMeta">解析元数据
+              </el-button>
+              <ed-code-editor ref="commonEditor"
+                          :value="form.xmlReqBodyConstruct"
+                          language="javascript"
+                          @input="changeTextareaReqBody"
+              ></ed-code-editor>
+
+            </el-tab-pane>
+            <el-tab-pane label="元数据">
+              <div style="display: flex;justify-content: space-between;">
+                <div style="width: 70%">
+                  <el-table
+                    :data="reqBodyTableDataSource"
+                    border
+                    style="width: 100%"
+                    @row-click="clickRowReqBody">
+                    <el-table-column align="center" label="选择" width="55">
+                      <template slot-scope="scope">
+                        <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
+                        <el-radio v-model="selectVal" :label="scope.row.name" class="radio">&nbsp;
+                        </el-radio>
+                      </template>
+                    </el-table-column>
+                    <el-table-column
+                      label="节点"
+                      prop="name"
+                      width="180">
+                    </el-table-column>
+                    <el-table-column
+                      label="路径"
+                      prop="path"
+                      width="180">
+                    </el-table-column>
+                  </el-table>
+                </div>
+                <div style="width: 130%;margin-left: 10px">
+                  <el-form ref="tableInfoForm" :inline="true"
+                           class="demo-form-inline">
+                    <el-table
+                      :data="reqBodyFieldDataSource"
+                      border
+                      style="width: 100%">
+                      <el-table-column
+                        label="字段名"
+                        prop="name"
+                        width="180">
+                      </el-table-column>
+                      <el-table-column
+                        label="数据类型"
+                        prop="dataType"
+                        width="180">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-select v-model="scope.row.dataType">
+                              <el-option label="STR" value="STR"></el-option>
+                              <el-option label="PROP" value="PROP"></el-option>
+                              <el-option label="ARRAY" value="ARRAY"></el-option>
+                              <el-option label="OBJECT" value="OBJECT"></el-option>
+                            </el-select>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="备注"
+                        prop="remark"
+                        width="180">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-input v-model="scope.row.remark"
+                                      placeholder="备注"></el-input>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="字段映射"
+                        prop="fieldMapping"
+                        width="180">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-input v-model="scope.row.fieldMapping"
+                                      placeholder="字段映射"></el-input>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="接口变量"
+                        prop="interfaceVariable"
+                        width="180">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-input v-model="scope.row.interfaceVariable"
+                                      placeholder="字段映射"></el-input>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="是否必输"
+                        prop="isRequired"
+                        width="100">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-select v-model="scope.row.isRequired">
+                              <el-option :value="true" label="是"></el-option>
+                              <el-option :value="false" label="否"></el-option>
+                            </el-select>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </el-form>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-tab-pane>
+        <el-tab-pane v-if="row.keyInfoObject.is_custom === 'xml'" :lazy="true" label="响应Head" name="responseHead">
+          <el-tabs style="" tab-position="left">
+            <el-tab-pane label="报文">
+              <el-button size="small" style="margin-bottom: 10px" type="primary" @click="resolveRespHeadMeta">解析元数据
+              </el-button>
+              <ed-code-editor
+                ref="commonEditor"
+                :value="form.xmlRespHeadConstruct"
+                language="javascript"
+                @input="changeTextareaRespHead"
+              ></ed-code-editor>
+
+            </el-tab-pane>
+            <el-tab-pane label="元数据">
+              <div style="display: flex;justify-content: space-between;">
+                <div style="width: 60%">
+                  <el-form ref="tableInfoForm" :inline="true"
+                           class="demo-form-inline">
+                    <el-table
+                      :data="respHeadTableDataSource"
+                      border
+                      style="width: 100%"
+                      @row-click="clickRowRespHead">
+                      <el-table-column align="center" label="选择" width="55">
+                        <template slot-scope="scope">
+                          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
+                          <el-radio v-model="selectVal" :label="scope.row.name" class="radio">&nbsp;
+                          </el-radio>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="节点"
+                        prop="name"
+                        width="100">
+                      </el-table-column>
+                      <el-table-column
+                        label="路径"
+                        prop="path"
+                        width="100">
+                      </el-table-column>
+                      <el-table-column
+                        label="数据包装器"
+                        prop="dataPackage"
+                        width="150">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-select v-model="scope.row.dataPackage">
+                              <el-option label="无" value="Null"></el-option>
+                              <el-option label="列表" value="Array"></el-option>
+                              <el-option label="对象" value="Object"></el-option>
+                            </el-select>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </el-form>
+                </div>
+                <div style="width: 140%;margin-left: 10px">
+                  <el-form ref="tableInfoForm" :inline="true" :model="tableInfoForm"
+                           class="demo-form-inline">
+                    <el-table
+                      :data="respHeadFieldDataSource"
+                      border
+                      style="width: 100%">
+                      <el-table-column
+                        label="字段名"
+                        prop="name"
+                        width="100">
+                      </el-table-column>
+                      <el-table-column
+                        label="数据类型"
+                        prop="dataType"
+                        width="100">
+                      </el-table-column>
+                      <el-table-column
+                        label="备注"
+                        prop="remark"
+                        width="120">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-input v-model="scope.row.remark"
+                                      placeholder="备注"></el-input>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="字段映射"
+                        prop="fieldMapping"
+                        width="140">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-input v-model="scope.row.fieldMapping"
+                                      placeholder="字段映射"></el-input>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="接口变量"
+                        prop="interfaceVariable"
+                        width="140">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-input v-model="scope.row.interfaceVariable"
+                                      placeholder="字段映射"></el-input>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="值校验(条件)"
+                        prop="valueValidateCondition"
+                        width="140">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-select v-if="scope.row.dataType === 'STR'" v-model="scope.row.valueValidateCondition">
+                              <el-option label="测试" value="test"></el-option>
+                            </el-select>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="值校验(值)"
+                        prop="valueValidateValue"
+                        width="150">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-input v-model="scope.row.valueValidateValue"
+                                      placeholder=""></el-input>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </el-form>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-tab-pane>
+        <el-tab-pane :lazy="true" label="响应Body" name="responseBody">
+          <el-tabs style="" tab-position="left">
+            <el-tab-pane label="报文">
+              <el-button size="small" style="margin-bottom: 10px" type="primary" @click="resolveRespBodyMeta">解析元数据
+              </el-button>
+              <ed-code-editor
+                ref="commonEditor"
+                :value="form.xmlRespBodyConstruct"
+                language="javascript"
+                @input="changeTextareaRespBody"
+              ></ed-code-editor>
+
+            </el-tab-pane>
+            <el-tab-pane label="元数据">
+              <div style="display: flex;justify-content: space-between;">
+                <div style="width: 60%">
+                  <el-form ref="tableInfoForm" :inline="true"
+                           class="demo-form-inline">
+                    <el-table
+                      :data="respBodyTableDataSource"
+                      border
+                      style="width: 100%"
+                      @row-click="clickRowRespBody">
+                      <el-table-column align="center" label="选择" width="55">
+                        <template slot-scope="scope">
+                          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
+                          <el-radio v-model="selectVal" :label="scope.row.name" class="radio">&nbsp;
+                          </el-radio>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="节点"
+                        prop="name"
+                        width="100">
+                      </el-table-column>
+                      <el-table-column
+                        label="路径"
+                        prop="path"
+                        width="100">
+                      </el-table-column>
+                      <el-table-column
+                        label="数据包装器"
+                        prop="dataPackage"
+                        width="150">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-select v-model="scope.row.dataPackage">
+                              <el-option label="无" value="Null"></el-option>
+                              <el-option label="列表" value="Array"></el-option>
+                              <el-option label="对象" value="Object"></el-option>
+                            </el-select>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </el-form>
+                </div>
+                <div style="width: 140%;margin-left: 10px">
+                  <el-form ref="tableInfoForm" :inline="true" :model="tableInfoForm"
+                           class="demo-form-inline">
+                    <el-table
+                      :data="respBodyFieldDataSource"
+                      border
+                      style="width: 100%">
+                      <el-table-column
+                        label="字段名"
+                        prop="name"
+                        width="100">
+                      </el-table-column>
+                      <el-table-column
+                        label="数据类型"
+                        prop="dataType"
+                        width="100">
+                      </el-table-column>
+                      <el-table-column
+                        label="备注"
+                        prop="remark"
+                        width="120">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-input v-model="scope.row.remark"
+                                      placeholder="备注"></el-input>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="字段映射"
+                        prop="fieldMapping"
+                        width="140">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-input v-model="scope.row.fieldMapping"
+                                      placeholder="字段映射"></el-input>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="接口变量"
+                        prop="interfaceVariable"
+                        width="140">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-input v-model="scope.row.interfaceVariable"
+                                      placeholder="字段映射"></el-input>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="循环节点"
+                        prop="repeatValueNode"
+                        width="140">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-select v-if="scope.row.dataType === 'ARRAY'" v-model="scope.row.repeatValueNode">
+                              <el-option label="测试" value="test"></el-option>
+                            </el-select>
+                          </el-form-item>
+                        </template>
+                        <template slot="header" slot-scope="scope">
+                          {{ scope.column.label }}
+                          <el-tooltip class="item"
+                                      content="适用于循环分页接口；只有数据类型为ARRAY时才能操作；响应的每页数据将在选择的节点上进行数据合并"
+                                      effect="dark"
+                                      placement="top-start">
+                            <i class="el-icon-question"></i>
+                          </el-tooltip>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="值校验(条件)"
+                        prop="valueValidateCondition"
+                        width="140">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-select v-if="scope.row.dataType === 'STR'" v-model="scope.row.valueValidateCondition">
+                              <el-option label="测试" value="test"></el-option>
+                            </el-select>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                      <el-table-column
+                        label="值校验(值)"
+                        prop="valueValidateValue"
+                        width="150">
+                        <template slot-scope="scope">
+                          <el-form-item>
+                            <el-input v-model="scope.row.valueValidateValue"
+                                      placeholder=""></el-input>
+                          </el-form-item>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </el-form>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </ed-dialog>
+</template>
+
+<script>
+import {resolveMeta, saveMeta, getMeta} from "../../../../api/interface";
+
+export default {
+  name: "InterfaceMessage",
+  data() {
+    return {
+      loading: false,
+      visibleDialog: false,
+      activeTabName: 'requestHead',
+      form: {
+        xmlReqHeadConstruct: '',
+        xmlReqBodyConstruct: '',
+        xmlRespHeadConstruct: '',
+        xmlRespBodyConstruct: ''
+      },
+      reqHeadTableDataSource: [],
+      reqHeadFieldDataSource: [],
+
+      reqBodyTableDataSource: [],
+      reqBodyFieldDataSource: [],
+
+      respHeadTableDataSource: [],
+      respHeadFieldDataSource: [],
+
+      respBodyTableDataSource: [],
+      respBodyFieldDataSource: [],
+
+      selectVal: '',
+      tableInfoForm: {},
+      row: {keyInfoObject: {}},
+      title: ''
+    }
+  },
+
+  methods: {
+    show(row, title) {
+      this.row = row
+      this.title = title
+      this.visibleDialog = true
+      this.getInterfaceMeta()
+    },
+    refresh() {
+      this.reqHeadFieldDataSource = []
+      this.reqBodyFieldDataSource = []
+      this.respHeadFieldDataSource = []
+      this.respBodyFieldDataSource = []
+      this.getInterfaceMeta()
+    },
+    getInterfaceMeta() {
+      let params = {
+        dataSourceName: 'interface_meta',
+        key: {
+          interface_id: this.row.id,
+          type: 'request'
+        }
+      }
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+      });
+      getMeta(params).then((res) => {
+        if (res.success) {
+          if (res.data && res.data.dataInfoArray) {
+            if (res.data.dataInfoArray[0]) {
+              this.form.xmlReqHeadConstruct = res.data.dataInfoArray[0].source
+              let metas = res.data.dataInfoArray[0].meta
+              metas.forEach(meta => {
+                meta.metaType = 'requestHead'
+                return meta
+              })
+              this.reqHeadTableDataSource = metas
+            }
+            if (res.data.dataInfoArray[1]) {
+              this.form.xmlReqBodyConstruct = res.data.dataInfoArray[1].source
+              let metas = res.data.dataInfoArray[1].meta
+              metas.forEach(meta => {
+                meta.metaType = 'requestBody'
+                return meta
+              })
+              this.reqBodyTableDataSource = metas
+            }
+            if (res.data.dataInfoArray[2]) {
+              this.form.xmlRespHeadConstruct = res.data.dataInfoArray[2].source
+              let metas = res.data.dataInfoArray[2].meta
+              metas.forEach(meta => {
+                meta.metaType = 'responseHead'
+                return meta
+              })
+              this.respHeadTableDataSource = metas
+            }
+            if (res.data.dataInfoArray[3]) {
+              this.form.xmlRespBodyConstruct = res.data.dataInfoArray[3].source
+              let metas = res.data.dataInfoArray[3].meta
+              metas.forEach(meta => {
+                meta.metaType = 'responseBody'
+                return meta
+              })
+              this.respBodyTableDataSource = metas
+            }
+          }
+        } else {
+          this.$message.error(res.msg)
+        }
+      }).finally(() => {
+        loading.close()
+      })
+    },
+    handleClick() {
+    },
+    changeTextareaReqHead(val) {
+      this.form.xmlReqHeadConstruct = val
+    },
+    changeTextareaReqBody(val) {
+      this.form.xmlReqBodyConstruct = val
+    },
+    changeTextareaRespHead(val) {
+      this.form.xmlRespHeadConstruct = val
+    },
+    changeTextareaRespBody(val) {
+      this.form.xmlRespBodyConstruct = val
+    },
+    resolveReqHeadMeta() {
+      if (this.form.xmlReqHeadConstruct) {
+        //验证报文格式
+        let headRule = this.validateXml(this.form.xmlReqHeadConstruct)
+        if (headRule) {
+          this.$message.warning("请求head" + headRule.message)
+        } else {
+          const loading = this.$loading({
+            lock: true,
+            text: 'Loading',
+            spinner: 'el-icon-loading',
+          });
+          resolveMeta({source: this.form.xmlReqHeadConstruct}).then((res) => {
+            if (res.success) {
+              this.reqHeadTableDataSource = res.data
+            } else {
+              this.$message.error(res.msg)
+            }
+          }).finally(() => {
+            loading.close()
+          })
+        }
+      } else {
+        this.$message.warning('请输入请求head')
+      }
+    },
+    resolveReqBodyMeta() {
+      if (this.form.xmlReqBodyConstruct) {
+        //验证报文格式
+        let headRule = this.validateXml(this.form.xmlReqBodyConstruct)
+        if (headRule) {
+          this.$message.warning("请求body" + headRule.message)
+        } else {
+          const loading = this.$loading({
+            lock: true,
+            text: 'Loading',
+            spinner: 'el-icon-loading',
+          });
+          resolveMeta({source: this.form.xmlReqBodyConstruct}).then((res) => {
+            if (res.success) {
+              this.reqBodyTableDataSource = res.data
+            } else {
+              this.$message.error(res.msg)
+            }
+          }).finally(() => {
+            loading.close()
+          })
+        }
+      } else {
+        this.$message.warning('请输入请求body')
+      }
+    },
+    resolveRespHeadMeta() {
+      if (this.form.xmlRespHeadConstruct) {
+        //验证报文格式
+        let headRule = this.validateXml(this.form.xmlRespHeadConstruct)
+        if (headRule) {
+          this.$message.warning("响应head" + headRule.message)
+        } else {
+          const loading = this.$loading({
+            lock: true,
+            text: 'Loading',
+            spinner: 'el-icon-loading',
+          });
+          resolveMeta({source: this.form.xmlRespHeadConstruct}).then((res) => {
+            if (res.success) {
+              this.respHeadTableDataSource = res.data
+            } else {
+              this.$message.error(res.msg)
+            }
+          }).finally(() => {
+            loading.close()
+          })
+        }
+      } else {
+        this.$message.warning('请输入响应head')
+      }
+    },
+    resolveRespBodyMeta() {
+      if (this.form.xmlRespBodyConstruct) {
+        //验证报文格式
+        let headRule = this.validateXml(this.form.xmlRespBodyConstruct)
+        if (headRule) {
+          this.$message.warning("响应body" + headRule.message)
+        } else {
+          const loading = this.$loading({
+            lock: true,
+            text: 'Loading',
+            spinner: 'el-icon-loading',
+          });
+          resolveMeta({source: this.form.xmlRespBodyConstruct}).then((res) => {
+            if (res.success) {
+              this.respBodyTableDataSource = res.data
+            } else {
+              this.$message.error(res.msg)
+            }
+          }).finally(() => {
+            loading.close()
+          })
+        }
+      } else {
+        this.$message.warn('请输入响应body')
+      }
+    },
+    clickRowReqHead(row) {
+      this.selectVal = row.name
+      this.reqHeadFieldDataSource = row.fields
+    },
+    clickRowReqBody(row) {
+      this.selectVal = row.name
+      this.reqBodyFieldDataSource = row.fields
+    },
+    clickRowRespHead(row) {
+      this.selectVal = row.name
+      this.respHeadFieldDataSource = row.fields
+    },
+    clickRowRespBody(row) {
+      this.selectVal = row.name
+      this.respBodyFieldDataSource = row.fields
+    },
+    validateXml(value) {
+      try {
+        JSON.parse(value)
+      } catch (e) {
+        let xmlDoc;
+        // code for IE
+        if (window.ActiveXObject) {
+          xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
+          xmlDoc.async = "false";
+          xmlDoc.loadXML(value);
+
+          if (xmlDoc.parseError.errorCode != 0) {
+            return new Error('1格式不正确')
+          }
+        }
+        // code for Mozilla, Firefox, Opera, chrome, safari,etc.
+        else if (document.implementation.createDocument) {
+          let parser = new DOMParser();
+          xmlDoc = parser.parseFromString(value, "text/xml");
+          let error = xmlDoc.getElementsByTagName("parsererror");
+          if (error.length > 0) {
+            return new Error('2格式不正确')
+          }
+        } else {
+          return new Error('3格式不正确')
+        }
+      }
+    },
+    saveInterfaceMeta() {
+      let paramsRequest = {
+        dataSourceName: 'interface_meta',
+        data: [
+          {
+            source: this.form.xmlReqHeadConstruct,
+            meta: this.reqHeadTableDataSource
+          },
+          {
+            source: this.form.xmlReqBodyConstruct,
+            meta: this.reqBodyTableDataSource
+          },
+          {
+            source: this.form.xmlRespHeadConstruct,
+            meta: this.respHeadTableDataSource
+          },
+          {
+            source: this.form.xmlRespBodyConstruct,
+            meta: this.respBodyTableDataSource
+          }
+        ],
+        key: {
+          interface_id: this.row.id,
+          type: 'request'
+        }
+      }
+      this.loading = true
+      saveMeta(paramsRequest).then((res) => {
+        if (res.success) {
+          this.$message.success(res.msg)
+        } else {
+          this.$message.error(res.msg)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    closeDialog() {
+      this.visibleDialog = false
+    },
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item {
+  margin-bottom: 0px
+}
+
+</style>