<template>
<FilterQuery :model="formItem" @formItemChange="formItemChange" @searchClick="searchClick" @resetClick="resetClick" />
<div class="table-btn-group" >
<el-button type="primary" icon="el-icon-plus" size="small" @click="addClick">新增</el-button>
<el-button type="danger" size="small" @click="delClick">批量删除</el-button>
</div>
<el-dialog width="540px" title="新增" :visible.sync="dialogVisible" :close-on-click-modal="false" @close="close()" >
<CommonForm ref="commonForm" :model="formModel" @changeFormItem="changeFormItem" @submitForm="submitForm" @cancel="cancel" />
</el-dialog>
<FHTable
ref="FHTable"
:has-checkbox="true"
:query-table-data="queryTableData"
:query-params="queryParams"
:table-props="tableProps"
list-map-name="smSaasPlatformList"
@handleTableList="handleTableList"
@handleTableClick="handleTableClick"
@handleSelectionChange="handleSelectionChange"
/>
</template>
list: {
handler(val) {
this.tableProps['data'] = this.deepClone(val);
}
}
this.getData();
getData() {
this.formItem = this.deepClone(getFHFormQueryObj());
this.tableProps = this.deepClone(getFHTableProp());
this.queryParams = {'saasId': 'ff5a67337b6611e89feafa163eb3e537', 'userId': '27775e0e494447bf94a5292252262870'};
this.tempQueryParams = this.deepClone(this.queryParams);
this.getTableList();
this.formModel = this.deepClone(getFormDataObj());
},
// 处理table表里面的点击，例如查看详情，或者删除等按钮的事件
queryTableData(queryParams) {
return api_testPage.queryPlatformList({ params: queryParams });
},
// 接口请求回来的数据
handleTableList(list) {
list.forEach(item => {
const operates = [{ type: 'terminalManage', text: '终端管理' }];
if (!item.id.includes('_')) {
const arr = [
{ type: 'edit', text: '编辑' },
{ type: 'relevance', text: '关联机构' },
{ type: 'delete', text: '删除' }
];
item['operates'] = operates.concat(arr);
}
});
this.list = this.deepClone(list);
},
handleTableClick(item) {
const row = item.row || {};
if (item.type === 'delete') {
// 删除
const tempList = this.list.filter(l => l.id !== row.id);
this.list = this.deepClone(tempList);
} else if (item.type === 'terminalManage') {
// 终端管理
} else if (item.type === 'edit') {
// 编辑
this.formModel['form'] = row;
this.dialogVisible = true;
} else if (item.type === 'relevance') {
// 关联机构
}
},
handleSelectionChange(val) {
console.log('handleSelectionChange', val);
this.idArr = val.map(({ id }) => (id));
},
// 表单（新增，编辑）
changeFormItem(formObj) {
this.formModel.form[formObj.prop] = formObj.val;
},
// 新增
addClick() {
this.resetForm();
this.dialogVisible = true;
},
// 删除
delClick() {
this.list = this.list.filter(l => this.idArr.every(id => l.id !== id));
},
// 关闭弹框
close() {
this.dialogVisible = false;
},
// 重置数据
resetForm() {
this.formModel = this.deepClone(getFormDataObj());
this.$nextTick(() => {
// 重置表单数据
if (this.$refs && this.$refs['commonForm']) {
this.$refs['commonForm'].resetFormValidate();
}
});
},
// 取消
cancel() {
this.resetForm();
this.close();
},
// 提交
submitForm() {
this.formModel.form['id'] = `${this.list.length + 1}`;
this.list = [this.formModel.form].concat(this.list);
const tablePropArr = this.tableProps['tableProp'];
const tempArr = tablePropArr.filter(t => t.type === 'htmlType');
this.list.forEach(item => {
tempArr.forEach(t => {
const xssProp = 'xss' + t.prop;
item[xssProp] = item[t.prop] ? brightenKeyword(t.color || '#1677ff', item[t.prop]) : '--';
});
Object.keys(item).forEach(k => { item[k] = item[k] || '--'; });
});
this.handleTableList(this.list);
this.close();
}