Browse Source

feat: 增加列表

master
betaqi 2 weeks ago
parent
commit
8747d58e67
  1. 135
      src/pages/fileDoc/index.vue
  2. 18
      src/pages/fileDoc/utils.ts

135
src/pages/fileDoc/index.vue

@ -12,7 +12,55 @@ @@ -12,7 +12,55 @@
</template>
</el-breadcrumb>
</template>
<template #title-right>
<el-dropdown
style="margin-right: 4px"
@command="command => handleCommand(command)"
>
<span class="el-dropdown-link">
<EdfsButton
inner-text=""
:icon="createIcon"
type="primary"
size="small"
circle
style="width: 26px; height: 26px; padding-right: 1px"
plain
@click=""
/>
</span>
<template #dropdown>
<el-dropdown-menu>
<template v-for="item in dropdownMenu" :key="item.command">
<el-dropdown-item :command="item.command">
<img v-if="item?.icon" :src="item?.icon" width="20" />
{{ item.label }}
</el-dropdown-item>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button-group class="layout-btns" size="small">
<EdfsButton
inner-text=""
type="primary"
:icon="cardIcons"
:plain="listLayout !== 'card'"
@click="listLayout = 'card'"
/>
<EdfsButton
inner-text=""
type="primary"
:icon="listIcons"
:plain="listLayout !== 'list'"
@click="listLayout = 'list'"
/>
</el-button-group>
</template>
<EdfsContextMenu
v-show="listLayout === 'card'"
eventSourceClass="SourceClass"
:disabledEmpty="false"
@visibleChange="onVisibleChange"
@ -76,6 +124,48 @@ @@ -76,6 +124,48 @@
</div>
</template>
</EdfsContextMenu>
<EdfsTable
class="table"
v-show="listLayout === 'list'"
:data="dataList"
@row-click="onFileOpen"
>
<template v-for="(col, idx) in folderCol" :key="idx">
<el-table-column :label="col.label" :prop="col.prop" v-if="col.prop === 'name'">
<template #default="scope">
<template v-if="scope.row.isEdit">
<el-input
v-model="editFileName"
@blur="onSaveRename(scope.row)"
:key="scope.row.id + 'card' + '_edit'"
:ref="el => setInputRefs(el, scope.row.id)"
@keyup.enter="onSaveRename(scope.row)"
/>
</template>
<div class="edit-name-col" v-else>
{{ scope.row[col.prop] }}
<Icon
class="edit-icon"
icon="gravity-ui:pencil-to-square"
@click="onCommand('rename', scope.row)"
/>
</div>
</template>
</el-table-column>
<el-table-column :label="col.label" :prop="col.prop" v-else />
</template>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
v-if="!(isRootMd && scope.row.type === floeType.file)"
type="danger"
link
@click.stop="onCommand('delete', scope.row)"
>删除</el-button
>
</template>
</el-table-column></EdfsTable
>
</EdfsWrap>
</div>
<markdownDrawer
@ -98,6 +188,7 @@ import { @@ -98,6 +188,7 @@ import {
operationDropdownMenu,
breadcrumbList,
fileDropdownMenu,
folderCol,
} from './utils'
import EdfsWrap from '@/components/dashboard/Edfs-wrap.vue'
import {
@ -120,10 +211,18 @@ import Upload from '@/assets/image/dashboard/file/upload.svg' @@ -120,10 +211,18 @@ import Upload from '@/assets/image/dashboard/file/upload.svg'
import Document from '@/assets/image/dashboard/file/document.svg'
import Document2 from '@/assets/image/dashboard/file/document2.svg'
import UploadMDDlg from './components/uploadMDDlg.vue'
import EdfsTable from '@/components/dashboard/Edfs-table/index.vue'
import EdfsButton from '@/components/dashboard/Edfs-button/index.vue'
import { Icon } from '@/components/dashboard/Icon'
import EdfsContextMenu from '@/components/dashboard/Edfs-context-menu/index.vue'
import markdownDrawer from './components/markdownDrawer.vue'
import { useIcon } from '@/utils/useIcon'
const listIcons = useIcon({ icon: 'gravity-ui:layout-list' })
const cardIcons = useIcon({ icon: 'gravity-ui:credit-card' })
const createIcon = useIcon({ icon: 'gravity-ui:plus' })
const listLayout = ref<'card' | 'list'>('card')
const dropdownMenu = computed(() => {
if (isRootMd.value) {
@ -211,6 +310,13 @@ function onNewMarkdown() { @@ -211,6 +310,13 @@ function onNewMarkdown() {
dataList.value.push(markdown)
onRename(markdown)
}
async function handleCommand(command: string) {
setTimeout(() => {
onCommand(command, 'custom')
}, 800)
}
const curCommand = ref('')
function onCommand(command: string, item: any) {
curCommand.value = command
@ -289,7 +395,7 @@ function onFileOpen(item: any) { @@ -289,7 +395,7 @@ function onFileOpen(item: any) {
const editInputRefs = ref<any>({})
function setInputRefs(el: any, id: number) {
if (el) {
editInputRefs.value[`editInputRef_${id}`] = el
editInputRefs.value[`editInputRef_${listLayout.value}_${id}`] = el
}
}
@ -298,7 +404,6 @@ async function onSaveRename(item: any) { @@ -298,7 +404,6 @@ async function onSaveRename(item: any) {
const find = findItem(item.id)
if (!find.isEdit) return
await nextTick()
debugger
find.isEdit = false
if (find.type === floeType.file && !editFileName.value.endsWith('.md')) {
editFileName.value += '.md'
@ -316,8 +421,8 @@ async function onRename(item: any) { @@ -316,8 +421,8 @@ async function onRename(item: any) {
find.isEdit = true
editFileName.value = find.name
await nextTick()
editInputRefs.value[`editInputRef_${item.id}`].focus()
editInputRefs.value[`editInputRef_${item.id}`].select()
editInputRefs.value[`editInputRef_${listLayout.value}_${item.id}`].focus()
editInputRefs.value[`editInputRef_${listLayout.value}_${item.id}`].select()
}
const findItem = (id: number) => dataList.value.find((v: any) => v.id === id)
@ -517,5 +622,27 @@ onMounted(() => { @@ -517,5 +622,27 @@ onMounted(() => {
}
}
}
.table {
.edit-name-col {
display: flex;
align-items: center;
width: 100%;
column-gap: 4px;
.edit-icon {
display: none;
color: var(--icon-hover-color);
cursor: pointer;
:hover {
color: var(--icon-color);
}
}
}
:deep(.el-table__row) {
cursor: pointer;
&:hover .edit-icon {
display: block;
}
}
}
}
</style>

18
src/pages/fileDoc/utils.ts

@ -66,3 +66,21 @@ function removePrefixFromImages(str: string, prefix: string) { @@ -66,3 +66,21 @@ function removePrefixFromImages(str: string, prefix: string) {
return `![${alt}](${url.replace(prefixPattern, '')})`
})
}
export const folderCol = [
{
label: '名称',
prop: 'name',
width: '10%',
},
{
label: '类型',
prop: 'type',
width: '10%',
},
{
label: '发布状态',
prop: 'isDraft',
width: '10%',
},
]

Loading…
Cancel
Save