feat: 增加类目选择器并更新组件库

app/web/api/operation.api.ts

@@ -90,5 +90,17 @@ export default {
     return http.post(`${config.opapiHost}/kdspOp/api/kdsp/activity/activity-info/current-valid-activity`, params, {
       accessToken: true
     });
-  }
+  },
+  // 获取品牌列表
+  getBrandAndPriority(params) {
+    return http.post(`${config.opapiHost}/kdspOp/api/kdsp/op/operateIntervene/getBrandAndPriority`, params, {
+      accessToken: true
+    });
+  },
+  // 获取品类列表
+  getCategoryAndPriority(params) {
+    return http.post(`${config.opapiHost}/kdspOp/api/kdsp/op/operateIntervene/getCategoryAndPriority`, params, {
+      accessToken: true
+    });
+  },
 };
\ No newline at end of file

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

+<template>
+  <div class="categorySelectorContainer">
+    <!-- <Button type="primary" @click="save">保存</Button> -->
+     <div class="item" v-for="(item, index) in categoryData" :key="index">
+       <Form ref="formInline" :model="item" inline>
+          <FormItem label="素材名称" prop="name">
+            <Input v-model="item.name" placeholder="" />
+          </FormItem>
+          <FormItem label="素材图片" prop="img">
+            <Upload v-model="item.img" @change="updateStyle($event, 'tagBg', item)"></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>
+          </FormItem>
+          <FormItem label="跳转链接" prop="link">
+            <Input v-model="item.link" placeholder="" />
+          </FormItem>
+       </Form>
+     </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">
+              <Table
+                :columns="tableColumn"
+                :data="tableData"
+                class="tableStyle"
+                :loading="loading"
+              />
+              <Page class="page" :total="total" @on-change="changePageNo" show-total></Page>
+            </TabPane>
+            <TabPane label="品牌" name="2">
+              <Table
+                :columns="tableColumn"
+                :data="tableData"
+                class="tableStyle"
+                :loading="loading"
+              />
+              <Page class="page" :total="total" @on-change="changePageNo" show-total></Page>
+            </TabPane>
+        </Tabs>
+        <div slot="footer" />
+     </Modal>
+  </div>
+</template>
+<script>
+import Upload from '@editor/component/DynamicForm/component/Upload/index.vue';
+import operationApi from '@api/operation.api';
+// const validOptions = {
+//   pageName: [
+//     { required: true, message: '请输入页面名称', trigger: 'blur' }
+//   ],
+//   shareOpenMethod: [
+//     { validator: this.validateOpenMethod, trigger: 'blur'  }
+//   ],
+// };
+const categoryCol = function() {
+  return [
+    {
+      align: 'center',
+      title: '类目名称',
+      key: 'categoryName',
+    },
+    {
+      align: 'center',
+      title: '类目编码',
+      key: 'sceneId',
+      width: 120
+    },
+    {
+      align: 'center',
+      title: '类目级别',
+      key: 'categoryLevel',
+      width: 120
+    },
+    {
+      align: 'center',
+      title: '图片',
+      render: (h, params) => {
+        const row = params.row;
+        return h('div', {
+          style: {
+            padding: '5px 0'
+          }
+        }, [
+            h('img', {
+              attrs: {
+                src: row.imgUrl,
+                width: 100,
+                height: 100
+              },
+            })
+          ]
+        )
+      },
+      width: 120
+    },
+    {
+      align: 'center',
+      title: '选择',
+      width: 120,
+      render: (h, params) => {
+        const row = params.row;
+        return h('div', [
+            h('Button', {
+              props: {
+                type: 'primary',
+                size: 'small'
+              },
+              on: {
+                click: () => {
+                  this.select(row);
+                }
+              }
+            }, '选择')
+          ]
+        )
+      }
+    },
+  ]
+}
+
+const brandCol = function() {
+  return [
+    {
+      align: 'center',
+      title: '品牌名称',
+      key: 'brandName',
+    },
+    {
+      align: 'center',
+      title: 'logo',
+      render: (h, params) => {
+        const row = params.row;
+        return h('div', {
+          style: {
+            padding: '5px 0'
+          }
+        }, [
+            h('img', {
+              attrs: {
+                src: row.imgUrl,
+                width: 100,
+                height: 100
+              },
+            })
+          ]
+        )
+      },
+      width: 300
+    },
+    {
+      align: 'center',
+      title: '选择',
+      width: 120,
+      render: (h, params) => {
+        const row = params.row;
+        return h('div', [
+            h('Button', {
+              props: {
+                type: 'primary',
+                size: 'small'
+              },
+              on: {
+                click: () => {
+                  this.select(row);
+                }
+              }
+            }, '选择')
+          ]
+        )
+      }
+    }
+  ]
+}
+export default {
+  components: {
+    Upload
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    categoryData(val) {
+      console.log(val);
+      this.$emit('input', val);
+    }
+  },
+  methods: {
+    updateStyle() {},
+    add() {
+      this.showModal = true;
+      this.getData();
+    },
+    changePageNo(val) {
+      this.searchParams.pageNo = val;
+      this.getData();
+    },
+    selectType(val) {
+      this.type = val;
+      let searchParams = {};
+      searchParams.pageSize = 10;
+      searchParams.pageNo = 1;
+      searchParams.name = '';
+      searchParams.sceneId = '';
+      this.searchParams = searchParams;
+      this.getData();
+    },
+    async getData() {
+      let res;
+      this.loading = true;
+      this.tableData = [];
+      this.tableColumn = this.type == 1 ? categoryCol.bind(this)() : brandCol.bind(this)();
+      try {
+        if (this.type == 1) {
+          // 品类
+          res = await operationApi.getCategoryAndPriority(this.searchParams);
+        } else {
+          // 品牌
+          res = await operationApi.getBrandAndPriority(this.searchParams);
+        }
+        this.$nextTick(() => {
+          this.loading = false
+          this.total = res.total || 0;
+          this.tableData = res.records || [];
+        })
+      } catch (e) {
+        this.loading = false;
+      }
+    },
+    select(data) {
+      this.categoryData.push({
+        name: data.categoryName || data.brandName || '',
+        img: data.imgUrl || '',
+        text: '',
+        logoUrl: '',
+        link: ''
+      })
+      this.showModal = false;
+    }
+  },
+  data() {
+    return {
+      showModal: false,
+      categoryData: [],
+      type: '1',
+      tableData: [],
+      tableColumn: [],
+      total: 0,
+      searchParams: {
+        pageSize: 10,
+        pageNo: 1,
+        name: '',
+        sceneId: ''
+      },
+      loading: false
+    }
+  },
+  created() {
+    this.categoryData = JSON.parse(JSON.stringify(this.value));
+  }
+}
+</script>
+<style scoped lang="less">
+.item{
+  border: 1px solid #dddee1;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  padding: 5px;
+}
+.page{
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+.categorySelectorContainer{
+  /deep/ .ivu-form-item{
+    margin-bottom: 10px;
+  }
+  /deep/ .ivu-form-item-label{
+    width: 80px !important;
+  }
+}
+
+</style>

app/web/page/editor/component/DynamicForm/index.ts

@@ -8,6 +8,7 @@ import ColorSelector from './component/ColorSelector/index.vue';
 import DiscountGoodsSelector from './component/DiscountGoodsSelector/index.vue';
 import SnapUpActivitySelector from './component/SnapUpActivitySelector/index.vue';
 import CategoryTypeSelector from './component/CategoryTypeSelector/index.vue';
+import CategorySelector from './component/CategorySelector/index.vue';
 import BaseSelect from './component/BaseSelect/index.vue';
 import ComponentSelect from './component/ComponentSelect/index.vue';
 import FormList from './component/FormList/index.vue';
@@ -21,7 +22,7 @@ import { getAllScheme } from '../../../store/modules/editor/scheme';
 import EventBus from '@service/eventBus.service';
 
 const allComponentsMap = getAllScheme();
-@Component({ components: { Upload, ColorSelector, BaseSelect, FormList, Textarea, Number, ComponentSelect, GoodsTableModal, CouponTableModal, ColumnSelector, DiscountGoodsSelector, SnapUpActivitySelector, CategoryTypeSelector }, name: 'DynamicForm' })
+@Component({ components: { Upload, ColorSelector, BaseSelect, FormList, Textarea, Number, ComponentSelect, GoodsTableModal, CouponTableModal, ColumnSelector, DiscountGoodsSelector, SnapUpActivitySelector, CategoryTypeSelector, CategorySelector }, name: 'DynamicForm' })
 export default class DynamicForm extends Mixins(ContextMenuMixin, DynamicFormMixin) {
   @State(state => state.editor.curEleIndex) curEleIndex;
   @State(state => state.editor.curChildIndex) curChildIndex;

package-lock.json

@@ -2178,7 +2178,7 @@
     "@qg/citrus-ui": {
       "version": "0.3.39-beta3",
       "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.3.39-beta3.tgz",
-      "integrity": "sha512-YGmD5gPuyE9XXlsADFgZLSKmIv3bDRiprhib/FYespcYrQFOwqwq3u5Q9cP90Hwp9t42DT5/HrBsVKzub3w+hw==",
+      "integrity": "sha512-WzG+7UMgWy4k+OSRU3YkdB8owZKuMVVa0XfokzxKt1pp37SKaYyNEuvVD2dM6wWIo2/JVsojitk8J2n7BplR/Q==",
       "requires": {
         "@better-scroll/core": "^2.1.1",
         "@qg/cherry-ui": "^2.23.9",