noob-components/packages/manage/views/role.vue

<template>
    <SearchRow :title="t('role.title')" :del="false" :query="false" @query="query" @add="addRole"></SearchRow>
    <ListTable @query="query" :props="props" :example="example" :data="result">
        <template #action="{ row }">
            <TableAction v-if="row.roleStatus == 'E'" @modify="modify(row)" @del="delate(row)">
                <el-tooltip effect="dark" :content="t('role.setPer.0')" placement="right">
                    <el-button :size="state.size.size" type="success" @click="permission(row)" icon="Setting" circle />
                </el-tooltip>
            </TableAction>
        </template>
    </ListTable>

    <el-dialog :title="t('base.add') + t('role.name')" v-model="flag.modify" :close-on-click-modal="false" top="15vh"
        width="40%" @keydown.enter.native="confirm">
        <ModifyForm ref="form" :param="role" :rules="rules" :items="items" @confirm="confirm" :width="100"
            @cancel="flag.modify = false">
            <template #roleCode>
                <NoobInput v-model="role.roleCode" full :placeholder="t('rule.pleaseEnter') + t('role.prop.0')"
                    :disabled="!flag.add" />
            </template>
        </ModifyForm>
    </el-dialog>

    <el-dialog :title="t('role.setPer.0')" v-model="flag.per" :close-on-click-modal="false" top="15vh" width="40%"
        @keydown.enter.native="setPermission">
        <el-tree :size="state.size.size" ref="permissionTree" check-strictly :data="permissions" show-checkbox node-key="id"
            :default-checked-keys="role.permissions" :props="{ children: 'children', label: 'name' }" render-after-expand
            @check-change="checkChange" class="permissionTree" />

        <div slot="footer" class="dialog-footer">
            <NoobButton type="primary" @click="setPermission">{{ t('base.confirm') }}</NoobButton>
            <NoobButton type="info" @click="flag.per = false">{{ t('base.cancel') }}</NoobButton>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { Api, ListTable, SearchRow, NoobInput, TableAction, NoobTag, NoobButton, ModifyForm, Element } from "noob-mengyxu";
import { useI18n } from "vue3-i18n";
const { t } = useI18n();

const { state, commit, dispatch } = useStore();
const { list, add, set, del } = Api.role;
const { tree } = Api.permission;
const { SimpleRequired, SimpleCharacter } = Element;

const result = ref([]);
const example = reactive<any>({});
const flag = reactive({
    modify: false,
    add: false,
    per: false
})
const form = ref();
const permissionTree = ref();
const role = ref<any>({});
const permissions = ref<any>([]);

const props = [
    { i18n: 'role.prop.0', code: 'roleCode', width: 120 },
    { i18n: 'role.prop.1', code: 'roleName', width: 120 },
    { i18n: 'role.prop.2', code: 'roleDesc', width: 180 },
    { i18n: 'role.prop.3', code: 'roleStatus', dict: 'role_status', width: 180 },
    { i18n: 'role.prop.4', code: 'action', slot: true, width: 180, fixed: 'right' }
]

const rules = {
    roleCode: [new SimpleRequired('role.prop.0'), new SimpleCharacter(32, 4)],
    roleName: [new SimpleRequired('role.prop.1'), new SimpleCharacter(15, 2)],
    roleDesc: [new SimpleRequired('role.prop.2'), new SimpleCharacter(100)],
}

const items = [
    { i18n: 'role.prop.0', code: 'roleCode', slot: true },
    { i18n: 'role.prop.1', code: 'roleName' },
    { i18n: 'role.prop.2', code: 'roleDesc' }
]

const query = () => {
    list(example).then((rsp: any) => result.value = rsp)
}

const addRole = () => {
    role.value = {};
    form.value?.clearValidate();
    flag.add = true;
    flag.modify = true;
}

const modify = row => {
    role.value = JSON.parse(JSON.stringify(row))
    form.value?.clearValidate();
    flag.add = false;
    flag.modify = true;
}

const delate = row => {
    Element.confirm(t('role.delete.0'), t('role.delete.1')).then(() => {
        del(row).then(() => {
            commit('updateState', ['roleRefresh', true]);
            query();
        });
    })
}

const confirm = () => {
    const api = flag.add ? add : set;
    api(role.value).then(rsp => {
        if (rsp) {
            query();
            flag.modify = false;
            commit('updateState', ['roleRefresh', true]);
        }
    })
}

const permission = (row) => {
    role.value = JSON.parse(JSON.stringify(row))
    role.value.flag = true;
    permissionTree.value?.setCheckedNodes(role.value.permissions)
    flag.per = true;
}

const setPermission = () => {
    role.value.permissions = permissionTree.value?.getCheckedKeys();
    set(role.value).then(rsp => {
        if (rsp) {
            query();
            flag.per = false;
        }
    })
}

const checkChange = (data, checked) => {
    const child = permissionTree.value?.getNode(data).childNodes
    if (child != null && child.length > 0) {
        for (let i = 0; i < child.length; i++) {
            child[i].checked = checked
            checkChange(data.children[i], checked)
        }
    }
}

onMounted(() => {
    query();
    tree().then(rsp => permissions.value = rsp);
    dispatch("getDictMap", ["role_status"]);
});
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.permissionTree {
    min-height: 500px;
}
</style>