1898 lines
69 KiB
Vue
1898 lines
69 KiB
Vue
<template>
|
||
<Layout class="panel-container">
|
||
<Tabs :active-name="activeTab" style="height: 100%; overflow: hidden">
|
||
<TabPane :label="i18nt('designer.hint.widgetSetting')" name="1">
|
||
<Scroll class="setting-scrollbar" :height="scrollerHeight">
|
||
<template v-if="!!designer.selectedWidget && !designer.selectedWidget.category">
|
||
<Form :model="optionModel" size="mini" label-position="left" :labelWidth="120"
|
||
class="setting-form">
|
||
<Collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
|
||
<Panel name="1">
|
||
{{i18nt('designer.setting.commonSetting')}}
|
||
<div slot="content">
|
||
<FormItem :label="i18nt('designer.setting.fieldName')" v-if="hasConfig('name')" :rules="nameRequiredRule">
|
||
<Input type="text" v-model="optionModel.name" @change="updateWidgetNameAndRef" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.label')"
|
||
v-if="hasConfig('label') && !noLabelSetting">
|
||
<Input type="text" v-model="optionModel.label" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.labelAlign')"
|
||
v-if="hasConfig('label') && !noLabelSetting && (selectedWidget.type !== 'button')">
|
||
<RadioGroup v-model="optionModel.labelAlign" class="radio-group-custom">
|
||
<Radio label="label-left-align">
|
||
{{i18nt('designer.setting.leftAlign')}}
|
||
</Radio>
|
||
<Radio label="label-center-align">
|
||
{{i18nt('designer.setting.centerAlign')}}
|
||
</Radio>
|
||
<Radio label="label-right-align">
|
||
{{i18nt('designer.setting.rightAlign')}}
|
||
</Radio>
|
||
</RadioGroup>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.displayType')"
|
||
v-if="hasConfig('type')">
|
||
<Select v-if="(selectedWidget.type === 'input')" v-model="optionModel.type">
|
||
<Option label="text" value="text"></Option>
|
||
<!-- 当input的type设置为number时，如果输入非数字字符，则v-model拿到的值为空字符串，无法实现输入校验！故屏蔽之！！ -->
|
||
<Option label="number" value="number"></Option>
|
||
<Option label="password" value="password"></Option>
|
||
<Option label="url" value="url"></Option>
|
||
<Option label="email" value="email"></Option>
|
||
<Option label="date" value="date"></Option>
|
||
<Option label="tel" value="tel"></Option>
|
||
</Select>
|
||
<Select v-if="(selectedWidget.type === 'date')" v-model="optionModel.type">
|
||
<Option label="datetime" value="datetime"></Option>
|
||
<Option label="date" value="date"></Option>
|
||
<!-- <Option label="dates" value="dates"></Option> -->
|
||
<Option label="year" value="year"></Option>
|
||
<Option label="month" value="month"></Option>
|
||
<!-- <Option label="week" value="week"></Option> -->
|
||
</Select>
|
||
<Select v-else-if="(selectedWidget.type === 'date-range')"
|
||
v-model="optionModel.type">
|
||
<Option label="daterange" value="daterange"></Option>
|
||
<Option label="datetimerange" value="datetimerange"></Option>
|
||
<!-- <Option label="monthrange" value="monthrange"></Option> -->
|
||
</Select>
|
||
<Select v-else-if="(selectedWidget.type === 'button')"
|
||
v-model="optionModel.type">
|
||
<Option :label="item.label" :value="item.value" v-for="(item,index) in buttonDisplayTypes" :key="index"></Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.defaultValue')"
|
||
v-if="hasConfig('defaultValue') && !hasConfig('optionItems')">
|
||
<TimePicker v-if="(selectedWidget.type === 'time')"
|
||
v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
|
||
:format="optionModel.format" value-format="HH:mm:ss"
|
||
style="width: 100%">
|
||
</TimePicker>
|
||
<TimePicker v-else-if="(selectedWidget.type === 'time-range')"
|
||
v-model="optionModel.defaultValue" is-range
|
||
@change="emitDefaultValueChange" :format="optionModel.format"
|
||
value-format="HH:mm:ss" style="width: 100%">
|
||
</TimePicker>
|
||
<DatePicker
|
||
v-else-if="(selectedWidget.type === 'date') || (selectedWidget.type === 'date-range')"
|
||
:type="optionModel.type" v-model="optionModel.defaultValue"
|
||
@change="emitDefaultValueChange" :format="optionModel.format"
|
||
:value-format="optionModel.valueFormat" style="width: 100%">
|
||
</DatePicker>
|
||
<iSwitch v-else-if="(selectedWidget.type === 'switch')"
|
||
v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
|
||
active-text="true" inactive-text="false" />
|
||
<Input type="number" v-else-if="(selectedWidget.type === 'rate')"
|
||
v-model="optionModel.defaultValue" :min="0" :max="optionModel.max"
|
||
style="width: 100%" @change="emitDefaultValueChange" />
|
||
<ColorPicker v-else-if="(selectedWidget.type === 'color')"
|
||
v-model="optionModel.defaultValue" @change="emitDefaultValueChange" />
|
||
<Input v-else type="text" v-model="optionModel.defaultValue"
|
||
@change="emitDefaultValueChange" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.placeholder')"
|
||
v-if="hasConfig('placeholder')">
|
||
<Input type="text" v-model="optionModel.placeholder" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.startPlaceholder')"
|
||
v-if="hasConfig('startPlaceholder')">
|
||
<Input type="text" v-model="optionModel.startPlaceholder" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.endPlaceholder')"
|
||
v-if="hasConfig('endPlaceholder')">
|
||
<Input type="text" v-model="optionModel.endPlaceholder" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.widgetColumnWidth')"
|
||
v-if="hasConfig('columnWidth') && !!subFormChildWidgetFlag">
|
||
<Input type="text" v-model="optionModel.columnWidth" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.widgetSize')"
|
||
v-if="hasConfig('size')">
|
||
<Select v-model="optionModel.size">
|
||
<Option v-for="item in widgetSizes" :key="item.value"
|
||
:label="item.label" :value="item.value">
|
||
</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.displayStyle')"
|
||
v-if="hasConfig('displayStyle')">
|
||
<RadioGroup v-model="optionModel.displayStyle">
|
||
<Radio label="inline">{{i18nt('designer.setting.inlineLayout')}}
|
||
</Radio>
|
||
<Radio label="block">{{i18nt('designer.setting.blockLayout')}}</Radio>
|
||
</RadioGroup>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.labelWidth')"
|
||
v-if="hasConfig('labelWidth')">
|
||
<Input type="number" v-model="optionModel.labelWidth"
|
||
@input.native="inputNumberHandler" min="0" class="hide-spin-button" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.rows')" v-if="hasConfig('rows')">
|
||
<Input type="number" v-model="optionModel.rows" style="width: 100%" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.labelHidden')"
|
||
v-if="hasConfig('labelHidden')">
|
||
<Checkbox v-model="optionModel.labelHidden"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.required')"
|
||
v-if="hasConfig('required')">
|
||
<Checkbox v-model="optionModel.required"></Checkbox>
|
||
</FormItem>
|
||
<FormItem v-if="hasConfig('validation')">
|
||
<span slot="label">{{i18nt('designer.setting.validation')}}
|
||
<Tooltip effect="light"
|
||
:content="i18nt('designer.setting.validationHelp')">
|
||
<i class="ivu-icon ivu-icon-md-information-circle"></i>
|
||
</Tooltip>
|
||
</span>
|
||
<Select v-model="optionModel.validation" filterable allow-create
|
||
default-first-option>
|
||
<Option v-for="(fv, fvIdx) in fieldValidators" :key="fvIdx"
|
||
:label="fv.label" :value="fv.value">
|
||
</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.validationHint')"
|
||
v-if="hasConfig('validationHint')">
|
||
<Input type="text" v-model="optionModel.validationHint" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.readonly')"
|
||
v-if="hasConfig('readonly')">
|
||
<Checkbox v-model="optionModel.readonly"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.disabled')"
|
||
v-if="hasConfig('disabled')">
|
||
<Checkbox v-model="optionModel.disabled"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.hidden')" v-if="hasConfig('hidden')">
|
||
<Checkbox v-model="optionModel.hidden"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.textContent')"
|
||
v-if="hasConfig('textContent')">
|
||
<Input v-model="optionModel.textContent" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.htmlContent')"
|
||
v-if="hasConfig('htmlContent')">
|
||
<Input v-model="optionModel.htmlContent" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.clearable')"
|
||
v-if="hasConfig('clearable')">
|
||
<Checkbox v-model="optionModel.clearable"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.editable')"
|
||
v-if="hasConfig('editable')">
|
||
<Checkbox v-model="optionModel.editable"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.format')" v-if="hasConfig('format')">
|
||
<Select
|
||
v-if="(selectedWidget.type === 'time') || (selectedWidget.type === 'time-range')"
|
||
v-model="optionModel.format" filterable allow-create>
|
||
<Option label="HH:mm" value="HH:mm"></Option>
|
||
<Option label="HH:mm:ss" value="HH:mm:ss"></Option>
|
||
<Option label="HH时mm分ss秒" value="HH时mm分ss秒"></Option>
|
||
<Option label="hh:mm:ss" value="hh:mm:ss"></Option>
|
||
</Select>
|
||
<Select
|
||
v-if="(selectedWidget.type === 'date') || (selectedWidget.type === 'date-range')"
|
||
v-model="optionModel.format" filterable allow-create>
|
||
<Option label="yyyy" value="yyyy"></Option>
|
||
<Option label="yyyy/MM" value="yyyy/MM"></Option>
|
||
<Option label="yyyy/MM/dd" value="yyyy/MM/dd"></Option>
|
||
<Option label="yyyy-MM" value="yyyy-MM"></Option>
|
||
<Option label="yyyy-MM-dd" value="yyyy-MM-dd"></Option>
|
||
<Option label="MM" value="MM"></Option>
|
||
<Option label="yyyy年" value="yyyy年"></Option>
|
||
<Option label="yyyy年MM月" value="yyyy年MM月"></Option>
|
||
<Option label="MM月" value="MM月"></Option>
|
||
<Option label="yyyy年MM月dd日" value="yyyy年MM月dd日"></Option>
|
||
<Option label="yyyy年MM月dd日 HH时mm分" value="yyyy年MM月dd日 HH时mm分"></Option>
|
||
<Option label="yyyy年MM月dd日 HH时mm分ss秒" value="yyyy年MM月dd日 HH时mm分ss秒"></Option>
|
||
<Option label="yyyy-MM-dd HH:mm" value="yyyy-MM-dd HH:mm"></Option>
|
||
<Option label="yyyy-MM-dd HH:mm" value="yyyy-MM-dd HH:mm"></Option>
|
||
<Option label="yyyy-MM-dd hh:mm:ss" value="yyyy-MM-dd hh:mm:ss"></Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.valueFormat')"
|
||
v-if="hasConfig('valueFormat')">
|
||
<Select
|
||
v-if="(selectedWidget.type === 'date') || (selectedWidget.type === 'date-range')"
|
||
v-model="optionModel.valueFormat" filterable allow-create>
|
||
<Option label="yyyy-MM-dd" value="yyyy-MM-dd"></Option>
|
||
<Option label="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd HH:mm:ss">
|
||
</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.showPassword')"
|
||
v-if="hasConfig('showPassword') && (optionModel.type === 'password')">
|
||
<Checkbox v-model="optionModel.showPassword"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.filterable')"
|
||
v-if="hasConfig('filterable')">
|
||
<Checkbox v-model="optionModel.filterable"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.allowCreate')"
|
||
v-if="hasConfig('allowCreate')">
|
||
<Checkbox v-model="optionModel.allowCreate"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.remote')" v-if="hasConfig('remote')">
|
||
<Checkbox v-model="optionModel.remote" @change="onRemoteChange">
|
||
</Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.automaticDropdown')"
|
||
v-if="hasConfig('automaticDropdown')">
|
||
<Checkbox v-model="optionModel.automaticDropdown"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.multiple')"
|
||
v-if="hasConfig('multiple')">
|
||
<Checkbox v-model="optionModel.multiple" @change="onMultipleSelected">
|
||
</Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.multipleLimit')"
|
||
v-if="hasConfig('multipleLimit')">
|
||
<Input type="number" v-model="optionModel.multipleLimit" :min="0"
|
||
class="hide-spin-button" style="width: 100%" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.contentPosition')"
|
||
v-if="hasConfig('contentPosition')">
|
||
<Select v-model="optionModel.contentPosition">
|
||
<Option label="center" value="center"></Option>
|
||
<Option label="left" value="left"></Option>
|
||
<Option label="right" value="right"></Option>
|
||
</Select>
|
||
</FormItem>
|
||
|
||
<FormItem :label-width="0" v-if="hasConfig('optionItems')">
|
||
<Divider size="small" class="custom-divider-margin-top">
|
||
{{i18nt('designer.setting.optionsSetting')}}
|
||
</Divider>
|
||
<option-items-setting :designer="designer"
|
||
:selected-widget="designer.selectedWidget"></option-items-setting>
|
||
</FormItem>
|
||
|
||
<FormItem :label-width="0" v-if="hasConfig('uploadURL')">
|
||
<Divider size="small" class="custom-divider">{{i18nt('designer.setting.uploadSetting')}}
|
||
</Divider>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.uploadURL')"
|
||
v-if="hasConfig('uploadURL')">
|
||
<Input type="text" v-model="optionModel.uploadURL" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.uploadTip')"
|
||
v-if="hasConfig('uploadTip')">
|
||
<Input type="text" v-model="optionModel.uploadTip" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.withCredentials')"
|
||
v-if="hasConfig('withCredentials')">
|
||
<Checkbox v-model="optionModel.withCredentials"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.multipleSelect')"
|
||
v-if="hasConfig('multipleSelect')">
|
||
<Checkbox v-model="optionModel.multipleSelect"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.showFileList')"
|
||
v-if="hasConfig('showFileList')">
|
||
<Checkbox v-model="optionModel.showFileList"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.limit')" v-if="hasConfig('limit')">
|
||
<Input type="number" v-model="optionModel.limit" :min="1"
|
||
class="hide-spin-button" style="width: 100%" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.fileMaxSize')"
|
||
v-if="hasConfig('fileMaxSize')">
|
||
<Input type="number" v-model="optionModel.fileMaxSize" :min="1"
|
||
class="hide-spin-button" style="width: 100%" />
|
||
</FormItem>
|
||
<FormItem
|
||
v-if="hasConfig('fileAccept') && (selectedWidget.type === 'picture-upload')">
|
||
<span slot="label">{{i18nt('designer.setting.fileAccept')}}
|
||
<Tooltip
|
||
:content="i18nt('designer.setting.fileTypesHelp')">
|
||
<i class="ivu-icon ivu-icon-md-information-circle"></i>
|
||
</Tooltip>
|
||
</span>
|
||
<Select multiple allow-create filterable default-first-option
|
||
v-model="optionModel.fileAccept" style="width: 100%">
|
||
<Option v-for="(ft, ftIdx) in uploadPictureAccept" :key="ftIdx"
|
||
:label="ft.label" :value="ft.value">
|
||
</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem
|
||
v-if="hasConfig('fileTypes') && (selectedWidget.type === 'picture-upload')">
|
||
<span slot="label">{{i18nt('designer.setting.fileTypes')}}
|
||
<Tooltip
|
||
:content="i18nt('designer.setting.fileTypesHelp')">
|
||
<i class="ivu-icon ivu-icon-md-information-circle"></i>
|
||
</Tooltip>
|
||
</span>
|
||
<Select multiple allow-create filterable default-first-option
|
||
v-model="optionModel.fileTypes" style="width: 100%">
|
||
<Option v-for="(ft, ftIdx) in uploadPictureTypes" :key="ftIdx"
|
||
:label="ft.label" :value="ft.value">
|
||
</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem
|
||
v-if="hasConfig('fileAccept') && (selectedWidget.type === 'file-upload')">
|
||
<span slot="label">{{i18nt('designer.setting.fileAccept')}}
|
||
<Tooltip
|
||
:content="i18nt('designer.setting.fileTypesHelp')">
|
||
<i class="ivu-icon ivu-icon-md-information-circle"></i>
|
||
</Tooltip>
|
||
</span>
|
||
<Select multiple allow-create filterable default-first-option
|
||
v-model="optionModel.fileAccept" style="width: 100%">
|
||
<Option v-for="(ft, ftIdx) in uploadFileAccept" :key="ftIdx"
|
||
:label="ft.label" :value="ft.value">
|
||
</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem
|
||
v-if="hasConfig('fileTypes') && (selectedWidget.type === 'file-upload')">
|
||
<span slot="label">{{i18nt('designer.setting.fileTypes')}}
|
||
<Tooltip
|
||
:content="i18nt('designer.setting.fileTypesHelp')">
|
||
<i class="ivu-icon ivu-icon-md-information-circle"></i>
|
||
</Tooltip>
|
||
</span>
|
||
<Select multiple allow-create filterable default-first-option
|
||
v-model="optionModel.fileTypes" style="width: 100%">
|
||
<Option v-for="(ft, ftIdx) in uploadFileTypes" :key="ftIdx"
|
||
:label="ft.label" :value="ft.value">
|
||
</Option>
|
||
</Select>
|
||
</FormItem>
|
||
</div>
|
||
</Panel>
|
||
|
||
<Panel name="2">
|
||
{{i18nt('designer.setting.advancedSetting')}}
|
||
<div slot="content">
|
||
<FormItem :label="i18nt('designer.setting.minValue')" v-if="hasConfig('min')">
|
||
<Input type="number" v-model="minValue" class="hide-spin-button"
|
||
style="width: 100%" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.maxValue')"
|
||
v-if="hasConfig('max') && (selectedWidget.type !== 'rate')">
|
||
<Input type="number" v-model="maxValue" class="hide-spin-button"
|
||
style="width: 100%" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.precision')"
|
||
v-if="hasConfig('precision')">
|
||
<Input type="number" v-model="optionModel.precision" :min="0"
|
||
class="hide-spin-button" style="width: 100%" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.formatter')"
|
||
v-if="hasConfig('formatter')">
|
||
<Input type="text" v-model="optionModel.formatter"
|
||
class="hide-spin-button" style="width: 100%" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.step')" v-if="hasConfig('step')">
|
||
<Input type="number" v-model="optionModel.step" class="hide-spin-button"
|
||
style="width: 100%" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.controlsPosition')"
|
||
v-if="hasConfig('controlsPosition')">
|
||
<Select v-model="optionModel.controlsPosition">
|
||
<Option label="default" value="default"></Option>
|
||
<Option label="right" value="right"></Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.minLength')"
|
||
v-if="hasConfig('minLength')">
|
||
<Input type="number" @input.native="inputNumberHandler"
|
||
class="hide-spin-button" min="0" v-model="minLength"
|
||
style="width: 100%" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.maxLength')"
|
||
v-if="hasConfig('maxLength')">
|
||
<Input type="number" @input.native="inputNumberHandler"
|
||
class="hide-spin-button" min="1" v-model="maxLength"
|
||
style="width: 100%" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.showWordLimit')"
|
||
v-if="hasConfig('showWordLimit')">
|
||
<Checkbox v-model="optionModel.showWordLimit"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.prefixIcon')"
|
||
v-if="hasConfig('prefixIcon')">
|
||
<Input type="text" v-model="optionModel.prefixIcon" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.suffixIcon')"
|
||
v-if="hasConfig('suffixIcon')">
|
||
<Input type="text" v-model="optionModel.suffixIcon" />
|
||
</FormItem>
|
||
|
||
|
||
<FormItem :label="i18nt('designer.setting.activeText')"
|
||
v-if="hasConfig('activeText')">
|
||
<Input type="text" v-model="optionModel.activeText" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.inactiveText')"
|
||
v-if="hasConfig('inactiveText')">
|
||
<Input type="text" v-model="optionModel.inactiveText" />
|
||
</FormItem>
|
||
|
||
|
||
|
||
<FormItem :label="i18nt('designer.setting.activeText')"
|
||
v-if="hasConfig('activeText')">
|
||
<Input type="text" v-model="optionModel.activeText" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.inactiveText')"
|
||
v-if="hasConfig('inactiveText')">
|
||
<Input type="text" v-model="optionModel.inactiveText" />
|
||
</FormItem>
|
||
|
||
|
||
|
||
<FormItem :label="i18nt('designer.setting.activeColor')"
|
||
v-if="hasConfig('activeColor')">
|
||
<ColorPicker v-model="optionModel.activeColor"></ColorPicker >
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.inactiveColor')"
|
||
v-if="hasConfig('inactiveColor')">
|
||
<ColorPicker v-model="optionModel.inactiveColor"></ColorPicker >
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.maxStars')"
|
||
v-if="hasConfig('max') && (selectedWidget.type === 'rate')">
|
||
<Input type="number" v-model="optionModel.max" :min="1" :max="10"
|
||
class="hide-spin-button" style="width: 100%" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.lowThreshold')"
|
||
v-if="hasConfig('lowThreshold')">
|
||
<Input type="number" v-model="optionModel.lowThreshold" :min="1"
|
||
:max="optionModel.highThreshold" class="hide-spin-button"
|
||
style="width: 100%" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.highThreshold')"
|
||
v-if="hasConfig('highThreshold')">
|
||
<Input type="number" v-model="optionModel.highThreshold"
|
||
:min="optionModel.lowThreshold" :max="optionModel.max"
|
||
class="hide-spin-button" style="width: 100%" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.allowHalf')"
|
||
v-if="hasConfig('allowHalf')">
|
||
<Checkbox v-model="optionModel.allowHalf"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.showText')"
|
||
v-if="hasConfig('showText')">
|
||
<Checkbox v-model="optionModel.showText"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.showScore')"
|
||
v-if="hasConfig('showScore')">
|
||
<Checkbox v-model="optionModel.showScore"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.showScore')"
|
||
v-if="hasConfig('showScore')">
|
||
<Checkbox v-model="optionModel.showScore"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.showScore')"
|
||
v-if="hasConfig('showScore')">
|
||
<Checkbox v-model="optionModel.showScore"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.range')" v-if="hasConfig('range')">
|
||
<Checkbox v-model="optionModel.range"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.direction')"
|
||
v-if="hasConfig('direction')">
|
||
<Checkbox v-model="optionModel.direction" true-value="horizontal" false-value="vertical"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.plain')" v-if="hasConfig('plain')">
|
||
<Checkbox v-model="optionModel.plain"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.round')" v-if="hasConfig('round')">
|
||
<Checkbox v-model="optionModel.round"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.circle')" v-if="hasConfig('circle')">
|
||
<Checkbox v-model="optionModel.circle"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.buttonIcon')"
|
||
v-if="hasConfig('icon')">
|
||
<Input type="text" v-model="optionModel.icon" />
|
||
</FormItem>
|
||
|
||
<FormItem :label="i18nt('designer.setting.customClass')"
|
||
v-if="!!selectedWidget.options">
|
||
<Select v-model="optionModel.customClass" multiple filterable allow-create
|
||
default-first-option>
|
||
<Option v-for="(item, idx) in cssClassList" :key="idx" :label="item"
|
||
:value="item"></Option>
|
||
</Select>
|
||
</FormItem>
|
||
|
||
<FormItem :label-width="0" v-if="hasConfig('labelIconClass')">
|
||
<Divider size="small" class="custom-divider">
|
||
{{i18nt('designer.setting.customLabelIcon')}}
|
||
</Divider>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.labelIconClass')"
|
||
v-if="hasConfig('labelIconClass')">
|
||
<Input type="text" v-model="optionModel.labelIconClass" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.labelIconPosition')"
|
||
v-if="hasConfig('labelIconPosition')">
|
||
<Select v-model="optionModel.labelIconPosition">
|
||
<Option v-for="item in labelIconPosition" :key="item.value"
|
||
:label="item.label" :value="item.value">
|
||
</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.labelTooltip')"
|
||
v-if="hasConfig('labelTooltip')">
|
||
<Input type="text" v-model="optionModel.labelTooltip" />
|
||
</FormItem>
|
||
|
||
<!-- 复合输入框 -->
|
||
<FormItem :label-width="0" v-if="hasConfig('appendControl')">
|
||
<Divider size="small" class="custom-divider">{{i18nt('designer.setting.inputControl')}}
|
||
</Divider>
|
||
<div style="font-size:12px;line-height:15px;color:#AAAAAA">提示：受iview组件限制，切换前置/后置组件可能无法及时生效，请刷新页面</div>
|
||
</FormItem>
|
||
<!-- 添加前置按钮 -->
|
||
<FormItem :label="i18nt('designer.setting.prependControl')" v-if="hasConfig('prependControl')">
|
||
<Checkbox v-model="optionModel.prependControl" @on-change="updateFormView"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.prependControlDisabled')" v-if="hasConfig('prependControlDisabled')">
|
||
<Checkbox v-model="optionModel.prependControlDisabled"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.prependControlIcon')" v-if="hasConfig('prependControlIcon')">
|
||
<Input type="text" v-model="optionModel.prependControlIcon" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.prependControlType')" v-if="hasConfig('prependControlType')">
|
||
<Select v-model="optionModel.prependControlType">
|
||
<Option v-for="item in inputControlType" :key="item.value"
|
||
:label="item.label" :value="item.value">
|
||
</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.prependControlText')" v-if="hasConfig('prependControlText')">
|
||
<Input type="text" v-model="optionModel.prependControlText" />
|
||
</FormItem>
|
||
<!-- 添加后置按钮 -->
|
||
<FormItem :label="i18nt('designer.setting.appendControl')" v-if="hasConfig('appendControl')">
|
||
<Checkbox v-model="optionModel.appendControl" @on-change="updateFormView"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.appendControlDisabled')" v-if="hasConfig('appendControlDisabled')">
|
||
<Checkbox v-model="optionModel.appendControlDisabled"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.appendControlIcon')" v-if="hasConfig('appendControlIcon')">
|
||
<Input type="text" v-model="optionModel.appendControlIcon" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.appendControlType')" v-if="hasConfig('appendControlType')">
|
||
<Select v-model="optionModel.appendControlType">
|
||
<Option v-for="item in inputControlType" :key="item.value"
|
||
:label="item.label" :value="item.value">
|
||
</Option>
|
||
</Select>
|
||
</FormItem>
|
||
|
||
<FormItem :label="i18nt('designer.setting.appendControlText')" v-if="hasConfig('appendControlText')">
|
||
<Input type="text" v-model="optionModel.appendControlText" />
|
||
</FormItem>
|
||
|
||
<FormItem :label="i18nt('designer.setting.appendButtonText')"
|
||
v-if="hasConfig('appendButtonText')">
|
||
<Input type="text" v-model="optionModel.appendButtonText" />
|
||
</FormItem>
|
||
|
||
<!-- 按钮跳转模式 -->
|
||
<FormItem :label="i18nt('designer.setting.to')" v-if="hasConfig('to')">
|
||
<Input type="text" v-model="optionModel.to" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.target')" v-if="hasConfig('target')">
|
||
<Input type="text" v-model="optionModel.target" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.replace')" v-if="hasConfig('replace')">
|
||
<Checkbox v-model="optionModel.replace"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.append')" v-if="hasConfig('append')">
|
||
<Checkbox v-model="optionModel.append"></Checkbox>
|
||
</FormItem>
|
||
</div>
|
||
</Panel>
|
||
|
||
<Panel name="3">
|
||
{{i18nt('designer.setting.eventSetting')}}
|
||
<div slot="content">
|
||
<FormItem label="onCreated" :labelWidth="180" v-if="hasConfig('onCreated')">
|
||
<Button type="info" icon="md-create" plain round
|
||
@click="editEventHandler('onCreated')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onMounted" :labelWidth="180" v-if="hasConfig('onMounted')">
|
||
<Button type="info" icon="md-create" plain round
|
||
@click="editEventHandler('onMounted')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onClick" :labelWidth="180" v-if="hasConfig('onClick')">
|
||
<Button type="info" icon="md-create" plain round
|
||
@click="editEventHandler('onClick')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onRemoteQuery" :labelWidth="180" v-if="hasConfig('onRemoteQuery')">
|
||
<Button type="info" icon="md-create" plain round
|
||
@click="editEventHandler('onRemoteQuery')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onInput" :labelWidth="180" v-if="hasConfig('onInput')">
|
||
<Button type="info" icon="md-create" plain round
|
||
@click="editEventHandler('onInput')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onChange" :labelWidth="180" v-if="hasConfig('onChange')">
|
||
<Button type="info" icon="md-create" plain round
|
||
@click="editEventHandler('onChange')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onFocus" :labelWidth="180" v-if="hasConfig('onFocus')">
|
||
<Button type="info" icon="md-create" plain round
|
||
@click="editEventHandler('onFocus')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onBlur" :labelWidth="180" v-if="hasConfig('onBlur')">
|
||
<Button type="info" icon="md-create" plain round
|
||
@click="editEventHandler('onBlur')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onBeforeUpload" :labelWidth="180" v-if="hasConfig('onBeforeUpload')">
|
||
<Button type="info" icon="md-create" plain round
|
||
@click="editEventHandler('onBeforeUpload')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onUploadSuccess" :labelWidth="180" v-if="hasConfig('onUploadSuccess')">
|
||
<Button type="info" icon="md-create" plain round
|
||
@click="editEventHandler('onUploadSuccess')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onUploadError" :labelWidth="180" v-if="hasConfig('onUploadError')">
|
||
<Button type="info" icon="md-create" plain round
|
||
@click="editEventHandler('onUploadError')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onUploadPreview" :labelWidth="180" v-if="hasConfig('onUploadPreview')">
|
||
<Button type="info" icon="md-create" plain round
|
||
@click="editEventHandler('onUploadPreview')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onUploadProgress" :labelWidth="180" v-if="hasConfig('onUploadProgress')">
|
||
<Button type="info" icon="md-create" plain round
|
||
@click="editEventHandler('onUploadProgress')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onValidate" :labelWidth="180" v-if="hasConfig('onValidate')">
|
||
<Button type="info" icon="md-create" plain round
|
||
@click="editEventHandler('onValidate')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
</div>
|
||
</Panel>
|
||
|
||
</Collapse>
|
||
</Form>
|
||
</template>
|
||
|
||
<template v-if="(!!designer.selectedWidget && !!designer.selectedWidget.category)">
|
||
|
||
<Collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
|
||
<Panel name="1">
|
||
{{i18nt('designer.setting.commonSetting')}}
|
||
<div slot="content">
|
||
<Form :model="optionModel" size="mini" label-position="left" :labelWidth="120"
|
||
class="setting-form">
|
||
<FormItem :label="i18nt('designer.setting.widgetName')"
|
||
v-if="hasConfig('name')">
|
||
<Input type="text" v-model="optionModel.name" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.labelAlign')"
|
||
v-if="hasConfig('labelAlign')">
|
||
<RadioGroup v-model="optionModel.labelAlign" class="radio-group-custom">
|
||
<Radio label="label-left-align">
|
||
{{i18nt('designer.setting.leftAlign')}}
|
||
</Radio>
|
||
<Radio label="label-center-align">
|
||
{{i18nt('designer.setting.centerAlign')}}
|
||
</Radio>
|
||
<Radio label="label-right-align">
|
||
{{i18nt('designer.setting.rightAlign')}}
|
||
</Radio>
|
||
</RadioGroup>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.showBlankRow')"
|
||
v-if="hasConfig('showBlankRow')">
|
||
<Checkbox v-model="optionModel.showBlankRow"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.showRowNumber')"
|
||
v-if="hasConfig('showRowNumber')">
|
||
<Checkbox v-model="optionModel.showRowNumber"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.hidden')" v-if="hasConfig('hidden')">
|
||
<Checkbox v-model="optionModel.hidden"></Checkbox>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.cellWidth')"
|
||
v-if="hasConfig('cellWidth')">
|
||
<Input type="text" v-model="optionModel.cellWidth" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.cellHeight')"
|
||
v-if="hasConfig('cellHeight')">
|
||
<Input type="text" v-model="optionModel.cellHeight" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.customClass')"
|
||
v-if="!!selectedWidget.options">
|
||
<Select v-model="optionModel.customClass" multiple filterable allow-create
|
||
default-first-option>
|
||
<Option v-for="(item, idx) in cssClassList" :key="idx" :label="item"
|
||
:value="item"></Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem :label-width="0" v-if="hasConfig('gutter')">
|
||
<Divider size="small" class="custom-divider">{{i18nt('designer.setting.columnSetting')}}
|
||
</Divider>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.gutter')" v-if="hasConfig('gutter')">
|
||
<Input type="number" v-model="optionModel.gutter" style="width: 100%" />
|
||
</FormItem>
|
||
</Form>
|
||
|
||
<Form :model="optionModel" size="mini" v-if="selectedWidget.type === 'grid'"
|
||
label-position="top" class="setting-form">
|
||
<FormItem :label="i18nt('designer.setting.colsOfGrid')">
|
||
<li v-for="(colItem, colIdx) in selectedWidget.cols" :key="colIdx"
|
||
class="col-item">
|
||
<span
|
||
class="col-span-title">{{i18nt('designer.setting.colSpanTitle')}}{{colIdx + 1}}</span>
|
||
<Input type="number" v-model.number="colItem.options.span" :min="1"
|
||
:max="24"
|
||
@change="(newValue, oldValue) => spanChanged(selectedWidget, colItem, colIdx, newValue, oldValue)"
|
||
class="cell-span-input" />
|
||
<Button shape="circle" type="warning"
|
||
@click="deleteCol(selectedWidget, colIdx)" icon="md-close"
|
||
class="col-delete-button"></Button>
|
||
</li>
|
||
<div>
|
||
<Button type="default" @click="addNewCol(selectedWidget)">
|
||
{{i18nt('designer.setting.addColumn')}}
|
||
</Button>
|
||
</div>
|
||
</FormItem>
|
||
</Form>
|
||
|
||
<Form :model="optionModel" size="small" v-if="selectedWidget.type === 'grid-col'"
|
||
label-position="left" :labelWidth="120" class="setting-form">
|
||
<FormItem :label="i18nt('designer.setting.colSpanTitle')">
|
||
<Input type="number" v-model.number="optionModel.span" :min="1" :max="24"
|
||
style="width: 100%" />
|
||
</FormItem>
|
||
</Form>
|
||
<Form :model="optionModel" size="small" v-if="selectedWidget.type === 'tab'"
|
||
label-position="left" :labelWidth="120"
|
||
class="setting-form panes-setting">
|
||
<FormItem :label="i18nt('designer.setting.tabPaneType')" v-if="hasConfig('displayType')">
|
||
<Select v-model="optionModel.displayType">
|
||
<Option v-for="item in tabPaneType" :key="item.value"
|
||
:label="item.label" :value="item.value">
|
||
</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.widgetSize')" v-if="hasConfig('size')&&optionModel.displayType=='line'">
|
||
<Select v-model="optionModel.size">
|
||
<Option v-for="item in widgetSizes2" :key="item.value"
|
||
:label="item.label" :value="item.value">
|
||
</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem :label-width="0">
|
||
<Divider size="small" class="custom-divider-margin-top">
|
||
{{i18nt('designer.setting.tabPaneSetting')}}
|
||
</Divider>
|
||
</FormItem>
|
||
<FormItem :label-width="0">
|
||
<draggable tag="ul" :list="selectedWidget.tabs"
|
||
v-bind="{group:'panesGroup', ghostClass: 'ghost', handle: '.drag-option'}">
|
||
<li v-for="(tpItem, tpIdx) in selectedWidget.tabs" :key="tpIdx"
|
||
class="col-item">
|
||
<!-- <span style="margin-right: 12px">{{tpIdx + 1}}</span> -->
|
||
<Checkbox v-model="tpItem.options.disabled"
|
||
@change="(evt) => onTabPaneActiveChange(evt, tpItem)"
|
||
style="margin-right: 8px">
|
||
{{i18nt('designer.setting.paneDisabled')}}
|
||
</Checkbox>
|
||
<Input type="text" v-model="tpItem.options.label" style="width: 155px" />
|
||
<i class="iconfont icon-drag drag-option"></i>
|
||
<Button shape='circle' size="small" type="warning"
|
||
@click="deleteTabPane(selectedWidget, tpIdx)"
|
||
icon="md-remove" class="col-delete-button"></Button>
|
||
</li>
|
||
<div>
|
||
<Button type="text" @click="addTabPane(selectedWidget)" icon="md-add">
|
||
{{i18nt('designer.setting.addTabPane')}}
|
||
</Button>
|
||
</div>
|
||
</draggable>
|
||
</FormItem>
|
||
</Form>
|
||
</div>
|
||
</Panel>
|
||
|
||
<Panel name="3">
|
||
{{i18nt('designer.setting.eventSetting')}}
|
||
<div slot="content">
|
||
<Form :model="optionModel" size="mini" label-position="left" :labelWidth="150"
|
||
class="setting-form">
|
||
<FormItem label="onSubFormRowAdd" :labelWidth="180" v-if="hasConfig('onSubFormRowAdd')">
|
||
<Button type="info" icon="el-icon-edit" plain round
|
||
@click="editEventHandler('onSubFormRowAdd')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onSubFormRowInsert" :labelWidth="180" v-if="hasConfig('onSubFormRowInsert')">
|
||
<Button type="info" icon="el-icon-edit" plain round
|
||
@click="editEventHandler('onSubFormRowInsert')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onSubFormRowDelete" :labelWidth="180" v-if="hasConfig('onSubFormRowDelete')">
|
||
<Button type="info" icon="el-icon-edit" plain round
|
||
@click="editEventHandler('onSubFormRowDelete')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onSubFormRowChange" :labelWidth="180" v-if="hasConfig('onSubFormRowChange')">
|
||
<Button type="info" icon="el-icon-edit" plain round
|
||
@click="editEventHandler('onSubFormRowChange')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
</Form>
|
||
</div>
|
||
</Panel>
|
||
</Collapse>
|
||
|
||
</template>
|
||
|
||
</Scroll>
|
||
</TabPane>
|
||
|
||
<TabPane v-if="!!designer" :label="i18nt('designer.hint.formSetting')" name="2">
|
||
<Form :model="formConfig" size="mini" label-position="left" :labelWidth="120" class="setting-form">
|
||
<Collapse v-model="formActiveCollapseNames" class="setting-collapse">
|
||
<Panel name="1">
|
||
{{i18nt('designer.setting.basicSetting')}}
|
||
<div slot="content">
|
||
<FormItem :label="i18nt('designer.setting.formSize')">
|
||
<Select v-model="formConfig.size">
|
||
<Option v-for="item in formSizes" :key="item.value" :label="item.label"
|
||
:value="item.value">
|
||
</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.labelPosition')">
|
||
<RadioGroup v-model="formConfig.labelPosition" class="radio-group-custom">
|
||
<Radio label="left">{{i18nt('designer.setting.leftPosition')}}
|
||
</Radio>
|
||
<Radio label="top">{{i18nt('designer.setting.topPosition')}}
|
||
</Radio>
|
||
</RadioGroup>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.labelAlign')">
|
||
<RadioGroup v-model="formConfig.labelAlign" class="radio-group-custom">
|
||
<Radio label="label-left-align">{{i18nt('designer.setting.leftAlign')}}
|
||
</Radio>
|
||
<Radio label="label-center-align">
|
||
{{i18nt('designer.setting.centerAlign')}}
|
||
</Radio>
|
||
<Radio label="label-right-align">{{i18nt('designer.setting.rightAlign')}}
|
||
</Radio>
|
||
</RadioGroup>
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.labelWidth')">
|
||
<Input type="number" v-model="formConfig.labelWidth" :min="0" style="width: 100%" />
|
||
</FormItem>
|
||
<FormItem :label="i18nt('designer.setting.formCss')" :labelWidth="180">
|
||
<Button type="info" icon="md-create" @click="editFormCss">
|
||
{{i18nt('designer.setting.addCss')}}
|
||
</Button>
|
||
</FormItem>
|
||
<!-- -->
|
||
<FormItem :label="i18nt('designer.setting.customClass')">
|
||
<Select v-model="formConfig.customClass" multiple filterable allow-create
|
||
default-first-option>
|
||
<Option v-for="(item, idx) in cssClassList" :key="idx" :label="item"
|
||
:value="item"></Option>
|
||
</Select>
|
||
</FormItem>
|
||
<!-- -->
|
||
<FormItem :label="i18nt('designer.setting.globalFunctions')" :labelWidth="180">
|
||
<Button type="info" icon="md-create" @click="editGlobalFunctions">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
</div>
|
||
</Panel>
|
||
|
||
<Panel name="2" :title="i18nt('designer.setting.eventSetting')">
|
||
{{i18nt('designer.setting.eventSetting')}}
|
||
<div slot="content">
|
||
<FormItem label="onFormCreated" :labelWidth="180">
|
||
<Button type="info" icon="md-create"
|
||
@click="editFormEventHandler('onFormCreated')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<FormItem label="onFormMounted" :labelWidth="180">
|
||
<Button type="info" icon="md-create"
|
||
@click="editFormEventHandler('onFormMounted')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<!-- -->
|
||
<FormItem label="onFormDataChange" :labelWidth="180">
|
||
<Button type="info" icon="md-create"
|
||
@click="editFormEventHandler('onFormDataChange')">
|
||
{{i18nt('designer.setting.addEventHandler')}}
|
||
</Button>
|
||
</FormItem>
|
||
<!-- -->
|
||
<!--
|
||
<FormItem label="onFormValidate">
|
||
<Button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormValidate')">
|
||
{{i18nt('designer.setting.addEventHandler')}}</Button>
|
||
</FormItem>
|
||
-->
|
||
</div>
|
||
</Panel>
|
||
</Collapse>
|
||
</Form>
|
||
</TabPane>
|
||
</Tabs>
|
||
|
||
<Modal :title="i18nt('designer.setting.editWidgetEventHandler')" v-model="showWidgetEventDialogFlag" :closable="true" class="small-padding-dialog" draggable :mask-closable="false">
|
||
<!-- <Alert :closable="false">{{(optionModel?optionModel.name:'') + '.' + eventParamsMap[curEventName]}}</Alert> -->
|
||
<div class="codeEditTip">{{(optionModel?optionModel.name:'') + '.' + eventParamsMap[curEventName]}}</div>
|
||
<code-editor v-if="showWidgetEventDialogFlag" :mode="'javascript'" :readonly="false" v-model="eventHandlerCode"></code-editor>
|
||
<div class="codeEditTip">}</div>
|
||
<div slot="footer" class="dialog-footer">
|
||
<Button size="default" @click="showWidgetEventDialogFlag = false">
|
||
{{i18nt('designer.hint.cancel')}}
|
||
</Button>
|
||
<Button size="default" type="primary" @click="saveEventHandler">
|
||
{{i18nt('designer.hint.confirm')}}
|
||
</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<Modal :title="i18nt('designer.setting.editFormEventHandler')"
|
||
v-model="showFormEventDialogFlag" :closable="true" class="small-padding-dialog" draggable
|
||
:mask-closable="false">
|
||
<div class="codeEditTip">{{'form.' + eventParamsMap[curEventName]}}</div>
|
||
<code-editor v-if="showFormEventDialogFlag" :mode="'javascript'" :readonly="false" v-model="formEventHandlerCode"></code-editor>
|
||
<div class="codeEditTip">}</div>
|
||
<div slot="footer" class="dialog-footer">
|
||
<Button size="default" @click="showFormEventDialogFlag = false">
|
||
{{i18nt('designer.hint.cancel')}}
|
||
</Button>
|
||
<Button size="default" type="primary" @click="saveFormEventHandler">
|
||
{{i18nt('designer.hint.confirm')}}
|
||
</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<Modal :title="i18nt('designer.setting.formCss')"
|
||
v-model="showEditFormCssDialogFlag" :closable="true" class="small-padding-dialog" draggable
|
||
:mask-closable="false">
|
||
<code-editor v-if="showEditFormCssDialogFlag" :mode="'css'" :readonly="false" v-model="formCssCode"></code-editor>
|
||
<div slot="footer" class="dialog-footer">
|
||
<Button size="default" @click="showEditFormCssDialogFlag = false">
|
||
{{i18nt('designer.hint.cancel')}}
|
||
</Button>
|
||
<Button size="default" type="primary" @click="saveFormCss">
|
||
{{i18nt('designer.hint.confirm')}}
|
||
</Button>
|
||
</div>
|
||
</Modal>
|
||
|
||
<Modal :title="i18nt('designer.setting.globalFunctions')"
|
||
v-model="showEditFunctionsDialogFlag" :closable="true" class="small-padding-dialog" draggable
|
||
:mask-closable="false">
|
||
<code-editor v-if="showEditFunctionsDialogFlag" :mode="'javascript'" :readonly="false" v-model="functionsCode"></code-editor>
|
||
<div slot="footer" class="dialog-footer">
|
||
<Button size="default" @click="showEditFunctionsDialogFlag = false">
|
||
{{i18nt('designer.hint.cancel')}}
|
||
</Button>
|
||
<Button size="default" type="primary" @click="saveGlobalFunctions">
|
||
{{i18nt('designer.hint.confirm')}}
|
||
</Button>
|
||
</div>
|
||
</Modal>
|
||
</Layout>
|
||
</template>
|
||
|
||
<script>
|
||
import Draggable from 'vuedraggable'
|
||
import CodeEditor from '../../code-editor/index'
|
||
import OptionItemsSetting from "../setting-panel/option-items-setting";
|
||
import {
|
||
addWindowResizeHandler,
|
||
deepClone,
|
||
insertCustomCssToHead,
|
||
insertGlobalFunctionsToHtml,
|
||
isEmptyStr
|
||
} from "@/utils/util";
|
||
import i18n from "../../utils/i18n.js";
|
||
|
||
export default {
|
||
name: "SettingPanel",
|
||
componentName: "SettingPanel",
|
||
mixins: [i18n],
|
||
components: {
|
||
Draggable,
|
||
OptionItemsSetting,
|
||
//CodeEditor: () => import('@/components/code-editor/index'),
|
||
CodeEditor,
|
||
},
|
||
props: {
|
||
designer: Object,
|
||
selectedWidget: Object,
|
||
formConfig: Object,
|
||
},
|
||
data() {
|
||
return {
|
||
scrollerHeight: 0,
|
||
|
||
nameRequiredRule: [{
|
||
required: true,
|
||
message: 'name required'
|
||
}],
|
||
|
||
activeTab: "2",
|
||
widgetActiveCollapseNames: ['1', '3'], //['1', '2', '3'],
|
||
formActiveCollapseNames: ['1', '2'],
|
||
displayTypes: [{
|
||
label: 'text',
|
||
value: 'text'
|
||
},
|
||
{
|
||
label: 'number',
|
||
value: 'number'
|
||
},
|
||
{
|
||
label: 'password',
|
||
value: 'password'
|
||
},
|
||
{
|
||
label: 'url',
|
||
value: 'url'
|
||
},
|
||
{
|
||
label: 'email',
|
||
value: 'email'
|
||
},
|
||
{
|
||
label: 'date',
|
||
value: 'date'
|
||
},
|
||
{
|
||
label: 'tel',
|
||
value: 'tel'
|
||
}
|
||
],
|
||
widgetSizes: [{
|
||
label: 'default',
|
||
value: '',
|
||
},
|
||
{
|
||
label: 'large',
|
||
value: 'large'
|
||
},
|
||
{
|
||
label: 'small',
|
||
value: 'small'
|
||
}
|
||
],
|
||
widgetSizes2: [{
|
||
label: 'default',
|
||
value: 'default',
|
||
},
|
||
{
|
||
label: 'small',
|
||
value: 'small'
|
||
}
|
||
],
|
||
tabPaneType:[{
|
||
label: 'card',
|
||
value: 'card',
|
||
},
|
||
{
|
||
label: 'line',
|
||
value: 'line'
|
||
}
|
||
],
|
||
formSizes: [{
|
||
label: 'default',
|
||
value: ''
|
||
},
|
||
{
|
||
label: 'large',
|
||
value: 'large'
|
||
},
|
||
{
|
||
label: 'small',
|
||
value: 'small'
|
||
}
|
||
],
|
||
inputControlType:[
|
||
{
|
||
label:'按钮',
|
||
value:'button'
|
||
},
|
||
// {
|
||
// label:'下拉框',
|
||
// value:'select'
|
||
// },
|
||
{
|
||
label:'文本',
|
||
value:'div'
|
||
},
|
||
],
|
||
buttonDisplayTypes:[{
|
||
label:'primary',
|
||
value:'primary'
|
||
},{
|
||
label:'default',
|
||
value:'default'
|
||
},{
|
||
label:'success',
|
||
value:'success'
|
||
},{
|
||
label:'warning',
|
||
value:'warning'
|
||
},{
|
||
label:'error',
|
||
value:'error'
|
||
},{
|
||
label:'dashed',
|
||
value:'dashed'
|
||
},{
|
||
label:'info',
|
||
value:'info'
|
||
},{
|
||
label:'text',
|
||
value:'text'
|
||
}],
|
||
labelIconPosition: [{
|
||
label: 'front',
|
||
value: 'front'
|
||
},
|
||
{
|
||
label: 'rear',
|
||
value: 'rear'
|
||
},
|
||
],
|
||
|
||
uploadPictureAccept: [
|
||
{
|
||
label: 'JPG',
|
||
value: 'image/jpg,image/jpeg'
|
||
},
|
||
{
|
||
label: 'PNG',
|
||
value: 'image/png'
|
||
},
|
||
{
|
||
label: 'GIF',
|
||
value: 'image/gif'
|
||
},
|
||
{
|
||
label: 'BMP',
|
||
value: 'image/bmp'
|
||
},
|
||
{
|
||
label: 'WEBP',
|
||
value: 'image/webp'
|
||
},
|
||
],
|
||
uploadPictureTypes: [
|
||
{
|
||
value: 'jpeg',
|
||
label: 'JPG'
|
||
},
|
||
{
|
||
value: 'png',
|
||
label: 'PNG'
|
||
},
|
||
{
|
||
value: 'gif',
|
||
label: 'GIF'
|
||
},
|
||
{
|
||
value: 'bmp',
|
||
label: 'BMP'
|
||
},
|
||
{
|
||
value: 'webp',
|
||
label: 'WEBP'
|
||
},
|
||
],
|
||
uploadFileAccept: [
|
||
{
|
||
label: '图片文件',
|
||
value: '.jpg,.jpeg,.png,.gif,image/bmp,image/webp'
|
||
},
|
||
{
|
||
label: '压缩文件',
|
||
value: '.zip,.rar,.7z,.gz,.tar'
|
||
},
|
||
{
|
||
label: 'WORD文档',
|
||
value: '.doc,.docx'
|
||
},
|
||
{
|
||
label: 'EXCEL文档',
|
||
value: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
|
||
},
|
||
{
|
||
label: 'PPT文档',
|
||
value: '.ppt,.pptx'
|
||
}
|
||
],
|
||
uploadFileTypes: [
|
||
{
|
||
value: 'jpeg',
|
||
label: 'JPG'
|
||
},
|
||
{
|
||
value: 'png',
|
||
label: 'PNG'
|
||
},
|
||
{
|
||
value: 'gif',
|
||
label: 'GIF'
|
||
},
|
||
{
|
||
value: 'bmp',
|
||
label: 'BMP'
|
||
},
|
||
{
|
||
value: 'webp',
|
||
label: 'WEBP'
|
||
},
|
||
{
|
||
value: 'doc',
|
||
label: 'doc'
|
||
},
|
||
{
|
||
value: 'xls',
|
||
label: 'xls'
|
||
},
|
||
{
|
||
value: 'docx',
|
||
label: 'docx'
|
||
},
|
||
{
|
||
value: 'xlsx',
|
||
label: 'xlsx'
|
||
},
|
||
{
|
||
value: 'ppt',
|
||
label: 'ppt'
|
||
},
|
||
{
|
||
value: 'pptx',
|
||
label: 'pptx'
|
||
},
|
||
{
|
||
value: 'zip',
|
||
label: 'zip'
|
||
},
|
||
{
|
||
value: 'rar',
|
||
label: 'rar'
|
||
},
|
||
{
|
||
value: '7z',
|
||
label: '7z'
|
||
},
|
||
{
|
||
value: 'gz',
|
||
label: 'gz'
|
||
},
|
||
{
|
||
value: 'tar',
|
||
label: 'tar'
|
||
},
|
||
],
|
||
|
||
fieldValidators: [{
|
||
value: 'number',
|
||
label: this.i18nt('designer.hint.numberValidator')
|
||
},
|
||
{
|
||
value: 'letter',
|
||
label: this.i18nt('designer.hint.letterValidator')
|
||
},
|
||
{
|
||
value: 'letterAndNumber',
|
||
label: this.i18nt('designer.hint.letterAndNumberValidator')
|
||
},
|
||
{
|
||
value: 'mobilePhone',
|
||
label: this.i18nt('designer.hint.mobilePhoneValidator')
|
||
},
|
||
{
|
||
value: 'email',
|
||
label: this.i18nt('designer.hint.emailValidator')
|
||
},
|
||
{
|
||
value: 'url',
|
||
label: this.i18nt('designer.hint.urlValidator')
|
||
},
|
||
{
|
||
value: 'noChinese',
|
||
label: this.i18nt('designer.hint.noChineseValidator')
|
||
},
|
||
{
|
||
value: 'chinese',
|
||
label: this.i18nt('designer.hint.chineseValidator')
|
||
},
|
||
],
|
||
|
||
showEditFormCssDialogFlag: false,
|
||
formCssCode: '',
|
||
cssClassList: [],
|
||
|
||
showEditFunctionsDialogFlag: false,
|
||
functionsCode: '',
|
||
|
||
showWidgetEventDialogFlag: false,
|
||
showFormEventDialogFlag: false,
|
||
eventParamsMap: {
|
||
'onCreated': 'onCreated() {',
|
||
'onMounted': 'onMounted() {',
|
||
'onClick': 'onClick() {',
|
||
'onInput': 'onInput(value) {',
|
||
'onChange': 'onChange(value, oldValue, subFormData, rowId) {',
|
||
'onFocus': 'onFocus(event)',
|
||
'onBlur': 'onBlur(event)',
|
||
'onRemoteQuery': 'onRemoteQuery(keyword) {',
|
||
'onBeforeUpload': 'onBeforeUpload(file) {',
|
||
'onUploadSuccess': 'onUploadSuccess(result, file, fileList) {',
|
||
'onUploadError': 'onUploadError(error, file, fileList) {',
|
||
'onUploadPreview': 'onUploadPreview(error, file, fileList) {',
|
||
'onUploadProgress': 'onUploadProgress(error, file, fileList) {',
|
||
'onValidate': 'onValidate(rule, value, callback)',
|
||
|
||
|
||
|
||
'onFormCreated': 'onFormCreated() {',
|
||
'onFormMounted': 'onFormMounted() {',
|
||
'onFormDataChange': 'onFormDataChange(fieldName, newValue, oldValue, formModel, subFormName, subFormRowIndex) {',
|
||
//'onFormValidate': 'onFormValidate() {',
|
||
|
||
'onSubFormRowAdd': 'onSubFormRowAdd(subFormData, newRowIndex) {',
|
||
'onSubFormRowInsert': 'onSubFormRowInsert(subFormData, newRowIndex) {',
|
||
'onSubFormRowDelete': 'onSubFormRowDelete(subFormData, deletedDataRow) {',
|
||
'onSubFormRowChange': 'onSubFormRowChange(subFormData) {',
|
||
},
|
||
eventHandlerCode: '',
|
||
formEventHandlerCode: '',
|
||
curEventName: '',
|
||
|
||
subFormChildWidgetFlag: false,
|
||
}
|
||
},
|
||
computed: {
|
||
optionModel: {
|
||
get() {
|
||
if(this.selectedWidget)
|
||
return this.selectedWidget.options
|
||
else
|
||
return null;
|
||
},
|
||
|
||
set(newValue) {
|
||
this.selectedWidget.options = newValue
|
||
}
|
||
},
|
||
|
||
minValue: {
|
||
get() {
|
||
return this.optionModel['min']
|
||
},
|
||
|
||
set(newValue) {
|
||
//if ((!newValue && (newValue !== 0)) || isNaN(newValue)) {
|
||
if ((newValue === undefined) || (newValue === null) || isNaN(newValue)) {
|
||
this.optionModel.min = null
|
||
} else {
|
||
this.optionModel.min = Number(newValue)
|
||
}
|
||
}
|
||
},
|
||
|
||
maxValue: {
|
||
get() {
|
||
return this.optionModel['max']
|
||
},
|
||
|
||
set(newValue) {
|
||
if (!newValue || isNaN(newValue)) {
|
||
this.optionModel.max = null
|
||
} else {
|
||
this.optionModel.max = Number(newValue)
|
||
}
|
||
}
|
||
},
|
||
|
||
minLength: {
|
||
get() {
|
||
return this.optionModel['minLength']
|
||
},
|
||
|
||
set(newValue) {
|
||
if (!newValue || isNaN(newValue)) {
|
||
this.optionModel.minLength = null
|
||
} else {
|
||
this.optionModel.minLength = Number(newValue)
|
||
}
|
||
}
|
||
},
|
||
|
||
maxLength: {
|
||
get() {
|
||
return this.optionModel['maxLength']
|
||
},
|
||
|
||
set(newValue) {
|
||
if (!newValue || isNaN(newValue)) {
|
||
this.optionModel.maxLength = null
|
||
} else {
|
||
this.optionModel.maxLength = Number(newValue)
|
||
}
|
||
}
|
||
},
|
||
|
||
noLabelSetting() {
|
||
return (this.selectedWidget.type === 'static-text') || (this.selectedWidget.type === 'html-text')
|
||
//|| (this.selectedWidget.type === 'divider')
|
||
},
|
||
|
||
},
|
||
watch: {
|
||
'designer.selectedWidget': {
|
||
handler(val) {
|
||
if (!!val) {
|
||
this.activeTab = "1"
|
||
}
|
||
}
|
||
},
|
||
|
||
'selectedWidget.options': { //组件属性变动后，立即保存表单JSON！！
|
||
deep: true,
|
||
handler(val) {
|
||
this.designer.saveCurrentHistoryStep()
|
||
}
|
||
},
|
||
|
||
formConfig: {
|
||
deep: true,
|
||
handler(val) {
|
||
this.designer.saveCurrentHistoryStep()
|
||
}
|
||
},
|
||
|
||
},
|
||
mounted() {
|
||
if (!this.designer.selectedWidget) {
|
||
this.activeTab = "2"
|
||
} else {
|
||
this.activeTab = "1"
|
||
}
|
||
|
||
this.scrollerHeight = window.innerHeight - 56 - 48 // + 'px'
|
||
addWindowResizeHandler(() => {
|
||
this.$nextTick(() => {
|
||
this.scrollerHeight = window.innerHeight - 56 - 48 // + 'px'
|
||
//console.log(this.scrollerHeight)
|
||
})
|
||
})
|
||
|
||
this.designer.handleEvent('field-selected', (parentWidget) => {
|
||
this.subFormChildWidgetFlag = !!parentWidget && (parentWidget.type === 'sub-form');
|
||
})
|
||
|
||
//console.log('mounted--', this.formConfig.cssCode)
|
||
/*
|
||
this.formCssCode = this.formConfig.cssCode
|
||
insertCustomCssToHead(this.formCssCode)
|
||
this.extractCssClass()
|
||
*/
|
||
/* SettingPanel和FormWidget为兄弟组件, 在FormWidget加载formConfig时，
|
||
此处SettingPanel可能无法获取到formConfig.cssCode, 故加个延时函数！ */
|
||
setTimeout(() => {
|
||
this.formCssCode = this.formConfig.cssCode
|
||
insertCustomCssToHead(this.formCssCode)
|
||
this.extractCssClass()
|
||
}, 1200)
|
||
},
|
||
methods: {
|
||
updateWidgetNameAndRef(newName) {
|
||
let oldName = this.designer.selectedWidgetName
|
||
if (isEmptyStr(newName)) {
|
||
this.selectedWidget.options.name = oldName
|
||
this.$message.info(this.i18nt('designer.hint.nameRequired'))
|
||
return
|
||
}
|
||
|
||
if (!!this.designer.formWidget) {
|
||
//检查newName是否已存在！！
|
||
let foundRef = this.designer.formWidget.getWidgetRef(newName)
|
||
if (!!foundRef) {
|
||
this.selectedWidget.options.name = oldName
|
||
this.$message.info(this.i18nt('designer.hint.duplicateName') + newName)
|
||
return
|
||
}
|
||
|
||
let fieldWidget = this.designer.formWidget.getWidgetRef(oldName)
|
||
if (!!fieldWidget && !!fieldWidget.registerToRefList) {
|
||
fieldWidget.registerToRefList(oldName)
|
||
this.designer.updateSelectedWidgetNameAndRef(this.selectedWidget, newName)
|
||
}
|
||
}
|
||
},
|
||
|
||
spanChanged(curGrid, col, colIdx, newValue, oldValue) {
|
||
let spanSum = 0
|
||
curGrid.cols.forEach((colItem, idx) => {
|
||
spanSum += colItem.options.span
|
||
})
|
||
if (spanSum > 24) {
|
||
//this.$message.info('列栅格之和超出24')
|
||
console.log('列栅格之和超出24')
|
||
//TODO: 语言字符串资源化
|
||
}
|
||
|
||
this.updateCurrentHistoryStep()
|
||
},
|
||
|
||
updateCurrentHistoryStep() {
|
||
this.designer.saveCurrentHistoryStep()
|
||
},
|
||
|
||
deleteCol(curGrid, colIdx) {
|
||
this.designer.deleteColOfGrid(curGrid, colIdx)
|
||
this.designer.emitHistoryChange()
|
||
},
|
||
|
||
addNewCol(curGrid) {
|
||
this.designer.addNewColOfGrid(curGrid)
|
||
this.designer.emitHistoryChange()
|
||
},
|
||
|
||
hasConfig(configName) {
|
||
if (!this.designer || !this.designer.selectedWidget) {
|
||
return false
|
||
}
|
||
|
||
return this.designer.hasConfig(this.selectedWidget, configName)
|
||
},
|
||
|
||
inputNumberHandler({})
|
||
{
|
||
target.value = target.value.replace(/[^0-9]/gi, '')
|
||
// if (target.value === '') {
|
||
// target.value = null
|
||
// } else {
|
||
// target.value = Number(target.value) //TODO: 为什么还是转化为字符串？？
|
||
// }
|
||
},
|
||
|
||
emitDefaultValueChange() {
|
||
if (!!this.designer) {
|
||
if (!!this.designer.formWidget) {
|
||
let fieldWidget = this.designer.formWidget.getWidgetRef(this.designer.selectedWidget.options.name)
|
||
if (!!fieldWidget && !!fieldWidget.refreshDefaultValue) {
|
||
fieldWidget.refreshDefaultValue()
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
addTabPane(curTabs) {
|
||
this.designer.addTabPaneOfTabs(curTabs)
|
||
this.designer.emitHistoryChange()
|
||
},
|
||
|
||
deleteTabPane(curTabs, tpIdx) {
|
||
if (curTabs.tabs.length === 1) {
|
||
this.$message.info(this.i18nt('designer.hint.lastPaneCannotBeDeleted'))
|
||
return
|
||
}
|
||
|
||
this.designer.deleteTabPaneOfTabs(curTabs, tpIdx)
|
||
this.designer.emitHistoryChange()
|
||
},
|
||
|
||
onTabPaneActiveChange(evt, tpItem) {
|
||
//TODO: !!!
|
||
},
|
||
|
||
onMultipleSelected(val) {
|
||
if (val) {
|
||
this.optionModel.defaultValue = [] //清空原默认值!!
|
||
} else {
|
||
if (!!this.optionModel.defaultValue && (this.optionModel.defaultValue.length > 0)) {
|
||
this.optionModel.defaultValue = this.optionModel.defaultValue[0]
|
||
} else {
|
||
this.optionModel.defaultValue = ''
|
||
}
|
||
}
|
||
},
|
||
|
||
onRemoteChange(val) {
|
||
if (!!val) {
|
||
this.optionModel.filterable = true
|
||
this.optionModel.allowCreate = false
|
||
}
|
||
},
|
||
|
||
editFormCss() {
|
||
this.formCssCode = this.designer.formConfig.cssCode
|
||
this.showEditFormCssDialogFlag = true
|
||
},
|
||
|
||
extractCssClass() {
|
||
let regExp = /\..*{/g
|
||
let result = this.formCssCode.match(regExp)
|
||
//this.cssClassList.length = 0
|
||
this.cssClassList.splice(0, this.cssClassList.length) //清除数组必须用splice，length=0不会响应式更新！！
|
||
if (!!result && result.length > 0) {
|
||
result.forEach((rItem, rIdx) => {
|
||
let classArray = rItem.split(',') //切分逗号分割的多个class
|
||
if (classArray.length > 0) {
|
||
classArray.forEach((cItem, cIdx) => {
|
||
let caItem = cItem.trim()
|
||
if (caItem.indexOf('.', 1) !== -1) { //查找第二个.位置
|
||
let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem
|
||
.indexOf('.', 1)) //仅截取第一、二个.号之间的class
|
||
if (!!newClass) {
|
||
this.cssClassList.push(newClass.trim())
|
||
}
|
||
} else if (caItem.indexOf(' ') !== -1) { //查找第一个空格位置
|
||
let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem
|
||
.indexOf(' ')) //仅截取第一、二个.号之间的class
|
||
if (!!newClass) {
|
||
this.cssClassList.push(newClass.trim())
|
||
}
|
||
} else {
|
||
if (caItem.indexOf('{') !== -1) { //查找第一个{位置
|
||
let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem
|
||
.indexOf('{'))
|
||
this.cssClassList.push(newClass.trim())
|
||
} else {
|
||
let newClass = caItem.substring(caItem.indexOf('.') + 1)
|
||
this.cssClassList.push(newClass.trim())
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
|
||
saveFormCss() {
|
||
this.extractCssClass()
|
||
this.designer.formConfig.cssCode = this.formCssCode
|
||
insertCustomCssToHead(this.formCssCode)
|
||
this.showEditFormCssDialogFlag = false
|
||
},
|
||
|
||
editGlobalFunctions() {
|
||
this.functionsCode = this.designer.formConfig.functions
|
||
this.showEditFunctionsDialogFlag = true
|
||
},
|
||
|
||
saveGlobalFunctions() {
|
||
this.designer.formConfig.functions = this.functionsCode
|
||
insertGlobalFunctionsToHtml(this.functionsCode)
|
||
this.showEditFunctionsDialogFlag = false
|
||
},
|
||
|
||
editEventHandler(eventName) {
|
||
this.curEventName = eventName
|
||
this.eventHandlerCode = this.selectedWidget.options[eventName] || ''
|
||
|
||
// 设置字段校验函数示例代码
|
||
if ((eventName === 'onValidate') && (!this.optionModel['onValidate'])) {
|
||
this.eventHandlerCode =
|
||
" /* sample code */\n /*\n if ((value > 100) || (value < 0)) {\n callback(new Error('error message')) //fail\n } else {\n callback(); //pass\n }\n */"
|
||
}
|
||
|
||
this.showWidgetEventDialogFlag = true
|
||
},
|
||
|
||
saveEventHandler() {
|
||
this.selectedWidget.options[this.curEventName] = this.eventHandlerCode
|
||
this.showWidgetEventDialogFlag = false
|
||
},
|
||
|
||
editFormEventHandler(eventName) {
|
||
this.curEventName = eventName
|
||
this.formEventHandlerCode = this.formConfig[eventName]
|
||
this.showFormEventDialogFlag = true
|
||
},
|
||
|
||
saveFormEventHandler() {
|
||
this.formConfig[this.curEventName] = this.formEventHandlerCode
|
||
this.showFormEventDialogFlag = false
|
||
},
|
||
updateFormView(){
|
||
console.log("Upload Form View");
|
||
let $this=this;
|
||
this.$nextTick(() => {
|
||
$this.$forceUpdate();
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.panel-container {
|
||
padding: 0 8px;
|
||
|
||
}
|
||
::v-deep .ivu-tabs-bar{
|
||
margin-bottom: 7px;
|
||
}
|
||
::v-deep .ivu-scroll-loader{
|
||
display:none;
|
||
}
|
||
|
||
.setting-scrollbar {
|
||
::v-deep .el-scrollbar__wrap {
|
||
overflow-x: hidden;
|
||
/* IE浏览器隐藏水平滚动条箭头！！ */
|
||
}
|
||
}
|
||
|
||
.setting-collapse {
|
||
::v-deep .el-collapse-item__content {
|
||
padding-bottom: 6px;
|
||
}
|
||
|
||
::v-deep .el-collapse-item__header {
|
||
font-style: italic;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.setting-form {
|
||
::v-deep .FormItem__label {
|
||
font-size: 13px;
|
||
//text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
::v-deep .FormItem--mini.FormItem {
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.radio-group-custom {
|
||
::v-deep .Radio__inner {
|
||
padding-left: 12px;
|
||
padding-right: 12px;
|
||
}
|
||
}
|
||
|
||
/deep/ .ivu-form-item{
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
|
||
li.col-item {
|
||
list-style: none;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span.col-span-title {
|
||
display: inline-block;
|
||
font-size: 13px;
|
||
width: 120px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.col-delete-button {
|
||
margin-left: 6px;
|
||
padding-top:1px;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
.codeEditTip{
|
||
color:#909399;
|
||
background-color: #f4f4f5;
|
||
padding-left:20px;
|
||
line-height:30px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
|
||
/* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
|
||
::v-deep .hide-spin-button input::-webkit-outer-spin-button,
|
||
::v-deep .hide-spin-button input::-webkit-inner-spin-button {
|
||
-webkit-appearance: none !important;
|
||
}
|
||
|
||
/* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
|
||
::v-deep .hide-spin-button input[type="number"] {
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
.custom-divider.el-divider--horizontal {
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.custom-divider-margin-top.el-divider--horizontal {
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.small-padding-dialog {
|
||
::v-deep .el-dialog__body {
|
||
padding: 6px 15px 12px 15px;
|
||
}
|
||
}
|
||
|
||
.panes-setting {
|
||
ul {
|
||
padding-inline-start: 0;
|
||
padding-left: 0;
|
||
/* 重置IE11默认样式 */
|
||
margin: 0;
|
||
}
|
||
|
||
.drag-option {
|
||
cursor: move;
|
||
}
|
||
|
||
li.ghost {
|
||
background: #fff;
|
||
border: 2px dotted $--color-primary;
|
||
}
|
||
}
|
||
</style>
|