md-h5/pages/serviceSeeking/work.vue

<template>
    <My-shade />
    <view class="content">
        <up-form :model="form" labelWidth="70" ref="uFormRef" disabled>
            <block v-if="workpresetjson.questionedit != 0">
                <up-form-item label="故障类型" prop="itemtype" :required="workpresetjson.questionedit == 11">
                    <view class="options-box">
                        <view class="option" :class="form.itemtype == item.value ? 'active' : ''"
                            v-for="item in questionoption" :key="item.value"
                            @click="clickRadio(item.value, 'itemtype')">
                            {{ item.value }}
                        </view>
                    </view>
                </up-form-item>
                <up-form-item label="问题编辑" prop="questionedit" :required="workpresetjson.questionedit == 11">
                    <up-textarea maxlength="499" :disabled="data.status == 1" v-model="form.questionedit"
                        placeholder="问题编辑" autoHeight height="20" />
                </up-form-item>
            </block>


            <up-form-item v-if="workpresetjson.passcheck != 0" label="合格确认" prop="passcheck"
                :required="workpresetjson.passcheck == 11">
                <view class="options-box">
                    <view class="option" :class="form.passcheck == item.value ? 'active' : ''" v-for="item in [
                        { value: '1', name: '正常' },
                        { value: '0', name: '异常' }]" :key="item.value" @click="clickRadio(item.value, 'passcheck')">
                        {{ item.name }}
                    </view>
                </view>
            </up-form-item>

            <view v-if="workpresetjson.additem != 0">
                <up-form-item label="是否更换配件" prop="additem" :required="workpresetjson.additem == 11">
                    <view class="options-box">
                        <view class="option" :class="form.additem == item.value ? 'active' : ''" v-for="item in [
                            { value: '1', name: '是' },
                            { value: '0', name: '否' }]" :key="item.value" @click="clickRadio(item.value, 'additem')">
                            {{ item.name }}
                        </view>
                    </view>
                </up-form-item>

                <block v-if="form.additem == 1">
                    <up-form-item :label="`新配件(${data.newtitems.length})`" prop="newtitems" required>
                        <view class="options-box">
                            <view class="option active" hover-class="navigator-hover" @click="toAddItem('newtitems')">
                                + 去添加新配件
                            </view>
                        </view>
                    </up-form-item>
                    <accList :list="data.newtitems" :disabled="data.status == 1"
                        @deleteItem="deleteItem($event, 'newtitems')" />

                    <up-form-item :label="`旧配件(${data.oldtitems.length})`">
                        <view class="options-box">
                            <view class="option active" hover-class="navigator-hover" @click="toAddItem('oldtitems')">
                                + 去添加旧配件
                            </view>
                        </view>
                    </up-form-item>
                    <accList :list="data.oldtitems" :disabled="data.status == 1"
                        @deleteItem="deleteItem($event, 'oldtitems')" />
                </block>
            </view>

            <up-form-item v-if="workpresetjson.confirm != 0" label="确认信息" prop="confirm"
                :required="workpresetjson.confirm == 11">
                <view class="options-box">
                    <view class="option" :class="form.confirm == item ? 'active' : ''"
                        v-for="(item) in workpresetjson.confirm_options" :key="item"
                        @click="clickRadio(item, 'confirm')">
                        {{ item }}
                    </view>
                </view>
            </up-form-item>

            <up-form-item v-if="workpresetjson.amountpay != 0" label="费用支付" prop="amountpay"
                :required="workpresetjson.amountpay == 11">
                <up-input :disabled="data.status == 1" v-model="form.amountpay" type="number" placeholder="费用支付">
                    <template #suffix>
                        元
                    </template>
                </up-input>
            </up-form-item>

            <up-form-item v-if="workpresetjson.fileupload != 0" label="拍照" prop="fileupload"
                :required="rules.fileupload[0].required">

                <up-image v-if="data.status == 1 && data.attinfos.length == 0" :show-loading="true" src="" width="80px"
                    height="80px" @click="click"></up-image>
                <My_upload v-else :disabled="data.status == 1" ref="upload" :fileList="data.attinfos"
                    @uploadCallback="uploadCallback" />
            </up-form-item>

            <up-form-item v-if="workpresetjson.textedit != 0" label="文字说明" prop="textedit"
                :required="rules.textedit[0].required">
                <up-textarea maxlength="499" :disabled="data.status == 1" v-model="form.textedit" placeholder="文字说明"
                    autoHeight height="20" />
            </up-form-item>
        </up-form>
        <view style="height: 50px;" />
        <page-container :show="true" :overlay="false" @beforeleave="beforeleave" />
    </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import accList from "./modules/products.vue";

