gjerp_ui/src/views/jhzx/zrcWH.vue

<template>
  <!-- 中日程计划维护 -->
  <el-container>
    <el-header style="width: 100%">
      <el-row>
        <el-col :span="18">
          <el-col :span="4">
            <el-select v-model="request.dcCh" placeholder="船号" clearable>
              <el-option
                v-for="item in ShipNoList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button type="success" @click="toolbarButtonClickEvent('submit')"
            >提交</el-button
          >
          <el-button type="primary" @click="initList()">查询</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-col :span="4">
            <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-col>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <div class="upload-demo">
            <el-upload
              action="#"
              accept=".xls,.xlsx"
              :multiple="false"
              :file-list="fileList"
              :http-request="actionUpload"
            >
              <el-button size="mini" type="primary">导入</el-button>
            </el-upload>
          </div>
          <el-button type="primary" @click="toolbarButtonClickEvent('save')"
            >保存</el-button
          >
        </el-col>
      </el-row>
    </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 }"
              @checkbox-all="selectAllEvent"
              @checkbox-change="selectChangeEvent"
              highlight-hover-row
            >
              <template #dcCh_default="{ row }">
                {{ row.dcCh }}
              </template>
              <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, tj, save, upload } from "@/api/jhzx/zrcWH";
export default {
  name: "zrcWH",
  data() {
    return {
      request: {
        dcCh: "",
        Zt: "0",
      },
      list: [],
      height: "500px",
      tableColumn: [
        { type: "checkbox", width: 50, fixed: "left" },
        { type: "seq", width: 60, title: "序号", fixed: "left" },
        {
          field: "dcCh",
          title: "船号",
          slots: { default: "dcCh_default" },
          minWidth: "70",
        },
        {
          field: "qy",
          title: "区域",
          minWidth: "70",
        },
        {
          field: "zdh",
          title: "总段号",
          minWidth: "70",
        },
        {
          field: "yzd",
          title: "预组段",
          minWidth: "70",
        },
        {
          field: "dcFD",
          title: "分段号",
          minWidth: "70",
        },
        {
          field: "ZL",
          title: "重量",
          minWidth: "70",
        },
        {
          field: "dcPL",
          title: "批量号",
          minWidth: "70",
        },
        {
          field: "kssjDz",
          title: "大组开始",
          minWidth: "70",
        },
        {
          field: "gjjsDz",
          title: "钢加大组结束",

          minWidth: "120",
        },
        {
          field: "jssjXz",
          title: "小组结束",
          minWidth: "70",
        },
        {
          field: "xzzq",
          title: "小组周期",
          minWidth: "70",
        },
        {
          field: "kssjXz",
          title: "小组开始",
          minWidth: "70",
        },
        {
          field: "xbzl",
          title: "线表重量",
          minWidth: "70",
        },
        {
          field: "gjjsDzPl",
          title: "批量表（钢加大组结束）",
          minWidth: "120",
        },
        {
          field: "LP",
          title: "时间差（L-P）",
          minWidth: "120",
        },
        {
          field: "gjjsXz",
          title: "钢加小组结束",
          minWidth: "120",
        },
        {
          field: "gjjsXzPl",
          title: "批量表（钢加小组结束）",
          minWidth: "120",
        },
        {
          field: "RS",
          title: "时间差（R-S）",
          minWidth: "120",
        },
        {
          field: "gjks",
          title: "钢加开始",
          minWidth: "70",
        },
        {
          field: "gjksPl",
          title: "批量表（钢加开始）",
          minWidth: "120",
        },
        {
          field: "UV",
          title: "时间差（U-V）",
          minWidth: "90",
        },
        {
          field: "xfqTlt",
          title: "套料图下发",
          minWidth: "90",
        },
        {
          field: "jsqTlt",
          title: "套料图接收",
          minWidth: "90",
        },
        {
          field: "xfqLqb",
          title: "板材领取表下发",
          minWidth: "120",
        },
        {
          field: "jsqLqb",
          title: "板材领取表接收",
          minWidth: "90",
        },
        {
          field: "xfqPtb",
          title: "零件配套表下发",
          minWidth: "120",
        },
        {
          field: "jsqPtb",
          title: "零件配套表接收",
          minWidth: "90",
        },
        {
          field: "dhqd",
          title: "订货清单号",
          minWidth: "90",
        },
        {
          field: "xfqDhqd",
          title: "订货清单下发",
          minWidth: "90",
        },
        {
          field: "sjdhq",
          title: "实际订货日期",
          minWidth: "90",
        },
        {
          field: "bcdq",
          title: "板材计划到齐",
          minWidth: "90",
        },
        {
          field: "Zt",
          title: "状态",
          slots: { default: "Zt_default" },
          minWidth: "50",
          fixed: "right",
        },
      ],
      statusOptions: [
        {
          value: "0",
          label: "编辑",
        },
        {
          value: "1",
          label: "提交",
        },
        {
          value: "2",
          label: "审核",
        },
      ],
      fileList: [],
      ShipNoList: [],
      checkedList: [],
    };
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    this.initList();
  },
  methods: {
    // 获取列表接口(船号)
    initList() {
      let params = {
        Zt: this.request.Zt,
        dcCh: "",
      };
      if (this.ShipNoList.length > 0 && this.request.dcCh) {
        params.dcCh = this.ShipNoList[this.request.dcCh - 1].label;
      } else {
        params.dcCh = "";
      }
      getList(params).then((res) => {
        this.list = res.data;
        this.checkedList = [];
        this.ShipNoList = [];
        var arrList = [];
        if (this.list.length > 0) {
          this.list.forEach((item, index) => {
            arrList.push(item.dcCh);
            this.ShipNoList = [];
            Array.from(new Set(arrList)).forEach((em, eindex) => {
              this.ShipNoList.push({
                label: em,
                value: eindex + 1,
              });
            });
          });
        }
      });
    },
    // 上传excel
    actionUpload(file) {
      const formData = new FormData();
      formData.append("file", file.file);
      upload(formData).then((res) => {
        if (res.success) {
          this.list = res.data;
          this.$message.success("导入成功！");
          this.checkedList = [];
          this.ShipNoList = [];
          var arrList = [];
          if (this.list.length > 0) {
            this.list.forEach((item, index) => {
              arrList.push(item.dcCh);
              this.ShipNoList = [];
              Array.from(new Set(arrList)).forEach((em, eindex) => {
                this.ShipNoList.push({
                  label: em,
                  value: eindex + 1,
                });
              });
            });
          }
        }
      });
    },
    // 全选
    selectAllEvent() {
      const records = this.$refs.tableRef.getCheckboxRecords();
      this.checkedList = records;
    },
    // 单选
    selectChangeEvent() {
      const records = this.$refs.tableRef.getCheckboxRecords();
      this.checkedList = records;
    },
    // 操作
    async toolbarButtonClickEvent(code) {
      switch (code) {
        case "submit":
          if (this.checkedList.length > 0) {
            this.$confirm("是否确认提交选择的数据?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                tj(this.checkedList).then((res) => {
                  if (res.success) {
                    const xTable = this.$refs.tableRef;
                    xTable.loadData(this.initList());
                    this.$message.success("提交成功！");
                  }
                });
              })
              .catch(() => {});
          } else {
            this.$message.warning("请选择数据！");
          }
          break;
        case "save":
          if (this.checkedList.length > 0) {
            this.$confirm("是否确认保存选择的数据?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                save(this.checkedList).then((res) => {
                  if (res.success) {
                    const xTable = this.$refs.tableRef;
                    xTable.loadData(this.initList());
                    this.$message.success("保存成功！");
                  }
                });
              })
              .catch(() => {});
          } else {
            this.$message.warning("请选择数据！");
          }
          break;
        default:
          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;
}
.upload-demo {
  display: inline-flex;
  margin-right: 10px;
}
::v-deep .el-upload-list {
  display: none !important;
}
</style>