E_WeChat/Eservice/components/form/form.js

// components/form/form.js
import api from '../../api/api'
import util from '../../../utils/util'

const verify = require('../../../utils/Check');


const app = getApp()
Component({
    /**
     * 组件的属性列表
     */
    options: {
        multipleSlots: true // 复数插槽: 是
    },

    properties: {
        hideBtn: {
            value: false,
            type: Boolean
        },
        formLayoutData: {
            value: {},
            type: Object
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        pickerVisible: false,
        dateVisible: false,
        cascaderVisible: false,
        disabledStatus: false,
        pickerIndex: 0,
        timePickerValue: '',
        actPicker: {},
        options: []
    },

    /**
     * 组件的方法列表
     */
    lifetimes: {
        created() {},
        attached() {
            this.getarealist()
            getApp().globalData.formData = this
        }
    },
    methods: {

        onBlur(detail) {

            let data = detail.currentTarget.dataset.item

            let index = detail.currentTarget.dataset.index
            //添加排除特殊字符
            this.data.formLayoutData.formInfo[index].inputValue = verify.queryStr(detail.detail.value);
            this.setData({
                formLayoutData: this.data.formLayoutData
            })

            if (data.role.formatter) {
                let regStatus = data.role.formatter(detail.detail.value)
                this.setErrorMsg(regStatus, index)
            }
        },
        onClear(detail) {
            let index = detail.currentTarget.dataset.index

            this.data.formLayoutData.formInfo[index].inputValue = detail.detail.value

            this.setData({

                formLayoutData: this.data.formLayoutData

            })
        },
        onPicker(detail) {
            let data = detail.currentTarget.dataset.item
            this.setData({
                pickerIndex: detail.currentTarget.dataset.index,
                pickerVisible: true,
                actPicker: {
                    label: data.label,
                    data: data.data
                }
            })
            console.log(this.data.formLayoutData.formInfo)
        },
        onPickerConfirm(detail) {
            this.data.formLayoutData.formInfo[this.data.pickerIndex].inputValue = detail.detail.value[0]
            this.data.actPicker.data.forEach(e => {
                if (e.value === detail.detail.value[0]) {
                    this.data.formLayoutData.formInfo.filter(v => {
                        if (v.id === e.hide) {
                            v.force = false
                            v.errorMsg = null,
                                v.inputValue = 0
                        }
                    })
                }
            })
            this.setData({
                formLayoutData: this.data.formLayoutData
            })
        },
        showDatePicker(detail) {
            let data = detail.currentTarget.dataset.item
            this.setData({
                pickerIndex: detail.currentTarget.dataset.index,
                dateVisible: true,
                timePickerValue: data.inputValue
            })
        },
        onTimePickerConfirm(detail) {
            this.data.formLayoutData.formInfo[this.data.pickerIndex].inputValue = detail.detail.value
            this.setData({
                formLayoutData: this.data.formLayoutData
            })
        },
        showCascader(detail) {
            let data = detail.currentTarget.dataset.item
            this.setData({
                pickerIndex: detail.currentTarget.dataset.index,
                cascaderVisible: true,
            })
        },

        // onChange (detail) {
        //   let data = detail.currentTarget.dataset.item

        //   let index = detail.currentTarget.dataset.index

        //   this.data.formLayoutData.formInfo[index].inputValue = detail.detail.value

        //   if (data.role.formatter) {

        //     let regStatus = data.role.formatter(detail.detail.value)
        //     this.setErrorMsg(regStatus,index)
        //   }
        // },
        onChange(detail) {
            this.data.formLayoutData.formInfo[this.data.pickerIndex].inputValue = detail.detail.selectedOptions.map(e => {
                return e.value
            }).join(',')
            this.setData({
                formLayoutData: this.data.formLayoutData
            })
        },
        validate(fn) {
            let arr = this.data.formLayoutData.formInfo.map((e, index) => {
                if (!e.force) return e
                if (e.label === '关联订单') console.log(e.force && e.inputValue !== '')
                if (e.force && e.inputValue !== '') {
                    if (e.role.formatter) {
                        let regStatus = e.role.formatter(e.inputValue)
                        this.setErrorMsg(regStatus, index)
                    } else {
                        this.setErrorMsg('', index)
                    }
                } else {
                    this.setErrorMsg(e.label + '不能为空', index)
                }
                return e
            })
            let isValidate = !arr.some(item => (item.errorMsg && item.errorMsg !== '') && item.label !== '关联订单')
            fn(isValidate)
        },
        setErrorMsg(msg, index) {
            this.data.formLayoutData.formInfo[index].errorMsg = msg
            this.setData({
                formLayoutData: this.data.formLayoutData
            })
        },
        async getarealist() {
            const res = await api.arealist()
            this.setData({
                options: util.createMenu(res.data)
            })
        },

        setObjectData(data) {
            console.log(data)
            let that = this,
                obj = {}
            that.setData({
                disabledStatus: false
            })
            data.forEach(e => {
                if (e.type === 'upload') {
                    obj[e.id] = that.selectComponent("#upload").handleBind();
                } else if (e.id == "provinceArr") {
                    let arr = e.inputValue.split(",");
                    obj.province = arr[0] || ""
                    obj.city = arr[1] || ""
                    obj.county = arr[2] || ""
                } else {
                    obj[e.id] = e.inputValue
                }
            })
            that.triggerEvent("click", obj);
        },
        formSubmit() {
            var that = this

            that.validate((valid) => {
                console.log(valid)
                if (valid) {
                    that.setObjectData(that.data.formLayoutData.formInfo)
                } else {
                    return false;
                }
            });
        }
    }
})