|
|
@@ -1,29 +1,22 @@
|
|
|
<template>
|
|
|
- <!-- -----------------------------------
|
|
|
- 此页面是 点击 “选择用户的 modal 弹框”
|
|
|
- 及 传参
|
|
|
- ---------------------------------------->
|
|
|
<a-modal
|
|
|
:width="modalWidth"
|
|
|
:visible="visible"
|
|
|
:title="title"
|
|
|
- @ok="handleSubmit"
|
|
|
- @cancel="close"
|
|
|
- cancelText="关闭"
|
|
|
+ :footer="null"
|
|
|
+ @cancel="handleCancel"
|
|
|
style="margin-top: -70px"
|
|
|
wrapClassName="ant-modal-cust-warp"
|
|
|
>
|
|
|
<!-- 树形控件 -->
|
|
|
<div class="tree">
|
|
|
<a-card :bordered="true" title="请选择分支">
|
|
|
- <!--组织机构-->
|
|
|
<a-directory-tree
|
|
|
selectable
|
|
|
:selectedKeys="selectedDepIds"
|
|
|
:checkStrictly="true"
|
|
|
:dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
|
|
|
:treeData="departTree"
|
|
|
- :expandAction="false"
|
|
|
:expandedKeys.sync="expandedKeys"
|
|
|
@select="onDepSelect"
|
|
|
/>
|
|
|
@@ -31,37 +24,51 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 搜索 -->
|
|
|
- <div class="line" style="margin:30px 0; padding:13px 0 0 10px;border:1px solid #e8e8e8;">
|
|
|
- 用户账号:
|
|
|
+ <div class="line">
|
|
|
+ 搜索：
|
|
|
<a-input-search
|
|
|
- :style="{ width: '150px', marginBottom: '15px' }"
|
|
|
+ :style="{ width: '160px', marginBottom: '15px' }"
|
|
|
placeholder="请输入账号"
|
|
|
v-model="queryParam.username"
|
|
|
- @search="onSearch"
|
|
|
>
|
|
|
</a-input-search>
|
|
|
|
|
|
- <!-- 重置按钮内 -->
|
|
|
- <a-button @click="searchReset(1)" style="margin-left: 30px" icon="redo">重置</a-button>
|
|
|
+ <a @click.stop.prevent="onSearch" class="search">查询</a>
|
|
|
+ <a-divider type="vertical" style="background:blue;" />
|
|
|
+ <a @click.stop.prevent="searchReset(1)" class="reset">重置</a>
|
|
|
</div>
|
|
|
|
|
|
- <!--用户列表-->
|
|
|
- <div class="cardList">
|
|
|
- <div
|
|
|
- class="cardTask"
|
|
|
- v-for="(item, index) in dataSource"
|
|
|
- :key="item.id"
|
|
|
- style="marginBottom:10px;"
|
|
|
- :class="{ on: index % 2 == 0, off: index % 2 != 0 }"
|
|
|
- >
|
|
|
- <a-checkbox @change="select(item)" class="" />
|
|
|
+ <!-- 勾选用户区域 -->
|
|
|
+ <div class="selectContain">
|
|
|
+ <div class="userHead">
|
|
|
+ 请勾选用户
|
|
|
+ </div>
|
|
|
+ <!-- 用户 按钮 -->
|
|
|
+ <div class="submit fr">
|
|
|
+ <button @click="close" class="ant-btn" style="marginRight:10px;">取消</button>
|
|
|
+ <button @click="handleSubmit" class="ant-btn" style="margin:10px 10px 0 0 ;">确定</button>
|
|
|
+ </div>
|
|
|
|
|
|
- <span v-if="item.username" class="">
|
|
|
- 用户账号：<span class="black">{{ item.username }}</span>
|
|
|
- </span>
|
|
|
- <span v-if="item.realname" class="fr">
|
|
|
- 用户姓名：<span class="black">{{ item.realname }}</span>
|
|
|
- </span>
|
|
|
+ <!--用户列表-->
|
|
|
+ <div class="cardList">
|
|
|
+ <a-radio-group style="width:100%;marginTop:20px;">
|
|
|
+ <div
|
|
|
+ class="cardTask"
|
|
|
+ v-for="(item, index) in dataSource"
|
|
|
+ :key="item.id"
|
|
|
+ style="marginBottom:10px;"
|
|
|
+ :class="{ on: index % 2 == 0, off: index % 2 != 0 }"
|
|
|
+ >
|
|
|
+ <a-radio :value="index" @change="select(item)" />
|
|
|
+
|
|
|
+ <span v-if="item.username">
|
|
|
+ 用户账号：<span class="black">{{ item.username }}</span>
|
|
|
+ </span>
|
|
|
+ <span v-if="item.realname" class="fr">
|
|
|
+ 用户姓名：<span class="black">{{ item.realname }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </a-radio-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a-modal>
|
|
|
@@ -72,279 +79,288 @@ import { filterObj } from '@/utils/util'
|
|
|
import { queryDepartTreeList, getUserList, queryUserByDepId } from '@/api/api'
|
|
|
|
|
|
export default {
|
|
|
- name: 'SelectModal',
|
|
|
- components: {},
|
|
|
- data () {
|
|
|
- return {
|
|
|
- queryParam: {
|
|
|
- username: ''
|
|
|
- },
|
|
|
- columns: [
|
|
|
- {
|
|
|
- title: '用户账号',
|
|
|
- align: 'center',
|
|
|
- dataIndex: 'username'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '用户姓名',
|
|
|
- align: 'center',
|
|
|
- dataIndex: 'realname'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '性别',
|
|
|
- align: 'center',
|
|
|
- dataIndex: 'sex',
|
|
|
- customRender: function (text) {
|
|
|
- if (text === 1) {
|
|
|
- return '男'
|
|
|
- } else if (text === 2) {
|
|
|
- return '女'
|
|
|
- } else {
|
|
|
- return text
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '手机',
|
|
|
- align: 'center',
|
|
|
- dataIndex: 'phone'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '部门',
|
|
|
- align: 'center',
|
|
|
- dataIndex: 'orgCode'
|
|
|
- }
|
|
|
- ],
|
|
|
- scrollTrigger: {},
|
|
|
- dataSource: [],
|
|
|
- selectedRowKeys: [],
|
|
|
- selectUserRows: [],
|
|
|
- selectUserIds: [],
|
|
|
- title: '根据部门选择用户',
|
|
|
- ipagination: {
|
|
|
- current: 1,
|
|
|
- pageSize: 1000,
|
|
|
- pageSizeOptions: ['10', '20', '30'],
|
|
|
- showTotal: (total, range) => {
|
|
|
- return range[0] + '-' + range[1] + ' 共' + total + '条'
|
|
|
- },
|
|
|
- showQuickJumper: true,
|
|
|
- showSizeChanger: true,
|
|
|
- total: 0
|
|
|
- },
|
|
|
- isorter: {
|
|
|
- column: 'createTime',
|
|
|
- order: 'desc'
|
|
|
- },
|
|
|
- selectedDepIds: [],
|
|
|
- departTree: [],
|
|
|
- visible: false,
|
|
|
- form: this.$form.createForm(this),
|
|
|
- loading: false,
|
|
|
- expandedKeys: []
|
|
|
- }
|
|
|
- },
|
|
|
- props: ['modalWidth', 'multi', 'userIds', 'customReturnField'],
|
|
|
- computed: {
|
|
|
- // 计算属性的 getter
|
|
|
- getType: function () {
|
|
|
- return this.multi == true ? 'checkbox' : 'radio'
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- userIds: {
|
|
|
- immediate: true,
|
|
|
- handler () {
|
|
|
- this.initUserNames()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- created () {
|
|
|
- // 该方法触发屏幕自适应
|
|
|
- this.resetScreenSize()
|
|
|
- this.loadData()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- select (item) {
|
|
|
- console.log(item)
|
|
|
- this.selectUserRows = []
|
|
|
- this.selectUserRows.push(item)
|
|
|
- this.selectUserIds = []
|
|
|
- this.selectUserIds = item.username
|
|
|
+ name: 'SelectModal',
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ queryParam: {
|
|
|
+ username: ''
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '用户账号',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'username'
|
|
|
},
|
|
|
- initUserNames () {
|
|
|
- if (this.userIds) {
|
|
|
- // 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
|
|
|
- let values = this.userIds.split(',') + ','
|
|
|
- var param = {
|
|
|
- // username: values,
|
|
|
- pageNo: 1,
|
|
|
- pageSize: values.length
|
|
|
- }
|
|
|
- param[this.customReturnField] = values
|
|
|
- console.log('回显用户参数', param)
|
|
|
- getUserList(param).then(res => {
|
|
|
- if (res.success) {
|
|
|
- let selectedRowKeys = []
|
|
|
- let realNames = []
|
|
|
- res.result.records.forEach(user => {
|
|
|
- realNames.push(user['realname'])
|
|
|
- selectedRowKeys.push(user['id'])
|
|
|
- })
|
|
|
- this.selectedRowKeys = selectedRowKeys
|
|
|
- console.log('回显用户', selectedRowKeys)
|
|
|
- this.$emit('initComp', realNames.join(','))
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- // JSelectUserByDep组件bug issues/I16634
|
|
|
- this.$emit('initComp', '')
|
|
|
- }
|
|
|
+ {
|
|
|
+ title: '用户姓名',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'realname'
|
|
|
},
|
|
|
- async loadData (arg) {
|
|
|
- if (arg === 1) {
|
|
|
- this.ipagination.current = 1
|
|
|
- }
|
|
|
- if (this.selectedDepIds && this.selectedDepIds.length > 0) {
|
|
|
- await this.initQueryUserByDepId(this.selectedDepIds)
|
|
|
+ {
|
|
|
+ title: '性别',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'sex',
|
|
|
+ customRender: function(text) {
|
|
|
+ if (text === 1) {
|
|
|
+ return '男'
|
|
|
+ } else if (text === 2) {
|
|
|
+ return '女'
|
|
|
} else {
|
|
|
- this.loading = true
|
|
|
- let params = this.getQueryParams() // 查询条件
|
|
|
- if (params.username) params.username = `*${params.username}*`
|
|
|
- await getUserList(params)
|
|
|
- .then(res => {
|
|
|
- if (res.success) {
|
|
|
- this.dataSource = res.result.records
|
|
|
- console.log(this.dataSource)
|
|
|
- console.log('这才是table内容')
|
|
|
- this.ipagination.total = res.result.total
|
|
|
- }
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
+ return text
|
|
|
}
|
|
|
+ }
|
|
|
},
|
|
|
- // 触发屏幕自适应
|
|
|
- resetScreenSize () {
|
|
|
- let screenWidth = document.body.clientWidth
|
|
|
- if (screenWidth < 500) {
|
|
|
- this.scrollTrigger = { x: 800 }
|
|
|
- } else {
|
|
|
- this.scrollTrigger = {}
|
|
|
- }
|
|
|
- },
|
|
|
- showModal () {
|
|
|
- this.visible = true
|
|
|
- this.queryDepartTree()
|
|
|
- this.initUserNames()
|
|
|
- this.loadData()
|
|
|
- this.form.resetFields()
|
|
|
+ {
|
|
|
+ title: '手机',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'phone'
|
|
|
},
|
|
|
- getQueryParams () {
|
|
|
- let param = Object.assign({}, this.queryParam, this.isorter)
|
|
|
- param.field = this.getQueryField()
|
|
|
- param.pageNo = this.ipagination.current
|
|
|
- param.pageSize = this.ipagination.pageSize
|
|
|
- return filterObj(param)
|
|
|
- },
|
|
|
- getQueryField () {
|
|
|
- let str = 'id,'
|
|
|
- for (let a = 0; a < this.columns.length; a++) {
|
|
|
- str += ',' + this.columns[a].dataIndex
|
|
|
- }
|
|
|
- return str
|
|
|
- },
|
|
|
- searchReset (num) {
|
|
|
- let that = this
|
|
|
- if (num !== 0) {
|
|
|
- that.queryParam = {}
|
|
|
- that.loadData(1)
|
|
|
- }
|
|
|
- that.selectedRowKeys = []
|
|
|
- that.selectUserIds = []
|
|
|
- that.selectedDepIds = []
|
|
|
- },
|
|
|
- close () {
|
|
|
- this.searchReset(0)
|
|
|
- this.visible = false
|
|
|
- },
|
|
|
- handleTableChange (pagination, filters, sorter) {
|
|
|
- // TODO 筛选
|
|
|
- if (Object.keys(sorter).length > 0) {
|
|
|
- this.isorter.column = sorter.field
|
|
|
- this.isorter.order = sorter.order === 'ascend' ? 'asc' : 'desc'
|
|
|
- }
|
|
|
- this.ipagination = pagination
|
|
|
- this.loadData()
|
|
|
- },
|
|
|
- handleSubmit () {
|
|
|
- let that = this
|
|
|
- // this.getSelectUserRows()
|
|
|
- that.$emit('ok', that.selectUserRows, that.selectUserIds)
|
|
|
- that.searchReset(0)
|
|
|
- that.close()
|
|
|
- },
|
|
|
- // 获取选择用户信息
|
|
|
- getSelectUserRows (rowId) {
|
|
|
- let dataSource = this.dataSource
|
|
|
- let userIds = ''
|
|
|
- this.selectUserRows = []
|
|
|
- for (let i = 0, len = dataSource.length; i < len; i++) {
|
|
|
- if (this.selectedRowKeys.includes(dataSource[i].id)) {
|
|
|
- this.selectUserRows.push(dataSource[i])
|
|
|
- // userIds = userIds + "," + dataSource[i].username
|
|
|
- userIds = userIds + ',' + dataSource[i][this.customReturnField]
|
|
|
- }
|
|
|
- }
|
|
|
- this.selectUserIds = userIds.substring(1)
|
|
|
- },
|
|
|
- // 点击树节点,筛选出对应的用户
|
|
|
- onDepSelect (selectedDepIds) {
|
|
|
- if (selectedDepIds[0] != null) {
|
|
|
- this.initQueryUserByDepId(selectedDepIds) // 调用方法根据选选择的id查询用户信息
|
|
|
- if (this.selectedDepIds[0] !== selectedDepIds[0]) {
|
|
|
- this.selectedDepIds = [selectedDepIds[0]]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- onSelectChange (selectedRowKeys, selectionRows) {
|
|
|
- this.selectedRowKeys = selectedRowKeys
|
|
|
- this.selectionRows = selectionRows
|
|
|
- },
|
|
|
- onSearch () {
|
|
|
- this.loadData(1)
|
|
|
- },
|
|
|
- // 根据选择的id来查询用户信息
|
|
|
- initQueryUserByDepId (selectedDepIds) {
|
|
|
- this.loading = true
|
|
|
- let params = this.getQueryParams() // 查询条件
|
|
|
- let username = params.username || ''
|
|
|
- return queryUserByDepId({ id: selectedDepIds.toString(), username: username })
|
|
|
- .then(res => {
|
|
|
- if (res.success) {
|
|
|
- this.dataSource = res.result
|
|
|
- this.ipagination.total = res.result.length
|
|
|
- }
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
+ {
|
|
|
+ title: '部门',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'orgCode'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ scrollTrigger: {},
|
|
|
+ dataSource: [],
|
|
|
+ selectedRowKeys: [],
|
|
|
+ selectUserRows: [],
|
|
|
+ selectUserIds: [],
|
|
|
+ title: '根据部门选择用户',
|
|
|
+ ipagination: {
|
|
|
+ current: 1,
|
|
|
+ pageSize: 1000,
|
|
|
+ pageSizeOptions: ['10', '20', '30'],
|
|
|
+ showTotal: (total, range) => {
|
|
|
+ return range[0] + '-' + range[1] + ' 共' + total + '条'
|
|
|
},
|
|
|
- queryDepartTree () {
|
|
|
- queryDepartTreeList().then(res => {
|
|
|
- if (res.success) {
|
|
|
- this.departTree = res.result
|
|
|
- // console.log('我想看到这')
|
|
|
- // 默认展开父节点
|
|
|
- this.expandedKeys = this.departTree.map(item => item.id)
|
|
|
- }
|
|
|
+ showQuickJumper: true,
|
|
|
+ showSizeChanger: true,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ isorter: {
|
|
|
+ column: 'createTime',
|
|
|
+ order: 'desc'
|
|
|
+ },
|
|
|
+ selectedDepIds: [],
|
|
|
+ departTree: [],
|
|
|
+ visible: false,
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ loading: false,
|
|
|
+ expandedKeys: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: ['modalWidth', 'multi', 'userIds', 'customReturnField'],
|
|
|
+ computed: {
|
|
|
+ // 计算属性的 getter
|
|
|
+ getType: function() {
|
|
|
+ return this.multi == true ? 'checkbox' : 'radio'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ userIds: {
|
|
|
+ immediate: true,
|
|
|
+ handler() {
|
|
|
+ this.initUserNames()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 该方法触发屏幕自适应
|
|
|
+ this.resetScreenSize()
|
|
|
+ this.loadData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ select(item) {
|
|
|
+ console.log(item)
|
|
|
+ this.selectUserRows = []
|
|
|
+ this.selectUserRows.push(item)
|
|
|
+ this.selectUserIds = []
|
|
|
+ this.selectUserIds = item.username
|
|
|
+ },
|
|
|
+ initUserNames() {
|
|
|
+ if (this.userIds) {
|
|
|
+ // 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
|
|
|
+ let values = this.userIds.split(',') + ','
|
|
|
+ var param = {
|
|
|
+ // username: values,
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: values.length
|
|
|
+ }
|
|
|
+ param[this.customReturnField] = values
|
|
|
+ console.log('回显用户参数', param)
|
|
|
+ getUserList(param).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ let selectedRowKeys = []
|
|
|
+ let realNames = []
|
|
|
+ res.result.records.forEach(user => {
|
|
|
+ realNames.push(user['realname'])
|
|
|
+ selectedRowKeys.push(user['id'])
|
|
|
})
|
|
|
- },
|
|
|
- modalFormOk () {
|
|
|
- this.loadData()
|
|
|
+ this.selectedRowKeys = selectedRowKeys
|
|
|
+ console.log('回显用户', selectedRowKeys)
|
|
|
+ this.$emit('initComp', realNames.join(','))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ // JSelectUserByDep组件bug issues/I16634
|
|
|
+ this.$emit('initComp', '')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async loadData(arg) {
|
|
|
+ if (arg === 1) {
|
|
|
+ this.ipagination.current = 1
|
|
|
+ }
|
|
|
+ if (this.selectedDepIds && this.selectedDepIds.length > 0) {
|
|
|
+ await this.initQueryUserByDepId(this.selectedDepIds)
|
|
|
+ } else {
|
|
|
+ this.loading = true
|
|
|
+ let params = this.getQueryParams() // 查询条件
|
|
|
+ if (params.username) params.username = `*${params.username}*`
|
|
|
+ await getUserList(params)
|
|
|
+ .then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.dataSource = res.result.records
|
|
|
+ console.log(this.dataSource)
|
|
|
+ console.log('这是原本table的内容转化')
|
|
|
+ this.ipagination.total = res.result.total
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 触发屏幕自适应
|
|
|
+ resetScreenSize() {
|
|
|
+ let screenWidth = document.body.clientWidth
|
|
|
+ if (screenWidth < 500) {
|
|
|
+ this.scrollTrigger = { x: 800 }
|
|
|
+ } else {
|
|
|
+ this.scrollTrigger = {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showModal() {
|
|
|
+ this.visible = true
|
|
|
+ this.queryDepartTree()
|
|
|
+ this.initUserNames()
|
|
|
+ this.loadData()
|
|
|
+ this.form.resetFields()
|
|
|
+ },
|
|
|
+ // 点击大弹框右上角关闭
|
|
|
+ handleCancel(e) {
|
|
|
+ console.log('Clicked cancel button')
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ getQueryParams() {
|
|
|
+ let param = Object.assign({}, this.queryParam, this.isorter)
|
|
|
+ param.field = this.getQueryField()
|
|
|
+ param.pageNo = this.ipagination.current
|
|
|
+ param.pageSize = this.ipagination.pageSize
|
|
|
+ return filterObj(param)
|
|
|
+ },
|
|
|
+ getQueryField() {
|
|
|
+ let str = 'id,'
|
|
|
+ for (let a = 0; a < this.columns.length; a++) {
|
|
|
+ str += ',' + this.columns[a].dataIndex
|
|
|
+ }
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ searchReset(num) {
|
|
|
+ let that = this
|
|
|
+ if (num !== 0) {
|
|
|
+ that.queryParam = {}
|
|
|
+ that.loadData(1)
|
|
|
+ }
|
|
|
+ that.selectedRowKeys = []
|
|
|
+ that.selectUserIds = []
|
|
|
+ that.selectedDepIds = []
|
|
|
+ },
|
|
|
+
|
|
|
+ // 用户列表的取消
|
|
|
+ close() {
|
|
|
+ this.searchReset(0)
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ // 用户列表的提交
|
|
|
+ handleSubmit() {
|
|
|
+ let that = this
|
|
|
+ // this.getSelectUserRows()
|
|
|
+ that.$emit('ok', that.selectUserRows, that.selectUserIds)
|
|
|
+ that.searchReset(0)
|
|
|
+ that.close()
|
|
|
+ },
|
|
|
+ // handleTableChange(pagination, filters, sorter) {
|
|
|
+ // // TODO 筛选
|
|
|
+ // if (Object.keys(sorter).length > 0) {
|
|
|
+ // this.isorter.column = sorter.field
|
|
|
+ // this.isorter.order = sorter.order === 'ascend' ? 'asc' : 'desc'
|
|
|
+ // }
|
|
|
+ // this.ipagination = pagination
|
|
|
+ // this.loadData()
|
|
|
+ // },
|
|
|
+
|
|
|
+ // 获取选择用户信息
|
|
|
+ getSelectUserRows(rowId) {
|
|
|
+ let dataSource = this.dataSource
|
|
|
+ let userIds = ''
|
|
|
+ this.selectUserRows = []
|
|
|
+ for (let i = 0, len = dataSource.length; i < len; i++) {
|
|
|
+ if (this.selectedRowKeys.includes(dataSource[i].id)) {
|
|
|
+ this.selectUserRows.push(dataSource[i])
|
|
|
+ // userIds = userIds + "," + dataSource[i].username
|
|
|
+ userIds = userIds + ',' + dataSource[i][this.customReturnField]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.selectUserIds = userIds.substring(1)
|
|
|
+ },
|
|
|
+ // 点击树节点,筛选出对应的用户
|
|
|
+ onDepSelect(selectedDepIds) {
|
|
|
+ if (selectedDepIds[0] != null) {
|
|
|
+ this.initQueryUserByDepId(selectedDepIds) // 调用方法根据选选择的id查询用户信息
|
|
|
+ if (this.selectedDepIds[0] !== selectedDepIds[0]) {
|
|
|
+ this.selectedDepIds = [selectedDepIds[0]]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSelectChange(selectedRowKeys, selectionRows) {
|
|
|
+ this.selectedRowKeys = selectedRowKeys
|
|
|
+ this.selectionRows = selectionRows
|
|
|
+ },
|
|
|
+ onSearch() {
|
|
|
+ this.loadData(1)
|
|
|
+ },
|
|
|
+ // 根据选择的id来查询用户信息
|
|
|
+ initQueryUserByDepId(selectedDepIds) {
|
|
|
+ this.loading = true
|
|
|
+ let params = this.getQueryParams() // 查询条件
|
|
|
+ let username = params.username || ''
|
|
|
+ return queryUserByDepId({ id: selectedDepIds.toString(), username: username })
|
|
|
+ .then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.dataSource = res.result
|
|
|
+ this.ipagination.total = res.result.length
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ queryDepartTree() {
|
|
|
+ queryDepartTreeList().then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.departTree = res.result
|
|
|
+ // console.log('我想看到这')
|
|
|
+ // 默认展开父节点
|
|
|
+ this.expandedKeys = this.departTree.map(item => item.id)
|
|
|
}
|
|
|
+ })
|
|
|
+ },
|
|
|
+ modalFormOk() {
|
|
|
+ this.loadData()
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -353,11 +369,6 @@ export default {
|
|
|
@import '~@assets/less/common.less';
|
|
|
</style>
|
|
|
<style lang="less" scoped>
|
|
|
-.ant-table-tbody .ant-table-row td {
|
|
|
- padding-top: 10px;
|
|
|
- padding-bottom: 10px;
|
|
|
-}
|
|
|
-
|
|
|
#components-layout-demo-custom-trigger .trigger {
|
|
|
font-size: 18px;
|
|
|
line-height: 64px;
|
|
|
@@ -365,31 +376,73 @@ export default {
|
|
|
cursor: pointer;
|
|
|
transition: color 0.3s;
|
|
|
}
|
|
|
-.tree {
|
|
|
- background-color: pink;
|
|
|
-}
|
|
|
-/deep/.ant-modal-cust-warp {
|
|
|
- background-color: red;
|
|
|
-}
|
|
|
+
|
|
|
.black {
|
|
|
color: black;
|
|
|
}
|
|
|
-.on {
|
|
|
- background: #F0F8FF;
|
|
|
- border-radius: 10px;
|
|
|
+
|
|
|
+// 请选择分支
|
|
|
+/deep/.ant-card-head {
|
|
|
+ background-color: rgba(26, 133, 229, 0.5);
|
|
|
+ border-bottom-left-radius: 20px;
|
|
|
+ border-bottom-right-radius: 20px;
|
|
|
+ font-weight: 700;
|
|
|
}
|
|
|
-.off {
|
|
|
- background: rgba(210, 180, 140, 0.1);
|
|
|
- border-radius: 10px;
|
|
|
- border: none;
|
|
|
+
|
|
|
+/deep/.ant-card-body {
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+// 搜索
|
|
|
+.line {
|
|
|
+ margin: 30px 0;
|
|
|
+ padding: 20px 0 0 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ .search {
|
|
|
+ margin: 0 5px 0 20px;
|
|
|
+ border: none;
|
|
|
+ color: blue;
|
|
|
+ }
|
|
|
+ .reset {
|
|
|
+ border: none;
|
|
|
+ color: blue;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 用户确定按钮
|
|
|
+.submit {
|
|
|
+ .button {
|
|
|
+ border: none !important;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.cardTask {
|
|
|
- padding: 0;
|
|
|
- margin: 20px;
|
|
|
- // padding: 8px 0 0 10px 10px;
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
+//用户勾选区域
|
|
|
+.selectContain {
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ .userHead {
|
|
|
+ padding: 16px 0 16px 12px;
|
|
|
+ background-color: rgba(26, 133, 229, 0.5);
|
|
|
+ border-bottom-left-radius: 20px;
|
|
|
+ border-bottom-right-radius: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000000d9;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .cardList {
|
|
|
+ //每个任务
|
|
|
+ .cardTask {
|
|
|
+ padding: 6px;
|
|
|
+ }
|
|
|
+ .on {
|
|
|
+ background: rgba(47, 144, 231, 0.2);
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .off {
|
|
|
+ background: rgba(210, 180, 140, 0.2);
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
liangyan0105