修改Grid select模式

Author: SmallRuralDog

public/app.js

@@ -1 +1,154 @@
-!function(e){function r(r){for(var n,l,f=r[0],i=r[1],a=r[2],c=0,s=[];c<f.length;c++)l=f[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,f=1;f<t.length;f++){var i=t[f];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var f=window.webpackJsonp=window.webpackJsonp||[],i=f.push.bind(f);f.push=r,f=f.slice();for(var a=0;a<f.length;a++)r(f[a]);var p=i;t()}([]);
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// install a JSONP callback for chunk loading
+/******/ 	function webpackJsonpCallback(data) {
+/******/ 		var chunkIds = data[0];
+/******/ 		var moreModules = data[1];
+/******/ 		var executeModules = data[2];
+/******/
+/******/ 		// add "moreModules" to the modules object,
+/******/ 		// then flag all "chunkIds" as loaded and fire callback
+/******/ 		var moduleId, chunkId, i = 0, resolves = [];
+/******/ 		for(;i < chunkIds.length; i++) {
+/******/ 			chunkId = chunkIds[i];
+/******/ 			if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ 				resolves.push(installedChunks[chunkId][0]);
+/******/ 			}
+/******/ 			installedChunks[chunkId] = 0;
+/******/ 		}
+/******/ 		for(moduleId in moreModules) {
+/******/ 			if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
+/******/ 				modules[moduleId] = moreModules[moduleId];
+/******/ 			}
+/******/ 		}
+/******/ 		if(parentJsonpFunction) parentJsonpFunction(data);
+/******/
+/******/ 		while(resolves.length) {
+/******/ 			resolves.shift()();
+/******/ 		}
+/******/
+/******/ 		// add entry modules from loaded chunk to deferred list
+/******/ 		deferredModules.push.apply(deferredModules, executeModules || []);
+/******/
+/******/ 		// run deferred modules when all chunks ready
+/******/ 		return checkDeferredModules();
+/******/ 	};
+/******/ 	function checkDeferredModules() {
+/******/ 		var result;
+/******/ 		for(var i = 0; i < deferredModules.length; i++) {
+/******/ 			var deferredModule = deferredModules[i];
+/******/ 			var fulfilled = true;
+/******/ 			for(var j = 1; j < deferredModule.length; j++) {
+/******/ 				var depId = deferredModule[j];
+/******/ 				if(installedChunks[depId] !== 0) fulfilled = false;
+/******/ 			}
+/******/ 			if(fulfilled) {
+/******/ 				deferredModules.splice(i--, 1);
+/******/ 				result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
+/******/ 			}
+/******/ 		}
+/******/
+/******/ 		return result;
+/******/ 	}
+/******/
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// object to store loaded and loading chunks
+/******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ 	// Promise = chunk loading, 0 = chunk loaded
+/******/ 	var installedChunks = {
+/******/ 		"/manifest": 0
+/******/ 	};
+/******/
+/******/ 	var deferredModules = [];
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "/";
+/******/
+/******/ 	var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
+/******/ 	var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
+/******/ 	jsonpArray.push = webpackJsonpCallback;
+/******/ 	jsonpArray = jsonpArray.slice();
+/******/ 	for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
+/******/ 	var parentJsonpFunction = oldJsonpFunction;
+/******/
+/******/
+/******/ 	// run deferred modules from other chunks
+/******/ 	checkDeferredModules();
+/******/ })
+/************************************************************************/
+/******/ ([]);

public/manifest.js

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=be0e1de324934e54f7a3",
-    "/manifest.js": "/manifest.js?id=3c768977c2574a34506e",
-    "/vendor.js": "/vendor.js?id=38a9d2f43b98aaf4f7dd"
+    "/app.js": "/app.js?id=eb52df88a1b6de5b89bb",
+    "/manifest.js": "/manifest.js?id=d9708e48a6c10ccee4bb",
+    "/vendor.js": "/vendor.js?id=736997e66e11f6db997a"
 }

public/mix-manifest.json

@@ -86,14 +86,6 @@
       :body-style="{ padding: 0 }"
       v-loading="loading"
     >
-      <el-tabs v-if="false">
-        <el-tab-pane label="全部" name="first"></el-tab-pane>
-        <el-tab-pane label="代付款" name="second"></el-tab-pane>
-        <el-tab-pane label="代发货" name="third"></el-tab-pane>
-        <el-tab-pane label="待收货" name="third2"></el-tab-pane>
-        <el-tab-pane label="已完成" name="third3"></el-tab-pane>
-        <el-tab-pane label="已关闭" name="third4"></el-tab-pane>
-      </el-tabs>
       <div class="filter-form" v-if="attrs.filter.filters.length > 0">
         <el-form
           :inline="true"
