Browse Source

adm:feat> 关系上传下载魔板

onlyh 3 years ago
parent
commit
9dc397282a
2 changed files with 201 additions and 185 deletions
  1. 200 184
      src/views/maintain/relationship/relation/components/excelDialog.vue
  2. 1 1
      vue.config.js

+ 200 - 184
src/views/maintain/relationship/relation/components/excelDialog.vue

@@ -1,200 +1,216 @@
 <template>
-  <div class="export-excel">
-    <el-dialog
-      :title="values.relation_maintenance"
-      :visible.sync="dialogExport"
-    >
-      <p class="option-tip">{{ values.optionTips }}</p>
-      <el-row :span="24">
-        <el-col :span="8">
-          <p>
-            <i class="iconfont icon-doc-line" />
-            {{ values.currentNum }}{{ length }}
-          </p>
-
-          <a :href="downloadProject('excel')">
-            <!--          <a :href=`/api/datacenter/graphic/export?code=对象ID${localStorage.getItem('RelationType')?relType=${localStorage.getItem('RelationType')} : null}${ localStorage.getItem('ZoneType') ? `&zoneType=${localStorage.getItem('ZoneType')}` : null}` >-->
-            <el-button type="primary" class="mt-10">
-              {{ values.download }}
-            </el-button>
-          </a>
-        </el-col>
-        <el-col :span="10">
-          {{ values.lastTime }}
-        </el-col>
-      </el-row>
-      <el-upload
-        class="upload-demo"
-        :drag="true"
-        action="/api/datacenter/graphic/import"
-        multiple
-        :show-file-list="false"
-        name="file"
-        :headers="headers"
-        :data="dataId"
-        :on-progress="progress"
-        :on-success="success"
-        :on-error="error"
-      >
-        <i class="el-icon-upload" />
-        <div class="el-upload__text" v-html="values.uploadTxt" />
-        <div class="upload__tip danger" slot="tip">{{ values.uploadTips }}</div>
-      </el-upload>
-    </el-dialog>
-    <!--手动编辑:手动维护.process结束-->
-    <el-dialog
-      :title="values.relation_maintenance"
-      :visible.sync="dialogProcess"
-    >
-      <div class="block">
-        <el-timeline>
-          <el-timeline-item
-            v-for="(activity, index) in activities"
-            :key="index"
-            :icon="activity.icon"
-            :type="activity.type"
-            :color="activity.color"
-            :size="activity.size"
-          >
-            {{ activity.content }}
-          </el-timeline-item>
-        </el-timeline>
-      </div>
-      <!--            下载报告-->
-      <a :href="downloadProject('report')">
-        <el-button>{{ values.downloadFile }}</el-button>
-      </a>
-      <footer slot="footer" class="dialog-footer">
-        <el-button @click="errBack">{{ values.back }}</el-button>
-        <el-button type="primary" @click="finish">{{ values.done }} </el-button>
-      </footer>
-    </el-dialog>
-  </div>
+    <div class="export-excel">
+        <el-dialog
+            :title="values.relation_maintenance"
+            :visible.sync="dialogExport"
+        >
+            <p class="option-tip">{{ values.optionTips }}</p>
+            <el-row :span="24">
+                <el-col :span="8">
+                    <p>
+                        <i class="iconfont icon-doc-line"/>
+                        {{ values.currentNum }}{{ length }}
+                    </p>
+
+                    <a :href="downloadProject('excel')">
+                        <!--          <a :href=`/api/datacenter/graphic/export?code=对象ID${localStorage.getItem('RelationType')?relType=${localStorage.getItem('RelationType')} : null}${ localStorage.getItem('ZoneType') ? `&zoneType=${localStorage.getItem('ZoneType')}` : null}` >-->
+                        <el-button type="primary" class="mt-10">
+                            {{ values.download }}
+                        </el-button>
+                    </a>
+                </el-col>
+                <el-col :span="10">
+                    {{ values.lastTime }}
+                </el-col>
+            </el-row>
+            <el-upload
+                class="upload-demo"
+                :drag="true"
+                :action='url+queryHeader'
+                multiple
+                :show-file-list="false"
+                name="file"
+                :on-progress="progress"
+                :on-success="success"
+                :on-error="error"
+            >
+                <i class="el-icon-upload"/>
+                <div class="el-upload__text" v-html="values.uploadTxt"/>
+                <div class="upload__tip danger" slot="tip">{{ values.uploadTips }}</div>
+            </el-upload>
+        </el-dialog>
+        <!--手动编辑:手动维护.process结束-->
+        <el-dialog
+            :title="values.relation_maintenance"
+            :visible.sync="dialogProcess"
+        >
+            <div class="block">
+                <el-timeline>
+                    <el-timeline-item
+                        v-for="(activity, index) in activities"
+                        :key="index"
+                        :icon="activity.icon"
+                        :type="activity.type"
+                        :color="activity.color"
+                        :size="activity.size"
+                    >
+                        {{ activity.content }}
+                    </el-timeline-item>
+                </el-timeline>
+            </div>
+            <!--            下载报告-->
+            <a :href="downloadProject('report')">
+                <el-button>{{ values.downloadFile }}</el-button>
+            </a>
+            <footer slot="footer" class="dialog-footer">
+                <el-button @click="errBack">{{ values.back }}</el-button>
+                <el-button type="primary" @click="finish">{{ values.done }}</el-button>
+            </footer>
+        </el-dialog>
+    </div>
 </template>
 
 <script lang="ts">
