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

<template>
  <el-container>
    <el-aside class="ApiLeft">
      <div class="ApiContent">
        <div class="Api_space_evenly">
          <div :class="{'Api_Interface_list' : Interface_list === '接口列表'}" class="Api_cursor" @click="InterfaceLeft('接口列表')">接口列表</div>
          <div :class="{'Api_Interface_list' : Interface_list === '接口分类'}" class="Api_cursor" @click="InterfaceLeft('接口分类')">接口分类</div>
        </div>
        <div class="Api_search">
          <el-input v-model="value" style="width: 55%;" size="mini" prefix-icon="el-icon-search" clearable filterable placeholder="请搜索接口" />
          <el-button v-if="Interface_list === '接口列表'" style="margin-left:4%" type="primary" size="mini" @click="addPort()">查询</el-button>
          <el-button v-if="Interface_list === '接口分类'" style="margin-left:4%" type="primary" size="mini" @click="addPort()">添加分类</el-button>
        </div>
        <div>
          <el-tree
            :data="data1"
            node-key="id"
            empty-text="无相关接口，请确定搜索内容"
            default-expand-all
            :default-expanded-keys="key_arr"
            :expand-on-click-node="false"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
              <span>{{ node.label }}</span>
              <span v-show="data.row && data.del">
                <el-tooltip class="item" effect="dark" content="添加接口" placement="top">
                  <span v-if="Interface_list === '接口分类'" class="el-icon-plus Api_btn" @click="() => append(data)" />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="修改接口" placement="top">
                  <span v-if="Interface_list === '接口分类'" class="el-icon-edit Api_btn" @click="() => dblclick(data)" />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除接口" placement="top">
                  <span v-if="Interface_list === '接口分类'" class="el-icon-delete Api_btn" @click="() => remove(data)" />
                </el-tooltip>
              </span>
            </span>
          </el-tree>
        </div>
        <div align="center" style="margin: 2% 0 10%;"><el-input v-if="ElMenu" v-model="value" style="width: 90%;" size="mini" prefix-icon="el-icon-search" clearable filterable placeholder="请搜索接口" /></div>
        <!--添加接口-->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddPortVisible" width="40%">
          <div style="margin-left:60px">
            <el-form ref="addDeviceForms" :rules="addDeviceDataRules" :model="addDeviceData">
              <el-form-item label="模块" prop="lockModel" label-width="80px">
                <el-select v-model="addDeviceData.lockModel" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;" @change="chooseVehicleType()">
                  <el-option v-for="item in lockModelList" :key="item.model" :label="item.modelName" :value="item.model" />
                </el-select>
              </el-form-item>
              <el-form-item label="版本" prop="lockModel" label-width="80px">
                <el-select v-model="addDeviceData.lockModel" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;" @change="chooseVehicleType()">
                  <el-option v-for="item in lockModelList" :key="item.model" :label="item.modelName" :value="item.model" />
                </el-select>
              </el-form-item>
              <el-form-item label="接口类名" prop="bikeModel" label-width="80px">
                <el-select v-model="addDeviceData.bikeModel" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;">
                  <el-option v-for="item in bikeModelList" :key="item.model" :label="item.modelName" :value="item.model" />
                </el-select>
              </el-form-item>
              <el-form-item label="方法名" prop="bikeModel" label-width="80px">
                <el-select v-model="addDeviceData.bikeModel" size="small" class="filter-item" filterable clearable placeholder="请填写" style="width:75%;">
                  <el-option v-for="item in bikeModelList" :key="item.model" :label="item.modelName" :value="item.model" />
                </el-select>
              </el-form-item>
              <el-form-item label="api版本" label-width="80px">
                <el-input v-model="addDeviceData.deviceNum" size="small" style="width:75%;" clearable placeholder="请填写" />
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogAddPortVisible = false">取消</el-button>
            <el-button size="small" type="primary">确定</el-button>
          </div>
          <div style="margin-top:5%" />
        </el-dialog>

      </div>
    </el-aside>
    <el-main class="ApiRight">
      <div v-show="home" class="ApiRightContent">
        <div class="Layout">
          <div class="titFont" style="padding: 15px 0; font-size: 22px; font-family:PingFangSC-Medium,PingFang SC;font-weight:500; color:rgba(51,59,74,1); line-height:35px;">API </div>
          <el-input v-model="value" style="width: 25%;" size="small" prefix-icon="el-icon-search" clearable filterable placeholder="请搜索接口" />
        </div>
        <el-divider style="color: #EEF0F5; margin: 0 !important" />
        <div style="font-size:18px; padding: 8% 0 1%; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; color:rgba(51,59,74,1); line-height:35px;">API接口管理平台介绍及接入文档</div>
        <div style="font-size:14px; width: 80%; font-family:PingFangSC-Regular,PingFang SC; font-weight:400; color:rgba(102,102,102,1); line-height:20px;">计划与EMC合作建设公司级反馈平台，覆盖所有内外部反馈，内部大区、客服等渠道反馈，专项工作组case反馈跟踪等场景，项目较大，处于立项阶段，期望收集更多信息和建议。</div>
      </div>
      <div v-show="Details" class="ApiRight">
        <div class="ApiRightContent" style=" overflow:scroll; overflow-x: hidden">
          <apiDetails ref="Q_details" />
        </div>
      </div>
    </el-main>
    <!-- 新建节点 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddTypeVisible" width="40%">
      <div style="margin-left:60px">
        <el-form ref="addDeviceForms" :rules="addDeviceDataRules" :model="addDeviceData">
          <el-form-item label="分类名" prop="lockModel" label-width="80px">
            <el-input v-model="addDeviceData.lockModel" size="small" clearable style="width:75%;" placeholder="请填写" />
          </el-form-item>
          <el-form-item label="备注" label-width="80px">
            <el-input v-model="addDeviceData.deviceNum" size="small" clearable style="width:75%;" placeholder="请填写" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogAddTypeVisible = false">取消</el-button>
        <el-button size="small" type="primary">确定</el-button>
      </div>
    </el-dialog>
  </el-container>

