disinfector_vue/src/components/setting/User.vue

<script lang="ts" setup>
import { useSettingStore } from '@/stores/settingStore'
import { ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import AddUser from './AddUser.vue'

const settingStore = useSettingStore()
const tableData = ref(settingStore.userList)
const updatePwd = (userItem: Setting.User) => {
  console.log('userItem===', userItem)
  settingStore.updateCurrentEditUser(userItem)
  settingStore.updateUserModalState('edit')
  settingStore.updateVisible(true)
}
const onAddUser = () => {
  settingStore.updateUserModalState('add')
  settingStore.updateVisible(true)
}
const onDelUser = () => {
  ElMessageBox.confirm(
    '请确认是否删除?',
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
  })
}
</script>

<template>
  <div>
    <div class="history-export">
      <FtButton type="primary" @click="onAddUser">
        <div>
          新增用户
        </div>
      </FtButton>
      <FtButton @click="onDelUser">
        <div>
          删除
        </div>
      </FtButton>
    </div>
    <div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="uid" label="用户名" />
        <el-table-column prop="detail" label="操作">
          <template #default="scoped">
            <el-link type="primary" @click="updatePwd(scoped.row)">修改密码</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <AddUser/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main-content{
  height: 100%;
  overflow: hidden;
  padding: 10px;
  background: $gradient-color;
  .history-export{
    margin: 2vw;
  }
  .history-table{
  }
}
</style>