|
@@ -8,7 +8,53 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="flex-1 page-wrap">
|
|
<div class="flex-1 page-wrap">
|
|
- <t-table
|
|
|
|
|
|
+ <t-enhanced-table
|
|
|
|
+ ref="tableRef"
|
|
|
|
+ v-model:expandedTreeNodes="expandedTreeNodes"
|
|
|
|
+ row-key="id"
|
|
|
|
+ :data="orgData"
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :tree="treeConfig"
|
|
|
|
+ :tree-expand-and-fold-icon="treeIcon"
|
|
|
|
+ bordered
|
|
|
|
+ >
|
|
|
|
+ <template #isRoot="{ col, row }">
|
|
|
|
+ {{ row[col.colKey] ? '根节点' : '子节点' }}
|
|
|
|
+ </template>
|
|
|
|
+ <template #enable="{ col, row }">
|
|
|
|
+ <status-tag :value="row[col.colKey]" type="enable"></status-tag>
|
|
|
|
+ </template>
|
|
|
|
+ <template #operate="{ row }">
|
|
|
|
+ <div class="table-operations">
|
|
|
|
+ <t-link
|
|
|
|
+ v-if="perm.BUTTON_Add"
|
|
|
|
+ theme="primary"
|
|
|
|
+ hover="color"
|
|
|
|
+ @click="handleAdd(row)"
|
|
|
|
+ >
|
|
|
|
+ 新增
|
|
|
|
+ </t-link>
|
|
|
|
+ <t-link
|
|
|
|
+ v-if="perm.LINK_Update"
|
|
|
|
+ theme="primary"
|
|
|
|
+ hover="color"
|
|
|
|
+ @click="handleEdit(row)"
|
|
|
|
+ >
|
|
|
|
+ 修改
|
|
|
|
+ </t-link>
|
|
|
|
+ <t-link
|
|
|
|
+ v-if="perm.LINK_Enable"
|
|
|
|
+ theme="primary"
|
|
|
|
+ hover="color"
|
|
|
|
+ @click="handleEnable(row)"
|
|
|
|
+ >
|
|
|
|
+ {{ enableFilter(!row.enable) }}
|
|
|
|
+ </t-link>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </t-enhanced-table>
|
|
|
|
+
|
|
|
|
+ <!-- <t-table
|
|
size="small"
|
|
size="small"
|
|
row-key="id"
|
|
row-key="id"
|
|
:columns="columns"
|
|
:columns="columns"
|
|
@@ -48,12 +94,9 @@
|
|
>
|
|
>
|
|
{{ enableFilter(!row.enable) }}
|
|
{{ enableFilter(!row.enable) }}
|
|
</t-link>
|
|
</t-link>
|
|
- <!-- <t-link theme="primary" hover="color" @click="handleDelete(row)">
|
|
|
|
- 删除
|
|
|
|
- </t-link> -->
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
- </t-table>
|
|
|
|
|
|
+ </t-table> -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<AddNodeDialog
|
|
<AddNodeDialog
|
|
@@ -66,8 +109,8 @@
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
-<script setup name="StructManage">
|
|
|
|
-import { computed, ref } from 'vue';
|
|
|
|
|
|
+<script setup lang="jsx" name="StructManage">
|
|
|
|
+import { computed, ref, reactive, nextTick } from 'vue';
|
|
import { MessagePlugin } from 'tdesign-vue-next';
|
|
import { MessagePlugin } from 'tdesign-vue-next';
|
|
import { useRequest } from 'vue-request';
|
|
import { useRequest } from 'vue-request';
|
|
import { getOrgStructList, toggleOrgNodeStatus } from '@/api/user';
|
|
import { getOrgStructList, toggleOrgNodeStatus } from '@/api/user';
|
|
@@ -75,10 +118,21 @@ import AddNodeDialog from './add-node-dialog.vue';
|
|
import { enableFilter } from '@/utils/filter';
|
|
import { enableFilter } from '@/utils/filter';
|
|
import { omit } from 'lodash';
|
|
import { omit } from 'lodash';
|
|
import usePermission from '@/hooks/usePermission';
|
|
import usePermission from '@/hooks/usePermission';
|
|
|
|
+import { ChevronRightIcon, ChevronDownIcon } from 'tdesign-icons-vue-next';
|
|
const { perm } = usePermission();
|
|
const { perm } = usePermission();
|
|
const showAddNodeDialog = ref(false);
|
|
const showAddNodeDialog = ref(false);
|
|
const curRow = ref({});
|
|
const curRow = ref({});
|
|
-
|
|
|
|
|
|
+const tableRef = ref();
|
|
|
|
+const treeConfig = reactive({
|
|
|
|
+ treeNodeColumnIndex: 0,
|
|
|
|
+ indent: 25,
|
|
|
|
+ expandTreeNodeOnClick: true,
|
|
|
|
+ defaultExpandAll: true,
|
|
|
|
+});
|
|
|
|
+const treeIcon = (h, { type, row }) => {
|
|
|
|
+ return type === 'expand' ? <ChevronRightIcon /> : <ChevronDownIcon />;
|
|
|
|
+};
|
|
|
|
+const expandedTreeNodes = ref([]);
|
|
const columns = [
|
|
const columns = [
|
|
{ colKey: 'name', title: '管理节点' },
|
|
{ colKey: 'name', title: '管理节点' },
|
|
{ colKey: 'isRoot', title: '类型', width: 100 },
|
|
{ colKey: 'isRoot', title: '类型', width: 100 },
|
|
@@ -95,9 +149,13 @@ const columns = [
|
|
const {
|
|
const {
|
|
data: orgData,
|
|
data: orgData,
|
|
loading: tableLoading,
|
|
loading: tableLoading,
|
|
- run,
|
|
|
|
|
|
+ runAsync: run,
|
|
} = useRequest(getOrgStructList);
|
|
} = useRequest(getOrgStructList);
|
|
-run();
|
|
|
|
|
|
+run().then(() => {
|
|
|
|
+ nextTick(() => {
|
|
|
|
+ tableRef.value?.expandAll();
|
|
|
|
+ });
|
|
|
|
+});
|
|
|
|
|
|
const tableData = computed(() => {
|
|
const tableData = computed(() => {
|
|
let orgList = [];
|
|
let orgList = [];
|