crmeb_shop/template/admin/src/pages/system/backendRouting/index.vue

<template>
  <div>
    <div class="main">
      <!-- <Tree class="tree" :data="treeData"  @on-contextmenu="handleContextMenu">
          <template #contextMenu>
            <DropdownItem @click.native="handleContextCreateFolder()">新建文件夹</DropdownItem>
            <DropdownItem @click.native="handleContextCreateFile()">新建文件</DropdownItem>
            <DropdownItem @click.native="handleContextDelFolder()" style="color: #ed4014">删除</DropdownItem>
          </template>
        </Tree> -->
      <!-- <Tree :data="treeData" :render="renderContent" class="demo-tree-render"></Tree> -->
      <div class="ivu-mt mr20 card-tree">
        <div class="tree">
          <div class="main-btn">
            <Button class="mb5 mr10" style="flex: 1" type="primary" @click="clickMenu(4)" long>新增分类</Button>
            <Button class="mr10" type="success" @click="syncRoute()">同步</Button>
            <Button type="info" @click="debugging()">调试</Button>
          </div>

          <vue-tree-list
            class="tree-list"
            @change-name="onChangeName"
            @delete-node="onDel"
            :model="treeData"
            default-tree-node-name="默认文件夹"
            default-leaf-node-name="默认接口名"
            v-bind:default-expanded="false"
            :expand-only-one="true"
          >
            <template v-slot:leafNameDisplay="slotProps">
              <div></div>
              <div
                class="tree-node"
                :class="{ node: slotProps.model.method, open: formValidate.id == slotProps.model.id }"
                @click.stop="onClick(slotProps.model)"
              >
                <span class="" :class="{ open: formValidate.id == slotProps.model.id }">{{
                  slotProps.model.name
                }}</span>
                <Dropdown
                  transfer
                  @on-click="
                    (name) => {
                      clickMenu(name, slotProps.model);
                    }
                  "
                >
                  <a href="javascript:void(0)">
                    <Icon class="add" type="ios-more" />
                  </a>
                  <template #list>
                    <DropdownMenu>
                      <DropdownItem name="1" v-if="!slotProps.model.method">新增接口</DropdownItem>
                      <DropdownItem name="2" v-if="!slotProps.model.method">编辑分类名</DropdownItem>
                      <DropdownItem name="3">删除</DropdownItem>
                    </DropdownMenu>
                  </template>
                </Dropdown>
              </div>
            </template>
            <!-- 新建文件夹 -->

            <span class="icon" slot="addTreeNodeIcon"></span>
            <span class="icon" slot="addLeafNodeIcon">
              <!-- <Icon type="md-create" /> -->
            </span>
            <span class="icon" slot="editNodeIcon">
              <!-- <Icon type="md-create" /> -->
            </span>
            <span class="icon" slot="delNodeIcon">
              <!-- <Icon type="ios-cut" /> -->
            </span>
            <template v-slot:treeNodeIcon="slotProps">
              <span
                v-if="slotProps.model.method"
                class="req-method"
                :style="{
                  color: methodsColor(slotProps.model.method),
                  'font-weight': slotProps.model.id == formValidate.id ? '500' : '500',
                }"
                >{{ slotProps.model.method == 'delete' ? 'DEL' : slotProps.model.method || '' }}</span
              >

              <!-- <span v-if="slotProps.model.method"></span> -->
            </template>
          </vue-tree-list>
        </div>
      </div>
      <Card :bordered="false" dis-hover class="ivu-mt right-card">
        <div class="data">
          <div class="eidt-sub">
            <div class="name">
              {{ formValidate.name }}
            </div>
            <div>
              <!-- <Button type="primary" class="submission mr20" @click="debugging()">调试</Button> -->
              <Button v-if="formValidate.id" type="primary" class="submission mr20" @click="isEdit = !isEdit">{{
                isEdit ? '返回' : '编辑'
              }}</Button>
              <Button v-if="isEdit" type="primary" class="submission" @click="handleSubmit('formValidate')"
                >保存</Button
              >
            </div>
          </div>
          <Form
            class="formValidate mt20"
            ref="formValidate"
            :rules="ruleValidate"
            :model="formValidate"
            :label-width="100"
            :label-position="labelPosition"
            @submit.native.prevent
          >
            <Row :gutter="24" type="flex">
              <Col span="24">
                <div class="title">接口信息</div>
                <FormItem label="接口名称：" prop="name">
                  <Input
                    v-if="isEdit"
                    class="perW20"
                    type="text"
                    :rows="4"
                    v-model.trim="formValidate.name"
                    placeholder="请输入"
                  />
                  <span v-else>{{ formValidate.name || '' }}</span>
                </FormItem>
                <FormItem label="请求类型：" prop="name">
                  <Select v-if="isEdit" v-model="formValidate.method" style="width: 120px">
                    <Option v-for="(item, index) in requestTypeList" :key="index" :value="item.value">{{
                      item.label
                    }}</Option>
                  </Select>
                  <span v-else class="req-method" :style="'background-color:' + methodColor">{{
                    formValidate.method || ''
                  }}</span>
                </FormItem>
                <FormItem label="功能描述：" prop="name">
                  <Input
                    v-if="isEdit"
                    class="perW20"
                    type="textarea"
                    :rows="4"
                    v-model.trim="formValidate.describe"
                    placeholder="请输入"
                  />
                  <span v-else class="text-area">{{ formValidate.describe || '--' }}</span>
                </FormItem>
                <FormItem label="所属分类：" prop="name" v-if="isEdit">
                  <el-cascader
                    v-model="formValidate.cate_id"
                    size="small"
                    :options="formValidate.cate_tree"
                    :props="{ checkStrictly: true, multiple: false, emitPath: false, value: 'id', label: 'name' }"
                    clearable
                  ></el-cascader>
                </FormItem>
                <FormItem label="是否公共：" prop="name">
                  <Switch v-if="isEdit" v-model="formValidate.type" :true-value="1" :false-value="0">
                    <template #open>
                      <span>是</span>
                    </template>
                    <template #close>
                      <span>否</span>
                    </template>
                  </Switch>
                  <span v-else class="text-area">{{ formValidate.type ? '是' : '否' }}</span>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="24" type="flex">
              <Col span="24">
                <div class="title">调用方式</div>
                <FormItem label="路由地址：" prop="path">
                  <Input
                    v-if="isEdit"
                    class="perW20"
                    type="text"
                    :rows="4"
                    v-model.trim="formValidate.path"
                    placeholder="请输入"
                  />
                  <span v-else>{{ formValidate.path || '' }}</span>
                </FormItem>
                <FormItem label="请求参数：">
                  <vxe-table
                    resizable
                    show-overflow
                    keep-source
                    ref="xTable"
                    row-id="id"
                    :print-config="{}"
                    :export-config="{}"
                    :loading="loading"
                    :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }"
                    :data="formValidate.request"
                  >
                    <!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
                    <vxe-column field="attribute" width="300" title="属性" tree-node :edit-render="{}">
                      <template #default="{ row }">
                        <vxe-input v-if="isEdit" v-model="row.attribute" type="text"></vxe-input>
                        <span v-else>{{ row.attribute || '' }}</span>
                      </template>
                    </vxe-column>
                    <vxe-column field="type" title="类型" width="200" :edit-render="{}">
                      <template #default="{ row }">
                        <!-- <vxe-select v-if="isEdit" v-model="row.type" type="text" :optionGroups="typeList"></vxe-select> -->
                        <vxe-select v-if="isEdit" v-model="row.type" transfer>
                          <vxe-option
                            v-for="item in typeList"
                            :key="item.value"
                            :value="item.value"
                            :label="item.label"
                          ></vxe-option>
                        </vxe-select>
                        <span v-else>{{ row.type || '' }}</span>

                        <!-- <vxe-select v-model="row.type">
                      <vxe-option v-for="num in 12" :key="num" :value="num" :label="num"></vxe-option>
                    </vxe-select> -->
                      </template>
                    </vxe-column>
                    <vxe-column field="must" title="必填" width="100" :edit-render="{}">
                      <template #default="{ row }">
                        <vxe-checkbox
                          v-if="isEdit"
                          v-model="row.must"
                          :unchecked-value="'0'"
                          :checked-value="'1'"
                        ></vxe-checkbox>
                        <span v-else>{{ row.must == '1' ? '是' : '否' }}</span>
                      </template>
                    </vxe-column>
                    <vxe-column field="trip" title="说明" :edit-render="{}">
                      <template #default="{ row }">
                        <vxe-input v-if="isEdit" v-model="row.trip" type="text"></vxe-input>
                        <span v-else>{{ row.trip || '' }}</span>
                      </template>
                    </vxe-column>
                    <vxe-column title="操作" width="200" v-if="isEdit">
                      <template #default="{ row }">
                        <vxe-button
                          type="text"
                          v-if="row.type === 'array'"
                          status="primary"
                          @click="insertRow(row, 'xTable')"
                          >插入</vxe-button
                        >
                        <vxe-button type="text" status="primary" @click="removeRow(row, 'xTable')">删除</vxe-button>
                      </template>
                    </vxe-column>
                  </vxe-table>

                  <Button class="mt10" v-if="isEdit" type="primary" @click="insertEvent('xTable')">添加参数</Button>
                </FormItem>
                <FormItem label="返回参数：">
                  <vxe-table
                    resizable
                    show-overflow
                    keep-source
                    ref="resTable"
                    row-id="id"
                    :print-config="{}"
                    :export-config="{}"
                    :loading="loading"
                    :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }"
                    :data="formValidate.response"
                  >
                    <!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
                    <vxe-column field="attribute" title="属性" width="300" tree-node :edit-render="{}">
                      <template #default="{ row }">
                        <vxe-input v-if="isEdit" v-model="row.attribute" type="text"></vxe-input>
                        <span v-else>{{ row.attribute || '' }}</span>
                      </template>
                    </vxe-column>
                    <vxe-column field="type" title="类型" width="200" :edit-render="{}">
                      <template #default="{ row }">
                        <vxe-select v-if="isEdit" v-model="row.type" transfer>
                          <vxe-option
                            v-for="item in typeList"
                            :key="item.value"
                            :value="item.value"
                            :label="item.label"
                          ></vxe-option>
                        </vxe-select>
                        <span v-else>{{ row.type || '' }}</span>
                      </template>
                    </vxe-column>
                    <!-- <vxe-column field="type" title="必填" :edit-render="{}">
                  <template #default="{ row }">
                    <vxe-checkbox v-model="row.must" :unchecked-value="0" :checked-value="1"></vxe-checkbox
                    >{{ row.must }}
                  </template>
                </vxe-column> -->
                    <vxe-column field="trip" title="说明" :edit-render="{}">
                      <template #default="{ row }">
                        <vxe-input v-if="isEdit" v-model="row.trip" type="text"></vxe-input>
                        <span v-else>{{ row.trip || '' }}</span>
                      </template>
                    </vxe-column>
                    <vxe-column title="操作" width="200" v-if="isEdit">
                      <template #default="{ row }">
                        <vxe-button
                          type="text"
                          v-if="row.type === 'array'"
                          status="primary"
                          @click="insertRow(row, 'resTable')"
                          >插入</vxe-button
                        >
                        <vxe-button type="text" status="primary" @click="removeRow(row, 'resTable')">删除</vxe-button>
                      </template>
                    </vxe-column>
                  </vxe-table>
                  <Button class="mt10" v-if="isEdit" type="primary" @click="insertEvent('resTable')">添加参数</Button>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="24" type="flex">
              <Col span="24">
                <div class="title">调用示例</div>
                <FormItem label="请求数据示例：" prop="request_example">
                  <Input
                    v-if="isEdit"
                    class="perW20"
                    type="textarea"
                    :rows="4"
                    v-model.trim="formValidate.request_example"
                    placeholder="请输入"
                  />
                  <span v-else class="text-area">{{ formValidate.request_example || '' }}</span>
                </FormItem>
                <FormItem label="返回数据示例：" prop="response_example">
                  <Input
                    v-if="isEdit"
                    class="perW20"
                    type="textarea"
                    :rows="4"
                    v-model.trim="formValidate.response_example"
                    placeholder="请输入"
                  />
                  <span v-else class="text-area">{{ formValidate.response_example || '' }}</span>
                </FormItem>
                <FormItem label="错误码：">
                  <vxe-table
                    resizable
                    show-overflow
                    keep-source
                    ref="codeTable"
                    row-id="id"
                    :print-config="{}"
                    :export-config="{}"
                    :loading="loading"
                    :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }"
                    :data="formValidate.error_code"
                  >
                    <!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
                    <vxe-column field="code" title="错误码" tree-node :edit-render="{}">
                      <template #default="{ row }">
                        <vxe-input v-if="isEdit" v-model="row.code" type="text"></vxe-input>
                        <span v-else>{{ row.code || '' }}</span>
                      </template>
                    </vxe-column>
                    <vxe-column field="value" title="错误码取值" :edit-render="{}">
                      <template #default="{ row }">
                        <vxe-input v-if="isEdit" v-model="row.value" type="text"></vxe-input>
                        <span v-else>{{ row.value || '' }}</span>
                      </template>
                    </vxe-column>
                    <vxe-column field="solution" title="解决方案" :edit-render="{}">
                      <template #default="{ row }">
                        <vxe-input v-if="isEdit" v-model="row.solution" type="text"></vxe-input>
                        <span v-else>{{ row.solution || '' }}</span>
                      </template>
                    </vxe-column>
                    <vxe-column title="操作" v-if="isEdit">
                      <template #default="{ row }">
                        <vxe-button type="text" status="primary" @click="removeRow(row, 'codeTable')">删除</vxe-button>
                      </template>
                    </vxe-column>
                  </vxe-table>
                  <Button class="mt10" v-if="isEdit" type="primary" @click="insertEvent('codeTable')">添加参数</Button>
                </FormItem>
              </Col>
            </Row>
            <!-- <Row :gutter="24" type="flex">
              <Col span="24">
                <FormItem>
                  <Button type="primary" class="submission" @click="handleSubmit('formValidate')">保存</Button>
                </FormItem>
              </Col>
            </Row> -->
          </Form>
        </div>
        <!-- <div v-else class="nothing">
          <div class="box" @click="clickMenu(4)">
            <div class="icon">
              <Icon type="ios-folder" />
            </div>
            <div class="text">新建文件</div>
          </div>
          <div class="box" @click="clickMenu(1)">
            <div class="icon">
              <Icon type="logo-linkedin" />
            </div>
            <div class="text">新建接口</div>
          </div>
        </div> -->
      </Card>
    </div>
    <Modal v-model="nameModal" title="分组名称" :loading="loading" @on-ok="asyncOK">
      <label>分组名称：</label>
      <Input v-model="value" placeholder="请输入分组名称" style="width: 85%" />
    </Modal>
    <Modal v-model="debuggingModal" :title="formValidate.name" width="70%" footer-hide :loading="loading">
      <debugging
        v-if="debuggingModal"
        :formValidate="formValidate"
        :typeList="intTypeList"
        :requestTypeList="requestTypeList"
      />
    </Modal>
  </div>
