ops-management-platform-frontend/src/views/IO/workOrder/orderSend/sendModal.vue

<template>
  <a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%"  @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-input v-model:value="form.projectName" disabled />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="所属合同" name="contractName">
            <a-input v-model:value="form.contractName" disabled />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="操作处理" name="handle">
            <a-select v-model:value="form.handle" :options="handleOptions"  placeholder="请选择" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <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.handle=='事件派遣'">
        <a-col :span="24">
          <a-form-item label="维护单位" name="maintenanceUnit" >
            <a-select
              v-model:value="form.maintenanceUnit"
              :options="maintenanceUnitOptions"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item :label="form.handle=='事件作废'?'作废原因':'派遣意见'" 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';
  import { message } from 'ant-design-vue';
  import { getInfo,dispatchOrder,getIoCompanyNames} from './api';
  export default {
    setup(props,{emit}) {
      const title = ref('派遣');
      const visible = ref(false);
      const form = reactive({
        projectName: '',
        contractName: '',
        handle: null,
        maintenanceRequirement: null,
        maintenanceUnit: '',
        dispatchOpinion: '',
        id: null,
      });
      //下拉框
      const maintenanceRequirementOptions = [
        {
          value: '修复',
        },
        {
          value: '新增',
        },
        {
          value: '拆除',
        },
        {
          value: '清除',
        },
        {
          value: '其他',
        },
      ];
      const handleOptions = [
        {
          value: '事件派遣',
        },
        {
          value: '事件作废',
        },
      ];
      const maintenanceUnitOptions = ref([])
      const getMaintenanceUnitOptions = async() =>{
       const res = await getIoCompanyNames();
       maintenanceUnitOptions.value = res.map((i) => {
          return {
            value: i,
          };
        });
      }
      const showModal = async (id) => {
        visible.value = true;
        const data = await getInfo(id);
        for (let i in form) {
          form[i] = data[i];
        }
        getMaintenanceUnitOptions()
      };

      const handleOk = () => {
        formRef.value.validate().then((valid) => {
          if (valid) {
           const params = {} 
           for(let i in form){
            params[i] = form[i]
           }
           dispatchOrder(params).then(_=>{
            message.success('操作成功')
            closeModal()
            emit('success')
           })
          }
        });
      };
      const closeModal = () => {
        formRef.value.resetFields();
        visible.value = false;
      };
      const formRef = ref();
      const rules = {
        maintenanceRequirement: [{ required: true, message: '请选择' }],
        handle: [{ required: true, message: '请选择' }],
        dispatchOpinion: [{ required: true, message: '请输入' }],
        maintenanceUnit: [{ required: true, message: '请输入' }],
      };
      return {
        visible,
        title,
        form,
        maintenanceRequirementOptions,
        maintenanceUnitOptions,
        handleOptions,
        showModal,
        handleOk,
        closeModal,
        formRef,
        rules,
      };
    },
  };
</script>

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