weaver_trunk_cli/pc4mobx/prj/stores/projectBoardStore.js

749 lines
27 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { observable, action, autorun, toJS } from "mobx";
import { message, Modal } from "antd";
import _ from 'lodash';
import $ from "jquery";
import { CommonStore } from "./commonStore";
import TabsStore from "./util/tabs";
import { tabs } from "./data/board";
import { WeaTableNew, WeaForm } from 'comsMobx'
const { TableStore } = WeaTableNew;
import * as Apis from '../apis/projecboard';
import * as PrjApis from '../apis/project';
import { PrjCardStore } from "./projectBoard/prjCardStore";
import { TaskCardStore } from "./projectBoard/taskCardStore";
import {WeaLocaleProvider} from "ecCom"
const getLabel = WeaLocaleProvider.getLabel;
export class ProjectBoardStore {
@observable loading = false;
@observable title = '';
@observable prjList = [];
//项目类型树
@observable treeDatas = [];
@observable treeCount = {};
@observable treeCountType = [];
@observable selectedTreeKey = "";
@observable rightMenus = [];
@observable currentKey = "1";
@observable pagination = {
pageSize: 10,
current: 1,
total: 0
}
@observable prjListloading = true;
@observable searchType = "stageid";
@observable searchTypeOptions = [];
@observable canEditBoard = true;
@observable canEditBoardTask = true;
@observable canAddTask = true;
@observable showLandMark = true;
@observable isedit = true;
@observable commonStore = new CommonStore();
@observable tabsStore = new TabsStore();
@observable prjid = "";
@observable targetid = "";
@observable taskid = "";
@observable treeid = "";
@observable tableStore = new TableStore();
@observable columns = [];
@observable prjValue = "";
@observable prjCardStore = new PrjCardStore();
@observable prjTaskCardStore = new TaskCardStore();
@observable SlideModalVisible = false;
@observable refelsh = 0;
@observable userid = "";
@observable username = "";
@observable usericons = "";
discusstype = "PP";
//相关交流
@observable exchangeform = new WeaForm();
@observable exchangeRightMenu = [];
@observable exchangeContent = {} //相关交流内容
@observable showSearchAd = false // 高级搜索显示
@observable condition = []; //高级搜索
@observable showLeft = false;
@observable showMid = true;
@observable isNow = true; //任务是否是历史版本
columnGrids_map = [];
columnGrids = [];
boardGrid;
/**
* column拖拽信息start,拖拽结束后与结束时信息对边判断移动的位置
*/
column_move_info;
/**
* item拖动前所在的grid
*/
item_move_old_grid;
item_move_info;
item_move_start_index;
@observable windowHeight=window.innerHeight;
@observable windowWidth=window.innerWidth;
@observable timestamp = new Date().getTime()+'';
@observable percentStaus = new Date().getTime()+'';
@observable boardform = new WeaForm();
/**
* 初始化看板拖动元素document.querySelector('.prj_board_container')
*/
@action
initBoard = () => {
var borderContainer = document.querySelector('.prj_board_container');
var board = borderContainer.querySelector('.board');
var itemContainers = Array.prototype.slice.call(borderContainer.querySelectorAll('.board-column-content'));
itemContainers.forEach(container=>this.initItem(container));
const _this = this;
this.loading = true;
this.boardGrid = new Muuri(board, {
layout: function (items, gridWidth, gridHeight) {
// The layout data object. Muuri will read this data and position the items
// based on it.
var layout = {
// The layout item slots (left/top coordinates).
slots: [],
// The layout's total width.
width: 0,
// The layout's total height.
height: 450,
// Should Muuri set the grid's width after layout?
setWidth: true,
// Should Muuri set the grid's height after layout?
setHeight: false
};
// Calculate the slots.
var item;
var m;
var x = 0;
var y = 0;
var w = 0;
// var h = 0;
for (var i = 0; i < items.length; i++) {
item = items[i];
x += w;
//y += h;
// console.log(item.getMargin(),item.getWidth());
m = item.getMargin();
w = item.getWidth() + m.left;
// h = item.getHeight() + m.top + m.bottom;
layout.slots.push(x, y);
}
// Calculate the layout's total width and height.
// console.log(x + w);
layout.width = x + w;
// layout.height = h;
return layout;
},
layoutDuration: 400,
layoutOnResize:true,
layoutEasing: 'ease',
dragEnabled: true,
dragSortInterval: 0,
dragStartPredicate:function (item, event) {
if (!_this.canEditBoard || _this.boardGrid.getItems().indexOf(item) === _this.boardGrid.getItems().length-1) {
return false;
}
// For other items use the default drag start predicate.
return Muuri.ItemDrag.defaultStartPredicate(item, event,{
handle: '.board-column-header'
});
},
dragSortPredicate: function (item) {
// console.log(item);
var result = Muuri.ItemDrag.defaultSortPredicate(item, {
action: 'swap',
threshold: 50
});
// console.log(result,result.index === _this.boardGrid.getItems().length-1||result.index === _this.boardGrid.getItems().length-2);
return result && (_this.canEditBoard && result.index === _this.boardGrid.getItems().length-1) ? false : result;;
},
dragReleaseDuration: 400,
dragReleaseEasing: 'ease'
}).on('move', function (data) {
// console.log(data);
_this.column_move_info.push(data);
// console.log( _this.column_move_info);
}).on('dragMove', function (item, event) {
// console.log(item, event);
if(event){
let borderDiv=$('#prj_board_container');
if((event.center.x+item.getWidth()/2)>window.innerWidth){
borderDiv.scrollLeft(borderDiv.scrollLeft()+20);
}
if(event.center.x-item.getWidth()/2<0){
borderDiv.scrollLeft(borderDiv.scrollLeft()-20);
}
}
}).on('dragStart', function (item) {
_this.column_move_info=[];
}).on('dragReleaseEnd', function (item) {
// console.log(_this.column_move_info.length,item);
if(_this.column_move_info.length!=0){
let startD=_this.column_move_info[0];
let endD=_this.column_move_info[_this.column_move_info.length-1];
if(startD.fromIndex!=endD.toIndex){
let leftgroupid=endD.toIndex==0?"":_this.boardGrid.getItems()[endD.toIndex-1]._element.getAttribute('id').replace('column_','')
Apis.saveGroupOrder({ prjid:_this.prjid,stageid:item._element.getAttribute('id').replace('column_',''),leftstageid:leftgroupid}).then(({ success }) => {
if (success) {
message.success(getLabel(389171, "排序保存成功!"));
} else {
message.error(getLabel('503631','排序保存失败!') );
}
});
}
}
})
this.loading = false;
}
/**
* 初始化item元素
*/
initItem=(container,isSearch=false)=>{
const Muuri = window['Muuri'];
const _this = this;
var muuri = new Muuri(container, {
items: '.board-item',
layoutDuration: 400,
layoutEasing: 'ease',
dragEnabled: true,
dragSortInterval: 0,
dragSort: function () {
return _this.columnGrids;
},
dragStartPredicate:function (item, event) {
// console.log('dragStartPredicate',event);
if(event.target.parentNode&&event.target.parentNode.className){
if(event.target.parentNode.className=='item-icon'||event.target.parentNode.className=='landmark'||event.target.parentNode.className=='detail'||event.target.className=='title'){
return;
}
}
if(event&&event.target&&(event.target.className=='manager-img'||event.target.className=='icon-coms-Flag')){
return;
}
if (!_this.canEditBoardTask) {
return false;
}
return Muuri.ItemDrag.defaultStartPredicate(item, event,{
handle: '.board-item'
});
},
dragContainer: document.querySelector('.prj_board_container'),
dragReleaseDuration: 400,
dragReleaseEasing: 'ease'
})
.on('move', function (data) {
_this.item_move_info.push(data);
}).on('receive', function (data) {
_this.changeStatus();
})
.on('dragStart', function (item,event) {
// console.log("dragStart",item,event);
// console.log(item.getElement().style.transform);
// item.getElement().style.transform = "rotate(5deg)";
item.getElement().style.width = item.getWidth() + 'px';
item.getElement().style.height = item.getHeight() + 'px';
_this.item_move_old_grid=item.getGrid();
_this.item_move_info=[];
_this.item_move_start_index=item.getGrid().getItems().indexOf(item);
})
.on('dragReleaseEnd', function (item) {
// console.log("dragReleaseEnd",item,item.getGrid()._element);
item.getElement().style.width = '';
item.getElement().style.height = '';
_this.columnGrids.forEach(function (grid) {
grid.refreshItems();
});
if(item.getGrid()!=_this.item_move_old_grid){//移出到另一个column中
let currentId=item._element.getAttribute('id');
let i=item.getGrid().getItems().indexOf(item);
let previousId=item.getGrid().getItems()[i-1]?item.getGrid().getItems()[i-1]._element.getAttribute('id'):'';
let nextId=item.getGrid().getItems()[i+1]?item.getGrid().getItems()[i+1]._element.getAttribute('id'):'';
_this.saveItemOrder(true,currentId,item.getGrid()._element.getAttribute('id'),previousId,nextId);
// console.log(true,currentId,item.getGrid()._element.getAttribute('id'),previousId,nextId);
}else if(_this.item_move_info.length!=0){//自己column中移动
let startD=_this.item_move_info[0];
let endD=_this.item_move_info[_this.item_move_info.length-1];
if(startD.fromIndex!=endD.toIndex&&_this.item_move_start_index!=endD.toIndex){
let currentId=item._element.getAttribute('id');
let i=item.getGrid().getItems().indexOf(item);
let previousId=item.getGrid().getItems()[i-1]?item.getGrid().getItems()[i-1]._element.getAttribute('id'):'';
let nextId=item.getGrid().getItems()[i+1]?item.getGrid().getItems()[i+1]._element.getAttribute('id'):'';
_this.saveItemOrder(false,currentId,item.getGrid()._element.getAttribute('id'),previousId,nextId);
// console.log(false,currentId,item.getGrid()._element.getAttribute('id'),previousId,nextId);
}
}
})
.on('layoutStart', function () {
_this.boardGrid.refreshItems().layout();
})
.on('dragMove', function (item, event) {
// item.getElement().style.transform = item.getElement().style.transform+" rotate(-5deg)";
if(event){
//上下拖动
let pElement=$(item.getGrid()._element.parentNode);
if(event.center.y+item.getHeight()/2>item.getGrid()._top+pElement.scrollTop()+$(pElement).height()){
pElement.scrollTop(pElement.scrollTop()+20);
}
if(event.center.y-item.getHeight()/2<item.getGrid()._top+pElement.scrollTop()){
pElement.scrollTop(pElement.scrollTop()-20);
}
//左右拖动
let borderDiv=$('#prj_board_container');
if((event.center.x+item.getWidth()/2)>window.innerWidth){
borderDiv.scrollLeft(borderDiv.scrollLeft()+20);
}
if(event.center.x-item.getWidth()/2<0){
borderDiv.scrollLeft(borderDiv.scrollLeft()-20);
}
}
});
_this.columnGrids.push(muuri);
_this.columnGrids_map[container.getAttribute('id')]=muuri;
}
/**
* 计数状态修改
*/
@action
changeStatus=(data)=>{
this.percentStaus = new Date().getTime()+'';
}
/**
* 保存任务元素排序,优先排在上一个的下边,或排在下一个的上边,或排在第一个
*/
saveItemOrder=(isChangeGroup,itemid,groupid,previousId,nextId)=>{
itemid=itemid.replace('item_','');
previousId=previousId.replace('item_','');
nextId=nextId.replace('item_','');
groupid=groupid.replace('column_content_','');
const _this = this;
// this.loading = true;
Apis.saveItemOrder({isChangeGroup:isChangeGroup,taskId:itemid,groupId:groupid,previousId:previousId,nextId:nextId,viewType:_this.searchType,prjid:_this.prjid}).then(({success})=>{
if(success){
message.success(getLabel(389171, "排序保存成功!"));
_this.changeStatus();
}else{
message.error("保存失败");
}
// _this.loading = false;
});
}
constructor() {
this.columns = [
];
this.tabsStore.tabs = tabs;
this.tabsStore.activeKey = localStorage.getItem("prj_board_activeKey") || '1';
this.prjCardStore.selectTabKey = localStorage.getItem("prj_board_activeKey") || '1';
this.tabsStore.onChange = action((key) => {
this.tabsStore.activeKey = key;
this.prjCardStore.selectTabKey = key;
this.initRightPage();
});
autorun(() => {
if (this.prjid) {
localStorage.setItem("prj_board_selectedKey", this.prjid);
}
if (this.tabsStore.activeKey) {
localStorage.setItem("prj_board_activeKey", this.tabsStore.activeKey);
}
});
}
@action
onCollapse = (side,bool) =>{
if(side == "left"){
this.showLeft = bool;
}else{
this.showMid = bool;
}
}
//高级搜索显隐
setShowSearchAd=(bool)=>{
this.showSearchAd = bool
}
@action
onChangePaginNation = (current = this.pagination.current, pageSize = this.pagination.pageSize) => {
this.pagination.current = current;
this.pagination.pageSize = pageSize;
this.getCurrentPageDatas();
}
@action
onChangePaginNation1 = (current = this.pagination.current, pageSize = this.pagination.pageSize,params) => {
this.pagination.current = current;
this.pagination.pageSize = pageSize;
this.getProjectList1({...params,pageIndex : current, pageSize : pageSize});
}
@action
initList = () => {
this.getTreeList();
this.pagination.current = 1;
// this.getCurrentPageDatas();
}
@action
setPrjTypeId = (params) => {
localStorage.setItem("prj_treeid", params.prjtype);
this.pagination.current = 1;
this.getCurrentPageDatas();
}
@action
saveTaskInfo = (params) => {
if(this.prjCardStore.saveTaskInfo(this)){
this.searchKanBanView(false);
}
}
@action
getTreeList = (params) => {
Apis.getPrjTypeTreePageList({ treetype: 'prjsearch', ...params }).then(data => {
this.treeDatas = data.treedata;
this.treeCount = data.treecount;
this.treeCountType = data.treecountcfg;
this.setSelectedTreeKey("prjtype_" + data.selectedKeys);
localStorage.setItem("prj_treeid", data.selectedKeys);
this.getProjectList();
})
}
@action
setLandMark=(id,value)=>{
Apis.setLandMark({ taskid : id, value : value }).then(data => {
if(data.success){
this.searchKanBanView(false);
}else{
message.success("设置失败,请联系系统管理员!");
}
})
}
@action
saveTask = (params) => {
Apis.addBoardTask({ ...params, prjid: this.prjid }).then(data => {
this.searchKanBanView(false);
});
}
@action
delGrop = (id) => {
const _this = this;
Modal.confirm({
title:getLabel(15172,"系统提示"),
content:getLabel('503589','该阶段下的任务以及子任务都会被删除,您确定要删除吗?') ,
onOk() {
Apis.delBoardStage({stageid:id}).then(data => {
_this.searchKanBanView(true);
});
},
onCancel() { },
okText : getLabel('33703','确认') ,
cancelText : getLabel('31129','取消')
});
}
@action
saveGroup = (name) => {
Apis.addBoardStage({title:name, prjid: this.prjid }).then(data => {
this.searchKanBanView(false);
});
}
@action
saveGroupName = (name,id) =>{
Apis.editBoardStage({title:name, stageid:id}).then(data => {
this.searchKanBanView(false);
});
}
@action
getProjectList = (params={pageIndex : this.pagination.current, pageSize : this.pagination.pageSize}) => {
this.treeid = localStorage.getItem("prj_treeid");
this.prjListloading = true;
let list = [];
if(this.treeid == "" || this.treeid == null){
this.treeid = -1
}
Apis.getPrjByTypeId({ ...params, prjtype: this.treeid }).then(data => {
list = data.datas;
list = list.map((item) => {
let { name, person, label, id, state, color } = item;
return { name, person, label, id, state, color, key: id, };
});
this.prjList = list;
this.pagination.total = data.totalSize;
this.setPrjid();
this.prjListloading = false;
});
}
@action
getProjectList1 = (params={pageIndex : this.pagination.current, pageSize : this.pagination.pageSize}) => {
this.prjListloading = true;
let list = [];
Apis.getPrjByTypeId({ ...params }).then(data => {
list = data.datas;
list = list.map((item) => {
let { name, person, label, id, state, color } = item;
return { name, person, label, id, state, color, key: id, };
});
this.prjList = list;
this.pagination.total = data.totalSize;
this.prjid = data.selectedKey?data.selectedKey:"-1";
this.currentKey = this.prjid;
// this.pagination.current = 1;
this.prjListloading = false;
});
}
@action
setPrjid = (prjid = localStorage.getItem("prj_board_selectedKey") || this.prjid) => {
let filter = this.prjList.slice().filter(d => d.key == prjid);
if (prjid && filter.length > 0) {
this.prjid = prjid;
} else {
this.prjid = _.get(this.prjList.slice(), '[0].key');
filter = this.prjList.slice(0, 1);
}
this.prjCardStore.setPrjId(this.prjid);
this.title = `${_.get(filter, '[0].name') || ""} `;
this.currentKey = this.prjid;
//清空看板查询条件
this.boardform.resetConditionValue();
this.getPrjTabs();
}
@action
getKanbanView = () => {
const searchParams = this.boardform.getFormParams();
Apis.getKanbanView({prjid:this.prjid,...searchParams,searchType:this.searchType}).then(data=>{
this.columns = data.stages;
this.userid = data.userid;
this.usericons = data.useridicon;
this.username = data.useridname;
this.isedit = data.isedit;
this.canAddTask = data.cantask;
this.canEditBoard = data.canboard;
this.canEditBoardTask = data.canboardtask;
this.condition = data.condition;
this.boardform && !this.boardform.isFormInit && this.boardform.initFormFields(data.condition);
this.searchTypeOptions = data.searchTypeOptions;
this.showLandMark = data.showLandMark;
this.initBoard();
this.changeStatus();
});
}
searchKanBanView = ( needRefelshView = false) => {
if(needRefelshView){
this.columns = [];
}
this.refelsh++;
if(needRefelshView){
this.timestamp=new Date().getTime()+'';
this.initBoard();
}
}
@action
getPrjTabs=(params={})=>{
this.loading = true;
Apis.getPrjTabs({prjid:this.prjid}).then(data=>{
if(!data.isright && typeof(data.isright) !== "undefined"){
this.tabsStore.hasRight = data.isright;
this.tabsStore.verified = true;
}else{
this.tabsStore.hasRight = true;
this.tabsStore.verified = true;
this.tabsStore.tabDatas = data.tabs ;
this.initRightPage();
this.loading = false;
}
})
}
//初始化tab切换tab
initRightPage = () => {
if (!this.prjid) {
return;
}
const tabDatas1 = toJS(this.tabsStore.tabDatas);
if (tabDatas1) {
this.prjCardStore.clearStatus();
for (let i = 0; i < tabDatas1.length; i++) {
if(this.tabsStore.activeKey == tabDatas1[i].key){
switch (tabDatas1[i].shortname) {
case 'taskboard':
this.boardform.resetConditionValue(); //清除查询条件值
break;
case 'prjinfo':
this.prjCardStore.getPrjInfo({viewtype:'view',prjid:this.prjid});
this.rightMenus = this.prjCardStore.rightMenu;
if (!window.weaWorkplan) {
// 异步加载别模块的静态资源
eventRegister.loadModule('f_workplan', () => {
this.prjCardStore.setLoaded(true)
}, () => {
// 加载文件失败 的业务处理, 网络超时,没文件之类
})
} else {
this.prjCardStore.setLoaded(true)
}
break;
case 'childprj':
this.prjCardStore.getPrjSubCondition();
this.prjCardStore.getPrjSubList({prjid:this.prjid});
break;
case 'tasklist':
this.prjCardStore.getPrjTaskCondition({prjid:this.prjid});
this.prjCardStore.getPrjTaskList({prjid:this.prjid});
this.prjCardStore.getPrjTaskVersion({prjid:this.prjid});
break;
case 'prjdiscuss':
this.targetid = this.prjid;
this.prjCardStore.getExchangeList({});
break;
case 'prjshare':
this.prjCardStore.getPrjShareList({prjid:this.prjid});
break;
case 'stareport':
this.prjCardStore.getPrjStastics({prjid:this.prjid});
this.rightMenu = [];
break;
case 'stageset':
this.prjCardStore.clearStageStatus();
this.prjCardStore.getPrjTempletStageList({prjid:this.prjid});
this.rightMenu = [];
break;
case 'resources':
this.prjCardStore.getPrjResourceInfo({prjid:this.prjid});
this.rightMenu = [];
}
}
}
}
}
//相关交流
getRelateExchangeInfo = (params={})=>{
this.loading = true;
const searchParamsAd = this.exchangeform.getFormParams();
const newParams = { types:"PP",sortid:this.prjid, ...searchParamsAd, ...params };
for(let item in newParams){
if(newParams[item] == ""){
delete newParams[item]
}
};
PrjApis.getPrjDiscuss(newParams).then(data=>{
this.exchangeRightMenu = data.rightMenus;
this.exchangeContent = data;
this.loading = false;
})
}
@action
getCurrentPageDatas = (current = this.pagination.current, pageSize = this.pagination.pageSize) => {
this.getProjectList({
pageIndex: current,
pageSize: pageSize,
prjname: this.prjValue
});
}
@action
changeSelectedKey = (key) => {
this.setPrjid(key);
this.showSlideModal(false)
}
@action
onSearchChange = (value) =>{
this.prjValue = value;
}
@action
onSearchListItem = (value) => {
this.prjValue = value;
this.pagination.current = 1;
this.getCurrentPageDatas();
}
@action
getRightMenuForTop = () => {
}
@action
showSlideModal = (bool, v) => {
this.SlideModalVisible = bool;
this.taskid = typeof (v) == "object" ? v.id : v;
}
setSelectedTreeKey = (key) => {
if( this.selectedTreeKey !== key){
this.selectedTreeKey = key;
}
this.prjValue = "";
}
@action
clearStatus = () =>{
this.columns = [];
}
//form 重置
clearFormFields=()=>{
if(this.tabsStore.activeKey == "3"){
this.exchangeform.reset(); //清除查询条件值
}
if(this.tabsStore.activeKey == "0"){
this.boardform.reset(); //清除查询条件值
}
}
//高级搜索设值
setFormFields=(value)=>{
if(this.tabsStore.activeKey == "3"){ //相关交流
this.exchangeform.updateFields(value, false); //true代表完全覆盖方式更新条件值
}
}
changeSearchType = (searchType) => {
this.searchType = searchType;
this.searchKanBanView(false);
}
setIsNow=(v)=>{
this.isNow = v;
}
}
export default new ProjectBoardStore