ops-management-platform-frontend/src/views/IO/delayPatrol/waitPatrol/faultModal.vue

<template>
  <a-modal v-model:open="visible" title="工单上报" @ok="handleOk" width="70%" @cancel="closeModal">
    <a-form :model="form" layout="vertical" ref="formRef" :rules="rules">
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="所属项目" name="projectName">
            <a-select
              v-model:value="form.projectName"
              :options="projectNameOptions"
              placeholder="请选择"
              @change="projectNameChange"
              :fieldNames="{
                label: 'projectName',
                value: 'projectName',
                options: 'options',
              }"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="所属合同" name="contractName">
            <a-select
              v-model:value="form.contractName"
              :options="contractNameOptions"
              placeholder="请选择"
              :disabled="!form.projectName"
              :fieldNames="{
                label: 'contractName',
                value: 'contractName',
                options: 'options',
              }"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="是否事故" name="isAccident">
            <a-radio-group v-model:value="form.isAccident">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="报修人员" name="repairer">
            <a-input v-model:value="form.repairer" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="响应级别" name="responseLevel">
            <a-select v-model:value="form.responseLevel" :options="responseLevelOptions" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="响应时限" name="responseTime">
            <a-input v-model:value="form.responseTime" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="故障大类" name="faultCategory">
            <a-select
              v-model:value="form.faultCategory"
              :options="[{ value: '前端' }, { value: '后端' }]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="故障小类" name="faultSubcategory">
            <a-select
              v-model:value="form.faultSubcategory"
              :options="faultSubcategoryOptions"
              :fieldNames="{
                label: 'typeName',
                value: 'id',
                options: 'options',
              }"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="所属机构" name="organizationName">
            <a-select
              v-model:value="form.organizationName"
              :options="organizationNameOptions"
              :fieldNames="{
                label: 'organizationName',
                value: 'organizationName',
                options: 'options',
              }"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="故障地点" name="faultLocation">
            <a-select
              v-model:value="form.faultLocation"
              :options="faultLocationOptions"
              @change="faultLocationChange"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <div id="amapContainer" style="width: 100%; height: 500px"></div>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="故障描述" name="faultDescription">
            <a-textarea v-model:value="form.faultDescription" :rows="4" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="故障图片" name="attachments">
            <a-upload
              v-model:file-list="fileLists"
              :action="`${apiUrl}/resource/oss/upload`"
              :headers="headers"
              @change="handleChange"
            >
              <a-button type="primary"> 上传 </a-button>
            </a-upload>
            </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="是否派遣" name="isDispatched">
            <a-radio-group v-model:value="form.isDispatched">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12" v-if="form.isDispatched == 1">
          <a-form-item label="维护要求" name="maintenanceRequirement">
            <a-select
              v-model:value="form.maintenanceRequirement"
              :options="maintenanceRequirementOptions"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]" v-if="form.isDispatched == 1">
        <a-col :span="24">
          <a-form-item label="派遣意见" name="dispatchOpinion">
            <a-textarea v-model:value="form.dispatchOpinion" :rows="4" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
  import { reactive, ref } from 'vue';
  import {
    getInfo,
    getSubcategoryType,
    workOrderAdd,
    getProjectInfo,
    getOrganizationType,
    getContractNamesByProjectName,
  } from './api';
  import { message } from 'ant-design-vue';
  import AMapLoader from '@amap/amap-jsapi-loader';
  import { getToken } from '@/utils/auth';
  import { useGlobSetting } from '@/hooks/setting';
  export default {
    setup() {
      const visible = ref(false);
      const form = reactive({
        projectName: '',
        contractName: null,
        isAccident: null,
        repairer: '',
        responseTime: '',
        responseLevel: '',
        faultCategory: null,
        faultSubcategory: null,
        organizationName: '',
        faultLocation: '',
        faultDescription: '',
        attachments: null,
        isDispatched: null,
        maintenanceRequirement: null,
        dispatchOpinion: '',
        longitude: '',
        latitude: '',
      });
      //下拉框
      const projectNameOptions = ref([]);
      const getProjectNameOptions = async () => {
        const res = await getProjectInfo();
        projectNameOptions.value = res;
      };
      const projectNameChange = async (val) => {
        const res = await getContractNamesByProjectName({ projectName: val });
        contractNameOptions.value = res;
      };
      const contractNameOptions = ref([]);
      const organizationNameOptions = ref([]);
      const getOrganizationNameOptions = async () => {
        const res = await getOrganizationType();
        organizationNameOptions.value = res.rows;
      };
      const responseLevelOptions = [
        {
          value: 0,
          label: '常规',
        },
        {
          value: 1,
          label: '紧急',
        },
        {
          value: 2,
          label: '特级',
        },
      ];
      const maintenanceRequirementOptions = [
        {
          value: 1,
          label: '新增',
        },
      ];
      const faultLocationOptions = [
        {
          value: '1',
          label: 'a',
          latitude: '29.8537459',
          longitude: '121.5591519',
        },
        {
          value: '2',
          label: 'b',
          latitude: '29.8572957 ',
          longitude: '121.5611743',
        },
        {
          value: '3',
          label: 'c',
          latitude: '29.8537459',
          longitude: '121.5591519',
        },
      ];
      const faultLocationChange = (val) => {
        const obj = faultLocationOptions.find((i) => {
          return (i.value = val);
        });
        form.longitude = obj.longitude;
        form.latitude = obj.latitude;
        initMap(obj.longitude, obj.latitude, obj.organizationName);
      };
      const faultSubcategoryOptions = ref([]);
      const getFaultSubcategoryOptions = async () => {
        const res = await getSubcategoryType();
        faultSubcategoryOptions.value = res.rows;
      };
      const showModal = () => {
        visible.value = true;
        getFaultSubcategoryOptions();
        getProjectNameOptions();
        getOrganizationNameOptions();
      };

      const handleOk = () => {
        formRef.value.validate().then((valid) => {
          if (valid) {
            let params = {};
            for (let i in form) {
              params[i] = form[i];
            }
            workOrderAdd(params).then((_) => {
              message.success('操作成功');
              closeModal();
            });
          }
        });
      };
      //地图
      const map = ref(null);
      const initMap = async (longitude, latitude, organizationName) => {
        try {
          // 加载高德地图 JavaScript API
          await AMapLoader.load({
            key: '786a2e7cc6d4be5ba1d6174a0aa10f2b',
            version: '2.0',
            plugins: [],
          });

          // 初始化地图
          map.value = new AMap.Map('amapContainer', {
            zoom: 17,
            center: [longitude, latitude],
          });

          // 添加标记（可选）
          const marker = new AMap.Marker({
            position: new AMap.LngLat(longitude, latitude),
            title: organizationName,
          });
          const markerList = [marker];
          map.value.add(markerList);
        } catch (error) {
          console.error('加载高德地图失败:', error);
        }
      };
      const closeModal = () => {
        formRef.value.resetFields();
        fileLists.value=[]
        visible.value = false;
        map.value?.destroy();
      };
      const formRef = ref();
      const rules = {
        projectName: [{ required: true, message: '请选择' }],
        contractName: [{ required: true, message: '请选择' }],
        isAccident: [{ required: true, message: '请选择' }],
        repairer: [{ required: true, message: '请输入' }],
        faultLocation: [{ required: true, message: '请输入' }],
        organizationName: [{ required: true, message: '请选择' }],
        responseTime: [{ required: true, message: '请输入' }],
        responseLevel: [{ required: true, message: '请选择' }],
        faultCategory: [{ required: true, message: '请选择' }],
        faultSubcategory: [{ required: true, message: '请选择' }],
        faultDescription: [{ required: true, message: '请输入' }],
        isDispatched: [{ required: true, message: '请选择' }],
      };
      //上传功能
      const fileLists = ref([]);
      const globSetting = useGlobSetting();
      const { apiUrl, clientId } = globSetting;
      const handleChange = (info) => {
        if (info.fileList.length > 0) {
          form.attachments = [];
          info.fileList.forEach((i) => {
            if (i.status == 'done') {
              form.attachments.push({
                url: i.response?.data.url || i.url,
                name: i.response?.data.fileName || i.name,
              });
            }
          });
        } else {
          form.attachments = null;
        }
        console.log(fileLists);
      };
      return {
        visible,
        form,
        showModal,
        handleOk,
        responseLevelOptions,
        maintenanceRequirementOptions,
        faultSubcategoryOptions,
        faultLocationOptions,
        projectNameOptions,
        contractNameOptions,
        organizationNameOptions,
        faultLocationChange,
        projectNameChange,
        closeModal,
        formRef,
        rules,
        apiUrl,
        headers: {
          Authorization: 'Bearer ' + getToken(),
          clientId,
        },
        handleChange,
        fileLists,
      };
    },
  };
</script>

<style scoped>
  /* 可选样式调整 */
  .ant-modal-body {
    max-width: 600px;
    margin: 0 auto;
  }
</style>