|
@@ -0,0 +1,278 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <a-card size="small" :bordered="false" class="rebateAmountList-wrap searchBoxNormal">
|
|
|
+ <!-- 搜索条件 -->
|
|
|
+ <div class="table-page-search-wrapper" ref="tableSearch">
|
|
|
+ <a-form-model
|
|
|
+ id="rebateAmountList-form"
|
|
|
+ ref="ruleForm"
|
|
|
+ class="form-model-con"
|
|
|
+ layout="inline"
|
|
|
+ :model="queryParam"
|
|
|
+ :rules="rules">
|
|
|
+ <a-row :gutter="15">
|
|
|
+ <a-col :md="5" :sm="24">
|
|
|
+ <a-form-model-item label="年份" prop="confYear">
|
|
|
+ <a-select
|
|
|
+ id="yearQueryList-time"
|
|
|
+ style="width: 100%"
|
|
|
+ placeholder="请选择年份"
|
|
|
+ :value="queryParam.confYear"
|
|
|
+ @change="changeYear"
|
|
|
+ allowClear>
|
|
|
+ <a-select-option v-for="item in years" :value="item" :key="item">
|
|
|
+ {{ item }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="4" :sm="24">
|
|
|
+ <a-button
|
|
|
+ type="primary"
|
|
|
+ @click="$refs.table.refresh(true)"
|
|
|
+ :disabled="disabled"
|
|
|
+ id="rebateAmountList-refresh">查询</a-button>
|
|
|
+ <a-button
|
|
|
+ style="margin-left: 8px"
|
|
|
+ @click="resetSearchForm"
|
|
|
+ :disabled="disabled"
|
|
|
+ id="rebateAmountList-reset">重置</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form-model>
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+ <a-card size="small" :bordered="false">
|
|
|
+ <a-spin :spinning="spinning" tip="Loading...">
|
|
|
+ <!-- 列表 -->
|
|
|
+ <s-table
|
|
|
+ class="sTable fixPagination"
|
|
|
+ ref="table"
|
|
|
+ size="small"
|
|
|
+ :rowKey="(record) => record.no"
|
|
|
+ rowKeyName="no"
|
|
|
+ :style="{ height: tableHeight+70+'px' }"
|
|
|
+ :columns="columns"
|
|
|
+ :data="loadData"
|
|
|
+ :scroll="{ y: tableHeight}"
|
|
|
+ :defaultLoadData="false"
|
|
|
+ bordered>
|
|
|
+ <!-- $hasPermissions('B_tireSubsidySetting_edit')&& -->
|
|
|
+ <!-- 1月~12月 -->
|
|
|
+ <template
|
|
|
+ v-for="col in 12"
|
|
|
+ :slot="'month'+col"
|
|
|
+ slot-scope="text, record"
|
|
|
+ >
|
|
|
+ <div :key="col">
|
|
|
+ <a-input-number
|
|
|
+ style="width:100%;"
|
|
|
+ v-if="record.editable"
|
|
|
+ size="small"
|
|
|
+ :min="0"
|
|
|
+ :max="99999999"
|
|
|
+ placeholder="请输入"
|
|
|
+ :value="text"
|
|
|
+ @change="e => handleChange(e,record, col)" />
|
|
|
+ <template v-else>
|
|
|
+ {{ text }}
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <template slot="action" slot-scope="text, record">
|
|
|
+ <span v-if="record.editable">
|
|
|
+ <a-button
|
|
|
+ size="small"
|
|
|
+ type="link"
|
|
|
+ class="button-info"
|
|
|
+ @click="handleSave(record)"
|
|
|
+ :id="'rebateAmountList-edit-btn'+record.id"
|
|
|
+ >
|
|
|
+ 保存
|
|
|
+ </a-button>
|
|
|
+ <a-button
|
|
|
+ size="small"
|
|
|
+ type="link"
|
|
|
+ class="button-info"
|
|
|
+ @click="handleCancel(record)"
|
|
|
+ :id="'rebateAmountList-edit-btn'+record.id"
|
|
|
+ >
|
|
|
+ 取消
|
|
|
+ </a-button>
|
|
|
+ </span>
|
|
|
+ <a-button
|
|
|
+ size="small"
|
|
|
+ type="link"
|
|
|
+ v-else
|
|
|
+ class="button-info"
|
|
|
+ @click="handleEdit(record)"
|
|
|
+ :id="'rebateAmountList-edit-btn'+record.id"
|
|
|
+ >
|
|
|
+ 编辑
|
|
|
+ </a-button>
|
|
|
+ </template>
|
|
|
+ </s-table>
|
|
|
+ </a-spin>
|
|
|
+ </a-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { commonMixin } from '@/utils/mixin'
|
|
|
+// 组件
|
|
|
+import { STable } from '@/components'
|
|
|
+// 接口
|
|
|
+import { reportDailyConfList, dailyReportConfSave } from '@/api/reportDailyConf'
|
|
|
+export default {
|
|
|
+ name: 'RebateAmountList',
|
|
|
+ mixins: [commonMixin],
|
|
|
+ components: { STable },
|
|
|
+ props: {
|
|
|
+ pageType: { // 弹框显示状态
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ const _this = this
|
|
|
+ return {
|
|
|
+ spinning: false,
|
|
|
+ disabled: false, // 查询、重置按钮是否可操作
|
|
|
+ tableHeight: 0, // 表格高度
|
|
|
+ openRebateAddModal: false, // 新增弹窗
|
|
|
+ toYears: new Date().getFullYear(), // 今年
|
|
|
+ // 查询条件
|
|
|
+ queryParam: {
|
|
|
+ confType: undefined, // 页面类型
|
|
|
+ confYear: new Date().getFullYear() // 年份
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ confYear: [{ required: true, message: '请选择年份', trigger: 'change' }]
|
|
|
+ },
|
|
|
+ dataSources: null, // 表格数据
|
|
|
+ // 加载数据方法 必须为 Promise 对象
|
|
|
+ loadData: parameter => {
|
|
|
+ this.disabled = true
|
|
|
+ this.spinning = true
|
|
|
+ // 获取列表数据 有分页
|
|
|
+ this.queryParam.confType = this.pageType
|
|
|
+ const params = Object.assign(parameter, this.queryParam)
|
|
|
+ return reportDailyConfList(params).then(res => {
|
|
|
+ let data
|
|
|
+ if (res.status == 200) {
|
|
|
+ data = res.data
|
|
|
+ // 计算表格序号
|
|
|
+ const no = (data.pageNo - 1) * data.pageSize
|
|
|
+ for (var i = 0; i < data.list.length; i++) {
|
|
|
+ data.list[i].no = no + i + 1
|
|
|
+ data.list[i].editable = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.dataSources = data
|
|
|
+ this.disabled = false
|
|
|
+ this.spinning = false
|
|
|
+ return data
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 获取年份数据
|
|
|
+ years () {
|
|
|
+ const years = []
|
|
|
+ const lens = (this.toYears - 2023) + 1
|
|
|
+ for (let i = 0; i < lens; i++) {
|
|
|
+ years.push(this.toYears - i)
|
|
|
+ }
|
|
|
+ return years
|
|
|
+ },
|
|
|
+ columns () {
|
|
|
+ const _this = this
|
|
|
+ const arr = [
|
|
|
+ { title: '区域', dataIndex: 'subareaName', width: '12%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
|
|
|
+ { title: '1月', dataIndex: 'value01', width: '8%', align: 'right', scopedSlots: { customRender: 'month1' } },
|
|
|
+ { title: '2月', dataIndex: 'value02', width: '8%', align: 'right', scopedSlots: { customRender: 'month2' } },
|
|
|
+ { title: '3月', dataIndex: 'value03', width: '8%', align: 'right', scopedSlots: { customRender: 'month3' } },
|
|
|
+ { title: '4月', dataIndex: 'value04', width: '8%', align: 'right', scopedSlots: { customRender: 'month4' } },
|
|
|
+ { title: '5月', dataIndex: 'value05', width: '8%', align: 'right', scopedSlots: { customRender: 'month5' } },
|
|
|
+ { title: '6月', dataIndex: 'value06', width: '8%', align: 'right', scopedSlots: { customRender: 'month6' } },
|
|
|
+ { title: '7月', dataIndex: 'value07', width: '8%', align: 'right', scopedSlots: { customRender: 'month7' } },
|
|
|
+ { title: '8月', dataIndex: 'value08', width: '8%', align: 'right', scopedSlots: { customRender: 'month8' } },
|
|
|
+ { title: '9月', dataIndex: 'value09', width: '8%', align: 'right', scopedSlots: { customRender: 'month9' } },
|
|
|
+ { title: '10月', dataIndex: 'value10', width: '8%', align: 'right', scopedSlots: { customRender: 'month10' } },
|
|
|
+ { title: '11月', dataIndex: 'value11', width: '8%', align: 'right', scopedSlots: { customRender: 'month11' } },
|
|
|
+ { title: '12月', dataIndex: 'value12', width: '8%', align: 'right', scopedSlots: { customRender: 'month12' } },
|
|
|
+ { title: '合计', dataIndex: 'summation', width: '11%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
|
|
|
+ { title: '操作', scopedSlots: { customRender: 'action' }, width: '11%', align: 'center' }
|
|
|
+ ]
|
|
|
+ if (_this.pageType === 'REGIONAL_ESTIMATED_ORDER') {
|
|
|
+ arr.splice(0, 0, { title: '品类', dataIndex: 'productTypeName', width: '12%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true })
|
|
|
+ }
|
|
|
+ return arr
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 选择查询年份 change
|
|
|
+ changeYear (val) {
|
|
|
+ if (!val) {
|
|
|
+ this.queryParam.confYear = void 0
|
|
|
+ } else {
|
|
|
+ this.queryParam.confYear = val
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 编辑
|
|
|
+ handleEdit (row) {
|
|
|
+ row.editable = true
|
|
|
+ },
|
|
|
+ // 保存
|
|
|
+ handleSave (row) {
|
|
|
+ row.editable = false
|
|
|
+ },
|
|
|
+ // 取消
|
|
|
+ handleCancel (row) {
|
|
|
+ row.editable = false
|
|
|
+ },
|
|
|
+ // input change事件
|
|
|
+ handleChange (val, row, column) {
|
|
|
+ const _this = this
|
|
|
+ const newColumn = _this.padZero(column)
|
|
|
+ row['value' + newColumn] = val
|
|
|
+ row.summation = _this.calculateTotal(row)
|
|
|
+ _this.dataSources[column * 1 - 1] = row
|
|
|
+ },
|
|
|
+ // 补零方法
|
|
|
+ padZero (num) {
|
|
|
+ return String(num).padStart(2, '0')
|
|
|
+ },
|
|
|
+ // 计算合计
|
|
|
+ calculateTotal (rowData) {
|
|
|
+ const keys = Array.from({ length: 12 }, (_, i) => 'value' + this.padZero(i + 1))
|
|
|
+ const totalNum = keys.reduce((sum, key) => sum + (Number(rowData[key]) || 0), 0)
|
|
|
+ console.log('sdsdsd:', totalNum)
|
|
|
+ return totalNum
|
|
|
+ },
|
|
|
+ // 重置
|
|
|
+ resetSearchForm () {
|
|
|
+ this.queryParam.confType = undefined
|
|
|
+ this.queryParam.confYear = new Date().getFullYear()
|
|
|
+ this.$refs.table.refresh(true)
|
|
|
+ },
|
|
|
+ // 初始化
|
|
|
+ pageInit () {
|
|
|
+ this.$nextTick(() => { // 页面渲染完成后的回调
|
|
|
+ this.setTableH()
|
|
|
+ })
|
|
|
+ this.resetSearchForm()
|
|
|
+ },
|
|
|
+ // 计算表格高度
|
|
|
+ setTableH () {
|
|
|
+ const tableSearchH = this.$refs.tableSearch.offsetHeight
|
|
|
+ this.tableHeight = window.innerHeight - tableSearchH - 280
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.pageInit()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|