自訂名單：加入新建名單編輯UI

HiTeachCC/ClientApp/src/assets/css/Board.less

@@ -350,6 +350,9 @@
     line-height: 0px;
     z-index: -1;
   }
+  .memberlist-icon{
+    stroke: #000;
+  }
 
   .section {
     display: flex;
@@ -371,6 +374,10 @@
         //background-color: darken(#fcfcfc, 10%);
         color: blue;
         border: 1px solid blue;
+        .memberlist-icon{
+          stroke: blue !important;
+        }
+       
       }
       p {
         font-weight: bold;
@@ -643,6 +650,99 @@ svg {
     }
   }
 }
+.editmemberlist-view{
+  position: absolute;
+  display: block;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  // border-radius: 5px;
+  color: black;
+  height: 100%;
+  z-index: 1016;
+  .addmember-card{
+    text-align: left !important;
+  }
+  .editmemberlist-card {
+    top: 8%;
+    min-width: 500px;
+    overflow: auto;
+    transition: 0.5s;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #ededed;
+    font-weight: bolder;
+    padding: 20px 20px 10px 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    z-index: 1002;
+    text-align: center;
+    .editmemberlist-title {
+      font-size: 20px;
+      color: #3d3d3d;
+      text-align: left;
+      margin-left:5px;
+    }
+    .add-title{
+      font-size: 16px;
+      color: #3d3d3d;
+      text-align: left;
+      margin-left:5px;
+      padding: 5px;
+      border-radius: 5px;
+    }
+    .addmember-area{
+      background-color: #fff;
+      margin:10px 5px;
+      display: flex;
+      .left-part{
+        flex: 1;
+      }
+      .right-part{
+        flex: 1;
+        width: 100%;
+      }
+      textarea{
+        border:1px solid blue;
+        padding: 5px;
+      }
+    }
+    .editmemberlist-empty{
+      background-color: #fff;
+      color: #3d3d3d;
+      border-radius: 5px;
+      padding:20px;
+      margin:10px 5px;
+      cursor: pointer;
+      .add-icon{
+        stroke: #3d3d3d;
+        font-size: 40px;
+        margin: 10px;;
+      }
+    }
+    .editmemberlistbtn-group {
+      display: flex;
+      align-items: center;
+      .editmemberlist-btn {
+        cursor: pointer;
+        flex: 1;
+        white-space: nowrap;
+        padding: 5px 10px;
+        margin: 10px 5px;
+        border-radius: 5px;
+        text-align: center;
+        background-color: #d8d8d8;
+        &:first-child {
+          color: white;
+          background-color: @btn-color;
+        }
+      }
+    }
+  }
+}
+
+
+
 .askPasteWhichPage-view {
   position: absolute;
   display: block;

HiTeachCC/ClientApp/src/assets/icons/svg/memberlist.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" ?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+
+<title/>
+
+<g id="Complete">
+
+<g id="F-File">
+
+<g id="Text">
+
+<g>
+
+<path d="M18,22H6a2,2,0,0,1-2-2V4A2,2,0,0,1,6,2h7.1a2,2,0,0,1,1.5.6l4.9,5.2A2,2,0,0,1,20,9.2V20A2,2,0,0,1,18,22Z" fill="none" id="File" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+
+<line fill="none"  stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7.9" x2="16.1" y1="17.5" y2="17.5"/>
+
+<line fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7.9" x2="16.1" y1="13.5" y2="13.5"/>
+
+<line fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="8" x2="13" y1="9.5" y2="9.5"/>
+
+</g>
+
+</g>
+
+</g>
+
+</g>
+
+</svg>

HiTeachCC/ClientApp/src/views/Board.vue

@@ -15,6 +15,36 @@
     <PDFInsert v-show="this.$store.state.showPDFInsert" :currentPDFInsertFile="currentPDFInsertFile" />
     <!--圖片工具箱選單-->
     <AddImgBox v-show="this.$store.state.showAddImgBox" ref="addImgBox" />
+   
+    <!--簡易自訂名單介面-->
+    <div class="editmemberlist-view" v-show="showEditMemberList">
+      <div class="editmemberlist-card" v-show="!showAddMemberList">
+           <p class="editmemberlist-title">{{ '自訂學生名單' }}</p>
+           
+           <div class='editmemberlist-empty' v-show="testMemberlist.length==0">
+            <div @click="openAddMemberList()"><svg-icon icon-class="new-page" class="add-icon" /><br>創建名單</div>
+           </div>
+           <div class="editmemberlistbtn-group">
+          <div class="editmemberlist-btn"  v-show="testMemberlist.length!==0">{{ '儲存' }}</div>
+          <div class="editmemberlist-btn" @click="closeEditMemberList()">{{ $t("board['取消']") }}</div>
+        </div>
+      </div>
+      <div class="editmemberlist-card addmember-card" v-show="showAddMemberList">
+           <input type='text' class="add-title" v-model="currentEditMemberListName" placeholder="新建的學生名單...">
+           
+           <div class='addmember-area' >
+            <textarea  class='left-part' v-model='addmemberlisttext' name="addmember" id="" cols="30" rows="10"></textarea>
+            <Table class='right-part' :no-data-text="`<p>NoData</p>`" :columns="columns1" :data="tempAddMemberList" :row-class-name="hintBugRow" ></Table>
+           </div>
+           <div class="editmemberlistbtn-group">
+          <div class="editmemberlist-btn"  @click="checkAddMemberList()">{{ '預覽表格' }}</div>
+           <div class="editmemberlist-btn" >{{ '儲存預覽表格' }}</div>
+          <div class="editmemberlist-btn" @click="closeEditMemberList()">{{ $t("board['取消']") }}</div>
+        </div>
+      </div>
+    </div>
+   
+   
     <!--文字輸入框介面-->
     <div class="textinput-view" v-show="this.$store.state.showtextInuptCard">
       <div class="textinput-card">
@@ -106,15 +136,16 @@
               <div class="memberlist-page" v-show='showMemberlist'>
               <!-- <div class="previusImgBtn2" ><svg-icon icon-class="previusImgBtn" class="ImgBtn-icon" /></div> -->
                 <div class="memberfreebtn" @click="setCurrentMemberList({})" :class="{ 'memberfreebtn-light':Object.keys(currentMemberList).length==0}" >自由加入</div>
-                <div class='memberlist-wrap'>
+                <div class="memberfreebtn" @click="openEditMemberListAtInit()"  >創建自訂學生名單</div>
+                <div class='memberlist-wrap' v-show="testMemberlist.length>0">
                   <div class="listitems">
                     <div class="listitem" v-for="(list,index) in testMemberlist" :key="list.listName+index" @click="setCurrentMemberList(list)" :class="{ 'listitem-light':currentMemberList.listName==list.listName}">
                       {{list.listName}}
                     </div>
                   </div>
                   <div class="listDetail" >
-                    <div class="list-stu"  v-show="Object.keys(currentMemberList).length>=0" v-for="(stu,index) in currentMemberList.list" :key="index+stu.seatId+stu.memberName"  >
-                      {{stu.seatId}} {{stu.memberName}}
+                    <div class="list-stu"  v-show="Object.keys(currentMemberList).length>=0" v-for="(stu,index) in currentMemberList.list" :key="index+stu.seatID+stu.memberName"  >
+                      {{stu.seatID}} {{stu.memberName}}
                     </div>
                     <div class="list-info" v-show="Object.keys(currentMemberList).length==0" >
                      {{'點選左側指定可加入的學生名單'}}
@@ -247,6 +278,10 @@
             <p>{{ $t("board['插入PDF']") }}</p>
             <input @click="resetpdfUploader()" ref="pdfUploader" type="file" id="addpdfFile" accept=".pdf" @change="openPDFInsert" />
           </label>
+           <div class="hicard-btn" v-show="this.isAuthAccount()!=0" @click="openEditMemberList()">
+            <svg-icon icon-class="memberlist" class="hicard-icon memberlist-icon" />
+            <p>{{ '自訂學生名單' }}</p>
+          </div> 
           <div class="closebtn" @click="closeHi"><img src="@/statics/iconsvg/interaction/Close.svg" class="q-icon" /></div>
         </div>
       </q-card>
@@ -738,90 +773,26 @@ export default {
       showClassNum:false,
       showMemberlist:true,
       currentMemberList:{},
+      showEditMemberList: false,
+      showAddMemberList: false,
       testMemberlist:[
+       
+      ],
+      currentEditMemberListName:'',
+      addmemberlisttext:'',
+      columns1: [
         {
-          listName:'自訂名單1',
-          list:[{ 
-            seatID:1,
-            memberID:1,
-            memberName:'學生1'
-            },
-            { 
-            seatID:2,
-            memberID:2,
-            memberName:'學生2'
-            },
-            { 
-            seatID:3,
-            memberID:3,
-            memberName:'學生3'
-            },
-            {
-            seatID:4,
-            memberID:4,
-            memberName:'學生4'
-            },
-            { 
-            seatID:5,
-            memberID:5,
-            memberName:'學生5'
-            },
-            { 
-            seatID:6,
-            memberID:6,
-            memberName:'學生6'
-            }
-          ]
+          title: '姓名',
+          key: 'memberName',
+          sortable: true
         },
         {
-          listName:'自訂名單2',
-          list:[{ 
-            seatID:1,
-            memberID:1,
-            memberName:'Amy'
-            },
-            { 
-            seatID:2,
-            memberID:2,
-            memberName:'Bill'
-            },
-            { 
-            seatID:3,
-            memberID:3,
-            memberName:'Coco'
-            },
-            {
-            seatID:4,
-            memberID:4,
-            memberName:'Joe'
-            }
-          ]
-        },
-        {
-          listName:'自訂名單3',
-          list:[{ 
-            seatID:1,
-            memberID:1,
-            memberName:'Amy'
-            },
-            { 
-            seatID:2,
-            memberID:2,
-            memberName:'Bill'
-            },
-            { 
-            seatID:3,
-            memberID:3,
-            memberName:'Coco'
-            },
-            {
-            seatID:4,
-            memberID:4,
-            memberName:'Joe'
-            }
-          ]
-        }
-      ]
+          title: '座號',
+          key: 'seatID',
+          sortable: true
+      },
+       ],
+      tempAddMemberList: []
     }
   },
   methods: {
@@ -6918,6 +6889,41 @@ export default {
       this.memberList=Object.keys(this.currentMemberList).length==0?[]:this.currentMemberList.list
       this.verifyMode = Object.keys(this.currentMemberList).length==0?'Dynamic':'Fixed'
       console.log(this.memberList)
+    },
+    openEditMemberListAtInit(){
+        this.showEditMemberList=true
+    },
+    openEditMemberList(){
+      console.log('開名單')
+      this.showEditMemberList=true
+      this.Hishow=false
+    },
+    openAddMemberList(){
+      this.showAddMemberList=true
+    },
+    closeEditMemberList(){
+       this.showEditMemberList=false
+       this.showAddMemberList=false
+    },
+    checkAddMemberList(){
+      this.tempAddMemberList=[]
+      let data=this.addmemberlisttext.replaceAll('\n',',').split(',').filter(item=>item!='')
+      console.log(data)
+      data.forEach((item,index)=>{
+        if(index%2&&!isNaN(parseInt(item))){
+           this.tempAddMemberList.push({
+            seatID:item,
+            memberID:this.tempAddMemberList.length,
+            memberName:data[index-1]
+          })
+        }
+      })
+    },
+    hintBugRow(row,index){
+       if(index===1){
+               return 'demo-table-info-row';
+       }
+        return '';
     }
   },
 
@@ -7589,6 +7595,9 @@ export default {
 </style>
 <style lang="less">
 @import '../assets/css/color.less';
+.ivu-table .demo-table-info-row td{
+        background-color: pink;
+    }
 .q-circular-progress__text {
   font-weight: bolder;
   color: orangered !important;