Vue 动态增减表单项，查看，编辑

产品需求.jpg 页面.jpg

<template>
<!--家庭成员情况-->
<el-form :inline="true" label-position="top" label-width="80px" ref="shiye" :rules="rules" :model="shiye">
        <div class="tit">家庭成员情况<el-button @click="addItem">新增</el-button>
        </div>
        <div v-for="(item, index) in shiye.familyMembers" :key="index">
          <div style="background:#CEE7FD;">
            <div class="col">
              <div class="col-inside">
                <div class="col-tit"><span class="canji-xiabiao-red">*</span>与本人关系</div>
                <div class="col-txt">
                  <el-form-item label="" :prop="'familyMembers.' + index + '.legalClasslist'">
                    <el-select class="oinput" v-model="item.legalClasslist" placeholder="请选择人员标签">
                      <el-option v-for="item in relationClass" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
              <div class="col-inside">
                <div class="col-tit"><span class="canji-xiabiao-red">*</span>姓名</div>
                <div class="col-txt">
                  <el-form-item label="" :prop="'familyMembers.' + index + '.legalNamelist'">
                    <el-input class="oinput" v-model="item.legalNamelist" placeholder="请输入姓名"></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="col-inside">
                <div class="col-tit">出生日期</div>
                <div class="col-txt">
                  <el-form-item label="" :prop="'familyMembers.' + index + '.legalbirthdaylist'">
                    <el-date-picker v-model="item.legalbirthdaylist" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd hh:mm:ss">
                    </el-date-picker>
                  </el-form-item>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="col-inside">
                <div class="col-tit"><span class="canji-xiabiao-red">*</span>身份证号</div>
                <div class="col-txt">
                  <el-form-item label="" :prop="'familyMembers.' + index + '.legalidcardlist'">
                    <el-input class="oinput" v-model="item.legalidcardlist" placeholder="请输入身份证号"></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="col-inside">
                <div class="col-tit">家庭住址</div>
                <div class="col-txt">
                  <el-form-item label="" :prop="'familyMembers.' + index + '.legaladdlist'">
                    <el-input class="oinput" v-model="item.legaladdlist" placeholder="请输入家庭住址"></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="col-inside">
                <div class="col-tit"><span class="canji-xiabiao-red">*</span>联系电话</div>
                <div class="col-txt">
                  <el-form-item label="" :prop="'familyMembers.' + index + '.legaltellist'">
                    <el-input class="oinput" v-model="item.legaltellist" placeholder="请输入联系电话"></el-input>
                  </el-form-item>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="col-inside">
                <div class="col-tit">邮政编码</div>
                <div class="col-txt">
                  <el-form-item label="" :prop="'familyMembers.' + index + '.legalpostalcodelist'">
                    <el-input class="oinput" v-model="item.legalpostalcodelist" placeholder="请输入邮政编码"></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="col-inside">
                <div class="col-tit">住宅电话</div>
                <div class="col-txt">
                  <el-form-item label="" :prop="'familyMembers.' + index + '.legaltelnumlist'">
                    <el-input class="oinput" v-model="item.legaltelnumlist" placeholder="请输入住宅电话"></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="col-inside" style="width:400px;">
                <div class="col-tit">经济情况</div>
                <div class="col-txt">
                  <el-form-item label="" :prop="'familyMembers.' + index + '.legaleconomicslist'">
                    <el-input class="oinput" v-model="item.legaleconomicslist" placeholder="请输入经济情况"></el-input>
                  </el-form-item>
                </div>
              </div>
              <el-form-item label="">
                <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
              </el-form-item>
            </div>
          </div>
        </div>
        <div style="margin:20px auto;text-align:center;">
          <el-form-item size="large">
            <el-button type="primary" @click="submit('shiye')">提交</el-button>
            <el-button @click="reset(shiye)">重置</el-button>
          </el-form-item>
        </div>
</el-form>
</template>

<script>
 export default {
    data() {
      return {
      rules: {    
          familyMembers:[{
            legalClasslist: [{
              required: true,
              message: ' ',
              trigger: 'blur'
            }],
            legalNamelist: [{
              required: true,
              message: ' ',
              trigger: 'blur'
            }],
            legalidcardlist: [{
              required: true,
              message: ' ',
              trigger: 'blur'
            }],
            legaltellist: [{
              required: true,
              message: ' ',
              trigger: 'blur'
            }],
          }]
        },
      shiye: {
          familyMembers: [{
            legalClasslist: [],
            legalNamelist: '',
            legalbirthdaylist: '',
            legalidcardlist: '',
            legaladdlist: '',
            legaltellist: '',
            legalpostalcodelist: '',
            legaltelnumlist: '',
            legaleconomicslist: '',
          }],
        },
    }
    },
    methods: {
    addItem() {
        this.shiye.familyMembers.push({
          legalClasslist: '',
          legalNamelist: '',
          legalbirthdaylist: '',
          legalidcardlist: '',
          legaladdlist: '',
          legaltellist: '',
          legalpostalcodelist: "",
          legaltelnumlist: "",
          legaleconomicslist: '',
        })
      },
      deleteItem(item, index) {
        this.shiye.familyMembers.splice(index, 1)
      },
    }
}
</script>

