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

<template>
    <SearchRow :title="t('config.title')" :del="false" :add="false" @query="query"></SearchRow>

    <ListTable @query="query" :props="props" :example="example" :page="true" :data="result">
        <template #action="{ row }">
            <TableAction @modify="modify(row)" :del="false">
            </TableAction>
        </template>
    </ListTable>

    <el-dialog :title="t('base.modify') + t('config.name')" v-model="flag.modify" :close-on-click-modal="false"
        top="15vh" width="40%" @keydown.enter.native="confirm">
        <ModifyForm ref="form" :param="config" :rules="rules" :items="items" @confirm="confirm" :width="100"
            @cancel="flag.modify = false">
        </ModifyForm>
    </el-dialog>
</template>

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

const { state, commit, dispatch } = useStore();
const { list, set } = Api.config;
const { SimpleRequired } = Element;
const result = ref(new PageResult());
const example = reactive<any>(new PageExample());
const flag = reactive({
    modify: false,
})
const form = ref();
const config = ref<any>();

const props = [
    { i18n: 'config.prop.0', code: 'cfgKey', width: 120 },
    { i18n: 'config.prop.1', code: 'cfgName', width: 120 },
    { i18n: 'config.prop.2', code: 'cfgValue', width: 120 },
    { i18n: 'config.prop.3', code: 'cfgType', width: 120 },
    { i18n: 'config.prop.4', code: 'cfgDesc', width: 180 },
    { i18n: 'config.prop.5', code: 'cfgStatus', width: 180, dict: 'active_status' },
    { i18n: 'config.prop.6', code: 'updateTime', width: 180 },
    { i18n: 'config.prop.7', code: 'updateUser', width: 180, },
    { i18n: 'config.prop.8', code: 'action', slot: true, width: 120, fixed: 'right' }
]

const rules = {
    cfgValue: [new SimpleRequired('config.prop.2')]
}

const items = [
    { i18n: 'config.prop.2', code: 'cfgValue' },
];

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


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

const confirm = () => {
    set(config.value).then(query)
}

onMounted(() => {
    query();
    dispatch("getDictMap", ['active_status'])
});
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类</style>