cbjsxt-front-master/src/views/costAudit/projectInfo/auditTaskManage/taskCustomizedRelease/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
            v-if="!isView"
            plain
            type="success"
            icon="el-icon-circle-plus"
            @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"
              @click="handleUploadScan(scope.row, 'scanDocumentUrl')"
            >
              上传附件
            </el-button>
            <el-button
              v-if="getDocumenType(scope.row).includes('送达回证')"
              type="text"
              size="mini"
              @click="handleViewScan(scope.row.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('送达回证')">
              <!-- <span>
                {{ scope.row.feedbackDocumentUrl ? '已回传' : '未回传' }}
              </span> -->
              <el-button
                v-if="scope.row.feedbackDocumentUrl"
                type="text"
                size="mini"
                @click="handleViewScan(scope.row.feedbackDocumentUrl)"
              >
                查看附件
              </el-button>
            </div>
          </template>
          <template #electronicDocumentUrl="scope">
            <el-button
              v-if="!isView"
              type="text"
              size="mini"
              @click="handleEditDocument(scope.row)"
            >
              修改
            </el-button>
            <!-- <el-button
              v-if="!isView"
              type="text"
              size="mini"
              @click="handleSignDocument(scope.row)"
            >
              签章
            </el-button> -->
            <el-button
              v-if="!isView"
              type="text"
              size="mini"
              @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="82%"
      :close-on-click-modal="false"
      @cancel="handleCancel"
      @confirm="handleConfirm"
    >
      <div class="document-edit-container">
        <!-- 左侧：文书参数设置 -->
        <div class="document-params">
          <h4>文书参数设置：</h4>
          <el-form
            ref="documentForm"
            v-loading="loading.saveDocument"
            :model="document"
            label-width="170px"
            size="small"
            :rules="documentRules"
          >
            <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>
            </el-form-item>
            <el-form-item label="通知书文号：" prop="documentNumber">
              <el-input
                v-model="document.documentNumber"
                placeholder="请选择通知书文号"
                style="width: 74%"
                disabled
              ></el-input>
              <!-- disabled -->
              <el-button
                type="primary"
                size="small"
                class="ml10"
                @click="selectClick"
              >
                选择文号
              </el-button>
            </el-form-item>
            <el-form-item label="被监审单位" prop="enterpriseId">
              <div style="display: flex; align-items: center; gap: 15px">
                <el-select
                  v-model="document.enterpriseId"
                  placeholder="请选择被监审单位"
                  style="width: 100%"
                  clearable
                  :multiple="isMultipleMode"
                  @change="handleEnterpriseChange"
                >
                  <el-option
                    v-for="item in allUnits"
                    :key="item.unitId"
                    :label="item.unitName"
                    :value="item.unitId"
                  ></el-option>
                </el-select>
              </div>
            </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="请输入数据值"
                    ></el-input>
                    <!-- 否则显示上传按钮 -->
                    <div v-else>
                      <el-button
                        type="text"
                        size="small"
                        @click="handleUploadClick(scope.row)"
                      >
                        上传附件
                      </el-button>
                      <el-button
                        v-if="scope.row.dataValue"
                        type="text"
                        size="small"
                        @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" />
        </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 {
    getCostProjectDocumentFile,
    queryByDocumentIdandWhereValue,
  } from '@/api/auditReviewDocManage.js'
  import { getData } from '@/api/auditDocNoManage.js'
  import {
    addCostProjectDocument,
    updateCostProjectDocument,
    deleteCostProjectDocument,
    getCostProjectDocumentDetail,
    updateScan,
    downDocument,
  } 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 {
        isMultipleMode: false,
        dictData: {
          whGenerateType: [],
        },
        activeDocumentTypeId: '',
        document: {
          createBy: '',
          createTime: '',
          documentAlias: '',
          documentId: '',
          documentName: '',
          documentNumber: '',
          documentType: '',
          documentWhId: '',
          electronicDocumentUrl: '',
          enterpriseId: [],
          feedbackDocumentUrl: '',
          feedbackTime: '',
          generateTime: '',
          id: '',
          isDeleted: '',
          isPushed: '',
          orderNum: 0,
          pkVal: '',
          projectId: '',
          pushTime: '',
          scanDocumentUrl: '',
          updateBy: '',
          updateTime: '',
        },
        loading: {
          saveDocument: false,
        },
        activeView: 'list', // list edit
        activeTab: 'preview', // 当前标签页，preview:预览，edit:修改
        // 所有单位列表
        allUnits: [],
        dialogVisible: false,
        dialogTitle: '选择文号',
        documentDialogVisible: false,
        documentDialogTitle: '添加监审通知书',
        dialogWidth: '80%',
        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',
            },
          ],
        },
        dataUploadUrl: [],
      }
    },
    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: {
      costDocumentTemplateFiles: {
        handler(newVal, oldVal) {
          if (newVal.length > 0) {
            console.log(this.costDocumentTemplateFiles)
            this.costDocumentTemplateFiles.forEach((item) => {
              if (
                item.pinyin.includes('ShiJian') &&
                (item.dataValue == null || item.dataValue == '')
              ) {
                // 获取当前时间，格式为YYYY-MM-DD HH:mm:ss
                let date = new Date()
                let year = date.getFullYear()
                let month = String(date.getMonth() + 1).padStart(2, '0')
                let day = String(date.getDate()).padStart(2, '0')
                let hours = String(date.getHours()).padStart(2, '0')
                let minutes = String(date.getMinutes()).padStart(2, '0')
                let seconds = String(date.getSeconds()).padStart(2, '0')
                item.dataValue = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
              }
              if (
                item.originalText.includes('需要提供材料') &&
                item.dataValue
              ) {
                this.dataUploadUrl = item.dataValue
              }
            })
          }
        },
        deep: true,
      },
    },
    mounted() {
      this.loadOpts()
    },
    methods: {
      handleDocumentTypeClick(data) {
        this.activeDocumentTypeId = data.id
        this.$emit('refresh', data)
      },
      getEnterpriseName(row) {
        let unit = this.allUnits.find(
          (item) => item.unitId === row.enterpriseId
        )
        // 处理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)
          // 筛选this.project.auditedUnitId中的单位，支持多种格式
          if (this.project.auditedUnitId) {
            // 确保将project.auditedUnitId转换为数组格式
            let auditedUnitIds = []
            if (Array.isArray(this.project.auditedUnitId)) {
              auditedUnitIds = this.project.auditedUnitId
            } else if (
              typeof this.project.auditedUnitId === 'string' &&
              this.project.auditedUnitId.includes(',')
            ) {
              // 如果是逗号分隔的字符串，转换为数组
              auditedUnitIds = this.project.auditedUnitId
                .split(',')
                .map((id) => id.trim())
            } else {
              // 单个ID也转换为数组
              auditedUnitIds = [this.project.auditedUnitId]
            }
            // 使用数组进行筛选
            this.allUnits = this.allUnits.filter((item) =>
              auditedUnitIds.includes(item.unitId)
            )
          }
        })
      },

      // 生成文书
      handleGenerateDocument() {
        this.documentDialogTitle = '添加监审通知书'
        this.documentDialogVisible = true
        this.activeView = 'form'
        this.costDocumentTemplateFiles = []
        this.document = {
          createBy: '',
          createTime: '',
          documentAlias: '',
          documentId: '',
          documentName: '',
          documentNumber: '',
          documentType: '',
          documentWhId: '',
          electronicDocumentUrl: '',
          enterpriseId: this.isMultipleMode ? [] : '',
          feedbackDocumentUrl: '',
          feedbackTime: '',
          generateTime: '',
          id: '',
          isDeleted: '',
          isPushed: '1',
          orderNum: this.documentData.list.length + 1,
          pkVal: '',
          projectId: '',
          pushTime: '',
          scanDocumentUrl: '',
          updateBy: '',
          updateTime: '',
        }
        // if(this.isMultipleMode){
        //   this.document.enterpriseId = this.project.auditedUnitId ? this.project.auditedUnitId.split(',') : []
        //   console.log('this.document.enterpriseId',this.document.enterpriseId)
        // }else{
        //   this.document.enterpriseId = this.project.auditedUnitId
        // }
        this.loadOpts()
        if (this.activeDocumentTypeId) {
          this.document.documentId = this.activeDocumentTypeId
          this.handleTemplateChange()
        }
      },
      getDetail() {
        getCostProjectDocumentDetail({
          projectId: this.project.projectId,
        }).then((res) => {
          if (res.value) {
            this.document = {
              ...this.document,
              ...res.value,
            }
            this.loadOpts()
          }
        })
      },
      selectClick() {
        this.dialogVisible = true
        this.activeView = 'table'
        this.getWhListData()
      },
      getWhListData() {
        getData({
          page: this.selectDocumentWhPagination.currentPage,
          pageSize: this.selectDocumentWhPagination.pageSize,
          whType: this.document.documentId,
        }).then((res) => {
          this.selectDocumentWhData = res.rows || []
          this.selectDocumentWhPagination.total = res.total || 0
          // 获取区域名称，填充regionNameMap
          if (this.selectDocumentWhData.length > 0) {
            this.fetchRegionNames(this.selectDocumentWhData, 'areaCode')
          }
        })
      },
      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() {
        let data = this.documentData.documentTypes.find(
          (item) => item.id === this.document.documentId
        )
        this.fileUrl = data.fileUrl
        this.document.documentName = data.documentName
        this.document.documentNumber = ''
        this.document.documentWhId = ''
      },
      getDocumentData() {
        if (this.document.id === null || this.document.id === '') {
          queryByDocumentIdandWhereValue({
            documentId: this.document.documentId,
            whereValue: this.project.projectId,
            unitId: this.document.enterpriseId,
          }).then((res) => {
            this.costDocumentTemplateFiles = res.value || []
            let unit = this.allUnits.find(
              (item) => item.unitId === this.document.enterpriseId
            )
            this.costDocumentTemplateFiles.forEach((item) => {
              if (item.pinyin.includes('BeiJianShenDanWei')) {
                item.dataValue = unit.unitName
              }
              if (item.pinyin.includes('ShouSongDaRen')) {
                item.dataValue = unit.contactName
              }
              if (item.pinyin.includes('BeiJianShenDanWeiBanGongDiDian')) {
                item.dataValue = unit.address
              }
              if (item.pinyin.includes('BeiJianShenDanWeiLianXiRenDianHua')) {
                item.dataValue = unit.contactMobile
              }
              // 回显文号
              // 获取选中的文号信息
              const selectedDocument = this.selectDocumentWhSelection[0]
              if (
                item.pinyin.includes('WenHao') ||
                item.pinyin.includes('WenJianHao')
              ) {
                item.dataValue = selectedDocument.whNo
              }
              if (item.pinyin.includes('SongDaWenShuMingCheng')) {
                item.dataValue = selectedDocument.whName
              }
            })
          })
        } else {
          getCostProjectDocumentFile({
            // documentId: this.document.documentId,
            // whereValue: this.project.projectId,
            id: this.document.id,
          }).then((res) => {
            this.costDocumentTemplateFiles = res.value || []
            let unit = this.allUnits.find(
              (item) => item.unitId === this.document.enterpriseId
            )
          })
        }
      },
      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
        }
        // 获取选中的文号信息
        const selectedDocument = this.selectDocumentWhSelection[0]

        this.document.documentNumber = selectedDocument.whNo
        this.document.documentWhId = selectedDocument.id
        // 数据表格回显文号
        this.costDocumentTemplateFiles.forEach((item) => {
          if (
            item.pinyin.includes('WenHao') ||
            item.pinyin.includes('WenJianHao')
          ) {
            item.dataValue = selectedDocument.whNo
          }
          if (item.pinyin.includes('SongDaWenShuMingCheng')) {
            item.dataValue = selectedDocument.whName
          }
        })
        this.dialogVisible = false
        this.activeView = 'form'
      },
      handleEnterpriseChange(val) {
        if (this.document.enterpriseId) {
          // BeiJianShenDanWei
          this.getDocumentData()
        }
      },
      // 保存文档
      handleSaveDocument() {
        // 校验表单
        this.$refs.documentForm.validate((valid) => {
          if (!valid) {
            this.$message.error('请填写必填项！')
            return false
          }
          this.loading.saveDocument = true
          if (this.document.id) {
            updateCostProjectDocument({
              ...this.document,
              costProjectDocumentFiles: this.costDocumentTemplateFiles,
              projectId: this.project.projectId,
              electronicDocumentUrl:
                this.document.electronicDocumentUrl || this.fileUrl,
              enterpriseId: this.isMultipleMode
                ? this.document.enterpriseId.join(',')
                : this.document.enterpriseId, // 保存时转换为逗号分隔的字符串
            })
              .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 {
            addCostProjectDocument({
              ...this.document,
              projectId: this.project.projectId,
              costProjectDocumentFiles: this.costDocumentTemplateFiles || [],
              enterpriseId: this.isMultipleMode
                ? this.document.enterpriseId.join(',')
                : this.document.enterpriseId,
              electronicDocumentUrl: this.fileUrl,
            })
              .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 = {
              id: row.id,
              scanDocumentUrl: fileInfo?.savePath, // 更新扫描件URL
            }

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

            // 第七步：更新成功，显示提示并刷新
            this.$message.success('文件上传成功并更新数据！')
            this.$emit('refresh', this.project.projectId) // 通知父组件刷新
          } catch (error) {
            // 错误处理
            // this.$message.error('操作失败：' + (error.message || '未知错误'))
          } finally {
            // 关闭遮罩层
            loading.close()
          }
        }
        // 触发文件选择
        input.click()
      },
      // 查看扫描件
      handleViewScan(fileUrl) {
        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.documentDialogTitle = '修改监审通知书'
        this.documentDialogVisible = true
        this.activeView = 'form'
        this.loadOpts()
        // 确保enterpriseId是数组格式，处理可能的逗号分隔字符串
        const enterpriseId = this.isMultipleMode
          ? row.enterpriseId.split(',')
          : row.enterpriseId
        this.document = {
          ...row,
          documentId: Number(row.documentId),
          enterpriseId,
          // 确保isPushed有值，如果row中没有，设置默认值'1'
          isPushed: row.isPushed !== undefined ? row.isPushed : '1',
        }
        this.fileUrl = this.document.electronicDocumentUrl
        this.getDocumentData()
      },

      // 签章
      handleSignDocument(row) {
        this.$message.warning('签章功能待实现！')
      },

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

      handleDownloadDocument1(row) {
        // 显示加载状态
        this.$loading({
          lock: true,
          text: '文件下载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        let fileUrl = window.context.form + row.electronicDocumentUrl
        let fileName = ''
        // 从URL中提取文件名
        const urlParts = fileUrl.split('/')
        let urlFileName = urlParts[urlParts.length - 1]

        // 处理URL可能包含查询参数的情况
        if (urlFileName.includes('?')) {
          urlFileName = urlFileName.split('?')[0]
        }

        // 检查从URL提取的文件名是否有效
        if (urlFileName && /\.[a-zA-Z0-9]+$/.test(urlFileName)) {
          fileName = urlFileName
        } else {
          // URL中无法提取有效文件名时，使用row.documentName作为备选
          fileName = row.documentName || `监审通知书_${new Date().getTime()}`

          // 确保备选文件名有扩展名
          if (!/\.[a-zA-Z0-9]+$/.test(fileName)) {
            fileName += '.pdf'
          }
        }
        // 创建隐藏的a标签进行下载
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = fileUrl
        // 设置下载文件名
        link.download = fileName
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        // 关闭加载状态
        this.$loading().close()
      },
      // 下载文档
      handleDownloadDocument(row) {
        // 显示加载状态
        this.$loading({
          lock: true,
          text: '文件下载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })

        // 从API中获取文件URL
        downDocument({
          id: row.id,
        })
          .then((res) => {
            // 关闭加载状态
            this.$loading().close()

            // 检查返回结果是否成功
            if (!res || !res.state) {
              this.$message.error(
                `下载失败：${res?.message || '未获取到文件数据'}`
              )
              return
            }

            // 获取文件URL
            const fileUrl = res.value
            if (!fileUrl) {
              this.$message.error('下载失败：未获取到文件URL')
              return
            }

            // 优先从URL中提取文件名
            let fileName = ''

            // 从URL中提取文件名
            const urlParts = fileUrl.split('/')
            let urlFileName = urlParts[urlParts.length - 1]

            // 处理URL可能包含查询参数的情况
            if (urlFileName.includes('?')) {
              urlFileName = urlFileName.split('?')[0]
            }

            // 检查从URL提取的文件名是否有效
            if (urlFileName && /\.[a-zA-Z0-9]+$/.test(urlFileName)) {
              fileName = urlFileName
            } else {
              // URL中无法提取有效文件名时，使用row.documentName作为备选
              fileName =
                row.documentName || `监审通知书_${new Date().getTime()}`

              // 确保备选文件名有扩展名
              if (!/\.[a-zA-Z0-9]+$/.test(fileName)) {
                fileName += '.pdf'
              }
            }
            // 创建隐藏的a标签进行下载
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = fileUrl
            // link.href = window.context.form + row.electronicDocumentUrl
            // 设置下载文件名
            link.download = fileName
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          })
          .catch((error) => {
            // 关闭加载状态
            this.$loading().close()
            console.error('获取文件URL失败:', error)
          })
      },
      handleUploadClick(row) {
        console.log('handleUploadClick', row)
        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
            this.costDocumentTemplateFiles.find(
              (item) => item.originalText === row.originalText
            ).dataValue = fileInfo.savePath
            this.$message.success('文件上传成功！')
          } catch (error) {
            console.error('文件上传失败:', error)
          } finally {
            // 关闭遮罩层
            loading.close()
          }
        }

        // 触发文件选择对话框显示
        input.click()
      },
    },
  }
</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: 55%;
    }
    .document-preview {
      width: 45%;
    }
  }
</style>