java_project
/
hy-vue
4
0
Fork 0
Code Issues Pull Requests Activity
Browse Source

修改审核人选择问题显示部门

dev
caoyizhong 2 years ago
parent
db5964945e
commit
10f894483e
5 changed files with 676 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/components/jeecgbiz/modal/JSelectUserByDepModal.vue
  2. 195
      src/views/activiti/PSelectBizComponent.vue
  3. 464
      src/views/activiti/PSelectBizComponentModal.vue
  4. 10
      src/views/activiti/PSelectPosition.vue
  5. 13
      src/views/activiti/ProcessModelList.vue

4
src/components/jeecgbiz/modal/JSelectUserByDepModal.vue
Unescape View File

@ -183,9 +183,9 @@
}
if (this.selectedDepIds && this.selectedDepIds.length > 0) {
await this.initQueryUserByDepId(this.selectedDepIds)
console.log("这边1");
// console.log("这边1");
} else {
console.log("这边2");
// console.log("这边2");
this.loading = true
let params = this.getQueryParams()//查询条件
await getUserList(params).then((res) => {

195
src/views/activiti/PSelectBizComponent.vue
Unescape View File

@ -0,0 +1,195 @@
<template>
<a-row class="j-select-biz-component-box" type="flex" :gutter="8">
<a-col :class="{'full': !buttons}">
<slot name="left">
<a-select
mode="multiple"
:placeholder="placeholder"
v-model="selectValue"
:options="selectOptions"
allowClear
:disabled="disabled"
:open="selectOpen"
style="width: 100%;"
@dropdownVisibleChange="handleDropdownVisibleChange"
@click.native="visible=(buttons || disabled ?visible:true)"
/>
</slot>
</a-col>
<a-col v-if="buttons" class="right">
<a-button type="primary" icon="search" :disabled="disabled" @click="visible=true">{{selectButtonText}}</a-button>
</a-col>
<PSelectBizComponentModal
v-model="selectValue"
:visible.sync="visible"
v-bind="modalProps"
@options="handleOptions"
/>
</a-row>
</template>
<script>
import PSelectBizComponentModal from './PSelectBizComponentModal'
import { queryUserByDepId } from '@api/api'
export default {
name: 'PSelectBizComponent',
components: { PSelectBizComponentModal },
props: {
value: {
type: String,
default: ''
},
/** 是否返回 id，默认 false，返回 code */
returnId: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: '请选择'
},
disabled: {
type: Boolean,
default: false
},
// 是否支持多选，默认 true
multiple: {
type: Boolean,
default: true
},
// 是否显示按钮，默认 true
buttons: {
type: Boolean,
default: true
},
// 显示的 Key
displayKey: {
type: String,
default: null
},
// 返回的 key
returnKeys: {
type: Array,
default: () => ['id', 'id']
},
// 选择按钮文字
selectButtonText: {
type: String,
default: '选择'
},
},
data() {
return {
selectedDepIds: [],
departTree: [],
expandedKeys: [],
selectValue: [],
selectOptions: [],
dataSourceMap: {},
visible: false,
selectOpen: false,
}
},
computed: {
valueKey() {
return this.returnId ? this.returnKeys[0] : this.returnKeys[1]
},
modalProps() {
return Object.assign({
valueKey: this.valueKey,
multiple: this.multiple,
returnKeys: this.returnKeys,
displayKey: this.displayKey || this.valueKey
}, this.$attrs)
},
},
watch: {
value: {
immediate: true,
handler(val) {
if (val) {
this.selectValue = val.split(',')
} else {
this.selectValue = []
}
}
},
selectValue: {
deep: true,
handler(val) {
let rows = val.map(key => this.dataSourceMap[key])
let data = val.join(',')
if (data !== this.value) {
this.$emit('select', rows)
this.$emit('input', data)
this.$emit('change', data)
}
}
}
},
methods: {
// 点击树节点,筛选出对应的用户
onDepSelect(selectedDepIds) {
if (selectedDepIds[0] != null) {
this.initQueryUserByDepId(selectedDepIds); // 调用方法根据选选择的id查询用户信息
if (this.selectedDepIds[0] !== selectedDepIds[0]) {
this.selectedDepIds = [selectedDepIds[0]];
}
}
},
// 根据选择的id来查询用户信息
initQueryUserByDepId(selectedDepIds) {
this.loading = true
return queryUserByDepId({id: selectedDepIds.toString()}).then((res) => {
if (res.success) {
this.dataSource = res.result;
this.ipagination.total = res.result.length;
}
}).finally(() => {
this.loading = false
})
},
handleOptions(options, dataSourceMap) {
this.selectOptions = options
this.dataSourceMap = dataSourceMap
},
handleDropdownVisibleChange() {
// 解决antdv自己的bug —— open 设置为 false 了，点击后还是添加了 open 样式，导致点击事件失效
this.selectOpen = true
this.$nextTick(() => {
this.selectOpen = false
})
},
}
}
</script>
<style lang="less" scoped>
.j-select-biz-component-box {
@width: 82px;
.left {
width: calc(100% - @width - 8px);
}
.right {
width: @width;
}
.full {
width: 100%;
}
/deep/ .ant-select-search__field {
display: none !important;
}
}
</style>

464
src/views/activiti/PSelectBizComponentModal.vue
Unescape View File

@ -0,0 +1,464 @@
<template>
<j-modal
centered
:title="name + '选择'"
:width="width"
:visible="visible"
switchFullscreen
@ok="handleOk"
@cancel="close"
cancelText="关闭">
<a-row :gutter="18">
<a-col :md="6" :sm="24">
<a-card>
<!--组织机构-->
<a-directory-tree
selectable
:selectedKeys="selectedDepIds"
:checkStrictly="true"
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
:treeData="departTree"
:expandAction="false"
:expandedKeys.sync="expandedKeys"
@select="onDepSelect"
/>
</a-card>
</a-col>
<a-col :span="10">
<!-- 查询区域 -->
<a-form layout="inline" class="j-inline-form">
<!-- 固定条件 -->
<a-form-item :label="(queryParamText||name)">
<a-input v-model="queryParam[queryParamCode||valueKey]" :placeholder="'请输入' + (queryParamText||name)" @pressEnter="searchQuery"/>
</a-form-item>
<!-- 动态生成的查询条件 -->
<j-select-biz-query-item v-if="queryConfig.length>0" v-show="showMoreQueryItems" :queryParam="queryParam" :queryConfig="queryConfig" @pressEnter="searchQuery"/>
<!-- 按钮 -->
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
<a v-if="queryConfig.length>0" @click="showMoreQueryItems=!showMoreQueryItems" style="margin-left: 8px">
{{ showMoreQueryItems ? '收起' : '展开' }}
<a-icon :type="showMoreQueryItems ? 'up' : 'down'"/>
</a>
</a-form>
<a-table
size="middle"
bordered
:rowKey="rowKey"
:columns="innerColumns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:scroll="{ y: 640 }"
:rowSelection="{selectedRowKeys, onChange: onSelectChange, type: multiple ? 'checkbox':'radio'}"
:customRow="customRowFn"
@change="handleTableChange">
</a-table>
</a-col>
<a-col :span="8">
<a-card :title="'已选' + name" :bordered="false" :head-style="{padding:0}" :body-style="{padding:0}">
<a-table size="middle" :rowKey="rowKey" bordered v-bind="selectedTable" :scroll="{ y: 600 }">
<span slot="action" slot-scope="text, record, index">
<a @click="handleDeleteSelected(record, index)">删除</a>
</span>
</a-table>
</a-card>
</a-col>
</a-row>
</j-modal>
</template>
<script>
import { getAction } from '@/api/manage'
import Ellipsis from '@/components/Ellipsis'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { cloneObject, pushIfNotExist } from '@/utils/util'
import { getUserList, queryDepartTreeList, queryUserByDepId } from '@api/api'
export default {
name: 'PSelectBizComponentModal',
mixins: [JeecgListMixin],
components: {Ellipsis, },
props: {
value: {
type: Array,
default: () => []
},
visible: {
type: Boolean,
default: false
},
valueKey: {
type: String,
required: true
},
multiple: {
type: Boolean,
default: true
},
width: {
type: Number,
default: 900
},
name: {
type: String,
default: ''
},
listUrl: {
type: String,
required: true,
default: ''
},
// 根据 value 获取显示文本的地址，例如存的是 username，可以通过该地址获取到 realname
valueUrl: {
type: String,
default: ''
},
displayKey: {
type: String,
default: null
},
columns: {
type: Array,
required: true,
default: () => []
},
// 查询条件Code
queryParamCode: {
type: String,
default: null
},
// 查询条件文字
queryParamText: {
type: String,
default: null
},
// 查询配置
queryConfig: {
type: Array,
default: () => []
},
rowKey: {
type: String,
default: 'id'
},
// 过长裁剪长度，设置为 -1 代表不裁剪
ellipsisLength: {
type: Number,
default: 12
},
},
data() {
return {
selectedDepIds: [],
departTree: [],
expandedKeys: [],
innerValue: [],
// 已选择列表
selectedTable: {
pagination: false,
scroll: { y: 240 },
columns: [
{
...this.columns[0],
width: this.columns[0].widthRight || this.columns[0].width,
},
{ title: '操作', dataIndex: 'action', align: 'center', width: 60, scopedSlots: { customRender: 'action' }, }
],
dataSource: [],
},
renderEllipsis: (value) => (<ellipsis length={this.ellipsisLength}>{value}</ellipsis>),
url: { list: this.listUrl },
/* 分页参数 */
ipagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
return range[0] + '-' + range[1] + ' 共' + total + '条'
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
options: [],
dataSourceMap: {},
showMoreQueryItems: false,
}
},
created() {
this.queryDepartTree();
},
computed: {
// 表头
innerColumns() {
let columns = cloneObject(this.columns)
columns.forEach(column => {
// 给所有的列加上过长裁剪
if (this.ellipsisLength !== -1) {
column.customRender = (text) => this.renderEllipsis(text)
}
})
return columns
},
},
watch: {
value: {
deep: true,
immediate: true,
handler(val) {
this.innerValue = cloneObject(val)
this.selectedRowKeys = []
this.valueWatchHandler(val)
this.queryOptionsByValue(val)
}
},
dataSource: {
deep: true,
handler(val) {
this.emitOptions(val)
this.valueWatchHandler(this.innerValue)
}
},
selectedRowKeys: {
immediate: true,
deep: true,
handler(val) {
//update--begin--autor:scott-----date:20200927------for：选取职务名称出现全选 #1753-----
if(this.innerValue){
this.innerValue.length=0;
}
//update--end--autor:scott-----date:20200927------for：选取职务名称出现全选 #1753-----
this.selectedTable.dataSource = val.map(key => {
for (let data of this.dataSource) {
if (data[this.rowKey] === key) {
pushIfNotExist(this.innerValue, data[this.valueKey])
return data
}
}
for (let data of this.selectedTable.dataSource) {
if (data[this.rowKey] === key) {
pushIfNotExist(this.innerValue, data[this.valueKey])
return data
}
}
console.warn('未找到选择的行信息，key：' + key)
return {}
})
},
}
},
methods: {
// 点击树节点,筛选出对应的用户
onDepSelect(selectedDepIds) {
// console.log("selectedDepIds",selectedDepIds)
if (selectedDepIds[0] != null) {
this.initQueryUserByDepId(selectedDepIds); // 调用方法根据选选择的id查询用户信息
if (this.selectedDepIds[0] !== selectedDepIds[0]) {
this.selectedDepIds = [selectedDepIds[0]];
}
}
},
// 根据选择的id来查询用户信息
initQueryUserByDepId(selectedDepIds) {
// this.loading = true
return queryUserByDepId({id: selectedDepIds.toString()}).then((res) => {
// console.log("initQueryUserByDepId",res)
if (res.success) {
this.dataSource = res.result;
this.ipagination.total = res.result.length;
}
}).finally(() => {
// this.loading = false
})
},
queryDepartTree() {
queryDepartTreeList().then((res) => {
console.log("234q32423",res)
if (res.success) {
this.departTree = res.result;
// 默认展开父节点
this.expandedKeys = this.departTree.map(item => item.id)
}
})
},
handleTableChange(pagination, filters, sorter) {
//TODO 筛选
if (Object.keys(sorter).length > 0) {
this.isorter.column = sorter.field;
this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc';
}
this.ipagination = pagination;
this.loadData();
},
async loadData(arg) {
if (arg === 1) {
this.ipagination.current = 1;
}
if (this.selectedDepIds && this.selectedDepIds.length > 0) {
await this.initQueryUserByDepId(this.selectedDepIds)
// console.log("这边1");
} else {
// console.log("这边2");
this.loading = true
let params = this.getQueryParams()//查询条件
await getUserList(params).then((res) => {
if (res.success) {
this.dataSource = res.result.records
this.ipagination.total = res.result.total
}
}).finally(() => {
this.loading = false
})
}
},
/** 关闭弹窗 */
close() {
this.$emit('update:visible', false)
},
valueWatchHandler(val) {
val.forEach(item => {
this.dataSource.concat(this.selectedTable.dataSource).forEach(data => {
if (data[this.valueKey] === item) {
pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
}
})
})
},
queryOptionsByValue(value) {
if (!value || value.length === 0) {
return
}
// 判断options是否存在value，如果已存在数据就不再请求后台了
let notExist = false
for (let val of value) {
let find = false
for (let option of this.options) {
if (val === option.value) {
find = true
break
}
}
if (!find) {
notExist = true
break
}
}
if (!notExist) return
getAction(this.valueUrl || this.listUrl, {
// 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
[this.valueKey]: value.join(',') + ',',
pageNo: 1,
pageSize: value.length
}).then((res) => {
if (res.success) {
let dataSource = res.result
if (!(dataSource instanceof Array)) {
dataSource = res.result.records
}
this.emitOptions(dataSource, (data) => {
pushIfNotExist(this.innerValue, data[this.valueKey])
pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
pushIfNotExist(this.selectedTable.dataSource, data, this.rowKey)
})
}
})
},
emitOptions(dataSource, callback) {
dataSource.forEach(data => {
let key = data[this.valueKey]
this.dataSourceMap[key] = data
pushIfNotExist(this.options, { label: data[this.displayKey || this.valueKey], value: key }, 'value')
typeof callback === 'function' ? callback(data) : ''
})
this.$emit('options', this.options, this.dataSourceMap)
},
/** 完成选择 */
handleOk() {
let value = this.selectedTable.dataSource.map(data => data[this.valueKey])
this.$emit('input', value)
this.close()
},
/** 删除已选择的 */
handleDeleteSelected(record, index) {
this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record[this.rowKey]), 1)
//update--begin--autor:wangshuai-----date:20200722------for：JSelectBizComponent组件切换页数值问题------
this.selectedTable.dataSource.splice(this.selectedTable.dataSource.indexOf(record), 1)
this.innerValue.splice(this.innerValue.indexOf(record[this.valueKey]), 1)
console.log("this.selectedRowKeys:",this.selectedRowKeys)
console.log("this.selectedTable.dataSource:",this.selectedTable.dataSource)
//update--begin--autor:wangshuai-----date:20200722------for：JSelectBizComponent组件切换页数值问题------
},
customRowFn(record) {
return {
on: {
click: () => {
let key = record[this.rowKey]
if (!this.multiple) {
this.selectedRowKeys = [key]
this.selectedTable.dataSource = [record]
} else {
let index = this.selectedRowKeys.indexOf(key)
if (index === -1) {
this.selectedRowKeys.push(key)
this.selectedTable.dataSource.push(record)
} else {
this.handleDeleteSelected(record, index)
}
}
}
}
}
},
}
}
</script>
<style lang="less" scoped>
.full-form-item {
display: flex;
margin-right: 0;
/deep/ .ant-form-item-control-wrapper {
flex: 1 1;
display: inline-block;
}
}
.j-inline-form {
/deep/ .ant-form-item {
margin-bottom: 12px;
}
/deep/ .ant-form-item-label {
line-height: 32px;
width: auto;
}
/deep/ .ant-form-item-control {
height: 32px;
line-height: 32px;
}
}
</style>

