200 lines
3.8 KiB
Vue
200 lines
3.8 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<search-bar
|
|
:formConfigs="formConfig"
|
|
ref="searchBarForm"
|
|
@headBtnClick="buttonClick" />
|
|
<base-table
|
|
:table-props="tableProps1"
|
|
:page="1"
|
|
:limit="100"
|
|
:table-data="tableData1"></base-table>
|
|
<base-table
|
|
:table-props="tableProps2"
|
|
:page="1"
|
|
:limit="100"
|
|
:table-data="tableData2"></base-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getDetailData } from '@/api/cost/allCost';
|
|
import moment from 'moment';
|
|
|
|
const tableProps1 = [
|
|
{
|
|
prop: 'name',
|
|
label: '成本项目-原片',
|
|
},
|
|
{
|
|
prop: 'f1',
|
|
label: '本期领用',
|
|
children: [
|
|
{
|
|
prop: 'quantity',
|
|
label: '数量',
|
|
},
|
|
{
|
|
prop: 'price',
|
|
label: '单价',
|
|
},
|
|
{
|
|
prop: 'sumPrice',
|
|
label: '金额',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
prop: 'sprice',
|
|
label: '单位成本',
|
|
},
|
|
];
|
|
|
|
const tableProps2 = [
|
|
{
|
|
prop: 'name',
|
|
label: '成本项目-加工',
|
|
},
|
|
{
|
|
prop: 'quantity',
|
|
label: '耗用数量',
|
|
},
|
|
{
|
|
prop: 'price',
|
|
label: '平均耗用单价',
|
|
},
|
|
{
|
|
prop: 'sumPrice',
|
|
label: '总成本',
|
|
},
|
|
{
|
|
prop: 'sprice',
|
|
label: '综合单位成本',
|
|
},
|
|
];
|
|
export default {
|
|
data() {
|
|
return {
|
|
tableProps1,
|
|
tableData1: [],
|
|
tableProps2,
|
|
tableData2: [],
|
|
listQuery: {
|
|
pageSize: 10,
|
|
pageNo: 1,
|
|
statisticType: 1,
|
|
},
|
|
activeName: '日',
|
|
startTime:
|
|
moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD') +
|
|
' 00:00:00',
|
|
endTime:
|
|
moment(new Date()).subtract(-1, 'days').format('YYYY-MM-DD') +
|
|
' 00:00:00',
|
|
formConfig: [
|
|
{
|
|
type: 'select',
|
|
label: '维度',
|
|
selectOptions: [
|
|
{ id: 1, name: '日' },
|
|
{ id: 2, name: '周' },
|
|
{ id: 3, name: '月' },
|
|
{ id: 4, name: '年' },
|
|
],
|
|
param: 'statisticType',
|
|
defaultSelect: 1, // 默认值,
|
|
clearable: false,
|
|
},
|
|
{
|
|
// 日期选择
|
|
type: 'datePicker',
|
|
// label: '日期',
|
|
dateType: 'date',
|
|
placeholder: '选择日期',
|
|
format: 'yyyy-MM-dd',
|
|
valueFormat: 'yyyy-MM-dd',
|
|
param: 'timeday',
|
|
clearable: false,
|
|
pickerOptions: {
|
|
disabledDate(time) {
|
|
return (time.getTime()+ 3600 * 1000 * 24) > Date.now();
|
|
},
|
|
shortcuts: [
|
|
{
|
|
text: '今天',
|
|
onClick(picker) {
|
|
picker.$emit('pick', new Date());
|
|
},
|
|
},
|
|
{
|
|
text: '昨天',
|
|
onClick(picker) {
|
|
const date = new Date();
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
picker.$emit('pick', date);
|
|
},
|
|
},
|
|
{
|
|
text: '一周前',
|
|
onClick(picker) {
|
|
const date = new Date();
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
|
picker.$emit('pick', date);
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '搜索',
|
|
name: 'search',
|
|
color: 'primary',
|
|
},
|
|
{
|
|
type: 'separate',
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '返回首页',
|
|
name: 'back',
|
|
color: 'warning',
|
|
},
|
|
],
|
|
};
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
this.listQuery.startTime = this.startTime;
|
|
this.$refs.searchBarForm.formInline.timeday = this.startTime.substr(0, 10)
|
|
this.getDataList();
|
|
},
|
|
methods: {
|
|
// 获取数据列表
|
|
getDataList() {
|
|
getDetailData(this.listQuery).then((response) => {
|
|
this.tableData1 = response.data.odata;
|
|
this.tableData2 = response.data.ddata;
|
|
});
|
|
},
|
|
buttonClick(val) {
|
|
switch (val.btnName) {
|
|
case 'search':
|
|
console.log(val.timeday)
|
|
this.listQuery.statisticType = val.statisticType || 1;
|
|
this.listQuery.startTime = val.timeday
|
|
? val.timeday + ' 00:00:00'
|
|
: null;
|
|
this.getDataList();
|
|
break;
|
|
case 'back':
|
|
this.$router.go(-1)
|
|
break;
|
|
default:
|
|
console.log(val);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|