微生物表单自定义组件

src/views/component/sop/xueQingXueShiYan.vue

@@ -0,0 +1,343 @@
+<template>
+  <div class="performance">
+    <div class="flex">
+      <div class="title">*</div>
+      <div v-if="isRead" />
+      <div v-else>
+        <el-button
+          type="primary"
+          size="mini"
+          icon="ibps-icon-add"
+          @click="handleAdd"
+        >
+          添加</el-button
+        >
+        <el-button
+          type="danger"
+          size="mini"
+          icon="ibps-icon-remove"
+          @click="handleDelete"
+        >
+          删除</el-button
+        >
+      </div>
+    </div>
+    <div class="table">
+      <el-table
+        :data="tableData"
+        border
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="序号" width="50" type="index" />
+        <el-table-column label="菌株编号" prop="junZhuBianHao" width="100">
+          <template slot-scope="{ row }">
+            <el-input
+              v-if="!readonly && !shiFouGuoShen && isEdit"
+              v-model="row.junZhuBianHao"
+              size="mini"
+              placeholder="请输入"
+            />
+            <span v-else>{{ row.junZhuBianHao || '/' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="菌株名称" prop="junZhuMingCheng" width="120">
+          <template slot-scope="{ row }">
+            <el-input
+              v-if="!readonly && !shiFouGuoShen && isEdit"
+              v-model="row.junZhuMingCheng"
+              size="mini"
+              placeholder="请输入"
+            />
+            <span v-else>{{ row.junZhuMingCheng || '/' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="沙门菌属诊断血清">
+          <el-table-column label="O多价血清(A-F)" prop="duoJiaXieQing">
+            <template slot-scope="{ row }">
+              <el-input
+                v-if="!readonly && !shiFouGuoShen"
+                v-model="row.duoJiaXieQing"
+                size="mini"
+                placeholder="请输入"
+              />
+              <span v-else>{{ row.duoJiaXieQing || '/' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="O因子血清" prop="yinZiXieQing">
+            <template slot-scope="{ row }">
+              <el-input
+                v-if="!readonly && !shiFouGuoShen"
+                v-model="row.yinZiXieQing"
+                size="mini"
+                placeholder="请输入"
+              />
+              <span v-else>{{ row.yinZiXieQing || '/' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="H因子血清">
+            <el-table-column label="1相" prop="yinZiXieQing1Xian">
+              <template slot-scope="{ row }">
+                <el-input
+                  v-if="!readonly && !shiFouGuoShen"
+                  v-model="row.yinZiXieQing1Xian"
+                  size="mini"
+                  placeholder="请输入"
+                />
+                <span v-else>{{ row.yinZiXieQing1Xian || '/' }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="2相" prop="yinZiXieQing2Xian">
+              <template slot-scope="{ row }">
+                <el-input
+                  v-if="!readonly && !shiFouGuoShen"
+                  v-model="row.yinZiXieQing2Xian"
+                  size="mini"
+                  placeholder="请输入"
+                />
+                <span v-else>{{ row.yinZiXieQing2Xian || '/' }}</span>
+              </template>
+            </el-table-column>
+          </el-table-column>
+        </el-table-column>
+        <el-table-column label="志贺菌属诊断抗血清">
+          <el-table-column label="4种多价血清" prop="siZhongDuoJiaXieQ">
+            <template slot-scope="{ row }">
+              <el-input
+                v-if="!readonly && !shiFouGuoShen"
+                v-model="row.siZhongDuoJiaXieQ"
+                size="mini"
+                placeholder="请输入"
+              />
+              <span v-else>{{ row.siZhongDuoJiaXieQ || '/' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="痢疾志贺菌多价" prop="liJiZhiHeJunDuoJi">
+            <template slot-scope="{ row }">
+              <el-input
+                v-if="!readonly && !shiFouGuoShen"
+                v-model="row.liJiZhiHeJunDuoJi"
+                size="mini"
+                placeholder="请输入"
+              />
+              <span v-else>{{ row.liJiZhiHeJunDuoJi || '/' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="福氏志贺菌多价" prop="fuShiZhiHeJunDuoJ">
+            <template slot-scope="{ row }">
+              <el-input
+                v-if="!readonly && !shiFouGuoShen"
+                v-model="row.fuShiZhiHeJunDuoJ"
+                size="mini"
+                placeholder="请输入"
+              />
+              <span v-else>{{ row.fuShiZhiHeJunDuoJ || '/' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="鲍氏志贺菌多价" prop="baoShiZhiHeJunDuo">
+            <template slot-scope="{ row }">
+              <el-input
+                v-if="!readonly && !shiFouGuoShen"
+                v-model="row.baoShiZhiHeJunDuo"
+                size="mini"
+                placeholder="请输入"
+              />
+              <span v-else>{{ row.baoShiZhiHeJunDuo || '/' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="宋内氏志贺菌多价" prop="songNeiShiZhiHeJu">
+            <template slot-scope="{ row }">
+              <el-input
+                v-if="!readonly && !shiFouGuoShen"
+                v-model="row.songNeiShiZhiHeJu"
+                size="mini"
+                placeholder="请输入"
+              />
+              <span v-else>{{ row.songNeiShiZhiHeJu || '/' }}</span>
+            </template>
+          </el-table-column>
+        </el-table-column>
+        <el-table-column label="血清学鉴定结果" prop="xieQingXueJianDin">
+          <template slot-scope="{ row }">
+            <el-input
+              v-if="!readonly && !shiFouGuoShen"
+              v-model="row.xieQingXueJianDin"
+              size="mini"
+              placeholder="请输入"
+            />
+            <span v-else>{{ row.xieQingXueJianDin || '/' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="比对结果判断" prop="biDuiJieGuoPanDua">
+          <template slot-scope="{ row }">
+            <template v-if="!readonly && isEdit">
+              <el-radio v-model="row.biDuiJieGuoPanDua" label="通过"
+                >通过</el-radio
+              >
+              <el-radio v-model="row.biDuiJieGuoPanDua" label="不通过"
+                >不通过</el-radio
+              >
+            </template>
+            <template v-else>
+              <span>{{ row.biDuiJieGuoPanDua || '/' }}</span>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" prop="beiZhu">
+          <template slot-scope="{ row }">
+            <el-input
+              v-if="!readonly"
+              v-model="row.beiZhu"
+              size="mini"
+              placeholder="请输入"
+              type="textarea"
+            />
+            <span v-else>{{ row.beiZhu || '/' }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({})
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    params: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      tableData: [],
+      multipleSelection: [],
+      isRead: false,
+      isEdit: true
+    }
+  },
+  computed: {
+    shiFouGuoShen() {
+      return (
+        this.formData.shiFouGuoShen === '已编制' ||
+        this.formData.shiFouGuoShen === '已比对'
+      )
+    },
+    passRate() {
+      if (this.tableData.length === 0) return '0'
+      const passRateArr =
+        this.tableData.filter((item) => item.biDuiJieGuoPanDua === '通过') || []
+      return ((passRateArr.length / this.tableData.length) * 100).toFixed(2)
+    }
+  },
+  watch: {
+    'formData.smjzhjxqxsyrybdxqb': {
+      handler(val) {
+        if (val && val.length) {
+          this.tableData = val
+
+          if (
+            this.params?.nodeId === 'Activity_0zep3tf' &&
+            this.formData.faQiRen &&
+            this.isEdit
+          ) {
+            this.isEdit = false
+          }
+        } else {
+          if (this.tableData.length !== 0) {
+            this.tableData = []
+          }
+        }
+      },
+      immediate: true
+    },
+    tableData: {
+      handler(val) {
+        this.$emit('change-data', 'smjzhjxqxsyrybdxqb', val)
+        this.$emit('change-data', 'fuHeLv', this.passRate)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.isRead = this.readonly || this.params?.nodeId === 'Activity_14to8rh'
+  },
+
+  methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    handleAdd() {
+      const { level } = this.$store.getters
+      this.tableData.push({
+        id: '',
+        parentId: '',
+        diDian: level.second || level.first || '',
+        bianZhiRen: this.formData.bianZhiRen,
+        bianZhiBuMen: this.formData.bianZhiBuMen,
+        bianZhiShiJian: this.formData.bianZhiShiJian,
+        junZhuId: '',
+        junZhuBianHao: '',
+        junZhuMingCheng: '',
+        duoJiaXieQing: '',
+        yinZiXieQing: '',
+        yinZiXieQing1Xian: '',
+        yinZiXieQing2Xian: '',
+        siZhongDuoJiaXieQ: '',
+        liJiZhiHeJunDuoJi: '',
+        fuShiZhiHeJunDuoJ: '',
+        baoShiZhiHeJunDuo: '',
+        songNeiShiZhiHeJu: '',
+        xieQingXueJianDin: '',
+        biDuiJieGuoPanDua: '通过',
+        beiZhu: ''
+      })
+    },
+    // 删除
+    handleDelete() {
+      this.$confirm('确定删除当前选中数据？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        if (this.multipleSelection.length > 0) {
+          this.tableData = this.tableData.filter(
+            (row) => !this.multipleSelection.includes(row)
+          )
+        } else {
+          this.$message.warning('请选择数据')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.performance {
+  padding: 20px 0 0 20px;
+  .flex {
+    display: flex;
+    justify-content: space-between;
+    padding: 0px 0px 0px 15px;
+    background: #f0ffff;
+    .title {
+      color: red;
+      font-size: 12px;
+      font-weight: bold;
+      margin-bottom: 0;
+    }
+    .el-button {
+      margin: 0;
+    }
+  }
+}
+</style>

src/views/component/specialForm/specialForm.vue

@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="reagentQualitative">
+            <el-row type="flex">
+                <el-col>
+                    <el-table ref="external" :data="reagentBatchDataFilter">
+                        <el-table-column type="index" label="序号" />
+                        <el-table-column :label="formData.biaoMing=='t_sgrsfyyqrsfbdb'?'操作人':'比对人'" prop="bi_dui_ren_">
+                            <template scope="{row}">
+                                <ibps-user-selector
+                                    v-model="row.bi_dui_ren_"
+                                    type="user"
+                                    readonly-text="text"
+                                    :disabled="true"
+                                    :multiple="false"
+                                    size="mini"
+                                    style="width:100%"
+                                    :filter="filter"
+                                    filtrate
+                                />
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="状态" prop="shi_fou_guo_shen_">
+                            <template slot-scope="{row}">
+                                <span>{{ row.shi_fou_guo_shen_=='已完成'?'已完成':'未完成' }}</span>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <el-pagination
+                        layout="total,sizes,prev, pager, next,jumper"
+                        :current-page="requestPage.pageNo"
+                        :page-size="requestPage.limit"
+                        :page-sizes="[10,15,20,30,50,100]"
+                        :total="reagentBatchData.length"
+                        @size-change="handleSizeChange"
+                        @current-change="handleCurrentChange"
+                    />
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+<script>
+import ibpsUserSelector from '@/business/platform/org/selector'
+export default {
+    components: {
+        ibpsUserSelector
+    },
+    props: {
+        formData: {
+            type: Object,
+            default: () => {}
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        params: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    data () {
+        return {
+            reagentBatchData: [],
+            requestPage: {
+                limit: 10,
+                pageNo: 1
+            },
+            multipleSelection: [],
+            filter: [{
+                descVal: '1',
+                includeSub: true,
+                old: 'position',
+                partyId: this.$store.getters.userInfo.employee.positions,
+                partyName: '',
+                scriptContent: '',
+                type: 'user',
+                userType: 'position'
+            }]
+        }
+    },
+    computed: {
+        reagentBatchDataFilter () {
+            return this.reagentBatchData.slice((this.requestPage.pageNo - 1) * (this.requestPage.limit), (this.requestPage.pageNo - 1) * (this.requestPage.limit) + this.requestPage.limit)
+        }
+    },
+    watch: {
+        'formData.pid': {
+            handler (value) {
+                if (value) {
+                    this.initData()
+                }
+            },
+            immediate: true
+        },
+        'formData.biaoMing': {
+            handler (value) {
+                if (value) {
+                    this.initData()
+                }
+            },
+            immediate: true
+        }
+    },
+    mounted () {
+
+    },
+    methods: {
+        initData () {
+            const tableName = {
+                't_ymsyrybdb': 'ymsyrybd',
+                't_smjzhjxqxsyrybdb': 'xqxsyrybdfqjl',
+                't_sgrsfyyqrsfbdb': 'sgrsfyyqrsfbdbfqjl',
+                't_bbrsrybdb': 'bbrsrybdlbfqjl'
+            }
+            // const sql = `select * from t_ymsyrybdb where pid_ = '${this.formData.pid}' and type != 'startRecord'`
+            // const sql = `select * from t_smjzhjxqxsyrybdb where pid_ = '${this.formData.pid}' and type != 'startRecord'`
+            // const sql = `select * from t_sgrsfyyqrsfbdb where pid_ = '${this.formData.pid}' and type != 'startRecord'`
+            // const sql = `select * from t_bbrsrybdb where pid_ = '${this.formData.pid}' and type != 'startRecord'`
+            console.log(tableName[this.formData.biaoMing], 'key')
+            if (this.formData.pid && this.formData.biaoMing) {
+                this.$common.request('query', { key: tableName[this.formData.biaoMing], params: [this.formData.pid] }).then(res => {
+                    console.log(res.variables.data)
+                    this.reagentBatchData = res.variables.data || []
+                })
+            }
+        },
+        // 当前页码改变
+        handleCurrentChange (val) {
+            this.requestPage.pageNo = val
+        },
+        // 页码选择器改变
+        handleSizeChange (val) {
+            this.requestPage.limit = val
+            this.requestPage.pageNo = 1
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.reagentQualitative{
+    margin-bottom: 20px;
+}
+
+</style>