app-cfg.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  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="../../static/kj/element-ui/theme-chalk/index.css">
  8. <link rel="stylesheet" href="../../static/sa.css">
  9. <script src="../../static/kj/vue.min.js"></script>
  10. <script src="../../static/kj/element-ui/index.js"></script>
  11. <script src="../../static/kj/jquery.min.js"></script>
  12. <script src="../../static/kj/layer/layer.js"></script>
  13. <script src="../../static/sa.js"></script>
  14. <script src="../../static/kj/upload-util.js"></script>
  15. <style type="text/css">
  16. html,body,.vue-box{height: 100%; overflow: hidden;}
  17. /* .vue-box{padding: 0px;} */
  18. .c-panel{height: calc(100% - 4em); position: relative;}
  19. .c-panel .c-label{width: 10em;}
  20. .c-panel .el-input{width: 500px;}
  21. .c-panel .el-textarea{width: 500px;}
  22. .logo-img{
  23. width: 35px;
  24. height: 35px;
  25. border-radius: 2px;
  26. vertical-align: middle;
  27. margin-right: 0.5em;
  28. cursor: pointer;
  29. }
  30. .s-tab{height: 100%; }
  31. .el-tabs__content{height: calc(100% - 130px); overflow: auto;}
  32. </style>
  33. </head>
  34. <body>
  35. <div class="vue-box" style="display: none;" :style="'display: block;'">
  36. <div class="c-panel" v-if="m != null">
  37. <!-- 提示 -->
  38. <el-alert style="margin: 10px 0;"
  39. type="blue" show-icon
  40. title="App-Config 对外开放,用来配置一些非敏感信息。"
  41. >
  42. </el-alert>
  43. <!-- tab卡片 -->
  44. <el-tabs class="s-tab" v-model="activeTab">
  45. <!-- ---------------------------------- 系统参数 ---------------------------------- -->
  46. <el-tab-pane label="系统参数" name="tab1">
  47. <div class="c-item br">
  48. <label class="c-label">系统logo:</label>
  49. <img :src="m.logoUrl" class="logo-img" v-if="sa.isNull(m.logoUrl) == false" @click="sa.showImage(m.logoUrl, '400px', '400px')">
  50. <el-link type="primary" @click="sa.uploadImage(src => {m.logoUrl = src; sa.ok2('上传成功');})">选择上传</el-link>
  51. </div>
  52. <div class="c-item br">
  53. <label class="c-label">系统名称:</label>
  54. <el-input v-model="m.appName"></el-input>
  55. </div>
  56. <div class="c-item br">
  57. <label class="c-label">版本编号:</label>
  58. <el-input v-model="m.appVersionNo"></el-input>
  59. </div>
  60. <div class="c-item br">
  61. <label class="c-label">更新描述:</label>
  62. <el-input v-model="m.appVersionLog"></el-input>
  63. </div>
  64. </el-tab-pane>
  65. <!-- ---------------------------------- 其它配置 ---------------------------------- -->
  66. <el-tab-pane label="其它配置" name="tab2">
  67. <br>
  68. <span>其它配置</span>
  69. </el-tab-pane>
  70. </el-tabs>
  71. <!-- 确定按钮 -->
  72. <div style="position: absolute; bottom: 0px; width: calc(100% - 3em); line-height: 80px; background-color: #FFF;">
  73. <hr style="height: 2px;">
  74. <div class="c-item">
  75. <label class="c-label"></label>
  76. <el-button type="primary" icon="el-icon-check" @click="ok">保存修改</el-button>
  77. <el-button type="primary" icon="el-icon-refresh-right" @click="f5">重置</el-button>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. <script type="text/javascript">
  83. // 创建一个默认的配置对象
  84. function create_m() {
  85. return {
  86. logoUrl: '', // 系统logo地址
  87. appName: 'sa-plus快速开发框架' ,// 系统名称
  88. appVersionNo: 'v1.0.0', // 系统版本
  89. appVersionLog: '更新于2099-10-1', // 更新日志
  90. }
  91. }
  92. </script>
  93. <script>
  94. var app = new Vue({
  95. el: '.vue-box',
  96. data: {
  97. sa: sa, // 超级对象
  98. m: null, //
  99. activeTab: 'tab1', // 当前显示的tab
  100. textareaCfg: { minRows: 3, maxRows: 14} // 文本域的默认配置
  101. },
  102. methods: {
  103. // 初始化配置
  104. init: function(str) {
  105. // 获取
  106. var cfg = sa.JSONParse(str, {}); // 用户配置
  107. var default_cfg = create_m(); // 默认配置
  108. // 遍历
  109. for(var key in default_cfg) {
  110. if(cfg[key] !== undefined && cfg[key] !== null) {
  111. default_cfg[key] = cfg[key];
  112. }
  113. }
  114. // 赋值
  115. this.m = default_cfg;
  116. },
  117. // 刷新
  118. f5: function(){
  119. sa.ajax('/SpCfg/getCfg', {cfgName: 'app_cfg'}, function(res){
  120. this.init(res.data);
  121. }.bind(this));
  122. },
  123. // 提交
  124. ok: function(){
  125. sa.ajax('/SpCfg/updateCfg', {cfgName: 'app_cfg', cfgValue: JSON.stringify(this.m)}, function(res){
  126. sa.ok2('保存成功');
  127. }.bind(this));
  128. },
  129. },
  130. created: function(){
  131. this.f5();
  132. }
  133. })
  134. </script>
  135. </body>
  136. </html>