<template>
|
<div class="inquire">
|
<el-form :model="queryFormdata" :inline="true">
|
<el-form-item label="菜单名称">
|
<el-input v-model="queryFormdata.name" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="queryInfo()" icon="el-icon-search"
|
>查询
|
</el-button>
|
</el-form-item>
|
<br />
|
</el-form>
|
</div>
|
<div>
|
<el-table
|
:data="menuTable"
|
style="width: 100%"
|
row-key="id"
|
border
|
height="75vh"
|
stripe
|
fixed
|
fit
|
>
|
<el-table-column prop="name" label="菜单名称" />
|
<el-table-column
|
prop="menuType"
|
:formatter="stateFormat"
|
label="菜单类型"
|
/>
|
<el-table-column prop="component" label="组件" />
|
<el-table-column prop="url" label="路径" />
|
<el-table-column prop="sortNo" label="顺序" />
|
<el-table-column prop="hidden" label="是否显示" align="center">
|
<template #default="scope">
|
<el-switch
|
v-model="scope.row.hidden"
|
:active-value="false"
|
:inactive-value="true"
|
active-text="显示"
|
inactive-text="隐藏"
|
@change="handleStatusChange(scope.row)"
|
></el-switch>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
import { ref, reactive, getCurrentInstance } from "vue";
|
import { MenuListTree, MenuUpdate } from "@/api/menu";
|
|
export default {
|
name: "Menu",
|
setup() {
|
const { proxy } = getCurrentInstance();
|
const handleStatusChange = async (row) => {
|
MenuUpdate(row)
|
.then((data) => {
|
proxy.$message({
|
message: data.message,
|
type: "success",
|
});
|
queryInfo();
|
})
|
.catch((err) => {
|
proxy.$message({
|
message: err.status,
|
type: "error",
|
});
|
});
|
};
|
const menuTable = ref([]);
|
const queryFormdata = reactive({
|
name: "",
|
});
|
const queryInfo = async () => {
|
let name = queryFormdata.name.trim();
|
let searchData = reactive({});
|
if (name != "") {
|
searchData = {
|
column: "createTime",
|
order: "desc",
|
name: queryFormdata.name.trim(),
|
_t: new Date().getTime(),
|
};
|
} else {
|
searchData = {
|
column: "createTime",
|
order: "desc",
|
_t: new Date().getTime(),
|
};
|
}
|
const data = await MenuListTree(searchData);
|
menuTable.value = data.result;
|
};
|
const stateFormat = (row) => {
|
if (row.menuType == 0) {
|
return "一级菜单";
|
} else {
|
return "子菜单";
|
}
|
};
|
queryInfo();
|
return {
|
queryFormdata,
|
queryInfo,
|
menuTable,
|
stateFormat,
|
handleStatusChange,
|
};
|
},
|
};
|
</script>
|
|
<style scoped>
|
.el-switch /deep/ .is-active {
|
background-color: transparent !important;
|
}
|
</style>
|
