train-center/src/views/setting/system-setting.vue

<template>
  <div id="system-setting">
    <detail-frame :title="pageTitle">
      <data-form :data="form" :fields="fields" :rules="rules" @save="handleSave" labelWidth="150px" :reset="false">
        <template #options="{item,form}">
          <el-option v-for="(i, index) in termList" :key="index" :label="`第${i.term}期`" :value="i._id"></el-option>
        </template>
      </data-form>
    </detail-frame>
  </div>
</template>

<script>
import detailFrame from '@frame/layout/admin/detail-frame';
import dataForm from '@frame/components/form';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: setting } = createNamespacedHelpers('setting');

export default {
  name: 'system-setting',
  props: {},
  components: { dataForm, detailFrame },
  data: function() {
    return {
      form: {},
      termList: [],
      fields: [
        { label: '服务器邮箱', required: true, model: 'user_email' },
        { label: '服务器邮箱授权码', required: true, model: 'auth_code' },
        { label: '上午考勤开始时间', required: true, model: 'am_start', type: 'time' },
        { label: '上午考勤结束时间', required: true, model: 'am_end', type: 'time' },
        { label: '下午开始时间', required: true, model: 'pm_start', type: 'time' },
        { label: '下午结束时间', required: true, model: 'pm_end', type: 'time' },
        { label: '寝室开始时间', required: true, model: 'bd_start', type: 'time' },
        { label: '寝室结束时间', required: true, model: 'bd_end', type: 'time' },
        { label: '班级模板设置', model: 'template_term', type: 'select' },
      ],
      rules: {
        email: [{ required: true, message: '请输入系统邮箱' }],
        emailpw: [{ required: true, message: '请输入系统邮箱密码' }],
        am_start: [{ required: true, message: '请选择上午考勤开始时间' }],
        am_end: [{ required: true, message: '请选择上午考勤结束时间' }],
        pm_start: [{ required: true, message: '请选择下午开始时间' }],
        pm_end: [{ required: true, message: '请选择下午结束时间' }],
        bd_start: [{ required: true, message: '请选择寝室开始时间' }],
        bd_end: [{ required: true, message: '请选择寝室结束时间' }],
      },
    };
  },
  created() {
    this.search();
    this.getOtherList();
  },
  methods: {
    ...setting({ fetch: 'fetch', update: 'update', getTermList: 'termList' }),
    async search() {
      let res = await this.fetch();
      if (this.$checkRes(res)) this.$set(this, `form`, res.data);
    },
    async handleSave({ data }) {
      let res = await this.update(data);
      this.$checkRes(res, `修改成功`, res.errmsg);
    },
    async getOtherList() {
      const res = await this.getTermList();
      if (this.$checkRes(res)) this.$set(this, `termList`, res.data);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>