查看 | 历史 | 提交 | 提交对比
long
2021-10-26 e9f8083097a8d4b247e41c629e4822400136e803
提交 | 用户 | age
2a61f6 1 <!-- 基础配置 -->
L 2 <template>
3   <div class="app-container">
4
5     <el-form ref="basicForm" label-position="left" :model="basicData" label-width="150px" :rules="rules">
6
7       <el-form-item label="分享标题：" prop="shareTitle">
36b711 8         <el-input v-model="basicData.shareTitle" placeholder="请输入分享标题" maxlength="100" class="com-edit-input" />
2a61f6 9       </el-form-item>
L 10
11       <el-form-item prop="uploadShareImgs">
12         <span slot="label">
13           分享图片：<br><span>(500*400像素)</span>
14         </span>
15         <!-- 上传图片组件(单图) -->
133cfa 16         <UploadSingleImg
L 17           ref="refUploadImg"
9c6d51 18           v-model="basicData.uploadShareImgs"
133cfa 19           @change.capture="$refs['basicForm'].clearValidate()"
L 20         />
2a61f6 21       </el-form-item>
L 22     </el-form>
23
24     <div v-if="getAuthValueFN('system_set')" class="com-edit-bottom-btns flex flex-align-center">
25       <el-button size="mini" @click="jumpBack">取消</el-button>
26       <el-button size="mini" type="primary" @click="submit">提交</el-button>
27     </div>
28
29     <!-- upload放大图片 -->
30     <el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center">
31       <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
32     </el-dialog>
33   </div>
34 </template>
35
36 <script>
37 import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
133cfa 38 import UploadSingleImg from '@/components_simple/UploadSingleImg'
2a61f6 39 export default {
9c6d51 40   components: { UploadSingleImg },
L 41   mixins: [mixin_upload],
2a61f6 42   data() {
L 43     return {
44       basicData: {
45         shareTitle: '',
46         uploadShareImgs: [] // 上传分享图
47       },
48
49       // 表单校验
50       rules: {
51         shareTitle: [{
52           required: true, message: '请填写分享标题', trigger: 'change'
53         }],
54         uploadShareImgs: [{
55           required: true, message: '请选择图片'
56         }]
57       }
58     }
59   },
60   mounted() {
61     this.init()
62   },
63   methods: {
64     init() {
65       this.getBasicData()
66     },
67
68     // 获取基础配置数据
69     getBasicData() {
70       this.postFN({
71         url: 'admin/systemParameter/info',
72         params: {},
73         mockData: {
74           code: 100,
75           msg: '',
76           data: {
77             'shareImg': 'q1rYm',
78             'shareTitle': 'yaD(jiP'
79           }
80         }
81       }, (inf) => {
82         this.basicData.shareTitle = inf.shareTitle
83         if (inf.shareImg) this.basicData.uploadShareImgs = [{ url: inf.shareImg, status: 'success' }]
84       })
85     },
86
87     jumpBack() {
88       this.$router.go(-1)
89     },
90
91     // 提交编辑
92     submit() {
93       this.$refs['basicForm'].validate(valid => {
94         if (valid) {
133cfa 95           // 上传图片
L 96           this.$refs.refUploadImg.runUploadImg((imgUrl) => {
9c6d51 97             imgUrl && this.$set(this.basicData, 'shareImg', imgUrl)
2a61f6 98             this.submitReq()
L 99           })
100         }
101       })
102     },
103
104     submitReq() {
105       var { basicData } = this
106       var {
107         shareTitle,
108         shareImg
109       } = basicData
110
111       const params = {
112         shareTitle: shareTitle,
113         shareImg: shareImg
114       }
115
116       this.postFN({
117         url: 'admin/systemParameter/edit',
118         params: params,
119         mockData: {
120           code: 100,
121           msg: '',
122           data: {}
123         }
124       }, () => {
125         this.getBasicData()
126         this.$messageSuc('保存成功')
127       })
128     }
129   }
130 }
131 </script>
132
133 <style lang="scss" scoped>
134
135 </style>