@kyfe/ks-query-table 0.0.21 → 0.0.22

package/src/view/home/query-table/components/table-settings/index.less

@@ -0,0 +1,294 @@
+.pe-table-setting-popup {
+  -webkit-user-select: none;
+  user-select: none;
+  background-color: #ffffff;
+    &.fixed-head {
+      height: 100%;
+    }
+  width: 100%;
+  border-radius: 20px 0 0 20px;
+
+  .pe-table-setting__wrapper {
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pe-table-setting__header {
+    // 吸顶
+    position: sticky;
+    top: -1px;
+    z-index: 3;
+    background-color: #fff;
+    padding-top: 8px;
+    .pe-table-setting__header__title-wrap {
+      display: flex;
+      margin: 0 0 8px 16px;
+      align-items: center;
+      height: 20px;
+      font-size: 14PX;
+      font-weight: 500;
+      line-height: 20px;
+      letter-spacing: 0px;
+      .van-icon {
+        font-size: 20px;
+        margin-right: 4px;
+      }
+      .pe-table-setting__header__title {
+        color: @C9-gray-09;
+      }
+
+      .pe-table-setting__header__title-desc {
+        font-size: 12px;
+        color: #888B92;
+        font-weight: 400;
+        margin-left: 6px;
+      }
+    }
+
+    &__table-title {
+      display: flex;
+      // justify-content: space-between;
+      margin: 0 16px;
+      // height: 28px;
+      background-color: #f7f8fa;
+      span {
+        display: inline-block;
+        position: relative;
+        color: #555961;
+        font-size: 11px;
+        height: 28px;
+        line-height: 28px;
+        border-bottom: 1px solid @C9-gray-01;
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 1px;
+          height: 100%;
+          background-color: #c7cbce;
+          transform-origin: right;
+          transform: scaleX(0.5);
+        }
+        &:last-child::after {
+          display: none;
+        }
+      }
+
+      // .pe-table-setting {
+      //   &__field-sort {
+      //     width: 52px;
+      //   }
+      //   &__field-title {
+      //     flex: 1;
+      //   }
+      //   &__switch {
+      //     width: 64px;
+      //   }
+      //   &__up {
+      //     width: 64px;
+      //   }
+      //   &__down {
+      //     width: 64px;
+      //   }
+      // }
+    }
+  }
+
+  .pe-table-setting__list-wrapper {
+    -webkit-overflow-scrolling: touch;
+    &.fixed-head {
+      flex: 1;
+      overflow-y: scroll;
+    }
+    // padding: 0 16px;
+  }
+
+  .pe-table-setting__list {
+    // width: 208px;
+    // padding-right: 40px;
+    .sortable-drag {
+         opacity: 1 !important;
+         background: #FFFFFF !important;;
+         box-shadow: 0px 1px 8px 0px rgba(58, 68, 85, 0.24) !important;
+         height: 36px !important;
+         overflow: hidden;
+    }
+    li {
+      .parent-col,
+      .expand-col,
+      .child-expand-col {
+        height: 36px;
+        position: relative;
+        display: flex;
+        // justify-content: space-between;
+        // width: 208px;
+        overflow: hidden;
+        color: @C9-gray-09;
+        font-size: 12px;
+        line-height: 36px;
+        background-color: #fff;
+        border-bottom: 0.5px solid #e6e9ea;
+        // padding-right: 16px;
+        margin: 0 16px;
+        .list_item__switch {
+          padding: 10px;
+          box-sizing: border-box;
+        }
+        &.active {
+          background-color: #f3faff;
+          .van-cell__value {
+             background-color: #f3faff;
+             .van-field__body {
+              background-color: #ffffff;
+             }
+          }
+        }
+        .van-checkbox {
+          margin-top: 4px;
+        }
+
+        .svg-icon {
+          margin-left: 32px;
+          margin-top: 6px;
+        }
+      }
+      .expand-col .list_item__field-title {
+        padding-left: 16px;
+      }
+       .child-expand-col .list_item__field-title {
+        padding-left: 24px;
+      }
+
+      &-title {
+        display: inline-block;
+        width: 140px;
+      }
+    }
+
+    .footer-btn {
+      height: 80px;
+
+      .van-button {
+        border-radius: 8PX !important;
+        height: 42px;
+        line-height: 40px;
+      }
+    }
+  }
+  .pe-table-setting__header__table-title .pe-table-setting__field-sort {
+    padding-left: 8px;
+    box-sizing: border-box;
+  }
+  .pe-table-setting,
+  .list_item {
+    &__field-sort {
+      padding: 0;
+      // width: 82px;
+      width: 52px;
+      display: flex;
+      align-items: center;
+      .van-cell {
+        background-color: transparent;
+        padding-left: 8px;
+        .van-cell__value {
+        }
+        .van-field__body {
+          width: 24px;
+          height: 20px;
+          border: 1px solid #e6e9ea;
+          border-radius: 4px;
+          input {
+            text-align: center;
+            font-size: 13px;
+          }
+        }
+      }
+    }
+
+    &__field-title {
+      flex: 1;
+      padding: 0 8px;
+      white-space: nowrap;
+      /* 不换行 */
+      overflow: hidden;
+      /* 隐藏超出的内容 */
+      text-overflow: ellipsis;
+
+      /* 用省略号表示被隐藏的部分 */
+      .arrow {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        margin-left: 4px;
+        background-image: url(./assets/arrpw-up.svg);
+        background-repeat: no-repeat;
+        background-size: cover;
+        &.down {
+          transform: rotate(180deg);
+        }
+      }
+
+      &.expand {
+        background-color: #f8fafd;
+      }
+    }
+
+    &__switch {
+      width: 68px;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+       .van-switch {
+       background-color:@C9-gray-01;
+       border:1px solid @C9-gray-01;
+      }
+      .van-switch--on {
+       background-color: @C1-brand-06;
+       background-image: linear-gradient(90deg, #F2412F 0%, #FF7053 97%);
+       border:1px solid #F2412F;
+      }
+    }
+
+    &__up {
+      width: 58px;
+      text-align: center;
+    }
+
+    &__down {
+      width: 58px;
+      text-align: center;
+    }
+  }
+
+  .list_item {
+    &__up,
+    &__down {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      span {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-image: url(./assets/up.svg);
+        &.disabled {
+        background-image: url(./assets/disabled-up.svg);
+        }
+      }
+    }
+
+    &__down span {
+      background-image: url(./assets/down.svg);
+       &.disabled {
+        background-image: url(./assets/disabled-down.svg);
+      }
+    }
+  }
+}

package/src/view/home/query-table/components/table-settings/index.vue

@@ -0,0 +1,260 @@
+<template>
+  <van-popup
+    :value="value"
+    position="right"
+    get-container="body"
+    class="pe-table-settings pe-common-popup-container"
+    duration="0.2"
+    :style="{ width: '100%', height: '100%' }"
+    :closeable="false"
+    :close-on-click-overlay="true"
+    @click-overlay="back"
+    @input="handleClosePopup"
+    @open="handleOpenPopup"
+  >
+    <div class="popup-box">
+      <div class="popup-header">
+        <div class="back-btn" @click="back">
+          <van-icon size="18" style="display: inline-block; vertical-align: middle; font-weight: bold; padding-right: 2px" name="arrow-left" />{{ title }}
+        </div>
+      </div>
+      <div class="popup-content">
+        <slot name="top"></slot>
+        <Settings ref="settingsRef" @change="change" v-bind="$attrs" :fixedHead="!($scopedSlots && $scopedSlots.top)" :tableColumns="columns">
+          <template slot="label" slot-scope="{ item }">
+            <slot :item="item" name="label"></slot>
+          </template>
+        </Settings>
+      </div>
+      <div class="footer-btn">
+        <van-button @click="reset" class="btn left-btn">重置</van-button>
+        <van-button type="primary" @click="confirm" class="btn">确定</van-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+import cloneDeep from 'lodash/cloneDeep'
+// import Mixins from './mixin.js'
+import Settings from './settings.vue'
+// import { cols2 } from './test'
+export default {
+  name: 'table-settings',
+  // mixins: [Mixins],
+  components: { Settings },
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: '个性设置',
+    },
+    tableColumns: {
+      type: Array,
+      default: () => [],
+    },
+    // 组件内部控制tab显示
+    innerTabVisible: {
+      type: Boolean,
+      default: true,
+    },
+    disabledAutoHideClose: {
+      type: Boolean,
+      default: false,
+    },
+    isShowHorizontal: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    // tableColumns: {
+    //   deep: true,
+    //   handler() {
+    //   },
+    // },
+  },
+  data() {
+    return {
+      columns: [],
+    }
+  },
+  computed: {},
+  methods: {
+    change(val) {
+      this.$emit('change', val)
+    },
+    back() {
+      this.handleClosePopup(false)
+      this.$emit('back')
+    },
+    async reset() {
+      this.handleClosePopup(false)
+      this.$emit('reset')
+    },
+    cancel() {
+      this.handleClosePopup(false)
+      this.$emit('cancel')
+    },
+    confirmCheck(clos) {
+      if (!clos.filter(v => v.show && !v.isHide).length) {
+        window.vant.Toast('请至少保留一列')
+        return false
+      }
+      return true
+    },
+    confirm() {
+      let clos = [...this.$refs.settingsRef.getData()]
+      if (!this.confirmCheck(clos)) return
+      this.handleClosePopup(false)
+      this.columns = clos
+      this.$emit('confirm', clos)
+    },
+    handleClosePopup(e) {
+      this.$emit('input', e)
+      document.body.style['user-select'] = 'auto'
+      this.innerTabVisible &&
+        window.ks.callFunc({
+          method: 'setStockTabVisible',
+          params: {
+            isShow: true, // 是否显示tab
+          },
+        })
+      if (!this.disabledAutoHideClose && !this.isShowHorizontal) {
+        window.ks.callFunc({
+          method: 'setCloseButton',
+          params: { isShow: true },
+        })
+      }
+    },
+    handleOpenPopup() {
+      this.init()
+      this.$emit('open')
+      this.innerTabVisible &&
+        window.ks.callFunc({
+          method: 'setStockTabVisible',
+          params: {
+            isShow: false, // 是否显示tab
+          },
+        })
+      window.ks.callFunc({
+        method: 'setCloseButton',
+        params: {
+          isShow: false,
+        },
+      })
+    },
+    init() {
+      try {
+        this.$nextTick(() => {
+          this.$refs.settingsRef.activeIndex = -1
+          this.$refs.settingsRef && this.$refs.settingsRef.formatColumns(cloneDeep(this.tableColumns))
+        })
+        document.body.style['user-select'] = 'none'
+      } catch (error) {
+        // console.log('error', error)
+      }
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.pe-table-settings {
+  // 防止拖拽时出现横向滚动条
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  user-select: none;
+  // 适配ios的吸顶
+  // top: 0;
+  // left: 0;
+  // right: 0;
+  // transform: unset;
+  .popup-box {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    .popup-header {
+      width: 100%;
+      height: 44px;
+      font-weight: 500;
+      display: flex;
+      flex-shrink: 0;
+      font-size: 18px;
+      justify-content: space-between;
+      align-items: center;
+      .back-btn {
+        display: flex;
+        align-items: center;
+        padding-left: 7px;
+        // prettier-ignore
+        font-size: 16PX;
+        // prettier-ignore
+        line-height: 16PX;
+      }
+    }
+    .popup-content {
+      // flex-grow 不能使用，ios无法滚动
+      flex: 1;
+      font-size: 14px;
+      color: #333333;
+      overflow-y: auto;
+    }
+    .footer-btn {
+      width: 100%;
+      padding: 8px 16px;
+      flex-shrink: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-sizing: border-box;
+      .btn {
+        height: 40px;
+        width: 48%;
+        border-radius: 8px !important;
+        &.van-button--primary {
+          border: none;
+          background: linear-gradient(90deg, #f2412f 0%, #ff7053 97%);
+        }
+      }
+      .left-btn {
+        box-sizing: inherit;
+        // color:  @C1-brand-05;
+        position: relative;
+        border: none;
+        &::after {
+          content: ' ';
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 200%;
+          height: 200%;
+          border: 1px solid @C1-brand-03;
+          border-radius: 16px;
+          -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+          -webkit-transform: scale(0.5);
+          transform: scale(0.5);
+        }
+      }
+    }
+  }
+}
+.ipx .pe-table-settings {
+  .popup-header {
+    padding-top: 44px !important;
+  }
+  .footer-btn {
+    padding-bottom: 24px;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+}
+.ios .pe-table-settings .popup-header {
+  padding-top: 20px;
+}
+</style>