138 lines
3.5 KiB
Vue
138 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, "部门管理.xlsx")
|
|
}
|
|
|
|
const getDataList = () => {
|
|
if (defaultTreeViewRef.value) {
|
|
treeViewRef.value.getOrgData()
|
|
} else {
|
|
tableViewRef.value.getDataList()
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 重置查询条件
|
|
*/
|
|
const resetQuery = () => {
|
|
queryRef.value.resetFields()
|
|
}
|
|
</script>
|