selectProjectMembers.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. <template>
  2. <el-dialog
  3. :visible="visible"
  4. :title="title"
  5. class="select-members"
  6. width="900px"
  7. :close-on-click-modal="false"
  8. @close="dialogClose"
  9. >
  10. <div class="query-criteria">
  11. <span class="criteria-label">真实姓名</span>
  12. <el-input v-model="real_name" placeholder="请输入姓名" @change="getUserList" />
  13. <span>所属机构</span>
  14. <el-select v-model="org_id_list" placeholder="请选择机构" multiple @change="getUserList">
  15. <el-option v-for="item in org_list" :key="item.id" :label="item.name" :value="item.id" />
  16. </el-select>
  17. <span class="query-button">
  18. <el-button type="primary" @click="getUserList">查询</el-button>
  19. </span>
  20. </div>
  21. <el-table ref="user" :data="user_list" height="240">
  22. <el-table-column type="selection" width="55" align="center" header-align="center" class-name="index-column" />
  23. <el-table-column prop="real_name" label="真实姓名" width="140" header-align="center" />
  24. <el-table-column prop="user_name" label="用户名" width="140" header-align="center" />
  25. <el-table-column prop="email" label="邮箱" width="200" header-align="center" />
  26. <el-table-column prop="phone" label="电话" width="120" header-align="center" />
  27. <el-table-column prop="org_name" label="所属机构" header-align="center" />
  28. </el-table>
  29. <PaginationPage :total="total" @getList="getUserList" />
  30. <div v-if="isMember" class="member-container">
  31. <div class="top">
  32. <span class="title">已选成员</span>
  33. <span class="link" @click="addSelectedUsers">添加</span>
  34. </div>
  35. <div class="member-list">
  36. <div class="member-header">
  37. <span class="header-item">序号</span>
  38. <span class="header-item">真实姓名</span>
  39. <span class="header-item">用户名</span>
  40. <span class="header-item">邮箱</span>
  41. <span class="header-item">电话</span>
  42. <span class="header-item">操作</span>
  43. </div>
  44. <div v-for="(user, index) in selectedUsers" :key="user.id" class="member-row">
  45. <span class="item">{{ index + 1 }}</span>
  46. <span class="item">{{ user.real_name }}</span>
  47. <span class="item">{{ user.user_name }}</span>
  48. <span class="item">{{ user.email }}</span>
  49. <span class="item">{{ user.phone }}</span>
  50. <span class="item button">
  51. <el-button type="text" @click="removeUser(index)">删除</el-button>
  52. </span>
  53. </div>
  54. </div>
  55. </div>
  56. <div slot="footer">
  57. <el-button @click="dialogClose">取消</el-button>
  58. <el-button type="primary" @click="confirm">添加</el-button>
  59. </div>
  60. </el-dialog>
  61. </template>
  62. <script>
  63. import { queryUserList } from '@/api/list';
  64. import { orgIndexList } from '@/api/user';
  65. import PaginationPage from '@/components/PaginationPage.vue';
  66. export default {
  67. name: 'SelectProjectMembers',
  68. components: {
  69. PaginationPage,
  70. },
  71. props: {
  72. visible: {
  73. type: Boolean,
  74. required: true,
  75. },
  76. title: {
  77. type: String,
  78. default: '选择项目成员',
  79. },
  80. type: {
  81. type: String,
  82. required: true,
  83. },
  84. selectedList: {
  85. type: Array,
  86. default: () => [],
  87. },
  88. },
  89. data() {
  90. return {
  91. real_name: '', // 真实姓名
  92. org_list: [], // 机构列表
  93. org_id_list: [], // 机构id列表
  94. user_list: [], // 用户列表
  95. total: 0,
  96. page_capacity: 10,
  97. cur_page: 1,
  98. selectedUsers: [], // 选中的用户
  99. };
  100. },
  101. computed: {
  102. isMember() {
  103. return this.type === 'member';
  104. },
  105. },
  106. watch: {
  107. selectedList: {
  108. handler(newVal) {
  109. this.selectedUsers = newVal;
  110. },
  111. immediate: true,
  112. },
  113. },
  114. created() {
  115. this.getOrgIndexList();
  116. this.getUserList();
  117. },
  118. methods: {
  119. getUserList(data) {
  120. const params = {
  121. real_name: this.real_name,
  122. org_id_list: this.org_id_list,
  123. page_capacity: this.page_capacity,
  124. cur_page: this.cur_page,
  125. org_manager_status: -1,
  126. };
  127. queryUserList({ ...params, ...data }).then(({ user_list, total_count, cur_page }) => {
  128. this.user_list = user_list;
  129. this.total = total_count;
  130. this.page_capacity = data?.page_capacity || this.page_capacity;
  131. this.cur_page = cur_page;
  132. });
  133. },
  134. getOrgIndexList() {
  135. orgIndexList().then(({ org_list }) => {
  136. this.org_list = org_list;
  137. });
  138. },
  139. // 添加选中的用户
  140. addSelectedUsers() {
  141. // 获取选中的用户
  142. const selected = this.$refs.user.selection;
  143. if (selected.length === 0) {
  144. this.$message.warning('请至少选择一名成员');
  145. return;
  146. }
  147. // 通过 id 去重
  148. const uniqueSelectedUsers = selected.filter(({ id }) => {
  149. return this.selectedUsers.findIndex((user) => user.id === id) === -1;
  150. });
  151. // 合并选中的用户
  152. this.selectedUsers = [...this.selectedUsers, ...uniqueSelectedUsers];
  153. // 清空选中的用户
  154. this.$refs.user.clearSelection();
  155. },
  156. // 删除用户
  157. removeUser(index) {
  158. this.selectedUsers.splice(index, 1);
  159. },
  160. dialogClose() {
  161. this.$emit('update:visible', false);
  162. this.real_name = '';
  163. this.org_id_list = [];
  164. this.selectedUsers = [];
  165. this.$refs.user.clearSelection();
  166. },
  167. confirm() {
  168. if (this.selectedUsers.length === 0 && this.isMember) {
  169. this.$message.warning('请至少选择一名成员');
  170. return;
  171. }
  172. if (this.isMember) {
  173. this.$emit('confirm', this.selectedUsers);
  174. } else {
  175. this.$emit('confirm', this.$refs.user.selection);
  176. }
  177. this.dialogClose();
  178. },
  179. },
  180. };
  181. </script>
  182. <style lang="scss" scoped>
  183. .select-members {
  184. .query-criteria {
  185. display: flex;
  186. column-gap: 8px;
  187. align-items: center;
  188. margin-bottom: 12px;
  189. .criteria-label {
  190. white-space: nowrap;
  191. }
  192. .el-input {
  193. width: 200px;
  194. }
  195. .el-select {
  196. width: 360px;
  197. }
  198. :deep .el-input__inner {
  199. background-color: #fff;
  200. border-color: #dcdcdc;
  201. }
  202. .query-button {
  203. display: flex;
  204. flex: 1;
  205. justify-content: flex-end;
  206. }
  207. }
  208. .member-container {
  209. padding: 8px 0;
  210. margin-top: 12px;
  211. border-top: 1px solid #dcdcdc;
  212. .top {
  213. display: flex;
  214. align-items: center;
  215. justify-content: space-between;
  216. padding: 0 12px;
  217. }
  218. .member-list {
  219. max-height: 300px;
  220. margin-top: 10px;
  221. overflow-y: auto;
  222. .member-header {
  223. display: flex;
  224. font-size: 15px;
  225. font-weight: bold;
  226. text-align: center;
  227. background-color: $main-background-color;
  228. border: $border;
  229. .header-item {
  230. padding: 8px 12px;
  231. &:first-child {
  232. width: 55px;
  233. }
  234. &:nth-child(2) {
  235. width: 140px;
  236. }
  237. &:nth-child(3) {
  238. width: 140px;
  239. }
  240. &:nth-child(4) {
  241. width: 200px;
  242. }
  243. &:nth-child(5) {
  244. width: 200px;
  245. }
  246. &:last-child {
  247. flex: 1;
  248. }
  249. }
  250. }
  251. .member-row {
  252. display: flex;
  253. align-items: center;
  254. text-align: center;
  255. .item {
  256. height: 40px;
  257. padding: 8px 12px;
  258. border-bottom: 1px solid #dcdcdc;
  259. &:first-child {
  260. width: 55px;
  261. }
  262. &:nth-child(2) {
  263. width: 140px;
  264. }
  265. &:nth-child(3) {
  266. width: 140px;
  267. }
  268. &:nth-child(4) {
  269. width: 200px;
  270. }
  271. &:nth-child(5) {
  272. width: 200px;
  273. }
  274. &:last-child {
  275. flex: 1;
  276. }
  277. &.button {
  278. display: flex;
  279. align-items: center;
  280. justify-content: center;
  281. }
  282. }
  283. }
  284. }
  285. }
  286. }
  287. </style>