cbjsxt-front-master/src/views/costAudit/auditInfo/auditManage/workDraft.vue

<template>
  <div class="work-draft-container">
    <ht-editor
      v-model="workingPaperContent"
      class="working-paper-editor"
      height="500px"
      width="100%"
      :config="editorConfig"
      @ready="onEditorReady"
    />
    <!-- 工作底稿列表 -->
    <div>
      <el-button type="primary" size="small" @click="handleAddWorkingPaper">
        核增核减记录
      </el-button>
    </div>
    <el-table
      :data="workingPaperRecords"
      style="width: 100%; margin-top: 20px"
      border
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="序号" width="80"></el-table-column>
      <el-table-column
        prop="auditSubject"
        label="核增核减科目"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="basicInfo"
        label="基本情况"
        width="200"
      ></el-table-column>
      <el-table-column prop="auditDesc" label="核增核减说明"></el-table-column>
      <el-table-column
        prop="auditTime"
        label="时间"
        width="180"
      ></el-table-column>
      <el-table-column label="附件" width="100">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.attachments && scope.row.attachments.length > 0"
            type="text"
            size="small"
            @click="handlePreviewWorkingPaperAttachment(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleEditWorkingPaper(scope.row)"
          >
            修改
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="handleDeleteWorkingPaper(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 工作底稿编辑弹窗 -->
    <el-dialog
      :title="workingPaperDialogTitle"
      :visible.sync="workingPaperDialogVisible"
      width="70%"
    >
      <el-form
        ref="workingPaperForm"
        :model="workingPaperForm"
        :rules="workingPaperRules"
        label-width="120px"
      >
        <el-form-item label="被审核科目" prop="auditSubject">
          <el-input
            v-model="workingPaperForm.auditSubject"
            placeholder="请输入被审核科目"
          />
        </el-form-item>
        <el-form-item label="基本情况" prop="basicInfo">
          <el-input
            v-model="workingPaperForm.basicInfo"
            type="textarea"
            :rows="4"
            placeholder="请输入基本情况"
          />
        </el-form-item>
        <el-form-item label="核增核减说明" prop="auditDesc">
          <el-input
            v-model="workingPaperForm.auditDesc"
            type="textarea"
            :rows="4"
            placeholder="请输入核增核减说明"
          />
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="workingPaperForm.auditDate"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="时间范围">
          <div style="display: flex; gap: 10px">
            <el-time-picker
              v-model="workingPaperForm.startTime"
              format="HH:mm"
              placeholder="开始时间"
              style="flex: 1"
            />
            <span>-</span>
            <el-time-picker
              v-model="workingPaperForm.endTime"
              format="HH:mm"
              placeholder="结束时间"
              style="flex: 1"
            />
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="workingPaperDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleWorkingPaperSubmit">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'WorkDraft',
    data() {
      return {
        editorConfig: {
          // 可以在这里覆盖全局配置的选项
          height: '300px',
          placeholder: '请输入内容...',
          excludeMenus: ['image', 'video'],
        },
        // 工作底稿数据
        workingPaperContent: '工作底稿内容将在这里展示。',
        // 工作底稿记录列表
        workingPaperRecords: [
          {
            id: '001',
            auditSubject: '科目核减',
            basicInfo: '该科目存在多计费用情况',
            auditDesc: '根据凭证检查，发现重复列支费用20万元，建议核减',
            auditTime: '2025-01-20 13:00-17:00',
            attachments: ['审计凭证.pdf'],
          },
          {
            id: '002',
            auditSubject: '科目核增',
            basicInfo: '该科目存在少计收入情况',
            auditDesc: '通过银行流水核对，发现未入账收入15万元，建议核增',
            auditTime: '2025-01-27 14:00-17:30',
            attachments: [],
          },
          {
            id: '003',
            auditSubject: '费用列支',
            basicInfo: '检查期间费用列支情况',
            auditDesc: '发现部分费用列支不规范，需补充说明材料',
            auditTime: '2025-01-30 09:00-18:00',
            attachments: ['费用明细.xlsx'],
          },
        ],
        // 工作底稿弹窗
        workingPaperDialogVisible: false,
        workingPaperDialogTitle: '添加工作底稿',
        isEditWorkingPaper: false,
        workingPaperForm: {
          id: '',
          auditSubject: '',
          basicInfo: '',
          auditDesc: '',
          auditDate: '',
          startTime: '',
          endTime: '',
          attachments: [],
        },
        workingPaperRules: {
          auditSubject: [
            { required: true, message: '请输入被审核科目', trigger: 'blur' },
          ],
          basicInfo: [
            { required: true, message: '请输入基本情况', trigger: 'blur' },
          ],
          auditDesc: [
            { required: true, message: '请输入核增核减说明', trigger: 'blur' },
          ],
        },
      }
    },
    methods: {
      onEditorReady(editor) {
        // 编辑器初始化完成后的回调
        console.log('编辑器已就绪', editor)
        // 可以在这里获取编辑器实例，进行更多操作
      },
      // 工作底稿操作
      handleAddWorkingPaper() {
        this.isEditWorkingPaper = false
        this.workingPaperDialogTitle = '添加工作底稿'
        this.workingPaperForm = {
          id: '',
          auditSubject: '',
          basicInfo: '',
          auditDesc: '',
          auditDate: new Date(),
          startTime: '',
          endTime: '',
          attachments: [],
        }
        this.workingPaperDialogVisible = true
      },

      handleEditWorkingPaper(row) {
        this.isEditWorkingPaper = true
        this.workingPaperDialogTitle = '修改工作底稿'
        const timeParts = row.auditTime.split(' ')
        const date = timeParts[0]
        const timeRange = timeParts[1].split('-')

        this.workingPaperForm = {
          ...row,
          auditDate: new Date(date),
          startTime: timeRange[0],
          endTime: timeRange[1],
        }
        this.workingPaperDialogVisible = true
      },

      handleDeleteWorkingPaper(row) {
        this.$confirm('确定要删除这条工作底稿吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const index = this.workingPaperRecords.indexOf(row)
            if (index !== -1) {
              this.workingPaperRecords.splice(index, 1)
            }
            this.$message({ type: 'success', message: '工作底稿已删除' })
          })
          .catch(() => {
            this.$message({ type: 'info', message: '已取消删除' })
          })
      },

      handleWorkingPaperSubmit() {
        this.$refs.workingPaperForm.validate((valid) => {
          if (valid) {
            const auditDate = new Date(this.workingPaperForm.auditDate)
            const formattedDate = `${auditDate.getFullYear()}-${String(
              auditDate.getMonth() + 1
            ).padStart(2, '0')}-${String(auditDate.getDate()).padStart(2, '0')}`
            const auditTime = `${formattedDate} ${
              this.workingPaperForm.startTime || '00:00'
            }-${this.workingPaperForm.endTime || '23:59'}`

            if (this.isEditWorkingPaper) {
              // 修改操作
              const index = this.workingPaperRecords.findIndex(
                (item) => item.id === this.workingPaperForm.id
              )
              if (index !== -1) {
                this.workingPaperRecords[index] = {
                  ...this.workingPaperRecords[index],
                  auditSubject: this.workingPaperForm.auditSubject,
                  basicInfo: this.workingPaperForm.basicInfo,
                  auditDesc: this.workingPaperForm.auditDesc,
                  auditTime: auditTime,
                }
                this.$message({ type: 'success', message: '工作底稿修改成功' })
              }
            } else {
              // 添加操作
              const newId = String(
                this.workingPaperRecords.length + 1
              ).padStart(3, '0')
              this.workingPaperRecords.push({
                id: newId,
                auditSubject: this.workingPaperForm.auditSubject,
                basicInfo: this.workingPaperForm.basicInfo,
                auditDesc: this.workingPaperForm.auditDesc,
                auditTime: auditTime,
                attachments: [],
              })
              this.$message({ type: 'success', message: '工作底稿添加成功' })
            }
            this.workingPaperDialogVisible = false
          }
        })
      },

      handlePreviewWorkingPaperAttachment(row) {
        this.$message({
          type: 'info',
          message: `预览附件：${row.attachments.join(', ')}`,
        })
      },
    },
  }
</script>

<style scoped>
  .work-draft-container {
    padding: 20px;
  }

  .working-paper-editor {
    margin-bottom: 20px;
  }
</style>