商品列表多选，商品选择组件增加数据回显

src/components/ProductsSelector/index.vue

@@ -36,92 +36,113 @@
   </el-row>
 </template>
 <script>
-import {getProductPage} from '@/api/ecw/product'
-import {getProductTypeList} from '@/api/ecw/productType'
-import {getProductAttrList} from '@/api/ecw/productAttr'
+import { getProductPage } from '@/api/ecw/product'
+import { getProductTypeList } from '@/api/ecw/productType'
+import { getProductAttrList } from '@/api/ecw/productAttr'
 
 export default {
-    data(){
+  props: {
+    defaultIds: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
     return {
-            list:[],
+      list: [],
       page: 1,
       pages: 1,
-            queryParams:{
+      queryParams: {
         page: 1,
         attrId: null,
         titleZh: null,
         typeId: null
       },
-            choosedList:[],
-            typeList:[],
-            attrList:[]
+      choosedList: [],
+      typeList: [],
+      attrList: []
     }
   },
-    computed:{
-        ids(){
+  computed: {
+    ids: {
+      get() {
         let arr = []
         this.choosedList.forEach(item => {
           arr.push(item.id)
         })
         return arr
+      },
+      set(v) {
+
+      }
     }
   },
-    watch:{
-        ids(val){
+  watch: {
+    ids(val) {
       this.$emit('input', val)
     }
   },
-    created(){
+  created() {
     getProductTypeList().then(res => this.typeList = res.data)
     getProductAttrList().then(res => this.attrList = res.data)
-
     this.reLoad()
+    this.ids = this.defaultIds //数据回显
   },
-    methods:{
-        reLoad(){
+  methods: {
+    reLoad() {
       this.queryParams.page = 1
       this.list = []
       this.getList()
     },
-        loadNextPage(){
-            if(this.page >= this.pages){
+    loadNextPage() {
+      if (this.page >= this.pages) {
         return this.$message.error('已加载全部')
       }
-            this.queryParams.page ++
+      this.queryParams.page++
       this.getList()
     },
-        getList(){
+    getList() {
       getProductPage(this.queryParams).then(res => {
         this.list = res.data.list //.concat(res.data.list || [])
         this.page = res.data.page
         this.pages = res.data.pages
+        this.choosedList = [] //搜搜重置，数据回显
+        if (this.defaultIds.length > 0) {
+          this.defaultIds.map(item => {
+            this.list.map(items => {
+              if (items.id == item) {
+                this.choosedList.push(items)
+              }
+            })
+          })
+        }
       })
     },
-        toggleCheck(item, checked){
-            if(checked){
+    toggleCheck(item, checked) {
+      if (checked) {
         this.choose(item)
-            }else{
+      } else {
         this.remove(item)
       }
     },
-        choose(item){
+    choose(item) {
       this.choosedList.push(item)
     },
-        remove(item){
-            this.choosedList.forEach((choosed,index) => {
-                if(choosed.id==item.id) this.choosedList.splice(index,1)
+    remove(item) {
+      this.choosedList.forEach((choosed, index) => {
+        if (choosed.id == item.id) this.choosedList.splice(index, 1)
       })
     }
   }
 }
 </script>
 <style scoped lang="scss">
-.header{
-    >div{
+.header {
+  > div {
     margin-right: 5px;
   }
 }
-.list{
+.list {
   height: 200px;
   border: 1px solid #ccc;
   overflow-y: auto;
@@ -130,7 +151,7 @@ export default {
 
   display: flex;
   flex-wrap: wrap;
-    .item{
+  .item {
     width: 50%;
     line-height: 20px;
     height: 50px;

src/views/ecw/productAttr/edit.vue

@@ -2,8 +2,8 @@
   <div class="app-container">
     <el-form ref="form" :model="form" :rules="rules" label-width="120px">
 
-      <el-form-item label="适用商品" prop="idList" v-if="form.type != 1">
-        <products-selector v-model="form.idList" />
+      <el-form-item label="适用商品" prop="idList">
+        <products-selector :defaultIds="form.idList" v-model="form.idList" />
       </el-form-item>
 
       <el-form-item label="货柜位置" prop="containerLocation">
@@ -36,10 +36,10 @@
         <el-checkbox style="width: 100px" v-model="checked[6]">需要修改</el-checkbox>
         <dict-selector v-if="checked[6]" form-type="checkbox" :type="DICT_TYPE.ECW_ORDER_ATTR" v-model="form.attrId" multiple />
       </el-form-item>
-      <!-- <el-form-item label="商品材质" prop="">
+      <el-form-item label="商品材质" prop="materialType">
         <el-checkbox style="width: 100px" v-model="checked[7]">需要修改</el-checkbox>
-        <dict-selector v-if="checked[7]" form-type="checkbox" :type="DICT_TYPE.ECW_PRODUCT_MATERIAL" v-model="form.status" multiple />
-      </el-form-item> -->
+        <dict-selector v-if="checked[7]" form-type="checkbox" :type="DICT_TYPE.ECW_PRODUCT_MATERIAL" v-model="form.materialType" multiple />
+      </el-form-item>
 
       <el-form-item>
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -75,11 +75,12 @@ export default {
         "needBook": undefined,
         "packaging": undefined,
         "requirements": undefined,
-        "square": undefined
+        "square": undefined,
+        "materialType": undefined
       },
       // 表单校验
       rules: {},
-      checked: [false, false, false, false, false, false, false]
+      checked: [false, false, false, false, false, false, false, false]
     };
   },
   computed: {
@@ -88,7 +89,7 @@ export default {
   watch: {
     'form.idList'(val) {
       if (val.length > 0) {
-        this.form.isAllProduct = undefined
+        this.form.isAllProduct = 0
       } else {
         this.form.isAllProduct = 1
       }
@@ -96,6 +97,7 @@ export default {
   },
   created() {
     this.reset()
+    this.form.idList = this.$route.query && this.$route.query.ids ? [...this.$route.query.ids].map(item => { return Number(item) }) : []
   },
   methods: {
     /** 表单重置 */
@@ -109,7 +111,8 @@ export default {
         "needBook": undefined,
         "packaging": undefined,
         "requirements": undefined,
-        "square": undefined
+        "square": undefined,
+        "materialType": undefined
       };
       this.resetForm("form");
     },
@@ -130,17 +133,3 @@ export default {
   },
 };
 </script>
\ No newline at end of file
-<style scoped lang="scss">
-.fee-item {
-  padding: 5px 0;
-  > div {
-    margin-right: 5px;
-  }
-}
-.coupon-list {
-  max-height: 200px;
-  border: 1px solid #ccc;
-  padding: 10px;
-  overflow-y: auto;
-}
-</style>
\ No newline at end of file