UA 整理提交

he wei

2025-04-23 b9bd29a1a81f6f7de479e3cc3fdfe3d85fc660bf

 src/views/device/locks/addEdit.vue

@@ -1,9 +1,23 @@
<script setup>
   import { ref, onMounted } from "vue";
   import { getAreaTreeApi } from "@/api/area";
   import { formatAreaTree } from "@/utils/tree";
import { ref, onMounted, reactive, computed } 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";
import useStation from '@/hooks/useStationList.js';
const {
   stationName1,
   stationName2,
   stationName3,
   stationName4,
   stationList1,
   stationList2,
   stationList3,
   stationList4,
  getProviceList, getCityList, getCountryList, getStationList
} = useStation();


   const { $loading, $message, $confirm } = useElement();
   const areaList = ref([]);
   const emit = defineEmits(["close", "ok"]);
@@ -15,48 +29,35 @@

   ]);
   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"],
      },
   ],
  stationName1: [
      {
         required: true,
         message: "不能为空",
         trigger: ["change", "blur"],
      },
   ],
  stationName2: [
      {
         required: true,
         message: "不能为空",
         trigger: ["change", "blur"],
      },
   ],
  stationName3: [
      {
         required: true,
         message: "不能为空",
         trigger: ["change", "blur"],
      },
   ],
  stationName4: [
         {
            required: true,
            message: "不能为空",
@@ -115,13 +116,49 @@
         },
      ]
   };
   const formLock = ref({
      areaId: "",
      lockId: "",
      lockType: 3,
const formLock = reactive({
      lockName: "",
      count: 1,
   lockId: "",
   lockType: 1,
   lockAddress: '',
   screenFlag: 1,
   screenBoxType: '',
   screenBoxProduct: '',
   longitude: '',
   latitude: '',
   stationName1: stationName1.value,
   stationName2: stationName2.value,
   stationName3: stationName3.value,
   stationName4: stationName4.value
   });

const layout = {
   gutter: 16,
   span: 12,
};

function stationNameChange(idx, val) {
   console.log('idx, val', idx, val, '=============');

   switch (idx) {
      case 1:
         stationName1.value = val;
      formLock.stationName2 = '';
      formLock.stationName3 = '';
      formLock.stationName4 = '';
         break;
      case 2:
         stationName2.value = val;
      formLock.stationName3 = '';
      formLock.stationName4 = '';
         break;
      case 3:
         stationName3.value = val;
      formLock.stationName4 = '';
         break; default:
         break;
   }
}

   const lockTypes = ref([
      {
@@ -135,10 +172,6 @@
         type: Object,
      },
      isAdd: {
         type: Boolean,
         default: false,
      },
      isBatch: {
         type: Boolean,
         default: false,
      },
@@ -180,28 +213,24 @@
         $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 = {};
      let param2 = {
         lockName: formLock.value.lockName,
         areaId,
   let params = {
      lockName: formLock.lockName,
         // 目前固定
         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,
      lockType: formLock.lockType,
    lockName: formLock.lockName,
    lockAddress: formLock.lockAddress,
      screenFlag: formLock.screenFlag,
      screenBoxType: formLock.screenBoxType,
      screenBoxProduct: formLock.screenBoxProduct,
    stationName1: formLock.stationName1,
    stationName2: formLock.stationName2,
    stationName3: formLock.stationName3,
    stationName4: formLock.stationName4,
      longitude: formLock.longitude || 0,
      latitude: formLock.latitude || 0,
      };
      if (props.isBatch) {
         params["num"] = formLock.value.count;
      }
      let loading = $loading();
      addLock(params, param2)
   addLock(params)
         .then((res) => {
            let { code, data } = res;
            loading.close();
@@ -226,21 +255,21 @@
         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,
      lockName: formLock.lockName,
         // 目前固定
         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,
      lockType: formLock.lockType,
    lockName: formLock.lockName,
    lockAddress: formLock.lockAddress,
      screenFlag: formLock.screenFlag,
      screenBoxType: formLock.screenBoxType,
      screenBoxProduct: formLock.screenBoxProduct,
    stationName1: formLock.stationName1,
    stationName2: formLock.stationName2,
    stationName3: formLock.stationName3,
    stationName4: formLock.stationName4,
      longitude: formLock.longitude || 0,
      latitude: formLock.latitude || 0,
      };
      let loading = $loading();
      updateLock(params)
@@ -264,96 +293,223 @@
      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(() => {
onMounted(async() => {
      if (!props.isAdd) {
         console.log("info ", props.info, "=============");

         formLock.value = props.info;
    for(let key in props.info){
      formLock[key] = props.info[key];
      }
      getAreaTree();
    
    await getProviceList();
    stationName1.value = props.info.stationName1;
    await getCityList();
    stationName2.value = props.info.stationName2;
    await getCountryList();
    stationName3.value = props.info.stationName3;
    await getStationList();
    stationName4.value = props.info.stationName4;
   }
    getTypeList();
    getProdList();
   });
</script>

<template>
  <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 }">
          <span>{{ data.label }}</span>
          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
        </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>
    </el-form-item>
  <el-form
    ref="formRef"
    label-position="left"
    label-width="auto"
    :model="formLock"
    :rules="rules"
    style="max-width: 680px"
  >
    <el-row :gutter="layout.gutter">
      <el-col :span="24">
    <!-- 锁具名称 -->
    <el-form-item label="锁具名称" label-position="right" prop="lockName">
      <el-input v-model="formLock.lockName" />
    </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="layout.gutter">
      <el-col :span="layout.span">
        <!-- 省 -->
        <el-form-item label="省" label-position="right" prop="stationName1">
          <el-select
            v-model="formLock.stationName1"
            filterable
            allow-create
            placeholder="请选择"
            @change="(val) => stationNameChange(1, val)"
            style="width: 180px"
          >
            <el-option
              v-for="(item, idx) in stationList1"
              :key="'province_' + idx"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="layout.span">
        <!-- 市 -->
        <el-form-item label="市" label-position="right" prop="stationName2">
          <el-select
            v-model="formLock.stationName2"
            filterable
            allow-create
            placeholder="请选择"
            @change="(val) => stationNameChange(2, val)"
            style="width: 180px"
          >
            <el-option
              v-for="(item, idx) in stationList2"
              :key="'list2_' + idx"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="layout.gutter">
      <el-col :span="layout.span">
        <!-- 区县 -->
        <el-form-item label="区县" label-position="right" prop="stationName3">
          <el-select
            v-model="formLock.stationName3"
            filterable
            allow-create
            placeholder="请选择"
            @change="(val) => stationNameChange(3, val)"
            style="width: 180px"
          >
            <el-option
              v-for="(item, idx) in stationList3"
              :key="'list3_' + idx"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="layout.span">
        <!-- 机房 -->
        <el-form-item label="机房" label-position="right" prop="stationName4">
          <el-select
            v-model="formLock.stationName4"
            filterable
            allow-create
            placeholder="请选择"
            style="width: 180px"
          >
            <el-option
              v-for="(item, idx) in stationList4"
              :key="'list4_' + idx"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="layout.gutter">
      <el-col :span="24">
        <!-- 地址 -->
        <el-form-item label="地址" label-position="right" prop="lockAddress">
          <el-input v-model="formLock.lockAddress" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="layout.gutter">
      <el-col :span="24">
    <!-- 锁具安装位置 1屏柜 2 其他 -->
    <el-form-item label="锁具安装位置" label-position="right" prop="screenFlag">
      <el-select v-model="formLock.screenFlag" placeholder="请选择" style="width: 240px">
        <el-form-item
          label="锁具安装位置"
          label-position="right"
          prop="screenFlag"
        >
          <el-select
            v-model="formLock.screenFlag"
            placeholder="请选择"
            style="width: 100%"
          >
        <el-option label="屏柜" :value="1" />
        <el-option label="其他" :value="2" />
      </el-select>
    </el-form-item>
  
      </el-col>
    </el-row>
    <el-row :gutter="layout.gutter">
      <el-col :span="24">
    <!-- 锁具安装位置 类型 -->
    <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-form-item
          label="锁具安装位置类型"
          label-position="right"
          prop="screenBoxType"
        >
          <el-select
            v-model="formLock.screenBoxType"
            filterable
            allow-create
            placeholder="请选择或手动输入后选择"
            style="width: 100%"
          >
            <el-option
              v-for="(item, idx) in typeList"
              :key="'type_' + idx"
              :label="item"
              :value="item"
            />
      </el-select>
    </el-form-item>
  
      </el-col>
    </el-row>
    <el-row :gutter="layout.gutter">
      <el-col :span="24">
    <!-- 锁具安装位置 品牌 -->
    <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-form-item
          label="锁具安装位置品牌"
          label-position="right"
          prop="screenBoxProduct"
        >
          <el-select
            v-model="formLock.screenBoxProduct"
            filterable
            allow-create
            placeholder="请选择或手动输入后选择"
            style="width: 100%"
          >
            <el-option
              v-for="(item, idx) in productList"
              :key="'product_' + idx"
              :label="item"
              :value="item"
            />
      </el-select>
    </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="layout.gutter">
      <el-col :span="layout.span">
    <!-- 经度 -->
    <el-form-item label="经度" label-position="right" prop="longitude">
      <el-input v-model="formLock.longitude" />
    </el-form-item>
      </el-col>
      <el-col :span="layout.span">
    <!-- 纬度 -->
    <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-input v-model="formLock.count" />
    </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <div class="footer">
    <el-button size="small" @click="close">取消</el-button>
    <el-button type="primary" size="small" @click="ok">确定</el-button>
    <el-button  @click="close">取消</el-button>
    <el-button type="primary"  @click="ok">确定</el-button>
  </div>
</template>