client-mazu/src/pages/systemSetting/account.vue

<template>
  <div class="form-wrapper">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
    >
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        label="登录账号"
        prop="loginName">
        <el-input v-model="form.loginName"></el-input>
      </el-form-item>
      <el-form-item
        label="手机号"
        prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>

      <div class="btn-wrap">
        <el-button
          @click="reset"
        >
          重置
        </el-button>
        <el-button
          type="primary"
          @click="getAccountList"
        >
          搜索
        </el-button>
        <el-button
          type="primary"
          size="mini"
          @click="showDialog('add')"
        >
          新增账号
        </el-button>
      </div>
    </el-form>
    <div class="table-box">
      <!-- <div class="block-title">
        账号列表
      </div> -->
      <el-table
        border
        stripe
        v-loading="loading"
        :data="tableData"
      >
        <!-- <el-table-column
          prop="id"
          label="ID"
        >
        </el-table-column> -->
        <el-table-column
          prop="loginName"
          label="账号名"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
        >
        </el-table-column>
        <el-table-column
          prop="roles"
          label="角色"
        >
          <template slot-scope="scope">
            <el-tag
              v-for="(item,index) in scope.row.roleList"
              :key="index"
            >
              {{ item.name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="用户属性"
          width="100"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.type === 2 ? '组内员工' : scope.row.type === 1 ? '管理员' : '员工' }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="creator"
          label="创建人">
        </el-table-column> -->
        <el-table-column
          label="上次登录时间"
          width="140"
        >
          <template slot-scope="scope">
            {{ scope.row.lastLoginTime | formatTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="140"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime | formatTime }}
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
        >
        </el-table-column>
        <!-- 雷锋纪念馆定制 -->
        <!-- <el-table-column
          width="120"
          label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.isUse ? '已激活' : '已禁用' }}</span>
            <el-button
              type="text"
              size="small"
              @click="offSale(scope.row)"
              class="offSale-btn"
              v-if="scope.row.isUse"
            >
              <i class="iconfont icon-offSale"></i>禁用
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="onSale(scope.row)"
              class="onSale-btn"
              v-else
            >
              <i class="iconfont icon-onSale"></i>激活
            </el-button>
          </template>
        </el-table-column> -->
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="showDialog('edit',scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="deleteAccount(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :page-size="form.pageSize"
        :current-page.sync="form.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handlePage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <ElDialog
      :title="dialogType === 'add' ? '新增账户' : '编辑账户'"
      width="660px"
      v-model="dialogVisible">
      <EditDialog
        :scenic-list="scenicList"
        :dialog-type="dialogType"
        :account-item="curItem"
        @updateList="handleUpdate"
      ></EditDialog>
    </ElDialog>
  </div>
</template>

<script>
import { getAccountList, deleteAccount, updateAccount } from '@/api/systemSetting/account'
import ElDialog from '@/components/Dialog'
import EditDialog from './account/EditDialog'
import moment from 'moment'

export default {
  components: {
    ElDialog,
    EditDialog
  },
  created () {
    this.getAccountList()
  },
  data () {
    return {
      projectName: process.env.VUE_APP_PROJECT,
      loading: false,
      dialogType: 'add',
      dialogVisible: false,
      tableData: [],
      scenicList: [],
      total: 0,
      form: {
        export: false,
        pageNum: 1,
        pageSize: 10,
        loginName: '',
        name: '',
        phone: ''
      },
      // 当前账号对象
      curItem: {}
    }
  },
  methods: {
    reset () {
      this.form.loginName = ''
      this.form.phone = ''
    },
    showDialog (type, item) {
      this.dialogType = type
      this.curItem = item
      this.dialogVisible = true
    },
    handleSizeChange (size) {
      this.pageSize = size
      this.getAccountList()
    },
    getAccountList () {
      this.loading = true
      getAccountList(this.form).then(res => {
        this.tableData = res?.data?.records || []
        this.total = res?.data?.total || 0
      }).finally(() => {
        this.loading = false
      })
    },
    deleteAccount (id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAccount(id).then(res => {
          this.$message.success('删除成功')
          this.getAccountList()
        })
      })
    },
    handlePage (pageNum) {
      this.form.pageNum = pageNum
      this.getAccountList()
    },
    offSale (data) {
      let form = Object.assign({}, data)
      form.isUse = 0
      updateAccount(form).then(res => {
        this.$message.success('操作成功')
        this.getAccountList()
      })
    },
    onSale (data) {
      if (moment().isAfter(data.use_end_time)) {
        this.$alert('请先修改账号过期时间', '账号已过期', {
          confirmButtonText: '知道了'
        })
      } else {
        let form = Object.assign({}, data)
        form.isUse = 1
        updateAccount(form).then(res => {
          this.$message.success('操作成功')
          this.getAccountList()
        })
      }
    },
    handleChange (data) {
      let form = Object.assign({}, data)
      if (data.workStatus) {
        form.workStatus = 1
      } else {
        form.workStatus = 0
      }
      updateAccount(form).then(res => {
        this.$message.success('操作成功')
        this.getAccountList()
      })
    },
    handleChange2 (data) {
      let form = Object.assign({}, data)
      if (data.onDuty) {
        form.onDuty = 1
      } else {
        form.onDuty = 0
      }
      updateAccount(form).then(res => {
        this.$message.success('操作成功')
        this.getAccountList()
      })
    },
    handleUpdate () {
      this.$store.dispatch('getAccount')
      this.getAccountList()
    }
  }
}
</script>

<style scoped>
.offSale-btn{
  color: #F56C6C
}
.onSale-btn{
  color: #67C23A
}
</style>