动态删减表单

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <el-tabs v-model="form.type" @tab-click="handleClick">
        <el-tab-pane label="用户" name="0">
          <el-form v-model="aaa">
            <el-form-item style="margin:10px">
              <div v-for="item in aaa" :key="item.id">
                <el-input
                  style="width: 40%;"
                  placeholder="请输入原因"
                  v-model="item.cause"
                  clearable
                />
                <el-button
                  v-if="item.id"
                  type="primary"
                  style="margin:10px"
                  @click="sc(item.id)"
                  >删除</el-button
                >
              </div>
            </el-form-item>
            <el-form-item>
              <el-button
                style="width: 40%;"
                plain
                type="primary"
                @click="xz"
                :disabled="this.jy"
                icon="el-icon-plus"
                >增加原因</el-button
              >
            </el-form-item>
            <el-button style="width: 40%;" type="primary" @click="submit">
              提交
            </el-button>
          </el-form>
        </el-tab-pane>
        <!-- ............................. -->
        <el-tab-pane label="回收员" name="1">
          <el-form v-model="aaa">
            <el-form-item style="margin:10px">
              <div v-for="item in aaa" :key="item.id">
                <el-input
                  style="width: 40%;"
                  placeholder="请输入原因"
                  v-model="item.cause"
                  clearable
                />
                <el-button
                  v-if="item.id"
                  type="primary"
                  style="margin:10px"
                  @click="sc(item.id)"
                  >删除</el-button
                >
              </div>
            </el-form-item>
            <el-form-item>
              <el-button
                style="width: 40%;"
                plain
                type="primary"
                @click="xz"
                :disabled="this.jy"
                icon="el-icon-plus"
                >增加原因</el-button
              >
            </el-form-item>
            <el-button style="width: 40%;" type="primary" @click="submit">
              提交
            </el-button>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        type: "0"
      },
      aaa: [],
      jy: false
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
      // console.log(this.form.type);
      this.queryinfo();
    },
    // 查询信息
    queryinfo() {
      this.$http
        .get("?s=Manage.Setting_Complaint.All", {
          params: { type: this.form.type }
        })
        .then(res => {
          console.log(res.data.data.data, "投诉原因");
          if (res.data.code === 200) {
            this.aaa = res.data.data.data;
          }
        });
    },
    //删除
    sc(e) {
      this.$http
        .post("?s=Manage.Setting_Complaint.Del", { id: e })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({ type: "success", message: "成功" });
            this.queryinfo();
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    // 新增
    xz() {
      this.aaa.push({
        cause: ""
      });
      this.jy = true;
    },
    // 提交
    submit() {
      this.$http
        .post("?s=Manage.Setting_Complaint.Add", {
          type: this.form.type,
          cause: this.aaa[this.aaa.length - 1]
        })
        .then(res => {
          console.log(res, "增加");
          if (res.data.code == 200) {
            this.$message({ type: "success", message: "成功" });
            this.queryinfo();
            this.jy = false;
          } else {
            this.$message.error(res.data.msg);
          }
        });
    }
  },
  created() {
    this.queryinfo();
  }
};
</script>

<style scoped></style>