医院详情页部门/职位增加修改modal

src/components/RightPage/RightPage.vue

@@ -27,6 +27,9 @@
         @showEditItem="showEditItem"
         @showAddMember="showAddMember"
         @showEditMember="showEditMember"
+        @changeRole="changeRole"
+        @editPositionModal="editPositionModal"
+        @editDepartmentModal="editDepartmentModal"
       />
     </div>
     <a-modal :visible="visible" title="添加部门/职位" @cancel="visible = false" @ok="handleOk">
@@ -65,6 +68,18 @@
         </a-form-item>
       </a-form>
     </a-modal>
+    <a-modal :visible="roleModal" title="修改关联角色" @cancel="roleModal = false" @ok="handleOk">
+      关联角色信息
+      {{ changeRoleId }}
+    </a-modal>
+    <a-modal :visible="positionModal" title="修改职位信息" @cancel="positionModal = false" @ok="handleOk">
+      修改职位信息
+      {{ positionInfo.pname }}
+    </a-modal>
+    <a-modal :visible="departmentModal" title="修改部门信息" @cancel="departmentModal = false" @ok="handleOk">
+      修改部门信息
+      {{ departmentInfo.departmentName }}
+    </a-modal>
   </div>
 </template>
 <script>
@@ -85,6 +100,9 @@ export default {
       visible2: false,
       visible3: false,
       visible4: false,
+      roleModal: false,
+      positionModal: false,
+      departmentModal: false,
       addId: '',
       hospitalName: '',
       areaId: [],
@@ -93,6 +111,9 @@ export default {
       cityId: '',
       countyId: '',
       id: '',
+      changeRoleId: '',
+      positionInfo: null,
+      departmentInfo: null,
     };
   },
   computed: { ...mapState('home', ['hospitalInfo', 'level', 'area']) },
