|
|
@@ -1,315 +1,128 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
- <uni-card :is-shadow="false" is-full>
|
|
|
- <text class="uni-h6">uni-forms 组件一般由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。</text>
|
|
|
- </uni-card>
|
|
|
- <uni-section title="基本用法" type="line">
|
|
|
- <view class="example">
|
|
|
- <!-- 基础用法,不包含校验规则 -->
|
|
|
- <uni-forms ref="baseForm" :model="baseFormData" labelWidth="80px">
|
|
|
- <uni-forms-item label="姓名" required>
|
|
|
- <uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item label="年龄" required>
|
|
|
- <uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" />
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item label="性别" required>
|
|
|
- <uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item label="兴趣爱好" required>
|
|
|
- <uni-data-checkbox v-model="baseFormData.hobby" multiple :localdata="hobbys" />
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item label="自我介绍">
|
|
|
- <uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入自我介绍" />
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item label="日期时间">
|
|
|
- <uni-datetime-picker type="datetime" return-type="timestamp"
|
|
|
- v-model="baseFormData.datetimesingle" />
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item label="选择城市">
|
|
|
- <uni-data-picker v-model="baseFormData.city" :localdata="cityData" popup-title="选择城市">
|
|
|
- </uni-data-picker>
|
|
|
- </uni-forms-item>
|
|
|
-
|
|
|
- <uni-forms-item label="选择技能">
|
|
|
- <uni-data-select v-model="baseFormData.skills" :localdata="skillsRange" >
|
|
|
- </uni-data-select>
|
|
|
- </uni-forms-item>
|
|
|
- </uni-forms>
|
|
|
- </view>
|
|
|
- </uni-section>
|
|
|
-
|
|
|
- <uni-section title="对齐方式" type="line">
|
|
|
- <view class="example">
|
|
|
- <view class="segmented-control">
|
|
|
- <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
|
|
|
- styleType="button">
|
|
|
- </uni-segmented-control>
|
|
|
+ <uni-forms ref="form" :rules="rules" :model="form" labelWidth="80px" :label-position="alignment">
|
|
|
+ <uni-forms-item label="申请人">
|
|
|
+ <uni-easyinput v-model="form.employeeName" disabled />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="部门">
|
|
|
+ <uni-easyinput v-model="form.deptName" disabled />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="职位">
|
|
|
+ <uni-easyinput v-model="form.position" disabled />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="手机号">
|
|
|
+ <uni-easyinput v-model="form.employeePhone" disabled />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="事项标题" required name="title">
|
|
|
+ <uni-easyinput maxlength="20" v-model="form.title" placeholder="请输入申请的简要标题" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="详细描述" required name="description">
|
|
|
+ <uni-easyinput maxlength="200" type="textarea" v-model="form.description" placeholder="请输入详细描述" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="附件">
|
|
|
+ <view class="upload-wrap">
|
|
|
+ <button type="primary" size="mini" @click="handleUploadClick">点击上传</button>
|
|
|
+ <xe-upload ref="XeUpload" :options="uploadOptions" @callback="handleUploadCallback"></xe-upload>
|
|
|
+ <view class="mgb-16 file-wrap" v-for="(item, index) in fileList" :key="index">
|
|
|
+ <view class="btn-click file-line" @click="handlePreview(item)">
|
|
|
+ <view class="file-info">
|
|
|
+ <image :src="icons.file" mode="aspectFill" class="file-icon" />
|
|
|
+ <text class="file-name">{{ item.name || title[type] }}</text>
|
|
|
+ </view>
|
|
|
+ <image :src="icons.close" mode="aspectFill" class="file-icon"
|
|
|
+ @click.stop="handleDeleteFile(index)" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <!-- 展示不同的排列方式 -->
|
|
|
- <uni-forms ref="baseForm" :modelValue="alignmentFormData" :label-position="alignment">
|
|
|
- <uni-forms-item label="姓名" required>
|
|
|
- <uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item label="年龄" required>
|
|
|
- <uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-forms>
|
|
|
- </view>
|
|
|
- </uni-section>
|
|
|
-
|
|
|
- <uni-section title="表单校验" type="line">
|
|
|
- <view class="example">
|
|
|
- <!-- 基础表单校验 -->
|
|
|
- <uni-forms ref="valiForm" :rules="rules" :model="valiFormData" labelWidth="80px">
|
|
|
- <uni-forms-item label="姓名" required name="name">
|
|
|
- <uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item label="年龄" required name="age">
|
|
|
- <uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄" />
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item label="自我介绍">
|
|
|
- <uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-forms>
|
|
|
- <button type="primary" @click="submit('valiForm')">提交</button>
|
|
|
- </view>
|
|
|
- </uni-section>
|
|
|
-
|
|
|
- <uni-section title="自定义校验规则" type="line">
|
|
|
- <view class="example">
|
|
|
- <!-- 自定义表单校验 -->
|
|
|
- <uni-forms ref="customForm" :rules="customRules" labelWidth="80px" :modelValue="customFormData">
|
|
|
- <uni-forms-item label="姓名" required name="name">
|
|
|
- <uni-easyinput v-model="customFormData.name" placeholder="请输入姓名" />
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item label="年龄" required name="age">
|
|
|
- <uni-easyinput v-model="customFormData.age" placeholder="请输入年龄" />
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item label="兴趣爱好" required name="hobby">
|
|
|
- <uni-data-checkbox v-model="customFormData.hobby" multiple :localdata="hobbys" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-forms>
|
|
|
- <button type="primary" @click="submit('customForm')">提交</button>
|
|
|
- </view>
|
|
|
- </uni-section>
|
|
|
-
|
|
|
-
|
|
|
- <uni-section title="动态表单" type="line">
|
|
|
- <view class="example">
|
|
|
- <!-- 动态表单校验 -->
|
|
|
- <uni-forms ref="dynamicForm" :rules="dynamicRules" :model="dynamicFormData" labelWidth="80px">
|
|
|
- <uni-forms-item label="邮箱" required name="email">
|
|
|
- <uni-easyinput v-model="dynamicFormData.email" placeholder="请输入姓名" />
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item v-for="(item,index) in dynamicFormData.domains" :key="item.id"
|
|
|
- :label="item.label+' '+index" required :rules="item.rules" :name="['domains',index,'value']">
|
|
|
- <view class="form-item">
|
|
|
- <uni-easyinput v-model="dynamicFormData.domains[index].value" placeholder="请输入域名" />
|
|
|
- <button class="button" size="mini" type="default" @click="del(item.id)">删除</button>
|
|
|
- </view>
|
|
|
- </uni-forms-item>
|
|
|
- </uni-forms>
|
|
|
- <view class="button-group">
|
|
|
- <button type="primary" size="mini" @click="add">新增域名</button>
|
|
|
- <button type="primary" size="mini" @click="submit('dynamicForm')">提交</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-section>
|
|
|
+
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="备注">
|
|
|
+ <uni-easyinput maxlength="200" type="textarea" v-model="form.remarks" placeholder="请输入备注" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-forms>
|
|
|
+ <view class="button-group">
|
|
|
+ <button type="primary" size="mini" @click="submit('form')">提交</button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import { uploadFile } from "@/api/system/user"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- // 基础表单数据
|
|
|
- baseFormData: {
|
|
|
- name: '',
|
|
|
- age: '',
|
|
|
- introduction: '',
|
|
|
- sex: 2,
|
|
|
- hobby: [5],
|
|
|
- datetimesingle: 1627529992399,
|
|
|
- city: '',
|
|
|
- skills: 0
|
|
|
+ alignment:'top',
|
|
|
+ uploadOptions: {},
|
|
|
+ fileList: [],
|
|
|
+ icons: {
|
|
|
+ close: '/static/icon_close.png',
|
|
|
+ file: '/static/icon_file.png',
|
|
|
},
|
|
|
- // 城市数据
|
|
|
- cityData: [{
|
|
|
- text: "北京",
|
|
|
- value: "10001",
|
|
|
- }, {
|
|
|
- text: "上海",
|
|
|
- value: "10002",
|
|
|
- }, {
|
|
|
- text: "深圳",
|
|
|
- value: "10004",
|
|
|
- }],
|
|
|
- skillsRange: [{
|
|
|
- value: 0,
|
|
|
- text: "编程"
|
|
|
- },
|
|
|
- {
|
|
|
- value: 1,
|
|
|
- text: "绘画"
|
|
|
- },
|
|
|
- {
|
|
|
- value: 2,
|
|
|
- text: "运动"
|
|
|
- },
|
|
|
- ],
|
|
|
// 表单数据
|
|
|
- alignmentFormData: {
|
|
|
- name: '',
|
|
|
- age: '',
|
|
|
- },
|
|
|
- // 单选数据源
|
|
|
- sexs: [{
|
|
|
- text: '男',
|
|
|
- value: 0
|
|
|
- }, {
|
|
|
- text: '女',
|
|
|
- value: 1
|
|
|
- }, {
|
|
|
- text: '保密',
|
|
|
- value: 2
|
|
|
- }],
|
|
|
- // 多选数据源
|
|
|
- hobbys: [{
|
|
|
- text: '跑步',
|
|
|
- value: 0
|
|
|
- }, {
|
|
|
- text: '游泳',
|
|
|
- value: 1
|
|
|
- }, {
|
|
|
- text: '绘画',
|
|
|
- value: 2
|
|
|
- }, {
|
|
|
- text: '足球',
|
|
|
- value: 3
|
|
|
- }, {
|
|
|
- text: '篮球',
|
|
|
- value: 4
|
|
|
- }, {
|
|
|
- text: '其他',
|
|
|
- value: 5
|
|
|
- }],
|
|
|
- // 分段器数据
|
|
|
- current: 0,
|
|
|
- items: ['左对齐', '顶部对齐'],
|
|
|
- // 校验表单数据
|
|
|
- valiFormData: {
|
|
|
- name: '',
|
|
|
- age: '',
|
|
|
- introduction: '',
|
|
|
+ form: {
|
|
|
+ employeeName: undefined,
|
|
|
+ deptName: undefined,
|
|
|
+ position: undefined,
|
|
|
+ employeePhone: undefined,
|
|
|
+ title: undefined,
|
|
|
+ fileIdList: undefined,
|
|
|
+ remarks: undefined,
|
|
|
+ peopleList: '',
|
|
|
},
|
|
|
// 校验规则
|
|
|
rules: {
|
|
|
- name: {
|
|
|
+ title: {
|
|
|
rules: [{
|
|
|
required: true,
|
|
|
- errorMessage: '姓名不能为空'
|
|
|
- }]
|
|
|
+ errorMessage: '请输入申请的简要标题'
|
|
|
+ }, ]
|
|
|
},
|
|
|
- age: {
|
|
|
+ description: {
|
|
|
rules: [{
|
|
|
required: true,
|
|
|
- errorMessage: '年龄不能为空'
|
|
|
- }, {
|
|
|
- format: 'number',
|
|
|
- errorMessage: '年龄只能输入数字'
|
|
|
- }]
|
|
|
+ errorMessage: '请输入详细描述'
|
|
|
+ }, ]
|
|
|
}
|
|
|
},
|
|
|
- // 自定义表单数据
|
|
|
- customFormData: {
|
|
|
- name: '',
|
|
|
- age: '',
|
|
|
- hobby: []
|
|
|
- },
|
|
|
- // 自定义表单校验规则
|
|
|
- customRules: {
|
|
|
- name: {
|
|
|
- rules: [{
|
|
|
- required: true,
|
|
|
- errorMessage: '姓名不能为空'
|
|
|
- }]
|
|
|
- },
|
|
|
- age: {
|
|
|
- rules: [{
|
|
|
- required: true,
|
|
|
- errorMessage: '年龄不能为空'
|
|
|
- }]
|
|
|
- },
|
|
|
- hobby: {
|
|
|
- rules: [{
|
|
|
- format: 'array'
|
|
|
- },
|
|
|
- {
|
|
|
- validateFunction: function(rule, value, data, callback) {
|
|
|
- if (value.length < 2) {
|
|
|
- callback('请至少勾选两个兴趣爱好')
|
|
|
- }
|
|
|
- return true
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- dynamicFormData: {
|
|
|
- email: '',
|
|
|
- domains: []
|
|
|
- },
|
|
|
- dynamicLists: [],
|
|
|
- dynamicRules: {
|
|
|
- email: {
|
|
|
- rules: [{
|
|
|
- required: true,
|
|
|
- errorMessage: '域名不能为空'
|
|
|
- }, {
|
|
|
- format: 'email',
|
|
|
- errorMessage: '域名格式错误'
|
|
|
- }]
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- // 处理表单排列切换
|
|
|
- alignment() {
|
|
|
- if (this.current === 0) return 'left'
|
|
|
- if (this.current === 1) return 'top'
|
|
|
- return 'left'
|
|
|
}
|
|
|
},
|
|
|
onLoad() {},
|
|
|
- onReady() {
|
|
|
- // 设置自定义表单校验规则,必须在节点渲染完毕后执行
|
|
|
- this.$refs.customForm.setRules(this.customRules)
|
|
|
- },
|
|
|
methods: {
|
|
|
- onClickItem(e) {
|
|
|
- console.log(e);
|
|
|
- this.current = e.currentIndex
|
|
|
+ handleUploadClick() {
|
|
|
+ this.$refs.XeUpload.upload('file');
|
|
|
},
|
|
|
- add() {
|
|
|
- this.dynamicFormData.domains.push({
|
|
|
- label: '域名',
|
|
|
- value: '',
|
|
|
- rules: [{
|
|
|
- 'required': true,
|
|
|
- errorMessage: '域名项必填'
|
|
|
- }],
|
|
|
- id: Date.now()
|
|
|
- })
|
|
|
+ handleUploadCallback(e) {
|
|
|
+ console.log('UploadCallback', e);
|
|
|
+ let data = { filePath: e.data[0].tempFilePath}
|
|
|
+ uploadFile(data).then(response => {
|
|
|
+ const tmpFiles = ([response.data] || []).map(({ id, url, name, type }) => {
|
|
|
+ return {
|
|
|
+ id,
|
|
|
+ url,
|
|
|
+ name,
|
|
|
+ type,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.fileList.push(...tmpFiles);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 预览
|
|
|
+ handlePreview(val) {
|
|
|
+ console.log('PreviewFile', val);
|
|
|
+ if (val.type == 'image/png' || val.type == 'image/jpg') {
|
|
|
+ return uni.previewImage({
|
|
|
+ current: 0,
|
|
|
+ urls: [val.url],
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
},
|
|
|
- del(id) {
|
|
|
- let index = this.dynamicLists.findIndex(v => v.id === id)
|
|
|
- this.dynamicLists.splice(index, 1)
|
|
|
+ handleDeleteFile(index) {
|
|
|
+ this.fileList.splice(index, 1);
|
|
|
},
|
|
|
submit(ref) {
|
|
|
- console.log(this.baseFormData);
|
|
|
+ console.log(this.form);
|
|
|
this.$refs[ref].validate().then(res => {
|
|
|
console.log('success', res);
|
|
|
uni.showToast({
|
|
|
@@ -324,7 +137,7 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .example {
|
|
|
+ .container {
|
|
|
padding: 15px;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
@@ -353,3 +166,91 @@
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.btn-click {
|
|
|
+ transition: all 0.3s;
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-click:active {
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
+
|
|
|
+.mgb-16 {
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.upload-wrap {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: white;
|
|
|
+ // padding: 32rpx;
|
|
|
+
|
|
|
+ .upload-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 176rpx;
|
|
|
+ border: 2rpx dashed #AAAAAA;
|
|
|
+ background: #FAFAFA;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .upload-icon {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #9E9E9E;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-wrap {
|
|
|
+ .file-line {
|
|
|
+ width: 100%;
|
|
|
+ background: #F5F5F5;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding: 16rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #1A1A1A;
|
|
|
+ line-height: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .file-info {
|
|
|
+ width: 90%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .file-name {
|
|
|
+ max-width: 80%;
|
|
|
+ padding-left: 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-empty {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|