hospital-project/src/views/evaluate/children/change/components/jishuanqi.vue

<template>
  <div>
    <el-dropdown
      ref="dropdown"
      placement="bottom-start"
      trigger="click"
      @visible-change="handleMouseLeave"
      @close="handleClose"
      @mouseleave="handleMouseLeave"
    >
      <span class="el-dropdown-link">
        <el-input
          v-model="params.formula.noConditionFormula"
          @blur="handleMouseLeave"
          @change="handleMouseLeave"
        />
      </span>
      <template #dropdown>
        <div
          class="w-[500px] compute h-64 mt-1 ml-12 flex justify-evenly items-center"
          style="user-select: none"
        >
          <div class="w-1/3 h-60 pl-1 bg-white rounded-md">
            <div class="w-[100%] text-xs mt-2">
              <div><el-text type="info">:::变量</el-text></div>
            </div>
            <div v-for="item in rolesList.data" :key="item.id">
              <div
                :class="[
                  'cursor-pointer text-xs mt-1',
                  { bgBack: bgColor === item.id }
                ]"
                @click="lookRoles(item)"
              >
                <el-text class="">{{ item.name }}</el-text>
              </div>
            </div>
          </div>
          <div class="w-3/5 ml-2 h-60 flex flex-col">
            <div class="w-[100%] text-xs h-24 bg-white rounded-md">
              <div class="p-1"><el-text>得分 = </el-text></div>
              <!-- style="height: 95px" -->
              <el-input
                v-model="params.formula.noConditionFormula"
                :rows="3"
                disabled
                type="textarea"
                placeholder='示例:"完成值" / "目标值" * 100'
              />
            </div>
            <div class="w-[100%] h-32 mt-2 rounded-md flex flex-col">
              <div class="flex justify-between h-8">
                <div
                  class="h-full w-[50px] bg-white mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                  @click="countNumber('1')"
                >
                  1
                </div>
                <div
                  class="h-full w-[50px] bg-white mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                  @click="countNumber('2')"
                >
                  2
                </div>
                <div
                  class="h-full w-[50px] bg-white mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                  @click="countNumber('3')"
                >
                  3
                </div>
                <div
                  class="h-full w-[50px] bg-white mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                  @click="countNumber('+')"
                >
                  +
                </div>
                <div
                  class="h-full w-[50px] text-white bg-orange-400 mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                  @click="remove"
                >
                  x
                </div>
              </div>
              <div class="flex justify-between h-8 mt-1">
                <div
                  class="h-full w-[50px] bg-white mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                  @click="countNumber('4')"
                >
                  4
                </div>
                <div
                  class="h-full w-[50px] bg-white mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                  @click="countNumber('5')"
                >
                  5
                </div>
                <div
                  class="h-full w-[50px] bg-white mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                  @click="countNumber('6')"
                >
                  6
                </div>
                <div
                  class="h-full w-[50px] bg-white mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                  @click="countNumber('-')"
                >
                  -
                </div>
                <div
                  class="text-xs h-full w-[50px] text-white bg-orange-400 mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                  @click="removeVoid"
                >
                  清空
                </div>
              </div>
              <div class="flex justify-between h-16 mt-1">
                <div>
                  <div class="flex justify-between">
                    <div
                      class="h-full w-[50px] bg-white mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                      @click="countNumber('7')"
                    >
                      7
                    </div>
                    <div
                      class="h-full ml-1 w-[50px] bg-white mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                      @click="countNumber('8')"
                    >
                      8
                    </div>
                    <div
                      class="h-full ml-2 w-[50px] bg-white mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                      @click="countNumber('9')"
                    >
                      9
                    </div>
                    <div
                      class="h-full w-[50px] bg-white mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                      @click="countNumber('*')"
                    >
                      *
                    </div>
                  </div>
                  <div class="flex mt-1 justify-between">
                    <div
                      class="h-full w-[50px] bg-white mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                      @click="countNumber('0')"
                    >
                      0
                    </div>
                    <div
                      class="h-full ml-1 w-[50px] bg-white mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                      @click="countNumber('.')"
                    >
                      .
                    </div>
                    <div
                      class="h-full ml-2 w-[50px] bg-white mx-1 flex justify-between items-center rounded-lg cursor-pointer"
                    >
                      <div
                        class="w-1/2 h-full text-center border-r text-gray-100"
                        @click="countNumber('(')"
                      >
                        <span class="text-black"> (</span>
                      </div>
                      <div
                        class="w-1/2 h-full text-center"
                        @click="countNumber(')')"
                      >
                        )
                      </div>
                    </div>
                    <div
                      class="h-full w-[50px] bg-white mx-1 flex justify-center items-center rounded-lg cursor-pointer"
                      @click="countNumber('/')"
                    >
                      /
                    </div>
                  </div>
                </div>
                <div
                  class="h-full mr-1 w-[50px] text-white flex justify-center items-center rounded-lg cursor-pointer areYouOK"
                  @click="count"
                >
                  确认
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
const dropdown = ref();
const $emit = defineEmits(["handClick", "clickIndex"]);
const $props = defineProps({
  index: {
    type: Number
  },
  indexList: {
    type: Number
  },
  outerConditionValue: {
    type: String
  }
});
onMounted(() => {
  if ($props.outerConditionValue) {
    params.formula.noConditionFormula = $props.outerConditionValue;
  }
});
const bgColor = ref(null);
const rolesList = reactive({
  data: [
    { name: "完成值 / 目标值", id: 1 },
    { name: "完成值 - 目标值", id: 2 },
    { name: "目标值 - 完成值", id: 3 },
    { name: "门槛值", id: 4 },
    { name: "目标值", id: 5 },
    { name: "挑战值", id: 6 },
    { name: "完成值", id: 7 },
    { name: "增幅", id: 8 },
    { name: "降幅", id: 9 }
  ],
  value: "",
  num: null
});
const params = reactive({
  formula: {
    noConditionFormula: ""
  }
});
const lookRoles = item => {
  bgColor.value = item.id;
  params.formula.noConditionFormula =
    params.formula.noConditionFormula + item.name;
};
// 字符拼接
const countNumber = (item: string) => {
  params.formula.noConditionFormula = params.formula.noConditionFormula + item;
};
// 清空
const removeVoid = () => {
  params.formula.noConditionFormula = "";
};
// 清除
const remove = () => {
  if (params.formula.noConditionFormula.length > 0) {
    params.formula.noConditionFormula = params.formula.noConditionFormula.slice(
      0,
      -1
    );
  }
};
// 确认
const count = item => {
  $emit(
    "handClick",
    params.formula.noConditionFormula,
    $props.index,
    $props.indexList
  );
};
const handleClose = () => {
  console.log("关闭");
};
const handleMouseLeave = blo => {
  if (!blo) {
    $emit(
      "handClick",
      params.formula.noConditionFormula,
      $props.index,
      $props.indexList
    );
  }
};
defineExpose({
  params
});
</script>

<style lang="scss" scoped>
.compute {
  background-color: #f3f3f3;
  border-radius: 5px;
}

.text-color {
  color: #f3f3f3;
}

.areYouOK {
  background-color: #409eff;
}

.bgBack {
  background-color: #f3f3f3;
}

.text_border {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  // margin-top: 5px;
  margin-right: 5px;
  font-size: 12px;
  border: 1px solid gray;
  border-radius: 50%;
}
</style>