【优化】销售政策列表渲染

package-lock.json

@@ -20,6 +20,7 @@
         "normalize.css": "7.0.0",
         "nprogress": "0.2.0",
         "path-to-regexp": "2.4.0",
+        "pl-table": "^2.7.5",
         "screenfull": "^4.2.0",
         "vue": "2.6.10",
         "vue-ls": "^4.0.0",
@@ -14909,6 +14910,33 @@
         "node": ">=8"
       }
     },
+    "node_modules/pl-table": {
+      "version": "2.7.5",
+      "resolved": "https://registry.npmmirror.com/pl-table/-/pl-table-2.7.5.tgz",
+      "integrity": "sha512-uzFetO3nEF8C40cADJpAJPu297X/6kuOqrP8XIPsWRay4mBgNt3FSokg6s/3wpnrLdXwkz6i9FscjkEaM0A7Pw==",
+      "dependencies": {
+        "async-validator": "~1.8.1",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "plxy-grid": "^2.8.3",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1",
+        "vuedraggable": "^2.23.2",
+        "xe-utils": "^2.3.0"
+      },
+      "peerDependencies": {
+        "vue": "^2.5.17"
+      }
+    },
+    "node_modules/plxy-grid": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmmirror.com/plxy-grid/-/plxy-grid-2.8.3.tgz",
+      "integrity": "sha512-udl+J0sCjTyLJScMVnAfSTvyqyd9VbNlZ76ywMTqaKZKLnGykuOaUr77YLKH6OMgfBoX30MftjRticvjNca98g==",
+      "peerDependencies": {
+        "vue": ">=2.6.10",
+        "xe-utils": ">=2.2.0"
+      }
+    },
     "node_modules/pn": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/pn/-/pn-1.1.0.tgz",
@@ -17588,6 +17616,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -20029,6 +20062,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "dependencies": {
+        "sortablejs": "1.10.2"
+      }
+    },
     "node_modules/vuex": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz",
@@ -21192,6 +21233,11 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "node_modules/xe-utils": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmmirror.com/xe-utils/-/xe-utils-2.8.3.tgz",
+      "integrity": "sha512-qjiq6juv+ZPDJC3oXr9E4wjaN73G/yeqUfozpmZOmBBTw2oH5A60Jz3AvCVLKFoTQl7qfsjefR9i2gyyMz7TQw=="
+    },
     "node_modules/xml-name-validator": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
@@ -33534,6 +33580,27 @@
         "find-up": "^4.0.0"
       }
     },
+    "pl-table": {
+      "version": "2.7.5",
+      "resolved": "https://registry.npmmirror.com/pl-table/-/pl-table-2.7.5.tgz",
+      "integrity": "sha512-uzFetO3nEF8C40cADJpAJPu297X/6kuOqrP8XIPsWRay4mBgNt3FSokg6s/3wpnrLdXwkz6i9FscjkEaM0A7Pw==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "plxy-grid": "^2.8.3",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1",
+        "vuedraggable": "^2.23.2",
+        "xe-utils": "^2.3.0"
+      }
+    },
+    "plxy-grid": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmmirror.com/plxy-grid/-/plxy-grid-2.8.3.tgz",
+      "integrity": "sha512-udl+J0sCjTyLJScMVnAfSTvyqyd9VbNlZ76ywMTqaKZKLnGykuOaUr77YLKH6OMgfBoX30MftjRticvjNca98g==",
+      "requires": {}
+    },
     "pn": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/pn/-/pn-1.1.0.tgz",
@@ -35792,6 +35859,11 @@
         "is-plain-obj": "^1.0.0"
       }
     },
+    "sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -37809,6 +37881,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "requires": {
+        "sortablejs": "1.10.2"
+      }
+    },
     "vuex": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz",
@@ -38757,6 +38837,11 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xe-utils": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmmirror.com/xe-utils/-/xe-utils-2.8.3.tgz",
+      "integrity": "sha512-qjiq6juv+ZPDJC3oXr9E4wjaN73G/yeqUfozpmZOmBBTw2oH5A60Jz3AvCVLKFoTQl7qfsjefR9i2gyyMz7TQw=="
+    },
     "xml-name-validator": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz",

