client-app/pages/work-order/add.vue

<template>
    <hc-sys class="hc-add-work-order-page" :isNavBar="false">
        <uni-section title="请选择您需要反馈的问题类型" type="line" class="mt-0.5">
            <view class="p-3 pt-0" v-if="typeData.length > 0">
                <uni-segmented-control :current="typeKey" :values="typeData" @clickItem="typeItemChange" />
            </view>
            <view class="relative px-3">
                <uv-checkbox-group v-model="typeCheckbox" placement="column">
                    <uv-checkbox v-for="item in typeDataBiz[typeKey]?.children" :key="item.dictKey"
                                 :label="item.dictValue" :name="item.dictValue" class="mb-2"/>
                </uv-checkbox-group>
            </view>
            <view class="p-3 pt-1" v-if="isProblemVal">
                <uv-alert showIcon type="error" description="请先选择问题类型"/>
            </view>
        </uni-section>
        <uni-section title="建议反馈内容" type="line" class="mt-1">
            <view class="p-3 pt-0">
                <textarea v-model="opinionContent" class="p-2 text-26 radius w-full h-200" un-border="1 solid gray-3" placeholder="请输入你宝贵的建议，我们将会跟踪解决"/>
                <uv-alert class="mt-2" showIcon type="error" description="请先填写建议反馈内容" v-if="isContent"/>
            </view>
        </uni-section>
        <uni-section title="上传图片文件" type="line" class="mt-1">
            <view class="p-3 pt-0">
                <uv-alert type="warning" description="请上传JPG、PNG格式的图片文件，最多上传3张图片，文件大小不超过30M"/>
                <!-- 图片文件上传 -->
                <view class="mt-3">
                    <hc-row :gutter="10">
                        <hc-col :span="8" class="h-140" v-for="(item, index) in fileList" :key="index">
                            <view class="hc-flex h-full b-rounded mr-2" un-border="1 solid gray-2" @click="previewImg(index)">
                                <hc-image :src="item" class="b-rounded"/>
                                <view class="hc-tr bg-red-5 text-white text-center w-38 h-38 b-rounded-lb-1 b-rounded-tr-1" @click.stop="delFileClick(index)">
                                    <text class="relative cuIcon-close top--2 text-24"/>
                                </view>
                            </view>
                        </hc-col>
                        <hc-col :span="8" class="h-140" v-if="fileList.length < 3">
                            <view class="hc-flex-center h-full b-rounded" un-border="2 dashed gray-2" @click="addFileClick">
                                <text class="i-iconoir-plus text-70 text-gray-4"/>
                            </view>
                        </hc-col>
                    </hc-row>
                </view>
                <uv-alert class="mt-2" showIcon type="error" description="请先上传图片文件" v-if="isFiles"/>
            </view>
        </uni-section>

        <!--底部操作栏-->
        <HcTabbarBlock :height="70"/>
        <hc-tabbars class="flex items-center">
            <button hover-class="none" class="cu-btn flex-1 bg-blue-5 text-white" @click="saveClick">提交工单</button>
        </hc-tabbars>
    </hc-sys>
</template>

<script setup>
import {ref,watch} from "vue";
import mainApi from '~api/other/work-order';
import {onLoad} from '@dcloudio/uni-app'
import {errorToast, successToast} from "@/utils/tools";
import {getArrValue, getObjValue, isNullES} from "js-fast-way";
import {useAppStore} from "@/store";
import {chooseImage} from "@/utils/utils";
import {uploadApi2} from "@/httpApi/modules/upload";

//初始变量
const store = useAppStore()
const projectId = ref(store.projectId);
const contractId = ref(store.contractId);

onLoad(() => {
    queryDictBizList()
})

//获取字典信息
const typeDataBiz = ref([])
const queryDictBizList = async () => {
    const {error, code, data} = await mainApi.queryDictBizList()
    if (!error && code === 200) {
        let newArr = [], arr = getArrValue(data);
        for (let i = 0; i < arr.length; i++) {
            newArr.push(arr[i].dictValue)
        }
        typeKey.value = 0
        typeData.value = newArr
        typeDataBiz.value = arr
    } else {
        typeKey.value = 0
        typeData.value = []
        typeDataBiz.value = []
    }
}

//问题类型
const typeKey = ref(0)
const typeData = ref([])
const typeItemChange = ({currentIndex}) => {
    typeCheckbox.value = []
    typeKey.value = currentIndex
}

//问题类型的checkbox
const typeCheckbox = ref([])
const isProblemVal = ref(false)
watch(typeCheckbox, (val) => {
    if (val.length > 0) {
        isProblemVal.value = false
    }
})

//意见内容
const opinionContent = ref('')
const isContent = ref(false)
watch(opinionContent, (val) => {
    if (!isNullES(val)) {
        isContent.value = false
    }
})

//上传文件的
const fileList = ref([])
const isFiles = ref(false)
watch(() => fileList.value, (val) => {
    if (val.length > 0) {
        isFiles.value = false
    }
}, {deep: true})

//选择文件上传
const addFileClick = async () => {
    const tempFiles = await chooseImage(3 - fileList.value.length)
    if (tempFiles.length > 0) {
        uni.showLoading({title: '上传文件中...', mask: true});
    }
    for (let i = 0; i < tempFiles.length; i++) {
        const {error, msg, data} = await uploadApi2(tempFiles[i].path)
        if (!error) {
            const { link } = getObjValue(data)
            fileList.value.push(link)
        } else {
            errorToast(msg)
        }
    }
    uni.hideLoading();
}

//删除文件
const delFileClick = (index) => {
    fileList.value.splice(index, 1)
}

//预览图片
const previewImg = (index) => {
    uni.previewImage({
        current: index,
        urls: fileList.value,
    });
}

//提交反馈
const saveClick = async () => {
    const type_data = typeData.value, type_key = typeKey.value, type_check = typeCheckbox.value
    let isForm = true
    //问题类型
    if (type_check.length <= 0) {
        isProblemVal.value = true
        isForm = false
    }
    //内容
    const content = opinionContent.value
    if (isNullES(content)) {
        isContent.value = true
        isForm = false
    }
    //文件
    const files = fileList.value
    if (files.length <= 0) {
        isFiles.value = true
        isForm = false
    }
    if (!isForm) return
    //处理数据
    uni.showLoading({title: '提交工单中...', mask: true});
    const problemType = type_data[type_key] + '-' + type_check.join('-')
    //发起请求
    const {error, code} = await mainApi.saveUserOpinion({
        projectId: projectId.value,
        contractId: contractId.value,
        problemType: problemType,
        opinionContent: content,
        returnFiles: files
    })
    uni.hideLoading();
    if (!error && code === 200) {
        successToast('提交成功')
        setTimeout(() => {
            uni.navigateBack()
        }, 1500)
    } else {
        errorToast('提交失败,请稍后重试')
    }
}
</script>

<style lang="scss" scoped>
page {
    background: #EFEFF4;
}
</style>

<style lang="scss">
@import "@/style/work-order/index.scss";
</style>