bocai_supplyChain_pc/src/components/merchantManagement/memberInfo.vue

<template>
  <div class="townsman-container">
    <!-- <div class="pb16 bb1 mb16 f20" style="color:#ff4400">我的团队</div> -->
    <a-breadcrumb class="newBreadcrumb mt0 mb16">
      <a-breadcrumb-item href>
        <router-link :to="{name:'merchantBack'}">
          <a-icon type="home" />
        </router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>我的团队</a-breadcrumb-item>
    </a-breadcrumb>
    <div class="contentbody bodyContainer">
      <div class="searchbox">
        <div class="searchinput">
          <a-input placeholder="请输入成员姓名/手机号" @keyup.enter="onSearch" @input="resetsearch" v-model="pagination.keys">
            <i slot="prefix" class="iconfont icon-sousuo"></i>
            <button slot="suffix" @click="onSearch">搜索</button>
          </a-input>
          <!-- <div class="groupSelect" type="card" style="margin-bottom: 16px">
            <div v-for="(item,index) in groupList" :class="item.checked?'active':''" :key="index" @click="changeGroup(item.teamName)" v-if="showGroup || index <= 5 && !showGroup">{{item.teamName}}</div>
            <span class="showGroupSelect" @click="showGroup = !showGroup">{{showGroup?'收起':'展开'}}</span>
          </div>-->
        </div>
        <div class>
          <button class="addGroup" @click="addGroupShow = true">添加分组</button>
          <button class="pagechange" @click="showDetail('add')">
            <i class="iconfont icon-fangda"></i> 添加成员
          </button>
          <!-- <button @click="changepage(1)">下一页</button> -->
        </div>
      </div>
      <!-- :expanded-row-keys.sync="expandedRowKeys" -->
      <a-table :columns="columns" :data-source="memberList" :pagination="false" @change="onChange" :loading="{spinning: isspinning,tip: '加载中',wrapperClassName: 'spinstyle',
        }" :locale="tablenodata">
        <!-- <a slot="index" slot-scope="record, text, index">{{ index + 1 }}</a> -->
        <span slot="nickName" slot-scope="text, record">
          <!-- <i class="iconfont icon-chengyuan"></i> -->
          <svg class="svg_icon" v-if="record.agencyRole == 3" aria-hidden="true" style="width:32px">
            <use xlink:href="#icon-chengyuan" />
          </svg>
          <svg class="svg_icon" v-if="record.agencyRole == 2" aria-hidden="true" style="width:32px">
            <use xlink:href="#icon-guanliyuan" />
          </svg>
          <svg class="svg_icon" v-if="record.agencyRole == 1" aria-hidden="true" style="width:32px">
            <use xlink:href="#icon-chuangjianren" />
          </svg>
          {{ record.aliasName || record.userName }}
          <span>{{ record.tel?'（'+ record.tel + '）':'' }}</span>
        </span>
        <div slot="setting" v-if="!record.children" class="setting" slot-scope="text, record" style="color: #f40">
          <a @click="showDetail('detail', record)">详情</a>
          <a v-if="loginUserInfo.agencyRole != 3" class="delete" @click="showDetail('edit', record)">编辑</a>
          <a v-if="loginUserInfo.agencyRole != 3" @click="deleteMemeber(record)">删除</a>
        </div>
      </a-table>
      <div class="pagecontainer mt16">
        <a-pagination :current="+pagination.pageNum" :default-current="1" :defaultPageSize="8" :total="pagination.total" @change="onChange" />
        <div class="ant-pagination-options-quick-jumper f14 ml12">
          <span>共{{ pagination.total }}条，</span>跳至
          <input ref="pageinput" type="text" @keyup.enter="inputpageChange" @blur="inputpageChange" />页
        </div>
      </div>
    </div>
    <a-modal :title="modalTitle" v-model="visible" centered id="demo" @cancel="modalCancel" width="640px" destroyOnClose class="detailWindow">
      <template slot="footer" v-if="this.modalTitle != '成员详情'">
        <button style="background-color: #fff; border-color: #d9d9d9" @click="modalCancel">取消</button>
        <button style="background-color: #f40;color: #fff;border: none;margin-left: 16px;margin-right: 16px;" @click="handleSubmit">确定</button>
      </template>
      <template slot="footer" v-else>
        <span></span>
      </template>
      <template v-if="modalTitle == '成员详情'">
        <a-row style="margin-bottom:24px">
          <a-col :span="4">手机号：</a-col>
          <a-col :span="18">{{ currentMember.tel }}</a-col>
        </a-row>
        <a-row style="margin-bottom:24px">
          <a-col :span="4">备注名：</a-col>
          <a-col :span="18">{{ currentMember.aliasName || currentMember.userName }}</a-col>
        </a-row>
        <a-row style="margin-bottom:24px">
          <a-col :span="4">分组：</a-col>
          <a-col :span="18">{{ currentMember.agencyTeamName }}</a-col>
        </a-row>
        <a-row style="margin-bottom:24px">
          <a-col :span="4">角色：</a-col>
          <a-col :span="18">{{ currentMember.role }}</a-col>
        </a-row>
        <a-row style="margin-bottom:24px">
          <a-col :span="4">权限：</a-col>
          <a-col :span="18">{{ currentMember.permission }}</a-col>
        </a-row>
      </template>
      <template v-else>
        <a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
          <a-form-item label="手机号">
            <a-input placeholder="请输入手机号" v-decorator="['tel', {rules: [{ required: true, message: '请输入手机号' },{ type: 'regexp', validator: validateServiceName, message: '请输入正确的手机号',  }, ], validateTrigger: 'submit', }, ]" :max-length="11" />
          </a-form-item>
          <a-form-item label="备注名">
            <a-input placeholder="请输入备注名" v-decorator="[ 'aliasName', { rules: [{ required: true, message: '请输入备注名' }] }, ]" />
          </a-form-item>
          <a-form-item label="分组">
            <a-select default-value="lucy" placeholder="请选择分组" v-decorator="['agencyTeamId',{ rules: [{ required: false, message: '请选择分组' }] },]" dropdownClassName="groupSelectDrop">
              <div slot="dropdownRender" slot-scope="menu">
                <div v-for="(item,index) in groupList" @click="choiceGroup(item)" class="groupSelectSub fsa" :key="index">
                  <div>{{item.teamName}}</div>
                  <div>
                    <span @click="[addGroupShow = true,idEdit = true,recordId = item.id]">修改</span>
                    <span @click.stop="delGroup(item)">删除</span>
                  </div>
                </div>
                <div class="bt1" style="padding: 9px 16px; cursor: pointer;" @mousedown="e => e.preventDefault()" @click="[addGroupShow = true,idEdit = false]">添加新分组</div>
              </div>
            </a-select>
          </a-form-item>
          <a-form-item label="角色">
            <a-radio-group v-decorator="[
                'agencyRole',
                { rules: [{ required: true, message: '请选择角色' }] },
              ]" :options="options" @change="groupChange" />
          </a-form-item>
          <a-row>
            <a-col :span="4">权限：</a-col>
            <a-col :span="16">{{ permissionName }}</a-col>
          </a-row>
        </a-form>
      </template>
    </a-modal>
    <a-modal :title="idEdit?'编辑分组':'添加分组'" v-model="addGroupShow" centered id="demo" @cancel="addGroupShow = false" @ok="addMemberGroup" width="400px" destroyOnClose class="addGroupModal">
      <a-input placeholder="请输入分组名" v-model="groupName"></a-input>
      <template slot="footer">
        <a-button key="back" @click="addGroupShow = false">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="addMemberGroup">确定</a-button>
      </template>
    </a-modal>
    <a-modal title="删除分组" v-model="delGroupShow" centered id="demo" @cancel="delGroupShow = false" width="400px" destroyOnClose class="addGroupModal">
      <div>确定要删除该分组吗？</div>
      <template slot="footer">
        <a-button key="back" @click="delGroupShow = false">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="delMemberGroup">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { getMemberListApi, deleteMemberApi, addMemberApi, getMemberGroupApi, addMemberGroupApi, updateMemberGroupApi, delMemberGroupApi, updateMemberApi } from '../../api/userinfo'
