|
|
@@ -1,30 +1,51 @@
|
|
|
<template>
|
|
|
-
|
|
|
<el-form label-width="100px" :model="data" :rules="rules" ref="baseFormRef">
|
|
|
- <el-form-item label="单位名称" prop="orgId" required>
|
|
|
- <!-- <el-autocomplete style="width: 300px" v-model="data.orgName" :fetch-suggestions="querySearch" clearable
|
|
|
- class="inline-input w-50" placeholder="请输入" @select="handleSelect" /> -->
|
|
|
- <el-tree-select :check-strictly="true" :props="{
|
|
|
+ <!-- <el-form-item label="单位名称" prop="orgId" required>
|
|
|
+ <el-tree-select
|
|
|
+ :check-strictly="true"
|
|
|
+ :props="{
|
|
|
value: 'orgId',
|
|
|
label: (data: any) => data.orgName,
|
|
|
- }" style="width: 300px" v-model="data.orgId" :data="allOrgs" node-key="orgId" @node-click="handleNodeClick"
|
|
|
- clearable>
|
|
|
- <!-- <el-option :value="Number(id)" :label="value" v-for="{ value, id } in allOrgs" /> -->
|
|
|
+ }"
|
|
|
+ style="width: 300px"
|
|
|
+ v-model="data.orgId"
|
|
|
+ :data="allOrgs"
|
|
|
+ node-key="orgId"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
</el-tree-select>
|
|
|
- </el-form-item>
|
|
|
+ </el-form-item> -->
|
|
|
|
|
|
<el-form-item label="姓名" prop="nickName" required>
|
|
|
- <el-input v-model="data.nickName" style="width: 300px" :maxlength="15" placeholder="请输入" />
|
|
|
+ <el-input
|
|
|
+ v-model="data.nickName"
|
|
|
+ style="width: 300px"
|
|
|
+ :maxlength="15"
|
|
|
+ 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>
|
|
|
@@ -34,7 +55,6 @@
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-input>
|
|
|
-
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</template>
|
|
|
@@ -43,82 +63,86 @@
|
|
|
import { QuiskExpose } from "@/helper/mount";
|
|
|
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
|
|
|
// import { ElMessage } from "element-plus";
|
|
|
-import type { OrganizationType } from '@/request/organization'
|
|
|
-import {
|
|
|
- getOrgListFetchList,
|
|
|
- UserType
|
|
|
-} from "@/request";
|
|
|
+import type { OrganizationType } from "@/request/organization";
|
|
|
+import { getOrgListFetchList, UserType } from "@/request";
|
|
|
|
|
|
import { ref, reactive, unref, onMounted, watch } from "vue";
|
|
|
-import { View, Hide } from '@element-plus/icons-vue';
|
|
|
+import { View, Hide } from "@element-plus/icons-vue";
|
|
|
// import { user } from '@/store/user'
|
|
|
|
|
|
-const addPassFlag = ref(true) //图标显示标识
|
|
|
+const addPassFlag = ref(true); //图标显示标识
|
|
|
|
|
|
const baseFormRef = ref<FormInstance>();
|
|
|
|
|
|
type SelectType = {
|
|
|
- orgName: string,
|
|
|
- orgId: number
|
|
|
- children: SelectType[]
|
|
|
-}
|
|
|
+ orgName: string;
|
|
|
+ orgId: number;
|
|
|
+ children: SelectType[];
|
|
|
+};
|
|
|
|
|
|
const allOrgs = ref<SelectType[]>([]);
|
|
|
|
|
|
const rules = reactive<FormRules>({
|
|
|
- orgId: [
|
|
|
- { required: true, message: "请选择单位名称", trigger: "select" },
|
|
|
- ],
|
|
|
- nickName: [
|
|
|
- { required: true, message: "请输入姓名", trigger: "blur" },
|
|
|
-
|
|
|
- ],
|
|
|
+ orgId: [{ required: true, message: "请选择单位名称", trigger: "select" }],
|
|
|
+ nickName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
|
|
userName: [
|
|
|
{ required: true, message: "请输入账号", trigger: "blur" },
|
|
|
- { 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>;
|
|
|
}>();
|
|
|
const data = ref<Partial<OrganizationType> & Partial<UserType>>({
|
|
|
nickName: "",
|
|
|
- orgId: undefined,
|
|
|
+ // orgId: undefined,
|
|
|
password: "",
|
|
|
status: 0,
|
|
|
// userId: 0,
|
|
|
userName: "",
|
|
|
type: 0,
|
|
|
});
|
|
|
-watch(data, (newValue) => {
|
|
|
- // data.value.userName = newValue.userName.replace(/[^A-Za-z0-9]/g, '');
|
|
|
- data.value.userName = newValue.userName.replace(/[^0-9]/g, '');
|
|
|
-}, {
|
|
|
- immediate: true,
|
|
|
- deep: true
|
|
|
-});
|
|
|
+watch(
|
|
|
+ data,
|
|
|
+ (newValue) => {
|
|
|
+ // data.value.userName = newValue.userName.replace(/[^A-Za-z0-9]/g, '');
|
|
|
+ data.value.userName = newValue.userName.replace(/[^0-9]/g, "");
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ }
|
|
|
+);
|
|
|
onMounted(async () => {
|
|
|
- const data = await getOrgListFetchList()
|
|
|
+ const data = await getOrgListFetchList();
|
|
|
|
|
|
// console.log('allOrgs', data);
|
|
|
- allOrgs.value = data as any as SelectType[]
|
|
|
+ allOrgs.value = data as any as SelectType[];
|
|
|
// allOrgs.value = Array.from(data.records).map((item: OrganizationType) => {
|
|
|
// const i: SelectType = { value: item['orgName'], id: item['orgId'] }
|
|
|
// return i
|
|
|
// });
|
|
|
-
|
|
|
-})
|
|
|
+});
|
|
|
|
|
|
const handleNodeClick = (node: SelectType) => {
|
|
|
- data.value.orgId = node.orgId
|
|
|
- console.log('handleNodeClick', node.orgId, data.value)
|
|
|
-}
|
|
|
-
|
|
|
+ data.value.orgId = node.orgId;
|
|
|
+ console.log("handleNodeClick", node.orgId, data.value);
|
|
|
+};
|
|
|
|
|
|
defineExpose<QuiskExpose>({
|
|
|
async submit() {
|
|
|
@@ -126,11 +150,11 @@ defineExpose<QuiskExpose>({
|
|
|
const res = await unref(baseFormRef)?.validate();
|
|
|
if (res) {
|
|
|
await props.submit(data.value as any as OrganizationType);
|
|
|
- ElMessage.success('新增成功！');
|
|
|
+ ElMessage.success("新增成功！");
|
|
|
}
|
|
|
} else {
|
|
|
throw "";
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
-</script>
|
|
|
+</script>
|
gemercheung