电子签名保存图片，修复多志愿排序bug

src/components/VueEsign/index.vue

@@ -1,118 +0,0 @@
-<template>
-  <div>
-    <!-- 电子签名 -->
-    <el-card class="qianming-container" body-style="padding:0px">
-      <vue-esign ref="esign"  :isCrop="isCrop" :width="600" :height="300" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" ></vue-esign>
-      <div class="contro-container">
-        <el-button type="danger"  @click="handleReset">清空画板</el-button>
-        <el-button type="primary" @click="handleGenerate">生成图片</el-button>
-      </div>
-    </el-card>
-  </div>
-</template>
-
-<script>
-// import client  from 'common/js/ossClient.js'
-export default {
-  name:'Qianming',
-  data(){
-    return {
-      lineWidth: 6,
-      lineColor: '#000000',
-      bgColor: '',
-      resultImg: '',
-      isCrop: false
-    }
-  },
-  methods:{
-    //清空画板..
-    handleReset () {
-      this.$refs.esign.reset();
-      this.resultImg =''
-    },
-    //生成签名图片..
-    handleGenerate () {
-      this.$refs.esign.generate().then(res => {
-        let randnum = Math.random() * 10000000000000
-        randnum = Math.floor(randnum)
-        let fileName = "dianziqianming/" + randnum + '.png'
-        let file = this.dataURLtoFile(res,fileName)
-        client.put(fileName, file).then(res=>{
-          if(res.url){
-            this.resultImg = res.url
-          }else{
-            this.$message.error('文件上传失败')
-          }
-        }).catch(err=>{})
-      }).catch(err => {
-        this.$message.error('请签名之后提交！')
-      })
-    },
-    //将base64转换为文件..
-    dataURLtoFile(dataurl, filename) {
-      var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
-        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
-      while(n--){
-        u8arr[n] = bstr.charCodeAt(n);
-      }
-      return new File([u8arr], filename, {type:mime});
-    }
-  }
-}
-</script>
-
-<style scoped>
-button{
-  height:40px;
-}
-.show-img{
-  width:400px;
-  height:200px;
-  border:1px solid #123456;
-}
-.show-info{
-  width:400px;
-  height:200px;
-  font-size:24px;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-}
-.contro-container{
-  width:600px;
-  height:50px;
-  display:flex;
-  flex-direction:row;
-  align-items:center;
-  justify-content:space-around;
-  background-color:#D3D3D3;
-  position:absolute;
-  bottom:0px;
-}
-.qianming-container{
-  width:600px;
-  height:350px;
-  margin:20px auto;
-  position:relative;
-}
-.text {
-  font-size: 14px;
-}
-.item {
-  margin-bottom: 18px;
-}
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-.clearfix:after {
-  clear: both
-}
-.box-card {
-  width: 95%;
-  margin-left:2.5%;
-  margin-top:20px;
-}
-</style>
-

src/views/career/vocation/new-detail.vue

@@ -1,144 +1,150 @@
 <template>
-  <div id="jobDetail" style="padding:24px 12%" >
-    <el-card style="color: #5E5E5E;" ref="navBar">
-      <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item :to="{ path: '/career/vocation/index'}">职业库</el-breadcrumb-item>
-        <el-breadcrumb-item>职业详情</el-breadcrumb-item>
-      </el-breadcrumb>
-    </el-card>
-    <div class="mt20 header-content pd20" >
-      <p class="f28 f-333">{{vocationDetail.name ||  ''}}</p>
-    </div>
-    <div class="tabs-wrap">
-      <span class="tabs-item" @click="tabActive = 0" :class="{'bg-primary':tabActive == 0}">职业概况</span>
-      <span class="tabs-item" @click="tabActive = 1":class="{'bg-primary':tabActive == 1}">就业岗位</span>
-    </div>
-    <p class="line"></p>
-    <div
-      v-show="loading"
-      class="loading-div"
-      v-loading="loading"
-      :style="{height:windowHeight + 'px'}">
-    </div>
+  <div id="jobDetail" style="padding:24px 5%" >
+    <el-row :gutter="20">
+     <el-col :span="6">444</el-col>
+      <el-col  :span="18">
+        <el-card style="color: #5E5E5E;" ref="navBar">
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item :to="{ path: '/career/vocation/index'}">职业库</el-breadcrumb-item>
+            <el-breadcrumb-item>职业详情</el-breadcrumb-item>
+          </el-breadcrumb>
+        </el-card>
+        <div class="mt20 header-content pd20" >
+          <p class="f28 f-333">{{vocationDetail.name ||  ''}}</p>
+        </div>
+        <div class="tabs-wrap">
+          <span class="tabs-item" @click="tabActive = 0" :class="{'bg-primary':tabActive == 0}">职业概况</span>
+          <span class="tabs-item" @click="tabActive = 1":class="{'bg-primary':tabActive == 1}">就业岗位</span>
+        </div>
+        <p class="line"></p>
+        <div
+          v-show="loading"
+          class="loading-div"
+          v-loading="loading"
+          :style="{height:windowHeight + 'px'}">
+        </div>
 
