383 lines
14 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="羊只id" prop="sheepId">
<el-input v-model="queryParams.sheepId" placeholder="请输入羊只id" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="转出羊舍" prop="foldFrom">
<el-select v-model="queryParams.foldFrom" placeholder="请选择转出羊舍" style="min-width:150px" clearable>
<el-option v-for="item in sheepfoldOptions" :key="item.id" :label="item.sheepfoldName" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="转入羊舍" prop="foldTo">
<el-select v-model="queryParams.foldTo" placeholder="请选择转入羊舍" style="min-width:150px" clearable>
<el-option v-for="item in sheepfoldOptions" :key="item.id" :label="item.sheepfoldName" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="品种" prop="varietyId">
<el-select v-model="queryParams.varietyId" placeholder="请选择品种" style="min-width:150px" clearable>
<el-option v-for="item in varietyOptions" :key="item.id" :label="item.variety" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" style="width: 150px;" placeholder="请选择状态" clearable>
<el-option v-for="dict in status" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="创建时间" style="width: 308px">
<el-date-picker v-model="daterangeCreateTime" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd"
v-hasPermi="['trans_group:trans_group:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
v-hasPermi="['trans_group:trans_group:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
v-hasPermi="['trans_group:trans_group:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport"
v-hasPermi="['trans_group:trans_group:export']">导出</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="trans_groupList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="${comment}" align="center" prop="id" /> -->
<el-table-column label="羊只id" align="center" prop="sheepId" />
<el-table-column label="转出羊舍" align="center" prop="foldFromName" />
<el-table-column label="转入羊舍" align="center" prop="foldToName" />
<el-table-column label="品种" align="center" prop="varietyName" />
<el-table-column label="转群原因" align="center" prop="reasonText" />
<el-table-column label="技术员" align="center" prop="technician" />
<el-table-column label="状态" align="center" prop="statusText" />
<el-table-column label="备注" align="center" prop="comment" />
<el-table-column label="创建人" align="center" prop="createBy" />
<el-table-column label="创建时间" align="center" prop="createTime">
<template #default="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="160">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleApprove(scope.row)"
v-hasPermi="['trans_group:trans_group:approve']">
审批
</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
v-hasPermi="['trans_group:trans_group:remove']">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="getList" />
<!-- 添加或修改转群记录对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="trans_groupRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="羊只id" prop="sheepId">
<el-input v-model="form.sheepId" placeholder="请输入羊只id" />
</el-form-item>
<el-form-item label="转出羊舍" prop="foldFrom">
<el-select v-model="form.foldFrom" placeholder="请选择转出羊舍" clearable>
<el-option v-for="fold in sheepfoldOptions" :key="fold.id" :label="fold.sheepfoldName" :value="fold.id" />
</el-select>
</el-form-item>
<el-form-item label="转入羊舍" prop="foldTo">
<el-select v-model="form.foldTo" placeholder="请选择转入羊舍" clearable>
<el-option v-for="fold in sheepfoldOptions" :key="fold.id" :label="fold.sheepfoldName" :value="fold.id" />
</el-select>
</el-form-item>
<el-form-item label="品种" prop="varietyId">
<el-select v-model="form.varietyId" placeholder="请选择品种" clearable>
<el-option v-for="item in varietyOptions" :key="item.id" :label="item.variety" :value="Number(item.id)" />
</el-select>
</el-form-item>
<el-form-item label="转群原因" prop="reason">
<el-select v-model="form.reason" placeholder="请选择转群原因" clearable>
<el-option v-for="dict in trans_group_reason" :key="dict.value" :label="dict.label"
:value="Number(dict.value)" />
</el-select>
</el-form-item>
<el-form-item label="技术员" prop="technician">
<el-input v-model="form.technician" placeholder="请输入技术员" />
</el-form-item>
<el-form-item label="备注" prop="comment">
<el-input v-model="form.comment" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</div>
<!-- 审批对话框 -->
<el-dialog :title="'审批转群记录'" v-model="approveDialog" width="500px" append-to-body>
<el-form ref="approveFormRef" :model="approveForm" label-width="120px">
<el-form-item label="羊只id">
<el-input v-model="approveForm.sheepId" disabled />
</el-form-item>
<el-form-item label="转出羊舍">
<el-input :value="sheepfoldNameMap[approveForm.foldFrom] || approveForm.foldFrom" disabled />
</el-form-item>
<el-form-item label="转入羊舍">
<el-input :value="sheepfoldNameMap[approveForm.foldTo] || approveForm.foldTo" disabled />
</el-form-item>
<el-form-item label="品种">
<el-input :value="approveForm.varietyName" disabled />
</el-form-item>
<el-form-item label="转群原因">
<el-input :value="approveForm.reasonText" disabled />
</el-form-item>
<el-form-item label="状态">
<el-input :value="approveForm.statusText" disabled />
</el-form-item>
<el-form-item label="技术员">
<el-input v-model="approveForm.technician" disabled />
</el-form-item>
<el-form-item label="备注">
<el-input v-model="approveForm.comment" disabled />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleApproveAgree">同意</el-button>
<el-button type="danger" @click="handleApproveReject">驳回</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup name="Trans_group">
import {
listTrans_group,
getTrans_group,
delTrans_group,
addTrans_group,
updateTrans_group
} from '@/api/produce/manage_sheep/trans_group/trans_group'
import { listSheepfold_management as listSheepfold } from '@/api/fileManagement/sheepfold_management'
import request from '@/utils/request'
const { proxy } = getCurrentInstance()
const { trans_group_reason, status } = proxy.useDict('trans_group_reason', 'status')
/* -------------------- 响应式变量 -------------------- */
const trans_groupList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref('')
const daterangeCreateTime = ref([])
const approveDialog = ref(false)
const approveForm = ref({})
const sheepfoldOptions = ref([])
const sheepfoldNameMap = ref({})
const varietyOptions = ref([])
/* -------------------- 表单 & 查询 -------------------- */
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
sheepId: null,
foldTo: null,
foldFrom: null,
varietyId: null, // 新增
status: null,
createTime: null
},
rules: {
sheepId: [{ required: true, message: '羊只id不能为空', trigger: 'blur' }],
foldFrom: [{ required: true, message: '转出羊舍不能为空', trigger: 'change' }],
foldTo: [{ required: true, message: '转入羊舍不能为空', trigger: 'change' }],
varietyId: [{ required: true, message: '品种不能为空', trigger: 'change' }],
reason: [{ required: true, message: '转群原因不能为空', trigger: 'change' }],
technician: [{ required: true, message: '技术员不能为空', trigger: 'blur' }]
}
})
const { queryParams, form, rules } = toRefs(data)
/* -------------------- 业务函数 -------------------- */
function getList() {
loading.value = true
queryParams.value.params = {}
if (daterangeCreateTime.value?.length) {
queryParams.value.params.beginCreateTime = daterangeCreateTime.value[0]
queryParams.value.params.endCreateTime = daterangeCreateTime.value[1]
}
listTrans_group(queryParams.value).then(res => {
trans_groupList.value = res.rows
total.value = res.total
loading.value = false
})
}
function reset() {
form.value = {
id: null,
sheepId: null,
foldFrom: null,
foldTo: null,
varietyId: null, // 新增
reason: null,
technician: null,
status: null,
comment: null,
createBy: null,
createTime: null
}
proxy.resetForm('trans_groupRef')
}
function cancel() {
open.value = false
reset()
}
function handleQuery() {
queryParams.value.pageNum = 1
getList()
}
function resetQuery() {
daterangeCreateTime.value = []
proxy.resetForm('queryRef')
handleQuery()
}
function handleSelectionChange(selection) {
ids.value = selection.map(item => item.id)
single.value = selection.length !== 1
multiple.value = !selection.length
}
function handleAdd() {
reset()
open.value = true
title.value = '添加转群记录'
}
function handleUpdate(row) {
reset()
const _id = row.id || ids.value
getTrans_group(_id).then(res => {
const d = res.data
// 统一转成 Number避免 undefined
d.foldFrom = Number(d.foldFrom ?? 0)
d.foldTo = Number(d.foldTo ?? 0)
d.reason = Number(d.reason ?? 0)
d.status = Number(d.status ?? 0)
d.varietyId = Number(d.varietyId ?? 0)
form.value = d
open.value = true
title.value = '修改转群记录'
})
}
function submitForm() {
proxy.$refs.trans_groupRef.validate(valid => {
if (!valid) return
const api = form.value.id ? updateTrans_group : addTrans_group
api(form.value).then(() => {
proxy.$modal.msgSuccess(form.value.id ? '修改成功' : '新增成功')
open.value = false
getList()
})
})
}
function handleDelete(row) {
const _ids = row.id || ids.value
proxy.$modal.confirm(`是否确认删除转群记录编号为“${_ids}”的数据项?`)
.then(() => delTrans_group(_ids))
.then(() => {
getList()
proxy.$modal.msgSuccess('删除成功')
})
}
function handleExport() {
proxy.download(
'/produce/manage_sheep/trans_group/export',
{ ...queryParams.value },
`trans_group_${Date.now()}.xlsx`
)
}
/* -------------------- 审批 -------------------- */
function handleApprove(row) {
approveForm.value = { ...row }
approveDialog.value = true
}
function handleApproveAgree() {
approveForm.value.status = 1
updateTrans_group(approveForm.value).then(() => {
approveDialog.value = false
proxy.$modal.msgSuccess('审批成功,状态已更新为同意')
getList()
})
}
function handleApproveReject() {
approveForm.value.status = 2
updateTrans_group(approveForm.value).then(() => {
approveDialog.value = false
proxy.$modal.msgSuccess('审批成功,状态已更新为驳回')
getList()
})
}
/* -------------------- 下拉数据 -------------------- */
function loadSheepfold() {
listSheepfold({ pageNum: 1, pageSize: 9999 }).then(res => {
sheepfoldOptions.value = res.rows
sheepfoldNameMap.value = res.rows.reduce((acc, item) => {
acc[item.id] = item.sheepfoldName
return acc
}, {})
})
}
function getVarietyOptions() {
request({
url: '/base/variety/list',
method: 'get',
params: { pageNum: 1, pageSize: 9999 }
}).then(res => {
varietyOptions.value = res.rows || []
})
}
/* -------------------- 初始化 -------------------- */
onMounted(() => {
loadSheepfold()
getVarietyOptions()
getList()
})
</script>