|
<template>
|
<el-dialog v-dialogDrag :visible.sync="currentDialogVisible" :top="common.getDialogTop()" title="扫描字段设置" class="dialog-container" width="780px">
|
<el-alert :closable="false" title="列宽不填将自适应，排序数字越小排在前面" type="success" class="alert-msg">
|
</el-alert>
|
<el-table ref="filterTable" :data="currentFields" style="width: 100%" height="400">
|
<el-table-column prop="prop" label="英文名" sortable header-align="center">
|
</el-table-column>
|
<el-table-column prop="label" label="字段名" header-align="center">
|
</el-table-column>
|
<el-table-column prop="width" label="列宽" width="120" header-align="center">
|
<template slot-scope="scope">
|
<el-input v-model.number="scope.row.width" placeholder="请输入宽度" class="w-100pc" @change="(val)=>{fiedChange(scope.row, val)}"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="order" label="排序" width="120" header-align="center">
|
<template slot-scope="scope">
|
<el-input v-model.number="scope.row.order" placeholder="排序号" class="w-100pc" @change="(val)=>{fiedChange(scope.row, val)}"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="visible" label="显示" width="100" align="center">
|
<template slot-scope="scope">
|
<el-switch v-model="scope.row.visible" @change="(val)=>{fiedChange(scope.row, val)}">
|
</el-switch>
|
</template>
|
</el-table-column>
|
</el-table>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="currentDialogVisible = false">取 消</el-button>
|
<el-button type="primary" icon="el-icon-delete" @click="cancel">还原默认</el-button>
|
<el-button :loading="isLoading" type="primary" icon="el-icon-yrt-daochu1" @click="save">保存</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
// 是否显示
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
// 名称
|
name: {
|
type: String,
|
required: true
|
},
|
// 字段数据
|
fields: {
|
type: Array,
|
default: () => {
|
return [];
|
}
|
}
|
},
|
data() {
|
return {
|
// 当前选中菜单下的导出模板列表
|
vueDataList: [],
|
// 当前选中模板
|
currentTemplate: {},
|
isLoading: false
|
};
|
},
|
computed: {
|
// 显示窗口
|
currentDialogVisible: {
|
get: function() {
|
return this.visible;
|
},
|
set: function(val) {
|
this.$emit("update:visible", val);
|
}
|
},
|
currentFields: {
|
get: function() {
|
const _fields = JSON.parse(JSON.stringify(this.fields));
|
return _fields.sort(function(a, b) {
|
if (a.order > b.order) {
|
return 1;
|
} else if (a.order === b.order) {
|
return 0;
|
} else {
|
return -1;
|
}
|
});
|
}
|
}
|
},
|
watch: {},
|
methods: {
|
fiedChange(newRow, val) {
|
const row = this.fields.find(item => {
|
return item.prop === newRow.prop;
|
});
|
if (row) {
|
row.width = newRow.width;
|
row.order = newRow.order;
|
row.visible = newRow.visible;
|
}
|
this.$emit("field-change", newRow, val);
|
},
|
cancel() {
|
localStorage.removeItem(this.name + "-setting");
|
this.$message.success("取消成功");
|
this.currentDialogVisible = false;
|
},
|
save() {
|
const _fields = JSON.stringify(this.fields);
|
localStorage[this.name + "-setting"] = _fields;
|
this.$message.success("保存成功");
|
this.currentDialogVisible = false;
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.dialog-container {
|
/deep/ .el-dialog__body {
|
padding: 0px 20px;
|
}
|
}
|
</style>
|
