组织机构管理

src/views/system/menu.vue

@@ -97,7 +97,7 @@
                                 </el-form-item>
                             </el-col>
                         </el-row>
-                    </el-form>
+                 </el-form>
 
           
             <template #footer>

src/views/system/organization.vue

@@ -1,13 +1,230 @@
 <template>
-    <div class="home-styles-box">
-        组织架构
-    </div>
+        <HcCard actionSize="lg" scrollbar>
+            <template #extra>
+                <el-button type="primary" @click="editClick"  size="large" v-if="!isShowIcon&&!isedit">
+                            <span>编辑组织机构</span>
+                 </el-button>
+              
+                 <el-button type="primary" @click="goback"  size="large" v-if="!isShowIcon&&isedit">
+                            <span>返回上一级</span>
+                 </el-button>
+            </template>
+         
+            <div class="content-box" v-if="isShowIcon">
+                <HcIcon name="add-box" class="add_icon" @click="addClick"/>
+            </div>
+            <div class="content-box" v-if="!isShowIcon&&!isedit">
+             组织架构显示信息
+            </div>
+            <div  v-if="!isShowIcon&&isedit">
+            <div class="tree-box blue">
+                <el-scrollbar class="h-100p">
+                    <el-tree
+                    :data="dataSource"
+                    node-key="id"
+                    default-expand-all
+                    :expand-on-click-node="false"
+                    >
+                    <template #default="{ node, data }">
+                        <span class="custom-tree-node">
+                            <!-- <span>{{ node.label }}</span> -->
+                            
+                                <span  :class="node.level === 1?'level-name':''" class="label">{{ node.label }}</span>
+                          
+                        
+                            <span>
+                                <HcIcon name="add-box" @click="addClick" style=" color: rgb(84, 188, 189);"/>
+                                <HcIcon name="edit" @click="addClick" style="margin-left: 8px;color: rgb(84, 188, 189);" />
+                                <HcIcon name="delete-bin" @click="delClick" style="margin-left: 8px;color: orange;" />
+                                <HcIcon name="vip-crown-2" @click="authorityClick" style="margin-left: 8px;color: purple;"/>
+                            </span>
+                        </span>
+                  
+                    </template>
+                    </el-tree>
+                </el-scrollbar>
+        </div>
+            </div>
+          
+            <HcDialog :show="testModal" title="新增机构信息" @close="testModalClose" widths="80rem">
+                <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left"
+                             size="large">
+                        <el-row :gutter="20">
+                            <el-col :span="12">
+                                <el-form-item label="上级组织节点名称">
+                                        <el-select v-model="formModel.top" class="m-2" placeholder="请选择" size="large" style="width:100%">
+                                            <el-option
+                                            v-for="item in topMenuoptions"
+                                            :key="item.value"
+                                            :label="item.label"
+                                            :value="item.value"
+                                            />
+                                        </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="组织节点类别">
+                                        <el-select v-model="formModel.top" class="m-2" placeholder="请选择" size="large" style="width:100%">
+                                            <el-option
+                                            v-for="item in topMenuoptions"
+                                            :key="item.value"
+                                            :label="item.label"
+                                            :value="item.value"
+                                            />
+                                        </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="组织节点名称">
+                                    <el-input v-model="formModel.deptId"  placeholder=""/>
+                                </el-form-item>
+                            </el-col>
+                      
+                        </el-row>
+                 </el-form>
+            </HcDialog>
+            <HcDialog :show="authorityModal" title="权限配置" @close="authorityModalClose" widths="80rem">
+                <el-tree
+                :props="props"
+                :load="loadNode"
+                lazy
+                show-checkbox
+                @check-change="handleCheckChange"
+            />
+            </HcDialog>
+        </HcCard>
+    
 </template>
 
 <script setup>
 import {ref, watch} from "vue";
 import {useAppStore} from "~src/store";
+const isShowIcon=ref(false)
+const isedit=ref(false)
+const editClick=()=>{
+    isedit.value=true
+}
+const addClick=()=>{
+    testModal.value = true
+}
+const testModal = ref(false)
 
