室内质控月分析子表组件

src/views/component/qualityControl/index.vue

@@ -0,0 +1,143 @@
+<template>
+    <div class="qualityControl">
+        <div v-if="!readonly && shiFouGuoShen" class="btn">
+            <el-button type="primary" icon="ibps-icon-plus" @click="onAddClick">添加</el-button>
+            <el-button type="danger" icon="ibps-icon-close" @click="onRemoveClick">删除</el-button>
+        </div>
+        <div class="table">
+            <el-table :data="tableData" border @selection-change="handleSelectionChange">
+                <el-table-column
+                    type="selection"
+                />
+                <el-table-column
+                    label="序号"
+                    width="50"
+                    type="index"
+                />
+                <el-table-column label="项目" prop="xiangMu" width="160" />
+                <el-table-column label="质控批号" prop="zhiKongPinPiHao" width="100" />
+                <el-table-column label="批号开始时间" prop="piHaoKaiShiShiJia" width="100" />
+                <el-table-column label="质控图的界限">
+                    <el-table-column label="单位" prop="zhiKongTuDanWei" />
+                    <el-table-column label="水平" prop="zhiKongTuShuiPing" />
+                    <el-table-column label="均值" prop="zhiKongTuJunZhi" />
+                    <el-table-column label="SD" prop="zhiKongTuSd" />
+                    <el-table-column label="CV%" prop="zhiKongTuCv" />
+                </el-table-column>
+                <el-table-column label="原始测定数据统计">
+                    <el-table-column label="均值" prop="yuanShiJunZhi" />
+                    <el-table-column label="SD" prop="yuanShiSd" />
+                    <el-table-column label="CV%" prop="yuanShiCv" />
+                    <el-table-column label="N" prop="yuanShiN" />
+                    <el-table-column label="失控数" prop="shiKongShu" />
+                </el-table-column>
+                <el-table-column label="除失控数据后的数据统计">
+                    <el-table-column label="均值" prop="chuJunZhi" />
+                    <el-table-column label="SD" prop="chuSd" />
+                    <el-table-column label="CV%" prop="chuCv" />
+                </el-table-column>
+                <el-table-column label="累积数据统计">
+                    <el-table-column label="均值" prop="leiJunZhi" />
+                    <el-table-column label="SD" prop="leiSd" />
+                    <el-table-column label="CV%" prop="leiCv" />
+                    <el-table-column label="N" prop="leiN" />
+                    <el-table-column label="在控率%" prop="zaiKongLv" />
+                </el-table-column>
+                <el-table-column label="CV%控制范围">
+                    <el-table-column label="%" prop="cvKongZhiFanWei" />
+                </el-table-column>
+                <el-table-column v-if="!readonly && shiFouGuoShen" label="操作栏位" fixed="right">
+                    <template slot-scope="{row,$index}">
+                        <el-button type="text" icon="ibps-icon-edit" @click="onEditClick(row,$index)">编辑</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        formData: {
+            type: Object,
+            default: () => {}
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data () {
+        return {
+            tableData: [],
+            multipleSelection: []
+        }
+    },
+    computed: {
+        shiFouGuoShen () {
+            if (!this.formData.shiFouGuoShen || this.formData.shiFouGuoShen === '已退回') {
+                return true
+            }
+            return false
+        }
+    },
+    watch: {
+        'formData.dlxmsnzkyfxzb': {
+            handler (val) {
+                if (val && val.length) {
+                    // console.log(this.formData)
+                    this.tableData = val
+                }
+            }
+        },
+        tableData: {
+            handler (val) {
+                this.$emit('change-data', 'dlxmsnzkyfxzb', val)
+            },
+            deep: true
+        }
+    },
+
+    methods: {
+        handleSelectionChange (val) {
+            this.multipleSelection = val
+        },
+        onAddClick () {
+            const btn = document.querySelector('.dynamic-form-table .ibps-icon-add')
+            btn.click()
+        },
+        onRemoveClick () {
+            if (this.multipleSelection.length === 0) {
+                return this.$message.warning('请先选择需要删除的数据!')
+            }
+            this.$confirm('是否确认删除所选项?', '提示', {
+                confirmButtonText: '确认',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.tableData = this.tableData.filter(item => !this.multipleSelection.includes(item))
+            }).catch(() => {
+            })
+        },
+        onEditClick (row, $index) {
+            const btns = document.querySelectorAll('.dynamic-form-table .ibps-icon-edit')
+            btns[Math.floor(btns.length / 2) + $index].click()
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.qualityControl{
+    margin-top: 20px;
+    .btn{
+        padding: 0;
+        display: flex;
+        justify-content: flex-end;
+        .el-button{
+            margin: 0;
+        }
+    }
+}
+</style>