jonhon-mes-web/src/views/energyManagement/peakFlatValley.vue

<template>
  <basic-container>
    <avue-crud :option="option" :table-loading="loading" :data="data" v-model="form" v-model:page="page" ref="crud"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      <template #menu-left>
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-button type="danger" @click="handleDelete">删除</el-button>
      </template>
      <template #menu-right> </template>
      <template #menu="scope">
        <el-button type="primary" text @click="handleEdit(scope.row)">修改</el-button>
        <el-button type="primary" text @click="rowDel(scope.row)">删除</el-button>
      </template>
    </avue-crud>
    <addBatchPeak 
      v-if="showDialog" 
      :showDialog="showDialog" 
      :title="title" 
      :moldAddMore="moldAddMore"
      @closeDialog="closeDialog"
      :checkRow="checkRow"
    ></addBatchPeak>
  </basic-container>
</template>
<script>
import addBatchPeak from "@/views/energyManagement/components/addBatchPeak.vue";
import {pageList,removeItem} from '@/api/energyManagement/peakFlat'
export default {
  components: { addBatchPeak },
  data() {
    return {
      loading:false,
      selectionList: [],
      showDialog:false,
      title:'',
      moldAddMore:false,
      option: {
        height: "auto",
        calcHeight: 32,
        tip: false,
        simplePage: true,
        searchShow: true,
        searchMenuSpan: 18,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: true,
        selection: true,
        viewBtn: false,
        delBtn: false,
        addBtn: false,
        editBtn:false,
        editBtnText: "修改",
        viewBtnIcon: " ",
        delBtnIcon: " ",
        editBtnIcon: " ",
        viewBtnText: "详情",
        labelWidth: 120,
        menuWidth: 120,
        dialogWidth: 1040,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: false,
        filterBtn: true,
        searchShowBtn: false,
        columnSort: true,
        excelBtn: true,
        columnSort: true,
        index: false,
        showOverflowTooltip: true,
        searchLabelPosition: "left",
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: "center",
        gridBtn: false,
        searchMenuPosition: "right",
        addBtnIcon: " ",
        viewBtnIcon: " ",
        delBtnIcon: " ",
        editBtnIcon: " ",
        align: "center",

        column: [
          {
            label: "月份",
            prop: "month",
            sortable: true,
            filter: true,
            span: 24,
            search: true,
            width: 220,
            type: 'month',
            valueFormat:"YYYY-MM",
            format:'YYYY-MM',
            rules: [
              {
                required: true,
                message: "请输入月份",
                trigger: "blur",
              },
            ],
          },
          {
            label: "尖时一开始",
            prop: "sharpOneStartTime",
            search: false,
            sortable: true,
            filter: true,
            span: 12,
            width: 140,
            type: "time",
            format: 'HH:mm:ss',
            valueFormat: 'HH:mm:ss',
          },
          {
            label: "尖时一结束",
            prop: "sharpOneEndTime",
            search: false,
            sortable: true,
            filter: true,
            span: 12,
            width: 140,
            type: "time",
            format: 'HH:mm:ss',
            valueFormat: 'HH:mm:ss',
          },
          {
            label: "峰时一开始",
            prop: "peakOneStartTime",
            search: false,
            sortable: true,
            filter: true,
            span: 12,
            width: 140,
            type: "time",
            format: 'HH:mm:ss',
            valueFormat: 'HH:mm:ss',
          },
          {
            label: "峰时一结束",
            prop: "peakOneEndTime",
            search: false,
            sortable: true,
            filter: true,
            span: 12,
            width: 130,
            type: "time",
            format: 'HH:mm:ss',
            valueFormat: 'HH:mm:ss',
          },
          {
            label: "平时一开始",
            prop: "flatOneStartTime",
            search: false,
            sortable: true,
            filter: true,
            span: 12,
            width: 130,
            type: "time",
            format: 'HH:mm:ss',
            valueFormat: 'HH:mm:ss',
          },
          {
            label: "平时一结束",
            prop: "flatOneEndTime",
            search: false,
            sortable: true,
            filter: true,
            span: 12,
            width: 130,
            type: "time",
            format: 'HH:mm:ss',
            valueFormat: 'HH:mm:ss',
          },
          {
            label: "谷时一开始",
            prop: "valleyOneStartTime",
            search: false,
            sortable: true,
            filter: true,
            span: 12,
            width: 130,
            type: "time",
            format: 'HH:mm:ss',
            valueFormat: 'HH:mm:ss',
          },
          {
            label: "谷时一结束",
            prop: "valleyOneEndTime",
            search: false,
            sortable: true,
            filter: true,
            span: 12,
            width: 130,
            type: "time",
            format: 'HH:mm:ss',
            valueFormat: 'HH:mm:ss',
          },
          {
            label: "尖时二开始",
            prop: "sharpTwoStartTime",
            search: false,
            sortable: true,
            filter: true,
            span: 12,
            width: 130,
            type: "time",
            format: 'HH:mm:ss',
            valueFormat: 'HH:mm:ss',
          },
          {
            label: "尖时二结束",
            prop: "sharpTwoEndTime",
            search: false,
            sortable: true,
            filter: true,
            span: 12,
            width: 130,
            type: "time",
            format: 'HH:mm:ss',
            valueFormat: 'HH:mm:ss',
          },
          {
            label: "峰时二开始",
            prop: "peakTwoStartTime",
            search: false,
            sortable: true,
            filter: true,
            span: 12,
            width: 130,
            type: "time",
            format: 'HH:mm:ss',
            valueFormat: 'HH:mm:ss',
          },
          {
            label: "峰时二结束",
            prop: "peakTwoEndTime",
            search: false,
            sortable: true,
            filter: true,
            span: 12,

            width: 130,
            type: "time",
            format: 'HH:mm:ss',
            valueFormat: 'HH:mm:ss',
          },
          {
            label: "平时二开始",
            prop: "flatTwoStartTime",
            search: false,
            sortable: true,
            filter: true,
            span: 12,
            width: 130,
            type: "time",
            format: 'HH:mm:ss',
            valueFormat: 'HH:mm:ss',
          },
          {
            label: "平时二结束",
            prop: "flatTwoEndTime",
            search: false,
            sortable: true,
            filter: true,
            span: 12,
            width: 130,
            type: "time",
            format: 'HH:mm:ss',
            valueFormat: 'HH:mm:ss',
          },
          
        ],
      },
      query:{},
      form: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      checkRow:{},
    };
  },
  methods: {
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },

    searchChange(params, done){
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad()
      done();
    },
    searchReset(){
      this.query = {}
      this.onLoad()
    },
    currentChange(currentPage){
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize){
      this.page.pageSize = pageSize;
    },
    refreshChange(){
      this.onLoad()
    },
    rowDel(row){
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        removeItem({ids:row.id}).then((res) => {
          if(res.data.code == 200){
            this.$message.success("删除成功");
            this.onLoad();
          }
        });
      })
    },

    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.error("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        removeItem({
          ids:this.selectionList.map(item=>item.id).join(',')
        }).then(res =>{
          if(res.data.code == 200){
            this.$message.success('删除成功')
            this.onLoad()
          }
        })
      });
    },
    handleAdd(){
      this.title = '新增'
      this.moldAddMore = true
      this.showDialog = true
    },
    handleEdit(row){
      this.title = '修改'
      this.moldAddMore = false
      this.checkRow = row
      this.showDialog = true
    },
    closeDialog(val){
      this.showDialog = false
      this.moldAddMore = false
      if(val){
        this.onLoad()
      }
    },
    // 多选
    selectionChange(list) {
      this.selectionList = list;
    },
    onLoad() {
      this.loading = true;
      pageList({
        current:this.page.currentPage,
        size:this.page.pageSize,
        ...this.query
      }).then(res =>{
        this.data = res.data.data.records;
        this.page.total = res.data.data.total;
        this.loading = false;
      })
      // this.data = [
      //   {
      //     createMan: {
      //       accountId: null,
      //       card: null,
      //       createTime: "2023-05-23",
      //       curStatus: 1,
      //       deleted: false,
      //       deptName: null,
      //       dimissionTime: null,
      //       factoryId: 41,
      //       head: 0,
      //       jobName: "开发",
      //       keyValue: 561,
      //       ldapName: "zhx",
      //       mail: null,
      //       mobile: null,
      //       pfDepartment: {
      //         appLink: null,
      //         createTime: "2022-08-31",
      //         deleted: false,
      //         deptCode: "001",
      //         deptId: 1,
      //         deptName: "MES开发部",
      //         deptType: 1,
      //         deptTypeTitle: "厂",
      //         keyValue: 1,
      //         memo: null,
      //         orders: "00",
      //         parentDeptId: null,
      //         parentPath: null,
      //         ucDeptId: null,
      //         updateTime: "2022-08-31 16:32:46",
      //       },
      //       pinyinIndex: "ZHANGXIN,ZX",
      //       ucUserId: null,
      //       updateTime: "2023-05-23 10:58:43",
      //       userCode: "zhx",
      //       userId: 561,
      //       userName: "张欣",
      //       userSex: 1,
      //       userSources: "张欣",
      //       userString: "561:A:张欣",
      //       userType: "A",
      //     },
      //     peakOneEndTime: "02:00:00",
      //     peakTwoEndTime: "16:00:00",
      //     peakOneStartTime: "01:00:00",
      //     peakTwoStartTime: "13:00:00",
      //     valleyOneEndTime: "09:00:00",
      //     guTimeEndTwo: "16:00:00",
      //     valleyOneStartTime: "07:00:00",
      //     guTimeStartTwo: "15:00:00",
      //     keyValue: 1,
      //     pfvId: 1,
      //     pfvMonth: "2025-06-01 00:00:00",
      //     flatOneEndTime: "03:04:00",
      //     flatTwoEndTime: "15:00:00",
      //     flatOneStartTime: "02:00:00",
      //     flatTwoStartTime: "05:00:00",
      //     updateTime: "2025-10-23 11:38:01",
      //   },
      // ];
      // this.page.total = this.data.length;
      // this.loading = false;
      // setTimeout(() => {
      //   this.selectionClear();
      // }, 500);
    },
  },
};
</script>
<style lang="scss" scoped></style>