{"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\system\\backendRouting\\debugging.vue?vue&type=style&index=0&id=75def33d&lang=css","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\system\\backendRouting\\debugging.vue","mtime":1761614939067},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoudnhlLXNlbGVjdC0tcGFuZWwuaXMtLXRyYW5zZmVyIHsNCiAgei1pbmRleDogOTk5OTkgIWltcG9ydGFudDsNCn0NCg=="},{"version":3,"sources":["debugging.vue"],"names":[],"mappings":";AA2eA;AACA;AACA","file":"debugging.vue","sourceRoot":"src/pages/system/backendRouting","sourcesContent":["<template>\r\n  <div class=\"content\" v-if=\"interfaceData\">\r\n    <div class=\"head\">\r\n      <el-input v-model=\"interfaceData.path\">\r\n        <template #prepend>\r\n          <el-select v-model=\"interfaceData.method\" style=\"width: 120px\">\r\n            <el-option\r\n              v-for=\"(item, index) in requestTypeList\"\r\n              :key=\"index\"\r\n              :value=\"item.value\"\r\n              :label=\"item.label\"\r\n            ></el-option>\r\n          </el-select>\r\n        </template>\r\n      </el-input>\r\n      <el-button class=\"ml20\" type=\"primary\" v-db-click @click=\"requestData\">请求</el-button>\r\n      <el-button v-if=\"codes\" class=\"ml10 copy-btn\" type=\"success\" v-db-click @click=\"insertCopy()\">复制结果</el-button>\r\n    </div>\r\n    <div class=\"params\">\r\n      <el-tabs class=\"mt10\" v-model=\"paramsType\" @tab-click=\"changeTab\">\r\n        <el-tab-pane label=\"Params\" name=\"Params\"> </el-tab-pane>\r\n        <el-tab-pane label=\"Body\" name=\"Body\"> </el-tab-pane>\r\n        <el-tab-pane label=\"Header\" name=\"Header\"> </el-tab-pane>\r\n      </el-tabs>\r\n      <div v-show=\"paramsType === 'Params'\">\r\n        <vxe-table\r\n          class=\"mt10\"\r\n          resizable\r\n          show-overflow\r\n          keep-source\r\n          ref=\"xTable\"\r\n          row-id=\"id\"\r\n          :print-config=\"{}\"\r\n          :export-config=\"{}\"\r\n          :tree-config=\"{ transform: true, rowField: 'id', parentField: 'parentId' }\"\r\n          :data=\"interfaceData.query\"\r\n        >\r\n          <vxe-column field=\"attribute\" width=\"150\" title=\"属性\" tree-node :edit-render=\"{}\">\r\n            <template #default=\"{ row }\">\r\n              <vxe-input v-model=\"row.attribute\" type=\"text\"></vxe-input>\r\n            </template>\r\n          </vxe-column>\r\n          <vxe-column field=\"value\" title=\"参数值\" :edit-render=\"{}\">\r\n            <template #default=\"{ row }\">\r\n              <vxe-input v-model=\"row.value\" type=\"text\"></vxe-input>\r\n            </template>\r\n          </vxe-column>\r\n          <vxe-column field=\"type\" title=\"类型\" width=\"120\" :edit-render=\"{}\">\r\n            <template #default=\"{ row }\">\r\n              <vxe-select\r\n                v-model=\"row.type\"\r\n                transfer\r\n                @change=\"\r\n                  (val) => {\r\n                    handleChange(val, row, 'xTable');\r\n                  }\r\n                \"\r\n              >\r\n                <vxe-option\r\n                  v-for=\"item in typeList\"\r\n                  :key=\"item.value\"\r\n                  :value=\"item.value\"\r\n                  :label=\"item.label\"\r\n                ></vxe-option>\r\n              </vxe-select>\r\n            </template>\r\n          </vxe-column>\r\n          <!-- <vxe-column field=\"must\" title=\"必填\" width=\"50\" :edit-render=\"{}\">\r\n            <template #default=\"{ row }\">\r\n              <span>{{ row.must == '1' ? '是' : '否' }}</span>\r\n            </template>\r\n          </vxe-column>\r\n          <vxe-column field=\"trip\" width=\"150\" title=\"说明\" :edit-render=\"{}\">\r\n            <template #default=\"{ row }\">\r\n              <vxe-input v-model=\"row.trip\" type=\"text\"></vxe-input>\r\n            </template>\r\n          </vxe-column> -->\r\n          <vxe-column title=\"操作\" width=\"120\">\r\n            <template #default=\"{ row }\">\r\n              <vxe-button\r\n                type=\"text\"\r\n                v-if=\"['array', 'object'].includes(row.type)\"\r\n                status=\"primary\"\r\n                v-db-click\r\n                @click=\"insertRow(row, 'xTable')\"\r\n                >插入</vxe-button\r\n              >\r\n              <vxe-button type=\"text\" status=\"primary\" v-db-click @click=\"removeRow(row, 'xTable')\">删除</vxe-button>\r\n            </template>\r\n          </vxe-column>\r\n        </vxe-table>\r\n        <el-button class=\"mt10\" type=\"primary\" v-db-click @click=\"insertEvent('xTable')\">添加参数</el-button>\r\n      </div>\r\n      <div v-show=\"paramsType === 'Body'\">\r\n        <el-radio-group v-model=\"bodyType\" class=\"mt10\">\r\n          <el-radio label=\"form-data\"></el-radio>\r\n          <el-radio label=\"json\"></el-radio>\r\n        </el-radio-group>\r\n        <vxe-table\r\n          v-if=\"bodyType == 'form-data'\"\r\n          class=\"mt10\"\r\n          resizable\r\n          show-overflow\r\n          keep-source\r\n          ref=\"yTable\"\r\n          row-id=\"id\"\r\n          :print-config=\"{}\"\r\n          :export-config=\"{}\"\r\n          :tree-config=\"{ transform: true, rowField: 'id', parentField: 'parentId' }\"\r\n          :data=\"interfaceData.request_body\"\r\n        >\r\n          <vxe-column field=\"attribute\" width=\"150\" title=\"属性\" tree-node :edit-render=\"{}\">\r\n            <template #default=\"{ row }\">\r\n              <vxe-input v-model=\"row.attribute\" type=\"text\"></vxe-input>\r\n            </template>\r\n          </vxe-column>\r\n          <vxe-column field=\"value\" title=\"参数值\" :edit-render=\"{}\">\r\n            <template #default=\"{ row }\">\r\n              <vxe-input v-model=\"row.value\" type=\"text\"></vxe-input>\r\n            </template>\r\n          </vxe-column>\r\n          <vxe-column field=\"type\" title=\"类型\" width=\"120\" :edit-render=\"{}\">\r\n            <template #default=\"{ row }\">\r\n              <vxe-select\r\n                v-model=\"row.type\"\r\n                transfer\r\n                @change=\"\r\n                  (val) => {\r\n                    handleChange(val, row, 'yTable');\r\n                  }\r\n                \"\r\n              >\r\n                <vxe-option\r\n                  v-for=\"item in typeList\"\r\n                  :key=\"item.value\"\r\n                  :value=\"item.value\"\r\n                  :label=\"item.label\"\r\n                ></vxe-option>\r\n              </vxe-select>\r\n            </template>\r\n          </vxe-column>\r\n          <!-- <vxe-column field=\"must\" title=\"必填\" width=\"50\" :edit-render=\"{}\">\r\n            <template #default=\"{ row }\">\r\n              <span>{{ row.must == '1' ? '是' : '否' }}</span>\r\n            </template>\r\n          </vxe-column>\r\n          <vxe-column field=\"trip\" title=\"说明\" width=\"150\" :edit-render=\"{}\">\r\n            <template #default=\"{ row }\">\r\n              <vxe-input v-model=\"row.trip\" type=\"text\"></vxe-input>\r\n            </template>\r\n          </vxe-column> -->\r\n          <vxe-column title=\"操作\" width=\"120\">\r\n            <template #default=\"{ row }\">\r\n              <vxe-button\r\n                type=\"text\"\r\n                v-if=\"['array', 'object'].includes(row.type)\"\r\n                status=\"primary\"\r\n                v-db-click\r\n                @click=\"insertRow(row, 'yTable')\"\r\n                >插入</vxe-button\r\n              >\r\n              <vxe-button type=\"text\" status=\"primary\" v-db-click @click=\"removeRow(row, 'yTable')\">删除</vxe-button>\r\n            </template>\r\n          </vxe-column>\r\n        </vxe-table>\r\n        <div v-else>\r\n          <el-input v-model=\"jsonBody\" type=\"textarea\" :rows=\"8\" placeholder=\"请求数据\" />\r\n        </div>\r\n        <el-button v-if=\"bodyType == 'form-data'\" class=\"mt10\" type=\"primary\" v-db-click @click=\"insertEvent('yTable')\"\r\n          >添加参数</el-button\r\n        >\r\n      </div>\r\n\r\n      <div v-show=\"paramsType === 'Header'\">\r\n        <vxe-table\r\n          class=\"mt10\"\r\n          resizable\r\n          show-overflow\r\n          keep-source\r\n          ref=\"zTable\"\r\n          row-id=\"id\"\r\n          :print-config=\"{}\"\r\n          :export-config=\"{}\"\r\n          :tree-config=\"{ transform: true, rowField: 'id', parentField: 'parentId' }\"\r\n          :data=\"interfaceData.headerData\"\r\n        >\r\n          <vxe-column field=\"attribute\" width=\"300\" title=\"属性\" tree-node :edit-render=\"{}\">\r\n            <template #default=\"{ row }\">\r\n              <vxe-input v-model=\"row.attribute\" type=\"text\"></vxe-input>\r\n            </template>\r\n          </vxe-column>\r\n          <vxe-column field=\"value\" title=\"参数值\" :edit-render=\"{}\">\r\n            <template #default=\"{ row }\">\r\n              <vxe-input v-model=\"row.value\" type=\"text\"></vxe-input>\r\n            </template>\r\n          </vxe-column>\r\n          <vxe-column title=\"操作\" width=\"100\">\r\n            <template #default=\"{ row }\">\r\n              <vxe-button\r\n                type=\"text\"\r\n                v-if=\"['array', 'object'].includes(row.type)\"\r\n                status=\"primary\"\r\n                v-db-click\r\n                @click=\"insertRow(row, 'zTable')\"\r\n                >插入</vxe-button\r\n              >\r\n              <vxe-button type=\"text\" status=\"primary\" v-db-click @click=\"removeRow(row, 'zTable')\">删除</vxe-button>\r\n            </template>\r\n          </vxe-column>\r\n        </vxe-table>\r\n        <el-button class=\"mt10\" type=\"primary\" v-db-click @click=\"insertEvent('zTable')\">添加参数</el-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"res mt10 mb10\" v-if=\"codes\">\r\n      <MonacoEditor :codes=\"codes\" :readOnly=\"true\" />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport request from './request';\r\nimport MonacoEditor from './components/MonacoEditor.vue';\r\nimport vuedraggable from 'vuedraggable';\r\nimport { getCookies } from '@/libs/util';\r\n\r\nfunction requestMethod(url, method, params, data, headerItem) {\r\n  return request({\r\n    url,\r\n    method,\r\n    params,\r\n    data,\r\n    headerItem,\r\n  });\r\n}\r\nexport default {\r\n  components: { MonacoEditor },\r\n  props: {\r\n    formValidate: {\r\n      type: Object,\r\n      default: () => {\r\n        return {};\r\n      },\r\n    },\r\n    requestTypeList: {\r\n      type: Array,\r\n      default: () => {\r\n        return [];\r\n      },\r\n    },\r\n    typeList: {\r\n      type: Array,\r\n      default: () => {\r\n        return [];\r\n      },\r\n    },\r\n    apiType: {\r\n      type: String,\r\n      default: 'adminapi',\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      bodyType: 'form-data',\r\n      interfaceData: undefined,\r\n      paramsType: 'Params',\r\n      editor: '', //当前编辑器对象\r\n      codes: '',\r\n      jsonBody: '',\r\n    };\r\n  },\r\n  created() {\r\n    this.interfaceData = this.formValidate;\r\n    this.interfaceData.request_body = JSON.parse(JSON.stringify(this.interfaceData.request));\r\n  },\r\n  mounted() {\r\n    if (!this.$refs.zTable.getTableData().tableData.length && this.apiType == 'adminapi') {\r\n      this.insertEvent('zTable', {\r\n        attribute: 'Authori-Zation',\r\n        value: 'Bearer ' + getCookies('token'),\r\n      });\r\n      // this.insertEvent('zaTable');\r\n    } else {\r\n      if (this.interfaceData.header) {\r\n        this.interfaceData.header.forEach((item, index) => {\r\n          this.insertEvent('zTable', {\r\n            attribute: item.attribute || '',\r\n            value: item.value || '',\r\n          });\r\n        });\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    async handleChange(e, row, type) {\r\n      if (e.value !== 'array' && e.value !== 'object') {\r\n        if (row.children.length) {\r\n          let arr = this.$refs[type].getTableData().tableData;\r\n          let id = row.children[0].parentId;\r\n          const $table = this.$refs[type];\r\n          for (let i = 0; i < arr.length; i++) {\r\n            if (arr[i].parentId == id) {\r\n              await $table.remove(arr[i]);\r\n            }\r\n          }\r\n        }\r\n      }\r\n    },\r\n    insertCopy() {\r\n      this.$copyText(this.codes)\r\n        .then((message) => {\r\n          this.$message.success('复制成功');\r\n        })\r\n        .catch((err) => {\r\n          this.$message.error('复制失败');\r\n        });\r\n    },\r\n    async requestData() {\r\n      let url, method, params, body, headers;\r\n      url = this.apiType + '/' + this.interfaceData.path;\r\n      method = this.interfaceData.method;\r\n      params = this.filtersData((await this.$refs.xTable.getTableData().tableData) || []);\r\n      body =\r\n        this.bodyType === 'json'\r\n          ? this.jsonBody\r\n          : this.filtersData((await this.$refs.yTable.getTableData().tableData) || []);\r\n      let h = this.filtersData((await this.$refs.zTable.getTableData().tableData) || []);\r\n      headers = h;\r\n      this.codes = '';\r\n      requestMethod(url, method, params, body, headers)\r\n        .then((res) => {\r\n          if (!res) return this.$message.error('接口异常');\r\n          this.codes = JSON.stringify(res);\r\n        })\r\n        .catch((err) => {\r\n          if (!err) return this.$message.error('接口异常');\r\n          this.codes = JSON.stringify(err);\r\n        });\r\n    },\r\n    filtersData(arr) {\r\n      try {\r\n        let x = {};\r\n        arr.map((e) => {\r\n          if (!e.parentId) {\r\n            for (let i in e) {\r\n              if (i == 'attribute') {\r\n                if (e.type === 'object') {\r\n                  let obj = {};\r\n\r\n                  e.children.map((item, index) => {\r\n                    obj = this.filtersObj(item, 1);\r\n                  });\r\n                  x[e[i]] = obj;\r\n                } else if (e.type !== 'array') {\r\n                  x[e[i]] = e.value || '';\r\n                } else {\r\n                  let arr = [];\r\n                  e.children.map((item, index) => {\r\n                    arr[index] = this.filtersObj(item);\r\n                  });\r\n                  x[e[i]] = arr;\r\n                }\r\n              }\r\n            }\r\n          }\r\n        });\r\n        return x;\r\n      } catch (error) {\r\n        console.log(error);\r\n      }\r\n    },\r\n    // type 1 为obj属性\r\n    filtersObj(obj, type) {\r\n      let x = {};\r\n      for (let i in obj) {\r\n        if (i == 'attribute') {\r\n          if (obj.type === 'object') {\r\n            let oj = {};\r\n            obj.children.map((item, index) => {\r\n              oj[obj.attribute] = this.filtersObj(item);\r\n            });\r\n            x = oj;\r\n          } else if (obj.type !== 'array') {\r\n            if (type) {\r\n              x[obj.attribute] = obj.value || '';\r\n            } else {\r\n              x[obj[i]] = obj.value || '';\r\n            }\r\n          } else {\r\n            let arr = [];\r\n            obj.children.map((item, index) => {\r\n              arr[index] = this.filtersObj(item);\r\n            });\r\n            x[obj[i]] = arr;\r\n          }\r\n        }\r\n      }\r\n      return x;\r\n    },\r\n    changeTab(name) {\r\n      // if (name === 'Header') {\r\n      //   if (!this.$refs.zTable.getTableData().tableData.length) {\r\n      //     this.insertEvent('zTable', {\r\n      //       attribute: 'Authori-Zation',\r\n      //       value: 'Bearer ' + getCookies('token'),\r\n      //     });\r\n      //     this.insertEvent('zaTable');\r\n      //   }\r\n      // }\r\n    },\r\n    async insertEvent(type, d) {\r\n      const $table = this.$refs[type];\r\n      let newRow;\r\n      if (type == 'xTable') {\r\n        newRow = {\r\n          attribute: '',\r\n          type: 'string',\r\n          must: 0,\r\n          value: '',\r\n          trip: '',\r\n        };\r\n      } else if (type == 'yTable') {\r\n        newRow = {\r\n          attribute: '',\r\n          type: 'string',\r\n          value: '',\r\n          must: 0,\r\n          trip: '',\r\n        };\r\n      } else if (type == 'zTable') {\r\n        newRow = {\r\n          attribute: '',\r\n          type: '',\r\n          value: '',\r\n          trip: '',\r\n        };\r\n        newRow = { ...newRow, ...d };\r\n      } else if (type == 'zaTable') {\r\n        newRow = {\r\n          attribute: 'token',\r\n          type: 'string',\r\n          value: '',\r\n          must: 0,\r\n          trip: '',\r\n        };\r\n      } else {\r\n        newRow = {\r\n          code: '',\r\n          value: '',\r\n          solution: '',\r\n        };\r\n      }\r\n      const { row: data } = await $table.insertAt(newRow, -1);\r\n      await $table.setActiveCell(data, 'name');\r\n    },\r\n    async insertRow(currRow, type) {\r\n      const $table = this.$refs[type];\r\n      // 如果 null 则插入到目标节点顶部\r\n      // 如果 -1 则插入到目标节点底部\r\n      // 如果 row 则有插入到效的目标节点该行的位置\r\n      let record;\r\n      if (type == 'xTable') {\r\n        record = {\r\n          attribute: '',\r\n          type: 'string',\r\n          must: 0,\r\n          value: '',\r\n          trip: '',\r\n          id: Date.now(),\r\n          parentId: currRow.id, // 需要指定父节点，自动插入该节点中\r\n        };\r\n      } else {\r\n        record = {\r\n          code: '',\r\n          value: '',\r\n          solution: '',\r\n          id: Date.now(),\r\n          parentId: currRow.id, // 需要指定父节点，自动插入该节点中\r\n        };\r\n      }\r\n      const { row: newRow } = await $table.insertAt(record, -1);\r\n      await $table.setTreeExpand(currRow, true); // 将父节点展开\r\n      await $table.setActiveRow(newRow); // 插入子节点\r\n    },\r\n    async removeRow(row, type) {\r\n      const $table = this.$refs[type];\r\n      await $table.remove(row);\r\n    },\r\n  },\r\n};\r\n</script>\r\n<style>\r\n.vxe-select--panel.is--transfer {\r\n  z-index: 99999 !important;\r\n}\r\n</style>\r\n<style lang=\"scss\" scoped>\r\n.content {\r\n  padding: 12px;\r\n  .head {\r\n    display: flex;\r\n    align-items: center;\r\n    .item {\r\n      display: flex;\r\n      align-items: center;\r\n      margin-bottom: 12px;\r\n      font-size: 14px;\r\n      .title {\r\n        margin-right: 14px;\r\n      }\r\n    }\r\n  }\r\n}\r\n.copy-btn {\r\n  display: flex;\r\n  justify-content: right;\r\n}\r\n::v-deep .monaco-editor {\r\n  min-height: 700px;\r\n}\r\n</style>\r\n"]}]}