From 0c9660562a03191d44fc779a889d3da0dc624b6d Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期五, 25 七月 2025 10:47:19 +0800
Subject: [PATCH] 修改弹窗ui和客户反馈
---
laboratory/src/components/SelectMemberSimple/index.vue | 310 +++++++++++++++++++++++++++++----------------------
1 files changed, 178 insertions(+), 132 deletions(-)
diff --git a/laboratory/src/components/SelectMemberSimple/index.vue b/laboratory/src/components/SelectMemberSimple/index.vue
index 64a55e6..01d208e 100644
--- a/laboratory/src/components/SelectMemberSimple/index.vue
+++ b/laboratory/src/components/SelectMemberSimple/index.vue
@@ -1,154 +1,200 @@
<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 || require('../../assets/login/img1111.png')" />
- </template>
- </el-table-column>
- <el-table-column label="创建时间" prop="signTime" />
- </Table>
- </div>
+ <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>
- <div class="select-member-footer">
- <el-button @click="close" type="default">关闭</el-button>
- <el-button type="primary" @click="submit">确认选择</el-button>
- </div>
- </el-dialog>
+ <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: () => []
- }
+ props: {
+ memberList: {
+ type: Array,
+ default: () => [],
},
- data() {
- return {
- visible: false,
- searchKeyword: '',
- selectData: [],
- defaultSelected: [] // 默认选中的行
- }
+ roleType: {
+ type: String,
+ default: () => "",
},
- 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))
- );
- }
+ },
+ 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);
- }
- });
- }
+ },
+ 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;
+ .select-member-content-right {
+ margin-bottom: 31px;
- &-header {
- display: flex;
- align-items: center;
- margin-top: 5px;
- justify-content: space-between;
- margin-bottom: 21px;
+ &-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;
- }
+ &-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;
+ &-search {
+ display: flex;
+ align-items: center;
- ::v-deep .el-input {
- margin-right: 12px;
- }
- }
+ ::v-deep .el-input {
+ margin-right: 12px;
}
+ }
}
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.7.1