v1.0.6 1. 修复推广码列表无法弹出修改备注bug

README.md

@@ -6,6 +6,10 @@
 2. 推广码新增备注功能
 3. 忘记密码
 
+## v1.0.6
+
+1. 修复推广码列表中 备注 popover 无法弹出问题
+
 # 启动
 
 npm start

package.json

@@ -1,86 +1,86 @@
 {
-  "name": "vue-demo",
-  "version": "1.0.0",
-  "private": true,
-  "description": "vue项目模板",
-  "author": "苏天天",
-  "scripts": {
-    "build": "node build/build.js",
-    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
-    "start": "npm run dev"
-  },
-  "dependencies": {
-    "anywhere": "^1.5.0",
-    "axios": "^0.21.0",
-    "clipboard": "^2.0.8",
-    "element-ui": "^2.14.0",
-    "es6-promise": "^4.2.8",
-    "jwt-decode": "^3.1.2",
-    "vue": "^2.5.2",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.5.1"
-  },
-  "devDependencies": {
-    "autoprefixer": "^7.1.2",
-    "babel-core": "^6.22.1",
-    "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-component": "^1.1.1",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-plugin-transform-vue-jsx": "^3.5.0",
-    "babel-preset-env": "^1.3.2",
-    "babel-preset-stage-2": "^6.22.0",
-    "chalk": "^2.0.1",
-    "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.28.0",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^1.1.4",
-    "friendly-errors-webpack-plugin": "^1.6.1",
-    "html-webpack-plugin": "^2.30.1",
-    "less": "^3.12.2",
-    "less-loader": "^4.1.0",
-    "node-notifier": "^5.1.2",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
-    "ora": "^1.2.0",
-    "portfinder": "^1.0.13",
-    "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.8",
-    "postcss-url": "^7.2.1",
-    "querystring": "^0.2.0",
-    "rimraf": "^2.6.0",
-    "sass-resources-loader": "^2.1.1",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
-    "uglifyjs-webpack-plugin": "^1.1.1",
-    "url-loader": "^0.5.8",
-    "vue-cli-plugin-element": "~1.0.1",
-    "vue-loader": "^13.3.0",
-    "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.6.0",
-    "webpack-bundle-analyzer": "^2.9.0",
-    "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0"
-  },
-  "babel": {
-    "plugins": [
-      [
-        "component",
-        {
-          "libraryName": "element-ui",
-          "styleLibraryName": "theme-chalk"
-        }
-      ]
-    ]
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ],
-  "engines": {
-    "node": ">= 6.0.0",
-    "npm": ">= 3.0.0"
-  }
-}
+    "name": "vue-demo",
+    "version": "1.0.6",
+    "private": true,
+    "description": "营销推广系统",
+    "author": "苏天天",
+    "scripts": {
+        "build": "node build/build.js",
+        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+        "start": "npm run dev"
+    },
+    "dependencies": {
+        "anywhere": "^1.5.0",
+        "axios": "^0.21.0",
+        "clipboard": "^2.0.8",
+        "element-ui": "^2.14.0",
+        "es6-promise": "^4.2.8",
+        "jwt-decode": "^3.1.2",
+        "vue": "^2.5.2",
+        "vue-router": "^3.0.1",
+        "vuex": "^3.5.1"
+    },
+    "devDependencies": {
+        "autoprefixer": "^7.1.2",
+        "babel-core": "^6.22.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.3",
+        "babel-loader": "^7.1.1",
+        "babel-plugin-component": "^1.1.1",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "babel-plugin-transform-runtime": "^6.22.0",
+        "babel-plugin-transform-vue-jsx": "^3.5.0",
+        "babel-preset-env": "^1.3.2",
+        "babel-preset-stage-2": "^6.22.0",
+        "chalk": "^2.0.1",
+        "copy-webpack-plugin": "^4.0.1",
+        "css-loader": "^0.28.0",
+        "extract-text-webpack-plugin": "^3.0.0",
+        "file-loader": "^1.1.4",
+        "friendly-errors-webpack-plugin": "^1.6.1",
+        "html-webpack-plugin": "^2.30.1",
+        "less": "^3.12.2",
+        "less-loader": "^4.1.0",
+        "node-notifier": "^5.1.2",
+        "optimize-css-assets-webpack-plugin": "^3.2.0",
+        "ora": "^1.2.0",
+        "portfinder": "^1.0.13",
+        "postcss-import": "^11.0.0",
+        "postcss-loader": "^2.0.8",
+        "postcss-url": "^7.2.1",
+        "querystring": "^0.2.0",
+        "rimraf": "^2.6.0",
+        "sass-resources-loader": "^2.1.1",
+        "semver": "^5.3.0",
+        "shelljs": "^0.7.6",
+        "uglifyjs-webpack-plugin": "^1.1.1",
+        "url-loader": "^0.5.8",
+        "vue-cli-plugin-element": "~1.0.1",
+        "vue-loader": "^13.3.0",
+        "vue-style-loader": "^3.0.1",
+        "vue-template-compiler": "^2.5.2",
+        "webpack": "^3.6.0",
+        "webpack-bundle-analyzer": "^2.9.0",
+        "webpack-dev-server": "^2.9.1",
+        "webpack-merge": "^4.1.0"
+    },
+    "babel": {
+        "plugins": [
+            [
+                "component",
+                {
+                    "libraryName": "element-ui",
+                    "styleLibraryName": "theme-chalk"
+                }
+            ]
+        ]
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not ie <= 8"
+    ],
+    "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+    }
+}

