radar_ui/src/views/dataManage/index/components/Modal/ImportModal.vue

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "ImportModal",
});
</script>

<script setup lang="ts">
import Icon from "@/components/Module/Icon/index.vue";
import Modal from "@/components/Module/Modal/index.vue";
import {
  Form,
  FormItem,
  Select,
  SelectOption,
  Row,
  Col,
  Space,
  Button,
  Input,
  Textarea,
  Upload,
  Radio,
  RadioGroup,
} from "ant-design-vue";
import { ref } from "vue";

interface PropsType {
  state: Record<string, any>;
  api: Record<string, any>;
  requestMap: Record<string, any>;
  // data: Record<string, any>[];
}

const props = withDefaults(defineProps<PropsType>(), {
  state: () => {
    return {};
  },
  api: () => {
    return {};
  },
  requestMap: () => {
    return {};
  },
});

const emits = defineEmits(["onSuccess"]);

// 表单实例
const formRef = ref();

// 表单
const form = ref<Record<string, any>>({
  files: [],
  csvFiles: [],
  batch_name: "",
  description: "",
  work_mode: "",
  system_param: "",
  system_status: "",
  agreement: "38解析协议",
});

// 协议校验
const onAgreementValid = (
  rule: Record<string, any>,
  value: Record<string, any>,
  callback: Function,
) => {
  if (
    form.value.agreement &&
    (form.value.agreement != customAgreement.value ||
      (form.value.agreement == customAgreement.value && customAgreement.value != ""))
  ) {
    return Promise.resolve();
  } else {
    return Promise.reject("请输入");
  }
};

const onFilesValid = (
  rule: Record<string, any>,
  value: Record<string, any>,
  callback: Function,
) => {
  if (form.value.files && form.value.files.length) {
    return Promise.resolve();
  } else {
    return Promise.reject("请上传文件");
  }
};

const rules: Record<string, any> = {
  files: [
    {
      required: true,
      validator: onFilesValid,
      message: "请上传文件",
      trigger: "blur",
    },
  ],
  batch_name: [
    {
      required: true,
      message: "请输入数据名称",
      trigger: "blur",
    },
  ],
  // agreement: [
  //   {
  //     required: true,
  //     validator: onAgreementValid,
  //     message: "请输入协议",
  //     trigger: "blur",
  //   },
  // ],
};

// 协议选项配置
const options = [
  {
    label: "38解析协议",
    value: "38解析协议",
  },
  {
    label: "14解析协议",
    value: "14解析协议",
  },
];

// 上传
const onUpload = (e: File) => {
  form.value.files[0] = e;
  return false;
};

// 上传csv辅助文件
const onCsvUpload = (e: File) => {
  form.value.csvFiles[0] = e;
  return false;
};

const customAgreement = ref("");

// 更新自定义协议
const updateAgreement = (e: Record<string, any>) => {
  if (form.value.agreement == customAgreement.value) {
    form.value.agreement = e.target.value;
  }
  customAgreement.value = e.target.value;
};

let open = ref<boolean>(false);

// 重置
const reset = () => {
  // formRef.value.clearValidate();
  form.value = {
    files: [],
    csvFiles: [],
    batch_name: "",
    description: "",
    work_mode: "",
    system_param: "",
    system_status: "",
    // agreement: "38解析协议",
  };
  customAgreement.value = "";
};

// 打开
const onOpen = () => {
  reset();
  open.value = true;
};

// 关闭
const onClose = () => {
  open.value = false;
};

defineExpose({ onOpen, onClose });

// 提交
const onSubmit = async () => {
  await formRef.value.validate();

  const formData = new FormData();
  formData.append("file", form.value.files[0]);
  if (form.value.csvFiles.length) {
    formData.append("csvFile", form.value.csvFiles[0]);
  }
  formData.append("batch_name", form.value.batch_name);
  formData.append("description", form.value.description);
  formData.append("work_mode", form.value.work_mode);
  formData.append("system_param", form.value.system_param);
  formData.append("system_status", form.value.system_status);
  const res = await props.api.onImportData(formData);
  if (res?.code == 200) {
    emits("onSuccess");
    onClose();
  }
  console.log("form", props);
};
</script>

