Browse Source

项目管理接口调试

zhangyu 4 years ago
parent
commit
3180a68c5e

+ 15 - 0
src/api/datacenter.ts

@@ -4,6 +4,21 @@
 import httputils from "@/api/httputils";
 const baseApi = "/datacenter";
 
+// 创建项目
+export function projectCreate(postParams: any): any {
+    return httputils.postJson(`${ baseApi }/object/project/create`, postParams);
+}
+
+// 查询项目信息
+export function projectQuery(postParams: any): any {
+    return httputils.postJson(`${ baseApi }/object/project/query`, postParams);
+}
+
+// 更新项目信息
+export function projectUpdate(postParams: any): any {
+    return httputils.postJson(`${ baseApi }/object/project/update`, postParams);
+}
+
 // 查询建筑信息
 export function buildingQuery(postParams: any): any {
     return httputils.postJson(`${ baseApi }/object/building/query`, postParams);

+ 7 - 0
src/components/public/adm-multi-table.vue

@@ -21,6 +21,7 @@
                     :key="index"
                     :label="child.unit ? child.name + ' (' + child.unit + ')': child.name"
                     :prop="child.path"
+                    :formatter="formatContent"
                     align="center"
                 >
                 </el-table-column>
@@ -52,6 +53,12 @@ export default class extends Vue {
         return row
     }
 
+    private formatContent(row, column, cellValue, index) {
+        return cellValue
+        // console.log(this.headersStage);
+        // debugger
+    }
+
 
     created() {
     }

+ 81 - 19
src/views/project/components/AddProjectDialog/index.vue

@@ -7,45 +7,62 @@
             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 :model="form" :rules="rules" ref="ruleForm">
+                <el-form-item label="" prop="localName">
+                    <el-input v-model="form.localName" 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" />
+                        <img v-if="form.picInfo.key" :src="form.picInfo.key | getImage" 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>
+                <el-button type="primary" @click="handleClick">确 定</el-button>
             </div>
         </el-dialog>
     </div>
 </template>
 <script lang="ts">
 import { Vue, Component, Prop, Emit, Watch, Ref } from "vue-property-decorator";
+import tools from "@/utils/maintain";
 import { imageUploadUrl, imageGetUrl } from "@/api/imageservice";
+import { projectCreate, projectUpdate } from "@/api/datacenter";
+import { ElForm } from "element-ui/types/form";
 
 @Component({
     name: "AddProjectDialog",
     components: {},
+    filters: {
+        getImage(key: string | undefined) {
+            if (key) {
+                return `${imageGetUrl}${key}`;
+            } else {
+                return "";
+            }
+        },
+    },
 })
 export default class extends Vue {
     @Prop() private addProjectVisible!: boolean;
     @Prop() private dialogType!: string;
     @Prop() private formData!: any;
 
+    @Ref("ruleForm") readonly ruleForm!: ElForm;
+
     @Emit("update:addProjectVisible")
     handleClose() {
         return false;
     }
 
     private form: any = {
-        name: "",
-        url: "",
+        localName: "",
+        picInfo: {},
+    };
+    private rules: any = {
+        localName: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
     };
 
     /**
@@ -59,6 +76,7 @@ export default class extends Vue {
         const ftype = elFile.type;
         const fname = elFile.name;
         const uid = elFile.uid;
+        const createTime = tools.formatDate(new Date());
 
         fileReader.addEventListener("load", () => {
             // 读取完成
@@ -79,7 +97,7 @@ export default class extends Vue {
             reader.onloadend = () => {
                 // 这个事件在读取结束后,无论成功或者失败都会触发
                 if (reader.error) {
-                    console.error("读取文件失败:",reader.error);
+                    console.error("读取文件失败:", reader.error);
                 } else {
                     // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
                     const xhr = new XMLHttpRequest();
@@ -88,14 +106,20 @@ export default class extends Vue {
                     xhr.onreadystatechange = () => {
                         if (xhr.readyState == 4) {
                             if (xhr.status == 200) {
-                                this.form.url = `${imageGetUrl}${uploadKey}`;
+                                this.form.picInfo = {
+                                    name: uid,
+                                    key: uploadKey,
+                                    systemId: "dataPlatform",
+                                    type: "image",
+                                    createTime: createTime,
+                                };
                             }
                         }
                     };
                 }
             };
             reader.readAsArrayBuffer(file);
-        })
+        });
     }
 
     private dataURLtoBlob(dataURI: any, type: string) {
@@ -111,20 +135,58 @@ export default class extends Vue {
      * 点击确定(添加/修改项目)
      */
     private handleClick() {
-        if (this.dialogType === "create") {
-            //创建项目
-            console.log("创建项目");
-        } else if (this.dialogType === "update" && this.form?.id) {
-            //修改项目
-            console.log("修改项目");
-        }
+        this.ruleForm.validate(async (valid) => {
+            if (valid) {
+                if (this.dialogType === "create") {
+                    //创建项目
+                    const params: any = {
+                        id: `Pj${new Date().getTime()}`,
+                        localName: this.form.localName,
+                    };
+                    if (this.form.picInfo?.key) {
+                        params.infos = {
+                            projPic: [this.form.picInfo],
+                        };
+                    }
+                    const res = await projectCreate({content:[params]});
+                    if (res.result === "success") {
+                        this.handleClose();
+                        this.$emit("update:projectList");
+                        this.$message.success("创建成功!");
+                    } else {
+                        this.$message.success(`创建失败!失败原因:${res.message}`);
+                    }
+                } else if (this.dialogType === "update" && this.formData?.id) {
+                    //修改项目
+                    const params: any = {
+                        id: this.formData.id,
+                        localName: this.form.localName,
+                    };
+                    if (this.form.picInfo?.key) {
+                        params.infos = {
+                            projPic: [this.form.picInfo],
+                        };
+                    }
+                    const res = await projectUpdate({content:[params]});
+                    if (res.result === "success") {
+                        this.$emit("update:projectList");
+                        this.handleClose();
+                        this.$message.success("修改成功!");
+                    } else {
+                        this.$message.success(`修改失败!失败原因:${res.message}`);
+                    }
+                }
+            } else {
+                return false;
+            }
+        });
     }
 
     @Watch("addProjectVisible")
     onVisibleChanged(val: boolean) {
         if (val) {
-            this.form.name = this.formData.name;
-            this.form.url = this.formData.url;
+            this.form.localName = this.formData?.localName ? this.formData.localName : "";
+            this.form.picInfo = this.formData?.infos?.projPic?.length ? this.formData.infos.projPic[0] : {};
             if (this.formData?.id) this.form.id = this.formData.id;
         }
     }

+ 36 - 48
src/views/project/index.vue

@@ -10,13 +10,13 @@
             <el-row :gutter="16">
                 <el-col :span="6" v-for="item in projectList" :key="item.id">
                     <el-card shadow="always" class="project-card" :body-style="{ padding: '0px' }">
-                        <el-image style="width: 100%; height: 187px" :src="item.url">
+                        <el-image style="width: 100%; height: 187px" :src="item | getImage">
                             <div slot="error" class="image-slot">
                                 <i class="iconfont icon-wandajituan"></i>
                             </div>
                         </el-image>
                         <div style="padding: 16px">
-                            <span class="project-name" :title="item.name">{{ item.name }}</span>
+                            <span class="project-name" :title="item.localName">{{ item.localName }}</span>
                             <span class="iconfont icon-shanchu" @click="deleteProject(item)"></span>
                             <span class="iconfont icon-bianji" @click="updateProject(item)"></span>
                         </div>
@@ -28,6 +28,7 @@
         <!-- 新增项目 -->
         <add-project-dialog
             :addProjectVisible.sync="addProjectVisible"
+            @update:projectList="ChangeKeyWord"
             :dialogType="dialogType"
             :formData="form"
         ></add-project-dialog>
@@ -37,54 +38,31 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { UserModule } from "../../store/modules/user";
+import { projectQuery } from "@/api/datacenter";
+import { imageGetUrl } from "@/api/imageservice";
 import AddProjectDialog from "./components/AddProjectDialog/index.vue"; //新增项目弹窗
 
 @Component({
     name: "index",
     components: {
-        AddProjectDialog
-    }
+        AddProjectDialog,
+    },
+    filters: {
+        getImage(item: any) {
+            if (item?.infos?.projPic?.[0]?.key) {
+                return `${imageGetUrl}${item.infos.projPic[0].key}`;
+            } else {
+                return "";
+            }
+        },
+    },
 })
 export default class extends Vue {
     private keyWord = "";
-    private projectList: any = [
-        {
-            id: "1",
-            name: "龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达龙岗万达",
-            url: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
-        },
-        {
-            id: "2",
-            name: "龙岗万达",
-            url: "",
-        },
-        {
-            id: "3",
-            name: "龙岗万达",
-            url: "",
-        },
-        {
-            id: "4",
-            name: "龙岗万达",
-            url: "",
-        },
-        {
-            id: "5",
-            name: "龙岗万达",
-            url: "",
-        },
-        {
-            id: "6",
-            name: "龙岗万达",
-            url: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
-        },
-    ];
+    private projectList: any = [];
     private addProjectVisible = false;
     private dialogType = "create";
-    private form: any = {
-        name: "",
-        url: "",
-    };
+    private form: any = {};
 
     get projectId() {
         return UserModule.projectId;
@@ -94,8 +72,18 @@ export default class extends Vue {
      * 检索项目
      * @param 检索关键字
      */
-    private ChangeKeyWord(keyWord: string) {
-        console.log(keyWord);
+    private async ChangeKeyWord(keyWord?: string) {
+        const params: any = {
+            pageNumber: 1,
+            pageSize: 2000,
+        };
+        if (keyWord) params.filters = `localName contain '${keyWord}'`;
+        const res = await projectQuery(params);
+        if (res.result === "success" && res.content.length) {
+            this.projectList = res.content;
+        } else {
+            this.projectList = [];
+        }
     }
 
     /**
@@ -103,12 +91,8 @@ export default class extends Vue {
      */
     private addProject() {
         this.dialogType = "create";
-        this.form = {
-            name: "",
-            url: "",
-        }
+        this.form = {};
         this.addProjectVisible = true;
-        console.log("添加项目");
     }
 
     /**
@@ -118,15 +102,19 @@ export default class extends Vue {
         this.dialogType = "update";
         this.form = item;
         this.addProjectVisible = true;
-        console.log("修改项目");
     }
 
     /**
      * 删除项目
      */
     private deleteProject(item: any) {
+        this.$message.info("删除接口暂不提供!");
         console.log("删除项目", item.id);
     }
+
+    created() {
+        this.ChangeKeyWord();
+    }
 }
 </script>