src/views/PromoCode/PromoCodeTable/PromoCodeTable.vue

@@ -28,36 +28,14 @@ d<template>
             >
               复制推广员推广码
             </el-button>
-            <el-popover v-model="visible" width="450" trigger="click">
-              <div
-                class="remark_box"
-                @keyup.enter="remarkConifrm(scope.$index, scope.row)"
-              >
-                <el-input
-                  class="remark_input"
-                  v-model="remarkInput"
-                  placeholder="请输入备注"
-                  maxlength="64"
-                ></el-input>
-                <el-button
-                  type="primary"
-                  plain
-                  :class="{ gray: !canRemark }"
-                  @click="remarkConifrm(scope.$index, scope.row)"
-                >
-                  确定
-                </el-button>
-              </div>
-              <el-button
-                slot="reference"
-                type="success"
-                size="mini"
-                class="promo_code_btn"
-                @click="toRemark(scope.$index, scope.row)"
-              >
-                备注推广码
-              </el-button>
-            </el-popover>
+            <el-button
+              type="success"
+              size="mini"
+              class="promo_code_btn"
+              @click="toRemark(scope.$index, scope.row)"
+            >
+              修改备注
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -72,6 +50,34 @@ d<template>
       @current-change="pageChange"
     >
     </el-pagination>
+
+    <!-- 修改备注 -->
+    <el-dialog
+      title="提示"
+      append-to-body
+      :visible.sync="showDialog"
+      width="30%"
+    >
+      <div class="remark_box">
+        <div class="code">推广码：{{ rowData && rowData.promoCode }}</div>
+        <el-input
+          class="remark_input"
+          v-model="remarkInput"
+          placeholder="请输入备注"
+          maxlength="64"
+        ></el-input>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showDialog = false">取 消</el-button>
+        <el-button
+          type="primary"
+          :class="{ gray: !canRemark }"
+          @click="remarkConifrm()"
+        >
+          确 定
+        </el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -86,12 +92,12 @@ export default {
   inject: ["checkCode"],
   data() {
     return {
-      tableData: null, // 表格需要的内容
       clipboard: null, // 复制
       promoCode: "", // 推广码
       remarkInput: "", // 备注
-      visible: false, // 是否显示备注修改气泡框
+      showDialog: false, // 是否显示备注修改气泡框
       canRemark: true, // 是否可以修改备注
+      rowData: null, // 一列数据
     };
   },
   props: {
@@ -191,17 +197,24 @@ export default {
 
     // 备注
     toRemark(index, rowData) {
+      this.handleDialog(true);
       this.remarkInput = rowData.note;
+      this.rowData = rowData;
+    },
+
+    // 关闭弹窗
+    handleDialog(showDialog) {
+      this.showDialog = showDialog;
     },
 
     // 修改推广码备注
-    remarkConifrm(index, rowData) {
+    remarkConifrm() {
       if (!this.canRemark) {
         return;
       }
 
       const { remarkInput } = this;
-      const { id } = rowData;
+      const { id } = this.rowData;
       this.$api
         .updatePromoCode({
           note: remarkInput,
@@ -220,7 +233,8 @@ export default {
             message: msg,
             type: "success",
           });
-          this.visible = false;
+          this.showDialog = false;
+
           // 重新请求这一页的数据
           this.pageChange(this.pageIndex);
         });
@@ -254,6 +268,10 @@ export default {
 
 <style lang="less">
 .remark_box {
+  .code {
+    height: 50px;
+    line-height: 50px;
+  }
   .remark_input {
     width: 80%;
   }