HS_MZAP/src/views/placeManage/placeRegister/placeRegister.vue

<template>
  <van-nav-bar
    fixed
    title="场所录入"
    left-arrow
    @click-left="onClickLeft"
    :style="{ 'background-color': selectColor }"
  />
  <div class="main">
    <div class="formArea">
      <p class="miniTitle">场所信息</p>
      <van-cell-group>
        
        <van-field
          v-model="placeActivity.placeData.religiousName"
          readonly
          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="placeActivity.placeData.name"
          center
          label="场所名称:"
          placeholder="请填写场所名称"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="placeActivity.placeData.contact"
          center
          label="场所联系人"
          placeholder="请填写场所联系人"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="placeActivity.placeData.contactNumber"
          center
          label="联系电话"
          placeholder="请填写联系电话"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="placeActivity.placeData.placeSelectName"
          center
          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="placeActivity.placeData.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="placeActivity.siteType"
          readonly
          label="场所类型"
          placeholder="请选择场所类型"
          input-align="right"
          right-icon="arrow-down"
          @click="showPicker1 = true"
        />
        <van-popup v-model:show="showPicker1" round position="bottom">
          <van-picker
            title="场所类型"
            :columns="placeType"
            @cancel="showPicker1 = false"
            @confirm="getplaceType"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="placeActivity.constructionStage"
          readonly
          label="场所建设阶段"
          placeholder="请选择场所建设阶段"
          input-align="right"
          right-icon="arrow-down"
          @click="showPicker2 = true"
        />
        <van-popup v-model:show="showPicker2" round position="bottom">
          <van-picker
            title="场所建设阶段"
            :columns="construction"
            @cancel="showPicker2 = false"
            @confirm="getConstruction"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="placeActivity.nature"
          readonly
          label="场所性质"
          placeholder="请选择场所性质"
          input-align="right"
          right-icon="arrow-down"
          @click="showPicker3 = true"
        />
        <van-popup v-model:show="showPicker3" round position="bottom">
          <van-picker
            title="场所性质选择"
            :columns="property"
            @cancel="showPicker3 = false"
            @confirm="getproperty"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="placeActivity.religiousDeptManaUserName"
          center
          label="宗教管理人员"
          placeholder="请填写宗教管理人员"
          input-align="right"
          right-icon="arrow-down"
          @click="showPerson = true"
        />
        <van-dialog
          v-model:show="showPerson"
          title="宗教部门管理人员"
          show-cancel-button
          @confirm="reselected"
        >
          <manage-list
            @selected="selected"
            :type="0"
            :placeAddress="placeAddress"
          ></manage-list>
        </van-dialog>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="placeActivity.securityDeptManaUserName"
          center
          label="公安管理人员"
          placeholder="请填写公安管理人员"
          input-align="right"
          right-icon="arrow-down"
          @click="showReport = true"
        />
        <van-dialog
          v-model:show="showReport"
          title="公安部门管理人员"
          show-cancel-button
          @confirm="reselected2"
        >
          <manage-list-2
            @selected2="selected2"
            :placeAddress="placeAddress"
          ></manage-list-2>
        </van-dialog>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="placeActivity.placeData.peopleThreshold"
          center
          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>
    </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 { reactive, ref } from "vue";
