From c3b8f3f950ca99b011ea8f43b2356ddf0508f3b9 Mon Sep 17 00:00:00 2001 From: gaoaoy <1042166043@qq.com> Date: 星期一, 04 三月 2024 13:42:04 +0800 Subject: [PATCH] 6 设备工具明细 --- src/components/tool/value-table.vue | 357 ++++++++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 312 insertions(+), 45 deletions(-) diff --git a/src/components/tool/value-table.vue b/src/components/tool/value-table.vue index d32ed04..c9999e0 100644 --- a/src/components/tool/value-table.vue +++ b/src/components/tool/value-table.vue @@ -16,6 +16,33 @@ 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; + } + + .body{ + overflow-x: hidden; + } +</style> +<style> + .value-table .el-upload { + width: 100%; + } + + .value-table .el-upload-dragger { + width: 100%; + } </style> <template> @@ -23,13 +50,14 @@ <div class="table"> <el-table ref="eltable" :data="tableData" style="width: 100%;" height="100%" tooltip-effect="dark" border @selection-change="selectChange" @select="select" v-loading="loading" @sort-change="sortChange" - @row-click="rowClick"> - <el-table-column type="selection" width="50" v-if="data.showSelect"> + @row-click="rowClick" :show-summary="data.countFleid!=undefined && data.countFleid.length > 0" + :summary-method="getSummaries"> + <el-table-column type="selection" width="65" v-if="data.showSelect"> </el-table-column> - <el-table-column align="center" type="index" label="搴忓彿" width="70" v-if="data.isIndex"> + <el-table-column type="index" align="center" 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]" @@ -53,40 +81,79 @@ :total="total"> </el-pagination> </div> - <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-select v-model="upData[a.label]" size="small" v-if="showType(a.label, data.selectField) != null" - style="width: 100%;"> - <el-option v-for="(b, bi) in data.selectField[a.label].select" :key="bi" :value="b.value" - :label="b.label"></el-option> - </el-select> - </el-col> - </el-row> + <el-dialog title="缂栬緫" :visible.sync="upDia" :width="data.row==1?'500px':500+data.row * 200 + 'px'"> + <div class="body" v-if="upDia" style="max-height: 550px;overflow-y: auto;padding: 5px 0;"> + <div v-if="data.row > 1"> + <div v-for="(a, ai) in upHead" :key="ai" style="line-height: 50px;"> + <el-col :span="6/data.row" style="text-align: right;"> + <span class="required-span" v-if="showUpReq(a.label)">* </span>{{a.value}}锛� + </el-col> + <el-col :span="16/data.row" :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%;" :disabled="isDisabled(a.label)" clearable> + <el-option v-for="(b, bi) in data.selectField[a.label].select" :key="bi" :value="b.value" + :label="b.label"></el-option> + </el-select> + </el-col> + </div> + </div> + <div v-else> + <el-row v-for="(a, ai) in upHead" :key="ai" style="line-height: 50px;"> + <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%;" :disabled="isDisabled(a.label)" clearable> + <el-option v-for="(b, bi) in data.selectField[a.label].select" :key="bi" :value="b.value" + :label="b.label"></el-option> + </el-select> + </el-col> + </el-row> + </div> </div> <span slot="footer" class="dialog-footer"> <el-button @click="upDia = false">鍙� 娑�</el-button> <el-button type="primary" @click="saveUpData" :loading="upLoad">纭� 瀹�</el-button> </span> </el-dialog> - <el-dialog title="鏂板" :visible.sync="addDia" width="500px"> - <div class="body" v-if="addDia"> - <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 :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" - style="width: 100%;" :placeholder="`璇烽�夋嫨${a.value}`"> - <el-option v-for="(b, bi) in data.selectField[a.label].select" :key="bi" :value="b.value" - :label="b.label"></el-option> - </el-select> - </el-col> - </el-row> + <el-dialog title="鏂板" :visible.sync="addDia" :width="data.row==1?'500px':500+data.row * 200 + 'px'"> + <div class="body" v-if="addDia" style="max-height: 550px;overflow-y: auto;padding: 5px 0;"> + <div v-if="data.row > 1"> + <div v-for="(a, ai) in upHead" :key="ai" style="line-height: 50px;"> + <el-col :span="6/data.row" style="text-align: right;"><span class="required-span" + v-if="showAddReq(a.label)">* + </span>{{a.value}}锛�</el-col> + <el-col :span="16/data.row" :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" + style="width: 100%;" :placeholder="`璇烽�夋嫨${a.value}`" clearable> + <el-option v-for="(b, bi) in data.selectField[a.label].select" :key="bi" :value="b.value" + :label="b.label"></el-option> + </el-select> + </el-col> + </div> + </div> + <div v-else> + <el-row v-for="(a, ai) in upHead" :key="ai" style="line-height: 50px;"> + <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" + style="width: 100%;" :placeholder="`璇烽�夋嫨${a.value}`" clearable> + <el-option v-for="(b, bi) in data.selectField[a.label].select" :key="bi" :value="b.value" + :label="b.label"></el-option> + </el-select> + </el-col> + </el-row> + </div> </div> <span slot="footer" class="dialog-footer"> <el-button @click="addDia = false">鍙� 娑�</el-button> @@ -95,11 +162,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" :data="{param: data.uploadStr}"> + <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> @@ -123,6 +205,14 @@ type: String, default: () => null }, + downUrl: { + type: String, + default: () => null + }, + inputUrl: { + type: String, + default: () => null + }, componentData: { type: Object, default: () => { @@ -133,9 +223,10 @@ order: 'asc' } }, - isIndex: true, - showSelect: true, + isIndex: false, + showSelect: false, select: true, + row: 1, do: [{ id: 'update', font: '缂栬緫', @@ -173,14 +264,16 @@ order: 'asc' } }, - isIndex: true, - showSelect: true, + isIndex: false, + showSelect: false, select: true, + row: 1, do: [{ font: '鍒犻櫎', type: 'text' }], - type: [] + type: [], + uploadStr: "" }, tableHead: [], tableData: [], @@ -200,7 +293,10 @@ addUrl: null, addLoad: false, dataCopy: {}, - downDia: false + downDia: false, + uploadDia: false, + token: null, + fileList: [], } }, watch: { @@ -217,6 +313,9 @@ this.data = this.componentData this.dataCopy = this.HaveJson(this.componentData) this.selectList() + this.token = { + 'token': sessionStorage.getItem('token') + } }, methods: { selectChange(val) { @@ -289,7 +388,30 @@ 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) { + console.log(val); if (val.method == undefined) return else if (val.method == 'doDiy') { if (val.id == 'update') { @@ -352,6 +474,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: { @@ -373,6 +505,7 @@ }) }, openAddDia(addUrl) { + console.log(addUrl); this.addDia = true this.addUrl = addUrl this.upData = {} @@ -385,8 +518,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 +546,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,9 +575,131 @@ 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 + }, + getSummaries(param) { + const { + columns, + data + } = param; + const sums = []; + columns.forEach((column, index) => { + if (index === 0) { + sums[index] = '鍚堣'; + return; + } + const values = data.map(item => Number(item[column.property])); + if (this.data.countFleid == undefined) { + sums[index] = '' + return + } + if (this.data.countFleid.filter(str => { + return str === column.property + }).length > 0) { + sums[index] = values.reduce((prev, curr) => { + const value = Number(curr); + if (!isNaN(value)) { + return prev + curr; + } else { + return prev; + } + }, 0); + sums[index] += ''; + } else { + sums[index] = ''; + } + }); + return sums; } } } -</script> \ No newline at end of file +</script> -- Gitblit v1.9.3