UNPKG

vue-ant-patterns

Version:

vue-ant-patterns

929 lines (781 loc) 28.4 kB
'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); var _defineProperty3 = _interopRequireDefault(_defineProperty2); var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray'); var _slicedToArray3 = _interopRequireDefault(_slicedToArray2); var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray'); var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2); var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); var _vue = require('vue'); var _vue2 = _interopRequireDefault(_vue); var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames); var _extend = require('extend'); var _extend2 = _interopRequireDefault(_extend); var _vueTypes = require('ant-design-vue/lib/_util/vue-types'); var _vueTypes2 = _interopRequireDefault(_vueTypes); var _LocaleReceiver = require('ant-design-vue/lib/locale-provider/LocaleReceiver'); var _LocaleReceiver2 = _interopRequireDefault(_LocaleReceiver); var _antDesignVue = require('ant-design-vue'); var _utils = require('../../lib/_utils'); var _mixinBase = require('./mixinBase'); var _mixinBase2 = _interopRequireDefault(_mixinBase); var _table = require('./table'); var _table2 = _interopRequireDefault(_table); var _bizUtils = require('../_biz-utils/'); var _components = require('../../lib/'); var _defaultProps = require('./defaultProps'); var _defaultProps2 = _interopRequireDefault(_defaultProps); var _PanelContent = require('./PanelContent'); var _PanelContent2 = _interopRequireDefault(_PanelContent); var _SectionCard = require('./components/SectionCard'); var _SectionCard2 = _interopRequireDefault(_SectionCard); var _utils2 = require('./utils'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } var TabPane = _antDesignVue.Tabs.TabPane; // import FormPanel from './PanelForm'; /* * @Author: w.pengfei * @Date: 2020-06-16 19:37:27 * @LastEditTime: 2021-04-21 12:54:52 * @Description: '业务模板' * @LastEditors: w.pengfei */ var Vertical = _components.DContainer.Vertical; var noop = function noop() { return new Promise(function (resolve) { resolve(); }); }; var FormPanelIns = _antDesignVue.Form.create()(_PanelContent2['default']); var BVm = { mixins: [_mixinBase2['default']], name: 'BVm', props: (0, _extends3['default'])({}, _defaultProps2['default'], { onlyPanelHideTabbar: _vueTypes2['default'].bool.def(true) }), model: { // 用于 v-model, 设置激活的 tab prop: 'activeTab', event: 'tabChange' }, created: function created() { /** * 通过 vmCode 查询到模板信息 */ var vmCode = this.$props.vmCode; if (vmCode) { /** * 获取模板 */ this.getTemplateDesc(); } }, data: function data() { var _$props = this.$props, activeTab = _$props.activeTab, activeTabId = _$props.activeTabId, vmStatus = _$props.vmStatus; return { localeCode: 'zh-cn', templateDescription: {}, // dataSource: {}, vDataCache: {}, vActiveTab: activeTab, vActiveTabId: activeTabId, v_status: vmStatus, /** * 页面设置系列 * 优先级更高 */ forceHidePanel: [], forceShowPanel: [], forceHideSection: [], forceShowSection: [], forceHideField: [], forceShowField: [], forceDisableField: [], forceEnableField: [], forceRequiredField: [], forceUnRequiredField: [], /** * label 缓存, 用于设置后恢复 */ oldFieldLabel: {}, /** * 通过请求回来的模板数据, 读取出是否可编辑区段 * 原系统使用控制可以编辑区段的变量名为 isConfig */ isConfig: false }; }, mounted: function mounted() { this.$emit('vmMounted', this); }, watch: { activeTabId: function activeTabId(v) { this.vActiveTabId = v; }, activeTab: function activeTab(v) { this.vActiveTab = v; }, vmCode: function vmCode() { this.getTemplateDesc(); } }, methods: { /** * 获取模板 */ getTemplateDesc: function getTemplateDesc() { var _this = this; var _$props2 = this.$props, queryTemplateParam = _$props2.queryTemplateParam, vmCode = _$props2.vmCode, panelInfo = _$props2.panelInfo, activeTab = _$props2.activeTab; var vActiveTab = this.vActiveTab; this.$root.isLoading = true; var param = (0, _extend2['default'])(true, queryTemplateParam, { data: { code: vmCode } }); // const [panelKey, panelCode, panelName] = panelInfo; // const { forceHidePanel: hideKeys, forceShowPanel: showKeys } = this; (0, _bizUtils.request)(param).then(function (res) { var resData = res.data; var msg = resData.msg, code = resData.code, data = resData.data; if (code === 200 && !(0, _utils.isEmptyObj)(data)) { var panelList = data.panelList; var cloneList = [].concat((0, _toConsumableArray3['default'])(panelList)); (0, _utils.sortList)(cloneList); data.panelList = cloneList; _this.templateDescription = data; _this.$emit('templateLoaded', (0, _extend2['default'])({}, data)); } else { _this.$message.error(msg); } }); }, /** * 从面板开始 */ renderPanel: function renderPanel() { var _$props3 = this.$props, onlyPanelHideTabbar = _$props3.onlyPanelHideTabbar, panelInfo = _$props3.panelInfo, activeTab = _$props3.activeTab; var templateDescription = this.templateDescription, vActiveTab = this.vActiveTab, hideKeys = this.forceHidePanel, showKeys = this.forceShowPanel; var _panelInfo = (0, _slicedToArray3['default'])(panelInfo, 3), panelKey = _panelInfo[0], panelCode = _panelInfo[1], panelName = _panelInfo[2]; var panelList = templateDescription.panelList; // const panelLength = panelList.length; var _getSlots = this.getSlots('panel'), firstSlot = _getSlots.firstSlot, lastSlot = _getSlots.lastSlot; var cloneList = [].concat((0, _toConsumableArray3['default'])(panelList)); cloneList = cloneList.map(function (panelItem) { var isDisplay = panelItem.isDisplay, key = panelItem[panelKey], code = panelItem[panelCode], name = panelItem[panelName]; if (hideKeys.includes(code)) { isDisplay = false; } if (showKeys.includes(code)) { isDisplay = true; } if (isDisplay) return panelItem; return null; }).filter(function (T) { return T; }); var firstSlotNode = firstSlot ? (0, _utils2.filterSlot)(firstSlot()) : null; var lastSlotNode = lastSlot ? (0, _utils2.filterSlot)(lastSlot()) : null; if (firstSlotNode && firstSlotNode.length) { cloneList.unshift(firstSlotNode); } if (lastSlotNode && lastSlotNode.length) { cloneList.push(lastSlotNode); } var panelLength = cloneList.length; if (!panelLength) return null; var firstItem = cloneList[0]; if (!activeTab) { /** * 未传默认激活的 tab, 内置设置第一个选中 */ if (!firstItem) return; var id = void 0; var code = void 0; if ((0, _utils.isVnode)(firstItem)) { if (Array.isArray(firstItem)) { code = id = firstItem[0].key; } else { code = id = firstItem.key; } } else { id = firstItem[panelInfo[0]]; code = firstItem[panelInfo[1]]; } this.vActiveTab = code; this.$emit('update:activeTabId', id); this.$emit('tabChange', code); } if (panelLength === 1 && onlyPanelHideTabbar) { if (!firstItem) return; /** * 在只有一个 panel 情况下, 不使用 tab * 直接输出区段 */ /** * 插槽直接返回 */ if ((0, _utils.isVnode)(firstItem)) return firstItem; this.getDefaultActiveTab(cloneList); return this.renderPanelItem(firstItem); } return this.renderTabs(cloneList); }, /** * 渲染 tab * panel 中的每一项, 为一个 tabPanel */ renderTabs: function renderTabs(panelList) { var _this2 = this; var h = this.$createElement; var panelInfo = this.$props.panelInfo; var vActiveTab = this.vActiveTab; var cloneList = [].concat((0, _toConsumableArray3['default'])(panelList)); var tabsProps = { props: { animated: false, activeKey: vActiveTab, tabBarStyle: { // 只有一个面板时隐藏 tabbar // 在前边做了相应的处理, 这里基本上没用了, 先留着 // display: onlyPanelHideTabbar && isOnlyPanel ? 'none' : '', } }, on: { change: function change(activeKey) { // 切换 tab 重置编辑状态为查看状态 _this2.v_status = 'view'; _this2.vActiveTab = activeKey; var curPanelItem = cloneList.find(function (it) { return it[panelInfo[1]] === activeKey || it.key === activeKey; }); var changePanelId = curPanelItem ? (0, _utils.isVnode)(curPanelItem) ? curPanelItem.key : curPanelItem[panelInfo[0]] : activeKey; _this2.vActiveTabId = changePanelId; _this2.$nextTick(function () { // 同步状态 _this2.$emit('update:vmStatus', _this2.v_status); _this2.$emit('update:activeTabId', _this2.vActiveTabId); _this2.$emit('tabChange', activeKey); }); } } }; return h( _antDesignVue.Tabs, tabsProps, [cloneList.map(function (it, index) { return _this2.renderTabPanel(it, index); })] ); }, /** * tabPanel * 渲染面板, 并根据插槽内容组装输出内容 */ renderTabPanel: function renderTabPanel(panelItem, index) { var h = this.$createElement; if (Array.isArray(panelItem) || (0, _utils.isVnode)(panelItem)) { return panelItem; } var panelInfo = this.$props.panelInfo; var _panelInfo2 = (0, _slicedToArray3['default'])(panelInfo, 3), panelKey = _panelInfo2[0], panelCode = _panelInfo2[1], panelName = _panelInfo2[2]; var isDisplay = panelItem.isDisplay, key = panelItem[panelKey], code = panelItem[panelCode], name = panelItem[panelName]; /** * 不显示的面板不渲染 */ var _getSlots2 = this.getSlots('panel'), afterSlot = _getSlots2.afterSlot, customSlot = _getSlots2.customSlot; var tabPaneProps = { props: { title: name, tab: name, key: code }, key: code }; var tabPane = h( TabPane, tabPaneProps, [this.renderPanelItem(panelItem)] ); var TabPaneNodes = [tabPane]; var afterSlotRes = afterSlot ? (0, _utils2.filterSlot)(afterSlot({ panel: panelItem })) : null; var customSlotRes = customSlot ? (0, _utils2.filterSlot)(customSlot({ panel: panelItem })) : null; if (customSlotRes && customSlotRes.length) { TabPaneNodes = [customSlotRes]; } if (afterSlotRes && afterSlotRes.length) { TabPaneNodes = [].concat((0, _toConsumableArray3['default'])(TabPaneNodes), (0, _toConsumableArray3['default'])(afterSlotRes)); } return TabPaneNodes; }, /** * 渲染具体 panel * @param { Object } panel */ renderPanelItem: function renderPanelItem(panel) { var _this3 = this; var h = this.$createElement; var _$props4 = this.$props, panelInfo = _$props4.panelInfo, dataSource = _$props4.dataSource; var v_status = this.v_status, localeCode = this.localeCode, $listeners = this.$listeners, $scopedSlots = this.$scopedSlots, forceHideSection = this.forceHideSection, forceShowSection = this.forceShowSection, forceHideField = this.forceHideField, forceShowField = this.forceShowField, forceDisableField = this.forceDisableField, forceEnableField = this.forceEnableField, forceRequiredField = this.forceRequiredField, forceUnRequiredField = this.forceUnRequiredField, strConnector = this.strConnector; var _panelInfo3 = (0, _slicedToArray3['default'])(panelInfo, 3), panelKey = _panelInfo3[0], panelCode = _panelInfo3[1], panelName = _panelInfo3[2]; var code = panel[panelCode]; var subProps = { props: (0, _extends3['default'])({}, this.$props, { panel: panel, dataSource: dataSource, localeCode: localeCode, vmStatus: v_status, forceHideSection: forceHideSection, forceShowSection: forceShowSection, forceHideField: forceHideField, forceShowField: forceShowField, forceDisableField: forceDisableField, forceEnableField: forceEnableField, forceRequiredField: forceRequiredField, forceUnRequiredField: forceUnRequiredField }), scopedSlots: (0, _extends3['default'])({}, $scopedSlots), on: (0, _extends3['default'])({}, $listeners, { 'update.cardStatus': function updateCardStatus(code, sts) { _this3.$emit('cardStatusChange', { code: code, status: sts }); }, cardSave: function cardSave(code, form, cb) { if (!form) return; var templateDescription = _this3.templateDescription, vActiveTab = _this3.vActiveTab; var panelList = templateDescription.panelList; var templateData = panelList.find(function (it) { return it.code === vActiveTab; }); var vals = form.getFieldsValue(); var kys = Object.keys(vals); kys = kys.map(function (k) { var kArr = k.split(strConnector); if (kArr.includes(code)) { return k; } }).filter(function (T) { return T; }); form.validateFields(kys, function (err, values) { _this3.$emit('cardSave', { code: code, err: err, values: values, templateData: templateData, callBack: cb }); }); } }), ref: code }; return h(FormPanelIns, subProps); }, renderComponent: function renderComponent(_, locale) { var _cx; var h = this.$createElement; this.localeCode = locale; var prefixCls = this.$props.prefixCls; var templateDescription = this.templateDescription; /* templateDescription 空模板 */ if ((0, _utils.isEmptyObj)(templateDescription)) return this.renderEmpty(); var panelList = templateDescription.panelList; var panelLength = !panelList ? 1 : panelList.length; // 没有传 模板 code, 返回空? var cls = (0, _classnames2['default'])((_cx = {}, (0, _defineProperty3['default'])(_cx, prefixCls, 1), (0, _defineProperty3['default'])(_cx, prefixCls + '-wrapper', 1), (0, _defineProperty3['default'])(_cx, prefixCls + '-single-panel', panelLength === 1), _cx)); var bodyProps = { 'class': cls, props: { grow: true } }; var subContainer = { props: { grow: true }, 'class': (0, _defineProperty3['default'])({}, prefixCls + '-main', 1) }; return h( Vertical, bodyProps, [h( Vertical, subContainer, [this.renderPanel()] )] ); }, _getPanelIdOrCode: function _getPanelIdOrCode(item) { var panelInfo = this.$props.panelInfo; var code = void 0; var id = void 0; if ((0, _utils.isVnode)(item)) { if (Array.isArray(item)) { code = id = item[0].key; } else { code = id = item.key; } } else { id = item[panelInfo[0]]; code = item[panelInfo[1]]; } return { id: id, code: code }; }, /** * 当前面板是否插槽面板 * 判断条件为, 插槽 id 不在 panel list 中 */ currentPanelIsSlot: function currentPanelIsSlot() { var panelInfo = this.$props.panelInfo; var templateDescription = this.templateDescription, vActiveTab = this.vActiveTab; var panelList = templateDescription.panelList; var _panelInfo4 = (0, _slicedToArray3['default'])(panelInfo, 2), _ = _panelInfo4[0], panelCodeKey = _panelInfo4[1]; var isSlot = panelList.find(function (it) { return it[panelCodeKey] === vActiveTab; }); return !isSlot; }, /** * 获取 refs, 主要为了取到 form */ getRefs: function getRefs() { var templateDescription = this.templateDescription, vActiveTab = this.vActiveTab, v_status = this.v_status; var panelList = templateDescription.panelList; if (!panelList.length) return null; var ref = this.$refs[vActiveTab]; if ((0, _utils.isEmptyObj)(ref)) { return null; } return ref; }, /** * 获取当前面板 form * 弃用 */ getCurPanelForm: function getCurPanelForm() { var isEdit = this.isEdit; var ref = this.getRefs(); if (!ref || (0, _utils.isEmptyObj)(ref)) { return null; } return ref.getForm(); }, /** * 获取当前面板所有字段 value * 返回 promise * 如果当前面板为 插槽, 直接走 resolve */ getAllFiledValue: function getAllFiledValue() { var _this4 = this; var ref = this.getRefs(); var localeCode = this.localeCode, v_status = this.v_status, templateDescription = this.templateDescription, vActiveTab = this.vActiveTab; var lang = this.langType[localeCode]; return new Promise(function (resolve, reject) { var isSlot = _this4.currentPanelIsSlot(); if (isSlot) { return resolve({ err: undefined, values: undefined }); } if (!ref) { var errs = lang.validateErrsMsg || []; var isView = v_status === 'view'; var code = isView ? 0 : 1; var errObj = { code: code, msg: errs[code], err: true }; return reject(errObj); } var form = ref.getForm(); return form.validateFields(function (err, values) { var panelList = templateDescription.panelList; var templateData = panelList.find(function (it) { return it.code === vActiveTab; }); return resolve({ err: err, values: values, templateData: templateData }); }); }); }, /** * 获取字段实例 */ getAllFieldComponent: function getAllFieldComponent() { var strConnector = this.strConnector; var ref = this.getRefs(); if (!ref) return null; var reg = new RegExp('(' + strConnector + ')'); var resObj = {}; var objRef = (0, _extends3['default'])({}, ref.$refs['WrappedComponent'].$refs || {}); Object.keys(objRef).map(function (k) { var fieldObj = objRef[k].$refs; // 空字段 if ((0, _utils.isEmptyObj)(fieldObj)) { return; } Object.keys(fieldObj).map(function (fieldKey) { var filter = fieldKey.match(reg); // 非正常字段 if (!filter || filter.length < 2) return; resObj[fieldKey] = fieldObj[fieldKey]; }); }); return resObj; }, getTemplateData: function getTemplateData() { return (0, _extend2['default'])(true, {}, this.templateDescription); }, getDefaultActiveTab: function getDefaultActiveTab(list) { var panelInfo = this.$props.panelInfo; var vActiveTab = this.vActiveTab; if (!vActiveTab) { var firstItem = list[0] || {}; /** * 上层需要对应 tab 的 id, 如果是插槽没有 id 则用 key */ vActiveTab = firstItem[panelInfo[1]] || firstItem.key; this.vActiveTabId = firstItem[panelInfo[0]] || firstItem.key; this.vActiveTab = vActiveTab; this.$emit('tabChange', vActiveTab); this.$emit('update:activeTabId', this.vActiveTabId); } }, /** * 设置显示/隐藏 * @param { String } code 各个区块 code * @param { String } type 区块 panel section field * @param { Boolean } status 状态, false: hide true: show */ setDisplay: function setDisplay(code, type, status) { var typeName = '' + type.charAt(0).toLocaleUpperCase() + type.substring(1); var showPropertyName = 'forceShow' + typeName; var hidePropertyName = 'forceHide' + typeName; var hideKeys = this['' + hidePropertyName], showKeys = this['' + showPropertyName]; if (code === undefined || /(undefined)/i.test(code)) { if (!status) { this[hidePropertyName] = []; } else { this[showPropertyName] = []; } return { showKeys: [].concat((0, _toConsumableArray3['default'])(this[showPropertyName])), hideKeys: [].concat((0, _toConsumableArray3['default'])(this[hidePropertyName])) }; } var showIdx = showKeys.indexOf(code); var hideIdx = hideKeys.indexOf(code); if (!status) { if (showIdx > -1) { this[showPropertyName].splice(showIdx, 1); } if (hideKeys.includes(code)) return; this[hidePropertyName].push(code); } else { if (hideIdx > -1) { this[hidePropertyName].splice(hideIdx, 1); } if (showKeys.includes(code)) return; this[showPropertyName].push(code); } return { showKeys: [].concat((0, _toConsumableArray3['default'])(this[showPropertyName])), hideKeys: [].concat((0, _toConsumableArray3['default'])(this[hidePropertyName])) }; }, /** * 设置启用/禁用 * @param { String } fieldName 区段code_#fildName * @param { Boolean } status 状态, false: enable true: disable */ setDisable: function setDisable(fieldName, status) { var forceDisableField = this.forceDisableField, forceEnableField = this.forceEnableField; if (fieldName === undefined || /(undefined)/i.test(fieldName)) { if (status) { this.forceDisableField = []; } else { this.forceEnableField = []; } return { disableKeys: [].concat((0, _toConsumableArray3['default'])(this.forceDisableField)), enableKeys: [].concat((0, _toConsumableArray3['default'])(this.forceEnableField)) }; } var disIdx = forceDisableField.indexOf(fieldName); var enaIdx = forceEnableField.indexOf(fieldName); // 禁用 if (status) { if (enaIdx > -1) { this.forceEnableField.splice(enaIdx, 1); } if (forceDisableField.includes(fieldName)) return; this.forceDisableField.push(fieldName); } else { if (disIdx > -1) { this.forceDisableField.splice(disIdx, 1); } if (forceEnableField.includes(fieldName)) return; this.forceEnableField.push(fieldName); } return { disableKeys: [].concat((0, _toConsumableArray3['default'])(this.forceDisableField)), enableKeys: [].concat((0, _toConsumableArray3['default'])(this.forceEnableField)) }; }, setRequired: function setRequired(fieldName, status) { var forceRequiredField = this.forceRequiredField, forceUnRequiredField = this.forceUnRequiredField; // 清除 if (fieldName === undefined || /(undefined)/i.test(fieldName)) { if (status) { this.forceRequiredField = []; } else { this.forceUnRequiredField = []; } return { unRequiredKeys: [].concat((0, _toConsumableArray3['default'])(this.forceUnRequiredField)), requiredKeys: [].concat((0, _toConsumableArray3['default'])(this.forceRequiredField)) }; } var requiredIdx = forceRequiredField.indexOf(fieldName); var unRequiredIdx = forceUnRequiredField.indexOf(fieldName); // 禁用 if (status) { if (unRequiredIdx > -1) { this.forceUnRequiredField.splice(unRequiredIdx, 1); } if (forceRequiredField.includes(fieldName)) return; this.forceRequiredField.push(fieldName); } else { if (requiredIdx > -1) { this.forceRequiredField.splice(requiredIdx, 1); } if (forceUnRequiredField.includes(fieldName)) return; this.forceUnRequiredField.push(fieldName); } return { unRequiredKeys: [].concat((0, _toConsumableArray3['default'])(this.forceUnRequiredField)), requiredKeys: [].concat((0, _toConsumableArray3['default'])(this.forceRequiredField)) }; }, setLabel: function setLabel(fieldName, label) { var sVal = label; if (label === undefined) { sVal = this.oldFieldLabel[fieldName]; } var _$props5 = this.$props, panelInfo = _$props5.panelInfo, sectionInfo = _$props5.sectionInfo, fieldInfo = _$props5.fieldInfo; var activeTab = this.activeTab, templateDescription = this.templateDescription, oldFieldLabel = this.oldFieldLabel; // 2 个参数, 向前移 1 位取值, 标准为 3 个 参数 var _separationFieldName = this.separationFieldName(fieldName), sectionCode = _separationFieldName.panelCode, fName = _separationFieldName.sectionCode; var panelList = templateDescription.panelList; var _panelInfo5 = (0, _slicedToArray3['default'])(panelInfo, 2), panelId = _panelInfo5[0], panelCodeProperty = _panelInfo5[1]; var _sectionInfo = (0, _slicedToArray3['default'])(sectionInfo, 2), _ = _sectionInfo[0], sectionCodeProperty = _sectionInfo[1]; var _fieldInfo = (0, _slicedToArray3['default'])(fieldInfo, 3), ___ = _fieldInfo[0], fieldNameProperty = _fieldInfo[1], displayName = _fieldInfo[2]; var panel = panelList.find(function (panel) { return panel[panelCodeProperty] === activeTab; }); if (!panel) return; var sectionItem = panel.sectionList.find(function (section) { return section[sectionCodeProperty] === sectionCode; }); if (!sectionItem) return; var fieldsList = sectionItem.fieldsList; if (!fieldsList) return null; var field = fieldsList.find(function (field) { return field[fieldNameProperty] === fName; }); if (!field) return; this.oldFieldLabel[fieldName] = field[displayName]; field[displayName] = sVal; } }, render: function render() { var h = arguments[0]; return h(_LocaleReceiver2['default'], { attrs: { componentName: 'BTreeHead', defaultLocale: this.getDefaultLocale }, scopedSlots: { 'default': this.renderComponent } }); } }; BVm.VmTable = _table2['default']; BVm.vmProps = _defaultProps2['default']; BVm.SectionCard = _SectionCard2['default']; BVm.install = function (Vue) { Vue.component(BVm.name, BVm); Vue.component(_table2['default'].name, _table2['default']); Vue.component(_SectionCard2['default'].name, _SectionCard2['default']); }; exports['default'] = BVm;