From 553c364ad7c793ac20583407d9f45a9cb96d3da2 Mon Sep 17 00:00:00 2001 From: zhangyanpeng <bob.zhang@highdatas.com> Date: 星期三, 22 一月 2020 18:50:56 +0800 Subject: [PATCH] 调整上传 --- src/components/square.vue | 215 +++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 158 insertions(+), 57 deletions(-) diff --git a/src/components/square.vue b/src/components/square.vue index cfc70ac..6c3b130 100644 --- a/src/components/square.vue +++ b/src/components/square.vue @@ -1,40 +1,38 @@ <template> <div> <el-row > - <el-col :span="18"><el-form label-width="80px" :inline="true" :label-position="labelPosition" :model="formInline" class="form-inline"> - <el-form-item label="鏍囬"> - <el-input v-model="formInline.title" placeholder="鏍囬"></el-input> - </el-form-item> - - <el-form-item label="鎻忚堪"> - <el-input v-model="formInline.desp" placeholder="鎻忚堪"></el-input> - </el-form-item> - - - <el-form-item > - <el-button type="primary" @click="query_">鏌ヨ</el-button> - <el-button type="info" @click="empty_">閲嶇疆</el-button> - </el-form-item> - - - </el-form></el-col> + <el-col :span="18"> + <el-form label-width="80px" :inline="true" :label-position="labelPosition" :model="formInline" class="form-inline"> + <el-form-item label="鏍囬"> + <el-input v-model="formInline.title" placeholder="鏍囬"></el-input> + </el-form-item> + + <el-form-item label="鎻忚堪"> + <el-input v-model="formInline.desp" placeholder="鎻忚堪"></el-input> + </el-form-item> + + <el-form-item > + <el-button type="primary" @click="query_">鏌ヨ</el-button> + <el-button type="info" @click="empty_">閲嶇疆</el-button> + </el-form-item> + </el-form> + </el-col> <el-col :span="4" ><el-button type="primary" @click="createNew">鍒涘缓</el-button></el-col> </el-row> - <div class="infinite-list-wrapper" style="overflow:auto"> + <div class="infinite-list-wrapper" style="overflow:auto; height: 70vh; border-top: 1px solid #c3c5c7;"> <div class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled"> <div v-for="one in dataList" :key="one.id" class="list-item" @click="showItem(one)"> <el-row > - <el-col :span="8"><div class="grid-content">{{one.title}}</div></el-col> - <el-col :span="4" :offset="12"><div class="">{{one.time}}</div></el-col> + <el-col :span="20"><div class="grid-content z_grid-content1 grid-content_text">{{one.title}}</div></el-col> + <el-col :span="4"><div class="grid-content z_grid-content1 grid-content_time">{{one.time}}</div></el-col> </el-row> <el-row> - <el-col :span="20"><div class="grid-content">{{one.desp}}</div></el-col> + <el-col :span="20"><div class="grid-content z_grid-content2">{{one.desp}}</div></el-col> </el-row> - <el-divider></el-divider> </div> </div> <p v-if="loading">鍔犺浇涓�...</p> @@ -45,7 +43,7 @@ :visible.sync="dialogVisible" width="40%" height="40%" - :before-close="handleClose"> + custom-class="handleClose"> <span>{{selectOne.title}}</span> <el-divider></el-divider> <div style="content"> @@ -53,25 +51,27 @@ </div> <span slot="footer" class="dialog-footer"> - <el-button :v-if="selectOne.attachment == '' ? false: true" type="primary" @click="download">涓� 杞�</el-button> + <el-button v-if="selectOne.attachment && selectOne.attachment != ''" type="primary" @click="download">涓� 杞�</el-button> </span> </el-dialog> <el-dialog title="鍒涘缓璇濋" :visible.sync="dialogFormVisible"> <el-form :model="form"> <el-form-item label="璇濋鍚嶇О" :label-width="formLabelWidth"> - <el-input v-model="form.name" autocomplete="off"></el-input> + <el-input v-model="form.title" autocomplete="off"></el-input> </el-form-item> <el-form-item label="璇濋鍐呭" :label-width="formLabelWidth"> <el-input type="textarea" v-model="form.desp" autocomplete="off"></el-input> </el-form-item> <el-upload class="upload-demo" + :action="uploadUrl" :on-preview="handlePreview" - :on-remove="handleRemove" - :before-remove="beforeRemove" - :limit="1" + :data="form" + :limit="3" :auto-upload='false' + ref="upload" + :on-change="onChange" :on-exceed="handleExceed" :file-list="fileList"> <el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button> @@ -80,7 +80,7 @@ </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">鍙� 娑�</el-button> - <el-button type="primary" @click="dialogFormVisible = false">纭� 瀹�</el-button> + <el-button type="primary" @click="createTopic">纭� 瀹�</el-button> </div> </el-dialog> @@ -91,11 +91,15 @@ export default { data() { return { + uploadUrl:"/api/api/file/topicUpload", form:{}, - fileList: [], - dialogVisible: false, - dialogFormVisible: false, - labelPosition: "left", + pageno:1, + total:0, + maxPage:0, + fileList: [], + dialogVisible: false, + dialogFormVisible: false, + labelPosition: "right", formInline:{}, selectOne:{ title:"biaoti", @@ -103,23 +107,64 @@ attachment:"222" }, dataList: [ - {id:1,attachment:"222",title:"鏍囬", desp:"鎻忚堪121212121212", time:"12鍒嗛挓鍓�"}, - {id:1,attachment:"222",title:"11", desp:"111", time:"11111"}, - {id:1,attachment:"",title:"11", desp:"111", time:"11111"}, - {id:1,attachment:"",title:"11", desp:"111", time:"11111"}, - ], - loading: false + // {id:1,attachment:"222",title:"鏍囬", desp:"鎻忚堪鏃跺彂鐢熺籂绾峰徃绗﹀悎鍙屾柟閰掑彑鍙戝姩鏈烘椂浠e嘲宄婚厤鐢甸棿 鍒�鐗囨満姘寸數璐规悳璞嗚厫鐨悳鐨勭湅娉曟垜閮藉彨鎵撶牬鏄寰楁壒鍙戝晢闄勫姞璐圭涓夊搴︾牬鍙戞帴鏀跺埌鍙戝湴鏂瑰氨鎼滃埌鍒板洓鐐瑰垎鍙戝伓璇诲洤", time:"12鍒嗛挓鍓�"}, + // {id:1,attachment:"222",title:"11", desp:"111", time:"11111"}, + // {id:1,attachment:"",title:"11", desp:"111", time:"11111"}, + // {id:1,attachment:"",title:"11", desp:"111", time:"11111"}, + // {id:1,attachment:"",title:"11", desp:"111", time:"11111"}, + // {id:1,attachment:"",title:"11", desp:"111", time:"11111"}, + // {id:1,attachment:"",title:"11", desp:"111", time:"11111"}, + // {id:1,attachment:"",title:"11", desp:"111", time:"11111"}, + // {id:1,attachment:"",title:"11", desp:"111", time:"11111"}, + ], + loading: false, + } }, computed: { noMore() { - return this.count >= 20 + return this.maxPage == this.pageno }, disabled() { return this.loading || this.noMore } }, + mounted() { + this.getData(); + }, methods: { + onChange(file, fileList) { + this.fileList = fileList; + }, + createTopic() { + let me = this; + var userId = localStorage.getItem('userId'); + if(!userId) { + this.$router.push('/login'); + } + this.form.userId = userId; + let params = this.form; + + if(this.fileList.length == 0) { + //涓嶅甫闄勪欢 + let url = "/api/topic/add"; + this.$axios.get(url, { + params + }) + .then(data_ => { + if(data_.data.success) { + this.$message('鍒涘缓鎴愬姛'); + me.dialogFormVisible = false; + }else { + this.$message({message:'璇濋鍒涘缓澶辫触', type: 'warning'}); + } + }).catch(error => { + console.log(error); + }) + }else { + this.$refs.upload.submit(); + } + }, handleRemove(file, fileList) { console.log(file, fileList); }, @@ -127,17 +172,19 @@ console.log(file); }, handleExceed(files, fileList) { - this.$message.warning(`褰撳墠闄愬埗閫夋嫨 3 涓枃浠讹紝鏈閫夋嫨浜� ${files.length} 涓枃浠讹紝鍏遍�夋嫨浜� ${files.length + fileList.length} 涓枃浠禶); + this.$message.warning(`褰撳墠闄愬埗閫夋嫨 1 涓枃浠讹紝鏈閫夋嫨浜� ${files.length} 涓枃浠讹紝鍏遍�夋嫨浜� ${files.length + fileList.length} 涓枃浠禶); }, beforeRemove(file, fileList) { return this.$confirm(`纭畾绉婚櫎 ${ file.name }锛焋); }, load() { - // this.loading = true - // setTimeout(() => { - // this.count += 2 - // this.loading = false - // }, 2000) + + if(me.pageno < me.maxPage) { + me.pageno++; + } + query_(); + + }, showItem(one) { this.dialogVisible = true; @@ -154,28 +201,33 @@ this.getData(this.formInline); }, getData(query) { + let me = this; + this.loading = true this.loading_table = true; let pageno = this.pagenum; - let url = "/api/scheme/page/" + pageno; - let params = { - pageSize: this.pagesize - }; + let url = "/api/topic/page/" + this.pageno; + let params = {}; if(query){ - params.name = query.name; - params.delay = query.delay; - params.finish = query.fiish; - params.type = query.type; + params.title = query.title; + params.desp = query.desp; } this.$axios.get(url, { params }) .then(data_ => { console.log(data_); - this.tableData = data_.data.data.records; //缁檛ableData璧嬪�� - this.total = data_.data.data.total; - this.loading_table = false; + if(data_.data.success) { + me.dataList.push.apply(me.dataList, data_.data.data.records) + me.total = data_.data.data.total; + me.pageno = data_.data.data.pageno; + me.maxPage = data_.data.data.maxPage; + + + } + me.loading = false }).catch(error => { console.log(error); + me.loading = false }) }, } @@ -187,7 +239,56 @@ text-align: left; padding: 5px; } + + .grid-content_text { + font-weight: bold; + font-style: italic; + color: #000; + } + .grid-content_time { + font-weight: bold; + font-style: italic; + color: #909399; + } + .z_grid-content1{ + display:table-cell; + vertical-align:bottom; + height: 50px; + } + .z_grid-content2{ + color: #83878a; + padding: 0px; + height: 40px; + line-height: 40px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } .content{ } + + .form-inline { + text-align: left; + } + + .list { + + } + .list-item { + margin-top: 20px; + padding-bottom: 5px; + border-bottom: 1px solid #c3c5c7; + } + + .handleClose { + margin: 10px; + text-align: left; + } + .handleClose .el-dialog__body { + padding: 10px 20px; + } + .handleClose .el-divider--horizontal{ + margin: 5px; + } </style> -- Gitblit v1.8.0