From 310ebbbc42e94e947484ec7f4014ddbe9a5612f2 Mon Sep 17 00:00:00 2001 From: 李林 <z1292839451@163.com> Date: 星期一, 08 一月 2024 09:22:14 +0800 Subject: [PATCH] 修订版本1.0 --- src/components/tool/value-table.vue | 220 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 203 insertions(+), 17 deletions(-) diff --git a/src/components/tool/value-table.vue b/src/components/tool/value-table.vue index d32ed04..fadc898 100644 --- a/src/components/tool/value-table.vue +++ b/src/components/tool/value-table.vue @@ -16,6 +16,29 @@ text-align: right; margin-top: 10px; } + + .down-left { + width: 50%; + display: flex; + align-items: center; + justify-content: center; + } + + .down-right { + width: 50%; + display: flex; + align-items: center; + justify-content: center; + } +</style> +<style> + .value-table .el-upload { + width: 100%; + } + + .value-table .el-upload-dragger { + width: 100%; + } </style> <template> @@ -29,7 +52,7 @@ <el-table-column align="center" type="index" label="搴忓彿" width="70" v-if="data.isIndex"> </el-table-column> <el-table-column :prop="a.label" :label="a.value" sortable="custom" v-for="(a, ai) in tableHead" :key="ai" - show-overflow-tooltip min-width="145"> + show-overflow-tooltip min-width="160"> <template slot-scope="scope"> <div v-if="showType(a.label, data.tagField) != null"> <el-tag v-for="(b, bi) in data.tagField[a.label].select" :key="bi" v-if="b.value == scope.row[a.label]" @@ -56,12 +79,14 @@ <el-dialog title="缂栬緫" :visible.sync="upDia" width="500px"> <div class="body" v-if="upDia"> <el-row v-for="(a, ai) in upHead" :key="ai" style="line-height: 50px;"> - <el-col :span="5" style="text-align: right;">{{a.value}}锛�</el-col> - <el-col :span="17" :offset="1"> - <el-input v-model="upData[a.label]" size="small" clearable - v-if="showType(a.label, data.selectField) == null"></el-input> + <el-col :span="6" style="text-align: right;"> + <span class="required-span" v-if="showUpReq(a.label)">* </span>{{a.value}}锛� + </el-col> + <el-col :span="16" :offset="1"> + <el-input v-model="upData[a.label]" size="small" clearable :placeholder="`璇疯緭鍏�${a.value}`" + v-if="showType(a.label, data.selectField) == null" :disabled="isDisabled(a.label)"></el-input> <el-select v-model="upData[a.label]" size="small" v-if="showType(a.label, data.selectField) != null" - style="width: 100%;"> + style="width: 100%;" :disabled="isDisabled(a.label)"> <el-option v-for="(b, bi) in data.selectField[a.label].select" :key="bi" :value="b.value" :label="b.label"></el-option> </el-select> @@ -74,10 +99,10 @@ </span> </el-dialog> <el-dialog title="鏂板" :visible.sync="addDia" width="500px"> - <div class="body" v-if="addDia"> + <div class="body" v-if="addDia" style="max-height: 600px;overflow-y: auto;padding: 5px 0;"> <el-row v-for="(a, ai) in upHead" :key="ai" style="line-height: 50px;"> - <el-col :span="5" style="text-align: right;">{{a.value}}锛�</el-col> - <el-col :span="17" :offset="1"> + <el-col :span="6" style="text-align: right;"><span class="required-span" v-if="showAddReq(a.label)">* </span>{{a.value}}锛�</el-col> + <el-col :span="16" :offset="1"> <el-input v-model="upData[a.label]" size="small" clearable :placeholder="`璇疯緭鍏�${a.value}`" v-if="showType(a.label, data.selectField) == null"></el-input> <el-select v-model="upData[a.label]" size="small" v-if="showType(a.label, data.selectField) != null" @@ -95,11 +120,26 @@ </el-dialog> <el-dialog title="瀵煎嚭" :visible.sync="downDia" width="400px"> <div style="display: flex;width: 100%;height: 100px;"> - <div class="down-left"></div> - <div class="down-right"></div> + <div class="down-left" @click="downFile(true)"> + <el-button>鏈〉瀵煎嚭</el-button> + </div> + <div class="down-right" @click="downFile(false)"> + <el-button>鍏ㄩ儴瀵煎嚭</el-button> + </div> + </div> + </el-dialog> + <el-dialog title="鏁版嵁瀵煎叆" :visible.sync="uploadDia" width="500px"> + <div style="margin: 0 auto;"> + <el-upload ref="upload" drag :action="javaApi + inputUrl" :headers="token" + :file-list="fileList" name="file" :auto-upload="false" accept=".csv" :limit="1" :on-change="beforeUpload" + :on-success="onSuccess" :on-error="onError"> + <i class="el-icon-upload"></i> + <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div> + </el-upload> </div> <span slot="footer" class="dialog-footer"> - <el-button @click="downDia = false">鍙� 娑�</el-button> + <el-button @click="uploadDia = false">鍙� 娑�</el-button> + <el-button type="primary" @click="submitUpload()">涓� 浼�</el-button> </span> </el-dialog> </div> @@ -120,6 +160,14 @@ default: () => null }, delUrl: { + type: String, + default: () => null + }, + downUrl: { + type: String, + default: () => null + }, + inputUrl: { type: String, default: () => null }, @@ -200,7 +248,10 @@ addUrl: null, addLoad: false, dataCopy: {}, - downDia: false + downDia: false, + uploadDia: false, + token: null, + fileList: [], } }, watch: { @@ -217,6 +268,9 @@ this.data = this.componentData this.dataCopy = this.HaveJson(this.componentData) this.selectList() + this.token = { + 'token': sessionStorage.getItem('token') + } }, methods: { selectChange(val) { @@ -289,12 +343,34 @@ var str = ob[val] return str == undefined ? null : ob[val].select }, + showAddReq(label){ + if(this.data.requiredAdd==undefined){ + return + } + for (var i = 0; i < this.data.requiredAdd.length; i++) { + if(label == this.data.requiredAdd[i]){ + return true + } + } + return false + }, + showUpReq(label){ + if(this.data.requiredUp==undefined){ + return + } + for (var i = 0; i < this.data.requiredUp.length; i++) { + if(label == this.data.requiredUp[i]){ + return true + } + } + return false + }, main(row, val) { if (val.method == undefined) return else if (val.method == 'doDiy') { if (val.id == 'update') { this.upDia = true, - this.upData = this.HaveJson(row) + this.upData = this.HaveJson(row) this.upHead = this.HaveJson(this.tableHead) this.upHead = this.upHead.filter(a => a.label != 'createTime' && a.label != 'updateTime') delete this.upData.orderBy @@ -352,6 +428,16 @@ this.$message.error('璇风粰淇敼璇锋眰鍦板潃') return } + for (var i = 0; i < this.data.requiredUp.length; i++) { + if(this.upData[this.data.requiredUp[i]]==null||this.upData[this.data.requiredUp[i]]==''){ + var list = this.upHead.filter(a=>{ + if(a.label == this.data.requiredUp[i]) return a + }) + if(list[0].value == undefined) continue + this.$message.error(list[0].value + '鏄繀濉」') + return + } + } this.upLoad = true this.$axios.post(this.upUrl, this.upData, { headers: { @@ -385,8 +471,10 @@ this.upHead = this.HaveJson(this.tableHead) this.upHead = this.upHead.filter(a => a.label != 'createTime' && a.label != 'updateTime') var val = this.data.do.filter(a => a.id == 'update')[0] - if(val == undefined) { - val = {field: []} + if (val == undefined) { + val = { + field: [] + } } val.field.forEach(a => { if (JSON.stringify(this.upData[a]) == undefined) { @@ -411,6 +499,16 @@ this.$message.error('璇风粰娣诲姞璇锋眰鍦板潃') return } + for (var i = 0; i < this.data.requiredAdd.length; i++) { + if(this.upData[this.data.requiredAdd[i]]==null||this.upData[this.data.requiredAdd[i]]==''){ + var list = this.upHead.filter(a=>{ + if(a.label == this.data.requiredAdd[i]) return a + }) + if(list[0].value == undefined) continue + this.$message.error(list[0].value + '鏄繀濉」') + return + } + } this.addLoad = true this.$axios.post(this.addUrl, this.upData, { headers: { @@ -430,8 +528,96 @@ this.addLoad = false }) }, - openDownDia(){ + openDownDia() { this.downDia = true + }, + downFile(type) { + if (this.downUrl == null) { + this.$message.error('璇风粰瀵煎嚭璇锋眰鍦板潃') + return + } + var page = this.HaveJson(this.page) + if (!type) { + page.current = 0 + page.size = this.total + } + this.loading = true + this.$axios.post(this.downUrl, { + page: page, + entity: this.data.entity + }, { + headers: { + 'Content-Type': 'application/json' + } + }).then(res => { + if (res.code === 201) { + this.loading = false + return + } + this.downDia = false + this.loading = false + this.$message.success('瀵煎嚭鎴愬姛') + let eleLink = document.createElement('a') + eleLink.style.display = 'none' + eleLink.download = res.data + eleLink.href = this.javaApi + '/outPath/' + res.data + document.body.appendChild(eleLink) + eleLink.click() + document.body.removeChild(eleLink) + }).catch(e => { + console.log(e); + this.loading = false + this.$message.error('璇峰埛鏂伴〉闈㈠啀灏濊瘯') + }) + }, + openUpload() { + if (this.inputUrl == null) { + this.$message.error('璇风粰瀵煎叆璇锋眰鍦板潃') + return + } + this.uploadDia = true + }, + beforeUpload(file, fileList) { + if (file.raw.type != 'text/csv') { + this.$message.error('涓婁紶鏂囦欢鏍煎紡涓嶆纭�'); + this.$refs.upload.clearFiles() + return false; + } + }, + submitUpload() { + if (this.$refs.upload.uploadFiles.length == 0) { + this.$message.error('鏈�夋嫨鏂囦欢') + return + } + this.uploading = true + this.$refs.upload.submit(); + }, + onSuccess(response, file, fileList) { + this.$refs.upload.clearFiles() + this.uploadDia = false + this.uploading = false + if(response.code==201){ + this.$message.error(response.message) + return + } + this.$message.success('涓婁紶鎴愬姛') + this.selectList() + }, + onError(err, file, fileList) { + this.$message.error('涓婁紶澶辫触') + this.$refs.upload.clearFiles() + this.uploading = false + }, + isDisabled(label){ + if(this.data.disabledUp==undefined){ + return + } + for (var i = 0; i < this.data.disabledUp.length; i++) { + if(label == this.data.disabledUp[i]){ + return true + } + } + return false } } } -- Gitblit v1.9.3