kxq/zoo-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化数据显示

Browse Source
This commit is contained in:
bicey 2024-05-18 22:21:39 +08:00
parent 7d209d3fbb
commit efbfd6848e
5 changed files with 105 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/ZooAnimalFormDialog.vue
View File

@ -6,7 +6,7 @@ export default {
form:{ form:{
id: '', id: '',
name: '', name: '',
sex: '雄', sex: '雄性',
species: '',//种类 species: '',//种类
weight: 0, weight: 0,
height: 0, height: 0,
@ -63,28 +63,32 @@ export default {
<el-input v-model="form.name" placeholder="动物名称"/> <el-input v-model="form.name" placeholder="动物名称"/>
</el-form-item> </el-form-item>
<el-form-item label="性别"> <el-form-item label="性别">
<el-select v-model="form.sex" placeholder="选择性别"> <el-radio-group v-model="form.sex">
<el-option label="雄性" value="雄性"/> <el-radio value="雄性">雄性</el-radio>
<el-option label="雌性" value="雌性"/> <el-radio value="雌性">雌性</el-radio>
</el-select> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="动物种类"> <el-form-item label="动物种类">
<el-input v-model="form.species" placeholder="动物种类"/> <el-input v-model="form.species" placeholder="动物种类"/>
</el-form-item> </el-form-item>
<el-form-item label="动物体重"> <el-form-item label="动物体重（KG）">
<el-input v-model="form.weight" placeholder="动物体重"/> <el-input-number v-model="form.weight" :precision="2" :step="0.1" :min="0" />
</el-form-item> </el-form-item>
<el-form-item label="动物身高"> <el-form-item label="动物身高（M）">
<el-input v-model="form.height" placeholder="动物身高"/> <el-input-number v-model="form.height" :precision="2" :step="0.1" :min="0" />
</el-form-item> </el-form-item>
<el-form-item label="动物状态"> <el-form-item label="动物状态">
<el-input v-model="form.state" placeholder="动物状态"/> <el-radio-group v-model="form.state">
<el-radio :value="0">正常</el-radio>
<el-radio :value="1">异常</el-radio>
</el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="饲养员ID"> <el-form-item label="饲养员ID">
<el-input v-model="form.roleId" placeholder="饲养员ID"/> <el-input v-model="form.roleId" placeholder="饲养员ID"/>
</el-form-item> </el-form-item>
<el-form-item label="动物颜色"> <el-form-item label="动物颜色">
<el-input v-model="form.color" placeholder="动物颜色"/> <el-color-picker v-model="form.color" />
<!-- <el-input v-model="form.color" placeholder="动物颜色"/>-->
</el-form-item> </el-form-item>
<el-form-item label="动物特征"> <el-form-item label="动物特征">
<el-input v-model="form.features" placeholder="动物特征"/> <el-input v-model="form.features" placeholder="动物特征"/>

4
src/components/ZooHeader.vue
View File

@ -23,6 +23,10 @@ export default {
console.log("点击了退出登录"); console.log("点击了退出登录");
sessionStorage.removeItem('isLogin')//移除登录状态 sessionStorage.removeItem('isLogin')//移除登录状态
this.$router.push('/login');//跳转回登录界面 this.$router.push('/login');//跳转回登录界面
return ElMessage({
message: '退出成功',
type: 'success',
})
} }
} }
} }

15
src/components/ZooUserFormDialog.vue
View File

