iov-pro-components 0.0.3

package/src/packages/theme/src/preview.scss

@@ -0,0 +1,67 @@
+.image-viewer {
+  .is-disabled {
+    width: 32px;
+    height: 32px;
+    background-color: rgba(255,255,255, 0.3) !important;
+  }
+  .is-disabled-right {
+    width: 32px;
+    height: 32px;
+    transform: rotate(180deg);
+    background-color: rgba(255,255,255, 0.3) !important;
+  }
+  .el-image-viewer__prev {
+    width: 32px;
+    height: 32px;
+    background-color: rgba(255,255,255, 0.3);
+    &:hover {
+      width: 32px;
+      height: 32px;
+      background-color: rgba(255,255,255, 0.6);
+    }
+  }
+
+  .is-disabled-icon {
+    opacity: 0.2;
+  }
+
+  .el-image-viewer__next {
+    width: 32px;
+    height: 32px;
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+    right: 40px;
+    text-indent: 2px;
+    background-color: rgba(255, 255, 255, 0.3);
+    &:hover {
+      width: 32px;
+      height: 32px;
+      -webkit-transform: rotate(180deg);
+      transform: rotate(180deg);
+      background-color: rgba(255, 255, 255, 0.6);
+    }
+  }
+
+  .el-image-view__tools {
+    position: absolute;
+    right: 16px;
+    bottom: 30px;
+    line-height: 20px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 20px;
+    text-align: center;
+    font-size: 10px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #494B53;
+    padding: 3px 13px;
+    :nth-child(2) {
+      padding: 0 5px;
+      font-weight: 600;
+    }
+  }
+
+  &__close {
+    font-size: 20px;
+  }
+}

package/src/packages/theme/src/search-table.scss

