You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
301 lines
8.6 KiB
301 lines
8.6 KiB
<template>
|
|
<PageWrapper dense>
|
|
<a-row>
|
|
<a-col :span="6" style="margin-top: 1%">
|
|
<div>
|
|
<a-button type="primary" @click="catalogAdd" size="small" class="treeButton"
|
|
>新增目录</a-button
|
|
>
|
|
<a-button type="primary" @click="catalogEdit" size="small" class="treeButton"
|
|
>编辑目录</a-button
|
|
>
|
|
<a-button type="primary" @click="catalogDelete" size="small" class="treeButton"
|
|
>删除目录</a-button
|
|
>
|
|
<a-button type="primary" @click="handleAdd" size="small" class="treeButton"
|
|
>导入</a-button
|
|
>
|
|
</div>
|
|
<a-tree
|
|
:show-icon="true"
|
|
:show-line="true"
|
|
:tree-data="treeData"
|
|
v-model:selectedKeys="checkedTree"
|
|
@select="onSelect"
|
|
v-if="treeData.length"
|
|
:defaultExpandAll="true"
|
|
:fieldNames="{
|
|
children: 'children',
|
|
title: 'categoryName',
|
|
key: 'id',
|
|
disabled: 'disabled',
|
|
}"
|
|
/>
|
|
</a-col>
|
|
<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-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 }">
|
|
<template v-if="column && record && column.key === 'action'">
|
|
<a-button type="link" @click="handleEdit(record.id)">编辑</a-button>
|
|
<a-popconfirm
|
|
title="确定要删除吗?"
|
|
ok-text="是"
|
|
cancel-text="否"
|
|
@confirm="handleDelete(record.id)"
|
|
>
|
|
<a-button type="link">删除</a-button>
|
|
</a-popconfirm>
|
|
</template>
|
|
</template>
|
|
</BasicTable>
|
|
<addModal ref="addModalRef" />
|
|
<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>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { PageWrapper } from '@/components/Page';
|
|
import { BasicTable, useTable } from '@/components/Table';
|
|
import {
|
|
list,
|
|
tree,
|
|
downLoadTemplate,
|
|
listUpload,
|
|
queryAllCatalogName,
|
|
addCategory,
|
|
editCategory,
|
|
removeByIds,
|
|
} from './api';
|
|
import { formSchemas, columns } from './data';
|
|
import addModal from './addModal.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' });
|
|
|
|
const [registerTable, { reload }] = useTable({
|
|
rowSelection: {
|
|
type: 'checkbox',
|
|
},
|
|
title: '服务管理',
|
|
api: list,
|
|
showIndexColumn: true,
|
|
rowKey: 'id',
|
|
useSearchForm: true,
|
|
formConfig: {
|
|
schemas: formSchemas,
|
|
name: 'serviceManage',
|
|
baseColProps: {
|
|
xs: 24,
|
|
sm: 24,
|
|
md: 24,
|
|
lg: 6,
|
|
},
|
|
},
|
|
columns: columns,
|
|
beforeFetch(params: any) {
|
|
if (checkedTree.value.length === 1) {
|
|
params.serviceCategoryId = checkedTree.value[0];
|
|
}
|
|
return params;
|
|
},
|
|
immediate: false,
|
|
actionColumn: {
|
|
width: 200,
|
|
title: '操作',
|
|
key: 'action',
|
|
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 = () => {
|
|
addModalRef.value.showModal(1);
|
|
};
|
|
const handleEdit = (id: any) => {
|
|
addModalRef.value.showModal(2, id);
|
|
};
|
|
const handleDelete = (id: any) => {
|
|
addModalRef.value.showModal(2, id);
|
|
};
|
|
//新增类型弹窗
|
|
const addTypeModalRef = ref();
|
|
const handleTypeAdd = () => {
|
|
addTypeModalRef.value.showModal(1);
|
|
};
|
|
//tree
|
|
const checkedTree = ref([]);
|
|
const treeData = ref([]);
|
|
const getTree = async () => {
|
|
const res = await tree();
|
|
treeData.value = res;
|
|
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) => {
|
|
console.log(file);
|
|
const params = {
|
|
file: file,
|
|
categoryId: checkedTree.value[0],
|
|
};
|
|
await listUpload(params);
|
|
return false;
|
|
};
|
|
const importChange = () => {
|
|
reload();
|
|
};
|
|
onMounted(() => {
|
|
getTree();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.treeButton {
|
|
margin: 0 1% 1%;
|
|
}
|
|
</style>
|
|
|