plain-design 0.0.88 → 0.0.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "0.0.88",
+  "version": "0.0.92",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -21,7 +21,7 @@
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "plain-design-composition": "0.0.105",
+    "plain-design-composition": "0.0.114",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
@@ -55,7 +55,6 @@
     "axios": "^0.21.1",
     "babel-plugin-import": "^1.13.3",
     "babel-plugin-syntax-jsx": "^6.18.0",
-    "choerodon-ui": "0.8.77",
     "core-js": "^3.6.5",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.4",
@@ -66,7 +65,7 @@
     "fork-ts-checker-webpack-plugin": "^6.2.4",
     "mini-css-extract-plugin": "^1.6.2",
     "mockjs": "^1.1.0",
-    "plain-design-composition": "0.0.105",
+    "plain-design-composition": "^0.0.114",
     "postcss": "^8.2.13",
     "postcss-loader": "^4.2.0",
     "qs": "^6.10.1",

package/src/packages/PlCascadePanel/cascade-panel.scss

@@ -1,106 +1,107 @@
 @include theme {
-    .pl-cascade-panel {
-        display: inline-block;
-        height: 200px;
-        border: solid 1px $ibc;
-        border-radius: $popperRadius;
-        color: $itc;
-
-        & > .pl-list {
-            height: 100%;
-            overflow: hidden;
-            white-space: nowrap;
-        }
+  .pl-cascade-panel {
+    display: inline-block;
+    height: 200px;
+    border: solid 1px $ibc;
+    border-radius: $popperRadius;
+    color: $itc;
 
-        .pl-cascade-list {
-            width: 180px;
-            height: 100%;
-            padding: 6px 0;
-            font-size: 14px;
-            display: inline-block;
-            vertical-align: top;
-            overflow: hidden;
-            box-sizing: border-box;
-
-            &:not(:last-child) {
-                border-right: solid 1px $ibc;
-            }
+    & > .pl-list {
+      height: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+    }
 
-            .pl-list {
-                overflow: hidden;
-            }
+    .pl-cascade-list {
+      width: 180px;
+      height: 100%;
+      padding: 6px 0;
+      font-size: 14px;
+      display: inline-block;
+      vertical-align: top;
+      overflow: hidden;
+      box-sizing: border-box;
 
-            .pl-cascade-item {
-                padding: 5px 0 5px 12px;
-                font-weight: 400;
-                font-size: 13px;
-                color: $itc;
-                background-color: white;
-                transition: all 300ms $transition;
-                cursor: pointer;
+      &:not(:last-child) {
+        border-right: solid 1px $ibc;
+      }
 
-                .pl-cascade-content {
-                    padding-right: 30px;
-                    position: relative;
+      .pl-list {
+        overflow: hidden;
+      }
 
-                    .pl-cascade-arrow {
-                        position: absolute;
-                        top: 0;
-                        bottom: 0;
-                        right: 0;
-                        width: 30px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        color: $icc;
-                    }
-                }
+      .pl-cascade-item {
+        padding: 5px 0 5px 12px;
+        line-height: 22px;
+        font-weight: 400;
+        font-size: 13px;
+        color: $itc;
+        background-color: white;
+        transition: all 300ms $transition;
+        cursor: pointer;
 
-                &.pl-cascade-item-expand, &:hover {
-                    color: $ihc;
-                    background-color: $disabled;
-                }
+        .pl-cascade-content {
+          padding-right: 30px;
+          position: relative;
 
-                &.pl-cascade-item-active {
-                    color: $colorPrimary;
-                    background-color: rgba($colorPrimary, 0.1);
-                }
+          .pl-cascade-arrow {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            width: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: $icc;
+          }
+        }
 
-                &.pl-cascade-empty {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    justify-content: center;
+        &.pl-cascade-item-expand, &:hover {
+          color: $ihc;
+          background-color: $disabled;
+        }
 
-                    padding-left: 0;
-                    font-size: 12px;
-                    color: $disabledText;
-                    background-color: transparent;
-                    cursor: auto;
+        &.pl-cascade-item-active {
+          color: $colorPrimary;
+          background-color: rgba($colorPrimary, 0.1);
+        }
 
-                    .pl-icon {
-                        margin-bottom: 8px;
-                        font-size: 20px;
-                    }
-                }
+        &.pl-cascade-empty {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
 
-                &.pl-cascade-item-disabled {
-                    background-color: transparent;
-                    color: $disabledText;
-                    cursor: not-allowed;
-                }
-            }
+          padding-left: 0;
+          font-size: 12px;
+          color: $disabledText;
+          background-color: transparent;
+          cursor: auto;
 
-            &.pl-cascade-filter-list {
-                width: 360px;
-            }
+          .pl-icon {
+            margin-bottom: 8px;
+            font-size: 20px;
+          }
         }
 
-        .pl-loading-mask {
-            top: 1px;
-            bottom: 1px;
-            left: 1px;
-            right: 1px;
+        &.pl-cascade-item-disabled {
+          background-color: transparent;
+          color: $disabledText;
+          cursor: not-allowed;
         }
+      }
+
+      &.pl-cascade-filter-list {
+        width: 360px;
+      }
+    }
+
+    .pl-loading-mask {
+      top: 1px;
+      bottom: 1px;
+      left: 1px;
+      right: 1px;
     }
-}
+  }
+}

package/src/packages/PlDialog/dialog.scss

@@ -171,19 +171,19 @@
       /*@formatter:off*/
             &.pl-transition-dialog-#{$key}-enter {
                 &:before {opacity: 0;}
-                .pl-dialog-body {transform: $value;}
+                .pl-dialog-body {opacity: 0;transform: $value;}
             }
             &.pl-transition-dialog-#{$key}-enter-active {
                 &:before {opacity: 1;}
-                .pl-dialog-body {transform: translate3d(0, 0, 0);}
+                .pl-dialog-body {opacity: 1;transform: translate3d(0, 0, 0);}
             }
             &.pl-transition-dialog-#{$key}-exit {
                 &:before {opacity: 1;}
