1. 添加溯源清单功能 2. 修复切换至走航监测界面后，之前正在加载的历史数据依旧展示至地图的问题 3. 添加折线图下载图片功能； 4. 添加数据导出...

riku

2024-09-06 3832a82fb79d4cec4cca5e2854e54953f2095ef8

 src/components/device/DeviceCreate.vue

@@ -0,0 +1,85 @@
<template>
  <el-button
    type="primary"
    class="el-button-custom"
    @click="dialogVisible = !dialogVisible"
  >
    新建设备
  </el-button>
  <CardDialog v-model="dialogVisible" title="新建走航设备">
    <el-form
      :inline="false"
      :model="formObj"
      ref="formRef"
      :rules="rules"
      label-position="right"
      label-width="100px"
    >
      <el-form-item label="设备编号" prop="deviceCode">
        <el-input
          size="small"
          clearable
          v-model="formObj.deviceCode"
          placeholder="设备编号"
        />
      </el-form-item>
      <OptionType :show="true" v-model="formObj.deviceType"></OptionType>
      <el-form-item>
        <el-button
          :disabled="!edit"
          type="primary"
          @click="onSubmit"
          :loading="loading"
          >提交</el-button
        >
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </CardDialog>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import deviceApi from '@/api/deviceApi';
import { useFormConfirm } from '@/composables/formConfirm';
import { useFetchData } from '@/composables/fetchData';
import { useDeviceStore } from '@/stores/device';

const deviceStore = useDeviceStore();
const dialogVisible = ref(false);
const { loading, fetchData } = useFetchData();
const rules = reactive({
  deviceCode: [
    {
      required: true,
      message: '设备编号不能为空',
      trigger: 'blur'
    }
  ]
});
const param = computed(() => {
  return {
    deviceType: formObj.value.deviceType,
    deviceCode: formObj.value.deviceCode
  };
});
// 创建设备
function createDevice() {
  fetchData(() => {
    return deviceApi.putNewDevice(param.value).then(() => {
      dialogVisible.value = false;
      deviceStore.fetchDevice();
    });
  });
}
const { formObj, formRef, edit, onSubmit, onCancel } = useFormConfirm({
  submit: {
    do: createDevice
  },
  cancel: {
    do: () => {
      dialogVisible.value = false;
    }
  }
});
</script>
<style scoped></style>