feat: 调整猜你喜欢商品选择器

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

@@ -3,10 +3,130 @@
     <span class="option" @click="select(item.id)" v-for="(item, index) in options" :key="index" :class="{selected: item.id == dataValue.type}">
       {{item.label}} 
     </span>
-    <!-- <Button type="primary" @click="save">保存</Button> -->
+    <div v-if="dataValue.type == 'category'">
+      <Button type="primary" @click="add">选择品类</Button>
+    </div>
+    <div v-if="dataValue.type == 'brand'">
+      <Button type="primary" @click="add">选择品牌</Button>
+    </div>
+    <Modal v-model="showModal" :mask-closable="false" :title="modalTitle" width="600">
+        <div v-if="dataValue.type == 'category'">
+          <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="searchList">查询</Button>
+            </Form>
+          </div>
+          <Table
+            @on-select="selectItem"
+            @on-select-cancel="cancelSelectItem"
+            :columns="tableColumn"
+            :data="tableData"
+            class="tableStyle"
+            height="600"
+            :loading="loading"
+          />
+          <Page class="page" :total="total" @on-change="changePageNo" show-total></Page>
+        </div>
+        <div v-if="dataValue.type == 'brand'">
+          <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="searchList">查询</Button>
+            </Form>
+          </div>
+          <Table
+            @on-select="selectItem"
+            @on-select-cancel="cancelSelectItem"
+            :columns="tableColumn"
+            :data="tableData"
+            class="tableStyle"
+            height="600"
+            :loading="loading"
+          />
+          <Page class="page" :total="total" @on-change="changePageNo" show-total></Page>
+        </div>
+        <div slot="footer">
+          <Button @click="showModal = false">取消</Button>
+          <Button type="primary" @click="submitSelect">确认</Button>
+        </div>
+     </Modal>
   </div>
 </template>
 <script>
