|
|
@@ -0,0 +1,189 @@
|
|
|
+<template>
|
|
|
+ <uni-section title="自定义校验规则" type="line">
|
|
|
+ <view class="example">
|
|
|
+ <!-- 自定义表单校验 -->
|
|
|
+ <uni-forms ref="customForm" :rules="rules" :modelValue="customFormData" label-align="center">
|
|
|
+ <uni-forms-item label="产品名称" required name="productName" label-width="85" label-align="center">
|
|
|
+ <uni-easyinput v-model="customFormData.productName" placeholder="请输入产品名称" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="地区" required name="area" >
|
|
|
+ <uni-easyinput v-model="customFormData.area" placeholder="请输入地区" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="价格" required name="price" >
|
|
|
+ <uni-easyinput v-model="customFormData.price" placeholder="请输入价格" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="手机号" required name="phone" >
|
|
|
+ <uni-easyinput v-model="customFormData.phone" placeholder="请输入手机号" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="地址" required name="address">
|
|
|
+ <uni-easyinput v-model="customFormData.address" placeholder="请输入地址" />
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="类型" required name="type" >
|
|
|
+ <uni-data-picker placeholder="请选择分类" popup-title="请选择所属分类" :localdata="TreeData" v-model="customFormData.type"/>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="图片" required name="url" label-width="85">
|
|
|
+ <upload :imgArr="imageList" :fileSize="1" :limit="3" @updateImg="updateImg"/>
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-forms>
|
|
|
+ <button type="primary" @click="submit('customForm')">提交</button>
|
|
|
+ </view>
|
|
|
+ </uni-section>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {listConfig,addQuotations} from "@/api/quotations/quotations";
|
|
|
+import upload from '../../components/upload/index.vue'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ upload
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 基础表单数据
|
|
|
+ baseFormData: {
|
|
|
+ productName: '',
|
|
|
+ area:'',
|
|
|
+ price:'',
|
|
|
+ phone:'',
|
|
|
+ address:'',
|
|
|
+ type:'',
|
|
|
+ url:[]
|
|
|
+ },
|
|
|
+ //树数据
|
|
|
+ TreeData:[],
|
|
|
+ // 校验规则
|
|
|
+ rules: {
|
|
|
+ productName: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '产品名称不能为空'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ area: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '地区不能为空'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ phone: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '年龄不能为空'
|
|
|
+ }, {
|
|
|
+ validateFunction: function(rule, value, data, callback) {
|
|
|
+ const reg = /^1[3-9]\.\d{9}$/;
|
|
|
+ if (!reg.test(value)) {
|
|
|
+ callback('请输入正确的手机号码');
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ address: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '地址不能为空'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '分类不能为空'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ imgUrlList: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '图片不能为空'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ price: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '年龄不能为空'
|
|
|
+ }, {
|
|
|
+ format: 'number',
|
|
|
+ errorMessage: '年龄只能输入数字'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ imageList: [],
|
|
|
+ customFormData:{}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {},
|
|
|
+ onReady() {
|
|
|
+ // 设置自定义表单校验规则，必须在节点渲染完毕后执行
|
|
|
+ this.$refs.customForm.setRules(this.rules)
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getType();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getType(){
|
|
|
+ listConfig().then(response => {
|
|
|
+ this.TreeData = this.formatOptions(response.data.quotations);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //转换为下拉选列表
|
|
|
+ formatOptions(data) {
|
|
|
+ return data.map(item => ({
|
|
|
+ value: item.id,
|
|
|
+ text: item.productName,
|
|
|
+ children: item.children ? this.formatOptions(item.children) : null,
|
|
|
+ }));
|
|
|
+ },
|
|
|
+ submit(ref) {
|
|
|
+ this.$refs[ref].validate().then(res => {
|
|
|
+ if (res) {
|
|
|
+ this.customFormData.url = this.imageList.join(',')
|
|
|
+ addQuotations(this.customFormData).then(response => {
|
|
|
+ this.$modal.msgSuccess('提交成功');
|
|
|
+ this.customFormData = {...this.baseFormData};
|
|
|
+ this.imageList = [];
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '../quotations/quotations'
|
|
|
+ });
|
|
|
+ }).catch(err => {
|
|
|
+ console.log('err', err);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ updateImg(imgList) {
|
|
|
+ this.imageList = imgList;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+
|
|
|
+.example {
|
|
|
+ padding: 15px;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.segmented-control {
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.button-group {
|
|
|
+ margin-top: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+
|
|
|
+.form-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.button {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 35px;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
刘浩男