8 changed files with 272 additions and 216 deletions
-
4src/app.vue
-
1src/assets/images/background.svg
-
6src/components/common/FTTable/index.vue
-
4src/components/home/SetTemperature/index.vue
-
4src/components/home/StartHeat/index.vue
-
174src/components/user/Edit/index.vue
-
15src/layouts/default.vue
-
280src/views/user/index.vue
1
src/assets/images/background.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,174 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { addUser, updateUser } from 'apis/user' |
||||
|
import { FtMessage } from 'libs/message' |
||||
|
import { useSystemStore } from 'stores/systemStore' |
||||
|
import { onMounted, onUnmounted, ref } from 'vue' |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: () => ({}), |
||||
|
}, |
||||
|
}) |
||||
|
|
||||
|
const emits = defineEmits(['ok', 'cancel']) |
||||
|
|
||||
|
onMounted(() => { |
||||
|
}) |
||||
|
|
||||
|
onUnmounted(() => { |
||||
|
}) |
||||
|
|
||||
|
const form = ref<User.User>(props.data.id ? props.data : {}) |
||||
|
const formRef = ref() |
||||
|
|
||||
|
const validateHandle = (rule: any, value: any, callback: any) => { |
||||
|
if (!value?.length) { |
||||
|
callback(new Error('请选择试管')) |
||||
|
} |
||||
|
else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const passwordValidateHandle = (rule: any, value: any, callback: any) => { |
||||
|
if (!value) { |
||||
|
callback(new Error('请输入密码')) |
||||
|
} |
||||
|
else if (value.length > 6) { |
||||
|
callback(new Error('密码长度不能大于6个字符')) |
||||
|
} |
||||
|
else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const passwordValidateHandle1 = (rule: any, value: any, callback: any) => { |
||||
|
console.log('passwordValidateHandle1', value) |
||||
|
if (!value) { |
||||
|
callback(new Error('请输入密码')) |
||||
|
} |
||||
|
else if (value !== form.value.password) { |
||||
|
callback(new Error('两次密码输入不一致')) |
||||
|
} |
||||
|
else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const rules = { |
||||
|
username: [ |
||||
|
{ required: true, message: '请输入账号', trigger: 'blur', validator: validateHandle }, |
||||
|
], |
||||
|
nickname: [ |
||||
|
{ required: false, message: '请输入用户名', trigger: 'blur' }, |
||||
|
], |
||||
|
password: [ |
||||
|
{ required: true, trigger: 'blur', validator: passwordValidateHandle }, |
||||
|
], |
||||
|
passwordAgain: [ |
||||
|
{ required: true, trigger: 'blur', validator: passwordValidateHandle1 }, |
||||
|
], |
||||
|
} |
||||
|
|
||||
|
const okHandle = async () => { |
||||
|
try { |
||||
|
const valid = await formRef.value.validate() |
||||
|
if (!valid) { |
||||
|
return |
||||
|
} |
||||
|
if (form.value.id) { |
||||
|
await updateUser(form.value) |
||||
|
} |
||||
|
else { |
||||
|
form.value.role = 'USER' |
||||
|
form.value.deleted = 'DISABLE' |
||||
|
await addUser(form.value) |
||||
|
} |
||||
|
FtMessage.success('保存成功') |
||||
|
emits('ok') |
||||
|
} |
||||
|
catch (e) { |
||||
|
console.log(e) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const cancel = () => { |
||||
|
emits('cancel') |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<FtDialog visible :title="data.id ? '编辑用户' : '新增用户'" width="40%" :ok-handle="okHandle" @cancel="cancel"> |
||||
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto"> |
||||
|
<el-form-item label="账号" prop="username"> |
||||
|
<el-input v-model="form.username" maxlength="10" show-word-limit :disabled="data.id && form.fixedUser === 'ENABLE'" placeholder="请输入账号" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="用户名" prop="nickname"> |
||||
|
<el-input v-model="form.nickname" maxlength="10" show-word-limit :disabled="data.id && form.fixedUser === 'ENABLE'" placeholder="请输入用户名" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="useSystemStore().systemStatus.currentUser?.fixedUser === 'ENABLE'" label="密码" prop="password"> |
||||
|
<el-input v-model.number="form.password" maxlength="6" show-word-limit show-password type="password" placeholder="请输入密码" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="useSystemStore().systemStatus.currentUser?.fixedUser === 'ENABLE'" label="再次输入密码" prop="passwordAgain"> |
||||
|
<el-input v-model.number="form.passwordAgain" maxlength="6" show-word-limit show-password type="password" placeholder="请输入密码" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</FtDialog> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.el-tag { |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
.el-row { |
||||
|
height: 450px; |
||||
|
.el-col { |
||||
|
height: 100%; |
||||
|
overflow: auto; |
||||
|
:deep(.el-tag) { |
||||
|
width: 100%; |
||||
|
margin-bottom: 5px; |
||||
|
.el-tag__content { |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.tube-item { |
||||
|
padding: 5px; |
||||
|
background: #384D5D; |
||||
|
border-radius: 10px; |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(5, 1fr); |
||||
|
grid-template-rows: repeat(1, 1fr); |
||||
|
grid-gap: 5px; |
||||
|
position: relative; |
||||
|
.tube-line { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
.tube-line-inner { |
||||
|
display: inline-block; |
||||
|
width: 25px; |
||||
|
height: 25px; |
||||
|
border-radius: 50%; |
||||
|
background: #fff; |
||||
|
margin: 2px; |
||||
|
transition: background 0.5s; |
||||
|
} |
||||
|
} |
||||
|
.tube-line-disable { |
||||
|
.tube-line-inner { |
||||
|
background: #C6C6C6; |
||||
|
} |
||||
|
} |
||||
|
.tube-line-active { |
||||
|
.tube-line-inner { |
||||
|
background: #26D574; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
@ -1,223 +1,89 @@ |
|||||
<script lang="ts" setup> |
|
||||
import type { FormInstance } from 'element-plus' |
|
||||
import { addUser, delUser, updateUser, userList } from '@/apis/user' |
|
||||
import { ElMessage, ElMessageBox } from 'element-plus' |
|
||||
import { onMounted, ref } from 'vue' |
|
||||
|
<script setup lang="ts"> |
||||
|
import { delUser, userList } from 'apis/user' |
||||
|
import Edit from 'components/user/Edit/index.vue' |
||||
|
import { ElMessageBox } from 'element-plus' |
||||
|
import { FtMessage } from 'libs/message' |
||||
|
import { cloneDeep } from 'lodash' |
||||
|
import { useSystemStore } from 'stores/systemStore' |
||||
|
import { useTemplateRef } from 'vue' |
||||
|
|
||||
onMounted(() => { |
|
||||
queryUserList() |
|
||||
}) |
|
||||
const userDataList = ref<User.User[]>([]) |
|
||||
const visible = ref(false) |
|
||||
const userForm = ref<Record<string, string | number | boolean>>({}) |
|
||||
const userFormRef = ref() |
|
||||
const queryUserList = () => { |
|
||||
const params = { |
|
||||
pageSize: 10, |
|
||||
pageNum: 1, |
|
||||
} |
|
||||
userList(params).then((res) => { |
|
||||
userDataList.value = res.list |
|
||||
}) |
|
||||
} |
|
||||
const createUser = () => { |
|
||||
userForm.value = {} |
|
||||
visible.value = true |
|
||||
} |
|
||||
const editUser = () => { |
|
||||
if (!selectedList.value || !selectedList.value.length) { |
|
||||
ElMessage.warning('请选择一条数据进行编辑') |
|
||||
return |
|
||||
} |
|
||||
const userItem = selectedList.value[0] |
|
||||
userForm.value = { |
|
||||
username: userItem.username, |
|
||||
nickname: userItem.nickname, |
|
||||
deleted: userItem.deleted, |
|
||||
id: userItem.id, |
|
||||
isAdmin: userItem.role === 'ADMIN', |
|
||||
role: userItem.role, |
|
||||
} |
|
||||
visible.value = true |
|
||||
// updateUser() |
|
||||
} |
|
||||
const onDelUser = () => { |
|
||||
if (!selectedList.value.length) { |
|
||||
ElMessage.warning('请选择要删除的数据') |
|
||||
return |
|
||||
} |
|
||||
ElMessageBox.confirm( |
|
||||
'确认删除选中的数据吗?', |
|
||||
'确认提示', |
|
||||
{ |
|
||||
confirmButtonText: '确认', |
|
||||
cancelButtonText: '取消', |
|
||||
type: 'warning', |
|
||||
|
const systemStore = useSystemStore() |
||||
|
|
||||
|
const btnList = systemStore.systemStatus.currentUser?.fixedUser === 'ENABLE' |
||||
|
? [ |
||||
|
{ |
||||
|
name: '新增', |
||||
|
type: 'primary', |
||||
|
serverUrl: 'add', |
||||
|
serverCondition: 0, |
||||
|
}, |
||||
|
{ |
||||
|
name: '编辑', |
||||
|
type: 'primary', |
||||
|
serverUrl: 'edit', |
||||
|
serverCondition: 1, |
||||
|
}, |
||||
|
{ |
||||
|
name: '删除', |
||||
|
type: 'danger', |
||||
|
serverUrl: 'del', |
||||
|
serverCondition: 2, |
||||
|
}, |
||||
|
] |
||||
|
: [] |
||||
|
const columns = [ |
||||
|
{ |
||||
|
type: 'selection', |
||||
|
selectable: (row: any) => { |
||||
|
return row.fixedUser !== 'ENABLE' |
||||
}, |
}, |
||||
).then(() => { |
|
||||
const ids = selectedList.value.map(item => item.id) |
|
||||
delUser(ids.join(',')).then(() => { |
|
||||
ElMessage.success('删除成功') |
|
||||
queryUserList() |
|
||||
}) |
|
||||
}) |
|
||||
} |
|
||||
|
}, |
||||
|
{ |
||||
|
title: '账号', |
||||
|
key: 'username', |
||||
|
}, |
||||
|
{ |
||||
|
title: '用户名', |
||||
|
key: 'nickname', |
||||
|
}, |
||||
|
] |
||||
|
|
||||
const selectedList = ref<User.User[]>([]) |
|
||||
const onSelectionChange = (rows: User.User[]) => { |
|
||||
selectedList.value = rows |
|
||||
} |
|
||||
const closeDialog = () => { |
|
||||
visible.value = false |
|
||||
} |
|
||||
const onConfirm = (formRef: FormInstance | undefined) => { |
|
||||
if (!formRef) { |
|
||||
return |
|
||||
} |
|
||||
formRef.validate((valid) => { |
|
||||
if (valid) { |
|
||||
if (userForm.value.id) { |
|
||||
doEdit() |
|
||||
} |
|
||||
else { |
|
||||
doSave() |
|
||||
} |
|
||||
} |
|
||||
else { |
|
||||
console.log('error submit!') |
|
||||
} |
|
||||
|
const tableRef = useTemplateRef('tableRef') |
||||
|
|
||||
|
const del = async (selectedRows: any) => { |
||||
|
const ids = selectedRows.map((item: any) => item.id) |
||||
|
await ElMessageBox.confirm('确定删除当前选中的行?', '消息', { |
||||
|
confirmButtonText: '确认', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
}) |
}) |
||||
|
await delUser(ids) |
||||
|
FtMessage.success('删除成功') |
||||
|
tableRef.value?.initData() |
||||
} |
} |
||||
const doEdit = () => { |
|
||||
const { username, nickname, isAdmin, id } = userForm.value |
|
||||
const params = { |
|
||||
username: username as string, |
|
||||
nickname: nickname as string, |
|
||||
role: isAdmin ? 'ADMIN' : 'USER', |
|
||||
deleted: 'ENABLE', |
|
||||
id: id as number, |
|
||||
} |
|
||||
updateUser(params).then(() => { |
|
||||
ElMessage.success('保存成功') |
|
||||
queryUserList() |
|
||||
closeDialog() |
|
||||
}) |
|
||||
|
|
||||
|
const addVisible = ref(false) |
||||
|
|
||||
|
const currentData = ref({}) |
||||
|
const addHandle = () => { |
||||
|
currentData.value = {} |
||||
|
addVisible.value = true |
||||
} |
} |
||||
|
|
||||
const doSave = () => { |
|
||||
const { username, nickname, password, confirmPassword, isAdmin } = userForm.value |
|
||||
if (password !== confirmPassword) { |
|
||||
ElMessage.error('两次输入的密码不一致') |
|
||||
return |
|
||||
} |
|
||||
const params: User.AddUser = { |
|
||||
username: username as string, |
|
||||
nickname: nickname as string, |
|
||||
password: password as string, |
|
||||
role: isAdmin ? 'ADMIN' : 'USER', |
|
||||
deleted: 'ENABLE', |
|
||||
} |
|
||||
addUser(params).then(() => { |
|
||||
ElMessage.success('保存成功') |
|
||||
queryUserList() |
|
||||
closeDialog() |
|
||||
}) |
|
||||
|
const editHandle = (data: any) => { |
||||
|
currentData.value = cloneDeep(data[0]) |
||||
|
console.log(currentData.value) |
||||
|
addVisible.value = true |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<div> |
<div> |
||||
<div> |
|
||||
<FtButton type="primary" @click="createUser"> |
|
||||
添加用户 |
|
||||
</FtButton> |
|
||||
<FtButton type="primary" @click="editUser"> |
|
||||
编辑用户 |
|
||||
</FtButton> |
|
||||
<FtButton @click="onDelUser"> |
|
||||
删除用户 |
|
||||
</FtButton> |
|
||||
</div> |
|
||||
<div> |
|
||||
<el-table :data="userDataList" stripe style="width: 100%" @selection-change="onSelectionChange"> |
|
||||
<el-table-column type="selection" width="55" /> |
|
||||
<el-table-column type="index" width="50" /> |
|
||||
<el-table-column prop="username" label="登录名" /> |
|
||||
<el-table-column prop="nickname" label="用户名" /> |
|
||||
<!-- <el-table-column prop="fixedUser" label="状态"> --> |
|
||||
<!-- <template #default="scoped"> --> |
|
||||
<!-- <span v-if="scoped.row.deleted === 'ENABLE'">正常</span> --> |
|
||||
<!-- <span v-else>停用</span> --> |
|
||||
<!-- </template> --> |
|
||||
<!-- </el-table-column> --> |
|
||||
<el-table-column prop="createTime" label="创建时间" /> |
|
||||
<el-table-column prop="updateTime" label="更新时间" /> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
<FtDialog v-model="visible" title="添加用户" width="30%" :ok-handle="() => { onConfirm(userFormRef) }" @cancel="closeDialog"> |
|
||||
<div> |
|
||||
<el-form ref="userFormRef" :model="userForm" label-width="auto" style="max-width: 600px"> |
|
||||
<el-form-item |
|
||||
label="登录名:" |
|
||||
prop="username" |
|
||||
:rules="[{ |
|
||||
required: true, |
|
||||
message: '输入登录名', |
|
||||
trigger: ['blur', 'change'], |
|
||||
}]" |
|
||||
> |
|
||||
<el-input v-model="userForm.username" placeholder="登录名" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item |
|
||||
label="用户名:" |
|
||||
prop="nickname" |
|
||||
:rules="{ |
|
||||
required: true, |
|
||||
message: '输入用户名', |
|
||||
trigger: 'blur', |
|
||||
}" |
|
||||
> |
|
||||
<el-input v-model="userForm.nickname" placeholder="用户名" /> |
|
||||
</el-form-item> |
|
||||
<div v-if="!userForm.id"> |
|
||||
<el-form-item |
|
||||
label="密码:" |
|
||||
prop="password" |
|
||||
:rules="{ |
|
||||
required: true, |
|
||||
message: '输入密码', |
|
||||
trigger: 'blur', |
|
||||
}" |
|
||||
> |
|
||||
<el-input v-model="userForm.password" type="password" placeholder="密码" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item |
|
||||
label="确认密码:" |
|
||||
prop="confirmPassword" |
|
||||
:rules="{ |
|
||||
required: true, |
|
||||
message: '输入密码', |
|
||||
trigger: 'blur', |
|
||||
}" |
|
||||
> |
|
||||
<el-input v-model="userForm.confirmPassword" type="password" placeholder="确认密码" /> |
|
||||
</el-form-item> |
|
||||
</div> |
|
||||
<el-form-item |
|
||||
label="是否管理员:" |
|
||||
> |
|
||||
<el-checkbox v-model="userForm.isAdmin" size="small" /> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
</FtDialog> |
|
||||
|
<FtTable ref="tableRef" has-header has-page :columns="columns" :btn-list="btnList" :get-data-fn="userList" @add="addHandle" @edit="editHandle" @del="del" /> |
||||
|
<Edit v-if="addVisible" :data="currentData" @ok="addVisible = false;tableRef?.initData()" @cancel="addVisible = false" /> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<style lang="css" scoped> |
|
||||
.footer{ |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
width: 35vw; |
|
||||
} |
|
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
</style> |
</style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue