12

src/components/tableTemp/index.vue

@@ -48,11 +48,10 @@
       :sortable="items.needSort ? items.needSort : tableColumnProperty.sortable"
       :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
       :align="items.align ? items.align : tableColumnProperty.align"
-      :header-align="
-        items.headerAlign ? items.headerAlign : tableColumnProperty.headerAlign
-      "
+      :header-align="items.headerAlign ? items.headerAlign : tableColumnProperty.headerAlign"
       :label-class-name="items.lableClass ? items.lableClass : ''"
       :class-name="items.columnClassName"
+      :fixed="items.fixed?items.fixed:false"
     >
       <template #default="scope">
         <!-- 枚举值则为 items.key+'-enum' -->
@@ -247,6 +246,8 @@ const table = ref<InstanceType<typeof ElTable> | null>(null)
 defineExpose({
   cellClass,
   table,
+  tableRowClassName,
+  cellClassName
 })
 </script>
 
@@ -310,7 +311,7 @@ defineExpose({
       color: #2d67e3;
       cursor: pointer;
     }
-  
+
 }
 :deep.el-table--striped
   .el-table__body

src/getMenu.ts

@@ -1,85 +1,151 @@
-import router, { asyncRoutes } from '@/router'
-import settings from './settings'
-import { getToken, setToken, TokenKey } from '@/utils/auth'
-import NProgress from 'nprogress'
-NProgress.configure({ showSpinner: false }) // NProgress Configuration
-import 'nprogress/nprogress.css'
-import getPageTitle from '@/utils/getPageTitle'
-import { RouterRowTy } from '~/router'
-import { useUserStore } from '@/store/user'
-import { usePermissionStore } from '@/store/permission'
-import Layout from '@/layout'
-import { setTree } from '@/utils/validate'
-import * as _ from 'lodash'
-const whiteList = ['/login', '/404', '/401'] // no redirect whitelist
+import router, { asyncRoutes } from "@/router";
+import settings from "./settings";
+import { getToken, setToken, TokenKey } from "@/utils/auth";
+import NProgress from "nprogress";
+NProgress.configure({ showSpinner: false }); // NProgress Configuration
+import "nprogress/nprogress.css";
+import getPageTitle from "@/utils/getPageTitle";
+import { RouterRowTy } from "~/router";
+import { useUserStore } from "@/store/user";
+import { usePermissionStore } from "@/store/permission";
+import Layout from "@/layout";
+import { setTree } from "@/utils/validate";
+import * as _ from "lodash";
+const whiteList = ["/login", "/404", "/401"]; // no redirect whitelist
 router.beforeEach(async (to: any, from, next: any) => {
   // start progress bar
-  if (settings.isNeedNprogress) NProgress.start()
+  if (settings.isNeedNprogress) NProgress.start();
   // set page title
-  document.title = getPageTitle(to.meta.title)
-  if (!settings.isNeedLogin) setToken(TokenKey, settings.tmpToken)
-  const hasToken: string | null = getToken(TokenKey)
+  document.title = getPageTitle(to.meta.title);
+  if (!settings.isNeedLogin) setToken(TokenKey, settings.tmpToken);
+  const hasToken: string | null = getToken(TokenKey);
 
-  const userStore = useUserStore()
-  const permissionStore = usePermissionStore()
+  const userStore = useUserStore();
+  const permissionStore = usePermissionStore();
   if (hasToken) {
-    if (to.path === '/login') {
+    if (to.path === "/login") {
       // if is logged in, redirect to the home page
-      next({ path: '/' })
+      next({ path: "/" });
     } else {
       //judge isGetUserInfo
-      const isGetUserInfo: boolean = permissionStore.isGetUserInfo
+      const isGetUserInfo: boolean = permissionStore.isGetUserInfo;
       if (isGetUserInfo) {
-        next()
+        next();
       } else {
         try {
-          let accessRoutes: any = []
+          let accessRoutes: any = [];
           if (settings.isNeedLogin) {
             // get user info
             // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
-            await userStore.getInfo()
-            const treeData: any = await userStore.getMenuInfo()
-            const treeMenu = setTree(treeData, 'up_auth_id', 'auth_id')
-            const dataMenu = _.unionBy(treeMenu, 'auth_id')
-            const menus = parseMenu(dataMenu)
+            await userStore.getInfo();
+            const treeData: any = await userStore.getMenuInfo();
+            const menusArray = parseMenuItem(treeData);
+            const treeMenu = setTree(menusArray, "up_auth_id", "auth_id");
+            const dataMenu = _.unionBy(treeMenu, "auth_id");
+            const menus = parseMenu(dataMenu);
+            console.log(menus);
             // const { roles }: any = await userStore.getInfo()
             // accessRoutes = await permissionStore.generateRoutes(roles)
-            accessRoutes = menus
+            accessRoutes = menus;
           } else {
-            accessRoutes = asyncRoutes
+            accessRoutes = asyncRoutes;
           }
           // setting constRouters and accessRoutes to vuex , in order to sideBar for using
-          permissionStore.M_routes(accessRoutes)
+          permissionStore.M_routes(accessRoutes);
           // dynamically add accessible routes
           //router4 addRoutes destroyed
           accessRoutes.forEach((route: RouterRowTy) => {
-            router.addRoute(route)
-          })
+            router.addRoute(route);
+          });
           //already get userInfo
-          permissionStore.M_isGetUserInfo(true)
+          permissionStore.M_isGetUserInfo(true);
           // hack method to ensure that addRoutes is complete
           // set the replace: true, so the navigation will not leave a history record
-          next({ ...to, replace: true })
+          next({ ...to, replace: true });
         } catch (err) {
-          console.log(err)
-          await userStore.resetState()
-          next(`/login?redirect=${to.path}`)
-          if (settings.isNeedNprogress) NProgress.done()
+          console.log(err);
+          await userStore.resetState();
+          next(`/login?redirect=${to.path}`);
+          if (settings.isNeedNprogress) NProgress.done();
         }
       }
     }
   } else {
     if (whiteList.indexOf(to.path) !== -1) {
-      next()
+      next();
     } else {
-      next(`/login?redirect=${to.path}`)
-      if (settings.isNeedNprogress) NProgress.done()
+      next(`/login?redirect=${to.path}`);
+      if (settings.isNeedNprogress) NProgress.done();
     }
   }
-})
+});
+
+function parseMenuItem(data) {
+  const menus: any = [];
+  data.map(item=>{
+    if (item.show_type == 1) {
+      if (item.up_auth_id == "1568") {
+        menus.push(
+          {
+            auth_id:item.auth_id,
+            up_auth_id:item.up_auth_id,
+            path : item.route_info,
+            name : item.auth_ident,
+            meta : {
+              title: item.auth_name,
+              elSvgIcon: item.show_icon ?? "Fold",
+              show_index: item.show_index,
+              qid: item.queryTemplateID,
+            },
+            component:Layout,
+            hidden : !item.is_show
+          }
+        )
+      } else {
+        menus.push(
+          {
+            auth_id:item.auth_id,
+            up_auth_id:item.up_auth_id,
+            path : item.route_info,
+            name : item.auth_ident,
+            meta : {
+              title: item.auth_name,
+              elSvgIcon: item.show_icon ?? "Fold",
+              show_index: item.show_index,
+              qid: item.queryTemplateID,
+            },
+            component:{ render: () => h(resolveComponent("router-view")) },
+            hidden : !item.is_show
+          }
+        )
+      }
+    } else if (item.show_type == 2) {
+      menus.push(
+        {
+          auth_id:item.auth_id,
+          up_auth_id:item.up_auth_id,
+          path : item.route_info,
+          name : item.auth_ident,
+          meta : {
+            title: item.auth_name,
+            elSvgIcon: item.show_icon ?? "Fold",
+            show_index: item.show_index,
+            qid: item.queryTemplateID,
+          },
+          component:() => import("./views" + item.file_link),
+          hidden : !item.is_show
+        }
+      )
+    }
+
+  })
+
+  return menus
+}
 
 function parseItem(item) {
-  const menus: any = []
+  console.log(item);
+  const menus: any = [];
   if (!item.children) {
     menus.push({
       path: item.route_info,
@@ -87,49 +153,49 @@ function parseItem(item) {
       name: item.auth_ident,
       meta: {
         title: item.auth_name,
-        elSvgIcon: item.show_icon ?? 'Fold',
+        elSvgIcon: item.show_icon ?? "Fold",
         show_index: item.show_index,
         qid: item.queryTemplateID,
       },
-    })
+    });
   } else if (item.children && item.children.length <= 1) {
-    const datas = item.children
-    const arrs: any = []
-    datas.forEach((p) => {
-      arrs.push({
-        path: p.route_info,
-        component: () => import('./views' + p.file_link),
-        name: p.auth_ident,
-        meta: {
-          title: p.auth_name,
-        },
-      })
-    })
     menus.push({
       path: item.route_info,
       component: Layout,
       name: item.auth_ident,
       meta: {
         title: item.auth_name,
-        elSvgIcon: item.show_icon ?? 'Fold',
+        elSvgIcon: item.show_icon ?? "Fold",
         show_index: item.show_index,
         qid: item.queryTemplateID,
       },
-      children: arrs,
-    })
+      children: [
+        {
+          path: item.route_info,
+          component: () => import("@/views" + item.file_link),
+          name: item.auth_ident,
+          meta: {
+            title: item.auth_name,
+            elSvgIcon: item.show_icon ?? "Fold",
+            show_index: item.show_index,
+            qid: item.queryTemplateID,
+          },
+        },
+      ],
+    });
   } else {
-    const datas = item.children
-    const arrs: any = []
-    datas.forEach((p) => {
+    const datas = item.children;
+    const arrs: any = [];
+    datas.forEach((item, ci) => {
       arrs.push({
-        path: p.route_info,
-        component: () => import('./views' + p.file_link),
-        name: p.auth_ident,
+        path: item.route_info,
+        component: () => import("./views" + item.file_link),
+        name: item.auth_ident + ci,
         meta: {
-          title: p.auth_name,
+          title: item.auth_name,
         },
-      })
-    })
+      });
+    });
     menus.push({
       path: item.route_info,
       component: Layout,
@@ -138,7 +204,7 @@ function parseItem(item) {
         show_index: item.show_index,
         qid: item.queryTemplateID,
         title: item.auth_name,
-        elSvgIcon: item.show_icon ?? 'Fold',
+        elSvgIcon: item.show_icon ?? "Fold",
       },
       children: arrs,
       // children: [
@@ -156,47 +222,48 @@ function parseItem(item) {
       //     children: arrs,
       //   },
       // ],
-    })
+    });
   }
