JG-ADMIN-TEMP/src/views/report/statistics/processanomaly/index.vue

<template>
  <div class="mainContentBox">
    <avue-crud ref="crudRef1" v-model:search="data1.search" :data="data1.data" :option="data1.option"
      v-model:page="data1.page" @row-save="createRow" @row-update="updateRow" @row-del="deleteRow"
      @search-change="searchChange" @search-reset="resetChange" @size-change="dataList" @current-change="dataList"
      @selection-change="selectionChange" @cell-click="ckickCell">
      <template #menu="{ row, index, type }">
        <el-button @click="ckickCell(row)" icon="el-icon-view" text type="primary">查看</el-button>
      </template>
      <template #menu-right="{}">
        <el-button class="ml-3" @click="
          data1.Utils.exportData(
            '/api/v1/process/census/abnormalOperation/export'
          )
          ">
          <template #icon> <i-ep-download /> </template>导出
        </el-button>
      </template>
    </avue-crud>
    <el-dialog v-model="editDialog.visible" :title="editDialog.title" width="1200px"
      @close="editDialog.visible = false">
      <div class="mainContentBox">
        <avue-crud ref="crudRef2" v-model:search="data2.search" :data="data2.data" :option="data2.option"
          v-model:page="data2.page" @row-update="data2.Methords.updateRow" @row-del="data2.Methords.deleteRow"
          @search-change="data2.Methords.dataList" @search-reset="data2.Methords.resetChange"
          @size-change="data2.Methords.dataList" @current-change="data2.Methords.dataList"
          @selection-change="data2.Methords.selectionChange">
          <template #menu-right="{}">
            <el-button class="ml-3" @click="
              data2.Utils.exportData(
                '/api/v1/process/census/abnormalOperationDetails/export'
              )
              ">
              <template #icon> <i-ep-download /> </template>导出
            </el-button>
          </template></avue-crud>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import { useCommonStoreHook, useDictionaryStoreHook } from "@/store";
import dictDataUtil from "@/common/configs/dictDataUtil";
import editSkill from "@/views/base/skill/components/edit-skill.vue";
import { getEchartData } from "@/api/report";
import * as echarts from "echarts";
// 数据字典相关
const { dicts } = useDictionaryStoreHook();
const editDialog = ref({ visible: false, title: "订单详情" });
const key = ref(false);
// const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
//   useCrud({
//     src: "/api/v1/process/census/completeOrder",
//   });
// ;
const data1 = ref(
  useCrud({
    src: "/api/v1/process/census/abnormalOperation",
  })
);
const data2 = ref(
  useCrud({
    src: "/api/v1/process/census/abnormalOperationDetails",
  })
);
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  data1.value.Methords;

const { selectionChange, multipleDelete } = data1.value.Methords;

const ckickCell = (row) => {
  data2.value.search.workOrderCode = row.workOrderCode;
  data2.value.search.operationCode = row.operationCode
  data2.value.search.searchTime = data1.value.search.searchTime;
  editDialog.value.visible = true;
};
// 设置表格列或者其他自定义的option
data1.value.option = Object.assign(data1.value.option, {
  selection: false,
  menu: true,
  menuWidth: 100,
  addBtn: false,
  filterBtn: false,
  searchShowBtn: false,
  columnBtn: false,
  gridBtn: false,
  editBtn: false,
  viewBtn: false,
  delBtn: false,
  column: [
    {
      label: "日期范围",
      prop: "searchTime",
      search: true,
      hide: true,
      type: "date",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD",
      searchRange: true,
      startPlaceholder: "开始日期",
      endPlaceholder: "结束日期",
    },
    {
      label: "订单编码",
      prop: "orderCode",
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "订单名称",
      prop: "orderName",
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "物料编码",
      prop: "materialCode",
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "工单编码",
      prop: "workOrderCode	",
      width: 140,
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "订单名称",
      prop: "orderName",
      search: false,
    },
    {
      label: "订单编码",
      prop: "orderCode",
      search: false,
    },
    {
      label: "工单编码",
      prop: "workOrderCode",
      search: false,
    },
    {
      label: "工单数量",
      prop: "planNum",
      search: false,
    },
    {
      label: "物料编码",
      prop: "materialCode",
      search: false,
    },
    {
      label: "物料名称",
      prop: "materialName",
      search: false,
    },
    {
      label: "物料规格",
      prop: "materialModel",
      search: false,
    },
    {
      label: "工序编码",
      prop: "operationCode",
      search: false,
    },
    {
      label: "工序名称",
      prop: "operationName",
      search: false,
    },
    {
      label: "异常数量",
      prop: "count",
      search: false,
    },
  ],
});
data2.value.option = Object.assign(data2.value.option, {
  selection: false,
  addBtn: false,
  filterBtn: false,
  searchShowBtn: false,
  menu: false,
  addBtn: false,
  filterBtn: false,
  searchShowBtn: false,
  columnBtn: false,
  gridBtn: false,
  editBtn: false,
  viewBtn: false,
  delBtn: false,
  column: [
    {
      label: "订单名称",
      prop: "orderName",
      search: false,
    },
    {
      label: "订单编码",
      prop: "orderCode",
      search: false,
    },
    {
      label: "工单编码",
      prop: "workOrderCode",
      search: false,
    },
    {
      label: "物料编码",
      prop: "materialCode",
      search: false,
    },
    {
      label: "物料名称",
      prop: "materialName",
      search: false,
    },
    {
      label: "物料规格",
      prop: "materialModel",
      search: false,
    },
    {
      label: "工序编码",
      prop: "operationCode",
      search: false,
    },
    {
      label: "工序名称",
      prop: "operationName",
      search: false,
    },
    {
      label: "工位",
      prop: "stationName",
      search: false,
    },
    {
      label: "流转卡号",
      prop: "seqNo",
      search: false,
    },
    {
      label: "开始时间",
      prop: "realStartWhen",
      search: false,
    },
    {
      label: "结束时间",
      prop: "realEndWhen",
      search: false,
    },
    {
      label: "标准用时",
      prop: "standardWorktime",
      search: false,
    },
    {
      label: "总共用时",
      prop: "totalTime",
      search: false,
    },
  ],
});

const getCurrentMonthStartAndEndDates = () => {
  // 获取当前日期
  let now = new Date();

  // 获取当前月份的第一天
  let startDate = new Date(now.getFullYear(), now.getMonth(), 1);

  // 获取当前月份的最后一天
  let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);

  // 格式化日期为'YYYY-MM-DD'格式
  function formatDate(date) {
    let year = date.getFullYear();
    let month = String(date.getMonth() + 1).padStart(2, "0");
    let day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  }

  // 返回包含开始和结束日期的数组
  return [formatDate(startDate), formatDate(endDate)];
};

//设置搜索条件中的时间范围为默认此月
const setTime = () => {
  data1.value.search.searchTime = getCurrentMonthStartAndEndDates();
};

onMounted(async () => {
  setTime();
  dataList();
});
watch(
  () => editDialog.value.visible,
  () => {
    if (editDialog.value.visible == true) {
      data2.value.Methords.dataList();
    } else {
      key.value = !key.value;
    }
  }
);
</script>
<style lang="scss" scoped>
:deep(.avue-crud__left) {
  width: 100%;
}
</style>