YXGJ/store/budget/my_form.vue

<template>
    <view>
        <view class="requiredFieldOnly-head" v-if="requiredFieldOnly">
            <view class="label">
                基本信息
            </view>
            <view class="content">
                仅显示必填信息<text style="padding: 0 2.5px;" /> <u-switch activeColor="#C40C24" v-model="unShowAll" />
            </view>
        </view>
        <slot name="head" />
        <view v-for="(item, index) in  list " :key="item.key">
            <block v-if="item.isMust || !unShowAll">
                <!-- 文本输入 -->
                <view class="input-box" v-if="item.type == 'text'"
                    :style="{ marginTop: tovw(item.marginTop || 0), opacity: item.disabled ? 0.7 : 1 }"
                    @click="focusLabel = item.label">
                    <view class="box" :style="[{'padding-bottom':item.paddingBottom ? `${tovw(item.paddingBottom)}`:''},{'margin-bottom':item.marginBottom?`${tovw(item.marginBottom)}`:''}]" :class="item.unBorBot ? '' : 'borBot'">
                        <view class="title" v-if="item.title">{{ item.title }}</view>
                        <view class="label">
                            <view class="left">
                                <text class="must" v-if="item.isMust">*</text>
                                {{ item.label }}:
                            </view>
                            <view class="right">{{ item.descript }}</view>
                        </view>
                        <view class="content-box">
                            <view class="content">
                                <input v-if="item.inputmode == 'number'" type="number" :disabled="item.disabled"
                                    placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;"
                                    :focus="focusLabel == item.label" :placeholder="item.placeholder || '请填写' + item.label"
                                    :value="item.value"
                                    @input="onInput($event, index)" :maxlength="item.maxlength || '499'"
                                    confirm-type="done" />
                                <input v-else-if="item.inputmode == 'digit'" type="digit" :disabled="item.disabled"
                                    placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;"
                                    :focus="focusLabel == item.label" :placeholder="item.placeholder || '请填写' + item.label"
                                    :value="item.value"
                                    @input="onInput($event, index)" :maxlength="item.maxlength || '499'"
                                    confirm-type="done" />
                                <textarea v-else :disabled="item.disabled"
                                    placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;"
                                    auto-height type="text" :focus="focusLabel == item.label"
                                    :placeholder="item.placeholder || '请填写' + item.label" :value="item.value"
                                    @input="onInput($event, index)"
                                    :maxlength="item.maxlength || '499'" confirm-type="done" />
                                <icon v-if="item.value && !item.disabled" class="icon" type="clear" size="3.733vw"
                                    @click="onClearInput(index)" />
                            </view>
                            <view v-if="item.errText" class="err-text">
                                <icon class="icon" color="#E3041F" type="clear" size="2.733vw" />
                                {{ item.errText }}
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 文本域 -->
                <view class="textarea-box" v-else-if="item.type == 'textarea'">
                    <textarea class="textarea" :class="item.unBorBot ? '' : 'borBot'" :disabled="item.disabled"
                        placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;" type="text"
                        :placeholder="item.placeholder || '请填写' + item.label" :value="item.value"
                        @input="onInput($event, index)" :maxlength="item.maxlength || '499'" confirm-type="done" />
                </view>
                <!-- 自定义选项分类 -->
                <view class="custom-class-box" v-else-if="item.type == 'customClass'"
                    :style="{ marginTop: tovw(item.marginTop || 0) }">
                    <view class="head">
                        <view class="label">
                            <text class="must" style="color: #E3041F;" v-if="item.isMust">*</text>
                            {{ item.label }}
                        </view>
                        <view class="state">
                            {{ item.isMultipleChoice ? '可多选' : '仅单选' }}
                        </view>
                    </view>
                    <view class="options">
                        <view class="option"
                            :class="item.isMultipleChoice ? (item.value.includes(option.value) ? 'active' : '') : (item.value == option.value ? 'active' : '')"
                            v-for=" option  in  item.list " :key="option.value" hover-class="navigator-hover"
                            @click="changOptions(option.value, index)">
                            {{ option.remarks }}
                        </view>
                    </view>
                </view>
                <!-- 选择所在地区 -->
                <picker class="region" @change="selectRegion($event, index)" mode='region' :disabled="item.disabled"
                    :value="item.value" v-else-if="item.type == 'region'"
                    :style="{ marginTop: tovw(item.marginTop || 0), opacity: item.disabled ? 0.7 : 1 }">
                    <view class="box" :class="item.unBorBot ? '' : 'borBot'">
                        <view class="label">
                            <text class="must" v-if="item.isMust">*</text>
                            {{ item.label }}:
                        </view>
                        <view class="content-box">
                            <view class="value" v-if="item.value.length">
                                {{ item.value.join(",") }}
                            </view>
                            <view v-else class="placeholder" hover-class="none">
                                {{ item.placeholder || '请选择' + item.label }}
                            </view>
                            <view v-if="!item.disabled" class="iconfont icon-a-wodetiaozhuan" />
                        </view>
                    </view>
                </picker>
                <!-- 日期 -->
                <picker class="region" @change="selectRegion($event, index)" mode='date' :disabled="item.disabled"
                    :value="item.value" v-else-if="item.type == 'date'"
                    :style="{ marginTop: tovw(item.marginTop || 0), opacity: item.disabled ? 0.7 : 1 }">
                    <view class="box" :class="item.unBorBot ? '' : 'borBot'">
                        <view class="label">
                            <text class="must" v-if="item.isMust">*</text>
                            {{ item.label }}:
                        </view>
                        <view class="content-box">
                            <view class="value" v-if="item.value">
                                {{ item.value }}
                            </view>
                            <view v-else class="placeholder" hover-class="none">
                                {{ item.placeholder || '请选择' + item.label }}
                            </view>
                            <view v-if="!item.disabled" class="iconfont icon-a-wodetiaozhuan" />
                        </view>
                    </view>
                </picker>
                <!-- 上传附件 -->
                <view class="custom-class-box" v-else-if="item.type == 'upload'"
                    :style="{ marginTop: tovw(item.marginTop || 0) }">
                    <view class="head">
                        <view class="label">
                            <text class="must" v-if="item.isMust">*</text>
                            {{ item.label }}
                        </view>
                        <view class="state">
                            {{ item.placeholder }}
                        </view>
                    </view>
                    <view class="content">
                        <view class="file-box" v-for="file in item.value" :key="file.attachmentid">
                            <image class="image" v-if="file.fileType == 'image'" :src="file.url" mode="aspectFill"
                                lazy-load="true" @click="previewImg(file)" />
                            <video v-else-if="file.fileType == 'video'" class="video" :poster="file.subfiles[0].url"
                                :src="file.url" />
                            <image class="delete" @click.stop="deleteFile(file, index)"
                                src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404241713944430197B47af9b2f.png"
                                mode="widthFix" />
                        </view>
                        <My_upload v-if="item.allowUpload" :showLoading="false" :accept="item.accept"
                            @uploadCallback="uploadCallback($event, index)" @onLoading="onUploadLoading($event, index)">
                            <view class="upload-box" hover-class="navigator-hover">
                                <u-loading-icon v-if="item.loading" />
                                <text v-else class="iconfont icon-xiazai" />
                                <text style="margin-left: 5px;">上传</text>
                            </view>
                        </My_upload>
                    </view>
                </view>
                <!-- 开关 -->
                <view class="region" v-else-if="item.type == 'switch'">
                    <view class="box" :class="item.unBorBot ? '' : 'borBot'">
                        <view class="label">
                            <text class="must" v-if="item.isMust">*</text>
                            {{ item.label }}:
                        </view>
                        <view class="content-box">
                            <view />
                            <u-switch activeColor="#70D95D" v-model="item.value" :disabled="item.disabled"
                                @change="switchChange($event, index)" />
                        </view>
                    </view>
                </view>
                <!-- 性别 -->
                <view class="region" v-else-if="item.type == 'sex'">
                    <view class="box" :class="item.unBorBot ? '' : 'borBot'">
                        <view class="label">
                            <text class="must" v-if="item.isMust">*</text>
                            {{ item.label }}:
                        </view>
                        <u-radio-group v-model="item.value" placement="row" @change="groupChange($event, index)">
                            <u-radio :customStyle="{ marginRight: tovw(60) }" label="男" name="男" />
                            <u-radio label="女" name="女" />
                        </u-radio-group>
                    </view>
                </view>
                <!-- 单选 -->
                <view class="region" v-else-if="item.type == 'radio'">
                    <view class="box" :class="item.unBorBot ? '' : 'borBot'">
                        <view class="label">
                            <text class="must" v-if="item.isMust">*</text>
                            {{ item.label }}:
                        </view>
                        <u-radio-group v-model="item.value" :placement="item.placement || 'row'"
                            @change="groupChange($event, index)">
                            <u-radio v-for="option in item.options"
                                :customStyle="{ marginRight: tovw(option.marginRight || item.marginRight || 0), marginTop: tovw(option.marginTop || item.marginTop || 0) }"
                                :key="option.label" :label="option.label" :name="option.name" />
                        </u-radio-group>
                    </view>
                </view>
                <!-- 路由选择器 -->
                <view class="region" v-else-if="item.type == 'route'"
                    :style="{ marginTop: tovw(item.marginTop || 0), opacity: item.disabled ? 0.7 : 1 }"
                    @click="item.disabled ? '' : toRoute(item, index)">
                    <view class="box" :class="item.unBorBot ? '' : 'borBot'">
                        <view class="label">
                            <text class="must" v-if="item.isMust">*</text>
                            {{ item.label }}:
                        </view>
                        <view class="content-box">
                            <view class="value" v-if="item.value.length">
                                {{ item.showValue.join(",") }}
                            </view>
                            <view v-else class="placeholder" hover-class="none">
                                {{ item.placeholder || '请选择' + item.label }}
                            </view>
                            <view v-if="!item.disabled" class="iconfont icon-a-wodetiaozhuan" />
                        </view>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
