Merge branch 'master' of http://gitlab.smartai.com/zhupei/smartai2dian0

src/modules/permission/TreeParts.vue

@@ -0,0 +1,81 @@
+<template>
+  <a-card title="机构" :bordered="false" :header-style="{ textAlign: 'left' }" class="tree-card">
+    <template #title>
+      <span>机构</span>
+      <a-tooltip content="点击后可通过拖拽更改机构结构,再次点击来关闭" background-color="#165DFF">
+        <a-button type="outline" style="float: right;" @click="toggleDraggable" :style="{ color: buttonColor }"
+          v-has-permi="'/base/syorganization!update'">
+          <component :is="lock_icon" />
+        </a-button>
+      </a-tooltip>
+    </template>
+    <a-tree class="tree-demo" :draggable="draggable" blockNode :data="treeData" :show-line="true" :fieldNames="{
+      key: 'deptId',
+      title: 'deptName',
+      children: 'children',
+    }" @drop="onDrop" @select="showDetail">
+      <template #extra="nodeData">
+        <IconPlus class="icon-plus" @click="() => onIconClick(nodeData)" />
+        <a-popconfirm v-if="nodeData.deptName != 'root'" content="请确认是否删除？" type="success"
+          @ok="() => onIconClickDelete(nodeData)">
+          <IconDelete class="icon-delete" />
+        </a-popconfirm>
+      </template>
+    </a-tree>
+  </a-card>
+</template>
+
+<script setup>
+import { ref, toRefs } from 'vue';
+const props = defineProps({
+  treeData: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const { treeData } = toRefs(props);
+
+
+let draggable = ref(false);
+let lock_icon = ref("IconLock");
+
+const toggleDraggable = () => {
+  draggable.value = !draggable.value;
+  buttonColor.value = draggable.value ? '#575757' : '';
+  lock_icon.value = draggable.value ? 'IconUnlock' : 'IconLock';
+};
+
+const showDetail = (id) => {
+  OrganizationById(id).then((res) => {
+    deptform.value = { ...res.data };
+  });
+};
+
+const onIconClickDelete = (nodeData) => {
+
+};
+</script>
+
+<style lang="css" scoped>
+.tree-card {
+  width: 100%;
+  overflow-y: auto;
+}
+
+.icon-plus {
+  position: absolute;
+  right: 60px;
+  font-size: 12px;
+  top: 10px;
+  color: #3370ff;
+}
+
+.icon-delete {
+  position: absolute;
+  right: 40px;
+  font-size: 12px;
+  top: 10px;
+  color: #3370ff;
+}
+</style>

src/modules/permission/account/DeptConfigModal.vue

@@ -1,6 +1,6 @@
 <template>
   <a-modal width="50%" v-model:visible="visible" title="部门配置" @cancel="handleCancel" @ok="editDeptHandleOk">
-    <div :style="{ display: 'flex' }">
+    <div style="display: flex;">
       <a-card class="card-body" title="机构" hoverable>
         <a-tree :data="dept_list" v-model:checked-keys="checked_keys" v-model:expanded-keys="expand_kdys"
           :checkable="true" :show-line="true" @check="onCheck" :fieldNames="{

src/modules/permission/account/EditModal.vue

@@ -1,8 +1,8 @@
 <template>
-  <a-modal v-model:visible="visible" :title="title" @ok="ok" @cancel="editHandleCancel" width="48%">
+  <a-modal v-model:visible="visible" :title="title" @ok="ok" @cancel="editHandleCancel" width="40%">
     <a-form ref="formRef" :model="edit_form" auto-label-width>
-      <a-row :gutter="20">
-        <a-col :span="10">
+      <a-row :gutter="24">
+        <a-col :span="12">
           <a-form-item field="loginName" label="用户名" :rules="[
             { required: true, message: '用户名必填' },
             { maxLength: 50, message: '长度不超过50' },
@@ -10,19 +10,19 @@
             <a-input v-model="edit_form.loginName" />
           </a-form-item>
         </a-col>
-        <a-col :span="10">
+        <a-col :span="12">
           <a-form-item field="userName" label="姓名">
             <a-input v-model="edit_form.userName" />
           </a-form-item>
         </a-col>
       </a-row>
-      <a-row :gutter="20">
-        <a-col :span="10">
+      <a-row :gutter="24">
+        <a-col :span="12">
           <a-form-item field="phoneNumber" label="手机号">
             <a-input v-model="edit_form.phoneNumber" />
           </a-form-item>
         </a-col>
-        <a-col :span="10">
+        <a-col :span="12">
           <a-form-item required field="email" label="邮箱" :rules="[
             { required: true, message: '邮箱必填' },
             { maxLength: 50, message: '长度不超过50' },
@@ -31,13 +31,13 @@
           </a-form-item>
         </a-col>
       </a-row>
-      <a-row :gutter="20">
-        <a-col :span="10">
+      <a-row :gutter="24">
+        <a-col :span="12">
           <a-form-item field="password" label="密码">
             <a-input v-model="edit_form.password" type="password" />
           </a-form-item>
         </a-col>
-        <a-col :span="10">
+        <a-col :span="12">
           <a-form-item field="role" label="角色">
             <a-select multiple v-model="edit_form.role" :options="roles" :field-names="field_names"
               @change="roleChange">

src/modules/permission/org/OrgForm.vue

@@ -0,0 +1,69 @@
+<template>
+  <a-form :model="dept_form" layout="horizontal" ref="formRef">
+    <a-form-item field="parentName" label="上级机构" disabled>
+      <a-input v-model="dept_form.parentName" />
+    </a-form-item>
+    <a-form-item field="status" label="机构状态">
+      <a-switch checked-value="0" unchecked-value="1" v-model="dept_form.status"></a-switch>
+    </a-form-item>
+    <a-form-item field="deptName" label="机构名称"
+      :rules="[{ required: true, message: '机构名称必填' }, { maxLength: 50, message: '长度不超过50' }]">
+      <a-input v-model="dept_form.deptName" />
+    </a-form-item>
+    <a-form-item field="leader" label="联系人"
+      :rules="[{ required: true, message: '联系人必填' }, { maxLength: 50, message: '长度不超过50' }]">
+      <a-input v-model="dept_form.leader" />
+    </a-form-item>
+    <a-form-item field="phone" label="联系电话"
+      :rules="[{ required: true, message: '联系电话必填' }, { maxLength: 50, message: '长度不超过50' }]">
+      <a-input v-model="dept_form.phone" />
+    </a-form-item>
+    <a-form-item field="address" label="机构地址">
+      <a-input v-model="dept_form.address" />
+    </a-form-item>
+    <a-form-item>
+      <a-space>
+        <a-button @click="handleSubmit">保存</a-button>
+        <a-button @click="handleReset">重置</a-button>
+      </a-space>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script setup>
+import { toRefs } from 'vue';
+
+// 接收父组件传入的参数
+const props = defineProps({
+  dept_form: {
+    type: Object,
+    required: true,
+    default: () => ({
+      parentName: '',
+      status: 0,
+      deptName: '',
+      leader: '',
+      phone: '',
+      address: ''
+    })
+  }
+});
+
+// 将 props 解构
+const { dept_form } = toRefs(props);
+
+// 定义要抛出的事件
+const emit = defineEmits(['save', 'reset']);
+
+// 处理保存逻辑
+const handleSubmit = () => {
+  emit('save', dept_form.value);
+};
+
+// 处理重置逻辑
+const handleReset = () => {
+  emit('reset');
+};
+</script>
+
+<style lang="css" scoped></style>

src/modules/permission/org/index.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="organization-container">
+    <div class="left">
+      <TreeParts :treeData="org_tree_data" />
+    </div>
+    <div class="right">
+      <a-card title="详情" style="height: 100%;">
+        <OrgForm :dept_form="dept_form" @save="orgFromSave" @reset="orgFromReset"></OrgForm>
+      </a-card>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, toRefs } from 'vue';
+import TreeParts from '../TreeParts.vue';
+import OrgForm from './OrgForm.vue';
+
+const org_tree_data = ref([
+  {
+    "address": null,
+    "children": [
+      {
+        "address": "",
+        "children": [],
+        "code": null,
+        "createTime": "Thu, 12 Sep 2024 14:56:43 GMT",
+        "deptId": "2af7cb5e-1178-4adc-8abb-9780f7543081",
+        "deptName": "成都",
+        "email": "",
+        "iconCls": null,
+        "leader": "成都",
+        "orderNum": 0,
+        "parentId": "0",
+        "parentName": "总部",
+        "phone": "成都",
+        "roles": [],
+        "status": "",
+        "updateTime": "Thu, 12 Sep 2024 14:56:43 GMT"
+      },
+      {
+        "address": null,
+        "children": [],
+        "code": null,
+        "createTime": "Sun, 22 May 2022 09:59:33 GMT",
+        "deptId": "5477d9a9-e41e-485f-bb08-697e8facef88",
+        "deptName": "南京分公司",
+        "email": "ss@ada.com",
+        "iconCls": null,
+        "leader": "dd",
+        "orderNum": 0,
+        "parentId": "0",
+        "parentName": "总部",
+        "phone": "18905189016",
+        "roles": [],
+        "status": "0",
+        "updateTime": "Tue, 12 Nov 2024 03:05:10 GMT"
+      },
+      {
+        "address": null,
+        "children": [
+          {
+            "address": "",
+            "children": [
+              {
+                "address": "",
+                "children": [],
+                "code": null,
+                "createTime": "Tue, 12 Nov 2024 03:09:57 GMT",
+                "deptId": "c6ae93de-2436-4090-b567-ec4835c74112",
+                "deptName": "成都",
+                "email": "",
+                "iconCls": null,
+                "leader": "柔柔弱弱",
+                "orderNum": 0,
+                "parentId": "f86724f0-94d9-445c-9d95-3ec2540da0f8",
+                "parentName": "太平洋派出所",
+                "phone": "1234242342",
+                "roles": [],
+                "status": "",
+                "updateTime": "Tue, 12 Nov 2024 06:58:15 GMT"
+              }
+            ],
+            "code": null,
+            "createTime": "Thu, 05 Sep 2024 03:15:13 GMT",
+            "deptId": "f86724f0-94d9-445c-9d95-3ec2540da0f8",
+            "deptName": "太平洋派出所",
+            "email": "",
+            "iconCls": null,
+            "leader": "12",
+            "orderNum": 0,
+            "parentId": "ce627e90-57d6-4ed4-a789-1f3dd467ae7d",
+            "parentName": "上海分公司",
+            "phone": "12",
+            "roles": [
+              {
+                "deptId": "f86724f0-94d9-445c-9d95-3ec2540da0f8",
+                "roleId": "19f00d46-8f1b-45b5-b7b7-6197d7b8cb33",
+                "roleName": "管理员1"
+              }
+            ],
+            "status": "0",
+            "updateTime": "Tue, 12 Nov 2024 06:58:07 GMT"
+          }
+        ],
+        "code": null,
+        "createTime": "Tue, 24 May 2022 23:54:10 GMT",
+        "deptId": "ce627e90-57d6-4ed4-a789-1f3dd467ae7d",
+        "deptName": "上海分公司",
+        "email": null,
+        "iconCls": null,
+        "leader": "jack",
+        "orderNum": 0,
+        "parentId": "0",
+        "parentName": "总部",
+        "phone": null,
+        "roles": [
+          {
+            "deptId": "ce627e90-57d6-4ed4-a789-1f3dd467ae7d",
+            "roleId": "301ca518-2ed0-4092-a2ee-e46c24a42c8a",
+            "roleName": "普通"
+          }
+        ],
+        "status": "0",
+        "updateTime": "Wed, 18 Sep 2024 09:58:16 GMT"
+      }
+    ],
+    "code": null,
+    "createTime": "Mon, 28 Nov 2016 10:34:54 GMT",
+    "deptId": "0",
+    "deptName": "总部",
+    "email": null,
+    "iconCls": "ext-icon-bricks",
+    "leader": null,
+    "orderNum": 100,
+    "parentId": "",
+    "parentName": "",
+    "phone": null,
+    "roles": [],
+    "status": "0",
+    "updateTime": "Mon, 28 Nov 2016 10:35:12 GMT"
+  }
+]);
+
+const dept_form = reactive({
+  parentName: '',
+  status: 0,
+  deptName: '',
+  leader: '',
+  phone: '',
+  address: ''
+});
+
+const orgFromSave = (data) => {
+  console.log(data);
+}
+
+const orgFromReset = () => {
+  dept_form.parentName = '';
+  dept_form.status = 0;
+  dept_form.deptName = '';
+  dept_form.leader = '';
+  dept_form.phone = '';
+  dept_form.address = '';
+}
+</script>
+
+<style lang="css" scoped>
+.organization-container {
+  display: flex;
+  justify-content: space-between;
+  height: calc(100% - 40px);
+  width: 100%;
+}
+
+.left {
+  width: 30%;
+  height: 100%;
+  background-color: #fff;
+}
+
+.right {
+  width: 69%;
+  height: 100%;
+  background-color: #fff;
+}
+</style>

src/views/PermissionOrganization.vue

@@ -1,11 +1,14 @@
 <template>
   <ContentContainer>
     <BreadCrumbMenu :current_label="'机构'" />
-    <div class="permission-organization">权限管理: 机构</div>
+    <OrgPage />
   </ContentContainer>
+
 </template>
 
 <script setup>
 import ContentContainer from './layout/ContentContainer.vue';
 import BreadCrumbMenu from './common/BreadCrumbMenu.vue';
+
+import OrgPage from '../modules/permission/org/index.vue';
 </script>

src/views/PermissionRole.vue

@@ -9,7 +9,4 @@
 import ContentContainer from './layout/ContentContainer.vue';
 import BreadCrumbMenu from './common/BreadCrumbMenu.vue';
 
-const props = defineProps({
-  label: String
-});
 </script>