perf(消息新增功能模块): 换动态表单为静态表单
This commit is contained in:
parent
f7ef4fe1dd
commit
daf3f540a4
@ -20,116 +20,103 @@
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<template #title>{{ modalTitle }}</template>
|
||||
<DynamicForm :prem="fieIds" />
|
||||
<!-- <a-form ref="CreateRef" :model="formData" :style="{ width: '650px' }">-->
|
||||
<!-- <DynamicForm :prem="fieIds" />-->
|
||||
<a-form ref="CreateRef" :model="formData" :style="{ width: '650px' }">
|
||||
<a-form-item
|
||||
field="userId"
|
||||
label="用户"
|
||||
:validate-trigger="['change', 'input']"
|
||||
:rules="[
|
||||
{ message: '请输入用戶' },
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model="formData.userIds"
|
||||
placeholder='请选择用戶'
|
||||
:value=formData.userIds
|
||||
@click="queryDeptTree"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="title"
|
||||
label="标题"
|
||||
:validate-trigger="['change', 'input']"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入标题' },
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model="formData.title"
|
||||
placeholder='请输入消息标题'
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="remark"
|
||||
label="备注"
|
||||
:validate-trigger="['change', 'input']"
|
||||
>
|
||||
<!-- v-if="isCreate"-->
|
||||
<a-input
|
||||
v-model="formData.attachment"
|
||||
placeholder='请输入备注'
|
||||
/>
|
||||
</a-form-item>
|
||||
<div style="display: flex;margin-left: 75px">
|
||||
<a-form-item
|
||||
field="sms"
|
||||
label="短信"
|
||||
:validate-trigger="['change', 'input']"
|
||||
>
|
||||
<a-switch
|
||||
v-model="formData.sms"
|
||||
:checked-value="true"
|
||||
:unchecked-value="false"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="email"
|
||||
label="邮件"
|
||||
:validate-trigger="['change', 'input']"
|
||||
>
|
||||
<a-switch
|
||||
v-model="formData.email"
|
||||
:checked-value="true"
|
||||
:unchecked-value="false"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
</div>
|
||||
<!-- <a-form-item-->
|
||||
<!-- v-if="userId"-->
|
||||
<!-- field="userId"-->
|
||||
<!-- :label="userId.label"-->
|
||||
<!-- :validate-trigger="['change', 'input']"-->
|
||||
<!-- :rules="[-->
|
||||
<!-- { message: '请输入用戶' },-->
|
||||
<!-- ]"-->
|
||||
<!-- >-->
|
||||
<!-- <a-input-->
|
||||
<!-- v-if="userId.component==='input'"-->
|
||||
<!-- v-model="formData.userIds"-->
|
||||
<!-- :type="userId.type"-->
|
||||
<!-- placeholder='请选择用戶'-->
|
||||
<!-- :value=formData.userIds-->
|
||||
<!-- @click="queryDeptTree"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item-->
|
||||
<!-- v-if="title"-->
|
||||
<!-- field="title"-->
|
||||
<!-- :label="title.label"-->
|
||||
<!-- :validate-trigger="['change', 'input']"-->
|
||||
<!-- :rules="[-->
|
||||
<!-- { required: true, message: '请输入标题' },-->
|
||||
<!-- ]"-->
|
||||
<!-- >-->
|
||||
<!-- <a-input-->
|
||||
<!-- v-if="title.component==='input'"-->
|
||||
<!-- v-model="formData.title"-->
|
||||
<!-- :type="title.type"-->
|
||||
<!-- placeholder='请输入消息标题'-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item-->
|
||||
<!-- v-if="remark"-->
|
||||
<!-- field="remark"-->
|
||||
<!-- :label="remark.label"-->
|
||||
<!-- :validate-trigger="['change', 'input']"-->
|
||||
<!-- field="attachmentIds"-->
|
||||
<!-- label='附件'-->
|
||||
<!-- >-->
|
||||
<!-- <!– v-if="isCreate"–>-->
|
||||
<!-- <a-input-->
|
||||
<!-- v-if="remark.component==='input'"-->
|
||||
<!-- v-model="formData.attachment"-->
|
||||
<!-- :type="remark.type"-->
|
||||
<!-- placeholder='请输入备注'-->
|
||||
<!-- type="file"-->
|
||||
<!-- v-model="formData.attachmentIds"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <div style="display: flex;margin-left: 75px">-->
|
||||
<!-- <a-form-item-->
|
||||
<!-- v-if="sms"-->
|
||||
<!-- field="sms"-->
|
||||
<!-- :label="sms.label"-->
|
||||
<!-- :validate-trigger="['change', 'input']"-->
|
||||
<!-- >-->
|
||||
<!-- <a-switch-->
|
||||
<!-- v-if="sms.component==='switch'"-->
|
||||
<!-- v-model="formData.sms"-->
|
||||
<!-- :checked-value="true"-->
|
||||
<!-- :unchecked-value="false"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item-->
|
||||
<!-- v-if="email"-->
|
||||
<!-- field="email"-->
|
||||
<!-- :label="email.label"-->
|
||||
<!-- :validate-trigger="['change', 'input']"-->
|
||||
<!-- >-->
|
||||
<!-- <a-switch-->
|
||||
<!-- v-if="email.component==='switch'"-->
|
||||
<!-- v-model="formData.email"-->
|
||||
<!-- :checked-value="true"-->
|
||||
<!-- :unchecked-value="false"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
|
||||
<!-- </div>-->
|
||||
<!--<!– <a-form-item–>-->
|
||||
<!--<!– field="attachmentIds"–>-->
|
||||
<!--<!– label='附件'–>-->
|
||||
<!--<!– >–>-->
|
||||
<!--<!– <!– v-if="isCreate"–>–>-->
|
||||
<!--<!– <a-input–>-->
|
||||
<!--<!– type="file"–>-->
|
||||
<!--<!– v-model="formData.attachmentIds"–>-->
|
||||
<!--<!– />–>-->
|
||||
<!--<!– </a-form-item>–>-->
|
||||
<!-- <a-form-item v-if="richEditor" field="content" label='内容' :rules="[{ required: true}]">-->
|
||||
<!-- <div style="border: 1px solid #ccc;min-width: 700px">-->
|
||||
<!-- <Toolbar-->
|
||||
<!-- style="border-bottom: 1px solid #ccc"-->
|
||||
<!-- :editor="editorRef"-->
|
||||
<!-- :default-config="toolbarConfig"-->
|
||||
<!-- :mode="mode"-->
|
||||
<!-- :class="{'fullscreen-toolbar': isFullScreen}"-->
|
||||
<!-- />-->
|
||||
<!-- <Editor-->
|
||||
<!-- v-model="formData.content"-->
|
||||
<!-- style="overflow-y: hidden;height: 200px;"-->
|
||||
<!-- :default-config="editorConfig"-->
|
||||
<!-- :mode="mode"-->
|
||||
<!-- :class="{'fullscreen-editor': isFullScreen}"-->
|
||||
<!-- @on-created="handleCreated"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<!-- <!– <a-textarea v-model="formData.content" placeholder="请输入公告内容" style="height: 100px" />–>-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- </a-form>-->
|
||||
<a-form-item field="content" label='内容' :rules="[{ required: true}]">
|
||||
<div style="border: 1px solid #ccc;min-width: 700px">
|
||||
<Toolbar
|
||||
style="border-bottom: 1px solid #ccc"
|
||||
:editor="editorRef"
|
||||
:default-config="toolbarConfig"
|
||||
:mode="mode"
|
||||
:class="{'fullscreen-toolbar': isFullScreen}"
|
||||
/>
|
||||
<Editor
|
||||
v-model="formData.content"
|
||||
style="overflow-y: hidden;height: 200px;"
|
||||
:default-config="editorConfig"
|
||||
:mode="mode"
|
||||
:class="{'fullscreen-editor': isFullScreen}"
|
||||
@on-created="handleCreated"
|
||||
/>
|
||||
</div>
|
||||
<!-- <a-textarea v-model="formData.content" placeholder="请输入公告内容" style="height: 100px" />-->
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button class="editor-button" @click="handleCancel">取消</a-button>
|
||||
<a-button class="editor-button" type="primary" @click="handleSubmit">确定</a-button>
|
||||
@ -143,7 +130,7 @@
|
||||
@cancel="deptTreeCancel"
|
||||
>
|
||||
<template #title>发送用户</template>
|
||||
<div style="display: flex">
|
||||
<div style="display: flex;height: 520px">
|
||||
<a-card style="margin-right: 10px;width: 30%">
|
||||
<a-tree
|
||||
:data="deptTreeData"
|
||||
@ -154,6 +141,7 @@
|
||||
/>
|
||||
</a-card>
|
||||
<a-card style="flex: 1">
|
||||
<a-button type="primary" >全选</a-button>
|
||||
<a-table
|
||||
:data="selectedDepartmentMembers"
|
||||
:columns="columns"
|
||||
@ -201,23 +189,19 @@
|
||||
});
|
||||
const { visible, setVisible } = useVisible(false);
|
||||
const checkKeys = ref<number[]>([]);
|
||||
|
||||
const editorRef = shallowRef()
|
||||
const handleCreated = (editor: any) => {
|
||||
editorRef.value = editor; // 记录 editor 实例，重要！
|
||||
}
|
||||
const CreateRef = ref<FormInstance>();
|
||||
const formData = ref<any>({
|
||||
...props.prem,
|
||||
});
|
||||
const messageStore = useMessageStore();
|
||||
const editorRef = shallowRef()
|
||||
const isFullScreen = ref(false);
|
||||
const mode = 'default';
|
||||
const selectedIds= ref<string[]>([]);
|
||||
const toolbarConfig = { excludeKeys: ['uploadVideo', 'insertImage','insertVideo']}
|
||||
// const handleCreated = (editor: any) => {
|
||||
// editorRef.value = editor; // 记录 editor 实例，重要！
|
||||
// // 监听全屏事件
|
||||
// editor.on('fullScreen', () => {
|
||||
// })
|
||||
// }
|
||||
const columns = computed<any[]>(()=>[
|
||||
{
|
||||
title: '操作',
|
||||
@ -230,46 +214,45 @@
|
||||
},
|
||||
])
|
||||
|
||||
const fieIds = ref(
|
||||
{
|
||||
userId:{
|
||||
label: '用戶',
|
||||
component: 'input',
|
||||
type:'text'
|
||||
},
|
||||
title:{
|
||||
label: '标题',
|
||||
component: 'input',
|
||||
type:'text'
|
||||
},
|
||||
remark:{
|
||||
label: '备注',
|
||||
component: 'input',
|
||||
type:'text'
|
||||
},
|
||||
sms:{
|
||||
label: '短信',
|
||||
component: 'switch',
|
||||
type:'switch'
|
||||
},
|
||||
email:{
|
||||
label: '邮件',
|
||||
component:'switch',
|
||||
type:'switch'
|
||||
},
|
||||
attachmentIds:{
|
||||
label: '附件',
|
||||
component: 'input',
|
||||
type:'text'
|
||||
},
|
||||
richEditor:{
|
||||
label: '内容',
|
||||
component: 'input',
|
||||
type:'text'
|
||||
},
|
||||
},
|
||||
);
|
||||
const { userId, title, remark, sms, email, richEditor } = fieIds.value;
|
||||
// const fieIds = ref(
|
||||
// {
|
||||
// userId:{
|
||||
// label: '用戶',
|
||||
// component: 'input',
|
||||
// type:'text'
|
||||
// },
|
||||
// title:{
|
||||
// label: '标题',
|
||||
// component: 'input',
|
||||
// type:'text'
|
||||
// },
|
||||
// remark:{
|
||||
// label: '备注',
|
||||
// component: 'input',
|
||||
// type:'text'
|
||||
// },
|
||||
// sms:{
|
||||
// label: '短信',
|
||||
// component: 'switch',
|
||||
// type:'switch'
|
||||
// },
|
||||
// email:{
|
||||
// label: '邮件',
|
||||
// component:'switch',
|
||||
// type:'switch'
|
||||
// },
|
||||
// attachmentIds:{
|
||||
// label: '附件',
|
||||
// component: 'input',
|
||||
// type:'text'
|
||||
// },
|
||||
// richEditor:{
|
||||
// label: '内容',
|
||||
// component: 'input',
|
||||
// type:'text'
|
||||
// },
|
||||
// },
|
||||
// );
|
||||
const deptTreeData = reactive([
|
||||
{
|
||||
key: '1',
|
||||
@ -311,9 +294,10 @@
|
||||
|
||||
// 广度优先遍历树，获取选中的成员
|
||||
const getSelectedMembers = (treeData: any[], selectedKeys: string[]) => {
|
||||
const queue = [...treeData];
|
||||
const queue:any = [...treeData];
|
||||
const selectedMembers: any[] = [];
|
||||
while (queue.length > 0) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
const node = queue.shift()!;
|
||||
if (selectedKeys.includes(node.key)) {
|
||||
if (node.members) {
|
||||
@ -334,7 +318,7 @@
|
||||
if (key[0] === '1' || key.length === 0) {
|
||||
// 广度优先遍历树，获取所有成员
|
||||
const allMembers: any[] = [];
|
||||
const queue = [...deptTreeData];
|
||||
const queue:any = [...deptTreeData];
|
||||
while (queue.length > 0) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
const node = queue.shift()!;
|
||||
@ -433,7 +417,6 @@
|
||||
const deptTreeSubmit = () => {
|
||||
deptVisible.value = false;
|
||||
formData.value.userIds = selectedIds.value;
|
||||
console.log(formData.value.userIds);
|
||||
};
|
||||
|
||||
// 部门树模态框
|
||||
|
||||
Loading…
Reference in New Issue
Block a user