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

<template>
    <SearchRow :title="t('dict.title')" :del="false" @query="query" @add="addDict">
        <NoobInput v-model="example.name" :placeholder="t('dict.example.0')" />
        <NoobInput v-model="example.code" :placeholder="t('dict.example.1')" />
        <NoobSelect v-model="example.status" dict="active_status" :placeholder="t('dict.example.2')" />
    </SearchRow>
    <ListTable @query="query" :props="props" :example="example" :page="true" :data="result" rowKey="code"
        :treeProps="{ children: 'children' }">
        <template #status="{ row }">
            <div slot="reference" class="name-wrapper">
                <NoobTag v-if="row.status == 'A'">
                    {{ t('base.active') }}
                </NoobTag>
                <NoobTag v-else type="danger">
                    {{ t('base.inactive') }}
                </NoobTag>
            </div>
        </template>
        <template #action="{ row }">
            <TableAction :add="row.parent == null" @modify="modify(row)" @del="delate(row)" @add="addDict(row)"/>
        </template>
    </ListTable>

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

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { Api, PageExample, PageResult, ListTable, SearchRow, NoobInput, NoobSelect, TableAction, NoobTag, ModifyForm, Element } from "noob-mengyxu";
import { useI18n } from "vue3-i18n";
const { t } = useI18n();
const { SimpleRequired } = Element;
const { state, commit, dispatch } = useStore();
const { list, add, set, del } = Api.dictionary;
const result = ref(new PageResult());
const example = reactive<any>(new PageExample());
const flag = reactive({
    modify: false,
    add: false
})
const dict = ref<any>();
const form = ref();

const props = [
    { i18n: 'dict.prop.0', code: 'name', width: 180, align: 'left' },
    { i18n: 'dict.prop.1', code: 'code', width: 180 },
    { i18n: 'dict.prop.2', code: 'desc', width: 300 },
    { i18n: 'dict.prop.3', code: 'status', slot: true, width: 120 },
    { i18n: 'dict.prop.4', code: 'action', slot: true, type: 'action', width: 180, fixed: 'right' },
]

const items = [
    { i18n: 'dict.prop.1', code: 'code', slot: true },
    { i18n: 'dict.prop.0', code: 'name' },
    { i18n: 'dict.prop.2', code: 'desc' },
    { i18n: 'dict.prop.3', code: 'status', dict: 'active_status' },
]

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

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

const addDict = (row) => {
    form.value?.clearValidate();
    flag.modify = true;
    flag.add = true;
    dict.value = { status: 'A' }
    row && (dict.value.parent = row.code);
}

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

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

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

onMounted(() => {
    query();
});
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>