yjhtgl-web/src/views/informationissue/informationView.vue

<template>
  <div>
    <div class="common-dialog">
      <div class="common-dialog-content">
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="information-approval1">
              <el-row :gutter="24">
                <el-col :span="17">
                  <div class="common-dialog-title-box">
                    <h4 class="common-dialog-title">发送统计</h4>
                  </div>
                </el-col>
                <el-col :span="6" style="text-align: right">
                  <el-text class="common-btn-text-primary" @click="showSendDetails">发送明细</el-text>
                </el-col>
              </el-row>
              <!-- 添加分割线 -->
              <div style="border-top: 1px solid #dcdfe6; margin-top: -25px"></div>
              <div class="common-dialog-box">
                <div class="send-statistics">
                  <el-row :gutter="24">
                    <el-col :span="8">
                      <p>选择人数 {{ formData.user_count }}</p>
                    </el-col>
                    <el-col :span="8">
                      <p>成功 {{ formData.user_ok_count }} | 失败 {{ formData.user_err_count }} | 发送中 {{ formData.user_sending_count }}</p>
                    </el-col>
                    <el-col :span="8">
                      <p>反馈 {{ formData.feedback_count }} | 未反馈 {{ formData.unresponsive_count }}</p>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="information-approval">
              <div class="common-dialog-title-box">
                <h3 class="common-dialog-title">信息详情</h3>
              </div>
              <div class="common-dialog-box">
                <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
                  <h4>信息内容</h4>
                  <div class="box1">
                    <el-form-item label="标题：" prop="title">
                      <el-input v-model="formData.title" disabled placeholder="请输入标题" style="width: 468px !important" />
                    </el-form-item>

                    <el-form-item label="发布单位：" prop="publish_group">
                      <el-input v-model="formData.publish_group" disabled placeholder="请输入发布单位" style="width: 468px !important" />
                    </el-form-item>

                    <el-form-item label="信息模板：" prop="template_type">
                      <el-radio-group v-model="formData.template_type" disabled>
                        <el-radio value="0">预设模板</el-radio>
                        <el-radio value="1">自定义模板</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="formData.template_type === '0'" label="预设模板：" prop="template_type">
                      <el-select v-model="formData.template_id" disabled placeholder="请选择预设模板" style="width: 300px !important">
                        <el-option v-for="option in presetTemplates" :key="option.value" :label="option.label" :value="option.value"></el-option>
                      </el-select>
                      <el-text class="common-btn-text-primary" @click="showTemplateExample">样例</el-text>
                    </el-form-item>
                    <el-form-item v-if="formData.template_type === '1'" prop="template_url">
                      <el-input v-model="formData.template_url" placeholder="请输入自定义详情页面链接地址" style="width: 468px !important" />
                    </el-form-item>
                    <el-form-item label="信息内容：" prop="content">
                      <el-input
                        v-model="formData.content"
                        :rows="6"
                        type="textarea"
                        disabled
                        placeholder="请输入信息内容"
                        style="width: 468px !important"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="查看附件：">
                      <div>
                        <div v-for="(file, index) in formData.attachs" :key="index" @click="viewFile(file)" style="color: #2C81FF;text-decoration: underline;cursor:pointer">
                          {{ index+1 }}、{{ file.name }}
                        </div>
                      </div>
                    </el-form-item>
                  </div>
                  <h4>推送配置</h4>
                  <div class="box1">
                    <el-form-item label="发布名单：" prop="releaseList" style="width: 468px !important"
                      ><span class="highlight-text">已选择{{ formData.user_count }}人</span>
                    </el-form-item>
                    <el-row :gutter="18">
                      <el-col :span="8">
                        <el-form-item label="发布时间：" prop="publish_time">
                          <el-button disabled type="default" @click="publishNow">立即发布</el-button>
                        </el-form-item>
                      </el-col>
                      <el-col :span="10">
                        <el-form-item label="定时发布：" prop="publish_time">
                          <el-date-picker v-model="formData.publish_time" type="datetime" disabled placeholder="选择发布时间" style="width: 400px;"></el-date-picker>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-form-item label="消息反馈方式：" prop="response_type" style="width: 468px !important">
                      <el-select v-model="displayFeedbackText" disabled placeholder="请选择消息反馈方式"> </el-select>
                    </el-form-item>
                  </div>
                  <h4 class="common-dialog-title">审核配置</h4>
                  <div class="box1">
                    <el-form-item label="审核材料：" prop="examine_attachs">
                      <div>
                        <div v-for="(file, index) in formData.examine_attachs" :key="index" @click="viewFile(file)" style="color: #2C81FF;text-decoration: underline;cursor:pointer">
                          {{ index+1 }}、{{ file.name }}
                        </div>
                      </div>
                    </el-form-item>
                    <el-form-item label="审核人：" prop="examine_by">
                      <el-input v-model="formData.examine_user" disabled placeholder="请输入审核人姓名" style="width: 368px !important" />
                    </el-form-item>
                  </div>
                </el-form>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="information-approval">
              <div class="common-dialog-title-box">
                <h3 class="common-dialog-title">信息审批</h3>
              </div>
              <div class="common-dialog-box">
                <div class="approval-process">
                  <div class="box1">
                    <h4>审批流程</h4>
                    <div>
                      <p v-if="processingTime">已用时：{{ processingTime }}</p>
                    </div>
                    <el-timeline style="width: 100%;">
                      <template v-for="(item, index) in formData.examines" :key="index">
                        <el-timeline-item placement="top">
                          <el-card style="margin-top:-10px;">
                            <h4>{{ item.examine_type }}</h4>
                            <p v-if="item.nick_name">
                              处理人：<span>{{ item.nick_name }}</span
                              >&nbsp;&nbsp;&nbsp;&nbsp;时间：{{ item.examine_time }}
                            </p>
                            <p v-if="item.examine_sub_type">处理结果：{{ item.examine_sub_type }}</p>
                            <p v-if="item.content">具体意见：{{ item.content }}</p>
                          </el-card>
                        </el-timeline-item>
                      </template>
                    </el-timeline>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="common-dialog-footer">
          <el-button type="primary" @click="$emit('close')">返回</el-button>
          <!--
          <el-button :disabled="true">编辑</el-button>
          <el-button :disabled="true">提交</el-button>
          -->
        </div>
      </div>
    </div>
    <SendDetail v-if="sendDetailState.show" :info_id="sendDetailState.info_id" @close="handleCancel" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { getInformationView, getTemplateList } from '@/api/informationissue/informationissue';
