You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
322 lines
8.4 KiB
322 lines
8.4 KiB
1 year ago
|
<template>
|
||
|
|
<div class="currenTableFlex">
|
||
|
|
<div class="headerButtons">
|
||
|
|
<el-button
|
||
|
|
type="primary"
|
||
|
|
v-if="showAddBtn"
|
||
|
|
@click="flexOpenAddNew"
|
||
|
|
icon="el-icon-plus"
|
||
|
|
size="mini"
|
||
|
|
>添加一行</el-button>
|
||
|
|
<slot name="headerBtns"></slot>
|
||
|
|
</div>
|
||
|
|
<!-- todo:多选处理【selectionTable】 -->
|
||
|
|
<umyTable
|
||
|
|
:isEditable="isEditable"
|
||
|
|
class="flexTable"
|
||
|
|
:tableData="flexTableData"
|
||
|
|
:searchOptions="flexSearchOptions"
|
||
|
|
:tableColumns="flexTableColumns"
|
||
|
|
:selectionTable="selectionTable"
|
||
|
|
:isShowIndex="isShowIndex"
|
||
|
|
:setUTableHeight="setUTableHeight"
|
||
|
|
@push="detailsDataPush(arguments)"
|
||
|
|
>
|
||
|
|
<template v-if="showAllDeleteButton">
|
||
|
|
<el-table-column
|
||
|
|
label="操作"
|
||
|
|
align="center"
|
||
|
|
fixed="right"
|
||
|
|
width="100px"
|
||
|
|
>
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div
|
||
|
|
v-if="!scope.row.hide"
|
||
|
|
class="childTable"
|
||
|
|
@click="flexRowRemove($event, scope)"
|
||
|
|
>
|
||
|
|
<span style="color:red">删除</span>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</template>
|
||
|
|
</umyTable>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import currenTable from "@/components/currenTable"
|
||
|
|
import { mixins } from "@/mixins/mixins"
|
||
|
|
export default {
|
||
|
|
name: 'currenTableFlex',
|
||
|
|
components: {
|
||
|
|
currenTable
|
||
|
|
},
|
||
|
|
mixins: [
|
||
|
|
mixins,
|
||
|
|
],
|
||
|
|
filters: {
|
||
|
|
// formData (val) {
|
||
|
|
// let data = JSON.parse(JSON.stringify(val))
|
||
|
|
// val.forEach((key, index) => {
|
||
|
|
// data[index].disabled = "true"
|
||
|
|
// delete data[index].focus
|
||
|
|
// if (key.type == "autocomplete" || key.type == "import") {
|
||
|
|
// data[index].type = "input"
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
// return data
|
||
|
|
// },
|
||
|
|
// formDataDetails (val) {
|
||
|
|
// let data = JSON.parse(JSON.stringify(val))
|
||
|
|
// val.forEach((key, index) => {
|
||
|
|
// data[index].disabled = true
|
||
|
|
// delete data[index].focus
|
||
|
|
// delete data[index].rules
|
||
|
|
// if (key.type == "autocomplete" || key.type == "import") {
|
||
|
|
// delete data[index].type
|
||
|
|
// } else if (key.type == "objectAutocomplete") {
|
||
|
|
// data[index].type = "object"
|
||
|
|
// } else if (key.prop == "containerCode" && key.type == "input") {
|
||
|
|
// data[index].disabled = false
|
||
|
|
// } else if (key.isChange) {
|
||
|
|
// // 针对第三步预览特殊情况处理
|
||
|
|
// data[index].disabled = false
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
// return data
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
// table内表单数据是否可编辑
|
||
|
|
isEditable:{
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
// 已app-main高度为100% 需要减掉的高度
|
||
|
|
setUTableHeight: {
|
||
|
|
type: Number,
|
||
|
|
default: () => {
|
||
|
|
return 280;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 是否显示添加一行按钮
|
||
|
|
showAddBtn:{
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
// 是否显示删除按钮（控制全部列）
|
||
|
|
showAllDeleteButton:{
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
// 是否禁止编辑行（控制全部行）
|
||
|
|
disableAllRow:{
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
flexTableData: {
|
||
|
|
type: Array,
|
||
|
|
default: () => {
|
||
|
|
return [];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
flexSearchOptions: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
flexTableColumns: {
|
||
|
|
type: Array,
|
||
|
|
default: () => {
|
||
|
|
return [];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
// 是否显示多选
|
||
|
|
selectionTable: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
// 是否显示序号列
|
||
|
|
isShowIndex: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
//名称
|
||
|
|
// formTitle: {
|
||
|
|
// type: String,
|
||
|
|
// default: ''
|
||
|
|
// },
|
||
|
|
// //是否弹窗
|
||
|
|
// displayDialog: {
|
||
|
|
// type: Object,
|
||
|
|
// default: () => {
|
||
|
|
// return {
|
||
|
|
// newDialog: false
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// //主表提交数据
|
||
|
|
// CreateFormData: {
|
||
|
|
// type: Object,
|
||
|
|
// default: () => {
|
||
|
|
// return {}
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// //主表显示form
|
||
|
|
// CreateForm: {
|
||
|
|
// type: Array,
|
||
|
|
// default: () => {
|
||
|
|
// return []
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// //预览数据
|
||
|
|
// previewFormData: {
|
||
|
|
// type: Object,
|
||
|
|
// default: () => {
|
||
|
|
// return {}
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// Rules: {
|
||
|
|
// type: Object,
|
||
|
|
// default: () => {
|
||
|
|
// return {}
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// //下拉选择
|
||
|
|
// Options: {
|
||
|
|
// type: Object,
|
||
|
|
// default: () => {
|
||
|
|
// return {}
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// //子表table显示
|
||
|
|
// detailsTableColumns: {
|
||
|
|
// type: Array,
|
||
|
|
// default: () => {
|
||
|
|
// return []
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// //子表提交数据
|
||
|
|
// childTableData: {
|
||
|
|
// type: Array,
|
||
|
|
// default: () => {
|
||
|
|
// return []
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// //成功后的操作
|
||
|
|
// successHandle: {
|
||
|
|
// type: Array,
|
||
|
|
// default: () => {
|
||
|
|
// return []
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// //步骤标题
|
||
|
|
// stepArray: {
|
||
|
|
// type: Array,
|
||
|
|
// default: () => {
|
||
|
|
// return ["总体信息", "明细", "预览", "结果"]
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// //添加一行
|
||
|
|
// addClickButton: {
|
||
|
|
// type: Boolean,
|
||
|
|
// default: () => {
|
||
|
|
// return true
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// //删除行记录
|
||
|
|
// isShowDeleteButton: {
|
||
|
|
// type: Boolean,
|
||
|
|
// default: () => {
|
||
|
|
// return true
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// // 隐藏第一步骤的取消按钮
|
||
|
|
// isHideFirstActiveCancel:{
|
||
|
|
// type: Boolean,
|
||
|
|
// default: () => {
|
||
|
|
// return false
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// // 预览视图显示删除按钮
|
||
|
|
// showPreviewFormDeleteButton:{
|
||
|
|
// type: Boolean,
|
||
|
|
// default: () => {
|
||
|
|
// return false
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
// 添加一行的空置
|
||
|
|
addEmptyRow:null,
|
||
|
|
// active: 0,
|
||
|
|
// formReveal: 1,
|
||
|
|
// activeStep: 1,
|
||
|
|
// pageStatus: '',
|
||
|
|
// addClick: this.addClickButton,//添加一行按钮
|
||
|
|
// showDeleteButton: this.isShowDeleteButton,//操作-删除按钮
|
||
|
|
// hideFirstActiveCancel:this.isHideFirstActiveCancel,// 隐藏第一步骤的取消按钮
|
||
|
|
// loading: false,
|
||
|
|
// session: null,
|
||
|
|
// step: this.stepArray,
|
||
|
|
// editHandle: [
|
||
|
|
// { label: "取消", name: "cancel" },
|
||
|
|
// { label: "下一步", type: "primary", name: "determine" },
|
||
|
|
// ],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
// this.session = JSON.parse(JSON.stringify(this.CreateFormData))
|
||
|
|
// if(this.hideFirstActiveCancel){
|
||
|
|
// this.editHandle=[
|
||
|
|
// { label: "下一步", type: "primary", name: "determine" },
|
||
|
|
// ];
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//添加行
|
||
|
|
flexOpenAddNew() {
|
||
|
|
let _oneRow = Object.assign({}, this.flexTableData[0])
|
||
|
|
for(let key in _oneRow){
|
||
|
|
_oneRow[key] = null
|
||
|
|
}
|
||
|
|
this.flexTableData.push(_oneRow)
|
||
|
|
// if(this.flexTableData.length <= 0)return
|
||
|
|
// if(!this.addEmptyRow){
|
||
|
|
// let _oneRow = Object.assign({}, this.flexTableData[0])
|
||
|
|
// for(let key in _oneRow){
|
||
|
|
// _oneRow[key] = null
|
||
|
|
// }
|
||
|
|
// this.addEmptyRow = _oneRow
|
||
|
|
// this.addEmptyRow['disabled']=false
|
||
|
|
// }
|
||
|
|
// this.flexTableData.push(this.addEmptyRow)
|
||
|
|
},
|
||
|
|
//删除行
|
||
|
|
flexRowRemove(e, val) {
|
||
|
|
this.$confirm('您确定删除吗, 是否继续?', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning'
|
||
|
|
}).then(() => {
|
||
|
|
this.flexTableData.splice(val.$index, 1)
|
||
|
|
}).catch(() => {
|
||
|
|
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//点击selection框
|
||
|
|
handleSelectionChange(val) {
|
||
|
|
this.$emit("handleSelectionChange", val);
|
||
|
|
},
|
||
|
|
// //autoComplete子表
|
||
|
|
detailsDataPush (val) {
|
||
|
|
this.$emit("detailsDataPush", val)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import "./style/index.scss";
|
||
|
|
</style>
|