<template>
|
<el-dialog
|
@open="openDialog"
|
class="select-member"
|
:visible.sync="visible"
|
width="53.33%"
|
:close-on-click-modal="false"
|
:show-close="false"
|
>
|
<template #title>
|
<div>{{ roleType==4 ? "选择化验师" : "选择实验人员" }}</div>
|
</template>
|
<div class="select-member-content">
|
<div class="select-member-content-right">
|
<div class="select-member-content-right-header">
|
<div class="select-member-content-right-header-text">人员列表</div>
|
<div class="select-member-content-right-header-search">
|
<el-input
|
clearable
|
v-model="searchKeyword"
|
placeholder="请输入姓名"
|
/>
|
</div>
|
</div>
|
<Table
|
ref="memberTable"
|
:height="null"
|
:row-key="(row) => row.userId"
|
:data="filteredTableData"
|
:total="0"
|
@selection-change="handleSelectionChange"
|
:row-class-name="tableRowClassName"
|
>
|
<el-table-column type="selection" width="55" />
|
<el-table-column label="角色" prop="roleType">
|
<template #default="{ row }">
|
{{
|
row.roleType === 3
|
? "工艺工程师"
|
: row.roleType === 4
|
? "化验师"
|
: "实验员"
|
}}
|
</template>
|
</el-table-column>
|
<el-table-column label="姓名" prop="nickName" />
|
<el-table-column label="头像" prop="avatar" width="80">
|
<template #default="{ row }">
|
<el-avatar
|
:size="32"
|
:src="row.avatar || require('../../assets/login/img1111.png')"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" prop="createTime" />
|
</Table>
|
</div>
|
</div>
|
<div class="select-member-footer">
|
<el-button @click="close" type="default">关闭</el-button>
|
<el-button type="primary" @click="submit">确认选择</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
memberList: {
|
type: Array,
|
default: () => [],
|
},
|
roleType: {
|
type: String,
|
default: () => "",
|
},
|
},
|
data() {
|
return {
|
visible: false,
|
searchKeyword: "",
|
selectData: [],
|
defaultSelected: [], // 默认选中的行
|
};
|
},
|
computed: {
|
filteredTableData() {
|
if (!this.searchKeyword) {
|
return this.memberList;
|
}
|
const keyword = this.searchKeyword.toLowerCase();
|
return this.memberList.filter(
|
(item) =>
|
(item.nickName && item.nickName.toLowerCase().includes(keyword)) ||
|
(item.phone && item.phone.includes(keyword))
|
);
|
},
|
},
|
methods: {
|
setSelection(selected) {
|
this.selectData = selected;
|
this.$nextTick(() => {
|
// 设置新选中
|
this.memberList.forEach((row) => {
|
if (selected.some((i) => i.userId === row.userId)) {
|
this.$refs.memberTable.toggleRowSelection(row, true);
|
}
|
});
|
});
|
},
|
openDialog() {
|
this.setSelection(this.selectData);
|
},
|
handleSelectionChange(val) {
|
this.selectData = val;
|
},
|
open(data = [], defaultSelected = []) {
|
this.memberList = data;
|
this.visible = true;
|
this.defaultSelected = defaultSelected;
|
// 在下一个tick中设置选中状态，确保表格已经渲染完成
|
this.$nextTick(() => {
|
this.setDefaultSelection();
|
});
|
},
|
close() {
|
this.visible = false;
|
},
|
submit() {
|
if (this.roleType) {
|
if (this.selectData.length == 1) {
|
this.$emit("submit", this.selectData);
|
} else {
|
this.$message.error(
|
`请选择一个${this.roleType == 4 ? "化验师" : "实验员"}！`
|
);
|
}
|
}else{
|
this.$emit("submit", this.selectData);
|
}
|
|
},
|
tableRowClassName({ row, rowIndex }) {
|
if (
|
this.selectData.findIndex((item) => item.userId === row.userId) != -1
|
) {
|
return "select-row";
|
}
|
return "";
|
},
|
setDefaultSelection() {
|
if (this.defaultSelected && this.defaultSelected.length > 0) {
|
this.defaultSelected.forEach((row) => {
|
const targetRow = this.memberList.find(
|
(item) => item.userId === row.userId
|
);
|
if (targetRow) {
|
this.$refs.memberTable.toggleRowSelection(targetRow, true);
|
}
|
});
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.select-member-content {
|
.select-member-content-right {
|
margin-bottom: 31px;
|
|
&-header {
|
display: flex;
|
align-items: center;
|
margin-top: 5px;
|
justify-content: space-between;
|
margin-bottom: 21px;
|
|
&-text {
|
flex-shrink: 0;
|
font-weight: 500;
|
font-size: 16px;
|
line-height: 16px;
|
color: #222222;
|
font-family: "SourceHanSansCN-Medium";
|
margin-right: 20px;
|
}
|
|
&-search {
|
display: flex;
|
align-items: center;
|
|
::v-deep .el-input {
|
margin-right: 12px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
