检验报告管理

董国庆

13 小时以前 76cbfbad1c4235e2baf3216a8c99781995241429

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

@@ -1,16 +1,19 @@
<template>
  <div class="list">
    <TableCustom :queryForm="form" :tableData="tableData" :total="total" :height="null">
    <TableCustom :queryForm="form" :tableData="tableData" :total="total" :height="null" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
      <template #search>
        <el-form :model="form" labelWidth="auto" inline>
          <el-form-item label="项目课题方案名称：">
            <el-input v-model="form.projectPlan" placeholder="请输入"></el-input>
            <el-input v-model="form.projectName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="所属实验编号：">
            <el-input v-model="form.experimentNo" placeholder="请输入"></el-input>
            <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.creator" placeholder="请输入"></el-input>
            <el-input v-model="form.createBy" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="创建时间：">
            <el-date-picker
@@ -22,90 +25,167 @@
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="实验名称：">
            <el-input v-model="form.experimentName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="default" @click="resetForm">重置</el-button>
            <el-button type="primary" style="margin-left: 10px;" @click="handleSearch">查询</el-button>
            <el-button type="primary" @click="handleSearch" style="margin-left: 20px">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #setting>
        <div class="tableTitle" @click="handleAdd">
        <div class="tableTitle">
          <div class="flex a-center">
            <div class="title active">新增检验报告</div>
            <div class="title" :class="{ active: activeTab == 'list' }" @click="handleTabChange('list')">
              检验报告列表
            </div>
            <div v-if="isLabTechnician" class="drafts" :class="{ active: activeTab == 'draft' }" @click="handleTabChange('draft')">
              草稿箱
            </div>
          </div>
          <el-button v-if="isLabTechnician" @click="handleAdd" class="el-icon-plus" type="primary">
            新增检验报告</el-button>
        </div>
      </template>
      <template #table>
        <el-table-column prop="projectPlan" label="所属项目课题方案" ></el-table-column>
        <el-table-column prop="experimentNo" label="所属实验编号" ></el-table-column>
        <el-table-column prop="projectName" label="所属课题方案" ></el-table-column>
        <el-table-column prop="experimentCode" label="所属实验编号" ></el-table-column>
        <el-table-column prop="experimentName" label="实验名称" ></el-table-column>
        <el-table-column prop="createTime" label="创建时间" ></el-table-column>
        <el-table-column prop="creator" label="创建人" ></el-table-column>
        <el-table-column prop="createBy" label="创建人" ></el-table-column>
        <el-table-column prop="status" label="状态" >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '待提交' ? 'warning' : 'success'">
              {{ scope.row.status }}
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button type="text" @click="handleSubmit(scope.row)">提交</el-button>
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <!-- 列表状态下的按钮 -->
            <template v-if="activeTab == 'list'">
              <!-- 化验师的按钮 -->
              <template v-if="isLabTechnician">
                <el-button 
                  v-if="scope.row.status == 1"
                  type="text" 
                  @click="handleSubmit(scope.row)"
                >提交</el-button>
                <el-button 
                  type="text" 
                  v-if="scope.row.status == 1"
                  @click="handleEdit(scope.row)"
                >编辑</el-button>
                <el-button 
                  type="text" 
                  v-if="scope.row.status == 2"
                  @click="handleDetail(scope.row)"
                >详情</el-button>
              </template>
              <!-- 其他角色的按钮 -->
              <template v-else>
                <el-button 
                  type="text" 
                  @click="handleDetail(scope.row)"
                >详情</el-button>
              </template>
            </template>
            <!-- 草稿箱状态下的按钮 -->
            <template v-else>
              <el-button 
                type="text" 
                @click="handleEdit(scope.row)"
              >编辑</el-button>
              <el-button 
                type="text" 
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </template>
        </el-table-column>
      </template>
    </TableCustom>
    <ShowDelConfirm 
      :title="changeStatusTitle" 
      :tip="changeStatusTip" 
      :show="changeStatus"
      @close="changeStatus = false" 
      @confirm="handleChangeStatusConfirm" 
    />
  </div>
</template>

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

