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

4
src/components/ZooHeader.vue
View File

@ -23,6 +23,10 @@ export default {
console.log("点击了退出登录");
sessionStorage.removeItem('isLogin')//移除登录状态
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 label="身份">
<el-select v-model="form.auth" placeholder="选择身份">
<el-option label="管理员" :value="0"/>
<el-option label="饲养员" :value="1"/>
<el-option label="兽医" :value="2"/>
</el-select>
<!-- <el-select v-model="form.auth" placeholder="选择身份">-->
<!-- <el-option label="管理员" :value="0"/>-->
<!-- <el-option label="饲养员" :value="1"/>-->
<!-- <el-option label="兽医" :value="2"/>-->
<!-- </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>
<div class="right">
<slot :form="form"></slot>

61
src/pages/ZooAnimal.vue
View File

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

68
src/pages/ZooUser.vue
View File

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