From eaaa5b7839f08ddae008bd9fba3fa432b689b9af Mon Sep 17 00:00:00 2001
From: long <515897141@qq.com>
Date: 星期四, 15 七月 2021 18:42:58 +0800
Subject: [PATCH] 功能展示页，添加 导出、导入
---
src/pages/system/banner.vue | 113 ++++++++++++++------------------------------------------
1 files changed, 29 insertions(+), 84 deletions(-)
diff --git a/src/pages/system/banner.vue b/src/pages/system/banner.vue
index f22319e..73d5cf6 100644
--- a/src/pages/system/banner.vue
+++ b/src/pages/system/banner.vue
@@ -58,30 +58,22 @@
/>
<!-- 鏂板&缂栬緫 -->
- <el-dialog :title="dialogData.type=='add'?'鏂板杞挱鍥�':'缂栬緫杞挱鍥�'" width="500px" :visible.sync="isShowDialog" append-to-body :before-close="hideDialog">
+ <el-dialog v-el-drag-dialog :title="dialogData.type=='add'?'鏂板杞挱鍥�':'缂栬緫杞挱鍥�'" width="500px" :visible.sync="isShowDialog" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
<el-form :ref="formName" :model="dialogData" label-width="120px" :rules="rules" size="small">
<el-form-item label="鎺掑簭鍙凤細" prop="orderNum">
- <el-input v-model="dialogData.orderNum" placeholder="璇疯緭鍏ユ帓搴忓彿" />
+ <el-input v-model="dialogData.orderNum" placeholder="璇疯緭鍏ユ帓搴忓彿" maxlength="10" />
</el-form-item>
- <el-form-item ref="uploadFormItem" label="杞挱鍥撅細" prop="uploadImgs">
+ <el-form-item ref="uploadFormItem" prop="uploadImgs">
+ <span slot="label">
+ <!-- 灏哄 -->
+ 杞挱鍥撅細<br><span style="color: #999;font-size: 12px">(xxx*xxx鍍忕礌)</span>
+ </span>
<!-- 涓婁紶鍥剧墖缁勪欢(鍗曞浘) -->
- <el-upload
+ <UploadSingleImg
ref="refUploadImg"
- accept="image/jpeg,image/jpg,image/gif,image/png"
- :auto-upload="false"
- list-type="picture-card"
- :class="{disabled:uploadDisabled}"
- action="#"
- :limit="1"
- :file-list="dialogData.uploadImgs"
- :on-change="addUploadImg"
- :on-remove="delUploadImg"
- :http-request="uploadImg"
- :on-preview="uploadPreview"
- :before-upload="beforeUploadImg"
- >
- <i class="el-icon-plus" />
- </el-upload>
+ v-model="dialogData.uploadImgs"
+ @change.capture="$refs[formName].clearValidate()"
+ />
</el-form-item>
<el-form-item label="璺宠浆绫诲瀷锛�" prop="jumpType">
<el-select
@@ -94,10 +86,10 @@
</el-select>
</el-form-item>
<el-form-item v-if="dialogData.jumpType" label="璺宠浆閾炬帴锛�" prop="jumpUrl">
- <el-input v-model="dialogData.jumpUrl" placeholder="璇疯緭鍏ヨ烦杞摼鎺�" class="com-edit-input" />
+ <el-input v-model="dialogData.jumpUrl" placeholder="璇疯緭鍏ヨ烦杞摼鎺�" class="com-edit-input" maxlength="100" />
</el-form-item>
<el-form-item v-if="dialogData.jumpType===3" label="appId锛�" prop="jumpMpId">
- <el-input v-model="dialogData.jumpMpId" placeholder="璇疯緭鍏ュ皬绋嬪簭appId" class="com-edit-input" />
+ <el-input v-model="dialogData.jumpMpId" placeholder="璇疯緭鍏ュ皬绋嬪簭appId" class="com-edit-input" maxlength="50" />
</el-form-item>
<el-form-item v-if="dialogData.jumpType===3" label="灏忕▼搴忕増鏈細" prop="envVersion">
<el-select
@@ -105,12 +97,13 @@
clearable
placeholder="璇烽�夋嫨灏忕▼搴忕増鏈�"
class="com-edit-input"
+ @change="handleJumpTypeChange"
>
<el-option v-for="item in envVersionOpt" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item v-if="dialogData.jumpType===3" label="棰濆鏁版嵁锛�" prop="extraData">
- <el-input v-model="dialogData.extraData" placeholder="璇疯緭鍏ュ皬绋嬪簭棰濆鏁版嵁" class="com-edit-input" />
+ <el-input v-model="dialogData.extraData" placeholder="璇疯緭鍏ュ皬绋嬪簭棰濆鏁版嵁" class="com-edit-input" maxlength="50" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@@ -130,8 +123,10 @@
import mixin_Upload from '@/mixins/upload.js'
import mixin_bannerOpts from '@/mixins/bannerOpts.js' // 閫氱敤杞挱鍥句笅鎷夐�夐」
+import UploadSingleImg from '@/components_simple/UploadSingleImg'
export default {
name: 'Equipment',
+ components: { UploadSingleImg },
mixins: [mixin_Upload, mixin_bannerOpts],
data() {
return {
@@ -192,66 +187,6 @@
init() {
this.getList()
},
-
- // 涓婁紶鍥剧墖 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌
- // 涓婁紶鍓嶇‘璁ゆ牸寮�
- beforeUploadImg(file) {
- const isImg = file.type.indexOf('image/') > -1
- if (!isImg) {
- this.$message.error('蹇呴』鏄�夋嫨鍥剧墖鏂囦欢')
- }
- return isImg
- },
- // 澧炲姞鍥剧墖
- addUploadImg(file, fileList) {
- this.$refs.uploadFormItem.resetField()
- this.dialogData.uploadImgs = fileList
- },
- // 鍒犻櫎鍥剧墖
- delUploadImg(file, fileList) {
- this.dialogData.uploadImgs = fileList
- },
- // 鎵ц涓婁紶鍥�
- runUploadImg(suc_cb) {
- if (this.checkNeedUpload(this.dialogData.uploadImgs)) {
- this.$refs.refUploadImg.submit()
- } else {
- suc_cb && suc_cb()
- }
- },
- // 涓婁紶鍥�
- uploadImg(res) {
- console.log(res)
- const file = res.file
- const formData = new FormData()
- formData.append('file', file)
- console.log(formData)
- this.postFN({
- url: 'admin/image/upload',
- header: { 'Content-Type': 'multipart/form-data' },
- params: formData,
- mockData: {
- code: 100,
- msg: '',
- data: {
- imgUrl: 'xxxx'
- }
- }
- }, (inf) => {
- console.log('涓婁紶鍥剧墖鎴愬姛')
-
- // 鏇挎崲鎺夋湭涓婁紶鐨勫浘鐗�
- this.dialogData.uploadImgs[0] = { url: inf.imgUrl, status: 'success' }
- this.dialogData.uploadImgs = JSON.parse(JSON.stringify(this.dialogData.uploadImgs))
- this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
-
- console.log('涓婁紶鍥剧墖缁撴潫')
-
- // 鎻愪氦
- this.submit(this.dialogData.type)
- })
- },
- // 涓婁紶鍥剧墖 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈
// 鑾峰彇鍒楄〃
getList() {
@@ -317,6 +252,15 @@
handleEdit(item) {
this.showDialog('edit', item)
},
+ // 璺宠浆绫诲瀷涓恒�愪笉璺宠浆銆戞椂锛屾竻绌哄叾浣欒烦杞瓧娈�
+ handleJumpTypeChange() {
+ if (this.dialogData.jumpType === 0) {
+ this.dialogData.jumpUrl = ''
+ this.dialogData.jumpMpId = ''
+ this.dialogData.envVersion = ''
+ this.dialogData.extraData = ''
+ }
+ },
// 鏄剧ず寮规
showDialog(type, item) {
let dialogData = {}
@@ -351,7 +295,8 @@
this.$refs[this.formName].validate((valid) => {
if (valid) {
// 涓婁紶鍥剧墖
- this.runUploadImg(() => {
+ this.$refs.refUploadImg.runUploadImg((imgUrl) => {
+ imgUrl && this.$set(this.dialogData, 'imgUrl', imgUrl)
this.submit(type)
})
}
@@ -384,7 +329,7 @@
}, inf => {
this.$messageSuc('淇濆瓨鎴愬姛')
this.hideDialog()
- this.getList()
+ type === 'add' ? this.reGetList() : this.getList()
})
}
}
--
Gitblit v1.8.0