HS_MZAP/src/views/placeManage/placeRegister.vue

<template>
  <div>
    <van-nav-bar title="场所录入" left-arrow @click-left="onClickLeft" />
  </div>
  <div class="main">
    <p class="title">宗教场所录入</p>
    <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"
          right-icon="location"
        />
      </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 "../placeManage/ManageList.vue";
import ManageList2 from "../placeManage/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 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);
        }
      }
    };
    // 地区选择
    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 = () => {
      console.log(placeActivity.placeData);
      new PlaceRegister().sava(placeActivity.placeData).then((res) => {
        console.log("提交成功", res);
        router.push({
          path: "/tabAll",
        });
      });
    };

    return {
      placeActivity,
      // 活动场所
      showPicker,
      places,
      getPlace,
      //场所类型
      showPicker1,
      placeType,
      getplaceType,
      //场所建设阶段
      showPicker2,
      construction,
      getConstruction,
      //场所性质
      showPicker3,
      property,
      getproperty,
      //图片上传
      fileList,
      afterRead1,
      //图片删除
      fjdelete,
      // 返回
      onClickLeft,
      // 地区选择
      placeAddress,
      customFieldName,
      showPlace1,
      getPlace1,
      options,
      //人员选择
      showPerson,
      showReport,
      selected,
      selected2,
      reselected,
      reselected2,
      //数据提交
      submit,
    };
  },
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.main {
  background: #fff;
  top: 0px !important;
}
.main p {
  height: 40px;
  line-height: 40px;
  color: #36a7f3;
  border-bottom: 1px solid #eee;
}
.title {
  font-size: 25px;
  font-weight: 700;
  padding-left: 20px;
}
.miniTitle {
  font-size: 18px;
}
.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;
}
</style>