From 2d3e133203e876c171ad1841cd8dcdd4fe4988cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Wed, 30 Jul 2025 17:23:53 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E7=BC=BA=E5=A4=B1=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 .../hjm/hjmCar/components/hjmCarEdit.vue      | 584 +++++++++---------
 2 files changed, 296 insertions(+), 290 deletions(-)

diff --git a/.env.development b/.env.development
index 8aa7af0..3380aee 100644
--- a/.env.development
+++ b/.env.development
@@ -1,2 +1,2 @@
 VITE_APP_NAME=后台管理(开发环境)
-VITE_API_URL=http://127.0.0.1:9200/api
+#VITE_API_URL=http://127.0.0.1:9200/api
diff --git a/src/views/hjm/hjmCar/components/hjmCarEdit.vue b/src/views/hjm/hjmCar/components/hjmCarEdit.vue
index 59800b2..ff8b125 100644
--- a/src/views/hjm/hjmCar/components/hjmCarEdit.vue
+++ b/src/views/hjm/hjmCar/components/hjmCarEdit.vue
@@ -71,7 +71,8 @@
             style="margin-left: 10px; width: 137px"
             @click="openMapPicker"
           >
-            <AimOutlined />选取
+            <AimOutlined/>
+            选取
           </a-button>
         </div>
       </a-form-item>
@@ -124,306 +125,311 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, watch } from 'vue';
-  import { Form, message } from 'ant-design-vue';
-  import { assignObject, uuid } from 'ele-admin-pro';
-  import { addHjmCar, updateHjmCar } from '@/api/hjm/hjmCar';
-  import { HjmCar } from '@/api/hjm/hjmCar/model';
-  import { useThemeStore } from '@/store/modules/theme';
-  import { storeToRefs } from 'pinia';
-  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
-  import { FormInstance } from 'ant-design-vue/es/form';
-  import { FileRecord } from '@/api/system/file/model';
-  import { AimOutlined } from '@ant-design/icons-vue';
-  import { CenterPoint } from 'ele-admin-pro/es/ele-map-picker/types';
-  import OrgSelect from '@/views/system/user/components/org-select.vue';
-  import { Organization } from '@/api/system/organization/model';
-  import { User } from '@/api/system/user/model';
-  import { pageUsers } from '@/api/system/user';
-  import { listOrganizations } from '@/api/system/organization';
-  import { toTreeData } from 'ele-admin-pro/es';
-  import { DictData } from '@/api/system/dict-data/model';
-  import { HjmFence } from '@/api/hjm/hjmFence/model';
+import {ref, reactive, watch} from 'vue';
+import {Form, message} from 'ant-design-vue';
+import {assignObject, uuid} from 'ele-admin-pro';
+import {addHjmCar, updateHjmCar} from '@/api/hjm/hjmCar';
+import {HjmCar} from '@/api/hjm/hjmCar/model';
+import {useThemeStore} from '@/store/modules/theme';
+import {storeToRefs} from 'pinia';
+import {ItemType} from 'ele-admin-pro/es/ele-image-upload/types';
+import {FormInstance} from 'ant-design-vue/es/form';
+import {FileRecord} from '@/api/system/file/model';
+import {AimOutlined} from '@ant-design/icons-vue';
+import {CenterPoint} from 'ele-admin-pro/es/ele-map-picker/types';
+import OrgSelect from '@/views/system/user/components/org-select.vue';
+import {Organization} from '@/api/system/organization/model';
+import {User} from '@/api/system/user/model';
+import {pageUsers} from '@/api/system/user';
+import {listOrganizations} from '@/api/system/organization';
+import {toTreeData} from 'ele-admin-pro/es';
+import {DictData} from '@/api/system/dict-data/model';
+import {HjmFence} from '@/api/hjm/hjmFence/model';
 
-  // 是否是修改
-  const isUpdate = ref(false);
-  const useForm = Form.useForm;
-  // 是否开启响应式布局
-  const themeStore = useThemeStore();
-  const { styleResponsive } = storeToRefs(themeStore);
-  const { darkMode } = storeToRefs(themeStore);
+// 是否是修改
+const isUpdate = ref(false);
+const useForm = Form.useForm;
+// 是否开启响应式布局
+const themeStore = useThemeStore();
+const {styleResponsive} = storeToRefs(themeStore);
+const {darkMode} = storeToRefs(themeStore);
 
