smartai_desk_pc/src/modules/conversation-chat/dialog-input/email-input/TextAreaEmail.vue

<template>
  <div class="email-textarea">
    <div class="email-content">
      <span>帮我生成</span>
      <a-input
        v-model="date"
        placeholder="选择日期"
        style="width: 100px; margin: 0 8px; color: var(--primary-default); background-color: var(--tip-bg-start)"
      />
      <span>的全省供电可靠性报告，主题为</span>
      <a-input
        v-model="subject"
        placeholder="输入主题"
        style="width: 150px; margin: 0 8px; color: var(--primary-default); background-color: var(--tip-bg-start)"
      />
      <span title="多个邮箱之间使用逗号（,）隔开">，收件邮箱为</span>
      <a-input
        v-model="toEmail"
        title="多个邮箱之间使用逗号（,）隔开"
        placeholder="输入收件邮箱"
        style="width: 400px; margin: 0 8px; color: var(--primary-default); background-color: var(--tip-bg-start)"
      />
      <span title="多个邮箱之间使用逗号（,）隔开">，抄送邮箱为</span>
      <a-input
        v-model="ccEmail"
        title="多个邮箱之间使用逗号（,）隔开"
        placeholder="输入抄送邮箱"
        style="width: 400px; margin: 0 8px; color: var(--primary-default); background-color: var(--tip-bg-start)"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// 接收父组件传递的报表类型
const props = defineProps({
  target_report_type: {
    type: String,
    default: '1'
  }
});

// 响应式数据
const date = ref('');
const subject = ref('频停周报');
const toEmail = ref('');
const ccEmail = ref('');

const clear = () => {
  toEmail.value = '';
  ccEmail.value = '';
};

watch(
  () => props.target_report_type,
  (new_val) => {
    const data = window.report_type_list.find((item) => item.key === new_val);
    if (data.date) {
      date.value = data.date;
    }
    if (data.title) {
      subject.value = data.title;
    }
  },
  {
    immediate: true
  }
);
defineExpose({
  date,
  subject,
  toEmail,
  ccEmail,
  clear
});
</script>

<style scoped lang="css">
.email-textarea {
  width: 100%;
  padding: 16px;
  /* background-color: #f5f5f5; */
  border-radius: 8px;
}

.email-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.email-content span {
  white-space: nowrap;
}
</style>