index.vue

<template>
  <div class="dental-tab">
    <div class="header">
      <el-form>
        <span style="margin-right: 10px" v-if="item.label">{{
          item.label || ""
        }}</span>
      </el-form>
    </div>
    <div class="dental-tab-content" v-if="list.length > 0">
      <el-form ref="form" :model="formUp" :disabled="dentalDisabled">
        <div
          class="flex dental-box"
          v-for="(row, rowIndex) in list"
          :key="rowIndex"
        >
          <div :class="row.twoCell ? 'dental-title2' : 'dental-title1'">
            <span>{{ row.title }}</span>
          </div>
          <div
            v-for="(t, index) in 14"
            class="flex"
            :key="index"
            :style="{
              marginLeft: index === 7 ? '20px' : '',
              width: '60px',
              flexWrap: 'wrap',
            }"
          >
            <div
              :style="{ width: row.width || '60px' }"
              :class="(cellIndex + 1) % 3 === 0 ? 'pieces' : ''"
              v-for="(cell, cellIndex) in row.cellNo || 1"
              :key="cellIndex"
            >
              <form-item-self
                :form="formUp"
                :item="{ ...row.item, prop: index + row.item.prop + cellIndex }"
                style="margin: 0"
                hidden-label
              ></form-item-self>
            </div>
          </div>
        </div>
      </el-form>
      <div class="line flex dental-box">
        <div class="dental-title1"></div>
        <div
          v-for="(t, index) in 7"
          :key="index"
          :style="{
            width: '60px',
            textAlign: 'center',
            lineHeight: '32px',
          }"
        >
          {{ 7 - index }}
        </div>
        <div style="margin-left: 20px" class="flex">
          <div
            v-for="(t, index) in 7"
            :key="index"
            :style="{
              width: '60px',
              textAlign: 'center',
              lineHeight: '32px',
            }"
          >
            {{ index + 1 }}
          </div>
        </div>
      </div>
      <el-form ref="form" :model="formDown" :disabled="dentalDisabled">
        <div
          class="flex dental-box"
          v-for="(row, rowIndex) in deepClone(list).reverse()"
          :key="rowIndex"
        >
          <div :class="row.twoCell ? 'dental-title2' : 'dental-title1'">
            <span>{{ row.title }}</span>
          </div>
          <div
            v-for="(t, index) in 14"
            class="flex"
            :key="index"
            :style="{
              marginLeft: index === 7 ? '20px' : '',
              width: '60px',
              flexWrap: 'wrap',
            }"
          >
            <div
              :style="{ width: row.width || '60px' }"
              v-for="(cell, cellIndex) in row.cellNo || 1"
              :class="(cellIndex + 1) % 3 === 0 ? 'pieces' : ''"
              :key="cellIndex"
            >
              <form-item-self
                :form="formDown"
                :item="{ ...row.item, prop: index + row.item.prop + cellIndex }"
                style="margin: 0"
                hidden-label
              ></form-item-self>
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
/**
 * @description 九院牙周病大表格
 */

import { isObject } from "@/utils/validate"
import FormItemSelf from "./FormItemSelf.vue"
const field = ["formDown", "formUp"]

export default {
  components: { FormItemSelf },
  name: "DentalTabForm",
  inject: {
    vwForm: {
      default: "",
    },
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      show: true,
      formDown: {},
      formUp: {},
      list: [
        {
          title: "松动度",
          item: {
            type: "input",
            notClearable: true,
            prop: "mobility",
          },
        },
        {
          title: "根分叉",
          item: {
            type: "input",
            notClearable: true,
            prop: "FI",
          },
        },
        {
          title: "PLI",
          item: {
            type: "input",
            notClearable: true,
            prop: "PLI",
          },
        },
        {
          title: "GI",
          item: {
            type: "input",
            notClearable: true,
            prop: "GI",
          },
        },
        {
          title: "BOP",
          cellNo: 6,
          width: "20px",
          twoCell: true,
          item: {
            type: "input",
            notClearable: true,
            prop: "BOP",
          },
        },
        {
          title: "CAL",
          cellNo: 6,
          width: "20px",
          twoCell: true,
          item: {
            type: "number",
            prop: "CAL",
            notClearable: true,
            blur: this.getAverageCAL,
          },
        },
        {
          title: "GM",
          cellNo: 6,
          width: "20px",
          twoCell: true,
          item: {
            type: "number",
            prop: "GM",
          },
        },
        {
          title: "PD",
          cellNo: 6,
          width: "20px",
          twoCell: true,
          item: {
            type: "number",
            prop: "PD",
            blur: this.getAveragePD,
          },
        },
      ],
      nativeValue: null,
    }
  },
  computed: {
    dentalDisabled() {
      return this.disabled || (this.vwForm || {}).disabled
    },
  },
  methods: {
    getAveragePD() {
      const averagePD = this.getAverage("PD")
      this.$emit("change", "PJTZSD", averagePD)
    },
    getAverageCAL() {
      const averageCAL = this.getAverage("CAL")
      this.$emit("change", "PJFZSS", averageCAL)
    },
    getAverage(key) {
      let total = 0
      let fillNum = 0
      for (let k in this.formUp) {
        if (k.includes(key) && this.formUp[k] > 0) {
          total += this.formUp[k]
          fillNum++
        }
      }
      for (let k in this.formDown) {
        if (k.includes(key) && this.formDown[k] > 0) {
          total += this.formDown[k]
          fillNum++
        }
      }
      return fillNum > 0 ? Math.round((total / fillNum) * 100) / 100 : ""
    },

    resetDentalForm() {
      // this.formDown = {}
      // this.formUp = {}
      // this.$set(this.value, "formDown", this.formDown)
      // this.$set(this.value, "formUp", this.formUp)
    },
    setValue() {
      if (!isObject(this.value) || this.nativeValue === this.value) {
        this.$emit("input", {})
        return
      }
      field.forEach((k) => {
        if (!this.value.hasOwnProperty(k)) {
          this[k] = {}
          this.value[k] = this[k]
        } else {
          this[k] = this.value[k]
        }
      })
      for (let key in this.value) {
        if (!field.find((_) => _ === key)) {
          delete this.$delete(this.value, key)
        }
      }
    },
    init() {
      const value = {
        formDown: this.formDown,
        formUp: this.formUp,
      }
      this.$emit("input", value)
      this.$nextTick(() => {
        this.$watch("value", () => {
          this.setValue()
        })
      })
    },
  },
  created() {
    this.nativeValue = this.value
  },
  mounted() {
    this.init()
  },
}
</script>
<style lang="scss" scoped>
.dental-tab {
  overflow: auto;
  .header {
    font-size: 16px;
  }
  .dental-tab-content {
    background-color: #fff;
    width: 960px;
    margin: 15px auto;
    ::v-deep .el-form-item {
      padding: 0 !important;
    }
  }
  .dental-box {
    .dental-title1,
    .dental-title2 {
      width: 100px;
      height: 33px;
      line-height: 32px;
      text-align: center;
      border: 1px solid #ebeef5;
      border-right-color: transparent;
      // &:first-child {
      //   border-color: #ebeef5;
      // }
    }
    .pieces {
      ::v-deep .el-input .el-input__inner {
        border-right-color: rgb(117, 114, 114);
      }
    }
    .dental-title2 {
      line-height: 66px;
      height: 66px;
    }
  }
}
::v-deep {
  .el-input__inner {
    border-radius: 0;
    // border-left-color: transparent;
    // border-right-color: transparent;
  }
}
</style>