小秘书员工年度台账更改

最新推荐文章于 2024-09-02 09:25:55 发布

CV键都碎了

最新推荐文章于 2024-09-02 09:25:55 发布

阅读量104

点赞数

分类专栏：实现功能文章标签： vue

本文链接：https://blog.csdn.net/sinat_33940108/article/details/118606546

版权

实现功能专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文展示了一个Vue.js组件如何处理动态表单数据，通过循环显示从后端获取的数据库字段，并在输入框失去焦点时更新数据。使用el-form和el-input组件构建表单，通过@blur事件处理数据更新。同时，实现了表单验证和提交功能，将数据发送至后端进行保存或更新。

摘要由CSDN通过智能技术生成

在这里插入图片描述
数据库数据和字段。

id自动生成
content为输入内容
date，creae_time为创建时间
parent_id 提交人
status为状态，未审核
type为类型

首先input循环显示获取到的数据

data() {
      return {
        ledgerTypeList: [],
        dataForm: {
          type: 0,
          content: '',
          date: '',
          createTime: '',
          parentId: '',
          status: ''
        },
      }
    }
init(personalBaseInfo, data) {
        // 拉取参数中的年度台账类型
        this.$http({
          url: this.$http.adornUrl('/ledger/personalannualledger/ledgerType'),
          method: 'get'
        }).then(({ data }) => {
          if (data.code === 0) {
            this.ledgerTypeList = data.list
            alert(JSON.stringify(this.ledgerTypeList))
          }
        })
      }

此处alert的就是上图中的数据，然后在界面中循环显示

<div class="quxianList" v-for="(items,id) in ledgerTypeList">
      <el-form-item :label='items.type'  >
        　	<el-input type="text" :key="items.id"  v-model="items.content" style="width:450px" @blur="AssignData(items)"></el-input><!--这里不要用qx-->
      </el-form-item>
</div>

label为input标签
双向绑定v-modal，绑定items.content字段,以进行后面的赋值。
@blur 是当元素失去焦点时所触发的事件。此处把items传值

AssignData(items) {
        console.log(items)
        // this.dataForm.type = items.id
        // this.dataForm.content = items.content
        // var param = []
        // for (var i = 0; i < 1; i++) {
        // const date = this.dataForm.date
        if (items.id !== -1 && items.content !== null && items.content !== undefined && items.content !== '') {
          const item = {
            'type': items.id, 'content': items.content, 'date': this.dataForm.date, 'status': 0, createTime: '',
            parentId: this.parentId
          }
          if (!this.dataForm.list){
            this.dataForm.list = []
          } else if (this.dataForm.list.length === 0) {
            this.dataForm.list.push(item)
          } else {
            var isHas = false
            var index = -1
            for (var i = 0; i < this.dataForm.list.length; i++) {
              const current = this.dataForm.list[i]
              if (current.type === item.type) {
                isHas = true
                index = i
                break
              }
            }
            if (isHas) {
              this.dataForm.list[index] = item
              console.log('修改了')
            } else {
              this.dataForm.list.push(item)
            }
          }
        }
      }

此处给dataform中的属性赋值，对后端进行传递。
log得知可以获取到数据

