HS_MZAP/src/views/activityMan/nonReligiousInformation/nonReligiousInformationView.vue

<template>
  <van-nav-bar
    fixed
    title="信息上报中心"
    left-text=""
    left-arrow
    @click-left="onClickLeft"
    :style="{ 'background-color': selectColor }"
  />
  <van-loading size="16px" v-show="isLoading">加载中...</van-loading>
  <div class="main" v-show="!isLoading">
    <p class="title">非宗教类信息上报</p>
    <div class="formArea">
      <p class="miniTitle">基础信息</p>

      <van-cell-group>
        <van-field v-model="inputForm.name" center label="人员姓名:" placeholder="请填写人员姓名" input-align="right">
        </van-field>
      </van-cell-group>

      <van-cell-group>
        <van-field name="radio" label="性别:" input-align="right">
          <template #input>
            <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-field>
      </van-cell-group>

      <van-cell-group>
        <van-field v-model="inputForm.idcard" center label="身份证号:" placeholder="请填写身份证号" input-align="right"
          type="digit" />
      </van-cell-group>
      <van-cell-group>
        <van-field v-model="inputForm.phone" center label="手机号:" placeholder="请填写手机号" input-align="right"
          type="tel" />
      </van-cell-group>

      <!-- <van-cell-group>
        <van-field
          v-model="inputForm.nonReligiousCategoriesname"
          readonly
          required
          center
          label="非宗教类别:"
          placeholder="请选择"
          input-align="right"
          right-icon="arrow-down"
          @click="showCategories = true"
        />
        <van-popup v-model:show="showCategories" round position="bottom">
          <van-picker
            title="选择非宗教类别"
            :columns="Categories"
            :columns-field-names="customFieldName"
            @cancel="showCategories = false"
            @confirm="getCategories"
          />
        </van-popup>
      </van-cell-group>

      <van-cell-group>
        <van-field
          v-model="inputForm.siteName.name"
          readonly
          required
          center
          label="组织名称:"
          placeholder="请选择"
          input-align="right"
          right-icon="arrow-down"
          @click="showOrganizations = true"
        />
        <van-dialog
          v-model:show="showOrganizations"
          title="选择组织名称"
          show-cancel-button
          @confirm="reselected2"
        >
          <organizations-list @selected="selected2" :type="1" :id="inputForm.nonReligiousCategories" ref="organ"></organizations-list>
        </van-dialog>
      </van-cell-group> -->

      <van-cell-group>
        <van-field
          v-model="inputForm.reportingTime"
          center
          readonly
          label="时间:"
          placeholder="请选择时间"
          input-align="right"
          right-icon="arrow-down"
          @click="showAct = true"
        />
        <van-popup v-model:show="showAct" round position="bottom">
          <van-picker-group
            :tabs="['选择日期', '选择时间']"
            next-step-text="下一步"
            @confirm="getTime"
            @cancel="showAct = false"
          >
            <van-date-picker v-model="currentDate" />
            <van-time-picker
              v-model="currentTime"
              :columns-type="columnsType"
            />
          </van-picker-group>
        </van-popup>
      </van-cell-group>

      <van-cell-group>
        <van-field
          v-model="inputForm.placeSelectName"
          center
          readonly
          required
          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"
            :field-names="fieldNames"
          />
        </van-popup>
      </van-cell-group>

      <!-- <van-cell-group>
        <van-field
          v-model="inputForm.placeDetailed"
          center
          label="详细地址:"
          placeholder="请填写具体地址"
          input-align="right"
          right-icon="location"
        />
      </van-cell-group> -->
	  
	  <van-cell-group>
	    <van-field v-model="inputForm.placeDetailed" 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 name="uploader" required :rules="[{ required: true }]" label="证据上传:">
          <template #input>
            <van-uploader :after-read="afterRead" v-model="fileList" :max-count="5" capture="camera" accept=""
              :preview-full-image="false" :before-delete="deleteRead">
              <van-button>上传文件</van-button>
            </van-uploader>
          </template>
        </van-field>
      </van-cell-group>
