update 对dialog进行改版之前
This commit is contained in:
parent
2557026002
commit
669c8f90c6
@ -1,41 +1,28 @@
|
|||||||
<template>
|
<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-form :model="dataForm" :rules="dataFormRules">
|
||||||
<!-- 如果需要更精细一点的布局,可以根据配置项实现地再复杂一点,但此处暂时全部采用一行两列布局 -->
|
<!-- 如果需要更精细一点的布局,可以根据配置项实现地再复杂一点,但此处暂时全部采用一行两列布局 -->
|
||||||
<el-row v-for="n in rows" :key="n" :gutter="20">
|
<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-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW">
|
||||||
<!-- <el-form-item
|
<el-form-item
|
||||||
v-for="field in configs.fields"
|
v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
|
||||||
:key="field.name || field"
|
:prop="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name || configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
|
||||||
: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
|
|
||||||
"
|
|
||||||
:key="`${n}-col-${c}-item`"
|
:key="`${n}-col-${c}-item`"
|
||||||
:label="
|
:label="getLabel(n, c)"
|
||||||
`
|
>
|
||||||
${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)]) }}
|
|
||||||
<!-- 暂时先不实现部分输入方式 -->
|
<!-- 暂时先不实现部分输入方式 -->
|
||||||
<!-- <el-input></el-input>
|
<el-input
|
||||||
<el-radio></el-radio>
|
v-if="getType(n, c) === 'input'"
|
||||||
<el-checkbox></el-checkbox>
|
:placeholder="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].placeholder || ''"
|
||||||
<el-select></el-select>
|
v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
|
||||||
<el-switch></el-switch>
|
/>
|
||||||
<el-cascader></el-cascader>
|
<el-radio v-if="getType(n, c) === 'radio'"></el-radio>
|
||||||
<el-time-select></el-time-select>
|
<el-checkbox v-if="getType(n, c) === 'check'"></el-checkbox>
|
||||||
<el-date-picker></el-date-picker> -->
|
<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-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -140,6 +127,14 @@ export default {
|
|||||||
// 本组件只实现了'一行两列'的表单布局
|
// 本组件只实现了'一行两列'的表单布局
|
||||||
return Math.ceil(this.configs.fields.length / COLUMN_PER_ROW)
|
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() {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
@ -226,6 +221,26 @@ export default {
|
|||||||
// }
|
// }
|
||||||
// },
|
// },
|
||||||
methods: {
|
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() {
|
init() {
|
||||||
this.visible = true
|
this.visible = true
|
||||||
},
|
},
|
||||||
@ -247,3 +262,9 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.super-flexible-dialog >>> .el-select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
@ -91,9 +91,9 @@ export default {
|
|||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
this.$http
|
this.$http
|
||||||
.post(this.$http.adornUrl('/doLogout'))
|
.post(this.$http.adornUrl('/logout'))
|
||||||
.then(({ data: res }) => {
|
.then(({ data: res }) => {
|
||||||
if (res.code !== 200) {
|
if (res.code !== 0) {
|
||||||
return this.$message.error(res.msg)
|
return this.$message.error(res.msg)
|
||||||
}
|
}
|
||||||
clearLoginInfo()
|
clearLoginInfo()
|
||||||
|
@ -104,6 +104,8 @@ const addOrUpdateConfigs = {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'processTime',
|
name: 'processTime',
|
||||||
|
label: '加工时间',
|
||||||
|
placeholder: '请输入加工时间',
|
||||||
type: 'number', // type: number(input+number) | default(input) | textarea | select(options在父组件里获取) | datetime
|
type: 'number', // type: number(input+number) | default(input) | textarea | select(options在父组件里获取) | datetime
|
||||||
required: true,
|
required: true,
|
||||||
rules: [
|
rules: [
|
||||||
@ -120,6 +122,10 @@ const addOrUpdateConfigs = {
|
|||||||
'specifications',
|
'specifications',
|
||||||
{
|
{
|
||||||
name: 'typeDictValue',
|
name: 'typeDictValue',
|
||||||
|
// rules: [
|
||||||
|
// {required: true, trigger: 'blur'}
|
||||||
|
// ],
|
||||||
|
label: '产品类型', // 对于非常见属性,最好自己指定label
|
||||||
type: 'select',
|
type: 'select',
|
||||||
options: [
|
options: [
|
||||||
// 动态获取
|
// 动态获取
|
||||||
@ -129,6 +135,7 @@ const addOrUpdateConfigs = {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'unitDictValue',
|
name: 'unitDictValue',
|
||||||
|
label: '单位',
|
||||||
type: 'select',
|
type: 'select',
|
||||||
options: [
|
options: [
|
||||||
// 动态获取
|
// 动态获取
|
||||||
|
@ -101,14 +101,20 @@ export default {
|
|||||||
this.$http
|
this.$http
|
||||||
.post(this.$http.adornUrl('/login'), this.dataForm)
|
.post(this.$http.adornUrl('/login'), this.dataForm)
|
||||||
.then(({ data: res }) => {
|
.then(({ data: res }) => {
|
||||||
if (res.code !== 200) {
|
if (res.code !== 0) {
|
||||||
// this.getCaptcha()
|
// this.getCaptcha()
|
||||||
return this.$message.error(res.msg)
|
return this.$message.error(res.msg)
|
||||||
}
|
}
|
||||||
Cookies.set('token', res.data.token)
|
Cookies.set('token', res.data.token)
|
||||||
this.$router.replace({ name: 'home' })
|
this.$router.replace({ name: 'home' })
|
||||||
})
|
})
|
||||||
.catch(() => {})
|
.catch((err) => {
|
||||||
|
this.$message({
|
||||||
|
message: err.message,
|
||||||
|
type: 'error',
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
1000,
|
1000,
|
||||||
|
Loading…
Reference in New Issue
Block a user