paper-library-font/src/modules/base/views/SystemSetting.vue

<template>
  <div class="system-setting">
    <div class="part-box part-box-pad">
      <el-form
        ref="modalFormComp"
        :model="modalForm"
        :rules="rules"
        label-width="200px"
      >
        <div v-for="(group, gindex) in setList" :key="gindex" class="form-part">
          <h2 class="form-part-title">{{ group.name }}</h2>
          <div class="form-part-body">
            <template v-for="field in group.data">
              <el-form-item
                v-if="field.enable"
                :key="field.code"
                :prop="field.code"
                :label="`${field.name}：`"
              >
                <el-radio-group
                  v-if="field.options"
                  v-model="modalForm[field.code]"
                >
                  <el-radio
                    v-for="item in field.options"
                    :key="item.value"
                    :label="item.value"
                    >{{ item.name }}</el-radio
                  >
                </el-radio-group>
                <el-input
                  v-else
                  v-model="modalForm[field.code]"
                  placeholder="请输入"
                  clearable
                ></el-input>
                <div
                  v-if="field.remark"
                  class="tips-info"
                  v-html="getRemarkHtml(field.remark)"
                ></div>
              </el-form-item>
            </template>
          </div>
        </div>
        <el-form-item v-if="setList.length">
          <el-button type="primary" :disabled="isSubmit" @click="submit"
            >确认</el-button
          >
          <el-button type="primary" @click="freshCache">刷新缓存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { systemSettingQuery, updateSystemSetting, flushCache } from "../api";

export default {
  name: "system-setting",
  data() {
    return {
      modalForm: {},
      isSubmit: false,
      rules: {},
      setList: [],
    };
  },
  mounted() {
    this.getSysSet();
  },
  methods: {
    checkValueIsBoolean(val) {
      return ["true", "false"].includes(val);
    },
    getRemarkHtml(remark) {
      return remark
        .split("\n")
        .map((cont) => `<p>${cont}</p>`)
        .join("");
    },
    async getSysSet() {
      const data = await systemSettingQuery(this.$attrs.isSystem);
      this.setList = data;
      let modalForm = {},
        rules = {};
      data.forEach((item) => {
        item.data.forEach((field) => {
          modalForm[field.code] = field.value;
          // rules[field.code] = [
          //   {
          //     required: true,
          //     message: `请设置${field.name}`,
          //     trigger: "change",
          //   },
          // ];
        });
      });
      this.modalForm = modalForm;
      this.rules = rules;
    },
    async submit() {
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;

      if (this.isSubmit) return;
      this.isSubmit = true;
      this.setList.forEach((item) => {
        item.data.forEach((field) => {
          field.value = this.modalForm[field.code];
        });
      });

      const data = await updateSystemSetting(
        this.setList,
        this.$attrs.isSystem
      ).catch(() => {});
      this.isSubmit = false;

      if (!data) return;

      this.$message.success("设置成功！");
    },
    async freshCache() {
      const schoolId = this.$ls.get("schoolId");
      if (!schoolId) {
        await flushCache("SYS_SETTING_GLOBAL");
      } else {
        await flushCache("SYS_SETTING");
      }
    },
  },
};
</script>