package.json

@@ -26,6 +26,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "pl-table": "^2.7.5",
     "screenfull": "^4.2.0",
     "vue": "2.6.10",
     "vue-ls": "^4.0.0",

src/views/sales_policy/components/AddPolicy.vue

@@ -114,52 +114,64 @@
             <el-divider />
           </el-row>
           <!-- v-el-select-loadmore="loadmore2" -->
-          <el-table
+          <pl-table
             v-loading="listLoading"
             :data="dataList"
+            row-key="id"
+            use-virtual
+            fixedColumnsRoll
+            :dataChangesScrollTop="false"
+            inverse-current-row
+            bigDataCheckbox
             element-loading-text="Loading"
-            max-height="600"
+            max-height="700"
             border
             fit
             highlight-current-row
             stripe
           >
-            <el-table-column type="index" label="序号" width="50" align="left" />
-            <el-table-column prop="materialNumber" label="物料编码" align="left" min-width="200">
+            <pl-table-column type="index" label="序号" width="50" align="left" />
+            <pl-table-column prop="materialNumber" label="物料编码" align="left" min-width="200">
               <template slot-scope="scope">
                 <CopyButton :copy-text="scope.row.materialNumber" />
-
+                <template v-if="scope.row.fang">
+                  {{ scope.row.materialNumber }}
+                </template>
                 <el-select
+                  v-else
                   v-model="scope.row.materialNumber"
                   size="mini"
                   :remote-method="query => remoteMethod(query, 'number')"
                   filterable
                   remote
                   style="width: 85%"
-                  @change="handleK3List($event, scope.row)"
+                  @change="handleK3List($event, scope.row, scope.$index, 'materialNumber')"
                 >
                   <el-option v-for="(item, index) in k3List" :key="index" :label="item.number" :value="item.id" />
                 </el-select>
               </template>
-            </el-table-column>
-            <el-table-column show-overflow-tooltip min-width="150" prop="materialName" label="产品名称" align="left">
+            </pl-table-column>
+            <pl-table-column show-overflow-tooltip min-width="150" prop="materialName" label="产品名称" align="left">
               <template slot-scope="scope">
                 <CopyButton :copy-text="scope.row.materialName" />
                 <span>{{ scope.row.materialName }}</span>
               </template>
-            </el-table-column>
-            <el-table-column min-width="300" prop="specification" label="规格型号" align="left">
+            </pl-table-column>
+            <pl-table-column min-width="300" prop="specification" label="规格型号" align="left">
               <template slot-scope="scope">
                 <CopyButton :copy-text="scope.row.specification" />
-
+                <template v-if="scope.row.fang">
+                  {{ scope.row.specification }}
+                </template>
                 <el-select
+                  v-else
                   v-model="scope.row.specification"
                   size="mini"
                   :remote-method="query => remoteMethod(query, 'specification')"
                   filterable
                   style="width: 85%"
                   remote
-                  @change="handleK3List($event, scope.row)"
+                  @change="handleK3List($event, scope.row, scope.$index, 'specification')"
                 >
                   <el-option
                     v-for="(item, index) in k3List"
@@ -169,20 +181,24 @@
                   />
                 </el-select>
               </template>
-            </el-table-column>
-            <el-table-column show-overflow-tooltip min-width="150" prop="saleTypeName" label="销售类型" align="left">
+            </pl-table-column>
+            <pl-table-column show-overflow-tooltip min-width="150" prop="saleTypeName" label="销售类型" align="left">
               <template slot-scope="scope">
+                <template v-if="scope.row.fang">
+                  {{ scope.row.saleTypeName }}
+                </template>
                 <el-select
+                  v-else
                   v-model="scope.row.saleTypeId"
                   size="mini"
                   filterable
-                  @change="handleSalesType($event, scope.row)"
+                  @change="handleSalesType($event, scope.row, scope.$index, 'saleTypeId')"
                 >
                   <el-option v-for="item in typeList" :key="item.id" :label="item.saleName" :value="item.id" />
                 </el-select>
               </template>
