programConfig.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. <!--一体机配置-->
  2. <template>
  3. <div class="public-config-page">
  4. <el-form class="public-form-box scrollbar-box" :model="form" ref="form" :inline="true" :rules="rules" label-width="160px">
  5. <div class="form-max-box">
  6. <el-form-item label="登录页banner:" prop="loginBanner">
  7. <el-upload
  8. class="certificate-avatar-uploader"
  9. :action="uploadImgUrl"
  10. :show-file-list="false"
  11. accept="image/jpeg,image/gif,image/png"
  12. :on-success="(res)=>handleAvatarSuccess(res,'loginBanner')"
  13. :headers="headers"
  14. :before-upload="beforeAvatarUpload">
  15. <img v-if="form.loginBanner" :src="form.loginBanner" class="avatar" >
  16. <i v-if="!form.loginBanner" class="el-icon-plus avatar-uploader-icon">上传</i>
  17. </el-upload>
  18. <i v-if="form.loginBanner" class="el-icon-view" @click="lookImg(form.loginBanner)"
  19. style="position: absolute;top:0;right:0;z-index:999;border-radius:3px;cursor:pointer;width:20px;
  20. height:20px;line-height:20px;text-align: center;background: rgba(0,0,0,0.2);color:#fff;"></i>
  21. </el-form-item>
  22. </div>
  23. <div class="form-max-box">
  24. <el-form-item label="首页banner:" prop="homepageBanner">
  25. <el-upload
  26. class="certificate-avatar-uploader"
  27. :action="uploadImgUrl"
  28. :show-file-list="false"
  29. accept="image/jpeg,image/gif,image/png"
  30. :on-success="(res)=>handleAvatarSuccess(res,'homepageBanner')"
  31. :headers="headers"
  32. :before-upload="beforeAvatarUpload">
  33. <img v-if="form.homepageBanner" :src="form.homepageBanner" class="avatar" >
  34. <i v-if="!form.homepageBanner" class="el-icon-plus avatar-uploader-icon">上传</i>
  35. </el-upload>
  36. <i v-if="form.homepageBanner" class="el-icon-view" @click="lookImg(form.homepageBanner)"
  37. style="position: absolute;top:0;right:0;z-index:999;border-radius:3px;cursor:pointer;width:20px;
  38. height:20px;line-height:20px;text-align: center;background: rgba(0,0,0,0.2);color:#fff;"></i>
  39. </el-form-item>
  40. </div>
  41. </el-form>
  42. <div class="sub_btn">
  43. <p class="null-p"></p>
  44. <p class="inquire-button-one" @click="submitForm">保存</p>
  45. <p class="null-p"></p>
  46. </div>
  47. <!--查看图片-->
  48. <el-dialog title="查看" :visible.sync="imgOpen" width="1200px" append-to-body>
  49. <div class="scrollbar-box" style="width:1160px;margin:0 auto;max-height:700px;overflow-y: scroll">
  50. <img :src="imgUrl" style="display:block;max-width:1160px;margin:0 auto">
  51. </div>
  52. </el-dialog>
  53. </div>
  54. </template>
  55. <script>
  56. import { getToken } from "@/utils/auth";
  57. import { getLogoInfo,updateLogoInfo } from "@/api/system/publicConfig";
  58. import store from '@/store'
  59. export default {
  60. name: "publicConfig",
  61. data() {
  62. return {
  63. uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
  64. headers: {
  65. Authorization: "Bearer " + getToken(),
  66. },
  67. form:{
  68. userType:[],
  69. expandType:[]
  70. },
  71. rules: {
  72. loginBanner: [
  73. { required: true, message: "登录页banner不能为空", trigger: "blur" }
  74. ],
  75. homepageBanner: [
  76. { required: true, message: "首页banner不能为空", trigger: "blur" }
  77. ],
  78. },
  79. imgUrl:"",
  80. imgOpen:false,
  81. };
  82. },
  83. created() {
  84. },
  85. mounted(){
  86. this.getLogoInfo();
  87. },
  88. methods: {
  89. /** 提交按钮 */
  90. submitForm: function() {
  91. let self = this;
  92. this.$refs["form"].validate(valid => {
  93. if (valid) {
  94. let obj = {
  95. loginBanner:this.form.loginBanner,
  96. homepageBanner:this.form.homepageBanner,
  97. }
  98. updateLogoInfo(obj).then(response => {
  99. this.msgSuccess(response.msg);
  100. this.getLogoInfo();
  101. });
  102. }
  103. });
  104. },
  105. //查看图片
  106. lookImg(url){
  107. this.imgUrl = url;
  108. this.imgOpen = true;
  109. },
  110. //获取数据
  111. getLogoInfo(){
  112. getLogoInfo().then(response => {
  113. this.$set(this,'form',response.data)
  114. });
  115. },
  116. //上传
  117. handleAvatarSuccess(res,type) {
  118. if(type == 'loginBanner'){
  119. this.$set(this.form,'loginBanner',res.data.url);
  120. }else if(type == 'homepageBanner'){
  121. this.$set(this.form,'homepageBanner',res.data.url);
  122. }
  123. this.$forceUpdate()
  124. },
  125. beforeAvatarUpload(file) {
  126. let type = false;
  127. if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
  128. type = true;
  129. }else{
  130. this.$message.error('只能上传png/jpeg/gif格式图片');
  131. type = false;
  132. }
  133. return type;
  134. },
  135. },
  136. };
  137. </script>
  138. <style scoped lang="scss">
  139. .public-config-page{
  140. flex:1;
  141. display: flex;
  142. flex-direction: column;
  143. overflow: hidden;
  144. .public-form-box{
  145. flex:1;
  146. overflow-y: scroll;
  147. overflow-x: hidden;
  148. }
  149. /*底部按钮弹框*/
  150. .sub_btn{
  151. /*position: absolute;*/
  152. display: flex;
  153. right: 20px;
  154. bottom: 0;
  155. background: #fff;
  156. height: 112px;
  157. text-align: center;
  158. .null-p{
  159. flex:1;
  160. }
  161. .inquire-button-one{
  162. cursor:pointer;
  163. display: inline-block;
  164. text-align: center;
  165. width: 70px;
  166. height: 40px;
  167. border-radius: 6px;
  168. border: 1px solid #0045af;
  169. color:#ffffff;
  170. background:#0045af;
  171. margin:36px 10px 0 0;
  172. }
  173. }
  174. *{
  175. margin:0;
  176. }
  177. .title-box{
  178. border-bottom:1px solid #dedede;
  179. p{
  180. margin-left:40px;
  181. color:#0045af;
  182. line-height:60px;
  183. }
  184. }
  185. .form-max-box{
  186. margin-top:20px;
  187. margin-left: 100px;
  188. }
  189. .avatar-uploader-icon{
  190. width: 200px;
  191. height: 120px;
  192. line-height: 120px;
  193. font-size: 16px;
  194. font-weight: 400;
  195. color: #CCCCCC;
  196. }
  197. .avatar{
  198. width: 200px;
  199. height: 120px;
  200. }
  201. }
  202. </style>