项目库基本样式完善

fuliqi

2024-11-22 585a468e1a128fb0906c22f0c8458fea9fa9e721

项目库基本样式完善

 src/components/VisibilityToolbar/index.vue

@@ -12,7 +12,7 @@
      </el-tooltip>
    </el-row>

    <el-drawer v-model="table" title="信息显隐筛选" size="30%" append-to-body>
    <el-drawer :visible.sync="table" title="信息显隐筛选" size="30%" append-to-body>
      <div slot="header">
        <span>信息显隐筛选</span>
      </div>

 src/enums/fileType.js

New file
@@ -0,0 +1,29 @@
// 文件类型枚举
const FileTypeEnum = {
  JPEG: 'image/jpeg',
  JPG: 'image/jpg',
  PNG: 'image/png',
  GIF: 'image/gif',
  SVG: 'image/svg+xml',
  MP4: 'video/mp4',
  AVI: 'video/x-msvideo',
  MOV: 'video/quicktime',
  MKV: 'video/x-matroska',
  WMV: 'video/x-ms-wmv',
  PDF: 'application/pdf',
  DOC: 'application/msword',
  DOCX: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  XLS: 'application/vnd.ms-excel',
  XLSX: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  PPT: 'application/vnd.ms-powerpoint',
  PPTX: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
  TXT: 'text/plain',
  CSV: 'text/csv',
  JSON: 'application/json',
  XML: 'application/xml',
  ZIP: 'application/zip',
  RAR: 'application/x-rar-compressed',
  MP3: 'audio/mpeg',
  WAV: 'audio/wav',
  OGG: 'audio/ogg'
};

 src/views/projectEngineering/component/FileDialog.vue

New file
@@ -0,0 +1,201 @@
<template>
  <div>
    <el-dialog
      :visible.sync="fileDialogVisible"
      ref="formDialogRef"
      width="35%"
      append-to-body
      close-on-click-modal
      @close="closeDialog"
    >
      <template slot="header">
        <span style="padding-bottom: 18px">
          {{ isImportOrExport ? '请按照需求导出目标内容' : '请按照模板样式上传项目文件' }}
        </span>
      </template>
      <template slot="default">
        <div v-if="!isImportOrExport" class="dialog-content">
          <el-upload
            ref="uploadRef"
            class="upload-demo"
            :action="upload.url"
            :limit="1"
            :accept="accept"
            :headers="upload.headers"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">请上传<em>Zip</em>文件，大小在<em>100M</em>以内</div>
          </el-upload>
          <span>仅允许导入zip格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="handleDownloadFile">下载模板</el-link>
        </div>
        <div v-else-if="isImportOrExport" class="dialog-content">
          <el-button class="export-button" @click="handleDownloadTargetList">导出目标列表内容</el-button>
          <el-button class="export-button">导出所有列表内容</el-button>
          <el-button class="export-button">导出目标项目详情</el-button>
          <el-button class="export-button">导出所有项目详情</el-button>
        </div>
      </template>
      <template slot="footer">
        <div v-if="!isImportOrExport" class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
        <div v-else-if="isImportOrExport"></div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// import UploadFilled from '@element/icons-vue/es/icons/UploadFilled.vue';
import { globalHeaders } from '@/utils/request';
import { FileTypeEnum } from '@/enums/fileType';

