| | |
| | | <template #search> |
| | | <el-form :model="form" labelWidth="auto" inline> |
| | | <el-form-item label="菌种编号:"> |
| | | <el-input v-model="form.planName" placeholder="请输入"></el-input> |
| | | <el-input v-model="form.strainCode" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="菌种名称:"> |
| | | <el-input v-model="form.planCode" placeholder="请输入"></el-input> |
| | | <el-input v-model="form.strainName" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="起传类型"> |
| | | <el-input v-model="form.creator" placeholder="请输入"></el-input> |
| | | <el-select v-model="form.generationType" placeholder="请选择"> |
| | | <el-option label="母代" :value="1"></el-option> |
| | | <el-option label="祖代" :value="2"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label=""> |
| | | <el-button type="default" @click="resetForm">重置</el-button> |
| | | <el-button type="primary" @click="handleSearch">查询</el-button> |
| | | <el-button style="margin-left: 10px;" type="primary" @click="handleSearch">查询</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </template> |
| | | <template #setting> |
| | | <div class="tableTitle"> |
| | | <div class="flex a-center"> |
| | | <div |
| | | class="title" |
| | | :class="{ active: currentType === 'list' }" |
| | | @click="handleTypeChange('list')" |
| | | > |
| | | <div class="title" :class="{ active: currentType === 'list' }" @click="handleTypeChange('list')"> |
| | | 菌种选育保藏记录列表 |
| | | </div> |
| | | <div |
| | | class="drafts" |
| | | :class="{ active: currentType === 'draft' }" |
| | | @click="handleTypeChange('draft')" |
| | | > |
| | | <div class="drafts" :class="{ active: currentType === 'draft' }" @click="handleTypeChange('draft')"> |
| | | 草稿箱 |
| | | </div> |
| | | </div> |
| | | <div class="flex a-center"> |
| | | <el-button |
| | | @click="handleNewStrain" |
| | | class="el-icon-plus" |
| | | type="primary" |
| | | style="margin-right: 12px" |
| | | >新增祖代起传</el-button |
| | | > |
| | | <el-button |
| | | @click="handleBatchAdd" |
| | | class="el-icon-plus" |
| | | type="primary" |
| | | >新增母代起传</el-button |
| | | > |
| | | <el-button @click="handleNewStrain" class="el-icon-plus" type="primary" |
| | | style="margin-right: 12px">新增祖代起传</el-button> |
| | | <el-button @click="handleBatchAdd" class="el-icon-plus" type="primary">新增母代起传</el-button> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <template #table> |
| | | <el-table-column |
| | | prop="planCode" |
| | | label="项目课题方案编号" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | prop="planName" |
| | | label="项目课题方案名称" |
| | | ></el-table-column> |
| | | <el-table-column prop="planCode" label="项目课题方案编号"></el-table-column> |
| | | <el-table-column prop="planName" label="项目课题方案名称"></el-table-column> |
| | | <el-table-column prop="stage" label="起传类型"></el-table-column> |
| | | <el-table-column prop="creator" label="菌种源"></el-table-column> |
| | | <el-table-column prop="createTime" label="菌种编号"></el-table-column> |
| | |
| | | <el-table-column prop="approver" label="创建人"></el-table-column> |
| | | <el-table-column label="操作" width="250"> |
| | | <template slot-scope="scope"> |
| | | <el-button type="text" @click="handleDetail(scope.row)" |
| | | >详情</el-button |
| | | > |
| | | <el-button type="text" @click="handleEdit(scope.row)" |
| | | >编辑</el-button |
| | | > |
| | | <el-button type="text" @click="handleDelete(scope.row)" |
| | | >删除</el-button |
| | | > |
| | | <el-button type="text" @click="handleDetail(scope.row)">详情</el-button> |
| | | <!-- 菌种超级管理员 --> |
| | | <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button> |
| | | <!-- 菌种超级管理员 --> |
| | | <el-button type="text" @click="handleDelete(scope.row)">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </template> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { getList } from "./service"; |
| | | export default { |
| | | name: "PedigreeChart", |
| | | components: {}, |
| | |
| | | return { |
| | | currentType: "list", // 当前显示类型:list-列表,draft-草稿箱 |
| | | form: { |
| | | planName: "", |
| | | planCode: "", |
| | | creator: "", |
| | | createTime: [], |
| | | approver: "", |
| | | status: "", |
| | | strainCode: "", |
| | | strainName: "", |
| | | generationType: "", |
| | | pageNum: 1, |
| | | pageSize: 10 |
| | | }, |
| | | tableData: [], |
| | | total: 0, |
| | |
| | | this.getTableData(); |
| | | }, |
| | | methods: { |
| | | handleBatchAdd() { |
| | | this.$router.push({ |
| | | path: "/strain/add-pedigree", |
| | | }); |
| | | }, |
| | | resetForm() { |
| | | this.form = { |
| | | planName: "", |
| | | planCode: "", |
| | | creator: "", |
| | | createTime: [], |
| | | approver: "", |
| | | status: "", |
| | | strainCode: "", |
| | | strainName: "", |
| | | generationType: "", |
| | | pageNum: 1, |
| | | pageSize: 10 |
| | | }; |
| | | }, |
| | | handleNewStrain() { |
| | | this.$router.push({ |
| | | path: "/strain/add-progenitor", |
| | | }); |
| | | }, |
| | | handleSearch() { |
| | | // 实现查询逻辑 |
| | | console.log("查询条件:", this.form); |
| | | this.form.pageNum = 1; |
| | | this.getTableData(); |
| | | }, |
| | | getStatusType(status) { |
| | | const statusMap = { |
| | |
| | | this.getTableData(); |
| | | }, |
| | | getTableData() { |
| | | // 根据currentType请求不同的数据 |
| | | if (this.currentType === "list") { |
| | | this.tableData = this.mockListData; |
| | | this.total = this.mockListData.length; |
| | | } else { |
| | | this.tableData = this.mockDraftData; |
| | | this.total = this.mockDraftData.length; |
| | | } |
| | | getList(this.form).then(res => { |
| | | if (res.code === 200) { |
| | | this.tableData = res.data.list; |
| | | this.total = res.data.total; |
| | | } |
| | | }); |
| | | }, |
| | | }, |
| | | }; |
| | |
| | | .list { |
| | | height: 100%; |
| | | } |
| | | |
| | | .flex { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .tableTitle { |
| | | display: flex; |
| | | padding-bottom: 20px; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | |
| | | .title { |
| | | background: #fafafc; |
| | | border-radius: 8px 8px 0px 0px; |
| | |
| | | width: unset; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .drafts { |
| | | padding: 16px 65px; |
| | | background: #fafafc; |
| | |
| | | margin-left: 16px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .active { |
| | | color: #049c9a; |
| | | background: #ffffff; |