-  const props = defineProps<{
-    // 弹窗是否打开
-    visible: boolean;
-    // 修改回显的数据
-    data?: HjmCar | null;
-  }>();
+const props = defineProps<{
+  // 弹窗是否打开
+  visible: boolean;
+  // 修改回显的数据
+  data?: HjmCar | null;
+}>();
 
-  const emit = defineEmits<{
-    (e: 'done'): void;
-    (e: 'update:visible', visible: boolean): void;
-  }>();
+const emit = defineEmits<{
+  (e: 'done'): void;
+  (e: 'update:visible', visible: boolean): void;
+}>();
 
-  // 提交状态
-  const loading = ref(false);
-  // 是否显示最大化切换按钮
-  const maxable = ref(true);
-  // 表格选中数据
-  const formRef = ref<FormInstance | null>(null);
-  const images = ref<ItemType[]>([]);
-  // 是否显示地图选择弹窗
-  const showMap = ref(false);
-  const users = ref<User[]>([]);
-  const organizationId = ref<number>();
-  const organizations = ref<Organization[]>([]);
+// 提交状态
+const loading = ref(false);
+// 是否显示最大化切换按钮
+const maxable = ref(true);
+// 表格选中数据
+const formRef = ref<FormInstance | null>(null);
+const images = ref<ItemType[]>([]);
+// 是否显示地图选择弹窗
+const showMap = ref(false);
+const users = ref<User[]>([]);
+const organizationId = ref<number>();
+const organizations = ref<Organization[]>([]);
 
-  // 用户信息
-  const form = reactive<HjmCar>({
-    id: undefined,
-    name: undefined,
-    image: undefined,
-    type: undefined,
-    kuaidi: undefined,
-    kuaidiAdmin: undefined,
-    code: undefined,
-    driverId: undefined,
-    driver: undefined,
-    driverPhone: undefined,
-    insuranceStatus: undefined,
-    gpsNo: undefined,
-    fenceId: undefined,
-    fenceName: undefined,
-    fence: undefined,
-    location: undefined,
-    longitude: undefined,
-    latitude: undefined,
-    district: undefined,
-    address: undefined,
-    organizationId: undefined,
-    organizationParentId: undefined,
-    userId: undefined,
-    toUser: undefined,
-    comments: undefined,
-    status: 0,
-    deleted: undefined,
-    tenantId: undefined,
-    createTime: undefined,
-    sortNumber: 100
-  });
+// 用户信息
+const form = reactive<HjmCar>({
+  id: undefined,
+  name: undefined,
+  image: undefined,
+  type: undefined,
+  kuaidi: undefined,
+  kuaidiAdmin: undefined,
+  code: undefined,
+  driverId: undefined,
+  driver: undefined,
+  driverPhone: undefined,
+  insuranceStatus: undefined,
+  gpsNo: undefined,
+  fenceId: undefined,
+  fenceName: undefined,
+  fence: undefined,
+  location: undefined,
+  longitude: undefined,
+  latitude: undefined,
+  district: undefined,
+  address: undefined,
+  organizationId: undefined,
+  organizationParentId: undefined,
+  userId: undefined,
+  toUser: undefined,
+  comments: undefined,
+  status: 0,
+  deleted: undefined,
+  tenantId: undefined,
+  createTime: undefined,
+  sortNumber: 100
+});
 
-  /* 更新visible */
-  const updateVisible = (value: boolean) => {
-    emit('update:visible', value);
-  };
+/* 更新visible */
+const updateVisible = (value: boolean) => {
+  emit('update:visible', value);
+};
 
