perf(消息新增功能模块): 换动态表单为静态表单

src/views/system/message/components/message-edit.vue

@@ -20,116 +20,103 @@
     @cancel="handleCancel"
   >
     <template #title>{{ modalTitle }}</template>
-      <DynamicForm :prem="fieIds" />
+<!--      <DynamicForm :prem="fieIds" />-->
-<!--    <a-form ref="CreateRef" :model="formData" :style="{ width: '650px' }">-->
+    <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="attachmentIds"-->
-<!--        field="userId"-->
+<!--        label='附件'-->
-<!--        :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']"-->
 <!--      >-->
 <!--        &lt;!&ndash;        v-if="isCreate"&ndash;&gt;-->
 <!--        <a-input-->
-<!--          v-if="remark.component==='input'"-->
+<!--          type="file"-->
-<!--          v-model="formData.attachment"-->
+<!--          v-model="formData.attachmentIds"-->
-<!--          :type="remark.type"-->
-<!--          placeholder='请输入备注'-->
 <!--        />-->
 <!--      </a-form-item>-->
-<!--      <div style="display: flex;margin-left: 75px">-->
+      <a-form-item field="content" label='内容' :rules="[{ required: true}]">
-<!--        <a-form-item-->
+        <div style="border: 1px solid #ccc;min-width: 700px">
-<!--          v-if="sms"-->
+          <Toolbar
-<!--          field="sms"-->
+            style="border-bottom: 1px solid #ccc"
-<!--          :label="sms.label"-->
+            :editor="editorRef"
-<!--          :validate-trigger="['change', 'input']"-->
+            :default-config="toolbarConfig"
-<!--        >-->
+            :mode="mode"
-<!--          <a-switch-->
+            :class="{'fullscreen-toolbar': isFullScreen}"
-<!--            v-if="sms.component==='switch'"-->
+          />
-<!--            v-model="formData.sms"-->
+          <Editor
-<!--            :checked-value="true"-->
+            v-model="formData.content"
-<!--            :unchecked-value="false"-->
+            style="overflow-y: hidden;height: 200px;"
-<!--          />-->
+            :default-config="editorConfig"
-<!--        </a-form-item>-->
+            :mode="mode"
-<!--        <a-form-item-->
+            :class="{'fullscreen-editor': isFullScreen}"
-<!--          v-if="email"-->
+            @on-created="handleCreated"
-<!--          field="email"-->
+          />
-<!--          :label="email.label"-->
+        </div>
-<!--          :validate-trigger="['change', 'input']"-->
+        <!--        <a-textarea v-model="formData.content" placeholder="请输入公告内容" style="height: 100px" />-->
-<!--        >-->
+      </a-form-item>
-<!--          <a-switch-->
+    </a-form>
-<!--            v-if="email.component==='switch'"-->
-<!--            v-model="formData.email"-->
-<!--            :checked-value="true"-->
-<!--            :unchecked-value="false"-->
-<!--          />-->
-<!--        </a-form-item>-->
-
-<!--      </div>-->
-<!--&lt;!&ndash;      <a-form-item&ndash;&gt;-->
-<!--&lt;!&ndash;        field="attachmentIds"&ndash;&gt;-->
-<!--&lt;!&ndash;        label='附件'&ndash;&gt;-->
-<!--&lt;!&ndash;      >&ndash;&gt;-->
-<!--&lt;!&ndash;        &lt;!&ndash;        v-if="isCreate"&ndash;&gt;&ndash;&gt;-->
-<!--&lt;!&ndash;        <a-input&ndash;&gt;-->
-<!--&lt;!&ndash;          type="file"&ndash;&gt;-->
-<!--&lt;!&ndash;          v-model="formData.attachmentIds"&ndash;&gt;-->
-<!--&lt;!&ndash;        />&ndash;&gt;-->
-<!--&lt;!&ndash;      </a-form-item>&ndash;&gt;-->
-<!--      <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>-->
-<!--        &lt;!&ndash;        <a-textarea v-model="formData.content" placeholder="请输入公告内容" style="height: 100px" />&ndash;&gt;-->
-<!--      </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(
+  // const fieIds = ref(
-    {
+  //   {
-      userId:{
+  //     userId:{
-        label: '用戶',
+  //       label: '用戶',
-        component: 'input',
+  //       component: 'input',
-        type:'text'
+  //       type:'text'
-      },
+  //     },
-      title:{
+  //     title:{
-        label: '标题',
+  //       label: '标题',
-        component: 'input',
+  //       component: 'input',
-        type:'text'
+  //       type:'text'
-      },
+  //     },
-      remark:{
+  //     remark:{
-        label: '备注',
+  //       label: '备注',
-        component: 'input',
+  //       component: 'input',
-        type:'text'
+  //       type:'text'
-      },
+  //     },
-      sms:{
+  //     sms:{
-        label: '短信',
+  //       label: '短信',
-        component: 'switch',
+  //       component: 'switch',
-        type:'switch'
+  //       type:'switch'
-      },
+  //     },
-      email:{
+  //     email:{
-        label: '邮件',
+  //       label: '邮件',
-        component:'switch',
+  //       component:'switch',
-        type:'switch'
+  //       type:'switch'
-      },
+  //     },
-      attachmentIds:{
+  //     attachmentIds:{
-        label: '附件',
+  //       label: '附件',
-        component: 'input',
+  //       component: 'input',
-        type:'text'
+  //       type:'text'
-      },
+  //     },
-      richEditor:{
+  //     richEditor:{
-        label: '内容',
+  //       label: '内容',
-        component: 'input',
+  //       component: 'input',
-        type:'text'
+  //       type:'text'
-      },
+  //     },
-    },
+  //   },
-  );
+  // );
-  const { userId, title, remark, sms, email, richEditor } = fieIds.value;
   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);
   };
 
   // 部门树模态框