-            </el-table-column>
-            <el-table-column
+            </pl-table-column>
+            <pl-table-column
               show-overflow-tooltip
               min-width="150"
               prop="saleTypeCode"
@@ -190,33 +206,57 @@
               align="left"
             />
 
-            <el-table-column prop="discAmount" label="格力折扣" align="right">
+            <pl-table-column prop="discAmount" label="格力折扣" align="right">
               <template slot-scope="scope">
+                <template v-if="scope.row.fang">
+                  {{ scope.row.discAmount }}
+                </template>
                 <el-input
+                  v-else
                   v-model.number="scope.row.discAmount"
                   class="yinput"
                   type="number"
                   placeholder="请输入格力折扣"
                   size="mini"
                   @mousewheel.native.prevent
+                  @change="setText($event, scope.$index, scope.row, 'discAmount')"
                 />
               </template>
-            </el-table-column>
-            <el-table-column prop="price" label="单价" align="right" show-overflow-tooltip min-width="150">
+            </pl-table-column>
+            <pl-table-column prop="price" label="单价" align="right" show-overflow-tooltip min-width="150">
               <template slot-scope="scope">
+                <template v-if="scope.row.fang">
+                  {{ scope.row.price }}
+                </template>
                 <el-input
+                  v-else
                   v-model.number="scope.row.price"
                   class="yinput"
                   type="number"
                   placeholder="请输入单价"
                   size="mini"
+                  @change="setText($event, scope.$index, scope.row, 'price')"
                   @mousewheel.native.prevent
                 />
               </template>
-            </el-table-column>
-            <el-table-column label="返利钱包" align="left" show-overflow-tooltip min-width="150">
+            </pl-table-column>
+            <pl-table-column label="返利钱包" align="left" show-overflow-tooltip min-width="150">
               <template slot-scope="scope">
-                <el-select v-model="scope.row.rebateWalletIds" size="mini" multiple filterable>
+                <template v-if="scope.row.fang">
+                  <template v-for="(item, index) in scope.row.walletRelaList">
+                    <el-tag v-if="item.type === 'REBATE'" :key="index" size="mini">
+                      {{ item.walletName }}
+                    </el-tag>
+                  </template>
+                </template>
+                <el-select
+                  v-else
+                  v-model="scope.row.rebateWalletIds"
+                  size="mini"
+                  multiple
+                  filterable
+                  @change="setText($event, scope.$index, scope.row, 'rebateWalletIds')"
+                >
                   <el-option
                     v-for="item in rebateList"
                     :key="item.walletRebateId"
@@ -225,26 +265,52 @@
                   />
                 </el-select>
               </template>
-            </el-table-column>
-            <el-table-column label="现金钱包" align="left" show-overflow-tooltip min-width="150">
+            </pl-table-column>
+            <pl-table-column label="现金钱包" align="left" show-overflow-tooltip min-width="150">
               <template slot-scope="scope">
-                <el-select v-model="scope.row.walletIds" size="mini" multiple filterable>
+                <template v-if="scope.row.fang">
+                  <template v-for="(item, index) in scope.row.walletRelaList">
+                    <el-tag v-if="item.type === 'COMMONLY'" :key="index" size="mini">
+                      {{ item.walletName }}
+                    </el-tag>
+                  </template>
+                </template>
+                <el-select
+                  v-else
+                  v-model="scope.row.walletIds"
+                  size="mini"
+                  multiple
+                  filterable
+                  @change="setText($event, scope.$index, scope.row, 'walletIds')"
+                >
                   <el-option v-for="item in NoRebateWalletList" :key="item.id" :label="item.name" :value="item.id" />
                 </el-select>
               </template>
-            </el-table-column>
-            <el-table-column prop="remark" label="备注" align="left" show-overflow-tooltip min-width="150">
+            </pl-table-column>
+            <pl-table-column prop="remark" label="备注" align="left" show-overflow-tooltip min-width="150">
               <template slot-scope="scope">
-                <el-input v-model="scope.row.remark" placeholder="备注" size="mini" />
+                <template v-if="scope.row.fang">
+                  {{ scope.row.remark }}
+                </template>
+                <el-input
+                  v-else
+                  v-model="scope.row.remark"
+                  placeholder="备注"
+                  size="mini"
+                  @change="setText($event, scope.$index, scope.row, 'remark')"
+                />
               </template>
