|
|
@@ -0,0 +1,522 @@
|
|
|
+<template>
|
|
|
+ <div class="select-more-box">
|
|
|
+
|
|
|
+ <div class="select-more-item">
|
|
|
+ <div class="c_left_tag" v-if="modalDetails.length>0">
|
|
|
+ <el-tag class="tag" size="closable" v-for="(item, index) in modalDetails" :key="index"
|
|
|
+ @close="handleCloseCopy(item)" closable>
|
|
|
+ {{ item.name }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ <span style="color: #c0c0c0;" v-else>{{ placeholder }}</span>
|
|
|
+ <div class="select-more-tool" v-if="isAdd">
|
|
|
+ <span>目前已选择：{{ modalDetails.length }}个</span>
|
|
|
+ <div class="select-more-but-add" @click="dialogVisible = true"><span>添加</span><span>+</span></div>
|
|
|
+ <div class="select-more-but-clear" @click="clearModalDetails"><span>清除已选</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ append-to-body
|
|
|
+ :title="title"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ @open="dialogOpen"
|
|
|
+ @close="dialogClose"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :destroy-on-close="true"
|
|
|
+ width="900px"
|
|
|
+ class="information-dialog"
|
|
|
+ custom-class="template-con-dialog" top="auto">
|
|
|
+ <div class="form-con" v-loading="loading">
|
|
|
+ <div class="form_content">
|
|
|
+ <!-- left -->
|
|
|
+ <div class="c_left">
|
|
|
+ <div class="c_left_btn">
|
|
|
+ <div>已选成员</div>
|
|
|
+ <el-button type="text" @click="clearUser">清空</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="c_left_tag">
|
|
|
+ <el-tag class="tag" size="closable" v-for="(item, index) in nameList" :key="index"
|
|
|
+ @close="handleClose(item)" closable>
|
|
|
+ {{ item.name }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- right -->
|
|
|
+ <div class="c_right">
|
|
|
+ <div class="c_input">
|
|
|
+ <el-input size="mini" prefix-icon="el-icon-search" v-model="userValue" placeholder="输入搜索"></el-input>
|
|
|
+ <el-button style="margin-left: 10px;" size="mini" @click="searchFun(false)">
|
|
|
+ 重置
|
|
|
+ </el-button>
|
|
|
+ <el-button size="mini" @click="searchFun(true)" type="primary">
|
|
|
+ 搜索
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="c_checkbox" v-loading="listLoading">
|
|
|
+ <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
|
|
|
+ @change="handleCheckAllChange">全选当前页</el-checkbox>
|
|
|
+ <div style="margin: 15px 0;"></div>
|
|
|
+ <div class="c_checkbox_item" v-for="(item, index) in dataList" :key="index">
|
|
|
+ <el-checkbox
|
|
|
+ class="checkBox_item"
|
|
|
+ v-model="item.checked"
|
|
|
+ @change="(val)=>changeCheckbox(item,index,val)"
|
|
|
+ :key="index">{{
|
|
|
+ item.name
|
|
|
+ }}</el-checkbox>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="c_pagination">
|
|
|
+ <el-pagination
|
|
|
+ v-if="!listLoading"
|
|
|
+ small
|
|
|
+ background
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :page-sizes="page.pageSizes"
|
|
|
+ :page-size="page.pageSize"
|
|
|
+ :total="page.total"
|
|
|
+ :current-page="page.pageNum"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="drawer-footer">
|
|
|
+ <el-button @click="dialogVisible = false">
|
|
|
+ 取消
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="submitForm()" type="primary">
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ listTableApi,
|
|
|
+ } from "@/api/CURD";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ default: '新增',
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ type: Array,
|
|
|
+ default: ()=>{
|
|
|
+ return []
|
|
|
+ },
|
|
|
+ },
|
|
|
+ idKey: { // 绑定的iD
|
|
|
+ type: String,
|
|
|
+ default: 'id',
|
|
|
+ },
|
|
|
+ nameKey: { // 展示的字段名称
|
|
|
+ type: String,
|
|
|
+ default: 'name',
|
|
|
+ },
|
|
|
+ isAdd: { // 是否展示新增
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ selectKey: { // 查询参数
|
|
|
+ type: String,
|
|
|
+ default: 'name',
|
|
|
+ },
|
|
|
+ pageSizeKey: { // 分页参数
|
|
|
+ type: String,
|
|
|
+ default: 'pageSize',
|
|
|
+ },
|
|
|
+ pageNumKey: { // 分页参数
|
|
|
+ type: String,
|
|
|
+ default: 'pageNum',
|
|
|
+ },
|
|
|
+ listUrl: { // 列表查询接口地址
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ params: { // 默认条件
|
|
|
+ type: Object,
|
|
|
+ default: ()=>{
|
|
|
+ return {}
|
|
|
+ },
|
|
|
+ },
|
|
|
+ limit: { // 限制选择的条数
|
|
|
+ type: Number,
|
|
|
+ default: -1, // -1 表示不限
|
|
|
+ },
|
|
|
+ placeholder: {
|
|
|
+ type: String,
|
|
|
+ default: '请点击添加',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisible: false, //弹窗选择
|
|
|
+ userValue: '', //人员搜索
|
|
|
+ dataList: [], //数据列表集合
|
|
|
+ nameList: [],//已选择人员
|
|
|
+ checkAll: false,
|
|
|
+ checkedUsers: [], // 选中的
|
|
|
+ isIndeterminate: false,
|
|
|
+ modalDetails: [],
|
|
|
+ loading: false,//
|
|
|
+ page: {
|
|
|
+ pageSizes: [100, 200, 300, 400],
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
+ listLoading: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ value: {
|
|
|
+ handler(newValue){
|
|
|
+ console.log("dfsdsfsdf====",this.value)
|
|
|
+ if(this.value) {
|
|
|
+ this.modalDetails = JSON.parse(JSON.stringify(this.value))
|
|
|
+ }else {
|
|
|
+ this.modalDetails = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 弹窗组件显示事件
|
|
|
+ async dialogOpen() {
|
|
|
+ this.loading = true
|
|
|
+ this.listLoading = false
|
|
|
+ this.userValue = ''
|
|
|
+ this.$set(this.page,'pageNum',1)
|
|
|
+ if (this.modalDetails.length) {
|
|
|
+ this.modalDetails.forEach((item) => {
|
|
|
+ this.checkedUsers.push(item.id)
|
|
|
+ })
|
|
|
+ this.nameList = this.modalDetails//已选择人员
|
|
|
+ this.checkAll = false
|
|
|
+ this.isIndeterminate = false
|
|
|
+ this.userValue = '' //人员搜索
|
|
|
+ } else {
|
|
|
+ this.nameList = []//已选择人员
|
|
|
+ this.checkAll = false
|
|
|
+ this.checkedUsers = [] // 选中的
|
|
|
+ this.isIndeterminate = false
|
|
|
+ this.userValue = '' //人员搜索
|
|
|
+ }
|
|
|
+ await this.listUser()
|
|
|
+ this.loading = false
|
|
|
+ },
|
|
|
+ /** 搜索 */
|
|
|
+ searchFun(type) {
|
|
|
+ this.listLoading = true
|
|
|
+ if(!type) {
|
|
|
+ this.userValue = ''
|
|
|
+ }
|
|
|
+ this.listUser()
|
|
|
+ },
|
|
|
+ // 查询支部人员集合
|
|
|
+ async listUser() {
|
|
|
+ try {
|
|
|
+ this.dataList = []
|
|
|
+ let res = await listTableApi(this.listUrl,{
|
|
|
+ ...this.params,
|
|
|
+ [this.selectKey]: this.userValue,
|
|
|
+ [this.pageNumKey]: this.page.pageNum,
|
|
|
+ [this.pageSizeKey]: this.page.pageSize
|
|
|
+ })
|
|
|
+ if (res.code == 200) {
|
|
|
+ let list = []
|
|
|
+ let listId = []
|
|
|
+ this.nameList.forEach((item1,index1)=>{
|
|
|
+ listId.push(item1.id)
|
|
|
+ })
|
|
|
+ res.data.rows.forEach((item,index)=>{
|
|
|
+ list.push({
|
|
|
+ ...item,
|
|
|
+ id: item[this.idKey],
|
|
|
+ name: item[this.nameKey],
|
|
|
+ checked: listId.includes(item[this.idKey])
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.dataList = list
|
|
|
+ this.$set(this.page,'total',res.data.total)
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: res.msg
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.checkedCurrentPageAll()
|
|
|
+ this.listLoading = false
|
|
|
+ } catch (error) {
|
|
|
+ this.checkedCurrentPageAll()
|
|
|
+ this.loading = false
|
|
|
+ this.listLoading = false
|
|
|
+ this.dialogVisible = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 清空按钮
|
|
|
+ clearUser() {
|
|
|
+ this.handleCheckAllChange(false)
|
|
|
+ this.isIndeterminate = false;
|
|
|
+ this.checkAll = false
|
|
|
+ },
|
|
|
+ // 清除全部
|
|
|
+ clearModalDetails() {
|
|
|
+ this.$emit('input', [])
|
|
|
+ this.$emit('submitForm')
|
|
|
+ },
|
|
|
+ // 单项删除已选按钮 （外部）
|
|
|
+ handleCloseCopy(item) {
|
|
|
+ let arr = this.modalDetails.filter((item1) => {
|
|
|
+ return item.id != item1.id
|
|
|
+ })
|
|
|
+ this.$emit('input', arr)
|
|
|
+ this.$emit('submitForm')
|
|
|
+ },
|
|
|
+ // 单项删除已选按钮 （备选）
|
|
|
+ handleClose(item) {
|
|
|
+ let arr = this.nameList.filter((item1) => {
|
|
|
+ return item.id != item1.id
|
|
|
+ })
|
|
|
+ let listId = []
|
|
|
+ arr.forEach((item,index) => {
|
|
|
+ listId.push(item.id)
|
|
|
+ })
|
|
|
+ let list = JSON.parse(JSON.stringify(this.dataList))
|
|
|
+ list.forEach((item,index) => {
|
|
|
+ list[index].checked = listId.includes(item.id)
|
|
|
+ })
|
|
|
+ this.nameList = arr
|
|
|
+ this.dataList = list
|
|
|
+ this.checkedCurrentPageAll()
|
|
|
+ },
|
|
|
+ // 全选当前页按钮
|
|
|
+ handleCheckAllChange(val) {
|
|
|
+ // if(this.limit != -1 ) {
|
|
|
+ // if(this.dataList.length)
|
|
|
+ // }
|
|
|
+
|
|
|
+ let list = JSON.parse(JSON.stringify(this.dataList))
|
|
|
+ let listId = []
|
|
|
+ list.forEach((item,index) => {
|
|
|
+ list[index].checked = val
|
|
|
+ listId.push(item.id)
|
|
|
+ })
|
|
|
+ let listExist = this.nameList.filter((item,index)=>{
|
|
|
+ return !listId.includes(item.id)
|
|
|
+ })
|
|
|
+ list.forEach((item,index) => {
|
|
|
+ if(item.checked) {
|
|
|
+ listExist.push({
|
|
|
+ ...item
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.dataList = list
|
|
|
+ this.nameList = listExist
|
|
|
+ this.isIndeterminate = false;
|
|
|
+ },
|
|
|
+ /** 检测当前页是否全选 */
|
|
|
+ checkedCurrentPageAll() {
|
|
|
+ let length = 0
|
|
|
+ let list = JSON.parse(JSON.stringify(this.dataList))
|
|
|
+ list.forEach((item,index) => {
|
|
|
+ if(item.checked) {
|
|
|
+ length++
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.checkAll = (length == list.length)&& length != 0
|
|
|
+ },
|
|
|
+ // 弹窗组件关闭事件
|
|
|
+ dialogClose() {
|
|
|
+ },
|
|
|
+ // 提交表单事件
|
|
|
+ submitForm() {
|
|
|
+ this.$emit('input', JSON.parse(JSON.stringify(this.nameList)))
|
|
|
+ this.$emit('submitForm')
|
|
|
+ this.dialogVisible = false
|
|
|
+ },
|
|
|
+ /** 调整每页选择条数 */
|
|
|
+ handleSizeChange(val) {
|
|
|
+ },
|
|
|
+ /** 点击页码 */
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.page.pageNum = val
|
|
|
+ this.listLoading = true
|
|
|
+ this.listUser()
|
|
|
+ },
|
|
|
+ /** 选择列表 */
|
|
|
+ changeCheckbox(item,index,val) {
|
|
|
+ if(val){
|
|
|
+ this.nameList.push({
|
|
|
+ ...item
|
|
|
+ })
|
|
|
+ }else {
|
|
|
+ let i = -1
|
|
|
+ this.nameList.forEach((item1,index)=>{
|
|
|
+ if(item1.id == item.id) {
|
|
|
+ i = index
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(i!=-1) {
|
|
|
+ this.nameList.splice(i,1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.checkedCurrentPageAll()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.is-error {
|
|
|
+ .select-more-item {
|
|
|
+ border-color: #f56c6c !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.select-more-tool {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5px;
|
|
|
+ right: 5px;
|
|
|
+ display: flex;
|
|
|
+ .select-more-but-add {
|
|
|
+ width: 80px;
|
|
|
+ height: 36px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #409eff;
|
|
|
+ border-color: #409eff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .select-more-but-clear {
|
|
|
+ width: 80px;
|
|
|
+ height: 36px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #f56c6c;
|
|
|
+ border-color: #f56c6c;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.select-more-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
+ border: 1px solid #C0C4CC;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-top: 5px;
|
|
|
+ position: relative;
|
|
|
+ padding: 10px;
|
|
|
+ .c_left_tag {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ margin-left: 0 !important;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.form-con {
|
|
|
+ padding-top: 10px;
|
|
|
+ margin: auto;
|
|
|
+
|
|
|
+ .form_content {
|
|
|
+ height: 500px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .c_left {
|
|
|
+ width: 50%;
|
|
|
+ border-right: 1px solid #EBEEF5;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ .c_left_btn {
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .c_left_tag {
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ margin-left: 0 !important;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .c_right {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .c_input {
|
|
|
+ height: 32px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .c_checkbox {
|
|
|
+ margin-top: 10px;
|
|
|
+ height: 100%;
|
|
|
+ .c_checkbox_item {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .checkBox {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .checkBox_item {
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .c_pagination {
|
|
|
+ height: 32px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
