gjerp_ui/src/views/jhzx/jtsyCX.vue

<template>
  <!-- 集团三月滚动计划查询 -->
  <el-container>
    <el-header style="width: 100%">
      <el-form ref="requestForm" :model="request" label-width="60px">
        <div class="flex-form">
          <div class="flex-query">
            <el-form-item label="计划期:" style="width: 350px">
              <div class="date-flex">
                <el-date-picker
                  v-model="request.dateStart"
                  type="date"
                  value-format="yyyy/MM/dd"
                  @change="changeDateStart"
                  :picker-options="pickerOptionsStart"
                >
                </el-date-picker>
                <div class="center">~</div>
                <el-date-picker
                  v-model="request.dateEnd"
                  type="date"
                  value-format="yyyy/MM/dd"
                  @change="changeDateEnd"
                  :picker-options="pickerOptionsEnd"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item label="状态:" style="width: 350px">
              <el-select v-model="request.Zt" placeholder="状态" clearable>
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div style="width: 100%; text-align: right">
            <el-button type="primary" @click="initList()">查询</el-button>
          </div>
        </div>
      </el-form>
    </el-header>
    <el-container style="padding-top: 10px">
      <el-container>
        <el-main>
          <div class="mytable">
            <vxe-grid
              id="id"
              ref="tableRef"
              border
              resizable
              keep-source
              :height="height"
              :auto-resize="true"
              :columns="tableColumn"
              :data="list"
              :custom-config="{ storage: true }"
              :scroll-y="{ enabled: true }"
              highlight-hover-row
            >
              <template #Zt_default="{ row }">
                <div v-for="(item, index) in statusOptions" :key="index">
                  <div v-if="row.zt === item.value">{{ item.label }}</div>
                </div>
              </template>
            </vxe-grid>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import { getList } from "@/api/jhzx/jtsyWH";
export default {
  name: "jtsyCX",
  data() {
    return {
      request: {
        dateStart: "",
        dateEnd: "",
        Zt: "",
      },
      list: [],
      height: "500px",
      tableColumn: [
        {
          type: "seq",
          width: "50",
          title: "序号",
          align: "center",
          fixed: "left",
        },
        {
          field: "dcCh",
          title: "船号",
          align: "center",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "dcPl",
          title: "批量",
          align: "center",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "dcFd",
          title: "分段",
          align: "center",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "jhrq",
          title: "计划期",
          align: "center",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "zt",
          title: "状态",
          align: "center",
          slots: { default: "Zt_default" },
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "bz",
          title: "备注",
          align: "center",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "bzy",
          title: "编制人",
          align: "center",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
        {
          field: "bzrq",
          title: "编制日期",
          align: "center",
          filters: [
            {
              data: {
                checks: [],
                sVal: "",
                sMenu: "",
                fType1: "",
                fVal1: "",
                fMode: "and",
                fType2: "",
                fVal2: "",
              },
            },
          ],
          filterRender: { name: "FilterCombination" },
        },
      ],
      statusOptions: [
        {
          value: "0",
          label: "未审核",
        },
        {
          value: "1",
          label: "已审核",
        },
      ],
      pickerOptionsEnd: {
        disabledDate: this.disabledDateEnd,
      },
      pickerOptionsStart: {
        disabledDate: this.disabledDateStart,
      },
    };
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    this.initList();
  },
  methods: {
    // 获取三个月后日期
    getFutureMonthDay(sourceDate, monthNum = 3) {
      const d = new Date(sourceDate);
      //来源
      const SY = d.getFullYear();
      const SM = d.getMonth();
      const SD = d.getDate();
      //结果
      const mydate = new Date(
        SY,
        String(SM + monthNum).padStart(2, "0"),
        String(SD).padStart(2, "0")
      );
      const yyyy = mydate.getFullYear();
      let MM = (mydate.getMonth() + 1).toString().padStart(2, "0");
      let dd = mydate.getDate().toString().padStart(2, "0");
      //如果月份是2月，就进行闰年和非闰年处理，防止出现类似2月30的情况
      if (MM == 2 && dd > 28) {
        if (yyyy % 100 == 0 && yyyy % 400 == 0) {
          dd = 29;
        } else if (yyyy % 100 != 0 && yyyy % 4 == 0) {
          dd = 29;
        } else {
          dd = 28;
        }
      }
      return `${yyyy}/${MM}/${dd}`;
    },
    // 获取列表接口
    initList() {
      let params = {
        Zt: this.request.Zt,
        jhrq: "",
      };
      if (this.request.dateStart && this.request.dateEnd) {
        params.jhrq = this.request.dateStart + "~" + this.request.dateEnd;
      } else {
        params.jhrq = "";
      }
      getList(params).then((res) => {
        if (res.success) {
          this.list = res.data;
          this.checkedList = [];
        }
      });
    },

    // 选择开始日期
    changeDateStart(value) {
      if (value) {
        this.request.dateEnd = this.getFutureMonthDay(value, 3);
      }
    },
    changeDateEnd(value) {},
    // 开始日期限制
    disabledDateStart(time) {
      const beginDateVal = this.request.dateEnd;
      if (beginDateVal) {
        return (
          time.valueOf() >=
          new Date(beginDateVal).valueOf() - 24 * 60 * 60 * 1000 + 1
        );
      }
    },
    // 结束日期限制
    disabledDateEnd(time) {
      const beginDateVal = this.request.dateStart;
      if (beginDateVal) {
        return (
          time.valueOf() <=
          new Date(beginDateVal).valueOf() - 24 * 60 * 60 * 1000 + 1
        );
      }
    },
    getHeight() {
      this.height = window.innerHeight - 160;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-header {
  margin: 0;
  padding: 5px 0;
  height: auto;
}
.el-container {
  padding: 0;
  margin: 0;
}
.el-main {
  padding: 0;
}
.el-col {
  padding: 0;
}
.el-aside {
  background: #fff;
  padding: 0;
}
.el-container {
  padding: 0;
}
.el-row {
  margin-bottom: 5px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.tableStyles {
  background: #0a76a4;
}
.my-dropdown {
  width: 450px;
  height: 250px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  font-size: 12px;
}
::v-deep .mytable .vxe-input {
  display: flex !important;
}
.upload-demo {
  display: inline-flex;
  margin-right: 10px;
}
::v-deep .el-upload-list {
  display: none !important;
}
::v-deep .el-form-item {
  margin-bottom: 0px !important;
}
::v-deep .el-date-editor.el-input__inner {
  width: auto !important;
}
.date-flex {
  display: flex;
  .center {
    margin-left: 5px;
    margin-right: 5px;
  }
}
.flex-form {
  display: flex;
  .flex-query {
    display: flex;
    align-items: center;
  }
}
</style>