Gyyq-Upstairs/src/views/compilation/onecailiao/index.vue

<template>
  <div>
    <!-- 表单查询项 -->
    <div v-if="!previewMode" class="headerbox">
      <el-form size="small" :inline="true" label-width="200">
        <el-row>
          <el-col :span="5">
            <el-form-item label="文件标题" style="width: 100%;">
              <el-input v-model="queryParams.fileTitle" placeholder="请输入模板标题" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="发布时间">
              <el-date-picker v-model="queryParams.startTime" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表格内容区 -->
    <div v-if="!previewMode" class="tablebox">
      <!-- 按钮行 -->
      <div class="tablebtntwo">
        <el-button type="primary" icon="el-icon-upload2" size="mini" @click="handleExport">导出单片材料</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </div>
      <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" align="center" prop="id" />
        <el-table-column label="文件标题" align="center" prop="title" />
        <el-table-column label="发布单位" align="center" prop="unit" />
        <el-table-column label="发布人" align="center" prop="author" />
        <el-table-column label="发布时间" align="center" prop="createTime" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" style="color: gray;" @click="handlePreview(scope.row)">预览</el-button>
            <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" style="color: #F25353;" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.current" :limit.sync="queryParams.size"
        @pagination="getList" />
    </div>

    <!-- 新增/编辑的弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="文件标题" prop="fileTitle">
          <el-input v-model="form.fileTitle" placeholder="请输入文件标题" />
        </el-form-item>
        <el-form-item label="发布时间" prop="createTime">
          <el-date-picker v-model="form.createTime" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="发布单位" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入发布单位" />
        </el-form-item>
        <el-form-item label="发布人" prop="createBy">
          <el-input v-model="form.createBy" placeholder="请输入发布人" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <Editorone v-model="form.content" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 预览的展示区 -->
    <div v-if="previewMode" class="previewbox">
      <!-- 按钮区域 -->
      <div class="previewhead">
        <div class="headone">预览</div>
        <div class="headtwo">
          <el-button type="primary" size="mini" icon="el-icon-upload2" @click="handleExporttwo" :loading="loading">
            导出PDF
          </el-button>
          <el-button type="primary" size="mini" icon="el-icon-back" @click="handleReturn">返回</el-button>
        </div>
      </div>
      <!-- 标题栏 -->
      <div class="previewnick">
        <h1>{{ previewData.fileTitle }}</h1>
      </div>
      <!-- 发布信息栏 -->
      <div class="previewinfo">
        <div class="previewinfoitem">发布时间：{{ previewData.createTime }}</div>
        <div class="previewinfoitem">发布单位：{{ previewData.unit }}</div>
        <div class="previewinfoitem">发布人：{{ previewData.createBy }}</div>
      </div>
      <!-- 内容区域 -->
      <div class="previewcontent">
        <div v-html="previewData.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Editorone from '@/components/Editor';
import { addClgl, deleteClgl, updateClgl, getClglPage, exportToPdf } from '@/api/ManageApi/index';

