project add list 0.1

frontend/src/performance/components/HeaderMenus.vue

@@ -12,8 +12,12 @@
       <template slot="title">项目</template>
       <el-menu-item index="3-1">项目1</el-menu-item>
       <el-menu-item index="3-2">项目2</el-menu-item>
-      <el-menu-item index="3-3">显示全部</el-menu-item>
+      <el-divider/>
-      <el-menu-item index="create-project">
+      <el-menu-item index="/project">
+        <font-awesome-icon :icon="['fa', 'list-ul']"/>
+        <span style="padding-left: 5px;">显示全部</span>
+      </el-menu-item>
+      <el-menu-item index="/createProject">
         <el-button type="text">创建项目</el-button>
       </el-menu-item>
     </el-submenu>

frontend/src/performance/components/project/MsProject.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="project-container">
+    <div class="main-content">
+      <el-card>
+        <div slot="header">
+          <el-row type="flex" justify="space-between" align="middle">
+            <span class="title">项目</span>
+            <span class="search">
+                    <el-input type="text" size="small" placeholder="根据名称搜索" prefix-icon="el-icon-search"
+                              maxlength="60" v-model="condition" clearable/>
+                </span>
+          </el-row>
+        </div>
+        <el-table :data="items" style="width: 100%">
+          <el-table-column prop="name" label="名称"/>
+          <el-table-column prop="description" label="描述"/>
+          <el-table-column>
+            <template slot-scope="scope">
+              <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
+              <el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+      <ms-create-box :tips="btnTips" :exec="create"/>
+
+      <el-dialog title="创建项目" :visible.sync="createVisible">
+        <el-form :model="form" :rules="rules" ref="form" label-position="left" label-width="100px" size="small">
+          <el-form-item label="名称">
+            <el-input v-model="form.name" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="描述">
+            <el-input type="textarea" v-model="form.description"></el-input>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submit('form')" size="medium">创建</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+  import MsCreateBox from "../settings/CreateBox";
+  import {Message} from "element-ui";
+
+  export default {
+    name: "MsProject",
+    components: {MsCreateBox},
+    data() {
+      return {
+        createVisible: false,
+        loading: false,
+        btnTips: "添加项目",
+        condition: "",
+        items: [],
+        form: {},
+        rules: {
+          name: [
+            {required: true, message: '请输入项目名称', trigger: 'blur'},
+            {min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur'}
+          ]
+        },
+      }
+    },
+    mounted() {
+      // this.list();
+    },
+    destroyed() {
+      this.createVisible = false;
+    },
+    methods: {
+      create() {
+        this.createVisible = true;
+        this.form = {};
+      },
+      edit(row) {
+        this.createVisible = true;
+        this.form = row;
+      },
+      submit(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.loading = true;
+            let saveType = "add";
+            if (this.form.id) {
+              saveType = "update"
+            }
+            this.$post("/project/" + saveType, this.form, () => {
+              this.createVisible = false;
+              this.loading = false;
+              this.list();
+              Message.success('保存成功');
+            });
+          } else {
+            return false;
+          }
+        });
+      },
+      del(row) {
+        this.$confirm('这个项目确定要删除吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$get('/project/delete/' + row.id, () => {
+            Message.success('删除成功');
+            this.list();
+          });
+        }).catch(() => {
+
+        });
+      },
+      list() {
+        this.$post("/project/list/1/10", {}, (response) => {
+          this.items = response.data;
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .project-container {
+    padding: 15px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .main-content {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 1200px;
+  }
+
+  .table-page {
+    padding-top: 20px;
+    margin-right: -9px;
+    float: right;
+  }
+</style>

frontend/src/performance/components/router/router.js

@@ -9,18 +9,21 @@ import AllTestPlan from "../testPlan/AllTestPlan";
 import Organization from "../settings/Organization";
 import WorkspaceUser from "../settings/WorkSpcaeUser";
 import TestResourcePool from "../settings/TestResourcePool";
+import MsProject from "../project/MsProject";
 
 Vue.use(VueRouter);
 
 const router = new VueRouter({
   routes: [
     {
-      path: "/sidebar", components: {
+      path: "/sidebar",
+      components: {
         sidebar: RouterSidebar
       }
     },
     {
-      path: "/setting", components: {
+      path: "/setting",
+      components: {
         content: Setting
       },
       children: [
@@ -75,6 +78,12 @@ const router = new VueRouter({
         content: AllTestPlan
       }
     },
+    {
+      path: "/project",
+      components: {
+        content: MsProject
+      }
+    }
   ]
 });
 

frontend/src/performance/components/settings/Workspace.vue

@@ -70,7 +70,6 @@
       },
       edit(row) {
         this.createVisible = true;
-        window.console.log(row);
         this.loading = true;
         this.form = row;
 
@@ -95,7 +94,6 @@
         }).catch(() => {
 
         });
-        window.console.log(row);
       },
       list() {
         this.$post('/workspace/list', {}, response => {