尾部导航列表

src/api/website/siteSet.js

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

src/views/website/siteSet/agreement/index.vue

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

src/views/website/siteSet/footer/index.vue

@@ -1,25 +1,36 @@
 <template>
   <div class="app-container">
     <el-form
-      v-if="is_super"
       :model="queryParams"
-      ref="queryForm"
+      ref="queryFormRef"
       v-show="showSearch"
       :inline="true"
       @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-button
           type="primary"
-          icon="el-icon-search"
+          icon="search"
-          size="mini"
+          size="default"
           @click="handleQuery"
           >搜索</el-button
         >
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+        <el-button icon="refresh" size="default" @click="resetQuery"
           >重置</el-button
         >
       </el-form-item>
@@ -30,8 +41,8 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
+          icon="plus"
-          size="mini"
+          size="default"
           @click="handleAdd"
         >
           新增
@@ -53,14 +64,14 @@
         label="链接"
         align="center"
       ></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">
-        <template slot-scope="scope">
+        <template #default="{ row }">
-          <span>{{ formatTime(scope.row.updated_at) }}</span>
+          <span>{{ row.updateTime }}</span>
         </template>
       </el-table-column>
       <el-table-column
@@ -68,27 +79,27 @@
         align="center"
         class-name="small-padding fixed-width"
       >
-        <template slot-scope="scope">
+        <template #default="{ row }">
           <el-button
-            size="mini"
+            size="small"
             type="text"
-            icon="el-icon-edit"
+            icon="edit"
-            @click="handleUpdate(scope.row)"
+            @click="handleUpdate(row)"
             >修改</el-button
           >
           <el-button
-            size="mini"
+            size="small"
             type="text"
-            icon="el-icon-delete"
+            icon="delete"
-            @click="handleDelete(scope.row)"
+            @click="handleDelete(row)"
             >删除</el-button
           >
           <el-button
-            v-if="scope.row.parent_id == ''"
+            v-if="row.parentId == ''"
-            size="mini"
+            size="small"
             type="text"
-            icon="el-icon-plus"
+            icon="plus"
-            @click="handleAdd(scope.row)"
+            @click="handleAdd(row)"
             >新增子导航</el-button
           >
         </template>
@@ -96,18 +107,45 @@
     </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-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 label="上级导航" prop="parent_id">
+        <el-form-item label="上级导航" prop="parentId">
-          <treeselect
+          <!-- <treeselect
-            v-model="form.parent_id"
+            v-model="form.parentId"
             :options="menuOptions"
             :normalizer="normalizer"
             :show-count="true"
             placeholder="选择上级导航"
+          /> -->
+          <TreeSelect
+            :objMap="{
+              value: 'id', // ID字段名
+              label: 'title', // 显示名称
+              children: 'children', // 子级字段名
+            }"
+            :options="menuOptions"
+            v-model:value="form.parentId"
+            placeholder="选择上级领域"
           />
         </el-form-item>
         <el-form-item label="导航名称" prop="title">
@@ -124,173 +162,163 @@
     </el-dialog>
   </div>
 </template>
-
+<script setup name="Footer">
-<script>
 import {
   navigationList,
   navigationAdd,
   navigationEdit,
   navigationDelete,
 } 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,
