代码上传

src/HManagement/task/index.vue

@@ -7,17 +7,40 @@
         add:'HManagement/task/modules',
         edit:'HManagement/task/modules'
       }"
-      tableName="sys_task" 
-      idName="sys_taskid" 
+      tableName="taskTable" 
+      idName="sys_taskid"
+      :autoQuery="false"
       :apiId="{query:20220901162901,del:20221211112601}"
-      :options="options"
       :detailPath="{
-        path:'/task_detail'
+        path:'/taskDetails',
+        param:{
+          type:type
+        }
       }">
-      <div slot="custom"></div>
+      <div slot="custom">
+        <div  class="mt-10">
+          <label class="search__label">任务范围:</label>
+          <el-select class="inline-16" v-model="type" size="small" placeholder="请选择" @change="selectChange" clearable>
+            <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+      </div>
       <template v-slot:tbList="scope">
         <div>
-          {{scope.data.column.data[[scope.data.column.columnname]]}}
+          <span v-if="scope.data.column.columnname === 'leader'">
+            <el-tag size="small" :type="scope.data.column.data.leader[0]?'primary':'info'" effect="dark">{{scope.data.column.data.leader[0]?scope.data.column.data.leader[0].name:'无负责人'}}</el-tag>
+          </span>
+          <div v-else-if="scope.data.column.columnname === 'status'">
+            <p v-if="scope.data.column.data.status === '进行中'" style="color:#52c41a">{{scope.data.column.data.status}}</p>
+            <p v-else-if="scope.data.column.data.status === '待执行'" style="color:#3874f6">{{scope.data.column.data.status}}</p>
+            <p v-else style="color:#333333">{{scope.data.column.data.status}}</p>
+          </div>
+          <span v-else>{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
         </div>
       </template>
       <template v-slot:tbOpreation="scope">
@@ -38,11 +61,21 @@
 export default {
   data () {
     return {
-      options:[]
-      
+      options:[{label:'我负责的',value:1},{label:'我参与的',value:2},{label:'我下属负责的',value:3},{label:'我下属参与的',value:4},{label:'我创建的',value:5}],
+      type:1
     }
   },
   methods:{
+    selectChange () {
+      this.queryData()
+    },
+    queryData () {
+      this.$refs['basicLayout'].param.content.type = this.type
+      this.$refs['basicLayout'].listData()
+    }
+  },
+  mounted () {
+    this.queryData()
   }
 }
 

src/HManagement/task/modules/add.vue

@@ -3,7 +3,7 @@
     <el-button size="small" type="primary" @click="dialogTableVisible = true">
         创建任务
     </el-button>
-    <el-dialog title="新增待办" append-to-body :visible.sync="dialogTableVisible" width="700px">
+    <el-dialog title="新增任务" append-to-body :visible.sync="dialogTableVisible" width="700px">
 			<el-alert
 				v-if="errormsg"
 				class="normal-margin"
@@ -11,7 +11,7 @@
 				type="error">
 			</el-alert>
 			<el-input class="normal-margin" v-model="form.title" placeholder="输入任务标题" type="text" show-word-limit maxlength="40" size="small"></el-input>
-			<el-input  class="normal-margin" v-model="form.remarks" placeholder="输入任务内容" type="textarea" show-word-limit maxlength="100" size="small"></el-input>
+			<el-input  class="normal-margin" v-model="form.remarks" placeholder="输入任务内容" :autosize="{minRows:6}" type="textarea" show-word-limit maxlength="100" size="small"></el-input>
 			<div class="flex-align-center flex-between normal-margin">
 				<p class="task__label"><i class="el-icon-time"></i>&emsp;开始：</p>
 				<el-date-picker
@@ -19,7 +19,7 @@
 					type="date"
 					placeholder="选择日期"
 					value-format="yyyy-MM-dd"
-					size="mini">
+					size="small">
 				</el-date-picker>
 				&emsp;- &emsp;
 				<p class="task__label">结束：</p>
@@ -28,12 +28,12 @@
 					type="date"
 					placeholder="选择日期"
 					value-format="yyyy-MM-dd"
-					size="mini">
+					size="small">
 				</el-date-picker>
 			</div>
 			<div class="normal-margin flex-align-center">
 				<p class="task__label"><i class="el-icon-bell"></i>&emsp;提醒时间&emsp;</p>
-				<el-input :disabled="!form.endtime" v-model="form.remindday" size="mini" style="width:90px"></el-input>
+				<el-input :disabled="!form.endtime" v-model="form.remindday" size="small" style="width:90px"></el-input>
 				<p>&emsp;天</p>
 			</div>
 			<div class="normal-margin">
@@ -55,18 +55,26 @@
 					</el-select>
 				</el-input>
 			</div> -->
-			<!-- <div>
+			<div>
 				<p class="mt-10 task__label">执行人员</p>
 				<div class="flex-align-center flex-between">
-					<el-input placeholder="请输入内容" v-model="input3" class="input-with-select" size="small">
-						<p slot="prepend">主 办</p>
-					</el-input>
-					&emsp;
+					<el-popover
+						placement="right"
+						trigger="manual"
+						width="400"
+						v-model="visible">
+						<member ref="member" :param="param" :radio="true" @onSelect="setLeader" @onCancel="visible1 = false"></member>
+						<el-input placeholder="请输入内容" readonly v-model="leader.name" class="input-with-select" size="small" slot="reference" @focus="showMenber">
+							<p slot="prepend">主 办</p>
+						</el-input>
+					</el-popover>
+					
+					<!-- &emsp;
 					<el-input placeholder="请输入内容" v-model="input3" class="input-with-select" size="small">
 						<p slot="prepend">协 办</p>
-					</el-input>
+					</el-input> -->
 				</div>
-			</div> -->
+			</div>
 			<div slot="footer" class="dialog-footer">
         <el-button size="small" style="width:120px" @click="dialogTableVisible = false">取 消</el-button>
         <el-button type="warning" size="small" style="width:120px" @click="validateInput">创 建</el-button>
@@ -75,14 +83,18 @@
   </div>
 </template>
 <script>
+import member from '@/template/menber/index.vue'
+
 import upload from '@/components/upload/preview_upload.vue';
 export default {
 	props:['ownertable'],
 	components:{
-		upload
+		upload,
+		member
 	},
 	data () {
 		return {
+			visible:false,
 			dialogTableVisible:false,
 			folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
 			form:{
@@ -93,10 +105,27 @@ export default {
         "remindday":0,
         "ownertable":"",
         "ownerid":0,
-        "endtime":""
+        "endtime":"",
+				"leaderuserid":""
 			},
+			// 查询可选择人员参数
+			param:{
+        id:'20221018122201',
+        content: {
+          "ownertable":'sys_task',
+          "ownerid":0,
+          "pageSize":20,
+          "where":{
+            "condition":"",
+            "withoutselect":0,
+            
+          }
+        }
+      },
+
 			errormsg:'',
-			bindData:{}
+			bindData:{},
+			leader:{}
 		}
 	},
 	methods:{
@@ -111,12 +140,18 @@ export default {
 				this.submit()
 			}
 		},
+		setLeader (val) {
+			this.leader = val[0]
+			this.form.leaderuserid = val[0].userid
+			this.visible = false
+		},
 		async submit () {
 			const res = await this.$api.requested({
         "id": 20221211112101,
         "content":this.form
       })
       this.tool.showMessage(res,()=>{
+				this.param.content.ownerid = res.data.sys_taskid
         this.bindData = {
           "ownertable": 'sys_task',
           "ownerid": res.data.sys_taskid,
@@ -140,6 +175,10 @@ export default {
         "ownerid":0,
         "endtime":""
 			}
+		},
+		showMenber () {
+			this.visible = true
+			// this.validateInput()
 		}
 	}
 }

src/HManagement/task/modules/completeTask.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <el-button v-show="data.leader && data.leader[0] && nowUserid === data.leader[0].userid" class="inline-16" type="primary" size="mini" @click="dialogFormVisible = true" >完成任务</el-button>
+    <el-dialog title="完成任务" :visible.sync="dialogFormVisible" append-to-body width="500px">
+      <el-form :model="form" label-position="top" label-width="90px">
+        <el-form-item label="完成说明">
+          <el-input v-model="form.finishnotes" type="textarea" :autosize="{minRows:5}" autocomplete="off" placeholder="输入任务完成说明"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
+        <el-button type="primary" @click="dialogFormVisible = false" size="small">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props:['data'],
+  data () {
+    return {
+      dialogFormVisible:false,
+      form:{
+        finishnotes:''
+      },
+      nowUserid: JSON.parse(sessionStorage.getItem('active_account')).userid
+    }
+  },
+  methods:{
+    async completeTask () {
+      const res = await this.$api.requested({
+        "id":20221211112501,
+        "content": {
+          "sys_taskid":this.data.sys_taskid,
+          "finishnotes": this.form.finishnotes
+        }
+      })
+      this.tool.showMessage(res,()=>{
+        this.$emit('onSuccess')
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/HManagement/task/modules/detail.vue

@@ -13,11 +13,14 @@
         :tabs="['任务信息']"
         @pageChange="pageChange"
         @onEditSuccess="queryMainData($route.query.id)">
-      <div slot="tags">
-      </div>
       <div slot="customOperation" >
+        <complete-task :data="mainData" class="inline-16" @onSuccess="queryMainData()"></complete-task>
+        <el-button class="inline-16" type="default" size="mini" @click="deleteTask">删 除</el-button>
       </div>
-      <div slot="slot0" >
+      <div slot="slot0" class="task__content">
+        <p class="mt-10">标题:{{mainData.title}}</p>
+        <p>内容:{{mainData.remarks}}</p>
+        
       </div>
       <div slot="slot1" >
       </div>
@@ -26,6 +29,7 @@
 </template>
 
 <script>
+import completeTask from './completeTask.vue'
 export default {
   name: "detail",
   data() {
@@ -35,6 +39,7 @@ export default {
     }
   },
   components:{
+    completeTask
   },
   methods:{
     async queryMainData(id) {
@@ -106,6 +111,28 @@ export default {
     onSuccess(){
       this.queryMainData(this.$route.query.id)
       this.$emit('onSuccess')
+    },
+    deleteTask () {
+      this.$confirm('是否要删除当前任务?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(async () => {
+          const res = await this.$api.requested({
+            "id":20221211112601,
+            "content": {
+              "sys_taskid":this.mainData.sys_taskid
+            }
+          })
+          this.tool.showMessage(res,()=>{
+            this.$store.dispatch('changeDetailDrawer',false)
+          })
+        }).catch((err) => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });          
+        });
     }
   },
   mounted () {
@@ -117,5 +144,7 @@ export default {
 </script>
 
 <style scoped>
-
+.task__content{
+  line-height: 30px;
+}
 </style>

src/HManagement/task/modules/edit.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <el-button size="mini" type="primary" @click="onShow(dialogTableVisible = true)">
-        编辑任务
+    <el-button v-show="nowUserid === data.createuserid" size="mini" type="primary" @click="onShow(dialogTableVisible = true)">
+        编 辑
     </el-button>
-    <el-dialog title="编辑待办" append-to-body :visible.sync="dialogTableVisible" width="700px">
+    <el-dialog title="新增任务" append-to-body :visible.sync="dialogTableVisible" width="700px">
 			<el-alert
 				v-if="errormsg"
 				class="normal-margin"
@@ -11,7 +11,7 @@
 				type="error">
 			</el-alert>
 			<el-input class="normal-margin" v-model="form.title" placeholder="输入任务标题" type="text" show-word-limit maxlength="40" size="small"></el-input>
-			<el-input  class="normal-margin" v-model="form.remarks" placeholder="输入任务内容" type="textarea" show-word-limit maxlength="100" size="small"></el-input>
+			<el-input  class="normal-margin" v-model="form.remarks" placeholder="输入任务内容" :autosize="{minRows:6}" type="textarea" show-word-limit maxlength="100" size="small"></el-input>
 			<div class="flex-align-center flex-between normal-margin">
 				<p class="task__label"><i class="el-icon-time"></i>&emsp;开始：</p>
 				<el-date-picker
@@ -19,7 +19,7 @@
 					type="date"
 					placeholder="选择日期"
 					value-format="yyyy-MM-dd"
-					size="mini">
+					size="small">
 				</el-date-picker>
 				&emsp;- &emsp;
 				<p class="task__label">结束：</p>
@@ -28,12 +28,12 @@
 					type="date"
 					placeholder="选择日期"
 					value-format="yyyy-MM-dd"
-					size="mini">
+					size="small">
 				</el-date-picker>
 			</div>
 			<div class="normal-margin flex-align-center">
 				<p class="task__label"><i class="el-icon-bell"></i>&emsp;提醒时间&emsp;</p>
-				<el-input :disabled="!form.endtime" v-model="form.remindday" size="mini" style="width:90px"></el-input>
+				<el-input :disabled="!form.endtime" v-model="form.remindday" size="small" style="width:90px"></el-input>
 				<p>&emsp;天</p>
 			</div>
 			<!-- <div class="normal-margin">
@@ -55,18 +55,26 @@
 					</el-select>
 				</el-input>
 			</div> -->
-			<!-- <div>
+			<div>
 				<p class="mt-10 task__label">执行人员</p>
 				<div class="flex-align-center flex-between">
-					<el-input placeholder="请输入内容" v-model="input3" class="input-with-select" size="small">
-						<p slot="prepend">主 办</p>
-					</el-input>
-					&emsp;
+					<el-popover
+						placement="right"
+						trigger="manual"
+						width="400"
+						v-model="visible">
+						<member ref="member" :param="param" :radio="true" @onSelect="setLeader" @onCancel="visible1 = false"></member>
+						<el-input placeholder="请输入内容" readonly v-model="leader.name" class="input-with-select" size="small" slot="reference" @focus="showMenber">
+							<p slot="prepend">主 办</p>
+						</el-input>
+					</el-popover>
+					
+					<!-- &emsp;
 					<el-input placeholder="请输入内容" v-model="input3" class="input-with-select" size="small">
 						<p slot="prepend">协 办</p>
-					</el-input>
+					</el-input> -->
 				</div>
-			</div> -->
+			</div>
 			<div slot="footer" class="dialog-footer">
         <el-button size="small" style="width:120px" @click="dialogTableVisible = false">取 消</el-button>
         <el-button type="warning" size="small" style="width:120px" @click="validateInput">保 存</el-button>
@@ -75,33 +83,56 @@
   </div>
 </template>
 <script>
+import member from '@/template/menber/index.vue'
+
 import upload from '@/components/upload/preview_upload.vue';
 export default {
 	props:['data'],
 	components:{
-		upload
+		upload,
+		member
 	},
 	data () {
 		return {
+			visible:false,
 			dialogTableVisible:false,
 			folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
+			nowUserid: JSON.parse(sessionStorage.getItem('active_account')).userid,
 			form:{
 				"sys_taskid":0,
-        "title":"任务标题",
-        "remarks":"任务说明",
+        "title":"",
+        "remarks":"",
         "starttime":"",
         "remindday":0,
         "ownertable":"",
         "ownerid":0,
-        "endtime":""
+        "endtime":"",
+				"leaderuserid":""
 			},
+			// 查询可选择人员参数
+			param:{
+        id:'20221018122201',
+        content: {
+          "ownertable":'sys_task',
+          "ownerid":0,
+          "pageSize":20,
+          "where":{
+            "condition":"",
+            "withoutselect":0,
+            
+          }
+        }
+      },
+
 			errormsg:'',
-			bindData:{}
+			bindData:{},
+			leader:{}
 		}
 	},
 	methods:{
 		onShow () {
 			this.form = Object.assign({},this.form,this.data)
+			this.leader = this.data.leader[0]?this.data.leader[0]:''
 		},
 		validateInput () {
 			if (!this.form.title) {
@@ -114,22 +145,39 @@ export default {
 				this.submit()
 			}
 		},
+		setLeader (val) {
+			this.leader = val[0]
+			this.form.leaderuserid = val[0].userid
+			this.visible = false
+		},
 		async submit () {
 			const res = await this.$api.requested({
         "id": 20221211112101,
         "content":this.form
       })
       this.tool.showMessage(res,()=>{
-        this.bindData = {
-          "ownertable": 'sys_task',
-          "ownerid": res.data.sys_taskid,
-          "usetype": 'default',
-        }
-				this.errormsg = ''
-        this.dialogTableVisible = false
-        this.$refs['upload'].toUpload()
+				this.param.content.ownerid = res.data.sys_taskid
         this.$emit('onSuccess')
+				this.dialogTableVisible = false
+				this.refresh()
+				this.errormsg = ''
       })
+		},
+		refresh () {
+			this.form = {
+				"sys_taskid":0,
+        "title":"任务标题",
+        "remarks":"任务说明",
+        "starttime":"",
+        "remindday":0,
+        "ownertable":"",
+        "ownerid":0,
+        "endtime":""
+			}
+		},
+		showMenber () {
+			this.visible = true
+			// this.validateInput()
 		}
 	}
 }

src/components/normal-basic-layout/details/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div v-if="refreshPage">
     <div style="margin:10px 10px 0 10px;border-radius:5px" class="container normal-panel sticky">
-      <div class="flex-align-center flex-between normal-margin">
+      <div class="flex-align-start flex-between normal-margin">
         <div class="flex-align-center" style="flex:1 0 auto">
-          <p style="font-size:30px;font-weight:300;margin-right:16px">{{titleText?titleText:'##'}}</p>
+          <p style="font-size:30px;font-weight:300;margin-right:16px;max-width:500px">{{titleText?titleText:'##'}}</p>
           <tagTemp v-if="activeApp.isdatatag" style="flex:1" ref="tag" :ownertable="ownertable?ownertable:idname.slice(0, this.idname.length - 2)" @onSuccess="onSuccess"></tagTemp>
         </div>
         <div class="flex-align-center">
@@ -36,7 +36,7 @@
           <slot name="custom"></slot>
         </el-col>
         <el-col v-if="collapse" style="width:400px;" :span="6">
-          <taskTemp></taskTemp>
+          <!-- <taskTemp></taskTemp> -->
           <group v-if="activeApp.isdatateam" ref="group" style="margin-bottom:10px" :ownertable="ownertable?ownertable:idname.slice(0, this.idname.length - 2)" @onSuccess="onSuccess">
             <el-button slot="collapse" type="text" icon="el-icon-s-unfold" class="inline-16" @click="onCollapse"></el-button>
           </group>

src/components/normal-basic-layout/details/modules/group/group.vue

@@ -70,12 +70,10 @@
 </template>
 
 <script>
-import accountDialog from './select_account.vue'
 import member from '@/template/menber/index.vue'
 export default {
   props:['ownertable'],
   components:{
-    accountDialog,
     member
   },
   data () {
@@ -93,8 +91,8 @@ export default {
       param:{
         id:'20221018122201',
         content: {
-          "ownertable":this.ownertable,
-          "ownerid":this.$route.query.id,
+          "ownertable":'',
+          "ownerid":0,
           "pageSize":20,
           "where":{
             "condition":"",

src/components/normal-basic-layout/details/modules/group/select_account.vue

@@ -1,125 +0,0 @@
-<template>
-  <div>
-    <el-button style="color:#999" type="text" size="mini" @click="onShow(dialogTableVisible = true)">变 更</el-button>
-    <el-dialog title="选择团队人员" append-to-body :visible.sync="dialogTableVisible" width="600px">
-      <el-form size="small" inline label-position="right" label-width="50px" :model="search">
-        <el-form-item label="搜索">
-          <el-input v-model="params.content.where.condition" prefix-icon="el-icon-search" placeholder="员工名称" @clear="listData(params.content.pageNumber = 1)" @keyup.native.enter="listData(params.content.pageNumber = 1)" clearable></el-input>
-        </el-form-item>
-      </el-form>
-     <el-table
-      ref="multipleTable"
-      :data="list"
-      size="mini"
-      tooltip-effect="dark"
-      style="width: 100%"
-      :header-cell-style="{background:'#EEEEEE',color:'#333'}"
-      border
-      stripe>
-      <el-table-column
-        prop="name"
-        label="昵称"
-        width="120">
-      </el-table-column>
-      <el-table-column
-        prop="depname"
-        label="部门">
-      </el-table-column>
-      <el-table-column
-        prop="position"
-        label="职位">
-      </el-table-column>
-       <el-table-column
-        label="操作"
-        width="90">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" @click="onSubmit(scope.row)">
-            添 加
-          </el-button>
-        </template>
-      </el-table-column>
-     </el-table>
-      <div style="margin-top:16px;text-align:right">
-        <el-pagination
-          background
-          small
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="currentPage"
-          :page-size="params.content.pageSize"
-          layout="total, prev, pager, next, jumper"
-          :total="total">
-        </el-pagination>
-      </div>
-      <div class="dialog-footer">
-        <el-button size="small" @click="dialogTableVisible = false" class="normal-btn-width">取 消</el-button>
-        <el-button size="small" type="warning" :disabled="selection.length === 0" @click="onSubmit" class="normal-btn-width">确 定</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import tablelayout from '@/components/table/index.vue'
-export default {
-  props:['ownertable'],
-  components:{
-    tablelayout
-  },
-  data () {
-    return {
-      dialogTableVisible:false,
-      params:{
-        id:'20221018122201',
-        "pageSize":20,
-        content: {
-          "ownertable":this.ownertable,
-          "ownerid":this.$route.query.id,
-          "where":{
-            "condition":"",
-            "withoutselect":1
-          }
-        },
-      },
-      search:{},
-      selection:[],
-      tablecols:[],
-      list:[],
-      total:0,
-      currentPage:0
-    }
-  },
-  methods:{
-    onShow () {
-      this.listData()
-    },
-     async listData () {
-      const res = await this.$api.requested(this.params)
-      this.list = res.data
-      this.total = res.total
-      this.currentPage = res.pageNumber
-    },
-    handleSizeChange(val) {
-      // console.log(`每页 ${val} 条`);
-      this.params.content.pageSize = val
-      this.listData()
-    },
-    handleCurrentChange(val) {
-      // console.log(`当前页: ${val}`);
-      this.params.content.pageNumber = val
-      this.listData()
-    },
-    checkboxCallBack (val) {
-      console.log(val)
-      this.selection = val
-    },
-    
-  },
-  created () {
-    //获取表结构
-  }
-}
-
-</script>
-<style>
-</style>

src/components/normal-basic-layout/details/modules/task/addTask.vue

@@ -3,7 +3,7 @@
     <el-button size="mini" type="text" @click="dialogTableVisible = true">
         创建任务
     </el-button>
-    <el-dialog title="新增待办" append-to-body :visible.sync="dialogTableVisible" width="700px">
+    <el-dialog title="新增任务" append-to-body :visible.sync="dialogTableVisible" width="700px">
 			<el-input class="normal-margin" v-model="form.title" placeholder="输入任务标题" type="text" show-word-limit maxlength="40" size="small"></el-input>
 			<el-input  class="normal-margin" v-model="form.remarks" placeholder="输入任务内容" type="textarea" show-word-limit maxlength="100" size="small"></el-input>
 			<div class="flex-align-center flex-between normal-margin">

src/components/normal-basic-layout/details/modules/task/index.vue

@@ -2,7 +2,7 @@
 <template>
     <div class="normal-panel mt-10">
       <div class="flex-align-center flex-between " style="border-bottom:1px solid #f1f2f3;padding:10px">
-        待办事项
+        任务事项
         <addTask></addTask>
       </div>
     </div>

src/style/style.css

@@ -53,6 +53,11 @@ ul{
   flex-wrap: wrap;
   align-items: stretch;
 }
+.flex-align-start{
+  display: flex;
+  flex-wrap: wrap;
+  align-items: start;
+}
 .flex-between{
   justify-content: space-between;
 }