<style>
  .container {
    width: 80%;
    margin: 20px auto;
    border: 1px solid #0099FF;
    background-color: rgba(249, 253, 255, 1);
    border-radius: 5px;
  }

  .tit {
    width: 100%;
    color: red;
    text-align: center;
    line-height: 50px;
  }

  .col {
    width: 100%;
    border-top: 1px solid #0099FF;
    border-bottom: 1px solid #0099FF;
    height: 50px;
  }

  .col-tit {
    width: 110px;
    border-right: 1px solid #0099FF;
    text-align: center;
    height: 50px;
    line-height: 50px;
    float: left;
    font-size: 12px
  }

  .col-txt {
    width: 52%;
    float: left;
    height: 40px;
    padding: 5px 4px;
    margin: 0 auto
  }

  .col-inside {
    width: 33%;
    float: left;
    border-right: 1px solid #0099FF;
  }

  .col-inside:last-child {
    border-right: none;
  }

  .el-checkbox+.el-checkbox {
    margin-left: 16px
  }

  .el-textarea__inner {
    width: 500px;
    height: 40px;
  }

  .canji-lift {
    float: right;
    margin-right: 10px;
  }

  .canji-red {
    color: #333333;
  }

  .canji-xiabiao-red {
    color: red;
  }
</style>

查看.jpg

<li class="fl">
    <p>失业人口标签</p>
    <p>
        <el-button type="primary" @click="show" size="mini" round>查看</el-button>
    </p>
</li>
<el-dialog width="60%" :visible.sync="innerVisible" append-to-body>
    <p class="dialogTitle"><i class="el-icon-star-on"></i>失业人口标签</p>
    <ul class="dialogList clearfix">
         <div v-for="(item, index) in familyMembers" :key="index">
             <p class="dialogTitle"><i class="el-icon-star-on"></i>老人家庭成员基本信息</p>
            <el-form-item label="与残疾人关系" prop="legalClasslist">
                <el-input class="oinput" v-model="item.legalClasslist" placeholder="" disabled></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="legalNamelist">
                <el-input class="oinput" v-model="item.legalNamelist" placeholder="" disabled></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="legalbirthdaylist">
                <el-input class="oinput" v-model="item.legalbirthdaylist" placeholder="" disabled></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="legalidcardlist">
                <el-input class="oinput" v-model="item.legalidcardlist" placeholder="" disabled></el-input>
            </el-form-item>
                <el-form-item label="家庭住址" prop="legaladdlist">
            <el-input class="oinput" v-model="item.legaladdlist" placeholder="" disabled></el-input>
             </el-form-item>
                         <el-form-item label="联系电话" prop="legalpostalcodelist">
                             <el-input class="oinput" v-model="item.legalpostalcodelist" placeholder="" disabled></el-input>
                         </el-form-item>
            <el-form-item label="邮政编码" prop="relationaddlist">
              <el-input class="oinput" v-model="item.relationaddlist" placeholder="" disabled></el-input>
            </el-form-item>
            <el-form-item label="住宅电话" prop="legaltelnumlist">
              <el-input class="oinput" v-model="item.legaltelnumlist" placeholder="" disabled></el-input>
            </el-form-item>
            <el-form-item label="经济情况" prop="legaleconomicslist">
              <el-input class="oinput" v-model="item.legaleconomicslist" placeholder="" disabled></el-input>
            </el-form-item>
 </div>
</el-form>
</ul>
</el-dialog>

<script>
    export default {
        props: [ 'seeDataVal'],
        data() {
            return {
                tableData: {},
                                familyMembers: {},
                                diaVisible: false,
                innerVisible: false,
            }
        },
        methods: {
            show() {
                this.innerVisible = true;
                this.$request.post('/zzHoseholePopulationSanglaotekun/findForEdit', {
                        id: this.seeDataVal.id,
                    },
                    res => {
                        this.tableData = res.data;
                                                this.familyMembers = JSON.parse(res.data.familyMembers)
                    }

                );
            }

        },
    }
