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

<template>
  <div class="app-container">
    <div class="setting_title">用户管理</div>
    <el-divider />

    <div class="mymain-container">
      <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="userName">
                  <el-input v-model="screenForm.userName" placeholder="请输入账号/用户名名称" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </Collapse>
      <div class="btn-group clearfix">
        <div style="display: flex">
          <el-button v-if="checkBtnRole('add')" size="mini" type="primary"  @click="addOrEdit('add')"
            >新增账号</el-button
          >
          <el-button style="margin-left: 20px" type="primary" size="mini" @click="handleExportListGongCheng"
            >导出数据</el-button
          >
        </div>
        <!--        <div class="fr">-->
        <!--          <ImportButton :im-url="'stock/importToll'" @importSuccess="getList" />-->
        <!--        </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="left" label="序号" type="index" width="50" />
          <el-table-column align="left" label="账号" prop="userName" />
          <el-table-column align="left" label="账号名称" prop="nickName" />
          <el-table-column align="left" label="创建时间" prop="createTime" />
          <el-table-column align="left" label="最后登录时间" prop="lastLoginTime" />
          <el-table-column align="left" label="主帐号" prop="isMaster">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isMaster" type="success">是</el-tag>
              <el-tag v-else type="danger">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" @click="addOrEdit('edit', scope.row)">编辑</el-button>
              <el-button type="text" @click="addOrEdit('password', scope.row)">重置密码</el-button>
              <el-popconfirm title="确定删除吗？" @onConfirm="handleDel(scope.row)">
                <el-button slot="reference" type="text" size="mini"> 删除 </el-button>
              </el-popconfirm>
              <!-- <el-button
                v-if="checkBtnRole('detail')"
                type="text"
                @click="setMenuRole(scope.row.adminUserId, 'role')"
              >设置权限</el-button> -->
            </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="设置权限"
      :visible.sync="roleFormVisible"
      :show-close="false"
      width="40%"
      :close-on-click-modal="false"
      custom-class="tree-dialog"
      top="50px"
    >
      <el-tree
        ref="tree"
        :data="menuRoleList"
        show-checkbox
        :check-strictly="true"
        :default-expand-all="true"
        :expand-on-click-node="false"
        node-key="moduleId"
        highlight-current
        :props="defaultProps"
      >
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span v-if="data.type < 3">
            <el-button type="text" size="mini" @click="() => quickSelection(data)">一键全选</el-button>
            <el-button type="text" size="mini" style="color: #f56c6c" @click="() => quickCancel(data)"
              >一键取消</el-button
            >
          </span>
        </span>
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleFormVisible = false">{{ editId != 1 ? '取 消' : '关 闭' }}</el-button>
        <el-button v-if="editId != 1" type="primary" @click="submitRoleForm('role')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="45%"
      :title="'add' === addFormType ? '新增' : '修改'"
      @close="cancelAddForm"
    >
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="140px" class="demo-ruleForm">
        <el-form-item label="账号" prop="account">
          <el-input v-model="ruleForm.account" type="text" autocomplete="off" disabled placeholder="系统自动生成" />
        </el-form-item>
        <template v-if="addFormType !== 'password'">
          <el-form-item label="工装登录名额限制" prop="workLoginLimit">
            <el-input
              type="number"
              v-model.number="ruleForm.workLoginLimit"
              autocomplete="off"
              placeholder="请输入工装登录名额限制"
            />
          </el-form-item>
          <el-form-item label="家装登录名额限制" prop="homeLoginLimit">
            <el-input
              type="number"
              v-model.number="ruleForm.homeLoginLimit"
              autocomplete="off"
              placeholder="请输入家装登录名额限制"
            />
          </el-form-item>
          <el-form-item label="跨区登录名额限制" prop="spanLoginLimit">
            <el-input
              type="number"
              v-model.number="ruleForm.spanLoginLimit"
              autocomplete="off"
              placeholder="请输入跨区登录名额限制"
            />
          </el-form-item>
          <el-form-item label="上级经销商" prop="parentId">
            <el-select
              v-model="ruleForm.parentId"
              placeholder="请选择上级经销商"
              :disabled="addFormType === 'edit'"
              filterable
              style="width: 100%"
            >
              <el-option v-for="item in subCustomerList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="子经销商名称" prop="nickName">
            <el-input v-model="ruleForm.nickName" autocomplete="off" placeholder="请输入子经销商名称" />
          </el-form-item>
        </template>
        <el-form-item v-if="addFormType !== 'edit'" label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="请输入密码" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <!--        <el-button type="primary" style="float: left;" @click="setMenuRole">设置权限</el-button>-->
        <el-button @click="cancelAddForm">取 消</el-button>
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDealerListV2 } from '@/api/basic_data/dealer'
import {
  addEngineeringUser,
  deleteRole,
  editRole,
  getEngineeringUserList,
  getMenuList,
  getRoleChecked,
  setMenuRole,
  editSubAccount,
  editEngineeringUser,
  getDetailGongCheng,
  delUserGongCheng,
  exportListGongCheng
} from '@/api/setting'

