feat(records): change id

src/app/map/App.vue

@@ -1,14 +1,52 @@
 <template>
   <!-- <div>地图页面</div> -->
-  <div ref="mapEl" class="map-container"></div>
+
+  <div class="tabbar">
+    <div class="nav">
+
+      <el-button-group class="ml-4">
+        <el-button :type="currentType(0) ? 'primary' : 'default'" @click="handleSelect(0)">地图</el-button>
+        <el-button :type="currentType(1) ? 'primary' : 'default'" @click="handleSelect(1)">卡片</el-button>
+      </el-button-group>
+
+    </div>
+  </div>
+
+  <div ref="mapEl" class="map-container" v-show="currentType(0)"></div>
+
+  <div class="card-container" v-show="currentType(1)">
+
+
+    <div class="card-list">
+      <template v-for="item of 10">
+        <el-card style="max-width: 380px">
+          <template #header>Yummy hamburger</template>
+          <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            style="width: 100%" />
+        </el-card>
+      </template>
+
+
+    </div>
+
+  </div>
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref, computed } from "vue";
 import AMapLoader from "@amap/amap-jsapi-loader";
-import { onMounted, ref } from "vue";
+
 import axios from 'axios';
 import { getFuseCodeLink } from "../../view/case/help";
 
+
+const current = ref(0);
+
+const currentType = computed(() => (type: number) => current.value === type)
+const handleSelect = (type: number) => {
+  current.value = type
+}
+
 const getQuery = (
   caseId: number,
   share: boolean = false,
@@ -27,6 +65,8 @@ const request = axios.create({
 });
 const mapEl = ref<HTMLDivElement>();
 
+
+
 const getDataQuest = () => {
   return new Promise(async (reslove, reject) => {
 
@@ -122,4 +162,40 @@ body {
   width: 100%;
   height: 100vh;
 }
+
+.tabbar {
+  display: flex;
+  width: 100%;
+  position: fixed;
+  top: 30px;
+  z-index: 10000;
+  justify-items: center;
+  justify-content: center;
+}
+
+.tabbar .nav {
+  display: flex;
+  background: white;
+}
+
+.tabbar .nav .nav_item {
+  padding: 10px;
+  cursor: pointer;
+
+}
+
+.card-container {
+  width: 100%;
+
+}
+
+.card-list {
+  margin: 0 auto;
+  margin-top: 100px;
+  display: flex;
+  gap: 50px 25px;
+  width: 80%;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
 </style>

src/request/urls.ts

@@ -186,6 +186,12 @@ export const caseInquestInfo = "/fusion-xj/caseInquest/info";
 export const caseInquestOpt = "/fusion-xj/caseInquest/saveOrUpdate";
 export const caseInquestExport = "/fusion-xj/caseInquest/downDocx";
 
+//提取清单
+export const caseExtractDetail = "/fusion-xj/caseExtractDetail/info";
+export const caseExtractDetailOpt = "/fusion-xj/caseExtractDetail/saveOrUpdate";
+export const caseExtractDetailExport = "/fusion-xj/caseExtractDetail/downDocx";
+
+
 // 火调链接地址设置密码
 export const setCasePsw = "/fusion-xj/web/fireProject/updateRandomCode";
 export const getCasePsw = "/fusion-xj/web/fireProject/getRandCode";

src/store/case.ts

@@ -13,7 +13,10 @@ import {
   caseApiUpdateSort,
   caseInquestInfo,
   caseInquestOpt,
-  caseInquestExport
+  caseInquestExport,
+  caseExtractDetail,
+  caseExtractDetailOpt,
+  caseExtractDetailExport
 } from "@/request";
 import { ModelScene, QuoteScene, Scene, SceneType } from "./scene";
 import { CaseFile } from "./caseFile";
@@ -106,4 +109,15 @@ export const saveCaseInquestInfo = (caseId: number, data) =>
   axios.post(caseInquestOpt, { caseId, ...data });
 
 export const exportCaseInquestInfo = (caseId: number) =>
-  axios.get(caseInquestExport, { params: { caseId, ingoreRes: true }, responseType: 'blob' });
+  axios.get(caseInquestExport, { params: { caseId, ingoreRes: true }, responseType: 'blob' });
+
+
+export const getCaseDetailInfo = (caseId: number) =>
+  axios.get(caseExtractDetail, { params: { caseId } });
+
+
+export const saveCaseDetailInfo = (caseId: number, data) =>
+  axios.post(caseExtractDetailOpt, { caseId, ...data });
+
+export const exportCaseDetailInfo = (caseId: number) =>
+  axios.get(caseExtractDetailExport, { params: { caseId, ingoreRes: true }, responseType: 'blob' });

src/view/case/records/manifest.vue

@@ -1,37 +1,37 @@
 <template>
-  <!-- 勘验笔录{{ props.caseId }} -->
+
   <div class="records">
     <div class="header">
       <el-button type="primary" @click="handleSave">保存</el-button>
-      <el-button>导出</el-button>
+      <el-button @click="handleExport">导出</el-button>
     </div>
 
     <div class="content">
       <div class="line">
         <span>起火单位/地址:</span>
-        <el-input class="input" v-model="data.times" placeholder="" style="width: 100%;" />
+        <el-input class="input" v-model="data.address" placeholder="" style="width: 100%;" />
 
       </div>
 
       <div class="line">
         <span>提取日期:</span>
         <div>
-          <el-input class="input" :maxlength="4" type="text" v-model="data.start.year" placeholder=""
+          <el-input class="input" :maxlength="4" type="text" v-model="data.time.year" placeholder=""
             style="width: 80px;" />
           <span>年</span>
-          <el-input class="input" :maxlength="2" type="text" v-model="data.start.month" placeholder=""
+          <el-input class="input" :maxlength="2" type="text" v-model="data.time.month" placeholder=""
             style="width: 80px;" />
           <span>月</span>
-          <el-input class="input" :maxlength="2" type="text" v-model="data.start.day" placeholder=""
+          <el-input class="input" :maxlength="2" type="text" v-model="data.time.day" placeholder=""
             style="width: 80px;" />
           <span>日</span>
         </div>
 
       </div>
 
-      <div class="lists">
+      <div class="detail">
         <span class="sub-tit">提取清单：</span>
-        <template v-for=" (list, index) in data.lists">
+        <template v-for=" (list, index) in data.detail">
           <div class="con">
             <span class="sub-tit">编号 {{ index + 1 }}: </span>
             <div class="info">
@@ -79,9 +79,9 @@
       </div>
       <div class="gap"></div>
 
-      <div class="man">
+      <div class="extractUser">
         <span class="sub-tit">提取人：</span>
-        <template v-for="man in data.man">
+        <template v-for="extractUser in data.extractUser">
           <div class="line">
             <span>姓名:</span>
             <el-input class="input" placeholder="" style="width: 20%" />
@@ -92,7 +92,7 @@
         </template>
       </div>
       <div class="btn-container">
-        <el-button class="btn" @click="addMan">+新增</el-button>
+        <el-button class="btn" @click="addextractUser">+新增</el-button>
       </div>
       <!-- 证人 -->
       <template v-for="wit in data.witness">
@@ -129,24 +129,28 @@
 <script setup>
 import { onMounted, ref, watch } from 'vue';
 import { reactive } from 'vue'
+import {
+  getCaseDetailInfo,
+  saveCaseDetailInfo,
+  exportCaseDetailInfo
+} from "@/store/case";
+
+import { ElMessage } from 'element-plus';
+
 const props = defineProps({ caseId: Number })
 
 console.log(props)
 
 const data = reactive({
-  times: "",
-  start: {
-    year: "",
-    month: "",
-    day: ""
-  },
-  end: {
+  address: "",
+  time: {
     year: "",
     month: "",
     day: ""
   },
+
   location: '',
-  lists: [{
+  detail: [{
     id: "1",
     name: "",
     spec: "",
@@ -162,7 +166,7 @@ const data = reactive({
     part: "",
     desc: "",
   }],
-  man: [
+  extractUser: [
     {
       name: "",
       workplace: "",
@@ -193,20 +197,12 @@ const data = reactive({
 
 watch(data, newValue => {
   // data.userName = newValue.userName.replace(/[^0-9]/g, '');
-  const sMonth = newValue.start.month.replace(/[^0-9]/g, '');
-  const sDay = newValue.start.day.replace(/[^0-9]/g, '');
-
-  const eMonth = newValue.end.month.replace(/[^0-9]/g, '');
-  const eDay = newValue.end.day.replace(/[^0-9]/g, '');
-
-  data.start.year = newValue.start.year.replace(/[^0-9]/g, '');
-  data.start.month = Number(sMonth) > 12 ? '12' : sMonth;
-  data.start.day = Number(sDay) > 31 ? '31' : sDay;
-
-  data.end.year = newValue.end.year.replace(/[^0-9]/g, '');
-  data.end.month = Number(eMonth) > 12 ? '12' : eMonth;
-  data.end.day = Number(eDay) > 31 ? '31' : eDay;
+  const sMonth = newValue.time.month.replace(/[^0-9]/g, '');
+  const sDay = newValue.time.day.replace(/[^0-9]/g, '');
 
+  data.time.year = newValue.time.year.replace(/[^0-9]/g, '');
+  data.time.month = Number(sMonth) > 12 ? '12' : sMonth;
+  data.time.day = Number(sDay) > 31 ? '31' : sDay;
   newValue.witness.forEach((item, key) => {
     const year = newValue.witness[key].year.replace(/[^0-9]/g, '');
     const month = newValue.witness[key].month.replace(/[^0-9]/g, '');
@@ -235,7 +231,7 @@ const addWitness = () => {
   })
 }
 const addItem = () => {
-  data.lists.push({
+  data.detail.push({
     id: "1",
     name: "",
     spec: "",
@@ -244,8 +240,8 @@ const addItem = () => {
     desc: "",
   })
 }
-const addMan = () => {
-  data.man.push({
+const addextractUser = () => {
+  data.extractUser.push({
     id: "1",
     name: "",
     spec: "",
@@ -254,10 +250,29 @@ const addMan = () => {
     desc: "",
   })
 }
-const handleSave = () => {
+const handleSave = async () => {
   console.log('data', data)
-
+  const res = await saveCaseDetailInfo(props.caseId, data);
+  if (res.code === 0) {
+    ElMessage.success('保存成功！')
+  }
+}
+const handleExport = async () => {
+  // const res = await exportCaseInquestInfo(props.caseId);
+  // console.log('res', res)
+  // saveAs(res, `勘验笔录-${props.caseId}.docx`)
 }
+onMounted(async () => {
+  const res = await getCaseDetailInfo(props.caseId);
+  console.log('res', res)
+  for (var k in data) {
+    if (res.data && res.data.hasOwnProperty(k)) {
+      // console.log("Key is " + k)
+      data[k] = res.data[k]
+    }
+  }
+
+})
 
 </script>
 
@@ -364,7 +379,7 @@ const handleSave = () => {
   }
 }
 
-.lists {
+.detail {
 
 
   .con {
@@ -380,7 +395,7 @@ const handleSave = () => {
 
 }
 
-.man {
+.extractUser {
   margin-right: 0px;
 
   .line {