11

assets/styles/global.less

@@ -83,3 +83,40 @@
     background: linear-gradient(90deg, rgba(0, 107, 207, 0.4) 0%, rgba(0, 128, 247, 0.08) 100%) !important;
   }
 }
+
+
+.visual_datepicker {
+  .ant-input {
+    background-color: rgba(5, 38, 93, 1);
+    color: #fff;
+  }
+}
+.visual_dropdown_cls {
+  .ant-calendar-today .ant-calendar-date {
+    color: #fff;
+    font-weight: bold;
+    border-color: #fff;
+  }
+  .ant-calendar-picker-container {
+    color: #fff;
+
+  }
+  .ant-calendar-input {
+    background-color: rgba(5, 38, 93, 1);
+    color: #fff;
+
+  }
+  .ant-calendar {
+    background-color: rgba(5, 38, 93, 1);
+    color: #fff;
+    border: 1px solid rgba(5, 38, 93, 0.5);
+
+  }
+  .ant-calendar-date, .ant-calendar-header .ant-calendar-prev-century-btn, .ant-calendar-header .ant-calendar-next-century-btn, .ant-calendar-header .ant-calendar-prev-decade-btn, .ant-calendar-header .ant-calendar-next-decade-btn, .ant-calendar-header .ant-calendar-prev-month-btn, .ant-calendar-header .ant-calendar-next-month-btn, .ant-calendar-header .ant-calendar-prev-year-btn, .ant-calendar-header .ant-calendar-next-year-btn, .ant-calendar-header .ant-calendar-century-select, .ant-calendar-header .ant-calendar-decade-select, .ant-calendar-header .ant-calendar-year-select, .ant-calendar-header .ant-calendar-month-select {
+    color: #fff !important;
+
+  }
+  .ant-calendar-range .ant-calendar-in-range-cell::before {
+    background-color: rgba(20, 38, 66, 0.3);
+  }
+}

components/smallCommon/Curd.vue

@@ -13,6 +13,7 @@
             v-decorator="[menuItem.key]"
             :placeholder="menuItem.placeholder || ''"
             v-else-if="menuItem.type === 'select'"
+            :dropdown-class-name="dropdownClassName"
           >
             <a-select-option :value="cItem.value" v-for="cItem in menuItem.children || []" :key="cItem.value">
               {{ cItem.label }}
@@ -20,7 +21,8 @@
           </a-select>
           <a-range-picker
             :placeholder="menuItem.placeholder || ''" v-decorator="[menuItem.key]"
-            v-else-if="menuItem.type === 'dateRange'" format="YYYY-MM-DD"/>
+            v-else-if="menuItem.type === 'dateRange'" format="YYYY-MM-DD"
+            :dropdown-class-name="dropdownClassName" />
         </a-form-item>
         <a-form-item>
           <a-button type="primary" html-type="submit" v-if="!hideSearch">查询</a-button>
@@ -66,6 +68,7 @@
           <a-select
             v-decorator="gtDecorator(menuItem)"
             :placeholder="menuItem.placeholder || ''"
+            :dropdown-class-name="dropdownClassName"
             v-else-if="menuItem.type === 'select'"
             v-bind="menuItem.props || {}"
           >
@@ -77,6 +80,7 @@
             v-bind="menuItem.props || {}"
             v-decorator="gtDecorator(menuItem)"
             :placeholder="menuItem.placeholder || ''"
+            :dropdown-class-name="dropdownClassName"
             allow-clear
             :tree-data="menuItem.children"
             tree-default-expand-all
@@ -89,16 +93,19 @@
             </a-select-option>
           </a-tree-select>
           <a-range-picker v-bind="menuItem.props || {}" v-decorator="gtDecorator(menuItem)"
-                          v-else-if="menuItem.type === 'dateRange'" format="YYYY-MM-DD"/>
+                          v-else-if="menuItem.type === 'dateRange'" format="YYYY-MM-DD" :dropdown-class-name="dropdownClassName" />
 
           <a-date-picker  style="width: 100%" v-decorator="gtDecorator(menuItem)" v-bind="menuItem.props || {}"
-                         v-else-if="menuItem.type === 'date'" format="YYYY-MM-DD"/>
+                         v-else-if="menuItem.type === 'date'" format="YYYY-MM-DD" :dropdown-class-name="dropdownClassName"/>
         </a-form-item>
       </a-form>
     </a-modal>
   </div>
 </template>
 <script>