@ -45,11 +45,16 @@ export default {
/> />
</el-form-item> </el-form-item>
<el-form-item label="身份"> <el-form-item label="身份">
<el-select v-model="form.auth" placeholder="选择身份"> <!-- <el-select v-model="form.auth" placeholder="选择身份">-->
<el-option label="管理员" :value="0"/> <!-- <el-option label="管理员" :value="0"/>-->
<el-option label="饲养员" :value="1"/> <!-- <el-option label="饲养员" :value="1"/>-->
<el-option label="兽医" :value="2"/> <!-- <el-option label="兽医" :value="2"/>-->
</el-select> <!-- </el-select>-->
<el-radio-group v-model="form.auth">
<el-radio :value="0">管理员</el-radio>
<el-radio :value="1">饲养员</el-radio>
<el-radio :value="2">兽医</el-radio>
</el-radio-group>
</el-form-item> </el-form-item>
<div class="right"> <div class="right">
<slot :form="form"></slot> <slot :form="form"></slot>

61
src/pages/ZooAnimal.vue
View File

@ -32,21 +32,18 @@ export default {
Delete() { Delete() {
return Delete return Delete
}, },
dataFilters() { // dataFilters() {
// 计算格式化后的数组 // // 计算格式化后的数组
// let data = copy(this.tableData) // let data = copy(this.tableData)
// data.forEach(e => { // data.forEach(e => {
// if (e.auth === 0) { // if (e.state === 0) {
// e.auth = '管理员' // e.state = '正常'
// } else if (e.auth === 1) { // } else if (e.state === 1) {
// e.auth = '饲养员' // e.state = '异常'
// } else if (e.auth === 2) { // }
// e.auth = '兽医' // })
// } // return data
// }) // },
// return data
return this.tableData
},
}, },
methods: { methods: {
showEditDialog(animal) { showEditDialog(animal) {
@ -163,11 +160,11 @@ export default {
name: 'animal' + (i + 3), name: 'animal' + (i + 3),
sex: Math.floor(Math.random() * 2) === 0 ? '雌性' : '雄性', sex: Math.floor(Math.random() * 2) === 0 ? '雌性' : '雄性',
species: Math.floor(Math.random() * 10).toString(),//种类 species: Math.floor(Math.random() * 10).toString(),//种类
weight: (Math.random() * 2000).toFixed(2), weight: Number((Math.random() * 2000).toFixed(2)),
height: (Math.random() * 10).toFixed(2), height: Number((Math.random() * 10).toFixed(2)),
state: Math.floor(Math.random() * 2),//状态（0正常 1异常） state: Math.floor(Math.random() * 2),//状态（0正常 1异常）
roleId: Math.floor(Math.random() * 100),//饲养员id roleId: Math.floor(Math.random() * 100),//饲养员id
color: Math.floor(Math.random() * 255),//颜色 color: '',//Math.floor(Math.random() * 255),//颜色
features: Math.floor(Math.random() * 40).toString(),//特征 features: Math.floor(Math.random() * 40).toString(),//特征
habit: Math.floor(Math.random() * 500).toString()//生活习性 habit: Math.floor(Math.random() * 500).toString()//生活习性
} }
@ -207,18 +204,24 @@ export default {
<!-- <hr/>--> <!-- <hr/>-->
<div class="table"> <div class="table">
<el-table :data="dataFilters" style="width: 100%;height: 100%" empty-text="暂无数据" table-layout="auto"> <el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border>
<el-table-column fixed prop="id" label="动物ID" /> <el-table-column fixed prop="id" label="动物ID" />
<el-table-column fixed prop="name" label="动物名称" /> <el-table-column fixed prop="name" label="动物名称" width="100" />
<el-table-column prop="sex" label="性别"/> <el-table-column prop="sex" label="性别"/>
<el-table-column prop="species" label="种类" /> <el-table-column prop="species" label="动物种类" width="90" />
<el-table-column prop="weight" label="体重" /> <el-table-column prop="weight" label="动物体重（KG）" width="130"/>
<el-table-column prop="height" label="身高" /> <el-table-column prop="height" label="动物身高（M）" width="130"/>
<el-table-column prop="state" label="状态" /> <el-table-column prop="state" label="动物状态" width="90">
<el-table-column prop="roleId" label="饲养员ID" /> <template #default="scope">
<el-table-column prop="color" label="颜色" /> <span v-if="scope.row.state===0" style="color: green">正常</span>
<el-table-column prop="features" label="特征" /> <span v-else-if="scope.row.state===1" style="color: red">异常</span>
<el-table-column prop="habit" label="生活习性" /> <span v-else>未知</span>
</template>
</el-table-column>
<el-table-column prop="roleId" label="饲养员ID" width="120"/>
<el-table-column prop="color" label="动物颜色" width="90"/>
<el-table-column prop="features" label="动物特征" width="100"/>
<el-table-column prop="habit" label="生活习性" width="100"/>
<el-table-column fixed="right" label="操作" width="130"> <el-table-column fixed="right" label="操作" width="130">
<template #default="scope"> <template #default="scope">
<el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)"> <el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
@ -247,7 +250,7 @@ export default {
</ZooAnimalFormDialog> </ZooAnimalFormDialog>
</el-dialog> </el-dialog>
<!-- 编辑用户对话框--> <!-- 编辑动物对话框-->
<el-dialog v-model="dialog.editDialogVisible" title="编辑动物" width="500" align-center draggable overflow <el-dialog v-model="dialog.editDialogVisible" title="编辑动物" width="500" align-center draggable overflow
destroy-on-close> destroy-on-close>
<ZooAnimalFormDialog :animal="dialog.editData"> <ZooAnimalFormDialog :animal="dialog.editData">

68
src/pages/ZooUser.vue
View File

@ -25,20 +25,23 @@ export default {
// endregion // endregion
dataFilters() { // passwordInvisible() {
// 计算格式化后的数组 // return '••••••••'
let data = copy(this.tableData) // },
data.forEach(e => { // dataFilters() {
if (e.auth === 0) { // // 计算格式化后的数组
e.auth = '管理员' // let data = copy(this.tableData)
} else if (e.auth === 1) { // data.forEach(e => {
e.auth = '饲养员' // if (e.auth === 0) {
} else if (e.auth === 2) { // e.auth = '管理员'
e.auth = '兽医' // } else if (e.auth === 1) {
} // e.auth = '饲养员'
}) // } else if (e.auth === 2) {
return data // e.auth = '兽医'
} // }
// })
// return data
// }
}, },
watch: { watch: {
searchInput: { searchInput: {
@ -108,7 +111,7 @@ export default {
console.log('删除用户', user) console.log('删除用户', user)
return ElMessageBox.confirm( return ElMessageBox.confirm(
'该操作不可撤销，是否继续？', '该操作不可撤销，是否继续？',
'删除用户：'+user.username, '删除用户：' + user.username,
{ {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
@ -155,7 +158,7 @@ export default {
let searchResult = [] let searchResult = []
this.users.forEach(e => { this.users.forEach(e => {
if (e.username.includes(this.searchInput.keyWord)) { if (e.username.includes(this.searchInput.keyWord)) {
searchResult.push(this.copy(e)) searchResult.push(copy(e))
} }
}) })
let searchResult2 = [] let searchResult2 = []
@ -163,14 +166,21 @@ export default {
if (typeof this.searchInput.auth === 'number') { if (typeof this.searchInput.auth === 'number') {
searchResult.forEach(e => { searchResult.forEach(e => {
if (e.auth === this.searchInput.auth) { if (e.auth === this.searchInput.auth) {
searchResult2.push(this.copy(e)) searchResult2.push(copy(e))
} }
}) })
searchResult = searchResult2 searchResult = searchResult2
} }
this.tableData = searchResult; this.tableData = searchResult;
}, },
//鼠标悬浮显示密码
showPassword(event,password){
console.log('showPassword')
event.target.innerText = password
},
hidePassword(event) {
event.target.innerText = '••••••••'
}
}, },
mounted() { mounted() {
//数据生成器 //数据生成器
@ -217,11 +227,22 @@ export default {
<!-- <hr/>--> <!-- <hr/>-->
<div class="table"> <div class="table">
<el-table :data="dataFilters" style="width: 100%;height: 100%" empty-text="暂无数据" table-layout="auto"> <el-table :data="tableData" style="height: 100%" empty-text="暂无数据" border>
<el-table-column fixed prop="username" label="用户名" /> <el-table-column fixed prop="username" label="用户名" width="150"/>
<el-table-column prop="password" label="密码" /> <!-- <el-table-column prop="password" label="密码" />-->
<el-table-column prop="auth" label="身份" /> <el-table-column prop="password" label="密码" width="150">
<!-- <el-table-column prop="" label="占位置" width="700"/>--> <template #default="scope">
<div @mouseover="showPassword($event,scope.row.password)" @mouseleave="hidePassword($event)">••••••••</div>
</template>
</el-table-column>
<el-table-column prop="auth" label="身份" width="700">
<template #default="scope">
<span v-if="scope.row.auth===0" style="color: blue">管理员</span>
<span v-else-if="scope.row.auth===1" style="color: green">饲养员</span>
<span v-else-if="scope.row.auth===2" style="color: orange">兽医</span>
<span v-else>未知</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="130"> <el-table-column fixed="right" label="操作" width="130">
<template #default="scope"> <template #default="scope">
<el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)"> <el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
@ -281,7 +302,6 @@ export default {
margin-right: 30px; margin-right: 30px;
} }
.select { .select {
width: 100%; width: 100%;
height: 60px; height: 60px;