修改

ybf_admin/src/pages/in/contact/index.vue

@@ -2,7 +2,6 @@
   <d2-container class="ct">
     <template slot="header">header</template>
     <div class="test">
-      <!-- <Left-Nav style="min-height:100%;"></Left-Nav>  -->
       <div class="tac">
         <el-menu
           :default-active="index"
@@ -72,7 +71,7 @@ export default {
   padding: 0 !important;
 }
 .tac {
-  width:248px;
+  width:180px;
   height: 100%;
   /* box-shadow: 0px 4px 0px 0px rgba(221, 221, 221, 1); */
 }

ybf_admin/src/pages/in/contact/mail.vue

@@ -10,7 +10,9 @@
           </div>
           <div>
             <span><d2-icon-svg name="edit" class="icon"/></span>
-            <span style="margin-left:8px;"><d2-icon-svg name="delete" 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;">
@@ -20,7 +22,9 @@
           </div>
           <div>
             <span><d2-icon-svg name="edit" class="icon"/></span>
-            <span style="margin-left:8px;"><d2-icon-svg name="delete" class="icon"/></span>
+            <span style="margin-left:8px;"
+              ><d2-icon-svg name="delete" class="icon"
+            /></span>
           </div>
         </div>
         <el-tree
@@ -30,24 +34,127 @@
           default-expand-all
           :expand-on-click-node="false"
         >
-          <span class="custom-tree-node" slot-scope="{ node, data }" >
+          <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)"/>
+              <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 () {
+  data() {
     const data = [
       {
         id: 1,
@@ -99,40 +206,136 @@ export default {
       }
     ];
     return {
-      data: JSON.parse(JSON.stringify(data))
+      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) {
+    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) {
+    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;
+  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);
+  color: rgba(51, 51, 51, 1);
   justify-content: space-between;
 }
 .bottom {
@@ -140,7 +343,7 @@ export default {
 }
 .title {
   height: 48px;
-  background:rgba(78,89,199,1);
+  background: rgba(78, 89, 199, 1);
   line-height: 48px;
   text-align: center;
   color: #fff;
@@ -150,22 +353,22 @@ export default {
   display: flex;
   justify-content: space-between;
   flex-direction: row;
-  background-color: #F8F8F8;
+  background-color: #f8f8f8;
   padding: 16px;
   min-height: 100%;
 }
 .left {
- flex: 1;
+  position: relative;
+  width: 180px;
 }
-.left, .right {
+.left,
+.right {
   background-color: #fff;
   min-height: 100%;
 }
 .right {
-  flex: 3;
-  background-color: blue;
-  height: 100px;
-  margin-left: 20px;  
+  padding: 10px;
+  margin-left: 10px;
 }
 .number {
   font-size: 14px;
@@ -178,4 +381,83 @@ export default {
   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>

ybf_admin/src/router/routes.js

@@ -41,26 +41,26 @@ const frameIn = [
           title: '通讯录管理'
         }
       },
-      // Z-进件管理-通讯录管理
-      {
-        path: '/in/bar',
-        name: 'inBar',
-        component: () => import('@/pages/in/bar'),
-        meta: {
-          auth: true,
-          title: '柜组管理'
-        }
-      },
-      // Z-进件管理-通讯录管理
-      {
-        path: '/in/shop',
-        name: 'inShop',
-        component: () => import('@/pages/in/shop'),
-        meta: {
-          auth: true,
-          title: '门店管理'
-        }
-      },
+      // // Z-进件管理-通讯录管理
+      // {
+      //   path: '/in/bar',
+      //   name: 'inBar',
+      //   component: () => import('@/pages/in/bar'),
+      //   meta: {
+      //     auth: true,
+      //     title: '柜组管理'
+      //   }
+      // },
+      // // Z-进件管理-通讯录管理
+      // {
+      //   path: '/in/shop',
+      //   name: 'inShop',
+      //   component: () => import('@/pages/in/shop'),
+      //   meta: {
+      //     auth: true,
+      //     title: '门店管理'
+      //   }
+      // },
       // Z-活动模版管理-模版中心
       {
         path: '/active/mode',