npmapps 1.1.4 → 1.1.5

package/app/wujie-vue2-child/src/components/FormulaEditor/OperatorSelector.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="selector-container">
+    <div class="header">操作符</div>
+    <div class="tree-wrapper">
+      <el-tree
+        :data="operatorData"
+        :props="defaultProps"
+        @node-click="handleNodeClick"
+        default-expand-all
+        :expand-on-click-node="false"
+      >
+        <span
+          class="custom-tree-node"
+          slot-scope="{ node, data }"
+          :draggable="!onlyLeafClickable || !data.children"
+          @dragstart="handleDragStart(node, data, $event)"
+        >
+          <span>{{ node.label }}</span>
+          <span v-if="!data.children && data.value" class="node-value">{{ data.value }}</span>
+        </span>
+      </el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "OperatorSelector",
+  props: {
+    onlyLeafClickable: {
+      type: Boolean,
+      default: true,
+    },
+    prefix: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      operatorData: [
+        {
+          label: "关键字",
+          children: [
+            { label: "如果", value: "if" },
+            { label: "否则", value: "else" },
+          ],
+        },
+        {
+          label: "计算运算符",
+          children: [
+            { label: "加", value: "+" },
+            { label: "减", value: "-" },
+            { label: "乘", value: "*" },
+            { label: "除", value: "/" },
+            { label: "取余", value: "%" },
+            { label: "左括号", value: "(" },
+            { label: "右括号", value: ")" },
+          ],
+        },
+        {
+          label: "比较运算符",
+          children: [
+            { label: "大于", value: ">" },
+            { label: "小于", value: "<" },
+            { label: "等于", value: "==" },
+            { label: "不等于", value: "!=" },
+            { label: "大于等于", value: ">=" },
+            { label: "小于等于", value: "<=" },
+          ],
+        },
+        {
+          label: "逻辑运算符",
+          children: [
+            { label: "并且", value: "&&" },
+            { label: "或者", value: "||" },
+            { label: "非", value: "!" },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    handleNodeClick(data) {
+      // 如果配置了只允许点击叶子节点，且当前节点有子节点，则不处理
+      if (this.onlyLeafClickable && data.children) {
+        return;
+      }
+      
+      // 处理特殊关键字
+      if (data.value === 'if') {
+        this.$emit("select", { label: data.label, value: `${this.prefix}如果(){\n  \n}` });
+      } else if (data.value === 'else') {
+        this.$emit("select", { label: data.label, value: `${this.prefix}否则{\n  \n}` });
+      } else {
+        this.$emit("select", { ...data, value: `${this.prefix}${data.value}` });
+      }
+    },
+    handleDragStart(node, data, e) {
+      if (this.onlyLeafClickable && data.children) {
+        e.preventDefault();
+        return;
+      }
+      
+      let value = '';
+      if (data.value === 'if') {
+        value = `${this.prefix}如果(){\n  \n}`;
+      } else if (data.value === 'else') {
+        value = `${this.prefix}否则{\n  \n}`;
+      } else {
+        value = `${this.prefix}${data.value}`;
+      }
+      
+      e.dataTransfer.setData("text/plain", value);
+      e.dataTransfer.effectAllowed = "copy";
+
+      // 设置自定义拖拽镜像
+      const div = document.createElement('div');
+      div.innerText = value;
+      div.style.position = 'absolute';
+      div.style.top = '-9999px';
+      div.style.padding = '5px 10px';
+      div.style.background = '#fff';
+      div.style.border = '1px solid #409eff';
+      div.style.borderRadius = '4px';
+      div.style.fontSize = '14px';
+      div.style.color = '#303133';
+      div.style.boxShadow = '0 2px 12px 0 rgba(0,0,0,0.1)';
+      div.style.zIndex = '9999';
+      // 保持换行
+      div.style.whiteSpace = 'pre';
+      document.body.appendChild(div);
+      
+      e.dataTransfer.setDragImage(div, 0, 0);
+      
+      setTimeout(() => {
+        document.body.removeChild(div);
+      }, 0);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.selector-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-bottom: 1px solid #ebeef5;
+  font-weight: bold;
+  text-align: center;
+}
+
+.tree-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  padding: 5px;
+}
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+
+.node-value {
+  color: #909399;
+  font-size: 12px;
+  font-family: monospace;
+}
+</style>

package/app/wujie-vue2-child/src/components/FormulaEditor/ParameterSelector.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="selector-container">
+    <div class="header">参数</div>
+    <div class="tree-wrapper">
+      <el-tree
+        :data="treeData"
+        :props="defaultProps"
+        @node-click="handleNodeClick"
+        default-expand-all
+        highlight-current
+      >
+        <span
+          class="custom-tree-node"
+          slot-scope="{ node, data }"
+          :draggable="!onlyLeafClickable || node.isLeaf"
+          @dragstart="handleDragStart(node, data, $event)"
+        >
+          {{ node.label }}
+        </span>
+      </el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getParameters } from "./api";
+
+export default {
+  name: "ParameterSelector",
+  props: {
+    onlyLeafClickable: {
+      type: Boolean,
+      default: true,
+    },
+    prefix: {
+      type: String,
+      default: "P_",
+    },
+  },
+  data() {
+    return {
+      treeData: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+    };
+  },
+  mounted() {
+    this.fetchData();
+  },
+  methods: {
+    async fetchData() {
+      this.treeData = await getParameters();
+    },
+    handleNodeClick(data, node) {
+      if (this.onlyLeafClickable && !node.isLeaf) {
+        return;
+      }
+      this.$emit("select", { ...data, value: `${this.prefix}${data.name}` });
+    },
+    handleDragStart(node, data, e) {
+      if (this.onlyLeafClickable && !node.isLeaf) {
+        e.preventDefault();
+        return;
+      }
+      const value = `${this.prefix}${data.name}`;
+      e.dataTransfer.setData("text/plain", value);
+      e.dataTransfer.effectAllowed = "copy";
+
+      // 设置自定义拖拽镜像
+      const div = document.createElement('div');
+      div.innerText = value;
+      div.style.position = 'absolute';
+      div.style.top = '-9999px';
+      div.style.padding = '5px 10px';
+      div.style.background = '#fff';
+      div.style.border = '1px solid #409eff';
+      div.style.borderRadius = '4px';
+      div.style.fontSize = '14px';
+      div.style.color = '#303133';
+      div.style.boxShadow = '0 2px 12px 0 rgba(0,0,0,0.1)';
+      div.style.zIndex = '9999';
+      document.body.appendChild(div);
+      
+      e.dataTransfer.setDragImage(div, 0, 0);
+      
+      setTimeout(() => {
+        document.body.removeChild(div);
+      }, 0);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+.selector-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-bottom: 1px solid #ebeef5;
+  font-weight: bold;
+  text-align: center;
+}
+
+.tree-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+}
+</style>

package/app/wujie-vue2-child/src/components/FormulaEditor/api.js

@@ -0,0 +1,69 @@
+export const getFunctions = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        {
+          id: 1,
+          label: '数学函数',
+          children: [
+            { id: 11, label: '求和', name: '求和' },
+            { id: 12, label: '平均值', name: '平均值' },
+            { id: 13, label: '最大值', name: '最大值' },
+            { id: 14, label: '最小值', name: '最小值' }
+          ]
+        },
+        {
+          id: 2,
+          label: '逻辑函数',
+          children: [
+            { id: 21, label: '条件判断', name: '条件判断' },
+            { id: 22, label: '与', name: '与' },
+            { id: 23, label: '或', name: '或' }
+          ]
+        },
+        {
+            id: 3,
+            label: '文本函数',
+            children: [
+                { id: 31, label: '拼接', name: '拼接' },
+                { id: 32, label: '截取', name: '截取' }
+            ]
+        }
+      ]);
+    }, 500);
+  });
+};
+
+export const getParameters = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        {
+          id: 100,
+          label: '基础信息',
+          children: [
+            { id: 101, label: '员工姓名', name: '员工姓名' },
+            { id: 102, label: '入职日期', name: '入职日期' },
+            { id: 103, label: '部门', name: '部门' }
+          ]
+        },
+        {
+          id: 200,
+          label: '薪资数据',
+          children: [
+            {
+              id: 210,
+              label: '基本工资',
+              children: [
+                  { id: 211, label: '岗位工资', name: '岗位工资' },
+                  { id: 212, label: '绩效基数', name: '绩效基数' }
+              ]
+            },
+            { id: 220, label: '奖金', name: '奖金' },
+            { id: 230, label: '补贴', name: '补贴' }
+          ]
+        }
+      ]);
+    }, 500);
+  });
+};