+import operationApi from '@api/operation.api';
+const categoryCol = function() {
+  return [
+    {
+      type: 'selection',
+      width: 60,
+      align: 'center'
+    },
+    {
+      align: 'center',
+      title: '类目名称',
+      key: 'categoryName',
+    },
+    {
+      align: 'center',
+      title: '类目编码',
+      key: 'sceneId',
+      width: 180
+    },
+  ]
+}
+const brandCol = function() {
+  return [
+    {
+      type: 'selection',
+      width: 60,
+      align: 'center'
+    },
+    {
+      align: 'center',
+      title: '品牌名称',
+      key: 'brandName',
+    },
+    {
+      align: 'center',
+      title: '品牌编码',
+      key: 'sceneId',
+      width: 120
+    },
+    {
+      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: 80,
+                height: 80
+              },
+            })
+          ]
+        )
+      },
+      width: 200
+    }
+  ]
+}
 export default {
   props: {
     value: {
@@ -16,6 +136,11 @@ export default {
       }
     }
   },
+  computed: {
+    modalTitle() {
+      return this.dataValue.type === 'category' ? '选择品类' : '选择品牌'
+    }
+  },
   watch: {
     value(val) {
       this.dataValue = val;
@@ -25,9 +150,94 @@ export default {
     }
   },
   methods: {
+    submitSelect() {
+      // 提交选择
+      const targetKey = this.dataValue.type === 'category' ? 'categoryId' : 'brandId';
+      this.dataValue[targetKey] = this.dataValue.type === 'category' ? this.selectCategoryCollect.join() : this.selectBrandCollect.join();
+      this.dataValue.type === 'category' ? this.dataValue.brandId = '' : this.dataValue.categoryId = ''; // 清空非当前选项的id数据
+      this.showModal = false;
+    },
+    selectItem(arr, item) {
+      // 选择某一项
+      if (this.dataValue.type == 'category') {
+        this.selectCategoryCollect.push(item.sceneId);
+        console.log(this.selectCategoryCollect);
+      }
+      if (this.dataValue.type == 'brand') {
+        this.selectBrandCollect.push(item.sceneId);
+        console.log(this.selectBrandCollect);
+      }
+    },
+    cancelSelectItem(arr, item) {
+      // 取消选择某一项
+      if (this.dataValue.type == 'category') {
+        this.selectCategoryCollect.splice(this.selectCategoryCollect.indexOf(item.sceneId), 1)
+        console.log(this.selectCategoryCollect);
+      }
+      if (this.dataValue.type == 'brand') {
+        this.selectBrandCollect.splice(this.selectBrandCollect.indexOf(item.sceneId), 1)
+        console.log(this.selectBrandCollect);
+      }
+    },
+    add() {
+      this.showModal = true;
+      this.getData();
+    },
     select(type) {
-      this.dataValue.type = type;
-    }
+      if (type == this.dataValue.type) return;
+      this.dataValue = {
+        type, 
+        brandId: '',
+        categoryId: '',
+      }
+      this.selectCategoryCollect = [];
+      this.selectBrandCollect = [];
+    },
+    changePageNo(val) {
+      this.searchParams.pageNo = val;
+      this.getData();
+    },
+    searchList() {
+      this.searchParams.pageNo = 1;
+      this.searchParams.pageSize = 10;
+      this.getData();
+    },
+    async getData() {
+      let res;
+      this.loading = true;
+      this.tableData = [];
+      this.tableColumn = this.dataValue.type == 'category' ? categoryCol.bind(this)() : brandCol.bind(this)();
+      try {
+        if (this.dataValue.type == 'category') {
+          // 品类
+          res = await operationApi.getCategoryAndPriority({...this.searchParams, categoryLevel: 1});
+        } else {
+          // 品牌
+          res = await operationApi.getBrandAndPriority(this.searchParams);
+        }
+        this.$nextTick(() => {
+          this.loading = false
+          this.total = res.total || 0;
+          const list = res.records || [];
+          list.map(item => {
+            if (this.dataValue.type == 'category') {
+              if (this.selectCategoryCollect.indexOf(item.sceneId) > -1) {
+                item._checked = true;
+              }
+            }
+            if (this.dataValue.type == 'brand') {
+              if (this.selectBrandCollect.indexOf(item.sceneId) > -1) {
+                item._checked = true;
+              }
+            }
+            return item;
+          })
+          this.tableData = list;
+        })
+      } catch (e) {
+        this.loading = false;
+      }
+    },
   },
   data() {
     return {
@@ -36,7 +246,21 @@ export default {
         {id: 'category', label: '按照品类'},
         {id: 'brand', label: '按照品牌'}
       ],
-      dataValue: {}
+      dataValue: {},
+      showModal: false,
+      categoryData: [],
+      tableData: [],
+      tableColumn: [],
+      total: 0,
+      searchParams: {
+        pageSize: 10,
+        pageNo: 1,
+        name: '',
+        sceneId: ''
+      },
+      loading: false,
+      selectCategoryCollect: [], // 选择品类集合
+      selectBrandCollect: [] // 选择品牌集合
     }
   },
   created() {
@@ -68,4 +292,42 @@ export default {
     box-shadow: 0px 0px 0px 2px rgb(45 140 240 / 20%)
   }
 }
+
+.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;
+  }
+}
+.page{
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+
+/deep/ th.ivu-table-column-center{
+  .ivu-checkbox-wrapper{
+    display: none;
+  }
+}
 </style>
\ No newline at end of file

package-lock.json

@@ -2176,9 +2176,9 @@
       }
     },
     "@qg/citrus-ui": {
-      "version": "0.3.55-beta2",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.3.55-beta2.tgz",
-      "integrity": "sha512-a5JzDfblNMo7m8U+kyVDxl9HjB2ClnV5gPaWAtTDcNL3D5sOZ4BOoa9HKpjxNWXfTBAlV1tdQiVc1myKMmPnLQ==",
+      "version": "0.3.55-beta1",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.3.55-beta1.tgz",
+      "integrity": "sha512-v8dyQNcV73rvQobtQfYinxMRjYDi137aVheInJmVZaLk/i4insKd5h3skb7OfFsR9yQ6tESk1nXks5Rx3z8j7Q==",
       "requires": {
         "@better-scroll/core": "^2.1.1",
         "@qg/cherry-ui": "^2.23.9",

package.json

@@ -30,7 +30,7 @@
     "@hubcarl/json-typescript-mapper": "^2.0.0",
     "@qg/apollo-nodejs": "^2.1.2",
     "@qg/cherry-ui": "2.23.10",
-    "@qg/citrus-ui": "0.3.55-beta2",
+    "@qg/citrus-ui": "0.3.55-beta1",
     "@riophae/vue-treeselect": "^0.4.0",
     "@types/lodash": "^4.14.117",
     "@types/node": "^10.12.0",