0.0.18 • Published 11 months ago
ahings-form v0.0.18
avue-form
更新日志
0.0.18 增加人员组件弹框销毁
0.0.15 修复人员组件内嵌编辑时值带不进编辑的问题
0.0.14 ---------
0.0.13 修复表格组件内嵌编辑使用searchInput组件套crue-form-table时，值选不中问题
0.0.12 修复表格组件内嵌新增使用searchInput组件套crue-form-table时，值选不中问题
0.0.11 switch组件回显，清除列表自带新增按钮的表单缓存
0.0.10 表格组件新增propName参数Project setup
npm installCompiles and hot-reloads for development
npm run serve打包
npm run lib发布
npm publish引入到项目
npm install ahings-form
import avueForm from 'avue-form'
import elementPlus from 'element-plus'
import axios from '@src/utils/request'
import 'ahings-form/lib/index.css'
app.use(avueForm, { elementPlus, axios })组件使用说明
things-form
该组件主要用三种用法，也是大多数管理系统中常用的三种用法。
- 列表页（crud-table）
- 常规form表单详情填报页（crud-form）
- 特殊表格类form表单详情填报页（crud-form-table）
1. 列表页（crud-table）
- 使用范例：
html部分
<crud-table
ref="crudRef" 绑定crud组件
v-model="form" 使用页面弹框编辑时绑定的行内表单数据
v-model:page="page" 绑定分页数据 //不用展示底部分页组件时直接删除该行就行
:data="listData" 绑定的表格数据
:option="option" 表格的配置项
:table-loading="listLoading" 表格的请求loading
@on-load="onLoad" 表格的数据加载方法
:show-operate='false' 列表右侧操作列，默认true
@search-change="searchChange" 搜索
@on-clear="clickClean" 清空搜索
@row-save="rowSave" 新增方法
@row-del="rowDel" 删除方法
@row-update="rowUpdate" 修改方法
@current-change="currentChange" 当前分页改变方法
@update:model-value="updateForm" 监听行内表单数据
@open-search="openSearch" 打开某一项搜索框，具体看js说明（关键字 searchInput）
:permission="permission" 按钮权限控制,非必填
:before-open="beforeOpen" 行内弹窗操作按钮点击事件(一般用于弹窗前对数据进行处理，比如编辑和查看的时候显示不同的数据or字段)
>
<template #menuRight="{size}">
自定义表头按钮
<el-button :icon="Plus" :size="size" type="primary" @click='add()'>新增</el-button>
</template>
<template #name="{row}">自定义表格内容，使用时需在option表格配置项中配置slot:true{{row.name}}</template>
<template #menu="{size,text,row,type}">
自定义行内按钮（使用这里时如出现同功能的按钮需要在option表格的配置项中将对应的配置置为false）
<el-button :icon="View" :size="size" :type="type" @click='add()'>查看</el-button>
<el-button :icon="EditPen" :size="size" :type="type" @click='add()'>编辑</el-button>
<el-button :icon="Delete" :size="size" type="danger" @click='add()'>删除</el-button>
</template>
</crud-table>js部分
- option配置项
// 当需要对当前表单的字段进行操作时，需将option写进页面中，而不能从别的js文件引入
option: {
tip: false,// 查看时的提示,默认为true，非必填
align: 'center',// 对齐方式
simplePage: true,
searchShow: true,// 搜索框
searchMenuSpan: 8,// 搜索按钮占位（以下都是：每行24栅格）
searchSpan: 8,// 每个搜索条件的占位
tree: true,
border: true,// 表格边框
selection:true,// 列表左侧选择按钮，默认true
index: true,// 序号,默认为true
indexLabel: '序号',
selection: true,// 选择框
addBtn: true,// 新增按钮，默认为打开一个弹窗进行新增，表单使用的option是列表的option，设为false时可以在上面自定义---使用场景，新增时打开新页面需设为false
addBtnText: '新增',
delBtn: true,// 删除按钮，同上
viewBtn: false,// 查看按钮，同上
editBtn: true,// 编辑按钮，同上
dialogWidth: 900,// 打开的弹框宽度，单位为px
dialogClickModal: false,
labelWidth: 140,// label的宽度，默认为140，单位为px，
scrollbar: true,// 滚动条
searchLabelWidth: 100,// 搜索框label的宽度
labelPosition: 'top',// label的位置（打开的弹窗的label位置，top,right,left,bottom）
column: [
{
label: '年度',// 当前列的label，必填
prop: 'year',// 当前列的prop，也就是后端返回的参数名，必填
propName:false||true||'string',// 当实际展示在页面中的值是createDeptName，但是这个参数也是搜索条件时需要的是createDept,传入propName,当传入为true时，则使用prop+'Name',例如：搜索条件传值sex:1,列表展示sexName:男，当传入具体的值时，则使用传入的值，使用propName，例如搜索条件传sex,但是列表使用xingbieName作为展示字段，则传入xingbieName即可
search: true,// 是否为搜索框条件，默认false，非必填
type: 'year',// 当前列的类型，跟element-ui的type一致，默认为input，，必填
format: 'YYYY',// 当类型为date时，展示的数据需要格式化，必填
valueFormat: 'YYYY',// 当类型为date时，需要格式化，必填
slot: true,// 是否使用slot自定义内容，默认为false，非必填
value:"2023",// 给当前列的默认值，有些时候会用到，比如默认当前年，或者默认值1等等，非必填
searchValue:'2023',// 在列表为搜索条件时，如果有需要填默认搜索值时填写，非必填
span: 12,// 所占栅格，每行24栅格，必填
display: true,// 是否在表单中显示，默认为true，非必填,
viewDisplay:true,// 是否在查看时显示，默认为true，非必填
editDisplay:true,// 是否在编辑时显示，默认为true，非必填
hide: false,// 是否在列表中隐藏，默认为false，非必填
rules: [
{
required: true,// 是否必填
message: '请选择年度',// 提示信息
trigger: 'blur'// 提示方式，blur,change
},{
validator:validatePhone,// 自定义验证，validatePhone示例写在下面
}
]
},
{
label: '名称',
prop: 'name',
type:'select',
dicUrl:'/api/sys/dict/list?type=city',// 获取字典数据,填写url即可，
search:true||'name' // 在列表组件ture，false是搜索条件，在form组件是传参数开启select的查询，同时打开remote和filterable
dicData:[
{label:'北京',value:'1'},
{label:'上海',value:'2'}
],// 静态字典数据,如果有些时候，使用dicUrl不合适，又无法定义为静态字典的时候，将dicData:[],这样才能在js中对这个字段进行赋值，别的字段同理
props:{
label:'dicLabel',// label字段',
value:'dicValue'
},// 重新定义key和value,默认为label和value
},
{
label: '省市区',
prop: 'city',
type: 'cascader',
span: 24,
dicData: city.provinces,
labelArray: {
isLabel: true,
labelKey: [
{ label: 'name', value: 'name' },
{ label: 'name', value: 'name' },
{ label: 'name', value: 'name' }
]
},
props: {
label: 'name',
value: 'id'
},
rules: [
{
required: true,
message: '请输入外观设计数量',
trigger: 'blur'
}
]
},
]
}
/**
* 当type为searchInput与普通的type不一样，需要在crud组件中另外写上一个open-search事件,并在页面中另外写上一个crud-search-table组件，详看things-form/examples/view/table/crud-table.vue页面的searchInput属性
*
*
* 还有部分type有回调方法callBack，具体自己看crud-form
*
*
* 某些时候，字段b的字典取决于字段A的字典返回值，这个时候需要在字段B的option中添加属性dicQuery,详看dicQuery属性
*/- script
<script>
import { toRefs, reactive, ref, onMounted } from 'vue'
export default {
name: 'App',
setup() {
const crudRef = ref()// crud组件
const form = ref({})// 使用页面弹窗新增编辑是需要的
const searchParams = ref({}) // 搜索条件
const state = reactive({
listLoading: false,// 列表loading
page: {
pageSize: 10,
currentPage: 1,
total: 20
},// 分页
listData: [],// 列表数据
searchFlag: false,// openSearch组件的显示
searchData: [{}, {}, {}, {}, {}],
permission: { delBtn: true, addBtn: true, viewBtn: true },// 权限
})
const openSearch = () => {
state.searchFlag = true
// getlist() 获取打开的弹窗的数据
}
const currentChange = val => {
console.log('currentChange', val)
}
const clickClean = () => {}
const searchChange = query => {
console.log('~~~~~~~searchChange~~~~~~~~~~~~~', query)
}
const test = item => {
console.log('~~~~~~~~test~~~~~~~~~~~~~', item)
}
const rowSave = row => {
console.log('~~~~~~~~~~~rowSave~~~~~~~~', row)
}
const rowUpdate = row => {
console.log('~~~~~~~~~~~rowSave~~~~~~~~', row)
}
const rowDel = row => {
console.log('~~~~~~~~~~~rowDel~~~~~~~~', row)
}
const onLoad = () => {
// 详看crud-table演示页
}
const handleAdd = () => {
state.box = true
}
const updateForm = () => {
console.log(form.value, 'form.value')
// form.value = {};
}
const beforeOpen = done => {
done()
// form.value = { parentIdtest: "就搞事", isReturneesadasd: [{ xueli: 0 }] };
}
onMounted(() => {})
return {
form,
crudRef,
...toRefs(state),
option,
clickClean,
openSearch,
searchChange,
test,
rowSave,
rowUpdate,
rowDel,
handleAdd,
formSearch,
beforeOpen,
updateForm,
currentChange,
onLoad
}
}
}
</script>2. 表单页（crud-form）3. 表单表格用法（crud-form-table）
- 用法与table类似，但是要多传入一个edit-type用于新增，编辑or查看，'add','edit','view'，且option中有部分参数不一样，建议复制使用，更多用法请看things-form/examples/view/table/crud-form.vue
html部分
<crud-form
edit-type="add"
v-model:data="form"
:option="formOption"
@openSearch="openSearch"
ref="sonRefP"
@submit="submit"
><template #orgId>
<crud-form-table
ref="projectPersonRef"
:edit-type="isEditType"
v-model="winbidderEntityList"
:row-template="rowTemplatePre"
style="width: 100%"
@open-search="openSearch"
/> </template
></crud-form>js部分
当需要对当前表单的字段进行操作时，需将option写进页面中，而不能从别的js文件引入
懒得写了，跟table大差不差，就是部分传参不一样，建议去页面中复制option
option类型说明:
type: 'input' // 默认类型
type: 'select' // 类型
type:'cascader'// 级联，一般用于省市区
type:'treeselect'// 树形结构选择类型
type:'date'// 日期类型
type:'year'// 年份类型
type:'month'// 月份类型
type:'daterange'// 日期范围类型
type:'monthrange'// 月份范围类型
type:'inputNumber'// 数字类型
type:'textarea' // 文本框
type:'searchInput'// 特殊搜索框
type:'switch'// 开关类型
type:'radio'// 单选
type:'checkbox'// 多选
type:'colorPicker'// 颜色选择示例
- validatePhone
export function validatePhone(rule:any, value:any, callback:any){
if (value || rule.required){
const v = value || '';
const reg = /^1[3-9]\d{9}$/;
if(!reg.test(v)){
callback(new Error('请输入正确的手机号'));
}else{
callback();
}
}else{
callback();
}
}