import { formattedFiles, viewImage } from "../../utils/settleFiles.js"

export default {
    name: "my_form",
    props: {
        form: {
            type: Array,
            default: []
        },
        isUncomplete: {
            type: Function
        },
        onUploading: {
            type: Function
        },
        requiredFieldOnly: {
            type: Boolean
        },
        isShowAll: {
            type: Function
        },
        interrupt: {
            type: Function
        }
    },
    data() {
        return {
            list: [],
            focusLabel: "",
            unShowAll: false,
        }
    },
    watch: {
        form: {
            handler: function (newVal) {
                if (newVal) {
                    this.list = JSON.parse(JSON.stringify(newVal));
                    setTimeout(() => {
                        this.verify()
                    }, 200);
                }
            },
            immediate: true,
        },
        unShowAll: function (newVal) {
            this.$emit("isShowAll", newVal)
        }
    },
    async created() {
        /*     let list = [{
                key: "name",
                type: "text",
                label: "标题",
                isMust: true,//是否必填
                value: "",
                inputmode:"", //https://uniapp.dcloud.net.cn/component/input.html#type
                marginTop: 10,
                verify:[],
            }, {
                key: "Class",
                type: "customClass",
                label: "标题",
                isMust: false,//是否必填
                isMultipleChoice: true,//是否多选
                value: [],// 多选[] 单选 ""
                isMust: true,//是否必填
                list: await this.getCustomClass('picturespace'),
                marginTop: 10
            },{
                key: "attachmentids",
                type: "upload",
                label: "图片/视频",
                accept:"all",
                placeholder: "可上传多个视频或图片",
                ownertable: "temporary",
                ownerid: 999,
                usetype: 'default',
                allowUpload: true,
                allowDelete: true,
                value:[],
                marginTop: 10
            }, {
                key: "region",
                type: "region",
                label: "所在地区",
                isMust: true,//是否必填
                value: [],
            }, {
                key: "address",
                type: "textarea",
                label: "详细地址",
                isMust: true,//是否必填
                value: '',
            }, {
                key: "isdefault",
                type: "switch",
                label: "设为默认地址",
                isMust: false,//是否必填
                value: false,
                isNum: true,
                unBorBot: true
            }] */
    },
    methods: {
        toRoute(item, index) {
            uni.navigateTo({
                url: item.path
            });
            this.$Http.routeSelected = function (selected) {
                this.$emit('interrupt', item, selected, index)
                delete this.$Http.routeSelected;
            }.bind(this)
        },
        onInput(e, index) {
            let item = this.list[index];
            item.errText = "";
            this.$set(this.list[index], 'value', e.detail.value)
            if (item.verify && item.verify.length && item.value != '') {
                let err = item.verify.find(r => !new RegExp(r.reg).test(item.value));
                if (err) this.$set(this.list[index], 'errText', err.errText)
            }
            this.verify()
        },
        setItem(index, item, back = false) {
            this.$set(this.list, index, item)
            this.verify()
            if (back) uni.navigateBack();
        },
        setValue(index, value, back = false) {
            this.$set(this.list[index], 'value', value)
            this.verify()
            if (back) uni.navigateBack();
        },
        onClearInput(index) {
            let item = this.list[index];
            item.errText = ''
            this.$set(this.list[index], 'value', '')
            this.verify()
        },
        switchChange(e, index) {
            this.$set(this.list[index], 'value', e)
            this.verify()
        },
        changOptions(value, index) {
            let item = this.list[index];
            if (item.isMultipleChoice) {
                let i = -1;
                try {
                    i = item.value.findIndex(v => v == value)
                } catch (error) {
                }
                if (i == -1) {
                    item.value.push(value)
                } else {
                    item.value.splice(i, 1)
                }
                this.$set(this.list[index], 'value', item.value)
            } else {
                this.$set(this.list[index], 'value', value)
            }
            this.verify()
        },
        verify() {
            let list = this.list.filter(v => v.isMust);
            let Uncomplete = false;
            if (list.length) Uncomplete = list.some(v => {
                let res = false;
                if (v.type == 'customClass') {
                    if (v.isMultipleChoice) {
                        res = v.value.length == 0;
                    } else {
                        res = v.value == "";
                    }
                } else if (v.type == 'upload') {
                    res = v.value.length == 0;
                } else if (v.type == 'text') {
                    res = v.value == "";
                    if (v.errText) res = true;
                } else {
                    res = v.value == "";
                }
                return res
            })
            if (!Uncomplete) Uncomplete = this.list.filter(v => !v.isMust).some(v => v.errText);
            this.$emit("isUncomplete", Uncomplete)
        },
        previewImg(item) {
            viewImage(item.url)
        },
        uploadCallback(attachmentids, index) {
            let item = this.list[index];
            this.$Http.basic({
                "classname": "system.attachment.Attachment",
                "method": "createFileLink",
                "content": {
                    ownertable: item.ownertable,
                    ownerid: item.ownerid,
                    usetype: item.usetype,
                    attachmentids
                }
            }).then(res => {
                console.log('绑定附件', res)
                if (this.cutoff(res.msg)) return;
                res.data = formattedFiles(res.data)
                item.value.push(res.data[0]);

                //临时文件
                if (res.data[0].ownertable == "temporary") try {
                    item.temporarys.push(attachmentids[0])
                } catch (error) {
                    item.temporarys = [attachmentids[0]]
                }

                this.$set(this.list[index], 'value', item.value)
                this.verify()
            })
        },
        deleteFiles() {
            this.list.forEach(v => {
                if (v.type == 'upload') {
                    let linksids = v.value.filter(v => v.ownertable == "temporary").map(v => v.linksid)
                    if (linksids.length) this.$Http.basic({
                        "classname": "system.attachment.Attachment",
                        "method": "deleteFileLink",
                        "content": {
                            linksids
                        }
                    }).then(res => {
                        console.log("处理删除附件", res)
                        if (this.cutoff(res.msg)) return;
                    });
                }
            });
        },
        onUploadLoading(e, index) {
            this.$set(this.list[index], 'loading', e)
            this.$emit("onUploading", e)
        },
        groupChange(e, index) {
            this.$set(this.list[index], 'loading', e)
            this.verify()
        },
        selectRegion({ detail }, index) {
            this.$set(this.list[index], 'value', detail.value)
            this.verify()
        },
        deleteFile(flie, index) {
            let item = this.list[index];
            item.value = item.value.filter(v => v.attachmentid != flie.attachmentid)
            //临时文件
            if (flie.ownertable == "temporary") {
                item.temporarys = item.temporarys.filter(v => v != flie.attachmentid)
                this.$Http.basic({
                    "classname": "system.attachment.Attachment",
                    "method": "deleteFileLink",
                    "content": {
                        linksids: [flie.linksid]
                    }
                }).then(res => {
                    console.log("处理删除附件", res)
                    if (this.cutoff(res.msg)) return;
                });
            } else {
                try {
                    item.linksids.push(flie.linksid)
                } catch (error) {
                    item.linksids = [flie.linksid]
                }
            }
            this.$set(this.list[index], 'value', item.value)
            this.verify()
        },
        submit() {
            return new Promise((resolve, reject) => {
                let res = {};
                this.list.forEach(v => {
                    if (v.type == 'upload') {
                        res.files = {
                            temporarys: [],
                            linksids: [],
                        }
                        try {
                            res.files.temporarys = v.temporarys || []
                        } catch (error) {

                        }
                        try {
                            res.files.linksids = v.linksids || []
                        } catch (error) {

                        }
                    } else if (v.type == 'region') {
                        if (v.value.length) {
                            res.province = v.value[0];
                            res.city = v.value[1];
                            res.county = v.value[2];
                        } else {
                            res.province = ''
                            res.city = ''
                            res.county = ''
                        }
                    } else if (v.type == 'switch') {
                        if (v.isNum) {
                            res[v.key] = v.value ? 1 : 0;
                        } else {
                            res[v.key] = v.value;
                        }
                    } else {
                        try {
                            res[v.key] = v.value.trim();
                        } catch (error) {
                            res[v.key] = v.value;
                        }
                    }
                })
                resolve(res)
            })
        }
    },
}
</script>