-            </el-table-column>
-            <el-table-column prop="status" label="状态" align="left" show-overflow-tooltip min-width="150">
+            </pl-table-column>
+            <pl-table-column prop="status" label="状态" align="left" show-overflow-tooltip min-width="150">
               <template slot-scope="scope">
                 {{ scope.row.status ? '启用' : '作废' }}
               </template>
-            </el-table-column>
-            <el-table-column fixed="right" label="操作" align="center">
+            </pl-table-column>
+            <pl-table-column fixed="right" label="操作" align="center" min-width="150">
               <template slot-scope="scope">
+                <el-button type="text" class="textColor el-popover-left" @click="scope.row.fang = !scope.row.fang"
+                  >编辑</el-button
+                >
                 <el-popconfirm
                   confirm-button-text="好的"
                   cancel-button-text="不用了"
@@ -278,8 +344,8 @@
                   <el-button slot="reference" type="text" class="textColor el-popover-left">作废</el-button>
                 </el-popconfirm>
               </template>
-            </el-table-column>
-          </el-table>
+            </pl-table-column>
+          </pl-table>
           <!-- 分页 -->
           <div style="margin: 20px 20px 20px 0; display: flex; justify-content: space-between">
             <div>
@@ -382,6 +448,7 @@ import { downloadFiles, handleImport } from '@/utils/util'
 import TabelTransfer from './TabelTransfer'
 import AddCondition from './AddCondition'
 import ImageUpload from '@/components/Common/image-upload.vue'
