新增接收弹窗

董国庆

2025-04-10 10f03db48aa05493739d5657dd759a06f30d8e4c

新增接收弹窗

 src/views/dataManagement/sampleManage/addSample.vue

@@ -27,47 +27,103 @@
        <el-table-column prop="creator" label="状态"></el-table-column>
      </template>
    </Table>
    <div class="header-title-left" style="margin-top: 38px">
      <img src="@/assets/public/headercard.png" />
      <span>基础信息</span>

    <!-- 化验师专用部分 -->
    <div v-if="isAssayer" class="assayer-section">
      <div class="header-title-left" style="margin-top: 38px">
        <img src="@/assets/public/headercard.png" />
        <span>送样-收样记录</span>
      </div>
      <div class="sample-code">取样单编号：{{ form.sampleCode || 'DD-25010BS01' }}</div>
      
      <!-- 待收样列表 -->
      <div class="pending-samples">
        <div class="sub-title">待收样列表</div>
        <el-button type="primary" class="batch-receive" @click="handleBatchReceive">批量接收</el-button>
        <Table :data="pendingSamples" :total="pendingSamplesTotal" :height="null" @selection-change="handleSelectionChange">
          <template>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="sampleName" label="取样名称"></el-table-column>
            <el-table-column prop="sampleCode" label="取样样品编号"></el-table-column>
            <el-table-column prop="ph" label="PH"></el-table-column>
            <el-table-column prop="sampleAmount" label="取样量"></el-table-column>
            <el-table-column prop="sendTime" label="送样时间"></el-table-column>
            <el-table-column prop="sender" label="送样人"></el-table-column>
            <el-table-column prop="status" label="状态"></el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" @click="handleReceive(scope.row)">接收</el-button>
              </template>
            </el-table-column>
          </template>
        </Table>
      </div>

      <!-- 已收样列表 -->
      <div class="received-samples">
        <div class="sub-title">已收样列表</div>
        <Table :data="receivedSamples" :total="receivedSamplesTotal" :height="null">
          <template>
            <el-table-column prop="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="sampleName" label="取样名称"></el-table-column>
            <el-table-column prop="sampleCode" label="取样样品编号"></el-table-column>
            <el-table-column prop="ph" label="PH"></el-table-column>
            <el-table-column prop="sampleAmount" label="取样量"></el-table-column>
            <el-table-column prop="sendTime" label="送样时间"></el-table-column>
            <el-table-column prop="sender" label="送样人"></el-table-column>
            <el-table-column prop="receiveTime" label="收样时间"></el-table-column>
            <el-table-column prop="receiver" label="收样人"></el-table-column>
            <el-table-column prop="status" label="状态"></el-table-column>
          </template>
        </Table>
      </div>
    </div>
    <el-form
      v-if="!isExperimenter"
      ref="form"
      :model="form"
      :rules="rules"
      inline
      label-position="top"
    >
      <el-form-item label="取样单编号" prop="sampleCode">
        <el-input
          v-model="form.sampleCode"
          :disabled="!isExperimenter"
          :placeholder="isExperimenter ? '请输入取样单编号' : '自动生成'"
        />
      </el-form-item>
    </el-form>
    <div v-else class="number">取样单编号：213421241</div>
    <div class="header-title-left" style="margin-top: 38px">
      <img src="@/assets/public/headercard.png" />
      <span>取样操作记录</span>
      <el-button
        v-if="isEngineer"
        type="primary"
        class="el-icon-plus"
        @click="showAddTime = true"

    <!-- 非化验师部分 -->
    <div v-if="!isAssayer">
      <div class="header-title-left" style="margin-top: 38px">
        <img src="@/assets/public/headercard.png" />
        <span>基础信息</span>
      </div>
      <el-form
        v-if="!isExperimenter"
        ref="form"
        :model="form"
        :rules="rules"
        inline
        label-position="top"
      >
        新增工艺时间
      </el-button>
      <el-button
        type="primary"
        class="el-icon-plus"
        @click="showAdditives = !showAdditives"
      >
        {{ showAdditives ? "收起辅料详情" : "展开辅料详情" }}
      </el-button>
        <el-form-item label="取样单编号" prop="sampleCode">
          <el-input
            v-model="form.sampleCode"
            :disabled="!isExperimenter"
            :placeholder="isExperimenter ? '请输入取样单编号' : '自动生成'"
          />
        </el-form-item>
      </el-form>
      <div v-else class="number">取样单编号：213421241</div>
      <div class="header-title-left" style="margin-top: 38px">
        <img src="@/assets/public/headercard.png" />
        <span>取样操作记录</span>
        <el-button
          v-if="isEngineer"
          type="primary"
          class="el-icon-plus"
          @click="showAddTime = true"
        >
          新增工艺时间
        </el-button>
        <el-button
          type="primary"
          class="el-icon-plus"
          @click="showAdditives = !showAdditives"
        >
          {{ showAdditives ? "收起辅料详情" : "展开辅料详情" }}
        </el-button>
      </div>
    </div>
    <Table :data="sampleData" :total="sampleTotal" :height="null">
    <Table v-if="!isAssayer" :data="sampleData" :total="sampleTotal" :height="null">
      <template>
        <el-table-column prop="index" label="序号" width="80"></el-table-column>
        <el-table-column
