482 lines
11 KiB
JavaScript
482 lines
11 KiB
JavaScript
import {
|
||
observable,
|
||
action,
|
||
computed,
|
||
} from 'mobx';
|
||
import {
|
||
WeaDropdown,
|
||
WeaLocaleProvider,
|
||
} from 'ecCom';
|
||
import {
|
||
WeaForm,
|
||
WeaTableNew
|
||
} from 'comsMobx';
|
||
import {
|
||
Button,
|
||
} from 'antd';
|
||
const getLabel = WeaLocaleProvider.getLabel;
|
||
const {
|
||
TableStore
|
||
} = WeaTableNew;
|
||
const {
|
||
ButtonSelect
|
||
} = WeaDropdown;
|
||
import Base from './base';
|
||
|
||
export default class Common extends Base {
|
||
constructor(props) {
|
||
super(props);
|
||
const {
|
||
store,
|
||
api,
|
||
excelstore
|
||
} = props;
|
||
this.specific = store;
|
||
this.api = api;
|
||
this.excelImport = excelstore;
|
||
}
|
||
|
||
@observable permission = {
|
||
hasRight: false,
|
||
loading: true,
|
||
}
|
||
|
||
/**
|
||
* @DateTime 2019-05-16
|
||
* @param {Function} callback 回调函数
|
||
* @param {String} name 接口名称（非必填，默认为getHasRight）
|
||
*/
|
||
@action callPermissionAPI = (callback, name) => {
|
||
if (!this.api) {
|
||
console && console.error && console.error('api is null');
|
||
return;
|
||
}
|
||
|
||
const apiName = name ? name : 'getHasRight';
|
||
|
||
if (!this.api[apiName]) {
|
||
console && console.error && console.error('请传入正确的权限接口名称！');
|
||
return;
|
||
};
|
||
|
||
this.api[apiName]().then(datas => {
|
||
const {
|
||
hasRight
|
||
} = datas;
|
||
|
||
this.permission.hasRight = hasRight;
|
||
this.permission.loading = false;
|
||
if (hasRight) {
|
||
callback && callback();
|
||
}
|
||
}).catch(error => {});
|
||
}
|
||
|
||
@observable tConf = [];
|
||
@observable rConf = [];
|
||
|
||
/**
|
||
* @DateTime 2019-05-16
|
||
* @param {Object} params 接口参数（不传参的话，默认为空对象）
|
||
* @param {Function} callback 回调函数
|
||
* @param {String} name 接口名称（非必填，默认为getRightMenu）
|
||
*/
|
||
@action callRightMenuAPI = (params = {}, callback, name) => {
|
||
const apiName = name ? name : 'getRightMenu';
|
||
|
||
if (!this.api[apiName]) {
|
||
console && console.error && console.error('请传入正确的菜单接口名称！');
|
||
return;
|
||
};
|
||
|
||
this.api && this.api[apiName](params).then(datas => {
|
||
const {
|
||
btnMenu = []
|
||
} = datas;
|
||
|
||
const {
|
||
tConf,
|
||
rConf
|
||
} = this.convertDatasToTopRightConf(btnMenu);
|
||
|
||
this.tConf = tConf;
|
||
this.rConf = rConf;
|
||
|
||
callback && callback();
|
||
}, error => {})
|
||
}
|
||
|
||
@computed get topButtons() {
|
||
return this.tConf && this.tConf.map((item, index) => {
|
||
const {
|
||
menuFun,
|
||
menuName
|
||
} = item;
|
||
|
||
const status = this.specific && this.specific.getButtonStatus && this.specific.getButtonStatus()[index];
|
||
|
||
return (
|
||
<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6xqp99@${index}`}
|
||
type="primary"
|
||
disabled={status}
|
||
onClick={() => this.specific && this.specific[menuFun]()}
|
||
>
|
||
{menuName}
|
||
</Button>
|
||
)
|
||
});
|
||
}
|
||
|
||
@computed get dropMenuDatas() {
|
||
return this.rConf && this.rConf.map((item, index) => {
|
||
const {
|
||
menuFun,
|
||
menuName,
|
||
menuIcon
|
||
} = item;
|
||
|
||
const status = this.specific && this.specific.getButtonStatus && this.specific.getButtonStatus()[index];
|
||
|
||
return {
|
||
key: menuFun,
|
||
disabled: status,
|
||
icon: <i className={`${menuIcon}`} />,
|
||
content: menuName,
|
||
onClick: () => this.specific && this.specific[menuFun]()
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* @DateTime 2019-05-21
|
||
* 概述：导入Excel
|
||
* @param {String} name 模版名称
|
||
* @param {String} title 弹框名称
|
||
* @param {String} type 导出类型
|
||
* @param {Boolean} visible 弹框是否可视
|
||
*/
|
||
importExcel = (name, title, type, visible) => {
|
||
const params = [name, title, type, visible];
|
||
const queue = ['setTempletName', 'setImportDialogTitle', 'setImportType', 'setImportDialogVisible'];
|
||
|
||
queue.forEach((f, i) => {
|
||
const param = params[i];
|
||
this.excelImport && this.excelImport[f](param);
|
||
});
|
||
}
|
||
|
||
//头部中的下拉按钮
|
||
@observable buttonSelect = {
|
||
selectedKey: '0',
|
||
datas: [],
|
||
}
|
||
|
||
@action setButtonSelectDatas = (datas) => {
|
||
this.buttonSelect.datas = datas;
|
||
}
|
||
|
||
//衍生出头部下拉菜单按钮
|
||
@computed get topButtonSelect() {
|
||
const {
|
||
selectedKey,
|
||
datas
|
||
} = this.buttonSelect;
|
||
|
||
if (datas.length === 0) {
|
||
return
|
||
}
|
||
|
||
const disabled = this.specific.getButtonSelectStatus();
|
||
|
||
return (
|
||
<ButtonSelect ecId={`${this && this.props && this.props.ecId || ''}_ButtonSelect@xvr81v`}
|
||
datas={datas}
|
||
selectedKey={selectedKey}
|
||
btnProps={{disabled}}
|
||
btnOnClick={key=> this.handleBtnClick(key)}
|
||
menuOnClick={key=>this.handleMenuClick(key)}
|
||
/>
|
||
)
|
||
}
|
||
|
||
handleBtnClick = (key) => {
|
||
if (!this.specific) {
|
||
console && console.error && console.error('specific is null');
|
||
return
|
||
}
|
||
if (!this.specific.handleBtnClick) {
|
||
console && console.error && console.error('handleBtnClick is not defined');
|
||
return
|
||
}
|
||
this.specific.handleBtnClick(key);
|
||
}
|
||
|
||
handleMenuClick = (datas) => {
|
||
if (!this.specific) {
|
||
console && console.error && console.error('specific is null');
|
||
return
|
||
}
|
||
if (!this.specific.handleBtnClick) {
|
||
console && console.error && console.error('handleMenuClick is not defined');
|
||
return
|
||
}
|
||
this.specific.handleMenuClick(datas);
|
||
}
|
||
|
||
//高级搜索中需要联动的字段名称
|
||
linkageFieldName = '';
|
||
|
||
//Tab组件的动态物料
|
||
@observable tab = {
|
||
showSearchAd: false,
|
||
form: new WeaForm(),
|
||
selectedKey: '1',
|
||
datas: [],
|
||
}
|
||
|
||
/**
|
||
* @DateTime 2019-05-22
|
||
* 概述：获取渲染高级搜索内表单所需的数据。
|
||
* @param {Object} params 参数
|
||
* @param {Function} callback 回调函数
|
||
* @param {String} name 接口名称（默认为getCondition）
|
||
*/
|
||
@action callSearchConditionAPI = (callback, params = {}, name) => {
|
||
const apiName = name ? name : 'getCondition';
|
||
|
||
if (!this.api[apiName]) {
|
||
console && console.error && console.error('请传入正确的高级搜索接口名称！');
|
||
return;
|
||
};
|
||
|
||
this.tab.form = new WeaForm();
|
||
this.api[apiName]().then(datas => {
|
||
const {
|
||
condition
|
||
} = datas;
|
||
|
||
if (condition.length === 1) {
|
||
condition[0].title = '';
|
||
}
|
||
|
||
const {
|
||
form
|
||
} = this.tab;
|
||
|
||
form.setCondition(condition);
|
||
callback && callback(form.getFormParams());
|
||
}, error => {})
|
||
}
|
||
|
||
//根据高级搜索内linkageFieldName字段的值衍生出基本搜索输入框内的值
|
||
@computed get searchsBaseValue() {
|
||
const {
|
||
form
|
||
} = this.tab;
|
||
|
||
return form.getFormParams()[this.linkageFieldName];
|
||
}
|
||
|
||
//控制弹框显隐
|
||
@action setShowSearchAd = (bool) => {
|
||
this.tab.showSearchAd = bool;
|
||
}
|
||
|
||
//搜索
|
||
@action onSearch = (callback) => {
|
||
if (callback) {
|
||
callback();
|
||
} else {
|
||
const {
|
||
getSearchListParams,
|
||
getSearchListCallback,
|
||
getSearchListName
|
||
} = this.specific;
|
||
this.callSearchListAPI(getSearchListParams(), getSearchListCallback(), getSearchListName());
|
||
}
|
||
this.setShowSearchAd(false);
|
||
}
|
||
|
||
//基本输入框触发的事件
|
||
@action onSearchChange = (val) => {
|
||
const {
|
||
form
|
||
} = this.tab;
|
||
|
||
this.linkageFieldName && form.updateFields({
|
||
[this.linkageFieldName]: val
|
||
});
|
||
}
|
||
|
||
//设置生成页签的数据
|
||
@action setTabDatas = (datas) => {
|
||
this.tab.datas = datas;
|
||
}
|
||
|
||
//设置选中页签的KEY值
|
||
@action setSelectedKey = (key, callback) => {
|
||
this.tab.selectedKey = key;
|
||
callback && callback();
|
||
}
|
||
|
||
//根据form衍生出高级搜索表单
|
||
@computed get searchsAd() {
|
||
const {
|
||
form
|
||
} = this.tab;
|
||
return <div
|
||
onKeyDown={(e) =>( e.keyCode == 13 && e.target.tagName === "INPUT") && this.onSearch()}
|
||
>{form.render()}</div>;
|
||
}
|
||
|
||
//设置高级搜索中需要联动的字段名称
|
||
setSearchlinkageFieldName = (name) => {
|
||
this.linkageFieldName = name;
|
||
}
|
||
|
||
|
||
@observable table = {
|
||
comsWeaTableStore: new TableStore(),
|
||
}
|
||
|
||
/**
|
||
* @DateTime 2019-05-15
|
||
* @param {Object} params 接口参数
|
||
* @param {Function} callback 回调函数
|
||
* @param {String} name 接口名称（非必填，默认为getRecords）
|
||
*/
|
||
@action callSearchListAPI = (params, callback, name) => {
|
||
const apiName = name ? name : 'getRecords';
|
||
|
||
if (!this.api[apiName]) {
|
||
console && console.error && console.error('请传入正确的列表接口名称！');
|
||
return;
|
||
};
|
||
|
||
this.api[apiName](params).then(datas => {
|
||
const {
|
||
sessionkey,
|
||
} = datas;
|
||
this.table.comsWeaTableStore = new TableStore();
|
||
this.table.comsWeaTableStore.getDatas(sessionkey, 1);
|
||
callback && callback();
|
||
}, error => {})
|
||
}
|
||
|
||
reRenderColumns = (columns) => {
|
||
this.specific && this.specific.reRenderColumns && this.specific.reRenderColumns(columns);
|
||
}
|
||
|
||
onOperatesClick = (record, rIndex, operate) => {
|
||
this.specific && this.specific.onOperatesClick && this.specific.onOperatesClick(record, rIndex, operate);
|
||
}
|
||
|
||
@observable dialog = {
|
||
visible: false,
|
||
title: '',
|
||
};
|
||
|
||
@action openDialog = (title, callback) => {
|
||
this.dialog.visible = true;
|
||
this.dialog.title = title;
|
||
callback && callback();
|
||
}
|
||
|
||
@action closeDialog = (callback) => {
|
||
this.dialog.visible = false;
|
||
callback && callback();
|
||
}
|
||
|
||
orgTree = {
|
||
id: '',
|
||
type: '',
|
||
pid: '',
|
||
name: ''
|
||
}
|
||
|
||
handleOrgTreeNodeClick = (event, ids, nodeids, nodes) => {
|
||
this.convertDatasToIdType(nodes);
|
||
|
||
this.specific.handleOrgTreeNodeClick && this.specific.handleOrgTreeNodeClick(event, ids, nodeids, nodes);
|
||
}
|
||
|
||
convertDatasToIdType = (nodes) => {
|
||
if (nodes) {
|
||
['id', 'type', 'pid', 'name'].forEach(v => {
|
||
this.orgTree[v] = nodes[0][v];
|
||
});
|
||
}
|
||
}
|
||
|
||
@observable triggerRefresh = false;
|
||
|
||
@action trigger = (callback) => {
|
||
this.triggerRefresh = !this.triggerRefresh;
|
||
callback && callback();
|
||
}
|
||
|
||
|
||
@observable monthYear = {
|
||
cKey: '1',
|
||
date: new Date()
|
||
}
|
||
|
||
/**
|
||
* @DateTime 2019-05-22
|
||
* 概述：切换年月 默认筛选列表数据
|
||
* @param {String} key 点击项的key值
|
||
*/
|
||
@action handleMonthYearClick = (key) => {
|
||
this.monthYear.cKey = key;
|
||
if (!this.specific) {
|
||
return;
|
||
}
|
||
if (this.specific.handleMonthYearClick) {
|
||
this.specific.handleMonthYearClick();
|
||
} else {
|
||
this.callSearchListAPI(this.specific.getSearchListParams());
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @DateTime 2019-05-22
|
||
* 概述：选择日期 默认筛选列表数据
|
||
* @param {Date} date 日期
|
||
*/
|
||
@action handleDatePickerChange = (date) => {
|
||
this.monthYear.date = date;
|
||
if (!this.specific) {
|
||
return;
|
||
}
|
||
if (this.specific.handleDatePickerChange) {
|
||
this.specific.handleDatePickerChange();
|
||
} else {
|
||
this.callSearchListAPI(this.specific.getSearchListParams());
|
||
}
|
||
}
|
||
|
||
//重置年月
|
||
@action resetMonthYear = () => {
|
||
this.monthYear.date = new Date();
|
||
this.handleMonthYearClick('1');
|
||
}
|
||
|
||
/**
|
||
* @DateTime 2019-05-23
|
||
* 概述：校验表单
|
||
* @param {Object} pack 盛放form的容器
|
||
* @param {Function} callback 校验通过的回调函数
|
||
*/
|
||
validateForm = (pack, callback) => {
|
||
this[pack].form.validateForm().then(f => {
|
||
if (f.isValid) {
|
||
callback && callback();
|
||
} else {
|
||
f.showErrors();
|
||
callback && callback();
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
} |