elink-star
/
epmet-oper-pc
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

系统设置，新增日历维护功能

dev
yinzuomei 5 years ago
parent
f0022fd809
commit
ab8c08e808
2 changed files with 251 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 178
      epmet-oper-web/src/views/modules/sys/calender-add-or-update.vue
  2. 73
      epmet-oper-web/src/views/modules/sys/calender.vue

178
epmet-oper-web/src/views/modules/sys/calender-add-or-update.vue
View File

@ -0,0 +1,178 @@
<template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
<el-form-item label="日期:" prop="queryDate">
<!-- <el-input v-model="dataForm.queryDate" placeholder="选择日期"></el-input> -->
<el-date-picker
v-model="dataForm.queryDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="星期:" prop="weekday">
<!-- <el-input v-model="dataForm.weekday" placeholder="选择星期"></el-input> -->
<el-select v-model="dataForm.weekday" placeholder="请选择">
<el-option
v-for="item in weekDayOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="工作" prop="type">
<!-- <el-input v-model="dataForm.type" placeholder="1为工作日，2为周末，3为节假日"></el-input> -->
<el-select v-model="dataForm.type" placeholder="请选择">
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="节日名称" prop="holiday">
<el-input v-model="dataForm.holiday" placeholder="节日名称，工作日时显示“无”，周末时显示“周末”，节日时显示节日名称"></el-input>
</el-form-item>
<el-form-item label="节日备注" prop="holidayRemark">
<el-input v-model="dataForm.holidayRemark" placeholder="节日备注"></el-input>
</el-form-item>
<el-form-item label="假期开始" prop="begin">
<el-input v-model="dataForm.begin" placeholder="节日或周末开始时间，如果是工作日，此字段为空串yyyyMMdd"></el-input>
</el-form-item>
<el-form-item label="假期结束" prop="end">
<el-input v-model="dataForm.end" placeholder="节日或周末结束时间，如果是工作日，此字段为空串yyyyMMdd"></el-input>
</el-form-item>
</el-form>
<template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
</template>
</el-dialog>
</template>
<script>
import debounce from 'lodash/debounce'
export default {
data () {
return {
visible: false,
dataForm: {
id: '',
queryDate: '',
weekday: '',
begin: '',
end: '',
holidayRemark: '',
type: '',
holiday: ''
},
typeOptions: [{
value: '1',
label: '工作'
}, {
value: '2',
label: '周末'
}, {
value: '3',
label: '节假日'
}],
weekDayOptions: [{
value: 1,
label: '周一'
}, {
value: 2,
label: '周二'
}, {
value: 3,
label: '周三'
}, {
value: 4,
label: '周四'
}, {
value: 5,
label: '周五'
}, {
value: 6,
label: '周六'
}, {
value: 7,
label: '周日'
}]
}
},
computed: {
dataRule () {
return {
queryDate: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
weekday: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
begin: [
{ required: false, message: this.$t('validate.required'), trigger: 'blur' }
],
end: [
{ required: false, message: this.$t('validate.required'), trigger: 'blur' }
],
holidayRemark: [
{ required: false, message: this.$t('validate.required'), trigger: 'blur' }
],
type: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
holiday: [
{ required: false, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
methods: {
init () {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.getInfo()
}
})
},
// 获取信息
getInfo () {
this.$http.get(`/commonservice/calender/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
}).catch(() => {})
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/commonservice/calender/', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
}).catch(() => {})
})
}, 1000, { 'leading': true, 'trailing': false })
}
}
</script>

73
epmet-oper-web/src/views/modules/sys/calender.vue
View File

@ -0,0 +1,73 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-__calender}">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item label="日期">
<el-input v-model="dataForm.day" placeholder="yyyyMMdd可模糊查询" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
<el-form-item>
<el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="id" label="主键" header-align="center" align="center" v-if="false"></el-table-column>
<el-table-column prop="queryDate" label="日期" header-align="center" align="center"></el-table-column>
<el-table-column prop="cn" label="星期" header-align="center" align="center"></el-table-column>
<el-table-column prop="typeName" label="工作日，周末，节假日" header-align="center" align="center"></el-table-column>
<el-table-column prop="begin" label="假期开始" header-align="center" align="center"></el-table-column>
<el-table-column prop="end" label="假期结束" header-align="center" align="center"></el-table-column>
<el-table-column prop="holiday" label="节日名称" header-align="center" align="center"></el-table-column>
<el-table-column prop="holidayRemark" label="节日备注" header-align="center" align="center"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150" v-if="true">
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './calender-add-or-update'
export default {
mixins: [mixinViewModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: 'commonservice/calender/page',
getDataListIsPage: true,
deleteURL: '/commonservice/calender',
deleteIsBatch: true
},
dataForm: {
day: ''
}
}
},
components: {
AddOrUpdate
}
}
</script>
Write Preview
Loading…
Cancel
Save