manager/zyplayer-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

合并api文档编辑页面，体验优化

Browse Source
This commit is contained in:
暮光：城中城
2021-12-14 22:29:07 +08:00
parent bca4ba34e1
commit ab92d6958b
58 changed files with 570 additions and 9849 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
zyplayer-doc-ui/api-ui/src/components/layouts/PageLayout.vue
View File

@@ -1,6 +1,11 @@
<template>
<div class="page-layout">
<a-tabs type="editable-card" v-model:activeKey="activePage" @tab-click="changePage" @edit="editPageTab" style="padding: 5px 10px 0;">
<template #addIcon>
<a-tooltip title="新建一个API接口">
<plus-outlined />
</a-tooltip>
</template>
<a-tab-pane closable :tab="pageTabNameMap[item.fullPath]||item.name" :name="getRouteRealPath(item)" :fullPath="item.fullPath" :key="item.fullPath" v-for="item in pageList"/>
</a-tabs>
<div class="page-body">
@@ -14,9 +19,11 @@
</template>
<script>
import {PlusOutlined} from '@ant-design/icons-vue';
export default {
name: 'PageTableView',
components: {},
components: {PlusOutlined},
data() {
return {
pageList: [],

46
zyplayer-doc-ui/api-ui/src/views/manage/DocManageEdit.vue
View File

@@ -1,35 +1,28 @@
<template>
<a-page-header
title="编辑"
:sub-title="docEdit.name||''"
@back="showDocList">
<template #extra>
</template>
<a-page-header title="编辑" :sub-title="docEdit.name||''" @back="showDocList">
<template #extra></template>
</a-page-header>
<a-tabs v-model:activeKey="activeEditTab" style="padding: 5px 10px 0;">
<a-tab-pane tab="基本信息" key="base" forceRender>
<a-spin tip="文档数据加载中..." :spinning="docEditLoading">
<a-spin tip="数据加载中..." :spinning="docEditLoading">
<EditDocBaseInfo ref="docBaseInfoRef" :doc="docEdit"></EditDocBaseInfo>
</a-spin>
</a-tab-pane>
<a-tab-pane tab="成员管理" key="members">
<a-spin tip="文档数据加载中..." :spinning="docEditLoading">
<DocManageMembers :doc="docEdit"></DocManageMembers>
</a-spin>
<a-tab-pane v-if="docEdit.id > 0 && docEdit.authType === 1" tab="成员管理" key="members">
<DocManageMembers :doc="docEdit"></DocManageMembers>
</a-tab-pane>
<a-tab-pane v-if="docEdit.openVisit === 1" tab="开放文档说明" key="instruction" forceRender>
<a-spin tip="文档数据加载中..." :spinning="docEditLoading">
<EditShareInstruction ref="shareInstructionRef" :doc="docEdit"></EditShareInstruction>
</a-spin>
<a-tab-pane v-if="docEdit.id > 0" tab="文档全局参数" key="globalParam">
<EditGlobalParam :dynamic-param="{docId: docEdit.id}"></EditGlobalParam>
</a-tab-pane>
<a-tab-pane v-if="docEdit.openVisit === 1" tab="开放文档说明" key="instruction">
<EditShareInstruction ref="shareInstructionRef" :doc="docEdit"></EditShareInstruction>
</a-tab-pane>
<template #rightExtra>
<a-button v-if="activeEditTab==='base'" @click="saveBaseInfo" type="primary">
<template #icon><save-outlined /></template>
保存基本信息
<a-button v-if="activeEditTab==='base' && docEdit.authType === 1" @click="saveBaseInfo" :loading="docEditLoading" type="primary">
<template #icon><save-outlined /></template> 保存基本信息
</a-button>
<a-button v-if="activeEditTab==='instruction'" @click="saveShareInstruction" type="primary">
<template #icon><save-outlined /></template>
保存开放文档说明
<a-button v-if="activeEditTab==='instruction'" @click="saveShareInstruction" :loading="docEditLoading" type="primary">
<template #icon><save-outlined /></template> 保存开放文档说明
</a-button>
</template>
</a-tabs>
@@ -40,15 +33,16 @@
import {zyplayerApi} from '../../api';
import {useStore} from 'vuex';
import {getZyplayerApiBaseUrl} from "../../api/request/utils";
import {DownOutlined, LinkOutlined, SaveOutlined} from '@ant-design/icons-vue';
import {SaveOutlined} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import EditDocBaseInfo from "./components/EditDocBaseInfo.vue";
import EditShareInstruction from "./components/EditShareInstruction.vue";
import EditGlobalParam from "./components/EditGlobalParam.vue";
import DocManageMembers from "./DocManageMembers.vue";
export default {
emits: ['showDocList'],
components: {DownOutlined, LinkOutlined, SaveOutlined, EditShareInstruction, EditDocBaseInfo, DocManageMembers},
components: {SaveOutlined, EditShareInstruction, EditDocBaseInfo, DocManageMembers, EditGlobalParam},
props: {
doc: {
type: Object,
@@ -75,6 +69,8 @@
if (res.data.id !== docNew.id) {
showDocList();
}
}).catch(() => {
docEditLoading.value = false;
});
};
const saveShareInstruction = () => {
@@ -86,6 +82,8 @@
zyplayerApi.apiDocUpdate(docNew).then(res => {
message.success('保存成功！');
docEditLoading.value = false;
}).catch(() => {
docEditLoading.value = false;
});
};
let activeEditTab = ref('base');
@@ -95,6 +93,8 @@
zyplayerApi.apiDocDetail({id: props.doc.id}).then(res => {
docEditLoading.value = false;
docEdit.value = res.data;
}).catch(() => {
docEditLoading.value = false;
});
});
return {

74
zyplayer-doc-ui/api-ui/src/views/manage/DocManageList.vue
View File

@@ -22,8 +22,8 @@
</a-select>
</a-form-item>
<a-form-item>
<a-button @click="searchDocList" type="primary">查询</a-button>
<a-button @click="openNewDoc" :style="{ marginLeft: '8px' }">新建</a-button>
<a-button @click="searchDocList" type="primary"><template #icon><SearchOutlined/></template> 查询</a-button>
<a-button @click="openNewDoc" :style="{ marginLeft: '8px' }"><template #icon><PlusOutlined/></template> 新建</a-button>
</a-form-item>
</a-form>
<a-table :dataSource="docList" :columns="docListColumns" size="middle"
@@ -63,23 +63,23 @@
</template>
</a-table>
<a-modal v-model:visible="newDocVisible" :title="docEdit.isNew?'新增文档':'编辑文档'" @ok="handleNewDocOk" :width="850">
<EditDocBaseInfo :doc="docEdit"></EditDocBaseInfo>
<EditDocBaseInfo ref="docBaseInfoRef" :doc="docEdit"></EditDocBaseInfo>
</a-modal>
</template>
<script>
import { toRefs, ref, reactive, onMounted } from 'vue';
import { toRefs, ref, reactive, onMounted, createVNode, defineComponent } from 'vue';
import {zyplayerApi} from '../../api';
import {useStore} from 'vuex';
import aceEditor from "../../assets/ace-editor";
import EditDocBaseInfo from "./components/EditDocBaseInfo.vue";
import {getZyplayerApiBaseUrl} from "../../api/request/utils";
import {DownOutlined, LinkOutlined, EditOutlined} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import {DownOutlined, LinkOutlined, EditOutlined, SearchOutlined, PlusOutlined, ExclamationCircleOutlined} from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
export default {
emits: ['edit'],
components: {aceEditor, DownOutlined, LinkOutlined, EditOutlined, EditDocBaseInfo},
components: {aceEditor, DownOutlined, LinkOutlined, EditOutlined, SearchOutlined, PlusOutlined, EditDocBaseInfo},
setup(props, {emit}) {
const store = useStore();
let docList = ref([]);
@@ -109,39 +109,41 @@
});
};
let docEdit = ref({});
let newDocFormRef = ref();
let docBaseInfoRef = ref();
let newDocVisible = ref(false);
const handleNewDocOk = async () => {
newDocFormRef.value.validate().then(() => {
zyplayerApi.apiDocAdd(docEdit.value).then(res => {
newDocVisible.value = false;
store.commit('addDocChangedNum');
emit('edit', 'edit', res.data);
});
}).catch(error => {
console.log('error', error);
});
};
const openNewDoc = async () => {
newDocVisible.value = true;
docEdit.value = {
docType: 1, openVisit: 0, docStatus: 1, isNew: 1
};
};
const editDoc = (record) => {
emit('edit', 'edit', record);
// zyplayerApi.apiDocDetail({id: record.id}).then(res => {
// docEdit.value = res.data;
// newDocVisible.value = true;
// });
};
const updateDoc = async (id, docStatus, yn) => {
zyplayerApi.apiDocUpdate({id, docStatus, yn}).then(res => {
searchDocList();
let docNew = await docBaseInfoRef.value.getDoc();
zyplayerApi.apiDocAdd(docNew).then(res => {
newDocVisible.value = false;
store.commit('addDocChangedNum');
searchDocList();
});
};
const openNewDoc = async () => {
newDocVisible.value = true;
docEdit.value = {docType: 1, openVisit: 0, docStatus: 1, isNew: 1};
};
const editDoc = (record) => {
emit('edit', 'edit', record);
};
const updateDoc = (id, docStatus, yn) => {
zyplayerApi.apiDocUpdate({id, docStatus, yn}).then(res => {
store.commit('addDocChangedNum');
searchDocList();
});
};
const deleteDoc = (row) => {
Modal.confirm({
title: '再次确认',
icon: createVNode(ExclamationCircleOutlined),
content: '你真的确定要删除此文档吗？',
okText: '确认',
cancelText: '取消',
onOk() {
updateDoc(row.id, null, 0);
},
});
};
const deleteDoc = async (row) => updateDoc(row.id, null, 0);
// 打开开放文档新窗口
const openShareViewWindow = record => {
if (!record.shareUuid) {
@@ -166,7 +168,7 @@
docListLoading,
newDocVisible,
docEdit,
newDocFormRef,
docBaseInfoRef,
searchDocList,
openNewDoc,
handleNewDocOk,

18
zyplayer-doc-ui/api-ui/src/views/manage/DocManageMembers.vue
View File

@@ -1,12 +1,16 @@
<template>
<div style="text-align: right;margin: 0 10px 10px 0;">
<a-button @click="searchDocMemberList" type="primary">查询</a-button>
<a-button @click="openAddDocMember" :style="{ marginLeft: '8px' }">添加用户</a-button>
<a-button @click="searchDocMemberList" type="primary">
<template #icon><search-outlined /></template> 查询
</a-button>
<a-button @click="openAddDocMember" :style="{ marginLeft: '8px' }">
<template #icon><plus-outlined /></template> 添加用户
</a-button>
</div>
<a-table :dataSource="docMemberList" :columns="docListColumns" size="middle"
:loading="docMemberListLoading" :pagination="false"
@change="handleTableChange"
:scroll="{ x: 1400, y: 'calc(100vh - 300px)' }">
:scroll="{ x: 1000, y: 'calc(100vh - 300px)' }">
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'operation'">
<a-popconfirm title="确定要删除吗？" @confirm="deleteDocMember(record)">
@@ -60,12 +64,12 @@
import {zyplayerApi} from '../../api';
import {useStore} from 'vuex';
import {getZyplayerApiBaseUrl} from "../../api/request/utils";
import {DownOutlined, LinkOutlined, EditOutlined} from '@ant-design/icons-vue';
import {SearchOutlined, PlusOutlined} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
export default {
emits: ['showDocList'],
components: {DownOutlined, LinkOutlined, EditOutlined},
components: {PlusOutlined, SearchOutlined},
props: {
doc: {
type: Object,
@@ -106,6 +110,8 @@
setTimeout(() => docMemberListLoading.value = false, 500);
docMemberList.value = res.data || [];
pagination.value.total = res.total || 0;
}).catch(() => {
docMemberListLoading.value = false;
});
};
let userAdd = ref({});
@@ -129,6 +135,8 @@
let resArr = res.data || [];
resArr.forEach(item => userSearchList.value.push({label: item.userName, value: item.id}));
userSearchState.value.fetching = false;
}).catch(() => {
userSearchState.value.fetching = false;
});
}, 500);
};

