MD_worker/pages/workOrder/work.vue

<template>
    <view class="content">
        <up-form :model="form" labelWidth="70" ref="uFormRef" disabled>
            <block v-if="workpresetjson.questionedit != 0 && workpresetjson.questionoption">
                <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 :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="oldtitems" :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="配件清单" prop="items" required>
                        <view class="options-box">
                            <view class="option active" hover-class="navigator-hover" @click="toAddItem">
                                + 去添加配件
                            </view>
                        </view>
                    </up-form-item>
                    <accList :list="data.oldtitems" @deleteItem="deleteItem" />
                </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">
                <My_upload :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 :disabled="data.status == 1" v-model="form.textedit" placeholder="文字说明" autoHeight
                    height="20" />
            </up-form-item>
        </up-form>

        <view class="but-box" v-if="data.status != '1'">
            <view class="but-box-item" @click="save">
                <My-button :customStyle="{
                    'background-color': '#FFFFFF',
                    'color': '#3874F6',
                    height: '80rpx',
                }" text="保存" :disabled="loading" :loading="loading1" />
            </view>
            <view class="but-box-item" @click="submit">
                <My-button :customStyle="{
                    height: '80rpx',
                }" text="完成" :disabled="loading1" :loading="loading" />
            </view>
        </view>
        <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() {
    if (data.status == '1') return;
    uni.navigateTo({
        url: '/pages/select/accessories?list=' + JSON.stringify(data.oldtitems || []),
    });

    $Http.selectAcc = (res) => {
        data.oldtitems = res;
        form.oldtitems = data.oldtitems.length ? '1' : '';
        uni.navigateBack();
        delete $Http.selectAcc
    }
}

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

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

let keys = {
    textedit: 'textcontent', // 文本内容
    amountpay: 'amount', // 费用支付
    confirm: 'confirm_value', // 确认信息
    itemtype: "questionoption",
    questionedit: "questionedit",
    passcheck: "passcheck",
}
// keys 与 form 互相转换字段
let formToContent = (form) => {
    let content = {};
    for (let key in keys) {
        if (form[key]) {
            content[keys[key]] = form[key];
        }
    }
    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([]);

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

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

    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;
        });;
        form.oldtitems = data.oldtitems.length ? '1' : '';
        form.additem = form.oldtitems.length ? '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' },
            { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的金额', trigger: 'blur' }
        ],
        fileupload: [
            { required: workpresetjson.fileupload == 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.questionoption) $Http.getClass(workpresetjson.questionoption).then(res => {
        questionoption.value = res.data;
        if (res.code !== 1) return uni.showToast({ title: res.msg, icon: 'none' });
    })

    // 添加表单修改监听
    const originalForm = JSON.parse(JSON.stringify(form));
    watch(form, (newVal) => {
        if (JSON.stringify(newVal) !== JSON.stringify(originalForm)) {
            formModified.value = true;
        }
    }, { deep: true });

});


// 保存
const loading = ref(false);
const loading1 = ref(false);

function submit() {
    if (loading.value) return;
    if (upload.value.isUploading()) return;

    let traintitem = []
    try {
        if (from.additem) {
            traintitem = data.oldtitems.map(v => {
                return {
                    itemid: v.itemid,
                    itemname: v.itemname,
                    model: v.model,
                    price: v.price,
                    qty: v.qty || v.packageqty || 1,
                }
            })
        }
    } catch (error) {

    }

    uFormRef.value.validate().then(valid => {
        if (valid) {
            let content = {
                "sa_workorderid": data.sa_workorderid,
                "sa_workorder_nodeid": data.sa_workorder_nodeid,
                isconfirm: 1,
                ...formToContent(form),
                traintitem
            };
            uni.showModal({
                title: '提示',
                content: '是否确定完成工序？完成后将无法再次编辑。',
                confirmText: '完成',
                success: function (res) {
                    if (res.confirm) {
                        loading.value = true;
                        $Http.basic({
                            "id": "20230209094203",
                            "sa_workorderid": data.sa_workorderid,
                            "sa_workorder_nodeid": data.sa_workorder_nodeid,
                            content
                        }).then(res => {
                            loading.value = false;
                            console.log("提交工单", res);
                            if (res.code == 1) {
                                loading.value = true;
                                upload.value.saveFileLinks('sa_workorder_node', data.sa_workorder_nodeid).then((s) => {
                                    loading.value = false;
                                    formModified.value = false;
                                    setTimeout(() => {
                                        uni.navigateBack()
                                    }, 800);
                                })
                            }
                            uni.showToast({ title: res.code !== 1 ? res.msg : "提交成功", icon: 'none', mask: res.code == 1 });
                        }).catch(err => {
                            loading.value = false;
                            console.error("提交工单失败", err);
                            uni.showToast({ title: '提交失败，请稍后重试', icon: 'none' });
                        });
                    }
                }
            });
        }
    })
}

function save() {
    if (loading1.value) return;
    if (upload.value.isUploading()) return;
    let traintitem = []
    try {
        if (from.additem) {
            traintitem = data.oldtitems.map(v => {
                return {
                    itemid: v.itemid,
                    itemname: v.itemname,
                    model: v.model,
                    price: v.price,
                    qty: v.qty || v.packageqty || 1,
                }
            })
        }
    } catch (error) {

    }
    let content = {
        "sa_workorderid": data.sa_workorderid,
        "sa_workorder_nodeid": data.sa_workorder_nodeid,
        isconfirm: 0,
        ...formToContent(form),
        traintitem
    };
    loading1.value = true;
    $Http.basic({
        "id": "20230209094203",
        "sa_workorderid": data.sa_workorderid,
        "sa_workorder_nodeid": data.sa_workorder_nodeid,
        content
    }).then(res => {
        loading1.value = false;
        console.log("保存工单", res);
        if (res.code == 1) {
            loading1.value = true;
            upload.value.saveFileLinks('sa_workorder_node', data.sa_workorder_nodeid).then((s) => {
                loading1.value = false;
            })
            formModified.value = false;
        }
        uni.showToast({ title: res.code !== 1 ? res.msg : "保存成功", icon: 'none' });
    })
}

function clickRadio(value, key) {
    if (data.status == '1') return;
    form[key] = form[key] == value ? "" : value;
    if (key == 'passcheck') {
        if (value == '0') {
            rules.textedit[0].required = true;
            rules.fileupload[0].required = true;
        } else {
            rules.textedit[0].required = workpresetjson.textedit == 11;
            rules.fileupload[0].required = workpresetjson.fileupload == 11;
        }
        uFormRef.value.setRules(rules);
    } else if (key == 'additem') {
        if (value == '1') {
            rules.oldtitems = [{ required: true, message: '请选择配件清单', trigger: 'change' }];
        } else {
            delete rules.oldtitems;
        }
        if (value == '1' && !data.oldtitems.length) toAddItem();
        form.oldtitems = data.oldtitems.length ? '1' : '';
        uFormRef.value.setRules(rules);
    }
}

function uploadCallback(list) {
    console.log("上传回调", list);
    form.fileupload = list.fileList.length ? '1' : '';
    console.log("form", form)
}


</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>