ylwl-cpscoms 1.0.0 → 1.2.0

package/src/SlForm/SlForm.stories.js

@@ -1,120 +0,0 @@
-import SlForm from './index.vue'
-
-export default {
-  title: 'Components/SlForm',
-  component: SlForm,
-  parameters: {
-    docs: {
-      description: {
-        component: '动态表单组件，通过 data 配置数组驱动渲染。支持 input、select、datePicker、radio、switch、rangeInput、title、slot 等控件类型。支持表单校验、联动、重置等功能。'
-      }
-    }
-  }
-}
-
-const codeBlock = (code) => `
-  <div style="margin-top:24px;border-top:1px solid #eee;padding-top:16px">
-    <p style="font-size:14px;font-weight:600;color:#666;margin-bottom:8px;">使用代码：</p>
-    <pre style="background:#f5f5f5;padding:16px;border-radius:4px;overflow-x:auto;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-all"><code>${escapeHtml(code.trim())}</code></pre>
-  </div>`
-
-function escapeHtml(str) {
-  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-}
-
-// ---- 搜索表单 ----
-const searchCode = `<!-- 搜索表单（inline 模式） -->
-<sl-form v-model="form" :data="options"
-  :showlabel="false"
-  :form-props="{ inline: true, size: 'small' }" />`
-
-export const SearchForm = () => ({
-  components: { SlForm },
-  data() {
-    return {
-      form: {},
-      options: [
-        { label: '用户名', type: 'input', model: 'userName', privateAttrs: { placeholder: '请输入用户名' } },
-        { label: '状态', type: 'select', model: 'status', options: [
-          { label: '启用', value: 1 }, { label: '禁用', value: 0 }
-        ], props: { placeholder: '请选择状态' } },
-        { label: '创建时间', type: 'datePicker', model: 'createTime', privateProps: { type: 'daterange', valueFormat: 'yyyy-MM-dd' } }
-      ]
-    }
-  },
-  template: `
-    <div>
-      <sl-form ref="form" v-model="form" :data="options" :showlabel="false" :form-props="{ inline: true, size: 'small' }" />
-      <div style="margin-top:12px;color:#666;font-size:13px">表单值：{{ form }}</div>
-      ${codeBlock(searchCode)}
-    </div>`
-})
-
-SearchForm.storyName = '搜索表单（inline）'
-
-// ---- 编辑表单 ----
-const editCode = `<!-- 编辑表单（非 inline） -->
-<sl-form v-model="form" :data="options" item-width="100%"
-  :form-props="{ inline: false, size: 'small', labelWidth: '120px' }" />`
-
-export const EditForm = () => ({
-  components: { SlForm },
-  data() {
-    return {
-      form: { userName: '张三', status: 1 },
-      options: [
-        { label: '用户名', type: 'input', model: 'userName', rules: [
-          { required: true, message: '请输入用户名', trigger: 'blur' }
-        ]},
-        { label: '状态', type: 'radio', model: 'status', options: [
-          { label: '启用', value: 1 }, { label: '禁用', value: 0 }
-        ], rules: [
-          { required: true, message: '请选择状态', trigger: 'change' }
-        ]},
-        { label: '备注', type: 'input', model: 'remark', privateAttrs: { type: 'textarea', rows: 3 }, remark: '选填，最多200字' },
-        { label: '开关', type: 'switch', model: 'enable', value: true }
-      ]
-    }
-  },
-  template: `
-    <div style="max-width:600px">
-      <sl-form ref="form" v-model="form" :data="options" item-width="100%" :form-props="{ inline: false, size: 'small', labelWidth: '120px' }" />
-      <div style="margin-top:12px;color:#666;font-size:13px">表单值：{{ form }}</div>
-      ${codeBlock(editCode)}
-    </div>`
-})
-
-EditForm.storyName = '编辑表单'
-
-// ---- 带标题分组 ----
-const titleCode = `<!-- 使用 title 类型分组 -->
-<sl-form v-model="form" :data="options" item-width="100%"
-  :form-props="{ inline: false, size: 'small', labelWidth: '120px' }">
-  <el-button type="primary" size="small">保存</el-button>
-</sl-form>`
-
-export const WithTitle = () => ({
-  components: { SlForm },
-  data() {
-    return {
-      form: {},
-      options: [
-        { type: 'title', label: '基本信息', model: 'title1' },
-        { label: '姓名', type: 'input', model: 'name' },
-        { label: '年龄', type: 'input', model: 'age' },
-        { type: 'title', label: '联系方式', model: 'title2' },
-        { label: '手机号', type: 'input', model: 'phone' },
-        { label: '邮箱', type: 'input', model: 'email' }
-      ]
-    }
-  },
-  template: `
-    <div style="max-width:600px">
-      <sl-form ref="form" v-model="form" :data="options" item-width="100%" :form-props="{ inline: false, size: 'small', labelWidth: '120px' }">
-        <el-button type="primary" size="small">保存</el-button>
-      </sl-form>
-      ${codeBlock(titleCode)}
-    </div>`
-})
-
-WithTitle.storyName = '带标题分组'

