Ver código fonte

Finish Hotfix-zh-352

zh 2 anos atrás
pai
commit
22a5704777
1 arquivos alterados com 231 adições e 141 exclusões
  1. 231 141
      src/views/supply/pickup/components/pickup_form.vue

+ 231 - 141
src/views/supply/pickup/components/pickup_form.vue

@@ -4,14 +4,24 @@
     <el-divider></el-divider>
 
     <div>
-      <el-form ref="mainForm" :model="mainForm" :rules="mainFormRules" label-width="80px" size="small"
-        label-position="left">
+      <el-form
+        ref="mainForm"
+        :model="mainForm"
+        :rules="mainFormRules"
+        label-width="80px"
+        size="small"
+        label-position="left"
+      >
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12" :lg="8">
             <el-form-item label="选择仓库" prop="warehouse">
               <el-select v-model="mainForm.warehouse" placeholder="请选择仓库" style="width: 100%" :disabled="listItem">
-                <el-option :label="item.name" :value="item.id" v-for="(item, index) in warehouseList"
-                  :key="index"></el-option>
+                <el-option
+                  :label="item.name"
+                  :value="item.id"
+                  v-for="(item, index) in warehouseList"
+                  :key="index"
+                ></el-option>
               </el-select>
             </el-form-item>
           </el-col>
@@ -22,8 +32,15 @@
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12" :lg="8" style="height: 51px">
             <el-form-item label="预约日期" prop="date">
-              <el-date-picker :disabled="flag" v-model="mainForm.date" type="date" value-format="yyyy-MM-dd"
-                style="width: 100%" placeholder="选择日期">
+              <el-date-picker
+                :disabled="flag"
+                v-model="mainForm.date"
+                type="date"
+                value-format="yyyy-MM-dd"
+                style="width: 100%"
+                :picker-options="setDisabled"
+                placeholder="选择日期"
+              >
               </el-date-picker>
             </el-form-item>
           </el-col>
@@ -41,10 +58,12 @@
             <el-form-item label="提货方式" prop="pickupWay">
               <el-radio-group v-model="mainForm.pickupWay" :disabled="flag">
                 <!-- ||(isFront===false && item.dictCode=='2' )  -->
-                <el-radio :label="item.dictCode" :disabled="(isFront === true && item.dictCode == '1')"
-                  v-for="(item, index) in pickupWayList" :key="index">{{
-                      item.dictValue
-                  }}
+                <el-radio
+                  :label="item.dictCode"
+                  :disabled="isFront === true && item.dictCode == '1'"
+                  v-for="(item, index) in pickupWayList"
+                  :key="index"
+                  >{{ item.dictValue }}
                 </el-radio>
               </el-radio-group>
             </el-form-item>
@@ -52,25 +71,43 @@
           <el-col :xs="24" :sm="12" :lg="8">
             <el-form-item label="提货人" prop="pickupMan" v-if="mainForm.pickupWay == '1'">
               <el-select v-model="mainForm.pickupMan" placeholder="全部" :disabled="flag" style="width: 100%">
-                <el-option :label="item.takerName" :value="item.id" v-for="(item, index) in pickupManList"
-                  :key="index"></el-option>
+                <el-option
+                  :label="item.takerName"
+                  :value="item.id"
+                  v-for="(item, index) in pickupManList"
+                  :key="index"
+                ></el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :lg="8" v-if="mainForm.pickupWay == '1'">
             <el-form-item label="提货车辆" prop="pickupCar">
               <el-select v-model="mainForm.pickupCar" placeholder="全部" style="width: 100%" :disabled="flag">
-                <el-option :label="item.carBrand" :value="item.id" v-for="(item, index) in pickupCarList"
-                  :key="index"></el-option>
+                <el-option
+                  :label="item.carBrand"
+                  :value="item.id"
+                  v-for="(item, index) in pickupCarList"
+                  :key="index"
+                ></el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :lg="8" v-if="mainForm.pickupWay == '2'">
             <el-form-item label="物流公司" prop="company">
