企业查

src/api/basicdata/checkCompany.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 查询库区列表
+export function advSearch(query) {
+  return request({
+    url: '/warehouse/information/advSearch',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询库区详细
+export function getBasicInfo(query) {
+  return request({
+    url: '/warehouse/information/getBasicInfo',
+    method: 'get',
+    params: query
+  })
+}

src/views/basicdata/checkCompany/AddOrUpdate.vue

@@ -10,9 +10,25 @@
         </el-button>
       </div>
       <div style="display: flex;">
-        <el-autocomplete size="small" v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入企业名称"
+        <!-- <el-autocomplete size="small" v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入企业名称"
           @select="handleSelect">
-          <el-button slot="append" icon="el-icon-search">检索</el-button>
+          <el-button slot="append" icon="el-icon-search" type="primary">检索</el-button>
+        </el-autocomplete> -->
+        <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" @select="handleSelect"
+          :trigger-on-focus="false" placeholder="请输入搜索内容">
+          <!-- 2.x版本自定义模板 -->
+          <template slot-scope="{ item }">
+            <div v-if="item.isLoading" class="loading-tip">
+              <i class="el-icon-loading"></i> 搜索中...
+            </div>
+            <div v-else-if="item.isEmpty" class="empty-tip">
+              <i class="el-icon-warning"></i> 无匹配结果
+            </div>
+            <div v-else class="result-item">
+              {{ item.value }}
+            </div>
+          </template>
+          <el-button slot="append" icon="el-icon-search" type="primary" @click="search">检索</el-button>
         </el-autocomplete>
       </div>
       <div style="width: 254px;">
@@ -249,8 +265,8 @@
 </template>
 
 <script>
-import { listWarehousesss } from '@/api/basicdata/warehouse'
-
+import { advSearch, getBasicInfo } from '@/api/basicdata/checkCompany'
+import { debounce } from 'lodash';
 export default {
   name: 'inStock',
   props: {
@@ -270,14 +286,20 @@ export default {
       ],
       src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
       restaurants: [],
+      //检索名称
       state: '',
+      loading: false,
       timeout: null,
       tableData: [{
         name1: '名字'
       }]
     }
   },
-  async created() { },
+  async created() {
+    this.querySearchAsync = debounce((queryString, cb) => {
+      this.handleSearch(queryString).then(data => cb(data));
+    }, 500);
+  },
   mounted() {
   },
 
@@ -285,22 +307,98 @@ export default {
     goBack() {
       this.$emit('changeShow', 'true')
     },
-    querySearchAsync(queryString, cb) {
-      if (queryString) {
-        cb([])
+    search(){
+      console.log(this.state)
+    },
+    // async querySearchAsync(queryString, cb) {
+    //   console.log(queryString, cb, 'querySearchAsync')
+    //   _.debounce(batchLog, 250, { 'maxWait': 1000 });
+    //   if (queryString) {
+    //     var results = await this.loadAll()
+    //     cb(results)
+    //   } else {
+    //     cb([])
+    //   }
+    // },
+    async handleSearch(query) {
+      if (query) {
+        this.loading = true;
+        const res = await this.loadAll()
+        this.loading = false;
+        return res.length > 0
+          ? res.map(d => ({ value: d.name, ...d }))
+          : [{ isEmpty: true }];
       } else {
-        cb([])
+        return [{ isEmpty: true }];
       }
 
     },
+    loadAll() {
+      return [
+        { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
+        { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
+        { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
+        { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
+        { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
+        { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
+        { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
+        { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
+        { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
+        { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
+        { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
+        { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
+        { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
+        { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
+        { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
+        { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
+        { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
+        { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
+        { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
+        { "value": "枪会山", "address": "上海市普陀区棕榈路" },
+        { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
+        { "value": "钱记", "address": "上海市长宁区天山西路" },
+        { "value": "壹杯加", "address": "上海市长宁区通协路" },
+        { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
+        { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
+        { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
+        { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
+        { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
+        { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
+        { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
+        { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
+        { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
+        { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
+        { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
+        { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
+        { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
+        { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
+        { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
+        { "value": "浏阳蒸菜", "address": "天山西路430号" },
+        { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
+        { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
+        { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
+        { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
+        { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
+        { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
+        { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
+        { "value": "阳阳麻辣烫", "address": "天山西路389号" },
+        { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
+      ];
+    },
     handleSelect(item) {
-      console.log(item);
+      item.value
+      console.log(item, 'handleSelect');
     }
 
-  },
+  }
 }
 </script>
 <style lang="scss" scoped>
+.el-autocomplete ::v-deep .el-input-group__append {
+  background-color: #409EFF;
+  color: #fff
+}
+
 .el-tag {
   margin: 6px 6px 0 0;
 }

src/views/reportManagement/singleTicket/index.vue

@@ -1,80 +1,37 @@
 <template>
   <div class="app-container">
-    <el-form
-      :model="query"
-      ref="queryForm"
-      v-show="showSearch"
-      :inline="true"
-    >
+    <el-form :model="query" ref="queryForm" v-show="showSearch" :inline="true">
       <el-row>
         <el-form-item label="提单号" prop="fMblno">
-          <el-input
-            v-model="query.fMblno"
-            placeholder="请输入提单号"
-            clearable
-            size="small"
-            @change="fMblnoChange"
-          />
+          <el-input v-model="query.fMblno" placeholder="请输入提单号" clearable size="small" @change="fMblnoChange" />
         </el-form-item>
         <el-form-item label="货主" prop="fCorpid">
-          <el-select
-            v-model="query.fCorpid"
-            filterable
-            clearable
-            remote
-            style="width: 80%"
-            :remote-method="corpsRemoteMethod"
-            placeholder="请输入模糊查找"
-          >
-            <el-option
-              v-for="(dict, index) in fMblnoOptions"
-              :key="index.fId"
-              :label="dict.fName"
-              :value="dict.fId"
-            ></el-option>
+          <el-select v-model="query.fCorpid" filterable clearable remote style="width: 80%"
+            :remote-method="corpsRemoteMethod" placeholder="请输入模糊查找">
+            <el-option v-for="(dict, index) in fMblnoOptions" :key="index.fId" :label="dict.fName"
+              :value="dict.fId"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="日期" prop="bsdateList">
-          <el-date-picker
-            v-model="query.bsdateList"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            :default-time="['00:00:00', '23:59:59']"
-            end-placeholder="结束日期"
-            :picker-options="pickerOptions"
-            unlink-panels>
+          <el-date-picker v-model="query.bsdateList" type="daterange" range-separator="至" start-placeholder="开始日期"
+            value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" end-placeholder="结束日期"
+            :picker-options="pickerOptions" unlink-panels>
           </el-date-picker>
         </el-form-item>
         <el-form-item label="出口单号" prop="fEmblno">
-          <el-input
-            v-model="query.fEmblno"
-            placeholder="请输入出口单号"
-            clearable
-            size="small"
-          />
+          <el-input v-model="query.fEmblno" placeholder="请输入出口单号" clearable size="small" />
         </el-form-item>
       </el-row>
     </el-form>
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          icon="el-icon-plus"
-          size="mini"
-          @click="getList"
-          v-hasPermi="['warehouseBusiness:containerPort:add']"
-        >查询
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="getList"
+          v-hasPermi="['warehouseBusiness:containerPort:add']">查询
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          icon="el-icon-download"
-          size="mini"
-          @click="exportOne"
-        >导出
+        <el-button type="warning" icon="el-icon-download" size="mini" @click="exportOne"
+          v-hasPermi="['warehouseBusiness:singleTicket:export']">导出
         </el-button>
       </el-col>
       <!--      <el-col :span="1.5">-->
@@ -99,105 +56,77 @@
       <!--      >复制新增-->
       <!--      </el-button>-->
       <!--    </el-col>-->
-      <right-toolbar
-        :showSearch.sync="showSearch"
-        @queryTable="getList"
-      ></right-toolbar>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
     <el-form :inline="true" :model="formInline" class="demo-form-inline">
       <el-form-item label="提单号">
         <el-input v-model="query.fMblno" placeholder="提单号" disabled></el-input>
       </el-form-item>
       <el-form-item label="货主">
-        <el-select
-          v-model="query.fCorpid"
-          filterable
-          remote
-          style="width: 80%"
-          :remote-method="corpsRemoteMethod"
-          placeholder="请输入模糊查找"
-          disabled
-        >
-          <el-option
-            v-for="(dict, index) in fMblnoOptions"
-            :key="index.fId"
-            :label="dict.fName"
-            :value="dict.fId"
-          ></el-option>
+        <el-select v-model="query.fCorpid" filterable remote style="width: 80%" :remote-method="corpsRemoteMethod"
+          placeholder="请输入模糊查找" disabled>
+          <el-option v-for="(dict, index) in fMblnoOptions" :key="index.fId" :label="dict.fName"
+            :value="dict.fId"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="品名">
         <el-input v-model="formInline.goodsName" placeholder="请输入品名" disabled></el-input>
       </el-form-item>
     </el-form>
-    <el-table
-      :data="tableData"
-      style="width: 100%"
-      ref="table1"
-      :height="tableHeight1"
-    >
+    <el-table :data="tableData" style="width: 100%" ref="table1" :height="tableHeight1">
       <el-table-column type="selection" width="60" align="center" />
-      <el-table-column type="index" label="行号" align="center"/>
-      <el-table-column prop="goodsName" label="品名" width="180" align="center"/>
-      <el-table-column prop="fBusinessTypes" label="货物属性" width="180" align="center"/>
-      <el-table-column prop="fMarks" label="属性详情" width="180" align="center"/>
-      <el-table-column prop="fWName" label="库区" width="180" align="center"/>
-      <el-table-column prop="fBusinessType" label="作业类型" width="180" align="center"/>
-      <el-table-column prop="fCntval" label="箱型箱量" width="180" align="center"/>
-      <el-table-column prop="inBsdate" label="入库日期" width="180" align="center"/>
-      <el-table-column prop="inQty" label="入库件数" width="180" align="center"/>
-      <el-table-column prop="inGrossweight" label="入库毛重" width="180" align="center"/>
-      <el-table-column prop="outBsdate" label="出库日期" width="180" align="center"/>
-      <el-table-column prop="outQty" label="出库件数" width="180" align="center"/>
-      <el-table-column prop="outGrossweight" label="出库毛重" width="180" align="center"/>
-      <el-table-column prop="fEmblno" label="出口单号" width="180" align="center"/>
-      <el-table-column prop="fQtyblc" label="结余件数" width="180" align="center"/>
-      <el-table-column prop="fGrossweightblc" label="结余毛重" width="180" align="center"/>
-      <el-table-column prop="fBilltype" label="业务类型" width="180" align="center"/>
-      <el-table-column prop="fTruckno" label="车号" width="180" align="center"/>
-      <el-table-column prop="fBillingDays" label="堆存天数" width="180" align="center"/>
-      <el-table-column prop="fAmt" label="出库堆存费" width="180" align="center"/>
-      <el-table-column prop="remark" label="备注" width="180" align="center"/>
+      <el-table-column type="index" label="行号" align="center" />
+      <el-table-column prop="goodsName" label="品名" width="180" align="center" />
+      <el-table-column prop="fBusinessTypes" label="货物属性" width="180" align="center" />
+      <el-table-column prop="fMarks" label="属性详情" width="180" align="center" />
+      <el-table-column prop="fWName" label="库区" width="180" align="center" />
+      <el-table-column prop="fBusinessType" label="作业类型" width="180" align="center" />
+      <el-table-column prop="fCntval" label="箱型箱量" width="180" align="center" />
+      <el-table-column prop="inBsdate" label="入库日期" width="180" align="center" />
+      <el-table-column prop="inQty" label="入库件数" width="180" align="center" />
+      <el-table-column prop="inGrossweight" label="入库毛重" width="180" align="center" />
+      <el-table-column prop="outBsdate" label="出库日期" width="180" align="center" />
+      <el-table-column prop="outQty" label="出库件数" width="180" align="center" />
+      <el-table-column prop="outGrossweight" label="出库毛重" width="180" align="center" />
+      <el-table-column prop="fEmblno" label="出口单号" width="180" align="center" />
+      <el-table-column prop="fQtyblc" label="结余件数" width="180" align="center" />
+      <el-table-column prop="fGrossweightblc" label="结余毛重" width="180" align="center" />
+      <el-table-column prop="fBilltype" label="业务类型" width="180" align="center" />
+      <el-table-column prop="fTruckno" label="车号" width="180" align="center" />
+      <el-table-column prop="fBillingDays" label="堆存天数" width="180" align="center" />
+      <el-table-column prop="fAmt" label="出库堆存费" width="180" align="center" />
+      <el-table-column prop="remark" label="备注" width="180" align="center" />
     </el-table>
     <h3>
       <i class="el-icon-coin"></i>费用明细
-      <el-button
-        type="warning"
-        icon="el-icon-download"
-        size="mini"
-        @click="exportTwo"
-      >导出
+      <el-button type="warning" icon="el-icon-download" size="mini" @click="exportTwo"
+        v-hasPermi="['warehouseBusiness:singleTicket:export']">导出
       </el-button>
     </h3>
-    <el-table
-      :data="costData"
-      style="width: 100%"
-      ref="table2"
-      :height="tableHeight2"
-    >
+    <el-table :data="costData" style="width: 100%" ref="table2" :height="tableHeight2">
       <el-table-column type="selection" width="60" align="center" />
-      <el-table-column type="index" label="行号" align="center"/>
-      <el-table-column prop="createTime" label="日期" width="180" align="center"/>
-      <el-table-column prop="fBusinessType" label="作业类型" width="180" align="center"/>
-      <el-table-column prop="fFeeid" label="费用" width="180" align="center"/>
-      <el-table-column prop="fDc" label="收/付" width="180" align="center"/>
-      <el-table-column prop="fCName" label="结算单位" width="200" align="center"/>
-      <el-table-column prop="fQty" label="数量" align="center"/>
-      <el-table-column prop="fUnitprice" label="单价" align="center"/>
-      <el-table-column prop="fAmount" label="金额" align="center"/>
-      <el-table-column prop="remark" label="备注" align="center"/>
+      <el-table-column type="index" label="行号" align="center" />
+      <el-table-column prop="createTime" label="日期" width="180" align="center" />
+      <el-table-column prop="fBusinessType" label="作业类型" width="180" align="center" />
+      <el-table-column prop="fFeeid" label="费用" width="180" align="center" />
+      <el-table-column prop="fDc" label="收/付" width="180" align="center" />
+      <el-table-column prop="fCName" label="结算单位" width="200" align="center" />
+      <el-table-column prop="fQty" label="数量" align="center" />
+      <el-table-column prop="fUnitprice" label="单价" align="center" />
+      <el-table-column prop="fAmount" label="金额" align="center" />
+      <el-table-column prop="remark" label="备注" align="center" />
     </el-table>
   </div>
 </template>
 
 <script>
-import { listpayable , exportOne , exportTwo, getCorps} from '@/api/singleTicket'
-import {listCorps} from "@/api/basicdata/corps";
+import { listpayable, exportOne, exportTwo, getCorps } from '@/api/singleTicket'
+import { listCorps } from "@/api/basicdata/corps";
 
 export default {
   name: "index",
-  data(){
-    return{
+  data() {
+    return {
       pickerOptions: {
         shortcuts: [{
           text: '最近一周',
@@ -227,12 +156,12 @@ export default {
       },
       tableHeight1: '0',
       tableHeight2: '0',
-      query:{},
-      costData:[],
-      formInline:{},
-      tableData:[],
+      query: {},
+      costData: [],
+      formInline: {},
+      tableData: [],
       showSearch: true,
-      fMblnoOptions:[]
+      fMblnoOptions: []
     }
   },
   created() {
@@ -257,7 +186,7 @@ export default {
       this.tableHeight1 = (window.innerHeight - this.$refs.table1.$el.offsetTop - 160) / 2
       // 监听浏览器高度变化，改变表格高度
       window.onresize = () => {
-        this.tableHeight1 = (window.innerHeight - this.$refs.table1.$el.offsetTop - 70) /2
+        this.tableHeight1 = (window.innerHeight - this.$refs.table1.$el.offsetTop - 70) / 2
       }
     });
     this.$nextTick(() => {
@@ -265,51 +194,51 @@ export default {
       this.tableHeight2 = (window.innerHeight - this.$refs.table1.$el.offsetTop - 160) / 2
       // 监听浏览器高度变化，改变表格高度
       window.onresize = () => {
-        this.tableHeight2 = (window.innerHeight - this.$refs.table1.$el.offsetTop - 70) /2
+        this.tableHeight2 = (window.innerHeight - this.$refs.table1.$el.offsetTop - 70) / 2
       }
     })
   },
-  methods:{
-    getList(){
-      listpayable(this.query).then(res=>{
+  methods: {
+    getList() {
+      listpayable(this.query).then(res => {
         this.costData = res.data.feeList
         this.tableData = res.data.singleAnalysis
-        for (let item in this.tableData){
-          if (this.tableData[item].inQty == 0){
+        for (let item in this.tableData) {
+          if (this.tableData[item].inQty == 0) {
             this.tableData[item].inQty = ''
           }
-          if (this.tableData[item].inGrossweight == 0){
+          if (this.tableData[item].inGrossweight == 0) {
             this.tableData[item].inGrossweight = ''
           }
-          if (this.tableData[item].outGrossweight == 0){
+          if (this.tableData[item].outGrossweight == 0) {
             this.tableData[item].outGrossweight = ''
           }
-          if (this.tableData[item].fQtyblc == 0){
+          if (this.tableData[item].fQtyblc == 0) {
             this.tableData[item].fQtyblc = ''
           }
-          if (this.tableData[item].fGrossweightblc == 0){
+          if (this.tableData[item].fGrossweightblc == 0) {
             this.tableData[item].fGrossweightblc = ''
           }
-          if (this.tableData[item].outQty == 0){
+          if (this.tableData[item].outQty == 0) {
             this.tableData[item].outQty = ''
           }
         }
         this.formInline.goodsName = res.data.goodsName
       })
     },
-    exportOne(){
+    exportOne() {
       let query = this.query
       this.$confirm("是否确认导出", "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       }).then(function () {
-          return exportOne(query);
-        }).then((response) => {
-          this.download(response.msg);
-        });
+        return exportOne(query);
+      }).then((response) => {
+        this.download(response.msg);
+      });
     },
-    exportTwo(){
+    exportTwo() {
       let query = this.query
       this.$confirm("是否确认导出", "警告", {
         confirmButtonText: "确定",
@@ -331,17 +260,17 @@ export default {
         this.fMblnoOptions = response.rows;
       });
     },
-    resetQuery(){},
+    resetQuery() { },
     // 提单号变化触发
     fMblnoChange() {
       this.$set(this.query, 'fCorpid', '')
       if (this.query.fMblno) {
-        getCorps({fMblno: this.query.fMblno}).then(res => {
+        getCorps({ fMblno: this.query.fMblno }).then(res => {
           this.fMblnoOptions = res.data;
           if (this.fMblnoOptions.length > 0) this.query.fCorpid = this.fMblnoOptions[0].fId
         })
       } else {
-        listCorps({type: 1}).then((response) => {
+        listCorps({ type: 1 }).then((response) => {
           this.fMblnoOptions = response.rows;
         });
       }
@@ -350,6 +279,4 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>