<template>
|
<div class="manager-form-container">
|
<div class="button-container-title">按钮设计区</div>
|
<!--按钮设置-->
|
<manager-form-button-group :buttons.sync="data.dataListOptions.buttons" :config-type.sync="currentConfigType" :select.sync="selectWidget"></manager-form-button-group>
|
|
<!--表格设置-->
|
<div class="button-container-title margin-top-5">
|
字段设计区
|
<el-button type="text" size="mini" class="btn-add-all" @click="btnAddAll">全部加入</el-button>
|
<el-button type="text" size="mini" class="btn-add-all" @click="btnClearAll">清空</el-button>
|
</div>
|
<draggable v-model="data.dataListOptions.fields" :options="{group:'people', ghostClass: 'ghost', animation:300, handle:'.handle', chosenClass:'chosen-item'}" tag="ul" class="draggable-main" @end="handleMoveEnd" @add="handleWidgetAdd" @move="handleWidgetStart" @clone="handleWidgetClone">
|
<template v-for="(element, index) in data.dataListOptions.fields">
|
<manager-form-item v-if="element && element.key" :key="element.key" :element="element" :select.sync="selectWidget" :index="index" :fields="data.dataListOptions.fields" :config-type.sync="currentConfigType"></manager-form-item>
|
</template>
|
</draggable>
|
</div>
|
</template>
|
|
<script>
|
import Draggable from "vuedraggable";
|
import ManagerFormItem from "./ManagerFormItem";
|
import ManagerFormButtonGroup from "./ManagerFormButtonGroup";
|
|
export default {
|
components: {
|
Draggable,
|
ManagerFormItem,
|
ManagerFormButtonGroup
|
},
|
props: {
|
data: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
select: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
configType: {
|
type: String,
|
default: null
|
},
|
// 主表字段
|
fieldComponents: {
|
type: Array,
|
default: () => {
|
return [];
|
}
|
}
|
},
|
data() {
|
return {
|
selectWidget: this.select
|
};
|
},
|
computed: {
|
currentConfigType: {
|
get: function() {
|
return this.configType;
|
},
|
set: function(val) {
|
this.$emit("update:configType", val);
|
}
|
}
|
},
|
watch: {
|
select(val) {
|
this.selectWidget = val;
|
},
|
"data.dataListOptions.buttons": {
|
handler(val) {
|
// console.log(JSON.stringify(this.data.dataListOptions.buttons));
|
},
|
deep: true
|
},
|
selectWidget: {
|
handler(val) {
|
this.$emit("update:select", val);
|
},
|
deep: true
|
}
|
},
|
methods: {
|
handleMoveEnd({ newIndex, oldIndex }) {
|
// console.log('index', newIndex, oldIndex)
|
},
|
handleWidgetStart(index) {
|
// console.log(index, '#####')
|
},
|
handleWidgetClone(index) {
|
// console.log(index, '#####')
|
},
|
handleSelectWidget(index) {
|
this.selectWidget = this.data.dataListOptions.fields[index];
|
},
|
handleWidgetAdd(evt) {
|
const newIndex = evt.newIndex;
|
// 为拖拽到容器的元素添加唯一 key
|
const key = Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
|
var field = this.data.dataListOptions.fields[newIndex];
|
this.$set(this.data.dataListOptions.fields, newIndex, {
|
prop: field.options.prop,
|
label: field.label,
|
searchRowNo: field.searchRowNo,
|
dataType: field.options.dataType,
|
sortable: false,
|
type: "input",
|
hidden: false,
|
isQuickSearch: false,
|
key
|
});
|
|
this.selectWidget = this.data.dataListOptions.fields[newIndex];
|
},
|
// 添加全部列表字段
|
btnAddAll() {
|
this.fieldComponents
|
.filter(field => {
|
return (
|
!field.options.prop.endsWith("Id") &&
|
!field.options.prop.endsWith("ID") &&
|
!this.data.dataListOptions.fields.some(item => {
|
return item.prop === field.options.prop;
|
})
|
);
|
})
|
.forEach(field => {
|
const newIndex = this.data.dataListOptions.fields.length;
|
// 为拖拽到容器的元素添加唯一 key
|
const key = Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
|
this.$set(this.data.dataListOptions.fields, newIndex, {
|
prop: field.options.prop,
|
label: field.label,
|
searchRowNo: field.searchRowNo,
|
dataType: field.options.dataType,
|
sortable: false,
|
type: "input",
|
hidden: false,
|
isQuickSearch: false,
|
key
|
});
|
var newField = this.data.dataListOptions.fields[newIndex];
|
switch (newField.dataType) {
|
case "datetime":
|
newField.width = 120;
|
break;
|
}
|
if (newField.prop.endsWith("Code")) {
|
newField.width = 120;
|
}
|
});
|
|
// 选中第一个
|
this.currentConfigType = "ManagerConfig";
|
this.selectWidget = this.data.dataListOptions.fields[0];
|
},
|
// 清空全部列表字段
|
btnClearAll() {
|
this.$confirm("确定要全部列表字段, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.data.dataListOptions.fields = [];
|
this.selectWidget = null;
|
this.$message.error("清空完毕");
|
})
|
.catch(() => {
|
this.$message.info("已取消");
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.btn-add-all {
|
padding: 2px 0px 2px 10px;
|
}
|
</style>
|
