williamet/cas_cloud_admin_i18n
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

尾部导航列表

Browse Source
This commit is contained in:
cxc
2022-07-22 09:34:04 +08:00
parent d1db4aa979
commit bc085ab1d3
3 changed files with 236 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/api/website/siteSet.js
View File

@ -80,18 +80,18 @@ export function agreementDelete(ids) {
}); });
} }
// 尾部导航栏信息 // 尾部导航栏列表
export function navigationList(data) { export function navigationList(params) {
return request({ return request({
url: "/admin/v1/sys/navigation", url: "/business/casNavigation/list",
method: "post", method: "get",
data, params,
}); });
} }
// 尾部导航栏添加 // 尾部导航栏添加
export function navigationAdd(data) { export function navigationAdd(data) {
return request({ return request({
url: "/admin/v1/sys/navigation/add", url: "/business/casNavigation",
method: "post", method: "post",
data, data,
}); });
@ -99,16 +99,15 @@ export function navigationAdd(data) {
// 尾部导航栏修改 // 尾部导航栏修改
export function navigationEdit(data) { export function navigationEdit(data) {
return request({ return request({
url: "/admin/v1/sys/navigation/edit", url: "/business/casNavigation",
method: "post", method: "put",
data, data,
}); });
} }
// 尾部导航栏删除 // 尾部导航栏删除
export function navigationDelete(data) { export function navigationDelete(ids) {
return request({ return request({
url: "/admin/v1/sys/navigation/delete", url: `/business/casNavigation/${ids}`,
method: "post", method: "delete",
data,
}); });
} }

10
src/views/website/siteSet/agreement/index.vue
View File

@ -68,7 +68,7 @@
</el-table-column> </el-table-column>
<el-table-column label="更新时间" align="center"> <el-table-column label="更新时间" align="center">
<template #default="{ row }"> <template #default="{ row }">
<span>{{ row.updated_at }}</span> <span>{{ row.updateTime }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@ -97,8 +97,8 @@
<pagination <pagination
v-show="total > 0" v-show="total > 0"
:total="total" :total="total"
:page.sync="queryParams.pageNum" v-model:page="queryParams.pageNum"
:limit.sync="queryParams.pageSize" v-model:limit="queryParams.pageSize"
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改对话框 --> <!-- 添加或修改对话框 -->
@ -120,8 +120,8 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="启用状态:" prop="status"> <el-form-item label="启用状态:" prop="status">
<el-radio v-model="form.status" :label="1">启用</el-radio> <el-radio v-model="form.status" label="1">启用</el-radio>
<el-radio v-model="form.status" :label="2">停用</el-radio> <el-radio v-model="form.status" label="2">停用</el-radio>
</el-form-item> </el-form-item>
<el-form-item label="导航名称:" prop="title"> <el-form-item label="导航名称:" prop="title">
<el-input v-model="form.title" placeholder="请输入导航名称" /> <el-input v-model="form.title" placeholder="请输入导航名称" />

342
src/views/website/siteSet/footer/index.vue
View File

@ -1,25 +1,36 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form <el-form
v-if="is_super"
:model="queryParams" :model="queryParams"
ref="queryForm" ref="queryFormRef"
v-show="showSearch" v-show="showSearch"
:inline="true" :inline="true"
@submit.native.prevent @submit.native.prevent
> >
<el-form-item label="所属站点" prop="tenant_id"> <el-form-item label="所属站点" prop="tenantId">
<SiteOptions v-model="queryParams" /> <el-select
v-model="queryParams.tenantId"
placeholder="请选择，支持搜索"
size="default"
filterable
>
<el-option
v-for="item in siteList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button <el-button
type="primary" type="primary"
icon="el-icon-search" icon="search"
size="mini" size="default"
@click="handleQuery" @click="handleQuery"
>搜索</el-button >搜索</el-button
> >
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery" <el-button icon="refresh" size="default" @click="resetQuery"
>重置</el-button >重置</el-button
> >
</el-form-item> </el-form-item>
@ -30,8 +41,8 @@
<el-button <el-button
type="primary" type="primary"
plain plain
icon="el-icon-plus" icon="plus"
size="mini" size="default"
@click="handleAdd" @click="handleAdd"
> >
新增 新增
@ -53,14 +64,14 @@
label="链接" label="链接"
align="center" align="center"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column label="站点" align="center">
prop="area" <template #default="{ row }">
label="站点" {{ siteList.find((el) => el.id === row.tenantId)?.name || "无" }}
align="center" </template>
></el-table-column> </el-table-column>
<el-table-column prop="updated_at" label="更新时间" align="center"> <el-table-column prop="updated_at" label="更新时间" align="center">
<template slot-scope="scope"> <template #default="{ row }">
<span>{{ formatTime(scope.row.updated_at) }}</span> <span>{{ row.updateTime }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@ -68,27 +79,27 @@
align="center" align="center"
class-name="small-padding fixed-width" class-name="small-padding fixed-width"
> >
<template slot-scope="scope"> <template #default="{ row }">
<el-button <el-button
size="mini" size="small"
type="text" type="text"
icon="el-icon-edit" icon="edit"
@click="handleUpdate(scope.row)" @click="handleUpdate(row)"
>修改</el-button >修改</el-button
> >
<el-button <el-button
size="mini" size="small"
type="text" type="text"
icon="el-icon-delete" icon="delete"
@click="handleDelete(scope.row)" @click="handleDelete(row)"
>删除</el-button >删除</el-button
> >
<el-button <el-button
v-if="scope.row.parent_id == ''" v-if="row.parentId == ''"
size="mini" size="small"
type="text" type="text"
icon="el-icon-plus" icon="plus"
@click="handleAdd(scope.row)" @click="handleAdd(row)"
>新增子导航</el-button >新增子导航</el-button
> >
</template> </template>
@ -96,18 +107,45 @@
</el-table> </el-table>
<!-- 添加或修改导航对话框 --> <!-- 添加或修改导航对话框 -->
<el-dialog :title="title" v-model="show" width="680px" append-to-body> <el-dialog
:title="title"
v-model="showEditDialog"
width="680px"
append-to-body
>
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px"> <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="所属站点:" prop="tenant_id"> <el-form-item label="所属站点:" prop="tenantId">
<SiteOptions v-model="form" /> <el-select
v-model="form.tenantId"
placeholder="请选择，支持搜索"
size="default"
filterable
>
<el-option
v-for="item in siteList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="上级导航" prop="parent_id"> <el-form-item label="上级导航" prop="parentId">
<treeselect <!-- <treeselect
v-model="form.parent_id" v-model="form.parentId"
:options="menuOptions" :options="menuOptions"
:normalizer="normalizer" :normalizer="normalizer"
:show-count="true" :show-count="true"
placeholder="选择上级导航" placeholder="选择上级导航"
/> -->
<TreeSelect
:objMap="{
value: 'id', // ID字段名
label: 'title', // 显示名称
children: 'children', // 子级字段名
}"
:options="menuOptions"
v-model:value="form.parentId"
placeholder="选择上级领域"
/> />
</el-form-item> </el-form-item>
<el-form-item label="导航名称" prop="title"> <el-form-item label="导航名称" prop="title">
@ -124,77 +162,70 @@
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script setup name="Footer">
<script>
import { import {
navigationList, navigationList,
navigationAdd, navigationAdd,
navigationEdit, navigationEdit,
navigationDelete, navigationDelete,
} from "@/api/website/siteSet"; } from "@/api/website/siteSet";
import Treeselect from "@riophae/vue-treeselect"; import { tenantSelect } from "@/api/subPlatform/tenant";
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import { ElMessage, ElMessageBox } from "element-plus";
import { cloneDeep } from "lodash";
import { toRefs } from "vue";
export default { const loading = ref(true); // 是否正在加载
components: { Treeselect }, const showSearch = ref(true); // 是否显示搜索栏
data() { const showEditDialog = ref(false);
return { const queryFormRef = ref(null);
is_super: this.$store.getters.is_super, const formRef = ref(null);
// 遮罩层 const siteList = ref([]);
loading: true, const menuOptions = ref([]);
// 显示搜索条件 const total = ref(0);
showSearch: true, const title = ref("");
// 导航表格树数据 const dataList = ref([]);
dataList: [], // 是否展开，默认全部折叠
// 导航树选项 const isExpandAll = ref(false);
menuOptions: [], // 重新渲染表格状态
// 弹出层标题 const refreshTable = ref(true);
title: "", const data = reactive({
// 是否显示弹出层
open: false,
// 是否展开，默认全部折叠
isExpandAll: false,
// 重新渲染表格状态
refreshTable: true,
// 查询参数 // 查询参数
queryParams: { queryParams: {
tenant_id: undefined, tenantId: undefined,
}, },
// 表单参数 // 表单参数
form: {}, form: {},
// 表单校验 // 表单校验
rules: { rules: {
tenant_id: [ tenantId: [
{ {
required: true, required: true,
message: "所属站点不能为空", message: "所属站点不能为空",
trigger: ["blur", "change"], trigger: ["blur", "change"],
}, },
], ],
title: [ title: [{ required: true, message: "导航名称不能为空", trigger: "blur" }],
{ required: true, message: "导航名称不能为空", trigger: "blur" }, link: [{ required: true, message: "导航链接不能为空", trigger: "blur" }],
],
link: [
{ required: true, message: "导航链接不能为空", trigger: "blur" },
],
}, },
}; });
}, const { queryParams, form, rules } = toRefs(data);
created() {
this.getList(); /** 查询导航列表 */
}, const getList = async () => {
methods: { loading.value = true;
/** 查询导航列表 */ const resp = await navigationList(queryParams.value);
getList() { getTreeselect(resp.data);
this.loading = true; dataList.value = resp.data;
navigationList(this.queryParams).then((response) => { loading.value = false;
this.getTreeselect(response.data); };
this.dataList = response.data;
this.loading = false; // 获取站点列表
}); const getSiteList = async () => {
}, const resp = await tenantSelect();
/** 转换导航数据结构 */ siteList.value = resp.rows;
normalizer(node) { };
/** 转换导航数据结构 */
const normalizer = (node) => {
if (node.children && !node.children.length) { if (node.children && !node.children.length) {
delete node.children; delete node.children;
} }
@ -203,94 +234,91 @@ export default {
label: node.title, label: node.title,
children: node.children, children: node.children,
}; };
}, };
/** 查询导航下拉树结构 */ /** 查询导航下拉树结构 */
getTreeselect(options) { const getTreeselect = (options) => {
const arr = JSON.parse(JSON.stringify(options)); // const arr = JSON.parse(JSON.stringify(options));
const arr = cloneDeep(options);
arr.forEach((item) => { arr.forEach((item) => {
delete item.children; delete item.children;
}); });
this.menuOptions = []; menuOptions.value = [];
const menu = { id: "", title: "主类目", children: [] }; const menu = { id: "", title: "主类目", children: [] };
menu.children = arr; menu.children = arr;
this.menuOptions.push(menu); menuOptions.value.push(menu);
}, };
// 取消按钮 // 取消按钮
cancel() { const cancel = () => {
this.open = false; showEditDialog.value = false;
this.reset(); reset();
}, };
// 表单重置 // 表单重置
reset() { const reset = () => {
this.form = { form.value = {
tenant_id: undefined, tenantId: undefined,
parent_id: undefined, parentId: undefined,
title: undefined, title: undefined,
link: undefined, link: undefined,
status: 1, status: 1,
}; };
this.resetForm("form"); if (formRef.value) {
}, formRef.value.resetFields();
/** 搜索按钮操作 */ }
handleQuery() { };
this.getList(); /** 搜索按钮操作 */
}, const handleQuery = () => {
/** 重置按钮操作 */ getList();
resetQuery() { };
this.resetForm("queryForm"); /** 重置按钮操作 */
this.handleQuery(); const resetQuery = () => {
}, if (queryFormRef.value) {
/** 新增按钮操作 */ queryFormRef.value.resetFields();
handleAdd(row) { }
this.reset(); handleQuery();
if (row != null && row.parent_id == "") { };
this.form.parent_id = row.id; /** 新增按钮操作 */
const handleAdd = (row) => {
reset();
if (row != null && row.parentId == "") {
form.value.parentId = row.id;
} else { } else {
this.form.parent_id = ""; form.value.parentId = "";
} }
this.open = true; showEditDialog.value = true;
this.title = "添加导航"; title.value = "添加导航";
}, };
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { const handleUpdate = (row) => {
this.reset(); reset();
this.form = Object.assign({}, row); form.value = Object.assign({}, row);
this.open = true; showEditDialog.value = true;
this.title = "修改导航"; title.value = "修改导航";
}, };
/** 提交按钮 */ /** 提交按钮 */
submitForm: function () { const submitForm = async () => {
this.$refs["form"].validate((valid) => { await formRef.value.validate();
if (valid) { if (form.value.id) {
if (this.form.id) { await navigationEdit(form.value);
navigationEdit(this.form).then((response) => { ElMessage.success("修改成功");
this.$modal.msgSuccess("修改成功"); showEditDialog.value = false;
this.open = false; getList();
this.getList();
});
} else { } else {
navigationAdd(this.form).then((response) => { await navigationAdd(form.value);
this.$modal.msgSuccess("新增成功"); ElMessage.success("新增成功");
this.open = false; showEditDialog.value = false;
this.getList(); getList();
});
} }
} };
}); /** 删除按钮操作 */
}, const handleDelete = (row) => {
/** 删除按钮操作 */ ElMessageBox.confirm(`是否确认删除编号为${row.id}的数据项？`)
handleDelete(row) { .then(async () => {
this.$modal await navigationDelete(row.id);
.confirm('是否确认删除编号为"' + row.id + '"的数据项？') getList();
.then(function () { ElMessage.success("删除成功");
return navigationDelete({ id: row.id });
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}) })
.catch(() => {}); .catch(() => {});
},
},
}; };
getList();
getSiteList();
</script> </script>