<script lang="ts" setup>
|
import { reactive, ref, toRefs } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { useModal } from '@jnpf/ui/modal';
|
import { BasicPopup, usePopup, usePopupInner } from '@jnpf/ui/popup';
|
import { formValidate } from '@jnpf/utils';
|
|
import { Grid as VxeGrid } from 'vxe-table';
|
|
import { create, getInfo, update } from '#/api/msgCenter/sendConfig';
|
import { $t } from '#/locales';
|
import { useBaseStore } from '#/store';
|
|
import Detail from '../msgTemplate/Detail.vue';
|
import TemplateForm from './components/TemplateForm.vue';
|
|
const emit = defineEmits(['register', 'reload']);
|
|
interface State {
|
title: string;
|
dataForm: any;
|
dataRule: any;
|
messageTypeList: any[];
|
messageSourceList: any[];
|
refreshKey: number;
|
}
|
|
const state = reactive<State>({
|
title: '',
|
dataForm: {
|
id: '',
|
fullName: '',
|
enCode: '',
|
description: '',
|
enabledMark: 1,
|
sortCode: 0,
|
messageSource: '',
|
templateType: 0,
|
sendConfigTemplateList: [],
|
},
|
dataRule: {
|
fullName: [{ required: true, message: '必填', trigger: 'blur' }],
|
enCode: [
|
{ required: true, message: '必填', trigger: 'blur' },
|
{ validator: formValidate('enCode'), trigger: 'blur' },
|
],
|
messageSource: [{ required: true, message: '必填', trigger: 'change' }],
|
messageType: [{ required: true, message: '必填', trigger: 'change' }],
|
},
|
messageTypeList: [],
|
messageSourceList: [],
|
refreshKey: 0,
|
});
|
const { dataForm, dataRule, title, messageSourceList, refreshKey } = toRefs(state);
|
const formElRef = ref();
|
const baseStore = useBaseStore();
|
const { createMessage, createConfirm } = useMessage();
|
const [registerPopup, { changeLoading, changeOkLoading, closePopup }] = usePopupInner(init);
|
const [registerTemplateForm, { openModal: openTemplateFormModal }] = useModal();
|
const [registerDetail, { openPopup: openDetailPopup }] = usePopup();
|
const columns: any[] = [
|
{ title: $t('component.table.index'), width: 50, type: 'seq', align: 'center' },
|
{ title: '消息类型', field: 'messageType', width: 150, slots: { default: 'messageType' } },
|
{ title: '模板编码', field: 'templateCode', width: 150 },
|
{ title: '模板名称', field: 'templateName', minWidth: 150 },
|
{ title: '账号编码', field: 'accountCode', width: 150 },
|
{ title: '账号名称', field: 'accountName', width: 150 },
|
{ title: '状态', field: 'enabledMark', width: 70, align: 'center', slots: { default: 'enabledMark' } },
|
{ title: '操作', field: 'action', width: 150, slots: { default: 'action' } },
|
];
|
|
function init(data) {
|
formElRef.value?.resetFields();
|
resetForm();
|
state.dataForm.id = data.id || '';
|
state.title = state.dataForm.id ? $t('common.editText') : $t('common.addText');
|
initData();
|
if (state.dataForm.id) {
|
changeLoading(true);
|
getInfo(state.dataForm.id)
|
.then((res) => {
|
changeLoading(false);
|
res.data.enabledMark = Number(res.data.enabledMark);
|
state.dataForm = res.data;
|
})
|
.catch(() => {
|
changeLoading(false);
|
});
|
}
|
}
|
async function initData() {
|
state.messageTypeList = (await baseStore.getDictionaryData('msgSendType')) as any[];
|
state.messageTypeList.map((o) => (o.id = o.enCode));
|
state.messageSourceList = (await baseStore.getDictionaryData('msgSourceType')) as any[];
|
state.messageSourceList.map((o) => (o.id = o.enCode));
|
}
|
function addTemplateData(record?: any, index?: any) {
|
if (!state.dataForm.messageSource) return createMessage.warning('请选择消息来源');
|
openTemplateFormModal(true, { row: record, index, messageSource: state.dataForm.messageSource });
|
}
|
function addEditTemplate(e, index) {
|
if (!index && index != 0) {
|
state.dataForm.sendConfigTemplateList.push(e);
|
} else {
|
state.dataForm.sendConfigTemplateList[index] = e;
|
}
|
state.refreshKey = Date.now();
|
}
|
function handleDelete(index) {
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: '删除记录，不可恢复?',
|
onOk: () => {
|
state.dataForm.sendConfigTemplateList.splice(index, 1);
|
},
|
});
|
}
|
function handleDetail(id) {
|
openDetailPopup(true, { id, msgTypeList: state.messageTypeList });
|
}
|
function resetForm() {
|
state.dataForm = {
|
id: '',
|
fullName: '',
|
enCode: '',
|
description: '',
|
enabledMark: 1,
|
sortCode: 0,
|
messageSource: '',
|
templateType: 0,
|
sendConfigTemplateList: [],
|
};
|
}
|
async function handleSubmit() {
|
try {
|
const values = await formElRef.value?.validate();
|
if (!values) return;
|
changeOkLoading(true);
|
const formMethod = state.dataForm.id ? update : create;
|
formMethod(state.dataForm)
|
.then((res) => {
|
createMessage.success(res.msg);
|
closePopup();
|
changeOkLoading(false);
|
emit('reload');
|
})
|
.catch(() => {
|
changeOkLoading(false);
|
});
|
} catch {}
|
}
|
function onMessageSourceChange() {
|
state.dataForm.sendConfigTemplateList = [];
|
}
|
function getMsgType(record) {
|
const item = state.messageTypeList.find((o) => record.messageType == o.enCode);
|
return item.fullName || '';
|
}
|
</script>
|
<template>
|
<BasicPopup v-bind="$attrs" @register="registerPopup" show-ok-btn :title="title" @ok="handleSubmit" destroy-on-close>
|
<a-form class="!mx-[20px]" :colon="false" :model="dataForm" :rules="dataRule" ref="formElRef" :label-col="{ style: { width: '100px' } }">
|
<a-row :gutter="20">
|
<a-col :span="12">
|
<a-form-item label="名称" name="fullName">
|
<a-input v-model:value="dataForm.fullName" placeholder="请输入" allow-clear />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="编码" name="enCode">
|
<a-input v-model:value="dataForm.enCode" placeholder="请输入" allow-clear />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="模板类型">
|
<a-input value="自定义模板" disabled allow-clear />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="消息来源" name="messageSource">
|
<jnpf-select
|
v-model:value="dataForm.messageSource"
|
placeholder="请选择"
|
:disabled="!!dataForm.id"
|
:options="messageSourceList"
|
@change="onMessageSourceChange" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="排序" name="sortCode">
|
<a-input-number :min="0" :max="999999" v-model:value="dataForm.sortCode" placeholder="请输入" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="状态" name="enabledMark">
|
<a-switch v-model:checked="dataForm.enabledMark" :checked-value="1" :un-checked-value="0" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="说明" name="description">
|
<a-textarea v-model:value="dataForm.description" placeholder="请输入" type="textarea" :rows="3" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<VxeGrid :data="dataForm.sendConfigTemplateList" :columns size="small" border="inner" :key="refreshKey">
|
<template #enabledMark="{ row }">
|
<a-switch v-model:checked="row.enabledMark" :checked-value="1" :un-checked-value="0" />
|
</template>
|
<template #messageType="{ row }">
|
{{ getMsgType(row) }}
|
</template>
|
<template #action="{ row, rowIndex }">
|
<a-button size="small" type="link" @click="addTemplateData(row, rowIndex)">{{ $t('common.editText') }}</a-button>
|
<a-button size="small" type="link" color="error" @click="handleDelete(rowIndex)">{{ $t('common.delText') }}</a-button>
|
<a-button size="small" type="link" @click="handleDetail(row.templateId)">{{ $t('common.detailText') }}</a-button>
|
</template>
|
</VxeGrid>
|
<div class="table-add-action" @click="addTemplateData">
|
<a-button type="link" pre-icon="icon-ym icon-ym-btn-add">{{ $t('common.addText') }}</a-button>
|
</div>
|
</a-col>
|
</a-row>
|
</a-form>
|
<TemplateForm @register="registerTemplateForm" @reload="addEditTemplate" />
|
</BasicPopup>
|
<Detail @register="registerDetail" />
|
</template>
|
