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 placeholder="请输入模板标题" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="发布时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" 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">查询</el-button>
              <el-button icon="el-icon-refresh" size="mini">重置</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="date" />
        <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.pageNum" :limit.sync="queryParams.pageSize"
        @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="文件标题">
          <el-input v-model="form.title" placeholder="请输入文件标题" />
        </el-form-item>
        <el-form-item label="发布时间">
          <el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="发布单位">
          <el-input v-model="form.unit" placeholder="请输入发布单位" />
        </el-form-item>
        <el-form-item label="发布人">
          <el-input v-model="form.author" placeholder="请输入发布人" />
        </el-form-item>
        <el-form-item label="内容">
          <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="handleReturn">导出</el-button>
          <el-button type="primary" size="mini" icon="el-icon-back" @click="handleReturn">返回</el-button>
        </div>
      </div>
      <!-- 标题栏 -->
      <div class="previewnick">
        <h1>{{ previewData.title }}</h1>
      </div>
      <!-- 发布信息栏 -->
      <div class="previewinfo">
        <div class="previewinfoitem">发布时间：{{ previewData.date }}</div>
        <div class="previewinfoitem">发布单位：{{ previewData.unit }}</div>
        <div class="previewinfoitem">发布人：{{ previewData.author }}</div>
      </div>
      <!-- 内容区域 -->
      <div class="previewcontent">
        <div v-html="previewData.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Editorone from '@/components/Editor';
import { getclglPage } from '@/api/ManageApi/index';

export default {
  components: { Editorone },
  data() {
    return {
      loading: false,
      postList: [
        { id: 1, title: '文件1的名称', unit: '单位A', author: '张三', date: '2023-01-01', content: '<p>这是文件1的内容</p>' },
        { id: 2, title: '文件2的名称', unit: '单位B', author: '李四', date: '2023-02-01', content: '<p>这是文件2的内容</p>' },
        { id: 3, title: '文件3的名称', unit: '单位C', author: '王五', date: '2023-03-01', content: '<p>这是文件3的内容</p>' }
      ],
      total: 3,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      dialogVisible: false,
      dialogTitle: '新增',
      form: {
        title: '',
        date: '',
        unit: '',
        author: '',
        content: ''
      },
      rules: {
        title: [{ required: true, message: '请输入文件标题', trigger: 'blur' }],
        date: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
        unit: [{ required: true, message: '请输入发布单位', trigger: 'blur' }],
        author: [{ required: true, message: '请输入发布人', trigger: 'blur' }]
      },
      previewMode: false, 
      previewData: {}, 
    };
  },
  methods: {
    handleAdd() {
      this.dialogTitle = '新增';
      this.dialogVisible = true;
      this.form = { title: '', date: '', unit: '', author: '', content: '' };
    },
    handleEdit(row) {
      this.dialogTitle = '编辑';
      this.dialogVisible = true;
      this.form = { ...row };
    },
    handleDelete(row) {
      this.$confirm('确定删除该文件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.postList = this.postList.filter(item => item.id !== row.id);
        this.total -= 1;
        this.$message({ type: 'success', message: '删除成功!' });
      });
    },
    handlePreview(row) {
      this.previewMode = true;
      this.previewData = { ...row };
      this.previewData.content = row.content; // 直接赋值 HTML 内容
    },
    handleReturn() {
      this.previewMode = false;
      this.previewData = {};
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.id) {
            // 编辑操作
            const index = this.postList.findIndex(item => item.id === this.form.id);
            this.postList.splice(index, 1, this.form);
          } else {
            // 新增操作
            const newForm = { ...this.form }; 
            newForm.id = this.postList.length + 1; 
            this.postList.push(newForm);
            this.total += 1;
            const formData = { ...newForm };
            delete formData.id;

            // 调用新增数据接口
            getclglPage(formData).then(response => {
              this.$message({ type: 'success', message: '新增成功!' });
            })
          }
          this.dialogVisible = false;
          this.$message({ type: 'success', message: '操作成功!' });
        }
      });
    },
    cancel() {
      this.dialogVisible = false;
    },
    handleSelectionChange(selection) {
      console.log(selection);
    },
    handleExport() {
      this.$message({ type: 'info', message: '导出功能待实现' });
    },
    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>