10
src/views/activiti/PSelectPosition.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<j-select-biz-component
<PSelectBizComponent
:value="value"
:ellipsisLength="20"
:listUrl="url.list"
@ -10,11 +10,11 @@
</template>
<script>
import JSelectBizComponent from '@/components/jeecgbiz/JSelectBizComponent'
import PSelectBizComponent from './PSelectBizComponent'
export default {
name: 'PSelectPosition',
components: { JSelectBizComponent },
components: { PSelectBizComponent },
props: ['value'],
data() {
return {
@ -29,9 +29,9 @@ export default {
{ title: '部门', dataIndex: 'orgCodeTxt', align: 'center', width: '25%' }
],
default:{
name: '人员名称',
name: '人员',
displayKey: 'realname',
width: 1200,
width: 1500,
returnKeys: ['realname', 'id'],
}
}

13
src/views/activiti/ProcessModelList.vue
Unescape View File

@ -47,8 +47,12 @@
</span>
</a-row>
</a-form>
</div>
<div class="table-operator">
<a-button @click="shuttle" type="primary" icon="plus">新增</a-button>
</div>
<!-- table区域-begin -->
@ -130,7 +134,7 @@
<!-- <a-divider type="vertical" />-->
<!-- <a href="javascript:void(0);" @click="convertToModel(r)" >转为模型</a>-->
<!-- <br>-->
<a href="javascript:void(0);" @click="edit(r)">配置表单</a> <a-divider type="vertical" />
<a href="javascript:void(0);" @click="edit(r)">编辑</a> <a-divider type="vertical" />
<a href="javascript:void(0);" style="color: red;" @click="remove(r)">删除</a>
@ -141,7 +145,7 @@
<!--编辑-->
<a-modal width="900px"
:confirmLoading="confirmLoading"
title="编辑流程"
:title=textbox
:visible="editObj.visible"
@ok="editObjOk"
@cancel="editObj.visible = false"
@ -341,6 +345,7 @@
},
data () {
return {
textbox:'',
reportList:[],
viewImage:false,
viewTitle:"",
@ -424,7 +429,7 @@
methods: {
shuttle(){
this.isShuttle = true;
this.editObj.visible = true;
},
@ -613,6 +618,8 @@
},
/*编辑流程信息*/
edit(row){
console.log(row)
this.textbox = "编辑"+row.description;
this.editObj = Object.assign(this.editObj, row)
this.editObj.visible = true;
},

Write Preview
Loading…
Cancel
Save