<template>
|
<!-- `.clients-wrapper` fills all available space of container -->
|
<Row>
|
<h4 class="d-flex flex-wrap justify-content-between align-items-center pt-2 mb-2">
|
<div class="mb-2">人员管理</div>
|
<div class="mb-2" style="max-width: 200px;">
|
</div>
|
<div class="clearfix mb-2">
|
<div class="fr mb10">
|
<b-dd variant="primary" text="下载模板" :right="isRTL">
|
<b-dd-item :href="stuDowmload" download="学生模板">
|
学生模板
|
</b-dd-item>
|
<b-dd-item :href="teaDowmload" download="教师模板">
|
教师模板
|
</b-dd-item>
|
</b-dd>
|
<!-- <b-dd variant="primary" text="批量导入" :right="isRTL">
|
<b-dd-item @click="handleUpdateTem('stu')">学生模板</b-dd-item>
|
<b-dd-item @click="handleUpdateTem('tea')">教师模板</b-dd-item>
|
</b-dd> -->
|
<fButton type="primary" @click.native="handleUpdateTem" authority="sys:personnel:import">
|
批量导入
|
</fButton>
|
<fButton type="warning" @click.native="handleAdd" authority="sys:personnel:add">
|
添加
|
</fButton>
|
</div>
|
</div>
|
</h4>
|
<Col :span="6">
|
<b-card style="margin-right: 10px;">
|
<PersonnelTree ref="tree" :data="treeList" @currentNode="currentNode" />
|
</b-card>
|
</Col>
|
<Col :span="18">
|
<b-card>
|
<div class="row overflow-hidden" :class="{'clients-sidebox-open': sideboxOpened, 'messages-sidebox-open': sideboxOpen}">
|
<!-- `.clients-content` fills all available space of `clients-wrapper` -->
|
<div :class="sideboxOpened?'col-md-8 col-lg-9':'col-12'">
|
|
<!-- Header -->
|
<!-- :options="allNodeOptions" -->
|
<div class="fl mb10">
|
<b-form-radio-group
|
id="btnradios2"
|
buttons
|
button-variant="outline-primary"
|
v-model="allNode"
|
name="radioBtnOutline"
|
class="mr10"
|
>
|
<b-form-radio
|
v-for="(iteam,index) in allNodeOptions"
|
:key="index"
|
:value="iteam"
|
v-b-tooltip.hover
|
:title="iteam === '当前机构'?'选中后，只查询本机构人员，不查询下属机构':''"
|
>{{iteam}}</b-form-radio>
|
</b-form-radio-group>
|
<span class="ml10">类别：</span>
|
<b-form-select v-model="selectType" :options="peoType" value-field="currentValue" text-field="lable" style="width: 160px; display: inline-block" />
|
<span class="ml10">姓名：</span>
|
<b-form-input autocomplete="off" style="width: 200px; display: inline-block" id="search" v-model="searchValue" @keyup.enter.native="handleSearch" />
|
<b-btn variant="primary" @click="handleSearch">
|
<span class="fas fa-search"></span>
|
搜 索
|
</b-btn>
|
</div>
|
<!-- 机构变更 start -->
|
<fTemplate class="fr" authority="sys:personnel:editOrg" >
|
<b-form-checkbox
|
v-model="isCheckAll"
|
:value="true"
|
:unchecked-value="false">
|
选择全部用户
|
</b-form-checkbox>
|
<b-btn
|
@click="handleEditOrg"
|
variant="success"
|
>
|
<span class="fas fa-edit pr5"></span>机构变更
|
</b-btn>
|
</fTemplate>
|
<!-- 机构变更 end -->
|
<!-- / Header -->
|
|
<!-- Clients list -->
|
<div class="table-responsive pb10 ui-bordered">
|
<div>
|
<div class="row pt-3" style="margin-left: 0; margin-right: 0">
|
<div :key="item.id" v-for="item in tableList" class="col-md-6 col-xl-4 cursor-pointer pr" @click="selectClient(item)">
|
<b-card class="card-condenced mb-4" body-class="media align-items-center">
|
<img :src="`/httpImage/${item.photos}`" style="height: 100px" @error="imgOnError" />
|
<div class="media-body ml-3">
|
<a href="javascript:void(0)" class="text-dark font-weight-semibold mb-2">{{item.name}}</a>
|
</div>
|
<b-btn variant="outline-primary btn-round md-btn-flat" size="sm" class="d-block mr10" @click="selectClient(item)" v-if="!sideboxOpened">
|
详情
|
</b-btn>
|
<div @click.stop class="editOrg-check">
|
<b-form-checkbox
|
@change="(ischeck)=>{handleSelectionChange({ischeck,item})}"
|
:value="true"
|
:unchecked-value="false"/>
|
</div>
|
|
</b-card>
|
</div>
|
</div>
|
<div class="fr">
|
<b-pagination class="ml10 mr10 mb-0" v-if="total" size="md" :total-rows="total" v-model="currentPage" :per-page="length" @change="changePage" />
|
</div>
|
</div>
|
</div>
|
<!-- / Clients list -->
|
|
<!-- / .clients-content -->
|
</div>
|
<!-- Clients sidebox sideboxOpened -->
|
<div :class="sideboxOpened?'col-md-4 col-lg-3 pr':'pr'" style="top: 48px;">
|
|
<div class="clients-sidebox pr" style="background: none;">
|
<a @click.prevent="closeSidebox" href="#" class="mt5 clients-sidebox-close text-muted text-xlarge font-weight-light">
|
×
|
</a>
|
<perfect-scrollbar class="clients-scroll">
|
<div v-if="selected" class="pr5 mb50">
|
<b-card no-body class="mb-4">
|
<b-card-body>
|
|
<div class="media">
|
<img :src="`/httpImage/${selected.photos}`" class="ui-w-60 rounded-circle" style="height: 100%;" :onerror="errorImg" />
|
<div class="media-body pt-2 ml-3">
|
<h5 class="mb-2">{{selected.name}}</h5>
|
<div class="mt-3">
|
<fButton type="danger btn-round" size="sm" @click.native="handleDel(selected)" authority="sys:personnel:delete">
|
<span class="ion ion-ios-close"></span>
|
删除
|
</fButton>
|
|
<fButton type="default md-btn-flat btn-round" size="sm" @click.native="handleEdit(selected)" authority="sys:personnel:edit">
|
<i class="far fa-edit"></i>
|
编辑
|
</fButton>
|
|
</div>
|
</div>
|
</div>
|
</b-card-body>
|
<hr class="border-light m-0">
|
<b-card-body>
|
<div class="mb-2">
|
<span class="text-muted">性别:</span> {{selected.gender}}
|
</div>
|
<div class='mb-2'>
|
<span class="text-muted">身份证号:</span> {{selected.cardId}}
|
</div>
|
</b-card-body>
|
</b-card>
|
|
<b-card class="mb-4">
|
<div slot="header">
|
<div class="fl">关系</div>
|
<fButton type="warning md-btn-flat btn-round" class="fr" size="sm" @click.native="addRelation" authority="sys:personnel:relation">
|
<span class="fas fa-plus"></span>
|
添加关系
|
</fButton>
|
</div>
|
<!-- 展示 -->
|
<div class="media align-items-center pb-1 mb-3" v-for="item in relationList" :key="item.id">
|
<httpImg class="d-block ui-w-40 rounded-circle" :src="item.photos" />
|
<div class="media-body flex-truncate ml-3">
|
<a href="javascript:void(0)">{{item.name}}</a>
|
</div>
|
<div>
|
<b-btn variant="danger btn-round" size="sm" @click="deleteRelation(item)">
|
<span class="ion ion-ios-close"></span>
|
删除关系
|
</b-btn>
|
</div>
|
</div>
|
<!-- 编辑 -->
|
|
<div v-for="(item, index) in relationData" :key="item.id" class="relationship mb10">
|
<b-card-body>
|
<div class="media">
|
<img :src="`/httpImage/${item.photos}`" :onerror="errorImg" class="ui-w-60 rounded-circle" style="height: 100%;" />
|
<div class="media-body pt-2 ml-3">
|
<h5 class="mb-2">{{item.name}}</h5>
|
<div class="mt-3">
|
<b-btn variant="danger btn-round" size="sm" @click.stop="handleClickDel(index)">
|
<span class="ion ion-ios-close"></span>
|
删除
|
</b-btn>
|
|
</div>
|
</div>
|
</div>
|
</b-card-body>
|
<div class="pl10 pr10">
|
<hr class="border-light m-0">
|
</div>
|
<b-card-body>
|
<div class="mb-2 ">
|
<span class="text-muted">关系:</span>
|
<b-form-select v-model="item.relation" :options="options" size="sm" style="display: inline-block; width: 160px" />
|
</div>
|
<div class='mb-2'>
|
<span class="text-muted">手机号:</span> {{item.phone}}
|
</div>
|
</b-card-body>
|
</div>
|
<b-btn v-show="relationData.length" variant="primary btn-round" size="sm" class="fr" @click="handleSaveRelation">
|
保存
|
</b-btn>
|
</b-card>
|
</div>
|
</perfect-scrollbar>
|
</div>
|
</div>
|
<!-- / Clients sidebox -->
|
<input type="file" ref="file" id="file" @change="handleUpdateFile">
|
</div>
|
</b-card>
|
</Col>
|
<PersonnelFromRelation
|
:relationList="relationListAll"
|
:item="selected"
|
ref="fromRelation"
|
@relationData="getRelationData"
|
/>
|
<PersonnelTreeModel
|
:treeData="treeList"
|
:currentId="currentId"
|
:item="null"
|
ref="treeModel"
|
title="选择要变更的组织机构"
|
@submit="submitEditOrg"
|
/>
|
</Row>
|
<!-- / Clients wrapper -->
|
</template>
|
|
<!-- Page -->
|
<style src="@/vendor/styles/pages/clients.scss" lang="scss"></style>
|
|
<script>
|
import axios from 'axios'
|
import { Row, Col } from 'element-ui'
|
import { isOrg } from '../../components/common/util.js'
|
import PersonnelTree from './component/PersonnelTree'
|
import PersonnelTreeModel from '@/pages/Personnel/component/PersonnelTreeModel'
|
import PerfectScrollbar from '@/vendor/libs/perfect-scrollbar/PerfectScrollbar'
|
import {
|
userDel,
|
getPeoType,
|
getUserList,
|
relationAdd,
|
relationById,
|
excelDownload,
|
relationDel,
|
updatePersonToOrg
|
} from '../../server/personnel.js'
|
import { getOrgTree } from '../../server/project.js'
|
import PersonnelFromRelation from '../PersonnelForm/component/PersonnelFromRelation'
|
|
export default {
|
data: () => ({
|
errorImg: 'this.src="' + require('@/assets/img/noneImg.png') + '"',
|
allNodeOptions: ['全部', '当前机构'],
|
allNode: '全部',
|
searchValue: '',
|
selectType: '',
|
tableList: [],
|
currentPage: 1,
|
length: 12,
|
currentId: '',
|
currentName: '',
|
total: 0,
|
peoType: [],
|
treeList: [],
|
relationList: [],
|
item: {}, // 当前选择 type
|
selected: null,
|
sideboxOpened: false,
|
sideboxOpen: false,
|
relationData: [],
|
currentItem: null,
|
options: [
|
{
|
value: '父亲',
|
text: '父亲'
|
},
|
{
|
value: '母亲',
|
text: '母亲'
|
},
|
{
|
value: '其他亲属',
|
text: '其他亲属'
|
},
|
{
|
value: '团队成员',
|
text: '团队成员'
|
}
|
],
|
stuDowmload: `data/api-u/excel/excelDownload?access_token=${
|
JSON.parse(sessionStorage.getItem('loginedInfo')).access_token.split(
|
' '
|
)[1]
|
}&type=stu`,
|
teaDowmload: `data/api-u/excel/excelDownload?access_token=${
|
JSON.parse(sessionStorage.getItem('loginedInfo')).access_token.split(
|
' '
|
)[1]
|
}&type=tea`,
|
|
/* 组织机构变更 */
|
isCheckAll: false,
|
checkIds: []
|
}),
|
computed: {
|
orgId() {
|
return this.$store.getters.basicUserInfo.orgId
|
},
|
relationListAll() {
|
return [...this.relationList, ...this.relationData]
|
}
|
},
|
async mounted() {
|
await this._initTreeData()
|
await this._initPeoType()
|
await this._initData()
|
},
|
methods: {
|
// 初始化
|
async _initData(type = '') {
|
let orgId = this.orgId
|
if (this.currentItem) {
|
const isOrgResult = isOrg(this.currentItem.type)
|
orgId = isOrgResult ? this.currentItem.id : this.currentItem.orgId
|
}
|
const res = await getUserList({
|
orgId,
|
id: this.currentId || this.orgId,
|
start: this.length * (this.currentPage - 1),
|
length: this.length,
|
type: type || this.selectType,
|
name: this.searchValue,
|
// * 0 - 全部 1 - 当前
|
isAll: this.allNode === '全部' ? 0 : 1
|
})
|
if (res && res.data) {
|
this.total = res.total
|
this.tableList = [...res.data]
|
}
|
},
|
// * 搜索
|
handleSearch() {
|
this.currentPage = 1
|
this._initData()
|
},
|
// * 获取树
|
async _initTreeData() {
|
let res = await getOrgTree({ orgById: this.orgId })
|
if (res) {
|
this.treeList = res
|
if (this.$route.query.currentId) {
|
this.$refs.tree.setCurrentKey(this.$route.query.currentId)
|
this.currentId = this.$route.query.currentId
|
this.$nextTick(() => {
|
this.currentItem = this.$refs.tree.getCurrentNode()
|
this.currentName = this.currentItem.name
|
})
|
} else {
|
const { child, ...item } = res[0]
|
this.currentItem = item
|
this.$refs.tree.setCurrentKey(item.id)
|
this.currentId = item.id
|
this.currentName = this.currentItem.name
|
}
|
}
|
},
|
// * 初始化人员类型
|
async _initPeoType() {
|
let response = await getPeoType({
|
orgId: this.orgId,
|
type: 'PEO_TYPE'
|
})
|
if (response.code - 0 === 0 && response.data) {
|
let arr = [
|
{
|
lable: '全部',
|
currentValue: ''
|
}
|
]
|
response.data.map(item => {
|
let obj = {
|
lable: item.lable,
|
currentValue: item.lable
|
}
|
arr.push(obj)
|
})
|
this.peoType = [...arr]
|
if (this.peoType.length > 0) {
|
this.selectType = this.peoType[0].currentValue
|
}
|
}
|
},
|
// * 获取关系列表
|
async getRelationById(id) {
|
let res = await relationById({
|
orgId: this.orgId,
|
id
|
})
|
if (res && res.code - 0 === 0) {
|
this.relationList = res.data
|
} else {
|
this.relationList = []
|
}
|
},
|
// * 添加关系弹窗
|
addRelation() {
|
this.$refs.fromRelation.showModal()
|
},
|
// * 选择关系人
|
getRelationData(relationData) {
|
let arr = [...relationData]
|
arr.forEach(item => {
|
item.relation = ''
|
})
|
this.relationData = arr
|
},
|
// * 关系删除
|
handleClickDel(index) {
|
this.relationData.splice(index, 1)
|
},
|
// * 保存人员关系
|
async handleSaveRelation(index) {
|
let arr = []
|
this.relationData.map(item => {
|
arr.push({
|
orgId: this.orgId,
|
employeeId: this.selected.id,
|
relationoId: item.id,
|
relation: item.relation,
|
phone: item.phone
|
})
|
})
|
let res = await relationAdd(arr)
|
if (res || res.code - 0 === 0) {
|
this.$toast({
|
type: 'message',
|
message: '保存成功'
|
})
|
this.relationData = []
|
this.$refs.fromRelation.selected = []
|
this.getRelationById(this.selected.id)
|
} else {
|
this.$toast({
|
type: 'warning',
|
message: res.message
|
})
|
}
|
},
|
// * 添加
|
handleAdd() {
|
if (!this.currentId) {
|
this.$toast({
|
type: 'warning',
|
message: '请先选择一个机构'
|
})
|
return
|
}
|
const isOrgResult = isOrg(this.currentItem.type)
|
const officeId = this.currentItem.id
|
const currentId = isOrgResult
|
? this.currentItem.id
|
: this.currentItem.orgId
|
this.$router.push({
|
path: '/personnel/add',
|
query: {
|
officeId,
|
currentId,
|
currentName: this.currentName
|
}
|
})
|
},
|
// * 编辑
|
handleEdit({ id }) {
|
const isOrgResult = isOrg(this.currentItem.type)
|
const officeId = this.currentItem.id
|
const currentId = isOrgResult
|
? this.currentItem.id
|
: this.currentItem.orgId
|
this.$router.push({
|
path: '/personnel/add',
|
query: {
|
officeId,
|
currentId,
|
currentName: this.currentName,
|
employeeId: id
|
}
|
})
|
},
|
currentNode(node) {
|
this.currentItem = node
|
this.currentId = node.id
|
this.currentName = node.name
|
this._initData()
|
},
|
// * 修改人员信息
|
selectClient(client) {
|
this.selected = client
|
this.getRelationById(client.id)
|
this.sideboxOpened = true
|
this.relationData = []
|
},
|
closeSidebox() {
|
this.sideboxOpened = false
|
},
|
// * 分页器
|
changePage(e) {
|
this.currentPage = e
|
this._initData()
|
},
|
// 下载模板
|
async handleDownloadTem(type) {
|
await excelDownload({ type })
|
},
|
// 导入
|
async handleUpdateTem(type) {
|
if (!this.currentId) {
|
this.$toast({
|
type: 'warning',
|
message: '请先选择一个机构'
|
})
|
return
|
}
|
|
const isOrgResult = isOrg(this.currentItem.type)
|
const orgId = isOrgResult ? this.currentItem.id : this.currentItem.orgId
|
|
this.$router.push({
|
path: '/personnel/import'
|
})
|
const uploadInfo = {
|
orgId,
|
id: this.currentItem.id,
|
officeId: this.currentId,
|
officeName: this.currentItem.name
|
}
|
sessionStorage.setItem('uploadInfo', JSON.stringify(uploadInfo))
|
// await this.$refs.file.click()
|
},
|
async handleUpdateFile(e) {
|
let fd = new FormData()
|
const isOrgResult = isOrg(this.currentItem.type)
|
const orgId = isOrgResult ? this.currentItem.id : this.currentItem.orgId
|
fd.append('files', e.target.files[0])
|
fd.append('orgId', orgId)
|
fd.append('id', this.currentItem.id)
|
fd.append('officeId', this.currentId)
|
const token = JSON.parse(
|
sessionStorage.getItem('loginedInfo')
|
).access_token.split(' ')[1]
|
/* 开启loding */
|
this.$store.commit('HANDLE_LOADING_OPEN')
|
let res = await axios({
|
method: 'post',
|
url: `data/api-u/excel/importExcel?access_token=${token}`,
|
data: fd
|
})
|
if (res && res.data.code - 0 === 0) {
|
this.$toast({
|
type: 'success',
|
message: '上传成功'
|
})
|
this.$refs.file.value = ''
|
this._initData()
|
} else {
|
let errMsg = res.data && res.data.message ? res.data.message : ''
|
if (errMsg && Array.isArray(errMsg)) {
|
errMsg.map(item => {
|
this.$toast({
|
type: 'error',
|
message: item,
|
toastDuration: 3000
|
})
|
})
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '错误：' + errMsg,
|
toastDuration: 3000
|
})
|
}
|
this.$refs.file.value = ''
|
}
|
/* 关闭loding */
|
this.$store.commit('HANDLE_LOADING_CLOSE')
|
},
|
// * 删除
|
handleDel(param) {
|
this.$swal(
|
{
|
title: '确定删除吗？',
|
type: 'error',
|
showCancelButton: true,
|
allowOutsideClick: true,
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
closeOnConfirm: true
|
},
|
async () => {
|
let res = await userDel({
|
id: param.id
|
})
|
if (res && res.code - 0 === 0) {
|
this.$toast({
|
type: 'success',
|
message: '删除成功!'
|
})
|
this.sideboxOpened = false
|
// * 判断是否是最后一条数据
|
if (this.tableList.length === 1 && this.currentPage - 0 > 1) {
|
this.currentPage = this.currentPage - 1
|
}
|
this._initData()
|
} else {
|
this.$toast({
|
type: 'warning',
|
message: '删除失败!'
|
})
|
}
|
}
|
)
|
},
|
// * 删除关系
|
deleteRelation({ id, orgId }) {
|
this.$swal(
|
{
|
title: '确定删除吗？',
|
type: 'error',
|
showCancelButton: true,
|
allowOutsideClick: true,
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
closeOnConfirm: true
|
},
|
async () => {
|
let res = await relationDel({
|
id,
|
orgId
|
})
|
if (res && res.code - 0 === 0) {
|
this.$toast({
|
type: 'success',
|
message: '删除成功!'
|
})
|
this.sideboxOpened = false
|
this._initData()
|
} else {
|
this.$toast({
|
type: 'warning',
|
message: '删除失败!'
|
})
|
}
|
}
|
)
|
},
|
imgOnError(e) {
|
e.target.src = require('@/assets/img/noneImg.png')
|
},
|
|
/* 组织机构变更 start */
|
async updatePersonToOrg(data) {
|
const res = await updatePersonToOrg(data)
|
if (res && res.success) {
|
this.$refs.treeModel.hideModel()
|
/* 成功后刷新列表 */
|
this.checkIds = []
|
this.sideboxOpened = false
|
// * 判断是否是最后一条数据
|
if (this.tableList.length === 1 && this.currentPage - 0 > 1) {
|
this.currentPage = this.currentPage - 1
|
}
|
this._initData()
|
}
|
this.$toast({
|
type: res && res.success ? 'success' : 'error',
|
message: res && res.msg ? res.msg : '变更失败'
|
})
|
},
|
// 得到选择ids
|
handleSelectionChange({ ischeck, item }) {
|
if (!item || !item.id) {
|
return false
|
}
|
let set = new Set(this.checkIds)
|
if (ischeck) {
|
// 选中
|
set.add(item.id)
|
} else {
|
// 取消选中
|
set.delete(item.id)
|
}
|
this.checkIds = Array.from(set)
|
},
|
handleEditOrg() {
|
if (this.isCheckAll || this.checkIds.length) {
|
this.$refs.treeModel.showModel()
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '请选择需要变更的组织机构的用户'
|
})
|
}
|
},
|
// * 表单回调
|
submitEditOrg({ node }) {
|
if (node) {
|
// 变更前组织机构信息
|
const officeId = this.currentItem.id
|
const isOrgResult = isOrg(this.currentItem.type)
|
const orgId = isOrgResult ? this.currentItem.id : this.currentItem.orgId
|
// 将要变更的组织机构信息
|
const updateOfficeId = node.id
|
const isUpdateOrgResult = isOrg(node.type)
|
const updateOrgId = isUpdateOrgResult ? node.id : node.orgId
|
|
let dataJson = { orgId, updateOfficeId, updateOrgId }
|
if (this.isCheckAll) {
|
dataJson.officeId = officeId
|
this.$swal(
|
{
|
title: `确定将”${this.currentItem.name}“下全部人员移动到”${
|
node.name
|
}“吗？`,
|
type: 'warning',
|
showCancelButton: true,
|
allowOutsideClick: true,
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
closeOnConfirm: true
|
},
|
() => {
|
this.updatePersonToOrg(dataJson)
|
}
|
)
|
} else {
|
dataJson.employeeIds = this.checkIds.toString()
|
// 调用接口
|
this.updatePersonToOrg(dataJson)
|
}
|
}
|
}
|
/* 组织机构变更 end */
|
},
|
watch: {
|
selectType() {
|
this.currentPage = 1
|
this._initData()
|
},
|
allNode(val, oldVal) {
|
if (val !== oldVal) {
|
this._initData()
|
}
|
}
|
},
|
components: {
|
Row,
|
Col,
|
PersonnelTree,
|
PersonnelTreeModel,
|
PerfectScrollbar,
|
PersonnelFromRelation
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
#file {
|
position: absolute;
|
opacity: 0;
|
width: 0;
|
height: 0;
|
left: -9999px;
|
}
|
.clients-sidebox {
|
width: 100%;
|
height: 100%;
|
}
|
.relationship {
|
background: #f8f8f8;
|
border-radius: 5px;
|
}
|
.clients-sidebox-close {
|
left: 0.5rem;
|
}
|
.editOrg-check {
|
position: absolute;
|
right: 5px;
|
top: 15px;
|
}
|
</style>
|
