品牌选择组件和三级分类组件修改

@@ -3,7 +3,7 @@
         <Row>
             <Col :span="labelSpan"><label class="field-label">{{fieldLabel}}:</label></Col>
             <Col :span="fieldSpan">
-                <Select v-model="fieldModel" @on-change="selectChange">
+                <Select v-model="_fieldModel" @on-change="selectChange" clearable>
                     <Option v-for="option in optionList" :value="option.brandId" :key="option.brandId">
                         {{option.brandName}}
                     </Option>
@@ -24,6 +24,10 @@
                 type: String
             },
 
+            fieldModel: {
+                type: [String, Number]
+            },
+
             labelSpan: {
                 type: [String, Number],
                 default: 6
@@ -36,10 +40,14 @@
         },
         data() {
             return {
-                fieldModel: '',
                 optionList: []
             }
         },
+        computed: {
+            _fieldModel() {
+                return this.fieldModel;
+            }
+        },
         created() {
             const err_msg = '获取品牌列表失败。';
             service.getBrand().then((res) => {

@@ -5,7 +5,7 @@
                 <Row>
                     <Col :span="6"><label class="field-label">{{fieldSort.first.label}}:</label></Col>
                     <Col :span="18">
-                    <Select v-model="sortId.first" :placeholder="fieldSort.first.holder" @on-change="firstChange">
+                    <Select v-model="_firstModel" :placeholder="fieldSort.first.holder" @on-change="firstChange" clearable>
                         <Option v-for="option in firstList" :value="option.sortId" :key="option.sortId">
                             {{option.sortName}}
                         </Option>
@@ -17,7 +17,7 @@
             <Row>
                 <Col :span="6"><label class="field-label">{{fieldSort.second.label}}:</label></Col>
                 <Col :span="18">
-                <Select v-model="sortId.second" :placeholder="fieldSort.second.holder" @on-change="secondChange">
+                <Select v-model="_secondModel" :placeholder="fieldSort.second.holder" @on-change="secondChange" clearable>
                     <Option v-for="option in secondList" :value="option.sortId" :key="option.sortId">
                         {{option.sortName}}
                     </Option>
@@ -29,7 +29,7 @@
             <Row>
                 <Col :span="6"><label class="field-label">{{fieldSort.third.label}}:</label></Col>
                 <Col :span="18">
-                <Select v-model="sortId.third" :placeholder="fieldSort.third.holder" @on-change="thirdChange">
+                <Select v-model="_thirdModel" :placeholder="fieldSort.third.holder" @on-change="thirdChange" clearable>
                     <Option v-for="option in thirdList" :value="option.sortId" :key="option.sortId">
                         {{option.sortName}}
                     </Option>
@@ -50,6 +50,9 @@
         props: {
             fieldSort: {
                 type: Object
+            },
+            firstModel: {
+                type: [String, Number]
             }
         },
         data() {
@@ -66,28 +69,44 @@
                 }
             }
         },
+        computed: {
+            _firstModel() {
+                return this.fieldSort.first.model;
+            },
+            _secondModel() {
+                return this.fieldSort.second.model;
+            },
+            _thirdModel() {
+                return this.fieldSort.third.model;
+            }
+        },
         created() {
             this.getSortInfo({level: 1});
         },
 
         methods: {
             firstChange(val) {
+                this.sortId.first = val;
                 this.getSortInfo({
-                    level: 2,
-                    sortId: this.sortId.first
-                });
-                this.showSecond = true;
+                        level: 2,
+                        sortId: val
+                    });
+
+                this.showSecond = val !== '' && val !== null;
                 this.$emit('on-change', this.sortId);
             },
             secondChange(val) {
+                this.sortId.second = val;
                 this.getSortInfo({
-                    level: 3,
-                    sortId: this.sortId.second
-                });
-                this.showThird = true;
+                        level: 3,
+                        sortId: val
+                    });
+
+                this.showThird = val !== '' && val !== null;
                 this.$emit('on-change', this.sortId);
             },
             thirdChange(val) {
+                this.sortId.third = val;
                 this.$emit('on-change', this.sortId);
             },
             getSortInfo(params) {

@@ -124,7 +124,6 @@
                 const params = {
                     productSkn: this.filters.sknCode.model,
                     factoryCode: this.filters.prodCode.model,
-                    productName: this.filters.prodName.model,
                     skuFactoryCode: this.filters.prodBarCode.model,
                     maxSortId: this.filters.sort.first.model,
                     middleSortId: this.filters.sort.second.model,
@@ -138,9 +137,9 @@
                 this.productList(params);
             },
             clearFilter() {
+                this.filters = JSON.parse(this.initialFilters);
                 this.productList();
                 this.useFilterSign = false;
-                this.filters = JSON.parse(this.initialFilters);
             },
             productList(params) {
                 service.productList(
@@ -166,9 +165,9 @@
                 this.pageData.current = 1;
             },
             sortChange(sort) {
-                this.filters.sort.first.model = sort.first || null;
-                this.filters.sort.second.model = sort.second || null;
-                this.filters.sort.third.model = sort.third || null;
+                this.filters.sort.first.model = sort.first;
+                this.filters.sort.second.model = sort.second;
+                this.filters.sort.third.model = sort.third;
             },
             brandChange(val) {
                 _.set(this.filters, 'brand.model', val);
@@ -252,7 +251,7 @@
     }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
     .filter-row {
         margin-bottom: 20px;
 
@@ -274,4 +273,12 @@
         float: right;
         margin-top: 20px;
     }
+
+    .prd-img {
+        max-height: 200px;
+    }
+
+    .action-btn-row {
+        margin-top: 10px;
+    }
 </style>

@@ -127,7 +127,7 @@ let tableCols = [
         key: 'image',
         align: 'center',
         render (row, column, index) {
-            return `<img src="${row.picImgUrl}">`;
+            return `<img class="prd-img" src="${row.picImgUrl}">`;
         }
     },
     {
@@ -180,11 +180,11 @@ let tableCols = [
         key: 'action',
         align: 'center',
         render: function(row, column, index) {
-            return `<div class="">
+            return `<div class="action-btn-row">
                 <i-button type="primary" size="small">尺码维护</i-button>
                 <i-button type="primary" size="small" @click="editProduct(${row.productSkn})">内容编辑</i-button>
             </div>
-            <i-button type="error" size="small" @click="setOffSale(${row.productSkn})">下架</i-button>`;
+            <div class="action-btn-row"><i-button type="error" size="small" @click="setOffSale(${row.productSkn})">下架</i-button></div>`;
         }
     }
 ];