ylwl-cpscoms 1.0.0

package/src/SlForm/index.vue

@@ -0,0 +1,365 @@
+<script>
+import { typeOf, hasKey, filterKey, transformName } from '@/components/global/utils'
+import EL from 'element-ui'
+import mixinRender from './mixinRender'
+
+export default {
+  name: 'SlForm',
+  mixins: [mixinRender],
+  props: {
+    value: { type: Object, default: () => ({}) },
+    itemWidth: { type: String, default: '' },
+    data: { type: Array, default: () => [] },
+    showlabel: { type: Boolean, default: true },
+    drawer: { type: Boolean, default: false }, // 开启抽屉模式
+    formProps: { type: Object, default: () => ({ inline: true }) },
+    formItemProps: { type: Object, default: () => ({}) },
+    pipe: { type: Object, default: () => ({}) }, // 动态管道
+    freeData: { type: Object, default: () => ({}) }, // 游离的数据（将会合并到form一起返回）
+    initItem: { type: Function, default: () => {} } // 初始化item的值
+  },
+  data() {
+    const state = this.formateState()
+    return {
+      ...state,
+      isDrawerOpen: true,
+      boxHeight: 'auto',
+      firstitemHeight: '0',
+      selectOptions: {}, // 实时渲染的selectOptions
+      selectAllOptions: {}, // 初始化好的Select的Options
+      aggGameId: '123456'
+    }
+  },
+  mounted() {
+    // console.log('mounted', this.form)
+    this.$emit('input', this.form)
+    this.initFirstHieght()
+  },
+  methods: {
+    // 重置
+    reset() {
+      const { form, transfer } = JSON.parse(
+        JSON.stringify(this.catchInitValueData)
+      )
+      this.form = form
+      this.transfer = transfer
+      this.$emit('input', this.form)
+    },
+    initFirstHieght() {
+      const { offsetHeight = 0 } = (this.$refs.firstItem || {}).$el || {}
+      this.firstitemHeight = offsetHeight + 20 + 'px'
+    },
+    formateState() {
+      const { data, freeData } = this.$props
+      const form = { ...freeData }
+      const transfer = {}
+      const initData = data.reduce((pre, item) => {
+        // debugger
+        if (hasKey(item, ['model', 'type'])) {
+          !item.props && (item.props = {})
+          item = this.initItem(item) || item
+          const { callback, model, value } = item
+          const dispersed = typeOf(callback, 'function') // 是否离散键（拆分model键）
+
+          const target = dispersed ? transfer : form //
+          const valueSource = target[model] !== undefined ? target[model] : this.$props.value[model] !== undefined ? this.$props.value[model] : value !== undefined ? value : ''
+          if (dispersed) {
+            const res = callback(valueSource || '') || {}
+            Object.keys(res).forEach((key) => {
+              res[key] === undefined && (res[key] = '')
+              // console.log(!hasKey(form, [key]), "form[key],", form, key, [key])
+              !hasKey(form, [key]) && (form[key] = res[key] || '')
+            })
+          }
+          // console.log(valueSource, "valueSource", !hasKey(target, [model]))
+          !hasKey(target, [model]) && (target[model] = valueSource)
+          pre.push(item)
+          // if (item.show === undefined || item.show === null) pre.push(item)
+          // else if (typeOf(item.show, 'function') && item.show()) pre.push(item)
+          // else if (typeOf(item.show, 'boolean') && item.show) pre.push(item)
+        }
+        return pre
+      }, [])
+
+      // console.log(initData, "initData")
+      setTimeout(() => {
+        // 初始化后再watch
+        initData.forEach((...p) => this.watchValue(...p))
+      })
+      // const aaa = {
+      //   form,
+      //   transfer,
+      //   initData,
+      //   catchInitValueData: {
+      //     form: JSON.parse(JSON.stringify(form)),
+      //     transfer: JSON.parse(JSON.stringify(transfer))
+      //   }
+      // }
+      // console.log(aaa, "zxckxzcnxzkjc")
+      return {
+        form,
+        transfer,
+        initData,
+        catchInitValueData: {
+          form: JSON.parse(JSON.stringify(form)),
+          transfer: JSON.parse(JSON.stringify(transfer))
+        }
+      }
+    },
+    // 联动变化监听
+    watchValue(item, i, ary) {
+      const { callback, model, linkSet } = item
+      if (typeOf(linkSet, 'function')) {
+        const dispersed = typeOf(callback, 'function')
+        const target = dispersed ? this.transfer : this.form
+        const targetstr = dispersed ? 'transfer' : 'form'
+        const watchCallback = async function(val) {
+          let getInfo = (await linkSet(val || '')) || {}
+          if (!Array.isArray(getInfo)) {
+            getInfo = [getInfo]
+          }
+          getInfo.forEach((setItem) => {
+
+            this.$set(this.selectOptions, setItem.model, setItem.options || [])
+            let nextItem = {}
+            const tindex = ary.findIndex((item1) => {
+              const flag = item1.model === setItem.model
+              flag && (nextItem = item1)
+              return flag
+            })
+            console.log('watchCallback', setItem, nextItem, ary, tindex, '----', this.initData)
+            const nextTarget = typeOf(nextItem.callback, 'function')
+              ? this.transfer
+              : this.form
+            hasKey(setItem, 'value') &&
+              (nextTarget[setItem.model] = setItem.value)
+            tindex !== -1 && this.$set(
+              ary,
+              tindex,
+              Object.assign(ary[tindex], setItem)
+            )
+            console.log('watchCallback22222', this.initData, ary)
+            // this.initData = ary.filter((item) => {
+            //   console.log('watchCallback44444', item)
+            //   if ((item.show === undefined || item.show === null) || (typeOf(item.show, 'function') && item.show()) || (typeOf(item.show, 'boolean') && item.show)) {
+            //     nextTarget[setItem.model] = ''
+            //     return true
+            //   }
+            //   return false
+            // })
+            console.log('watchCallback333333', this.initData)
+          })
+
+        }
+        this.$watch(`${targetstr}.${model}`, watchCallback)
+        watchCallback.call(this, target[model]) // 首次进行绑定执行
+      }
+    },
+    fomateValue(item, value = item.value) {
+      const { callback } = item
+      console.log('fomateValue', typeOf(callback, 'function'), this.form)
+      if (typeOf(callback, 'function')) {
+        this.transfer[item.model] = value
+        const res = callback(value || '') || {}
+        // console.log(res, 'res')
+        Object.keys(res).forEach((key) => {
+          res[key] === undefined && (res[key] = '')
+        })
+        Object.assign(this.form, res)
+        console.log(this.form, 'this.form')
+      } else {
+        if (item.type === 'input') {
+          this.form[item.model] = value.replace(/^[ \t]+|[ \t]+$/g, '');
+        } else {
+          this.form[item.model] = value
+        }
+      }
+    },
+    validate() {
+      return this.$refs.form.validate()
+    },
+    // 提交表单
+    submit() {
+      return new Promise((res, rej) => {
+        this.$refs.form.validate((isOk, msg) => {
+          if (isOk) {
+            res(this.form)
+          } else {
+            rej(msg)
+          }
+        })
+      })
+    },
+
+    setItemValue(item) {
+      const target = item.callback ? this.transfer : this.form
+      target[item.model] = item.value
+    },
+    initCommonProps(item, filters = [], privateProps = {}, privateAttrs = {}) {
+      const target = item.callback ? this.transfer : this.form
+      // console.log('initCommonProps', item, target, this.value, item.callback ? '1' : '2', this.form)
+      // this.form[item.model] = ''
+      // console.log(this.form, 'this.form111', filterKey(item.props, filters), privateProps)
+      const { itemWidth, showlabel } = this.$props
+      return {
+        style: `width:${showlabel ? '100%' : item.width || itemWidth};${
+          item.style
+        }`,
+        props: Object.assign(
+          {
+            value: this.form[item.model],
+            clearable: true,
+            filterable: true,
+            placeholder: showlabel ? '请输入' + item.label : item.label
+          },
+          filterKey(item.props, filters),
+          privateProps
+        ),
+        attrs: { placeholder: showlabel ? '请输入' + item.label : item.label, ...privateAttrs },
+        on: {
+          input: (value) => {
+            this.fomateValue(item, value)
+          }
+        }
+      }
+    },
+    initOptions(item) {
+        if (item.asycnOptions && typeOf(item.asycnOptions, 'function')) {
+          // console.log(item.asycnOptions, 'it-----em')
+          item.asycnOptions().then(result => {
+            // console.log(result, "result")
+            this.$set(this.selectOptions, item.model, result || [])
+          })
+        } else {
+          this.$set(this.selectOptions, item.model, item.options || [])
+        }
+    }
+  },
+  created() {
+    this.initData.forEach((item) => {
+      if (['select', 'checkbox', 'radio'].includes(item.type)) {
+        this.initOptions(item)
+      }
+    })
+  },
+
+  render(ce) {
+    const { showlabel, itemWidth, drawer } = this.$props
+    // console.log('render', this.initData)
+    const updateInitData = this.initData.filter((item) => {
+      if ((item.show === undefined || item.show === null) || (typeOf(item.show, 'function') && item.show()) || (typeOf(item.show, 'boolean') && item.show)) {
+        return true
+      }
+      return false
+    })
+    const formItems = updateInitData.map((item, ii) => {
+      const { label, model, rules, type, width, labelTips } = item
+      if (type === 'title') {
+        return this.renderTitle(ce, item)
+      }
+      // console.log(item, "itexxxxxxm", this)
+      if (type === 'slot' && item.slotName && this.$slots[item.slotName]) {
+        return ce('div', {
+          class: 'yl-form-slot-container',
+          style: item.style || ''
+        }, this.$slots[item.slotName])
+      }
+
+      const itemBody = [this[`render${transformName(type)}`](ce, item)]
+      const itemClass = `yl-form-item ${showlabel ? '' : 'yl-form-fullitem'} ${
+        item.className || ''
+      }`
+      // if (!showlabel) {
+      //   itemBody.unshift(ce('div', { class: 'yl-i-lebel' }, label))
+      //   itemClass += 'yl-form-item-grid'
+      // }
+      if (
+        item.rules &&
+        item.rules.find(({ required }) => required) &&
+        !showlabel
+      ) {
+        itemBody.unshift(ce('span', { class: 'yl-r-icon' }, '*'))
+      }
+      const itemSet = {
+        class: itemClass,
+        style: `width:${width || itemWidth};${item.style}`,
+        props: Object.assign(
+          { label: showlabel ? label : '', prop: model, rules },
+          this.formItemProps
+        ),
+        scopedSlots: {
+          label: () =>
+            ce(
+              'span',
+              { style: 'label-container' },
+              [
+                labelTips ? ce(
+                  'el-tooltip',
+                  {
+                    props: {
+                      content: labelTips,
+                      placement: 'top'
+                    }
+                  },
+                  [
+                    ce(
+                      'i',
+                      { class: 'el-icon-info' },
+                      []
+                    )
+                  ]
+                ) : '',
+                ce(
+                  'span',
+                  { class: 'item-label', domProps: { title: label }, style: 'margin-left: 5px;' },
+                  label + '：'
+                )
+              ]
+            )
+        }
+      }
+      ii === 0 && (itemSet.ref = 'firstItem')
+      const ft = ce(EL.FormItem, itemSet, itemBody)
+      return ft
+    })
+    // console.log(this, "this.$scopedSlots.default")
+    if (this.$slots.default || drawer) {
+      const element = []
+      // this.$slots.default &&
+      //   element.push(this.$slots.default(this.form))
+      drawer && element.push(this.renderDrawer(ce))
+      formItems.push(
+        ce(
+          'div',
+          {
+            class: `yl-form-drawericon ${
+              this.isDrawerOpen ? '' : 'yl-form-drawericon-float'
+            }`
+          },
+          this.$slots.default
+        )
+      )
+    }
+    // console.log(this.formProps, "this.formProps")
+    return ce(
+      EL.Form,
+      {
+        class: {
+          'yl-form-box': true,
+          'yl-form-box-shrink': !this.isDrawerOpen,
+          'yl-form-box-inline': this.formProps.inline
+        },
+        style: `height:${this.boxHeight}`,
+        props: Object.assign({ model: this.form }, this.formProps),
+        ref: 'form',
+        nativeOn: { submit: (e) => e.preventDefault() }
+      },
+      formItems
+    )
+  }
+}
+</script>
+
+<style scoped >
+@import url('./index.css');
+</style>

