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> |
|||
|
|||
<template> |
|||
<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> |
|||
</template> |
|||
|
|||
<style lang="css" scoped> |
|||
.footer{ |
|||
display: flex; |
|||
justify-content: center; |
|||
width: 35vw; |
|||
} |
|||
<style scoped lang="scss"> |
|||
|
|||
</style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue