0.5

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+yarn.lock
+yarn.lock

package.json

@@ -12,6 +12,8 @@
     "@ant-design/icons-vue": "^6.1.0",
     "ant-design-vue": "^3.2.13",
     "axios": "^1.1.3",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
     "vue": "^3.2.41",
     "vue-router": "4"
   },

public/menu.json

@@ -17,6 +17,12 @@
           "icon": "AppleOutlined",
           "title": "节点",
           "path": "/node"
+        },
+        {
+          "key": "3",
+          "icon": "AppleOutlined",
+          "title": "其他",
+          "path": "/node/oth"
         }
       ]
     }

src/components/sider.vue

@@ -7,21 +7,14 @@
       theme="dark"
   >
     <div v-for="item in menuList">
-      <!-- ?????????? -->
       <a-menu-item v-if="!item.children" :key="item.key">
         <router-link :to="item.path">
           <component :is="$antIcons[item.icon]" />
-<!--          <a-icon :type="item.type" />-->
           <span>{{ item.title }}</span>
         </router-link>
       </a-menu-item>
-      <!-- ??????children??????sub-menu -->
-
-      <submenu v-else :key="item.key" :menu-info="item" />
-
+      <submenu v-else :key="item.key + 1" :menu-info="item" />
     </div>
-
-
   </a-menu>
 </template>
 <script lang="ts">

src/components/submenu.vue

@@ -3,23 +3,30 @@
 <!--    <span slot="title">-->
 <!--      <a-icon type="mail" /><span>-->
 <!--    </span>-->
-    <div v-for="item in menuInfo.children">
-      <!-- ?????????? -->
+    <div v-for="item in menuInfo.children" :key="item">
+       
       <a-menu-item v-if="!item.children" :key="item.key">
         <router-link :to="item.path">
           <component :is="$antIcons[item.icon]" />
           <span>{{ item.title }}</span>
         </router-link>
       </a-menu-item>
-      <!-- ??????children??????sub-menu?????sub-menu -->
-      <submenu v-else :key="item.key" :menu-info="item" />
+      
+      <submenu v-else :key="item.key + 1" :menu-info="item" />
     </div>
   </a-sub-menu>
 
 </template>
-<script>
+<script lang="ts">
+// import { ComponentInternalInstance, getCurrentInstance } from 'vue';
+// const { proxy } = getCurrentInstance() as ComponentInternalInstance
 export default {
   props: ["menuInfo"],
+  setup(){
+    return {
+      
+    }
+  }
 };
 </script>
 

src/main.ts

@@ -8,17 +8,26 @@ import App from './App.vue'
 //import App from './view/index/index.vue'
 import axios from '/@/request/index'
 
-import * as antIcons from '@ant-design/icons-vue'
+import * as AntIcons from '@ant-design/icons-vue'
 
 
+//用于解决全局变量无法找到问题
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $antIcons: any;
+    }
+}
+ 
 const app = createApp(App)
 
-const antIconsList:any = antIcons
+const antIconsList:any = AntIcons
 
 for (const key in antIconsList){
     app.component(key,antIconsList[key])
 }
-app.config.globalProperties.$antIcons = antIcons
+
+//app.provide("antIcons",antIcons);//全局图片地址
+app.config.globalProperties.$antIcons = AntIcons
 
 app.use(Antd)
 app.use(router)

src/view/node/index.vue

@@ -1,6 +1,12 @@
 <template>
+
+  <a-button type="primary" class="role_btn role_add" @click="showAddRole">添加角色</a-button>
+
+    <!-- 添加角色的对话框 -->
+  <Edit :show="addRoleVisible" title="添加用户" :addForm="addForm" @cancelAddRole="cancelAddRole" @resatRole="resatRole" @addRole="addRole"></Edit>
+
   <a-table :columns="columns" :data-source="nodeList" :style="{ height: '100%', borderRight: 0 }">
