store_confs.vue

<template>
  <div class="contentBox">
    <div class="content">
      <div style="padding:8px 20px;">
        <span class="inputBox">
          <el-input
            v-model="storename"
            placeholder="请输入存储配置名称"
          ></el-input>
        </span>
        <el-button
          type="primary"
          style="position: relative;top: -2px;"
          @click="query"
          >查询</el-button
        >
        <span style="float: right;">
          <el-button type="info" icon="el-icon-search" @click="add"
            >添加</el-button
          >
        </span>
      </div>
      <div style="padding: 0 15px 20px 23px;">
        <el-table
          :height="tableHeight"
          :data="tableData"
          stripe
          border
          style="width: 100%"
        >
          <el-table-column align="center" prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="create_dt" align="center" label="上传时间">
          </el-table-column>
          <el-table-column align="center" prop="task_list" label="应用任务">
            <template slot-scope="scope">
              <el-tooltip
                :content="scope.row.ellipsis"
                placement="bottom"
                effect="light"
                :visible-arrow="false"
              >
                <span class="ellipsis">{{ scope.row.ellipsis }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="300"
            prop="operation"
            label="操作"
          >
            <template slot-scope="scope">
              <el-tooltip
                content="详情"
                placement="bottom"
                effect="light"
                :visible-arrow="false"
              >
                <span
                  class="el-icon-info editIcon"
                  @click="detail(scope.$index, scope.row)"
                ></span>
              </el-tooltip>
              <span class="tableSpanBorder"></span>
              <el-tooltip
                content="删除"
                placement="bottom"
                effect="light"
                :visible-arrow="false"
              >
                <span
                  class="el-icon-delete  delIcon"
                  @click="delFun(scope.$index, scope.row)"
                ></span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 28px;">
          <el-pagination
            style="float: right;"
            background
            prev-text="上一页"
            next-text="下一页"
            :page-sizes="[30, 50, 100, 200]"
            layout="total, prev, pager, next,sizes, jumper"
            :current-page="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="total"
          >
          </el-pagination>
          <div style="clear: both;"></div>
        </div>
      </div>
    </div>

    <el-dialog title="添加" :visible.sync="addVisible" width="450px">
      <div>
        <el-form label-position="left" label-width="120px">
          <el-form-item label="配置名称">
            <el-input v-model="names"></el-input>
          </el-form-item>
          <el-form-item label="添加文件">
            <el-upload
              ref="upload"
              action="uploadUrl"
              :http-request="httpRequest"
              :on-success="uploadsuccess"
              multiple
              name="file"
              :auto-upload="false"
            >
              <el-button slot="trigger" size="small" type="primary"
                >选取文件</el-button
              >
              <!-- <div slot="tip" class="el-upload__tip">只能上传视频文件</div> -->
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">上 传</el-button>
      </span>
    </el-dialog>

    <el-dialog title="详情" :visible.sync="detailVisible" width="30%">
      <div class="title">任务列表</div>
      <div class="maxHeight">
        <el-tree :props="props" :load="loadNode" lazy> </el-tree>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      addVisible: false,
      uploadUrl: "",
      names: "",
      file: [],
      props: {
        label: "name",
        children: "child",
        isLeaf: "leaf"
      },
      detailData: [],
      dev_unid: localStorage.getItem("dev_unid"),
      resource: {
        picture_busy: 0,
        picture_free: 0,
        video_busy: 0,
        video_free: 0
      },
      total: 0,
      page: 1,
      pageSize: 30,
      tableData: [],
      devsList: [],
      selectDevs: "",
      detailVisible: false,
      storename: "",
      curentSubList: [],
      tableHeight: window.opsTableHeight
    };
  },
  components: {},
  mounted() {
    this.query();
  },
  methods: {
    // 自定义的上传函数
    httpRequest(param) {
      this.file = [];
      // 一般情况下是在这里创建FormData对象，但我们需要上传多个文件，为避免发送多次请求，因此在这里只进行文件的获取，param可以拿到文件上传的所有信息
      this.file.push(param.file);
    },
    save() {
      this.$refs.upload.submit(); // 这里是执行文件上传的函数，其实也就是获取我们要上传的文件
      // 最重要的就是这段代码
      var upData = new FormData(); // 首先创建FormData对象
      this.file.forEach(file => {
        upData.append("file", file); // 因为要上传多个文件，所以需要遍历一下才行
        upData.append("name", this.names);
        upData.append("is_temp", 0);
      });
      this.$api.resource.uploadStore(upData).then(res => {
        if (res.unid) {
          this.addVisible = false;
          this.query();
          this.$message({
            type: "success",
            message: "上传成功!"
          });
        } else {
          this.$message({
            type: "error",
            message: res.enote
          });
        }
      });
    },
    uploadsuccess() {
      this.addVisible = false;
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve(this.curentSubList);
      }
      if (node.level > 1) return resolve([]);

      this.$api.resource.getSubTask({}, node.data.unid).then(res => {
        if (res.list_data == null) {
          res.list_data = [];
        }
        res.list_data.forEach(item => {
          item.name = item.subtask_name;
          item["leaf"] = true;
        });
        resolve(res.list_data);
      });
    },
    query() {
      this.tableData = [];
      let offset = (this.page - 1) * this.pageSize;
      this.$api.resource
        .getStoreConList(
          {
            limit: this.pageSize,
            offset: offset,
            name__like: this.storename
          },
          this.dev_unid
        )
        .then(res => {
          this.total = res.total_num;
          if (res.list_data == null) {
            this.tableData = [];
          } else {
            this.tableData = res.list_data;
          }
          this.tableData.forEach(list => {
            let ellipsisText = "";
            list.task_list.forEach(item => {
              ellipsisText += item.name + ",";
            });
            ellipsisText = ellipsisText.substring(0, ellipsisText.length - 1);
            list["ellipsis"] = ellipsisText;
            //树状图有子节点
            list["leaf"] = false;
          });
          console.log(this.tableData);
        })
        .catch(error => {});
    },
    add() {
      this.addVisible = true;
    },
    taskFormatter(row, column, cellValue, index) {
      let columnText = "";
      row.task_list.forEach(item => {
        columnText += item.name + ",";
      });
      columnText = columnText.substring(0, columnText.length - 1);
      return columnText;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.query();
    },
    detail(index, row) {
      this.detailVisible = true;
      this.curentSubList = [];
      this.curentSubList = row.task_list;
    },
    delFun(index, row) {
      this.$confirm("此操作将永久删除该选项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api.resource.delStore({}, row.unid).then(res => {
            if (res.ecode == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.query();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.topCon {
  background: $white-back-color;
  margin-bottom: 12px;
  height: 100px;
  .left {
    display: inline-block;
    margin: {
      top: 22px;
      left: 30px;
    }
    img {
      width: 65px;
      height: 55px;
      margin-right: 11px;
    }
    .topText {
      font-size: 24px;
      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
      font-weight: bold;
      margin-bottom: 4px;
    }
    .bottomText {
      font-size: 14px;
      font-family: MicrosoftYaHeiUI;
    }
  }
  .right {
    float: right;
    .topText {
      font-size: 28px;
      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
      font-weight: bold;
    }
    .bottomText {
      position: relative;
      top: -1px;
      font-size: 14px;
      font-family: MicrosoftYaHeiUI;
    }
  }
  .textCon {
    display: inline-block;
    vertical-align: top;
  }
  .border {
    display: inline-block;
    height: 40px;
    border: {
      left: 2px solid $border-color;
    }
  }
  .rightBox {
    margin-top: 14px;
    display: inline-block;
    img {
      margin: {
        top: 15px;
        right: 22px;
      }
    }
  }
  .rightBox:nth-of-type(1) {
    img {
      width: 34px;
      height: 34px;
    }
    .textCon {
      margin-right: 114px;
    }
  }
  .rightBox:nth-of-type(2) {
    position: relative;
    top: 4px;
    img {
      width: 40px;
      height: 40px;
      margin-left: 102px;
    }
    .textCon {
      margin-right: 101px;
    }
  }
  .rightBox:nth-of-type(3) {
    img {
      width: 34px;
      height: 35px;
      margin-left: 104px;
    }
    .textCon {
      margin-right: 184px;
    }
  }
}
.title {
  font-size: 18px;
  margin-bottom: 6px;
}
.maxHeight {
  max-height: 400px;
  overflow-y: auto;
}
.ellipsis {
  display: inline-block;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resourceDiv {
  display: inline-block;
  margin-left: 10%;
  span {
    margin-right: 5%;
  }
}
.content {
  background: #ffffff;
}
.inputBox {
  margin-right: 20px;
}
.selectBox {
  margin-right: 20px;
}
.editIcon {
  cursor: pointer;
  color: #0069ff;
  font-size: 16px;
}
.editIcon2 {
  cursor: pointer;
  color: #87d14b;
  font-size: 16px;
}
.playIcon {
  cursor: pointer;
  color: #34b3a2;
  font-size: 16px;
}
.pauseIcon {
  cursor: pointer;
  color: #ffc62e;
  font-size: 14px;
}
.delIcon {
  cursor: pointer;
  color: #f2365a;
  font-size: 16px;
}
</style>