gjerp_ui/src/views/sjzx/gcrlWH.vue

<template>
  <!-- 工厂日历维护 -->
  <el-container>
    <el-header style="width: 100%">
      <el-form ref="requestForm" :model="request" label-width="45px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="年份:">
              <el-input v-model="request.nf" placeholder="年份" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="20" style="text-align: right">
            <el-button
              type="success"
              @click="toolbarButtonClickEvent('generate')"
              >一键生成</el-button
            >
            <el-button type="primary" @click="initList()">查询</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right">
            <el-button type="primary" @click="toolbarButtonClickEvent('save')"
              >保存</el-button
            >
          </el-col>
        </el-row>
      </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 }"
              :edit-config="{
                trigger: 'click',
                mode: 'row',
                showStatus: true,
              }"
              highlight-hover-row
            >
            </vxe-grid>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import { getList, generate, update } from "@/api/sjzx/gcrlWH";
import { mapGetters } from "vuex";
export default {
  name: "gcrlWH",
  data() {
    return {
      request: {
        nf: "",
      },
      list: [],
      height: "500px",
      tableColumn: [
        { type: "seq", width: "50", title: "序号", align: "center" },
        {
          field: "gzlr",
          title: "工作日历",
          align: "center",
        },
        {
          field: "gl",
          title: "公历",
          align: "center",
        },
        {
          field: "xq",
          title: "星期",
          align: "center",
        },
        {
          field: "yz",
          title: "月周",
          align: "center",
        },
        {
          field: "nz",
          title: "年周",
          align: "center",
        },
        {
          field: "nf",
          title: "年份",
          align: "center",
        },
        {
          field: "xxr",
          title: "类型",
          align: "center",
          editRender: {
            name: "$select",
            options: [],
            props: { clearable: true },
          },
        },
        {
          field: "bz",
          title: "备注",
          align: "center",
          editRender: { name: "input" },
        },
      ],
      typeOption: [
        {
          value: "0",
          label: "休息日",
        },
        {
          value: "1",
          label: "工作日",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["name", "bmbm"]),
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    this.typeList();
    this.initList();
  },
  methods: {
    typeList() {
      this.$nextTick(() => {
        const tableRef = this.$refs.tableRef;
        const typeText = tableRef.getColumnByField("xxr");
        typeText.editRender.options = this.typeOption;
      });
    },
    // 获取列表接口
    initList() {
      getList(this.request).then((res) => {
        this.list = res.data;
      });
    },
    // 操作
    async toolbarButtonClickEvent(code) {
      const { updateRecords } = this.$refs.tableRef.getRecordset();
      switch (code) {
        case "generate":
          generate().then((res) => {
            if (res.success) {
              const xTable = this.$refs.tableRef;
              xTable.loadData(this.initList());
              this.$message({ message: "生成成功！", type: "success" });
            }
          });
          break;
        case "save":
          const valid = this.$refs.tableRef;
          if (valid) {
            const errMap = await valid.validate(true);
            if (errMap) {
              return false;
            } else {
              //  修改
              if (updateRecords.length !== 0) {
                this.$confirm("是否确认保存选中的数据?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                })
                  .then(() => {
                    update(updateRecords).then((res) => {
                      if (res.success) {
                        const xTable = this.$refs.tableRef;
                        xTable.loadData(this.initList());
                        this.$message({
                          message: "保存成功！",
                          type: "success",
                        });
                      }
                    });
                  })
                  .catch(() => {});
              }
            }
          }
          break;
      }
    },
    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;
}
::v-deep .el-form-item {
  margin-bottom: 0px !important;
}
::v-deep .el-input {
  width: auto !important;
}
</style>