feat: 打包配置

zjk

4 小时以前 173766e82d7cde9a7ae30b8896a9a287dff411f8

 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" />
                        </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>