-  return menus
+  return menus;
 }
 
 function parseMenu(arr: Array<any>) {
-  const menus: any = []
-  arr.forEach((item) => {
-    const res = parseItem(item)
-    menus.push(res)
-  })
-  const newMenus = menus.flat()
+  const menus: any =arr;
+  console.log(arr);
+  // arr.forEach((item) => {
+  //   const res = parseItem(item);
+  //   menus.push(res);
+  // });
+  const newMenus = menus.flat();
   newMenus.push({
-    path: '/userManagement',
+    path: "/userManagement",
     component: Layout,
-    name: 'UserManagement',
-    redirect: '/userManagement/permission',
+    name: "UserManagement",
+    redirect: "/userManagement/permission",
     //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
-    meta: { title: '权限管理', elSvgIcon: 'Avatar', show_index: 2 },
+    meta: { title: "权限管理", elSvgIcon: "Avatar", show_index: 2 },
     children: [
       {
-        path: '/userManagement/permission',
-        name: 'Permission',
-        meta: { title: '权限项管理', elSvgIcon: 'Avatar' },
-        component: () => import('@/views/userManagement/permission/index.vue'),
+        path: "/userManagement/permission",
+        name: "Permission",
+        meta: { title: "权限项管理", elSvgIcon: "Avatar" },
+        component: () => import("@/views/userManagement/permission/index.vue"),
       },
     ],
-  })
+  });
   const allMenus = newMenus.length
     ? newMenus.sort((a, b) => a.meta.show_index - b.meta.show_index)
