union-question-web/src/modules/questions/views/ClientConfig.vue

<template>
  <div>
    <section class="content">
      <div class="box box-info">
        <!-- 正文信息 -->
        <div class="box-body">
          <el-form
            ref="viewForm"
            :inline="true"
            :model="viewForm"
            inline-message
            class="el-form-linemess"
            label-position="right"
          >
            <el-row>
              <el-col :span="20"><span>客户端使用权限配置</span></el-col>
              <el-col :span="4"
                ><div>
                  <el-button type="primary" size="small" @click="save"
                    >保存</el-button
                  >
                  <el-button type="primary" size="small" @click="downFile"
                    >下载控制文件</el-button
                  >
                </div></el-col
              ></el-row
            >
            <div class="block-seperator"></div>
            <el-row>
              <el-form-item
                label="时间控制"
                prop="properties.CLIENT_TIME_RANGE"
                label-width="100px"
              >
                <el-date-picker
                  v-model="viewForm.properties.CLIENT_TIME_RANGE"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :clearable="false"
                ></el-date-picker>
              </el-form-item>
              <span class="text-span"
                >在系统使用时间范围内进行配置，未设置客户端默认与系统使用权限时间一致</span
              >
            </el-row>
            <el-row>
              <el-form-item
                label="IP控制"
                prop="properties.CLIENT_IP_RANGE"
                label-width="100px"
                class="btn-item"
              >
                <el-button type="primary" size="mini" plain @click="clearIp()"
                  >清除</el-button
                >
                <el-button type="primary" size="mini" plain @click="addIp(0)"
                  >新增</el-button
                >
              </el-form-item>
              <span class="text-span"
                >*设置允许使用的IP地址,，用“ * ”表示不固定值</span
              >
            </el-row>
            <el-row>
              <div
                v-if="viewForm.properties.CLIENT_IP_RANGE.length > 0"
                style="padding-left: 100px"
              >
                <div
                  v-for="(item, index) in viewForm.properties.CLIENT_IP_RANGE"
                  :key="index"
                >
                  <el-input
                    v-model="viewForm.properties.CLIENT_IP_RANGE[index]"
                    class="input-div"
                  ></el-input>
                  <el-button
                    style="margin: 0 0 0 30px"
                    type="danger"
                    circle
                    size="mini"
                    icon="el-icon-minus"
                    @click="delIp(index)"
                  ></el-button>
                  <el-button
                    circle
                    size="mini"
                    icon="el-icon-plus"
                    @click="addIp(index + 1)"
                  ></el-button>
                </div>
              </div>
            </el-row>
            <el-row>
              <el-form-item
                label="电脑控制"
                prop="properties.CLIENT_MAC_RANGE"
                label-width="100px"
                class="btn-item"
              >
                <el-button type="primary" size="mini" plain @click="clearMac()"
                  >清除</el-button
                >
                <el-button type="primary" size="mini" plain @click="addMac(0)"
                  >新增</el-button
                >
              </el-form-item>
              <span class="text-span">*设置允许使用的电脑mac地址</span>
            </el-row>
            <el-row>
              <div
                v-if="viewForm.properties.CLIENT_MAC_RANGE.length > 0"
                style="padding-left: 100px"
              >
                <div
                  v-for="(item, index) in viewForm.properties.CLIENT_MAC_RANGE"
                  :key="index"
                >
                  <el-input
                    v-model="viewForm.properties.CLIENT_MAC_RANGE[index]"
                    class="input-div"
                  ></el-input>
                  <el-button
                    style="margin: 0 0 0 30px"
                    type="danger"
                    circle
                    size="mini"
                    icon="el-icon-minus"
                    @click="delMac(index)"
                  ></el-button>
                  <el-button
                    circle
                    size="mini"
                    icon="el-icon-plus"
                    @click="addMac(index + 1)"
                  ></el-button>
                </div>
              </div>
            </el-row>
          </el-form>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { QUESTION_API } from "@/constants/constants.js";

export default {
  components: {},
  data() {
    return {
      viewForm: {
        properties: {
          CLIENT_TIME_RANGE: [],
          CLIENT_IP_RANGE: [],
          CLIENT_MAC_RANGE: [],
        },
      },
      form: {
        orgId: null,
        properties: {
          CLIENT_TIME_RANGE: "",
          CLIENT_IP_RANGE: "",
          CLIENT_MAC_RANGE: "",
        },
      },
    };
  },
  computed: {
    ...mapState({ user: (state) => state.user }),
  },
  created() {
    this.form.orgId = this.user.rootOrgId;
    this.init();
  },
  methods: {
    downFile() {},
    clearMac() {
      this.viewForm.properties.CLIENT_MAC_RANGE = [];
    },
    delMac(index) {
      this.viewForm.properties.CLIENT_MAC_RANGE.splice(index, 1);
    },
    addMac(index) {
      this.viewForm.properties.CLIENT_MAC_RANGE.splice(index, 0, "");
    },
    clearIp() {
      this.viewForm.properties.CLIENT_IP_RANGE = [];
    },
    delIp(index) {
      this.viewForm.properties.CLIENT_IP_RANGE.splice(index, 1);
    },
    addIp(index) {
      this.viewForm.properties.CLIENT_IP_RANGE.splice(index, 0, "");
    },
    init() {
      var url = QUESTION_API + "/org/allProperties/" + this.form.orgId;
      this.$httpWithMsg.get(url).then((response) => {
        if (response.data) {
          if (response.data.CLIENT_TIME_RANGE) {
            this.viewForm.properties.CLIENT_TIME_RANGE = JSON.parse(
              response.data.CLIENT_TIME_RANGE
            );
          }
          if (response.data.CLIENT_IP_RANGE) {
            this.viewForm.properties.CLIENT_IP_RANGE = JSON.parse(
              response.data.CLIENT_IP_RANGE
            );
          }
          if (response.data.CLIENT_MAC_RANGE) {
            this.viewForm.properties.CLIENT_MAC_RANGE = JSON.parse(
              response.data.CLIENT_MAC_RANGE
            );
          }
        }
      });
    },
    setParams() {
      this.form.properties.CLIENT_TIME_RANGE = JSON.stringify(
        this.viewForm.properties.CLIENT_TIME_RANGE
      );
      this.form.properties.CLIENT_IP_RANGE = JSON.stringify(
        this.viewForm.properties.CLIENT_IP_RANGE
      );
      this.form.properties.CLIENT_MAC_RANGE = JSON.stringify(
        this.viewForm.properties.CLIENT_MAC_RANGE
      );
    },
    save() {
      this.setParams();
      let url = QUESTION_API + "/org/saveOrgProperties";
      this.$httpWithMsg.put(url, this.form).then(() => {
        this.$notify({
          type: "success",
          message: "保存成功",
        });
      });
    },
  },
};
</script>
<style scoped>
.input >>> .el-input__inner {
  -webkit-appearance: button;
}
.text-span {
  line-height: 40px;
  margin-left: 80px;
  font-size: 14px;
  color: #949494;
}
.input-div {
  width: 400px;
}
.btn-item {
  width: 500px;
}
</style>