HS_MZAP/src/views/activityMan/differentbelievers/ReligiousPeopleReportView.vue

<template>
  <van-nav-bar
    fixed
    title="信息上报中心"
    left-text=""
    left-arrow
    @click-left="onClickLeft"
  />
  <van-loading size="16px" v-if="isLoading">加载中...</van-loading>
  <div class="main" v-if="!isLoading">
    <p class="title">信教异常群众上报</p>
    <div class="formArea">
      <p class="miniTitle">基础信息</p>
      <van-cell-group>
        <van-field
          v-model="inputForm.abnormalName"
          center
          label="异常人员:"
          placeholder="请填写异常人员姓名"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.abnormalIdcar"
          center
          label="身份证号:"
          placeholder="请填写身份证号"
          input-align="right"
          type="digit"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.abnormalPhone"
          center
          label="手机号:"
          placeholder="请填写手机号"
          input-align="right"
          type="tel"
        />
      </van-cell-group>
      <van-cell-group>
        <van-cell title="性别:">
          <template #right-icon>
            <van-radio-group v-model="inputForm.sex" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.nativePlace"
          center
          readonly
          label="籍贯:"
          placeholder="请选择"
          input-align="right"
          right-icon="arrow-down"
          @click="showArea = true"
        />
        <van-popup v-model:show="showArea" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择籍贯"
            :options="options"
            @close="showArea = false"
            @finish="onFinish"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.currentResidence"
          center
          readonly
          label="现居地:"
          placeholder="请选择"
          input-align="right"
          right-icon="arrow-down"
          @click="showArea = true"
        />
        <van-popup v-model:show="showArea" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择现居地"
            :options="options"
            @close="showArea = false"
            @finish="onFinish"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.currentResidenceDetail"
          center
          label="现居地详情:"
          placeholder="请填写现居地详情"
          input-align="right"
          right-icon="location"
        />
      </van-cell-group>
      <van-cell-group>
        <div class="rowTextArea">
          <van-field
            v-model="inputForm.abnormalBehavior"
            placeholder="请填写异常行为"
            center
            rows="2"
            type="textarea"
            label="异常行为:"
            label-align="top"
          />
        </div>
      </van-cell-group>
    </div>
    <div class="subbtn">
      <van-button type="primary" @click="submit">提交</van-button>
      <van-button type="default" hairline>取消</van-button>
    </div>
  </div>
</template>
    
    <script>
import { ref, onMounted } from "vue";
import { useCascaderAreaData } from "@vant/area-data";
import ReligiousPeopleReportService from "@/api/differentbelievers/ReligiousPeopleReportService";
import { useRoute } from "vue-router";
export default {
  setup() {
    // 返回
    const onClickLeft = () => {
      history.back();
    };
    // 加载
    let isLoading = ref(true);
    // 异常人员信息
    const inputForm = ref({
      id: "",
      abnormalName: "",
      abnormalIdcar: "",
      sex: "",
      abnormalPhone: "",
      nativePlace: "",
      currentResidence: "",
      currentResidenceDetail: "",
      abnormalBehavior: "",
      state: "0",
      assessment: "0",
      currentResidenceId: "",
      currentResidenceLevel1: "",
      currentResidenceLevel2: "",
      currentResidenceLevel3: "",
      currentResidenceLevel4: "",
      currentResidenceLevel5: "",
      currentResidenceLevel6: "",
    });
    // 根据路由初始化
    let route = useRoute();
    onMounted(() => {
      if (route.query.id) {
        new ReligiousPeopleReportService()
          .queryById(route.query.id)
          .then((data) => {
            inputForm.value = data;
            isLoading.value = false;
          });
      } else {
        isLoading.value = false;
      }
    });
    // 地区选择
    let showArea = ref(false);
    const cascaderValue = ref("");
    // 选项列表，children 代表子选项，支持多级嵌套
    const options = useCascaderAreaData();
    // 全部选项选择完毕后，会触发 finish 事件
    const onFinish = ({ selectedOptions }) => {
      showArea.value = false;
      inputForm.value.currentResidence = selectedOptions
        .map((option) => option.text)
        .join("/");
    };
    // 提交数据
    const submit = () => {
      isLoading.value = true;
      new ReligiousPeopleReportService().save(inputForm.value).then((res) => {
        console.log("提交", res);
        onClickLeft();
        isLoading.value = false;
      });
    };
    return {
      inputForm,
      // 返回
      onClickLeft,
      // 地区选择
      showArea,
      options,
      onFinish,
      cascaderValue,
      isLoading,
      submit,
    };
  },
};
</script>
    
    <style scoped>
* {
  margin: 0;
  padding: 0;
}
.main {
  background: #fff;
  position: relative;
  top: 40px;
}
.title,
.miniTitle {
  height: 40px;
  line-height: 40px;
  color: #36a7f3;
  border-bottom: 1px solid #eee;
}
.title {
  font-size: 20px;
  font-weight: 700;
  padding-left: 20px;
}
.miniTitle {
  font-size: 16px;
}
.formArea {
  padding: 0px 20px;
}
.formArea .van-cell-group .van-field__label {
  height: 40px;
}
.formArea .van-cell-group .van-cell {
  line-height: 40px;
}
.van-cell__value .van-field__right-icon .van-icon-location {
  color: #36a7f3 !important;
}
.rowTextArea::v-deep .van-field__value {
  width: 98%;
  border: 2px solid #ccc;
  border-radius: 10px;
}
.rowTextArea::v-deep .van-cell {
  display: flow-root;
}
.subbtn {
  margin: 20px;
  text-align: center;
}
.subbtn .van-button {
  width: 40%;
  margin: 5px;
}
.van-uploader .van-button {
  border: none;
  color: #36a7f3;
  top: -4px;
}
.van-radio {
  margin-right: 10px;
}
.van-loading {
  text-align: center;
  margin-top: 80px;
}
</style>