package/src/SlForm/mixinRender.js

@@ -0,0 +1,228 @@
+import titleItem from '@/components/global/SlForm/otherItem/titleItem.vue'
+import EL from 'element-ui'
+import { typeOf } from '@/components/global/utils'
+export default {
+  components: {
+    titleItem
+  },
+  methods: {
+    renderTitle(ce, item) {
+      return ce(titleItem, {
+        props: {
+          item
+        }
+
+      })
+    },
+    renderSwitch(ce, item) {
+      return ce(EL.Switch, {
+        ...this.initCommonProps(item)
+      })
+    },
+    renderDrawer(ce) {
+      return ce(
+        EL.Button,
+        {
+          props: {
+            icon: this.isDrawerOpen ? 'el-icon-top-right' : 'el-icon-rank',
+            type: 'primary'
+          },
+          on: {
+            click: () => {
+              this.isDrawerOpen = !this.isDrawerOpen
+              this.boxHeight = this.isDrawerOpen ? 'auto' : this.firstitemHeight
+            }
+          }
+        }
+        // this.isDrawerOpen ? 'shrink' : 'open'
+      )
+    },
+    renderText(ce, item) {
+      return ce('div', { style: { width: '100%' }}, this.form[item.model])
+    },
+    renderInput(ce, item) {
+      return ce('div', { style: { width: '100%' }}, [
+        ce(EL.Input, {
+          ...this.initCommonProps(item, [], {}, item.privateAttrs)
+        }),
+        ce('div', { style: { color: 'red', lineHeight: 2, fontSize: '12px' }}, item.remark)
+      ])
+      // return ce(EL.Input, {
+      //   ...this.initCommonProps(item, [], {}, item.privateAttrs)
+      // })
+    },
+    renderInputNumber(ce, item) {
+      return ce('div', { style: { width: item.privateAttrs && item.privateAttrs.style && item.privateAttrs.style.width ? item.privateAttrs.style.width : '90%' }}, [
+        ce(EL.InputNumber, {
+          ...this.initCommonProps(item, [], { 'controls-position': 'right' }, item.privateAttrs)
+        }),
+        ce('span', { style: { marginLeft: '10px' }}, item.privateAttrs && item.privateAttrs.unit ? item.privateAttrs.unit : ''),
+        ce('div', { style: { color: 'red', lineHeight: 2, fontSize: '12px' }}, item.remark)
+      ])
+      // return ce(EL.Input, {
+      //   ...this.initCommonProps(item, [], {}, item.privateAttrs)
+      // })
+    },
+    renderSelect(ce, item) {
+      const {
+        labelKey = 'label',
+        valueKey = 'value',
+        // options,
+        // remoteMethod,
+        //   props = {},
+        model,
+        slots
+        // asycnOptions
+        //   label
+      } = item
+      // const isopstr = typeOf(options, 'string')
+      // const isopsFun = typeOf(asycnOptions, 'function')
+      // const isremote = typeOf(remoteMethod, 'function')
+      // const op = (isopsFun ? (await asycnOptions()) : options) || []
+      // console.log(this.selectOptions, "this.selectOptions")
+      // if (isopsFun) {
+      //   asycnOptions().then(result => {
+      //     this.$set(this.selectOptions, model, result || [])
+      //     // return result || []
+      //   })
+      // } else {
+      //   this.$set(this.selectOptions, model, options || [])
+      // }
+      const customOp = this.initCommonProps(
+        item,
+        ['options', 'labelKey', 'valueKey'],
+        {
+          hitable: true,
+          defaultFirstOption: true
+        },
+        item.privateAttrs
+      )
+      const otherSlots = Object.entries(slots || {}).reduce(
+        (pre, [key, fun]) => {
+          typeOf(fun, 'function') &&
+            (pre[key] = () => {
+              return fun(ce)
+            })
+          return pre
+        },
+        {}
+      )
+      //   return ce(bstSelect.SelectPro, {
+      return ce(EL.Select, {
+        ...customOp,
+        scopedSlots: {
+          default: () => {
+            return this.selectOptions[model] && this.selectOptions[model].length ? this.selectOptions[model].map((o) =>
+              //   ce(bstSelect.SelectOption, {
+              ce(EL.Option, {
+                props: Object.assign({}, o, {
+                  key: 'id',
+                  data: o,
+                  label: o[labelKey],
+                  value: o[valueKey]
+                })
+              })
+            ) : []
+            //  return op.map(o=>ce(EL.Option,{props:Object.assign({},o,{key:'id',data:o,label:o[labelKey],value:o[valueKey]})}))
+          },
+          ...otherSlots
+        }
+      })
+    },
+    renderDatePicker(ce, item) {
+      return ce(EL.DatePicker, {
+        ...this.initCommonProps(item, [], {
+          startPlaceholder: '开始时间',
+          endPlaceholder: '结束时间',
+          defaultTime: item.privateProps && item.privateProps.type === 'daterange' ? ['00:00:00', '23:59:59'] : undefined,
+          ...item.privateProps
+        }, item.privateProps)
+      })
+    },
+
+    renderRadio(ce, item) {
+      const { labelKey = 'label', valueKey = 'value', model } = item
+      return ce(
+        EL.RadioGroup,
+        {
+          ...this.initCommonProps(item, [
+            'options',
+            'labelKey',
+            'valueKey',
+            'label'
+          ])
+        },
+        this.selectOptions[model] && this.selectOptions[model].length ? this.selectOptions[model].map((o) =>
+          ce(EL.Radio, { props: { label: o[valueKey] }}, [o[labelKey]])
+        ) : []
+      )
+    },
+
+    renderSlider(ce, item) {
+      return ce('div', { class: 'yl-form-slider' }, [
+        ce('span', { class: 'yl-form-slider-span' }, [item.label]),
+        ce(EL.Slider, {
+          ...this.initCommonProps(item, []),
+          style: 'width:200px'
+        })
+      ])
+    },
+    renderRangeInput(ce, item) {
+      !typeOf(item.value, 'array') && (item.value = [])
+      // const target = item.callback ? this.transfer : this.form
+      const target = this.form
+      const val = target[item.model]
+      const style = ''
+      // 清空输入框的函数
+      const clearInputs = () => {
+        this.fomateValue(item, ['', ''])
+      }
+
+      // 检查是否至少有一个输入框有值
+      const hasValue = val && (val[0] || val[1])
+      return ce('div', { class: 'yl-form-range-input' }, [
+        ce('span', { class: 'yl-form-slider-span' }, [item.label]),
+        ce('input', {
+          style,
+          domProps: { value: val[0], placeholder: '起始值', type: 'number' },
+          on: {
+            input: ({ target }) => {
+              this.fomateValue(item, [target.value, val[1]])
+              // this.$emit("input",this.form);
+            }
+          }
+        }),
+        '-',
+        ce('input', {
+          style,
+          domProps: { value: val[1], placeholder: '截止值', type: 'number' },
+          on: {
+            input: ({ target }) => {
+              this.fomateValue(item, [val[0], target.value])
+              // this.$emit("input",this.form);
+            }
+          }
+        }),
+        hasValue && ce('button', {
+          class: 'range-input-clear-btn',
+          attrs: { type: 'button' },
+          style: {
+            marginLeft: '5px',
+            background: 'none',
+            border: 'none',
+            fontSize: '16px',
+            cursor: 'pointer',
+            color: '#999'
+          },
+          on: {
+            click: (e) => {
+              e.stopPropagation()
+              clearInputs()
+            }
+          }
+        }, '×')
+      ])
+    }
+
+  }
+}

package/src/SlForm/otherItem/titleItem.vue

@@ -0,0 +1,31 @@
+<template>
+  <h3 class="title-item">
+    {{ item.label }}
+  </h3>
+</template>
+<script>
+export default {
+  name: 'TitleItem',
+  props: {
+    item: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  mounted() {
+    // console.log(this.item, "你的手")
+  }
+}
+</script>
+<style scoped>
+.title-item::before {
+  content: "|";
+  width: 3px;
+  background-color: #409EFF;
+  color: #409EFF;
+}
+.title-item {
+  margin-bottom: 20px;
+}
+</style>
+