123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- <template>
- <div>
- <div v-if="tableData.length">
- <!-- 全国销售日报 -->
- <table class="table-box" id="day-table-2" >
- <thead class="ant-table-thead">
- <tr>
- <th :colspan="cloumns.length">
- <div class="table-title">{{ dateStr }} 项目销售日报2 <span v-if="showDz">(截止{{ nowDate }})</span></div>
- </th>
- </tr>
- <tr>
- <th v-for="item in cloumns" :key="item">{{ item }}</th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="(item,index) in list" :key="index">
- <td align="center">{{ item.proName }}</td>
- <td align="center">{{ item.userName }}</td>
- <td align="center">{{ Number(item.bymb).toFixed(2) }}</td>
- <td align="center">{{ Number(item.amount).toFixed(2) }}</td>
- <td align="center" class="red">{{ item.wcl }}</td>
- </tr>
- </tbody>
- </table>
- </div>
- <div v-else class="noData">
- 暂无数据,请点击查询
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'Table2',
- props: {
- tableData: {
- type: Array,
- default: () => []
- },
- month: {
- type: String,
- default: () => ''
- },
- nowDate: {
- type: String,
- default: () => ''
- }
- },
- data () {
- return {
- months: '',
- list: [],
- showDz: false,
- dateStr: ''
- }
- },
- computed: {
- cloumns () {
- const m = this.month.split('-')
- return ['项目', '品类经理', m[1] + '月业绩目标', m[1] + '月销售额截止达成', '达成率']
- }
- },
- methods: {
- getmonths () {
- this.months = this.month.split('-')[1]
- this.dateStr = this.month.replace('-', '年') + '月'
- },
- getshowDz () {
- const nowMonths = new Date().getMonth() + 1
- this.showDz = this.months == nowMonths
- },
- getlist () {
- this.list = this.tableData
- },
- getTable () {
- return document.getElementById('day-table-2')
- },
- pageInit () {
- this.getmonths()
- this.getshowDz()
- this.getlist()
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .table-title{
- font-size: 16px;
- font-weight: bold;
- width: 100%;
- max-width: 1400px;
- text-align: center;
- }
- .noData{
- width: 100%;
- text-align: center;
- font-size: 16px;
- color: #999;
- min-height: 300px;
- line-height: 300px;
- }
- .table-box{
- width: 100%;
- max-width: 1400px;
- font-size: 14px;
- .red{
- color: red;
- }
- tr > th{
- padding: 6px 8px;
- border: 1px solid #dedede;
- text-align: center;
- }
- tr > td{
- padding: 5px;
- border: 1px solid #dedede;
- }
- tr{
- &:hover{
- td{
- background-color: #ffd6d4;
- }
- }
- }
- }
- </style>
|