-                .pl-dialog-body {transform: translate3d(0, 0, 0);}
+                .pl-dialog-body {opacity: 1;transform: translate3d(0, 0, 0);}
             }
             &.pl-transition-dialog-#{$key}-exit-active {
                 &:before {opacity: 0;}
-                .pl-dialog-body {transform: $value;}
+                .pl-dialog-body {opacity: 0;transform: $value;}
             }
             &.pl-transition-dialog-#{$key}-enter-active, &.pl-transition-dialog-#{$key}-exit-active {
                 .pl-dialog-body {

package/src/packages/PlDropdown/dropdown.scss

@@ -55,7 +55,7 @@
     }
 
     .pl-dropdown-group-content {
-      padding: 4px 8px;
+      padding: 4px 0;
     }
 
     &.pl-dropdown-no-title:not(:last-child) {

package/src/packages/PlInput/input.scss

@@ -31,6 +31,7 @@
 
     .pl-input-custom-placeholder {
       color: $ipc;
+      margin-left: 6px;
     }
 
     input, textarea {

package/src/packages/PlSlider/slider.scss

@@ -52,6 +52,7 @@
               background-color: rgba(black, 0.8);
               color: white;
               padding: 3px 6px;
+              line-height: initial;
               position: absolute;
               left: 50%;
               transform: translateX(-50%);
@@ -172,4 +173,4 @@
       }
     }
   }
-}
+}

package/src/packages/createUseTableOption/use/use.buttons.tsx