-              <el-select v-model="mainForm.logisticsId" @change="getLogisticsId" placeholder="全部" style="width: 100%"
-                :disabled="flag">
-                <el-option :label="item.logisticsCompany" :value="item.id" :disabled="comDisabled(item.id)"
-                  v-for="(item, index) in companyList" :key="index"></el-option>
+              <el-select
+                v-model="mainForm.logisticsId"
+                @change="getLogisticsId"
+                placeholder="全部"
+                style="width: 100%"
+                :disabled="flag"
+              >
+                <el-option
+                  :label="item.logisticsCompany"
+                  :value="item.id"
+                  :disabled="comDisabled(item.id)"
+                  v-for="(item, index) in companyList"
+                  :key="index"
+                ></el-option>
               </el-select>
             </el-form-item>
           </el-col>
@@ -104,15 +141,32 @@
 
     <div class="mymain-container">
       <div class="table">
-        <el-table ref="table" v-loading="listLoading" :data="deliverList" element-loading-text="Loading" border fit
-          highlight-current-row stripe @select="handleSelect" @select-all="handleSelectAll">
+        <el-table
+          ref="table"
+          v-loading="listLoading"
+          :data="deliverList"
+          element-loading-text="Loading"
+          border
+          fit
+          highlight-current-row
+          stripe
+          @select="handleSelect"
+          @select-all="handleSelectAll"
+        >
           <el-table-column align="center" type="selection" width="55"></el-table-column>
 
           <template v-if="logisticsNumber === '001' && mainForm.pickupWay == 2">
             <el-table-column align="left" label="仓库" prop="invoiceId" min-width="160" show-overflow-tooltip>
               <template v-slot="{ row }">
-                <el-select v-model="row.warehouseFlag" value-key="" placeholder="" :disabled="flag" filterable
-                  size="mini" @change="storeChange($event, row)">
+                <el-select
+                  v-model="row.warehouseFlag"
+                  value-key=""
+                  placeholder=""
+                  :disabled="flag"
+                  filterable
+                  size="mini"
+                  @change="storeChange($event, row)"
+                >
                   <el-option v-for="item in storeList" :key="item.value" :label="item.label" :value="item.value">
                   </el-option>
                 </el-select>
@@ -120,69 +174,94 @@
             </el-table-column>
             <el-table-column align="left" label="收货客户" prop="orderTime" min-width="100" show-overflow-tooltip>
               <template slot-scope="scope">
-                <el-input v-if="!(scope.row.orderType === 'TRADE' || scope.row.orderType === 'HOME')"
-                  :disabled="flag || ((scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null))"
-                  v-model="scope.row.receivingName" size="mini"
-                  @input="handleInput($event, scope.row.invoiceId, 1)"></el-input>
+                <el-input
+                  v-if="!(scope.row.orderType === 'TRADE' || scope.row.orderType === 'HOME')"
+                  :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
+                  v-model="scope.row.receivingName"
+                  size="mini"
+                  @input="handleInput($event, scope.row.invoiceId, 1)"
+                ></el-input>
                 <template v-else>
                   <template v-if="listItem">
-                    <el-input :disabled="flag || ((scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null))"
-                    v-model="scope.row.receivingName" size="mini"></el-input>
+                    <el-input
+                      :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
+                      v-model="scope.row.receivingName"
+                      size="mini"
+                    ></el-input>
                   </template>
                   <template v-else>
-                    <el-input :disabled="flag || ((scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null))"
-                    v-model="scope.row.refLinkman" size="mini"></el-input>
+                    <el-input
+                      :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
+                      v-model="scope.row.refLinkman"
+                      size="mini"
+                    ></el-input>
                   </template>
-               
                 </template>
               </template>
             </el-table-column>
             <el-table-column align="left" label="电话" prop="orderTime" min-width="150" show-overflow-tooltip>
               <template slot-scope="scope">
