{"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=0&id=50d9a348&lang=css","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\\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:DQoudnhlLXNlbGVjdC0tcGFuZWwuaXMtLXRyYW5zZmVyIHsNCiAgei1pbmRleDogOTk5OTkgIWltcG9ydGFudDsNCn0NCg=="},{"version":3,"sources":["debugging.vue"],"names":[],"mappings":";AAkcA;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"]}]}