-    <template #bodyCell="{ column, record }">
+    <template #bodyCell="{ column }">
       <template v-if="column.key === 'mg_state'">
         <a-switch checked-children="??" un-checked-children="??" />
       </template>
@@ -9,11 +15,60 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, onMounted, reactive, toRefs} from "vue";
+import {defineComponent, onMounted, reactive, ref, toRefs} from "vue";
 import {INode} from "/@/model/node";
 import {nodeReqUse} from "/@/apis/node";
+import Edit from "/@/components/edit.vue"
 export default defineComponent({
   name:"node",
+  components:{
+    Edit
+  },
+  data(){
+    return {
+      addRoleVisible : false,
+      addForm: {
+            id: '',
+            createTime: new Date(),
+            createBy: '',
+            roleCode: '001',
+            roleName: '测试',
+            description: '',
+          },
+    }
+  },
+  methods : {
+    // 显示添加角色对话框
+    showAddRole () {
+      this.addRoleVisible = true;
+    },
+
+ // 对话框的中的取消按钮
+    cancelAddRole () {
+              this.addRoleVisible = false;
+              this.editRoleVisible = false;
+            },
+    // 点击 添加角色对话框的保存
+    addRole () {
+      // 注意点：这边的 addRoleVisible 设置为false 需要在数据请求回来设置的！
+      // this.addRoleVisible = false;
+      let addFormObj = JSON.parse(JSON.stringify(this.addForm));
+      this.postAddRole({
+        query: addFormObj,
+      }).then(res => {
+        this.$message.info(res.msg);
+        this.getDate();
+        this.addRoleVisible = false;
+        this.addForm = {};
+      }).finally(_ => {
+        // this.$loading.hide();
+      });
+    },
+    // 对话框的中的重置按钮
+    resatRole (obj) {
+        this.addForm = obj;
+      },
+  },
   setup() {
     const columns = [
       {
@@ -74,6 +129,28 @@ export default defineComponent({
       nodeList : [] as INode[]
     })
 
+    const loading = ref<boolean>(false);
+    const visible = ref<boolean>(false);
+
+    const AddNodeModel = () => {
+      visible.value = true;
+    };
+
+    const handleOk = () => {
+      loading.value = true;
+      visible.value= false;
+      // setTimeout(() => {
+      //   loading.value = false;
+      //   visible.value = false;
+      // }, 2000);
+    };
+
+    const handleCancel = () => {
+      visible.value = false;
+    };
+
+
+
     onMounted(async () => {
       const node_list  = await nodeReqUse(null)
       datalist.nodeList = node_list.data.nodeList
@@ -82,6 +159,9 @@ export default defineComponent({
 
     const { nodeList } = toRefs(datalist)
     return{
+      visible,
+      handleOk,
+      AddNodeModel,
       nodeList,
       columns
     }
@@ -89,6 +169,6 @@ export default defineComponent({
 })
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 
-</style>
+</style>

tsconfig.json

@@ -10,7 +10,7 @@
 //     "isolatedModules": true,
 //     "esModuleInterop": true,
 //     "lib": ["ESNext", "DOM"],
-//     "skipLibCheck": true,
+//    
 //     "noEmit": true
 //   },
 //   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
@@ -23,7 +23,8 @@
       "baseUrl": ".",
       "paths": {
           "/@/*": ["src/*"]
-      }
+      },
+      "skipLibCheck": true,
   },
   "include": [
       "src/vue.d.ts",

vite.config.ts

@@ -23,8 +23,8 @@ function pathResolve(dir: string) {
 // };
 
 export default defineConfig({
-   
- 
+
+
   plugins: [vue()], // 配置需要使用的插件列表
   resolve: {
     alias: {
@@ -41,6 +41,14 @@ export default defineConfig({
         rewrite: (path) => path.replace(/^\/api/, '')
       },
     }
+  },
+  css : {
+    // css预处理器
+    preprocessorOptions: {
+      less: {
+        charset: false,
+      },
+    },
   }
 })
- 
+