zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UP

This commit is contained in:
sc 2021-09-30 15:57:16 +08:00
parent f5da1bbb32
commit 10c03fbeba
6 changed files with 116 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/scForm/index.vue
View File

@ -82,9 +82,17 @@
<template v-else-if="item.component=='slider'" >
<el-slider v-model="form[item.name]" :marks="item.options.marks"></el-slider>
</template>
<!-- tableselect -->
<template v-else-if="item.component=='tableselect'" >
<tableselect-render v-model="form[item.name]" :item="item"></tableselect-render>
</template>
<!-- editor -->
<template v-else-if="item.component=='editor'" >
<sc-editor v-model="form[item.name]" placeholder="请输入" :height="400"></sc-editor>
</template>
<!-- noComponent -->
<template v-else>
未匹配到相应组件 {{item.component}}
<el-tag type="danger">[{{item.component}}] Component not found</el-tag>
</template>
<div v-if="item.message" class="el-form-item-msg">{{item.message}}</div>
</el-form-item>
@ -104,8 +112,9 @@
<script>
import http from "@/utils/request"
import { defineAsyncComponent } from 'vue';
const uploadRender = defineAsyncComponent(() => import('./items/upload'));
import { defineAsyncComponent } from 'vue'
const tableselectRender = defineAsyncComponent(() => import('./items/tableselect'))
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'))
export default {
props: {
@ -114,7 +123,8 @@
loading: { type: Boolean, default: false },
},
components: {
uploadRender
tableselectRender,
scEditor
},
data() {
return {
@ -171,9 +181,17 @@
})
}
}else if(item.component == 'upload'){
item.options.items.forEach((option) => {
this.form[option.name] = option.value
})
if(item.name){
const value = {}
item.options.items.forEach((option) => {
value[option.name] = option.value
})
this.form[item.name] = value
}else{
item.options.items.forEach((option) => {
this.form[option.name] = option.value
})
}
}else{
this.form[item.name] = item.value
}
@ -229,6 +247,9 @@
validate(valid, obj){
return this.$refs.form.validate(valid, obj)
},
scrollToField(prop){
return this.$refs.form.scrollToField(prop)
},
resetFields(){
return this.$refs.form.resetFields()
},

37
src/components/scForm/items/tableselect.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<sc-table-select v-model="value" :apiObj="apiObj" :table-width="600" :multiple="item.options.multiple" :props="item.options.props" style="width: 100%;">
<el-table-column v-for="(_item, _index) in item.options.column" :key="_index" :prop="_item.prop" :label="_item.label" :width="_item.width"></el-table-column>
</sc-table-select>
</template>
<script>
export default {
name: 'uploadRender',
props: {
modelValue: [String, Number, Boolean, Date, Object, Array],
item: { type: Object, default: () => {} }
},
data() {
return {
value: this.modelValue,
apiObj: this.getApiObj()
}
},
watch:{
value(val){
this.$emit("update:modelValue", val)
}
},
mounted() {
},
methods: {
getApiObj(){
return eval(`this.`+this.item.options.apiObj)
}
}
}
</script>
<style>
</style>

39
src/components/scForm/items/upload.vue
View File

@ -1,39 +0,0 @@
<template>
<el-col>
<el-form-item :prop="item.name">
<sc-upload v-model="value" :title="item.label"></sc-upload>
</el-form-item>
</el-col>
</template>
<script>
export default {
name: 'uploadRender',
props: {
modelValue: [String, Number, Boolean, Date, Object, Array],
item: { type: Object, default: () => {} }
},
data() {
return {
value: this.modelValue
}
},
watch:{
modelValue(val){
this.value = val
},
value(val){
this.$emit("update:modelValue", val)
}
},
mounted() {
},
methods: {
}
}
</script>
<style>
</style>

12
src/components/scTableSelect/index.vue
View File

@ -62,12 +62,12 @@
},
watch: {
modelValue(){
this.defaultValue = this.modelValue
this.autoCurrentLabel()
},
defaultValue(){
modelValue:{
handler(){
this.defaultValue = this.modelValue
this.autoCurrentLabel()
},
deep: true
}
},
mounted() {

3
src/style/theme/dark.scss
View File

@ -52,6 +52,9 @@
--el-color-info: $--text-color;
border-color: $--border-color;
}
.el-input .el-input__count .el-input__count-inner {
background: none;
}
.el-radio {
--el-radio-font-color: #d0d0d0;
}

46
src/views/vab/form.vue
View File

@ -186,11 +186,38 @@
]
}
},
{
label: "表格选择器",
name: "tableselect",
value: {},
component: "tableselect",
span: 24,
options: {
apiObj: '$API.demo.page',
column: [
{
label: "ID",
prop: "id",
width:150
},
{
label: "姓名",
prop: "user"
}
],
props: {
label: 'user',
value: 'id',
keyword: "keyword"
}
}
},
{
label: "多选框",
name: "checkbox",
component: "checkbox",
span: 24,
message: "多选框配置加上 name 表示拥有嵌套关系。否则将值“平铺”在form对象",
options: {
items:[
{
@ -313,7 +340,12 @@
value: 0,
component: "rate",
},
{
label: "富文本",
name: "text",
value: "",
component: "editor",
},
]
}
@ -325,7 +357,12 @@
checkboxGroup: ["option1"],
select: ["1"],
select2: "1",
cascader: ['resource','docs']
cascader: ['resource','docs'],
tableselect: {
user: "何敏",
id: "360000197302144442"
},
text: "<p><span style=\"font-size: 28px;\">Editor</span></p>\n<table style=\"border-collapse: collapse; width: 100%;\" border=\"1\">\n<tbody>\n<tr>\n<td style=\"width: 47.4544%; background-color: #ecf0f1;\">Name</td>\n<td style=\"width: 47.4544%;\">SCUI</td>\n</tr>\n<tr>\n<td style=\"width: 47.4544%; background-color: #ecf0f1;\">Describe</td>\n<td style=\"width: 47.4544%;\">Super color UI Admin</td>\n</tr>\n</tbody>\n</table>"
}
setTimeout(()=>{
@ -336,7 +373,7 @@
setTimeout(()=>{
this.form = form
this.loading = false
},1500)
},100)
},
methods: {
setName(){
@ -347,11 +384,12 @@
this.config.formItems[2].span = this.config.formItems[2].span==24?12:24
},
save(){
this.$refs.formref.validate((valid) => {
this.$refs.formref.validate((valid, obj) => {
if (valid) {
console.log(this.form)
alert('submit!')
}else{
this.$refs.formref.scrollToField(Object.keys(obj)[0])
return false
}
})