HS_MZAP/src/views/placeManage/placePerson/placePersonAdd.vue

<template>
  <van-nav-bar
    fixed
    title="人员信息录入"
    left-arrow
    @click-left="onClickLeft"
    :style="{ 'background-color': selectColor }"
  />
  <div class="main">
    <div class="formArea">
      <van-cell-group>
        <van-field
          v-model="idTypeName"
          readonly
          required
          label="证件类型:"
          name="validator"
          placeholder="请选择证件类型"
          input-align="right"
          right-icon="arrow-down"
          @click="showPicker = true"
          :rules="[{ validator, message: '证件类型不能为空' }]"
        />
        <van-popup v-model:show="showPicker" round position="bottom">
          <van-picker
            title="证件类型"
            :columns="places"
            @cancel="showPicker = false"
            @confirm="getPlace"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.idcard"
          center
          required
          label="证件号码:"
          placeholder="请填写证件号码"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.name"
          center
          required
          label="姓名："
          placeholder="请填写姓名"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field name="uploader" label-align="top" label="工作照片:">
          <template #input>
            <van-uploader
              v-model="fileList"
              :after-read="afterRead1"
              :max-count="6"
              capture="camera"
              accept=""
              :before-delete="fjdelete"
            >
            </van-uploader>
          </template>
        </van-field>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.beforeUsedName"
          center
          label="曾用名："
          placeholder="请填写曾用名"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="nationName"
          readonly
          label="民族："
          placeholder="请选择民族"
          input-align="right"
          right-icon="arrow-down"
          @click="hs_nation = true"
        />
        <van-popup v-model:show="hs_nation" round position="bottom">
          <van-picker
            title="民族类型"
            :columns="nation"
            @cancel="hs_nation = false"
            @confirm="getnation"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="sexName"
          readonly
          required
          label="性别："
          placeholder="请选择选择"
          input-align="right"
          right-icon="arrow-down"
          @click="hs_sex = true"
        />
        <van-popup v-model:show="hs_sex" round position="bottom">
          <van-picker
            title="选择"
            :columns="sex"
            @cancel="hs_sex = false"
            @confirm="getsex"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.phone"
          center
          label="手机号："
          placeholder="请填写手机号"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.nativePlace"
          readonly
          label="籍贯："
          placeholder="请选择籍贯地区"
          input-align="right"
          right-icon="arrow-down"
          @click="hs_nativePlace = true"
        />
        <van-popup v-model:show="hs_nativePlace" round position="bottom">
          <van-picker
            title="籍贯"
            :columns="nativePlace"
            :columns-field-names="customFieldName"
            @cancel="hs_nativePlace = false"
            @confirm="getnativePlace"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="educationName"
          readonly
          label="教育程度"
          placeholder="请选择教育程度"
          input-align="right"
          right-icon="arrow-down"
          @click="hs_education = true"
        />
        <van-popup v-model:show="hs_education" round position="bottom">
          <van-picker
            title="教育程度"
            :columns="education"
            @cancel="hs_education = false"
            @confirm="geteducation"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.graduatedFrom"
          center
          label="毕业院校："
          placeholder="请填写毕业院校"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="religiousName"
          readonly
          label="教别:"
          name="validator"
          placeholder="请选择教别"
          input-align="right"
          right-icon="arrow-down"
          @click="hs_religious = true"
        />
        <van-popup v-model:show="hs_religious" round position="bottom">
          <van-picker
            title="教别"
            :columns="religious"
            @cancel="hs_religious = false"
            @confirm="getreligious"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.religiousAppellation"
          center
          label="宗教称谓："
          placeholder="请填写宗教称谓"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="locationName"
          readonly
          label="所属场所："
          placeholder="请选择所属场所"
          input-align="right"
          right-icon="arrow-down"
          @click="hs_site = true"
        >
        </van-field>
        <van-dialog v-model:show="hs_site" title="所属场所" show-cancel-button>
          <div class="dialog">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <van-radio-group v-model="checked">
                <van-cell-group inset>
                  <van-cell
                    v-for="item in sitelist"
                    :key="item"
                    :title="item.name"
                    clickable
                    @click="getsite(item)"
                  >
                    <template #right-icon>
                      <van-radio :name="item.id" @click="getsite(item)"/>
                    </template>
                  </van-cell>
                </van-cell-group>
              </van-radio-group>
            </van-list>
          </div>
        </van-dialog>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="typeOfEmployeesName"
          readonly
          label-width="7.2em"
          label="场所任职情况："
          placeholder="请选择场所任职情况"
          input-align="right"
          right-icon="arrow-down"
          @click="hs_typeOfEmployees = true"
        />
        <van-popup v-model:show="hs_typeOfEmployees" round position="bottom">
          <van-picker
            title="任职情况"
            :columns="typeOfEmployees"
            @cancel="hs_typeOfEmployees = false"
            @confirm="gettypeOfEmployees"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.currentResidence"
          center
          required
          readonly
          label="现居地："
          placeholder="请填写现居地"
          input-align="right"
          right-icon="arrow-down"
          @click="showPlace1 = true"
        />
        <van-popup v-model:show="showPlace1" round position="bottom">
          <van-picker
            title="现居地选择"
            :columns="options"
            :columns-field-names="customFieldName"
            @cancel="showPlace1 = false"
            @confirm="getPlace1"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.place"
          center
          label="详细地址："
          placeholder="请填写详细场所"
          input-align="right"
        >
          <template #right-icon>
            <van-icon name="location" @click="getLocation()" />
          </template>
        </van-field>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="personnalType"
          readonly
          required
          label="人员类型："
          placeholder="请选择人员类型"
          input-align="right"
          right-icon="arrow-down"
          @click="hs_persontype = true"
        />
        <van-dialog
          v-model:show="hs_persontype"
          title="人员类型"
          show-cancel-button
        >
          <div class="dialog">
            <van-list>
              <van-checkbox-group v-model="checked2">
                <van-cell-group inset>
                  <van-cell
                    v-for="(item, index) in persontype"
                    clickable
                    :key="item"
                    :title="`${item.text}`"
                    @click="toggle(index)"
                  >
                    <template #right-icon>
                      <van-checkbox
                        :name="item.value"
                        :ref="(el) => (checkboxRefs[index] = el)"
                        @click.stop
                      />
                    </template>
                  </van-cell>
                </van-cell-group>
              </van-checkbox-group>
            </van-list>
          </div>
        </van-dialog>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="tissueName"
          readonly
          label="宗教组织:"
          placeholder="请选择宗教组织"
          input-align="right"
          right-icon="arrow-down"
          @click="hs_tissue = true"
        />
        <van-dialog
          v-model:show="hs_tissue"
          title="所属场所"
          show-cancel-button
        >
          <div class="dialog">
            <van-list
              v-model:loading="loading1"
              :finished="finished1"
              finished-text="没有更多了"
              @load="onLoad1"
            >
              <van-radio-group v-model="checked1">
                <van-cell-group inset>
                  <van-cell
                    v-for="item in tissuelist"
                    :key="item"
                    :title="item.organizationName"
                    clickable
                    @click="gettissue(item)"
                  >
                    <template #right-icon>
                      <van-radio :name="item.id" />
                    </template>
                  </van-cell>
                </van-cell-group>
              </van-radio-group>
            </van-list>
          </div>
        </van-dialog>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.zjzzJob"
          center
          label-width="6.5em"
          label="团体任职情况:"
          placeholder="请填写团体任职情况"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="activitytext"
          readonly
          required
          label-width="7em"
          label="非法活动参加:"
          placeholder="请选择是否参加非法活动"
          input-align="right"
          right-icon="arrow-down"
          @click="hs_activity = true"
        />
        <van-popup v-model:show="hs_activity" round position="bottom">
          <van-picker
            title="选择是否参加"
            :columns="activity"
            @cancel="hs_activity = false"
            @confirm="getactivity"
          />
        </van-popup>
      </van-cell-group>
      <p class="miniTitle">扩展信息</p>
      <van-cell-group
        v-if="
          showZW.includes('15') &&
          showZW.includes('17') &&
          showZW.includes('18') &&
          showZW.includes('19') &&
          showZW.includes('21') &&
          showZW.includes('22')
        "
      >
        <van-field
          v-model="job"
          center
          label="职务:"
          placeholder="请填写职务"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group v-if="showZW.includes('3')">
        <van-field
          v-model="teachPosition"
          readonly
          label="教职身份:"
          name="validator"
          placeholder="请选择教职身份"
          input-align="right"
          right-icon="arrow-down"
          @click="hs_teach = true"
        />
        <van-popup v-model:show="hs_teach" round position="bottom">
          <van-picker
            title="教职身份"
            :columns="teach"
            @cancel="hs_teach = false"
            @confirm="getteach"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group v-if="showZW.includes('3')">
        <van-field
          v-model="Religiouseducation"
          readonly
          label-width="6.5em"
          label="宗教教育程度:"
          name="validator"
          placeholder="请选择宗教教育程度"
          input-align="right"
          right-icon="arrow-down"
          @click="hs_Reducation = true"
        />
        <van-popup v-model:show="hs_Reducation" round position="bottom">
          <van-picker
            title="宗教教育程度"
            :columns="Reducation"
            @cancel="hs_Reducation = false"
            @confirm="getReducation"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group v-if="showZW.includes('3')">
        <van-field
          v-model="finishschoolName"
          center
          label-width="6.5em"
          label="宗教毕业院校:"
          placeholder="请填写宗教毕业院校"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group v-if="showZW.includes('3')">
        <van-field
          v-model="certificateNumber"
          center
          label-width="6.5em"
          label="教职证书号:"
          placeholder="请填写教职证书号"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group v-if="showZW.includes('3')">
        <van-field
          v-model="issueDate"
          center
          label-width="6.5em"
          label="证书颁发时间:"
          placeholder="请填写证书颁发时间"
          input-align="right"
          @click="hs_issueDate = true"
        />
        <van-popup v-model:show="hs_issueDate" round position="bottom">
          <van-date-picker
            v-model="currentDate"
            title="选择日期"
            :min-date="minDate"
            :max-date="maxDate"
            @cancel="hs_issueDate = false"
            @confirm="getissueDate"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group v-if="showZW.includes('3')">
        <van-field
          v-model="certificateUnit"
          center
          label-width="6.5em"
          label="证书颁发单位:"
          placeholder="请填写证书颁发单位"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group v-if="showZW.includes('3')">
        <van-field
          v-model="recordDate"
          center
          label="备案时间:"
          placeholder="请填写备案时间"
          input-align="right"
          @click="hs_recordDate = true"
        />
        <van-popup v-model:show="hs_recordDate" round position="bottom">
          <van-date-picker
            v-model="currentDate"
            title="选择日期"
            :min-date="minDate"
            :max-date="maxDate"
            @cancel="hs_recordDate = false"
            @confirm="getrecordDate"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group v-if="showZW.includes('3')">
        <van-field
          v-model="authorityName"
          center
          label-width="6.5em"
          label="备案机关名称:"
          placeholder="请填写备案机关名称"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group v-if="showZW.includes('3')">
        <van-field
          v-model="schoolName"
          center
          label-width="6.5em"
          label="宗教院校名称:"
          placeholder="请填写宗教院校名称"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group v-if="showZW.includes('3')">
        <van-field
          v-model="takeoffice"
          center
          label-width="6.5em"
          label="院校任职情况:"
          placeholder="请填写院校任职情况"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group v-if="showZW.includes('16')">
        <van-field
          v-model="operateName"
          center
          label-width="6.5em"
          label="网络运营类型:"
          placeholder="请填写网络运营类型"
          input-align="right"
          @click="hs_operate = true"
        />
        <van-popup v-model:show="hs_operate" round position="bottom">
          <van-picker
            title="网络运营类型"
            :columns="operate"
            @cancel="hs_operate = false"
            @confirm="getoperate"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group v-if="showZW.includes('18')">
        <van-field
          v-model="journalistName"
          center
          label-width="6.5em"
          label="记者类型:"
          placeholder="请填写记者类型"
          input-align="right"
          @click="hs_journalist = true"
        />
        <van-popup v-model:show="hs_journalist" round position="bottom">
          <van-picker
            title="记者类型"
            :columns="journalistn"
            @cancel="hs_journalist = false"
            @confirm="getjournalist"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group v-if="showZW.includes('6') && showZW.includes('19')">
        <van-field
          v-model="overseas"
          center
          label-width="6.5em"
          label="境外来源地:"
          placeholder="请填写境外来源地"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group
        v-if="
          showZW.includes('20') &&
          showZW.includes('21') &&
          showZW.includes('22')
        "
      >
        <van-field
          v-model="faction"
          center
          label-width="6.5em"
          label="派别:"
          placeholder="请填写派别"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group v-if="showZW.includes('7')">
        <van-field
          v-model="cityOutaddress"
          center
          label-width="6.5em"
          label="市外来源地:"
          placeholder="请填写市外来源地"
          input-align="right"
        />
      </van-cell-group>
      <!-- 教别2 -->
      <van-cell-group v-if="showZW.includes('8')">
        <van-field
          v-model="religiousName2"
          readonly
          label="教别:"
          name="validator"
          placeholder="请选择教别"
          input-align="right"
          right-icon="arrow-down"
          @click="hs_religious2 = true"
        />
        <van-popup v-model:show="hs_religious2" round position="bottom">
          <van-picker
            title="教别"
            :columns="religious2"
            @cancel="hs_religious2 = false"
            @confirm="getreligious2"
          />
        </van-popup>
      </van-cell-group>
    </div>
    <div class="subbtn">
      <van-button type="primary" @click="submit">提交</van-button>
      <van-button @click="onClickLeft" type="default" hairline>取消</van-button>
    </div>
  </div>