<style lang="scss">
.requiredFieldOnly-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100vw;
    height: 45px;
    background: #F7F7F7;
    padding: 0 10px;
    box-sizing: border-box;

    .label {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 15px;
        color: #333333;
        line-height: 22px;
    }

    .content {
        display: flex;
        align-items: center;
        font-family: PingFang SC, PingFang SC;
        font-size: 14px;
        color: #999999;
    }
}

.borBot {
    // border-bottom: 1px #DDDDDD solid;
}

.custom-class-box {
    width: 100%;
    background: #fff;
    padding: 15px 0 15px 10px;
    box-sizing: border-box;

    .head {
        width: 355px;
        height: 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .label {
            font-size: 14px;
            color: #333333;
            line-height: 20px;
        }

        .state {
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 12px;
            color: #999999;
        }
    }

    .options {
        display: flex;
        flex-wrap: wrap;

        .option {
            padding: 6px 10px;
            text-align: center;
            min-width: 81px;
            font-family: PingFang SC, PingFang SC;
            font-size: 14px;
            color: #333333;
            border-radius: 5px;
            background: #F2F2F2;
            margin-top: 10px;
            margin-right: 10px;
            box-sizing: border-box;
        }

        .active {
            background: #C30D23;
            color: #fff;
        }
    }

    .content {
        .file-box {
            position: relative;
            width: 355px;
            height: 240px;
            margin-top: 10px;

            .video,
            .image {
                width: 355px;
                height: 240px;
                border-radius: 5px;
            }

            .delete {
                position: absolute;
                width: 30px;
                top: 0;
                right: 0;
                z-index: 1;
            }
        }

        .upload-box {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 355px;
            height: 45px;
            background: #FFFFFF;
            border-radius: 5px;
            border: 1px dashed #C30D23;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 14px;
            color: #C30D23;
            margin-top: 10px;
        }
    }
}

