Merge remote-tracking branch 'origin/master'

luohairen

2024-11-27 abedc0c7a1a5b4b47d65d43a3d27fd8cb30c6848

Merge remote-tracking branch 'origin/master'

 public/index.html

@@ -23,186 +23,29 @@
      padding: 0.2em 0;
    }

    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999999;
    .loader {
      width: 150px; /* 原来的50px * 3 */
      aspect-ratio: 1; /* 保持宽高比 */
      color: #54f3f3;
      --_c: no-repeat radial-gradient(farthest-side, currentColor 92%, #0000);
      background:
        var(--_c) 50% 0 / 36px 36px, /* 原来的12px * 3 */
        var(--_c) 50% 100% / 36px 36px,
        var(--_c) 100% 50% / 36px 36px,
        var(--_c) 0 50% / 36px 36px,
        var(--_c) 50% 50% / 36px 36px,
        conic-gradient(from 90deg at 12px 12px, #0000 90deg, currentColor 0)
        -12px -12px / calc(150% + 6px) calc(150% + 6px); /* 调整中心点和尺寸 */
      animation: l8 1s infinite linear;
    }

    #loader {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      -webkit-animation: spin 2s linear infinite;
      -ms-animation: spin 2s linear infinite;
      -moz-animation: spin 2s linear infinite;
      -o-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
      z-index: 1001;
    }

    #loader:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      -webkit-animation: spin 3s linear infinite;
      -moz-animation: spin 3s linear infinite;
      -o-animation: spin 3s linear infinite;
      -ms-animation: spin 3s linear infinite;
      animation: spin 3s linear infinite;
    }

    #loader:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      -moz-animation: spin 1.5s linear infinite;
      -o-animation: spin 1.5s linear infinite;
      -ms-animation: spin 1.5s linear infinite;
      -webkit-animation: spin 1.5s linear infinite;
      animation: spin 1.5s linear infinite;
    }


    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }


    #loader-wrapper .loader-section {
      position: fixed;
      top: 0;
      width: 51%;
      height: 100%;
      background: #7171C6;
      z-index: 1000;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }

    #loader-wrapper .loader-section.section-left {
      left: 0;
    }

    #loader-wrapper .loader-section.section-right {
      right: 0;
    }


    .loaded #loader-wrapper .loader-section.section-left {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader-wrapper .loader-section.section-right {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader {
      opacity: 0;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    }

    .loaded #loader-wrapper {
      visibility: hidden;
      -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%);
      -webkit-transition: all 0.3s 1s ease-out;
      transition: all 0.3s 1s ease-out;
    }

    .no-js #loader-wrapper {
      display: none;
    }

    .no-js h1 {
      color: #222222;
    }

    #loader-wrapper .load_title {
      font-family: 'Open Sans';
      color: #FFF;
      font-size: 19px;
      width: 100%;
      text-align: center;
      z-index: 9999999999999;
      position: absolute;
      top: 60%;
      opacity: 1;
      line-height: 30px;
    }

    #loader-wrapper .load_title span {
      font-weight: normal;
      font-style: italic;
      font-size: 13px;
      color: #FFF;
      opacity: 0.5;
    }
    @keyframes l8 {to{transform: rotate(.5turn)}}
  </style>
  </head>
  <body>
    <div id="app">
        <div id="loader-wrapper">
            <div id="loader"></div>
            <div class="loader-section section-left"></div>
            <div class="loader-section section-right"></div>
            <div class="load_title">正在加载系统资源，请耐心等待</div>
        </div>
      <div style="display: flex;justify-content: center;align-items: center;height: 100%">
        <div class="loader"></div>
      </div>
    </div>
  </body>
</html>

 src/api/projectProcess/processConfigInfo.js

New file
@@ -0,0 +1,20 @@
import request from '@/utils/request'

// 获取流程类型配置信息表
export const getProcessConfigInfoByDeploy = (params) => {
  return request({
    url: "/process-config-info",
    method: "GET",
    params: params
  })
}

// 保存流程类型配置信息表
export const saveProcessConfigInfo = (data) => {
  return request({
    url: "/process-config-info/",
    method: "POST",
    data: data
  })
}


 src/components/FileUpload/index.vue

@@ -2,6 +2,7 @@
  <div class="upload-file">
    <el-upload
      multiple
      :accept="acceptList"
      :action="uploadFileUrl"
      :before-upload="handleBeforeUpload"
      :file-list="fileList"
@@ -15,7 +16,7 @@
      ref="fileUpload"
    >
      <!-- 上传按钮 -->
      <el-button size="mini" type="primary">选取文件</el-button>
      <el-button icon="el-icon-upload2" size="small" type="primary">上传</el-button>
      <!-- 上传提示 -->
      <div class="el-upload__tip" slot="tip" v-if="showTip">
        请上传
@@ -109,6 +110,11 @@
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    },
    acceptList () {
      let temp = '.*'
      temp = this.fileType.map(item => '.' + item).join(',')
      return temp
    }
  },
  methods: {
    // 上传前校检格式和大小

 src/views/components/Map/index.vue

@@ -198,7 +198,7 @@
                offset: [-35, -45],
                labelBg: "#3369FF",
                labelColor: "#fff",
                labelClick,
                labelClick: this.labelClick,
            };
            // 清除之前的标记
            this.map && this.map.clearOverLays();
@@ -213,13 +213,16 @@
            const { lat, lng: lon } = e.lnglat;

            this.makeDefaultMask({
                ...defaultMaskInfo,
                ...this.defaultMaskInfo,
                lon: String(lon),
                lat: String(lat),
            });
            this.getReverseGeocode(e).then((addr) => {
                this.$emit("mapClick", { e, addr });
          this.getReverseGeocode(e).then((addr) => {
            this.$emit("mapClick", {
              e,
              addr,
            });
          });
            console.log("点击事件", e);
        },

@@ -360,9 +363,9 @@
            }

            this.addEvent(marker, "mouseover", (e) =>
                markerMouseover(e, infoWin, labelOptions, getUniqueId())
                this.markerMouseover(e, infoWin, labelOptions, this.getUniqueId())
            );
            this.addEvent(marker, "mouseout", (e) => markerMouseout(e, infoWin));
            this.addEvent(marker, "mouseout", (e) => this.markerMouseout(e, infoWin));
        },

        // 标记所有点
