| | |
| | | .handleBtn.is-disabled{ |
| | | color: #C0C4CC; |
| | | } |
| | | |
| | | </style> |
| | | <style> |
| | | /* .value-table .highlight-warning-row-border td { |
| | |
| | | .handleBtn.is-disabled .el-upload:focus{ |
| | | color: #C0C4CC !important; |
| | | } |
| | | |
| | | .avatar-uploader .el-upload{ |
| | | height: 80px; |
| | | display: flex; |
| | |
| | | <template> |
| | | <div class="value-table"> |
| | | <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 |
| | | <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" :row-class-name="tableRowClassName" |
| | | :row-key="record=>record.id" :current-row-key="data.currentId" |
| | | :highlight-current-row="data.highlight===undefined||data.highlight" |
| | | :summary-method="getSummaries" :row-class-name="tableRowClassName" :row-key="record=>record.id" |
| | | :current-row-key="data.currentId" :highlight-current-row="data.highlight===undefined||data.highlight" |
| | | :span-method="spanMethod"> |
| | | <el-table-column type="selection" width="65" v-if="data.showSelect" :key="Math.random()"> |
| | | </el-table-column> |
| | |
| | | <!-- 可操作行进行点击事件 --> |
| | | <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> |
| | | <img style="width: 40px;height: 40px;margin-top: 10px;" :src="javaApi+'/img/'+scope.row[a.label]" v-else-if="showUpload(a.label)&&scope.row[a.label]" alt=""> |
| | | <span v-else-if="showCascader(a.label)&&scope.row[a.label]">{{handleTree(data.cascaderField[a.label].tree,scope.row[a.label].split(',')[scope.row[a.label].split(',').length-1])}}</span> |
| | | <img style="width: 40px;height: 40px;margin-top: 10px;" :src="javaApi+'/img/'+scope.row[a.label]" |
| | | v-else-if="showUpload(a.label)&&scope.row[a.label]" alt=""> |
| | | <span v-else>{{scope.row[a.label]}}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <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)" class="handleBtn"> |
| | | :disabled="a.disabFun ? a.disabFun(scope.row,scope.$index) : false" @click="main(scope.row, a)" |
| | | class="handleBtn"> |
| | | <span v-if="a.type!='upload'">{{a.font}}</span> |
| | | <el-upload |
| | | :action="javaApi+a.uploadConfig.url+'?id='+scope.row.id" |
| | | v-else |
| | | :disabled="a.disabFun ? a.disabFun(scope.row,scope.$index) : false" |
| | | :on-success="handleSuccessUp" |
| | | :show-file-list="false" |
| | | :headers="token" |
| | | name="file" |
| | | :accept='a.uploadConfig.accept' |
| | | :on-error="onError" |
| | | ref='upload' |
| | | style="background: transparent;"> |
| | | <el-upload :action="javaApi+a.uploadConfig.url+'?id='+scope.row.id" v-else |
| | | :disabled="a.disabFun ? a.disabFun(scope.row,scope.$index) : false" :on-success="handleSuccessUp" |
| | | :show-file-list="false" :headers="token" name="file" :accept='a.uploadConfig.accept' :on-error="onError" |
| | | ref='upload' style="background: transparent;"> |
| | | <span>{{a.font}}</span> |
| | | </el-upload> |
| | | </el-button> |
| | |
| | | :total="total" > |
| | | </el-pagination> |
| | | </div> |
| | | <el-dialog title="编辑" :visible.sync="upDia" :width="data.row==1?'500px':500+data.row * 200 + 'px'"> |
| | | <el-dialog title="编辑" :visible.sync="upDia" :width="data.row==1?'500px':500+data.row * 200 + 'px'" append-to-body> |
| | | <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> |
| | | <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&&!showUpload(a.label)&&!showCascader(a.label)" :disabled="isDisabled(a.label)"></el-input> |
| | | v-if="showType(a.label, data.selectField) == null&&!showUpload(a.label)&&!showCascader(a.label)" |
| | | :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 filterable> |
| | |
| | | :label="b.label"> |
| | | </el-option> |
| | | </el-select> |
| | | <el-upload |
| | | :action="javaApi+data.addUploadConfig.url" |
| | | v-if="showUpload(a.label)" |
| | | :on-success="m=>handleSuccessUp(m, a.label)" |
| | | :show-file-list="false" |
| | | :headers="token" |
| | | name="file" |
| | | :multiple="false" |
| | | :accept='data.addUploadConfig.accept' |
| | | :on-error="onError" |
| | | ref='upload' |
| | | <el-upload :action="javaApi+data.addUploadConfig.url" v-if="showUpload(a.label)" |
| | | :on-success="m=>handleSuccessUp(m, a.label)" :show-file-list="false" :headers="token" name="file" |
| | | :multiple="false" :accept='data.addUploadConfig.accept' :on-error="onError" ref='upload' |
| | | class="avatar-uploader" |
| | | style="background: transparent;width: 80px;height: 80px;border: 1px solid #DCDFE6;border-radius: 6px;margin: 10px 0;"> |
| | | <img v-if="upData[a.label]" :src="javaApi+'/img/'+upData[a.label]" class="avatar" style="width: 80px;height: 80px;border-radius: 6px;"> |
| | | <img v-if="upData[a.label]" :src="javaApi+'/img/'+upData[a.label]" class="avatar" |
| | | style="width: 80px;height: 80px;border-radius: 6px;"> |
| | | <i v-else class="el-icon-plus avatar-uploader-icon"></i> |
| | | </el-upload> |
| | | <el-cascader |
| | | :value="upData[a.label]" |
| | | :options="data.cascaderField[a.label].tree" |
| | | v-if="showCascader(a.label)" |
| | | :show-all-levels="false" |
| | | clearable |
| | | :props="data.cascaderField.props" |
| | | size="small" |
| | | style="width: 100%;" |
| | | @change="m=>handleCascader(m,a.label)"></el-cascader> |
| | | <el-cascader :value="upData[a.label]" :options="data.cascaderField[a.label].tree" |
| | | v-if="showCascader(a.label)" :placeholder="`请选择${a.value}`" clearable |
| | | :props="data.cascaderField.props" size="small" style="width: 100%;" |
| | | @change="m=>handleCascader(m,a.label)" filterable></el-cascader> |
| | | </el-col> |
| | | </div> |
| | | </div> |
| | |
| | | </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&&!showUpload(a.label)&&!showCascader(a.label)" :disabled="isDisabled(a.label)"></el-input> |
| | | v-if="showType(a.label, data.selectField) == null&&!showUpload(a.label)&&!showCascader(a.label)" |
| | | :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 filterable> |
| | | <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-upload |
| | | :action="javaApi+data.addUploadConfig.url" |
| | | v-if="showUpload(a.label)" |
| | | :multiple="false" |
| | | :on-success="m=>handleSuccessUp(m, a.label)" |
| | | :show-file-list="false" |
| | | :headers="token" |
| | | name="file" |
| | | :accept='data.addUploadConfig.accept' |
| | | :on-error="onError" |
| | | ref='upload' |
| | | class="avatar-uploader" |
| | | <el-upload :action="javaApi+data.addUploadConfig.url" v-if="showUpload(a.label)" :multiple="false" |
| | | :on-success="m=>handleSuccessUp(m, a.label)" :show-file-list="false" :headers="token" name="file" |
| | | :accept='data.addUploadConfig.accept' :on-error="onError" ref='upload' class="avatar-uploader" |
| | | style="background: transparent;width: 80px;height: 80px;border: 1px solid #DCDFE6;border-radius: 6px;margin: 10px 0;"> |
| | | <img v-if="upData[a.label]" :src="javaApi+'/img/'+upData[a.label]" class="avatar" style="width: 80px;height: 80px;border-radius: 6px;"> |
| | | <img v-if="upData[a.label]" :src="javaApi+'/img/'+upData[a.label]" class="avatar" |
| | | style="width: 80px;height: 80px;border-radius: 6px;"> |
| | | <i v-else class="el-icon-plus avatar-uploader-icon"></i> |
| | | </el-upload> |
| | | <el-cascader :value="upData[a.label]" :options="data.cascaderField[a.label].tree" :show-all-levels="false" v-if="showCascader(a.label)" clearable :props="data.cascaderField.props" size="small" style="width: 100%;" @change="m=>handleCascader(m,a.label)"></el-cascader> |
| | | <el-cascader :value="upData[a.label]" :options="data.cascaderField[a.label].tree" :show-all-levels="false" |
| | | :placeholder="`请选择${a.value}`" v-if="showCascader(a.label)" clearable :props="data.cascaderField.props" |
| | | size="small" style="width: 100%;" @change="m=>handleCascader(m,a.label)" filterable></el-cascader> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | |
| | | <el-button type="primary" @click="saveUpData" :loading="upLoad">确 定</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | <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-dialog title="新增" :visible.sync="addDia" :width="data.row==1?'500px':500+data.row * 200 + 'px'" append-to-body> |
| | | <div class="body" v-if="addDia" 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;"><span class="required-span" |
| | |
| | | <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-upload |
| | | :action="javaApi+data.addUploadConfig.url" |
| | | v-if="showUpload(a.label)" |
| | | :on-success="m=>handleSuccessUp(m, a.label)" |
| | | :show-file-list="false" |
| | | :headers="token" |
| | | :multiple="false" |
| | | name="file" |
| | | :accept='data.addUploadConfig.accept' |
| | | :on-error="onError" |
| | | ref='upload' |
| | | <el-upload :action="javaApi+data.addUploadConfig.url" v-if="showUpload(a.label)" |
| | | :on-success="m=>handleSuccessUp(m, a.label)" :show-file-list="false" :headers="token" :multiple="false" |
| | | name="file" :accept='data.addUploadConfig.accept' :on-error="onError" ref='upload' |
| | | class="avatar-uploader" |
| | | style="background: transparent;width: 80px;height: 80px;border: 1px solid #DCDFE6;border-radius: 6px;margin: 10px 0;"> |
| | | <img v-if="upData[a.label]" :src="javaApi+'/img/'+upData[a.label]" class="avatar" style="width: 80px;height: 80px;border-radius: 6px;"> |
| | | <img v-if="upData[a.label]" :src="javaApi+'/img/'+upData[a.label]" class="avatar" |
| | | style="width: 80px;height: 80px;border-radius: 6px;"> |
| | | <i v-else class="el-icon-plus avatar-uploader-icon"></i> |
| | | </el-upload> |
| | | <el-cascader :options="data.cascaderField[a.label].tree" v-if="showCascader(a.label)" clearable :props="data.cascaderField.props" size="small" style="width: 100%;" :show-all-levels="false" @change="m=>handleCascader(m,a.label)"></el-cascader> |
| | | <el-cascader :options="data.cascaderField[a.label].tree" v-if="showCascader(a.label)" clearable |
| | | :placeholder="`请选择${a.value}`" :props="data.cascaderField.props" size="small" style="width: 100%;" |
| | | @change="m=>handleCascader(m,a.label)" filterable></el-cascader> |
| | | </el-col> |
| | | </div> |
| | | </div> |
| | |
| | | <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-upload |
| | | :action="javaApi+data.addUploadConfig.url" |
| | | v-if="showUpload(a.label)" |
| | | :on-success="m=>handleSuccessUp(m, a.label)" |
| | | :show-file-list="false" |
| | | :headers="token" |
| | | name="file" |
| | | :multiple="false" |
| | | :accept='data.addUploadConfig.accept' |
| | | :on-error="onError" |
| | | ref='upload' |
| | | <el-upload :action="javaApi+data.addUploadConfig.url" v-if="showUpload(a.label)" |
| | | :on-success="m=>handleSuccessUp(m, a.label)" :show-file-list="false" :headers="token" name="file" |
| | | :multiple="false" :accept='data.addUploadConfig.accept' :on-error="onError" ref='upload' |
| | | class="avatar-uploader" |
| | | style="background: transparent;width: 80px;height: 80px;border: 1px solid #DCDFE6;border-radius: 6px;margin: 10px 0;"> |
| | | <img v-if="upData[a.label]" :src="javaApi+'/img/'+upData[a.label]" class="avatar" style="width: 80px;height: 80px;border-radius: 6px;"> |
| | | <img v-if="upData[a.label]" :src="javaApi+'/img/'+upData[a.label]" class="avatar" |
| | | style="width: 80px;height: 80px;border-radius: 6px;"> |
| | | <i v-else class="el-icon-plus avatar-uploader-icon"></i> |
| | | </el-upload> |
| | | <el-cascader :options="data.cascaderField[a.label].tree" v-if="showCascader(a.label)" clearable :props="data.cascaderField.props" size="small" style="width: 100%;" :show-all-levels="false" @change="m=>handleCascader(m,a.label)"></el-cascader> |
| | | <el-cascader :options="data.cascaderField[a.label].tree" v-if="showCascader(a.label)" clearable |
| | | :placeholder="`请选择${a.value}`" :props="data.cascaderField.props" size="small" style="width: 100%;" |
| | | @change="m=>handleCascader(m,a.label)" filterable></el-cascader> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | |
| | | import { |
| | | Page |
| | | } from 'iview'; |
| | | import { data } from 'jquery'; |
| | | import { |
| | | data |
| | | } from 'jquery'; |
| | | export default { |
| | | props: { |
| | | tableRowClassName: { |
| | |
| | | // position:0 |
| | | // } |
| | | ], |
| | | param: {} |
| | | } |
| | | }, |
| | | watch: { |
| | |
| | | }) |
| | | } |
| | | }, |
| | | }, |
| | | beforeUpdate() { |
| | | this.$nextTick(() => { |
| | | this.$refs.eltable.doLayout() |
| | | }) |
| | | }, |
| | | mounted() { |
| | | this.data = this.componentData |
| | |
| | | } |
| | | }); |
| | | }, |
| | | spanMethod({ row, column, rowIndex, columnIndex }){ |
| | | spanMethod({ |
| | | row, |
| | | column, |
| | | rowIndex, |
| | | columnIndex |
| | | }) { |
| | | // 一般的合并行 |
| | | if(this.data.spanConfig!=undefined&&this.data.spanConfig.rows&&this.data.spanConfig.rows.length>0){ |
| | | let i = null; |
| | |
| | | } |
| | | } |
| | | // 特殊的合并行 |
| | | if(this.data.spanConfig!=undefined&&this.data.spanConfig.special&&this.data.spanConfig.special.main&&this.data.spanConfig.special.rows&&this.data.spanConfig.special.rows.length>0){ |
| | | if (this.data.spanConfig != undefined && this.data.spanConfig.special && this.data.spanConfig.special.main && |
| | | this.data.spanConfig.special.rows && this.data.spanConfig.special.rows.length > 0) { |
| | | let i = null; |
| | | let obj = this.data.spanConfig.special.rows.find((item,index)=>{ |
| | | i = index; |
| | |
| | | } |
| | | } |
| | | // 一般的合并行 |
| | | if(this.data.spanConfig!=undefined&&this.data.spanConfig.rows&&this.data.spanConfig.rows.length>0){ |
| | | if (this.data.spanConfig != undefined && this.data.spanConfig.rows && this.data.spanConfig.rows.length > |
| | | 0) { |
| | | this.spanList = []; |
| | | this.data.spanConfig.rows.forEach((item,index)=>{ |
| | | this.spanList.push({ |
| | |
| | | }) |
| | | } |
| | | // 特殊的合并行 |
| | | if(this.data.spanConfig!=undefined&&this.data.spanConfig.special&&this.data.spanConfig.special.main&&this.data.spanConfig.special.rows&&this.data.spanConfig.special.rows.length>0){ |
| | | if (this.data.spanConfig != undefined && this.data.spanConfig.special && this.data.spanConfig.special |
| | | .main && this.data.spanConfig.special.rows && this.data.spanConfig.special.rows.length > 0) { |
| | | this.specialSpanList = [] |
| | | this.data.spanConfig.special.rows.forEach((item,index)=>{ |
| | | this.specialSpanList.push({ |
| | | arr:[], |
| | | position:0 |
| | | }) |
| | | this.rowspan(this.specialSpanList[index].arr, this.specialSpanList[index].position, this.data.spanConfig.special.main); |
| | | this.rowspan(this.specialSpanList[index].arr, this.specialSpanList[index].position, this.data |
| | | .spanConfig.special.main); |
| | | }) |
| | | } |
| | | this.loading = false |
| | |
| | | this.upHead.forEach((item,index)=>{ |
| | | if(this.data.cascaderField&&this.data.cascaderField[item.label]){ |
| | | if(this.upData[item.label]){ |
| | | this.upData[item.label] = this.upData[item.label].split(',').map(m=>Number(m)); |
| | | this.upData[item.label] = JSON.parse(this.upData[item.label]) |
| | | }else{ |
| | | this.upData[item.label] = [] |
| | | } |
| | |
| | | this.upHead.forEach((item,index)=>{ |
| | | if(this.data.cascaderField&&this.data.cascaderField[item.label]){ |
| | | if(this.upData[item.label]){ |
| | | this.upData[item.label] = this.upData[item.label].join(','); |
| | | this.upData[item.label] = JSON.stringify(this.upData[item.label]) |
| | | }else{ |
| | | this.upData[item.label] = '' |
| | | } |
| | |
| | | this.upLoad = false |
| | | }) |
| | | }, |
| | | openAddDia(addUrl) { |
| | | openAddDia(addUrl, param) { |
| | | this.addDia = true |
| | | this.addUrl = addUrl |
| | | this.param = param |
| | | this.upData = {} |
| | | this.tableHead.forEach((k, v) => { |
| | | if (k.label != 'orderBy' && k.label != 'createTime' && k.label != 'updateTime' && k.label != |
| | |
| | | this.upHead.forEach((item,index)=>{ |
| | | if(this.data.cascaderField&&this.data.cascaderField[item.label]){ |
| | | if(this.upData[item.label]){ |
| | | this.upData[item.label] = this.upData[item.label].join(','); |
| | | this.upData[item.label] = JSON.stringify(this.upData[item.label]) |
| | | }else{ |
| | | this.upData[item.label] = '' |
| | | } |
| | | } |
| | | }) |
| | | if (this.param !== undefined && this.param !== null) { |
| | | for (let i in this.param) { |
| | | this.upData[i] = this.param[i] |
| | | } |
| | | } |
| | | this.$axios.post(this.addUrl, this.upData, { |
| | | headers: { |
| | | 'Content-Type': 'application/json' |