</template>

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

export default {
  components: {
    apiDetails
  },
  data() {
    var data1 = [{
      id: 1,
      label: '质惠平台-迭代接口',
      row: 1,
      children: [{
        id: 4,
        label: '二级 1-1',
        children: [{
          id: 9,
          label: '三级 1-1-1'
        }, {
          id: 10,
          label: '三级 1-1-2'
        }]
      }]
    }, {
      id: 2,
      label: '一级 2',
      row: 1,
      children: [{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 6,
        label: '二级 2-2'
      }]
    }, {
      id: 3,
      row: 1,
      label: '一级 3',
      children: [{
        id: 7,
        label: '二级 3-1'
      }, {
        id: 8,
        label: '二级 3-2'
      }]
    }]
    return {
      id: '',
      label: '',
      key_arr: [],
      node_Name: {},
      Interface_list: '接口列表',
      data1: JSON.parse(JSON.stringify(data1)),
      value: '',
      screenWidth: '',
      Details: false,
      home: true,
      activeName: 'first',
      dialogAddPortVisible: false,
      dialogAddTypeVisible: false,
      textMap: {
        addType: '添加分类',
        addPort: '添加接口'
      },
      dialogStatus: '',
      addDeviceData: {},
      addDeviceDataRules: {
        lockModel: [{ required: true, message: '锁类型不能为空', trigger: 'change' }],
        bikeModel: [{ required: true, message: '车辆类型不能为空', trigger: 'change' }],
        deviceNum: [{ required: true, message: '车辆个数不能为空', trigger: 'change' }],
        lockSupplier: [{ required: true, message: '锁供应商不能为空', trigger: 'change' }],
        bikeSupplier: [{ required: true, message: '车辆供应商不能为空', trigger: 'change' }]

      },
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    InterfaceLeft(vel) {
      vel === '接口分类' ? this.Interface_list = '接口分类' : this.Interface_list = '接口列表'
    },
    append(data) { // 添加节点
      this.dialogAddTypeVisible = true
      this.dialogStatus = 'addType'
    },
    mouseenter(data) { // 导航栏显示新建/删除/编辑
      this.$set(data, 'del', true)
    },
    mouseleave(data) { // 导航栏隐藏新建/删除/编辑
      this.$set(data, 'del', false)
    },

    // 删除
    remove(node, data) {
      this.$confirm('是否确认删除', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          // 在这里掉删除接口
        })
        .catch(action => {
          this.$message({ type: 'success', message: '已取消' })
        })
    },
    cli_Choice() {
      this.Details = true
      this.home = false
    },
    addPort() {
      this.dialogAddPortVisible = true
      this.dialogStatus = 'addPort'
    },
    addType() {
      this.dialogAddTypeVisible = true
      this.dialogStatus = 'addType'
    },
    editTree(node, data) {
      data.editShow = true
      document.querySelector(`#tree-item${data.id}`).style.display = 'none'
    },
    editSuccess(node, data) {
      data.editShow = false
      document.querySelector(`#tree-item${data.id}`).style.display = 'inline-block'
    }
  }
}
</script>

<style lang="scss" scoped>
  .ApiLeft {
    padding: 10px 0px 10px 10px;
    background: #F2F3F6;
    color: #333B4A;
    min-height: calc(100vh - 65px);
    .ApiContent {
      padding: 10px 0px 10px 10px;
      text-align: center;
      background: #FFF;
      border-radius: 4px;
      min-height: calc(100vh - 75px);
    }
    .Api_search {
      margin: 10px 0;
    }
    .Api_btn {
      margin: 0 5px;
      cursor: pointer;
    }
    .Api_btn:hover {
      color: #409EFF;
    }
  }
  .ApiRight {
    padding: 10px;
    background: #F2F3F6;
    color: #333B4A;
    min-height: calc(100vh - 65px);
    .ApiRightContent {
      background: #FFF;
      min-height: calc(100vh - 75px);
      padding: 0.5% 3%;
      border-radius: 4px;
    }
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .Api_space_evenly {  // 布局
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }

  .Api_Interface_list { // 接口列表和接口分类按钮颜色
    color: #409EFF;
    border-bottom: 2px solid #409EFF;
    padding-bottom: 3px;
  }

  .Api_cursor { // 小手
    cursor: pointer;
  }
</style>