web-component-gallery 0.1.5 → 0.1.6

package/dist/Button.umd.js

@@ -4126,6 +4126,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./plugins/lib/Button/Button.js":
+/*!**************************************!*\
+  !*** ./plugins/lib/Button/Button.js ***!
+  \**************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var ant_design_vue_es_button_style__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ant-design-vue/es/button/style */ \"./node_modules/ant-design-vue/es/button/style/index.js\");\n/* harmony import */ var ant_design_vue_es_button__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ant-design-vue/es/button */ \"./node_modules/ant-design-vue/es/button/index.js\");\n/* harmony import */ var _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @vue/babel-helper-vue-jsx-merge-props */ \"./node_modules/@vue/babel-helper-vue-jsx-merge-props/dist/helper.js\");\n/* harmony import */ var _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var ant_design_vue_es_popconfirm_style__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ant-design-vue/es/popconfirm/style */ \"./node_modules/ant-design-vue/es/popconfirm/style/index.js\");\n/* harmony import */ var ant_design_vue_es_popconfirm__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ant-design-vue/es/popconfirm */ \"./node_modules/ant-design-vue/es/popconfirm/index.js\");\n/* harmony import */ var ant_design_vue_es_upload_style__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue/es/upload/style */ \"./node_modules/ant-design-vue/es/upload/style/index.js\");\n/* harmony import */ var ant_design_vue_es_upload__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ant-design-vue/es/upload */ \"./node_modules/ant-design-vue/es/upload/index.js\");\n/* harmony import */ var ant_design_vue_es_message__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ant-design-vue/es/message */ \"./node_modules/ant-design-vue/es/message/index.js\");\n\n\n\n\n\n\n\n\n\n// import Bus from './Bus'\n// import store from '@/store'\n// import global from '@/config/index'\n\nlet UploadUrl = `${__webpack_require__.g.WEBSWG}${__webpack_require__.g.BASEURL}`;\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: \"Button\",\n  data() {\n    return {\n      PopconfirmProps: {\n        title: \"确定执行此操作吗？\",\n        okText: \"确定\",\n        cancelText: \"取消\",\n        placement: \"topRight\"\n      },\n      UploadProps: {\n        name: \"file\",\n        headers: {\n          token: store.getters.token\n        },\n        showUploadList: false\n      }\n    };\n  },\n  props: {\n    buttonProps: {\n      type: [Array, Object],\n      default: () => ({})\n    }\n  },\n  methods: {\n    UploadBtn(props) {\n      const h = this.$createElement;\n      const {\n        $data: {\n          UploadProps\n        },\n        ButtonRender,\n        UploadChange\n      } = this;\n      UploadProps.action = UploadUrl + props.action;\n      return h(ant_design_vue_es_upload__WEBPACK_IMPORTED_MODULE_4__[\"default\"], _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_1___default()([{}, {\n        \"props\": UploadProps\n      }, {\n        \"on\": {\n          ...{\n            change: UploadChange,\n            ...props.event\n          }\n        }\n      }]), [ButtonRender(props)]);\n    },\n    UploadChange({\n      file\n    }) {\n      if (!file.hasOwnProperty('response')) return;\n      const {\n        code,\n        msg\n      } = file.response;\n      code == 200 ? ant_design_vue_es_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"].success('导入成功！') : ant_design_vue_es_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"].error(msg);\n      Bus.$emit('ButtonUploadOver');\n    },\n    PopconfirmBtn(props) {\n      const h = this.$createElement;\n      const {\n        $data: {\n          PopconfirmProps\n        },\n        ButtonRender\n      } = this;\n      return h(ant_design_vue_es_popconfirm__WEBPACK_IMPORTED_MODULE_6__[\"default\"], _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_1___default()([{}, {\n        \"props\": PopconfirmProps\n      }, {\n        \"on\": {\n          ...props.event\n        }\n      }]), [ButtonRender(props)]);\n    },\n    ButtonRender(props) {\n      const h = this.$createElement;\n      //   const buttonEvent = props.type\n      return h(ant_design_vue_es_button__WEBPACK_IMPORTED_MODULE_7__[\"default\"], _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_1___default()([{}, {\n        \"props\": props\n      }, {\n        \"on\": {\n          ...props.event\n        }\n      }]), [props.text]);\n    },\n    SwitchButton(props) {\n      const {\n        PopconfirmBtn,\n        UploadBtn,\n        ButtonRender\n      } = this;\n      if (props.mode == 'popconfirm') return PopconfirmBtn(props);else if (props.mode == 'upload') return UploadBtn(props);\n      return ButtonRender(props);\n    }\n  },\n  render() {\n    const h = arguments[0];\n    const {\n      buttonProps,\n      SwitchButton\n    } = this;\n    // console.log( buttonProps.constructor === Array )\n\n    return h(\"div\", {\n      \"class\": 'ButtonDiversity'\n    }, [buttonProps.constructor === Array ? buttonProps.map(props => {\n      return SwitchButton(props);\n    }) : SwitchButton(buttonProps)]);\n  }\n});\n\n//# sourceURL=webpack://mui/./plugins/lib/Button/Button.js?");
+
+/***/ }),
+
 /***/ "./plugins/lib/Button/index.js":
 /*!*************************************!*\
   !*** ./plugins/lib/Button/index.js ***!
@@ -4133,7 +4144,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var ant_design_vue_es_button_style__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ant-design-vue/es/button/style */ \"./node_modules/ant-design-vue/es/button/style/index.js\");\n/* harmony import */ var ant_design_vue_es_button__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ant-design-vue/es/button */ \"./node_modules/ant-design-vue/es/button/index.js\");\n/* harmony import */ var _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @vue/babel-helper-vue-jsx-merge-props */ \"./node_modules/@vue/babel-helper-vue-jsx-merge-props/dist/helper.js\");\n/* harmony import */ var _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var ant_design_vue_es_popconfirm_style__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ant-design-vue/es/popconfirm/style */ \"./node_modules/ant-design-vue/es/popconfirm/style/index.js\");\n/* harmony import */ var ant_design_vue_es_popconfirm__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ant-design-vue/es/popconfirm */ \"./node_modules/ant-design-vue/es/popconfirm/index.js\");\n/* harmony import */ var ant_design_vue_es_upload_style__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue/es/upload/style */ \"./node_modules/ant-design-vue/es/upload/style/index.js\");\n/* harmony import */ var ant_design_vue_es_upload__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ant-design-vue/es/upload */ \"./node_modules/ant-design-vue/es/upload/index.js\");\n/* harmony import */ var ant_design_vue_es_message__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ant-design-vue/es/message */ \"./node_modules/ant-design-vue/es/message/index.js\");\n\n\n\n\n\n\n\n\n\n// import Bus from './Bus'\n// import store from '@/store'\n// import global from '@/config/index'\n\nlet UploadUrl = `${__webpack_require__.g.WEBSWG}${__webpack_require__.g.BASEURL}`;\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  name: \"Button\",\n  data() {\n    return {\n      PopconfirmProps: {\n        title: \"确定执行此操作吗？\",\n        okText: \"确定\",\n        cancelText: \"取消\",\n        placement: \"topRight\"\n      },\n      UploadProps: {\n        name: \"file\",\n        headers: {\n          token: store.getters.token\n        },\n        showUploadList: false\n      }\n    };\n  },\n  props: {\n    buttonProps: {\n      type: [Array, Object],\n      default: () => ({})\n    }\n  },\n  methods: {\n    UploadBtn(props) {\n      const h = this.$createElement;\n      const {\n        $data: {\n          UploadProps\n        },\n        ButtonRender,\n        UploadChange\n      } = this;\n      UploadProps.action = UploadUrl + props.action;\n      return h(ant_design_vue_es_upload__WEBPACK_IMPORTED_MODULE_4__[\"default\"], _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_1___default()([{}, {\n        \"props\": UploadProps\n      }, {\n        \"on\": {\n          ...{\n            change: UploadChange,\n            ...props.event\n          }\n        }\n      }]), [ButtonRender(props)]);\n    },\n    UploadChange({\n      file\n    }) {\n      if (!file.hasOwnProperty('response')) return;\n      const {\n        code,\n        msg\n      } = file.response;\n      code == 200 ? ant_design_vue_es_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"].success('导入成功！') : ant_design_vue_es_message__WEBPACK_IMPORTED_MODULE_5__[\"default\"].error(msg);\n      Bus.$emit('ButtonUploadOver');\n    },\n    PopconfirmBtn(props) {\n      const h = this.$createElement;\n      const {\n        $data: {\n          PopconfirmProps\n        },\n        ButtonRender\n      } = this;\n      return h(ant_design_vue_es_popconfirm__WEBPACK_IMPORTED_MODULE_6__[\"default\"], _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_1___default()([{}, {\n        \"props\": PopconfirmProps\n      }, {\n        \"on\": {\n          ...props.event\n        }\n      }]), [ButtonRender(props)]);\n    },\n    ButtonRender(props) {\n      const h = this.$createElement;\n      //   const buttonEvent = props.type\n      return h(ant_design_vue_es_button__WEBPACK_IMPORTED_MODULE_7__[\"default\"], _vue_babel_helper_vue_jsx_merge_props__WEBPACK_IMPORTED_MODULE_1___default()([{}, {\n        \"props\": props\n      }, {\n        \"on\": {\n          ...props.event\n        }\n      }]), [props.text]);\n    },\n    SwitchButton(props) {\n      const {\n        PopconfirmBtn,\n        UploadBtn,\n        ButtonRender\n      } = this;\n      if (props.mode == 'popconfirm') return PopconfirmBtn(props);else if (props.mode == 'upload') return UploadBtn(props);\n      return ButtonRender(props);\n    }\n  },\n  render() {\n    const h = arguments[0];\n    const {\n      buttonProps,\n      SwitchButton\n    } = this;\n    // console.log( buttonProps.constructor === Array )\n\n    return h(\"div\", {\n      \"class\": 'ButtonDiversity'\n    }, [buttonProps.constructor === Array ? buttonProps.map(props => {\n      return SwitchButton(props);\n    }) : SwitchButton(buttonProps)]);\n  }\n});\n\n//# sourceURL=webpack://mui/./plugins/lib/Button/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Button */ \"./plugins/lib/Button/Button.js\");\n\n_Button__WEBPACK_IMPORTED_MODULE_0__[\"default\"].install = function (Vue) {\n  Vue.component(_Button__WEBPACK_IMPORTED_MODULE_0__[\"default\"].name, _Button__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (_Button__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n\n//# sourceURL=webpack://mui/./plugins/lib/Button/index.js?");
 
 /***/ }),
 