// 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            this.dataForm.status = 0
            this.$http({
              url: this.$http.adornUrl(
                `/ledger/personalannualledger/${
                  !this.dataForm.id ? 'save' : 'update'
                }`
              ),
              method: 'post',
              data: this.$http.adornData(this.dataForm)
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.visible = false
                this.$emit('refreshDataList')
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }

以下为完整代码：

<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="37%"
  >
    <!--    :before-close="beforeCloseHandel"-->
    <el-form
      :model="dataForm"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="160px"
      :rules="dataRule"
    >
      <div >
        <div style="display: inline-block;margin-left: 10px">
          <el-form-item label="职工姓名：">{{personalBaseInfo.name}}</el-form-item>
          <el-form-item label="职务：">{{personalBaseInfo.duties}}</el-form-item>
        </div>
        <div style="display: inline-block;margin-left: 100px">
          <el-form-item label="所在科室：">{{personalBaseInfo.department}}</el-form-item>
          <el-form-item label="岗位：">{{personalBaseInfo.station}}</el-form-item>
          <span></span>
        </div>
      </div>
      <el-form-item label="年度" prop="date"
      >
        <el-date-picker
          v-model="dataForm.date"
          placeholder="年度"
          type="year"
          format="yyyy年"
        ></el-date-picker>
      </el-form-item>
      <div class="quxianList" v-for="(items,id) in ledgerTypeList">
        <el-form-item :label='items.type'  >
          　　<el-input type="text" :key="items.id"  v-model="items.content" style="width:450px" @blur="AssignData(items)" name="must"></el-input><!--这里不要用qx-->
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer" style="display:flex;justify-content:center">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        ledgerTypeList: [],
        visible: false,
        date: '',
        type: 0,
        content: '',
        createTime: '',
        parentId: '',
        status: '',
        dataForm: {},
        params: [],
        // dataForm: {
        //   type: 0,
        //   content: '',
        //   date: '',
        //   createTime: '',
        //   parentId: '',
        //   status: ''
        // },
        personalBaseInfo: {},
        officeStructList: [],
        currentUserFlag: -1,
        limitedUserList: [],
        dataRule: {
          date: [{ type: 'date', required: true, message: '时间不能为空', trigger: 'blur' }],
          type: [{ required: true, message: '类型不能为空', trigger: 'blur' }]
        }
      }
    },
    methods: {
      init(personalBaseInfo, data) {
        // 拉取参数中的年度台账类型
        this.$http({
          url: this.$http.adornUrl('/ledger/personalannualledger/ledgerType'),
          method: 'get'
        }).then(({data}) => {
          if (data.code === 0) {
            this.ledgerTypeList = data.list
            alert(JSON.stringify(this.ledgerTypeList))
          }
        })
        if (personalBaseInfo.id < 0) {
          this.$message({
            type: 'error',
            message: '数据错误'
          })
          return false
        }
        if (typeof data !== 'undefined' && data.id !== '') {
          this.dataForm = data
        } else {
          this.dataForm = {}
        }
        // this.dataForm.parentId = personalBaseInfo.id
        this.parentId = personalBaseInfo.id
        this.personalBaseInfo = personalBaseInfo
        this.dataForm.content = ' '
        this.visible = true
        console.log('在这里！+    ' + JSON.stringify(this.dataForm.parentId))
      },
      beforeCloseHandel() {
        this.dataForm = {}
        this.$emit('refreshDataList')
        this.visible = false
      },
      close() {
        this.visible = false
      },
      // 表单提交
      dataFormSubmit() {
        // 验证content是否为空
        // var dp = document.getElementsByName('must')
        // var countj = 0
        // for (var i = 0; i < dp.length; i++) {
        //   if (dp[i].value === '') {
        //     countj++
        //     console.log(dp[i].value)
        //     console.log(countj)
        //     console.log(dp.length + '***')
        //   }
        // }
        // if (countj === dp.length) {
        //   alert('必须填写至少一项内容')
        //   return
        // }
        // alert(this.dataForm)
        /* if (this.date === null || this.date === '') {
          alert('时间不能为空')
          return
        }*/
        console.log(this.dataForm)
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            // this.dataForm.status = 0
            this.$http({
              url: this.$http.adornUrl(
                `/ledger/personalannualledger/${
                  !this.dataForm.id ? 'save' : 'update'
                  }`
              ),
              method: 'post',
              data: this.$http.adornData({ list: this.dataForm.list })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.visible = false
                this.$emit('refreshDataList')
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
        this.params = []
      },
      AssignData(items) {
        console.log(items)
        // this.dataForm.type = items.id
        // this.dataForm.content = items.content
        // var param = []
        // for (var i = 0; i < 1; i++) {
        // const date = this.dataForm.date
        if (items.id !== -1 && items.content !== null && items.content !== undefined && items.content !== '') {
          const item = {
            'type': items.id, 'content': items.content, 'date': this.dataForm.date, 'status': 0, createTime: '',
            parentId: this.parentId
          }
          if (!this.dataForm.list) {
            this.dataForm.list = []
          } else if (this.dataForm.list.length === 0) {
            this.dataForm.list.push(item)
          } else {
            var isHas = false
            var index = -1
            for (var i = 0; i < this.dataForm.list.length; i++) {
              const current = this.dataForm.list[i]
              if (current.type === item.type) {
                isHas = true
                index = i
                break
              }
            }
            if (isHas) {
              this.dataForm.list[index] = item
              console.log('修改了')
            } else {
              this.dataForm.list.push(item)
            }
          }
        }
      }
    }
  }
</script>

<style scoped>
</style>