diff --git a/src/assets/icons/MoveArea.vue b/src/assets/icons/MoveArea.vue new file mode 100644 index 0000000..607e69c --- /dev/null +++ b/src/assets/icons/MoveArea.vue @@ -0,0 +1,3 @@ + diff --git a/src/components/piDraggable/index.vue b/src/components/piDraggable/index.vue new file mode 100644 index 0000000..56bcd64 --- /dev/null +++ b/src/components/piDraggable/index.vue @@ -0,0 +1,97 @@ + + + + + diff --git a/src/components/piIcon/index.vue b/src/components/piIcon/index.vue index aa09ef9..b99d70b 100644 --- a/src/components/piIcon/index.vue +++ b/src/components/piIcon/index.vue @@ -1,9 +1,14 @@ @@ -17,7 +17,21 @@ import centerPanel from "./center" import rightPanel from "./right" let fields = ref([]) -let config = ref({}) +let config = ref({ + ref: 'formRef', + model: 'form', + rules: 'rules', + size: 'default', + labelPosition: 'right', + labelWidth: 100, + disabled: false +}) +let curField = ref({}) + +function setField(v) { + curField.value = v + curField.value.field = v.id +} diff --git a/src/views/tools/form/left.vue b/src/views/tools/form/left.vue index 40e3770..b4b99e9 100644 --- a/src/views/tools/form/left.vue +++ b/src/views/tools/form/left.vue @@ -1,93 +1,95 @@ @@ -101,130 +103,196 @@ const inputComps = [{ title: "单行文本", icon: "pi-icon-line-input", name: "text", - props: {} + props: { + placeholder: null, + labelWidth: null, + prefixIcon: null, + suffixIcon: null, + minlength: null, + maxlength: null, + clearable: false, + readonly: false, + disabled: false, + required: false, + showWordLimit: false + }, + rules: [{regex: '', message: '213123'}], + width: "100%", + required: false }, { id: "i2", title: "多行文本", icon: "pi-icon-multi-input", name: "textarea", - props: {} + props: { + placeholder: null, + labelWidth: null, + minlength: null, + maxlength: null, + readonly: false, + disabled: false, + required: false, + showWordLimit: false, + rows: 3 + }, + rules: [], + width: "100%", + required: false }, { id: "i3", title: "密码", icon: "pi-icon-lock", name: "password", - props: {} + props: { + placeholder: null, + labelWidth: null, + prefixIcon: null, + suffixIcon: null, + minlength: null, + maxlength: null, + clearable: false, + readonly: false, + disabled: false, + required: false, + showWordLimit: false + }, + rules: [], + width: "100%", + required: false }, { id: "i4", title: "计数器", icon: "pi-icon-number-input", name: "number", - props: {} + props: { + placeholder: null + }, + rules: [], + width: "100%", + required: false, + value: 1 }] const choiceComps = [{ id: "c1", title: "下拉组件", icon: "pi-icon-select", name: "select", - props: {} + props: {}, + rules: [] }, { id: "c2", title: "级联组件", icon: "pi-icon-cascader", name: "cascader", - props: {} + props: {}, + rules: [] }, { id: "c3", title: "单选组件", icon: "pi-icon-radio", name: "radio", - props: {} + props: {}, + rules: [] }, { id: "c4", title: "多选组件", icon: "pi-icon-checkbox", name: "checkbox", - props: {} + props: {}, + rules: [] }, { id: "c5", title: "开关", icon: "pi-icon-switch", name: "switch", - props: {} + props: {}, + rules: [] }, { id: "c6", title: "滑块", icon: "pi-icon-slider", name: "slider", - props: {} + props: {}, + rules: [] }, { id: "c7", title: "时间选择", icon: "pi-icon-time-picker", name: "time", - props: {} + props: {}, + rules: [] }, { id: "c8", title: "时间范围", icon: "pi-icon-time-range", name: "timerange", - props: {} + props: {}, + rules: [] }, { id: "c9", title: "日期选择", icon: "pi-icon-date-picker", name: "date", - props: {} + props: {}, + rules: [] }, { id: "c10", title: "日期范围", icon: "pi-icon-date-range", name: "daterange", - props: {} + props: {}, + rules: [] }, { id: "c11", title: "评分", icon: "pi-icon-rate", name: "rate", - props: {} + props: {}, + rules: [] }, { id: "c12", title: "颜色选择", icon: "pi-icon-color-picker", name: "color", - props: {} + props: {}, + rules: [] }, { id: 'c13', title: "上传", icon: "pi-icon-upload-file", name: "upload", - props: {} + props: {}, + rules: [] }] const layoutComps = [{ id: 'l1', title: "行容器", icon: "pi-icon-row-layout", name: "layout", - props: {} + props: {}, + rules: [] }, { id: 'l2', title: "按钮", icon: "pi-icon-button", name: "button", - props: {} + props: {}, + rules: [] }]; const systemComps = [{ id: 's1', title: "资源选择", icon: "pi-icon-asset-choice", name: "asset", - props: {} + props: {}, + rules: [] }, { id: 's2', title: "图标选择", icon: "pi-icon-icon-choice", name: "icon", - props: {} + props: {}, + rules: [] }] let num = ref(100) @@ -252,6 +320,18 @@ function cloneField(e) { } } +:deep(.el-scrollbar__bar) { + display: none !important; +} + +:deep(.el-scrollbar__wrap) { + scrollbar-width: none; +} + +:deep(.el-scrollbar__wrap::-webkit-scrollbar) { + display: none !important; +} + .go-base { display: flex; justify-content: space-between; diff --git a/src/views/tools/form/right.vue b/src/views/tools/form/right.vue index 4a3706d..f1c5bf0 100644 --- a/src/views/tools/form/right.vue +++ b/src/views/tools/form/right.vue @@ -1,42 +1,163 @@ -