123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- /**
- *@author:Guoxiaohuan
- *@date:2020.05.27
- *@info:图例编辑状态
- */
- <template>
- <div class='view'>
- <div class='legend-tab2'>
- <div class='legend-table2-box'>
- <div class='legend-table2' v-if='tbData1.length>=0'>
- <el-table
- v-loading='loading'
- :header-cell-style='{background:"rgba(2,91,170,0.1)",fontFamily:"PingFangSC-Medium,PingFang SC;",color:"rgba(0,0,0,0.85);",fontSize:"12px"}'
- ref='multipleTable'
- height='430px'
- :data='tbData1'
- tooltip-effect='dark'
- @selection-change='handleSelectionChange'
- >
- <el-table-column prop label='项目' :show-overflow-tooltip='true' width='100'>
- <template slot-scope='{row}'>{{row.Name||'--'}}</template>
- </el-table-column>
- <el-table-column prop label='数量'>
- <template slot-scope='{row}'>
- <div style='width:50px'>
- <el-input @change='changeTable(row)' v-model='row.Num' size='mini'></el-input>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop label='单位' width='60'>
- <template slot-scope='{row}'>{{row.Unit||'--'}}</template>
- </el-table-column>
- <el-table-column prop label='图例'>
- <template slot-scope='{row}'>
- <div v-if='row.Url' class='Url-img'>
- <img :src='`/serve/Picture/query/${row.Url}`' alt />
- </div>
- <div v-else>{{'--'}}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- <!-- <div class='legend-table2' v-if='tbData2.length>0'>
- <el-table ref='multipleTable' height='430px' :data='tbData2' tooltip-effect='dark' @selection-change='handleSelectionChange'>
- <el-table-column prop='project' label='项目' width='100'></el-table-column>
- <el-table-column prop='num' label='数量'>
- <template slot-scope='{row}'>
- <div style='width:50px'>
- <el-input v-model='row.num' size='mini'></el-input>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop='type' label='单位' width='60'></el-table-column>
- <el-table-column prop='lege' label='图例'>
- <template slot-scope='scope'>{{ scope.row.lege }}</template>
- </el-table-column>
- </el-table>
- </div>-->
- <!-- <div class='legend-table2' v-if='tbData3.length>0'>
- <el-table ref='multipleTable' height='430px' :data='tbData3' tooltip-effect='dark' @selection-change='handleSelectionChange'>
- <el-table-column prop='project' label='项目' width='100'></el-table-column>
- <el-table-column prop='num' label='数量'>
- <template slot-scope='{row}'>
- <div style='width:50px'>
- <el-input v-model='row.num' size='mini'></el-input>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop='type' label='单位' width='60'></el-table-column>
- <el-table-column prop='lege' label='图例'>
- <template slot-scope='scope'>{{ scope.row.lege }}</template>
- </el-table-column>
- </el-table>
- </div>-->
- </div>
- <div class='swich'>
- <el-switch v-model='value' @change='witchChange'></el-switch>
- <span>隐藏数量为0的项目</span>
- </div>
- <div class='legendFoot'>
- <el-button size='mini' @click='cancel'>取消</el-button>
- <el-button size='mini' @click='save' type='primary'>保存</el-button>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- props: ['editTable', 'loading'],
- data() {
- return {
- value: false,
- showT: false,
- tbData1: [],
- tbData2: [],
- tbData3: [],
- editNum: []
- }
- },
- methods: {
- handleSelectionChange(val) {
- this.multipleSelection = val
- },
- cancel() {
- this.$emit('cance')
- },
- changeTable(val) {
- this.editNum.push(val)
- var obj = {}
- this.editNum = this.editNum.reduce(function(item, next) {
- obj[next.key] ? '' : (obj[next.key] = true && item.push(next))
- return item
- }, [])
- },
- witchChange(val) {
- console.log(val)
- },
- save() {
- console.log(this.editNum)
- this.$emit('saveNum', this.editNum)
- },
- init() {
- this.tbData1 = []
- this.tbData2 = []
- this.tbData3 = []
- if (this.editTable.length > 0) {
- this.tbData1 = this.editTable
- // 以下不要动 不要删
- // let len = this.tableData.length
- // if (len <= 10) {
- // this.tbData1 = this.tableData
- // } else if (len > 10 && len <= 20) {
- // this.tbData1 = this.tableData.slice(0, 10)
- // this.tbData2 = this.tableData.slice(10, len)
- // } else if (len > 10 && len <= 30) {
- // this.tbData1 = this.tableData.slice(0, 10)
- // this.tbData2 = this.tableData.slice(10, 20)
- // this.tbData3 = this.tableData.slice(20, len)
- // } else {
- // this.tbData1 = this.tableData.slice(0, parseInt(len / 3))
- // this.tbData2 = this.tableData.slice(parseInt(len / 3), parseInt(len / 3) * 2)
- // this.tbData3 = this.tableData.slice(parseInt(len / 3) * 2, len)
- // }
- }
- }
- },
- mounted() {
- // this.init()
- }
- }
- </script>
- <style lang="less" scoped>
- .view {
- position: relative;
- .legend-tab2 {
- position: absolute;
- top: -44px;
- right: 44px;
- height: 535px;
- min-width: 350px;
- width: auto;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
- border-radius: 2px;
- border: 1px solid rgba(228, 229, 231, 1);
- .legend-table2-box {
- display: flex;
- justify-content: flex-end;
- .legend-table2 {
- padding: 16px 10px;
- height: 430px;
- width: 345px;
- }
- }
- }
- .swich {
- position: absolute;
- right: 16px;
- bottom: 56px;
- span {
- margin-left: 8px;
- }
- }
- .Url-img {
- width: 20px;
- height: 22px;
- line-height: 20px;
- img {
- width: 100%;
- height: 100%;
- }
- }
- .legendFoot {
- position: absolute;
- right: 16px;
- bottom: 12px;
- }
- }
- </style>
- <style lang="less">
- .view {
- .el-input--mini .el-input__inner {
- width: 50px;
- }
- .el-input__inner {
- padding: 0 5px;
- }
- .legend-container .el-table td,
- .legend-container .el-table th {
- padding: 6px 0 !important;
- }
- }
- </style>
|