iview form动态添加删除验证及保存

 

 

<template>
  <div class="beonduty-wrap">
    <p>当前模块的信息，是呈现在指挥调度的，用以呈现指挥调度的工作人员</p>
    <div class="beonduty-c">
      <span>工作人员:</span>
      <div class="beonduty-c-form">
        <Form ref="ruleForm" :model="formData" :label-width="20" :rules="rules">
          <div
            class="inputStyle"
            v-for="(item, index) in formData.personnelForm"
            :key="item + index"
          >
            <div style="display: flex; align-items: center">
              <FormItem
                :prop="'personnelForm.' + index + '.name'"
                :rules="rules.name"
              >
                <Input
                  v-model="item.name"
                  placeholder="姓名"
                  @on-change="inputChanges($event, item)"
                />
              </FormItem>
              <FormItem
                :prop="'personnelForm.' + index + '.position'"
                :rules="rules.position"
              >
                <Input
                  v-model="item.position"
                  placeholder="岗位名称"
                  @on-change="inputChanges($event, item)"
                />
              </FormItem>
              <FormItem
                :prop="'personnelForm.' + index + '.phone'"
                :rules="rules.phone"
              >
                <Input
                  v-model="item.phone"
                  placeholder="手机号码"
                  @on-change="inputChanges($event, item)"
                />
              </FormItem>
              <FormItem>
                <Icon
                  @click="handleRemove(index, item)"
                  style="cursor: pointer"
                  size="24"
                  type="ios-remove-circle-outline"
                />
              </FormItem>
            </div>
          </div>
        </Form>
        <div @click="handleAdd" class="btnAdd">+ 添加</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  dutyPeopleList,
  dutyPeopleSave,
  dutyPeopleDelete,
} from "@/api/dutyPeople.js";

export default {
  components: {},
  data() {
    // 手机号验证
    const checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
      if (!value) {
        return callback(new Error("手机号码不能为空"));
      }
      setTimeout(() => {
        if (phoneReg.test(value)) {
          callback();
        } else {
          callback(new Error("手机号码格式不正确"));
        }
      }, 100);
    };
    //验证邮箱
    const checkMailbox = (rule, value, callback) => {
      const mailReg = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback();
        } else {
          callback(new Error("邮箱格式不正确"));
        }
      }, 100);
    };
    return {
      formData: {
        personnelForm: [
          {
            id: "",
            name: "",
            position: "",
            phone: "",
          },
        ],
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        position: [
          { required: true, message: "请输入岗位名称", trigger: "blur" },
        ],
        phone: [{ required: true, validator: checkPhone, trigger: "blur" }],
      },
    };
  },
  mounted() {},
  created() {
    this._dutyPeopleList();
  },
  methods: {
    // handleSubmit(name) {
    //   this.$refs[name].validate((valid) => {
    //     if (valid) {
    //       this.$Message.success("提交成功!");
    //     } else {
    //       this.$Message.error("表单验证失败!");
    //     }
    //   });
    // },
    // handleReset(name) {
    //   this.$refs[name].resetFields();
    // },
    //列表
    _dutyPeopleList() {
      dutyPeopleList({}).then((res) => {
        console.log(res, 1111);
        if (res.data.code == "00000") {
          this.formData.personnelForm = res.data.data;
        }
      });
    },
    inputChanges(e, item) {
      console.log("val", e, item);
      this._dutyPeopleSave(item);
    },
    _dutyPeopleSave(itemdata) {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          dutyPeopleSave(itemdata).then((res) => {
            if (res.data.code == "00000") {
              this.$Message.success({
                duration: 3,
                closable: true,
                background: true,
                content: "保存成功",
              });
            }
          });
        }
      });
    },
    handleAdd() {
      // if (this.formData.personnelForm.length >= 30) {
      //   return this.$Message.warning("最多添加30条人员信息");
      // } else {
      //   this.formData.personnelForm.push({
      //     id: "",
      //     name: "",
      //     position: "",
      //     phone: "",
      //   });
      // }
      this.formData.personnelForm.push({
        id: "",
        name: "",
        position: "",
        phone: "",
      });
    },
    handleRemove(index, item) {
      // this.formData.personnelForm.splice(index, 1);
      console.log(index, item);
      if (item.id) {
        this.$Modal.confirm({
          title: "删除",
          content: "<p>是否确认删除</p>",
          onOk: () => {
            // this.$Message.info("点击了确定");
            dutyPeopleDelete(item.id).then((res) => {
              if (res.data.code == "00000") {
                this.$Message.success({
                  duration: 3,
                  closable: true,
                  background: true,
                  content: "删除成功",
                });
                this._dutyPeopleList();
              }
            });
          },
          onCancel: () => {
            // this.$Message.info("点击了取消");
          },
        });
      } else {
        this.formData.personnelForm.splice(index, 1);
      }
    },
    // limitLength(e, index_) {
    //   console.log(123, e, index_);
    //   const input = e.target;
    //   const value = input.value;
    //   const split = value.split("");
    //   const map = split.map((s, i) => {
    //     return value.charCodeAt(i) >= 0 && value.charCodeAt(i) <= 128 ? 1 : 2;
    //   });
    //   let n = 0;
    //   const charLength =
    //     map.length > 0 &&
    //     map.reduce((accumulator, currentValue, index) => {
    //       const count = accumulator + currentValue;
    //       if (count === 9 || count === 10) {
    //         n = index;
    //       }
    //       if (count > 10) {
    //         this.formData.personnelForm[index_].name = split
    //           .slice(0, n + 1)
    //           .join("");
    //       }
    //       return count;
    //     });
    // },
  },
};
</script>

<style lang="less" scoped>
.beonduty-wrap {
  p {
    height: 40px;
    line-height: 40px;
    margin: 0 20px 20px 20px;
    color: #ccc;
    border-bottom: 1px solid #ccc;
  }
  .beonduty-c {
    display: flex;
    .beonduty-c-form {
    }
    .btnAdd {
      border: 1px dashed #aaa;
      width: 100%;
      height: 32px;
      line-height: 32px;
      text-align: center;
      cursor: pointer;
      margin-top: 20px;
    }
  }
}
</style>