<template>
|
<u-popup
|
:show="visible"
|
mode="center"
|
:closeable="true"
|
@close="handleClose"
|
:round="10"
|
width="90%"
|
:safe-area-inset-bottom="true"
|
>
|
<view class="popup-content">
|
<view class="popup-header">
|
<text class="popup-title">{{ isReturnMode ? '设备归还' : isEdit ? '编辑设备领用' : '新增设备领用' }}</text>
|
</view>
|
|
<scroll-view class="form-scroll" scroll-y>
|
<u-form :model="form" :rules="rules" ref="formRef" label-width="110" input-align="right">
|
<u-form-item label="领用人" prop="userId" border-bottom required>
|
<u-input
|
v-model="displayUserName"
|
placeholder="请选择领用人"
|
readonly
|
@click="showUserPicker = true"
|
:disabled="isViewMode || isReturnMode"
|
/>
|
<template #right>
|
<u-icon name="arrow-right" @click="showUserPicker = true"></u-icon>
|
</template>
|
</u-form-item>
|
|
<u-form-item label="设备名称" prop="equipmentId" border-bottom required>
|
<u-input
|
v-model="displayEquipmentName"
|
placeholder="请选择设备名称"
|
readonly
|
@click="showEquipmentPicker = true"
|
:disabled="isViewMode || isReturnMode"
|
/>
|
<template #right>
|
<u-icon name="arrow-right" @click="showEquipmentPicker = true"></u-icon>
|
</template>
|
</u-form-item>
|
|
<u-form-item label="是否为消耗品" prop="consumables" border-bottom required>
|
<u-input
|
v-model="displayConsumables"
|
placeholder="请选择是否为消耗品"
|
readonly
|
@click="showConsumablesPicker = true"
|
:disabled="isViewMode || isReturnMode"
|
/>
|
<template #right>
|
<u-icon name="arrow-right" @click="showConsumablesPicker = true"></u-icon>
|
</template>
|
</u-form-item>
|
|
<u-form-item v-if="isReturnMode" label="已使用数量" border-bottom>
|
<u-input
|
:value="formData.usageQuantity"
|
disabled
|
placeholder="已使用数量"
|
/>
|
</u-form-item>
|
|
<u-form-item v-if="isReturnMode" label="已归还数量" border-bottom>
|
<u-input
|
:value="formData.totalReturnNo || 0"
|
disabled
|
placeholder="已归还数量"
|
/>
|
</u-form-item>
|
|
<u-form-item v-if="!isReturnMode && formData.status !== 2" label="领用数量" prop="usageQuantity" border-bottom required>
|
<view class="number-box-wrapper">
|
<u-number-box
|
v-model="form.usageQuantity"
|
:min="1"
|
:max="maxQuantity || 999"
|
:disabled="isViewMode"
|
integer
|
@change="onUsageQuantityChange"
|
/>
|
<text v-if="maxQuantity !== null" class="info-text">(最多{{ maxQuantity }}台)</text>
|
</view>
|
</u-form-item>
|
|
<u-form-item v-if="isReturnMode" label="本次归还数量" prop="returnQuantity" border-bottom required>
|
<view class="number-box-wrapper">
|
<u-number-box
|
v-model="form.returnQuantity"
|
:min="1"
|
:max="Math.max(1, remainingReturnQuantity)"
|
:disabled="remainingReturnQuantity <= 0"
|
integer
|
/>
|
<text class="info-text" v-if="remainingReturnQuantity > 0">(最多{{ remainingReturnQuantity }}台)</text>
|
<text class="info-text" v-else>(已全部归还)</text>
|
</view>
|
<view
|
v-if="remainingReturnQuantity > 0 && form.returnQuantity === remainingReturnQuantity"
|
class="tip-text"
|
>
|
💡 提示：本次归还后将完成全部归还
|
</view>
|
</u-form-item>
|
|
<u-form-item v-if="!isReturnMode" label="使用开始时间" prop="usageStartTime" border-bottom required>
|
<u-input
|
v-model="form.usageStartTime"
|
placeholder="请选择开始时间"
|
readonly
|
@click="showDatePicker('usageStartTime')"
|
/>
|
<template #right>
|
<u-icon name="arrow-right" @click="showDatePicker('usageStartTime')"></u-icon>
|
</template>
|
</u-form-item>
|
|
<u-form-item v-if="isReturnMode" label="归还时间" prop="returnTime" border-bottom required>
|
<u-input
|
v-model="form.returnTime"
|
placeholder="请选择归还时间"
|
readonly
|
@click="showDatePicker('returnTime')"
|
/>
|
<template #right>
|
<u-icon name="arrow-right" @click="showDatePicker('returnTime')"></u-icon>
|
</template>
|
</u-form-item>
|
|
<u-form-item label="备注" border-bottom>
|
<u-textarea
|
v-model="form.remarks"
|
placeholder="请输入备注"
|
:disabled="isViewMode"
|
:autoHeight="true"
|
count
|
/>
|
</u-form-item>
|
</u-form>
|
</scroll-view>
|
|
<view class="popup-footer">
|
<u-button @click="handleClose" :customStyle="{ marginRight: '10px', flex: 1 }">取消</u-button>
|
<u-button type="primary" @click="debouncedSubmit" v-if="!isViewMode" :customStyle="{ flex: 1 }">确定</u-button>
|
</view>
|
</view>
|
|
<!-- 日期选择器 -->
|
<u-datetime-picker
|
:show="showDatePickerVisible"
|
v-model="datePickerValue"
|
mode="date"
|
@confirm="onDateConfirm"
|
@cancel="showDatePickerVisible = false"
|
/>
|
|
<!-- 用户选择器 -->
|
<up-action-sheet
|
:show="showUserPicker"
|
:actions="userActionList"
|
title="选择领用人"
|
@select="onUserSelect"
|
@close="showUserPicker = false"
|
/>
|
|
<!-- 设备选择器 -->
|
<up-action-sheet
|
:show="showEquipmentPicker"
|
:actions="equipmentActionList"
|
title="选择设备名称"
|
@select="onEquipmentSelect"
|
@close="showEquipmentPicker = false"
|
/>
|
|
<!-- 消耗品选择器 -->
|
<up-action-sheet
|
:show="showConsumablesPicker"
|
:actions="consumablesActionList"
|
title="选择是否为消耗品"
|
@select="onConsumablesSelect"
|
@close="showConsumablesPicker = false"
|
/>
|
</u-popup>
|
</template>
|
|
<script setup>
|
import { ref, watch, computed, onMounted, nextTick } from "vue";
|
import { useToast, useModal } from "@/utils/uviewplus";
|
import { getEquipmentList, userListAll } from "@/api/publicApi/index.js";
|
import { addOrEditUsageRecord } from "@/api/equipment/requisition/index.js";
|
|
import useUserStore from "@/store/modules/user";
|
|
const { showToast } = useToast();
|
const { showModal } = useModal();
|
|
const userStore = useUserStore();
|
let userList = ref([]);
|
|
// 获取用户列表
|
const fetchUserList = async () => {
|
try {
|
const res = await userListAll();
|
if (res.code === 200) {
|
userList.value = res.data || res.rows || [];
|
console.log('用户列表获取成功:', userList.value);
|
} else {
|
showToast('获取用户列表失败', 'error');
|
}
|
} catch (error) {
|
console.error('获取用户列表失败:', error);
|
showToast('获取用户列表失败', 'error');
|
}
|
};
|
|
// 选择器显示状态
|
const showUserPicker = ref(false);
|
const showEquipmentPicker = ref(false);
|
const showConsumablesPicker = ref(false);
|
|
// 用户选择列表（用于 action-sheet）
|
const userActionList = computed(() => {
|
return userList.value.map(item => ({
|
name: item.nickName || item.nickname || item.userName || item.name || '未知',
|
value: item.userId || item.id
|
}));
|
});
|
|
// 设备选择列表（用于 action-sheet）
|
const equipmentActionList = computed(() => {
|
return equipmentList.value.map(item => ({
|
name: item.equipmentName || item.name || '未知设备',
|
value: item.id || item.equipmentId
|
}));
|
});
|
|
// 显示用的文本（使用 ref 确保响应式）
|
const displayUserName = ref('');
|
const displayEquipmentName = ref('');
|
const displayConsumables = ref('');
|
|
// 消耗品选择列表
|
const consumablesActionList = computed(() => [
|
{ name: '是', value: true },
|
{ name: '否', value: false }
|
]);
|
|
// 监听 form 变化，更新显示文本
|
watch(
|
() => form.value.userId,
|
(userId) => {
|
if (userId) {
|
const user = userList.value.find(u => {
|
const uId = u.userId || u.id;
|
return uId == userId || String(uId) === String(userId);
|
});
|
displayUserName.value = user ? (user.nickName || user.nickname || user.userName || user.name) : '';
|
} else {
|
displayUserName.value = '';
|
}
|
},
|
{ immediate: true }
|
);
|
|
watch(
|
() => form.value.equipmentId,
|
(equipmentId) => {
|
if (equipmentId) {
|
const equipment = equipmentList.value.find(e => {
|
const eId = e.id || e.equipmentId;
|
return eId == equipmentId || String(eId) === String(equipmentId);
|
});
|
displayEquipmentName.value = equipment ? (equipment.equipmentName || equipment.name) : '';
|
} else {
|
displayEquipmentName.value = '';
|
}
|
},
|
{ immediate: true }
|
);
|
|
watch(
|
() => form.value.consumables,
|
(consumables) => {
|
if (consumables === true || consumables === 'true' || consumables === 1) {
|
displayConsumables.value = '是';
|
} else if (consumables === false || consumables === 'false' || consumables === 0) {
|
displayConsumables.value = '否';
|
} else {
|
displayConsumables.value = '';
|
}
|
},
|
{ immediate: true }
|
);
|
|
// 用户选择
|
const onUserSelect = (item) => {
|
const userId = item.value || item.userId || item.id;
|
form.value.userId = userId;
|
// 立即更新显示文本
|
const user = userList.value.find(u => {
|
const uId = u.userId || u.id;
|
return uId == userId || String(uId) === String(userId);
|
});
|
displayUserName.value = user ? (user.nickName || user.nickname || user.userName || user.name) : '';
|
showUserPicker.value = false;
|
// 选择用户后获取设备列表
|
getEquipment();
|
nextTick(() => {
|
if (formRef.value) {
|
formRef.value.validateField('userId');
|
}
|
});
|
};
|
|
// 设备选择
|
const onEquipmentSelect = (item) => {
|
const equipmentId = item.value || item.id || item.equipmentId;
|
form.value.equipmentId = equipmentId;
|
// 立即更新显示文本
|
const equipment = equipmentList.value.find(e => {
|
const eId = e.id || e.equipmentId;
|
return eId == equipmentId || String(eId) === String(equipmentId);
|
});
|
displayEquipmentName.value = equipment ? (equipment.equipmentName || equipment.name) : '';
|
showEquipmentPicker.value = false;
|
nextTick(() => {
|
if (formRef.value) {
|
formRef.value.validateField('equipmentId');
|
}
|
});
|
};
|
|
// 消耗品选择
|
const onConsumablesSelect = (item) => {
|
const consumables = item.value !== undefined ? item.value : (item.name === '是' ? true : false);
|
form.value.consumables = consumables;
|
// 立即更新显示文本
|
displayConsumables.value = consumables ? '是' : '否';
|
showConsumablesPicker.value = false;
|
nextTick(() => {
|
if (formRef.value) {
|
formRef.value.validateField('consumables');
|
}
|
});
|
};
|
|
// 领用数量变化
|
const onUsageQuantityChange = (value) => {
|
// 确保值是数字类型
|
form.value.usageQuantity = Number(value) || 1;
|
// 触发验证
|
nextTick(() => {
|
if (formRef.value) {
|
formRef.value.validateField('usageQuantity');
|
}
|
});
|
};
|
|
// 获取设备列表
|
const equipmentList = ref([]);
|
// 获取最新数据
|
const getEquipment = async () => {
|
try {
|
const res = await getEquipmentList();
|
if (res.code === 200) {
|
equipmentList.value = res.data || res.rows || [];
|
console.log('设备列表获取成功:', equipmentList.value);
|
} else {
|
showToast("获取设备列表失败", 'error');
|
}
|
} catch (error) {
|
console.error("获取设备列表失败:", error);
|
showToast("获取设备列表失败", 'error');
|
}
|
};
|
const props = defineProps({
|
modelValue: Boolean,
|
formData: {
|
type: Object,
|
default: () => ({}),
|
},
|
addOrEdit: {
|
type: String,
|
default: "add",
|
},
|
});
|
|
// 默认表单初始值
|
const defaultForm = {
|
userId: "",
|
equipmentId: "",
|
consumables: false,
|
usageQuantity: 1,
|
usageStartTime: "",
|
returnQuantity: 1,
|
returnTime: "",
|
remarks: "",
|
};
|
const form = ref({ ...defaultForm });
|
|
const maxQuantity = computed(() => {
|
if (!form.value.equipmentId) return 0;
|
const eq = equipmentList.value.find(
|
(item) => item.id == form.value.equipmentId
|
);
|
// 防止为0或负数，最小为1
|
return eq && eq.quantity > 0 ? eq.quantity : 999;
|
});
|
const emit = defineEmits(["update:modelValue", "submit"]);
|
|
const visible = computed({
|
get: () => {
|
console.log('弹窗 visible get:', props.modelValue);
|
return props.modelValue;
|
},
|
set: (v) => {
|
console.log('弹窗 visible set:', v);
|
emit("update:modelValue", v);
|
},
|
});
|
|
// 监听 modelValue 变化
|
watch(
|
() => props.modelValue,
|
(newVal) => {
|
console.log('弹窗 modelValue 变化:', newVal);
|
},
|
{ immediate: true }
|
);
|
|
// 监听设备选择变化
|
watch(
|
() => form.value.equipmentId,
|
(newId) => {
|
if (newId) {
|
const eq = equipmentList.value.find(item => item.id == newId);
|
}
|
}
|
);
|
const isViewMode = computed(
|
() => props.addOrEdit === "view" || props.addOrEdit === "viewRow"
|
);
|
|
// 判断是否为归还模式
|
const isReturnMode = computed(() => props.addOrEdit === "return");
|
|
// 计算剩余可归还数量
|
const remainingReturnQuantity = computed(() => {
|
if (!isReturnMode.value || !props.formData.usageQuantity) return 0;
|
|
const totalUsageQuantity = props.formData.usageQuantity || 0; // 总使用数量
|
const alreadyReturnedQuantity = props.formData.totalReturnNo || 0; // 已归还数量
|
const remaining = totalUsageQuantity - alreadyReturnedQuantity; // 剩余可归还数量
|
|
return Math.max(0, remaining); // 确保不为负数
|
});
|
|
const isEdit = computed(() => !!props.formData?.id);
|
const formRef = ref();
|
|
// 日期选择器
|
const showDatePickerVisible = ref(false);
|
const datePickerValue = ref(Date.now());
|
const currentDateField = ref('');
|
|
// 显示日期选择器
|
const showDatePicker = (field) => {
|
if (isViewMode.value) return;
|
currentDateField.value = field;
|
if (form.value[field]) {
|
datePickerValue.value = new Date(form.value[field]).getTime();
|
} else {
|
datePickerValue.value = Date.now();
|
}
|
showDatePickerVisible.value = true;
|
};
|
|
// 日期确认
|
const onDateConfirm = (e) => {
|
const date = new Date(e.value);
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, "0");
|
const day = String(date.getDate()).padStart(2, "0");
|
form.value[currentDateField.value] = `${year}-${month}-${day}`;
|
showDatePickerVisible.value = false;
|
};
|
|
// 获取当前日期（YYYY-MM-DD格式）
|
const getCurrentDate = () => {
|
const now = new Date();
|
const year = now.getFullYear();
|
const month = String(now.getMonth() + 1).padStart(2, "0");
|
const day = String(now.getDate()).padStart(2, "0");
|
return `${year}-${month}-${day}`;
|
};
|
|
// 确保初始化时获取数据
|
onMounted(() => {
|
fetchUserList();
|
getEquipment();
|
});
|
|
|
// 标记是否已经初始化，避免 watch 覆盖用户选择
|
const isInitialized = ref(false);
|
|
watch(
|
() => props.formData,
|
(val) => {
|
// 只在初始化时或者 formData 有实际变化时才更新
|
if (!isInitialized.value) {
|
if (val && Object.keys(val).length > 0) {
|
// 合并现有值，避免覆盖用户已选择的值
|
form.value = { ...defaultForm, ...val };
|
|
// 归还模式初始化
|
if (isReturnMode.value) {
|
form.value.returnTime = getCurrentDate();
|
const maxReturnQuantity = remainingReturnQuantity.value;
|
form.value.returnQuantity =
|
maxReturnQuantity > 0 ? Math.min(1, maxReturnQuantity) : 0;
|
}
|
} else {
|
form.value = { ...defaultForm };
|
}
|
isInitialized.value = true;
|
console.log('formData watch 初始化，form.value:', form.value);
|
}
|
},
|
{ immediate: true }
|
);
|
|
// 监听弹窗打开，重置初始化标记并获取数据
|
watch(
|
() => props.modelValue,
|
(newVal) => {
|
if (newVal) {
|
// 弹窗打开时重置初始化标记，允许 formData watch 重新初始化
|
isInitialized.value = false;
|
// 弹窗打开时重新获取数据
|
if (userList.value.length === 0) {
|
fetchUserList();
|
}
|
if (equipmentList.value.length === 0) {
|
getEquipment();
|
}
|
} else {
|
// 弹窗关闭时重置
|
isInitialized.value = false;
|
}
|
}
|
);
|
|
const rules = computed(() => {
|
const baseRules = {
|
userId: [
|
{
|
required: true,
|
message: "请选择领用人",
|
trigger: "change",
|
validator: (rule, value, callback) => {
|
if (!form.value.userId) {
|
callback(new Error("请选择领用人"));
|
} else {
|
callback();
|
}
|
}
|
}
|
],
|
equipmentId: [
|
{
|
required: true,
|
message: "请选择设备名称",
|
trigger: "change",
|
validator: (rule, value, callback) => {
|
if (!form.value.equipmentId) {
|
callback(new Error("请选择设备名称"));
|
} else {
|
callback();
|
}
|
}
|
}
|
],
|
consumables: [
|
{
|
required: true,
|
message: "请选择是否为消耗品",
|
trigger: "change",
|
validator: (rule, value, callback) => {
|
if (form.value.consumables === undefined || form.value.consumables === null || form.value.consumables === '') {
|
callback(new Error("请选择是否为消耗品"));
|
} else {
|
callback();
|
}
|
}
|
}
|
],
|
};
|
|
if (isReturnMode.value) {
|
// 归还模式的验证规则
|
return {
|
...baseRules,
|
returnQuantity: [
|
{ required: true, message: "请输入归还数量", trigger: "blur" },
|
{ type: "number", min: 1, message: "至少归还1台", trigger: "blur" },
|
{
|
validator: (rule, value, callback) => {
|
const remaining = remainingReturnQuantity.value;
|
if (remaining <= 0) {
|
callback(new Error("已全部归还，无法继续归还"));
|
} else if (value > remaining) {
|
callback(
|
new Error(`归还数量不能大于剩余可归还数量(${remaining}台)`)
|
);
|
} else {
|
callback();
|
}
|
},
|
trigger: "blur",
|
},
|
],
|
returnTime: [
|
{ required: true, message: "请选择归还时间", trigger: "change" },
|
],
|
};
|
} else {
|
// 新增/编辑模式的验证规则
|
return {
|
...baseRules,
|
usageQuantity: [
|
{
|
required: true,
|
message: "请输入领用数量",
|
trigger: "change",
|
validator: (rule, value, callback) => {
|
const numValue = Number(value) || 0;
|
if (!value && value !== 0) {
|
callback(new Error("请输入领用数量"));
|
} else if (numValue < 1) {
|
callback(new Error("至少领用1台"));
|
} else if (maxQuantity.value !== null && numValue > maxQuantity.value) {
|
callback(new Error("领用数量不能大于设备数量"));
|
} else {
|
callback();
|
}
|
}
|
},
|
],
|
usageStartTime: [
|
{ required: true, message: "请选择开始时间", trigger: "change" },
|
],
|
};
|
}
|
});
|
|
function handleClose() {
|
emit("update:modelValue", false);
|
}
|
|
// 通用防抖函数
|
function debounce(fn, delay = 800) {
|
let timer = null;
|
return function (...args) {
|
if (timer) clearTimeout(timer);
|
timer = setTimeout(() => {
|
fn.apply(this, args);
|
timer = null;
|
}, delay);
|
};
|
}
|
|
// 防抖后的提交方法
|
const debouncedSubmit = debounce(handleSubmit, 800);
|
|
function handleSubmit() {
|
formRef.value.validate(async (valid) => {
|
if (!valid) return;
|
|
let submitData = { ...form.value };
|
|
// 归还模式处理
|
if (isReturnMode.value) {
|
const currentReturnQuantity = form.value.returnQuantity;
|
const totalUsageQuantity = props.formData.usageQuantity;
|
const alreadyReturnedQuantity = props.formData.totalReturnNo || 0;
|
const newTotalReturnedQuantity =
|
alreadyReturnedQuantity + currentReturnQuantity;
|
|
// 判断是否全部归还完成
|
let equipmentStatus = 2; // 默认为部分归还
|
let isFullyReturned = newTotalReturnedQuantity >= totalUsageQuantity;
|
|
if (isFullyReturned) {
|
equipmentStatus = 3; // 全部归还完成
|
|
// 全部归还时的确认提示
|
try {
|
const result = await showModal({
|
title: '确认全部归还',
|
content: `确认将设备"${props.formData.equipmentName || '未知设备'}"全部归还吗？归还后设备状态将变为"已归还"。`,
|
confirmText: '确认归还',
|
cancelText: '取消',
|
type: 'success'
|
});
|
|
if (!result) {
|
showToast('已取消归还操作', 'info');
|
return;
|
}
|
} catch (error) {
|
showToast('已取消归还操作', 'info');
|
return;
|
}
|
|
console.log("设备归还完成:", {
|
设备名称: props.formData.equipmentName,
|
总使用数量: totalUsageQuantity,
|
新的归还总数: newTotalReturnedQuantity,
|
状态: "已全部归还",
|
});
|
} else {
|
console.log("设备部分归还:", {
|
设备名称: props.formData.equipmentName,
|
总使用数量: totalUsageQuantity,
|
已归还数量: newTotalReturnedQuantity,
|
剩余未归还: totalUsageQuantity - newTotalReturnedQuantity,
|
状态: "部分归还",
|
});
|
}
|
|
submitData = {
|
...props.formData,
|
totalReturnNo: newTotalReturnedQuantity,
|
returnQuantity: currentReturnQuantity,
|
returnTime: form.value.returnTime,
|
equipmentStatus: equipmentStatus,
|
remarks: form.value.remarks,
|
usageQuantity: totalUsageQuantity,
|
};
|
}
|
|
try {
|
let { code, data } = await addOrEditUsageRecord(submitData);
|
if (code !== 200) {
|
showToast(data.msg || "操作失败", 'error');
|
return;
|
}
|
if (code == 200 && data == 1) {
|
emit("submit", submitData);
|
}
|
handleClose();
|
} catch (error) {
|
console.error("提交失败:", error);
|
showToast("操作失败，请稍后再试", 'error');
|
}
|
});
|
}
|
</script>
|
|
<style scoped lang="scss">
|
@import '@/static/scss/form-common.scss';
|
|
.popup-content {
|
width: 90vw;
|
max-width: 500px;
|
background-color: #fff;
|
border-radius: 10px;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
max-height: 80vh;
|
}
|
|
.popup-header {
|
padding: 20px;
|
text-align: center;
|
border-bottom: 1px solid #f0f0f0;
|
flex-shrink: 0;
|
}
|
|
.popup-title {
|
font-size: 18px;
|
font-weight: 600;
|
color: #333;
|
}
|
|
.form-scroll {
|
flex: 1;
|
max-height: calc(80vh - 140px);
|
overflow-y: auto;
|
}
|
|
.popup-footer {
|
display: flex;
|
justify-content: center;
|
padding: 15px 20px;
|
border-top: 1px solid #f0f0f0;
|
background-color: #fafafa;
|
flex-shrink: 0;
|
}
|
|
.number-box-wrapper {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
width: 100%;
|
justify-content: flex-end;
|
}
|
|
.info-text {
|
font-size: 12px;
|
color: #999;
|
margin-left: 8px;
|
}
|
|
.tip-text {
|
font-size: 12px;
|
color: #2979ff;
|
margin-top: 8px;
|
padding: 8px 12px;
|
background: #f0f7ff;
|
border-radius: 4px;
|
}
|
</style>
|
