iot-fontend/src/views/notification/notice/components/message-edit.vue

<template>
  <a-button
    v-permission="['message:notice:create']"
    v-if="props.isCreate"
    type="primary"
    @click="handleClick"
  >
    <template #icon><icon-plus /></template>
    新建
  </a-button>
  <a-button
    v-permission="['message:notice:update']"
    v-if="!props.isCreate"
    type="outline"
    size="small"
    :style="{ marginRight: '10px', padding: '7px' }"
    @click="handleClick"
  >
    <template #icon><icon-edit /></template>
    修改
  </a-button>

  <a-modal
    width="900px"
    height="500px"
    :visible="visible"
    @cancel="handleCancel"
  >
    <template #title>{{ modalTitle }}</template>
    <!--      <DynamicForm :prem="fieIds" />-->
    <a-form
      ref="CreateRef"
      :model="formData"
      :style="{ width: '800px', height: '420px' }"
    >
      <a-form-item
        field="userId"
        label="用户"
        :validate-trigger="['change', 'input']"
        :rules="[{ message: '请输入用戶' }]"
      >
        <a-input-tag
          v-model="selectedNames"
          placeholder="请选择用戶"
          :max-tag-count="5"
          readonly
          @click="queryDeptTree"
        />
      </a-form-item>
      <a-form-item
        field="type"
        label="类型"
        :validate-trigger="['change', 'input']"
        :rules="[{ required: true, message: '请选择类型' }]"
      >
        <a-select
          v-model="formData.type"
          placeholder="请选择类型"
          :options="messageType"
        />
      </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.remark" placeholder="请输入备注" />
      </a-form-item>
      <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>
      <!--      <a-form-item-->
      <!--        field="attachmentIds"-->
      <!--        label='附件'-->
      <!--      >-->
      <!--        &lt;!&ndash;        v-if="isCreate"&ndash;&gt;-->
      <!--        <a-input-->
      <!--          type="file"-->
      <!--          v-model="formData.attachmentIds"-->
      <!--        />-->
      <!--      </a-form-item>-->
      <a-form-item field="content" label="内容" :rules="[{ required: true }]">
        <div style="border: 1px solid #ccc; min-width: 600px">
          <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; min-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
      >
    </template>
  </a-modal>

  <!--  部门树模态框-->
  <a-modal width="900px" :visible="deptVisible" @cancel="deptTreeCancel">
    <template #title>发送用户</template>
    <div style="display: flex">
      <a-card style="margin-right: 10px; width: 30%">
        <a-tree
          :data="deptTreeData"
          :field-names="{ title: 'name', key: 'id', children: 'children' }"
          style="margin-bottom: 8px; max-width: 240px"
          @select="handleClickTree"
        >
        </a-tree>
      </a-card>
      <a-card style="flex: 1">
        <a-button
          type="primary"
          style="margin-bottom: 10px"
          @click="handleCheckAllUsers"
          >全选</a-button
        >
        <a-table :data="renderData" :columns="columns">
          <template #id="{ record }">
            <a-checkbox v-model="selectedIds" :value="record.id"> </a-checkbox>
          </template>
          <template #name="{ record }">
            {{ record.username }}
          </template>
        </a-table>
      </a-card>
    </div>
    <template #footer>
      <a-button class="editor-button" @click="deptTreeCancel">取消</a-button>
      <a-button class="editor-button" type="primary" @click="deptTreeSubmit"
        >确定</a-button
      >
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import useVisible from '@/hooks/visible';
  import {
    computed,
    defineEmits,
    PropType,
    ref,
    shallowRef,
    onBeforeUnmount,
    onMounted,
  } from 'vue';
  import { CreateRecord } from '@/api/user';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { Message } from '@arco-design/web-vue';
  import { useMessageStore, useUserStore } from '@/store';
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
  import { IEditorConfig } from '@wangeditor/editor';
  import '@wangeditor/editor/dist/css/style.css';
  import { getAllDeptTree } from '@/api/dept';

  const props = defineProps({
    prem: {
      type: Object as PropType<CreateRecord>,
    },
    isCreate: Boolean,
  });
  // 部门树模态框状态
  const userStore = useUserStore();
  const deptVisible = ref(false);
  const emit = defineEmits(['refresh']);
  const modalTitle = computed(() => {
    return props.isCreate ? '创建消息' : '编辑消息';
  });
  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>({
    sms: false,
    email: false,
    ...props.prem,
  });
  const messageStore = useMessageStore();
  const isFullScreen = ref(false);
  const mode = 'default';
  const selectedIds = ref<number[]>([]);
  const selectedNames = ref<string[]>([]);

  const toolbarConfig = {
    excludeKeys: ['uploadVideo', 'insertImage', 'insertVideo'],
  };
  const columns = computed<any[]>(() => [
    {
      title: '操作',
      dataIndex: 'id',
      slotName: 'id',
    },
    {
      title: '用户',
      dataIndex: 'username',
    },
  ]);

  const deptTreeData = ref([
    {
      id: '1',
      name: '总部门',
      children: [
        {
          id: '2',
          name: '部门1',
          members: [
            { id: '101', username: '成员1' },
            { id: '102', username: '成员2' },
          ],
        },
        {
          id: '3',
          name: '部门2',
          members: [
            { id: '201', username: '成员3' },
            { id: '202', username: '成员4' },
          ],
        },
        {
          id: '4',
          name: '部门3',
          members: [
            { id: '203', username: '成员5' },
            { id: '204', username: '成员6' },
          ],
        },
      ],
    },
  ]);
  const renderData = ref<any[]>([]);
  const messageType = computed(() => [
    {
      label: '消息',
      value: 'MESSAGE',
    },
    {
      label: '通知',
      value: 'NOTICE',
    },
  ]);
  // 获取部门树
  const getDeptTree = async (deptId: number) => {
    const res = await getAllDeptTree(deptId || 0);
    if (res.status === 200) {
      deptTreeData.value = res.data;
    }
  };
  // 部门树查询
  const queryDeptTree = async () => {
    deptVisible.value = true;
  };

  // 获取用户列表
  const fetchData = async (deptId: number) => {
    try {
      const res = await userStore.getUserList({
        deptId,
      });
      renderData.value = res.data.records;
      console.log(renderData);
    } catch (err) {
      // you can report use errorHandler or other
    }
  };

  // 部门树被点击
  const handleClickTree = (id: number[]) => {
    const [deptId] = id;
    fetchData(deptId);
  };

  // 组件被点击
  const handleClick = () => {
    setVisible(true);
  };

  const editorConfig: Partial<IEditorConfig> = {
    placeholder: '请输入内容...',
    MENU_CONF: {
      // 隐藏菜单
      hide: [
        'code',
        'table',
        'emoticon',
        'uploadImage',
        'video',
        'todo',
        'specialChar',
      ],
      // 配置上传图片
      uploadImage: {
        base64LimitSize: 1024 * 1024,
        // server: '/api/rest/bulletin/1/add',
      },
    },
  };
  // 提交
  const handleSubmit = async () => {
    const valid = await CreateRef.value?.validate();
    if (!valid) {
      // 新增
      if (props.isCreate) {
        formData.value.html = true;
        // formData.value.username = formData.value.email;
        const res = await messageStore.createMessage(formData.value);
        if (res.status === 200) {
          Message.success({
            content: '新建成功',
            duration: 5 * 1000,
          });
          emit('refresh');
          setVisible(false);
        }
        CreateRef.value?.resetFields();
      }
    }
  };

  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
  });

  // 关闭
  const handleCancel = async () => {
    checkKeys.value = [];
    setVisible(false);
  };

  const getNamesByIds = (ids: number[]) => {
    return ids
      .map((id) => renderData.value.find((dept) => dept.id === id)?.username)
      .filter((username) => username !== undefined) as string[];
  };

  // 部门树模态框提交
  const deptTreeSubmit = () => {
    deptVisible.value = false;
    formData.value.userIds = selectedIds.value;
    selectedNames.value = getNamesByIds(selectedIds.value);
    console.log(selectedNames.value);
  };

  // 选择所有用户
  const handleCheckAllUsers = () => {
    if (selectedIds.value.length === 0) {
      // 遍历 renderData 并提取所有用户的 id
      selectedIds.value = renderData.value.map((user) => user.id);
    } else {
      selectedIds.value = [];
    }
  };

  // 部门树模态框
  const deptTreeCancel = () => {
    deptVisible.value = false;
  };
  onMounted(async () => {
    await getDeptTree(0);
  });
</script>

<style scoped>
  .fullscreen-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px; /* 根据需要调整高度 */
    z-index: 999;
    background-color: white;
  }
  .fullscreen-editor {
    position: fixed;
    top: 50px; /* 根据 toolbar 的高度调整 */
    left: 0;
    width: 100%;
    height: calc(100% - 50px); /* 减去 toolbar 的高度 */
    z-index: 999;
    background-color: white;
  }
  .editor-button {
    position: static;
  }
</style>