<template>
|
<el-form-item v-if="element && element.key" :class="{active: selectWidget && selectWidget.key === element.key, 'is_req': element.options.required,'no-margin':element.options.noMargin}" class="widget-view" @click.native.stop="handleSelectWidget(index)">
|
<component :is="element.type"></component>
|
|
<el-button v-if="selectWidget && selectWidget.key === element.key" title="删除" class="widget-action-delete" circle plain type="danger" @click.stop="handleWidgetDelete(index)">
|
<i class="el-icon-yrt-shanchu2"></i>
|
</el-button>
|
<el-button v-if="selectWidget && selectWidget.key === element.key" title="复制" class="widget-action-clone" circle plain type="primary" @click.stop="handleWidgetClone(index)">
|
<i class="el-icon-yrt-fuzhi4"></i>
|
</el-button>
|
|
</el-form-item>
|
</template>
|
|
<script>
|
import FmUpload from "./Upload";
|
import Tinymce from "@/components/Tinymce";
|
import WmsStat from "@/views/dashboard/wms/wms-stat";
|
import WmsRingStat from "@/views/dashboard/wms/wms-ring-stat";
|
import WmsMonthStat from "@/views/dashboard/wms/wms-month-stat";
|
import WmsEverydayStat from "@/views/dashboard/wms/wms-everyday-stat";
|
import WmsStorageArea from "@/views/dashboard/wms/wms-storageArea";
|
|
import WaybillStat from "@/views/dashboard/tms/waybill-stat";
|
import WaybillreceiveStat from "@/views/dashboard/tms/waybillreceive-stat";
|
import WaybillMonthStat from "@/views/dashboard/tms/waybill-month-stat";
|
import WaybillEverydayStat from "@/views/dashboard/tms/waybill-everyday-stat";
|
|
export default {
|
components: {
|
FmUpload,
|
Tinymce,
|
|
WmsStat,
|
WmsRingStat,
|
WmsMonthStat,
|
WmsEverydayStat,
|
WmsStorageArea,
|
|
WaybillStat,
|
WaybillreceiveStat,
|
WaybillMonthStat,
|
WaybillEverydayStat
|
},
|
props: {
|
element: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
select: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
index: {
|
type: Number,
|
default: null
|
},
|
fields: {
|
type: Array,
|
default: () => {
|
return {};
|
}
|
},
|
configType: {
|
type: String,
|
default: null
|
}
|
},
|
data() {
|
return {
|
selectWidget: this.select
|
};
|
},
|
watch: {
|
select(val) {
|
this.selectWidget = val;
|
},
|
selectWidget: {
|
handler(val) {
|
this.$emit("update:select", val);
|
},
|
deep: true
|
}
|
},
|
methods: {
|
handleSelectWidget(index) {
|
this.selectWidget = this.fields[index];
|
this.$emit("update:configType", "WidgetConfig");
|
},
|
handleWidgetDelete(index) {
|
if (this.fields.length - 1 === index) {
|
if (index === 0) {
|
this.selectWidget = {};
|
} else {
|
this.selectWidget = this.fields[index - 1];
|
}
|
} else {
|
this.selectWidget = this.fields[index + 1];
|
}
|
|
this.$nextTick(() => {
|
this.fields.splice(index, 1);
|
});
|
},
|
handleWidgetClone(index) {
|
let cloneData = {
|
...this.fields[index],
|
options: { ...this.fields[index].options },
|
key: Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999)
|
};
|
|
if (this.fields[index].type === "radio" || this.fields[index].type === "checkbox") {
|
cloneData = {
|
...cloneData,
|
options: {
|
...cloneData.options,
|
options: cloneData.options.options.map(item => ({ ...item }))
|
}
|
};
|
}
|
|
this.fields.splice(index, 0, cloneData);
|
|
this.$nextTick(() => {
|
this.selectWidget = this.fields[index + 1];
|
});
|
}
|
}
|
};
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
.widget-view {
|
div.el-input:not(.no-bg) {
|
/deep/ input.el-input__inner[readonly] {
|
background-color: #f5f7fa;
|
cursor: not-allowed;
|
}
|
}
|
}
|
</style>
|
