11

2024-08-22 23:55:47 +08:00 · 2024-08-22 23:55:47 +08:00 · fefd70a01a
parent 0f47c609e7
commit fefd70a01a
4 changed files with 89 additions and 35 deletions
--- a/assets/styles/global.less
+++ b/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);
+  }
+}
--- a/components/smallCommon/Curd.vue
+++ b/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.tableDataSource = data.items
+        this.cacheData = renderKey ? get(data, renderKey) : data.items
+        this.tableDataSource = renderKey ? get(data, renderKey) : data.items
      }
    },
    async handleOk() {
--- a/components/smallCommon/CustomTable.vue
+++ b/components/smallCommon/CustomTable.vue
@ -1,8 +1,8 @@


 <template>
-  <div class="custom-table">
-    <Curd v-bind="$attrs" v-on="$listeners" ref="curd">
+  <div class="custom-table visual_datepicker">
+    <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>
--- a/pages/cleanTravel/trend.vue
+++ b/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',
-          key: 'outTime',
+          dataIndex: 'time',
+          key: 'time',
          title: '日期'
        },
        {
-          dataIndex: 'carNum',
-          key: 'carNum',
+          dataIndex: 'carNumber',
+          key: 'carNumber',
          title: '车牌号'
        },
        {
-          dataIndex: 'carModel',
-          key: 'carModel',
+          dataIndex: 'carType',
+          key: 'carType',
          title: '车型'
        },
        {
-          dataIndex: 'newCar',
-          key: 'newCar',
-          title: '新能源',
-          customRender(text) {
-            if (text) return '是'
-            return '否'
-          }
-        },
-        {
-          dataIndex: 'emissions',
-          key: 'emissions',
+          dataIndex: 'effluent',
+          key: 'effluent',
          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'),
+      })
    }

  }