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

<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:button:groups')"
        :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.Name" :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>