Select 添加远程搜索事件

Upload 修改class

Author: SmallRuralDog

public/app.js

@@ -2153,6 +2153,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 //
 //
 //
+//
 /* harmony default export */ __webpack_exports__["default"] = ({
   data: function data() {
     return {
@@ -2347,7 +2348,6 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
-//
 /* harmony default export */ __webpack_exports__["default"] = ({
   props: {
     scope: Object,
@@ -3482,6 +3482,17 @@ __webpack_require__.r(__webpack_exports__);
   methods: {
     onChange: function onChange(value) {
       this.$emit("change", value);
+    },
+    remoteMethod: function remoteMethod(query) {
+      var _this = this;
+
+      this.$http.get(this.attrs.remoteUrl, {
+        params: {
+          query: query
+        }
+      }).then(function (res) {
+        _this.options = res.data;
+      });
     }
   }
 });
@@ -6218,7 +6229,7 @@ exports = module.exports = __webpack_require__(/*! ../../../../node_modules/css-
 
 
 // module
-exports.push([module.i, ".upload-component {\n  display: flex;\n  flex-wrap: wrap;\n}\n.upload-component .upload-images {\n  display: flex;\n  flex-wrap: wrap;\n}\n.upload-component .upload-images .upload-images-item + .upload-images-item {\n  margin-right: 10px;\n}\n.upload-component .upload-images .upload-images-item {\n  position: relative;\n  line-height: 1;\n}\n.upload-component .upload-images .upload-images-item img {\n  line-height: 1;\n  vertical-align: middle;\n}\n.upload-component .upload-images .upload-images-item .el-image {\n  cursor: zoom-in;\n}\n.upload-component .upload-images .upload-images-item .el-icon-document-checked {\n  font-size: 30px;\n}\n.upload-component .upload-images .upload-images-item .mask {\n  position: absolute;\n  transition: all 0.3s ease-in-out;\n  opacity: 0;\n  background: rgba(0, 0, 0, 0.3);\n  color: white;\n  font-size: 20px;\n  padding: 5px;\n  top: 50%;\n  left: 50%;\n  cursor: pointer;\n  transform: translate(-50%, -50%);\n}\n.upload-component .upload-images .upload-images-item:hover .mask {\n  opacity: 1;\n}\n.upload-component .upload-images .upload-show-image {\n  border: 1px solid #dcdfe6;\n  padding: 2px;\n}\n.upload-component .upload-block .el-upload-dragger {\n  width: unset;\n  height: unset;\n  border: none;\n  border-radius: 0;\n}\n.upload-component .upload-block .avatar {\n  border-radius: 50%;\n}\n.upload-component .upload-block .image,\n.upload-component .upload-block .file {\n  border-radius: 0;\n}", ""]);
+exports.push([module.i, ".upload-component {\n  display: flex;\n  flex-wrap: wrap;\n}\n.upload-component .upload-images {\n  display: flex;\n  flex-wrap: wrap;\n}\n.upload-component .upload-images .upload-images-item + .upload-images-item {\n  margin-left: 10px;\n}\n.upload-component .upload-images .upload-images-item {\n  position: relative;\n  line-height: 1;\n}\n.upload-component .upload-images .upload-images-item img {\n  line-height: 1;\n  vertical-align: middle;\n}\n.upload-component .upload-images .upload-images-item .el-image {\n  cursor: zoom-in;\n}\n.upload-component .upload-images .upload-images-item .el-icon-document-checked {\n  font-size: 30px;\n}\n.upload-component .upload-images .upload-images-item .mask {\n  position: absolute;\n  transition: all 0.3s ease-in-out;\n  opacity: 0;\n  background: rgba(0, 0, 0, 0.3);\n  color: white;\n  font-size: 20px;\n  padding: 5px;\n  top: 50%;\n  left: 50%;\n  cursor: pointer;\n  transform: translate(-50%, -50%);\n}\n.upload-component .upload-images .upload-images-item:hover .mask {\n  opacity: 1;\n}\n.upload-component .upload-images .upload-show-image {\n  border: 1px solid #dcdfe6;\n  padding: 2px;\n}\n.upload-component .upload-block .el-upload-dragger {\n  width: unset;\n  height: unset;\n  border: none;\n  border-radius: 0;\n}\n.upload-component .upload-block .avatar {\n  border-radius: 50%;\n}\n.upload-component .upload-block .image,\n.upload-component .upload-block .file {\n  border-radius: 0;\n}", ""]);
 
 // exports
 
@@ -29395,8 +29406,11 @@ var render = function() {
           expression: "loading"
         }
       ],
-      staticStyle: { "min-height": "100px" },
-      attrs: { "element-loading-background": "rgba(0, 0, 0, 0)" }
+      staticStyle: { "min-height": "150px" },
+      attrs: {
+        "element-loading-spinner": "el-icon-loading",
+        "element-loading-background": "rgba(0, 0, 0, 0)"
+      }
     },
     [
       !_vm.loading
@@ -29621,7 +29635,6 @@ var render = function() {
   return _c(
     "el-button",
     {
-      staticClass: "mr-10",
       attrs: {
         type: _vm.action.type,
         size: _vm.action.size,
@@ -30478,7 +30491,8 @@ var render = function() {
         "reserve-keyword": _vm.attrs.reserveKeyword,
         "default-first-option": _vm.attrs.defaultFirstOption,
         "popper-append-to-body": _vm.attrs.popperAppendToBody,
-        "automatic-dropdown": _vm.attrs.automaticDropdown
+        "automatic-dropdown": _vm.attrs.automaticDropdown,
+        "remote-method": _vm.remoteMethod
       },
       on: { change: _vm.onChange }
     },

public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=23a4859c644d4b2b623b",
+    "/app.js": "/app.js?id=518c74882b2887781e7e",
     "/manifest.js": "/manifest.js?id=d9708e48a6c10ccee4bb",
     "/vendor.js": "/vendor.js?id=f4679ac178c0e413cb28"
 }

resources/js/components/layout/Base.vue

@@ -1,7 +1,8 @@
 <template>
   <div
-    style="min-height:100px;"
+    style="min-height:150px;"
     v-loading="loading"
+     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0)"
   >
     <component

resources/js/components/widgets/Actions/ActionButton.vue

@@ -9,7 +9,6 @@
     :icon="action.icon"
     :autofocus="action.autofocus"
     :loading="loading"
-    class="mr-10"
     @click="onClick"
     >{{ action.content }}</el-button
   >

resources/js/components/widgets/Select.vue

@@ -24,6 +24,7 @@
     :default-first-option="attrs.defaultFirstOption"
     :popper-append-to-body="attrs.popperAppendToBody"
     :automatic-dropdown="attrs.automaticDropdown"
+    :remote-method="remoteMethod"
     @change="onChange"
   >
     <el-option
@@ -33,7 +34,6 @@
       :value="item.value"
       :disabled="item.disabled"
     >
-
       <div class="flex-c-sb">
         <div class="flex-c">
           <el-avatar
@@ -53,7 +53,7 @@
 export default {
   props: {
     attrs: Object,
-    form_data:Object,
+    form_data: Object,
     value: {
       default: null
     }
@@ -70,6 +70,13 @@ export default {
   methods: {
     onChange(value) {
       this.$emit("change", value);
+    },
+    remoteMethod(query) {
+      this.$http
+        .get(this.attrs.remoteUrl, { params: { query: query } })
+        .then(res => {
+          this.options = res.data;
+        });
     }
   }
 };

resources/js/components/widgets/Upload.vue

@@ -197,7 +197,7 @@ export default {
     display: flex;
     flex-wrap: wrap;
     .upload-images-item + .upload-images-item {
-      margin-right: 10px;
+      margin-left: 10px;
     }
     .upload-images-item {
       position: relative;