-                <el-input v-if="!(scope.row.orderType === 'TRADE' || scope.row.orderType === 'HOME')"
-                  :disabled="flag || ((scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null))"
-                  v-model="scope.row.phone" size="mini" @input="handleInput($event, scope.row.invoiceId, 2)"></el-input>
+                <el-input
+                  v-if="!(scope.row.orderType === 'TRADE' || scope.row.orderType === 'HOME')"
+                  :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
+                  v-model="scope.row.phone"
+                  size="mini"
+                  @input="handleInput($event, scope.row.invoiceId, 2)"
+                ></el-input>
                 <template v-else>
-
                   <template v-if="listItem">
-                    <el-input :disabled="flag || ((scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null))"
-                    v-model="scope.row.phone" size="mini"></el-input>
+                    <el-input
+                      :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
+                      v-model="scope.row.phone"
+                      size="mini"
+                    ></el-input>
                   </template>
                   <template v-else>
-                    <el-input :disabled="flag || ((scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null))"
-                    v-model="scope.row.refPhone" size="mini"></el-input>
+                    <el-input
+                      :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
+                      v-model="scope.row.refPhone"
+                      size="mini"
+                    ></el-input>
                   </template>
-
-               
                 </template>
               </template>
             </el-table-column>
             <el-table-column align="left" label="收货地址" prop="orderTime" min-width="200" show-overflow-tooltip>
               <template slot-scope="scope">
-                <el-input v-if="!(scope.row.orderType === 'TRADE' || scope.row.orderType === 'HOME')"
-                  :disabled="flag || ((scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null))"
-                  v-model="scope.row.address" size="mini"
-                  @input="handleInput($event, scope.row.invoiceId, 3)"></el-input>
+                <el-input
+                  v-if="!(scope.row.orderType === 'TRADE' || scope.row.orderType === 'HOME')"
+                  :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
+                  v-model="scope.row.address"
+                  size="mini"
+                  @input="handleInput($event, scope.row.invoiceId, 3)"
+                ></el-input>
                 <template v-else>
-
                   <template v-if="listItem">
-                    <el-input :disabled="flag || ((scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null))"
-                    v-model="scope.row.address" size="mini"></el-input>
+                    <el-input
+                      :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
+                      v-model="scope.row.address"
+                      size="mini"
+                    ></el-input>
                   </template>
                   <template v-else>
-                    <el-input :disabled="flag || ((scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null))"
-                    v-model="scope.row.refInstallAddress" size="mini"></el-input>
+                    <el-input
+                      :disabled="flag || scope.row.warehouseFlag == 0 || scope.row.warehouseFlag == null"
+                      v-model="scope.row.refInstallAddress"
+                      size="mini"
+                    ></el-input>
                   </template>
-
-
-                
                 </template>
               </template>
             </el-table-column>
           </template>
 
-          <el-table-column align="left" label="发货申请单" prop="invoiceId" min-width="160"
-            show-overflow-tooltip></el-table-column>
+          <el-table-column
+            align="left"
+            label="发货申请单"
+            prop="invoiceId"
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
           <el-table-column align="left" label="单据日期" prop="orderTime" min-width="120" show-overflow-tooltip>
             <template slot-scope="scope">
               {{ scope.row.orderTime | dateToDayFilter }}
@@ -190,45 +269,77 @@
           </el-table-column>
           <el-table-column align="left" label="销售订单号" prop="mainOrderId" min-width="160" show-overflow-tooltip>
             <template slot-scope="scope">
-              <CopyButton :copyText="
-                scope.row.orderType === 'TRADE' ||
+              <CopyButton
+                :copyText="
+                  scope.row.orderType === 'TRADE' ||
                   scope.row.orderType === 'HOME' ||
                   scope.row.orderType === 'REQUISITION_TRADE' ||
                   scope.row.orderType === 'REQUISITION_HOME'
