ShutongInterconnectedChemicalCloudPlatform/src/views/matrix/orgoruser/pickuser.vue

<!--
@ 作者: 秦东
@ 时间: 2023-07-07 09:12:32
@ 备注: 选择人员
-->
<script lang='ts' setup>
import { Search,ArrowRight  } from '@element-plus/icons-vue'	//搜索图标
import { ElDivider } from 'element-plus'
/**
 * 引入图片
 */

const spacer = h(ElDivider, { direction: 'vertical' })

const props = defineProps({
	orgBoxShow:{
		type:Boolean,
		default:false
	},
	tabledata:{
		type:Object,
		default(){
			return {}
		}
	},
	orglist:{
		type:Object,
		default(){
			return {}
		}
	},
	orgtree:{
		type:Object,
		default(){
			return {}
		}
	}
});
const emits = defineEmits(["update:orgBoxShow"]);	//父级元素
const dialogTitle = ref<string>()
const addOrgUserLoading = ref(false);
const searchKeywords = ref<string>()
const keywordsTitle = ref<string>()
/**
 * 弹窗显示控制
 */
const pickorg_is_Show = computed({
	get: () => props.orgBoxShow,
	set: (val) => {
		emits("update:orgBoxShow", val);
	},
});
/**
 * 关闭弹窗
 */
function closeBox(){
	// eslint-disable-next-line vue/no-mutating-props
	props.tabledata.isedit = false;
	// eslint-disable-next-line vue/no-mutating-props
	props.tabledata.namelist=["秦东","马飞"]
	emits("update:orgBoxShow", false);
}
/**
 * 监听数据
 */
watch(() => props.orgBoxShow,() => {
	if(props.orgBoxShow){
		// console.log("监听数据-----sd3------>",props.tabledata)
		switch(props.tabledata.types){
			case 2:
				dialogTitle.value = "选择行政组织"
				keywordsTitle.value = "请输入关键字"
				break;
			case 3:
				dialogTitle.value = "选择分部"
				keywordsTitle.value = "请输入关键字"
				break;
			default:
				dialogTitle.value = "选择成员"
				keywordsTitle.value = "请输入姓名或工号"
		}
		
	}
})
/**
 * 提交数据
 */
function submitPickOrgOrUser(){}
</script>
<template>
	<el-dialog
		v-model="pickorg_is_Show"
		width="600px"
		:title="dialogTitle"
		append-to-body
		draggable
		:before-close="closeBox"
    >
		<el-row class="biankuang_all">
			<el-col :span="12" class="col_body ">
				<div class="input_box">
					<el-input
						v-model="searchKeywords"
						:placeholder="keywordsTitle"
						:prefix-icon="Search"
						size="large"
						class="inputDeep"
					/>
				</div>
				<el-space :size="-2" :spacer="spacer" class="mianbaoxue">
					<el-text class="allSearch">所有</el-text>
					<el-text>恒信高科</el-text>
				</el-space>
				<ul class="select-box">
					<li  class="active">
						<div class="orgboxdiv">
							<div>
								<img src="@/assets/image/icon_file.png">恒信高科
							</div>
							<i>下级</i>
						</div>
					</li>
					<li  class="active ">
						<div class="userboxdiv">
							<svg-icon icon-class="select1" /><img src="@/assets/image/icon_people.png">秦东
						</div>
					</li>
					<li  class="active ">
						<div  class="userboxdiv">
							<svg-icon icon-class="select3" /><img src="@/assets/image/icon_people.png">秦东
						</div>
					</li>

				</ul>
			</el-col>
			<el-col :span="12" class="col_body biankuang_left">
				<div class="pick_head input_box">
					<span>已选择（1）</span>
					<span>清空</span>
				</div>
				<ul class="pick_select_box">
					<li>
						<div>
							<img src="@/assets/image/icon_people.png">秦东
						</div>
						<svg-icon icon-class="cc_k" class="right_5" />
					</li>
				</ul>
			</el-col>
		</el-row>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="addOrgUserLoading" @click="submitPickOrgOrUser" >确 定</el-button>
				<el-button @click="closeBox">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<style  lang='scss' scoped>
.biankuang_all{
	border: 1px solid rgb(220, 223, 230);
}
.biankuang_left{
	border-left: 1px solid rgb(220, 223, 230);
}
.col_body{
	height: 502px;
	padding:0 0px;
}
.input_box{
	border-bottom: 1px solid rgb(220, 223, 230);
}
.inputDeep {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    cursor: default;
    .el-input__inner {
      cursor: default !important;
    }
  }
}

.mianbaoxue{
	width: 100%;
	overflow-x: auto;
	white-space:nowrap;
	padding: 5px 5px;
}
.select-box {
    height: 430px;
    overflow-y: auto;
	border-top: 1px solid rgb(220, 223, 230);
	li{
		padding: 5px 0;
		.userboxdiv{
			padding: 0 5px;
			cursor: pointer;
		}
		.orgboxdiv{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
		}
		i{
			padding-left: 24px;
			padding-right: 10px;
			font-style: normal;
			font-size: 12px;
			cursor: pointer;
			background: url(@/assets/image/next_level.png) no-repeat 10px center;
			border-left: 1px solid rgb(238, 238, 238);
		}
		img {
			width: 14px;
			vertical-align: middle;
			margin-right: 5px;
			margin-left: 5px;
        }
	}
	li.active{
		color: #3195f8;
		i{
			background: url(@/assets/image/next_level_active.png) no-repeat 10px center;
		}
	}
}
.pick_head{
	width: 100%;
	height: 41px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 5px;
}
.pick_select_box{
	height: 460px;
    overflow-y: auto;
	li{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 0;
		img {
			width: 14px;
			vertical-align: middle;
			margin-right: 5px;
			margin-left: 5px;
        }
		.right_5{
			margin-right: 5px;
			cursor: pointer;
		}
	}
}
</style>