自定义表单

src/api/hr/org/index.ts

@@ -1,6 +1,6 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
-import { searchFormTitle,orgClassListCont,addOrgTypesCont,orgClassCont,editOrgTypeEditOrDel,searchOrgCont,orgInfo,addOrgInfo,editOrgDel,searchTeamList,orgTeamListCont,orgFormTree } from './type';
+import { searchFormTitle,orgClassListCont,addOrgTypesCont,orgClassCont,editOrgTypeEditOrDel,searchOrgCont,orgInfo,addOrgInfo,editOrgDel,searchTeamList,orgTeamListCont,orgFormTree,archivesList } from './type';
 /**
  * 获取组织类别
  */
@@ -112,3 +112,13 @@ export function getTeamListCont(data: searchTeamList): AxiosPromise<orgTeamListC
 		data: data
 	});
 }
+/**
+ * 获取人员列表
+ */
+ export function getOrgFormUserList(data:any): AxiosPromise<archivesList>{
+	return request({
+		url: '/hrapi/org/search_user_list',
+		method: 'post',
+		data: data
+	});
+}

src/api/hr/org/type.ts

@@ -159,3 +159,18 @@ export interface searchCriteriaForPeople extends PageQuery{
 	orgid?:number;
 	usercont?:string;
 }
+
+export interface criteriaForPeopleList{
+	id: number
+	userkey: string
+	number: string
+	name: string
+	icon: string
+	company: number
+	companyname: string
+	maindeparment: number
+	maindeparmentname: string
+	adminorg: number
+	adminorgname: string
+}
+export type archivesList = PageResult<criteriaForPeopleList[]>

src/components/DesignForm/public/expand/user.vue

@@ -5,6 +5,7 @@
 -->
 <script lang='ts' setup>
 import { computed, onMounted, nextTick } from 'vue'
