|
|
@@ -0,0 +1,570 @@
|
|
|
+<template>
|
|
|
+ <!-- 加班申请单-详情改造 发起入驻申请(要调用接口的)-->
|
|
|
+ <el-dialog
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ title="发起入驻申请"
|
|
|
+ top="50px"
|
|
|
+ width="75%"
|
|
|
+ :append-to-body="true"
|
|
|
+ :before-close="closeDialog"
|
|
|
+ class="statistic_base"
|
|
|
+ :modal-append-to-body="true"
|
|
|
+ custom-class="tagdialog"
|
|
|
+ >
|
|
|
+ <div class="tabsdom">
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="入驻申请" name="first">
|
|
|
+ <el-row type="flex" justify="end">
|
|
|
+ <el-col :span="3" class="col-txt"><span>流程编号:</span></el-col>
|
|
|
+ <el-col :span="6" class="col-input"><span style="font-size: 14px">{{ formData.flowNum }}</span></el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form
|
|
|
+ ref="elForm"
|
|
|
+ :model="formData"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="150px"
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-card shadow="always" style="padding: 15px 5px 5px 15px">
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="标题" prop="title">
|
|
|
+ <el-input v-model="formData.title" placeholder="" readonly />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="创建人">
|
|
|
+ <el-input v-model="userinfo.truename" placeholder="创建人" readonly />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="创建部门">
|
|
|
+ <el-input v-model="userinfo.deptName" placeholder="创建部门" readonly />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="房屋">
|
|
|
+ <el-input v-model="formData.houseName" placeholder="创建部门" readonly />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="说明">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.payRemark"
|
|
|
+ :autosize="{minRows: 4, maxRows: 4}"
|
|
|
+ :style="{width: '100%'}"
|
|
|
+ placeholder="请填写"
|
|
|
+ type="textarea"
|
|
|
+ maxlength="2000"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="相关附件">
|
|
|
+ <el-upload
|
|
|
+ :disabled="true"
|
|
|
+ :action="$constant.BASE_URI+'/FileController/upload'"
|
|
|
+ :file-list="formData.fileUrlList"
|
|
|
+ :http-request="uploadFile"
|
|
|
+ class="upload-demo"
|
|
|
+ multiple
|
|
|
+ :limit="6"
|
|
|
+ :before-upload="$common.beforeUploadJustWordExcel"
|
|
|
+ >
|
|
|
+ <el-button size="small" type="primary">上传附件</el-button>
|
|
|
+ <div slot="file" slot-scope="{file}">
|
|
|
+ <a :href="file.url">{{ file.name }}</a>
|
|
|
+ <span class="el-upload-list__item-actions">
|
|
|
+ <i class="el-icon-delete" @click="handlePictureRemove(file,formData.fileUrlList)" />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <h3>流程历史</h3>
|
|
|
+ <div class="tableDom">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ :header-cell-style="{
|
|
|
+ background:'#1890FF !important',
|
|
|
+ color:'white'
|
|
|
+ }"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column fixed label="序号" type="index" width="60" />
|
|
|
+ <el-table-column
|
|
|
+ label="节点名称"
|
|
|
+ prop="nodeName"
|
|
|
+ width="180"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="处理人"
|
|
|
+ prop="auditUserName"
|
|
|
+ width="180"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="审核结果"
|
|
|
+ prop="auditResultString"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="审核意见"
|
|
|
+ prop="auditContent"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="发起/审核时间"
|
|
|
+ prop="createdAt"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ $common.transTime(scope.row.createdAt) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="流程图" name="second">
|
|
|
+ <payment-canvas id="paymanetDetail" ref="PaymentCanvas" />
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="closeDialog">关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { upload } from '@/static/utils/channel'
|
|
|
+import Base from '@/views/base/base'
|
|
|
+import BaseData from '@/views/base/baseData'
|
|
|
+import UserSelect from '@/views/components/UserSelect'
|
|
|
+import * as echarts from 'echarts'
|
|
|
+import PaymentCanvas from '@/views/workflow/components/myProcess/paymentCanvas.vue'
|
|
|
+
|
|
|
+const lineStyle = {
|
|
|
+ color: '#00116a',
|
|
|
+ width: 2
|
|
|
+
|
|
|
+}
|
|
|
+const redLinestyle = {
|
|
|
+ color: 'red',
|
|
|
+ width: 2
|
|
|
+}
|
|
|
+const applyAddWorkTime = { useTime: 0 }
|
|
|
+export default {
|
|
|
+ name: 'ApplyPay',
|
|
|
+ components: {
|
|
|
+ PaymentCanvas,
|
|
|
+ upload,
|
|
|
+ UserSelect
|
|
|
+ },
|
|
|
+ mixins: [Base, BaseData],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ row: {},
|
|
|
+ argeeBackStatus: false,
|
|
|
+ argeeNoStatus: false,
|
|
|
+ tableData: [],
|
|
|
+ flowHistroy: [],
|
|
|
+ confirmForm: {
|
|
|
+ confirmContent: ''
|
|
|
+ },
|
|
|
+ dc_key: ['ANSWER_NEED'],
|
|
|
+ ProjectData: [],
|
|
|
+ dialogVisible: false,
|
|
|
+ applyAddWorkTime: [{ ...applyAddWorkTime }],
|
|
|
+ formData: {
|
|
|
+ proId: '',
|
|
|
+ totalAddTime: 0,
|
|
|
+ applyReasons: '',
|
|
|
+ position: '',
|
|
|
+ applyAddWorkTime: [
|
|
|
+ {
|
|
|
+ useTime: 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+
|
|
|
+ userinfo: {},
|
|
|
+ activeName: 'first',
|
|
|
+ rules: {
|
|
|
+ title: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入标题',
|
|
|
+ trigger: 'change'
|
|
|
+ }],
|
|
|
+ applyPayMoney: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入申请金额（小写）',
|
|
|
+ trigger: 'change'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ applyPayMoneyUppercase: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入申请金额（大写）',
|
|
|
+ trigger: 'change'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ positionOptions: [
|
|
|
+ {
|
|
|
+ 'label': '公司',
|
|
|
+ 'value': 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'label': '客户处',
|
|
|
+ 'value': 2
|
|
|
+ }, {
|
|
|
+ 'label': '居家',
|
|
|
+ 'value': 3
|
|
|
+ }]
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {
|
|
|
+ 'applyAddWorkTime': {
|
|
|
+ deep: true,
|
|
|
+ handler(newValue, oldValue) {
|
|
|
+ let totalAddTime = 0
|
|
|
+ for (let i = 0; i < this.applyAddWorkTime.length; i++) {
|
|
|
+ if (this.applyAddWorkTime[i].useTime === 0 || this.applyAddWorkTime[i].useTime) {
|
|
|
+ totalAddTime = totalAddTime + Number(this.applyAddWorkTime[i].useTime)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(totalAddTime)
|
|
|
+ this.changeAddWorkTime(totalAddTime.toFixed(1))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initDict(this.dc_key).then((res) => {
|
|
|
+ })
|
|
|
+ // this.initProject({ /* signstatus: '2,3'*/ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handlePictureRemove(file, fileUrlList) {
|
|
|
+ var index = fileUrlList.indexOf(file)
|
|
|
+ fileUrlList.splice(index, 1)
|
|
|
+ },
|
|
|
+ uploadFile: function(param) {
|
|
|
+ const _this = this
|
|
|
+ upload(param, true).then((res) => {
|
|
|
+ _this.formData.fileUrlList.push(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ swapper(n) {
|
|
|
+ // console.log('ddd',n)
|
|
|
+ if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)) { return '数据非法' }
|
|
|
+ var unit = '千百拾亿千百拾万千百拾元角分'; var str = ''
|
|
|
+ n += '00'
|
|
|
+ var p = n.indexOf('.')
|
|
|
+ if (p >= 0) { n = n.substring(0, p) + n.substr(p + 1, 2) }
|
|
|
+ unit = unit.substr(unit.length - n.length)
|
|
|
+ for (var i = 0; i < n.length; i++) { str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i) }
|
|
|
+ // console.log('end',str.replace(/零(千|百|拾|角)/g, '零').replace(/(零)+/g, '零').replace(/零(万|亿|元)/g, '$1').replace(/(亿)万|壹(拾)/g, '$1$2').replace(/^元零?|零分/g, '').replace(/元$/g, '元整'))
|
|
|
+ this.formData.applyPayMoneyUppercase = str.replace(/零(千|百|拾|角)/g, '零').replace(/(零)+/g, '零').replace(/零(万|亿|元)/g, '$1').replace(/(亿)万|壹(拾)/g, '$1$2').replace(/^元零?|零分/g, '').replace(/元$/g, '元整')
|
|
|
+
|
|
|
+ // console.log('end',this.formData.applyPayMoneyUppercase)
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ closeDialog() {
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.$emit('close')
|
|
|
+ },
|
|
|
+ handleClick(tab, event) {
|
|
|
+ if (this.activeName == 'second') this.$refs.PaymentCanvas.createNodeCanvas(this.row)
|
|
|
+ },
|
|
|
+ async getIMGFlowHistroyByFlowMainId(row) {
|
|
|
+ console.log(row)
|
|
|
+ // return
|
|
|
+ const { data } = await this.baseRequest1('FlowMainController', 'getIMGFlowHistroyByFlowMainId', { flowMainId: row.id })
|
|
|
+ console.log(data)
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ switch (data[i].nodeKey) {
|
|
|
+ case 'curr_user':
|
|
|
+ if (i == 0 && data[i].type == 1) {
|
|
|
+ // 审核人审核
|
|
|
+ this.node[0].symbol = 'image://' + require('../asste/lanfangkuai.png')
|
|
|
+ }
|
|
|
+
|
|
|
+ break
|
|
|
+ case 'dept_superior_1_0_1':
|
|
|
+ if (i == 0 && data[i].type == 3) {
|
|
|
+ this.node[0].symbol = 'image://' + require('../asste/huangfanmgkuai.png')
|
|
|
+ }
|
|
|
+ if (i == 0 && data[i].type == 1) {
|
|
|
+ this.node[0].symbol = 'image://' + require('../asste/lanfangkuai.png')
|
|
|
+ }
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ createNodeCanvas() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const chartDom = document.getElementById('containeraddworkdetail')
|
|
|
+ var myCharts = echarts.init(chartDom)
|
|
|
+ const charts = {
|
|
|
+ nodes: this.node,
|
|
|
+ linesData: this.linesData
|
|
|
+ }
|
|
|
+ const option = {
|
|
|
+ xAxis: {
|
|
|
+ min: 0,
|
|
|
+ max: 600,
|
|
|
+ padding: [0, 50, 0, 50],
|
|
|
+ show: false,
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ min: 0,
|
|
|
+ max: 450,
|
|
|
+ show: false,
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 50,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ top: 0
|
|
|
+ },
|
|
|
+
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'graph',
|
|
|
+ coordinateSystem: 'cartesian2d',
|
|
|
+ symbol: 'rect',
|
|
|
+ symbolSize: [80, 40],
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgb(225,7,7)'
|
|
|
+ },
|
|
|
+ symbolOffset: [10, 0],
|
|
|
+ // force: {
|
|
|
+ // edgeLength: 100,//连线的长度
|
|
|
+ // repulsion: 200 //子节点之间的间距
|
|
|
+ // },
|
|
|
+
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: 'white' // 节点文字颜色
|
|
|
+ },
|
|
|
+
|
|
|
+ data: charts.nodes
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ type: 'lines',
|
|
|
+ polyline: false,
|
|
|
+ coordinateSystem: 'cartesian2d',
|
|
|
+ symbol: ['', 'arrow'],
|
|
|
+ symbolSize: 10,
|
|
|
+ data: charts.linesData
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ ]
|
|
|
+
|
|
|
+ }
|
|
|
+ myCharts.clear()
|
|
|
+
|
|
|
+ myCharts.setOption(option)
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ myCharts.resize()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectCommonPhrases(e) {
|
|
|
+ if (!this.confirmForm.confirmContent) this.confirmForm.confirmContent = ''
|
|
|
+ this.confirmForm.confirmContent += e
|
|
|
+ },
|
|
|
+ changeAddWorkTime(totalAddTime) {
|
|
|
+ this.formData.totalAddTime = totalAddTime
|
|
|
+ },
|
|
|
+ async getUserInfo(applyUser) {
|
|
|
+ const { data: userinfo } = await this.baseRequest1('ApplyCheckInController', 'getUserInfoByUserId', { userId: applyUser })
|
|
|
+ this.userinfo = userinfo
|
|
|
+ console.log(this.userinfo)
|
|
|
+ },
|
|
|
+ spliceListRow(index) {
|
|
|
+ this.formData.workTimeList.splice(index, 1)
|
|
|
+ },
|
|
|
+ async setVisible(status, row) {
|
|
|
+ this.row = row
|
|
|
+ this.activeName = 'first'
|
|
|
+ this.getUserInfo(row.applyUser)
|
|
|
+ this.confirmForm.flowMainPushId = row.flowMainPushId
|
|
|
+ const { data } = await this.baseRequest1('ApplyCheckInController', 'getInfoByFlowMainId', { flowMainId: row.id })
|
|
|
+ const { data: flowHistroy } = await this.baseRequest1('FlowMainController', 'getFlowHistroyByFlowMainId', { flowMainId: row.id })
|
|
|
+ this.tableData = flowHistroy
|
|
|
+ this.formData = data
|
|
|
+ if (this.formData.isNoContract || this.formData.isNoContract == 0) {
|
|
|
+ this.formData.isNoContract = String(this.formData.isNoContract)
|
|
|
+ }
|
|
|
+ if (data.fileDataIds) {
|
|
|
+ const { data: fileTaoTaoList } = await this.baseRequest1('FileZtController', 'findFileInfoByIds/' + data.fileDataIds, '')
|
|
|
+ console.log(fileTaoTaoList.data)
|
|
|
+ this.formData.fileUrlList = fileTaoTaoList.data.map((e) => {
|
|
|
+ return {
|
|
|
+ url: this.$constant.BASE_URI + '/FileController/download/' + e.id,
|
|
|
+ name: e.fileName,
|
|
|
+ data: e.id,
|
|
|
+ uid: new Date().getTime()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(this.formData.fileUrlList)
|
|
|
+ } else {
|
|
|
+ this.formData.fileUrlList = []
|
|
|
+ }
|
|
|
+ // this.applyAddWorkTime = data.applyAddWorkTimeList.map((e) => {
|
|
|
+ // return {
|
|
|
+ // useTime: e.useTime,
|
|
|
+ // startDay: this.$common.transDate(e.startDay),
|
|
|
+ // startTime: this.$common.transMinute(e.startTime),
|
|
|
+ // endTime: this.$common.transMinute(e.endTime)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+
|
|
|
+ this.dialogVisible = status
|
|
|
+ this.row = row
|
|
|
+ },
|
|
|
+ baseRequest1(prefix, opUrl, postData) {
|
|
|
+ return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
|
|
|
+ },
|
|
|
+
|
|
|
+ async handelConfirm() {
|
|
|
+ this.dialogVisible = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+#containeraddworkdetail {
|
|
|
+ height: 600px;
|
|
|
+ width: 100%;
|
|
|
+ background: #F5F5F5;
|
|
|
+}
|
|
|
+
|
|
|
+.cclist {
|
|
|
+ .col-input {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.pdr10px {
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.mgb10px {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.mb25 {
|
|
|
+ margin-bottom: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.pdtopbottom16 {
|
|
|
+ padding: 0px 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.pdtop16px {
|
|
|
+ padding-top: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.cost_form {
|
|
|
+ .col-input {
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item__label .moneydetails {
|
|
|
+ text-align: right;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 微软雅黑;
|
|
|
+ padding-right: 10px;
|
|
|
+ line-height: 40px;
|
|
|
+ word-break: keep-all;
|
|
|
+ white-space: nowrap;
|
|
|
+ color: #606266;
|
|
|
+ text-rendering: optimizeLegibility;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .moneydetails {
|
|
|
+ text-align: right;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 微软雅黑;
|
|
|
+ padding-right: 10px;
|
|
|
+ word-break: keep-all;
|
|
|
+ white-space: nowrap;
|
|
|
+ color: #606266;
|
|
|
+ text-rendering: optimizeLegibility;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .moneydetails:before {
|
|
|
+ content: "*";
|
|
|
+ color: #ff4949;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.txtc {
|
|
|
+ text-align: center
|
|
|
+}
|
|
|
+
|
|
|
+.ml5 {
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.eltype {
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.tabsdom {
|
|
|
+ .el-input {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tabs__header {
|
|
|
+ text-align: center !important;
|
|
|
+ width: 139px !important;
|
|
|
+ text-align: center !important;
|
|
|
+ display: block !important;
|
|
|
+ margin: auto !important;
|
|
|
+ margin-bottom: 15px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tabs__nav-wrap::after {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-upload {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.feeMoneyTotal {
|
|
|
+ width: 100%;
|
|
|
+ height: 14px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #1890FF;
|
|
|
+ margin-top: 31px;
|
|
|
+ margin-bottom: 13px;
|
|
|
+}
|
|
|
+</style>
|
