| 1 |
- {"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\setting\\systemOutInterface\\debugging.vue?vue&type=style&index=1&id=50d9a348&lang=scss&scoped=true","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\setting\\systemOutInterface\\debugging.vue","mtime":1761185180190},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQouY29udGVudCB7DQogIHBhZGRpbmc6IDEycHg7DQogIC5oZWFkIHsNCiAgICBkaXNwbGF5OiBmbGV4Ow0KICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogICAgLml0ZW0gew0KICAgICAgZGlzcGxheTogZmxleDsNCiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogICAgICBtYXJnaW4tYm90dG9tOiAxMnB4Ow0KICAgICAgZm9udC1zaXplOiAxNHB4Ow0KICAgICAgLnRpdGxlIHsNCiAgICAgICAgbWFyZ2luLXJpZ2h0OiAxNHB4Ow0KICAgICAgfQ0KICAgIH0NCiAgfQ0KfQ0KLmNvcHktYnRuIHsNCiAgZGlzcGxheTogZmxleDsNCiAganVzdGlmeS1jb250ZW50OiByaWdodDsNCn0NCg=="},{"version":3,"sources":["debugging.vue"],"names":[],"mappings":";AAucA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"debugging.vue","sourceRoot":"src/pages/setting/systemOutInterface","sourcesContent":["<template>\r\n <div class=\"content\" v-if=\"interfaceData\">\r\n <div class=\"head\">\r\n <el-input v-model=\"interfaceData.url\">\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 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.request_params\"\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 v-model=\"row.type\" transfer>\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=\"row.type === 'array'\"\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 <vxe-table\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 v-model=\"row.type\" transfer>\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=\"row.type === 'array'\"\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 <el-button class=\"mt10\" type=\"primary\" v-db-click @click=\"insertEvent('yTable')\">添加参数</el-button>\r\n </div>\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 field=\"type\" title=\"类型\" width=\"200\" :edit-render=\"{}\">\r\n <template #default=\"{ row }\">\r\n <vxe-select v-model=\"row.type\" transfer>\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 title=\"操作\" width=\"100\">\r\n <template #default=\"{ row }\">\r\n <vxe-button\r\n type=\"text\"\r\n v-if=\"row.type === 'array'\"\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 <h4 class=\"mt10 title\">全局Header参数</h4>\r\n <vxe-table\r\n class=\"mt10\"\r\n resizable\r\n show-overflow\r\n keep-source\r\n ref=\"zaTable\"\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.allHeaderData\"\r\n >\r\n <vxe-column field=\"attribute\" width=\"300\" title=\"属性\" tree-node :edit-render=\"{}\">\r\n <template #default=\"{ row }\">\r\n <span>{{ row.attribute || '' }}</span>\r\n </template>\r\n </vxe-column>\r\n <vxe-column field=\"value\" title=\"参数值\" :edit-render=\"{}\">\r\n <template #default=\"{ row }\">\r\n <span>{{ row.value || '' }}</span>\r\n </template>\r\n </vxe-column>\r\n <vxe-column field=\"type\" title=\"类型\" width=\"200\" :edit-render=\"{}\">\r\n <template #default=\"{ row }\">\r\n <span>{{ row.type || '' }}</span>\r\n </template>\r\n </vxe-column>\r\n <vxe-column field=\"trip\" title=\"说明\" :edit-render=\"{}\">\r\n <template #default=\"{ row }\">\r\n <span>{{ row.trip || '' }}</span>\r\n </template>\r\n </vxe-column>\r\n </vxe-table>\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\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 },\r\n data() {\r\n return {\r\n interfaceData: undefined,\r\n paramsType: 'Params',\r\n editor: '', //当前编辑器对象\r\n codes: '',\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_params));\r\n },\r\n mounted() {},\r\n methods: {\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.interfaceData.url;\r\n method = this.interfaceData.method;\r\n params = this.filtersData((await this.$refs.xTable.getTableData().tableData) || []);\r\n body = this.filtersData((await this.$refs.yTable.getTableData().tableData) || []);\r\n let h = this.filtersData((await this.$refs.zTable.getTableData().tableData) || []);\r\n let h1 = this.filtersData((await this.$refs.zaTable.getTableData().tableData) || []);\r\n headers = {\r\n ...h,\r\n ...h1,\r\n };\r\n requestMethod(url, method, params, body, headers)\r\n .then((res) => {\r\n this.codes = res + '';\r\n })\r\n .catch((err) => {\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 !== '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 filtersObj(obj) {\r\n let x = {};\r\n for (let i in obj) {\r\n if (i == 'attribute') {\r\n if (obj.type !== 'array') {\r\n x[obj[i]] = obj.value || '';\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() {\r\n if (this.paramsType === 'Header') {\r\n if (!this.interfaceData.headerData) {\r\n this.insertEvent('zTable', {\r\n attribute: 'Content-Type',\r\n value: 'application/x-www-form-urlencoded',\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</style>\r\n"]}]}
|
