소스 검색

修改字典请求方式

Qukatie 1 년 전
부모
커밋
84c09cae2b
2개의 변경된 파일109개의 추가작업 그리고 204개의 파일을 삭제
  1. 63 111
      src/views/tirePartsMall/financialManagement/purchaseDetail/index.vue
  2. 46 93
      src/views/tirePartsMall/financialManagement/saleDetail/index.vue

+ 63 - 111
src/views/tirePartsMall/financialManagement/purchaseDetail/index.vue

@@ -1,58 +1,29 @@
 <template>
     <basic-container>
-        <avue-crud
-            :key="key"
-            ref="crud"
-            :option="option"
-            :data="data"
-            :search.sync="query"
-            @on-load="onLoad"
-            @search-reset="query={}"
-            :page.sync="page"
-            :cell-style="cellStyle"
-            @search-change="searchChange"
+        <avue-crud :key="key" ref="crud" :option="option" :data="data" :search.sync="query" @on-load="onLoad"
+            @search-reset="query = {}" :page.sync="page" :cell-style="cellStyle" @search-change="searchChange"
             @resetColumn="resetColumnTwo('crud', 'option', 'optionList', 337.2)"
             @saveColumn="saveColumnTwo('crud', 'option', 'optionList', 337.2)">
             <template slot="menuLeft">
                 <el-button type="warning" icon="el-icon-download" size="small" @click="outExport">导出</el-button>
             </template>
             <template slot="header">
-                <el-table
-                    :data="commodityData"
-                    border
-                    size="small"
-                    @header-click="cellClick"
-                    style="width: 100%">
-                    <el-table-column
-                        v-for="(item,index) in commodityLabel" :key="index"
-                        :prop="item.prop"
-                        show-overflow-tooltip
-                        :label="item.label"/>
+                <el-table :data="commodityData" border size="small" @header-click="cellClick" style="width: 100%">
+                    <el-table-column v-for="(item, index) in commodityLabel" :key="index" :prop="item.prop"
+                        show-overflow-tooltip :label="item.label" />
                 </el-table>
             </template>
             <template slot="customerNameSearch">
-                <search-query :datalist="customerData"
-                              :selectValue="query.customerName"
-                              :filterable="true"
-                              :clearable="true"
-                              :remote="true"
-                              :buttonIf="false"
-                              :forParameter="{key:'id',label:'cname',value:'cname'}"
-                              placeholder="请选择客户名称"
-                              @remoteMethod="KHgetListfun"
-                              @corpFocus="KHgetListfun"
-                              @corpChange="corpChange($event,'customerName')">
+                <search-query :datalist="customerData" :selectValue="query.customerName" :filterable="true"
+                    :clearable="true" :remote="true" :buttonIf="false"
+                    :forParameter="{ key: 'id', label: 'cname', value: 'cname' }" placeholder="请选择客户名称"
+                    @remoteMethod="KHgetListfun" @corpFocus="KHgetListfun" @corpChange="corpChange($event, 'customerName')">
                 </search-query>
             </template>
             <template slot="brandNameSearch">
-                <search-query :datalist="brandData"
-                              :selectValue="query.brandName"
-                              :clearable="true"
-                              :buttonIf="false"
-                              :forParameter="{key:'id',label:'cname',value:'cname'}"
-                              placeholder="请选择品牌"
-                              @corpFocus="listAllfun"
-                              @corpChange="corpChange($event,'brandName')">
+                <search-query :datalist="brandData" :selectValue="query.brandName" :clearable="true" :buttonIf="false"
+                    :forParameter="{ key: 'id', label: 'cname', value: 'cname' }" placeholder="请选择品牌" @corpFocus="listAllfun"
+                    @corpChange="corpChange($event, 'brandName')">
                 </search-query>
             </template>
             <!--<template slot="goodsNameSearch">-->
@@ -70,36 +41,21 @@
             <!--    </search-query>-->
             <!--</template>-->
             <template slot="salerNameSearch">
