502 lines
22 KiB
HTML
502 lines
22 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
.item {
|
|
padding: 6px 12px;
|
|
margin: 0px 10px 0px 10px;
|
|
border: solid 1px #eee;
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
.item:hover {
|
|
background-color: #fdfdfd;
|
|
cursor: move;
|
|
}
|
|
|
|
.item + .item {
|
|
border-top: none;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.clusterMembersSubmitBtn {
|
|
/* position: absolute;
|
|
bottom: 0px;
|
|
right: 0px;*/
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.cluster-card {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.cluster-card .el-card__header {
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.cluster-card .el-card__body {
|
|
height: 660px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
<guava ref="guava">
|
|
<el-card shadow="never">
|
|
<div class="search">
|
|
<div class="search-item">
|
|
<div class="search-item-label">年度：</div>
|
|
<div class="search-item-option">
|
|
<el-date-picker
|
|
@change="doSearch"
|
|
placeholder="选择年度"
|
|
style="width: 100%"
|
|
type="year"
|
|
v-model="pageForm.year"
|
|
value-format="yyyy">
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
<div class="search-item">
|
|
<div class="search-item-label">线路名称：</div>
|
|
<div class="search-item-option">
|
|
<el-input @keyup.enter.native="doSearch" clearable
|
|
placeholder="请输入内容"
|
|
style="width: 100%"
|
|
v-model="pageForm.keywords">
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-item" v-if="${@shiro.hasRole('sysadmin')||@shiro.hasRole('A06')}">
|
|
<div class="search-item-label">分工会：</div>
|
|
<div class="search-item-option">
|
|
<el-select @change="doSearch" clearable filterable style="width: 100%"
|
|
v-model="pageForm.unionId">
|
|
<el-option :key="item.id"
|
|
:label="item.unionname"
|
|
:value="item.id"
|
|
v-for="item in unionOptions"></el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-query">
|
|
<el-button @click="doSearch" icon="el-icon-search" type="primary">搜索</el-button>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card class="mt10" shadow="never">
|
|
<table-tool :app="this" label="线路列表">
|
|
<template #func>
|
|
|
|
</template>
|
|
</table-tool>
|
|
<el-table :data="tableData" :size="tableSize" @sort-change="pageOrder"
|
|
align="center"
|
|
header-align="center">
|
|
<el-table-column :index="indexMethod" align="center" header-align="center" label="序号" type="index"
|
|
width="80px"></el-table-column>
|
|
<el-table-column
|
|
:label="column.label"
|
|
:prop="column.prop"
|
|
:sortable="column.sortable"
|
|
align="center"
|
|
header-align="center"
|
|
show-overflow-tooltip
|
|
v-for="column in tableColumns"
|
|
>
|
|
<template scope="{row:{signUpMode}}" v-if="column.prop==='signUpMode'">
|
|
{{signUpModeName(signUpMode)}}
|
|
</template>
|
|
<template scope="{row:{createMode}}" v-else-if="column.prop==='createMode'">
|
|
{{createModeName(createMode)}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="200px">
|
|
<template scope="{row}">
|
|
<el-button @click="openViewClusterInfo(row.id)" size="mini" type="primary">查看</el-button>
|
|
<el-button @click="openCluster(row.id,row.ascriptionUnionId)" size="mini" type="primary">组团
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
|
|
|
|
<template #edit_func>
|
|
<el-button @click="addCluster" type="primary">添加团</el-button>
|
|
</template>
|
|
<template #edit>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6" v-for="item,itemKey in clusterData">
|
|
<el-card class="cluster-card" shadow="never">
|
|
<div class="text-primary" slot="header">
|
|
<template v-if="!item.editClusterName">
|
|
{{item.clusterName}}
|
|
<i @click="item.editClusterName=true"
|
|
class="el-icon-edit"
|
|
v-if="itemKey!=='unSelectedUsers'"></i>
|
|
</template>
|
|
|
|
<el-input @blur="item.editClusterName=false"
|
|
autofocus
|
|
maxlength="10"
|
|
size="mini"
|
|
v-if="item.editClusterName"
|
|
v-model="item.clusterName"></el-input>
|
|
|
|
<i @click="removeCluster(itemKey)"
|
|
class="el-icon-close"
|
|
style="position: absolute;right: 5px;top: 5px;cursor: pointer"
|
|
v-if="itemKey!=='unSelectedUsers'"></i>
|
|
|
|
<el-button @click="openBatchMove"
|
|
size="mini"
|
|
style="position:absolute;right: 10px"
|
|
type="primary"
|
|
v-if="itemKey==='unSelectedUsers'">批量调整
|
|
</el-button>
|
|
</div>
|
|
<draggable @end="drag=false" @start="drag=true" group="cluster" style="height: 100%"
|
|
v-model="item.members">
|
|
<transition-group :style="tgGroup">
|
|
<div :key="ele.loginName" class="item" v-for="ele in item.members">
|
|
<el-popover :content="ele.userName+'-'+ele.loginName+'-'+ele.sex+'-'+ele.unionName"
|
|
placement="right-end"
|
|
trigger="hover">
|
|
<el-row :gutter="10" slot="reference" style="white-space: nowrap" type="flex">
|
|
<el-col :span="4">
|
|
<el-tag :type="ele.isLeader?null:'info'" effect="dark" size="mini">
|
|
{{ele.isLeader ? '团长' : '成员' }}
|
|
</el-tag>
|
|
</el-col>
|
|
|
|
<el-col :span="17" style="overflow: hidden">
|
|
{{ele.userName+'-'+ele.loginName+'-'+ele.sex+'-'+ele.unionName}}
|
|
</el-col>
|
|
|
|
<el-col :span="3" class="text-center">
|
|
<el-dropdown
|
|
@command="(isLeader)=>{setMemberRole(itemKey,ele.loginName,isLeader)}"
|
|
v-if="itemKey!=='unSelectedUsers'">
|
|
<i class="el-icon-user-solid"></i>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item command="true">设为团长</el-dropdown-item>
|
|
<el-dropdown-item command="false">设为成员</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</el-col>
|
|
</el-row>
|
|
</el-popover>
|
|
</div>
|
|
</transition-group>
|
|
</draggable>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row class="clusterMembersSubmitBtn" justify="end" type="flex">
|
|
<!-- <el-button @click="addCluster">添加团</el-button>-->
|
|
<el-button @click="$refs.guava.index()">取消</el-button>
|
|
<el-button @click="setClusterMembers" type="primary">提交</el-button>
|
|
</el-row>
|
|
</template>
|
|
|
|
<template #view>
|
|
<div>
|
|
<vi-title title="团列表"></vi-title>
|
|
<el-card shadow="never">
|
|
<el-tag :effect="item.id === selectClusterTagId ? 'dark':'light'"
|
|
:key="item.id"
|
|
@click="selectClusterTagId = item.id"
|
|
class="mr10"
|
|
style="cursor: pointer"
|
|
v-for="item in clusterViewList"
|
|
v-if="clusterViewList && clusterViewList.length>0">
|
|
{{ item.clusterName }}
|
|
</el-tag>
|
|
</el-card>
|
|
<vi-title class="mt10" title="人员列表"></vi-title>
|
|
<el-card shadow="never">
|
|
<el-table :data="clusterTableData">
|
|
<el-table-column label="序号" type="index"></el-table-column>
|
|
<el-table-column label="工号" prop="loginName"></el-table-column>
|
|
<el-table-column label="姓名" prop="userName"></el-table-column>
|
|
<el-table-column label="性别" prop="sex"></el-table-column>
|
|
<el-table-column label="工会" prop="unionName"></el-table-column>
|
|
<el-table-column label="身份" prop="isLeader">
|
|
<template scope="{row}">
|
|
<span class="text-primary" v-if="row.isLeader">团长</span>
|
|
<span v-else>成员</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
</guava>
|
|
|
|
<el-dialog :close-on-click-modal="false" :visible.sync="batchMoveDialogVisible" title="批量调整" width="60%">
|
|
<div class="mb10">
|
|
<vi-title2 title="原分组"></vi-title2>
|
|
<el-radio-group size="small" v-model="batchMoveData.originalGroup">
|
|
<el-radio :label="item"
|
|
border
|
|
v-for="(item,key) in clusterData">{{item.clusterName}}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
|
|
<el-table :data="batchMoveData.originalGroup.members"
|
|
class="mt10 mb10"
|
|
max-height="250px"
|
|
ref="originalGroupMembersTable"
|
|
v-show="batchMoveData.originalGroup && batchMoveData.originalGroup.members">
|
|
<el-table-column type="selection"></el-table-column>
|
|
<el-table-column label="工号" prop="loginName"></el-table-column>
|
|
<el-table-column label="姓名" prop="userName"></el-table-column>
|
|
<el-table-column label="性别" prop="sex"></el-table-column>
|
|
<el-table-column label="工会" prop="unionName"></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<div v-if="batchMoveData.originalGroup.members.length>0">
|
|
<vi-title2 title="筛选条件"></vi-title2>
|
|
|
|
<el-form label-width="80px">
|
|
<el-form-item label="分工会">
|
|
<el-select multiple size="small" style="width: 100%" v-model="batchMoveData.cnd.unionNames">
|
|
<el-option
|
|
:key="item.id"
|
|
:label="item.unionname"
|
|
:value="item.unionname"
|
|
v-for="item in unionOptions">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div class="mb10" v-if="batchMoveData.originalGroup.members.length>0">
|
|
<vi-title2 title="移动后分组"></vi-title2>
|
|
<el-radio-group size="small" v-model="batchMoveData.currentGroup">
|
|
<el-radio :disabled="item.clusterName == batchMoveData.originalGroup.clusterName"
|
|
:label="item"
|
|
border
|
|
v-for="(item,key) in clusterData">{{item.clusterName}}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
|
|
<el-row justify="end" type="flex">
|
|
<el-button @click="batchMoveDialogVisible=false">取消</el-button>
|
|
<el-button @click="doBatchMove" type="primary">确定</el-button>
|
|
</el-row>
|
|
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
<script src="/assets/platform/plugins/vuedrag/Sortable.js"></script>
|
|
<script src="/assets/platform/plugins/vuedrag/vuedraggable.js"></script>
|
|
|
|
<script>
|
|
const vue = new Vue({
|
|
el: '#app',
|
|
mixins: [initTableMixins],
|
|
components: {
|
|
'line-info': httpVueLoader('/components/theRapyRecuperation/LineInfo.vue')
|
|
},
|
|
data() {
|
|
return {
|
|
tableColumns: [
|
|
{label: '年度', prop: 'year', sortable: true},
|
|
{label: '编号', prop: 'serialNumber', sortable: true},
|
|
{label: '线路名称', prop: 'lineName', sortable: true},
|
|
{label: '旅行社名称', prop: 'travelAgencyName', sortable: true},
|
|
{label: '线路类型', prop: 'regionalNature', sortable: true},
|
|
{label: '最少成团人数', prop: 'minimumGroupSize', sortable: true},
|
|
// {label: '创建工会', prop: 'createUnionName'},
|
|
// {label: '创建人', prop: 'createUserName', sortable: true},
|
|
// {label: '创建模式', prop: 'createMode'},
|
|
{label: '线路归属', prop: 'ascriptionUnionName', sortable: true},
|
|
{label: '组织形式', prop: 'signUpMode', sortable: true},
|
|
],
|
|
pageForm: {
|
|
keywords: null,
|
|
year: new Date().getFullYear().toString(),
|
|
selectStatus: 0
|
|
},
|
|
drag: false,
|
|
clusterData: {},
|
|
tgGroup: 'min-height:100%;display: block',
|
|
lineId: null,
|
|
clusterViewList: [],
|
|
selectClusterTagId: null,
|
|
batchMoveDialogVisible: false,
|
|
batchMoveData: {
|
|
originalGroup: {
|
|
members: []
|
|
},
|
|
currentGroup: null,
|
|
cnd: {}
|
|
},
|
|
unionOptions: []
|
|
}
|
|
},
|
|
computed: {
|
|
clusterTableData() {
|
|
if (this.selectClusterTagId) {
|
|
return this.clusterViewList.find(v => v.id === this.selectClusterTagId).members
|
|
}
|
|
return []
|
|
}
|
|
},
|
|
watch: {
|
|
'batchMoveData.cnd': {
|
|
handler(v) {
|
|
const unionNames = v['unionNames']
|
|
console.log(unionNames)
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
async openViewClusterInfo(id) {
|
|
this.$refs.guava.view()
|
|
const resp = await $.post(loc() + '/selectClusterInfo/' + id)
|
|
if (resp.code === 0) {
|
|
this.clusterViewList = resp.data
|
|
if (this.clusterViewList && this.clusterViewList.length > 0) {
|
|
this.selectClusterTagId = this.clusterViewList[0].id
|
|
} else {
|
|
this.selectClusterTagId = null
|
|
}
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
},
|
|
async openCluster(id, ascriptionUnionId) {
|
|
this.lineId = id
|
|
this.$refs.guava.edit()
|
|
const resp = await $.post(loc() + '/findClusterInfo/', {
|
|
lineId: id,
|
|
usUnionId: ascriptionUnionId
|
|
})
|
|
if (resp.code === 0) {
|
|
this.clusterData = resp.data
|
|
}
|
|
},
|
|
addCluster() {
|
|
const l = Object.keys(this.clusterData).length
|
|
const key = "cluster" + l
|
|
this.$set(this.clusterData, key, {
|
|
members: [],
|
|
clusterName: '团' + l,
|
|
editClusterName: false,
|
|
lineId: this.lineId
|
|
})
|
|
},
|
|
removeCluster(key) {
|
|
const h = this.clusterData[key]
|
|
const m = h.members
|
|
this.clusterData['unSelectedUsers'].members.push(...m)
|
|
delete this.clusterData[key]
|
|
},
|
|
|
|
async setClusterMembers() {
|
|
const emptyCluster = Object.values(vue.clusterData).filter(v => v.clusterName !== '线路未分配人员').find(v => v.members.length === 0)
|
|
if (emptyCluster) {
|
|
this.notifyWarning(emptyCluster.clusterName + '未分配成员,请分配后再提交！')
|
|
return
|
|
}
|
|
|
|
const resp = await $.post(loc() + '/setClusterMembers', {
|
|
clusters: JSON.stringify(this.clusterData),
|
|
lineId: this.lineId
|
|
})
|
|
if (resp.code === 0) {
|
|
this.notifySuccess(resp.msg)
|
|
this.$refs.guava.index()
|
|
this.lineId = null
|
|
this.clusterData = {}
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
},
|
|
setMemberRole(key, loginName, isLeader) {
|
|
const i = this.clusterData[key].members.findIndex(v => v.loginName === loginName)
|
|
this.$set(this.clusterData[key].members[i], 'isLeader', isLeader)
|
|
},
|
|
openBatchMove() {
|
|
this.batchMoveDialogVisible = true
|
|
this.batchMoveData = {
|
|
originalGroup: {
|
|
members: []
|
|
},
|
|
currentGroup: null,
|
|
cnd: {}
|
|
}
|
|
},
|
|
doBatchMove() {
|
|
const unionNames = this.batchMoveData.cnd.unionNames
|
|
|
|
|
|
//需要移动的数据(工会筛选)
|
|
let filterData = []
|
|
const unionSelectData = this.batchMoveData.originalGroup.members.filter(v => unionNames.includes(v['unionName']))
|
|
const selectionData = this.$refs.originalGroupMembersTable.selection
|
|
filterData = filterData.concat(unionSelectData).concat(selectionData)
|
|
|
|
const filterLoginNames = filterData.map(v => v.loginName)
|
|
|
|
//原分组移动之后剩下的数据
|
|
const deleteData = this.batchMoveData.originalGroup.members.filter(v => !filterLoginNames.includes(v.loginName))
|
|
|
|
//现分组Name
|
|
const cName = this.batchMoveData.currentGroup.clusterName
|
|
|
|
//原分组Name
|
|
const oName = this.batchMoveData.originalGroup.clusterName
|
|
|
|
|
|
for (let k in this.clusterData) {
|
|
if (this.clusterData[k]['clusterName'] === cName) {
|
|
this.clusterData[k].members = this.clusterData[k].members.concat(filterData)
|
|
}
|
|
if (this.clusterData[k]['clusterName'] === oName) {
|
|
this.clusterData[k].members = deleteData
|
|
}
|
|
}
|
|
|
|
this.batchMoveDialogVisible = false
|
|
},
|
|
|
|
createModeName(val) {
|
|
const d = this.createModeList.find(v => v.value === val)
|
|
return d ? d.label : null
|
|
},
|
|
signUpModeName(val) {
|
|
const d = this.signUpModeList.find(v => v.value === val)
|
|
return d ? d.label : null
|
|
},
|
|
|
|
},
|
|
async created() {
|
|
this.createModeList = await getEnumOptions('TheRapyRecuperationLineCreateMode')
|
|
this.signUpModeList = await getEnumOptions('TheRapyRecuperationSignUpMode')
|
|
this.unionOptions = await getUnions(null)
|
|
this.pageData()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|