ECS5 / ECS5.0Web · Files

<template>
  <div class="app-container">
    <div class="app-container-father">
      <div class="dv-container-left">
        <div class="dv-container-left-component">
          <div class="component-left">任务号：</div>
          <div class="component-right">
            <el-input v-model="queryConfig.taskNumber" />
          </div>
        </div>

        <div class="dv-container-left-component">
          <div class="component-left">远程任务号：</div>
          <div class="component-right">
            <el-input v-model="queryConfig.remoteTask" />
          </div>
        </div>

        <div class="dv-container-left-component">
          <div class="component-left">容器号：</div>
          <div class="component-right">
            <el-input v-model="queryConfig.barcode" />
          </div>
        </div>

        <div class="dv-container-left-component">
          <div class="component-left">起点：</div>
          <div class="component-right">
            <el-input v-model="queryConfig.from" />
          </div>
        </div>

        <div class="dv-container-left-component">
          <div class="component-left">终点：</div>
          <div class="component-right">
            <el-input v-model="queryConfig.to" />
          </div>
        </div>

        <div class="dv-container-left-component">
          <div class="component-left">任务状态：</div>
          <div class="component-right">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>

        <div class="dv-container-left-component">
          <div class="component-left">开始时间：</div>
          <div class="component-right">
            <el-date-picker
              v-model="form.startTime"
              type="datetime"
              placeholder="选择日期时间"
            />
          </div>
        </div>

        <div class="dv-container-left-component">
          <div class="component-left">结束时间：</div>
          <div class="component-right">
            <el-date-picker
              v-model="form.endTime"
              type="datetime"
              placeholder="选择日期时间"
            />
          </div>
        </div>
        <!-- button -->
        <div class="button-container">
          <el-button class="T1" @click="btnAction()">查询</el-button>
          <el-button class="T1" @click="btnAdd()">新增</el-button>
          <el-button class="T1">删除</el-button>
        </div>
        <div class="button-container">
          <el-button class="T1">下发</el-button>
          <el-button class="T1">导出</el-button>
        </div>
        <div class="button-containerTwo">
          <el-button class="T1" type="danger" @click="forceComplete()"
            >强制完成</el-button
          >
          <el-button class="T1" type="warning" @click="maintenance()"
            >维护</el-button
          >
        </div>
      </div>
      <div class="dv-container-right">
        <el-table
          v-loading="listLoading"
          :data="sysTable"
          element-loading-text="Loading"
          border
          fit
          height="700"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center" width="55">
          </el-table-column>
          <el-table-column align="center" label="内部ID">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column label="远程任务号" width="100">
            <template slot-scope="scope">
              {{ scope.row.remoteTask }}
            </template>
          </el-table-column>
          <el-table-column label="远程前置任务号" width="120">
            <template slot-scope="scope">
              {{ scope.row.preRemoteTask }}
            </template>
          </el-table-column>
          <el-table-column label="容器号">
            <template slot-scope="scope">
              {{ scope.row.barcode }}
            </template>
          </el-table-column>
          <el-table-column label="任务类型">
            <template slot-scope="scope">
              {{ scope.row.type }}
            </template>
          </el-table-column>
          <el-table-column label="任务状态">
            <template slot-scope="scope">
              {{ scope.row.status }}
            </template>
          </el-table-column>
          <el-table-column label="起点">
            <template slot-scope="scope">
              {{ scope.row.from }}
            </template>
          </el-table-column>
          <el-table-column label="终点">
            <template slot-scope="scope">
              {{ scope.row.to }}
            </template>
          </el-table-column>
          <el-table-column label="途径点">
            <template slot-scope="scope">
              {{ scope.row.approachPoint }}
            </template>
          </el-table-column>
          <el-table-column label="当前节点">
            <template slot-scope="scope">
              {{ scope.row.current }}
            </template>
          </el-table-column>
          <el-table-column label="优先级">
            <template slot-scope="scope">
              {{ scope.row.priority }}
            </template>
          </el-table-column>
          <el-table-column label="阶段">
            <template slot-scope="scope">
              {{ scope.row.mStage }}
            </template>
          </el-table-column>
          <el-table-column label="任务回传">
            <template slot-scope="scope">
              {{ scope.row.commit }}
            </template>
          </el-table-column>
          <el-table-column label="长">
            <template slot-scope="scope">
              {{ scope.row.length }}
            </template>
          </el-table-column>
          <el-table-column label="宽">
            <template slot-scope="scope">
              {{ scope.row.width }}
            </template>
          </el-table-column>
          <el-table-column label="高">
            <template slot-scope="scope">
              {{ scope.row.height }}
            </template>
          </el-table-column>
          <el-table-column label="重">
            <template slot-scope="scope">
              {{ scope.row.weight }}
            </template>
          </el-table-column>
          <el-table-column label="货物类型">
            <template slot-scope="scope">
              {{ scope.row.goodsType }}
            </template>
          </el-table-column>
          <el-table-column label="仓库">
            <template slot-scope="scope">
              {{ scope.row.warehouseCode }}
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="queryConfig.currentPage"
            :page-size="queryConfig.pageSize"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!-- 新增弹框 -->
      <el-dialog title="新增" :visible.sync="dialogFormVisible">
        <div class="container">
          <div class="box">
            <div class="inner-left">任务类型：</div>
            <div class="inner-right">
              <el-select v-model="elDialog.taskType" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="box">
            <div class="inner-left">优先级：</div>
            <div class="inner-right">
              <el-input v-model="elDialog.priority" />
            </div>
          </div>
          <div class="box">
            <div class="inner-left">容器号：</div>
            <div class="inner-right">
              <el-input v-model="elDialog.barcode" />
            </div>
          </div>
          <div class="box">
            <div class="inner-left">起点：</div>
            <div class="inner-right">
              <el-input v-model="elDialog.from" />
            </div>
          </div>
          <div class="box">
            <div class="inner-left">途径点：</div>
            <div class="inner-right">
              <el-input v-model="elDialog.approachPoint" />
            </div>
          </div>
          <div class="box">
            <div class="inner-left">终点：</div>
            <div class="inner-right">
              <el-input v-model="elDialog.to" />
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false"
            >创 建</el-button
          >
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>

      <el-dialog title="新增" :visible.sync="dialogFormVisibleTwo">
        <div class="containerTwo">
          <div class="box1">
            <div>当前任务号：</div>
            <div><el-button class="">修改</el-button></div>
          </div>
          <div class="box2">
            <div class="small-box">
              <div class="inner-box1">远程任务维护</div>
              <div class="inner-box2">
                <div class="inner-inner-box1">
                  <div class="inner-inner-inner-box1">远程任务号：</div>
                  <div class="inner-inner-inner-box2">
                    <el-input v-model="queryConfig.taskNumber" />
                  </div>
                  <div class="inner-inner-inner-box3">
                    <el-button class="">修改</el-button>
                  </div>
                </div>
                <div class="inner-inner-box2">
                  <div class="inner-inner-inner-box1">前置远程任务号：</div>
                  <div class="inner-inner-inner-box2">
                    <el-input v-model="queryConfig.taskNumber" />
                  </div>
                  <div class="inner-inner-inner-box3">
                    <el-button class="">修改</el-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="small-box">
              <div class="inner-box1">位置维护</div>
              <div class="inner-box2">
                <div class="inner-inner-box1">
                  <div class="inner-inner-inner-box1">起点：</div>
                  <div class="inner-inner-inner-box2">
                    <el-input v-model="queryConfig.taskNumber" />
                  </div>
                  <div class="inner-inner-inner-box3">
                    <el-button class="">修改</el-button>
                  </div>
                </div>
                <div class="inner-inner-box2">
                  <div class="inner-inner-inner-box1">终点：</div>
                  <div class="inner-inner-inner-box2">
                    <el-input v-model="queryConfig.taskNumber" />
                  </div>
                  <div class="inner-inner-inner-box3">
                    <el-button class="">修改</el-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="small-box">
              <div class="inner-box1">阶段维护</div>
              <div class="inner-box2">
                <div class="inner-inner-box1">
                  <div class="inner-inner-inner-box1">任务执行阶段：</div>
                  <div class="inner-inner-inner-box2">
                    <el-input v-model="queryConfig.taskNumber" />
                  </div>
                  <div class="inner-inner-inner-box3">
                    <el-button class="">修改</el-button>
                  </div>
                </div>
                <div class="inner-inner-box2"></div>
              </div>
            </div>
            <div class="small-box">
              <div class="inner-box1">途径点维护</div>
              <div class="inner-box2">
                <div class="inner-inner-box1">
                  <div class="inner-inner-inner-box1">途径点：</div>
                  <div class="inner-inner-inner-box2">
                    <el-input v-model="queryConfig.taskNumber" />
                  </div>
                  <div class="inner-inner-inner-box3">
                    <el-button class="">修改</el-button>
                  </div>
                </div>
                <div class="inner-inner-box2">
                  <div class="inner-inner-inner-box1">添加途径点：</div>
                  <div class="inner-inner-inner-box2">
                    <el-input v-model="queryConfig.taskNumber" />
                  </div>
                  <div class="inner-inner-inner-box3">
                    <el-button class="">修改</el-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="small-box">
              <div class="inner-box1">状态维护</div>
              <div class="inner-box2">
                <div class="inner-inner-box1">
                  <div class="inner-inner-inner-box1">任务状态：</div>
                  <div class="inner-inner-inner-box2">
                    <el-input v-model="queryConfig.taskNumber" />
                  </div>
                  <div class="inner-inner-inner-box3">
                    <el-button class="">修改</el-button>
                  </div>
                </div>
                <div class="inner-inner-box2">优先级维护</div>
              </div>
            </div>
            <div class="small-box">
              <div class="inner-box1">优先级维护</div>
              <div class="inner-box2">
                <div class="inner-inner-box1">
                  <div class="inner-inner-inner-box1">优先级：</div>
                  <div class="inner-inner-inner-box2">
                    <el-input v-model="queryConfig.taskNumber" />
                  </div>
                  <div class="inner-inner-inner-box3">
                    <el-button class="">修改</el-button>
                  </div>
                </div>
                <div class="inner-inner-box2">子 DIV 6-2-2</div>
              </div>
            </div>
            <div class="small-box">
              <div class="inner-box1">当前设备维护</div>
              <div class="inner-box2">
                <div class="inner-inner-box1">
                  <div class="inner-inner-inner-box1">当前设备：</div>
                  <div class="inner-inner-inner-box2">
                    <el-input v-model="queryConfig.taskNumber" />
                  </div>
                  <div class="inner-inner-inner-box3">
                    <el-button class="">修改</el-button>
                  </div>
                </div>
                <div class="inner-inner-box2">子 DIV 7-2-2</div>
              </div>
            </div>
            <div class="small-box">
              <div class="inner-box1">回传维护</div>
              <div class="inner-box2">
                <div class="inner-inner-box1">
                  <div class="inner-inner-inner-box1">任务回传：</div>
                  <div class="inner-inner-inner-box2">
                    <el-input v-model="queryConfig.taskNumber" />
                  </div>
                  <div class="inner-inner-inner-box3">
                    <el-button class="">修改</el-button>
                  </div>
                </div>
                <div class="inner-inner-box2">子 DIV 8-2-2</div>
              </div>
            </div>
          </div>
          <div class="box3">第三个 DIV</div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false"
            >创 建</el-button
          >
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getHostType, getTableList } from "@/api/table";
export default {
  data() {
    return {
      sysTable: [],
      //   查询条件
      queryConfig: {
        currentPage: 1,
        pageSize: 0,
        taskNumber: "",
        remoteTask: "",
        barcode: "",
        from: "",
        to: "",
      },
      //   新增条件
      elDialog: {
        taskType: "",
        priority: "",
        barcode: "",
        from: "",
        approachPoint: "",
        to: "",
      },
      total: 0,
      listLoading: false,
      dialogFormVisible: false,
      dialogFormVisibleTwo: false,
      name: "",
      options: [
        {
          value: "",
          label: "全部",
        },
      ],
      value: "",
      form: {
        startTime: this.$moment()
          .subtract(7, "days")
          .format("YYYY-MM-DD 00:00:00"),
        endTime: this.$moment().add(1, "days").format("YYYY-MM-DD 23:59:59"),
      },
      multipleSelection: [],
    };
  },
  created() {
    this.fetchData();
    this.getTableList();
  },
  methods: {
    btnAction() {
      this.getTableList();
    },
    btnAdd() {
      this.dialogFormVisible = true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection, "dfdfdf");
    },
    // 状态数据
    fetchData() {
      const params = {
        Code: "MTaskStatus",
      };
      getHostType(params).then((response) => {
        response.data.dictDetails.forEach((x) => {
          this.options.push({ value: x.code, label: x.name });
        });
      });
    },
    // 表格数据
    getTableList() {
      const params = {
        pageNumber: this.queryConfig.currentPage,
        perPageCount: this.queryConfig.pageSize,
        queryConfig: {
          taskNo: "",
          remoteTask: "",
          barcode: "",
          from: "",
          to: "",
          taskStatus: "",
          begin: this.form.startTime,
          end: this.form.endTime,
        },
      };
      getTableList(params).then((response) => {
        this.total = response.data.totalCount;
        this.sysTable = response.data.data;
      });
    },
    // 强制完成按钮
    forceComplete() {
      if (this.multipleSelection.length == 1) {
      } else {
        this.elAlert();
      }
    },
    //   维护按钮
    maintenance() {
      this.dialogFormVisibleTwo = true;
      //   if (this.multipleSelection.length == 1) {
      //   } else {
      //     this.elAlert();
      //   }
    },
    handleCurrentChange(page) {
      this.queryConfig.currentPage = page;
      this.getTableList();
    },
    elAlert() {
      this.$alert("请选择一条数据！", "标题名称", {
        confirmButtonText: "确定",
      });
    },
  },
};
</script>
<style scoped lang="scss">
.app-container-father {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  .dv-container-left {
    width: 20%;
    background-color: #eeeeee;
    height: 85vh;
    // border-radius: 7px;
    box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
    overflow: auto;
    .dv-container-left-component {
      width: 100%;
      display: flex;
      .component-left {
        width: 40%;
        height: 60px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      .component-right {
        width: 57%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .button-container {
      width: 90%;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      .T1 {
        width: 88px;
        margin-top: 10px;
        border: 1px solid #b3d8ff;
      }
    }
    .button-containerTwo {
      width: 90%;
      margin: 20px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      .T1 {
        width: 50%;
        font-size: 16px;
        margin-top: 10px;
      }
    }
  }
  .dv-container-right {
    width: 79%;
    height: 88vh;
    margin-left: 1%;
    .pagination-container {
      text-align: center; /* 使分页组件靠右 */
      margin-top: 20px; /* 添加顶部间距 */
    }
  }
  .container {
    width: 100%; /* 大 div 宽度 */
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: wrap; /* 允许换行 */
    padding: 10px; /* 内边距 */
    box-sizing: border-box; /* 包含内边距在内 */
  }
  .box {
    width: 50%; /* 小 div 宽度为 50% */
    height: 50px; /* 小 div 高度 */
    margin: 5px 0; /* 上下外边距 */
    display: flex; /* 嵌套使用 Flexbox */
  }
  .inner-left {
    width: 40%; /* 内部左侧 div 宽度为 50% */
    height: 100%; /* 高度为 100% */
    display: flex; /* 使用 Flexbox */
    justify-content: flex-end; /* 内容靠右 */
    align-items: center; /* 垂直居中 */
    padding-right: 5px; /* 右侧内边距 */
  }
  .inner-right {
    width: 50%; /* 内部右侧 div 宽度为 50% */
    height: 100%; /* 高度为 100% */
    display: flex; /* 使用 Flexbox */
    justify-content: flex-start; /* 内容靠左 */
    align-items: center; /* 垂直居中 */
    padding-left: 5px; /* 左侧内边距 */
  }

  .containerTwo {
    width: 100%;
    border: 1px solid #ccc; /* 大 div 的边框 */
    overflow: auto;
  }
  .box1 {
    width: 100%;
    height: 50px; /* 修改后的高度 */
    display: flex; /* 使用 Flexbox */
    flex-wrap: wrap; /* 超出换行 */
    align-items: center; /* 垂直居中对齐 */
  }
  .box2 {
    width: 100%;
    display: flex; /* 使用 Flexbox */
    flex-wrap: wrap; /* 超出换行 */
    align-items: center; /* 垂直居中对齐 */
  }
  .box3 {
    width: 100%;
    height: 100px;
  }
  .small-box {
    width: 50%; /* 每个小 div 的宽度 */
    box-sizing: border-box; /* 包含边框和内边距 */
    border: 1px solid #ccc; /* 大 div 的边框 */
  }
  .inner-box1 {
    height: 30px; /* 第一个子 div 的高度 */
    display: flex; /* 使用 Flexbox */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
  .inner-box2 {
    height: 100px; /* 第二个子 div 的高度 */
    display: flex; /* 使用 Flexbox */
    flex-direction: column; /* 垂直排列子 div */
  }
  .inner-inner-box1 {
    height: 50%; /* 第一个内层子 div 的高度 */
    display: flex; /* 使用 Flexbox */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
  .inner-inner-box2 {
    height: 50%; /* 第二个内层子 div 的高度 */
    display: flex; /* 使用 Flexbox */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
  .inner-inner-box3 {
    height: 100%; /* 第三个内层子 div 的高度 */
    display: flex; /* 使用 Flexbox */
  }
  .inner-inner-inner-box1,
  .inner-inner-inner-box2,
  .inner-inner-inner-box3 {
    height: 100%; /* 内层子 div 的高度 */
  }
  .inner-inner-inner-box1 {
    width: 40%; /* 第一个和第二个内层子 div 的宽度 */
    display: flex;
    justify-content: right; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
  .inner-inner-inner-box2 {
    width: 40%; /* 第一个和第二个内层子 div 的宽度 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
  .inner-inner-inner-box3 {
    width: 20%; /* 第三个内层子 div 的宽度 */
    display: flex;
    justify-content: flex-end; /* 靠右显示 */
    align-items: center; /* 垂直居中 */
    padding-right: 10px; /* 右侧内边距 */
  }
}
</style>