|
|
@@ -0,0 +1,543 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <van-nav-bar
|
|
|
+ title="复核还库"
|
|
|
+ left-arrow
|
|
|
+ fixed
|
|
|
+ placeholder
|
|
|
+ @click-left="goBack"
|
|
|
+ >
|
|
|
+ <template #left>
|
|
|
+ <van-icon name="arrow-left" size="25" />
|
|
|
+ <div style="color: #fff">返回</div>
|
|
|
+ </template>
|
|
|
+<!-- <template #right>-->
|
|
|
+<!-- <div class="nav-right" @click="onClickRight">-->
|
|
|
+<!-- <van-icon name="list-switch" size="25" />-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </template>-->
|
|
|
+ </van-nav-bar>
|
|
|
+ <div class="move-stock">
|
|
|
+ <div class="code">
|
|
|
+ <div class="code-title">
|
|
|
+ <div>{{ containerNo || '' }}</div>
|
|
|
+ <div class="code-tips">
|
|
|
+ <van-notice-bar :background="'none'" :speed="50" :text="tips" />
|
|
|
+ </div>
|
|
|
+ <van-button plain size="mini" type="primary" @click="_setContainerNo()">切换反拣容器</van-button>
|
|
|
+ </div>
|
|
|
+ <div class="code-input">
|
|
|
+ <van-search
|
|
|
+ ref="searchRef"
|
|
|
+ v-model="searchBarcode"
|
|
|
+ placeholder="请扫描商品条码"
|
|
|
+ @search="_handlerScan(searchBarcode)"
|
|
|
+ label="商品条码："
|
|
|
+ left-icon=""
|
|
|
+ :class="[scanType===2?'search-input-barcode':'','van-hairline--bottom']"
|
|
|
+ @focus="scanType=2"
|
|
|
+ autocomplete="off"
|
|
|
+ >
|
|
|
+ </van-search>
|
|
|
+ <van-search
|
|
|
+ v-model="location"
|
|
|
+ placeholder="请扫描还库库位"
|
|
|
+ label="还库库位："
|
|
|
+ left-icon=""
|
|
|
+ @search="_handlerScan(location)"
|
|
|
+ :class="scanType===3?'search-input-barcode':''"
|
|
|
+ @focus="scanType=3"
|
|
|
+ autocomplete="off"
|
|
|
+ >
|
|
|
+ </van-search>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="move-stock-list">
|
|
|
+ <table class="task-table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>条码</th>
|
|
|
+ <th>生产日期</th>
|
|
|
+ <th>失效日期</th>
|
|
|
+ <th>属性仓</th>
|
|
|
+ <th style="width: 60px;">可还数量</th>
|
|
|
+ <th style="width: 45px;">操作</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(item, index) in moveList" :key="index" v-if="moveList.length>0">
|
|
|
+ <td>{{ item.sku }}</td>
|
|
|
+ <td>{{ item.productionDate }}</td>
|
|
|
+ <td>{{ item.expirationDate }}</td>
|
|
|
+ <td>{{ item.attributeWarehouse }}</td>
|
|
|
+ <td>{{ item.availableQty }}</td>
|
|
|
+ <td>
|
|
|
+ <div class="move-button" @click="onMove(item)">还库</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr v-else>
|
|
|
+ <td colspan="6">
|
|
|
+ <van-empty :image="nodataUrl" image-size="120" />
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <van-divider :style="{ color: '#333', borderColor: '#1989fa', padding: '0 16px',margin:'5px 0' }" >还库-库位推荐</van-divider>
|
|
|
+ <div class="move-stock-list">
|
|
|
+ <table class="task-table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th style="width: 80px">库位</th>
|
|
|
+ <th>条码</th>
|
|
|
+ <th>生产日期</th>
|
|
|
+ <th>失效日期</th>
|
|
|
+ <th>属性仓</th>
|
|
|
+ <th style="width: 40px;">数量</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(item, index) in totalList" :key="index" v-if="totalList.length>0 && moveList.length>0" :class="getClass(item)" >
|
|
|
+ <td>{{ item.location }}</td>
|
|
|
+ <td>{{ item.barcode }}</td>
|
|
|
+ <td>{{ item.lotAtt01 }}</td>
|
|
|
+ <td>{{ item.lotAtt02 }}</td>
|
|
|
+ <td>{{ item.lotAtt05 }}</td>
|
|
|
+ <td>{{ item.quantity}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr v-else>
|
|
|
+ <td colspan="6">
|
|
|
+ <div>暂无数据</div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 弹出框 -->
|
|
|
+ <van-action-sheet
|
|
|
+ v-model:show="modeTrueFalseBy"
|
|
|
+ :actions="actions"
|
|
|
+ cancel-text="取消"
|
|
|
+ close-on-click-action
|
|
|
+ @select="onSelectMode"
|
|
|
+ />
|
|
|
+ <!-- 条码输入组件 -->
|
|
|
+ <input-barcode :back="back" @setBarcode="setBarcode" ref="inputBarcodeRef" />
|
|
|
+ <van-dialog v-model:show="moveStockTrueFalseBy"
|
|
|
+ :beforeClose="beforeClose"
|
|
|
+ :title="'商品条码：'+ model.sku +'，还库：'+location" show-cancel-button >
|
|
|
+ <van-form>
|
|
|
+ <van-field
|
|
|
+ v-model="moveCount"
|
|
|
+ center
|
|
|
+ border
|
|
|
+ label="还库数量:"
|
|
|
+ placeholder="请输入数量"
|
|
|
+ type="digit"
|
|
|
+ name="pattern"
|
|
|
+ ref="countRef"
|
|
|
+ class="count-input"
|
|
|
+ @keydown.enter="onCountTask"
|
|
|
+ label-width="70px"
|
|
|
+ label-align="center"
|
|
|
+ :rules="[{ pattern, message: '请输入正确数量' }]"
|
|
|
+ autocomplete="off"
|
|
|
+ >
|
|
|
+<!-- <template #button>-->
|
|
|
+<!-- <div class="completion" @click="moveCount=model.qty">全部</div>-->
|
|
|
+<!-- </template>-->
|
|
|
+ </van-field>
|
|
|
+ <div class="tips" v-if="model['customerId']">
|
|
|
+ <van-row>
|
|
|
+ <van-col span="12">
|
|
|
+ <div>货 主：{{model.customerId}}</div>
|
|
|
+ <div>生产日期：{{model.productionDate || '--'}}</div>
|
|
|
+ <div>属 性 仓：{{model.attributeWarehouse}}</div>
|
|
|
+ <div>质量状态：{{model.quality}}</div>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="12">
|
|
|
+ <div>失效日期：{{model.expirationDate || '--'}}</div>
|
|
|
+ <div>分配数量：{{model.qtyAllocated }}</div>
|
|
|
+ <div style="color: #0077ff;cursor: pointer;text-decoration: underline" @click="moveCount=model.availableQty">
|
|
|
+ 可还数量：<span >{{model.availableQty }}</span>
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </div>
|
|
|
+ </van-form>
|
|
|
+ </van-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onMounted, onUnmounted, ref, computed } from 'vue'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import { useStore } from '@/store/modules/user'
|
|
|
+import { androidFocus, getHeader, goBack, scanError, scanSuccess } from '@/utils/android'
|
|
|
+import { closeListener, openListener, scanInit } from '@/utils/keydownListener'
|
|
|
+import { getInventory, getInventoryList, movementReturn } from '@/api/check/index'
|
|
|
+import InputBarcode from '@/views/outbound/picking/components/InputBarcode.vue'
|
|
|
+import { closeLoading, showLoading } from '@/utils/loading'
|
|
|
+import nodataUrl from '@/assets/nodata.png'
|
|
|
+import { showNotify, showToast } from 'vant'
|
|
|
+import { barcodeToUpperCase } from '@/utils/dataType.js'
|
|
|
+import { errorMessages } from '@vue/compiler-sfc'
|
|
|
+const router = useRouter()
|
|
|
+const store = useStore()
|
|
|
+const warehouse = store.warehouse
|
|
|
+const pattern=/^[1-9]\d*$/
|
|
|
+// 容器号和扫描类型的状态
|
|
|
+const containerNo = ref('')
|
|
|
+//输入框组件类型
|
|
|
+const inputBarcodeType = ref('')
|
|
|
+//扫描类型
|
|
|
+const scanType = ref(1)
|
|
|
+//输入框组件ref
|
|
|
+const inputBarcodeRef = ref(null)
|
|
|
+//可移动库存
|
|
|
+const moveList=ref([])
|
|
|
+//在库总库存
|
|
|
+const totalList=ref([])
|
|
|
+const searchRef=ref(null)
|
|
|
+//扫描条码
|
|
|
+const searchBarcode=ref('')
|
|
|
+//扫描库位
|
|
|
+const location=ref('')
|
|
|
+//
|
|
|
+const model=ref({})
|
|
|
+const countRef=ref(null)
|
|
|
+const back=ref(true)
|
|
|
+// 页面初始化
|
|
|
+onMounted(() => {
|
|
|
+ try {
|
|
|
+ getHeader()
|
|
|
+ androidFocus()
|
|
|
+ } catch (error) {
|
|
|
+ router.push('/login')
|
|
|
+ }
|
|
|
+ openListener()
|
|
|
+ scanInit(_handlerScan)
|
|
|
+ loadData()
|
|
|
+})
|
|
|
+
|
|
|
+// 设置容器号
|
|
|
+const setBarcode = (code) => {
|
|
|
+ if (inputBarcodeType.value === 'barcode') {
|
|
|
+ _handlerScan(code)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const checkContainer = `FJ-${warehouse}-`
|
|
|
+ if (!code.includes(checkContainer)) {
|
|
|
+ scanError()
|
|
|
+ setTimeout(()=>{
|
|
|
+ inputBarcodeRef.value?.show('', '请扫描反拣容器', '扫描容器不是反拣容器，请重新扫描')
|
|
|
+ },300)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ scanSuccess()
|
|
|
+ scanType.value = 2
|
|
|
+ containerNo.value = code
|
|
|
+ searchBarcode.value=''
|
|
|
+ moveList.value=''
|
|
|
+ location.value=''
|
|
|
+ // if(searchBarcode.value){
|
|
|
+ // _getInventoryList(searchBarcode.value)
|
|
|
+ // location.value=''
|
|
|
+ // }
|
|
|
+}
|
|
|
+const _setContainerNo=()=>{
|
|
|
+ inputBarcodeType.value=''
|
|
|
+ back.value=false
|
|
|
+ inputBarcodeRef.value?.show('', '请扫描反拣容器')
|
|
|
+}
|
|
|
+
|
|
|
+// 扫描条码监听
|
|
|
+const _handlerScan = (code) => {
|
|
|
+ console.log(code)
|
|
|
+ if (scanType.value === 2) {
|
|
|
+ setTimeout(()=>{
|
|
|
+ _getInventoryList(code)
|
|
|
+ },200)
|
|
|
+ }else if(scanType.value === 3){
|
|
|
+ const matchedItem = totalList.value.find((item) => barcodeToUpperCase(item.location) === barcodeToUpperCase(code))
|
|
|
+ location.value = matchedItem ? matchedItem.location : barcodeToUpperCase(code)
|
|
|
+ scanSuccess()
|
|
|
+ scanType.value = 4
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 获取库存数据
|
|
|
+const _getInventoryList = async (barcode) => {
|
|
|
+ const data = { warehouse, location: containerNo.value, barcode }
|
|
|
+ try {
|
|
|
+ showLoading()
|
|
|
+ const res = await getInventoryList(data)
|
|
|
+ closeLoading()
|
|
|
+ moveList.value = res.data
|
|
|
+ if (res.data.length === 0) {
|
|
|
+ scanError()
|
|
|
+ searchBarcode.value = ''
|
|
|
+ showNotify({ duration: 5000, message: `条码：${barcode},未找到可还库库存，请检查条码!` })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ scanSuccess()
|
|
|
+ searchBarcode.value= res.data[0].sku
|
|
|
+ const params={ warehouse, barcode,locationRegexp:'^(?!STAGE_|SORTATION_|REVERSEPICK_|FJ-).*$',queryLocationInfo:true }
|
|
|
+ if(barcode==='') return
|
|
|
+ getInventory(params).then(res=>{
|
|
|
+ totalList.value=res.data
|
|
|
+ })
|
|
|
+ scanType.value=3
|
|
|
+ } catch (err) {
|
|
|
+ closeLoading()
|
|
|
+ console.error(err)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//移动数量
|
|
|
+const moveCount=ref('')
|
|
|
+//移动弹框
|
|
|
+const moveStockTrueFalseBy=ref(false)
|
|
|
+//还库
|
|
|
+const onMove=(item)=>{
|
|
|
+ if(searchBarcode.value===''){
|
|
|
+ scanError()
|
|
|
+ showToast({duration:5000,message:'请扫描商品条码'})
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(location.value===''){
|
|
|
+ scanError()
|
|
|
+ showToast({duration:5000,message:'请扫描还库库位'})
|
|
|
+ return
|
|
|
+ }
|
|
|
+ model.value=item
|
|
|
+ moveCount.value=''
|
|
|
+ moveStockTrueFalseBy.value=true
|
|
|
+ setTimeout(()=>{
|
|
|
+ countRef.value?.focus()
|
|
|
+ },300)
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 确认还库
|
|
|
+ * @param action
|
|
|
+ */
|
|
|
+const beforeClose= (action) =>
|
|
|
+ new Promise((resolve) => {
|
|
|
+ if(action==='confirm'){
|
|
|
+ if(moveCount.value==''){
|
|
|
+ scanError()
|
|
|
+ showToast({duration:5000,message:'请输入还库数量'})
|
|
|
+ return resolve(false)
|
|
|
+ }
|
|
|
+ if(Number(moveCount.value)>model.value.availableQty){
|
|
|
+ scanError()
|
|
|
+ showToast({duration:5000,message:'还库数量不能大于总数量'+model.value.availableQty})
|
|
|
+ return resolve(false)
|
|
|
+ }
|
|
|
+ moveStockTrueFalseBy.value=false
|
|
|
+ resolve(true)
|
|
|
+ createMoveStock()
|
|
|
+ }
|
|
|
+ resolve(true)
|
|
|
+ });
|
|
|
+const onCountTask=()=>{
|
|
|
+ if(moveCount.value==''){
|
|
|
+ scanError()
|
|
|
+ showToast({duration:5000,message:'请输入还库数量'})
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(Number(moveCount.value)>model.value.availableQty){
|
|
|
+ scanError()
|
|
|
+ showToast({duration:5000,message:'还库数量不能大于总数量'+model.value.availableQty})
|
|
|
+ return
|
|
|
+ }
|
|
|
+ moveStockTrueFalseBy.value=false
|
|
|
+ createMoveStock()
|
|
|
+}
|
|
|
+//移动库存
|
|
|
+const createMoveStock=()=>{
|
|
|
+ const {warehouseId,customerId,lotNum,sku,locationId}=model.value
|
|
|
+ const data={
|
|
|
+ warehouse:warehouseId,owner:customerId,lotNum,sku,
|
|
|
+ quantity:moveCount.value,
|
|
|
+ fmLocation:locationId,
|
|
|
+ toLocation:location.value
|
|
|
+ }
|
|
|
+ showLoading()
|
|
|
+ movementReturn(data).then(res=>{
|
|
|
+ scanSuccess()
|
|
|
+ showToast({duration:3000,message:'操作成功'})
|
|
|
+ if(moveList.value.length===1 && model.value.availableQty==moveCount.value){
|
|
|
+ scanType.value=2
|
|
|
+ searchBarcode.value=''
|
|
|
+ location.value=''
|
|
|
+ moveList.value=[]
|
|
|
+ totalList.value=[]
|
|
|
+ }else {
|
|
|
+ location.value=''
|
|
|
+ _getInventoryList(searchBarcode.value)
|
|
|
+ }
|
|
|
+ }).catch(err=>{
|
|
|
+ scanError()
|
|
|
+ }).finally(_=>{
|
|
|
+ closeLoading()
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 提示文本根据扫描类型返回
|
|
|
+const tips = computed(() => {
|
|
|
+ switch (scanType.value) {
|
|
|
+ case 1:
|
|
|
+ return '请扫描容器号'
|
|
|
+ case 2:
|
|
|
+ return '请扫描商品条码'
|
|
|
+ case 3:
|
|
|
+ return '请扫描还库库位'
|
|
|
+ case 4:
|
|
|
+ return '请执行还库操作'
|
|
|
+ default:
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+})
|
|
|
+const getClass = (item) => {
|
|
|
+ // if (moveList.value.length === 1) {
|
|
|
+ // const currentMove = moveList.value[0]
|
|
|
+ // if (item.location === location.value) {
|
|
|
+ // return 'location-active'
|
|
|
+ // }
|
|
|
+ // if (item.lotAtt01 === currentMove.productionDate && item.lotAtt02 === currentMove.expirationDate) {
|
|
|
+ // return 'barcode-active'
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+// locationUsage 库位使用类型：拣货库位(PC/CS/EA)、存储位（RS）、过渡库位（ST）、其他库位
|
|
|
+ if(item.locationUsage==='PC' || item.locationUsage==='CS' || item.locationUsage==='EA' ){
|
|
|
+ return 'pricking-active'
|
|
|
+ }else if(item.locationUsage==='RS' ){
|
|
|
+ return 'stock-active'
|
|
|
+ }else if(item.locationUsage==='ST' ){
|
|
|
+ return 'virtual-active'
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+};
|
|
|
+
|
|
|
+// 右侧按钮点击事件
|
|
|
+const onClickRight = () => {
|
|
|
+ modeTrueFalseBy.value = true
|
|
|
+}
|
|
|
+
|
|
|
+// 切换模式
|
|
|
+const modeTrueFalseBy = ref(false)
|
|
|
+const actions = [{ name: '检索条码', key: 'inputBarcode' }]
|
|
|
+const onSelectMode = async (value) => {
|
|
|
+ if (value.key === 'inputBarcode') {
|
|
|
+ inputBarcodeType.value = 'barcode'
|
|
|
+ inputBarcodeRef.value?.show()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 数据刷新
|
|
|
+const loadData = () => {
|
|
|
+ inputBarcodeType.value = ''
|
|
|
+ if (!containerNo.value) {
|
|
|
+ inputBarcodeRef.value?.show('', '请扫描反拣容器号')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ scanType.value = 2
|
|
|
+}
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ closeListener()
|
|
|
+})
|
|
|
+
|
|
|
+window.onRefresh = searchBarcode.value?_getInventoryList(searchBarcode.value):loadData
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="sass" scoped>
|
|
|
+.container
|
|
|
+ .move-stock
|
|
|
+ .code
|
|
|
+ background: #e9f4ff
|
|
|
+ box-sizing: border-box
|
|
|
+ padding: 8px 0
|
|
|
+ .code-title
|
|
|
+ display: flex
|
|
|
+ justify-content: space-between
|
|
|
+ padding: 0 15px 8px 15px
|
|
|
+ .code-input
|
|
|
+ ::v-deep(.van-search)
|
|
|
+ padding: 0
|
|
|
+ ::v-deep(.van-search__field)
|
|
|
+ border-bottom: 2px solid #ffffff
|
|
|
+ ::v-deep(.van-search__content)
|
|
|
+ background: #fff
|
|
|
+ .search-input-barcode
|
|
|
+ ::v-deep(.van-search__field)
|
|
|
+ border-bottom: 2px solid #0077ff
|
|
|
+ z-index: 2
|
|
|
+ .code-tips
|
|
|
+ color: #ed6a0c
|
|
|
+ flex: 1
|
|
|
+ .code-count
|
|
|
+ font-size: 16px
|
|
|
+ font-weight: bold
|
|
|
+ span
|
|
|
+ color: #0077ff
|
|
|
+ .nav-right
|
|
|
+ padding: 14px 0 12px 5px
|
|
|
+ .move-stock-list
|
|
|
+ width: 100%
|
|
|
+ overflow-y: auto
|
|
|
+ max-height: 280px
|
|
|
+ min-height: 100px
|
|
|
+ .move-button
|
|
|
+ background: #1989fa
|
|
|
+ color: #fff
|
|
|
+ width: 100%
|
|
|
+ height: 30px
|
|
|
+ font-size: 14px
|
|
|
+ line-height: 30px
|
|
|
+ font-weight: bold
|
|
|
+ .task-table,.task-table-bin,.task-table-box
|
|
|
+ width: 100%
|
|
|
+ table-layout: fixed
|
|
|
+ border-collapse: collapse
|
|
|
+ font-size: 13px
|
|
|
+ .task-table th,.task-table-bin th,.task-table td,.task-table-bin td,.task-table-box th,.task-table-box td
|
|
|
+ text-align: center
|
|
|
+ border: 1px solid #ccc
|
|
|
+ word-wrap: break-word
|
|
|
+ word-break: break-all
|
|
|
+ .task-table thead,.task-table-bin thead,.task-table-box thead
|
|
|
+ background-color: #3f8dff
|
|
|
+ position: sticky
|
|
|
+ top: 0
|
|
|
+ color: white
|
|
|
+ font-size: 13px
|
|
|
+ .task-table-bin thead
|
|
|
+ background-color: #3f8dff
|
|
|
+ .task-table-bin tbody
|
|
|
+ background: #cde7ff
|
|
|
+ .task-table tbody tr.pricking-active
|
|
|
+ background-color: #d6f9e7
|
|
|
+ .task-table tbody tr.stock-active
|
|
|
+ background-color: #fffadd
|
|
|
+ .task-table tbody tr.virtual-active
|
|
|
+ background-color: #cacaca
|
|
|
+.count-input
|
|
|
+ ::v-deep(.van-field__value)
|
|
|
+ border-bottom: 2px solid #0077ff
|
|
|
+ font-size: 16px
|
|
|
+.completion
|
|
|
+ text-align: right
|
|
|
+ font-size: 14px
|
|
|
+ line-height: 35px
|
|
|
+ color: #0077ff
|
|
|
+ padding: 0 10px
|
|
|
+ cursor: pointer
|
|
|
+ text-decoration: underline
|
|
|
+.tips
|
|
|
+ font-size: 13px
|
|
|
+ text-align: left
|
|
|
+ padding: 5px 15px
|
|
|
+</style>
|
zhaohuanhuan