124
zyplayer-doc-ui/api-ui/src/views/manage/GlobalParam.vue
View File

@@ -1,48 +1,5 @@
<template>
<div style="margin-bottom: 10px;text-align: right;">
<a-button @click="searchDocList" type="primary">刷新</a-button>
<a-button @click="addDocLine">新建</a-button>
</div>
<a-table :dataSource="docList" :columns="docListColumns" size="middle" id="paramTable"
:loading="docListLoading" :pagination="false"
:scroll="{ x: 1000, y: 'calc(100vh - 240px)' }">
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'paramKey'">
<a-input v-if="record.isEdit" placeholder="请输入参数名称" v-model:value="docEdit.paramKey"></a-input>
<span v-else>{{text}}</span>
</template>
<template v-if="column.dataIndex === 'paramValue'">
<a-input v-if="record.isEdit" :rows="1" placeholder="请输入参数值" v-model:value="docEdit.paramValue"></a-input>
<span v-else>{{text}}</span>
</template>
<template v-if="column.dataIndex === 'paramType'">
<template v-if="record.isEdit">
<a-select placeholder="参数位置" v-model:value="docEdit.paramType" style="width: 110px;">
<a-select-option :value="1">Form</a-select-option>
<a-select-option :value="2">Header</a-select-option>
<a-select-option :value="3">Cookie</a-select-option>
</a-select>
</template>
<template v-else>
<a-tag color="green" v-if="text === 1">Form</a-tag>
<a-tag color="pink" v-else-if="text === 2">Header</a-tag>
<a-tag color="pink" v-else-if="text === 3">Cookie</a-tag>
</template>
</template>
<template v-if="column.dataIndex === 'operation'">
<template v-if="record.isEdit">
<a-button type="link" @click="cancelEditDoc(record)">取消</a-button>
<a-button type="link" @click="saveEditDoc(record)">保存</a-button>
</template>
<template v-else>
<a-button type="link" @click="editDoc(record)">编辑</a-button>
<a-popconfirm title="确定要删除吗？" @confirm="deleteDoc(record)">
<a-button type="link" danger>删除</a-button>
</a-popconfirm>
</template>
</template>
</template>
</a-table>
<EditGlobalParam :dynamic-param="{docId: 0}"></EditGlobalParam>
</template>
<script>
@@ -50,87 +7,12 @@
import {zyplayerApi} from '../../api';
import {useStore} from 'vuex';
import { message } from 'ant-design-vue';
import EditGlobalParam from "./components/EditGlobalParam.vue";
export default {
components: {EditGlobalParam},
setup() {
const store = useStore();
let docList = ref([]);
let docListLoading = ref(false);
const searchDocList = async () => {
docEdit.value = {};
docListLoading.value = true;
zyplayerApi.docApiGlobalParamList().then(res => {
setTimeout(() => docListLoading.value = false, 500);
docList.value = res.data || [];
store.commit('setGlobalParam', docList.value);
});
};
let docEdit = ref({});
let tableRef = ref();
const addDocLine = () => {
if (docEdit.value.isEdit) {
cancelEditDoc(docEdit.value);
}
let newLine = {isEdit: true};
docList.value.unshift(newLine);
docEdit.value = newLine;
// 渲染完滚动到底部
setTimeout(() => {
let container = document.getElementsByClassName('ant-table-body')[0];
container.scrollTop = 0;
}, 0);
};
const editDoc = (record) => {
if (docEdit.value.isEdit) {
cancelEditDoc(docEdit.value);
}
record.isEdit = true;
docEdit.value = {...record};
};
const cancelEditDoc = (record) => {
record.isEdit = false;
if (!record.id) {
docList.value = docList.value.filter(item => item !== record);
} else {
docList.value.forEach(item => item.isEdit = false);
}
docEdit.value = {};
};
const saveEditDoc = (record) => {
if (!docEdit.value.paramKey || !docEdit.value.paramValue) {
message.error('参数名或参数值不能为空');
return;
}
zyplayerApi.docApiGlobalParamUpdate(docEdit.value).then(res => {
record.isEdit = false;
searchDocList();
});
};
const deleteDoc = async (record) => {
zyplayerApi.docApiGlobalParamUpdate({id: record.id, yn: 0}).then(res => {
searchDocList();
});
};
onMounted(() => {
searchDocList();
});
return {
docList,
docListLoading,
docEdit,
tableRef,
searchDocList,
deleteDoc,
editDoc,
saveEditDoc,
cancelEditDoc,
addDocLine,
docListColumns: [
{title: '参数名称', dataIndex: 'paramKey', width: 250},
{title: '参数值', dataIndex: 'paramValue'},
{title: '参数位置', dataIndex: 'paramType', width: 120},
{title: '操作', dataIndex: 'operation', fixed: 'right', width: 170},
],
};
},
};