.textarea-box {
    width: 100%;

    .textarea {
        width: 355px;
        height: 160px;
        padding: 15px 10px;
        box-sizing: border-box;
        margin: 0 auto;
    }
}

.input-box {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 5px;
    .box {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 54.4px;
        box-sizing: border-box;
        border-radius: 8px;
        .title {
            font-weight: bold;
            font-size: 14px;
            color: #333333;
            margin-top: 16px;
            position: relative;
            padding-left: 10px;
            &::before {
                content:'';
                width:4px;
                height: 16px;
                background: #C30D23;
                position: absolute;
                top: 1px;
                left: 0;
            }
        }
    }

    .label {
        width: 100%;
        margin: 14px 0 11px 0;
        line-height: 20px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        color: #666666;
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: baseline;
        .right {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #E3041F;
        }
        .must {
            color: #E3041F;
            margin-right: 5px;
        }
    }

    .content-box {
        .content {
            flex: 1;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            position: relative;
            input {
                width: 100%;
                height: 50px;
                background: #F7F7F7;
                border-radius: 8px 8px 8px 8px;
                border: 1px solid #DDDDDD;
                padding-left: 10px;
            }

            .icon {
                padding: 5px;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                z-index: 3;
            }
        }

        .err-text {
            font-size: 12px;
            color: #E3041F;
            margin-bottom: -12px;

            .icon {
                margin-right: 2px;
            }
        }

    }
}

.region {
    width: 100vw;
    background: #fff;
    box-sizing: border-box;
    padding: 15px 0 0 10px;

    .box {
        display: flex;
        padding-bottom: 15px;
        padding-right: 10px;
        box-sizing: border-box;

        .label {
            width: 100px;
            margin-right: 10px;
            line-height: 20px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 14px;
            color: #666666;
            flex-shrink: 0;

            .must {
                color: #E3041F;
                margin-right: 5px;
            }
        }

        .content-box {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 20px;
            line-height: 20px;

            .placeholder {
                font-family: Source Han Sans SC, Source Han Sans SC;
                font-size: 14px;
                color: #BBBBBB;
            }


        }
    }


}
</style>