产品信息修改

src/router/views/index.js

@@ -153,12 +153,12 @@ export default [{
     hidden: true,
     children: [
       {
-        path: '/productInfo_detailsPageEdit',
-        name:'产品详情',
+        path: '/basicData/productInformation/index',
+        name:'产品信息',
         meta: {
-          i18n: 'productInfo_detailsPageEdit'
+          i18n: 'basicData/productInformation/index'
         },
-        component: () => import( /* webpackChunkName: "views" */ '@/views/basicData/productInformation/detailsPageEdit')
+        component: () => import( /* webpackChunkName: "views" */ '@/views/basicData/productInformation/index')
       }
     ]
   },

src/views/basicData/productInformation/detailsPageEdit.vue

@@ -73,6 +73,9 @@ import {
 } from "@/api/basicData/commodityType";
 
 export default {
+  props:{
+    detailData:Object
+  },
   name: "detailsPage",
   data() {
     return {
@@ -286,15 +289,21 @@ export default {
     getDeptTree().then(res => {
       this.dicData = res.data.data;
     });
-    if (this.$route.query.id) {
-      getDetail(JSON.parse(this.$route.query.id)).then(res => {
-        this.form = res.data.data;
-      });
+    if (this.detailData.id) {
+      this.queryData(this.detailData.id)
     } else {
       this.$set(this.form, "goodsTypeId", this.$route.query.treeDeptId);
     }
   },
   methods: {
+    queryData(id) {
+      this.openFullScreen(false, '正在努力的加载...');
+      getDetail(id).then(res => {
+        this.form = res.data.data;
+      }).finally(() => {
+        this.openFullScreen(true);
+      });
+    },
     addSftRow() {
       this.sftData.push({
         $cellEdit: true,
@@ -325,10 +334,13 @@ export default {
             ...this.form,
             type: 0
           };
+          this.openFullScreen(false, '正在努力的加载...');
           updateDetail(params).then(res => {
             if (res.data.success) {
               this.$message.success("操作成功！");
             }
+            this.form = res.data.data
+            this.queryData(res.data.data.id)
           });
         } else {
           return false;
@@ -337,12 +349,18 @@ export default {
     },
     //返回列表
     backToList() {
-      this.$router.$avueRouter.closeTag();
-      this.$router.push({
-        path: "/basicData/productInformation/index",
-        query: {}
+      this.$emit("goBack");
+    },
+    //遮罩层
+    openFullScreen(res, text) {
+      const loading = this.$loading({
+        lock: true,
+        text: text,
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
       });
-    }
+      if (res === true) loading.close();
+    },
   }
 };
 </script>
@@ -355,7 +373,7 @@ export default {
 }
 
 ::v-deep .el-form-item {
-  margin-bottom: 0;
+  margin-bottom: 8px;
 }
 
 .el-dialogDeep {

src/views/basicData/productInformation/index.vue

@@ -1,96 +1,105 @@
 <template>
-  <el-row>
-    <el-col :span="5">
-      <basic-container>
-        <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"/>
-      </basic-container>
-    </el-col>
-    <el-col :span="19">
-      <basic-container>
-        <avue-crud :option="option"
-                   :search.sync="search"
-                   :table-loading="loading"
-                   :data="data"
-                   ref="crud"
-                   v-model="form"
-                   @row-del="rowDel"
-                   @row-update="rowUpdate"
-                   @row-save="rowSave"
-                   :before-open="beforeOpenE"
-                   :page.sync="page"
-                   @search-change="searchChange"
-                   @search-reset="searchReset"
-                   @selection-change="selectionChange"
-                   @current-change="currentChange"
-                   @size-change="sizeChange"
-                   @refresh-change="refreshChange"
-                   @on-load="onLoad">
-          <template slot="menuLeft">
-            <el-button
-              type="primary"
-              size="small"
-              icon="el-icon-bottom"
-              @click="excelBox = true"
-            >导入
-            </el-button>
-            <el-button
-              type="warning"
-              size="small"
-              :disabled="selectionList.length==0"
-              icon="el-icon-delete"
-              @click="batchDelete"
-            >批量删除
-            </el-button>
-          </template>
-          <template slot-scope="scope" slot="corpId">
-            <span>{{ scope.row.corpName }}</span>
-          </template>
-          <template slot-scope="scope" slot="menu">
-<!--            <el-button-->
-<!--                type="text"-->
-<!--                icon="el-icon-view"-->
-<!--                size="small"-->
-<!--                @click.stop="beforeOpenPage(scope.row, scope.index)"-->
-<!--            >查看-->
-<!--            </el-button>-->
-            <el-button
+  <div>
+    <el-row v-if="isShow">
+      <el-col :span="5">
+        <basic-container>
+          <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"/>
+        </basic-container>
+      </el-col>
+      <el-col :span="19">
+        <basic-container>
+          <avue-crud :option="option"
+                     :search.sync="search"
+                     :table-loading="loading"
+                     :data="data"
+                     ref="crud"
+                     v-model="form"
+                     @row-del="rowDel"
+                     @row-update="rowUpdate"
+                     @row-save="rowSave"
+                     :before-open="beforeOpenE"
+                     :page.sync="page"
+                     @search-change="searchChange"
+                     @search-reset="searchReset"
+                     @selection-change="selectionChange"
+                     @current-change="currentChange"
+                     @size-change="sizeChange"
+                     @refresh-change="refreshChange"
+                     @on-load="onLoad">
+            <template slot="menuLeft">
+              <el-button
+                type="primary"
+                size="small"
+                icon="el-icon-bottom"
+                @click="excelBox = true"
+              >导入
+              </el-button>
+              <el-button
+                type="warning"
+                size="small"
+                :disabled="selectionList.length==0"
+                icon="el-icon-delete"
+                @click="batchDelete"
+              >批量删除
+              </el-button>
+            </template>
+            <template slot-scope="scope" slot="corpId">
+              <span>{{ scope.row.corpName }}</span>
+            </template>
+            <template slot-scope="scope" slot="menu">
+              <!--            <el-button-->
+              <!--                type="text"-->
+              <!--                icon="el-icon-view"-->
+              <!--                size="small"-->
+              <!--                @click.stop="beforeOpenPage(scope.row, scope.index)"-->
+              <!--            >查看-->
+              <!--            </el-button>-->
+              <el-button
                 type="text"
                 icon="el-icon-edit"
                 size="small"
                 @click.stop="editOpen(scope.row, scope.index)"
-            >编辑
-            </el-button>
-            <el-button
+              >编辑
+              </el-button>
+              <el-button
                 type="text"
                 icon="el-icon-delete"
                 size="small"
                 @click.stop="rowDel(scope.row, scope.index)"
-            >删除
-            </el-button>
-<!--            <el-button-->
-<!--                type="text"-->
-<!--                icon="el-icon-delete"-->
-<!--                size="small"-->
-<!--            >下架-->
-<!--            </el-button>-->
-          </template>
-        </avue-crud>
-        <el-dialog title="导入产品"
-                   append-to-body
-                   :visible.sync="excelBox"
-                   width="555px">
-          <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
-            <template slot="excelTemplate">
-              <el-button type="primary" @click="derivation">
-                点击下载<i class="el-icon-download el-icon--right"></i>
+              >删除
               </el-button>
+              <!--            <el-button-->
+              <!--                type="text"-->
+              <!--                icon="el-icon-delete"-->
+              <!--                size="small"-->
+              <!--            >下架-->
+              <!--            </el-button>-->
             </template>
-          </avue-form>
-          <p style="text-align: center;color: #DC0505">温馨提示  第一次导入时请先下载模板</p>
-        </el-dialog>
-      </basic-container>
-    </el-col>
-  </el-row>
+          </avue-crud>
+          <el-dialog title="导入产品"
+                     append-to-body
+                     :visible.sync="excelBox"
+                     width="555px">
+            <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
+              <template slot="excelTemplate">
+                <el-button type="primary" @click="derivation">
+                  点击下载<i class="el-icon-download el-icon--right"></i>
+                </el-button>
+              </template>
+            </avue-form>
+            <p style="text-align: center;color: #DC0505">温馨提示  第一次导入时请先下载模板</p>
+          </el-dialog>
+        </basic-container>
+      </el-col>
+    </el-row>
+
+    <detail-page
+      ref="detail"
+      @goBack="goBack"
+      :detailData="detailData"
+      v-else
+    ></detail-page>
+  </div>
 </template>
 <script>
 import {getList, getUser, getUserPlatform, remove, updatePlatform, add, grant, getDeptLazyTree, getDeptTree} from "@/api/basicData/commodityType";
@@ -99,7 +108,12 @@ import {mapGetters} from "vuex";
 import website from '@/config/website';
 import {getToken} from '@/util/auth';
 import option from "./configuration/mainList.json";
+import detailPage from "./detailsPageEdit";
+
 export default {
+  components: {
+    detailPage
+  },
   data() {
     return {
       form: {},
@@ -189,7 +203,9 @@ export default {
             action: "/api/blade-client/goodsdesc/import-desc-info",
           },
         ]
-      }
+      },
+      isShow: true,
+      detailData: {},
     };
   },
   methods: {
@@ -275,24 +291,25 @@ export default {
     },
     //查看跳转页面
     beforeOpenPage(row, index) {
-      this.$router.push({
-        path: "/productInfo_detailsPageEdit",
-        query: { id: JSON.stringify(row.id) }
-      });
+      this.detailData = {
+        id: row.id,
+        seeDisabled: true,
+      };
+      this.isShow = false;
     },
     //新增跳转页面
     beforeOpenE(row, index) {
-      this.$router.push({
-        path: "/productInfo_detailsPageEdit",
-        query: { id: JSON.stringify(row.id),treeDeptId:this.treeDeptId }
-      });
+      this.detailData = {
+        id: row.id,
+      };
+      this.isShow = false;
     },
     //编辑跳转页面
     editOpen(row, index) {
-      this.$router.push({
-        path: "/productInfo_detailsPageEdit",
-        query: { id: JSON.stringify(row.id) }
-      });
+      this.detailData = {
+        id: row.id,
+      };
+      this.isShow = false;
     },
     //删除触发
     rowDel(row, index, done) {
@@ -454,7 +471,11 @@ export default {
         this.platformLoading = false;
         this.selectionClear();
       });
-    }
+    },
+    goBack() {
+      this.detailData=this.$options.data().detailData
+      this.isShow = true;
+    },
   }
 };
 </script>