export default {
  components: { Editorone },
  data() {
    return {
      loading: false,
      postList: [],
      total: 0,
      queryParams: {
        current: 1,
        size: 10,
        fileTitle: '',
        startTime: ''
      },
      dialogVisible: false,
      dialogTitle: '新增',
      form: {
        id: undefined,
        fileTitle: '',
        createTime: '',
        unit: '',
        createBy: '',
        content: ''
      },
      rules: {
        fileTitle: [
          { required: true, message: '文件标题不能为空', trigger: 'blur' }
        ],
        createTime: [
          { required: true, message: '发布时间不能为空', trigger: 'change' }
        ],
        unit: [
          { required: true, message: '发布单位不能为空', trigger: 'blur' }
        ],
        createBy: [
          { required: true, message: '发布人不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '内容不能为空', trigger: 'blur' }
        ]
      },
      previewMode: false,
      previewData: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 导出PDF
    async handleExporttwo() {
      try {
        this.loading = true;

        // 验证数据
        if (!this.previewData.fileTitle || !this.previewData.content) {
          this.$message.warning('请确保标题和内容不为空');
          return;
        }

        // 1. 调用导出接口
        const exportResponse = await exportToPdf({
          htmlArticleTitle: this.previewData.fileTitle,
          htmlContent: this.previewData.content
        });

        console.log('完整的:', exportResponse);

        // 检查响应结构 - 注意数据在data属性中
        if (!exportResponse?.data || exportResponse.code !== 200) {
          throw new Error(exportResponse?.msg || '导出PDF失败');
        }

        const fileData = exportResponse.data;
        if (!fileData.fileName || !fileData.url) {
          throw new Error('后端未返回有效的文件路径或文件名');
        }

        // 使用若依下载方式
        this.handleDownload(fileData);

        this.$message.success('PDF导出下载成功');
      } catch (error) {
        console.error('导出PDF失败:', error);
        this.$message.error('导出PDF失败');
      } finally {
        this.loading = false;
      }
    },

    // 若依下载方式
    handleDownload(fileData) {
      var name = fileData.fileName;
      var url = fileData.url;
      console.log(name);
      console.log(url);
      var suffix = url.substring(url.lastIndexOf("."), url.length);
      const a = document.createElement('a');
      a.setAttribute('download', name + suffix);
      a.setAttribute('target', '_blank');
      a.setAttribute('href', url);
      a.click();
      window.URL.revokeObjectURL(url);
    },

    // 返回按钮
    handleReturn() {
      this.previewMode = false;
      this.previewData = {};
    },
    handleAdd() {
      this.dialogTitle = '新增';
      this.dialogVisible = true;
      this.form = { id: undefined, fileTitle: '', createTime: '', unit: '', createBy: '', content: '' };
    },
    handleEdit(row) {
      this.dialogTitle = '编辑';
      this.dialogVisible = true;
      this.form = { ...row };
    },
    async handleDelete(row) {
      this.$confirm('确定删除该文件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          this.loading = true;
          await deleteClgl([row.id]);
          this.postList = this.postList.filter(item => item.id !== row.id);
          this.total -= 1;
          this.$message({ type: 'success', message: '删除成功!' });
        } catch (error) {
          console.error('删除失败:', error);
          this.$message.error('删除失败');
        } finally {
          this.loading = false;
        }
      });
    },
    handlePreview(row) {
      this.previewMode = true;
      this.previewData = { ...row };
      this.previewData.content = row.content; // 直接赋值 HTML 内容
    },
    async submitForm() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try {
            this.loading = true;
            if (this.form.id) {
              // 编辑操作
              await updateClgl(this.form);
              const index = this.postList.findIndex(item => item.id === this.form.id);
              this.postList.splice(index, 1, { ...this.form });
              this.$message({ type: 'success', message: '编辑成功!' });
            } else {
              // 新增操作
              const response = await addClgl(this.form);
              const newForm = { ...this.form, id: response.data.id };
              this.postList.push(newForm);
              this.total += 1;
              this.$message({ type: 'success', message: '新增成功!' });
            }
            this.dialogVisible = false;
          } catch (error) {
            console.error('操作失败:', error);
            this.$message.error('操作失败');
          } finally {
            this.loading = false;
          }
        }
      });
    },
    cancel() {
      this.dialogVisible = false;
    },
    handleSelectionChange(selection) {
      console.log(selection);
    },
    async handleExport() {
      try {
        this.loading = true;
        const params = {
          ...this.queryParams
        };
        const response = await getClglPage(params);
        if (response.code === 200) {
          const fileData = response.data;
          if (!fileData.fileName || !fileData.url) {
            throw new Error('后端未返回有效的文件路径或文件名');
          }
          this.handleDownload(fileData);
          this.$message.success('导出成功');
        } else {
          throw new Error('导出失败');
        }
      } catch (error) {
        console.error('导出失败:', error);
        this.$message.error('导出失败');
      } finally {
        this.loading = false;
      }
    },
    async getList() {
      try {
        this.loading = true;
        const params = {
          ...this.queryParams
        };
        const response = await getClglPage(params);
        if (response.code === 200) {
          this.postList = response.data.records;
          this.total = response.data.total;
        } else {
          throw new Error('获取数据失败');
        }
      } catch (error) {
        console.error('获取数据失败:', error);
        this.$message.error('获取数据失败');
      } finally {
        this.loading = false;
      }
    },
    handleQuery() {
      this.queryParams.current = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = {
        current: 1,
        size: 10,
        fileTitle: '',
        startTime: ''
      };
      this.getList();
    },
    extractTextContent(html) {
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = html;
      return tempDiv.textContent || tempDiv.innerText || '';
    }
  }
};
</script>

<style scoped>
.headerbox {
  background-color: #fff;
  border-radius: .5rem;
  padding: 1rem;
  margin: .5rem;
  border: 1px solid #eee;
}

.tablebox {
  background-color: #fff;
  border-radius: .5rem;
  padding: 1rem;
  margin: .5rem;
  border: 1px solid #eee;
}

.tablebtntwo {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.previewbox {
  width: 90%;
  height: auto;
  margin-left: 5%;
  margin-top: .3rem;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.previewhead {
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.headtwo {
  display: flex;
  gap: .5rem;
}

.previewnick {
  margin-top: .3rem;
  width: 100%;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 3px solid #2B62F1;
  color: #2B62F1;
}

.previewinfo {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  margin-top: 1rem;
}

.previewcontent {
  margin-top: 1rem;
}
</style>