export default {
  data() {
    return {
      imageURL: this.$imageUrl,
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数

      editId: null,
      addFormType: 'add',
      addFormVisible: false,
      addForm: {
        name: '' // 角色名
      },
      addFormRules: {
        name: [{ required: true, message: '请输入角色名', trigger: 'blur' }]
      },

      roleFormVisible: false,

      menuRoleList: [],
      defaultProps: {
        children: 'children',
        label: 'moduleName'
      },
      dialogVisible: false,
      ruleForm: {
        account: '',
        password: '',
        parentId: '',
        nickName: '',
        spanLoginLimit: 5,
        homeLoginLimit: 5,
        workLoginLimit: 5
      },
      rules: {
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        parentId: [{ required: true, message: '请选择上级经销商', trigger: 'change' }],
        nickName: [{ required: true, message: '请输入子经销商名称', trigger: 'blur' }]
      },
      subCustomerList: [],
      screenForm: {
        // 筛选表单数据
        userName: '' // 名称
      }
    }
  },
  computed: {
    ...mapGetters(['userid', 'name', 'parentId']),
    exParams() {
      return {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        parentId: this.parentId,
        userName: this.screenForm.userName,
        isMaster: false
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 查询按钮权限
    checkBtnRole(value) {
      // let btnRole = this.$route.meta.roles;
      // if(!btnRole) {return true}
      // let index = btnRole.indexOf(value);
      // return index >= 0 ? true : false;
      return true
    },
    // 获取子经销商
    getDealerListV2() {
      getDealerListV2({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.subCustomerList = res.data.records
      })
    },
    handleExportListGongCheng() {
      exportListGongCheng({}, `${this.$route.meta.title}`)
        .then(res => {
          console.log('chengg')
          this.$message({
            message: '下载成功',
            type: 'success'
          })
        })
        .catch(err => {
          this.$message.error('下载失败')
        })
    },
    getList() {
      this.listLoading = true
      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        parentId: this.parentId,
        userName: this.screenForm.userName,
        isMaster: false
      }
      getEngineeringUserList(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()
    },

    // 操作 - 删除
    handleDelete(id) {
      deleteRole({ adminRoleId: id }).then(res => {
        this.getList()
        this.$successMsg()
      })
    },
    handleDel(row) {
      delUserGongCheng({ userName: row.userName }).then(res => {
        this.$successMsg('删除成功')
        this.getList()
      })
    },
    // 新增编辑
    addOrEdit(type, row) {
      this.addFormType = type
      if (row) {
        getDetailGongCheng({ adminUserId: row.adminUserId }).then(res => {
          if (type === 'edit') {
            this.ruleForm = {
              account: res.data.userName,
              password: '',
              nickName: res.data.nickName,
              adminUserId: res.data.adminUserId,
              parentId: res.data.parentId,
              spanLoginLimit: res.data.spanLoginLimit,
              homeLoginLimit: res.data.homeLoginLimit,
              workLoginLimit: res.data.workLoginLimit
            }
          }
          if (type === 'password') {
            this.ruleForm = {
              account: res.data.userName,
              password: '',
              adminUserId: res.data.adminUserId
            }
          }
        })
      }
      this.dialogVisible = true

      this.getDealerListV2()
    },

    // 取消 新增编辑
    cancelAddForm() {
      this.$refs.ruleForm.resetFields()

      this.$nextTick(() => {
        this.dialogVisible = false
      })
    },

    // 提交 新增编辑
    submitAddForm() {
      this.$refs.ruleForm.validate(valid => {
        const params = {
          userName: this.ruleForm.account,
          password: this.ruleForm.password,
          parentId: this.ruleForm.parentId,
          nickName: this.ruleForm.nickName,
          spanLoginLimit: this.ruleForm.spanLoginLimit,
          homeLoginLimit: this.ruleForm.homeLoginLimit,
          workLoginLimit: this.ruleForm.workLoginLimit
          // adminModuleIds:this.$refs.tree ? this.$refs.tree.getCheckedKeys().join(',') :
        }
        if (valid) {
          if (this.addFormType === 'password') {
            params.adminUserId = this.ruleForm.adminUserId
            editSubAccount(params).then(res => {
              this.cancelAddForm()
              this.getList()
              this.$successMsg('重置成功')
            })
          }
          if (this.addFormType === 'edit') {
            params.adminUserId = this.ruleForm.adminUserId
            editEngineeringUser(params).then(res => {
              this.cancelAddForm()
              this.getList()
              this.$successMsg('编辑成功')
            })
          }
          if (this.addFormType === 'add') {
            addEngineeringUser(params).then(res => {
              this.cancelAddForm()
              this.getList()
              this.$successMsg('新增成功')
            })
          }
        }
      })
    },

    // 设置权限 - 获取列表
    setMenuRole(id, type) {
      this.roleFormVisible = true
      this.editId = id
      getMenuList({ adminUserId: this.userid }).then(res => {
        this.menuRoleList = res.data
      })
      getRoleChecked({ adminUserId: id }).then(res => {
        this.$refs.tree.setCheckedKeys(res.data)
      })
    },

    // 设置权限 - 提交数据
    submitRoleForm(type) {
      const params = {
        adminModuleIds: this.$refs.tree.getCheckedKeys().join(','),
        adminRoleId: this.editId
      }
      setMenuRole(params).then(res => {
        this.getList()
        this.$successMsg()
      })

      this.roleFormVisible = false
    },

    // 一键全选
    quickSelection(data) {
      const nowChecked = this.$refs.tree.getCheckedKeys()
      const thisId = data.moduleId
      let childId = []
      if (data.children.length) {
        childId = this.familyTree(data.children)
      }

      const setChecked = nowChecked.concat([thisId]).concat(childId)

      this.$refs.tree.setCheckedKeys(setChecked)
    },

    // 一键取消
    quickCancel(data) {
      const nowChecked = this.$refs.tree.getCheckedKeys()
      const thisId = data.moduleId
      let childId = []
      if (data.children.length) {
        childId = this.familyTree(data.children)
      }

      const setChecked = nowChecked
      if (setChecked.indexOf(thisId) >= 0) {
        setChecked.splice(setChecked.indexOf(thisId), 1)
      }

      if (childId.length) {
        for (var i = 0; i < childId.length; i++) {
          if (setChecked.indexOf(childId[i]) >= 0) {
            setChecked.splice(setChecked.indexOf(childId[i]), 1)
          }
        }
      }

      this.$refs.tree.setCheckedKeys(setChecked)
    },

    // 递归子id
    familyTree(arr) {
      var temp = []
      var forFn = function (list) {
        for (var i = 0; i < list.length; i++) {
          var item = list[i]
          if (item.children) {
            temp.push(item.moduleId)
            forFn(item.children)
          }
        }
      }
      forFn(arr)
      return temp
    },

    changeStatus(id, status) {
      editRole({
        adminRoleId: id,
        visitSysStatus: status
      }).then(res => {
        this.getList()
        this.$successMsg('编辑成功')
      })
    },
    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1
      this.getList()
    },

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

<style lang="scss" scoped>
::v-deep .tree-dialog {
  .el-dialog__body {
    padding: 20px;
    .el-tree {
      max-height: calc(100vh - 140px - 54px - 70px);
      overflow-y: scroll;
      padding: 0 30px;
      > .el-tree-node {
        padding: 15px 0;
        border: 1px dashed #ddd;
        margin-bottom: 15px;
        border-radius: 10px;
      }
    }
  }
}
::v-deep .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>