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.
147 lines
4.1 KiB
147 lines
4.1 KiB
<script>
|
|
export default {
|
|
name: "transferTable",
|
|
props: {
|
|
dataList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
modelList: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
model:{
|
|
prop: "modelList",
|
|
event: "change"
|
|
},
|
|
data(){
|
|
return{
|
|
searchModel: {
|
|
itemNo: "",
|
|
itemDesc: ""
|
|
},
|
|
searchTableList: [],
|
|
dataTableList: []
|
|
}
|
|
},
|
|
methods:{
|
|
handleSearch(){
|
|
this.$emit("search", this.searchModel)
|
|
},
|
|
handleAdd(){
|
|
if (this.searchTableList.length === 0){
|
|
this.$message.warning("请选择需要新增的属性")
|
|
return
|
|
}
|
|
let params = JSON.parse(JSON.stringify(this.searchModel))
|
|
params.searchTableList = JSON.parse(JSON.stringify(this.searchTableList))
|
|
this.$emit("add",params)
|
|
},
|
|
handleDelete() {
|
|
if (this.dataTableList.length === 0){
|
|
this.$message.warning("请选择需要删除的属性")
|
|
return
|
|
}
|
|
let params = JSON.parse(JSON.stringify(this.searchModel))
|
|
params.dataTableList = JSON.parse(JSON.stringify(this.dataTableList))
|
|
this.$emit("delete",params)
|
|
},
|
|
handleRowClick(row, column, event, table) {
|
|
this.$refs[table].toggleRowSelection(row)
|
|
},
|
|
handleSelectionChange(selection, table) {
|
|
this[`${table}List`] = selection
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<el-form :model="searchModel" label-position="top" :inline="true">
|
|
<el-form-item label="属性编码">
|
|
<el-input v-model="searchModel.itemNo"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="属性名称">
|
|
<el-input v-model="searchModel.itemDesc"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label=" ">
|
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-row :gutter="20">
|
|
<!--表格1-->
|
|
<el-col :span="11">
|
|
<span style="font-size: 12px">可选属性：</span>
|
|
<el-table
|
|
height="400px"
|
|
:data="dataList"
|
|
ref="searchTable"
|
|
@selection-change="(selection)=>handleSelectionChange(selection,'searchTable')"
|
|
@row-click="(row,column,event)=>handleRowClick(row,column,event,'searchTable')"
|
|
border>
|
|
<el-table-column
|
|
type="selection"
|
|
header-align="center"
|
|
align="center"
|
|
width="50">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="itemNo"
|
|
header-align="center"
|
|
align="left"
|
|
label="属性编码">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="itemDesc"
|
|
header-align="center"
|
|
align="left"
|
|
label="属性名称">
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-col>
|
|
<!--按钮-->
|
|
<el-col :span="2">
|
|
<div style="text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 400px">
|
|
<div><el-button type="primary" @click="handleAdd">新增<i class="el-icon-d-arrow-right el-icon--right"></i></el-button></div>
|
|
<div><el-button type="primary" @click="handleDelete" icon="el-icon-d-arrow-left" style="margin-top: 10px">删除</el-button></div>
|
|
</div>
|
|
</el-col>
|
|
<!--表格2-->
|
|
<el-col :span="11">
|
|
<span style="font-size: 12px">已有属性：</span>
|
|
<el-table
|
|
height="400px"
|
|
:data="modelList"
|
|
ref="dataTable"
|
|
@selection-change="(selection)=>handleSelectionChange(selection,'dataTable')"
|
|
@row-click="(row,column,event)=>handleRowClick(row,column,event,'dataTable')"
|
|
border>
|
|
<el-table-column
|
|
type="selection"
|
|
header-align="center"
|
|
align="center"
|
|
width="50">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="itemNo"
|
|
header-align="center"
|
|
align="left"
|
|
label="属性编码">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="itemDesc"
|
|
header-align="center"
|
|
align="left"
|
|
label="属性名称">
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|