ops-management-platform-frontend/src/views/IO/workOrder/orderHandle/delayModal.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="id">
            <a-input v-model:value="form.id" disabled />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="故障地址" name="faultLocation">
            <a-input v-model:value="form.faultLocation" disabled />
          </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" disabled/>
          </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" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="响应时限" name="responseTime">
            <a-input v-model:value="form.responseTime" disabled/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="剩余时间" name="restTime">
            <a-input v-model:value="form.restTime" disabled />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="延期至" name="delayTime">
            <a-date-picker
              :show-time="{ format: 'HH:mm:ss' }"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              v-model:value="form.delayTime"
              placeholder="请选择"
            />
          </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"
              accept=".jpg,.jpeg,.png,.gif,.webp"
              @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="24">
          <a-form-item label="延期说明" name="delayDescription">
            <a-textarea v-model:value="form.delayDescription" :rows="4" />
          </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,getSubcategoryType,delayOrder} from './handleApi';
  import { getToken } from '@/utils/auth';
  import { useGlobSetting } from '@/hooks/setting';
  export default {
    setup(props, { emit }) {
      const title = ref('延期申请');
      const visible = ref(false);
      const form = reactive({
        projectName: '',
        contractName:'',
        faultLocation: '',
        faultDescription: '',
        responseLevel: '',
        responseTime: '',
        restTime:'',
        delayTime:'',
        attachments: null,
        delayDescription:'',
        id: null,
      });
      //下拉框
      const responseLevelOptions = [
        {
          value: '常规',
        },
        {
          value: '紧急',
        },
        {
          value: '特级',
        },
      ];
      const showModal = async (id) => {
        visible.value = true;
        const data = await getInfo(id);
        for (let i in form) {
          form[i] = data[i];
        }
      };

      const handleOk = () => {
        formRef.value.validate().then((valid) => {
          if (valid) {
            const params = {}
            for(let i in form){
              params[i] = form[i]
            }
            delayOrder(params).then(_=>{
              message.success('操作成功')
              emit('success');
              closeModal()
            })
          }
        });
      };
      const closeModal = () => {
        fileLists.value = [];
        formRef.value.resetFields();
        visible.value = false;
      };
      const formRef = ref();
      const rules = {
        delayTime: [{ required: true, message: '请选择' }],
        delayDescription: [{ required: true, message: '请输入' }],
        attachments: [{ 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;
        }
      };
      return {
        visible,
        title,
        form,
        responseLevelOptions,
        showModal,
        handleOk,
        closeModal,
        formRef,
        rules,
        apiUrl,
        headers: {
          Authorization: 'Bearer ' + getToken(),
          clientId,
        },
        handleChange,
        fileLists,
      };
    },
  };
</script>

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