+import { criteriaForPeopleList } from '@/api/hr/org/type'
 const props = withDefaults(
     defineProps<{
 		modelValue?: string
@@ -24,10 +25,22 @@ const userDialogEl = ref()
 //       	emits('update:modelValue', newVal)
 //     }
 // })
+const userlist = ref("")
 const value = computed({
 	get: () => props.modelValue,
 	set: (newVal: any) => {
+		// console.log("value-set",newVal)
 		emits('update:modelValue', newVal)
+		let newValJson:criteriaForPeopleList[] = JSON.parse(newVal)
+		// console.log("value-newValJson",newValJson)
+		if(newValJson.length > 0){
+			let userAry = new Array
+			newValJson.forEach(item =>{
+				userAry.push(item.name+"("+item.number+")")
+			})
+			userlist.value = userAry.join(',')
+		}
+		
 	},
 });
 
@@ -37,12 +50,13 @@ const openDialog = () => {
 onMounted(() => {
     nextTick(() => {})
 })
+
 </script>
 <template>
 	<el-input
 		placeholder="请选择用户或输入用户名称"
 		v-bind="$props"
-		v-model="value"
+		v-model="userlist"
 		@click="openDialog"
 	>
 		<template #append>

src/components/DesignForm/public/expand/userDialog.vue

@@ -7,8 +7,9 @@
 import { ref, onMounted, reactive, nextTick } from 'vue'
 import { getRequest } from '@/api/DesignForm'
 import formatResult from '@/utils/DesignForm/formatResult'
-import { getOrgFormTree } from '@/api/hr/org/index'
-import { orgform } from '@/api/hr/org/type'
+import { getOrgFormTree,getOrgFormUserList } from '@/api/hr/org/index'
+import { orgform,criteriaForPeopleList } from '@/api/hr/org/type'
+import UserRole from '@/assets/icons/user.svg'
 
 const props = withDefaults(
     defineProps<{
@@ -26,6 +27,7 @@ const treeData = ref<orgform[]>([])
 const department = ref()
 const handleNodeClick = (data: any) => {
     department.value = data.id
+	getUserList()
 }
 const getTreeData = () => {
     // getRequest('deptList', {}).then((res: any) => {
@@ -39,11 +41,11 @@ const getTreeData = () => {
 }
 // 侧栏处理结束
 const userName = ref()
-const tableData = ref([])
+const tableData = ref<criteriaForPeopleList[]>();
 const page = reactive({
     total: 0,
     current: 1,
-    pageSize: 20
+    pageSize: 10
 })
 const searchClick = () => {
     getUserList()
@@ -63,44 +65,85 @@ const getUserList = () => {
 		name: userName.value,
 		department: department.value
     }
-    getRequest('userList', params).then((res: any) => {
-      	tableData.value = res.data.list
-    })
+    // getRequest('userList', params).then((res: any) => {
+    //   	tableData.value = res.data.list
+    // })
+	// getOrgFormUserList
+	getOrgFormUserList(params)
+		.then(({ data })=>{
+			tableData.value = data.list
+			page.total = data.total
+		})
+		.finally(()=>{})
 }
 const currentChange = (current: number) => {
     page.current = current
     getUserList()
 }
 //　已选
-const checkData = ref<any>([])
+// const checkData = ref<any>([]);
+
+const checkDataList = reactive<criteriaForPeopleList[]>([]);
 
 const tableRowClick = (row: any) => {
-    if (!checkData.value.includes(row.userName)) {
-      	checkData.value.push(row.userName)
-    }
-}
-const delRowClick = (row: any) => {
-    checkData.value.forEach((item: any, index: number) => {
-		if (item === row) {
-			checkData.value.splice(index, 1)
+   
+	if(checkDataList.length > 0){
+		let isIn = true
+		checkDataList.forEach(item =>{
+			if(item.id == row.id){
+				isIn = false
+			}
+		})
+		if(isIn){
+			checkDataList.push(row)
 		}
-    })
+	}else{
+		checkDataList.push(row)
+	}
+	console.log("checkDataList",checkDataList,row)
+}
+const delRowClick = (row: criteriaForPeopleList) => {
+    // checkData.value.forEach((item: any, index: number) => {
+	// 	if (item === row) {
+	// 		checkData.value.splice(index, 1)
+	// 	}
+    // })
+	let checkDataAry = checkDataList
+	if(checkDataAry.length > 0) {
+		checkDataList.splice(0,checkDataList.length)
+		checkDataAry.forEach(item => {
+			if(item.id != row.id){
+				checkDataList.push(item)
+			}
+		})
+	}
 }
 const delAllClick = () => {
-    checkData.value = []
+    // checkData.value = []
+	checkDataList.splice(0,checkDataList.length)
 }
 // 弹窗处理
 const open = () => {
     visible.value = true
+	// console.log("open--->",props.modelValue)
     if (props.modelValue) {
-      	checkData.value = props.modelValue.split(',')
+      	// checkData.value = props.modelValue.split(',')
+		let jsonCont:criteriaForPeopleList[]  = JSON.parse(props.modelValue)
+		if(jsonCont.length > 0) {
+			checkDataList.splice(0,checkDataList.length)
+			jsonCont.forEach(item=>{
+				checkDataList.push(item)
+			})
+		}
     } else {
-      	checkData.value = []
+		checkDataList.splice(0,checkDataList.length)
     }
 }
 // 关闭弹窗
 const confirmClick = () => {
-    emits('update:modelValue', checkData.value.join(','))
+    // emits('update:modelValue', checkData.value.join(','))
+	let jsonStr = JSON.stringify(checkDataList)
+	emits('update:modelValue', jsonStr)
     visible.value = false
 }
 defineExpose({ open })
@@ -145,10 +188,23 @@ const defaultProps ={
 				</div>
 				<div class="list">
 					<el-table :data="tableData" style="width: 100%">
-						<el-table-column prop="userName" label="照片" width="100px" align="center" />
-						<el-table-column prop="nickName" label="姓名"  width="120px"  align="left" />
-						<el-table-column prop="nickName" label="联系方式"  width="100px"  align="left" />
-						<el-table-column prop="nickName" label="归属行政组织"  align="left" />
+						<el-table-column prop="userName" label="照片" width="100px" align="center">
+							<template #default="scope">
+								<el-avatar v-if="scope.row.icon != ''" shape="square" :size="30" :src="scope.row.icon" />
+								<el-avatar v-else shape="square" :size="30" :src="UserRole" />
+							</template>
+						</el-table-column>
+						<el-table-column prop="name" label="姓名"  width="120px"  align="left">
+							<template #default="scope">
+								{{ scope.row.name }}({{ scope.row.number }})
+							</template>
+						</el-table-column>
+						<el-table-column prop="tel" label="联系方式"  width="120px"  align="left" />
+						<el-table-column prop="nickName" label="归属行政组织"  align="left">
+							<template #default="{ row }">
+								{{ row.companyname }}<span v-if="row.maindeparmentname!=''"> / {{ row.maindeparmentname }}</span>
+							</template>
+						</el-table-column>
 						<el-table-column label="操作" width="60px">
 							<template #default="{ row }">
 								<el-button circle size="small" @click="tableRowClick(row)"><el-icon><ArrowRight /></el-icon></el-button>
@@ -158,7 +214,7 @@ const defaultProps ={
 					<div class="page">
 						<el-pagination
 							background
-							layout="prev, pager, next"
+							layout="prev, pager, next, jumper"
 							small
 							hide-on-single-page
 							:current-page="page.current"
@@ -172,71 +228,20 @@ const defaultProps ={
 			<el-col :span="6">
 				<div class="has_select">
 					<div class="total">
-						<div>已选择：{{ checkData.length }}</div>
+						<div>已选择：{{ checkDataList.length }}</div>
 						<el-button type="danger" @click="delAllClick" size="small">全部移除</el-button>
 					</div>
-					<el-table :data="checkData">
-						<el-table-column label="用户名">
-							<template #default="{ row }">{{ row }}</template>
-						</el-table-column>
-						<el-table-column label="操作" width="60px">
-							<template #default="{ row }">
-								<el-button size="small" type="danger" @click="delRowClick(row)">移除</el-button>
+					<el-table :data="checkDataList">
+						<el-table-column prop="userName" label="照片" width="60px" align="center">
+							<template #default="scope">
+								<el-avatar v-if="scope.row.icon != ''" shape="square" :size="30" :src="scope.row.icon" />
+								<el-avatar v-else shape="square" :size="30" :src="UserRole" />
 							</template>
 						</el-table-column>
-					</el-table>
-				</div>
-			</el-col>
-		</el-row>
-
-		<div class="expand-user-dialog" style="display: none;">
-			<div class="sidebar-tree">
-				<el-tree
-					ref="treeEl"
-					:data="treeData"
-					node-key="id"
-					@node-click="handleNodeClick"
-					:props="defaultProps "
-					highlight-current
-				/>
-				<div class="table-list">
-					<div class="search">
-						<el-input placeholder="请输入用户名" v-model="userName" />
-						<el-button type="primary" @click="searchClick">查询</el-button>
-						<el-button @click="resetClick">重置</el-button>
-					</div>
-					<div class="list">
-						<el-table :data="tableData" style="width: 100%">
-							<el-table-column prop="userName" label="用户名" />
-							<el-table-column prop="nickName" label="昵称" />
-							<el-table-column label="操作" width="60px">
-								<template #default="{ row }">
-									<el-button circle size="small" @click="tableRowClick(row)"><el-icon><ArrowRight /></el-icon></el-button>
-								</template>
-							</el-table-column>
-						</el-table>
-						<div class="page">
-							<el-pagination
-								background
-								layout="prev, pager, next"
-								small
-								hide-on-single-page
-								:current-page="page.current"
-								:total="page.total"
-								:page-size="page.pageSize"
-								@current-change="currentChange"
-							/>
-						</div>
-					</div>
-				</div>
-				<div class="has-select">
-					<div class="total">
-						<div>已选择：{{ checkData.length }}</div>
-						<el-button type="danger" @click="delAllClick" size="small">全部移除</el-button>
-					</div>
-					<el-table :data="checkData">
-						<el-table-column label="用户名">
-							<template #default="{ row }">{{ row }}</template>
+						<el-table-column prop="name" label="姓名"  align="left">
+							<template #default="scope">
+								{{ scope.row.name }}({{ scope.row.number }})
+							</template>
 						</el-table-column>
 						<el-table-column label="操作" width="60px">
 							<template #default="{ row }">
@@ -245,8 +250,9 @@ const defaultProps ={
 						</el-table-column>
 					</el-table>
 				</div>
-			</div>
-		</div>
+			</el-col>
+		</el-row>
+		
 		<template #footer>
 			<div>
 				<el-button @click="visible = false">取消</el-button>
@@ -262,7 +268,7 @@ const defaultProps ={
 	border-radius: 3px;
 	padding: 10px 0;
 	margin-right: 10px;
-	max-height: 500px;
+	height: 750px;
 	overflow-y: auto;
 }
 .has_select {
@@ -283,6 +289,11 @@ const defaultProps ={
 		margin-right: 10px;
 	}
 }
+.page {
+	padding-top: 20px;
+	display: flex;
+	justify-content:space-between;
+}
 .expand-user-dialog {
     display: flex;
     align-items: flex-start;