import { getVModelHtml, formItemWrapper, colWrapper } from './common/htmlWrapper'
|
|
// 创建“el-date-picker”
|
function createDatePickerHtml(formJson, dateRange, parent) {
|
const vModel = getVModelHtml(formJson, dateRange, parent)
|
const placeholder = dateRange.placeholder ? `placeholder="${dateRange.placeholder}"` : ''
|
const width = dateRange.style && dateRange.style.width ? ':style="{width: \'100%\'}"' : ''
|
const disabled = dateRange.disabled ? ':disabled=\'true\'' : ''
|
const readonly = dateRange.readonly ? 'readonly' : ''
|
const format = dateRange.format ? `format="${dateRange.format}"` : ''
|
const valueFormat = dateRange['value-format'] ? `value-format="${dateRange['value-format']}"` : ''
|
const startPlaceholder = dateRange['start-placeholder'] ? `start-placeholder="${dateRange['start-placeholder']}"` : ''
|
const endPlaceholder = dateRange['end-placeholder'] ? `end-placeholder="${dateRange['end-placeholder']}"` : ''
|
const rangeSeparator = dateRange['range-separator'] ? `range-separator="${dateRange['range-separator']}"` : ''
|
const type = dateRange.type ? `type="${dateRange.type}"` : ''
|
|
return `<el-date-picker ${type} ${vModel} ${format} ${valueFormat} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${width} ${readonly} ${disabled}></el-date-picker>`
|
}
|
|
/**
|
* 获取“日期范围”HTML
|
* @param formJson 表单结构
|
* @param dateRange “日期范围”组件
|
* @param parent 父组件（dialog, table...）
|
* @param isSomeSpanUnequal24 是否有的组件“span”不等于“24”
|
* @returns {string} “日期范围”HTML
|
*/
|
export default function getDateRangeHtml(formJson, dateRange, parent, isSomeSpanUnequal24) {
|
// 创建“el-date-picker”
|
const datePickerHtml = createDatePickerHtml(formJson, dateRange, parent)
|
|
// 用“el-form-item”包裹“el-date-picker”
|
let formItemHtml = formItemWrapper(formJson, dateRange, datePickerHtml)
|
|
// span不为24的用“el-col”包裹组件
|
if (isSomeSpanUnequal24) {
|
formItemHtml = colWrapper(dateRange, formItemHtml)
|
}
|
|
return formItemHtml
|
}
|
