Skip to content

F
ferry_web
Commit 251356b3 by Mr. Lan
Options

添加标签宽度。

parent 54340b89
Showing with 127 additions and 41 deletions
src/components/VueFormMaking/components/Container.vue
......@@ -321,9 +321,6 @@ export default {
}
})
},
handleGoGithub() {
window.location.href = 'https://github.com/GavinZhuLei/vue-form-making'
},
handleConfigSelect(value) {
this.configTab = value
},
......
src/components/VueFormMaking/components/GenerateFormItem.vue
<template>
<el-form-item
:label-width="widget.type==='divider' || (widget.type==='text' && widget.options.textLabelStatus===false)?'0px':data.config.labelWidth + 'px'"
:label-width="widgetLabelWidth + 'px'"
:label="widget.type==='divider' || (widget.type==='text' && widget.options.textLabelStatus===false)?'':widget.name"
:prop="widget.model"
>
......@@ -249,6 +249,7 @@ export default {
props: ['widget', 'models', 'rules', 'remote', 'data', 'disabled'],
data() {
return {
widgetLabelWidth: '',
dataModel: this.models[this.widget.model]
}
},
......@@ -295,6 +296,17 @@ export default {
} else {
this.widget.options.disabled = this.disabled
}
// label width
if (this.widget.options.labelWidthDisabled) {
this.widgetLabelWidth = this.widget.options.labelWidth
} else if (this.widget.type==='grid' ||
this.widget.type==='divider' ||
(this.widget.type==='text' && this.widget.options.textLabelStatus===false)) {
this.widgetLabelWidth = 0
} else {
this.widgetLabelWidth = this.data.config.labelWidth
}
},
methods: {
}
......
src/components/VueFormMaking/components/WidgetConfig.vue
<template>
<div v-if="show">
<el-form label-position="top">
<!-- 字段标识 -->
<el-form-item v-if="data.type!='grid'" :label="$t('fm.config.widget.model')">
<el-input v-model="data.model" />
</el-form-item>
<!-- 标题 -->
<el-form-item v-if="data.type!=='grid' && data.type!=='divider'" :label="$t('fm.config.widget.name')">
<el-input v-model="data.name" />
</el-form-item>
<!-- 宽度 -->
<el-form-item v-if="Object.keys(data.options).indexOf('width')>=0" :label="$t('fm.config.widget.width')">
<el-input v-model="data.options.width" />
</el-form-item>
<!-- 兰玉磊开始添加 -->
<!-- 标签宽度 -->
<el-form-item
v-if="Object.keys(data.options).indexOf('labelWidth')>=0 &&
data.type!=='grid' &&
data.type !== 'divider'"
:label="$t('fm.config.widget.labelWidth')"
>
<el-checkbox v-model="data.options.labelWidthDisabled">自定义</el-checkbox>
<el-input-number v-model="data.options.labelWidth" :min="1" :disabled="!data.options.labelWidthDisabled" />
</el-form-item>
<!-- 兰玉磊结束添加 -->
<!-- 高度 -->
<el-form-item v-if="Object.keys(data.options).indexOf('height')>=0" :label="$t('fm.config.widget.height')">
<el-input v-model="data.options.height" />
</el-form-item>
<!-- 大小 -->
<el-form-item v-if="Object.keys(data.options).indexOf('size')>=0" :label="$t('fm.config.widget.size')">
{{ $t('fm.config.widget.width') }} <el-input v-model.number="data.options.size.width" style="width: 90px;" type="number" />
{{ $t('fm.config.widget.height') }} <el-input v-model.number="data.options.size.height" style="width: 90px;" type="number" />
</el-form-item>
<!-- 占位内容 -->
<el-form-item v-if="Object.keys(data.options).indexOf('placeholder')>=0 && (data.type!='time' || data.type!='date')" :label="$t('fm.config.widget.placeholder')">
<el-input v-model="data.options.placeholder" />
</el-form-item>
<!-- 布局方式，块，行 -->
<el-form-item v-if="Object.keys(data.options).indexOf('inline')>=0" :label="$t('fm.config.widget.layout')">
<el-radio-group v-model="data.options.inline">
<el-radio-button :label="false">{{ $t('fm.config.widget.block') }}</el-radio-button>
<el-radio-button :label="true">{{ $t('fm.config.widget.inline') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<!-- 显示输入框 -->
<el-form-item v-if="Object.keys(data.options).indexOf('showInput')>=0" :label="$t('fm.config.widget.showInput')">
<el-switch v-model="data.options.showInput" />
</el-form-item>
<!-- 最小值 -->
<el-form-item v-if="Object.keys(data.options).indexOf('min')>=0" :label="$t('fm.config.widget.min')">
<el-input-number v-model="data.options.min" :min="0" :max="100" :step="1" />
</el-form-item>
<!-- 最大值 -->
<el-form-item v-if="Object.keys(data.options).indexOf('max')>=0" :label="$t('fm.config.widget.max')">
<el-input-number v-model="data.options.max" :min="0" :max="100" :step="1" />
</el-form-item>
<!-- 步长 -->
<el-form-item v-if="Object.keys(data.options).indexOf('step')>=0" :label="$t('fm.config.widget.step')">
<el-input-number v-model="data.options.step" :min="0" :max="100" :step="1" />
</el-form-item>
<!-- 是否多选 -->
<el-form-item v-if="data.type=='select' || data.type=='imgupload'" :label="$t('fm.config.widget.multiple')">
<el-switch v-model="data.options.multiple" @change="handleSelectMuliple" />
</el-form-item>
<!-- 是否可搜索 -->
<el-form-item v-if="data.type=='select'" :label="$t('fm.config.widget.filterable')">
<el-switch v-model="data.options.filterable" />
</el-form-item>
<!-- 允许半选 -->
<el-form-item v-if="Object.keys(data.options).indexOf('allowHalf')>=0" label="$t('fm.config.widget.allowHalf')">
<el-switch
v-model="data.options.allowHalf"
/>
</el-form-item>
<!-- 支持透明度选择 -->
<el-form-item v-if="Object.keys(data.options).indexOf('showAlpha')>=0" :label="$t('fm.config.widget.showAlpha')">
<el-switch
v-model="data.options.showAlpha"
/>
</el-form-item>
<!-- 是否显示标签 -->
<el-form-item v-if="Object.keys(data.options).indexOf('showLabel')>=0" :label="$t('fm.config.widget.showLabel')">
<el-switch
v-model="data.options.showLabel"
/>
</el-form-item>
<!-- 选项 -->
<el-form-item v-if="Object.keys(data.options).indexOf('options')>=0" :label="$t('fm.config.widget.option')">
<el-radio-group v-model="data.options.remote" size="mini" style="margin-bottom:10px;">
<el-radio-button :label="false">{{ $t('fm.config.widget.staticData') }}</el-radio-button>
......@@ -137,7 +165,7 @@
</template>
</el-form-item>
<!-- 级联选择器 -->
<el-form-item v-if="data.type=='cascader'" :label="$t('fm.config.widget.remoteData')">
<div>
<el-input v-model="data.options.remoteFunc" size="mini" style="">
......@@ -154,7 +182,7 @@
</el-input>
</div>
</el-form-item>
<!-- 默认值 -->
<el-form-item v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type == 'textarea' || data.type == 'input' || data.type=='rate' || data.type=='color' || data.type=='switch')" :label="$t('fm.config.widget.defaultValue')">
<el-input v-if="data.type=='textarea'" v-model="data.options.defaultValue" type="textarea" :rows="5" />
<el-input v-if="data.type=='input'" v-model="data.options.defaultValue" />
......@@ -167,7 +195,7 @@
/>
<el-switch v-if="data.type=='switch'" v-model="data.options.defaultValue" />
</el-form-item>
<!-- 显示类型 -->
<template v-if="data.type == 'time' || data.type == 'date'">
<el-form-item v-if="data.type == 'date'" :label="$t('fm.config.widget.showType')">
<el-select v-model="data.options.type">
......@@ -223,7 +251,7 @@
/>
</el-form-item>
</template>
<!-- 图片上传 -->
<template v-if="data.type=='imgupload'">
<el-form-item :label="$t('fm.config.widget.limit')">
......@@ -246,7 +274,7 @@
</el-form-item>
</template>
</template>
<!-- 多行文本 -->
<template v-if="data.type==='text'">
<el-form-item label="文字内容">
<el-input v-model="data.options.defaultValue" placeholder="请输入文字内容" />
......@@ -270,7 +298,7 @@
</el-radio-group>
</el-form-item>
</template>
<!-- 分割符 -->
<template v-if="data.type==='divider'">
<el-form-item label="文字内容">
<el-input v-model="data.options.defaultValue" placeholder="请输入文字内容" />
......@@ -311,7 +339,7 @@
</el-select>
</el-form-item>
</template>
<!-- 珊格 -->
<template v-if="data.type == 'grid'">
<el-form-item :label="$t('fm.config.widget.gutter')">
<el-input v-model.number="data.options.gutter" type="number" />
......@@ -352,7 +380,7 @@
</el-select>
</el-form-item>
</template>
<!-- 非珊格 -->
<template v-if="data.type != 'grid'">
<el-form-item :label="$t('fm.config.widget.attribute')">
<el-checkbox v-if="Object.keys(data.options).indexOf('readonly')>=0" v-model="data.options.readonly">{{ $t('fm.config.widget.readonly') }}</el-checkbox>
......
src/components/VueFormMaking/components/WidgetForm.vue
......@@ -13,6 +13,7 @@
<transition-group name="fade" tag="div" class="widget-form-list">
<template v-for="(element, index) in data.list">
<!-- 珊格 -->
<template v-if="element.type == 'grid'">
<el-row
v-if="element && element.key"
......
src/components/VueFormMaking/components/WidgetFormItem.vue
<template>
<el-form-item
v-if="element && element.key"
:label-width="element.type==='divider' || (element.type==='text' && element.options.textLabelStatus===false)?'0px':dataConfig.config.labelWidth + 'px'"
:label-width="elementLabelWidth + 'px'"
class="widget-view "
:class="{active: selectWidget.key === element.key, 'is_req': element.options.required}"
:label="element.type==='divider' || (element.type==='text' && element.options.textLabelStatus===false)?'':element.name"
......@@ -239,6 +239,7 @@ export default {
props: ['element', 'select', 'index', 'data', 'dataConfig'],
data() {
return {
elementLabelWidth: '',
selectWidget: this.select
}
},
......@@ -251,12 +252,31 @@ export default {
this.$emit('update:select', val)
},
deep: true
},
'element.options.labelWidth': function (val) {
this.elementLabelWidth = val
},
'element.options.labelWidthDisabled': function (val) {
this.setLabelWidth(val)
}
},
mounted() {
this.setLabelWidth()
},
methods: {
setLabelWidth(status) {
if (status === undefined) {
status = this.element.options.labelWidthDisabled
}
if (status) {
this.elementLabelWidth = this.element.options.labelWidth
} else if (this.element.type==='grid' || this.element.type==='divider' || (this.element.type==='text' && element.options.textLabelStatus===false)) {
this.elementLabelWidth = 0
} else {
// 全局
this.elementLabelWidth = this.dataConfig.config.labelWidth
}
},
handleSelectWidget(index) {
this.selectWidget = this.data.list[index]
},
......
src/components/VueFormMaking/components/componentsConfig.js
......@@ -9,7 +9,9 @@ export const basicComponents = [
dataType: 'string',
pattern: '',
placeholder: '',
disabled: false
disabled: false,
labelWidth: 100,
labelWidthDisabled: false
}
},
{
......@@ -21,7 +23,9 @@ export const basicComponents = [
required: false,
disabled: false,
pattern: '',
placeholder: ''
placeholder: '',
labelWidth: 100,
labelWidthDisabled: false
}
},
{
......@@ -35,7 +39,9 @@ export const basicComponents = [
max: '',
step: 1,
disabled: false,
controlsPosition: ''
controlsPosition: '',
labelWidth: 100,
labelWidthDisabled: false
}
},
{
......@@ -68,7 +74,9 @@ export const basicComponents = [
label: 'label'
},
remoteFunc: '',
disabled: false
disabled: false,
labelWidth: 100,
labelWidthDisabled: false
}
},
{
......@@ -98,7 +106,9 @@ export const basicComponents = [
label: 'label'
},
remoteFunc: '',
disabled: false
disabled: false,
labelWidth: 100,
labelWidthDisabled: false
}
},
{
......@@ -117,7 +127,9 @@ export const basicComponents = [
arrowControl: true,
format: 'HH:mm:ss',
required: false,
width: ''
width: '',
labelWidth: 100,
labelWidthDisabled: false
}
},
{
......@@ -136,7 +148,9 @@ export const basicComponents = [
format: 'yyyy-MM-dd',
timestamp: false,
required: false,
width: ''
width: '',
labelWidth: 100,
labelWidthDisabled: false
}
},
{
......@@ -147,7 +161,9 @@ export const basicComponents = [
max: 5,
disabled: false,
allowHalf: false,
required: false
required: false,
labelWidth: 100,
labelWidthDisabled: false
}
},
{
......@@ -157,7 +173,9 @@ export const basicComponents = [
defaultValue: '',
disabled: false,
showAlpha: false,
required: false
required: false,
labelWidth: 100,
labelWidthDisabled: false
}
},
{
......@@ -189,7 +207,9 @@ export const basicComponents = [
value: 'value',
label: 'label'
},
remoteFunc: ''
remoteFunc: '',
labelWidth: 100,
labelWidthDisabled: false
}
},
{
......@@ -198,7 +218,9 @@ export const basicComponents = [
options: {
defaultValue: false,
required: false,
disabled: false
disabled: false,
labelWidth: 100,
labelWidthDisabled: false
}
},
{
......@@ -213,7 +235,9 @@ export const basicComponents = [
step: 1,
showInput: false,
range: false,
width: ''
width: '',
labelWidth: 100,
labelWidthDisabled: false
}
},
{
......@@ -226,7 +250,9 @@ export const basicComponents = [
font_family: '', // 字体属性
defaultValue: 'This is a text',
textLabelStatus: true,
customClass: ''
customClass: '',
labelWidth: 100,
labelWidthDisabled: false
}
}
]
......@@ -236,7 +262,9 @@ export const advanceComponents = [
type: 'blank',
icon: 'icon-zidingyishuju',
options: {
defaultType: 'String'
defaultType: 'String',
labelWidth: 100,
labelWidthDisabled: false
}
},
{
......@@ -259,7 +287,9 @@ export const advanceComponents = [
isDelete: false,
min: 0,
isEdit: false,
action: 'https://jsonplaceholder.typicode.com/photos/'
action: 'https://jsonplaceholder.typicode.com/photos/',
labelWidth: 100,
labelWidthDisabled: false
}
},
{
......@@ -267,7 +297,9 @@ export const advanceComponents = [
icon: 'icon-fuwenbenkuang',
options: {
defaultValue: '',
width: ''
width: '',
labelWidth: 100,
labelWidthDisabled: false
}
},
{
......@@ -286,7 +318,9 @@ export const advanceComponents = [
label: 'label',
children: 'children'
},
remoteFunc: ''
remoteFunc: '',
labelWidth: 100,
labelWidthDisabled: false
}
}
]
......
src/components/VueFormMaking/iconfont/demo_index.html
......@@ -742,7 +742,7 @@
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<h3>第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
......@@ -1126,7 +1126,7 @@
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<h3>第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
......
src/views/login/index.vue
......@@ -189,7 +189,6 @@ export default {
this.getCode()
})
} else {
console.log('error submit!!')
return false
}
})
......
src/views/process/admin/process-manager.vue
......@@ -329,7 +329,6 @@ export default {
},
verifyProcess() {
this.ruleForm.structure = this.$refs.wfd.graph.save()
console.log(this.ruleForm.structure)
for (var r of this.ruleForm.structure.nodes) {
if (r.sort === undefined || r.sort === null || r.sort === '') {
return '流程节点顺序不能为空'
......@@ -376,7 +375,6 @@ export default {
},
editForm(formName) {
var r = this.verifyProcess()
console.log(r)
if (r !== '') {
this.$message.error(r)
return
......
src/views/process/admin/template-manager.vue
......@@ -195,7 +195,6 @@ export default {
this.listQuery.per_page = this.queryParams.pageSize
templateList(this.listQuery).then(response => {
this.tplList = response.data.data
console.log(this.tplList)
this.queryParams.pageIndex = response.data.page
this.queryParams.pageSize = response.data.per_page
this.total = response.data.total_count
......
src/views/process/list/apply-process-list.vue
......@@ -59,7 +59,6 @@ export default {
})
},
handleQuery() {
console.log(this.listQuery)
this.getProcessList()
},
submitWorkOrder(processId) {
......
src/views/system/role/index.vue
......@@ -464,7 +464,6 @@ export default {
submitDataScope: function() {
if (this.form.roleId !== undefined) {
this.form.deptIds = this.getDeptAllCheckedKeys()
console.log(this.getDeptAllCheckedKeys())
dataScope(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess('修改成功')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment