4pc/src/view/organization-add.vue

<template>
  <!-- "ancestors": "",
  "contact": "",
  "orderNum": 0,
  "orgId": 0,
  "orgName": "",
  "parentId": 0,
  "password": "",
  "type": 0,
  "userName": "" -->
  <el-form label-width="100px" :model="data" :rules="rules" ref="baseFormRef">
    <el-form-item label="单位名称" prop="orgName" required>
      <el-input v-model.trim="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-select>
    </el-form-item>
    <el-form-item label="行政区划">
      <el-cascader style="width: 300px" v-model="selectedValue" :props="lazyProps" :placeholder="'请选择地区'" clearable
        @change="handleChange" lazy />
    </el-form-item>

    <el-form-item label="上级单位" prop="parentId">
      <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>
      </el-tree-select>
    </el-form-item>
    <el-form-item label="联系人" prop="contact" required>
      <el-input v-model.trim="data.contact" style="width: 300px" :maxlength="50" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="账号" prop="userName" required>
      <el-input v-model.trim="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.trim="data.password"
        :type="addPassFlag ? 'text' : 'password'" style="width: 300px" :maxlength="500"
        placeholder="请输入8-16位数字、字母大小写组合">
        <template #suffix>
          <span @click="addPassFlag = !addPassFlag" style="cursor: pointer">
            <el-icon v-if="addPassFlag">
              <View />
            </el-icon>
            <el-icon v-else>
              <Hide />
            </el-icon>
          </span>
        </template>
      </el-input>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
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 { globalPasswordRex } from "@/util/regex";
import { ref, reactive, unref, watch, onMounted } from "vue";
import { getProvinces, getCities, getAreas } from '@/request/organization';
import { View, Hide } from "@element-plus/icons-vue";
// import { user } from '@/store/user'
import { getOrgListFetchList } from "@/request";
import type { CascaderProps, CascaderOption } from 'element-plus'
const addPassFlag = ref(true); //图标显示标识
const selectedValue = ref([])

type 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" }],
  userName: [
    {
      required: true,
      pattern: /^1[3456789]\d{9}$/,
      message: "请输入正确手机号",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      pattern: globalPasswordRex,
      message: "请输入8-16位数字、字母大小写组合",
      trigger: "blur",
    },
    { required: true, min: 8, message: "密码太短！", trigger: "blur" },
  ],
});

const props = defineProps<{
  submit: (data: OrganizationType) => Promise<any>;
}>();
const data = ref<OrganizationType & {}>({
  ancestors: "",
  contact: "",
  orderNum: 0,
  orgId: 0,
  orgName: "",
  parentId: null,
  password: "",
  type: null,
  userName: "",
});

// const setParentId = () => {
//   if (user.value) {
//     const isSuper = user.value.roles.filter(item => item.roleKey === "super_admin").length > 0;
//     data.value.parentId = isSuper ? 0 : Number(data.value.parentId)
//   }
// }

onMounted(async () => {
  const data = await getOrgListFetchList();
  // console.log('allOrgs', data);
  allOrgs.value = data as any as SelectType[];
  debugger
});
watch(
  data,
  (newValue) => {
    data.value.userName = newValue.userName.replace(/[^0-9]/g, "");
  },
  {
    immediate: true,
    deep: true,
  }
);


// 动态加载配置
const lazyProps = ref<CascaderProps>({
  lazy: true,
  // 启用懒加载模式
  async lazyLoad(node, resolve) {
    // debugger
    const { level, value } = node; // level: 当前层级（0=省，1=市，2=区）
    console.log('node', node.data)
    const dataRes = await loadData(level, node.data);
    resolve(dataRes);  // 将子节点数据返回给组件
  },
  checkStrictly: true, // 允许选择任意一级（可选）
  label: 'name',    // 显示字段名
  value: 'id',      // 值字段名
  leaf: 'leaf',      // 标识是否为叶子节点（不可再展开）
});



const loadData = async (level, node) => {
  // 根据层级模拟数据
  console.log('level', level, node)

  switch (level) {
    case 0: // 加载省份
      const provinces = await getProvinces();
      const resP = Array.from(provinces as any as CascaderProps[]).map(p => {
        return p
      });
      return resP;
    case 1:
      let cities
      if (node.zx) {
        const areas = await getAreas(node.province, node.city);
        console.log('areas', areas)
        cities = Array.from(areas as any as CascaderOption[]).map(a => {
          a.leaf = true
          return a
        })
      } else {
        cities = await getCities(node.province);
        console.log('cities', node.province, cities);
      }

      return cities
    // break;
    case 2: // 加载区县
      const areas = await getAreas(node.province, node.city)
      console.log('areas', areas)
      return Array.from(areas as any as CascaderOption[]).map(a => {
        a.leaf = true
        return a
      })
    default:
      return [];
  }
};
// 处理选择事件
const handleChange = (value: string) => {
  console.log('选中的省市区编码:', value);
};

defineExpose<QuiskExpose>({
  async submit() {
    if (unref(baseFormRef)) {
      // setParentId();
      const res = await unref(baseFormRef)?.validate();
      if (res) {
        console.log("data", data.value);
        if (selectedValue.value.length > 0) {
          data.value.provinceId = selectedValue.value[0]
          data.value.cityId = selectedValue.value[1]
          data.value.areaId = selectedValue.value[2]
        }

        await props.submit(data.value as any as OrganizationType);
      }
    } else {
      throw "";
    }
  },
});
</script>