@@ -105,6 +126,21 @@ export default {
     this.getHospitalInfo();
   },
   methods: {
+    // 显示修改部门的modal框
+    editDepartmentModal(item) {
+      this.departmentInfo = item;
+      this.departmentModal = true;
+    },
+    // 显示修改职位modal框
+    editPositionModal(item) {
+      this.positionInfo = item;
+      this.positionModal = true;
+    },
+    // 显示关联角色modal框
+    changeRole(id) {
+      this.changeRoleId = id;
+      this.roleModal = true;
+    },
     // 医院数据回显
     async queryHospitalById() {
       try {

src/components/RightPage/TreeNode.vue

@@ -20,25 +20,27 @@
           <div class="d-flex flex-row justify-space-between align-center" slot="title">
             <div>
               {{ itemA.pname }}
-              <a-tag color="blue" class="ml-2" v-for="tag in itemA.roleList" :key="tag.rid">
+              <a-tag color="blue" class="ml-2" v-for="tag in itemA.roleList" :key="tag.rid" @click="changeRole(itemA.pid)">
                 {{ tag.rname }}
               </a-tag>
             </div>
             <div>
-              <a-icon
+              <!-- <a-icon
                 class="mr-2"
                 :style="{ fontSize: '20px' }"
                 v-if="isSelect === item.did + itemA.pid"
                 type="plus"
                 @click="showAddMember(itemA.did)"
-              ></a-icon>
-              <a-icon
-                class="mr-2"
-                :style="{ fontSize: '20px' }"
-                v-if="isSelect === item.did + itemA.pid"
-                type="more"
-                @click="showEditMember(itemA)"
-              />
+              ></a-icon> -->
+              <a-popover v-model="itemA.show" placement="topRight" trigger="click">
+                <a-icon class="mr-2" :style="{ fontSize: '20px' }" v-if="isSelect === item.did + itemA.pid" type="more" />
+                <template slot="content">
+                  <div class="d-flex align-center">
+                    <a-button type="primary" class="mr-2" @click="editPositionModal(itemA)"> 修改 </a-button>
+                    <a-button type="danger" @click="delPositionInfo(itemA)"> 删除 </a-button>
+                  </div>
+                </template>
+              </a-popover>
             </div>
           </div>
         </a-tree-node>
@@ -57,7 +59,17 @@
               type="plus"
               @click="showAddItem(item.did)"
             ></a-icon>
-            <a-icon class="mr-2" :style="{ fontSize: '20px' }" v-if="isSelect === item.did" type="more" @click="showEditItem(item)" />
+            <!-- <a-icon class="mr-2" :style="{ fontSize: '20px' }" v-if="isSelect === item.did" type="m
+            ore" @click="showEditItem(item)" /> -->
+            <a-popover v-model="item.departmentIsShow" placement="topRight" trigger="click">
+              <a-icon class="mr-2" :style="{ fontSize: '20px' }" v-if="isSelect === item.did" type="more" />
+              <template slot="content">
+                <div class="d-flex align-center">
+                  <a-button type="primary" class="mr-2" @click="editDepartmentModal(item)"> 修改 </a-button>
+                  <a-button type="danger" @click="delpartment(item)"> 删除 </a-button>
+                </div>
+              </template>
+            </a-popover>
           </div>
         </div>
         <TreeNode
@@ -68,6 +80,9 @@
           @showEditItem="showEditItem"
           @showAddMember="showAddMember"
           @showEditMember="showEditMember"
+          @changeRole="changeRole"
+          @editPositionModal="editPositionModal"
+          @editDepartmentModal="editDepartmentModal"
         />
       </a-tree-node>
     </a-tree>
@@ -87,6 +102,7 @@ export default {
   },
   data() {
     return {
+      visible: false,
       isSelect: '',
       expandedKeys: [],
       autoExpandParent: true,
@@ -115,6 +131,27 @@ export default {
     }
   },
   methods: {
+    // 显示修改部门信息
+    editDepartmentModal(item) {
+      console.log('item: ', item);
+      this.$emit('editDepartmentModal', item);
+    },
+    // 显示修改职位信息
+    editPositionModal(item) {
+      this.$emit('editPositionModal', item);
+    },
+    // 删除部门
+    delpartment(item) {
+      console.log('item: ', item);
+    },
+    // 删除职位信息
+    delPositionInfo(item) {
+      console.log('item: ', item);
+    },
+    // 显示修改关联角色
+    changeRole(id) {
+      this.$emit('changeRole', id);
+    },
     onSelect(selectedKeys, info) {
       console.log('selected', selectedKeys, info);
       this.isSelect = selectedKeys[0];
@@ -129,7 +166,8 @@ export default {
       this.$emit('showAddMember', id);
     },
     showEditMember(item) {
-      this.$emit('showEditMember', item);
+      this.visible = true;
+      // this.$emit('showEditMember', item);
     },
     onExpand(expandedKeys) {
       this.expandedKeys = expandedKeys;

src/config/api.js

@@ -22,5 +22,9 @@ export const queryHospitalInfo = params => axios.post(`${management}/queryHospit
 
 // 修改医院详情
 export const editHospitalInfo = params => axios.post(`${management}/updateHospital`, params);
+
 // 修改医院详情的回显
 export const queryHospitalById = params => axios.post(`${management}/queryHospitalById`, params);
+
+// 查询可绑定角色列表;
+export const queryPositionType = params => axios.post(`${management}/queryPositionType`, params);

src/plugins/ant-design-vue.js

@@ -47,6 +47,7 @@ import {
   Affix,
   Drawer,
   Tree,
+  Popover,
 } from 'ant-design-vue';
 import { ConfigProvider } from 'ant-design-vue';
 Vue.component(ConfigProvider.name, ConfigProvider);
@@ -88,6 +89,7 @@ Vue.use(Divider);
 Vue.use(Affix);
 Vue.use(Drawer);
 Vue.use(Tree);
+Vue.use(Popover);
 Vue.prototype.$message = message;
 Vue.prototype.$notification = notification;
 Vue.prototype.$info = Modal.info;

src/store/modules/home/mutations.js

@@ -65,6 +65,14 @@ const mutations = {
   setLevelInfo(state, data) {
     state.level = data;
   },
+  /**
+   * 设置可以绑定的角色列表信息
+   * @param {object} state
+   * @param {array} list
+   */
+  setRoleList(state, list) {
+    state.roleList = list;
+  },
 };
 
 export default mutations;

src/store/modules/home/state.js

@@ -2,8 +2,9 @@ const state = {
   anyringToken: '',
   user: { id: '', phone: '', account: '', wxInfo: { nickname: '' } },
   hospitalInfo: {},
-  area: [], //省市县地址
-  level: [], //医院等级
+  area: [], // 省市县地址
+  level: [], // 医院等级
+  roleList: [], // 可以绑定的角色列表
 };
 
 export default state;

src/views/Index/Index.vue

@@ -9,7 +9,8 @@
 import LeftList from 'components/LeftList/LeftList.vue';
 import AddHospital from 'components/AddHospital/AddHospital.vue';
 import RightPage from 'components/RightPage/RightPage.vue';
-import { mapState } from 'vuex';
+import { queryPositionType } from 'config/api';
+import { mapState, mapMutations } from 'vuex';
 
 export default {
   name: 'Index',
@@ -22,7 +23,26 @@ export default {
     };
   },
   computed: { ...mapState('home', ['hospitalInfo']) },
+  created() {
+    this.getPositionType();
+  },
   methods: {
+    ...mapMutations('home', ['setRoleList']),
+    // 获取所有可以绑定的角色列表
+    async getPositionType() {
+      try {
+        const params = { param: {} };
+        const res = await queryPositionType(params);
+        const { code, msg, data } = res.data;
+        if (code === 200) {
+          this.setRoleList(data);
+        } else {
+          this.$message.warning('角色列表查询失败:', msg);
+        }
+      } catch (error) {
+        this.$message.error(error);
+      }
+    },
     showModal(options, levelList) {
       this.options = options;
       this.levelList = levelList;