<template>
|
<el-dialog
|
class="gd-dialog"
|
v-model="visible"
|
title="转为事件并分发"
|
@closed="handleClosed"
|
width="500px"
|
destroy-on-close
|
:close-on-click-modal="false"
|
>
|
<el-form class="gd-dialog-form" ref="formRef" :model="formData" :rules="rules" label-width="100px">
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="事件名称" prop="eventName">
|
<el-input class="gd-input" v-model="formData.eventName" placeholder="请输入" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="处置部门" prop="disposeDept">
|
<el-tree-select
|
class="gd-select"
|
popper-class="gd-tree-select-popper"
|
v-model="formData.disposeDept"
|
node-key="id"
|
:data="deptTree"
|
:props="treeProps"
|
check-strictly
|
@change="deptChange"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="工单处置人" prop="disposeUser">
|
<el-select
|
class="gd-select"
|
popper-class="gd-select-popper"
|
v-model="formData.disposeUser"
|
placeholder="请选择"
|
:disabled="!formData.disposeDept"
|
clearable
|
>
|
<el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<el-button color="#F2F3F5" @click="visible = false">取消</el-button>
|
<el-button class="" color="#4C34FF" :loading="submitting" :disabled="submitting" @click="handleSubmit">
|
保存
|
</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, watch } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import { fieldRules } from '@ztzf/utils'
|
import { gdTaskResultDistributeApi, getUserListApi } from './achievementApi'
|
|
// 初始化表单数据
|
const initForm = () => ({
|
eventName: '', // 事件名称
|
disposeDept: '', // 处置部门
|
disposeUser: '', // 工单处置人
|
})
|
|
const deptTree = inject('deptTree')
|
const treeProps = inject('treeProps')
|
|
const emit = defineEmits(['success'])
|
const formRef = ref(null)
|
const formData = ref(initForm())
|
const visible = defineModel()
|
const submitting = ref(false)
|
const userList = ref([])
|
const currentRow = ref(null) // 当前线索数据
|
const workOrderId = ref(null) // 工单ID
|
|
// 校验规则
|
const rules = {
|
eventName: fieldRules(true, 50),
|
disposeDept: fieldRules(true),
|
disposeUser: fieldRules(true),
|
}
|
|
// 部门变更时清空人员并重新获取
|
function deptChange() {
|
formData.value.disposeUser = ''
|
}
|
|
// 获取用户列表
|
function getUserList() {
|
if (!formData.value.disposeDept) {
|
userList.value = []
|
return
|
}
|
getUserListApi(formData.value.disposeDept).then(res => {
|
userList.value = res?.data?.data?.records ?? []
|
})
|
}
|
|
// 监听部门变化获取用户列表
|
watch(() => formData.value.disposeDept, getUserList)
|
|
// 提交分发
|
async function handleSubmit() {
|
const isValid = await formRef.value?.validate().catch(() => false)
|
if (!isValid) return
|
submitting.value = true
|
try {
|
const params = {
|
areaCode: currentRow.value.areaCode || '',
|
disposeDept: formData.value.disposeDept,
|
disposeUser: formData.value.disposeUser,
|
eventName: formData.value.eventName,
|
latitude: currentRow.value.latitude || 0,
|
longitude: currentRow.value.longitude || 0,
|
resultId: currentRow.value.id,
|
workOrderId: workOrderId.value,
|
}
|
await gdTaskResultDistributeApi(params)
|
ElMessage.success('分发成功')
|
visible.value = false
|
emit('success')
|
} finally {
|
submitting.value = false
|
}
|
}
|
|
// 关闭后重置
|
function handleClosed() {
|
formData.value = initForm()
|
userList.value = []
|
}
|
|
// 打开弹框
|
async function open({ row, workOrderId: orderId } = {}) {
|
currentRow.value = row
|
workOrderId.value = orderId
|
formData.value = initForm()
|
}
|
|
defineExpose({ open })
|
</script>
|
|
<style lang="scss" scoped></style>
|
