<!-- 系统配置 - 菜单管理 -->
<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :top-list="topList"
      :moren="moren"
    />
    <div class="thetopbox">
      <el-form ref="form" :model="queryParams" label-width="120px">
        <el-row style="margin-top: 10px">
          <el-col :span="4">
            <el-form-item :label="'菜单名称'">
              <el-input v-model="queryParams.menuName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 0px">
            <el-form-item :label="'状态'" prop="visible">
              <el-select v-model="queryParams.visible" clearable placeholder="">
                <el-option
                  v-for="item,index in statusList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4" style="margin-left: 30px">
            <div class="searchbox">
              <el-button class="my_search" @click="research()"> {{ '搜索' }}</el-button>
              <el-button class="my_reset" @click="reChongzhi"> {{ '重置' }}</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main">

      <div class="maintop">
        <div class="mainbtn">
          <el-button v-has-buttons="['menuRoleAdd']" size="small" class="thebtn1" @click="addRules">{{'添加'}}</el-button>
          <el-button v-has-buttons="['menuRoleExport']" size="small" style="background: #FFAD41!important;border: none" class="thebtn1" @click="exports"> {{ '导出' }}</el-button>
        </div>
      </div>
      <div class="maintable">
        <!--        <el-table-->
        <!--          ref="multipleTable"-->
        <!--          @select="selectTr"-->
        <!--          :data="tableData"-->
        <!--          style="width: 100%"-->
        <!--          row-key="id"-->

        <!--          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"-->
        <!--        >-->
        <!--          <el-table-column type="selection" align="center" width="55">-->
        <!--          </el-table-column>-->
        <!--          <el-table-column prop="name" :label="'名称'" align="center"> </el-table-column>-->
        <!--          <el-table-column prop="date" label="日期" align="center"> </el-table-column>-->
        <!--        </el-table>-->
        <el-table
          :data="tableData"
          v-loading="loading"
          height="720px"
          style="width: 100%"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
          :span-method="objectSpanMethod"
          row-key="menuId"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          @selection-change="handleSelectionChange"
          @select="selectTr"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column align="left" prop="menuName" :label="'菜单名称'" width="240" />
          <!--          <el-table-column align="center" prop="icon" label="图标">-->
          <!--            <template slot-scope="scope">-->
          <!--              <i v-if="scope.row.icon" :class="scope.row.icon" />-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--                    <el-table-column align="center" prop="orderNum" :label="'排序'" />-->
          <el-table-column align="center" prop="perms" :label="'权限标识'" />
          <el-table-column align="center" prop="routeName" :label="'路由名称'" />
          <!--                    <el-table-column align="center" prop="perms" label="路由路径" />-->
          <el-table-column align="center" prop="visible" :label="'状态'" width="75">
            <template slot-scope="scope">
              <el-button v-if="scope.row.visible==0" type="text" size="small" class="button-s"> {{ '正常' }} </el-button>
              <el-button v-if="scope.row.visible==1" type="text" size="small" class="button-s"> {{ '隐藏' }} </el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="creationTime" :label="'创建日期'" />
          <el-table-column align="center" prop="creationTime" :label="'生效日期'" />
          <el-table-column align="center" prop="" :label="'操作'" fixed="right" width="200">
            <template slot-scope="scope">
              <el-button
                v-has-buttons="['menuRoleUpdate']"
                class="button-s"
                type="text"
                size="small"
                style="color:#6962F6"
                @click="updateShow(scope.row, tableData)"
              >
                {{ '修改' }}
              </el-button>
              <el-button v-if="scope.row.menuType=='C'" v-has-buttons="['menuRoleAdd']" style="color: #3181E5" type="text" size="small" class="button-s" @click="addRules(scope.row)"> {{'新增'}} </el-button>
              <el-button v-has-buttons="['menuRoleDelete']" type="text" size="small" class="button-s" style="color: #C73030" @click="delRole(scope.row, tableData)">
                {{ '删除' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      :title="text"
      :visible.sync="ruleShow"
      width="37%"
      center
      :close-on-click-modal="false"
      :before-close="handleClose"
      :destroy-on-close="true"
    >
      <el-form ref="forms" :rules="rules" :model="table" label-width="100px">
        <el-row style="display: flex;justify-content: space-between">
          <el-col :span="11">
            <el-form-item :label="'上级菜单'" prop="parentId">
              <treeselect
                v-model="table.parentId"
                :append-to-body="false"
                :options="tableData"
                :normalizer="normalizer"
                :show-count="true"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="11" style="margin-left: 60px">
            <el-form-item :label="'菜单类型'" prop="menuType">
              <el-select
                v-model="table.menuType"
                clearable
                placeholder=""
              >
                <el-option
                  v-for="item in menuList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <template v-if="table.menuType!='C'">
          <div style="display: flex;justify-content: space-between">
            <el-col :span="11">
              <el-form-item :label="'菜单名称'" prop="menuName">
                <el-input
                  v-model="table.menuName"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item :label="'权限标识'" prop="perms">
                <el-input
                  v-model="table.perms"
                  clearable
                />
              </el-form-item>
            </el-col>
          </div>
        </template>
        <template v-if="table.menuType=='C'">
          <div style="display: flex;justify-content: space-between">
            <el-col :span="11">
              <el-form-item :label="'图标'" prop="icon">
                <div class="chooseIcons" style="position: relative">
                  <el-popover :ref="`node-popover-${timers}`" placement="top-start" :append-to-body="false" width="30vw" trigger="click" @select="handleSelectaite">
                    <div slot="reference" class="iconDiv">
                      <!--                  {{chooseIcons}}-->
                      <!--                  {{userChooseIcon}}-->
                      <i :class="userChooseIcon" />
                      <div class="iconName">{{ chooseIcons }}</div>
                    </div>
                    <div class="iconList">
                      <i
                        v-for="item in iconList"
                        :key="item"
                        :class="[item, 'icon']"
                        style="font-size: 20px"
                        @click="setIcon(item)"
                      />
                    </div>
                  </el-popover>
                  <i class="el-icon-arrow-down" style="margin: 7px 10px 0 0;color: #ccc;position: absolute;top: 0;right: 0px" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item :label="'菜单名称'" prop="menuName">
                <el-input
                  v-model="table.menuName"
                  clearable
                />
              </el-form-item>
            </el-col>
          </div>
          <div style="display: flex;justify-content: space-between">
            <el-col :span="11">
              <el-form-item :label="'排序'" prop="orderNum">
                <el-input
                  v-model="table.orderNum"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item :label="'权限标识'" prop="perms">
                <el-input
                  v-model="table.perms"
                  clearable
                />
              </el-form-item>
            </el-col>
          </div>
          <div style="display: flex;justify-content: space-between">
            <!--          <el-form-item label="密钥" prop="password">-->
            <!--            <el-input clearable-->
            <!--                      v-model="table.password"-->
            <!--                      placeholder="请输入密钥"-->
            <!--            ></el-input>-->
            <!--          </el-form-item>-->
            <el-col :span="11">
              <el-form-item :label="'路由名称'" prop="routeName">
                <el-input
                  v-model="table.routeName"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item :label="'控制菜单权限'">
                <el-select v-model="table.fieldPerms" clearable :placeholder="'请选择'">
                  <el-option
                    v-for="(item, index) in tzList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          <!--          <el-form-item label="路由地址" prop="routerPath">-->
          <!--            <el-input-->
          <!--              v-model="table.routerPath"-->
          <!--              clearable-->
          <!--            />-->
          <!--          </el-form-item>-->
          </div>
          <div style="display: flex;justify-content: space-between">
            <el-col :span="11">
              <el-form-item :label="'状态'" prop="visible">
                <el-select
                  v-model="table.visible"
                  clearable
                  placeholder=""
                >
                  <el-option
                    v-for="item in statusList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </div>
        </template>

        <div style="padding-top: 100px;display: flex;justify-content: center">
          <el-button type="text" size="small" class="button-style" @click="handleClose"> {{ '取消' }}</el-button>
          <el-button v-preventReClick="3000" type="text" size="small" class="button-style" style="margin-left: 40px;background-color: #48B2FD;" @click="submitBtn()">
            {{ '确认' }}
          </el-button>
        </div>
      </el-form>
    </el-dialog>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="research"
    />
  </div>
</template>

<script>
import { elementIcons } from '@/utils/icon'
import { handleTree } from '@/utils/ruoyi'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getcountryAllList } from '@/api/exchangerate'
import topBar from '@/components/topBar'
import { getbdmenuList, getPubenumsList } from '@/api/system'
import { getgradeRanglist, getAwardsListChiose } from '@/api/level'
import * as api from '@/api/notice'
import * as apis from '@/api/financialCase.js'
import { Message } from 'element-ui'
import { deleteAgreement, getWithdrawalList } from '@/api/configManage'
import { delMenu } from '@/api/notice'
export default {
  name: 'Qxpz',
  components: {
    topBar,
    Treeselect
  },
  data() {
    return {
      value: '',
      forms: '',
      rules: {
        parentId: [
          { required: true, message: '请选择上级菜单', trigger: 'change' }
        ],
        menuType: [
          { required: true, message: '请选择菜单类型', trigger: 'change' }
        ],
        icon: [
          { required: false, message: '请上传图标', trigger: 'blur' }
        ],
        menuName: [
          { required: true, message: '请输入管理名称', trigger: 'blur' }
        ],
        orderNum: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
        perms: [
          { required: true, message: '权限标识', trigger: 'blur' }
        ],
        routeName: [
          { required: true, message: '请输入路由名称', trigger: 'blur' }
        ],
        visible: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        routerPath: [
          { required: true, message: '请输入路由地址', trigger: 'blur' }
        ]
      },
      table: { 'parentId': null, 'menuType': 'C', 'icon': '', 'menuName': '',
        'orderNum': '', 'perms': '', 'routeName': '', 'visible': '', 'routerPath': ''
      },
      ruleShow: false,
      moren: 'menuRole',
      topList: [
        {
          name: '后台菜单',
          path: 'menuRole'
        }
      ],
      defaultParams: {
        label: 'label',
        value: 'value',
        children: 'enumList'
      },
      multipleSelection: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50
      },
      gradeRangList: [],
      awardsList: [],
      menuOptions: [],
      tableData: [],
      loading:false,
      // tableData: [
      //   {
      //     id: 2,
      //     date: "2016-05-04",
      //     name: "1111111111",
      //     isChecked: false,
      //   },
      //   {
      //     id: 3,
      //     date: "2016-05-01",
      //     name: "22222222",
      //     isChecked: false,
      //     children: [
      //       {
      //         id: 5,
      //         date: "2016-05-01",
      //         name: "22221111",
      //         isChecked: false,
      //         children: [
      //           {
      //             id: 6,
      //             date: "2016-05-01",
      //             name: "223344",
      //             isChecked: false,
      //           },
      //           {
      //             id: 7,
      //             date: "2016-05-01",
      //             name: "223344",
      //             isChecked: false,
      //           },
      //         ],
      //       },
      //       {
      //         id: 4,
      //         date: "2016-05-01",
      //         name: "22224444",
      //         isChecked: false,
      //       },
      //     ],
      //   },
      // ],
      total: 0,
      types: '',
      userId: '',
      menuList: [{ 'name': '菜单', 'id': 'C' }, { 'name': '按钮', 'id': 'F' }], // 菜单类型
      statusList: [{ 'name': '显示', 'id': '0' }, { 'name': '隐藏', 'id': '1' }], // 是否显示
      menuAllList: [], // 菜单列表
      userChooseIcon: '',
      chooseIcons: '',
      iconList: [],
      timers: '',
      text: '添加',
      tzList: [
        { value: 0, label: '是' },
        { value: 1, label: '否' }
      ]
    }
  },
  created() {
    this.iconList = elementIcons
    this.research()
    // this.getgradeRanglist()
    // this.getAwardsListChiose()
    // this.getPubenumsList()
    this.getData()
  },
  methods: {
    exports() {
      this.download(
        '/system/manage/menu/export',
        Object.assign({}, this.queryParams),
        `${'后台菜单'}-${new Date().getTime()}.xlsx`
      )
    },
    randomString(len) {
      len = len || 32
      const timestamp = new Date().getTime()
      /** **默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcde fhijkmnprstwxyz2345678'
      const maxPos = $chars.length
      let randomStr = ''
      for (let i = 0; i < len; i++) {
        randomStr += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      console.log('时间戳', timestamp)
      console.log('随机数', randomStr)
      return randomStr + timestamp
    },
    handleSelectaite(item) {
      console.log(item)
      this.$refs[`popoveraite`].doClose() // 关闭el-popover
    },
    setIcon(icon) {
      this.userChooseIcon = icon
      this.table.icon = icon
      this.chooseIcons = ''
    },
    // 转换菜单数据结构
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children
      }
    },
    // 选择某行
    selectTr(selection, row) {
      // this.$set(row, "isChecked", !row.isChecked);
      // this.$nextTick(() => {
      //   this.isAllSelect = row.isChecked;
      //   this.toggleSelect(row, row.isChecked, "tr");
      // });
    },
    getData() {
      // 获取菜单
      api.menuAllList().then((res) => {
        this.menuAllList = res.data
      })
    },
    stopRole(item) {
      // 停用管理员
      this.$confirm(`确认要${item.status === 0 ? '禁用' : '恢复'}该管理员吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.stopAdmin({ 'userId': item.userId, 'status': item.status === 1 ? 0 : 1 }).then((res) => {
          if (res.code === 200) {
            Message({
              message: res.msg,
              type: 'success'
            })
            this.research()
          } else {
            Message({
              message: res.msg,
              type: 'error'
            })
          }
        })
      })
    },
    addRules(item) {
      this.table.parentId = item.menuId
      this.types = 1
      this.ruleShow = true
      this.timers = this.randomString(10)
      this.text = '添加'
    },
    submitBtn() {
      // 添加角色
      this.ruleSubmit()
    },
    updateShow(item) {
      this.types = 2
      this.text = '修改'
      // 更新角色信息
      this.userId = item.menuId
      api.menuDetail(item.menuId).then((res) => {
        if (res.code === 200) {
          this.ruleShow = true
          // this.table = { 'userName': res.data.userName, 'nickName': res.data.nickName,
          //   'password': '', 'phonenumber': res.data.phonenumber,
          //   'sms': res.data.sms == 0 ? '启用' : '停用', 'status': res.data.status == 0 ? '启用' : '停用',
          //   'roleIdList': res.data.roleIdList, 'vertexIdList': res.data.vertexIdList,
          //   'countryIdList': res.data.countryIdList, 'authority': res.data.authority == 0 ? '启用' : '停用',
          //   'pkDept': res.data.pkDept
          // }
          this.table.parentId = null
          this.table = { 'parentId': res.data.parentId, 'menuType': res.data.menuType, 'icon': res.data.icon, 'menuName': res.data.menuName, 'fieldPerms': res.data.fieldPerms,
            'orderNum': res.data.orderNum, 'perms': res.data.perms, 'routeName': res.data.routeName, 'visible': res.data.visible == 0 ? '显示' : '隐藏', 'routerPath': ''
          }
          this.userChooseIcon = res.data.icon
        } else {
          Message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    delRole(item) {
      console.error(item)
      // 删除角色信息
      this.$confirm('确认要删除该菜单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.delMenu(item.menuId).then((res) => {
          if (res.code === 200) {
            Message({
              message: '删除成功',
              type: 'success'
            })
            this.research()
          } else {
            Message({
              message: res.msg,
              type: 'error'
            })
          }
        })
      })
    },
    deppClone(obj) {
      const _obj = JSON.stringify(obj)
      const _obj1 = JSON.parse(_obj)
      return _obj1
    },
    ruleSubmit() {
      const datas = this.table
      const that = this
      this.$refs['forms'].validate(valid => {
        if (!valid) {
          return false
        } else {
          if (this.types === 1) {
            api.addMenu(datas).then((res) => {
              if (res.code === 200) {
                Message({
                  message: '添加成功',
                  type: 'success'
                })
                that.ruleShow = false
                that.table = { 'parentId': null, 'menuType': 'C', 'icon': '', 'menuName': '',
                  'orderNum': '', 'perms': '', 'routeName': '', 'visible': '', 'routerPath': ''
                }
                that.research()
              } else {
                Message({
                  message: res.msg,
                  type: 'error'
                })
              }
            })
          }
          if (this.types === 2) {
            const datas1 = this.deppClone(datas)
            if (datas1.visible === '显示') {
              datas1.visible = ''
              datas1.visible = 0
            } else if (datas.authority === '隐藏') {
              datas1.visible = ''
              datas1.visible = 1
            }
            datas1.menuId = this.userId
            api.updateMenu(datas1).then((res) => {
              if (res.code === 200) {
                Message({
                  message: '修改成功',
                  type: 'success'
                })
                that.ruleShow = false
                that.table = { 'parentId': null, 'menuType': 'C', 'icon': '', 'menuName': '',
                  'orderNum': '', 'perms': '', 'routeName': '', 'visible': '', 'routerPath': ''
                }
                that.research()
              } else {
                Message({
                  message: res.msg,
                  type: 'error'
                })
              }
            })
          }
        }
      })
    },
    statusChange(value) {
      if (this.table.status.length > 1) {
        this.table.status.splice(0, 1)
      }
    },
    handleClose() {
      this.ruleShow = false
      this.table = { 'parentId': null, 'menuType': 'C', 'icon': '', 'menuName': '',
        'orderNum': '', 'perms': '', 'routeName': '', 'visible': '', 'routerPath': '', 'fieldPerms': ''
      }
      this.userChooseIcon = ''
      this.chooseIcons = ''
      this.timers = this.randomString(10)
    },
    changeBox(row) {
      console.error(row)
    },
    addFrom() {
    },
    addRule() {
    },
    changeTime(value) {
      // this.queryParams.creationTime = value[0]
      // this.queryParams.endCreationTime = value[1]
    },
    handleChangeMunu(value) {
      console.log('🌈', value[value.length - 1])
      this.queryParams.menuId = value[value.length - 1]
    },
    // 菜单下拉选
    getPubenumsList() {
      getPubenumsList().then((res) => {
        this.menuOptions = res.data
      })
    },
    // 等级范围选择
    getgradeRanglist() {
      getgradeRanglist().then((res) => {
        this.gradeRangList = res.data
      })
    },
    // 奖衔下拉列表
    getAwardsListChiose() {
      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows
      })
    },
    research() {
      this.loading = true
      // // 日期传入改为起止两个字段
      // if ("" != this.queryParams.creationTime) {
      //   this.queryParams.creationTimeStart = this.queryParams.creationTime[0];
      //   this.queryParams.creationTimeEnd = this.queryParams.creationTime[1];
      // }

      // creationTime: '', // 开始时间
      //   modifiedTime: '' // 结束时间
      api.getMenuList(this.queryParams).then((res) => {
        this.loading = false
        this.tableData = handleTree(res.data, 'menuId')

        // res.rows.forEach((element) => {
        //   element.alist = []
        //   element.blist = []
        //   element.clist = []
        //   element.themenus = ''
        //   element.theaward = ''
        //   element.thegrade = ''
        //   element.menuList.forEach((item) => {
        //     element.alist.push(item.menuVal)
        //     element.themenus = element.alist.join('/')
        //   })
        //   element.awardList.forEach((item) => {
        //     element.blist.push(item.awardVal)
        //     element.theaward = element.blist.join('/')
        //   })
        //   element.gradeList.forEach((item) => {
        //     element.clist.push(item.gradeVal)
        //     element.thegrade = element.clist.join('/')
        //   })
        // })

        // this.tableData = res.data
        // this.total = res.total
      })
    },
    reChongzhi() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 50
      }
      this.research()
    },

    handleSelectionChange(val) {
      console.error(val)
      this.multipleSelection = val
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      //   if (rowIndex % 2 === 0) {
      //     return {
      //       rowspan: 2,
      //       colspan: 1,
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0,
      //     };
      //   }
      // }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body{
  padding: 0 20px 20px 0;
}
::v-deep .el-input__inner{
  width: 100%;
}
::v-deep .el-select{
  width: 100%;
}
::v-deep .el-date-editor--datetimerange.el-input__inner {
  width: auto;
}
::v-deep .el-dialog__title{
  font-weight: bold;
}
.chooseIcons {
  //max-width: 205px;
  border: 1px solid #C0C4CC;
  height: 30px;
  line-height: 30px;
  margin-top: 5px;
}
.iconList {
  width: 30vw;
  height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.icon {
  display: inline-block;
  width: 60px;
  height: 45px;
  color: #000000;
  font-size: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  line-height: 45px;
  margin: 5px;

}
.icon:hover {
  color: red;
  border-color: red;
}
.iconDiv {
  width: 100%;
  height: 100%;
  justify-content: center;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.iconName {
  width: 100%;
  height: 45px;
  text-align: center;
  //border: 1px solid #eee;
  line-height: 45px;
}
::v-deep .vue-treeselect__value-container {
  line-height: 30px;
}

::v-deep .vue-treeselect__control {
  //max-width:205px;
  height: 20px;
  margin-top: 5px
}
.button-style{
  width: 209px;
  height: 48px;
  background: #CCCCCC;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  line-height: 48px;
  padding: 0!important;
  color: #fff;
  font-size: 18px;
}
::v-deep .el-dialog__header{
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.button-s{
  padding: 0 2px!important;
  color: #333;
}
::v-deep .el-button{
  padding: 10px 20px;
}
::v-deep .el-date-editor .el-range__close-icon{
  margin-top: -10px;
}
::v-deep .el-date-editor .el-range-separator{
  margin-top: -10px;
}
::v-deep .el-date-editor .el-range__icon{
  margin-top: -10px;
}
::v-deep .el-input__inner{
  height:32px;
  line-height: 32px;
}
//::v-deep .el-form-item{
//  margin-bottom: 15px;
//}
::v-deep .el-form-item__label{
  color: #333;
  font-weight: inherit;
}
::v-deep .el-row {
  margin-top: 20px;
}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}
.openClose {
  margin-top: 10px;
  margin-right: 10px;
  color: #666666;
  text-align: center;
}
.page {
  padding: 10px 20px;
  background: #f9f9f9;
  font-size: 14px;
  .thetopbox {
    background: #ffffff;
    border-radius: 8px;
    padding-bottom: 10px;
    padding-top: 1px;
    .searchbox {
      display: flex;
      align-items: center;
      .searchtitle {
        margin-right: 10px;
      }
      .searchbtn {
        background: #08143f;
        color: #ffffff;
      }
    }
  }
  .main {
    .maintop {
      display: flex;
      padding: 10px 0;
      justify-content: space-between;
      align-items: center;
      .mainbtn {
        .thebtn1 {
          color: #ffffff;
          background-color: #3181E5;
          border-color: #3181E5;
        }
      }
    }
  }
}
</style>