@@ -401,7 +404,7 @@
        //标记点击事件
        markerClick(currentLabel, e) {
            const id = e.target.options.id;
            currentLabelStyleChange(currentLabel);
            this.currentLabelStyleChange(currentLabel);
            console.log("点击事件", e, currentLabel);
            this.getReverseGeocode(e).then((addr) => {
                this.$emit(
@@ -415,9 +418,10 @@

        // label点击事件
        labelClick(currentLabel, e) {
            console.log("触发点击事件")
            const id = e.target.options.id;
            currentLabelStyleChange(currentLabel);
            getReverseGeocode(e).then((addr) => {
            this.currentLabelStyleChange(currentLabel);
            this.getReverseGeocode(e).then((addr) => {
                this.$emit(
                    "labelClick",
                    id
@@ -449,9 +453,9 @@
            },
        },
    },
    beforeUnmount() {
        this.map = null;
    },
  beforeDestroy() {
    this.map = null;
  }
};

// const emits = defineEmits<{

 src/views/flowable/definition/component/EditProcessConfig.vue

New file
@@ -0,0 +1,103 @@
<template>
  <div>
    <el-dialog
      :title="`流程基础配置：` + deployName"
      :visible.sync="processConfigShow"
      width="500px"
      :close-on-click-modal="false"
      :before-close="handleClose">

      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="项目类型" prop="projectType">
          <el-select v-model="form.projectType" clearable placeholder="请选择项目类型">
            <el-option v-for="item in dict.type.sys_project_type" :key="item.value" :label="item.label"
                       :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="资金类型" prop="fundType">
          <el-select v-model="form.fundType" clearable placeholder="请选择资金类型">
            <el-option v-for="item in dict.type.sys_funding_type" :key="item.value" :label="item.label"
                       :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="投资类别" prop="investType">
          <el-select v-model="form.investType" clearable placeholder="请选择投资类别">
            <el-option v-for="item in dict.type.sys_investment_type" :key="item.value" :label="item.label"
                       :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="重点分类" prop="importanceType">
          <el-select v-model="form.importanceType" clearable placeholder="请选择重点分类">
            <el-option v-for="item in dict.type.sys_key_categories" :key="item.value" :label="item.label"
                       :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {saveProcessConfigInfo, getProcessConfigInfoByDeploy} from "@/api/projectProcess/processConfigInfo"

export default {
  dicts: ['sys_project_type', 'sys_key_categories', 'sys_funding_type', 'sys_investment_type'],
  name: "EditProcessConfig",
  props: {
    processConfigShow: {
      require: true,
      type: Boolean
    },
    deployName: {
      require: true,
      type: String
    },
    form: {
      require: true,
      type: Object
    }
  },
  data() {
    return {
      rules: {
        projectType: [
          { required: true, message: '请选择项目类型', trigger: 'change' }
        ],
        fundType: [
          { required: true, message: '请选资金类型', trigger: 'change' }
        ],
        investType: [
          { required: true, message: '请选择投资类别', trigger: 'change' }
        ],
        importanceType: [
          { required: true, message: '请选择重点分类', trigger: 'change' }
        ],
      }
    }
  },
  methods: {
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          saveProcessConfigInfo(this.form).then(res => {
            this.$message.success(res.msg)
            this.handleClose()
          })
        }
      });

    },
    handleClose() {
      this.$emit("close")
    }
  }
}
</script>

<style scoped>

</style>

 src/views/flowable/definition/index.vue

@@ -92,6 +92,7 @@
      <el-table-column label="操作" width="250" fixed="right"class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button @click="handleLoadXml(scope.row)" icon="el-icon-edit-outline" type="text" size="small">设计</el-button>
          <el-button @click="handleConfig(scope.row)" icon="el-icon-edit-outline" type="text" size="small">流程配置</el-button>
          <el-button @click="handleAddForm(scope.row)" icon="el-icon-edit-el-icon-s-promotion" type="text" size="small" v-if="scope.row.formId == null">配置主表单</el-button>
          <el-button @click="handleUpdateSuspensionState(scope.row)" icon="el-icon-video-pause" type="text" size="small" v-if="scope.row.suspensionState === 1">挂起</el-button>
          <el-button @click="handleUpdateSuspensionState(scope.row)" icon="el-icon-video-play" type="text" size="small" v-if="scope.row.suspensionState === 2">激活</el-button>
@@ -224,6 +225,11 @@
    <!--      append-to-body>-->
    <!--      <Model :deployId="deployId"/>-->
    <!--    </el-dialog>-->

    <edit-process-config :process-config-show="processConfigShow"
                         :deploy-name="configDeployName"
                         :form="configForm"
                         @close="closeConfig"/>
  </div>
</template>

@@ -242,16 +248,29 @@
import { getForm, addDeployForm ,listForm } from "@/api/flowable/form";
import BpmnViewer from '@/components/Process/viewer';
import Model from './model';
import EditProcessConfig from '@/views/flowable/definition/component/EditProcessConfig';
import {getProcessConfigInfoByDeploy} from "@/api/projectProcess/processConfigInfo";

export default {
  name: "Definition",
  dicts: ['sys_process_category'],
  components: {
    BpmnViewer,
    Model
    Model,
    EditProcessConfig
  },
  data() {
    return {
      configForm: {
        deployId: '',
        deployVersion: null,
        projectType: '', // 项目类型
        fundType: '',  // 资金类型
        investType: '',  // 投资类别
        importanceType: '',  // 重点分类
      },
      processConfigShow: false,  // 修改流程信息show
      configDeployName: '',   // 修改配置的部署名称
      // 遮罩层
      loading: true,
      dialogVisible: false,
@@ -341,6 +360,26 @@
    }
  },
  methods: {
    closeConfig() {
      this.processConfigShow = false
    },
    handleConfig(row) {
      const infoArr = row.id.split(":");

      const params = {
        deployId: infoArr[2],
        deployVersion: infoArr[1]
      }
      getProcessConfigInfoByDeploy(params).then(res => {
        if (res.data) {
          this.configForm = res.data
        }
      })
      this.configForm.deployId = infoArr[2]
      this.configForm.deployVersion = infoArr[1]
      this.configDeployName = row.name
      this.processConfigShow = true
    },
    /** 查询流程定义列表 */
    getList() {
      this.loading = true;

 src/views/projectEngineering/projectLibrary/component/BasicInfo.vue

@@ -1,6 +1,6 @@
<template>
  <div class="basic-info">
    <el-form ref="demoFormRef" :disabled="disabled" :model="projectForm" :rules="rules" class="dialog_form" :inline = "true">
    <el-form ref="demoFormRef" :disabled="disabled" :model="projectForm" :rules="rules" class="dialog_form">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item class="item" label="项目名称" label-width="100px" prop="projectName">
@@ -8,7 +8,7 @@
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="item" label="项目代码" label-width="100px" prop="code">
          <el-form-item class="item" label="项目代码" label-width="100px" prop="projectCode">
            <el-input v-model.trim="projectForm.projectCode" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
@@ -25,29 +25,19 @@
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="资金类型" label-width="100px" prop="fundsType" style="width: 100%">
            <el-tree-select
              v-model="projectForm.fundType"
              :data="sys_funding_type"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              clearable
              placeholder="请选择"
              style="width: 100%"
            />
          <el-form-item label="资金类型" label-width="100px" prop="fundType" style="width: 100%">
            <el-select v-model="projectForm.fundType" clearable placeholder="请选择" style="width: 100%">
              <el-option v-for="item in dict.type.sys_funding_type" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目投资类别" label-width="100px" prop="investmentType" style="width: 100%">
            <el-tree-select
              v-model="projectForm.investType"
              :data="sys_investment_type"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              clearable
              placeholder="请选择"
              style="width: 100%"
            />
          <el-form-item label="项目投资类别" label-width="100px" prop="investType" style="width: 100%">
            <el-select v-model="projectForm.investType" clearable placeholder="请选择" style="width: 100%">
              <el-option v-for="item in dict.type.sys_investment_type" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
@@ -59,135 +49,125 @@
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="项目类型" label-width="100px" prop="projectType" style="width: 100%">
            <el-tree-select
              v-model="projectForm.projectType"
              :data="sys_project_type"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              clearable
              placeholder="请选择"
              style="width: 100%"
            />
            <el-select v-model="projectForm.projectType" clearable placeholder="请选择"  style="width: 100%" >
              <el-option v-for="item in dict.type.sys_project_type" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目状态" label-width="100px" prop="projectstatus" style="width: 100%">
            <el-tree-select
              v-model="projectForm.projectStatus"
              :data="sys_project_status"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              clearable
              placeholder="请选择"
              style="width: 100%"
            />
            <el-select v-model="projectForm.projectStatus"clearable placeholder="请选择" style="width: 100%">
              <el-option v-for="item in dict.type.sys_project_status" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目业主单位" label-width="100px" prop="company" style="width: 100%">
          <el-form-item label="项目业主单位" label-width="100px" prop="projectOwnerUnit" style="width: 100%">
            <el-input v-model.trim="projectForm.projectOwnerUnit" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="项目联系人" label-width="100px" style="width: 100%">
          <el-form-item label="项目联系人" label-width="100px"  prop="projectContactPerson" style="width: 100%">
            <el-input v-model.trim="projectForm.projectContactPerson" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系方式" label-width="100px" prop="projectPhone" style="width: 100%">
          <el-form-item label="联系方式" label-width="100px" prop="contact" style="width: 100%">
            <el-input v-model.trim="projectForm.contact" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!-- TODO：暂时不做 -->
          <el-form-item label="关联工程" label-width="100px" prop="engineering" style="width: 100%">
            <!--            <el-input v-model.trim="getEngineeringName" class="item" clearable disabled maxlength="255" placeholder="请在工程中选择项目" />-->
            <el-select v-model="projectForm.engineeringIdList" :multiple="true" collapse-tags placeholder="请选择" style="width: 100%">
              <el-option v-for="item in selectOptions" :key="item.id" :label="item.engineeringName" :value="item.id" />
              <RemoteSelect v-if="selectOptions.length" :hasMore="hasMore" :loading="loading" :page="page" @loadMore="handleLoadMore" />
<!--              <RemoteSelect v-if="selectOptions.length" :hasMore="hasMore" :loading="loading" :page="page" @loadMore="handleLoadMore" />-->
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="主管部门" label-width="100px" prop="department" style="width: 100%">
            <el-tree-select
          <el-form-item label="主管部门" label-width="100px" prop="competentDepartmentList" style="width: 100%">
            <el-select
              v-model="projectForm.competentDepartmentList"
              :data="sys_competent_department"
              :multiple="true"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              clearable
              collapse-tags
              :multiple="true"
              placeholder="请选择"
              style="width: 100%"
              @change="changeDepartment"
            />
              collapse-tags
              @change="changeDepartment">
              <el-option v-for="item in dict.type.sys_competent_department" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="行政区划" label-width="100px" style="width: 100%">
            <el-tree-select
          <el-form-item label="行政区划" label-width="100px" prop="area" style="width: 100%">
            <el-select
              v-model="projectForm.area"
              :data="sys_administrative_divisions"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              clearable
              placeholder="请选择"
              style="width: 100%"
            />
              >
              <el-option v-for="item in dict.type.sys_administrative_divisions" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="管理归口" label-width="100px" style="width: 100%">
            <el-tree-select
            <el-select
              v-model="projectForm.managementCentralizationList"
              :data="sys_centralized_management"
              :multiple="true"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              clearable
              collapse-tags
              :multiple="true"
              placeholder="请选择"
              style="width: 100%"
              collapse-tags
              @change="changePutUnder"
            />
            >
              <el-option v-for="item in dict.type.sys_centralized_management" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="项目审批类型" label-width="100px" style="width: 100%">
            <el-tree-select
            <el-select
              v-model="projectForm.projectApprovalType"
              :data="sys_approval_type"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              clearable
              placeholder="请选择"
              style="width: 100%"
            />
            >
              <el-option v-for="item in dict.type.sys_approval_type" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="按目录" label-width="100px" style="width: 100%">
            <el-input v-model="largeCategory" clearable disabled placeholder="请选择大类" style="width: 49%" />
            <el-input v-model="subclass" class="ml-[2%]" clearable disabled placeholder="请选择小类" style="width: 49%" />
            <el-input v-model="subclass" clearable disabled placeholder="请选择小类" style="width: 49%;margin-left: 2%" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="重点分类" label-width="100px" style="width: 100%">
            <el-tree-select
            <el-select
              v-model="projectForm.importanceType"
              :data="sys_key_categories"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              clearable
              placeholder="请选择"
              style="width: 100%"
            />
            >
              <el-option v-for="item in dict.type.sys_key_categories" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
@@ -228,19 +208,19 @@
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="年度投资计划" label-width="100px" prop="year" style="width: 100%">
            <el-tree-select
            <el-select
              v-model="projectForm.year"
              :data="sys_annual_plan"
              :props="{ dictLabel: 'label', dictValue: 'id' }"
              :render-after-expand="false"
              clearable
              placeholder="请选择"
              style="width: 100%"
            />
            >
              <el-option v-for="item in dict.type.sys_annual_plan" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年度投资金额" label-width="100px" prop="company" style="width: 100%; display: flex; min-width: 260px">
          <el-form-item label="年度投资金额" label-width="100px" prop="company" style="width: 100%; min-width: 260px">
            <el-input v-model.trim="projectForm.yearInvestAmount" clearable maxlength="255" placeholder="请输入" style="width: 90%" type="number" />
            <span style="margin-left: 2px">元</span>
          </el-form-item>
@@ -261,38 +241,32 @@
      <el-row :gutter="0">
        <el-col :span="18">
          <el-form-item label="审批计划书:" label-width="100px" prop="medicalAddr" style="width: 100%">
            <div class="flex">
              <upload-standard
                :file-list.sync="projectList"
                :accept="accept"
                listType="text"
                @fileListAdd="handleAdd"
                @fileListRemove="handleRemove"
              >
                <el-button :icon="Upload" type="primary">上传</el-button>
              </upload-standard>
            </div>
            <file-upload v-model="projectList"
                         :fileType="accept"
                         :isShowTip="false"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-dialog :visible.sync="dialogMap" width="900">
      <map-component
        v-if="dialogMap"
        id="dialogMapId"
        :mapList="dialogMapList"
        class="w-full h-[643px]"
        @map-click="mapClick"
        @label-click="mapCreateClick"
      />
    <el-dialog :visible.sync="dialogMap" width="900px">
      <div class="map_div">
        <Map
          id="dialogMapId"
          :mapList="dialogMapList"
          @mapClick="mapClick"
          @labelClick="mapCreateClick"
        />
      </div>
    </el-dialog>

  </div>
</template>

<script>
// import Upload from '@element-plus/icons-vue/dist/Upload.vue';
// import MapComponent from '@/components/Map/index.vue';
import Map from '@/views/components/Map/index.vue';
// import MapMouseEvent  from '@/views/components/Map/types';
// import UploadStandard from '@/components/uploadStandard.vue';
// import { usePlanLibrary } from '@/hooks/detailsInformation';
// import { getList } from '@/api/engineeringLibrary/index';
@@ -300,8 +274,10 @@
import { formatDate } from '@/utils';

export default {
  dicts: ['sys_funding_type', 'sys_investment_type', 'sys_project_type', 'sys_project_status','sys_competent_department'
  ,'sys_administrative_divisions','sys_centralized_management','sys_approval_type','sys_key_categories','sys_annual_plan'],
  components: {
    // MapComponent,
    Map,
    // UploadStandard,
    // RemoteSelect
  },
@@ -317,7 +293,7 @@
        projectName: '',
        projectCode: '',
        projectType: '',
        projectStatus: '1',
        projectStatus: 'working',
        fundType: '',
        investType: '',
        importanceType: '',
@@ -355,13 +331,17 @@
        competentDepartmentList: [],
        managementCentralizationList: []
      },
      setTime: '',
      planStartTime: '',
      planCompleteTime: '',
      winTime: '',
      projectList: [],
      dialogMap: false,
      page: 1,
      loading: false,
      hasMore: true,
      selectOptions: [],
      accept: `'pdf', 'docx', 'xlsx', 'jpg','jpeg'`,
      accept: ['pdf', 'docx', 'xlsx', 'jpg','jpeg'],
      largeCategory: '',
      subclass: '',
      mapCreateInfo: {},
@@ -372,20 +352,12 @@
    };
  },
  computed: {
    dialogMapList() {
    dialogMapList () {
      return [{
        addr: this.projectForm.address,
        name: '创建'
      }];
    },
    // // 在Vue 2中使用 computed 替代 sys_* 的响应式字典
    // sysFundingType() {
    //   return this.$dict.get('sys_funding_type');
    // },
    // sysInvestmentType() {
    //   return this.$dict.get('sys_investment_type');
    //   // 其他字典同理
    // }
  },
  created() {
    this.handleLoadMore(1);
@@ -438,14 +410,16 @@
    handleLoadMore(newPage) {
      this.loadDataList(newPage);
    },
    mapClick({ e, addr }) {
    mapClick(e) {
      console.log(e)
      this.mapCreateInfo = {
        lon: e.lnglat.lng,
        lat: e.lnglat.lat,
        addr
        lon: e.e.lnglat.lng,
        lat: e.e.lnglat.lat,
        addr: e.addr
      };
    },
    mapCreateClick() {
      console.log("创建")
      const { lon, lat, addr } = this.mapCreateInfo;
      if (lon && lat && addr) {
        this.projectForm.longitude = lon;
@@ -500,9 +474,12 @@

<style lang="scss" scoped>
.item {
  width: 130%;
  width: 100%;
}

.map_div {
  width: 100%;
  height: 643px;
}
.input-row {
  display: flex;
  width: 100%;

 src/views/projectEngineering/projectLibrary/component/DocumentsInfo.vue

New file
@@ -0,0 +1,89 @@
<template>
  <div class="policy-info">
    <el-form ref="demoFormRef" :disabled="disabled" :model="fileIdList" class="dialog_form">
      <el-row :gutter="0">
        <el-col :span="20">
          <el-form-item label="附件:" label-width="100px" prop="appendix" style="width: 100%">
            <div style="display: flex;gap: 10px">
              <file-upload v-model="documentsInfoList"
                           :fileType="accept"
                           :isShowTip="false"/>
              <div v-if="documentsInfoList.length === 0" style="color: #a9afbc">支持上传PDF格式文件</div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

export default {
  props: {
    disabled: {
      required: true,
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileIdList: [],
      documentsInfoList: [],
      accept: ['pdf', 'docx', 'xlsx', 'jpg','jpeg'],
    };
  },
  watch: {
    // 监听 documentsInfoList 的变化，并更新 fileIdList
    documentsInfoList(newVal) {
      this.fileIdList = newVal.map(item => item.fileId);
    }
  },
  methods: {
    handleRemove(file) {
      if (file) {
        this.fileIdList = this.documentsInfoList.map(item => item.fileId);
        localStorage.setItem('fileIdList', JSON.stringify(file));
      }
    },
    handleAdd(file) {
      if (file && file.length > 0) {
        localStorage.setItem('fileIdList', JSON.stringify(file));
      }
    }
  },

  mounted() {
  }
};
</script>

<style lang="scss" scoped>
.item {
  width: 100%;
}

.documents-info-items {
  display: inline-block;
  width: 100%;
  height: 130px;
  border: 1px solid #dbdeea;
  background-color: #f3f7fc;

  .upload-files-items {
    margin-top: 10px;
    margin-left: 50px;
  }
}

.input-row {
  display: flex;
  width: 100%;

  .input-item {
    width: 100%;
  }
}

</style>

 src/views/projectEngineering/projectLibrary/component/InvestInfo.vue

New file
@@ -0,0 +1,294 @@
<template>
  <div class="basic-info">
    <el-form ref="demoFormRef" :disabled="disabled" :model="investment" class="dialog_form">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="建设地点是否跨域" label-width="120px" prop="fundsType" style="width: 100%">
            <el-select
              v-model="investment.beCrossRegion"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_cross_domain" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目建设地点" label-width="120px" prop="investmentType" style="width: 100%">
            <el-select
              v-model="investment.constructionLocation"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_administrative_divisions" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建设详细地址" label-width="120px" prop="fundsType" style="width: 100%">
            <el-input v-model.trim="investment.detailedAddress" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="是否是补码项目" label-width="120px" prop="projectType" style="width: 100%">
            <el-select
              v-model="investment.beCompensationProject"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_whether_project" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="补码原因" label-width="120px" prop="projectstatus" style="width: 100%">
            <el-input v-model.trim="investment.compensationReason" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="计划开工时间" label-width="120px" prop="plannedStartDate" style="width: 100%">
            <!--            <el-date-picker v-model="plannedStartDate" placeholder="选择时间" style="width: 100%" type="date" @change="chaneStartWork" />-->
            <el-input v-model.trim="plannedStartDate" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="拟建成时间" label-width="120px" prop="expectedCompletionDate" style="width: 100%">
            <!--            <el-date-picker v-model="expectedCompletionDate" placeholder="选择时间" style="width: 100%" type="date" @change="chaneCompleted" />-->
            <el-input v-model.trim="expectedCompletionDate" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="国际行业分类" label-width="120px" prop="engineering" style="width: 100%">
            <el-select
              v-model="investment.nationalIndustryClassification"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_whether_project" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="所属行业分类" label-width="120px" prop="department" style="width: 100%">
            <el-input v-model.trim="investment.industryClassification" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目建成性质" label-width="120px" prop="design" style="width: 100%">
            <el-select
              v-model="investment.projectNature"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_industry_belong" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目属性" label-width="120px" prop="putUnder" style="width: 100%">
            <el-select
              v-model="investment.projectAttribute"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_project_attributes" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="是否使用土地" label-width="120px" prop="approvalType" style="width: 100%">
            <el-select
              v-model="investment.useEarth"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_whether_project" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item class="item" label="主要建设内容及规模" label-width="120px" prop="content">
            <el-input v-model.trim="investment.contentScale" class="item" clearable maxlength="255" placeholder="请输入" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item class="item" label="建管平台代码" label-width="120px" prop="content">
            <el-input v-model.trim="investment.code" class="item" clearable maxlength="255" placeholder="请输入" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { formatDate } from '@/utils';

export default {
  dicts: ['sys_cross_domain','sys_administrative_divisions','sys_whether_project','sys_industry_belong','sys_project_attributes'],
  name: 'InvestmentForm',
  props: {
    disabled: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      investment: {
        beCrossRegion: '',
        constructionLocation: '',
        detailedAddress: '',
        beCompensationProject: '',
        compensationReason: '',
        plannedStartDate: '',
        expectedCompletionDate: '',
        nationalIndustryClassification: '',
        industryClassification: '',
        projectNature: '',
        projectAttribute: '',
        useEarth: '',
        contentScale: '',
        code: '',
        projectId: ''
      },
      projectForm: {
        projectName: '',
        projectCode: '',
        projectType: '',
        projectStatus: '1',
        fundType: '',
        investType: '',
        importanceType: '',
        projectPhase: '储备规划阶段',
        tag: '',
        competentDepartment: '',
        projectLocation: '',
        longitude: '',
        latitude: '',
        managementCentralization: '',
        projectApplicationPhase: '',
        projectApprovalType: '',
        investmentCatalogue: '',
        approvalPlan: '',
        isSetProject: '',
        setTime: '',
        assignmentStatus: '',
        area: '',
        winTime: '',
        winUnit: '',
        winAmount: '',
        address: '',
        engineeringIdList: [],
        content: '',
        contact: '',
        projectOwnerUnit: '',
        planStartTime: '',
        planCompleteTime: '',
        projectContactPerson: '',
        fileIdList: [],
        sysOssVos: [],
        engineeringInfos: [],
        year: '',
        yearInvestAmount: '',
        competentDepartmentList: [],
        managementCentralizationList: []
      },
      plannedStartDate: '',
      expectedCompletionDate: '',
      sys_cross_domain: [],
      sys_industry_classification: [],
      sys_industry_belong: [],
      sys_project_attributes: [],
      sys_whether_project: [],
      sys_administrative_divisions: []
    };
  },
  mounted() {
    this.updateFormData();
  },
  methods: {
    chaneCompleted(val) {
      if (!val) return;
      this.investment.expectedCompletionDate = formatDate(val);
    },
    chaneStartWork(val) {
      if (!val) return;
      this.investment.plannedStartDate = formatDate(val);
    },
    updateFormData() {
      if(this.projectForm) {
        this.plannedStartDate = this.projectForm.planStartTime.slice(0, 10);
        this.expectedCompletionDate = this.projectForm.planCompleteTime.slice(0, 10);
        this.investment.constructionLocation = this.projectForm.area;
        this.investment.detailedAddress = this.projectForm.address;
      }
    }
  },
  watch: {
    projectForm: {
      deep: true,
      handler() {
        this.updateFormData();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.item {
  width: 100%;
}

.input-row {
  display: flex;
  width: 100%;

  .input-item {
    width: 100%;
  }
}

.map-btn {
  width: 32px;
  height: 32px;
  background: #c6d6ff;
  border: 1px solid #3369ff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  img {
    width: 20px;
  }
}
</style>

 src/views/projectEngineering/projectLibrary/component/PolicyInfo.vue

New file
@@ -0,0 +1,259 @@
<template>
  <div class="policy-info">
    <el-form
      ref="demoFormRef"
      :disabled="disabled"
      :model="investmentProjectPolicyComplianceDTO"
      :rules="rules"
    >
      <el-row :gutter="0">
        <el-col :span="20">
          <el-form-item label="符合行业政策:" label-width="180px" prop="industryPolicy" style="width: 100%">
            <div style="display: flex">
              <file-upload v-model="fileList"
                           :fileType="accept"
                           :isShowTip="false"/>
              <div v-if="fileList.length === 0" style="color: #a9afbc; margin-left: 10px">
                支持下载PDF格式文件
              </div>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="20">
          <el-form-item class="custom-form-item" label=" " label-position="right" label-width="180px" style="width: 100%; margin-top: -20px">
            <div class="input-row policy-items">
              <el-radio-group v-model="investmentProjectPolicyComplianceDTO.belongsToIndustryAdjustmentDirectory" class="radio-item">
                <el-radio size="large" style="margin-bottom: 25px" :label="true">属于《产业结构调整指导目录》下的项目 </el-radio>
                <el-radio size="large" :label="false">属于未列入《产业结构调整指导目录》的允许类项目</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="20">
          <el-form-item class="custom-form-item" label=" " label-width="180px" style="width: 100%; margin-top: -20px; height: 50px">
            <div class="input-row policy-items">
              <el-checkbox
                v-model="investmentProjectPolicyComplianceDTO.belongsToWesternEncouragedDirectory"
                label="属于《西部地区鼓励类产业目录》的项目"
                size="large"
                style="margin-right: 70px"
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item class="custom-form-item" label=" " label-width="180px" style="width: 100%; margin-top: -20px; height: 30px">
            <div class="input-row policy-items" style="height: 52px">
              <el-checkbox
                v-model="investmentProjectPolicyComplianceDTO.notBannedOrControlledProject"
                disabled
                label="不属于产业政策禁止投资建设或实行核准、审批管理的项目"
                size="large"
                style="margin-right: 70px"
                :value="true"
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item class="custom-form-item" label="填报信息真实" label-width="180px" style="width: 100%; margin-top: 20px">
            <div class="policy-items">
              <div style="color: #a9afbc">备案者承诺:</div>
              <el-checkbox
                v-model="investmentProjectPolicyComplianceDTO.informationIsTrue"
                disabled
                label="所提供的备案信息是真实、准确、完整和有效的,无隐瞒、虚假和重大造漏之处，对备案项目信息的真实性负责"
                size="large"
                style="margin-right: 70px"
                :value="true"
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="专项规划符合情况:" label-width="180px" prop="specialPlanningCompliance" style="width: 100%">
            <div class="input-row">
              <el-input
                v-model.trim="investmentProjectPolicyComplianceDTO.specialPlanningCompliance"
                class="input-item"
                maxlength="200"
                placeholder="请输入"
                type="textarea"
              ></el-input>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="项目能耗情况:" label-width="180px" prop="projectEnergyConsumption" style="width: 100%">
            <div class="policy-items" style="height: 320px">
              <div  style="line-height: 20px;color: #a9afbc">
                年综合能源消费量不满1000吨标准煤，且年电力消耗量不满500万千瓦时的图定资产投资项目、以及用能工艺简单、节能潜力小的行业(按照国家发改要指定并公布的具体行业目录)的因定资产投资项目应按照相关节能标准、规范建设，不再单独进行节能审查。
              </div>
              <div style="display: flex;width: 100%;">
                <el-radio-group v-model="investmentProjectPolicyComplianceDTO.energyCheck" style="display: flex;flex-direction: column;margin-top: 10px">
                  <el-radio size="large" style="margin-bottom: 20px" :label="true"> 需进行节能审查的项目，不在填报《项目能源消费情况表》 </el-radio>
                  <el-radio size="large" style="margin-bottom: 10px" :label="false"> 不单独进行节能审查的项目，需填报《项目能源消费情况表》 </el-radio>
                </el-radio-group>
              </div>
              <div style="display: flex;gap: 2px">
                <div style="width: 160px">1.项目年综合能源消费量:</div>
                <el-input
                  style="width: 300px"
                  v-model.trim="investmentProjectPolicyComplianceDTO.annualEnergyConsumption"
                  maxlength="255"
                  placeholder="请输入"
                ></el-input>
                (标准煤当量值)
              </div>
              <div style="display: flex;gap: 2px;margin-top: 10px">
                <div style="width: 160px">2.项目年电力消耗量:</div>
                <el-input
                  style="width: 300px"
                  v-model.trim="investmentProjectPolicyComplianceDTO.annualElectricityConsumption"
                  maxlength="255"
                  placeholder="请输入"
                ></el-input>
                (标准煤当量值)
              </div>
              <div style="line-height: 20px;color: #a9afbc;margin-top: 5px">不再单独进行节能审查的类型如下:</div>
              <div class="input-row">
                <el-radio-group v-model="investmentProjectPolicyComplianceDTO.noOnlyCheckType" class="radio-item">
                  <el-radio size="large" :label="1">
                    年综合能源消费量不满1000吨标准煤且年电力消费量不满500万千瓦时的固定资产投资项目
                  </el-radio>
                  <el-radio size="large" style="margin-top: 20px" :label="2">
                    用能工艺简单，节能潜力小的行业（具体行业目录由国家发展改革委制定公布并适时更新）的固定资产投资项目
                  </el-radio>
                </el-radio-group>
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="备注:" label-width="180px" prop="remark" style="width: 100%">
            <div class="input-row">
              <el-input
                v-model.trim="investmentProjectPolicyComplianceDTO.remark"
                class="item"
                clearable
                maxlength="255"
                placeholder="请输入"
                type="textarea"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'PolicyComplianceForm',
  props: {
    disabled: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      investmentProjectPolicyComplianceDTO: {
        fileIdList: [],
        belongsToIndustryAdjustmentDirectory: null,
        belongsToWesternEncouragedDirectory: false,
        notBannedOrControlledProject: true,
        informationIsTrue: true,
        specialPlanningCompliance: '',
        energyCheck: null,
        annualEnergyConsumption: '',
        annualElectricityConsumption: '',
        noOnlyCheckType: null,
        remark: ''
      },
      fileList: [],
      accept: ['pdf'],
      rules: {
        industrialPolicyProhibition: [{ required: true, message: '请选择', trigger: 'change' }],
        reportedInformation: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    };
  },
  watch: {
    fileList: {
      deep: true,
      handler(newFileList) {
        if (newFileList) {
          this.investmentProjectPolicyComplianceDTO.fileIdList = newFileList.map(item => item.fileId);
        }
      }
    }
  },
  methods: {
    handleRemove(file) {
      if (file) {
        this.investmentProjectPolicyComplianceDTO.fileIdList = this.fileList.map(item => item.fileId);
        localStorage.setItem('fileList', JSON.stringify(file));
      }
    },
    handleAdd(file) {
      if (file) {
        localStorage.setItem('fileList', JSON.stringify(file));
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/* Styles remain the same as in the original component */
.item {
  width: 100%;
}

.policy-info-items {
  width: 100%;
  height: 100px;
  border: 1px solid #dbdeea;
  background-color: #f3f7fc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.policy-items {
  width: 100%;
  height: 100px;
  padding-left: 10px;
  border: 1px solid #dbdeea;
  background-color: #fff;
}

.radio-item {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
}

.input-row {
  display: flex;
  width: 100%;

  .input-item {
    width: 100%;
  }
}

.custom-form-item {
  ::v-deep .el-form-item__label {
    line-height: 16px;
    text-align: right;
  }
}
</style>

 src/views/projectEngineering/projectLibrary/component/investmentFunds.vue

New file
@@ -0,0 +1,252 @@
<template>
  <div class="basic-info">
    <el-form ref="demoFormRef" :disabled="disabled" :model="investmentFunds" class="dialog_form">
      <!-- 保持原有模板内容不变 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="项目总投资额" label-width="130px" prop="fundsType" style="width: 100%">
            <el-input v-model.trim="investmentFunds.totalInvestment" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目本金" label-width="130px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="investmentFunds.principal" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="一、政府投资" label-width="130px" prop="projectType" style="width: 100%">
            <el-input v-model.trim="investmentFunds.governmentInvestmentTotal" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="（一）中央投资" label-width="130px" prop="projectType" style="width: 100%">
            <el-input v-model.trim="investmentFunds.centralInvestmentTotal" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="1.中央预算投资" label-width="130px" prop="fundsType" style="width: 100%">
            <el-input v-model.trim="investmentFunds.centralBudgetInvestment" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="2.中央财政" label-width="130px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="investmentFunds.centralFiscalInvestment" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="items" label="3.中央专项债券筹集的专项建设资金" label-width="130px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="investmentFunds.centralSpecialBondInvestment" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="4.中央专项建设基金" label-width="130px" prop="engineering" style="width: 100%">
            <el-input v-model.trim="investmentFunds.centralSpecialFundInvestment" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="（二）省级投资" label-width="130px" prop="engineering" style="width: 100%">
            <el-input v-model.trim="investmentFunds.provincialInvestmentTotal" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="1.省预算内投资" label-width="130px" prop="fundsType" style="width: 100%">
            <el-input v-model.trim="investmentFunds.provincialBudgetInvestment" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="2.省财政性建设投资" label-width="130px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="investmentFunds.provincialFiscalInvestment" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="3.省专项建设资金" label-width="130px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="investmentFunds.provincialSpecialFundInvestment" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="（三）市(州)投资" label-width="130px" prop="engineering" style="width: 100%">
            <el-input v-model.trim="investmentFunds.cityInvestmentTotal" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="1.市(州)预算内投资" label-width="130px" prop="fundsType" style="width: 100%">
            <el-input v-model.trim="investmentFunds.cityBudgetInvestment" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="2.市(州)财政性投资" label-width="130px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="investmentFunds.cityFiscalInvestment" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="3.市(州)专项资金" label-width="130px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="investmentFunds.citySpecialFundInvestment" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="（四）县(市、区)投资" label-width="130px" prop="engineering" style="width: 100%">
            <el-input v-model.trim="investmentFunds.countyInvestmentTotal" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="1.区(县)预算内投资" label-width="130px" prop="fundsType" style="width: 100%">
            <el-input v-model.trim="investmentFunds.countyBudgetInvestment" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="items" label="2.区（县）财政性建设资金" label-width="130px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="investmentFunds.countyFiscalInvestment" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="3.区(县)专项资金" label-width="130px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="investmentFunds.countySpecialFundInvestment" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="二、国内贷款" label-width="130px" prop="engineering" style="width: 100%">
            <el-input v-model.trim="investmentFunds.domesticLoanTotal" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="银行贷款" label-width="130px" prop="engineering" style="width: 100%">
            <el-input v-model.trim="investmentFunds.bankLoan" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="三、外商投资" label-width="130px" prop="engineering" style="width: 100%">
            <el-input v-model.trim="investmentFunds.foreignInvestmentTotal" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="四、企业自筹" label-width="130px" prop="engineering" style="width: 100%">
            <el-input v-model.trim="investmentFunds.enterpriseSelfRaisedTotal" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="五、其他投资" label-width="130px" prop="engineering" style="width: 100%">
            <el-input v-model.trim="investmentFunds.otherInvestmentTotal" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'InvestmentFundsForm',
  props: {
    disabled: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      investmentFunds: {
        totalInvestment: '',
        principal: '',
        governmentInvestmentTotal: '',
        centralInvestmentTotal: '',
        centralBudgetInvestment: '',
        centralFiscalInvestment: '',
        centralSpecialBondInvestment: '',
        centralSpecialFundInvestment: '',
        provincialInvestmentTotal: '',
        provincialBudgetInvestment: '',
        provincialFiscalInvestment: '',
        provincialSpecialFundInvestment: '',
        cityInvestmentTotal: '',
        cityBudgetInvestment: '',
        cityFiscalInvestment: '',
        citySpecialFundInvestment: '',
        countyInvestmentTotal: '',
        countyBudgetInvestment: '',
        countyFiscalInvestment: '',
        countySpecialFundInvestment: '',
        domesticLoanTotal: '',
        bankLoan: '',
        foreignInvestmentTotal: '',
        enterpriseSelfRaisedTotal: '',
        otherInvestmentTotal: ''
      }
    };
  },
  methods: {

  },
  created() {

  },

}
</script>

<style lang="scss" scoped>
.item {
  width: 100%;
}

.input-row {
  display: flex;
  width: 100%;

  .input-item {
    width: 100%;
  }
}

.map-btn {
  width: 32px;
  height: 32px;
  background: #c6d6ff;
  border: 1px solid #3369ff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  img {
    width: 20px;
  }
}

.items {
  ::v-deep  .el-form-item__label {
    line-height: 16px;
    text-align: right;
  }
}
</style>

 src/views/projectEngineering/projectLibrary/component/legalPerson.vue

New file
@@ -0,0 +1,224 @@
<template>
  <div class="basic-info">
    <el-form ref="demoFormRef" :disabled="disabled" :model="legalPerson" class="dialog_form">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="项目总投额" label-width="120px" prop="investmentType" style="width: 100%">
            <el-input v-model="legalPerson.totalInvestment" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目单位" label-width="120px" prop="investmentType" style="width: 100%">
            <el-input v-model="legalPerson.projectUnit" class="item" clearable maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目单位类型" label-width="120px" prop="projectType" style="width: 100%">
            <el-select
              v-model="legalPerson.projectUnitType"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_unit_type" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="登记注册类型" label-width="120px" prop="projectType" style="width: 100%">
            <el-select
              v-model="legalPerson.registrationType"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_registration_type" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="控股情况" label-width="120px" prop="projectType" style="width: 100%">
            <el-select
              v-model="legalPerson.holdingSituation"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_holding_situation" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="证照类型" label-width="120px" prop="projectstatus" style="width: 100%">
            <el-select
              v-model="legalPerson.certificateType"
              clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in dict.type.sys_license_type" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="证件号码" label-width="120px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="legalPerson.certificateNumber" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="注册地址" label-width="120px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="legalPerson.registeredAddress" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="注册资金" label-width="120px" prop="projectType" style="width: 100%">
            <el-input v-model.trim="legalPerson.registeredCapital" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="法人代表" label-width="120px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="legalPerson.legal_representative" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="固定电话" label-width="120px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="legalPerson.fixedPhone" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="法人身份证号" label-width="120px" prop="projectType" style="width: 100%">
            <el-input v-model.trim="legalPerson.legalPersonIdcard" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="项目联系人" label-width="120px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="legalPerson.projectContactPerson" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="移动电话" label-width="120px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="legalPerson.phone" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人身份证号" label-width="120px" prop="projectType" style="width: 100%">
            <el-input v-model.trim="legalPerson.contactIdcard" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="微信号" label-width="120px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="legalPerson.wechat" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人通讯地址" label-width="120px" prop="investmentType" style="width: 100%">
            <el-input v-model.trim="legalPerson.contactAddress" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="邮政编码" label-width="120px" prop="projectType" style="width: 100%">
            <el-input v-model.trim="legalPerson.postCode" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="电子邮箱" label-width="120px" prop="investmentType" style="width: 100%">
            <el-input v-model="legalPerson.email" class="item" clearable disabled maxlength="255" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

export default {
  dicts: ['sys_unit_type','sys_registration_type','sys_holding_situation','sys_license_type'],
  name: 'LegalPersonForm',
  props: {
    disabled: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      legalPerson: {
        totalInvestment: '',
        projectUnit: '',
        projectUnitType: '',
        registrationType: '',
        holdingSituation: '',
        certificateType: '',
        certificateNumber: '',
        registeredAddress: '',
        registeredCapital: '',
        projectId: '',
        legal_representative: '',
        fixedPhone: '',
        legalPersonIdcard: '',
        projectContactPerson: '',
        phone: '',
        contactIdcard: '',
        wechat: '',
        contactAddress: '',
        postCode: '',
        email: ''
      },
    }
  },
  created() {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.item {
  width: 100%;
}

.input-row {
  display: flex;
  width: 100%;

  .input-item {
    width: 100%;
  }
}

.map-btn {
  width: 32px;
  height: 32px;
  background: #c6d6ff;
  border: 1px solid #3369ff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  img {
    width: 20px;
  }
}
</style>

 src/views/projectEngineering/projectLibrary/projectDetails.vue

@@ -1,6 +1,6 @@
<template>
  <el-card class="card-container">
    <div class="flex justify-between mb-4">
    <div class="flex-container mb-4">
      <el-tabs v-model="currentTab" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in TABS_DATA"
@@ -8,28 +8,33 @@
          :label="item.label"
          :name="item.value"
        >
          <template slot="label">
            <div class="text-sm">{{ item.label }}</div>
          <template slot-scope="item">
            <div class="tab-label">{{ item.label }}</div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <component :is="componentName" ref="childRef" :disabled="disabled" class="w-full h-[calc(100%-55px)]" />
    <div v-if="!disabled" class="mt-[3%] ml-[3%] flex">
      <el-button class="w-[72px]" type="primary" @click="submit">保存</el-button>
      <el-button class="w-[72px]" @click="reset">重置</el-button>
      <!-- <el-button v-else class="w-[72px]" @click="cancel">取消</el-button> -->
    <component
      :is="componentName"
      ref="childRef"
      :disabled="disabled"
      class="full-width custom-height"
    />
    <div v-if="!disabled" class="button-container">
      <el-button class="save-button" type="primary" @click="submit">保存</el-button>
      <el-button class="reset-button" @click="reset">重置</el-button>
      <!-- <el-button v-else class="cancel-button" @click="cancel">取消</el-button> -->
    </div>
  </el-card>
</template>

<script>
import BasicInfo from '@/views/projectEngineering/projectLibrary/component/BasicInfo';
// import InvestInfo from '@/components/InvestInfo.vue';
// import InvestmentFunds from '@/components/investmentFunds.vue';
// import LegalPerson from '@/components/legalPerson.vue';
// import PolicyInfo from '@/components/PolicyInfo.vue';
// import DocumentsInfo from '@/components/DocumentsInfo.vue';
import InvestInfo from '@/views/projectEngineering/projectLibrary/component/InvestInfo';
import InvestmentFunds from '@/views/projectEngineering/projectLibrary/component/investmentFunds';
import LegalPerson from '@/views/projectEngineering/projectLibrary/component/legalPerson';
import PolicyInfo from '@/views/projectEngineering/projectLibrary/component/PolicyInfo';
import DocumentsInfo from '@/views/projectEngineering/projectLibrary/component/DocumentsInfo';
import { addProject, getProject, updateProject, getProjectCode } from '@/api/projectInfo';

export default {
@@ -38,7 +43,7 @@
      currentTab: '项目管理基础信息',
      id: this.$route.query.id || '',
      disabled: false,
      componentName: 'BasicInfo',
      componentName: BasicInfo,
      TABS_DATA: [
        {
          label: '项目管理基础信息',
@@ -48,32 +53,30 @@
        {
          label: '投资管理基础信息',
          value: '任务下发',
          componentName: 'InvestInfo'
          componentName: InvestInfo
        },
        {
          label: ' 项目投资及资金来源',
          value: '项目投资及资金来源',
          componentName: 'InvestmentFunds'
          componentName: InvestmentFunds
        },
        {
          label: '项目(法人)单位登记信息',
          value: '项目(法人)单位登记信息',
          componentName: 'LegalPerson'
          componentName: LegalPerson
        },
        {
          label: '投资项目产业政策符合情况',
          value: '投资项目产业政策符合情况',
          componentName: 'PolicyInfo'
          componentName: PolicyInfo
        },
        {
          label: '相关文书',
          value: '相关文书',
          componentName: 'DocumentsInfo'
          componentName: DocumentsInfo
        }
      ],
      childRef: null,
      // 假设这些状态是从 Vuex 中获取的，或者你可以直接在 data 中定义它们
      // projectForm, investment, investmentFunds, legalPerson, resetPlanLibrary, investmentProjectPolicyComplianceDTO, fileIdList, documentsInfoList, projectList, fileList
    };
  },
  methods: {
@@ -165,7 +168,6 @@
        this.getProjectInfo(this.id);
      } else {
        this.getProjectCodeApi();
        // 假设 resetPlanLibrary 是一个方法，用于重置状态
        this.resetPlanLibrary();
        this.fileList = [];
        this.fileIdList = [];
@@ -184,8 +186,6 @@
        }
      });
    },
    // 假设 resetPlanLibrary 是从某个地方引入或定义的，你需要确保它在你的组件中可用
    // resetPlanLibrary() { ... }
  },
  created() {
    // 在组件创建时获取项目信息，如果 id 存在
@@ -193,8 +193,6 @@
      this.getProjectInfo(this.id);
    } else {
      this.getProjectCodeApi();
      // 初始化或重置状态
      // this.resetPlanLibrary();
    }
  },

@@ -202,5 +200,36 @@
</script>

<style scoped>
/* 你的样式 */

::v-deep .el-tabs__nav-wrap::after {
  background-color: rgba(0, 0, 0, 0) !important;
}
.flex-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.tab-label {
  font-size: 14px;
}

.full-width {
  width: 100%;
}

.custom-height {
  height: calc(100% - 55px);
}

.button-container {
  margin-top: 3%;
  margin-left: 3%;
  display: flex;
}

.save-button,
.reset-button {
  width: 72px;
}
</style>

 src/views/projectProcess/components/RunProcess.vue

@@ -4,6 +4,7 @@
      title="流程启动"
      :visible.sync="show"
      width="750px"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <div>
        <div style="display: flex; flex-direction: row; justify-content: center; align-items: center;font-size: 24px">