Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-laboratory
| | |
| | | <template> |
| | | <el-dialog class="select-member" :visible.sync="visible" width="53.33%" :close-on-click-modal="false" |
| | | :show-close="false"> |
| | | <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-left-list"> |
| | | <div class="select-member-content-left-list-title">角色列表</div> |
| | | <div class="select-member-content-left-list-itemBox"> |
| | | <div v-for="item in 10" :key="item.id" |
| | | class="select-member-content-left-list-itemBox-item"> |
| | | 实验员 |
| | | <div @click="searchUserList(item.roleId)" v-for="item in roleList" :key="item.roleId" |
| | | class="select-member-content-left-list-itemBox-item" |
| | | :class="roleId == item.roleId && 'active'"> |
| | | {{ item.roleName }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <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="searchName" placeholder="请输入姓名" /> |
| | | <el-input clearable v-model="nickNameOrPhone" placeholder="请输入姓名/手机号" /> |
| | | <el-button type="primary">搜索</el-button> |
| | | </div> |
| | | </div> |
| | | <Table :data="tableData" :total="0" @selection-change="handleSelectionChange" |
| | | :row-class-name="tableRowClassName"> |
| | | <Table ref="memberTable" :height="null" :row-key="row => row.userId" :data="tableData" |
| | | :total="0" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName"> |
| | | <el-table-column type="selection" width="55" /> |
| | | <el-table-column label="角色" prop="role" /> |
| | | <el-table-column label="姓名" prop="name" /> |
| | | <el-table-column label="角色" prop="roleName" /> |
| | | <el-table-column label="姓名" prop="nickName" /> |
| | | <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">确认选择</el-button> |
| | | <el-button type="primary" @click="submit">确认选择</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapState } from 'vuex' |
| | | import { getRoleList, getUserList } from './service' |
| | | export default { |
| | | data() { |
| | | return { |
| | | visible: false, |
| | | search: '', |
| | | searchName: '', |
| | | tableData: [ |
| | | { |
| | | name: '张三', |
| | | role: '实验员', |
| | | createTime: '2025-1-2 15:13:58' |
| | | }, |
| | | { |
| | | name: '李四', |
| | | role: '实验员', |
| | | createTime: '2025-1-2 15:13:58' |
| | | }, |
| | | ], |
| | | selectData: [] |
| | | nickNameOrPhone: '', |
| | | tableData: [], |
| | | selectData: [], |
| | | roleList: [], |
| | | roleId: null, |
| | | } |
| | | }, |
| | | computed: { |
| | | ...mapState(['isFold']) |
| | | }, |
| | | methods: { |
| | | setSelection(selected) { |
| | | this.selectData = selected |
| | | this.$nextTick(() => { |
| | | // 设置新选中 |
| | | this.tableData.forEach(row => { |
| | | if (selected.some(i => i.userId === row.userId)) { |
| | | this.$refs.memberTable.toggleRowSelection(row, true) |
| | | } |
| | | }) |
| | | }) |
| | | }, |
| | | openDialog() { |
| | | getRoleList().then(res => { |
| | | this.roleList = res; |
| | | }) |
| | | this.searchUserList(null); |
| | | }, |
| | | handleSelectionChange(val) { |
| | | this.selectData = val |
| | | }, |
| | | async searchUserList(roleId) { |
| | | this.roleId = roleId |
| | | const res = await getUserList({ roleIds: roleId ? [roleId] : [], nickNameOrPhone: this.searchName, pageSize: 9999, pageNum: 1 }) |
| | | this.tableData = res.records |
| | | // 数据加载完成后重新应用选中状态 |
| | | this.setSelection(this.selectData) |
| | | }, |
| | | searchRole() { |
| | | this.search = '' |
| | |
| | | close() { |
| | | this.visible = false |
| | | }, |
| | | submit() { |
| | | this.$emit('submit', this.selectData) |
| | | }, |
| | | tableRowClassName({ row, rowIndex }) { |
| | | if (this.selectData.findIndex(item => item.name === row.name) != -1) { |
| | | if (this.selectData.findIndex(item => item.userId === row.userId) != -1) { |
| | | return 'select-row'; |
| | | } |
| | | return ''; |
| | |
| | | &:last-child { |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | &:hover, |
| | | &.active { |
| | | background: rgba(4, 156, 154, 0.1); |
| | | color: #049C9A; |
| | | } |
| | | } |
| | | } |
| | | } |
New file |
| | |
| | | import axios from '@/utils/request'; |
| | | |
| | | // 列表 |
| | | export const getProjectList = (data) => { |
| | | return axios.post('/api/t-project-team/pageList', { ...data }) |
| | | } |
| | | |
| | | // 用户列表 |
| | | export const getUserList = (data) => { |
| | | return axios.post('/system/user/list', { ...data }) |
| | | } |
| | | |
| | | // 角色列表不分页 |
| | | export const getRoleList = (data) => { |
| | | return axios.post('/system/role/listNotPage', { ...data }) |
| | | } |
| | |
| | | <template> |
| | | <div class="table-container"> |
| | | <el-table border v-bind="$attrs" v-on="$listeners" :height="height"> |
| | | <el-table ref="elTable" border v-bind="$attrs" v-on="$listeners" :height="height"> |
| | | <slot></slot> |
| | | </el-table> |
| | | <div v-if="total > 0"> |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | toggleRowSelection(row, selected) { |
| | | this.$refs.elTable.toggleRowSelection(row, selected) |
| | | this.$forceUpdate() |
| | | }, |
| | | clearSelection() { |
| | | this.$refs.elTable.clearSelection() |
| | | this.$forceUpdate() |
| | | }, |
| | | handleCurrentChange(page) { |
| | | this.$emit('handleCurrentChange', page) |
| | | }, |
| | |
| | | <Card> |
| | | <template> |
| | | <el-form ref="form" :model="form" :rules="rules" inline label-position="top"> |
| | | <el-form-item prop="name" label="项目组名称"> |
| | | <el-input v-model="form.name" placeholder="请输入" /> |
| | | <el-form-item prop="teamName" label="项目组名称"> |
| | | <el-input v-model="form.teamName" placeholder="请输入" /> |
| | | </el-form-item> |
| | | <el-form-item prop="description" label="项目组描述"> |
| | | <el-input v-model="form.description" placeholder="请输入" /> |
| | | <el-form-item prop="personCharge" label="项目组负责人"> |
| | | <el-input v-model="form.personCharge" placeholder="请输入" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div class="header-title"> |
| | |
| | | <div class="member-item"> |
| | | <div class="member-title">{{ ['审批人', '工艺工程师', '实验员', '化验师'][item - 1] }}</div> |
| | | <div :class="item == 1 || item == 2 ? 'member-name-box' : 'member-name-box-2'"> |
| | | <div v-for="i in memberList(item)" :key="i" class="member-name">张三</div> |
| | | <el-tooltip v-for="i in memberList(item)" :key="i.userId" class="member-name" effect="dark" |
| | | :content="i.nickName" placement="top"> |
| | | <span>{{ i.nickName }}</span> |
| | | </el-tooltip> |
| | | </div> |
| | | <div class="member-edit">修改</div> |
| | | <div class="member-edit" v-if="memberList(item).length != 0" @click="editUserList">修改</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <el-button type="primary">保存</el-button> |
| | | </div> |
| | | </template> |
| | | <SelectMember ref="selectMember" /> |
| | | <SelectMember ref="selectMember" @submit="selectUser" /> |
| | | </Card> |
| | | </template> |
| | | |
| | |
| | | return { |
| | | form: {}, |
| | | rules: { |
| | | name: [{ required: true, message: '请输入项目组名称', trigger: 'blur' }], |
| | | description: [{ required: true, message: '请输入项目组描述', trigger: 'blur' }] |
| | | } |
| | | teamName: [{ required: true, message: '请输入项目组名称', trigger: 'blur' }], |
| | | personCharge: [{ required: true, message: '请输入项目组描述', trigger: 'blur' }] |
| | | }, |
| | | selectMemberData: [], |
| | | // 角色配置常量 |
| | | ROLE_CONFIG: { |
| | | 1: { key: 'approver', limit: 1, label: '审批人' }, |
| | | 2: { key: 'engineer', limit: 1, label: '工艺工程师' }, |
| | | }, |
| | | } |
| | | }, |
| | | methods: { |
| | |
| | | memberList(i) { |
| | | switch (i) { |
| | | case 1: |
| | | return [1] |
| | | return this.selectMemberData.filter(item => item.roleName == '审批人') |
| | | case 2: |
| | | return [1] |
| | | return this.selectMemberData.filter(item => item.roleName == '工艺工程师') |
| | | case 3: |
| | | return [1, 2, 3, 4, 5, 6, 7, 8] |
| | | return this.selectMemberData.filter(item => item.roleName == '实验员') |
| | | case 4: |
| | | return [1, 2, 3, 4, 5, 6, 7, 8] |
| | | return this.selectMemberData.filter(item => item.roleName == '化验师') |
| | | default: |
| | | break; |
| | | } |
| | | }, |
| | | selectUser(data) { |
| | | for (const [roleId, config] of Object.entries(this.ROLE_CONFIG)) { |
| | | const members = data.filter(item => item.roleName === config.label); |
| | | if (members.length > config.limit) { |
| | | this.$message.error(`${config.label}最多只能选择${config.limit}个`); |
| | | return |
| | | } |
| | | } |
| | | this.selectMemberData = data; |
| | | this.$refs.selectMember.close(); |
| | | }, |
| | | editUserList() { |
| | | this.$refs.selectMember.open(); |
| | | this.$nextTick(() => { |
| | | this.$refs.selectMember.setSelection(this.selectMemberData); |
| | | }); |
| | | } |
| | | } |
| | | } |
| | |
| | | font-weight: 500; |
| | | font-size: 16px; |
| | | color: #FFFFFF; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .member-edit { |
| | |
| | | <TableCustom :queryForm="queryForm" :tableData="tableData" :total="total" @currentChange="handleCurrentChange" |
| | | @sizeChange="handleSizeChange"> |
| | | <template #search> |
| | | <el-form :model="form" label-width="140px" inline> |
| | | <el-form label-width="140px" inline> |
| | | <el-form-item label="项目组名称:"> |
| | | <el-input v-model="form.name" placeholder="请输入"></el-input> |
| | | <el-input v-model="queryForm.teamName" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="项目负责人:"> |
| | | <el-input v-model="form.name" placeholder="请输入"></el-input> |
| | | <el-input v-model="queryForm.personCharge" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="创建日期:"> |
| | | <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" |
| | | end-placeholder="结束日期"> |
| | | <el-date-picker v-model="queryForm.createdDate" type="daterange" range-separator="至" |
| | | start-placeholder="开始日期" end-placeholder="结束日期"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item class="search-btn-box"> |
| | | <el-button>重置</el-button> |
| | | <el-button type="primary">查询</el-button> |
| | | <el-button @click="reset">重置</el-button> |
| | | <el-button type="primary" @click="search">查询</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </template> |
| | |
| | | 新增项目组</el-button> |
| | | </template> |
| | | <template #table> |
| | | <el-table-column prop="name" label="项目组名称" /> |
| | | <el-table-column prop="age" label="项目负责人" /> |
| | | <el-table-column prop="age" label="项目组成员" /> |
| | | <el-table-column prop="teamName" label="项目组名称" /> |
| | | <el-table-column prop="personCharge" label="项目负责人" /> |
| | | <el-table-column prop="staffName" label="项目组成员" /> |
| | | <el-table-column prop="age" label="项目创建时间" /> |
| | | <el-table-column prop="age" label="状态"> |
| | | <template #default="{ row }"> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { getProjectList } from './service' |
| | | import moment from 'moment' |
| | | export default { |
| | | name: 'ProjectList', |
| | | data() { |
| | | return { |
| | | form: { |
| | | name: '' |
| | | }, |
| | | showDelConfirm: false, |
| | | rowId: '', |
| | | changeStatus: false, |
| | |
| | | }, |
| | | total: 0 |
| | | } |
| | | }, |
| | | created() { |
| | | this.getList() |
| | | }, |
| | | methods: { |
| | | handleAddProject() { |
| | |
| | | this.getList() |
| | | }, |
| | | getList() { |
| | | |
| | | let obj = { |
| | | ...this.queryForm |
| | | } |
| | | if (obj.createdDate) { |
| | | obj.startTime = moment(obj.createdDate[0]).format('YYYY-MM-DD') |
| | | obj.endTime = moment(obj.createdDate[1]).format('YYYY-MM-DD') |
| | | delete obj.createdDate |
| | | } |
| | | getProjectList(obj).then(res => { |
| | | this.tableData = res.data.records |
| | | this.total = res.data.total |
| | | }) |
| | | }, |
| | | reset() { |
| | | this.queryForm = { |
| | | pageSize: 10, |
| | | pageNum: 1 |
| | | } |
| | | this.getList() |
| | | }, |
| | | search() { |
| | | this.getList() |
| | | } |
| | | } |
| | | } |
New file |
| | |
| | | import axios from '@/utils/request'; |
| | | |
| | | // 列表 |
| | | export const getProjectList = (data) => { |
| | | return axios.post('/api/t-project-team/pageList', { ...data }) |
| | | } |