闲话

一直以来都是后端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>

列表页面效果：

这里将鼠标悬浮到二维码处，是可以查看二维码大图的，也是自己封装了一下下。