-                <search-query :datalist="salerData"
-                              :selectValue="query.salerName"
-                              :clearable="true"
-                              :buttonIf="false"
-                              :forParameter="{key:'id',label:'name',value:'name'}"
-                              placeholder="请选择业务员"
-                              @corpFocus="YWYgetListfun"
-                              @corpChange="corpChange($event,'salerName')">
+                <search-query :datalist="salerData" :selectValue="query.salerName" :clearable="true" :buttonIf="false"
+                    :forParameter="{ key: 'id', label: 'name', value: 'name' }" placeholder="请选择业务员" @corpFocus="YWYgetListfun"
+                    @corpChange="corpChange($event, 'salerName')">
                 </search-query>
             </template>
             <template slot="actualPaymentStatusSearch">
-                <search-query :datalist="actualPaymentStatusData"
-                              :selectValue="query.actualPaymentStatus"
-                              :clearable="true"
-                              :buttonIf="false"
-                              :forParameter="{key:'dictKey',label:'dictValue',value:'dictKey'}"
-                              placeholder="请选择结算方式"
-                              @corpFocus="actualPaymentWorkDictsfun"
-                              @corpChange="corpChange($event,'actualPaymentStatus')">
+                <search-query :datalist="actualPaymentStatusData" :selectValue="query.actualPaymentStatus" :clearable="true"
+                    :buttonIf="false" :forParameter="{ key: 'dictKey', label: 'dictValue', value: 'dictKey' }"
+                    placeholder="请选择结算方式" @corpFocus="actualPaymentWorkDictsfun"
+                    @corpChange="corpChange($event, 'actualPaymentStatus')">
                 </search-query>
             </template>
             <template slot="bsTypeSearch">
-                <search-query :datalist="bsTypeData"
-                              :selectValue="query.bsType"
-                              :clearable="true"
-                              :buttonIf="false"
-                              :forParameter="{key:'dictKey',label:'dictValue',value:'dictKey'}"
-                              placeholder="请选择单据状态"
-                              @corpFocus="getBsType"
-                              @corpChange="corpChange($event,'bsType')">
+                <search-query :datalist="bsTypeData" :selectValue="query.bsType" :clearable="true" :buttonIf="false"
+                    :forParameter="{ key: 'dictKey', label: 'dictValue', value: 'dictKey' }" placeholder="请选择单据状态"  @corpChange="corpChange($event, 'bsType')">
                 </search-query>
             </template>
             <template slot="isContainSearch">
@@ -114,18 +70,18 @@
 
 <script>
 
-import {statisticsSaleDetail, statisticsSaleDetailSum} from "@/api/saleDetail";
-import {defaultDate3} from "@/util/date";
-import {getList as KHgetList} from '@/api/tirePartsMall/basicData/customerInformation/index'
-import {getList as SPgetList} from '@/api/tirePartsMall/basicData/commodityInformation/index'
+import { statisticsSaleDetail, statisticsSaleDetailSum } from "@/api/saleDetail";
+import { defaultDate3 } from "@/util/date";
+import { getList as KHgetList } from '@/api/tirePartsMall/basicData/customerInformation/index'
+import { getList as SPgetList } from '@/api/tirePartsMall/basicData/commodityInformation/index'
 import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