@@ -0,0 +1,185 @@
+@import "./common/color.scss";
+
+.search-table {
+  &__title-main {
+    line-height: 22px;
+    margin-bottom: 12px;
+  }
+  &__title {
+    color: $--color-text-7;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 600;
+    font-size: 16px;
+  }
+  &__sub-title {
+    margin-left: 8px;
+    color: $--color-text-2;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 12px;
+  }
+  &__module {
+    background: #FFFFFF;
+    border-radius: 8px;
+    margin-bottom: 10px;
+    padding: 16px;
+    .iov-pro-form {
+      .iov-pro-form__form-item > label {
+        overflow: hidden;
+        padding: 0;
+        white-space: nowrap;
+      }
+    }
+    .iov-pro-table {
+      .iov-pro-link-group {
+        .iov-pro-space__item {
+          position: relative;
+          line-height: 1;
+          &:after {
+            content: '';
+            width: 1px;
+            height: 13px;
+            display: inline-block;
+            background: #DCDFE6;
+            overflow: hidden;
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+          &:last-child {
+            &:after {
+              display: none;
+            }
+          }
+          .el-link {
+            font-size: 13px;
+          }
+        }
+      }
+    }
+  }
+  &__toolbar {
+    align-items: center;
+    display: flex;
+  }
+  &__bar {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+  &__toggle-status {
+    align-items: center;
+    color: #0D1722;
+    cursor: pointer;
+    display: flex;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 500;
+    font-size: 12px;
+    height: 30px;
+    padding: 0 4px;
+    .iov-icon-arrow-down, .iov-icon-arrow-up {
+      font-size: 14px;
+      margin-top: 2px;
+    }
+  }
+  &__row {
+    position: relative;
+    .search-table__action-bar {
+      align-items: center;
+      bottom: 0;
+      display: flex;
+      top: 0;
+      right: 0;
+      position: absolute;
+    }
+  }
+}
+
+.inner-tabs {
+  &__title-main {
+    line-height: 22px;
+    margin-bottom: 12px;
+  }
+  &__title {
+    color: $--color-text-7;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 600;
+    font-size: 16px;
+  }
+  &__sub-title {
+    margin-left: 8px;
+    color: $--color-text-2;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 12px;
+  }
+  &__module {
+    background: #FFFFFF;
+    border-radius: 8px;
+    margin-bottom: 10px;
+    padding: 16px;
+    .iov-pro-form {
+      .iov-pro-form__form-item > label {
+        overflow: hidden;
+        padding: 0;
+        white-space: nowrap;
+      }
+    }
+    .el-tabs {
+      &__content {
+        overflow: visible;
+      }
+      &__nav-wrap::after {
+        display: none;
+      }
+      &__item {
+        font-size: 14px;
+      }
+    }
+    .search-table {
+      &__module {
+        padding: 0;
+      }
+      &__action-bar {
+        bottom: 12px;
+        top: auto;
+      }
+    }
+    &:last-child {
+      margin-bottom: 0;
+      padding-top: 0;
+    }
+  }
+  &__bar {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 14px;
+  }
+}
+
+.outer-tabs {
+  &__tabs {
+    .el-tabs {
+      &__header {
+        background: #FFFFFF;
+        border-radius: 8px 8px 0 0;
+        margin: 0;
+        padding: 0 16px;
+      }
+      &__item {
+        font-size: 14px;
+      }
+    }
+    .search-table {
+      &__module {
+        &:first-child {
+          border-radius: 0 0 8px 8px;
+        }
+      }
+      &__title-main {
+        display: none;
+      }
+    }
+  }
+}

package/src/packages/theme/src/space.scss

@@ -0,0 +1,12 @@
+.iov-pro-space {
+  display: flex;
+  &.horizontal {
+    flex-direction: row;
+  }
+  &.vertical {
+    flex-direction: column;
+  }
+  &__item {
+    flex-shrink: 0;
+  }
+}

package/src/packages/theme/src/sub-title.scss

@@ -0,0 +1,47 @@
+@import "./common/color.scss";
+
+.iov-pro-sub-title {
+  margin-bottom: 12px;
+  font-family: PingFangSC, PingFang SC;
+  display: flex;
+  align-items: center;
+}
+.iov-pro-sub-title__icon {
+  margin-right: 8px;
+  width: 18px;
+  height: 18px;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+.iov-pro-sub-title__name {
+  margin-right: 8px;
+  font-weight: 600;
+  font-size: 14px;
+  color: $--color-text-6;
+}
+.iov-pro-sub-title__desc {
+  margin-right: 8px;
+  font-size: 13px;
+  color: $--color-text-4;
+}
+.iov-pro-sub-title__help {
+  margin-right: 8px;
+  .el-link {
+    margin-right: 8px;
+    font-size: 13px;
+    height: 26px;
+    color: #2F48FF;
+    line-height: 26px;
+    padding: 0 4px;
+    border-radius: 4px;
+    transition: all .2s ease;
+    .iconfont {
+      font-size: 12px;
+      margin-right: 4px;
+    }
+    &:not(.is-disabled):hover {
+      background: rgba(42, 104, 255, 0.08);
+    }
+  }
+}

package/src/packages/theme/src/submit-module.scss

@@ -0,0 +1,13 @@
+.iov-pro-submit-module {
+  padding: 16px 0 20px;
+  border-radius: 0px 0px 8px 8px;
+  position: fixed;
+  left: 228px;
+  right: 20px;
+  bottom: 0;
+  z-index: 9;
+  font-size: 0;
+  background: #fff;
+  text-align: center;
+  box-shadow: 0 0 12px 0 rgba(196, 198, 207, .2);
+}

package/src/packages/theme/src/table.scss

@@ -0,0 +1,129 @@
+@import "./common/color.scss";
+
+.iov-pro-table {
+  &__table {
+    .is-right .iov-pro-space.horizontal {
+      justify-content: flex-end;
+    }
+    .is-center .iov-pro-space.horizontal {
+      justify-content: center;
+    }
+  }
+
+  &__pagination {
+    text-align: right;
+    padding: 12px 0 0;
+  }
+
+  &-filter {
+    &__icon {
+      border-radius: 2px;
+      color: $--color-fill-4;
+      cursor: pointer;
+      display: block;
+      font-size: 14px;
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      text-align: center;
+      &.is-actived {
+        color: $--color-primary-6;
+        &:hover {
+          color: $--color-primary-6;
+        }
+      }
+      &:hover {
+        background-color: $--color-fill-3;
+        color: $--color-fill-5;
+      }
+    }
+    &__operation {
+      border-top: 1px solid $--color-line-1;
+      text-align: right;
+      padding: 8px;
+    }
+    &__checkbox-group {
+      padding: 4px;
+    }
+    &__checkbox {
+      box-sizing: border-box;
+      line-height: 32px;
+      padding: 0 12px;
+      width: 100%;
+      &:hover {
+        background-color: $--color-primary-1;
+      }
+    }
+    &__popper {
+      margin-top: 4px;
+      padding: 0;
+      min-width: 120px;
+    }
+  }
+
+  &-search {
+    &__icon {
+      border-radius: 2px;
+      color: $--color-fill-4;
+      cursor: pointer;
+      display: inline-block;
+      font-size: 14px;
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      text-align: center;
+      &.is-actived {
+        color: $--color-primary-6;
+        &:hover {
+          color: $--color-primary-6;
+        }
+      }
+      &:hover {
+        background-color: $--color-fill-3;
+        color: $--color-fill-5;
+      }
+    }
+    &__operation {
+      padding: 8px;
+      text-align: right;
+    }
+    &__input-wrapper {
+      padding: 8px 8px 0;
+    }
+    &__popper {
+      margin-top: 4px;
+      padding: 0;
+    }
+  }
+
+  &-sort {
+    box-sizing: border-box;
+    color: $--color-fill-4;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    width: 20px;
+    height: 20px;
+    padding: 3px;
+    .iovprofont {
+      display: block;
+      height: 50%;
+      &.iov-icon-sort-up {
+        line-height: 14px;
+      }
+      &.iov-icon-sort-down {
+        line-height: 2px;
+      }
+    }
+    &.ascending {
+      .iov-icon-sort-up {
+        color: $--color-primary-6;
+      }
+    }
+    &.descending {
+      .iov-icon-sort-down {
+        color: $--color-primary-6;
+      }
+    }
+  }
+}

package/src/packages/theme/src/toolbar.scss

@@ -0,0 +1,109 @@
+@import "./common/color.scss";
+
+.iov-pro-toolbar {
+  align-items: center;
+  display: flex;
+  &__icon {
+    background-color: #F2F3F5;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 16px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    color: $--color-text-6;
+    display: block;
+    width: 26px;
+    height: 26px;
+    text-align: center;
+    line-height: 26px;
+    img {
+      width: 16px;
+      height: 16px;
+      vertical-align: middle;
+    }
+    &:hover {
+      color: $--color-primary-6;
+    }
+    &:active, &.is-active {
+      color: $--color-primary-7;
+    }
+  }
+  &__dropdown-menu {
+    padding: 4px;
+    .el-dropdown-menu__item {
+      font-size: 13px;
+      line-height: 32px;
+      padding: 0 12px;
+      &:hover {
+        background-color: #F6F7F8;
+        color: $--color-text-6;
+      }
+      &:active {
+        font-weight: 600;
+      }
+    }
+  }
+  &__setting {
+    &-popper {
+      padding: 0;
+    }
+    &-header {
+      align-items: center;
+      border-bottom: 1px solid $--color-line-1;
+      display: flex;
+      padding: 0 16px;
+      height: 42px;
+      justify-content: space-between;
+    }
+    &-body {
+      overflow: auto;
+      padding: 4px;
+      max-height: 190px;
+    }
+    &-item {
+      align-items: center;
+      border-radius: 2px;
+      display: flex;
+      height: 32px;
+      justify-content: space-between;
+      padding: 0 12px;
+      &:hover {
+        background: #F6F7F8;
+      }
+      &--drag {
+        color: $--color-fill-5;
+        cursor: grab;
+        font-size: 16px;
+        &.undraggable {
+          cursor: not-allowed;
+        }
+      }
+      .el-checkbox {
+        align-items: center;
+        display: flex;
+        .el-checkbox__input {
+          height: 16px;
+        }
+        .el-checkbox__label {
+          max-width: 102px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        &.is-disabled {
+          .el-checkbox__label {
+            color: $--color-text-7;
+          }
+        }
+      }
+    }
+    &-footer {
+      align-items: center;
+      border-top: 1px solid $--color-line-1;
+      display: flex;
+      padding: 0 8px;
+      height: 42px;
+      justify-content: flex-end;
+    }
+  }
+}

package/src/packages/toolbar/index.js

@@ -0,0 +1,7 @@
+import Toolbar from './src/main.vue'
+
+Toolbar.install = function(Vue) {
+  Vue.component(Toolbar.name, Toolbar)
+}
+
+export default Toolbar

package/src/packages/toolbar/src/main.vue

@@ -0,0 +1,126 @@
+<script>
+import Space from '@/packages/space'
+import functionEval from '@/utils/function-eval'
+import { getComponentNames } from '@/utils/config-center'
+import ToolbarSetting from './setting.vue'
+import ToolbarZoom from './zoom.vue'
+import ToolbarStyle from './style.vue'
+
+const CONFIG_NAME = {
+  style: '样式',
+  refresh: '刷新',
+  zoom: '密度',
+  setting: '设置'
+}
+
+export default {
+  name: 'IovProToolbar',
+  props: {
+    config: {
+      type: Array,
+      default: () => ['style', 'refresh', 'zoom', 'setting']
+    },
+    table: {
+      type: [Object, Function],
+      default: null
+    },
+    placement: {
+      type: String,
+      default: 'top'
+    }
+  },
+  data() {
+    return {
+      selectAll: false,
+      settingVisible: false,
+      tableColumns: [],
+      checkedColumns: []
+    }
+  },
+  methods: {
+    /**
+     * 点击工具栏
+     * @param  {String} type 当前配置类型
+     * @time 2024-10-30 10:58:10
+     */
+    onClickToolbar(type) {
+      functionEval(type.onClick)()
+    },
+
+    /**
+     * 重新加载表格数据
+     * @param  {Object} vm 当前组件实例
+     * @time 2024-10-30 14:27:40
+     */
+    reloadTableData() {
+      // 获取IovProTable示例
+      const iovProTable = this.table instanceof Function ? this.table() : this.table
+      // 表格组件方法刷新数据
+      iovProTable?.refresh()
+    }
+  },
+  render() {
+    const [Tooltip] = getComponentNames(['tooltip'])
+    return (
+      <div class='iov-pro-toolbar'>
+        <Space direction='horizontal' space='8px'>
+          {
+            this.config?.map(item => {
+              // 如果当前是调整密度
+              if (['style'].includes(item)) {
+                return (
+                  <ToolbarStyle
+                    placement={this.placement}
+                    table={this.table}
+                  />
+                )
+              }
+              // 如果当前是刷新
+              if (['refresh'].includes(item)) {
+                return (
+                  <Tooltip effect='dark' content={CONFIG_NAME[item]} placement={this.placement}>
+                    <i class='iov-pro-toolbar__icon iov-icon-refresh' onClick={this.reloadTableData} />
+                  </Tooltip>
+                )
+              }
+              // 如果当前是调整密度
+              if (['zoom'].includes(item)) {
+                return (
+                  <ToolbarZoom
+                    placement={this.placement}
+                    table={this.table}
+                  />
+                )
+              }// 如果当前是设置表头字段
+              if (['setting'].includes(item)) {
+                return (
+                  <ToolbarSetting
+                    placement={this.placement}
+                    table={this.table}
+                  />
+                )
+              }
+              // 如果是自定义配置
+              // 如果当前是icon字体图标
+              if (item.icon) {
+                return (
+                  <Tooltip effect='dark' disabled={!item.name} content={item.name} placement={this.placement}>
+                    <i class={['iov-pro-toolbar__icon', item.icon].join(' ')} onClick={this.onClickToolbar.bind(this, item)} />
+                  </Tooltip>
+                )
+              }
+              return (
+                <Tooltip effect='dark' disabled={!item.name} content={item.name} placement={this.placement}>
+                  <i class='iov-pro-toolbar__icon' onClick={this.onClickToolbar.bind(this, item)}>
+                    <img src={item.image} />
+                  </i>
+                </Tooltip>
+              )
+            })
+          }
+        </Space>
+      </div>
+    )
+  }
+}
+</script>