export default {
  name: 'FileDialog',
  // components: {
  //   UploadFilled
  // },
  props: {
    isImportOrExport: {
      type: Boolean,
      default: false
    },
    fileDialogVisible: {
      type: Boolean,
      default: false
    },
    currentColumns: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },
  data() {
    return {
      uploadRef: null,
      targetColumn: [],
      accept: `${FileTypeEnum.ZIP}`,
      upload: {
        open: false,
        title: '',
        isUploading: false,
        updateSupport: 0,
        headers: globalHeaders(),
        url: process.env.VITE_APP_BASE_API + '/project/import'
      }
    };
  },
  computed: {
    // In Vue 2, computed properties don't use setters and getters as objects.
    // Instead, you define them as functions for reading and use methods for writing.
    // However, in this case, we can use a watcher to update the prop.
    fileDialogVisible: {
      get() {
        return this.isFileDialogVisible;
      },
      set(value) {
        this.$emit('update:fileDialogVisible', value);
      }
    }
    // Note: In Vue 2, you cannot directly define a computed property with a setter for a prop.
    // Instead, you should use a watcher or a method to handle changes.
    // Since `fileDialogVisible` is a prop, we'll use a watcher to sync it with the internal state.
    // However, for simplicity, we'll rename `fileDialogVisible` to `isFileDialogVisible` in data and use a watcher.
  },
  watch: {
    fileDialogVisible(newVal) {
      this.isFileDialogVisible = newVal;
    },
    isFileDialogVisible(newVal) {
      this.$emit('update:fileDialogVisible', newVal);
    }
  },
  methods: {
    handleFileUploadProgress() {
      this.upload.isUploading = true;
    },
    handleFileSuccess(response, file) {
      this.upload.open = false;
      this.upload.isUploading = false;
      if (this.uploadRef) {
        this.uploadRef.handleRemove(file);
      }
      if (response.code === 200) {
        this.$emit('fileDialogCancel');
        this.$message({
          message: response.msg,
          type: 'success'
        });
      } else {
        this.$message.error(response.msg);
      }
    },
    handleDownloadFile() {
      const self = this;
      fetch(`${process.env.VITE_APP_BASE_API}/project/export/template`, {
        method: 'GET',
        headers: self.upload.headers
      })
        .then(response => response.blob())
        .then(blob => {
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.style.display = 'none';
          a.href = url;
          a.download = `项目文件模板_${new Date().getTime()}.zip`;
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
        })
        .catch(error => {
          console.error('文件下载失败:', error);
        });
    },
    submitFileForm() {
      if (this.uploadRef) {
        this.uploadRef.submit();
      }
    },
    closeDialog() {
      this.$emit('fileDialogCancel');
    },
    handleDownloadTargetList() {
      console.log('导出目标列表内容', this.currentColumns);
      this.targetColumn = this.currentColumns.filter(item => item.visible);
    }
  },
  created() {
    // Initialize the computed property as a data property in Vue 2
    this.isFileDialogVisible = this.fileDialogVisible;
  }
};
</script>

