mt-fe-group/mt-yd-ui
13
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

update 对dialog进行改版之前

Browse Source
This commit is contained in:
g7hoo
2022-08-09 16:16:34 +08:00
parent 2557026002
commit 669c8f90c6
4 changed files with 69 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/base-dialog/addOrUpdate/index.vue
View File

@@ -1,41 +1,28 @@
<template>
<el-dialog :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" :visible.sync="visible" @close="handleClose">
<el-dialog class="super-flexible-dialog" :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" :visible.sync="visible" @close="handleClose">
<el-form :model="dataForm" :rules="dataFormRules">
<!-- 如果需要更精细一点的布局，可以根据配置项实现地再复杂一点，但此处暂时全部采用一行两列布局 -->
<el-row v-for="n in rows" :key="n" :gutter="20">
<el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW">
<!-- <el-form-item
v-for="field in configs.fields"
:key="field.name || field"
:prop="field.name || field"
:label="field.label || field.name | nameFilter || field | nameFilter"
> -->
<!-- <el-form-item
:prop="
typeof configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)] === 'string'
? configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
: configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].type
"
<el-form-item
v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
:prop="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name || configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
:key="`${n}-col-${c}-item`"
:label="
`
${configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].label ||
(configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name && defaultNames[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]) ||
defaultNames[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]]}
`
"
> -->
<el-form-item :prop="`${n}-test-${c}`" :key="`${n}-col-${c}-item`" :label="'f'">
{{ n - c - JSON.stringify(configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]) }}
:label="getLabel(n, c)"
>
<!-- 暂时先不实现部分输入方式 -->
<!-- <el-input></el-input>
<el-radio></el-radio>
<el-checkbox></el-checkbox>
<el-select></el-select>
<el-switch></el-switch>
<el-cascader></el-cascader>
<el-time-select></el-time-select>
<el-date-picker></el-date-picker> -->
<el-input
v-if="getType(n, c) === 'input'"
:placeholder="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].placeholder || ''"
v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
/>
<el-radio v-if="getType(n, c) === 'radio'"></el-radio>
<el-checkbox v-if="getType(n, c) === 'check'"></el-checkbox>
<el-select v-if="getType(n, c) === 'select'" :placeholder="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].placeholder || ''"></el-select>
<el-switch v-if="getType(n, c) === 'switch'"></el-switch>
<el-cascader v-if="getType(n, c) === 'tree'"></el-cascader>
<el-time-select v-if="getType(n, c) === 'time'"></el-time-select>
<el-date-picker v-if="getType(n, c) === 'date'"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
@@ -140,6 +127,14 @@ export default {
// 本组件只实现了'一行两列'的表单布局
return Math.ceil(this.configs.fields.length / COLUMN_PER_ROW)
}
// computedModel: {
// get(n, c) {
// return this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name
// ? dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]
// : dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]]
// },
// set() {}
// }
},
mounted() {
this.$nextTick(() => {
@@ -226,6 +221,26 @@ export default {
// }
// },
methods: {
getLabel(n, c) {
const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
if (opt) {
// if opt is valid
return typeof opt === 'string' ? this.defaultNames[opt] : opt.label ? opt.label : this.defaultNames[opt.name]
}
},
getType(n, c) {
const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
if (opt) {
if (!opt.type || ['input', 'number' /** add more.. */].includes(opt.type)) {
return 'input'
} else if (['select' /** add more.. */].includes(opt.type)) {
return 'select'
}
// add more...
} else {
return 'input'
}
},
init() {
this.visible = true
},
@@ -247,3 +262,9 @@ export default {
}
}
</script>
<style scoped>
.super-flexible-dialog >>> .el-select {
width: 100%;
}
</style>