增加档案管理及其基本功能，添加一些注释、优化标识符名称、优化交互逻辑
This commit is contained in:
bicey
parent
5b3019d967
commit
31bc249039
@ -1,4 +1,6 @@
|
||||
<script>
|
||||
import {copy} from "@/utils/common.js";
|
||||
|
||||
export default {
|
||||
name: "ZooAnimalFormDialog",
|
||||
data() {
|
||||
@ -16,25 +18,25 @@ export default {
|
||||
features: '',//特征
|
||||
phase: '幼年期'//生长阶段
|
||||
},
|
||||
formAction: {
|
||||
idDisable:false,
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
animal: {
|
||||
data: {
|
||||
type: Object,
|
||||
},
|
||||
detail:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
edit:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 如果传入了对象，说明是编辑
|
||||
if (this.animal) {
|
||||
this.form = this.animal
|
||||
this.formAction.idDisable = true
|
||||
// 给表单填充传递的数据
|
||||
if (this.data) {
|
||||
this.form = copy(this.data)
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
@ -45,23 +47,8 @@ export default {
|
||||
|
||||
<template>
|
||||
<el-form label-width="auto">
|
||||
<!-- <div>-->
|
||||
<!-- animalForm:{-->
|
||||
<!-- id: '',-->
|
||||
<!-- name: '',-->
|
||||
<!-- sex: '雄',-->
|
||||
<!-- species: '',//种类-->
|
||||
<!-- weight: 0,-->
|
||||
<!-- height: 0,-->
|
||||
<!-- state: 0,//状态（0正常 1异常）-->
|
||||
<!-- roleId: null,//饲养员id-->
|
||||
<!-- color: '',//颜色-->
|
||||
<!-- features: '',//特征-->
|
||||
<!-- habit: ''//生活习性-->
|
||||
<!-- }-->
|
||||
<!-- </div>-->
|
||||
<el-form-item label="动物ID">
|
||||
<el-input v-model="form.id" placeholder="请设置动物ID" type="number" :disabled="formAction.idDisable || detail"/>
|
||||
<el-input v-model="form.id" placeholder="请设置动物ID" type="number" :disabled="edit || detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="动物名称">
|
||||
<el-input v-model="form.name" placeholder="动物名称" :disabled="detail"/>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<script>
|
||||
import {copy} from "@/utils/common.js";
|
||||
|
||||
export default {
|
||||
name: "ZooArchiveFormDialog",
|
||||
data() {
|
||||
@ -15,26 +17,25 @@ export default {
|
||||
roleId: null,//负责录入档案的人的id，身份不限
|
||||
description: '',//字符 档案的描述
|
||||
},
|
||||
formAction: {
|
||||
idDisable: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
archive: {
|
||||
data: {
|
||||
type: Object,
|
||||
},
|
||||
detail: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 如果传入了对象，说明是编辑
|
||||
if (this.archive) {
|
||||
console.log('传入了数据')
|
||||
this.form = this.archive
|
||||
this.formAction.idDisable = true
|
||||
// 给表单填充传递的数据
|
||||
if (this.data) {
|
||||
this.form = copy(this.data)
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
@ -46,7 +47,7 @@ export default {
|
||||
<template>
|
||||
<el-form label-width="auto">
|
||||
<el-form-item label="档案号">
|
||||
<el-input v-model="form.id" type="number" placeholder="记录号" :disabled="formAction.idDisable || detail"/>
|
||||
<el-input v-model="form.id" type="number" placeholder="记录号" :disabled="edit || detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录的动物ID">
|
||||
<el-input v-model="form.animalId" type="number" placeholder="记录的动物ID" :disabled="detail"/>
|
||||
@ -85,7 +86,8 @@ export default {
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录时间">
|
||||
<el-time-picker v-model="form.time" type="time" placeholder="选择时间" value-format="HH:mm:ss" :disabled="detail"/>
|
||||
<el-time-picker v-model="form.time" type="time" placeholder="选择时间" value-format="HH:mm:ss"
|
||||
:disabled="detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录人ID">
|
||||
<el-input v-model="form.roleId" type="number" placeholder="记录人ID" :disabled="detail"/>
|
||||
|
||||
@ -1,11 +1,130 @@
|
||||
<script>
|
||||
import {copy, sortByDateTime} from "@/utils/common.js";
|
||||
|
||||
export default {
|
||||
name: "ZooArchiveTimeline"
|
||||
name: "ZooArchiveTimeline",
|
||||
data() {
|
||||
return {
|
||||
archives: [],
|
||||
order:1
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required:true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
sort(){
|
||||
//降序
|
||||
if (this.order===0){
|
||||
this.order++
|
||||
sortByDateTime(this.archives)
|
||||
return
|
||||
}
|
||||
//升序
|
||||
if (this.order===1){
|
||||
this.order--
|
||||
sortByDateTime(this.archives)
|
||||
this.archives.reverse()
|
||||
}
|
||||
},
|
||||
nodeType(type) {
|
||||
if (type === '日常饲养') {
|
||||
return 'success'
|
||||
}
|
||||
if (type === '疫苗接种') {
|
||||
return 'primary'
|
||||
}
|
||||
if (type === '疾病治疗') {
|
||||
return 'warning'
|
||||
}
|
||||
},
|
||||
nodeHollow(state) {
|
||||
if (state === 0) {
|
||||
return false
|
||||
}
|
||||
if (state === 1) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// 给表单填充传递的数据
|
||||
if (this.data) {
|
||||
this.archives = copy(this.data)
|
||||
//默认按照时间降序
|
||||
sortByDateTime(this.archives)
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
console.log('ZooArchiveTimeline-beforeUnmount', this);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="relative" style="height: 40px">
|
||||
<el-button type="primary" class="right" @click="sort()">按时间升 / 降序</el-button>
|
||||
</div>
|
||||
<el-scrollbar height="500px">
|
||||
<el-timeline style="max-width: 600px">
|
||||
<el-timeline-item v-for="a in archives"
|
||||
:type="nodeType(a.type)"
|
||||
:hollow="nodeHollow(a.state)"
|
||||
style="margin-top: 15px;margin-right: 20px">
|
||||
<el-descriptions
|
||||
:title="a.type"
|
||||
:column="2"
|
||||
size="small"
|
||||
border
|
||||
>
|
||||
<template #extra>
|
||||
<slot :archive="a" name="operate"></slot>
|
||||
</template>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
动物名（ID）
|
||||
</template>
|
||||
{{ a.animalName }}（{{a.animalId}}）
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
记录类型
|
||||
</template>
|
||||
{{ a.type }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
生长阶段
|
||||
</template>
|
||||
{{ a.phase }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
状态
|
||||
</template>
|
||||
<span v-if="a.state===0" style="color: green">正常</span>
|
||||
<span v-else-if="a.state===1" style="color: red">异常</span>
|
||||
<span v-else>未知</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
描述
|
||||
</template>
|
||||
{{ a.description }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div class="left">记录号：{{ a.id }}</div>
|
||||
<div class="right">{{ a.roleId }} 记录于 {{ a.date }} {{ a.time }}</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-scrollbar>
|
||||
<div class="right" style="margin-top: 10px">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<script>
|
||||
import {copy} from "@/utils/common.js";
|
||||
|
||||
export default {
|
||||
name: "ZooBreedingFormDialog",
|
||||
data() {
|
||||
@ -13,25 +15,25 @@ export default {
|
||||
roleId: null,//负责执行计划的饲养员id
|
||||
describe: ''//字符 饲养计划的描述
|
||||
},
|
||||
formAction: {
|
||||
idDisable: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
breedingPlan: {
|
||||
data: {
|
||||
type: Object,
|
||||
},
|
||||
detail: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 如果传入了对象，说明是编辑
|
||||
if (this.breedingPlan) {
|
||||
this.form = this.breedingPlan
|
||||
this.formAction.idDisable = true
|
||||
// 给表单填充传递的数据
|
||||
if (this.data) {
|
||||
this.form = copy(this.data)
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
@ -43,7 +45,7 @@ export default {
|
||||
<template>
|
||||
<el-form label-width="auto">
|
||||
<el-form-item label="饲养计划ID">
|
||||
<el-input v-model="form.id" type="number" placeholder="饲养计划ID" :disabled="formAction.idDisable || detail"/>
|
||||
<el-input v-model="form.id" type="number" placeholder="饲养计划ID" :disabled="edit || detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="计划名称">
|
||||
<el-input v-model="form.name" placeholder="计划名称" :disabled="detail"/>
|
||||
|
||||
@ -12,25 +12,25 @@ export default {
|
||||
password: '',
|
||||
auth: 0,
|
||||
},
|
||||
formAction: {
|
||||
usernameDisable: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
data: {
|
||||
type: Object,
|
||||
},
|
||||
detail: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
edit:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 如果传入了对象，说明是编辑
|
||||
if (this.user) {
|
||||
this.formAction.usernameDisable = true
|
||||
this.form = this.user
|
||||
// 给表单填充传递的数据
|
||||
if (this.data) {
|
||||
this.form = this.data
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
@ -43,22 +43,29 @@ export default {
|
||||
<el-form label-width="auto">
|
||||
<el-form-item label="用户ID">
|
||||
<el-input v-model="form.id" placeholder="请设置用户ID" type="number"
|
||||
:disabled="formAction.usernameDisable || detail"/>
|
||||
:disabled="edit || detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="form.username" placeholder="请设置用户名" :disabled="detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码">
|
||||
<div v-if="detail" @mouseover="showPassword($event,form.password)"
|
||||
@mouseleave="hidePassword($event)">••••••••
|
||||
</div>
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="请设置登录密码"
|
||||
show-password
|
||||
v-if="detail===false"
|
||||
v-else-if="edit"
|
||||
/>
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="请设置登录密码"
|
||||
show-password
|
||||
v-else
|
||||
/>
|
||||
<div v-else-if="detail===true" @mouseover="showPassword($event,form.password)"
|
||||
@mouseleave="hidePassword($event)">••••••••
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份">
|
||||
<el-radio-group v-model="form.auth" :disabled="detail">
|
||||
|
||||
@ -1,24 +1,31 @@
|
||||
<script>
|
||||
import {copy, fuzzyMatching, splitKeyWords} from "@/utils/common.js";
|
||||
import {Delete, Document, DocumentAdd,Edit, Search} from "@element-plus/icons-vue";
|
||||
import {Delete, Document, DocumentAdd, Edit, Search, Tickets} from "@element-plus/icons-vue";
|
||||
import ZooAnimalFormDialog from "@/components/ZooAnimalFormDialog.vue";
|
||||
import {mapActions,mapState} from "vuex";
|
||||
import ZooArchiveTimeline from "@/components/ZooArchiveTimeline.vue";
|
||||
|
||||
export default {
|
||||
name: "ZooAnimal",
|
||||
components: {ZooAnimalFormDialog},
|
||||
components: {ZooArchiveTimeline, ZooAnimalFormDialog},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
tableData: [],//表格数据
|
||||
|
||||
// 搜索框的输入
|
||||
searchInput: {
|
||||
state: '',//状态（0正常 1异常）
|
||||
option: '',//状态（0正常 1异常）
|
||||
keyword: ''
|
||||
},
|
||||
|
||||
// 控制弹窗的属性
|
||||
dialog: {
|
||||
addDialogVisible: false,//添加动物对话框
|
||||
editDialogVisible: false,//编辑动物对话框
|
||||
editData: {},
|
||||
detailDialogVisible: false,//查看详情对话框
|
||||
dialogData: {},//弹窗数据
|
||||
addDialogVisible: false,//添加对话框
|
||||
editDialogVisible: false,//编辑对话框
|
||||
detailDialogVisible: false,//详情对话框
|
||||
timelineDialogVisible:false,//时间线对话框
|
||||
timelineData:[]//时间线数据
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -40,45 +47,55 @@ export default {
|
||||
DocumentAdd() {
|
||||
return DocumentAdd
|
||||
},
|
||||
Tickets() {
|
||||
return Tickets
|
||||
},
|
||||
//endregion
|
||||
...mapState(["animals"])
|
||||
...mapState(["animals",'archives'])
|
||||
},
|
||||
watch: {
|
||||
// 搜索框存在输入，自动调用搜索
|
||||
searchInput: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.searchAnimal();
|
||||
this.search();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["getAnimals"]),
|
||||
showDetailDialog(animal) {
|
||||
//这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
|
||||
this.dialog.editData = this.animals.find(e => e.id === animal.id)
|
||||
console.log('点击了动物详情', this.dialog.editData)
|
||||
|
||||
// 显示详情弹窗
|
||||
showDetail(data) {
|
||||
console.log('显示详情', data)
|
||||
|
||||
//从后端获取需要查询的数据，防止数据前后不一致
|
||||
//这里先用假数据代替一下
|
||||
this.dialog.dialogData = this.animals.find(e => e.id === data.id)
|
||||
|
||||
//显示弹窗
|
||||
this.dialog.detailDialogVisible = true
|
||||
},
|
||||
showEditDialog(animal) {
|
||||
//这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
|
||||
this.dialog.editData = this.animals.find(e => e.id === animal.id)
|
||||
console.log('点击了动物编辑', this.dialog.editData)
|
||||
|
||||
//显示编辑弹窗
|
||||
showEdit(data) {
|
||||
console.log('显示编辑', data)
|
||||
|
||||
//从后端获取需要查询的数据，防止数据前后不一致
|
||||
//这里先用假数据代替一下
|
||||
this.dialog.dialogData = this.animals.find(e => e.id === data.id)
|
||||
|
||||
//显示弹窗
|
||||
this.dialog.editDialogVisible = true
|
||||
},
|
||||
// 判断表单是否为空
|
||||
isEmpty(form) {
|
||||
if (!form.name) {
|
||||
//返回提示
|
||||
return ElMessage({
|
||||
message: '动物名不能为空',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
},
|
||||
editAnimal(form) {
|
||||
console.log('确认编辑动物', form)
|
||||
//判断是否为空
|
||||
return this.isEmpty(form);
|
||||
|
||||
edit(data) {
|
||||
console.log('编辑', data)
|
||||
|
||||
//判断表单是否为空
|
||||
return this.isEmpty(data);
|
||||
|
||||
//这里将数据传给后端进行数据更新
|
||||
//编辑失败
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
@ -86,6 +103,7 @@ export default {
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
|
||||
//编辑成功
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
@ -93,14 +111,20 @@ export default {
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
// 此处重新拉取数据
|
||||
this.dialog.editDialogVisible = false//添加成功关闭窗口
|
||||
|
||||
//从后端重新拉取数据
|
||||
this.getAnimals()
|
||||
|
||||
//关闭窗口
|
||||
this.dialog.editDialogVisible = false
|
||||
},
|
||||
deleteAnimal(animal) {
|
||||
console.log('删除动物', animal)
|
||||
|
||||
delete_(data) {
|
||||
console.log('删除', data)
|
||||
|
||||
return ElMessageBox.confirm(
|
||||
'该操作不可撤销，是否继续？',
|
||||
'删除动物：' + animal.name,
|
||||
'删除动物：' + data.name + '（'+data.id+'）',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
@ -108,7 +132,11 @@ export default {
|
||||
}
|
||||
).then(() => {
|
||||
//进行删除操作
|
||||
// ……
|
||||
|
||||
//重新拉取数据
|
||||
this.getAnimals()
|
||||
|
||||
// 返回提示
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
@ -120,10 +148,15 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
addAnimal(form) {
|
||||
console.log('添加动物', form)
|
||||
|
||||
add(data) {
|
||||
console.log('添加', data)
|
||||
|
||||
//验证是否为空
|
||||
return this.isEmpty(form);
|
||||
return this.isEmpty(data);
|
||||
|
||||
//先查询用户是否存在
|
||||
|
||||
//添加失败
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
@ -139,16 +172,47 @@ export default {
|
||||
})
|
||||
}
|
||||
// 此处重新拉取数据
|
||||
this.getAnimals()
|
||||
this.dialog.addDialogVisible = false//添加成功关闭窗口
|
||||
|
||||
},
|
||||
searchAnimal() {
|
||||
console.log('动物搜索', this.searchInput)
|
||||
|
||||
//以时间线的形式查看该动物的所有档案记录
|
||||
showArchives(data) {
|
||||
console.log('显示档案', data)
|
||||
|
||||
this.dialog.timelineData = []
|
||||
//从后端获取需要查询的数据，防止数据前后不一致
|
||||
//这里先用假数据代替一下
|
||||
this.archives.forEach(e=>{
|
||||
if (e.animalId === data.id) {
|
||||
this.dialog.timelineData.push(e)
|
||||
}
|
||||
})
|
||||
|
||||
//显示弹窗
|
||||
this.dialog.timelineDialogVisible = true
|
||||
},
|
||||
|
||||
// 判断表单是否为空
|
||||
isEmpty(form) {
|
||||
if (!form.name) {
|
||||
//返回提示
|
||||
return ElMessage({
|
||||
message: '动物名不能为空',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
search() {
|
||||
console.log('搜索', this.searchInput)
|
||||
|
||||
let searchResult = []//搜索结果数组
|
||||
//第一步匹配搜索选项，如果选择了特定用户身份
|
||||
if (typeof this.searchInput.state === 'number') {
|
||||
|
||||
//第一步匹配搜索选项
|
||||
if (typeof this.searchInput.option === 'number') {
|
||||
this.animals.forEach(e => {
|
||||
if (e.state === this.searchInput.state) {
|
||||
if (e.state === this.searchInput.option) {
|
||||
searchResult.push(copy(e))//如果符合特定权限，则添加到搜索结果
|
||||
}
|
||||
})
|
||||
@ -175,8 +239,11 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 加载完成后拉取数据
|
||||
this.getAnimals()
|
||||
this.tableData = copy(this.animals);//复制一份给表格展示
|
||||
|
||||
//复制一份给表格展示，不轻易修改源数据
|
||||
this.tableData = copy(this.animals);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -194,14 +261,14 @@ export default {
|
||||
placeholder="搜索动物 空格隔开关键字"
|
||||
>
|
||||
<template #prepend>
|
||||
<el-select v-model="searchInput.state" placeholder="状态" style="width: 80px">
|
||||
<el-select v-model="searchInput.option" placeholder="状态" style="width: 80px">
|
||||
<el-option label="不选择" value=""/>
|
||||
<el-option label="正常" :value="0"/>
|
||||
<el-option label="异常" :value="1"/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="searchAnimal()"/>
|
||||
<el-button :icon="Search" @click="search()"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
@ -209,7 +276,7 @@ export default {
|
||||
|
||||
<!-- <hr/>-->
|
||||
<div class="table">
|
||||
<el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border>
|
||||
<el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border stripe>
|
||||
<el-table-column fixed prop="id" label="动物ID" width="70"/>
|
||||
<el-table-column fixed prop="name" label="动物名称" width="100"/>
|
||||
<el-table-column prop="sex" label="性别" width="60"/>
|
||||
@ -232,15 +299,18 @@ export default {
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="features" label="动物特征" width="200"/>
|
||||
<el-table-column fixed="right" label="操作" width="190">
|
||||
<el-table-column fixed="right" label="操作" width="250">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="small" :icon="Document" @click="showDetailDialog(scope.row)">
|
||||
<el-button link type="success" size="small" :icon="Tickets" @click="showArchives(scope.row)">
|
||||
档案
|
||||
</el-button>
|
||||
<el-button link type="primary" size="small" :icon="Document" @click="showDetail(scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
|
||||
<el-button link type="primary" size="small" :icon="Edit" @click="showEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button link type="danger" size="small" :icon="Delete" @click="deleteAnimal(scope.row)">
|
||||
<el-button link type="danger" size="small" :icon="Delete" @click="delete_(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
@ -256,7 +326,7 @@ export default {
|
||||
<el-button @click="dialog.addDialogVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="addAnimal(scope.form)">
|
||||
<el-button type="primary" @click="add(scope.form)">
|
||||
添加
|
||||
</el-button>
|
||||
</template>
|
||||
@ -266,12 +336,12 @@ export default {
|
||||
<!-- 编辑动物对话框-->
|
||||
<el-dialog v-model="dialog.editDialogVisible" title="编辑动物" width="500" align-center draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooAnimalFormDialog :animal="dialog.editData">
|
||||
<ZooAnimalFormDialog :data="dialog.dialogData" edit>
|
||||
<template #default="scope">
|
||||
<el-button @click="dialog.editDialogVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="editAnimal(scope.form)">
|
||||
<el-button type="primary" @click="edit(scope.form)">
|
||||
修改
|
||||
</el-button>
|
||||
</template>
|
||||
@ -281,7 +351,7 @@ export default {
|
||||
<!-- 查看动物对话框-->
|
||||
<el-dialog v-model="dialog.detailDialogVisible" title="查询动物" width="500" align-center draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooAnimalFormDialog :animal="dialog.editData" detail>
|
||||
<ZooAnimalFormDialog :data="dialog.dialogData" detail>
|
||||
<template #default="scope">
|
||||
<el-button @click="dialog.detailDialogVisible = false">
|
||||
关闭
|
||||
@ -289,6 +359,22 @@ export default {
|
||||
</template>
|
||||
</ZooAnimalFormDialog>
|
||||
</el-dialog>
|
||||
|
||||
<!--查看动物所有记录-->
|
||||
<el-dialog v-model="dialog.timelineDialogVisible" :title="'动物档案'" width="600" align-center draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooArchiveTimeline :data="dialog.timelineData">
|
||||
<!-- <template #operate="scope">-->
|
||||
<!-- <el-button type="primary" link @click="showEdit(scope.archive)">编辑</el-button>-->
|
||||
<!-- <el-button type="danger" link @click="delete_(scope.archive)">删除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<template #footer>
|
||||
<el-button @click="dialog.timelineDialogVisible = false">
|
||||
关闭
|
||||
</el-button>
|
||||
</template>
|
||||
</ZooArchiveTimeline>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,24 +1,31 @@
|
||||
<script>
|
||||
import ZooArchiveFormDialog from "@/components/ZooArchiveFormDialog.vue";
|
||||
import {Delete, DocumentAdd, Document,Edit, Search} from "@element-plus/icons-vue";
|
||||
import {Delete, DocumentAdd, Document, Edit, Search, Tickets} from "@element-plus/icons-vue";
|
||||
import {mapState,mapActions} from "vuex";
|
||||
import {copy, splitKeyWords, fuzzyMatching, sortByDateTime} from "@/utils/common.js";
|
||||
import ZooArchiveTimeline from "@/components/ZooArchiveTimeline.vue";
|
||||
|
||||
export default {
|
||||
name: "ZooArchive",
|
||||
components: {ZooArchiveFormDialog},
|
||||
components: {ZooArchiveTimeline, ZooArchiveFormDialog},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
tableData: [],//表格数据
|
||||
|
||||
// 搜索框的输入
|
||||
searchInput: {
|
||||
state: '',//状态（0正常 1异常）
|
||||
option: '',//状态（0正常 1异常）
|
||||
keyword: ''
|
||||
},
|
||||
|
||||
// 控制弹窗的属性
|
||||
dialog: {
|
||||
dialogData: {},//弹窗数据
|
||||
addDialogVisible: false,//添加对话框
|
||||
editDialogVisible: false,//编辑对话框
|
||||
editData: {},
|
||||
detailDialogVisible:false//查询对话框
|
||||
detailDialogVisible:false,//查询对话框
|
||||
timelineDialogVisible:false,//时间线对话框
|
||||
timelineData:[]//时间线数据
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -40,45 +47,55 @@ export default {
|
||||
Document() {
|
||||
return Document
|
||||
},
|
||||
Tickets() {
|
||||
return Tickets
|
||||
},
|
||||
//endregion
|
||||
...mapState(["archives"])
|
||||
},
|
||||
watch: {
|
||||
// 搜索框存在输入，自动调用搜索
|
||||
searchInput: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.searchArchive();
|
||||
this.search();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["getArchives"]),
|
||||
showDetailDialog(archive) {
|
||||
//这里使用档案的id查询后端的特定档案再赋值，这里用假数据代替一下
|
||||
this.dialog.editData = this.archives.find(e => e.id === archive.id)
|
||||
console.log('点击了详情', this.dialog.editData)
|
||||
|
||||
// 显示详情弹窗
|
||||
showDetail(data) {
|
||||
console.log('显示详情', data)
|
||||
|
||||
//从后端获取需要查询的数据，防止数据前后不一致
|
||||
//这里先用假数据代替一下
|
||||
this.dialog.dialogData = this.archives.find(e => e.id === data.id)
|
||||
|
||||
//显示弹窗
|
||||
this.dialog.detailDialogVisible = true
|
||||
},
|
||||
showEditDialog(archive) {
|
||||
//这里使用档案的id查询后端的特定档案再赋值，这里用假数据代替一下
|
||||
this.dialog.editData = this.archives.find(e => e.id === archive.id)
|
||||
console.log('点击了编辑', this.dialog.editData)
|
||||
|
||||
//显示编辑弹窗
|
||||
showEdit(data) {
|
||||
console.log('显示编辑', data)
|
||||
|
||||
//从后端获取需要查询的数据，防止数据前后不一致
|
||||
//这里先用假数据代替一下
|
||||
this.dialog.dialogData = this.archives.find(e => e.id === data.id)
|
||||
|
||||
//显示弹窗
|
||||
this.dialog.editDialogVisible = true
|
||||
},
|
||||
// 判断表单是否为空
|
||||
isEmpty(form) {
|
||||
if (!form.animalId) {
|
||||
//返回提示
|
||||
return ElMessage({
|
||||
message: '记录的动物ID不能为空',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
},
|
||||
editArchive(form) {
|
||||
console.log('确认编辑档案', form)
|
||||
//判断是否为空
|
||||
return this.isEmpty(form);
|
||||
|
||||
edit(data) {
|
||||
console.log('编辑', data)
|
||||
|
||||
//判断表单是否为空
|
||||
return this.isEmpty(data);
|
||||
|
||||
//这里将数据传给后端进行数据更新
|
||||
//编辑失败
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
@ -86,6 +103,7 @@ export default {
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
|
||||
//编辑成功
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
@ -93,15 +111,20 @@ export default {
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
// 此处重新拉取数据
|
||||
|
||||
//从后端重新拉取数据
|
||||
this.getArchives()
|
||||
this.dialog.editDialogVisible = false//添加成功关闭窗口
|
||||
|
||||
//关闭窗口
|
||||
this.dialog.editDialogVisible = false
|
||||
},
|
||||
deleteArchive(archive) {
|
||||
console.log('删除档案', archive)
|
||||
|
||||
delete_(data) {
|
||||
console.log('删除', data)
|
||||
|
||||
return ElMessageBox.confirm(
|
||||
'该操作不可撤销，是否继续？',
|
||||
'删除档案：' + archive.id,
|
||||
'删除记录：' +data.id,
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
@ -109,7 +132,11 @@ export default {
|
||||
}
|
||||
).then(() => {
|
||||
//进行删除操作
|
||||
// ……
|
||||
|
||||
//重新拉取数据
|
||||
this.getArchives()
|
||||
|
||||
// 返回提示
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
@ -121,14 +148,19 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
addArchive(form) {
|
||||
console.log('添加档案', form)
|
||||
|
||||
add(data) {
|
||||
console.log('添加', data)
|
||||
|
||||
//验证是否为空
|
||||
return this.isEmpty(form);
|
||||
return this.isEmpty(data);
|
||||
|
||||
//先查询用户是否存在
|
||||
|
||||
//添加失败
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
message: '该饲养计划已存在',
|
||||
message: '该记录已存在',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
@ -140,15 +172,47 @@ export default {
|
||||
})
|
||||
}
|
||||
// 此处重新拉取数据
|
||||
this.getArchives()
|
||||
this.dialog.addDialogVisible = false//添加成功关闭窗口
|
||||
},
|
||||
searchArchive() {
|
||||
console.log('档案搜索', this.searchInput)
|
||||
|
||||
//以时间线的形式查看该动物的所有档案记录
|
||||
showArchives(data) {
|
||||
console.log('显示档案', data)
|
||||
|
||||
this.dialog.timelineData = []
|
||||
//从后端获取需要查询的数据，防止数据前后不一致
|
||||
//这里先用假数据代替一下
|
||||
this.archives.forEach(e=>{
|
||||
if (e.animalId === data.animalId) {
|
||||
this.dialog.timelineData.push(e)
|
||||
}
|
||||
})
|
||||
|
||||
//显示弹窗
|
||||
this.dialog.timelineDialogVisible = true
|
||||
},
|
||||
|
||||
// 判断表单是否为空
|
||||
isEmpty(form) {
|
||||
if (!form.animalId) {
|
||||
//返回提示
|
||||
return ElMessage({
|
||||
message: '记录的动物ID不能为空',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
search() {
|
||||
console.log('搜索', this.searchInput)
|
||||
|
||||
let searchResult = []//搜索结果数组
|
||||
//第一步匹配搜索选项，如果选择了状态
|
||||
if (typeof this.searchInput.state === 'number') {
|
||||
|
||||
//第一步匹配搜索选项
|
||||
if (typeof this.searchInput.option === 'number') {
|
||||
this.archives.forEach(e => {
|
||||
if (e.state === this.searchInput.state) {
|
||||
if (e.state === this.searchInput.option) {
|
||||
searchResult.push(copy(e))//如果符合特定权限，则添加到搜索结果
|
||||
}
|
||||
})
|
||||
@ -175,8 +239,11 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 加载完成后拉取数据
|
||||
this.getArchives()
|
||||
this.tableData = copy(this.archives);//复制一份给表格展示
|
||||
|
||||
//复制一份给表格展示，不轻易修改源数据
|
||||
this.tableData = copy(this.archives);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -194,21 +261,21 @@ export default {
|
||||
placeholder="搜索记录 空格隔开关键字"
|
||||
>
|
||||
<template #prepend>
|
||||
<el-select v-model="searchInput.state" placeholder="状态" style="width: 80px">
|
||||
<el-select v-model="searchInput.option" placeholder="状态" style="width: 80px">
|
||||
<el-option label="不选择" value=""/>
|
||||
<el-option label="正常" :value="0"/>
|
||||
<el-option label="异常" :value="1"/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="searchArchive()"/>
|
||||
<el-button :icon="Search" @click="search()"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border>
|
||||
<el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border stripe :default-sort="{prop: 'date', order: 'descending'}">
|
||||
<el-table-column fixed prop="id" label="记录号" width="100"/>
|
||||
<el-table-column fixed prop="animalId" label="记录的动物ID" width="120"/>
|
||||
<el-table-column prop="animalName" label="记录的动物名" width="110"/>
|
||||
@ -221,19 +288,22 @@ export default {
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="记录类型" width="90"/>
|
||||
<el-table-column prop="date" label="记录日期" width="110"/>
|
||||
<el-table-column prop="time" label="记录时间" width="90"/>
|
||||
<el-table-column prop="date" label="记录日期" width="110" sortable/>
|
||||
<el-table-column prop="time" label="记录时间" width="90" />
|
||||
<el-table-column prop="roleId" label="记录人ID" width="90"/>
|
||||
<el-table-column prop="describe" label="记录描述" width="300"/>
|
||||
<el-table-column fixed="right" label="操作" width="190">
|
||||
<el-table-column fixed="right" label="操作" width="250">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="small" :icon="Document" @click="showDetailDialog(scope.row)">
|
||||
查询
|
||||
<el-button link type="success" size="small" :icon="Tickets" @click="showArchives(scope.row)">
|
||||
档案
|
||||
</el-button>
|
||||
<el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
|
||||
<el-button link type="primary" size="small" :icon="Document" @click="showDetail(scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button link type="primary" size="small" :icon="Edit" @click="showEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button link type="danger" size="small" :icon="Delete" @click="deleteArchive(scope.row)">
|
||||
<el-button link type="danger" size="small" :icon="Delete" @click="delete_(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
@ -249,7 +319,7 @@ export default {
|
||||
<el-button @click="dialog.addDialogVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="addArchive(scope.form)">
|
||||
<el-button type="primary" @click="add(scope.form)">
|
||||
添加
|
||||
</el-button>
|
||||
</template>
|
||||
@ -257,14 +327,14 @@ export default {
|
||||
</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>
|
||||
<ZooArchiveFormDialog :archive="dialog.editData">
|
||||
<ZooArchiveFormDialog :data="dialog.dialogData" edit>
|
||||
<template #default="scope">
|
||||
<el-button @click="dialog.editDialogVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="editArchive(scope.form)">
|
||||
<el-button type="primary" @click="edit(scope.form)">
|
||||
修改
|
||||
</el-button>
|
||||
</template>
|
||||
@ -272,9 +342,9 @@ export default {
|
||||
</el-dialog>
|
||||
|
||||
<!-- 查看记录对话框-->
|
||||
<el-dialog v-model="dialog.detailDialogVisible" title="查询饲养计划" width="500" align-center draggable overflow
|
||||
<el-dialog v-model="dialog.detailDialogVisible" title="查询记录" width="500" align-center draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooArchiveFormDialog :archive="dialog.editData" detail>
|
||||
<ZooArchiveFormDialog :data="dialog.dialogData" detail>
|
||||
<template #default="scope">
|
||||
<el-button @click="dialog.detailDialogVisible = false">
|
||||
关闭
|
||||
@ -282,8 +352,26 @@ export default {
|
||||
</template>
|
||||
</ZooArchiveFormDialog>
|
||||
</el-dialog>
|
||||
|
||||
<!--查看动物所有记录-->
|
||||
<el-dialog v-model="dialog.timelineDialogVisible" :title="'动物档案'" width="600" align-center draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooArchiveTimeline :data="dialog.timelineData">
|
||||
<template #operate="scope">
|
||||
<el-button type="primary" link @click="showEdit(scope.archive)">编辑</el-button>
|
||||
<el-button type="danger" link @click="delete_(scope.archive)">删除</el-button>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="dialog.timelineDialogVisible = false">
|
||||
关闭
|
||||
</el-button>
|
||||
</template>
|
||||
</ZooArchiveTimeline>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -9,15 +9,19 @@ export default {
|
||||
components: {ZooBreedingPlanFormDialog},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
tableData: [],//表格数据
|
||||
|
||||
// 搜索框的输入
|
||||
searchInput: {
|
||||
state: '',//状态（0正常 1异常）
|
||||
option: '',//状态（0正常 1异常）
|
||||
keyword: ''
|
||||
},
|
||||
|
||||
// 控制弹窗的属性
|
||||
dialog: {
|
||||
dialogData: {},
|
||||
addDialogVisible: false,//添加饲养计划对话框
|
||||
editDialogVisible: false,//编辑饲养计划对话框
|
||||
editData: {},
|
||||
detailDialogVisible:false//查询饲养计划对话框
|
||||
}
|
||||
}
|
||||
@ -44,41 +48,48 @@ export default {
|
||||
...mapState(["breedingPlans"])
|
||||
},
|
||||
watch: {
|
||||
// 搜索框存在输入，自动调用搜索
|
||||
searchInput: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.searchBreedingPlan();
|
||||
this.search();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["getBreedingPlans"]),
|
||||
showDetailDialog(breedingPlan) {
|
||||
//这里使用饲养计划的id查询后端的特定饲养计划再赋值，这里用假数据代替一下
|
||||
this.dialog.editData = this.breedingPlans.find(e => e.id === breedingPlan.id)
|
||||
console.log('点击了详情', this.dialog.editData)
|
||||
|
||||
//显示详情弹窗
|
||||
showDetail(data) {
|
||||
console.log('显示详情', data)
|
||||
|
||||
//从后端获取需要查询的数据，防止数据前后不一致
|
||||
//这里先用假数据代替一下
|
||||
this.dialog.dialogData = this.breedingPlans.find(e => e.id === data.id)
|
||||
|
||||
//显示弹窗
|
||||
this.dialog.detailDialogVisible = true
|
||||
},
|
||||
showEditDialog(breedingPlan) {
|
||||
//这里使用饲养计划的id查询后端的特定饲养计划再赋值，这里用假数据代替一下
|
||||
this.dialog.editData = this.breedingPlans.find(e => e.id === breedingPlan.id)
|
||||
console.log('点击了编辑', this.dialog.editData)
|
||||
|
||||
//显示编辑弹窗
|
||||
showEdit(data) {
|
||||
console.log('显示编辑', data)
|
||||
|
||||
//从后端获取需要查询的数据，防止数据前后不一致
|
||||
//这里先用假数据代替一下
|
||||
this.dialog.dialogData = this.breedingPlans.find(e => e.id === data.id)
|
||||
|
||||
//显示弹窗
|
||||
this.dialog.editDialogVisible = true
|
||||
},
|
||||
// 判断表单是否为空
|
||||
isEmpty(form) {
|
||||
if (!form.name) {
|
||||
//返回提示
|
||||
return ElMessage({
|
||||
message: '计划名不能为空',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
},
|
||||
editBreedingPlan(form) {
|
||||
console.log('确认编辑饲养计划', form)
|
||||
//判断是否为空
|
||||
return this.isEmpty(form);
|
||||
|
||||
edit(data) {
|
||||
console.log('编辑', data)
|
||||
|
||||
//判断表单是否为空
|
||||
return this.isEmpty(data);
|
||||
|
||||
//这里将数据传给后端进行数据更新
|
||||
//编辑失败
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
@ -86,6 +97,7 @@ export default {
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
|
||||
//编辑成功
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
@ -93,15 +105,20 @@ export default {
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
// 此处重新拉取数据
|
||||
|
||||
//从后端重新拉取数据
|
||||
this.getBreedingPlans()
|
||||
this.dialog.editDialogVisible = false//添加成功关闭窗口
|
||||
|
||||
//关闭窗口
|
||||
this.dialog.editDialogVisible = false
|
||||
},
|
||||
deleteBreedingPlan(breedingPlan) {
|
||||
console.log('删除饲养计划', breedingPlan)
|
||||
|
||||
delete_(data) {
|
||||
console.log('删除', data)
|
||||
|
||||
return ElMessageBox.confirm(
|
||||
'该操作不可撤销，是否继续？',
|
||||
'删除饲养计划：' + breedingPlan.name,
|
||||
'删除计划：' + data.name + '（'+data.id+'）',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
@ -109,7 +126,11 @@ export default {
|
||||
}
|
||||
).then(() => {
|
||||
//进行删除操作
|
||||
// ……
|
||||
|
||||
//重新拉取数据
|
||||
this.getBreedingPlans()
|
||||
|
||||
// 返回提示
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
@ -121,14 +142,19 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
addBreedingPlan(form) {
|
||||
console.log('添加饲养计划', form)
|
||||
|
||||
add(data) {
|
||||
console.log('添加', data)
|
||||
|
||||
//验证是否为空
|
||||
return this.isEmpty(form);
|
||||
return this.isEmpty(data);
|
||||
|
||||
//先查询用户是否存在
|
||||
|
||||
//添加失败
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
message: '该饲养计划已存在',
|
||||
message: '该计划已存在',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
@ -140,15 +166,30 @@ export default {
|
||||
})
|
||||
}
|
||||
// 此处重新拉取数据
|
||||
this.getBreedingPlans()
|
||||
this.dialog.addDialogVisible = false//添加成功关闭窗口
|
||||
},
|
||||
searchBreedingPlan() {
|
||||
console.log('饲养计划搜索', this.searchInput)
|
||||
|
||||
// 判断表单是否为空
|
||||
isEmpty(form) {
|
||||
if (!form.name) {
|
||||
//返回提示
|
||||
return ElMessage({
|
||||
message: '计划名不能为空',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
search() {
|
||||
console.log('搜索', this.searchInput)
|
||||
|
||||
let searchResult = []//搜索结果数组
|
||||
|
||||
//第一步匹配搜索选项，如果选择了特定状态
|
||||
if (typeof this.searchInput.state === 'number') {
|
||||
if (typeof this.searchInput.option === 'number') {
|
||||
this.breedingPlans.forEach(e => {
|
||||
if (e.state === this.searchInput.state) {
|
||||
if (e.state === this.searchInput.option) {
|
||||
searchResult.push(copy(e))//如果符合特定权限，则添加到搜索结果
|
||||
}
|
||||
})
|
||||
@ -175,8 +216,11 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 加载完成后拉取数据
|
||||
this.getBreedingPlans()
|
||||
this.tableData = copy(this.breedingPlans);//复制一份给表格展示
|
||||
|
||||
//复制一份给表格展示，不轻易修改源数据
|
||||
this.tableData = copy(this.breedingPlans);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -194,29 +238,21 @@ export default {
|
||||
placeholder="搜索饲养计划 空格隔开关键字"
|
||||
>
|
||||
<template #prepend>
|
||||
<el-select v-model="searchInput.state" placeholder="状态" style="width: 80px">
|
||||
<el-select v-model="searchInput.option" placeholder="状态" style="width: 80px">
|
||||
<el-option label="不选择" value=""/>
|
||||
<el-option label="正常" :value="0"/>
|
||||
<el-option label="异常" :value="1"/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="searchBreedingPlan()"/>
|
||||
<el-button :icon="Search" @click="search()"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <hr/>-->
|
||||
<!-- id: '',//int 饲养计划id-->
|
||||
<!-- name: '',//字符 饲养计划名称-->
|
||||
<!-- species: '',//字符 种类-->
|
||||
<!-- sex: '雄性',//字符 饲养动物性别-->
|
||||
<!-- phase: '',//字符 饲养动物阶段：幼年期、成长期、成年期、老年期-->
|
||||
<!-- state: 0,//int 状态（0正常 1异常）-->
|
||||
<!-- describe: ''//字符 饲养计划的描述-->
|
||||
<div class="table">
|
||||
<el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border>
|
||||
<el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border stripe>
|
||||
<el-table-column fixed prop="id" label="饲养计划ID" width="100"/>
|
||||
<el-table-column fixed prop="name" label="饲养计划名称" width="200"/>
|
||||
<el-table-column prop="roleId" label="执行饲养员" width="100"/>
|
||||
@ -233,13 +269,13 @@ export default {
|
||||
<el-table-column prop="describe" label="计划描述" width="300"/>
|
||||
<el-table-column fixed="right" label="操作" width="190">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="small" :icon="Document" @click="showDetailDialog(scope.row)">
|
||||
<el-button link type="primary" size="small" :icon="Document" @click="showDetail(scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
|
||||
<el-button link type="primary" size="small" :icon="Edit" @click="showEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button link type="danger" size="small" :icon="Delete" @click="deleteBreedingPlan(scope.row)">
|
||||
<el-button link type="danger" size="small" :icon="Delete" @click="delete_(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
@ -255,7 +291,7 @@ export default {
|
||||
<el-button @click="dialog.addDialogVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="addBreedingPlan(scope.form)">
|
||||
<el-button type="primary" @click="add(scope.form)">
|
||||
添加
|
||||
</el-button>
|
||||
</template>
|
||||
@ -265,12 +301,12 @@ export default {
|
||||
<!-- 编辑饲养计划对话框-->
|
||||
<el-dialog v-model="dialog.editDialogVisible" title="编辑饲养计划" width="500" align-center draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooBreedingPlanFormDialog :breedingPlan="dialog.editData">
|
||||
<ZooBreedingPlanFormDialog :data="dialog.dialogData" edit>
|
||||
<template #default="scope">
|
||||
<el-button @click="dialog.editDialogVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="editBreedingPlan(scope.form)">
|
||||
<el-button type="primary" @click="edit(scope.form)">
|
||||
修改
|
||||
</el-button>
|
||||
</template>
|
||||
@ -280,7 +316,7 @@ export default {
|
||||
<!-- 查看饲养计划对话框-->
|
||||
<el-dialog v-model="dialog.detailDialogVisible" title="查询饲养计划" width="500" align-center draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooBreedingPlanFormDialog :breedingPlan="dialog.editData" detail>
|
||||
<ZooBreedingPlanFormDialog :data="dialog.dialogData" detail>
|
||||
<template #default="scope">
|
||||
<el-button @click="dialog.detailDialogVisible = false">
|
||||
关闭
|
||||
|
||||
@ -6,7 +6,8 @@ export default {
|
||||
name: "ZooContainer",
|
||||
data() {
|
||||
return {
|
||||
user: {
|
||||
// 登录表单数据
|
||||
form: {
|
||||
username: '',
|
||||
password: '123456',
|
||||
}
|
||||
@ -18,9 +19,11 @@ export default {
|
||||
methods: {
|
||||
...mapActions(['getLoginUser']),
|
||||
...mapMutations(['updateLoginUser']),
|
||||
onSubmit() {
|
||||
console.log('点击了登录按钮')
|
||||
if (!this.user.username || !this.user.password) {
|
||||
// 登录
|
||||
login() {
|
||||
console.log('登录',this.form)
|
||||
//判断表单是否为空
|
||||
if (!this.form.username || !this.form.password) {
|
||||
//返回提示
|
||||
return ElMessage({
|
||||
message: '用户名和密码不能为空',
|
||||
@ -28,20 +31,28 @@ export default {
|
||||
})
|
||||
}
|
||||
|
||||
this.getLoginUser(this.user)//通过表单获取登录的用户
|
||||
//此处接入后端登录接口
|
||||
this.getLoginUser(this.form)//通过表单获取登录的用户
|
||||
|
||||
//能获取到登录后的数据，说明登录成功
|
||||
if (this.loginUser) {
|
||||
localStorage.setItem('username', this.loginUser.username);//本地存储登录用户名
|
||||
|
||||
// 跳转到面板首页
|
||||
this.$router.push('/panel/home')
|
||||
}
|
||||
},
|
||||
//重置表单
|
||||
reset() {
|
||||
this.user = {}
|
||||
this.form = {}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.updateLoginUser('');//清空退出登录的用户
|
||||
this.user.username = localStorage.getItem('username');//自动填充历史登录的用户
|
||||
//清空退出登录的用户
|
||||
this.updateLoginUser('');
|
||||
|
||||
//自动填充历史登录的用户
|
||||
this.form.username = localStorage.getItem('username');
|
||||
}
|
||||
|
||||
}
|
||||
@ -49,20 +60,22 @@ export default {
|
||||
|
||||
<template>
|
||||
<div id="login-root">
|
||||
<!-- 背景图片-->
|
||||
<el-carousel height="400px" motion-blur>
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3 class="small justify-center" text="2xl">{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<!-- 登录表单-->
|
||||
<div class="center">
|
||||
<el-card style="width: 480px" shadow="always" header="登录">
|
||||
<el-form :model="user" label-width="auto" style="max-width: 600px">
|
||||
<el-form :model="form" label-width="auto" style="max-width: 600px">
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="user.username" style="width: 240px" placeholder="请输入用户名"/>
|
||||
<el-input v-model="form.username" style="width: 240px" placeholder="请输入用户名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码">
|
||||
<el-input
|
||||
v-model="user.password"
|
||||
v-model="form.password"
|
||||
style="width: 240px"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
@ -70,7 +83,7 @@ export default {
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">登录</el-button>
|
||||
<el-button type="primary" @click="login">登录</el-button>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
@ -8,6 +8,25 @@ import {copy, fuzzyMatching, splitKeyWords,showPassword,hidePassword} from "@/ut
|
||||
export default {
|
||||
name: "ZooUser",
|
||||
components: {ZooUserFormDialog},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],//表格数据
|
||||
|
||||
//搜索框的输入
|
||||
searchInput: {
|
||||
option: '',
|
||||
keyword: ''
|
||||
},
|
||||
|
||||
// 控制弹窗的属性
|
||||
dialog: {
|
||||
dialogData: {},//弹窗表单数据
|
||||
addDialogVisible: false,//添加弹窗
|
||||
editDialogVisible: false,//编辑弹窗
|
||||
detailDialogVisible: false,//详情弹窗
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
//返回图标
|
||||
// region
|
||||
@ -28,29 +47,14 @@ export default {
|
||||
},
|
||||
|
||||
// endregion
|
||||
|
||||
...mapState(["users"])
|
||||
},
|
||||
watch: {
|
||||
// 搜索框存在输入，自动调用搜索
|
||||
searchInput: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.searchUser();
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],//用来显示在界面的数据
|
||||
searchInput: {
|
||||
auth: '',
|
||||
keyword: ''
|
||||
},
|
||||
dialog: {
|
||||
addDialogVisible: false,//添加用户对话框
|
||||
editDialogVisible: false,//编辑用户对话框
|
||||
editData: {},
|
||||
detailDialogVisible: false,//查看用户对话框
|
||||
this.search();
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -58,32 +62,38 @@ export default {
|
||||
hidePassword,
|
||||
showPassword,
|
||||
...mapActions(['getUsers']),
|
||||
showDetailDialog(user) {
|
||||
//这里使用user的用户名查询后端的特定用户再赋值，这里用假数据代替一下
|
||||
this.dialog.editData = this.users.find(e => e.username === user.username)
|
||||
console.log('点击了查询', this.dialog.editData)
|
||||
|
||||
//显示详情弹窗
|
||||
showDetail(data) {
|
||||
console.log('显示详情', data)
|
||||
|
||||
//从后端获取需要查询的数据，防止数据前后不一致
|
||||
//这里先用假数据代替一下
|
||||
this.dialog.dialogData = this.users.find(e => e.username === data.username)
|
||||
|
||||
//显示详情弹窗
|
||||
this.dialog.detailDialogVisible = true
|
||||
},
|
||||
showEditDialog(user) {
|
||||
//这里使用user的用户名查询后端的特定用户再赋值，这里用假数据代替一下
|
||||
this.dialog.editData = this.users.find(e => e.username === user.username)
|
||||
console.log('点击了编辑', this.dialog.editData)
|
||||
|
||||
// 显示编辑弹窗
|
||||
showEdit(data) {
|
||||
console.log('编辑弹窗', data)
|
||||
|
||||
//从后端获取需要查询的数据，防止数据前后不一致
|
||||
//这里先用假数据代替一下
|
||||
this.dialog.dialogData = this.users.find(e => e.id === data.id)
|
||||
|
||||
// 显示编辑弹窗
|
||||
this.dialog.editDialogVisible = true
|
||||
},
|
||||
// 判断表单是否为空
|
||||
isEmpty(form) {
|
||||
if (!form.username || !form.password) {
|
||||
//返回提示
|
||||
return ElMessage({
|
||||
message: '用户名和密码不能为空',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
},
|
||||
editUser(form) {
|
||||
console.log('确认编辑用户', form)
|
||||
//判断是否为空
|
||||
return this.isEmpty(form);
|
||||
|
||||
edit(data) {
|
||||
console.log('编辑', data)
|
||||
|
||||
//判断表单是否为空
|
||||
return this.isEmpty(data);
|
||||
|
||||
//这里将数据传给后端进行数据更新
|
||||
//编辑失败
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
@ -91,6 +101,7 @@ export default {
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
|
||||
//编辑成功
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
@ -98,17 +109,20 @@ export default {
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
// 此处重新拉取数据
|
||||
|
||||
//从后端重新拉取数据
|
||||
this.getUsers()
|
||||
this.dialog.editDialogVisible = false//添加成功关闭窗口
|
||||
|
||||
//关闭窗口
|
||||
this.dialog.editDialogVisible = false
|
||||
},
|
||||
deleteUser(user) {
|
||||
//这里使用user的用户名查询后端的特定用户再赋值，这里用假数据代替一下
|
||||
user = this.users.find(e => e.username === user.username)
|
||||
console.log('删除用户', user)
|
||||
|
||||
delete_(data) {
|
||||
console.log('删除', data)
|
||||
|
||||
return ElMessageBox.confirm(
|
||||
'该操作不可撤销，是否继续？',
|
||||
'删除用户：' + user.username,
|
||||
'删除用户：' + data.username + '（'+data.id+'）',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
@ -116,8 +130,11 @@ export default {
|
||||
}
|
||||
).then(() => {
|
||||
//进行删除操作
|
||||
// ……
|
||||
|
||||
//重新拉取数据
|
||||
this.getUsers()
|
||||
|
||||
// 返回提示
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
@ -129,10 +146,15 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
addUser(form) {
|
||||
console.log('添加用户', form)
|
||||
|
||||
add(data) {
|
||||
console.log('添加', data)
|
||||
|
||||
//验证是否为空
|
||||
return this.isEmpty(form);
|
||||
return this.isEmpty(data);
|
||||
|
||||
//先查询用户是否存在
|
||||
|
||||
//添加失败
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
@ -147,18 +169,32 @@ export default {
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
|
||||
// 此处重新拉取数据
|
||||
this.getUsers()
|
||||
this.dialog.addDialogVisible = false//添加成功关闭窗口
|
||||
|
||||
},
|
||||
searchUser() {
|
||||
console.log('用户搜索',this.searchInput)
|
||||
|
||||
// 判断表单是否为空
|
||||
isEmpty(form) {
|
||||
if (!form.username || !form.password) {
|
||||
//返回提示
|
||||
return ElMessage({
|
||||
message: '用户名和密码不能为空',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
search() {
|
||||
console.log('搜索',this.searchInput)
|
||||
|
||||
let searchResult = []//搜索结果数组
|
||||
//第一步匹配搜索选项，如果选择了特定用户身份
|
||||
if (typeof this.searchInput.auth ==='number') {
|
||||
|
||||
//第一步匹配搜索选项
|
||||
if (typeof this.searchInput.option ==='number') {
|
||||
this.users.forEach(e=>{
|
||||
if (e.auth === this.searchInput.auth) {
|
||||
if (e.auth === this.searchInput.option) {
|
||||
searchResult.push(copy(e))//如果符合特定权限，则添加到搜索结果
|
||||
}
|
||||
})
|
||||
@ -186,8 +222,11 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getUsers()//获取用户数据
|
||||
this.tableData = copy(this.users);//复制一份给表格展示
|
||||
// 加载完成后拉取数据
|
||||
this.getUsers()
|
||||
|
||||
//复制一份给表格展示，不轻易修改源数据
|
||||
this.tableData = copy(this.users);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -205,7 +244,7 @@ export default {
|
||||
placeholder="搜索用户 空格隔开关键字"
|
||||
>
|
||||
<template #prepend>
|
||||
<el-select v-model="searchInput.auth" placeholder="身份" style="width: 90px">
|
||||
<el-select v-model="searchInput.option" placeholder="身份" style="width: 90px">
|
||||
<el-option label="不选择" value=""/>
|
||||
<el-option label="管理员" :value="0"/>
|
||||
<el-option label="饲养员" :value="1"/>
|
||||
@ -213,7 +252,7 @@ export default {
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="searchUser()"/>
|
||||
<el-button :icon="Search" @click="search()"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
@ -221,7 +260,7 @@ export default {
|
||||
|
||||
<!-- <hr/>-->
|
||||
<div class="table">
|
||||
<el-table :data="tableData" style="height: 100%" empty-text="暂无数据" border>
|
||||
<el-table :data="tableData" style="height: 100%" empty-text="暂无数据" border stripe>
|
||||
<el-table-column fixed prop="id" label="用户ID" width="70"/>
|
||||
<el-table-column fixed prop="username" label="用户名" width="150"/>
|
||||
<el-table-column prop="password" label="密码" width="150">
|
||||
@ -239,13 +278,13 @@ export default {
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="190">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="small" :icon="Document" @click="showDetailDialog(scope.row)">
|
||||
<el-button link type="primary" size="small" :icon="Document" @click="showDetail(scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
|
||||
<el-button link type="primary" size="small" :icon="Edit" @click="showEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button link type="danger" size="small" :icon="Delete" @click="deleteUser(scope.row)">
|
||||
<el-button link type="danger" size="small" :icon="Delete" @click="delete_(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
@ -261,7 +300,7 @@ export default {
|
||||
<el-button @click="dialog.addDialogVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="addUser(scope.form)">
|
||||
<el-button type="primary" @click="add(scope.form)">
|
||||
添加
|
||||
</el-button>
|
||||
</template>
|
||||
@ -271,12 +310,12 @@ export default {
|
||||
<!-- 编辑用户对话框-->
|
||||
<el-dialog v-model="dialog.editDialogVisible" title="编辑用户" width="400" align-center draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooUserFormDialog :user="dialog.editData">
|
||||
<ZooUserFormDialog :data="dialog.dialogData" edit>
|
||||
<template #default="scope">
|
||||
<el-button @click="dialog.editDialogVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="editUser(scope.form)">
|
||||
<el-button type="primary" @click="edit(scope.form)">
|
||||
修改
|
||||
</el-button>
|
||||
</template>
|
||||
@ -286,7 +325,7 @@ export default {
|
||||
<!-- 用户详情对话框-->
|
||||
<el-dialog v-model="dialog.detailDialogVisible" title="查询用户" width="400" align-center draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooUserFormDialog :user="dialog.editData" detail>
|
||||
<ZooUserFormDialog :data="dialog.dialogData" detail>
|
||||
<template #default="scope">
|
||||
<el-button @click="dialog.detailDialogVisible = false">
|
||||
关闭
|
||||
|
||||
@ -2,7 +2,7 @@ import {createStore} from "vuex";
|
||||
import {generateAnimals, generateArchives, generateBreedingPlans, generateUsers} from "@/utils/common.js";
|
||||
|
||||
const actions = {
|
||||
//更新登录用户
|
||||
//获取登录用户
|
||||
getLoginUser(context, user) {
|
||||
//此处接入后端登录接口验证登录用户名和密码，验证通过方可通行
|
||||
//密码错误
|
||||
@ -63,15 +63,22 @@ const state = {
|
||||
username: 'user1',
|
||||
auth: 0
|
||||
},
|
||||
// //用户数据
|
||||
// users: [],
|
||||
// //动物数据
|
||||
// animals: [],
|
||||
// //饲养计划
|
||||
// breedingPlans:[],
|
||||
// //动物档案
|
||||
// archives:[],
|
||||
//用户数据
|
||||
users: [],
|
||||
users: generateUsers(),
|
||||
//动物数据
|
||||
animals: [],
|
||||
animals: generateAnimals(),
|
||||
//饲养计划
|
||||
breedingPlans:[],
|
||||
breedingPlans:generateBreedingPlans(),
|
||||
//动物档案
|
||||
archives:[]
|
||||
|
||||
archives:generateArchives()
|
||||
}
|
||||
|
||||
export default createStore({
|
||||
|
||||
@ -116,7 +116,6 @@ export function copy(value) {
|
||||
//鼠标悬浮显示密码
|
||||
//region
|
||||
export function showPassword(event,password){
|
||||
console.log('showPassword')
|
||||
event.target.innerText = password
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user