|
|
@@ -1,13 +1,501 @@
|
|
|
<template>
|
|
|
-
|
|
|
+ <van-nav-bar
|
|
|
+ fixed
|
|
|
+ title="场所消防设备信息"
|
|
|
+ left-arrow
|
|
|
+ @click-left="onClickLeft"
|
|
|
+ :style="{ 'background-color': selectColor }"
|
|
|
+ />
|
|
|
+ <div class="main">
|
|
|
+ <div class="banner">
|
|
|
+ <img src="../../../../public/loginbg/banner.jpg" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <van-form @submit="submit" show-error :show-error-message="false">
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="inputForm.name"
|
|
|
+ center
|
|
|
+ required
|
|
|
+ :rules="[{ required: true }]"
|
|
|
+ label="设备名称："
|
|
|
+ placeholder="请填写设备名称"
|
|
|
+ input-align="right"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="locationName"
|
|
|
+ readonly
|
|
|
+ required
|
|
|
+ :rules="[{ required: true }]"
|
|
|
+ label="所属场所："
|
|
|
+ placeholder="请选择所属场所"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ @click="hs_site = true"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ <van-dialog
|
|
|
+ v-model:show="hs_site"
|
|
|
+ title="所属场所"
|
|
|
+ show-cancel-button
|
|
|
+ >
|
|
|
+ <div class="dialog">
|
|
|
+ <van-list
|
|
|
+ v-model:loading="loading"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ @load="onLoad"
|
|
|
+ >
|
|
|
+ <van-radio-group v-model="checked">
|
|
|
+ <van-cell-group inset>
|
|
|
+ <van-cell
|
|
|
+ v-for="item in sitelist"
|
|
|
+ :key="item"
|
|
|
+ :title="item.name"
|
|
|
+ clickable
|
|
|
+ @click="getsite(item)"
|
|
|
+ >
|
|
|
+ <template #right-icon>
|
|
|
+ <van-radio :name="item.id" @click="getsite(item)" />
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </van-cell-group>
|
|
|
+ </van-radio-group>
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
+ </van-dialog>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="inputForm.personInCharge"
|
|
|
+ center
|
|
|
+ required
|
|
|
+ label-width="7.2em"
|
|
|
+ :rules="[{ required: true }]"
|
|
|
+ label="消防负责人："
|
|
|
+ placeholder="请填写消防负责人"
|
|
|
+ input-align="right"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="inputForm.contactInformation"
|
|
|
+ center
|
|
|
+ label="联系方式："
|
|
|
+ placeholder="请填写联系方式"
|
|
|
+ input-align="right"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="typeOfEmployeesName"
|
|
|
+ readonly
|
|
|
+ required
|
|
|
+ :rules="[{ required: true }]"
|
|
|
+ label-width="7.2em"
|
|
|
+ label="设备类型："
|
|
|
+ placeholder="请选择设备类型"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ @click="hs_typeOfEmployees = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model:show="hs_typeOfEmployees" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ title="任职情况"
|
|
|
+ :columns="$dictUtils.getDictList('hs_site_fire_type')"
|
|
|
+ :columns-field-names="{
|
|
|
+ text: 'label',
|
|
|
+ value: 'value',
|
|
|
+ }"
|
|
|
+ @cancel="hs_typeOfEmployees = false"
|
|
|
+ @confirm="gettypeOfEmployees"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="inputForm.effectiveDateStart"
|
|
|
+ center
|
|
|
+ required
|
|
|
+ clearable
|
|
|
+ readonly
|
|
|
+ :rules="[{ required: true }]"
|
|
|
+ label-width="8em"
|
|
|
+ label="有效起始时间:"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ placeholder="请选择有效起始时间"
|
|
|
+ @click="hs_Start = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model:show="hs_Start" round position="bottom">
|
|
|
+ <van-date-picker
|
|
|
+ v-model="currentDate"
|
|
|
+ title="选择日期"
|
|
|
+ :min-date="minDate"
|
|
|
+ :max-date="maxDate"
|
|
|
+ @cancel="hs_Start = false"
|
|
|
+ @confirm="getStart"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="inputForm.effectiveDateEnd"
|
|
|
+ center
|
|
|
+ required
|
|
|
+ clearable
|
|
|
+ readonly
|
|
|
+ :rules="[{ required: true }]"
|
|
|
+ label-width="8em"
|
|
|
+ label="有效结束时间:"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ placeholder="请选择有效结束时间"
|
|
|
+ @click="hs_End = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model:show="hs_End" round position="bottom">
|
|
|
+ <van-date-picker
|
|
|
+ v-model="currentDate"
|
|
|
+ title="选择日期"
|
|
|
+ :min-date="minDate"
|
|
|
+ :max-date="maxDate"
|
|
|
+ @cancel="hs_End = false"
|
|
|
+ @confirm="getEnd"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="inputForm.nextMaintenanceDate"
|
|
|
+ center
|
|
|
+ clearable
|
|
|
+ readonly
|
|
|
+ label-width="8em"
|
|
|
+ label="下次保养时期:"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ placeholder="请选择下次保养时期"
|
|
|
+ @click="hs_upkeep = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model:show="hs_upkeep" round position="bottom">
|
|
|
+ <van-date-picker
|
|
|
+ v-model="currentDate"
|
|
|
+ title="选择日期"
|
|
|
+ :min-date="minDate"
|
|
|
+ :max-date="maxDate"
|
|
|
+ @cancel="hs_upkeep = false"
|
|
|
+ @confirm="getupkeep"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="inputForm.position"
|
|
|
+ center
|
|
|
+ required
|
|
|
+ :rules="[{ required: true }]"
|
|
|
+ label="位置："
|
|
|
+ placeholder="请填写设备位置"
|
|
|
+ input-align="right"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ name="uploader"
|
|
|
+ label-align="top"
|
|
|
+ label-width="8em"
|
|
|
+ label="设备图片:"
|
|
|
+ >
|
|
|
+ <template #input>
|
|
|
+ <van-uploader
|
|
|
+ readonly
|
|
|
+ v-model="fileList"
|
|
|
+ :max-count="5"
|
|
|
+ accept=""
|
|
|
+ :preview-full-image="false"
|
|
|
+ :before-delete="deleteRead"
|
|
|
+ @click-upload="chooseImg"
|
|
|
+ >
|
|
|
+ </van-uploader>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </van-cell-group>
|
|
|
+ <div class="subbtn">
|
|
|
+ <van-button type="primary" native-type="submit">提交</van-button>
|
|
|
+ <van-button @click="onClickLeft" type="default" hairline
|
|
|
+ >取消</van-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </van-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { onMounted, ref, getCurrentInstance } from "vue";
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+import placeFirefighting from "@/api/placeFirefighting/placeFirefighting";
|
|
|
+import PlaceRegister from "@/api/placeRegister/placeRegister";
|
|
|
+import placeRegister from '@/api/placeRegister/placeRegister';
|
|
|
+import tools from "@/api/sys/tools";
|
|
|
+import $base from "@/utils/config";
|
|
|
export default {
|
|
|
+ setup() {
|
|
|
+ const inputForm = ref({
|
|
|
+ id: "",
|
|
|
+ name: "",
|
|
|
+ siteId: "",
|
|
|
+ personInCharge: "",
|
|
|
+ contactInformation: "",
|
|
|
+ equipmentType: "",
|
|
|
+ devicePicture: "",
|
|
|
+ effectiveDate: [],
|
|
|
+ effectiveDateStart: "",
|
|
|
+ effectiveDateEnd: "",
|
|
|
+ nextMaintenanceDate: "",
|
|
|
+ position: "",
|
|
|
+ });
|
|
|
|
|
|
-}
|
|
|
-</script>
|
|
|
+ const current = getCurrentInstance();
|
|
|
+ onMounted(() => {
|
|
|
+ var id = JSON.parse(router.currentRoute.value.query.id);
|
|
|
+ new placeFirefighting().placeFirefightingid(id).then((res) => {
|
|
|
+ inputForm.value = res;
|
|
|
+ typeOfEmployeesName.value =
|
|
|
+ current.appContext.config.globalProperties.$dictUtils.getDictLabel(
|
|
|
+ "hs_site_fire_type",
|
|
|
+ inputForm.value.equipmentType
|
|
|
+ );
|
|
|
+ let csid = inputForm.value.siteId
|
|
|
+ new placeRegister().queryById(csid).then((data)=>{
|
|
|
+ locationName.value = data.name
|
|
|
+ })
|
|
|
+ inputForm.value.devicePicture.split("|").forEach((item) => {
|
|
|
+ if (item.trim().length > 0) {
|
|
|
+ fileImg.value.push({
|
|
|
+ name: decodeURIComponent(
|
|
|
+ item.substring(item.lastIndexOf("/") + 1)
|
|
|
+ ),
|
|
|
+ url: $base + item.replace("程序附件//", "程序附件/"),
|
|
|
+ id: item.replace("程序附件//", "程序附件/"),
|
|
|
+ });
|
|
|
+ fileList.value.push({
|
|
|
+ name: decodeURIComponent(
|
|
|
+ item.substring(item.lastIndexOf("/") + 1)
|
|
|
+ ),
|
|
|
|
|
|
-<style>
|
|
|
+ url: $base + item.replace("程序附件//", "程序附件/"),
|
|
|
+ id: item.replace("程序附件//", "程序附件/"),
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // 导航栏颜色
|
|
|
+ const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
|
|
|
+ //返回取消按钮
|
|
|
+ const onClickLeft = () => {
|
|
|
+ history.back();
|
|
|
+ };
|
|
|
+ // 所属场所
|
|
|
+ const locationName = ref("");
|
|
|
+ const checked = ref("");
|
|
|
+ const sitelist = ref([]);
|
|
|
+ let hs_site = ref(false);
|
|
|
+ const getsite = (val) => {
|
|
|
+ let id = "";
|
|
|
+ id = val.id;
|
|
|
+ locationName.value = val.name;
|
|
|
+ const json = Object.assign(inputForm.value, { siteId: val.id });
|
|
|
+ inputForm.value = json;
|
|
|
+ checked.value = val.id;
|
|
|
+ };
|
|
|
+ const loading = ref(false);
|
|
|
+ const finished = ref(false);
|
|
|
+ const refreshing = ref(false);
|
|
|
+ let index = 0;
|
|
|
+ const onLoad = () => {
|
|
|
+ loading.value = true;
|
|
|
+ finished.value = false;
|
|
|
+ // 异步更新数据
|
|
|
+ new PlaceRegister()
|
|
|
+ .religiousList({
|
|
|
+ current: index + 1,
|
|
|
+ size: 10,
|
|
|
+ })
|
|
|
+ .then(({ records, pages }) => {
|
|
|
+ sitelist.value = sitelist.value.concat(records);
|
|
|
+ // 加载状态结束
|
|
|
+ loading.value = false;
|
|
|
+ if (index + 1 >= pages) {
|
|
|
+ finished.value = true;
|
|
|
+ }
|
|
|
+ index++;
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 设备类型
|
|
|
+ const typeOfEmployeesName = ref("");
|
|
|
+ let hs_typeOfEmployees = ref(false);
|
|
|
+ const gettypeOfEmployees = ({ selectedOptions }) => {
|
|
|
+ hs_typeOfEmployees.value = false;
|
|
|
+ const json = Object.assign(inputForm.value, {
|
|
|
+ equipmentType: selectedOptions[0].value,
|
|
|
+ });
|
|
|
+ inputForm.value = json;
|
|
|
+ typeOfEmployeesName.value = selectedOptions[0].label;
|
|
|
+ };
|
|
|
+ //有效期起始时间
|
|
|
+ let hs_Start = ref(false);
|
|
|
+ const getStart = ({ selectedOptions }) => {
|
|
|
+ hs_Start.value = false;
|
|
|
+ const json = Object.assign(inputForm.value, {
|
|
|
+ effectiveDateStart:
|
|
|
+ selectedOptions[0].text +
|
|
|
+ "-" +
|
|
|
+ selectedOptions[1].text +
|
|
|
+ "-" +
|
|
|
+ selectedOptions[2].text +
|
|
|
+ " 00:00:00",
|
|
|
+ });
|
|
|
+ inputForm.value = json;
|
|
|
+ };
|
|
|
+ //有效期结束时间
|
|
|
+ let hs_End = ref(false);
|
|
|
+ const getEnd = ({ selectedOptions }) => {
|
|
|
+ hs_End.value = false;
|
|
|
+ const json = Object.assign(inputForm.value, {
|
|
|
+ effectiveDateEnd:
|
|
|
+ selectedOptions[0].text +
|
|
|
+ "-" +
|
|
|
+ selectedOptions[1].text +
|
|
|
+ "-" +
|
|
|
+ selectedOptions[2].text +
|
|
|
+ " 00:00:00",
|
|
|
+ });
|
|
|
+ inputForm.value = json;
|
|
|
+ };
|
|
|
+ //下次保养日期
|
|
|
+ let hs_upkeep = ref(false);
|
|
|
+ const getupkeep = ({ selectedOptions }) => {
|
|
|
+ hs_upkeep.value = false;
|
|
|
+ const json = Object.assign(inputForm.value, {
|
|
|
+ nextMaintenanceDate:
|
|
|
+ selectedOptions[0].text +
|
|
|
+ "-" +
|
|
|
+ selectedOptions[1].text +
|
|
|
+ "-" +
|
|
|
+ selectedOptions[2].text +
|
|
|
+ " 00:00:00",
|
|
|
+ });
|
|
|
+ inputForm.value = json;
|
|
|
+ };
|
|
|
+ //图片上传
|
|
|
+ let fileList = ref([]);
|
|
|
+ let fileImg = ref([]);
|
|
|
+ const chooseImg = () => {
|
|
|
+ xm.chooseFile({
|
|
|
+ count: 1,
|
|
|
+ name: "file",
|
|
|
+ url:
|
|
|
+ $base +
|
|
|
+ `/sys/file/webupload/upload?uploadPath=religioussites/fire/fireEquipment`,
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "multipart/form-data",
|
|
|
+ token: window.localStorage.getItem("MZ_TOKEN"),
|
|
|
+ },
|
|
|
+ }).then((res) => {
|
|
|
+ let data = res[0].data;
|
|
|
+ data.name = decodeURIComponent(
|
|
|
+ data.id.substring(data.url.lastIndexOf("/") + 1)
|
|
|
+ );
|
|
|
+ data.url = $base + data.url;
|
|
|
+ fileImg.value.push(data);
|
|
|
+ fileList.value.push(data);
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 删除文件
|
|
|
+ const deleteRead = (file) => {
|
|
|
+ //删除文件操作
|
|
|
+ for (let index = 0; index < fileList.value.length; index++) {
|
|
|
+ if (file.id == fileList.value[index].id) {
|
|
|
+ fileList.value.splice(index, 1);
|
|
|
+ if (fileImg.value[index]) {
|
|
|
+ let delurl = fileImg.value[index].url;
|
|
|
+ new tools().uploadFiledelete("", delurl).then(({ data }) => {});
|
|
|
+ fileImg.value.splice(index, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ let router = useRouter();
|
|
|
+ //数据提交
|
|
|
+ const submit = () => {
|
|
|
+ //保存前附件处理
|
|
|
+ inputForm.value.devicePicture = fileImg.value
|
|
|
+ .map((option) => option.id)
|
|
|
+ .join("|");
|
|
|
+ new placeFirefighting()
|
|
|
+ .placeFirefightingsave(inputForm.value)
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ if (res.status == 200) {
|
|
|
+ xm.showToast({
|
|
|
+ message: "设备添加成功",
|
|
|
+ });
|
|
|
+ router.push({
|
|
|
+ path: "/placeFirefightingList",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ xm.showToast({
|
|
|
+ message: "设备添加失败",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ inputForm,
|
|
|
+ selectColor,
|
|
|
+ onClickLeft,
|
|
|
+ //所属场所
|
|
|
+ locationName,
|
|
|
+ checked,
|
|
|
+ hs_site,
|
|
|
+ getsite,
|
|
|
+ sitelist,
|
|
|
+ loading,
|
|
|
+ finished,
|
|
|
+ onLoad,
|
|
|
+ refreshing,
|
|
|
+ //设备类型
|
|
|
+ typeOfEmployeesName,
|
|
|
+ hs_typeOfEmployees,
|
|
|
+ gettypeOfEmployees,
|
|
|
+ // 有效起始时间
|
|
|
+ hs_Start,
|
|
|
+ getStart,
|
|
|
+ // 有效结束时间
|
|
|
+ hs_End,
|
|
|
+ getEnd,
|
|
|
+ // 下次保养日期
|
|
|
+ hs_upkeep,
|
|
|
+ getupkeep,
|
|
|
+ //图片上传
|
|
|
+ fileList,
|
|
|
+ chooseImg,
|
|
|
+ deleteRead,
|
|
|
+ //数据提交
|
|
|
+ submit,
|
|
|
+ };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
|
|
|
+<style >
|
|
|
+.dialog {
|
|
|
+ width: 100%;
|
|
|
+ height: 400px;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
</style>
|
guoqing