cbjsxt-front-master/src/components/task/taskComponents/auditNoticeTab.vue

<template>
  <div class="catalog-manage">
    <div class="documents-layout">
      <!--成本审核管理-任务详情-监审文书 -->
      <!-- 左侧文书类型列表 -->
      <div class="documents-type-list">
        <h3>监审文书类型:</h3>
        <div
          v-for="type in documentData.documentTypes"
          :key="type.id"
          class="type-item"
          :class="{ active: activeDocumentTypeId === type.id }"
          @click="handleDocumentTypeClick(type)"
        >
          {{ type.documentName }}
        </div>
      </div>

      <!-- 右侧文书列表表格 -->
      <div class="documents-content">
        <!-- <div class="operation-bar">
          <el-button
            plain
            type="success"
            icon="el-icon-circle-plus"
            :disabled="isView"
            @click="handleGenerateDocument"
          >
            生成文书
          </el-button>
        </div> -->
        <CostAuditTable
          :table-data="documentData.list"
          :columns="documentData.documentColumns"
          :show-index="true"
          :show-pagination="true"
          :show-action-column="true"
          :pagination="documentData.pagination"
          @pagination-change="handlePaginationChange"
        >
          <template #documentId="{ row }">
            {{ getDocumenType(row) }}
          </template>
          <template #enterpriseId="{ row }">
            {{ getEnterpriseName(row) }}
          </template>
          <template #generateTime="{ row }">
            <div>
              {{ row.generateTime ? row.generateTime.split(' ')[0] : '' }}
            </div>
            <div>
              {{ row.generateTime ? row.generateTime.split(' ')[1] : '' }}
            </div>
          </template>
          <template #scanDocumentUrl="scope">
            <el-button
              v-if="!isView && getDocumenType(scope.row).includes('送达回证')"
              type="text"
              size="mini"
              :disabled="isView"
              @click="handleUploadScan(scope.row, 'scanDocumentUrl')"
            >
              上传附件
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="
                handleViewScan(scope.row.scanDocumentUrl, 'scanDocumentUrl')
              "
            >
              查看附件
            </el-button>
          </template>
          <template #feedbackDocumentUrl="scope">
            <!-- <el-button
              type="text"
              size="mini"
              :disabled="isView"
              @click="handleUploadScan(scope.row, 'feedbackDocumentUrl')"
            >
              上传附件
            </el-button> -->
            <div v-if="getDocumenType(scope.row).includes('送达回证')">
              <el-button
                v-if="scope.row.feedbackDocumentUrl"
                type="text"
                size="mini"
                @click="
                  handleViewScan(
                    scope.row.feedbackDocumentUrl,
                    'feedbackDocumentUrl'
                  )
                "
              >
                查看附件
              </el-button>
            </div>
          </template>
          <template #electronicDocumentUrl="scope">
            <!-- 查看 -->
            <el-button
              type="text"
              size="mini"
              @click="handleDocView(scope.row)"
            >
              查看
            </el-button>
            <!-- <el-button
              type="text"
              size="mini"
              :disabled="isView"
              @click="handleEditDocument(scope.row)"
            >
              修改
            </el-button> -->
            <!-- <el-button
              type="text"
              size="mini"
              :disabled="isView"
              @click="handleSignDocument(scope.row)"
            >
              签章
            </el-button> -->
            <!-- <el-button
              type="text"
              size="mini"
              :disabled="isView"
              @click="handleDeleteDocument(scope.row)"
            >
              删除
            </el-button> -->
            <el-button
              type="text"
              size="mini"
              @click="handleDownloadDocument(scope.row)"
            >
              下载
            </el-button>
          </template>
        </CostAuditTable>
      </div>
    </div>
    <!-- <div style="margin-top: 20px; font-size: 14px" class="table-description">
      说明：此处只能生成各被监审单位的《成本监审通知书》和《送达回证》，同时接收或上传被监审单位的反馈的《送达回证》。
    </div> -->

    <!-- 编辑监审通知书 -->
    <CostAuditDialog
      :title="documentDialogTitle"
      :visible="documentDialogVisible"
      :width="dialogWidth"
      :close-on-click-modal="false"
      :z-index="9300"
      :show-confirm-btn="false"
      cancel-text="关闭"
      @cancel="handleCancel"
      @confirm="handleConfirm"
    >
      <div class="document-edit-container">
        <!-- 左侧：文书参数设置 -->
        <div class="document-params">
          <h4>文书参数设置：</h4>
          <el-form
            v-loading="loading.saveDocument"
            :model="document"
            label-width="170px"
            size="small"
            :rules="documentRules"
            :disabled="true"
          >
            <el-form-item label="选择模板：" prop="documentId">
              <!-- <el-select
                v-model="document.documentId"
                placeholder="请选择模板"
                style="width: 100%"
                @change="handleTemplateChange"
              >
                <el-option
                  v-for="item in documentData.documentTypes"
                  :key="item.id"
                  :label="item.documentName"
                  :value="item.id"
                ></el-option>
              </el-select> -->

              {{ getDocumenType(document) }}
            </el-form-item>
            <el-form-item label="通知书文号：" prop="documentNumber">
              {{ document.documentNumber }}
              <!-- <el-input
                v-model="document.documentNumber"
                placeholder="请选择通知书文号"
                style="width: 74%"
              ></el-input>
              <el-button
                type="primary"
                size="small"
                class="ml10"
                @click="selectClick"
              >
                选择文号
              </el-button> -->
            </el-form-item>
            <el-form-item label="被监审单位：" prop="enterpriseId">
              <el-select
                v-model="document.enterpriseId"
                placeholder="请选择被监审单位"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in allUnits"
                  :key="item.unitId"
                  :label="item.unitName"
                  :value="item.unitId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否推送被监审单位：" prop="isPushed">
              <!-- 是否推送被监审单位 -->
              <el-radio-group v-model="document.isPushed">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="被监审单位：">
              <el-select
                v-model="document.enterpriseId"
                placeholder="请选择被监审单位"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in allUnits"
                  :key="item.unitId"
                  :label="item.unitName"
                  :value="item.unitId"
                ></el-option>
              </el-select>
            </el-form-item> -->

            <!-- 数据内容区域 -->
            <div style="margin-top: 20px">
              <h4 style="margin-bottom: 10px">数据内容：</h4>
              <el-table
                :data="costDocumentTemplateFiles"
                style="
                  width: 100%;
                  border: 1px solid #dcdfe6;
                  border-radius: 4px;
                "
              >
                <el-table-column
                  prop="originalText"
                  label="数据项"
                  width="120"
                  align="center"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop="labelValue"
                  label="标签"
                  width="100"
                  align="center"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop="originalText"
                  label="描述"
                  min-width="120"
                  align="center"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop="dataValue"
                  label="数据值"
                  min-width="150"
                  align="center"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <el-input
                      v-if="scope.row.originalText !== '需要提供材料'"
                      v-model="scope.row.dataValue"
                      size="small"
                      placeholder="请输入数据值"
                      disabled
                    ></el-input>
                    <!-- 否则显示上传按钮 -->
                    <div v-else>
                      <!-- <el-button
                      type="primary"
                      size="small"
                      @click="handleUploadClick(scope.row)"
                    >
                      上传附件
                    </el-button> -->
                      <el-button
                        type="primary"
                        size="small"
                        :disabled="false"
                        @click="handleViewScan(scope.row.dataValue)"
                      >
                        查看附件
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div style="margin-top: 10px; font-size: 12px; color: #909399">
                说明：数据内容不可修改，已在监审文书管理中配置完成，数据值为本次监审项目的相关数据。
              </div>
            </div>
          </el-form>
        </div>

        <!-- 右侧：模板预览和编辑区 -->
        <div class="document-preview">
          <!-- 预览/修改标签页 -->
          <TemplatePreviewEdit
            :active-tab="activeTab"
            :file-url="fileUrl"
            :is-show-edit="false"
          />
        </div>
      </div>
    </CostAuditDialog>
    <CostAuditDialog
      :title="dialogTitle"
      :visible="dialogVisible"
      :width="dialogWidth"
      :close-on-click-modal="false"
      @cancel="handleCancel"
      @confirm="handleConfirm"
    >
      <cost-audit-table
        :table-data="selectDocumentWhData"
        :columns="selectDocumentWhColumns"
        :show-selection="true"
        :show-pagination="true"
        :pagination="selectDocumentWhPagination"
        @pagination-change="selectDocumentWhPaginationChange"
        @selection-change="selectDocumentWhSelectionChange"
      >
        <!-- 创建时间自定义单元格 -->
        <template #createTime="{ row }">
          <div>{{ row.createTime ? row.createTime.split(' ')[0] : '-' }}</div>
          <div>{{ row.createTime ? row.createTime.split(' ')[1] : '-' }}</div>
        </template>
      </cost-audit-table>
    </CostAuditDialog>
  </div>