<!-- 
      <van-cell-group>
        <van-field label="事件概述:" label-align="top">
          <template #input>
            <wang-editor ref="contentEditor" v-model="inputForm.eventContent" />
          </template>
        </van-field>
      </van-cell-group> -->
      <van-cell-group>
        <div class="rowTextArea">
          <van-field
            v-model="inputForm.eventOverview"
            center
            rows="1"
            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 personList from "../personList.vue";
import organizationsList from "../organizationsList.vue";
import tools from "@/api/sys/tools";
import nonReligiousInformationService from "@/api/nonReligiousInformation/nonReligiousInformationService";
import UserManage from "@/api/user/UserManage";
import { useRoute } from "vue-router";
// 富文本编辑器
import WangEditor from "@/components/editor/WangEditor";
export default {
  components: { personList, WangEditor,organizationsList },
  setup() {
    // 导航栏颜色
    const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
    // 加载
    let isLoading = ref(true);
    // 返回
    const onClickLeft = () => {
      history.back();
    };
    //信息
    let inputForm = ref({
      id: "",
      name: "",
      sex:"1",
      idcard:"",
      phone:"",
      place: "320900",
      placeSelectName: "盐城市",
      placeSelectType3: "320900",
      placeSelectType4: "",
      placeSelectType5: "",
      placeSelectType6: "",
      placeDetailed: "",
      reportingTime: "",
      eventContent: "",
      state: "0",
      assessment: "0",
      eventOverview: "",
    });
    const contentEditor = ref(null);
    // 获取组件
    const organ = ref(null);
    let route = useRoute();
    onMounted(() => {
      // 根据路由初始化
      if (route.query.id) {
        new nonReligiousInformationService()
          .queryById(route.query.id)
          .then((data) => {
            inputForm.value = data;

            inputForm.value.siteName.name=inputForm.value.siteName.organizationName;

            Categories.value.forEach((item) => {
              if(item.id==inputForm.value.nonReligiousCategories){
                inputForm.value.nonReligiousCategoriesname = item.name;   
              }              
            });            
            
            contentEditor.value.init(inputForm.value.eventContent);
            
            isLoading.value = false;
          });
      } else {
        //contentEditor.value.init(inputForm.value.eventContent);
        isLoading.value = false;
      }
    });


    // 非宗教类别
    let showCategories = ref(false);
    let Categories = ref([{"name":"宗教组织","id":"1"},{"name":"邪教组织","id":"10"},{"name":"地下神学院","id":"11"},{"name":"地下教会","id":"2"},
    {"name":"韩美境外渗透组织","id":"3"},{"name":"本地精神控制类有害培训机构","id":"4"},{"name":"“呼喊派”骨干组织","id":"5"},
    {"name":"“改革宗”地下教会组织","id":"6"},{"name":"藏传佛教本地组织","id":"7"},{"name":"学生传教组织","id":"8"},
    {"name":"“义诊医疗”地下教会组织","id":"9"},{"name":"“亚文化”传教组织","id":"91"},{"name":"重点公司组织","id":"92"},]);
    const customFieldName = {
      text: "name",
      value: "id",
    };
    const getCategories = ({ selectedOptions }) => {
      if(selectedOptions[0]!=undefined&&selectedOptions[0]!=null){ 
        showCategories.value = false;
        inputForm.value.nonReligiousCategories = selectedOptions[0].id;
        inputForm.value.nonReligiousCategoriesname = selectedOptions[0].name;        
        //组件显示出来的时候就可以调用了
        if(organ.value!=null){
          organ.value.flushByid(selectedOptions[0].id)
          inputForm.value.siteName.id = "";
          inputForm.value.siteName.name = "";
          list2.value = [];
          list2.type = "";
        }
      }
    };




    //组织名称
    let showOrganizations = ref(false);
    let list2 = {
      value: [],
      type: "",
    };
    const selected2 = (val, type) => {
      list2.value = val;
      list2.type = type;
    };
    const reselected2 = () => {
      let ids = [];
      let names = [];
      if (list2.type == 1) {
        list2.value.forEach((item) => {
          ids.push(item.id);
          names.push(item.organizationName);
        });
        inputForm.value.siteName.id = ids.join(",");
        inputForm.value.siteName.name = names.join(",");
      }
    };


    // 获取活动时间
    let showAct = ref(false);
    let currentDate = ref(["" + new Date().getFullYear(), "01", "01"]);
    let currentTime = ref(["00", "00", "00"]);
    const columnsType = ["hour", "minute", "second"];
    const getTime = () => {
      showAct.value = false;
      inputForm.value.reportingTime = `${currentDate.value.join(
        "-"
      )} ${currentTime.value.join(":")}`;
    };

    // 地区选择
    let showArea = ref(false);
    const cascaderValue = ref("");
    const fieldNames = {
      text: "name",
      value: "code",
      children: "children",
    };
    // 选项列表，children 代表子选项，支持多级嵌套
    let options = ref([]);
    new tools().treeData().then((res) => {
      options.value.push(res[0]);
    });
    // 全部选项选择完毕后，会触发 finish 事件
    const onFinish = ({ selectedOptions }) => {
      if(selectedOptions[0]!=undefined&&selectedOptions[0]!=null){ 
        showArea.value = false;
        inputForm.value.placeSelectName = selectedOptions
          .map((option) => option.name)
          .join("/");

          inputForm.value.place = selectedOptions
          .map((option) => option.id)
          .join("/");

          inputForm.value.placeSelectType3= selectedOptions[0].id;
          inputForm.value.placeSelectType4= selectedOptions[1].id;
          inputForm.value.placeSelectType5= selectedOptions[2].id;
      }

    };
	
	const getLocation = () => {
	  xm.getLocation().then(data => {
	    inputForm.value.placeDetailed = data.POIName;
	  })
	}
    
    // 文件上传
    let fileList = ref([]);
    let fileupList = ref([]);
    const afterRead = (file) => {
      // 此时可以自行将文件上传至服务器
      new tools()
        .uploadFile(file, `nonReligiousInformation/nonReligiousInformation`)
        .then(({ data }) => {
        
          data.name = decodeURIComponent(
            data.url.substring(
              data.url.lastIndexOf("/") + 1
            )
          );

          //data.url = `${$base}` + data.url;    
          fileupList.value.push(data);
          window.xm.showToast({
             message:"文件上传成功!"
          })

        });
    };
    const fjdelete = (file) => {
      //删除文件操作
      for (let index = 0; index < fileList.value.length; index++) {
        if(file.file==fileList.value[index].file){
          let delurl=fileupList.value[index].url;                   
          new tools()
            .uploadFiledelete("", delurl)
            .then(({ data }) => {
          });
          fileupList.value.splice(index,1);
          fileList.value.splice(index,1); 
        }        
      }      
    };

    const submit = () => {
      isLoading.value = true;
      //保存前附件处理
      inputForm.value.annex = fileupList.value.map((option) => option.url).join("|");
      new nonReligiousInformationService().save(inputForm.value).then((res) => {
        if(res.data=="保存其他有害信息上报成功"){
          window.xm.showToast({
             message:"保存成功!"
          })
          onClickLeft();
        isLoading.value = false;
        }
      });
    };
    return {
      // 导航栏颜色
      selectColor,
      isLoading,
      inputForm,
      //非宗教类别
      showCategories,
      Categories,
      customFieldName,
      getCategories,
      //组织名称
      showOrganizations,
      selected2,
      reselected2,
      // 活动时间
      showAct,
      currentDate,
      currentTime,
      columnsType,
      getTime,
      // 返回
      onClickLeft,

      // 地区选择
      showArea,
      fieldNames,
      options,
      onFinish,
	    getLocation,
      cascaderValue,
      contentEditor,

      // 文件上传
      afterRead,
      fileList,
      fileupList,
      fjdelete,
      // change,
      submit,
      organ
    };
  },
};
</script>

<style scoped>
.van-cell__value .van-field__right-icon .van-icon-location {
  color: #36a7f3 !important;
}
.van-uploader .van-button {
  border: none;
  color: #36a7f3;
  top: -4px;
}
.van-dialog {
  width: 80%;
  top: 50%;
}
.van-loading {
  text-align: center;
  margin-top: 80px;
}
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}


.rowTextArea::v-deep .van-field__value {
  width: 94%;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 10px;
}
.rowTextArea::v-deep .van-cell {
  display: flow-root;
}
</style>