@hzab/flowlong-designer 1.0.6 → 1.0.7-beta1

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/flowlong-designer@1.0.7
+
+feat:审核人、抄送人添加直接主管配置
+
 # @hzab/flowlong-designer@1.0.6
 
 feat:发起人、审核人新增二次确认配置

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/flowlong-designer",
-  "version": "1.0.6",
+  "version": "1.0.7-beta1",
   "description": "自定义审批流配置组件",
   "main": "src",
   "scripts": {

package/src/components/NodeWrap/Nodes/Approver/index.tsx

@@ -16,6 +16,13 @@ export const Approver = (props) => {
     nodeName: "",
     setType: undefined,
     nodeAssigneeList: [],
+    extendConfig: {
+      directorWorkAddr: false,
+      directorLevel: undefined,
+      approvalEnd: undefined,
+      isChecked: false,
+      directorUsers: [],
+    },
     directorMode: undefined,
     termAuto: false,
     examineLevel: undefined,
@@ -36,7 +43,17 @@ export const Approver = (props) => {
 
   function onShow() {
     setDrawer(true);
-    setForm(JSON.parse(JSON.stringify(modelValue)));
+    const newValue = JSON.parse(JSON.stringify(modelValue));
+    const { extendConfig } = newValue;
+    if (extendConfig?.directorWorkAddr || extendConfig?.directorUsers?.length > 0) {
+      newValue.extendConfig.isChecked = true;
+      if (extendConfig.directorWorkAddr) {
+        newValue.extendConfig.approvalEnd = 1; // 直到驻点队长
+      } else {
+        newValue.extendConfig.approvalEnd = 2; // 直到指定用户
+      }
+    }
+    setForm(newValue);
   }
 
   function onNodeDel(e) {
@@ -72,6 +89,18 @@ export const Approver = (props) => {
       return "连续多级主管";
     } else if (nodeConf.setType == 9) {
       return "驻点队长";
+    } else if (nodeConf.setType == 20) {
+      let users = "";
+      if (
+        nodeConf.extendConfig &&
+        nodeConf.extendConfig.directorUsers &&
+        nodeConf.extendConfig.directorUsers.length > 0
+      ) {
+        users = nodeConf.extendConfig.directorUsers.map((item) => item.name).join("、");
+      }
+      return `发起人向上的第${nodeConf.extendConfig?.directorLevel}级主管 ${
+        nodeConf.extendConfig?.directorWorkAddr ? "直到驻点队长" : users ? "直到" + users : ""
+      }`;
     }
   }
 
@@ -93,15 +122,30 @@ export const Approver = (props) => {
 
   function onDrawerSave() {
     signatureConfigurationRef.current.form.validateFields().then((res) => {
+      const { extendConfig = {} }: any = form;
+      extendConfig["confirmTxt"] = res?.extendConfig?.confirmTxt;
+      extendConfig["needConfirm"] = res?.extendConfig?.needConfirm;
+      extendConfig["needSign"] = res?.extendConfig?.needSign;
+      extendConfig["usePreSign"] = res?.extendConfig?.usePreSign;
       const newValue = {
         ...form,
-        extendConfig: {
-          needSign: res?.needSign, //当前节点需要签名
-          needConfirm: res?.needConfirm, //当前节点需要二次确认
-          confirmTxt: res?.confirmTxt,
-          usePreSign: res?.usePreSign,
-        },
       };
+      if (form.setType == "20") {
+        if (!extendConfig?.isChecked) {
+          newValue.extendConfig.directorUsers = [];
+          newValue.extendConfig.directorWorkAddr = false;
+        } else {
+          if (extendConfig?.approvalEnd == 2) {
+            newValue.extendConfig.directorWorkAddr = false;
+          } else {
+            newValue.extendConfig.directorWorkAddr = true;
+            newValue.extendConfig.directorUsers = [];
+          }
+        }
+        delete newValue.extendConfig?.approvalEnd;
+        delete newValue.extendConfig?.isChecked;
+      }
+
       setForm(newValue);
       // 强制更新数据
       onChange && onChange(newValue);
@@ -194,6 +238,7 @@ export const Approver = (props) => {
             name="approverForm"
             labelCol={{ span: 8 }}
             wrapperCol={{ span: 16 }}
+            preserve={false}
             initialValues={form}
             autoComplete="off"
           >
@@ -206,7 +251,20 @@ export const Approver = (props) => {
                   setForm((f) => {
                     // 清空 人员、角色 列表数组
                     f.nodeAssigneeList = [];
+                    f.extendConfig = {
+                      ...f.extendConfig,
+                      directorWorkAddr: false,
+                      directorLevel: undefined,
+                      approvalEnd: undefined,
+                      isChecked: false,
+                      directorUsers: [],
+                    };
                     f.setType = val;
+                    if (val == 20) {
+                      f.examineMode = 1;
+                    } else {
+                      f.examineMode = undefined;
+                    }
                     return { ...f };
                   });
                 }}
@@ -214,8 +272,108 @@ export const Approver = (props) => {
               />
             </Form.Item>
 
-            {form.setType === 1 ? (
-              <Form.Item label="选择成员" name="nodeAssigneeList">
+            {form.setType === 20 ? (
+              <>
+                <Form.Item label="审批截止至发起人向上的第" name={["extendConfig", "directorLevel"]} key={form.setType}>
+                  <Select
+                    disabled={readOnly}
+                    className={`${readOnly ? "readonly-select" : ""}`}
+                    onSelect={(val) => {
+                      setForm((f) => {
+                        // 清空 人员、角色 列表数组
+                        f.extendConfig = {
+                          ...f.extendConfig,
+                          directorLevel: val,
+                        };
+                        return { ...f };
+                      });
+                    }}
+                    options={[
+                      {
+                        label: "第1级主管",
+                        value: 1,
+                      },
+                      {
+                        label: "第2级主管",
+                        value: 2,
+                      },
+                      {
+                        label: "第3级主管",
+                        value: 3,
+                      },
+                      {
+                        label: "第4级主管",
+                        value: 4,
+                      },
+                      {
+                        label: "第5级主管",
+                        value: 5,
+                      },
+                      {
+                        label: "第6级主管",
+                        value: 6,
+                      },
+                      {
+                        label: "第7级主管",
+                        value: 7,
+                      },
+                      {
+                        label: "第8级主管",
+                        value: 8,
+                      },
+                    ]}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label={
+                    <>
+                      <Checkbox
+                        disabled={readOnly}
+                        className={`${readOnly ? "readonly-select" : ""}`}
+                        onChange={(e) =>
+                          setForm((f) => {
+                            f.extendConfig = { ...f.extendConfig, isChecked: e.target.checked };
+                            return { ...f };
+                          })
+                        }
+                        checked={form?.extendConfig?.isChecked || false}
+                      />
+                      &emsp;审批终点为
+                    </>
+                  }
+                  name={["extendConfig", "approvalEnd"]}
+                >
+                  <Select
+                    disabled={readOnly}
+                    className={`${readOnly ? "readonly-select" : ""}`}
+                    onSelect={(val) => {
+                      setForm((f) => {
+                        f.extendConfig = {
+                          ...f.extendConfig,
+                          approvalEnd: val,
+                        };
+                        return { ...f };
+                      });
+                    }}
+                    options={[
+                      {
+                        label: "驻点队长",
+                        value: 1,
+                      },
+                      {
+                        label: "指定人员",
+                        value: 2,
+                      },
+                    ]}
+                  />
+                </Form.Item>
+              </>
+            ) : null}
+            {form.setType === 1 || (form.setType === 20 && form.extendConfig?.approvalEnd == 2) ? (
+              <Form.Item
+                label="选择成员"
+                name={form.setType === 20 ? ["extendConfig", "directorUsers"] : "nodeAssigneeList"}
+              >
                 {readOnly ? null : (
                   <Button
                     type="primary"
@@ -223,11 +381,15 @@ export const Approver = (props) => {
                     onClick={() =>
                       selectorCtx.setSelectHandler(
                         1,
-                        form.nodeAssigneeList,
+                        form.setType === 20 ? form.extendConfig.directorUsers : form.nodeAssigneeList,
                         (selected) => {
                           setForm((f) => {
                             // 设置 人员、角色 列表数组
-                            f.nodeAssigneeList = selected;
+                            if (form.setType === 20) {
+                              f.extendConfig.directorUsers = selected;
+                            } else {
+                              f.nodeAssigneeList = selected;
+                            }
                             return { ...f };
                           });
                         },
@@ -240,7 +402,7 @@ export const Approver = (props) => {
                 )}
 
                 <div className="tags-list">
-                  {form.nodeAssigneeList?.map((user, idx) => {
+                  {(form.setType === 20 ? form.extendConfig.directorUsers : form.nodeAssigneeList)?.map((user, idx) => {
                     return (
                       <Tag
                         key={user.id || idx}
@@ -406,19 +568,21 @@ export const Approver = (props) => {
               </>
             ) : null}
  */}
-            <Form.Item label="多人审批时审批方式" name="examineMode">
-              <Radio.Group
-                options={examineModeOptions}
-                value={form.examineMode}
-                style={readOnly ? { pointerEvents: "none" } : {}}
-                onChange={(e) => {
-                  setForm((f) => {
-                    form.examineMode = e.target.value;
-                    return { ...f };
-                  });
-                }}
-              />
-            </Form.Item>
+            {form.setType !== 20 ? (
+              <Form.Item label="多人审批时审批方式" name="examineMode">
+                <Radio.Group
+                  options={examineModeOptions}
+                  value={form.examineMode}
+                  style={readOnly ? { pointerEvents: "none" } : {}}
+                  onChange={(e) => {
+                    setForm((f) => {
+                      form.examineMode = e.target.value;
+                      return { ...f };
+                    });
+                  }}
+                />
+              </Form.Item>
+            ) : null}
           </Form>
           <SignatureConfiguration
             ref={signatureConfigurationRef}

package/src/components/NodeWrap/Nodes/Approver/options.ts

@@ -1,45 +1,46 @@
-/**
- * 审批人员类型
- */
-export const setTypeOptions = [
-  { label: "指定成员", value: 1 },
-  { label: "部门经理", value: 2 },
-  { label: "角色", value: 3 },
-  // { label: "发起人自选", value: 4 },
-  // { label: "发起人自己", value: 5 },
-  // { label: "连续多级主管", value: 7 },
-  { label: "驻点队长", value: 9 },
-];
-
-/**
- * 发起人自选
- */
-export const selectModeOptions = [
-  { label: "自选一个人", value: 1 },
-  { label: "自选多个人", value: 2 },
-];
-
-/**
- * 连续主管审批终点
- */
-export const directorModeOptions = [
-  { label: "直到最上层主管", value: 0 },
-  { label: "自定义审批终点", value: 1 },
-];
-
-/**
- * 审批期限超时后执行
- */
-export const termModeOptions = [
-  { label: "自动通过", value: 0 },
-  { label: "自动拒绝", value: 1 },
-];
-
-/**
- * 多人审批时审批方式
- */
-export const examineModeOptions = [
-  // { label: "按顺序依次审批", value: 1 },
-  { label: "或签 (有一人审批通过即可)", value: 3 },
-  { label: "会签 (可同时审批，每个人必须审批通过)", value: 2 },
-];
+/**
+ * 审批人员类型
+ */
+export const setTypeOptions = [
+  { label: "指定成员", value: 1 },
+  { label: "部门经理", value: 2 },
+  { label: "角色", value: 3 },
+  // { label: "发起人自选", value: 4 },
+  // { label: "发起人自己", value: 5 },
+  // { label: "连续多级主管", value: 7 },
+  { label: "驻点队长", value: 9 },
+  { label: "连续多级直接主管", value: 20 },
+];
+
+/**
+ * 发起人自选
+ */
+export const selectModeOptions = [
+  { label: "自选一个人", value: 1 },
+  { label: "自选多个人", value: 2 },
+];
+
+/**
+ * 连续主管审批终点
+ */
+export const directorModeOptions = [
+  { label: "直到最上层主管", value: 0 },
+  { label: "自定义审批终点", value: 1 },
+];
+
+/**
+ * 审批期限超时后执行
+ */
+export const termModeOptions = [
+  { label: "自动通过", value: 0 },
+  { label: "自动拒绝", value: 1 },
+];
+
+/**
+ * 多人审批时审批方式
+ */
+export const examineModeOptions = [
+  // { label: "按顺序依次审批", value: 1 },
+  { label: "或签 (有一人审批通过即可)", value: 3 },
+  { label: "会签 (可同时审批，每个人必须审批通过)", value: 2 },
+];

package/src/components/NodeWrap/Nodes/Branch/components/Field/index.tsx

@@ -1,39 +1,59 @@
-import { Input, InputNumber } from "antd";
-import GroupUserSelectorModal from "../GroupUserSelectorModal";
-
-interface FormMapProps {
-  type: string;
-  onChange?: (v: any) => void;
-  value?: any;
-  disabled?: boolean;
-  readOnly?: boolean;
-}
-const Field = (props: FormMapProps) => {
-  const { type, onChange, value, disabled, readOnly } = props;
-  return (
-    <>
-      {["day", "hour"].includes(type) && (
-        <Input
-          readOnly={readOnly}
-          disabled={disabled}
-          value={value}
-          placeholder="值"
-          type="number"
-          onChange={(e) => {
-            onChange(e.target.value);
-          }}
-        ></Input>
-      )}
-      {["dept", "assignee"].includes(type) && (
-        <GroupUserSelectorModal
-          type={type}
-          onChange={onChange}
-          value={value}
-          disabled={disabled}
-          readOnly={readOnly}
-        ></GroupUserSelectorModal>
-      )}
-    </>
-  );
-};
-export default Field;
+import { Input, InputNumber, Select } from "antd";
+import GroupUserSelectorModal from "../GroupUserSelectorModal";
+
+interface FormMapProps {
+  type: string;
+  onChange?: (v: any) => void;
+  value?: any;
+  disabled?: boolean;
+  readOnly?: boolean;
+}
+const Field = (props: FormMapProps) => {
+  const { type, onChange, value, disabled, readOnly } = props;
+  return (
+    <>
+      {["day", "hour"].includes(type) && (
+        <Input
+          readOnly={readOnly}
+          disabled={disabled}
+          value={value}
+          placeholder="值"
+          type="number"
+          onChange={(e) => {
+            onChange(e.target.value);
+          }}
+        ></Input>
+      )}
+      {["dept", "assignee"].includes(type) && (
+        <GroupUserSelectorModal
+          type={type}
+          onChange={onChange}
+          value={value}
+          disabled={disabled}
+          readOnly={readOnly}
+        ></GroupUserSelectorModal>
+      )}
+      {["userType"].includes(type) && (
+        <Select
+          value={value}
+          disabled={disabled}
+          placeholder="请选择"
+          options={[
+            {
+              label: "保安",
+              value: 1,
+            },
+            {
+              label: "职员",
+              value: 2,
+            },
+          ]}
+          onSelect={(value) => {
+            onChange(value);
+          }}
+        />
+      )}
+    </>
+  );
+};
+export default Field;