const { $Http } = getCurrentInstance().proxy;
const uFormRef = ref(null);
const upload = ref(null);

let formModified = ref(false);

function beforeleave(e) {
    if (formModified.value && data.status != '1') {
        uni.showModal({
            title: '提示',
            content: '是否保存当前编辑内容？',
            confirmText: '保存',
            cancelText: '不保存',
            success: function (res) {
                if (res.confirm) {
                    save()
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 500);
                } else if (res.cancel) {
                    uni.navigateBack()
                }
            }
        });
    } else {
        uni.navigateBack()
    }
}

// 去添加配件
function toAddItem(key = 'oldtitems') {
    if (data.status == '1') return;
    $Http.basicsData = {
        selected: key,
        newtitems: deepCloneArray(data.newtitems) || [],
        oldtitems: deepCloneArray(data.oldtitems) || [],
    }
    uni.navigateTo({
        url: '/pages/select/accessories'
    });
    $Http.selectAcc = (res) => {
        data.newtitems = res.newtitems;
        data.oldtitems = res.oldtitems;
        form.newtitems = res.newtitems.length ? '1' : '';

        uni.navigateBack();
        delete $Http.selectAcc
        delete $Http.basicsData
    }
}

// 帮我写一个[{},{}] 深拷贝的方法
function deepCloneArray(arr) {
    return arr.map(item => {
        return { ...item };
    })
}

// 删除配件
function deleteItem(item, key = 'oldtitems') {
    data[key] = data[key].filter(v => v.itemid !== item.itemid);
    if (key == 'newtitems') form.newtitems = data.newtitems.length ? '1' : '';
}

const form = reactive({
    textedit: '', // 上传文本
    confirm: "", // 确认信息
    itemtype: "", // 故障类型
    questionedit: "", // 问题编辑
    additem: "", // 是否更换配件
    passcheck: "", //合格确认 异常时 文字和图片必填
    amountpay: "", // 费用支付
    fileupload: "", // 上传图片
    oldtitems: "",//配件
    newtitems: "",//配件
});

let keys = {
    textedit: 'textcontent', // 文本内容
    amountpay: 'amount', // 费用支付
    confirm: 'confirm_value', // 确认信息
    itemtype: "questionoption",
    questionedit: "questionedit",
}

// keys 与 form 互相转换字段
let formToContent = (form) => {
    let content = {};
    for (let key in form) {
        if (keys[key]) {
            content[keys[key]] = form[key];
        } else {
            content[key] = form[key];
        }
    }
    if (content.amount === '') content.amount = 0;
    return content;
}

let data = {
    attinfos: []
};
let workpresetjson = reactive({});

let rules = reactive({
    textedit: [
        { required: false, message: '请输入说明', trigger: 'blur' }
    ],
    fileupload: [
        { required: false, message: '请上传图片', trigger: 'change' }
    ],
});
const questionoption = ref([]);

function clickRadio() { }

