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

<template>
  <!-- 成本审核管理-任务详情-监审文书 直接复用原 auditNoticeTab 代码 -->
  <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="iconfont-5039297 icon-zengjia1"
            @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 }">
            {{ row.documentName || 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"
              type="text"
              size="mini"
              @click="handleUploadScan(scope.row, 'scanDocumentUrl')"
            >
              上传附件
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="handleViewScan(scope.row.scanDocumentUrl)"
            >
              查看附件
            </el-button>
          </template>
          <template #feedbackDocumentUrl="scope">
            <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
              type="text"
              size="mini"
              @click="handleDocView(scope.row)"
            >
              查看
            </el-button>
            <el-button
              v-if="!isView && !getDocumenType(scope.row).includes('通知书')"
              type="text"
              size="mini"
              :disabled="true"
              @click="handleEditDocument(scope.row)"
            >
              修改
            </el-button>
            <el-button
              v-if="!isView"
              type="text"
              size="mini"
              :disabled="true"
              @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>
              <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>

            <!-- 数据内容区域 -->
            <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="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">
                    <div v-if="scope.row.originalText !== '需要提供材料'">
                      <el-input
                        v-if="scope.row.originalText.includes('时间')"
                        v-model="scope.row.dataValue.split(' ')[0]"
                        size="small"
                        placeholder="请输入数据值"
                      ></el-input>
                      <el-input
                        v-else
                        v-model="scope.row.dataValue"
                        size="small"
                        placeholder="请输入数据值"
                      ></el-input>
                    </div>
                    <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="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
                        v-if="scope.row.dataValue"
                        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 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',
        activeTab: 'preview',
        allUnits: [],
        dialogVisible: false,
        dialogTitle: '选择文号',
        documentDialogVisible: false,
        documentDialogTitle: '查看监审通知书',
        dialogWidth: '80%',
        fileUrl: '',
        selectDocumentWhData: [],
        selectDocumentWhPagination: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
        },
        selectDocumentWhSelection: [],
        costDocumentTemplateFiles: [],
        documentRules: {
          enterpriseId: [
            {
              required: true,
              message: '请选择被监审单位',
              trigger: 'change',
            },
          ],
          documentId: [
            {
              required: true,
              message: '请选择模板',
              trigger: 'change',
            },
          ],
          isPushed: [
            {
              required: true,
              message: '请选择否推送被监审单位',
              trigger: 'change',
            },
          ],
        },
        dataUploadUrl: [],
        resCostDocumentTemplateFiles: [],
      }
    },
    computed: {
      selectDocumentWhColumns() {
        return [
          {
            prop: 'whType',
            label: '文号分类',
            showOverflowTooltip: true,
            align: 'center',
            formatter: (row) => {
              const 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) {
          if (newVal.length > 0) {
            this.costDocumentTemplateFiles.forEach((item) => {
              if (
                item.pinyin.includes('ShiJian') &&
                (item.dataValue == null || item.dataValue == '')
              ) {
                const date = new Date()
                const year = date.getFullYear()
                const month = String(date.getMonth() + 1).padStart(2, '0')
                const day = String(date.getDate()).padStart(2, '0')
                item.dataValue = `${year}-${month}-${day}`
              }
              if (
                item.originalText.includes('需要提供材料') &&
                item.dataValue
              ) {
                this.dataUploadUrl = item.dataValue
              }
            })
          }
        },
        deep: true,
      },
    },
    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) {
        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)
          if (this.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 {
              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: '',
        }
        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
          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() {
        const 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 = ''
        this.getDocumentData()
      },
      formatDaValue(res) {
        this.costDocumentTemplateFiles =
          JSON.parse(JSON.stringify(res.value || [])) || []
        this.resCostDocumentTemplateFiles =
          JSON.parse(JSON.stringify(res.value || [])) || []
        let unit = this.allUnits.find(
          (item) => item.unitId === this.document.enterpriseId
        )
        this.costDocumentTemplateFiles = this.costDocumentTemplateFiles.filter(
          (row) => row.pinyin !== 'ChengBenXiangMu' && row.pinyin !== 'XingCi'
        )
        let document = this.documentData.documentTypes.find(
          (item) => item.id == row.documentId
        )
        let documenName = document.documentTypeName || documentName || ''
        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
          }
          if (item.originalText.includes('需要提供材料') && item.dataValue) {
            this.dataUploadUrl = item.dataValue
          }
          if (item.pinyin.includes('DiGaoNeiRong') && item.dataValue) {
            // 移除所有HTML标签
            item.dataValue = item.dataValue.replace(/<[^>]+>/g, '')
          }
          if (
            item.pinyin.includes('ShiJian') &&
            (item.dataValue == null || item.dataValue == '')
          ) {
            // 获取当前时间，格式为YYYY年MM月DD日
            item.dataValue = moment(new Date()).format('YYYY年MM月DD日')
          } else if (item.pinyin.includes('ShiJian') && item.dataValue) {
            item.dataValue = item.dataValue.includes('年')
              ? item.dataValue
              : moment(item.dataValue).format('YYYY年MM月DD日')
          }
          if (item.pinyin.includes('RiQi') && item.dataValue) {
            item.dataValue = item.dataValue.includes('年')
              ? item.dataValue
              : moment(item.dataValue).format('YYYY年MM月DD日')
          }
          if (item.pinyin.includes('DiGaoNeiRong') && item.dataValue) {
            // 移除所有HTML标签
            item.dataValue = item.dataValue.replace(/<[^>]+>/g, '')
          }
          if (documenName.includes('成本监审通知书')) {
            if (item.pinyin.includes('DanWeiMingCheng')) {
              item.dataValue = unit.unitName
            }
            if (item.pinyin.includes('FaRenDaiBiao')) {
              item.dataValue = unit?.corporateRepresentative || ''
            }
            if (
              item.pinyin.includes(
                'ChengBenJianShenTongZhiShuChuangJianRiQi'
              ) &&
              (item.dataValue == null || item.dataValue == '')
            ) {
              // 获取当前时间
              item.dataValue = moment(new Date()).format('YYYY年MM月DD日')
            }
            if (item.pinyin.includes('ChuangJianRiQi')) {
              // 获取当前时间或使用有效日期
              item.dataValue =
                item.dataValue && !item.dataValue.includes('年')
                  ? moment(item.dataValue).format('YYYY年MM月DD日')
                  : moment(new Date()).format('YYYY年MM月DD日')
            }
          }
          if (documenName.includes('成本监审提取资料登记表')) {
            if (
              item.pinyin.includes('DengJiBiaoShengChengRiQi') &&
              (item.dataValue == null || item.dataValue == '')
            ) {
              // 获取当前时间，格式为YYYY年MM月DD日
              item.dataValue = moment(new Date()).format('YYYY年MM月DD日')
            }
          }
          if (documenName.includes('成本审核初步意见表')) {
            if (
              item.pinyin.includes('YiJianBiaoShengChengRiQi') &&
              (item.dataValue == null || item.dataValue == '')
            ) {
              // 获取当前时间，格式为YYYY年MM月DD日
              item.dataValue = moment(new Date()).format('YYYY年MM月DD日')
            }
          }
          if (documenName.includes('政府定价成本监审结论报告')) {
            if (
              item.pinyin.includes('BaoGaoRiQi') &&
              (item.dataValue == null || item.dataValue == '')
            ) {
              // 获取当前时间，格式为YYYY年MM月DD日
              item.dataValue = moment(new Date()).format('YYYY年MM月DD日')
            }
            if (item.pinyin.includes('JieLunBaoGaoChuangJianRiQi')) {
              // 获取当前时间，格式为YYYY年MM月DD日
              item.dataValue = moment(new Date()).format('YYYY年MM月DD日')
            }
            if (item.pinyin.includes('JianShenRenWuFaBuShiJian')) {
              let dataValue = this.resCostDocumentTemplateFiles.find(
                (item2) => item2.pinyin === 'JianShenRenWuFaBuShiJian'
              ).dataValue
              item.dataValue = !dataValue.includes('年')
                ? moment(dataValue).format('YYYY年MM月DD日')
                : dataValue
            }
            if (
              item.pinyin.includes(
                'ChengBenJianShenTongZhiShuShengChengShiJian'
              )
            ) {
              let dataValue = this.resCostDocumentTemplateFiles.find(
                (item2) =>
                  item2.pinyin === 'ChengBenJianShenTongZhiShuShengChengShiJian'
              ).dataValue
              item.dataValue = !dataValue.includes('年')
                ? moment(dataValue).format('YYYY年MM月DD日')
                : dataValue
            }
            if (item.pinyin.includes('ChengBenZiLiaoShangBaoShiJian')) {
              let dataValue = this.resCostDocumentTemplateFiles.find(
                (item2) => item2.pinyin === 'ChengBenZiLiaoShangBaoShiJian'
              ).dataValue
              item.dataValue = !dataValue.includes('年')
                ? moment(dataValue).format('YYYY年MM月DD日')
                : dataValue
            }
          }
          if (documenName.includes('成本审核初步意见告知书')) {
            if (
              item.pinyin.includes(
                'ChengBenJianShenTongZhiShuChuangJianShiJian'
              ) &&
              item.dataValue
            ) {
              // 获取当前时间，格式为YYYY年MM月DD日
              item.dataValue = !item.dataValue.includes('年')
                ? moment(item.dataValue).format('YYYY年MM月DD日')
                : item.dataValue
            }
          }
          // 回显文号
          // 获取选中的文号信息
          const selectedDocument = this.selectDocumentWhSelection[0]
          if (selectedDocument) {
            if (
              item.pinyin.includes('WenHao') ||
              item.pinyin.includes('WenJianHao')
            ) {
              item.dataValue = selectedDocument.whNo
            }
            if (item.pinyin.includes('SongDaWenShuMingCheng')) {
              item.dataValue = selectedDocument.whName
            }
          }
        })
      },
      getDocumentData() {
        if (this.document.id === null || this.document.id === '') {
          queryByDocumentIdandWhereValue({
            documentId: this.document.documentId,
            whereValue: this.project.projectId,
            unitId: this.document.enterpriseId,
            // projectId: this.project.projectId,
          }).then((res) => {
            this.formatDaValue(res)
          })
        } else {
          getCostProjectDocumentFile({
            // documentId: this.document.documentId,
            // whereValue: this.project.projectId,
            id: this.document.id,
          }).then((res) => {
            this.formatDaValue(res)
          })
        }
      },
      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() {
        if (this.document.enterpriseId) {
          const 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
            }
          })
        }
      },
      handleSaveDocument() {
        this.$refs.documentForm.validate((valid) => {
          if (!valid) {
            this.$message.error('请填写必填项！')
            return false
          }
          // 判断this.costDocumentTemplateFiles里面的值是否为空，一次性提示所有为空的值需要填写
          let emptyFields = []
          this.costDocumentTemplateFiles.forEach((item) => {
            if (!item.dataValue && item.originalText !== '需要提供材料') {
              emptyFields.push(item.originalText)
            }
          })
          if (emptyFields.length > 0) {
            this.$message.error(emptyFields.join('、') + '不能为空！')
            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(() => {
                this.loading.saveDocument = false
                this.$message.success('保存成功！')
                this.documentDialogVisible = false
                this.activeView = ''
                this.$emit('refresh', this.project.projectId)
              })
              .catch(() => {
                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(() => {
                this.loading.saveDocument = false
              })
          }
        })
      },
      handleCancel() {
        if (this.activeView === 'form') {
          this.documentDialogVisible = false
        } else {
          this.activeView = 'form'
          this.dialogVisible = false
        }
      },

      handleUploadScan(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 {
            const maxSize = 50 * 1024 * 1024
            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, '文件上传中...')

            const formData = new FormData()
            formData.append('file', file)

            const uploadRes = await uploadFile('/api/file/v1/upload', formData)

            if (!uploadRes || !uploadRes.value) {
              return
            }

            const fileInfo = uploadRes.value
            const updateData = {
              id: row.id,
              scanDocumentUrl: fileInfo?.savePath,
            }

            await updateScan(updateData)

            this.$message.success('文件上传并更新成功！')
            this.$emit('refresh', this.project.projectId)
          } catch (error) {
            this.$message.error('操作失败：' + (error.message || '未知错误'))
          } finally {
            loading && loading.close && loading.close()
          }
        }
        input.click()
      },
      handleEditDocument(row) {
        this.documentDialogTitle = '修改监审通知书'
        this.documentDialogVisible = true
        this.activeView = 'form'
        this.loadOpts()
        getCostProjectDocumentDetail({ id: row.id }).then((res) => {
          this.document = {
            ...this.document,
            ...res.value,
          }
          this.document.enterpriseId = this.isMultipleMode
            ? this.document.enterpriseId.split(',')
            : this.document.enterpriseId
          this.fileUrl = this.document.electronicDocumentUrl
          this.getDocumentData()
        })
      },
      handleDeleteDocument(row) {
        this.$confirm('确认删除该监审通知书？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            deleteCostProjectDocument(row.id)
              .then(() => {
                this.$message.success('删除成功！')
                this.$emit('refresh', this.project.projectId)
              })
              .catch(() => {
                this.$message.error('删除失败！')
              })
          })
          .catch(() => {})
      },
      handleDownloadDocument(row) {
        this.$loading({
          lock: true,
          text: '文件下载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })

        downDocument({
          id: row.id,
        })
          .then((res) => {
            this.$loading().close()

            if (!res || !res.state) {
              this.$message.error(
                `下载失败：${res?.message || '未获取到文件数据'}`
              )
              return
            }

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

            let fileName = ''

            const urlParts = fileUrl.split('/')
            let urlFileName = urlParts[urlParts.length - 1]

            if (urlFileName.includes('?')) {
              urlFileName = urlFileName.split('?')[0]
            }

            if (urlFileName && /\.[a-zA-Z0-9]+$/.test(urlFileName)) {
              fileName = urlFileName
            } else {
              fileName =
                row.documentName ||
                `${row.documentName}_${new Date().getTime()}`

              if (!/\.[a-zA-Z0-9]+$/.test(fileName)) {
                fileName += '.pdf'
              }
            }
            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)
          })
          .catch(() => {
            this.$loading().close()
          })
      },
      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))
        window.open(`${host}:8012/onlinePreview?url=${encodedUrl}`)
      },
      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 {
            const maxSize = 50 * 1024 * 1024
            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, '文件上传中...')

            const formData = new FormData()
            formData.append('file', file)

            const uploadRes = await uploadFile('/api/file/v1/upload', formData)

            if (!uploadRes || !uploadRes.value) {
              return
            }

            row.dataValue = uploadRes.value.savePath
            this.$message.success('上传成功！')
          } catch (error) {
            this.$message.error('上传失败：' + (error.message || '未知错误'))
          } finally {
            loading && loading.close && loading.close()
          }
        }
        input.click()
      },
    },
  }
</script>
<style scoped lang="scss">
  @import '@/styles/costAudit.scss';

  .documents-layout {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap; // 允许在窄屏时换行，左侧列表在上，右侧内容在下
  }

  .documents-type-list {
    // 默认左侧固定宽度，不随容器缩小，避免内容被压缩
    flex: 0 0 240px; // 不增长不收缩，固定240px
    width: 240px;
    min-width: 200px;
    flex-shrink: 0;
    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 1 0;
    min-width: 0; // 修复某些浏览器下表格溢出导致的布局问题
  }

  .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%;
    }
  }
  // 响应式：小屏时左侧列表占满一行并堆叠到上方
  @media (max-width: 992px) {
    .documents-type-list {
      flex: 0 0 220px;
      width: 220px;
    }
  }

  @media (max-width: 768px) {
    .documents-type-list {
      flex: 1 1 100%;
      width: 100%;
      min-width: auto;
      margin-right: 0;
      margin-bottom: 12px;
    }
    .documents-content {
      flex: 1 1 100%;
      width: 100%;
    }
  }
</style>