update subform
This commit is contained in:
247
src/components/base-dialog/AttrForm/index.vue
Normal file
247
src/components/base-dialog/AttrForm/index.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<div class="attr-form">
|
||||
<h3>{{ title }} <el-button style="margin-left: 8px;" type="text" @click="showAddAttr = true">添加</el-button></h3>
|
||||
<div v-if="!showAddAttr">
|
||||
<component
|
||||
key="sub-table"
|
||||
:is="require('../../base-table/index.vue').default"
|
||||
:table-head-configs="tableConfigs"
|
||||
:data="dataList"
|
||||
:max-height="500"
|
||||
@operate-event="handleOperations"
|
||||
/>
|
||||
<el-pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
:current-page="pageIndex"
|
||||
:page-sizes="[5, 10, 20, 50]"
|
||||
:page-size="pageSize"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div v-else style="background: #eee; border-radius: 8px; padding: 12px;">
|
||||
<el-row>
|
||||
<el-col :span="10" :offset="7">
|
||||
<el-form ref="AttrForm" :model="AttrForm" :rules="AttrFormRules" :inline="true">
|
||||
<el-form-item v-for="field in attrFormFields" :key="field.prop" :prop="field.prop" :label="field.name">
|
||||
<el-input v-model="AttrForm[field.prop]" clearable />
|
||||
<!-- add more... -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="text-align: center;">
|
||||
<el-button size="small" @click="handleCloseAttrForm">取消</el-button>
|
||||
<el-button type="success" size="small" @click="handleSaveAttrForm">保存</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseTable from '@/components/base-table'
|
||||
import { pick } from 'lodash/object'
|
||||
|
||||
export default {
|
||||
name: 'AttrForm',
|
||||
components: { BaseTable },
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/** subtable 需要设置的属性 */
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
tableConfigs: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
/** 表单提交需要的属性 */
|
||||
pId: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showAddAttr: false,
|
||||
dataList: [],
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
totalPage: 0,
|
||||
AttrForm: {}, // 需动态设置
|
||||
AttrFormRules: {} // 需动态设置
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
attrFormFields() {
|
||||
const _ = this.tableConfigs.filter(item => item.formField)
|
||||
/** 顺带配置 AttrForm */
|
||||
_.forEach(item => {
|
||||
this.$set(this.AttrForm, [item.prop], '')
|
||||
})
|
||||
|
||||
this.$set(this.AttrForm, 'id', null)
|
||||
return _
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDataList()
|
||||
/** 设置 AttrForm 的 rules */
|
||||
for(const config of this.tableConfigs) {
|
||||
if (config.rules) {
|
||||
this.$set(this.AttrFormRules, [config.prop], config.rules)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** init dataform */
|
||||
initAttrForm() {
|
||||
Object.entries(this.AttrForm).forEach(([key, value]) => {
|
||||
if (typeof value === 'object' || typeof value === 'number') {
|
||||
this.AttrForm[key] = null
|
||||
} else if (Array.isArray(value)) {
|
||||
this.AttrForm[key] = []
|
||||
} else {
|
||||
this.AttrForm[key] = ''
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/** requests */
|
||||
getDataList() {
|
||||
this.dataListLoading = true
|
||||
// 获取动态属性列表
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(`${this.url}/page`),
|
||||
method: 'get',
|
||||
params: this.$http.adornParams({
|
||||
page: this.pageIndex,
|
||||
limit: this.pageSize,
|
||||
productId: this.pId
|
||||
// order: 'asc/desc',
|
||||
// orderField: 'name'
|
||||
})
|
||||
}).then(({ data: res }) => {
|
||||
if (res && res.code === 0) {
|
||||
this.dataList = res.data.list
|
||||
this.totalPage = res.data.total
|
||||
} else {
|
||||
this.dataList = []
|
||||
this.totalPage = 0
|
||||
}
|
||||
this.dataListLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
/** handlers */
|
||||
handleOperations({ type, data: id }) {
|
||||
switch (type) {
|
||||
case 'edit':
|
||||
{
|
||||
this.showAddAttr = true
|
||||
this.$nextTick(() => {
|
||||
this.$http.get(this.$http.adornUrl(`${this.url}/${id}`)).then(({ data: res }) => {
|
||||
if (res && res.code === 0 && res.data) {
|
||||
const neededFields = [...this.attrFormFields.map(item => item.prop), 'id']
|
||||
const filtered = pick(res.data, neededFields)
|
||||
for (let field of neededFields) {
|
||||
this.AttrForm[field] = filtered[field]
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
break
|
||||
case 'delete':
|
||||
return this.deleteHandle(id)
|
||||
}
|
||||
},
|
||||
deleteHandle(id) {
|
||||
var ids = id ? [id] : []
|
||||
|
||||
this.$confirm(`确定对id=${ids.join(',')}进行${id ? '删除' : '批量删除'}操作?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl(this.url),
|
||||
method: 'delete',
|
||||
data: this.$http.adornData(ids, false, 'raw')
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getDataList()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
handleCloseAttrForm() {
|
||||
this.showAddAttr = false
|
||||
this.initAttrForm()
|
||||
},
|
||||
|
||||
handleSaveAttrForm() {
|
||||
this.$refs['AttrForm'].validate(valid => {
|
||||
if (valid) {
|
||||
this.$http({
|
||||
// url: this.$http.adornUrl(`${this.url}/${!this.AttrForm.id ? '' : this.AttrForm.id}`),
|
||||
url: this.$http.adornUrl(this.url),
|
||||
method: this.AttrForm.id ? 'put' : 'post',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
data: JSON.stringify({ ...this.AttrForm, productId: this.pId })
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.showAddAttr = false
|
||||
this.getDataList()
|
||||
this.initAttrForm()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 每页数
|
||||
sizeChangeHandle(val) {
|
||||
this.pageSize = val
|
||||
this.pageIndex = 1
|
||||
this.getDataList()
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
this.pageIndex = val
|
||||
this.getDataList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -45,33 +45,7 @@
|
||||
</el-form>
|
||||
|
||||
<template v-if="dataForm.id && configs.subtable">
|
||||
<h3>{{ configs.subtable.title }} <el-button style="margin-left: 8px;" type="text" @click="showAddAttr = true">添加</el-button></h3>
|
||||
<component
|
||||
v-if="!showAddAttr"
|
||||
key="sub-table"
|
||||
:is="require('../../base-table/index.vue').default"
|
||||
:table-head-configs="configs.subtable.tableConfigs"
|
||||
:data="subtableDataList"
|
||||
:max-height="500"
|
||||
@operate-event="handleOperations"
|
||||
@refreshDataList="getDataList"
|
||||
/>
|
||||
<div v-else style="background: #eee; border-radius: 8px; height: 200px;">
|
||||
<el-row>
|
||||
<el-form ref="AttrForm" :model="AttrForm" :rules="AttrFormRules">
|
||||
<el-form-item v-for="field in attrFormFields" :key="field.prop" :prop="field.prop" :label="field.name">
|
||||
<!-- 子窗口只给input吧，太麻烦了，有特殊需求就不用这个组件了 -->
|
||||
<el-input v-model="AttrForm[field.prop]" clearable />
|
||||
<!-- TODO: mounted里初始化AttrForm，configs里设置AttrFormRules，mounted里设置attrFormFields -->
|
||||
<!-- TODO: 单独用一个组件来展示动态属性这一部分 -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button size="small" @click="showAddAttr = false">取消</el-button>
|
||||
<el-button type="primary" size="small" @click="handleSaveAttrForm">保存</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
<attr-form :pId="dataForm.id" v-bind="configs.subtable" />
|
||||
</template>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
@@ -93,6 +67,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AttrForm from '../AttrForm'
|
||||
import { pick } from 'lodash/object'
|
||||
|
||||
// 标题 for i18n
|
||||
@@ -125,7 +100,7 @@ const COLUMN_PER_ROW = 2
|
||||
|
||||
export default {
|
||||
name: 'AddOrUpdateDialog',
|
||||
components: {},
|
||||
components: { AttrForm },
|
||||
props: {
|
||||
configs: {
|
||||
/**
|
||||
@@ -170,18 +145,12 @@ export default {
|
||||
},
|
||||
defaultPlaceholders: {}, // 自动根据 defaultNames 计算得来
|
||||
/** 表单相关属性 */
|
||||
|
||||
visible: false,
|
||||
isEdit: false,
|
||||
isDetail: false,
|
||||
isUpdated: false,
|
||||
dataForm: {},
|
||||
dataFormRules: {},
|
||||
/** 子列表相关属性 */
|
||||
subtableDataList: [],
|
||||
showAddAttr: false,
|
||||
AttrForm: {},
|
||||
AttrFormRules: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -369,12 +338,6 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
handleOperations() {},
|
||||
|
||||
getDataList() {},
|
||||
|
||||
handleSaveAttrForm() {},
|
||||
|
||||
handleClose() {
|
||||
if (this.isAdd || this.isUpdated) this.$emit('refreshDataList')
|
||||
this.visible = false
|
||||
|
||||
@@ -157,11 +157,11 @@ const addOrUpdateConfigs = {
|
||||
subtable: {
|
||||
// for i18n
|
||||
title: '动态属性',
|
||||
url: '/monitoring/productArrt/page',
|
||||
url: '/monitoring/productArrt',
|
||||
tableConfigs: [
|
||||
{ type: 'index', name: '序号' },
|
||||
{ prop: 'createTime', name: '添加时间', filter: val => (val ? moment(val).format('YYYY-MM-DD hh:mm:ss') : '-') },
|
||||
{ prop: 'name', name: '属性名', formField: true },
|
||||
{ prop: 'name', name: '属性名', formField: true, rules: [{ required: true, message: '必填', trigger: 'blur' }] },
|
||||
{ prop: 'code', name: '属性值', formField: true },
|
||||
{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user