|
@@ -1,76 +1,230 @@
|
|
|
<template>
|
|
|
- <view style="padding: 10px">
|
|
|
- <view class="" style="padding: 10px; background: #ffffff">
|
|
|
- <u--form :model="form" ref="uForm" :rules="rules" labelWidth="130" labelAlign="right">
|
|
|
- <u-form-item label="组织机构代码:" prop="name" required>
|
|
|
- <u-input v-model="form.name" />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="单位名称:" prop="name" required>
|
|
|
- <u-input v-model="form.name" />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="法人代表:" prop="name" required>
|
|
|
- <u-input v-model="form.name" />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="单位地址:" prop="name" required>
|
|
|
- <u-input v-model="form.name" />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="详细地址:" prop="name" required>
|
|
|
- <u-input v-model="form.name" />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="消防管理人电话:" prop="name" required>
|
|
|
- <u-input v-model="form.name" />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="成立时间:" prop="name" required>
|
|
|
- <u-input v-model="form.name" />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="消防安全责任人:" prop="name">
|
|
|
- <u-input v-model="form.name" />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="消防安全管理人:" prop="name">
|
|
|
- <u-input v-model="form.name" />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="职工人数:" prop="name">
|
|
|
- <u-input v-model="form.name" />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="固定资产(万元):" prop="name">
|
|
|
- <u-input v-model="form.name" />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="占地面积:" prop="name">
|
|
|
- <u-input v-model="form.name" />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="建筑面积:" prop="name">
|
|
|
- <u-input v-model="form.name" />
|
|
|
- </u-form-item>
|
|
|
- </u--form>
|
|
|
- <u-button @click="submit">提交</u-button>
|
|
|
+ <view id="unitInfoCollection">
|
|
|
+ <view>
|
|
|
+ <u-notice-bar :text="noticeBarText" :duration="7000" color="#FF0000" bgColor="#FFFFFF"></u-notice-bar>
|
|
|
</view>
|
|
|
+
|
|
|
+ <view class="centerOne" v-if="pagingBool">
|
|
|
+ <view style="color: #333333; text-align: center; margin-top: 10px"> 单位基本信息(1/2) </view>
|
|
|
+
|
|
|
+ <view style="padding: 10px 0">
|
|
|
+ <view class="" style="padding: 10px 10px 20px 10px; background: #ffffff">
|
|
|
+ <u--form :model="form" ref="uForm" :rules="rules" labelWidth="130" style="padding-left: 9px">
|
|
|
+ <u-form-item label="组织机构代码" prop="name1" required :borderBottom="true">
|
|
|
+ <u-input v-model="form.name1" placeholder="请输入组织机构代码" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="单位名称" prop="name2" required :borderBottom="true">
|
|
|
+ <u-input v-model="form.name2" placeholder="请输入单位名称" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="法人代表" prop="name3" required :borderBottom="true">
|
|
|
+ <u-input v-model="form.name3" placeholder="请输入法人代表" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="单位地址" prop="name4" required :borderBottom="true" @click="handleAction('单位地址')">
|
|
|
+ <u-input
|
|
|
+ v-model="form.name4"
|
|
|
+ placeholder="请选择单位地址"
|
|
|
+ border="none"
|
|
|
+ suffixIcon="arrow-right"
|
|
|
+ :suffixIconStyle="addDisabled ? 'color: #c0c4cc' : 'color: #909399'"
|
|
|
+ :color="addDisabled ? '#c0c4cc' : ''"
|
|
|
+ :disabled="addDisabled"
|
|
|
+ />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="详细地址" prop="name5" required :borderBottom="true">
|
|
|
+ <u-input v-model="form.name5" placeholder="请输入详细地址" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="消防管理人电话" prop="name6" required :borderBottom="true">
|
|
|
+ <u-input v-model="form.name6" placeholder="请输入消防管理人电话" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="成立时间" prop="name7" required :borderBottom="true" @click="showTime = true">
|
|
|
+ <u-input v-model="form.name7" placeholder="请选择成立时间" border="none" suffixIcon="calendar" suffixIconStyle="color: #909399;font-size:22px" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="消防安全责任人" prop="name8" :borderBottom="true">
|
|
|
+ <u-input v-model="form.name8" placeholder="请输入消防安全责任人" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="消防安全管理人" prop="name9" :borderBottom="true">
|
|
|
+ <u-input v-model="form.name9" placeholder="请输入消防安全管理人" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="职工人数" prop="name10" :borderBottom="true">
|
|
|
+ <u-input type="digit" v-model="form.name10" placeholder="请输入职工人数" suffixIcon="人" suffixIconStyle="color:#999999;font-size:15px" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="固定资产(万元)" prop="name11" :borderBottom="true">
|
|
|
+ <u-input type="number" v-model="form.name11" placeholder="请输入固定资产(万元)" suffixIcon="万元" suffixIconStyle="color:#999999;font-size:15px" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="占地面积" prop="name12" :borderBottom="true">
|
|
|
+ <u-input type="number" v-model="form.name12" placeholder="请输入占地面积" suffixIcon="平方米" suffixIconStyle="color:#999999;font-size:15px" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="总建筑面积" prop="name13" :borderBottom="true">
|
|
|
+ <u-input type="number" v-model="form.name13" placeholder="请输入总建筑面积" suffixIcon="平方米" suffixIconStyle="color:#999999;font-size:15px" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ </u--form>
|
|
|
+
|
|
|
+ <view style="position: fixed; left: 0; right: 0; bottom: 0; padding: 15px">
|
|
|
+ <view>
|
|
|
+ <u-button type="primary" style="width: 100%; height: 40px; font-size: 14px" @click="nextSubmit" shape="circle"> 下一步 </u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="centerTwo" v-else>
|
|
|
+ <view style="color: #333333; text-align: center; margin-top: 10px"> 所在建筑信息(2/2) </view>
|
|
|
+
|
|
|
+ <view style="padding: 10px 0" v-for="(li, index) in form.list" :key="index">
|
|
|
+ <view class="" style="padding: 10px 10px 20px 10px; background: #ffffff">
|
|
|
+ <view style="overflow: hidden"><u-icon name="trash" color="#FF0000" size="20" style="float: right"></u-icon></view>
|
|
|
+
|
|
|
+ <u--form :model="li" ref="uForm" :rules="rules" labelWidth="130" style="padding-left: 9px">
|
|
|
+ <u-form-item label="建筑地址" prop="li.name1" required :borderBottom="true">
|
|
|
+ <u-input v-model="li.name1" placeholder="请输入建筑地址" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="建筑结构" prop="li.name2" required :borderBottom="true" @click="handleAction('建筑结构', index)">
|
|
|
+ <u-input v-model="li.name2" placeholder="请选择建筑结构" border="none" suffixIcon="arrow-right" :suffixIconStyle="'color: #909399'" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="地上层数" prop="li.name3" required :borderBottom="true">
|
|
|
+ <u-input v-model="li.name3" placeholder="请输入地上层数" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="地下层数" prop="li.name4" required :borderBottom="true">
|
|
|
+ <u-input v-model="li.name4" placeholder="请输入地下层数" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="建筑面积" prop="li.name5" required :borderBottom="true">
|
|
|
+ <u-input v-model="li.name5" placeholder="请输入建筑面积" suffixIcon="平方米" suffixIconStyle="color:#999999;font-size:15px" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="地下空间" prop="li.name6" required :borderBottom="true">
|
|
|
+ <u-input v-model="li.name6" placeholder="请输入地下空间面积" suffixIcon="平方米" suffixIconStyle="color:#999999;font-size:15px" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="使用性质" prop="li.name7" required :borderBottom="true" @click="handleAction('使用性质', index)">
|
|
|
+ <u-input v-model="li.name7" placeholder="请选择使用性质" border="none" suffixIcon="arrow-right" :suffixIconStyle="'color: #909399'" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="建成年份" prop="li.name8" required :borderBottom="true" @click="showTime = true">
|
|
|
+ <u-input v-model="li.name8" placeholder="请选择建成年份" border="none" suffixIcon="calendar" suffixIconStyle="color: #909399;font-size:22px" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="建筑高度" prop="li.name9" required :borderBottom="true">
|
|
|
+ <u-input v-model="li.name9" placeholder="请输入建筑高度" border="none" />
|
|
|
+ </u-form-item>
|
|
|
+ </u--form>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style="padding-bottom: 125px">
|
|
|
+ <u-button type="primary" style="width: 25%; height: 25px; margin-top: 10px" @click="addSubmit" shape="circle" icon="plus" size="mini"> 添加建筑 </u-button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style="position: fixed; left: 0; right: 0; bottom: 0; padding: 15px; background-color: #f1f1f1">
|
|
|
+ <view>
|
|
|
+ <u-button type="primary" style="width: 100%; height: 40px; font-size: 14px; margin-bottom: 15px" @click="backSubmit" shape="circle"> 上一步 </u-button>
|
|
|
+
|
|
|
+ <u-button type="primary" style="width: 100%; height: 40px; font-size: 14px" @click="submit" shape="circle"> 提交 </u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-action-sheet :show="actionShow" :actions="actionsList" :title="'请选择' + actionTitle" @close="actionShow = false" @select="selectAction"> </u-action-sheet>
|
|
|
+
|
|
|
+ <u-datetime-picker :show="showTime" v-model="Timevalue" mode="date" @close="showTime = false" @cancel="showTime = false" @confirm="timeSubmit" :closeOnClickOverlay="true"></u-datetime-picker>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
|
|
|
+import { onLoad, onShow, onHide, onLaunch, onReady } from "@dcloudio/uni-app";
|
|
|
import { ref, onMounted, inject, shallowRef, reactive, toRefs } from "vue";
|
|
|
|
|
|
+import publicStore from "@/store/modules/public.js";
|
|
|
+
|
|
|
+const newPublicStore = publicStore();
|
|
|
+
|
|
|
const dataList = reactive({
|
|
|
form: {
|
|
|
- name: "",
|
|
|
+ name1: "",
|
|
|
+ name2: "",
|
|
|
+ name3: "",
|
|
|
+ name4: "上海市闵行区",
|
|
|
+ name5: "",
|
|
|
+ name6: "",
|
|
|
+ name7: "",
|
|
|
+ name8: "",
|
|
|
+ name9: "",
|
|
|
+ name10: "",
|
|
|
+ name11: "",
|
|
|
+ name12: "",
|
|
|
+ name13: "",
|
|
|
+
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ name1: "",
|
|
|
+ name2: "砖混结构",
|
|
|
+ name3: "",
|
|
|
+ name4: "",
|
|
|
+ name5: "",
|
|
|
+ name6: "",
|
|
|
+ name7: "",
|
|
|
+ name8: "",
|
|
|
+ name9: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name1: "",
|
|
|
+ name2: "砖混结构",
|
|
|
+ name3: "",
|
|
|
+ name4: "",
|
|
|
+ name5: "",
|
|
|
+ name6: "",
|
|
|
+ name7: "",
|
|
|
+ name8: "",
|
|
|
+ name9: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
rules: {
|
|
|
- name: [
|
|
|
+ name1: [
|
|
|
{
|
|
|
required: true,
|
|
|
- message: "请输入姓名",
|
|
|
+ message: "请输入组织机构代码",
|
|
|
trigger: ["blur", "change"],
|
|
|
},
|
|
|
+ {
|
|
|
+ type: "string",
|
|
|
+ min: 18,
|
|
|
+ required: true,
|
|
|
+ message: "请输入18位组织机构代码",
|
|
|
+ trigger: ["change"],
|
|
|
+ },
|
|
|
],
|
|
|
+
|
|
|
+ name4: [],
|
|
|
+
|
|
|
+ name7: [],
|
|
|
},
|
|
|
+ noticeBarText: "注:信息提交后不可修改,提交前请核对填写是否有误",
|
|
|
+ pagingBool: false,
|
|
|
+ addDisabled: true,
|
|
|
+
|
|
|
+ actionIndex: 0,
|
|
|
+ actionTitle: "",
|
|
|
+ actionShow: false,
|
|
|
+ actionsList: [],
|
|
|
+ showTime: false,
|
|
|
+ Timevalue: Number(new Date()),
|
|
|
});
|
|
|
|
|
|
-const { form, rules } = toRefs(dataList);
|
|
|
+const { form, rules, noticeBarText, pagingBool, addDisabled, actionTitle, actionIndex, actionsList, actionShow, showTime, Timevalue } = toRefs(dataList);
|
|
|
|
|
|
const uForm = ref(null);
|
|
|
|
|
|
-function submit() {
|
|
|
+/**
|
|
|
+ * @添加建筑
|
|
|
+ * @按钮点击事件
|
|
|
+ */
|
|
|
+function addSubmit() {}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @下一步
|
|
|
+ * @按钮点击事件
|
|
|
+ */
|
|
|
+function nextSubmit() {
|
|
|
+ console.log(form.value);
|
|
|
+ pagingBool.value = false;
|
|
|
+
|
|
|
uForm.value
|
|
|
.validate()
|
|
|
.then((res) => {
|
|
@@ -80,6 +234,122 @@ function submit() {
|
|
|
uni.$u.toast("校验失败");
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @上一步
|
|
|
+ * @按钮点击事件
|
|
|
+ */
|
|
|
+function backSubmit() {
|
|
|
+ pagingBool.value = true;
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @提交
|
|
|
+ * @按钮点击事件
|
|
|
+ */
|
|
|
+function submit() {}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @action弹出框点击事件
|
|
|
+ */
|
|
|
+function handleAction(value, index) {
|
|
|
+ console.log(value)
|
|
|
+
|
|
|
+ if (value == "单位地址") {
|
|
|
+ if (!addDisabled.value) {
|
|
|
+ actionShow.value = true;
|
|
|
+ actionsList.value = [
|
|
|
+ {
|
|
|
+ name: "上海市闵行区",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ actionTitle.value = "单位地址";
|
|
|
+ }
|
|
|
+ } else if (value == "建筑结构") {
|
|
|
+ actionShow.value = true;
|
|
|
+ actionsList.value = [
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ name: "砖混结构",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ name: "钢筋混凝土",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 3,
|
|
|
+ name: "钢结构",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 4,
|
|
|
+ name: "大型钢筋混凝土",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 5,
|
|
|
+ name: "木质结构",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 6,
|
|
|
+ name: "砖木结构",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ actionTitle.value = "建筑结构";
|
|
|
+ actionIndex.value = index;
|
|
|
+ } else if (value == "使用性质") {
|
|
|
+ actionShow.value = true;
|
|
|
+ actionsList.value = [
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ name: "砖混结构",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ name: "钢筋混凝土",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 3,
|
|
|
+ name: "钢结构",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 4,
|
|
|
+ name: "大型钢筋混凝土",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 5,
|
|
|
+ name: "木质结构",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 6,
|
|
|
+ name: "砖木结构",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ actionTitle.value = "使用性质";
|
|
|
+ actionIndex.value = index;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @action弹出框选择事件
|
|
|
+ */
|
|
|
+function selectAction(e) {
|
|
|
+ console.log(e);
|
|
|
+
|
|
|
+ form.value.name4 = e.name;
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @时间选择器
|
|
|
+ * @确定按钮事件
|
|
|
+ */
|
|
|
+function timeSubmit(data) {
|
|
|
+ let time = newPublicStore.formatterDate(data.value);
|
|
|
+ let timeData = time.split(" ")[0];
|
|
|
+ form.value.name7 = timeData;
|
|
|
+ showTime.value = false;
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss"></style>
|
|
|
+<style lang="scss">
|
|
|
+#unitInfoCollection {
|
|
|
+}
|
|
|
+</style>
|