HS_MZAP/src/views/placeManage/placeRegister.vue

<template>
  <div class="main">
    <p class="title">宗教场所录入</p>
    <div class="formArea">
      <p class="miniTitle">基础信息</p>
      <van-cell-group>
        <van-field
          v-model="placeActivity.placeData.religiousType"
          readonly
          label="所属宗教:"
          placeholder="请选择宗教"
          input-align="right"
          right-icon="arrow-down"
          @click="showPicker = true"
        />
        <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.placeData.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.placeData.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.placeData.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.placeData.religiousDeptManaUserName.name"
          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="1"></manage-list>
        </van-dialog>
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="placeActivity.placeData.securityDeptManaUserName.name"
          center
          label="公安管理人员"
          placeholder="请填写公安管理人员"
          input-align="right"
          right-icon="arrow-down"
          @click="showReport = true"
        />  
        <van-dialog
          v-model:show="showReport"
          title="公安部门管理人员"
          show-cancel-button
          @confirm="reselected"
        >
          <manage-list @selected="selected" :type="0"></manage-list>
        </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="placeActivity.fileList1"
              :after-read="afterRead"
            />
          </template>
        </van-field>
      </van-cell-group>
      <van-cell-group>
        <van-field name="uploader" label-align="top" label="内景照片:">
          <template #input>
            <van-uploader
              v-model="placeActivity.fileList2"
              :after-read="afterRead"
            />
          </template>
        </van-field>
      </van-cell-group>
    </div>
    <div class="subbtn">
      <van-button type="primary" @click="submit">提交</van-button>
      <van-button @click="goback" type="default" hairline>取消</van-button>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import ManageList from "../placeManage/ManageList.vue"
import PlaceRegister from "@/api/placeRegister/placeRegister";
import router from "@/router";
export default {
  components:{ManageList},
  setup() {
    const goback = () => {
      history.back();
    };

    //场所录入
    const placeActivity = reactive({
      placeData: {
        religiousType: "", //所属宗教
        name: "", //场所名称
        contact: "", //场所联系人
        contactNumber: "", //联系电话
        placeSelectName: "", //场所地点
        place: "", //详细场所地点
        siteType: "", //场所类型
        constructionStage: "", //场所建设阶段
        nature: "", //场所性质
        religiousDeptManaUserName: {
          id:"",
          name:""
        }, //宗教部门管理人员
        securityDeptManaUserName: {
          id:"",
          name:""
        }, //公安部门管理人员
        peopleThreshold: "", //场所活动人数
        scenesImage: "", //内外景图片
      },
      fileList1: [], //外景图片
      fileList2: [], //内景图片
    });
    // 宗教名称
    const places = [
      { text: "伊斯兰教", value: "伊斯兰教" },
      { text: "基督教", value: "基督教" },
      { text: "天主教", value: "天主教" },
      { text: "佛教", value: "佛教" },
      { text: "道教", value: "道教" },
    ];
    let showPicker = ref(false);
    const getPlace = ({ selectedOptions }) => {
      showPicker.value = false;
      placeActivity.placeData.religiousType = selectedOptions[0].text;
    };
    // 场所类型
    const placeType = [
      { text: "线下", value: "线下" },
      { text: "线上", value: "线上" },
    ];
    let showPicker1 = ref(false);
    const getplaceType = ({ selectedOptions }) => {
      showPicker1.value = false;
      placeActivity.placeData.siteType = selectedOptions[0].text;
    };
    // 场所建设
    const construction = [
      { text: "筹备", value: "筹备" },
      { text: "建设完成", value: "建设完成" },
    ];
    let showPicker2 = ref(false);
    const getConstruction = ({ selectedOptions }) => {
      showPicker2.value = false;
      placeActivity.placeData.constructionStage = selectedOptions[0].text;
    };
    // 场所性质
    const property = [
      { text: "固定场所", value: "固定场所" },
      { text: "寺观教堂", value: "寺观教堂" },
    ];
    let showPicker3 = ref(false);
    const getproperty = ({ selectedOptions }) => {
      showPicker3.value = false;
      placeActivity.placeData.nature = selectedOptions[0].text;
    };

    //图片上传
    const afterRead = (file) => {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    };

    // 地区选择
    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;
    };
    //人员选择
    let showPerson = ref(false);
    let showReport = ref(false);
    let list = {
      value: [],
      type: "",
    };
    const selected = (val, type) => {
      
      list.value = val;
      list.type = type;
      console.log(list);
    };
    const reselected = () => {
      let ids = [];
      let names = [];
      if (list.type == 1) {
        list.value.forEach((item) => {
          ids.push(item.id);
          names.push(item.name);
        });
      placeActivity.placeData.religiousDeptManaUserName.id =  ids.join(',')
      placeActivity.placeData.religiousDeptManaUserName.name =  names.join(',')  
      } else {
      placeActivity.placeData.securityDeptManaUserName.id =  list.value.id
      placeActivity.placeData.securityDeptManaUserName.name =  list.value.name
      }
    };
    //数据提交
    const submit = () => {
      // console.log(placeActivity.placeData.scenesImage);
      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,
      //图片上传
      afterRead,
      // 返回
      goback,
      // 地区选择
      customFieldName,
      showPlace1,
      getPlace1,
      options,
      //人员选择
      showPerson,
      showReport,
      selected,
      reselected,
      //数据提交
      submit,
    };
  },
};
</script>

<style src="../../styles/style.css"  scoped></style>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.main {
  background: #fff;
  margin-top: 25pt;
}
.main p {
  height: 40px;
  line-height: 40px;
  color: #36a7f3;
  border-bottom: 1px solid #eee;
}
.title {
  font-size: 17pt;
  font-weight: 700;
  padding-left: 20px;
}
.miniTitle {
  font-size: 14pt;
}
.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>