mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
395 lines (393 loc) • 14.9 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _Search = _interopRequireDefault(require("../style/Search.style"));
var _Item = _interopRequireDefault(require("../Item.js"));
var _setting = require("../setting");
var _core = require("@vueuse/core");
var _router = require("@vueuse/router");
var _SaveHistory = _interopRequireDefault(require("./SaveHistory.js"));
var _History = _interopRequireDefault(require("./History.js"));
var _util = require("../util");
var _components = require("../../components");
var _lodashEs = require("lodash");
require("../../ProTable/src/proTableTypes");
var _useConfigInject2 = _interopRequireDefault(require("ant-design-vue/es/config-provider/hooks/useConfigInject"));
var _classNames2 = _interopRequireDefault(require("ant-design-vue/es/_util/classNames"));
// import { JTableProps } from '../../ProTable/src/j-table';
var advancedSearchProps = function advancedSearchProps() {
return {
columns: {
type: Array,
default: function _default() {
return [];
},
required: true
},
type: {
type: String,
default: 'advanced'
},
target: {
type: String,
default: '',
required: true
},
class: {
type: String,
default: ''
},
request: {
type: Function,
default: undefined
},
historyRequest: {
type: Function,
default: undefined
},
deleteRequest: {
type: Function,
default: null
},
deleteKey: {
type: String,
default: 'key'
},
routerMode: {
type: String,
default: 'hash'
},
style: {
type: [String, Object],
default: undefined
}
};
};
var AdvancedSearch = (0, _vue.defineComponent)({
name: 'AdvancedSearch',
emits: ['search'],
props: advancedSearchProps(),
setup: function setup(props, _ref) {
var emit = _ref.emit;
var searchRef = (0, _vue.ref)(null);
var searchRefContentRef = (0, _vue.ref)(null);
var _useElementSize = (0, _core.useElementSize)(searchRef),
width = _useElementSize.width;
var q = (0, _router.useRouteQuery)('q');
var target = (0, _router.useRouteQuery)('target');
// const q = ref('');
// const target = ref('');
var hasOnceSearch = (0, _vue.ref)(false);
// 是否展开更多筛选
var expand = (0, _vue.ref)(false);
//
// 组件方向
var layout = (0, _vue.ref)('horizontal');
var compatible = (0, _vue.ref)(false);
// 当前组件宽度 true 大于1000
var screenSize = (0, _vue.ref)(true);
var resetNumber = (0, _vue.ref)(1);
var columnOptionMap = new Map();
var searchItems = (0, _vue.ref)([]); // 当前查询条件
var termsData = (0, _vue.reactive)({
terms: [{
terms: [null, null, null]
}, {
terms: [null, null, null],
type: 'and'
}]
});
var historyItemClick = function historyItemClick(content) {
try {
var _handleQData;
termsData.terms = ((_handleQData = (0, _util.handleQData)((0, _util.compatibleOldTerms)(content))) === null || _handleQData === void 0 ? void 0 : _handleQData.terms) || [];
expand.value = (0, _util.hasExpand)(termsData.terms);
searchSubmit();
} catch (e) {
console.warn("Search\u7EC4\u4EF6\u4E2DhandleUrlParams\u5904\u7406JSON\u65F6\u5F02\u5E38\uFF1A\u3010".concat(e, "\u3011"));
}
};
/**
* 处理URL中的查询参数
* @param _params
*/
var handleUrlParams = function handleUrlParams(_params) {
// URL中的target和props的一致，则还原查询参数
if (props.target && _params.target === props.target && _params.q) {
var _handleQData2;
termsData.terms = ((_handleQData2 = (0, _util.handleQData)((0, _util.compatibleOldTerms)(_params.q))) === null || _handleQData2 === void 0 ? void 0 : _handleQData2.terms) || [];
expand.value = (0, _util.hasExpand)(termsData.terms);
emit('search', (0, _util.termsParamsFormat)(termsData, columnOptionMap));
}
};
var expandChange = function expandChange() {
expand.value = !expand.value;
if (!expand.value) {
// 收起
var firstItem = termsData.terms[0].terms[0];
termsData.terms = [{
terms: [firstItem, null, null]
}, {
terms: [null, null, null]
}];
}
};
var itemValueChange = function itemValueChange(value, index) {
if (index < 4) {
// 第一组数据
termsData.terms[0].terms[index - 1] = value;
} else {
// 第二组数据
termsData.terms[1].terms[index - 4] = value;
}
};
/**
* 重置查询
*/
var reset = function reset() {
termsData.terms = [{
terms: [null, null, null]
}, {
terms: [null, null, null],
type: 'and'
}];
expand.value = false;
if (props.type === 'advanced') {
q.value = null;
target.value = null;
}
resetNumber.value += 1;
emit('search', {
terms: []
});
};
/**
* 提交
*/
var searchSubmit = function searchSubmit() {
submitData();
if (props.type === 'advanced') {
addUrlParams();
}
};
var addUrlParams = function addUrlParams() {
q.value = JSON.stringify(termsData);
target.value = props.target;
};
var submitData = function submitData() {
emit('search', (0, _util.termsParamsFormat)(termsData, columnOptionMap));
};
/**
* 处理每项的key为Item组件所需要的key
*/
var handleItems = function handleItems() {
searchItems.value = [];
columnOptionMap.clear();
props.columns.forEach(function (item, index) {
var _item = (0, _lodashEs.cloneDeep)(item);
if (_item.search && Object.keys(_item.search).length) {
columnOptionMap.set(
// _item.search?.rename || _item.dataIndex,
_item.dataIndex, _item.search);
// 默认值
var search = _item.search;
var defaultTerms = null;
// 包含defaultValue 或者 defaultOnceValue
if (search.defaultValue !== undefined || search.defaultOnceValue) {
var _value = search.defaultValue || search.defaultOnceValue;
defaultTerms = {
type: 'and',
value: _value,
termType: search.defaultTermType || (0, _util.getTermTypeFn)(search.type),
column: _item.dataIndex
};
}
if (search.defaultValue !== undefined || search.defaultOnceValue !== undefined) {
hasOnceSearch.value = true;
}
searchItems.value.push((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _item.search), {}, {
sortIndex: _item.search.first ? 0 : index + 1,
title: _item.title,
// column: _item.search?.rename || _item.dataIndex,
column: _item.dataIndex
}));
if (defaultTerms) {
itemValueChange(defaultTerms, search.first ? 1 : index + 1);
}
}
});
submitData();
handleUrlParams({
q: q.value,
target: target.value
});
};
handleItems();
// const { resetAction, submitAction } = useFormContext();
var _useConfigInject = (0, _useConfigInject2.default)('advanced-search', props),
prefixCls = _useConfigInject.prefixCls;
var _useStyle = (0, _Search.default)(prefixCls),
_useStyle2 = (0, _slicedToArray2.default)(_useStyle, 2),
wrapSSR = _useStyle2[0],
hashId = _useStyle2[1];
var prefixClsValue = prefixCls.value;
var rootCls = (0, _classNames2.default)(prefixClsValue, (0, _defineProperty2.default)({}, hashId.value, true));
return function () {
return wrapSSR((0, _vue.createVNode)(_components.Form, {
"class": [rootCls],
"model": termsData,
"onFinish": searchSubmit
}, {
default: function _default() {
return [(0, _vue.createVNode)("div", {
"class": "".concat(prefixClsValue, "-warp senior ").concat(props.class),
"style": props.style
}, [props.type === 'advanced' ? (0, _vue.createVNode)("div", {
"ref": searchRefContentRef,
"class": "\n JSearch-content \n ".concat(expand.value || compatible.value ? 'senior-expand' : 'pack-up', " \n ").concat(screenSize.value ? 'big' : 'small', "\n ")
}, [(0, _vue.createVNode)("div", {
"class": "\n JSearch-items \n ".concat(expand.value ? 'items-expand' : '', " \n layout\n ")
}, [(0, _vue.createVNode)("div", {
"class": "JSearch-left"
}, [(0, _vue.createVNode)("div", {
"class": "left-items"
}, [(0, _vue.createVNode)(_Item.default, {
"expand": expand.value,
"index": 1,
"columns": searchItems.value,
"terms-item": termsData.terms[0].terms[0],
"reset": resetNumber.value,
"onChange": function onChange(v) {
return itemValueChange(v, 1);
}
}, null), expand.value ? [(0, _vue.createVNode)(_Item.default, {
"expand": expand.value,
"index": 2,
"columns": searchItems.value,
"terms-item": termsData.terms[0].terms[1],
"reset": resetNumber.value,
"onChange": function onChange(v) {
return itemValueChange(v, 2);
}
}, null), (0, _vue.createVNode)(_Item.default, {
"expand": expand.value,
"index": 3,
"columns": searchItems.value,
"terms-item": termsData.terms[0].terms[2],
"reset": resetNumber.value,
"onChange": function onChange(v) {
return itemValueChange(v, 3);
}
}, null)] : null])]), expand.value ? [(0, _vue.createVNode)("div", {
"class": "JSearch-center"
}, [(0, _vue.createVNode)(_components.Select, {
"value": termsData.terms[1].type,
"onUpdate:value": function onUpdateValue($event) {
return termsData.terms[1].type = $event;
},
"class": "center-select",
"style": "width: 100px",
"options": _setting.typeOptions
}, null)]), (0, _vue.createVNode)("div", {
"class": "JSearch-right"
}, [(0, _vue.createVNode)("div", {
"class": "right-items"
}, [[4, 5, 6].map(function (item) {
return (0, _vue.createVNode)(_Item.default, {
"key": "search_item_".concat(item),
"expand": expand,
"index": item,
"columns": searchItems,
"terms-item": termsData.terms[1].terms[item - 4],
"reset": resetNumber,
"onChange": function onChange(v) {
return itemValueChange(v, item);
}
}, null);
})])])] : null]), (0, _vue.createVNode)("div", {
"class": "JSearch-footer\n ".concat(expand.value || compatible.value ? 'expand' : '')
}, [(0, _vue.createVNode)("div", {
"class": "JSearch-footer--btns"
}, [(0, _vue.createVNode)(_components.Button, {
"type": "stroke",
"onClick": reset
}, {
default: function _default() {
return [' ', (0, _vue.createTextVNode)("\u91CD\u7F6E"), ' '];
}
}), (0, _vue.createVNode)(_SaveHistory.default, {
"terms": termsData,
"target": props.target,
"request": props.request
}, null), (0, _vue.createVNode)(_History.default, {
"target": props.target,
"request": props.historyRequest,
"delete-request": props.deleteRequest,
"delete-key": props.deleteKey,
"onClick": searchSubmit,
"onItemClick": historyItemClick
}, null)]), (0, _vue.createVNode)(_components.Button, {
"type": "link",
"class": "more-btn",
"onClick": expandChange
}, {
default: function _default() {
return [(0, _vue.createVNode)("span", {
"class": "more-text"
}, [' ', (0, _vue.createTextVNode)("\u66F4\u591A\u7B5B\u9009"), ' ']), (0, _vue.createVNode)(_components.AIcon, {
"type": "DoubleRightOutlined",
"class": "more-icon\n ".concat(expand.value ? 'more-up' : 'more-down')
}, null)];
}
})])]) : (0, _vue.createVNode)("div", {
"class": "JSearch-content single big pack-up"
}, [(0, _vue.createVNode)("div", {
"class": "JSearch-items"
}, [(0, _vue.createVNode)("div", {
"class": "JSearch-left"
}, [(0, _vue.createVNode)(_Item.default, {
"expand": false,
"index": 1,
"columns": searchItems.value,
"terms-item": termsData.terms[0].terms[0],
"reset": resetNumber.value,
"onChange": function onChange(v) {
return itemValueChange(v, 1);
}
}, null)])]), (0, _vue.createVNode)("div", {
"class": "JSearch-footer"
}, [(0, _vue.createVNode)("div", {
"class": "JSearch-footer--btns"
}, [(0, _vue.createVNode)(_components.FormItemRest, null, {
default: function _default() {
return [(0, _vue.createVNode)(_components.Button, {
"type": "stroke",
"onClick": reset
}, {
default: function _default() {
return [(0, _vue.createTextVNode)("\u91CD\u7F6E")];
}
}), (0, _vue.createVNode)(_components.Button, {
"html-type": "submit",
"type": "primary"
}, {
default: function _default() {
return [(0, _vue.createTextVNode)("\u641C\u7D22")];
}
})];
}
})])])])])];
}
}));
};
}
});
var _default2 = AdvancedSearch;
exports.default = _default2;