|
@@ -1,6 +1,7 @@
|
|
|
<script setup lang="ts">
|
|
|
import { ref, reactive } from "vue";
|
|
|
import { ElMessageBox, ElMessage } from "element-plus";
|
|
|
+import { calculator } from "./evaluate";
|
|
|
import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
|
|
|
// const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
|
|
|
const drawer = ref(false);
|
|
@@ -9,6 +10,8 @@ const direction = ref<DrawerProps["direction"]>("rtl");
|
|
|
const formLabelAlign = reactive({
|
|
|
name: "",
|
|
|
region: "",
|
|
|
+ grade: "",
|
|
|
+ compute: "",
|
|
|
type: ""
|
|
|
});
|
|
|
const handleClose = (done: () => void) => {
|
|
@@ -42,6 +45,67 @@ defineExpose({
|
|
|
open
|
|
|
});
|
|
|
const timer = ref("");
|
|
|
+// 评分方式------------------------
|
|
|
+const options = [
|
|
|
+ {
|
|
|
+ value: "1",
|
|
|
+ label: "手动输入方式"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "2",
|
|
|
+ label: "公式自动计算"
|
|
|
+ }
|
|
|
+];
|
|
|
+// 公式计算
|
|
|
+const compute = [
|
|
|
+ {
|
|
|
+ value: "1",
|
|
|
+ label: "无公式计算"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "2",
|
|
|
+ label: "多公式计算"
|
|
|
+ }
|
|
|
+];
|
|
|
+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 lookRoles = item => {
|
|
|
+ bgColor.value = item.id;
|
|
|
+};
|
|
|
+// 字符拼接
|
|
|
+const countNumber = (item: string) => {
|
|
|
+ rolesList.value = rolesList.value + item;
|
|
|
+};
|
|
|
+// 清除
|
|
|
+const remove = () => {
|
|
|
+ if (rolesList.value.length > 0) {
|
|
|
+ rolesList.value = rolesList.value.slice(0, -1);
|
|
|
+ }
|
|
|
+};
|
|
|
+// 清空
|
|
|
+const removeVoid = () => {
|
|
|
+ rolesList.value = "";
|
|
|
+};
|
|
|
+// 计算确认
|
|
|
+const count = item => {
|
|
|
+ calculator.calculate(rolesList.value);
|
|
|
+ // console.log(calculator.get()); // 输出结果
|
|
|
+ rolesList.num = calculator.get();
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
@@ -50,6 +114,7 @@ const timer = ref("");
|
|
|
v-model="drawer"
|
|
|
:direction="direction"
|
|
|
:before-close="handleClose"
|
|
|
+ size="600px"
|
|
|
>
|
|
|
<template #header>
|
|
|
<h4>指标设置</h4>
|
|
@@ -62,11 +127,224 @@ const timer = ref("");
|
|
|
:model="formLabelAlign"
|
|
|
>
|
|
|
<el-form-item label="完成值录入人" label-position="top">
|
|
|
- <el-input />
|
|
|
+ <el-select v-model="formLabelAlign.grade" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="评分方式" label-position="top">
|
|
|
- <el-input />
|
|
|
+ <el-select v-model="formLabelAlign.grade" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
+ <div v-if="formLabelAlign.grade === '2'">
|
|
|
+ <el-form-item label="公式类型" label-position="top">
|
|
|
+ <el-select
|
|
|
+ v-model="formLabelAlign.compute"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in compute"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ v-if="formLabelAlign.compute === '1'"
|
|
|
+ label="公式设置"
|
|
|
+ label-position="top"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <el-text>得分 =</el-text>
|
|
|
+ <el-input
|
|
|
+ v-model="rolesList.num"
|
|
|
+ class="ml-2 mr-2"
|
|
|
+ style="width: 240px"
|
|
|
+ />
|
|
|
+ <el-text>
|
|
|
+ <el-button type="primary">公式验证</el-button>
|
|
|
+ </el-text>
|
|
|
+ </div>
|
|
|
+ <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',
|
|
|
+ { 'bg-blue-200': 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="rolesList.value"
|
|
|
+ :rows="3"
|
|
|
+ type="textarea"
|
|
|
+ placeholder=""
|
|
|
+ />
|
|
|
+ </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-center items-center rounded-lg cursor-pointer"
|
|
|
+ @click="countNumber('()')"
|
|
|
+ >
|
|
|
+ ()
|
|
|
+ </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>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-else label="公式设置">
|
|
|
+ <div>
|
|
|
+ <el-text>条件填 = </el-text
|
|
|
+ ><el-input v-model="formLabelAlign.name" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -79,3 +357,18 @@ const timer = ref("");
|
|
|
</el-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.compute {
|
|
|
+ // border: 1px solid #f3f3f3;
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.text-color {
|
|
|
+ color: #f3f3f3;
|
|
|
+}
|
|
|
+
|
|
|
+.areYouOK {
|
|
|
+ background-color: #409eff;
|
|
|
+}
|
|
|
+</style>
|