[update 标准解读流程]

This commit is contained in:
danshihao
2024-07-09 09:50:02 +08:00
parent 982039700f
commit ba2f572d9f
9 changed files with 1165 additions and 377 deletions
@@ -1,5 +1,4 @@
<template>
<internal-detail-page :title="pageTitle" :content-padding="0" :loading="loading">
<!-- 标题右侧tab -->
<template v-slot:titleRightCustom>
@@ -19,7 +18,7 @@
<a-form :form="processInfoForm">
<a-row>
<a-col :span="12">
<!-- 流程名称 自动生成规则标准编号-标准名称-法规符合性排查 -->
<!-- 流程名称 -->
<a-form-item
:labelCol="$i18n.locale === EN ? labelColEn : labelCol"
:wrapperCol="$i18n.locale === EN ? wrapperColEn : wrapperCol"
@@ -41,7 +40,7 @@
<a-date-picker :placeholder="$t('pleaseSelect') + $t('expirationDate')"
style="width: 100%"
:disabled="disabled"
value-format="YYYY-MM-DD"
value-format="YYYY-MM-DD hh:mm:ss"
v-decorator="['dueTime']" />
</a-form-item>
</a-col>
@@ -59,99 +58,19 @@
v-decorator="['prcMes']" />
</a-form-item>
</a-col>
<a-col v-if="[2, 3, 4, 5, 6, 7, 8, 9].includes(currentNode)" :span="24">
<!-- 标准编号/标准名称 -->
<a-form-item
:labelCol="$i18n.locale === EN ? longLabelColEn : longLabelCol"
:wrapperCol="$i18n.locale === EN ? longWrapperColEn : longWrapperCol"
:label="$t('standardNumber') + '/' + $t('standardName')"
:colon="formItemColon">
<a-input :placeholder="$t('pleaseEnter') + $t('standardNumber') + '/' + $t('standardName')"
disabled
v-decorator="['standardNumberName']" />
</a-form-item>
</a-col>
<a-col v-if="[2, 3, 4, 6, 7, 8, 9].includes(currentNode)" :span="24">
<!-- 适用市场 -->
<a-form-item
:labelCol="$i18n.locale === EN ? longLabelColEn : longLabelCol"
:wrapperCol="$i18n.locale === EN ? longWrapperColEn : longWrapperCol"
:label="$t('applicableMarket')"
:colon="formItemColon">
<a-input :placeholder="$t('pleaseEnter') + $t('applicableMarket')"
disabled
v-decorator="['applicableMarket']" />
</a-form-item>
</a-col>
</a-row>
</a-form>
<!-- 业务基本信息 -->
<div class="process-part-title">{{ $t('basicServiceInformation') }}</div>
<div v-if="!disabled" class="table-operator">
<!-- 添加标准 -->
<a-button icon="plus" type="primary" @click="handleAddStandard">
{{$t('workCenter.standardInterpretationProcess.addStandard')}}
</a-button>
<!-- 选择条款 -->
<a-button icon="plus" type="primary" @click="handleSelectClause">
{{$t('workCenter.standardInterpretationProcess.selectStandard')}}
</a-button>
</div>
<div class="table-container">
<j-table
:can-drag="true"
:scroll="{x: '100%'}"
ref="table"
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="false"
:loading="loading">
<template v-slot:decompositionSource="{text, record}">
<a-select v-model="record.decompositionSource"
@change="handleChangeDecompositionSource"
:placeholder="$t('pleaseSelect') + $t('workCenter.standardInterpretationProcess.decompositionOrderSource')"
style="width: 100%;">
<a-select-option v-for="item in decompositionSourceList"
:disabled="item.isDisabled === '1'"
:key="item.value" :value="item.value">
{{ item.text || item.title }}
</a-select-option>
</a-select>
</template>
</j-table>
</div>
<template v-if="showClauseTable">
<div v-if="!disabled" class="table-operator">
<!-- 批量删除条款 -->
<a-button icon="delete" type="danger" ghost @click="handleClauseBatchDel">
{{ $t('batchDelete') }}
</a-button>
</div>
<j-table
:can-drag="true"
:scroll="{x: '100%'}"
ref="table"
rowKey="uuid"
:columns="clauseColumns"
:dataSource="clauseDataSource"
:pagination="clauseIpagination"
:row-selection="{ selectedRowKeys: selectedClauseRowKeys, onChange: onSelectClauseChange }"
:loading="loading">
<!--条文内容-->
<template slot="item_content" slot-scope="{text, record}">
<div class="table-text" style="cursor: pointer" v-if="text || text === 0" @click="showContent('item_content', text,record)">
{{ text && text !== 'null' ? text.replace(/<.*?>/ig, ' ') : '' }}
</div>
<div class="table-text" v-else>{{ global.emptyLine }}</div>
</template>
<!-- 业务信息 -->
<!-- 发起节点 -->
<interpretation-initiate v-if="isInitiate" :disabled="disabled" ref="businessComp"/>
<!-- 主控部门联络人分发 -->
<interpretation-liaison-distribute v-if="currentNodeId === StandardInterpretationNodes.controlDepartLiaisonDistribution.value"
:disabled="disabled" ref="businessComp"/>
<!-- 主解读人分发 -->
<interpretation-main-interpreter-distribute v-if="currentNodeId === StandardInterpretationNodes.standardInterpreterDistribution.value"
:disabled="disabled" ref="businessComp"/>
<template v-slot:action="{text, record}">
<a @click="handleClauseDelete(record.uuid)" class="table-ope-btn">{{ $t('delete') }}</a>
</template>
</j-table>
</template>
<!-- 流程审批信息 -->
<div class="process-part-title">{{ $t('processApprovalInformation') }}</div>
<a-form :form="approvalInfoForm">
@@ -177,25 +96,19 @@
<!-- 操作按钮 -->
<div class="detail-page-bottom-operate-box">
<!-- 转办 -->
<a-button type="primary" ghost :loading="loading" @click="handleTurnTo" icon="arrow-up">{{ $t('turnTo') }}</a-button>
<a-button v-if="btn.includes('transfer')" type="primary" ghost :loading="loading" @click="handleTurnTo" icon="arrow-up">{{ $t('turnTo') }}</a-button>
<!-- 保存 -->
<a-button type="primary" ghost :loading="loading" @click="handleSave"><i class="iconfont icon-save"></i> {{ $t('preservation') }}</a-button>
<a-button v-if="btn.includes('save')" type="primary" ghost :loading="loading" @click="handleSave"><i class="iconfont icon-save"></i> {{ $t('preservation') }}</a-button>
<!-- 同意 -->
<a-button type="primary" :loading="loading" @click="handleAgree" icon="check-circle">{{ $t('agree') }}</a-button>
<a-button v-if="btn.includes('agree')" type="primary" :loading="loading" @click="handleAgree" icon="check-circle">{{ $t('agree') }}</a-button>
<!-- 提交 -->
<a-button type="primary" :loading="loading" @click="handleSubmit" icon="upload">{{ $t('submit') }}</a-button>
<a-button v-if="btn.includes('submit')" type="primary" :loading="loading" @click="handleSubmit" icon="upload">{{ $t('submit') }}</a-button>
<!-- 驳回 -->
<a-button type="primary" :loading="loading" @click="handleReject" icon="close-circle">{{ $t('reject') }}</a-button>
<a-button v-if="btn.includes('reject')" type="primary" :loading="loading" @click="handleReject" icon="close-circle">{{ $t('reject') }}</a-button>
</div>
<!--条文内容-->
<split-clause-detail ref="splitClauseDetail" />
<!-- 添加标准弹框-只选择已拆分的数据 -->
<standard-selection-modal ref="selectStandardRef"
type="radio"
@listChange="handleAddStandardCallback"
:canSelectedSource="[StandardSource.FOREIGN.value]"
disabledSourceSearch/>
<!--转办选人-->
<user-select-modal ref="userSelectModal" check-required @change="continueTurnTo" />
</internal-detail-page>
</template>
@@ -204,23 +117,32 @@ import ProcessDetailList from '@comp/ProcessDetailList'
import InternalDetailPage from '@comp/InternalDetailPage'
import PersonnelInfo from '@comp/PersonnelInfo'
import { WorkCenterMixin } from '@/mixins/WorkCenterMixin'
import { ProcessKey, StandardInterpretationNodes, StandardSource } from '@/enums/commonEnums'
import StandardSelectionModal from '@comp/selection/StandardSelectionModal'
import {
interpretGetFileByStandardId,
interpretGetClauseList,
ApprovalOpinions,
ProcessKey,
ProcessType,
StandardInterpretationNodes,
StandardSource
} from '@/enums/commonEnums'
import {
interpretGetProjectId,
interpretGetDetail, interpretFlowStart
interpretGetDetail, interpretFlowStart, interpretFlowApproval
} from '@api/workCenter'
import { randomUUID } from '@/utils/util'
import SplitClauseDetail from '@views/documentTool/documentSplit/modules/SplitClauseDetail'
import InterpretationInitiate from '@views/workCenter/standardInterpretationProcess/modules/InterpretationInitiate'
import UserSelectModal from '@comp/selection/UserSelectModal'
import InterpretationLiaisonDistribute
from '@views/workCenter/standardInterpretationProcess/modules/InterpretationLiaisonDistribute'
import InterpretationMainInterpreterDistribute
from '@views/workCenter/standardInterpretationProcess/modules/InterpretationMainInterpreterDistribute'
const tabList = ['base', 'user']
export default {
name: 'StandardInterpretationProcess',
components: { SplitClauseDetail, StandardSelectionModal, PersonnelInfo, InternalDetailPage, ProcessDetailList },
components: { InterpretationMainInterpreterDistribute, InterpretationLiaisonDistribute, UserSelectModal, InterpretationInitiate, PersonnelInfo, InternalDetailPage, ProcessDetailList },
mixins: [WorkCenterMixin],
data () {
return {
StandardInterpretationNodes,
EN: 'en-us',
processKey: ProcessKey.STANDARD_INTERPRETATION_PROCESS.value,
StandardSource,
@@ -229,9 +151,9 @@ export default {
disabled: false,
// 项目id
projectId: '',
currentNode: 1, // 当前节点
currentNodeName: '',
currentNodeId: StandardInterpretationNodes.initiated.value, // 当前节点id
btn: [], // 当前节点显示的按钮
model: {},
approvalInfoForm: this.$form.createForm(this),
processInfoForm: this.$form.createForm(this),
@@ -280,112 +202,13 @@ export default {
validateTrigger: 'blur'
}
},
// region 标准表格
columns: [
{ // 标准编号
title: this.$t('standardNumber'),
align: 'center',
width: 180,
dataIndex: 'standardNumber',
scopedSlots: { customRender: 'text' }
},
{ // 标准名称
title: this.$t('standardName'),
align: 'center',
width: 180,
dataIndex: 'standardName',
scopedSlots: { customRender: 'text' }
},
{ // 标准状态
title: this.$t('standardState'),
align: 'center',
width: 180,
dataIndex: 'standardState_dictText',
scopedSlots: { customRender: 'text' }
},
{ // 分解单来源
title: this.$t('workCenter.standardInterpretationProcess.decompositionOrderSource'),
align: 'center',
width: 180,
dataIndex: 'decompositionSource_dictText',
scopedSlots: { customRender: 'decompositionSource' }
},
{ // 实施日期
title: this.$t('implementationDate'),
align: 'center',
width: 180,
dataIndex: 'implementationDate',
scopedSlots: { customRender: 'text' }
},
{ // 新生产车实施日期
title: this.$t('newProductionVehicleImplementationDate'),
align: 'center',
width: 180,
dataIndex: 'newProductionImplementation',
scopedSlots: { customRender: 'text' }
},
{ // 新认证车实施日期
title: this.$t('newCertifiedVehicleImplementationDate'),
align: 'center',
width: 180,
dataIndex: 'newCerImplementDate',
scopedSlots: { customRender: 'text' }
}
],
dataSource: [],
decompositionSourceList: [], // 标准分解单下拉
showClauseTable: false,
clauseColumns: [
{ // 标准编号/条款号
title: this.$t('standardNumber') + '/' + this.$t('clauseNo'),
align: 'center',
width: 180,
dataIndex: 'itemNum',
scopedSlots: { customRender: 'text' }
},
{ // 标准名称/条款标题
title: this.$t('standardName') + '/' + this.$t('clauseTitle'),
align: 'center',
width: 180,
dataIndex: 'itemTitle',
scopedSlots: { customRender: 'text' }
},
{ // 条款内容
title: this.$t('clauseContent'),
align: 'center',
width: 180,
dataIndex: 'itemContent',
scopedSlots: { customRender: 'text' }
},
{ // 操作
title: this.$t('operation'),
fixed: 'right',
width: 150,
scopedSlots: { customRender: 'action' }
}
],
clauseDataSource: [],
/* 分页参数 */
clauseIpagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['10', '30', '50', '100', '150', '200'],
showTotal: (total, range) => {
return range[0] + '-' + range[1] + ' ' + this.$t('total') + ' ' + total + ' ' + this.$t('strip')
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
selectedClauseRowKeys: [],
// endregion
info: {}
}
},
computed: {
// 是否发起节点
isInitiate () {
return this.currentNode === StandardInterpretationNodes.initiated.value
return this.currentNodeId === StandardInterpretationNodes.initiated.value
},
// 页面标题
pageTitle () {
@@ -395,10 +218,10 @@ export default {
created () {
const { projectId, nodeId, taskName } = this.$route.query
// 发起、草稿进来没有nodeId,就默认发起节点
this.currentNode = nodeId || StandardInterpretationNodes.initiated.value
this.currentNodeId = nodeId || StandardInterpretationNodes.initiated.value
this.currentNodeName = taskName || StandardInterpretationNodes.initiated.text
this.projectId = projectId || ''
// this.btn = StandardInterpretationNodes.propertyOfValue('btn', this.currentNode) || []
this.btn = StandardInterpretationNodes.propertyOfValue('btn', this.currentNodeId) || []
// 查询人员信息
this.getPersonInfoStructure(this.processKey, () => {
this.initPersonInfoData(this.isInitiate)
@@ -437,6 +260,23 @@ export default {
commitText: processApprovalRecord.commitText,
commitFile: processApprovalRecord.commitFile
})
// 业务组件内自己处理回显数据
this.$nextTick(() => {
this.$refs.businessComp.setData(data)
})
// 草稿状态回显
if (draftId) {
const infoJson = JSON.parse(data.infoJsonStr || '{}')
console.log('草稿回显', JSON.parse(data.infoJsonStr || '{}'))
// 节点1 回显人员信息
if (this.isInitiate) {
this.draftInitPersonInfo(infoJson.personInfo)
}
// 回显业务信息,如果有标识属性就是强制撤回
if (Object.hasOwnProperty.call(infoJson, 'revocation')) {
}
}
}
}).finally(() => {
this.loading = false
@@ -465,41 +305,34 @@ export default {
// 获取页面参数
async getPageParams (isValidate = true) {
// 去除备注必填
// this.validatorRules.remarks.rules[0].required = false
this.validatorRules.commitText.rules[0].required = false
// 报错标记(base基本信息校验失败,user人员信息校验失败)
let flag = ''
const base = 'base'
const user = 'user'
if (isValidate && this.dataSource.length === 0) {
this.$message.warning(this.$t('addAtLeastOneRowOfData'))
if (!flag) {
flag = base
}
}
const params = {}
// 收集所有表单信息
// 收集流程信息和流程审批信息
let formDataList = []
if (isValidate) {
formDataList = await this.validateFormList(this.processInfoForm, this.approvalInfoForm).catch(() => {
if (!flag) {
flag = base
}
if (!flag) { flag = base }
// 空数组防止后续操作报错
return []
})
} else {
formDataList = [
this.processInfoForm.getFieldsValue(),
this.approvalInfoForm.getFieldsValue()
]
formDataList = [this.processInfoForm.getFieldsValue(), this.approvalInfoForm.getFieldsValue()]
// 保存清空校验
this.approvalInfoForm.validateFields(['commitText'], { force: true }, () => {})
}
// 收集业务组件的数据(组件内部校验提示)
const compData = await this.$refs.businessComp.getData(isValidate)
// 组件内校验失败
if (!flag && compData._flag) { flag = base }
// 收集人员信息
const personInfo = this.getPersonInfo(isValidate && !flag)
if (!personInfo) {
flag = user
}
if (!personInfo) { flag = user }
// 开始处理信息
// 流程信息
@@ -507,7 +340,7 @@ export default {
projectId: this.projectId,
nodeId: this.$route.query.nodeId,
taskId: this.$route.query.taskId,
prcType: 2
prcType: ProcessType.STANDARD_INTERPRETATION_PROCESS.value
})
// 处理其他参数
@@ -526,15 +359,23 @@ export default {
// draftData: params.processEsInspectPlanList
// })
// }
params.data = {
processStandardInterpret: {
projectId: this.projectId,
standardId: this.dataSource[0].id,
// 主解读人
masterInterpretId: params.map.masterInterpret,
decompositionSource: this.decompositionSource
},
processStandardInterpretClauseList: this.clauseDataSource
params.data = {}
// 发起节点
if (this.isInitiate) {
// 选择的标准数据
params.data.processStandardInterpret = Object.assign({}, compData.standardData[0], {
projectId: this.projectId
})
// 条款列表
params.data.processStandardInterpretClauseList = compData.clauseData
} else if (this.currentNodeId === StandardInterpretationNodes.controlDepartLiaisonDistribution.value) {
// 联络人分发节点
params.data.processStandardInterpret = Object.assign({}, this.info.data.processStandardInterpret, compData.formData, {
projectId: this.projectId
})
// 条款列表
params.data.processStandardInterpretClauseList = compData.clauseData
}
// 如果有校验失败的,那就报错
if (flag) {
@@ -542,17 +383,93 @@ export default {
}
return params
},
// 转办
/**
* 转办弹框
*/
handleTurnTo () {
this.$refs.userSelectModal.open()
},
// 转办
continueTurnTo (userId) {
// if (this.loading) return
// this.loading = true
// const params = {
// taskId: this.$route.query.taskId,
// userId
// }
// transferInspectPlan(params).then(res => {
// if (res.success) {
// this.$message.success(res.message)
// this.goBack()
// } else {
// this.$message.warn(res.message)
// }
// }).catch(() => {
// this.loading = false
// }).finally(() => {
// setTimeout(() => {
// this.loading = false
// }, 1000)
// })
},
// 保存
handleSave () {
if (this.loading) return
this.loading = true
this.getPageParams(false).then(res => {
// 1待办 2草稿
res.saveSource = (this.$route.query.draftId || !this.$route.query.projectId) ? 2 : 1
console.log(res)
// return saveInspectPlan(res)
}).then(res => {
// if (res.success) {
// this.$message.success(res.message)
// this.goBack()
// } else {
// this.$message.warn(res.message)
// }
}).catch((err) => {
console.log(err)
this.loading = false
}).finally(() => {
setTimeout(() => {
this.loading = false
}, 1000)
})
},
// 同意
handleAgree () {
handleAgree (isSubmitBtn) {
if (this.loading) return
this.loading = true
this.getPageParams().then(res => {
res.map.pass = true
// 不是提交按钮
if (isSubmitBtn !== true) {
// 没有填写注释,就默认同意
if (!res.processApprovalRecord.commitText) {
res.processApprovalRecord.commitText = '同意'
}
// 审批意见
res.processApprovalRecord.commitFlag = ApprovalOpinions.AGREE.value
}
return interpretFlowApproval(res)
}).then(res => {
if (res.success) {
this.$message.success(res.message)
this.goBack()
} else {
this.$message.warn(res.message)
}
}).catch((err) => {
if (err && err.message && tabList.includes(err.message)) {
this.switchChange(err.message)
}
this.loading = false
}).finally(() => {
setTimeout(() => {
this.loading = false
}, 1000)
})
},
// 提交
handleSubmit () {
@@ -575,7 +492,7 @@ export default {
}
}).catch((err) => {
console.log(err)
if (err && err.message) {
if (err && err.message && tabList.includes(err.message)) {
this.switchChange(err.message)
}
this.loading = false
@@ -587,122 +504,45 @@ export default {
},
// 驳回
handleReject () {
},
// 添加标准
handleAddStandard () {
this.$refs.selectStandardRef.open()
},
// 选择条款
handleSelectClause () {
// 请添加一条标准
if (!this.dataSource.length) {
this.$message.warning(this.$t('workCenter.standardInterpretationProcess.pleaseAddStandard'))
if (this.loading) return
// 备注设置必填并校验(校验第一次正常,第二次校验就不提示,force配置项解决问题)
this.validatorRules.commitText.rules[0].required = true
this.$nextTick(() => {
this.approvalInfoForm.validateFields(['commitText'], { force: true }, (err) => {
if (err) {
this.switchChange('base')
}
})
})
// 驳回需要填写备注
if (!this.approvalInfoForm.getFieldValue('commitText')) {
this.$message.warning(this.$t('pleaseEnterRemarks'))
return
}
// 请选择分解单来源
if (!this.dataSource[0].decompositionSource) {
this.$message.warning(this.$t('pleaseSelect') + this.$t('workCenter.standardInterpretationProcess.decompositionOrderSource'))
return
}
this.showClauseTable = true
this.loading = true
interpretGetClauseList({
standardId: this.dataSource[0].id,
fileType: this.dataSource[0].decompositionSource
this.getPageParams().then(res => {
res.map.pass = false
// 审批意见
res.processApprovalRecord.commitFlag = ApprovalOpinions.REJECT.value
// return rejectInspectPlan(res)
}).then(res => {
if (res.success) {
this.clauseDataSource = (res.result || []).map(item => {
item.uuid = randomUUID()
return item
})
// if (res.success) {
// this.$message.success(res.message)
// this.goBack()
// } else {
// this.$message.warn(res.message)
// }
}).catch((err) => {
if (err && err.message && tabList.includes(err.message)) {
this.switchChange(err.message)
}
}).finally(() => {
this.loading = false
}).finally(() => {
setTimeout(() => {
this.loading = false
}, 1000)
})
},
// 选择完标准回调
handleAddStandardCallback (list) {
console.log(list)
this.dataSource = list || []
if (this.dataSource.length) {
interpretGetFileByStandardId({ standardId: this.dataSource[0].id }).then(res => {
if (res.success) {
this.decompositionSourceList = res.result || []
}
})
}
},
// 修改分解单来源
handleChangeDecompositionSource (val) {
this.decompositionSource = val
const find = this.decompositionSourceList.find(item => item.value === val)
if (find) {
this.dataSource.decompositionSource_dictText = find.text || find.title
}
},
// 条款批量删除
handleClauseBatchDel () {
if (this.selectedClauseRowKeys.length <= 0) {
this.$message.warning(this.$t('selectARecord'))
} else {
const that = this
this.$confirm({
title: this.$t('confirmBatchDeletion'),
content: this.$t('deleteAData'),
onOk: () => {
this.clauseDataSource = this.clauseDataSource.filter(item => !this.selectedClauseRowKeys.includes(item.uuid))
this.selectedClauseRowKeys = []
// 重新计算分页问题
that.handleClauseReCalculatePage(that.selectedClauseRowKeys.length)
}
})
}
},
// 条款删除
handleClauseDelete (id) {
const that = this
this.$confirm({
title: this.$t('confirmDeletion'),
content: this.$t('areYouSure'),
onOk: () => {
const index = this.clauseDataSource.findIndex(item => item.uuid === id)
if (index !== -1) {
this.clauseDataSource.splice(index, 1)
}
if (that.clauseIpagination.current > 1 && ((that.clauseIpagination.current - 1) * that.clauseIpagination.pageSize) + 1 === that.clauseIpagination.total) {
that.clauseIpagination.current -= 1
}
}
})
},
// 删除后计算分页
handleClauseReCalculatePage (count) {
// 总数量-count
const total = this.clauseIpagination.total - count
// 获取删除后的分页数
const currentIndex = Math.ceil(total / this.clauseIpagination.pageSize)
// 删除后的分页数<所在当前页
if (currentIndex < this.clauseIpagination.current) {
this.clauseIpagination.current = currentIndex
}
},
// 勾选条款
onSelectClauseChange (keys) {
this.selectedClauseRowKeys = keys
},
/**
* 显示条款内容、条文解读弹框
* @param fieldName
* @param val
*/
showContent (fieldName, val) {
const title = (this.columns.find(tt => tt.dbFieldName === fieldName) || {}).dbFieldTxt
if (title) {
this.$refs.splitClauseDetail.title = title
}
this.$refs.splitClauseDetail.open(val)
},
/**
* 验证所有表单
* @param formList - 多个需要校验的表单实例
@@ -732,7 +572,5 @@ export default {
<style scoped lang="less">
@import '~@assets/less/common.less';
.table-container {
margin-bottom: 20px;
}
</style>