sinosoft-common-form 1.0.9 → 1.1.1

package/README.md

@@ -0,0 +1,366 @@
+参数介绍
+
+Form 属性
+
+| 参数        | 说明                                           | 类型   | 默认值 |
+|-------------|------------------------------------------------|--------|--------|
+| v-model     | 表单数据,双向绑定(字段需与 prop 属性一样)      | Object | -      |
+| form-column | 表单配置项,详情见下方 Column 属性              | Array  |  -     |
+| rules       | 表单规则验证,校验规则请参考elementplus官方文档 | Array |  -     |
+
+
+
+Column 配置项
+
+| 参数    | 说明                                         | 类型   | 默认值 |
+|---------|----------------------------------------------|--------|--------|
+| type    | 表单类型,elementplus的组件以及自己定义的组件 | String | -      |
+| label   | el-form-item label 属性                      | String |  -     |
+| prop    | el-form-item prop 属性                       | String |  -     |
+| field   | el-form-item prop 属性                       | String |  -     |
+| options | elementplus的组件自定义的组件的props         | Object |  -     |
+
+
+
+Form 方法
+
+| 事件名 | 说明                     | 回调参数 |
+|--------|--------------------------|----------|
+| submit | 点击确认按钮拿到表单数据 | model    |
+
+参考用例：
+@/components/index.vue
+<template>
+    <s-form
+      :fieldList="fieldList"
+      :model="model"
+      :options="options"
+      @submit="handleBaseSubmit"
+      @cancel="cancelClick"
+      @last="handleLastClick"
+    >
+    <!-- 地址插槽示例 -->
+     <template v-slot:address>
+        <el-radio-group
+          v-model="model['addressRadioV']"
+        >
+          <el-radio
+            :label="'1q'"
+            size="large"
+          >
+            {{ 111}}
+          </el-radio>
+          <el-radio
+            :label="'2q'"
+            size="large"
+          >
+            {{ 222 }}
+          </el-radio>
+        </el-radio-group>
+     </template>
+     <!-- 小项插槽示例 -->
+     <template v-slot:slotItem1>
+       <div>slotItem1</div>
+     </template>
+     <template v-slot:slotItem2>
+       <div>slotItem2</div>
+     </template>
+     <template v-slot:slotItem3>
+       <div>slotItem3</div>
+     </template>
+     <template v-slot:slotItem4>
+       <div>slotItem4</div>
+     </template>
+     <template v-slot:slotItem5>
+       <div>slotItem5</div>
+     </template>
+
+      <!-- 如果不使用默认的按钮可以使用插槽自定义内容， 插槽返回的model就是当前表单的数据 -->
+      <!-- <template #buttons="{ model }">
+                    <el-button">提交</el-button>
+                </template> -->
+    </s-form>
+  <!-- </el-card> -->
+</template>
+<script lang="ts" setup>
+import { exampleForm } from '../config/form'
+import { ref, reactive } from 'vue'
+import { default as sForm } from '../package/Index.vue'
+
+// 本项目EasyForm组件自动引入，如复制此代码，需根据路径引入Form组件后使用
+const fieldList: Form.FieldItem[] = exampleForm.baseForExample
+// 按钮配置
+const options = reactive({
+  labelPosition: 'top',//表单标签位置
+  btnConfig: [ //表单按钮配置
+    {
+      isShow: true,
+      name: '提交',
+      emitName: 'submit',
+      btnCode: '11111',
+      size: '90px',
+      isRule: true,
+      style: 'margin-right: 30px'
+    },
+    {
+      isShow: true,
+      name: '上一步',
+      emitName: 'last',
+      size: '90px',
+      btnCode: '11111',
+      isRule: false,
+      style: 'margin-right: 30px'
+    },
+    {
+      isShow: true,
+      name: '重置',
+      emitName: 'reset',
+      size: '90px',
+      btnCode: '11111',
+      isRule: false,
+      style: 'margin-right: 30px'
+    },
+    {
+      isShow: true,
+      name: '下一步',
+      emitName: 'submit',
+      btnCode: '11111',
+      size: '90px',
+      isRule: true,
+      style: 'margin-right: 30px'
+    },
+
+]
+})
+const model = ref<Record<string, any>>({
+  // 地址项字段
+  addressStreet: '', 
+  addressHouse: '', 
+  addressMansion: '',
+  block: '',
+  floor: '',
+  flat: '',
+  addressLang: '1',
+  addressNation:'',
+  addressCity:'',
+  addressArea:'',
+  addressAreaC:'',
+  // 姓名项字段 
+  nameEnFamily: '',
+  nameEn: '', 
+  nameChFamily: '', 
+  nameCh: '',
+  // 单选字段
+  radioValue: '',
+  // 性别字段
+  gender: 1,
+  // 多选字段
+  hobbies: [1],
+  // 下拉字段
+  job: 3,
+  // 密码字段
+  password:'',
+  // 只读字段
+  readonly: '只读输入框',
+  // 日期字段
+  date: new Date(2000, 1, 1, 12, 0, 0),
+  // 留言板字段
+  summary: 'lalalallallaa',
+  // 地址插槽字段
+  addressRadioV: '2q',
+  // 手机输入字段
+  areaCode:'+998',
+  phoneNumber:'0000000'
+})
+/**
+     * 注意： model数据模型非必填项，如果仅仅是用于数据收集，model参数可以不用填，表单的submit事件会返回所有搜集的数据对象
+     *       如果是编辑的情况下，页面需要回显数据，则model数据模型必须要填写
+     */
+const handleBaseSubmit = (model: Record<string, any>) => {
+  console.log('handleBaseSubmit', model)
+}
+const handleLastClick = (model: Record<string, any>) => {
+  console.log('handleLastClick', model)
+}
+const cancelClick = (model: Record<string, any>) => {
+  console.log('cancleClick', model)
+}
+const handleBaseNext = (model: Record<string, any>) => {
+  console.log('handleBaseNextClick', model)
+}
+</script>
+<style lang="scss" scoped></style>
+
+
+
+配置文件:
+@/config/form.ts
+
+// 表单配置示例
+export const exampleForm = {
+  baseForExample: [
+    { type: 'title', title: '地址'},
+    { 
+      type: 'address', 
+      disabled: false ,
+      rules: {
+        addressStreet:  [{ required: true, message: '111 is required' }] ,
+        addressHouse:  [{ required: true, message: 'addressHouse is required' }] ,
+        addressMansion:  [{ required: true, message: 'addressMansion is required' }] ,
+        block:  [{ required: true, message: 'block is required' }] ,
+        floor:  [{ required: true, message: 'floor is required' }] ,
+        nameCh:  [{ required: true, message: 'nameCh is required' }] ,
+        flat:  [{ required: true, message: 'flat is required' }] ,
+        addressLang:  [{ required: true, message: 'addressLang is required' }] ,
+        addressNation:  [{ required: true, message: 'addressNation is required' }] ,
+        addressCity:  [{ required: true, message: 'addressCity is required' }] ,
+        addressArea:  [{ required: true, message: 'addressArea is required' }] ,
+        addressAreaC:  [{ required: true, message: 'addressAreaC is required' }] ,
+      },
+      field:{
+        placeholderAddressStreet: '請輸入街道名称',
+        addressStreet: 'addressStreet', 
+        placeholderAddressHouse: '請輸入屋院名稱',
+        addressHouse: 'addressHouse', 
+        placeholderAddressMansion: '請輸入大廈名稱',
+        addressMansion: 'addressMansion',
+        placeholderBlock: '請輸入block',
+        block: 'block',
+        placeholderFloor: '請輸入楼',
+        floor: 'floor',
+        placeholderFlat: '請輸入室',
+        flat: 'flat',
+        addressLang: 'addressLang',
+        addressNation:'addressNation',
+        addressCity:'addressCity',
+        addressArea:'addressArea',
+        addressAreaC:'addressAreaC',
+      },
+      optionsLang: {
+        data: [
+          { name: '中文地址', code: 1 },
+          { name: '英文地址', code: 2 }]
+      },
+      optionsSelectNation: { data: [{ name: '國家', code: 1 }, { name: '國家1', code: 2 }, { name: '國家2', code: 3 }] }, 
+      optionsSelectCity: { data: [{ name: '城市', code: 1 }, { name: '城市1', code: 2 }, { name: '城市2', code: 3 }] }, 
+      optionsSelectArea: { data: [{ name: '區域', code: 1 }, { name: '區域1', code: 2 }, { name: '區域2', code: 3 }] }, 
+      optionsSelectAreaC: { data: [{ name: '子地區', code: 1 }, { name: '子地區1', code: 2 }, { name: '子地區2', code: 3 }] }, 
+    },
+    { type: 'title', title: '标题内容'},
+    { label: '姓名',
+      type: 'name', 
+      disabled: false , 
+      rules: {
+        nameEnFamily:  [{ required: true, message: '11 is required' }] ,
+        nameEn:  [{ required: true, message: '22 is required' }] ,
+        nameChFamily:  [{ required: true, message: '33 is required' }] ,
+        nameCh:  [{ required: true, message: '44 is required' }] ,
+      },
+      placeholderNameChFamily: '請輸入中文姓',
+      placeholderNameEnFamily: '請輸入英文姓',
+      placeholderNameEn: '請輸入英文名',
+      placeholderNameCh: '請輸入中文名',
+      field: { 
+        nameEnFamily: 'nameEnFamily',
+        nameEn: 'nameEn', 
+        nameChFamily: 'nameChFamily', 
+        nameCh: 'nameCh'
+      },
+    },
+    {type: 'slotItem1'},
+    {type: 'slotItem2'},
+    {type: 'slotItem3'},
+    {type: 'slotItem4'},
+    { label: '单选', 
+      field: 'radioValue', 
+      rules: [{ required: true, message: '单选 is required' }],
+      type: 'radio', 
+      options: { data: [{ name: '男', code: 1 }, { name: '女', code: 0 }] } 
+    },
+    { label: '性别', 
+      field:'gender', 
+      // style: 'width: 100%',
+      rules: [{ required: true, message: '性别 is required' }],
+      type: 'gender', 
+      options: { data: [{ name: '男', code:  "F" }, { name: '女', code: "M" }] } 
+    },
+    { label: '多选',
+      field: 'hobbies', 
+      style: 'width: 100%',
+      rules: [{ required: true, message: '多选 is required' }],
+      type: 'checkbox', 
+      ways: 'row', //column or row
+      options: { data: [{ name: '吃饭', code: 1 }, { name: '睡觉', code: 2 }, { name: '写代码', code: 3 }] } 
+    },
+    {type: 'slotItem5'},
+    { label: '下拉', 
+      rules: [{ required: true, message: '下拉 is required' }],
+      field: 'job', 
+      type: 'select',
+      options: { data: [{ name: '吃饭', code: 1 }, { name: '睡觉', code: 2 }, { name: '写代码', code: 3 }] } 
+    },
+    { label: '密码', 
+      field: 'password', 
+      rules: [{ required: true, message: '密码 is required' }],
+      type: 'password', 
+      placeholder: '这是一个密码输入框' 
+    },
+    { label: '只读', 
+      field: 'readonly', 
+      rules: [{ required: true, message: '只读 is required' }],
+      readonly: true, 
+      placeholder: '这是一个只读输入框' 
+    },
+    { label: '日期', 
+      field: 'date', 
+      rules: [{ required: true, message: '日期 is required' }],
+      type: 'datetime', 
+      placeholder: '请选择日期' 
+    },
+    { label: '留言板', 
+      rules: [{ required: true, message: '留言板 is required' }],
+      field: 'summary', 
+      type: 'textarea', 
+      placeholder: '留言板' 
+    },
+    { label: '手机号码', 
+      rules: {
+        areaCode:  [{ required: true, message: 'areaCode1 is required' }] ,
+        phoneNumber:  [{ required: true, message: 'phoneNumber1 is required' }] ,
+      },
+      field: {
+        areaCode:'areaCode',
+        phoneNumber:'phoneNumber'
+      }, 
+      disabled:false,
+      type: 'phone', 
+      placeholder: '请输入手机号码' ,
+      clearable:true,
+      options: {placeholder:'', data: [{ name: '+852', code: 1 }, { name: '+654', code: 2 }, { name: '+765', code: 3 }] } 
+    },
+    { label: '手机号码2', 
+      rules: {
+        areaCode:  [{ required: true, message: 'areaCode2 is required' }] ,
+        phoneNumber:  [{ required: true, message: 'phoneNumber2 is required' }] ,
+      },
+      field: {
+        areaCode:'areaCode2',
+        phoneNumber:'phoneNumber2'
+      }, 
+      disabled:false,
+      type: 'phone', 
+      placeholder: '请输入手机号码' ,
+      clearable:true,
+      options: {placeholder:'', data: [{ name: '+852', code: 1 }, { name: '+654', code: 2 }, { name: '+765', code: 3 }] } 
+    }
+  ],
+  customkeyForm: [
+    { label: '标题', field: 'name' },
+    { label: '性别', field: 'gender', type: 'radio', options: { labelkey: 'title', valueKey: 'val', data: [{ title: '男', val: 1 }, { title: '女', val: 0 }] } }
+  ],
+  ruleForm: [
+    { label: '姓名', field: 'name', rules: [{ required: true, message: 'name is required' }] },
+    { label: '邮箱', field: 'email', rules: [{ required: true, validator: checkEmail }] }
+  ]
+} as Record<string, Form.FieldItem[]>
+