wkjp-list-page 1.0.45 → 1.0.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wkjp-list-page",
-  "version": "1.0.45",
+  "version": "1.0.47",
   "description": "Vue2 + ElementUI CommonListPage component",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/components/CommonListPage.vue

@@ -152,6 +152,31 @@
           :column-bind="tableColumnBind"
           :parent-scoped-slots="$scopedSlots"
         />
+        <el-table-column
+          v-else-if="col.type === 'selection'"
+          :key="'col-selection-' + idx"
+          v-bind="tableColumnBind(col)"
+        >
+          <template slot-scope="scope">
+            <el-tooltip
+              v-if="isSelectionRowDisabled(col, scope.row, scope.$index) && getSelectionDisabledTip(col, scope.row, scope.$index)"
+              :content="getSelectionDisabledTip(col, scope.row, scope.$index)"
+              placement="top"
+              :enterable="false"
+            >
+              <span class="common-list-page__selection-cell" @click.stop>
+                <el-checkbox :value="scope.isSelected" disabled></el-checkbox>
+              </span>
+            </el-tooltip>
+            <span v-else class="common-list-page__selection-cell" @click.stop>
+              <el-checkbox
+                :value="scope.isSelected"
+                :disabled="isSelectionRowDisabled(col, scope.row, scope.$index)"
+                @input="scope.store.commit('rowSelectedChanged', scope.row)"
+              ></el-checkbox>
+            </span>
+          </template>
+        </el-table-column>
         <el-table-column
           v-else-if="col.type !== 'slot' && isBuiltinCellColumn(col)"
           :key="'col-builtin-' + idx + '-' + col.type"
@@ -760,6 +785,17 @@ export default {
     isBuiltinCellColumn(col) {
       return col && ["selection", "index", "expand"].indexOf(col.type) !== -1;
     },
+    /** 复选框是否禁用：沿用列配置的 selectable(row, index) 判断，selectable 未配置则始终可选 */
+    isSelectionRowDisabled(col, row, index) {
+      if (!col || typeof col.selectable !== "function") return false;
+      return !col.selectable(row, index);
+    },
+    /** 复选框禁用时的悬浮提示文案：列配置 disabledTip 可为字符串，或 (row, index) => string */
+    getSelectionDisabledTip(col, row, index) {
+      if (!col || col.disabledTip == null) return "";
+      if (typeof col.disabledTip === "function") return col.disabledTip(row, index) || "";
+      return col.disabledTip;
+    },
     /** 复选框、展开列及 showInColumnConfig:false 不参与表头设置 */
     isConfigPanelColumn(col) {
       if (!col) return false;
@@ -990,6 +1026,7 @@ export default {
         "_visible",
         "_configKey",
         "children",
+        "disabledTip",
       ];
       var rest = {};
       Object.keys(col || {}).forEach(function (k) {
@@ -1815,6 +1852,14 @@ export default {
   color: #606266;
 }
 
+.common-list-page /deep/ .common-list-page__selection-cell {
+  display: inline-flex;
+}
+
+.common-list-page /deep/ .common-list-page__selection-cell .el-checkbox.is-disabled {
+  cursor: not-allowed;
+}
+
 .common-list-page /deep/ .el-form.common-list-page__search-form.el-form--inline,
 .common-list-page /deep/ .el-form.el-form--inline.common-list-page__search-form {
   display: flex;
@@ -2573,4 +2618,36 @@ body.wkjp-column-dragging {
 body.wkjp-column-dragging .column-config-panel__item--dragging {
   visibility: hidden !important;
 }
+.column-config-trigger {
+  position: relative;
+  &::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #f56c6c;
+    animation: column-config-trigger-pulse 1.6s ease-out infinite;
+  }
+  &:hover,
+  &.is-active {
+    &::after {
+      display: none;
+    }
+  }
+}
+
+@keyframes column-config-trigger-pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.5);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(245, 108, 108, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0);
+  }
+}
 </style>