thoth-frontend-test/src/views/apiManagement/apiList.vue

<template>
  <div>
    <div v-if="isDetail == false" class="column">
      <div class="titDiv">
        <div class="titIcon" />
        <div class="titSonName">{{ arr[0] }}</div>
      </div>
      <el-input v-model="describe" clearable size="small" placeholder="点击添加描述" />
      <!-- <p style="font-size:14px; font-family:MicrosoftYaHei; color:rgba(51,51,51,1); line-height:19px;">com.kuaidadi.liangjian.order.api.PassRemoteService</p> -->
      <!-- <el-input v-model="describe" clearable size="small" placeholder="点击添加描述" /> -->
      <div align="center" style="margin: 1%;">
        <el-table :data="tableData" :header-cell-style="{ background: '#F0F2F4', color: '#333B4A' }" size="mini" width="80%" border show-overflow-tooltip="true">
          <el-table-column label="接口名称" prop="date" align="center" min-width="120">
            <template slot-scope="scope"><a href="javascript:void(0)" style="color:#20a0ff" @click="apiDetails(scope.row)">{{ scope.row.date }}</a></template>
          </el-table-column>
          <!-- <el-table-column label="接口名称" min-width="120" align="center"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column> -->
          <el-table-column label="接口路径" min-width="120" align="center"><template slot-scope="scope">{{ scope.row.name }}</template></el-table-column>
          <el-table-column label="接口分类" min-width="120" align="center"><template slot-scope="scope">{{ scope.row.address }}</template></el-table-column>
        </el-table>
        <el-pagination :current-page.sync="currentPage1" :page-sizes="[15]" background layout="total, prev, pager, next" :total="total1" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>

    </div>
    <apiDetails v-if="isDetail"/>
  </div>
</template>

<script>
import '@/views/apiManagement/css/index.css'
import apiDetails from '@/views/apiManagement/vue/index'

export default {
  components: {
    apiDetails
  },
  data() {
    return {
      didi: '{ "code":200, "data":{ "orderDetailResult":{ "startPosAddr":"", "endPosName":"河滨之城", "endLng":120.164301, "passengerId":299069687413522, "publishPosAddr":"", "startCityId":0, "originalTotalMoney":0.01, "sendType":1, "publishLng":120.15798569, "fromChannel":1, "voucherAmount":0, "recipient":"小桔", "driverPayType":0, "passengerContactMob":"18605666666", "publishLat":30.28892124, "extraInfo":"馥芮白", "endLat":30.272421, "startCountryId":0, "orderId":5786944445359890, "publishContactMob":"00016013745", "publishTime":1583681227510, "endCityId":330100, "status":2000, "startLng":0, "extraData":"{"productDetail":"星巴克","extraInfo":"馥芮白"}", "endPosAddr":"6单元1602", "startPosName":"", "endCountryId":330103, "productDetail":"星巴克", "totalFee":0.01, "payStatus":0, "startLat":0, "feeItems":[ { "money":0.01, "label":"跑腿费", "type":10 } ], "payType":0, "bizType":0, "serviceCategory":613, "publishPosName":"" } }, "msg":"SUCCESS" }',
      value: '',
      centerDialogVisible: false,
      describe: '',
      textarea2: '',
      isDetail: false,
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路',
        children: [{
          id: 31,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路'
        }, {
          id: 32,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路'
        }]
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路'
      }],
      tableData1: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路',
        hasChildren: true
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路'
      }],
      arr: ['乘客远程服务接口共 10 个', 'OrderVoucherRemoteService 代金券远程服务', 'PedestrianVehicleSepRemoteService 人车分离远程服务', 'SmoothMoveRemoteService 平滑移动远程服务', 'Vehicle2BOrderRemoteService B端商户远程服务', 'DriverOrderQueryRemoteService 司机订单查询远程服务']
    }
  },
  created() {
    this.getLsit(this.didi)
  },
  methods: {
    apiDetails() {
      this.isDetail = true
    },
    init(e, ele) {
      console.log(e)
    },
    getLsit: function(jsonStr) {
      var res = ''
      for (var i = 0, j = 0, k = 0, ii, ele; i < jsonStr.length; i++) { // k:缩进，j:""个数
        ele = jsonStr.charAt(i)
        if (j % 2 === 0 && ele === '}') {
          k--
          for (ii = 0; ii < k; ii++) ele = '    ' + ele
          ele = '\n' + ele
        } else if (j % 2 === 0 && ele === '{') {
          ele += '\n'
          k++
          for (ii = 0; ii < k; ii++) ele += '    '
        } else if (j % 2 === 0 && ele === ',') {
          ele += '\n'
          for (ii = 0; ii < k; ii++) ele += '    '
        } else if (ele === '"') j++
        res += ele
      }
      // eslint-disable-next-line no-return-assign
      return this.didi = res
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 31,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id: 32,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }
        ])
      }, 1000)
    }
  }
}
</script>