supply-front/src/views/setting/account.vue

<template>
  <div class="app-container">
    <div class="tree-container">
      <div style="padding: 10px; display: flex">
        <el-button
          icon="el-icon-refresh-right"
          size="small"
          style="padding: 9px 10px; margin-right: 6px"
          @click="refreshDepartment()"
        />
        <el-input v-model="filterText" placeholder="输入关键字进行过滤" size="small" clearable />
      </div>
      <el-tree
        ref="listTree"
        :data="departmentList"
        :props="defaultProps"
        default-expand-all
        highlight-current
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        node-key="id"
        @node-click="handleNodeClick"
      >
        <div slot-scope="{ node, data }" class="custom-tree-node">
          <i
            :class="data.children && data.children.length > 0 ? 'el-icon-folder-opened' : 'el-icon-document-remove'"
          /><span>{{ node.label }}</span>
        </div>
      </el-tree>
    </div>
    <div class="mymain-container">
      <div class="screen-container">
        <!-- <div class="top clearfix">
          <div class="title fl">条件筛选</div>
        </div> -->
        <Collapse :screen-form="screenForm">
          <template #right_btn>
            <el-button size="mini" @click="resetScreenForm">清空</el-button>
            <el-button size="mini" type="primary" @click="submitScreenForm">搜索</el-button>
          </template>
          <template #search>
            <el-form ref="screenForm" :model="screenForm" label-width="150px" size="mini" label-position="left">
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :lg="8">
                  <el-form-item label="账号/用户名名称:" prop="name">
                    <el-input v-model="screenForm.name" placeholder="请输入账号/用户名名称" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8">
                  <el-form-item label="角色:" prop="roleId">
                    <el-select v-model="screenForm.roleId" class="selectStyle" placeholder="请选择" filterable>
                      <el-option v-for="(v, i) in roleList" :key="i" :label="v.name" :value="v.adminRoleId" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </template>
        </Collapse>
      </div>
      <div class="btn-group clearfix" style="margin-top: 20px">
        <div class="fl">
          <el-button size="mini" type="primary" @click="openAccountForm('add')">添加账号</el-button>
        </div>
        <div class="fr">
          <el-button v-if="checkBtnRole('download')" size="mini" @click="handleDownload">下载导入模板</el-button>
          <ExportButton class="import-btn" :ex-url="'admin/user/user/listExport'" :ex-params="exParams" />
          <ImportButton
            class="import-btn"
            im-text="批量变更仓库和产品分类"
            :im-url="'admin/user/batch/update'"
            @importSuccess="getList"
          />

          <el-upload
            v-if="checkBtnRole('import')"
            class="import-btn"
            action=""
            :http-request="handleImport"
            :file-list="importFileList"
            :show-file-list="false"
          >
            <!-- v-if="checkBtnRole('import')" -->
            <el-button size="mini" type="primary" :loading="importLoading">{{
              importLoading ? '导入中...' : '导入'
            }}</el-button>
          </el-upload>
          <!--/admin/user/batch/update
          <el-button size="small" type="primary" @click="handleExport">导出</el-button>

          <el-button size="small" type="primary" :loading="importLoading" @click="clickImport">{{ importLoading ? '导入中...' : '导入' }}</el-button>
