yudao-init/src/views/produce/workOrder/index.vue

<!--
 * @Author: zhp
 * @Date: 2024-04-15 10:49:13
 * @LastEditTime: 2024-06-03 15:15:18
 * @LastEditors: DY
 * @Description:
-->
<template>
  <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)">
    <div class="app-container" style="margin-top: 8px; padding: 0 16px; height: auto; font-size: 20px; text-align: center;">
      <p style="margin-bottom: 0">数据概览</p>
      <div class="view">
        <div v-for="(item, index) in data" :key="index">
          <p style="color: rgb(194,128,255)">{{ item }}</p>
          <p>{{ index }}</p>
        </div>
      </div>
    </div>
    <div class="app-container" style="margin-top: 8px; height: auto;">
      <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
    </div>
    <div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto;">
      <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" />
      <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
        :table-data="tableData">
        <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
          :method-list="tableBtn" @clickBtn="handleClick" />
      </base-table>
      <pagination
        :limit.sync="listQuery.pageSize"
        :page.sync="listQuery.pageNo"
        :total="listQuery.total"
        @pagination="getDataList"
      />
    </div>
    <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
  </div>
</template>

<script>
// import { parseTime } from '../../core/mixins/code-filter';
import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order';
// import inputTable from './inputTable.vue';
import lineChart from './lineChart';
import moment from 'moment'
// import ButtonNav from '@/components/ButtonNav'
import basicPage from '@/mixins/basic-page'
import AddOrUpdate from './add-or-updata';
import { factoryList, factoryArray } from "@/utils/constants";

