使用 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/mnt/app/index.vue
+++ b/src/views/mnt/app/index.vue
@@ -5,17 +5,7 @@
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.name" 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="结束日期"
-        />
+        <date-range-picker v-model="query.createTime" class="date-item" />
        <rrOperation />
      </div>
      <crudOperation :permission="permission">
@@ -95,11 +85,12 @@ 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'

 const defaultForm = { id: null, name: null, port: 8080, uploadPath: '/opt/upload', deployPath: '/opt/app', backupPath: '/opt/backup', startScript: null, deployScript: null }
 export default {
  name: 'App',
-  components: { pagination, crudOperation, rrOperation, udOperation },
+  components: { pagination, crudOperation, rrOperation, udOperation, DateRangePicker },
  cruds() {
    return CRUD({ title: '应用', url: 'api/app', crudMethod: { ...crudApp }})
  },
--- a/src/views/mnt/database/index.vue
+++ b/src/views/mnt/database/index.vue
@@ -5,17 +5,7 @@
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.blurry" 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="结束日期"
-        />
+        <date-range-picker v-model="query.createTime" class="date-item" />
        <rrOperation />
      </div>
      <crudOperation :permission="permission">
@@ -89,11 +79,12 @@ 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'

 const defaultForm = { id: null, name: null, jdbcUrl: 'jdbc:mysql://', userName: null, pwd: null }
 export default {
  name: 'DataBase',
-  components: { eForm, pagination, crudOperation, rrOperation, udOperation },
+  components: { eForm, pagination, crudOperation, rrOperation, udOperation, DateRangePicker },
  cruds() {
    return CRUD({ title: '数据库', url: 'api/database', crudMethod: { ...crudDatabase }})
  },
--- a/src/views/mnt/deploy/index.vue
+++ b/src/views/mnt/deploy/index.vue
@@ -5,17 +5,7 @@
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.appName" 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="结束日期"
-        />
+        <date-range-picker v-model="query.createTime" class="date-item" />
        <rrOperation />
      </div>
      <crudOperation :permission="permission">
@@ -128,11 +118,12 @@ 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'

 const defaultForm = { id: null, app: { id: null }, deploys: [] }
 export default {
  name: 'Deploy',
-  components: { dForm, fForm, pagination, crudOperation, rrOperation, udOperation },
+  components: { dForm, fForm, pagination, crudOperation, rrOperation, udOperation, DateRangePicker },
  cruds() {
    return CRUD({ title: '部署', url: 'api/deploy', crudMethod: { ...crudDeploy }})
  },
--- a/src/views/mnt/deploy/sysRestore.vue
+++ b/src/views/mnt/deploy/sysRestore.vue
@@ -2,17 +2,7 @@
  <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialog" title="系统还原" width="800px">
    <!--工具栏-->
    <div class="head-container">
-      <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-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
    </div>
    <el-form size="small" label-width="80px">
@@ -52,7 +42,9 @@
 <script>
 import crud from '@/mixins/crud'
 import { reducte } from '@/api/mnt/deployHistory'
+import DateRangePicker from '@/components/DateRangePicker'
 export default {
+  components: { DateRangePicker },
  mixins: [crud],
  props: {
    appName: {
--- a/src/views/mnt/deployHistory/index.vue
+++ b/src/views/mnt/deployHistory/index.vue
@@ -5,18 +5,7 @@
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.blurry" clearable placeholder="输入搜索内容" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
-        <el-date-picker
-          v-model="query.deployDate"
-          :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"
-          style="width: 240px"
-          start-placeholder="部署开始日期"
-          end-placeholder="部署结束日期"
-        />
+        <date-range-picker v-model="query.deployDate" class="date-item" />
        <rrOperation />
      </div>
      <crudOperation :permission="permission" />
@@ -61,10 +50,11 @@ import CRUD, { presenter, header } 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'

 export default {
  name: 'DeployHistory',
-  components: { pagination, crudOperation, rrOperation },
+  components: { pagination, crudOperation, rrOperation, DateRangePicker },
  cruds() {
    return CRUD({ title: '部署历史', url: 'api/deployHistory', crudMethod: { del }})
  },
--- a/src/views/mnt/server/index.vue
+++ b/src/views/mnt/server/index.vue
@@ -5,17 +5,7 @@
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.id" clearable placeholder="输入名称或IP搜索" 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" />
        <rrOperation />
      </div>
      <crudOperation :permission="permission" />
@@ -81,11 +71,12 @@ 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'

 const defaultForm = { id: null, name: null, ip: null, port: 22, account: 'root', password: null }
 export default {
  name: 'Server',
-  components: { pagination, crudOperation, rrOperation, udOperation },
+  components: { pagination, crudOperation, rrOperation, udOperation, DateRangePicker },
  cruds() {
    return CRUD({ title: '服务器', url: 'api/serverDeploy', crudMethod: { ...crudServer }})
  },