@aochuang/common 1.0.0 → 1.0.1

package/components/form/form-group.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="ui-form-group" :class="[{'is-divided': divided, 'is-viewable': viewable}, 'ui-form-group--' + type]">
+    <div class="ui-form-group__head" v-if="label || $slots.label">
+      <div class="ui-form-group__head-left">
+        <div class="ui-form-group__head-item">
+          <h5 class="ui-form-group__title">
+            <slot name="label">{{label}}</slot>
+          </h5>
+        </div>
+        <div class="ui-form-group__head-item" v-if="$slots['head-prepend']">
+          <slot name="head-prepend"></slot>
+        </div>
+      </div>
+      <div class="ui-form-group__head-right">
+        <div class="ui-form-group__toolbar" v-if="$slots.toolbar">
+          <slot name="toolbar"></slot>
+        </div>
+      </div>
+    </div>
+    <div class="ui-form-group__body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiFormGroup',
+  inject: ['UiForm'],
+  props: {
+    label: {
+      type: String
+    },
+    divided: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    type () {
+      return this.UiForm.type
+    },
+    viewable () {
+      return this.UiForm.viewable
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-form-group{
+  &.is-divided{
+    border-bottom: 1px solid #eee;
+    padding-bottom: 10px;
+    margin-bottom: 18px;
+    &:last-child{
+      border-bottom: initial;
+      padding-bottom: initial;
+      margin-bottom: initial;
+    }
+  }
+}
+.ui-form-group__head{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.ui-form-group__head-item{
+  margin-right: 12px;
+}
+.ui-form-group__title{
+  font-weight: normal;
+  font-size: 14px;
+  margin: 0;
+  font-weight: bold;
+  display: inline-block;
+  cursor: pointer;
+}
+.ui-form-group__head-left{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .ui-form-group__head-item{
+    + .ui-form-group__head-item{
+      padding-left: 12px;
+      position: relative;
+      &:before {
+        content: '';
+        position: absolute;
+        height: 16px;
+        width: 1px;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        background-color: #ddd;
+      }
+    }
+  }
+}
+.ui-form-group--default{
+  padding-left: 20px;
+  padding-right: 20px;
+  margin-left: -20px;
+  margin-right: -20px;
+  &.is-divided{
+    border-bottom: 12px solid #f7f6f9;
+  }
+  .ui-form-group__head{
+    background: #fff;
+    border: 0;
+    padding-left: 0;
+    height: 24px;
+    line-height: 24px;
+  }
+  .ui-form-group__title {
+    font-weight: bold;
+  }
+  &:not(.is-viewable) {
+    .ui-form-group__head{
+      margin-bottom: 18px;
+    }
+  }
+  &.is-viewable {
+    .ui-form-group__head{
+      margin-bottom: 6px;
+    }
+  }
+}
+.ui-form-group--column{
+  .ui-form-group__head{
+    height: 34px;
+    line-height: 34px;
+    background-color: #f6f6f6;
+    padding: 0 12px;
+    border-radius: 3px;
+  }
+  .ui-form-group__body{
+    padding: 12px;
+  }
+}
+.ui-form-group__body{
+  &:after{
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+</style>

package/components/form/form-row.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-row class="ui-form-row" :class="{'is-full': isFull}" :gutter="gutter">
+    <slot></slot>
+  </el-row>
+</template>
+<script>
+import Row from 'element-ui/lib/row'
+import 'element-ui/lib/theme-chalk/row.css'
+
+export default {
+  name: 'UiFormRow',
+  components: {
+    ElRow: Row
+  },
+  props: {
+    isFull: {
+      type: Boolean
+    },
+    gutter: {
+      type: Number,
+      default: 40
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-form-row.el-row{
+  margin-bottom: 0;
+  margin: 0;
+  &.is-full {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    > .ui-form-cell{
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      > .el-form-item {
+        flex: 1;
+        min-height: 0;
+        > .el-form-item__content{
+          flex: 1;
+          min-height: 0;
+        }
+      }
+    }
+  }
+}
+</style>

package/components/form/form.vue

@@ -0,0 +1,256 @@
+<template>
+  <el-form
+    class="ui-form"
+    :class="[
+      {'has-toolbar': $slots.toolbar, 'is-stretch': stretch, 'is-fixed-height' : isFixedHeight, 'is-padding': padding, 'is-viewable': viewable},
+      'ui-form--' + type
+    ]"
+    ref="form"
+    :rules="mergeRules"
+    :model="model"
+    :label-width="labelWidth"
+    :validate-on-rule-change="false"
+    :label-position="labelPosition"
+    :style="style"
+    @submit.native.prevent
+  >
+    <div class="ui-form__main">
+      <slot></slot>
+    </div>
+    <div class="ui-form__toolbar" v-if="$slots.toolbar" :style="toolbarStyle">
+      <slot name="toolbar"></slot>
+    </div>
+  </el-form>
+</template>
+<script>
+import Form from 'element-ui/lib/form'
+import 'element-ui/lib/theme-chalk/form.css'
+
+export default {
+  name: 'UiForm',
+  provide () {
+    return {
+      UiForm: this
+    }
+  },
+  components: {
+    ElForm: Form
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'default', // default | split
+      validator (value) {
+        return ['default', 'split', 'column'].includes(value)
+      }
+    },
+    height: {
+      type: String
+    },
+    model: {
+      type: Object,
+      default: () => ({})
+    },
+    rules: {
+      type: Object,
+      default: () => ({})
+    },
+    stretch: {
+      type: Boolean,
+      default: false
+    },
+    padding: {
+      type: Boolean,
+      default: true
+    },
+    viewable: {
+      type: Boolean,
+      default: false
+    },
+    labelWidth: {
+      type: String,
+      default: '60px'
+    },
+    labelPosition: {
+      type: String,
+      default: 'left'
+    },
+    fixedToolbar: {
+      type: Boolean,
+      default: false
+    },
+    fixedToolbarOffset: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      toolbarRect: {},
+      dynamicRules: {}
+    }
+  },
+  computed: {
+    isFixedHeight () {
+      return !!this.height
+    },
+    style () {
+      const sy = {}
+      if (this.height) {
+        sy.height = this.height
+      }
+      return sy
+    },
+    toolbarStyle () {
+      if (!this.fixedToolbar) {
+        return
+      }
+      const marginBottom = this.fixedToolbarOffset + 'px'
+      return {
+        position: 'fixed',
+        left: this.toolbarRect.left + 'px',
+        width: this.toolbarRect.width + 'px',
+        bottom: this.toolbarRect.bottom + 'px',
+        marginBottom: marginBottom
+      }
+    },
+    mergeRules () {
+      const nextRules = {}
+      Object.keys(this.rules || {}).forEach(key => {
+        if (Array.isArray(this.rules[key])) {
+          nextRules[key] = [].concat(this.rules[key])
+        }
+      })
+      Object.keys(this.dynamicRules || {}).forEach(key => {
+        if (Array.isArray(this.dynamicRules[key])) {
+          if (nextRules[key]) {
+            nextRules[key] = nextRules[key].concat(this.dynamicRules[key])
+          } else {
+            nextRules[key] = [].concat(this.dynamicRules[key])
+          }
+        }
+      })
+      return nextRules
+    }
+  },
+  mounted () {
+    this.doLayout()
+    window.addEventListener('resize', this.handleWindowResize)
+  },
+  methods: {
+    handleWindowResize () {
+      this.doLayout()
+    },
+    /**
+     * 新增校验规则
+     * 比如有些场景是在组件内部配置的规则，如手机号组件，不是通过表单配置的
+    */
+    addValidateRule (name, rules) {
+      if (!name || !rules || !rules.length) {
+        return
+      }
+      this.$set(this.dynamicRules, name, rules)
+    },
+    removeValidateRule (name) {
+      this.$delete(this.dynamicRules, name)
+    },
+    validate () {
+      return new Promise((resolve, reject) => {
+        this.$refs.form.validate((result) => {
+          result ? resolve() : reject()
+        })
+      })
+    },
+    validateField (field) {
+      return new Promise((resolve, reject) => {
+        this.$refs.form.validateField(field, (result) => {
+          result ? resolve() : reject()
+        })
+      })
+    },
+    doLayout () {
+      if (!this.fixedToolbar) {
+        return
+      }
+      const formRect = this.$el.getBoundingClientRect()
+      const toolbarRect = {
+        left: formRect.left,
+        width: formRect.width,
+        bottom: formRect.bottom >= window.innerHeight ? 0 : window.innerHeight - formRect.bottom
+      }
+      this.toolbarRect = toolbarRect
+    },
+    clearValidate () {
+      this.$refs.form.clearValidate()
+    },
+    resetFields () {
+      this.$refs.form.resetFields()
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-dialog{
+  .ui-form{
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+  .ui-form__main{
+    flex: 1;
+    min-height: 0;
+  }
+}
+.ui-form{
+  position: relative;
+  min-height: 100%;
+  box-sizing: border-box;
+  &.has-toolbar{
+    padding-bottom: 63px;
+  }
+  &.is-stretch{
+    padding: 22px 0;
+    .ui-form-group{
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+  }
+  &.is-fixed-height{
+    display: flex;
+    > .ui-form__main{
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  &.is-padding{
+    > .ui-form__main{
+      padding: 20px 20px 8px;
+    }
+  }
+  &.is-viewable{
+    .ui-form-cell {
+      .el-form-item {
+        margin-bottom: 6px;
+      }
+    }
+  }
+}
+.ui-form .ui-form__toolbar{
+  padding: 15px 22px;
+  border-top: 1px solid #eee;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  background-color: #fff;
+  z-index: 10;
+}
+.ui-form--column {
+
+}
+</style>

package/components/form/index.js

@@ -0,0 +1,13 @@
+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)
+}
+
+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>