forked from mt-fe-group/mt-yd-ui
Compare commits
No commits in common. "cfec6ff3f524bee1e0e3b85a7b6be07d3c3a2fbc" and "2557026002b559d0d8028e4f8bf73fa483c6eaab" have entirely different histories.
cfec6ff3f5
...
2557026002
@ -1,36 +1,41 @@
|
||||
<template>
|
||||
<el-dialog class="super-flexible-dialog" :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" :visible.sync="visible" @close="handleClose">
|
||||
<el-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-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
|
||||
:prop="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name"
|
||||
<!-- <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
|
||||
"
|
||||
:key="`${n}-col-${c}-item`"
|
||||
:label="getLabel(n, c)"
|
||||
>
|
||||
: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)]) }}
|
||||
<!-- 暂时先不实现部分输入方式 -->
|
||||
<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]"
|
||||
clearable
|
||||
/>
|
||||
<el-radio v-if="getType(n, c) === 'radio'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-radio>
|
||||
<el-checkbox v-if="getType(n, c) === 'check'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-checkbox>
|
||||
<el-select
|
||||
v-if="getType(n, c) === 'select'"
|
||||
:placeholder="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].placeholder || ''"
|
||||
v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
|
||||
clearable
|
||||
>
|
||||
<el-option v-for="opt in configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].options" :key="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
<el-switch v-if="getType(n, c) === 'switch'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-switch>
|
||||
<el-cascader v-if="getType(n, c) === 'tree'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-cascader>
|
||||
<el-time-select v-if="getType(n, c) === 'time'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-time-select>
|
||||
<el-date-picker v-if="getType(n, c) === 'date'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-date-picker>
|
||||
<!-- <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-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -138,61 +143,57 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
/** 转换 configs.fields 的结构,把纯字符串转为对象 */
|
||||
this.configs.fields = this.configs.fields.map(item => {
|
||||
if (typeof item === 'string') {
|
||||
return { name: item }
|
||||
}
|
||||
return item
|
||||
})
|
||||
|
||||
/** 动态设置dataForm字段 */
|
||||
this.configs.fields.forEach(item => {
|
||||
this.$set(this.dataForm, [item.name], '')
|
||||
if (item.api) {
|
||||
/** 自动请求并填充 */
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(item.api),
|
||||
method: 'POST' // 也可以改成动态决定
|
||||
}).then(({ data: res }) => {
|
||||
if (res && res.code === 0) {
|
||||
this.dataForm[item.name] = res.data // <=== 此处需要对接口
|
||||
}
|
||||
})
|
||||
} // end if (item.api)
|
||||
if (typeof item === 'string') {
|
||||
this.$set(this.dataForm, [item], '')
|
||||
} else if (typeof item === 'object') {
|
||||
this.$set(this.dataForm, [item.name], '')
|
||||
if (item.api) {
|
||||
/** 自动请求并填充 */
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(item.api),
|
||||
methods: 'get'
|
||||
}).then(({ data: res }) => {
|
||||
if (data & (data.code === 0)) {
|
||||
this.dataFrom[item.name] = res.data // <=== 此处需要对接口
|
||||
}
|
||||
})
|
||||
} // end if (item.api)
|
||||
|
||||
if (item.required) {
|
||||
const requiredRule = {
|
||||
required: true,
|
||||
message: '请输入必填项',
|
||||
trigger: 'change'
|
||||
}
|
||||
/** 检查是否已经存在该字段的规则 */
|
||||
const exists = this.dataFormRules[item.name] || null
|
||||
/** 设置验证规则 */
|
||||
if (exists) {
|
||||
const unset = true
|
||||
for (const rule of exists) {
|
||||
if (rule.required) unset = false
|
||||
if (item.required) {
|
||||
const requiredRule = {
|
||||
required: true,
|
||||
message: '请输入必填项',
|
||||
trigger: 'change'
|
||||
}
|
||||
if (unset) {
|
||||
exists.push(requiredRule)
|
||||
/** 检查是否已经存在该字段的规则 */
|
||||
const exists = this.dataFormRules[item.name] || null
|
||||
/** 设置验证规则 */
|
||||
if (exists) {
|
||||
const unset = true
|
||||
for (const rule of exists) {
|
||||
if (rule.required) unset = false
|
||||
}
|
||||
if (unset) {
|
||||
exists.push(requiredRule)
|
||||
}
|
||||
} else {
|
||||
/** 不存在已有规则 */
|
||||
this.$set(this.dataFormRules, [item.name], [requiredRule])
|
||||
}
|
||||
} else {
|
||||
/** 不存在已有规则 */
|
||||
this.$set(this.dataFormRules, [item.name], [requiredRule])
|
||||
}
|
||||
} // end if (item.required)
|
||||
} // end if (item.required)
|
||||
|
||||
if (item.rules) {
|
||||
const exists = this.dataFormRules[item.name] || null
|
||||
if (exists) {
|
||||
// 浅拷贝过去
|
||||
exists.push(...item.rules)
|
||||
} else {
|
||||
this.$set(this.dataFormRules, [item.name], [...item.rules])
|
||||
}
|
||||
} // end if (item.rules)
|
||||
if (item.rules) {
|
||||
const exists = this.dataFormRules[item.name] || null
|
||||
if (exists) {
|
||||
// 浅拷贝过去
|
||||
exists.push(...item.rules)
|
||||
} else {
|
||||
this.$set(this.dataFormRules, [item.name], [...item.rules])
|
||||
}
|
||||
} // end if (item.rules)
|
||||
}
|
||||
})
|
||||
|
||||
/** 检查是否需要额外的组件 */
|
||||
@ -225,75 +226,19 @@ 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 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
|
||||
},
|
||||
handleClick(btn) {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
/** 提取url */
|
||||
const urls = {}
|
||||
this.configs.operations.map(item => {
|
||||
urls[item.name] = item.url
|
||||
})
|
||||
/** 操作 */
|
||||
switch (btn.name) {
|
||||
case 'save':
|
||||
case 'update':
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(urls[btn.name]),
|
||||
method: btn.name === 'save' ? 'POST' : 'PUT',
|
||||
data: this.dataForm
|
||||
}).then(({ data: res }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: btn.name === 'save' ? '添加成功!' : '更新成功!',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose() {
|
||||
this.$emit('refreshDataList')
|
||||
this.visible = false
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
return
|
||||
case 'reset':
|
||||
for (const key of Object.keys(this.dataForm)) {
|
||||
if (typeof this.dataForm[key] === 'string') {
|
||||
this.dataForm[key] = ''
|
||||
} else if (this.dataForm[key] instanceof Array) {
|
||||
this.dataForm[key].splice(0)
|
||||
} else {
|
||||
this.dataForm[key] = null
|
||||
}
|
||||
}
|
||||
console.log('after reset: ', JSON.stringify(this.dataForm))
|
||||
break
|
||||
// add more..
|
||||
}
|
||||
}
|
||||
})
|
||||
switch (btn.name) {
|
||||
case 'save':
|
||||
break
|
||||
case 'update':
|
||||
break
|
||||
case 'reset':
|
||||
break
|
||||
// add more..
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
if (this.isAdd || this.isUpdated) this.$emit('refreshDataList')
|
||||
@ -302,9 +247,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.super-flexible-dialog >>> .el-select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
@ -91,9 +91,9 @@ export default {
|
||||
})
|
||||
.then(() => {
|
||||
this.$http
|
||||
.post(this.$http.adornUrl('/logout'))
|
||||
.post(this.$http.adornUrl('/doLogout'))
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
if (res.code !== 200) {
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
clearLoginInfo()
|
||||
|
@ -100,12 +100,10 @@ const addOrUpdateConfigs = {
|
||||
'name',
|
||||
{
|
||||
name: 'code',
|
||||
api: '/monitoring/product/getCode'
|
||||
api: 'xx/code'
|
||||
},
|
||||
{
|
||||
name: 'processTime',
|
||||
label: '加工时间',
|
||||
placeholder: '请输入加工时间',
|
||||
type: 'number', // type: number(input+number) | default(input) | textarea | select(options在父组件里获取) | datetime
|
||||
required: true,
|
||||
rules: [
|
||||
@ -122,10 +120,6 @@ const addOrUpdateConfigs = {
|
||||
'specifications',
|
||||
{
|
||||
name: 'typeDictValue',
|
||||
// rules: [
|
||||
// {required: true, trigger: 'blur'}
|
||||
// ],
|
||||
label: '产品类型', // 对于非常见属性,最好自己指定label
|
||||
type: 'select',
|
||||
options: [
|
||||
// 动态获取
|
||||
@ -135,7 +129,6 @@ const addOrUpdateConfigs = {
|
||||
},
|
||||
{
|
||||
name: 'unitDictValue',
|
||||
label: '单位',
|
||||
type: 'select',
|
||||
options: [
|
||||
// 动态获取
|
||||
|
@ -101,20 +101,14 @@ export default {
|
||||
this.$http
|
||||
.post(this.$http.adornUrl('/login'), this.dataForm)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
if (res.code !== 200) {
|
||||
// this.getCaptcha()
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
Cookies.set('token', res.data.token)
|
||||
this.$router.replace({ name: 'home' })
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message({
|
||||
message: err.message,
|
||||
type: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
})
|
||||
},
|
||||
1000,
|
||||
|
Loading…
Reference in New Issue
Block a user