|
|
|
@ -1,15 +1,15 @@ |
|
|
|
<template> |
|
|
|
<PageWrapper dense> |
|
|
|
<a-row> |
|
|
|
<a-col :span="8" style="margin-top: 1%"> |
|
|
|
<a-col :span="6" style="margin-top: 1%"> |
|
|
|
<div> |
|
|
|
<a-button type="primary" @click="handleAdd" size="small" class="treeButton" |
|
|
|
<a-button type="primary" @click="catalogAdd" size="small" class="treeButton" |
|
|
|
>新增目录</a-button |
|
|
|
> |
|
|
|
<a-button type="primary" @click="handleAdd" size="small" class="treeButton" |
|
|
|
<a-button type="primary" @click="catalogEdit" size="small" class="treeButton" |
|
|
|
>编辑目录</a-button |
|
|
|
> |
|
|
|
<a-button type="primary" @click="handleAdd" size="small" class="treeButton" |
|
|
|
<a-button type="primary" @click="catalogDelete" size="small" class="treeButton" |
|
|
|
>删除目录</a-button |
|
|
|
> |
|
|
|
<a-button type="primary" @click="handleAdd" size="small" class="treeButton" |
|
|
|
@ -17,25 +17,37 @@ |
|
|
|
> |
|
|
|
</div> |
|
|
|
<a-tree |
|
|
|
:show-line="true" |
|
|
|
:show-icon="true" |
|
|
|
:tree-data="treeData" |
|
|
|
v-model:selectedKeys="checkedTree" |
|
|
|
@select="onSelect" |
|
|
|
v-if="treeData.length" |
|
|
|
:defaultExpandAll="true" |
|
|
|
:fieldNames="{ |
|
|
|
children: 'children', |
|
|
|
title: 'projectName', |
|
|
|
title: 'categoryName', |
|
|
|
key: 'id', |
|
|
|
disabled: 'disabled', |
|
|
|
}" |
|
|
|
/> |
|
|
|
</a-col> |
|
|
|
<a-col :span="16"> |
|
|
|
<a-col :span="18"> |
|
|
|
<BasicTable @register="registerTable"> |
|
|
|
<template #toolbar> |
|
|
|
<a-button type="primary" @click="handleAdd">新增协议</a-button> |
|
|
|
<a-button type="primary" @click="handleTypeAdd">新增类型</a-button> |
|
|
|
<a-button type="primary" @click="handleAdd">导入</a-button> |
|
|
|
<a-upload |
|
|
|
name="file" |
|
|
|
:before-upload="beforeUpload" |
|
|
|
@change="importChange" |
|
|
|
:showUploadList="false" |
|
|
|
v-if="checkedTree.length > 0" |
|
|
|
> |
|
|
|
<a-button type="primary"> 导入 </a-button> |
|
|
|
</a-upload> |
|
|
|
<a-button type="primary" @click="downloadExcel(downLoadTemplate, '用户导入模板')" |
|
|
|
>下载导入模板</a-button |
|
|
|
> |
|
|
|
<a-button type="primary" @click="handleAdd">导出</a-button> |
|
|
|
</template> |
|
|
|
<template #bodyCell="{ column, record }"> |
|
|
|
@ -46,7 +58,41 @@ |
|
|
|
</template> |
|
|
|
</BasicTable> |
|
|
|
<addModal ref="addModalRef" /> |
|
|
|
<AddTypeModal ref="addTypeModalRef" /> |
|
|
|
<addTypeModal ref="addTypeModalRef" /> |
|
|
|
<a-modal |
|
|
|
v-model:open="catalogVisible" |
|
|
|
:title="catalogTitle" |
|
|
|
@ok="catalogSubmit" |
|
|
|
@cancel="closeCatalog" |
|
|
|
width="30%" |
|
|
|
> |
|
|
|
<a-form :model="catalogForm" layout="vertical" :rules="catalogRules" ref="catalogFormRef"> |
|
|
|
<a-row :gutter="[16, 16]"> |
|
|
|
<a-col :span="24"> |
|
|
|
<a-form-item label="父级名称" name="ownerId"> |
|
|
|
<a-select |
|
|
|
v-model:value="catalogForm.ownerId" |
|
|
|
:options="ownerOptions" |
|
|
|
placeholder="请选择" |
|
|
|
:disabled="ownerIdDisabled" |
|
|
|
:fieldNames="{ |
|
|
|
value: 'id', |
|
|
|
label: 'categoryName', |
|
|
|
options: 'options', |
|
|
|
}" |
|
|
|
/> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
<a-row> |
|
|
|
<a-col :span="24"> |
|
|
|
<a-form-item label="目录名称" name="categoryName"> |
|
|
|
<a-input v-model:value="catalogForm.categoryName" placeholder="请输入" /> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
</a-form> |
|
|
|
</a-modal> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
</PageWrapper> |
|
|
|
@ -55,11 +101,22 @@ |
|
|
|
<script setup lang="ts"> |
|
|
|
import { PageWrapper } from '@/components/Page'; |
|
|
|
import { BasicTable, useTable } from '@/components/Table'; |
|
|
|
import { list, tree } from './api'; |
|
|
|
import { |
|
|
|
list, |
|
|
|
tree, |
|
|
|
downLoadTemplate, |
|
|
|
listUpload, |
|
|
|
queryAllCatalogName, |
|
|
|
addCategory, |
|
|
|
editCategory, |
|
|
|
removeByIds, |
|
|
|
} from './api'; |
|
|
|
import { formSchemas, columns } from './data'; |
|
|
|
import addModal from './addModal.vue'; |
|
|
|
import { ref, onMounted } from 'vue'; |
|
|
|
import AddTypeModal from './addTypeModal.vue'; |
|
|
|
import { ref, reactive, onMounted } from 'vue'; |
|
|
|
import addTypeModal from './addTypeModal.vue'; |
|
|
|
import { message } from 'ant-design-vue'; |
|
|
|
import { downloadExcel } from '@/utils/file/download'; |
|
|
|
|
|
|
|
defineOptions({ name: 'ServiceManage' }); |
|
|
|
|
|
|
|
@ -97,6 +154,88 @@ |
|
|
|
fixed: 'right', |
|
|
|
}, |
|
|
|
}); |
|
|
|
//新增编辑目录 |
|
|
|
const catalogVisible = ref(false); |
|
|
|
const ownerIdDisabled = ref(false); |
|
|
|
const catalogTitle = ref('新增'); |
|
|
|
let catalogForm = reactive({ |
|
|
|
ownerId: '', |
|
|
|
categoryName: '', |
|
|
|
}); |
|
|
|
const catalogFormRef = ref(); |
|
|
|
const ownerOptions = ref([]); |
|
|
|
const getOwnerOptions = async () => { |
|
|
|
const res = await queryAllCatalogName(); |
|
|
|
const options = res ? res : []; |
|
|
|
options.push({ |
|
|
|
id: 'false', |
|
|
|
categoryName: '无', |
|
|
|
}); |
|
|
|
ownerOptions.value = options; |
|
|
|
}; |
|
|
|
getOwnerOptions(); |
|
|
|
const catalogAdd = () => { |
|
|
|
catalogVisible.value = true; |
|
|
|
catalogTitle.value = '新增'; |
|
|
|
}; |
|
|
|
const catalogEdit = () => { |
|
|
|
if (checkedTree.value[0]) { |
|
|
|
ownerIdDisabled.value = true; |
|
|
|
catalogForm.ownerId = selectInfo.value.ownerId ? selectInfo.value.ownerId : 'false'; |
|
|
|
catalogForm.categoryName = selectInfo.value.categoryName; |
|
|
|
catalogVisible.value = true; |
|
|
|
catalogTitle.value = '编辑'; |
|
|
|
} else { |
|
|
|
message.error('请选择目录'); |
|
|
|
} |
|
|
|
}; |
|
|
|
const catalogDelete = async () => { |
|
|
|
if (checkedTree.value[0]) { |
|
|
|
await removeByIds([checkedTree.value[0]]); |
|
|
|
getTree(); |
|
|
|
} else { |
|
|
|
message.error('请选择目录'); |
|
|
|
} |
|
|
|
}; |
|
|
|
const catalogSubmit = () => { |
|
|
|
catalogFormRef.value.validate().then((valid: any) => { |
|
|
|
if (valid) { |
|
|
|
if (catalogTitle.value == '新增') { |
|
|
|
const params = { |
|
|
|
ownerId: catalogForm.ownerId == 'false' ? null : catalogForm.ownerId, |
|
|
|
categoryName: catalogForm.categoryName, |
|
|
|
}; |
|
|
|
addCategory(params).then((_) => { |
|
|
|
message.success('新增成功'); |
|
|
|
catalogVisible.value = false; |
|
|
|
getTree(); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
const params = { |
|
|
|
id: checkedTree.value[0], |
|
|
|
categoryName: catalogForm.categoryName, |
|
|
|
}; |
|
|
|
editCategory(params).then((_) => { |
|
|
|
message.success('编辑成功'); |
|
|
|
catalogVisible.value = false; |
|
|
|
getTree(); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
const closeCatalog = () => { |
|
|
|
catalogForm = { |
|
|
|
ownerId: '', |
|
|
|
categoryName: '', |
|
|
|
}; |
|
|
|
ownerIdDisabled.value = false; |
|
|
|
catalogVisible.value = false; |
|
|
|
}; |
|
|
|
const catalogRules = { |
|
|
|
ownerId: [{ required: true, message: '请选择' }], |
|
|
|
categoryName: [{ required: true, message: '请输入' }], |
|
|
|
}; |
|
|
|
//新增编辑弹窗 |
|
|
|
const addModalRef = ref(); |
|
|
|
const handleAdd = () => { |
|
|
|
@ -119,16 +258,27 @@ |
|
|
|
const getTree = async () => { |
|
|
|
const res = await tree(); |
|
|
|
treeData.value = res; |
|
|
|
treeData.value.forEach((i: any) => { |
|
|
|
i.disabled = true; |
|
|
|
}); |
|
|
|
console.log(res); |
|
|
|
}; |
|
|
|
const selectInfo = ref<any>({}); |
|
|
|
const onSelect = (selectedKeys: any, info: any) => { |
|
|
|
console.log('selected', selectedKeys, info); |
|
|
|
selectInfo.value = info.node; |
|
|
|
console.log(checkedTree.value); |
|
|
|
reload(); |
|
|
|
}; |
|
|
|
|
|
|
|
//导入 |
|
|
|
const beforeUpload = async (file: any) => { |
|
|
|
const params = new FormData(); |
|
|
|
params.append('file', file); |
|
|
|
params.append('categoryId', checkedTree.value[0]); |
|
|
|
await listUpload(params); |
|
|
|
return false; |
|
|
|
}; |
|
|
|
const importChange = () => { |
|
|
|
reload(); |
|
|
|
}; |
|
|
|
onMounted(() => { |
|
|
|
getTree(); |
|
|
|
}); |
|
|
|
|
wbc
1 month ago