</template>
<script>
  // import { taskMixin } from './index.js'
  import CostAuditTable from '@/components/costAudit/CostAuditTable.vue'
  import CostAuditDialog from '@/components/costAudit/CostAuditDialog.vue'
  import TemplatePreviewEdit from '@/components/costAudit/TemplatePreviewEdit.vue'
  import { getAllUnitList } from '@/api/auditEntityManage'
  import {
    getWhCateList,
    queryByDocumentId,
    getCostProjectDocumentFile,
  } from '@/api/auditReviewDocManage.js'
  import { getData } from '@/api/auditDocNoManage.js'
  import {
    addCostProjectDocument,
    updateCostProjectDocument,
    deleteCostProjectDocument,
  } from '@/api/taskCustomizedRelease.js'
  import { dictMixin, regionMixin } from '@/mixins/useDict'
  import { uploadFile } from '@/api/file'
  export default {
    components: { CostAuditTable, CostAuditDialog, TemplatePreviewEdit },
    mixins: [dictMixin, regionMixin],
    props: {
      // 父组件传递的参数
      project: {
        type: Object,
        default: () => {},
      },
      isView: {
        type: Boolean,
        default: false,
      },
      documentData: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        dictData: {
          whGenerateType: [],
        },
        activeDocumentTypeId: '',
        document: {
          documentId: '',
          documentWhId: '',
          documentNumber: '',
          enterpriseId: [],
          dataList: [],
          isPushed: '1',
        },
        loading: {
          saveDocument: false,
        },
        activeView: 'list', // list edit
        activeTab: 'preview', // 当前标签页，preview:预览，edit:修改
        // 所有单位列表
        allUnits: [],
        dialogVisible: false,
        dialogTitle: '选择文号',
        documentDialogVisible: false,
        documentDialogTitle: '编辑监审通知书',
        dialogWidth: '70%',
        fileUrl: '',
        selectDocumentWhData: [],
        selectDocumentWhPagination: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
        },
        selectDocumentWhSelection: [],
        costDocumentTemplateFiles: [],
        documentRules: {
          // documentNumber: [
          //   {
          //     required: true,
          //     message: '请选择通知书文号',
          //     trigger: 'change',
          //   },
          // ],
          enterpriseId: [
            {
              required: true,
              message: '请选择被监审单位',
              trigger: 'change',
            },
          ],
          documentId: [
            {
              required: true,
              message: '请选择模板',
              trigger: 'change',
            },
          ],
          isPushed: [
            {
              required: true,
              message: '请选择否推送被监审单位',
              trigger: 'change',
            },
          ],
        },
      }
    },
    computed: {
      selectDocumentWhColumns() {
        return [
          {
            prop: 'whType',
            label: '文号分类',
            showOverflowTooltip: true,
            align: 'center',
            formatter: (row) => {
              let documentName =
                this.documentData.documentTypes.find(
                  (item) => item.id == row.whType
                )?.documentName || '-'
              return documentName
            },
          },
          {
            prop: 'whName',
            label: '文号名称',
            showOverflowTooltip: true,
            align: 'center',
          },
          {
            prop: 'areaCode',
            label: '适用区域',
            showOverflowTooltip: true,
            align: 'center',
            formatter: (row) => this.regionNameMap[row.areaCode] || '-',
          },
          {
            prop: 'generateType',
            label: '生成类型',
            showOverflowTooltip: true,
            align: 'center',
            width: 120,
            formatter: (row) =>
              this.getDictName('whGenerateType', row.generateType),
          },
        ]
      },
    },
    watch: {},
    mounted() {
      this.loadOpts()
    },
    methods: {
      // 查看监审文书
      handleDocView(row) {
        this.document = {
          ...row,
        }
        // 从API中获取文件URL
        downDocument({
          id: row.id,
        }).then((res) => {
          if (res.state) {
            // this.fileUrl = res.value || ''
            this.handleViewScan(res.value || '')
          } else {
            this.$message.error('获取文件URL失败')
          }
        })
        // this.handleTemplateChange()
        // this.documentDialogVisible = true
        // getCostProjectDocumentFile({
        //   id: row.id,
        // }).then((res) => {
        //   this.costDocumentTemplateFiles = res.value || []
        // })
      },
      handleDocumentTypeClick(data) {
        this.activeDocumentTypeId = data.id
        this.$emit('refresh', data)
      },
      getEnterpriseName(row) {
        // 处理enterpriseId，无论是数组还是逗号分隔的字符串
        let enterpriseIds = []
        if (Array.isArray(row.enterpriseId)) {
          enterpriseIds = row.enterpriseId
        } else if (typeof row.enterpriseId === 'string') {
          // 处理逗号分隔的字符串
          enterpriseIds = row.enterpriseId
            .split(',')
            .map((id) => id.trim())
            .filter((id) => id)
        } else if (row.enterpriseId) {
          // 处理其他可能的非空值
          enterpriseIds = [row.enterpriseId]
        }

        if (enterpriseIds.length > 0) {
          // 返回多个企业名称，用逗号分隔
          return enterpriseIds
            .map(
              (id) => this.allUnits.find((item) => item.unitId == id)?.unitName
            )
            .filter((name) => name)
            .join(', ')
        }
        return '-'
      },
      getDocumenType(row) {
        return this.documentData.documentTypes.find(
          (item) => item.id == row.documentId
        )?.documentName
      },
      handlePaginationChange({ currentPage, pageSize }) {
        this.$emit('paginationChange', { currentPage, pageSize })
      },

      // 加载选项数据
      loadOpts() {
        // 加载所有单位列表
        getAllUnitList().then((res) => {
          this.allUnits = res.value || []
          // 过滤掉状态为停用的数据
          this.allUnits = this.allUnits.filter((item) => item.status == 1)
        })
      },

      // 生成文书
      handleGenerateDocument() {
        this.documentDialogVisible = true
        this.activeView = 'form'
        this.document = {
          documentId: '',
          documentWhId: '',
          documentNumber: '',
          enterpriseId: [],
          isPushed: '1', // 默认设置为'1'（是）
        }
        if (this.activeDocumentTypeId) {
          this.document.documentId = this.activeDocumentTypeId
        }
        this.costProjectDocumentFiles = []
      },
      selectClick() {
        this.dialogVisible = true
        this.activeView = 'table'
        this.getWhListData()
      },
      getWhListData() {
        getData({
          pageNum: this.selectDocumentWhPagination.currentPage,
          pageSize: this.selectDocumentWhPagination.pageSize,
          whType: this.document.documentId,
        }).then((res) => {
          this.selectDocumentWhData = res.value.records || []
          this.selectDocumentWhPagination.total = res.value.total || 0
        })
      },
      selectDocumentWhPaginationChange({ currentPage, pageSize }) {
        this.selectDocumentWhPagination.currentPage = currentPage
        this.selectDocumentWhPagination.pageSize = pageSize
      },
      selectDocumentWhSelectionChange(selection) {
        if (selection.length > 1) {
          this.$message.error('只能选择一个文号！')
          return
        } else {
          this.selectDocumentWhSelection = selection
        }
      },
      handleTemplateChange() {
        this.fileUrl = this.documentData.documentTypes.find(
          (item) => item.id === this.document.documentId
        ).fileUrl
        this.getDocumentData(this.document.documentId)
      },
      getDocumentData(documentId) {
        if (documentId) {
          queryByDocumentId({ documentId }).then((res) => {
            this.costDocumentTemplateFiles = res.value || []
          })
        }
      },
      handleConfirm() {
        switch (this.activeView) {
          case 'table':
            this.handleConfirmSelect()
            break
          case 'form':
            this.handleSaveDocument()
            break
          default:
            break
        }
      },
      handleConfirmSelect() {
        if (this.selectDocumentWhSelection.length !== 1) {
          this.$message.error('请选择一个文号！')
          return
        }

        this.document.documentNumber = this.selectDocumentWhSelection[0].whNo
        this.document.documentWhId = this.selectDocumentWhSelection[0].id // 假设这是正确的字段名
        this.dialogVisible = false
        this.activeView = 'form'
      },
      // 保存文档
      handleSaveDocument() {
        // 验证是否选择了企业
        if (
          !this.document.enterpriseId ||
          this.document.enterpriseId.length === 0
        ) {
          this.$message.error('请至少选择一个被监审单位！')
          return
        }

        this.loading.saveDocument = true
        if (this.document.id) {
          updateCostProjectDocument({
            id: this.document.id,
            // documentAlias: this.document.documentAlias,
            documentId: this.document.documentId,
            documentNumber: this.document.documentNumber,
            documentWhId: this.document.documentWhId,
            costProjectDocumentFiles: this.costDocumentTemplateFiles,
            isPushed: this.document.isPushed, // 添加isPushed字段
            projectId: this.project.projectId,
            // electronicDocumentUrl: '',
            enterpriseId: this.document.enterpriseId.join(','), // 保存时转换为逗号分隔的字符串
            // feedbackDocumentUrl: '',
            // feedbackTime: '',
            // generateTime: '',
          })
            .then((res) => {
              this.loading.saveDocument = false
              this.$message.success('保存成功！')
              this.documentDialogVisible = false
              this.activeView = ''
              this.$emit('refresh', this.project.projectId)
            })
            .catch((err) => {
              this.loading.saveDocument = false
            })
        } else {
          // 处理多选逻辑，如果选择了多个单位，为每个单位创建一个文档记录
          const promises = this.document.enterpriseId.map((enterpriseId) => {
            return addCostProjectDocument({
              // documentAlias: this.document.documentAlias,
              projectId: this.project.projectId,
              documentId: this.document.documentId,
              documentNumber: this.document.documentNumber,
              documentWhId: this.document.documentWhId,
              costProjectDocumentFiles: this.costDocumentTemplateFiles || [],
              enterpriseId: enterpriseId,
              // electronicDocumentUrl: '',
              // feedbackDocumentUrl: '',
              // feedbackTime: '',
              // generateTime: '',
              isPushed: this.document.isPushed, // 使用isPushed，如果不存在则使用isPushed
              // orderNum: 0,
              // pushTime: '',
              // scanDocumentUrl: '',
            })
          })

          Promise.all(promises)
            .then(() => {
              this.loading.saveDocument = false
              this.$message.success('保存成功！')
              this.documentDialogVisible = false
              this.activeView = ''
              this.$emit('refresh', this.project.projectId)
            })
            .catch((err) => {
              this.loading.saveDocument = false
            })
        }
      },
      // 处理取消
      handleCancel() {
        if (this.activeView === 'form') {
          this.documentDialogVisible = false
        } else {
          this.activeView = 'form'
          this.dialogVisible = false
        }
      },

      // 上传扫描件
      handleUploadScan(row, type) {
        let loading = null
        // 第一步：创建文件选择器
        const input = document.createElement('input')
        input.type = 'file'
        input.accept = '.pdf,.doc,.docx,.xls,.xlsx,.csv' // 允许的文件类型

        input.onchange = async (event) => {
          const file = event.target.files[0]
          if (!file) return

          try {
            // 校验文件大小（50MB）
            const maxSize = 50 * 1024 * 1024 // 50MB
            if (file.size > maxSize) {
              this.$message.error('文件大小不能超过50MB！')
              return
            }

            // 校验文件格式
            const allowedFormats = [
              '.pdf',
              '.doc',
              '.docx',
              '.xls',
              '.xlsx',
              'csv',
            ]
            const fileName = file.name.toLowerCase()
            const isValidFormat = allowedFormats.some((format) =>
              fileName.endsWith(format)
            )

            if (!isValidFormat) {
              this.$message.error(
                '只允许上传.pdf,.doc,.docx,.xls,.xlsx,.csv格式的文件！'
              )
              return
            }

            // 显示遮罩层
            loading = this.$baseLoading(1, '文件上传中...')

            // 第三步：创建FormData并上传文件
            const formData = new FormData()
            formData.append('file', file)

            // 先调用上传API
            const uploadRes = await uploadFile('/api/file/v1/upload', formData)

            // 第四步：检查上传结果
            if (!uploadRes || !uploadRes.value) {
              // this.$message.error('文件上传失败！');
              return
            }

            // 第五步：文件上传成功后，再更新数据
            const fileInfo = uploadRes.value
            // 创建更新数据对象
            const updateData = {
              ...row,
              scanDocumentUrl: fileInfo?.savePath, // 更新扫描件URL
            }

            // 第六步：调用更新API
            await updateCostProjectDocument(updateData)

            // 第七步：更新成功，显示提示并刷新
            this.$message.success('文件上传成功并更新数据！')
            this.$emit('refresh', this.project.projectId) // 通知父组件刷新
          } catch (error) {
            // 错误处理
            console.log('操作失败：' + (error.message || '未知错误'))
            // this.$message.error('操作失败：' + (error.message || '未知错误'))
          } finally {
            // 关闭遮罩层
            loading.close()
          }
        }
        // 触发文件选择
        input.click()
      },
      // 查看扫描件
      handleViewScan(fileUrl, type) {
        if (!fileUrl) {
          this.$message.error('暂无文件！')
          return
        }
        let _fileUrl = ''
        if (fileUrl.startsWith('http')) {
          _fileUrl = fileUrl
        } else {
          fileUrl = window.context.form + fileUrl
        }
        // 对文件URL进行Base64编码
        const encodedUrl = encodeURIComponent(Base64.encode(_fileUrl))

        // 构建 kkFileView 预览URL
        // onlinePreview - 在线预览
        // onlinePreview?type=pdf - 强制使用PDF模式预览
        window.open(`${host}:8012/onlinePreview?url=${encodedUrl}`)
      },
      // 编辑文档
      handleEditDocument(row) {
        this.documentDialogVisible = true
        this.activeView = 'form'
        this.loadOpts()
        // 确保enterpriseId是数组格式，处理可能的逗号分隔字符串
        const enterpriseId = row.enterpriseId
          ? Array.isArray(row.enterpriseId)
            ? row.enterpriseId
            : typeof row.enterpriseId === 'string'
            ? row.enterpriseId
                .split(',')
                .map((id) => id.trim())
                .filter((id) => id) // 将逗号分隔字符串转换为数组
            : [row.enterpriseId]
          : []
        this.document = {
          ...row,
          documentId: Number(row.documentId),
          enterpriseId,
          // 确保isPushed有值，如果row中没有，设置默认值'1'
          isPushed: row.isPushed !== undefined ? row.isPushed : '1',
        }
        this.fileUrl = this.documentData.documentTypes.find(
          (item) => item.id === this.document.documentId
        ).fileUrl
        this.getDocumentData(this.document.documentId)
      },

      // 签章
      handleSignDocument(row) {},

      // 删除文档
      handleDeleteDocument(row) {
        this.$confirm('确定要删除该数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          deleteCostProjectDocument(row.id).then((res) => {
            this.$message.success('删除成功！')
            this.$emit('refresh', this.project.projectId)
          })
        })
      },

      // 下载文档
      handleDownloadDocument(row) {},
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/costAudit.scss';
  .documents-layout {
    display: flex;
    margin-bottom: 20px;
  }

  .documents-type-list {
    width: 200px;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    padding: 10px;
    margin-right: 20px;
  }

  .documents-type-list h3 {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
  }

  .type-item {
    padding: 5px 0;
    cursor: pointer;
    font-size: 12px;
  }

  .type-item:hover {
    color: $base-color-default;
  }

  .type-item.active {
    color: $base-color-default;
  }

  .documents-content {
    flex: 1;
  }

  .generate-btn {
    margin-bottom: 10px;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .mt10 {
    margin-top: 10px;
  }

  .mt20 {
    margin-top: 20px;
  }
  .document-edit-container {
    display: flex;
    .document-params {
      width: 50%;
    }
    .document-preview {
      width: 50%;
    }
  }
</style>