水闸管理

package.json

@@ -87,6 +87,7 @@
     "vue2-org-tree": "^1.3.6",
     "vuedraggable": "^2.20.0",
     "vuex": "3.1.0",
+    "vuex-persistedstate": "^4.1.0",
     "wangeditor": "^4.7.5",
     "xlsx": "^0.18.5"
   },

src/store/index.js

@@ -7,11 +7,22 @@ import tagsView from './modules/tagsView'
 import permission from './modules/permission'
 import settings from './modules/settings'
 import getters from './getters'
+import createPersistedstate  from 'vuex-persistedstate'
 
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
+  plugins: [
+    createPersistedstate({
+      reducer (val) {
+        // console.log(val);
+        return {
+          basePageData: val.basePageData
+        }
+      }
+    })
+  ],
   modules: {
     app,
     user,
@@ -27,6 +38,10 @@ const store = new Vuex.Store({
     addChildTimeLine: {},
     previewTimeLine:{},
     fileUrl: window.g.fileUrl,
+    basePageData: {
+      // 专题管理面包屑
+      routeList: [],
+    }
   },
   mutations:{
     setParagraph(state, obj){
@@ -44,6 +59,9 @@ const store = new Vuex.Store({
     setPreviewTimeLine(state, obj) {
       state.previewTimeLine = obj;
     },
+    setRouteList (state, payload) {
+      state.basePageData.routeList = payload
+    },
   },
   getters
 })

src/views/sluice/engineeringCondition/sluiceBaseInfo/index.vue

@@ -23,7 +23,15 @@
           clearable
           size="small"
           @keyup.enter.native="handleQuery"
-        />
+        >
+          <el-button
+            type="primary"
+            slot="append"
+            icon="el-icon-search"
+            size="small"
+            @click="handleQuery"
+          ></el-button>
+        </el-input>
       </el-form-item>
       <el-form-item label="行政区划" prop="adcd">
         <el-select
@@ -53,19 +61,18 @@
       </el-form-item>
 
       <el-form-item>
-        <el-button
+        <!-- <el-button
           type="cyan"
           icon="el-icon-search"
           size="mini"
           @click="handleQuery"
           >搜索</el-button
-        >
+        > -->
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
           >重置</el-button
         >
       </el-form-item>
     </el-form>
-
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
@@ -944,16 +951,27 @@ export default {
           auxiliaryGateHolesWidth: null,
           recordLoseEfficacyTime: null,
         },
+        // 排序方式
+        params: {
+          // 按哪个字段排序
+          orderBy: "create_time",
+          // desc降序，升序asc
+          sort: "desc",
+        },
       },
       // 表单参数
       form: {},
       // 表单校验
-      rules: {},
+      rules: {
+        sluiceCode: [
+          { required: true, message: "请输入水闸编码", trigger: "blur" },
+        ],
+      },
       // 面包屑，路由信息
       routeList: [
         {
           path: "/sluice/engineeringCondition/sluiceBaseInfo",
-          routeName: "水闸基本信息",
+          routeName: "水闸基本信息列表",
         },
       ],
     };
@@ -1203,11 +1221,25 @@ export default {
     handleUpdate(row) {
       this.reset();
       const id = row.id || this.ids;
-      getSluiceInfo(id).then((response) => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改水闸工程基础信息";
+      this.routeList.push({
+        path: "/sluice/engineeringCondition/sluiceBaseInfo/options",
+        routeName: "水闸基本信息",
+        isEdit: true,
+      });
+
+      // 存储面包屑信息
+      this.$store.commit("setRouteList", JSON.stringify(this.routeList));
+      // 跳转到选项卡页面
+      this.$router.push({
+        path:
+          "/sluice/engineeringCondition/sluiceBaseInfo/options?baseDataId=" +
+          id,
       });
+      // getSluiceInfo(id).then((response) => {
+      //   this.form = response.data;
+      //   this.open = true;
+      //   this.title = "修改水闸工程基础信息";
+      // });
     },
     /** 提交按钮 */
     submitForm() {

src/views/sluice/engineeringCondition/sluiceBaseInfo/options/index.vue

@@ -22,38 +22,69 @@
       @tab-click="handleClick"
       style="margin-bottom: 20px"
     >
-      <el-tab-pane label="专题基本信息" name="basePage">
-        <!-- <basePage :formData="formData" ref="basePage" /> -->
-        555
+      <el-tab-pane label="水闸基本信息" name="basePage" :lazy="true">
+        <basePage ref="basePage" @ />
       </el-tab-pane>
       <el-tab-pane
-        label="专题任务书信息"
-        name="taskPage"
+        label="工程管理"
+        name="projectManagement"
         :disabled="!routeList[1].isEdit"
+        :lazy="true"
       >
-        <!-- <taskPage :proNo="formData.proNo" /> -->
-        6666
+        <projectManagement
+          :sluiceCode="$refs.basePage.copyForm.sluiceCode"
+          v-if="activeName === 'projectManagement'"
+        />
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 <script>
+import basePage from "./basePage.vue";
+import projectManagement from "./projectManagement.vue";
+import { getSluiceInfo } from "@/api/yg/sluiceInfo";
 export default {
+  components: {
+    basePage,
+    projectManagement,
+  },
   data() {
     return {
       activeName: "basePage",
       routeList: [],
+      formData: {},
     };
   },
+  created() {
+    this.routeList = JSON.parse(this.$store.state.basePageData.routeList);
+    // console.log("this.routeList", this.routeList);
+    // if (this.routeList[1].isEdit) {
+    //   // this.formData = JSON.parse(this.$store.state.basePageData.baseFormData);
+    //   this.formData = JSON.parse(this.$store.state.basePageData.baseFormData);
+    // }
+    this.getList();
+  },
   methods: {
     goBack() {
       this.$router.back();
     },
+    getList() {
+      const id = this.$route.query.baseDataId;
+      getSluiceInfo(id).then((response) => {
+        this.formData = response.data;
+        // console.log("this.formData", this.formData);
+      });
+    },
     // 切换标签页
     handleClick(tab, event) {
+      // this.getList();
       // console.log("切换标签页", tab, event);
       // console.log("切换标签页", this.routeList[1].routeName);
       this.routeList[1].routeName = tab.label;
+      // console.log(
+      //   "this.$refs.basePage.copyForm.sluiceCode",
+      //   this.$refs.basePage.copyForm.sluiceCode
+      // );
     },
   },
 };