This commit is contained in:
weipengfei 2023-08-16 11:15:37 +08:00
parent 31e6dea192
commit 3d550219d3
5 changed files with 574 additions and 313 deletions

View File

@ -24,3 +24,8 @@ export function apiTaskSchedulingDelete(params: any) {
export function apiTaskSchedulingDetail(params: any) { export function apiTaskSchedulingDetail(params: any) {
return request.get({ url: '/task_scheduling.task_scheduling/detail', params }) return request.get({ url: '/task_scheduling.task_scheduling/detail', params })
} }
// 任务公司排期详情
export function apiTaskSchedulingEditMoney(params: any) {
return request.post({ url: '/task_scheduling.task_scheduling/editMoney', params })
}

View File

@ -63,6 +63,11 @@
prop="company_name" prop="company_name"
show-overflow-tooltip show-overflow-tooltip
/> />
<el-table-column
label="每日最大金额"
prop="money"
show-overflow-tooltip
/>
<el-table-column <el-table-column
label="公司类型" label="公司类型"
prop="company_type_name" prop="company_type_name"
@ -83,8 +88,32 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="120" fixed="right"> <el-table-column label="操作" fixed="right">
<template #default="{ row }"> <template #default="{ row }">
<el-button
v-perms="['task.task_calendar']"
@click="moneyAdd(row)"
type="primary"
link
>
金额
</el-button>
<el-button
v-perms="['task_template.task_template/lists']"
type="primary"
link
>
<router-link
:to="{
path: getRoutePath('task_template.task_template/lists'),
query: {
id: row.id,
company_id: row.company_id,
},
}"
>任务模板</router-link
>
</el-button>
<el-button v-perms="['task.task_calendar']" type="primary" link> <el-button v-perms="['task.task_calendar']" type="primary" link>
<router-link <router-link
:to="{ :to="{
@ -111,6 +140,12 @@
@success="getLists" @success="getLists"
@close="showEdit = false" @close="showEdit = false"
/> />
<money
ref="moneyRef"
v-if="moneyShow"
@success="getLists"
@close="moneyShow = false"
></money>
</div> </div>
</template> </template>
@ -126,11 +161,15 @@ import feedback from "@/utils/feedback";
import EditPopup from "./edit.vue"; import EditPopup from "./edit.vue";
import { dictDataLists } from "@/api/setting/dict"; import { dictDataLists } from "@/api/setting/dict";
import { getRoutePath } from "@/router"; import { getRoutePath } from "@/router";
import money from "./money.vue";
const datalist = ref([]); const datalist = ref([]);
const editRef = shallowRef<InstanceType<typeof EditPopup>>(); const editRef = shallowRef<InstanceType<typeof EditPopup>>();
const moneyRef = shallowRef<InstanceType<typeof money>>();
// //
const showEdit = ref(false); const showEdit = ref(false);
//
const moneyShow = ref(false);
// //
const queryParams = reactive({ const queryParams = reactive({
@ -164,6 +203,15 @@ const handleAdd = async () => {
await nextTick(); await nextTick();
editRef.value?.open("add"); editRef.value?.open("add");
}; };
//
const moneyAdd = async (obj: any) => {
moneyShow.value = true;
await nextTick();
moneyRef.value?.open(obj.money ? "edit" : "add");
moneyRef.value?.setFormData(obj);
};
const changeStatus = (data: any) => { const changeStatus = (data: any) => {
apiTaskSchedulingEdit({ apiTaskSchedulingEdit({
id: data.id, id: data.id,

View File

@ -0,0 +1,94 @@
<template>
<div class="edit-popup">
<popup
ref="popupRef"
:title="popupTitle"
:async="true"
width="500px"
@confirm="handleSubmit"
@close="handleClose"
>
<el-form ref="formRef" :model="formData" :rules="formRules">
<el-form-item label="金额" prop="money">
<el-input
v-model="formData.money"
type="number"
clearable
placeholder="请输入公司每天最多的金额"
>
<template #append></template>
</el-input>
</el-form-item>
</el-form>
</popup>
</div>
</template>
<script lang="ts" setup name="taskSchedulingEdit">
import type { FormInstance } from "element-plus";
import Popup from "@/components/popup/index.vue";
import {
apiTaskSchedulingAdd,
apiTaskSchedulingEdit,
apiTaskSchedulingEditMoney,
} from "@/api/task_scheduling";
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");
//
const popupTitle = computed(() => {
return mode.value == "edit" ? "编辑任务公司金额" : "新增任务公司金额";
});
//
const formData = reactive({
id: "",
money: "",
});
const setFormData = (e) => {
Object.keys(formData).forEach((key) => {
if (e[key] != null && e[key] != undefined) {
formData[key] = e[key];
}
});
};
//
const formRules = reactive<any>({
money: {
required: true,
message: "请输入正确金额",
trigger: "change",
},
});
//
const handleSubmit = async () => {
await formRef.value?.validate();
const data = { ...formData };
await apiTaskSchedulingEditMoney(data);
popupRef.value?.close();
emit("success");
};
//
const open = (type = "add") => {
mode.value = type;
popupRef.value?.open();
};
//
const handleClose = () => {
emit("close");
};
defineExpose({
open,
setFormData,
});
</script>

View File

@ -1,199 +1,251 @@
<template> <template>
<div class="edit-popup"> <div class="edit-popup">
<popup <popup
ref="popupRef" ref="popupRef"
:title="popupTitle" :title="popupTitle"
:async="true" :async="true"
width="550px" width="550px"
@confirm="handleSubmit" @confirm="handleSubmit"
@close="handleClose" @close="handleClose"
> >
<el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules"> <el-form
<el-form-item label="主题" prop="title"> ref="formRef"
<el-input v-model="formData.title" clearable placeholder="请输入主题" /> :model="formData"
</el-form-item> label-width="90px"
<el-form-item label="金额" prop="moeny"> :rules="formRules"
<el-input v-model="formData.money" clearable placeholder="请输入金额" /> >
</el-form-item> <el-form-item label="主题" prop="title">
<el-form-item label="一阶天数"> <el-input
<el-input v-model="formData.title"
v-model="formData.stage_day_one" clearable
clearable placeholder="请输入主题"
placeholder="请输入天数" />
type="number" </el-form-item>
> <el-form-item label="阶段类型" prop="types">
<template #append></template> <el-select
</el-input> v-model="formData.types"
</el-form-item> clearable
<el-form-item label="一阶比例"> placeholder="请输入阶段类型"
<el-input >
v-model="formData.proportion_one" <el-option
clearable v-for="item in [
placeholder="请输入比例" { label: 1, name: '循环' },
type="number" { label: 2, name: '长期' },
> { label: 3, name: '单次' },
<template #append>%</template> ]"
</el-input> :key="item.label"
</el-form-item> :value="item.label"
<el-form-item label="二阶天数"> :label="item.name"
<el-input />
v-model="formData.stage_day_two" </el-select>
clearable </el-form-item>
placeholder="请输入天数" <el-form-item label="一阶段天数">
type="number" <el-input
> v-model="formData.stage_day_one"
<template #append></template> clearable
</el-input> placeholder="请输入天数"
</el-form-item> type="number"
<el-form-item label="二阶比例"> >
<el-input <template #append></template>
v-model="formData.proportion_two" </el-input>
clearable </el-form-item>
placeholder="请输入比例" <el-form-item label="一阶段金额">
type="number" <el-input
> v-model="formData.money"
<template #append>%</template> clearable
</el-input> placeholder="请输入金额"
</el-form-item> type="number"
<el-form-item label="任务类型" prop="type"> >
<el-select v-model="formData.type" clearable placeholder="请输入任务类型"> <template #append></template>
<el-option </el-input>
v-for="item in datalist" </el-form-item>
:key="item.label" <el-form-item label="二阶段天数">
:value="item.id" <el-input
:label="item.name" v-model="formData.stage_day_two"
/> clearable
</el-select> placeholder="请输入天数"
</el-form-item> type="number"
<el-form-item label="状态" prop="status"> >
<el-radio-group v-model="formData.status"> <template #append></template>
<el-radio :label="1">显示</el-radio> </el-input>
<el-radio :label="0">隐藏</el-radio> </el-form-item>
</el-radio-group>
</el-form-item> <el-form-item label="二阶段金额">
<el-form-item label="任务描述" prop="content"> <el-input
<el-input v-model="formData.content" clearable placeholder="请输入任务描述" /> v-model="formData.money_two"
</el-form-item> clearable
</el-form> placeholder="请输入金额"
</popup> type="number"
</div> >
<template #append></template>
</el-input>
</el-form-item>
<el-form-item label="长期金额" v-if="+formData.types == 2">
<el-input
v-model="formData.money_three"
clearable
placeholder="请输入金额"
type="number"
>
<template #append></template>
</el-input>
</el-form-item>
<el-form-item label="任务类型" prop="type">
<el-select
v-model="formData.type"
clearable
placeholder="请输入任务类型"
>
<el-option
v-for="item in datalist"
:key="item.label"
:value="item.id"
:label="item.name"
/>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :label="1">显示</el-radio>
<el-radio :label="0">隐藏</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="任务描述" prop="content">
<el-input
v-model="formData.content"
clearable
placeholder="请输入任务描述"
/>
</el-form-item>
</el-form>
</popup>
</div>
</template> </template>
<script lang="ts" setup name="taskTemplateEdit"> <script lang="ts" setup name="taskTemplateEdit">
import type { FormInstance } from 'element-plus' import type { FormInstance } from "element-plus";
import Popup from '@/components/popup/index.vue' import Popup from "@/components/popup/index.vue";
import { apiTaskTemplateAdd, apiTaskTemplateEdit, apiTaskTemplateDetail } from '@/api/task_template' import {
import { timeFormat } from '@/utils/util' apiTaskTemplateAdd,
import type { PropType } from 'vue' apiTaskTemplateEdit,
import { dictDataLists } from '@/api/setting/dict' apiTaskTemplateDetail,
} from "@/api/task_template";
import { timeFormat } from "@/utils/util";
import type { PropType } from "vue";
import { dictDataLists } from "@/api/setting/dict";
defineProps({ defineProps({
dictData: { dictData: {
type: Object as PropType<Record<string, any[]>>, type: Object as PropType<Record<string, any[]>>,
default: () => ({}) default: () => ({}),
} },
}) });
const emit = defineEmits(['success', 'close']) const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>() const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>() const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref('add') const mode = ref("add");
const datalist = ref([]) const datalist = ref([]);
// //
const popupTitle = computed(() => { const popupTitle = computed(() => {
return mode.value == 'edit' ? '编辑任务模板' : '新增任务模板' return mode.value == "edit" ? "编辑任务模板" : "新增任务模板";
}) });
// //
const formData = reactive({ const formData = reactive({
id: '', id: "",
title: '', company_id: "",
admin_id: '', title: "",
money: '', admin_id: "",
type: '', type: "",
status: '', status: "",
content: '', content: "",
stage_day_one: 0, stage_day_one: 0,
proportion_one: 0, money: 0, //
stage_day_two: 9999, stage_day_two: 0,
proportion_two: 0 money_two: 0, //
}) money_three: 0, //
types: "", //
});
// //
dictDataLists({ type_id: 10 }).then((res) => { dictDataLists({ type_id: 10 }).then((res) => {
datalist.value = res.lists datalist.value = res.lists;
}) });
// //
const formRules = reactive<any>({ const formRules = reactive<any>({
title: [ title: [
{ {
required: true, required: true,
message: '请输入主题', message: "请输入主题",
trigger: ['blur'] trigger: ["blur"],
} },
], ],
admin_id: [ admin_id: [
{ {
required: true, required: true,
message: '请输入创建人', message: "请输入创建人",
trigger: ['blur'] trigger: ["blur"],
} },
], ],
type: [ type: [
{ {
required: true, required: true,
message: '请输入任务类型', message: "请输入任务类型",
trigger: ['blur'] trigger: ["blur"],
} },
], ],
status: [ status: [
{ {
required: true, required: true,
message: '请选择状态', message: "请选择状态",
trigger: ['blur'] trigger: ["blur"],
} },
] ],
}) });
// //
const setFormData = async (data: Record<any, any>) => { const setFormData = async (data: Record<any, any>) => {
for (const key in formData) { for (const key in formData) {
if (data[key] != null && data[key] != undefined) { if (data[key] != null && data[key] != undefined) {
//@ts-ignore //@ts-ignore
formData[key] = data[key] formData[key] = data[key];
}
} }
} }
};
const getDetail = async (row: Record<string, any>) => { const getDetail = async (row: Record<string, any>) => {
const data = await apiTaskTemplateDetail({ const data = await apiTaskTemplateDetail({
id: row.id id: row.id,
}) });
setFormData(data) setFormData(data);
} };
// //
const handleSubmit = async () => { const handleSubmit = async () => {
await formRef.value?.validate() await formRef.value?.validate();
const data = { ...formData } const data = { ...formData };
mode.value == 'edit' ? await apiTaskTemplateEdit(data) : await apiTaskTemplateAdd(data) mode.value == "edit"
popupRef.value?.close() ? await apiTaskTemplateEdit(data)
emit('success') : await apiTaskTemplateAdd(data);
} popupRef.value?.close();
emit("success");
};
// //
const open = (type = 'add') => { const open = (type = "add") => {
mode.value = type mode.value = type;
popupRef.value?.open() popupRef.value?.open();
} };
// //
const handleClose = () => { const handleClose = () => {
emit('close') emit("close");
} };
defineExpose({ defineExpose({
open, open,
setFormData, setFormData,
getDetail getDetail,
}) });
</script> </script>

View File

@ -1,186 +1,248 @@
<template> <template>
<div> <div>
<el-card class="!border-none mb-4" shadow="never"> <el-card class="!border-none mb-4" shadow="never">
<el-form <el-form class="mb-[-16px] formtabel" :model="queryParams" inline>
class="mb-[-16px] formtabel" <el-form-item label-width="100px" label="主题" prop="title">
:model="queryParams" <el-input
inline class="w-[280px]"
> v-model="queryParams.title"
<el-form-item label-width="100px" label="主题" prop="title"> clearable
<el-input class="w-[280px]" v-model="queryParams.title" clearable placeholder="请输入主题" /> placeholder="请输入主题"
</el-form-item> />
<el-form-item label-width="100px" label="创建人" prop="admin_id"> </el-form-item>
<el-input class="w-[280px]" v-model="queryParams.admin_id" clearable placeholder="请输入创建人" /> <el-form-item label-width="100px" label="创建人" prop="admin_id">
</el-form-item> <el-input
<el-form-item label-width="100px" label="金额" prop="money"> class="w-[280px]"
<el-input class="w-[280px]" v-model="queryParams.money" clearable placeholder="请输入金额" /> v-model="queryParams.admin_id"
</el-form-item> clearable
<el-form-item label-width="100px" label="任务类型" prop="type"> placeholder="请输入创建人"
<el-select v-model="queryParams.type" clearable placeholder="请输入任务类型" > />
<el-option </el-form-item>
v-for="item in datalist" <el-form-item label-width="100px" label="金额" prop="money">
:key="item.label" <el-input
:value="item.id" class="w-[280px]"
:label="item.name" v-model="queryParams.money"
/> clearable
</el-select> placeholder="请输入金额"
</el-form-item> />
<el-form-item label-width="100px" label="状态" prop="status"> </el-form-item>
<el-select v-model="queryParams.status" clearable placeholder="请选择状态"> <el-form-item label-width="100px" label="任务类型" prop="type">
<el-option <el-select
v-for="item in statusdata" v-model="queryParams.type"
:key="item.label" clearable
:value="item.id" placeholder="请输入任务类型"
:label="item.name" >
/> <el-option
</el-select> v-for="item in datalist"
</el-form-item> :key="item.label"
<el-form-item label-width="100px" label="任务描述" prop="content"> :value="item.id"
<el-input class="w-[280px]" v-model="queryParams.content" clearable placeholder="请输入任务描述" /> :label="item.name"
</el-form-item> />
<el-form-item label-width="100px" label=""> </el-select>
<el-button class="el-btn" type="primary" @click="resetPage">查询</el-button> </el-form-item>
<el-button @click="resetParams">重置</el-button> <el-form-item label-width="100px" label="状态" prop="status">
</el-form-item> <el-select
</el-form> v-model="queryParams.status"
</el-card> clearable
<el-card class="!border-none" v-loading="pager.loading" shadow="never"> placeholder="请选择状态"
<el-button v-perms="['task_template.task_template/add']" type="primary" @click="handleAdd"> >
<template #icon> <el-option
<icon name="el-icon-Plus" /> v-for="item in statusdata"
</template> :key="item.label"
新增 :value="item.id"
</el-button> :label="item.name"
<el-button />
</el-select>
</el-form-item>
<el-form-item label-width="100px" label="任务描述" prop="content">
<el-input
class="w-[280px]"
v-model="queryParams.content"
clearable
placeholder="请输入任务描述"
/>
</el-form-item>
<el-form-item label-width="100px" label="">
<el-button class="el-btn" type="primary" @click="resetPage"
>查询</el-button
>
<el-button @click="resetParams">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
<el-button
v-perms="['task_template.task_template/add']"
type="primary"
@click="handleAdd"
>
<template #icon>
<icon name="el-icon-Plus" />
</template>
新增
</el-button>
<el-button
v-perms="['task_template.task_template/delete']"
:disabled="!selectData.length"
@click="handleDelete(selectData)"
>
删除
</el-button>
<div class="mt-4">
<el-table :data="pager.lists" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column
label="ID"
width="80"
prop="id"
show-overflow-tooltip
/>
<el-table-column label="主题" prop="title" show-overflow-tooltip />
<el-table-column
label="创建人"
prop="admin_name"
show-overflow-tooltip
/>
<el-table-column label="金额" prop="money" show-overflow-tooltip />
<el-table-column
label="任务类型"
prop="type_name"
show-overflow-tooltip
/>
<el-table-column label="状态" show-overflow-tooltip>
<template #default="{ row }">
<span>{{ row.status == 1 ? "显示" : "隐藏" }}</span>
</template>
</el-table-column>
<el-table-column
label="任务描述"
prop="content"
show-overflow-tooltip
/>
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button
v-perms="['task_template.task_template/edit']"
type="primary"
link
@click="handleEdit(row)"
>
编辑
</el-button>
<el-button
v-perms="['task_template.task_template/delete']" v-perms="['task_template.task_template/delete']"
:disabled="!selectData.length" type="danger"
@click="handleDelete(selectData)" link
> @click="handleDelete(row.id)"
>
删除 删除
</el-button> </el-button>
<div class="mt-4"> </template>
<el-table :data="pager.lists" @selection-change="handleSelectionChange"> </el-table-column>
<el-table-column type="selection" width="55" /> </el-table>
<el-table-column label="主题" prop="title" show-overflow-tooltip /> </div>
<el-table-column label="创建人" prop="admin_name" show-overflow-tooltip /> <div class="flex mt-4 justify-end">
<el-table-column label="金额" prop="money" show-overflow-tooltip /> <pagination v-model="pager" @change="getLists" />
<el-table-column label="任务类型" prop="type_name" show-overflow-tooltip /> </div>
<el-table-column label="状态" show-overflow-tooltip> </el-card>
<template #default="{ row }"> <edit-popup
<span>{{row.status==1?'显示':"隐藏"}}</span> v-if="showEdit"
</template> ref="editRef"
</el-table-column> :dict-data="dictData"
<el-table-column label="任务描述" prop="content" show-overflow-tooltip /> @success="getLists"
<el-table-column label="操作" width="120" fixed="right"> @close="showEdit = false"
<template #default="{ row }"> />
<el-button </div>
v-perms="['task_template.task_template/edit']"
type="primary"
link
@click="handleEdit(row)"
>
编辑
</el-button>
<el-button
v-perms="['task_template.task_template/delete']"
type="danger"
link
@click="handleDelete(row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="flex mt-4 justify-end">
<pagination v-model="pager" @change="getLists" />
</div>
</el-card>
<edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
</div>
</template> </template>
<script lang="ts" setup name="taskTemplateLists"> <script lang="ts" setup name="taskTemplateLists">
import { usePaging } from '@/hooks/usePaging' import { usePaging } from "@/hooks/usePaging";
import { useDictData } from '@/hooks/useDictOptions' import { useDictData } from "@/hooks/useDictOptions";
import { apiTaskTemplateLists, apiTaskTemplateDelete } from '@/api/task_template' import {
import { timeFormat } from '@/utils/util' apiTaskTemplateLists,
import feedback from '@/utils/feedback' apiTaskTemplateDelete,
import EditPopup from './edit.vue' } from "@/api/task_template";
import { timeFormat } from "@/utils/util";
import feedback from "@/utils/feedback";
import EditPopup from "./edit.vue";
import { dictDataLists } from "@/api/setting/dict"; import { dictDataLists } from "@/api/setting/dict";
const editRef = shallowRef<InstanceType<typeof EditPopup>>() const editRef = shallowRef<InstanceType<typeof EditPopup>>();
const datalist=ref([]) const datalist = ref([]);
// //
const showEdit = ref(false) const showEdit = ref(false);
const route = useRoute();
// //
const queryParams = reactive({ const queryParams = reactive({
title: '', id: "", //id
admin_id: '', company_id: "",
money: '', title: "",
type: '', admin_id: "",
status: '', money: "",
content: '' type: "",
}) status: "",
const statusdata=reactive([ content: "",
{id:1,name:"显示"}, });
{id:2,name:"隐藏"} if (route.query?.id) queryParams.id = route.query.id;
]) if (route.query?.company_id) queryParams.company_id = route.query.company_id;
const statusdata = reactive([
{ id: 1, name: "显示" },
{ id: 2, name: "隐藏" },
]);
// //
const selectData = ref<any[]>([]) const selectData = ref<any[]>([]);
// //
const handleSelectionChange = (val: any[]) => { const handleSelectionChange = (val: any[]) => {
selectData.value = val.map(({ id }) => id) selectData.value = val.map(({ id }) => id);
} };
// //
const { dictData } = useDictData('') const { dictData } = useDictData("");
// //
const { pager, getLists, resetParams, resetPage } = usePaging({ const { pager, getLists, resetParams, resetPage } = usePaging({
fetchFun: apiTaskTemplateLists, fetchFun: apiTaskTemplateLists,
params: queryParams params: queryParams,
}) });
// //
const handleAdd = async () => { const handleAdd = async () => {
showEdit.value = true showEdit.value = true;
await nextTick() await nextTick();
editRef.value?.open('add') editRef.value?.open("add");
} editRef.value?.setFormData({ company_id: queryParams.company_id });
};
// //
const handleEdit = async (data: any) => { const handleEdit = async (data: any) => {
showEdit.value = true showEdit.value = true;
await nextTick() await nextTick();
editRef.value?.open('edit') editRef.value?.open("edit");
editRef.value?.setFormData(data) editRef.value?.setFormData(data);
} };
// //
const handleDelete = async (id: number | any[]) => { const handleDelete = async (id: number | any[]) => {
await feedback.confirm('确定要删除?') await feedback.confirm("确定要删除?");
await apiTaskTemplateDelete({ id }) await apiTaskTemplateDelete({ id });
getLists() getLists();
} };
// //
dictDataLists({ type_id: 10 }).then((res) => { dictDataLists({ type_id: 10 }).then((res) => {
datalist.value = res.lists; datalist.value = res.lists;
}); });
getLists() getLists();
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.formtabel{ .formtabel {
.el-form-item{ .el-form-item {
width: 20%; width: 20%;
.el-btn{ .el-btn {
margin-left: 60px; margin-left: 60px;
}
} }
}
} }
</style> </style>