Administrator
4 years ago
parent
1f3801eebb
commit
b0985f67b4
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div v-if="data.props.type === 1" style="width: 100%;">
|
||||
<a-divider v-if="data.props.value === ''" :dashed="data.props.dashed"
|
||||
:style="{marginTop:data.props.marginTop + 'px',marginBottom:data.props.marginBottom + 'px'}"/>
|
||||
<a-divider v-else :dashed="data.props.dashed" :orientation="data.props.orientation"
|
||||
:style="{marginTop:data.props.marginTop + 'px',marginBottom:data.props.marginBottom + 'px'}">
|
||||
{{data.props.value}}
|
||||
</a-divider>
|
||||
</div>
|
||||
<div v-else :style="{width:'100%',height:data.props.height + 'px'}"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Divider} from "ant-design-vue"
|
||||
export default {
|
||||
name: "Divider",
|
||||
props:["field","disabled"],
|
||||
data:function(){
|
||||
return{
|
||||
data:this.field,
|
||||
}
|
||||
},
|
||||
components:{
|
||||
ADivider:Divider
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/*.divider-container-style{*/
|
||||
/* min-height: 2.5rem;*/
|
||||
/* display: flex;*/
|
||||
/* align-items: center;*/
|
||||
/* align-content: center;*/
|
||||
/* width: 100%;*/
|
||||
/*}*/
|
||||
</style>
|
||||
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="field-item-style" :style="{display:fieldData.props.is_hidden?'none':'block',padding:'0',minHeight:0}">
|
||||
<div class="content-style" style="width:100%;justify-content: center;justify-items: center">
|
||||
<template v-if="edit === false"><!--查看-->
|
||||
<component v-if="fieldData.field_type > 200 || fieldData.field_type === 22 || fieldData.field_type === 13 || fieldData.field_type === 14"
|
||||
:is="com" :field="fieldData"></component>
|
||||
<Upload v-else-if="fieldData.field_type === 9 || fieldData.field_type === 10" :type="fieldData.props.type" :title="fieldData.props.title" :option="fieldData.props.option" :multiple="fieldData.props.multiple"
|
||||
:canDownload="fieldData.props.can_downLoad" :canUpload="false" :fileData="getUploadData()" style="text-align: center"/>
|
||||
<div v-else-if="fieldData.field_type === 1 || fieldData.field_type === 2 || fieldData.field_type === 5 || fieldData.field_type === 12
|
||||
|| fieldData.field_type === 20 || fieldData.field_type === 27" style="text-align: center">
|
||||
{{ fieldData.props.value }}
|
||||
</div>
|
||||
<div v-else-if="fieldData.field_type === 11" v-html="fieldData.props.value" style="padding-top: 0.65rem;text-align: center"></div>
|
||||
<div v-else-if="fieldData.field_type === 8">头像</div>
|
||||
<div v-else style="text-align: center">{{getDicValue()}}</div>
|
||||
</template>
|
||||
<template v-else><!--新建/编辑-->
|
||||
<Upload v-if="fieldData.field_type === 9 || fieldData.field_type === 10" :type="fieldData.props.type"
|
||||
:title="fieldData.props.title" :option="fieldData.props.option" :multiple="fieldData.props.multiple"
|
||||
:canDownload="fieldData.props.can_downLoad" :canUpload="true" :fileData="getUploadData()" style="text-align: center"/>
|
||||
<component v-else :is="com" :field="fieldData"></component>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {curItem} from './fieldAndFormConfig'
|
||||
import Upload from '../../../components/common/uploader/Upload'
|
||||
|
||||
import TypesCheck from '../../../global-llibs/under-score/types-check'
|
||||
|
||||
/*
|
||||
* props:
|
||||
* item 每个组件数据
|
||||
* design 是否为表单设计模式
|
||||
* is_edit true 新建/编辑 false 查看 (非表单设计模式下的)
|
||||
* */
|
||||
export default {
|
||||
name: "SonFieldItem",
|
||||
props:["item","is_edit"],
|
||||
components: {
|
||||
Upload,
|
||||
},
|
||||
data:function () {
|
||||
return {
|
||||
fieldData:this.item,
|
||||
url: this.item.el,
|
||||
selected_id:"",
|
||||
curItem,
|
||||
edit:this.is_edit !== false
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getUploadData:function(){
|
||||
return TypesCheck.isArray(this.fieldData.props.value)?this.fieldData.props.value:
|
||||
(this.fieldData.props.value && TypesCheck.isString(this.fieldData.props.value)?JSON.parse(this.fieldData.props.value):[])
|
||||
},
|
||||
|
||||
getDicValue:function () {
|
||||
//获取字典类型的组件值
|
||||
return this.fieldData.dics_value && this.fieldData.dics_value !==""?this.fieldData.dics_value:""
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
com: function (){
|
||||
// eslint-disable-next-line no-debugger
|
||||
// let a = this
|
||||
// let url ="Input.vue"
|
||||
return () => import(`@/views/teacherInfo/fieldComponent/${this.url}`)
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
is_edit:function (newData) {
|
||||
this.edit = newData
|
||||
},
|
||||
item:function (newData) {
|
||||
this.fieldData = newData
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "style/fieldItem";
|
||||
</style>
|
||||
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="single-attribute-container-style">
|
||||
<div class="attribute-title">分隔线/符</div>
|
||||
<a-radio-group button-style="solid" v-model="attribute.props.type" @change="typeChange">
|
||||
<a-radio-button :value="1" class="radio-button-style">分隔线</a-radio-button>
|
||||
<a-radio-button :value="2" class="radio-button-style">分隔符</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<template v-if="attribute.props.type === 1">
|
||||
<div class="single-attribute-container-style">
|
||||
<div class="attribute-title">分隔线类型</div>
|
||||
<a-radio-group button-style="solid" v-model="attribute.props.dashed" >
|
||||
<a-radio-button :value="false" style="padding: 0 10px;font-size: 0.75rem;">实线</a-radio-button>
|
||||
<a-radio-button :value="true" style="padding: 0 10px;font-size: 0.75rem;">虚线</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<div class="single-attribute-container-style">
|
||||
<div class="attribute-title">分隔线标题</div>
|
||||
<a-input v-model="attribute.props.value" placeholder="请输入分隔线标题" :maxLength="10" :allowClear="true"/>
|
||||
</div>
|
||||
<div class="single-attribute-container-style">
|
||||
<div class="attribute-title">文本布局方式</div>
|
||||
<a-radio-group button-style="solid" v-model="attribute.props.orientation" >
|
||||
<a-radio-button value="left" style="padding: 0 10px;font-size: 0.75rem;">左对齐</a-radio-button>
|
||||
<a-radio-button value="center" style="padding: 0 10px;font-size: 0.75rem;">中间对齐</a-radio-button>
|
||||
<a-radio-button value="right" style="padding: 0 10px;font-size: 0.75rem;">右对齐</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<div class="single-attribute-container-style">
|
||||
<div class="attribute-title">上边距</div>
|
||||
<a-input-number :min="8" :step="1" v-model="attribute.props.marginTop"/>
|
||||
</div>
|
||||
<div class="single-attribute-container-style">
|
||||
<div class="attribute-title">下边距</div>
|
||||
<a-input-number :min="8" :step="1" v-model="attribute.props.marginBottom"/>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="single-attribute-container-style">
|
||||
<div class="attribute-title">分隔符高度</div>
|
||||
<a-input-number :min="40" :step="1" v-model="attribute.props.height"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Input,InputNumber} from 'ant-design-vue'
|
||||
import ARadioGroup from 'ant-design-vue/es/radio/Group'
|
||||
import ARadioButton from 'ant-design-vue/es/radio/RadioButton'
|
||||
import 'ant-design-vue/es/radio/style/css'
|
||||
export default {
|
||||
name: "DividerAttribute",
|
||||
props:["data"],
|
||||
data: function(){
|
||||
return {
|
||||
attribute:this.data
|
||||
}
|
||||
},
|
||||
components:{
|
||||
ARadioGroup,
|
||||
ARadioButton,
|
||||
AInput:Input,
|
||||
AInputNumber:InputNumber
|
||||
},
|
||||
methods:{
|
||||
typeChange:function () {
|
||||
if (this.attribute.props.type === 1){//分隔线
|
||||
this.attribute.props.value = "";
|
||||
this.attribute.props.orientation = "center";
|
||||
this.attribute.props.dashed = false;
|
||||
this.attribute.props.marginTop = 8;
|
||||
this.attribute.props.marginBottom = 8;
|
||||
}else{
|
||||
this.attribute.props.height = 40;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "style/attributeCommonStyle";
|
||||
</style>
|
||||
Loading…
Reference in new issue