<template>
|
<el-dialog
|
style="pointer-events: auto"
|
:model-value="modelValue"
|
@update:modelValue="handleDialogChange"
|
width="50%"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
destroy-on-close
|
>
|
<template #header>
|
<span> {{ create ? '发布线索任务' : '更新线索任务' }}</span>
|
</template>
|
<el-form
|
label-width="120px"
|
label-position="right"
|
:rules="rules"
|
:model="formObj"
|
ref="formRef"
|
>
|
<el-form-item label="线索编号" prop="clueId">
|
<el-input
|
v-model="formObj.clueId"
|
placeholder="请输入线索编号"
|
class="w-200"
|
:disabled="true"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="任务时间" prop="taskTime">
|
<el-date-picker
|
v-model="formObj.taskTime"
|
type="date"
|
placeholder="选择日期"
|
/>
|
</el-form-item>
|
<el-form-item label="区县" prop="_location">
|
<OptionLocation
|
:level="3"
|
:initValue="false"
|
:checkStrictly="false"
|
:allOption="false"
|
v-model="formObj._location"
|
></OptionLocation>
|
</el-form-item>
|
<el-form-item label="响应级别" prop="responseLevel">
|
<OptionResponseLevel
|
v-model="formObj.responseLevel"
|
></OptionResponseLevel>
|
</el-form-item>
|
<el-form-item label="出行方式" prop="travelMode">
|
<OptionTravelMode
|
v-model="formObj.travelMode"
|
></OptionTravelMode>
|
</el-form-item>
|
<el-form-item label="无人机" prop="hasUav">
|
<el-switch
|
v-model="formObj.hasUav"
|
inline-prompt
|
active-text="有"
|
inactive-text="无"
|
/>
|
</el-form-item>
|
<el-form-item label="执行人" prop="executorIds">
|
<OptionExecutors
|
v-model="formObj.executorIds"
|
></OptionExecutors>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="onCancel">取消</el-button>
|
<el-button
|
:disabled="!edit"
|
type="primary"
|
:loading="loading"
|
@click="onSubmit"
|
>确定</el-button
|
>
|
</template>
|
</el-dialog>
|
</template>
|
<script setup>
|
import { ref, reactive, watch, onMounted } from 'vue';
|
import { useFormConfirm } from '@/composables/formConfirm';
|
import clueTaskApi from '@/api/clue/clueTaskApi';
|
|
const props = defineProps({
|
modelValue: Boolean,
|
clueData: Object,
|
clueTask: Object,
|
create: {
|
type: Boolean,
|
default: true
|
},
|
// 自定义创建方法
|
onCreate: Function,
|
// 自定义更新方法
|
onUpdate: Function
|
});
|
|
const emits = defineEmits(['update:modelValue', 'onSubmit']);
|
|
function handleDialogChange(value) {
|
emits('update:modelValue', value);
|
}
|
|
const { formObj, formRef, edit, onSubmit, onCancel, clear } =
|
useFormConfirm({
|
submit: {
|
do: submit
|
},
|
cancel: {
|
do: cancel
|
}
|
});
|
const loading = ref(false);
|
// 表单检查规则
|
const rules = reactive({
|
// clueId: [
|
// {
|
// required: true,
|
// message: '线索编号不能为空',
|
// trigger: 'blur'
|
// }
|
// ],
|
taskTime: [
|
{
|
required: true,
|
message: '线索时间不能为空',
|
trigger: 'change'
|
}
|
],
|
_location: [
|
{
|
required: true,
|
message: '区县不能为空',
|
trigger: 'change'
|
}
|
],
|
responseLevel: [
|
{
|
required: true,
|
message: '响应级别不能为空',
|
trigger: 'change'
|
}
|
],
|
executorIds: [
|
{
|
required: true,
|
message: '执行人不能为空',
|
trigger: 'change'
|
}
|
]
|
});
|
|
function submit() {
|
const param = getParams();
|
return props.create
|
? props.onCreate
|
? props.onCreate(param)
|
: createClueTask(param)
|
: props.onUpdate
|
? props.onUpdate(param)
|
: updateClueTask(param);
|
}
|
|
function cancel() {
|
emits('update:modelValue', false);
|
}
|
|
function createClueTask(param) {
|
return clueTaskApi
|
.createClueTask(param)
|
.then(() => {
|
emits('update:modelValue', false);
|
emits('onSubmit');
|
// clear();
|
})
|
.finally(() => {
|
loading.value = false;
|
});
|
}
|
|
function updateClueTask(param) {
|
return clueTaskApi
|
.updateClueTask(param)
|
.then(() => {
|
emits('update:modelValue', false);
|
emits('onSubmit');
|
// clear();
|
})
|
.finally(() => {
|
loading.value = false;
|
});
|
}
|
|
function getParams() {
|
return {
|
guid: formObj.value.guid,
|
clueId: formObj.value.clueId,
|
taskTime: formObj.value.taskTime,
|
provinceCode: formObj.value._location.pCode,
|
provinceName: formObj.value._location.pName,
|
cityCode: formObj.value._location.cCode,
|
cityName: formObj.value._location.cName,
|
districtCode: formObj.value._location.dCode,
|
districtName: formObj.value._location.dName,
|
townCode: formObj.value._location.tCode,
|
townName: formObj.value._location.tName,
|
responseLevel: formObj.value.responseLevel,
|
travelMode: formObj.value.travelMode,
|
hasUav: formObj.value.hasUav,
|
executorIds: formObj.value.executorIds.join(';')
|
};
|
}
|
|
// watch(
|
// () => props.clueData,
|
// (nV, oV) => {
|
// if (nV && nV != oV) {
|
// formObj.value.clueId = nV.cid;
|
// }
|
// }
|
// );
|
|
// watch(
|
// () => props.clueTask,
|
// (nV, oV) => {
|
// if (nV && nV != oV) {
|
// formObj.value.guid = nV.guid;
|
// formObj.value.clueId = nV.clueId;
|
// formObj.value.taskTime = nV.taskTime;
|
// formObj.value._location = {
|
// pCode: nV.provinceCode,
|
// pName: nV.provinceName,
|
// cCode: nV.cityCode,
|
// cName: nV.cityName,
|
// dCode: nV.districtCode,
|
// dName: nV.districtName,
|
// tCode: nV.townCode,
|
// tName: nV.townName
|
// };
|
// formObj.value.responseLevel = nV.responseLevel;
|
// formObj.value.travelMode = nV.travelMode;
|
// formObj.value.hasUav = nV.hasUav;
|
// formObj.value.executorIds = nV.executorIds.split(';');
|
// }
|
// }
|
// );
|
|
watch(
|
() => [props.modelValue, props.clueData, props.clueTask],
|
(nV, oV) => {
|
const [m, d, t] = nV;
|
if (m) {
|
formObj.value = {
|
taskTime: new Date(),
|
_location: {
|
pCode: '31',
|
pName: '上海市',
|
cCode: '3100',
|
cName: '上海市',
|
dCode: '310106',
|
dName: '静安区',
|
tCode: undefined,
|
tName: undefined
|
}
|
};
|
if (d) {
|
formObj.value.clueId = d.cid;
|
}
|
if (t) {
|
formObj.value.guid = t.guid;
|
formObj.value.clueId = t.clueId;
|
formObj.value.taskTime = t.taskTime;
|
formObj.value._location = {
|
pCode: t.provinceCode,
|
pName: t.provinceName,
|
cCode: t.cityCode,
|
cName: t.cityName,
|
dCode: t.districtCode,
|
dName: t.districtName,
|
tCode: t.townCode,
|
tName: t.townName
|
};
|
formObj.value.responseLevel = t.responseLevel;
|
formObj.value.travelMode = t.travelMode;
|
formObj.value.hasUav = t.hasUav;
|
formObj.value.executorIds = t.executorIds.split(';');
|
}
|
}
|
}
|
);
|
</script>
|
