|
@@ -3,26 +3,31 @@ import { ContentWrap } from '@/components/ContentWrap'
|
|
|
import { useI18n } from '@/hooks/web/useI18n'
|
|
|
import { Table } from '@/components/Table'
|
|
|
import { ref, unref, reactive } from 'vue'
|
|
|
-import { ElButton, ElButtonGroup, ElTooltip } from 'element-plus'
|
|
|
-import { getTree, saveTableApi, delTableListApi, updateTableApi } from '@/api/manage/dict'
|
|
|
+import { ElButton, ElButtonGroup, ElTooltip, ElTree } from 'element-plus'
|
|
|
+import { getDict, saveTableApi, delTableListApi, updateTableApi } from '@/api/manage/dict'
|
|
|
import type { DictData, DictRowData } from '@/api/manage/types'
|
|
|
import { useTable } from '@/hooks/web/useTable'
|
|
|
import { Search } from '@/components/Search'
|
|
|
import Write from './components/Write.vue'
|
|
|
-import Detail from './components/Detail.vue'
|
|
|
+// import Detail from './components/Detail.vue'
|
|
|
import { Dialog } from '@/components/Dialog'
|
|
|
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
|
|
|
import { useIcon } from '@/hooks/web/useIcon'
|
|
|
+import { listToTree } from '@/utils/tree'
|
|
|
+
|
|
|
const EditIcon = useIcon({ icon: 'ep:edit' })
|
|
|
const DetailIcon = useIcon({ icon: 'ep:document' })
|
|
|
const DeleteIcon = useIcon({ icon: 'ep:delete' })
|
|
|
|
|
|
const { t } = useI18n()
|
|
|
+const treeEl = ref<typeof ElTree>()
|
|
|
+const currentNodeKey = ref('')
|
|
|
+const dictList = ref<DictRowData[]>([])
|
|
|
|
|
|
const { tableRegister, tableState, tableMethods } = useTable({
|
|
|
fetchDataApi: async () => {
|
|
|
- const res = await getTree({
|
|
|
- pid: '',
|
|
|
+ const res = await getDict({
|
|
|
+ pid: currentNodeKey.value,
|
|
|
...unref(searchParams)
|
|
|
})
|
|
|
return {
|
|
@@ -177,33 +182,16 @@ const dialogTitle = ref('')
|
|
|
const currentRow = ref<DictData>()
|
|
|
const actionType = ref('')
|
|
|
|
|
|
-const load = async (
|
|
|
- row: DictRowData,
|
|
|
- _treeNode: unknown,
|
|
|
- resolve: (date: DictRowData[]) => void
|
|
|
-) => {
|
|
|
- const res = await getTree({
|
|
|
- pid: row.id,
|
|
|
- ...unref(searchParams)
|
|
|
- })
|
|
|
- resolve(
|
|
|
- res.data.map((e: DictRowData) => {
|
|
|
- return {
|
|
|
- ...e,
|
|
|
- hasChildren: true
|
|
|
- }
|
|
|
- })
|
|
|
- )
|
|
|
+getDict({ pid: '' }).then((res) => {
|
|
|
+ dictList.value = listToTree(res.data)
|
|
|
+})
|
|
|
+const currentChange = (data: DictRowData) => {
|
|
|
+ currentNodeKey.value = data.id
|
|
|
+ getList()
|
|
|
}
|
|
|
|
|
|
-const AddAction = (key: string) => {
|
|
|
+const AddAction = () => {
|
|
|
dialogTitle.value = '新增'
|
|
|
- currentRow.value = undefined
|
|
|
- if (key) {
|
|
|
- currentRow.value = {
|
|
|
- pid: key
|
|
|
- }
|
|
|
- }
|
|
|
dialogVisible.value = true
|
|
|
actionType.value = 'add'
|
|
|
}
|
|
@@ -228,7 +216,7 @@ const action = (row: DictData, type: string) => {
|
|
|
}
|
|
|
|
|
|
const writeRef = ref<ComponentRef<typeof Write>>()
|
|
|
-const tableRef = ref<ComponentRef<typeof Table>>()
|
|
|
+// const tableRef = ref<ComponentRef<typeof Table>>()
|
|
|
const saveLoading = ref(false)
|
|
|
const save = async (action) => {
|
|
|
const write = unref(writeRef)
|
|
@@ -258,8 +246,22 @@ const save = async (action) => {
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <ContentWrap>
|
|
|
+ <div class="flex w-100% h-100%">
|
|
|
+ <ContentWrap class="flex-1">
|
|
|
+ <ElTree
|
|
|
+ ref="treeEl"
|
|
|
+ :data="dictList"
|
|
|
+ default-expand-all
|
|
|
+ node-key="id"
|
|
|
+ :current-node-key="currentNodeKey"
|
|
|
+ :highlight-current="true"
|
|
|
+ :props="{
|
|
|
+ label: 'name'
|
|
|
+ }"
|
|
|
+ @current-change="currentChange"
|
|
|
+ />
|
|
|
+ </ContentWrap>
|
|
|
+ <ContentWrap class="flex-[3] ml-20px">
|
|
|
<Search
|
|
|
:schema="allSchemas.searchSchema"
|
|
|
@reset="setSearchParams"
|
|
@@ -267,46 +269,24 @@ const save = async (action) => {
|
|
|
/>
|
|
|
|
|
|
<div class="mb-10px">
|
|
|
- <ElButton type="primary" @click="AddAction('')">{{ t('exampleDemo.add') }}</ElButton>
|
|
|
+ <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
|
|
|
</div>
|
|
|
<Table
|
|
|
- ref="tableRef"
|
|
|
v-model:current-page="currentPage"
|
|
|
v-model:page-size="pageSize"
|
|
|
:columns="allSchemas.tableColumns"
|
|
|
:data="dataList"
|
|
|
:loading="loading"
|
|
|
- row-key="id"
|
|
|
- :load="load"
|
|
|
@register="tableRegister"
|
|
|
/>
|
|
|
</ContentWrap>
|
|
|
|
|
|
<Dialog v-model="dialogVisible" :title="dialogTitle">
|
|
|
- <Write
|
|
|
- v-if="actionType !== 'detail'"
|
|
|
- ref="writeRef"
|
|
|
- :form-schema="allSchemas.formSchema"
|
|
|
- :current-row="currentRow"
|
|
|
- />
|
|
|
-
|
|
|
- <Detail
|
|
|
- v-if="actionType === 'detail'"
|
|
|
- ref="detailRef"
|
|
|
- :columns="allSchemas"
|
|
|
- :row-data="currentRow"
|
|
|
- />
|
|
|
-
|
|
|
+ <Write ref="writeRef" :form-schema="allSchemas.formSchema" :current-row="currentRow" />
|
|
|
<template #footer>
|
|
|
- <ElButton
|
|
|
- v-if="actionType !== 'detail'"
|
|
|
- type="primary"
|
|
|
- :loading="saveLoading"
|
|
|
- @click="save(actionType)"
|
|
|
- >
|
|
|
+ <ElButton type="primary" :loading="saveLoading" @click="save">
|
|
|
{{ t('exampleDemo.save') }}
|
|
|
</ElButton>
|
|
|
-
|
|
|
<ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
|
|
|
</template>
|
|
|
</Dialog>
|