<style scoped lang="scss">
.dialog-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 300px;
  .export-button {
    margin-left: 0;
    margin-bottom: 10px;
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
.upload-demo {
  width: 100%;
}
</style>

 src/views/projectEngineering/projectLibrary/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="app-container">
    <el-form  :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
    <el-form  :model="queryParams" ref="queryParamsRef" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <div class="slot">
        <div class="left-section">
          <el-form-item label="项目名称" prop="projectName">
@@ -40,7 +40,7 @@
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
          </el-form-item>
          <el-popover :visible="popoverValue" :width="500" placement="bottom">
@@ -54,97 +54,96 @@
              </el-button>
            </template>
            <span>筛选条件</span>
            <!-- 表单内容 -->
<!--            <el-form ref="queryFormRef" :inline="true" :model="queryForm" class="demo-form-inline">-->
<!--              <el-row>-->
<!--                <el-col :span="12">-->
<!--                  <el-form-item label="项目类型">-->
<!--                    <el-select v-model="queryForm.projectType" clearable placeholder="请选择" style="width: 140px">-->
<!--                      <el-option v-for="items in sys_project_type" :key="items.value" :label="items.label" :value="items.value" />-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--                <el-col :span="12">-->
<!--                  <el-form-item label="重点分类">-->
<!--                    <el-select v-model="queryForm.importanceType" clearable placeholder="请选择" style="width: 140px">-->
<!--                      <el-option v-for="items in sys_key_categories" :key="items.value" :label="items.label" :value="items.value" />-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--              <el-row>-->
<!--                <el-col :span="12">-->
<!--                  <el-form-item label="项目标签">-->
<!--                    <el-select v-model="queryForm.tag" clearable placeholder="请选择" style="width: 140px">-->
<!--                      <el-option v-for="items in sys_project_tags" :key="items.value" :label="items.label" :value="items.value" />-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--                <el-col :span="12">-->
<!--                  <el-form-item label="项目状态">-->
<!--                    <el-select v-model="queryForm.projectStatus" :disabled="isProjectCategory" clearable placeholder="请选择" style="width: 140px">-->
<!--                      <el-option v-for="items in sys_project_status" :key="items.value" :label="items.label" :value="items.value" />-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--              <el-row>-->
<!--                <el-col :span="12">-->
<!--                  <el-form-item label="项目码">-->
<!--                    <el-select v-model="queryForm.projectColorCode" clearable placeholder="请选择" style="width: 140px">-->
<!--                      <el-option v-for="items in sys_project_code" :key="items.value" :label="items.label" :value="items.value" />-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--                <el-col :span="12">-->
<!--                  <el-form-item label="关联状态">-->
<!--                    <el-select v-model="queryForm.assignmentStatus" clearable placeholder="请选择" style="width: 140px">-->
<!--                      <el-option v-for="items in sys_association_status" :key="items.value" :label="items.label" :value="items.value" />-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--              <el-row>-->
<!--                <el-col :span="12">-->
<!--                  <el-form-item label="资金类型">-->
<!--                    <el-select v-model="queryForm.investmentType" clearable placeholder="请选择" style="width: 140px">-->
<!--                      <el-option v-for="items in sys_funding_type" :key="items.value" :label="items.label" :value="items.value" />-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--                <el-col :span="12">-->
<!--                  <el-form-item label="项目阶段">-->
<!--                    <el-select v-model="queryForm.projectPhase" clearable placeholder="请选择" style="width: 140px">-->
<!--                      <el-option v-for="items in sys_project_phases" :key="items.value" :label="items.label" :value="items.value" />-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--              <el-row>-->
<!--                <el-col :span="12">-->
<!--                  <el-form-item label="投资类别">-->
<!--                    <el-select v-model="queryForm.investType" clearable placeholder="请选择" style="width: 140px">-->
<!--                      <el-option v-for="items in sys_investment_type" :key="items.value" :label="items.label" :value="items.value" />-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--                <el-col :span="12">-->
<!--                  <el-form-item label="行政区划">-->
<!--                    <el-select v-model="queryForm.area" clearable placeholder="请选择" style="width: 140px">-->
<!--                      <el-option v-for="items in sys_administrative_divisions" :key="items.value" :label="items.label" :value="items.value" />-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--              <el-row style="text-align: center">-->
<!--                <el-col :span="24">-->
<!--                  <el-form-item>-->
<!--&lt;!&ndash;                    <el-button type="primary" @click="handleQueryFrom">确 认</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-button @click="closePopover">取 消</el-button>&ndash;&gt;-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </el-form>-->
            <el-form ref="moreQueryParamsRef"  label-width="68px" label-position="right" :model="moreQueryParams">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="项目类型">
                    <el-select v-model="moreQueryParams.projectType" clearable placeholder="请选择" class="select-option" size="small">
                      <el-option v-for="items in sys_project_type" :key="items.value" :label="items.label" :value="items.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="重点分类">
                    <el-select v-model="moreQueryParams.importanceType" clearable placeholder="请选择" class="select-option">
                      <el-option v-for="items in sys_key_categories" :key="items.value" :label="items.label" :value="items.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="项目标签">
                    <el-select v-model="moreQueryParams.tag" clearable placeholder="请选择" class="select-option">
                      <el-option v-for="items in sys_project_tags" :key="items.value" :label="items.label" :value="items.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="项目状态">
                    <el-select v-model="moreQueryParams.projectStatus" :disabled="isProjectCategory" clearable placeholder="请选择" class="select-option">
                      <el-option v-for="items in sys_project_status" :key="items.value" :label="items.label" :value="items.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="项目码">
                    <el-select v-model="moreQueryParams.projectColorCode" clearable placeholder="请选择" class="select-option">
                      <el-option v-for="items in sys_project_code" :key="items.value" :label="items.label" :value="items.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="关联状态">
                    <el-select v-model="moreQueryParams.assignmentStatus" clearable placeholder="请选择" class="select-option">
                      <el-option v-for="items in sys_association_status" :key="items.value" :label="items.label" :value="items.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="资金类型">
                    <el-select v-model="moreQueryParams.investmentType" clearable placeholder="请选择" class="select-option">
                      <el-option v-for="items in sys_funding_type" :key="items.value" :label="items.label" :value="items.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="项目阶段">
                    <el-select v-model="moreQueryParams.projectPhase" clearable placeholder="请选择" class="select-option">
                      <el-option v-for="items in sys_project_phases" :key="items.value" :label="items.label" :value="items.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="投资类别">
                    <el-select v-model="moreQueryParams.investType" clearable placeholder="请选择" class="select-option">
                      <el-option v-for="items in sys_investment_type" :key="items.value" :label="items.label" :value="items.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="行政区划">
                    <el-select v-model="moreQueryParams.area" clearable placeholder="请选择" class="select-option">
                      <el-option v-for="items in sys_administrative_divisions" :key="items.value" :label="items.label" :value="items.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="text-align: center">
                <el-col :span="24">
                  <el-form-item label-width="0">
                    <el-button type="primary" @click="handleQueryFrom">确 认</el-button>
                    <el-button @click="closePopover">取 消</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-popover>
        </div>
        <div class="right-section">
@@ -166,6 +165,7 @@
          <VisibilityToolbar
            v-model:showSearch="showSearch"
            :columns="columnList"
            @queryTable="handleQuery"
          ></VisibilityToolbar>
<!--            @update:columns="handleUpdateColumns"-->
<!--            @update:sort="handleUpdateSort"-->
@@ -174,7 +174,13 @@
      </div>
    </el-form>

    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
    <el-table
      style="margin-top: 20px"
      v-loading="loading"
      :data="infoList"
      @selection-change="handleSelectionChange"
      height="60vh"
      :show-overflow-tooltip = "true">
      <el-table-column type="selection" width="55" align="center" />
      <template v-for="item in columns">
        <el-table-column
@@ -233,6 +239,12 @@
      @pagination="getList"
    />

<!--    <FileDialog-->
<!--      v-model:fileDialogVisible="fileDialogVisible"-->
<!--      :isImportOrExport="isImportOrExport"-->
<!--      @fileDialogCancel="fileDialogCancel"-->
<!--      :currentColumns="currentColumns"-->
<!--    />-->
  </div>
</template>

@@ -244,6 +256,8 @@
  name: "projectInfo",
  data() {
    return {
      isImportOrExport: false,
      fileDialogVisible: false,
      //控制显隐的表单
      columnList: [],
      //是否需要新增按钮(储蓄项目需要)
@@ -277,36 +291,18 @@
        pageSize: 10,
        projectName: null,
        projectCode: null,
        content: null,
        projectType: null,
        projectStatus: null,
        fundType: null,
        investType: null,
        projectPhase: null,
        tag: null,
        competentDepartment: null,
        areaCode: null,
        managementCentralization: null,
        projectApprovalType: null,
        investmentCatalogue: null,
        importanceType: null,
        year: null,
        yearInvestAmount: null,
        createProjectTime: null,
        planStartTime: null,
        planCompleteTime: null,
        winUnit: null,
        winAmount: null,
        winTime: null,
        projectAddress: null,
        longitude: null,
        latitude: null,
        projectOwnerUnit: null,
        projectContactPerson: null,
        contact: null,
        gmtCreateTime: null,
        gmtUpdateTime: null,
        deleted: null
      },
      moreQueryParams: {
        projectType: '', // 项目类型
        importanceType: '', // 重点分类
        projectStatus: '', // 项目状态
        projectColorCode: '', // 项目码
        investmentType: '', // 资金类型
        projectPhase: '', // 项目阶段
        investType: '', // 投资类别
        area: '', // 行政区划
        assignmentStatus: '', //关联状态
        tag: '' //项目标签
      },
      // 表单参数
      form: {},
@@ -331,9 +327,13 @@
      this.getList();
  },
  methods: {
    handlePopover() {
      this.popoverValue.value = !this.popoverValue.value;
    },
    /** 查询项目管理基础信息列表 */
    getList() {
      this.loading = true;
      console.log("查询")
      // listInfo(this.queryParams).then(response => {
      //   this.infoList = response.rows;
      //   this.total = response.total;
@@ -448,6 +448,11 @@
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导入按钮操作 */
    handleImport() {
      this.isImportOrExport = false;
      this.fileDialogVisible = true;
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('code/info/export', {
@@ -458,6 +463,9 @@
};
</script>
<style lang="scss" scoped>
 .select-option {
  width: 140px;
}
.slot {
  display: flex;
}