From e950c38ba82e5e6bc8b0c50c35e5dbb6a180165a Mon Sep 17 00:00:00 2001 From: 13404089107 <puwei@sinata.cn> Date: 星期二, 20 五月 2025 16:43:06 +0800 Subject: [PATCH] Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-laboratory --- laboratory/src/components/SelectMemberSimple/index.vue | 154 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 154 insertions(+), 0 deletions(-) diff --git a/laboratory/src/components/SelectMemberSimple/index.vue b/laboratory/src/components/SelectMemberSimple/index.vue new file mode 100644 index 0000000..b870264 --- /dev/null +++ b/laboratory/src/components/SelectMemberSimple/index.vue @@ -0,0 +1,154 @@ +<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>选择实验人员</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" /> + </template> + </el-table-column> + <el-table-column label="创建时间" prop="signTime" /> + </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: () => [] + } + }, + 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() { + 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> \ No newline at end of file -- Gitblit v1.7.1