From 85ae9cd509bb142ee0ec9a828fd97036583b5535 Mon Sep 17 00:00:00 2001 From: wangsongsole Date: Tue, 14 Jun 2022 09:57:17 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E3=80=90=E8=90=A5=E9=94=80?= =?UTF-8?q?=E8=AE=A1=E5=88=92=E3=80=91=E7=AB=8B=E5=87=8F=E9=87=91=E5=95=86?= =?UTF-8?q?=E5=93=81=E7=9A=84=E5=AE=98=E6=96=B9=E4=BB=B7=E5=8F=96=E7=AB=8B?= =?UTF-8?q?=E5=87=8F=E9=87=91=E9=9D=A2=E9=A2=9D=EF=BC=8C=E8=AE=A2=E5=8D=95?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E7=9A=84=E6=88=90=E6=9C=AC=E4=BB=B7=E5=8F=96?= =?UTF-8?q?=E5=AE=98=E6=96=B9=E4=BB=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/order/list/list.js | 733 ++++++++++++++++++++--------------- 1 file changed, 430 insertions(+), 303 deletions(-) diff --git a/src/pages/order/list/list.js b/src/pages/order/list/list.js index 086d13fc..c141a862 100644 --- a/src/pages/order/list/list.js +++ b/src/pages/order/list/list.js @@ -1,19 +1,33 @@ -import ReactDOM from 'react-dom'; -import React, { Component } from 'react'; -import { Link } from "react-router-dom"; -import { Button, Notify, Select, Alert, CombinedDateRangePicker, Sweetalert, Icon } from 'zent'; -import "./list.less" -import "../../../assets/comm.css" -import Ipt from "../../../components/input/main" -import Grid from "../../../components/gird/main.js" -import TabPage from "../../../components/tabPage/main.js" -import Filterbar from "../../../components/filterbar/main.js" -import menu from "../../../assets/enum.js" -import { nowMonth, nowDay } from "../../../assets/comm.js"; -import { getOrderList, getOrderExport, handelResponse, putOrderSuccess, putOrderCancel } from "../../../assets/api.js" -var moment = require("moment"); -let day = moment(nowDay()).format("YYYY-MM-DD"); -let tomonth = moment(nowMonth()).format("YYYY-MM-DD"); +import ReactDOM from 'react-dom' +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { + Button, + Notify, + Select, + Alert, + CombinedDateRangePicker, + Sweetalert, + Icon +} from 'zent' +import './list.less' +import '../../../assets/comm.css' +import Ipt from '../../../components/input/main' +import Grid from '../../../components/gird/main.js' +import TabPage from '../../../components/tabPage/main.js' +import Filterbar from '../../../components/filterbar/main.js' +import menu from '../../../assets/enum.js' +import { nowMonth, nowDay } from '../../../assets/comm.js' +import { + getOrderList, + getOrderExport, + handelResponse, + putOrderSuccess, + putOrderCancel +} from '../../../assets/api.js' +var moment = require('moment') +let day = moment(nowDay()).format('YYYY-MM-DD') +let tomonth = moment(nowMonth()).format('YYYY-MM-DD') const options = [ { key: '1', @@ -37,13 +51,14 @@ const Column = [ title: '订单号', name: 'order_number', prop: 'order_number', - type: "normal", + type: 'normal', width: '100px' - }, { + }, + { title: '兑换码-批次ID', name: 'code_batch_id', prop: 'code_batch_id', - type: "normal", + type: 'normal', width: '100px' }, { @@ -51,101 +66,105 @@ const Column = [ prop: 'product_name', name: 'product_name', width: '120px', - type: "normal", - }, { + type: 'normal' + }, + { title: '官方价格', name: 'official_price', prop: 'official_price', - type: "normal", + type: 'normal', width: 'auto' }, { title: '合同价(成本价)', name: 'cost', - type: "slot", + type: 'slot', prop: 'cost', width: 'auto' }, { title: '分销商', name: 'reseller_name', - type: "normal", + type: 'normal', prop: 'reseller_name', - width: 'auto', - }, { + width: 'auto' + }, + { title: '归属营销计划', name: 'plan_title', prop: 'plan_title', width: 'auto', - type: "normal", + type: 'normal' }, { title: '购买数量', name: 'num', - type: "normal", + type: 'normal', prop: 'num', - width: 'auto', + width: 'auto' }, { title: '状态', name: 'statusDom', prop: 'statusDom', - type: "slot", - width: 'auto', + type: 'slot', + width: 'auto' }, { title: '操作', prop: 'opearo', name: 'opearo', - type: "slot", - width: '140px', - }, { + type: 'slot', + width: '140px' + }, + { title: '平台批次号', name: 'num', - type: "normal", + type: 'normal', prop: 'num', - width: 'auto', + width: 'auto' }, { title: '创建时间', name: 'create_time', prop: 'create_time', width: '120px', - type: "normal", - }, { + type: 'normal' + }, + { title: '账号', name: 'account', - type: "normal", + type: 'normal', prop: 'account', - width: 'auto', + width: 'auto' }, { title: '订单类型', name: 'type_text', prop: 'type_text', width: 'auto', - type: "normal", + type: 'normal' }, { title: '折扣', name: 'discount', - type: "normal", + type: 'normal', prop: 'discount', - width: 'auto', + width: 'auto' }, { title: '结算', name: 'total', prop: 'total', width: 'auto', - type: "normal", + type: 'normal' }, { title: 'key', name: 'key', prop: 'key', width: 'auto', - type: "normal", + type: 'normal' } ] @@ -153,12 +172,25 @@ export default class orderlist extends React.Component { constructor(props) { super(props) this.state = { - tabList: [{ title: "订单列表" }], + tabList: [{ title: '订单列表' }], orderList: [], - filterList: [{ id: 0, label: "订单状态", prop: "status", menuList: [{ id: 999, name: "全部" }, { id: 1, name: "充值中" }, { id: 2, name: "已完成" }, { id: 3, name: "充值失败" }, { id: 4, name: "已取消" }] }], + filterList: [ + { + id: 0, + label: '订单状态', + prop: 'status', + menuList: [ + { id: 999, name: '全部' }, + { id: 1, name: '充值中' }, + { id: 2, name: '已完成' }, + { id: 3, name: '充值失败' }, + { id: 4, name: '已取消' } + ] + } + ], selectiondata: [], - menuList: [{ id: 0, name: "订单状态", check: false }] - , allcheck: false, + menuList: [{ id: 0, name: '订单状态', check: false }], + allcheck: false, itemcheck: false, combinedValue: [], tableHeight: 500, @@ -166,49 +198,54 @@ export default class orderlist extends React.Component { page: 1, limit: 10, key_word: '', - officialprice: 0, contractprice: 0, costprice: 0, totalprice: 0, - placeholder:'请输入key查询' + officialprice: 0, + contractprice: 0, + costprice: 0, + totalprice: 0, + placeholder: '请输入key查询' } - this.onChangeCombinedDate = this.onChangeCombinedDate.bind(this); + this.onChangeCombinedDate = this.onChangeCombinedDate.bind(this) } //选中表格的选框 selection(selection) { - this.setState({ selectiondata: selection }); - let officialprice = 0; - let contractprice = 0; - let costprice = 0; - let totalprice = 0; - selection.forEach(item => { - officialprice += Number(item.official_price); - contractprice += Number(item.contract_price); - costprice += Number(item.cost_price); - totalprice += Number(item.total); - }); - this.setState({ officialprice, contractprice, costprice, totalprice }); + this.setState({ selectiondata: selection }) + let officialprice = 0 + let contractprice = 0 + let costprice = 0 + let totalprice = 0 + selection.forEach((item) => { + officialprice += Number(item.official_price) + contractprice += Number(item.contract_price) + costprice += Number(item.cost_price) + totalprice += Number(item.total) + }) + this.setState({ officialprice, contractprice, costprice, totalprice }) } //新建订单 clickFn() { - this.props.history.push('/order-add'); + this.props.history.push('/order-add') sessionStorage.setItem('pathname2', '/order-add') - let activerou = [{ - items: [ - { - "path": "/home/order-list", - "name": "订单管理" - }, - { - "path": "/home/order-add", - "name": "新建订单" - } - ] - }] - sessionStorage.setItem('breaknav', JSON.stringify(activerou)); + let activerou = [ + { + items: [ + { + path: '/home/order-list', + name: '订单管理' + }, + { + path: '/home/order-add', + name: '新建订单' + } + ] + } + ] + sessionStorage.setItem('breaknav', JSON.stringify(activerou)) } //批量作废 batchdelFn() { if (this.state.selectiondata.length < 1) { - Notify.clear(); - Notify.warn('请先勾选需作废的选项'); + Notify.clear() + Notify.warn('请先勾选需作废的选项') } else { Sweetalert.confirm({ type: 'warning', @@ -216,11 +253,9 @@ export default class orderlist extends React.Component { title: '确认操作', content:

是否作废选中【充值中】的订单？

, onConfirm() { - alert('开始调用作废接口'); - }, - onCancel() { - + alert('开始调用作废接口') }, + onCancel() {}, className: 'questModal', parentComponent: this }) @@ -229,44 +264,43 @@ export default class orderlist extends React.Component { //导出订单 exportFn() { - let _self = this; - let { key_word, key, status, option } = _self.state; + let _self = this + let { key_word, key, status, option } = _self.state let data = {} if (this.state.combinedValue && this.state.combinedValue[0]) { - data.begin_time = this.state.combinedValue[0]; - data.end_time = this.state.combinedValue[1]; + data.begin_time = this.state.combinedValue[0] + data.end_time = this.state.combinedValue[1] } if (status || status === 0) { - data.status = status; + data.status = status } if (option && option.key == 1) { if (key_word) { - data.key = key_word; + data.key = key_word } } if (option && option.key == 2) { if (key_word) { - data.key_word = key_word; + data.key_word = key_word } } if (option && option.key == 3) { if (key_word) { - data.key_batch_id = key_word; + data.key_batch_id = key_word } } if (option && option.key == 4) { if (key_word) { - data.code_batch_id = key_word; + data.code_batch_id = key_word } } if (this.state.selectiondata && this.state.selectiondata.length > 0) { - - let orders = this.state.selectiondata; - let orderNum = orders.map(item => item.order_number); - data.order_numbers = orderNum.join(','); + let orders = this.state.selectiondata + let orderNum = orders.map((item) => item.order_number) + data.order_numbers = orderNum.join(',') } Sweetalert.confirm({ type: 'warning', @@ -274,320 +308,380 @@ export default class orderlist extends React.Component { title: '确认操作', content:

是否导出订单？

, onConfirm() { - getOrderExport(data).then(res => { - if (res.type == 'application/json') { - const reader = new FileReader(); //创建一个FileReader实例 - reader.readAsText(res, 'utf-8'); //读取文件,结果用字符串形式表示 - reader.onload = function () { - const obj = JSON.parse(reader.result); - Notify.clear() - Notify.error(obj.message) + getOrderExport(data) + .then((res) => { + if (res.type == 'application/json') { + const reader = new FileReader() //创建一个FileReader实例 + reader.readAsText(res, 'utf-8') //读取文件,结果用字符串形式表示 + reader.onload = function () { + const obj = JSON.parse(reader.result) + Notify.clear() + Notify.error(obj.message) + } + } else { + let bl = new Blob([res]) + let fileName = '订单管理' + _self.getnow() + '.xlsx' //设置文件名 + var link = document.createElement('a') //创建标签 + link.href = window.URL.createObjectURL(bl) + link.download = fileName //下载的文件名 + link.click() + window.URL.revokeObjectURL(link.href) //清除URL } - } else { - let bl = new Blob([res]); - let fileName = '订单管理' + _self.getnow() + ".xlsx"; //设置文件名 - var link = document.createElement('a');//创建标签 - link.href = window.URL.createObjectURL(bl); - link.download = fileName;//下载的文件名 - link.click(); - window.URL.revokeObjectURL(link.href);//清除URL - } - }).catch(err => { - }); + }) + .catch((err) => {}) }, - onCancel() { - - }, + onCancel() {}, className: 'questModal', parentComponent: this }) } //获取当前时间 getnow() { - var now = new Date(); - var year = now.getFullYear(); + var now = new Date() + var year = now.getFullYear() var month = - now.getMonth() + 1 <= 9 - ? "0" + (now.getMonth() + 1) - : now.getMonth() + 1; - var day = now.getDate() <= 9 ? "0" + now.getDate() : now.getDate(); - var tt = now.getHours() <= 9 ? "0" + now.getHours() : now.getHours(); - var mm = - now.getMinutes() <= 9 ? "0" + now.getMinutes() : now.getMinutes(); - var ss = - now.getSeconds() <= 9 ? "0" + now.getSeconds() : now.getSeconds(); - let datelist = [year, month, day, tt, mm, ss]; - return datelist.join(""); + now.getMonth() + 1 <= 9 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1 + var day = now.getDate() <= 9 ? '0' + now.getDate() : now.getDate() + var tt = now.getHours() <= 9 ? '0' + now.getHours() : now.getHours() + var mm = now.getMinutes() <= 9 ? '0' + now.getMinutes() : now.getMinutes() + var ss = now.getSeconds() <= 9 ? '0' + now.getSeconds() : now.getSeconds() + let datelist = [year, month, day, tt, mm, ss] + return datelist.join('') } componentWillMount() { - this.setState({ tableHeight: window.innerHeight - 430 }); + this.setState({ tableHeight: window.innerHeight - 430 }) } //作废 deleteFn(e, row) { - let self = this; + let self = this Sweetalert.confirm({ type: 'warning', closeBtn: true, title: '确认操作', - content:

是否作废[{row.order_number}]？

, + content: ( +

+ 是否作废[{row.order_number}]？ +

+ ), onConfirm() { - putOrderCancel(row.order_number).then(res => { - handelResponse(res, (response, msg) => { - Notify.clear(); - Notify.success(msg); - self.getOrderFn(); - }, (err) => { - Notify.error(err) + putOrderCancel(row.order_number) + .then((res) => { + handelResponse( + res, + (response, msg) => { + Notify.clear() + Notify.success(msg) + self.getOrderFn() + }, + (err) => { + Notify.error(err) + } + ) }) - }).catch(err => { - }); - }, - onCancel() { - + .catch((err) => {}) }, + onCancel() {}, className: 'questModal', parentComponent: this - }); + }) } //改为成功 changeSuccessFn(e, row) { - let self = this; + let self = this Sweetalert.confirm({ type: 'warning', closeBtn: true, title: '确认操作', - content:

是否将[{row.order_number}]订单改为成功状态？

, + content: ( +

+ 是否将[{row.order_number}]订单改为成功状态？ +

+ ), onConfirm() { - putOrderSuccess(row.order_number).then(res => { - handelResponse(res, (response, msg) => { - Notify.clear(); - Notify.success(msg); - self.getOrderFn(); - }, (err) => { - Notify.error(err) + putOrderSuccess(row.order_number) + .then((res) => { + handelResponse( + res, + (response, msg) => { + Notify.clear() + Notify.success(msg) + self.getOrderFn() + }, + (err) => { + Notify.error(err) + } + ) }) - }).catch(err => { - }); - }, - onCancel() { - + .catch((err) => {}) }, + onCancel() {}, className: 'questModal', parentComponent: this - }); + }) } //详情 moreFn(e, row) { - this.props.history.push('/home/order-addetails?oid=' + row.order_number); + this.props.history.push('/home/order-addetails?oid=' + row.order_number) sessionStorage.setItem('pathname2', '/home/order-addetails') - let activerou = [{ - items: [ - { - "path": "/home/order-list", - "name": "订单管理" - }, - { - "path": "/home/order-addetails", - "name": "订单详情" - } - ] - }] - sessionStorage.setItem('breaknav', JSON.stringify(activerou)); + let activerou = [ + { + items: [ + { + path: '/home/order-list', + name: '订单管理' + }, + { + path: '/home/order-addetails', + name: '订单详情' + } + ] + } + ] + sessionStorage.setItem('breaknav', JSON.stringify(activerou)) } //再次充值 - againinvestFn(e, row) { - - } + againinvestFn(e, row) {} //清空 clearFn() { - this.setState({ 'selectiondata': [] }) + this.setState({ selectiondata: [] }) this.setState({ allcheck: false }) this.setState({ itemcheck: false }) } //选择时间 onChangeCombinedDate(e) { - this.setState({ combinedValue: e }); - this.getOrderFn(e); + this.setState({ combinedValue: e }) + this.getOrderFn(e) } //page pageChange(e) { - this.setState({ page: e }); - this.setState({ 'selectiondata': [] }) + this.setState({ page: e }) + this.setState({ selectiondata: [] }) setTimeout(() => { - this.getOrderFn(); - }, 0); - + this.getOrderFn() + }, 0) } //limit countChange(e) { - this.setState({ page: 1, limit: e }); - this.setState({ 'selectiondata': [] }) + this.setState({ page: 1, limit: e }) + this.setState({ selectiondata: [] }) setTimeout(() => { - this.getOrderFn(); - }, 0); + this.getOrderFn() + }, 0) } //敲回车查询 sureFn() { - this.setState({ page: 1 }); + this.setState({ page: 1 }) setTimeout(() => { - this.getOrderFn(); - }, 300); - + this.getOrderFn() + }, 300) } onFilterClose(prop) { let data = {} - data[prop] = null; + data[prop] = null this.setState(data) } - //获取订单列表 getOrderFn(time = {}) { - let _self = this; - let { page, limit, option, key_word, status } = _self.state; + let _self = this + let { page, limit, option, key_word, status } = _self.state let data = { page, limit } if (this.state.combinedValue && this.state.combinedValue[0]) { - data.begin_time = this.state.combinedValue[0]; - data.end_time = this.state.combinedValue[1]; + data.begin_time = this.state.combinedValue[0] + data.end_time = this.state.combinedValue[1] } if (status || status === 0) { - data.status = status; + data.status = status } if (time && time[0]) { - data.begin_time = time[0]; - data.end_time = time[1]; + data.begin_time = time[0] + data.end_time = time[1] } if (time && time[0] == null && time.length > 1) { - delete data.begin_time; - delete data.end_time; - + delete data.begin_time + delete data.end_time } if (option && option.key == 1) { if (key_word) { - data.key = key_word; + data.key = key_word } } if (option && option.key == 2) { if (key_word) { - data.key_word = key_word; + data.key_word = key_word } } if (option && option.key == 3) { if (key_word) { - data.key_batch_id = key_word; + data.key_batch_id = key_word } } if (option && option.key == 4) { if (key_word) { - data.code_batch_id = key_word; + data.code_batch_id = key_word } } - getOrderList(data).then(res => { - handelResponse(res, (response, msg) => { - const orderList_data = response.data; - const { total } = response; - _self.setState({ orderList: orderList_data, total }); - - }, (err) => { - Notify.error(err) + getOrderList(data) + .then((res) => { + handelResponse( + res, + (response, msg) => { + const orderList_data = response.data + const { total } = response + _self.setState({ orderList: orderList_data, total }) + }, + (err) => { + Notify.error(err) + } + ) }) - }).catch(err => { - }); + .catch((err) => {}) } optiononChange(e) { - let placeholder; - let searchOption=Number(e?e.key:0); - switch(searchOption){ - case 1:placeholder='请输入key搜索';break; - case 2:placeholder='请输入关键字查询';break; - case 3:placeholder='请输入key批次搜索';break; - case 4:placeholder='请输入兑换码批次ID搜索';break; - default:placeholder='请输入key搜索';break + let placeholder + let searchOption = Number(e ? e.key : 0) + switch (searchOption) { + case 1: + placeholder = '请输入key搜索' + break + case 2: + placeholder = '请输入关键字查询' + break + case 3: + placeholder = '请输入key批次搜索' + break + case 4: + placeholder = '请输入兑换码批次ID搜索' + break + default: + placeholder = '请输入key搜索' + break } - this.setState({ option: e, key_word: '',placeholder }); + this.setState({ option: e, key_word: '', placeholder }) return } componentWillMount() { - let datetime = [ - tomonth + " " + "00:00:00", - day + " " + "23:59:59" - ]; - this.setState({ combinedValue: datetime }); - this.getOrderFn(datetime); + let datetime = [tomonth + ' ' + '00:00:00', day + ' ' + '23:59:59'] + this.setState({ combinedValue: datetime }) + this.getOrderFn(datetime) } //状态筛选 selectedId(e, prop) { let data = {} if (e == 999) { - data[prop] = null; - } - else { + data[prop] = null + } else { data[prop] = e } - this.setState(data); + this.setState(data) } // 监听组件内部状态的变化: componentDidUpdate(prevProps, prevState) { // 参数分别为改变之前的数据状态对象 if (prevState.key_word != this.state.key_word && !this.state.key_word) { - this.getOrderFn(); + this.getOrderFn() } if (prevState.option != this.state.option && !this.state.option) { - this.getOrderFn(); - this.setState({ key_word: "" }); + this.getOrderFn() + this.setState({ key_word: '' }) } if (prevState.status != this.state.status) { - this.getOrderFn(); + this.getOrderFn() } } //过滤表格枚举状态 render() { - const date = + const date = ( + + ) - - const { current, pageSize } = this.state; + const { current, pageSize } = this.state return ( -
+
-
+

- +

-
- this.optiononChange(e)} + disableSearch + options={options} + clearable + placeholder='请选择查询分类' + /> + {this.state.option ? ( + { + this.setState({ key_word: '' }) + }} + wordSearch={this.sureFn.bind(this)} + onChange={(e) => this.setState({ key_word: e })} + value={this.state.key_word} + icon='search' + placeholder={this.state.placeholder} + countShow={false} + height={'36px'} + width={'260px'} + alignment={'left'} + /> + ) : null}
-
- { this.onFilterClose(e) }} selectFn={(e, prop) => { this.selectedId(e, prop) }} filterList={this.state.filterList} menuList={this.state.menuList}> + { + this.onFilterClose(e) + }} + selectFn={(e, prop) => { + this.selectedId(e, prop) + }} + filterList={this.state.filterList} + menuList={this.state.menuList}>
- {this.state.selectiondata.length > 0 ? (清空} - > - 已选择{this.state.selectiondata.length}项，官方价金额总计￥{this.state.officialprice.toFixed(4)}，合同价金额总计￥{this.state.contractprice.toFixed(4)}，成本价金额总计：￥{this.state.costprice.toFixed(4)}，结算价金额总计：￥{this.state.totalprice.toFixed(4)} - ) : null - } + {this.state.selectiondata.length > 0 ? ( + + 清空 + + }> + 已选择 + + {this.state.selectiondata.length} + + 项，官方价金额总计￥{this.state.officialprice.toFixed(4)} + ，合同价金额总计￥{this.state.contractprice.toFixed(4)} + ，成本价金额总计：￥{this.state.costprice.toFixed(4)} + ，结算价金额总计：￥{this.state.totalprice.toFixed(4)} + + ) : null} { this.pageChange(e) }} - countChange={ - (e) => { - this.countChange(e) - } - } + countChange={(e) => { + this.countChange(e) + }} checkChange={this.selection.bind(this)} ComponentHandler={(com, rowData) => { - if (com == "cost") { - return {rowData.contract_price}({rowData.cost_price}) + if (com == 'cost') { + return ( + + {rowData.contract_price}( + {rowData.type === 1 + ? rowData.cost_price + : rowData.official_price} + ) + + ) } - if (com == "statusDom") { - return

{rowData.status_text}

+ if (com == 'statusDom') { + return ( +

+ + + {rowData.status_text} + +

+ ) } - if (com == "opearo") { - return
- { - rowData.status == 0 || rowData.status == 1 || rowData.status == 2 || rowData.status == 3 ? this.moreFn(e, rowData)}>详情 : null - } - { - rowData.status == 1 ? this.deleteFn(e, rowData)} >作废 : null - } - { - // rowData.status==3? this.againinvestFn(e,rowData)}>再次充值:null - } - { - rowData.status == 1 ? this.changeSuccessFn(e, rowData)} >改为成功 : null - } - -
+ if (com == 'opearo') { + return ( +
+ {rowData.status == 0 || + rowData.status == 1 || + rowData.status == 2 || + rowData.status == 3 ? ( + this.moreFn(e, rowData)}> + 详情 + + ) : null} + {rowData.status == 1 ? ( + this.deleteFn(e, rowData)}> + 作废 + + ) : null} + { + // rowData.status==3? this.againinvestFn(e,rowData)}>再次充值:null + } + {rowData.status == 1 ? ( + this.changeSuccessFn(e, rowData)}> + 改为成功 + + ) : null} +
+ ) } - }} /> -