修改fonticon

src/components/workflow/nodeWrap.vue

@@ -1,305 +1,386 @@
-
 import { loginApi } from '@/api/auth';
 <!--
 @ 作者: 秦东
 @ 时间: 2023-10-10 11:30:42
 @ 备注: 工作流引擎主干
 -->
-<script lang='ts' setup>
-import $func from '@/utils/workflow/index'
-import { useStore } from '@/store/workflow/index' 
-import { bgColors, placeholderList } from '@/utils/workflow/const'
+<script lang="ts" setup>
+import $func from "@/utils/workflow/index";
+import { useStore } from "@/store/workflow/index";
+import { bgColors, placeholderList } from "@/utils/workflow/const";
 
 let _uid = getCurrentInstance().uid;
 
 let props = defineProps({
-    nodeConfig: {
-        type: Object,
-        default: () => ({}),
-    },
-    flowPermission: {
-        type: Object,
-        // eslint-disable-next-line vue/require-valid-default-prop
-        default: () => [],
-    },
+  nodeConfig: {
+    type: Object,
+    default: () => ({}),
+  },
+  flowPermission: {
+    type: Object,
+    // eslint-disable-next-line vue/require-valid-default-prop
+    default: () => [],
+  },
 });
 //pinia 相关数据操作
 let store = useStore();
 let {
-    setPromoter,
-    setApprover,
-    setCopyer,
-    setCondition,
-    setFlowPermission,
-    setApproverConfig,
-    setCopyerConfig,
-    setConditionsConfig,
+  setPromoter,
+  setApprover,
+  setCopyer,
+  setCondition,
+  setFlowPermission,
+  setApproverConfig,
+  setCopyerConfig,
+  setConditionsConfig,
 } = store;
-let isTried = computed(()=> store.isTried)
-let flowPermission1 = computed(()=> store.flowPermission1)
-let approverConfig1 = computed(()=> store.approverConfig1)
-let copyerConfig1 = computed(()=> store.copyerConfig1)
-let conditionsConfig1 = computed(()=> store.conditionsConfig1)
+let isTried = computed(() => store.isTried);
+let flowPermission1 = computed(() => store.flowPermission1);
+let approverConfig1 = computed(() => store.approverConfig1);
+let copyerConfig1 = computed(() => store.copyerConfig1);
+let conditionsConfig1 = computed(() => store.conditionsConfig1);
 
 let defaultText = computed(() => {
-    return placeholderList[props.nodeConfig.type]
+  return placeholderList[props.nodeConfig.type];
 });
 let showText = computed(() => {
-	// console.log("props.nodeConfig.type===>",props.nodeConfig);
-    if (props.nodeConfig.type == 0) return $func.arrToStr(props.flowPermission) || '所有人'
-    if (props.nodeConfig.type == 1) return $func.setApproverStr(props.nodeConfig)
-	// console.log("props.nodeConfig.type",props.nodeConfig.type);
-    return $func.copyerStr(props.nodeConfig)
+  // console.log("props.nodeConfig.type===>",props.nodeConfig);
+  if (props.nodeConfig.type == 0)
+    return $func.arrToStr(props.flowPermission) || "所有人";
+  if (props.nodeConfig.type == 1) return $func.setApproverStr(props.nodeConfig);
+  // console.log("props.nodeConfig.type",props.nodeConfig.type);
+  return $func.copyerStr(props.nodeConfig);
 });
 let isInputList = ref([]);
 let isInput = ref(false);
 const resetConditionNodesErr = () => {
-    for (var i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
-        // eslint-disable-next-line vue/no-mutating-props
-        props.nodeConfig.conditionNodes[i].error = $func.conditionStr(props.nodeConfig, i) == "请设置条件" && i != props.nodeConfig.conditionNodes.length - 1;
-    }
-}
+  for (var i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
+    // eslint-disable-next-line vue/no-mutating-props
+    props.nodeConfig.conditionNodes[i].error =
+      $func.conditionStr(props.nodeConfig, i) == "请设置条件" &&
+      i != props.nodeConfig.conditionNodes.length - 1;
+  }
+};
 