+import { PlTable, PlTableColumn } from 'pl-table'
 
 export default {
   directives: {
@@ -475,6 +542,7 @@ export default {
     //    this.handletwoList()
     // }
   },
+
   methods: {
     ...mapMutations('sales', ['initData']),
     handleStatus(id, status) {
@@ -483,6 +551,9 @@ export default {
         this.$successMsg(status ? '启用' : '作废')
       })
     },
+    setText(e, index, row, name) {
+      this.dataList[index][name] = row[name]
+    },
     // 下载excel模板
     handleDownloadFiles() {
       downloadFiles('policy/download')
@@ -567,7 +638,7 @@ export default {
       const typeData = await getTypeList(params)
       this.typeList = typeData.data.records
     },
-    handleSalesType(e, row) {
+    handleSalesType(e, row, index, name) {
       const item = this.typeList.filter(k => {
         return k.id === e
       })[0]
@@ -582,8 +653,12 @@ export default {
         })
       })
       if (rebateList.length) {
+        this.dataList[index].rebateWalletIds = [...new Set([...row.rebateWalletIds, rebateList[0].walletRebateId])]
         this.$set(row, 'rebateWalletIds', [...new Set([...row.rebateWalletIds, rebateList[0].walletRebateId])])
       }
+      this.dataList[index][name] = row[name]
+      this.dataList[index].saleTypeCode = item.saleCode
+      this.dataList[index].saleTypeName = item.saleName
 
       this.$set(row, 'saleTypeCode', item.saleCode)
       this.$set(row, 'saleTypeName', item.saleName)
@@ -633,18 +708,14 @@ export default {
       this.importLoading = false
       this.importFileList = []
       if (result.code === 200) {
-        this.$alert(result.message, '导入成功', {
-          confirmButtonText: '确定'
-        })
+        this.$successMsg('导入成功')
         this.dataList = []
         this.listTotal = 0
         this.sleectBox.currentPage = 1
         this.dcurrentPage = 1
         this.handletwoList()
       } else {
-        this.$alert(result.message, '导入失败', {
-          confirmButtonText: '确定'
-        })
+        this.$errorMsg('导入失败')
       }
     },
     async getList() {
@@ -678,7 +749,7 @@ export default {
       this.handletwoList()
     },
     // 获取货品信息
-    async handletwoList() {
+    handletwoList() {
       // this.searchForm.type
       this.listLoading = true
 
@@ -688,10 +759,11 @@ export default {
         policyId: this.comCode,
         saleTypeCode: ''
       }
-      try {
-        const { data } = await getMaterialList(paramss)
-        this.dataList = data.records
+
+      getMaterialList(paramss).then(res => {
+        const data = res.data
         data.records.forEach(k => {
+          k.fang = true
           k.walletIds = []
           k.rebateWalletIds = []
           if (!k.specification) {
@@ -711,10 +783,9 @@ export default {
           }
         })
         this.listTotal = data.total
+        this.dataList = data.records
         this.listLoading = false
-      } catch (error) {
-        console.error(error)
-      }
+      })
     },
     // 提交审核
     handleAddPolicy(policyCustomers, region) {
@@ -848,7 +919,6 @@ export default {
           return
         }
       }
-
       savePolicy(this.dataList).then(res => {
         this.dataList = []
         this.dcurrentPage = 1
@@ -858,7 +928,7 @@ export default {
         this.handletwoList()
       })
     },
-    handleK3List(e, row) {
+    handleK3List(e, row, index, name) {
       const item = this.k3List.filter(k => {
         return k.id == e
       })[0]
@@ -866,6 +936,11 @@ export default {
       this.$set(row, 'materialName', item.name)
       this.$set(row, 'specification', item.specification)
       this.$set(row, 'materialId', item.id)
+      this.dataList[index].materialNumber = item.number
+      this.dataList[index].materialName = item.name
+      this.dataList[index].specification = item.specification
+      this.dataList[index].materialId = item.id
+
       this.getK3List()
     },
     handleReset() {
@@ -876,7 +951,9 @@ export default {
   components: {
     TabelTransfer,
     AddCondition,
-    ImageUpload
+    ImageUpload,
+    PlTable,
+    PlTableColumn
   }
 }
 </script>
@@ -914,4 +991,7 @@ h4 {
 .footer {
   margin-bottom: 20px;
 }
+::v-deep .el-table__virtual-wrapper {
+  width: auto !important;
+}
 </style>

src/views/sales_policy/components/Examine.vue

@@ -163,6 +163,7 @@
             :data="dataList"
             element-loading-text="Loading"
             border
+            max-height="700"
             fit
             highlight-current-row
             stripe

src/views/sales_policy/components/details.vue

@@ -158,6 +158,7 @@
               :data="dataList"
               element-loading-text="Loading"
               border
+              max-height="700"
               fit
               highlight-current-row
               stripe

src/views/sales_policy/components/editPolicy.vue

@@ -115,69 +115,91 @@
           </el-row>
           <div class="table">
             <!-- v-el-select-loadmore="loadmore2" -->
-            <el-table
+            <pl-table
               v-loading="listLoading"
               :data="dataList"
+              row-key="id"
+              use-virtual
+              fixedColumnsRoll
+              :dataChangesScrollTop="false"
+              inverse-current-row
+              bigDataCheckbox
               element-loading-text="Loading"
-              max-height="600"
+              max-height="700"
               border
               fit
               highlight-current-row
               stripe
             >
-              <el-table-column type="index" label="序号" width="50" align="left" />
-              <el-table-column min-width="200" prop="materialNumber" label="物料编码" align="left">
+              <pl-table-column type="index" label="序号" width="50" align="left" />
+              <pl-table-column prop="materialNumber" label="物料编码" align="left" min-width="200">
                 <template slot-scope="scope">
                   <CopyButton :copy-text="scope.row.materialNumber" />
+                  <template v-if="scope.row.fang">
+                    {{ scope.row.materialNumber }}
+                  </template>
                   <el-select
+                    v-else
                     v-model="scope.row.materialNumber"
                     size="mini"
                     :remote-method="query => remoteMethod(query, 'number')"
                     filterable
                     remote
                     style="width: 85%"
-                    @change="handleK3List($event, scope.row)"
+                    @change="handleK3List($event, scope.row, scope.$index, 'materialNumber')"
                   >
-                    <el-option v-for="item in k3List" :key="item.id" :label="item.number" :value="item.id" />
+                    <el-option v-for="(item, index) in k3List" :key="index" :label="item.number" :value="item.id" />
                   </el-select>
                 </template>
-              </el-table-column>
-              <el-table-column show-overflow-tooltip min-width="150" prop="materialName" label="产品名称" align="left">
+              </pl-table-column>
+              <pl-table-column show-overflow-tooltip min-width="150" prop="materialName" label="产品名称" align="left">
                 <template slot-scope="scope">
                   <CopyButton :copy-text="scope.row.materialName" />
                   <span>{{ scope.row.materialName }}</span>
                 </template>
-              </el-table-column>
-
-              <el-table-column min-width="300" prop="specification" label="规格型号" align="left">
+              </pl-table-column>
+              <pl-table-column min-width="300" prop="specification" label="规格型号" align="left">
                 <template slot-scope="scope">
                   <CopyButton :copy-text="scope.row.specification" />
+                  <template v-if="scope.row.fang">
+                    {{ scope.row.specification }}
+                  </template>
                   <el-select
+                    v-else
                     v-model="scope.row.specification"
                     size="mini"
                     :remote-method="query => remoteMethod(query, 'specification')"
                     filterable
-                    remote
                     style="width: 85%"
-                    @change="handleK3List($event, scope.row)"
+                    remote
+                    @change="handleK3List($event, scope.row, scope.$index, 'specification')"
                   >
-                    <el-option v-for="item in k3List" :key="item.id" :label="item.specification" :value="item.id" />
+                    <el-option
+                      v-for="(item, index) in k3List"
+                      :key="index"
+                      :label="item.specification"
+                      :value="item.id"
+                    />
                   </el-select>
                 </template>
-              </el-table-column>
-              <el-table-column show-overflow-tooltip min-width="150" prop="saleTypeName" label="销售类型" align="left">
+              </pl-table-column>
+              <pl-table-column show-overflow-tooltip min-width="150" prop="saleTypeName" label="销售类型" align="left">
                 <template slot-scope="scope">
+                  <template v-if="scope.row.fang">
+                    {{ scope.row.saleTypeName }}
+                  </template>
                   <el-select
+                    v-else
                     v-model="scope.row.saleTypeId"
                     size="mini"
                     filterable
-                    @change="handleSalesType($event, scope.row)"
+                    @change="handleSalesType($event, scope.row, scope.$index, 'saleTypeId')"
                   >
                     <el-option v-for="item in typeList" :key="item.id" :label="item.saleName" :value="item.id" />
                   </el-select>
                 </template>
-              </el-table-column>
-              <el-table-column
+              </pl-table-column>
+              <pl-table-column
                 show-overflow-tooltip
                 min-width="150"
                 prop="saleTypeCode"
@@ -185,33 +207,57 @@
                 align="left"
               />
 
-              <el-table-column prop="discAmount" label="格力折扣" align="right">
+              <pl-table-column prop="discAmount" label="格力折扣" align="right">
                 <template slot-scope="scope">
+                  <template v-if="scope.row.fang">
+                    {{ scope.row.discAmount }}
+                  </template>
                   <el-input
+                    v-else
                     v-model.number="scope.row.discAmount"
-                    size="mini"
                     class="yinput"
                     type="number"
                     placeholder="请输入格力折扣"
+                    size="mini"
                     @mousewheel.native.prevent
+                    @change="setText($event, scope.$index, scope.row, 'discAmount')"
                   />
                 </template>
-              </el-table-column>
-              <el-table-column prop="price" label="单价" align="right" show-overflow-tooltip min-width="150">
+              </pl-table-column>
+              <pl-table-column prop="price" label="单价" align="right" show-overflow-tooltip min-width="150">
                 <template slot-scope="scope">
+                  <template v-if="scope.row.fang">
+                    {{ scope.row.price }}
+                  </template>
                   <el-input
+                    v-else
                     v-model.number="scope.row.price"
                     class="yinput"
                     type="number"
                     placeholder="请输入单价"
                     size="mini"
+                    @change="setText($event, scope.$index, scope.row, 'price')"
                     @mousewheel.native.prevent
                   />
                 </template>
-              </el-table-column>
-              <el-table-column label="返利钱包" align="left" show-overflow-tooltip min-width="150">
+              </pl-table-column>
+              <pl-table-column label="返利钱包" align="left" show-overflow-tooltip min-width="150">
                 <template slot-scope="scope">
-                  <el-select v-model="scope.row.rebateWalletIds" size="mini" multiple filterable>
+                  <template v-if="scope.row.fang">
+                    <template v-for="(item, index) in scope.row.walletRelaList">
+                      <el-tag v-if="item.type === 'REBATE'" :key="index" size="mini">
+                        {{ item.walletName }}
+                      </el-tag>
+                    </template>
+                  </template>
+                  <el-select
+                    v-else
+                    v-model="scope.row.rebateWalletIds"
+                    size="mini"
+                    multiple
+                    filterable
+                    @change="setText($event, scope.$index, scope.row, 'rebateWalletIds')"
+                  >
                     <el-option
                       v-for="item in rebateList"
                       :key="item.walletRebateId"
@@ -220,33 +266,52 @@
                     />
                   </el-select>
                 </template>
-              </el-table-column>
-              <el-table-column label="现金钱包" align="left" show-overflow-tooltip min-width="150">
+              </pl-table-column>
+              <pl-table-column label="现金钱包" align="left" show-overflow-tooltip min-width="150">
                 <template slot-scope="scope">
-                  <el-select v-model="scope.row.walletIds" size="mini" multiple filterable>
+                  <template v-if="scope.row.fang">
+                    <template v-for="(item, index) in scope.row.walletRelaList">
+                      <el-tag v-if="item.type === 'COMMONLY'" :key="index" size="mini">
+                        {{ item.walletName }}
+                      </el-tag>
+                    </template>
+                  </template>
+                  <el-select
+                    v-else
+                    v-model="scope.row.walletIds"
+                    size="mini"
+                    multiple
+                    filterable
+                    @change="setText($event, scope.$index, scope.row, 'walletIds')"
+                  >
                     <el-option v-for="item in NoRebateWalletList" :key="item.id" :label="item.name" :value="item.id" />
                   </el-select>
-                  <!-- <el-tag
-                  style="margin: 5px"
-                  type="success"
-                  size="mini"
-                  v-for="item in scope.row.walletRelaList"
-                  >{{ item.walletName }}</el-tag
-                > -->
                 </template>
-              </el-table-column>
-              <el-table-column prop="remark" label="备注" align="left" show-overflow-tooltip min-width="150">
+              </pl-table-column>
+              <pl-table-column prop="remark" label="备注" align="left" show-overflow-tooltip min-width="150">
                 <template slot-scope="scope">
-                  <el-input v-model="scope.row.remark" placeholder="备注" size="mini" />
+                  <template v-if="scope.row.fang">
+                    {{ scope.row.remark }}
+                  </template>
+                  <el-input
+                    v-else
+                    v-model="scope.row.remark"
+                    placeholder="备注"
+                    size="mini"
+                    @change="setText($event, scope.$index, scope.row, 'remark')"
+                  />
                 </template>
-              </el-table-column>
-              <el-table-column prop="status" label="状态" align="left" show-overflow-tooltip min-width="150">
+              </pl-table-column>
+              <pl-table-column prop="status" label="状态" align="left" show-overflow-tooltip min-width="150">
                 <template slot-scope="scope">
                   {{ scope.row.status ? '启用' : '作废' }}
                 </template>
-              </el-table-column>
-              <el-table-column min-width="100" fixed="right" label="操作" align="center">
+              </pl-table-column>
+              <pl-table-column fixed="right" label="操作" align="center" min-width="150">
                 <template slot-scope="scope">
+                  <el-button type="text" class="textColor el-popover-left" @click="scope.row.fang = !scope.row.fang"
+                    >编辑</el-button
+                  >
                   <el-popconfirm
                     confirm-button-text="好的"
                     cancel-button-text="不用了"
@@ -280,8 +345,8 @@
                     <el-button slot="reference" type="text" class="textColor el-popover-left">作废</el-button>
                   </el-popconfirm>
                 </template>
-              </el-table-column>
-            </el-table>
+              </pl-table-column>
+            </pl-table>
           </div>
           <!-- 分页 -->
           <div style="margin: 20px 20px 20px 0; display: flex; justify-content: space-between">
@@ -388,8 +453,8 @@ import { downloadFiles, handleImport } from '@/utils/util'
 import TabelTransfer from './TabelTransfer'
 import AddCondition from './AddCondition'
 import EditCondition from './EditCondition'
-
 import ImageUpload from '@/components/Common/image-upload.vue'
+import { PlTable, PlTableColumn } from 'pl-table'
 
 export default {
   directives: {
@@ -493,6 +558,9 @@ export default {
         this.$successMsg(status ? '启用' : '作废')
       })
     },
+    setText(e, index, row, name) {
+      this.dataList[index][name] = row[name]
+    },
     // 下载excel模板
     handleDownloadFiles() {
       downloadFiles('policy/download')
@@ -587,7 +655,7 @@ export default {
 
       this.typeList = typeData.data.records
     },
-    handleSalesType(e, row) {
+    handleSalesType(e, row, index, name) {
       const item = this.typeList.filter(k => {
         return k.id === e
       })[0]
@@ -595,15 +663,20 @@ export default {
       const rebateList = []
       this.rebateList.forEach(k => {
         k.saleTypes.forEach(j => {
-          if (!linshi.includes(j.saleTypeId) && j.saleTypeId == e) {
+          if (!linshi.includes(j.saleTypeId) && j.saleTypeId === e) {
             rebateList.push(k)
             linshi.push(j.saleTypeId)
           }
         })
       })
       if (rebateList.length) {
+        this.dataList[index].rebateWalletIds = [...new Set([...row.rebateWalletIds, rebateList[0].walletRebateId])]
         this.$set(row, 'rebateWalletIds', [...new Set([...row.rebateWalletIds, rebateList[0].walletRebateId])])
       }
+      this.dataList[index][name] = row[name]
+      this.dataList[index].saleTypeCode = item.saleCode
+      this.dataList[index].saleTypeName = item.saleName
+
       this.$set(row, 'saleTypeCode', item.saleCode)
       this.$set(row, 'saleTypeName', item.saleName)
       // this.$set(row,'saleTypeId',item.id)
@@ -653,18 +726,15 @@ export default {
       this.importLoading = false
       this.importFileList = []
       if (result.code === 200) {
-        this.$alert(result.message, '导入成功', {
-          confirmButtonText: '确定'
-        })
+        this.$successMsg('导入成功')
+
         this.dataList = []
         this.listTotal = 0
         this.sleectBox.currentPage = 1
         this.dcurrentPage = 1
         this.handletwoList()
       } else {
-        this.$alert(result.message, '导入失败', {
-          confirmButtonText: '确定'
-        })
+        this.$errorMsg('导入失败')
       }
     },
     async getList() {
@@ -736,6 +806,8 @@ export default {
       getMaterialList(paramss)
         .then(result => {
           result.data.records.forEach(k => {
+            k.fang = true
+
             k.walletIds = []
             k.rebateWalletIds = []
             if (!k.specification) {
@@ -895,7 +967,7 @@ export default {
         this.handletwoList()
       })
     },
-    handleK3List(e, row) {
+    handleK3List(e, row, index, name) {
       const item = this.k3List.filter(k => {
         return k.id == e
       })[0]
@@ -903,6 +975,11 @@ export default {
       this.$set(row, 'materialName', item.name)
       this.$set(row, 'specification', item.specification)
       this.$set(row, 'materialId', item.id)
+      this.dataList[index].materialNumber = item.number
+      this.dataList[index].materialName = item.name
+      this.dataList[index].specification = item.specification
+      this.dataList[index].materialId = item.id
+
       this.getK3List()
     },
     handleReset() {
@@ -915,7 +992,9 @@ export default {
     AddCondition,
     ImageUpload,
     EditCondition,
-    TabelTransfer
+    TabelTransfer,
+    PlTable,
+    PlTableColumn
   }
 }
 </script>
@@ -953,4 +1032,7 @@ h4 {
 .footer {
   margin-bottom: 20px;
 }
+::v-deep .el-table__virtual-wrapper {
+  width: auto !important;
+}
 </style>