搜索栏以及表头冻结

This commit is contained in:
zyh
2026-03-01 15:21:11 +08:00
parent 9a6e31a5be
commit 83beadc988
12 changed files with 586 additions and 517 deletions

View File

@@ -1,5 +1,6 @@
<template>
<div class="app-container">
<div class="app-container"
style="height: calc(100vh - 84px); display: flex; flex-direction: column; overflow: hidden;">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="胚胎编号" prop="code">
<el-input v-model="queryParams.code" placeholder="请输入胚胎编号" clearable @keyup.enter="handleQuery"
@@ -56,67 +57,71 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="embryoList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="主键" align="center" prop="id" /> -->
<el-table-column label="胚胎编号" align="center" prop="code" width="130px" fixed="fixed" />
<el-table-column label="冻胚日期" align="center" prop="freezeDate" width="130px">
<template #default="scope">
<span>{{ parseTime(scope.row.freezeDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="供体公羊耳号" align="center" prop="drId" width="130px" />
<el-table-column label="供体公羊品种" align="center" prop="drBreed" width="130px" />
<el-table-column label="供体羊耳号" align="center" prop="deId" width="130px" />
<el-table-column label="供体羊品种" align="center" prop="deBreed" width="130px" />
<el-table-column label="胚胎品种" align="center" prop="embBreed" />
<el-table-column label="胚胎阶段等级" align="center" prop="grade" width="130px" />
<el-table-column label="胚胎数量" align="center" prop="qty" width="130px" sortable />
<el-table-column label="是否性控" align="center" width="80">
<template #default="scope">
{{ scope.row.sexCtl === 1 ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<el-tag :type="scope.row.status === '正常' ? 'primary'
: scope.row.status === '销售' ? 'success'
: scope.row.status === '自用' ? 'warning'
: 'danger'">
{{ scope.row.status }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="技术员" align="center" prop="tech" />
<el-table-column label="液氮罐ID" align="center" prop="tankId" />
<el-table-column label="提桶ID" align="center" prop="bucketId" />
<el-table-column label="冷冻架ID" align="center" prop="rackId" />
<el-table-column label="出库日期" align="center" prop="outDate" width="130px">
<template #default="scope">
<span>{{ parseTime(scope.row.outDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="废弃原因" align="center" prop="discardTxt" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="创建人" align="center" prop="createBy" />
<el-table-column label="创建时间" align="center" prop="createTime" width="160px">
<template #default="scope">
{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
<template #default="scope">
<!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
<div style="flex: 1; overflow: hidden;">
<el-table v-loading="loading" :data="embryoList" @selection-change="handleSelectionChange" height="100%"
style="width: 100%">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="主键" align="center" prop="id" /> -->
<el-table-column label="胚胎编号" align="center" prop="code" width="130px" fixed="fixed" />
<el-table-column label="冻胚日期" align="center" prop="freezeDate" width="130px">
<template #default="scope">
<span>{{ parseTime(scope.row.freezeDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="供体羊耳号" align="center" prop="drId" width="130px" />
<el-table-column label="供体羊品种" align="center" prop="drBreed" width="130px" />
<el-table-column label="供体母羊耳号" align="center" prop="deId" width="130px" />
<el-table-column label="供体母羊品种" align="center" prop="deBreed" width="130px" />
<el-table-column label="胚胎品种" align="center" prop="embBreed" />
<el-table-column label="胚胎阶段等级" align="center" prop="grade" width="130px" />
<el-table-column label="胚胎数量" align="center" prop="qty" width="130px" sortable />
<el-table-column label="是否性控" align="center" width="80">
<template #default="scope">
{{ scope.row.sexCtl === 1 ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<el-tag :type="scope.row.status === '正常' ? 'primary'
: scope.row.status === '销售' ? 'success'
: scope.row.status === '自用' ? 'warning'
: 'danger'">
{{ scope.row.status }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="技术员" align="center" prop="tech" />
<el-table-column label="液氮罐ID" align="center" prop="tankId" />
<el-table-column label="提桶ID" align="center" prop="bucketId" />
<el-table-column label="冷冻架ID" align="center" prop="rackId" />
<el-table-column label="出库日期" align="center" prop="outDate" width="130px">
<template #default="scope">
<span>{{ parseTime(scope.row.outDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="废弃原因" align="center" prop="discardTxt" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="创建人" align="center" prop="createBy" />
<el-table-column label="创建时间" align="center" prop="createTime" width="160px">
<template #default="scope">
{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
<template #default="scope">
<!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
v-hasPermi="['frozen:embryo:edit']">修改</el-button> -->
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
v-hasPermi="['frozen:embryo: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-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
v-hasPermi="['frozen:embryo:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div style="flex-shrink: 0; padding: 10px 0;">
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="getList" />
</div>
<!-- 添加或修改冻胚库存对话框 -->
<el-dialog :title="title" v-model="open" width="900px" append-to-body>
<el-form ref="embryoRef" :model="form" :rules="rules" label-width="120px">
@@ -472,11 +477,11 @@ function handleDelete(row) {
/** 导出按钮操作 */
function handleExport() {
queryParams.value.ids = ids.value;
try {
proxy.download('frozen/embryo/export',
{...queryParams.value},
`冻胚记录${Date.now()}.xlsx`);
proxy.download('frozen/embryo/export',
{ ...queryParams.value },
`冻胚记录${Date.now()}.xlsx`);
} finally {
queryParams.value.ids = null;
}

View File

@@ -1,5 +1,6 @@
<template>
<div class="app-container">
<div class="app-container"
style="height: calc(100vh - 84px); display: flex; flex-direction: column; overflow: hidden;">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="冻精号" prop="code">
<el-input v-model="queryParams.code" placeholder="请输入冻精号/公羊耳号" clearable @keyup.enter="handleQuery"
@@ -52,62 +53,67 @@
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="spermList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="主键" align="center" prop="id" /> -->
<el-table-column label="冻精号" align="center" prop="code" width="130px" fixed="fixed" />
<el-table-column label="冻精日期" align="center" prop="freezeDt" width="130px">
<template #default="scope">
<span>{{ parseTime(scope.row.freezeDt, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="冻精品种" align="center" prop="breed" />
<el-table-column label="生产批次" align="center" prop="batch" width="130px" />
<el-table-column label="规格" align="center" prop="spec" />
<el-table-column label="数量" align="center" prop="qty" sortable />
<el-table-column label="是否性控" align="center">
<template #default="scope">
{{ scope.row.sexCtl === 1 ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="stat">
<template #default="scope">
<el-tag :type="scope.row.stat === '正常' ? 'primary'
: scope.row.stat === '销售' ? 'success'
: scope.row.stat === '自用' ? 'warning'
: 'danger'">
{{ scope.row.stat }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="技术员" align="center" prop="tech" />
<el-table-column label="液氮罐ID" align="center" prop="tankId" />
<el-table-column label="提桶ID" align="center" prop="bucketId" />
<el-table-column label="冷冻架ID" align="center" prop="rackId" />
<el-table-column label="出库日期" align="center" prop="outDt" width="130px">
<template #default="scope">
<span>{{ parseTime(scope.row.outDt, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="废弃原因" align="center" prop="discardTxt" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="创建人" align="center" prop="createBy" />
<el-table-column label="创建时间" align="center" prop="createTime" width="160px">
<template #default="scope">
{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
<template #default="scope">
<!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['sperm:sperm:edit']">修改</el-button> -->
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
v-hasPermi="['frozen:sperm:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="flex: 1; overflow: hidden;">
<el-table v-loading="loading" :data="spermList" @selection-change="handleSelectionChange" height="100%"
style="width: 100%">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="主键" align="center" prop="id" /> -->
<el-table-column label="冻精号" align="center" prop="code" width="130px" fixed="fixed" />
<el-table-column label="冻精日期" align="center" prop="freezeDt" width="130px">
<template #default="scope">
<span>{{ parseTime(scope.row.freezeDt, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="冻精品种" align="center" prop="breed" />
<el-table-column label="生产批次" align="center" prop="batch" width="130px" />
<el-table-column label="规格" align="center" prop="spec" />
<el-table-column label="数量" align="center" prop="qty" sortable />
<el-table-column label="是否性控" align="center">
<template #default="scope">
{{ scope.row.sexCtl === 1 ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="stat">
<template #default="scope">
<el-tag :type="scope.row.stat === '正常' ? 'primary'
: scope.row.stat === '销售' ? 'success'
: scope.row.stat === '自用' ? 'warning'
: 'danger'">
{{ scope.row.stat }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="技术员" align="center" prop="tech" />
<el-table-column label="液氮罐ID" align="center" prop="tankId" />
<el-table-column label="提桶ID" align="center" prop="bucketId" />
<el-table-column label="冷冻架ID" align="center" prop="rackId" />
<el-table-column label="出库日期" align="center" prop="outDt" width="130px">
<template #default="scope">
<span>{{ parseTime(scope.row.outDt, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="废弃原因" align="center" prop="discardTxt" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="创建人" align="center" prop="createBy" />
<el-table-column label="创建时间" align="center" prop="createTime" width="160px">
<template #default="scope">
{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
<template #default="scope">
<!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['sperm:sperm:edit']">修改</el-button> -->
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
v-hasPermi="['frozen:sperm:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="getList" />
<div style="flex-shrink: 0; padding: 10px 0;">
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="getList" />
</div>
<!-- 添加或修改冻精库存对话框 -->
<el-dialog :title="title" v-model="open" width="700px" append-to-body>
@@ -501,10 +507,10 @@ function handleDelete(row) {
/** 导出按钮操作 */
function handleExport() {
queryParams.value.ids = ids.value;
try {
proxy.download('sperm/sperm/export', {
...queryParams.value
proxy.download('sperm/sperm/export', {
...queryParams.value
}, `冻精记录${Date.now()}.xlsx`);
} finally {
queryParams.value.ids = null;