Skip to content

Chatopera OpenSource / ferry_web

Go to a project
Commit 4b0c5103 by Mr. Lan
Options

添加表单数据展示

parent 5c903f34
Inline Side-by-side
Showing with 259 additions and 202 deletions
src/components/VueFormMaking/components/GenerateForm.vue
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
<genetate-form-item <genetate-form-item
v-else v-else
:key="citem.key" :key="citem.key"
:preview="preview"
:models.sync="models" :models.sync="models"
:remote="remote" :remote="remote"
:rules="rules" :rules="rules"
...@@ -49,6 +50,7 @@ ...@@ -49,6 +50,7 @@
<template v-else> <template v-else>
<genetate-form-item <genetate-form-item
:key="item.key" :key="item.key"
:preview="preview"
:models.sync="models" :models.sync="models"
:rules="rules" :rules="rules"
:widget="item" :widget="item"
...@@ -73,7 +75,7 @@ export default { ...@@ -73,7 +75,7 @@ export default {
GenetateFormItem GenetateFormItem
}, },
/* eslint-disable */ /* eslint-disable */
props: ['data', 'remote', 'value', 'insite', 'disabled'], props: ['data', 'remote', 'value', 'insite', 'disabled', 'preview'],
data() { data() {
return { return {
models: {}, models: {},
......
src/components/VueFormMaking/components/GenerateFormItem.vue
...@@ -4,224 +4,253 @@ ...@@ -4,224 +4,253 @@
:label="widget.type==='divider' || widget.options.labelWidthStatus?'':widget.name" :label="widget.type==='divider' || widget.options.labelWidthStatus?'':widget.name"
:prop="widget.model" :prop="widget.model"
> >
<template v-if="widget.type == 'input'"> <template v-if="preview">
<el-input <template v-if="widget.type == 'color'">
v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'" <div style="width: 32px; height: 20px; margin-top: 6px; border-radius: 3px" :style="{'background-color': dataModel}" />
v-model.number="dataModel" </template>
:type="widget.options.dataType" <template v-else-if="widget.type=='switch'">
:placeholder="widget.options.placeholder" <el-switch
:style="{width: widget.options.width}" v-model="dataModel"
:disabled="widget.options.disabled" :disabled="true"
/> />
<el-input </template>
v-else <template v-else-if="widget.type == 'editor'">
v-model="dataModel" <div class="previewEditorDiv" v-html="dataModel" />
:type="widget.options.dataType" </template>
:disabled="widget.options.disabled" <template v-else-if="widget.type=='imgupload'">
:placeholder="widget.options.placeholder" <fm-upload
:style="{width: widget.options.width}" v-model="dataModel"
/> :disabled="widget.options.disabled"
:style="{'width': widget.options.width}"
:width="widget.options.size.width"
:height="widget.options.size.height"
:token="widget.options.token"
:domain="widget.options.domain"
:multiple="widget.options.multiple"
:length="widget.options.length"
:is-qiniu="widget.options.isQiniu"
:is-delete="widget.options.isDelete"
:min="widget.options.min"
:is-edit="widget.options.isEdit"
:action="widget.options.action"
/>
</template>
<template v-else-if="widget.type =='rate'">
<el-rate
v-model="dataModel"
:max="widget.options.max"
:disabled="true"
:allow-half="widget.options.allowHalf"
/>
</template>
<template v-else>
<div>
{{ dataModel }}
</div>
</template>
</template> </template>
<template v-else>
<template v-if="widget.type == 'input'">
<el-input
v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'"
v-model.number="dataModel"
:type="widget.options.dataType"
:placeholder="widget.options.placeholder"
:style="{width: widget.options.width}"
:disabled="widget.options.disabled"
/>
<el-input
v-else
v-model="dataModel"
:type="widget.options.dataType"
:disabled="widget.options.disabled"
:placeholder="widget.options.placeholder"
:style="{width: widget.options.width}"
/>
</template>
<template v-if="widget.type == 'textarea'"> <template v-if="widget.type == 'textarea'">
<el-input <el-input
v-model="dataModel" v-model="dataModel"
type="textarea" type="textarea"
:rows="5" :rows="5"
:disabled="widget.options.disabled" :disabled="widget.options.disabled"
:placeholder="widget.options.placeholder" :placeholder="widget.options.placeholder"
:style="{width: widget.options.width}" :style="{width: widget.options.width}"
/> />
</template> </template>
<template v-if="widget.type == 'number'"> <template v-if="widget.type == 'number'">
<el-input-number <el-input-number
v-model="dataModel" v-model="dataModel"
:style="{width: widget.options.width}" :style="{width: widget.options.width}"
:step="widget.options.step" :step="widget.options.step"
controls-position="right" controls-position="right"
:disabled="widget.options.disabled" :disabled="widget.options.disabled"
/> />
</template> </template>
<template v-if="widget.type == 'radio'"> <template v-if="widget.type == 'radio'">
<el-radio-group <el-radio-group
v-model="dataModel" v-model="dataModel"
:style="{width: widget.options.width}" :style="{width: widget.options.width}"
:disabled="widget.options.disabled" :disabled="widget.options.disabled"
>
<el-radio
v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)"
:key="index"
:style="{display: widget.options.inline ? 'inline-block' : 'block'}"
:label="item.value"
> >
<template v-if="widget.options.remote">{{ item.label }}</template> <el-radio
<template v-else>{{ widget.options.showLabel ? item.label : item.value }}</template> v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)"
</el-radio> :key="index"
</el-radio-group> :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
</template> :label="item.value"
>
<template v-if="widget.options.remote">{{ item.label }}</template>
<template v-else>{{ widget.options.showLabel ? item.label : item.value }}</template>
</el-radio>
</el-radio-group>
</template>
<template v-if="widget.type == 'checkbox'"> <template v-if="widget.type == 'checkbox'">
<el-checkbox-group <el-checkbox-group
v-model="dataModel" v-model="dataModel"
:style="{width: widget.options.width}" :style="{width: widget.options.width}"
:disabled="widget.options.disabled" :disabled="widget.options.disabled"
>
<el-checkbox
v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)"
:key="index"
:style="{display: widget.options.inline ? 'inline-block' : 'block'}"
:label="item.value"
> >
<template v-if="widget.options.remote">{{ item.label }}</template> <el-checkbox
<template v-else>{{ widget.options.showLabel ? item.label : item.value }}</template>
</el-checkbox>
</el-checkbox-group>
</template>
<template v-if="widget.type == 'time'"> v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)"
<el-time-picker :key="index"
v-model="dataModel" :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
:is-range="widget.options.isRange" :label="item.value"
:placeholder="widget.options.placeholder" >
:start-placeholder="widget.options.startPlaceholder" <template v-if="widget.options.remote">{{ item.label }}</template>
:end-placeholder="widget.options.endPlaceholder" <template v-else>{{ widget.options.showLabel ? item.label : item.value }}</template>
:readonly="widget.options.readonly" </el-checkbox>
:disabled="widget.options.disabled" </el-checkbox-group>
:editable="widget.options.editable" </template>
:clearable="widget.options.clearable"
:arrow-control="widget.options.arrowControl"
:value-format="widget.options.format"
:style="{width: widget.options.width}"
/>
</template>
<template v-if="widget.type=='date'"> <template v-if="widget.type == 'time'">
<el-date-picker <el-time-picker
v-model="dataModel" v-model="dataModel"
:type="widget.options.type" :is-range="widget.options.isRange"
:placeholder="widget.options.placeholder" :placeholder="widget.options.placeholder"
:start-placeholder="widget.options.startPlaceholder" :start-placeholder="widget.options.startPlaceholder"
:end-placeholder="widget.options.endPlaceholder" :end-placeholder="widget.options.endPlaceholder"
:readonly="widget.options.readonly" :readonly="widget.options.readonly"
:disabled="widget.options.disabled" :disabled="widget.options.disabled"
:editable="widget.options.editable" :editable="widget.options.editable"
:clearable="widget.options.clearable" :clearable="widget.options.clearable"
:value-format="widget.options.timestamp ? 'timestamp' : widget.options.format" :arrow-control="widget.options.arrowControl"
:format="widget.options.format" :value-format="widget.options.format"
:style="{width: widget.options.width}" :style="{width: widget.options.width}"
/> />
</template> </template>
<template v-if="widget.type =='rate'"> <template v-if="widget.type=='date'">
<el-rate <el-date-picker
v-model="dataModel" v-model="dataModel"
:max="widget.options.max" :type="widget.options.type"
:disabled="widget.options.disabled" :placeholder="widget.options.placeholder"
:allow-half="widget.options.allowHalf" :start-placeholder="widget.options.startPlaceholder"
/> :end-placeholder="widget.options.endPlaceholder"
</template> :readonly="widget.options.readonly"
:disabled="widget.options.disabled"
:editable="widget.options.editable"
:clearable="widget.options.clearable"
:value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"
:format="widget.options.format"
:style="{width: widget.options.width}"
/>
</template>
<template v-if="widget.type == 'color'"> <template v-if="widget.type =='rate'">
<el-color-picker <el-rate
v-model="dataModel" v-model="dataModel"
:disabled="widget.options.disabled" :max="widget.options.max"
:show-alpha="widget.options.showAlpha" :disabled="widget.options.disabled"
/> :allow-half="widget.options.allowHalf"
</template> />
</template>
<template v-if="widget.type == 'select'"> <template v-if="widget.type == 'color'">
<el-select <el-color-picker
v-model="dataModel" v-model="dataModel"
:disabled="widget.options.disabled" :disabled="widget.options.disabled"
:multiple="widget.options.multiple" :show-alpha="widget.options.showAlpha"
:clearable="widget.options.clearable" />
:placeholder="widget.options.placeholder" </template>
:style="{width: widget.options.width}"
:filterable="widget.options.filterable"
>
<el-option v-for="item in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="item.value" :value="item.value" :label="widget.options.showLabel || widget.options.remote?item.label:item.value" />
</el-select>
</template>
<template v-if="widget.type=='switch'"> <template v-if="widget.type == 'select'">
<el-switch <el-select
v-model="dataModel" v-model="dataModel"
:disabled="widget.options.disabled" :disabled="widget.options.disabled"
/> :multiple="widget.options.multiple"
</template> :clearable="widget.options.clearable"
:placeholder="widget.options.placeholder"
:style="{width: widget.options.width}"
:filterable="widget.options.filterable"
>
<el-option v-for="item in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="item.value" :value="item.value" :label="widget.options.showLabel || widget.options.remote?item.label:item.value" />
</el-select>
</template>
<template v-if="widget.type=='slider'"> <template v-if="widget.type=='switch'">
<el-slider <el-switch
v-model="dataModel" v-model="dataModel"
:min="widget.options.min" :disabled="widget.options.disabled"
:max="widget.options.max" />
:disabled="widget.options.disabled" </template>
:step="widget.options.step"
:show-input="widget.options.showInput"
:range="widget.options.range"
:style="{width: widget.options.width}"
/>
</template>
<template v-if="widget.type=='imgupload'"> <template v-if="widget.type=='slider'">
<fm-upload <el-slider
v-model="dataModel" v-model="dataModel"
:disabled="widget.options.disabled" :min="widget.options.min"
:style="{'width': widget.options.width}" :max="widget.options.max"
:width="widget.options.size.width" :disabled="widget.options.disabled"
:height="widget.options.size.height" :step="widget.options.step"
:token="widget.options.token" :show-input="widget.options.showInput"
:domain="widget.options.domain" :range="widget.options.range"
:multiple="widget.options.multiple" :style="{width: widget.options.width}"
:length="widget.options.length" />
:is-qiniu="widget.options.isQiniu" </template>
:is-delete="widget.options.isDelete"
:min="widget.options.min"
:is-edit="widget.options.isEdit"
:action="widget.options.action"
/>
</template>
<template v-if="widget.type == 'editor'"> <template v-if="widget.type=='imgupload'">
<vue-editor <fm-upload
v-model="dataModel" v-model="dataModel"
:disabled="widget.options.disabled" :disabled="widget.options.disabled"
:style="{width: widget.options.width}" :style="{'width': widget.options.width}"
/> :width="widget.options.size.width"
</template> :height="widget.options.size.height"
:token="widget.options.token"
:domain="widget.options.domain"
:multiple="widget.options.multiple"
:length="widget.options.length"
:is-qiniu="widget.options.isQiniu"
:is-delete="widget.options.isDelete"
:min="widget.options.min"
:is-edit="widget.options.isEdit"
:action="widget.options.action"
/>
</template>
<template v-if="widget.type === 'cascader'"> <template v-if="widget.type == 'editor'">
<el-cascader <vue-editor
v-model="dataModel" v-model="dataModel"
:disabled="widget.options.disabled" :disabled="widget.options.disabled"
:clearable="widget.options.clearable" :style="{width: widget.options.width}"
:placeholder="widget.options.placeholder" />
:style="{width: widget.options.width}" </template>
:options="widget.options.remoteOptions"
/>
</template>
<template v-if="widget.type === 'text'"> <template v-if="widget.type === 'cascader'">
<span <el-cascader
:style="{ v-model="dataModel"
'font-size': widget.options.font_size, :disabled="widget.options.disabled"
'font-family': widget.options.font_family, :clearable="widget.options.clearable"
'font-weight': widget.options.font_weight, :placeholder="widget.options.placeholder"
'color': widget.options.font_color :style="{width: widget.options.width}"
}" :options="widget.options.remoteOptions"
> />
{{ widget.options.defaultValue }} </template>
</span>
</template>
<template v-if="widget.type === 'divider'"> <template v-if="widget.type === 'text'">
<el-divider
:direction="widget.options.direction"
:content-position="widget.options.content_position"
>
<span <span
:style="{ :style="{
'font-size': widget.options.font_size, 'font-size': widget.options.font_size,
...@@ -232,7 +261,25 @@ ...@@ -232,7 +261,25 @@
> >
{{ widget.options.defaultValue }} {{ widget.options.defaultValue }}
</span> </span>
</el-divider> </template>
<template v-if="widget.type === 'divider'">
<el-divider
:direction="widget.options.direction"
:content-position="widget.options.content_position"
>
<span
:style="{
'font-size': widget.options.font_size,
'font-family': widget.options.font_family,
'font-weight': widget.options.font_weight,
'color': widget.options.font_color
}"
>
{{ widget.options.defaultValue }}
</span>
</el-divider>
</template>
</template> </template>
</el-form-item> </el-form-item>
...@@ -246,7 +293,7 @@ export default { ...@@ -246,7 +293,7 @@ export default {
FmUpload FmUpload
}, },
/* eslint-disable */ /* eslint-disable */
props: ['widget', 'models', 'rules', 'remote', 'data', 'disabled'], props: ['widget', 'models', 'rules', 'remote', 'data', 'disabled', 'preview'],
data() { data() {
return { return {
widgetLabelWidth: '', widgetLabelWidth: '',
...@@ -273,6 +320,7 @@ export default { ...@@ -273,6 +320,7 @@ export default {
} }
}, },
created() { created() {
console.log(this.preview)
if (this.widget.options.remote && this.remote[this.widget.options.remoteFunc]) { if (this.widget.options.remote && this.remote[this.widget.options.remoteFunc]) {
this.remote[this.widget.options.remoteFunc]((data) => { this.remote[this.widget.options.remoteFunc]((data) => {
this.widget.options.remoteOptions = data.map(item => { this.widget.options.remoteOptions = data.map(item => {
...@@ -310,3 +358,9 @@ export default { ...@@ -310,3 +358,9 @@ export default {
} }
} }
</script> </script>
<style>
.previewEditorDiv > p {
margin: 0;
}
</style>
src/views/process/list/handle.vue
...@@ -58,6 +58,7 @@ ...@@ -58,6 +58,7 @@
v-for="(tplItem, tplIndex) in processStructureValue.tpls" v-for="(tplItem, tplIndex) in processStructureValue.tpls"
:key="tplIndex" :key="tplIndex"
:ref="'generateForm-'+tplItem.id" :ref="'generateForm-'+tplItem.id"
:preview="true"
:remote="remoteFunc" :remote="remoteFunc"
:value="tplItem.form_data" :value="tplItem.form_data"
:data="tplItem.form_structure" :data="tplItem.form_structure"
......
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 sign in to comment