+import moment from "moment";
+import { get } from 'lodash'
+
 export default {
   name: "user",
   data() {
@@ -128,6 +135,11 @@ export default {
       type: Object,
       default: () => ({})
     },
+    dropdownClassName: {
+      type: String,
+      default: ''
+
+    },
     hideSearch: {
       type: Boolean,
       default: false
@@ -185,6 +197,7 @@ export default {
   },
   watch: {},
   mounted() {
+    console.log(this.dropdownClassName);
     this.handleSearch()
   },
   methods: {
@@ -268,10 +281,23 @@ export default {
     },
     async handleSearch(e) {
       e && e.preventDefault();
+      const rangeList = ['dateRange']
       const values = this.form.getFieldsValue()
-      const {api, noPage, method} = this.apiConf.listApi
+      const searchValues = {}
+      for (const formItem of this.formItems.filter(item => item.isSearch)) {
+        if (rangeList.indexOf(formItem.type) >= 0) {
+          formItem.fields.forEach((field, index) => {
+            if (formItem.type.indexOf('date') >= 0) {
+              searchValues[field] = values[formItem.key] && values[formItem.key][index] && moment(values[formItem.key][index]).format('YYYY-MM-DD') || ''
+            }
+          })
+        } else {
+          searchValues[formItem.key] = values[formItem.key]
+        }
+      }
+      const {api, noPage, method, renderKey} = this.apiConf.listApi
       const {data} = await this[`$${method}`](api, {
-        ...values,
+        ...searchValues,
         pageSize: this.page.pageSize,
         current: this.page.current,
       })
@@ -281,8 +307,8 @@ export default {
         this.tableDataSource = data
       } else {
         this.page.total = data.total || 0
-        this.cacheData = data.items
+        this.cacheData = renderKey ? get(data, renderKey) : data.items
-        this.tableDataSource = data.items
+        this.tableDataSource = renderKey ? get(data, renderKey) : data.items
       }
     },
     async handleOk() {

components/smallCommon/CustomTable.vue

@@ -1,8 +1,8 @@
 
 
 <template>
-  <div class="custom-table">
+  <div class="custom-table visual_datepicker">
-    <Curd v-bind="$attrs" v-on="$listeners" ref="curd">
+    <Curd  v-bind="$attrs" v-on="$listeners" ref="curd" dropdown-class-name="visual_dropdown_cls">
       <template slot="search-button" slot-scope="{ search }">
         <slot name="search-button" v-bind:search="search"></slot>
       </template>

pages/cleanTravel/trend.vue

@@ -15,14 +15,12 @@
           <a-col :span="18">
             <CustomTable
               hide-action
-              hide-search
               hide-button
               :columns="columns"
               :api-conf="apiConf"
               :form-items="formItems"
             >
               <template slot="search-button" slot-scope="{ search }">
-                <a-button type="primary" @click="exportList(search)">查询</a-button>
                 <a-button type="primary" @click="exportList(search)" style="margin-left: 10px;">导出</a-button>
                 <Split height="10"></Split>
               </template>
@@ -67,42 +65,28 @@ export default {
       roles: [],
       columns: [
         {
-          dataIndex: 'outTime',
+          dataIndex: 'time',
-          key: 'outTime',
+          key: 'time',
           title: '日期'
         },
         {
-          dataIndex: 'carNum',
+          dataIndex: 'carNumber',
-          key: 'carNum',
+          key: 'carNumber',
           title: '车牌号'
         },
         {
-          dataIndex: 'carModel',
+          dataIndex: 'carType',
-          key: 'carModel',
+          key: 'carType',
           title: '车型'
         },
         {
-          dataIndex: 'newCar',
+          dataIndex: 'effluent',
-          key: 'newCar',
+          key: 'effluent',
-          title: '新能源',
-          customRender(text) {
-            if (text) return '是'
-            return '否'
-          }
-        },
-        {
-          dataIndex: 'emissions',
-          key: 'emissions',
           title: '燃油车'
-        },
-        {
-          dataIndex: 'createDateTime',
-          key: 'createDateTime',
-          title: '出厂日期'
         }
       ],
       apiConf: {
-        listApi: {api: '/api/Transport/list', method: 'get'},
+        listApi: {api: '/api/Transport/gettransport', method: 'get', renderKey: 'item.cleans'},
       }
     }
   },
@@ -142,6 +126,13 @@ export default {
       const [start, end] = time
       const fmt = 'YYYY-MM-DD'
       window.open(`http://101.43.201.20:5000/api/Ledger/export?start=${moment(start).format(fmt)}&end=${moment(end).format(fmt)}`, '_blank')
+    },
+    searchList (search) {
+      const [startTime, endTime] = search.time
+      this.$get('/api/Transport/gettransport', {
+        startTime: moment(startTime).format('YYYY-MM-DD'),
+        endTime: moment(endTime).format('YYYY-MM-DD'),
+      })
     }
 
   }