export default {
  name: "OriginalRecordTest",
  name: "InspectionReportList",
  components: {
    ShowDelConfirm
  },
  data() {
    return {
      activeTab: 'list',
      form: {
        projectPlan: "",
        experimentNo: "",
        creator: "",
        testReason: "",
        testResult: "",
        createBy: "",
        createTime: [],
        experimentName: ""
        startTime: "",
        endTime: "",
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: [
        {
          id: '1',
          projectPlan: '名称名称名称',
          experimentNo: '31423764',
          experimentName: '名称名称名称',
          creator: '张三',
          createTime: '2024-01-08',
          status: '待提交'
        }
      ],
      total: 5
      tableData: [],
      total: 0,
      // 确认弹窗相关数据
      changeStatus: false,
      changeStatusTitle: "",
      changeStatusTip: "",
      currentOperationRow: null,
      currentOperationType: ''
    };
  },
  computed: {
    isLabTechnician() {
      const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
      return userInfo.roleType == 4; // 4是化验师
    }
  },
  created() {
    this.getTableData();
  },
  methods: {
    resetForm() {
      this.form = {
        projectPlan: "",
        experimentNo: "",
        creator: "",
        createTime: [],
        experimentName: ""
      };
    },
    handleSearch() {
    handleTabChange(tab) {
      this.activeTab = tab;
      this.form.status = tab == 'draft' ? -1 : '';
      this.getTableData();
    },
    handleAdd(){
    resetForm() {
      this.form = {
        testReason: "",
        testResult: "",
        createBy: "",
        createTime: [],
        startTime: "",
        endTime: "",
        status: this.activeTab == 'draft' ? -1 : '',
        pageNum: 1,
        pageSize: 10
      };
      this.getTableData();
    },
    handleSearch() {
      if (this.form.createTime && this.form.createTime.length == 2) {
        this.form.startTime = this.form.createTime[0];
        this.form.endTime = this.form.createTime[1];
      } else {
        this.form.startTime = "";
        this.form.endTime = "";
      }
      this.getTableData();
    },
    handleAdd() {
      this.$router.push({
        path: "/dataManagement/inspectionReport/detail",
        query: {
@@ -123,46 +203,101 @@
      });
    },
    handleSubmit(row) {
      this.$confirm('确认提交该检验报告?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO: 调用提交接口
        this.$message({
          type: 'success',
          message: '提交成功!'
        });
        this.getTableData();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消提交'
        });          
      this.currentOperationRow = row;
      this.currentOperationType = 'submit';
      this.changeStatusTitle = "确认提交检测数据结果吗?";
      this.changeStatusTip = "提交后关联的样品信息将不可回溯";
      this.changeStatus = true;
    },
    handleDetail(row) {
      this.$router.push({
        path: "/dataManagement/inspectionReport/detail",
        query: {
          id: row.id,
          type: 'view'
        }
      });
    },
    handleDelete(row) {
      this.currentOperationRow = row;
      this.currentOperationType = 'delete';
      this.changeStatusTitle = "确认要删除这条信息吗？";
      this.changeStatusTip = "删除后信息无法找回";
      this.changeStatus = true;
    },
    handleChangeStatusConfirm() {
      if (!this.currentOperationRow) return;
      
      if (this.currentOperationType == 'submit') {
        commit({id:this.currentOperationRow.id}).then(res => {
          console.log('2222222',res)
          if (res.code == 200) {
            this.$message.success('提交成功!');
            this.changeStatus = false;
            this.getTableData();
          } else {
            this.$message.error(res.msg || '提交失败');
          }
        }).catch(() => {
          this.$message.error('提交失败');
        });
      } else if (this.currentOperationType == 'delete') {
        deleteById({
          id: this.currentOperationRow.id
        }).then(() => {
          this.$message.success("删除成功");
          this.changeStatus = false;
          this.getTableData();
        }).catch(error => {
          this.$message.error("删除失败");
        });
      }
    },
    getStatusType(status) {
      const statusMap = {
        '-1': 'info',
        '1': 'warning',
        '2': 'success'
      };
      return statusMap[status] || 'info';
    },
    getStatusText(status) {
      const statusMap = {
        '-1': '草稿箱',
        '1': '待提交',
        '2': '已提交'
      };
      return statusMap[status] || '未知';
    },
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.getTableData();
    },
    getTableData() {
      this.tableData = [
        {
          id: '1',
          projectPlan: '名称名称名称',
          experimentNo: '31423764',
          experimentName: '名称名称名称',
          creator: '张三',
          createTime: '2024-01-08',
          status: '待提交'
        },
        {
          id: '2',
          projectPlan: '项目方案2',
          experimentNo: '31423765',
          experimentName: '实验名称2',
          creator: '李四',
          createTime: '2024-01-09',
          status: '已提交'
      if (this.form.createTime && this.form.createTime.length == 2) {
        this.form.startTime = this.form.createTime[0];
        this.form.endTime = this.form.createTime[1];
      } else {
        this.form.startTime = "";
        this.form.endTime = "";
      }

      const { createTime, ...requestParams } = this.form;
      console.log('requestParams',requestParams)
      getList(requestParams).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records || [];
          this.total = res.data.total || 0;
        } else {
          this.$message.error(res.msg || '获取列表失败');
        }
      ];
      this.total = this.tableData.length;
      }).catch(() => {
        this.$message.error('获取列表失败');
      });
    }
  }
};
@@ -172,31 +307,50 @@
.list {
  height: 100%;
}

.flex {
  display: flex;
  align-items: center;
}

.tableTitle {
  display: flex;
  padding-bottom: 20px;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;

  .title {
    background: #fafafc;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #dcdfe6;
    padding: 16px 29px;
    font-weight: bold;
    font-size: 18px;
    color: #606266;
    width: unset;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 400;
  }

  .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;
    transition: all 0.3s ease;
  }

  .active {
    color: #049c9a;
    background: #ffffff;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049c9a;
    font-weight: bold;
  }
}
</style>