| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223 |
- <template>
- <basic-container>
- <avue-crud
- v-bind="bindVal"
- v-on="onEvent"
- v-model="form"
- :page.sync="page"
- :header-cell-style="headerCellStyle"
- >
- <template slot="menuLeft">
- <el-button
- type="warning"
- size="small"
- plain
- icon="el-icon-download"
- @click="handleExport"
- >
- 导出
- </el-button>
- <!-- <print-table-btn @click="printTable" /> -->
- </template>
- <template slot="body">
- <h3 class="page-title">{{ pageTitle }}</h3>
- <year-month-select v-model="params.yearAndMonth" :showAllYear="false"></year-month-select>
- </template>
- <template slot="gslb">
- <div class="custom-cell">
- <div class="custom-cell-line">研发工时</div>
- <div class="custom-cell-line">非研发工时</div>
- </div>
- </template>
- <template v-for="col of allMonthCols" :slot="col" slot-scope="{ row }">
- <div class="custom-cell" :key="col">
- <div class="custom-cell-line">{{ row.dailyHoursList[0] ? row.dailyHoursList[0][col] : '' }}</div>
- <div class="custom-cell-line">{{ row.dailyHoursList[1] ? row.dailyHoursList[1][col] : '' }}</div>
- </div>
- </template>
- <template slot="hoursTotal" slot-scope="{ row }">
- <div class="custom-cell">
- <div class="custom-cell-line">{{ row.workHoursTotal }}</div>
- <div class="custom-cell-line">{{ row.unworkHoursTotal }}</div>
- </div>
- </template>
- <template slot="hoursRate" slot-scope="{ row }">
- <div class="custom-cell">
- <div class="custom-cell-line">{{ row.workHoursRate }}</div>
- <div class="custom-cell-line">{{ row.unworkHoursRate }}</div>
- </div>
- </template>
- </avue-crud>
- <WideTablePrinter
- ref="printWideTable"
- :columns="wideTableColumns"
- :data="data"
- :print-title="pageTitle"
- :rows-per-page="30"
- :default-landscape="true"
- />
- </basic-container>
- </template>
- <script>
- import YearMonthSelect from "@/components/year-month-select";
- import {exportBloByPost} from "@/api/common";
- import {getToken} from "@/util/auth";
- import {downloadXls} from "@/util/util";
- import { deepClone, getMonthDatesWithMarkers } from "@/util/util";
- import moment from "moment";
- import ChineseHoliday from "@chnlib/chinese-holiday";
- import { mapGetters } from "vuex";
- export default window.$crudCommon({
- components: {
- YearMonthSelect,
- },
- data() {
- return {
- params: {
- yearAndMonth: "",
- },
- defaultColumns: [],
- wideTableColumns: [],
- printTitle: "",
- allMonthCols: [],
- };
- },
- watch: {
- 'params.yearAndMonth'(newVal) {
- this.refreshTableCol(newVal);
- this.page.currentPage = 1;
- this.getList(this.page);
- }
- },
- computed: {
- ...mapGetters(['tag']),
- pageTitle() {
- let yearAndMonthCN = this.params.yearAndMonth ? moment(this.params.yearAndMonth).format('yyyy年MM月') : '';
- return `${yearAndMonthCN}${this.tag.label}`.replace(/每月/g, '')
- }
- },
- async created() {
- this.defaultColumns = deepClone(this.option.column);
- this.refreshTableCol(this.params.yearAndMonth);
- },
- beforeDestroy() {
- this.option.column = deepClone(this.defaultColumns);
- },
- methods: {
- refreshTableCol(yearAndMonth) {
- let yearMonth = moment(yearAndMonth).format("YYYY-MM").split("-");
- const monthDays = getMonthDatesWithMarkers(Number(yearMonth[0]), Number(yearMonth[1]));
- let newColumns = deepClone(this.defaultColumns);
- this.allMonthCols = [];
- monthDays.forEach((item) => {
- let col = {
- prop: moment(item.dateString).format('yyyyMMDD'),
- label: item.dayName + "" + item.day.toString(),
- type: 'number',
- precision: 1,
- min: 0,
- width: 50,
- align: 'center',
- isWorkDay: ChineseHoliday.isWorkday(item.dateString),
- showOverflowTooltip: true,
- }
- if (!ChineseHoliday.isWorkday(item.dateString)) {
- col.labelClassName = 'red';
- col.labelClassName = 'red';
- }
- newColumns.push(col);
- this.allMonthCols.push(moment(item.dateString).format('yyyyMMDD'));
- });
- newColumns.push({
- prop: "hoursTotal",
- label: "合计",
- width: 50,
- align: 'center',
- showOverflowTooltip: true,
- display: false,
- }, {
- prop: "hoursRate",
- label: "工时分配率",
- width: 60,
- align: 'center',
- showOverflowTooltip: true,
- display: false,
- });
- this.option.column = [...newColumns];
- },
- handleExport() {
- exportBloByPost(`/api/kd-scientific/xm/technician/hours/myyfgsfpb/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
- downloadXls(res.data, `${this.pageTitle}.xlsx`);
- });
- },
- /**
- * 打印表格
- * @param isLandscape 是否横向打印
- */
- printTable(isLandscape) {
- this.wideTableColumns = this.$refs.crud.columnOption;
- this.$nextTick(() => {
- this.$refs.printWideTable.printTable(isLandscape);
- })
- },
- headerCellStyle ({ column }) {
- let color = column.labelClassName ? 'red' : 'rgba(0,0,0,.85)';
- return {
- color
- }
- }
- },
- }, {
- // 模块路径
- name: 'yfCostManage/yfCostStatistics/yfWorkHoursAllocationList',
- res: ({ data }) => {
- data.records = data.records.map(item => {
- if (item.dailyHoursList && item.dailyHoursList.length) {
- let newDailyHoursList = [
- {gslb: '研发工时', hoursTotal: item.workHoursTotal, hoursRate: (item.workHoursRate * 100).toFixed(2)},
- {gslb: '非研发工时', hourTotal: item.unworkHoursTotal, hoursRate: (item.unworkHoursRate * 100).toFixed(2)}
- ];
- item.dailyHoursList.forEach(hourItem => {
- newDailyHoursList[0][hourItem.workDate] = hourItem.workHours;
- newDailyHoursList[1][hourItem.workDate] = hourItem.unworkHours;
- });
- item.dailyHoursList = newDailyHoursList;
- item.workHoursRate = (item.workHoursRate * 100).toFixed(2);
- item.unworkHoursRate = (item.unworkHoursRate * 100).toFixed(2);
- }
- return item;
- });
- return data;
- },
- });
- </script>
- <style lang="scss" scoped>
- .custom-cell {
- margin: 0 -10px;
- &-line {
- border-bottom: 1px solid #EBEEF5;
- line-height: 24px;
- &:last-child {
- border-bottom: 0;
- }
- }
- }
- </style>
|