<template>
|
<div v-if="show" class="widget-config-container">
|
<el-form label-position="top">
|
<!--字段字段参数-->
|
<template v-if="['field'].indexOf(data.type)>=0">
|
<!--标题样式-->
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="标题名称">
|
<el-input v-model="data.label.title" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="图层顺序">
|
<el-input v-model.number="data.options.z" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="标题宽度(mm)">
|
<el-input v-model="data.label.styles.width" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="标题对齐">
|
<el-select v-model="data.label.styles['text-align']">
|
<el-option value="left">left</el-option>
|
<el-option value="center">center</el-option>
|
<el-option value="right">right</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="标题行高(mm)">
|
<el-input v-model="data.label.styles['line-height']" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="标题字体大小">
|
<el-input v-model="data.label.styles['font-size']" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="标题后面显示冒号">
|
<el-switch v-model="data.label.showColon"></el-switch>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="粗体">
|
<el-select v-model="data.styles['font-weight']" placeholder="请选择">
|
<el-option :value="'normal'" label="normal"></el-option>
|
<el-option :value="'bold'" label="bold" />
|
<el-option :value="'bolder'" label="bolder"></el-option>
|
<el-option :value="'lighter'" label="lighter"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!--绑定字段样式-->
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="绑定字段">
|
<el-input v-model="data.text.prop" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="字段行高(mm)">
|
<el-input v-model="data.text.styles['line-height']" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="字段宽度(mm)">
|
<el-input v-model="data.text.styles.width" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="字段对齐">
|
<el-select v-model="data.text.styles['text-align']">
|
<el-option value="left">left</el-option>
|
<el-option value="center">center</el-option>
|
<el-option value="right">right</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="字段字体大小">
|
<el-input v-model="data.text.styles['font-size']" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="换行模式">
|
<el-select v-model="data.text.styles['white-space']">
|
<el-option value="normal">normal空白会被浏览器忽略</el-option>
|
<el-option value="pre">pre空白会被浏览器保留</el-option>
|
<el-option value="nowrap">nowrap文本不会换行，文本会在在同一行上继续</el-option>
|
<el-option value="pre-wrap">pre-wrap保留空白符序列，但是正常地进行换行</el-option>
|
<el-option value="pre-line">pre-line合并空白符序列，但是保留换行符</el-option>
|
<el-option value="inherit">inherit从父元素继承</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="数据类型">
|
<el-select v-model="data.text.dataType" placeholder="请选择数据类型">
|
<el-option v-for="item in dataTypeList" :key="item.ID" :label="item.label" :value="item.ID">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="格式化">
|
<el-select v-model="data.text.formatter">
|
<el-option label="[空]" value=""></el-option>
|
<el-option label="YYYY-MM-DD" value="YYYY-MM-DD"></el-option>
|
<el-option label="YYYY-MM-DD HH:mm:ss" value="YYYY-MM-DD HH:mm:ss"></el-option>
|
<el-option label="￥#.00" value="￥#.00"></el-option>
|
<el-option label="#" value="#"></el-option>
|
<el-option label="#.#" value="#.#"></el-option>
|
<el-option label="#.##" value="#.##"></el-option>
|
<el-option label="#.###" value="#.###"></el-option>
|
<el-option label="#.####" value="#.####"></el-option>
|
<el-option label="#.0" value="#.0"></el-option>
|
<el-option label="#.00" value="#.00"></el-option>
|
<el-option label="#.000" value="#.000"></el-option>
|
<el-option label="#.0000" value="#.0000"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
<!--普通字段参数-->
|
<template v-if="['input'].indexOf(data.type)>=0">
|
<!--标题样式-->
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="标题名称">
|
<el-input v-model="data.label.title" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="图层顺序">
|
<el-input v-model.number="data.options.z" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="文本宽度(mm)">
|
<el-input v-model="data.label.styles.width" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="标题对齐">
|
<el-select v-model="data.label.styles['text-align']">
|
<el-option value="left">left</el-option>
|
<el-option value="center">center</el-option>
|
<el-option value="right">right</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="文本行高(mm)">
|
<el-input v-model="data.label.styles['line-height']" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="文本排列">
|
<el-select v-model="data.label.styles['writing-mode']">
|
<el-option value="horizontal-tb">水平方向</el-option>
|
<el-option value="vertical-rl">垂直方向，从右向左</el-option>
|
<el-option value="vertical-lr">垂直方向，从左向右</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="15">
|
<el-col :span="12">
|
<el-form-item label="字体大小">
|
<el-input v-model="data.styles['font-size']" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="粗体">
|
<el-select v-model="data.styles['font-weight']" placeholder="请选择">
|
<el-option :value="'normal'" label="normal"></el-option>
|
<el-option :value="'bold'" label="bold" />
|
<el-option :value="'bolder'" label="bolder"></el-option>
|
<el-option :value="'lighter'" label="lighter"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="字体风格">
|
<el-select v-model="data.styles['font-style']" placeholder="请选择">
|
<el-option label="正常" value="normal"></el-option>
|
<el-option label="斜体" value="italic"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="下划线">
|
<el-select v-model="data.styles['text-decoration']" placeholder="请选择">
|
<el-option :value="'none'" label="无"></el-option>
|
<el-option :value="'underline'" label="下划线" />
|
<el-option :value="'line-through'" label="删除线"></el-option>
|
<el-option :value="'overline'" label="上划线"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="换行模式">
|
<el-select v-model="data.label.styles['white-space']">
|
<el-option value="normal">normal空白会被浏览器忽略</el-option>
|
<el-option value="pre">pre空白会被浏览器保留</el-option>
|
<el-option value="nowrap">nowrap文本不会换行，文本会在在同一行上继续</el-option>
|
<el-option value="pre-wrap">pre-wrap保留空白符序列，但是正常地进行换行</el-option>
|
<el-option value="pre-line">pre-line合并空白符序列，但是保留换行符</el-option>
|
<el-option value="inherit">inherit从父元素继承</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
<!--明细参数-->
|
<template v-if="['table'].indexOf(data.type)>=0">
|
<!--标题样式-->
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="标题名称">
|
<el-input v-model="data.label.title" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="图层顺序">
|
<el-input v-model.number="data.options.z" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="10">
|
<el-col :span="14">
|
<el-form-item label="关联表名">
|
<el-input v-model="data.tableView" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="10">
|
<el-form-item label="显示为字符串">
|
<el-switch v-model="data.onlyOnline" :active-value="true" :inactive-value="false"></el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="表格宽度">
|
<el-input v-model="data.width" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="表格颜色">
|
<el-select v-model="data.borderColor" placeholder="请选择">
|
<el-option label="#000000" value="#000000"></el-option>
|
<el-option label="#DCDFE6" value="#DCDFE6"></el-option>
|
<el-option label="#E4E7ED" value="#E4E7ED"></el-option>
|
<el-option label="#EBEEF5" value="#EBEEF5"></el-option>
|
<el-option label="#F2F6FC" value="#F2F6FC"></el-option>
|
<el-option label="#FFFFFF" value="#FFFFFF"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="显示表头">
|
<el-switch v-model="data.showHeader" :active-value="true" :inactive-value="false"></el-switch>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="分页大小">
|
<el-input-number v-model.number="data.pageSize" :min="1" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
<!--明细字段参数-->
|
<template v-if="['detail-field'].indexOf(data.type)>=0">
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="标题名称">
|
<el-input v-model="data.label" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="关联字段名">
|
<el-input v-model="data.prop" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="列宽">
|
<el-input-number v-model.number="data.width" type="text" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="标题行高">
|
<el-input-number v-model.number="data.header.lineHeight" type="text" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="标题对齐方式">
|
<el-select v-model="data.header.textAlign">
|
<el-option value="left">left</el-option>
|
<el-option value="center">center</el-option>
|
<el-option value="right">right</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="标题字体大小">
|
<el-input-number v-model.number="data.header.fontSize" type="text" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="内容对齐方式">
|
<el-select v-model="data.body.textAlign">
|
<el-option value="left">left</el-option>
|
<el-option value="center">center</el-option>
|
<el-option value="right">right</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="内容字体大小">
|
<el-input-number v-model.number="data.body.fontSize" type="text" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="内容行高">
|
<el-input-number v-model.number="data.body.lineHeight" type="text" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="0值不显示">
|
<el-switch v-model="data.body.zeroHide" :active-value="true" :inactive-value="false"></el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="数据类型">
|
<el-select v-model="data.body.dataType" placeholder="请选择数据类型">
|
<el-option v-for="item in dataTypeList" :key="item.ID" :label="item.label" :value="item.ID">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="格式化">
|
<el-select v-model="data.body.formatter">
|
<el-option label="[空]" value=""></el-option>
|
<el-option label="YYYY-MM-DD" value="YYYY-MM-DD"></el-option>
|
<el-option label="YYYY-MM-DD HH:mm:ss" value="YYYY-MM-DD HH:mm:ss"></el-option>
|
<el-option label="￥#.00" value="￥#.00"></el-option>
|
<el-option label="#" value="#"></el-option>
|
<el-option label="#.#" value="#.#"></el-option>
|
<el-option label="#.##" value="#.##"></el-option>
|
<el-option label="#.###" value="#.###"></el-option>
|
<el-option label="#.####" value="#.####"></el-option>
|
<el-option label="#.0" value="#.0"></el-option>
|
<el-option label="#.00" value="#.00"></el-option>
|
<el-option label="#.000" value="#.000"></el-option>
|
<el-option label="#.0000" value="#.0000"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="显示最大长度">
|
<el-input-number v-model.number="data.body.maxLength" type="text" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
<!--线条字段参数-->
|
<template v-if="['line-horizontal', 'line-vertical'].indexOf(data.type)>=0">
|
<!--标题样式-->
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="标题名称">
|
<el-input v-model="data.label.title" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="图层顺序">
|
<el-input v-model.number="data.options.z" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
|
<!--分页码参数-->
|
<template v-if="['pagination'].indexOf(data.type)>=0">
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="名称">
|
<el-input v-model="data.label.title" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="样式">
|
<el-select v-model="data.layout">
|
<el-option value="1/5">1/5</el-option>
|
<el-option value="第1/5页">第1/5页</el-option>
|
<el-option value="第1页/共5页">第1页/共5页</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="字体大小">
|
<el-input v-model="data.styles['font-size']" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="粗体">
|
<el-select v-model="data.styles['font-weight']" placeholder="请选择">
|
<el-option :value="'normal'" label="normal"></el-option>
|
<el-option :value="'bold'" label="bold" />
|
<el-option :value="'bolder'" label="bolder"></el-option>
|
<el-option :value="'lighter'" label="lighter"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="行高">
|
<el-input v-model="data.styles['line-height']" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="对齐方式">
|
<el-select v-model="data.styles['text-align']" placeholder="请选择">
|
<el-option :value="'left'" label="left"></el-option>
|
<el-option :value="'center'" label="center" />
|
<el-option :value="'right'" label="right"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
|
<!--一维码参数-->
|
<template v-if="['barcode'].indexOf(data.type)>=0">
|
<!--标题样式-->
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="标题名称">
|
<el-input v-model="data.label.title" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="图层顺序">
|
<el-input v-model.number="data.options.z" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="绑定字段">
|
<el-input v-model="data.barcode.value" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="Web条码格式">
|
<el-select v-model="data.barcode.options.format">
|
<el-option value="CODE128">CODE128</el-option>
|
<el-option value="CODE39">CODE39</el-option>
|
<el-option value="codabar">codabar</el-option>
|
<el-option value="EAN13">EAN13</el-option>
|
<el-option value="UPC">UPC</el-option>
|
<el-option value="EAN8">EAN8</el-option>
|
<el-option value="EAN5">EAN5</el-option>
|
<el-option value="EAN2">EAN2</el-option>
|
<el-option value="ITF14">ITF14</el-option>
|
<el-option value="pharmacode">pharmacode</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="Lodop条码格式">
|
<el-select v-model="data.barcode.options.lodopBarcode">
|
<el-option label="128A" value="128A"></el-option>
|
<el-option label="128B" value="128B"></el-option>
|
<el-option label="128C" value="128C"></el-option>
|
<el-option label="128Auto" value="128Auto"></el-option>
|
<el-option label="EAN8" value="EAN8"></el-option>
|
<el-option label="EAN13" value="EAN13"></el-option>
|
<el-option label="EAN128A" value="EAN128A"></el-option>
|
<el-option label="EAN128B" value="EAN128B"></el-option>
|
<el-option label="EAN128C" value="EAN128C"></el-option>
|
<el-option label="Code39" value="Code39"></el-option>
|
<el-option label="39Extended" value="39Extended"></el-option>
|
<el-option label="UPC_A" value="UPC_A"></el-option>
|
<el-option label="UPC_E0" value="UPC_E0"></el-option>
|
<el-option label="Code93" value="Code93"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="旋转角度">
|
<el-select v-model="data.styles['-webkit-transform']">
|
<el-option label="0" value="rotate(0deg)"></el-option>
|
<el-option label="90" value="rotate(90deg)"></el-option>
|
<el-option label="180" value="rotate(180deg)"></el-option>
|
<el-option label="270" value="rotate(270deg)"></el-option>
|
<el-option label="360" value="rotate(360deg)"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="Bar宽度">
|
<el-input-number v-model.number="data.barcode.options.width" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="Bar高度">
|
<el-input-number v-model.number="data.barcode.options.height" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="显示文本">
|
<el-switch v-model="data.barcode.options.displayValue"></el-switch>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="文本字体">
|
<el-select v-model="data.barcode.options.font">
|
<el-option value="monospace">monospace</el-option>
|
<el-option value="SimSun">宋体</el-option>
|
<el-option value="SimHei">黑体</el-option>
|
<el-option value="Microsoft YaHei">微软雅黑</el-option>
|
<el-option value="Microsoft JhengHei">微软正黑体</el-option>
|
<el-option value="NSimSun">新宋体</el-option>
|
<el-option value="PMingLiU">新细明体</el-option>
|
<el-option value="DFKai-SB">标楷体</el-option>
|
<el-option value="STXihei">华文细黑</el-option>
|
<el-option value="LiSu">隶书</el-option>
|
<el-option value="FZShuTi">方正舒体</el-option>
|
<el-option value="Arial">Arial</el-option>
|
<el-option value="Helvetica">Helvetica</el-option>
|
<el-option value="Tahoma">Tahoma</el-option>
|
<el-option value="Verdana">Verdana</el-option>
|
<el-option value="Lucida Grande">Lucida Grande</el-option>
|
<el-option value="Times New Roman">Times New Roman</el-option>
|
<el-option value="Georgia">Georgia</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="文本对齐">
|
<el-select v-model="data.barcode.options.textAlign">
|
<el-option value="left">left</el-option>
|
<el-option value="center">center</el-option>
|
<el-option value="right">right</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="文本位置">
|
<el-select v-model="data.barcode.options.textPosition">
|
<el-option value="bottom">bottom</el-option>
|
<el-option value="top">top</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="条码与文字间距">
|
<el-input-number v-model.number="data.barcode.options.textMargin" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="字体大小">
|
<el-input-number v-model.number="data.barcode.options.fontSize" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="背景颜色">
|
<el-color-picker v-model="data.barcode.options.background" show-alpha></el-color-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="条码颜色">
|
<el-color-picker v-model="data.barcode.options.lineColor" show-alpha></el-color-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="上边距">
|
<el-input-number v-model.number="data.barcode.options.marginTop" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="下边距">
|
<el-input-number v-model.number="data.barcode.options.marginBottom" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="左边距">
|
<el-input-number v-model.number="data.barcode.options.marginLeft" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="右边距">
|
<el-input-number v-model.number="data.barcode.options.marginRight" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
|
<!--二维码参数-->
|
<template v-if="['qrcode'].indexOf(data.type)>=0">
|
<!--标题样式-->
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="标题名称">
|
<el-input v-model="data.label.title" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="图层顺序">
|
<el-input v-model.number="data.options.z" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="绑定字段">
|
<el-input v-model="data.qrOptions.value" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="Bar宽度">
|
<el-input-number v-model.number="data.qrOptions.width" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="背景颜色">
|
<el-color-picker v-model="data.qrOptions.color.light"></el-color-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="二维码颜色">
|
<el-color-picker v-model="data.qrOptions.color.dark"></el-color-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="边距">
|
<el-input-number v-model.number="data.qrOptions.margin" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
|
<!--图片参数-->
|
<template v-if="['image'].indexOf(data.type)>=0">
|
<!--标题样式-->
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="标题名称">
|
<el-input v-model="data.label.title" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="图层顺序">
|
<el-input v-model.number="data.options.z" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="宽度">
|
<el-input-number v-model.number="data.image.width" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="高度">
|
<el-input-number v-model.number="data.image.height" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="24">
|
<el-form-item label="图片路径">
|
<el-input v-model="data.image.imageUrl" controls-position="right"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="24">
|
<el-form-item label="上传API接口">
|
<el-input v-model="data.image.serverAction" controls-position="right"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
|
<!--定位样式-->
|
<template v-if="Object.keys(data).indexOf('options')>=0">
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="x">
|
<el-input-number v-model.number="data.options.x" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="y">
|
<el-input-number v-model.number="data.options.y" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="宽度">
|
<el-input-number v-model.number="data.options.w" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="高度">
|
<el-input-number v-model.number="data.options.h" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="最小宽度">
|
<el-input-number v-model.number="data.options.minw" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="最小高度">
|
<el-input-number v-model.number="data.options.minh" controls-position="right" class="w-130"></el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="开启吸附">
|
<el-switch v-model="data.options.snap" :active-value="true" :inactive-value="false"></el-switch>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="对齐距离">
|
<el-input v-model="data.options.snapTolerance" type="text"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
|
<el-form-item v-if="Object.keys(data).indexOf('key')>=0" label="key">
|
<el-input v-model="data.key" type="text"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import Draggable from "vuedraggable";
|
const _dataTypeList = [
|
{ ID: "none", Name: "none" },
|
{ ID: "string", Name: "string" },
|
{ ID: "int16", Name: "int16" },
|
{ ID: "int32", Name: "int32" },
|
{ ID: "int64", Name: "int64" },
|
{ ID: "boolean", Name: "boolean" },
|
{ ID: "datetime", Name: "datetime" },
|
{ ID: "date", Name: "date" },
|
{ ID: "decimal", Name: "decimal" },
|
{ ID: "double", Name: "double" },
|
{ ID: "single", Name: "single" },
|
{ ID: "byte", Name: "byte" },
|
{ ID: "guid", Name: "guid" },
|
{ ID: "object", Name: "object" },
|
{ ID: "month", Name: "month" }
|
];
|
|
export default {
|
components: {
|
Draggable
|
},
|
props: {
|
data: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
}
|
},
|
data() {
|
return {
|
// 数据类型列表
|
dataTypeList: _dataTypeList
|
};
|
},
|
computed: {
|
show() {
|
if (this.data && Object.keys(this.data).length > 0) {
|
return true;
|
}
|
return false;
|
}
|
},
|
methods: {}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.widget-config-container {
|
padding-bottom: 20px;
|
.el-form-item {
|
margin-bottom: 5px;
|
}
|
/deep/ .el-form--label-top .el-form-item__label {
|
padding: 0 0 2px;
|
}
|
}
|
</style>
|