-                  ? scope.row.enginOrderNo
-                  : scope.row.mainOrderId
-              " />
-              <span>{{
-                  scope.row.orderType === 'TRADE' ||
-                    scope.row.orderType === 'HOME' ||
-                    scope.row.orderType === 'REQUISITION_TRADE' ||
-                    scope.row.orderType === 'REQUISITION_HOME'
                     ? scope.row.enginOrderNo
                     : scope.row.mainOrderId
+                "
+              />
+              <span>{{
+                scope.row.orderType === 'TRADE' ||
+                scope.row.orderType === 'HOME' ||
+                scope.row.orderType === 'REQUISITION_TRADE' ||
+                scope.row.orderType === 'REQUISITION_HOME'
+                  ? scope.row.enginOrderNo
+                  : scope.row.mainOrderId
               }}</span>
             </template>
           </el-table-column>
           <!-- <el-table-column align="left" label="工程编号" prop="enginOrderNo" min-width="140" show-overflow-tooltip></el-table-column> -->
-          <el-table-column align="left" label="销售类型" prop="saleTypeName" min-width="160"
-            show-overflow-tooltip></el-table-column>
-          <el-table-column align="left" label="物料编码" prop="materialCode" min-width="160"
-            show-overflow-tooltip></el-table-column>
-          <el-table-column align="left" label="产品名称" prop="materialName" min-width="160"
-            show-overflow-tooltip></el-table-column>
-          <el-table-column align="left" label="规格型号" prop="specification" min-width="160"
-            show-overflow-tooltip></el-table-column>
-          <el-table-column align="left" label="单位" prop="unit" min-width="100" show-overflow-tooltip></el-table-column>
-          <el-table-column align="right" label="数量" prop="refundableQty" min-width="100"
-            show-overflow-tooltip></el-table-column>
+          <el-table-column
+            align="left"
+            label="销售类型"
+            prop="saleTypeName"
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="left"
+            label="物料编码"
+            prop="materialCode"
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="left"
+            label="产品名称"
+            prop="materialName"
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="left"
+            label="规格型号"
+            prop="specification"
+            min-width="160"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="left"
+            label="单位"
+            prop="unit"
+            min-width="100"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            align="right"
+            label="数量"
+            prop="refundableQty"
+            min-width="100"
+            show-overflow-tooltip
+          ></el-table-column>
         </el-table>
       </div>
     </div>
 
     <div class="page-footer">
       <div class="footer" :class="classObj">
-        <el-button type="primary" @click="clickSubmitForm" v-if="!flag" :loading="formLoading">{{
-            formLoading ? '提交中 ...' : '提 交'
-        }}
+        <el-button type="primary" @click="clickSubmitForm" v-if="!flag" :loading="formLoading"
+          >{{ formLoading ? '提交中 ...' : '提 交' }}
         </el-button>
         <el-popconfirm title="确定重置吗?" @onConfirm="resetForm" style="margin-left: 10px" v-if="!listItem">
           <el-button slot="reference">重 置</el-button>
@@ -263,7 +374,7 @@ export default {
       mainForm: {
         // 筛选表单数据
         warehouse: '',
-        date: '',
+        date:'',
         timeSlot: '',
         pickupWay: '',
         pickupMan: '',
@@ -280,7 +391,7 @@ export default {
         timeSlot: [{ required: true, message: '请选择预约时段', trigger: 'change' }],
         pickupWay: [{ required: true, message: '请选择提货方式', trigger: 'change' }],
         pickupMan: [{ required: true, message: '请选择提货人', trigger: 'change' }],
-        company:[{ required: true, message: '请选择物流公司', trigger: 'change' }]
+        company: [{ required: true, message: '请选择物流公司', trigger: 'change' }]
         // receivingName: [{ required: true, message: '请填写收货客户', trigger: 'change' }],
         // phone: [{ required: true, message: '请填写电话', trigger: 'change' }]
         // address: [{ required: true, message: '请填写收货地址', trigger: 'change' }]
@@ -307,8 +418,12 @@ export default {
           label: '商家仓',
           value: 2
         }
-
-      ]
+      ],
+      setDisabled: {
+        disabledDate: time => {
+          return time.getTime()< new Date() - 24 * 3600 * 1000
+        }
+      }
     }
   },
 
@@ -323,7 +438,7 @@ export default {
       }
     },
     comDisabled() {
-      return (id) => {
+      return id => {
         if (this.isFront === false && id === '1574563841707114498') {
           return true
         }
@@ -333,7 +448,6 @@ export default {
         return false
       }
     }
-
   },
 
   created() {
@@ -347,7 +461,6 @@ export default {
     if (this.listItem) {
       this.getDetail()
     }
-
   },
 
   methods: {
@@ -366,7 +479,7 @@ export default {
     },
 
     storeChange(e, row) {
-      console.log(e, row);
+      console.log(e, row)
       this.deliverList.forEach(item => {
         if (item.invoiceId === row.invoiceId) {
           this.$set(item, 'warehouseFlag', e)
@@ -374,7 +487,7 @@ export default {
       })
       if (e == 0) {
         if (!(row.orderType === 'TRADE' || row.orderType === 'HOME')) {
-          if ((row.receivingName && row.phone && row.address)) {
+          if (row.receivingName && row.phone && row.address) {
             row.copyReceivingName = row.receivingName
             row.copyPhone = row.phone
             row.copyAddress = row.address
@@ -383,7 +496,7 @@ export default {
             row.address = ''
           }
         } else {
-          if ((row.refLinkman && row.refPhone && row.refInstallAddress)) {
+          if (row.refLinkman && row.refPhone && row.refInstallAddress) {
             row.copyRefLinkman = row.refLinkman
             row.copyRefPhone = row.refPhone
             row.copyRefInstallAddress = row.refInstallAddress
@@ -391,16 +504,12 @@ export default {
             row.refPhone = ''
             row.refInstallAddress = ''
           }
-
         }
-
       }
       if (e == 1) {
         row.refLinkman = row.copyRefLinkman
         row.refPhone = row.copyRefPhone
         row.refInstallAddress = row.copyRefInstallAddress
-
-
       }
       if (e == 2) {
         row.receivingName = row.copyReceivingName
@@ -445,7 +554,7 @@ export default {
         data.invoicePickBeans.forEach(k => {
           if (k.warehouseFlag == 0) {
             if (!(k.orderType === 'TRADE' || k.orderType === 'HOME')) {
-              if ((k.receivingName && k.phone && k.address)) {
+              if (k.receivingName && k.phone && k.address) {
                 k.copyReceivingName = k.receivingName
                 k.copyPhone = k.phone
                 k.copyAddress = k.address
@@ -454,7 +563,7 @@ export default {
                 k.address = ''
               }
             } else {
-              if ((k.refLinkman && k.refPhone && k.refInstallAddress)) {
+              if (k.refLinkman && k.refPhone && k.refInstallAddress) {
                 k.copyRefLinkman = k.refLinkman
                 k.copyRefPhone = k.refPhone
                 k.copyRefInstallAddress = k.refInstallAddress
@@ -462,15 +571,10 @@ export default {
                 k.refPhone = ''
                 k.refInstallAddress = ''
               }
-
             }
-
           }
-         
         })
         this.deliverList = data.invoicePickBeans
-
-
       })
     },
 
@@ -511,7 +615,6 @@ export default {
           })
         } else if (this.isFront === false) {
           this.mainForm.pickupWay = '1'
-
         }
       })
     },
@@ -523,7 +626,6 @@ export default {
         pageSize: -1
       }).then(res => {
         this.pickupManList = res.data.records
-
       })
     },
 
@@ -569,16 +671,15 @@ export default {
       this.deliverList.forEach(k => {
         if (!k.warehouseFlag) {
           this.$set(k, 'warehouseFlag', null)
-          if (this.mainForm.pickupWay == 2 && this.logisticsNumber === '001' ) {
-          if (k.refLinkman || k.refPhone || k.refInstallAddress) {
-            this.$set(k, 'warehouseFlag', 1)
-          }else{
-            this.$set(k, 'warehouseFlag', 0)
+          if (this.mainForm.pickupWay == 2 && this.logisticsNumber === '001') {
+            if (k.refLinkman || k.refPhone || k.refInstallAddress) {
+              this.$set(k, 'warehouseFlag', 1)
+            } else {
+              this.$set(k, 'warehouseFlag', 0)
+            }
           }
         }
-        }
-      
-        })
+      })
     },
     // 查询列表
     getDeliverList() {
@@ -590,13 +691,13 @@ export default {
         this.deliverList = res.data
         this.deliverList.forEach(k => {
           this.$set(k, 'warehouseFlag', null)
-          if (this.mainForm.pickupWay == 2 && this.logisticsNumber === '001' ) {
-          if (k.refLinkman || k.refPhone || k.refInstallAddress) {
-            this.$set(k, 'warehouseFlag', 1)
-          }else{
-            this.$set(k, 'warehouseFlag', 0)
+          if (this.mainForm.pickupWay == 2 && this.logisticsNumber === '001') {
+            if (k.refLinkman || k.refPhone || k.refInstallAddress) {
+              this.$set(k, 'warehouseFlag', 1)
+            } else {
+              this.$set(k, 'warehouseFlag', 0)
+            }
           }
-        }
         })
         this.listLoading = false
       })
@@ -641,16 +742,14 @@ export default {
               } else {
                 if (this.listItem) {
                   if (!(el.receivingName && el.phone && el.address)) {
-                  return this.$errorMsg('商家仓必须填写收货地址、电话、收货地址')
-                }
+                    return this.$errorMsg('商家仓必须填写收货地址、电话、收货地址')
+                  }
                 } else {
                   if (!(el.refLinkman && el.refPhone && el.refInstallAddress)) {
-                  return this.$errorMsg('商家仓必须填写收货地址、电话、收货地址')
-                }
+                    return this.$errorMsg('商家仓必须填写收货地址、电话、收货地址')
+                  }
                 }
-            
               }
-
             }
           }
 
@@ -673,8 +772,7 @@ export default {
                 .then(() => {
                   this.submitForm()
                 })
-                .catch(() => {
-                })
+                .catch(() => {})
             } else {
               this.submitForm()
             }
@@ -693,23 +791,17 @@ export default {
 
       let orderList = []
 
-
       this.tableSelection.forEach(item => {
-
         if (!(item.orderType === 'TRADE' || item.orderType === 'HOME')) {
-
         } else {
           if (this.listItem) {
-            
-          }else{
-    if ((item.refLinkman && item.refPhone && item.refInstallAddress)) {
-            item.receivingName = item.refLinkman
-            item.phone = item.refPhone
-            item.address = item.refInstallAddress
-          }
-
+          } else {
+            if (item.refLinkman && item.refPhone && item.refInstallAddress) {
+              item.receivingName = item.refLinkman
+              item.phone = item.refPhone
+              item.address = item.refInstallAddress
+            }
           }
-      
         }
         orderList.push({
           warehouseFlag: item.warehouseFlag,
@@ -777,10 +869,10 @@ export default {
 
     resetForm() {
       this.$refs.mainForm.resetFields()
-      if (this.isFront ===true) {
+      if (this.isFront === true) {
         this.mainForm.pickupWay = '2'
       }
-      if (this.isFront ===false) {
+      if (this.isFront === false) {
         this.mainForm.pickupWay = '1'
       }
       this.deliverList = []
@@ -789,6 +881,4 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>