-import { mapGetters } from "vuex";
-import { namespace } from "vuex-class";
+import {mapGetters} from "vuex";
+import {namespace} from "vuex-class";
+
 const userModule = namespace("user");
-import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
+import {Component, Prop, Vue, Watch, Emit} from "vue-property-decorator";
+import {UserModule} from "@/store/modules/user";
 // import storage from "@/framework/utils/storage";
 @Component({
-  name: "exportExcel",
-  props: ["values", "length"],
+    name: "exportExcel",
+    props: ["values", "length"],
 })
 export default class extends Vue {
-  // relationCount:localStorage.getItem('count'),
-  dialogExport: boolean = false;
-  dialogProcess: boolean = false;
-  activities: any[] = [
-    {
-      content: "数据文件处理中..",
-      size: "large",
-      type: "primary",
-      icon: "el-icon-check",
-      color: "#0bbd87",
-    },
-    {
-      content: "数据处理成功",
-      color: "#0bbd87",
-      icon: "el-icon-check",
-      size: "large",
-      type: "primary",
-    },
-  ];
-
-  // 获取vuex中的参数
-  @userModule.Getter("projectId") public projectId?: string;
-  @userModule.Getter("username") public username?: string;
-  public get headers() {
-    return {
-      ProjectId: this.projectId,
-      Comming: "adm",
-      Account: this.username,
-    };
-  }
-
-  public get dataId() {
-    return {
-      relType: localStorage.getItem("RelationType") || "",
-      zoneType: localStorage.getItem("ZoneType") || "",
-      projectId: this.projectId,
-    };
-  }
-
-  downloadProject(str: string) {
-    let relType =
-      localStorage.getItem("RelationType") != ""
-        ? `?relType=${localStorage.getItem("RelationType")}`
-        : "";
-    let zoneType =
-      localStorage.getItem("ZoneType") != ""
-        ? `&zoneType=${localStorage.getItem("ZoneType")}`
-        : "";
-    let url;
-    if (str === "excel") {
-      relType = localStorage.getItem("RelationType")
-        ? `&relType=${localStorage.getItem("RelationType")}`
-        : "";
-      url = `/api/datacenter/graphic/export?projectId=${this.projectId}&code=对象ID${relType}${zoneType}`;
-    } else {
-      url = `/api/datacenter/graphic/report-downloads${relType}${zoneType}`;
-    }
-    return url;
-  }
-  progress(event: any, file: any, fileList: any[]) {
-    // console.log(event.file, fileList)
-  }
-  success(event: any, file: any, fileList: any[]) {
-    this.dialogExport = true;
-    this.dialogProcess = true;
-  }
-  error(event: any, file: any, fileList: any[]) {
-    this.dialogExport = true;
-    this.dialogProcess = true;
-  }
-  errBack() {
-    this.dialogProcess = false;
-  }
-  finish() {
-    this.dialogProcess = false;
-    this.dialogExport = false;
-    this.$emit("upDataTable");
-  }
+    // relationCount:localStorage.getItem('count'),
+    dialogExport: boolean = false;
+    dialogProcess: boolean = false;
+    url:string = `/datacenter/rel/graphic/import?projectId=${this.projectId}`;
+    queryHeader:string= ''
+
+    activities: any[] = [
+        {
+            content: "数据文件处理中..",
+            size: "large",
+            type: "primary",
+            icon: "el-icon-check",
+            color: "#0bbd87",
+        },
+        {
+            content: "数据处理成功",
+            color: "#0bbd87",
+            icon: "el-icon-check",
+            size: "large",
+            type: "primary",
+        },
+    ];
+
+    // 获取vuex中的参数
+    // 项目id
+    private get projectId(): string {
+        return UserModule.projectId;
+    }
+
+    private get username(): string {
+        return UserModule.username
+    }
+
+    public get headers() {
+        return {
+            projectId: this.projectId,
+            comming: "adm",
+            account: this.username,
+        };
+    }
+
+    // public get dataId() {
+    //     let relType = this.$route.query.relationType ?? '',
+    //         zoneType = this.$route.query.zoneType ?? '',
+    //         graphCode = this.$route.query.graphicType ?? '',
+    //         projectId = this.projectId;
+    //     return {}
+    // }
+
+    public get getHeaders() {
+        const {relationType, zoneType, graphicType} = this.$route.query
+        let relType = relationType ? `&relType=${relationType}` : '';
+        let zoneTypes = zoneType ? `&zoneType=${zoneType}` : '';
+        let graphCode = graphicType ? `&graphCode=${graphicType}` : '';
+        this.queryHeader = `${relType}${zoneTypes}${graphCode}`
+        return {
+            relType, zoneTypes, graphCode
+        }
+    }
+
+    downloadProject(str: string) {
+      const { relType, zoneTypes, graphCode} = this.getHeaders
+        let url;
+        if (str === "excel") {
+            url = `/datacenter/rel/graphic/export?projectId=${this.projectId}&code=对象ID${relType}${zoneTypes}${graphCode}`;
+        } else {
+            url = `/datacenter/rel/graphic/report-downloads?projectId=${this.projectId}${relType}${zoneTypes}${graphCode}`;
+        }
+        return url;
+    }
+
+    progress(event: any, file: any, fileList: any[]) {
+        // console.log(event.file, fileList)
+    }
+
+    success(event: any, file: any, fileList: any[]) {
+        this.dialogExport = true;
+        this.dialogProcess = true;
+    }
+
+    error(event: any, file: any, fileList: any[]) {
+        this.dialogExport = true;
+        this.dialogProcess = true;
+    }
+
+    errBack() {
+        this.dialogProcess = false;
+    }
+
+    finish() {
+        this.dialogProcess = false;
+        this.dialogExport = false;
+        this.$emit("upDataTable");
+    }
 }
 </script>
 
 <style scoped lang="scss">
 .export-excel {
-  .mt-10 {
-    margin-top: 10px;
-  }
-
-  .danger {
-    color: #d9001b;
-  }
-
-  .font-big {
-    font-weight: 600;
-  }
-
-  .exist-title {
-    font-size: 12px;
-    color: #aaaaaa;
-  }
-
-  .option-tip {
-    font-size: 18px;
-    font-weight: 600;
-  }
-
-  .upload-demo {
-    margin: 20px 0;
-  }
-
-  ::v-deep .el-upload-dragger {
-    width: 600px;
-    margin: 0 auto;
-  }
+    .mt-10 {
+        margin-top: 10px;
+    }
+
+    .danger {
+        color: #d9001b;
+    }
+
+    .font-big {
+        font-weight: 600;
+    }
+
+    .exist-title {
+        font-size: 12px;
+        color: #aaaaaa;
+    }
+
+    .option-tip {
+        font-size: 18px;
+        font-weight: 600;
+    }
+
+    .upload-demo {
+        margin: 20px 0;
+    }
+
+    ::v-deep .el-upload-dragger {
+        width: 600px;
+        margin: 0 auto;
+    }
 }
 </style>

+ 1 - 1
vue.config.js

@@ -4,7 +4,7 @@ const devServerPort = 28888;
 const stageServerPort = 28889;
 module.exports = {
     // TODO: 更改 publicPath 打包静态文件目录的配置
-    publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
+    publicPath: process.env.NODE_ENV === "production" ? "/" : "/wanda-adm/",
     // TODO:打包名称
     outputDir: "wanda-adm",