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="checkValueIsBoolean(field.value)"
                  v-model="modalForm[field.code]"
                >
                  <el-radio
                    v-for="item in BOOLEAN_STATUS"
                    :key="item.value"
                    :label="item.value"
                    >{{ item.label }}</el-radio
                  >
                </el-radio-group>
                <el-input
                  v-else
                  v-model="modalForm[field.code]"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </template>
          </div>
        </div>
        <el-form-item v-if="setList.length">
          <el-button type="primary" :disabled="isSubmit" @click="submit"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

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

export default {
  name: "system-setting",
  data() {
    return {
      modalForm: {},
      isSubmit: false,
      BOOLEAN_STATUS: [
        {
          label: "开启",
          value: "true"
        },
        {
          label: "关闭",
          value: "false"
        }
      ],
      rules: {},
      setList: []
    };
  },
  mounted() {
    this.getSysSet();
  },
  methods: {
    checkValueIsBoolean(val) {
      return ["true", "false"].includes(val);
    },
    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("设置成功！");
    }
  }
};
</script>