feat：初始化 -融骅
This commit is contained in:
210
editor/src/views/manual/components/manual-classify.vue
Normal file
210
editor/src/views/manual/components/manual-classify.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="manual-classify">
|
||||
<h2>手册分类</h2>
|
||||
<InputSearch
|
||||
v-model:value="searchValue"
|
||||
placeholder="请输入搜索内容"
|
||||
enter-button
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<div class="classify-toolbar">
|
||||
<Button type="primary" size="small" shape="circle" ghost @click="addClassify">
|
||||
<PlusOutlined />
|
||||
</Button>
|
||||
<template v-if="selectedKeys && selectedKeys.length > 0">
|
||||
<Button type="primary" size="small" shape="circle" ghost @click="editClassify">
|
||||
<EditOutlined />
|
||||
</Button>
|
||||
<Button size="small" shape="circle" ghost danger @click="deleteClassify">
|
||||
<DeleteOutlined />
|
||||
</Button>
|
||||
</template>
|
||||
</div>
|
||||
<div class="classify-tree">
|
||||
<Tree
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
:tree-data="treeData"
|
||||
@select="selectClassify"
|
||||
:fieldNames="{
|
||||
title: 'name',
|
||||
key: 'id',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Modal v-model:visible="visible" :title="modalTitle" @ok="handleOk">
|
||||
<Form>
|
||||
<FormItem label="" v-bind="validateInfos.name">
|
||||
<Input v-model:value="modelRef.name" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { createVNode, PropType, toRefs } from "vue";
|
||||
import { defineComponent, ref, reactive, onMounted, toRaw } from 'vue';
|
||||
import { Button, Divider, Input, InputSearch, Tree, Modal, Form, FormItem, message } from 'ant-design-vue';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import type { TreeProps } from 'ant-design-vue';
|
||||
import { getManualClassifyListApi, addManualClassifyApi, editManualClassifyApi, deleteManualClassifyApi } from '@/apis/manual';
|
||||
import { listToTree } from "@/utils";
|
||||
|
||||
export default defineComponent({
|
||||
name: 'manual-classify',
|
||||
components: { Button, Divider, Input, InputSearch, Tree, Modal, Form, FormItem, PlusOutlined, EditOutlined, DeleteOutlined, ExclamationCircleOutlined },
|
||||
emits: ['change'],
|
||||
setup(_, { emit }) {
|
||||
const router = useRouter();
|
||||
const searchValue = ref<string>('');
|
||||
const listData = ref<any>([]);
|
||||
const treeData = ref<TreeProps['treeData']>([]);
|
||||
const selectedKeys = ref<number[]>([]);
|
||||
const modalTitle = ref('');
|
||||
const visible = ref<boolean>(false);
|
||||
let modelRef = reactive({
|
||||
id: undefined,
|
||||
name: '',
|
||||
pid: 0
|
||||
});
|
||||
const rulesRef = reactive({
|
||||
name: [{required: true, message: '请输入分类名称'}]
|
||||
});
|
||||
const { resetFields, validate, validateInfos } = Form.useForm(modelRef, rulesRef, {
|
||||
onValidate: (...args) => console.log(...args),
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getManualClassifyList();
|
||||
});
|
||||
|
||||
const getManualClassifyList = async () => {
|
||||
const data = await getManualClassifyListApi();
|
||||
listData.value = data;
|
||||
treeData.value = listToTree(data);
|
||||
};
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
const data = toRaw(listData.value).filter((item: any) => {
|
||||
return item.name.toLowerCase().indexOf(value.toLowerCase()) >= 0;
|
||||
});
|
||||
treeData.value = listToTree(data);
|
||||
};
|
||||
|
||||
const addClassify = () => {
|
||||
modalTitle.value = '新增分类';
|
||||
const data = {
|
||||
id: undefined,
|
||||
name: '',
|
||||
pid: 0
|
||||
};
|
||||
resetFields();
|
||||
modelRef = Object.assign(modelRef, data);
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const editClassify = () => {
|
||||
const data = listData.value.find((item: any) => {
|
||||
return selectedKeys.value[0] === item.id;
|
||||
});
|
||||
resetFields();
|
||||
modelRef = Object.assign(modelRef, {...data});
|
||||
modalTitle.value = '修改分类';
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const deleteClassify = () => {
|
||||
Modal.confirm({
|
||||
title: '确定删除当前手册分类吗？',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: '确定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
const data = listData.value.find((item: any) => {
|
||||
return selectedKeys.value[0] === item.id;
|
||||
});
|
||||
await deleteManualClassifyApi(data.id);
|
||||
message.success('手册分类删除成功');
|
||||
selectedKeys.value = [];
|
||||
selectClassify([]);
|
||||
getManualClassifyList();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
validate()
|
||||
.then(async () => {
|
||||
const params = { ...modelRef }
|
||||
if (!params.id) {
|
||||
params.pid = selectedKeys.value && selectedKeys.value[0] ? selectedKeys.value[0] : 0
|
||||
await addManualClassifyApi(params);
|
||||
message.success('手册分类创建成功');
|
||||
} else {
|
||||
await editManualClassifyApi(params);
|
||||
message.success('手册分类修改成功');
|
||||
}
|
||||
getManualClassifyList();
|
||||
visible.value = false;
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('error', err);
|
||||
});
|
||||
};
|
||||
|
||||
const selectClassify = (keys: any) => {
|
||||
emit('change', keys[0]);
|
||||
};
|
||||
|
||||
return {
|
||||
searchValue,
|
||||
treeData,
|
||||
selectedKeys,
|
||||
modalTitle,
|
||||
visible,
|
||||
validateInfos,
|
||||
resetFields,
|
||||
modelRef,
|
||||
handleSearch,
|
||||
addClassify,
|
||||
editClassify,
|
||||
deleteClassify,
|
||||
selectClassify,
|
||||
handleOk
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.manual-classify {
|
||||
width: 240px;
|
||||
.classify-toolbar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.classify-tree {
|
||||
width: 100%;
|
||||
height: calc(100vh - 176px);
|
||||
padding: 10px 0;
|
||||
overflow: auto;
|
||||
/deep/ .ant-tree {
|
||||
.ant-tree-treenode {
|
||||
width: 100%;
|
||||
.ant-tree-node-content-wrapper {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
442
editor/src/views/manual/components/manual-contents.vue
Normal file
442
editor/src/views/manual/components/manual-contents.vue
Normal file
@@ -0,0 +1,442 @@
|
||||
<template>
|
||||
<div class="manual-contents">
|
||||
<div class="manual-contents-actionbar">
|
||||
<div class="manual-contents-actionbar-left">
|
||||
<div class="actionbar-item">
|
||||
<Checkbox
|
||||
v-model:checked="checkedState.checkAll"
|
||||
:indeterminate="checkedState.indeterminate"
|
||||
@change="onCheckAllChange"
|
||||
/>
|
||||
<span v-if="checkedState.indeterminate"> 已选择{{ checkedKeys.length }}个</span>
|
||||
<span v-else> 所有文档</span>
|
||||
</div>
|
||||
<div class="actionbar-item" @click="onCollapseAll">
|
||||
<PicCenterOutlined /> 全部折叠
|
||||
</div>
|
||||
<div class="actionbar-item" @click="onExpandAll">
|
||||
<PicLeftOutlined /> 全部展开
|
||||
</div>
|
||||
<div class="actionbar-item" @click="onAdd(0, 'atricle')">
|
||||
<PlusCircleOutlined /> 添加文档
|
||||
</div>
|
||||
<div class="actionbar-item" @click="onAdd(0, 'group')">
|
||||
<PlusSquareOutlined /> 添加分组
|
||||
</div>
|
||||
<div class="actionbar-item">
|
||||
<Select
|
||||
show-search
|
||||
size="small"
|
||||
placeholder="请输入搜索内容"
|
||||
style="width: 200px"
|
||||
v-model:value="searchArticle"
|
||||
@change="changeSelect"
|
||||
>
|
||||
<SelectOption v-for="opt in listData" :key="opt.id">
|
||||
{{ opt.title }}
|
||||
</SelectOption>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="manual-contents-actionbar-right"
|
||||
v-if="checkedKeys.length"
|
||||
>
|
||||
<Button
|
||||
type="danger"
|
||||
size="small"
|
||||
>删除</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Tree
|
||||
class="draggable-tree"
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
v-model:checkedKeys="checkedKeys"
|
||||
v-model:expandedKeys="expandedKeys"
|
||||
draggable
|
||||
block-node
|
||||
checkable
|
||||
:tree-data="treeData"
|
||||
@dragenter="onDragEnter"
|
||||
@drop="onDrop"
|
||||
@dragend="onDragend"
|
||||
@dragstart="onDragstart"
|
||||
:fieldNames="{
|
||||
key: 'id',
|
||||
}"
|
||||
>
|
||||
<template #title="node">
|
||||
<div class="tree-node-title">
|
||||
<div class="tree-title-left">
|
||||
<Input v-if="showTreeInput.id === node.id" v-model:value="showTreeInput.value" v-focus size="small" placeholder="small size" @blur="onBlur" />
|
||||
<span v-else @click.stop @dblclick="onEdit(node)">{{ node.title }}</span>
|
||||
</div>
|
||||
<div class="tree-title-right">
|
||||
<span class="article-time">{{ dateTimeFormat(node.updateTime) }}</span>
|
||||
<span class="article-operate">
|
||||
<EyeOutlined @click.stop="onView(node)" />
|
||||
<Dropdown>
|
||||
<PlusSquareOutlined />
|
||||
<template #overlay>
|
||||
<Menu>
|
||||
<MenuItem key="1">
|
||||
<template #icon>
|
||||
<ContainerOutlined />
|
||||
</template>
|
||||
<span>新建文档</span>
|
||||
</MenuItem>
|
||||
<MenuItem key="2">
|
||||
<template #icon>
|
||||
<DatabaseOutlined />
|
||||
</template>
|
||||
<span>新建分组</span>
|
||||
</MenuItem>
|
||||
<MenuItem key="3">
|
||||
<template #icon>
|
||||
<EditOutlined />
|
||||
</template>
|
||||
<span>编辑文档</span>
|
||||
</MenuItem>
|
||||
<MenuDivider />
|
||||
<MenuItem key="4">
|
||||
<template #icon>
|
||||
<HighlightOutlined />
|
||||
</template>
|
||||
<span>重命名</span>
|
||||
</MenuItem>
|
||||
<MenuItem key="5">
|
||||
<template #icon>
|
||||
<DeleteOutlined />
|
||||
</template>
|
||||
<span>删除</span>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, reactive, toRaw, watch, onMounted } from 'vue';
|
||||
import { Button, Input, Tree, Checkbox, Select, SelectOption, Dropdown, Menu, MenuItem, MenuDivider, message } from 'ant-design-vue';
|
||||
import { EyeOutlined, PlusSquareOutlined, PlusCircleOutlined, PicLeftOutlined, PicCenterOutlined, ContainerOutlined, DatabaseOutlined, EditOutlined, HighlightOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import type { AntTreeNodeDragEnterEvent, AntTreeNodeDropEvent, TreeProps } from 'ant-design-vue/es/tree';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { addManualArticleApi, getManualArticleListApi } from '@/apis/manual';
|
||||
import { listToTree } from "@/utils";
|
||||
import moment from "moment";
|
||||
|
||||
export default defineComponent({
|
||||
name: 'manual-contents',
|
||||
components: { Button, Input, Tree, Checkbox, Select, SelectOption, Dropdown, Menu, MenuItem, MenuDivider, EyeOutlined, PlusSquareOutlined, PlusCircleOutlined, PicLeftOutlined, PicCenterOutlined, ContainerOutlined, DatabaseOutlined, EditOutlined, HighlightOutlined, DeleteOutlined },
|
||||
props: {
|
||||
formId: { type: Number },
|
||||
},
|
||||
directives: {
|
||||
// 在模板中启用 v-focus
|
||||
focus: {
|
||||
mounted: (el) => el.focus()
|
||||
}
|
||||
},
|
||||
setup(props, ctx) {
|
||||
const route = useRoute();
|
||||
const checkedState = reactive({
|
||||
indeterminate: false,
|
||||
checkAll: false,
|
||||
});
|
||||
const searchArticle = ref();
|
||||
const listData = ref<any>([]);
|
||||
const treeData = ref<TreeProps['treeData']>([]);
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
const checkedKeys = ref<string[]>([]);
|
||||
const expandedKeys = ref<string[]>([]);
|
||||
const showTreeInput = reactive({
|
||||
id: undefined,
|
||||
value: ''
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
//
|
||||
});
|
||||
|
||||
watch(
|
||||
[() => checkedKeys.value, () => listData.value],
|
||||
() => {
|
||||
checkedState.indeterminate = !!checkedKeys.value.length && checkedKeys.value.length < listData.value.length;
|
||||
checkedState.checkAll = checkedKeys.value.length === listData.value.length;
|
||||
},
|
||||
);
|
||||
|
||||
const dateTimeFormat = (dateTime: string) => {
|
||||
return dateTime ? moment(dateTime).format('YYYY-MM-DD HH:mm:ss') : '';
|
||||
};
|
||||
|
||||
const getManualArticleList = async () => {
|
||||
const id = toRaw(props.formId) as number;
|
||||
const data = await getManualArticleListApi(id);
|
||||
listData.value = data;
|
||||
treeData.value = listToTree(data, 'parentId');
|
||||
};
|
||||
|
||||
watch(() => props.formId, () => getManualArticleList(), { immediate: true });
|
||||
|
||||
const onCheckAllChange = () => {
|
||||
let arr = [];
|
||||
if (checkedState.checkAll) {
|
||||
arr = listData.value.map((item: any) => item.id);
|
||||
}
|
||||
checkedKeys.value = arr;
|
||||
checkedState.indeterminate = false;
|
||||
};
|
||||
|
||||
const onCollapseAll = () => {
|
||||
expandedKeys.value = [];
|
||||
};
|
||||
|
||||
const onExpandAll = () => {
|
||||
const keys = listData.value.filter((item: any) => item.children && item.children.length > 0).map((item: any) => item.id);
|
||||
expandedKeys.value = keys;
|
||||
};
|
||||
|
||||
const onAdd = async (parentId: number, type: string) => {
|
||||
const title = type == 'atricle' ? '新增文档' : '新增分组';
|
||||
const formData = {
|
||||
title,// 文章名称
|
||||
explain: '',// 说明
|
||||
manuals: props.formId,// 属于哪个手册
|
||||
content: '',// 内容
|
||||
type,// 类型 分组|文章
|
||||
parentId,// 父级id
|
||||
authorityUser: [],// 具有权限的用户
|
||||
authorityRole: [],// 具有权限的角色
|
||||
resourceAuthority: false,// 资源是否可下载
|
||||
index: 0,// 排名
|
||||
// 资源量
|
||||
video: 0,
|
||||
audio: 0,
|
||||
image: 0,
|
||||
model: 0,
|
||||
};
|
||||
const data = await addManualArticleApi(formData);
|
||||
message.success(`${title}创建成功`);
|
||||
await getManualArticleList();
|
||||
selectedKeys.value = [data.id];
|
||||
};
|
||||
|
||||
const onEdit = (node: any) => {
|
||||
//
|
||||
console.log('onEdit', node);
|
||||
showTreeInput.id = node.id;
|
||||
showTreeInput.value = node.title;
|
||||
selectedKeys.value = [node.id];
|
||||
};
|
||||
|
||||
const onBlur = () => {
|
||||
//
|
||||
};
|
||||
|
||||
const onView = (node: any) => {
|
||||
console.log('onView', node);
|
||||
};
|
||||
|
||||
const getPathRelations: any = (id: any, arr: any = []) => {
|
||||
for (let i = 0; i < listData.value.length; i++) {
|
||||
const item = listData.value[i];
|
||||
if (item.id === id && item.parentId) {
|
||||
const index = arr.indexOf(item.parentId)
|
||||
if (index === -1) {
|
||||
arr.push(item.parentId);
|
||||
return getPathRelations(item.parentId, arr);
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const changeSelect = (key: any) => {
|
||||
getPathRelations(key, expandedKeys.value);
|
||||
selectedKeys.value = [key];
|
||||
};
|
||||
|
||||
const onDragEnter = (info: AntTreeNodeDragEnterEvent) => {
|
||||
console.log(info);
|
||||
// expandedKeys 需要展开时
|
||||
// expandedKeys.value = info.expandedKeys;
|
||||
};
|
||||
|
||||
const onDrop = (info: AntTreeNodeDropEvent) => {
|
||||
console.log(info);
|
||||
// const dropKey = info.node.key;
|
||||
// const dragKey = info.dragNode.key;
|
||||
// const dropPos = info.node.pos.split('-');
|
||||
// const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
|
||||
// const loop = (data: TreeProps['treeData'], key: string | number, callback: any) => {
|
||||
// data.forEach((item, index) => {
|
||||
// if (item.key === key) {
|
||||
// return callback(item, index, data);
|
||||
// }
|
||||
// if (item.children) {
|
||||
// return loop(item.children, key, callback);
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
// const data = [...treeData.value];
|
||||
|
||||
// // Find dragObject
|
||||
// let dragObj: TreeDataItem;
|
||||
// loop(data, dragKey, (item: TreeDataItem, index: number, arr: TreeProps['treeData']) => {
|
||||
// arr.splice(index, 1);
|
||||
// dragObj = item;
|
||||
// });
|
||||
// if (!info.dropToGap) {
|
||||
// // Drop on the content
|
||||
// loop(data, dropKey, (item: TreeDataItem) => {
|
||||
// item.children = item.children || [];
|
||||
// /// where to insert 示例添加到头部，可以是随意位置
|
||||
// item.children.unshift(dragObj);
|
||||
// });
|
||||
// } else if (
|
||||
// (info.node.children || []).length > 0 && // Has children
|
||||
// info.node.expanded && // Is expanded
|
||||
// dropPosition === 1 // On the bottom gap
|
||||
// ) {
|
||||
// loop(data, dropKey, (item: TreeDataItem) => {
|
||||
// item.children = item.children || [];
|
||||
// // where to insert 示例添加到头部，可以是随意位置
|
||||
// item.children.unshift(dragObj);
|
||||
// });
|
||||
// } else {
|
||||
// let ar: TreeProps['treeData'] = [];
|
||||
// let i = 0;
|
||||
// loop(data, dropKey, (_item: TreeDataItem, index: number, arr: TreeProps['treeData']) => {
|
||||
// ar = arr;
|
||||
// i = index;
|
||||
// });
|
||||
// if (dropPosition === -1) {
|
||||
// ar.splice(i, 0, dragObj);
|
||||
// } else {
|
||||
// ar.splice(i + 1, 0, dragObj);
|
||||
// }
|
||||
// }
|
||||
// treeData.value = data;
|
||||
};
|
||||
|
||||
const onDragend = () => {
|
||||
//
|
||||
};
|
||||
|
||||
const onDragstart = () => {
|
||||
//
|
||||
};
|
||||
|
||||
return {
|
||||
checkedState,
|
||||
searchArticle,
|
||||
listData,
|
||||
treeData,
|
||||
selectedKeys,
|
||||
checkedKeys,
|
||||
expandedKeys,
|
||||
showTreeInput,
|
||||
dateTimeFormat,
|
||||
onCollapseAll,
|
||||
onExpandAll,
|
||||
onAdd,
|
||||
onEdit,
|
||||
onBlur,
|
||||
onView,
|
||||
onCheckAllChange,
|
||||
changeSelect,
|
||||
onDragEnter,
|
||||
onDrop,
|
||||
onDragend,
|
||||
onDragstart,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.manual-contents {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
background-color: #f4f4f4;
|
||||
overflow: hidden;
|
||||
&-actionbar {
|
||||
width: 100%;
|
||||
padding: 6px 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #27a1ac;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
&-left,
|
||||
&-right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
&-left {
|
||||
.actionbar-item {
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
.anticon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .draggable-tree {
|
||||
min-height: 200px;
|
||||
background-color: #f4f4f4;
|
||||
padding: 10px 10px 10px 0;
|
||||
.ant-tree-treenode {
|
||||
padding: 2px 0;
|
||||
line-height: 28px;
|
||||
&.ant-tree-treenode-selected {
|
||||
border: 2px solid #008cff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.ant-tree-node-content-wrapper {
|
||||
&.ant-tree-node-selected {
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-tree-title {
|
||||
.tree-node-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.tree-title-left {
|
||||
|
||||
}
|
||||
.tree-title-right {
|
||||
.article-time {
|
||||
display: inline-block;
|
||||
}
|
||||
.article-operate {
|
||||
display: none;
|
||||
> .anticon {
|
||||
font-size: 16px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.article-time {
|
||||
display: none !important;
|
||||
}
|
||||
.article-operate {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
227
editor/src/views/manual/components/manual-form.vue
Normal file
227
editor/src/views/manual/components/manual-form.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div class="manual-form">
|
||||
<Form :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<Row>
|
||||
<Col :span="12">
|
||||
<FormItem label="手册名称" v-bind="validateInfos.name">
|
||||
<Input v-model:value="modelRef.name" allow-clear placeholder="请输入手册名称" />
|
||||
</FormItem>
|
||||
<FormItem label="编著" v-bind="validateInfos.compile">
|
||||
<Input v-model:value="modelRef.compile" allow-clear placeholder="请输入编著名称" />
|
||||
</FormItem>
|
||||
<FormItem label="出版" v-bind="validateInfos.publish">
|
||||
<Input v-model:value="modelRef.publish" allow-clear placeholder="请输入出版信息" />
|
||||
</FormItem>
|
||||
<FormItem label="手册简介" v-bind="validateInfos.explain">
|
||||
<Textarea v-model:value="modelRef.explain" :rows="4" allow-clear placeholder="请输入简介信息" />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col :span="12">
|
||||
<FormItem label="手册分类" v-bind="validateInfos.classify">
|
||||
<TreeSelect
|
||||
v-model:value="modelRef.classify"
|
||||
show-search
|
||||
style="width: 100%"
|
||||
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
placeholder="请选择分类"
|
||||
allow-clear
|
||||
:tree-data="treeData"
|
||||
tree-node-filter-prop="label"
|
||||
:fieldNames="{
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
}"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="手册分类" v-bind="validateInfos.cover">
|
||||
<Upload
|
||||
v-model:file-list="fileList"
|
||||
accept="image/*"
|
||||
name="file"
|
||||
:headers="{ Authorization: token }"
|
||||
list-type="picture-card"
|
||||
:action="`${baseUrl}/resource/upload`"
|
||||
:before-upload="beforeUpload"
|
||||
@change="handleChange"
|
||||
>
|
||||
<div v-if="fileList.length < 1">
|
||||
<LoadingOutlined v-if="loading" />
|
||||
<PlusOutlined v-else />
|
||||
<div class="ant-upload-text">上传</div>
|
||||
</div>
|
||||
</Upload>
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
<FormItem :wrapper-col="{ span: 14, offset: 4 }" style="text-align: center;">
|
||||
<Button type="primary" shape="round" @click.prevent="handleSubmit">保存</Button>
|
||||
<Button type="primary" danger shape="round" style="margin-left: 10px" @click="handleResetForm">重置</Button>
|
||||
<Button shape="round" style="margin-left: 10px" @click="handleGoBack">返回</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, reactive, toRaw, onMounted, watch, getCurrentInstance } from 'vue';
|
||||
import { Form, FormItem, Row, Col, Input, Textarea, Button, TreeSelect, Upload, Checkbox, message } from 'ant-design-vue';
|
||||
import type { TreeProps, UploadChangeParam, UploadProps } from 'ant-design-vue';
|
||||
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { listToTree } from '@/utils';
|
||||
import { getManualClassifyListApi, addManualApi, editManualApi } from '@/apis/manual';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'manual-form',
|
||||
components: { Form, FormItem, Row, Col, Input, Textarea, Button, TreeSelect, Upload, LoadingOutlined, PlusOutlined },
|
||||
props: ['formData'],
|
||||
emits: ['addDone'],
|
||||
setup(props, { emit }) {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const instance = getCurrentInstance();
|
||||
const token = instance?.appContext.config.globalProperties.$globalVariable.token;
|
||||
const baseUrl = instance?.appContext.config.globalProperties.$globalVariable.baseUrl;
|
||||
const resourceBaseUrl = instance?.appContext.config.globalProperties.$globalVariable.resourceBaseUrl;
|
||||
const manualClassify = ref<string>();
|
||||
const treeData = ref<any>([]);
|
||||
const fileList = ref<any>([]);
|
||||
const loading = ref<boolean>(false);
|
||||
let modelRef = reactive({
|
||||
id: undefined,
|
||||
name: '',
|
||||
compile: '',
|
||||
publish: '',
|
||||
explain: '',
|
||||
classify: 0,
|
||||
cover: '',
|
||||
stick: false,
|
||||
password: '',
|
||||
canEditor: [1],
|
||||
canView: [1],
|
||||
});
|
||||
const rulesRef = reactive({
|
||||
name: [{ required: true, message: '请输入手册名称' }],
|
||||
});
|
||||
|
||||
const { resetFields, validate, validateInfos } = Form.useForm(modelRef, rulesRef, {
|
||||
onValidate: (...args) => console.log(...args),
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getManualClassifyList();
|
||||
});
|
||||
|
||||
const resetForm = (data: any = {
|
||||
id: undefined,
|
||||
name: '',
|
||||
compile: '',
|
||||
publish: '',
|
||||
explain: '',
|
||||
classify: 0,
|
||||
cover: '',
|
||||
stick: false,
|
||||
password: '',
|
||||
canEditor: [1],
|
||||
canView: [1],
|
||||
}) => {
|
||||
resetFields();
|
||||
modelRef = Object.assign(modelRef, data);
|
||||
if (modelRef.cover) {
|
||||
fileList.value = [{ url: `${resourceBaseUrl}/${modelRef.cover}` }]
|
||||
} else {
|
||||
fileList.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => props.formData, resetForm, { immediate: true });
|
||||
|
||||
const getManualClassifyList = async () => {
|
||||
const data = await getManualClassifyListApi();
|
||||
let arr = [{ id: 0, name: '无分类', pid: 0 }];
|
||||
arr = arr.concat(listToTree(data));
|
||||
treeData.value = arr;
|
||||
};
|
||||
|
||||
const handleChange = (info: UploadChangeParam) => {
|
||||
if (info.file.status === 'uploading') {
|
||||
loading.value = true;
|
||||
return;
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
modelRef.cover = info.file.response.data.diskname;
|
||||
loading.value = false;
|
||||
}
|
||||
if (info.file.status === 'error') {
|
||||
loading.value = false;
|
||||
message.error('upload error');
|
||||
}
|
||||
};
|
||||
|
||||
const beforeUpload = (file: any) => {
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload JPG file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 2MB!');
|
||||
}
|
||||
return isJpgOrPng && isLt2M;
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
validate()
|
||||
.then(async () => {
|
||||
const params = { ...modelRef }
|
||||
if (!params.id) {
|
||||
const data = await addManualApi(params);
|
||||
message.success('手册创建成功');
|
||||
router.push({
|
||||
path: route.path,
|
||||
query: { id: data.id, classify: data.classify }
|
||||
});
|
||||
} else {
|
||||
await editManualApi(params.id, params);
|
||||
message.success('手册修改成功');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('error', err);
|
||||
});
|
||||
};
|
||||
|
||||
const handleResetForm = () => {
|
||||
resetForm({
|
||||
id: props.formData.id,
|
||||
classify: props.formData.classify || 0
|
||||
});
|
||||
};
|
||||
|
||||
const handleGoBack = () => {
|
||||
router.push('/manual');
|
||||
};
|
||||
|
||||
return {
|
||||
labelCol: { span: 2 },
|
||||
wrapperCol: { span: 16 },
|
||||
token,
|
||||
baseUrl,
|
||||
resourceBaseUrl,
|
||||
manualClassify,
|
||||
treeData,
|
||||
fileList,
|
||||
loading,
|
||||
validateInfos,
|
||||
handleResetForm,
|
||||
modelRef,
|
||||
handleChange,
|
||||
beforeUpload,
|
||||
handleSubmit,
|
||||
handleGoBack,
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
301
editor/src/views/manual/components/manual-list.vue
Normal file
301
editor/src/views/manual/components/manual-list.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<div class="manual-list">
|
||||
<div class="header-toolbar">
|
||||
<div class="header-toolbar-left">
|
||||
<InputSearch v-model:value="searchValue" placeholder="请输入需要搜索的手册名称" enter-button="查询" style="width: 300px" @search="getManualList" />
|
||||
<!-- <span class="iconfont icon-date-asce" />
|
||||
<span class="iconfont icon-date-desc" /> -->
|
||||
<span v-if="showTable" class="iconfont icon-list" @click="showTable = !showTable" />
|
||||
<span v-else class="iconfont icon-tubiao" @click="showTable = !showTable" />
|
||||
</div>
|
||||
<div class="header-toolbar-right">
|
||||
<Button type="primary" shape="round" @click="handleAdd"> 新增手册 </Button>
|
||||
<Button v-if="showTable" type="primary" danger shape="round" :disabled="selectedRowKeys.length <= 0" @click="handleDelect()"> 删除选中 </Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="manual-data">
|
||||
<Table bordered v-if="showTable" size="small" :columns="columns" :data-source="dataSource" :pagination="pagination" rowKey="id" :row-selection="rowSelection">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'updateTime'">
|
||||
<span>{{ dateTimeFormat(record.updateTime) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'">
|
||||
<Button type="link" @click="handleView(record)">查看</Button>
|
||||
<Button type="link" @click="handleEdit(record)">编辑</Button>
|
||||
<Button type="link" danger @click="handleDelect(record)">删除</Button>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
<List v-else item-layout="horizontal" size="small" :pagination="pagination" :data-source="dataSource">
|
||||
<template #renderItem="{ item }">
|
||||
<ListItem>
|
||||
<div class="list-item-content">
|
||||
<img v-if="item.cover" width="118" height="118" :src="`${resourceBaseUrl}/${item.cover}`" alt="封面" />
|
||||
<span v-else class="cover-none">暂无封面</span>
|
||||
<div class="list-item-fields">
|
||||
<div class="list-item-header">
|
||||
<h3 class="field-name">{{ item.name }}</h3>
|
||||
<div class="list-item-header-right">
|
||||
<Button type="link" @click="handleView(item)">查看</Button>
|
||||
<Button type="link" @click="handleEdit(item)">编辑</Button>
|
||||
<Button type="link" danger @click="handleDelect(item)">删除</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-list">
|
||||
<div class="field-item">
|
||||
<span class="field-item-label"> <UserOutlined /> 编著： </span>
|
||||
<span class="field-item-value">{{ item.compile }}</span>
|
||||
</div>
|
||||
<div class="field-item">
|
||||
<span class="field-item-label"> <BookOutlined /> 出版社： </span>
|
||||
<span class="field-item-value">{{ item.publish }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-explain">
|
||||
<span class="field-explain-label">简介：</span>
|
||||
<span class="field-explain-value" :title="item.explain">{{ item.explain }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ListItem>
|
||||
</template>
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, reactive, getCurrentInstance, watch, computed, unref, createVNode } from 'vue';
|
||||
import { Row, Col, Divider, InputSearch, Button, Table, List, ListItem, message, Modal } from 'ant-design-vue';
|
||||
import { UserOutlined, BookOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getManualListApi, deleteManualApi } from '@/apis/manual';
|
||||
import moment from 'moment';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '手册名称',
|
||||
dataIndex: 'name',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateTime',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: '手册备注说明',
|
||||
dataIndex: 'explain',
|
||||
ellipsis: true,
|
||||
width: '40%',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operation',
|
||||
width: '20%',
|
||||
},
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
name: 'manual-list',
|
||||
components: { Row, Col, Divider, InputSearch, Button, Table, List, ListItem, UserOutlined, BookOutlined, ExclamationCircleOutlined },
|
||||
props: {
|
||||
manualClassify: { type: Number },
|
||||
},
|
||||
setup(props) {
|
||||
const router = useRouter();
|
||||
const searchValue = ref<string>('');
|
||||
const dataSource = ref<any>([]);
|
||||
const selectedRowKeys = ref<any>([]);
|
||||
const showTable = ref<boolean>(true);
|
||||
const pagination: any = {
|
||||
size: 'small',
|
||||
onChange: (page: number) => {
|
||||
console.log(page);
|
||||
},
|
||||
pageSize: 10,
|
||||
};
|
||||
const instance = getCurrentInstance();
|
||||
const resourceBaseUrl = instance?.appContext.config.globalProperties.$globalVariable.resourceBaseUrl;
|
||||
|
||||
const rowSelection = computed(() => {
|
||||
return {
|
||||
selectedRowKeys: unref(selectedRowKeys),
|
||||
onChange: (keys: any) => {
|
||||
selectedRowKeys.value = keys;
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const getManualList = async () => {
|
||||
const classify = props.manualClassify;
|
||||
let data = await getManualListApi(classify);
|
||||
if (searchValue.value) {
|
||||
data = data.filter((item: any) => {
|
||||
return item.name.toLowerCase().indexOf(searchValue.value.toLowerCase()) >= 0;
|
||||
});
|
||||
}
|
||||
dataSource.value = data;
|
||||
};
|
||||
|
||||
watch(() => props.manualClassify, getManualList, { immediate: true });
|
||||
|
||||
const dateTimeFormat = (dateTime: string) => {
|
||||
return dateTime ? moment(dateTime).format('YYYY-MM-DD HH:mm:ss') : '';
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
router.push({
|
||||
path: '/manual/edit',
|
||||
query: { classify: props.manualClassify },
|
||||
});
|
||||
};
|
||||
|
||||
const handleView = (record: any) => {
|
||||
// window.history.pushState({ id: record.id }, '', 'app1#/manual/view');
|
||||
router.push({
|
||||
path: '/manual/view',
|
||||
query: { id: record.id }
|
||||
});
|
||||
};
|
||||
|
||||
const handleEdit = (record: any) => {
|
||||
console.log('handleEdit', record);
|
||||
router.push({
|
||||
path: '/manual/edit',
|
||||
query: { id: record.id },
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelect = async (record?: any) => {
|
||||
Modal.confirm({
|
||||
title: '确定删除当前手册吗？',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: '确定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
await deleteManualApi({
|
||||
idArray: record ? [record.id] : selectedRowKeys.value,
|
||||
data: { delFlag: 1 },
|
||||
});
|
||||
message.success('手册删除成功');
|
||||
if (!record) selectedRowKeys.value = [];
|
||||
getManualList();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
searchValue,
|
||||
dataSource,
|
||||
columns,
|
||||
selectedRowKeys,
|
||||
rowSelection,
|
||||
showTable,
|
||||
pagination,
|
||||
resourceBaseUrl,
|
||||
getManualList,
|
||||
dateTimeFormat,
|
||||
handleAdd,
|
||||
handleView,
|
||||
handleEdit,
|
||||
handleDelect,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.manual-list {
|
||||
.header-toolbar {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 24px;
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
.ant-btn {
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.manual-data {
|
||||
/deep/ .ant-list {
|
||||
.ant-list-item {
|
||||
border: none;
|
||||
background-color: #f4f4f4;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
.list-item-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
img {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.cover-none {
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.list-item-fields {
|
||||
flex: 1;
|
||||
.list-item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.field-name {
|
||||
line-height: 32px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
.field-list {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
.field-item {
|
||||
display: flex;
|
||||
margin-right: 20px;
|
||||
color: #9b9b9b;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
.field-explain {
|
||||
width: 100%;
|
||||
height: 54px;
|
||||
line-height: 27px;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
&-label {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user