-    : []
+    : [];
   allMenus.push({
-    path: '/:pathMatch(.*)',
-    redirect: '/404',
+    path: "/:pathMatch(.*)",
+    redirect: "/404",
     hidden: true,
-  })
-  allMenus[0].redirect = allMenus[0].path
-  allMenus[0].path = '/'
-  return allMenus
+  });
+  allMenus[0].redirect = allMenus[0].path;
+  allMenus[0].path = "/";
+  return allMenus;
 }
 
 router.afterEach(() => {
-  if (settings.isNeedNprogress) NProgress.done()
-})
+  if (settings.isNeedNprogress) NProgress.done();
+});

src/router/index.ts

@@ -49,13 +49,13 @@ export const asyncRoutes: RouterTy = [
 ];
 
 // 插入路由
-routesPush(
-  [
-    ...routesOne,
-    ...routesTwo,
-  ],
-  asyncRoutes
-);
+// routesPush(
+//   [
+//     ...routesOne,
+//     ...routesTwo,
+//   ],
+//   asyncRoutes
+// );
 
 const router: Router = createRouter({
   history: createWebHashHistory(),

src/views/templatePage/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>

src/views/templatePage/page/index.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="airportInfo scroll-y">
+    <div class="wrap">
+      <Minheader :is-auth="true" :is-statuser="true" @addForm="addForm">
+        <template #header>
+          <div class="status flex-wrap">
+            <div class="manageTitle">{{pageTitle}}</div>
+          </div>
+        </template></Minheader
+      >
+      <div class="app-containers">
+        <DataTable
+          :tableHeader="tableCols"
+          :tableData="tableData"
+          :tableBtnGroup="tableBtnGroup"
+          :tableProperty="{ rowKey: 'ID' }"
+          @btnClick="btnClick"
+        />
+      </div>
+      <Dialog
+        :flag="flag"
+        :type="type"
+        :msgTitle="msgTitle"
+        @resetForm="resetForm"
+        @delRest="delRest"
+        @submitForm="submitForm"
+        @delRemove="delRemove"
+      >
+        <div class="diacont">
+          <el-form
+            :model="tableForm"
+            :rules="formRules"
+            ref="messageTemplateForm"
+          >
+            <el-row :gutter="24">
+              <el-col>
+                <el-form-item
+                  label="消息标题"
+                  size="default"
+                  prop="newsTitle"
+                  :rules="formRules.isNotNull"
+                >
+                  <el-input
+                    v-model="tableForm.newsTitle"
+                    placeholder="请输入名称"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item
+                  label="消息内容"
+                  size="default"
+                  prop="newContent"
+                  :rules="formRules.isNotNull"
+                >
+                  <el-input
+                    type="textarea"
+                    v-model="tableForm.newContent"
+                    placeholder="请输入消息内容"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+      </Dialog>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import DataTable from "@/components/tableTemp/index.vue";
+import Minheader from "@/components/minheader/index.vue";
+import Dialog from "@/components/dialog/index.vue";
+import { ref,onMounted } from "vue";
+import { Query, GeneralDataReception } from "@/api/webApi";
+import { ElMessage } from "element-plus";
+const formRules = useElement().formRules;
+const page = ref<number>(0); //分页参数
+const dataContent = ref<object>({});
+const noMore = ref<Boolean>(false);
+const rowTitle = ref<String>("");
+const tableCols = ref([]); //表头数据
+const serviceId = ref<String>("");
+const tableObj = ref({}); //增删改数据缓存
+const flag = ref<Boolean>(false); //弹窗开关
+const type = ref<String>(""); //判断是否删除
+const msgTitle = ref<String>("新增消息模板"); //弹窗标题
+const tableColsCopys = reactive<Object>({}); //弹窗
+const tempID = ref("");
+const pageTitle = ref<String>("");
+const tableForm = reactive({
+  newsId: "",
+  newsTitle: "",
+  newContent: "",
+  event: "",
+}); //弹窗内容
+//列表
+const tableData = ref([]);
+//表头
+const state = reactive({
+  list: [
+    { label: "名称", key: "name" },
+    { label: "描述", key: "china" },
+  ],
+  listLoading: true,
+});
+const tableBtnGroup = ref([
+  {
+    name: "编辑",
+    className: "editBtn",
+    param: 2,
+  },
+  {
+    name: "删除",
+    className: "delBtn",
+    param: 3,
+  },
+]);
+//新增
+const addForm = () => {
+  msgTitle.value = "新增消息模板";
+  flag.value = true;
+  tableForm.event = 1;
+  type.value = "";
+};
+//取消
+const resetForm = () => {
+  flag.value = false;
+  tableForm.newsId = "";
+  tableForm.newsTitle = "";
+  tableForm.newContent = "";
+};
+//编辑
+// const editDialog = (data) => {
+//   msgTitle.value = "编辑航司信息维护";
+//   flag.value = true;
+//   type.value = "";
+//   tableForm.name = data.name;
+//   tableForm.china = data.china;
+//   tableForm.englin = data.englin;
+//   tableForm.two = data.two;
+//   tableForm.three = data.three;
+//   tableForm.text = data.text;
+// };
+//编辑-删除
+const btnClick = (row, index, param) => {
+  if (param === 2) {
+    msgTitle.value = "编辑消息模板";
+    flag.value = true;
+    type.value = "";
+    tableForm.event = 2;
+    tableForm.newsId = index.newsId;
+    tableForm.newsTitle = index.newsTitle;
+    tableForm.newContent = index.newContent;
+  } else if (param === 3) {
+    msgTitle.value = "删除消息模板";
+    flag.value = true;
+    type.value = "del";
+    tableForm.event = 3;
+    tableForm.newsId = index.newsId;
+    tableForm.newsTitle = index.newsTitle;
+    tableForm.newContent = index.newContent;
+  } else if (param === 4) {
+  }
+};
+//删除
+const eleDialog = () => {
+  msgTitle.value = "删除消息模板";
+  flag.value = true;
+  type.value = "del";
+};
+const delRemove = () => {
+  tableForm.event = 3;
+  generalDataReception(tableForm);
+};
+//删除
+const delRest = () => {
+  flag.value = false;
+};
+//获取表格数据
+const getQuery = async () => {
+  console.log(tempID.value)
+  try {
+    const { code, returnData } = await Query({
+      id: tempID.value,
+      needPage: ++page.value,
+      dataContent: Object.values(dataContent.value),
+    });
+    if (code === "0") {
+      if (returnData.listValues.length === 0) {
+        page.value--;
+        noMore.value = true;
+      }
+      const titleColumn = returnData.columnSet.find(
+        (item) => item.needShow === 1
+      );
+      if (titleColumn) {
+        rowTitle.value = titleColumn.columnName;
+      }
+      tableData.value.push(...returnData.listValues);
+      tableCols.value = returnData.columnSet;
+      tableCols.value.forEach((element) => {
+        element.label = element.columnLabel;
+        element.key = element.columnName;
+        // if (element.columnName === "queryTemplate") {
+        //   element.width = "300px";
+        // }
+      });
+      serviceId.value = returnData.submitID;
+    } else {
+      page.value--;
+    }
+  } catch (error) {
+    page.value--;
+  }
+};
+//确认提交
+const messageTemplateForm: any = ref(null);
+const submitForm = () => {
+  messageTemplateForm.value.validate((valid: any) => {
+    if (valid) {
+      generalDataReception(tableForm);
+    } else {
+      return false;
+    }
+  });
+};
+const resetTable = () => {
+  page.value = 0;
+  noMore.value = false;
+  tableData.value = [];
+};
+//新增-编辑-删除
+const generalDataReception = async (data) => {
+  try {
+    data = {
+      ...data,
+    };
+    const { code } = await GeneralDataReception({
+      serviceId: serviceId.value,
+      dataContent: JSON.stringify(data),
+    });
+    if (code == 0) {
+      ElMessage.success(`操作成功`);
+      // this.$message.success("操作成功");
+      resetTable();
+      getQuery();
+      resetForm();
+      flag.value = false;
+      // rmFlag.value = false;
+      tableObj.value = {};
+      // this.$router.go(0);
+    } else {
+      ElMessage.error(`操作失败`);
+      // this.$message.error("操作失败");
+      // this.flag = false;
+      // this.rmFlag = false;
+      tableObj.value = {};
+      resetForm();
+    }
+  } catch (error) {
+    flag.value = false;
+    //  rmFlag.value = false;
+    tableObj.value = {};
+    resetForm();
+  }
+};
+onMounted(()=>{
+  const route = useRoute();
+  console.log(route.meta)
+  tempID.value = route.meta.qid;
+  pageTitle.value = route.meta.title;
+  getQuery();
+})
+</script>
+<style lang="scss" scoped>
+::v-deep .el-form-item__label {
+  width: 80px;
+}
+.app-containers {
+  height: calc(100vh - 180px);
+}
+</style>