imeik-bizui 2.2.6 → 2.2.8

package/dist/bizui/src/BeforeAndAfterSurgeryItem/components/DictionaryCascaderNew.vue

@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <p v-if="isView" style="line-height: 18px;">{{ getValueName() }}</p>
+    <el-cascader
+      v-else
+      v-model="myValue"
+      style="width: 100%"
+      v-bind="$attrs"
+      :props="cascaderProps"
+      :options="options"
+      :placeholder="$attrs.placeholder || '请选择'"
+      :clearable="$attrs.clearable === false ? false : true"
+      :filterable="$attrs.filterable === false ? false : true"
+      :show-all-levels="false"
+      :collapse-tags="false"
+      @change="handleChange"
+    ></el-cascader>
+  </div>
+</template>
+
+<script>
+import { getTagDicType } from '@/api/meeting/index.js'
+
+export default {
+  name: 'DictionaryCascader',
+  props: {
+    value: {
+      type: [String, Number, Array],
+      default: undefined
+    },
+    sign: {
+      required: true,
+      type: String,
+      default: ''
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    showAllLevels: {
+      type: Boolean,
+      default: false
+    },
+    emitPath: {
+      type: Boolean,
+      default: true
+    },
+    propValue: {
+      type: String,
+      default: 'objectCode'
+    },
+    totalItem: {
+      type: Object,
+      default() {
+        return null
+      }
+    },
+    extra: {
+      type: Object,
+      default: () => ({})
+    },
+    isView: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      myValue: undefined,
+      options: []
+    }
+  },
+  computed: {
+    cascaderProps() {
+      return {
+        multiple: this.multiple,
+        label: 'dicName',
+        value: 'dicValue',
+        children: 'subRegin',
+        emitPath: false
+      }
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        this.setMyValue()
+      }
+    }
+  },
+  created() {
+    this.getOptions()
+  },
+  methods: {
+    setMyValue() {
+      try {
+        this.myValue = JSON.parse(JSON.stringify(this.value))
+      } catch (error) {
+        this.myValue = undefined
+      }
+    },
+    // 按照某个字段排序
+    sortOptions(arr, field) {
+      const result = arr.sort((a, b) => {
+        if (a.options && a.options.length) {
+          a.options = this.sortOptions(a.options, field)
+        }
+        return parseInt(a[field]) - parseInt(b[field])
+      })
+      return result
+    },
+    getOptions() {
+      getTagDicType({
+        dicTypeCode: 'cs-zsbw'
+      }).then((res) => {
+        if (res.code === 200) {
+          this.options = res.data
+        }
+      })
+    },
+
+    // 删除为空数组的options
+    loopRemoveEmptyOptions(arr) {
+      return arr.map((i) => {
+        if (!i.options || !i.options.length) {
+          delete i.options
+        } else {
+          this.loopRemoveEmptyOptions(i.options)
+        }
+
+        return i
+      })
+    },
+
+    handleChange() {
+      this.$emit('input', this.myValue)
+      this.$emit('change', this.myValue)
+    },
+    getValueName() {
+      const value = this.myValue
+      if (!value) {
+        return ''
+      }
+      const options = this.options
+      const result = []
+      const loop = (arr) => {
+        arr.forEach((i) => {
+          if (value.includes(i.dicValue)) {
+            result.push(i.dicName)
+          } else if (i.subRegin && i.subRegin.length) {
+            loop(i.subRegin)
+          }
+        })
+      }
+      loop(options)
+      return result.join(',')
+    }
+  }
+}
+</script>
+
+<style scoped >
+</style>

package/dist/bizui/src/BeforeAndAfterSurgeryItem/index.vue

