|
|
@@ -0,0 +1,124 @@
|
|
|
+<template>
|
|
|
+ <div class='m-container'>
|
|
|
+ <!-- <h2>参数设置</h2> -->
|
|
|
+ <div class="m-core">
|
|
|
+ <!-- 列表 -->
|
|
|
+ <calendar class="calendarComponent" v-if="dataStatus" :first-day-of-week="1" multiple :select-date="dateList" width="800px"/>
|
|
|
+ <div v-if="dataStatus" style="width: 800px; margin: 10px auto; text-align: center;">
|
|
|
+ <el-button type="primary" @click="onSave" style="padding: 16px 33px; font-size: 18px;">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import pagination from '@/components/Pagination/index'
|
|
|
+import { sysConfigList, sysConfigUpdate } from '@/api/generalSettings'
|
|
|
+import Calendar from 'vue-lunar-calendar-pro'
|
|
|
+export default {
|
|
|
+ components: { pagination, Calendar },
|
|
|
+ name: 'holidaySetting',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ configList: [],
|
|
|
+ dateList: [],
|
|
|
+ dataStatus: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.__init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ __init () {
|
|
|
+ sysConfigList({ group: 'holiday' }).then(res => {
|
|
|
+ if (res.code == 200 && res.data.length > 0) {
|
|
|
+ let holiday = res.data[0]
|
|
|
+ this.configList = holiday
|
|
|
+ this.dateList = holiday.paranValue ? JSON.parse(holiday.paranValue) :[]
|
|
|
+ this.dataStatus = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onSave () {
|
|
|
+ let configList = this.configList
|
|
|
+ let params = {
|
|
|
+ id: configList.id,
|
|
|
+ paranValue: JSON.stringify(this.dateList),
|
|
|
+ paramName: configList.paramName
|
|
|
+ }
|
|
|
+ sysConfigUpdate(params).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message.success('保存成功')
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+/deep/.el-input-group__append {
|
|
|
+ background: #dcdfe6;
|
|
|
+ border-color: #dcdfe6;
|
|
|
+ &:hover,
|
|
|
+ &:active,
|
|
|
+ &:focus {
|
|
|
+ background: #dcdfe6;
|
|
|
+ border-color: #dcdfe6;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.calendarComponent {
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+/deep/.calendar-pro__body table td .day-box.select {
|
|
|
+ background-color: #2dd8cd;
|
|
|
+}
|
|
|
+/deep/.calendar-pro__body table td .day-box {
|
|
|
+ height: 80px;
|
|
|
+}
|
|
|
+/deep/.info-festival {
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+/deep/.calendar-pro__title {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+/deep/.calendar-pro__tool {
|
|
|
+ button {
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 1;
|
|
|
+ white-space: nowrap;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ color: #606266;
|
|
|
+ -webkit-appearance: none;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ outline: none;
|
|
|
+ margin: 0;
|
|
|
+ transition: .1s;
|
|
|
+ font-weight: 500;
|
|
|
+ -moz-user-select: none;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -ms-user-select: none;
|
|
|
+ padding: 12px 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.el-button--primary {
|
|
|
+ background: #14928a;
|
|
|
+ border-color: #14928a;
|
|
|
+ color: #fff;
|
|
|
+ &:hover,
|
|
|
+ &:active,
|
|
|
+ &:focus {
|
|
|
+ background: #14928a;
|
|
|
+ border-color: #14928a;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