package/dist/Table.umd.js

@@ -4622,7 +4622,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _css
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"\", \"\"]);\n// Exports\n/* harmony default export */ __webpack_exports__[\"default\"] = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://mui/./plugins/lib/Table/Table.vue?./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-2.use%5B2%5D!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/* 混入样式 */\\n/* 滚动条样式 */\\n/* 文字换行省略（默认1行）*/\\n/* flex */\\n.WebComponentTable[data-v-0ec567f6] {\\n  width: 100%;\\n  height: 100%;\\n  display: flex;\\n  gap: 16px 0;\\n  flex-direction: column;\\n}\\n.WebComponentTable__List__Empty[data-v-0ec567f6] {\\n  gap: 16px 0;\\n  display: flex;\\n  gap: 0;\\n  flex-direction: column;\\n  flex-wrap: wrap;\\n  align-items: center;\\n  justify-content: center;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ __webpack_exports__[\"default\"] = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://mui/./plugins/lib/Table/Table.vue?./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-2.use%5B2%5D!./node_modules/vue-loader/lib/index.js??vue-loader-options");
 
 /***/ }),
 

package/dist/index.umd.js

@@ -4633,7 +4633,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _css
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"\", \"\"]);\n// Exports\n/* harmony default export */ __webpack_exports__[\"default\"] = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://mui/./plugins/lib/Table/Table.vue?./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-2.use%5B2%5D!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/* 混入样式 */\\n/* 滚动条样式 */\\n/* 文字换行省略（默认1行）*/\\n/* flex */\\n.WebComponentTable[data-v-0ec567f6] {\\n  width: 100%;\\n  height: 100%;\\n  display: flex;\\n  gap: 16px 0;\\n  flex-direction: column;\\n}\\n.WebComponentTable__List__Empty[data-v-0ec567f6] {\\n  gap: 16px 0;\\n  display: flex;\\n  gap: 0;\\n  flex-direction: column;\\n  flex-wrap: wrap;\\n  align-items: center;\\n  justify-content: center;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ __webpack_exports__[\"default\"] = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://mui/./plugins/lib/Table/Table.vue?./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-2.use%5B2%5D!./node_modules/vue-loader/lib/index.js??vue-loader-options");
 
 /***/ }),
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "vue-library-ui组件库",
   "main": "dist/index.umd.js",
   "files": [

package/plugins/lib/Button/Button.js

@@ -0,0 +1,90 @@
+// import Bus from './Bus'
+// import store from '@/store'
+// import global from '@/config/index'
+import Message from 'ant-design-vue/es/message' 
+import { Button, Upload, Popconfirm } from 'ant-design-vue' 
+
+let UploadUrl = `${global.WEBSWG}${global.BASEURL}`
+
+export default {
+  name: "Button", 
+  data() {
+    return {
+        PopconfirmProps: {
+          title: "确定执行此操作吗？",
+          okText: "确定",
+          cancelText: "取消",
+          placement: "topRight"
+        },
+        UploadProps: {
+          name: "file",
+          headers: { token: store.getters.token },
+          showUploadList: false 
+        } 
+    } 
+  },
+  props: {
+    buttonProps: {
+        type: [ Array, Object ],
+        default: () => ({})
+    }
+  }, 
+  methods: {
+    UploadBtn( props ) {
+      const { $data: { UploadProps }, ButtonRender, UploadChange } = this
+      UploadProps.action = UploadUrl + props.action 
+      return (
+        <Upload props={ UploadProps } {...{ on: { change: UploadChange,...props.event } }} >
+            { ButtonRender( props ) }
+        </Upload>
+      )
+    },
+    UploadChange({ file }) {
+      if(!file.hasOwnProperty('response')) return
+      const { code, msg } = file.response
+      code == 200 ? 
+      Message.success('导入成功！'):
+      Message.error(msg)
+      Bus.$emit('ButtonUploadOver')
+    }, 
+    PopconfirmBtn( props ) {
+      const { $data: { PopconfirmProps }, ButtonRender } = this
+      return (
+        <Popconfirm props={ PopconfirmProps } {...{ on: props.event }} >
+            { ButtonRender( props ) }
+        </Popconfirm>
+      ) 
+    }, 
+    ButtonRender( props ) {
+    //   const buttonEvent = props.type
+      return (
+        <Button
+            props={ props }
+            {...{ on: props.event }}
+        >
+            { props.text }
+        </Button>
+      )
+    }, 
+    SwitchButton( props ) {
+        const { PopconfirmBtn, UploadBtn, ButtonRender } = this
+        if( props.mode == 'popconfirm' ) return PopconfirmBtn( props )
+        else if( props.mode == 'upload' ) return UploadBtn( props )
+        return ButtonRender( props )
+    }
+  },
+  render() {
+    const { buttonProps, SwitchButton } = this
+    // console.log( buttonProps.constructor === Array )
+
+    return (
+      <div class='ButtonDiversity'> 
+        { buttonProps.constructor === Array ? (
+            buttonProps.map( props => {
+                return SwitchButton( props )
+            }) 
+        ) : ( SwitchButton( buttonProps ) ) }
+      </div>
+    )
+  }
+}

package/plugins/lib/Button/index.js

@@ -1,90 +1,7 @@
-// import Bus from './Bus'
-// import store from '@/store'
-// import global from '@/config/index'
-import Message from 'ant-design-vue/es/message' 
-import { Button, Upload, Popconfirm } from 'ant-design-vue' 
+import Button from './Button'
+ 
+Button.install = function (Vue) { 
+  Vue.component(Button.name, Button)
+}
 
-let UploadUrl = `${global.WEBSWG}${global.BASEURL}`
-
-export default {
-  name: "Button",
-  data() {
-    return {
-        PopconfirmProps: {
-          title: "确定执行此操作吗？",
-          okText: "确定",
-          cancelText: "取消",
-          placement: "topRight"
-        },
-        UploadProps: {
-          name: "file",
-          headers: { token: store.getters.token },
-          showUploadList: false 
-        } 
-    } 
-  },
-  props: {
-    buttonProps: {
-        type: [ Array, Object ],
-        default: () => ({})
-    }
-  }, 
-  methods: {
-    UploadBtn( props ) {
-      const { $data: { UploadProps }, ButtonRender, UploadChange } = this
-      UploadProps.action = UploadUrl + props.action 
-      return (
-        <Upload props={ UploadProps } {...{ on: { change: UploadChange,...props.event } }} >
-            { ButtonRender( props ) }
-        </Upload>
-      )
-    },
-    UploadChange({ file }) {
-      if(!file.hasOwnProperty('response')) return
-      const { code, msg } = file.response
-      code == 200 ? 
-      Message.success('导入成功！'):
-      Message.error(msg)
-      Bus.$emit('ButtonUploadOver')
-    }, 
-    PopconfirmBtn( props ) {
-      const { $data: { PopconfirmProps }, ButtonRender } = this
-      return (
-        <Popconfirm props={ PopconfirmProps } {...{ on: props.event }} >
-            { ButtonRender( props ) }
-        </Popconfirm>
-      ) 
-    }, 
-    ButtonRender( props ) {
-    //   const buttonEvent = props.type
-      return (
-        <Button
-            props={ props }
-            {...{ on: props.event }}
-        >
-            { props.text }
-        </Button>
-      )
-    }, 
-    SwitchButton( props ) {
-        const { PopconfirmBtn, UploadBtn, ButtonRender } = this
-        if( props.mode == 'popconfirm' ) return PopconfirmBtn( props )
-        else if( props.mode == 'upload' ) return UploadBtn( props )
-        return ButtonRender( props )
-    }
-  },
-  render() {
-    const { buttonProps, SwitchButton } = this
-    // console.log( buttonProps.constructor === Array )
-
-    return (
-      <div class='ButtonDiversity'> 
-        { buttonProps.constructor === Array ? (
-            buttonProps.map( props => {
-                return SwitchButton( props )
-            }) 
-        ) : ( SwitchButton( buttonProps ) ) }
-      </div>
-    )
-  }
-}
+export default Button

package/plugins/lib/Form/Model.js

@@ -0,0 +1,185 @@
+import { h } from 'vue'
+import { FormModel } from 'ant-design-vue'
+
+import RenderComp from './RenderComp.vue'
+
+const FormModelItem = FormModel.Item
+
+export default {
+  name: 'Model',
+  data() {
+    return {
+      formRules: {},
+      labelCol: { span: 4 },
+      wrapperCol: { span: 20 }
+    }
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    /* Form布局方式 */
+    layout: {
+      type: String,
+      default: 'vertical'
+    },
+    /* 一行显示几个 PS:最多4个 */
+    layoutSize: {
+      type: Number,
+      default: 4,
+      validator: value => {
+        return value <= 4
+      }
+    },
+    /* 表单项配置 */
+    formSetting: Array
+  },
+  computed: {
+    form: {
+      get() {
+        for (const k in this.value) {
+          Object.hasOwnProperty.call(this.formRules, k) && this.$refs.FormModel.validateField(k)
+        }
+        return this.value
+      },
+      set(value) {
+        this.$emit('change', value)
+      }
+    },
+    formAttrs() {
+      let attr = {}
+      this.layout === 'vertical'
+        ? (attr = {
+            ...this.$attrs
+          })
+        : (attr = {
+            labelCol: this.labelCol,
+            wrapperCol: this.wrapperCol,
+            ...this.$attrs
+          })
+      return attr
+    }
+  },
+  watch: {
+    formSetting() {
+      this.setFormRules()
+    }
+  },
+  mounted() {
+    this.setFormRules()
+    this.$emit('update:refForm', this.$refs.FormModel)
+  },
+  methods: {
+    getFormWidth(child, layoutSize) {
+      if (!layoutSize) return `margin-right:24px;`
+      if (this.layout === 'vertical')
+        return `flex: 0 1 calc((${(100 / layoutSize) * (child.size ?? 1)}% - 24px));margin-right:24px;`
+      return `flex: 0 1 ${(100 / layoutSize) * (child.size ?? 1)}%;`
+    },
+    setFormModelItem(child) {
+      const { getFormWidth, layout, layoutSize } = this
+      return (
+        <FormModelItem
+          prop={child.model}
+          label={child.label}
+          colon={!(layout == 'inline')}
+          style={getFormWidth(child, layoutSize)}
+          class={[
+            { FormLineVertical: child.size === layoutSize && layout === 'vertical' },
+            { FormLine: child.size === layoutSize }
+          ]}
+        >
+          {this.$scopedSlots[child.model] ? (
+            this.$scopedSlots[child.model](child)
+          ) : (
+            <RenderComp
+              v-model={this.form[child.model]}
+              component={child.is}
+              {...{ on: child.event, attrs: child.attrs }}
+            />
+          )}
+
+          {this.$scopedSlots[`${child.model}Handle`] && this.$scopedSlots[`${child.model}Handle`](child)}
+
+          {/* { h(
+              defaultComponents[child.is] ?? Input,
+              { 
+                attrs: {
+                  // placeholder: getPlaceholder(child),
+                  ...child.attrs
+                }, 
+                props: {
+                  value: this.form[child.model],
+                  ...child.attrs
+                },
+                on: {
+                  ...child.event, 
+                  'input': (node) => {
+                    this.$set( this.form, child.model, node.target?.value ?? node )
+                  } 
+                }
+              }
+            ) }   */}
+        </FormModelItem>
+      )
+    },
+    setFormRules() {
+      const rules = {}
+      this.formSetting.forEach(node => {
+        node.filed
+          ? node.filed.forEach(child => this.$set(rules, child.model, this.setAttrs({ ...node, ...child })))
+          : this.$set(rules, node.model, this.setAttrs(node))
+      })
+      this.formRules = rules
+    },
+    setAttrs(node) {
+      const required = node.hasOwnProperty('required')
+        ? node.required
+        : node.hasOwnProperty('hidden')
+        ? !node.hidden
+        : true
+      const message =
+        node.placeholder ||
+        (/(select|picker|radio|upload)/.test((node.is ?? 'Input').toLowerCase()) ? '请选择' : '请输入') +
+          (node.label || '')
+
+      const rules = [
+        {
+          required,
+          message,
+          trigger: ['change', 'blur']
+        }
+      ].concat((node.rules || []).filter(i => i.pattern && (i.pattern = new RegExp(i.pattern))))
+
+      return rules
+    },
+    formSubmit() {
+      return this.$refs.FormModel.validate()
+    }
+  },
+  render() {
+    const { setFormModelItem, layout, formSetting, formRules, formAttrs, form } = this
+
+    return (
+      <FormModel
+        ref="FormModel"
+        props={{
+          model: form,
+          rules: formRules,
+          layout,
+          ...formAttrs
+        }}
+      >
+        {formSetting.map((props, i) => {
+          return (
+            <div>
+              {!props.hidden && setFormModelItem(props)}
+              {this.$scopedSlots[`operate${i}`] && this.$scopedSlots[`operate${i}`](props)}
+            </div>
+          )
+        })}
+      </FormModel>
+    )
+  }
+}

package/plugins/lib/Form/RenderComp.vue

@@ -0,0 +1,52 @@
+<template>
+  <component :is="component" v-model="nodeValue" v-bind="$attrs" v-on="$listeners" :placeholder='getPlaceholder()' />
+</template>
+<script>
+
+import { Input,InputNumber,Checkbox,DatePicker,TimePicker } from 'ant-design-vue' 
+
+export default {
+  name: 'RenderComp',
+  model: {
+    prop: "value",
+    event: "Update:FormModel"
+  },
+  components: {
+    Input,
+    InputNumber,
+    Checkbox,
+    DatePicker,
+    TimePicker, 
+    ARadio: () => import('./components/ARadio.vue'),
+    AUpload: () => import( './components/AUpload.vue' ), 
+    ATagsInput: () => import('./components/ATagsInput.vue'),
+    ASelectCustom: () => import('./components/ASelectCustom.vue')
+  },
+  props: {
+    value: [Number, String, Object, Array, Boolean],
+    component: {
+        type: String,
+        default: 'Input'
+    }
+  },
+  computed: {
+    nodeValue: {
+      get () {
+        return this.value
+      },  
+      set ( value ) {
+        this.$emit('Update:FormModel',  value)  
+      }
+    } 
+  },
+  mounted() {
+  },
+  methods: {
+    getPlaceholder() {
+      const RegExp = this.component.toLowerCase()
+      if( /range/.test( RegExp ) ) return [ '开始时间', '结束时间' ]
+      return this.$attrs.placeholder ?? /(select|picker|radio|upload)/.test( RegExp ) ? "请选择" : "请输入"
+    }
+  }
+}
+</script>

package/plugins/lib/Form/Search.vue

@@ -0,0 +1,169 @@
+<template>
+  <FormModel :model="form" ref="searchForm" layout="inline" @submit="handleSearch" class="WebComponentFormSearch">
+
+    <template v-for="(node, i) in copyFormSetting.slice(0, count)">
+      <FormModelItem
+        :key="i"
+        :prop="node.model"
+        :label="node.label"
+        :style="getFormWidth(node, matchMediaSize)"
+        v-if="!node.hidden"
+      >
+        <component
+          :is="node.is || 'Input'"
+          :placeholder="node.is | defaultPlaceholder"
+          :getPopupContainer="
+            triggerNode => {
+              return triggerNode.parentNode || document.body
+            }
+          "
+          v-on="node.event"
+          v-bind="node.attrs"
+          v-model="form[node.model]"
+        />
+      </FormModelItem> 
+    </template> 
+
+    <div class="WebComponentFormSearch__Actions">
+      <Button type="primary" html-type="submit">{{ actionsText.primary }}</Button>
+      <Button :style="{ marginLeft: '8px' }" @click="handleReset">{{ actionsText.cancel }}</Button>
+      <a @click="advanced = !advanced" style="margin-left: 8px" v-if="copyFormSetting.length > this.matchMediaSize - 1">
+        {{ advanced ? '收起' : '展开' }}
+        <Icon :type="advanced ? 'up' : 'down'" />
+      </a>
+    </div>
+  </FormModel>
+</template>
+<script>
+
+import { FormModel, Button, Radio, Input, InputNumber, Checkbox, DatePicker, TimePicker, Icon } from 'ant-design-vue'
+
+export default {
+  components: {
+    FormModel,
+    FormModelItem: FormModel.Item,
+    Button,
+    Radio,
+    Input,
+    InputNumber,
+    Checkbox,
+    DatePicker,
+    TimePicker,
+    ASelectCustom: () => import('./components/ASelectCustom.vue'),
+    Icon
+  },
+  data() {
+    return {
+      // 是否收起
+      advanced: false,
+      matchMediaSize: 0
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    /* 双向数据绑定Form */
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    /* 配置表单项 */
+    formSetting: {
+      type: Array,
+      default: () => []
+    },
+    /* 一行显示多少项 */
+    layoutSize: {
+      type: Number,
+      default: 4,
+      validator: value => {
+        return value <= 4
+      }
+    },
+    // 紧凑型和宽松型
+    // default 宽松型
+    // middle 紧凑型
+    searchStyle: {
+      type: String,
+      default: 'default'
+    },
+    /* 操作显示文字 */
+    actionsText: {
+      type: Object,
+      default: () => ({
+        primary: '搜索',
+        cancel: '重置'
+      })
+    }
+  },
+  computed: {
+    form: {
+      get() {
+        return this.value
+      },
+      set(newValue) {
+        this.$emit('change', newValue)
+      }
+    },
+    matchMedia() {
+      return {
+        '(max-width: 576px)': 1,
+        '(min-width: 576px) and (max-width: 992px)': this.layoutSize - 2,
+        '(min-width: 992px)': this.layoutSize
+      }
+    },
+    copyFormSetting() {
+      return this.formSetting.filter(node => !node.hidden)
+    },
+    count() {
+      return this.advanced ? this.copyFormSetting.length : this.matchMediaSize - 1
+    }
+  },
+  filters: {
+    defaultPlaceholder(is) {
+      if (is && is.includes('range')) return ['开始时间', '结束时间']
+      return /(select|picker|radio|upload)/.test(is) ? '请选择' : '请输入'
+    }
+  },
+  mounted() {
+    this.handleSearch()
+    this.matchMediaSize = this.layoutSize
+    Object.keys(this.matchMedia).forEach(media =>
+      window.matchMedia(media).addEventListener('change', this.handleResize)
+    )
+  },
+  methods: {
+    handleResize(x) {
+      x.matches && (this.matchMediaSize = this.matchMedia[x.media])
+    },
+    getFormWidth(e) {
+      const gap = {
+        middle: '16px',
+        default: '24px'
+      }
+      return `flex: 0 1 calc((${(100 / this.matchMediaSize) * (e.size ?? 1)}% - ${
+        gap[this.searchStyle]
+      })); margin-right: ${gap[this.searchStyle]};`
+    },
+    handleSearch(e) {
+      e && e.preventDefault()
+      const searchForm = {}
+      // 排除掉form当中hidden的隐藏项
+      this.copyFormSetting.forEach(node => 
+        this.$set( searchForm, node.model, this.form[node.model] ))
+      this.form = { ...searchForm }
+      this.$emit('handleSearch', searchForm) 
+    },
+    handleReset() {
+      // 初步猜测是因这里的清空导致数据双向绑定得不到最新
+      this.$refs.searchForm.resetFields()
+      this.$emit('handleReset')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@import url('../../less/Search.less');
+</style>