|
@@ -7,43 +7,39 @@
|
|
|
</t-input>
|
|
|
</div>
|
|
|
<div class="menu-table">
|
|
|
- <el-table border
|
|
|
+ <t-enhanced-table
|
|
|
:data="tableData"
|
|
|
+ :columns="tableColumns"
|
|
|
row-key="MenuId"
|
|
|
- :tree-props="{children:'Children'}"
|
|
|
+ :bordered="true"
|
|
|
+ :tree="{ childrenKey: 'Children' }"
|
|
|
+ :treeExpandAndFoldIcon="treeExpandIcon"
|
|
|
>
|
|
|
- <el-table-column v-for="column in tableColumns" :key="column.key"
|
|
|
- header-align="center"
|
|
|
- :align="column.key==='Name'?'':'center'"
|
|
|
- :prop="column.key"
|
|
|
- :label="column.label">
|
|
|
- <template #default="scope">
|
|
|
- <!-- 菜单名称 -->
|
|
|
- <div class="menu-name" v-if="column.key==='Name'">
|
|
|
- <span>{{scope.row[column.key]}}</span>
|
|
|
- </div>
|
|
|
- <!-- 图标 -->
|
|
|
- <div class="menu-icon" v-else-if="column.key==='IconPath'">
|
|
|
- <img :src="scope.row[column.key]" v-if="scope.row[column.key]" style="width:24px;height:24px;">
|
|
|
- <span v-else>-</span>
|
|
|
- </div>
|
|
|
- <!-- 状态 -->
|
|
|
- <div class="menu-status" v-else-if="column.key==='Hidden'">
|
|
|
- <span>{{scope.row[column.key]===0?'显示':'隐藏'}}</span>
|
|
|
- </div>
|
|
|
- <div v-else>
|
|
|
- <span>{{scope.row[column.key]}}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column align="center" prop="操作">
|
|
|
- <template #default="scope">
|
|
|
- <t-button variant="text" theme="primary" @click="handleModifyMenu('addNext',scope.row)">添加子项</t-button>
|
|
|
- <t-button variant="text" theme="primary" @click="handleModifyMenu('edit',scope.row)">编辑</t-button>
|
|
|
- <t-button variant="text" theme="primary" style="color:#FF0000;" @click="deleteMenu(scope.row)">删除</t-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <!-- 菜单名称 -->
|
|
|
+ <template #Name="{ row }">
|
|
|
+ <div class="menu-name">
|
|
|
+ <span>{{row.Name}}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 图标 -->
|
|
|
+ <template #IconPath="{ row }">
|
|
|
+ <div class="menu-icon">
|
|
|
+ <img :src="row.IconPath" v-if="row.IconPath" style="width:24px;height:24px;">
|
|
|
+ <span v-else>-</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 状态 -->
|
|
|
+ <template #Hidden="{ row }">
|
|
|
+ <div class="menu-status">
|
|
|
+ <span>{{row.Hidden===0?'显示':'隐藏'}}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #opt="{ row }">
|
|
|
+ <t-button variant="text" theme="primary" @click="handleModifyMenu('addNext',row)">添加子项</t-button>
|
|
|
+ <t-button variant="text" theme="primary" @click="handleModifyMenu('edit',row)">编辑</t-button>
|
|
|
+ <t-button variant="text" theme="primary" style="color:#FF0000;" @click="deleteMenu(row)">删除</t-button>
|
|
|
+ </template>
|
|
|
+ </t-enhanced-table>
|
|
|
</div>
|
|
|
<ModifyMenuDialog
|
|
|
:isShowMenuDialog="isShowMenuDialog"
|
|
@@ -57,26 +53,35 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup>
|
|
|
+<script setup lang="jsx">
|
|
|
import { ref, onMounted } from 'vue';
|
|
|
import { menuConfigInterface } from '@/api/modules/etaMenuApi';
|
|
|
import ModifyMenuDialog from './components/ModifyMenuDialog.vue';
|
|
|
-import { SearchIcon } from 'tdesign-icons-vue-next';
|
|
|
-import { ElTable, ElTableColumn } from 'element-plus';
|
|
|
-import 'element-plus/es/components/table/style/css';
|
|
|
+import { SearchIcon, ChevronRightIcon, ChevronDownIcon } from 'tdesign-icons-vue-next';
|
|
|
|
|
|
const Keyword = ref('');
|
|
|
const tableColumns = ref([
|
|
|
- { label: '菜单名称', key: 'Name' },
|
|
|
- { label: '图标', key: 'IconPath' },
|
|
|
- { label: '状态', key: 'Hidden' },
|
|
|
- { label: '创建时间', key: 'CreateTime' },
|
|
|
+ { title: '菜单名称', colKey: 'Name' },
|
|
|
+ { title: '图标', colKey: 'IconPath', align: 'center' },
|
|
|
+ { title: '状态', colKey: 'Hidden', align: 'center' },
|
|
|
+ { title: '创建时间', colKey: 'CreateTime', align: 'center' },
|
|
|
+ { title:'操作', colKey:'opt', align: 'center' }
|
|
|
]);
|
|
|
const tableData = ref([]);
|
|
|
const formData = ref({});
|
|
|
const openType = ref('add');
|
|
|
const isShowMenuDialog = ref(false);
|
|
|
|
|
|
+const treeExpandIcon = computed(() => {
|
|
|
+ // 自定义展开图标
|
|
|
+ return treeExpandAndFoldIconRender;
|
|
|
+});
|
|
|
+
|
|
|
+// 自定义展开图标组件
|
|
|
+const treeExpandAndFoldIconRender = (h, { type, row }) => {
|
|
|
+ return type === 'expand' ? <ChevronRightIcon /> : <ChevronDownIcon />;
|
|
|
+};
|
|
|
+
|
|
|
// 获取菜单数据
|
|
|
const getMenuData = async () => {
|
|
|
try {
|