package/src/SlForm/index.css

@@ -1,141 +0,0 @@
-.yl-form-item {
-  display: flex;
-  align-items: center;
-
-}
-::v-deep .el-form-item__content {
-    display: flex;
-    flex: 1;
-    margin: 0 !important;
-  }
-
-.yl-form-fullitem .el-form-item__content {
-    flex: 1;
-  }
-
-.yl-form-item {
-    display: inline-flex !important;
-    /* margin-bottom: 20px; */
-  }
-.yl-form-item .yl-form-item-grid .el-form-item__content {
-  font-size: 0;
-}
-.content-box {
-  position: absolute;
-  right: 0;
-  top: 0;
-  background-color: rgba(255, 255, 255, 0.5);
-  padding: 10px;
-  height: 100%;
-  box-shadow: 0 0 5px rgb(223, 222, 222);
-}
-.item-label {
-  display: inline-block;
-  width: auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-.yl-form-box-shrink {
-  padding: 10px;
-  overflow: hidden;
-  /* border: 1px solid #c1c1c1; */
-  background-color: #f1f1f1;
-  /* box-shadow: inset 0 0 5px #c1c1c1; */
-}
-.yl-form-drawericon {
-  display: inline-block;
-  vertical-align: top;
-}
-.yl-form-drawericon-float {
-  position: absolute;
-  right: 0;
-  top: 0;
-  /* transform: translateY(-50%); */
-  padding: 10px;
-  z-index: 10;
-  background-image: linear-gradient(to left, #ffa140, rgba(255, 255, 255, 0));
-  opacity: 0.9;
-  padding-left: 80px;
-}
-.yl-i-lebel {
-  line-height: 12px;
-  font-size: 12px;
-  z-index: 5;
-  right: 0;
-  background-color: #979797;
-  /* background-image: linear-gradient(to right,#dcdfe6 ,#fff); */
-  padding: 2px 8px 4px 10px;
-  border-radius: 4px 4px 0 0;
-  color: #fff;
-  width: auto;
-  position: absolute;
-  right: 0;
-  top: 0;
-  /* border: 1px solid #dcdfe6; */
-  /* transform: scale(0.7); */
-  border-radius: 0 4px 0px 10px;
-  transform-origin: 100% 0;
-  transform: scale(0.8);
-}
-.yl-r-icon {
-  color: red;
-  position: absolute;
-  left: 0;
-  top: 50%;
-  z-index: 5;
-  padding: 5px;
-  line-height: 35px;
-  transform: translateY(-50%);
-}
-.yl-form-slider {
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  display: flex;
-  padding: 0 20px 0 10px;
-  line-height: 35px;
-}
-.yl-form-slider-span {
-  padding-right: 15px;
-  color: #c0c4cc;
-}
-.yl-form-box {
-  white-space: normal;
-  position: relative;
-  transition: all 0.2s ease-out;
-  border-radius: 4px;
-}
-.yl-form-item {
-  white-space: nowrap;
-  position: relative;
-}
-.yl-form-range-input {
-  border-radius: 4px;
-  border: 1px solid #dcdfe6;
-  padding: 0 10px;
-  /* line-height: 38px; */
-}
-/* .yl-form-range-input input:nth-of-type(1){
-    margin-right: 10px;
-} */
-.yl-form-range-input input {
-  width: 70px;
-  border: none;
-  height: 100%;
-  outline: none;
-  /* background-color: #dcdfe6; */
-  padding: 7px;
-  text-align: center;
-  border-radius: 4px;
-}
-.yl-form-range-input input:focus {
-  /* box-shadow: inset 0 0 2px #5c85e6; */
-}
-.yl-form-range-input input::placeholder {
-  color: #c0c4cc;
-}
-
-.el-radio {
-  margin-bottom: 0px!important;
-}

package/src/SlForm/index.vue

@@ -1,365 +0,0 @@
-<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>