Smail/fe/src/components/UserManagement.vue

<template>
  <div id="main">
    <el-table :data="userList" style="width: 100%">
      <el-table-column label="ID" prop="ID" />
      <el-table-column :label="lang.account" prop="Account" />
      <el-table-column :label="lang.user_name" prop="Name" />
      <el-table-column :label="lang.disabled" prop="Disabled">
        <template #default="scope">
          <span>{{ scope.row.Disabled == 1 ? lang.disabled : lang.enabled }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #header>
          <el-button type="primary" size="small" @click="createUser">
            New
          </el-button>
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            Edit
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div id="paginationBox">
      <el-pagination v-model:current-page="currentPage" small background layout="prev, pager, next"
        :page-count="totalPage" class="mt-4" @current-change="reflushList" />
    </div>



    <el-dialog v-model="userInfoDialog" :title="title" width="500">
      <el-form>
        <el-form-item label-width="100px" :label="lang.account">
          <el-input :disabled="editModel == 'edit'" v-model="editUserInfo.account" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" :label="lang.user_name">
          <el-input v-model="editUserInfo.name" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" :label="lang.password">
          <el-input :placeholder="lang.resetPwd" v-model="editUserInfo.password" autocomplete="off" />
        </el-form-item>

        <div style="display: flex;">
          <div
            style="display: inline-flex;justify-content: flex-end;align-items: flex-start;flex: 0 0 auto;font-size: var(--el-form-label-font-size); height: 32px;line-height: 32px;padding: 0 12px 0 60px;box-sizing: border-box; ">
            <el-switch v-model="editUserInfo.disabled" class="ml-2" :active-text="lang.disabled"
              :inactive-text="lang.enabled" />
          </div>


        </div>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="userInfoDialog = false">Cancel</el-button>
          <el-button type="primary" @click="submit">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>


  </div>
</template>


<script setup>
import { reactive, ref, getCurrentInstance } from 'vue'
import lang from '../i18n/i18n';
const userList = reactive([])
const app = getCurrentInstance()
const $http = app.appContext.config.globalProperties.$http
const currentPage = ref(1)
const totalPage = ref(1)
const userInfoDialog = ref(false)
const editModel = ref("edit")
const editUserInfo = reactive({
  "account": "",
  "name": "",
  "password": "",
  "disabled": false
})
const title = ref(lang.editUser)

const reflushList = function () {
  $http.post('/api/user/list', { "current_page": currentPage.value, "page_size": 10 }).then(res => {
    userList.length = 0

    totalPage.value = res.data.total_page
    userList.push(...res.data["list"])
  })
}


const handleEdit = function (idx, row) {
  editUserInfo.account = row.Account
  editUserInfo.name = row.Name
  editUserInfo.disabled = row.Disabled == 1
  editUserInfo.password = ""
  editModel.value = "edit"
  title.value = lang.editUser
  userInfoDialog.value = true
}

const createUser = function(){
  editUserInfo.account = ""
  editUserInfo.name = ""
  editUserInfo.disabled = false
  editUserInfo.password = ""
  editModel.value = "create"
  title.value = lang.newUser
  userInfoDialog.value = true
}


const submit = function () {
  if (editModel.value == 'edit') {

    let newData = {
      "account": editUserInfo.account,
      "username": editUserInfo.name,
      "disabled": editUserInfo.disabled ? 1 : 0
    }
    if (editUserInfo.password != "") {
      newData["password"] = editUserInfo.password
    }

    $http.post('/api/user/edit', newData).then(res => {
      ElNotification({
        title: res.errorNo == 0 ? lang.succ : lang.fail,
        message: res.errorNo == 0 ? "" : res.data,
        type: res.errorNo == 0 ? 'success' : 'error',
      })
      if (res.errorNo == 0) {
        reflushList()
        userInfoDialog.value = false
      }
    })
  }else{
    let newData = {
      "account": editUserInfo.account,
      "username": editUserInfo.name,
      "disabled": editUserInfo.disabled ? 1 : 0,
      "password":editUserInfo.password
    }

    $http.post('/api/user/create', newData).then(res => {
      ElNotification({
        title: res.errorNo == 0 ? lang.succ : lang.fail,
        message: res.errorNo == 0 ? "" : res.data,
        type: res.errorNo == 0 ? 'success' : 'error',
      })
      if (res.errorNo == 0) {
        reflushList()
        userInfoDialog.value = false
      }
    })
  }


}


reflushList()


</script>


<style scoped>
#paginationBox {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>