部分功能

huangyinfeng

6 天以前 a9a03d64cf190188d3db04d14970fc0908b03491

 src/views/email/components/ListPage/drawerDetail.vue

@@ -2,76 +2,20 @@
  <a-drawer
    v-model:open="drawerOpen"
    :placement="placement"
    width="1200"
    width="68%"
    :body-style="{ paddingBottom: '80px' }"
    :footer-style="{ textAlign: 'right' }"
    @after-open-change="afterOpenChange"
    @close="drawerClose"
  >
    <template #title>
      <div class="ctb">
      <div>
        <pageHeadLeft
          :checked="true"
          :selectAllRow="[{ docCode }]"
          @nextNum="drawerClose"
        ></pageHeadLeft>
      <div class="ct-top">
        <div class="title" style="margin-bottom: 20px">
          <div class="left">
            <span style="margin-right: 20px; font-size: 24px; font-weight: 700">
              <a-tooltip placement="bottom">
                <template #title>
                  <span>{{ tableRowData.subject }}</span>
                </template>
                {{ truncateString(tableRowData.subject, 23) }}
              </a-tooltip>
            </span>
            <span style="margin-right: 10px; font-size: 16px">
              <PushpinOutlined />
            </span>
          </div>
          <div class="right">
            <div class="tate">{{ formatToDateDay(tableRowData.receiveTime) }}</div>
            <div>
              <a-dropdown-button>
                <span>
                  <a-tooltip placement="bottom">
                    <template #title>
                      <span>回复</span>
                    </template>
                    <LeftOutlined @click="replyEmail(tableRowData)" />
                  </a-tooltip>
                </span>
                <a-divider type="vertical" />
                <span>
                  <a-tooltip placement="bottom">
                    <template #title>
                      <span>快速回复</span>
                    </template>
                    <DoubleLeftOutlined />
                  </a-tooltip>
                </span>
                <template #overlay>
                  <a-menu>
                    <a-menu-item key="1">
                      <UserOutlined />
                      1st menu item
                    </a-menu-item>
                    <a-menu-item key="2">
                      <UserOutlined />
                      2nd menu item
                    </a-menu-item>
                    <a-menu-item key="3">
                      <UserOutlined />
                      3rd item
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown-button>
            </div>
          </div>
        </div>
      </div></div>
      </div>
    </template>
    <template #extra>
      <div style="font-size: 16px">
@@ -93,14 +37,81 @@
        </a-button>
      </div>
    </template>
    <div class="ct-top" :class="isOpen ? 'isOpenTop' : 'onOpenTop'">
      <div class="title">
        <div class="left">
          <span style="margin-right: 20px; font-size: 24px; font-weight: 700">
            <a-tooltip placement="bottom">
              <template #title>
                <span>{{ tableRowData.subject }}</span>
              </template>
              <div :style="{ maxWidth: isOpen ? '300px' : '600px' }" class="text-ellipsis">{{
                tableRowData.subject
              }}</div>
            </a-tooltip>
          </span>
          <span style="margin-right: 10px; font-size: 16px">
            <PushpinOutlined />
          </span>
        </div>
        <div class="right">
          <div class="tate">{{ formatToDateDay(tableRowData.receiveTime || tableRowData.updateTime) }}</div>
          <div>
            <a-dropdown-button>
              <div v-if="!isDrafts">
                <span>
                  <a-tooltip placement="bottom">
                    <template #title>
                      <span>回复</span>
                    </template>
                    <LeftOutlined @click="replyEmail(tableRowData, 'reply')" />
                  </a-tooltip>
                </span>
                <a-divider type="vertical" />
                <span>
                  <a-tooltip placement="bottom">
                    <template #title>
                      <span>快速回复</span>
                    </template>
                    <DoubleLeftOutlined />
                  </a-tooltip>
                </span>
              </div>
              <div v-else>
                <span @click="replyEmail(tableRowData, 'edit')">再次编辑</span>
              </div>

              <template #overlay>
                <a-menu>
                  <a-menu-item key="1">
                    <UserOutlined />
                    1st menu item
                  </a-menu-item>
                  <a-menu-item key="2">
                    <UserOutlined />
                    2nd menu item
                  </a-menu-item>
                  <a-menu-item key="3">
                    <UserOutlined />
                    3rd item
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown-button>
          </div>
        </div>
      </div>
    </div>

    <div>
      <div class="flex-between">
        <div class="ct-left p-2" :class="isOpen ? 'isOpen' : 'onOpen'">
          <div class="user p-1">
          <div class="user p-1 f-z-14" style="margin-top: 40px">
            <div style="display: flex; align-items: center">
              <a-avatar size="small" style="margin-right: 8px" src="#" />
              {{ tableRowData.sender }}
              <span>{{ `<${tableRowData.sender}>` }}</span>
              <div>
                <span>{{ tableRowData.senderName }} {{ `<${tableRowData.sender}>` }}</span>
              </div>
              <span style="margin: 0 10px">发送</span>
              <a-popover placement="bottom">
                <template #content>