@@ -182,7 +238,7 @@
        </el-table-column>
      </template>
    </Table>
    <div class="remark-section" v-if="isExperimenter">
    <div class="remark-section" v-if="isExperimenter && !isAssayer">
      <el-form :model="form" label-position="top">
        <el-form-item label="备注">
          <el-input
@@ -194,7 +250,7 @@
        </el-form-item>
      </el-form>
    </div>
    <div class="add-project-footer">
    <div class="add-project-footer" v-if="!isAssayer">
      <el-button type="primary" class="save-btn" @click="handleSave">保存</el-button>
      <el-button>存草稿</el-button>
    </div>
@@ -211,6 +267,11 @@
      :sample-data="sampleData"
      @confirm="handleConfirm"
    />
    <receive-confirm-dialog
      :visible.sync="showReceiveConfirm"
      :sample-count="selectedSamples.length"
      @confirm="confirmReceive"
    />
  </Card>
</template>

@@ -219,6 +280,7 @@
import addTime from "./components/addTime.vue";
import SampleDialog from "./components/sampleDialog.vue";
import ConfirmDialog from './components/confirmDialog.vue';
import ReceiveConfirmDialog from './components/receiveConfirmDialog.vue'

export default {
  name: "AddConfirmationSheet",
@@ -227,6 +289,7 @@
    addTime,
    SampleDialog,
    ConfirmDialog,
    ReceiveConfirmDialog
  },
  props: {},
  data() {
@@ -236,9 +299,10 @@
      showAdditives: true,
      showSampleDialog: false,
      showConfirmDialog: false,
      showReceiveConfirm: false,
      currentSampleData: {},
      currentEditIndex: -1,
      schedulingData: [], // 实验调度表格数据
      schedulingData: [],
      schedulingTotal: 0,
      sampleData: [
        {
@@ -262,7 +326,7 @@
          sampleAmount: "100ml",
          sampleTime: "2024-03-20 10:00:00",
          remark: "",
          operator: "张三",
          operator: "张三"
        },
        {
          index: 2,
@@ -299,7 +363,81 @@
        ],
      },
      menu: [],
      userRole: "experimenter", // 用户角色，可以是 'engineer' 或 'experimenter'
      userRole: "assayer", // 用户角色，可以是 'engineer'、'experimenter' 或 'assayer'
      // 化验师相关数据
      pendingSamples: [
        {
          index: 1,
          sampleName: "名称名称名称",
          sampleCode: "314234321",
          ph: "5",
          sampleAmount: "34",
          sendTime: "2025-1-9 15:26:08",
          sender: "李四",
          status: "待接收"
        },
        {
          index: 2,
          sampleName: "名称名称名称",
          sampleCode: "314234321",
          ph: "6",
          sampleAmount: "23",
          sendTime: "2025-1-9 15:26:08",
          sender: "李四",
          status: "待接收"
        },
        {
          index: 3,
          sampleName: "名称名称名称",
          sampleCode: "314234321",
          ph: "7",
          sampleAmount: "23",
          sendTime: "2025-1-13 16:38:17",
          sender: "李四",
          status: "待接收"
        }
      ],
      pendingSamplesTotal: 3,
      receivedSamples: [
        {
          index: 1,
          sampleName: "名称名称名称",
          sampleCode: "314234321",
          ph: "5",
          sampleAmount: "34",
          sendTime: "2025-1-9 15:26:08",
          sender: "李四",
          receiveTime: "2025-1-15 14:00:50",
          receiver: "段向蒙",
          status: "已接收"
        },
        {
          index: 2,
          sampleName: "名称名称名称",
          sampleCode: "314234321",
          ph: "6",
          sampleAmount: "23",
          sendTime: "2025-1-9 15:26:08",
          sender: "李四",
          receiveTime: "2025-1-15 14:00:50",
          receiver: "傅彦涛",
          status: "已接收"
        },
        {
          index: 3,
          sampleName: "名称名称名称",
          sampleCode: "314234321",
          ph: "7",
          sampleAmount: "23",
          sendTime: "2025-1-13 16:38:17",
          sender: "李四",
          receiveTime: "2025-1-15 14:00:50",
          receiver: "王乐康",
          status: "已接收"
        }
      ],
      receivedSamplesTotal: 3,
      selectedSamples: []
    };
  },
  computed: {
@@ -311,6 +449,9 @@
    },
    isExperimenter() {
      return this.userRole === "experimenter";
    },
    isAssayer() {
      return this.userRole === "assayer";
    },
  },
  watch: {},
