feat(map): tree可选parent

src/view/organization-add.vue

@@ -10,34 +10,68 @@
   "userName": "" -->
   <el-form label-width="100px" :model="data" :rules="rules" ref="baseFormRef">
     <el-form-item label="单位名称" prop="orgName" required>
-      <el-input v-model="data.orgName" style="width: 300px" :maxlength="50" placeholder="请输入" />
+      <el-input
+        v-model="data.orgName"
+        style="width: 300px"
+        :maxlength="50"
+        placeholder="请输入"
+      />
     </el-form-item>
     <el-form-item label="类型" prop="type" required>
       <!-- <el-input v-model="data.type" style="width: 300px" :maxlength="500" placeholder="请输入" /> -->
       <el-select style="width: 300px" v-model="data.type">
-        <el-option :value="Number(key)" :label="type" v-for="(type, key) in OrganizationTypeDesc" />
+        <el-option
+          :value="Number(key)"
+          :label="type"
+          v-for="(type, key) in OrganizationTypeDesc"
+        />
       </el-select>
     </el-form-item>
 
     <el-form-item label="上级单位" prop="parentId">
-      <el-tree-select :props="{
+      <el-tree-select
+        :check-strictly="true"
+        :props="{
         value: 'orgId',
         label: (data: any) => data.orgName,
-      }" style="width: 300px" v-model="data.parentId" :data="allOrgs" node-key="orgId" clearable>
+      }"
+        style="width: 300px"
+        v-model="data.parentId"
+        :data="allOrgs"
+        node-key="orgId"
+        clearable
+      >
       </el-tree-select>
     </el-form-item>
     <el-form-item label="联系人" prop="contact" required>
-      <el-input v-model="data.contact" style="width: 300px" :maxlength="50" placeholder="请输入" />
+      <el-input
+        v-model="data.contact"
+        style="width: 300px"
+        :maxlength="50"
+        placeholder="请输入"
+      />
     </el-form-item>
     <el-form-item label="账号" prop="userName" required>
-      <el-input v-model="data.userName" style="width: 300px" :maxlength="11" placeholder="请输入手机号" />
+      <el-input
+        v-model="data.userName"
+        style="width: 300px"
+        :maxlength="11"
+        placeholder="请输入手机号"
+      />
     </el-form-item>
     <el-form-item label="密码" prop="password" required>
-      <el-input autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" v-model="data.password"
-        :type="addPassFlag ? 'text' : 'password'" style="width: 300px" :maxlength="500"
-        placeholder="请输入8-16位数字、字母大小写组合">
+      <el-input
+        autocomplete="off"
+        readonly
+        onfocus="this.removeAttribute('readonly');"
+        v-model="data.password"
+        :type="addPassFlag ? 'text' : 'password'"
+        style="width: 300px"
+        :maxlength="500"
+        placeholder="请输入8-16位数字、字母大小写组合"
+      >
         <template #suffix>
-          <span @click="addPassFlag = !addPassFlag" style="cursor: pointer;">
+          <span @click="addPassFlag = !addPassFlag" style="cursor: pointer">
             <el-icon v-if="addPassFlag">
               <View />
             </el-icon>
@@ -47,7 +81,6 @@
           </span>
         </template>
       </el-input>
-
     </el-form-item>
   </el-form>
 </template>
@@ -56,46 +89,47 @@
 import { QuiskExpose } from "@/helper/mount";
 import type { FormInstance, FormRules } from "element-plus";
 // import { ElMessage } from "element-plus";
-import type { OrganizationType } from '@/request/organization'
-import { OrganizationTypeDesc } from '@/store/organization'
+import type { OrganizationType } from "@/request/organization";
+import { OrganizationTypeDesc } from "@/store/organization";
 
 import { ref, reactive, unref, watch, onMounted } from "vue";
-import { View, Hide } from '@element-plus/icons-vue';
+import { View, Hide } from "@element-plus/icons-vue";
 // import { user } from '@/store/user'
-import {
-  getOrgListFetchList,
-
-} from "@/request";
+import { getOrgListFetchList } from "@/request";
 
-const addPassFlag = ref(true)//图标显示标识
+const addPassFlag = ref(true); //图标显示标识
 
 type SelectType = {
-  orgName: string,
-  orgId: number
-  children: SelectType[]
-}
+  orgName: string;
+  orgId: number;
+  children: SelectType[];
+};
 
 const baseFormRef = ref<FormInstance>();
 const allOrgs = ref<SelectType[]>([]);
 
 const rules = reactive<FormRules>({
-  orgName: [
-    { required: true, message: "请输入单位名称", trigger: "blur" },
-  ],
-  type: [
-    { required: true, message: "请选择类型", trigger: "change" },
-  ],
-  contact: [
-    { required: true, message: "请输入联系人", trigger: "blur" },
-  ],
+  orgName: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
+  type: [{ required: true, message: "请选择类型", trigger: "change" }],
+  contact: [{ required: true, message: "请输入联系人", trigger: "blur" }],
   userName: [
-    { required: true, pattern: /^1[3456789]\d{9}$/, message: "请输入正确手机号", trigger: "blur" },
+    {
+      required: true,
+      pattern: /^1[3456789]\d{9}$/,
+      message: "请输入正确手机号",
+      trigger: "blur",
+    },
   ],
   password: [
-    { required: true, pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/, message: "请输入8-16位数字、字母大小写组合", trigger: "blur" },
-    { required: true, min: 8, message: '密码太短！', trigger: "blur" },
+    {
+      required: true,
+      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/,
+      message: "请输入8-16位数字、字母大小写组合",
+      trigger: "blur",
+    },
+    { required: true, min: 8, message: "密码太短！", trigger: "blur" },
   ],
-},)
+});
 
 const props = defineProps<{
   submit: (data: OrganizationType) => Promise<any>;
@@ -109,7 +143,7 @@ const data = ref<OrganizationType & {}>({
   parentId: null,
   password: "",
   type: null,
-  userName: ""
+  userName: "",
 });
 
 // const setParentId = () => {
@@ -120,25 +154,28 @@ const data = ref<OrganizationType & {}>({
 // }
 
 onMounted(async () => {
-  const data = await getOrgListFetchList()
+  const data = await getOrgListFetchList();
   // console.log('allOrgs', data);
-  allOrgs.value = data as any as SelectType[]
-})
-watch(data, (newValue) => {
-  data.value.userName = newValue.userName.replace(/[^0-9]/g, '');
-}, {
-  immediate: true,
-  deep: true
+  allOrgs.value = data as any as SelectType[];
 });
+watch(
+  data,
+  (newValue) => {
+    data.value.userName = newValue.userName.replace(/[^0-9]/g, "");
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
 
 defineExpose<QuiskExpose>({
   async submit() {
-
     if (unref(baseFormRef)) {
       // setParentId();
       const res = await unref(baseFormRef)?.validate();
       if (res) {
-        console.log('data', data.value)
+        console.log("data", data.value);
         await props.submit(data.value as any as OrganizationType);
       }
     } else {
@@ -146,4 +183,4 @@ defineExpose<QuiskExpose>({
     }
   },
 });
-</script>
+</script>