@kre-form/ant
Version:
767 lines • 123 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Output, EventEmitter, } from "@angular/core";
import { FormGroup } from "@angular/forms";
import { clone, KreFormCommonService, } from "@kre-form/core";
import { NzModalService } from "ng-zorro-antd/modal";
import { NzMessageService } from "ng-zorro-antd/message";
import * as _ from "lodash";
import { KreFormAntService } from "../../tools/service";
import { KreDialogService } from "../../service/dialog.service";
import { DataService } from "../../service/data.service";
import { KreAntCommonService } from "../../tools/commonService";
import { KreTransferService } from "../../tools/transferService";
import { KreDesginToFormService } from "../../tools/tableFieldService";
import { KreFormDSField } from "../field/index.component";
import { KreFormDSFieldLabel } from "../field-label/index.component";
import { KreFormDesignTable } from "../table/table.component";
import { KreFormDesignTables } from "../tables/table.component";
var KreFormDesignDetail = /** @class */ (function () {
function KreFormDesignDetail(message, modalService, kreFormAntService, kreDialogService, dataService, kreAntCommonService, kreTransferService, kreDesginToFormService, kreFormCommonService) {
this.message = message;
this.modalService = modalService;
this.kreFormAntService = kreFormAntService;
this.kreDialogService = kreDialogService;
this.dataService = dataService;
this.kreAntCommonService = kreAntCommonService;
this.kreTransferService = kreTransferService;
this.kreDesginToFormService = kreDesginToFormService;
this.kreFormCommonService = kreFormCommonService;
this.formCode = "";
this.layout = true;
this.api = {
tables: { url: "assets/mockData/business.json" },
form: { url: "assets/mockData/formInfo.json" },
};
this.saveEvent = new EventEmitter();
this.cancelEvent = new EventEmitter();
this.previewEvent = new EventEmitter();
this.pageStatus = 1;
this.form_model = {};
this.form_group = new FormGroup({});
this.form_fields = [];
this.kreFormInfo = {};
this.business_tables = {
primary: {},
child: { single: [], multiple: [] },
};
this.layout_column = "layout-column-3";
this.layout_row = "layout-row-1";
this.table_Data = [];
}
/**
* @return {?}
*/
KreFormDesignDetail.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.kreFormAntService.btnEvent.subscribe((/**
* @param {?} res
* @return {?}
*/
function (res) {
switch (res["type"]) {
case "delete":
_this.modalService.confirm({
nzTitle: "提示",
nzContent: "您确定要删除选中的字段？",
nzOnOk: (/**
* @return {?}
*/
function () {
_this.groupBtnDeleteFields(res["field"]);
}),
});
break;
case "up":
case "down":
_this.groupBtnMoveUpOrDown(res["field"], res["type"]);
break;
case "item":
_this.groupBtnTableFields(res["field"]);
break;
case "remark":
case "line":
_this.groupBtnAddLineRemark(res["field"], res["type"]);
break;
default:
break;
}
}));
this.kreFormAntService.fieldEvent.subscribe((/**
* @param {?} res
* @return {?}
*/
function (res) {
/** @type {?} */
var sign = res["sign"];
if (sign == "edit") {
_this.editFormFieldConfig(res["field"]);
}
else if (sign == "delete") {
_this.modalService.confirm({
nzTitle: "提示",
nzContent: "您确定要删除该字段？",
nzOnOk: (/**
* @return {?}
*/
function () {
_this.deleteFormFieldConfig(res["field"]);
}),
});
}
}));
};
/**
* @param {?} changes
* @return {?}
*/
KreFormDesignDetail.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes.formCode) {
this.initTablesInfo();
}
};
/**
* @return {?}
*/
KreFormDesignDetail.prototype.ngOnDestroy = /**
* @return {?}
*/
function () { };
/*按钮区域---begin*/
/*按钮区域---begin*/
/**
* @return {?}
*/
KreFormDesignDetail.prototype.btnSave = /*按钮区域---begin*/
/**
* @return {?}
*/
function () {
this.kreFormInfo.fields = clone(this.form_fields);
if (this.kreFormInfo.fields !== null &&
this.kreFormInfo.fields !== undefined) {
this.kreFormCommonService.initFormFieldProperty(this.kreFormInfo.fields);
}
this.saveEvent.emit(JSON.stringify(this.kreFormInfo));
};
/**
* @return {?}
*/
KreFormDesignDetail.prototype.btnCancel = /**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
KreFormDesignDetail.prototype.btnPreview = /**
* @return {?}
*/
function () {
this.kreFormInfo.fields = clone(this.form_fields);
if (this.kreFormInfo.fields !== null &&
this.kreFormInfo.fields !== undefined) {
this.kreFormCommonService.initFormFieldProperty(this.kreFormInfo.fields);
}
this.previewEvent.emit(JSON.stringify(this.kreFormInfo));
};
/**
* @return {?}
*/
KreFormDesignDetail.prototype.btnDelete = /**
* @return {?}
*/
function () {
var _this = this;
this.modalService.confirm({
nzTitle: "提示",
nzContent: "您确定要删除选中的字段？",
nzOnOk: (/**
* @return {?}
*/
function () {
_this.getCheckFields().forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
_this.form_fields.forEach((/**
* @param {?} field
* @param {?} index
* @param {?} object
* @return {?}
*/
function (field, index, object) {
if (field.key === item.field.key &&
_.get(field, "templateOptions.isButintin") != true) {
object.splice(index, 1);
}
}));
}));
_this.initTableFieldStatus();
}),
});
};
/**
* @return {?}
*/
KreFormDesignDetail.prototype.btnMoveUp = /**
* @return {?}
*/
function () {
var _this = this;
this.getCheckFields().forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
if (item.index > 0) {
_this.form_fields.splice(item.index, 1);
_this.form_fields.splice(item.index - 1, 0, item.field);
}
}));
};
/**
* @return {?}
*/
KreFormDesignDetail.prototype.btnMoveDown = /**
* @return {?}
*/
function () {
var _this = this;
this.getCheckFields()
.reverse()
.forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
if (item.index < _this.form_fields.length - 1) {
_this.form_fields.splice(item.index, 1);
_this.form_fields.splice(item.index + 1, 0, item.field);
}
}));
};
/**
* @return {?}
*/
KreFormDesignDetail.prototype.btnAddFields = /**
* @return {?}
*/
function () {
this.selectTableFields();
};
/**
* @return {?}
*/
KreFormDesignDetail.prototype.btnAddRemark = /**
* @return {?}
*/
function () {
this.kreTransferService.transferLabelToForm(this.form_fields, this.getCheckFields());
};
/**
* @return {?}
*/
KreFormDesignDetail.prototype.btnAddLine = /**
* @return {?}
*/
function () {
this.kreTransferService.transferLineToForm(this.form_fields, this.getCheckFields());
};
/**
* @return {?}
*/
KreFormDesignDetail.prototype.btnAddGroup = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var tablecode = this.getTableMultipleCode();
if (tablecode == null || tablecode == "") {
this.message.warning("当前业务表没有相关联的多表单记录，故不能添加多记录区域！");
return;
}
if (this.business_tables &&
this.business_tables.child &&
this.business_tables.child.multiple &&
this.business_tables.child.multiple.length > 0) {
if (this.business_tables.child.multiple.some((/**
* @param {?} item
* @return {?}
*/
function (item) {
return item.tableQuote !== true;
}))) {
this.kreDialogService.CreateModelDialog({
nzTitle: "编辑",
size: "large",
nzContent: KreFormDesignTables,
}, { businessTable: this.business_tables, tableType: "single" }, (/**
* @param {?} instance
* @param {?} modal
* @return {?}
*/
function (instance, modal) {
modal.destroy();
_this.kreTransferService.transferGroupToForm(_this.form_fields, _this.getCheckFields(), instance.radioValue);
_this.initTableFieldStatus();
}));
}
}
};
/**
* @param {?} type
* @return {?}
*/
KreFormDesignDetail.prototype.btnColumn = /**
* @param {?} type
* @return {?}
*/
function (type) {
this.kreFormInfo.column = "layout-column-" + type;
this.layout_column = this.kreFormInfo.column;
};
/**
* @param {?} type
* @return {?}
*/
KreFormDesignDetail.prototype.btnRow = /**
* @param {?} type
* @return {?}
*/
function (type) {
this.kreFormInfo.row = "layout-row-" + type;
this.layout_row = this.kreFormInfo.row;
};
/**
* @return {?}
*/
KreFormDesignDetail.prototype.getCheckFields = /**
* @return {?}
*/
function () {
/** @type {?} */
var checkedField = [];
this.form_fields.forEach((/**
* @param {?} item
* @param {?} index
* @return {?}
*/
function (item, index) {
if (item.checked) {
checkedField.push({ index: index, field: item });
}
}));
return checkedField;
};
/*按钮区域---end*/
/*按钮区域---end*/
/**
* @param {?} groupField
* @param {?} type
* @return {?}
*/
KreFormDesignDetail.prototype.groupBtnMoveUpOrDown = /*按钮区域---end*/
/**
* @param {?} groupField
* @param {?} type
* @return {?}
*/
function (groupField, type) {
if (!_.get(groupField, "fieldArray.fieldGroup") ||
_.get(groupField, "fieldArray.fieldGroup").length < 1) {
groupField.fieldArray = {
fieldGroup: [],
};
}
/** @type {?} */
var res = this.kreTransferService.groupFieldMoveUpOrDown(this.form_fields, groupField, type);
if (res != null) {
this.form_fields = res;
if (groupField.key !== null && groupField.key !== undefined) {
this.form_model[groupField.key] = [{}];
}
}
};
/**
* @param {?} groupField
* @param {?} type
* @return {?}
*/
KreFormDesignDetail.prototype.groupBtnAddLineRemark = /**
* @param {?} groupField
* @param {?} type
* @return {?}
*/
function (groupField, type) {
if (!_.get(groupField, "fieldArray.fieldGroup") ||
_.get(groupField, "fieldArray.fieldGroup").length < 1) {
groupField.fieldArray = {
fieldGroup: [],
};
}
/** @type {?} */
var res = null;
if (type === "line") {
res = this.kreTransferService.groupTransferLineToForm(this.form_fields, groupField);
}
else if (type === "remark") {
res = this.kreTransferService.groupTransferRemarkToForm(this.form_fields, groupField);
}
if (res != null) {
this.form_fields = res;
if (groupField.key !== null && groupField.key !== undefined) {
this.form_model[groupField.key] = [{}];
}
}
};
/**
* @param {?} groupField
* @return {?}
*/
KreFormDesignDetail.prototype.groupBtnTableFields = /**
* @param {?} groupField
* @return {?}
*/
function (groupField) {
var _this = this;
this.kreDialogService.CreateModelDialog({
nzTitle: "编辑",
size: "large",
nzContent: KreFormDesignTable,
}, {
businessTable: this.business_tables,
tableType: "multiple",
fieldConfig: groupField,
}, (/**
* @param {?} instance
* @param {?} modal
* @return {?}
*/
function (instance, modal) {
modal.destroy();
/** @type {?} */
var res = _this.kreTransferService.groupTransferSelectFieldToForm(_this.form_fields, groupField, _this.getCheckFields(), _this.business_tables, instance.mapOfCheckedId);
if (res != null) {
_this.form_fields = res;
if (groupField.key !== null && groupField.key !== undefined) {
_this.form_model[groupField.key] = [{}];
}
}
_this.initTableFieldStatus();
}));
};
/**
* @param {?} groupField
* @return {?}
*/
KreFormDesignDetail.prototype.groupBtnDeleteFields = /**
* @param {?} groupField
* @return {?}
*/
function (groupField) {
if (!_.get(groupField, "fieldArray.fieldGroup") ||
_.get(groupField, "fieldArray.fieldGroup").length < 1) {
return;
}
/** @type {?} */
var res = this.kreTransferService.groupTransferDeleteForm(this.form_fields, groupField);
if (res != null) {
this.form_fields = res;
if (groupField.key !== null && groupField.key !== undefined) {
this.form_model[groupField.key] = [{}];
}
}
this.initTableFieldStatus();
};
/**
* @return {?}
*/
KreFormDesignDetail.prototype.initTablesInfo = /**
* @return {?}
*/
function () {
var _this = this;
this.business_tables;
this.dataService
.getBusinessTables(this.api.tables.url, { formcode: this.formCode })
.subscribe((/**
* @param {?} res
* @return {?}
*/
function (res) {
if (res != null) {
_this.business_tables = res;
_this.initFormInfo();
}
}));
};
/**
* @return {?}
*/
KreFormDesignDetail.prototype.initFormInfo = /**
* @return {?}
*/
function () {
var _this = this;
this.dataService
.getFormInfo(this.api.form.url, { formcode: this.formCode })
.subscribe((/**
* @param {?} res
* @return {?}
*/
function (res) {
_this.kreFormInfo = {
code: res.code,
name: res.name,
type: res.type,
fields: res.fields,
};
if (_this.kreFormInfo.fields !== null &&
_this.kreFormInfo.fields !== undefined) {
_this.kreFormCommonService.initFormFieldModel(_this.kreFormInfo.fields, _this.form_model);
_this.form_fields = _this.kreFormInfo.fields;
}
if (res.column != undefined && res.column != null && res.column != "") {
_this.kreFormInfo.column = res.column;
}
else {
_this.kreFormInfo.column = "layout-column-3";
}
if (res.row != undefined && res.row != null && res.row != "") {
_this.kreFormInfo.row = res.row;
}
else {
_this.kreFormInfo.row = "layout-row-1";
}
if (_this.kreFormInfo.column != undefined &&
_this.kreFormInfo.column != null &&
_this.kreFormInfo.row != undefined &&
_this.kreFormInfo.row != null) {
_this.layout_column = _this.kreFormInfo.column;
_this.layout_row = _this.kreFormInfo.row;
_this.kreDesginToFormService.initFormFieldByTables(_this.business_tables, _this.form_fields);
_this.initTableFieldStatus();
}
}));
};
/**
* @return {?}
*/
KreFormDesignDetail.prototype.initTableFieldStatus = /**
* @return {?}
*/
function () {
this.kreDesginToFormService.initTableStatus(this.business_tables, this.form_fields);
this.initTablesData();
};
/**
* @return {?}
*/
KreFormDesignDetail.prototype.initTablesData = /**
* @return {?}
*/
function () {
this.table_Data = [];
/** @type {?} */
var business = clone(this.business_tables);
/** @type {?} */
var tables = [];
if (!business)
return;
if (business.primary && business.primary != null) {
tables = [
{
tableType: "primary",
tableLabel: "主表",
tableCode: business.primary["tableCode"],
tableName: business.primary["tableName"],
tableFields: business.primary["tableFields"],
},
];
}
if (business.child &&
business.child != null &&
business.child.single &&
business.child.single != null &&
business.child.single.length > 0) {
if (Array.isArray(business.child.single)) {
business.child.single.forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
tables.push({
tableType: "single",
tableLabel: "单记录子表",
tableCode: item["tableCode"],
tableName: item["tableName"],
tableFields: item["tableFields"],
});
}));
}
}
if (business.child &&
business.child != null &&
business.child.multiple &&
business.child.multiple != null &&
business.child.multiple.length > 0) {
if (Array.isArray(business.child.multiple)) {
business.child.multiple.forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
tables.push({
tableType: "multiple",
tablelabel: "多记录子表",
tableCode: item["tableCode"],
tableName: item["tableName"],
tableFields: item["tableFields"],
});
}));
}
}
this.table_Data = tables;
};
//表单选择
//表单选择
/**
* @return {?}
*/
KreFormDesignDetail.prototype.selectTableFields =
//表单选择
/**
* @return {?}
*/
function () {
var _this = this;
this.kreDialogService.CreateModelDialog({
nzTitle: "编辑",
size: "large",
nzContent: KreFormDesignTable,
}, { businessTable: this.business_tables, tableType: "single" }, (/**
* @param {?} instance
* @param {?} modal
* @return {?}
*/
function (instance, modal) {
modal.destroy();
_this.kreTransferService.transferSelectFieldToForm(_this.form_fields, _this.getCheckFields(), _this.business_tables, instance.mapOfCheckedId);
_this.initTableFieldStatus();
}));
};
/**
* @return {?}
*/
KreFormDesignDetail.prototype.getTableMultipleCode = /**
* @return {?}
*/
function () {
/** @type {?} */
var resTableCode = "";
if (this.business_tables &&
this.business_tables.child &&
this.business_tables.child.multiple &&
this.business_tables.child.multiple.length > 0) {
this.business_tables.child.multiple.forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
if (item.tablequote !== true && resTableCode == "") {
resTableCode = item.tablecode;
}
}));
}
return resTableCode;
};
//修改Field
//修改Field
/**
* @param {?} field
* @return {?}
*/
KreFormDesignDetail.prototype.editFormFieldConfig =
//修改Field
/**
* @param {?} field
* @return {?}
*/
function (field) {
var _this = this;
/** @type {?} */
var content;
/** @type {?} */
var title = "";
if (field.type === "html") {
title = "编辑片段文本描述";
content = KreFormDSFieldLabel;
}
else {
title = "编辑字段 - " + _.get(field, "templateOptions.label");
content = KreFormDSField;
}
this.kreDialogService.CreateModelDialog({
nzTitle: title,
size: "large",
nzContent: content,
}, { field: clone(field) }, (/**
* @param {?} instance
* @param {?} modal
* @return {?}
*/
function (instance, modal) {
if (instance.checkSave()) {
/** @type {?} */
var result = _this.kreTransferService.editFormFieldInfo(_this.form_fields, instance.formField);
if (result != null) {
_this.form_fields = result.formFileds;
if (result.groupKey != null && result.groupKey != "") {
_this.form_model[result.groupKey] = [{}];
}
}
modal.destroy();
}
}));
};
//删除Field
//删除Field
/**
* @param {?} field
* @return {?}
*/
KreFormDesignDetail.prototype.deleteFormFieldConfig =
//删除Field
/**
* @param {?} field
* @return {?}
*/
function (field) {
/** @type {?} */
var result = this.kreTransferService.deleteFormFieldInfo(this.form_fields, field);
if (result != null) {
this.form_fields = result.formFileds;
if (result.groupKey != null && result.groupKey != "") {
this.form_model[result.groupKey] = [{}];
}
this.initTableFieldStatus();
}
};
KreFormDesignDetail.decorators = [
{ type: Component, args: [{
selector: "kreform-design",
template: "<div class=\"design\">\n <div class=\"layout\">\n <ng-container *ngIf=\"layout==true\">\n <div class=\"layout-column\">\n <div class=\"title\">\n \u9009\u62E9\u5E03\u5C40\u6837\u5F0F\n </div>\n <ul>\n <li (click)=\"btnColumn(3)\">\n <div [class]=\"layout_column==='layout-column-3'?'select':''\"><i class=\" icon-threeL\">\n </i></div>\n <span>\u4E09\u5217</span>\n </li>\n <li (click)=\"btnColumn(2)\">\n <div [class]=\"layout_column==='layout-column-2'?'select':''\"><i class=\" icon-towL\"></i>\n </div>\n <span>\u4FE9\u5217</span>\n </li>\n <li (click)=\"btnColumn(1)\">\n <div [class]=\"layout_column==='layout-column-1'?'select':''\">\n <i class=\"icon-oneL\"></i></div>\n <span>\u4E00\u5217</span>\n </li>\n </ul>\n </div>\n\n <div class=\"layout-row\">\n <div class=\"title\">\n \u9009\u62E9\u8868\u5355\u6837\u5F0F\n </div>\n <ul>\n <li (click)=\"btnRow(1)\">\n <div [class]=\"layout_row==='layout-row-1'?'select':''\"></div>\n <span>\u6C34\u5E73</span>\n </li>\n <li (click)=\"btnRow(2)\">\n <div [class]=\"layout_row==='layout-row-2'?'select':''\"></div>\n <span>\u5782\u76F4</span>\n </li>\n </ul>\n </div>\n\n <div class=\"layout-el\">\n <div class=\"title\">\n \u8868\u5355\u7F16\u8F91\n </div>\n <ul>\n <li (click)=\"btnAddFields()\"><i class=\"icon-TianJiaZiDuan\"></i>\u6DFB\u52A0\u5B57\u6BB5</li>\n <li (click)=\"btnAddRemark()\"><i class=\"icon-other-WenBen\"></i>\u6DFB\u52A0\u6587\u672C</li>\n <li (click)=\"btnAddLine()\"><i class=\"icon-FenGeXian\"></i>\u6DFB\u52A0\u5206\u5272\u7EBF</li>\n <li (click)=\"btnAddGroup()\"><i class=\"icon-DuoJiLuQu\"></i>\u6DFB\u52A0\u591A\u8BB0\u5F55\u533A</li>\n </ul>\n </div>\n </ng-container>\n <ng-content select=\"[name=design-layout]\"></ng-content>\n </div>\n\n <div class=\"panel\">\n <div class=\"krebutton\">\n <div>\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"btnSave()\">\u4FDD\u5B58</button>\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"btnPreview()\"><i\n class=\"icon-fwb-yulan\"></i>\u9884\u89C8</button>\n </div>\n <div>\n <button nz-button nzType=\"primary\" nzSize=\"small\" nzGhost (click)=\"btnDelete()\"><i\n class=\"icon-N_delete2\"></i>\u5220\u9664</button>\n <button nz-button nzType=\"primary\" nzSize=\"small\" nzGhost (click)=\"btnMoveUp()\"><i\n class=\"icon-ShangYi\"></i>\u4E0A\u79FB</button>\n <button nz-button nzType=\"primary\" nzSize=\"small\" nzGhost (click)=\"btnMoveDown()\"><i\n class=\"icon-XiaYi\"></i>\u4E0B\u79FB</button>\n </div>\n </div>\n <div class=\"kreform scrollbar\">\n <form [formGroup]=\"form_group\" [class]=\"kreFormInfo?.column +' '+ kreFormInfo?.row\" nz-form>\n <kreform [fields]=\"form_fields\" [status]=\"1\" [form]=\"form_group\" [model]=\"form_model\">\n </kreform>\n </form>\n </div>\n </div>\n</div>\n<!-- <kreform-drawer [(ngModel)]=\"table_Data\"></kreform-drawer> -->",
providers: [DataService, KreAntCommonService, KreTransferService],
styles: [":host ::ng-deep{width:100%;display:flex;height:100%;background-color:#f3f3f3}:host ::ng-deep .ant-input[disabled]{color:rgba(0,0,0,.25);background-color:#f3f3f3;cursor:not-allowed;opacity:1;border:0}:host ::ng-deep .design{display:flex;flex:1}:host ::ng-deep .design .layout{float:left;width:240px;background-color:#fff;padding:15px 20px 0}:host ::ng-deep .design .layout .title{font-size:14px;color:#9b9b9b;margin-bottom:10px}:host ::ng-deep .design .layout ul{list-style:none;margin:0;padding:0}:host ::ng-deep .design .layout ul li{margin:0;padding:0;cursor:pointer}:host ::ng-deep .design .layout-column ul{display:inline-block;width:100%}:host ::ng-deep .design .layout-column ul li{float:left;text-align:center}:host ::ng-deep .design .layout-column ul li div{width:56px;height:56px;line-height:63px;border-radius:4px;background-color:#ececec;margin-bottom:5px}:host ::ng-deep .design .layout-column ul li div i{color:#bfbfbf;font-size:24px}:host ::ng-deep .design .layout-column ul li div span{width:100%;display:inline-block;color:#323232}:host ::ng-deep .design .layout-column ul li:nth-child(1),:host ::ng-deep .design .layout-column ul li:nth-child(2){margin:0 15px 0 0}:host ::ng-deep .design .layout-row ul{display:inline-block;width:100%}:host ::ng-deep .design .layout-row ul li{float:left;text-align:center}:host ::ng-deep .design .layout-row ul li div{width:90px;height:32px;line-height:32px;border-radius:4px;background-color:#ececec;margin-bottom:5px;cursor:pointer}:host ::ng-deep .design .layout-row ul li div i{color:#bfbfbf;font-size:24px}:host ::ng-deep .design .layout-row ul li div span{width:100%;display:inline-block;color:#323232}:host ::ng-deep .design .layout-row ul li:nth-child(1){margin:0 15px 0 0}:host ::ng-deep .design .layout-el li{width:200px;height:33px;line-height:33px;border-radius:4px;border:1px solid #dcdce0;background-color:#fff;margin:0 0 10px!important;font-size:13px;color:#323232}:host ::ng-deep .design .layout-el li i{margin:0 8px;font-size:14px;color:#bfbfbf}:host ::ng-deep .design .layout-el li:hover{background-color:#71a9ff;cursor:pointer;color:#fff}:host ::ng-deep .design .layout-el li:hover i{color:#fff}:host ::ng-deep .design .panel{flex:1;float:left;margin:0 0 0 20px;padding:0;display:flex;flex-direction:column;border-radius:4px;border:1px solid #dcdce0;background-color:#fff}:host ::ng-deep .design .panel .krebutton{padding:10px;width:100%;text-align:right;border-bottom:1px solid #d9d9d9;font-size:13px;display:flex}:host ::ng-deep .design .panel .krebutton button{margin:0 6px 0 0;font-size:12px}:host ::ng-deep .design .panel .krebutton button i{margin:0 5px 0 0;font-size:14px}:host ::ng-deep .design .panel .krebutton div{flex:1;float:left}:host ::ng-deep .design .panel .krebutton div:nth-child(1){text-align:left}:host ::ng-deep .design .panel .krebutton div:nth-child(2){text-align:right}:host ::ng-deep .design .panel .kreform{width:100%;height:100%;display:inline-block;margin:0;padding:20px;overflow-y:auto}:host ::ng-deep .design .panel .kreform krefield-checkbox,:host ::ng-deep .design .panel .kreform krefield-datetime,:host ::ng-deep .design .panel .kreform krefield-html,:host ::ng-deep .design .panel .kreform krefield-image,:host ::ng-deep .design .panel .kreform krefield-line,:host ::ng-deep .design .panel .kreform krefield-lookup,:host ::ng-deep .design .panel .kreform krefield-number,:host ::ng-deep .design .panel .kreform krefield-password,:host ::ng-deep .design .panel .kreform krefield-radio,:host ::ng-deep .design .panel .kreform krefield-select,:host ::ng-deep .design .panel .kreform krefield-text,:host ::ng-deep .design .panel .kreform krefield-textarea,:host ::ng-deep .design .panel .kreform krefield-texti18n,:host ::ng-deep .design .panel .kreform krefield-upload,:host ::ng-deep .design .panel .kreform krefield-wrapper,:host ::ng-deep .design .panel .kreform kreform-repeat{display:flex;width:100%}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational{display:flex;width:560px;margin:0 0 10px}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldcheckbox{width:50px;font-size:13px;line-height:17px;color:#323232;text-align:right;vertical-align:middle;float:left;box-sizing:border-box;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-ms-grid-row-align:center;align-self:center;margin:0 10px 0 0}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldControl{flex:1;display:flex;align-self:center;position:relative}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldControl .label{width:120px;font-size:13px;line-height:17px;color:#323232;text-align:right;vertical-align:middle;float:left;box-sizing:border-box;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-ms-grid-row-align:center;align-self:center}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldControl .label span{color:red;margin-right:3px}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldControl .label::after{content:\"\uFF1A\"}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldControl .control{flex:1;padding:10px 10px 10px 0}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kr