PCR检验工作日志组件

src/views/component/sop/pcr.vue

@@ -0,0 +1,173 @@
+<template>
+    <div class="pcr">
+        <el-tabs v-model="activeName">
+            <el-tab-pane v-for="item in tableList" :key="item.peiZhiId" :label="item.quYuMing" :name="item.peiZhiId">
+                <div class="user">
+                    <span style="width:70px">操作者：</span>
+                    <ibps-user-selector
+                        v-model="item.bianZhiRen"
+                        type="user"
+                        readonly-text="text"
+                        :disabled="readonly"
+                        :multiple="false"
+                        size="mini"
+                        style="width:60%"
+                        :filter="filter"
+                        filtrate
+                    />
+                </div>
+                <div v-for="row in item.lieBiaoShuJu" :key="row.row">
+                    <template v-if="row.type==='text'">
+                        <span style="white-space: pre-wrap;">{{ row.content }}</span>
+                    </template>
+                    <template v-if="row.type==='group'">
+                        <span v-for="(col,index) in row.children" :key="index">
+                            <template v-if="col.type==='checkbox'">
+                                <span class="col-item"><el-checkbox v-model="col.value" :disabled="readonly" size="mini" /></span>
+                            </template>
+                            <template v-if="col.type==='text'">
+                                <span class="col-item" style="white-space: pre-wrap;">{{ col.content }}</span>
+                            </template>
+                            <template v-if="col.type==='input'">
+                                <span class="col-item">
+                                    <el-input v-if="!readonly" v-model="col.value" size="mini" style="width:120px" />
+                                    <template v-else>{{ col.value }}</template>
+                                </span>
+                            </template>
+                        </span>
+                    </template>
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script>
+import ibpsUserSelector from '@/business/platform/org/selector'
+export default {
+    components: {
+        ibpsUserSelector
+    },
+    props: {
+        formData: {
+            type: Object,
+            default: () => ({})
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data () {
+        return {
+            activeName: '1',
+            tableList: [],
+            isFirst: true,
+            filter: [{
+                descVal: '1',
+                includeSub: true,
+                old: 'position',
+                partyId: this.$store.getters.userInfo.employee.positions,
+                partyName: '',
+                scriptContent: '',
+                type: 'user',
+                userType: 'position'
+            }]
+        }
+    },
+    computed: {
+    },
+    watch: {
+        'formData.PCRjygzrzxqb': {
+            handler (val) {
+                if (val && val.length && this.isFirst) {
+                    this.isFirst = false
+                    this.tableList = val.map(item => ({
+                        ...item,
+                        lieBiaoShuJu: JSON.parse(item.lieBiaoShuJu)
+                    }))
+                }
+            }
+        },
+        tableList: {
+            async handler (val) {
+                // console.log('tableList', val)
+                this.$emit('change-data', 'PCRjygzrzxqb', val.map(item => ({
+                    ...item,
+                    lieBiaoShuJu: JSON.stringify(item.lieBiaoShuJu),
+                    lieBiaoWenBen: this.formatContent(item.lieBiaoShuJu, item.quYuMing)
+                })))
+            },
+            deep: true
+        }
+    },
+    mounted () {
+        // console.log('init', this.formData)
+        this.getData()
+    },
+    methods: {
+        formatContent (content, title) {
+            let str = ''
+            str += title + '\n'
+            content.forEach(row => {
+                if (row.type === 'text') {
+                    str += row.content
+                }
+                if (row.type === 'group') {
+                    row.children.forEach(col => {
+                        if (col.type === 'text') {
+                            str += col.content || ''
+                        }
+                        if (col.type === 'checkbox') {
+                            str += col.value ? '☑' : '□'
+                        }
+                        if (col.type === 'input') {
+                            str += col.value || ''
+                        }
+                    })
+                }
+                str += '\n'
+            })
+            return str
+        },
+        async getData () {
+            const sql = `select * from t_pcrjygzrzpzb`
+            let { variables: { data = [] } = {}} = await this.$common.request('sql', sql)
+            if (!this.isFirst) return
+            data = data.filter(item => item.lei_xing_ === this.formData.leiXing)
+            this.tableList = data.map(item => {
+                let t = []
+                if (item.lie_biao_shu_ju_) {
+                    item.lie_biao_shu_ju_ = JSON.parse(item.lie_biao_shu_ju_)
+                    item.lie_biao_shu_ju_.forEach(i => {
+                        i.value = i.default || ''
+                        i.children?.forEach(ii => {
+                            ii.value = ii.default || ''
+                        })
+                    })
+                    t = item.lie_biao_shu_ju_
+                }
+                return {
+                    quYuMing: item.qu_yu_ming_,
+                    lieBiaoShuJu: t,
+                    peiZhiId: item.id_,
+                    bianZhiRen: ''
+                }
+            })
+            // console.log('add', this.tableList)
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.pcr{
+    padding: 20px 0 20px 20px;
+    .user{
+        display: flex;
+    }
+    .col-item{
+        margin: 2px 5px 2px 5px;
+    }
+}
+</style>