-const clickEvent = (index:any) => {
-    if (index || index === 0) {
-        isInputList.value[index] = true;
-    } else {
-        isInput.value = true;
-    }
+const clickEvent = (index: any) => {
+  if (index || index === 0) {
+    isInputList.value[index] = true;
+  } else {
+    isInput.value = true;
+  }
 };
-const blurEvent = (index:any) => {
-    if (index || index === 0) {
-        isInputList.value[index] = false;
-        // eslint-disable-next-line vue/no-mutating-props
-        props.nodeConfig.conditionNodes[index].nodeName = props.nodeConfig.conditionNodes[index].nodeName || "条件";
-    } else {
-        isInput.value = false;
-        // eslint-disable-next-line vue/no-mutating-props
-        props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText
-    }
+const blurEvent = (index: any) => {
+  if (index || index === 0) {
+    isInputList.value[index] = false;
+    // eslint-disable-next-line vue/no-mutating-props
+    props.nodeConfig.conditionNodes[index].nodeName =
+      props.nodeConfig.conditionNodes[index].nodeName || "条件";
+  } else {
+    isInput.value = false;
+    // eslint-disable-next-line vue/no-mutating-props
+    props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText;
+  }
 };
 //删除节点
 const delNode = () => {
-    emits("update:nodeConfig", props.nodeConfig.childNode);
+  emits("update:nodeConfig", props.nodeConfig.childNode);
 };
 let emits = defineEmits(["update:flowPermission", "update:nodeConfig"]);
 const addTerm = () => {
-    let len = props.nodeConfig.conditionNodes.length + 1;
-    // eslint-disable-next-line vue/no-mutating-props
-    props.nodeConfig.conditionNodes.push({
-        nodeName: "条件" + len,
-        type: 3,
-        priorityLevel: len,
-        conditionList: [],
-        nodeUserList: [],
-        childNode: null,
-    });
-    resetConditionNodesErr()
-    emits("update:nodeConfig", props.nodeConfig);
+  let len = props.nodeConfig.conditionNodes.length + 1;
+  // eslint-disable-next-line vue/no-mutating-props
+  props.nodeConfig.conditionNodes.push({
+    nodeName: "条件" + len,
+    type: 3,
+    priorityLevel: len,
+    conditionList: [],
+    nodeUserList: [],
+    childNode: null,
+  });
+  resetConditionNodesErr();
+  emits("update:nodeConfig", props.nodeConfig);
 };
-const delTerm = (index:any) => {
-    // eslint-disable-next-line vue/no-mutating-props
-    props.nodeConfig.conditionNodes.splice(index, 1);
-    props.nodeConfig.conditionNodes.map((item, index) => {
-        item.priorityLevel = index + 1;
-        item.nodeName = `条件${index + 1}`;
-    });
-    resetConditionNodesErr()
-    emits("update:nodeConfig", props.nodeConfig);
-    if (props.nodeConfig.conditionNodes.length == 1) {
-        if (props.nodeConfig.childNode) {
-            if (props.nodeConfig.conditionNodes[0].childNode) {
-                reData(props.nodeConfig.conditionNodes[0].childNode, props.nodeConfig.childNode);
-            } else {
-                // eslint-disable-next-line vue/no-mutating-props
-                props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode;
-            }
-        }
-        emits("update:nodeConfig", props.nodeConfig.conditionNodes[0].childNode);
+const delTerm = (index: any) => {
+  // eslint-disable-next-line vue/no-mutating-props
+  props.nodeConfig.conditionNodes.splice(index, 1);
+  props.nodeConfig.conditionNodes.map((item, index) => {
+    item.priorityLevel = index + 1;
+    item.nodeName = `条件${index + 1}`;
+  });
+  resetConditionNodesErr();
+  emits("update:nodeConfig", props.nodeConfig);
+  if (props.nodeConfig.conditionNodes.length == 1) {
+    if (props.nodeConfig.childNode) {
+      if (props.nodeConfig.conditionNodes[0].childNode) {
+        reData(
+          props.nodeConfig.conditionNodes[0].childNode,
+          props.nodeConfig.childNode
+        );
+      } else {
+        // eslint-disable-next-line vue/no-mutating-props
+        props.nodeConfig.conditionNodes[0].childNode =
+          props.nodeConfig.childNode;
+      }
     }
+    emits("update:nodeConfig", props.nodeConfig.conditionNodes[0].childNode);
+  }
 };
-const reData = (data:any, addData:any) => {
-    if (!data.childNode) {
-        data.childNode = addData;
-    } else {
-        reData(data.childNode, addData);
-    }
+const reData = (data: any, addData: any) => {
+  if (!data.childNode) {
+    data.childNode = addData;
+  } else {
+    reData(data.childNode, addData);
+  }
 };
-const setPerson = (priorityLevel:any) => {
-    var { type } = props.nodeConfig;
-    if (type == 0) {
-        setPromoter(true);
-        setFlowPermission({
-            value: props.flowPermission,
-            flag: false,
-            id: _uid,
-        });
-    } else if (type == 1 || type == 3) {
-        setApprover(true);
-        setApproverConfig({
-            value: {
-                ...JSON.parse(JSON.stringify(props.nodeConfig)),
-                ...{ settype: props.nodeConfig.settype ? props.nodeConfig.settype : 1 },
-            },
-            flag: false,
-            id: _uid,
-        });
-    } else if (type == 2) {
-        setCopyer(true);
-        setCopyerConfig({
-            value: JSON.parse(JSON.stringify(props.nodeConfig)),
-            flag: false,
-            id: _uid,
-        });
-    } else {
-        setCondition(true);
-        setConditionsConfig({
-            value: JSON.parse(JSON.stringify(props.nodeConfig)),
-            priorityLevel,
-            flag: false,
-            id: _uid,
-        });
-    }
+const setPerson = (priorityLevel: any) => {
+  var { type } = props.nodeConfig;
+  if (type == 0) {
+    setPromoter(true);
+    setFlowPermission({
+      value: props.flowPermission,
+      flag: false,
+      id: _uid,
+    });
+  } else if (type == 1 || type == 3) {
+    setApprover(true);
+    setApproverConfig({
+      value: {
+        ...JSON.parse(JSON.stringify(props.nodeConfig)),
+        ...{ settype: props.nodeConfig.settype ? props.nodeConfig.settype : 1 },
+      },
+      flag: false,
+      id: _uid,
+    });
+  } else if (type == 2) {
+    setCopyer(true);
+    setCopyerConfig({
+      value: JSON.parse(JSON.stringify(props.nodeConfig)),
+      flag: false,
+      id: _uid,
+    });
+  } else {
+    setCondition(true);
+    setConditionsConfig({
+      value: JSON.parse(JSON.stringify(props.nodeConfig)),
+      priorityLevel,
+      flag: false,
+      id: _uid,
+    });
+  }
 };
-const arrTransfer = (index:any, type = 1) => {
-    //向左-1,向右1
-    // eslint-disable-next-line vue/no-mutating-props
-    props.nodeConfig.conditionNodes[index] = props.nodeConfig.conditionNodes.splice(
-        index + type,
-        1,
-        props.nodeConfig.conditionNodes[index]
+const arrTransfer = (index: any, type = 1) => {
+  //向左-1,向右1
+  // eslint-disable-next-line vue/no-mutating-props
+  props.nodeConfig.conditionNodes[index] =
+    props.nodeConfig.conditionNodes.splice(
+      index + type,
+      1,
+      props.nodeConfig.conditionNodes[index]
     )[0];
-    props.nodeConfig.conditionNodes.map((item, index) => {
-        item.priorityLevel = index + 1;
-    });
-    resetConditionNodesErr()
-    emits("update:nodeConfig", props.nodeConfig);
+  props.nodeConfig.conditionNodes.map((item, index) => {
+    item.priorityLevel = index + 1;
+  });
+  resetConditionNodesErr();
+  emits("update:nodeConfig", props.nodeConfig);
 };
 //监听组块
 watch(flowPermission1, (flow) => {
-    if (flow.flag && flow.id === _uid) {
-        emits("update:flowPermission", flow.value);
-    }
+  if (flow.flag && flow.id === _uid) {
+    emits("update:flowPermission", flow.value);
+  }
 });
 watch(approverConfig1, (approver) => {
-    if (approver.flag && approver.id === _uid) {
-        emits("update:nodeConfig", approver.value);
-    }
+  if (approver.flag && approver.id === _uid) {
+    emits("update:nodeConfig", approver.value);
+  }
 });
 watch(copyerConfig1, (copyer) => {
-    if (copyer.flag && copyer.id === _uid) {
-        emits("update:nodeConfig", copyer.value);
-    }
+  if (copyer.flag && copyer.id === _uid) {
+    emits("update:nodeConfig", copyer.value);
+  }
 });
 watch(conditionsConfig1, (condition) => {
-    if (condition.flag && condition.id === _uid) {
-        emits("update:nodeConfig", condition.value);
-    }
+  if (condition.flag && condition.id === _uid) {
+    emits("update:nodeConfig", condition.value);
+  }
 });
 
-
 onMounted(() => {
-	if (props.nodeConfig.type == 1) {
-        // eslint-disable-next-line vue/no-mutating-props
-        props.nodeConfig.error = !$func.setApproverStr(props.nodeConfig);
-    } else if (props.nodeConfig.type == 2) {
-        // eslint-disable-next-line vue/no-mutating-props
-        props.nodeConfig.error = !$func.copyerStr(props.nodeConfig);
-    } else if (props.nodeConfig.type == 4) {
-        resetConditionNodesErr()
-    }
-})
+  if (props.nodeConfig.type == 1) {
+    // eslint-disable-next-line vue/no-mutating-props
+    props.nodeConfig.error = !$func.setApproverStr(props.nodeConfig);
+  } else if (props.nodeConfig.type == 2) {
+    // eslint-disable-next-line vue/no-mutating-props
+    props.nodeConfig.error = !$func.copyerStr(props.nodeConfig);
+  } else if (props.nodeConfig.type == 4) {
+    resetConditionNodesErr();
+  }
+});
 </script>
 <template>
-	<!--通用模块（0 发起人 1审批 2抄送 3处理 4条件 5路由）-->
-	<div v-if="nodeConfig.type < 4" class="node-wrap" >
-		<div class="node-wrap-box" :class="(nodeConfig.type == 0 ? 'start-node ' : '') +(isTried && nodeConfig.error ? 'active error' : '')">
-			<!--标签头部-->
-			<div class="title" :style="`background: rgb(${bgColors[nodeConfig.type]});`">	
-				<span v-if="nodeConfig.type == 0" class="iconfont"><i class="fa fa-play-circle-o"></i> {{ nodeConfig.nodeName }}</span>
-				<template v-else>
-					<span v-if="nodeConfig.type==1" class="iconfont"><el-icon class="nodeIcon"><Stamp /></el-icon></span>
-					<span v-if="nodeConfig.type==2" class="iconfont"><i class="fa fa-send"></i></span>
-					<span v-if="nodeConfig.type==3" class="iconfont"><i class="fa fa-pencil-square-o"></i></span>
-					<!--eslint-disable-next-line vue/no-mutating-props-->
-					<input v-if="isInput" v-model="nodeConfig.nodeName" v-focus:placeholder="defaultText" type="text" class="ant-input editable-title-input" @blur="blurEvent()" @focus="$event.currentTarget.select()" />
-					
-					<span v-else class="editable-title" @click="clickEvent()">{{ nodeConfig.nodeName }}</span>
-					<i class="anticon anticon-close close" @click="delNode"></i>
-				</template>
-			</div>
-			<!--标签主体-->
-			<div class="content" @click="setPerson">
-				<div class="text">
-					<span v-if="!showText" class="placeholder">请选择{{defaultText}}</span>
-					{{showText}}
-				</div>
-				<i class="anticon anticon-right arrow"></i>
-			</div>
-			<!--标签错误提示-->
-			<div v-if="isTried && nodeConfig.error" class="error_tip">
-				<i class="anticon anticon-exclamation-circle"></i>
-			</div>
-		</div>
-		<!--eslint-disable-next-line vue/no-mutating-props-->
-		<addNode v-model:childNodeP="nodeConfig.childNode"  :node-config="props.nodeConfig" />
-	</div>
-	<!--路由模块-->
-	<div v-if="nodeConfig.type == 5" class="node-wrap" >
-		<div class="branch-box-wrap">
-			<div class="branch-box">
-				<button class="add-branch" @click="addTerm">添加条件</button>
-				<div v-for="(item, index) in nodeConfig.conditionNodes" :key="index" class="col-box" >
-					<div class="condition-node">
-						<div class="condition-node-box">
-							<div class="auto-judge" :class="isTried && item.error ? 'error active' : ''">
-								<div v-if="index != 0" class="sort-left"  @click="arrTransfer(index, -1)">&lt;</div>
-								<div class="title-wrapper">
-									<input
-										v-if="isInputList[index]"
-										v-model="item.nodeName"
-										v-focus
-										type="text"
-										class="ant-input editable-title-input"
-										@blur="blurEvent(index)"
-										@focus="$event.currentTarget.select()"
-										
-									/>
-									<span v-else class="editable-title" @click="clickEvent(index)">{{ item.nodeName }}</span>
-									<span class="priority-title" @click="setPerson(item.priorityLevel)">优先级{{ item.priorityLevel }}</span>
-									<i class="anticon anticon-close close" @click="delTerm(index)"></i>
-								</div>
-								<div  v-if="index != nodeConfig.conditionNodes.length - 1" class="sort-right" @click="arrTransfer(index)">&gt;</div>
-								<div class="content" @click="setPerson(item.priorityLevel)">{{ $func.conditionStr(nodeConfig, index) }}</div>
-								<div v-if="isTried && item.error" class="error_tip" >
-									<i class="anticon anticon-exclamation-circle"></i>
-								</div>
-							</div>
-							<addNode v-model:childNodeP="item.childNode"  :node-config="item" />
-						</div>
-					</div>
-					<nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
-					<template v-if="index == 0">
-						<div class="top-left-cover-line"></div>
-						<div class="bottom-left-cover-line"></div>
-					</template>
-					<template v-if="index == nodeConfig.conditionNodes.length - 1">
-						<div class="top-right-cover-line"></div>
-						<div class="bottom-right-cover-line"></div>
-					</template>
-				</div>
-			</div>
-			<!--eslint-disable-next-line vue/no-mutating-props-->
-			<addNode v-model:childNodeP="nodeConfig.childNode" :node-config="props.nodeConfig" />
-		</div>
-	</div>
-	<!--循环组件-->
-	<!--eslint-disable-next-line vue/no-mutating-props-->
-	<nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode"/>
+  <!--通用模块（0 发起人 1审批 2抄送 3处理 4条件 5路由）-->
+  <div v-if="nodeConfig.type < 4" class="node-wrap">
+    <div
+      class="node-wrap-box"
+      :class="
+        (nodeConfig.type == 0 ? 'start-node ' : '') +
+        (isTried && nodeConfig.error ? 'active error' : '')
+      "
+    >
+      <!--标签头部-->
+      <div
+        class="title"
+        :style="`background: rgb(${bgColors[nodeConfig.type]});`"
+      >
+        <span v-if="nodeConfig.type == 0" class="iconfont"
+          ><i class="fa fa-play-circle-o"></i> {{ nodeConfig.nodeName }}</span
+        >
+        <template v-else>
+          <span v-if="nodeConfig.type == 1" class="iconfont"
+            ><el-icon class="nodeIcon"><Stamp /></el-icon
+          ></span>
+          <span v-if="nodeConfig.type == 2" class="iconfont"
+            ><i class="fa fa-send"></i
+          ></span>
+          <span v-if="nodeConfig.type == 3" class="iconfont"
+            ><i class="fa fa-pencil-square-o"></i
+          ></span>
+          <!--eslint-disable-next-line vue/no-mutating-props-->
+          <input
+            v-if="isInput"
+            v-model="nodeConfig.nodeName"
+            v-focus:placeholder="defaultText"
+            type="text"
+            class="ant-input editable-title-input"
+            @blur="blurEvent()"
+            @focus="$event.currentTarget.select()"
+          />
+
+          <span v-else class="editable-title" @click="clickEvent()">{{
+            nodeConfig.nodeName
+          }}</span>
+          <i class="fa fa-close close" @click="delNode"></i>
+        </template>
+      </div>
+      <!--标签主体-->
+      <div class="content" @click="setPerson">
+        <div class="text">
+          <span v-if="!showText" class="placeholder"
+            >请选择{{ defaultText }}</span
+          >
+          {{ showText }}
+        </div>
+        <i class="fa fa-angle-right arrow"></i>
+      </div>
+      <!--标签错误提示-->
+      <div v-if="isTried && nodeConfig.error" class="error_tip">
+        <i class="fa fa-exclamation-circle fa-2x"></i>
+      </div>
+    </div>
+    <!--eslint-disable-next-line vue/no-mutating-props-->
+    <addNode
+      v-model:childNodeP="nodeConfig.childNode"
+      :node-config="props.nodeConfig"
+    />
+  </div>
+  <!--路由模块-->
+  <div v-if="nodeConfig.type == 5" class="node-wrap">
+    <div class="branch-box-wrap">
+      <div class="branch-box">
+        <button class="add-branch" @click="addTerm">添加条件</button>
+        <div
+          v-for="(item, index) in nodeConfig.conditionNodes"
+          :key="index"
+          class="col-box"
+        >
+          <div class="condition-node">
+            <div class="condition-node-box">
+              <div
+                class="auto-judge"
+                :class="isTried && item.error ? 'error active' : ''"
+              >
+                <div
+                  v-if="index != 0"
+                  class="sort-left"
+                  @click="arrTransfer(index, -1)"
+                >
+                  &lt;
+                </div>
+                <div class="title-wrapper">
+                  <input
+                    v-if="isInputList[index]"
+                    v-model="item.nodeName"
+                    v-focus
+                    type="text"
+                    class="ant-input editable-title-input"
+                    @blur="blurEvent(index)"
+                    @focus="$event.currentTarget.select()"
+                  />
+                  <span
+                    v-else
+                    class="editable-title"
+                    @click="clickEvent(index)"
+                    >{{ item.nodeName }}</span
+                  >
+                  <span
+                    class="priority-title"
+                    @click="setPerson(item.priorityLevel)"
+                    >优先级{{ item.priorityLevel }}</span
+                  >
+                  <i class="fa fa-close close" @click="delTerm(index)"></i>
+                </div>
+                <div
+                  v-if="index != nodeConfig.conditionNodes.length - 1"
+                  class="sort-right"
+                  @click="arrTransfer(index)"
+                >
+                  &gt;
+                </div>
+                <div class="content" @click="setPerson(item.priorityLevel)">
+                  {{ $func.conditionStr(nodeConfig, index) }}
+                </div>
+                <div v-if="isTried && item.error" class="error_tip">
+                  <i class="fa fa-exclamation-circle fa-2x"></i>
+                </div>
+              </div>
+              <addNode
+                v-model:childNodeP="item.childNode"
+                :node-config="item"
+              />
+            </div>
+          </div>
+          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
+          <template v-if="index == 0">
+            <div class="top-left-cover-line"></div>
+            <div class="bottom-left-cover-line"></div>
+          </template>
+          <template v-if="index == nodeConfig.conditionNodes.length - 1">
+            <div class="top-right-cover-line"></div>
+            <div class="bottom-right-cover-line"></div>
+          </template>
+        </div>
+      </div>
+      <!--eslint-disable-next-line vue/no-mutating-props-->
+      <addNode
+        v-model:childNodeP="nodeConfig.childNode"
+        :node-config="props.nodeConfig"
+      />
+    </div>
+  </div>
+  <!--循环组件-->
+  <!--eslint-disable-next-line vue/no-mutating-props-->
+  <nodeWrap
+    v-if="nodeConfig.childNode"
+    v-model:nodeConfig="nodeConfig.childNode"
+  />
 </template>
-<style  lang='scss' scoped>
-.nodeIcon{
-	font-size: 20px;
-	margin-top: 5px;
+<style lang="scss" scoped>
+.nodeIcon {
+  margin-top: 5px;
+  font-size: 20px;
+}
+
+.error_tip i {
+  color: #f00;
 }
 </style>