Skip to content

F
front-backend
Commit 31ed86ff by Ryan Liu Committed by GitHub
Options

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

parent 92434003
Showing with 413 additions and 202 deletions
src/components/DateRangePicker/index.vue 0 → 100644
<script>
import { DatePicker, DatePickerOptions } from 'element-ui'
import { calendarShortcuts } from '@/utils/shortcuts'
export default {
name: 'DateRangePicker',
mixins: [DatePicker],
props: {
type: {
type: String,
default: 'daterange'
},
valueFormat: {
type: String,
default: 'yyyy-MM-dd HH:mm:ss'
},
defaultTime: {
type: Array,
default: _ => ['00:00:00', '23:59:59']
},
pickerOptions: {
type: DatePickerOptions,
default: _ => {
return { shortcuts: calendarShortcuts }
}
},
size: {
type: String,
default: 'small'
},
rangeSeparator: {
type: String,
default: ':'
},
startPlaceholder: {
type: String,
default: '开始日期'
},
endPlaceholder: {
type: String,
default: '结束日期'
}
}
}
</script>
src/utils/datetime.js 0 → 100644
/* eslint-disable */
/**
* Date对象的补充函数，包括类似Python中的strftime()
* 阿债 https://gitee.com/azhai/datetime.js
*/
Date.prototype.toMidnight = function() {
this.setHours(0)
this.setMinutes(0)
this.setSeconds(0)
this.setMilliseconds(0)
return this
}
Date.prototype.daysAgo = function(days, midnight) {
days = days ? days - 0 : 0
const date = new Date(this.getTime() - days * 8.64E7)
return midnight ? date.toMidnight() : date
}
Date.prototype.monthBegin = function(offset) {
offset = offset ? offset - 0 : 0
const days = this.getDate() - 1 - offset
return this.daysAgo(days, true)
}
Date.prototype.quarterBegin = function() {
const month = this.getMonth() - this.getMonth() % 3
return new Date(this.getFullYear(), month, 1).toMidnight()
}
Date.prototype.yearBegin = function() {
return new Date(this.getFullYear(), 0, 1).toMidnight()
}
Date.prototype.strftime = function(format, local) {
if (!format) {
const str = new Date(this.getTime() + 2.88E7).toISOString()
return str.substr(0, 16).replace('T', ' ')
}
local = local && local.startsWith('zh') ? 'zh' : 'en'
const padZero = function(str, len) {
const pads = len - str.toString().length
return (pads && pads > 0 ? '0'.repeat(pads) : '') + str
}
format = format.replace('%F', '%Y-%m-%d')
format = format.replace(/%D|%x/, '%m/%d/%y')
format = format.replace(/%T|%X/, '%H:%M:%S')
format = format.replace('%R', '%H:%M')
format = format.replace('%r', '%H:%M:%S %p')
format = format.replace('%c', '%a %b %e %H:%M:%S %Y')
const _this = this
return format.replace(/%[A-Za-z%]/g, function(f) {
let ans = f
switch (f) {
case '%%':
ans = '%'
break
case '%Y':
case '%G':
ans = _this.getFullYear()
break
case '%y':
ans = _this.getFullYear() % 100
break
case '%C':
ans = _this.getFullYear() / 100
break
case '%m':
case '%n':
ans = _this.getMonth() + 1
break
case '%B':
local = local.startsWith('en') ? 'english' : local
case '%b':
const m = _this.getMonth()
ans = local_labels.monthes[local][m]
break
case '%d':
case '%e':
ans = _this.getDate()
break
case '%j':
ans = _this.getDaysOfYear()
break
case '%U':
case '%W':
const ws = _this.getWeeksOfYear(f === '%W')
ans = padZero(ws, 2)
break
case '%w':
ans = _this.getDay()
case '%u':
ans = ans === 0 ? 7 : ans
break
case '%A':
local = local.startsWith('en') ? 'english' : local
case '%a':
const d = _this.getDay()
ans = local_labels.weekdays[local][d]
break
case '%H':
case '%k':
ans = _this.getHours()
break
case '%I':
case '%l':
ans = _this.getHours()
ans = ans % 12
break
case '%M':
ans = _this.getMinutes()
break
case '%S':
ans = _this.getSeconds()
break
case '%s':
ans = parseInt(_this.getTime() / 1E3)
break
case '%f':
const ms = _this.getMilliseconds()
ans = padZero(ms * 1E3, 6)
break
case '%P':
local = local.startsWith('en') ? 'english' : local
case '%p':
const h = _this.getHours()
ans = local_labels.meridians[local][h < 12 ? 0 : 1]
break
case '%z':
let tzo = _this.getTimezoneOffset()
const sign = tzo < 0 ? '-' : '+'
tzo = Math.abs(tzo)
const ho = padZero(tzo / 60, 2)
const mo = padZero(tzo % 60, 2)
ans = sign + ho + mo
break
default:
break
}
if (f === '%C' || f === '%y' || f === '%m' || f === '%d' || f === '%H' || f === '%M' || f === '%S') {
ans = padZero(ans, 2)
}
return ans.toString()
})
}
Date.prototype.humanize = function(local) {
local = local && local.startsWith('zh') ? 'zh' : 'en'
const result = this.strftime('', local)
const days = (Date.today() - this.toMidnight().getTime()) / 8.64E7
if (days <= -10 || days >= 10) {
return result
}
const labels = local_labels.dayagos[local]
let lbl = ''
if (days === 0 || days === 1) {
lbl = labels[days]
} else if (days === -1) {
lbl = labels[2]
} else if (days >= 2) {
lbl = days + labels[3]
} else {
lbl = days + labels[4]
}
return lbl + result.substr(10, 6)
}
const local_labels = {
monthes: {
english: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
en: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
zh: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
weekdays: {
english: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
en: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
zh: ['日', '一', '二', '三', '四', '五', '六']
},
meridians: {
english: ['a.m.', 'p.m.'],
en: ['AM', 'PM'],
zh: ['上午', '下午']
},
dayagos: {
english: ['Today', 'Yesterday', 'Tomorrow', ' days ago', ' days late'],
en: ['Today', 'Yesterday', 'Tomorrow', ' days ago', ' days late'],
zh: ['今天', '昨天', '明天', '天前', '天后']
}
}
export default Date
src/utils/shortcuts.js 0 → 100644
import Date from './datetime.js'
export const calendarBaseShortcuts = [{
text: '今天',
onClick(picker) {
const start = new Date()
picker.$emit('pick', [start, start])
}
}, {
text: '昨天',
onClick(picker) {
const start = new Date().daysAgo(1)
picker.$emit('pick', [start, start])
}
}, {
text: '最近一周',
onClick(picker) {
const start = new Date().daysAgo(7)
picker.$emit('pick', [start, new Date()])
}
}, {
text: '最近30天',
onClick(picker) {
const start = new Date().daysAgo(30)
picker.$emit('pick', [start, new Date()])
}
}, {
text: '这个月',
onClick(picker) {
const start = new Date().monthBegin()
picker.$emit('pick', [start, new Date()])
}
}, {
text: '本季度',
onClick(picker) {
const start = new Date().quarterBegin()
picker.$emit('pick', [start, new Date()])
}
}]
export const calendarMoveShortcuts = [{
text: '‹ 往前一天 ',
onClick(picker) {
if (picker.value.length === 0) {
picker.value = [new Date(), new Date()]
}
const start = picker.value[0].daysAgo(1)
const end = picker.value[1].daysAgo(1)
picker.$emit('pick', [start, end])
}
}, {
text: ' 往后一天 ›',
onClick(picker) {
let start = new Date()
let end = new Date()
if (picker.value.length > 0) {
if (end - picker.value[1] > 8.64E7) {
start = picker.value[0].daysAgo(-1)
end = picker.value[1].daysAgo(-1)
} else {
start = picker.value[0]
}
}
picker.$emit('pick', [start, end])
}
}, {
text: '« 往前一周 ',
onClick(picker) {
if (picker.value.length === 0) {
picker.value = [new Date().daysAgo(7), new Date()]
}
const start = picker.value[0].daysAgo(7)
const end = picker.value[1].daysAgo(7)
picker.$emit('pick', [start, end])
}
}, {
text: ' 往后一周 »',
onClick(picker) {
let start = new Date().daysAgo(7)
let end = new Date()
if (picker.value.length > 0) {
if (end - picker.value[1] > 8.64E7) {
start = picker.value[0].daysAgo(-7)
end = picker.value[1].daysAgo(-7)
} else {
start = picker.value[0]
}
}
picker.$emit('pick', [start, end])
}
}]
export const calendarShortcuts = [
...calendarBaseShortcuts,
...calendarMoveShortcuts
]
src/views/mnt/app/index.vue
...@@ -5,17 +5,7 @@ ...@@ -5,17 +5,7 @@
<div v-if="crud.props.searchToggle"> <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-input v-model="query.name" clearable placeholder="输入名称搜索" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-date-picker <date-range-picker v-model="query.createTime" class="date-item" />
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="结束日期"
/>
<rrOperation /> <rrOperation />
</div> </div>
<crudOperation :permission="permission"> <crudOperation :permission="permission">
...@@ -95,11 +85,12 @@ import rrOperation from '@crud/RR.operation' ...@@ -95,11 +85,12 @@ import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation' import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination' 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 } const defaultForm = { id: null, name: null, port: 8080, uploadPath: '/opt/upload', deployPath: '/opt/app', backupPath: '/opt/backup', startScript: null, deployScript: null }
export default { export default {
name: 'App', name: 'App',
components: { pagination, crudOperation, rrOperation, udOperation }, components: { pagination, crudOperation, rrOperation, udOperation, DateRangePicker },
cruds() { cruds() {
return CRUD({ title: '应用', url: 'api/app', crudMethod: { ...crudApp }}) return CRUD({ title: '应用', url: 'api/app', crudMethod: { ...crudApp }})
}, },
......
src/views/mnt/database/index.vue
...@@ -5,17 +5,7 @@ ...@@ -5,17 +5,7 @@
<div v-if="crud.props.searchToggle"> <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-input v-model="query.blurry" clearable placeholder="模糊搜索" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-date-picker <date-range-picker v-model="query.createTime" class="date-item" />
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="结束日期"
/>
<rrOperation /> <rrOperation />
</div> </div>
<crudOperation :permission="permission"> <crudOperation :permission="permission">
...@@ -89,11 +79,12 @@ import rrOperation from '@crud/RR.operation' ...@@ -89,11 +79,12 @@ import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation' import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination' import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'
const defaultForm = { id: null, name: null, jdbcUrl: 'jdbc:mysql://', userName: null, pwd: null } const defaultForm = { id: null, name: null, jdbcUrl: 'jdbc:mysql://', userName: null, pwd: null }
export default { export default {
name: 'DataBase', name: 'DataBase',
components: { eForm, pagination, crudOperation, rrOperation, udOperation }, components: { eForm, pagination, crudOperation, rrOperation, udOperation, DateRangePicker },
cruds() { cruds() {
return CRUD({ title: '数据库', url: 'api/database', crudMethod: { ...crudDatabase }}) return CRUD({ title: '数据库', url: 'api/database', crudMethod: { ...crudDatabase }})
}, },
......
src/views/mnt/deploy/index.vue
...@@ -5,17 +5,7 @@ ...@@ -5,17 +5,7 @@
<div v-if="crud.props.searchToggle"> <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-input v-model="query.appName" clearable placeholder="输入应用名称查询" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-date-picker <date-range-picker v-model="query.createTime" class="date-item" />
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="结束日期"
/>
<rrOperation /> <rrOperation />
</div> </div>
<crudOperation :permission="permission"> <crudOperation :permission="permission">
...@@ -128,11 +118,12 @@ import rrOperation from '@crud/RR.operation' ...@@ -128,11 +118,12 @@ import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation' import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination' import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'
const defaultForm = { id: null, app: { id: null }, deploys: [] } const defaultForm = { id: null, app: { id: null }, deploys: [] }
export default { export default {
name: 'Deploy', name: 'Deploy',
components: { dForm, fForm, pagination, crudOperation, rrOperation, udOperation }, components: { dForm, fForm, pagination, crudOperation, rrOperation, udOperation, DateRangePicker },
cruds() { cruds() {
return CRUD({ title: '部署', url: 'api/deploy', crudMethod: { ...crudDeploy }}) return CRUD({ title: '部署', url: 'api/deploy', crudMethod: { ...crudDeploy }})
}, },
......
src/views/mnt/deploy/sysRestore.vue
...@@ -2,17 +2,7 @@ ...@@ -2,17 +2,7 @@
<el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialog" title="系统还原" width="800px"> <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialog" title="系统还原" width="800px">
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<el-date-picker <date-range-picker v-model="query.createTime" class="date-item" />
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-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button> <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
</div> </div>
<el-form size="small" label-width="80px"> <el-form size="small" label-width="80px">
...@@ -52,7 +42,9 @@ ...@@ -52,7 +42,9 @@
<script> <script>
import crud from '@/mixins/crud' import crud from '@/mixins/crud'
import { reducte } from '@/api/mnt/deployHistory' import { reducte } from '@/api/mnt/deployHistory'
import DateRangePicker from '@/components/DateRangePicker'
export default { export default {
components: { DateRangePicker },
mixins: [crud], mixins: [crud],
props: { props: {
appName: { appName: {
......
src/views/mnt/deployHistory/index.vue
...@@ -5,18 +5,7 @@ ...@@ -5,18 +5,7 @@
<div v-if="crud.props.searchToggle"> <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-input v-model="query.blurry" clearable placeholder="输入搜索内容" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-date-picker <date-range-picker v-model="query.deployDate" class="date-item" />
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="部署结束日期"
/>
<rrOperation /> <rrOperation />
</div> </div>
<crudOperation :permission="permission" /> <crudOperation :permission="permission" />
...@@ -61,10 +50,11 @@ import CRUD, { presenter, header } from '@crud/crud' ...@@ -61,10 +50,11 @@ import CRUD, { presenter, header } from '@crud/crud'
import rrOperation from '@crud/RR.operation' import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination' import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'
export default { export default {
name: 'DeployHistory', name: 'DeployHistory',
components: { pagination, crudOperation, rrOperation }, components: { pagination, crudOperation, rrOperation, DateRangePicker },
cruds() { cruds() {
return CRUD({ title: '部署历史', url: 'api/deployHistory', crudMethod: { del }}) return CRUD({ title: '部署历史', url: 'api/deployHistory', crudMethod: { del }})
}, },
......
src/views/mnt/server/index.vue
...@@ -5,17 +5,7 @@ ...@@ -5,17 +5,7 @@
<div v-if="crud.props.searchToggle"> <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-input v-model="query.id" clearable placeholder="输入名称或IP搜索" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-date-picker <date-range-picker v-model="query.createTime" class="date-item" />
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="结束日期"
/>
<rrOperation /> <rrOperation />
</div> </div>
<crudOperation :permission="permission" /> <crudOperation :permission="permission" />
...@@ -81,11 +71,12 @@ import rrOperation from '@crud/RR.operation' ...@@ -81,11 +71,12 @@ import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation' import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination' import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'
const defaultForm = { id: null, name: null, ip: null, port: 22, account: 'root', password: null } const defaultForm = { id: null, name: null, ip: null, port: 22, account: 'root', password: null }
export default { export default {
name: 'Server', name: 'Server',
components: { pagination, crudOperation, rrOperation, udOperation }, components: { pagination, crudOperation, rrOperation, udOperation, DateRangePicker },
cruds() { cruds() {
return CRUD({ title: '服务器', url: 'api/serverDeploy', crudMethod: { ...crudServer }}) return CRUD({ title: '服务器', url: 'api/serverDeploy', crudMethod: { ...crudServer }})
}, },
......
src/views/monitor/log/search.vue
...@@ -8,17 +8,7 @@ ...@@ -8,17 +8,7 @@
style="width: 200px;" style="width: 200px;"
class="filter-item" class="filter-item"
/> />
<el-date-picker <date-range-picker v-model="query.createTime" class="date-item" />
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="结束日期"
/>
<rrOperation /> <rrOperation />
</div> </div>
</template> </template>
...@@ -26,8 +16,9 @@ ...@@ -26,8 +16,9 @@
<script> <script>
import { header } from '@crud/crud' import { header } from '@crud/crud'
import rrOperation from '@crud/RR.operation' import rrOperation from '@crud/RR.operation'
import DateRangePicker from '@/components/DateRangePicker'
export default { export default {
components: { rrOperation }, components: { rrOperation, DateRangePicker },
mixins: [header()] mixins: [header()]
} }
</script> </script>
src/views/system/dept/index.vue
...@@ -5,17 +5,7 @@ ...@@ -5,17 +5,7 @@
<div v-if="crud.props.searchToggle"> <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-input v-model="query.name" clearable size="small" placeholder="输入部门名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-date-picker <date-range-picker v-model="query.createTime" class="date-item" />
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-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 90px" @change="crud.toQuery"> <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-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select> </el-select>
...@@ -117,11 +107,12 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud' ...@@ -117,11 +107,12 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation' import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.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' } const defaultForm = { id: null, name: null, isTop: '1', subCount: 0, pid: null, deptSort: 999, enabled: 'true' }
export default { export default {
name: 'Dept', name: 'Dept',
components: { Treeselect, crudOperation, rrOperation, udOperation }, components: { Treeselect, crudOperation, rrOperation, udOperation, DateRangePicker },
cruds() { cruds() {
return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }}) return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
}, },
......
src/views/system/job/module/header.vue
...@@ -3,17 +3,7 @@ ...@@ -3,17 +3,7 @@
v-if="crud.props.searchToggle" 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-input v-model="query.name" clearable size="small" placeholder="输入岗位名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-date-picker <date-range-picker v-model="query.createTime" class="date-item" />
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-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 90px" @change="crud.toQuery"> <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-option v-for="item in dict.dict.job_status" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
...@@ -24,8 +14,9 @@ ...@@ -24,8 +14,9 @@
<script> <script>
import { header } from '@crud/crud' import { header } from '@crud/crud'
import rrOperation from '@crud/RR.operation' import rrOperation from '@crud/RR.operation'
import DateRangePicker from '@/components/DateRangePicker'
export default { export default {
components: { rrOperation }, components: { rrOperation, DateRangePicker },
mixins: [header()], mixins: [header()],
props: { props: {
dict: { dict: {
......
src/views/system/menu/index.vue
...@@ -5,17 +5,7 @@ ...@@ -5,17 +5,7 @@
<div v-if="crud.props.searchToggle"> <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-input v-model="query.blurry" clearable size="small" placeholder="模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
<el-date-picker <date-range-picker v-model="query.createTime" class="date-item" />
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="结束日期"
/>
<rrOperation /> <rrOperation />
</div> </div>
<crudOperation :permission="permission" /> <crudOperation :permission="permission" />
...@@ -171,12 +161,13 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud' ...@@ -171,12 +161,13 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation' import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation' import udOperation from '@crud/UD.operation'
import DateRangePicker from '@/components/DateRangePicker'
// crud交由presenter持有 // 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 } 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 { export default {
name: 'Menu', name: 'Menu',
components: { Treeselect, IconSelect, crudOperation, rrOperation, udOperation }, components: { Treeselect, IconSelect, crudOperation, rrOperation, udOperation, DateRangePicker },
cruds() { cruds() {
return CRUD({ title: '菜单', url: 'api/menus', crudMethod: { ...crudMenu }}) return CRUD({ title: '菜单', url: 'api/menus', crudMethod: { ...crudMenu }})
}, },
......
src/views/system/role/index.vue
...@@ -4,17 +4,14 @@ ...@@ -4,17 +4,14 @@
<div class="head-container"> <div class="head-container">
<div v-if="crud.props.searchToggle"> <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-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']"
<el-date-picker type="daterange"
v-model="query.createTime" range-separator=":"
:default-time="['00:00:00','23:59:59']" size="small"
type="daterange" class="date-item"
range-separator=":" value-format="yyyy-MM-dd HH:mm:ss"
size="small" start-placeholder="开始日期"
class="date-item" end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期"
/> />
<rrOperation /> <rrOperation />
</div> </div>
......
src/views/system/timing/index.vue
...@@ -5,17 +5,7 @@ ...@@ -5,17 +5,7 @@
<div v-if="crud.props.searchToggle"> <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-input v-model="query.jobName" clearable size="small" placeholder="输入任务名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
<el-date-picker <date-range-picker v-model="query.createTime" class="date-item" />
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="结束日期"
/>
<rrOperation /> <rrOperation />
</div> </div>
<crudOperation :permission="permission"> <crudOperation :permission="permission">
...@@ -134,11 +124,12 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud' ...@@ -134,11 +124,12 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation' import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination' 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 } 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 { export default {
name: 'Timing', name: 'Timing',
components: { Log, pagination, crudOperation, rrOperation }, components: { Log, pagination, crudOperation, rrOperation, DateRangePicker },
cruds() { cruds() {
return CRUD({ title: '定时任务', url: 'api/jobs', crudMethod: { ...crudJob }}) return CRUD({ title: '定时任务', url: 'api/jobs', crudMethod: { ...crudJob }})
}, },
......
src/views/system/timing/log.vue
...@@ -3,17 +3,7 @@ ...@@ -3,17 +3,7 @@
<!-- 搜索 --> <!-- 搜索 -->
<div class="head-container"> <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-input v-model="query.jobName" clearable size="small" placeholder="输入任务名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
<el-date-picker <date-range-picker v-model="query.createTime" class="date-item" />
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-select v-model="query.isSuccess" placeholder="日志状态" clearable size="small" class="filter-item" style="width: 110px" @change="toQuery"> <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-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select> </el-select>
...@@ -72,7 +62,9 @@ ...@@ -72,7 +62,9 @@
<script> <script>
import crud from '@/mixins/crud' import crud from '@/mixins/crud'
import DateRangePicker from '@/components/DateRangePicker'
export default { export default {
components: { DateRangePicker },
mixins: [crud], mixins: [crud],
data() { data() {
return { return {
......
src/views/system/user/index.vue
...@@ -38,17 +38,7 @@ ...@@ -38,17 +38,7 @@
class="filter-item" class="filter-item"
@keyup.enter.native="crud.toQuery" @keyup.enter.native="crud.toQuery"
/> />
<el-date-picker <date-range-picker v-model="query.createTime" class="date-item" />
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-select <el-select
v-model="query.enabled" v-model="query.enabled"
clearable clearable
...@@ -212,6 +202,7 @@ import rrOperation from '@crud/RR.operation' ...@@ -212,6 +202,7 @@ import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation' import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination' import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'
import Treeselect from '@riophae/vue-treeselect' import Treeselect from '@riophae/vue-treeselect'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import '@riophae/vue-treeselect/dist/vue-treeselect.css' import '@riophae/vue-treeselect/dist/vue-treeselect.css'
...@@ -221,7 +212,7 @@ let userJobs = [] ...@@ -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 } const defaultForm = { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 'false', roles: [], jobs: [], dept: { id: null }, phone: null }
export default { export default {
name: 'User', name: 'User',
components: { Treeselect, crudOperation, rrOperation, udOperation, pagination }, components: { Treeselect, crudOperation, rrOperation, udOperation, pagination, DateRangePicker },
cruds() { cruds() {
return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }}) return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
}, },
......
src/views/tools/picture/index.vue
...@@ -5,17 +5,7 @@ ...@@ -5,17 +5,7 @@
<div v-if="crud.props.searchToggle"> <div v-if="crud.props.searchToggle">
<!--搜索--> <!--搜索-->
<el-input v-model="query.filename" clearable size="small" placeholder="输入文件名" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> <el-input v-model="query.filename" clearable size="small" placeholder="输入文件名" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-date-picker <date-range-picker v-model="query.createTime" class="date-item" />
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="结束日期"
/>
<rrOperation /> <rrOperation />
</div> </div>
<crudOperation :permission="permission"> <crudOperation :permission="permission">
...@@ -101,10 +91,11 @@ import { getToken } from '@/utils/auth' ...@@ -101,10 +91,11 @@ import { getToken } from '@/utils/auth'
import rrOperation from '@crud/RR.operation' import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination' import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'
export default { export default {
name: 'Pictures', name: 'Pictures',
components: { pagination, crudOperation, rrOperation }, components: { pagination, crudOperation, rrOperation, DateRangePicker },
cruds() { cruds() {
return CRUD({ title: '图片', url: 'api/pictures', crudMethod: { ...crudPic }}) return CRUD({ title: '图片', url: 'api/pictures', crudMethod: { ...crudPic }})
}, },
......
src/views/tools/storage/local/index.vue
...@@ -5,17 +5,7 @@ ...@@ -5,17 +5,7 @@
<div v-if="crud.props.searchToggle"> <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="crud.toQuery" /> <el-input v-model="query.blurry" clearable size="small" placeholder="输入内容模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-date-picker <date-range-picker v-model="query.createTime" class="date-item" />
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="结束日期"
/>
<rrOperation /> <rrOperation />
</div> </div>
<crudOperation :permission="permission"> <crudOperation :permission="permission">
...@@ -123,10 +113,11 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud' ...@@ -123,10 +113,11 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation' import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination' import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'
const defaultForm = { id: null, name: '' } const defaultForm = { id: null, name: '' }
export default { export default {
components: { pagination, crudOperation, rrOperation }, components: { pagination, crudOperation, rrOperation, DateRangePicker },
cruds() { cruds() {
return CRUD({ title: '文件', url: 'api/localStorage', crudMethod: { ...crudFile }}) return CRUD({ title: '文件', url: 'api/localStorage', crudMethod: { ...crudFile }})
}, },
......
src/views/tools/storage/qiniu/index.vue
...@@ -7,17 +7,7 @@ ...@@ -7,17 +7,7 @@
<div v-if="crud.props.searchToggle"> <div v-if="crud.props.searchToggle">
<!-- 搜索 --> <!-- 搜索 -->
<el-input v-model="query.key" clearable size="small" placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" /> <el-input v-model="query.key" clearable size="small" placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
<el-date-picker <date-range-picker v-model="query.c" class="date-item" />
v-model="query.c"
: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 /> <rrOperation />
</div> </div>
<crudOperation :permission="permission"> <crudOperation :permission="permission">
...@@ -88,9 +78,10 @@ import CRUD, { presenter, header, crud } from '@crud/crud' ...@@ -88,9 +78,10 @@ import CRUD, { presenter, header, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation' import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination' import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'
export default { export default {
components: { eForm, pagination, crudOperation, rrOperation }, components: { eForm, pagination, crudOperation, rrOperation, DateRangePicker },
cruds() { cruds() {
return CRUD({ title: '七牛云文件', url: 'api/qiNiuContent', crudMethod: { ...crudQiNiu }}) return CRUD({ title: '七牛云文件', url: 'api/qiNiuContent', crudMethod: { ...crudQiNiu }})
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment