swordpass-ui 1.0.0

package/packages/TableColumn/index.js

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

package/packages/TableColumn/src/main.vue

@@ -0,0 +1,177 @@
+<template>
+  <el-table-column
+    v-if="!hiddenCol"
+    :type="type"
+    :align="align"
+    :prop="prop"
+    :label="label"
+    :width="widthVal"
+    :min-width="minWidth"
+    :index="index"
+    :sortable="columnSortable"
+    :filters="filters"
+    :filtered-value="filteredValue"
+    :filter-method="filterMethod"
+    :column-key="prop"
+    :formatter="columnFormatter"
+    :render-header="columnRenderHeader"
+    :show-overflow-tooltip="showOverflowTooltip"
+    :fixed="fixed"
+  ></el-table-column>
+</template>
+<script>
+  export default {
+    name: 'ClTableColumn',
+    componentName: 'ClTableColumn',
+    props: {
+      type: {
+        type: String,
+        validator: (val) => {
+          return ['selection', 'index', 'expand'].indexOf(val) !== -1
+        },
+      },
+      align: {
+        default: 'center',
+        validator: (val) => {
+          return ['left', 'center', 'right'].indexOf(val) !== -1
+        },
+      },
+      prop: String,
+      label: String,
+      width: String,
+      minWidth: String,
+      index: [Number, Function],
+      sortable: {
+        type: Boolean,
+        default: false,
+      },
+      filters: Array,
+      showOverflowTooltip: {
+        type: Boolean,
+        default: false,
+      },
+      fixed: {
+        type: [Boolean, String],
+        default: false,
+        validator: (val) => [true, false, 'left', 'right'].indexOf(val) != -1,
+      },
+      formatter: Function,
+      renderHeader: Function,
+      hidden: {
+        type: Boolean,
+        default: false,
+      },
+      required: {
+        type: Boolean,
+        default: false,
+      },
+      filteredValue: Array,
+      filterMethod: Function,
+    },
+    data() {
+      return {
+        hiddenCol: null,
+        formatterObj: null,
+        renderHeaderObj: null,
+        curWidth: null,
+      }
+    },
+    computed: {
+      hiddenVal() {
+        return this.require
+          ? false
+          : this.hiddenCol != null
+          ? this.hiddenCol
+          : this.hidden
+      },
+      widthVal() {
+        return this.curWidth ? this.curWidth : this.width
+      },
+      columnSortable: {
+        get() {
+          return this.sortable ? 'custom' : this.sortable
+        },
+      },
+      columnFormatter: {
+        get() {
+          if (
+            this.formatter ||
+            this.formatterObj ||
+            !this.$scopedSlots.default
+          ) {
+            let formatter = this.formatter ? this.formatter : this.formatterObj
+            if (this.$scopedSlots.default) {
+              /* eslint-disable */
+              this.formatterObj = (row, column, cellValue, index) => {
+                return this.$scopedSlots.default({
+                  row,
+                  column,
+                  cellValue: formatter(row, column, cellValue, index),
+                  index,
+                })
+              }
+              return this.formatterObj
+            } else {
+              return formatter
+            }
+          } else {
+            /* eslint-disable */
+            this.formatterObj = (row, column, cellValue, index) => {
+              return this.$scopedSlots.default({
+                row,
+                column,
+                cellValue,
+                index,
+              })
+            }
+            /* eslint-disable */
+            return this.formatterObj
+          }
+        },
+      },
+      columnRenderHeader: {
+        get() {
+          if (
+            this.renderHeader ||
+            this.renderHeaderObj ||
+            !this.$scopedSlots.header
+          ) {
+            return this.renderHeader ? this.renderHeader : this.renderHeaderObj
+          } else {
+            const headerCB = this.$scopedSlots.header
+            /* eslint-disable */
+            this.renderHeaderObj = (h, { column, $index }) => {
+              return headerCB({ column, $index })
+            }
+            /* eslint-disable */
+            return this.renderHeaderObj
+          }
+        },
+      },
+    },
+    created() {
+      this.$on('customColumn', (columns) => {
+        const column = columns.find(
+          (c) =>
+            (this.prop && this.prop == c.key) ||
+            (!this.prop && this.label && this.label == c.value)
+        )
+        if (column && !column.checked) {
+          this.hiddenCol = true
+        } else {
+          this.hiddenCol = null
+        }
+
+        if (column && column.width && this.width !== column.width) {
+          const oldHiddenCol = this.hiddenCol
+          this.curWidth = column.width
+          this.hiddenCol = true
+          // 调整宽度时内容可能没有适配新宽度，通过先隐藏再显示列的方式实现适配
+          this.$nextTick(() => {
+            this.hiddenCol = oldHiddenCol
+          })
+        }
+      })
+    },
+  }
+</script>

