ops-management-platform-frontend/src/views/onlineAnalysis/zero/addModal.vue

<template>
  <a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%">
    <a-form :model="form" layout="vertical" ref="formRef" :rules="rules">
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="站点名称" name="station">
            <a-select v-model:value="form.station" :options="stationOptions" placeholder="请选择" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="监测项目" name="monitorProject">
            <a-select
              v-model:value="form.monitorProject"
              :options="monitorProjectOptions"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="上次校零校准时间" name="toZeroDate">
            <a-date-picker v-model:value="form.toZeroDate" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="核查开始时间" name="checkStartDate">
            <a-date-picker v-model:value="form.checkStartDate" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="核查结束时间" name="checkEndDate">
            <a-date-picker v-model:value="form.checkEndDate" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="实际校零校准次数" name="actualTimes">
            <a-input v-model:value="form.actualTimes" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="应校零校准次数" name="planTimes">
            <a-input v-model:value="form.planTimes" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="监理人员" name="monitorPerson">
            <a-select
              v-model:value="form.monitorPerson"
              :options="monitorPersonOptions"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="所属公司" name="ioCompany">
            <a-select
              v-model:value="form.ioCompany"
              :options="ioCompanyOptions"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="监理公司" name="monitorCompany">
            <a-select
              v-model:value="form.monitorCompany"
              :options="monitorCompanyOptions"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="备注" name="remark">
            <a-textarea v-model:value="form.remark" :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, add, update } from './api';
  import { getStationList } from '@/api/common/index';
  export default {
    setup(props, { emit }) {
      const title = ref('新增');
      const visible = ref(false);
      const form = reactive({
        station: null,
        monitorProject: null,
        toZeroDate: '',
        checkStartDate: '',
        checkEndDate: '',
        actualTimes:null,
        planTimes:null,
        monitorPerson:null,
        ioCompany: null,
        monitorCompany: null,
        remark:'',
        id: null,
      });
      //下拉框
      const ioCompanyOptions = [
        {
          value: '安徽蓝盾',
        },
      ];
      const monitorProjectOptions = [
        {
          value: 'PM2.5',
        },
        {
          value: 'O3',
        },
      ];
      const monitorCompanyOptions = [
        {
          value: '国研咨询',
        },
      ];
      const stationOptions = ref([]);
      const monitorPersonOptions = ref([
        {
          value:'孟家乐'
        },
      ]);
      const showModal = async (type, id, projectId) => {
        visible.value = true;
        const res = await getStationList();
        stationOptions.value = res;
        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];
          }
        }
      };

      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 = {
        station: [{ required: true, message: '请选择' }],
        monitorProject: [{ required: true, message: '请选择' }],
        toZeroDate: [{ required: true, message: '请选择' }],
        checkStartDate: [{ required: true, message: '请选择' }],
        checkEndDate: [{ required: true, message: '请选择' }],
        planTimes: [{ required: true, message: '请输入' }],
        actualTimes: [{ required: true, message: '请输入' }],
      };
      return {
        visible,
        title,
        form,
        showModal,
        handleOk,
        stationOptions,
        monitorProjectOptions,
        monitorCompanyOptions,
        ioCompanyOptions,
        monitorPersonOptions,
        closeModal,
        formRef,
        rules,
      };
    },
  };
</script>

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