<!--國家地區聯動表格-->
<template>
<div class="register-info-table address-table" style="margin-top:10px;">
<el-collapse v-model="taskcollapse" class="taskcollapse">
<el-collapse-item :title="object.title" name="1">
<el-row class="mytabs" style="padding:10px;">
<el-col :span="24">
<el-table
class="system-table"
:data="objectValue[object.id]"
border
fit
width="100%"
@row-click="clickRow"
>
<el-table-column
v-for="(item,index) in object.objDefault"
:key="index"
:show-overflow-tooltip="true"
:class-name="tableRequiredFn(object,item)&&item.required?item.id+' is-required common-table':'removeFormerror'"
>
<template slot="header" slot-scope="scope">
<span class="table-header-required" v-if="tableRequiredFn(object,item)&&item.required">*</span>
{{item.name}}
</template>
<template slot-scope="scope">
<template v-if="itemXtype(item,scope.row)== 'select'">
<el-select v-if="item.class=='country'"
:disabled="!edit||item.disabled"
filterable
v-model="scope.row[item.id]"
:placeholder="'請選擇'"
@change="(query)=>selectChangeFn(query,item,scope.row)"
class="address-select ">
<el-option
v-for="ele in item.selectDetail"
:key="'a'+ele.value"
:label="ele.display"
:value="ele.value">
</el-option>
</el-select>
<el-select
v-else-if="item.class=='province'"
:disabled="!edit||item.disabled"
filterable
v-model="scope.row[item.id]"
:placeholder="'請選擇'"
@change="(query)=>selectChangeFn(query,item,scope.row)"
@visible-change="(query)=>getProvinceFn(item,scope.row,scope.$index,query)"
class="address-select ">
<el-option
v-for="ele in province"
:key="'b'+ele.id"
:label="ele.name"
:value="ele.name">
</el-option>
</el-select>
<el-select v-else
:disabled="!edit||item.disabled"
filterable
v-model="scope.row[item.id]"
:placeholder="'請選擇'"
@change="(query)=>selectChangeFn(query,item,scope.row)"
@visible-change="(query)=>getCityFn(item,scope.row,scope.$index,query)"
class="address-select ">
<el-option
v-for="ele in city"
:key="'c'+ele.id"
:label="ele.name"
:value="ele.name">
</el-option>
</el-select>
</template>
<template v-else>
<span v-if="scope.row[item.id]||edit"
:class="{'is-required':tableRequiredFn(object,item)&&item.required}">
<el-input
v-if="edit"
v-model="scope.row[item.id]"
:disabled="!edit||item.disabled"
:placeholder="edit||!item.disabled?'請輸入':'——'">
</el-input>
<span v-else>
<span :class="{'gray-bar':!scope.row[item.id]}">{{scope.row[item.id]||'——'}}</span>
</span>
</span>
<span v-else class="gray-bar">——</span>
</template>
</template>
</el-table-column>
<el-table-column label="操作" width="90" v-if="edit">
<template slot-scope="scope">
<el-button
@click="addRow(scope.$index)"
icon="el-icon-plus"
type="text"
:disabled="!edit"
></el-button>
<el-button
:disabled="!edit||objectValue[object.id].length<=1"
@click.native.prevent="deleteRow(scope.$index,scope.row)"
icon="el-icon-minus"
type="text"
></el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
taskcollapse: ["1"],
// addressId:[],
province:[],
city:[],
};
},
props: {
object: Object,
objectValue: Object
},
created() {
},
mounted() {
this.init()
},
watch: {
/*'objectValue.state':{//頁面加載
handler(val){
var scope=this
let tableData = this.objectValue[this.object.id]||[]
if(tableData.length&&this.addressId.length){
tableData.forEach(ele=>{
scope.changeXtype(ele[scope.addressId[0]],ele,ele[scope.addressId[0]],'load')
})
}
},deep:true
}*/
},
computed: {
edit() {
return this.$store.state.edit;
},
addressData(){
return this.$store.state.regionalCascade;
},
country(){
return this.$store.state.countryData;
},
addressId(){
let val=[];
this.object.objDefault&&this.object.objDefault.forEach(item=>{
val.push(item.id)
});
return val
}
},
methods: {
itemXtype(item,row){
if(item.class=='country') return 'select'
else{
if(row[this.addressId[0]]=='CN'&&(item.class=='province'||item.class=='city')){
return 'select'
}else{
return 'input'
}
}
},
init(){
//this.object = require(`@/scene/RegisterPotentialSupplier/config/registerTable.js`);//父組件傳過來
if(!this.objectValue[this.object.id]){
this.$set(this.objectValue,this.object.id,[{}]);
}
let tableData = this.objectValue[this.object.id]||[]
if(tableData.length&&this.addressId.length){//初始化加載
tableData.forEach(ele=>{
this.changeXtype(ele[this.addressId[0]],ele,ele[this.addressId[0]],'load')
})
}
},
getCityFn(row,data,index,val){
let obj = []
if(data[this.addressId[0]]=='CN'&&val){
this.addressData.forEach(item=>{
if(item.name==data[this.addressId[1]]){
obj=item.children||[]
}
})
}
this.city = obj;
},
getProvinceFn(row,data,index,val){
let obj = []
if(data[this.addressId[0]]=='CN'&&val){
this.province = this.addressData
}else{
this.province = [];
if(!val&&this.oldProvince!=data[this.addressId[1]]) {
this.oldProvince=data[this.addressId[1]];
this.$set(data,this.addressId[2],'')
}
}
this.city = obj;
},
selectChangeFn(val,item,row){
if(item.class=='country'){
if(val=='CN') {
this.changeXtype(val,row,'CN')
}
else {
this.$set(row,this.addressId[1],'')
this.$set(row,this.addressId[2],'')
this.changeXtype(val,row,'other')
}
}
},
changeXtype(val,row,type,load){
this.object.objDefault&&this.object.objDefault.forEach((item,index)=>{
if(index){
if(item.class!='street'){
if(type=='CN'){
this.$set(item,'xtype','select')
}else{
this.$set(item,'xtype','input')
}
}
if(!load) {
this.$set(row,item.id,'')
}
}
})
},
tableRequiredFn(object, item) {
//表格根據分類是否必填
if (this.commander && this.commander.tableRequiredFn) {
return this.commander.tableRequiredFn(object,item,this.objectValue,this);
} else return true;
},
// 添加
addRow(index) {
if (!this.objectValue[this.object.id]) {
this.$set(this.objectValue, this.object.id, []);
} else {
this.objectValue[this.object.id].push({});
}
},
// 刪除
deleteRow(index, row) {
if (this.objectValue[this.object.id].length === 1) {
this.$message({
message: "只有一條數據時，不能刪除！",
type: "warning"
});
return;
} else {
this.objectValue[this.object.id].splice(index, 1);
}
},
clickRow(row) {
this.nowRow = this.objectValue[this.object.id].indexOf(row);
}
}
};
</script>
<style lang="less">
.address-table {
.el-button,
.el-button--medium {
min-width: 0;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #fff !important;
}
.removeFormerror {
.formerror {
border-color: transparent !important;
}
}
.el-select .el-input.is-disabled input{
padding-left:0!important;
}
.address-select{
width: 100%;
}
}
</style>
===================object.js================
module.exports = [ // 註冊地址
{
"id": "registeredCountry",
"defaultValue": null,
"disabled": false,
"link": false,
"links": [],
"name":"國家&地區",
"class":'country',
"placeholder": "",
"vivoNotWrite":true,
"required": true,
"selectDetail": [],
"show": false,
"sort": false,
"span": 24,
"width":"180",
"value": null,
"xtype": "select"
},
{
"id": "registeredProvince",
"defaultValue": null,
"disabled": false,
"link": false,
"links": [],
"name":"省",
"placeholder": "省",
"class":'province',
"vivoNotWrite":true,
"required": true,
"selectDetail": [],
"show": false,
"sort": false,
"span": 24,
"width":"180",
"value": null,
"xtype": "input"
},
{
"id": "registeredCity",
"defaultValue": null,
"disabled": false,
"link": false,
"links": [],
"name":"市",
"placeholder": "市",
"class":'city',
"vivoNotWrite":true,
"required": true,
"selectDetail": [],
"show": false,
"sort": false,
"span": 24,
"width":"180",
"value": null,
"xtype": "input"
},
{
"id": "registeredDetailAddress",
"defaultValue": null,
"disabled": false,
"link": false,
"links": [],
"name":"詳細地址",
"placeholder": "詳細地址",
"class":'street',
"vivoNotWrite":true,
"required": true,
"selectDetail": [],
"show": false,
"sort": false,
"span": 24,
"width":"180",
"value": null,
"xtype": "input"
},
]
![]()
