<template>
|
<el-drawer v-model="drawerVisible" :destroy-on-close="true" size="450px" :title="drawerProps.title">
|
<el-collapse v-model="activeNames" class="selected-persons-collapse" :class="{ 'has-selection': selectedCount > 0 }">
|
<el-collapse-item name="1">
|
<template #title>
|
<div class="custom-collapse-title">
|
<span>已选择人员</span>
|
<el-badge :value="selectedCount" :max="99" :hidden="selectedCount === 0" class="badge" />
|
</div>
|
</template>
|
|
<div class="person-tags-container" v-if="selectedCount > 0">
|
<el-tag
|
v-for="(person, index) in selectedPersons"
|
:key="person.ptagid"
|
closable
|
@close="removePerson(index)"
|
class="compact-tag"
|
>
|
<el-avatar :size="20" :src="person.baoliu38" class="person-avatar" v-if="person.baoliu38" />
|
<span class="person-name">{{ person.pname }}</span>
|
<span class="person-id">({{ person.ptagid }})</span>
|
</el-tag>
|
</div>
|
|
<div class="selection-actions" v-if="selectedCount > 0">
|
<el-button size="mini" type="text" @click="clearAllSelection" class="clear-btn"> 清空选择 </el-button>
|
<span class="summary-info">共 {{ selectedCount }} 人</span>
|
</div>
|
|
<div class="empty-placeholder" v-else>
|
<el-empty description="暂无选择人员" :image-size="60" />
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
|
<el-form
|
ref="ruleFormRef"
|
label-width="100px"
|
label-suffix=" :"
|
:rules="rules"
|
:disabled="drawerProps.isView"
|
:model="drawerProps.row"
|
:hide-required-asterisk="drawerProps.isView"
|
>
|
<el-form-item label="编号" prop="ptagid" style="display: none">
|
<el-input v-model="drawerProps.row!.ptagid" readonly clearable></el-input>
|
</el-form-item>
|
<el-form-item label="部门" prop="pdepartment">
|
<el-select v-model="drawerProps.row!.pdepartment" placeholder="请选择部门">
|
<el-option v-for="item in departments" :key="item.label" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="性别" prop="psex">
|
<el-select v-model="drawerProps.row!.psex" placeholder="请选择性别">
|
<el-option v-for="item in genderType" :key="item.label" :label="item.label" :value="item.label" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="岗位" prop="pzu">
|
<el-input v-model="drawerProps.row!.pzu" placeholder="请填写岗位" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="公司" prop="company">
|
<el-select v-model="drawerProps.row!.company" placeholder="请选择公司" @change="handleCompanyChange">
|
<el-option v-for="item in companys" :key="item.label" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="drawerVisible = false">取消</el-button>
|
<el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
|
</template>
|
</el-drawer>
|
</template>
|
|
<script setup lang="ts" name="UserDrawer">
|
import { ref, reactive, onMounted, computed } from "vue";
|
import { ElMessage, FormInstance } from "element-plus";
|
import { User } from "@/api/interface";
|
import { TagidAutocomplete } from "@/api/modules/hxzk/device/tag";
|
import { CompanyAutocomplete } from "@/api/modules/hxzk/user/company";
|
import { DepartmentAutocomplete } from "@/api/modules/hxzk/department/department";
|
|
import { useDict } from "@/utils/dict";
|
const { genderType } = useDict();
|
const rules = reactive({
|
baoliu38: [{ required: true, message: "请上传照片" }],
|
ptagid: [{ required: true, message: "请填写编号" }],
|
pname: [{ required: true, message: "请填写名称" }]
|
});
|
|
interface DrawerProps {
|
title: string;
|
isView: boolean;
|
initParam: Partial<User.ResUserList>;
|
row: Partial<User.ResUserList>;
|
api?: (params: any) => Promise<any>;
|
getTableList?: () => void;
|
}
|
|
const drawerVisible = ref(false);
|
const drawerProps = ref<DrawerProps>({
|
isView: false,
|
initParam: {},
|
title: "",
|
row: {}
|
});
|
const activeNames = ref(["1"]); // 默认展开
|
const clearAllSelection = () => {
|
selectedPersons.value = [];
|
drawerProps.value.row.ptagid = "";
|
};
|
const selectedPersons = ref([]);
|
const selectedCount = computed(() => selectedPersons.value.length);
|
// 接收父组件传过来的参数
|
const acceptParams = (params: DrawerProps) => {
|
drawerProps.value = params;
|
drawerVisible.value = true;
|
|
// 存储已选择人员
|
selectedPersons.value = Object.values(params.row);
|
|
// 拼接tagid（如果需要）
|
drawerProps.value.row.ptagid = selectedPersons.value.map(p => p.ptagid).join(",");
|
|
const paramCompany = { id: params.initParam.departmentId };
|
const param = { companyid: params.initParam.departmentId };
|
|
CompanyAutocomplete(paramCompany).then(data => {
|
companys.value = data;
|
});
|
|
DepartmentAutocomplete(param).then(data => {
|
departments.value = data;
|
});
|
};
|
// 添加移除人员方法
|
const removePerson = index => {
|
selectedPersons.value.splice(index, 1);
|
drawerProps.value.row.ptagid = selectedPersons.value.map(p => p.ptagid).join(",");
|
};
|
// 提交数据（新增/编辑）
|
const ruleFormRef = ref<FormInstance>();
|
const handleSubmit = () => {
|
ruleFormRef.value!.validate(async valid => {
|
if (!valid) return;
|
try {
|
const res = await drawerProps.value.api!(drawerProps.value.row);
|
ElMessage.success({ message: `${res.msg}` });
|
drawerProps.value.getTableList!();
|
drawerVisible.value = false;
|
//发卡机更新人脸
|
// const params = {
|
// pname: drawerProps.value.row.pname,
|
// ptagid: drawerProps.value.row.ptagid,
|
// baoliu38: drawerProps.value.row.baoliu38
|
// };
|
// const FaKaJiFace = await FaKaJiImg(params);
|
} catch (error) {
|
console.log(error);
|
}
|
});
|
};
|
|
const handleCompanyChange = value => {
|
for (let i = 0; i < companys.value.length; i++) {
|
if (value == companys.value[i].value) {
|
drawerProps.value.row.companyid = companys.value[i].link;
|
}
|
}
|
};
|
|
//公司下拉列表
|
const companys = ref();
|
// 部门下拉列表
|
const departments = ref();
|
|
// 设备编号自动补全
|
interface LinkItem {
|
value: string | number;
|
}
|
const links = ref<LinkItem[]>([]);
|
|
onMounted(() => {
|
// 编号自动补全
|
TagidAutocomplete().then(result => {
|
links.value = result;
|
});
|
});
|
|
defineExpose({
|
acceptParams
|
});
|
</script>
|
<style scoped>
|
.selected-persons-collapse {
|
margin-bottom: 20px;
|
background-color: transparent;
|
border: none;
|
&:deep(.el-collapse-item__header) {
|
height: 40px;
|
padding: 0 15px;
|
font-weight: 500;
|
line-height: 40px;
|
color: #606266;
|
background-color: #f5f7fa;
|
border: none;
|
border-radius: 4px;
|
.el-collapse-item__arrow {
|
margin-right: 8px;
|
}
|
}
|
&:deep(.el-collapse-item__wrap) {
|
background-color: transparent;
|
border: none;
|
}
|
&:deep(.el-collapse-item__content) {
|
padding: 12px 0;
|
}
|
&.has-selection:deep(.el-collapse-item__header) {
|
color: #409eff;
|
background-color: #ecf5ff;
|
}
|
}
|
.custom-collapse-title {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: 100%;
|
.badge {
|
margin-left: 8px;
|
:deep(.el-badge__content) {
|
background-color: #409eff;
|
}
|
}
|
}
|
.person-tags-container {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px;
|
max-height: 280px;
|
padding: 0 12px;
|
margin-bottom: 12px;
|
overflow-y: auto;
|
&::-webkit-scrollbar {
|
width: 6px;
|
height: 6px;
|
}
|
&::-webkit-scrollbar-thumb {
|
background-color: #c1c1c1;
|
border-radius: 3px;
|
}
|
}
|
.compact-tag {
|
display: inline-flex;
|
align-items: center;
|
height: 30px;
|
padding: 25px;
|
line-height: 30px;
|
transition: all 0.2s;
|
&:hover {
|
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
|
transform: translateY(-2px);
|
}
|
.person-avatar {
|
margin-right: 6px;
|
}
|
.person-name {
|
margin: 0 4px;
|
font-weight: 500;
|
}
|
.person-id {
|
font-size: 12px;
|
color: #909399;
|
}
|
}
|
.male-tag {
|
color: #1890ff;
|
background-color: #e6f7ff;
|
border-color: #91d5ff;
|
}
|
.female-tag {
|
color: #eb2f96;
|
background-color: #fff0f6;
|
border-color: #ffadd2;
|
}
|
.selection-actions {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 12px;
|
.clear-btn {
|
color: #f56c6c;
|
&:hover {
|
color: #f78989;
|
}
|
}
|
.summary-info {
|
font-size: 13px;
|
color: #909399;
|
}
|
}
|
.empty-placeholder {
|
padding: 20px 0;
|
&:deep(.el-empty__description) {
|
margin-top: 8px;
|
}
|
}
|
</style>
|
