From 8ac7e0ca090ab5ce0f8435e8af6f78a23c0dd6e0 Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期一, 19 五月 2025 18:04:45 +0800
Subject: [PATCH] feat
---
culture/src/views/strain-library/main-cell-library/index.vue | 851 ++++++++++++++++++++++++++++---------------------------
1 files changed, 434 insertions(+), 417 deletions(-)
diff --git a/culture/src/views/strain-library/main-cell-library/index.vue b/culture/src/views/strain-library/main-cell-library/index.vue
index 991ed6b..4346e86 100644
--- a/culture/src/views/strain-library/main-cell-library/index.vue
+++ b/culture/src/views/strain-library/main-cell-library/index.vue
@@ -1,474 +1,491 @@
<template>
- <div class="list">
- <el-card class="header-box">
- <div class="box-title">
- <img src="@/assets/public/notice.png" class="header-icon">
- <span>菌种源保藏出/入主细胞库登记表说明</span>
- <el-button type="text" class="view-more" @click="handleViewMore">查看全部 >></el-button>
- </div>
- <div class="header-content" :class="{ 'collapsed': true }">
- <p>1、菌种全部集中登记在【菌种源保藏出/入主细胞库登记表】，请分类管理。</p>
- <p>1.1 接种入主细胞库（现代-M）的菌株经过培养和保藏。</p>
- <p>1.2 从原始细胞库转入的菌株需要按照标准程序进行记录和管理。</p>
- <p>1.3 主细胞库的菌株可用于科研项目和工业生产中的应用研究。</p>
- </div>
+ <div class="list">
+ <el-card class="header-box">
+ <div class="box-title">
+ <img src="@/assets/public/notice.png" class="header-icon" />
+ <span>菌种源保藏出/入细胞库登记表说明</span>
+ <el-button type="text" class="view-more" @click="handleViewMore"
+ >查看全部 >></el-button
+ >
+ </div>
+ <div class="header-content" :class="{ collapsed: true }">
+ <p>
+ 1. 菌种全部集中登记在【菌种源保藏出/入细胞库登记表】，菌种来源有 3
+ 条路径。1.1 是沙土管或甘油管的源头菌种；入原始细胞库（祖代-O）。1.2
+ 是斜面的源头菌种；接种入主细胞库（祖代-O）。经过育种、验证后，菌种保藏为甘油管或沙土管的，入原始细胞库（祖代-0）1.3
+ 是含菌物质自己分离后获得的斜面源头菌种，接种入主细胞库；经生产验证后，保藏为沙土管或甘油管，入原始细胞库（祖代-O）。
+ 2.
+ 菌种细胞库，分类入三库，进行传代运行管理。三类库存空间进行区分，保藏菌种。2.1
+ 原始细胞库（祖代-O）、2.2 主细胞库（母代-M）、2.3
+ 生产细胞库（子代-S）、（孙代-G）3. 细胞库编码规则3.1
+ 细胞库编码规则：DD-M-240919-01-（O-0109-01）DD：代表项目组。M：“O”代表祖代原始细胞库，”M“代表母代主细胞库，”S“代表子代生产细胞库，“G”代表孙代生产细胞库。240919：代表在
+ 24 年 9 月 19
+ 接种批次的菌种；或收到外来菌种时间的入库批次。01：代表两位序列号。（O-0109-01）：代表传代菌种的编号3.1.1
+ 传代编码方式演例：祖代：DD-O-240919-01
+ 传母代：DD-M-241017-01-（O-091901）DD-M-241017-02-（O-091901）DD-M-241017-03-（O-091901）子代：DD-S-241019-01-（M-1017-02）版权归奥利元生物所有，禁止外传。DD-S-241019-02-（M-1017-03）孙代：DD-G-241109-01-（S-1019-02）3.1.2
+ 编码规则实现了编码唯一，编码可溯源，编码直观、方便。3.2
+ 细胞库说明：3.2.1
+ 直接购买、自行从（土壤、相关物料、商品）等分离出来菌株进入原始细胞库。3.2.2
+ 从原始细胞库中选取出来再次纯化、改造、提高性能的菌株进入主细胞库。3.2.3
+ 主细胞库中选取出稳定，生产性能良好的菌株扩培后保种进入生产细胞库。4.
+ 菌种选育-保藏过程编号说明4.1 菌种选育时，培养皿的编号可使用 a-01、a-02
+ 等用于清晰形态观察记录；菌落编号使用序号 1/2/3等。4.2
+ 接种斜面菌种编码（-O）使用原始细胞库编码；斜面转菌种保藏使用与斜面一致的编码（-O）；斜面传代入主细胞库的传代菌种，按编码器规则编码（-M）。
+ </p>
+ </div>
- <!-- 查看全部弹窗 -->
- <el-dialog
- title="菌种源保藏出/入主细胞库登记表说明"
- :visible.sync="dialogVisible"
- width="50%"
- class="view-all-dialog"
+ <!-- 查看全部弹窗 -->
+ <el-dialog
+ title="菌种源保藏出/入细胞库登记表说明"
+ :visible.sync="dialogVisible"
+ width="50%"
+ class="view-all-dialog"
+ >
+ <div class="dialog-content">
+ <p>
+ 1. 菌种全部集中登记在【菌种源保藏出/入细胞库登记表】，菌种来源有 3
+ 条路径。1.1 是沙土管或甘油管的源头菌种；入原始细胞库（祖代-O）。1.2
+ 是斜面的源头菌种；接种入主细胞库（祖代-O）。经过育种、验证后，菌种保藏为甘油管或沙土管的，入原始细胞库（祖代-0）1.3
+ 是含菌物质自己分离后获得的斜面源头菌种，接种入主细胞库；经生产验证后，保藏为沙土管或甘油管，入原始细胞库（祖代-O）。2.
+ 菌种细胞库，分类入三库，进行传代运行管理。三类库存空间进行区分，保藏菌种。2.1
+ 原始细胞库（祖代-O）、2.2 主细胞库（母代-M）、2.3
+ 生产细胞库（子代-S）、（孙代-G）3. 细胞库编码规则3.1
+ 细胞库编码规则：DD-M-240919-01-（O-0109-01）DD：代表项目组。M：“O”代表祖代原始细胞库，”M“代表母代主细胞库，”S“代表子代生产细胞库，“G”代表孙代生产细胞库。240919：代表在
+ 24 年 9 月 19
+ 接种批次的菌种；或收到外来菌种时间的入库批次。01：代表两位序列号。（O-0109-01）：代表传代菌种的编号3.1.1
+ 传代编码方式演例：祖代：DD-O-240919-01
+ 传母代：DD-M-241017-01-（O-091901）DD-M-241017-02-（O-091901）DD-M-241017-03-（O-091901）子代：DD-S-241019-01-（M-1017-02）版权归奥利元生物所有，禁止外传。DD-S-241019-02-（M-1017-03）孙代：DD-G-241109-01-（S-1019-02）3.1.2
+ 编码规则实现了编码唯一，编码可溯源，编码直观、方便。3.2
+ 细胞库说明：3.2.1
+ 直接购买、自行从（土壤、相关物料、商品）等分离出来菌株进入原始细胞库。3.2.2
+ 从原始细胞库中选取出来再次纯化、改造、提高性能的菌株进入主细胞库。3.2.3
+ 主细胞库中选取出稳定，生产性能良好的菌株扩培后保种进入生产细胞库。4.
+ 菌种选育-保藏过程编号说明4.1 菌种选育时，培养皿的编号可使用
+ a-01、a-02 等用于清晰形态观察记录；菌落编号使用序号 1/2/3等。4.2
+ 接种斜面菌种编码（-O）使用原始细胞库编码；斜面转菌种保藏使用与斜面一致的编码（-O）；斜面传代入主细胞库的传代菌种，按编码器规则编码（-M）。
+ </p>
+ </div>
+ </el-dialog>
+ </el-card>
+
+ <!-- Table -->
+ <TableCustom
+ :queryForm="queryForm"
+ :tableData="tableData"
+ :total="total"
+ @currentChange="handleCurrentChange"
+ @sizeChange="handleSizeChange"
+ >
+ <template #search>
+ <el-form :model="form" label-width="auto" inline>
+ <el-form-item label="菌种编号：">
+ <el-input v-model="form.strainNo" placeholder="请输入"></el-input>
+ </el-form-item>
+ <el-form-item label="菌种名称：">
+ <el-input v-model="form.strainName" placeholder="请输入"></el-input>
+ </el-form-item>
+ <el-form-item v-if="roleType == 4" label="状态：">
+ <el-select v-model="form.status" placeholder="请选择">
+ <el-option label="全部" value=""></el-option>
+ <el-option label="已出库" value="1"></el-option>
+ <el-option label="出库待确认" value="2"></el-option>
+ <el-option label="已入库" value="3"></el-option>
+ <el-option label="入库待确认" value="4"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item class="search-btn-box">
+ <el-button type="default" @click="resetForm">重置</el-button>
+ <el-button type="primary" @click="searchData">查询</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="dialog-content">
- <p>1、菌种全部集中登记在【菌种源保藏出/入主细胞库登记表】，请分类管理。</p>
- <p>1.1 接种入主细胞库（现代-M）的菌株经过培养和保藏。</p>
- <p>1.2 从原始细胞库转入的菌株需要按照标准程序进行记录和管理。</p>
- <p>1.3 主细胞库的菌株可用于科研项目和工业生产中的应用研究。</p>
- <p>1.4 菌株转出时需要严格记录去向和用途，确保可追溯性。</p>
- <p>1.5 主细胞库的菌株保存应当遵循标准操作规程，确保活性和稳定性。</p>
- </div>
- </el-dialog>
- </el-card>
+ 主细胞列表
+ </div>
+ <div
+ class="drafts"
+ :class="{ active: currentType === 'draft' }"
+ @click="handleTypeChange('draft')"
+ >
+ 草稿箱
+ </div>
+ </div>
+ <div v-if="roleType == 4" class="flex a-center">
+ <el-button
+ @click="handleNewStrain"
+ class="el-icon-plus"
+ type="primary"
+ style="margin-right: 12px"
+ >新增主细胞</el-button
+ >
+ <el-button
+ @click="handleNewStrain"
+ class="el-icon-plus"
+ type="primary"
+ >批量新增</el-button
+ >
+ </div>
+ </div>
+ </template>
- <!-- Table -->
- <TableCustom :queryForm="queryForm" :tableData="tableData" :total="total" @currentChange="handleCurrentChange"
- @sizeChange="handleSizeChange">
- <template #search>
- <el-form :model="form" label-width="auto" inline>
- <el-form-item label="菌种编号：">
- <el-input v-model="form.strainNo" placeholder="请输入"></el-input>
- </el-form-item>
- <el-form-item label="菌种名称：">
- <el-input v-model="form.strainName" placeholder="请输入"></el-input>
- </el-form-item>
- <el-form-item label="状态：">
- <el-select v-model="form.status" placeholder="请选择">
- <el-option label="全部" value=""></el-option>
- <el-option label="已入库" value="1"></el-option>
- <el-option label="已出库" value="2"></el-option>
- <el-option label="入库待确认" value="3"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item class="search-btn-box">
- <el-button type="default" @click="resetForm">重置</el-button>
- <el-button type="primary" @click="searchData">查询</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>
- <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>
- </div>
- </div>
- </template>
-
- <template #table>
- <el-table-column prop="strainNo" label="菌种编号" />
- <el-table-column prop="strainName" label="菌种名称" />
- <el-table-column prop="source" label="菌种来源" />
- <el-table-column prop="method" label="鉴定方法" />
- <el-table-column prop="certificate" label="特征描述" />
- <el-table-column prop="storage" label="菌种保存方法" />
- <el-table-column prop="amount" label="保存位置" />
- <el-table-column prop="inventory" label="库存余量" />
- <el-table-column prop="notes" label="备注" />
- <el-table-column prop="status" label="当前状态">
- <template #default="{ row }">
- <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
- </template>
- </el-table-column>
- <el-table-column label="操作" width="200">
- <template #default="{ row }">
- <el-button type="text" @click="handleDetail(row)">详情</el-button>
- <el-button type="text" @click="handleEdit(row)">编辑</el-button>
- <el-button type="text" @click="handleRecord(row)">出入库记录</el-button>
- </template>
- </el-table-column>
- </template>
- </TableCustom>
- <StrainDetail
- :visible.sync="detailVisible"
- :detail="currentDetail"
- />
- </div>
+ <template #table>
+ <el-table-column prop="strainCode" label="菌种编号" />
+ <el-table-column prop="strainName" label="菌种名称" />
+ <el-table-column prop="strainSource" label="菌种来源" />
+ <el-table-column prop="appraisalMethod" label="鉴定方法" />
+ <el-table-column prop="features" label="特征描述" />
+ <el-table-column prop="saveMethod" label="菌种保存方法" />
+ <el-table-column prop="saveLocation" label="保藏位置" />
+ <el-table-column prop="stock" label="库存余量" />
+ <el-table-column prop="remark" label="备注" />
+ <el-table-column
+ v-if="currentType === 'list'"
+ prop="status"
+ label="当前状态"
+ >
+ <template #default="{ row }">
+ <el-tag :type="getStatusType(row.status)">{{
+ getStatusText(row.status)
+ }}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="操作" width="200">
+ <template #default="{ row }">
+ <el-button type="text" @click="handleDetail(row)">详情</el-button>
+ <el-button v-if="row.status == 2 || row.status == 4" type="text" @click="handleEdit(row)">编辑</el-button>
+ <el-button
+ v-if="currentType === 'list'"
+ type="text"
+ @click="handleRecord(row)"
+ >出入库记录</el-button
+ >
+ <el-button v-if="roleType == 1" type="text" @click="handleDelete(row)">删除</el-button>
+ </template>
+ </el-table-column>
+ </template>
+ </TableCustom>
+ <StrainDetail :visible.sync="detailVisible" :detail="currentDetail" />
+ </div>
</template>
<script>
-import StrainDetail from '../strain-library-manage/components/StrainDetail.vue'
+import StrainDetail from "../strain-library-manage/components/StrainDetail.vue";
+import { getList, deleteStrainLibrary } from "../strain-library-manage/service";
export default {
- name: 'MainCellLibrary',
- components: {
- StrainDetail
+ name: "StrainLibraryManage",
+ components: {
+ StrainDetail,
+ },
+ data() {
+ return {
+ dialogVisible: false,
+ currentType: "list",
+ detailVisible: false,
+ currentDetail: {},
+ form: {
+ strainNo: "",
+ strainName: "",
+ status: "",
+ },
+ queryForm: {
+ pageSize: 10,
+ pageNum: 1,
+ },
+ total: 800,
+ tableData: [],
+ roleType: "",
+ };
+ },
+ activated() {
+ this.searchData();
+ // 角色类型 1=超级管理员 2=审批人 3=工程师 4=实验员
+ this.roleType = JSON.parse(sessionStorage.getItem("userInfo")).roleType;
+ },
+ methods: {
+ handleDelete(row) {
+ this.$confirm("确定删除该数据吗？", "提示", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning",
+ }).then(() => {
+ deleteStrainLibrary({ id: row.id }).then((res) => {
+ this.$message.success("删除成功");
+ this.searchData();
+ });
+ });
},
- data() {
- return {
- dialogVisible: false,
- currentType: 'list',
- detailVisible: false,
- currentDetail: {},
- form: {
- strainNo: '',
- strainName: '',
- status: ''
- },
- queryForm: {
- pageSize: 10,
- pageNum: 1
- },
- total: 800,
- tableData: [
- {
- strainNo: 'M-2024001',
- strainName: '大肠杆菌BL21',
- source: '原始细胞库',
- method: '分子生物学鉴定',
- certificate: '常用表达宿主菌，含有DE3溶源体，适合蛋白表达',
- storage: '甘油冷冻',
- amount: 'M区-01-001',
- inventory: '100',
- notes: '高效表达宿主',
- status: '1'
- },
- {
- strainNo: 'M-2024002',
- strainName: '乳酸菌L.plantarum',
- source: '菌种保藏中心',
- method: '16S rDNA测序',
- certificate: '革兰氏阳性杆菌，产乳酸，益生特性',
- storage: '冷冻保存',
- amount: 'M区-02-005',
- inventory: '80',
- notes: '发酵剂开发',
- status: '1'
- },
- {
- strainNo: 'M-2024003',
- strainName: '酵母S.cerevisiae',
- source: '原始细胞库',
- method: '生理生化鉴定',
- certificate: '椭圆形单细胞真菌，高效发酵能力',
- storage: '斜面培养',
- amount: 'M区-03-002',
- inventory: '60',
- notes: '酒精发酵',
- status: '2'
- },
- {
- strainNo: 'M-2024004',
- strainName: '枯草芽孢杆菌',
- source: '环境样本分离',
- method: '形态学观察和生化鉴定',
- certificate: '革兰氏阳性芽孢杆菌，可产多种酶类',
- storage: '冻干保存',
- amount: 'M区-01-003',
- inventory: '90',
- notes: '工业酶生产',
- status: '3'
- },
- {
- strainNo: 'M-2024005',
- strainName: '链霉菌S.griseus',
- source: '原始细胞库',
- method: 'PCR鉴定',
- certificate: '丝状菌，产生灰色气生菌丝和分生孢子',
- storage: '液氮保存',
- amount: 'M区-04-001',
- inventory: '70',
- notes: '抗生素研究',
- status: '1'
- }
- ]
- }
+ handleRecord(row) {
+ this.$router.push({
+ path: `/strain-library/strain-library-manage/record?id=${row.id}`,
+ });
},
- methods: {
- handleViewMore() {
- this.dialogVisible = true;
- },
- resetForm() {
- this.form = {
- strainNo: '',
- strainName: '',
- status: ''
- }
- this.searchData()
- },
- searchData() {
- // 模拟搜索逻辑
- const { strainNo, strainName, status } = this.form
- let filteredData = [...this.tableData]
-
- if (strainNo) {
- filteredData = filteredData.filter(item =>
- item.strainNo.toLowerCase().includes(strainNo.toLowerCase())
- )
- }
- if (strainName) {
- filteredData = filteredData.filter(item =>
- item.strainName.toLowerCase().includes(strainName.toLowerCase())
- )
- }
- if (status) {
- filteredData = filteredData.filter(item =>
- item.status === status
- )
- }
-
- this.total = filteredData.length
- // 实际项目中这里应该调用API
- console.log('搜索条件:', this.form)
- console.log('分页信息:', this.queryForm)
- },
- handleNewStrain() {
- this.$router.push('/strain-library/main-cell-library/add')
- // Implement new strain logic
- },
- handleBatchAdd() {
- // Implement batch add logic
- },
- handleDetail(row) {
- this.currentDetail = row;
- this.detailVisible = true;
- },
- handleEdit(row) {
- // Implement edit logic
- },
- handleRecord(row) {
- this.$router.push({
- path: '/strain-library/strain-library-manage/record',
- query: {
- id: row.strainNo
- }
- })
- },
- handleCurrentChange(page) {
- this.queryForm.pageNum = page
- // Implement page change logic
- },
- handleSizeChange(size) {
- this.queryForm.pageSize = size
- // Implement size change logic
- },
- handleTypeChange(type) {
- this.currentType = type;
- // Implement type change logic
- },
- getStatusType(status) {
- const types = {
- 1: 'success',
- 2: 'info',
- 3: 'warning'
- }
- return types[status] || 'info'
- },
- getStatusText(status) {
- const texts = {
- 1: '已入库',
- 2: '已出库',
- 3: '入库待确认'
- }
- return texts[status] || '未知状态'
- }
- }
-}
+ handleNewStrain() {
+ this.$router.push({ path: "/strain-library/main-cell-library/add" });
+ },
+ handleEdit(row) {
+ this.$router.push({
+ path: `/strain-library/main-cell-library/add?id=${row.id}`,
+ });
+ },
+ handleDetail(row) {
+ this.currentDetail = row;
+ this.detailVisible = true;
+ },
+ handleViewMore() {
+ this.dialogVisible = true;
+ },
+ resetForm() {
+ this.form = {
+ strainNo: "",
+ strainName: "",
+ status: "",
+ };
+ this.searchData();
+ },
+ searchData() {
+ const params = {
+ pageNum: this.queryForm.pageNum,
+ pageSize: this.queryForm.pageSize,
+ strainCode: this.form.strainNo,
+ strainName: this.form.strainName,
+ isDraft: this.currentType === "draft" ? 1 : 0,
+ status: this.form.status,
+ type: 2,
+ };
+ console.log(params);
+
+ getList(params)
+ .then((res) => {
+ if (res.code === 200) {
+ this.tableData = res.data.records;
+ this.total = res.data.total;
+ }
+ })
+ .catch((err) => {
+ this.$message.error("数据加载失败");
+ });
+ },
+ handleCurrentChange(page) {
+ this.queryForm.pageNum = page;
+ this.searchData();
+ },
+ handleSizeChange(size) {
+ this.queryForm.pageSize = size;
+ this.searchData();
+ },
+ handleTypeChange(type) {
+ this.currentType = type;
+ this.searchData();
+ },
+ getStatusType(status) {
+ const types = {
+ 1: "warning",
+ 2: "warning",
+ 3: "success",
+ 4: "success",
+ };
+ return types[status] || "info";
+ },
+ getStatusText(status) {
+ const texts = {
+ 1: "已出库",
+ 2: "出库待确认",
+ 3: "已入库",
+ 4: "入库待确认",
+ };
+ return texts[status] || "未知状态";
+ },
+ },
+};
</script>
<style scoped lang="less">
.list {
- padding: 20px;
+ padding: 20px;
}
.header-box {
- margin-bottom: 20px;
- border-radius: 16px;
- background: rgba(255, 255, 255, 0.8);
+ margin-bottom: 20px;
+ border-radius: 16px;
+ background: rgba(255, 255, 255, 0.8);
- .box-title {
- display: flex;
- align-items: center;
- font-size: 18px;
- font-weight: bold;
- margin-bottom: 15px;
- position: relative;
+ .box-title {
+ display: flex;
+ align-items: center;
+ font-size: 18px;
+ font-weight: bold;
+ margin-bottom: 15px;
+ position: relative;
- .header-icon {
- width: 20px;
- height: 20px;
- margin-right: 10px;
- }
-
- .view-more {
- position: absolute;
- right: 0;
- color: #049C9A;
- }
+ .header-icon {
+ width: 20px;
+ height: 20px;
+ margin-right: 10px;
}
- .header-content {
- color: rgba(0, 0, 0, 0.88);
- font-size: 14px;
- line-height: 1.8;
- margin-left: 30px;
- transition: max-height 0.3s ease-in-out;
- overflow: hidden;
-
- &.collapsed {
- max-height: 48px;
- overflow: hidden;
- }
-
- p {
- margin: 5px 0;
- }
+ .view-more {
+ position: absolute;
+ right: 0;
+ color: #049c9a;
}
+ }
+
+ .header-content {
+ color: rgba(0, 0, 0, 0.88);
+ font-size: 14px;
+ line-height: 1.8;
+ margin-left: 30px;
+ transition: max-height 0.3s ease-in-out;
+ overflow: hidden;
+
+ &.collapsed {
+ max-height: 48px;
+ overflow: hidden;
+ }
+
+ p {
+ margin: 5px 0;
+ }
+ }
}
.search-form {
- margin-bottom: 20px;
- background: #F5F7FA;
- padding: 24px;
- border-radius: 8px;
+ margin-bottom: 20px;
+ background: #f5f7fa;
+ padding: 24px;
+ border-radius: 8px;
- .el-form-item {
- margin-right: 20px;
- margin-bottom: 0;
- }
+ .el-form-item {
+ margin-right: 20px;
+ margin-bottom: 0;
+ }
- .el-button {
- margin-left: 10px;
- }
+ .el-button {
+ margin-left: 10px;
+ }
}
.action-buttons {
- margin-bottom: 20px;
+ margin-bottom: 20px;
- .el-button {
- margin-right: 10px;
- }
+ .el-button {
+ margin-right: 10px;
+ }
}
.tab-container {
- display: flex;
- margin-bottom: 20px;
+ display: flex;
+ margin-bottom: 20px;
- .tab {
- padding: 10px 30px;
- border: 1px solid #DCDFE6;
- border-bottom: none;
- border-radius: 8px 8px 0 0;
- cursor: pointer;
- margin-right: 10px;
- background: #F5F7FA;
+ .tab {
+ padding: 10px 30px;
+ border: 1px solid #dcdfe6;
+ border-bottom: none;
+ border-radius: 8px 8px 0 0;
+ cursor: pointer;
+ margin-right: 10px;
+ background: #f5f7fa;
- &.active {
- background: #fff;
- border-color: #049C9A;
- color: #049C9A;
- font-weight: bold;
- }
+ &.active {
+ background: #fff;
+ border-color: #049c9a;
+ color: #049c9a;
+ font-weight: bold;
}
+ }
}
.flex {
- display: flex;
- align-items: center;
-}
-
-.a-center {
- align-items: center;
+ display: flex;
+ align-items: center;
}
.tableTitle {
- display: flex;
- padding-bottom: 20px;
- justify-content: space-between;
- align-items: center;
+ display: flex;
+ padding-bottom: 20px;
+ justify-content: space-between;
+ align-items: center;
- .title {
- background: #fafafc;
- border-radius: 8px 8px 0px 0px;
- border: 1px solid #dcdfe6;
- font-weight: bold;
- font-size: 18px;
- color: #606266;
- width: unset;
- cursor: pointer;
- height: 50px;
- line-height: 50px;
- width: 166px;
- text-align: center;
+ .title {
+ background: #fafafc;
+ border-radius: 8px 8px 0px 0px;
+ border: 1px solid #dcdfe6;
+ font-weight: bold;
+ font-size: 18px;
+ color: #606266;
+ width: unset;
+ cursor: pointer;
+ height: 50px;
+ line-height: 50px;
+ width: 166px;
+ text-align: center;
+ }
- }
+ .drafts {
+ background: #fafafc;
+ border-radius: 8px 8px 0px 0px;
+ border: 1px solid #dcdfe6;
+ font-weight: 400;
+ font-size: 18px;
+ color: #606266;
+ margin-left: 16px;
+ cursor: pointer;
+ height: 50px;
+ line-height: 50px;
+ width: 166px;
+ text-align: center;
+ }
- .drafts {
- background: #fafafc;
- border-radius: 8px 8px 0px 0px;
- border: 1px solid #dcdfe6;
- font-weight: 400;
- font-size: 18px;
- color: #606266;
- margin-left: 16px;
- cursor: pointer;
- height: 50px;
- line-height: 50px;
- width: 166px;
- text-align: center;
- }
-
- .active {
- color: #049c9a;
- background: #ffffff;
- border-radius: 8px 8px 0px 0px;
- border: 1px solid #049c9a;
-
- }
+ .active {
+ color: #049c9a;
+ background: #ffffff;
+ border-radius: 8px 8px 0px 0px;
+ border: 1px solid #049c9a;
+ }
}
.view-all-dialog {
- :deep(.el-dialog__header) {
- padding: 20px;
- border-bottom: 1px solid #EBEEF5;
- margin-right: 0;
-
- .el-dialog__title {
- font-size: 18px;
- font-weight: bold;
- color: #303133;
- }
+ :deep(.el-dialog__header) {
+ padding: 20px;
+ border-bottom: 1px solid #ebeef5;
+ margin-right: 0;
+
+ .el-dialog__title {
+ font-size: 18px;
+ font-weight: bold;
+ color: #303133;
}
+ }
- :deep(.el-dialog__body) {
- padding: 20px;
+ :deep(.el-dialog__body) {
+ padding: 20px;
- .dialog-content {
- font-size: 14px;
- line-height: 1.8;
- color: #606266;
+ .dialog-content {
+ font-size: 14px;
+ line-height: 1.8;
+ color: #606266;
- p {
- margin: 12px 0;
-
- &:first-child {
- margin-top: 0;
- }
-
- &:last-child {
- margin-bottom: 0;
- }
- }
+ p {
+ margin: 12px 0;
+
+ &:first-child {
+ margin-top: 0;
}
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
}
+ }
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.7.1