HM21St_Page_Manager/src/views/system_config/QxSetting.vue

<template>
  <div class="manage-root personnel-create">
    <Header />
    <div class="manage-root-contain">
      <nav-menu
        class="manage-root-contain-left"
        :activeMenuIndex="activeMenuIndex"
      ></nav-menu>
      <div class="manage-root-contain-right">
        <breadcrumb
          :breadcrumbList="breadcrumbList"
          class="breadcrumb-box"
        ></breadcrumb>
        <div class="create-bottom">
          <h3>企信对接配置</h3>
          <el-form
            :model="registerForm"
            ref="registerForm"
            label-width="100px"
            class="registerForm"
            label-position="top"
          >
            <el-form-item label="应用键值" prop="app_key">
              <el-input
                v-model="registerForm.app_key"
                autocomplete="off"
                placeholder="请输入应用键值"
                @blur="handleTrim('registerForm', 'app_key')"
                maxlength="100"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="应用密钥" prop="app_secret">
              <el-input
                v-model="registerForm.app_secret"
                autocomplete="off"
                placeholder="请输入应用密钥"
                @blur="handleTrim('registerForm', 'app_secret')"
                maxlength="200"
              >
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                @click="onSubmit('registerForm')"
                size="small"
                :loading="loading"
                >保存</el-button
              >
              <el-button @click="onCancel('registerForm')" size="small"
                >取消</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import NavMenu from "../../components/NavMenu.vue";
import Breadcrumb from "../../components/Breadcrumb.vue";
import { getLogin } from "@/api/ajax";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, NavMenu, Breadcrumb },
  props: {},
  data() {
    //这里存放数据
    return {
      activeMenuIndex: "qx_setting",
      breadcrumbList: [
        {
          icon: "setting",
          url: "",
          text: "",
        },
        {
          icon: "",
          url: "",
          notLink: true,
          text: "系统配置",
        },
        {
          icon: "",
          url: "",
          text: "企信对接配置",
        },
      ],
      registerForm: {
        app_key: "",
        app_secret: "",
      },

      loading: false,
      orgList: [],
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 去掉前后空格
    handleTrim(form, fild) {
      this[form][fild] = this[form][fild].trim();
    },
    // 提交表单
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          let MethodName =
            "/OrgServer/Manager/SysConfigManager/SetSysConfig_QiXin";
          getLogin(MethodName, this.registerForm)
            .then((res) => {
              this.loading = false;
              if (res.status === 1) {
                this.$message.success("保存成功");
              }
            })
            .catch((res) => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    // 取消 恢复到修改前状态
    onCancel(formName) {
      this.$refs[formName].resetFields();
    },
    // 得到配置信息
    getInfo() {
      let MethodName = "/OrgServer/Manager/SysConfigManager/GetSysConfig_QiXin";
      getLogin(MethodName, {})
        .then((res) => {
          if (res.status === 1) {
            this.registerForm = {
              app_key: res.app_key,
              app_secret: res.app_secret,
            };
          }
        })
        .catch((res) => {});
    },
    // 查询列表
    getOrgList() {
      let MethodName = "/OrgServer/Manager/PageQuery/PageQueryOrgList";

      let data = {
        name: "",
        type: -1,
        status: 1,
        creator_id: "",
        page_capacity: 100,
        cur_page: 1,
        order_column_list: ["create_time:desc"],
      };
      getLogin(MethodName, data)
        .then((res) => {
          this.tableLoading = false;
          if (res.status === 1) {
            this.orgList = res.org_list;
          }
        })
        .catch(() => {});
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getOrgList();
    this.getInfo();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.create-bottom {
  padding: 40px 40px;
  background: #ffffff;
  border-radius: 4px;
  height: calc(100vh - 140px);
  overflow: auto;
  h3 {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    margin: 0 0 28px 0;
    color: #1d2129;
  }
}
</style>

<style lang="scss"></style>