vue-ant-patterns
Version:
vue-ant-patterns
658 lines (586 loc) • 19.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _regenerator = require('babel-runtime/regenerator');
var _regenerator2 = _interopRequireDefault(_regenerator);
var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');
var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);
var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _vueTypes = require('ant-design-vue/lib/_util/vue-types');
var _vueTypes2 = _interopRequireDefault(_vueTypes);
var _BQueryCondition = require('./BQueryCondition');
var _BQueryCondition2 = _interopRequireDefault(_BQueryCondition);
var _ViewItem = require('./ViewItem');
var _ViewItem2 = _interopRequireDefault(_ViewItem);
var _TopTools = require('./TopTools');
var _TopTools2 = _interopRequireDefault(_TopTools);
var _request = require('../_biz-utils/request');
var _request2 = _interopRequireDefault(_request);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
/*
* @Author: liuyanxin
* @Date: 2020-06-29 09:19:41
* @LastEditTime: 2021-05-25 09:08:56
* @LastEditors: liuyanxin
* @Description:
* @FilePath: \vue-patterns\biz\b-query-panel\index.jsx
*/
var API_PLATFORM = (global || window).globalJSConfig.SERVICE_CONFIG.API_PLATFORM;
var ctl = API_PLATFORM + 'conditionController';
var saveItemViewUrl = ctl + '/saveCondition';
var deleteItemUrl = ctl + '/deleteConditions';
var getConditionListUrl = ctl + '/getConditionDTOList';
var mValues = [{ code: '1', name: '==', title: '等于' }, { code: '2', name: '>', title: '大于' }, { code: '3', name: '>=', title: '大于等于' }, { code: '4', name: '<', title: '小于' }, { code: '5', name: '<=', title: '小于等于' }, { code: '6', name: '<>', title: '不等于' }, { code: '9', name: '*=', title: '等于(模糊)' }, { code: '10', name: '~=', title: '包含于' }];
var BQueryPanel = {
name: 'BQueryPanel',
ConditionItem: _BQueryCondition2['default'],
components: {
ViewItem: _ViewItem2['default'],
TopTools: _TopTools2['default']
},
props: {
prefixCls: _vueTypes2['default'].string.def('depot-dquerypanel'),
visible: _vueTypes2['default'].bool.def(false),
selectViewCode: '',
autoLoad: _vueTypes2['default'].bool.def(true),
queryItemKey: _vueTypes2['default'].string.def('')
},
watch: {
visible: function visible(val, oval) {
this.isvisible = val;
}
},
model: {
prop: 'visible',
event: 'changeVisible'
},
data: function data() {
var isvisible = this.visible;
return {
isvisible: isvisible,
queryList: [],
conditionAllList: [],
conditionOldList: [],
conditionDelList: [],
selectCode: '',
showSaveItem: false,
saveItemName: '',
showConditionText: false,
editConViewVisible: false
};
},
mounted: function mounted() {
this.getConditionList();
if (this.autoLoad) this.doQuery();
},
methods: {
/**
* @description: render顶部查询视图
* @param {type}
* @return:
*/
renderDataView: function renderDataView() {
var _this = this;
var h = this.$createElement;
var prefixCls = this.prefixCls;
var dvProps = {
'class': (0, _classnames2['default'])((0, _defineProperty3['default'])({}, prefixCls + '-dataView', true))
};
var dvitemProps = {
'class': (0, _classnames2['default'])((0, _defineProperty3['default'])({}, prefixCls + '-dataView-itemArea', true))
};
return h(
'd-container-h',
dvProps,
[h(
'span',
{ style: 'width:70px;line-height:30px' },
['\u6570\u636E\u89C6\u56FE\uFF1A']
), h(
'd-container-h',
dvitemProps,
[this.conditionAllList.length !== 0 ? h(
'a-row',
{
attrs: { type: 'flex' }
},
[this.conditionAllList.map(function (_citem) {
return h('a-col', [h('view-item', {
attrs: {
conditionItem: _citem,
selected: _citem.id === _this.selectCode,
editConViewVisible: _this.editConViewVisible
},
on: {
'selectview': _this.selectView,
'delView': _this.delView
}
})]);
})]
) : h(
'span',
{ style: 'line-height:30px;color:rgb(0,0,0,.25)' },
['\u70B9\u51FB\u4E0B\u65B9\u201C\u4FDD\u5B58\u4E3A\u89C6\u56FE\u201D\u6309\u94AE\uFF0C\u53EF\u5C06\u67E5\u8BE2\u6761\u4EF6\u4FDD\u5B58\u4E0B\u6B21\u4F7F\u7528']
)]
), h('a-divider', { style: 'margin-top:10px', attrs: { type: 'vertical' }
}), this.editConViewVisible ? h('d-container-h', [h(
'a-button',
{ 'class': 'margin-right-xs', on: {
'click': this.cancelEditView
}
},
['\u53D6\u6D88']
), h(
'a-button',
{
on: {
'click': this.completeDel
}
},
['\u5B8C\u6210\u7F16\u8F91']
)]) : h(
'a-button',
{
on: {
'click': function click() {
_this.conditionOldList = [].concat((0, _toConsumableArray3['default'])(_this.conditionAllList));
_this.editConViewVisible = true;
}
}
},
['\u7F16\u8F91\u6570\u636E\u89C6\u56FE']
)]
);
},
/**
* @description: 取消编辑视图
* @param {type}
* @return {type}
*/
cancelEditView: function cancelEditView() {
this.conditionAllList = [].concat((0, _toConsumableArray3['default'])(this.conditionOldList));
this.conditionDelList = [];
this.conditionOldList = [];
this.editConViewVisible = false;
},
/**
* @description: render中间查询表格
* @param {type}
* @return:
*/
renderFormView: function renderFormView() {
var h = this.$createElement;
return h(
'a-row',
{
attrs: { type: 'flex' }
},
[this.$slots['default']]
);
},
/**
* @description: render底部按钮栏
* @param {type}
* @return:
*/
renderFootTool: function renderFootTool() {
var h = this.$createElement;
var showSaveItem = this.showSaveItem;
return h('a-row', [h(
'a-col',
{
attrs: { span: '8' }
},
[h(
'a-button',
{
attrs: { type: 'primary' },
'class': 'margin-right-xs', on: {
'click': this.doQuery
}
},
['\u67E5\u8BE2']
), h(
'a-button',
{
on: {
'click': this.resetPanel
}
},
['\u91CD\u7F6E']
), h('a-divider', { style: 'margin-left:0px', attrs: { type: 'vertical' }
}), showSaveItem ? this.renderSaveItem() : h(
'a-button',
{
on: {
'click': this.showSaveQueryView
}
},
['\u4FDD\u5B58\u4E3A\u89C6\u56FE']
)]
), h('a-col', {
attrs: { span: '8' },
style: 'text-align:center' }), h(
'a-col',
{
attrs: { span: '8' }
},
[h(
'a-button',
{ style: 'float:right', on: {
'click': this.changeVisible
}
},
['\u6536\u8D77\u67E5\u8BE2\u9762\u677F']
)]
)]);
},
renderSaveItem: function renderSaveItem() {
var _this2 = this;
var h = this.$createElement;
var saveItemName = this.saveItemName;
return h(
'd-container-h',
{ 'class': 'bg' },
[h('a-input', {
attrs: {
value: saveItemName,
placeholder: '\u8BF7\u8F93\u5165\u89C6\u56FE\u540D\u79F0'
},
on: {
'change': this.changeSaveItemName
},
style: 'width:160px;',
'class': 'margin-right-xs' }), h(
'a-button',
{
on: {
'click': this.saveItemView
},
'class': 'margin-right-xs' },
['\u4FDD\u5B58']
), h(
'a-button',
{
on: {
'click': function click() {
_this2.saveItemName = '';
_this2.showSaveItem = false;
}
}
},
['\u53D6\u6D88']
)]
);
},
/**
* @description: 保存查询视图
* @param {type}
* @return:
*/
saveItemView: function saveItemView() {
var _this3 = this;
var saveItemName = this.saveItemName;
if (saveItemName === '') {
return false;
}
var conitem = this.conditionAllList.find(function (_citem) {
return _citem.name === _this3.saveItemName;
});
if (conitem !== undefined) {
this.$confirm({
title: '您已保存过名为【' + conitem.name + '】的查询，确认覆盖原有记录吗？',
onOk: function onOk() {
_this3.doSaveItemView(conitem.id);
},
onCancel: function onCancel() {}
});
} else {
this.doSaveItemView(null);
}
},
/**
* @description: 保存查询视图
* @param {type}
* @return:
*/
doSaveItemView: function () {
var _ref = (0, _asyncToGenerator3['default'])( /*#__PURE__*/_regenerator2['default'].mark(function _callee(sid) {
var _slots, resArr, queryItemKey, pkey, paramObj, res;
return _regenerator2['default'].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_slots = this.$slots['default'].map(function (_ditem) {
if (_ditem.tag !== undefined) {
if (_ditem.child.conditionData !== null) {
return _ditem.child.conditionData;
}
}
});
resArr = _slots.filter(function (_si) {
return _si !== undefined;
});
queryItemKey = this.queryItemKey;
pkey = queryItemKey ? this.$route.fullPath + '|' + queryItemKey : this.$route.fullPath;
paramObj = {
url: saveItemViewUrl,
method: 'post',
data: {
key: pkey,
value: JSON.stringify(resArr),
oid: sid,
name: this.saveItemName,
url: ''
}
};
_context.next = 7;
return (0, _request2['default'])(paramObj);
case 7:
res = _context.sent;
if (sid === null) {
this.conditionAllList = this.conditionAllList.concat(res.data.data);
} else {
this.conditionAllList.forEach(function (_citem) {
if (_citem.id === sid) {
_citem = res.data.data[0];
}
});
}
this.saveItemName = '';
this.showSaveItem = false;
case 11:
case 'end':
return _context.stop();
}
}
}, _callee, this);
}));
function doSaveItemView(_x) {
return _ref.apply(this, arguments);
}
return doSaveItemView;
}(),
changeSaveItemName: function changeSaveItemName(e) {
this.saveItemName = e.target.value;
},
/**
* @description: 保存查询视图
* @param {type}
* @return:
*/
showSaveQueryView: function showSaveQueryView() {
this.showSaveItem = true;
},
delView: function delView(conditionItem) {
var id = conditionItem.id;
var dindex = this.conditionAllList.findIndex(function (_citem) {
return _citem.id === id;
});
this.conditionDelList.push(this.conditionAllList[dindex]);
this.conditionAllList.splice(dindex, 1);
},
selectView: function selectView(scode) {
this.selectCode = scode;
if (scode === '') {
this.resetPanel();
} else {
var selView = this.conditionAllList.find(function (_citem) {
return _citem.id === scode;
});
var con_arr = JSON.parse(selView.conditionValue);
var _slots = this.$slots['default'].filter(function (_ditem) {
return _ditem.tag !== undefined;
});
_slots.forEach(function (_sitem, _sindex) {
_sitem.child.changeView(con_arr[_sindex]);
});
}
},
changeVisible: function changeVisible() {
this.isvisible = !this.isvisible;
this.$emit('changeVisible', this.isvisible);
},
collectData: function collectData() {
var _slots = this.$slots['default'].map(function (_ditem) {
if (_ditem.tag !== undefined) {
if (_ditem.child.conditionData !== null) {
return _ditem.child.conditionData;
}
}
});
var resArr = _slots.filter(function (_si) {
return _si !== undefined && _si.value && _si.value.length !== 0;
});
this.queryList = resArr;
},
/**
* @description: 执行查询
* @param {type}
* @return:
*/
doQuery: function doQuery() {
this.collectData();
this.$emit('doQuery', this.queryList);
},
resetPanel: function resetPanel() {
this.selectCode = '';
this.$slots['default'].forEach(function (_si) {
if (_si.tag !== undefined) {
_si.child.resetItem();
}
});
},
completeDel: function () {
var _ref2 = (0, _asyncToGenerator3['default'])( /*#__PURE__*/_regenerator2['default'].mark(function _callee2() {
var ids, paramObj, res;
return _regenerator2['default'].wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
ids = this.conditionDelList.map(function (_cditem) {
return _cditem.id;
});
paramObj = {
url: deleteItemUrl,
method: 'post',
data: {
oids: ids
}
};
_context2.next = 4;
return (0, _request2['default'])(paramObj);
case 4:
res = _context2.sent;
this.editConViewVisible = false;
this.getConditionList();
case 7:
case 'end':
return _context2.stop();
}
}
}, _callee2, this);
}));
function completeDel() {
return _ref2.apply(this, arguments);
}
return completeDel;
}(),
/**
* @description: 获取条件列表
* @param {type}
* @return:
*/
getConditionList: function () {
var _ref3 = (0, _asyncToGenerator3['default'])( /*#__PURE__*/_regenerator2['default'].mark(function _callee3() {
var _this4 = this;
var queryItemKey, pkey, paramObj, res, sindex;
return _regenerator2['default'].wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
queryItemKey = this.queryItemKey;
pkey = queryItemKey ? this.$route.fullPath + '|' + queryItemKey : this.$route.fullPath;
paramObj = {
url: getConditionListUrl,
method: 'post',
data: {
key: pkey
}
};
_context3.next = 5;
return (0, _request2['default'])(paramObj);
case 5:
res = _context3.sent;
if (res.data.code === 200) {
this.conditionAllList = res.data.data;
this.conditionOldList = [];
this.conditionDelList = [];
sindex = this.conditionAllList.findIndex(function (_caitem) {
return _caitem.id === _this4.selectCode;
});
if (sindex === -1) {
this.selectCode = '';
}
}
case 7:
case 'end':
return _context3.stop();
}
}
}, _callee3, this);
}));
function getConditionList() {
return _ref3.apply(this, arguments);
}
return getConditionList;
}(),
setOperators: function setOperators(oItems) {
var _this5 = this;
if (oItems) {
oItems.forEach(function (_oitem) {
_this5.$slots['default'].forEach(function (_ditem) {
if (_ditem.tag !== undefined) {
if (_ditem.child.conditionData !== null) {
if (_oitem.code === _ditem.child.conditionData.code) {
var _ov = mValues.find(function (_m) {
return _m.name === _oitem.value;
}).code;
_ditem.child.changeMiddleValue(_ov);
}
}
}
});
});
}
}
},
render: function render() {
var _cx3,
_cx4,
_this6 = this;
var h = arguments[0];
var prefixCls = this.prefixCls,
isvisible = this.isvisible,
conditionAllList = this.conditionAllList,
showConditionText = this.showConditionText,
selectCode = this.selectCode;
var constArea = {
'class': (0, _classnames2['default'])((_cx3 = {}, (0, _defineProperty3['default'])(_cx3, '' + prefixCls, true), (0, _defineProperty3['default'])(_cx3, prefixCls + '-hide', showConditionText), _cx3))
};
var modelViewItemProps = {
'class': (0, _classnames2['default'])((_cx4 = {}, (0, _defineProperty3['default'])(_cx4, prefixCls + '-modelVitem', true), (0, _defineProperty3['default'])(_cx4, 'margin-bottom-xs', true), _cx4))
};
return h(
'div',
{ 'class': (0, _classnames2['default'])((0, _defineProperty3['default'])({}, prefixCls + '-hide', !isvisible)) },
[h(_TopTools2['default'], {
'class': (0, _classnames2['default'])((0, _defineProperty3['default'])({}, prefixCls + '-hide', !showConditionText)),
attrs: { conditionAllList: conditionAllList,
selectCode: selectCode
},
on: {
'changestate': function changestate() {
_this6.showConditionText = false;
},
'changeSelect': this.selectView
}
}), h(
'div',
constArea,
[this.renderDataView(), h('a-divider'), this.renderFormView(), h('a-divider'), this.renderFootTool()]
)]
);
}
};
BQueryPanel.install = function (Vue) {
Vue.component(BQueryPanel.name, BQueryPanel);
Vue.component(_BQueryCondition2['default'].name, _BQueryCondition2['default']);
};
exports['default'] = BQueryPanel;