</template>

<script>
import {
  routeCate,
  syncRoute,
  routeList,
  routeDet,
  routeSave,
  interfaceEditName,
  routeDel,
  routeEdit,
  routeCateDel,
} from '@/api/systemBackendRouting';
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list';
import debugging from './debugging.vue';

import { mapState } from 'vuex';
export default {
  name: 'systemOutInterface',
  components: {
    VueTreeList,
    debugging,
  },
  data() {
    return {
      value: '',
      isEdit: false,
      nameModal: false,
      debuggingModal: false,
      formValidate: {},
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      ruleValidate: {
        title: [{ message: '请输入正确的描述 (不能多于200位数)', trigger: 'blur', max: 200 }],
      },
      loading: false,
      intTypeList: [
        {
          value: 'string',
          label: 'String',
        },
        // {
        //   value: 'array',
        //   label: 'Array',
        // },
        // {
        //   value: 'object',
        //   label: 'Object',
        // },
        {
          value: 'number',
          label: 'Number',
        },
        {
          value: 'boolean',
          label: 'Boolean',
        },
        {
          value: 'null',
          label: 'Null',
        },
        {
          value: 'any',
          label: 'Any',
        },
      ],
      typeList: [
        {
          value: 'string',
          label: 'String',
        },
        {
          value: 'array',
          label: 'Array',
        },
        {
          value: 'object',
          label: 'Object',
        },
        {
          value: 'number',
          label: 'Number',
        },
        {
          value: 'boolean',
          label: 'Boolean',
        },
        {
          value: 'null',
          label: 'Null',
        },
        {
          value: 'any',
          label: 'Any',
        },
      ],
      requestTypeList: [
        {
          value: 'GET',
          label: 'GET',
        },
        {
          value: 'POST',
          label: 'POST',
        },
        {
          value: 'DELETE',
          label: 'DELETE',
        },
        {
          value: 'PUT',
          label: 'PUT',
        },
      ],
      contextData: null, //左侧导航右键点击是产生的数据对象
      treeData: undefined,
      buttonProps: {
        type: 'default',
        size: 'small',
      },
      methodColor: '#fff',
      app_name: 'adminapi',
      paramsId: 0,
    };
  },
  watch: {
    ['formValidate.method']: {
      deep: true,
      handler(newVal, oldVal) {
        let method = newVal.toUpperCase();
        if (method == 'GET') {
          this.methodColor = '#61affe';
        } else if (method == 'POST') {
          this.methodColor = '#49cc90';
        } else if (method == 'PUT') {
          this.methodColor = '#fca130';
        } else if (method == 'DEL' || method == 'DELETE') {
          this.methodColor = '#f93e3e';
        }
      },
    },
  },
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : 50;
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    },
  },
  created() {
    this.getInterfaceList('one');
  },
  methods: {
    syncRoute() {
      this.$Modal.warning({
        title: '立即同步',
        content: '您确认立即同步路由权限？',
        onOk: () => {
          syncRoute(this.app_name).then((res) => {
            this.getInterfaceList('one');
            this.$Message.success(res.msg);
          });
        },
      });
    },
    debugging() {
      this.debuggingModal = true;
    },
    onClicksss(e) {},
    methodsColor(newVal) {
      let method = newVal.toUpperCase();
      if (method == 'GET') {
        return '#61affe';
      } else if (method == 'POST') {
        return '#49cc90';
      } else if (method == 'PUT') {
        return '#fca130';
      } else if (method == 'DEL' || method == 'DELETE') {
        return '#f93e3e';
      }
    },
    insertBefore(params) {},
    insertAfter(params) {},
    moveInto(params) {},
    async addTableData() {
      const { row: data } = await $table.insertAt(newRow, -1);
      await $table.setActiveCell(data, 'name');
    },
    getInterfaceList(disk_type) {
      try {
        routeList()
          .then((res) => {
            if (res.data.length) {
              res.data[0].expand = false;
              this.treeData = new Tree(res.data);
              this.$nextTick((e) => {
                if (disk_type) document.querySelectorAll('.vtl-icon-caret-right')[0].click();
              });
              if (res.data[0].children && res.data[0].children.length) {
                this.onClick(res.data[0].children[0]);
              }
            }
          })
          .catch((err) => {
            this.$Message.error(err);
          });
      } catch (error) {
        console.log(error);
      }
    },
    onClick(params) {
      try {
        if (params.method) {
          this.isEdit = false;
          this.paramsId = params.id;
          this.getRoteData(params.id);
        }
      } catch (error) {
        console.log(error);
      }
    },
    getRoteData(id) {
      routeDet(id)
        .then((res) => {
          this.formValidate = res.data;
        })
        .catch((err) => {
          console.log(err);
          this.$Message.error(err);
        });
    },
    async handleSubmit() {
      if (!this.formValidate.name) {
        return this.$Message.warning('请输入接口名称');
      } else if (!this.formValidate.method) {
        return this.$Message.warning('请选择请求类型');
      } else if (!this.formValidate.path) {
        return this.$Message.warning('请输入路由地址');
      }
      this.formValidate.request = await this.$refs.xTable.getTableData().tableData;
      this.formValidate.response = await this.$refs.resTable.getTableData().tableData;
      this.formValidate.error_code = await this.$refs.codeTable.getTableData().tableData;
      this.formValidate.app_name = this.app_name;
      await routeSave(this.formValidate)
        .then((res) => {
          this.isEdit = false;
          this.$Message.success(res.msg);
          this.getRoteData(this.paramsId);
        })
        .catch((err) => {
          this.$Message.error(err);
        });
    },
    async insertEvent(type) {
      const $table = this.$refs[type];
      let newRow;
      if (type == 'xTable') {
        newRow = {
          attribute: '',
          type: '',
          must: 0,
          trip: '',
        };
      } else if (type == 'resTable') {
        newRow = {
          attribute: '',
          type: '',
          trip: '',
        };
      } else {
        newRow = {
          code: '',
          value: '',
          solution: '',
        };
      }
      // $table.insert(newRow).then(({ row }) => $table.setEditRow(row, -1));
      const { row: data } = await $table.insertAt(newRow, -1);
      await $table.setActiveCell(data, 'name');
    },
    async insertRow(currRow, type) {
      const $table = this.$refs[type];
      // 如果 null 则插入到目标节点顶部
      // 如果 -1 则插入到目标节点底部
      // 如果 row 则有插入到效的目标节点该行的位置
      let record;
      if (type == 'xTable') {
        record = {
          attribute: '',
          type: '',
          must: 0,
          trip: '',
          id: Date.now(),
          parentId: currRow.id, // 需要指定父节点，自动插入该节点中
        };
      } else if (type == 'resTable') {
        record = {
          attribute: '',
          type: '',
          trip: '',
          id: Date.now(),
          parentId: currRow.id, // 需要指定父节点，自动插入该节点中
        };
      } else {
        record = {
          code: '',
          value: '',
          solution: '',
          id: Date.now(),
          parentId: currRow.id, // 需要指定父节点，自动插入该节点中
        };
      }
      const { row: newRow } = await $table.insertAt(record, -1);
      await $table.setTreeExpand(currRow, true); // 将父节点展开
      await $table.setActiveRow(newRow); // 插入子节点
    },
    async removeRow(row, type) {
      const $table = this.$refs[type];
      await $table.remove(row);
    },
    // 修改名字
    add() {
      this.value = '';
      this.formValidate.id = 0;
      this.nameModal = true;
    },
    // 点击菜单
    clickMenu(name, params) {
      if (name == 1) {
        this.formValidate = {};
        this.formValidate.cate_id = params ? params.id : 0;
        this.formValidate.id = 0;
        this.isEdit = true;
      } else if (name == 2) {
        // this.value = params.name || '';
        // this.formValidate.cate_id = params ? params.id : 0;
        // this.nameModal = true;
        // this.onEdit(params);
        this.$modalForm(routeEdit(params.id, this.app_name)).then(() => this.getInterfaceList());
      } else if (name == 3) {
        this.onDel(params);
      } else if (name == 4) {
        // this.add();
        this.$modalForm(routeCate(this.app_name)).then(() => this.getInterfaceList());
      }
    },

    addFac(params) {
      this.formValidate = {
        id: params ? params.id : 0,
      };
      this.isEdit = true;
    },
    asyncOK() {
      let data = {
        id: this.formValidate.id || 0,
        type: 0,
        name: this.value,
      };
      routeSave(data)
        .then((res) => {
          this.$Message.success(res.msg);
          this.getInterfaceList();
        })
        .catch((err) => {
          this.$Message.error(err);
        });
    },
    //侧边栏右键点击事件
    handleContextMenu(data, event, position) {
      position.left = Number(position.left.slice(0, -2)) + 75 + 'px';
      this.contextData = data;
    },
    handleContextCreateFolder() {},
    handleContextCreateFile() {},
    // 自定义显示
    renderContent(h, { root, node, data }) {
      let that = this;
      return h(
        'span',
        {
          style: {
            display: 'inline-block',
            width: '100%',
          },
        },
        [
          h('span', [
            h(resolveComponent('Icon'), {
              type: 'ios-paper-outline',
              style: {
                marginRight: '8px',
              },
            }),
            h('span', data.title),
          ]),
          h(
            'span',
            {
              style: {
                display: 'inline-block',
                float: 'right',
                marginRight: '32px',
              },
            },
            [
              h(resolveComponent('Button'), {
                ...this.buttonProps,
                icon: 'ios-add',
                style: {
                  marginRight: '8px',
                },
                onClick: () => {
                  this.append(data);
                },
              }),
              h(resolveComponent('Button'), {
                ...this.buttonProps,
                icon: 'ios-remove',
                onClick: () => {
                  this.remove(root, node, data);
                },
              }),
            ],
          ),
        ],
      );
    },
    /**
     * 侧边栏点击事件
     * @param {Object} data
     */
    clickDir(data, root, node) {
      let that = this;
      that.navItem = data;
      that.pathname = data.pathname;
    },
    append(data) {
      const children = data.children || [];
      children.push({
        title: 'appended node',
        expand: true,
      });
      this.$set(data, 'children', children);
    },
    remove(root, node, data) {
      const parentKey = root.find((el) => el === node).parent;
      const parent = root.find((el) => el.nodeKey === parentKey).node;
      const index = parent.children.indexOf(data);
      parent.children.splice(index, 1);
    },
    onMouseOver(root, node, data, e, d) {
      console.log(root, node, data);
    },
    onMouseOver(root, node, data, e, d) {
      console.log(root, node, data, e, d);
    },
    //
    onDel(node) {
      console.log(node);
      let method = node.cate_id ? routeDel : routeCateDel;
      this.$Modal.confirm({
        title: '警告',
        content: '<p>删除后无法恢复，请确认后删除！</p>',
        onOk: () => {
          method(node.id)
            .then((res) => {
              this.$Message.success(res.msg);
              node.remove();
            })
            .catch((err) => {
              this.$Message.error(err);
            });
        },
        onCancel: () => {},
      });
    },

    onChangeName(params) {
      console.log(params);
      if (params.eventType == 'blur') {
        let data = {
          name: params.newName,
          id: params.id,
        };
        interfaceEditName(data)
          .then((res) => {
            this.$Message.success(res.msg);
          })
          .catch((err) => {
            this.$Message.error(err);
          });
      }
    },

    onAddNode(params) {
      console.log(params);
      // this.$router.push({
      //   path: '/admin/setting/system_out_interface/add',
      //   query: {
      //     pid: params.pid,
      //   },
      // });
    },

    addNode() {
      var node = new TreeNode({ name: 'new node', isLeaf: false });
      if (!this.data.children) this.data.children = [];
      this.data.addChildren(node);
    },

    getNewTree() {
      var vm = this;
      function _dfs(oldNode) {
        var newNode = {};

        for (var k in oldNode) {
          if (k !== 'children' && k !== 'parent') {
            newNode[k] = oldNode[k];
          }
        }

        if (oldNode.children && oldNode.children.length > 0) {
          newNode.children = [];
          for (var i = 0, len = oldNode.children.length; i < len; i++) {
            newNode.children.push(_dfs(oldNode.children[i]));
          }
        }
        return newNode;
      }

      vm.newTree = _dfs(vm.data);
    },
  },
};
</script>

