Browse Source

添加替换模型备注,项目管理交互完善

zhangyu 4 years ago
parent
commit
be88b45998

+ 11 - 1
src/api/imageservice.ts

@@ -26,4 +26,14 @@ export function getUploadId(params: any): any {
  */
 export function mergeMultipart(params: any): any {
     return httputils.fetchJson(`${baseUrl}/common/merge_multipart`, params, {});
-}
+}
+
+/**
+ * 图片上传地址
+ */
+export const imageUploadUrl = `${baseUrl}/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=`;
+
+/**
+ * 图片预览地址
+ */
+export const imageGetUrl = `${baseUrl}/common/image_get?systemId=dataPlatform&key=`;

+ 1 - 1
src/views/manage/build/components/AddFloorDialog/index.vue

@@ -279,7 +279,7 @@ export default class extends Vue {
     }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 #addFloorDialog {
     .floorModle {
         display: flex;

+ 1 - 1
src/views/manage/build/components/FloorTable/index.vue

@@ -10,7 +10,7 @@
         >
             <el-table-column align="center" label="楼层本地名" width="100">
                 <template slot-scope="scope">
-                    <!-- <i class="el-icon-info" style="cursor: pointer" @click="toPathControl(scope.row)"></i> -->
+                    <i class="el-icon-info" style="cursor: pointer" @click="toPathControl(scope.row)"></i>
                     <span style="margin-left: 10px">{{ scope.row.FloorName }}</span>
                 </template>
             </el-table-column>

+ 2 - 2
src/views/manage/build/components/ModelLog/index.vue

@@ -11,8 +11,9 @@
                         <el-table :data="filterlogData" stripe height="300px" style="width: 100%">
                             <el-table-column prop="Version" label="版本" width="50"></el-table-column>
                             <el-table-column prop="ModelName" label="模型文件名" width="240"></el-table-column>
-                            <el-table-column prop="AcceptTime" label="上传时间"></el-table-column>
+                            <el-table-column prop="AcceptTime" label="上传时间" width="135"></el-table-column>
                             <el-table-column prop="UserName" label="上传人"></el-table-column>
+                            <el-table-column prop="Note" :show-overflow-tooltip="true" label="备注" width="150"></el-table-column>
                             <el-table-column prop="address" label="操作">
                                 <template slot-scope="scope">
                                     <el-button
@@ -29,7 +30,6 @@
                             </el-table-column>
                         </el-table>
                     </el-tab-pane>
-                    <el-tab-pane label="工程改造" name="second"></el-tab-pane>
                 </el-tabs>
             </div>
         </el-dialog>

+ 6 - 21
src/views/manage/build/components/RepliceModel/index.vue

@@ -4,7 +4,7 @@
     <!-- 新增楼层 -->
     <div id="replaceModel">
         <el-dialog title="替换模型" :visible.sync="repliceModelVisible" width="650px" :before-close="handleClose">
-            <el-form ref="form" :model="form" label-width="170px">
+            <el-form ref="form" :model="form" label-width="80px">
                 <el-form-item label="模型文件:">
                     <el-upload
                         class="upload-demo"
@@ -25,21 +25,8 @@
                         <el-option v-for="item in revitVersionList" :key="`revit-${item.value}`" :label="item.label" :value="item.value"></el-option>
                     </el-select>
                 </el-form-item> -->
-                <el-form-item label="选择模型文件替换原因:">
-                    <ul>
-                        <li>
-                            <el-radio :disabled="isChioce" v-model="form.ReplaceReason" label="0">之前模型画错要修改</el-radio>
-                        </li>
-                        <li>
-                            <el-radio :disabled="isChioce" v-model="form.ReplaceReason" label="1">因工程改造,更新模型文件</el-radio>
-                        </li>
-                    </ul>
-                </el-form-item>
-                <el-form-item>
-                    <div class="dateTime" v-show="form.ReplaceReason === '1'">
-                        <p>工程改造竣工时间:</p>
-                        <el-date-picker v-model="form.finishTime" type="date" placeholder="选择日期"></el-date-picker>
-                    </div>
+                <el-form-item label="备注:">
+                    <el-input type="textarea" :rows="3" v-model="form.Note"> </el-input>
                 </el-form-item>
             </el-form>
             <div slot="footer" class="dialog-footer">
@@ -92,8 +79,7 @@ export default class extends Vue {
     private form: any = {
         revitVersion: "2017", //revit默认版本
         file: null, //上传文件
-        ReplaceReason: "0",
-        finishTime: "",
+        Note: "",
     };
     // revit版本选项
     private revitVersionList = [
@@ -110,8 +96,6 @@ export default class extends Vue {
             label: "2018",
         },
     ];
-    // 是否可以选择替换原因
-    private isChioce = true;
     // 上传楼层列表
     private fileList = [];
 
@@ -129,7 +113,7 @@ export default class extends Vue {
                 FloorName: this.replaceModelItem.FloorName,
                 FolderId: this.replaceModelItem.FolderId,
                 RevitVersion: this.form.revitVersion,
-                Note: this.replaceModelItem.Note,
+                Note: this.form.Note,
                 ProjectId: this.projectId,
                 ReplaceReason: 0,
                 Size: this.form.file.size,
@@ -156,6 +140,7 @@ export default class extends Vue {
      */
     private handleRemove() {
         this.form.file = null;
+        this.form.Note = "";
         this.fileList = [];
     }
 

+ 160 - 0
src/views/project/components/AddProjectDialog/index.vue

@@ -0,0 +1,160 @@
+<template>
+    <!-- 新增/修改项目文件 -->
+    <div id="addProjectDialog">
+        <el-dialog
+            :title="dialogType === 'create' ? '添加项目' : '修改项目'"
+            :visible.sync="addProjectVisible"
+            width="570px"
+            :before-close="handleClose"
+        >
+            <el-form :model="form">
+                <el-form-item label="">
+                    <el-input v-model="form.name" placeholder="请输入项目名称" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="">
+                    <el-upload class="avatar-uploader" accept="image/*" action="#" :show-file-list="false" :http-request="uploadImg">
+                        <img v-if="form.url" :src="form.url" class="avatar" />
+                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                    </el-upload>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="handleClose">取 消</el-button>
+                <el-button type="primary" @click="handleClose">确 定</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop, Emit, Watch, Ref } from "vue-property-decorator";
+import { imageUploadUrl, imageGetUrl } from "@/api/imageservice";
+
+@Component({
+    name: "AddProjectDialog",
+    components: {},
+})
+export default class extends Vue {
+    @Prop() private addProjectVisible!: boolean;
+    @Prop() private dialogType!: string;
+    @Prop() private formData!: any;
+
+    @Emit("update:addProjectVisible")
+    handleClose() {
+        return false;
+    }
+
+    private form: any = {
+        name: "",
+        url: "",
+    };
+
+    /**
+     * 自定义图片上传
+     */
+    private uploadImg(param: any) {
+        const elFile = param.file;
+        const fileReader = new FileReader();
+        fileReader.readAsDataURL(elFile); //读取图片
+
+        const ftype = elFile.type;
+        const fname = elFile.name;
+        const uid = elFile.uid;
+
+        fileReader.addEventListener("load", () => {
+            // 读取完成
+            const res = fileReader.result;
+            //将canvas的base64位图片转换成图片png的file
+            const blob = this.dataURLtoBlob(res, ftype);
+            //将其转换成file对象
+            const file = new File([blob], fname, {
+                type: ftype,
+                lastModified: Date.now(),
+            }); //blob转file
+
+            // try sending
+            const reader = new FileReader();
+            const fileType = file.name.split(".");
+            const imgType = fileType[fileType.length - 1];
+            const uploadKey = `${uid}.${imgType}`;
+            reader.onloadend = () => {
+                // 这个事件在读取结束后,无论成功或者失败都会触发
+                if (reader.error) {
+                    console.error("读取文件失败:",reader.error);
+                } else {
+                    // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
+                    const xhr = new XMLHttpRequest();
+                    xhr.open("POST", `${imageUploadUrl}${uploadKey}`);
+                    xhr.send(reader.result);
+                    xhr.onreadystatechange = () => {
+                        if (xhr.readyState == 4) {
+                            if (xhr.status == 200) {
+                                this.form.url = `${imageGetUrl}${uploadKey}`;
+                            }
+                        }
+                    };
+                }
+            };
+            reader.readAsArrayBuffer(file);
+        })
+    }
+
+    private dataURLtoBlob(dataURI: any, type: string) {
+        const binary = atob(dataURI.split(",")[1]);
+        const array = [];
+        for (let i = 0; i < binary.length; i++) {
+            array.push(binary.charCodeAt(i));
+        }
+        return new Blob([new Uint8Array(array)], { type: type });
+    }
+
+    /**
+     * 点击确定(添加/修改项目)
+     */
+    private handleClick() {
+        if (this.dialogType === "create") {
+            //创建项目
+            console.log("创建项目");
+        } else if (this.dialogType === "update" && this.form?.id) {
+            //修改项目
+            console.log("修改项目");
+        }
+    }
+
+    @Watch("addProjectVisible")
+    onVisibleChanged(val: boolean) {
+        if (val) {
+            this.form.name = this.formData.name;
+            this.form.url = this.formData.url;
+            if (this.formData?.id) this.form.id = this.formData.id;
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+    padding: 30px 120px;
+    .avatar-uploader .el-upload {
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+    }
+    .avatar-uploader .el-upload:hover {
+        border-color: #409eff;
+    }
+    .avatar-uploader-icon {
+        font-size: 28px;
+        color: #8c939d;
+        width: 120px;
+        height: 120px;
+        line-height: 120px;
+        text-align: center;
+    }
+    .avatar {
+        width: 120px;
+        height: 120px;
+        display: block;
+    }
+}
+</style>

+ 49 - 9
src/views/project/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="project-box" style="display: none;">
+    <div class="project-box">
         <el-row style="padding-bottom: 16px">
             <el-input placeholder="请输入关键字" style="width: 240px" clearable @keyup.enter.native="ChangeKeyWord(keyWord)" v-model="keyWord">
                 <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="ChangeKeyWord(keyWord)"></i>
@@ -17,22 +17,33 @@
                         </el-image>
                         <div style="padding: 16px">
                             <span class="project-name" :title="item.name">{{ item.name }}</span>
-                            <span class="iconfont icon-shanchu"></span>
-                            <span class="iconfont icon-bianji"></span>
+                            <span class="iconfont icon-shanchu" @click="deleteProject(item)"></span>
+                            <span class="iconfont icon-bianji" @click="updateProject(item)"></span>
                         </div>
                     </el-card>
                 </el-col>
             </el-row>
         </div>
+
+        <!-- 新增项目 -->
+        <add-project-dialog
+            :addProjectVisible.sync="addProjectVisible"
+            :dialogType="dialogType"
+            :formData="form"
+        ></add-project-dialog>
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { UserModule } from "../../store/modules/user";
+import AddProjectDialog from "./components/AddProjectDialog/index.vue"; //新增项目弹窗
 
 @Component({
     name: "index",
+    components: {
+        AddProjectDialog
+    }
 })
 export default class extends Vue {
     private keyWord = "";
@@ -40,34 +51,40 @@ export default class extends Vue {
         {
             id: "1",
             name: "龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达",
-            logo: "",
+            url: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
         },
         {
             id: "2",
             name: "龙岗万达",
-            logo: "",
+            url: "",
         },
         {
             id: "3",
             name: "龙岗万达",
-            logo: "",
+            url: "",
         },
         {
             id: "4",
             name: "龙岗万达",
-            logo: "",
+            url: "",
         },
         {
             id: "5",
             name: "龙岗万达",
-            logo: "",
+            url: "",
         },
         {
             id: "6",
             name: "龙岗万达",
-            logo: "",
+            url: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
         },
     ];
+    private addProjectVisible = false;
+    private dialogType = "create";
+    private form: any = {
+        name: "",
+        url: "",
+    };
 
     get projectId() {
         return UserModule.projectId;
@@ -85,8 +102,31 @@ export default class extends Vue {
      * 添加项目
      */
     private addProject() {
+        this.dialogType = "create";
+        this.form = {
+            name: "",
+            url: "",
+        }
+        this.addProjectVisible = true;
         console.log("添加项目");
     }
+
+    /**
+     * 修改项目
+     */
+    private updateProject(item: any) {
+        this.dialogType = "update";
+        this.form = item;
+        this.addProjectVisible = true;
+        console.log("修改项目");
+    }
+
+    /**
+     * 删除项目
+     */
+    private deleteProject(item: any) {
+        console.log("删除项目", item.id);
+    }
 }
 </script>