样品管理大模块85%

董国庆

2 天以前 b4ac09eb2e493aab92557628e0436189337e2939

 laboratory/src/views/dataManagement/sampleManage/list.vue

@@ -1,16 +1,13 @@
<template>
  <div class="list">
    <TableCustom :queryForm="form" :tableData="tableData" :total="total">
    <TableCustom :queryForm="form" :height="null" :tableData="tableData" :total="total" @handlePageChange="handlePageChange" @handleSizeChange="handleSizeChange" >
      <template #search>
        <el-form :model="form" labelWidth="auto" inline>
          <el-form-item label="实验编号：">
            <el-input v-model="form.experimentCode" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="实验名称：">
            <el-input v-model="form.experimentName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="所属项目课题方案：">
            <el-input v-model="form.projectName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="实验编号：">
            <el-input v-model="form.experimentCode" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="创建时间：">
            <el-date-picker
@@ -24,6 +21,7 @@
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="form.status" placeholder="请选择">
              <el-option label="全部" :value="null"></el-option>
              <el-option label="草稿箱" :value="-1"></el-option>
              <el-option label="已发送待提交" :value="1"></el-option>
              <el-option label="已提交" :value="2"></el-option>
@@ -32,7 +30,7 @@
          </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 type="primary" @click="handleSearch" style="margin-left: 10px;">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
@@ -40,17 +38,18 @@
        <div class="tableTitle">
          <div class="flex a-center">
            <div 
            class="title"
              :class="{active:currentType === 'list'}"
              class="title"
              :class="{active:currentType == 'list'}"
              @click="handleTypeChange('list')"
            >取样操作记录列表</div>
            <div 
            class="drafts"
              :class="{active:currentType === 'draft'}"
              v-if="isProcessEngineer"
              class="title"
              :class="{active:currentType == 'draft'}"
              @click="handleTypeChange('draft')"
            >草稿箱</div>
          </div>
          <el-button @click="handleAddSample" class="el-icon-plus" type="primary">
          <el-button v-if="isProcessEngineer" @click="handleAddSample" class="el-icon-plus" type="primary">
            新增取样操作记录</el-button
          >
        </div>