<style lang="stylus" scoped>
.reset {
  margin-left: 10px;
}
.card-tree {
   background: #fff;
   height: 72px;
   box-sizing: border-box;
   overflow-x: scroll; /* 设置溢出滚动 */
   white-space: nowrap;
   overflow-y: hidden;
   /* 隐藏滚动条 */
   border-radius: 4px;
   scrollbar-width: none; /* firefox */
   -ms-overflow-style: none; /* IE 10+ */
}
.card-tree::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}
.main {
  width: 100%;
  display: flex;
  .main-btn {
    display:flex;
    position: sticky;
    padding: 15px 15px 0 15px;
    width: 100%;
    background: #fff;
    top: 0px;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
  }
  .card-tree{
    width: 290px;
    height: calc(100vh - 115px);
    overflow-y: scroll;
  }
  >>> .tree {
    .tree-list{
      margin-left:10px;
      padding: 0 15px;

    }
    .vtl-caret{
      padding-right: 2px;
    }
    .req-method {
      display:block;
      padding: 0px 2px;
      font-size: 12px;
      margin-right: 5px;
      border-radius: 4px;

      text-transform: uppercase;
    }

    .tree-node {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      // width:200px;
      padding: 3px 7px 3px 0;
    }
    .node{
      padding:7px 2px 7px 0px;
    }
    .open {
      // background-color: #fff1ef;
      font-weight: 500;
      color: #333;
    }
  }

  >>> .vtl-node-main .vtl-operation {
    position: absolute;
    right: 20px;
  }

  >>> .vtl-node-content {
    width: 100%;
  }

  .pop-menu {
    display: flex;
    justify-content: space-between;
  }

  >>> .vtl-node-content .add {
    display: none;
    margin-right: 10px;
  }

  >>> .vtl-node-content:hover .add {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 20px;
    height: 20px;
  }

  >>> .vtl-node-content:hover .add:hover {
    background-color: #fff;

    .pop-menu {
      font-size: 16px;
    }
  }
  >>> .vtl-node-main{
    padding:0;
  }
  >>> .line1 {
    display: table-caption;
    white-space: nowrap;
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  >>> .ivu-form-item{
    margin-bottom: 10px;
  }
  .right-card {
    flex: 1;
    max-height: calc(100vh - 115px);
    overflow-y: scroll;
  }

  .data {
    flex: 1;

    .req-method {
      text-transform: uppercase;
      border-radius: 4px;
      color: #fff;
      padding: 3px 7px;
    }

    .eidt-sub {
      display: flex;
      justify-content: space-between;

      .name {
        font-size: 20px;
        font-weight: 500;
      }
    }

    .title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 15px;
    }

    .perW20 {
      width: 500px;
    }

    .text-area {
      white-space: pre-wrap;
      word-break: break-word;
    }
  }

  >>> .ivu-tree-title {
    width: 100% !important;
  }
  >>> .vtl-tree-margin{
    margin-left: 5px;
  }
  >>> .ivu-btn-icon-only.ivu-btn-small {
    width: 28px;
  }

  .nothing {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 800px;

    .box:hover {
      border: 1px solid pink;
    }

    .box {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 150px;
      height: 200px;
      margin: 0 20px;
      border-radius: 10px;
      cursor: pointer;
      overflow: hidden;
      border: 1px solid #fff;

      .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 150px;
        font-size: 40px;
        color: #2d8cf0;
        background: #f1f1f1;
      }

      .text {
        width: 100%;
        height: 50px;
        background: #ddd;
        text-align: center;
        line-height: 50px;
        font-size: 14px;
        font-weight: 500;
      }
    }
  }
}
</style>