-    <div class="content-wrap mt20" >
-      <!-- 职业概况  -->
-      <div v-if="Object.keys(vocationDetail).length > 0">
-        <div v-show="tabActive == 0">
-          <div class="desc-item">
-            <p class="format-tit">职业介绍</p>
-            <div class="text-666" v-html="vocationDetail.description"></div>
-          </div>
-          <div class="desc-item">
-            <p class="format-tit">就业岗位<span class="text-666 f14">({{vocationDetail.postJobs.length || 0}}个)</span></p>
-            <div class="post-item mb20" v-for="post in vocationDetail.postJobs">
-              <div class="post-title f16 mb10" style="cursor: pointer" @click="toJob(post)">{{post.name}}</div>
-              <div class="pb10 text-666 post-text">
-                <div>{{`${post.salaryMin}元-${post.salaryMax}元/月`}}</div>
-                <div>热门地区：{{post.hotCity}}</div>
+        <div class="content-wrap mt20" >
+          <!-- 职业概况  -->
+          <div v-if="Object.keys(vocationDetail).length > 0">
+            <div v-show="tabActive == 0">
+              <div class="desc-item">
+                <p class="format-tit">职业介绍</p>
+                <div class="text-666" v-html="vocationDetail.description"></div>
               </div>
-            </div>
-          </div>
-          <div class="desc-item">
-            <p class="format-tit">相关专业<span class="text-666 f14">({{vocationDetail.postMajors.length}}个)</span></p>
-            <div class="post-item mb20" v-for="post in vocationDetail.postMajors">
-              <div class="post-title f16 mb10" style="cursor: pointer">{{post.name}}</div>
-              <div class="pb10 text-666 post-text">
-                <div>国标代码：{{post.code}}</div>
-                <div>学制：{{post.learnYear}}</div>
-                <div>男女比例：{{`${post.maleRatio}/${post.femaleRatio}`}}</div>
+              <div class="desc-item">
+                <p class="format-tit">就业岗位<span class="text-666 f14">({{vocationDetail.postJobs.length || 0}}个)</span></p>
+                <div class="post-item mb20" v-for="post in vocationDetail.postJobs">
+                  <div class="post-title f16 mb10" style="cursor: pointer" @click="toJob(post)">{{post.name}}</div>
+                  <div class="pb10 text-666 post-text">
+                    <div>{{`${post.salaryMin}元-${post.salaryMax}元/月`}}</div>
+                    <div>热门地区：{{post.hotCity}}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="desc-item">
+                <p class="format-tit">相关专业<span class="text-666 f14">({{vocationDetail.postMajors.length}}个)</span></p>
+                <div class="post-item mb20" v-for="post in vocationDetail.postMajors">
+                  <div class="post-title f16 mb10" style="cursor: pointer">{{post.name}}</div>
+                  <div class="pb10 text-666 post-text">
+                    <div>国标代码：{{post.code}}</div>
+                    <div>学制：{{post.learnYear}}</div>
+                    <div>男女比例：{{`${post.maleRatio}/${post.femaleRatio}`}}</div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </div>
 
