feat: 类目组件选择器增加删除功能,增加类目及品牌搜索

app/web/page/editor/component/DynamicForm/component/CategorySelector/index.vue

@@ -7,23 +7,35 @@
             <Input v-model="item.name" placeholder="" />
           </FormItem>
           <FormItem label="素材图片" prop="img">
-            <Upload v-model="item.img" @change="updateStyle($event, 'tagBg', item)"></Upload>
+            <Upload v-model="item.img"></Upload>
           </FormItem>
           <FormItem label="利益点" prop="text">
             <Input v-model="item.text" placeholder="" />
           </FormItem>
           <FormItem label="logo图" prop="logoUrl">
-            <Upload v-model="item.logoUrl" @change="updateStyle($event, 'tagBg', item)"></Upload>
+            <Upload v-model="item.logoUrl"></Upload>
           </FormItem>
           <FormItem label="跳转链接" prop="link">
             <Input v-model="item.link" placeholder="" />
           </FormItem>
        </Form>
+       <Button long type="error" @click="del(index)">删除</Button>
      </div>
      <Button type="ghost" @click="add">添加项目</Button>
      <Modal v-model="showModal" :mask-closable="false" title="选择品类/品牌" width="700">
         <Tabs :value="type" @on-click="selectType">
             <TabPane label="品类" name="1">
+              <div class="search">
+                <Form class="searchFormStyle" inline>
+                    <FormItem label="类目名称" prop="name">
+                      <Input v-model="searchParams.name" placeholder="" />
+                    </FormItem>
+                    <FormItem label="类目编码" prop="name">
+                      <Input v-model="searchParams.sceneId" placeholder="" />
+                    </FormItem>
+                    <Button type="primary" @click="search">查询</Button>
+                </Form>
+              </div>
               <Table
                 :columns="tableColumn"
                 :data="tableData"
@@ -33,6 +45,17 @@
               <Page class="page" :total="total" @on-change="changePageNo" show-total></Page>
             </TabPane>
             <TabPane label="品牌" name="2">
+              <div class="search">
+                <Form class="searchFormStyle" inline>
+                  <FormItem label="品牌名称" prop="name">
+                    <Input v-model="searchParams.name" placeholder="" />
+                  </FormItem>
+                  <FormItem label="品牌编码" prop="name">
+                    <Input v-model="searchParams.sceneId" placeholder="" />
+                  </FormItem>
+                  <Button type="primary" @click="search">查询</Button>
+                </Form>
+              </div>
               <Table
                 :columns="tableColumn"
                 :data="tableData"
@@ -89,8 +112,8 @@ const categoryCol = function() {
             h('img', {
               attrs: {
                 src: row.imgUrl,
-                width: 100,
-                height: 100
+                width: 80,
+                height: 80
               },
             })
           ]
@@ -100,7 +123,7 @@ const categoryCol = function() {
     },
     {
       align: 'center',
-      title: '选择',
+      title: '操作',
       width: 120,
       render: (h, params) => {
         const row = params.row;
@@ -130,6 +153,12 @@ const brandCol = function() {
       title: '品牌名称',
       key: 'brandName',
     },
+    {
+      align: 'center',
+      title: '品牌编码',
+      key: 'sceneId',
+      width: 120
+    },
     {
       align: 'center',
       title: 'logo',
@@ -143,8 +172,8 @@ const brandCol = function() {
             h('img', {
               attrs: {
                 src: row.imgUrl,
-                width: 100,
-                height: 100
+                width: 80,
+                height: 80
               },
             })
           ]
@@ -154,7 +183,7 @@ const brandCol = function() {
     },
     {
       align: 'center',
-      title: '选择',
+      title: '操作',
       width: 120,
       render: (h, params) => {
         const row = params.row;
@@ -193,11 +222,18 @@ export default {
     }
   },
   methods: {
-    updateStyle() {},
+    search() {
+      this.searchParams.pageNo = 1;
+      this.searchParams.pageSize = 10;
+      this.getData();
+    },
     add() {
       this.showModal = true;
       this.getData();
     },
+    del(index) {
+      this.categoryData.splice(index, 1)
+    },
     changePageNo(val) {
       this.searchParams.pageNo = val;
       this.getData();
@@ -288,4 +324,34 @@ export default {
   }
 }
 
+.inline {
+  display: inline-block;
+}
+
+.searchFormStyle {
+  text-align: left;
+  clear: both;
+  background-color: #fff;
+  padding: 4px;
+  min-height: 70px;
+  font-size: 0;
+  display: flex;
+  align-items: center;
+  .btnGroupStyle{
+    button{
+      margin-right: 6px;
+    }
+  }
+  /deep/ .ivu-form-item{
+    margin-bottom: 0;
+  }
+  /deep/ .ivu-form-item-label {
+    font-weight: bold;
+    display: inline-block;
+  }
+
+  /deep/.ivu-form-item-content {
+    display: inline-block;
+  }
+}
 </style>