@@ -220,6 +220,10 @@ export function useTableOptionButtons({hooks, methods, command, setting, config,
 
     command.on('esc', () => methods.editMethods.cancel())
     command.on('alt+s', () => methods.editMethods.save())
+    command.on('up', () => methods.pageMethods.selectPrevRow())
+    command.on('down', () => methods.pageMethods.selectNextRow())
+    command.on('left', () => methods.pageMethods.prev())
+    command.on('right', () => methods.pageMethods.next())
 
     const outerButtons = computed(() => {
         return [...Object.values(standardButtons), ...config.buttons || []]

package/src/packages/createUseTableOption/use/use.methods.tsx

@@ -1,4 +1,4 @@
-import {eTableProEditType, iTableProDefaultConfig, iTableSortData, iTableOptionState, tTableOptionConfig, tUrlConfig} from "../createUseTableOption.utils";
+import {eTableProEditType, iTableOptionState, iTableProDefaultConfig, iTableSortData, tTableOptionConfig, tUrlConfig} from "../createUseTableOption.utils";
 import {tTablePagination} from "./use.paginaiton";
 import {tTableOptionHooks} from "./use.hooks";
 import $$notice from "../../$$notice";
@@ -61,6 +61,14 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
                 requestConfig,
             }
         },
+        getChangeNode: (node: TableNode) => {
+            const {editRow, data} = node
+            const changeKey = Object.keys({...editRow, ...data}).find(key => editRow[key] !== data[key])
+            /*if (!!changeKey) {
+                console.log(editRow[changeKey], data[changeKey])
+            }*/
+            return !!changeKey ? node : null
+        },
     }
 
     const pageMethods = useAsyncMethods((() => {
@@ -155,7 +163,36 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
             }
         }
 
-        return {load, reload, queryCount, next, prev, jump,}
+        /*选中下一条数据*/
+        const selectNextRow = async () => {
+            const {list, currentKey} = tableState
+            if (list.length === 0 || !currentKey) {return}
+            const index = list.findIndex(i => i[config.keyField] === currentKey)
+            if (index === list.length - 1) {
+                // 当前应是选中当前页的最后一条数据了
+                if (pagination.pageState.hasNext) {
+                    pageMethods.next()
+                }
+            } else {
+                editMethods.selectCurrent(list[index + 1][config.keyField])
+            }
+        }
+        /*选中上一条数据*/
+        const selectPrevRow = async () => {
+            const {list, currentKey} = tableState
+            if (list.length === 0 || !currentKey) {return}
+            const index = list.findIndex(i => i[config.keyField] === currentKey)
+            if (index === 0) {
+                // 当前应是选中当前页的第一条数据了
+                if (pagination.pageState.page > 0) {
+                    pageMethods.prev()
+                }
+            } else {
+                editMethods.selectCurrent(list[index - 1][config.keyField])
+            }
+        }
+
+        return {load, reload, queryCount, next, prev, jump, selectNextRow, selectPrevRow}
     })())
 
     const editMethods = (() => {
@@ -352,6 +389,13 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
                             $$message.error(`第${index + 1}条记录校验不通过，${errors[0].label}:${errors[0].message}`)
                             return Promise.reject(validateResult)
                         }
+                        const changeNode = utils.getChangeNode(node)
+                        if (!changeNode) {
+                            // 没有改变任何字段
+                            node.closeEdit()
+                            await selectCurrent(node.editRow[config.keyField])
+                            return
+                        }
                         const saveRow = await saveUpdate(node.editRow)
                         node.saveEdit(saveRow)
                         node.closeEdit()
@@ -396,8 +440,13 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
                         $$message.error(`第${index + 1}条记录校验不通过，${errors[0].label}:${errors[0].message}`)
                         return Promise.reject(validateResults[0])
                     }
+                    const changeNodes = updateNodes.map(node => utils.getChangeNode(node)).filter(Boolean) as TableNode[]
+                    if (changeNodes.length === 0) {
+                        updateNodes.forEach(node => node.cancelEdit())
+                        return confirm.close.clear()
+                    }
                     let {request, requestConfig} = utils.getUrlConfig('batchUpdate')
-                    requestConfig.body = {rows: await Promise.all(deepcopy(updateNodes.map(node => node.editRow)).map(row => hooks.onBeforeSaveRow.exec(row)))}
+                    requestConfig.body = {rows: await Promise.all(deepcopy(changeNodes.map(node => node.editRow)).map(row => hooks.onBeforeSaveRow.exec(row)))}
                     requestConfig = await hooks.onBeforeUpdate.exec(requestConfig)
                     await request!(requestConfig)
                     confirm.close.clear()

package/src/packages/useContextmenu/contextmenu-service.scss

@@ -3,7 +3,7 @@
     position: fixed;
 
     .pl-contextmenu-service-body {
-      transition: all $transition 300ms;
+      transition: all $transition 150ms;
       transform-origin: top left;
       box-sizing: border-box;
       box-shadow: $boxshadow;