添加详情和开发标签管理

project/src/assets/config/interface_api.js

@@ -24,6 +24,7 @@ var api = {
   memberList: "/api/user/users",
   addWayList: "/api/customer/addWayList",
   tagList: "/api/tag/tagList",
+  addTag: "/api/tag/addTag",
   customerList: "/api/customer/customerList",
   massMsg_lists: "/api/massMsg/lists",
   massMsg_detail: "/api/massMsg/detail",
@@ -51,6 +52,7 @@ var api = {
   tag_detial_edit: "/api/customer/customerDetailTagUpdate",
   customer_setCustomerTag: "/api/customer/setCustomerTag",
   customer_batchMarkTagResult: "/api/customer/batchMarkTagResult",
+  departmentList: "/api/user/departments",
 };
 
 export { api };

project/src/components/assembly/tagGroup.vue

@@ -0,0 +1,189 @@
+<template>
+  <el-dialog
+    title="新建标签组"
+    :visible.sync="lableGroup"
+    :append-to-body="true"
+    class="addLable_dialog"
+    width="40%">
+    <div class="groupCon">
+      <div class="group_item">
+        <div class="lable">标签组名称:</div>
+        <div class="opaArea">
+          <el-input class="ipt_group" v-model="groupName" placeholder="请输入标签组名称"></el-input>
+        </div>
+      </div>
+      <!--
+      后台说先不做
+              <div class="group_item">
+                <div class="lable">可见范围:</div>
+                <div class="opaArea">
+                  <el-radio-group v-model="scopeVal">
+                    <el-radio :label="0">全部员工</el-radio>
+                    <el-radio :label="1">部门可用</el-radio>
+                  </el-radio-group>
+                </div>
+              </div>
+              <div class="group_item" v-if="scopeVal==1">
+                <div class="lable">选择可用部门:</div>
+                <div class="pointer" style="padding: 8px 12px;border: 1px solid #D2D2D2;margin-left: 20px">
+                  + 添加部门
+                </div>
+              </div>
+      -->
+      <div class="group_item" style="align-items: baseline;margin-top: 10px">
+        <div class="lable">标签名称:</div>
+        <div class="opaArea">
+          <div v-for="(m,mIdx) in moreLable" :key="m.id" class="flex">
+            <el-input class="ipt_group tMar10" v-model="m.name" placeholder="请输入标签名称"></el-input>
+            <span v-if="moreLable&&moreLable.length>1" class="flex">
+                <span class="minusIptGroup" @click="moreLable.splice(mIdx,1)">-</span>
+                <i class="el-icon-top f18 lMar8 pointer" :class="mIdx == 0 ? 'disCss' : ''" @click="upClick(mIdx)"></i>
+                <i class="el-icon-bottom f18 lMar8 pointer" :class="mIdx == moreLable.length-1 ? 'disCss' : ''" @click="downClick(mIdx)"></i>
+              </span>
+          </div>
+          <div class="addIptGroup" @click="moreLable.push({id:moreLable.length,name:''})">+ 添加标签</div>
+        </div>
+      </div>
+    </div>
+    <div slot="footer">
+      <el-button size="mini" @click="lableGroup = false">取 消</el-button>
+      <el-button size="mini" type="primary" @click="lableGroup = false">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "tagGroup",
+  data(){
+    return{
+      lableGroup:false,
+      groupName:'',
+      moreLable:[
+        {id:0,name:''}
+      ],
+    }
+  },
+  methods:{
+    addTag(){
+      this.$axios.post(this.URL.BASEURL + this.URL.addTag, {
+        group_name: this.groupName,
+        tag_list:[]
+      }).then((res) => {
+        var res = res.data
+        if (res && res.errno == 0) {
+
+        }
+        this.$message({
+          message: res.err,
+          type: "warning"
+        })
+      })
+    }
+
+  }
+}
+</script>
+
+
+<style lang="scss">
+
+.addLable_dialog{
+  .addLableBox{
+
+    .add{
+      padding: 4px 10px;
+      line-height: 20px;
+      text-align: center;
+      border: 1px solid #D2D2D2;
+      cursor: pointer;
+      margin-right: 8px;
+      margin-top: 10px;
+    }
+    .lableItem{
+      line-height: 20px;
+      text-align: center;
+      border: 1px solid #D2D2D2;
+      padding: 4px 10px;
+      background-color: #fafafa;
+      margin-right: 8px;
+      //cursor: pointer;
+      margin-top: 10px;
+    }
+    .ipt{
+      width: 120px;
+      margin-right: 8px;
+      margin-top: 10px;
+      .el-input__inner{
+        height: 30px;
+        line-height: 30px;
+      }
+    }
+    .lableItem_dad{
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+    //.lableItem:hover{
+    //  //color: #00B38A;
+    //  border: 1px solid #00B38A;
+    //}
+    .lableItemAc{
+      background-color: rgba(0,179,138,0.4);
+      border: 1px solid rgba(0,179,138,0.4);
+      color: #00B38A;
+    }
+  }
+  .dialog-footer{
+    //display: flex;
+    //align-items: center;
+    //justify-content: space-between;
+    .addLableGroup{
+      font-size: 14px;
+      color: #00B38A;
+      cursor: pointer;
+    }
+  }
+  .groupCon{
+    .group_item{
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+      .lable{
+        width: 24%;
+        text-align: right;
+      }
+      .opaArea{
+        margin-left: 20px;
+        width: 68%;
+        .addIptGroup{
+          font-size: 12px;color: #00B38A;cursor: pointer;margin-top: 10px
+        }
+        .minusIptGroup{
+          display: inline-block;
+          border: 1px solid #333;
+          border-radius: 50%;
+          font-size: 18px;
+          width: 16px;
+          height: 16px;
+          text-align: center;
+          line-height: 12px;
+          margin-left: 10px;
+          color: #333;
+          cursor: pointer;
+          flex-shrink: 0;
+        }
+        .disCss{
+          color: rgba(0,0,0,.25)
+        }
+      }
+    }
+    .ipt_group{
+      .el-input__inner{
+        height: 36px;
+        line-height: 36px;
+      }
+    }
+  }
+}
+</style>

project/src/components/customManage/blackList.vue

@@ -63,7 +63,7 @@
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <div class="flex" style="justify-content:center">
-            <div class="c-00B38A pointer" style="margin:0 6px" @click="goDetail(scope.row.rule_id)">用户详情</div>
+            <div class="c-00B38A pointer" style="margin:0 6px" @click="showDetial(scope.row)">用户详情</div>
             <div class="c-00B38A pointer" style="margin:0 6px" @click="removeCustomer(scope.row)">移除</div>
           </div>
         </template>
@@ -73,15 +73,26 @@
       <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
       </el-pagination>
     </div>
+    <!--详情-->
+    <el-drawer :size="drawerSize" :visible.sync="detialDrawer" :with-header="false">
+      <detial @changeDrawerSize="changeDrawerSize" @closeDrawer="closeDrawer" :rowProp="{
+        customer_id:rowPro.customer_id,
+        user_id:rowPro.user_id
+      }" ref="detial"></detial>
+    </el-drawer>
   </div>
 </template>
 <script>
 import selfInput from '@/components/assembly/screen/input.vue'
 import selfChannel from '@/components/assembly/screen/channel.vue'
