Merge branch '复用组件' into dev_taskList

# Conflicts:
#	src/element-plus.ts

src/App.vue

@@ -34,7 +34,6 @@ export default defineComponent({
 }
 html, body {
   width: 100%;
-  height: 100%;
 }
 
 #app {

src/assets/icon/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614581728244" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3866" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M595.549 512.5l344.35-344.347c23.211-23.212 23.211-60.84 0-84.053-23.212-23.208-60.841-23.208-84.05 0L511.5 428.45 171.802 88.753c-22.932-22.935-60.116-22.935-83.048 0-22.935 22.933-22.935 60.117 0 83.05L428.45 511.5 84.101 855.849c-23.211 23.21-23.211 60.84 0 84.049 23.212 23.211 60.841 23.211 84.05 0l344.35-344.35 338.822 338.823c22.933 22.935 60.116 22.935 83.048 0 22.935-22.933 22.935-60.117 0-83.048L595.549 512.5z" p-id="3867" fill="#8a8a8a"></path></svg>

src/components/List.vue

@@ -0,0 +1,187 @@
+<template>
+  <div style="width: 100%">
+    <div>
+      <el-button type="primary"  v-if="!isShowCheckbox" size="small" @click="showCheckbox">批量操作</el-button>
+      <span  v-if="isShowCheckbox">
+      <el-button type="info" size="small" @click="isShowCheckbox=false">取消操作</el-button>
+      <el-button type="danger"  size="small" @click="handleMultipleDelete">批量删除</el-button>
+      <el-select
+        @change="handleMultipleStatusChange"
+        v-model="status"
+        size='medium'
+        placeholder="批量修改状态"
+        style="margin-left: 30px">
+        <el-option
+          v-for="item in statusOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      <el-select
+        @change="handleMultipleAssignmentChange"
+        v-model="assignment"
+        size='medium'
+        placeholder="批量修改负责人"
+        style="margin-left: 30px">
+        <el-option
+          v-for="item in assignmentOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      </span>
+    </div>
+    <el-table
+      :data="listData"
+      @selection-change="handleSelectionChange"
+      style="width: 100%">
+      <el-table-column
+        v-if="isShowCheckbox"
+        type="selection"
+        width="60">
+      </el-table-column>
+      <el-table-column
+        prop="projectCode"
+        label="编号"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="title"
+        min-width="180"
+        label="标题">
+      </el-table-column>
+      <el-table-column
+        prop="assignment"
+        label="优先级"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="status"
+        label="状态"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="assignment"
+        label="计划时间"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="assignment"
+        label="创建时间"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="assignment"
+        label="经办人"
+        width="180">
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      style="display: flex;flex-direction: row;justify-content: center;margin-top: 20px"
+      background
+      @current-change="handleCurrentChange"
+      :page-size="pageSize"
+      layout="prev, pager, next"
+      :total="total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'List',
+  props: {
+    listData: Array,
+    total: Number,
+    statusOptions: {
+      type: Array,
+      default() {
+        return [
+          {
+            label: '未分配',
+            value: 1,
+          },
+          {
+            label: '未完成',
+            value: 2,
+          },
+          {
+            label: '已完成',
+            value: 3,
+          },
+          {
+            label: '已关闭',
+            value: 4,
+          }];
+      },
+    },
+    assignmentOptions: {
+      type: Array,
+      default() {
+        return [
+          {
+            label: '组员A',
+            value: 1,
+          },
+          {
+            label: '组员B',
+            value: 2,
+          },
+          {
+            label: '组员C',
+            value: 3,
+          },
+          {
+            label: '组员D',
+            value: 4,
+          }];
+      },
+    },
+  },
+  data() {
+    return {
+      isShowCheckbox: false,
+      pageSize: 10,
+      selectedId: [],
+      status: null,
+      assignment: null,
+    };
+  },
+  methods: {
+    showCheckbox() {
+      this.isShowCheckbox = true;
+    },
+    handleSelectionChange(val) {
+      console.warn(val);
+      const tempArray = [];
+      val.forEach((item) => {
+        tempArray.push(item.projectCode);
+      });
+      this.selectedId = tempArray;
+    },
+    // 分页切换事件
+    handleCurrentChange(currentPage) {
+      console.log(currentPage);
+      this.$emit('current-change', currentPage);
+    },
+    // 批量删除
+    handleMultipleDelete() {
+      console.warn('deleteMultiply');
+      this.$emit('multiple-delete', this.selectedId);
+    },
+    // 批量修改状态
+    handleMultipleStatusChange() {
+      this.$emit('multiple-status-change', this.selectedId);
+    },
+    // 批量修改分配人
+    handleMultipleAssignmentChange() {
+      this.$emit('multiple-assignment-change', this.selectedId);
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/components/ProjectCard.vue

@@ -27,9 +27,15 @@ export default defineComponent({
 <style lang="scss" scoped>
 .project-card {
   display: inline-block;
-  border: 1px solid #ccc;
+  box-shadow: 0 0 1px #BDC3C7;
+  border-radius: 5px;
+  padding: 10px;
   height: 150px;
-  width: 20%;
+  width: 320px;
   margin: 10px auto;
+  transition: all .3s ease;
+}
+.project-card:hover {
+  box-shadow: 0 0 5px #BDC3C7;
 }
 </style>

src/components/RightForm.vue

@@ -0,0 +1,66 @@
+<template>
+  <transition name="translation">
+  <div class="right-bar-container" v-if="isFormShow">
+    <div class="form-util">
+      <div class="close" @click="isFormShow=false"></div>
+    </div>
+    <div>
+      <slot></slot>
+    </div>
+  </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'RightForm',
+  data() {
+    return {
+      isFormShow: false,
+    };
+  },
+  methods: {
+    showForm() {
+      this.isFormShow = true;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.right-bar-container{
+  position: fixed;
+  right: 0px;
+  top: 0px;
+  height: 100vh;
+  width: 800px;
+  box-shadow: 0 0 5px #BDC3C7;
+  background: #FFFFFF;
+}
+.translation-enter-active,.translation-leave-active {
+  transition: all 0.3s ease-out;
+}
+.translation-enter-from,
+.translation-leave-to {
+  transform: translateX(800px);
+}
+.form-util{
+  width: 80px;
+  margin-left: auto;
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.form-util .close{
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-image: url("../assets/icon/close.svg");
+}
+
+</style>

src/element-plus.ts

@@ -2,7 +2,17 @@ import {
   ElCard,
   ElCarousel,
   ElCarouselItem,
-  ElContainer, ElDivider, ElHeader, ElMain, ElRow, ElButton, ElSelect, ElOption,
+  ElContainer,
+  ElDivider,
+  ElHeader,
+  ElMain,
+  ElRow,
+  ElTable,
+  ElTableColumn,
+  ElPagination,
+  ElButton,
+  ElSelect,
+  ElOption,
 } from 'element-plus';
 
 export const Components = [
@@ -14,6 +24,9 @@ export const Components = [
   ElCarouselItem,
   ElDivider,
   ElCard,
+  ElTable,
+  ElTableColumn,
+  ElPagination,
   ElButton,
   ElSelect,
   ElOption,

src/views/Home.vue

@@ -2,6 +2,7 @@
   <div class="home">
     <div class="poster">
     </div>
+    <div style="font-weight: bolder;font-size: 32px;padding: 30px">Hello,username</div>
     <div class="project-list">
       <ProjectCard
         v-for="project in projectList"

src/views/Project/BugList.vue

@@ -1,13 +1,94 @@
 <template>
-  project-bug-list
+  <div class="content">
+    <button @click="showRightForm">from test</button>
+    <div></div>
+    <List
+      :listData="bugData"
+      :total="300"
+      :is-show-checkbox="isShowCheckbox"  @current-change="handleCurrentChange"></List>
+    <RightForm ref="rightForm">
+    </RightForm>
+  </div>
 </template>
 
 <script>
-export default {
+import RightForm from '../../components/RightForm.vue';
+import List from '../../components/List.vue';
 
+export default {
+  components: { RightForm, List },
+  data() {
+    return {
+      bugData: [
+        {
+          projectCode: 'EXAMPLE-123',
+          title: 'bug1',
+          assignment: '经办人1',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-124',
+          title: 'bug2',
+          assignment: '经办人2',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-123',
+          title: 'bug1',
+          assignment: '经办人1',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-124',
+          title: 'bug2',
+          assignment: '经办人2',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-123',
+          title: 'bug1',
+          assignment: '经办人1',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-124',
+          title: 'bug2',
+          assignment: '经办人2',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-123',
+          title: 'bug1',
+          assignment: '经办人1',
+          status: '进行中',
+        },
+        {
+          projectCode: 'EXAMPLE-124',
+          title: 'bug2',
+          assignment: '经办人2',
+          status: '进行中',
+        }],
+      isShowCheckbox: true,
+    };
+  },
+  methods: {
+    /**
+     * @param filterObject 用于数据获取请求的参数对象
+     * @param currentPage  当前页数
+     */
+    getBugData(filterObject, currentPage) {
+      console.log('getBugData');
+    },
+    showRightForm() {
+      console.log(this.$refs.rightForm);
+      this.$refs.rightForm.showForm();
+    },
+    handleCurrentChange(currentPage) {
+      this.getBugData({}, currentPage);
+    },
+  },
 };
 </script>
 
-<style>
-
+<style scoped>
 </style>

src/views/ProjectContainer.vue

@@ -25,9 +25,17 @@ export default {
 .container{
   background-color: #FFFFFF;
   width: calc(100% - 42px);
-  margin-left: 42px;
   margin-top: 58px;
-  min-height: 900px;
+  margin-left: 42px;
+  min-height: 60vh;
+}
+.content{
+  width: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
 }
-
 </style>