engineering_admin/src/views/custom_service/handle.vue

<template>
    <div class="edit-popup">
        <popup ref="popupRef" title="售后工单处理" :async="true" width="80%" @confirm="handleSubmit" @close="handleClose">
            <el-form ref="formRef" :model="formData" label-width="auto" :rules="formRules">


                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="组织" prop="project_id">
                            <el-input v-model="formData.project_name" disabled clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="部门" prop="project_id">
                            <el-input v-model="formData.org_name" disabled clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="项目名称" prop="project_id">
                            <el-input v-model="formData.project_name" disabled clearable placeholder="请选择项目" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="项目编码" prop="project_id">
                            <el-input v-model="formData.project_code" clearable disabled placeholder="系统自动填写" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="客户名称" prop="project_id"
                            :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]">
                            <el-input v-model="formData.custom_name" disabled clearable placeholder="系统自动填写" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="合同号" prop="project_id" @click="showDialog2 = true">
                            <el-input v-model="project_code" clearable disabled placeholder="系统自动填写" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="联系人" prop="contacts">
                            <el-input v-model="formData.contacts" disabled clearable placeholder="请输入联系人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系电话" prop="phone" :rules="[{ validator: checkPhone, trigger: 'blur' }]">
                            <el-input v-model="formData.phone" disabled clearable placeholder="请输入联系电话" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="日期" prop="date"
                            :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]">
                            <el-date-picker class="flex-1 !flex" disabled v-model="formData.date" clearable type="date"
                                value-format="YYYY-MM-DD" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="分类" prop="classification"
                            :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]">
                            <el-select class="flex-1" v-model="formData.classification" disabled clearable
                                placeholder="请选择分类">
                                <el-option v-for="(item, index) in dictData.classification" :key="index"
                                    :label="item.name" :value="parseInt(item.value)" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="紧急程度" prop="urgency"
                            :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]">
                            <el-radio-group v-model="formData.urgency" disabled placeholder="请选择紧急程度">
                                <el-radio v-for="(item, index) in dictData.urgency" :key="index"
                                    :label="parseInt(item.value)">
                                    {{ item.name }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="接待人" prop="receiver"
                            :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]">
                            <el-input v-model="formData.receiver" disabled clearable placeholder="请输入接待人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="指定处理人" prop="processed_admin_id" @click="userclick"
                            :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]">
                            <el-input v-model="formData.processed_user_name" disabled clearable readonly
                                placeholder="请输入指定处理人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="投诉主题" prop="name"
                            :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]">
                            <el-input v-model="formData.name" clearable disabled placeholder="请输入投诉主题" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="问题描述" prop="description">
                            <el-input v-model="formData.description" disabled clearable placeholder="请输入问题描述" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="formData.processing_process">
                        <el-form-item label="处理过程" prop="processing_process">
                            <el-input v-model="formData.processing_process" disabled clearable placeholder="请输入处理过程" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="formData.done_date">
                        <el-form-item label="完成日期" prop="done_date">
                            <el-input v-model="formData.done_date" disabled clearable placeholder="请输入完成日期" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="formData.processing_result_text">
                        <el-form-item label="处理结果" prop="processing_result_text">
                            <el-input v-model="formData.processing_result_text" disabled clearable
                                placeholder="请输入处理结果" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="formData.processing_hours">
                        <el-form-item label="花费工时" prop="processing_hours">
                            <el-input v-model="formData.processing_hours" disabled clearable placeholder="请输入处理结果" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注" prop="notes">
                            <el-input v-model="formData.notes" disabled type="textarea" clearable placeholder="请输入备注" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="附件">
                            <div v-if="formData.annex && formData.annex.length > 0">
                                <div v-for="(item, index) in formData.annex" style="margin-left: 5px;display: block;">
                                    <el-link style="margin-left: 10px; color: #4a5dff; align-self: flex-start"
                                        :href="item" target="_blank">文件{{ index + 1 }}查看</el-link>

                                </div>
                            </div>



                        </el-form-item>


                    </el-col>
                </el-row>

            </el-form>



            <el-form ref="formRef1" :model="formData1" label-width="auto" :rules="formRules">
                <el-row :gutter="10">
                    <el-col :span="8" v-if="!formData.processing_result_text">
                        <el-form-item label="处理结果" prop="processing_result">
                            <el-radio-group v-model="formData1.processing_result" placeholder="请选择处理结果">
                                <el-radio v-for="(item, index) in dictData.custom_service_solv_result" :key="index"
                                    :label="parseInt(item.value)">
                                    {{ item.name }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="!formData.processing_process">
                        <el-form-item label="处理过程" prop="processing_process">
                            <el-input v-model="formData1.processing_process" clearable placeholder="请输入处理过程" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="!formData.processing_hours">
                        <el-form-item label="花费工时" prop="processing_hours">
                            <el-input v-model="formData1.processing_hours" type="number" clearable
                                placeholder="请输入花费工时" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="!formData.done_date">
                        <el-form-item label="完成日期" prop="done_date">
                            <el-date-picker class="flex-1 !flex" v-model="formData1.done_date" clearable type="date"
                                value-format="YYYY-MM-DD" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <div style="margin-bottom: 30px;">客户评价</div>
                    <el-col :span="24">
                        <el-form-item label="整体评价" prop="score">
                            <el-rate v-model="formData1.score" size="large" style="margin-top: 5px ;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" style="margin-top: -15px ;">
                        <el-form-item label="问题是否解决" prop="is_solve">

                            <el-radio-group v-model="formData1.is_solve" placeholder="问题是否解决">
                                <el-radio v-for="(item, index) in dictData.is_solve" :key="index"
                                    :label="parseInt(item.value)">
                                    {{ item.name }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="反馈意见" prop="feedback">
                            <el-input v-model="formData1.feedback" type="textarea" clearable placeholder="请输入反馈意见" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <!-- <reviewprocess :list="list" /> -->
        </popup>


    </div>
</template>

<script lang="ts" setup name="customServiceEdit">
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiCustomServiceSolve } from '@/api/custom_service'
import { timeFormat } from '@/utils/util'
import type { PropType } from 'vue'
import useUserStore from "@/stores/modules/user";
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const formRef1 = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
// 表单数据
const formData = reactive({

})

const formData1 = reactive({
    id: '',
    processing_result: '',
    processing_process: '',
    processing_hours: '',
    done_date: '',
    score: 0,
    is_solve: '',
    feedback: '',
})


// 表单验证
const formRules = reactive<any>({

})


// 获取详情
const setFormData = async (data: Record<any, any>) => {


    for (const key in formData1) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData1[key] = data[key]
        }

    }
    Object.assign(formData, data)
}




// 提交按钮
const handleSubmit = async () => {

    await formRef1.value?.validate()
    const data = { ...formData1, }

    await apiCustomServiceSolve(data)
    popupRef.value?.close()
    emit('success')
}

//打开弹窗
const open = () => {
    popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
    emit('close')
}

defineExpose({
    open,
    setFormData

})
</script>