| 1 |
- {"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"]}]}
|