@@ -62,36 +61,45 @@
          :prop="column.prop"
          :label="column.label"
        ></el-table-column>
        <el-table-column label="操作" width="100">
        <el-table-column label="样品总数/待接收/已接收" v-if="isChemist">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDetail(scope.row.id)">详情</el-button>
            {{ getSampleStatus(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button v-if="currentType == 'list'" type="text" @click="handleDetail(scope.row.id)">详情</el-button>
            <template v-if="currentType == 'draft'">
              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C;">删除</el-button>
            </template>
          </template>
        </el-table-column>
      </template>
    </TableCustom>
    <!-- 审批弹窗 -->
    <approval-dialog
      :visible.sync="approvalDialogVisible"
      :type="approvalDialogType"
      :data="currentApprovalData"
      @approve="handleApproveSubmit"
      @reject="handleRejectSubmit"
    <!-- 删除确认弹窗 -->
    <ShowDelConfirm 
      :title="changeStatusTitle" 
      :tip="changeStatusTip" 
      :show="changeStatus"
      @close="changeStatus = false" 
      @confirm="handleChangeStatusConfirm" 
    />
  </div>
</template>

<script>
import ApprovalDialog from './components/approvalDialog.vue'
import { getList } from './service'
import ShowDelConfirm from "@/components/showDelConfirm/index.vue";
import { getList, deleteById } from './service'

export default {
  name: "ProjectList",
  components: {
    ApprovalDialog
    ShowDelConfirm
  },
  data() {
    return {
      userRole: 'chemist', // 用户角色
      userRole: '', // 用户角色
      currentType: 'list', // 当前显示类型：list-列表，draft-草稿箱
      form: {
        experimentCode: "",
@@ -104,110 +112,35 @@
      },
      tableData: [],
      total: 0,
      // 确认弹窗相关数据
      changeStatus: false,
      changeStatusTitle: "",
      changeStatusTip: "",
      currentOperationRow: null, // 当前操作的行数据
      // 不同角色的表头配置
      columnConfig: {
        default: [
          { prop: 'projectPlan', label: '所属项目课题方案' },
          { prop: 'experimentNo', label: '实验编号' },
          { prop: 'projectName', label: '所属项目课题方案' },
          { prop: 'experimentCode', label: '实验编号' },
          { prop: 'experimentName', label: '实验名称' },
          { prop: 'sampleNo', label: '取样单编号' },
          { prop: 'creator', label: '创建人' },
          { prop: 'samplingCode', label: '取样单编号' },
          { prop: 'createBy', label: '创建人' },
          { prop: 'createTime', label: '创建时间' },
          { prop: 'sendTo', label: '发送对象' },
          { prop: 'sendTime', label: '发送时间' }
        ],
        chemist: [
          { prop: 'projectPlan', label: '所属项目课题方案' },
          { prop: 'experimentNo', label: '实验编号' },
        '4': [
          { prop: 'projectName', label: '所属项目课题方案' },
          { prop: 'experimentCode', label: '实验编号' },
          { prop: 'experimentName', label: '实验名称' },
          { prop: 'sampleNo', label: '取样单编号' },
          { prop: 'creator', label: '创建人' },
          { prop: 'samplingCode', label: '取样单编号' },
          { prop: 'createBy', label: '创建人' },
          { prop: 'createTime', label: '创建时间' },
          { prop: 'sampleCount', label: '样品总数' },
          { prop: 'receivedCount', label: '待接收' },
          { prop: 'completedCount', label: '已接收' }
          // { prop: 'sampleCount', label: '样品总数' },
          // { prop: 'receivedCount', label: '待接收' },
          // { prop: 'completedCount', label: '已接收' }
        ]
      },
      // 模拟数据
      mockListData: [
        {
          id: '1',
          projectPlan: '2024年度实验室设备性能评估方案',
          experimentNo: 'EXP20240315001',
          experimentName: '设备性能测试实验A',
          sampleNo: 'SAMPLE20240315001',
          creator: '张三',
          createTime: '2024-03-15 09:30:00',
          sendTo: '质检部门',
          sendTime: '2024-03-15 10:00:00',
          sampleCount: 5,
          receivedCount: 2,
          completedCount: 3
        },
        {
          id: '2',
          projectPlan: '新型材料研究项目方案',
          experimentNo: 'EXP20240315002',
          experimentName: '材料强度测试实验',
          sampleNo: 'SAMPLE20240315002',
          creator: '李四',
          createTime: '2024-03-15 11:30:00',
          sendTo: '研发部门',
          sendTime: '2024-03-15 14:00:00',
          sampleCount: 3,
          receivedCount: 1,
          completedCount: 2
        },
        {
          id: '3',
          projectPlan: '环境监测系统优化方案',
          experimentNo: 'EXP20240315003',
          experimentName: '空气质量检测实验',
          sampleNo: 'SAMPLE20240315003',
          creator: '王五',
          createTime: '2024-03-15 15:30:00',
          sendTo: '环境监测组',
          sendTime: '2024-03-15 16:00:00'
        },
        {
          id: '4',
          projectPlan: '生物样本分析项目',
          experimentNo: 'EXP20240315004',
          experimentName: '细胞活性测试',
          sampleNo: 'SAMPLE20240315004',
          creator: '赵六',
          createTime: '2024-03-15 16:30:00',
          sendTo: '生物实验室',
          sendTime: '2024-03-15 17:00:00'
        }
      ],
      mockDraftData: [
        {
          id: '5',
          projectPlan: '化学反应监测方案',
          experimentNo: 'EXP20240316001',
          experimentName: '催化剂效率测试',
          sampleNo: 'SAMPLE20240316001',
          creator: '孙七',
          createTime: '2024-03-16 09:30:00',
          sendTo: '化学实验室',
          sendTime: '2024-03-16 10:00:00'
        },
        {
          id: '6',
          projectPlan: '药物稳定性研究方案',
          experimentNo: 'EXP20240316002',
          experimentName: '药物降解测试',
          sampleNo: 'SAMPLE20240316002',
          creator: '周八',
          createTime: '2024-03-16 11:30:00',
          sendTo: '药物研究部',
          sendTime: '2024-03-16 14:00:00'
        }
      ],
      approvalDialogVisible: false,
      approvalDialogType: 'approve',
      currentApprovalData: null,
      }
    };
  },
  computed: {
@@ -217,7 +150,11 @@
    },
    // 判断是否为化验师角色
    isChemist() {
      return this.userRole === 'chemist';
      return this.userRole == '4';
    },
    // 判断是否为工艺工程师角色
    isProcessEngineer() {
      return this.userRole == '3'; // 假设工艺工程师的角色代码为2
    }
  },
  created() {
@@ -225,11 +162,17 @@
    this.getTableData();
  },
  methods: {
    getSampleStatus(row) {
      const send = row.sendCount || 0;
      const receive = row.receiveCount || 0;
      const received = row.receivedCount || 0;
      const total = send + receive + received;
      return `${total} / ${receive} / ${received}`;
    },
    // 获取用户角色
    async getUserRole() {
      // TODO: 从用户信息或接口中获取角色
      // 示例：this.userRole = await getUserRole();
      this.userRole = 'chemist'; // 临时写死，实际应该从接口获取
    getUserRole() {
      const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
      this.userRole = userInfo.roleType || '';
    },
    resetForm() {
      this.form = {
@@ -250,79 +193,44 @@
        projectName: this.form.projectName,
        startTime: this.form.createTime[0] || null,
        endTime: this.form.createTime[1] || null,
        status: this.form.status,
        status: this.currentType == 'draft' ? -1 : this.form.status,
        pageNum: this.form.pageNum,
        pageSize: this.form.pageSize
      };
      try {
        const res = await getList(params)
        this.tableData = res.records || [];
        this.total = res.total || 0;
        this.tableData = res.data.records || [];
        this.total = res.data.total || 0;
      } catch (error) {
        console.error("查询失败：", error);
      }
    },
    getStatusType(status) {
      const statusMap = {
        pending: "warning",
        rejected: "danger",
        approved: "success",
        archived: "info",
        draft: "info"
      };
      return statusMap[status] || "info";
    },
    getStatusText(status) {
      const statusMap = {
        pending: "待审批",
        rejected: "已驳回",
        approved: "已通过",
        archived: "已封存",
        draft: "草稿"
      };
      return statusMap[status] || "未知";
    },
    handleAddSample() {
      this.$router.push({
        path: "/sampleManage/addSample",
      });
    },
    handleApprove(row) {
      this.currentApprovalData = row;
      this.approvalDialogType = 'approve';
      this.approvalDialogVisible = true;
    },
    handleApproveSubmit(data) {
      // 处理审批通过
      console.log('审批通过：', data);
      this.approvalDialogVisible = false;
      this.$message.success('审批通过成功');
      this.getTableData();
    },
    handleRejectSubmit(data) {
      // 处理审批驳回
      console.log('审批驳回：', data);
      this.approvalDialogVisible = false;
      this.$message.success('审批驳回成功');
      this.getTableData();
    },
    handleRevokeApprove(row) {
      // 实现撤销审批逻辑
      console.log("撤销审批数据：", row);
    },
    handleEdit(row) {
      // 实现编辑逻辑
      console.log("编辑数据：", row);
      this.$router.push({
        path: "/sampleManage/addSample",
        query: {
          id: row.id,
          type: 'edit'
        }
      });
    },
    handleDelete(row) {
      // 实现删除逻辑
      console.log("删除数据：", row);
      this.currentOperationRow = row;
      this.changeStatusTitle = "确认要删除这条信息吗？";
      this.changeStatusTip = "删除后信息无法找回";
      this.changeStatus = true;
    },
    handleDetail(id) {
      this.$router.push({
        path: "/sampleManage/addSample",
        query: {
          id: id
          id: id,
          type: 'detail'
        }
      });
    },
@@ -332,6 +240,26 @@
    },
    getTableData() {
      this.handleSearch();
    },
    handlePageChange(pageNum) {
      this.form.pageNum = pageNum;
      this.getTableData();
    },
    handleSizeChange(pageSize) {
      this.form.pageSize = pageSize;
      this.getTableData();
    },
    handleChangeStatusConfirm() {
      // 处理删除逻辑
      deleteById({
        id: this.currentOperationRow.id
      }).then(() => {
        this.$message.success("删除成功");
        this.changeStatus = false;
        this.getTableData();
      }).catch(error => {
        this.$message.error("删除失败");
      });
    },
  },
};
@@ -355,28 +283,22 @@
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #dcdfe6;
    padding: 16px 29px;
    font-weight: bold;
    font-weight: 400;
    font-size: 18px;
    color: #606266;
    width: unset;
    cursor: pointer;
  }
  .drafts {
    padding: 16px 65px;
    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;
  }
  .active{
    color: #049c9a;
    background: #ffffff;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049c9a;
    margin-right: 16px;
    &:last-child {
      margin-right: 0;
    }
    &.active {
      color: #049c9a;
      background: #ffffff;
      border-radius: 8px 8px 0px 0px;
      border: 1px solid #049c9a;
      font-weight: bold;
    }
  }
}
</style>