</script>

编辑.jpg

<template>
  <div class="pad10">
    <el-form
      :inline="true"
      label-position="top"
      label-width="80px"
      ref="requestUrl"
      :rules="rules"
      :model="formdata"
    >    
      <div v-for="(item, index) in familyMembers" :key="index">
        <p class="dialogTitle">
          <i class="el-icon-star-on"></i>老人家庭成员基本信息
        </p>
        <el-form-item label="与本人关系" prop="legalClasslist">
          <el-select v-model="item.legalClasslist" placeholder="请选择">
            <el-option
              v-for="item in relationClass"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="legalNamelist">
          <el-input class="oinput" v-model="item.legalNamelist" placeholder></el-input>
        </el-form-item>
        <el-form-item label="出生年月" prop="legalbirthdaylist">
          <el-input class="oinput" v-model="item.legalbirthdaylist" placeholder></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="legalidcardlist">
          <el-input class="oinput" v-model="item.legalidcardlist" placeholder></el-input>
        </el-form-item>
        <el-form-item label="家庭住址" prop="legaladdlist">
          <el-input class="oinput" v-model="item.legaladdlist" placeholder></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="legaltellist">
          <el-input class="oinput" v-model="item.legaltellist" placeholder type="number"></el-input>
        </el-form-item>
        <el-form-item label="邮政编码" prop="legalpostalcodelist">
          <el-input class="oinput" v-model="item.legalpostalcodelist" placeholder type="number"></el-input>
        </el-form-item>
        <el-form-item label="住宅电话" prop="legaltelnumlist">
          <el-input class="oinput" v-model="item.legaltelnumlist" placeholder type="number"></el-input>
        </el-form-item>
        <el-form-item label="经济状况" prop="legaleconomicslist">
          <el-input class="oinput" v-model="item.legaleconomicslist" placeholder></el-input>
        </el-form-item>
      </div>
      <div style="margin:20px auto;text-align:center;">
        <el-form-item size="large">
          <el-button type="primary" @click="submit('requestUrl')">提交</el-button>
          <el-button @click="reset('requestUrl')">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  props: ["requestUrl"],
  data() {
    var checkID = (rule, value, callback) => {
      if (!this.GLOBAL.check.idCard(value)) {
        return callback(new Error("身份证号码填写错误"));
      }
      callback();
    };
    var checkPhone = (rule, value, callback) => {
      if (!this.GLOBAL.check.phone(value)) {
        return callback(new Error("请输入正确的手机号码"));
      }
      callback();
    };
    return {
      relationClass: [
        {
          value: "父亲",
          label: "父亲"
        },
        {
          value: "妻子",
          label: "妻子"
        },
        {
          value: "丈夫",
          label: "丈夫"
        },
        {
          value: "儿子",
          label: "儿子"
        },
        {
          value: "女儿",
          label: "女儿"
        },
        {
          value: "母亲",
          label: "母亲"
        },
        {
          value: "爷爷",
          label: "爷爷"
        },
        {
          value: "奶奶",
          label: "奶奶"
        },
        {
          value: "兄",
          label: "兄"
        },
        {
          value: "弟",
          label: "弟"
        },
        {
          value: "姐",
          label: "姐"
        },
        {
          value: "妹",
          label: "妹"
        }
      ],
      medicalHistory: [],
      cities: cityOptions,
      familyMembers: [],
      formdata: {}
    };
  },
  watch: {
    requestUrl(newValue, oldValue) {
      this.formdata = newValue;
      this.familyMembers = JSON.parse(newValue.familyMembers);
    }
  },
  mounted() {
    this.familyMembers = JSON.parse(this.requestUrl.familyMembers);
    this.formdata = this.requestUrl;
  },
  methods: {
    submit(formName) {
      var _this = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.postData();
        } else {
          this.$message.error("请完善必填信息");
          return;
        }
      });
    },
    postData() {
      var postObj = {};
      for (var key in this.requestUrl) {
        if (this.requestUrl[key]) {
          postObj[key] = this.requestUrl[key];
        }
      }
      postObj.familyMembers = JSON.stringify(this.familyMembers);
      var _this = this;
      this.$request.post(
        "zzHoseholePopulationSanglaotekun/update",
        { ...postObj },
        function(res) {
          if (res.result === "1") {
            _this.$message("操作成功");
            _this.$emit("success");
          } else {
            _this.$message.error(res.msg);
          }
          // _this.$message.error(res.msg)
        },
        function(res) {
          _this.$message.error("操作失败，请稍后重试");
        }
      );
    },
    reset(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>