resolve_error/src/views/register/add.vue

<template>
  <basic-container>
    <div class="title_box">
      <div class="left">
        <!-- <div class="img_box"><img src="~@/assets/image/time.png" alt="" /></div> -->
        <div class="left_txt">{{ title }}</div>
      </div>
      <div class="right" @click="handleCancel">X</div>
    </div>
    <el-table
      :data="formData"
      :key="index"
      border
      style="
        margin-bottom: 30px;
        width: 100%;
        margin: 0 auto;
        border-radius: 4px;
      "
      header-cell-style="background-color:#fafafa;font-size:12px;color:black"
    >
      <el-table-column width="57px">
        <template slot="header">
          <el-button
            circle
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="addDomain()"
          />
        </template>
        <template slot-scope="scope">
          <el-button
            circle
            size="small"
            type="danger"
            icon="el-icon-delete"
            @click="removeSpecimen(scope.$index, scope.row, scope)"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="username"
        label="来访人姓名"
        width="200"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.username"
            @change="changeNumber"
            controls-position="right"
            style="width: 90%; margin-left: 5%"
            size="medium"
            placeholder="来访人姓名"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="gender" label="性别">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.gender"
            placeholder="性别"
            size="medium"
            style="width: 90%; margin-left: 5%"
          >
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="age" label="年龄">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.age"
            clearable
            placeholder="年龄"
            size="medium"
            style="width: 90%; margin-left: 5%"
          />
        </template> </el-table-column
      ><el-table-column align="center" prop="cardno" label="身份证号码">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.cardno"
            clearable
            placeholder="身份证号码"
            size="medium"
            style="width: 90%; margin-left: 5%"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="address" label="住址">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.address"
            clearable
            placeholder="住址"
            size="medium"
            style="width: 90%; margin-left: 5%"
          />
        </template> </el-table-column
      ><el-table-column align="center" prop="addressNow" label="现住址">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.addressNow"
            clearable
            placeholder="现住址"
            size="medium"
            style="width: 90%; margin-left: 5%"
          />
        </template> </el-table-column
      ><el-table-column align="center" prop="phone" label="联系人电话">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.phone"
            clearable
            placeholder="联系人电话"
            size="medium"
            style="width: 90%; margin-left: 5%"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-form
      class="form_box"
      :inline="true"
      ref="registerForm"
      :model="form"
      :rules="rules"
      label-position="top"
    >
      <el-row :model="form" :rules="rules" :gutter="20">
        <el-col style="width: 31%; margin-left: 1%">
          <div class="grid-content bg-purple">
            <el-form-item style="width: 100%">
              <figure>
                &emsp;来访人数
                <figcaption>
                  <el-input
                    v-model="form.personNum"
                    size="medium"
                    placeholder="请输入来访人数"
                    clearable
                    style="width: 90%"
                    :readonly="true"
                  />
                </figcaption>
              </figure>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6" style="width: 31%; margin-left: -2.1%">
          <el-form-item style="width: 100%" prop="streetId">
            <figure>
              <i></i>所属镇街
              <figcaption>
                <el-select
                  v-model="form.streetId"
                  :disabled="isappend"
                  :filter-method="dataFilter"
                  clearable
                  filterable
                  ref="searchSelect"
                  placeholder="请选择所属镇街"
                  size="medium"
                  style="width: 90%"
                >
                  <el-option
                    v-for="item in streetData"
                    :key="item.id"
                    :label="item.dictValue"
                    :value="item.id"
                  />
                </el-select>
              </figcaption>
            </figure>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="width: 31%; margin-left: -1.58%">
          <el-form-item prop="disputeId" style="width: 100%">
            <figure>
              <i></i>诉求类型
              <figcaption>
                <el-select
                  v-model="form.disputeId"
                  :disabled="isappend"
                  :filter-method="dataFilter"
                  clearable
                  filterable
                  allow-create
                  ref="searchSelect"
                  placeholder="请选择诉求类型"
                  size="medium"
                  style="width: 90%"
                >
                  <el-option
                    v-for="item in typeData"
                    :key="item.id"
                    :label="item.dictValue"
                    :value="item.id"
                  />
                </el-select>
              </figcaption>
            </figure>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :model="form" :rules="rules" :gutter="20">
        <el-col style="width: 31%; margin-left: 1%">
          <div class="grid-content bg-purple">
            <el-form-item style="width: 100%">
              <figure>
                &emsp;何单位处理过
                <figcaption>
                  <el-select
                    v-model="form.disposeDept"
                    :disabled="isappend"
                    :filter-method="dataFilter"
                    clearable
                    filterable
                    allow-create
                    ref="searchSelect"
                    placeholder="请选择单位"
                    size="medium"
                    style="width: 90%"
                  >
                    <el-option
                      v-for="item in winData"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </figcaption>
              </figure>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6" style="width: 31%; margin-left: -2.1%">
          <el-form-item style="width: 100%">
            <figure>
              &emsp;基层有无协议书
              <figcaption>
                <el-input
                  v-model="form.protocol"
                  size="medium"
                  placeholder="请输入基层有无协议书"
                  clearable
                  style="width: 90%"
                />
              </figcaption>
            </figure>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="width: 31%; margin-left: -1.58%">
          <el-form-item style="width: 100%">
            <figure>
              &emsp;基层有无处理意见
              <figcaption>
                <el-input
                  v-model="form.opinion"
                  size="medium"
                  placeholder="请输入基层有无处理意见"
                  clearable
                  style="width: 90%"
                />
              </figcaption>
            </figure>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :model="form" :rules="rules" :gutter="20">
        <el-col style="width: 31%; margin-left: 1%">
          <div class="grid-content bg-purple">
            <el-form-item style="width: 100%">
              <figure>
                &emsp;部门有无复查意见
                <figcaption>
                  <el-input
                    v-model="form.reviewOpinion"
                    size="medium"
                    placeholder="请输入部门有无复查意见"
                    clearable
                    style="width: 90%"
                  />
                </figcaption>
              </figure>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6" style="width: 31%; margin-left: -2.1%">
          <el-form-item style="width: 100%">
            <figure>
              &emsp;有何法律文书
              <figcaption>
                <el-input
                  v-model="form.legalPaper"
                  size="medium"
                  placeholder="请输入法律文书"
                  clearable
                  style="width: 90%"
                />
              </figcaption>
            </figure>
          </el-form-item>
        </el-col>
        <el-col
          :span="6"
          style="width: 31%; margin-left: -2.1%"
          v-show="pageType == 'edit'"
        >
          <el-form-item style="width: 100%">
            <figure>
              &emsp;诉求初登时间
              <figcaption>
                <el-input
                  v-model="form.firstRegTime"
                  size="medium"
                  placeholder="请输入诉求初登时间"
                  clearable
                  style="width: 90%"
                  :readonly="true"
                />
              </figcaption>
            </figure>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :model="form" :rules="rules" :gutter="20">
        <el-col style="width: 100%; margin-left: 1%">
          <div class="grid-content bg-purple">
            <el-form-item style="width: 100%">
              <figure>
                &emsp;反应主要问题
                <figcaption>
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    v-model="form.problemDesc"
                    size="medium"
                    placeholder="请输入部门有无复查意见"
                    clearable
                    style="width: 90%"
                  />
                </figcaption>
              </figure>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-form-item class="btn_box">
        <el-button class="can_btn" @click="handleCancel">取消</el-button>
        <el-button class="sub_btn" type="primary" @click="submitForm"
          >发布</el-button
        >
      </el-form-item>
    </el-form>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