+  queryParams: {
-      // 是否展开，默认全部折叠
+    tenantId: undefined,
-      isExpandAll: false,
+  },
-      // 重新渲染表格状态
+  // 表单参数
-      refreshTable: true,
+  form: {},
-      // 查询参数
+  // 表单校验
-      queryParams: {
+  rules: {
-        tenant_id: undefined,
+    tenantId: [
+      {
+        required: true,
+        message: "所属站点不能为空",
+        trigger: ["blur", "change"],
       },
-      // 表单参数
+    ],
-      form: {},
+    title: [{ required: true, message: "导航名称不能为空", trigger: "blur" }],
-      // 表单校验
+    link: [{ required: true, message: "导航链接不能为空", trigger: "blur" }],
-      rules: {
-        tenant_id: [
-          {
-            required: true,
-            message: "所属站点不能为空",
-            trigger: ["blur", "change"],
-          },
-        ],
-        title: [
-          { required: true, message: "导航名称不能为空", trigger: "blur" },
-        ],
-        link: [
-          { required: true, message: "导航链接不能为空", trigger: "blur" },
-        ],
-      },
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询导航列表 */
-    getList() {
-      this.loading = true;
-      navigationList(this.queryParams).then((response) => {
-        this.getTreeselect(response.data);
-        this.dataList = response.data;
-        this.loading = false;
-      });
-    },
-    /** 转换导航数据结构 */
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children;
-      }
-      return {
-        id: node.id,
-        label: node.title,
-        children: node.children,
-      };
-    },
-    /** 查询导航下拉树结构 */
-    getTreeselect(options) {
-      const arr = JSON.parse(JSON.stringify(options));
-      arr.forEach((item) => {
-        delete item.children;
-      });
-      this.menuOptions = [];
-      const menu = { id: "", title: "主类目", children: [] };
-      menu.children = arr;
-      this.menuOptions.push(menu);
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        tenant_id: undefined,
-        parent_id: undefined,
-        title: undefined,
-        link: undefined,
-        status: 1,
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd(row) {
-      this.reset();
-      if (row != null && row.parent_id == "") {
-        this.form.parent_id = row.id;
-      } else {
-        this.form.parent_id = "";
-      }
-      this.open = true;
-      this.title = "添加导航";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      this.form = Object.assign({}, row);
-      this.open = true;
-      this.title = "修改导航";
-    },
-    /** 提交按钮 */
-    submitForm: function () {
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-          if (this.form.id) {
-            navigationEdit(this.form).then((response) => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            navigationAdd(this.form).then((response) => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      this.$modal
-        .confirm('是否确认删除编号为"' + row.id + '"的数据项？')
-        .then(function () {
-          return navigationDelete({ id: row.id });
-        })
-        .then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        })
-        .catch(() => {});
-    },
   },
+});
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询导航列表 */
+const getList = async () => {
+  loading.value = true;
+  const resp = await navigationList(queryParams.value);
+  getTreeselect(resp.data);
+  dataList.value = resp.data;
+  loading.value = false;
 };
+
+// 获取站点列表
+const getSiteList = async () => {
+  const resp = await tenantSelect();
+  siteList.value = resp.rows;
+};
+/** 转换导航数据结构 */
+const normalizer = (node) => {
+  if (node.children && !node.children.length) {
+    delete node.children;
+  }
+  return {
+    id: node.id,
+    label: node.title,
+    children: node.children,
+  };
+};
+/** 查询导航下拉树结构 */
+const getTreeselect = (options) => {
+  // const arr = JSON.parse(JSON.stringify(options));
+  const arr = cloneDeep(options);
+  arr.forEach((item) => {
+    delete item.children;
+  });
+  menuOptions.value = [];
+  const menu = { id: "", title: "主类目", children: [] };
+  menu.children = arr;
+  menuOptions.value.push(menu);
+};
+// 取消按钮
+const cancel = () => {
+  showEditDialog.value = false;
+  reset();
+};
+// 表单重置
+const reset = () => {
+  form.value = {
+    tenantId: undefined,
+    parentId: undefined,
+    title: undefined,
+    link: undefined,
+    status: 1,
+  };
+  if (formRef.value) {
+    formRef.value.resetFields();
+  }
+};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  if (queryFormRef.value) {
+    queryFormRef.value.resetFields();
+  }
+  handleQuery();
+};
+/** 新增按钮操作 */
+const handleAdd = (row) => {
+  reset();
+  if (row != null && row.parentId == "") {
+    form.value.parentId = row.id;
+  } else {
+    form.value.parentId = "";
+  }
+  showEditDialog.value = true;
+  title.value = "添加导航";
+};
+/** 修改按钮操作 */
+const handleUpdate = (row) => {
+  reset();
+  form.value = Object.assign({}, row);
+  showEditDialog.value = true;
+  title.value = "修改导航";
+};
+/** 提交按钮 */
+const submitForm = async () => {
+  await formRef.value.validate();
+  if (form.value.id) {
+    await navigationEdit(form.value);
+    ElMessage.success("修改成功");
+    showEditDialog.value = false;
+    getList();
+  } else {
+    await navigationAdd(form.value);
+    ElMessage.success("新增成功");
+    showEditDialog.value = false;
+    getList();
+  }
+};
+/** 删除按钮操作 */
+const handleDelete = (row) => {
+  ElMessageBox.confirm(`是否确认删除编号为${row.id}的数据项？`)
+    .then(async () => {
+      await navigationDelete(row.id);
+      getList();
+      ElMessage.success("删除成功");
+    })
+    .catch(() => {});
+};
+getList();
+getSiteList();
 </script>