From 67d2338b3dd43c5972159822aa3dd8f53cd3c78b Mon Sep 17 00:00:00 2001 From: licp <lichunping@guanfang.com.cn> Date: 星期三, 03 四月 2024 11:14:00 +0800 Subject: [PATCH] 合并冲突 --- src/components/tool/value-table.vue | 298 +++++++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 238 insertions(+), 60 deletions(-) diff --git a/src/components/tool/value-table.vue b/src/components/tool/value-table.vue index 83f2202..f6674cc 100644 --- a/src/components/tool/value-table.vue +++ b/src/components/tool/value-table.vue @@ -30,8 +30,38 @@ align-items: center; justify-content: center; } + + .body { + overflow-x: hidden; + } </style> <style> + /* .value-table .highlight-warning-row-border td { + border-top: 2px solid #ffcd29; + border-bottom: 2px solid #ffcd29; + } */ + + .value-table .highlight-warning-row-border td:first-child { + border-left: 4px solid #ffcd29; + } + + .value-table .highlight-warning-row-border td:last-child { + border-right: 4px solid #ffcd29; + } + + /* .value-table .highlight-danger-row-border td { + border-top: 2px solid red; + border-bottom: 2px solid red; + } */ + + .value-table .highlight-danger-row-border td:first-child { + border-left: 4px solid #f56c6c; + } + + .value-table .highlight-danger-row-border td:last-child { + border-right: 4px solid #f56c6c; + } + .value-table .el-upload { width: 100%; } @@ -43,76 +73,131 @@ <template> <div class="value-table"> - <div class="table"> - <el-table ref="eltable" :data="tableData" style="width: 100%;" height="100%" tooltip-effect="dark" border + <div class="table" :style="data.isPage!=undefined&&data.isPage!=true?'height:100%':''"> + <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" :show-summary="data.countFleid!=undefined && data.countFleid.length > 0" :summary-method="getSummaries"> - <el-table-column type="selection" width="65" v-if="data.showSelect"> + @row-click="rowClick" :show-summary="data.countFleid!=undefined && data.countFleid.length > 0" + :summary-method="getSummaries" :row-class-name="tableRowClassName" + :row-key="record=>record.id" :current-row-key="data.currentId" + highlight-current-row + :span-method="spanMethod"> + <el-table-column type="selection" width="65" v-if="data.showSelect" :key="Math.random()"> </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="65" v-if="data.isIndex" :key="Math.random()"> </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="160"> + <el-table-column :prop="a.label" :label="a.value" :sortable="data.sort==false?false:'custom'" + v-for="(a, ai) in tableHead" :key="ai" show-overflow-tooltip min-width="155"> <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]" - :type="b.type" size="medium">{{b.label}}</el-tag> + <template v-if="typeof(scope.row[a.label]) == 'object'"> + <template v-for="(param, i) in scope.row[a.label]"> + <el-tag v-for="(b, bi) in data.tagField[a.label].select" :key="bi" v-if="b.value == param" + :type="b.type" size="medium" style="margin-right: 5px;">{{b.label}}</el-tag> + </template> + </template> + <template v-else> + <el-tag v-for="(b, bi) in data.tagField[a.label].select" :key="bi" v-if="b.value == scope.row[a.label]" + :type="b.type" size="medium">{{b.label}}</el-tag> + </template> </div> + <!-- 鍙搷浣滆杩涜鐐瑰嚮浜嬩欢 --> + <span v-else-if="data.linkEvent&&showLink(a.label, data.linkEvent)" style="color:#409EFF;cursor: pointer;" + @click="handleLinkEvent(scope.row,data.linkEvent[a.label])">{{scope.row[a.label]}}</span> <span v-else>{{scope.row[a.label]}}</span> </template> </el-table-column> - <el-table-column fixed="right" align="center" label="鎿嶄綔" :width="50 + data.do.length * 30" - v-if="data.do.length > 0"> + <el-table-column fixed="right" align="center" label="鎿嶄綔" :width="getWidth()" v-if="data.do.length > 0"> <template slot-scope="scope"> <el-button v-for="(a, ai) in data.do" :key="ai" :type="a.type" + :disabled="a.disabFun ? a.disabFun(scope.row,scope.$index) : false" @click="main(scope.row, a)">{{a.font}}</el-button> </template> </el-table-column> </el-table> </div> - <div class="page"> + <div class="page" v-if="data.isPage==undefined||data.isPage"> <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page.current" :page-sizes="[10, 20, 30, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper" - :total="total"> + :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="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)"> - <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 10px 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;" :offset="1"> + <span class="required-span" v-if="showUpReq(a.label)">* </span>{{a.value}}锛� + </el-col> + <el-col :span="16/data.row"> + <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]" :multiple="data.selectField[a.label].choose" 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]" :multiple="data.selectField[a.label].choose" 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"> + <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;"> - <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}`"> - <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 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> @@ -150,8 +235,12 @@ import { Page } from 'iview'; +import { data } from 'jquery'; export default { props: { + tableRowClassName: { + type: Function + }, url: { type: String, default: () => null @@ -182,9 +271,10 @@ order: 'asc' } }, - isIndex: true, - showSelect: true, + isIndex: false, + showSelect: false, select: true, + row: 1, do: [{ id: 'update', font: '缂栬緫', @@ -222,15 +312,18 @@ order: 'asc' } }, - isIndex: true, - showSelect: true, + isIndex: false, + showSelect: false, select: true, + row: 1, + isPage:true,// do: [{ font: '鍒犻櫎', type: 'text' }], type: [], - uploadStr: "" + uploadStr: "", + currentId:'',//褰撳墠楂樹寒鐨処D }, tableHead: [], tableData: [], @@ -254,6 +347,9 @@ uploadDia: false, token: null, fileList: [], + init: true, + testArr: [], + testPosition: 0, } }, watch: { @@ -269,18 +365,58 @@ mounted() { this.data = this.componentData this.dataCopy = this.HaveJson(this.componentData) - this.selectList() + if(this.data.init===undefined||this.data.init===true){ + this.selectList() + } this.token = { 'token': sessionStorage.getItem('token') } }, methods: { + rowspan(spanArr, position, spanName) { + this.tableData.forEach((item, index) => { + if (index === 0) { + spanArr.push(1); + position = 0; + } else { + if ( + this.tableData[index][spanName] === + this.tableData[index - 1][spanName] + ) { + spanArr[position] += 1; + spanArr.push(0); + } else { + spanArr.push(1); + position = index; + } + } + }); + }, + spanMethod({ row, column, rowIndex, columnIndex }){ + if(this.data.spanConfig!=undefined&&this.data.spanConfig.rows){ + if (columnIndex === this.data.spanConfig.rows.index) { + const _row = this.testArr[rowIndex]; + const _col = _row > 0 ? 1 : 0; + return { + rowspan: _row, + colspan: _col, + }; + } + } + }, selectChange(val) { if (this.data.select) { this.multipleSelection = val; } else { this.multipleSelection = val[val.length - 1]; } + if(this.data.selectMethod!=undefined){ + if(this.$parent.$el.className.indexOf('el-')==0){ + this.$parent.$parent[this.data.selectMethod](val) + }else{ + this.$parent[this.data.selectMethod](val) + } + } }, select(val, row) { if (!this.data.select) { @@ -306,6 +442,12 @@ }, selectList() { this.loading = true + if(this.data.isPage!=undefined&&this.data.isPage!=true){ + this.page = { + current: -1, + size: -1, + } + } this.$axios.post(this.url, { page: this.page, entity: this.data.entity @@ -321,6 +463,20 @@ this.total = res.data.body.total this.tableHead = res.data.head this.tableData = res.data.body.records + for (var a in this.data.selectField) { + if (this.data.selectField[a].choose == true) { + this.tableData.map(b => { + try { + b[a] = JSON.parse(b[a]) + } catch (e) {} + }) + } + } + if(this.data.spanConfig!=undefined&&this.data.spanConfig.rows){ + this.testArr = [] + this.testPosition = 0 + this.rowspan(this.testArr, this.testPosition, this.data.spanConfig.rows.name); + } this.loading = false }).catch(e => { this.loading = false @@ -344,6 +500,10 @@ showType(val, ob) { var str = ob[val] return str == undefined ? null : ob[val].select + }, + showLink(val, ob) { + var str = ob[val] + return str == undefined ? null : ob[val].method }, showAddReq(label) { if (this.data.requiredAdd == undefined) { @@ -372,7 +532,7 @@ 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 @@ -381,7 +541,7 @@ delete this.upData.createUser delete this.upData.updateUser val.field.forEach(a => { - if (this.upData[a] == undefined) { + if (this.upData[a] === undefined) { this.upHead.push({ value: a.split('=')[0], label: a.split('=')[1] @@ -422,7 +582,7 @@ } } else { delete row.orderBy - this.$emit(val.method, row) + this.$parent[val.method](row) } }, saveUpData() { @@ -431,7 +591,7 @@ 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]] == '') { + 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 }) @@ -441,6 +601,11 @@ } } this.upLoad = true + for (var a in this.data.selectField) { + if (this.data.selectField[a].choose == true) { + this.upData[a] = JSON.stringify(this.upData[a]) + } + } this.$axios.post(this.upUrl, this.upData, { headers: { 'Content-Type': 'application/json' @@ -461,7 +626,6 @@ }) }, openAddDia(addUrl) { - console.log(addUrl); this.addDia = true this.addUrl = addUrl this.upData = {} @@ -480,7 +644,7 @@ } } val.field.forEach(a => { - if (JSON.stringify(this.upData[a]) == undefined) { + if (JSON.stringify(this.upData[a]) === undefined) { this.upHead.push({ value: a.split('=')[0], label: a.split('=')[1] @@ -503,7 +667,7 @@ 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]] == '') { + 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 }) @@ -634,13 +798,13 @@ return; } const values = data.map(item => Number(item[column.property])); - if(this.data.countFleid==undefined){ + if (this.data.countFleid == undefined) { sums[index] = '' return } - if (this.data.countFleid.filter(str=>{ - return str === column.property - }).length > 0) { + 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)) { @@ -655,6 +819,20 @@ } }); return sums; + }, + handleLinkEvent(row, val) { + if (val.method == 'doDiy') { + this.main(row, val) + } else { + this.$parent[val.method](row) + } + }, + getWidth() { + let count = 0 + this.data.do.forEach(a => { + count += a.font.length + }) + return count * 15 + 60 + 'px' } } } -- Gitblit v1.9.3