@@ -139,16 +131,10 @@
           @sort-change="onTableSortChange"
           @selection-change="onTableselectionChange"
         >
+          <el-table-column v-if='attrs.attributes.selection' align="center" type="selection"></el-table-column>
+
           <template v-for="column in attrs.columnAttributes">
             <el-table-column
-              v-if="column.type == 'selection'"
-              :type="column.type"
-              :width="column.width"
-              :align="column.align"
-              :key="column.prop"
-            ></el-table-column>
-            <el-table-column
-              v-else
               :type="column.type"
               :key="column.prop"
               :column-key="column.columnKey"
@@ -165,8 +151,8 @@
                 <span>{{ scope.column.label }}</span>
                 <el-tooltip
                   placement="top"
-                  v-if="attrs.columnAttributes[scope.$index].help"
-                  :content="attrs.columnAttributes[scope.$index].help"
+                  v-if="column.help"
+                  :content="column.help"
                 >
                   <i class="el-icon-question hover"></i>
                 </el-tooltip>
@@ -238,7 +224,9 @@ export default {
       page: 1,
       quickSearch: null,
       selectionRows: [],
-      filterFormData: null
+      filterFormData: null,
+      tabsSelectdata: {},
+      tabsActiveName: "all"
     };
   },
 
@@ -285,6 +273,12 @@ export default {
     } catch (e) {}
   },
   methods: {
+    onTabClick(e) {
+      const name = this._.split(e.name, "----");
+      this.tabsSelectdata[name[0]] = name[1];
+
+      this.getData();
+    },
     //表单过滤提交
     onFilterSubmit() {
       this.getData();
@@ -305,7 +299,8 @@ export default {
             per_page: this.pageData.pageSize,
             ...this.sort,
             ...this.q_search,
-            ...this.filterFormData
+            ...this.filterFormData,
+            ...this.tabsSelectdata
           }
         })
         .then(

public/vendor.js

@@ -4,7 +4,6 @@
 namespace SmallRuralDog\Admin;
 
 
-use Closure;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Model as Eloquent;
 use Illuminate\Database\Eloquent\Relations;
@@ -41,7 +40,6 @@ class Grid extends Component implements \JsonSerializable
 
 
     protected $keyName = 'id';
-    protected $selection = false;
     protected $tree = false;
     protected $dataUrl;
     protected $isGetData = false;
@@ -89,18 +87,6 @@ public function with(array $withs)
         return $this;
     }
 
-    /**
-     * 设置是否多选
-     * @param bool $selection
-     * @return $this
-     */
-    public function selection($selection = true)
-    {
-        $this->selection = $selection;
-
-        return $this;
-    }
-
     /**
      * 设置树形表格
      * @param bool $tree
@@ -173,13 +159,13 @@ protected function addRelationColumn($name, $label = '')
      */
     public function columns($columns)
     {
-        if ($this->selection) {
+        /*if ($this->selection) {
             $column = $this->addColumn($this->model->getModel()->getKey());
             $column->type("selection");
             $column->align("center");
             $column->width(50);
             $columns = collect($columns)->prepend($column)->all();
-        }
+        }*/
         $this->columnAttributes = collect($columns)->map(function (Column $column) {
             return $column->getAttributes();
         })->toArray();
@@ -196,6 +182,7 @@ protected function applyQuery()
         $this->applyQuickSearch();
 
         $this->applyFilter(false);
+
     }
 
     /**
@@ -262,7 +249,7 @@ public function jsonSerialize()
                 'resource' => url(request()->getPathInfo())
             ];
             $viewData['keyName'] = $this->keyName;
-            $viewData['selection'] = $this->selection;
+            $viewData['selection'] = $this->attributes->selection;
             $viewData['tree'] = $this->tree;
             $viewData['defaultSort'] = $this->defaultSort;
             $viewData['columnAttributes'] = $this->columnAttributes;

resources/js/components/grid/Table.vue

@@ -147,4 +147,12 @@ public function draggable($url)
         $this->attributes->draggableUrl = $url;
         return $this;
     }
+
+    public function selection($selection = true)
+    {
+        $this->attributes->selection = $selection;
+        return $this;
+    }
+
+
 }

src/Grid.php

@@ -105,6 +105,7 @@ public function conditions()
             $conditions[] = $filter->condition($params);
         }
 
+
         return tap(array_filter($conditions), function ($conditions) {
             if (!empty($conditions)) {
                 $this->expand();