+import detial from '@/components/detials/index.vue'
 export default {
-  components: { selfInput, selfChannel },
+  components: { selfInput, selfChannel, detial },
   data () {
     return {
+      drawerSize: '60%',
+      detialDrawer: false,
+      rowPro: {},//去详情的此条对象
       loading: false,
       page: 1,
       pages: 0,
@@ -97,6 +108,21 @@ export default {
     this.init(1)
   },
   methods: {
+    changeDrawerSize () {
+      this.drawerSize = this.drawerSize == '100%' ? '60%' : '100%'
+    },
+    closeDrawer () {
+      this.detialDrawer = false
+    },
+    showDetial (row) {
+      this.rowPro = row
+      this.drawerSize = '60%'
+      this.detialDrawer = true
+      this.$nextTick(() => {
+        this.$refs.detial.acIdx = 0
+        this.$refs.detial.init()
+      })
+    },
     removeCustomer (item) {
       this.$confirm(`确定要将【${item.name}】从黑名单中移除?`, '提示', {
         confirmButtonText: '确定',
@@ -207,4 +233,4 @@ export default {
 .tableInfo {
   height: 50px;
 }
-</style>
+</style>

project/src/components/customManage/customerTransfer.vue

@@ -121,7 +121,7 @@
       <el-table-column label="操作" align="center" fixed="right" width="80">
         <template slot-scope="scope">
           <div class="flex" style="justify-content:center">
-            <div class="c-00B38A pointer" style="margin:0 6px" @click="goDetail(scope.row.rule_id)">详情</div>
+            <div class="c-00B38A pointer" style="margin:0 6px" @click="showDetial(scope.row)">详情</div>
           </div>
         </template>
       </el-table-column>
@@ -135,8 +135,12 @@
       <shielding-user @cancel='shieldingUserCancel' :shieldingData='shieldingData'></shielding-user>
     </el-dialog>
 
+    <!--详情-->
     <el-drawer :size="drawerSize" :visible.sync="detialDrawer" :with-header="false">
-      <detial @changeDrawerSize="changeDrawerSize" @closeDrawer="closeDrawer"></detial>
+      <detial @changeDrawerSize="changeDrawerSize" @closeDrawer="closeDrawer" :rowProp="{
+        customer_id:rowPro.customer_id,
+        user_id:rowPro.user_id
+      }" ref="detial"></detial>
     </el-drawer>
   </div>
 </template>
@@ -158,6 +162,7 @@ export default {
       type: 1,
       drawerSize: '60%',
       detialDrawer: false,
+      rowPro: {},//去详情的此条对象
       loading: false,
       page: 1,
       pages: 0,
@@ -194,6 +199,21 @@ export default {
     this.init(1)
   },
   methods: {
+    changeDrawerSize () {
+      this.drawerSize = this.drawerSize == '100%' ? '60%' : '100%'
+    },
+    closeDrawer () {
+      this.detialDrawer = false
+    },
+    showDetial (row) {
+      this.rowPro = row
+      this.drawerSize = '60%'
+      this.detialDrawer = true
+      this.$nextTick(() => {
+        this.$refs.detial.acIdx = 0
+        this.$refs.detial.init()
+      })
+    },
     goReord () {
       if (this.type == 1) {
         this.$router.push({ path: '/transferRecord/off' })
@@ -202,12 +222,6 @@ export default {
         this.$router.push({ path: '/transferRecord/on' })
       }
     },
-    changeDrawerSize () {
-      this.drawerSize = this.drawerSize == '100%' ? '60%' : '100%'
-    },
-    closeDrawer () {
-      this.detialDrawer = false
-    },
     resetEvent () {//重置
       this.resetFlag = !this.resetFlag
       this.input_keyword = '';
@@ -329,10 +343,6 @@ export default {
     handleSelectionChange () {
 
     },
-    showDetial () {
-      this.drawerSize = '60%'
-      this.detialDrawer = true
-    }
   }
 }
 </script>

project/src/components/customManage/lostCustomer.vue

@@ -102,7 +102,7 @@
       <el-table-column label="操作" align="center" fixed="right" width="80">
         <template slot-scope="scope">
           <div class="flex" style="justify-content:center">
-            <div class="c-00B38A pointer" style="margin:0 6px" @click="goDetail(scope.row.rule_id)">详情</div>
+            <div class="c-00B38A pointer" style="margin:0 6px" @click="showDetial(scope.row)">详情</div>
           </div>
         </template>
       </el-table-column>
@@ -111,17 +111,28 @@
       <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
       </el-pagination>
     </div>
+    <!--详情-->
+    <el-drawer :size="drawerSize" :visible.sync="detialDrawer" :with-header="false">
+      <detial @changeDrawerSize="changeDrawerSize" @closeDrawer="closeDrawer" :rowProp="{
+        customer_id:rowPro.customer_id,
+        user_id:rowPro.user_id
+      }" ref="detial"></detial>
+    </el-drawer>
   </div>
 </template>
 <script>
 import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
 import datePicker from '@/components/assembly/screen/datePicker.vue'
 import addDuration from '@/components/assembly/screen/addDuration.vue'
+import detial from '@/components/detials/index.vue'
 
 export default {
-  components: { selfCustomerservice, datePicker, addDuration },
+  components: { selfCustomerservice, datePicker, addDuration, detial },
   data () {
     return {
+      drawerSize: '60%',
+      detialDrawer: false,
+      rowPro: {},//去详情的此条对象
       loading: false,
       page: 1,
       pages: 0,
@@ -143,8 +154,20 @@ export default {
     this.init(1)
   },
   methods: {
-    goDetail (rule_id) {
-      this.$router.push({ path: '/massMsg/' + rule_id })
+    changeDrawerSize () {
+      this.drawerSize = this.drawerSize == '100%' ? '60%' : '100%'
+    },
+    closeDrawer () {
+      this.detialDrawer = false
+    },
+    showDetial (row) {
+      this.rowPro = row
+      this.drawerSize = '60%'
+      this.detialDrawer = true
+      this.$nextTick(() => {
+        this.$refs.detial.acIdx = 0
+        this.$refs.detial.init()
+      })
     },
     resetEvent () {//重置
       this.resetFlag = !this.resetFlag
@@ -283,4 +306,4 @@ export default {
     margin-left: 14px;
   }
 }
-</style>
+</style>

project/src/components/customManage/manage.vue

@@ -126,7 +126,7 @@
     <el-dialog title="拉黑原因" :visible.sync="shieldingFlag" width="578px" center>
       <shielding-user @cancel='shieldingUserCancel' :shieldingData='shieldingData'></shielding-user>
     </el-dialog>
-
+<!--详情-->
     <el-drawer :size="drawerSize" :visible.sync="detialDrawer" :with-header="false">
       <detial @changeDrawerSize="changeDrawerSize" @closeDrawer="closeDrawer" :rowProp="{
         customer_id:rowPro.customer_id,
@@ -149,8 +149,8 @@ import selfGender from '@/components/assembly/screen/gender.vue'
 import lossBody from '@/components/assembly/screen/lossBody.vue'
 import screenPay from '@/components/assembly/screen/pay.vue'
 import shieldingUser from '@/components/assembly/shieldingUser.vue'
-import detial from '@/components/detials/index.vue'
 import tagDialog from '@/components/assembly/tagDialog.vue'
+import detial from '@/components/detials/index.vue'
 
 export default {
   components: { tagDialog, detial, selfInput, selfCustomerservice, enterpriseTag, datePicker, selfChannel, selfGender, lossBody, screenPay, shieldingUser },
@@ -158,6 +158,7 @@ export default {
     return {
       drawerSize: '60%',
       detialDrawer: false,
+      rowPro: {},//去详情的此条对象
       loading: false,
       page: 1,
       pages: 0,
@@ -185,7 +186,6 @@ export default {
       resetFlag: false,//重置
       otherData: {},
       shieldingData: {},//拉黑的数据
-      rowPro: {},//去详情的此条对象
       multipleSelection: {},
       exclude_multiple_selection: {},
       isAll: false,//是否选择全部
@@ -197,6 +197,22 @@ export default {
     this.init(1)
   },
   methods: {
+
+    changeDrawerSize () {
+      this.drawerSize = this.drawerSize == '100%' ? '60%' : '100%'
+    },
+    closeDrawer () {
+      this.detialDrawer = false
+    },
+    showDetial (row) {
+      this.rowPro = row
+      this.drawerSize = '60%'
+      this.detialDrawer = true
+      this.$nextTick(() => {
+        this.$refs.detial.acIdx = 0
+        this.$refs.detial.init()
+      })
+    },
     closeTagDialog (val) {
       if (val && val.length != 0) {
         this.page = page ? page : this.page;
@@ -447,21 +463,6 @@ export default {
         this.$refs.multipleTable.toggleRowSelection(row, true);
       });
     },
-    changeDrawerSize () {
-      this.drawerSize = this.drawerSize == '100%' ? '60%' : '100%'
-    },
-    closeDrawer () {
-      this.detialDrawer = false
-    },
-    showDetial (row) {
-      this.rowPro = row
-      this.drawerSize = '60%'
-      this.detialDrawer = true
-      this.$nextTick(() => {
-        this.$refs.detial.acIdx = 0
-        this.$refs.detial.init()
-      })
-    }
   }
 }
 </script>

project/src/components/customManage/transferRecord.vue

@@ -47,7 +47,7 @@
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <div class="flex" style="justify-content:center">
-            <div class="c-00B38A pointer" style="margin:0 6px" @click="goDetail(scope.row.rule_id)">详情</div>
+            <div class="c-00B38A pointer" style="margin:0 6px" @click="showDetial(scope.row)">详情</div>
           </div>
         </template>
       </el-table-column>
@@ -56,6 +56,13 @@
       <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
       </el-pagination>
     </div>
+    <!--详情-->
+    <el-drawer :size="drawerSize" :visible.sync="detialDrawer" :with-header="false">
+      <detial @changeDrawerSize="changeDrawerSize" @closeDrawer="closeDrawer" :rowProp="{
+        customer_id:rowPro.customer_id,
+        user_id:rowPro.user_id
+      }" ref="detial"></detial>
+    </el-drawer>
   </div>
 </template>
 <script>
@@ -63,9 +70,10 @@ import selfInput from '@/components/assembly/screen/input.vue'
 import datePicker from '@/components/assembly/screen/datePicker.vue'
 import serviceSingle from '@/components/assembly/screen/serviceSingle.vue'
 import selfChannel from '@/components/assembly/screen/channel.vue'
+import detial from '@/components/detials/index.vue'
 
 export default {
-  components: { selfInput, datePicker, serviceSingle, selfChannel },
+  components: { selfInput, datePicker, serviceSingle, selfChannel, detial },
   data () {
     return {
       type: '',
@@ -79,7 +87,10 @@ export default {
       tableData: [],
       transfer_time: [],
       user_id: '',
-      assignment_status: ''
+      assignment_status: '',
+      drawerSize: '60%',
+      detialDrawer: false,
+      rowPro: {},//去详情的此条对象
     }
   },
   created () {
@@ -87,6 +98,21 @@ export default {
     this.init(1)
   },
   methods: {
+    changeDrawerSize () {
+      this.drawerSize = this.drawerSize == '100%' ? '60%' : '100%'
+    },
+    closeDrawer () {
+      this.detialDrawer = false
+    },
+    showDetial (row) {
+      this.rowPro = row
+      this.drawerSize = '60%'
+      this.detialDrawer = true
+      this.$nextTick(() => {
+        this.$refs.detial.acIdx = 0
+        this.$refs.detial.init()
+      })
+    },
     serviceSingleEvent (val) {
       if (val && val.user_id) {
         this.user_id = val.user_id

project/src/components/detials/index.vue

@@ -94,7 +94,6 @@
               {{t.tag_name}}
             </div>
           </div>
-
         </div>
 
       </div>
@@ -110,54 +109,7 @@
       </div>
     </el-dialog>
 
-    <el-dialog
-      title="新建企业标签组"
-      :visible.sync="lableGroup"
-      :append-to-body="true"
-      class="addLable_dialog"
-      width="30%">
-      <div class="groupCon">
-        <div class="group_item">
-          <div class="lable">标签组名称:</div>
-          <div class="opaArea">
-            <el-input class="ipt_group" v-model="groupName" placeholder="请输入标签组名称"></el-input>
-          </div>
-        </div>
-        <div class="group_item">
-          <div class="lable">可见范围:</div>
-          <div class="opaArea">
-            <el-radio-group v-model="scopeVal">
-              <el-radio :label="0">全部员工</el-radio>
-              <el-radio :label="1">部门可用</el-radio>
-            </el-radio-group>
-          </div>
-        </div>
-        <div class="group_item" v-if="scopeVal==1">
-          <div class="lable">选择可用部门:</div>
-          <div class="pointer" style="padding: 8px 12px;border: 1px solid #D2D2D2;margin-left: 20px">
-            + 添加部门
-          </div>
-        </div>
-        <div class="group_item" style="align-items: baseline;margin-top: 10px">
-          <div class="lable">标签名称:</div>
-          <div class="opaArea">
-            <div v-for="(m,mIdx) in moreLable" :key="m.id" class="flex">
-              <el-input class="ipt_group tMar10" v-model="m.name" placeholder="请输入标签名称"></el-input>
-              <span v-if="moreLable&&moreLable.length>1" class="flex">
-                <span class="minusIptGroup" @click="moreLable.splice(mIdx,1)">-</span>
-                <i class="el-icon-top f18 lMar8 pointer" :class="mIdx == 0 ? 'disCss' : ''" @click="upClick(mIdx)"></i>
-                <i class="el-icon-bottom f18 lMar8 pointer" :class="mIdx == moreLable.length-1 ? 'disCss' : ''" @click="downClick(mIdx)"></i>
-              </span>
-            </div>
-            <div class="addIptGroup" @click="moreLable.push({id:moreLable.length,name:''})">+ 添加标签</div>
-          </div>
-        </div>
-      </div>
-      <div slot="footer">
-        <el-button size="mini" @click="lableGroup = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="lableGroup = false">确 定</el-button>
-      </div>
-    </el-dialog>
+
 
 <!--
   <el-dialog
@@ -462,7 +414,6 @@ export default {
     }
   }
 }
-
 </style>
 
 <style lang="scss">

project/src/components/manage/memberManage.vue

@@ -14,7 +14,7 @@
           部门信息
         </div>
         <div>
-          <div v-for="c in checkList" :key="c.id" class="tMar20 flex-align-center">
+          <div v-for="c in depart_List" :key="c.id" class="tMar20 flex-align-center">
             <i class="el-icon-circle-check c-00B38A f16 rMar7 pointer" v-if="checkVals.indexOf(c.id)>-1" @click="checkDepartId(c.id)"></i>
             <i class="el-icon-circle rMar7 pointer" @click="checkDepartId(c.id)" v-else></i>
             {{c.name}}
@@ -79,7 +79,7 @@ export default {
       page_size: 20,
       tableData: [],
       checkVals:[],
-      checkList:[],
+      depart_List:[],
 
     }
   },
@@ -87,16 +87,30 @@ export default {
     this.init(1)
   },
   methods: {
+
     inputChange(keyword){
       this.init(1,keyword)
     },
+    init_depart(){
+      this.$axios.get(this.URL.BASEURL + this.URL.departmentList, {}).then((res) => {
+        var res = res.data
+        if (res && res.errno == 0) {
+
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      })
+    },
     init (page,keyword) {
-      console.log(this.checkVals);
       this.page = page ? page : this.page;
       this.loading = true
       this.$axios.get(this.URL.BASEURL + this.URL.memberList, {
         params: {
           user_name:keyword,
+          department_list:this.checkVals,
           page: this.page,
           page_size: this.page_size
         }

project/src/components/manage/tagManage.vue

@@ -1,43 +1,109 @@
 <template>
   <div v-loading="loading">
     <div class="screenBox">
-      <self-input label_name="标签搜索" @inputChange='(val)=>{input_keyword = val;init(1)}'></self-input>
+      <self-input :hasLabel="false" label_name="标签搜索" @inputChange='(val)=>{input_keyword = val;init(1)}'></self-input>
       <div class="reset" @click="resetEvent">重置</div>
     </div>
     <div class="tableInfo">
       <div>
         <div class="flex">
-          <div class="totalCustom">共<span>{{total}}</span>个标签</div>
+          <div class="totalCustom">共<span>{{total}}</span>个标签组</div>
         </div>
       </div>
       <div class="flex">
-        <el-button type="primary" size="mini" @click="init(1,'export')">添加标签组</el-button>
+        <el-button type="primary" size="mini" @click="addLableGroup">添加标签组</el-button>
       </div>
     </div>
     <div class="tagListBox">
-      <div class="tagItemBox">
+      <div class="tagItemBox" v-for="(item,mIdx) in tableData" :key="item.group_id">
+        <div style="width: 15%">
+          <div class="fWeight600 c-333 f14">{{item.group_name?item.group_name:'-'}}</div>
+          <div class="c-666 f13 tMar10">共{{item.tag_num?item.tag_num:'-'}}个标签</div>
+        </div>
+        <div class="flex-align-center">
+          <div class="add" @click="addLable(item)">+ 添加</div>
+          <el-input v-if="item.iptshow" v-focus class="ipt" v-model="item.addLableVal" placeholder="请输入标签" @blur="iptBlur(item)"></el-input>
+          <div class="lableItem" v-for="t in item.tag_list" :key="t.tag_id">
+            {{t.tag_name}}
+          </div>
+        </div>
+        <div class="flex-align-center lMarauto">
+          <span class="pointer rMar7">
+               <i class="el-icon-top f14 " :class="mIdx == 0 ? 'disCss' : ''" @click="upClick(mIdx)"></i>上移
+          </span>
+          <span class="pointer rMar7">
+                <i class="el-icon-bottom f14 " :class="mIdx == tableData.length-1 ? 'disCss' : ''" @click="downClick(mIdx)"></i>上移
+          </span>
+          <span class="pointer rMar7">
+            <i class="el-icon-edit f14"></i> 修改
+          </span>
+        </div>
 
       </div>
     </div>
+
+    <tagGroup ref="tagRef"></tagGroup>
+
   </div>
 </template>
 <script>
 import selfInput from '@/components/assembly/screen/input.vue'
+import tagGroup from "../assembly/tagGroup";
 export default {
-  components: { selfInput },
+  components: { selfInput, tagGroup },
   data () {
     return {
       loading: false,
       total: 0,
       tableData: [],
       resetFlag: false,//重置
-      input_keyword: ''
+      input_keyword: '',
+      iptshow:false,
+      moreLable:[],
+
+    }
+  },
+  directives:{
+    focus:{
+      inserted : function (el){
+        el.querySelector('input').focus()
+      }
     }
   },
   created () {
     this.init(1)
   },
   methods: {
+    addTag(){
+
+    },
+    addLableGroup(){
+      this.$nextTick(()=>{
+        this.$refs.tagRef.lableGroup = true
+      })
+    },
+    addLable(item){
+      item.iptshow = true
+      item.addLableVal = ''
+      this.$forceUpdate()
+    },
+    iptBlur(item){
+      item.iptshow = false
+      this.$forceUpdate()
+      if(item.addLableVal){
+        this.$axios.post(this.URL.BASEURL + this.URL.addTag, {
+          group_name: this.groupName,
+          name:item.addLableVal
+        }).then((res) => {
+          var res = res.data
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        })
+        // this.lableArr.push({id:this.lableArr.length,name:this.addLableVal})
+      }
+    },
     resetEvent () {//重置
       this.resetFlag = !this.resetFlag
       this.input_keyword = ''
@@ -55,6 +121,10 @@ export default {
         if (res && res.errno == 0) {
           this.tableData = res.rst;
           this.total = this.tableData.length;
+          this.tableData.forEach(item=>{
+            item.iptshow = false
+            item.addLableVal = ''
+          })
         } else if (res.errno != 4002) {
           this.$message({
             message: res.err,
@@ -68,12 +138,73 @@ export default {
     handleCurrentChange (val) {
       this.init(val)
     },
+    // 上移
+    upClick(index) {
+      if(index == 0){return false}
+      this.moreLable = this.swapItems(this.moreLable, index, index - 1)
+    },
+    // 下移
+    downClick(index) {
+      if(index == this.moreLable.length-1){return false}
+      this.moreLable = this.swapItems(this.moreLable, index, index + 1)
+    },
+    swapItems(arr, index1, index2) {
+      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
+      return arr;
+    },
   }
 }
 </script>
+<style lang="scss">
+.tagItemBox{
+  .ipt{
+    width: 120px;
+    margin-right: 8px;
+    margin-top: 10px;
+    .el-input__inner{
+      height: 30px;
+      line-height: 30px;
+    }
+  }
+}
+
+</style>
 <style lang="scss" scoped>
 @import "@/style/list.scss";
 .tableInfo {
   height: 50px;
+
 }
-</style>
+.tagListBox{
+    font-size: 14px;
+    background-color: #fff;
+    .tagItemBox{
+      display: flex;
+      align-items: center;
+      //justify-content: space-between;
+      padding: 20px 10px;
+      border-bottom: 1px solid #E9E9E9;
+      .add{
+        padding: 4px 10px;
+        line-height: 20px;
+        text-align: center;
+        border: 1px solid #D2D2D2;
+        cursor: pointer;
+        margin-right: 8px;
+        margin-top: 10px;
+      }
+      .lableItem{
+        line-height: 20px;
+        text-align: center;
+        border: 1px solid #D2D2D2;
+        padding: 4px 10px;
+        background-color: #fafafa;
+        margin-right: 8px;
+        //cursor: pointer;
+        margin-top: 10px;
+      }
+
+    }
+  }
+
+</style>