U 发布提交

he wei

2025-03-15 f8fd43f1307b0ae3a55f5a5a1390fd13b506fa88

 src/views/device/locks/addEdit.vue

@@ -1,231 +1,353 @@
<script setup>
import { ref, onMounted } from "vue";
import { getAreaTreeApi } from "@/api/area";
import { formatAreaTree } from "@/utils/tree";
import { updateLock, addLock } from "@/api/lockManager.js";
const areaList = ref([]);
const emit = defineEmits(["close", "ok"]);
const rules = {
  count: [
    {
      required: true,
      message: "不能为空",
      trigger: ["change", "blur"],
    },
    {
      validator: (rule, value, callback) => {
        const reg = /^\d+$/;
        if (!reg.test(value)) {
          callback(new Error("只能为数字"));
        } else {
          if (value > 1000) {
            callback(new Error("最大支持批量新增1000套"));
          } else if (value < 1) {
            callback(new Error("输入不能小于1"));
          } else {
            callback();
          }
        }
      },
      trigger: ["change", "blur"],
    },
  ],
  areaId: [
    {
      required: true,
      message: "不能为空",
      trigger: ["change", "blur"],
    },
    {
      validator: (rule, value, callback) => {
        if (!value.length) {
          callback(new Error("请选择区域"));
        } else {
          callback();
        }
      },
      trigger: ["change", "blur"],
    },
  ],
  lockName: [
    {
      required: true,
      message: "不能为空",
      trigger: ["change", "blur"],
    },
  ],
};
const formLock = ref({
  areaId: "",
  lockId: "",
  lockType: 3,
  lockName: "",
  count: 1,
});
   import { ref, onMounted } from "vue";
   import { getAreaTreeApi } from "@/api/area";
   import { formatAreaTree } from "@/utils/tree";
   import { updateLock, addLock, getScreenType, getScreenProduct } from "@/api/lockManager.js";
   import useElement from "@/hooks/useElement.js";
   const { $loading, $message, $confirm } = useElement();
   const areaList = ref([]);
   const emit = defineEmits(["close", "ok"]);
   const formRef = ref();
   const typeList = ref([

const lockTypes = ref([
  {
    label: "实体锁",
    value: 3,
  },
]);
   ]);
   const productList = ref([

const props = defineProps({
  info: {
    type: Object,
  },
  isAdd: {
    type: Boolean,
    default: false,
  },
  isBatch: {
    type: Boolean,
    default: false,
  },
});
   ]);
   const rules = {
      count: [
         {
            required: true,
            message: "不能为空",
            trigger: ["change", "blur"],
         },
         {
            validator: (rule, value, callback) => {
               const reg = /^\d+$/;
               if (!reg.test(value)) {
                  callback(new Error("只能为数字"));
               } else {
                  if (value > 1000) {
                     callback(new Error("最大支持批量新增1000套"));
                  } else if (value < 1) {
                     callback(new Error("输入不能小于1"));
                  } else {
                     callback();
                  }
               }
            },
            trigger: ["change", "blur"],
         },
      ],
      areaId: [
         {
            required: true,
            message: "不能为空",
            trigger: ["change", "blur"],
         },
         {
            validator: (rule, value, callback) => {
               if (Object.prototype.toString.call(value) === '[object Array]' && !value.length) {
                  callback(new Error("请选择区域"));
               } else {
                  callback();
               }
            },
            trigger: ["change", "blur"],
         },
      ],
      lockName: [
         {
            required: true,
            message: "不能为空",
            trigger: ["change", "blur"],
         },
      ],
    screenFlag: [
         {
            required: true,
            message: "不能为空",
            trigger: ["change", "blur"],
         },
      ],
    screenBoxType: [
         {
            required: true,
            message: "不能为空",
            trigger: ["change", "blur"],
         },
      ],
    screenBoxProduct: [
         {
            required: true,
            message: "不能为空",
            trigger: ["change", "blur"],
         },
      ],
      // 经度
      longitude: [
         {
            validator: (rule, value, callback) => {
               let reg = /^-?1?(\d{1,2}(\.\d+)?|\d{1}(\.\d+))$/;
               if (value && !reg.test(value)) {
                  callback(new Error("请输入正确的经度"));
               } else {
                  callback();
               }

function ok() {
  if (props.isAdd) {
    add();
  } else {
    update();
  }
}
            },
            trigger: ["change", "blur"],
         },
      ],
      // 纬度
      latitude: [
         {
            validator: (rule, value, callback) => {
               let reg = /^-?(\d{1,2}(\.\d+)?|\d{1}(\.\d+))$/;
               if (value && !reg.test(value)) {
                  callback(new Error("请输入正确的纬度"));
               } else {
                  callback();
               }

function add() {
  let areaId;
  if (formLock.value.areaId && formLock.value.areaId.length) {
    areaId = formLock.value.areaId[formLock.value.areaId.length - 1];
  }
  let params = {
    lockName: formLock.value.lockName,
    areaId,
    // 目前固定
    lockType: formLock.value.lockType,
  };
  if (props.isBatch) {
    params["num"] = formLock.value.count;
  }
  addLock(params)
    .then((res) => {
      let { code, data } = res;
      if (code && data) {
        emit("ok");
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
            },
            trigger: ["change", "blur"],
         },
      ]
   };
   const formLock = ref({
      areaId: "",
      lockId: "",
      lockType: 3,
      lockName: "",
      count: 1,
   });

function update() {
  // lockId lockName areaId lockType
  let areaId;
  if (formLock.value.areaId && formLock.value.areaId.length) {
    areaId = formLock.value.areaId[formLock.value.areaId.length - 1];
  }
  let params = {
    lockId: formLock.value.lockId,
    lockName: formLock.value.lockName,
    areaId,
    // 目前固定
    lockType: formLock.value.lockType,
  };
  updateLock(params)
    .then((res) => {
      let { code, data } = res;
      if (code && data) {
        emit("ok");
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
   const lockTypes = ref([
      {
         label: "实体锁",
         value: 3,
      },
   ]);

function close() {
  emit("close");
}
   const props = defineProps({
      info: {
         type: Object,
      },
      isAdd: {
         type: Boolean,
         default: false,
      },
      isBatch: {
         type: Boolean,
         default: false,
      },
   });

async function getAreaTree() {
  try {
    const res = await getAreaTreeApi();
    let _data = [];
    if (res.code === 1 && res.data) {
      _data = res.data2;
   function ok() {
      if (props.isAdd) {
         add();
      } else {
         update();
      }
   }

  async function getTypeList() {
    let res = await getScreenType();
    let { code, data, data2 } = res;
    let _list = [];
    if (code && data) {
      // console.log(data);
      _list = data2;
    }
    const treeList = [];
    let ids = _data.map((v) => v.id);
    for (let i = 0; i < _data.length; i++) {
      formatAreaTree(_data[i], ids, treeList);
    typeList.value = _list;
  }

  async function getProdList () {
    let res = await getScreenProduct();
    let { code, data,data2 } = res;
    let _list = [];
    if (code && data) {
      // console.log(data);
      _list = data2;
    }
    // console.log(_data, 'data');
    // console.log(treeList, 'treeList');
    areaList.value = treeList;
  } catch (e) {
    console.log(e);
    productList.value = _list;
  }
}

onMounted(() => {
  if (!props.isAdd) {
    console.log("info ", props.info, "=============");
   async function add() {
      let valid = await formRef.value.validate(() => { });
      if (!valid) {
         $message.error("表单验证失败");
         return false;
      }

    formLock.value = props.info;
  }
  getAreaTree();
});
      let areaId;
      if (formLock.value.areaId && formLock.value.areaId.length) {
         areaId = formLock.value.areaId[formLock.value.areaId.length - 1];
      }
      let params = {};
      let param2 = {
         lockName: formLock.value.lockName,
         areaId,
         // 目前固定
         lockType: formLock.value.lockType,
         screenFlag: formLock.value.screenFlag,
         screenBoxType: formLock.value.screenBoxType,
         screenBoxProduct: formLock.value.screenBoxProduct,
         longitude: formLock.value.longitude || 0,
         latitude: formLock.value.latitude || 0,
      };
      if (props.isBatch) {
         params["num"] = formLock.value.count;
      }
      let loading = $loading();
      addLock(params, param2)
         .then((res) => {
            let { code, data } = res;
            loading.close();
            if (code && data) {
               $message.success("操作成功");
               emit("ok");
            } else {
               $message.error("操作失败");
            }
         })
         .catch((err) => {
            loading.close();
            console.log(err);
         });
   }

   async function update() {
      // lockId lockName areaId lockType
      let valid = await formRef.value.validate(() => { });
      if (!valid) {
         $message.error("表单验证失败");
         return false;
      }

      let areaId;
      if (formLock.value.areaId && formLock.value.areaId.length) {
         areaId = formLock.value.areaId[formLock.value.areaId.length - 1];
      }
      let params = {
         lockId: formLock.value.lockId,
         lockName: formLock.value.lockName,
         areaId,
         // 目前固定
         lockType: formLock.value.lockType,
         screenFlag: formLock.value.screenFlag,
         screenBoxType: formLock.value.screenBoxType,
         screenBoxProduct: formLock.value.screenBoxProduct,
         longitude: formLock.value.longitude || 0,
         latitude: formLock.value.latitude || 0,
      };
      let loading = $loading();
      updateLock(params)
         .then((res) => {
            let { code, data } = res;
            loading.close();
            if (code && data) {
               $message.success("操作成功");
               emit("ok");
            } else {
               $message.error("操作失败");
            }
         })
         .catch((err) => {
            loading.close();
            console.log(err);
         });
   }

   function close() {
      emit("close");
   }

   async function getAreaTree() {
      try {
         const res = await getAreaTreeApi();
         let _data = [];
         if (res.code === 1 && res.data) {
            _data = res.data2;
         }
         const treeList = [];
         let ids = _data.map((v) => v.id);
         for (let i = 0; i < _data.length; i++) {
            formatAreaTree(_data[i], ids, treeList);
         }
         // console.log(_data, 'data');
         // console.log(treeList, 'treeList');
         areaList.value = treeList;
      } catch (e) {
         console.log(e);
      }
   }

   onMounted(() => {
      if (!props.isAdd) {
         console.log("info ", props.info, "=============");

         formLock.value = props.info;
      }
      getAreaTree();
    getTypeList();
    getProdList();
   });
</script>

<template>
  <el-form
    label-position="left"
    label-width="auto"
    :model="formLock"
    :rules="rules"
    style="max-width: 600px"
  >
  <el-form ref="formRef" label-position="left" label-width="auto" :model="formLock" :rules="rules"
    style="max-width: 600px">
    <!-- 所属区域 -->
    <el-form-item label="所属区域" label-position="right" prop="areaId">
      <el-cascader
        class="select"
        filterable
        clearable
        v-model="formLock.areaId"
        :props="{ value: 'id', checkStrictly: true }"
        :options="areaList"
        ><template #default="{ node, data }">
      <el-cascader class="select" filterable clearable v-model="formLock.areaId"
        :props="{ value: 'id', checkStrictly: true }" :options="areaList"><template #default="{ node, data }">
          <span>{{ data.label }}</span>
          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
        </template></el-cascader
      >
        </template></el-cascader>
    </el-form-item>
    <!-- 类型 -->
    <el-form-item label="类型" label-position="right" prop="lockType">
      <el-select
        v-model="formLock.lockType"
        placeholder="Select"
        style="width: 240px"
      >
        <el-option
          v-for="item in lockTypes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      <el-select v-model="formLock.lockType" placeholder="Select" style="width: 240px">
        <el-option v-for="item in lockTypes" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <!-- 锁具名称 -->
    <el-form-item label="锁具名称" label-position="right" prop="lockName">
      <el-input v-model="formLock.lockName" />
    </el-form-item>
    <!-- 锁具安装位置 1屏柜 2 其他 -->
    <el-form-item label="锁具安装位置" label-position="right" prop="screenFlag">
      <el-select v-model="formLock.screenFlag" placeholder="请选择" style="width: 240px">
        <el-option label="屏柜" :value="1" />
        <el-option label="其他" :value="2" />
      </el-select>
    </el-form-item>
  
    <!-- 锁具安装位置 类型 -->
    <el-form-item label="锁具安装位置类型" label-position="right" prop="screenBoxType">
      <el-select v-model="formLock.screenBoxType" filterable allow-create placeholder="请选择或手动输入后选择" style="width: 240px">
        <el-option v-for="(item, idx) in typeList" :key="'type_' + idx" :label="item" :value="item" />
      </el-select>
    </el-form-item>
  
    <!-- 锁具安装位置 品牌 -->
    <el-form-item label="锁具安装位置品牌" label-position="right" prop="screenBoxProduct">
      <el-select v-model="formLock.screenBoxProduct" filterable allow-create placeholder="请选择或手动输入后选择" style="width: 240px">
        <el-option v-for="(item, idx) in productList" :key="'product_' + idx" :label="item" :value="item" />
      </el-select>
    </el-form-item>
    <!-- 经度 -->
    <el-form-item label="经度" label-position="right" prop="longitude">
      <el-input v-model="formLock.longitude" />
    </el-form-item>
    <!-- 纬度 -->
    <el-form-item label="纬度" label-position="right" prop="latitude">
      <el-input v-model="formLock.latitude" />
    </el-form-item>
    <!-- 批量添加数量  -->
    <el-form-item
      label="批量添加数量"
      label-position="right"
      prop="count"
      v-if="isBatch"
    >
    <el-form-item label="批量添加数量" label-position="right" prop="count" v-if="isBatch">
      <el-input v-model="formLock.count" />
    </el-form-item>
  </el-form>
@@ -239,6 +361,7 @@
:deep(.select) {
  width: 100%;
}

.footer {
  text-align: right;
}