|
@@ -0,0 +1,316 @@
|
|
|
+<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>
|