mail.vue

<template>
  <div class="ct">
    <div class="left">
      <div class="title">组织架构</div>
      <div class="bottom">
        <div class="ty">
          <div>
            <span>全部</span>
            <span class="number">(103)</span>
          </div>
          <div>
            <span><d2-icon-svg name="edit" class="icon"/></span>
            <span style="margin-left:8px;"
              ><d2-icon-svg name="delete" class="icon"
            /></span>
          </div>
        </div>
        <div class="ty" style="margin:15px 0;">
          <div>
            <span>未分组</span>
            <span class="number">(8)</span>
          </div>
          <div>
            <span><d2-icon-svg name="edit" class="icon"/></span>
            <span style="margin-left:8px;"
              ><d2-icon-svg name="delete" class="icon"
            /></span>
          </div>
        </div>
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span style="margin-left:20px;">
              <d2-icon-svg name="edit" class="icon" @click="() => edit(data)" />
              <d2-icon-svg
                name="delete"
                class="icon"
                @click="() => remove(node, data)"
              />
            </span>
          </span>
        </el-tree>
      </div>
      <div class="end">
        <span class="add-l">添加柜组</span>
        <span class="add-r">添加部门</span>
      </div>
    </div>
    <div class="right">
      <div class="main">
        <div class="searchs">
          <div class="buttons">
            <el-button class="button buttonlight" size="small"
              >同步成员</el-button
            >
            <el-button class="button buttondark" size="small"
              >移动  </el-button
            >
            
          </div>

          <!-- 搜索区 -->
          <el-form
            class="searchzone"
            :inline="true"
            :model="data.search"
            label-width="auto"
          >
            <!-- 关键字 -->
            <!-- <el-col :span="6"> -->
            <el-form-item label="关键词">
              <el-input
                size="small"
                v-model="data.search.keys"
                style="width:160px"
                placeholder="请输入关键词"
              />
            </el-form-item>
            <!-- </el-col> -->
            <!-- </el-row> -->
            <el-button class="button buttondark" size="small"
              >搜索</el-button
            >
          </el-form>
        </div>
        <div class="lists">
          <el-table
            stripe
            class="list"
            ref="multipleTable"
            :data="list.main"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="listPick"
            :header-cell-style="setListsHeadStyle"
          >
            <el-table-column type="selection" width="60"></el-table-column>
            <el-table-column
              prop="taskName"
              label="姓名"
              align="center"
              width="200"
            ></el-table-column>
            <el-table-column
              prop="taskType"
              label="部门"
              align="center"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="taskType"
              label="角色"
              align="center"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="bar"
              label="手机号"
              align="center"
              width="120"
            ></el-table-column>
            <el-table-column label="同步时间" width="178" align="center">
              <template slot-scope="scope">{{ scope.row.sendDate }}</template>
            </el-table-column>
            <el-table-column
              prop="bar"
              label="备注"
              align="center"
              width="120"
            ></el-table-column>
          </el-table>
        </div>
        <div class="pages">
          <el-pagination
            @size-change="pagesSizeChange"
            @current-change="pagesNowPageChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="prev, pager, next, sizes, jumper"
            :total="400"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const data = [
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1"
              },
              {
                id: 10,
                label: "三级 1-1-2"
              }
            ]
          }
        ]
      },
      {
        id: 2,
        label: "一级 2",
        children: [
          {
            id: 5,
            label: "二级 2-1"
          },
          {
            id: 6,
            label: "二级 2-2"
          }
        ]
      },
      {
        id: 3,
        label: "一级 3",
        children: [
          {
            id: 7,
            label: "二级 3-1"
          },
          {
            id: 8,
            label: "二级 3-2"
          }
        ]
      }
    ];
    return {
      data: JSON.parse(JSON.stringify(data)),
      list: {
        main: [
          {
            id: "1001",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          },
          {
            id: "1002",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          },
          {
            id: "1003",
            taskName: "2019年男装销售任务",
            taskType: "拉新",
            bar: "男装",
            taskContent: "任务内容任务内容任务内容...",
            sendDate: "2019/02/08"
          }
        ],
        search: {
          bar: [
            {
              id: "1",
              name: "全部"
            },
            {
              id: "2",
              name: "测试"
            }
          ],
          taskType: [
            {
              id: "1",
              name: "全部"
            },
            {
              id: "2",
              name: "测试"
            }
          ]
        }
      },
      data: {
        search: {
          bar: "",
          taskType: "",
          date: "",
          keys: ""
        },
        page: {
          nowPageNum: 4
        }
      }
    };
  },
  methods: {
    append(data) {
      const newChild = { id: id++, label: "testtest", children: [] };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },
    edit(data) {},
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },
    listPick() {},
    testButtonClick() {},
    pagesSizeChange() {},
    pagesNowPageChange() {},
    setListsHeadStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #0B0F32; border-right: 1px solid white;color: white;";
      } else {
        return "";
      }
    }
  }
};
</script>

<style scoped>
.end {
  position: absolute;
  height: 32px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(78, 89, 199, 1);
  width: 100%;
  bottom: 0;
}
.add-l,
.add-r {
  width: 50%;
  height: 32px;
  border: 1px solid rgba(78, 89, 199, 1);
  width: 100%;
  text-align: center;
  line-height: 32px;
}
.add-l {
  background-color: #e8e9fe;
  color: rgba(78, 89, 199, 1);
}
.add-r {
  background-color: #4e59c7;
  color: #fff;
}
.ty {
  height: 40px;
  background: rgba(248, 248, 248, 1);
  border-radius: 26px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 16px;
  color: rgba(51, 51, 51, 1);
  justify-content: space-between;
}
.bottom {
  padding: 12px;
}
.title {
  height: 48px;
  background: rgba(78, 89, 199, 1);
  line-height: 48px;
  text-align: center;
  color: #fff;
  font-size: 16px;
}
.ct {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  background-color: #f8f8f8;
  padding: 16px;
  min-height: 100%;
}
.left {
  position: relative;
  width: 180px;
}
.left,
.right {
  background-color: #fff;
  min-height: 100%;
}
.right {
  padding: 10px;
  margin-left: 10px;
}
.number {
  font-size: 14px;
  margin-top: 2px;
  margin-left: 8px;
}
.icon {
  /* display: inline-block; */
  width: 16px;
  height: 16px;
}

main {
  /* // border: 2px solid orange; */
  height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.searchs {
  /* // border: 2px solid red; */
  height: 40px;
  width: 100%;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.buttons {
  /* // border: 2px solid darkcyan;
  // width: 30%;
  // min-width: 266px; */
  width: 266px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.buttonlight {
  width: 88px;
  height: 32px;
  margin-top: 4px;
  background-color: #e8e9fe;
  color: #4e59c7;
  border: 1px solid #4e59c7;
  box-sizing: border-box;
}
.buttonlight:hover {
}
.buttondark {
  width: 88px;
  height: 32px;
  background-color: #4e59c7;
  color: #ffffff;
  border: 1px solid #4e59c7;
  box-sizing: border-box;
  margin-top: 4px;
}
.buttondark:hover {
}
.searchzone {
  /* // border: 2px solid orange; */
  height: 40px;
  width: auto;
  min-width: 654px;
}
.lists {
  /* // border: 2px solid greenyellow; */
  height: auto;
  /* // min-height: 400px; */
  min-height: 70%;
  width: 100%;
  margin-top: 20px;
}
.list {
  /* // border: 1px solid red; */
}
.listButtonRed {
  /* // border: 2px solid green; */
  color: red;
}
.pages {
  /* // border: 2px solid steelblue; */
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
</style>