You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.6 KiB
80 lines
2.6 KiB
<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' }, |
|
{ i18n: 'config.prop.4', code: 'cfgDesc' }, |
|
]; |
|
|
|
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> |