MD_worker/pages/workOrder/work.vue

<template>
    <view class="content">
        <view class="title">
            {{ data.title1 }}
        </view>
        <view class="remarks" style="padding-left: 30rpx;" v-if="data.workpresetjson.remarks">
            — {{ data.workpresetjson.remarks }}
        </view>
        <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.status1 != '进行中'" 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.status1 != '进行中'"
                        @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.status1 != '进行中'"
                        @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.status1 != '进行中'" 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.status1 != '进行中'" ref="upload" :fileList="data.attinfos"
                    @uploadCallback="uploadCallback" />
                <up-image v-if="data.status1 != '进行中' && data.attinfos.length == 0" :show-loading="true" src=""
                    width="80px" height="80px" @click="click"></up-image>
            </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.status1 != '进行中'" v-model="form.textedit"
                    placeholder="文字说明" autoHeight height="20" />
            </up-form-item>
        </up-form>

        <view class="but-box" v-if="data.status1 == '进行中'">
            <view class="but-box-item" @click="save">
                <My-button :customStyle="{
                    'background-color': '#FFFFFF',
                    'color': '#3874F6',
                    height: '80rpx',
                }" text="保存" :disabled="loading" :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.status1 == '进行中') {
        uni.showModal({
            title: '提示',
            content: '是否保存当前编辑内容？',
            confirmText: '保存',
            cancelText: '不保存',
            success: function (res) {
                if (res.confirm) {
                    save()
                } else if (res.cancel) {
                    uni.navigateBack()
                }
            }
        });
    } else {
        uni.navigateBack()
    }
}

// 去添加配件
function toAddItem(key = 'oldtitems') {
    if (data.status1 != '进行中') 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') {
    if (data.status1 != '进行中') return;
    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",
    passcheck: "passcheck",
}

// 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: [],
    title1: '',
    workpresetjson: {
        remarks: ''
    },
};
let workpresetjson = reactive({});

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

onLoad(() => {
    $Http.data.title1 = $Http.data.title.split('.')[1] || '';
    data = reactive($Http.data);
    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: 1, max: 500, message: '长度在 1 到 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: 1, max: 500, message: '长度在 1 到 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]];
        }
    }

    // 添加表单修改监听
    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);
async function save() {
    if (loading.value) return;
    if (upload.value.isUploading()) return;
    let traintitem = []
    try {
        if (form.additem == 1) {
            traintitem = data.oldtitems.map(v => {
                return {
                    itemid: v.itemid,
                    itemname: v.itemname,
                    model: v.model,
                    price: v.marketprice,
                    marketprice: v.marketprice,
                    qty: v.qty || v.packageqty || 1,
                }
            }).concat(data.newtitems.map(v => {
                return {
                    itemid: v.itemid,
                    itemname: v.itemname,
                    model: v.model,
                    price: v.marketprice,
                    marketprice: v.marketprice,
                    qty: v.qty || v.packageqty || 1,
                    isnew: 1
                }
            }))
        } else {
            traintitem = []
        }
    } catch (error) {

    }
    loading.value = true;
    let valid = false;
    try {
        valid = await uFormRef.value.validate();
    } catch (error) {
        valid = false;
    }
    $Http.basic({
        "id": "20230209094203",
        "sa_workorderid": data.sa_workorderid,
        "sa_workorder_nodeid": data.sa_workorder_nodeid,
        content: {
            "sa_workorderid": data.sa_workorderid,
            "sa_workorder_nodeid": data.sa_workorder_nodeid,
            isconfirm: valid ? 1 : 0,
            ...formToContent(form),
            traintitem
        }
    }).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;
            uni.navigateBack()
        }
        setTimeout(() => {
            uni.showToast({ title: res.code !== 1 ? res.msg : "保存成功", icon: 'none', mask: res.code == 1 });
        }, 500);
    })
}

function clickRadio(value, key) {
    if (data.status1 != '进行中') return;
    form[key] = form[key] == value ? "" : value;
    if (key == 'passcheck') {
        if (form[key] == '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 (form[key] == '1') {
            rules.newtitems = [{ required: true, message: '请选择新配件', trigger: 'change' }];
        } else {
            delete rules.newtitems;
        }
        if (form[key] == '1' && !(data.oldtitems.length + data.newtitems.length)) toAddItem('newtitems');
        form.newtitems = data.newtitems.length ? '1' : '';
        uFormRef.value.setRules(rules);
    }
}

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


</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: 36rpx;
        font-weight: bold;
        color: #333333;
    }

    .remarks {
        font-size: 28rpx;
        color: #999999;
        margin-top: 10rpx;
        margin-bottom: 20rpx;
    }


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