+//弹窗关闭
+const testModalClose = () => {
+    console.log('弹窗关闭')
+    testModal.value = false
+}
+const formModel=ref({})
+const formRules=ref({})
+const topMenuoptions=ref([])
+const dataSource = ref([
+  {
+    id: 1,
+    label: 'Level one 1',
+    children: [
+      {
+        id: 4,
+        label: 'Level two 1-1',
+        children: [
+          {
+            id: 9,
+            label: 'Level three 1-1-1',
+          },
+          {
+            id: 10,
+            label: 'Level three 1-1-2',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 2,
+    label: 'Level one 2',
+    children: [
+      {
+        id: 5,
+        label: 'Level two 2-1',
+      },
+      {
+        id: 6,
+        label: 'Level two 2-2',
+      },
+    ],
+  },
+  {
+    id: 3,
+    label: 'Level one 3',
+    children: [
+      {
+        id: 7,
+        label: 'Level two 3-1',
+      },
+      {
+        id: 8,
+        label: 'Level two 3-2',
+      },
+    ],
+  },
+])
+
+const delClick = (node, data) => {
+    console.log(node,'node');
+    window?.$messageBox?.alert('您确定要注销[xxx] 的机构信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '注销提醒', {
+        showCancelButton: true,
+        confirmButtonText: '确认注销',
+        cancelButtonText: '取消',
+        type: 'warning',
+        callback: (action) => {
+            if (action === 'confirm') {
+                console.log(11111);
+            }
+        }
+    })
+}
+const authorityModal=ref(false)
+const authorityClick=()=>{
+    authorityModal.value=true
+}
+const authorityModalClose = () => {
+    console.log('弹窗关闭')
+    authorityModal.value = false
+}
+const props = {
+  label: 'name',
+  children: 'zones',
+}
+const goback=()=>{
+    isedit.value=false
+}
+const handleCheckChange = (
+  data,
+  checked,
+  indeterminate
+) => {
+  console.log(data, checked, indeterminate)
+}
+
+const loadNode = (node, resolve) => {
+  if (node.level === 0) {
+    return resolve([{ name: 'region' }])
+  }
+  if (node.level > 1) return resolve([])
+
+  setTimeout(() => {
+    const data = [
+      {
+        name: 'leaf',
+        leaf: true,
+      },
+      {
+        name: 'zone',
+      },
+    ]
+
+    resolve(data)
+  }, 500)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -15,5 +232,29 @@ import {useAppStore} from "~src/store";
 </style>
 
 <style lang="scss">
+.content-box{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: calc(100vh - 386px);
+    text-align: center;
+    width: 100%;
+    color: rgb(84, 188, 189);
+}
+
+.add_icon{
+    font-size: 8rem;
+    cursor: pointer;
+    
+}
+.h-100p{height: 100%;}
+// 树样式
+.tree-box .el-tree-node{
+    font-size: 18px;
+}
+.tree-box .el-tree-node .data-custom-tree-node .level-name{  
+    font-size: 24px;
+}
+
 
 </style>

src/views/system/parameter.vue

@@ -1,13 +1,37 @@
 <template>
-    <div class="home-styles-box">
-        参数配置
+    <div style="height:100%">
+        <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick">
+            <template #tab-pricetype>
+                测试1
+            </template>
+            <template #tab-tasktype>
+                测试2
+            </template>
+            <template #tab-indicator>
+                测试3
+            </template>
+            <template #tab-price>
+                岗位单价
+            </template>
+        </HcTabsSimple>
     </div>
 </template>
 
 <script setup>
 import {ref, watch} from "vue";
 import {useAppStore} from "~src/store";
+//类型处理
+const tabsKey = ref('internal')
+const tabsData = ref([
+    {icon: 'bar-chart-box', label: '预算分类', key: 'pricetype'},
+    {icon: 'tools', label: '任务类型', key: 'tasktype'},
+    {icon: 'sun-cloudy', label: '指标依据', key: 'indicator'},
+    {icon: 'sun-cloudy', label: '岗位单价', key: 'price'},
+])
 
+const tabsClick = (key) => {
+    tabsKey.value = key
+}
 </script>
 
 <style lang="scss" scoped>