235 lines
10 KiB
Vue
235 lines
10 KiB
Vue
<template>
|
|
<div style="padding: 0 30px;">
|
|
<el-button type="primary" style="position: absolute;right: 20px;z-index: 9999;" @click="formSubmit()">{{readonly ? '编辑' : '保存'}}</el-button>
|
|
<Form ref="formRef" :formList="formList" :ruleFormData="ruleForm" :config="{labelWidth: '140px', buttonGroup: []}" @fnClick="callback">
|
|
<template #tempPoeConfigRules="{ field, model, formModel }">
|
|
<div v-if="!readonly">
|
|
<el-upload
|
|
class="disInlineBlock mr20"
|
|
action=""
|
|
:auto-upload="false"
|
|
:on-change="handleFileUpload"
|
|
accept=".xls, .xlsx, .numbers"
|
|
:show-file-list="false">
|
|
<el-button size="mini" type="primary">导入</el-button>
|
|
</el-upload>
|
|
<!-- <el-button type="primary" size="mini" >导入</el-button>-->
|
|
<el-button type="info" size="mini" @click="downloadTemp">模板下载</el-button>
|
|
<div style="margin-left: -120px">
|
|
<TableList id="tabHeadCenter" ref="tabRef" :columns="columns" :config="config" :queryParams="{total: 0}" :tableList="roleList" @fnClick="callback">
|
|
<template #tempEditModel="{ row, valueKey, column }">
|
|
<el-input-number v-if="column.type === 'number'" v-model="row[valueKey]" class="w100" :controls="false" :min="column.min || undefined" :max="column.max || undefined" size="small" :placeholder="column.placeholder || ''" />
|
|
<el-input v-else v-model="row[valueKey]" class="w100" size="small" :placeholder="column.placeholder" />
|
|
</template>
|
|
</TableList>
|
|
</div>
|
|
</div>
|
|
<div v-else style="margin-left: -120px">
|
|
<TableList ref="tabRef" :columns="columns" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :queryParams="{total: 0}" :tableList="roleList"></TableList>
|
|
</div>
|
|
</template>
|
|
</Form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as XLSX from 'xlsx';
|
|
import Form from '@/components/form/index.vue';
|
|
import TableList from '@/components/table/index.vue';
|
|
export default {
|
|
name: "PPPoEConfig",
|
|
components: {Form, TableList},
|
|
props: {
|
|
modelVal: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
watch: {
|
|
modelVal: {
|
|
handler(val) {
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
ruleForm: {},
|
|
formList: [],
|
|
readonly: true,
|
|
contentList: [{oneNum: '',ipv4Addr: '', ipv4Num: '', ipv4Graw: ''}],
|
|
roleList: [],
|
|
columns: {},
|
|
config: {
|
|
colHiddenCheck: true, colTopHiddenIcon: true,
|
|
tableButton: {
|
|
line: [
|
|
{content: '新增', fnCode: 'add', type: 'text'},
|
|
{content: '删除', fnCode: 'delete', type: 'text', showName: 'showNum', showVal: '1'},
|
|
]
|
|
}
|
|
},
|
|
}
|
|
},
|
|
created() {
|
|
this.fnFormList(this.readonly);
|
|
},
|
|
methods: {
|
|
// formList集合
|
|
fnFormList(readonly) {
|
|
this.formList = [{
|
|
config: {title: '', labelWidth: '140px', readonly: readonly},
|
|
controls: {
|
|
id: {label: 'ID', hidden: true},
|
|
businessName: {label: '启用PPPoE', span: readonly ? 12 : 24, type: 'radio', options: [], required: true},
|
|
deployDevice: {label: 'PPPoE配置方式', span: readonly ? 10 : 24, type: 'select', options: [], required: true},
|
|
deploy: {label: 'PPPoE网卡', span: readonly ? 12 : 24, type: 'select', options: [], required: true},
|
|
deploed: {label: 'PPPoE配置规则', span: 24, slotName: 'tempPoeConfigRules'},
|
|
}
|
|
}];
|
|
this.columns = {
|
|
id: { label: `ID`,width: '50'},
|
|
serialNumber: { label: `序号`, width: '50',visible: true},
|
|
vlanId: { label: `VLANID`, minWidth: '100',visible: true, type: 'number', placeholder: '请输入数字', slotName: readonly ? null : 'tempEditModel'},
|
|
ipv4Address: { label: `IPv4地址`, minWidth: '100',visible: true, placeholder: '如1.1.1.1', slotName: readonly ? null : 'tempEditModel'},
|
|
ipv4MaskBits: { label: `IPv4掩码位数`, minWidth: '100',visible: true, type: 'number', min: 1, max: 32, placeholder: '请输入1-32', slotName: readonly ? null : 'tempEditModel'},
|
|
ipv4Gateway:{ label: `IPv4网关`,minWidth: '100',visible: true, placeholder: '如1.1.1.1', slotName: readonly ? null : 'tempEditModel'},
|
|
bandwidthResult: { label: `虚拟网卡上报带宽(Mbps)`, minWidth: '120', visible: true, placeholder: '请输入', slotName: readonly ? null : 'tempEditModel'},
|
|
macAddress: { label: `MAC地址`, minWidth: '120', visible: readonly},
|
|
status: { label: `连通状态`, minWidth: '100', visible: readonly},
|
|
};
|
|
},
|
|
formSubmit() {
|
|
this.ruleForm = {name: '12'};
|
|
if (!this.readonly) {
|
|
console.log('submit=====',this.roleList,this.ruleForm);
|
|
} else {
|
|
this.roleList = this.roleList.length > 0 ? this.roleList : [{serialNumber: '1', vlanId: undefined, ipv4Address: undefined, ipv4MaskBits: undefined, ipv4Gateway: undefined, bandwidthResult: undefined}];
|
|
}
|
|
this.readonly = !this.readonly;
|
|
this.fnFormList(this.readonly);
|
|
},
|
|
// 监听事件
|
|
callback(result, dataVal, formVal) {
|
|
if (result && result.fnCode) {
|
|
switch (result.fnCode) {
|
|
case 'add':
|
|
this.roleList.push({showNum: '1', serialNumber: this.roleList.length + 1, vlanId: undefined, ipv4Address: undefined, ipv4MaskBits: undefined, ipv4Gateway: undefined, bandwidthResult: undefined});
|
|
break;
|
|
case 'delete':
|
|
console.log('dataVal===',dataVal);
|
|
this.roleList.splice(dataVal.serialNumber - 1, 1);
|
|
case 'submit':
|
|
console.log('contentList===',this.contentList, 'dataVal===',dataVal);
|
|
// this.$emit("dialogResult", {open: false});
|
|
break;
|
|
case 'cancel':
|
|
this.$emit("dialogResult", {open: false});
|
|
break;
|
|
default:
|
|
}
|
|
}
|
|
},
|
|
downloadTemp() {
|
|
this.download('http://172.16.15.51:9300/statics/csvfile/macvlan_vlan.csv', {
|
|
}, `template_${new Date().getTime()}.xlsx`)
|
|
},
|
|
handleFileUpload(file) {
|
|
console.log('file====',file);
|
|
// 如果是使用 Element UI 的 el-upload 组件，文件对象是 file.raw
|
|
const actualFile = file.raw || file; // 兼容两种获取方式[1,3](@ref)
|
|
|
|
if (!actualFile) {
|
|
return;
|
|
}
|
|
|
|
const fileReader = new FileReader();
|
|
|
|
fileReader.onload = (e) => {
|
|
try {
|
|
// 1. 获取读取结果，并将其转换为 Uint8Array
|
|
const data = new Uint8Array(e.target.result);
|
|
// 2. 使用 xlsx 解析数据
|
|
const workbook = XLSX.read(data, { type: 'array' });
|
|
// 3. 获取第一个工作表（Sheet）的名称
|
|
const firstSheetName = workbook.SheetNames[0];
|
|
// 4. 根据工作表名称获取对应的工作表对象
|
|
const worksheet = workbook.Sheets[firstSheetName];
|
|
// 5. 将工作表数据转换为 JSON 格式
|
|
// header: 1 表示按数组格式解析，包含表头；默认按对象格式（第一行为键名）
|
|
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
|
|
// 或者使用对象格式（更常用，第一行作为对象的键）[3,6](@ref)
|
|
// const jsonData = XLSX.utils.sheet_to_json(worksheet);
|
|
|
|
// 6. 将解析后的数据存储在组件的 data 中
|
|
// this.excelData = jsonData;
|
|
console.log('解析到的Excel数据：', jsonData);
|
|
|
|
// 可以在这里调用后续处理方法，如数据校验、发送到后端等
|
|
this.processExcelData(jsonData);
|
|
|
|
} catch (error) {
|
|
console.error('解析Excel文件时出错：', error);
|
|
this.$message.error('文件解析失败，请检查文件格式是否正确。');
|
|
}
|
|
};
|
|
|
|
fileReader.onerror = (error) => {
|
|
console.error('读取文件失败：', error);
|
|
this.$message.error('读取文件失败，请重试。');
|
|
};
|
|
|
|
// 开始以 ArrayBuffer 格式读取文件
|
|
fileReader.readAsArrayBuffer(actualFile);
|
|
},
|
|
processExcelData(data) {
|
|
// 在这里对解析出的数据进行进一步处理
|
|
// 例如：数据清洗、验证、转换格式等[2](@ref)
|
|
if (data.length > 0) {
|
|
let oldDataList = this.oldTableList();
|
|
let arrList = [];
|
|
data.map((item,index) => {
|
|
if (item && item.length > 0) {
|
|
let arr = ['vlanId', 'ipv4Address', 'ipv4MaskBits', 'ipv4Gateway', 'bandwidthResult'];
|
|
let obj = {serialNumber: oldDataList.length + index + 1, showNum: '1'};
|
|
arr.forEach((val, valIndex) => {
|
|
obj[val] = item[valIndex];
|
|
// console.log('val===',val, valIndex);
|
|
// arrList.push(obj);
|
|
});
|
|
// console.log('item===',item, 'obj===', obj);
|
|
}
|
|
});
|
|
// console.log('arrList===',arrList);
|
|
this.roleList = oldDataList.concat(arrList);
|
|
} else {
|
|
this.$message.warning('导入的文件中没有数据。');
|
|
}
|
|
},
|
|
oldTableList() {
|
|
let contentList = [];
|
|
this.roleList.forEach(item => {
|
|
let indexNum = 0;
|
|
Object.keys(item).some(val => {
|
|
if (val !== 'serialNumber' && val !== 'showNum' && item[val]) {
|
|
indexNum = 1;
|
|
return;
|
|
}
|
|
});
|
|
if (indexNum === 1) {
|
|
contentList.push(item);
|
|
}
|
|
});
|
|
return contentList;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
::v-deep #tabHeadCenter .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
|
|
text-align: center!important;
|
|
}
|
|
</style>
|