需求变更-1

src/App.vue

@@ -19,6 +19,13 @@ html, body, #app {
   height: 100%;
 }
 
+.pb-10 {
+  padding-bottom: 10px;
+}
+.mb-10{
+  margin-bottom: 10px;
+}
+
 .components {
   background: #07193D;
 

src/assets/main.css

@@ -210,3 +210,36 @@ a, .green {
 .scrollTable tr:hover > .tableCell {
   background-color: rgba(255, 255, 255, .1) !important;
 }
+
+.AppSubTitle {
+  height: 48px;
+  padding: 8px 0 8px 38px;
+  margin-bottom: 24px;
+  box-sizing: border-box;
+  line-height: 32px;
+  background-image: url("http://10.0.97.209/img/kengee/kengee4.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  color: #fff;
+  max-width: 400px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  position: relative;
+}
+
+.AppSubTitle span {
+  font-size: 12px;
+  color: #215A8E;
+}
+
+.AppSubTitle > .right {
+  position: absolute;
+  right: -30px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.AppSubTitle .el-select {
+  width: 120px;
+}

src/utils/inject.js

@@ -204,6 +204,40 @@ Vue.component("tableColumn", {
     return column
   },
 })
+Vue.component("AppSubTitle", {
+  props: {
+    text: {default: "副标题"}
+  },
+  data() {
+    return {
+      pinyinText: ""
+    }
+  },
+  methods: {
+    async getPinyin(text) {
+      const wait = (t = 500) => new Promise(resolve => setTimeout(resolve, t))
+      while (!window.pinyinPro) await wait()
+      const {pinyin} = window.pinyinPro
+      this.pinyinText = pinyin(text, {toneType: 'none'}).toUpperCase()
+
+    }
+  },
+  watch: {
+    text: {
+      immediate: true,
+      handler(v) {
+        v && this.getPinyin(v)
+      }
+    }
+  },
+  render(h) {
+    return h('div', {class: 'AppSubTitle'}, [
+      this.text,
+      h('span', this.pinyinText),
+      h('div', {class: 'right'}, this.$slots.right)
+    ])
+  }
+})
 
 
 export default Promise.all([

src/views/AppKeyGoods.vue

@@ -1,6 +1,9 @@
 <script>
+import AppSubTitle from "@/views/AppSubTitle.vue";
+
 export default {
   name: "AppKeyGoods",
+  components: {AppSubTitle},
   label: "市场看板-重点单品",
   data() {
     return {
@@ -11,11 +14,13 @@ export default {
         {label: "库存数量", prop: "stockNum", width: 70},
         {label: "销售目标", prop: "targetSaleNum", width: 70},
         {label: "销售达成", prop: "saleAchieveRate"},
-      ]
+      ],
+      goodsCategoryId: ""
     }
   },
   computed: {
     search: v => v.$marketBoard.search,
+    dicts: v => window.$dicts || {},
     tableConfig: v => {
       return {
         headerBGC: 'rgba(13, 48, 99, 0.6)',
@@ -31,8 +36,9 @@ export default {
   methods: {
     getTableData() {
       const {$http, $waitFor} = window
-      $waitFor($http).then(() => $http.post("/data-boot/la/screen/marketBoard/marketKeyGoods", {
-        ...this.search, limit: 999
+      const {goodsCategoryId} = this
+      $waitFor($http).then(() => $http.post("/data-boot/ca/screen/scStoreKeyGoods/list", {
+        ...this.search, limit: 999, goodsCategoryId
       })).then(res => {
         if (res?.data) {
           this.tableData = res.data?.records || []
@@ -52,6 +58,13 @@ export default {
 
 <template>
   <section class="AppKeyGoods">
+    <app-sub-title text="重点单品">
+      <template #right>
+        <el-select placeholder="全部" v-model="goodsCategoryId" size="small" clearable class="AppSelect" @change="getTableData">
+          <el-option v-for="(op,i) in dicts.品类" :key="i" v-bind="op"/>
+        </el-select>
+      </template>
+    </app-sub-title>
     <scroll-table :table-data="tableData" :columns="columns"/>
     <!--<dv-scroll-board :config="tableConfig"/>-->
   </section>

src/views/AppMarketBoard.vue

@@ -2,7 +2,6 @@
 import AppMarketBoardFilter from "@/views/AppMarketBoardFilter.vue";
 import AppNavbar from "@/views/AppNavbar.vue";
 import AppMap from "@/views/AppMap.vue";
-import AppSubTitle from "@/views/AppSubTitle.vue";
 import AppSalesPerformance from "@/views/AppSalesPerformance.vue";
 import AppKeyGoods from "@/views/AppKeyGoods.vue";
 import AppGroupMonitorTable from "@/views/AppGroupMonitorTable.vue";
@@ -13,13 +12,13 @@ import AppHourCount from "@/views/AppHourCount.vue";
 export default {
   name: "AppMarketBoard",
   label: "市场看板",
-  components: {AppHourCount, AppHourSale, AppStoreMonitor, AppGroupMonitorTable, AppKeyGoods, AppSalesPerformance, AppSubTitle, AppMap, AppNavbar, AppMarketBoardFilter}
+  components: { AppHourCount, AppHourSale, AppStoreMonitor, AppGroupMonitorTable, AppKeyGoods, AppSalesPerformance, AppMap, AppNavbar, AppMarketBoardFilter}
 }
 </script>
 
 <template>
   <section class="AppMarketBoard">
-    <app-navbar/>
+    <app-navbar class="mb-10"/>
     <app-market-board-filter/>
     <div class="flex" style="gap:20px">
       <div class="fill">
@@ -27,7 +26,6 @@ export default {
           <div style="width: 430px;">
             <app-sub-title/>
             <app-sales-performance style="margin-bottom: 20px"/>
-            <app-sub-title/>
             <app-key-goods/>
           </div>
           <app-map class="fill"/>

src/views/AppSubTitle.vue

@@ -2,9 +2,11 @@
 export default {
   name: "AppSubTitle",
   label: "副标题",
+  props: {
+    text: {default: "副标题"}
+  },
   data() {
     return {
-      text: "副标题",
       pinyinText: ""
     }
   },
@@ -32,28 +34,8 @@ export default {
   <section class="AppSubTitle">
     {{ text }}
     <span v-text="pinyinText"/>
+    <div class="right">
+      <slot name="right"/>
+    </div>
   </section>
 </template>
-
-<style scoped>
-.AppSubTitle {
-  height: 48px;
-  padding: 8px 0 8px 38px;
-  margin-bottom: 24px;
-  box-sizing: border-box;
-  line-height: 32px;
-  background-image: url("http://10.0.97.209/img/kengee/kengee4.png");
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  color: #fff;
-  max-width: 400px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.AppSubTitle span {
-  font-size: 12px;
-  color: #215A8E;
-}
-</style>