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

<template>
    <SearchRow :title="t('permission.title')" :del="false" @query="query" @add="addPermission">
        <NoobInput v-model="example.code" :placeholder="t('permission.example.0')"></NoobInput>
    </SearchRow>
    <ListTable @query="query" :props="props" :example="example" :data="result" rowKey="id"
        :treeProps="{ children: 'children' }">
        <template #desc="{ row }">
            <component class="icon" :is="row.desc"></component>
        </template>
        <template #action="{ row }">
            <TableAction :add="row.parent == null" @modify="modify(row)" @del="delate(row)" @add="addPermission(row)" />
        </template>
    </ListTable>

    <el-dialog :title="t('base.add') + t('permission.name')" v-model="flag.modify" :close-on-click-modal="false" top="15vh"
        width="40%" @keydown.enter.native="confirm">
        <ModifyForm ref="form" :param="permission" :rules="rules" :items="items" @confirm="confirm" :width="100"
            @cancel="flag.modify = false">
            <template #id>
                <NoobInput v-model="permission.id" full :placeholder="t('rule.pleaseEnter') + t('permission.prop.1')"
                    :disabled="!flag.add" />
            </template>
            <template #desc>
                <el-select-v2 :size="state.size.size" class="form-item full" v-model="permission.desc" filterable
                    :options="icons.map(i => ({ value: i, label: i }))"
                    :placeholder="t('rule.pleaseSelect') + t('permission.prop.2')">
                    <template #default="{ item }">
                        <component class="icon" :is="item.value"></component>
                        {{ item.value }}
                    </template>
                </el-select-v2>
            </template>
            <template #perOrder>
                <NoobSelect v-model="permission.perOrder" full :max-value="99"
                    :placeholder="t('rule.pleaseSelect') + t('permission.prop.4')" />
            </template>
        </ModifyForm>
    </el-dialog>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { Api, PageExample, ListTable, SearchRow, NoobInput, TableAction, NoobTag, NoobSelect, ModifyForm, Element } from "noob-mengyxu";
import { useI18n } from "vue3-i18n";
const { t } = useI18n();
const { SimpleRequired, icons } = Element;
const { state, dispatch } = useStore();
const { list, add, set, del } = Api.permission;
const result = ref([]);
const example = reactive<any>(new PageExample());
const flag = reactive({
    modify: false,
    add: false
})
const permission = ref<any>();
const form = ref();
const order = 99;
const nodeLevel = {
    module: 'group',
    group: 'view',
    view: 'action'
};

const props = [
    { i18n: 'permission.prop.0', code: 'name', width: 200, align: 'left', fixed: "left" },
    { i18n: 'permission.prop.1', code: 'id', width: 220 },
    { i18n: 'permission.prop.2', code: 'desc', slot: true, width: 80 },
    { i18n: 'permission.prop.3', code: 'perLevel', dict: 'per_level', width: 80 },
    { i18n: 'permission.prop.4', code: 'perOrder', width: 80 },
    { i18n: 'permission.prop.5', code: 'perStatus', dict: 'able_status', width: 80 },
    { i18n: 'permission.prop.6', code: 'perContent', width: 230 },
    { i18n: 'permission.prop.7', code: 'action', slot: true, width: 180, fixed: 'right' },
]

const items = [
    { i18n: 'permission.prop.1', code: 'id', slot: true },
    { i18n: 'permission.parent', code: 'perParent', disabled: true },
    { i18n: 'permission.prop.3', code: 'perLevel', dict: 'per_level', disabled: true },
    { i18n: 'permission.prop.0', code: 'name' },
    { i18n: 'permission.prop.6', code: 'perContent' },
    { i18n: 'permission.prop.2', code: 'desc', slot: true },
    { i18n: 'permission.prop.4', code: 'perOrder', slot: true },
    { i18n: 'permission.prop.5', code: 'perStatus', dict: 'able_status' },
]

const rules = {
    id: [new SimpleRequired('dict.prop.1')],
    name: [new SimpleRequired('dict.prop.0')],
}

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

const addPermission = (row) => {
    permission.value = { perStatus: 'A' }
    if (row) {
        permission.value.perParent = row.id
        permission.value.perLevel = nodeLevel[row.perLevel]
    } else {
        permission.value.perLevel = 'group';
    }
    form.value?.clearValidate();
    flag.modify = true;
    flag.add = true;
}

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

const delate = (row) => {
    Element.confirm(t('permission.delete.0'), t('permission.delete.1')).then(() => {
        del(row).then(query);
    })
}

const confirm = () => {
    const api = flag.add ? add : set;
    api(permission.value).then(rsp => {
        if (rsp) {
            query();
            flag.modify = false;
        }
    })
}

onMounted(() => {
    dispatch('getDictMap', ['per_level', 'able_status'])
    query();
});
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.icon {
    // margin-left: -15px;
    margin-right: 10px;
    width: 18px;
    height: 18px;
    // width: v-bind('state.size.menuIconSize');
    // height: v-bind('state.size.menuIconSize');
}
</style>