@aochuang/common 1.0.0 → 1.0.126

package/components/form/form-cell.vue

@@ -0,0 +1,231 @@
+<template>
+  <el-col :span="innerSpan" class="ui-form-cell" :class="['is-label-' + labelPosition, { 'is-margin-bottom': marginBottom }]">
+    <el-form-item :prop="prop" :required="required" :label-width="labelWidth" ref="formItem" :style="style">
+      <slot>{{value}}</slot>
+      <div class="ui-form-cell__label" slot="label" v-if="$slots.label || label">
+        <slot name="label">{{label}}</slot>
+        <ui-tooltip class="ui-form-cell__explain" v-if="explain" :content="explain">
+          <ui-icon name="question-fill">a</ui-icon>
+        </ui-tooltip>
+      </div>
+      <span class="ui-form-cell__error" slot="error" slot-scope="{ error }">
+        <slot name="error" :error="error">{{error}}</slot>
+      </span>
+      <p class="ui-form-cell__tips" v-if="tips || $slots.tips">
+        <slot name="tips">{{tips}}</slot>
+      </p>
+    </el-form-item>
+  </el-col>
+</template>
+<script>
+import Col from 'element-ui/lib/col'
+import 'element-ui/lib/theme-chalk/col.css'
+import FormItem from 'element-ui/lib/form-item'
+import 'element-ui/lib/theme-chalk/form-item.css'
+
+export default {
+  name: 'UiFormCell',
+  inject: ['UiForm'],
+  provide () {
+    return {
+      UiFormCell: this
+    }
+  },
+  components: {
+    ElCol: Col,
+    ElFormItem: FormItem
+  },
+  props: {
+    label: {
+      type: String
+    },
+    align: {
+      type: String,
+      default: 'top'
+    },
+    showLabel: {
+      type: Boolean,
+      default: true
+    },
+    marginBottom: {
+      type: Boolean,
+      default: true
+    },
+    prop: {
+      type: String
+    },
+    tips: {
+      type: String
+    },
+    explain: {
+      type: String
+    },
+    span: {
+      type: Number
+    },
+    required: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    style () {
+      const map = {
+        top: 'flex-top',
+        middle: 'center',
+        bottom: 'flex-end'
+      }
+      return {
+        'align-items': map[this.align]
+      }
+    },
+    labelPosition () {
+      return this.UiForm.labelPosition
+    },
+    labelWidth () {
+      let width
+      if (!this.showLabel) {
+        width = '0'
+      }
+      return width
+    },
+    parent () {
+      return this.$parent.$parent
+    },
+    innerSpan () {
+      if (this.span) {
+        return this.span
+      } else {
+        let num = 0
+        if (this.parent && this.parent.$options.name === 'UiFormRow' && this.parent.$slots.default) {
+          num = this.parent.$slots.default.filter(v => {
+            return v && v.componentOptions && v.componentOptions.Ctor && v.componentOptions.Ctor.options && v.componentOptions.Ctor.options.name === 'UiFormCell'
+          }).length
+        }
+        return num === 0 ? 24 : 24 / num
+      }
+    },
+    model () {
+      return this.UiForm.model
+    },
+    value () {
+      let value
+      if (this.prop) {
+        value = this.model[this.prop]
+        return value === null || value === undefined || value === '' ? '' : value
+      }
+      return value
+    }
+  },
+  methods: {
+    isValid () {
+      return this.$refs.formItem.validateState !== 'error'
+    }
+  }
+}
+</script>
+<style lang="less">
+body .ui-form-cell{
+  box-sizing: border-box!important;
+  &:not(.is-label-top) {
+    > .el-form-item{
+      display: flex;
+      flex-direction: row;
+    }
+  }
+  &.is-label-top{
+    position: relative;
+    > .el-form-item.is-required > .el-form-item__label:before{
+      right: -20px;
+    }
+    > .el-form-item{
+      margin-bottom: 12px;
+    }
+    > .el-form-item > .el-form-item__label{
+      padding-top: 0;
+    }
+  }
+  &:not(.is-margin-bottom) {
+    > .el-form-item{
+      margin-bottom: 0;
+    }
+  }
+  .el-form-item{
+    margin-bottom: 15px;
+    &:before{
+      display: none;
+    }
+    &.is-required{
+      .el-form-item__label:before{
+        position: absolute;
+        top: 8px;
+        right: 0;
+        height: 16px;
+        line-height: 16px;
+        width: 16px;
+        text-align: center;
+      }
+    }
+    &.is-error{
+      .el-input .el-input__inner,
+      .el-textarea__inner{
+        border-color: #F56C6C;
+        &:hover{
+          border-color: #F56C6C;
+        }
+        &:focus{
+          box-shadow: 0 0 0 0.2rem rgba(245, 108, 108, 0.25);
+        }
+      }
+      .el-input.is-focus .el-input__inner{
+        box-shadow: 0 0 0 0.2rem rgba(245, 108, 108, 0.25);
+      }
+    }
+  }
+  .el-form-item__label{
+    line-height: 24px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    color: #888;
+    position: relative;
+    box-sizing: border-box;
+  }
+  .ui-form-cell__label{
+    display: flex;
+    flex-direction: row;
+  }
+  .el-form-item__content{
+    line-height: 32px;
+    word-break: break-all;
+    flex: 1;
+    margin-left: 0!important;
+    font-size: 14px;
+    min-width: 0;
+    &:before,&:after{
+      display: none;
+    }
+  }
+  .el-form-item__error{
+    position: static;
+    margin-top: 3px;
+  }
+}
+.ui-form-cell__tips{
+  margin: 5px 0 0;
+  line-height: 1.7em;
+  color: #999;
+  font-size: 12px;
+}
+.ui-form-cell__error{
+  margin-top: 3px;
+  display: block;
+  color: #F56C6C;
+  padding-top: 4px;
+  line-height: 1;
+  font-size: 12px;
+}
+.ui-form-cell__explain{
+  display: inline-block;
+  margin-left: 4px;
+}
+</style>

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,287 @@
+<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>
+    <div class="ui-form__loading" v-if="loading">
+      <ui-loading></ui-loading>
+    </div>
+  </el-form>
+</template>
+<script>
+import Form from 'element-ui/lib/form'
+import 'element-ui/lib/theme-chalk/form.css'
+import UiLoading from '../loading'
+
+export default {
+  name: 'UiForm',
+  provide () {
+    return {
+      UiForm: this
+    }
+  },
+  components: {
+    UiLoading,
+    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
+    },
+    queryMethod: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      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)
+    if (this.queryMethod) {
+      this.reload()
+    }
+  },
+  methods: {
+    reload () {
+      if (!this.queryMethod) {
+        return
+      }
+      this.loading = true
+      return this.queryMethod().finally(() => {
+        this.loading = false
+      })
+    },
+    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__loading{
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 100;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+</style>