@@ -0,0 +1,523 @@
+<!-- 术前术后对比照组件 -->
+<template>
+  <div>
+    <p class="title">
+      术前术后对比照
+      <span class="tip-title"><i class="el-icon-warning-outline mr-1"></i>当涉及不同的医生、产品、部位的照片，请注意拆分多组上传！</span>
+    </p>
+    <el-form ref="dynamicValidateForm" :model="dynamicValidateForm" label-position="top">
+      <div v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.key || index" class="domain-item">
+        <img
+          v-if="!isView && !isDisabled"
+          src="https://imeikud.oss-cn-beijing.aliyuncs.com/pcUploads/1760511384463/%E5%88%A0%E9%99%A4%402x%20(2).png"
+          class="delete-icon"
+          @click="removeDomain(index)"
+        />
+        <el-row v-if="!isOldData" :gutter="24">
+          <el-col :span="6">
+            <el-form-item
+              :label="`注射医生`"
+              :prop="`domains[${index}].doctorNumber`"
+              :rules="{
+                required: isRequired,
+                message: '请选择注射医生',
+                trigger: 'change'
+              }"
+            >
+              <ImSelect
+                v-if="!isView"
+                v-model="domain.doctorNumber"
+                :attrs="{
+                  style: 'width:100%',
+                  options: doctorList,
+                  placeholder: '请选择',
+                  disabled: isDisabled,
+                  filterable: true,
+                  isView: isView
+                }"
+                :listeners="{ change: (data) => handleDoctorChange(data, domain) }"
+              ></ImSelect>
+              <div style="height: 18px; line-height: 18px" v-else>{{ domain.doctorName || '-' }}</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item
+              :label="`注射产品`"
+              :prop="`domains[${index}].injectionProducts`"
+              :rules="{
+                type: 'array',
+                required: isRequired,
+                message: '请选择注射产品',
+                trigger: 'change'
+              }"
+            >
+              <ImSelect
+                v-model="domain.injectionProducts"
+                :attrs="{
+                  style: 'width:100%',
+                  options: productList,
+                  placeholder: '请选择',
+                  isView: isView,
+                  filterable: true,
+                  disabled: isDisabled,
+                  multiple: true
+                }"
+              ></ImSelect>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item
+              :label="`注射部位`"
+              :prop="'domains.' + index + '.injectionParts'"
+              :rules="{
+                type: 'array',
+                required: isRequired,
+                message: '请选择注射部位',
+                trigger: 'change'
+              }"
+            >
+              <DictionaryCascader
+                v-model="domain.injectionParts"
+                sign="coursePartition"
+                prop-value="sign"
+                popper-class="full-height"
+                :extra="courseExtra"
+                :multiple="true"
+                :collapse-tags="true"
+                :show-all-levels="true"
+                :isView="isView"
+                :disabled="isDisabled"
+              ></DictionaryCascader>
+              <div v-if="isView && domain.injectionParts.length === 0">-</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item
+              :label="`注射时间`"
+              :prop="'domains.' + index + '.injectionTime'"
+              :rules="{
+                required: isRequired,
+                message: '请输入注射时间',
+                trigger: 'change'
+              }"
+            >
+              <ImDatePicker
+                v-if="!isView"
+                v-model="domain.injectionTime"
+                :attrs="{
+                  style: 'width:100%',
+                  placeholder: '请选择注射时间',
+                  valueFormat: 'yyyy-MM-dd',
+                  isView: isView,
+                  disabled: isDisabled
+                }"
+              ></ImDatePicker>
+              <div v-else-if="domain.injectionTime" style="height: 18px; line-height: 18px">{{ domain.injectionTime.slice(0, 10) }}</div>
+              <div v-else style="height: 18px; line-height: 18px">-</div>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="24">
+            <el-form-item
+              :label="`是否可对外使用`"
+              :prop="'domains.' + index + '.canExternalUse'"
+              :rules="{
+                required: isRequired,
+                message: '请选择是否可对外使用',
+                trigger: 'change'
+              }"
+            >
+              <el-radio-group v-if="!isView" v-model="domain.canExternalUse" :disabled="isDisabled">
+                <el-radio :label="1">是</el-radio>
+                <el-radio :label="0">否</el-radio>
+              </el-radio-group>
+              <div style="height: 18px; line-height: 18px" v-else>
+                <span v-if="domain.canExternalUse === 1">是</span>
+                <span v-else-if="domain.canExternalUse === 0">否</span>
+                <span v-else>-</span>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item
+              :label="`图片`"
+              :prop="'domains.' + index + '.originalAttachArray'"
+              :rules="{
+                required: isRequired,
+                message: '请上传图片',
+                trigger: 'change'
+              }"
+            >
+              <ImFieldFileUpload
+                v-model="domain.originalAttachArray"
+                :attrs="{
+                  safe: true,
+                  isView: isView,
+                  disabled: isDisabled,
+                  fileType: 'image',
+                  fileSize: 500 * 1024,
+                  accept: '.jpg,.jpeg,.png,.zip',
+                  tipText: '上传格式支持：png、jpg、jpeg、zip压缩包，可以上传多个，大小限制500M以内。'
+                }"
+              ></ImFieldFileUpload>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+    <div v-if="!isView && !isDisabled" class="text-center">
+      <el-button class="add-button" icon="el-icon-plus" @click="addDomain()">添加</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import DictionaryCascader from './components/DictionaryCascaderNew.vue'
+import { getProductArchivesList, listInjectionDoctor, listInjectionProduct } from '@/api/meeting/index.js'
+
+export default {
+  name: 'BeforeAndAfterSurgeryItem',
+  components: { DictionaryCascader },
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: Array,
+      default: () => []
+    },
+    attrs: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      appendProduct: [],
+      courseExtra: {
+        orderFlag: 1
+      },
+      canBeUdExternally: [
+        {
+          value: '1',
+          label: '是'
+        },
+        {
+          value: '0',
+          label: '否'
+        }
+      ],
+
+      dynamicValidateForm: {
+        domains: []
+      },
+      // 用于避免死循环的标志
+      isUpdatingFromParent: false,
+      doctorList: [],
+      productList: [],
+      isOldData: false
+    }
+  },
+  computed: {
+    isView() {
+      return this.attrs.isView
+    },
+    isDisabled() {
+      return this.attrs.disabled
+    },
+    isRequired() {
+      return this.attrs.isRequired
+    },
+    domainsItme() {
+      return {
+        doctorNumber: '', // 注射医生
+        doctorName: '',
+        doctorMobile: '',
+        injectionProducts: '', // 注射产品
+        injectionParts: '', // 注射部位
+        injectionTime: this.attrs.holdingTim ? this.attrs.holdingTim : '', // 注射时间
+        canExternalUse: '', // 是否可对外使用
+        originalAttachArray: [], // 图片
+        key: Date.now(),
+        productNameList: []
+      }
+    }
+  },
+  watch: {
+    attrs: {
+      handler(newVal) {
+        this.initData()
+      },
+      deep: true
+    },
+    dynamicValidateForm: {
+      handler(newVal) {
+        console.log('dynamicValidateForm监听', this.dynamicValidateForm.domains)
+      },
+      deep: true
+    },
+    list: {
+      handler(newVal) {
+        // 设置标志，避免触发向父组件发送更新
+        this.isUpdatingFromParent = true
+        if (newVal && newVal.length > 0) {
+          newVal.forEach((item) => {
+            if (Object.keys(item)?.length === 1) {
+              this.isOldData = true
+            }
+            if (!item.injectionProducts) {
+              item.injectionProducts = []
+            }
+            if (!item.injectionParts) {
+              item.injectionParts = []
+            }
+          })
+          this.dynamicValidateForm.domains = newVal.map((item) => ({
+            ...item,
+            key: item.key || Date.now() + Math.random()
+          }))
+        }
+        if ((!newVal || newVal.length === 0) && this.isView) {
+          this.isOldData = true
+        }
+        // 在下一个tick重置标志
+        this.$nextTick(() => {
+          this.isUpdatingFromParent = false
+        })
+      },
+      immediate: true,
+      deep: true
+    },
+    value: {
+      handler(newVal) {
+        if (!newVal || newVal.length === 0) return
+        // 设置标志，避免触发向父组件发送更新
+        this.isUpdatingFromParent = true
+        if (newVal && newVal.length > 0) {
+          newVal.forEach((item) => {
+            if (!item.injectionProducts) {
+              item.injectionProducts = []
+            }
+            if (!item.injectionParts) {
+              item.injectionParts = []
+            }
+          })
+          this.dynamicValidateForm.domains = newVal.map((item) => ({
+            ...item,
+            key: item.key || Date.now() + Math.random()
+          }))
+        }
+        // 在下一个tick重置标志
+        this.$nextTick(() => {
+          this.isUpdatingFromParent = false
+        })
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  created() {
+    if (!this.dynamicValidateForm.domains.length) {
+      this.dynamicValidateForm.domains.push(this.domainsItme)
+    }
+  },
+  methods: {
+    getFormListData() {
+      this.$refs.dynamicValidateForm.validate((valid) => {
+        if (valid) {
+          const data = this.dynamicValidateForm.domains
+          this.dynamicValidateForm.domains.forEach((item) => {
+            item.productNameList = this.getProductName(item.injectionProducts)
+          })
+          this.$emit('input', data)
+          // this.$emit('change', data)
+        } else {
+          this.$message.error('请完善表单信息!')
+          this.$emit('input', null)
+          // this.$emit('change', null)
+        }
+      })
+    },
+    getProductName(data) {
+      const list = []
+      this.productList.forEach((item) => {
+        if (data.includes(item.value)) {
+          list.push(item.label)
+        }
+      })
+      return list
+    },
+    initData() {
+      if (this.attrs.doctorListData && this.attrs.doctorListData.length) {
+        this.doctorList = this.attrs.doctorListData.map((item) => ({
+          ...item,
+          value: item.lecturerCode
+        }))
+        if (!this.isRequired) {
+          this.doctorList = []
+        }
+      }
+      if (!this.isView) {
+        this.getAppendDoctorList()
+        this.getAppendProductList()
+      } else {
+        this.getProductList()
+      }
+    },
+    getAppendProductList() {
+      if (this.attrs.objectCode) {
+        listInjectionProduct(this.attrs.objectCode).then((res) => {
+          if (res.code === 200) {
+            this.appendProduct = res.data || []
+            this.getProductList()
+          }
+        })
+      }
+    },
+    getAppendDoctorList() {
+      if (this.attrs.objectCode) {
+        listInjectionDoctor(this.attrs.objectCode).then((res) => {
+          if (res.code === 200) {
+            const code = []
+            const codeListKeys = this.doctorList.map((item) => item.value)
+            res.data.forEach((item) => {
+              if (codeListKeys.includes(item.lecturerCode)) {
+                return
+              } else {
+                code.push({
+                  ...item,
+                  value: item.lecturerCode,
+                  label: item.lecturerName + ' ' + item.phone
+                })
+              }
+            })
+            this.doctorList = [...this.doctorList, ...code]
+          }
+        })
+      }
+    },
+    getProductList() {
+      if (!this.attrs?.productListParams?.belongCompanyCode) {
+        return
+      }
+      if (this.appendProduct && this.appendProduct.length) {
+        this.$set(this.attrs, 'productCodeList', [...this.attrs.productCodeList, ...this.appendProduct])
+      }
+      getProductArchivesList(this.attrs.productListParams).then((res) => {
+        if (res.code === 200) {
+          res.data?.forEach((element) => {
+            element.label = element.productName
+            element.value = element.productCode
+          })
+          this.productList = res.data
+        }
+      })
+    },
+    removeDomain(index) {
+      if (this.dynamicValidateForm.domains.length > 1) {
+        // 设置标志，避免触发向父组件发送更新
+        this.isUpdatingFromParent = true
+        this.dynamicValidateForm.domains.splice(index, 1)
+        // 在下一个tick重置标志
+        this.$nextTick(() => {
+          this.isUpdatingFromParent = false
+        })
+      } else {
+        this.$message.warning('至少保留一行!')
+      }
+    },
+    addDomain() {
+      const newDomain = {
+        doctorNumber: '', // 注射医生
+        doctorName: '',
+        doctorMobile: '',
+        injectionProducts: '', // 注射产品
+        injectionParts: '', // 注射部位
+        injectionTime: this.attrs.holdingTim, // 注射时间
+        canExternalUse: '', // 是否可对外使用
+        originalAttachArray: [], // 图片
+        key: Date.now(),
+        productNameList: []
+      }
+
+      // 设置标志，避免触发向父组件发送更新
+      this.isUpdatingFromParent = true
+      this.dynamicValidateForm.domains.push(newDomain)
+      this.$emit('input', this.dynamicValidateForm.domains)
+      // this.$emit('change', this.dynamicValidateForm.domains)
+
+      // 在下一个tick重置标志
+      this.$nextTick(() => {
+        this.isUpdatingFromParent = false
+      })
+    },
+    handleDoctorChange(data, item) {
+      const doctorInfo = this.doctorList.find((item) => item.value === data)
+      this.$set(item, 'doctorName', doctorInfo.lecturerName)
+      this.$set(item, 'doctorMobile', doctorInfo.phone)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.domain-item {
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 15px;
+  margin-bottom: 20px;
+  background-color: #f7f7f9;
+  position: relative;
+}
+
+.el-button[type='danger'] {
+  margin-top: 30px;
+}
+
+.el-form-item {
+  margin-bottom: 18px;
+}
+
+::v-deep .el-col {
+  padding-bottom: 10px;
+}
+.add-button {
+  width: 100%;
+  border: 1px dashed rgb(220, 223, 230);
+}
+.delete-icon {
+  position: absolute;
+  height: 24px;
+  width: 24px;
+  right: 0;
+  top: 0px;
+  cursor: pointer;
+}
+.title {
+  font-weight: 600;
+  font-size: 16px;
+  color: #000000;
+  line-height: 24px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+}
+.tip-title {
+  font-weight: 400;
+  font-size: 12px;
+  color: #909399;
+  line-height: 24px;
+  margin-left: 10px;
+}
+::v-deep .el-form-item__label {
+  padding: 0 !important;
+}
+</style>