ops-management-platform-frontend/src/views/IO/workOrder/orderAudit/faultModal.vue

<template>
  <a-modal v-model:open="visible" title="工单上报" @ok="handleOk" width="70%">
    <a-form :model="form" layout="vertical">
      <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="请选择"
            />
          </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" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="响应级别">
            <a-select
              v-model:value="form.responseLevel"
              :options="responseLevelOptions"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="响应时限">
            <a-input v-model:value="form.responseTime" placeholder="请输入" />
          </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: '前端' }]"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="故障小类" name="faultSubcategory">
            <a-select
              v-model:value="form.faultSubcategory"
              :options="faultSubcategoryOptions"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="故障机构" name="institution">
            <a-select
              v-model:value="form.institution"
              :options="institutionOptions"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="故障地点" name="faultLocation">
            <a-input v-model:value="form.faultLocation" placeholder="请输入" />
          </a-form-item>
        </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" placeholder="请输入" />
          </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"
              placeholder="请选择"
            />
          </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" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
  import { reactive, ref } from 'vue';

  export default {
    setup() {
      const visible = ref(false);
      const form = reactive({
        projectName: '',
        isAccident: null,
        repairer: '',
        responseTime: '',
        responseLevel: '',
        faultCategory: '',
        faultSubcategory: '',
        institution: '',
        faultLocation: '',
        faultDescription: '',
        isDispatched: null,
        maintenanceRequirement: '',
        dispatchOpinion: '',
      });
      //下拉框
      const responseLevelOptions = [
        {
          value: 0,
          label: '常规',
        },
        {
          value: 1,
          label: '紧急',
        },
        {
          value: 2,
          label: '特级',
        },
      ];
      const maintenanceRequirementOptions = [
        {
          value: 0,
          label: '常规',
        },
        {
          value: 1,
          label: '紧急',
        },
        {
          value: 2,
          label: '特级',
        },
      ];
      const institutionOptions = [
        {
          value: 0,
          label: '常规',
        },
        {
          value: 1,
          label: '紧急',
        },
        {
          value: 2,
          label: '特级',
        },
      ];
      const faultSubcategoryOptions = [
        {
          value: 0,
          label: '常规',
        },
        {
          value: 1,
          label: '紧急',
        },
        {
          value: 2,
          label: '特级',
        },
      ];
      const showModal = () => {
        visible.value = true;
      };

      const handleOk = () => {
        console.log('Form Data:', form);
        // 在此处可以添加工单上报验证逻辑
        visible.value = false;
      };

      return {
        visible,
        form,
        showModal,
        handleOk,
        responseLevelOptions,
        maintenanceRequirementOptions,
        institutionOptions,
        faultSubcategoryOptions,
      };
    },
  };
</script>

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