element-ui 树形

<template>
  <div class="cont-box">
    <div class="cont-box-wrap">
      <!-- 非常紧急 -->
      <div class="cont-box-child" v-for="(item, index) in dataObj">
        <contHeader :title="item.pattern"></contHeader>
        <div class="cont-box-child-main">
          <p>
            <span>模式时间:</span>
            <span class="map-type">{{ item.upTime }}~{{ item.downTime }}</span>
          </p>
          <p>
            <span>处理通知方式:</span>
            <span class="map-type">{{
              item.notificationMethod == 1 ? "人工指派" : "预案默认指派"
            }}</span>
          </p>
          <p>
            <span>模式告警紧急程度:</span>
            <span
              class="map-type"
              v-for="(items, index) in item.modelUrgency"
              >{{ MODELURGENCY[items] }}</span
            >
          </p>
        </div>
      </div>
      <div class="btn-box">
        <Button type="warning" ghost @click="goPage('workEdit', dataObj)"
          >编辑</Button
        >
      </div>
    </div>
  </div>
</template>
<script>
import contHeader from "@/components/common/contHeader.vue";
import { workList } from "@/api/work.js";

export default {
  name: "workIndex",
  components: {
    contHeader,
  },
  data() {
    return {
      info: {
        page: 1,
        pageSize: 10,
      },
      dataObj: [
        // {
        //   id: 1,
        //   pattern: "白天模式",
        //   upTime: "08:00",
        //   downTime: "18:00",
        //   notificationMethod: 1,
        //   modelUrgency: ["1", "2", "3", "4"],
        //   // newtime: ["08:00", "18:00"],
        // },
        // {
        //   id: 2,
        //   pattern: "夜间模式",
        //   upTime: "18:01",
        //   downTime: "07:59",
        //   notificationMethod: 2,
        //   modelUrgency: ["3", "4"],
        //   // newtime: ["18:01", "07:59"],
        // },
      ],
      MODELURGENCY: {
        1: "较低",
        2: "一般",
        3: "紧急",
        4: "非常紧急",
      },
    };
  },
  created() {
    this._workList();
    // console.log(this.dataObj);
  },
  mounted() {},
  methods: {
    _workList() {
      workList(this.info).then((res) => {
        // console.log("res", res);
        if (res.data.code == "00000") {
          let result = res.data;
          this.dataObj = result.data || [];
          //自动生成夜间模式时间
          // let d = "2021-02-05" + " " + this.dataObj[0].downTime;
          // let u = "2021-02-05" + " " + this.dataObj[0].upTime;
          // let uu = this.$Date(u)
          //   .subtract(1, "minute")
          //   .format("YYYY-MM-DD HH:mm");
          // let dd = this.$Date(d).add(1, "minute").format("YYYY-MM-DD HH:mm");
          // console.log("this.dataObj", uu, dd);
        }
      });
    },
    //编辑跳转
    goPage(name, item) {
      // console.log("item", item);
      //存储
      this.$byStoreSet("pageOption_work_edit", name);
      this.$byStoreSet("pageOption_work", item);
      //页面跳转
      this.$router.push({
        path: `/work/${name}`,
        params: {
          type: 1,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.cont-box {
   100%;
  display: flex;
  height: 100%;
  flex-direction: column;
  .cont-box-wrap {
     100%;
    height: 100%;
    .cont-box-child {
      .cont-box-child-main {
        margin: 20px 0;
      }
      p {
        margin: 20px;
        margin-left: 10px;
        .map-type {
          display: inline-block;
          margin: 15px;
        }
        .map-type-s {
          font-size: 12px;
          margin-left: 16px;
          margin-right: 6px;
        }
      }
    }
    .btn-box {
      margin: 20px 0 20px 68px;
    }
  }
}
</style>