ops-management-platform-frontend/src/views/station/info/addModal.vue

<template>
  <a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%">
    <a-row :gutter="[16, 16]">
      <a-col :span="24">
        <div><span class="titleLabel">所属项目：</span>{{ detail.projectName }}</div>
      </a-col>
    </a-row>
    <a-row :gutter="[16, 16]">
      <a-col :span="24">
        <div><span class="titleLabel">所属合同：</span>{{ detail.contractName }}</div>
      </a-col>
    </a-row>
    <a-row :gutter="[16, 16]">
      <a-col :span="12">
        <div><span class="titleLabel">编号：</span>{{ detail.id }}</div>
      </a-col>
      <a-col :span="12">
        <div><span class="titleLabel">报修人员：</span>{{ detail.repairer }}</div>
      </a-col>
    </a-row>
    <a-row :gutter="[16, 16]">
      <a-col :span="12">
        <div><span class="titleLabel">状态：</span>{{ statusText(detail.status) }}</div>
      </a-col>
      <a-col :span="12">
        <div><span class="titleLabel">待处理人：</span>{{ detail.handler }}</div>
      </a-col>
    </a-row>
    <a-row :gutter="[16, 16]">
      <a-col :span="12">
        <div><span class="titleLabel">报修时间：</span>{{ detail.repairTime }}</div>
      </a-col>
      <a-col :span="12">
        <div><span class="titleLabel">是否事故：</span>{{ detail.isAccident }}</div>
      </a-col>
    </a-row>
    <a-row :gutter="[16, 16]">
      <a-col :span="12">
        <div><span class="titleLabel">故障大类：</span>{{ detail.faultCategory }}</div>
      </a-col>
      <a-col :span="12">
        <div><span class="titleLabel">故障小类：</span>{{ detail.faultSubcategory }}</div>
      </a-col>
    </a-row>
    <a-row :gutter="[16, 16]">
      <a-col :span="12">
        <div><span class="titleLabel">所属机构：</span>{{ detail.organizationName }}</div>
      </a-col>
      <a-col :span="12">
        <div><span class="titleLabel">响应级别：</span>{{ detail.responseLevel }}</div>
      </a-col>
    </a-row>
    <a-row :gutter="[16, 16]">
      <a-col :span="24">
        <div><span class="titleLabel">响应时限(小时)：</span>{{ detail.responseTime }}</div>
      </a-col>
    </a-row>
    <a-row :gutter="[16, 16]">
      <a-col :span="24">
        <div><span class="titleLabel">故障地址：</span>{{ detail.faultLocation }}</div>
      </a-col>
    </a-row>
    <a-row :gutter="[16, 16]">
      <a-col :span="24">
        <div><span class="titleLabel">故障描述：</span>{{ detail.faultDescription }}</div>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
  import { reactive, ref } from 'vue';
  import { message } from 'ant-design-vue';
  import { getInfo, add, update } from './api';
  export default {
    setup() {
      const title = ref('新增');
      const visible = ref(false);
      const form = reactive({
        name: '',
        status: null,
        remark: '',
        unit: '',
        price: '',
        amount: '',
        standards: '',
        projectId: null,
        id: null,
      });
      //下拉框
      const statusOptions = [
        {
          value: 0,
          label: '启用',
        },
        {
          value: 1,
          label: '禁用',
        },
      ];
      const showModal = async (type, id, projectId) => {
        console.log(projectId);
        visible.value = true;
        if (type == 1) {
          title.value = '新增';
        } else if (type == 2) {
          title.value = '编辑';
          const data = await getInfo(id);
          for (let i in form) {
            form[i] = data[i];
          }
        }
        form.projectId = projectId;
      };

      const handleOk = () => {
        formRef.value.validate().then((valid) => {
          if (valid) {
            if (title.value == '新增') {
              let params = {};
              for (let i in form) {
                params[i] = form[i];
              }
              delete params.id;
              add(params).then((_) => {
                message.success('新增成功');
                emit('success');
                closeModal();
              });
            } else {
              let params = {};
              for (let i in form) {
                params[i] = form[i];
              }
              update(params).then((_) => {
                message.success('编辑成功');
                emit('success');
                closeModal();
              });
            }
          }
        });
      };
      const closeModal = () => {
        formRef.value.resetFields();
        visible.value = false;
      };
      const formRef = ref();
      const rules = {
        name: [{ required: true, message: '请输入' }],
        status: [{ required: true, message: '请选择' }],
        remark: [{ required: true, message: '请输入' }],
        unit: [{ required: true, message: '请输入' }],
        price: [{ required: true, message: '请输入' }],
        amount: [{ required: true, message: '请输入' }],
        standards: [{ required: true, message: '请输入' }],
      };
      return {
        visible,
        title,
        form,
        showModal,
        handleOk,
        statusOptions,
        closeModal,
        formRef,
        rules,
      };
    },
  };
</script>

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