import ManageList from "../ManageList.vue";
import ManageList2 from "../ManageList2.vue";
import PlaceRegister from "@/api/placeRegister/placeRegister";
import tools from "@/api/sys/tools";
export default {
  components: { ManageList, ManageList2 },
  setup() {
    const onClickLeft = () => {
      history.back();
    };
    // 导航栏颜色
    const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
    //场所录入
    const placeActivity = reactive({
      placeData: {
        religiousType: "", //所属宗教
        name: "", //场所名称
        contact: "", //场所联系人
        contactNumber: "", //联系电话
        placeSelectId: "", //场所地点id
        placeSelectName: "", //场所地点
        place: "", //详细场所地点
        siteType: "", //场所类型
        constructionStage: "", //场所建设阶段
        nature: "", //场所性质
        religiousDeptManaUser: "", //宗教部门管理人员id

        securityDeptManaUser: "", //公安部门管理人员id

        peopleThreshold: "", //场所活动人数
        approvalProcedures: "", //场所建设审批手续
        etiquetteSpace: "", //宗教礼仪空间（附件）
        filingNo: "", //场所备案号
        latitude: "", //经度
        longitude: "", //维度
        mainRoads: "", //出入口主要道路
        placeSelectType3: "",
        placeSelectType4: "",
        placeSelectType5: "",
        placeSelectType6: "",
        plan: "", //场所规划
        publicArea: "", //外围公共区域
        religiousName: "", //教别名称
        remake: "", //备注
        scenesImage: "", //内外景图片地址
        tyshxydm: "", //统一社会代码
        website: "", //网址
        state: "1", //状态
      },
      religiousDeptManaUserName: "", //宗教部门管理人员
      securityDeptManaUserName: "", //公安部门管理人员
      placeSelectName: "", //场所地点
      siteType: "", //场所类型
      constructionStage: "", //场所建设阶段
      nature: "", //场所性质
    });
    // 宗教名称
    const places = [
      { text: "伊斯兰教", value: " 1" },
      { text: "基督教", value: "2" },
      { text: "天主教", value: "3" },
      { text: "佛教", value: "4" },
      { text: "道教", value: "5" },
    ];
    let showPicker = ref(false);
    const getPlace = ({ selectedOptions }) => {
      showPicker.value = false;
      placeActivity.placeData.religiousType = selectedOptions[0].value;
      placeActivity.placeData.religiousName = selectedOptions[0].text;
    };
    // 场所类型
    const placeType = [
      { text: "线上", value: "0" },
      { text: "线下", value: "1" },
    ];
    let showPicker1 = ref(false);
    const getplaceType = ({ selectedOptions }) => {
      showPicker1.value = false;
      placeActivity.placeData.siteType = selectedOptions[0].value;
      placeActivity.siteType = selectedOptions[0].text;
    };
    // 场所建设
    const construction = [
      { text: "筹备", value: "0" },
      { text: "建设完成", value: "1" },
    ];
    let showPicker2 = ref(false);
    const getConstruction = ({ selectedOptions }) => {
      showPicker2.value = false;
      placeActivity.placeData.constructionStage = selectedOptions[0].value;
      placeActivity.constructionStage = selectedOptions[0].text;
    };
    // 场所性质
    const property = [
      { text: "固定场所", value: "0" },
      { text: "寺观教堂", value: "1" },
    ];
    let showPicker3 = ref(false);
    const getproperty = ({ selectedOptions }) => {
      showPicker3.value = false;
      placeActivity.placeData.nature = selectedOptions[0].value;
      placeActivity.nature = selectedOptions[0].text;
    };

    //图片上传
    let fileList = ref([]);
    let fileImg = ref([]);
    const afterRead1 = (file) => {
      new tools()
        .uploadFile(file, `religioussites/siteinfo/religiousSitesInfo`)
        .then(({ data }) => {
          data.name = decodeURIComponent(
            data.url.substring(data.url.lastIndexOf("/") + 1)
          );
          placeActivity.placeData.scenesImage += "" + data.url;
          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) => {
        placeActivity.placeData.place = data.POIName;
      });
    };
    // 地区选择
    let placeAddress = ref("");
    const customFieldName = {
      text: "name",
      value: "id",
    };
    // 选项列表，children 代表子选项，支持多级嵌套
    const options = ref([]);
    // 获取地区数据树
    new PlaceRegister().treeDate().then((res) => {
      options.value.push(...res);
    });
    let showPlace1 = ref(false);
    const getPlace1 = ({ selectedOptions }) => {
      showPlace1.value = false;
      placeActivity.placeData.placeSelectName =
        selectedOptions[0].name +
        "/" +
        selectedOptions[1].name +
        "/" +
        selectedOptions[2].name;
      placeAddress.value =
        selectedOptions[0].id +
        "/" +
        selectedOptions[1].id +
        "/" +
        selectedOptions[2].id;
      placeActivity.placeData.placeSelectType3 = selectedOptions[0].id;
      placeActivity.placeData.placeSelectType4 = selectedOptions[1].id;
      placeActivity.placeData.placeSelectType5 = selectedOptions[2].id;
      placeActivity.placeData.placeSelectId = placeAddress.value;
    };
    //人员选择
    let showPerson = ref(false);
    let showReport = ref(false);
    let list = {
      value: [],
      type: "",
    };
    let list2 = {
      value: [],
      type: "",
    };
    const selected = (val) => {
      list.value = val;
    };
    const selected2 = (val) => {
      list2.value = val;
    };
    const reselected = () => {
      placeActivity.placeData.religiousDeptManaUser = list.value.id;
      placeActivity.religiousDeptManaUserName = list.value.name;
    };
    const reselected2 = () => {
      placeActivity.placeData.securityDeptManaUser = list2.value.id;
      placeActivity.securityDeptManaUserName = list2.value.name;
    };
    //数据提交
    const submit = () => {
      new PlaceRegister().sava(placeActivity.placeData).then((res) => {
        router.push({
          path: "/tabAll",
        });
      });
    };

    return {
      placeActivity,
      // 活动场所
      showPicker,
      places,
      getPlace,
      //场所类型
      showPicker1,
      placeType,
      getplaceType,
      //场所建设阶段
      showPicker2,
      construction,
      getConstruction,
      //场所性质
      showPicker3,
      property,
      getproperty,
      //图片上传
      fileList,
      afterRead1,
      //图片删除
      fjdelete,
      // 返回
      onClickLeft,
      // 详细地址定位
      getLocation,
      // 地区选择
      placeAddress,
      customFieldName,
      showPlace1,
      getPlace1,
      options,
      //人员选择
      showPerson,
      showReport,
      selected,
      selected2,
      reselected,
      reselected2,
      //数据提交
      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;
  
}
</style>