131 lines
3.5 KiB
Vue
131 lines
3.5 KiB
Vue
<template>
|
|
<div class="layout-padding">
|
|
<div class="layout-padding-auto layout-padding-view">
|
|
<el-row shadow="hover" v-show="showSearch" class="ml10">
|
|
<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="filter">
|
|
<el-form-item prop="deptName" :label="$t('sysdept.name')">
|
|
<el-input :placeholder="$t('sysdept.inputdeptNameTip')" style="max-width: 180px" v-model="state.queryForm.deptName"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button icon="search" type="primary" @click="filter">
|
|
{{ $t('common.queryBtn') }}
|
|
</el-button>
|
|
<el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-row>
|
|
<el-row>
|
|
<div class="mb8" style="width: 100%">
|
|
<el-button icon="folder-add" type="primary" class="top-right-btn" v-if="!defaultTreeViewRef" v-auth="'sys_dept_add'" @click="handleAdd">
|
|
{{ $t('common.addBtn') }}
|
|
</el-button>
|
|
<el-button plain icon="upload-filled" type="primary" class="ml10" @click="excelUploadRef.show()">
|
|
{{ $t('common.importBtn') }}
|
|
</el-button>
|
|
<el-button @click="handleExpand"> {{ $t('common.expandBtn') }}</el-button>
|
|
<right-toolbar
|
|
v-model:showSearch="showSearch"
|
|
:export="'sys_dept_add'"
|
|
@exportExcel="exportExcel"
|
|
class="ml10"
|
|
style="float: right; margin-right: 20px"
|
|
@queryTable="getDataList"
|
|
>
|
|
<el-tooltip class="item" effect="dark" :content="$t('queryTree.view')" placement="top">
|
|
<el-button circle icon="Grid" @click="handleView"></el-button>
|
|
</el-tooltip>
|
|
</right-toolbar>
|
|
</div>
|
|
</el-row>
|
|
|
|
<tree-view ref="treeViewRef" v-if="defaultTreeViewRef" />
|
|
<table-view ref="tableViewRef" v-if="!defaultTreeViewRef" />
|
|
|
|
<upload-excel
|
|
ref="excelUploadRef"
|
|
:title="$t('sysdept.importTip')"
|
|
url="/admin/dept/import"
|
|
temp-url="/admin/sys-file/local/file/dept.xlsx"
|
|
@refreshDataList="getDataList"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" name="systemDept" setup>
|
|
import { downBlobFile } from '/@/utils/other';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const TreeView = defineAsyncComponent(() => import('./tree-view.vue'));
|
|
const TableView = defineAsyncComponent(() => import('./table-view.vue'));
|
|
|
|
const { t } = useI18n();
|
|
|
|
// 默认树视图展示
|
|
const defaultTreeViewRef = ref(true);
|
|
const treeViewRef = ref();
|
|
const tableViewRef = ref();
|
|
const excelUploadRef = ref();
|
|
const showSearch = ref(true);
|
|
const isExpand = ref(false);
|
|
const queryRef = ref();
|
|
|
|
const state = reactive({
|
|
queryForm: {
|
|
deptName: '',
|
|
},
|
|
});
|
|
|
|
/**
|
|
* 过滤节点
|
|
*/
|
|
const filter = () => {
|
|
if (defaultTreeViewRef.value) {
|
|
treeViewRef.value.filter(state.queryForm.deptName);
|
|
} else {
|
|
tableViewRef.value.state.queryForm.deptName = state.queryForm.deptName;
|
|
tableViewRef.value.getDataList();
|
|
}
|
|
};
|
|
|
|
const handleAdd = () => {
|
|
tableViewRef.value.handleAdd();
|
|
};
|
|
const handleView = () => {
|
|
defaultTreeViewRef.value = !defaultTreeViewRef.value;
|
|
};
|
|
|
|
/**
|
|
* 处理展开/折叠树
|
|
*/
|
|
const handleExpand = () => {
|
|
if (defaultTreeViewRef.value) {
|
|
treeViewRef.value.handleExpand();
|
|
} else {
|
|
tableViewRef.value.handleExpand();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 导出Excel
|
|
*/
|
|
const exportExcel = () => {
|
|
downBlobFile('/admin/dept/export', state.queryForm, 'dept.xlsx');
|
|
};
|
|
|
|
const getDataList = () => {
|
|
if (defaultTreeViewRef.value) {
|
|
treeViewRef.value.getOrgData();
|
|
} else {
|
|
tableViewRef.value.getDataList();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 重置查询条件
|
|
*/
|
|
const resetQuery = () => {
|
|
queryRef.value.resetFields();
|
|
};
|
|
</script>
|