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="data1"
          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" @click="addCounter">添加柜组</span>
        <span class="add-r" @click="addDept">添加部门</span>
      </div>
    </div>
    <div class="right">
      <div class="top">三号柜组（共18人）</div>
      <div class="searchs">
        <div class="buttons">
          <el-button class="button buttonlight" size="small" @click="synchronismMember"
            >同步成员</el-button
          >
          <el-button class="button buttondark" size="small" @click="handleMove">移动</el-button>
        </div>
        <!-- 搜索区 -->
        <el-form
          class="searchzone"
          :inline="true"
          :model="formData"
          label-width="auto"
        >
          <el-form-item label="关键词">
            <el-input
              size="small"
              v-model="formData.keys"
              style="width:160px"
              placeholder="请输入关键词"
            />
          </el-form-item>
          <el-button class="button buttondark" size="small">搜索</el-button>
        </el-form>
      </div>
      <el-table
        stripe
        class="list"
        ref="multipleTable"
        :data="list.main"
        tooltip-effect="dark"
        style="width: 100%"
        height="370px"
      >
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column
          prop="taskName"
          label="姓名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="id"
          label="企业微信ID"
          align="center"
          width = "120"
        ></el-table-column>
        <el-table-column
          prop="taskType"
          label="部门"
          align="center"
          width="150"
        ></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="150"
        ></el-table-column>
        <el-table-column label="同步时间" width="180" 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>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-size="page.size"
        layout="total, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
    <move-dialog
      v-if="moveDialogShow"
      :moveDialog="moveDialogShow"
      @handleCancel="moveDialogShow = false"
      @handleFinish="removeFinish"
    ></move-dialog>
    <add-counter v-if="counterDialog" :moveDialog="counterDialog" @handleCancel="counterDialog = false" @handleFinish="addCounterFinish"></add-counter>
    <add-store v-if="storeDialog" :moveDialog="storeDialog" @handleCancel="storeDialog = false" @handleFinish="addStoreFinish"></add-store>
  </div>
</template>

<script>
import MoveDialog from "./components/move";
import AddCounter from "./components/addCounter";
import AddStore from './components/addStore'
export default {
  data() {
    const data1 = [
      {
        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 {
      data1: JSON.parse(JSON.stringify(data1)),
      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"
          },
          {
            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: "测试"
            }
          ]
        }
      },
      isShow: false,
      formData: {
        status: "",
        keys: ""
      },
      statusList: [],
      page: {
        currentPage: 1,
        size: 20,
        total: 100
      },
      moveDialogShow: false,
      counterDialog: false,
      storeDialog: false
    };
  },
  components: {
    MoveDialog,
    AddCounter,
    AddStore
  },
  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() {},
    synchronismMember() {
      this.isShow = true;
      this.$emit("isShow", this.isShow);
    },
    handleMove() {
      this.moveDialogShow = true;
      console.log(111111);
    },
    removeFinish() {
      this.moveDialogShow = false;
    },
    currentPage() {},
    addCounter() {
      this.counterDialog = true
    },
    addCounterFinish() {
      this.counterDialog = false
    },
    addDept() {
      this.counterDialog = true
    },
    addStoreFinish() {
      this.storeDialog = false
    }
  }
};
</script>

<style scoped>
.top {
  padding-bottom: 10px;
  border-bottom: 1px solid #f8f8f8;
}
.end {
  position: absolute;
  display: flex;
  align-items: center;
  border: 1px solid rgba(78, 89, 199, 1);
  width: 100%;
  bottom: 0;
  box-sizing: border-box;
}
.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;
  flex-direction: row;
  background-color: #f8f8f8;
  min-height: 100%;
}
.left {
  position: relative;
  width: 20%;

}
.left,
.right {
  background-color: #fff;
  height: 518px;
  overflow: auto;
  box-sizing: border-box;
}
.right {
  position: relative;
  padding: 10px;
  margin-left: 10px;
  width: 80%;
}
.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;
}
.searchzone {
  height: 40px;
  width: auto;
  min-width: 654px;
  text-align: right;
}
.lists {
  height: auto;
  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>