import { formatDateYMD, getUserApplyOrderStatusById, getAgencyRoleTypeById, getAgencyPermissionNameById, getAgencyPermissionsByRole } from '../../utils/commonUtil'
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  },
}
export default {
  // 组件名称
  name: '',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      tablenodata: {
        // 空状态文本内容
        emptyText: () => (
          <div>
            <div>
              <img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" style="width:105px;height:90px;marginTop:20px" />
            </div>
            <div style="marginBottom:20px">暂无数据</div>
          </div>
        ),
      },
      form: this.$form.createForm(this),
      pagination: {
        pageNum: 1,
        pageSize: 8,
        total: null, //分页配置
        status: 0,
        keys: null,
        // searchTag: 1,
      },
      isspinning: false,
      sortedInfo: null,
      statusNum: {
        num0: 0,
        num1: 0,
        num2: 0,
        num3: 0,
      },
      loginUserInfo: null,
      memberList: [],
      visible: false,
      currentMember: {},
      modalTitle: '新建成员',
      options: [
        // { label: "创建人", value: "1" },
        { label: '管理员', value: '2' },
        { label: '成员', value: '3' },
      ],
      permissionName: '查看职位，报名，查看报名，查看老乡，修改密码，修改手机号',
      permission: 'job:list,apply:add,apply:list,apply:user,user:pwd,user:tel',
      expandedRowKeys: [],
      groupList: [],
      rowSelection,
      showGroup: false,
      addGroupShow: false,
      delGroupShow: false,
      groupName: '', // 分组名称
      loading: false,
      idEdit: false,
    }
  },
  // 计算属性
  computed: {
    columns() {
      const columns = [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          customRender: (text, row, index) => {
            if (row.children) {
              return ''
            } else {
              return index + 1
            }
          },
          // ellipsis: true,
          width: 60,
        },
        {
          title: '姓名',
          dataIndex: 'nickName',
          key: 'nickName',
          scopedSlots: { customRender: 'nickName' },
          ellipsis: true,
          width: 230,
        },
        // {
        //   title: '角色',
        //   dataIndex: 'role',
        //   key: 'role',
        //   width: 100,
        //   ellipsis: true,
        // },
        {
          title: '分组',
          dataIndex: 'agencyTeamId',
          key: 'agencyTeamId',
          width: 100,
          filters: this.groupList,
          customRender: (text, row, index) => {
            let text1
            this.groupList.forEach((item) => {
              if (item.id == text) {
                text1 = item.teamName
              }
            })
            return text1
          },
          ellipsis: true,
          onFilter: (value, record) => {
            console.log(value)
            console.log(record)
            return record.group.indexOf(value) === 0
          },
        },
        {
          title: '权限',
          dataIndex: 'permission',
          key: 'permission',
          ellipsis: true,
        },
        {
          title: '操作',
          dataIndex: 'setting',
          key: 'setting',
          // sorter: (a, b) => a.userApplyOrder.localeCompare(b.userApplyOrder),
          scopedSlots: { customRender: 'setting' },
          ellipsis: true,

          // sortOrder: sortedInfo.columnKey == "userApplyOrder" && sortedInfo.order,
          // ellipsis: true,
          width: 140,
        },
      ]
      return columns
    },
  },
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    // this.getMemberList();
    if (localStorage.getItem('LOGIN_DATA')) {
      this.loginUserInfo = JSON.parse(localStorage.getItem('LOGIN_DATA'))
    }
    this.$emit('setTitle', '我的团队')
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    this.getMemberList()
    this.getMemberGroup()
    window.modalCancel = this.modalCancel
  },
  // 组件方法
  methods: {
    onChange(e, e1, e2) {
      console.log(e)
      console.log(e1)
      console.log(e2)
      if (typeof e == 'number') {
        this.pagination.pageNum = e
        this.getMemberList()
      }
    },
    inputpageChange(e) {
      const pagenumcount = this.pagination.total / this.pagination.pageSize
      console.log(pagenumcount)
      if (e.target.value) {
        if (e.target.value > pagenumcount) {
          this.pagination.pageNum = Math.ceil(pagenumcount)
        } else {
          this.pagination.pageNum = e.target.value
        }
      } else {
        this.pagination.pageNum = 1
      }
      // this.getJobList();
      this.getMemberList()
      console.log(e)
    },
    async getMemberList() {
      // let jobinfo = {...this.pagination , searchTag:1}
      try {
        this.isspinning = true
        console.log(this.pagination)
        getMemberListApi(this.pagination).then(({ data }) => {
          if (data.status === 200) {
            this.memberList = data.data.recordList
            this.memberList.forEach((item, index) => {
              // item.group = '分组' + ((index % 5) + 1)
              // item1.children.forEach((item) => {
              console.log(item)
              item.role = getAgencyRoleTypeById(item.agencyRole)
              item.permission = getAgencyPermissionNameById(item.agencyPermissions)
              // })
            })
            this.pagination.total = data.data.recordCount
          }
        })
        console.log(data)
      } catch (error) {
        console.log(error)
      }
      this.isspinning = false
    },
    getMemberGroup() {
      getMemberGroupApi().then(({ data }) => {
        if (data.status == 200) {
          console.log(data)
          this.groupList = data.data.list
          this.groupList.forEach((item, index) => {
            console.log(item)
            if (index > 0) {
              item.checked = false
            } else {
              item.checked = true
            }
            console.log(item)
          })
        }
      })
    },
    addMemberGroup() {
      let that = this
      this.loading = true
      if (that.groupName.trim == '') {
        return
      } else {
        if (this.idEdit) {
          updateMemberGroupApi({ teamName: this.groupName, recordId: this.recordId }).then(({ data }) => {
            console.log(data)
            if (data.status == 200) {
              that.$message.success('修改成功')
              that.groupName = ''
              that.addGroupShow = false
            } else {
              that.$message.warning(data.msg)
            }
            that.getMemberGroup()
            that.loading = false
          })
        } else {
          addMemberGroupApi({ teamName: this.groupName }).then(({ data }) => {
            console.log(data)
            if (data.status == 200) {
              that.$message.success('添加成功')
              that.groupName = ''
              that.addGroupShow = false
            } else {
              that.$message.warning(data.msg)
            }
            that.getMemberGroup()
            that.loading = false
          })
        }
      }
    },
    // async updateMemberGroup() {
    //   let { data } = await console.log(data)
    // },
    delMemberGroup() {
      this.loading = true
      delMemberGroupApi(this.recordId).then(({ data }) => {
        if (data.status == 200) {
          this.$message.success('删除成功')
          this.delGroupShow = false
        } else {
          this.$message.warning(data.msg)
        }
        this.getMemberGroup()
        this.loading = false
      })
    },

    delGroup(item) {
      console.log(item)
      this.recordId = item.id
      this.delGroupShow = true
    },
    getPopupContainer(el, dialogContext) {
      console.log(el)
      console.log(dialogContext)
      if (dialogContext) {
        return dialogContext.getDialogWrap()
      } else {
        return document.body
      }
    },
    resetpag() {
      // this.pagination = {
      // 	//分页配置
      // 	pageNum: 1,
      // 	pageSize: 8,
      // 	total: null,
      // 	status: this.pagination.status,
      // 	keys: null,
      // };
    },
    resetsearch(e) {
      console.log(e)
      if (e.target.value.length === 0) {
        this.pagination.keys = ''

        this.getMemberList()
      }
    },
    onSearch() {
      if (this.pagination.keys != null && this.pagination.keys.length != 0) {
        this.getMemberList()
      }
    },
    showDetail(type, e) {
      console.log(type)
      console.log(e)
      let that = this
      if (type == 'edit') {
        this.currentMember = e
        this.modalTitle = '编辑'
        this.visible = true
        setTimeout(() => {
          console.log(this.currentMember)
          that.form.setFieldsValue({
            agencyRole: this.currentMember.agencyRole + '',
            aliasName: this.currentMember.aliasName,
            tel: this.currentMember.tel,
            group: this.currentMember.group,
            agencyTeamId: this.currentMember.agencyTeamName,
          })
        }, 200)
      } else if (type == 'detail') {
        this.currentMember = e
        this.modalTitle = '成员详情'
        this.visible = true
      } else {
        this.modalTitle = '新建成员'
        this.visible = true
        this.$nextTick(() => {
          console.log(123)
          that.form.setFieldsValue({
            agencyRole: '2',
          })
        })
      }
    },
    deleteMemeber(e) {
      this.$confirm({
        title: '确定删除',
        content: '是否确定删除该成员',
        onOk: async () => {
          console.log('ok')
          let { data } = await deleteMemberApi({ id: e.id })
          console.log(data)
          if (data.status == 200) {
            this.getMemberList()
          } else {
            console.log(data.msg)
            this.$message.warning(data.msg)
          }
        },
        onCancel: () => {
          console.log('cancel')
        },
      })
    },
    modalCancel() {
      // console.log(this);
      this.visible = false
      this.permission = getAgencyPermissionsByRole()
      this.permissionName = getAgencyPermissionNameById(this.permission)
    },
    handleSubmit() {
      console.log('issubmit')
      console.log(this.currentMember)
      this.form.validateFields(async (err) => {
        console.log(err)
        if (err == null) {
          if (this.modalTitle == '编辑') {
            try {
              let { data } = await updateMemberApi({
                ...this.form.getFieldsValue(),
                agencyPermissions: this.permission,
                agencyTeamId: this.agencyTeamId,
                id: this.currentMember.id,
              })
              console.log(data)
              if (data.status == 200) {
                this.$message.success('修改成功')
                this.visible = false
                this.permission = getAgencyPermissionsByRole()
                this.permissionName = getAgencyPermissionNameById(this.permission)
                this.getMemberList()
              } else {
                this.$message.warning(data.msg)
                this.visible = false
              }
            } catch (error) {
              console.log(error)
            }
          } else {
            try {
              let { data } = await addMemberApi({
                ...this.form.getFieldsValue(),
                agencyPermissions: this.permission,
                agencyTeamId: this.agencyTeamId,
              })
              console.log(data)
              if (data.status == 200) {
                this.$message.success('新建成功')
                this.visible = false
                this.permission = getAgencyPermissionsByRole(1)
                this.permissionName = getAgencyPermissionNameById(this.permission)
                this.getMemberList()
              } else {
                this.$message.warning(data.msg)
                this.visible = false
              }
            } catch (error) {
              console.log(error)
            }
          }
        }
      })
    },
    changeGroup(e) {
      console.log(e)
      this.groupList.forEach((item) => {
        item.checked = false
        if (item.text == e) {
          item.checked = true
        }
      })
    },
    choiceGroup(e) {
      console.log(e)
      this.form.setFieldsValue({
        agencyTeamId: e.teamName,
      })
      this.agencyTeamId = e.id
      console.log(this.agencyTeamId)
    },
    groupChange(e) {
      console.log(e)
      this.form.setFieldsValue({
        agencyRole: e.target.value,
      })
      this.permission
      if (this.form.getFieldValue('agencyRole') == 1) {
        this.permission = getAgencyPermissionsByRole(1)
      } else {
        this.permission = getAgencyPermissionsByRole(2)
      }
      console.log(this.permission)
      this.permissionName = getAgencyPermissionNameById(this.permission)
    },
    validateServiceName(rule, value, callback) {
      console.log(rule)
      console.log(value)
      console.log(callback)
      let reg = /^1[3|4|5|7|8|9][0-9]{9}$/
      // if(value.length == 11){
      if (!reg.test(value)) {
        callback(new Error())
      } else {
        callback()
      }
      // }
    },
  },
}
</script>