-      <!--  就业岗位-->
-      <div v-if="vocationalPosts.length > 0">
-        <div v-show="tabActive == 1">
-          <el-row :gutter="20" type="flex" class="jobTabs">
-            <el-col class="job-item-wrap" :span="4" v-for="item in vocationalPosts" :key="item.name">
-              <div class="job-item f14 f-333" :class="{'bg-primary':jobActiveName == item.name}" @click="toActiveJob(item.name)">
-                <p class="mb10">{{item.name}}</p>
-                <p>{{`${item.salaryMin}-${item.salaryMax}`}}{{item.salaryUnit}}</p>
-              </div>
-            </el-col>
-          </el-row>
-          <!--  岗位详情  -->
-          <div  v-if="Object.keys(jobDetail).length > 0">
-            <!-- 图表 -->
-            <div class="desc-item">
-              <p class="format-tit">薪资情况</p>
-              <el-row :gutter="10">
-               <el-col :span="12">
-                 <p class="text-right f-333">按趋势</p>
-                 <mx-chart :options="chartExperience" height="300px"></mx-chart>
-               </el-col>
-                <el-col :span="12">
-                  <p class="text-right f-333">按分布</p>
-                  <mx-chart :options="chartSalary" height="300px"></mx-chart>
+          <!--  就业岗位-->
+          <div v-if="vocationalPosts.length > 0">
+            <div v-show="tabActive == 1">
+              <el-row :gutter="20" type="flex" class="jobTabs">
+                <el-col class="job-item-wrap" :span="4" v-for="item in vocationalPosts" :key="item.name">
+                  <div class="job-item f14 f-333" :class="{'bg-primary':jobActiveName == item.name}" @click="toActiveJob(item.name)">
+                    <p class="mb10">{{item.name}}</p>
+                    <p>{{`${item.salaryMin}-${item.salaryMax}`}}{{item.salaryUnit}}</p>
+                  </div>
                 </el-col>
               </el-row>
-            </div>
-            <div class="desc-item">
-              <p class="format-tit">就业形势</p>
-              <el-row :gutter="10">
-                <el-col :span="12">
-                  <p class="text-right f-333">按学历</p>
-                  <mx-chart :options="chartEdu" height="300px"></mx-chart>
-                </el-col>
-                <el-col :span="12">
-                  <p class="text-right f-333">按经验</p>
-                  <mx-chart :options="chartExp" height="300px"></mx-chart>
-                </el-col>
-              </el-row>
-            </div>
-            <div class="desc-item">
-              <p class="format-tit">招聘需求量</p>
-              <el-row :gutter="40" type="flex" class="flex-wrap">
-                <el-col :span="12" class="f16" v-for="(item,index) in  jobDetail.demand">
-                  <el-row class="format-job-wrap">
-                    <el-col :span="3" class="f18 text-center f-666">{{index + 1}}</el-col>
-                    <el-col :span="15" class="f-333">{{item.city}}</el-col>
-                    <el-col :span="6" class="f-666  text-right f14">{{item.count}}职位</el-col>
+              <!--  岗位详情  -->
+              <div  v-if="Object.keys(jobDetail).length > 0">
+                <!-- 图表 -->
+                <div class="desc-item">
+                  <p class="format-tit">薪资情况</p>
+                  <el-row :gutter="10">
+                    <el-col :span="12">
+                      <p class="text-right f-333">按趋势</p>
+                      <mx-chart :options="chartExperience" height="300px"></mx-chart>
+                    </el-col>
+                    <el-col :span="12">
+                      <p class="text-right f-333">按分布</p>
+                      <mx-chart :options="chartSalary" height="300px"></mx-chart>
+                    </el-col>
                   </el-row>
-                </el-col>
-              </el-row>
-            </div>
-            <div class="desc-item">
-              <p class="format-tit">收入排行-按行业</p>
-              <el-row :gutter="40" type="flex" class="flex-wrap">
-                <el-col :span="12" class="f16" v-for="(item,index) in  jobDetail.industrySalary">
-                  <el-row class="format-job-wrap">
-                    <el-col :span="3" class="f18 text-center f-666">{{index + 1}}</el-col>
-                    <el-col :span="15" class="f-333">{{item.name}}</el-col>
-                    <el-col :span="6" class="f-666 text-right f14">{{item.salary}}元 / 月</el-col>
+                </div>
+                <div class="desc-item">
+                  <p class="format-tit">就业形势</p>
+                  <el-row :gutter="10">
+                    <el-col :span="12">
+                      <p class="text-right f-333">按学历</p>
+                      <mx-chart :options="chartEdu" height="300px"></mx-chart>
+                    </el-col>
+                    <el-col :span="12">
+                      <p class="text-right f-333">按经验</p>
+                      <mx-chart :options="chartExp" height="300px"></mx-chart>
+                    </el-col>
                   </el-row>
