@aochuang/common 1.0.0 → 1.0.126

package/components/form/index.js

@@ -0,0 +1,24 @@
+import Form from './form.vue'
+import FormGroup from './form-group.vue'
+import FormRow from './form-row.vue'
+import FormCell from './form-cell.vue'
+
+Form.install = (Vue) => {
+  Vue.component(Form.name, Form)
+  Vue.component(FormGroup.name, FormGroup)
+  Vue.component(FormRow.name, FormRow)
+  Vue.component(FormCell.name, FormCell)
+}
+
+Form.FormGroup = FormGroup
+Form.FormRow = FormRow
+Form.FormCell = FormCell
+
+export {
+  Form,
+  FormGroup,
+  FormRow,
+  FormCell
+}
+
+export default Form

package/components/grid/grid-card-view/grid-card-view.vue

@@ -0,0 +1,157 @@
+<template>
+  <div
+    v-if="currentViewName === 'card'"
+    class="ui-grid-card-view"
+  >
+    <ui-brick-wall
+      ref="brickWall"
+      height="100%"
+      :id-field="idField"
+      :data="data"
+      :span="span"
+      :base-width="baseWidth"
+      :multiple="multiple"
+      :selectable="multiple ? true : selectable"
+      @selection-change="handleSelectionChange"
+      @select-change="handleSelectChange"
+    >
+      <template slot="item" slot-scope="scope">
+        <slot name="item" :row="scope.data" :selected="scope.selected" :toolbar="toolbar"></slot>
+      </template>
+    </ui-brick-wall>
+  </div>
+</template>
+<script>
+import UiBrickWall from '../../brick-wall'
+import UiGridRowToolbar from '../grid-toolbar/grid-row-toolbar'
+
+export default {
+  name: 'UiGridCardView',
+  inject: ['UiGrid'],
+  components: {
+    UiBrickWall,
+    UiGridRowToolbar
+  },
+  props: {
+    span: {
+      type: Number
+    },
+    baseWidth: {
+      type: Number
+    }
+  },
+  computed: {
+    idField () {
+      return this.UiGrid.idField
+    },
+    rowToolbar () {
+      return this.UiGrid.rowToolbar
+    },
+    currentViewName () {
+      return this.UiGrid.currentViewName
+    },
+    multiple () {
+      return this.UiGrid.multiple
+    },
+    selectable () {
+      return this.UiGrid.selectable
+    },
+    data () {
+      return this.UiGrid.tableData
+    },
+    toolbar () {
+      if (!this.rowToolbar || !this.rowToolbar.length) {
+        return null
+      }
+      return {
+        functional: true,
+        props: {
+          row: {
+            type: Object,
+            required: true
+          }
+        },
+        render: (h, c) => {
+          return h(UiGridRowToolbar, {
+            props: {
+              row: c.props.row,
+              moreIconDir: 'horizon',
+              moreIconType: 'button',
+              items: this.rowToolbar.map(v => {
+                return {
+                  ...v,
+                  more: true
+                }
+              })
+            }
+          })
+        }
+      }
+    }
+  },
+  created () {
+    this.UiGrid.addViewPanel({
+      label: '卡片',
+      name: 'card',
+      icon: `
+        <svg t="1717655840748" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25904" width="200" height="200">
+          <path d="M824 160c22.092 0 40 17.908 40 40v624c0 22.092-17.908 40-40 40H200c-22.092 0-40-17.908-40-40V200c0-22.092 17.908-40 40-40z m-344 382H240V784h240v-242z m304 0h-224V784h224v-242zM480 240H240v222h240V240z m304 0h-224v222h224V240z" fill="currentColor"></path>
+        </svg>
+      `
+    })
+  },
+  watch: {
+    currentViewName () {
+      if (this.UiGrid.currentViewName === 'card') {
+        this.UiGrid.$control = this
+      }
+    },
+    data () {
+      this.$refs.brickWall && this.$refs.brickWall.clearSelection()
+    }
+  },
+  mounted () {
+    if (this.UiGrid.currentViewName === 'card') {
+      this.UiGrid.$control = this
+    }
+  },
+  methods: {
+    getSortColumns () {
+      return []
+    },
+    clearSelection () {
+      this.$refs.brickWall && this.$refs.brickWall.clearSelection()
+    },
+    toggleRowSelection(row, isSelected) {
+      this.$refs.brickWall && this.$refs.brickWall.toggleSelection(row, isSelected)
+    },
+    setCurrentRow(row) {
+    },
+    setCheckboxRow (rows, isSelected = true) {
+      this.$refs.brickWall && this.$refs.brickWall.toggleSelection(rows, isSelected)
+    },
+    setRadioRow (row) {
+      this.$refs.brickWall && this.$refs.brickWall.toggleSelection(row, isSelected)
+    },
+    handleSelectionChange (evt) {
+      this.UiGrid.handleCardViewSelectionChange(evt)
+    },
+    handleSelectChange (evt) {
+      this.UiGrid.handleSelectChange(evt ? {
+        row: evt.item
+      } : null)
+    }
+  },
+  beforeDestroy () {
+    this.UiGrid.removeViewPanel('card')
+  }
+}
+</script>
+<style lang="less">
+.ui-grid-card-view{
+  height: 100%;
+  overflow: auto;
+  padding-right: 18px;
+  margin-right: -24px;
+}
+</style>