-import {getWorkDicts} from "@/api/system/dictbiz";
-import {getToken} from "@/util/auth";
-import {getSalesman} from "@/api/landTransportation";
-import {listAll} from "@/api/tirePartsMall/basicData/listingManagement";
+import { getWorkDicts } from "@/api/system/dictbiz";
+import { getToken } from "@/util/auth";
+import { getSalesman } from "@/api/landTransportation";
+import { listAll } from "@/api/tirePartsMall/basicData/listingManagement";
 
 export default {
-    components: {SearchQuery},
+    components: { SearchQuery },
     data() {
         return {
             key: 0,
@@ -135,7 +91,7 @@ export default {
                 businesDateStart: defaultDate3()[0],
                 businesDateEnd: defaultDate3()[1],
                 isContain: 1,
-                bsType:'CG,TKCG',
+                bsType: 'CG,TKCG',
             },
             page: {
                 pageSize: 10,
@@ -188,7 +144,7 @@ export default {
                     search: true,
                     searchslot: true,
                     searchOrder: 3
-                }, 
+                },
                 // {
                 //     label: '业务员',
                 //     prop: 'salerName',
@@ -259,7 +215,7 @@ export default {
                     label: '金额',
                     prop: 'subTotalMoney',
                     overHidden: true,
-                },{
+                }, {
                     label: '余额',
                     prop: 'balanceAmount',
                     overHidden: true,
@@ -284,7 +240,7 @@ export default {
                     type: "date",
                     format: "yyyy-MM-dd",
                     valueFormat: "yyyy-MM-dd",
-                }, 
+                },
                 {
                     label: '业务结束',
                     prop: 'businesDateEnd',
@@ -303,7 +259,7 @@ export default {
                     // search: true,
                     // searchslot: true,
                     // searchOrder: 8
-                }, 
+                },
                 {
                     label: '业务类型',
                     prop: 'bsType',
@@ -311,7 +267,7 @@ export default {
                     search: true,
                     searchslot: true,
                     searchOrder: 8
-                }, 
+                },
                 {
                     label: '包含未收货',
                     prop: 'isContain',
@@ -322,7 +278,7 @@ export default {
                     searchOrder: 9
                 }]
             },
-            bsTypeData:[],
+            bsTypeData: [],
             customerData: [], // 客户数据
             brandData: [], // 品牌数据
             goodsData: [], // 商品名称
@@ -335,12 +291,12 @@ export default {
                 id: 1,
                 label: '采购数量',
                 prop: 'goodsSum'
-            }, 
+            },
             {
                 id: 2,
                 label: '采购金额',
                 prop: 'amount'
-            }, 
+            },
             // {
             //     id: 3,
             //     label: '采购成本',