-                </el-col>
-              </el-row>
-            </div>
-            <div class="desc-item">
-              <p class="format-tit">收入排行-按地区</p>
-              <el-row :gutter="40" type="flex" class="flex-wrap">
-                <el-col :span="12" class="f16" v-for="(item,index) in  jobDetail.citySalary">
-                  <el-row class="format-job-wrap">
-                    <el-col :span="3" class="f18 text-center f-666">{{index + 1}}</el-col>
-                    <el-col :span="15" class="f-333">{{item.city}}</el-col>
-                    <el-col :span="6" class="f-666 text-right f14">{{item.salary}}元 / 月</el-col>
+                </div>
+                <div class="desc-item">
+                  <p class="format-tit">招聘需求量</p>
+                  <el-row :gutter="40" type="flex" class="flex-wrap">
+                    <el-col :span="12" class="f16" v-for="(item,index) in  jobDetail.demand">
+                      <el-row class="format-job-wrap">
+                        <el-col :span="3" class="f18 text-center f-666">{{index + 1}}</el-col>
+                        <el-col :span="15" class="f-333">{{item.city}}</el-col>
+                        <el-col :span="6" class="f-666  text-right f14">{{item.count}}职位</el-col>
+                      </el-row>
+                    </el-col>
                   </el-row>
-                </el-col>
-              </el-row>
+                </div>
+                <div class="desc-item">
+                  <p class="format-tit">收入排行-按行业</p>
+                  <el-row :gutter="40" type="flex" class="flex-wrap">
+                    <el-col :span="12" class="f16" v-for="(item,index) in  jobDetail.industrySalary">
+                      <el-row class="format-job-wrap">
+                        <el-col :span="3" class="f18 text-center f-666">{{index + 1}}</el-col>
+                        <el-col :span="15" class="f-333">{{item.name}}</el-col>
+                        <el-col :span="6" class="f-666 text-right f14">{{item.salary}}元 / 月</el-col>
+                      </el-row>
+                    </el-col>
+                  </el-row>
+                </div>
+                <div class="desc-item">
+                  <p class="format-tit">收入排行-按地区</p>
+                  <el-row :gutter="40" type="flex" class="flex-wrap">
+                    <el-col :span="12" class="f16" v-for="(item,index) in  jobDetail.citySalary">
+                      <el-row class="format-job-wrap">
+                        <el-col :span="3" class="f18 text-center f-666">{{index + 1}}</el-col>
+                        <el-col :span="15" class="f-333">{{item.city}}</el-col>
+                        <el-col :span="6" class="f-666 text-right f14">{{item.salary}}元 / 月</el-col>
+                      </el-row>
+                    </el-col>
+                  </el-row>
+                </div>
+              </div>
+              <div v-else>
+                暂无数据
+              </div>
             </div>
-          </div>
+          </div></div>
+      </el-col>
+    </el-row>
+
+
 
-          <div v-else>
-            暂无数据
-          </div>
-        </div>
-      </div>
 
-    </div>
   </div>
 </template>
 <script>