package/components/grid/grid-column.vue

@@ -0,0 +1,137 @@
+<template>
+  <vxe-column
+    :field="prop"
+    :title="label"
+    :width="width"
+    :min-width="minWidth"
+    :fixed="innerFixed"
+    :align="align"
+    :sortable="sortable"
+    :tree-node="treeNode"
+    :footer-class-name="allowSummary ? 'is-show-summary' : null"
+    :header-class-name="headerClassName"
+  >
+    <template slot="header" slot-scope="scope">
+      <slot name="header">
+        <div class="ui-grid-column__main">
+          <div class="ui-grid-column__main-left">
+            <slot name="icon"></slot>
+            <span class="ui-grid-column__title" :title="scope.column.title">
+              {{ scope.column.title }}
+            </span>
+            <span class="ui-grid-column__tips" v-if="$slots.tips">
+              <slot name="tips"></slot>
+            </span>
+          </div>
+          <slot name="header-append"></slot>
+        </div>
+      </slot>
+    </template>
+    <template slot-scope="scope">
+      <slot v-bind="scope" :row-hover-active="hoverRow === scope.row">
+        {{ scope.row[scope.column.field] }}
+      </slot>
+    </template>
+  </vxe-column>
+</template>
+<script>
+import { Column } from 'vxe-table'
+
+export default {
+  name: 'UiGridColumn',
+  components: {
+    VxeColumn: Column
+  },
+  inject: ['UiGrid'],
+  props: {
+    label: {
+      type: String
+    },
+    prop: {
+      type: String
+    },
+    width: {
+      type: [Number, String]
+    },
+    minWidth: {
+      type: String
+    },
+    align: {
+      type: String
+    },
+    fixed: {
+      type: [String, Boolean]
+    },
+    sortable: {
+      type: Boolean
+    },
+    allowSummary: {
+      type: Boolean,
+      default: false
+    },
+    formatSummary: {
+      type: Function
+    },
+    treeNode: {
+      type: Boolean,
+      default: false
+    },
+    headerClassName: {
+      type: String
+    }
+  },
+  computed: {
+    innerFixed () {
+      if (typeof this.fixed === 'string') {
+        return this.fixed
+      }
+      return this.fixed ? 'left' : null
+    },
+    hoverRow () {
+      return this.UiGrid.hoverRow
+    }
+  },
+  created () {
+    this.UiGrid.cacheColumns.push(this.$props)
+  },
+  beforeDestroy () {
+    let index = -1
+    this.UiGrid.cacheColumns.some((v, i) => {
+      if (v === this.$props) {
+        index = i
+        return true
+      }
+    })
+    if (index >= 0) {
+      this.UiGrid.cacheColumns.splice(index, 1)
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-grid-column__tips{
+  display: inline-block;
+  vertical-align: top;
+  height: 20px;
+  line-height: 20px;
+  margin-left: 3px;
+}
+.ui-grid-column__main{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.ui-grid-column__main-left{
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: row;
+}
+.ui-grid-column__title{
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/components/grid/grid-filter/grid-filter-group.vue

@@ -0,0 +1,41 @@
+<script>
+import { unique } from './util'
+
+export default {
+  name: 'UiGridFilterGroup',
+  inject: ['UiGridFilter'],
+  provide () {
+    return {
+      UiGridFilterGroup: this
+    }
+  },
+  props: {
+    label: {
+      type: String
+    },
+    labelWidth: {
+      type: String
+    }
+  },
+  computed: {
+    item() {
+      return {
+        id: this.id,
+        props: this.$props
+      }
+    }
+  },
+  created() {
+    this.id = unique()
+    this.UiGridFilter.addGroup(this.item)
+  },
+  beforeDestroy() {
+    this.UiGridFilter.removeGroup(this.id)
+  },
+  render(h) {
+    return h('div', {
+      class: 'ui-grid-filter-group'
+    }, [this.$scopedSlots.default ? this.$scopedSlots.default() : null])
+  }
+}
+</script>

package/components/grid/grid-filter/grid-filter-item.vue

@@ -0,0 +1,68 @@
+<script>
+import { unique } from './util'
+
+export default {
+  name: 'UiGridFilterItem',
+  inject: {
+    UiGridFilter: {
+      from: 'UiGridFilter'
+    },
+    UiGridFilterGroup: {
+      from: 'UiGridFilterGroup',
+      default: null
+    }
+  },
+  props: {
+    label: {
+      type: String
+    },
+    prop: {
+      type: String
+    },
+    more: {
+      type: Boolean,
+      default: false
+    },
+    show: {
+      type: Boolean,
+      default: true
+    },
+    operater: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      data: {
+        key: 0
+      }
+    }
+  },
+  computed: {
+    item() {
+      return {
+        id: this.id,
+        props: this.$props,
+        data: this.data,
+        groupId: this.UiGridFilterGroup ? this.UiGridFilterGroup.id : null,
+        render: () => {
+          return this.$scopedSlots.default()
+        }
+      }
+    }
+  },
+  created() {
+    this.id = unique()
+    this.UiGridFilter.addItem(this.item)
+  },
+  beforeDestroy() {
+    this.UiGridFilter.removeItem(this.id)
+  },
+  updated() {
+    this.data.key++
+  },
+  render() {
+    return null
+  }
+}
+</script>

package/components/grid/grid-filter/grid-filter.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="ui-grid-filter" style="display: none;">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiGridFilter',
+  provide() {
+    return {
+      UiGridFilter: this
+    }
+  },
+  inject: ['UiGrid'],
+  props: {
+    value: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      items: [],
+      groups: []
+    }
+  },
+  created() {
+    this.UiGrid.filterProps.items = this.items
+    this.UiGrid.filterProps.groups = this.groups
+    this.UiGrid.filterProps.value = this.value
+    this.$watch(() => {
+      return this.UiGrid.filterProps.value
+    }, () => {
+      this.$emit('input', this.UiGrid.filterProps.value)
+    })
+  },
+  methods: {
+    handleRenderItem (item) {
+      return {
+        functional: true,
+        render: (h, c) => {
+          return item.render(h, c)
+        }
+      }
+    },
+    addItem (item) {
+      if (!item || !item.id) {
+        return
+      }
+      let index = -1
+      this.items.some((v, i) => {
+        if (v.id === item.id) {
+          index = i
+          return true
+        }
+      })
+      if (index >= 0) {
+        this.items.splice(index, 1, item)
+      } else {
+        this.items.push(item)
+      }
+    },
+    removeItem (id) {
+      let index = -1
+      this.items.some((v, i) => {
+        if (v.id !== id) {
+          index = i
+          return true
+        }
+      })
+      if (index < 0) {
+        return
+      }
+      this.items.splice(index, 1)
+    },
+    addGroup (group) {
+      if (!group || !group.id) {
+        return
+      }
+      let index = -1
+      this.groups.some((v, i) => {
+        if (v.id === group.id) {
+          index = i
+          return true
+        }
+      })
+      if (index >= 0) {
+        this.groups.splice(index, 1, group)
+      } else {
+        this.groups.push(group)
+      }
+    },
+    removeGroup (id) {
+      let index = -1
+      this.groups.some((v, i) => {
+        if (v.id !== id) {
+          index = i
+          return true
+        }
+      })
+      if (index < 0) {
+        return
+      }
+      this.groups.splice(index, 1)
+    }
+  }
+}
+</script>
+<style>
+.bi-toolbar{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

package/components/grid/grid-filter/util.js

@@ -0,0 +1,7 @@
+export const unique = (() => {
+  let number = 162703055217
+  return () => {
+    number++
+    return 'unique_' + number
+  }
+})()

package/components/grid/grid-filter-operate/grid-filter-operate-item.vue

@@ -0,0 +1,55 @@
+<script>
+import { unique } from '../../../utils/util'
+
+export default {
+  name: 'UiGridFilterOperateItem',
+  inject: ['UiGridFilterOperate'],
+  props: {
+    label: {
+      type: String
+    },
+    value: {
+      type: String
+    },
+    divided: {
+      type: Boolean
+    },
+    type: {
+      type: String
+    },
+    icon: {
+      type: String
+    }
+  },
+  computed: {
+    props () {
+      return {
+        label: this.label,
+        value: this.value,
+        type: this.type,
+        icon: this.icon,
+        divided: this.divided
+      }
+    }
+  },
+  created () {
+    this.id = unique()
+    this.UiGridFilterOperate.addOption({
+      id: this.id,
+      props: this.props,
+      click: (evt) => {
+        this.$emit('click', evt)
+      },
+      render: () => {
+        return this.$slot.default ? this.$slot.default() : null
+      }
+    })
+  },
+  render () {
+    return null
+  },
+  beforeDestroy () {
+    this.UiGridFilterOperate.removeOption(this.id)
+  }
+}
+</script>

package/components/grid/grid-filter-operate/grid-filter-operate.vue

@@ -0,0 +1,46 @@
+<script>
+export default {
+  name: 'UiGridFilterOperate',
+  props: {
+    label: {
+      type: String
+    }
+  },
+  inject: ['UiGrid'],
+  provide () {
+    return {
+      UiGridFilterOperate: this
+    }
+  },
+  created () {
+    this.UiGrid.filterOperateProps.items = []
+  },
+  render (h) {
+    return h('div', this.$slots.default)
+  },
+  methods: {
+    addOption (option) {
+      if (!option.id) {
+        throw new Error('缺少唯一id')
+      }
+      if (this.UiGrid.filterOperateProps.items.some(v => v.id === option.id)) {
+        return
+      }
+      this.UiGrid.filterOperateProps.items.push(option)
+    },
+    removeOption (id) {
+      let index = -1
+      this.UiGrid.filterOperateProps.items.some((v, i) => {
+        if (v.id === id) {
+          index = i
+          return true
+        }
+      })
+      if (index < 0) {
+        return
+      }
+      this.UiGrid.filterOperateProps.items.splice(index, 1)
+    }
+  }
+}
+</script>

package/components/grid/grid-sort/grid-sort-proxy.js

@@ -0,0 +1,27 @@
+export default {
+  name: 'UiGridSortProxy',
+  inject: ['UiGrid'],
+  props: {
+    items: {
+      type: Array
+    },
+    value: {
+      type: Object
+    }
+  },
+  watch: {
+    value(val) {
+      this.UiGrid.sortProps.value = val
+    },
+    items(val) {
+      this.UiGrid.sortProps.items = val
+    }
+  },
+  created() {
+    this.UiGrid.sortProps.items = this.items
+    this.UiGrid.sortProps.value = this.value
+  },
+  render() {
+    return null
+  }
+}