<template>
  <Modal
    v-model:open="open"
    title="导入数据"
    width="700px"
    style="top: 10px"
    :loading="props.requestMap.importRequest.loading.value"
    :onConfirm="onSubmit"
  >
    <Form layout="vertical" :model="form" ref="formRef" :rules="rules" v-if="open">
      <Row :gutter="[20, 0]">
        <Col :span="24">
          <FormItem label="选择数据" name="files" class="upload-row">
            <Upload
              :multiple="false"
              :before-upload="onUpload"
              :max-count="1"
              style="width: 100%"
              accept=".bin, .mat, .json"
            >
              <div class="upload-box">
                <div class="upload-box-icon">
                  <Icon name="fileUpload" />
                </div>
                <div class="upload-box-title">点击上传</div>
              </div>
            </Upload>
            <div class="upload-desc">支持bim、mat、json等各类二进制原始数据及航迹数据</div>
          </FormItem>
        </Col>
        <Col :span="24">
          <FormItem label="csv数据" name="csv" class="upload-row">
            <Upload
              :multiple="false"
              :before-upload="onCsvUpload"
              :max-count="1"
              style="width: 100%"
              accept=".bin, .mat, .json"
            >
              <div class="upload-box">
                <div class="upload-box-icon">
                  <Icon name="fileUpload" />
                </div>
                <div class="upload-box-title">点击上传</div>
              </div>
            </Upload>
            <div class="upload-desc">支持bim、mat、json等各类二进制原始数据及航迹数据</div>
          </FormItem>
        </Col>
        <Col :span="24">
          <FormItem label="数据名称" name="batch_name">
            <Input v-model:value="form.batch_name" placeholder="请输入" />
          </FormItem>
        </Col>
        <Col :span="24">
          <FormItem label="数据描述" name="description">
            <Input v-model:value="form.description" placeholder="请输入" />
          </FormItem>
        </Col>
        <Col :span="24">
          <FormItem label="雷达工作模式" name="work_mode">
            <Input v-model:value="form.work_mode" placeholder="请输入" />
          </FormItem>
        </Col>
        <Col :span="24">
          <FormItem label="雷达系统参数" name="system_param">
            <Textarea
              :autoSize="{
                minRows: 3,
              }"
              v-model:value="form.system_param"
              placeholder="请输入"
            />
          </FormItem>
        </Col>
        <Col :span="24">
          <FormItem label="系统状态" name="system_status">
            <Input v-model:value="form.system_status" placeholder="请输入" />
          </FormItem>
        </Col>
        <!-- <Col :span="24">
          <FormItem label="数据解析" name="agreement">
            <RadioGroup v-model:value="form.agreement" style="width: 100%">
              <Row :gutter="[12, 12]">
                <Col :span="12" v-for="item in options">
                  <Radio :value="item.value">{{ item.label }}</Radio>
                </Col>
                <Col :span="12">
                  <Radio :value="customAgreement">
                    <Input :value="customAgreement" @change="updateAgreement" />
                  </Radio>
                </Col>
              </Row>
            </RadioGroup>
          </FormItem>
        </Col> -->
      </Row>
    </Form>
  </Modal>
</template>

<style scoped lang="scss">
.grid-box {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  :deep(.ant-form-item) {
    margin-bottom: 0;
  }
}
.grey-text {
  color: #8c8c8c;
}
.upload-row {
  .ant-upload-wrapper {
    display: block;
    :deep(.ant-upload) {
      width: 100%;
    }
  }
  .ant-upload-select {
    width: 100%;
    .upload-box {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 16px;
      color: #8a8a8a;
      width: 100%;
      aspect-ratio: 537 / 91;
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #d9d9d9;
      background: rgba(200, 200, 200, 0.2);
      &-icon {
      }
      &-title {
      }
    }
  }
  .upload-desc {
    font-family:
      Source Han Sans,
      Source Han Sans;
    font-weight: 400;
    font-size: 12px;
    color: #c8c8c8;
    line-height: 26px;
    text-align: justify;
    font-style: normal;
    text-transform: none;
  }
}

.upload-footer {
  padding: 12px 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
}
</style>