update: 成员选择组件

src/views/salesleads/actCodeManage/components/select-clerk/select-clerk.vue

@@ -39,7 +39,11 @@
               <el-table-column min-width="67px">
                 <template slot-scope="{ row }">
                   <el-checkbox v-if="multiple" v-model="row.selected" @change="onSelectClerk(row, index)" :disabled="row.disabled"></el-checkbox>
-                  <el-radio v-else v-model="row.selected" @change="onSelectClerk(row, index)" :disabled="row.disabled"></el-radio>
+                  <!-- 为了实现单选框选中状态时再次点击能切换到未选中状态，所以使用一个复选框盖在单选框上 -->
+                  <div v-else class="radio-wrapper">
+                    <el-checkbox class="radio-handler" v-if="!row.disabled" v-model="row.selected" @change="onSelectClerk(row, index)"></el-checkbox>
+                    <el-radio class="radio-content" :value="row.selected" :label="true" :disabled="row.disabled"></el-radio>
+                  </div>
                 </template>
               </el-table-column>
               <el-table-column label="导购" min-width="230px">
@@ -55,7 +59,7 @@
             </el-table>
           </div>
         </div>
-        <el-pagination @current-change="onCurrentChange" :total="params.total" :page-size="params.pageSize" :current-page="params.pageNum" layout="prev, pager, next" style="margin-bottom: 0;text-align: right"></el-pagination>
+        <el-pagination v-if="params.total > 0" @current-change="onCurrentChange" :total="params.total" :page-size="params.pageSize" :current-page="params.pageNum" layout="prev, pager, next" style="margin-bottom: 0;text-align: right"></el-pagination>
       </div>
       <!-- 选中的导购 -->
       <div class="selected-clerk">
@@ -282,9 +286,14 @@ export default {
       if (!this.multiple) {
         if (this.selected.length > 0) {
           this.selected[0].selected = false;
-          this.selected = [];
+          if (clerk.clerkId == this.selected[0].clerkId) {
+            this.selected = [];
+          } else {
+            this.selected.splice(0, 1, clerk);
+          }
+        } else {
+          this.selected.push(clerk);
         }
-        this.selected.push(clerk);
         return;
       }
 
@@ -435,6 +444,14 @@ export default {
               border-bottom: none;
             }
           }
+          >>> .el-table__empty-block {
+            min-height: 120px !important;
+            height: 120px !important;
+            .el-table__empty-text::before {
+              width: 60px;
+              height: 60px;
+            }
+          }
           .clerk-name {
             font-size: 14px;
             font-weight: 400;
@@ -447,6 +464,21 @@ export default {
             color: #606266;
             line-height: 17px;
           }
+          .radio-wrapper {
+            position: relative;
+            .radio-handler {
+              position: absolute;
+              top: 0;
+              left: 0;
+              z-index: 1;
+              opacity: 0;
+            }
+            .radio-content {
+              >>> .el-radio__label {
+                display: none;
+              }
+            }
+          }
         }
       }
     }