server-cfg.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>服务器私有配置</title>
  6. <!-- 所有的 css js 资源 -->
  7. <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
  8. <link rel="stylesheet" href="../../static/sa.css">
  9. <script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
  10. <script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
  11. <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
  12. <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
  13. <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
  14. <script src="../../static/sa.js"></script>
  15. <script src="../../static/kj/upload-util.js"></script>
  16. <style type="text/css">
  17. html,body,.vue-box{height: 100%; overflow: hidden;}
  18. /* .vue-box{padding: 0px;} */
  19. .c-panel{height: calc(100% - 4em); position: relative;}
  20. .c-panel .c-label{width: 10em;}
  21. .c-panel .el-input{width: 500px;}
  22. .c-panel .el-textarea{width: 500px;}
  23. .logo-img{
  24. width: 35px;
  25. height: 35px;
  26. border-radius: 2px;
  27. vertical-align: middle;
  28. margin-right: 0.5em;
  29. cursor: pointer;
  30. }
  31. .s-tab{height: 100%; }
  32. .el-tabs__content{height: calc(100% - 130px); overflow: auto;}
  33. /* 让头像样式小一点 */
  34. .c-item-mline{width: 600px;}
  35. .c-item-mline .image-box-2{width: 60px; height: 100px;}
  36. .c-item-mline .image-box-2 img{width: 60px; height: 60px;}
  37. .c-item-mline .image-box-2.up_img{height: 60px;}
  38. .c-item-mline .image-box-2.up_img img{margin: 15px; width: 30px; height: 30px;}
  39. </style>
  40. </head>
  41. <body>
  42. <div class="vue-box" style="display: none;" :style="'display: block;'">
  43. <div class="c-panel" v-if="m != null">
  44. <!-- 提示 -->
  45. <el-alert style="margin: 10px 0;"
  46. type="blue" show-icon
  47. title="Server-Config 非对外开放,用来配置一些敏感信息。"
  48. >
  49. </el-alert>
  50. <!-- tab卡片 -->
  51. <el-tabs class="s-tab" v-model="activeTab">
  52. <!-- ---------------------------------- 系统参数 ---------------------------------- -->
  53. <el-tab-pane label="系统参数" name="tab1">
  54. <div class="c-item br">
  55. <label class="c-label">预留信息:</label>
  56. <el-input v-model="m.reserveInfo"></el-input>
  57. </div>
  58. <div style="height: 1px;"></div>
  59. <sa-item type="img-list" name="新用户默认头像" v-model="m.userDefaultAvatar" br></sa-item>
  60. <sa-item name="" style="margin-top: -20px;" br>
  61. <span style="color: #999;">系统将从以上图片中随机选择一张作为新用户头像</span>
  62. </sa-item>
  63. </el-tab-pane>
  64. </el-tabs>
  65. <!-- ---------------------------------- 其它配置 ---------------------------------- -->
  66. <el-tab-pane label="其它配置" name="tab2">
  67. <br>
  68. <span>其它配置</span>
  69. </el-tab-pane>
  70. <!-- 确定按钮 -->
  71. <div style="position: absolute; bottom: 0px; width: calc(100% - 3em); line-height: 80px; background-color: #FFF;">
  72. <hr style="height: 2px;">
  73. <div class="c-item">
  74. <label class="c-label"></label>
  75. <el-button type="primary" icon="el-icon-check" @click="ok">保存修改</el-button>
  76. <el-button type="primary" icon="el-icon-refresh-right" @click="f5">重置</el-button>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. <script type="text/javascript">
  82. // 创建一个默认的配置对象
  83. function create_m() {
  84. return {
  85. reserveInfo: '预留信息', // 预留信息
  86. userDefaultAvatar: '', // 新用户默认头像
  87. }
  88. }
  89. </script>
  90. <script>
  91. var app = new Vue({
  92. components: {
  93. "sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
  94. },
  95. el: '.vue-box',
  96. data: {
  97. sa: sa, // 超级对象
  98. m: null, //
  99. activeTab: 'tab1'
  100. },
  101. methods: {
  102. // 初始化配置
  103. init: function(str) {
  104. // 获取
  105. var cfg = sa.JSONParse(str, {}); // 用户配置
  106. var default_cfg = create_m(); // 默认配置
  107. // 遍历
  108. for (var key in default_cfg) {
  109. if (cfg[key] !== undefined && cfg[key] !== null) {
  110. default_cfg[key] = cfg[key];
  111. }
  112. }
  113. // 赋值
  114. this.m = default_cfg;
  115. },
  116. // 刷新
  117. f5: function() {
  118. sa.ajax('/SpCfg/getCfg', {
  119. cfgName: 'server_cfg'
  120. }, function(res) {
  121. this.init(res.data);
  122. }.bind(this));
  123. },
  124. // 提交
  125. ok: function() {
  126. sa.ajax('/SpCfg/updateCfg', {
  127. cfgName: 'server_cfg',
  128. cfgValue: JSON.stringify(this.m)
  129. }, function(res) {
  130. sa.ok2('保存成功');
  131. }.bind(this));
  132. }
  133. },
  134. created: function() {
  135. this.f5();
  136. }
  137. })
  138. </script>
  139. </body>
  140. </html>