feat: 完成检测单页面

曹睿

2025-02-25 20cf1938a8aa04a3f911d6d3729e8aec08a7d658

feat: 完成检测单页面

 pnpm-lock.yaml

¶Ô±ÈÐÂÎļþ
ÎļþÌ«´ó

 src/api/cnas/process/demand/demand.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,11 @@
// å®žéªŒå®¤çš„检测能力档案相关接口
import request from "@/utils/request";

// å§”托单检验分页查询
export const getInspectionOrder = (params) => {
    return request({
        url: "/inspectionOrder/pageInspectionOrder",
        method: "get",
        params: params
    })
}

 src/assets/styles/element-ui.scss

@@ -106,10 +106,10 @@
  content: "";
  display: inline-block;
  width: 4px;
  height: 28px;
  height: 16px;
  background: #3a7bfa;
  border-radius: 10px;
  margin-left: 32px;
  margin-left: 20px;
  margin-right: 8.5px;
}

@@ -117,7 +117,7 @@
  content: "";
  display: inline-block;
  width: 4px;
  height: 28px;
  height: 16px;
  background: #3a7bfa;
  border-radius: 10px;
  margin-left: 20px;

 src/views/CNAS/process/demand/AddContracts.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,418 @@
<template>
    <el-dialog title="新增检验委托单" :visible.sync="visible" width="1200px">
        <div id="dialogBody">
            <div style="max-height: 75vh;overflow-y: auto;">
                <div id="dialogBody">
                    <table border="1" cellpadding="10" class="tables heads">
                        <tr>
                            <td rowspan="2">
                                <img alt="" :src="ZTTLogo" style="width: 80%;">
                            </td>
                            <td>
                                <p>记录名称：检验委托单</p>
                            </td>
                            <td>
                                <p>保存期限：6å¹´</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>记录编号： ZTT/QR-16-04-a</p>
                            </td>
                            <td>
                                <p>归档部门：综合室</p>
                            </td>
                        </tr>
                    </table>
                    <h4 class="table_h4">
                        æ£€ éªŒ å§” æ‰˜ å•
                    </h4>
                    <p 
                        v-if="operationType !== 'view'" 
                        style="margin-left: 560px;display: flex;align-items: center">
                        <span style="width: 100px">委托编号：</span>
                        <el-input clearable size="small"></el-input>
                    </p>
                    <p v-else  style="margin-top: 16px;margin-left: 600px;">
                        å§”托编号：{{ currentInfo.entrustCode }}
                    </p>
                    <table border="1" cellpadding="10" class="tables">
                        <tr>
                            <td colspan="2">
                                <p>试样名称</p>
                            </td>
                            <td >
                                <el-input v-if="operationType !== 'view'" v-model="currentInfo.sampleName" clearable size="small"></el-input>
                                <span v-else>{{ currentInfo.sampleName }}</span>
                            </td>
                            <td>
                                <p>委托时间</p>
                            </td>
                            <td>
                                <el-date-picker
                                    v-if="operationType !== 'view'"
                                    v-model="currentInfo.commissionDate"
                                    clearable
                                    format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                    size="small"
                                    style="width: 100%"
                                    type="date"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                                <span v-else>{{ currentInfo.commissionDate }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <p>型 å·</p>
                            </td>
                            <td>
                                <el-input v-if="operationType !== 'view'" v-model="currentInfo.modelNo" clearable size="small"></el-input>
                                <span v-else>{{ currentInfo.modelNo }}</span>
                            </td>
                            <td>
                                <p>委托单位</p>
                            </td>
                            <td>
                                <el-input  v-if="operationType !== 'view'" v-model="currentInfo.commissionUnit" clearable size="small"></el-input>
                                <span v-else>{{ currentInfo.commissionUnit }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <p>生产单位</p>
                            </td>
                            <td>
                                <el-input v-if="operationType !== 'view'" v-model="currentInfo.production" clearable size="small"></el-input>
                                <span v-else>{{ currentInfo.production }}</span>
                            </td>
                            <td>
                                <p>委托人</p>
                            </td>
                            <td>
                                <el-input v-if="operationType !== 'view'" v-model="currentInfo.commissionUser" clearable size="small"></el-input>
                                <span v-else>{{ currentInfo.commissionUser }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <p>样品数量</p>
                            </td>
                            <td>
                                <el-input v-if="operationType !== 'view'" v-model="currentInfo.quantity" clearable size="small"></el-input>
                                <span v-else>{{ currentInfo.quantity }}</span>
                            </td>
                            <td>
                                <p>样品状态</p>
                            </td>
                            <td>
                                <el-input v-if="operationType !== 'view'" v-model="currentInfo.sampleStatus" clearable size="small"></el-input>
                                <span v-else>{{ insStateList.find(m=>m.value==currentInfo.sampleStatus)?insStateList.find(m=>m.value==currentInfo.sampleStatus).label:'/' }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <p>是否留样</p>
                            </td>
                            <td>
                                <el-radio-group 
                                    v-if="operationType !== 'view'"
                                    v-model="currentInfo.isLeave" 
                                    v-removeAriaHidden
                                >
                                    <el-radio :label="1">是</el-radio>
                                    <el-radio :label="0">否</el-radio>
                                </el-radio-group>
                                <div v-else>
                                    <span v-if="currentInfo.isLeave==1">是</span>
                                    <span v-else>否</span>
                                </div>
                            </td>
                            <td>
                                <p>样品处理方式</p>
                            </td>
                            <td v-if="operationType !== 'view'">
                                <el-radio-group v-model="currentInfo.processing" v-removeAriaHidden>
                                    <el-radio :label="0">委托单位取回</el-radio>
                                    <el-radio :label="1">实验室处理</el-radio>
                                </el-radio-group>
                            </td>
                            <td v-else>
                                <span v-if="currentInfo.processing==0">委托单位取回</span>
                                <span v-else>实验室处理</span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <p>约定完成时间(报告日期)</p>
                            </td>
                            <td>
                                <el-date-picker
                                    v-if="operationType !== 'view'"
                                    v-model="currentInfo.appointed"
                                    clearable
                                    format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                    size="small"
                                    style="width: 100%"
                                    type="date"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                                <span v-else>
                                    {{ currentInfo.appointed }}
                                </span>
                            </td>
                            <td>
                                <p>报告发送方式</p>
                            </td>
                            <td >
                                <el-radio-group 
                                    v-if="operationType !== 'view'"
                                    v-model="currentInfo.send" v-removeAriaHidden
                                >
                                    <el-radio :label="1">自取</el-radio>
                                    <el-radio :label="0">其他</el-radio>
                                </el-radio-group>
                                <div v-else>
                                    <span v-if="currentInfo.send==1">自取</span>
                                    <span v-else>其他</span>
                                </div>
                            </td>
                        </tr>
                        <el-button class="add_btn" size="small" type="primary" @click="addOrderDetailList">添加</el-button>
                        <tr>
                            <td>
                                <p>序号</p>
                            </td>
                            <td>
                                <p>样品编号</p>
                            </td>
                            <td>
                                <p>试验项目</p>
                            </td>
                            <td>
                                <p>检验依据</p>
                            </td>
                            <td>
                                <p>备注</p>
                            </td>
                        </tr>
                        <tr v-for="(item,index) in currentInfo.orderDetailList" :key="index" >
                            <td>{{ index+1 }}</td>
                            <td>
                                <el-input  v-if="operationType !== 'view'" v-model="item.sampleNumber" clearable size="small"></el-input>
                                <span v-else>{{ item.sampleNumber }}</span>
                            </td>
                            <td>
                                <el-input v-if="operationType !== 'view'"v-model="item.testItem" clearable size="small"></el-input>
                                <span v-else>{{ item.testItem }}</span>
                            </td>
                            <td>
                                <el-input v-if="operationType !== 'view'" v-model="item.testStandard" clearable size="small"></el-input>
                                <span v-else>{{ item.testStandard }}</span>
                            </td>
                            <td>
                                <el-input v-if="operationType !== 'view'" v-model="item.remark" clearable size="small"></el-input>
                                <span v-else>{{ item.remark }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <p>判定规则</p>
                            </td>
                            <td v-if="operationType !== 'view'" colspan="3">
                                <el-radio-group v-model="currentInfo.criterionRule" v-removeAriaHidden>
                                    <el-radio :label="0">不考虑不确定度</el-radio>
                                    <el-radio :label="1">考虑不确定度</el-radio>
                                </el-radio-group>
                                <span v-if="currentInfo.criterionRule === 1">
                                    <el-input v-model="currentInfo.criterionRuleRemark" clearable size="small" style="width: 60px"></el-input>
                                    %
                                </span>
                            </td>
                            <td v-else colspan="3">
                                <span v-if="currentInfo.criterionRule===0">不考虑不确定度</span>
                                <span v-if="currentInfo.criterionRule===1">考虑不确定度</span>
                                <span v-if="currentInfo.criterionRule===1">{{ currentInfo.criterionRuleRemark + '%' }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <p>委托人签名</p>
                            </td>
                            <td>
                                <el-input v-if="operationType !== 'view'" v-model="currentInfo.commissionUser" clearable size="small"></el-input>
                                <span v-else>{{currentInfo.commissionUser}}</span>
                            </td>
                            <td>
                                <p>委托日期</p>
                            </td>
                            <td>
                                <el-date-picker
                                    v-if="operationType !== 'view'"
                                    v-model="currentInfo.commissionDate"
                                    clearable
                                    format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                    size="small"
                                    style="width: 100%"
                                    type="date"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                                <span v-else>{{ currentInfo.commissionDate }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <p>委托人联系电话</p>
                            </td>
                            <td colspan="3">
                                <el-input v-if="operationType !== 'view'" v-model="currentInfo.commissionPhone" clearable size="small"></el-input>
                                <span v-else>{{ currentInfo.commissionPhone }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <p>综合室签名</p>
                            </td>
                            <td>
                                <el-input v-if="operationType !== 'view'" v-model="currentInfo.generalOfficeUser" clearable size="small"></el-input>
                                <span v-else>{{currentInfo.generalOfficeUser}}</span>
                            </td>
                            <td>
                                <p>接收日期</p>
                            </td>
                            <td>
                                <el-date-picker
                                    v-if="operationType !== 'view'"
                                    v-model="currentInfo.receiptData"
                                    clearable
                                    format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                    size="small"
                                    style="width: 100%"
                                    type="date"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                                <span v-else>{{ currentInfo.receiptData }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <p>领样员签名</p>
                            </td>
                            <td>
                                <el-input v-if="operationType !== 'view'" v-model="currentInfo.sampleTakerUser" clearable size="small"></el-input>
                                <span v-else>{{ currentInfo.sampleTakerUser }}</span>
                            </td>
                            <td>
                                <p>领样日期</p>
                            </td>
                            <td v-if="operationType !== 'view'">
                                <el-date-picker
                                v-model="currentInfo.sampleData"
                                clearable
                                format="yyyy-MM-dd"
                                placeholder="选择日期"
                                size="small"
                                style="width: 100%"
                                type="date"
                                value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </td>
                            <td v-else>{{ currentInfo.sampleData }}</td>
                        </tr>
                        <tr>
                            <td colspan="2" rowspan="3">
                                <p>检测机构信息</p>
                            </td>
                            <td colspan="3">
                                <p>江苏中天科技股份有限公司检测中心</p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <p>地址：江苏省南通市经济技术开发区新开南路 19 å·</p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <p>电话：0513-89059043</p>
                            </td>
                        </tr>
                    </table>
                    <p style="margin-top: 10px;margin-left: 20px;">注：本检验委托单一式二份，一份综合室归档，一份委托单位留存。</p>
                </div>
            </div>
        </div>
        <span v-if="operationType !== 'view'" slot="footer" class="dialog-footer">
            <el-button @click="detailDialogVisible = false">取 æ¶ˆ</el-button>
            <el-button v-if="operationType === 'add'" :loading="buttonLoading" type="primary" @click="handleAdd">
                ç¡® å®š
            </el-button>
            <el-button v-if="operationType === 'edit'" :loading="buttonLoading" type="primary" @click="handleEdit">
                ç¡® å®š
            </el-button>
        </span>
    </el-dialog>
</template>
<script>
import ZTTLogo from "@/assets/logo/ZTTlogo.png"
export default {
    name: 'AddContracts',
    data() {
        return {
            ZTTLogo,
            visible: false,
            operationType: '',
            currentInfo:{
                orderDetailList: []
            },
        }
    },
    methods: {
        open() {
            this.visible = true
        }
    }
}
</script>
<style lang="scss" scoped>
.tables {
  table-layout: fixed;
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse; /* å…³é”®å±žæ€§ï¼šåˆå¹¶è¾¹æ¡† */
  td {
    height: 40px;
    width: 100px;
    text-align: center;
    font-size: 14px;
    word-wrap: break-word;
    white-space: normal;
    p {
        margin: unset
    }
  }
}
.heads {
    td {
        border: 1px dashed black; /* å•å…ƒæ ¼çš„虚线 */
        padding: 8px;
        text-align: left;
    }
}
.table_h4 {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    margin: 10px 0 10px 0;
}
.add_btn {
    margin: 10px 0 10px 10px;
}
</style>

 src/views/CNAS/process/demand/Edit.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,69 @@
<template>
    <div>
        <el-dialog title="新增检验任务单" :visible.sync="visible">
            <el-form :model="search" :inline="true">
                <el-form-item label="委托编号：">
                    <el-input placeholder="请输入委托编号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">查 è¯¢</el-button>
                    <el-button>重 ç½®</el-button>
                </el-form-item>
            </el-form>
            <lims-table
                :column="column"
                :tableData="tableData"
                :page="page"
            />
        </el-dialog>
        <AddContracts ref="addContractsRef" />
    </div>
</template>

<script>
    import limsTable from "@/components/Table/lims-table.vue";
    import AddContracts from "./AddContracts.vue";
    export default {
        name: 'EditDemand',
        components: {
            limsTable,
            AddContracts
        },
        data() {
            return {
                visible: false,
                search: {},
                column: [
                    { label: '序号', minWidth: '100px' },
                    { label: '委托编号', minWidth: '100px' },
                    { label: '样品名称', minWidth: '100px' },
                    {
                        dataType: "action",
                        fixed: "right",
                        label: "操作",
                        operation: [
                            {
                                name: "新增委托单",
                                type: "text",
                                clickFun: (row) => {
                                    this.$refs.addContractsRef.open()
                                }
                            }
                        ],
                    },
                ],
                tableData: [{}],
                page: {
                    total: 0,
                    size: 10,
                    current: 1,
                },
            }
        },
        methods: {
            open() {
                this.visible = true
            }
        }
    }
</script>

 src/views/CNAS/process/demand/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,160 @@
<style lang="scss" scoped>
.standard_method {
    padding: 20px;
}
.search {
  background-color: #fff;
  height: 80px;
  display: flex;
  align-items: center;
}

.search_thing {
//   width: 350px;
  display: flex;
  align-items: center;
}

.search_label {
  width: 110px;
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: calc(100% - 110px);
}

.table {
  margin-top: 10px;
  background-color: #fff;
  width: calc(100% - 40px);
  height: calc(100% - 60px - 80px - 10px - 40px);
  padding: 20px;
}
</style>

<template>
    <div class="standard_method">
        <el-form :model="model" :inline="true" label-width="auto">
            <el-form-item label="试样名称：">
                <el-input size="small"
                    placeholder="请输入" 
                    clearable 
                    @change="refreshTable()"
                />
            </el-form-item>
            <el-form-item label="委托单位：">
                <el-input size="small"
                    placeholder="请输入" 
                    clearable 
                    @change="refreshTable()"
                />
            </el-form-item>
            <el-form-item label="生产单位：">
                <el-input size="small"
                    placeholder="请输入" 
                    clearable 
                    @change="refreshTable()"
                />
            </el-form-item>
            <el-form-item label="委托人：">
                <el-input size="small"
                    placeholder="请输入" 
                    clearable 
                    @change="refreshTable()"
                />
            </el-form-item>
            <el-form-item>
                <el-button size="small">
                    é‡ ç½®
                </el-button>
                <el-button size="small" type="primary">
                    æŸ¥ è¯¢
                </el-button>
            </el-form-item>
        </el-form>
        <div style="margin-bottom: 10px">
            <el-button size="small" type="primary" icon="el-icon-plus" @click="openDialog">
                æ–° å¢ž
            </el-button>
        </div>
        <lims-table
            :column="column"
            :tableData="tableData"
            :height="'calc(100vh - 250px)'"
            :page="page"
        />
        <Edit ref="editRef" />
    </div>
</template>

<script>
import limsTable from "@/components/Table/lims-table.vue";
import Edit from './Edit.vue'
import { getInspectionOrder } from "@/api/cnas/process/demand/demand.js"

export default {
    name: 'Demand',
    components: {
        limsTable,
        Edit
    },
    data() {
        return {
            queryParams: {
                code: ''
            },
            model: {},
            column: [
                { label: '序号', minWidth: '100px' },
                { label: '试样名称', minWidth: '100px' },
                { label: '委托编号' },
                { label: '委托时间' },
                { label: '型号' },
                { label: '委托单位' },
                { label: '生产单位' },
                { label: '委托人' },
                { label: '样品数量' },
                { label: '样品状态' },
                { label: '是否留样' },
                { label: '样品处理方式' },
                {
                    dataType: "action",
                    fixed: "right",
                    label: "操作",
                    operation: [
                        {
                            name: "编 è¾‘",
                            type: "text"
                        }
                    ],
                },
            ],
            tableData: [], // è¡¨æ ¼æ•°æ®
            page: {
                total: 0,
                size: 10,
                current: 1,
            },
        }
    },
    mounted() {
        this.refreshTable()
    },
    methods: {
        /**
         * @desc åˆ·æ–°è¡¨æ ¼
         */
        async refreshTable() {
            await getInspectionOrder({ ...this.page })
        },
        /**
         * @desc æ‰“开模态框
         */
        openDialog() {
            this.$refs.editRef.open()
        }
    }
}
</script>