iov-pro-components 0.0.3

package/src/views/form-collapse.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="pro-form">
+    <iov-pro-form-collapse>
+      <template #default="{ status, toggleStatus }">
+        <iov-pro-form
+          ref="form"
+          v-model="value"
+          :data-source="dataSource"
+          :items="FORM_ITEMS"
+          :config="FORM_CONFIG2"
+        />
+        <el-button
+          size="mini"
+          type="primary"
+          round
+          @click="toggleStatus"
+        >{{ status === 'expand' ? '收起' : '展开' }}</el-button>
+      </template>
+    </iov-pro-form-collapse>
+  </div>
+</template>
+
+<script>
+const FORM_ITEMS = [
+  {
+    type: 'input',
+    label: '姓名',
+    name: 'name',
+    rules: {
+      required: true,
+      message: '请输入姓名',
+      trigger: 'blur'
+    }
+  },
+  {
+    type: 'input',
+    label: '年龄',
+    name: 'age',
+    value: 18,
+    props: {
+      placeholder: '请输入年龄'
+    },
+    rules: {
+      required: true,
+      message: '请输入姓名',
+      trigger: 'blur'
+    }
+  },
+  {
+    type: 'select',
+    label: '性别',
+    name: 'sex',
+    value: options => options[0]?.value,
+    options: [
+      { label: '男', value: 1 },
+      { label: '女', value: 2 }
+    ]
+  },
+  {
+    type: 'radio-button',
+    label: '是否抽烟',
+    name: 'smoke',
+    value: 1,
+    options: [
+      { label: '是', value: 1 },
+      { label: '否', value: 2 }
+    ]
+  },
+  {
+    type: 'select',
+    label: ({ sex }) => `最喜欢的${sex === 1 ? '男性' : '女性'}运动`,
+    name: 'sport',
+    watch: ['sex'],
+    labelWidth: '140px',
+    value: options => options[0]?.value,
+    rules: ({ sex }) => {
+      return sex === 1 ? { required: true, message: '请选择' } : null
+    },
+    props: {
+      handler({ sex }) {
+        return sex === 2 ? { clearable: false } : {}
+      }
+    },
+    options({ sex }) {
+      if (!sex) {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve([])
+          }, 100)
+        })
+      }
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          if (sex === 1) {
+            resolve([
+              { label: '足球', value: 1 },
+              { label: '篮球', value: 2 }
+            ])
+          } else {
+            resolve([
+              { label: '乒乓球', value: 3 },
+              { label: '羽毛球', value: 4 }
+            ])
+          }
+        }, 300)
+      })
+    }
+  },
+  {
+    type: 'checkbox',
+    name: 'location',
+    label: '喜欢去的场所',
+    labelWidth: '110px',
+    span: 12,
+    watch: ['sex', 'dataSource.other'],
+    options: {
+      handler({ sex }, dataSource) {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            const options = [
+              { label: '足球', value: 1 },
+              { label: '篮球', value: 2 }
+            ]
+            if (sex === 1) {
+              options.push({ label: '翠林', value: 3 })
+            }
+            if (sex === 2) {
+              options.push({ label: '美容院', value: 4 })
+            }
+            if (dataSource.other === 1) {
+              options.push({ label: '其他1', value: 5 })
+            }
+            if (dataSource.other === 2) {
+              options.push({ label: '其他2', value: 6 })
+            }
+            resolve(options)
+          }, 300)
+        })
+      },
+      inject: ['dataSource']
+    }
+  },
+  {
+    type: 'date-picker',
+    label: '毕业时间',
+    span: 12,
+    name: ['startTime', 'endTime'],
+    props: {
+      type: 'daterange'
+    },
+    value: ['2024-10-01 00:00:00', '2024-11-01 00:00:00']
+  }
+]
+
+const FORM_CONFIG1 = {
+  grid: false,
+  labelPosition: 'top'
+}
+
+const FORM_CONFIG2 = {
+  grid: true,
+  span: 6,
+  gutter: 20
+}
+export default {
+  name: 'FormCollapseDemo',
+  data() {
+    return {
+      value: {},
+      FORM_ITEMS,
+      FORM_CONFIG1,
+      FORM_CONFIG2,
+      dataSource: {
+        other: 1
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.pro-form {
+  padding: 20px;
+}
+</style>

package/src/views/form.vue

@@ -0,0 +1,402 @@
+<template>
+  <div class="pro-form">
+    <el-tabs value="no-grid">
+      <el-tab-pane
+        name="no-grid"
+        label="非栅格系统"
+      >
+        <iov-pro-form
+          ref="form"
+          v-model="value"
+          :data-source="dataSource"
+          :items="FORM_ITEMS"
+          :config="FORM_CONFIG1"
+          @change="onChange"
+        >
+          <template #name-form-item-label>1111</template>
+          <template #name-suffix><div>23</div></template>
+          <template #name-prefix><div>45</div></template>
+          <template #smoke-time>
+            <el-input
+              v-model="value.time"
+              placeholder="请输入抽烟时长"
+              clearable
+            >
+              <el-select
+                slot="append"
+                v-model="value.unit"
+                placeholder="请选择单位"
+              >
+                <el-option
+                  label="年"
+                  value="year"
+                />
+                <el-option
+                  label="月"
+                  value="month"
+                />
+                <el-option
+                  label="日"
+                  value="day"
+                />
+              </el-select>
+            </el-input>
+          </template>
+        </iov-pro-form>
+      </el-tab-pane>
+      <el-tab-pane
+        name="grid"
+        label="栅格系统"
+      >
+        <iov-pro-form
+          ref="form"
+          v-model="value"
+          :data-source="dataSource"
+          :items="FORM_ITEMS"
+          :config="FORM_CONFIG2"
+          @change="onChange"
+        />
+      </el-tab-pane>
+    </el-tabs>
+    <el-input
+      ref="input"
+      v-model="value1"
+      v-number="2"
+    />
+
+    <el-button @click="onValidateForm">校验表单</el-button>
+    <el-button @click="onClearValidateForm">清空校验</el-button>
+    <el-button @click="getFormOptions">获取options数据</el-button>
+    <el-button @click="resetForm">重置表单</el-button>
+    <el-button @click="onChangeDataSource">更改数据源</el-button>
+    <div>{{ value }}</div>
+  </div>
+</template>
+
+<script>
+import lodashGet from 'lodash/get'
+
+const FORM_ITEMS = [
+  {
+    type: 'input',
+    label: '姓名',
+    name: 'name',
+    rules: {
+      required: true,
+      message: '请输入姓名',
+      trigger: 'blur'
+    },
+    directive: 'model.trim',
+    slots: {
+      formItem: {
+        label: 'name-form-item-label'
+      },
+      component: {
+        suffix: 'name-suffix',
+        prefix: 'name-prefix'
+      }
+    }
+  },
+  {
+    type: 'input',
+    label: '年龄',
+    name: 'age',
+    value: 18,
+    props: {
+      class: 'input-age',
+      placeholder: '请输入年龄'
+    },
+    directive: {
+      name: 'number',
+      value: 2
+    },
+    rules: {
+      required: true,
+      message: '请输入年龄',
+      trigger: 'blur'
+    }
+  },
+  {
+    type: 'select',
+    label: '性别',
+    name: 'sex',
+    value: options => options[0]?.value,
+    props: {
+      filterable: true,
+      remote: true,
+      remoteMethod: {
+        handler(query, options) {
+          return query ? options.slice(0, 1) : options
+        },
+        inject: ['options']
+      }
+    },
+    options: [
+      { label: '男', value: 1 },
+      { label: '女', value: 2 }
+    ],
+    on: {
+      input: {
+        handler(value, formThis) {
+          console.log(value, formThis)
+        },
+        inject: ['formThis']
+      },
+      change(value) {
+        console.log(value)
+      }
+    }
+  },
+  {
+    type: 'radio',
+    label: '是否抽烟',
+    name: 'smoke',
+    value: 1,
+    vif: ({ sex }) => sex === 1,
+    options: [
+      { label: '是', value: 1 },
+      { label: '否', value: 2 }
+    ]
+  },
+  {
+    type: 'slot',
+    label: '抽烟时长',
+    name: ['time', 'unit'],
+    slotName: 'smoke-time',
+    vif: ({ smoke }) => smoke === 1,
+    value: ['', 'year'],
+    rules: {
+      required: true,
+      validator(rule, value, callback) {
+        if (!value[0]) {
+          callback(new Error('请输入抽烟时长'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  },
+  {
+    type: 'select',
+    label: ({ sex }) => `最喜欢的${sex === 1 ? '男性' : '女性'}运动`,
+    name: 'sport',
+    watch: ['sex'],
+    labelWidth: '140px',
+    value: '',
+    rules: ({ sex }) => {
+      return sex === 1 ? { required: true, message: '请选择' } : null
+    },
+    props: {
+      handler({ sex }) {
+        return sex === 2 ? { clearable: false } : {}
+      },
+      inject: ['dataSource']
+    },
+    options({ sex }) {
+      console.log('sex 的 options 触发了', sex)
+      if (!sex) {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve([])
+          }, 100)
+        })
+      }
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          if (sex === 1) {
+            resolve([
+              { label: '全部', value: '' },
+              { label: '足球', value: 1 },
+              { label: '篮球', value: 2 }
+            ])
+          } else {
+            resolve([
+              { label: '全部', value: '' },
+              { label: '乒乓球', value: 3 },
+              { label: '羽毛球', value: 4 }
+            ])
+          }
+        }, 300)
+      })
+    }
+  },
+  {
+    type: 'checkbox',
+    name: 'location',
+    label: '喜欢去的场所',
+    labelWidth: '110px',
+    span: 12,
+    watch: ['sex', 'dataSource.other'],
+    options: {
+      handler({ sex }, dataSource) {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            const options = [
+              { label: '足球', value: 1 },
+              { label: '篮球', value: 2 }
+            ]
+            if (sex === 1) {
+              options.push({ label: '翠林', value: 3 })
+            }
+            if (sex === 2) {
+              options.push({ label: '美容院', value: 4 })
+            }
+            if (dataSource.other === 1) {
+              options.push({ label: '其他1', value: 5 })
+            }
+            if (dataSource.other === 2) {
+              options.push({ label: '其他2', value: 6 })
+            }
+            resolve(options)
+          }, 100)
+        })
+      },
+      inject: ['dataSource']
+    }
+  },
+  {
+    type: 'date-picker',
+    label: '毕业时间',
+    span: 12,
+    name: ['startTime', 'endTime'],
+    props: {
+      type: 'daterange'
+    },
+    value: ['2024-10-01 00:00:00', '2024-11-01 00:00:00']
+  }
+]
+
+const FORM_CONFIG1 = {
+  grid: false,
+  labelPosition: 'top'
+}
+
+const FORM_CONFIG2 = {
+  grid: true,
+  span: 6,
+  gutter: 20
+}
+export default {
+  name: 'FormDemo',
+  directives: {
+    number: {
+      bind(el, binding, vnode) {
+        const decimals = !isNaN(binding.value) ? binding.value : 2 // 默认小数位数为 2
+
+        // 构建正则表达式，支持 0 和空值，不允许以 '.' 开头，也不允许多个零开头
+        const regex = new RegExp(`^(?!\\.)[0-9]*(\\.\\d{0,${decimals}})?$|^$`)
+
+        // 获取 el-input 内部的 input 元素
+        const input = el.tagName === 'INPUT' ? el : el.querySelector('input')
+        if (input) {
+          let previousValue = '' // 记录上次合法的值
+
+          input.addEventListener('input', (event) => {
+            let currentValue = input.value
+
+            // 使用 slice 去除多余的零
+            if (/^0[0-9]/.test(currentValue)) {
+              currentValue = currentValue.slice(0, 1) // 保留一个零，移除其他零
+            }
+
+            // 防止以小数点开头，例如 ".123" -> "0.123"
+            if (/^\./.test(currentValue)) {
+              currentValue = '0' + currentValue // 补全为 "0.123"
+            }
+
+            if (+decimals === 0 && /^\d+\.$/.test(currentValue)) {
+              currentValue = currentValue.slice(0, -1)
+            }
+
+            // 如果当前值合法，保存为上次合法值
+            if (regex.test(currentValue)) {
+              previousValue = currentValue
+              input.value = previousValue
+            } else {
+              // 如果不合法，恢复到上次合法值
+              const cursorPosition = input.selectionStart - 1 // 获取光标位置
+              input.value = previousValue // 恢复到合法值
+
+              // 修复光标位置
+              input.setSelectionRange(cursorPosition, cursorPosition)
+
+              // 手动触发 input 事件以更新 v-model
+              const event = new Event('input', { bubbles: true })
+              input.dispatchEvent(event)
+            }
+            // 如果当前正在合成，则关闭合成方法
+            if (lodashGet(vnode, 'componentInstance.isComposing')) {
+              // 设置当前未在合成
+              vnode.componentInstance.isComposing = false
+              vnode.componentInstance.handleInput(event)
+            }
+          })
+          input.addEventListener('blur', () => {
+            // 当前输入的值
+            const currentValue = input.value
+            // 如果当前输入的值以.结尾
+            if (/\.$/.test(currentValue)) {
+              previousValue = currentValue.slice(0, currentValue.length - 1)
+              input.value = previousValue
+              // 手动触发 input 事件以更新 v-model
+              const event = new Event('input', { bubbles: true })
+              input.dispatchEvent(event)
+            }
+          })
+        }
+      },
+      unbind(el) {
+        const input = el.tagName === 'INPUT' ? el : el.querySelector('input')
+        if (input) {
+          input.removeEventListener('input', () => {})
+          input.removeEventListener('blur', () => {})
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      value: {},
+      FORM_ITEMS,
+      FORM_CONFIG1,
+      FORM_CONFIG2,
+      dataSource: {
+        other: 1
+      },
+      value1: ''
+    }
+  },
+  methods: {
+    onValidateForm() {
+      this.$refs.form.validate()
+    },
+
+    onClearValidateForm() {
+      this.$refs.form.clearValidate()
+    },
+
+    getFormOptions() {
+      console.log(this.$refs.form.getOptions(['sport']))
+    },
+
+    resetForm() {
+      this.$refs.form.resetFields()
+    },
+
+    onChange(newValue, oldValue) {
+      console.log(newValue, oldValue)
+    },
+
+    onChangeDataSource() {
+      this.dataSource.other = 2
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.pro-form {
+  padding: 20px;
+}
+</style>

package/src/views/link-group.vue

@@ -0,0 +1,16 @@
+<template>
+  <iov-pro-link-group max="2">
+    <el-link type="primary">详情</el-link>
+    <el-link type="primary">编辑</el-link>
+    <el-link type="primary">删除</el-link>
+    <el-link type="primary">启用</el-link>
+    <el-link type="primary">启用2</el-link>
+  </iov-pro-link-group>
+</template>
+
+<script>
+
+export default {
+  name: 'LinkGroupDemo'
+}
+</script>

package/src/views/preview.vue

@@ -0,0 +1,33 @@
+<template>
+  <Preview :name="pageName" :key="pageName" />
+</template>
+
+<script>
+import Preview from '../components/Preview'
+
+export default {
+  name: 'PreiviewPage',
+  components: {
+    Preview
+  },
+  data() {
+    return {
+      pageName: ''
+    }
+  },
+  watch: {
+    $route: {
+      handler() {
+        this.pageName = this.$route.path.replace('/preview/', '')
+      },
+      immediate: true
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.result-box {
+  width: 1016px;
+}
+</style>

package/src/views/request.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <button @click="onRetry">重新发起请求</button>
+    <div style="max-height: 300px; overflow-y: auto">
+      <div>结果如下：</div>
+      <iov-pro-request
+        :api="api"
+        :params="params"
+      >
+        <template #default="{ data, loading }">
+          <div>
+            <div>loading: {{ loading }}</div>
+            <div>data: {{ data }}</div>
+          </div>
+        </template>
+      </iov-pro-request>
+      <iov-pro-request
+        :api="api"
+        :params="params"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+const api = (params) => fetch(
+  'https://www.zhihu.com/commercial_api/banners_v3/home_up',
+  {
+    method: 'GET',
+    params: JSON.stringify(params)
+  }
+).then(res => res.json())
+
+export default {
+  name: 'RequestDemo',
+  data() {
+    return {
+      api,
+      params: {
+        tenantNo: 39
+      }
+    }
+  },
+  methods: {
+    /**
+     * 重新调用接口
+     * @time 2024-10-30 10:49:04
+     */
+    onRetry() {
+      this.params = {
+        tenantNo: Math.floor(Math.random() * 100)
+      }
+    }
+  }
+}
+</script>