陈裕财
4 years ago
2 changed files with 317 additions and 42 deletions
@ -0,0 +1,295 @@ |
|||||
|
<template> |
||||
|
<section class="page-container padding border"> |
||||
|
<el-row> |
||||
|
<el-row > |
||||
|
<el-button type="warning" @click="batchSaveMenu" icon="el-icon-finished">保存</el-button> |
||||
|
<el-button @click="noBatchEdit" icon="el-icon-back">返回</el-button> |
||||
|
</el-row> |
||||
|
<el-row style="padding-top:12px;"> |
||||
|
<el-table ref="table" :indent="16" lazy :load="loadXmMenusLazy" :height="maxTableHeight" :data="xmMenusTreeData" class="drag-table" row-key="menuId" :tree-props="{children: 'children', hasChildren: 'childrenCnt'}" highlight-current-row v-loading="load.list" border @selection-change="selsChange" @row-click="rowClick" style="width: 100%;"> |
||||
|
<el-table-column type="selection" width="45"></el-table-column> |
||||
|
<el-table-column prop="seqNo" label="序号" width="200" fixed="left"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div v-if="scope.row.dclass=='1'" class="icon" style="background-color: rgb(255, 153, 51);"> |
||||
|
<i class="el-icon-s-promotion"></i> |
||||
|
</div> |
||||
|
<div v-if="scope.row.dclass=='2'" class="icon" style="background-color: rgb(0, 153, 51);"> |
||||
|
<i class="el-icon-s-flag"></i> |
||||
|
</div> |
||||
|
<div v-if="scope.row.dclass=='3'" class="icon" style="background-color: rgb(79, 140, 255);"> |
||||
|
<i class="el-icon-document"></i> |
||||
|
</div> |
||||
|
<el-input style="width:70%;" v-model="scope.row.seqNo" @change="fieldChange(scope.row,'seqNo')"></el-input> |
||||
|
</template> |
||||
|
|
||||
|
</el-table-column> |
||||
|
<el-table-column prop="menuName" label="需求名称" min-width="140" show-overflow-tooltip fixed="left"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-model="scope.row.menuName" @change="fieldChange(scope.row,'menuName')"></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="mmUsername" label="跟进人" min-width="100" > |
||||
|
|
||||
|
<template slot="header"> |
||||
|
<el-button type="text" icon="el-icon-user" title="批量修改跟进人" @click="showBatchMmUserSelectVisible">批量修改</el-button> |
||||
|
</template> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-tag v-if="scope.row.mmUserid" @click="selectUser(scope.row)" closable @close="clearPmUser(scope.row)">{{scope.row.mmUsername}}</el-tag> |
||||
|
<el-button v-else type="text" @click="selectUser(scope.row)">选人</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column label="需求属性" width="500" > |
||||
|
<template slot-scope="scope"> |
||||
|
<el-select v-model="scope.row.dtype" title="需求类型" clearable placeholder="需求类型" @change="fieldChange(scope.row,'dtype')"> |
||||
|
<el-option v-for="i in dicts.demandType" :label="i.name" :key="i.id" :value="i.id"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="scope.row.source" title="需求来源" placeholder="需求来源" clearable @change="fieldChange(scope.row,'dtype')"> |
||||
|
<el-option v-for="i in dicts.demandSource" :label="i.name" :key="i.id" :value="i.id"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="scope.row.dlvl" title="需求层次" placeholder="需求层次" clearable class="hidden-md-and-down" @change="fieldChange(scope.row,'dtype')"> |
||||
|
<el-option v-for="i in dicts.demandLvl" :label="i.name" :key="i.id" :value="i.id"></el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model="scope.row.priority" title="优先级" placeholder="优先级" clearable @change="fieldChange(scope.row,'dtype')"> |
||||
|
<el-option v-for="i in dicts.priority" :label="i.name" :key="i.id" :value="i.id"></el-option> |
||||
|
</el-select> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<el-table-column prop="remark" label="描述" min-width="140" show-overflow-tooltip> |
||||
|
<template slot-scope="scope"> |
||||
|
|
||||
|
<el-input v-model="scope.row.remark" type="textarea" @change="fieldChange(scope.row,'remark')"></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
</el-row> |
||||
|
<el-drawer title="选择员工" :visible.sync="userSelectVisible" size="60%" append-to-body> |
||||
|
<users-select @confirm="onUserSelected" ref="usersSelect"></users-select> |
||||
|
</el-drawer> |
||||
|
<el-drawer title="选择员工" :visible.sync="batchMmUserSelectVisible" size="60%" append-to-body> |
||||
|
<users-select @confirm="onBatchMmUserSelectConfirm" ref="batchMmUserSelect"></users-select> |
||||
|
</el-drawer> |
||||
|
|
||||
|
</el-row> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '@/common/js/util';//全局公共库 |
||||
|
import treeTool from '@/common/js/treeTool';//全局公共库 |
||||
|
import { initSimpleDicts } from '@/api/mdp/meta/item';//下拉框数据查询 |
||||
|
import { batchEditXmMenu,listXmMenuWithState } from '@/api/xm/core/xmMenu'; |
||||
|
import UsersSelect from "@/views/mdp/sys/user/UsersSelect"; |
||||
|
|
||||
|
|
||||
|
import { mapGetters } from 'vuex' |
||||
|
|
||||
|
export default { |
||||
|
props:['product','xmMenus','dicts'], |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'userInfo','roles' |
||||
|
]), |
||||
|
|
||||
|
xmMenusTreeData() { |
||||
|
let xmMenus = JSON.parse(JSON.stringify(this.xmMenus || [])); |
||||
|
|
||||
|
const xmMenusTreeData = treeTool.translateDataToTree(xmMenus,"pmenuId","menuId"); |
||||
|
|
||||
|
return xmMenusTreeData; |
||||
|
}, |
||||
|
}, |
||||
|
watch:{ |
||||
|
product(product){ |
||||
|
this.filters.product=product |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
|
||||
|
return { |
||||
|
filters: { |
||||
|
}, |
||||
|
load:{ list: false, edit: false, del: false, add: false },//查询中... |
||||
|
sels: [],//列表选中数据 |
||||
|
options2:{},//下拉选择框的所有静态数据 params=[{categoryId:'0001',itemCode:'sex'}] 返回结果 {'sex':[{optionValue:'1',optionName:'男',seqOrder:'1',fp:'',isDefault:'0'},{optionValue:'2',optionName:'女',seqOrder:'2',fp:'',isDefault:'0'}]} |
||||
|
|
||||
|
//新增xmMenu界面初始化数据 |
||||
|
addForm: { |
||||
|
menuId:'',menuName:'',pmenuId:'',productId:'',remark:'',status:'',online:'',demandUrl:'',codeUrl:'',designUrl:'',docUrl:'',helpUrl:'',operDocUrl:'' |
||||
|
}, |
||||
|
|
||||
|
//编辑xmMenu界面初始化数据 |
||||
|
editForm: { |
||||
|
menuId:'',menuName:'',pmenuId:'',productId:'',remark:'',status:'',online:'',demandUrl:'',codeUrl:'',designUrl:'',docUrl:'',helpUrl:'',operDocUrl:'' |
||||
|
}, |
||||
|
valueChangeRows:[], |
||||
|
userSelectVisible:false, |
||||
|
batchMmUserSelectVisible:false, |
||||
|
maxTableHeight:300, |
||||
|
pickerOptions: util.getPickerOptions('datarange'), |
||||
|
|
||||
|
maps:new Map(), |
||||
|
} |
||||
|
},//end data |
||||
|
methods: { |
||||
|
|
||||
|
//选择行xmMenu |
||||
|
selsChange: function (sels) { |
||||
|
this.sels = sels; |
||||
|
}, |
||||
|
|
||||
|
rowClick: function(row, event, column){ |
||||
|
this.$emit('row-click',row, event, column);// @row-click="rowClick" |
||||
|
}, |
||||
|
noBatchEdit(){ |
||||
|
this.batchEditVisible=false; |
||||
|
this.valueChangeRows=[]; |
||||
|
this.$emit('no-batch-edit') |
||||
|
}, |
||||
|
batchSaveMenu(){ |
||||
|
|
||||
|
if(this.valueChangeRows.length==0){ |
||||
|
this.$notify.success("没有数据被修改"); |
||||
|
return |
||||
|
} |
||||
|
batchEditXmMenu(this.valueChangeRows).then(res=>{ |
||||
|
var tips=res.data.tips; |
||||
|
if(tips.isOk){ |
||||
|
this.valueChangeRows=[] |
||||
|
} |
||||
|
this.$notify({position:'bottom-left',showClose:true,message: tips.msg, type: tips.isOk?'success':'error'}); |
||||
|
}); |
||||
|
}, |
||||
|
fieldChange:function(row,fieldName,nextReplace){ |
||||
|
|
||||
|
console.log('fieldChange--row==', row); |
||||
|
if(nextReplace){ |
||||
|
row.nextReplace=nextReplace |
||||
|
} |
||||
|
if(row.opType){ |
||||
|
var index=this.valueChangeRows.findIndex(i=>i.menuId==row.menuId); |
||||
|
|
||||
|
if(index>=0){ |
||||
|
this.valueChangeRows.splice(index,1); |
||||
|
this.valueChangeRows.push(row) |
||||
|
}else{ |
||||
|
this.valueChangeRows.push(row) |
||||
|
} |
||||
|
}else{ |
||||
|
var oneRow=this.valueChangeRows.find(i=>i.menuId==row.menuId); |
||||
|
if( oneRow ){ |
||||
|
if(oneRow.nextReplace){ |
||||
|
var index=this.valueChangeRows.findIndex(i=>i.menuId==row.menuId); |
||||
|
this.valueChangeRows.splice(index,1); |
||||
|
this.valueChangeRows.push(row) |
||||
|
}else{ |
||||
|
return; |
||||
|
} |
||||
|
}else{ |
||||
|
this.valueChangeRows.push(row) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
selectUser(row){ |
||||
|
this.editForm=row |
||||
|
this.userSelectVisible=true; |
||||
|
}, |
||||
|
onUserSelected(users){ |
||||
|
if(users && users.length>0){ |
||||
|
this.editForm.mmUserid=users[0].userid |
||||
|
this.editForm.mmUsername=users[0].username |
||||
|
this.fieldChange(this.editForm,"mmUsername"); |
||||
|
|
||||
|
} |
||||
|
this.userSelectVisible=false |
||||
|
}, |
||||
|
clearPmUser:function(row){ |
||||
|
this.editForm=row |
||||
|
row.mmUserid='' |
||||
|
row.mmUsername='' |
||||
|
this.fieldChange(row,"mmUsername"); |
||||
|
}, |
||||
|
|
||||
|
loadXmMenusLazy(tree, treeNode, resolve) { |
||||
|
|
||||
|
this.maps.set(tree.menuId, { tree, treeNode, resolve }) //储存数据 |
||||
|
var params={pmenuId:tree.menuId} |
||||
|
params.isTop="" |
||||
|
this.load.list = true; |
||||
|
var func=listXmMenuWithState |
||||
|
func(params).then(res=>{ |
||||
|
this.load.list = false |
||||
|
var tips = res.data.tips; |
||||
|
if(tips.isOk){ |
||||
|
resolve(res.data.data) |
||||
|
}else{ |
||||
|
resolve([]) |
||||
|
} |
||||
|
}).catch( err => this.load.list = false ); |
||||
|
|
||||
|
}, |
||||
|
//查询时选择责任人 |
||||
|
showBatchMmUserSelectVisible() { |
||||
|
if(!this.sels||this.sels.length==0){ |
||||
|
this.$notify({position:'bottom-left',showClose:true,message:'请先选中一条或多条数据',type:'warning'}) |
||||
|
return; |
||||
|
}else{ |
||||
|
this.batchMmUserSelectVisible=true; |
||||
|
} |
||||
|
}, |
||||
|
//查询时选择责任人 |
||||
|
onBatchMmUserSelectConfirm(users) { |
||||
|
var user={}; |
||||
|
if (users && users.length > 0) { |
||||
|
user=users[0] |
||||
|
} |
||||
|
this.batchMmUserSelectVisible=false; |
||||
|
this.sels.forEach(i=>{ |
||||
|
i.mmUserid=user.userid; |
||||
|
i.mmUsername=user.username; |
||||
|
this.fieldChange(i,"mmUserid") |
||||
|
}) |
||||
|
}, |
||||
|
},//end methods |
||||
|
components: { |
||||
|
UsersSelect, |
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
this.$nextTick(() => { |
||||
|
this.maxTableHeight = util.calcTableMaxHeight(this.$refs.table.$el); |
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
.more-label-font{ |
||||
|
text-align:center; |
||||
|
float:left; |
||||
|
padding-top:5px; |
||||
|
} |
||||
|
.el-table { |
||||
|
box-sizing: border-box; |
||||
|
/deep/ .cell { |
||||
|
-webkit-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: normal; |
||||
|
word-break: break-all; |
||||
|
line-height: 23px; |
||||
|
padding-right: 10px; |
||||
|
display: flex; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue