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/admin.vue | 2
src/pages/demo/list.vue | 143 ++++++++++++++++++++++++++++++++++++++++++++++-
2 files changed, 141 insertions(+), 4 deletions(-)
diff --git a/src/pages/demo/list.vue b/src/pages/demo/list.vue
index c97985f..3f3aef7 100644
--- a/src/pages/demo/list.vue
+++ b/src/pages/demo/list.vue
@@ -34,6 +34,27 @@
@click="showAddDialog"
>鏂板</el-button>
</el-col>
+ <el-col :span="1.5">
+ <el-button
+ v-if="getAuthValueFN('xxxx')"
+ type="primary"
+ icon="el-icon-download"
+ size="mini"
+ @click="exportList"
+ >瀵煎嚭</el-button>
+ </el-col>
+ <el-col :span="1.5">
+ <el-button
+ v-if="getAuthValueFN('xxxx')"
+ type="primary"
+ class="rel"
+ size="mini"
+ icon="el-icon-upload2"
+ style="overflow:hidden"
+ >瀵煎叆
+ <input id="upload" ref="upload" type="file" @change="fileChange">
+ </el-button>
+ </el-col>
<right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
</el-row>
<!-- 鎿嶄綔鍖� 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈 -->
@@ -117,6 +138,17 @@
:inactive-value="0"
/>
</el-form-item>
+ <el-form-item prop="uploadImgs">
+ <span slot="label">
+ 鍥剧墖<br><span style="color: #999;font-size: 12px">(xxx*xxx鍍忕礌)</span>
+ </span>
+ <!-- 涓婁紶鍥剧墖缁勪欢(鍗曞浘) -->
+ <UploadSingleImg
+ ref="refUploadImg"
+ v-model="dialogData.uploadImgs"
+ @change.capture="$refs.refDialog.clearValidate()"
+ />
+ </el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="hideDialog">鍙栨秷</el-button>
@@ -131,13 +163,23 @@
:limit.sync="pageSize"
@pagination="getList"
/>
+
+ <!-- upload鏀惧ぇ鍥剧墖 -->
+ <el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center">
+ <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
+ </el-dialog>
+
</div>
</template>
<script>
+import UploadSingleImg from '@/components_simple/UploadSingleImg'
+import mixin_upload from '@/mixins/upload.js' // 閫氱敤涓婁紶鍥剧墖棰勮
export default {
name: 'Demo',
+ components: { UploadSingleImg },
+ mixins: [mixin_upload],
data() {
return {
showSearch: true, // 鏄惁鏄剧ず鎼滅储鍖�
@@ -169,6 +211,9 @@
],
isUp: [
{ required: true, message: '鏄惁涓婃灦涓嶈兘涓虹┖', trigger: 'change' }
+ ],
+ uploadImgs: [
+ { required: true, message: '鍥剧墖涓嶈兘涓虹┖' }
]
}
}
@@ -320,6 +365,8 @@
type: 'edit',
...item
}
+ dialogData.uploadImgs = [{ url: item.imgUrl, status: 'success' }]
+
console.log('dialogData', dialogData)
this.dialogVisible = true
this.$nextTick(() => {
@@ -338,7 +385,10 @@
submitHandle() {
this.$refs['refDialog'].validate(valid => {
if (valid) {
- this.submitReq()
+ this.$refs.refUploadImg.runUploadImg((imgUrl) => {
+ imgUrl && this.$set(this.dialogData, 'imgUrl', imgUrl)
+ this.submitReq()
+ })
}
})
},
@@ -347,7 +397,8 @@
var { dialogData } = this
var params = {
name: dialogData.name,
- isUp: dialogData.isUp
+ isUp: dialogData.isUp,
+ imgUrl: dialogData.imgUrl
}
if (dialogData.password) params.password = dialogData.password
@@ -371,11 +422,97 @@
this.hideDialog()
isAdd ? this.reGetList() : this.getList()
})
+ },
+
+ // 瀵煎嚭鍒楄〃
+ exportList() {
+ var { keyWord } = this
+ const params = {
+ keyWord: keyWord
+ }
+ this.postFN({
+ url: 'xxxx',
+ params,
+ mockData: {
+ code: 100,
+ msg: '',
+ data: {
+ path: 'xxx'
+ }
+ }
+ }, (inf) => {
+ window.location.href = inf.path
+ })
+ },
+
+ // 娓呯┖file
+ clearFile() {
+ this.$refs.upload.value = ''
+ },
+ // 瀵煎叆
+ fileChange(e) {
+ const file = e.target.files[0]
+ if (!file) {
+ this.clearFile()
+ return
+ }
+
+ // 1. 鍒ゆ柇鏂囦欢绫诲瀷
+ if (!/\.(xls|xlsx)$/.test(e.target.value)) {
+ this.$messageError('璇烽�夋嫨xls鎴杧lsx鏍煎紡鏂囦欢')
+ this.clearFile()
+ return
+ }
+
+ // 2. 涓婁紶
+ const formData = new FormData()
+ formData.append('file', file)
+ formData.append('virtualPrizeId', this.id)
+ this.postFN({
+ url: 'admin/virtualPrizeItem/importData',
+ header: { 'Content-Type': 'multipart/form-data' },
+ params: formData,
+ mockData: {
+ code: 100,
+ msg: '',
+ data: {}
+ }
+ }, (inf) => {
+ // 閮ㄥ垎涓嶆垚鍔�
+ if (inf && inf.arr && inf.arr.length) {
+ inf.arr.forEach((o) => {
+ this.$messageError(o)
+ })
+ } else {
+ this.$messageSuc('瀵煎叆鎴愬姛')
+ }
+ this.clearFile()
+ this.reGetList() // 鍒锋柊
+ }, (res) => {
+ this.$messageError('瀵煎叆澶辫触锛�' + (res.msg || '鏈煡鍘熷洜'))
+ this.clearFile()
+ this.reGetList() // 鍒锋柊
+ })
}
}
}
</script>
<style lang="scss" scoped>
-
+#upload{
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ z-index: 1;
+ cursor: pointer;
+ -webkit-appearance: none;
+ appearance: none;
+}
+.rel{
+ position: relative;
+ cursor: pointer;
+}
</style>
diff --git a/src/pages/system/admin.vue b/src/pages/system/admin.vue
index 65f8492..2b20b29 100644
--- a/src/pages/system/admin.vue
+++ b/src/pages/system/admin.vue
@@ -185,7 +185,7 @@
],
password: [
{ required: true, message: '瀵嗙爜涓嶈兘涓虹┖', trigger: 'change' },
- { min: 5, max: 20, message: '瀵嗙爜鍦�5~20涓瓧涔嬮棿'}
+ { min: 5, max: 20, message: '瀵嗙爜鍦�5~20涓瓧涔嬮棿' }
],
passwordSure: [
{ required: true, message: '纭瀵嗙爜涓嶈兘涓虹┖', trigger: 'change' },
--
Gitblit v1.8.0