-->
        </div>
      </div>

      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <!-- <el-table-column align="center" type="selection" width="55" fixed></el-table-column> -->
          <el-table-column
            show-overflow-tooltip
            align="center"
            label="账号"
            prop="userName"
            min-width="120"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            label="用户名"
            prop="nickName"
            min-width="160"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            label="角色"
            prop="roleName"
            min-width="100"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            label="修改人"
            prop="updateBy"
            min-width="160"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            label="修改时间"
            prop="updateTime"
            min-width="160"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            label="创建时间"
            prop="createTime"
            min-width="160"
          />
          <el-table-column
            show-overflow-tooltip
            align="center"
            label="最后登录时间"
            prop="lastLoginTime"
            min-width="160"
          />
          <el-table-column show-overflow-tooltip align="center" label="状态" class-name="status-col">
            <template slot-scope="scope">
              <el-tag size="mini" :type="scope.row.status ? 'success' : 'danger'">{{
                scope.row.status ? '正常' : '冻结'
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" min-width="160">
            <template slot-scope="scope">
              <template v-if="checkBtnRole('status')">
                <el-popconfirm
                  v-if="scope.row.status"
                  style="margin-right: 10px"
                  title="确定冻结吗？"
                  @onConfirm="changeStatus(scope.row.adminUserId, 0)"
                >
                  <el-button slot="reference" type="text">冻结</el-button>
                </el-popconfirm>
                <el-popconfirm
                  v-else
                  style="margin-right: 10px"
                  title="确定恢复吗？"
                  @onConfirm="changeStatus(scope.row.adminUserId, 1)"
                >
                  <el-button slot="reference" type="text">恢复</el-button>
                </el-popconfirm>
              </template>

              <el-button
                v-if="checkBtnRole('edit')"
                type="text"
                @click="openAccountForm('edit', scope.row.adminUserId)"
              >编辑</el-button>
              <el-button
                v-if="checkBtnRole('reset')"
                type="text"
                @click="handleReset(scope.row.adminUserId)"
              >重置密码</el-button>

              <!-- <el-popconfirm style="margin-left: 10px;" title="确定删除吗？" @onConfirm="deleteAccount(scope.row.id)" v-if="checkBtnRole('del')">
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm> -->
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination clearfix">
        <div class="fr">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 添加编辑账号 -->
    <el-dialog
      :title="AccountFormType == 'add' ? '添加账号' : '编辑账号'"
      :visible.sync="AccountFormVisible"
      :show-close="false"
      width="40%"
      :close-on-click-modal="false"
    >
      <el-form
        ref="AccountForm"
        :model="AccountForm"
        :rules="AccountFormRules"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="账号" prop="account">
          <el-input v-model="AccountForm.account" autocomplete="off" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="用户名" prop="nickName">
          <el-input v-model="AccountForm.nickName" autocomplete="off" placeholder="请输入用户名" />
        </el-form-item>

        <el-form-item label="角色组" prop="role">
          <el-select v-model="AccountForm.role" placeholder="请选择角色组" style="width: 100%" filterable>
            <el-option
              v-for="(item, index) in roleList"
              :key="index"
              :label="item.name"
              :value="item.adminRoleId"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="roleObj.type === 0" label="部门" prop="department">
          <el-tree
            ref="tree"
            :data="departmentList"
            show-checkbox
            :check-strictly="true"
            node-key="adminWebsitId"
            highlight-current
            :props="props"
          />
        </el-form-item>
        <el-form-item v-show="roleObj.type === 0 && roleObj.name === '经销商'" label="经销商" prop="dealer">
          <el-select v-model="AccountForm.dealer" placeholder="请选择经销商" style="width: 100%" filterable>
            <el-option v-for="(item, index) in dealerList" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item v-show="roleObj.type === 1 || roleObj.type === 2" label="商户" prop="merchant">
          <el-select v-model="AccountForm.merchant" placeholder="请选择商户" style="width: 100%" filterable>
            <el-option
              v-for="(item, index) in merchantList"
              :key="index"
              :label="item.adminCompanyName"
              :value="item.adminCompanyId"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="roleObj.type === 0 && roleObj.name === '经销商'" label="集团公司" prop="isGroup">
          <el-radio-group v-model="AccountForm.isGroup">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-show="roleObj.type === 0 && roleObj.name === '经销商' && !AccountForm.isGroup"
          label="所属集团"
          prop="company"
        >
          <el-select v-model="AccountForm.company" placeholder="请选择所属集团" style="width: 100%" filterable>
            <el-option v-for="(item, index) in groupList" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item v-show="roleObj.type === 0 && roleObj.name === '经销商'" label="是否折让" prop="isDiscount">
          <el-radio-group v-model="AccountForm.isDiscount">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="AccountFormType == 'add'" label="密码" prop="newPassword">
          <el-input
            ref="password1"
            v-model="AccountForm.newPassword"
            autocomplete="off"
            placeholder="请输入密码"
            :type="passwordType1"
          />
          <span class="show-pwd" @click="showPwd(1)">
            <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item v-if="AccountFormType == 'add'" label="确认密码" prop="confirmPassword">
          <el-input
            ref="password2"
            v-model="AccountForm.confirmPassword"
            autocomplete="off"
            placeholder="请再次输入密码"
            :type="passwordType2"
          />
          <span class="show-pwd" @click="showPwd(2)">
            <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item label="可用仓库" prop="correspondIds">
          <el-select
            v-model="AccountForm.correspondIds"
            multiple
            placeholder="请选择可用仓库"
            style="width: 100%"
            filterable
          >
            <el-option v-for="(item, index) in stockList" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="物料分类" prop="k3CategoryIds">
          <el-select
            v-model="AccountForm.k3CategoryIds"
            multiple
            placeholder="请选择物料分类"
            style="width: 100%"
            filterable
          >
            <el-option
              v-for="(item, index) in categoryList"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="roleObj.name === '经销商'" label="商用经销商" prop="isShangyong">
          <el-radio-group v-model="AccountForm.isShangyong" size="mini">
            <el-radio v-for="item in [{label:'是',value:true},{label:'否', value:false}]" :key="item.value" :label="item.value">
              {{item.label}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAccountForm">取 消</el-button>
        <el-button type="primary" @click="submitAccountForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 重置密码 -->
    <el-dialog
      title="重置密码"
      :visible.sync="resetFormVisible"
      :show-close="false"
      width="40%"
      :close-on-click-modal="false"
    >
      <el-form ref="resetForm" :model="resetForm" :rules="resetFormRules" label-position="left" label-width="100px">
        <el-form-item label="输入新密码" prop="newPassword">
          <el-input
            ref="password1"
            v-model="resetForm.newPassword"
            autocomplete="off"
            placeholder="请输入新密码"
            :type="passwordType1"
          />
          <span class="show-pwd" @click="showPwd(1)">
            <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            ref="password2"
            v-model="resetForm.confirmPassword"
            autocomplete="off"
            placeholder="请再次输入新密码"
            :type="passwordType2"
          />
          <span class="show-pwd" @click="showPwd(2)">
            <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelResetForm">取 消</el-button>
        <el-button type="primary" @click="submitResetForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getStockListStock,
  getDepartmentList,
  getAccountList,
  addAccount,
  editAccount,
  deleteAccount,
  getAccountDetail,
  getRoleList,
  getMerchantList,
  changeAccountStatus,
  resetPassword
} from '@/api/setting'
import { getDealerList, getCategoryList } from '@/api/common'
import { findElem, downloadFiles, handleImportTwo } from '@/utils/util'

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else if (value && value.length < 6) {
        callback(new Error('密码长度至少6位'))
      } else {
        if (this.resetForm.confirmPassword !== '') {
          this.$refs.resetForm.validateField('confirmPassword')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.resetForm.newPassword) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    var validatePass3 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else if (value && value.length < 6) {
        callback(new Error('密码长度至少6位'))
      } else {
        if (this.AccountForm.confirmPassword !== '') {
          this.$refs.AccountForm.validateField('confirmPassword')
        }
        callback()
      }
    }
    var validatePass4 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.AccountForm.newPassword) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    var validateName = (rule, value, callback) => {
      if (!/^[A-Za-z0-9]+$/.test(value)) {
        callback(new Error('帐号只能用英文字母和数字组成'))
      } else {
        callback()
      }
    }
    return {
      stockList: [], // 仓库列表
      baseURL: process.env.VUE_APP_BASE_API,
      dataList: null, // 列表数据
      moduleList: null, // 模块列表
      listLoading: true, // 列表加载loading
      screenForm: {
        // 筛选表单数据
        name: '', // 名称
        roleId: ''
      },
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      selectDepartment: null, // 选中的部门
      isCollapse: true,
      AccountFormType: 'add',
      AccountFormVisible: false,
      AccountForm: {
        account: '', // 账号
        nickName: '', // 用户名
        merchant: '', // 商户
        dealer: '', // 经销商
        role: '', // 角色组
        correspondIds: [], // 仓库
        isGroup: false,
        company: '',
        isDiscount: true,
        newPassword: '', // 新密码
        confirmPassword: '', // 确认密码
        k3CategoryIds: [],
        isShangyong: false, // 是否商用经销商
      },
      AccountFormRules: {
        account: [{ required: true, validator: validateName, trigger: 'blur' }],
        nickName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        role: [{ required: true, message: '请选择角色组', trigger: 'change' }],
        correspondIds: [{ required: true, message: '请选择可用仓库', trigger: 'change' }],
        isShangyong: [{ required: true, message: '请选择商用经销商', trigger: 'change' }],
        newPassword: [{ required: true, validator: validatePass3, trigger: 'blur' }],
        confirmPassword: [{ required: true, validator: validatePass4, trigger: 'blur' }]
      },
      editAccountId: null,
      categoryList: [],
      filterText: '',
      departmentList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      props: {
        multiple: true,
        value: 'adminWebsitId',
        label: 'name',
        children: 'children'
      },

      tableSelection: [],

      importLoading: false, // 导入加载loading
      importFileList: [], // 导入列表

      resetId: null,
      resetFormVisible: false,
      resetForm: {
        newPassword: '', // 新密码
        confirmPassword: '' // 确认密码
      },
      resetFormRules: {
        newPassword: [{ required: true, validator: validatePass, trigger: 'blur' }],
        confirmPassword: [{ required: true, validator: validatePass2, trigger: 'blur' }]
      },

      roleList: [], // 角色列表
      roleObj: {}, // 选中的角色
      merchantList: [],
      dealerList: [],
      groupList: [],

      passwordType1: 'password',
      passwordType2: 'password'
    }
  },
  computed: {
    exParams() {
      return {
        userName: this.screenForm.name,
        roleId: this.screenForm.roleId,
        isMaster: true
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.listTree.filter(val)
    },
    'AccountForm.role'() {
      if (this.AccountForm.role) {
        const index = findElem(this.roleList, 'adminRoleId', this.AccountForm.role)
        this.roleObj = this.roleList[index]
      }
    }
  },
  async created() {
    this.getTree()
    this.getList()
    this.getStockList()
    await this.getRoleList()
  },
  methods: {
    // 获取仓库仓位对应关系列表
    async getStockList() {
      const res = await getStockListStock({ pageSize: -1, pageNum: 1 })
      this.stockList = res.data.records
    },
    // 查询按钮权限
    checkBtnRole(value) {
      // let btnRole = this.$route.meta.roles;
      // if(!btnRole) {return true}
      // let index = btnRole.indexOf(value);
      // return index >= 0 ? true : false;
      return true
    },

    // 获取角色列表
    async getRoleList() {
      const result = await new Promise((resolve, reject) => {
        getRoleList({ pageNum: 1, pageSize: -1 })
          .then(res => {
            this.roleList = res.data.records
            resolve(res.data)
          })
          .catch(res => {
            resolve([])
          })
      })
      return result
    },
    // 获取金蝶品类
    async getCategoryList() {
      const result = await new Promise((resolve, reject) => {
        getCategoryList({ pageNum: 1, pageSize: -1 })
          .then(res => {
            this.categoryList = res.data.records
            resolve(res.data)
          })
          .catch(res => {
            resolve([])
          })
      })
      return result
    },
    // 获取商户列表
    async getMerchantList() {
      const result = await new Promise((resolve, reject) => {
        getMerchantList({
          pageNum: 1,
          pageSize: -1
        })
          .then(res => {
            this.merchantList = res.data.records
            resolve(res.data.records)
          })
          .catch(res => {
            resolve([])
          })
      })
      return result
    },

    // 获取经销商列表
    async getDealerList(id) {
      const result = await new Promise((resolve, reject) => {
        getDealerList({
          pageNum: 1,
          pageSize: -1,
          bindUser: false,
          adminUserId: id || ''
        })
          .then(res => {
            this.dealerList = res.data.records
            resolve(res.data.records)
          })
          .catch(res => {
            resolve([])
          })
      })
      return result
    },

    // 获取集团列表
    async getGroupList(id) {
      const result = await new Promise((resolve, reject) => {
        getDealerList({
          pageNum: 1,
          pageSize: -1
        })
          .then(res => {
            this.groupList = res.data.records
            resolve(res.data.records)
          })
          .catch(res => {
            resolve([])
          })
      })
      return result
    },

    // 获取部门列表
    getTree() {
      getDepartmentList().then(res => {
        this.departmentList = res.data
      })
    },

    // 获取账号列表
    getList() {
      this.listLoading = true

      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        adminWebsitId: this.selectDepartment ? this.selectDepartment.adminWebsitId : '',
        userName: this.screenForm.name,
        roleId: this.screenForm.roleId,
        isMaster: true
      }

      getAccountList(params).then(res => {
        this.dataList = res.data.records
        this.listTotal = res.data.total
        this.listLoading = false
      })
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getList()
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },

    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1
      this.getList()
    },

    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields()
      this.currentPage = 1
      this.getList()
    },

    // 筛选部门
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },

    // 选择部门
    handleNodeClick(data) {
      console.log(data)
      if (this.selectDepartment && data.adminWebsitId === this.selectDepartment.adminWebsitId) {
        this.$refs.listTree.setCurrentKey(null)
        this.selectDepartment = null
      } else {
        this.selectDepartment = data
      }
      this.getList()
    },

    // 刷新部门
    refreshDepartment() {
      this.$refs.listTree.setCurrentKey(null)
      this.selectDepartment = null
      this.getTree()
      this.getList()
    },

    // 打开 新增编辑 账号表单
    async openAccountForm(type, id) {
      this.AccountFormType = type
      this.AccountFormVisible = true
      await this.getMerchantList()
      await this.getDealerList(id)
      await this.getGroupList(id)
      await this.getRoleList()
      await this.getCategoryList()

      if (type == 'add') {
        if (this.selectDepartment) {
          this.$refs.tree.setCheckedKeys([this.selectDepartment.adminWebsitId])
        }
      }

      if (type == 'edit') {
        this.editAccountId = id
        getAccountDetail({ adminUserId: id }).then(res => {
          console.log(res, 78787)
          this.AccountForm.account = res.data.userName
          this.AccountForm.role = res.data.roleId
          this.AccountForm.nickName = res.data.nickName
          this.AccountForm.merchant = res.data.companyWechatId
          this.AccountForm.dealer = res.data.customerId
          this.AccountForm.isGroup = res.data.isGroupCompany
          this.AccountForm.company = res.data.groupCompanyId
          this.AccountForm.isDiscount = res.data.isZr
          this.AccountForm.correspondIds = res.data.stockCorrespondList
          this.AccountForm.k3CategoryIds = res.data.k3CategoryList
          this.AccountForm.isShangyong = res.data.isShangyong
          this.$refs.tree.setCheckedKeys(res.data.adminWebsitIds || [])
        })
      }
    },

    // 取消 新增编辑 账号表单
    cancelAccountForm() {
      this.AccountFormVisible = false
      this.$refs.AccountForm.resetFields()
      this.passwordType1 = 'password'
      this.passwordType2 = 'password'
    },

    // 提交 账号表单
    submitAccountForm() {
      console.log(this.AccountForm.correspondIds)
      this.$refs.AccountForm.validate(valid => {
        if (valid) {
          const categoryIds = []
          this.categoryList.map(k => {
            this.AccountForm.k3CategoryIds.map(i => {
              if (i == k.id) {
                categoryIds.push({
                  k3CategoryId: k.id,
                  k3CategoryName: k.name,
                  k3CategoryNumber: k.number
                })
              }
            })
          })

          const params = {
            userName: this.AccountForm.account,
            nickName: this.AccountForm.nickName,
            roleId: this.AccountForm.role,
            password: this.AccountForm.newPassword,
            correspondIds: this.AccountForm.correspondIds,
            isShangyong: this.AccountForm.isShangyong,
            categoryIds
          }

          if (this.roleObj.type === 0) {
            params.adminWebsitIds = this.$refs.tree.getCheckedKeys()
            params.roleName = this.roleObj.name
            if (this.roleObj.name === '经销商') {
              params.customerId = this.AccountForm.dealer
              params.isGroupCompany = this.AccountForm.isGroup
              params.parentCustomerId = this.AccountForm.company
              params.isZr = this.AccountForm.isDiscount
            }
          } else {
            params.adminCompanyId = this.AccountForm.merchant
          }
          if (this.AccountFormType == 'edit') {
            params.adminUserId = this.editAccountId
            editAccount(params).then(res => {
              this.cancelAccountForm()
              this.getList()
              this.$successMsg('编辑成功')
            })
          } else {
            addAccount(params).then(res => {
              this.cancelAccountForm()
              this.getList()
              this.$successMsg('添加成功')
            })
          }
        }
      })
    },

    // 表格选择列
    handleTableSelection(val) {
      this.tableSelection = val
    },

    // 批量删除账号
    batchDeleteAccount() {
      if (this.tableSelection.length < 1) {
        return this.$errorMsg('至少选择一名账号')
      }
      this.$confirm(`确定删除选中的账号吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const AccountIds = []
          this.tableSelection.forEach(item => {
            AccountIds.push(item.id)
          })
          deleteAccount({ id: AccountIds.join(',') }).then(res => {
            this.$successMsg()
            this.getTree()
            this.getList()
          })
        })
        .catch(() => {})
    },

    // 删除账号
    deleteAccount(id) {
      deleteAccount({ id: id }).then(res => {
        this.$successMsg()
        this.getTree()
        this.getList()
      })
    },

    // 操作 - 更改状态(type: 禁用0，启用1)
    changeStatus(id, type) {
      type = !!type
      changeAccountStatus({ adminUserId: id, status: type }).then(res => {
        this.getList()
        this.$successMsg()
      })
    },

    // 显示隐藏密码
    showPwd(num) {
      if (num == 1) {
        if (this.passwordType1 === 'password') {
          this.passwordType1 = ''
        } else {
          this.passwordType1 = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password1.focus()
        })
      }
      if (num == 2) {
        if (this.passwordType2 === 'password') {
          this.passwordType2 = ''
        } else {
          this.passwordType2 = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password2.focus()
        })
      }
    },

    // 重置密码
    handleReset(id) {
      this.resetId = id
      this.resetFormVisible = true
    },

    // 取消重置密码
    cancelResetForm() {
      this.resetFormVisible = false
      this.passwordType1 = 'password'
      this.passwordType2 = 'password'
      this.$refs.resetForm.resetFields()
    },

    // 提交重置密码
    submitResetForm() {
      this.$refs.resetForm.validate(valid => {
        if (valid) {
          const params = {
            password: this.resetForm.newPassword,
            adminUserId: this.resetId
          }
          resetPassword(params).then(res => {
            this.cancelResetForm()
            this.getList()
            this.$successMsg()
          })
        }
      })
    },

    // 导出
    handleExport() {
      const screenData = {
        adminWebsitId: this.selectDepartment ? this.selectDepartment.websitId : '',
        keyword: this.screenForm.name
      }
      downloadFiles('wechat/enterprise/export', screenData)
    },

    // 下载导入模版
    handleDownload() {
      downloadFiles('admin/user/download')
    },

    clickImport() {
      if (!this.selectDepartment) {
        return this.$errorMsg('请选择部门')
      } else {
        document.querySelector('.import-btn input').click()
      }
    },

    // 导入
    async handleImport(param) {
      console.log(param)
      this.importLoading = true
      const file = param.file
      const formData = new FormData()
      formData.append('file', file)

      const result = await handleImportTwo('/admin/user/importUser', formData)
      this.importLoading = false
      this.importFileList = []
      // console.log(result,999);

      if (result) {
        this.$alert(result.message, '导入成功', {
          confirmButtonText: '确定'
        })
        const blob = new Blob([result], {
          type: 'application/vnd.ms-excel,charset=utf-8'
        })
        const urll = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.download = '导入失败数据.xlsx'
        link.href = urll
        link.click()
        this.getList()
      } else {
        this.$alert(result.message, '导入失败', {
          confirmButtonText: '确定'
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.import-btn {
  display: inline-block;
  margin-left: 10px;
}
.app-container {
  display: flex;
  .tree-container {
    width: 18%;
    height: calc(100vh - 110px);
    flex-shrink: 0;
    background: #f5f5f5;
    margin-right: 2%;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    .el-tree {
      height: 100%;
      background: none;
      width: 100%;
      overflow: scroll;
      // ::v-deep .el-tree-node:focus > .el-tree-node__content {
      //   color: #ffffff;
      //   background-color: #409EFF;
      // }
      ::v-deep > .el-tree-node {
        display: inline-block;
        min-width: 100%;
      }
      ::v-deep .el-tree-node > .el-tree-node__content {
        padding-right: 10px;
        align-self: baseline;
      }
      ::v-deep .el-tree-node.is-current > .el-tree-node__content {
        background-color: #409eff;
        .custom-tree-node {
          i {
            color: #fff;
          }
          span {
            color: #fff;
          }
        }
      }
      ::v-deep .el-tree-node > .el-tree-node__children {
        overflow: unset;
      }
      .custom-tree-node {
        i {
          font-size: 14px;
          color: #999;
        }
        span {
          font-size: 14px;
          margin-left: 6px;
          color: #666;
        }
      }
    }
  }
  .mymain-container {
    width: 80%;
    margin-top: 0;
  }
}
::v-deep .el-divider--vertical {
  margin: 0 15px;
}
.show-pwd {
  position: absolute;
  right: 15px;
  top: 0;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
}
</style>