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="上级单位" 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 { View, Hide } from "@element-plus/icons-vue";
// import { user } from '@/store/user'
import { getOrgListFetchList } from "@/request";

const addPassFlag = ref(true); //图标显示标识

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[];
});
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);
        await props.submit(data.value as any as OrganizationType);
      }
    } else {
      throw "";
    }
  },
});
</script>