import { ElMessage } from 'element-plus';
import SendDetail from './sendDetail.vue';
import { download2 } from '@/utils/request';

const processingTime = '1小时 6分22秒';
const props = defineProps({
  eventId: {
    type: String,
    required: true
  }
});
const formData = ref({
  title: '',
  publish_group: '',
  template_id: '',
  template_url: '',
  template_type: '',
  content: '',
  user_count: '',
  user_ok_count: '',
  user_err_count: '',
  user_sending_count: '',
  publish_type: '',
  response_type: '',
  examine_by: '',
  examine_user: '',
  publish_time: '',
  materials: '',
  add_time: '',
  examines: [],
  feedback_count: 0,
  unresponsive_count: 0,
  attachs: [],
  examine_attachs: []
});

const baseUrl = import.meta.env.VITE_APP_BASE_API;
const downLoadApi = import.meta.env.VITE_APP_BASE_DOWNLOAD_API;

const rules = ref({});
const presetTemplates = ref([]);
const feedbackTextMap = {
  0: '仅需阅读',
  1: '点击确认',
  2: '签字确认'
};
// 创建一个计算属性，根据 formData 中的 response_type 返回对应的文本
const displayFeedbackText = computed({
  get() {
    return feedbackTextMap[formData.value.response_type];
  },
  set(value) {
    formData.value.response_type = Object.keys(feedbackTextMap).find((key) => feedbackTextMap[key] === value);
  }
});
let sendDetailState = reactive({
  show: false,
  info_id: ''
});
const handleCancel = () => {
  sendDetailState.show = false;
};

const viewFile = (file: any) => {
  download2(baseUrl + downLoadApi + file.url, file.name);
};
const showSendDetails = () => {
  sendDetailState.info_id = props.eventId; // 假设eventId是id字段
  sendDetailState.show = true;
};
const publishNow = () => {

};

const showTemplateExample = () => {
  ElMessage.info('点击了查看模板样例');
};

const fetchInformation = async () => {
  try {
    const response = await getInformationView({ info_id: props.eventId });
    if (response && response.data) {
      formData.value = response.data;
    }
  } catch (error) {
    console.error('Failed to fetch information:', error);
  }
};
// 在组件挂载时调用 fetchInformation
onMounted(() => {
  getTemplateList({}).then((res) => {
    res.data.forEach((item, index) => {
      presetTemplates.value.push({ value: item.id+"", label: item.name, content: item.content });
    });
  });
  fetchInformation();
});
</script>

<style scoped>
.common-dialog {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.common-dialog-title-box {
  margin-bottom: 20px;
}

.common-dialog-title {
  font-size: 1.2rem;
  color: #333;
}

.box1 {
  border: 1px solid #dcdfe6; /* 浅灰色边框 */
  padding: 10px; /* 可选：为了美观，可以添加一些内边距 */
  margin-bottom: 10px;
}

.highlight-text {
  font-weight: bold; /* 加粗 */
  font-size: 1.2em; /* 放大字体大小 */
}

.information-approval {
  width: 100%;
  max-width: 800px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
.information-approval1 {
  width: 100%;
  max-width: 100%;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
.approval-process {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.common-dialog-footer {
  margin-top: 0.5rem;
}
.send-statistics {
  width: 100%;
}
.common-dialog-footer {
  display: flex;
  justify-content: center; /* 水平居中 */
  gap: 10px; /* 按钮之间的间距 */
  margin-top: 50px;
}
</style>