// import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx'
export default {
  components: { lineChart, AddOrUpdate },
  mixins: [basicPage],
	data() {
    return {
      factoryList,
      factoryArray,
      listQuery: {
        pageSize: 20,
        pageNo: 1,
        factorys: undefined,
        total: 0,
        time: undefined,
        orderStatus:undefined
      },
      detailOrUpdateVisible:false,
      tableBtn: [
          {
            type: 'detail',
            btnName: '详情',
        },
        // {
        //     type: 'delete',
        //     btnName: '删除',
        //   },
      ].filter((v) => v),
      typeList: [
        {
          name: '芯片',
          id: 0,
        },
        {
          name: '标准组件',
          id: 1,
        },
        {
          name: 'BIPV产品',
          id: 2,
        },
      ],
      formConfig: [
        {
          type: "select",
          label: "工厂名称",
          selectOptions: factoryArray,
          labelField: 'name',
          valueField: 'id',
          param: "factory",
          multiple: true,
					filterable: true
        },
        {
          type: "select",
          label: "工单状态",
          selectOptions: [
            {
              label: '未开始',
              value: 0
            },
            {
              label: '生产中',
              value: 1
            },
            {
              label: '已完成',
              value: 2
            }
          ],
          labelField: "label",
          valueField: "value",
          param: "orderStatus",
          multiple: true,
					filterable: true
        },
        {
          type: "datePicker",
          label: "时间段",
          dateType: "daterange",
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd",
          rangeSeparator: "-",
          startPlaceholder: "开始日期",
          endPlaceholder: "结束日期",
          param: "timeSlot",
          defaultSelect: [],
          defaultTime: ["00:00:00", "23:59:59"],
          width: 250,
        },
        {
          type: "button",
          btnName: "查询",
          name: "search",
          color: "primary",
        },
        {
          type: "separate",
        },
        {
          type: "button",
          btnName: "导出",
          name: "export",
          color: "primary",
          plain: true
        },
      ],
      formConfig2: [
        {
          type: 'title',
          label: '工厂信息',
        },
      ],
      formConfig1: [
        {
          type: 'title',
          label: '良品数量',
        },
      ],
      tableProps: [
        {
          prop: 'factory',
          label: '工厂名称',
          filter: (val) => factoryList[val],
          minWidth: 200,
          showOverflowtooltip: true
        },
        {
          prop: 'workOrderNumber',
          label: '工单号',
          // filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
        },
        {
          prop: 'workOrderType',
          label: '工单类型',
          filter: (val) => ['', '芯片订单', '组件类型', 'bipv类型'][val],
        },
        {
          prop: 'plannedInvestment',
          label: '计划投入',
        },
        {
          prop: 'actualInvestment',
          label: '实际投入',
        },
        {
          prop: 'targetProduction',
          label: '目标产量',
        },
        {
          prop: 'actualProduction',
          label: '实际产量',
        },
        {
          prop: 'productionProgress',
          label: '生产进度',
          filter: (val) => (val * 100) + '%'
        },
        {
          prop: 'orderStatus',
          label: '工单状态',
          filter: (val) => ['未开始', '生产中', '已完成'][val],
        },
        {
          prop: 'startTime',
          label: '开始时间',
          minWidth: 100,
          showOverflowtooltip: true
        },
        {
          prop: 'endTime',
          label: '完成时间',
          minWidth: 100,
          showOverflowtooltip: true
        }
      ],
      tableData: [],
      xAxis: [],
      lineData: {},
      data: {}
			// proLineList: [],
			// all: {}
		};
  },
	created() {
    const today = new Date()
    const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
    this.listQuery.time = [moment(sevenDaysAgo).format('yyyy-MM-DD'), moment(today).format('yyyy-MM-DD')]
    this.formConfig[2].defaultSelect = this.listQuery.time
	},
  mounted() {
    this.getOverView()
  },
  methods: {
    getOverView() {
      getOverView().then(res => {
        this.data = res.data
        console.log('aa', res.data)
      })
    },
    otherMethods(val) {
      this.detailOrUpdateVisible = true;
      // this.addOrEditTitle = "详情";
      this.$nextTick(() => {
        this.$refs.detailOrUpdate.init(val.data.id);
      });
    },
    async getDataList() {
      const res = await getWorkOrderPage(this.listQuery)
      this.tableData = res.data.list
      this.listQuery.total = res.data.total
      if (this.listQuery.total > 0) {
        this.tableData.forEach(item => {
          item.startTime = item.startDate ? item.startDate[0] + '-' + item.startDate[1] + '-' + item.startDate[2] : '--'
          item.endTime = item.endDate ? item.endDate[0] + '-' + item.endDate[1] + '-' + item.endDate[2] : '--'
        })
      }
    },
		buttonClick(val) {
			this.listQuery.factorys = val.factory?.length > 0 ? val.factory : undefined
      this.listQuery.orderStatus = val.orderStatus?.length > 0 ? val.orderStatus : undefined
      this.listQuery.time = val.timeSlot?.length > 0 ? val.timeSlot : undefined
			switch (val.btnName) {
				case 'search':
					this.listQuery.pageNo = 1;
					this.listQuery.pageSize = 20;
          if (this.listQuery.time) {
            this.getDataList();
          } else {
            this.$message.warning('请选择时间范围！')
          }
					break;
				case 'export':
          if (this.listQuery.time) {
            this.handleExport();
          } else {
            this.$message.warning('请选择时间范围！')
          }
					break;
				default:
					console.log(val);
			}
		},
		/** 导出按钮操作 */
    handleExport() {
      this.$modal.confirm('是否确认导出工单数据?').then(() => {
        // 处理查询参数
        // let params = {...this.listQuery};
        // params.current = 1;
        // params.size = 999;
        this.exportLoading = true;
        return exportExcel({
          factorys: this.listQuery.factorys,
          orderStatus: this.listQuery.orderStatus,
          time: this.listQuery.time
        });
      }).then(response => {
        this.$download.excel(response, '工单数据.xls');
        this.exportLoading = false;
      }).catch(() => {})
    },
	},
};
</script>

<style scoped>
/* .blueTip { */
	/* padding-bottom: 10px; */
/* } */
/* .blueTi */
.view {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex: 1;
}
.blueTip::before{
  display: inline-block;
  content: '';
  width: 4px;
  height: 18px;
  background: #0B58FF;
  border-radius: 1px;
  margin-right: 8PX;
  margin-top: 8px;
}
.app-container {
  margin: 0 0px 0;
  background-color: #fff;
  border-radius: 4px;
  padding: 16px 16px 0;
  height: calc(100vh - 134px);
  overflow: auto;
}
</style>