|
|
@@ -0,0 +1,383 @@
|
|
|
+<template>
|
|
|
+ <van-nav-bar
|
|
|
+ title="信息上报中心"
|
|
|
+ left-text=""
|
|
|
+ left-arrow
|
|
|
+ @click-left="onClickLeft"
|
|
|
+ />
|
|
|
+ <div class="main">
|
|
|
+ <p class="title">场所检查情况上报</p>
|
|
|
+ <div class="formArea">
|
|
|
+ <p class="miniTitle">基础信息</p>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.activity"
|
|
|
+ center
|
|
|
+ label="活动名称:"
|
|
|
+ placeholder="请填写活动名称"
|
|
|
+ input-align="right"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.place"
|
|
|
+ readonly
|
|
|
+ required
|
|
|
+ label="场所名称:"
|
|
|
+ placeholder="请选择"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ @click="showPlace = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model:show="showPlace" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ title="活动场所"
|
|
|
+ :columns="places"
|
|
|
+ @cancel="showPlace = false"
|
|
|
+ @confirm="getPlace"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.activityTime"
|
|
|
+ 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
|
|
|
+ title="活动时间"
|
|
|
+ :tabs="['选择日期', '选择时间']"
|
|
|
+ next-step-text="下一步"
|
|
|
+ @confirm="getTime"
|
|
|
+ @cancel="showAct = false"
|
|
|
+ >
|
|
|
+ <van-date-picker v-model="currentDate" />
|
|
|
+ <van-time-picker v-model="currentTime" />
|
|
|
+ </van-picker-group>
|
|
|
+ </van-popup>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.countPerson"
|
|
|
+ center
|
|
|
+ label="参会人数:"
|
|
|
+ placeholder="请填写参会人数"
|
|
|
+ input-align="right"
|
|
|
+ type="digit"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.list"
|
|
|
+ center
|
|
|
+ required
|
|
|
+ label="已知名单:"
|
|
|
+ placeholder="请选择参会已知名单"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ @click="showPerson = true"
|
|
|
+ />
|
|
|
+ <van-dialog
|
|
|
+ v-model:show="showPerson"
|
|
|
+ title="选择人员名单"
|
|
|
+ show-cancel-button
|
|
|
+ @confirm="reselected"
|
|
|
+ >
|
|
|
+ <person-list @selected="selected"></person-list>
|
|
|
+ </van-dialog>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.portname"
|
|
|
+ center
|
|
|
+ label="报告人:"
|
|
|
+ placeholder="请选择报告人"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.area"
|
|
|
+ center
|
|
|
+ label="参加范围:"
|
|
|
+ placeholder="请填写参加范围"
|
|
|
+ input-align="right"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.activityPlace"
|
|
|
+ center
|
|
|
+ readonly
|
|
|
+ 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"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.address"
|
|
|
+ center
|
|
|
+ label="详细地址:"
|
|
|
+ placeholder="请填写活参加地点"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="location"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.money"
|
|
|
+ center
|
|
|
+ label="经费来源:"
|
|
|
+ placeholder="请选择"
|
|
|
+ input-align="right"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.activityName"
|
|
|
+ center
|
|
|
+ label="活动负责人:"
|
|
|
+ placeholder="请选择活动负责人"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ @click="showReport = true"
|
|
|
+ />
|
|
|
+ <van-dialog
|
|
|
+ v-model:show="showReport"
|
|
|
+ title="选择活动负责人"
|
|
|
+ show-cancel-button
|
|
|
+ >
|
|
|
+ <person-list></person-list>
|
|
|
+ </van-dialog>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.tel"
|
|
|
+ center
|
|
|
+ type="tel"
|
|
|
+ label="联系方式:"
|
|
|
+ placeholder="请填写联系方式"
|
|
|
+ input-align="right"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field name="uploader" label="安全预案:">
|
|
|
+ <template #input>
|
|
|
+ <van-uploader>
|
|
|
+ <van-button icon="plus">上传文件</van-button>
|
|
|
+ </van-uploader>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <div class="rowTextArea">
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.into"
|
|
|
+ center
|
|
|
+ rows="2"
|
|
|
+ type="textarea"
|
|
|
+ label="主题内容:"
|
|
|
+ label-align="top"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </van-cell-group>
|
|
|
+ </div>
|
|
|
+ <div class="subbtn">
|
|
|
+ <van-button type="primary">提交</van-button>
|
|
|
+ <van-button type="default" hairline>取消</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import { reactive, ref } from "vue";
|
|
|
+ import personList from "../personList.vue";
|
|
|
+ export default {
|
|
|
+ components: { personList },
|
|
|
+ setup() {
|
|
|
+ // 返回
|
|
|
+ const onClickLeft = () => {
|
|
|
+ history.back();
|
|
|
+ };
|
|
|
+ // 活动信息
|
|
|
+ const placeActivity = reactive({
|
|
|
+ activity: "",
|
|
|
+ place: "",
|
|
|
+ activityTime: "",
|
|
|
+ countPerson: "",
|
|
|
+ list: "",
|
|
|
+ portname: "",
|
|
|
+ area: "",
|
|
|
+ activityPlace: "",
|
|
|
+ address: "",
|
|
|
+ money: "",
|
|
|
+ activityName: "",
|
|
|
+ tel: "",
|
|
|
+ file: "",
|
|
|
+ into: "",
|
|
|
+ });
|
|
|
+ // 场所名称
|
|
|
+ const places = [
|
|
|
+ { text: "杭州", value: "Hangzhou" },
|
|
|
+ { text: "宁波", value: "Ningbo" },
|
|
|
+ { text: "温州", value: "Wenzhou" },
|
|
|
+ { text: "绍兴", value: "Shaoxing" },
|
|
|
+ { text: "湖州", value: "Huzhou" },
|
|
|
+ ];
|
|
|
+ let showPlace = ref(false);
|
|
|
+ const getPlace = ({ selectedOptions }) => {
|
|
|
+ showPlace.value = false;
|
|
|
+ placeActivity.place = selectedOptions[0].text;
|
|
|
+ };
|
|
|
+ // 获取活动时间
|
|
|
+ let showAct = ref(false);
|
|
|
+ let currentDate = ref(["" + new Date().getFullYear(), "01", "01"]);
|
|
|
+ let currentTime = ref(["00", "00"]);
|
|
|
+ const getTime = () => {
|
|
|
+ showAct.value = false;
|
|
|
+ placeActivity.activityTime = `${currentDate.value.join(
|
|
|
+ "-"
|
|
|
+ )} ${currentTime.value.join(":")}`;
|
|
|
+ };
|
|
|
+ // 已知名单
|
|
|
+ let showPerson = ref(false);
|
|
|
+ // 活动负责人
|
|
|
+ let showReport = ref(false);
|
|
|
+ const show = () => {
|
|
|
+ showPerson = true;
|
|
|
+ };
|
|
|
+ let list = "";
|
|
|
+ const selected = (val) => {
|
|
|
+
|
|
|
+ list = val;
|
|
|
+ };
|
|
|
+ const reselected = () => {
|
|
|
+ placeActivity.list = list;
|
|
|
+ };
|
|
|
+ // 地区选择
|
|
|
+ let showArea = ref(false);
|
|
|
+ const cascaderValue = ref("");
|
|
|
+ // 选项列表，children 代表子选项，支持多级嵌套
|
|
|
+ const options = [
|
|
|
+ {
|
|
|
+ text: "浙江省",
|
|
|
+ value: "330000",
|
|
|
+ children: [{ text: "杭州市", value: "330100" }],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "江苏省",
|
|
|
+ value: "320000",
|
|
|
+ children: [{ text: "南京市", value: "320100" }],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ // 全部选项选择完毕后，会触发 finish 事件
|
|
|
+ const onFinish = ({ selectedOptions }) => {
|
|
|
+ showArea.value = false;
|
|
|
+ placeActivity.activityPlace = selectedOptions
|
|
|
+ .map((option) => option.text)
|
|
|
+ .join("/");
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ placeActivity,
|
|
|
+ // 活动场所
|
|
|
+ showPlace,
|
|
|
+ places,
|
|
|
+ getPlace,
|
|
|
+ // 活动时间
|
|
|
+ showAct,
|
|
|
+ currentDate,
|
|
|
+ currentTime,
|
|
|
+ getTime,
|
|
|
+ // 返回
|
|
|
+ onClickLeft,
|
|
|
+ // 人员选择
|
|
|
+ showPerson,
|
|
|
+ showReport,
|
|
|
+ selected,
|
|
|
+ reselected,
|
|
|
+ // 地区选择
|
|
|
+ showArea,
|
|
|
+ options,
|
|
|
+ onFinish,
|
|
|
+ cascaderValue,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style scoped>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .main p {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #36a7f3;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ .miniTitle {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .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-dialog {
|
|
|
+ width: 80%;
|
|
|
+ top: 50%;
|
|
|
+ }
|
|
|
+ </style>
|
