1317 lines
40 KiB
Vue
1317 lines
40 KiB
Vue
<!-- 分页从全公司选择人员 -->
|
|
<template>
|
|
<div>
|
|
<!-- 弹窗,dialogModel则作为单独组件使用 -->
|
|
<el-dialog
|
|
v-if="isOrg"
|
|
append-to-body
|
|
title="组织机构"
|
|
:visible.sync="isVisible"
|
|
:close-on-click-modal="false"
|
|
class="org-table"
|
|
@close="handleClose">
|
|
<template >
|
|
<div class="search-area search-new">
|
|
<el-form
|
|
:model="searchForm"
|
|
inline
|
|
class="label-input-form"
|
|
@keyup.enter.native="handleSearch">
|
|
<el-row :gutter="24">
|
|
|
|
<el-col :xl="8" :lg="8">
|
|
<el-form-item label="部门名称" class="search-item">
|
|
<!-- <el-input :placeholder="'根据角色名查询'" class="search-item" v-model="searchForm.roleName"/>-->
|
|
<el-input v-model="searchForm.longName" maxlength="50" placeholder="请输入部门名称"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xl="8" :lg="8">
|
|
<el-form-item label="部门编码" class="search-item">
|
|
<!-- <el-input-->
|
|
<!-- v-model="searchForm.uname"-->
|
|
<!-- placeholder="根据姓名查询"-->
|
|
<!-- clearable></el-input>-->
|
|
<el-input :placeholder="'请输入部门编码'" v-model="searchForm.departmentCode"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xl="8" :lg="24">
|
|
<el-form-item class="tag-btns">
|
|
<!-- :loading="loading.searching"-->
|
|
<el-button
|
|
:disabled="loading.searching"
|
|
type="primary"
|
|
size="small"
|
|
@click="handleSearch">查询
|
|
</el-button>
|
|
<el-button
|
|
size="small"
|
|
@click="handleReset">重置
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
<div class="org-user v-class">
|
|
|
|
<el-table
|
|
v-if="isVisible"
|
|
ref="orgTable"
|
|
:data="tableData"
|
|
tooltip-effect="dark"
|
|
style="width: 100%"
|
|
border
|
|
stripe
|
|
:header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
|
|
height="350"
|
|
v-loading="loading.loadData"
|
|
:cell-class-name="cellClassName"
|
|
@select="selectionRow"
|
|
@select-all="selectionRowAll">
|
|
<el-table-column v-if="maxSelected && maxSelected == 1" label="" width="35" align="center">
|
|
<template slot-scope="scope">
|
|
<el-radio class="tableRadio" v-model="tableChecked" @change="radioChange(scope.row)"
|
|
:label="scope.row.id">{{ null }}
|
|
</el-radio>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-else
|
|
type="selection"
|
|
width="55"
|
|
align="center"
|
|
:selectable="isSelectable">
|
|
</el-table-column>
|
|
<!-- v-if="workNumFlag"-->
|
|
<el-table-column
|
|
label="部门名称"
|
|
prop="longName"
|
|
align="center"
|
|
show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="部门编码"
|
|
prop="departmentCode"
|
|
align="center"
|
|
show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="部门简称"
|
|
prop="shortName"
|
|
align="center"
|
|
show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="leveL"
|
|
width="120"
|
|
label="部门级别"
|
|
align="center"
|
|
show-overflow-tooltip>
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
</div>
|
|
<el-pagination
|
|
class="pagination"
|
|
:current-page="page"
|
|
:page-sizes="[5, 10, 20]"
|
|
:pageSize="pageSize"
|
|
:total="total"
|
|
@current-change="handlePageChange"
|
|
@size-change="handlePageSizeChange"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
></el-pagination>
|
|
<template v-if="btnFlag">
|
|
<!-- 已选择的用户 -->
|
|
<template v-if="maxSelected !== 1">
|
|
<el-divider content-position="left">已选择</el-divider>
|
|
<div class="checked-user-list">
|
|
<el-tag
|
|
size="medium"
|
|
closable
|
|
v-for="item in checkedList"
|
|
:key="item.usid || item.USID || item.id "
|
|
@close="handleRemove(item)">{{ item.uname || item.USNAME || item.name || item.longName}}
|
|
</el-tag>
|
|
<el-button
|
|
type="danger"
|
|
size="mini"
|
|
@click="handleCleanChecked"
|
|
v-show="checkedIdList.length > 1">全部删除
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
<div style="text-align: right;" class="dialog-footer">
|
|
<el-button size="small"
|
|
type="primary"
|
|
class="common-button-primary"
|
|
@click="handleConfirm">确 定
|
|
</el-button>
|
|
<el-button size="small"
|
|
class="common-button-default"
|
|
@click="handleCancel">取 消
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
v-else-if="iscode"
|
|
append-to-body
|
|
title="组织机构"
|
|
:visible.sync="isVisible"
|
|
:close-on-click-modal="false"
|
|
class="org-table"
|
|
@close="handleClose">
|
|
<template >
|
|
<div class="search-area search-new">
|
|
<el-form
|
|
:model="searchForm"
|
|
inline
|
|
class="label-input-form"
|
|
@keyup.enter.native="handleSearch">
|
|
<el-row :gutter="24">
|
|
|
|
<el-col :xl="8" :lg="8">
|
|
<el-form-item label="部门名称" class="search-item">
|
|
<!-- <el-input :placeholder="'根据角色名查询'" class="search-item" v-model="searchForm.roleName"/>-->
|
|
<el-input v-model="searchForm.longName" maxlength="50" placeholder="请输入部门名称"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xl="8" :lg="8">
|
|
<el-form-item label="部门编码" class="search-item">
|
|
<!-- <el-input-->
|
|
<!-- v-model="searchForm.uname"-->
|
|
<!-- placeholder="根据姓名查询"-->
|
|
<!-- clearable></el-input>-->
|
|
<el-input :placeholder="'请输入部门编码'" v-model="searchForm.departmentCode"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xl="8" :lg="24">
|
|
<el-form-item class="tag-btns">
|
|
<!-- :loading="loading.searching"-->
|
|
<el-button
|
|
:disabled="loading.searching"
|
|
type="primary"
|
|
size="small"
|
|
@click="handleSearch">查询
|
|
</el-button>
|
|
<el-button
|
|
size="small"
|
|
@click="handleReset">重置
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
<div class="org-user v-class">
|
|
|
|
<el-table
|
|
v-if="isVisible"
|
|
ref="orgTable"
|
|
:data="tableData"
|
|
tooltip-effect="dark"
|
|
style="width: 100%"
|
|
border
|
|
stripe
|
|
:header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
|
|
height="350"
|
|
v-loading="loading.loadData"
|
|
:cell-class-name="cellClassName"
|
|
@select="selectionRow"
|
|
@select-all="selectionRowAll">
|
|
<el-table-column v-if="maxSelected && maxSelected == 1" label="" width="35" align="center">
|
|
<template slot-scope="scope">
|
|
<el-radio class="tableRadio" v-model="tableChecked" @change="radioChange(scope.row)"
|
|
:label="scope.row.id">{{ null }}
|
|
</el-radio>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-else
|
|
type="selection"
|
|
width="55"
|
|
align="center"
|
|
:selectable="isSelectable">
|
|
</el-table-column>
|
|
<!-- v-if="workNumFlag"-->
|
|
<el-table-column
|
|
label="部门名称"
|
|
prop="longName"
|
|
align="center"
|
|
show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="部门编码"
|
|
prop="departmentCode"
|
|
align="center"
|
|
show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="部门简称"
|
|
prop="shortName"
|
|
align="center"
|
|
show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="leveL"
|
|
width="120"
|
|
label="部门级别"
|
|
align="center"
|
|
show-overflow-tooltip>
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
</div>
|
|
<el-pagination
|
|
class="pagination"
|
|
:current-page="page"
|
|
:page-sizes="[5, 10, 20]"
|
|
:pageSize="pageSize"
|
|
:total="total"
|
|
@current-change="handlePageChange"
|
|
@size-change="handlePageSizeChange"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
></el-pagination>
|
|
<template v-if="btnFlag">
|
|
<!-- 已选择的用户 -->
|
|
<template v-if="maxSelected !== 1">
|
|
<el-divider content-position="left">已选择</el-divider>
|
|
<div class="checked-user-list">
|
|
<el-tag
|
|
size="medium"
|
|
closable
|
|
v-for="item in checkedList"
|
|
:key="item.usid || item.USID || item.id "
|
|
@close="handleRemove(item)">{{ item.uname || item.USNAME || item.name || item.longName}}
|
|
</el-tag>
|
|
<el-button
|
|
type="danger"
|
|
size="mini"
|
|
@click="handleCleanChecked"
|
|
v-show="checkedIdList.length > 1">全部删除
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
<div style="text-align: right;" class="dialog-footer">
|
|
<el-button size="small"
|
|
type="primary"
|
|
class="common-button-primary"
|
|
@click="handleConfirm">确 定
|
|
</el-button>
|
|
<el-button size="small"
|
|
class="common-button-default"
|
|
@click="handleCancel">取 消
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</el-dialog>
|
|
<el-dialog
|
|
v-else
|
|
append-to-body
|
|
:title="showTitle"
|
|
:visible.sync="isVisible"
|
|
:close-on-click-modal="false"
|
|
class="org-table"
|
|
@close="handleClose">
|
|
<template >
|
|
<div class="search-area search-new">
|
|
<el-form
|
|
:model="searchForm"
|
|
inline
|
|
class="label-input-form"
|
|
@keyup.enter.native="handleSearch">
|
|
<el-row :gutter="24">
|
|
|
|
<el-col :xl="8" :lg="8">
|
|
<el-form-item label="角色名" class="search-item">
|
|
<!-- <el-input :placeholder="'根据角色名查询'" class="search-item" v-model="searchForm.roleName"/>-->
|
|
<el-select v-model="searchForm.roleName" class="icon-auth" placeholder="请选择角色名">
|
|
<el-option label="全部" value=""></el-option>
|
|
<template v-for="item in roleList">
|
|
<el-option :label="item.rname" :value="item.rname" :key="item.rid"></el-option>
|
|
</template>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xl="8" :lg="8">
|
|
<el-form-item label="用户名" class="search-item">
|
|
<!-- <el-input-->
|
|
<!-- v-model="searchForm.uname"-->
|
|
<!-- placeholder="根据姓名查询"-->
|
|
<!-- clearable></el-input>-->
|
|
<el-input :placeholder="'请输入用户名'" v-model="searchForm.account"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xl="8" :lg="24">
|
|
<el-form-item class="tag-btns">
|
|
<!-- :loading="loading.searching"-->
|
|
<el-button
|
|
:disabled="loading.searching"
|
|
type="primary"
|
|
size="small"
|
|
@click="handleSearch">查询
|
|
</el-button>
|
|
<el-button
|
|
size="small"
|
|
@click="handleReset">重置
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
<div class="org-user v-class">
|
|
|
|
<el-table
|
|
v-if="isVisible"
|
|
ref="orgTable"
|
|
:data="tableData"
|
|
tooltip-effect="dark"
|
|
style="width: 100%"
|
|
border
|
|
stripe
|
|
:header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
|
|
height="350"
|
|
v-loading="loading.loadData"
|
|
:cell-class-name="cellClassName"
|
|
@select="selectionRow"
|
|
@select-all="selectionRowAll">
|
|
<el-table-column v-if="maxSelected && maxSelected == 1" label="" width="35" align="center">
|
|
<template slot-scope="scope">
|
|
<el-radio class="tableRadio" v-model="tableChecked" @change="radioChange(scope.row)"
|
|
:label="scope.row.USID">{{ null }}
|
|
</el-radio>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-else
|
|
type="selection"
|
|
width="55"
|
|
align="center"
|
|
:selectable="isSelectable">
|
|
</el-table-column>
|
|
<!-- v-if="workNumFlag"-->
|
|
<el-table-column
|
|
label="用户名"
|
|
width="120"
|
|
prop="ACCOUNT"
|
|
align="center"
|
|
show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="姓名"
|
|
width="120"
|
|
:prop="presets ? 'personName':'USNAME'"
|
|
align="center"
|
|
show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="ROLENAME"
|
|
label="角色"
|
|
align="center"
|
|
show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="EMAIL"
|
|
label="邮箱"
|
|
align="center"
|
|
show-overflow-tooltip>
|
|
</el-table-column>
|
|
<!-- <el-table-column-->
|
|
<!-- :prop="presets?'role':(pageUrl == 'productItem' ? 'projectRoleName' : 'roleNames') "-->
|
|
<!-- label="角色"-->
|
|
<!-- align="center"-->
|
|
<!-- show-overflow-tooltip>-->
|
|
<!-- <!– <template slot-scope="scope">–>-->
|
|
<!-- <!– <div class="tag-wrap">–>-->
|
|
<!-- <!– <el-tag–>-->
|
|
<!-- <!– size="small"–>-->
|
|
<!-- <!– v-for="(tag, index) in scope.row.roleName.split(',')"–>-->
|
|
<!-- <!– :key="index">{{ tag }}</el-tag>–>-->
|
|
<!-- <!– </div>–>-->
|
|
<!-- <!– </template>–>-->
|
|
<!-- </el-table-column>-->
|
|
<el-table-column
|
|
label="部门"
|
|
align="center"
|
|
show-overflow-tooltip>
|
|
<template #default="{ row }">{{ row.departmentName || row.DEPARTMENT || row.ORGNAME }}
|
|
</template>
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
</div>
|
|
<el-pagination
|
|
class="pagination"
|
|
:current-page="page"
|
|
:page-sizes="[5, 10, 20]"
|
|
:pageSize="pageSize"
|
|
:total="total"
|
|
@current-change="handlePageChange"
|
|
@size-change="handlePageSizeChange"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
></el-pagination>
|
|
<template v-if="btnFlag">
|
|
<!-- 已选择的用户 -->
|
|
<template v-if="maxSelected !== 1">
|
|
<el-divider content-position="left">已选择</el-divider>
|
|
<div class="checked-user-list">
|
|
<el-tag
|
|
size="medium"
|
|
closable
|
|
v-for="item in checkedList"
|
|
:key="item.usid || item.USID || item.id"
|
|
@close="handleRemove(item)">{{ item.uname || item.USNAME || item.name }}
|
|
</el-tag>
|
|
<el-button
|
|
type="danger"
|
|
size="mini"
|
|
@click="handleCleanChecked"
|
|
v-show="checkedIdList.length > 1">全部删除
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
<div style="text-align: right;" class="dialog-footer">
|
|
<el-button size="small"
|
|
type="primary"
|
|
class="common-button-primary"
|
|
@click="handleConfirm">确 定
|
|
</el-button>
|
|
<el-button size="small"
|
|
class="common-button-default"
|
|
@click="handleCancel">取 消
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</el-dialog>
|
|
<!-- 非弹窗模式使用 -->
|
|
<el-col :span="span" v-if="!dialogModel">
|
|
<el-form-item
|
|
:label="config.attrName"
|
|
:prop="config.attrField"
|
|
:label-width="labelWidth"
|
|
class="add-form-item expand-form-item"
|
|
:class="{'form-item-disabled': disabled}"
|
|
>
|
|
<el-input
|
|
v-model="checkedName"
|
|
:placeholder="'请选择' + config.attrName"
|
|
readonly
|
|
:disabled="disabled"
|
|
:id="config.attrField"
|
|
@click.native="handleChooseByDialog"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
name: 'OrgTable',
|
|
mixins: [],
|
|
props: {
|
|
iscode:{
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isOrg: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '组织机构'
|
|
},
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 弹窗模式选取
|
|
dialogModel: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
config: {
|
|
type: Object
|
|
},
|
|
value: {
|
|
required: false
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 栅格比例
|
|
span: {
|
|
type: Number,
|
|
default: 24
|
|
},
|
|
// 原数据对象
|
|
dataModel: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
labelWidth: {
|
|
type: String,
|
|
default: '150px'
|
|
},
|
|
maxSelected: {
|
|
type: Number
|
|
},
|
|
maxSelectedTips: {
|
|
type: String
|
|
},
|
|
// 不可选人员
|
|
excludeUser: {
|
|
type: [Array, String]
|
|
},
|
|
defaultCheck: {
|
|
type: Object
|
|
},
|
|
deptZNodes: {
|
|
type: Array
|
|
},
|
|
orgId: {
|
|
type: String
|
|
},
|
|
roleName: {
|
|
type: String
|
|
},
|
|
searchVal: {
|
|
type: Object
|
|
},
|
|
workNumFlag: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
notUserId: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
idList: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
btnFlag: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 父组件url
|
|
pageUrl: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
// 任务处理
|
|
sarTask: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
pageId: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
// preset 审定人员审查人员的接口
|
|
preset: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// people 控制是审查还是审定
|
|
showTable: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 哪个流程的制修订
|
|
zy: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
roleList: [],
|
|
activeName: 'first',
|
|
menuTreeLoading: false,
|
|
zNodesTree: [],
|
|
checkIdList: [],
|
|
presets: false,
|
|
isVisible: false,
|
|
visibleOrgClearBtn: false,
|
|
searchForm: {
|
|
orgId: '',
|
|
longName: '',
|
|
USNAME: '',
|
|
uname: '',
|
|
roleName: '',
|
|
account: ''
|
|
},
|
|
tableData: [],
|
|
tableChecked: null,
|
|
tableDataSelectedList: [],
|
|
page: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
checkedList: [],
|
|
loading: {
|
|
searching: false,
|
|
loadData: false
|
|
},
|
|
orgZNodes: [],
|
|
// 选中节点id集合
|
|
checkedIdList: [],
|
|
// 非弹窗模式
|
|
treeCheckNode: [],
|
|
checkedName: '',
|
|
zNodesRole: [],
|
|
repeatFlag: false,
|
|
isShowOrg: true,
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
/** 获取选择体系的数据 进行赋值 */
|
|
handleEOCheck (checkedList) {
|
|
console.log(checkedList, 'pooooooo')
|
|
// checkedList.children.forEach(item=>{
|
|
// item.check
|
|
// })
|
|
this.EOCheckList = checkedList
|
|
},
|
|
treeClick (treeNode, className) {
|
|
// console.log(treeNode)
|
|
if (this.lawsTree == 0 && className.indexOf('ico_docu') < 0) {
|
|
this.$message.warning('请选择节点！')
|
|
this.EOCheckList = ''
|
|
return false
|
|
}
|
|
console.log(className, 'pppppiiiii')
|
|
this.EOCheckList = [treeNode]
|
|
},
|
|
|
|
handleClose () {
|
|
this.searchForm = {
|
|
orgId: '',
|
|
longName: '',
|
|
USNAME: '',
|
|
uname: '',
|
|
roleId: '',
|
|
roleName: ''
|
|
}
|
|
this.page = 1
|
|
this.checkedList = []
|
|
this.checkedIdList = []
|
|
this.$refs.orgTable.clearSelection()
|
|
},
|
|
|
|
handleCancel () {
|
|
this.isVisible = false
|
|
},
|
|
handleConfirm () {
|
|
if (this.dialogModel) {
|
|
if (this.maxSelected && this.maxSelected > -1 && this.checkedList.length > this.maxSelected) {
|
|
this.$message.warning(this.maxSelectedTips || `${this.title} 只能选择一个用户`)
|
|
this.isShowOrg = false
|
|
} else {
|
|
const checkedIdList = []
|
|
|
|
this.checkedList.map(chkItem => {
|
|
checkedIdList.push(chkItem.usid || chkItem.USID || chkItem.id)
|
|
console.log(chkItem.uname, chkItem)
|
|
if (chkItem.uname) {
|
|
chkItem.uname = chkItem.uname + '_' + chkItem.account
|
|
chkItem.USNAME = chkItem.USNAME + '_' + chkItem.account
|
|
chkItem.longName = chkItem.departmentName ? chkItem.departmentName : chkItem.longName
|
|
} else if (!chkItem.uname && chkItem.USNAME) {
|
|
chkItem.uname = chkItem.USNAME
|
|
chkItem.USNAME = chkItem.USNAME
|
|
}else{
|
|
chkItem.longName = chkItem.longName
|
|
}
|
|
})
|
|
this.$emit('confirm', this.checkedList, checkedIdList)
|
|
|
|
this.isVisible = false
|
|
}
|
|
} else {
|
|
switch (this.config.attrType) {
|
|
// 多选
|
|
case 'SEL_OPTS':
|
|
break
|
|
// 单选
|
|
default:
|
|
if (this.checkedList.length > 1) {
|
|
this.$message.warning(`${this.config.attrName} 只能选择一个用户`)
|
|
} else {
|
|
const dataItem = this.checkedList[0]
|
|
this.checkedName = dataItem.uname || dataItem.USNAME || dataItem.longName
|
|
const id = dataItem.id || dataItem.USID || dataItem.usid || dataItem.id
|
|
this.$emit('input', id)
|
|
this.$emit('on-checked', this.checkedName)
|
|
this.$emit('on-dept', dataItem.pOrgId, dataItem.pOrgName)
|
|
setTimeout(() => {
|
|
this.isVisible = false
|
|
}, 100)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
handlePageChange (page) {
|
|
this.page = page
|
|
this.getRoleAndUserByOrgIdPage()
|
|
},
|
|
|
|
handlePageSizeChange (pageSize) {
|
|
this.pageSize = pageSize
|
|
this.getRoleAndUserByOrgIdPage()
|
|
},
|
|
|
|
handleSearch () {
|
|
this.page = 1
|
|
this.loading.searching = true
|
|
this.getRoleAndUserByOrgIdPage()
|
|
},
|
|
|
|
handleReset () {
|
|
this.page = 1
|
|
this.searchForm = {
|
|
orgId: '',
|
|
longName: '',
|
|
USNAME: '',
|
|
uname: '',
|
|
account: '',
|
|
roleName: ''
|
|
}
|
|
this.getRoleAndUserByOrgIdPage()
|
|
},
|
|
|
|
handleSearchOrgChecked (treeId, treeNode) {
|
|
this.searchForm.orgId = treeNode.id
|
|
this.searchForm.longName = treeNode.oldname || treeNode.name
|
|
$('#orgInput').click()
|
|
},
|
|
|
|
/**
|
|
* @description: 获取组织机构
|
|
* @author: chenxiaoxi
|
|
* @time: 2021-03-21 14:40:59
|
|
*/
|
|
getOrg () {
|
|
this.$http.get('sys/org/getTree', {}, { _this: this },
|
|
res => {
|
|
if (res.ok) {
|
|
res.data.map(item => {
|
|
item.name = item.longName
|
|
// item.icon = 'static/images/dept.png'
|
|
})
|
|
this.orgZNodes = res.data
|
|
}
|
|
}, e => {
|
|
})
|
|
},
|
|
|
|
/**
|
|
* @description: 分页查询用户
|
|
* @author: chenxiaoxi
|
|
* @time: 2021-03-21 17:08:06
|
|
*/
|
|
getRoleAndUserByOrgIdPage (types) {
|
|
console.log(types, 'types')
|
|
console.log(this.preset, 'types')
|
|
if (!types) {
|
|
this.presets = this.preset
|
|
}
|
|
|
|
this.loading.loadData = true
|
|
if (this.orgId) {
|
|
if (this.searchForm.orgId === '') {
|
|
this.searchForm.orgId = this.orgId
|
|
}
|
|
}
|
|
const param = {
|
|
page: this.page,
|
|
pageSize: this.pageSize,
|
|
...this.searchForm
|
|
}
|
|
// let this.notUserId.length > 0 ? this.notUserId.toString() : null
|
|
// getRoleAndUserByOrgIdPage(
|
|
if(this.isOrg ||this.iscode){
|
|
this.$api.org.sysOrgList(param).then((res) => {
|
|
this.loading.loadData = false
|
|
this.loading.searching = false
|
|
if (res.ok) {
|
|
this.total = res.data.total
|
|
this.tableData = res.data.records
|
|
const checkedRow = []
|
|
this.tableData.map(dataItem => {
|
|
if(this.isOrg){
|
|
const id = dataItem.usid || dataItem.USID || dataItem.orgId || dataItem.id
|
|
if (this.checkedIdList.includes(id)) {
|
|
checkedRow.push(dataItem)
|
|
}
|
|
}else{
|
|
const id = dataItem.departmentCode
|
|
if (this.checkedIdList.includes(id)) {
|
|
checkedRow.push(dataItem)
|
|
}
|
|
}
|
|
|
|
})
|
|
this.checkedRow(checkedRow)
|
|
}
|
|
})
|
|
}else{
|
|
this.$api.user.sysUserList(param).then((res) => {
|
|
this.loading.loadData = false
|
|
this.loading.searching = false
|
|
if (res.ok) {
|
|
this.total = res.data.total
|
|
this.tableData = res.data.records
|
|
const checkedRow = []
|
|
this.tableData.map(dataItem => {
|
|
const id = dataItem.usid || dataItem.USID || dataItem.orgId || dataItem.id
|
|
if (this.checkedIdList.includes(id)) {
|
|
checkedRow.push(dataItem)
|
|
}
|
|
})
|
|
this.checkedRow(checkedRow)
|
|
}
|
|
})
|
|
|
|
}
|
|
},
|
|
|
|
// handleRowSelect(selection, row) {
|
|
// const id = row.USID || row.id
|
|
// // 当前行选中/取消选中,其他相同用户(角色不同)被选中/取消选中
|
|
// this.tableData.map(dataItem => {
|
|
// if (dataItem.USID === id || dataItem.id === id) {
|
|
// this.$refs['orgTable'].toggleRowSelection(dataItem, selection.includes(row))
|
|
// }
|
|
// })
|
|
// console.log(this.checkedList)
|
|
// },
|
|
radioChange (e) {
|
|
// console.log(e)
|
|
this.checkedIdList = []
|
|
this.checkedList = []
|
|
this.checkedIdList.push(e.USID)
|
|
this.checkedList.push(e)
|
|
},
|
|
selectionRow (selection, row) {
|
|
const selected = selection.length && selection.indexOf(row) !== -1 // 为true时选中，为 0 时（false）未选中
|
|
if (selected) {
|
|
selection.map(selItem => {
|
|
const id = selItem.USID || selItem.id
|
|
if (!this.checkedIdList.includes(id)) {
|
|
this.checkedIdList.push(id)
|
|
this.checkedList.push(row)
|
|
}
|
|
})
|
|
} else {
|
|
this.handleRemove(row, 'table')
|
|
}
|
|
},
|
|
selectionRowAll (selection) {
|
|
if (selection.length > 0) {
|
|
selection.map(selItem => {
|
|
const id = selItem.USID || selItem.id
|
|
if (!this.checkedIdList.includes(id)) {
|
|
this.checkedIdList.push(id)
|
|
this.checkedList.push(selItem)
|
|
}
|
|
})
|
|
} else {
|
|
this.tableData.map(selItem => {
|
|
this.handleRemove(selItem, 'table')
|
|
})
|
|
}
|
|
},
|
|
|
|
handleSelectionChange (selection) {
|
|
if (selection.length) {
|
|
selection.map(selItem => {
|
|
const id = selItem.usid || selItem.USID || selItem.orgId || selItem.id
|
|
// 如果exclude不含当前行
|
|
if (!this.excludeIdList.includes(id)) {
|
|
// 如果下面列表没有,就填到下面列表里
|
|
if (!this.checkedIdList.includes(id)) {
|
|
this.checkedList.push(selItem)
|
|
this.checkedIdList.push(id)
|
|
}
|
|
} else {
|
|
// 如果exclude含当前行,当前行置为未选中状态
|
|
// this.$message.warning('主起草人/其他起草人不能为同一个人')
|
|
// this.$nextTick(() => {
|
|
// this.$refs['orgTable'].toggleRowSelection(selItem, false)
|
|
// })
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
handleRemove (user, type) {
|
|
let delIndex = -1
|
|
if(this.isShowOrg){
|
|
|
|
this.checkedList.map((checkedItem, chkIndex) => {
|
|
if ( user.id === checkedItem.id ) {
|
|
delIndex = chkIndex
|
|
if (type !== 'table') {
|
|
this.checkedRow([checkedItem])
|
|
}
|
|
return false
|
|
}
|
|
})
|
|
}else{
|
|
this.checkedList.map((checkedItem, chkIndex) => {
|
|
if (user.USID === checkedItem.USID ) {
|
|
delIndex = chkIndex
|
|
if (type !== 'table') {
|
|
this.checkedRow([checkedItem])
|
|
}
|
|
return false
|
|
}
|
|
})
|
|
}
|
|
|
|
this.checkedList.splice(delIndex, 1)
|
|
this.checkedIdList.splice(delIndex, 1)
|
|
},
|
|
|
|
handleOrgDel () {
|
|
this.searchForm.orgId = ''
|
|
this.searchForm.longName = ''
|
|
},
|
|
|
|
/**
|
|
* @description: 设置选中状态
|
|
* @author: chenxiaoxi
|
|
* @time: 2021-03-22 10:06:03
|
|
*/
|
|
checkedRow (rows) {
|
|
this.$nextTick(() => {
|
|
if (rows.length) {
|
|
rows.forEach(row => {
|
|
/* 双重for循环，为了解决，第二次点击弹框得时候，删除已选择里面得人员，表格勾选没有取消问题 */
|
|
for (let i = 0; i < this.tableData.length; i++) {
|
|
if (this.tableData[i].USID == row.USID && !this.isOrg) {
|
|
// console.log(this.tableData[i], '666')
|
|
this.$refs.orgTable && this.$refs.orgTable.toggleRowSelection(this.tableData[i])
|
|
}else if (this.tableData[i].id == row.id && this.isOrg){
|
|
this.$refs.orgTable && this.$refs.orgTable.toggleRowSelection(this.tableData[i])
|
|
|
|
}else if (this.tableData[i].departmentCode == row.departmentCode && this.iscode){
|
|
this.$refs.orgTable && this.$refs.orgTable.toggleRowSelection(this.tableData[i])
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
this.$refs.orgTable && this.$refs.orgTable.clearSelection()
|
|
}
|
|
})
|
|
},
|
|
|
|
cellClassName ({ row, column, rowIndex, columnIndex }) {
|
|
if (columnIndex === 3) {
|
|
return 'tag-column'
|
|
}
|
|
},
|
|
|
|
isSelectable (row, index) {
|
|
return !this.excludeIdList.includes(row.USID)
|
|
},
|
|
|
|
handleChooseByDialog () {
|
|
if (!this.dialogModel) {
|
|
this.checkedName = this.config.valueName || ''
|
|
if (this.config.value) {
|
|
this.checkedList = [{
|
|
USID: this.config.value,
|
|
USNAME: this.config.valueName
|
|
}]
|
|
}
|
|
const idList = this.config.value === '' || !this.config.value ? [] : this.config.value.split(',')
|
|
this.checkedIdList = [...idList]
|
|
}
|
|
this.isVisible = true
|
|
this.getRoleAndUserByOrgIdPage()
|
|
},
|
|
|
|
handleMouseEnter () {
|
|
if (this.searchForm.longName !== '') {
|
|
this.visibleOrgClearBtn = true
|
|
}
|
|
},
|
|
|
|
handleMouseLeave () {
|
|
this.visibleOrgClearBtn = false
|
|
},
|
|
// 角色列表
|
|
getSysRole () {
|
|
this.$api.role.getSysRole().then(({ data }) => {
|
|
this.roleList = data
|
|
})
|
|
},
|
|
handleCleanChecked () {
|
|
this.$confirm('您是否确定移除全部已选中', '确定移除', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
confirmButtonClass: 'common-button-primary',
|
|
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.checkedList = []
|
|
this.checkedIdList = []
|
|
this.$refs.orgTable.clearSelection()
|
|
}).catch(e => {
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
configContent () {
|
|
return this.userInfo.configContent
|
|
},
|
|
|
|
placeholder () {
|
|
return !this.dialogModel && `请选择${this.config.attrName}`
|
|
},
|
|
showMessage () {
|
|
return !this.dialogModel && `${this.config.attrName}不能为空`
|
|
},
|
|
isRequired () {
|
|
return !this.dialogModel && !!this.config.isMust
|
|
},
|
|
isString (str) {
|
|
return (typeof str === 'string') && str.constructor === String
|
|
},
|
|
isFO () {
|
|
return !this.dialogModel && this.config.attrField === 'FO'
|
|
},
|
|
ZRBM () {
|
|
return this.dataModel.ZRBM || ''
|
|
},
|
|
showTitle () {
|
|
return this.dialogModel ? this.title : this.config.attrName
|
|
},
|
|
excludeIdList () {
|
|
return this.excludeUser && this.excludeUser !== '' ? (this.excludeUser instanceof Array ? this.excludeUser : this.excludeUser.split(',')) : []
|
|
},
|
|
...mapGetters(['userInfo'])
|
|
|
|
},
|
|
watch: {
|
|
visible (val) {
|
|
this.isVisible = val
|
|
this.tableChecked = null
|
|
if (this.maxSelected === 1) {
|
|
this.isShowOrg = false
|
|
this.activeName = 'first'
|
|
} else {
|
|
this.isShowOrg = true
|
|
}
|
|
if (val) {
|
|
if (this.config.value && this.config.value !== '') {
|
|
const idList = this.config.value instanceof Array ? this.config.value : (this.config.value === '' ? [] : this.config.value.split(','))
|
|
const nameList = this.config.valueName instanceof Array ? this.config.valueName.split(',') : (this.config.valueName === '' ? [] : this.config.valueName.split(','))
|
|
this.checkedIdList = idList
|
|
const checkedList = []
|
|
if(this.isOrg){
|
|
idList.map((id, index) => {
|
|
checkedList.push({
|
|
id:id,
|
|
longName:nameList[index]
|
|
})
|
|
})
|
|
}else if(this.isOrg){
|
|
idList.map((id, index) => {
|
|
checkedList.push({
|
|
departmentCode:id
|
|
|
|
})
|
|
})
|
|
}
|
|
else{
|
|
idList.map((id, index) => {
|
|
checkedList.push({
|
|
USID: id,
|
|
USNAME: nameList[index],
|
|
})
|
|
})
|
|
}
|
|
if (this.maxSelected == 1) {
|
|
//
|
|
this.tableChecked = this.config.value
|
|
this.isShowOrg = false
|
|
}
|
|
// console.log(checkedList, 'checkedList', 'idListDepartment===', idListDepartment, 'nameListDepartment===', nameListDepartment)
|
|
this.checkedList = checkedList
|
|
}
|
|
if (this.searchVal && this.searchVal.type == 'qcrbm') {
|
|
this.searchForm.orgId = this.searchVal.OrgId
|
|
this.searchForm.longName = this.searchVal.longName
|
|
} else {
|
|
this.searchForm.orgId = ''
|
|
this.searchForm.longName = ''
|
|
}
|
|
this.getRoleAndUserByOrgIdPage()
|
|
}
|
|
},
|
|
isVisible (val) {
|
|
this.$emit('update:visible', val)
|
|
},
|
|
value (newVal, oldVal) {
|
|
this.checkedName = newVal !== '' ? this.checkedName : ''
|
|
},
|
|
deptZNodes: {
|
|
handler (val) {
|
|
this.orgZNodes = val
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
this.isVisible = this.visible
|
|
this.getSysRole()
|
|
if (!this.dialogModel) {
|
|
this.checkedName = this.config.valueName || ''
|
|
if (this.config.value !== '') {
|
|
if(this.isOrg){
|
|
this.checkedList = [{
|
|
id: this.config.value,
|
|
longName: this.config.valueName
|
|
}]
|
|
}else if(this.iscode){
|
|
this.checkedList = [{
|
|
departmentCode: this.config.value,
|
|
// longName: this.config.valueName
|
|
}]
|
|
}else{
|
|
this.checkedList = [{
|
|
USID: this.config.value,
|
|
USNAME: this.config.valueName
|
|
}]
|
|
}
|
|
|
|
const idList = this.config.value === '' ? [] : this.config.value.split(',')
|
|
this.checkedIdList = [...idList]
|
|
}
|
|
} else {
|
|
const idList = this.config.value instanceof Array ? this.config.value : (this.config.value === '' ? [] : this.config.value.split(','))
|
|
const nameList = this.config.valueName instanceof Array ? this.config.valueName.split(',') : (this.config.valueName === '' ? [] : this.config.valueName.split(','))
|
|
this.checkedIdList = idList
|
|
const checkedList = []
|
|
if(this.isOrg){
|
|
idList.map((id, index) => {
|
|
checkedList.push({
|
|
id: id,
|
|
longName: nameList[index]
|
|
})
|
|
})
|
|
}else if(this.isOrg){
|
|
idList.map((id, index) => {
|
|
checkedList.push({
|
|
departmentCode: id,
|
|
// longName: nameList[index]
|
|
})
|
|
})
|
|
}else {
|
|
idList.map((id, index) => {
|
|
checkedList.push({
|
|
USID: id,
|
|
USNAME: nameList[index]
|
|
})
|
|
})
|
|
}
|
|
this.checkedList = checkedList
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.org-table {
|
|
::v-deep .el-form-item--mini .el-form-item__content{
|
|
line-height: 40px;
|
|
}
|
|
::v-deep .el-dialog__header {
|
|
padding: 0 20px;
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
::v-deep .el-dialog__body {
|
|
padding: 15px 20px 20px 20px;
|
|
}
|
|
|
|
.checked-user-list {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: flex-start;
|
|
|
|
.el-tag {
|
|
margin: 0 10px 10px 0;
|
|
}
|
|
|
|
.el-button--mini {
|
|
padding: 0 15px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep .el-popover__reference-wrapper {
|
|
.el-input__suffix {
|
|
padding-right: 5px;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep .tag-column {
|
|
.cell {
|
|
padding: 5px 10px;
|
|
overflow: hidden;
|
|
text-overflow: clip;
|
|
|
|
.tag-wrap {
|
|
.el-tag {
|
|
height: auto;
|
|
white-space: normal;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.dialog-footer{
|
|
margin-top: 20px;
|
|
::v-deep .el-button {
|
|
width: 80px;
|
|
height: 36px;
|
|
padding: 0;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</style>
|