@@ -524,6 +665,45 @@
      this.$message.success('保存成功');
      this.showConfirmDialog = false;
    },
    handleSelectionChange(selection) {
      this.selectedSamples = selection;
    },
    handleReceive(row) {
      this.selectedSamples = [row];
      this.showReceiveConfirm = true;
    },
    handleBatchReceive() {
      if (this.selectedSamples.length === 0) {
        this.$message.warning('请先选择要接收的样品');
        return;
      }
      this.showReceiveConfirm = true;
    },
    confirmReceive(signature) {
      // 这里处理接收确认逻辑
      const sampleIds = this.selectedSamples.map(item => item.id);
      console.log('接收样品', { sampleIds, signature });
      
      // 模拟接收成功
      this.$message.success(`成功接收 ${this.selectedSamples.length} 个样品`);
      
      // 更新数据
      this.selectedSamples.forEach(sample => {
        const index = this.pendingSamples.findIndex(item => item.id === sample.id);
        if (index > -1) {
          this.pendingSamples.splice(index, 1);
          this.receivedSamples.unshift({
            ...sample,
            receiveTime: new Date().toLocaleString(),
            receiver: '当前用户',
            status: '已接收'
          });
        }
      });
      
      // 清空选择
      this.selectedSamples = [];
    }
  },
};
</script>
@@ -724,4 +904,31 @@
    margin: 0 32px 0 8px;
  }
}

.assayer-section {
  .sample-code {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0,0,0,0.88);
    margin: 20px 0;
  }

  .sub-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin: 20px 0;
    display: inline-block;
  }

  .batch-receive {
    float: right;
    margin-bottom: 16px;
  }

  .pending-samples, .received-samples {
    // margin-top: 20px;
  }
}
</style>

 src/views/dataManagement/sampleManage/components/receiveConfirmDialog.vue

New file
@@ -0,0 +1,149 @@
<template>
  <el-dialog
    title="接收签字确认"
    :visible.sync="visible"
    width="500px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="receive-dialog">
      <div class="receive-tip">
        您已选中 <span class="sample-count">{{ sampleCount }}</span> 条样品接收，请签字确认
      </div>
      
      <div class="approval-dialog-approve">
        <div class="add-group">
          <div>*</div>
          <span>签字确认</span>
          <el-button type="primary" class="el-icon-plus" @click="openSignature">签名</el-button>
        </div>
        <img
          v-if="imgSrc"
          style="width: 200px; height: 100px; margin-left: 25px"
          :src="imgSrc"
          fit="fit"
        />
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm" :disabled="!imgSrc">
        确认接收
      </el-button>
    </div>

    <SignatureCanvas
      :visible="signatureDialogVisible"
      @confirm="handleSignatureConfirm"
      @close="signatureDialogVisible = false"
    />
  </el-dialog>
</template>

<script>
import SignatureCanvas from "@/components/SignatureCanvas.vue";

export default {
  name: "ReceiveConfirmDialog",
  components: {
    SignatureCanvas,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    sampleCount: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      signatureDialogVisible: false,
      imgSrc: "",
    };
  },
  methods: {
    handleClose() {
      this.$emit("update:visible", false);
      this.imgSrc = "";
    },
    openSignature() {
      this.signatureDialogVisible = true;
    },
    handleSignatureConfirm(imageData) {
      this.signatureDialogVisible = false;
      this.imgSrc = imageData;
    },
    handleConfirm() {
      if (!this.imgSrc) {
        this.$message.warning("请先完成签名确认");
        return;
      }
      this.$emit("confirm", this.imgSrc);
      this.handleClose();
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e4e7ed;
}

.receive-dialog {
  padding: 20px;

  .receive-tip {
    font-size: 14px;
    color: #333;
    margin-bottom: 20px;

    .sample-count {
      color: #409EFF;
      font-weight: bold;
    }
  }
}

.approval-dialog-approve {
  margin-top: 26px;

  img {
    border: 2px dashed #049c9a;
  }
}

.add-group {
  padding-left: 25px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  margin-bottom: 19px;

  div {
    color: #f56c6c;
  }

  span {
    font-weight: 500;
    font-size: 14px;
    color: #222222;
    line-height: 21px;
    margin: 0 32px 0 8px;
  }
}

.dialog-footer {
  align-items: center;
  display: flex;
  justify-content: center;

  button {
    width: 150px;
  }
}
</style>