146
zyplayer-doc-ui/api-ui/src/views/manage/components/EditGlobalParam.vue Normal file
View File

@@ -0,0 +1,146 @@
<template>
<div style="margin-bottom: 10px;text-align: right;">
<a-button @click="searchDocList" type="primary"><template #icon><reload-outlined /></template> 刷新</a-button>
<a-button @click="addDocLine"><template #icon><plus-outlined /></template> 新建</a-button>
</div>
<a-table :dataSource="docList" :columns="docListColumns" size="middle" id="paramTable"
:loading="docListLoading" :pagination="false"
:scroll="{ x: 1000, y: 'calc(100vh - 240px)' }">
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'paramKey'">
<a-input v-if="record.isEdit" placeholder="请输入参数名称" v-model:value="docEdit.paramKey"></a-input>
<span v-else>{{text}}</span>
</template>
<template v-if="column.dataIndex === 'paramValue'">
<a-input v-if="record.isEdit" :rows="1" placeholder="请输入参数值" v-model:value="docEdit.paramValue"></a-input>
<span v-else>{{text}}</span>
</template>
<template v-if="column.dataIndex === 'paramType'">
<template v-if="record.isEdit">
<a-select placeholder="参数位置" v-model:value="docEdit.paramType" style="width: 110px;">
<a-select-option :value="1">Form</a-select-option>
<a-select-option :value="2">Header</a-select-option>
<a-select-option :value="3">Cookie</a-select-option>
</a-select>
</template>
<template v-else>
<a-tag color="green" v-if="text === 1">Form</a-tag>
<a-tag color="pink" v-else-if="text === 2">Header</a-tag>
<a-tag color="pink" v-else-if="text === 3">Cookie</a-tag>
</template>
</template>
<template v-if="column.dataIndex === 'operation'">
<template v-if="record.isEdit">
<a-button type="link" @click="cancelEditDoc(record)">取消</a-button>
<a-button type="link" @click="saveEditDoc(record)">保存</a-button>
</template>
<template v-else>
<a-button type="link" @click="editDoc(record)">编辑</a-button>
<a-popconfirm title="确定要删除吗？" @confirm="deleteDoc(record)">
<a-button type="link" danger>删除</a-button>
</a-popconfirm>
</template>
</template>
</template>
</a-table>
</template>
<script>
import { toRefs, ref, reactive, onMounted } from 'vue';
import {zyplayerApi} from '../../../api';
import {useStore} from 'vuex';
import { message } from 'ant-design-vue';
import {SearchOutlined, PlusOutlined, ReloadOutlined} from '@ant-design/icons-vue';
export default {
components: {PlusOutlined, SearchOutlined, ReloadOutlined},
props: {
dynamicParam: {
type: Object,
required: true
},
},
setup(props) {
const store = useStore();
let docList = ref([]);
let docListLoading = ref(false);
const searchDocList = async () => {
docEdit.value = {};
docListLoading.value = true;
zyplayerApi.docApiGlobalParamList(props.dynamicParam).then(res => {
setTimeout(() => docListLoading.value = false, 500);
docList.value = res.data || [];
store.commit('setGlobalParam', docList.value);
});
};
let docEdit = ref({});
let tableRef = ref();
const addDocLine = () => {
if (docEdit.value.isEdit) {
cancelEditDoc(docEdit.value);
}
let newLine = {isEdit: true, paramType: 1};
docList.value.unshift(newLine);
docEdit.value = newLine;
// 渲染完滚动到底部
setTimeout(() => {
let container = document.getElementsByClassName('ant-table-body')[0];
container.scrollTop = 0;
}, 0);
};
const editDoc = (record) => {
if (docEdit.value.isEdit) {
cancelEditDoc(docEdit.value);
}
record.isEdit = true;
docEdit.value = {...record};
};
const cancelEditDoc = (record) => {
record.isEdit = false;
if (!record.id) {
docList.value = docList.value.filter(item => item !== record);
} else {
docList.value.forEach(item => item.isEdit = false);
}
docEdit.value = {};
};
const saveEditDoc = (record) => {
if (!docEdit.value.paramKey || !docEdit.value.paramValue) {
message.error('参数名或参数值不能为空');
return;
}
let params = {...props.dynamicParam, ...docEdit.value};
zyplayerApi.docApiGlobalParamUpdate(params).then(res => {
record.isEdit = false;
searchDocList();
});
};
const deleteDoc = async (record) => {
zyplayerApi.docApiGlobalParamUpdate({id: record.id, yn: 0}).then(res => {
searchDocList();
});
};
onMounted(() => {
searchDocList();
});
return {
docList,
docListLoading,
docEdit,
tableRef,
searchDocList,
deleteDoc,
editDoc,
saveEditDoc,
cancelEditDoc,
addDocLine,
docListColumns: [
{title: '参数名称', dataIndex: 'paramKey', width: 250},
{title: '参数值', dataIndex: 'paramValue'},
{title: '参数位置', dataIndex: 'paramType', width: 120},
{title: '操作', dataIndex: 'operation', fixed: 'right', width: 170},
],
};
},
};
</script>