管理端用户编辑课题组修改

src/api/admin.js

@@ -279,6 +279,14 @@ export function batchAddInternationalization(param) {
     data: param
   })
 }
+// 管理端修改用户课题组
+export function updateUserHospitalGroupInfo(data) {
+  return request({
+    url: `/User/updateUserHospitalGroupInfo`,
+    method: 'put',
+    data
+  })
+}
 // 管理端修改用户角色
 export function updateUserRoleInfo(data) {
   return request({

src/views/system/user/components/UserInfo.vue

@@ -26,16 +26,30 @@
         <el-input v-model="user.Phone" />
       </el-form-item>
       <el-form-item :label="$t('system:userlist:table:HospitalGroupIdList')"
-        :prop="hasPermi(['role:ga']) ? 'HospitalGroupIdList' : ''">
+        :prop="hasPermi(['role:ga']) ? 'groups' : ''" v-if="type === 0">
         <div style="display: flex; align-items: center">
-          <el-select ref="userType" v-model="user.HospitalGroupIdList" size="small" placeholder="Please select" multiple
-            style="width: 100%" :disabled="user.CanEditUserType === false">
+          <el-select ref="userType" v-model="user.groups" size="small" placeholder="Please select" multiple
+            style="width: 100%" :disabled="user.CanEditUserType === false || type === 1" @change="handleChangeGroup">
             <template v-for="group of hospitalGroupList">
               <el-option :key="group.Id" :label="group.Name" :value="group.Id" />
             </template>
           </el-select>
         </div>
       </el-form-item>
+      <el-form-item :label="$t('system:userlist:table:HospitalGroupIdList')"
+        :prop="hasPermi(['role:ga']) ? 'groups' : ''" v-else>
+        <div style="display: flex; align-items: center">
+          <el-select ref="userType" v-model="groups" size="small" placeholder="Please select" multiple
+            style="width: 100%" :disabled="user.CanEditUserType === false || type === 1" @change="handleChangeGroup">
+            <template v-for="group of hospitalGroupList">
+              <el-option :key="group.Id" :label="group.Name" :value="group.Id" />
+            </template>
+          </el-select>
+          <el-button type="primary" size="small" style="margin-left: 5px" v-if="type === 1" @click.stop="openGroupList">
+            {{ $t('system:userlist:button:groups') }}
+          </el-button>
+        </div>
+      </el-form-item>
       <el-form-item :label="$t('system:userlist:table:UserType')" prop="Roles" v-if="type === 0">
         <div style="display: flex; align-items: center">
           <el-select ref="userType" v-model="user.Roles" size="small" placeholder="Please select" multiple
@@ -97,6 +111,8 @@
     </el-form-item>
     <roleList v-if="visible" :visible.sync="visible" :userId="userId" :list="userRoleList"
       :userTypeOptions="userTypeOptions" @getRoleList="getRoleList" />
+    <groupList v-if="group_visible" :visible.sync="group_visible" :userId="userId" :list="userGroupList"
+      :hospitalGroupList="hospitalGroupList" @getGroupList="getGroupList" />
   </el-form>
 </template>
 <script>
@@ -108,12 +124,13 @@ import {
   getHospitalGroupList
 } from '@/api/admin.js'
 import roleList from './roleList.vue'
+import groupList from './groupList.vue'
 export default {
   name: 'UserInfo',
   props: {
     userId: { type: String, default: '' },
   },
-  components: { roleList },
+  components: { roleList, groupList },
   created() {
     this.getUserTypeList()
     if (this.userId !== '') {
@@ -135,6 +152,37 @@ export default {
         console.log(err)
       }
     },
+    getGroupList() {
+      this.user.HospitalGroupList = []
+      this.groups = []
+      this.user.groups = []
+      this.userGroupList.forEach(item => {
+        this.user.HospitalGroupList.push(Object.assign({}, item))
+        if (!item.IsDisabled) {
+          this.groups.push(item.HospitalGroupId)
+          this.user.groups.push(item.HospitalGroupId)
+        }
+      })
+
+    },
+    openGroupList() {
+      this.userGroupList = []
+      this.user.HospitalGroupList.forEach((item) => {
+        this.userGroupList.push(Object.assign({}, item))
+      })
+      this.group_visible = true
+    },
+    handleChangeGroup(val) {
+      this.user.HospitalGroupList = []
+      val.forEach((item) => {
+        let data = this.hospitalGroupList.find((d) => d.Id === item)
+        this.user.HospitalGroupList.push({
+          HospitalGroupId: data.Id,
+          Name: data.Name,
+          IsDisabled: false,
+        })
+      })
+    },
     openRoleList() {
       this.userRoleList = []
       this.user.UserRoleList.forEach((item) => {
@@ -236,6 +284,8 @@ export default {
         this.Roles = []
         this.user.Roles = []
         this.user.UserRoleList = []
+        this.groups = []
+        this.user.groups = []
         res.Result.AccountList.forEach((item) => {
           if (!item.IsUserRoleDisabled) {
             this.Roles.push(item.UserTypeId)
@@ -248,6 +298,12 @@ export default {
             UserTypeShortName: item.UserTypeShortName,
           })
         })
+        res.Result.HospitalGroupList.forEach(item => {
+          if (!item.IsDisabled) {
+            this.groups.push(item.HospitalGroupId)
+            this.user.groups.push(item.HospitalGroupId)
+          }
+        })
       })
     },
     getRoleList() {
@@ -298,7 +354,9 @@ export default {
     }
     return {
       userRoleList: [],
+      userGroupList: [],
       Roles: [],
+      groups: [],
       user: {
         Roles: [],
         UserRoleList: [],
@@ -313,10 +371,12 @@ export default {
         OrganizationName: '',
         DepartmentName: '',
         PositionName: '',
-        HospitalGroupIdList: [],
+        HospitalGroupList: [],
+        groups: [],
         IsTestUser: false,
       },
       visible: false,
+      group_visible: false,
       userFormRules: {
         UserName: [
           { required: true, validator: validatePassword, trigger: 'blur' },
@@ -329,7 +389,7 @@ export default {
             trigger: ['blur', 'change'],
           },
         ],
-        HospitalGroupIdList: [
+        groups: [
           {
             required: true,
             type: 'array',

src/views/system/user/components/groupList.vue

@@ -0,0 +1,162 @@
+<template>
+    <el-dialog v-if="visible" :visible.sync="visible" v-dialogDrag width="540px" :close-on-click-modal="false"
+        :close-on-press-escape="false" append-to-body :title="$t('system:userlist:roleList:title')"
+        :before-close="cancel">
+        <el-button size="mini" type="primary" @click.stop="openAdd" style="float: right">
+            {{ $t('common:button:new') }}
+        </el-button>
+        <el-table :data="list" style="width: 100%" max-height="300px" v-loading="loading">
+            <el-table-column type="index" width="40" />
+            <el-table-column prop="Name" :label="$t('system:userlist:roleList:table:groupName')" />
+            <el-table-column prop="IsDisabled" :label="$t('system:userlist:roleList:table:groupIsDisabled')">
+                <template slot-scope="scope">
+                    <span> {{ $fd('IsEnable', !scope.row.IsDisabled) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column :label="$t('common:action:action')" min-width="120px">
+                <template slot-scope="scope">
+                    <el-button size="mini" type="text" :disabled="scope.row.IsDisabled"
+                        @click.stop="scope.row.IsDisabled = true">
+                        {{ $fd('IsEnable', false) }}
+                    </el-button>
+                    <el-button size="mini" type="text" :disabled="!scope.row.IsDisabled"
+                        @click.stop="scope.row.IsDisabled = false">
+                        {{ $fd('IsEnable', true) }}
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div slot="footer">
+            <!-- 保存 -->
+            <el-button type="primary" :loading="loading" size="small" @click="save">
+                {{ $t('common:button:confirm') }}
+            </el-button>
+            <!-- 取消 -->
+            <el-button size="small" @click="cancel">
+                {{ $t('common:button:cancel') }}
+            </el-button>
+        </div>
+        <el-dialog v-if="addVisible" :visible.sync="addVisible" v-dialogDrag :close-on-click-modal="false"
+            :close-on-press-escape="false" append-to-body width="540px"
+            :title="$t('system:userlist:groupList:addTitle')">
+            <el-form ref="addForm" :model="form" :rules="rule" label-width="80px">
+                <el-form-item :label="$t('system:userlist:table:groupName')">
+                    <el-select v-model="form.groups" size="small" placeholder="" multiple style="width: 100%">
+                        <template v-for="item of groupList">
+                            <el-option :key="item.Id" :label="item.UserType" :value="item.Id" />
+                        </template>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <div slot="footer">
+                <!-- 保存 -->
+                <el-button type="primary" size="small" @click="saveAdd">
+                    {{ $t('common:button:confirm') }}
+                </el-button>
+                <!-- 取消 -->
+                <el-button size="small" @click="addVisible = false">
+                    {{ $t('common:button:cancel') }}
+                </el-button>
+            </div>
+        </el-dialog>
+    </el-dialog>
+</template>
+<script>
+import { updateUserHospitalGroupInfo } from '@/api/admin.js'
+export default {
+    name: 'groupList',
+    props: {
+        userId: { type: String, default: '' },
+        visible: {
+            type: Boolean,
+            default: false,
+        },
+        list: {
+            type: Array,
+            default: () => {
+                return []
+            },
+        },
+        hospitalGroupList: {
+            type: Array,
+            default: () => {
+                return []
+            },
+        },
+    },
+    data() {
+        return {
+            addVisible: false,
+            loading: false,
+            form: {
+                groups: [],
+            },
+            rule: {
+                groups: [
+                    {
+                        required: true,
+                        message: 'Please Select',
+                        trigger: ['blur', 'change'],
+                    },
+                ],
+            },
+        }
+    },
+    computed: {
+        groupList() {
+            let arr = this.list.map((item) => item.HospitalGroupId)
+            return this.hospitalGroupList.filter(
+                (item) =>
+                    !arr.includes(item.Id)
+            )
+        },
+    },
+    methods: {
+        cancel() {
+            this.$emit('update:visible', false)
+        },
+        openAdd() {
+            this.form.groups = []
+            this.addVisible = true
+        },
+        async save() {
+            try {
+                let data = {
+                    Id: this.userId,
+                    HospitalGroupList: this.list,
+                }
+                this.loading = true
+                let res = await updateUserHospitalGroupInfo(data)
+                this.loading = false
+                if (res.IsSuccess) {
+                    this.$message.success(this.$t('common:message:updatedSuccessfully'))
+                    this.$emit('update:visible', false)
+                    this.$emit('getGroupList')
+                }
+            } catch (err) {
+                this.loading = false
+                console.log(err)
+            }
+        },
+        async saveAdd() {
+            try {
+                let validate = await this.$refs.addForm.validate()
+                if (!validate) return
+                let arr = this.hospitalGroupList.filter((item) =>
+                    this.form.groups.includes(item.Id)
+                )
+                arr.forEach((item) => {
+                    this.list.push({
+                        HospitalGroupId: item.Id,
+                        IsDisabled: false,
+                        Name: item.Name,
+                    })
+                })
+                this.addVisible = false
+            } catch (err) {
+                console.log(err)
+            }
+        },
+    },
+}
+</script>