闲话
一直以来都是后端dog，但是现在项目转web了，公司又不招前端开发者，所以也只能自己来搞了，不过问题不大，我头发还有很多，学！开发选择使用了 vue-element-admin框架，还挺不错的（在我极力反对使用IView下，才用上，不容易啊）。
废话不多说，开始说遇到的问题和解决方案。
因为是管理系统，所以列表就很多，新增和编辑页面使用Dialog里面嵌套form表单，然后就遇到了第一个问题：
问题
我知道这个问题肯定不止我一个人遇到，因为并不是什么稀奇的问题，在通过查询文档之后，发现form表单有以下两个方法：
Dialog也有事件可以监听：
那这样的话，解题思路不就有了么，在窗体关闭回调中去调用form的两个方法重置掉表单就OK了。在实际执行的时候发现有的字段可以，有的字段不行，经过排查是 from-item没有写prop导致的，要想达到预期效果，所有的Item都需要有 prop=“xxx” ，需要和form表单绑定的Model属性一一对应。正确代码如下：
<template>
<el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="850px" :destroy-on-close="true" @close="handleClose()">
<el-form ref="editEquipmentInfo" v-loading="formLoading" :rules="rules" :model="equInfo" label-width="120px">
<el-form-item label="Id:" prop="Id" hidden>
<el-input v-model="equInfo.Id" autocomplete="off" />
</el-form-item>
<el-row><el-col :span="10" :offset="2"> <span class="wt-equipinfo-form-h2">基本信息</span></el-col></el-row>
<el-row>
<el-col :span="9" :offset="2">
<el-form-item label="选择小区:" prop="CId">
<el-select v-model="equInfo.CId" class="wt-form-item-input" placeholder="请选择所属小区">
<el-option v-for="item in communitites" :key="item.Id" :value="item.Id" :label="item.CntName" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="9" :offset="2">
<el-form-item label="设备类型:" prop="TypeId">
<el-cascader ref="typecascader" v-model="equInfo.TypeId" :options="typeOptions" :show-all-levels="false" :props="typeProps" class="wt-form-item-input" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="isLoading" type="primary" @click="onSubmit">提 交</el-button>
</div>
</el-dialog>
</template>
<script>
import { editEquipmentInfo, getEquipmentInfo, getEquipmentTypeNodeList } from '@/api/equipment'
import { getCommunityList } from '@/api/community'
export default {
name: 'EditEquipmentInfo',
props: {
handleSubmit: {
type: Function,
default: null
}
},
data() {
return {
dialogFormVisible: false,
communitites: [],
typeOptions: [],
equInfo: {
CId: '',
TypeId: '',
Name: '',
Code: '',
Id: 0,
MaintenancePeriod: '',
FullTypeName: ''
},
isLoading: false,
title: '新增设备档案',
formLoading: false,
rules: {
CId: [{ type: 'number', required: true, message: '请选择所属小区', tigger: 'change' }],
TypeId: [{ type: 'number', required: true, message: '请选择设备分类', tigger: 'change' }],
Code: [{ required: true, message: '请输入设备编码', tigger: 'blur' }],
Name: [{ required: true, message: '请输入设备名称', tigger: 'blur' }],
InstallationSite: [{ required: true, message: '请输入安装位置', tigger: 'blur' }],
EquLevel: [{ type: 'number', required: true, message: '请选择设备等级', tigger: 'change' }],
State: [{ type: 'number', required: true, message: '请选择设备状态', tigger: 'change' }]
},
typeProps: {
lazy: true,
emitPath: false,
expandTrigger: 'hover',
checkStrictly: true,
lazyLoad(node, resolve) {
var pId = node.value
var paras = {
PId: pId
}
getEquipmentTypeNodeList(paras).then(res => {
resolve(res.data)
})
}
}
}
},
mounted() {
getCommunityList().then((res) => {
this.communitites = res.data
})
var paras = {
PId: 0
}
getEquipmentTypeNodeList(paras).then(res => {
this.typeOptions = res.data
})
},
methods: {
handShow(isShow, isAdd, infoId) {
this.dialogFormVisible = isShow
if (isAdd) {
this.equInfo.Id = 0
this.equInfo.ParentId = infoId
} else {
this.equInfo.Id = infoId
this.title = '修改设备分类'
this.getInfo()
}
},
/*
* 监听Dialog关闭事件
*/
handleClose() {
if (this.$refs['editEquipmentInfo']) {
this.$refs['editEquipmentInfo'].resetFields() //重置表单
this.$refs['editEquipmentInfo'].clearValidate() //重置验证结果
this.isLoading = false
}
},
onSubmit() {
this.$refs['editEquipmentInfo'].validate((valid) => {
if (valid) {
this.isLoading = true
var selectNode = this.$refs['typecascader'].getCheckedNodes()[0]
if (selectNode) {
var labels = selectNode.pathLabels
var fullTypeName = labels.join('>')
this.$set(this.equInfo, 'FullTypeName', fullTypeName)
}
var req = this.equInfo
editEquipmentInfo(req).then((res) => {
this.handleSubmit(true)
this.isLoading = false
this.dialogFormVisible = false
this.$message.success('保存成功')
}).catch(() => {
this.isLoading = false
})
} else {
return false
}
})
},
getInfo() {
this.formLoading = true
var data = { Id: this.equInfo.Id }
getEquipmentInfo(data).then((res) => {
this.equInfo = res.data
this.$refs['typecascader'].inputValue = res.data.TypeName
this.formLoading = false
})
}
}
}
</script>
列表效果
上列表代码：
<template>
<el-card>
<el-table v-loading="loading" :data="tableData" stripe border style="width: 100%" height="500px">
<el-table-column width="40" prop="Id" type="selection" />
<el-table-column prop="CntName" label="所属小区" show-overflow-tooltip align="center" header-align="center" />
<el-table-column prop="FullTypeName" label="设备类型" show-overflow-tooltip align="center" header-align="center" />
<el-table-column prop="Code" label="设备编码" show-overflow-tooltip align="center" header-align="center" />
<el-table-column prop="Name" label="设备名称" show-overflow-tooltip align="center" header-align="center" />
<el-table-column prop="EquLevel" label="设备等级" show-overflow-tooltip align="center" header-align="center">
<template slot-scope="scope">
<span>{{ scope.row.EquLevel==1?'普通设备': scope.row.EquLevel==2 ?'重要设备' :'关键设备' }}</span>
</template>
</el-table-column>
<el-table-column prop="State" label="设备状态" show-overflow-tooltip align="center" header-align="center">
<template slot-scope="scope">
<span>{{ scope.row.State==0?'在用': scope.row.State==1 ?'停用' :'报废' }}</span>
</template>
</el-table-column>
<el-table-column prop="ErCode" label="设备二维码" show-overflow-tooltip align="center" header-align="center">
<template slot-scope="scope">
<tableErCodePop :text="scope.row.ErCode + '' " :smallsize="30" />
</template>
</el-table-column>
<el-table-column prop="AddTime" label="创建日期" :formatter="dateFormatter" show-overflow-tooltip align="center" header-align="center" />
<el-table-column :fixed="false" prop="Action" label="操作" align="center" width="240" header-align="center">
<template slot-scope="scope">
<el-button type="text" @click="editInfo(scope.row.Id)">编辑</el-button>
<el-button type="text" @click="showInfo(scope.row.Id)">查看</el-button>
</template>
</el-table-column>
</el-table>
<div class="wt-pagination">
<el-pagination
:current-page="searchData.PageIndex"
:page-sizes="[20, 40,60,80,100]"
:page-size="searchData.PageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRec"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<editFrom ref="editForm" :handle-submit="onFormSubmit" />
<showInfoForm ref="showForm" />
<codePrint v-show="showPrintView" ref="codePrint" class="none" :on-dialog-closed="onDialogClosed" />
</el-card>
</template>
<script>
import { getEquipmentList, removeEquipmentInfo } from '@/api/equipment'
import TableErCodePop from '@/components/ErCode/tableErCodePop'
import { parseTime } from '@/utils/index'
import EditEquipmentInfo from '@/views/equipment/info/edit'
import ShowEquipmentInfo from '@/views/equipment/info/info'
export default {
name: 'InfoList',
components: {
tableErCodePop: TableErCodePop,
editFrom: EditEquipmentInfo,
codePrint: ErCodePrint,
showInfoForm: ShowEquipmentInfo
},
data() {
return {
searchData: {
CId: '',
EquName: '',
Period: '',
AddTime: '',
PageIndex: 1,
PageSize: 20
},
totalRec: 200,
loading: true,
communitites: [],
periods: [
{ key: '每日', value: 1 },
{ key: '每周', value: 2 },
{ key: '每年', value: 3 }
],
tableData: [],
showPrintView: false
}
},
mounted() {
getCommunityList().then((res) => {
this.communitites = res.data
this.getTableData()
})
},
methods: {
// 获取表格数据
getTableData() {
this.loading = true
getEquipmentList(this.searchData).then((res) => {
this.tableData = res.data
this.totalRec = res.count
this.loading = false
})
},
handleSizeChange(res) {
this.searchData.PageSize = res
this.getTableData()
},
handleCurrentChange(res) {
this.searchData.PageIndex = res
this.getTableData()
},
handelPeriodChange(res) {
this.searchData.Period = res
},
handelCommunityChange(res) {
this.searchData.CId = res
},
/*
* 格式化表格的时间
*/
dateFormatter(row, column, cellValue, index) {
return parseTime(cellValue, '{y}-{m}-{d}')
},
append() {
this.$refs.editForm.handShow(true, true, 0)
},
editInfo(infoId) {
this.$refs.editForm.handShow(true, false, infoId)
},
showInfo(infoId) {
this.$refs.showForm.handShow(true, false, infoId)
}，
/*
* 表单提交之后的回调，返回true则是保存成功
*/
onFormSubmit(res) {
if (res === true) {
this.getTableData()
}
}
}
}
</script>
<style type="text/css" media="print">.none { display:none;}</style>
列表页面效果：
这里将鼠标悬浮到二维码处，是可以查看二维码大图的，也是自己封装了一下下。
Comments | NOTHING