import {addRegister,getStreetList,againResolve} from "@/api/register/register"
import {getBaseList,getTypeList} from "@/api/base"
export default {
  data() {
    return {
      form: {
        personNum: "",
      },
      pageType: "",
      title: "",
      rules: {
        streetId: [
          { required: true, message: "请选择所属镇街", trigger: "change" },
        ],
        disputeId: [
          { required: true, message: "请选择诉求类型", trigger: "change" },
        ],
        
      },
      formData: [
        {
          username: "",
          gender: "",
          age: "",
          cardno: "",
          address: "",
          addressNow: "",
          phone: "",
        },
      ],
      streetData:[],
      winData:[],
      typeData:[]
    };
  },
  watch: {},
  created() {
    this.getStreet();
    this.getTypeData();
    this.getWinData()
    if (this.$route.query.type == "add") {
      this.pageType = "add";
      this.title = "诉求登记";
    } else if (this.$route.query.type == "edit") {
      this.title = "再次调解登记";
      this.pageType = "edit";
      this.getAgainDetail()
      // this.formData = [
      //   {
      //     username: "张三",
      //     gender: "1",
      //     age: 20,
      //     cardno: "3708821548488178",
      //     address: "洋河镇",
      //     addressNow: "洋河镇",
      //     phone: "13564854126",
      //   },
      //   {
      //     username: "李四",
      //     gender: "1",
      //     age: 20,
      //     cardno: "3708821548488178",
      //     address: "洋河镇",
      //     addressNow: "洋河镇",
      //     phone: "13564854126",
      //   },
      //   {
      //     username: "王二狗",
      //     gender: "1",
      //     age: 20,
      //     cardno: "3708821548488178",
      //     address: "洋河镇",
      //     addressNow: "洋河镇",
      //     phone: "13564854126",
      //   },
      //   {
      //     username: "王五",
      //     gender: "1",
      //     age: 20,
      //     cardno: "3708821548488178",
      //     address: "洋河镇",
      //     addressNow: "洋河镇",
      //     phone: "13564854126",
      //   },
      // ];
      // // this.form.number = this.formData.length
      // this.form = {
      //   number: this.formData.length,
      //   id: "122555646684684",
      //   streetId: "胶州市",
      //   disputeId: "土地纠纷",
      //   disposeDept: "市住建局",
      //   hasProtocol: "无协议书",
      //   hasOpinion: "无处理意见",
      //   hasReviewOpinion: "无复查意见",
      //   legalPaper: "无法律文书",
      //   regTime: "2012-05-15 12:30",
      //   problemDesc: "矛盾描述...........",
      // };
    }
  },
  computed: {
    ...mapGetters(["tagWel", "tagList", "tag", "website"]),
  },
  methods: {
    getStreet(){
      getStreetList().then(res =>{
        this.streetData = res.data.data
      })
    },
    getAgainDetail(){
      againResolve({appealId:this.$route.query.appealId}).then(res =>{
        console.log('再次调解',res);
        this.formData = res.data.data.visitors;
        this.form = res.data.data;
        this.form.personNum = this.formData.length
      })
    },
    getWinData(){
      getBaseList().then(res =>{
        this.winData = res.data.data
      })
    },
    getTypeData(){
      getTypeList().then(res =>{
        this.typeData = res.data.data
      })
    },
    findTag(value) {
      let tag, key;
      this.tagList.map((item, index) => {
        if (item.value === value) {
          tag = item;
          key = index;
        }
      });
      return { tag: tag, key: key };
    },
    changeNumber() {
      let tmp = this.formData.filter((item) => item.name !== "");
      this.form.personNum = tmp.length;
    },
    handleCancel() {
      let { tag, key } = this.findTag(this.$route.fullPath);
      this.$store.commit("DEL_TAG", tag);
      if (tag.value === this.tag.value) {
        tag = this.tagList[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个
        this.$router.push({
          path: "/register/index",
        });
      }
    },
    addDomain() {
      let obj = {
        username: "",
        gender: "",
        age: "",
        cardno: "",
        address: "",
        addressNow: "",
        phone: "",
      };
      let isName = this.formData.find((item) => item.username == "");
      let isSex = this.formData.find((item) => item.gender == "");
      let isAge = this.formData.find((item) => item.age == "");
      let isNumber = this.formData.find((item) => item.cardno == "");
      let isAddress = this.formData.find((item) => item.address == "");
      let isPhone = this.formData.find((item) => item.phone == "");
      if (
        this.formData.length == 0 ||
        (!isName && !isSex && !isAge && !isNumber && !isAddress && !isPhone)
      ) {
        this.formData.push(obj);
      } else {
        this.$message.error("请填写登记人员相关信息后新增人员");
      }
    },
    removeSpecimen(index, row) {
      this.formData.splice(index, 1);
      let tmp = this.formData.filter((item) => item.name !== "");
      this.form.personNum = tmp.length;
    },
    submitForm() {
      this.$refs["registerForm"].validate((valid) => {
        if(valid){
          let params = {}
            if(this.formData.length !== 0){
                let tmp = this.formData.filter(item => item.username !== '')
                if(this.pageType == 'add'){
                  params={
                    visitors:tmp,
                    ...this.form
                  }
                  console.log(params)
                  addRegister(params).then(res =>{
                    if(res.data.code == 200){
                      this.$message.success('登记成功！')
                      let { tag, key } = this.findTag(this.$route.fullPath);
                      this.$store.commit("DEL_TAG", tag);
                      if (tag.value === this.tag.value) {
                        tag = this.tagList[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个
                        this.$router.push({
                          path: "/register/index",
                        });
                      }
                    }
                  })
                }else if(this.pageType == 'edit'){
                  params={
                    ...this.form,
                    visitors:tmp,
                  }
                  addRegister(params).then(res =>{
                    if(res.data.code == 200){
                      this.$message.success('登记成功！')
                      let { tag, key } = this.findTag(this.$route.fullPath);
                      this.$store.commit("DEL_TAG", tag);
                      if (tag.value === this.tag.value) {
                        tag = this.tagList[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个
                        this.$router.push({
                          path: "/register/index",
                        });
                      }
                    }
                  })
                }
            }else{
                this.$message.error('登记人员列表不可为空')
            }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.title_box {
  width: 96%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;

  .left {
    height: 100%;
    display: flex;
    align-items: center;

    .img_box {
      width: 30px;
      height: 30px;
      margin: 0px 18px 0px 0px;
    }

    .left_txt {
      font-size: 20px;
      font-weight: 800;
      color: #333333;
    }
  }
  .right {
    cursor: pointer;
  }
}
.el-table{
  width: 96% !important;
}
/deep/ .btn_box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  margin-top: 60px;

  .can_btn {
    width: 118px;
    height: 48px;
    // background: #E2E2E2;
    // box-shadow: inset 3px 4px 5px 1px rgba(0,0,0,0.07);
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #dcdfe6;
    // border: none;
    color: #999999;
  }

  .sub_btn {
    width: 120px;
    height: 50px;
    // background: url("~@/assets/image/btn.png") no-repeat;
    // background-size: 100% 100%;
    // background: blue;
    color: #fff;
    border: none;
    margin-left: 30px;
  }
}
.form_box {
  width: 96%;
  margin: 0 auto;
  margin-top: 30px;

  i::before {
    content: "*";
    color: #f56c6c;
    margin-right: 6px;
  }
}
</style>