使用 date-range-picker (src/components/DateRangePicker/) 代替 el-date-picker (#96)

2020-06-20 13:25:43 +08:00
parent 92434003bf
commit 31ed86ff4d
20 changed files with 413 additions and 202 deletions
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -5,17 +5,7 @@
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.name" clearable size="small" placeholder="输入部门名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
-        <el-date-picker
-          v-model="query.createTime"
-          :default-time="['00:00:00','23:59:59']"
-          type="daterange"
-          range-separator=":"
-          size="small"
-          class="date-item"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        />
+        <date-range-picker v-model="query.createTime" class="date-item" />
        <el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 90px" @change="crud.toQuery">
          <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
@@ -117,11 +107,12 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import udOperation from '@crud/UD.operation'
+import DateRangePicker from '@/components/DateRangePicker'

 const defaultForm = { id: null, name: null, isTop: '1', subCount: 0, pid: null, deptSort: 999, enabled: 'true' }
 export default {
  name: 'Dept',
-  components: { Treeselect, crudOperation, rrOperation, udOperation },
+  components: { Treeselect, crudOperation, rrOperation, udOperation, DateRangePicker },
  cruds() {
    return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
  },
--- a/src/views/system/job/module/header.vue
+++ b/src/views/system/job/module/header.vue
@@ -3,17 +3,7 @@
    v-if="crud.props.searchToggle"
  >
    <el-input v-model="query.name" clearable size="small" placeholder="输入岗位名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
-    <el-date-picker
-      v-model="query.createTime"
-      :default-time="['00:00:00','23:59:59']"
-      type="daterange"
-      range-separator=":"
-      size="small"
-      class="date-item"
-      value-format="yyyy-MM-dd HH:mm:ss"
-      start-placeholder="开始日期"
-      end-placeholder="结束日期"
-    />
+    <date-range-picker v-model="query.createTime" class="date-item" />
    <el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 90px" @change="crud.toQuery">
      <el-option v-for="item in dict.dict.job_status" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
@@ -24,8 +14,9 @@
 <script>
 import { header } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
+import DateRangePicker from '@/components/DateRangePicker'
 export default {
-  components: { rrOperation },
+  components: { rrOperation, DateRangePicker },
  mixins: [header()],
  props: {
    dict: {
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -5,17 +5,7 @@
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.blurry" clearable size="small" placeholder="模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
-        <el-date-picker
-          v-model="query.createTime"
-          :default-time="['00:00:00','23:59:59']"
-          type="daterange"
-          range-separator=":"
-          size="small"
-          class="date-item"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        />
+        <date-range-picker v-model="query.createTime" class="date-item" />
        <rrOperation />
      </div>
      <crudOperation :permission="permission" />
@@ -171,12 +161,13 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import udOperation from '@crud/UD.operation'
+import DateRangePicker from '@/components/DateRangePicker'

 // crud交由presenter持有
 const defaultForm = { id: null, title: null, menuSort: 999, path: null, component: null, componentName: null, iframe: false, roles: [], pid: 0, icon: null, cache: false, hidden: false, type: 0, permission: null }
 export default {
  name: 'Menu',
-  components: { Treeselect, IconSelect, crudOperation, rrOperation, udOperation },
+  components: { Treeselect, IconSelect, crudOperation, rrOperation, udOperation, DateRangePicker },
  cruds() {
    return CRUD({ title: '菜单', url: 'api/menus', crudMethod: { ...crudMenu }})
  },
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -4,17 +4,14 @@
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
-        <el-input v-model="query.blurry" size="small" clearable placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
-        <el-date-picker
-          v-model="query.createTime"
-          :default-time="['00:00:00','23:59:59']"
-          type="daterange"
-          range-separator=":"
-          size="small"
-          class="date-item"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
+        <el-input v-model="query.blurry" size="small" clearable placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />          :default-time="['00:00:00','23:59:59']"
+        type="daterange"
+        range-separator=":"
+        size="small"
+        class="date-item"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
        />
        <rrOperation />
      </div>
--- a/src/views/system/timing/index.vue
+++ b/src/views/system/timing/index.vue
@@ -5,17 +5,7 @@
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.jobName" clearable size="small" placeholder="输入任务名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
-        <el-date-picker
-          v-model="query.createTime"
-          :default-time="['00:00:00','23:59:59']"
-          type="daterange"
-          range-separator=":"
-          size="small"
-          class="date-item"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        />
+        <date-range-picker v-model="query.createTime" class="date-item" />
        <rrOperation />
      </div>
      <crudOperation :permission="permission">
@@ -134,11 +124,12 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import pagination from '@crud/Pagination'
+import DateRangePicker from '@/components/DateRangePicker'

 const defaultForm = { id: null, jobName: null, subTask: null, beanName: null, methodName: null, params: null, cronExpression: null, pauseAfterFailure: true, isPause: false, personInCharge: null, email: null, description: null }
 export default {
  name: 'Timing',
-  components: { Log, pagination, crudOperation, rrOperation },
+  components: { Log, pagination, crudOperation, rrOperation, DateRangePicker },
  cruds() {
    return CRUD({ title: '定时任务', url: 'api/jobs', crudMethod: { ...crudJob }})
  },
--- a/src/views/system/timing/log.vue
+++ b/src/views/system/timing/log.vue
@@ -3,17 +3,7 @@
    <!-- 搜索 -->
    <div class="head-container">
      <el-input v-model="query.jobName" clearable size="small" placeholder="输入任务名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
-      <el-date-picker
-        v-model="query.createTime"
-        :default-time="['00:00:00','23:59:59']"
-        type="daterange"
-        range-separator=":"
-        size="small"
-        class="date-item"
-        value-format="yyyy-MM-dd HH:mm:ss"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-      />
+      <date-range-picker v-model="query.createTime" class="date-item" />
      <el-select v-model="query.isSuccess" placeholder="日志状态" clearable size="small" class="filter-item" style="width: 110px" @change="toQuery">
        <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
      </el-select>
@@ -72,7 +62,9 @@

 <script>
 import crud from '@/mixins/crud'
+import DateRangePicker from '@/components/DateRangePicker'
 export default {
+  components: { DateRangePicker },
  mixins: [crud],
  data() {
    return {
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -38,17 +38,7 @@
              class="filter-item"
              @keyup.enter.native="crud.toQuery"
            />
-            <el-date-picker
-              v-model="query.createTime"
-              :default-time="['00:00:00','23:59:59']"
-              type="daterange"
-              range-separator=":"
-              size="small"
-              class="date-item"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            />
+            <date-range-picker v-model="query.createTime" class="date-item" />
            <el-select
              v-model="query.enabled"
              clearable
@@ -212,6 +202,7 @@ import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import udOperation from '@crud/UD.operation'
 import pagination from '@crud/Pagination'
+import DateRangePicker from '@/components/DateRangePicker'
 import Treeselect from '@riophae/vue-treeselect'
 import { mapGetters } from 'vuex'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
@@ -221,7 +212,7 @@ let userJobs = []
 const defaultForm = { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 'false', roles: [], jobs: [], dept: { id: null }, phone: null }
 export default {
  name: 'User',
-  components: { Treeselect, crudOperation, rrOperation, udOperation, pagination },
+  components: { Treeselect, crudOperation, rrOperation, udOperation, pagination, DateRangePicker },
  cruds() {
    return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
  },