|
|
@@ -1,421 +1,958 @@
|
|
|
<template>
|
|
|
- <div style="margin-left: 1%;padding-top: 1%;" :style="{'height':heightAll+'px'}">
|
|
|
- <el-row class="box">
|
|
|
- <!-- 筛选条件 -->
|
|
|
- <el-form ref="formRef" :inline="true" size="mini" :model="query.data">
|
|
|
- <el-form-item label="服务名称">
|
|
|
- <el-input v-model="query.data.name"></el-input>
|
|
|
- </el-form-item>
|
|
|
-<!-- <el-form-item label="所属部门">-->
|
|
|
-<!-- <el-input v-model="query.data.unitName"></el-input>-->
|
|
|
-<!-- </el-form-item>-->
|
|
|
- <el-form-item label="所属模型">
|
|
|
- <el-input v-model="query.data.unitName"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="服务状态">
|
|
|
- <el-select clearable v-model="query.data.applyState" style="width:100px;">
|
|
|
- <el-option label="待审核" value="0"></el-option>
|
|
|
- <el-option label="同意" value="1"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- @click="getList"
|
|
|
- icon="Search"
|
|
|
- >搜索</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </el-row>
|
|
|
- <el-row class="box">
|
|
|
- <el-button
|
|
|
- @click="saveService"
|
|
|
- size="small"
|
|
|
- type="primary"
|
|
|
- plain
|
|
|
- v-hasPermi="['service:info:add']"
|
|
|
- >
|
|
|
- 添加服务
|
|
|
- </el-button>
|
|
|
- </el-row>
|
|
|
- <el-row class="table_box">
|
|
|
- <el-table
|
|
|
- stripe
|
|
|
- :data="tableData"
|
|
|
- :height="tableHeight"
|
|
|
- style="width: 100%"
|
|
|
- size="small"
|
|
|
- :row-class-name="tableRowClassName"
|
|
|
- :header-cell-style="{
|
|
|
- background: '#ebf3fb',
|
|
|
- color: '#333',
|
|
|
- padding: '4px 0',
|
|
|
- 'border-right': '1px solid #fff',
|
|
|
- }"
|
|
|
- >
|
|
|
- <el-table-column type="expand">
|
|
|
- <template #default="prop">
|
|
|
- <el-table :data="prop.row.detail1">
|
|
|
- <el-table-column label="服务名称" prop="name" />
|
|
|
- <el-table-column label="服务类型" prop="type" />
|
|
|
- <el-table-column label="服务地址" prop="url" />
|
|
|
- <el-table-column label="请求方式" prop="rqtype" />
|
|
|
- <!-- <el-table-column label="调用次数" prop="cnt" /> -->
|
|
|
- <el-table-column label="发布时间" prop="rlstm" />
|
|
|
- <el-table-column
|
|
|
- show-overflow-tooltip
|
|
|
- header-align="center"
|
|
|
- align="center"
|
|
|
- width="60"
|
|
|
- prop="status"
|
|
|
- label="状态"
|
|
|
- >
|
|
|
- <template #default="scope">
|
|
|
- <el-tag
|
|
|
- :type="scope.row.status === '1' ? 'success' : 'warning'"
|
|
|
- disable-transitions
|
|
|
- >
|
|
|
- {{ scope.row.status === "1" ? "启用" : "停用" }}
|
|
|
- </el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column fixed="right" align="center" label="操作" width="220">
|
|
|
- <template #default="scope">
|
|
|
- <el-button
|
|
|
- :type="scope.row.status == 1 ? 'warning' : 'primary'"
|
|
|
- v-hasPermi="['service:info:status']"
|
|
|
- @click="updateStatus(scope.row)"
|
|
|
- size="mini"
|
|
|
- >
|
|
|
- {{ scope.row.status == 1 ? "停用" : "启用" }}
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- v-hasPermi="['service:info:update']"
|
|
|
- @click="saveService(scope.row)"
|
|
|
- size="mini"
|
|
|
- >
|
|
|
- 编辑
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- @click="handleDelete(scope.row)"
|
|
|
- v-hasPermi="['service:info:delete']"
|
|
|
- size="mini"
|
|
|
- >
|
|
|
- 删除
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column type="index" align="center" label="序号" width="50"/>
|
|
|
- <el-table-column label="服务名称" prop="name" />
|
|
|
- </el-table>
|
|
|
- <!-- <el-table
|
|
|
- stripe
|
|
|
- :data="tableData"
|
|
|
- :height="tableHeight"
|
|
|
- style="width: 100%"
|
|
|
- size="small"
|
|
|
- :row-class-name="tableRowClassName"
|
|
|
- :header-cell-style="{
|
|
|
- background: '#ebf3fb',
|
|
|
- color: '#333',
|
|
|
- padding: '4px 0',
|
|
|
- 'border-right': '1px solid #fff',
|
|
|
- }"
|
|
|
- >
|
|
|
- <el-table-column type="index" align="center" label="序号" :index="1"/>
|
|
|
- <el-table-column
|
|
|
- show-overflow-tooltip
|
|
|
- v-for="(param, index) in paramList"
|
|
|
- :key="index"
|
|
|
- header-align="center"
|
|
|
- :align="param.align ? param.align : 'center'"
|
|
|
- :width="param.width ? param.width : 'auto'"
|
|
|
- :prop="param.paramCode"
|
|
|
- :label="param.paramName"
|
|
|
+ <div style="width: 100%;;display: flex;">
|
|
|
+ <div style="width: 15%;;background-color: #F2F6FC;">
|
|
|
+ <div style="display: flex;padding-top: 1%;padding-top: 5%;">
|
|
|
+ <el-input
|
|
|
+ v-model="input2"
|
|
|
+ style="width:60%;margin-left: 5%;background-color: #ebeef5;"
|
|
|
+ class="w-50 m-2"
|
|
|
+ :prefix-icon="Search"
|
|
|
/>
|
|
|
- <el-table-column
|
|
|
- show-overflow-tooltip
|
|
|
- header-align="center"
|
|
|
- align="center"
|
|
|
- width="60"
|
|
|
- prop="status"
|
|
|
- label="状态"
|
|
|
- >
|
|
|
- <template #default="scope">
|
|
|
- <el-tag
|
|
|
- :type="scope.row.status === '1' ? 'success' : 'warning'"
|
|
|
- disable-transitions
|
|
|
- >
|
|
|
- {{ scope.row.status === "1" ? "启用" : "停用" }}
|
|
|
- </el-tag>
|
|
|
+ <!-- <el-button style="margin-left: 2%;width: 10%;background-color: #F7F7F7" :icon="Filter"/> -->
|
|
|
+ <el-button type="primary" @click="showAdd" style="margin-left: 5%;width: 10%;" :icon="Plus"/>
|
|
|
+ </div>
|
|
|
+ <!-- <Plus style="width: 1em; height: 1em; margin-left:90%;cursor: pointer;color: #337ecc;" @click="showAddTree"/> -->
|
|
|
+ <el-tree class="treeLeft" :data="data" @node-click="handleNodeClick" node-key="id" style="margin-left: 5%;margin-top: 5%;width: 90%;background-color: transparent;" default-expand-all :key="valueKet">
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span class="custom-tree-node">
|
|
|
+ <el-icon v-if="data.children"><Folder /></el-icon>
|
|
|
+ <div v-if="!data.children">
|
|
|
+ <el-tag v-if="data.label=='父级2'" class="ml-2" type="success">GET</el-tag>
|
|
|
+ <el-tag v-if="data.label=='父级1'" class="ml-2">PUT</el-tag>
|
|
|
+ <!-- <el-tag class="ml-2" type="warning">POST</el-tag>
|
|
|
+ <el-tag class="ml-2" type="danger">DEL</el-tag> -->
|
|
|
+ </div>
|
|
|
+ <span>{{ node.label }}</span>
|
|
|
+ </span>
|
|
|
</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column fixed="right" align="center" label="操作" width="220">
|
|
|
- <template #default="scope">
|
|
|
- <el-button
|
|
|
- :type="scope.row.status == 1 ? 'warning' : 'primary'"
|
|
|
- v-hasPermi="['service:info:status']"
|
|
|
- @click="updateStatus(scope.row)"
|
|
|
- size="mini"
|
|
|
- >
|
|
|
- {{ scope.row.status == 1 ? "停用" : "启用" }}
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- v-hasPermi="['service:info:update']"
|
|
|
- @click="saveService(scope.row)"
|
|
|
- size="mini"
|
|
|
- >
|
|
|
- 编辑
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- @click="handleDelete(scope.row)"
|
|
|
- v-hasPermi="['service:info:delete']"
|
|
|
- size="mini"
|
|
|
- >
|
|
|
- 删除
|
|
|
- </el-button>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ <div style="width: 84%;margin-left: 1%;" class="tab-container">
|
|
|
+ <el-tabs style="" v-model="activeName" class="demo-tabs" @tab-click="handleClick" >
|
|
|
+ <el-tab-pane label="查看" name="first" style="">
|
|
|
+ <div style="height: 80vh;overflow: auto;">
|
|
|
+ <div style="display: flex;align-items: center;justify-content: space-between;">
|
|
|
+ <div style="margin-left:1%;">修改数据项分类管理</div>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-button type="primary" size="mini" :icon="Promotion">运行</el-button>
|
|
|
+ <el-button type="" size="mini">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;align-items: center;margin-left:1%;margin-top: 1%;">
|
|
|
+ <el-tag type="primary" size="mini">PUT</el-tag>
|
|
|
+ <div style="margin-left: 0.5%;">
|
|
|
+ /data/cate
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 0.5%;">
|
|
|
+ <el-select class="transparent-select" v-model="valueSta" style="border-color: transparent;width: 100px;">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ <div class="flex items-center" style="display: flex;align-items: center;">
|
|
|
+ <div v-if="item.label=='开发中'" style="width: 5px; height: 5px; background-color: #409EFF; border-radius: 50%;"></div>
|
|
|
+ <div v-if="item.label=='运行中'" style="width: 5px; height: 5px; background-color: #67C23A; border-radius: 50%;"></div>
|
|
|
+ <span style="margin-left:1%;">{{ item.label }}</span>
|
|
|
+ </div>
|
|
|
+ </el-option>
|
|
|
+ <template #prefix>
|
|
|
+ <div class="flex items-center" style="display: flex; align-items: center;">
|
|
|
+ <div v-if="valueSta && options.find(opt => opt.value === valueSta)?.label === '开发中'"
|
|
|
+ style="width: 5px; height: 5px; background-color: #409EFF; border-radius: 50%; margin-right: 4px;"></div>
|
|
|
+ <div v-if="valueSta && options.find(opt => opt.value === valueSta)?.label === '运行中'"
|
|
|
+ style="width: 5px; height: 5px; background-color: #67C23A; border-radius: 50%; margin-right: 4px;"></div>
|
|
|
+ <span>{{ valueSta ? options.find(opt => opt.value === valueSta)?.label : '请选择' }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;width: 100%;">
|
|
|
+ <div style="display: flex;margin-left: 1%;font-size: 15px;color:#909399;width:100% ;">
|
|
|
+ <div>
|
|
|
+ 服务分类:
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 0.5%;">
|
|
|
+ 2025年7月25日
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 5%;">
|
|
|
+ 服务名称:
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 0.5%;">
|
|
|
+ 2025年7月25日
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 5%;">
|
|
|
+ 接口地址:
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 0.5%;">
|
|
|
+ 几秒前
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 5%;">
|
|
|
+ 请求方式:
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 0.5%;">
|
|
|
+ 秦素衣
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 5%;">
|
|
|
+ 接口格式:
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 0.5%;">
|
|
|
+ 朱得糠
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 5%;">
|
|
|
+ 返回格式:
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 0.5%;">
|
|
|
+ 数据项分类
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 1%;font-size: 15px;color:#909399;width:100%;display: flex;margin-top: 0.5%;">
|
|
|
+ <div style="margin-left: 0%;">
|
|
|
+ 服务说明:
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 0.5%;">
|
|
|
+ 数据项分类
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 1%;font-size: 15px;color:#909399;width:100%;display: flex;margin-top: 0.5%;">
|
|
|
+ <div style="margin-left: 0%;">
|
|
|
+ 返回说明:
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 0.5%;">
|
|
|
+ 数据项分类
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 2.5%;margin-left: 1%;">
|
|
|
+ <div>请求参数</div>
|
|
|
+ <el-table
|
|
|
+ style="margin-top: 1%;"
|
|
|
+ :data="tableDataCan"
|
|
|
+ :cell-style="{ textAlign: 'center', }"
|
|
|
+ :header-cell-style="{ textAlign: 'center'}"
|
|
|
+ :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center' }"
|
|
|
+ border >
|
|
|
+ <el-table-column prop="itemName" label="参数字段">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemName" label="参数名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemName" label="参数类型" width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemName" label="参数说明">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 2.5%;margin-left: 1%;">
|
|
|
+ <div>返回响应</div>
|
|
|
+ <el-tabs type="card" style="margin-top: 1%;">
|
|
|
+ <el-tab-pane label="成功（200）">
|
|
|
+ <div style="display: flex;align-items: center;line-height: 1.5;font-size: 14px;margin-left: 1%;color: #606266;">
|
|
|
+ <div>HTTP状态码：</div>
|
|
|
+ <div>200</div>
|
|
|
+ <div style="margin-left: 5%;">内容格式：</div>
|
|
|
+ <div>JSON</div>
|
|
|
+ </div>
|
|
|
+ <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" style="margin-top: 1%;margin-left: 2%;background-color: #F7F7F7;background-color: transparent;width: 15%;" default-expand-all>
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
|
|
|
+ <span>{{ node.label }}</span>
|
|
|
+ <span style="display: flex;align-items: center;">
|
|
|
+ <div style="color:#67C23A;">string</div>
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="light"
|
|
|
+ content="必填"
|
|
|
+ placement="top-start"
|
|
|
+ >
|
|
|
+ <el-button style="transform: scale(0.5);transform-origin: center;margin-left: 5%; " type="success" :icon="Check" circle size="mini" plain/>
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 2.5%;margin-left: 1%;padding-bottom: 1%;">
|
|
|
+ <div>响应示例</div><el-tabs type="card" style="margin-top: 1%;">
|
|
|
+ <el-tab-pane label="成功示例">
|
|
|
+ <div style="overflow: auto;height: 50vh">
|
|
|
+ <json-viewer
|
|
|
+ :value="data"
|
|
|
+ :expand-depth="5"
|
|
|
+ copyable
|
|
|
+ theme="my-theme"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="修改" name="second" style="">
|
|
|
+ <div style="overflow: auto;height: 80vh;">
|
|
|
+ <el-form size="mini" :key="tableKey" style="margin-left: 0%;width: 98%;" :model="formJi" label-position="right" ref="formRefJi" label-width="120px" :rules="rulesJi">
|
|
|
+ <el-form-item label="接口地址:" prop="enname" style="">
|
|
|
+ <div style="display: flex;width: 100%;">
|
|
|
+ <el-input
|
|
|
+ v-model="input3"
|
|
|
+ style="width: 70%;"
|
|
|
+ placeholder=""
|
|
|
+ class="input-with-select"
|
|
|
+ >
|
|
|
+ <template #prepend>
|
|
|
+ <el-select v-model="select" placeholder="" style="width: 115px">
|
|
|
+ <el-option label="http://" value="1" />
|
|
|
+ <el-option label="https://" value="2" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ <el-button type="primary" @click="showAdd" style="margin-left: 20%;">提交</el-button>
|
|
|
+ <el-button type="danger" @click="showAdd" style="margin-left: 1%;">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="服务分类:" prop="name" style="">
|
|
|
+ <el-select
|
|
|
+ v-model="formJi.type"
|
|
|
+ :disabled="isEdit"
|
|
|
+ style="width: 100%;margin-left: 0%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsType"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="服务名称:" prop="version" style="">
|
|
|
+ <el-input v-model="formJi.version" :disabled="isEdit"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="接口格式:" prop="name" style="">
|
|
|
+ <el-select
|
|
|
+ v-model="formJi.type"
|
|
|
+ :disabled="isEdit"
|
|
|
+ style="width: 100%;margin-left: 0%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsType"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="请求方式:" prop="version" style="">
|
|
|
+ <el-select
|
|
|
+ v-model="formJi.type"
|
|
|
+ :disabled="isEdit"
|
|
|
+ style="width: 100%;margin-left: 0%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsType"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="返回格式:" prop="version" style="">
|
|
|
+ <el-input v-model="formJi.version" :disabled="isEdit"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="组件简介:">
|
|
|
+ <el-input v-model="formJi.intro" style="width: 100%;" :disabled="isEdit" :rows="2" resize="none" type="textarea"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="组件简介:">
|
|
|
+ <el-input v-model="formJi.intro" style="width: 100%;" :disabled="isEdit" :rows="2" resize="none" type="textarea"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div style="margin-top: 2%;">
|
|
|
+ <div>
|
|
|
+ 请求参数
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;justify-content: flex-end;margin-right: 2%;">
|
|
|
+ <el-button @click="addPa" style="margin-top: 1%;" type="success" size="mini" plain>新增参数</el-button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-table
|
|
|
+ style="margin-top: 1%;width: 98%;"
|
|
|
+ :data="tableDataCan"
|
|
|
+ :cell-style="{ textAlign: 'center', }"
|
|
|
+ :header-cell-style="{ textAlign: 'center'}"
|
|
|
+ :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center' }"
|
|
|
+ border >
|
|
|
+ <el-table-column prop="itemName" label="参数字段">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input type="primary" v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;border: transparent;"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemName" label="参数名称">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input type="primary" v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemName" label="参数类型">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input type="primary" v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemName" label="参数说明" width="100">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input type="primary" v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="操作" width="222">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-button type="danger" @click="delCan(scope.row)" size="mini" text style="margin-left: 0%;">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 2%;">
|
|
|
+ <div>返回响应</div>
|
|
|
+ <el-tabs type="card" style="margin-top: 1%;">
|
|
|
+ <el-tab-pane label="成功">
|
|
|
+ <div style="display: flex;align-items: center;line-height: 1.5;font-size: 14px;margin-left: 1%;color: #606266;">
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; flex-direction: column;">
|
|
|
+ <!-- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" style="margin-top: 1%;margin-left: 2%;background-color: #F7F7F7;background-color: transparent;width: 15%;" default-expand-all>
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
|
|
|
+ <span><el-input v-model="node.label" size="mini"/></span>
|
|
|
+ <span style="display: flex;align-items: center;">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="light"
|
|
|
+ content="是否必填"
|
|
|
+ placement="top-start"
|
|
|
+ >
|
|
|
+ <el-checkbox v-model="checked1" label="" size="large" />
|
|
|
+ </el-tooltip>
|
|
|
+ <el-select
|
|
|
+ v-model="formJi.type"
|
|
|
+ :disabled="isEdit"
|
|
|
+ style="width: 100%;margin-left: -1%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsType"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="light"
|
|
|
+ content="是否允许null"
|
|
|
+ placement="top-start"
|
|
|
+ >
|
|
|
+ <el-checkbox v-model="checked1" label="" size="large" />
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-tree> -->
|
|
|
+ <el-input :rows="8" type="textarea" v-model="titleTree" size="mini" text style="margin-left: 1%;width: 98%;" ></el-input>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 2.5%;margin-left: 1%;padding-bottom: 1%;">
|
|
|
+ <el-tabs type="card" style="margin-top: 1%;">
|
|
|
+ <el-tab-pane label="成功示例">
|
|
|
+ <div style="overflow: auto;height: 20vh;">
|
|
|
+ <JsonEditorVue
|
|
|
+ v-model="msgSu"
|
|
|
+ style="height:100%;"
|
|
|
+ :mode="'code'"
|
|
|
+ :showBtns="false"
|
|
|
+ :options="{
|
|
|
+ navigationBar: false, // 隐藏顶部导航栏
|
|
|
+ statusBar: false, // 隐藏底部状态栏
|
|
|
+ mode: 'code', // 仅保留代码编辑模式
|
|
|
+ mainMenuBar: false // 隐藏主菜单栏
|
|
|
+ }"
|
|
|
+ lang="zh"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <el-dialog @close="clearFromTree" :title="titleTree" v-model="dialogVisible" title="" width="70%" destroy-on-close :key="tableKey">
|
|
|
+ <div style="overflow: auto;height: 80vh;">
|
|
|
+ <el-form size="mini" :key="tableKey" style="margin-left: 0%;width: 98%;" :model="formJi" label-position="right" ref="formRefJi" label-width="120px" :rules="rulesJi">
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="服务分类:" prop="name" style="">
|
|
|
+ <el-select
|
|
|
+ v-model="formJi.type"
|
|
|
+ :disabled="isEdit"
|
|
|
+ style="width: 100%;margin-left: 0%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsType"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="服务名称:" prop="version" style="">
|
|
|
+ <el-input v-model="formJi.version" :disabled="isEdit"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="接口地址:" prop="enname" style="">
|
|
|
+ <el-input
|
|
|
+ v-model="input3"
|
|
|
+ placeholder=""
|
|
|
+ class="input-with-select"
|
|
|
+ >
|
|
|
+ <template #prepend>
|
|
|
+ <el-select v-model="select" placeholder="" style="width: 115px">
|
|
|
+ <el-option label="http://" value="1" />
|
|
|
+ <el-option label="https://" value="2" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="接口格式:" prop="name" style="">
|
|
|
+ <el-select
|
|
|
+ v-model="formJi.type"
|
|
|
+ :disabled="isEdit"
|
|
|
+ style="width: 100%;margin-left: 0%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsType"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="请求方式:" prop="version" style="">
|
|
|
+ <el-select
|
|
|
+ v-model="formJi.type"
|
|
|
+ :disabled="isEdit"
|
|
|
+ style="width: 100%;margin-left: 0%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsType"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="返回格式:" prop="version" style="">
|
|
|
+ <el-input v-model="formJi.version" :disabled="isEdit"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="组件简介:">
|
|
|
+ <el-input v-model="formJi.intro" style="width: 100%;" :disabled="isEdit" :rows="2" resize="none" type="textarea"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="组件简介:">
|
|
|
+ <el-input v-model="formJi.intro" style="width: 100%;" :disabled="isEdit" :rows="2" resize="none" type="textarea"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div style="margin-top: 2%;">
|
|
|
+ <div>
|
|
|
+ 请求参数
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-table
|
|
|
+ style="margin-top: 1%;"
|
|
|
+ :data="tableDataCan"
|
|
|
+ :cell-style="{ textAlign: 'center', }"
|
|
|
+ :header-cell-style="{ textAlign: 'center'}"
|
|
|
+ :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center' }"
|
|
|
+ border >
|
|
|
+ <el-table-column prop="itemName" label="参数字段">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input type="primary" v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;border: transparent;"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemName" label="参数名称">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input type="primary" v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemName" label="参数类型">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input type="primary" v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="itemName" label="参数备注">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input type="primary" v-model="scope.row.itemName" size="mini" text style="margin-left: 0%;"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="操作" width="222">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-button type="danger" @click="delCan(scope.row)" size="mini" text style="margin-left: 0%;">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 2%;">
|
|
|
+ <div>返回响应</div>
|
|
|
+ <el-tabs type="card" style="margin-top:0%;">
|
|
|
+ <el-tab-pane label="成功">
|
|
|
+ <div style="">
|
|
|
+ <!-- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" style="margin-top: 1%;margin-left: 2%;background-color: #F7F7F7;background-color: transparent;width: 15%;" default-expand-all>
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
|
|
|
+ <span><el-input v-model="node.label" size="mini"/></span>
|
|
|
+ <span style="display: flex;align-items: center;">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="light"
|
|
|
+ content="是否必填"
|
|
|
+ placement="top-start"
|
|
|
+ >
|
|
|
+ <el-checkbox v-model="checked1" label="" size="large" />
|
|
|
+ </el-tooltip>
|
|
|
+ <el-select
|
|
|
+ v-model="formJi.type"
|
|
|
+ :disabled="isEdit"
|
|
|
+ style="width: 100%;margin-left: -1%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionsType"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="light"
|
|
|
+ content="是否允许null"
|
|
|
+ placement="top-start"
|
|
|
+ >
|
|
|
+ <el-checkbox v-model="checked1" label="" size="large" />
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-tree> -->
|
|
|
+ <el-input :rows="8" type="textarea" v-model="titleTree" size="mini" text style="margin-left: 0%;width: 100%;" ></el-input>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 2.5%;margin-left: 1%;padding-bottom: 1%;">
|
|
|
+ <el-tabs type="card" style="margin-top: 1%;">
|
|
|
+ <el-tab-pane label="成功示例">
|
|
|
+ <div style="overflow: auto;height: 20vh;">
|
|
|
+ <JsonEditorVue
|
|
|
+ v-model="msgSu"
|
|
|
+ style="height:100%;"
|
|
|
+ :mode="'code'"
|
|
|
+ :showBtns="false"
|
|
|
+ :options="{
|
|
|
+ navigationBar: false, // 隐藏顶部导航栏
|
|
|
+ statusBar: false, // 隐藏底部状态栏
|
|
|
+ mode: 'code', // 仅保留代码编辑模式
|
|
|
+ mainMenuBar: false // 隐藏主菜单栏
|
|
|
+ }"
|
|
|
+ lang="zh"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button size="mini" @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button v-if="isAdd" type="primary" @click="addTree" size="mini">
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
+ <el-button v-if="!isAdd" type="primary" @click="saveEditTree" size="mini">
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
</template>
|
|
|
- </el-table-column>
|
|
|
- </el-table> -->
|
|
|
- </el-row>
|
|
|
- <div style="width: 100%;text-align: center;">
|
|
|
- <!-- <el-pagination
|
|
|
- small
|
|
|
- style="margin-top:1%;"
|
|
|
- background
|
|
|
- v-model='pageNum'
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- layout="prev, pager, next"
|
|
|
- :total="dataTotal"
|
|
|
- class="mt-4"
|
|
|
- /> -->
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <el-pagination
|
|
|
- style="margin-top:1%"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :page-sizes="[ 20, 30, 40]"
|
|
|
- :page-size="pageSize"
|
|
|
- :current-page="pageNum"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="dataTotal">
|
|
|
- </el-pagination>
|
|
|
- </div>
|
|
|
-
|
|
|
- <el-dialog
|
|
|
- v-model="addServiceVisible"
|
|
|
- title="服务"
|
|
|
- fullscreen
|
|
|
- @close="closeDialog"
|
|
|
- >
|
|
|
- <ae-service
|
|
|
- :serviceVisible="addServiceVisible"
|
|
|
- :service="checkedService"
|
|
|
- @close="closeDialog"
|
|
|
- @refreshTable="getList"
|
|
|
- ></ae-service>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
-<script setup name="Menu">
|
|
|
-</script>
|
|
|
-<script>
|
|
|
-import "@/assets/styles/common.scss";
|
|
|
-import AeService from "./AeService";
|
|
|
-import {
|
|
|
- getServiceInfo,
|
|
|
- saveServiceInfo,
|
|
|
- deleteService,
|
|
|
-} from "@/api/service/info";
|
|
|
+<script setup>
|
|
|
+import { Plus,Search,Filter,Promotion,Check } from '@element-plus/icons-vue'
|
|
|
+import { reactive } from 'vue'
|
|
|
+import { addDataCate,getCateTree,getCateDe,editCate,delCate,addDataItem,getItem,getItemDe,editItem,delItem} from "@/api/service/cate";
|
|
|
+import { ref, onMounted, onUnmounted, nextTick,onBeforeMount } from 'vue';
|
|
|
+import JsonViewer from 'vue-json-viewer'
|
|
|
+import 'vue-json-viewer/style.css'
|
|
|
+import JsonEditorVue from 'json-editor-vue3'
|
|
|
|
|
|
-export default {
|
|
|
- name: "SerivceInfo",
|
|
|
- components: {
|
|
|
- AeService,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- dialogVisible:false,
|
|
|
- addServiceVisible: false,
|
|
|
- checkedService: undefined,
|
|
|
- tableData: [],
|
|
|
- pageSize:20,
|
|
|
- heightAll:window.innerHeight,
|
|
|
- tableHeight: window.innerHeight - 300,
|
|
|
- paramList: [
|
|
|
- {
|
|
|
- paramCode: "name",
|
|
|
- paramName: "服务名称",
|
|
|
- align: "left",
|
|
|
- width: "150",
|
|
|
- },
|
|
|
- {paramCode: "type", paramName: "服务类型", width: "100"},
|
|
|
- {paramCode: "url", paramName: "服务地址", align: "left"},
|
|
|
- {paramCode: "rqtype", paramName: "请求方式", width: "76"},
|
|
|
- // {
|
|
|
- // paramCode: "serviceSource",
|
|
|
- // paramName: "所属模型",
|
|
|
- // align: "left",
|
|
|
- // width: "150",
|
|
|
- // },
|
|
|
- {paramCode: "cnt", paramName: "调用次数", width: "76"},
|
|
|
- {paramCode: "rlstm", paramName: "发布时间", width: "110"},
|
|
|
- ],
|
|
|
- dataTotal: 0,
|
|
|
- pageNum:1,
|
|
|
- query: {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 20,
|
|
|
- orderBy: " RLSTM DESC ",
|
|
|
- data: {
|
|
|
- name: "",
|
|
|
- cateCode: "",
|
|
|
- },
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getList();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleSizeChange(num){
|
|
|
- this.query.pageSize = num
|
|
|
- this.getList()
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const treeData = ref(
|
|
|
+ {label:'上海市城区洪涝仿真模型'},
|
|
|
+ {label:'上海沿海风暴潮预报模型'},
|
|
|
+ {label:'黄浦江水系水文分析预报数值模拟'},
|
|
|
+ {label:'苏州河水系水情预报模型'},
|
|
|
+ {label:'内涝风险实时预警与预报'},
|
|
|
+ {label:'上海市中心城区排水系统模型'},
|
|
|
+ {label:'温带风暴潮预报模型等专业模型的标准化改造'},
|
|
|
+)
|
|
|
+const msgSu= ref({
|
|
|
+ "msg":"操作成功",
|
|
|
+ "code":200
|
|
|
+})
|
|
|
+const options = ref([
|
|
|
+ {label:'开发中',
|
|
|
+ value:'1'
|
|
|
},
|
|
|
- handleCurrentChange(num){
|
|
|
- this.query.pageNum = num
|
|
|
- this.getList()
|
|
|
+ {label:'运行中',
|
|
|
+ value:'2'
|
|
|
},
|
|
|
- addDetailPropertyInPlace(arr) {
|
|
|
- arr.forEach(obj => {
|
|
|
- obj.detail = structuredClone ? structuredClone(obj) : deepCopy(obj);
|
|
|
- });
|
|
|
- arr.forEach(obj => {
|
|
|
- obj.detail1 = []
|
|
|
- obj.detail1.push(obj.detail)
|
|
|
- });
|
|
|
- return arr
|
|
|
- },
|
|
|
- getList() {
|
|
|
- getServiceInfo(this.query).then((r) => {
|
|
|
- // this.tableData = r.rows
|
|
|
- this.tableData = this.addDetailPropertyInPlace(r.rows)
|
|
|
- console.log(this.tableData)
|
|
|
- this.dataTotal = r.total
|
|
|
- });
|
|
|
- },
|
|
|
- // 关闭弹窗
|
|
|
- closeDialog() {
|
|
|
- // this.addServiceVisible = false;
|
|
|
- // this.checkedService = undefined;
|
|
|
- },
|
|
|
- /** 添加、修改服务 */
|
|
|
- saveService(service) {
|
|
|
- this.addServiceVisible = true;
|
|
|
- console.log(service.serviceList)
|
|
|
- if (service.serviceList[0].srvId) {
|
|
|
- this.checkedService = service.serviceList[0];
|
|
|
- }
|
|
|
- else{
|
|
|
- return
|
|
|
- }
|
|
|
+])
|
|
|
+const tableDataCan = ref([
|
|
|
+ {itemName:'1'}
|
|
|
+])
|
|
|
+const data = ref([])
|
|
|
+const select = ref('1')
|
|
|
+const activeName = ref('first')
|
|
|
+const title = ref([])
|
|
|
+const titleTree = ref([])
|
|
|
+const currentPage = ref(1)
|
|
|
+const total = ref(1)
|
|
|
+const tableData = ref([])
|
|
|
+const tableheight = window.innerHeight*0.7
|
|
|
+const heightAll = window.innerHeight
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const dialogVisibleTree = ref(false)
|
|
|
+const isAdd = ref(false)
|
|
|
+const isAddTa = ref(false)
|
|
|
+const treeId = ref('');
|
|
|
+const valueSta = ref('1');
|
|
|
+const formZu = ref({
|
|
|
+ itemName:'',
|
|
|
+ itemTp:'',
|
|
|
+ itemEn:'',
|
|
|
+ itemTp:'',
|
|
|
+ itemDataTp:'',
|
|
|
+ itemDefaultVal:'',
|
|
|
+ itemUnit:'',
|
|
|
+ itemNotes:'',
|
|
|
+});
|
|
|
+const formJi = ref({
|
|
|
+ name:'',
|
|
|
+ version:'',
|
|
|
+ enname:'',
|
|
|
+ devlang:'',
|
|
|
+ intro:'',
|
|
|
+ type:''
|
|
|
+});
|
|
|
+const rulesJi = reactive({
|
|
|
+ name: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ version: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ enname: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+});
|
|
|
+const formRefJi = ref();
|
|
|
+const rulesZu = reactive({
|
|
|
+ itemName: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ itemEn: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ itemTp: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ itemDataTp: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ itemDefaultVal: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+});
|
|
|
+const formRefZu = ref();
|
|
|
|
|
|
- },
|
|
|
- // 更新状态
|
|
|
- updateStatus(service) {
|
|
|
- if (service.status == "1") {
|
|
|
- service.status = "0";
|
|
|
- } else {
|
|
|
- service.status = "1";
|
|
|
+const formTree = ref({
|
|
|
+ itemName:'',
|
|
|
+ catePid:'',
|
|
|
+ itemNo:'',
|
|
|
+ itemNotes:''
|
|
|
+});
|
|
|
+const rulesTree = reactive({
|
|
|
+ itemNo: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ catePid: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+ itemName: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
+});
|
|
|
+const formRefTree = ref();
|
|
|
+
|
|
|
+function addPa(){
|
|
|
+ var par = {
|
|
|
+ itemName:''
|
|
|
+ }
|
|
|
+ tableDataCan.value.push(par)
|
|
|
+}
|
|
|
+function delCan(row){
|
|
|
+
|
|
|
+}
|
|
|
+function clearForm(){
|
|
|
+ formZu.value = {
|
|
|
+ itemName:'',
|
|
|
+ itemTp:'',
|
|
|
+ itemEn:'',
|
|
|
+ itemTp:'',
|
|
|
+ itemDataTp:'',
|
|
|
+ itemDefaultVal:'',
|
|
|
+ itemUnit:'',
|
|
|
+ itemNotes:'',
|
|
|
+ }
|
|
|
+}
|
|
|
+function getTable(){
|
|
|
+ var par = {
|
|
|
+ pageNum:currentPage.value,
|
|
|
+ pageSize:15,
|
|
|
+ cateId:''
|
|
|
+ }
|
|
|
+ getItem(par).then(res=>{
|
|
|
+ tableData.value = res.rows
|
|
|
+ total.value = res.total
|
|
|
+ })
|
|
|
+}
|
|
|
+function showAdd(){
|
|
|
+ title.value = '新增'
|
|
|
+ dialogVisible.value = true
|
|
|
+}
|
|
|
+function showEdit(row){
|
|
|
+ isAddTa.value = false
|
|
|
+ title.value = '编辑'
|
|
|
+ dialogVisible.value = true
|
|
|
+ getItemDe(row.dataId).then(res=>{
|
|
|
+ formZu.value = res.data
|
|
|
+ })
|
|
|
+}
|
|
|
+function showAddTree(){
|
|
|
+ isAdd.value = true
|
|
|
+ titleTree.value = '新增节点'
|
|
|
+ dialogVisibleTree.value = true
|
|
|
+}
|
|
|
+function clearFromTree(){
|
|
|
+ formTree.value = {
|
|
|
+ itemName:'',
|
|
|
+ catePid:'',
|
|
|
+ itemNo:'',
|
|
|
+ itemNotes:''
|
|
|
+ }
|
|
|
+}
|
|
|
+function getTree(){
|
|
|
+ getCateTree().then(res=>{
|
|
|
+ data.value = res.data
|
|
|
+ })
|
|
|
+}
|
|
|
+function addTa(){
|
|
|
+ formRefZu.value.validate(async (valid) => {
|
|
|
+ await addDataItem(formZu.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("新增成功");
|
|
|
+ getTable()
|
|
|
+ dialogVisible.value = false
|
|
|
}
|
|
|
- saveServiceInfo({srvId: service.srvId, status: service.status}).then(
|
|
|
- (r) => {
|
|
|
- this.$message({
|
|
|
- message: (service.status == 1 ? "启用" : "停用") + "成功",
|
|
|
- type: "success",
|
|
|
- });
|
|
|
- this.getList();
|
|
|
- }
|
|
|
- );
|
|
|
- },
|
|
|
- handleDelete(service) {
|
|
|
- const srvId = service.srvId;
|
|
|
- const name = service.name;
|
|
|
- this.$modal
|
|
|
- .confirm('是否确认删除"' + name + '"服务的数据项？')
|
|
|
- .then(() => deleteService({params: {srvId: srvId}}))
|
|
|
- .then(() => {
|
|
|
- this.getList();
|
|
|
- this.$modal.msgSuccess("删除成功");
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- });
|
|
|
- },
|
|
|
- tableRowClassName({row, rowIndex}) {
|
|
|
- if (row.status != 1) {
|
|
|
- return "warning-row";
|
|
|
+ })
|
|
|
+ });
|
|
|
+}
|
|
|
+function saveEditTa(){
|
|
|
+ editItem(formZu.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("修改成功");
|
|
|
+ dialogVisible.value = false
|
|
|
+ getTable()
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+function delRow(row) {
|
|
|
+ proxy.$modal.confirm('是否确认删除？').then(function () {
|
|
|
+ return delItem(row.dataId);
|
|
|
+ }).then(() => {
|
|
|
+ getTable();
|
|
|
+ proxy.$modal.msgSuccess("删除成功");
|
|
|
+ }).catch(() => {});
|
|
|
+};
|
|
|
+async function addTree(){
|
|
|
+ formRefTree.value.validate(async (valid) => {
|
|
|
+ await addDataCate(formTree.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("新增成功");
|
|
|
+ getTree()
|
|
|
+ dialogVisibleTree.value = false
|
|
|
}
|
|
|
- return "";
|
|
|
- },
|
|
|
- },
|
|
|
+ })
|
|
|
+ });
|
|
|
+}
|
|
|
+function saveEditTree(){
|
|
|
+ editCate(formTree.value).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ proxy.$modal.msgSuccess("修改成功");
|
|
|
+ dialogVisibleTree.value = false
|
|
|
+ getTree()
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+function handleNodeClick(node, data){
|
|
|
+ console.log(data)
|
|
|
+}
|
|
|
+function delTree(node, data) {
|
|
|
+ proxy.$modal.confirm('是否确认删除？').then(function () {
|
|
|
+ return delCate(data.id);
|
|
|
+ }).then(() => {
|
|
|
+ getTree();
|
|
|
+ proxy.$modal.msgSuccess("删除成功");
|
|
|
+ }).catch(() => {});
|
|
|
};
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.box {
|
|
|
- margin-bottom: 10px;
|
|
|
+function editTree(node, data){
|
|
|
+ console.log(data)
|
|
|
+ titleTree.value = '编辑'
|
|
|
+ isAdd.value = false
|
|
|
+ dialogVisibleTree.value = true
|
|
|
+ getCateDe(data.id).then(res=>{
|
|
|
+ formTree.value = res.data
|
|
|
+ })
|
|
|
+ console.log(node, data)
|
|
|
}
|
|
|
+onMounted(() => {
|
|
|
+ getTree()
|
|
|
+ getTable()
|
|
|
+});
|
|
|
|
|
|
-.box ::v-deep .el-form-item {
|
|
|
- margin-bottom: 0;
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+/* 节点垂直间距 */
|
|
|
+:deep(.el-tree-node) {
|
|
|
+ margin-bottom:5px !important; /* 增大节点间距 */
|
|
|
}
|
|
|
-
|
|
|
-.table_box ::v-deep .el-table {
|
|
|
- border: 1px solid #e6e6e6;
|
|
|
- border-right: 1px solid #e6e6e6;
|
|
|
- border-bottom: none;
|
|
|
- border-radius: 5px;
|
|
|
+.el-popover.custom-popover {
|
|
|
+ min-width: 50px;
|
|
|
+ padding: 8px; /* 可选：调整内边距 */
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.dot {
|
|
|
+ width: 20px; /* 控制圆点直径 */
|
|
|
+ height: 20px;
|
|
|
+ background-color: #333; /* 实心颜色 */
|
|
|
+ border-radius: 50%; /* 关键属性 */
|
|
|
+ display: inline-block; /* 确保与其他元素并排 */
|
|
|
+}
|
|
|
+/* 全局透明样式（不使用 scoped） */
|
|
|
+.transparent-select .el-select__wrapper {
|
|
|
+ background-color: transparent !important;
|
|
|
+ border-color: transparent !important;
|
|
|
+ box-shadow: none !important;
|
|
|
}
|
|
|
|
|
|
-::v-deep .el-dialog {
|
|
|
- position: relative;
|
|
|
- margin: 0 auto 0px;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 2px;
|
|
|
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
|
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
|
- -webkit-box-sizing: border-box;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+.transparent-select .el-select__selection {
|
|
|
+ background-color: transparent;
|
|
|
}
|
|
|
|
|
|
-::v-deep .el-dialog__body {
|
|
|
- // border-top: 1px solid #dcdfe6;
|
|
|
- max-height: 100% !important;
|
|
|
- min-height: 70%;
|
|
|
- overflow-y: auto;
|
|
|
+/* 处理悬停和聚焦状态 */
|
|
|
+.transparent-select .el-select__wrapper:hover,
|
|
|
+.transparent-select .el-select__wrapper.is-focused {
|
|
|
+ border-color: transparent !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+}
|
|
|
|
|
|
- &::-webkit-scrollbar {
|
|
|
- width: 2px;
|
|
|
- background-color: #ccc;
|
|
|
+/* 下拉箭头图标 */
|
|
|
+.transparent-select .el-select__caret {
|
|
|
+ color: rgba(0, 0, 0, 0.5); /* 半透明图标 */
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+:deep(.treeLeft) .el-tree-node__content {
|
|
|
+ padding-top: 10px;
|
|
|
+}
|
|
|
+:deep(.treeLeft) .el-tree-node__content:hover {
|
|
|
+ background-color: rgb(243，243，245);
|
|
|
+}
|
|
|
+:deep(.treeLeft) .el-tree-node__content:active {
|
|
|
+ background-color: rgka(69,157,255,0.1) !important;
|
|
|
+ transform: scale(0.98); /* 轻微缩放增强按压感 */
|
|
|
}
|
|
|
|
|
|
- &::-webkit-scrollbar-thumb {
|
|
|
- background-color: #0ae;
|
|
|
+ /* 选中态（Active） */
|
|
|
+:deep(.treeLeft) .el-tree-node.is-current > .el-tree-node__content {
|
|
|
+ background-color: rgb(237,237，239) !important;
|
|
|
}
|
|
|
|
|
|
- &::-webkit-scrollbar-track {
|
|
|
- background-color: #ccc;
|
|
|
- }
|
|
|
+.tab-container {
|
|
|
+ height: 100vh; /* 关键：父容器明确高度 */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.drag-handle {
|
|
|
+ cursor: move;
|
|
|
+}
|
|
|
+
|
|
|
+.ghost {
|
|
|
+ opacity: 0.5;
|
|
|
+ background: #c8ebfb;
|
|
|
+}
|
|
|
+
|
|
|
+/* 防止文字选中 */
|
|
|
+:deep(.el-table__row) {
|
|
|
+ user-select: none;
|
|
|
+ -webkit-user-select: none;
|
|
|
}
|
|
|
</style>
|
|
|
+<style scoped lang="scss">
|
|
|
+
|
|
|
+.custom-tree-node {
|
|
|
+ display: flex; /* 启用 Flex 布局 */
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ gap: 8px; /* 图标与文字间距 */
|
|
|
+}
|
|
|
+.el-table .el-table__row td {
|
|
|
+ height: 60px !important; /* 行高 */
|
|
|
+}
|
|
|
+.custom-tree-node {
|
|
|
+ display: flex; /* 启用 Flex 布局 */
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ gap: 8px; /* 图标与文字间距 */
|
|
|
+}
|
|
|
+</style>
|
