Skip to content

S
so-manage-ui
"ssh:/git@cloud.wodcloud.com:10022/gzga-jzapi/apaas-ui.git" did not exist on "8a26a769a75c18374a68bb9264359da600b8a00d"
Commit fdd9d524 authored by 赵伟庚's avatar 赵伟庚
Browse files
Options

update：废弃setup()写法替换为<script setup>

parent 2436494d
Hide whitespace changes
Inline Side-by-side
Showing with 300 additions and 3028 deletions
src/bg-ui/bg-filter-group.vue
View file @ fdd9d524
......@@ -22,7 +22,7 @@
</div>
</div>
<div class="filter-group" v-if="showFlag">
<slot name="filter_group"></slot>
<slot name="filter_group"></slot>
</div>
</div>
</template>
......
src/bg-ui/bg-pagination.vue
View file @ fdd9d524
......@@ -15,54 +15,48 @@
</div>
</template>
<script>
export default {
name: "pagination",
props: {
small: {
type: Boolean,
default: () => false
},
page: {
type: Number,
default: 1
},
size: {
type: Number,
default: 10,
},
pageSizes: {
type: Array,
default: [10,50,100]
},
total: {
type: Number,
default: 0
},
layout: {
type: String,
default: "total, sizes, prev, pager, next, jumper"
},
background: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
<script setup>
const props = defineProps({
small: {
type: Boolean,
default: () => false
},
setup(props, context) {
const changePage = (val) => {
context.emit("change-page",val)
}
const changeSize = (val) => {
context.emit("change-size",val)
}
return {
changePage,
changeSize
}
page: {
type: Number,
default: 1
},
size: {
type: Number,
default: 10,
},
pageSizes: {
type: Array,
default: [10,50,100]
},
total: {
type: Number,
default: 0
},
layout: {
type: String,
default: "total, sizes, prev, pager, next, jumper"
},
background: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['change-page','change-size'])
const changePage = (val) => {
emit("change-page",val)
}
const changeSize = (val) => {
emit("change-size",val)
}
</script>
src/bg-ui/bg-rich-text.vue
View file @ fdd9d524
<template>
<div style="border: 1px solid #ccc;z-index: 100;">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="valueHtml"
@onChange="handleChange"
@onBlur="handleBlur"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
/>
</div>
<div style="border: 1px solid #ccc;z-index: 100;">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="valueHtml"
@onChange="handleChange"
@onBlur="handleBlur"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
/>
</div>
</template>
<script>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {
useFormItem,
} from 'element-plus'
export default {
components: { Editor, Toolbar },
props: {
modelValue: {
type: String,
default: '',
},
disabled:{
type:Boolean,
default:false
}
const props = defineProps({
modelValue: {
type: String,
default: '',
},
emits: ['update:modelValue','change','blur'],
watch:{
modelValue(n,o){
this.valueHtml = n
}
disabled:{
type:Boolean,
default:false
},
setup(props,{ emit }) {
//引入form-item
const { formItem } = useFormItem()
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('')
// 模拟 ajax 异步获取内容
onMounted(() => {
setTimeout(()=>{
valueHtml.value = props.modelValue
// console.log(valueHtml.value);
})
})
mode: {
type: String,
default: 'default'
}
})
const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }
const emit = defineEmits(['update:modelValue','change','blur'])
// watch(
// props,modelValue,
// (n,o) => {
// }
// )
const valueHtml = ref('')
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
const { formItem } = useFormItem()
const handleCreated = (editor) => {
editorRef.value = editor // 记录 editor 实例，重要！
if(props.disabled){
editor.disable()
}
}
const editorRef = shallowRef()
const handleChange = ()=>{
emit("update:modelValue", valueHtml.value);
// formItem?.validate?.('change').catch((err) => debugWarn(err))
}
onMounted(() => {
setTimeout(()=>{
valueHtml.value = props.modelValue
})
})
const handleBlur = ()=>{
formItem?.validate?.('blur').catch((err) => console.warn(err))
}
const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }
return {
editorRef,
valueHtml,
mode: 'default', // 或 'simple'
toolbarConfig,
editorConfig,
handleCreated,
handleChange,
handleBlur,
};
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
const handleCreated = (editor) => {
editorRef.value = editor // 记录 editor 实例，重要！
if(props.disabled){
editor.disable()
}
}
const handleChange = ()=>{
emit("update:modelValue", valueHtml.value);
}
const handleBlur = ()=>{
formItem?.validate?.('blur').catch((err) => console.warn(err))
}
watch(
() => props.modelValue,
(n,o) => {
valueHtml.value = n
}
)
</script>
\ No newline at end of file
src/bg-ui/bg-table.vue
View file @ fdd9d524
<template>
<el-table
:height="height"
ref="table"
class="bg-table"
:data="rows"
......@@ -31,10 +32,10 @@
<!-- checkbox -->
</el-table-column>
<el-table-column
v-if="isIndex"
type="index"
:label="indexLabel"
width="54"
v-if="isIndex"
type="index"
:label="indexLabel"
width="54"
align="left"
>
<!-- 序号 -->
......@@ -66,148 +67,134 @@
</el-table>
</template>
<script>
<script setup>
import { watch, ref, } from 'vue'
import { selectTableMixin } from './hook/mixin-select-table'
export default {
name: "BgTable",
setup() {
const {
nowSelectData,
allSelectData,
selectData,
initSelectTableData,
runPage,
dealSelectData
} = selectTableMixin()
let {
nowSelectData,
allSelectData,
selectData,
initSelectTableData,
runPage,
dealSelectData
} = selectTableMixin()
return {
nowSelectData,
allSelectData,
selectData,
initSelectTableData,
runPage,
dealSelectData
}
const props = defineProps({
height: {
type: [Number, String],
default: 'auto'
},
props: {
headers: {
type: Array,
require: true,
},
rows: {
type: Array,
default: () => [],
},
select: {
type: Boolean,
default: false,
},
// selectable: {
// type: Function,
// },
isIndex: {
type: Boolean,
default: false
},
indexLabel: {
type: String,
default: "序号"
},
stripe: {
type: Boolean,
default: false
},
paddingLeft: {
type: [Number, String],
default: () => 12,
},
canEdit: {
type: Boolean,
default: false
}, // 多选框是否禁用
canEditFlag: {
typr : Boolean,
default: ""
}, // 决定多选框是否禁用的字段
headers: {
type: Array,
require: true,
},
/* filters: {
ellipsis(value, max) {
if (!value) {
return "";
} else if (max && value.length > max) {
return value.slice(0, max - 1) + "...";
} else {
return value;
}
},
}, */
watch:{
rows(n,o){
if(n.length&&this.select){
this.runPage()
this.initSelectTableData(n).then((selectData)=>{
if(selectData.length){
setTimeout(()=>{
this.toggleRowArrSelection(selectData)
})
}
})
}
}
rows: {
type: Array,
default: () => [],
},
select: {
type: Boolean,
default: false,
},
// selectable: {
// type: Function,
// },
isIndex: {
type: Boolean,
default: false
},
indexLabel: {
type: String,
default: "序号"
},
stripe: {
type: Boolean,
default: false
},
created(){
console.log(this.$attrs)
paddingLeft: {
type: [Number, String],
default: () => 12,
},
methods: {
toggleRowSelection(row, flag = true) {
this.$refs.table.toggleRowSelection(row, flag);
},
selectAction(selection) {
this.$emit("selectAc", {allLength:Object.keys(this.allSelectData).length+this.nowSelectData.length,selection});
},
clearSelection() {
this.$refs.table.clearSelection();
this.$emit("select", {allLength:Object.keys(this.allSelectData).length+this.nowSelectData.length,selection:[]});
},
setSelectedRow(row) {
this.$refs.table.toggleRowSelection(row);
},
toggleRowArrSelection(arr, flag = true){
arr.forEach(e => {
this.$refs.table.toggleRowSelection(e, flag);
});
},
selectActionRow(selection,row){
this.selectData(selection)
this.$emit("select", {allLength:Object.keys(this.allSelectData).length+this.nowSelectData.length,selection});
},
selectActionAll(selection){
this.selectData(selection)
this.$emit("select", {allLength:Object.keys(this.allSelectData).length+this.nowSelectData.length,selection});
},
clearTable(){//清除选中数据,在页面状态更新时使用
this.allSelectData={}
this.nowSelectData=[]
this.clearSelection();
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return "white-row";
} else {
return "stripe-row";
}
},
selectable(row,index) {
if (this.canEdit) {
if (row[this.canEditFlag] && row[this.canEditFlag] == 1) {
return false
}else {
return true
canEdit: {
type: Boolean,
default: false
}, // 多选框是否禁用
canEditFlag: {
typr : Boolean,
default: ""
}, // 决定多选框是否禁用的字段
})
const table = ref(null)
const emit = defineEmits(['selectAc','select'])
watch(
() => props.rows,
(n,o) => {
if (n.length && props.select) {
runPage()
initSelectTableData(n).then((selectData)=>{
if(selectData.length){
setTimeout(()=>{
toggleRowArrSelection(selectData)
})
}
}else {
return true
}
})
}
},
};
}
)
const toggleRowSelection = (row, flag = true) => {
table.value.toggleRowSelection(row, flag);
}
const selectAction = (selection) => {
emit("selectAc", {allLength:Object.keys(allSelectData).length+nowSelectData.length,selection});
}
const clearSelection = () => {
table.value.clearSelection();
emit("select", {allLength:Object.keys(allSelectData).length+nowSelectData.length,selection:[]});
}
const setSelectedRow = (row) => {
toggleRowSelection(row);
}
const toggleRowArrSelection = (arr, flag = true) => {
arr.forEach(e => {
toggleRowSelection(e, flag);
});
}
const selectActionRow = (selection,row) => {
selectData(selection)
emit("select", {allLength:Object.keys(allSelectData).length+nowSelectData.length,selection});
}
const selectActionAll = (selection) => {
selectData(selection)
emit("select", {allLength:Object.keys(allSelectData).length+nowSelectData.length,selection});
}
const clearTable = () => {//清除选中数据,在页面状态更新时使用
allSelectData={}
nowSelectData=[]
clearSelection();
}
const tableRowClassName = ({ row, rowIndex }) => {
if (rowIndex % 2 == 0) {
return "white-row";
} else {
return "stripe-row";
}
}
const selectable = (row,index) => {
if (props.canEdit) {
if (row[props.canEditFlag] && row[props.canEditFlag] == 1) {
return false
}else {
return true
}
}else {
return true
}
}
defineExpose({
clearTable,
toggleRowSelection,
})
</script>
src/components/ability-detail/base-info.vue deleted 100644 → 0
View file @ 2436494d
<template>
<div class="base-info" v-if="data">
<div class="info-icon" v-if="data.ability_logo">
<img :src="data.ability_logo" />
</div>
<div class="info-detail">
<h3>
<span>{{ data.ability_name }}</span>
<span class="openness" v-if="data.openness_name != ''">{{ data.openness_name }}</span>
</h3>
<p>{{ data.synopsis }}</p>
<ul>
<li class="text-clip">
<bg-icon icon="#bg-ic-layers" />
<span>业务类型：</span>
<span>{{ data.business_type_name }}</span>
</li>
<li class="text-clip">
<bg-icon icon="#bg-ic-user" />
<span>联系人：&emsp;</span>
<span>{{ data.contact_person }}</span>
</li>
<li class="text-clip">
<bg-icon icon="#bg-ic-time" />
<span>发布时间：&emsp;&emsp;</span>
<span>{{ data.created_time }}</span>
</li>
<li class="text-clip">
<bg-icon icon="#bg-ic-layout-4" />
<span>业务领域：</span>
<span>{{ data.sectors_name }}</span>
</li>
<li class="text-clip">
<bg-icon icon="#bg-ic-phone-call" />
<span>联系电话：</span>
<span>{{ data.contact_phone }}</span>
</li>
<li class="text-clip">
<bg-icon icon="#bg-ic-time" />
<span>最后更新时间：</span>
<span>{{ data.updated_time }}</span>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "BaseInfo",
props: {
data: {
type: Object,
default: () => null,
},
},
};
</script>
<style lang="scss" scoped>
.base-info {
padding: 24px;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px;
margin-bottom: 16px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
> .info-icon {
flex: 0 0 144px;
height: 144px;
background-color: #f5f6fa;
border-radius: 4px;
overflow: hidden;
margin-right: 24px;
> img {
width: 100%;
height: 100%;
}
}
> .info-detail {
flex: 1;
> h3 {
font-weight: bold;
font-size: 16px;
line-height: 32px;
color: #202531;
.openness {
margin-left: 10px;
display: inline-block;
border: 1px solid #9ad5c8;
background-color: #f1f9f7;
border-radius: 3px;
font-size: 12px;
line-height: 1;
padding: 3px 6px;
color: #429e8a;
font-weight: normal;
}
}
> p {
font-size: 14px;
line-height: 20px;
color: #202531;
}
> ul {
padding: 16px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
background-color: #f5f6fa;
border-radius: 4px;
overflow: hidden;
margin-top: 16px;
> li {
width: 30%;
margin-right: 16px;
> .bg-icon {
margin-right: 8px;
}
> span {
font-size: 14px;
line-height: 34px;
color: #616f94;
> :nth-child(2) {
color: #202531;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/components/ability-detail/folder-info.vue deleted 100644 → 0
View file @ 2436494d
<template>
<div class="folder-info">
<div class="left-part" :class="include_mock_service? '' : 'padding-reset'">
<bg-btns v-model="type" :options="types" v-if="!mockDetail && include_mock_service" />
<el-tree
:data="data"
node-key="code"
default-expand-all
@node-click="handleNodeClick"
>
<template #default="{ data }">
<div class="custom-tree-node" pointer-events="none">
<template v-if="data.node_type === 0">
<bg-icon
icon="#bg-ic-s-folder-opened"
v-if="fileOpenState[data.code] !== false"
/>
<bg-icon icon="#bg-ic-s-folder" v-else />
</template>
<template v-else>
<el-tooltip
effect="dark"
:content="testStateTexts[data.test_state]"
placement="top"
>
<bg-icon
v-if="data.service_type != 'cda56bb2-d00d-436d-9fc2-0508737fe503'"
:class="`state-${data.test_state}`"
:icon="testStateIcons[data.test_state]"
/>
</el-tooltip>
</template>
<span :style="data.service_type != 'cda56bb2-d00d-436d-9fc2-0508737fe503' ? {} : { marginLeft: '20px' }">{{ data.node_name }}</span>
</div>
</template>
</el-tree>
</div>
<div class="right-part" v-if="nodeDetail">
<folder
class="folder-detail"
:data="nodeDetail"
:disabled="true"
v-if="nodeDetail.node_type == 0"
:showTip="false"
/>
<file :data="nodeDetail" :disabled="true" :detailMock="type == 'configMock' && !mockDetail" v-else />
</div>
</div>
</template>
<script>
import { reactive, toRefs, watch, onBeforeMount } from "vue";
import Folder from "@/page/main/ability-register/step2/folder.vue";
import File from "@/page/main/ability-register/step2/file/index.vue";
import axios from "@/request/http.js";
export default {
name: "BaseInfo",
components: { Folder, File },
props: {
id: {
type: String,
required: true,
},
// 是否为mock服务详情
mockDetail: {
type: Boolean,
default: false
}
},
setup(props) {
const state = reactive({
type: "",
data: [],
types: [
{
name: "真实能力",
value: "",
},
{
name: "mock能力",
value: "configMock",
},
],
fileOpenState: {},
nodeDetail: null,
testStateTexts: [
"未测试",
"测试成功",
"测试失败",
"其中有服务未测试",
"其中有服务测试未通过",
],
testStateIcons: [
"#bg-ic-s-circle-warning",
"#bg-ic-s-circle-check",
"#bg-ic-s-circle-close",
"#bg-ic-s-circle-question",
"#bg-ic-s-circle-question",
],
include_mock_service: false, // 真实能力中是否配置mock服务
});
const getTreeData = () => {
state.data = [];
state.nodeDetail = null;
axios
.get(`/apaas/service/v5/ability/info`, {
params: {
id: props.id,
queryType: props.mockDetail ? "" : state.type,
},
})
.then(({ data }) => {
if (data.code == 200) {
state.data = data.data.folder;
state.include_mock_service = data.data.ability_info.include_mock_service || false
console.log(state.include_mock_service)
}
});
};
const handleNodeClick = (data) => {
state.nodeDetail = null;
if (data.children) {
let flag = state.fileOpenState[data.code] !== false;
state.fileOpenState[data.code] = !flag;
}
if (data.node_type === 0) {
setTimeout(() => {
state.nodeDetail = { ...data, children: undefined };
}, 50);
} else {
axios
.get(`/apaas/service/v5/service/detail?treeCode=${data.code}`)
.then(({ data }) => {
if (data.code == 200) {
state.nodeDetail = data.data;
}
});
}
};
watch(
() => state.type,
() => {
getTreeData();
}
);
onBeforeMount(() => {
// 如果是mock能力详情，给type赋值后会触发watch然后去获取树形 所以不需要初始化时请求该接口
if (props.mockDetail) {
state.type = "configMock"
}else {
getTreeData();
}
});
return {
...toRefs(state),
handleNodeClick,
};
},
};
</script>
<style lang="scss" scoped>
.folder-info {
display: flex;
justify-content: flex-start;
align-items: stretch;
overflow: hidden;
> .left-part {
flex: 0 0 281px;
padding: 24px 0;
border-right: 1px solid #ebedf2;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
> .bg-btns {
margin: 0 auto;
}
> .el-tree {
width: 100%;
margin-top: 16px;
:deep() {
.el-icon.el-tree-node__expand-icon {
display: none;
}
}
}
}
> .padding-reset {
padding: 8px 0 24px;
}
> .right-part {
// flex: 1 1 calc(100% - 281px);
flex: 1;
// padding: 16px;
box-sizing: border-box;
.folder-detail {
width: 100%;
margin: 0;
display: flex;
:deep() {
.left-span {
width: 80px;
padding-top: 68px !important;
}
.right-container {
padding: 12px 0;
// float: none;
// width: 100%;
// .tips {
// display: none;
// }
}
}
}
}
}
.custom-tree-node {
padding: 0 16px;
> .bg-icon {
font-size: 12px;
margin-right: 8px;
&.state-0 {
color: #dd6955;
}
&.state-1 {
color: #48ad97;
}
&.state-2 {
color: #dd6955;
}
&.state-3 {
color: #dd6955;
}
&.state-4 {
color: #dd6955;
}
}
}
</style>
\ No newline at end of file
src/components/api-type/grpc.vue deleted 100644 → 0
View file @ 2436494d
<!-- grpc -->
<template>
<!-- 去掉操作 -->
<div>
<div class="baseInfo_box">
<div class="baseInfo">
<bg-info :data="apiBaseInfo" />
</div>
<div class="apaas_button test_btn">
<el-button type="primary" @click="serviceTest">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
服务测试
</el-button>
</div>
</div>
<div class="req_box">
<p class="input-title">
<span class="before_title"></span>
接口文档介绍
<span class="after_icon" @click="res_body_open=!res_body_open">
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="res_body_open"></bg-icon>
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
</span>
</p>
<div v-if="res_body_open">
<div v-html="detail_data.doc_desc" class="doc_desc"></div>
</div>
</div>
<!-- 测试结果弹窗 -->
<el-dialog
class="dialog_box result_box"
title="提示"
v-model="showDialog"
width="400px"
:before-close="
() => {
dialogClose()
}"
>
<div class="dialog_info">
<bg-icon v-if="dialogInfo.state" style="font-size: 26px; color: #429e8a; margin-right: 10px" icon="#bg-ic-circle-check"></bg-icon>
<bg-icon v-else style="font-size: 26px; color: #d75138; margin-right: 10px" icon="#bg-ic-circle-close"></bg-icon>
<span>{{dialogInfo.msg}}</span>
</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button @click="dialogClose">取 消</el-button>
<el-button type="primary" @click="dialogClose">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const props = defineProps({
data: {
type: Object,
default: null
}
})
const emit = defineEmits(["dialogClose"])
const router = useRouter()
const route = useRoute()
const state = reactive({data1:1})
const {data1} = toRefs(state)
const detailData = reactive({
apiBaseInfo: [
{
name: "能力名称",
value: "",
nameWidth: 112
},
{
name: "调用地址",
value: "",
nameWidth: 112
},
{
name: "是否TLS协议",
value: "",
full: true,
nameWidth: 112
},
], // 基本信息
detail_data: {},
res_body_open: true,
showDialog: false,
dialogInfo: {
msg: "该服务地址正常",
state: true
},
})
const detail = props.data
detailData.detail_data = props.data
if (detail) {
detailData.apiBaseInfo[0].value = detail.service_name
detailData.apiBaseInfo[1].value = detail.req_url
detailData.apiBaseInfo[2].value = ['否','是'][detail.tls_protocol]
}
const serviceTest = () => {
let params = {
interface_type: 2,
url: detail.req_url,
id: detail.id.toString()
}
$axios
.post(`/apaas/service/v5/service/test`,params)
.then((res) => {
if (res.data.code !== 200) {
$message.error(res.data.data)
} else {
detailData.showDialog = true
if (res.data.data.response_code == 200) {
detailData.dialogInfo = {
msg: "该服务地址正常",
state: true
}
}else {
detailData.dialogInfo = {
msg: "该服务地址异常",
state: false
}
}
}
})
}
const dialogClose = () => {
detailData.showDialog = false
emit("refresh",detail.ability_tree_code)
}
const {
apiBaseInfo,
detail_data,
res_body_open,
showDialog,
dialogInfo,
} = toRefs(detailData)
</script>
<style lang="scss" scoped>
.baseInfo_box {
width: 100%;
display: flex;
justify-content: space-between;
.baseInfo {
width: 872px;
}
}
.req_box {
width: 872px;
margin-top: 30px;
.input-title {
font-size: 16px;
color: #202531;
margin-top: 9px;
margin-bottom: 15px;
font-weight: 700;
line-height: 1;
.before_title {
display: inline-block;
width: 4px;
height: 14px;
background-color: #2b4695;
margin-right: 8px;
border-radius: 2px;
}
.after_icon {
float: right;
cursor: pointer;
}
}
.doc_desc {
width: 100%;
height: 406px;
padding: 16px 24px;
background-color: #fafafa;
border-radius: 4px;
color: #202531;
font-size: 14px;
}
}
.dialog_info {
padding: 27px 0 11px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
\ No newline at end of file
src/components/api-type/mobile-sdk.vue deleted 100644 → 0
View file @ 2436494d
<!-- mobileSDK -->
<template>
<div>
<div class="baseInfo_box">
<div class="baseInfo">
<bg-info :data="apiBaseInfo" />
</div>
</div>
<div class="req_box">
<p class="input-title">
<span class="before_title"></span>
接口文档介绍
<span class="after_icon" @click="res_body_open=!res_body_open">
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="res_body_open"></bg-icon>
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
</span>
</p>
<div v-if="res_body_open">
<div v-html="detail_data.doc_desc" class="doc_desc"></div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const props = defineProps({
data: {
type: Object,
default: null
}
})
const router = useRouter()
const route = useRoute()
const detailData = reactive({
apiBaseInfo: [
{
name: "能力名称",
value: "",
full: true,
nameWidth: 104
},
{
name: "支持类型",
value: "",
nameWidth: 104,
},
{
name: "支持系统",
value: "",
nameWidth: 104,
},
{
name: "SDK包",
value: "",
nameWidth: 104,
download: true,
url: ""
},
{
name: "SDK版本号",
value: "",
nameWidth: 104,
},
{
name: "承诺书",
value: "",
full: true,
nameWidth: 104,
download: true,
url: ""
},
], // 基本信息
detail_data: {},
res_body_open: true,
})
const detail = props.data
detailData.detail_data = props.data
if (detail) {
let sdkFile = detail.msdk_file ? JSON.parse(detail.msdk_file) : []
let commitment = detail.commitment ? JSON.parse(detail.commitment) : []
detailData.apiBaseInfo[0].value = detail.service_name
detailData.apiBaseInfo[1].value = ['','Android','IOS','其它'][detail.msdk_type]
detailData.apiBaseInfo[2].value = detail.msdk_system
detailData.apiBaseInfo[3].value = sdkFile[0].name
detailData.apiBaseInfo[3].url = sdkFile[0].url
detailData.apiBaseInfo[4].value = detail.sdk_version
detailData.apiBaseInfo[5].value = commitment[0].name
detailData.apiBaseInfo[5].url = commitment[0].url
}
const {
apiBaseInfo,
detail_data,
res_body_open,
} = toRefs(detailData)
</script>
<style lang="scss" scoped>
.baseInfo_box {
width: 100%;
display: flex;
justify-content: space-between;
.baseInfo {
width: 872px;
}
}
.req_box {
width: 872px;
margin-top: 30px;
.input-title {
font-size: 16px;
color: #202531;
margin-top: 9px;
margin-bottom: 15px;
font-weight: 700;
line-height: 1;
.before_title {
display: inline-block;
width: 4px;
height: 14px;
background-color: #2b4695;
margin-right: 8px;
border-radius: 2px;
}
.after_icon {
float: right;
cursor: pointer;
}
}
.doc_desc {
width: 100%;
height: 406px;
padding: 16px 24px;
background-color: #fafafa;
border-radius: 4px;
color: #202531;
font-size: 14px;
}
}
.dialog_info {
padding: 27px 0 17px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
\ No newline at end of file
src/components/api-type/mq.vue deleted 100644 → 0
View file @ 2436494d
<!-- MQ -->
<template>
<div>
<div class="baseInfo_box">
<div class="baseInfo">
<bg-info :data="apiBaseInfo" />
</div>
<div class="apaas_button test_btn">
<el-button type="primary" @click="serviceTest">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
服务测试
</el-button>
</div>
</div>
<div class="req_box">
<p class="input-title">
<span class="before_title"></span>
Topic
<span class="after_icon" @click="topic_open=!topic_open">
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="topic_open"></bg-icon>
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
</span>
</p>
<div v-if="topic_open">
<div class="topic_box" v-if="topicInfo && topicInfo.length > 0">
<div class="left">
<div class="items">
<div
v-for="(item,idx) in topicInfo"
:key="idx"
class="topic_item"
:class="currentTopic.id == item.id ? 'current' : ''"
@click="changeCurrentTopic(item)"
>
<el-tooltip
effect="dark"
:content="iconTipInfo[item.test_state]"
placement="top"
>
<bg-icon
class="tree-icon"
:class="classArr[item.test_state]"
:icon="iconArr[item.test_state]"
></bg-icon>
</el-tooltip>
{{item.name}}
</div>
</div>
</div>
<div class="right">
{{currentTopic.desc}}
</div>
</div>
<div class="no_data" v-else>
<img src="../../assets/imgs/img-no-data.png" alt="">
<div class="text">无参数</div>
</div>
</div>
<p class="input-title mt">
<span class="before_title"></span>
接口文档介绍
<span class="after_icon" @click="res_body_open=!res_body_open">
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="res_body_open"></bg-icon>
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
</span>
</p>
<div v-if="res_body_open">
<div v-html="detail_data.doc_desc" class="doc_desc"></div>
</div>
</div>
<!-- 测试结果弹窗 -->
<el-dialog
class="dialog_box result_box"
title="提示"
v-model="showDialog"
width="400px"
:before-close="
() => {
dialogClose()
}
"
>
<div class="dialog_info">
<bg-icon v-if="dialogInfo.state" style="font-size: 26px; color: #429e8a; margin-right: 10px" icon="#bg-ic-circle-check"></bg-icon>
<bg-icon v-else style="font-size: 26px; color: #d75138; margin-right: 10px" icon="#bg-ic-circle-close"></bg-icon>
<span>{{dialogInfo.msg}}</span>
</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button @click="dialogClose">取 消</el-button>
<el-button type="primary" @click="dialogClose">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const props = defineProps({
data: {
type: Object,
default: null
}
})
const emit = defineEmits(["dialogClose"])
const router = useRouter()
const route = useRoute()
const detailData = reactive({
apiBaseInfo: [
{
name: "能力名称",
value: "",
nameWidth: 104
},
{
name: "调用地址",
value: "",
nameWidth: 104
},
{
name: "平台协议",
value: "",
nameWidth: 104
},
{
name: "平台版本号",
value: "",
nameWidth: 104,
},
{
name: "用户名",
value: "",
nameWidth: 104
},
{
name: "密码",
value: "",
nameWidth: 104,
password: true,
realValue: "",
},
], // 基本信息
topicInfo: [],
detail_data: {},
res_body_open: true,
showDialog: false,
dialogInfo: {
msg: "该服务地址正常",
state: true
},
topic_open: true,
currentTopic: {},
classArr: [
"question",
"success",
"close",
],
iconArr: [
"#bg-ic-s-circle-question",
"#bg-ic-s-circle-check",
"#bg-ic-s-circle-close"
],
iconTipInfo: [
"该主题还未进行测试",
"该主题测试通过",
"该主题测试不通过"
],
})
const detail = props.data
detailData.detail_data = props.data
if (detail) {
detailData.apiBaseInfo[0].value = detail.service_name
detailData.apiBaseInfo[1].value = detail.req_url
detailData.apiBaseInfo[2].value = ["","kafka","rocketMQ","rabbitMQ"][detail.mq_protocol]
detailData.apiBaseInfo[3].value = detail.mq_version
detailData.apiBaseInfo[4].value = detail.mq_user_name
detailData.apiBaseInfo[5].value = "***************"
detailData.apiBaseInfo[5].realValue = detail.mq_password
detailData.topicInfo = detail.mq_topic || []
detailData.currentTopic = detailData.topicInfo[0] || {}
}
const changeCurrentTopic = (item) => {
detailData.currentTopic = item
}
const serviceTest = () => {
let params = {
interface_type: 4,
url: detail.req_url,
mq_protocol: detail.mq_protocol,
mq_exchange: detailData.currentTopic.name,
mq_password: detail.mq_password,
mq_user: detail.mq_user,
mq_id: detailData.currentTopic.id,
id: detail.id.toString()
}
$axios
.post(`/apaas/service/v5/service/test`,params)
.then((res) => {
if (res.data.code !== 200) {
$message.error(res.data.data)
} else {
detailData.showDialog = true
if (res.data.data.response_code == 200) {
detailData.dialogInfo = {
msg: "该服务地址正常",
state: true
}
}else {
detailData.dialogInfo = {
msg: "该服务地址异常",
state: false
}
}
}
})
}
const dialogClose = () => {
detailData.showDialog = false
emit("refresh",detail.ability_tree_code)
}
const {
apiBaseInfo,
detail_data,
res_body_open,
showDialog,
dialogInfo,
topicInfo,
topic_open,
currentTopic,
classArr,
iconArr,
iconTipInfo,
} = toRefs(detailData)
</script>
<style lang="scss" scoped>
.baseInfo_box {
width: 100%;
display: flex;
justify-content: space-between;
.baseInfo {
width: 872px;
}
}
.req_box {
width: 872px;
margin-top: 30px;
.input-title {
font-size: 16px;
color: #202531;
margin-top: 9px;
margin-bottom: 15px;
font-weight: 700;
line-height: 1;
.before_title {
display: inline-block;
width: 4px;
height: 14px;
background-color: #2b4695;
margin-right: 8px;
border-radius: 2px;
}
.after_icon {
float: right;
cursor: pointer;
}
}
.mt {
margin-top: 24px;
}
.no_data {
text-align: center;
.text {
font-size: 16px;
color: #616f94;
line-height: 1;
}
}
.doc_desc {
width: 100%;
height: 406px;
padding: 16px 24px;
background-color: #fafafa;
border-radius: 4px;
color: #202531;
font-size: 14px;
}
.topic_box {
display: flex;
.left {
width: 200px;
margin-right: 16px;
font-size: 14px;
color: #202531;
.items {
border: 1px solid #dadee7;
padding: 4px 0;
.topic_item {
height: 34px;
line-height: 34px;
padding: 0 8px;
cursor: pointer;
display: flex;
align-items: center;
.tree-icon {
font-size: 12px;
color: #909bb6;
margin-right: 6px;
}
.success {
color: #48ad97;
}
.close {
color: #dd6955;
}
}
.current {
background-color: #eff2fa;
color: #3759be;
}
}
}
.right {
flex: 1;
height: 332px;
background-color: #fafafa;
border-radius: 4px;
padding: 15px 24px;
}
}
}
.dialog_info {
padding: 27px 0 11px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
\ No newline at end of file
src/components/api-type/rest.vue deleted 100644 → 0
View file @ 2436494d
<template>
<!-- 去掉操作 -->
<div>
<div class="baseInfo_box">
<div class="baseInfo">
<bg-info :data="apiBaseInfo" />
</div>
<div class="apaas_button test_btn">
<el-button type="primary" @click="serviceTest">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
服务测试
</el-button>
</div>
</div>
<div class="req_box">
<el-tabs v-model="activeName">
<el-tab-pane label="URL参数" name="first">
<p class="input-title">
<span class="before_title"></span>
参数查询
<span class="after_icon" @click="cs_open=!cs_open">
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="cs_open"></bg-icon>
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
</span>
</p>
<div v-if="cs_open">
<bg-table-pro
class="input_table"
:headers="headers"
:data="norData"
ref="cs-table"
:border="true"
:stripe="false"
v-if="norData && norData.length > 0"
>
<template v-slot:value="{ row }">
<el-input
v-model="row.value"
/>
</template>
</bg-table-pro>
<div class="no_data" v-else>
<img src="../../assets/imgs/img-no-data.png" alt="">
<div class="text">无参数</div>
</div>
</div>
<p class="input-title mt">
<span class="before_title"></span>
动态参数
<span class="after_icon" @click="dt_open=!dt_open">
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="dt_open"></bg-icon>
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
</span>
</p>
<div v-if="dt_open">
<bg-table-pro
class="input_table"
:headers="headers"
:data="actData"
ref="dt-table"
:border="true"
:stripe="false"
v-if="actData && actData.length > 0"
>
<template v-slot:value="{ row }">
<el-input
v-model="row.value"
/>
</template>
</bg-table-pro>
<div class="no_data" v-else>
<img src="../../assets/imgs/img-no-data.png" alt="">
<div class="text">无参数</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="Header" name="second">
<p class="input-title">
<span class="before_title"></span>
Header
<span class="after_icon" @click="header_open=!header_open">
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="header_open"></bg-icon>
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
</span>
</p>
<div v-if="header_open">
<bg-table-pro
:headers="headers"
:data="headerData"
ref="header-table"
:border="true"
:stripe="false"
v-if="headerData && headerData.length > 0"
>
<template v-slot:value="{ row }">
<el-input
v-model="row.value"
/>
</template>
</bg-table-pro>
<div class="no_data" v-else>
<img src="../../assets/imgs/img-no-data.png" alt="">
<div class="text">无参数</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="body" name="third">
<p class="input-title">
<span class="before_title"></span>
Body
<span class="after_icon" @click="body_open=!body_open">
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="body_open"></bg-icon>
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
</span>
</p>
<div v-if="body_open">
<!-- raw -->
<div v-if="bodyData && bodyData.show_type === 0 && bodyData.data && bodyData.data.length > 0" class="body_code" :style="{'height':bodyData.data_type === 1 || bodyData.data_type === 2 ? '406px' : '240px'}">
<!-- json或xml展示代码块 -->
<bg-code-editor
class="bg-ace-editor"
v-model="bodyData.data"
v-if="bodyData.data_type === 1 || bodyData.data_type === 2"
></bg-code-editor>
<!-- text或html或JavaScript展示多行文本框 -->
<el-input
v-model="bodyData.data"
:rows="10"
type="textarea"
v-else
/>
</div>
<!-- formdata和x-www-form-urlencoded 表格 -->
<bg-table-pro
:headers="headers"
:data="bodyData.data"
ref="body-table"
:border="true"
:stripe="false"
v-else-if="bodyData && (bodyData.show_type === 1 || bodyData.show_type === 2) && bodyData.data && bodyData.data.length > 0"
>
<template v-slot:value="{ row }">
<el-input
v-model="row.value"
/>
</template>
</bg-table-pro>
<div class="no_data" v-else>
<img src="../../assets/imgs/img-no-data.png" alt="">
<div class="text">无参数</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="授权" name="fourth">
<folder :data="detail_data" useType="service" :disabled="true"></folder>
</el-tab-pane>
</el-tabs>
</div>
<div class="req_box res_box" v-if="test_state">
<el-tabs v-model="activeName1">
<el-tab-pane label="body" name="first">
<div class="body_code">
<bg-code-editor
class="bg-ace-editor bg-ace-editor-disabled"
v-model="backJSONdata"
disabled
></bg-code-editor>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script setup>
import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import folder from "@/page/main/ability-register/step2/folder.vue"
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const props = defineProps({
data: {
type: Object,
default: null
}
})
const emit = defineEmits(["serviceTest"])
const router = useRouter()
const route = useRoute()
const detailData = reactive({
cs_open: true,
dt_open: true,
header_open: true,
body_open: true,
res_body_open: true,
activeName: "first",
apiBaseInfo: [
{
name: "接口名称",
value: "",
nameWidth: 104
},
{
name: "调用地址",
value: "",
nameWidth: 104
},
{
name: "请求方式",
value: "",
nameWidth: 104
},
{
name: "返回格式",
value: "",
nameWidth: 104
},
], // 基本信息
headers: [
{
label: "键",
prop: "name",
},
{
label: "值",
prop: "value",
},
{
label: "描述",
prop: "desc",
},
], // 表头
rawHeaders: [
{
label: "参数名称",
prop: "paramName",
},
{
label: "参数类型",
prop: "paramType",
},
{
label: "示例",
prop: "paramValue",
},
{
label: "说明",
prop: "desc",
},
],
bodyData: {
show_type: "",
data_type: "",
data: []
},
norData: [],
actData: [],
headerData: [],
backJSONdata: "hahahaah",
treeProps: { hasChildren: 'hasChildren', children: 'children' },
rowKey: "id",
detail_data: {},
test_state: false,
activeName1: "first"
})
const detail = props.data
detailData.detail_data = props.data
let serviceInfo = detail.service_info
//json对象转xml字符串
var json2xml=(o, tab)=> {
var toXml = function(v, name, ind) {
var xml = "";
if (v instanceof Array) {
for (var i=0, n=v.length; i<n; i++)
xml += ind + toXml(v[i], name, ind+"\t") + "\n";
}
else if (typeof(v) == "object") {
var hasChild = false;
xml += ind + "<" + name;
for (var m in v) {
if (m.charAt(0) == "@")
xml += " " + m.substr(1) + "=\"" + v[m].toString() + "\"";
else
hasChild = true;
}
xml += hasChild ? ">" : "/>";
if (hasChild) {
for (var m in v) {
if (m == "#text")
xml += v[m];
else if (m == "#cdata")
xml += "<![CDATA[" + v[m] + "]]>";
else if (m.charAt(0) != "@")
xml += toXml(v[m], m, ind+"\t");
}
xml += (xml.charAt(xml.length-1)=="\n"?ind:"") + "</" + name + ">";
}
}
else {
xml += ind + "<" + name + ">" + v.toString() + "</" + name + ">";
}
return xml;
}, xml="";
for (var m in o)
xml += toXml(o[m], m, "");
return tab ? xml.replace(/\t/g, tab) : xml.replace(/\t|\n/g, "");
}
if (detail) {
detailData.apiBaseInfo[0].value = detail.service_name
detailData.apiBaseInfo[1].value = detail.req_url
detailData.apiBaseInfo[2].value = ['','GET','POST','PUT','DELETE'][detail.req_type]
detailData.apiBaseInfo[3].value = ['','JSON','XML','Text','HTML','图片','文件','自动'][detail.res_fields.res_type]
detailData.norData = detail.req_query.query_data || []
detailData.actData = detail.req_query.param_data || []
detailData.headerData = detail.req_headers
detailData.bodyData = detail.req_body
let tableRows = detailData.bodyData && detailData.bodyData.data ? detailData.bodyData.data : []
let tableStr = JSON.stringify(tableRows)
if (detailData.bodyData && detailData.bodyData.show_type == 0 && detailData.bodyData.data_type == 1) {
detailData.bodyData.data = tableStr
}else if (detailData.bodyData && detailData.bodyData.show_type == 0 && detailData.bodyData.data_type == 2) {
detailData.bodyData.data = json2xml(JSON.parse(tableStr))
}
}
const serviceTest = () => {
let header = null
if (detail.headers && detail.headers.length > 0) {
detail.req_headers.forEach((e,i) => {
header[e.name] = [e.value]
})
}
let body = ""
if (detailData.bodyData.show_type == 0 && detailData.bodyData.data_type == 1 || detailData.bodyData.show_type == 1 || detailData.bodyData.show_type == 2) {
body = detailData.bodyData.data && detailData.bodyData.data.length > 0 ? JSON.stringify(detailData.bodyData.data) : ""
}else {
body = detailData.bodyData.data && detailData.bodyData.data.length > 0? detailData.bodyData.data : ""
}
let show_type = detailData.bodyData.show_type
let data_type = detailData.bodyData.data_type
let content_type = ""
if (show_type == 0) {
switch (data_type) {
case 1:
content_type = "application/json";
break;
case 2:
content_type = "application/xml";
break;
case 3:
content_type = "application/javascript";
break;
case 4:
content_type = "text/plain";
break;
case 5:
content_type = "text/html";
break;
}
}
let authData = {
req_auth_method: null,
req_auth_token: "",
req_auth_token_name: "",
}
let code = detail.ability_tree_code
if (detail.req_auth_method != 0) {
authData.req_auth_method = detail.req_auth_method
authData.req_auth_token= detail.req_auth_token
authData.req_auth_token_name= detail.req_auth_key
}else {
for (let index = 0; index > -1; index++) {
if(serviceInfo[code].req_auth_method==0){
code = serviceInfo[code].p_code
}else{
authData.req_auth_method = serviceInfo[code].req_auth_method
authData.req_auth_token= serviceInfo[code].req_auth_token
authData.req_auth_token_name= serviceInfo[code].req_auth_key
break
}
}
}
let params = {
interface_type: 1,
method: detail.req_type,
url: detail.req_url,
req_auth_method: authData.req_auth_method,
req_auth_token: authData.req_auth_token,
req_auth_token_name: authData.req_auth_token_name,
headers: header,
body: body,
content_type: content_type,
id: detail.id.toString(),
params: {
query_data: detailData.norData,
param_data: detailData.actData,
}
}
$axios
.post(`/apaas/service/v5/service/test`,params)
.then((res) => {
if (res.data.code !== 200) {
$message.error(res.data.data)
} else {
detailData.test_state = true
detailData.backJSONdata = res.data.data.response_str
emit("refresh",detail.ability_tree_code)
}
})
}
const {
cs_open,
dt_open,
header_open,
body_open,
res_body_open,
headers,
apiBaseInfo,
activeName,
activeName1,
norData,
actData,
headerData,
JSONdata,
XMLdata,
JSdata,
Textdata,
HTMLdata,
backJSONdata,
rawHeaders,
bodyData,
treeProps,
rowKey,
detail_data,
test_state,
} = toRefs(detailData)
</script>
<style lang="scss" scoped>
.baseInfo_box {
width: 100%;
display: flex;
justify-content: space-between;
.baseInfo {
width: 872px;
}
}
.req_box {
width: 872px;
margin-top: 30px;
.input-title {
font-size: 16px;
color: #202531;
margin-top: 9px;
margin-bottom: 15px;
font-weight: 700;
line-height: 1;
.before_title {
display: inline-block;
width: 4px;
height: 14px;
background-color: #2b4695;
margin-right: 8px;
border-radius: 2px;
}
.after_icon {
float: right;
cursor: pointer;
}
}
.mt {
margin-top: 24px;
}
.input_table {
:deep().el-table__cell {
padding: 14px 0!important;
.el-input__inner {
height: 33px;
}
}
}
.text_box {
padding: 16px 24px;
background-color: #fafafa;
border-radius: 4px;
height: 406px;
}
.body_code {
width: 100%;
height: 406px;
.bg-ace-editor {
background-color: #1a1a1a;
}
.bg-ace-editor-disabled {
background-color: #fff;
:deep().ace_marker-layer .ace_active-line {
background-color: #fff;
}
}
}
.no_data {
text-align: center;
.text {
font-size: 16px;
color: #616f94;
line-height: 1;
}
}
.folder-container {
width: 100%;
margin-left: 0;
margin-top: 9px;
:deep().left-span {
padding: 0;
}
:deep().right-container {
width: calc(100% - 100px);
}
}
}
</style>
<style scoped>
</style>
src/components/api-type/socket.vue deleted 100644 → 0
View file @ 2436494d
<!-- socket -->
<template>
<div>
<div class="baseInfo_box">
<div class="baseInfo">
<bg-info :data="apiBaseInfo" />
</div>
<div class="apaas_button test_btn">
<el-button type="primary" @click="serviceTest">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
服务测试
</el-button>
</div>
</div>
<div class="req_box">
<p class="input-title">
<span class="before_title"></span>
接口文档介绍
<span class="after_icon" @click="res_body_open=!res_body_open">
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="res_body_open"></bg-icon>
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
</span>
</p>
<div v-if="res_body_open">
<div v-html="detail_data.doc_desc" class="doc_desc"></div>
</div>
</div>
<!-- 测试结果弹窗 -->
<el-dialog
class="dialog_box result_box"
title="提示"
v-model="showDialog"
width="400px"
:before-close="
() => {
dialogClose()
}"
>
<div class="dialog_info">
<bg-icon v-if="dialogInfo.state" style="font-size: 26px; color: #429e8a; margin-right: 10px" icon="#bg-ic-circle-check"></bg-icon>
<bg-icon v-else style="font-size: 26px; color: #d75138; margin-right: 10px" icon="#bg-ic-circle-close"></bg-icon>
<span>{{dialogInfo.msg}}</span>
</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button @click="dialogClose">取 消</el-button>
<el-button type="primary" @click="dialogClose">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const props = defineProps({
data: {
type: Object,
default: null
}
})
const emit = defineEmits(["dialogClose"])
const router = useRouter()
const route = useRoute()
const state = reactive({data1:1})
const {data1} = toRefs(state)
const detailData = reactive({
apiBaseInfo: [
{
name: "能力名称",
value: "",
nameWidth: 104
},
{
name: "调用地址",
value: "",
nameWidth: 104
},
], // 基本信息
detail_data: {},
res_body_open: true,
showDialog: false,
dialogInfo: {
msg: "该服务地址正常",
state: true
},
})
const detail = props.data
detailData.detail_data = props.data
if (detail) {
detailData.apiBaseInfo[0].value = detail.service_name
detailData.apiBaseInfo[1].value = detail.req_url
}
const serviceTest = () => {
let params = {
interface_type: 2,
url: detail.req_url,
id: detail.id.toString()
}
$axios
.post(`/apaas/service/v5/service/test`,params)
.then((res) => {
if (res.data.code !== 200) {
$message.error(res.data.data)
} else {
detailData.showDialog = true
if (res.data.data.response_code == 200) {
detailData.dialogInfo = {
msg: "该服务地址正常",
state: true
}
}else {
detailData.dialogInfo = {
msg: "该服务地址异常",
state: false
}
}
}
})
}
const dialogClose = () => {
detailData.showDialog = false
emit("refresh",detail.ability_tree_code)
}
const {
apiBaseInfo,
detail_data,
res_body_open,
showDialog,
dialogInfo,
} = toRefs(detailData)
</script>
<style lang="scss" scoped>
.baseInfo_box {
width: 100%;
display: flex;
justify-content: space-between;
.baseInfo {
width: 872px;
}
}
.req_box {
width: 872px;
margin-top: 30px;
.input-title {
font-size: 16px;
color: #202531;
margin-top: 9px;
margin-bottom: 15px;
font-weight: 700;
line-height: 1;
.before_title {
display: inline-block;
width: 4px;
height: 14px;
background-color: #2b4695;
margin-right: 8px;
border-radius: 2px;
}
.after_icon {
float: right;
cursor: pointer;
}
}
.doc_desc {
width: 100%;
height: 406px;
padding: 16px 24px;
background-color: #fafafa;
border-radius: 4px;
color: #202531;
font-size: 14px;
}
}
.dialog_info {
padding: 27px 0 11px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
\ No newline at end of file
src/components/api-type/ui.vue deleted 100644 → 0
View file @ 2436494d
<!-- MQ -->
<template>
<div>
<div class="baseInfo_box">
<div class="baseInfo">
<bg-info :data="apiBaseInfo" />
</div>
<div class="apaas_button test_btn">
<el-button type="primary" class="refresh_btn" @click="refresh" v-if="showRefreshBtn">
<bg-icon style="font-size: 10px; color: #fff; margin-right: 10px" icon="#bg-ic-refresh"></bg-icon>
刷新
</el-button>
<el-button type="primary" @click="serviceTest">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
服务测试
</el-button>
</div>
</div>
<div class="req_box">
<p class="input-title">
<span class="before_title"></span>
主题
<span class="after_icon" @click="topic_open=!topic_open">
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="topic_open"></bg-icon>
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
</span>
</p>
<div v-if="topic_open">
<div class="topic_box" v-if="uiInfo && uiInfo.length > 0">
<div class="left">
<div class="items">
<div
v-for="(item,idx) in uiInfo"
:key="idx"
class="topic_item"
:class="currentUi.id == item.id ? 'current' : ''"
@click="changeCurrentTopic(item)"
>
<el-tooltip
effect="dark"
:content="iconTipInfo[item.test_state]"
placement="top"
>
<bg-icon
class="tree-icon"
:class="classArr[item.test_state]"
:icon="iconArr[item.test_state]"
></bg-icon>
</el-tooltip>
{{item.theme}}
</div>
</div>
</div>
<div class="right">
<img :src="currentUi.image[0].url" alt="">
</div>
</div>
<div class="no_data" v-else>
<img src="../../assets/imgs/img-no-data.png" alt="">
<div class="text">无参数</div>
</div>
</div>
<p class="input-title mt">
<span class="before_title"></span>
接口文档介绍
<span class="after_icon" @click="res_body_open=!res_body_open">
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="res_body_open"></bg-icon>
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
</span>
</p>
<div v-if="res_body_open">
<div v-html="detail_data.doc_desc" class="doc_desc"></div>
</div>
</div>
<!-- 测试结果弹窗 -->
<el-dialog
class="dialog_box result_box"
title="提示"
v-model="showDialog"
width="400px"
:before-close="
() => {
showDialog = false;
}
"
>
<div class="dialog_info">
<bg-icon v-if="dialogInfo.state" style="font-size: 26px; color: #429e8a; margin-right: 10px" icon="#bg-ic-circle-check"></bg-icon>
<bg-icon v-else style="font-size: 26px; color: #d75138; margin-right: 10px" icon="#bg-ic-circle-close"></bg-icon>
<span>{{dialogInfo.msg}}</span>
</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button @click="showDialog = false">取 消</el-button>
<el-button type="primary" @click="showDialog = false">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const props = defineProps({
data: {
type: Object,
default: null
}
})
const router = useRouter()
const route = useRoute()
const detailData = reactive({
apiBaseInfo: [
{
name: "能力名称",
value: "",
nameWidth: 104
},
{
name: "调用地址",
value: "",
nameWidth: 104
},
], // 基本信息
uiInfo: [],
detail_data: {},
res_body_open: true,
showDialog: false,
dialogInfo: {
msg: "该服务地址正常",
state: true
},
topic_open: true,
currentUi: {},
classArr: [
"question",
"success",
"close",
],
iconArr: [
"#bg-ic-s-circle-question",
"#bg-ic-s-circle-check",
"#bg-ic-s-circle-close"
],
iconTipInfo: [
"该主题还未进行测试",
"该主题测试通过",
"该主题测试不通过"
],
showRefreshBtn: false
})
const emit = defineEmits(['refresh'])
const detail = props.data
detailData.detail_data = props.data
if (detail) {
detailData.apiBaseInfo[0].value = detail.service_name
detailData.apiBaseInfo[1].value = detail.req_url
detailData.uiInfo = detail.ui_theme || []
if (detailData.uiInfo.length > 0) {
detailData.uiInfo.forEach(e => {
e.image = JSON.parse(e.image)
})
}
detailData.currentUi = detailData.uiInfo[0] || {}
}
const changeCurrentTopic = (item) => {
detailData.currentUi = item
}
const serviceTest = () => {
let params = {
ui_id: detailData.currentUi.id,
id: detail.id.toString(),
url: detail.req_url,
parameters: detailData.currentUi.parameters
}
localStorage.setItem('params',JSON.stringify(params))
let routeData = router.resolve({
path: "/ui-example",
});
window.open(routeData.href, "_blank");
detailData.showRefreshBtn = true
}
const refresh = () => {
emit('refresh',detail.ability_tree_code)
}
const {
apiBaseInfo,
detail_data,
res_body_open,
showDialog,
dialogInfo,
uiInfo,
topic_open,
currentUi,
classArr,
iconArr,
iconTipInfo,
showRefreshBtn,
} = toRefs(detailData)
</script>
<style lang="scss" scoped>
.baseInfo_box {
width: 100%;
display: flex;
justify-content: space-between;
.baseInfo {
width: 872px;
}
.refresh_btn {
background-color: #404a62;
}
}
.req_box {
width: 872px;
margin-top: 30px;
.input-title {
font-size: 16px;
color: #202531;
margin-top: 9px;
margin-bottom: 15px;
font-weight: 700;
line-height: 1;
.before_title {
display: inline-block;
width: 4px;
height: 14px;
background-color: #2b4695;
margin-right: 8px;
border-radius: 2px;
}
.after_icon {
float: right;
cursor: pointer;
}
}
.mt {
margin-top: 24px;
}
.no_data {
text-align: center;
.text {
font-size: 16px;
color: #616f94;
line-height: 1;
}
}
.doc_desc {
width: 100%;
height: 406px;
padding: 16px 24px;
background-color: #fafafa;
border-radius: 4px;
color: #202531;
font-size: 14px;
}
.topic_box {
display: flex;
.left {
width: 200px;
margin-right: 16px;
font-size: 14px;
color: #202531;
.items {
border: 1px solid #dadee7;
padding: 4px 0;
.topic_item {
height: 34px;
line-height: 34px;
padding: 0 8px;
cursor: pointer;
display: flex;
align-items: center;
.tree-icon {
font-size: 12px;
color: #909bb6;
margin-right: 6px;
}
.success {
color: #48ad97;
}
.close {
color: #dd6955;
}
}
.current {
background-color: #eff2fa;
color: #3759be;
}
}
}
.right {
flex: 1;
height: 332px;
img {
width: 100%;
height: 100%;
}
}
}
}
.dialog_info {
padding: 27px 0 11px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
\ No newline at end of file
src/components/api-type/web-sdk.vue deleted 100644 → 0
View file @ 2436494d
<!-- webSDK -->
<template>
<div>
<div class="baseInfo_box">
<div class="baseInfo">
<bg-info :data="apiBaseInfo" />
</div>
<div class="apaas_button test_btn">
<el-button type="primary" @click="serviceTest">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
服务测试
</el-button>
</div>
</div>
<div class="req_box">
<p class="input-title">
<span class="before_title"></span>
使用示例
<span class="after_icon" @click="example_open=!example_open">
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="example_open"></bg-icon>
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
</span>
</p>
<div v-if="example_open">
<video id="video" style="width: 100%" controls autoplay>
<source :src="wsdk_use_doc" />
</video>
</div>
<p class="input-title">
<span class="before_title"></span>
接口文档介绍
<span class="after_icon" @click="res_body_open=!res_body_open">
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="res_body_open"></bg-icon>
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
</span>
</p>
<div v-if="res_body_open">
<div v-html="detail_data.doc_desc" class="doc_desc"></div>
</div>
</div>
<!-- 测试结果弹窗 -->
<el-dialog
class="dialog_box result_box"
title="提示"
v-model="showDialog"
width="400px"
:before-close="
() => {
dialogClose()
}
"
>
<div class="dialog_info">
<bg-icon v-if="dialogInfo.state" style="font-size: 26px; color: #429e8a; margin-right: 10px" icon="#bg-ic-circle-check"></bg-icon>
<bg-icon v-else style="font-size: 26px; color: #d75138; margin-right: 10px" icon="#bg-ic-circle-close"></bg-icon>
<span>{{dialogInfo.msg}}</span>
</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button @click="dialogClose">取 消</el-button>
<el-button type="primary" @click="dialogClose">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const props = defineProps({
data: {
type: Object,
default: null
}
})
const emit = defineEmits(["dialogClose"])
const router = useRouter()
const route = useRoute()
const detailData = reactive({
apiBaseInfo: [
{
name: "能力名称",
value: "",
nameWidth: 104
},
{
name: "版本号",
value: "",
nameWidth: 104
},
{
name: "调用地址",
value: "",
full: true,
nameWidth: 104
},
{
name: "安全密钥",
value: "",
nameWidth: 104,
full: true,
password: true,
realValue: "",
},
], // 基本信息
detail_data: {},
res_body_open: true,
showDialog: false,
dialogInfo: {
msg: "该服务地址正常",
state: true
},
example_open: true,
wsdk_use_doc: ""
})
const detail = props.data
detailData.detail_data = props.data
if (detail) {
detailData.apiBaseInfo[0].value = detail.service_name
detailData.apiBaseInfo[1].value = detail.sdk_version
detailData.apiBaseInfo[2].value = detail.req_url
detailData.apiBaseInfo[3].value = "***************"
detailData.apiBaseInfo[3].realValue = detail.wsdk_secret_key
detailData.wsdk_use_doc = detail.wsdk_use_doc
}
const serviceTest = () => {
let params = {
interface_type: 1,
method: 1,
url: detail.req_url,
id: detail.id.toString()
}
$axios
.post(`/apaas/service/v5/service/test`,params)
.then((res) => {
if (res.data.code !== 200) {
$message.error(res.data.data)
} else {
detailData.showDialog = true
if (res.data.data.response_code == 200) {
detailData.dialogInfo = {
msg: "该服务地址正常",
state: true
}
}else {
detailData.dialogInfo = {
msg: "该服务地址异常",
state: false
}
}
}
})
}
const dialogClose = () => {
detailData.showDialog = false
emit("refresh",detail.ability_tree_code)
}
const {
apiBaseInfo,
detail_data,
res_body_open,
showDialog,
dialogInfo,
example_open,
wsdk_use_doc,
} = toRefs(detailData)
</script>
<style lang="scss" scoped>
.baseInfo_box {
width: 100%;
display: flex;
justify-content: space-between;
.baseInfo {
width: 872px;
}
}
.req_box {
width: 872px;
margin-top: 30px;
.input-title {
font-size: 16px;
color: #202531;
margin-top: 9px;
margin-bottom: 15px;
font-weight: 700;
line-height: 1;
.before_title {
display: inline-block;
width: 4px;
height: 14px;
background-color: #2b4695;
margin-right: 8px;
border-radius: 2px;
}
.after_icon {
float: right;
cursor: pointer;
}
}
.doc_desc {
width: 100%;
height: 406px;
padding: 16px 24px;
background-color: #fafafa;
border-radius: 4px;
color: #202531;
font-size: 14px;
}
}
.dialog_info {
padding: 27px 0 11px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
\ No newline at end of file
src/components/api-type/websocket.vue deleted 100644 → 0
View file @ 2436494d
<!-- websocket -->
<template>
<div>
<div class="baseInfo_box">
<div class="baseInfo">
<bg-info :data="apiBaseInfo" />
</div>
<div class="apaas_button test_btn">
<el-button type="primary" @click="serviceTest">
<bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
服务测试
</el-button>
</div>
</div>
<div class="req_box">
<p class="input-title">
<span class="before_title"></span>
接口文档介绍
<span class="after_icon" @click="res_body_open=!res_body_open">
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="res_body_open"></bg-icon>
<bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
</span>
</p>
<div v-if="res_body_open">
<div v-html="detail_data.doc_desc" class="doc_desc"></div>
</div>
</div>
<!-- 测试结果弹窗 -->
<el-dialog
class="dialog_box result_box"
title="提示"
v-model="showDialog"
width="400px"
:before-close="
() => {
dialogClose()
}
"
>
<div class="dialog_info">
<bg-icon v-if="dialogInfo.state" style="font-size: 26px; color: #429e8a; margin-right: 10px" icon="#bg-ic-circle-check"></bg-icon>
<bg-icon v-else style="font-size: 26px; color: #d75138; margin-right: 10px" icon="#bg-ic-circle-close"></bg-icon>
<span>{{dialogInfo.msg}}</span>
</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button @click="dialogClose">取 消</el-button>
<el-button type="primary" @click="dialogClose">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const props = defineProps({
data: {
type: Object,
default: null
}
})
const emit = defineEmits(["dialogClose"])
const router = useRouter()
const route = useRoute()
const state = reactive({data1:1})
const {data1} = toRefs(state)
const detailData = reactive({
apiBaseInfo: [
{
name: "能力名称",
value: "",
nameWidth: 104
},
{
name: "调用地址",
value: "",
nameWidth: 104
},
{
name: "通信协议",
value: "",
full: true,
nameWidth: 104
},
], // 基本信息
detail_data: {},
res_body_open: true,
showDialog: false,
dialogInfo: {
msg: "该服务地址正常",
state: true
},
})
const detail = props.data
detailData.detail_data = props.data
if (detail) {
detailData.apiBaseInfo[0].value = detail.service_name
detailData.apiBaseInfo[1].value = detail.req_url
detailData.apiBaseInfo[2].value = ['','ws','wss'][detail.ws_protocol]
}
const serviceTest = () => {
let params = {
interface_type: 3,
url: detail.req_url,
id: detail.id.toString()
}
$axios
.post(`/apaas/service/v5/service/test`,params)
.then((res) => {
if (res.data.code !== 200) {
$message.error(res.data.data)
} else {
detailData.showDialog = true
if (res.data.data.response_code == 200) {
detailData.dialogInfo = {
msg: "该服务地址正常",
state: true
}
}else {
detailData.dialogInfo = {
msg: "该服务地址异常",
state: false
}
}
}
})
}
const dialogClose = () => {
detailData.showDialog = false
emit("refresh",detail.ability_tree_code)
}
const {
apiBaseInfo,
detail_data,
res_body_open,
showDialog,
dialogInfo,
} = toRefs(detailData)
</script>
<style lang="scss" scoped>
.baseInfo_box {
width: 100%;
display: flex;
justify-content: space-between;
.baseInfo {
width: 872px;
}
}
.req_box {
width: 872px;
margin-top: 30px;
.input-title {
font-size: 16px;
color: #202531;
margin-top: 9px;
margin-bottom: 15px;
font-weight: 700;
line-height: 1;
.before_title {
display: inline-block;
width: 4px;
height: 14px;
background-color: #2b4695;
margin-right: 8px;
border-radius: 2px;
}
.after_icon {
float: right;
cursor: pointer;
}
}
.doc_desc {
width: 100%;
height: 406px;
padding: 16px 24px;
background-color: #fafafa;
border-radius: 4px;
color: #202531;
font-size: 14px;
}
}
.dialog_info {
padding: 27px 0 11px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
\ No newline at end of file
src/components/general/block-radius.vue
View file @ fdd9d524
......@@ -44,77 +44,76 @@
<script>
<script setup>
import { reactive, toRefs, onBeforeMount } from 'vue'
export default {
props: {
show_header: {
type: Boolean,
default: false,
},
selectValue: {
type: [String,Number],
default: ""
},
selectArr: {
type: Array,
default: () => {
return [];
},
},
buttons_arr: {
type: Array,
default: () => {
return [];
},
},
bgIcon: {
type: String,
default: ""
},
title: {
type: String,
default: "",
},
background_color: {
type: String,
default: "#fff"
}, // header条背景色
showLeft: {
type: Boolean,
default: true
const props = defineProps({
show_header: {
type: Boolean,
default: false,
},
selectValue: {
type: [String,Number],
default: ""
},
selectArr: {
type: Array,
default: () => {
return [];
},
noPadding: {
type: Boolean,
default: false
},
buttons_arr: {
type: Array,
default: () => {
return [];
},
},
setup(props,{ emit }) {
const state = reactive({
currentSelectValue: null,
active_button: 0
})
const selectChange = (val) => {
state.currentSelectValue = val;
emit('selectChange', val);
}
const changeButton = (index) => {
if (state.active_button != index) {
state.active_button = index;
emit("changeButton", index);
}
}
onBeforeMount(() => {
state.currentSelectValue = props.selectValue
})
return {
...toRefs(state),
selectChange,
changeButton,
}
bgIcon: {
type: String,
default: ""
},
title: {
type: String,
default: "",
},
background_color: {
type: String,
default: "#fff"
}, // header条背景色
showLeft: {
type: Boolean,
default: true
},
noPadding: {
type: Boolean,
default: false
},
})
const emit = defineEmits(['selectChange','changeButton'])
const state = reactive({
currentSelectValue: null,
active_button: 0
})
const selectChange = (val) => {
state.currentSelectValue = val;
emit('selectChange', val);
}
const changeButton = (index) => {
if (state.active_button != index) {
state.active_button = index;
emit("changeButton", index);
}
}
onBeforeMount(() => {
state.currentSelectValue = props.selectValue
})
const {
currentSelectValue,
active_button,
} = toRefs(state)
</script>
<style scoped>
......
src/page/home.vue deleted 100644 → 0
View file @ 2436494d
<template>
<div>
<span @click="getTableData1">login</span>
<span @click="getSelect">select</span>
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :select="true" height="100%"></bg-table>
</div>
</template>
<script>
import { reactive, toRefs,onBeforeMount,onMounted,ref } from 'vue'
export default {
setup(){
const bgTable = ref(null)
const state = reactive({
bgTable,
headers:[
{
label: "类型",
prop: "certificateTypeDesc",
},
{
label: "业务ID",
prop: "businessId",
},
{
label: "申请主体",
prop: "businessId1",
}
],
dataTable:[
{
certificateTypeDesc:111,
businessId:111,
businessId1:111,
id:1,
},
{
certificateTypeDesc:111,
businessId:111,
businessId1:111,
id:2,
},
{
certificateTypeDesc:111,
businessId:111,
businessId1:111,
id:3,
},
{
certificateTypeDesc:111,
businessId:111,
businessId1:111,
id:4,
},
{
certificateTypeDesc:111,
businessId:111,
businessId1:111,
id:5,
},
{
certificateTypeDesc:222,
businessId:22,
businessId1:222,
id:6,
},
{
certificateTypeDesc:2222,
businessId:2222,
businessId1:2222,
id:7,
},
{
certificateTypeDesc:2222,
businessId:2222,
businessId1:2222,
id:8,
},
{
certificateTypeDesc:2222,
businessId:2222,
businessId1:2222,
id:9,
},
{
certificateTypeDesc:2222,
businessId:2222,
businessId1:2222,
id:10,
},
],
tableRows:[],
nowPage:1
})
onBeforeMount(() => {
getTableData()
})
onMounted(() => {
console.log(state.bgTable);
})
const getTableData=()=>{
state.tableRows=[]
state.dataTable.forEach((e,idx) => {
if(idx>=(state.nowPage-1)*5&&idx<state.nowPage*5){
state.tableRows.push(e)
}
});
}
const getTableData1=()=>{
console.log(1111);
if(state.nowPage==1){
state.nowPage = 2
}else{
state.nowPage = 1
}
getTableData()
}
const getSelect=()=>{
let select = state.bgTable.dealSelectData()
console.log(select);
}
return {
...toRefs(state),
getTableData,
getTableData1,
getSelect,
}
}
};
</script>
<style scoped>
</style>
src/page/main/system/role/index.vue
View file @ fdd9d524
......@@ -387,6 +387,7 @@ const distribute_user = (row) => {
const getUserList = () => {
nextTick(() => {
console.log(userTable)
clearUserSelection()
})
let params = {
......@@ -407,6 +408,7 @@ const getUserList = () => {
nextTick(() => {
userState.userRows.forEach(e => {
if(e.is_bind == 1) {
console.log(userTable)
userTable.value.toggleRowSelection(e,true)
}
})
......@@ -445,6 +447,7 @@ const clearAction = (type) => {
}
const clearUserSelection = () => {
console.log(userTable.value)
userTable.value.clearTable()
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment