|
|
@@ -0,0 +1,144 @@
|
|
|
+<template>
|
|
|
+ <!--
|
|
|
+ "nickName": "",
|
|
|
+ "orgId": 0,
|
|
|
+ "password": "",
|
|
|
+ "status": 0,
|
|
|
+ "userId": "",
|
|
|
+ "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="500" placeholder="请输入" /> -->
|
|
|
+ <el-autocomplete style="width: 300px" v-model="data.orgName" :fetch-suggestions="querySearch" clearable
|
|
|
+ class="inline-input w-50" placeholder="请输入" @select="handleSelect" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="姓名" prop="nickName" required>
|
|
|
+ <el-input v-model="data.nickName" style="width: 300px" :maxlength="500" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="账号" prop="userName" required>
|
|
|
+ <el-input v-model="data.userName" style="width: 300px" :maxlength="500" 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位数字、字母大小写组合">
|
|
|
+ <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 {
|
|
|
+ getOrgListFetch,
|
|
|
+
|
|
|
+ UserType
|
|
|
+} from "@/request";
|
|
|
+
|
|
|
+import { ref, reactive, unref, onMounted } from "vue";
|
|
|
+import { View, Hide } from '@element-plus/icons-vue';
|
|
|
+import { user } from '@/store/user'
|
|
|
+
|
|
|
+const addPassFlag = ref(false)//图标显示标识
|
|
|
+
|
|
|
+const baseFormRef = ref<FormInstance>();
|
|
|
+
|
|
|
+type SelectType = {
|
|
|
+ value: string, id: number
|
|
|
+}
|
|
|
+
|
|
|
+const allOrgs = ref<SelectType[]>([]);
|
|
|
+
|
|
|
+const rules = reactive<FormRules>({
|
|
|
+
|
|
|
+ orgName: [
|
|
|
+ { required: true, message: "请输入单位名称", trigger: "select" },
|
|
|
+ ],
|
|
|
+ nickName: [
|
|
|
+ { required: true, message: "请输入姓名", trigger: "blur" },
|
|
|
+ // { required: true, pattern: /^1[3456789]\d{9}$/, message: "请输入正确手机号", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ userName: [
|
|
|
+ { required: true, 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" },
|
|
|
+ ],
|
|
|
+},)
|
|
|
+
|
|
|
+const props = defineProps<{
|
|
|
+ submit: (data: OrganizationType) => Promise<any>;
|
|
|
+}>();
|
|
|
+const data = ref<Partial<OrganizationType> & Partial<UserType>>({
|
|
|
+ nickName: "",
|
|
|
+ orgId: 0,
|
|
|
+ password: "",
|
|
|
+ status: 0,
|
|
|
+ userId: 0,
|
|
|
+ userName: ""
|
|
|
+});
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ const data = await getOrgListFetch({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10000,
|
|
|
+ })
|
|
|
+ console.log('allOrgs', data.records);
|
|
|
+ allOrgs.value = Array.from(data.records).map((item: OrganizationType) => {
|
|
|
+ const i: SelectType = { value: item['orgName'], id: item['orgId'] }
|
|
|
+ return i
|
|
|
+ });
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+// const setParentId = () => {
|
|
|
+// if (user.value) {
|
|
|
+// const isSuper = user.value.roles.filter(item => item.roleKey === "super_admin").length > 0;
|
|
|
+// data.value.parentId = isSuper ? 0 : Number(user.value.orgId)
|
|
|
+// }
|
|
|
+// }
|
|
|
+const handleSelect = (item: SelectType) => {
|
|
|
+ data.value.orgId = item.id
|
|
|
+ console.log('handleSelect-id', item.id)
|
|
|
+}
|
|
|
+const querySearch = (queryString: string, cb: any) => {
|
|
|
+ const results = queryString
|
|
|
+ ? allOrgs.value.filter(i => i.value.toLowerCase().includes(queryString.toLowerCase()))
|
|
|
+ : allOrgs.value
|
|
|
+ console.log('queryString', queryString)
|
|
|
+ console.log('results', results)
|
|
|
+ cb(results)
|
|
|
+}
|
|
|
+defineExpose<QuiskExpose>({
|
|
|
+ async submit() {
|
|
|
+
|
|
|
+ if (unref(baseFormRef)) {
|
|
|
+
|
|
|
+ const res = await unref(baseFormRef)?.validate();
|
|
|
+ if (res) {
|
|
|
+ await props.submit(data.value as any as OrganizationType);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ throw "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
gemercheung