|
@@ -14,6 +14,7 @@
|
|
|
action: () => openModal(),
|
|
|
},
|
|
|
]"
|
|
|
+ @moreSearch="moreSearch"
|
|
|
@get-list="getList">
|
|
|
<template #fileSlot="{ item }">
|
|
|
<div style="cursor: pointer; color: #409eff" @click="handleClickFile(item)">
|
|
@@ -27,7 +28,7 @@
|
|
|
<div id="pdfDom" style="width: 776px">
|
|
|
<div style="padding: 60px 30px; font-size: 12px !important; color: black">
|
|
|
<div style="font-size: 16px; text-align: center; padding: 8px">
|
|
|
- <span>{{ dictDataEcho(printDetails.type, fundsType) }}审批单</span>
|
|
|
+ <span>{{ dictValueLabel(printDetails.type, fundsType) }}审批单</span>
|
|
|
</div>
|
|
|
<div style="padding: 8px 0">
|
|
|
<span>{{ printDetails.corporationName }}</span>
|
|
@@ -63,7 +64,7 @@
|
|
|
index + 1 !== printDetails.accountRequestFundsDetailList.length ? 'border-bottom: 1px solid black; display: flex' : ' display: flex'
|
|
|
">
|
|
|
<div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; text-align: center">
|
|
|
- {{ dictDataEcho(item.costType, fundsCostType) }}
|
|
|
+ {{ dictValueLabel(item.costType, fundsCostType) }}
|
|
|
</div>
|
|
|
<div style="width: 120px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
|
|
|
{{ item.contractCode }}
|
|
@@ -72,7 +73,7 @@
|
|
|
{{ item.remarks }}
|
|
|
</div>
|
|
|
<div style="width: 60px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
|
|
|
- {{ dictDataEcho(printDetails.currency, accountCurrency) }}
|
|
|
+ {{ dictValueLabel(printDetails.currency, accountCurrency) }}
|
|
|
</div>
|
|
|
<div style="width: 100px; padding: 4px 8px; display: flex; align-items: center">
|
|
|
{{ item.amount }}
|
|
@@ -100,7 +101,7 @@
|
|
|
index + 1 !== printDetails.accountRequestFundsDetailList.length ? 'border-bottom: 1px solid black; display: flex' : ' display: flex'
|
|
|
">
|
|
|
<div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; text-align: center">
|
|
|
- {{ dictDataEcho(item.costType, fundsCostType) }}
|
|
|
+ {{ dictValueLabel(item.costType, fundsCostType) }}
|
|
|
</div>
|
|
|
<div style="width: 120px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
|
|
|
{{ item.contractCode }}
|
|
@@ -109,7 +110,7 @@
|
|
|
{{ item.remarks }}
|
|
|
</div>
|
|
|
<div style="width: 60px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
|
|
|
- {{ dictDataEcho(printDetails.currency, accountCurrency) }}
|
|
|
+ {{ dictValueLabel(printDetails.currency, accountCurrency) }}
|
|
|
</div>
|
|
|
<div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
|
|
|
{{ item.advanceAmount }}
|
|
@@ -169,7 +170,7 @@
|
|
|
</div>
|
|
|
<div style="display: flex">
|
|
|
<div style="width: 19%; padding: 0 8px; border-right: 1px solid black; display: flex; align-items: center">
|
|
|
- {{ dictDataEcho(printDetails.paymentMethod, fundsPaymentMethod) }}
|
|
|
+ {{ dictValueLabel(printDetails.paymentMethod, fundsPaymentMethod) }}
|
|
|
</div>
|
|
|
<div style="width: 27%; padding: 0 8px; border-right: 1px solid black; display: flex; align-items: center">
|
|
|
{{ printDetails.name }}
|
|
@@ -221,6 +222,78 @@
|
|
|
<el-button type="primary" @click="clickDownload()" size="large">下载PDF</el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <el-dialog title="高级检索" v-if="openSearch" v-model="openSearch" width="600" :before-close="cancelSearch">
|
|
|
+ <byForm :formConfig="formSearchConfig" :formOption="formOption" v-model="sourceList.pagination">
|
|
|
+ <template #departmentId>
|
|
|
+ <div>
|
|
|
+ <el-tree-select
|
|
|
+ v-model="sourceList.pagination.departmentId"
|
|
|
+ :data="deptTreeData"
|
|
|
+ check-strictly
|
|
|
+ :render-after-expand="false"
|
|
|
+ node-key="deptId"
|
|
|
+ style="width: 100%"
|
|
|
+ :props="defaultProps"
|
|
|
+ clearable />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #time>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="sourceList.pagination.beginTime"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2" style="text-align: center">到</el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="sourceList.pagination.endTime"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss" />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #money>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-input-number
|
|
|
+ onmousewheel="return false;"
|
|
|
+ v-model="sourceList.pagination.minAdvanceAmounts"
|
|
|
+ placeholder="请输入"
|
|
|
+ style="width: 100%"
|
|
|
+ :precision="2"
|
|
|
+ :controls="false"
|
|
|
+ :min="0" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2" style="text-align: center">到</el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-input-number
|
|
|
+ onmousewheel="return false;"
|
|
|
+ v-model="sourceList.pagination.maxAdvanceAmounts"
|
|
|
+ placeholder="请输入"
|
|
|
+ style="width: 100%"
|
|
|
+ :precision="2"
|
|
|
+ :controls="false"
|
|
|
+ :min="0" />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </byForm>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="cancelSearch()" size="large">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitSearch()" size="large">确 定</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -229,41 +302,66 @@ import byTable from "@/components/byTable/index";
|
|
|
import useUserStore from "@/store/modules/user";
|
|
|
import { ref } from "vue";
|
|
|
import moment from "moment";
|
|
|
+import byForm from "@/components/byForm/index";
|
|
|
|
|
|
const loading = ref(false);
|
|
|
const sourceList = ref({
|
|
|
data: [],
|
|
|
pagination: {
|
|
|
- total: 3,
|
|
|
+ total: 0,
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
+ type: "",
|
|
|
+ keyword: "",
|
|
|
+ writeOffStatus: "",
|
|
|
+ corporationId: "",
|
|
|
+ departmentId: "",
|
|
|
+ createUser: "",
|
|
|
+ currency: "",
|
|
|
+ beginTime: "",
|
|
|
+ endTime: "",
|
|
|
+ minAdvanceAmounts: undefined,
|
|
|
+ maxAdvanceAmounts: undefined,
|
|
|
+ paymentRemarks: "",
|
|
|
+ paymentMethod: "",
|
|
|
status: "",
|
|
|
+ paymentStatus: "",
|
|
|
},
|
|
|
});
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
+const fundsType = ref([]);
|
|
|
+const accountData = ref([]);
|
|
|
+const userList = ref([]);
|
|
|
+const companyData = ref([]);
|
|
|
+const accountCurrency = ref([]);
|
|
|
+const fundsCostType = ref([]);
|
|
|
+const fundsPaymentMethod = ref([]);
|
|
|
+const deptTreeData = ref([]);
|
|
|
+const paymentStatus = ref([]);
|
|
|
+const status = ref([
|
|
|
+ {
|
|
|
+ label: "审批中",
|
|
|
+ value: "10",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "驳回",
|
|
|
+ value: "20",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "审批通过",
|
|
|
+ value: "30",
|
|
|
+ },
|
|
|
+]);
|
|
|
const selectConfig = reactive([
|
|
|
{
|
|
|
label: "类型",
|
|
|
prop: "type",
|
|
|
- data: [],
|
|
|
+ data: fundsType.value,
|
|
|
},
|
|
|
{
|
|
|
label: "审批状态",
|
|
|
prop: "status",
|
|
|
- data: [
|
|
|
- {
|
|
|
- label: "审批中",
|
|
|
- value: "10",
|
|
|
- },
|
|
|
- {
|
|
|
- label: "驳回",
|
|
|
- value: "20",
|
|
|
- },
|
|
|
- {
|
|
|
- label: "已通过",
|
|
|
- value: "30",
|
|
|
- },
|
|
|
- ],
|
|
|
+ data: status.value,
|
|
|
},
|
|
|
{
|
|
|
label: "放款状态",
|
|
@@ -277,85 +375,94 @@ const config = computed(() => {
|
|
|
attrs: {
|
|
|
label: "归属公司",
|
|
|
prop: "corporationName",
|
|
|
+ width: 160,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
attrs: {
|
|
|
label: "归属部门",
|
|
|
prop: "deptName",
|
|
|
+ width: 160,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
attrs: {
|
|
|
label: "请款类型",
|
|
|
prop: "type",
|
|
|
+ width: 120,
|
|
|
},
|
|
|
render(type) {
|
|
|
- return proxy.dictDataEcho(type, fundsType.value);
|
|
|
+ return proxy.dictValueLabel(type, fundsType.value);
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
attrs: {
|
|
|
label: "请款人",
|
|
|
prop: "userName",
|
|
|
+ width: 140,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
attrs: {
|
|
|
label: "请款时间",
|
|
|
prop: "createTime",
|
|
|
+ width: 160,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
attrs: {
|
|
|
label: "请款金额",
|
|
|
prop: "total",
|
|
|
+ width: 120,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
attrs: {
|
|
|
label: "用款说明",
|
|
|
prop: "paymentRemarks",
|
|
|
+ "min-width": 200,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
attrs: {
|
|
|
label: "付款方式",
|
|
|
prop: "paymentMethod",
|
|
|
+ width: 120,
|
|
|
},
|
|
|
render(paymentMethod) {
|
|
|
- return proxy.dictDataEcho(paymentMethod, fundsPaymentMethod.value);
|
|
|
+ return proxy.dictValueLabel(paymentMethod, fundsPaymentMethod.value);
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
attrs: {
|
|
|
label: "付款账户",
|
|
|
prop: "accountManagementName",
|
|
|
+ width: 140,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
attrs: {
|
|
|
label: "审批状态",
|
|
|
prop: "status",
|
|
|
+ width: 100,
|
|
|
},
|
|
|
render(status) {
|
|
|
- return status == 10 ? "审批中" : status == 20 ? "驳回" : status == 30 ? "已通过" : "";
|
|
|
+ return status == 10 ? "审批中" : status == 20 ? "驳回" : status == 30 ? "审批通过" : "";
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
attrs: {
|
|
|
label: "放款状态",
|
|
|
prop: "subscribeContent",
|
|
|
+ width: 100,
|
|
|
},
|
|
|
- // render(subscribeContent) {
|
|
|
- // return proxy.dictDataEcho(subscribeContent, fundsPaymentMethod.value);
|
|
|
- // },
|
|
|
},
|
|
|
{
|
|
|
attrs: {
|
|
|
label: "操作",
|
|
|
- width: "100",
|
|
|
- align: "right",
|
|
|
+ width: "80",
|
|
|
+ align: "center",
|
|
|
+ fixed: "right",
|
|
|
},
|
|
|
renderHTML(row) {
|
|
|
return [
|
|
@@ -398,61 +505,40 @@ const openModal = () => {
|
|
|
});
|
|
|
};
|
|
|
const userInfo = useUserStore().user;
|
|
|
-const tenantId = userInfo.tenantId;
|
|
|
-const fundsType = ref([]);
|
|
|
-const accountData = ref([]);
|
|
|
-const userList = ref([]);
|
|
|
-const accountCurrency = ref([]);
|
|
|
-const fundsCostType = ref([]);
|
|
|
-const fundsPaymentMethod = ref([]);
|
|
|
+const recursive = (data) => {
|
|
|
+ data.map((item) => {
|
|
|
+ item.label = item.deptName;
|
|
|
+ item.id = item.corporationId;
|
|
|
+ if (item.children) {
|
|
|
+ recursive(item.children);
|
|
|
+ } else {
|
|
|
+ item.children = [];
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
const getDictData = () => {
|
|
|
- // 请款类型数据
|
|
|
- proxy
|
|
|
- .post("/dictTenantData/page", {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 999,
|
|
|
- tenantId: tenantId,
|
|
|
- dictCode: "founds_type",
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- fundsType.value = res.rows;
|
|
|
- selectConfig[0].data = res.rows.map((x) => ({
|
|
|
- label: x.dictValue,
|
|
|
- value: x.dictKey,
|
|
|
- }));
|
|
|
- });
|
|
|
- // 请款付款方式数据
|
|
|
- proxy
|
|
|
- .post("/dictTenantData/page", {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 999,
|
|
|
- tenantId: tenantId,
|
|
|
- dictCode: "funds_payment_method",
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- fundsPaymentMethod.value = res.rows;
|
|
|
- });
|
|
|
- // 货币
|
|
|
- proxy
|
|
|
- .post("/dictTenantData/page", {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 999,
|
|
|
- dictCode: "account_currency",
|
|
|
- tenantId: useUserStore().user.tenantId,
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- accountCurrency.value = res.rows;
|
|
|
- });
|
|
|
- proxy
|
|
|
- .post("/dictTenantData/page", {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 999,
|
|
|
- dictCode: "funds_cost_type",
|
|
|
- tenantId: useUserStore().user.tenantId,
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- fundsCostType.value = res.rows;
|
|
|
- });
|
|
|
+ proxy.getDictOne(["founds_type", "funds_payment_method", "account_currency", "funds_cost_type", "payment_status"]).then((res) => {
|
|
|
+ fundsType.value = res["founds_type"].map((x) => ({
|
|
|
+ label: x.dictValue,
|
|
|
+ value: x.dictKey,
|
|
|
+ }));
|
|
|
+ fundsPaymentMethod.value = res["funds_payment_method"].map((x) => ({
|
|
|
+ label: x.dictValue,
|
|
|
+ value: x.dictKey,
|
|
|
+ }));
|
|
|
+ accountCurrency.value = res["account_currency"].map((x) => ({
|
|
|
+ label: x.dictValue,
|
|
|
+ value: x.dictKey,
|
|
|
+ }));
|
|
|
+ fundsCostType.value = res["funds_cost_type"].map((x) => ({
|
|
|
+ label: x.dictValue,
|
|
|
+ value: x.dictKey,
|
|
|
+ }));
|
|
|
+ paymentStatus.value = res["payment_status"].map((x) => ({
|
|
|
+ label: x.dictValue,
|
|
|
+ value: x.dictKey,
|
|
|
+ }));
|
|
|
+ });
|
|
|
proxy.post("/accountManagement/page", { pageNum: 1, pageSize: 9999 }).then((res) => {
|
|
|
accountData.value = res.rows.map((item) => {
|
|
|
return {
|
|
@@ -479,6 +565,34 @@ const getDictData = () => {
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
+ proxy.post("/corporation/page", { pageNum: 1, pageSize: 9999 }).then((res) => {
|
|
|
+ if (res.rows && res.rows.length > 0) {
|
|
|
+ companyData.value = res.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ label: item.name,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ proxy
|
|
|
+ .get("/tenantDept/list", {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 9999,
|
|
|
+ tenantId: userInfo.tenantId,
|
|
|
+ })
|
|
|
+ .then((message) => {
|
|
|
+ recursive(message.data);
|
|
|
+ deptTreeData.value = [];
|
|
|
+ let data = proxy.handleTree(message.data, "deptId");
|
|
|
+ if (data && data.length > 0) {
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ if (data[i].children && data[i].children.length > 0) {
|
|
|
+ deptTreeData.value = deptTreeData.value.concat(data[i].children);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
};
|
|
|
getDictData();
|
|
|
getList();
|
|
@@ -587,10 +701,130 @@ const computeBalance = () => {
|
|
|
}
|
|
|
return balance;
|
|
|
};
|
|
|
+const formOption = reactive({
|
|
|
+ inline: true,
|
|
|
+ labelWidth: 100,
|
|
|
+ itemWidth: 100,
|
|
|
+ rules: [],
|
|
|
+});
|
|
|
+const defaultProps = {
|
|
|
+ children: "children",
|
|
|
+ label: "deptName",
|
|
|
+};
|
|
|
+const openSearch = ref(false);
|
|
|
+const formSearchConfig = computed(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ type: "select",
|
|
|
+ prop: "corporationId",
|
|
|
+ label: "归属公司",
|
|
|
+ data: companyData.value,
|
|
|
+ clearable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ slotName: "departmentId",
|
|
|
+ label: "归属部门",
|
|
|
+ itemWidth: 50,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "select",
|
|
|
+ prop: "createUser",
|
|
|
+ label: "请款人",
|
|
|
+ data: userList.value,
|
|
|
+ itemWidth: 50,
|
|
|
+ clearable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "select",
|
|
|
+ prop: "type",
|
|
|
+ label: "请款类型",
|
|
|
+ data: fundsType.value,
|
|
|
+ clearable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "select",
|
|
|
+ prop: "currency",
|
|
|
+ label: "币种",
|
|
|
+ data: accountCurrency.value,
|
|
|
+ clearable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ slotName: "time",
|
|
|
+ label: "请款时间",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ slotName: "money",
|
|
|
+ label: "请款金额",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ itemType: "textarea",
|
|
|
+ prop: "paymentRemarks",
|
|
|
+ label: "用款说明",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "select",
|
|
|
+ prop: "paymentMethod",
|
|
|
+ label: "付款方式",
|
|
|
+ data: fundsPaymentMethod.value,
|
|
|
+ clearable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "select",
|
|
|
+ prop: "status",
|
|
|
+ label: "流程状态",
|
|
|
+ data: status.value,
|
|
|
+ itemWidth: 50,
|
|
|
+ clearable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "select",
|
|
|
+ prop: "paymentStatus",
|
|
|
+ label: "打款状态",
|
|
|
+ data: paymentStatus.value,
|
|
|
+ itemWidth: 50,
|
|
|
+ clearable: true,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+});
|
|
|
+let copySearch = ref({});
|
|
|
+const moreSearch = () => {
|
|
|
+ copySearch.value = proxy.deepClone(sourceList.value.pagination);
|
|
|
+ openSearch.value = true;
|
|
|
+};
|
|
|
+const cancelSearch = () => {
|
|
|
+ sourceList.value.pagination = copySearch.value;
|
|
|
+ openSearch.value = false;
|
|
|
+};
|
|
|
+const submitSearch = () => {
|
|
|
+ if (
|
|
|
+ sourceList.value.pagination.minAdvanceAmounts &&
|
|
|
+ sourceList.value.pagination.maxAdvanceAmounts &&
|
|
|
+ Number(sourceList.value.pagination.minAdvanceAmounts) > Number(sourceList.value.pagination.maxAdvanceAmounts)
|
|
|
+ ) {
|
|
|
+ return ElMessage("交易金额输入错误");
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ sourceList.value.pagination.beginTime &&
|
|
|
+ sourceList.value.pagination.endTime &&
|
|
|
+ sourceList.value.pagination.beginTime > sourceList.value.pagination.endTime
|
|
|
+ ) {
|
|
|
+ return ElMessage("开始时间不能大于结束时间");
|
|
|
+ }
|
|
|
+ openSearch.value = false;
|
|
|
+ sourceList.value.pagination.pageNum = 1;
|
|
|
+ getList();
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.tenant {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
+::v-deep(.el-input-number .el-input__inner) {
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
</style>
|