Skip to content

S
sample-form-platform
Commit 12d6c8ae authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

fix:修改搜索页面间距和快速查看页面间距

parent a2e43d12
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 16 additions and 9473 deletions
sample-form-client-ui/admin/src/components/formDes/configPanel.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div class="right-board">
<el-tabs v-model="currentTab" class="center-tabs">
<el-tab-pane label="属性配置" name="field" />
</el-tabs>
<div class="field-box">
<el-scrollbar class="right-scrollbar">
<el-form size="small" label-width="100px" >
<div v-for="(item,index) in cmps" :key="index">
<component v-if="item.name === activeItem.compType" :getFormId="getFormId" :props="activeItem" :is="item.content"></component>
</div>
</el-form>
</el-scrollbar>
</div>
</div>
</template>
<script>
import reg from "./custom/register";
export default {
name:'configPanel',
data() {
return {
currentTab: 'field',
cmps:reg,
formIdArray:[]
}
},
props:{
activeItem: {
type: Object,
default:function(){
return {}
}
},
itemList: {
type: Array,
default:function(){
return []
}
}
},
created() {
this.cmps.forEach(c => {
c.content = require(`./custom/configs/${c.name}`).default;
});
},
methods:{
getFormId(itemId){
this.formIdArray = [];
Array.from(this.itemList,(item)=>{
if(item.compType === 'row'){
Array.from(item.columns,(column)=>{
Array.from(column.list,(col)=>{
if(col._id !== itemId){
this.formIdArray.push(col.id);
}
})
})
}else{
if(item._id !== itemId){
this.formIdArray.push(item.id);
}
}
})
return this.formIdArray;
}
}
}
</script>
<style scoped>
.field-box >>> .el-scrollbar__wrap{
overflow-x: hidden;
}
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/configs/Switch.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'Switch'">
<el-form-item label="ID">
<el-tooltip
class="item"
effect="dark"
content="请注意,ID的修改可能会导致该组件相关事件失效！"
placement="left"
>
<el-input
class="input"
v-model="props.id"
@change="handlerChangeId"
></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number
v-model="props.labelWidth"
:min="1"
:max="200"
></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch
v-model="props.showLabel"
@change="handlerChangeLabel"
></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="开启时颜色">
<el-color-picker v-model="props['active-color']"></el-color-picker>
</el-form-item>
<el-form-item label="关闭时颜色">
<el-color-picker v-model="props['inactive-color']"></el-color-picker>
</el-form-item>
<el-form-item label="开启时值">
<el-input class="input" v-model="props['active-value']"></el-input>
</el-form-item>
<el-form-item label="关闭时值">
<el-input class="input" v-model="props['inactive-value']"></el-input>
</el-form-item>
<el-form-item label="默认值">
<el-switch v-model="props.value"></el-switch>
</el-form-item>
</div>
</template>
<script>
import { changeId } from "../mixin";
export default {
name: "inputConfig",
props: ["props", "getFormId"],
components: {},
mixins: [changeId],
data() {
return {};
},
methods: {
handlerChangeLabel(val) {
this.props.labelWidth = val ? "80" : "1";
},
handlerChangeDisStatus(val) {
this.props.readOnly = !val;
},
handlerChangeReadStatus(val) {
this.props.disabled = !val;
},
},
mounted() {},
};
</script>
<style scoped>
.input {
width: 75%;
}
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/configs/alert.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'alert'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.title"></el-input>
</el-form-item>
<el-form-item label="类型" >
<el-select v-model="props.type" placeholder="请选择">
<el-option label="success" value="success"/>
<el-option label="warning" value="warning"/>
<el-option label="error" value="error"/>
<el-option label="info" value="info"/>
</el-select>
</el-form-item>
<el-form-item label="辅助文字">
<el-input class="input" v-model="props.description"></el-input>
</el-form-item>
<el-form-item label="关闭">
<el-switch v-model="props.closable"></el-switch>
</el-form-item>
<el-form-item label="居中">
<el-switch v-model="props.center"></el-switch>
</el-form-item>
<el-form-item label="关闭按钮自定义文本">
<el-input class="input" v-model="props['close-text']"/>
</el-form-item>
<el-form-item label="显示图标">
<el-switch v-model="props['show-icon']"></el-switch>
</el-form-item>
<el-form-item label="主题">
<el-radio-group v-model="props.effect">
<el-radio-button label="light">light</el-radio-button>
<el-radio-button label="dark">dark</el-radio-button>
</el-radio-group>
</el-form-item>
</div>
</template>
<script>
/**
* input的配置项
*/
export default {
name:"buttonConfig",
props:{
props:{}
},
components:{
},
data(){
return {
}
},
methods:{
handlerShowLabel(val){
if(val){
this.props.labelWidth = 80;
}else{
this.props.labelWidth = 0;
}
}
},
mounted(){
}
}
</script>
sample-form-client-ui/admin/src/components/formDes/custom/configs/barCode.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'barCode'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerShowLabel"></el-switch>
</el-form-item>
<el-form-item label="标签文字" v-show="props.showLabel">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="标签长度" v-show="props.showLabel">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="占用列数" v-show="props.span">
<el-input-number v-model="props.span" :min="1" :max="24"></el-input-number>
</el-form-item>
<el-form-item label="条码值">
<el-input v-model="props.value"></el-input>
</el-form-item>
<el-form-item label="条码颜色" v-show="props.lineColor">
<el-color-picker v-model="props.lineColor" @change="handlerChangeBarCode"/>
</el-form-item>
<el-form-item label="背景颜色" v-show="props.background">
<el-color-picker v-model="props.background" @change="handlerChangeBackground"/>
</el-form-item>
<!--暂不启用-->
<!-- <el-form-item label="条码宽度">
<el-input-number v-model="props.width" :min="1" :max="10" :step="1"></el-input-number>
</el-form-item> -->
<el-form-item label="条码高度">
<el-input-number v-model="props.height" :min="10" :max="100" :step="1"></el-input-number>
</el-form-item>
<el-form-item label="显示值">
<el-switch v-model="props.displayValue"></el-switch>
</el-form-item>
</div>
</template>
<script>
/**
* input的配置项
*/
export default {
name:"buttonConfig",
props:{
props:{}
},
components:{
},
data(){
return {
}
},
methods:{
handlerShowLabel(val){
if(val){
this.props.labelWidth = 80;
}else{
this.props.labelWidth = 0;
}
},
handlerChangeBarCode(val){
if(val == null){
this.props.lineColor = '#000';
}
},
handlerChangeBackground(val){
if(val == null){
this.props.background = '#fff';
}
}
},
mounted(){
}
}
</script>
sample-form-client-ui/admin/src/components/formDes/custom/configs/button.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'button'">
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="按钮文字">
<el-input class="input" v-model="props.text"></el-input>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerShowLabel"></el-switch>
</el-form-item>
<el-form-item label="标签文字" v-show="props.showLabel">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="标签长度" v-show="props.showLabel">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="占用列数" v-show="props.span">
<el-input-number v-model="props.span" :min="1" :max="24"></el-input-number>
</el-form-item>
<el-form-item label="按钮类型" >
<el-select v-model="props.type" placeholder="请选择">
<el-option label="primary" value="primary"/>
<el-option label="success" value="success"/>
<el-option label="warning" value="warning"/>
<el-option label="danger" value="danger"/>
<el-option label="info" value="info"/>
<el-option label="text" value="text"/>
</el-select>
</el-form-item>
<el-form-item label="按钮大小">
<el-radio-group v-model="props.size">
<el-radio-button label="medium">大</el-radio-button>
<el-radio-button label="small">中</el-radio-button>
<el-radio-button label="mini">小</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="简单样式">
<el-switch v-model="props.plain"></el-switch>
</el-form-item>
<el-form-item label="圆角">
<el-switch v-model="props.round"></el-switch>
</el-form-item>
<el-form-item label="圆形">
<el-switch v-model="props.circle"></el-switch>
</el-form-item>
<el-form-item label="图标">
<el-input placeholder="请选择图标" readonly v-model="props.icon">
<template slot="append" >
<i class="el-icon-picture" style="cursor: pointer;" @click="handlerSelectIcon"/>
</template>
</el-input>
</el-form-item>
<icon-dialog v-model="props.icon" :visible.sync="iconDialogVisible"/>
</div>
</template>
<script>
/**
* input的配置项
*/
export default {
name:"buttonConfig",
props:{
props:{}
},
data(){
return {
iconDialogVisible:false
}
},
methods:{
handlerShowLabel(val){
if(val){
this.props.labelWidth = 80;
}else{
this.props.labelWidth = 0;
}
},
handlerSelectIcon(){
this.iconDialogVisible = true;
}
},
mounted(){
}
}
</script>
sample-form-client-ui/admin/src/components/formDes/custom/configs/cascader.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'cascader'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="栅格">
<el-input-number v-model="props.span" :min="1" :max="24"/>
</el-form-item>
<el-form-item label="宽度">
<el-input-number v-model="props.width" :min="0" :max="100"/>%
</el-form-item>
<el-form-item label="提示符">
<el-input class="input" v-model="props.placeholder" placeholder="请输入提示符"/>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="0" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerChangeLabel"></el-switch>
</el-form-item>
<el-form-item label="大小">
<el-radio-group v-model="props.size">
<el-radio-button label="medium">正常</el-radio-button>
<el-radio-button label="small">略小</el-radio-button>
<el-radio-button label="mini">迷你</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="清除">
<el-switch v-model="props.clearable"></el-switch>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled" ></el-switch>
</el-form-item>
<el-form-item label="完整路径">
<el-switch v-model="props.props['show-all-levels']" ></el-switch>
</el-form-item>
<el-form-item label="分隔符">
<el-input v-model="props.props.separator" ></el-input>
</el-form-item>
<el-form-item label="搜索">
<el-switch v-model="props.props.filterable" ></el-switch>
</el-form-item>
<el-form-item label="展开方式">
<el-radio-group v-model="props.props.props.expandTrigger">
<el-radio-button label="click">点击</el-radio-button>
<el-radio-button label="hover">悬停</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="多选">
<el-switch v-model="props.props.props.multiple"></el-switch>
</el-form-item>
<el-form-item label="任一级可选">
<el-switch v-model="props.props.props.checkStrictly"></el-switch>
</el-form-item>
<el-form-item label="数据类型">
<el-radio-group v-model="props.dataType" @change="handlerChangeDataType">
<el-radio-button label="static">静态数据</el-radio-button>
<el-radio-button label="dynamic">动态数据</el-radio-button>
</el-radio-group>
</el-form-item>
<div v-show="props.dataType ==='dynamic'">
<el-form-item label="地址">
<el-input v-model="props.action"></el-input>
</el-form-item>
<el-form-item label="显示标识">
<el-input v-model="props.props.props.label"></el-input>
</el-form-item>
<el-form-item label="值标识">
<el-input v-model="props.props.props.value"></el-input>
</el-form-item>
<el-form-item label="下级标识">
<el-input v-model="props.props.props.children"></el-input>
</el-form-item>
</div>
<div v-show="props.dataType ==='static'">
<el-form-item label="静态数据">
<el-button icon="el-icon-edit-outline" circle @click="handlerStaticData"></el-button>
</el-form-item>
<el-form-item label="省市区">
<el-checkbox v-model="props['china-area-data']" @change="handlerSetAreaData"/>
</el-form-item>
</div>
<!-- <el-form-item label="URL">
<el-input v-model="props.action"></el-input>
</el-form-item> -->
<el-dialog :visible.sync="staticDataVisible" width="70%"
:close-on-press-escape="false"
:close-on-click-modal="false"
:show-close="false"
:center="true"
top="20px"
>
<codemirror v-model="staticOptions" :options="codeMirror"/>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handlerSave">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {changeId} from '../mixin'
//引入 省市区 数据
import {areaData} from '../../utils/chinaAreaData';
import {codemirror} from 'vue-codemirror';
// 核心样式
import 'codemirror/lib/codemirror.css';
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/dracula.css';
import 'codemirror/mode/javascript/javascript'
const options = {
tabSize: 2, // 缩进格式
theme: 'dracula', // 主题，对应主题库 JS 需要提前引入
lineNumbers: true, // 显示行号
line: true,
styleActiveLine: true, // 高亮选中行
hintOptions: {
completeSingle: true // 当匹配只有一项的时候是否自动补全
}
}
/**
* input的配置项
*/
export default {
name:"cascaderConfig",
props:['props'],
components:{
codemirror
},
mixins:[changeId],
data(){
return {
staticDataVisible:false,
codeMirror:options,
staticOptions:'',
tempOptions:[]
}
},
methods:{
handlerChangeLabel(val){
this.props.labelWidth = val?'80':'1'
},
handlerStaticData(){
this.staticOptions = JSON.stringify(this.props.options,null,4);
this.staticDataVisible = true;
},
handlerSave(){
this.props.options = JSON.parse(this.staticOptions);
this.staticDataVisible = false;
},
handlerChangeDataType(value){
if(value === 'static'){
this.props.options = [];
this.props.options = this.tempOptions;
}else{
this.tempOptions = this.props.options;
this.props.options = [];
}
},
handlerSetAreaData(val){
if(val){
const areaoptions = areaData();
this.tempOptions = this.props.options;
this.props.options = areaoptions;
}else{
this.props.options = this.tempOptions;
}
}
},
mounted(){
},
watch:{
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/configs/checkbox.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'checkbox'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip
class="item"
effect="dark"
content="请注意,ID的修改可能会导致该组件相关事件失效！"
placement="left"
>
<el-input
class="input"
v-model="props.id"
@change="handlerChangeId"
></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="提示符">
<el-input
class="input"
v-model="props.placeholder"
placeholder="请输入提示符"
/>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number
v-model="props.labelWidth"
:min="1"
:max="200"
></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch
v-model="props.showLabel"
@change="handlerChangeLabel"
></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="垂直">
<el-switch v-model="props.vertical"></el-switch>
</el-form-item>
<el-form-item label="最小数量">
<el-input-number v-model="props.min" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="最大数量">
<el-input-number v-model="props.max" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="选项样式">
<el-radio-group v-model="props.optionType">
<el-radio-button label="default">默认</el-radio-button>
<el-radio-button label="button">按钮</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="显示边框">
<el-switch v-model="props.border"></el-switch>
</el-form-item>
<el-form-item
label="选项尺寸"
v-show="props.border || props.optionType === 'button'"
>
<el-radio-group v-model="props.size">
<el-radio-button label="medium">正常</el-radio-button>
<el-radio-button label="small">略小</el-radio-button>
<el-radio-button label="mini">迷你</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="禁用">
<el-switch
v-model="props.disabled"
@change="handlerChangeDisStatus('disabled')"
></el-switch>
</el-form-item>
<el-form-item label="默认值">
<el-input
class="input"
:value="setDefaultValue(props.value)"
placeholder="请输入默认值"
@input="onDefaultValueInput"
/>
</el-form-item>
<el-form-item label="数据类型">
<el-radio-group v-model="props.dataType" @change="handlerChangeDataType">
<el-radio-button label="static">静态数据</el-radio-button>
<el-radio-button label="dynamic">动态数据</el-radio-button>
</el-radio-group>
</el-form-item>
<div v-show="props.dataType === 'static'">
<el-divider>选项</el-divider>
<draggable :list="props.options" handle=".option-drag">
<div
v-for="(item, index) in props.options"
:key="index"
class="select-item"
>
<div class="select-line-icon option-drag">
<i class="el-icon-s-operation" />
</div>
<el-input v-model="item.label" placeholder="选项名" size="small" />
<el-input
placeholder="选项值"
size="small"
:value="item.value"
@input="setOptionValue(item, $event)"
/>
<div
class="close-btn select-line-icon"
@click="props.options.splice(index, 1)"
>
<i class="el-icon-remove-outline" />
</div>
</div>
</draggable>
<div style="margin-left: 20px">
<el-button
style="padding-bottom: 0"
icon="el-icon-circle-plus-outline"
type="text"
@click="addSelectItem"
>
添加选项
</el-button>
</div>
</div>
<div v-show="props.dataType === 'dynamic'">
<el-form-item label="地址">
<el-input v-model="props.action"></el-input>
</el-form-item>
</div>
</div>
</template>
<script>
import { changeId } from "../mixin";
import draggable from "vuedraggable";
import { isNumberStr } from "../../utils/index";
/**
* input的配置项
*/
let vm = {
name: "checkboxConfig",
props: ["props", "getFormId"],
components: {
draggable,
},
mixins: [changeId],
data() {
return {};
},
methods: {
handlerChangeLabel(val) {
this.props.labelWidth = val ? "80" : "1";
},
handlerChangeDisStatus(val) {
this.props.readOnly = !val;
},
handlerChangeReadStatus(val) {
this.props.disabled = !val;
},
setDefaultValue(val) {
if (Array.isArray(val)) {
return val.join(",");
}
if (["string", "number"].indexOf(val) > -1) {
return val;
}
if (typeof val === "boolean") {
return `${val}`;
}
return val;
},
onDefaultValueInput(str) {
if (Array.isArray(this.props.value)) {
// 数组
this.$set(
this.props,
"value",
str.split(",").map((val) => (isNumberStr(val) ? +val : val))
);
} else if (["true", "false"].indexOf(str) > -1) {
// 布尔
this.$set(this.props, "value", JSON.parse(str));
} else {
// 字符串和数字
this.$set(this.props, "value", isNumberStr(str) ? +str : str);
}
},
setOptionValue(item, val) {
item.value = isNumberStr(val) ? +val : val;
},
addSelectItem() {
this.props.options.push({
label: "",
value: "",
});
},
multipleChange(val) {
// this.$set(this.props, 'value', val ? [] : '')
return val;
},
handlerChangeDataType(value) {
if (value === "static") {
this.props.options = [];
this.props.options = this.tempOptions;
} else {
this.tempOptions = this.props.options;
this.props.options = [];
}
},
},
mounted() {},
watch: {},
};
export default vm;
</script>
<style lang="less" scoped>
.input {
width: 75%;
}
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/configs/colorPicker.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'colorPicker'">
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerShowLabel"></el-switch>
</el-form-item>
<el-form-item label="标签文字" v-show="props.showLabel">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="标签长度" v-show="props.showLabel">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="透明">
<el-switch v-model="props['show-alpha']"></el-switch>
</el-form-item>
<el-form-item label="默认颜色">
<el-color-picker v-model="props.value" />
</el-form-item>
<el-form-item label="大小">
<el-radio-group v-model="props.size">
<el-radio-button label="medium">常规</el-radio-button>
<el-radio-button label="small">略小</el-radio-button>
<el-radio-button label="mini">迷你</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="预定义颜色">
<div class="select-item" v-for="(item,index) in props.predefine" :key="item">
<span class="el-color-picker__color"><!--style="background-color: rgb(64, 158, 255);"-->
<span class="el-color-picker__color-inner" :style="{'background-color':item}">
</span>
</span>
<div class="close-btn select-line-icon">
<i class="el-icon-remove-outline" @click="handlerRemoveColor(index)"/>
</div>
</div>
<br/>
<el-color-picker v-model="color" @change="handlerAddPreColor"></el-color-picker>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"buttonConfig",
props:{
props:{}
},
mixins:[changeId],
data(){
return {
color:'#409EFF',
}
},
methods:{
handlerShowLabel(val){
if(val){
this.props.labelWidth = 80;
}else{
this.props.labelWidth = 0;
}
},
handlerAddPreColor(val){
console.log(val);
this.props.predefine.push(val);
console.log(this.props.predefine);
},
handlerRemoveColor(index){
this.props.predefine.splice(index,1);
}
},
mounted(){
}
}
</script>
<style scoped>
.el-color-picker__color{
position: relative;
display: block;
box-sizing: border-box;
border: 1px solid #999;
border-radius: 2px;
width:100px;
height:30px;
float:left;
margin-right:2px;
}
</style>
sample-form-client-ui/admin/src/components/formDes/custom/configs/date.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'date'">
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel"></el-switch>
</el-form-item>
<el-form-item label="提示符">
<el-input class="input" v-model="props.placeholder"></el-input>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="时间类型">
<el-select class="input" v-model="props.type" @change="handlerFormatChange">
<el-option v-for="item in dateTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="时间格式">
<el-input class="input" :value="props.format" @change="handlerChangeValueFormat"/>
</el-form-item>
<el-form-item label="清空">
<el-switch v-model="props.clearable"></el-switch>
</el-form-item>
<el-form-item label="只读">
<el-switch v-model="props.readonly"></el-switch>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="分隔符" v-show="props.type === 'monthrange'||props.type === 'daterange'||props.type === 'datetimerange'">
<el-input v-model="props['range-separator']"></el-input>
</el-form-item>
<el-form-item label="默认值">
<el-date-picker class="input" v-model="props.value" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"/>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
const dateType =[
{
label: '日(date)',
value: 'date'
},
{
label: '周(week)',
value: 'week'
},
{
label: '月(month)',
value: 'month'
},
{
label: '年(year)',
value: 'year'
},
{
label: '日期时间(datetime)',
value: 'datetime'
},
{
label: '月份范围',
value: 'monthrange'
},
{
label: '日期范围',
value: 'daterange'
},
{
label: '日期时间范围',
value: 'datetimerange'
}
];
const dateTimeFormat = {
date: 'yyyy-MM-dd',
week: 'yyyy 第 WW 周',
month: 'yyyy-MM',
year: 'yyyy',
datetime: 'yyyy-MM-dd HH:mm:ss',
daterange: 'yyyy-MM-dd',
monthrange: 'yyyy-MM',
datetimerange: 'yyyy-MM-dd HH:mm:ss'
}
export default {
name:"inputConfig",
props:['props','getFormId'],
components: {
},
mixins:[changeId],
data(){
return {
dateTypeOptions:dateType
}
},
methods:{
handlerFormatChange(val){
this.props.format = dateTimeFormat[val];
this.props['value-format'] = dateTimeFormat[val];
},
handlerChangeValueFormat(val){
this.props['value-format'] = val;
}
},
mounted(){
}
}
</script>
<style scoped>
.input{
width:75%
}
</style>
sample-form-client-ui/admin/src/components/formDes/custom/configs/dialogList.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'dialogList'" class="dialogList">
<el-collapse v-model="activePanel" accordion>
<el-collapse-item title="基础设置" name="1">
<el-form-item label="ID" >
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题" >
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="栅格" >
<el-input-number v-model="props.span" :min="1" :max="24"/>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel"></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="禁用" >
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="默认值" >
<el-input class="input" v-model="props.value"></el-input>
</el-form-item>
<el-form-item label="请求地址">
<el-input v-model="props.action"></el-input>
</el-form-item>
<el-form-item label="标题">
<el-input v-model="props.title"></el-input>
</el-form-item>
<el-form-item label="多选">
<el-switch v-model="props.multi"></el-switch>
</el-form-item>
<el-form-item label="显示序号">
<el-switch v-model="props.showIndex"></el-switch>
</el-form-item>
<el-form-item label="表格高度">
<el-input-number v-model="props.height" :step="10" :max="1500" :min="100"></el-input-number>
</el-form-item>
<el-form-item label="字段值">
<el-input v-model="props.dval"></el-input>
</el-form-item>
<el-form-item label="字段名称">
<el-input v-model="props.dlabel"></el-input>
</el-form-item>
</el-collapse-item>
<el-collapse-item title="字段配置" name="2">
<el-table
:data="colOptions"
@row-dblclick="handlerDeleteRow"
>
<el-table-column property="label" label="字段" align="center" />
<el-table-column property="property" label="属性" align="center" />
<el-table-column property="width" label="宽度" align="center" width="70" />
<el-table-column label="显示">
</el-table-column>
</el-table>
<br/>
<el-alert title="字段和属性不能为空,请检查" v-show="alertShow" type="error" :closable="false"/>
<el-alert title="属性已存在请检查" v-show="propertyExistShow" type="error" :closable="false"/>
<br>
<el-form-item label="字段" label-width="60px">
<el-input v-model="dLabel" />
</el-form-item>
<el-form-item label="属性" label-width="60px">
<el-input v-model="dProperty"/>
</el-form-item>
<el-form-item label="宽度" label-width="60px">
<el-input-number v-model="dWidth" />
</el-form-item>
<el-form-item label="显示" label-width="60px">
<el-switch v-model="dShow" />
</el-form-item>
<div style="margin-left: 20px;">
<el-button
style="padding-bottom: 0"
icon="el-icon-circle-plus-outline"
type="text"
@click="addColItem"
>
添加选项
</el-button>
</div>
</el-collapse-item>
<el-collapse-item title="数值联动" name="3">
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
/**
* text的配置项
*/
export default {
name:"textConfig",
props:{
props:{}
},
data(){
return {
activePanel:'1',
colOptions:[],
dLabel:'',
dProperty:'',
dWidth:150,
dShow:true,
alertShow:false,
propertyExistShow:false,
}
},
methods:{
addColItem(){
if(this.dLabel!==''&&this.dProperty!==''){
const existOptions = this.colOptions.find(item=>item.property === this.dProperty);
if( typeof existOptions === 'undefined'){
this.alertShow = false;
this.propertyExistShow = false;
const obj = {};
obj.index = this.colOptions.length;
obj.show = this.dShow;
obj.label = this.dLabel;
obj.property = this.dProperty;
obj.width = this.dWidth;
this.colOptions.push(obj);
this.resetFields();
}else{
this.propertyExistShow = true;
}
}else{
this.alertShow = true;
}
},
resetFields(){
this.dLabel = '';
this.dProperty = '';
this.dWidth = 150;
this.dShow = true;
},
handlerDeleteRow(row){
let index = this.colOptions.findIndex(item=>item.property==row.property);
this.colOptions.splice(index,1);
}
},
mounted() {
this.$nextTick(()=> {
this.colOptions = this.colOptions.concat(JSON.parse(this.props.colConf));
})
},
watch:{
'colOptions'(newVal){
this.props.colConf = JSON.stringify(newVal);
}
}
}
</script>
<style scoped>
.dialogList >>> .el-collapse-item__header{
background-color: #f4f6fc;
padding-left:10px;
}
.dialogList >>> .el-collapse-item__header{
height:35px;
}
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/configs/divider.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'divider'">
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="文字">
<el-input class="input" v-model="props.text"></el-input>
</el-form-item>
<el-form-item label="文字大小">
<el-radio-group v-model="props['content-position']">
<el-radio-button label="left">左</el-radio-button>
<el-radio-button label="center">中</el-radio-button>
<el-radio-button label="right">右</el-radio-button>
</el-radio-group>
</el-form-item>
</div>
</template>
<script>
/**
* input的配置项
*/
export default {
name:"dividerConfig",
props:{
props:{}
},
data(){
return {
}
},
methods:{
},
mounted(){
}
}
</script>
sample-form-client-ui/admin/src/components/formDes/custom/configs/dynamicTable.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'dynamicTable'">
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="显示新增按钮" label-width="120px">
<el-switch v-model="props.buttonAdd"></el-switch>
</el-form-item>
<el-form-item label="显示删除按钮" label-width="120px">
<el-switch v-model="props.buttonDel"></el-switch>
</el-form-item>
<el-form-item label="显示行号" label-width="120px">
<el-switch v-model="props.showIndex"></el-switch>
</el-form-item>
<el-form-item label="多选" label-width="120px">
<el-switch v-model="props.multiCheck"></el-switch>
</el-form-item>
<el-form-item label="合计行" label-width="120px">
<el-switch v-model="props['show-summary']"></el-switch>
</el-form-item>
<el-form-item label="合计文本" label-width="120px">
<el-input v-model="props['sum-text']"></el-input>
</el-form-item>
<el-form-item label="单位文本" label-width="120px">
<el-input v-model="props['summary-text']"></el-input>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"dynamicTableConfig",
props:['props','getFormId'],
mixins:[changeId],
data(){
return {
}
},
methods:{
}
}
</script>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/configs/editor.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'editor'">
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerShowLabel"></el-switch>
</el-form-item>
<el-form-item label="标签文字" v-show="props.showLabel">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="标签长度" v-show="props.showLabel">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="验证最大字数">
<el-switch v-model="props.validateMaxText"></el-switch>
</el-form-item>
<el-form-item label="最大字数">
<el-input-number v-model="props.max" :min="100" ></el-input-number>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"editorConfig",
props:{
props:{}
},
mixins:[changeId],
methods:{
handlerShowLabel(val){
if(val){
this.props.labelWidth = 80;
}else{
this.props.labelWidth = 0;
}
}
}
}
</script>
sample-form-client-ui/admin/src/components/formDes/custom/configs/html.vue deleted 100644 → 0
View file @ a2e43d12
<!--废弃-->
<template>
<div v-show="props.compType === 'html'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID" labelWidth="40px">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="文本" labelWidth="40px">
<!-- <el-input type="textarea" class="input" v-model="props.text" rows="12"></el-input> -->
<el-button icon="el-icon-edit-outline" circle @click="handlerEditMore"></el-button>
</el-form-item>
<el-dialog :visible.sync="editTextVisible" width="70%"
:close-on-press-escape="false"
:close-on-click-modal="false"
:show-close="false"
:center="true"
top="20px"
>
<fancy-editor v-model="props.text"/>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handlerSave">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
/**
* text的配置项
*/
export default{
name:"htmlConfig",
props:{
props:{}
},
data(){
return {
editTextVisible:false
}
},
methods:{
handlerEditMore(){
this.editTextVisible = true;
},
handlerSave(){
this.editTextVisible = false;
}
}
}
</script>
sample-form-client-ui/admin/src/components/formDes/custom/configs/input.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'input'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip
class="item"
effect="dark"
content="请注意,ID的修改可能会导致该组件相关事件失效！"
placement="left"
>
<el-input
class="input"
v-model="props.id"
@change="handlerChangeId"
></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="栅格">
<el-input-number v-model="props.span" :min="1" :max="24" />
</el-form-item>
<!-- <el-form-item label="宽度">-->
<!-- <el-input-number v-model="props.width" :min="1" :max="100"/>%-->
<!-- </el-form-item>-->
<el-form-item label="提示符">
<el-input
class="input"
v-model="props.placeholder"
placeholder="请输入提示符"
/>
</el-form-item>
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number
v-model="props.labelWidth"
:min="1"
:max="200"
></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch
v-model="props.showLabel"
@change="handlerChangeLabel"
></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="清除">
<el-switch v-model="props.clearable"></el-switch>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="只读">
<el-switch v-model="props.readonly"></el-switch>
</el-form-item>
<el-form-item label="前置图标">
<el-input
placeholder="请选择图标"
readonly
v-model="props['prefix-icon']"
>
<template slot="append">
<i
class="el-icon-picture"
style="cursor: pointer"
@click="handlerPrefixSelectIcon"
/>
</template>
</el-input>
</el-form-item>
<el-form-item label="后置图标">
<el-input
placeholder="请选择图标"
readonly
v-model="props['suffix-icon']"
>
<template slot="append">
<i
class="el-icon-picture"
style="cursor: pointer"
@click="handlerSuffixSelectIcon"
/>
</template>
</el-input>
</el-form-item>
<el-form-item label="前缀">
<el-input v-model="props.prepend"> </el-input>
</el-form-item>
<el-form-item label="后缀">
<el-input v-model="props.append"> </el-input>
</el-form-item>
<el-form-item label="默认值">
<el-input class="input" v-model="props.value"></el-input>
</el-form-item>
<el-divider>校验</el-divider>
<el-form-item label="验证类型">
<el-select v-model="props.rulesType" @change="handlerChangeRulesType">
<el-option label="无" value="default" />
<el-option label="电话" value="phone" />
<el-option label="邮箱" value="email" />
<el-option label="纯数字" value="number" />
<el-option label="身份证" value="idcard" />
</el-select>
</el-form-item>
<div v-for="(item, index) in props.rules" :key="index" class="rule-item">
<el-input v-model="item.rule" placeholder="正则" size="small" />
<p />
<el-input v-model="item.msg" placeholder="自定义提示" size="small" />
<div
class="close-btn select-line-icon"
@click="props.rules.splice(index, 1)"
>
<i class="el-icon-remove-outline close-icon" />
</div>
</div>
<div style="margin-left: 20px">
<el-button
style="padding-bottom: 0"
icon="el-icon-circle-plus-outline"
type="text"
@click="addRuleItem"
>
添加选项
</el-button>
</div>
<icon-dialog
v-model="props['suffix-icon']"
:visible.sync="iconDialogVisible_suffix"
/>
<icon-dialog
v-model="props['prefix-icon']"
:visible.sync="iconDialogVisible_prefix"
/>
</div>
</template>
<script>
import { changeId } from "../mixin";
import iconDialog from "../../iconDialog";
const defaultRules = {
phone: {
rule: "^1[3-9]\\d{9}$",
msg: "您输入的电话号码不符合规则",
},
email: {
rule: "^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$",
msg: "您输入的邮件地址不符合规则",
},
number: { rule: "^[0-9]*$", msg: "您输入的内容不符合纯数字规则" },
idcard: {
rule: "^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$",
msg: "您输入的身份证号码不符合规则",
},
};
/**
* input的配置项
*/
export default {
name: "inputConfig",
props: ["props", "getFormId"],
components: {
iconDialog,
},
mixins: [changeId],
data() {
return {
val: "",
iconDialogVisible_suffix: false,
iconDialogVisible_prefix: false,
};
},
methods: {
handlerChangeLabel(val) {
this.props.labelWidth = val ? "80" : "1";
},
handlerSuffixSelectIcon() {
this.iconDialogVisible_suffix = true;
},
handlerPrefixSelectIcon() {
this.iconDialogVisible_prefix = true;
},
addRuleItem() {
this.props.rules.push({
rule: "",
msg: "",
});
},
handlerChangeRulesType(val) {
const obj = defaultRules[val];
this.props.rules.push({
rule: obj.rule,
msg: obj.msg,
});
},
},
mounted() {},
watch: {},
};
</script>
<style scoped>
.input {
width: 75%;
}
.rule-item {
padding-top: 5px;
padding-bottom: 5px;
}
.close-btn {
text-align: center;
}
.close-icon:hover {
cursor: pointer;
}
.close-btn >>> .el-icon-remove-outline {
color: "red";
}
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/configs/inputNumber.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'inputNumber'">
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerChangeLabel"></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="最小值">
<el-input-number v-model="props.min"></el-input-number>
</el-form-item>
<el-form-item label="最大值">
<el-input-number v-model="props.max"></el-input-number>
</el-form-item>
<el-form-item label="步长">
<el-input-number v-model="props.step"></el-input-number>
</el-form-item>
<el-form-item label="精度">
<el-input-number v-model="props.precision" :min="0" :max="10"></el-input-number>
</el-form-item>
<el-form-item label="按钮位置">
<el-radio-group v-model="props['controls-position']">
<el-radio-button label="default">默认</el-radio-button>
<el-radio-button label="right">右侧</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled" @change="handlerChangeDisStatus('disabled')"></el-switch>
</el-form-item>
<el-form-item label="默认值">
<el-input class="input" v-model="props.value"></el-input>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"inputConfig",
props:['props','getFormId'],
components: {
},
mixins:[changeId],
data(){
return {
}
},
methods:{
handlerChangeLabel(val){
this.props.labelWidth = val?'80':'1'
},
handlerChangeDisStatus(val){
this.props.readOnly = val?false:true
},
handlerChangeReadStatus(val){
this.props.disabled = val?false:true
},
},
mounted(){
}
}
</script>
<style scoped>
.input{
width:75%
}
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/configs/link.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'link'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="链接文字">
<el-input class="input" v-model="props.text"></el-input>
</el-form-item>
<el-form-item label="类型" >
<el-select v-model="props.type" placeholder="请选择">
<el-option label="primary" value="primary"/>
<el-option label="success" value="success"/>
<el-option label="warning" value="warning"/>
<el-option label="danger" value="danger"/>
<el-option label="info" value="info"/>
</el-select>
</el-form-item>
<el-form-item label="url">
<el-input class="input" v-model="props.href"></el-input>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="新窗口">
<el-switch v-model="isNewWindow" @change="handlerChangeTargetValue"></el-switch>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"buttonConfig",
props:{
props:{}
},
components:{
},
mixins:[changeId],
data(){
return {
isNewWindow:true
}
},
methods:{
handlerShowLabel(val){
if(val){
this.props.labelWidth = 80;
}else{
this.props.labelWidth = 0;
}
},
handlerChangeTargetValue(val){
if(val){
this.props.target = '_blank';
}else{
this.props.target = '_self';
}
}
},
mounted(){
}
}
</script>
sample-form-client-ui/admin/src/components/formDes/custom/configs/radio.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'radio'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip
class="item"
effect="dark"
content="请注意,ID的修改可能会导致该组件相关事件失效！"
placement="left"
>
<el-input
class="input"
v-model="props.id"
@change="handlerChangeId"
></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="提示符">
<el-input
class="input"
v-model="props.placeholder"
placeholder="请输入提示符"
/>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number
v-model="props.labelWidth"
:min="1"
:max="200"
></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch
v-model="props.showLabel"
@change="handlerChangeLabel"
></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="垂直">
<el-switch v-model="props.vertical"></el-switch>
</el-form-item>
<el-form-item label="选项样式">
<el-radio-group v-model="props.optionType">
<el-radio-button label="default">默认</el-radio-button>
<el-radio-button label="button">按钮</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="显示边框">
<el-switch v-model="props.border"></el-switch>
</el-form-item>
<el-form-item
label="大小"
v-show="props.border || props.optionType === 'button'"
>
<el-radio-group v-model="props.size">
<el-radio-button label="medium">正常</el-radio-button>
<el-radio-button label="small">略小</el-radio-button>
<el-radio-button label="mini">迷你</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="禁用">
<el-switch
v-model="props.disabled"
@change="handlerChangeDisStatus('disabled')"
></el-switch>
</el-form-item>
<el-form-item label="默认值">
<el-input
class="input"
:value="setDefaultValue(props.value)"
placeholder="请输入默认值"
@input="onDefaultValueInput"
/>
</el-form-item>
<el-form-item label="数据类型">
<el-radio-group v-model="props.dataType" @change="handlerChangeDataType">
<el-radio-button label="static">静态数据</el-radio-button>
<el-radio-button label="dynamic">动态数据</el-radio-button>
</el-radio-group>
</el-form-item>
<div v-show="props.dataType === 'static'">
<el-divider>选项</el-divider>
<draggable :list="props.options" handle=".option-drag">
<div
v-for="(item, index) in props.options"
:key="index"
class="select-item"
>
<div class="select-line-icon option-drag">
<i class="el-icon-s-operation" />
</div>
<el-input v-model="item.label" placeholder="选项名" size="small" />
<el-input
placeholder="选项值"
size="small"
:value="item.value"
@input="setOptionValue(item, $event)"
/>
<div
class="close-btn select-line-icon"
@click="props.options.splice(index, 1)"
>
<i class="el-icon-remove-outline" />
</div>
</div>
</draggable>
<div style="margin-left: 20px">
<el-button
style="padding-bottom: 0"
icon="el-icon-circle-plus-outline"
type="text"
@click="addSelectItem"
>
添加选项
</el-button>
</div>
</div>
<div v-show="props.dataType === 'dynamic'">
<el-form-item label="地址">
<el-input v-model="props.action"></el-input>
</el-form-item>
</div>
</div>
</template>
<script>
import { changeId } from "../mixin";
import draggable from "vuedraggable";
import { isNumberStr } from "../../utils/index";
/**
* input的配置项
*/
let vm = {
name: "inputConfig",
props: ["props", "getFormId"],
components: {
draggable,
},
mixins: [changeId],
data() {
return {
val: 123,
};
},
methods: {
handlerChangeLabel(val) {
this.props.labelWidth = val ? "80" : "1";
},
handlerChangeDisStatus(val) {
this.props.readOnly = !val;
},
handlerChangeReadStatus(val) {
this.props.disabled = !val;
},
setDefaultValue(val) {
if (Array.isArray(val)) {
return val.join(",");
}
if (["string", "number"].indexOf(val) > -1) {
return val;
}
if (typeof val === "boolean") {
return `${val}`;
}
return val;
},
onDefaultValueInput(str) {
if (Array.isArray(this.props.value)) {
// 数组
this.$set(
this.props,
"value",
str.split(",").map((val) => (isNumberStr(val) ? +val : val))
);
} else if (["true", "false"].indexOf(str) > -1) {
// 布尔
this.$set(this.props, "value", JSON.parse(str));
} else {
// 字符串和数字
this.$set(this.props, "value", isNumberStr(str) ? +str : str);
}
},
setOptionValue(item, val) {
item.value = isNumberStr(val) ? +val : val;
},
addSelectItem() {
this.props.options.push({
label: "",
value: "",
});
},
multipleChange(val) {
// this.$set(this.props, 'value', val ? [] : '')
return val;
},
handlerChangeDataType(value) {
if (value === "static") {
this.props.options = [];
this.props.options = this.tempOptions;
} else {
this.tempOptions = this.props.options;
this.props.options = [];
}
},
},
mounted() {},
watch: {},
};
export default vm;
</script>
<style lang="less" scoped>
.input {
width: 75%;
}
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/configs/rate.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'rate'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel"></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="允许半选">
<el-switch v-model="props['allow-half']"></el-switch>
</el-form-item>
<el-form-item label="显示分数">
<el-switch v-model="props['show-score']"></el-switch>
</el-form-item>
<el-form-item label="最大值">
<el-input-number v-model="props.max"></el-input-number>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="默认值">
<el-input class="input" v-model="props.value"></el-input>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"rate",
props:['props','getFormId'],
components: {
},
mixins:[changeId],
data(){
return {
}
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
.input{
width:75%
}
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/configs/row.vue deleted 100644 → 0
View file @ a2e43d12
<!--后期支持flex布局-->
<template>
<div v-show="props.compType === 'row'">
<el-form-item label="栅格间隔">
<el-input-number size="small" v-model="props.gutter" :min="0" :max="100"/>
</el-form-item>
<el-divider>列配置项</el-divider>
<div v-for="(item, index) in props.columns" :key="index" class="select-item">
<div class="select-line-icon">
<i class="el-icon-s-operation" />
</div>
<el-input-number
size="normal"
v-model="item.span"
:min="1" :max="24"
/>
<div class="close-btn select-line-icon" @click="props.columns.splice(index,1)">
<i class="el-icon-remove-outline" />
</div>
</div>
<div style="margin-left: 30px;">
<el-button
style="padding-bottom: 0"
icon="el-icon-circle-plus-outline"
type="text"
@click="handlerAddCol"
>
添加选项
</el-button>
</div>
</div>
</template>
<script>
export default {
name:"rowConfig",
props:['props','getFormId'],
data(){
return {
}
},
methods:{
handlerAddCol(){
const colIndex = this.props.columns+1;
this.props.columns.push({
index:colIndex,
span:12,
list:[]
})
},
},
mounted(){
}
}
</script>
sample-form-client-ui/admin/src/components/formDes/custom/configs/select.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'select'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip
class="item"
effect="dark"
content="请注意,ID的修改可能会导致该组件相关事件失效！"
placement="left"
>
<el-input
class="input"
v-model="props.id"
@change="handlerChangeId"
></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="提示符">
<el-input
class="input"
v-model="props.placeholder"
placeholder="请输入提示符"
/>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number
v-model="props.labelWidth"
:min="1"
:max="200"
></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch
v-model="props.showLabel"
@change="handlerChangeLabel"
></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="清除">
<el-switch v-model="props.clearable"></el-switch>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="多选">
<el-switch v-model="props.multiple" @change="multipleChange"></el-switch>
</el-form-item>
<el-form-item label="折叠" v-show="props.multiple">
<el-switch v-model="props['collapse-tags']"></el-switch>
</el-form-item>
<el-form-item label="搜索">
<el-switch v-model="props.filterable"></el-switch>
</el-form-item>
<el-form-item label="默认值">
<el-input
class="input"
:value="setValue(props.value)"
placeholder="请输入默认值"
@input="onValueInput"
/>
</el-form-item>
<el-form-item label="数据类型">
<el-radio-group v-model="props.dataType" @change="handlerChangeDataType">
<el-radio-button label="static">静态数据</el-radio-button>
<el-radio-button label="dynamic">动态数据</el-radio-button>
</el-radio-group>
</el-form-item>
<div v-show="props.dataType === 'static'">
<el-divider>选项</el-divider>
<draggable :list="props.options" handle=".option-drag">
<div
v-for="(item, index) in props.options"
:key="index"
class="select-item"
>
<div class="select-line-icon option-drag">
<i class="el-icon-s-operation" />
</div>
<el-input v-model="item.label" placeholder="选项名" size="small" />
<el-input
placeholder="选项值"
size="small"
:value="item.value"
@input="setOptionValue(item, $event)"
/>
<div
class="close-btn select-line-icon"
@click="props.options.splice(index, 1)"
>
<i class="el-icon-remove-outline" />
</div>
</div>
</draggable>
<div style="margin-left: 20px">
<el-button
style="padding-bottom: 0"
icon="el-icon-circle-plus-outline"
type="text"
@click="addSelectItem"
>
添加选项
</el-button>
</div>
</div>
<div v-show="props.dataType === 'dynamic'">
<el-form-item label="地址">
<el-input v-model="props.action"></el-input>
</el-form-item>
</div>
</div>
</template>
<script>
import { changeId } from "../mixin";
import draggable from "vuedraggable";
import { isNumberStr } from "../../utils/index";
export default {
name: "inputConfig",
props: ["props", "getFormId"],
components: {
draggable,
},
mixins: [changeId],
data() {
return {
tempOptions: [],
};
},
methods: {
handlerChangeLabel(val) {
this.props.labelWidth = val ? "80" : "1";
},
setValue(val) {
if (Array.isArray(val)) {
return val.join(",");
}
if (["string", "number"].indexOf(val) > -1) {
return val;
}
if (typeof val === "boolean") {
return `${val}`;
}
return val;
},
onValueInput(str) {
if (Array.isArray(this.props.value)) {
// 数组
this.$set(
this.props,
"value",
str.split(",").map((val) => (isNumberStr(val) ? +val : val))
);
} else if (["true", "false"].indexOf(str) > -1) {
// 布尔
this.$set(this.props, "value", JSON.parse(str));
} else {
// 字符串和数字
this.$set(this.props, "value", isNumberStr(str) ? +str : str);
}
},
setOptionValue(item, val) {
item.value = isNumberStr(val) ? +val : val;
},
addSelectItem() {
this.props.options.push({
label: "",
value: "",
});
},
multipleChange(val) {
this.$set(this.props, "value", val ? [] : "");
},
handlerChangeDataType(value) {
if (value === "static") {
this.props.options = [];
this.props.options = this.tempOptions;
} else {
this.tempOptions = this.props.options;
this.props.options = [];
}
},
},
mounted() {},
};
</script>
<style lang="less" scoped>
.input {
width: 75%;
}
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/configs/slider.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'slider'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel"></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="最小值">
<el-input-number v-model="props.min" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="最大值">
<el-input-number v-model="props.max" placeholder="字符长度"/>
</el-form-item>
<el-form-item label="步长">
<el-input-number v-model="props.step"></el-input-number>
</el-form-item>
<el-form-item label="范围选择">
<el-switch v-model="props.range"></el-switch>
</el-form-item>
<el-form-item label="显示断点">
<el-switch v-model="props['show-stops']"></el-switch>
</el-form-item>
<el-form-item label="显示提示消息">
<el-switch v-model="props['show-tooltip']"></el-switch>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="默认值">
<el-input class="input" v-model="props.value"></el-input>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"inputConfig",
props:['props','getFormId'],
components: {
},
mixins:[changeId],
data(){
return {
}
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
.input{
width:75%
}
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/configs/table.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'table'">
<el-form-item label="ID" >
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="单元格样式">
<el-input class="input" v-model="props.tdStyle"></el-input>
</el-form-item>
<el-form-item label="表格宽度">
<el-inputNumber class="input" :min="0" :max="500" v-model="props.width"></el-inputNumber>
</el-form-item>
<el-form-item label="行高">
<el-inputNumber class="input" :min="0" :max="1500" :step="5" v-model="props.height"></el-inputNumber>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
/**
* input的配置项
*/
export default {
name:"inputConfig",
props:['props','getFormId'],
components:{
},
mixins:[changeId],
data(){
return {
}
},
methods:{
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/configs/tdItem.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'tdItem'">
<el-form-item label="单元格背景">
<el-color-picker v-model="props.style.background" :predefine="predefineColors"/>
</el-form-item>
<el-form-item label="表格宽度(%)">
<el-inputNumber class="input" :min="0" :max="100" v-model="props.style.width"/>
</el-form-item>
</div>
</template>
<script>
/**
* input的配置项
*/
export default {
name:"tdItemConfig",
props:['props'],
data(){
return {
predefineColors: [
'#F6F6F6'
]
}
},
methods:{
}
}
</script>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/configs/text.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'text'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID" labelWidth="40px">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="文本" labelWidth="40px">
<el-input type="textarea" class="input" v-model="props.text" rows="12" ></el-input>
</el-form-item>
<el-form-item label="颜色" labelWidth="40px">
<el-color-picker v-model="props.color" />
</el-form-item>
<el-form-item label="布局" labelWidth="40px">
<el-radio-group v-model="props.align">
<el-radio-button label="left">左</el-radio-button>
<el-radio-button label="center">中</el-radio-button>
<el-radio-button label="right">右</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="大小" labelWidth="40px">
<el-input-number v-model="props.size" :min="10" :max="50" @change="handlerChangeSize"></el-input-number>
</el-form-item>
<el-form-item label="加粗" labelWidth="40px">
<el-input-number v-model="props.bold" :min="100" :max="800" :step="100" @change="handlerChangeBold"></el-input-number>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"textConfig",
props:['props'],
data(){
return{
}
},
mixins:[changeId],
methods:{
handlerChangeSize(val){
this.props.size = val+'';
},
handlerChangeBold(val){
this.props.bold = val+'';
}
}
}
</script>
sample-form-client-ui/admin/src/components/formDes/custom/configs/textarea.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'textarea'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="提示符">
<el-input class="input" v-model="props.placeholder" placeholder="请输入提示符"/>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerChangeLabel"></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="输入框行数">
<el-input-number v-model="props.rows" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="长度限制">
<el-input-number v-model="props.maxlength" placeholder="字符长度"/>
</el-form-item>
<el-form-item label="输入统计">
<el-switch v-model="props['show-word-limit']"></el-switch>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled" @change="handlerChangeDisStatus"></el-switch>
</el-form-item>
<el-form-item label="只读">
<el-switch v-model="props.readonly" @change="handlerChangeReadStatus"></el-switch>
</el-form-item>
<el-form-item label="默认值">
<el-input class="input" v-model="props.value"></el-input>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"inputConfig",
props:['props','getFormId'],
components: {
},
mixins:[changeId],
data(){
return {
}
},
methods:{
handlerChangeLabel(val){
this.props.labelWidth = val?'80':'1'
},
handlerChangeDisStatus(val){
this.props.readOnly = !val
},
handlerChangeReadStatus(val){
this.props.disabled = !val
}
},
mounted(){
}
}
</script>
<style scoped>
.input{
width:75%
}
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/configs/time.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'time'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel"></el-switch>
</el-form-item>
<el-form-item label="显示标签">
<el-input class="input" v-model="props.placeholder"></el-input>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="清空">
<el-switch v-model="props.clearable"></el-switch>
</el-form-item>
<el-form-item label="只读">
<el-switch v-model="props.readonly"></el-switch>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="范围选择">
<el-switch v-model="props['is-range']"></el-switch>
</el-form-item>
<el-form-item label="分隔符" v-show="props['is-range']">
<el-input v-model="props['range-separator']"></el-input>
</el-form-item>
<el-form-item label="默认值">
<el-time-picker class="input" v-model="props.value" placeholder="选择默认时间"/>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"timeConfig",
components: {
},
mixins:[changeId],
props:['props','getFormId'],
data(){
return {
}
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
.input{
width:75%
}
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/configs/upload.vue deleted 100644 → 0
View file @ a2e43d12
<template>
<div v-show="props.compType === 'upload'">
<el-form-item label="ID">
<el-tooltip
class="item"
effect="dark"
content="请注意,ID的修改可能会导致该组件相关事件失效！"
placement="left"
>
<el-input
class="input"
v-model="props.id"
@change="handlerChangeId"
></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="栅格">
<el-input-number v-model="props.span" :min="1" :max="24" />
</el-form-item>
<el-form-item label="宽度%">
<el-input-number v-model="props.width" :min="1" :max="100" />
</el-form-item>
<el-form-item label="提示符">
<el-input
class="input"
v-model="props.placeholder"
placeholder="请输入提示符"
/>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number
v-model="props.labelWidth"
:min="1"
:max="200"
></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch
v-model="props.showLabel"
@change="handlerChangeLabel"
></el-switch>
</el-form-item>
<el-form-item label="请求地址">
<el-input v-model="props.action"></el-input>
</el-form-item>
<el-form-item label="大小(MB)">
<el-input-number
v-model="props.fileSize"
:min="1"
:max="10000"
:step="10"
/>
</el-form-item>
<el-form-item label="数量限制">
<el-input-number v-model="props.limit" :min="1" :max="6" :step="1" />
</el-form-item>
<el-form-item label="允许文件类型">
<el-input v-model="props.accept"></el-input>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="多文件上传">
<el-switch v-model="props.multiple"></el-switch>
</el-form-item>
<el-form-item label="显示文件列表">
<el-switch v-model="props['show-file-list']"></el-switch>
</el-form-item>
<el-form-item label="显示类型">
<el-radio-group v-model="props['list-type']">
<el-radio-button label="text">普通</el-radio-button>
<!-- <el-radio-button label="picture">照片</el-radio-button> -->
<el-radio-button label="picture-card">照片</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="按钮文字">
<el-input v-model="props.buttonText"></el-input>
</el-form-item>
<el-form-item label="显示提示">
<el-switch v-model="props.showTip"></el-switch>
</el-form-item>
<el-form-item label="提示内容" v-show="props.showTip">
<el-input v-model="props.tips"></el-input>
</el-form-item>
</div>
</template>
<script>
import { changeId } from "../mixin";
export default {
name: "uploadConfig",
props: ["props"],
components: {},
mixins: [changeId],
data() {
return {};
},
methods: {
handlerChangeLabel(val) {
this.props.labelWidth = val ? "80" : "1";
},
},
mounted() {},
watch: {},
};
</script>
<style scoped>
.input {
width: 75%;
}
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/formConf.js deleted 100644 → 0
View file @ a2e43d12
/**
* 表单配置
*/
const formConf = {
version:'1.10',
formRef: 'elForm',
formModel: 'form',
rules: 'rules',
size: 'medium',
labelPosition: 'top',
labelWidth: 80,
formRules: 'rules',
gutter: 15,
disabled: false,
dynamicTableAllowed:true
};
export default formConf;
//动态表单允许放入的组件
export const dynamicTableAllowedItems = [
'input',
'select',
'radio',
'checkbox',
'Switch',
'inputNumber',
'textarea',
'slider',
'rate',
'date',
'time'
];
//row允许放入的items
export const rowAllowedItems = [
'input',
'input',
'select',
'radio',
'checkbox',
'Switch',
'inputNumber',
'textarea',
'slider',
'rate',
'date',
'time'
]
//table允许放入的items
export const tableAllowedItems = [
'row','dynamicTable'
]
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/formDraw.js deleted 100644 → 0
View file @ a2e43d12
//初始化data里面的数据（1、默认为空，2、之前存在的数据。。）
let itemDatas = {}
export function datas() {
itemDatas = {};
// let self = this;
this.itemList.forEach(val => {
if (val.layout === 'rowItem') { //row布局
dataResolveRowItem(val); //解析row布局
} else if (val.layout === 'dynamicItem') { //动态表单布局
let obj = dataResolveDynamicItem(val);
let array = [];
let { columnsCount } = val
for (let i = 0; i <= columnsCount-1; i++) {
array.push({...obj});
}
itemDatas[val.id] = array;
} else if (val.layout === 'tableItem') { //表格布局
dataResolveTableItem(val);
} else { //表单
dataResolveColItem(val);
}
})
Object.keys(itemDatas).forEach(key => {
this.$set(this.buildData.form, key, itemDatas[key]);
})
}
function dataResolveRowItem(val) {
const columns = val.columns;
columns.forEach(v => {
v.list.forEach(item => {
if (item.layout === 'dynamicItem') {
let obj = dataResolveDynamicItem(item);
let array = [];
array.push(obj);
itemDatas[item.id] = array;
} else {
dataResolveColItem(item);
}
})
})
}
function dataResolveDynamicItem(val) {
const columns = val.columns;
let obj = {};
columns.forEach(v => {
const key = v.id;
obj[key] = v.value;
})
return obj;
}
/*
遍历表格实现组件渲染
*/
function dataResolveTableItem(val) {
val.layoutArray.map((tr) => {
tr.map((td) => {
td.columns.map(item => dataResolveColItem(item));
})
})
}
function dataResolveColItem(val) {
itemDatas[val.id] = val.value;
}
export function fillDatas(jsonValue) {
const self = this;
Object.keys(jsonValue).forEach(key => {
if (typeof (self.buildData.form[key]) === 'string' || typeof (self.buildData.form[key]) === 'number') {
self.$set(self.buildData.form, key, jsonValue[key]);
} else if (self.buildData.form[key] instanceof Array) {//有可能是多选或者是明细表
//判断是否数组中为对象
if (jsonValue[key].length > 0) {
const firsValue = jsonValue[key][0];//获取第一个对象判断是什么类型
if (typeof (firsValue) === 'string' || typeof (firsValue) === 'number') {
self.$set(self.buildData.form, key, jsonValue[key]);
} else { //明细表数组
const arrayData = jsonValue[key];
//self.form[key] = [];
arrayData.forEach((v, index) => {
const newV = JSON.parse(JSON.stringify(v));
self.$set(self.buildData.form[key], index, newV);
})
}
}
}
})
//console.log(this.form);
}
export function addRow(element) {
let obj = dataResolveDynamicItem(element);
this.buildData.form[element.id].push(obj);
}
export function deleteRow(scope, element) {
this.buildData.form[element.id].splice(scope.$index, 1);
}
export function batchDeleteRow(indexs, element) {
for (let i = 0; i < indexs.length; i++) {
const index = indexs[i];
this.buildData.form[element.id].splice(index, 1);
}
}
sample-form-client-ui/admin/src/components/formDes/custom/itemList.js deleted 100644 → 0
View file @ a2e43d12
import {input} from "./items/input";
import {select} from "./items/select";
import {radio} from "./items/radio";
import {checkbox} from "./items/checkbox";
import {Switch} from "./items/Switch";
import {inputNumber} from "./items/inputNumber";
import {textarea} from "./items/textarea";
import {slider} from "./items/slider";
import {rate} from "./items/rate";
import {date} from "./items/date";
import {time} from "./items/time";
import {editor} from "./items/editor";
import {colorPicker} from "./items/colorPicker";
import {cascader} from "./items/cascader";
import {upload} from "./items/upload";
import {dialogList} from "./items/dialogList";
import {dynamicTable} from "./items/dynamicTable";
import {button} from "./items/button";
import {divider} from "./items/divider";
import {row} from "./items/row";
import {table} from "./items/table";
import {alert} from "./items/alert";
import {link} from "./items/link";
import {text} from "./items/text";
import {barCode} from "./items/barCode";
export const formItems = [
input,select,radio,checkbox,Switch,inputNumber,textarea,slider
,rate,date,time,editor,colorPicker,cascader,upload,dialogList,barCode,dynamicTable
];
export const assistFormItems = [button,divider,alert,link,text];
export const layoutFormItems = [row,table];
sample-form-client-ui/admin/src/components/formDes/custom/items/Switch.js deleted 100644 → 0
View file @ a2e43d12
/**
* 开关，switch是js关键字，所以s大写，避过
*/
export let Switch = {
id:'',
_id:'',
compType: 'Switch',
ele: 'el-switch',
//控件名称(左侧显示)
compName:'开关',
label: '开关',
//图标
compIcon:'switch',
//展示表单的模式
viewType:'component',
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:true,
//栅格间隔
gutter:15,
labelWidth: '80',
value: false,
rules:[],
span: 24,
disabled: false,
required: false,
'active-color': '#409EFF',
'inactive-color': '#DCDFE6',
'active-value': 'true',
'inactive-value': 'false'
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/items/alert.js deleted 100644 → 0
View file @ a2e43d12
/**
* 警告
*/
export let alert = {
id:'',
_id:'',
compType: 'alert',
ele: 'el-alert',
compName:'警告',
compIcon:'alert',
//展示表单的模式
viewType:'component',
config: true,
form:false, //是否表单组件
// 控件左侧label内容
showLabel:false,
labelWidth: '0',
span:24,
//标题
title:'alert',
//主题
type:'success',
//辅助文字
description:'form-designer',
//是否可关闭
closable:true,
//是否居中
center:false,
//关闭的按钮
'close-text':'',
//是否显示图标
'show-icon':false,
//主题 light/dark
effect:'light'
}
sample-form-client-ui/admin/src/components/formDes/custom/items/barCode.js deleted 100644 → 0
View file @ a2e43d12
/**
* 警告
*/
export let barCode = {
id:'',
_id:'',
compType: 'barCode',
ele: 'fancy-bar-code',
compName:'条码',
compIcon:'barcode',
//展示表单的模式
viewType:'component',
config: true,
form:true, //是否表单组件
// 控件左侧label内容
showLabel:false,
labelWidth: '0',
label:'条形码',
span:24,
value:'formDesigner',
format:'CODE128',
lineColor:'#000',
background:'#fff',
width:5,
height:30,
fontSize:12,
displayValue:true
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/items/button.js deleted 100644 → 0
View file @ a2e43d12
/**
* 单行&多行输入框
*/
export let button = {
id:'',
_id:'',
compType: 'button',
ele: 'el-button',
//控件名称(左侧显示)
compName:'按钮',
//图标
compIcon:'button',
//展示表单的模式
viewType:'component',
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:false,
label: '单行文本',
labelWidth: 0,
//是否可以禁用
// disabled:false,
//大小，medium / small / mini
size:'medium',
//primary / success / warning / danger / info / text
type:'primary',
span:24,
text:'按钮',
//简单
plain:false,
//圆角
round:false,
//圆形
circle:false,
//加载中
loading:false,
//禁用
disabled:false,
//图标
icon:'',
}
sample-form-client-ui/admin/src/components/formDes/custom/items/cascader.js deleted 100644 → 0
View file @ a2e43d12
/**
* 级联选择器
*/
export let cascader = {
id:'',
_id:'',
compType: 'cascader',
ele: 'el-cascader',
//控件名称(左侧显示)
compName:'级联选择器',
//图标
compIcon:'cascader',
//展示表单的模式
viewType:'component',
// 是否可配置
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:true,
label: '级联选择',
labelWidth: '80',
placeholder: '请选择',
//栅格间隔
gutter:15,
//默认栅格
span:24,
value: [],
//大小
size:"medium",
//禁用
disabled:false,
//数据类型 static，dynamic
dataType:'static',
'china-area-data':false,
//请求地址
action:'https://www.fastmock.site/mock/51715c0157535b99010bde55f2df33c8/formDesigner/api/cascaderOptions',
props:{
//清空
clearable:true,
//分隔符
separator:"/",
//显示完整路径
'show-all-levels':false,
filterable:false,
props: {
//触发方式,hover
expandTrigger:'click',
//多选
multiple:false,
//可选任一级
checkStrictly:false,
label: 'label',
value: 'value',
children: 'children'
}
},
options:[
{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}]
}]
}
]
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/items/checkbox.js deleted 100644 → 0
View file @ a2e43d12
// export default (_self, h) => {
// return [
// h("Input", {})
// ];
// };
export let checkbox = {
id:'',
_id:'',
compType: 'checkbox',
//控件名称
compName:'复选框',
//element标签
ele: 'el-checkbox-group',
//图标
compIcon:'checkbox',
//展示表单的模式
viewType:'component',
// 是否可配置
config: true,
// 控件左侧label内容
label: '复选框',
placeholder: '请选择',
// 最大长度
maxLength: 50,
//表单栅格
span:24,
//栅格间隔
gutter:'15',
//标签宽度
labelWidth:80,
//显示标签
showLabel:true,
//必填
required:false,
//禁用
disabled:false,
//是否有边框
border:false,
//选项是否垂直
vertical:false,
//选项大小
size:'medium',
//是否是按钮
optionType:'default',
//选项列表
options:[{
label: '选项一',
value: 1
}, {
label: '选项二',
value: 2
}],
//数据类型 static，dynamic
dataType:'static',
//默认渲染的数据
action:'https://www.fastmock.site/mock/51715c0157535b99010bde55f2df33c8/formDesigner/api/options',
value: [],
rules:[],
// 验证错误提示信息
ruleError: '该字段不能为空'
}
sample-form-client-ui/admin/src/components/formDes/custom/items/colorPicker.js deleted 100644 → 0
View file @ a2e43d12
/**
* 单行&多行输入框
*/
export let colorPicker = {
id:'',
_id:'',
compType: 'colorPicker',
ele: 'el-color-picker',
//控件名称(左侧显示)
compName:'颜色选择器',
//图标
compIcon:'colorpicker',
//展示表单的模式
viewType:'component',
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:false,
label: '单行文本',
labelWidth: 0,
//是否可以禁用
disabled:false,
//大小，medium / small / mini
size:'medium',
//primary / success / warning / danger / info / text
type:'primary',
span:24,
//选择透明度
'show-alpha':false,
//格式
'color-format':'hex',
//预定义颜色
predefine:[],
value:'#409EFF'
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/items/date.js deleted 100644 → 0
View file @ a2e43d12
/**
* 单行&多行输入框
*/
export let date = {
id:'',
_id:'',
compType: 'date',
ele: 'el-date-picker',
//控件名称(左侧显示)
compName:'日期',
//图标
compIcon:'date',
//展示表单的模式
viewType:'text',
// 是否可配置
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:true,
label: '日期',
labelWidth: '80',
placeholder: '请选择',
// 是否必填
required: false,
// 最大长度
maxLength: 50,
//栅格间隔
gutter:15,
//默认栅格
span:24,
//是否可清空
clearable:true,
disabled:false,
readonly:false,
value: '',
rules:[],
//时间类型
type:'date',
format:'yyyy年MM月dd日',
'value-format':'yyyy年MM月dd日',
'range-separator':'-',
'start-placeholder':'开始日期',
'end-placeholder':'结束日期'
}
sample-form-client-ui/admin/src/components/formDes/custom/items/dialogList.js deleted 100644 → 0
View file @ a2e43d12
/**
* dialogList
*/
export let dialogList = {
id:'',
_id:'',
compType: 'dialogList',
ele: 'fancy-dialog-list',
//控件名称(左侧显示)
compName:'选择列表',
//图标
compIcon:'dialog',
//展示表单的模式
viewType:'component',
// 是否可配置
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:true,
label: '选择列表',
labelWidth: '80',
// showLabel: true,
// labelWidth: 80,
// 是否必填
required: false,
//栅格间隔
gutter:15,
//默认栅格
span:24,
//禁用
disabled:false,
//标题
title:'请选择',
//多选
multi:false,
//显示序号
showIndex:false,
//请求地址
action:'https://www.fastmock.site/mock/51715c0157535b99010bde55f2df33c8/formDesigner/api/dialogListData',
//字段配置
colConf:'[{"index":0,"label":"姓名","property":"name","width":"250","show":true},{"index":1,"label":"日期","property":"date","width":"150","show":true},{"index":2,"label":"地址","property":"address","width":"","show":true}]',
// //值
dval:'id',
//字段
dlabel:'name',
height:500,
value: ''
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/items/divider.js deleted 100644 → 0
View file @ a2e43d12
/**
* 分割线
*/
export let divider = {
id:'',
_id:'',
compType: 'divider',
ele: 'el-divider',
compName:'分割线',
compIcon:'divider',
//展示表单的模式
viewType:'component',
config: true,
form:false,
//内容坐标 left|center|right
'content-position':'left',
text:'',
// 控件左侧label内容
showLabel:false,
labelWidth: '0'
}
sample-form-client-ui/admin/src/components/formDes/custom/items/dynamicTable.js deleted 100644 → 0
View file @ a2e43d12
/**
* 动态表单
*/
export let dynamicTable = {
id:'',
_id:'',
compType: 'dynamicTable',
ele: 'dynamic-table',
//控件名称(左侧显示)
compName:'动态表格',
layout:'dynamicItem',
//图标
compIcon:'table',
// 是否可配置
//暂时默认为true，无法更改，后期考虑某些时候无法配置
//显示标签
labelWidth:0,
showLabel:false,
config: true,
//显示新增按钮
buttonAdd:true,
//显示删除按钮
buttonDel:true,
//显示行号
showIndex:true,
visible:true,
multiCheck:false,
columnsCount:3, // 默认行数
//合计行
'show-summary':false,
'sum-text':'合计',
'summary-text':'元',
columns:[
]
}
sample-form-client-ui/admin/src/components/formDes/custom/items/editor.js deleted 100644 → 0
View file @ a2e43d12
/**
* 富文本编辑器
*/
export let editor = {
id:'',
_id:'',
compType: 'editor',
ele: 'fancy-editor',
compName:'编辑器',
compIcon:'editor',
//展示表单的模式
viewType:'html',
config: true,
form:true,
// 控件左侧label内容
showLabel:true,
labelWidth: '80',
label:'文本编辑器',
value:'',
required:false,
validateMaxText:false,
//最大长度
max:2000,
//自定义rules
customRules:[]
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/items/html.js deleted 100644 → 0
View file @ a2e43d12
/**废弃 */
/**
* html
*/
export let html = {
id:'',
_id:'',
compType: 'html',
ele: 'fancy-html',
compName:'HTML',
compIcon:'html',
//展示表单的模式
viewType:'component',
config: true,
form:false,
text:'<span style="color:red">html</span>',
// 控件左侧label内容
showLabel:false,
label:'',
labelWidth: '0'
}
sample-form-client-ui/admin/src/components/formDes/custom/items/input.js deleted 100644 → 0
View file @ a2e43d12
/**
* 单行&多行输入框
*/
export let input = {
id:'',
_id:'',
compType: 'input',
ele: 'el-input',
//控件名称(左侧显示)
compName:'单行文本',
//图标
compIcon:'input',
//展示表单的模式
viewType:'text',
// 是否可配置
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:true,
label: '单行文本',
labelWidth: '80',
placeholder: '请输入文本',
// 是否必填
required: false,
// 最大长度
maxLength: 50,
//栅格间隔
gutter:15,
//默认栅格
span:24,
//组件长度
width: '100%',
//是否可清空
clearable:true,
disabled:false,
readonly:false,
//状态，正常，只读，禁用
status:'normal',
//前置图标
'prefix-icon':'',
//后置图标
'suffix-icon':'',
value: '',
//验证规则(字符,phone,email,number)
rules:[],
//验证规则
rulesType:'default',
//前缀
prepend:'',
//后缀
append:''
}
sample-form-client-ui/admin/src/components/formDes/custom/items/inputNumber.js deleted 100644 → 0
View file @ a2e43d12
/**
* 计数器
*/
export let inputNumber = {
id:'',
_id:'',
compType: 'inputNumber',
ele: 'el-inputNumber',
//控件名称(左侧显示)
compName:'计数器',
label: '计数器',
//图标
compIcon:'inputNumber',
//展示表单的模式
viewType:'text',
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:true,
//栅格间隔
gutter:15,
labelWidth: '80',
value: 0,
rules:[],
span: 24,
min: 0,
max: 100,
step: 1,
'step-strictly': false,
precision: 0,
'controls-position': 'default',
disabled: false,
readonly: false,
required: false,
regList: []
}
sample-form-client-ui/admin/src/components/formDes/custom/items/link.js deleted 100644 → 0
View file @ a2e43d12
/**
* 文字链接
*/
export let link = {
id:'',
_id:'',
compType: 'link',
ele: 'el-link',
compName:'文字链接',
compIcon:'link',
//展示表单的模式
viewType:'component',
config: true,
form:false, //是否表单组件
// 控件左侧label内容
showLabel:false,
labelWidth: '0',
span:24,
//主题
type:'primary',
//链接地址
href:'http://www.baidu.com',
//是否下划线
underline:true,
//是否禁用
disabled:false,
text:'链接',
target:'_blank'
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/items/radio.js deleted 100644 → 0
View file @ a2e43d12
// export default (_self, h) => {
// return [
// h("Input", {})
// ];
// };
export let radio = {
id:'',
_id:'',
compType: 'radio',
//控件名称
compName:'单选框',
//element标签
ele: 'el-radio-group',
//图标
compIcon:'radio',
//展示表单的模式
viewType:'component',
// 是否可配置
config: true,
// 控件左侧label内容
label: '单选框',
placeholder: '请选择',
// 最大长度
maxLength: 50,
//表单栅格
span:24,
//栅格间隔
gutter:'15',
//标签宽度
labelWidth:80,
//显示标签
showLabel:true,
//必填
required:false,
//禁用
disabled:false,
//是否有边框
border:false,
//选项是否垂直
vertical:false,
//选项大小
size:'medium',
//是否是按钮
optionType:'default',
//选项列表
options:[{
label: '选项一',
value: 1
}, {
label: '选项二',
value: 2
}],
//数据类型 static，dynamic
dataType:'static',
//默认渲染的数据
action:'https://www.fastmock.site/mock/51715c0157535b99010bde55f2df33c8/formDesigner/api/options',
value: '',
rules:[],
// 验证错误提示信息
ruleError: '该字段不能为空'
}
sample-form-client-ui/admin/src/components/formDes/custom/items/rate.js deleted 100644 → 0
View file @ a2e43d12
/**
* 评分
*/
export let rate = {
id:'',
_id:'',
compType: 'rate',
ele: 'el-rate',
//控件名称(左侧显示)
compName:'评分',
label: '评分',
//图标
compIcon:'rate',
//展示表单的模式
viewType:'component',
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:true,
//栅格间隔
gutter:15,
labelWidth: '80',
value: 1,
rules:[],
span: 24,
disabled: false,
required: false,
max: 5,
'allow-half': false,
'show-score': false
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/items/row.js deleted 100644 → 0
View file @ a2e43d12
/**
* 栅格布局
*/
// export default (_self, h) => {
// return [
// h("Input", {})
// ];
// };
export let row = {
id:'',
_id:'',
compType: 'row',
//控件名称
compName:'栅格布局',
//element标签
ele: 'el-row',
//图标
compIcon:'col',
layout:'rowItem',
// 是否可配置
config: true,
//
flex:'default',
justify:'start',
align:'top',
gutter:0,
columns:[
{
index:0,
span:12,
list:[]
},
{
index:1,
span:12,
list:[]
}
],
}
sample-form-client-ui/admin/src/components/formDes/custom/items/select.js deleted 100644 → 0
View file @ a2e43d12
export let select = {
id:'',
_id:'',
compType: 'select',
//控件名称
compName:'下拉框',
//element标签
ele: 'el-select',
//图标
compIcon:'select',
//展示表单的模式
viewType:'component',
// 是否可配置
config: true,
// 控件左侧label内容
label: '下拉框',
placeholder: '请选择',
// 最大长度
maxLength: 50,
//表单栅格
span:24,
//栅格间隔
gutter:'15',
//标签宽度
labelWidth:80,
//显示标签
showLabel:true,
//必填
required:false,
//多选
multiple:false,
'collapse-tags':false,
//禁用
disabled:false,
//搜索
filterable:false,
//选项列表
options:[{
label: '选项一',
value: 1
}, {
label: '选项二',
value: 2
}],
//数据类型 static，dynamic
dataType:'static',
//默认渲染的数据
action:'https://www.fastmock.site/mock/51715c0157535b99010bde55f2df33c8/formDesigner/api/options',
//是否可以清空
clearable:false,
value: '',
rules:[],
// 验证错误提示信息
ruleError: '该字段不能为空'
}
sample-form-client-ui/admin/src/components/formDes/custom/items/slider.js deleted 100644 → 0
View file @ a2e43d12
/**
* 单行&多行输入框
*/
export let slider = {
id:'',
_id:'',
compType: 'slider',
ele: 'el-slider',
//控件名称(左侧显示)
compName:'滑块',
label: '滑块',
//图标
compIcon:'slider',
//展示表单的模式
viewType:'component',
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:true,
//栅格间隔
gutter:15,
labelWidth: '80',
value: 0,
rules:[],
span: 24,
disabled: false,
required: false,
//最小值
min: 0,
//最大值
max: 20,
//步长
step: 1,
//是否显示断点
'show-stops': true,
//是否显示tooltip
'show-tooltip': true,
//范围选择 1,50
range: false
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/items/table.js deleted 100644 → 0
View file @ a2e43d12
/**
* 表格布局
*/
import {getDefaultTrs} from '../../table/table'
let trs = getDefaultTrs();
export let table = {
id:'',
_id:'',
compType: 'table',
ele: 'fancy-table',
//控件名称(左侧显示)
compName:'表格布局',
//图标
compIcon:'table_layout',
layout:'tableItem',
// 是否可配置
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
layoutArray:trs,
//单元格样式
tdStyle:'',
width:100,
height:50
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/items/text.js deleted 100644 → 0
View file @ a2e43d12
/**
* 文本
*/
export let text = {
id:'',
_id:'',
compType: 'text',
ele: 'fancy-text',
compName:'文本',
compIcon:'text',
//展示表单的模式
viewType:'component',
config: true,
form:false,
show:true,
text:'文本',
align:'left',
color:'#000000',
size:'14',
bold:'400',
// 控件左侧label内容
showLabel:false,
labelWidth: '0'
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/items/textarea.js deleted 100644 → 0
View file @ a2e43d12
/**
* 单行&多行输入框
*/
export let textarea = {
id:'',
_id:'',
compType: 'textarea',
ele: 'el-input',
//控件名称(左侧显示)
compName:'多行文本',
//图标
compIcon:'textarea',
//展示表单的模式
viewType:'text',
// 是否可配置
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:true,
label: '多行文本',
labelWidth: '80',
placeholder: '请输入文本',
type:'textarea',
// 是否必填
required: false,
// 最大长度
maxlength: 50,
//输入统计
'show-word-limit':false,
//栅格间隔
gutter:15,
//默认栅格
span:24,
//是否可清空
clearable:true,
disabled:false,
readonly:false,
rows:4,
//状态，正常，只读，禁用
status:'normal',
value: '',
rules:[],
// 验证错误提示信息
ruleError: '该字段不能为空'
}
sample-form-client-ui/admin/src/components/formDes/custom/items/time.js deleted 100644 → 0
View file @ a2e43d12
/**
* 单行&多行输入框
*/
export let time = {
id:'',
_id:'',
compType: 'time',
ele: 'el-time-picker',
//控件名称(左侧显示)
compName:'时间',
//图标
compIcon:'time',
//展示表单的模式
viewType:'text',
// 是否可配置
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:true,
label: '时间',
labelWidth: '80',
placeholder: '请选择',
// 是否必填
required: false,
// 最大长度
maxLength: 50,
//栅格间隔
gutter:15,
//默认栅格
span:24,
//是否可清空
clearable:true,
disabled:false,
readonly:false,
value: '',
rules:[],
'picker-options': {
selectableRange: '00:00:00-23:59:59'
},
'arrow-control':true,
align:'left',
format: 'HH:mm:ss',
'value-format': 'HH:mm:ss',
'is-range':false,
'range-separator':'-'
}
sample-form-client-ui/admin/src/components/formDes/custom/items/upload.js deleted 100644 → 0
View file @ a2e43d12
/**
* 上传组件
*/
export let upload = {
id:'',
_id:'',
compType: 'upload',
ele: 'el-upload',
//控件名称(左侧显示)
compName:'附件',
//图标
compIcon:'att',
//展示表单的模式
viewType:'component',
// 是否可配置
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:true,
label: '附件上传',
labelWidth: '80',
//栅格间隔
gutter:15,
//默认栅格
span:24,
// 是否必填
required: false,
//上传地址
action:'http://192.168.0.98:8090/api/upload/file',
//多选上传
multiple:false,
name:'file',
//显示上传文件列表
'show-file-list':true,
//文件列表类型
'list-type':'text',
value:'',
width:100,
//按钮文字
buttonText:'请上传附件',
//是否显示描述
showTip:false,
//描述内容
tips:'点击按钮上传附件',
//允许文件类型
accept:'.pdf, .doc, .docx, .xls, .xlsx',
//文件大小MB
fileSize:10,
// 最大允许上传个数
limit:1,
}
sample-form-client-ui/admin/src/components/formDes/custom/mixin/index.js deleted 100644 → 0
View file @ a2e43d12
// 模态框
export const remoteData = {
methods: {
getRemoteData(){
//动态数据
if(this.conf.dataType === 'dynamic'){
this.$axios.get(this.conf.action).then(res => {
if(this.conf.options.length===0){
this.conf.options = this.conf.options.concat(res.data);
}
})
}
}
}
}
export const changeId = {
methods: {
handlerChangeId(val){
let idArray = this.getFormId(this.props._id);
console.log(idArray);
if(idArray.includes(val)){ //如果存在id相等，则提示
this.$message.error('该ID已经存在，请修改');
this.props.id=this.props._id;
}else{
this.props._id=val;
}
}
}
}
sample-form-client-ui/admin/src/components/formDes/custom/previewRender.js deleted 100644 → 0
View file @ a2e43d12
import { isAttr,jsonClone } from '../utils';
import childrenItem from './slot/index';
import {remoteData} from './mixin';
//先修改在这里,后续需要优化
function vModel(self, dataObject) {
dataObject.props.value = self.value;
dataObject.on.input = val => {
self.$emit('input', val)
}
//判断是否为上传组件
if(self.conf.compType === 'upload'){
dataObject.attrs['before-upload'] = file=>{
//非限定后缀不允许上传
const fileName = file.name;
const suffixName = fileName.split('.').pop();
if(!self.conf.accept.includes(suffixName)){
self.$message.error('该后缀文件不允许上传');
return false;
}
const fileSize = file.size;
if(fileSize>dataObject.props.fileSize*1024*1024){
self.$message.error('文件大小超出限制，请检查！');
return false;
}
}
dataObject.attrs['on-success'] = (response, file, fileList)=>{
let uloadData = fileList.map(v => v.response.data).join(',')
self.$emit('input',uloadData)
}
dataObject.attrs['on-remove'] = ( file, fileList)=>{
let uloadData = fileList.map(v => v.response.data).join(',')
self.$emit('input',uloadData)
}
}
}
export default {
render(h) {
let dataObject = {
attrs: {},
props: {},
on: {},
style: {}
}
//远程获取数据
this.getRemoteData();
const confClone = jsonClone(this.conf);
const children = childrenItem(h,confClone);
Object.keys(confClone).forEach(key => {
const val = confClone[key]
if (dataObject[key]) {
dataObject[key] = val
} else if(key ==='width'){
dataObject.style= 'width:'+val;
} else if (!isAttr(key)) {
dataObject.props[key] = val
}else {
if(key !== 'value'){
dataObject.attrs[key] = val
}
}
})
/*调整赋值模式，规避cascader组件赋值props会出现覆盖预制参数的bug */
vModel(this, dataObject);
return h(confClone.ele, dataObject, children)
},
props: ['conf','value'],
mixins:[remoteData]
}
sample-form-client-ui/admin/src/components/formDes/custom/register.js deleted 100644 → 0
View file @ a2e43d12
//在此注册组件
const components = [
'input',
'select',
'radio',
'checkbox',
'Switch',
'inputNumber',
'textarea',
'slider',
'rate',
'date',
'time',
'editor',
'colorPicker',
'cascader',
'upload',
'button',
'divider',
'alert',
'link',
'dialogList',
'barCode',
'text',
'html',
'row',
'dynamicTable',
'table',
'tdItem'
];
let comps = [];
for (let i in components) {
const comp = {
name: components[i],
content : null
}
comps.push(comp);
}
export default comps;
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/render.js deleted 100644 → 0
View file @ a2e43d12
import {isAttr,jsonClone} from '../utils/index';
import childrenItem from './slot/index';
import {remoteData} from './mixin';
function vModel(self, dataObject) {
dataObject.on.input = val => {
self.$emit('input', val)
}
}
export default {
render(h) {
let dataObject = {
attrs: {},
props: {},
on: {},
style: {}
}
//远程获取数据
this.getRemoteData();
const confClone = jsonClone(this.conf);
const children = childrenItem(h,confClone);
Object.keys(confClone).forEach(key => {
const val = confClone[key]
if (dataObject[key]) {
dataObject[key] = val
} else if (!isAttr(key)) {
dataObject.props[key] = val
} else if(key ==='width'){
dataObject.style= 'width:'+val;
}else {
dataObject.attrs[key] = val
}
})
/*调整赋值模式，规避cascader组件赋值props会出现覆盖预制参数的bug */
vModel(this, dataObject);
return h(confClone.ele, dataObject, children)
},
props: ['conf'],
mixins:[remoteData]
}
sample-form-client-ui/admin/src/components/formDes/custom/rule/index.js deleted 100644 → 0
View file @ a2e43d12
export default function checkRules(element) {
let r = [];
const _trigger = ['blur','change'];
if(element.required){
r.push({required: true, message: element.label+'不能为空', trigger:_trigger});
}
//判断是否有规则
if(element.rules){
element.rules.forEach(obj=>{
r.push({pattern:new RegExp(obj.rule),message:obj.msg, trigger:_trigger});
});
}
//编辑器最大字数验证
if(typeof element.validateMaxText !== 'undefined'&&element.validateMaxText){
const maxRules = {
max: element.max, message: element.label+'超出最大字数限制', trigger:_trigger
}
r.push(maxRules);
}
return r;
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/slot/el-button.js deleted 100644 → 0
View file @ a2e43d12
export default {
slot(h,conf) {
return conf.text;
}
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/slot/el-checkbox-group.js deleted 100644 → 0
View file @ a2e43d12
export default {
slot(h,conf) {
const list = []
const vertical = conf.vertical?'display:block;':'';
conf.options.forEach(item => {
if (conf.optionType === 'button') list.push(<el-checkbox-button label={item.value}>{item.label}</el-checkbox-button>)
else list.push(<el-checkbox label={item.value} style={vertical} border={conf.border}>{item.label}</el-checkbox>)
})
return list
}
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/slot/el-divider.js deleted 100644 → 0
View file @ a2e43d12
import text from './el-button';
export default text;
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/slot/el-input.js deleted 100644 → 0
View file @ a2e43d12
export default {
slot(h,conf) {
const slotText = []
if(conf.prepend!==''){
slotText.push(<template slot="prepend">{conf.prepend}</template>);
}
if(conf.append!==''){
slotText.push(<template slot="append">{conf.append}</template>);
}
return slotText;
}
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/slot/el-link.js deleted 100644 → 0
View file @ a2e43d12
import text from './el-button';
export default text;
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/slot/el-radio-group.js deleted 100644 → 0
View file @ a2e43d12
export default {
slot(h,conf) {
const list = [];
const vertical = conf.vertical?'display:block;':'';
conf.options.forEach(item => {
if (conf.optionType === 'button') list.push(<el-radio-button label={item.value} style="">{item.label}</el-radio-button>)
else list.push(<el-radio label={item.value} style={vertical} border={conf.border}>{item.label}</el-radio>)
})
return list
}
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/slot/el-select.js deleted 100644 → 0
View file @ a2e43d12
export default {
slot(h,conf) {
const list = []
conf.options.forEach(item => {
list.push(<el-option label={item.label} value={item.value} disabled={item.disabled}></el-option>)
})
return list;
}
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/slot/el-upload.js deleted 100644 → 0
View file @ a2e43d12
export default {
slot(h,conf) {
const list = [];
if (conf['list-type'] === 'picture-card') {
list.push(<i class="el-icon-plus"/>)
} else {
list.push(<el-button size="small" type="primary" icon="el-icon-upload">{conf.buttonText}</el-button>)
}
if (conf.showTip) {
list.push(<div slot="tip" class="el-upload__tip">{conf.tips}</div>)
}
return list
}
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/slot/index.js deleted 100644 → 0
View file @ a2e43d12
const slots = require.context('./', false, /\.js$/);
const componentChild = {};
slots.keys().forEach(obj=>{
const tag = obj.replace('./','').replace('.js','');
if(tag !=='index'){
componentChild[tag] = slots(obj).default;
}
});
export default function childrenItem(h,confClone) {
let children = [];
const childObjs = componentChild[confClone.ele]
if (childObjs&&childObjs.slot) {
Object.keys(childObjs).forEach(key => {
const childFunc = childObjs[key]
children.push(childFunc(h,confClone))
})
}
return children;
}
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/custom/viewRender.js deleted 100644 → 0
View file @ a2e43d12
import { isAttr,jsonClone } from '../utils';
import childrenItem from './slot/index';
import {remoteData} from './mixin';
function vModel(self, dataObject) {
dataObject.props.value=self.value;
dataObject.on.input = val => {
self.$emit('input', val)
}
}
export default {
render(h) {
let dataObject = {
attrs: {},
props: {},
on: {},
style: {}
}
//远程获取数据
this.getRemoteData();
const confClone = jsonClone(this.conf);
const children = childrenItem(h,confClone);
Object.keys(confClone).forEach(key => {
const val = confClone[key]
if (dataObject[key]) {
dataObject[key] = val
} else if(key ==='width'){
dataObject.style= 'width:'+val+'%';
} else if (!isAttr(key)) {
dataObject.props[key] = val
} else {
dataObject.attrs[key] = val
}
})
/*调整赋值模式，规避cascader组件赋值props会出现覆盖预制参数的bug */
vModel(this, dataObject);
return h(confClone.ele, dataObject, children)
},
props: ['conf','value'],
mixins:[remoteData]
}
sample-form-client-ui/admin/src/components/formDes/dynamic/dynamicTable.vue deleted 100644 → 0
View file @ a2e43d12
<!--动态表单（设计器）-->
<template>
<div class="dynamic-table">
<slot>
</slot>
</div>
</template>
<script>
export default {
name:'dynamicTable',
props:['conf','activeItem'],
data(){
return {
test1:'',
list:[]
}
},
components:{
},
methods:{
}
}
</script>
<style>
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/components/formDes/dynamic/dynamicTableItem.vue deleted 100644 → 0
View file @ a2e43d12
<!--动态表单（设计器）-->
<script>
import draggable from "vuedraggable";
import render from "../custom/render";
const colItem = function (h, element) {
const { selectItem, copyItem, deleteItem } = this.$listeners;
return (
<div
class={{
"dynamic-table__item": true,
active: this.isHover || this.isActive,
}}
style="min-width:200px;width: auto;position:relative"
onClick={(e) => {
selectItem(e, element);
}}
onMouseover={() => {
this.isHover = true;
}}
onMouseleave={() => {
this.isHover = false;
}}
>
<div class="dynamic-table__item_title">{element.label}</div>
<div class="dynamic-table__item_body">
<render conf={element} />
<span v-show={element.required} style="color:#F56C6C">
*
</span>
</div>
<span
class="dynamic-table-item-copy"
title="复制"
v-show={this.showbutton}
onClick={(e) => {
copyItem(e, element);
}}
>
<i class="el-icon-copy-document" />
</span>
<span
class="dynamic-table-item-delete"
title="删除"
v-show={this.showbutton}
onClick={(e) => {
deleteItem(e, element);
}}
>
<i class="el-icon-delete" />
</span>
</div>
);
};
export default {
name: "dynamicTableItem",
props: ["item", "activeItem"],
data() {
return {
isActive: false,
isHover: false,
};
},
components: {
draggable,
render,
},
methods: {
handlerCopy(evt) {
this.$emit("copy", evt, this.item);
},
handlerDelete(evt) {
this.$emit("delete", evt, this.item);
},
},
watch: {
activeItem(newvalue) {
this.isActive = newvalue.id === this.item.id ? true : false;
},
},
computed: {
showbutton() {
return this.isActive || this.isHover;
},
},
render: function (h) {
return colItem.call(this, h, this.item);
},
};
</script>
<style lang="less" scoped>
@lighterBlue: #409eff;
.active {
background: #e6f2ff;
}
.dynamic-table-item-copy {
position: absolute;
width: 22px;
height: 22px;
top: 0px;
right: 30px;
border: 1px solid;
border-radius: 50%;
cursor: pointer;
font-size: 12px;
line-height: 22px;
text-align: center;
color: @lighterBlue;
background: #fff;
z-index: 2;
}
.dynamic-table-item-copy:hover {
color: #fff;
background: @lighterBlue;
}
.dynamic-table-item-delete {
position: absolute;
width: 22px;
height: 22px;
top: 0px;
right: 0px;
border: 1px solid;
border-radius: 50%;
cursor: pointer;
font-size: 12px;
line-height: 22px;
text-align: center;
color: #f56c6c;
background: #fff;
z-index: 2;
}
.dynamic-table-item-delete:hover {
color: #fff;
background: #f56c6c;
}
</style>
sample-form-client-ui/admin/src/components/formDes/dynamic/dynamicTableOptButton.vue deleted 100644 → 0
View file @ a2e43d12
<!--操作区域，删除和复制，新增、序号，集成在一个文件中-->
<template>
<div class="dynamic-table__item_opt" style="width: 100%;" >
<div class="dynamic-table__item_title">
操作
</div>
<div class="dynamic-table__item_body" style="text-align:center">
<i class="el-icon-document-copy" style="margin:2px"></i>
<i class="el-icon-delete" style="margin:2px"></i>
</div>
</div>
</template>
<script>
export default {
name:'dynamicTableOptButton',
props:['type'],
data(){
return{
}
}
}
</script>
<style scoped>
.dynamic-table__item_opt{
padding-top:5px;
}
</style>
sample-form-client-ui/admin/src/components/formDes/extend/fancyHtml.vue deleted 100644 → 0
View file @ a2e43d12
<!--废弃-->
<!--文本扩展-->
<template>
<div v-if="show">
<p v-html="text"/>
</div>
</template>
<script>
export default {
name:"fancyHtml",
props:{
text: {
type: String,
default:''
},
show:{
type:Boolean,
default:true
}
}
}
</script>
sample-form-client-ui/admin/src/main.js
View file @ 12d6c8ae
This diff is collapsed.
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