|
|
|
@ -12,13 +12,6 @@ |
|
|
|
<el-form-item :label="'托盘编码'"> |
|
|
|
<el-input v-model="searchData.palletId" style="width: 120px" clearable></el-input> |
|
|
|
</el-form-item> |
|
|
|
<!-- <el-form-item label="盘点结果">--> |
|
|
|
<!-- <el-select v-model="searchData.countResult" placeholder="请选择" style="width: 120px" clearable>--> |
|
|
|
<!-- <el-option label="全部" value=""></el-option>--> |
|
|
|
<!-- <el-option label="盘点成功" value="盘点成功"></el-option>--> |
|
|
|
<!-- <el-option label="盘点失败" value="盘点失败"></el-option>--> |
|
|
|
<!-- </el-select>--> |
|
|
|
<!-- </el-form-item>--> |
|
|
|
<el-form-item :label="'盘点日期'"> |
|
|
|
<el-date-picker |
|
|
|
style="width: 120px" |
|
|
|
@ -42,20 +35,26 @@ |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="' '"> |
|
|
|
<el-button type="primary" @click="searchTable()">查询</el-button> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="' '"> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
class="yzzButtonAn" |
|
|
|
@click="generateCountResult()" |
|
|
|
:disabled="generateLoading"> |
|
|
|
{{ generateLoading ? '生成中...' : '生成盘点结果' }} |
|
|
|
</el-button> |
|
|
|
<download-excel |
|
|
|
:fields="fields()" |
|
|
|
:data="exportData" |
|
|
|
type="xls" |
|
|
|
:name="exportName" |
|
|
|
:header="exportHeader" |
|
|
|
:footer="exportFooter" |
|
|
|
:defaultValue="exportDefaultValue" |
|
|
|
:fetch="createExportData" |
|
|
|
:before-generate="startDownload" |
|
|
|
:before-finish="finishDownload" |
|
|
|
worksheet="导出信息" |
|
|
|
class="el-button el-button--primary el-button--medium"> |
|
|
|
导出 |
|
|
|
</download-excel> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</el-form> |
|
|
|
|
|
|
|
<!-- 主表格:rfid_count_snapshot - rqrq --> |
|
|
|
<!-- 主表格:rfid_count_snapshot,列配置与盘点等页面一致 - rqrq --> |
|
|
|
<el-table |
|
|
|
:data="dataList" |
|
|
|
:height="height" |
|
|
|
@ -64,113 +63,22 @@ |
|
|
|
v-loading="dataListLoading" |
|
|
|
style="width: 100%;"> |
|
|
|
<el-table-column |
|
|
|
prop="site" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
width="80" |
|
|
|
label="站点"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="unitId" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
min-width="150" |
|
|
|
show-overflow-tooltip |
|
|
|
label="标签编码"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="partNo" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
min-width="120" |
|
|
|
show-overflow-tooltip |
|
|
|
label="物料编码"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="qty" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
width="100" |
|
|
|
label="数量"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="batchNo" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
min-width="120" |
|
|
|
show-overflow-tooltip |
|
|
|
label="批次号"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="locationId" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
min-width="120" |
|
|
|
show-overflow-tooltip |
|
|
|
label="库位"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="warehouseId" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
width="100" |
|
|
|
label="仓库"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="wdr" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
width="100" |
|
|
|
label="WDR"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="lastCountDate" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
width="160" |
|
|
|
label="最后盘点日期"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="palletId" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
min-width="120" |
|
|
|
show-overflow-tooltip |
|
|
|
label="托盘编码"> |
|
|
|
</el-table-column> |
|
|
|
<!-- <el-table-column--> |
|
|
|
<!-- prop="countResult"--> |
|
|
|
<!-- header-align="center"--> |
|
|
|
<!-- align="center"--> |
|
|
|
<!-- width="100"--> |
|
|
|
<!-- label="盘点结果">--> |
|
|
|
<!-- <template slot-scope="scope">--> |
|
|
|
<!-- <span :style="{color: scope.row.countResult === '盘点成功' ? '#67C23A' : '#F56C6C'}">--> |
|
|
|
<!-- {{ scope.row.countResult }}--> |
|
|
|
<!-- </span>--> |
|
|
|
<!-- </template>--> |
|
|
|
<!-- </el-table-column>--> |
|
|
|
<el-table-column |
|
|
|
prop="countTimes" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
width="100" |
|
|
|
label="盘点次数"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="remark" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
min-width="150" |
|
|
|
show-overflow-tooltip |
|
|
|
label="备注"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="updatedDate" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
width="160" |
|
|
|
label="更新时间"> |
|
|
|
v-for="(item, index) in mainColumnList" |
|
|
|
:key="index" |
|
|
|
:sortable="item.columnSortable" |
|
|
|
:prop="item.columnProp" |
|
|
|
:header-align="item.headerAlign" |
|
|
|
:align="item.align" |
|
|
|
:show-overflow-tooltip="item.showOverflowTooltip" |
|
|
|
:fixed="item.fixed === '' ? false : item.fixed" |
|
|
|
:min-width="item.columnWidth" |
|
|
|
:label="item.columnLabel"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-if="item.columnProp === 'lastCountDate'">{{ formatDateTime(scope.row.lastCountDate) }}</span> |
|
|
|
<span v-else-if="item.columnProp === 'updatedDate'">{{ formatDateTime(scope.row.updatedDate) }}</span> |
|
|
|
<span v-else-if="item.columnProp === 'createdDate'">{{ formatDateTime(scope.row.createdDate) }}</span> |
|
|
|
<span v-else>{{ scope.row[item.columnProp] }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
|
|
|
|
@ -189,155 +97,224 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { |
|
|
|
searchRfidCountSnapshotList, |
|
|
|
generateCountResultFromSnapshot |
|
|
|
} from "@/api/check/rfidCount.js" |
|
|
|
import { |
|
|
|
searchRfidCountSnapshotList, |
|
|
|
generateCountResultFromSnapshot |
|
|
|
} from '@/api/check/rfidCount.js' |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
// 页面状态 - rqrq |
|
|
|
height: 200, |
|
|
|
const EXPORT_MAX_ROWS = 50000 |
|
|
|
|
|
|
|
// 加载状态 - rqrq |
|
|
|
dataListLoading: false, |
|
|
|
generateLoading: false, |
|
|
|
export default { |
|
|
|
name: 'rfidDailyCountResult', |
|
|
|
data() { |
|
|
|
return { |
|
|
|
height: 200, |
|
|
|
dataListLoading: false, |
|
|
|
exportLoading: false, |
|
|
|
exportData: [], |
|
|
|
exportName: 'RFID日常盘点快照_' + this.dayjs().format('YYYYMMDDHHmmss'), |
|
|
|
exportHeader: ['RFID日常盘点快照'], |
|
|
|
exportFooter: [], |
|
|
|
exportDefaultValue: '', |
|
|
|
generateLoading: false, |
|
|
|
dataList: [], |
|
|
|
|
|
|
|
// 数据列表 - rqrq |
|
|
|
dataList: [], |
|
|
|
// 主表列配置(与 searchPhysicalInventory 等页 columnList 结构一致)- rqrq |
|
|
|
mainColumnList: [ |
|
|
|
{ columnProp: 'site', headerAlign: 'center', align: 'center', columnLabel: '站点', columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: '' }, |
|
|
|
{ columnProp: 'unitId', headerAlign: 'center', align: 'center', columnLabel: '标签编码', columnWidth: 150, columnSortable: false, showOverflowTooltip: true, fixed: '' }, |
|
|
|
{ columnProp: 'partNo', headerAlign: 'center', align: 'center', columnLabel: '物料编码', columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: '' }, |
|
|
|
{ columnProp: 'qty', headerAlign: 'center', align: 'center', columnLabel: '数量', columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: '' }, |
|
|
|
{ columnProp: 'batchNo', headerAlign: 'center', align: 'center', columnLabel: '批次号', columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: '' }, |
|
|
|
{ columnProp: 'locationId', headerAlign: 'center', align: 'center', columnLabel: '库位', columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: '' }, |
|
|
|
{ columnProp: 'warehouseId', headerAlign: 'center', align: 'center', columnLabel: '仓库', columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: '' }, |
|
|
|
{ columnProp: 'wdr', headerAlign: 'center', align: 'center', columnLabel: 'WDR', columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: '' }, |
|
|
|
{ columnProp: 'lastCountDate', headerAlign: 'center', align: 'center', columnLabel: '最后盘点日期', columnWidth: 160, columnSortable: false, showOverflowTooltip: true, fixed: '' }, |
|
|
|
{ columnProp: 'palletId', headerAlign: 'center', align: 'center', columnLabel: '托盘编码', columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: '' }, |
|
|
|
{ columnProp: 'countResult', headerAlign: 'center', align: 'center', columnLabel: '盘点结果', columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: '' }, |
|
|
|
{ columnProp: 'remark', headerAlign: 'center', align: 'center', columnLabel: '备注', columnWidth: 150, columnSortable: false, showOverflowTooltip: true, fixed: '' }, |
|
|
|
{ columnProp: 'createdDate', headerAlign: 'center', align: 'center', columnLabel: '创建时间', columnWidth: 160, columnSortable: false, showOverflowTooltip: true, fixed: '' }, |
|
|
|
{ columnProp: 'updatedDate', headerAlign: 'center', align: 'center', columnLabel: '更新时间', columnWidth: 160, columnSortable: false, showOverflowTooltip: true, fixed: '' } |
|
|
|
], |
|
|
|
|
|
|
|
// 查询条件 - rqrq |
|
|
|
searchData: { |
|
|
|
site: this.$store.state.user.site, |
|
|
|
unitId: '', |
|
|
|
partNo: '', |
|
|
|
palletId: '', |
|
|
|
countResult: '', |
|
|
|
startDate: '', |
|
|
|
endDate: '', |
|
|
|
page: 1, |
|
|
|
limit: 20 |
|
|
|
}, |
|
|
|
searchData: { |
|
|
|
site: this.$store.state.user.site, |
|
|
|
unitId: '', |
|
|
|
partNo: '', |
|
|
|
palletId: '', |
|
|
|
countResult: '', |
|
|
|
startDate: '', |
|
|
|
endDate: '', |
|
|
|
page: 1, |
|
|
|
limit: 20 |
|
|
|
}, |
|
|
|
|
|
|
|
pageIndex: 1, |
|
|
|
pageSize: 20, |
|
|
|
totalPage: 0 |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 分页信息 - rqrq |
|
|
|
pageIndex: 1, |
|
|
|
pageSize: 20, |
|
|
|
totalPage: 0 |
|
|
|
mounted() { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.height = window.innerHeight - 250 |
|
|
|
}) |
|
|
|
this.getDataList() |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
/** |
|
|
|
* @Description 组装与当前查询条件一致的请求体(导出/列表共用)- rqrq |
|
|
|
*/ |
|
|
|
buildQuery(overrides) { |
|
|
|
return { |
|
|
|
site: this.searchData.site, |
|
|
|
unitId: this.searchData.unitId, |
|
|
|
partNo: this.searchData.partNo, |
|
|
|
palletId: this.searchData.palletId, |
|
|
|
countResult: this.searchData.countResult, |
|
|
|
startDate: this.searchData.startDate, |
|
|
|
endDate: this.searchData.endDate, |
|
|
|
page: this.pageIndex, |
|
|
|
limit: this.pageSize, |
|
|
|
...overrides |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
// 计算表格高度 - rqrq |
|
|
|
this.$nextTick(() => { |
|
|
|
this.height = window.innerHeight - 250 |
|
|
|
getDataList() { |
|
|
|
this.dataListLoading = true |
|
|
|
const params = this.buildQuery({ page: this.pageIndex, limit: this.pageSize }) |
|
|
|
|
|
|
|
searchRfidCountSnapshotList(params).then(({ data }) => { |
|
|
|
this.dataListLoading = false |
|
|
|
if (data && data.code === 0) { |
|
|
|
this.dataList = data.page.list || [] |
|
|
|
this.pageIndex = data.page.currPage |
|
|
|
this.totalPage = data.page.totalCount |
|
|
|
} else { |
|
|
|
this.dataList = [] |
|
|
|
this.$message.error(data.msg || '查询失败') |
|
|
|
} |
|
|
|
}).catch(() => { |
|
|
|
this.dataListLoading = false |
|
|
|
this.$message.error('查询失败') |
|
|
|
}) |
|
|
|
// 加载数据 - rqrq |
|
|
|
this.getDataList() |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
/** |
|
|
|
* @Description 查询数据 - rqrq |
|
|
|
* @Title getDataList |
|
|
|
* @author rqrq |
|
|
|
*/ |
|
|
|
getDataList() { |
|
|
|
this.dataListLoading = true |
|
|
|
this.searchData.page = this.pageIndex |
|
|
|
this.searchData.limit = this.pageSize |
|
|
|
searchTable() { |
|
|
|
this.pageIndex = 1 |
|
|
|
this.getDataList() |
|
|
|
}, |
|
|
|
|
|
|
|
searchRfidCountSnapshotList(this.searchData).then(({data}) => { |
|
|
|
this.dataListLoading = false |
|
|
|
if (data && data.code === 0) { |
|
|
|
this.dataList = data.page.list || [] |
|
|
|
this.pageIndex = data.page.currPage |
|
|
|
this.totalPage = data.page.totalCount |
|
|
|
} else { |
|
|
|
this.dataList = [] |
|
|
|
this.$message.error(data.msg || '查询失败') |
|
|
|
/** |
|
|
|
* @Description 导出:按当前筛选拉取快照列表(与 mainColumnList / fields 一致)- rqrq |
|
|
|
*/ |
|
|
|
async createExportData() { |
|
|
|
try { |
|
|
|
const queryParams = this.buildQuery({ page: 1, limit: EXPORT_MAX_ROWS }) |
|
|
|
const { data } = await searchRfidCountSnapshotList(queryParams) |
|
|
|
if (data && data.code === 0) { |
|
|
|
const list = data.page.list || [] |
|
|
|
const totalAll = data.page.totalCount || 0 |
|
|
|
if (totalAll > EXPORT_MAX_ROWS) { |
|
|
|
this.$message.warning(`共 ${totalAll} 条,本次最多导出前 ${EXPORT_MAX_ROWS} 条`) |
|
|
|
} |
|
|
|
}).catch(() => { |
|
|
|
this.dataListLoading = false |
|
|
|
this.$message.error('查询失败') |
|
|
|
}) |
|
|
|
}, |
|
|
|
const dateProps = ['lastCountDate', 'updatedDate', 'createdDate'] |
|
|
|
return list.map(row => { |
|
|
|
const o = { ...row } |
|
|
|
dateProps.forEach(p => { |
|
|
|
if (o[p]) { |
|
|
|
o[p] = this.formatDateTime(o[p]) |
|
|
|
} |
|
|
|
}) |
|
|
|
return o |
|
|
|
}) |
|
|
|
} |
|
|
|
this.$message.error((data && data.msg) || '导出查询失败') |
|
|
|
return [] |
|
|
|
} catch (e) { |
|
|
|
console.error(e) |
|
|
|
this.$message.error('导出失败') |
|
|
|
return [] |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* @Description 查询按钮点击事件 - rqrq |
|
|
|
* @Title searchTable |
|
|
|
* @author rqrq |
|
|
|
*/ |
|
|
|
searchTable() { |
|
|
|
this.pageIndex = 1 |
|
|
|
this.getDataList() |
|
|
|
}, |
|
|
|
startDownload() { |
|
|
|
this.exportLoading = true |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* @Description 生成盘点结果 - rqrq |
|
|
|
* @Title generateCountResult |
|
|
|
* @author rqrq |
|
|
|
*/ |
|
|
|
generateCountResult() { |
|
|
|
// 二次确认 - rqrq |
|
|
|
this.$confirm('确认将RFID盘点快照生成为正式盘点单吗?', '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}).then(() => { |
|
|
|
this.generateLoading = true |
|
|
|
finishDownload() { |
|
|
|
this.exportLoading = false |
|
|
|
}, |
|
|
|
|
|
|
|
let params = { |
|
|
|
site: this.$store.state.user.site, |
|
|
|
username: this.$store.state.user.name |
|
|
|
} |
|
|
|
fields() { |
|
|
|
let json = '{' |
|
|
|
this.mainColumnList.forEach((item, index) => { |
|
|
|
if (index === this.mainColumnList.length - 1) { |
|
|
|
json += '"' + item.columnLabel + '":"' + item.columnProp + '"' |
|
|
|
} else { |
|
|
|
json += '"' + item.columnLabel + '":"' + item.columnProp + '",' |
|
|
|
} |
|
|
|
}) |
|
|
|
json += '}' |
|
|
|
return eval('(' + json + ')') |
|
|
|
}, |
|
|
|
|
|
|
|
generateCountResultFromSnapshot(params).then(({data}) => { |
|
|
|
this.generateLoading = false |
|
|
|
if (data && data.code === 0) { |
|
|
|
this.$message.success(data.msg || '生成成功') |
|
|
|
// 刷新列表 - rqrq |
|
|
|
this.getDataList() |
|
|
|
} else { |
|
|
|
this.$alert(data.msg, '错误', { |
|
|
|
confirmButtonText: '确定' |
|
|
|
}) |
|
|
|
} |
|
|
|
}).catch(() => { |
|
|
|
this.generateLoading = false |
|
|
|
this.$message.error('生成失败') |
|
|
|
}) |
|
|
|
formatDateTime(dateTime) { |
|
|
|
if (!dateTime) return '' |
|
|
|
const date = new Date(dateTime) |
|
|
|
if (isNaN(date.getTime())) return String(dateTime) |
|
|
|
const year = date.getFullYear() |
|
|
|
const month = String(date.getMonth() + 1).padStart(2, '0') |
|
|
|
const day = String(date.getDate()).padStart(2, '0') |
|
|
|
const hours = String(date.getHours()).padStart(2, '0') |
|
|
|
const minutes = String(date.getMinutes()).padStart(2, '0') |
|
|
|
return `${year}-${month}-${day} ${hours}:${minutes}` |
|
|
|
}, |
|
|
|
|
|
|
|
generateCountResult() { |
|
|
|
this.$confirm('确认将RFID盘点快照生成为正式盘点单吗?', '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}).then(() => { |
|
|
|
this.generateLoading = true |
|
|
|
|
|
|
|
const params = { |
|
|
|
site: this.$store.state.user.site, |
|
|
|
username: this.$store.state.user.name |
|
|
|
} |
|
|
|
|
|
|
|
generateCountResultFromSnapshot(params).then(({ data }) => { |
|
|
|
this.generateLoading = false |
|
|
|
if (data && data.code === 0) { |
|
|
|
this.$message.success(data.msg || '生成成功') |
|
|
|
this.getDataList() |
|
|
|
} else { |
|
|
|
this.$alert(data.msg, '错误', { |
|
|
|
confirmButtonText: '确定' |
|
|
|
}) |
|
|
|
} |
|
|
|
}).catch(() => { |
|
|
|
// 取消操作 - rqrq |
|
|
|
this.generateLoading = false |
|
|
|
this.$message.error('生成失败') |
|
|
|
}) |
|
|
|
}, |
|
|
|
}).catch(() => {}) |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* @Description 每页数变化 - rqrq |
|
|
|
* @Title sizeChangeHandle |
|
|
|
* @param {Number} val 每页数量 |
|
|
|
* @author rqrq |
|
|
|
*/ |
|
|
|
sizeChangeHandle(val) { |
|
|
|
this.pageSize = val |
|
|
|
this.pageIndex = 1 |
|
|
|
this.getDataList() |
|
|
|
}, |
|
|
|
sizeChangeHandle(val) { |
|
|
|
this.pageSize = val |
|
|
|
this.pageIndex = 1 |
|
|
|
this.getDataList() |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* @Description 当前页变化 - rqrq |
|
|
|
* @Title currentChangeHandle |
|
|
|
* @param {Number} val 当前页码 |
|
|
|
* @author rqrq |
|
|
|
*/ |
|
|
|
currentChangeHandle(val) { |
|
|
|
this.pageIndex = val |
|
|
|
this.getDataList() |
|
|
|
} |
|
|
|
currentChangeHandle(val) { |
|
|
|
this.pageIndex = val |
|
|
|
this.getDataList() |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
/* 样式使用全局样式,无需额外定义 - rqrq */ |
|
|
|
</style> |