</template>

<script>
import { onBeforeUpdate, onMounted, ref } from "vue";
import placePerson from "@/api/placePerson/placePerson";
import PlaceRegister from "@/api/placeRegister/placeRegister";
import { useRouter } from "vue-router";
import tools from "@/api/sys/tools";
export default {
  setup() {
    const onClickLeft = () => {
      history.back();
    };
    // 导航栏颜色
    const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
    //人员添加
    const inputForm = ref({
      id: "",
      userManagenmetDetailsDTOList: [],
      name: "",
      sex: "",
      idType: "",
      idcard: "",
      phone: "",
      location: {
        id: "",
      },
      typeOfEmployees: "",
      workPicture: "",
      nativePlace: "",
      currentResidence: "",
      currentResidenceDetail: "",
      personnelType: "",
      currentResidenceId: "100000/320000/320900",
      currentResidenceLevel1: "100000",
      currentResidenceLevel2: "320000",
      currentResidenceLevel3: "320900",
      currentResidenceLevel4: "",
      currentResidenceLevel5: "",
      currentResidenceLevel6: "",
      beforeUsedName: "",
      nation: "",
      religion: "",
      religiousAppellation: "",
      nationalEducationLevel: "",
      graduatedFrom: "",
      zjzzJob: "",
      zjzz: {
        id: "",
      },
      bkcheck: "",
    });
    // 职务
    const job = ref("");
    //教职身份
    const teachType = ref("");
    //宗教教育程度
    const religiousType = ref("");
    // 宗教毕业院校
    const religiousScool = ref("");
    //教职证书号
    const certificateNumber = ref("");
    //证书颁发单位
    const certificateUnit = ref("");
    //备案机关名称
    const authorityName = ref("");
    // 宗教毕业院校
    const finishschoolName = ref("");
    //宗教院校名称
    const schoolName = ref("");
    //院校任职情况
    const takeoffice = ref("");
    //境外来源地
    const overseas = ref("");
    //派别
    const faction = ref("");
    //市外来源地
    const cityOutaddress = ref("");
    const locationName = ref("");
    onMounted(() => {
      //籍贯接口
      new placePerson().nativePlace().then((res) => {
        nativePlace.value.push(...res);
        options.value.push(...res);
      });
    });
    // 证件类型
    const places = [
      { text: "身份证", value: " 1" },
      { text: "护照", value: "2" },
      { text: "港澳通行证", value: "3" },
      { text: "其他", value: "4" },
    ];
    const idTypeName = ref("");
    let showPicker = ref(false);
    const getPlace = ({ selectedOptions }) => {
      showPicker.value = false;
      const json = Object.assign(inputForm.value, {
        idType: selectedOptions[0].value,
      });
      inputForm.value = json;
      idTypeName.value = selectedOptions[0].text;
    };
    // 民族
    const nationName = ref("");
    const nation = [
      { text: "汉族", value: " 1" },
      { text: "阿昌族", value: "2" },
      { text: "白族", value: "3" },
      { text: "保安族", value: "4" },
      { text: "布朗族", value: "5" },
      { text: "布依族", value: " 6" },
      { text: "朝鲜族", value: "7" },
      { text: "达斡尔族", value: "8" },
      { text: "傣族", value: "9" },
      { text: "德昂族", value: "10" },
      { text: "东乡族", value: " 11" },
      { text: "侗族", value: "12" },
      { text: "独龙族", value: "13" },
      { text: "俄罗斯族", value: "14" },
      { text: "鄂伦春族", value: "15" },
      { text: "鄂温克族", value: " 16" },
      { text: "高山族", value: "17" },
      { text: "仡佬族", value: "18" },
      { text: "哈尼族", value: "19" },
      { text: "哈萨克族", value: "20" },
      { text: "赫哲族", value: " 21" },
      { text: "回族", value: "22" },
      { text: "基诺族", value: "23" },
      { text: "京族", value: "24" },
      { text: "景颇族", value: "25" },
      { text: "柯尔克孜族", value: " 26" },
      { text: "拉祜族", value: "27" },
      { text: "黎族", value: "28" },
      { text: "傈僳族", value: "29" },
      { text: "珞巴族", value: "30" },
      { text: "满族", value: " 31" },
      { text: "毛南族", value: "32" },
      { text: "门巴族", value: "33" },
      { text: "蒙古族", value: "34" },
      { text: "苗族", value: "35" },
      { text: "仫佬族", value: " 36" },
      { text: "纳西族", value: "37" },
      { text: "怒族", value: "38" },
      { text: "普米族", value: "39" },
      { text: "羌族", value: "40" },
      { text: "撒拉族", value: " 41" },
      { text: "畲族", value: "42" },
      { text: "水族", value: "43" },
      { text: "塔吉克族", value: "44" },
      { text: "塔塔尔族", value: "45" },
      { text: "土家族", value: " 46" },
      { text: "土族", value: "47" },
      { text: "佤族", value: "48" },
      { text: "维吾尔族", value: "49" },
      { text: "乌孜别克族", value: "50" },
      { text: "锡伯族", value: " 51" },
      { text: "瑶族", value: "52" },
      { text: "彝族", value: "53" },
      { text: "裕固族", value: "54" },
      { text: "藏族", value: "55" },
      { text: "壮族", value: "56" },
      { text: "其他", value: "57" },
    ]
    let hs_nation = ref(false);
    const getnation = ({ selectedOptions }) => {
      hs_nation.value = false;
      const json = Object.assign(inputForm.value, {
        nation: selectedOptions[0].value,
      });
      inputForm.value = json;
      nationName.value = selectedOptions[0].text;
    };
    // 性别
    const sexName = ref("");
    const sex = [
      { text: "男", value: "1" },
      { text: "女", value: "2" },
    ];
    let hs_sex = ref(false);
    const getsex = ({ selectedOptions }) => {
      hs_sex.value = false;
      const json = Object.assign(inputForm.value, {
        sex: selectedOptions[0].value,
      });
      inputForm.value = json;
      sexName.value = selectedOptions[0].text;
    };
    // 教育程度
    const educationName = ref("");
    const education = [
      { text: "小学", value: "1" },
      { text: "初中", value: "2" },
      { text: "中专", value: "3" },
      { text: "高中", value: "4" },
      { text: "大专", value: "5" },
      { text: "本科", value: "6" },
      { text: "硕士研究生", value: "7" },
      { text: "博士研究生", value: "8" },
      { text: "其他", value: "9" },
    ];
    let hs_education = ref(false);
    const geteducation = ({ selectedOptions }) => {
      hs_education.value = false;
      const json = Object.assign(inputForm.value, {
        nationalEducationLevel: selectedOptions[0].value,
      });
      inputForm.value = json;
      educationName.value = selectedOptions[0].text;
    };
    // 宗教类别
    const religiousName = ref("");
    const religious = [
      { text: "伊斯兰教", value: "1" },
      { text: "基督教", value: "2" },
      { text: "天主教", value: "3" },
      { text: "佛教", value: "4" },
      { text: "道教", value: "5" },
    ];
    let hs_religious = ref(false);
    const getreligious = ({ selectedOptions }) => {
      hs_religious.value = false;
      const json = Object.assign(inputForm.value, {
        religion: selectedOptions[0].value,
      });
      inputForm.value = json;
      religiousName.value = selectedOptions[0].text;
    };
    // 宗教类别2
    const religiousName2 = ref("");
    const religioustype2 = ref("");
    const religious2 = [
      { text: "伊斯兰教", value: "1" },
      { text: "基督教", value: "2" },
      { text: "天主教", value: "3" },
      { text: "佛教", value: "4" },
      { text: "道教", value: "5" },
    ];
    let hs_religious2 = ref(false);
    const getreligious2 = ({ selectedOptions }) => {
      hs_religious2.value = false;
      religioustype2.value = selectedOptions[0].value;
      religiousName2.value = selectedOptions[0].text;
    };
    // 所属场所
    const checked = ref("");
    const sitelist = ref([]);
    let hs_site = ref(false);
    const getsite = (val) => {
      console.log(val);
      let id = '';
      id = val.id;
      locationName.value = val.name;
      const json = Object.assign(inputForm.value, { location: { id: id } });
      inputForm.value = json;
      checked.value = val.id;
    };
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);
    let index = 0;
    const onLoad = () => {
      loading.value = true;
      finished.value = false;
      // 异步更新数据
      new PlaceRegister()
        .religiousList({
          current: index + 1,
          size: 10,
        })
        .then(({ records, pages }) => {
          sitelist.value = sitelist.value.concat(records);
          // 加载状态结束
          loading.value = false;
          if (index + 1 >= pages) {
            finished.value = true;
          }
          index++;
        });
    };
    // 场所任职情况
    const typeOfEmployeesName = ref("");
    const typeOfEmployees = [
      { text: "场所负责人", value: "1" },
      { text: "堂委", value: "2" },
      { text: "主要教职人员", value: "3" },
      { text: "财会", value: "4" },
      { text: "传道（已退休）", value: "5" },
      { text: "保安", value: "6" },
      { text: "信息审核员", value: "7" },
      { text: "常住", value: "8" },
      { text: "传道", value: "9" },
      { text: "道士", value: "10" },
      { text: "法人", value: "11" },
      { text: "法务", value: "12" },
      { text: "副主任", value: "13" },
      { text: "副组长", value: "14" },
      { text: "监院", value: "15" },
      { text: "清众", value: "16" },
      { text: "僧职", value: "17" },
      { text: "僧值", value: "18" },
      { text: "退居", value: "19" },
      { text: "维那", value: "20" },
      { text: "长老", value: "21" },
      { text: "知客", value: "22" },
      { text: "住持", value: "23" },
      { text: "组长", value: "24" },
      { text: "组长及讲道", value: "25" },
    ];
    let hs_typeOfEmployees = ref(false);
    const gettypeOfEmployees = ({ selectedOptions }) => {
      hs_typeOfEmployees.value = false;
      // inputForm.typeOfEmployees = selectedOptions[0].value;
      const json = Object.assign(inputForm.value, {
        typeOfEmployees: selectedOptions[0].value,
      });
      inputForm.value = json;
      typeOfEmployeesName.value = selectedOptions[0].text;
    };

    //籍贯
    const nativePlace = ref([]);
    let hs_nativePlace = ref(false);
    const getnativePlace = ({ selectedOptions }) => {
      hs_nativePlace.value = false;
      let str = "";
      selectedOptions.forEach((item) => {
        if (inputForm.nativePlace) {
          str = inputForm.nativePlace;
        }
        str += item.name + "/";
      });
      inputForm.nativePlace = str;
      const json = Object.assign(inputForm.value, { nativePlace: str });
      inputForm.value = json;
    };
    //图片上传
    let fileList = ref([]);
    let fileImg = ref([]);
    let workpic = ref("");
    const afterRead1 = (file) => {
      new tools()
        .uploadFile(file, `sys/file/webupload/upload`)
        .then(({ data }) => {
          data.name = decodeURIComponent(
            data.url.substring(data.url.lastIndexOf("/") + 1)
          );
          workpic.value += "" + data.url;
          const json = Object.assign(inputForm.value, {
            workPicture: workpic.value,
          });
          inputForm.value = json;
          fileImg.value.push(data);
        });
    };
    const fjdelete = (file) => {
      //删除文件操作
      for (let index = 0; index < fileList.value.length; index++) {
        if (file.file == fileList.value[index].file) {
          let delurl = fileImg.value[index].url;
          new tools().uploadFiledelete("", delurl).then(({ data }) => {});
          fileImg.value.splice(index, 1);
          fileList.value.splice(index, 1);
        }
      }
    };
    //详细地址定位
    const getLocation = () => {
      xm.getLocation().then((data) => {
        inputForm.currentResidenceDetail = data.POIName;
      });
    };
    // 地区选择
    let placeAddress = ref("");
    const customFieldName = {
      text: "name",
      value: "id",
    };
    const options = ref([]);
    let showPlace1 = ref(false);
    const getPlace1 = ({ selectedOptions }) => {
      showPlace1.value = false;
      let str1 = "";
      let str2 = "";
      selectedOptions.forEach((item) => {
        if (inputForm.currentResidence) {
          str1 = inputForm.currentResidence;
          str2 = inputForm.currentResidenceId;
        }
        str1 += item.name + "/";
        str2 += item.code + "/";
      });
      const json = Object.assign(inputForm.value, {
        currentResidence: str1,
        currentResidenceId: str2,
      });
      inputForm.value = json;
    };

    //宗教组织
    const tissueName = ref("");
    const checked1 = ref("");
    const tissuelist = ref([]);
    let hs_tissue = ref(false);
    const gettissue = (val) => {
      tissueName.value = val.organizationName;
      const json = Object.assign(inputForm.value, { zjzz: { id: val.id } });
      inputForm.value = json;
      checked1.value = val.id;
    };
    const loading1 = ref(false);
    const finished1 = ref(false);
    const refreshing1 = ref(false);
    let index1 = 0;
    const onLoad1 = () => {
      loading1.value = true;
      finished1.value = false;
      // 异步更新数据
      new placePerson()
        .zjzz({
          current: index1 + 1,
          size: 10,
        })
        .then(({ records, pages }) => {
          tissuelist.value = tissuelist.value.concat(records);
          // 加载状态结束
          loading1.value = false;
          if (index1 + 1 >= pages) {
            finished1.value = true;
          }
          index1++;
        });
    };
    //人员类型
    const personnalType = ref("");
    const checked2 = ref([]);
    const persontype = [
      { text: "宗教从业人员", value: "1" },
      { text: "民族场所从业人员", value: "2" },
      { text: "教职人员", value: "3" },
      { text: "固定信徒", value: "4" },
      { text: "场所居住人员", value: "5" },
      { text: "境外人员", value: "6" },
      { text: "非本市人员", value: "7" },
      { text: "非本教人员", value: "8" },
      { text: "临时人员", value: "9" },
      { text: "异常人员", value: "10" },
      { text: "邪教人员", value: "12" },
      { text: "管理人员", value: "13" },
      { text: "全能神离家人员", value: "14" },
      { text: "全能神骨干人员", value: "15" },
      { text: "网络运营人员", value: "16" },
      { text: "涉政有害活动人员", value: "17" },
      { text: "境内外记者", value: "18" },
      { text: "境外法轮功骨干人员", value: "19" },
      { text: "其他邪教骨干人员", value: "20" },
      { text: "心灵法门骨干人员", value: "21" },
      { text: "“精神控制”有害培训骨干人员", value: "22" },
      { text: "重点人员", value: "23" },
    ];
    const showZW = ref("");
    const checkboxRefs = ref([]);
    let hs_persontype = ref(false);
    const toggle = (index) => {
      checkboxRefs.value[index].toggle();
      let str = "";
      str = checked2.value.join();
      const json = Object.assign(
        { ...inputForm.value },
        { personnelType: str }
      );
      inputForm.value = json;
      personnalType.value = getValue(checked2.value).join();
      showZW.value = str;
    };
    onBeforeUpdate(() => {
      checkboxRefs.value = [];
    });
    const getValue = (item) => {
      const type = {
        1: "宗教从业人员",
        2: "民族场所从业人员",
        3: "教职人员",
        4: "固定信徒",
        5: "场所居住人员",
        6: "境外人员",
        7: "非本市人员",
        8: "非本教人员",
        9: "临时人员",
        10: "异常人员",
        12: "邪教人员",
        13: "管理人员",
        14: "全能神离家人员",
        15: "全能神骨干人员",
        16: "网络运营人员",
        17: "涉政有害活动人员",
        18: "境内外记者",
        19: "境外法轮功骨干人员",
        20: "其他邪教骨干人员",
        21: "心灵法门骨干人员",
        22: "“精神控制”有害培训骨干人员",
        23: "重点人员",
      };
      let Array = [];
      item.forEach((chilr) => {
        Array.push(type[chilr]);
      });
      return Array;
    };
    // 是否参加非法活动
    const activitytext = ref("");
    const activity = [
      { text: "是", value: "0" },
      { text: "否", value: "1" },
    ];
    let hs_activity = ref(false);
    const getactivity = ({ selectedOptions }) => {
      hs_activity.value = false;
      const json = Object.assign(inputForm.value, {
        bkcheck: selectedOptions[0].value,
      });
      inputForm.value = json;
      activitytext.value = selectedOptions[0].text;
    };
    // 教职身份
    const teachPosition = ref("");
    const teach = [
      { text: "阿訇", value: "1" },
      { text: "牧师", value: "2" },
      { text: "长老", value: "3" },
      { text: "传道员", value: "4" },
      { text: "神学生", value: "5" },
      { text: "道士（正一）", value: "6" },
      { text: "比丘", value: "7" },
      { text: "教师（副牧师）", value: "8" },
      { text: "比丘尼", value: "9" },
    ];
    let hs_teach = ref(false);
    const getteach = ({ selectedOptions }) => {
      hs_teach.value = false;
      teachType.value = selectedOptions[0].value;
      teachPosition.value = selectedOptions[0].text;
    };
    // 宗教教育程度
    const Religiouseducation = ref("");
    const Reducation = [
      { text: "小学", value: "1" },
      { text: "初中", value: "2" },
      { text: "中专", value: "3" },
      { text: "高中", value: "4" },
      { text: "大专", value: "5" },
      { text: "本科", value: "6" },
      { text: "硕士研究生", value: "7" },
      { text: "博士研究生", value: "8" },
      { text: "其他", value: "9" },
    ];
    let hs_Reducation = ref(false);
    const getReducation = ({ selectedOptions }) => {
      hs_Reducation.value = false;
      religiousType.value = selectedOptions[0].value;
      Religiouseducation.value = selectedOptions[0].text;
    };
    // 证书颁发时间
    const issueDate = ref("");
    let hs_issueDate = ref(false);
    const getissueDate = ({ selectedOptions }) => {
      hs_issueDate.value = false;
      issueDate.value =
        selectedOptions[0].text +
        "-" +
        selectedOptions[1].text +
        "-" +
        selectedOptions[2].text;
    };
    // 备案时间
    const recordDate = ref("");
    let hs_recordDate = ref(false);
    const getrecordDate = ({ selectedOptions }) => {
      hs_recordDate.value = false;
      recordDate.value =
        selectedOptions[0].text +
        "-" +
        selectedOptions[1].text +
        "-" +
        selectedOptions[2].text;
    };
    //记者类型
    const journalistName = ref("");
    const journalistName2 = ref("");
    const journalistn = [
      { text: "境内", value: "1" },
      { text: "境外", value: "2" },
    ];
    let hs_journalistn = ref(false);
    const getjournalistn = ({ selectedOptions }) => {
      hs_journalistn.value = false;
      journalistName2.value = selectedOptions[0].value;
      journalistName.value = selectedOptions[0].text;
    };
    //网络运营类型
    const operateName = ref("");
    const operateName2 = ref("");
    const operate = [
      { text: "网络主播", value: "1" },
      { text: "微博", value: "2" },
      { text: "微信", value: "3" },
      { text: "抖音", value: "4" },
      { text: "快手", value: "5" },
      { text: "淘宝", value: "6" },
      { text: "QQ", value: "7" },
    ];
    let hs_operate = ref(false);
    const getoperate = ({ selectedOptions }) => {
      hs_operate.value = false;
      operateName2.value = selectedOptions[0].value;
      operateName.value = selectedOptions[0].text;
    };
    //跳转
    let router = useRouter();
    //数据提交
    const submit = () => {
      const list = [
        { chineseName: "职务", value: job.value },
        { chineseName: "教职身份", value: teachType.value },
        { chineseName: "宗教教育程度", value: religiousType.value },
        { chineseName: "宗教毕业院校", value: finishschoolName.value },
        { chineseName: "教职证书号", value: certificateNumber.value },
        { chineseName: "证书颁发时间", value: issueDate.value },
        { chineseName: "证书颁发单位", value: certificateUnit.value },
        { chineseName: "备案时间", value: recordDate.value },
        { chineseName: "备案机关名称", value: authorityName.value },
        { chineseName: "宗教院校名称", value: schoolName.value },
        { chineseName: "院校任职情况", value: takeoffice.value },
        { chineseName: "网络运营类型", value: operateName2.value },
        { chineseName: "记者类型", value: journalistName2.value },
        { chineseName: "境外来源地", value: overseas.value },
        { chineseName: "派别", value: faction.value },
        { chineseName: "市外来源地", value: cityOutaddress.value },
        { chineseName: "教别", value: religioustype2.value },
      ];
      let newList = [];
      newList = list.filter((item) => {
        return item.value != "";
      });
      const json = Object.assign(inputForm.value, {
        userManagenmetDetailsDTOList: newList,
      });
      inputForm.value = json;
      new placePerson().save(inputForm.value).then((res) => {
        console.log(res);
        if (res.status == 200) {
          xm.showToast({
            message: "人员添加成功",
          });
          router.push({
            path: "/placePerson",
          });
        }else{
          xm.showToast({
            message: "人员添加失败",
          });
          console.log(res);
        }
      });
    };

    return {
      //人员添加
      inputForm,
      // 证件类型
      idTypeName,
      showPicker,
      places,
      getPlace,
      //民族
      nationName,
      hs_nation,
      nation,
      getnation,
      //性别
      sexName,
      hs_sex,
      sex,
      getsex,
      // 教育程度
      educationName,
      hs_education,
      education,
      geteducation,
      // 宗教类别
      religiousName,
      hs_religious,
      religious,
      getreligious,
      // 宗教类别2
      religiousName2,
      religioustype2,
      hs_religious2,
      religious2,
      getreligious2,
      //所属场所
      locationName,
      checked,
      hs_site,
      getsite,
      sitelist,
      loading,
      finished,
      onLoad,
      refreshing,
      //场所任职情况
      typeOfEmployeesName,
      hs_typeOfEmployees,
      typeOfEmployees,
      gettypeOfEmployees,
      //籍贯
      nativePlace,
      hs_nativePlace,
      getnativePlace,
      //宗教组织
      tissueName,
      checked1,
      hs_tissue,
      gettissue,
      tissuelist,
      loading1,
      finished1,
      onLoad1,
      refreshing1,
      //人员类型
      checked2,
      personnalType,
      persontype,
      hs_persontype,
      toggle,
      checkboxRefs,
      showZW,
      // 是否参加非法活动
      activity,
      hs_activity,
      getactivity,
      activitytext,
      //教职身份
      teachPosition,
      teach,
      hs_teach,
      getteach,
      //宗教教育程度
      Religiouseducation,
      Reducation,
      hs_Reducation,
      getReducation,
      //证书颁发时间
      hs_issueDate,
      issueDate,
      getissueDate,
      //备案时间
      hs_recordDate,
      recordDate,
      getrecordDate,
      //记者类型
      journalistName,
      journalistn,
      hs_journalistn,
      getjournalistn,
      //网络运营类型
      operate,
      operateName,
      operateName2,
      hs_operate,
      getoperate,
      //图片上传
      fileList,
      afterRead1,
      //图片删除
      fjdelete,
      // 返回
      onClickLeft,
      // 详细地址定位
      getLocation,
      // 地区选择
      placeAddress,
      customFieldName,
      showPlace1,
      getPlace1,
      options,
      //userList数组
      job,
      religiousScool,
      certificateNumber,
      certificateUnit,
      authorityName,
      schoolName,
      takeoffice,
      overseas,
      faction,
      cityOutaddress,
      finishschoolName,
      //数据提交
      submit,
      selectColor,
    };
  },
};
</script>
<style lang="less">
.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;
}
.dialog {
  width: 100%;
  height: 400px;
  overflow: auto;
}
</style>