@@ -175,11 +181,13 @@ export default {
           toolbox: {
             show: true,
           },
+        tooltip: {
+          trigger: 'item'
+        },
         series: [
           {
-            name: 'Nightingale Chart',
             type: 'pie',
-            radius: [30, 60],
+            radius: [40, 60],
             label:{
               formatter: '{b}'
             },

src/views/system/user/profile/components/esign-dialog.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <!-- 做使用el-dialog做签字的弹框 -->
+    <el-dialog title="签字" :visible.sync="dialogVisible" width="800px" append-to-body>
+      <!-- 使用这个签名组件 -->
+      <vue-esign
+        ref="esign"
+        class="mySign"
+        :width="800"
+        :height="300"
+        :isCrop="isCrop"
+        :lineWidth="lineWidth"
+        :lineColor="lineColor"
+        :bgColor.sync="bgColor"
+      />
+      <span slot="footer" class="dialog-footer fx-row jc-between">
+           <el-popover
+             placement="top-start"
+             title="标题"
+             width="200"
+             trigger="click"
+             content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+             <el-button slot="reference">协议</el-button>
+        </el-popover>
+
+        <div>
+          <el-button @click="handleGenerate" type="primary">生成签字图片</el-button>
+          <el-button @click="handleReset">清空画板</el-button>
+          <el-button @click="dialogVisible = false">取消</el-button>
+        </div>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false, // 弹框是否开启
+      lineWidth: 3, // 画笔的线条粗细
+      lineColor: "#000000", // 画笔的颜色
+      bgColor: "", // 画布的背景颜色
+      resultImg: "", // 最终画布生成的base64图片
+      isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
+    };
+  },
+  methods: {
+    open() {
+      this.dialogVisible = true
+    },
+    // 清空画板
+    handleReset() {
+      this.$refs.esign.reset();
+    },
+    // 生成签字图
+    handleGenerate() {
+      this.$refs.esign
+        .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
+        .then((res) => {
+          this.resultImg = res;
+        })
+        .catch((err) => {
+          // 画布没有签字时会执行这里提示一下
+          this.$message({
+            type: "warning",
+            message: "请签名后再生成签字图片",
+          });
+        });
+
+      // 在这里向后端发请求把转换后的base64文件传给后端，后端接收以后再转换成图片做静态图片存储
+      // 当然也可以把base64转成流文件blob格式的，类似上传给后端这样，具体哪种方式看后端要求
+      setTimeout(() => {
+        // 这里要使用定时器稍微延后以后就能取到base64数据了，当然也可以再加一个确认按钮，如：确认使用这张base64签名图片
+        // 点击确认以后，在其回调函数中，再把base64的签名图片传给后端用于存储
+        console.log('我是签字后的base64图片',this.resultImg);
+      }, 200);
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+#app {
+  width: 100%;
+  height: 100%;
+  padding: 60px;
+  .checkMan {
+    width: 400px;
+    height: 360px;
+    text-align: center;
+    border: 1px solid #e9e9e9;
+    padding-top: 40px;
+    h2 {
+      margin-bottom: 20px;
+    }
+    .el-button {
+      margin-bottom: 20px;
+    }
+    img {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+::v-deep .el-dialog__body {
+  // 设置一下签字区域的虚线边框
+  .mySign {
+    border: 1px dashed #000;
+  }
+}
+</style>

src/views/system/user/profile/components/report-table.vue

@@ -16,8 +16,11 @@
         <!--        <el-button>查看</el-button>-->
       </template>
       <template #signUp="{row}">
-        <span class="btn-red" v-if="row.selected" @click="toUnSelect(row)">取消报名</span>
-        <span class="btn-green" v-else @click="toSelect(row)">报名</span>
+        <span class="f-red" v-if="!row.allowSelect">无法报名</span>
+        <div v-else>
+          <span class="f-red btn-red" v-if="row.selected" @click="toUnSelect(row)">取消报名</span>
+          <span class="btn-green" v-else @click="toSelect(row)">报名</span>
+        </div>
       </template>
       <template #subjects="{row}">
         <el-row>
@@ -25,9 +28,9 @@
             <el-popover
               placement="top"
               popper-class="zero-padding-popover"
-              trigger="click">
+              trigger="hover">
               <div class="fx-column">
-                <span >{{subject}}</span>
+                <el-button plain type="text">{{ subject }}</el-button>
               </div>
               <el-tag type="success" slot="reference" class="mr10 mb10">{{ subject[0] }}</el-tag>
             </el-popover>
@@ -47,20 +50,15 @@
     <p>您的选科志愿: <span v-for="(item,index) in selectedList">
       {{ item.groupName }}{{ index + 1 < selectedList.length ? '、' : '' }}</span>
     </p>
-    <!-- 拖拽 -->
-    <test-drage ref="drage" :sortList="selectedList"></test-drage>
+    <!-- 初录 多志愿拖拽 -->
+    <div v-if="generation == 0">
+      <test-drage ref="drage" :sortList="selectedList"></test-drage>
+    </div>
+    <div v-else>
+      单次报名
+    </div>
     <el-button @click="commit" type="primary">提交</el-button>
-    <el-dialog
-      title="电子签名"
-      :visible.sync="dialogVisible"
-      width="70%"
-    >
-      <vue-esign></vue-esign>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-      </span>
-    </el-dialog>
+    <esign-dialog ref="esignDialog"></esign-dialog>
     <choose-subject-dialog ref="chooseDialog"></choose-subject-dialog>
     <select-subject-report-dialog ref="reportDialog" ></select-subject-report-dialog>
     <Ai-dialog ref="aiDialog"></Ai-dialog>
@@ -70,21 +68,22 @@
 import AiDialog from './ai-analysis-dialog'
 import MxSelectTranslate from '@/components/Cache/modules/mx-select-translate-mixin.js'
 import TestDrage from './test-drage'
-import VueEsign from '@/components/VueEsign/index'
 import ChooseSubjectDialog from './choose-subject-dialog'
 import SelectSubjectReportDialog from '@/views/system/user/profile/components/select-subject-report-dialog'
+import EsignDialog from '@/views/system/user/profile/components/esign-dialog'
 
 export default {
   components: {
     SelectSubjectReportDialog,
+    EsignDialog,
     TestDrage,
-    VueEsign,
     ChooseSubjectDialog,
     AiDialog
   },
   mixins: [MxSelectTranslate],
   data() {
     return {
+      generation: 0, // 模拟报名所处状态， 0为初录
       preferenceCount: 3,
       optionalMajors: [],
       dialogVisible: false,
@@ -92,10 +91,14 @@ export default {
       selectedList: []
     }
   },
+  mounted() {
+    // this.$refs.drage.init(this.selectedList)
+  },
   computed: {
     formatTable() {
       if (!this.modelsWrapper.models) return {}
       if (!this.optionalMajors) return {}
+
       // 行
       const rows = this.modelsWrapper.models.map(item => {
         item.allowSelectTips = item.allowSelect ? '报名中' : '无法报名'
@@ -196,20 +199,18 @@ export default {
         this.$message.warning(`初录报名需要选择${this.preferenceCount}个志愿`)
         return
       }
-      this.dialogVisible = true
+      this.$refs.esignDialog.open()
     },
     toSelect(row) {
-      const count = this.modelsWrapper.models.reduce((prev, cur) => {
+      const count = this.modelsWrapper.models.reduce((prev,cur) => {
         return prev += cur.selected ? 1 : 0
-      }, 0)
-      console.log(count)
+      })
       if (count >= this.preferenceCount) {
         this.$message.warning(`最多选择${this.preferenceCount}个志愿`)
         return
       }
       row.selected = true
       this.selectedList.push(row)
-      this.$refs.drage.init(this.selectedList)
     },
     toUnSelect(row) {
       this.$confirm(`是否解除选科组合【${row.groupName}】`, '警告', {
@@ -219,12 +220,10 @@ export default {
       }).then(() => {
         row.selected = false
         this.selectedList.splice(
-          this.selectedList.indexOf(this.selectedList.find((selected) => {
-                return selected.groupId === row.groupId
-              }
-            )
-          ), 1)
-        this.$refs.drage.init(this.selectedList)
+          this.selectedList.indexOf(this.selectedList.find((selected)=> {
+            return selected.groupId === row.groupId
+          }),1)
+        )
       }).catch(() => {
         this.$message({
           type: 'info',
@@ -241,6 +240,10 @@ export default {
     init(list) {
       console.log(list)
       this.modelsWrapper = list
+      this.selectedList = this.modelsWrapper.models.filter(item => {
+        return item.selected
+      })
+      this.$nextTick(()=>this.$refs.drage.init(this.selectedList))
     },
     initOption(optionalMajors) {
       console.log(optionalMajors)