onLoad(() => {
    data = reactive($Http.data);
    data.status = 1;
    delete $Http.data;

    form.fileupload = data.attinfos.length ? '1' : '';
    uni.setNavigationBarTitle({
        title: data.title,
    })
    workpresetjson = Object.assign(workpresetjson, data.workpresetjson);

    if (workpresetjson.additem) {
        data.oldtitems = data.detail[0].oldtitems.map(item => {
            item.imageUrl = item.attinfos.length ? $Http.getSpecifiedImage(item.attinfos[0]) : ''
            return item;
        });
        data.newtitems = data.detail[0].newtitems.map(item => {
            item.imageUrl = item.attinfos.length ? $Http.getSpecifiedImage(item.attinfos[0]) : ''
            return item;
        });

        form.newtitems = data.newtitems.length ? '1' : '';
        form.oldtitems = data.oldtitems.length ? '1' : '';
        form.additem = form.newtitems || form.oldtitems ? '1' : '0';

    }

    rules = Object.assign(rules, {
        textedit: [
            { required: workpresetjson.textedit == 11, message: '请输入说明', trigger: 'blur' },
            { min: 2, max: 500, message: '长度在 2 到 500 个字符', trigger: 'blur' }
        ],
        confirm: [
            { required: workpresetjson.confirm == 11, message: '请选择确认信息', trigger: 'change' }
        ],
        itemtype: [
            { required: workpresetjson.questionedit == 11, message: '请选择故障类型', trigger: 'change' }
        ],
        questionedit: [
            { required: workpresetjson.questionedit == 11, message: '请输入问题编辑', trigger: 'blur' },
            { min: 2, max: 500, message: '长度在 2 到 500 个字符', trigger: 'blur' }
        ],
        additem: [
            { required: workpresetjson.additem == 11, message: '请选择是否更换配件', trigger: 'change' }
        ],
        passcheck: [
            { required: workpresetjson.passcheck == 11, message: '请选择合格确认', trigger: 'change' }
        ],
        amountpay: [
            { required: workpresetjson.amountpay == 11, message: '请输入费用支付', trigger: 'blur', validator: (rule, value) => value !== '' },
            { pattern: /^(0|[1-9]\d*)(\.\d{1,2})?$/, message: '请输入正确的金额', trigger: 'blur' }
        ],
        fileupload: [
            { required: workpresetjson.fileupload == 11, message: '请上传图片', trigger: 'change' }
        ],
        additem: [{ required: workpresetjson.additem == 11, message: '请选择是否更换配件', trigger: 'change' }]

    })

    setTimeout(() => {
        if (data.passcheck == '0') {
            rules.textedit[0].required = true;
            rules.fileupload[0].required = true;
        }
        uFormRef.value.setRules(rules);
    });

    if (workpresetjson.questionedit) $Http.getClass(workpresetjson.questionoption).then(res => {
        questionoption.value = res.data;
        if (res.code !== 1) return uni.showToast({ title: res.msg, icon: 'none' });
    })

    for (let key in keys) {
        if (data[keys[key]]) {
            form[key] = data[keys[key]];
            console.log(key, form[key])
        }
    }
});



</script>

<style lang="scss" scoped>
.content {
    width: 100vw;
    padding: 20px;
    box-sizing: border-box;
    min-height: 100vh;
    background: #fff;


    .picker {
        width: 100%;
        // border-bottom: 1px solid #dadbde;
        font-size: 32rpx;
        color: #606266;
        padding: 9px;
        border-radius: 8rpx;
    }

    .title {
        font-size: 34rpx;
        color: #4773EE;
        margin: 20rpx 0;
        font-weight: bold;
    }

    .options-box {
        position: relative;
        top: -6rpx;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        box-sizing: border-box;

        .option {
            border: 1px solid #dadbde;
            border-radius: 8rpx;
            padding: 10rpx 20rpx;
            margin-right: 18rpx;
            margin-top: 12rpx;
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
            text-align: center;
            min-width: 80rpx;
        }

        .active {
            background: #006EF7;
            color: #fff;
            border-color: #006EF7;
        }
    }

    .but-box {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 40rpx;

        .but-box-item {
            width: 45%;
        }
    }
}
</style>