页面样式

mixins/group.js

@@ -0,0 +1,13 @@
+import WsPage from '@/components/ws/page'
+
+export default {
+  components: {
+    WsPage,
+  },
+  data() {
+    return {
+      // 详情id
+      detailID: this.$route.params.detail,
+    }
+  }
+}

pages/group/_detail/edit.vue

@@ -1,16 +1,132 @@
 // 详情页
 <template>
-  <proginn-page>
-    <section class="pay">编辑</section>
-  </proginn-page>
+  <ws-page :menuIndex="1">
+    <section class="group-edit">
+      <h2>创建云端协作群组</h2>
+      <section class="inputs">
+        <section class="input">属性方式：
+          <el-input placeholder="请输入" v-model="attribute"></el-input>
+        </section>
+        <section class="input">管理人员：
+          <el-input placeholder="请输入项目经理ID" v-model="manager"></el-input>
+        </section>
+      </section>
+      <p class="bold">关联工作</p>
+      <el-table
+        ref="multipleTable"
+        :data="list"
+        tooltip-effect="dark"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection"></el-table-column>
+        <el-table-column prop="id" label="ID">
+          <template slot-scope="scope">{{ scope.row.id }}</template>
+        </el-table-column>
+        <el-table-column prop="nickname" label="开发者">
+          <template slot-scope="scope">{{ `${scope.row.nickname}(${scope.row.developer_uid})` }}</template>
+        </el-table-column>
+        <el-table-column prop="occupation_name" label="职业方向"></el-table-column>
+        <el-table-column prop="status_name" label="状态"></el-table-column>
+      </el-table>
+      <section class="ctrls">
+        <el-button type="primary" @click="clickSave">保存</el-button>
+        <el-button @click="clickCancel">取消</el-button>
+      </section>
+    </section>
+  </ws-page>
 </template>
 
 <script>
-export default {
+import mixinGroup from '@/mixins/group'
 
+export default {
+  mixins: [mixinGroup],
+  data() {
+    return {
+      // 当前页面
+      currentPage: 1,
+      // 列表数据
+      list: [],
+      // 群组名称
+      attribute: '',
+      // 管理人员
+      manager: '',
+    }
+  },
+  mounted() {
+    if(this.hasLogined) {
+      this.getInfo()
+    } else {
+      // 前往登录页
+      this.goLogin()
+    }
+  },
+  methods: {
+    async getInfo() {
+      // page 默认1 page_size 默认8 id 编辑时必填，创建时不传
+      let res = await this.$post(`/api/group/getInfo`, { page: this.currentPage, page_size: 8 })
+      if(res.data) {
+        let jobList = res.data.job_list
+        this.list = jobList.list
+        this.totalPage = jobList.total
+      }
+    },
+    // 选中多选元素
+    toggleSelection(rows) {
+      if(rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    // 多选控制器处理
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+  }
 }
 </script>
 
-<style>
-
+<style scoped>
+h2 {
+  margin: 5px 0 25px;
+  text-align: center;
+}
+.group-edit {
+  display: flex;
+  flex-direction: column;
+  width: 816px;
+  background: white;
+  padding: 20px;
+}
+.input, .bold {
+  font-weight: 800;
+  font-size: 14px;
+}
+.input {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+}
+.el-input {
+  display: flex;
+  align-items: center;
+  width: 304px;
+}
+.bold {
+  margin: 25px 0 10px;
+}
+.ctrls {
+  margin: 30px 0 150px;
+}
+.el-button {
+  width: 120px;
+  border: none;
+}
+.el-button:nth-child(2) {
+  background: #ececec;
+}
 </style>

pages/group/_detail/index.vue

@@ -85,12 +85,10 @@
 </template>
 
 <script>
-import WsPage from '@/components/ws/page'
+import mixinGroup from '@/mixins/group'
 
 export default {
-  components: {
-    WsPage,
-  },
+  mixins: [mixinGroup],
   data() {
     return {
       detail: null,
@@ -107,8 +105,6 @@ export default {
       pageSize: 15,
       // 获取动态的id
       jobID: 0,
-      // 详情id
-      detailID: this.$route.params.detail,
     }
   },
   computed: {