package/packages/TableSearchField/index.js

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

package/packages/TableSearchField/src/main.vue

@@ -0,0 +1,334 @@
+<template>
+  <component
+    :is="panelIsFlexLayout ? 'div' : 'el-col'"
+    :class="[
+      'search-field__container',
+      panelIsFlexLayout ? 'search-field__container-flex' : '',
+    ]"
+    :style="containerStyle"
+    :span="colSpanVal"
+  >
+    <div
+      v-if="!hideLabel"
+      :style="{ width: finalLabelWidth + 'px' }"
+      class="field-label-panel"
+      :class="{ 'is-align-right': isAlignRight }"
+    >
+      <label v-if="label" v-ellipsis :title="label" class="search-field-label">
+        {{ label }}
+      </label>
+    </div>
+    <div
+      :style="{ width: `calc(100% - ${inputDivJudgeWidth}px)` }"
+      class="field-input-panel"
+      :class="{ 'unset-width': isAlignRight }"
+    >
+      <template v-if="!hasDefaultSlot">
+        <cl-input
+          v-if="type == 'text'"
+          v-model="data"
+          :placeholder="placeholder"
+          :display-style="finalDisplayStyle"
+          :prefix-icon="prefixIcon"
+          :suffix-icon="suffixIcon"
+          @keydown.enter.native="textInputEnter"
+        ></cl-input>
+        <cl-date
+          v-if="type == 'date'"
+          v-model="data"
+          :value-format="valueFormat"
+          :placeholder="placeholder"
+          :default-time="defaultTime"
+          :display-style="finalDisplayStyle"
+        />
+        <el-date-picker
+          v-if="['datetimerange', 'daterange'].includes(type)"
+          v-model="data"
+          size="small"
+          :type="type"
+          :default-time="['00:00:00', '23:59:59']"
+          :value-format="valueFormat"
+          align="right"
+          :unlink-panels="unlinkPanels"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+        ></el-date-picker>
+        <cl-select
+          v-if="type == 'select'"
+          v-model="data"
+          :placeholder="placeholder"
+          :options="options"
+          :props="props"
+          :display-style="finalDisplayStyle"
+        ></cl-select>
+      </template>
+      <slot v-else></slot>
+    </div>
+  </component>
+</template>
+<script>
+  /* eslint-disable */
+  import emitter from '@/mixins/emitter.js'
+
+  export default {
+    name: 'ClTableSearchField',
+    componentName: 'ClTableSearchField',
+    mixins: [emitter],
+    props: {
+      value: [String, Number, Boolean, Object, Array],
+      defaultTime: {
+        type: String,
+        default: '00:00:00',
+      },
+      unlinkPanels: {
+        type: Boolean,
+        default: true,
+      },
+      isAlignRight: {
+        type: Boolean,
+        default: false,
+      },
+      span: {
+        type: Number,
+        default: 0,
+      },
+      prop: {
+        type: String,
+        required: true,
+      },
+      props: {
+        type: Object,
+        default: null,
+      },
+      operation: {
+        type: String,
+        default: 'LIKE',
+        validator: (value) =>
+          [
+            'EQUAL',
+            'EQUAL_IGNORE_CASE',
+            'LESS',
+            'GREAT',
+            'LESS_EQUAL',
+            'GREAT_EQUAL',
+            'NOT_EQUAL',
+            'LIKE',
+            'LEFT_LIKE',
+            'RIGHT_LIKE',
+            'IS_NULL',
+            'NOTNULL',
+            'IN',
+            'BETWEEN',
+          ].indexOf(value) != -1,
+      },
+      relation: {
+        type: String,
+        default: 'AND',
+        validator: (value) => ['AND', 'OR'].indexOf(value) != -1,
+      },
+      label: String,
+      type: {
+        type: String,
+        default: 'text',
+        validator: (value) =>
+          ['text', 'date', 'daterange', 'datetimerange', 'select'].indexOf(
+            value
+          ) != -1,
+      },
+      options: Array,
+      placeholder: {
+        type: String,
+        default() {
+          return `请输入${this.label}`
+        },
+      },
+      valueFormat: {
+        type: String,
+        default: 'yyyy-MM-dd HH:mm:ss',
+      },
+      hideLabel: {
+        type: Boolean,
+        default: false,
+      },
+      labelWidth: {
+        type: Number,
+        default: 0,
+      },
+      width: {
+        type: Number,
+        default: 0,
+      },
+      prefixIcon: String,
+      suffixIcon: String,
+      displayStyle: String,
+      enterToSearch: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        data: null,
+        colspan: 8,
+        panelDisplayStyle: null,
+        panelLabelWidth: 70,
+        panelIsFlexLayout: false, //面板是否流式布局
+        pickerOptions: {
+          shortcuts: [
+            {
+              text: '最近一周',
+              onClick(picker) {
+                const end = new Date()
+                const start = new Date()
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+                picker.$emit('pick', [start, end])
+              },
+            },
+            {
+              text: '最近一个月',
+              onClick(picker) {
+                const end = new Date()
+                const start = new Date()
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+                picker.$emit('pick', [start, end])
+              },
+            },
+            {
+              text: '最近三个月',
+              onClick(picker) {
+                const end = new Date()
+                const start = new Date()
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+                picker.$emit('pick', [start, end])
+              },
+            },
+          ],
+        },
+      }
+    },
+    computed: {
+      hasDefaultSlot() {
+        return this.$slots.default && this.$slots.default.length > 0
+      },
+      colSpanVal() {
+        return this.span > 0 ? this.span : this.colspan
+      },
+      finalLabelWidth() {
+        return this.labelWidth > 0 ? this.labelWidth : this.panelLabelWidth
+      },
+      inputDivJudgeWidth() {
+        return this.hideLabel
+          ? 0
+          : this.finalLabelWidth + (this.panelIsFlexLayout ? 0 : 30)
+      },
+      containerStyle() {
+        return this.width > 0 ? { width: `${this.width}px` } : ''
+      },
+      finalDisplayStyle() {
+        const partDisplayStyle =
+          this.span == 0
+            ? this.displayStyle
+            : this.displayStyle
+            ? this.displayStyle
+            : 'block'
+        return partDisplayStyle || this.panelDisplayStyle
+      },
+    },
+    watch: {
+      data: function(newVal) {
+        this.handleInputChange(newVal)
+      },
+      value: function(newVal) {
+        this.handleInputChange(newVal)
+      },
+    },
+    created() {
+      this.$on('input-reset', () => {
+        this.data = null
+      })
+      this.$on('panel-props', (m, n, o, d) => {
+        this.panelLabelWidth = m
+        this.colspan = n
+        this.panelIsFlexLayout = o
+        this.panelDisplayStyle = d
+      })
+    },
+    mounted() {
+      // 挂载完成后，将本实例注册到高级搜索面板对应的搜索条件列表中
+      this.dispatch('ClTableSearchPanel', 'field-loaded', [this])
+    },
+    methods: {
+      handleInputChange(inputVal) {
+        this.dispatch('ClTableSearchPanel', 'input-change', [
+          {
+            value: inputVal,
+            operation: this.operation,
+            relation: this.relation,
+          },
+          this.prop,
+        ])
+      },
+      textInputEnter() {
+        this.enterToSearch &&
+          this.dispatch('ClTableSearchPanel', 'search', [this])
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .search-field__container {
+    margin-bottom: 8px;
+    height: 32px;
+  }
+
+  .search-field__container-flex {
+    margin-right: 10px;
+    float: left;
+  }
+
+  .field-label-panel,
+  .field-input-panel {
+    display: inline-block;
+  }
+  .is-align-right {
+    text-align: right;
+    width: unset !important;
+  }
+  .unset-width {
+    width: unset !important;
+    max-width: unset !important;
+    margin-right: 20px;
+  }
+  .field-input-panel {
+    max-width: 500px;
+  }
+
+  .field-input-panel > .inputs {
+    display: block;
+  }
+
+  .field-input-panel > .inputs ::v-deep .el-input__inner {
+    border-radius: 0;
+  }
+
+  .search-field-label {
+    display: inline-block;
+    max-width: calc(100% - 10px);
+    line-height: 100%;
+
+    &::after {
+      content: ':';
+    }
+  }
+  ::v-deep .el-date-editor.el-input {
+    width: 100%;
+  }
+  ::v-deep {
+    .el-date-editor--daterange,
+    .el-date-editor--datetimerange {
+      width: 100% !important;
+    }
+  }
+</style>

package/packages/TableSearchPanel/index.js

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

package/packages/TableSearchPanel/src/main.vue

@@ -0,0 +1,149 @@
+<template>
+  <el-form v-form>
+    <div class="search-panel__container">
+      <component
+        :is="isFlexLayout ? 'div' : 'el-row'"
+        class="search-panel__row"
+        :class="{ 'search-field__row': isFlexLayout }"
+      >
+        <slot></slot>
+        <div
+          :class="{ 'flex-search__group': isFlexLayout }"
+          class="search-btn__wrap"
+        >
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-search"
+            @click="search"
+          >
+            搜索
+          </el-button>
+          <el-button size="small" icon="el-icon-refresh-left" @click="reset">
+            重置
+          </el-button>
+        </div>
+      </component>
+    </div>
+  </el-form>
+</template>
+<script>
+  import emitter from '@/mixins/emitter.js'
+
+  export default {
+    name: 'ClTableSearchPanel',
+    componentName: 'ClTableSearchPanel',
+    mixins: [emitter],
+    props: {
+      value: Object,
+      divide: {
+        type: Number,
+        default: 4,
+        validator: (value) => {
+          return value > 0 && value < 5
+        },
+      },
+      labelWidth: {
+        type: Number,
+        default: 70,
+      },
+      isFlexLayout: {
+        type: Boolean,
+        default: false,
+      },
+      displayStyle: String,
+    },
+    data() {
+      return {
+        fieldVms: [],
+        fieldArray: [],
+        formModelExpression: null,
+        data: {},
+      }
+    },
+    computed: {
+      calcSpan: {
+        get() {
+          return 24 / this.divide
+        },
+      },
+    },
+    created() {
+      if (this.$vnode.data.model && this.$vnode.data.model.expression) {
+        this.formModelExpression = this.$vnode.data.model.expression
+      }
+      this.$slots.default.forEach((v) => {
+        if (!v.componentOptions) {
+          return
+        }
+        this.fieldArray.push({ ...v.componentOptions.propsData })
+      })
+      this.$on('field-loaded', (ref) => {
+        // 搜索条件挂载完成后，添加其实例到数组中
+        this.fieldVms.push(ref)
+      })
+      this.$on('input-change', (obj, prop) => {
+        this.fieldArray = this.fieldArray.map((field) => {
+          return field.prop == prop ? { ...field, ...obj } : field
+        })
+      })
+      this.$on('search', () => this.search())
+    },
+    mounted() {
+      if (this.formModelExpression) {
+        this.$set(this.data, this.formModelExpression, this.value)
+      }
+      this.broadcast('ClTableSearchField', 'panel-props', [
+        this.labelWidth,
+        this.calcSpan,
+        this.isFlexLayout,
+        this.displayStyle,
+      ])
+    },
+    methods: {
+      search() {
+        this.$parent.$parent.$emit('advance-search', this.fieldArray)
+      },
+      reset() {
+        if (this.formModelExpression) {
+          Object.keys(this.data[this.formModelExpression]).forEach((key) => {
+            this.$set(this.data[this.formModelExpression], key, null)
+          })
+        }
+        this.fieldVms.forEach((vm) => {
+          vm.$emit('input-reset')
+        })
+        this.$nextTick(() => {
+          this.search()
+        })
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .search-panel__container {
+    width: 100%;
+    overflow-x: auto;
+  }
+  .search-panel__row {
+    min-width: 1280px;
+  }
+  .flex-search__group {
+    margin: 0 0 8px 0;
+    width: 140px;
+    display: inline-block;
+  }
+  .search-btn__wrap {
+    ::v-deep {
+      .el-button {
+        font-size: 14px;
+        i {
+          font-size: 16px;
+        }
+      }
+      .el-button--small {
+        padding: 7px 12px;
+      }
+    }
+  }
+</style>

package/packages/Tabs/index.js

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