-  // 表单验证规则
-  const rules = reactive({
-    organizationId: [
-      {
-        required: true,
-        type: 'number',
-        message: '请选择车辆所属站点',
-        trigger: 'blur'
-      }
-    ],
-    code: [
-      {
-        required: true,
-        type: 'string',
-        message: '请填写车辆编号',
-        trigger: 'blur'
-      }
-    ],
-    fenceName: [
-      {
-        required: true,
-        type: 'string',
-        message: '请选择电子围栏',
-        trigger: 'blur'
-      }
-    ],
-    insuranceStatus: [
-      {
-        required: true,
-        type: 'string',
-        message: '请选择保险状态',
-        trigger: 'blur'
-      }
-    ],
-    sortNumber: [
-      {
-        required: true,
-        type: 'number',
-        message: '请填写排序号',
-        trigger: 'blur'
-      }
-    ]
-    // driver: [
-    //   {
-    //     required: true,
-    //     type: 'any',
-    //     message: '请绑定操作员',
-    //     trigger: 'blur'
-    //   }
-    // ]
-  });
-
-  const chooseInsuranceStatus = (item: DictData) => {
-    form.insuranceStatus = item.dictDataCode;
-  };
-
-  const updateFence = (item: HjmFence) => {
-    form.fenceName = item.name;
-    form.fenceId = item.id;
-  };
-
-  /* 打开位置选择 */
-  const openMapPicker = () => {
-    showMap.value = true;
-  };
-
-  /* 地图选择后回调 */
-  const onDone = (location: CenterPoint) => {
-    if (location) {
-      console.log(location);
-      form.location = `${location.lat},${location.lng}`;
-      form.longitude = `${location.lng}`;
-      form.latitude = `${location.lat}`;
-      form.address = `${location.address}`;
-      form.district = `${location.city?.district}`;
+// 表单验证规则
+const rules = reactive({
+  organizationId: [
+    {
+      required: true,
+      type: 'number',
+      message: '请选择车辆所属站点',
+      trigger: 'blur'
     }
-    showMap.value = false;
-  };
-
-  const onOrganization = (index: number) => {
-    form.driver = undefined;
-    users.value = [];
-    organizations.value?.map((item) => {
-      if (
-        item.children?.map((d) => {
-          const find = organizations.value?.find(
-            (i) => i.organizationId == d.parentId
-          );
-          if (find) {
-            if (d.value == index) {
-              form.code = `${find.organizationCode}`;
-              form.organizationParentId = find.organizationId;
-              form.organizationId = d.organizationId;
-              organizationId.value = find.organizationId;
-              getUsers();
-            }
-          }
-        })
-      )
-        if (index == item.value) {
-          form.kuaidi = item.organizationName;
-        }
-    });
-  };
-
-  const getUsers = () => {
-    pageUsers({ organizationId: organizationId.value }).then((res) => {
-      users.value =
-        res?.list.map((d) => {
-          d.label = d.realName || d.nickname;
-          d.value = d.userId;
-          return d;
-        }) || [];
-    });
-  };
-
-  const chooseImage = (data: FileRecord) => {
-    images.value.push({
-      uid: data.id,
-      url: data.path,
-      status: 'done'
-    });
-  };
-
-  const onDeleteItem = (index: number) => {
-    images.value.splice(index, 1);
-  };
-
-  const { resetFields } = useForm(form, rules);
-
-  /* 保存编辑 */
-  const save = () => {
-    if (!formRef.value) {
-      return;
+  ],
+  code: [
+    {
+      required: true,
+      type: 'string',
+      message: '请填写车辆编号',
+      trigger: 'blur'
     }
-    formRef.value
-      .validate()
-      .then(() => {
-        loading.value = true;
-        const formData = {
-          ...form,
-          image: JSON.stringify(images.value)
-        };
-        const saveOrUpdate = isUpdate.value ? updateHjmCar : addHjmCar;
-        saveOrUpdate(formData)
-          .then((msg) => {
-            loading.value = false;
-            message.success(msg);
-            updateVisible(false);
-            emit('done');
-          })
-          .catch((e) => {
-            loading.value = false;
-            message.error(e.message);
-          });
-      })
-      .catch(() => {});
-  };
+  ],
+  fenceName: [
+    {
+      required: true,
+      type: 'string',
+      message: '请选择电子围栏',
+      trigger: 'blur'
+    }
+  ],
+  insuranceStatus: [
+    {
+      required: true,
+      type: 'string',
+      message: '请选择保险状态',
+      trigger: 'blur'
+    }
+  ],
+  sortNumber: [
+    {
+      required: true,
+      type: 'number',
+      message: '请填写排序号',
+      trigger: 'blur'
+    }
+  ]
+  // driver: [
+  //   {
+  //     required: true,
+  //     type: 'any',
+  //     message: '请绑定操作员',
+  //     trigger: 'blur'
+  //   }
+  // ]
+});
 
-  watch(
-    () => props.visible,
-    (visible) => {
-      if (visible) {
-        images.value = [];
-        // 加载机构
-        listOrganizations()
-          .then((list) => {
-            loading.value = false;
-            list.forEach((d) => {
-              d.key = d.organizationId;
-              d.value = d.organizationId;
-              d.title = d.organizationName;
-            });
-            organizations.value = toTreeData({
-              data: list,
-              idField: 'organizationId',
-              parentIdField: 'parentId'
-            });
-          })
-          .catch((e) => {
-            loading.value = false;
-            message.error(e.message);
-          });
-        if (props.data) {
-          assignObject(form, props.data);
-          if (props.data.image) {
-            const arr = JSON.parse(props.data.image);
-            arr.map((item) => {
-              images.value.push({
-                uid: uuid(),
-                url: item.url,
-                status: 'done'
-              });
-            });
-          }
-          if (props.data.organizationParentId) {
-            organizationId.value = props.data.organizationParentId;
+const chooseInsuranceStatus = (item: DictData) => {
+  form.insuranceStatus = item.dictDataCode;
+};
+
+const updateFence = (item: HjmFence) => {
+  form.fenceName = item.name;
+  form.fenceId = item.id;
+};
+
+/* 打开位置选择 */
+const openMapPicker = () => {
+  showMap.value = true;
+};
+
+/* 地图选择后回调 */
+const onDone = (location: CenterPoint) => {
+  if (location) {
+    console.log(location);
+    form.location = `${location.lat},${location.lng}`;
+    form.longitude = `${location.lng}`;
+    form.latitude = `${location.lat}`;
+    form.address = `${location.address}`;
+    form.district = `${location.city?.district}`;
+  }
+  showMap.value = false;
+};
+
+const onOrganization = (index: number) => {
+  form.driver = undefined;
+  users.value = [];
+  organizations.value?.map((item) => {
+    if (
+      item.children?.map((d) => {
+        const find = organizations.value?.find(
+          (i) => i.organizationId == d.parentId
+        );
+        if (find) {
+          if (d.value == index) {
+            form.code = `${find.organizationCode}`;
+            form.organizationParentId = find.organizationId;
+            form.organizationId = d.organizationId;
+            organizationId.value = find.organizationId;
             getUsers();
           }
-          isUpdate.value = true;
-        } else {
-          isUpdate.value = false;
         }
-      } else {
-        resetFields();
+      })
+    )
+      if (index == item.value) {
+        form.kuaidi = item.organizationName;
       }
-    },
-    { immediate: true }
-  );
+  });
+};
+
+const getUsers = () => {
+  pageUsers({organizationId: organizationId.value}).then((res) => {
+    users.value =
+      res?.list.map((d) => {
+        d.label = d.realName || d.nickname;
+        d.value = d.userId;
+        return d;
+      }) || [];
+  });
+};
+
+const chooseImage = (data: FileRecord) => {
+  images.value.push({
+    uid: data.id,
+    url: data.path,
+    status: 'done'
+  });
+};
+
+const onDeleteItem = (index: number) => {
+  images.value.splice(index, 1);
+};
+
+const {resetFields} = useForm(form, rules);
+
+/* 保存编辑 */
+const save = () => {
+  if (!formRef.value) {
+    return;
+  }
+  if (form.code == '' || !form.code) {
+    message.error('所属站点下的节点不能为空！');
+    return;
+  }
+  formRef.value
+    .validate()
+    .then(() => {
+      loading.value = true;
+      const formData = {
+        ...form,
+        image: JSON.stringify(images.value)
+      };
+      const saveOrUpdate = isUpdate.value ? updateHjmCar : addHjmCar;
+      saveOrUpdate(formData)
+        .then((msg) => {
+          loading.value = false;
+          message.success(msg);
+          updateVisible(false);
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          message.error(e.message);
+        });
+    })
+    .catch(() => {
+    });
+};
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      images.value = [];
+      // 加载机构
+      listOrganizations()
+        .then((list) => {
+          loading.value = false;
+          list.forEach((d) => {
+            d.key = d.organizationId;
+            d.value = d.organizationId;
+            d.title = d.organizationName;
+          });
+          organizations.value = toTreeData({
+            data: list,
+            idField: 'organizationId',
+            parentIdField: 'parentId'
+          });
+        })
+        .catch((e) => {
+          loading.value = false;
+          message.error(e.message);
+        });
+      if (props.data) {
+        assignObject(form, props.data);
+        if (props.data.image) {
+          const arr = JSON.parse(props.data.image);
+          arr.map((item) => {
+            images.value.push({
+              uid: uuid(),
+              url: item.url,
+              status: 'done'
+            });
+          });
+        }
+        if (props.data.organizationParentId) {
+          organizationId.value = props.data.organizationParentId;
+          getUsers();
+        }
+        isUpdate.value = true;
+      } else {
+        isUpdate.value = false;
+      }
+    } else {
+      resetFields();
+    }
+  },
+  {immediate: true}
+);
 </script>