duty-management-web/src/views/system/public-configuration/index.vue

<template>
  <div class="__normal-page">
    <div class="__normal-content">
      <div class="block">
        <div class="block-title">
          <span>01 签卡设置</span>
          <img class="icon" src="./icon.png"/>
        </div>
        <div class="block-content">
          <div class="item">
            <div class="item-label">签到时间:</div>
            <div class="item-form" v-loading="loading['sign.begin.time']">
              <CusFormColumn
                  :span="24"
                  link="time"
                  v-model:param="form['sign.begin.time']"
                  :clearable="false"
                  @change="editKey('sign.begin.time')"/>
            </div>
          </div>
          <div class="item">
            <div class="item-label">签到提醒时间:</div>
            <div class="item-form" v-loading="loading['sign.remind.time']">
              <CusFormColumn
                  :span="24"
                  link="select"
                  v-model:param="form['sign.remind.time']"
                  :options="$store.state.dictionary.configSignRemindTimeList"
                  :clearable="false"
                  @change="editKey('sign.remind.time')"/>
            </div>
          </div>
          <div class="item">
            <div class="item-label">签退时间:</div>
            <div class="item-form" v-loading="loading['sign.end.time']">
              <CusFormColumn
                  :span="24"
                  link="time"
                  v-model:param="form['sign.end.time']"
                  :clearable="false"
                  @change="editKey('sign.end.time')"/>
            </div>
          </div>
        </div>
      </div>
      <div class="block">
        <div class="block-title">
          <span>02 日志设置</span>
          <img class="icon" src="./icon.png"/>
        </div>
        <div class="block-content">
          <div class="item">
            <div class="item-label">截止提交时间:</div>
            <div class="item-form" v-loading="loading['log.submit.time']">
              <CusFormColumn
                  :span="24"
                  link="time"
                  v-model:param="form['log.submit.time']"
                  :clearable="false"
                  @change="editKey('log.submit.time')"/>
            </div>
          </div>
          <div class="item">
            <div class="item-label">日志提交提醒时间:</div>
            <div class="item-form" v-loading="loading['log.remind.time']">
              <CusFormColumn
                  :span="24"
                  link="select"
                  v-model:param="form['log.remind.time']"
                  :options="$store.state.dictionary.configLogRemindTimeList"
                  :clearable="false"
                  @change="editKey('log.remind.time')"/>
            </div>
          </div>
        </div>
      </div>
      <div class="block">
        <div class="block-title">
          <span>03 周报设置</span>
          <img class="icon" src="./icon.png"/>
        </div>
        <div class="block-content">
          <div class="item">
            <div class="item-label">截止提交时间:</div>
            <div class="item-form week">
              <div class="col" v-loading="loading['week.submit.date']">
                {{$store.state.dictionary.configWeekSubmitDateMap.get(form['week.submit.date'])}}
<!--                <CusFormColumn-->
<!--                    :span="24"-->
<!--                    link="select"-->
<!--                    v-model:param="form['week.submit.date']"-->
<!--                    :options="$store.state.dictionary.configWeekSubmitDateList"-->
<!--                    :clearable="false"-->
<!--                    @change="editKey('week.submit.date')"/>-->
              </div>
             <div class="col" v-loading="loading['week.submit.time']">
               <CusFormColumn
                   :span="24"
                   link="time"
                   v-model:param="form['week.submit.time']"
                   :clearable="false"
                   @change="editKey('week.submit.time')"/>
             </div>
            </div>
          </div>
          <div class="item">
            <div class="item-label">周报提交提醒时间:</div>
            <div class="item-form" v-loading="loading['week.remind.time']">
              <CusFormColumn
                  :span="24"
                  link="select"
                  v-model:param="form['week.remind.time']"
                  :options="$store.state.dictionary.configWeekRemindTimeList"
                  :clearable="false"
                  @change="editKey('week.remind.time')"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import { ElMessage } from 'element-plus';

export default defineComponent({
  name: '',
  components: {},
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      form: {
        'sign.begin.time': '',
        'sign.remind.time': '',
        'sign.end.time': '',
        'log.submit.time': '',
        'log.remind.time': '',
        'week.submit.date': '',
        'week.submit.time': '',
        'week.remind.time': '',
      },
      loading: {
        'sign.begin.time': false,
        'sign.remind.time': false,
        'sign.end.time': false,
        'log.submit.time': false,
        'log.remind.time': false,
        'week.submit.date': false,
        'week.submit.time': false,
        'week.remind.time': false,
      }
    })
    const initDictionary = () => {
      store.dispatch('dictionary/LOAD_DICT_LIST', 'config_sign_remind_time')
      store.dispatch('dictionary/LOAD_DICT_LIST', 'config_log_remind_time')
      store.dispatch('dictionary/LOAD_DICT_LIST', 'config_week_remind_time')
      store.dispatch('dictionary/LOAD_DICT_LIST', 'config_week_submit_date')
    }
    const initKey = (key) => {
      state.loading[key] = true
      store.dispatch('app/LOAD_PUBLIC_CONFIG', key).then(res => {
        state.loading[key] = false
      })
    }
    const editKey = (key) => {
      //  select onChange方法有延迟，为了兼容time和select，加个延时
      setTimeout(() => {
        state.loading[key] = true
        store.dispatch('app/LOAD_PUBLIC_CONFIG', {
          key: key,
          value: state.form[key]
        }).then(res => {
          state.form[key] = JSON.parse(JSON.stringify(store.state.app.publicConfig[key]))
          state.loading[key] = false
        })
      }, 100)
    }
    onMounted(() => {
      initDictionary()
      state.form = JSON.parse(JSON.stringify(store.state.app.publicConfig))
    })
    return {
      ...toRefs(state),
      editKey
    }
  },
})
</script>

<style scoped lang="scss">
.__normal-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  padding-top: 40px;
  padding-right: 30px;
  .block {
    display: flex;
    flex-direction: column;
    .block-title {
      width: 100%;
      height: 45px;
      background-image: url("./title-bg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      padding-left: 20px;
      font-size: 17px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #FFFAF9;
      box-sizing: border-box;
      >span {
        margin-right: 8px;
      }
    }
    .block-content {
      flex: 1;
      margin-top: 24px;
      background-color: rgba(0,108,255,0.1);
      border-radius: 8px;
      border: 1px solid rgba(54,155,255,0.2);
      padding: 24px;
      .item {
        .item-label {
          font-size: 16px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255,255,255,0.6);
          margin-bottom: 10px;
        }
        .item-form {
          display: flex;
          align-items: center;
          justify-content: space-between;
          &.week {
            .col:first-child {
              width: 80px;
              line-height: 34px;
              align-self: flex-start;
            }
            .col:last-child {
              width: calc(100% - 80px);
            }
          }
        }
      }
    }
  }
}
</style>