@@ -355,30 +311,33 @@ export default {
                 id: 5,
                 label: '已取消数量',
                 prop: 'goodsSumCancellation'
-            }, 
+            },
             {
                 id: 6,
                 label: '已取消金额',
                 prop: 'amountCancellation'
-            }, 
-            // {
-            //     id: 7,
-            //     label: '已取消成本',
-            //     prop: 'costprieCancellation'
-            // }, 
-            // {
-            //     id: 8,
-            //     label: '已取消毛利',
-            //     prop: 'profitCancellation'
-            // }
-        ],
+            },
+                // {
+                //     id: 7,
+                //     label: '已取消成本',
+                //     prop: 'costprieCancellation'
+                // }, 
+                // {
+                //     id: 8,
+                //     label: '已取消毛利',
+                //     prop: 'profitCancellation'
+                // }
+            ],
         }
     },
     async created() {
         this.option = await this.getColumnData(this.getColumnName(337.2), this.optionList);
+        getWorkDicts('cg_business_Type').then(res => {
+            this.bsTypeData = res.data.data
+        })
     },
     methods: {
-        cellStyle({row, rowIndex}) {
+        cellStyle({ row, rowIndex }) {
             if (row.status == '已取消') {
                 return 'color: red';
             }
@@ -386,7 +345,7 @@ export default {
         },
         //导出
         outExport() {
-            let config = {params: {bsType:'CG,TKCG',...this.query}}
+            let config = { params: { bsType: 'CG,TKCG', ...this.query } }
             if (config.params) {
                 for (const propName of Object.keys(config.params)) {
                     const value = config.params[propName];
@@ -405,7 +364,7 @@ export default {
                 path: '/api/blade-sales-part/statistics/saleDetailExport',   //跳转目标窗口的地址
                 query: {
                     ...config.params,    //括号内是要传递给新窗口的参数
-                    bsType:'CG,TKCG',
+                    bsType: 'CG,TKCG',
                 }
             })
             window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
@@ -418,7 +377,7 @@ export default {
         },
         // 获取客户数据
         KHgetListfun(cname) {
-            KHgetList({current: 1, size: 20, corpType: 'KH', cname: cname ? cname : null}).then(res => {
+            KHgetList({ current: 1, size: 20, corpType: 'KH', cname: cname ? cname : null }).then(res => {
                 this.customerData = res.data.data.records
             })
         },
@@ -433,7 +392,7 @@ export default {
         },
         // 获取商品数据
         SPgetListfun(cname) {
-            SPgetList({current: 1, size: 20, cname: cname ? cname : null}).then(res => {
+            SPgetList({ current: 1, size: 20, cname: cname ? cname : null }).then(res => {
                 this.goodsData = res.data.data.records
             })
         },
@@ -449,11 +408,6 @@ export default {
                 this.statusData = res.data.data
             })
         },
-        getBsType(){
-            getWorkDicts('cg_business_Type').then(res => {
-                this.bsTypeData = res.data.data
-            })
-        },
         // 下拉回调
         corpChange(value, name) {
             this.$set(this.query, name, value)
@@ -469,7 +423,7 @@ export default {
             let queryParams = {
                 size: page.pageSize,
                 current: page.currentPage,
-                bsType:'CG,TKCG',
+                bsType: 'CG,TKCG',
                 ...Object.assign(params, this.query)
             }
             statisticsSaleDetail(queryParams).then(res => {
@@ -479,7 +433,7 @@ export default {
                 // generalLedgerTotal(queryParams).then(res=>{
                 //     this.total = res.data.data
                 // })
-                statisticsSaleDetailSum({...Object.assign(params, this.query)}).then(re => {
+                statisticsSaleDetailSum({ ...Object.assign(params, this.query) }).then(re => {
                     this.commodityData = [re.data.data]
 
                 })
@@ -513,6 +467,4 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

+ 46 - 93
src/views/tirePartsMall/financialManagement/saleDetail/index.vue

@@ -1,58 +1,29 @@
 <template>
     <basic-container>
-        <avue-crud
-            :key="key"
-            ref="crud"
-            :option="option"
-            :data="data"
-            :search.sync="query"
-            @on-load="onLoad"
-            @search-reset="query={}"
-            :page.sync="page"
-            :cell-style="cellStyle"
-            @search-change="searchChange"
+        <avue-crud :key="key" ref="crud" :option="option" :data="data" :search.sync="query" @on-load="onLoad"
+            @search-reset="query = {}" :page.sync="page" :cell-style="cellStyle" @search-change="searchChange"
             @resetColumn="resetColumnTwo('crud', 'option', 'optionList', 337)"
             @saveColumn="saveColumnTwo('crud', 'option', 'optionList', 337)">
             <template slot="menuLeft">
                 <el-button type="warning" icon="el-icon-download" size="small" @click="outExport">导出</el-button>
             </template>
             <template slot="header">
-                <el-table
-                    :data="commodityData"
-                    border
-                    size="small"
-                    @header-click="cellClick"
-                    style="width: 100%">
-                    <el-table-column
-                        v-for="(item,index) in commodityLabel" :key="index"
-                        :prop="item.prop"
-                        show-overflow-tooltip
-                        :label="item.label"/>
+                <el-table :data="commodityData" border size="small" @header-click="cellClick" style="width: 100%">
+                    <el-table-column v-for="(item, index) in commodityLabel" :key="index" :prop="item.prop"
+                        show-overflow-tooltip :label="item.label" />
                 </el-table>
             </template>
             <template slot="customerNameSearch">
-                <search-query :datalist="customerData"
-                              :selectValue="query.customerName"
-                              :filterable="true"
-                              :clearable="true"
-                              :remote="true"
-                              :buttonIf="false"
-                              :forParameter="{key:'id',label:'cname',value:'cname'}"
-                              placeholder="请选择客户名称"
-                              @remoteMethod="KHgetListfun"
-                              @corpFocus="KHgetListfun"
-                              @corpChange="corpChange($event,'customerName')">
+                <search-query :datalist="customerData" :selectValue="query.customerName" :filterable="true"
+                    :clearable="true" :remote="true" :buttonIf="false"
+                    :forParameter="{ key: 'id', label: 'cname', value: 'cname' }" placeholder="请选择客户名称"
+                    @remoteMethod="KHgetListfun" @corpFocus="KHgetListfun" @corpChange="corpChange($event, 'customerName')">
                 </search-query>
             </template>
             <template slot="brandNameSearch">
-                <search-query :datalist="brandData"
-                              :selectValue="query.brandName"
-                              :clearable="true"
-                              :buttonIf="false"
-                              :forParameter="{key:'id',label:'cname',value:'cname'}"
-                              placeholder="请选择品牌"
-                              @corpFocus="listAllfun"
-                              @corpChange="corpChange($event,'brandName')">
+                <search-query :datalist="brandData" :selectValue="query.brandName" :clearable="true" :buttonIf="false"
+                    :forParameter="{ key: 'id', label: 'cname', value: 'cname' }" placeholder="请选择品牌" @corpFocus="listAllfun"
+                    @corpChange="corpChange($event, 'brandName')">
                 </search-query>
             </template>
             <!--<template slot="goodsNameSearch">-->
@@ -70,36 +41,22 @@
             <!--    </search-query>-->
             <!--</template>-->
             <template slot="salerNameSearch">
-                <search-query :datalist="salerData"
-                              :selectValue="query.salerName"
-                              :clearable="true"
-                              :buttonIf="false"
-                              :forParameter="{key:'id',label:'name',value:'name'}"
-                              placeholder="请选择业务员"
-                              @corpFocus="YWYgetListfun"
-                              @corpChange="corpChange($event,'salerName')">
+                <search-query :datalist="salerData" :selectValue="query.salerName" :clearable="true" :buttonIf="false"
+                    :forParameter="{ key: 'id', label: 'name', value: 'name' }" placeholder="请选择业务员" @corpFocus="YWYgetListfun"
+                    @corpChange="corpChange($event, 'salerName')">
                 </search-query>
             </template>
             <template slot="actualPaymentStatusSearch">
-                <search-query :datalist="actualPaymentStatusData"
-                              :selectValue="query.actualPaymentStatus"
-                              :clearable="true"
-                              :buttonIf="false"
-                              :forParameter="{key:'dictKey',label:'dictValue',value:'dictKey'}"
-                              placeholder="请选择结算方式"
-                              @corpFocus="actualPaymentWorkDictsfun"
-                              @corpChange="corpChange($event,'actualPaymentStatus')">
+                <search-query :datalist="actualPaymentStatusData" :selectValue="query.actualPaymentStatus" :clearable="true"
+                    :buttonIf="false" :forParameter="{ key: 'dictKey', label: 'dictValue', value: 'dictKey' }"
+                    placeholder="请选择结算方式" @corpFocus="actualPaymentWorkDictsfun"
+                    @corpChange="corpChange($event, 'actualPaymentStatus')">
                 </search-query>
             </template>
             <template slot="bsTypeSearch">
-                <search-query :datalist="bsTypeData"
-                              :selectValue="query.bsType"
-                              :clearable="true"
-                              :buttonIf="false"
-                              :forParameter="{key:'dictKey',label:'dictValue',value:'dictKey'}"
-                              placeholder="请选择单据状态"
-                              @corpFocus="getBsType"
-                              @corpChange="corpChange($event,'bsType')">
+                <search-query :datalist="bsTypeData" :selectValue="query.bsType" :clearable="true" :buttonIf="false"
+                    :forParameter="{ key: 'dictKey', label: 'dictValue', value: 'dictKey' }" placeholder="请选择单据状态"
+                    @corpChange="corpChange($event, 'bsType')">
                 </search-query>
             </template>
             <template slot="isContainSearch">
@@ -114,18 +71,18 @@
 
 <script>
 
-import {statisticsSaleDetail, statisticsSaleDetailSum} from "@/api/saleDetail";
-import {defaultDate3} from "@/util/date";
-import {getList as KHgetList} from '@/api/tirePartsMall/basicData/customerInformation/index'
-import {getList as SPgetList} from '@/api/tirePartsMall/basicData/commodityInformation/index'
+import { statisticsSaleDetail, statisticsSaleDetailSum } from "@/api/saleDetail";
+import { defaultDate3 } from "@/util/date";
+import { getList as KHgetList } from '@/api/tirePartsMall/basicData/customerInformation/index'
+import { getList as SPgetList } from '@/api/tirePartsMall/basicData/commodityInformation/index'
 import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
-import {getWorkDicts} from "@/api/system/dictbiz";
-import {getToken} from "@/util/auth";
-import {getSalesman} from "@/api/landTransportation";
-import {listAll} from "@/api/tirePartsMall/basicData/listingManagement";
+import { getWorkDicts } from "@/api/system/dictbiz";
+import { getToken } from "@/util/auth";
+import { getSalesman } from "@/api/landTransportation";
+import { listAll } from "@/api/tirePartsMall/basicData/listingManagement";
 
 export default {
-    components: {SearchQuery},
+    components: { SearchQuery },
     data() {
         return {
             key: 0,
@@ -134,7 +91,7 @@ export default {
             query: {
                 businesDateStart: defaultDate3()[0],
                 businesDateEnd: defaultDate3()[1],
-                bsType: 'XS,TKXS',
+                bsType: "XS,TKXS",
                 isContain: 1,
             },
             page: {
@@ -261,7 +218,7 @@ export default {
                     label: '金额',
                     prop: 'subTotalMoney',
                     overHidden: true,
-                },{
+                }, {
                     label: '余额',
                     prop: 'balanceAmount',
                     overHidden: true,
@@ -300,7 +257,7 @@ export default {
                     // search: true,
                     // searchslot: true,
                     // searchOrder: 8
-                }, 
+                },
                 {
                     label: '业务类型',
                     prop: 'bsType',
@@ -318,7 +275,7 @@ export default {
                     searchOrder: 9
                 }]
             },
-            bsTypeData:[],
+            bsTypeData: [],
             customerData: [], // 客户数据
             brandData: [], // 品牌数据
             goodsData: [], // 商品名称
@@ -364,9 +321,12 @@ export default {
     },
     async created() {
         this.option = await this.getColumnData(this.getColumnName(337), this.optionList);
+        getWorkDicts('xs_business_Type').then(res => {
+            this.bsTypeData = res.data.data
+        })
     },
     methods: {
-        cellStyle({row, rowIndex}) {
+        cellStyle({ row, rowIndex }) {
             if (row.status == '已取消') {
                 return 'color: red';
             }
@@ -374,7 +334,7 @@ export default {
         },
         //导出
         outExport() {
-            let config = {params: {bsType:'XS,TKXS',...this.query}}
+            let config = { params: { bsType: 'XS,TKXS', ...this.query } }
             if (config.params) {
                 for (const propName of Object.keys(config.params)) {
                     const value = config.params[propName];
@@ -393,7 +353,7 @@ export default {
                 path: '/api/blade-sales-part/statistics/saleDetailExport',   //跳转目标窗口的地址
                 query: {
                     ...config.params,    //括号内是要传递给新窗口的参数
-                    bsType:'XS,TKXS',
+                    bsType: 'XS,TKXS',
                 }
             })
             window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
@@ -406,7 +366,7 @@ export default {
         },
         // 获取客户数据
         KHgetListfun(cname) {
-            KHgetList({current: 1, size: 20, corpType: 'KH', cname: cname ? cname : null}).then(res => {
+            KHgetList({ current: 1, size: 20, corpType: 'KH', cname: cname ? cname : null }).then(res => {
                 this.customerData = res.data.data.records
             })
         },
@@ -421,7 +381,7 @@ export default {
         },
         // 获取商品数据
         SPgetListfun(cname) {
-            SPgetList({current: 1, size: 20, cname: cname ? cname : null}).then(res => {
+            SPgetList({ current: 1, size: 20, cname: cname ? cname : null }).then(res => {
                 this.goodsData = res.data.data.records
             })
         },
@@ -431,11 +391,6 @@ export default {
                 this.actualPaymentStatusData = res.data.data
             })
         },
-        getBsType(){
-            getWorkDicts('xs_business_Type').then(res => {
-                this.bsTypeData = res.data.data
-            })
-        },
         // 单据状态
         statusWorkDictsfun() {
             getWorkDicts('sales_Status').then(res => {
@@ -457,7 +412,7 @@ export default {
             let queryParams = {
                 size: page.pageSize,
                 current: page.currentPage,
-                bsType:'XS,TKXS',
+                bsType: 'XS,TKXS',
                 ...Object.assign(params, this.query)
             }
             console.log(queryParams)
@@ -468,7 +423,7 @@ export default {
                 // generalLedgerTotal(queryParams).then(res=>{
                 //     this.total = res.data.data
                 // })
-                statisticsSaleDetailSum({...Object.assign(params, this.query)}).then(re => {
+                statisticsSaleDetailSum({ ...Object.assign(params, this.query) }).then(re => {
                     this.commodityData = [re.data.data]
 
                 })
@@ -502,6 +457,4 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>