@@ -126,21 +137,25 @@
                {{ `${tableRowData.receiver}` }}<span>{{ `<${tableRowData.receiver}>` }}</span>
              </a-popover>
            </div>
            <div
              type="info"
              class="p-2"
              style="margin-top: 10px; background-color: #e4f1ff; font-size: 14px"
            >
            <div type="info" class="p-2 f-z-14" style="margin-top: 10px; background-color: #e4f1ff">
              <span>{{ `<${tableRowData.sender}>` }}</span>
              <span>暂未查询到该客户的当地时间</span>
              <!-- <span>2024-06-08 22:22</span> -->
            </div>
            <div class="ct" v-if="tableRowData.content">
              <TinymcePw ref="TinymcePwRef" v-model="tableRowData.content" />
            <div class="ct">
              <div v-if="tableRowData.content">
                <TinymcePw ref="TinymcePwRef" v-model="tableRowData.content" />
              </div>
            </div>
          </div>
        </div>
        <div v-show="isOpen" class="ct-right p-2">sssss</div>
        <div v-show="isOpen" class="ct-right">
          <div style="position: relative">
            <div style="position: absolute; top: 0; left: 10px">
              <UserTips></UserTips>
            </div>
          </div>
        </div>
      </div>
      <div @click="fuToggleContent" class="toggle-btn" :class="isOpen ? 'onIconOpen' : 'iconOpen'">
        <LeftOutlined v-if="!isOpen" />
@@ -164,6 +179,7 @@
    RollbackOutlined,
  } from '@ant-design/icons-vue';
  import pageHeadLeft from './pageHeadLeft.vue';
  import UserTips from '@/views/email/components/userTips/index.vue';
  import { TinymcePw } from '@/components/Tinymce';
  import { getMailInfoApi, setQuickReplyAPi } from '@/api/email/userList';
  import { useCollapseStore } from '@/store/modules/useCollapseStore';
@@ -182,6 +198,7 @@
    mailId?: string;
    selectAllRow: Array<any>;
    allList;
    isDrafts?: boolean;
  }

  const props = defineProps<Props>();
@@ -201,9 +218,12 @@
  watch(
    () => props.modelValue,
    (newValue) => {
      drawerOpen.value = newValue;
      nextTick(() => {
        console.log(newValue, '---------4', TinymcePwRef.value);
        drawerOpen.value = newValue;
        setTimeout(() => {
          console.log(newValue, '---------4', TinymcePwRef.value);
          tableRowData.value.content = tableRowData.value.content;
        }, 500);
      });
      if (newValue) {
        fnGetMailInfo(props.mailId);
@@ -214,8 +234,10 @@
  function fnGetMailInfo(id) {
    getMailInfoApi({ docCode: id })
      .then((res) => {
        docCode.value = id;
        tableRowData.value = res.data;
        nextTick(() => {
          docCode.value = id;
          tableRowData.value = res.data;
        });
      })
      .catch(() => {});
  }
@@ -236,21 +258,12 @@
    drawerOpen.value = false;
  };

  function truncateString(str, maxLength) {
    return str.length > maxLength ? str.substring(0, maxLength) + '...' : str;
  }

  const fnGetUserList = (params) => {
    // 调用接口逻辑
  };

  // 计算属性
  const placement = computed(() => props.placement || 'right');

  // 抽屉开关
  const fnSaveOpenChange = () => {
    // 抽屉保存逻辑
  };

  const content = ref('');
  const isOpen = ref(false);
@@ -306,8 +319,8 @@
  }
  import { useRouter } from 'vue-router';
  const router = useRouter();
  function replyEmail(row) {
    router.push({ path: '/email/edit', query: { docCode: row.docCode, type: 'reply' } });
  function replyEmail(row, type) {
    router.push({ path: '/email/edit', query: { docCode: row.docCode, type: type } });
  }
</script>

@@ -345,13 +358,12 @@

    & .right {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-between;
      width: 25%;
      justify-content: flex-end;

      & .tate {
        color: #999;
        font-size: 14px;
        margin-right: 10px;
      }
    }
  }
@@ -362,7 +374,6 @@

  .flex-between {
    display: flex;
    padding-top: 4%;
  }

  .ct-left {
@@ -370,7 +381,7 @@
  }

  .ct-right {
    border-left: 1px solid #f0f0f0;
    flex: 1;
  }

  .toggle-btn {
@@ -393,7 +404,15 @@
  }

  .isOpen {
    width: 69%;
    width: calc(100% - 420px);
  }

  .onOpenTop {
    width: 98%;
  }

  .isOpenTop {
    width: calc(98% - 460px);
  }

  .iconOpen {
@@ -401,20 +420,29 @@
  }

  .onIconOpen {
    right: 32%;
    right: 425px;
  }

  .ctb {
    position: relative;
  }

  .ctb .ct-top {
  .ct-top {
    position: absolute;
    z-index: 99;
    top: 41px;
    left: -28px;
    width: 116%;
    top: 57px;
    left: 10px;
    padding: 10px;
    background: #fff;
  }

  .text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .f-z-14 {
    font-size: 12px;
  }
</style>