TableRowEdit.vue
<template>
<div>
<ux-grid
ref="tableEdit"
:data="tableData"
tooltip-effect="dark"
show-overflow="tooltip"
:cell-style="{'text-align':'center'}"
:row-class-name="tableRowClassName"
:max-height="tableConfig.height"
style="width: 100%">
<ux-table-column
v-if="isShow.isSelection"
type="checkbox"
width="40">
</ux-table-column>
<ux-table-column
type="index"
label="序号"
style="min-width: 80px;max-width:120px;"
width="60"
v-if="isShow.isIndex">
</ux-table-column>
<ux-table-column
v-for="(e, i) in columns"
:key="i"
:resizable="true"
header-align="center"
:field="e.fieldCode"
:title="e.fieldName"
min-width="140"
>
<!-- :filters="[{ data: '' }, { data: '' }]"
:filter-method="filterAgeMethod" -->
<template slot="header" slot-scope="scope">
<div>{{ e.fieldName }}<i v-if="e.isSelect||e.isInput" class="el-icon-edit"></i></div>
</template>
<!-- 选择器 -->
<template v-slot="scope" v-if="e.isSelect">
<div v-if="scope.row.index==tableCli">
<el-select
v-model="scope.row[e.fieldCode]"
>
<el-option
v-for="item in e.SelectList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<span v-else>{{ getType(e.SelectList,scope.row[e.fieldCode]) }}</span>
</template>
<!-- 选择器仅显示 -->
<template v-slot="scope" v-else-if="e.isSelectShowEnum">
<span v-for="(item,index) in e.SelectList" :key ="index" >{{scope.row[e.fieldCode]==item.enumCode?item.enumValue : ''}}</span>
</template>
<!-- 输入框 -->
<template v-slot="scope" v-else-if="e.isInput">
<div v-if="scope.row.index==tableCli">
<el-input v-model="scope.row[e.fieldCode]"></el-input>
</div>
<span v-else>{{scope.row[e.fieldCode]}}</span>
</template>
<!-- 禁止编辑 -->
<template v-slot="scope" v-else>
<span>{{scope.row[e.fieldCode]}}</span>
</template>
<!-- 筛选 -->
<!--column.filters就是去渲染的这个东西:filters="[{ data: '' }]，然后v-model绑定到了这个data属性啦-->
<!-- <template v-slot:filter="{ $panel, column }">
<el-input type="type"
v-for="(option, index) in column.filters"
:key="index"
v-model="option.data"
@input="$panel.changeOption($event, option.data, option)"/>
</template> -->
</ux-table-column>
<ux-table-column
fixed="right"
title="操作"
v-if="isShow.isShowButton"
header-align="center"
min-width="150">
<template slot-scope="scope">
<!-- 编辑按钮 -->
<el-button
v-if="isShow.buttonEdit&&scope.row.index!==tableCli"
type="text"
@click="editButton(scope.row,scope)"
:icon="isShow.iconEdit?isShow.iconEdit:'el-icon-edit'"
size="small"
>
{{ isShow.editTxt }}
</el-button>
<el-button type="text" v-if="scope.row.index==tableCli" @click="saveButton(scope.row,scope)" size="small">保存</el-button>
<el-button type="text" v-if="scope.row.index==tableCli" size="small" @click="cancelEdit(scope.row,scope)">取消</el-button>
<!-- 删除按钮 -->
<el-button
v-if="isShow.buttonDelete&&scope.row.index!==tableCli"
type="text"
@click="deleteButton(scope.row,scope)"
:icon="isShow.iconDelete?isShow.iconDelete:'el-icon-delete'"
size="small"
>
{{ isShow.deleteTxt }}
</el-button>
</template>
</ux-table-column>
</ux-grid>
<el-pagination
v-if="setPage.isPagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="setPage.currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="setPage.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="setPage.total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableCli:-1,
oldRow:{},//行的原始数据
// 自适应高度
tableConfig:{
isLoading:true,
height:window.innerHeight-190
},
}
},
props:{
// table 表格显示高度
tableHeight:{
type:Number,
default:() => {
return 190
}
},
// 表头
columns:{
type:Array,
default:() => {
return []
}
},
// 表格
tableData:{
type:Array,
default:() => {
return []
}
},
// 页码的设置
setPage:{
type:Object,
default:() => {
return {
isPagination:false,//是否显示
currentPage:1,//当前页码
pageSize:100, // 当前页的数量
total:0, // 总量
}
}
},
// 是否显示
isShow:{
type:Object,
default:() => {
return {
}
}
},
},
created(){
// 初始化开始监听自适应高度数据
window.addEventListener("resize",this.getHeigth)
},
destroyed(){
// 销毁高度自适应监听
window.removeEventListener("resize",this.getHeigth)
},
watch:{
tableHeight: {
handler(newVal, oldVal) {
this.tableConfig.height = window.innerHeight - newVal
},
deep: true,
immediate: true
}
},
methods:{
// 此方法用于区分是否点击的是当前行
tableRowClassName({row,rowIndex}){
row.index=rowIndex
},
// 点击编辑事件
editButton(row,index){
this.oldRow = JSON.parse(JSON.stringify(row))
this.tableCli=index.$rowIndex
},
// 行编辑保存事件
saveButton(row,index){
this.$emit("saveButton",row,index)
},
// 取消编辑
cancelEdit(row,index){
this.tableCli = -1
if(index){
let rowIndex =index.$rowIndex;
this.$set(this.tableData,rowIndex,this.oldRow)
}
},
// 行删除事件
deleteButton(row,index){
this.$emit("deleteButton",row,index)
},
// 转换格式
getType(data,val) {
const item = data.filter(item => item['value'] === val)[0]
return item ? item.label : ''
},
// 自适应高度
getHeigth(){
// this.tableConfig.height = window.innerHeight - 170
this.tableConfig.height = window.innerHeight - this.tableHeight
},
// 每页的数量
handleSizeChange(val) {
this.$emit("handleSizeChange",val)
},
// 当前页码
handleCurrentChange(val) {
this.$emit("handleCurrentChange",val)
}
}
}
</script>
使用TableRowEdit.md
<template>
<div>
<!--
* 行编辑操作
-->
<TableRowEdit
ref="TableRowEdit"
:isStandard="true"
:columns="columns"
:tableData="tableData"
:isShow="isShowLabel"
:setPage="setPage"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
@saveButton="saveButton"
/>
</div>
</template>
<script>
import TableRowEdit from "@/components/Table/TableRowEdit.vue"
import {getHeaderApi,getEnumList} from '@/api/systemManage'
import { careerQuery ,careerUpdate,comMainRules } from '@/api/MoldManage'
export default {
name:'moldInfo',
data() {
return {
columns:null,
tableData:[],
isShowLabel:{
isSelection:false,// 选择框
isIndex:true,// 索引
isShowButton:true,// 行操作栏
buttonEdit:true,//编辑按钮
iconSave:"el-icon-folder-checked",// 保存icon
saveTxt:"保存",// 保存文字
},
setPage:{
isPagination:true, // 是否显示分页
currentPage:1, // 当前页数
pageSize:100, // 每页数量
total:0, // 总条数
},
MoldTypeList:[],//模具类别
}
},
created(){
this.getMainRules()
},
mounted() {
this.getEnum()
},
components:{
TableRowEdit,
},
methods:{
// 查询按钮
getLabelRecord(formData){
// 查询条件的记录
if(formData){
this.stagCondition = formData
}
let formdata = new FormData;
formdata.append("pageNum",this.setPage.currentPage)
formdata.append("pageSize",this.setPage.pageSize)
formdata.append("moldNo",this.stagCondition.moldNo||"")
careerQuery(formdata).then(res=>{
if(res.data.code === 'Y'){
this.tableData = res.data.data.list
this.setPage.total = res.data.data.total //总条数
this.setPage.currentPage = res.data.data.pageNum //当前页
}else{
this.$messages.errorOpen(res.data.data.message||res.data.message)
}
}).catch(err=>{
console.log(err)
})
},
// 每页的数量
handleSizeChange(val){
this.setPage.pageSize = val
this.getLabelRecord()
},
// 当前页码
handleCurrentChange(val){
this.setPage.currentPage = val
this.getLabelRecord()
},
// 行保存
saveButton(row){
careerUpdate(row).then(res=>{
if(res.data.code ==="Y"){
this.$messages.successOpen(res.data.message)
this.$refs.TableRowEdit.cancelEdit()
}else{
this.$messages.errorOpen(res.data.message);
}
}).catch(err=>{
console.log(err)
})
},
// 获取表头
getColumns(){
let parameter = new FormData
parameter.append("tables",["mes_mold_resume"])
getHeaderApi(parameter).then(res=>{
if(res.data.code ==="Y"){
this.columns = res.data.data.mes_mold_resume
this.columns.map(item=>{
if(item.fieldCode == 'currentMoldTime' || item.fieldCode == 'handoverLife'||
item.fieldCode == 'designedLife' || item.fieldCode == 'moldLocation'){ // 累计生产模次
item['isInput'] = true
}else if( item.fieldCode == 'maintainTypeCode'){ // 保养类型 - 选择器可编辑
item['isSelect'] = true
item['SelectList'] = this.listMainRules
}
else if( item.fieldCode == 'moldType'){ //模具类别 - 选择器仅显示
item['isSelectShowEnum'] = true
item['SelectList'] = this.MoldTypeList
}
return item
})
}else{
this.TipsTitle("表头请求失败，请刷新")
}
}).catch(err=>{
console.log(err)
})
},
// 获取枚举
getEnum(){
// 模具类别
let parameter = new FormData
parameter.append("enumType",'MoldType')
getEnumList(parameter).then(res=>{
this.MoldTypeList = res.data.data
}).catch(err=>{
console.log(err)
})
},
// 获取保养规则
getMainRules(){
comMainRules().then(res=>{
if(res.data.code ==="Y"){
let ArrayList = []
const newMap = new Map();
ArrayList= res.data.data.filter((item) => !newMap.has(item["maintainTypeCode"]) && newMap.set(item["maintainTypeCode"], 1));
this.listMainRules = ArrayList.map(e=>{
e['value'] = e.maintainTypeCode
e['label'] = e.maintainType
return e
})
this.getColumns()
}else{
this.$messages.errorOpen(res.data.message||res.data.message)
}
}).catch(err=>{
console.log(err)
})
},
},
}
</script>
<style lang="less" scoped>
</style>
