完成线索任务的发布功能

riku

2025-04-23 f1f26b166b71371e0a8dfaf9b9f575d2d79feefc

 src/views/overlay-clue/task/ClueTaskEdit.vue

@@ -1,3 +1,288 @@
<template>
  
</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: {
    type: Object,
    default: () => {
      return {};
    }
  },
  clueTask: Object,
  create: {
    type: Boolean,
    default: true
  }
});

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 ? createClueTask(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>