<style scoped lang="less">
.townsman-container {
  // margin-top: 16px;
  // min-height: calc(100vh - 200px);
  height: 100%;
  padding: 0px;
  // background-color: #fff;
  border: 1px solid #0000;
}
.contenttitle {
  display: flex;
  padding-bottom: 0px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(77, 87, 94, 0.1);
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 16px;

  ul {
    display: flex;
    height: 40px;
    .townsmanactive {
      // border-color: #;
      // width: 128px;
      color: #ff4400;
      z-index: 999;
      border-bottom: 2px solid #ff6600;
      > span {
        font-size: 16px;
        color: #ff6600;
      }
    }
    li {
      position: relative;
      width: 118px;
      font-size: 16px;
      // height: 40px;
      padding-bottom: 16px;
      color: #666;
      // line-height: 40px;
      text-align: center;
      transition: width 0.2s;
      cursor: pointer;
      > span {
        margin-left: 12px;
        font-size: 16px;
        color: #ff6600;
      }
      &::after {
        content: '';
        position: absolute;
        display: block;
        width: 1px;
        height: 16px;
        right: 0;
        top: 5px;
        // transform: translateY(-50%);
        background-color: #eeeeee;
      }
      &:last-child::after {
        display: none;
      }
    }
    button {
      width: 100px;
      height: 28px;
      position: relative;
      font-size: 14px;
      border: 1px solid #cccccc;
      background-color: #fff;
      margin-right: -1px;
      cursor: pointer;
      &:hover {
        color: #ff4400;
      }
    }
    button:first-child {
      // border-radius: 4px 0px 0px 4px;
    }
    button:last-child {
      // border-radius: 0px 4px 4px 0px;
    }
  }
}
.contentbody {
  overflow: hidden;
  /deep/ .searchbox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    .searchinput {
      // width: 326px;
      display: flex;
      position: relative;
      .groupSelect {
        display: flex;
        position: relative;
        flex-wrap: wrap;
        width: 410px;
        margin-left: 20px;
        border-radius: 4px;
        margin-bottom: 0 !important;
        > div {
          // width: 60px;
          text-align: center;
          padding: 5px 12px;
          font-size: 14px;
          border: 1px solid #eee;
          cursor: pointer;
          margin-bottom: 10px;
        }
        > div:not(:first-child) {
          margin-left: -1px;
          // border-left: none;
        }
        .active {
          color: #ff4400;
          border: 1px solid #ff4400;
          z-index: 1;
        }
        .showGroupSelect {
          position: absolute;
          right: 12px;
          top: 6px;
          color: #ff4400;
          font-size: 14px;
          cursor: pointer;
        }
      }
      .ant-input {
        width: 280px;
        position: relative;
        height: 32px;
        text-indent: 10px;
        background: #fff;
        // border: 1px solid rgba(77, 87, 94, 0.3);
        border-radius: 0px;
        box-shadow: 0px 2px 4px 0px transparent;
        font-size: 14px !important;
        padding-right: 0;
        border-color: #ddd;
        // z-index: ;
        &::placeholder {
          text-indent: 10px;
          font-size: 14px !important;
        }
        &:hover {
          border-color: #ff4400;
          box-shadow: none;
        }
        &:focus {
          border-color: #ff4400;
        }
      }
      .ant-input-affix-wrapper {
        width: unset;
        position: relative;
        .ant-input-prefix {
          position: absolute;
          width: 20px;
          right: 0;
          top: 16px;
          i {
            color: #c9c9c9;
          }
        }
        .ant-input-suffix {
          // position: absolute;
          top: 0;
          transform: translate(0);
          right: 0px !important;
        }
      }
      button {
        width: 70px;
        height: 32px;
        color: white;
        background: #ff4400;
        border-color: #ff4400;
        border: none;
        border-radius: 0px;
        font-size: 14px;
        box-shadow: none;
        cursor: pointer;
        outline: none;
        &:hover {
          background-color: #ff4400cc;
        }
        // &:focus {
        //   border: none;
        // }
      }
    }
    .addGroup {
      // width: 120px;
      padding: 0 16px;
      height: 32px;
      line-height: 30px;
      border: 1px solid #cccccc;
      // border-radius: 4px;
      font-size: 16px;
      color: #333;
      background-color: #fff;
      &:hover {
        border-color: #ff4400;
        color: #ff4400;
      }
      &:first-child {
        margin-right: 12px;
      }
    }
    .pagechange {
      // width: 120px;
      padding: 0 16px;
      height: 32px;
      line-height: 30px;
      border: 1px solid #f40;
      // border-radius: 4px;
      font-size: 16px;
      color: #fff;
      background-color: #ff4400;
      &:hover {
        opacity: 0.8;
      }
      &:first-child {
        margin-right: 12px;
      }
    }
  }
  /deep/ .ant-table-placeholder {
    min-height: 300px;
    > div {
      position: relative;
      height: 131px;
      top: 30px;
      // transform: translateY(-50%);
    }
  }
  /deep/ .ant-table-content {
    .ant-table-body {
      .ant-table-thead {
        th {
          padding: 12px 0;
          div {
            padding: 0px 8px;
          }
          &:not(:first-child) {
            > span {
              //  line-height: 22px;
              > div {
                //  line-height: 1;
                border-left: 1px solid #ccc;
                padding-left: 12px;
              }
            }
          }
        }
        .ant-table-row-cell-break-word {
          font-weight: bold;
        }
        .ant-table-row-cell-ellipsis {
          font-weight: bold;
        }
      }
      .ant-table-tbody {
        .ant-table-row-cell-ellipsis {
          padding: 12px 14px;
        }
        .ant-table-row-expand-icon {
          // color: #000;
          padding: 0;
        }
        .ant-table-row-indent {
          display: none !important;
        }
      }
    }
  }
}
/deep/ .ant-table-column-sorter-inner {
  height: 16px !important;
}
.setting {
  a:nth-child(2) {
    padding: 0 9px;
    margin: 0 9px;
  }
  // a:last-child {
  // }
  .delete {
    border-left: 1px solid #979797;
    border-right: 1px solid #979797;
  }
}
// /deep/ .ant-table-row-cell-break-word {
//   padding: 12px 8px !important;
// }
// .addGroupModal {
/deep/ .ant-modal {
  .ant-modal-header {
    text-align: center;
    border-bottom: none;
  }
  .ant-modal-footer {
    border-top: none;
  }
  .ant-btn:not(.ant-btn-primary):hover,
  .ant-btn:not(.ant-btn-primary):focus {
    color: #ff4400;
    background-color: #fff;
    border-color: #ff4400;
  }
  .ant-btn-primary {
    background-color: #ff4400;
    border-color: #ff4400;
    &:hover {
      opacity: 0.8;
    }
  }
}
// }
.detailWindow {
  /deep/ .ant-modal {
    .ant-modal-close-x {
      height: 50px;
      width: 50px;
      line-height: 50px;
    }
    .ant-modal-header {
      padding: 14px;
      text-align: left;
      background-color: #f5f5f5;
    }
    .ant-modal-body {
      padding-left: 100px;
      min-height: 318px;
      .ant-form-item {
        margin-bottom: 12px;
        //   .ant-form-item-control-wrapper{
        //     margin-bottom: 16px;
        //   }
      }
      .ant-form-item-control {
        line-height: 40px;
      }
      .ant-row {
        line-height: 30px;

        .ant-col:first-child {
          text-align: right;
        }
      }
    }
    .ant-modal-footer {
      padding: 0;
      button {
        outline: none;
        width: 60px;
        height: 32px;
        font-size: 14px;
        border: 1px solid #fff;
        border-radius: 5px;
        margin: 10px 0;
      }
    }
  }
}
.groupSelectDrop {
  .groupSelectSub {
    cursor: pointer;
    padding: 9px 16px;
    &:hover {
      > div {
        color: #ff4400 !important;
      }
    }
  }
}
/deep/.spinstyle {
  .ant-spin-dot-item {
    background-color: #1890ff !important;
  }
  .ant-spin-text {
    color: #1890ff !important;
  }
}
.pagecontainer {
  // position: absolute;
  // bottom: 0;
  // left: 50%;
  width: 100%;
  // transform: translateX(-50%);
  display: flex;
  // justify-content: center;
}
</style>