主色调

src/App.vue

@@ -3,11 +3,19 @@
 </template>
 
 <script>
-
+import autoRefresh from './update'
 export default {
-  name: 'App'
+  name: 'App',
+  created () {
+    if (process.env.NODE_ENV !== 'production') {
+      return
+    }
+    autoRefresh()
+  }
 }
 </script>
 <style lang="scss">
-
+.el-menu-item.is-active {
+  background-color: $theme-color !important;
+}
 </style>

src/components/AutoComponents/MForm/index.vue

@@ -1,4 +1,4 @@
-s<template>
+<template>
   <el-form
     :label-position="labelPosition ?? 'right'"
     :label-width="labelWidth ?? '120px'"

src/layout/components/MenuSide.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <div class="box pl-3" :class="{active: !collapse}">{{ $DEFAULT_TITLE }}</div>
+    <div class="box text-center" :class="{active: !collapse}">{{ $DEFAULT_TITLE }}</div>
     <el-menu
       :default-active="defaultActive"
-      background-color="#001529"
-      text-color="#fff"
-      active-text-color="#ffd04b"
+      background-color="#FFF"
+      text-color="#000"
+      active-text-color="#FFF"
       :collapse="collapse"
       :collapse-transition="false"
       unique-opened
@@ -73,12 +73,14 @@ $height: 50px;
 }
 .box {
   height: $height;
-  color: #fff;
-  background-color: #001529;
+  // color: #fff;
+  // background-color: #001529;
   font-size: 0;
   &.active {
     width: 100%;
     box-sizing: border-box;
+    // background: $theme-color;
+    color: $theme-color;
     font-size: 20px;
     font-weight: 600;
     line-height: $height;
@@ -87,10 +89,13 @@ $height: 50px;
 .el-menu {
   border-right: none;
 }
-::v-deep .el-menu--inline .el-menu-item {
-  background-color: #0f2438 !important;
-}
-::v-deep .el-menu--inline .el-submenu__title {
-  background-color: #0f2438 !important;
-}
+// ::v-deep .el-menu--inline .el-menu-item {
+//   background-color: #0f2438 !important;
+// }
+// ::v-deep .el-menu--inline .el-submenu__title {
+//   background-color: #0f2438 !important;
+// }
+// ::v-deep .el-menu-item.is-active {
+//   background-color: $theme-color !important;
+// }
 </style>

src/styles/config.scss

@@ -0,0 +1 @@
+$theme-color: #ff650e !default;

src/styles/index.scss

@@ -2,6 +2,7 @@
 $base-unit: 4px;  
 $max-classes: 10;  
 
+
 // 生成 padding-left (pl) 类  
 @for $i from 0 through $max-classes {  
   .pl-#{$i} {  

src/update.js

@@ -0,0 +1,58 @@
+let lastSrc // 上次获取的script地址
+const scriptReg = /<script.*src=["'](?<src>[^"']+)/gm
+
+/**
+ * 获取页面中的script
+ *
+ */
+
+async function extractNewScripts (url) {
+  const html = await fetch('/?_timestamp' + Date.now()).then((resp) => resp.text())
+  scriptReg.lastIndex = 0
+  const scripts = []
+  let match
+  while ((match = scriptReg.exec(html))) {
+    scripts.push(match.groups.src)
+  }
+  return scripts
+}
+
+/**
+ * 检测是否需要更新
+ */
+async function needUpdate () {
+  const scripts = await extractNewScripts()
+  console.log(scripts, lastSrc)
+  if (!lastSrc) {
+    lastSrc = scripts
+    return false
+  }
+  let result = false
+  if (lastSrc.length !== scripts.length) {
+    result = true
+  }
+  for (let i = 0; i < lastSrc.length; i++) {
+    if (scripts[i] !== lastSrc[i]) {
+      result = true
+      break
+    }
+  }
+  lastSrc = scripts
+  return result
+}
+
+const DURATION = 2000
+
+export default function autoRefresh () {
+  setTimeout(async () => {
+    const willUpdate = await needUpdate()
+    console.log(willUpdate)
+    if (willUpdate) {
+      const result = confirm('检测到有新的脚本，是否刷新页面？')
+      if (result) {
+        location.reload()
+      }
+    }
+    autoRefresh()
+  }, DURATION)
+}

src/utils/antvG6.js

@@ -1,6 +1,7 @@
 // import { Rect } from '@antv/g'
 import {
   Badge,
+  // Label,
   // idOf,
   CommonEvent,
   BaseBehavior,
@@ -73,16 +74,16 @@ export class MindMapNode extends Circle {
     }
     const btn = this.upsert('collapse-expand', Badge, {
       backgroundFill: '#409EFF',
-      backgroundHeight: 26,
-      backgroundWidth: 26,
-      lineHeight: 50,
+      backgroundHeight: 20,
+      backgroundWidth: 20,
+      lineHeight: 120,
       cursor: 'pointer',
       fill: '#fff',
-      fontSize: 24,
+      fontSize: 20,
       text: attributes.collapsed || nodes.hasChildren ? '+' : '-',
       textAlign: 'center',
       visibility: 'visible',
-      x: 40,
+      x: 20,
       y: 0
     }, container)
 
@@ -110,13 +111,17 @@ export class MindMapNode extends Circle {
   // 绘制标签形状
   drawTapShape (attributes, container) {
     const nodes = this.context.graph.getNodeData(this.id)
+    if (nodes.depth > 2) {
+      return
+    }
     const btn = this.upsert('status', Badge, {
-      text: `${nodes.tag} [标注]`,
+      text: '[ 点击编辑 ]',
       fontSize: 14,
       textAlign: 'left',
-      transform: [['translate', 90, 30]],
+      transform: [['translate', 50, 30]],
       padding: [10],
       fill: '#409EFF',
+      cursor: 'pointer',
       zIndex: 5
     }, container)
 
@@ -157,5 +162,6 @@ export class MindMapNode extends Circle {
 
     this.drawCollapseShape(attributes, container)
     this.drawTapShape(attributes, container)
+    // this.drawLabelShape(attributes, container)
   }
 }

src/views/humanResources/organizationStructure/index.vue

@@ -26,13 +26,14 @@ const NODE_TYPE = {
   type: 'MindMapNode',
   style: function (d) {
     return {
+      size: 15,
       label: true,
-      labelFontSize: 24,
-      labelLineHeight: 48,
+      labelFontSize: 14,
+      labelLineHeight: d.depth === 3 ? 20 : 48,
       labelPlacement: 'right',
-      labelPadding: [0, 20, 36, 20],
+      labelPadding: d.depth === 3 ? [10] : [0, 15, 20, 15],
       labelText: d.name,
-      labelOffsetX: d.depth === 3 ? 40 : 80,
+      labelOffsetX: d.depth === 3 ? 20 : 50,
       labelBackground: true,
       labelBackgroundFill: '#EFF0F0',
       labelBackgroundRadius: 8,
@@ -102,7 +103,7 @@ export default {
         }
       })
     },
-    renderGraph (data) {
+    async renderGraph (data) {
       const graph = new Graph({
         container: this.$refs.graphRef,
         width: this.$refs.graphRef.clientWidth,
@@ -152,7 +153,7 @@ export default {
           'drag-element',
           'collapse-expand-tree'
         ],
-        transforms: ['assign-color-by-branch'],
+        // transforms: ['assign-color-by-branch'],
         animation: false,
         layout: {
           type: 'compact-box',
@@ -162,21 +163,23 @@ export default {
           getWidth: function getWidth () {
             return 32
           },
-          getVGap: function getVGap () {
-            return 30
+          getVGap: function getVGap (e) {
+            const { depth } = graph.getNodeData(e.id)
+            return depth === 3 ? 8 : 20
           },
-          getHGap: function getHGap () {
-            return 200
+          getHGap: function getHGap (e) {
+            const { depth } = graph.getNodeData(e.id)
+            return depth < 2 ? 100 : 140
           },
-          preventOverlap: true, // 防止节点重叠
-          iterations: 200, // 迭代次数
-          animation: true, // 启用布局动画
-          direction: 'LR',
-          nodeSep: 100,
-          rankSep: 500, // 层间距（px）
-          ranker: 'tight-tree', // 布局的模式 'network-simplex' | 'tight-tree' | 'longest-path'
-          rankdir: 'LR', // 布局的方向
-          nodeSize: 100, // 节点大小（直径）
+          // preventOverlap: true, // 防止节点重叠
+          // iterations: 200, // 迭代次数
+          // animation: true, // 启用布局动画
+          // direction: 'LR',
+          // nodeSep: 50,
+          // rankSep: 500, // 层间距（px）
+          // ranker: 'tight-tree', // 布局的模式 'network-simplex' | 'tight-tree' | 'longest-path'
+          // rankdir: 'LR', // 布局的方向
+          // nodeSize: 50, // 节点大小（直径）
           radial: false
         },
         node: NODE_TYPE,
@@ -185,13 +188,17 @@ export default {
           style: function (d) {
             return {
               endArrow: true,
-              lineWidth: 2,
-              stroke: '#999'
+              lineWidth: 1,
+              stroke: '#aaa'
             }
           }
         }
       })
+      // graph.zoomTo(0.7)
       graph.render()
+      // await graph.collapseElement('74bf386cdba4b1ff60c8ac09b01c2e91', {
+      //   align: true
+      // })
       this.graph = graph
     },
     editTag (nodes) {

src/views/humanResources/organizationStructure/organizationEdit.vue

@@ -1,23 +1,34 @@
 <template>
-  <m-dialog ref="dialog" :title="`${item.name} 标注编辑`" v-bind="$attrs" v-on="$listeners" @sure="onSure">
-    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
-      <el-form-item
-        v-for="(tag, index) in formValues.tags"
-        :label="'标注' + index"
-        :key="tag.key"
-        :prop="'tags.' + index + '.value'"
-      >
-        <div class="d-flex">
-          <el-input v-model="tag.value" placeholder="请输入标注"></el-input>
-          <el-button class="ml-3" @click.prevent="onRemove(index)">删除</el-button>
-        </div>
+  <el-drawer
+    :title="item.name"
+    :visible.sync="drawer"
+    direction="rtl"
+  >
+  <div class="px-3">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="基本信息" name="first">用户管理</el-tab-pane>
+      <el-tab-pane label="标注管理" name="second">
+        <el-form :model="formValues" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+          <el-form-item
+            v-for="(tag, index) in formValues.tags"
+            :label="'标注' + index"
+            :key="tag.key"
+            :prop="'tags.' + index + '.value'"
+          >
+            <div class="d-flex">
+              <el-input v-model="tag.value" placeholder="请输入标注"></el-input>
+              <el-button class="ml-3" @click.prevent="onRemove(index)">删除</el-button>
+            </div>
 
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="onAdd">新增标注</el-button>
-      </el-form-item>
-    </el-form>
-  </m-dialog>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="onAdd">新增标注</el-button>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+  </el-drawer>
 </template>
 
 <script>
@@ -28,6 +39,7 @@ export default {
   name: 'organizationEdit',
   data () {
     return {
+      drawer: false,
       formValues: {
         tags: [
           { value: null, key: Date.now() }
@@ -40,7 +52,7 @@ export default {
     open (nodes) {
       this.formValues.tags = [{ value: null, key: Date.now() }]
       this.item = nodes
-      this.$refs.dialog.open()
+      this.drawer = true
     },
     onRemove (index) {
       this.formValues.tags.splice(index, 1)
@@ -59,7 +71,6 @@ export default {
           labelTitle: this.formValues.tags.map(e => e.value)
         })
         this.$emit('success')
-        this.$refs.dialog.close()
       } catch (error) {
         this.$message.error(error)
       }

src/views/humanResources/welfare/welfareList/welfareRules.vue

@@ -9,7 +9,7 @@
         <div class="text-center mt-3">
           <m-button icon="el-icon-plus" type="primary" size="small" @click="onAdd">添加一行</m-button>
         </div>
-        <template #subsidyOrganizationNos="scope">
+        <!-- <template #subsidyOrganizationNos="scope">
           <el-form-item
             :prop="`items.${scope.$index}.subsidyOrganizationNos`"
             :rules="{ required: true, message: '请输入机构名称', trigger: 'blur' }"
@@ -32,7 +32,7 @@
             @change="onChange($event, scope)"
           ></el-cascader>
           </el-form-item>
-        </template>
+        </template> -->
         <template #subsidySalary="scope">
           <el-form-item
             :prop="`items.${scope.$index}.subsidySalary`"
@@ -79,17 +79,17 @@ export default {
       formQuery: {
         items: [
           {
-            subsidyOrganizationNames: [],
-            subsidyOrganizationNos: [],
+            // subsidyOrganizationNames: [],
+            // subsidyOrganizationNos: [],
             subsidySalary: null,
             subsidyCheck: null
           }
         ]
       },
       headers: [
-        { label: '机构名称', prop: 'subsidyOrganizationNos' },
-        { label: '福利薪资', prop: 'subsidySalary' },
-        { label: '福利条件描述', prop: 'subsidyCheck', width: 420 },
+        // { label: '机构名称', prop: 'subsidyOrganizationNos' },
+        { label: '福利薪资', prop: 'subsidySalary', width: 200 },
+        { label: '福利条件描述', prop: 'subsidyCheck' },
         { label: '操作', prop: 'actions', width: 100 }
       ],
       itemData: {},
@@ -110,8 +110,8 @@ export default {
         this.itemData = data
         this.formQuery.items = data.subsidyItems.map(e => {
           return {
-            subsidyOrganizationNames: e.subsidyOrganizationNames,
-            subsidyOrganizationNos: e.subsidyOrganizationNos,
+            // subsidyOrganizationNames: e.subsidyOrganizationNames,
+            // subsidyOrganizationNos: e.subsidyOrganizationNos,
             subsidySalary: e.subsidySalary,
             subsidyCheck: e.subsidyCheck
           }
@@ -124,8 +124,8 @@ export default {
     },
     onAdd () {
       this.formQuery.items.push({
-        subsidyOrganizationNames: [],
-        subsidyOrganizationNos: [],
+        // subsidyOrganizationNames: [],
+        // subsidyOrganizationNos: [],
         subsidySalary: 0,
         subsidyCheck: null
       })
@@ -133,10 +133,10 @@ export default {
     onDelete (scope) {
       this.formQuery.items.splice(scope.$index, 1)
     },
-    onChange (v, item) {
-      const data = this.$refs['cascader' + item.$index].getCheckedNodes(true)
-      this.formQuery.items[item.$index].subsidyOrganizationNames = data.map(e => e.data.organizationName)
-    },
+    // onChange (v, item) {
+    //   const data = this.$refs['cascader' + item.$index].getCheckedNodes(true)
+    //   this.formQuery.items[item.$index].subsidyOrganizationNames = data.map(e => e.data.organizationName)
+    // },
     onSure () {
       this.$refs.form.validate(async valid => {
         if (valid) {

vue.config.js

@@ -107,5 +107,14 @@ module.exports = defineConfig({
   transpileDependencies: [
     'axios',
     'element-ui'
-  ]
+  ],
+  css: {
+    loaderOptions: {
+      sass: {
+        additionalData: `
+          @import "@/styles/config.scss";
+        `
+      }
+    }
+  }
 })