cbjsxt-front-master/src/components/costAudit/TemplatePreviewEdit.vue

<template>
  <el-tabs
    v-model="currentTab"
    class="template-tabs"
    type="card"
    @tab-change="handleTabChange"
  >
    <el-tab-pane label="预览" name="preview">
      <div v-if="url" class="template-preview">
        <div class="file-preview">
          <FilePreview :file-url="url"></FilePreview>
        </div>
      </div>
      <div v-else class="template-preview-empty">
        <p>请先上传模板文件</p>
      </div>
    </el-tab-pane>
    <el-tab-pane v-if="isShowEdit" label="编辑" name="edit">
      <div class="template-edit">
        <div class="file-edit-section">
          <div v-if="url" class="reupload-section">文件编辑</div>
          <div v-else class="template-edit-empty">
            <p>请先上传模板文件</p>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  import FilePreview from './FilePreview.vue'
  export default {
    name: 'TemplatePreviewEdit',
    components: { FilePreview },
    props: {
      activeTab: {
        type: String,
        default: 'preview',
      },
      fileUrl: {
        type: String,
        default: '',
      },
      isShowBtn: {
        type: Boolean,
        default: false,
      },
      isShowEdit: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        currentTab: this.activeTab, // 创建本地数据属性
      }
    },
    computed: {
      // 计算属性
      url() {
        return this.fileUrl
      },
    },

    watch: {
      // 监听 prop 变化，更新本地状态
      activeTab(newVal) {
        this.currentTab = newVal
      },
    },
    methods: {
      // 处理标签页切换事件
      handleTabChange(tabName) {
        this.currentTab = tabName
        this.$emit('tab-change', tabName) // 通知父组件
      },
      onReupload() {
        this.$emit('reupload')
      },
      onInsertTag(tag) {
        this.$emit('insert-tag', tag)
      },
      onExtractTableData() {
        this.$emit('extract-table-data')
      },
      onGenerateTemplateFromTable() {
        this.$emit('generate-template-from-table')
      },
    },
  }
</script>

<style scoped>
  .template-tabs {
    height: 100%;
  }
  .template-tabs ::v-deep .el-tabs__nav {
    display: flex;
    width: 100%;
  }

  .template-tabs ::v-deep .el-tabs__item {
    flex: 1;
    text-align: center;
    width: 50%;
  }
  .template-tabs {
    margin-bottom: 20px;
  }

  .template-preview {
    min-height: 300px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background-color: #fafafa;
    overflow: hidden;
  }

  .template-preview-empty,
  .template-edit-empty {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
    color: #909399;
    background-color: #fafafa;
  }

  .file-preview {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .file-info {
    padding: 15px;
    background-color: #ecf5ff;
    border-bottom: 1px solid #dcdfe6;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .file-type-badge {
    background-color: #409eff;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
  }

  .pdf-preview-placeholder,
  .word-preview-placeholder,
  .table-preview-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #909399;
    padding: 20px;
    text-align: center;
    overflow-y: auto;
  }

  .table-preview-sample {
    width: 100%;
    margin-top: 20px;
    text-align: left;
  }

  .table-preview-sample h5 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #606266;
  }

  .template-edit {
    min-height: 300px;
  }

  .file-edit-section {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background-color: #fafafa;
  }

  .tag-insert-section,
  .edit-instructions,
  .table-specific-actions {
    background-color: #fff;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #e4e7ed;
  }

  .tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
  }

  .insertable-tag {
    cursor: pointer;
    user-select: none;
  }

  .insertable-tag:hover {
    color: #409eff;
    border-color: #409eff;
  }

  .edit-instructions ul {
    margin: 10px 0 0 20px;
    padding: 0;
  }

  .edit-instructions li {
    margin-bottom: 5px;
    color: #606266;
  }

  .reupload-section {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #e4e7ed;
  }
  .button-bar {
    text-align: center;
    margin-top: 20px;
  }
</style>