inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/views/workforceManager/workforceRule/components/rule.tsx

@@ -1,706 +1,706 @@
-import { defineComponent, ref, computed, watch } from "vue";
-import { message } from "ant-design-vue";
-import { cloneDeep } from "lodash";
-
-import workforceApi from "@/api/workforceManager";
-import "../assets/rule.less";
-
-const againRotationList = [
-  { key: 0, name: "否" },
-  { key: 1, name: "是" },
-];
-
-// 班次职能
-const shiftDutyList = [
-  { key: 1, name: "检修班" },
-  { key: 2, name: "生产班" },
-];
-
-const ruleTypeList = [
-  { key: 1, name: "顺序轮换" },
-  { key: 2, name: "固定周期轮换" },
-];
-
-// 周期模板
-const ruleCycleVo = {
-  cycleDuration: null,
-  ruleWorkgroupIds: [],
-};
-
-export default defineComponent({
-  emits: ["update:visible", "refresh"],
-  props: {
-    ruleCode: {
-      type: String,
-      default: null,
-    },
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-    depList: {
-      type: Array,
-      required: true,
-    },
-  },
-  setup(props, { emit }) {
-    const userinfo = JSON.parse(sessionStorage.getItem("userinfo") as string);
-
-    const isVisible = computed({
-      get() {
-        return props.visible;
-      },
-      set(val) {
-        emit("update:visible", val);
-      },
-    });
-
-    // let cls = { group: '' };
-    const formRef = ref();
-    const formState = ref({
-      depId: "", // 部门id
-      shiftSysId: null, // 班制id
-      createUser: userinfo.userName,
-      ruleInfoJobPostVos: {},
-    } as any);
-
-    watch(
-      [() => props.ruleCode, () => props.visible],
-      async (nVal) => {
-        if (props.ruleCode && props.visible) {
-          const resp = await workforceApi.ruleDetails(props.ruleCode);
-          // console.info('detail', resp);
-          formState.value = resp.data;
-        }
-      },
-      { deep: true, immediate: true }
-    );
-
-    // 岗位列表
-    const jobList = ref([]);
-    // 当前岗位id
-    const activeKey = ref();
-
-    // 班组列表
-    const groupList = ref();
-
-    // 部门改变后重新查询岗位列表
-    watch(
-      () => formState.value.depId,
-      async (nVal, oVal) => {
-        if (oVal && nVal !== oVal) {
-          // 清空规则
-          formState.value.ruleInfoJobPostVos = {};
-        }
-
-        if (formState.value.depId) {
-          const resp = await workforceApi.getPostByDepId(formState.value.depId);
-          if (resp.data.length === 0) {
-            message.error({
-              content: "该部门下无岗位信息，无法进行排班",
-            });
-          }
-
-          jobList.value = resp.data;
-          activeKey.value = resp.data[0].id;
-
-          const resp2 = await workforceApi.getTeamByDepId(
-            formState.value.depId
-          );
-          groupList.value = resp2.data;
-          // console.info('groupList', groupList.value);
-        }
-      },
-      { deep: true, immediate: true }
-    );
-
-    // 周期tab
-    const tabActiveKey = ref(0);
-
-    // 班制详情
-    const classDetail = ref();
-
-    // 修改班制
-    watch(
-      [() => formState.value.shiftSysId, () => activeKey.value],
-      async (nVal, oVal) => {
-        tabActiveKey.value = 0;
-
-        if (oVal[0] && nVal[0] !== oVal[0]) {
-          // 清空规则;
-          formState.value.ruleInfoJobPostVos = {};
-        }
-
-        if (formState.value.shiftSysId) {
-          const resp = await workforceApi.classDetails(
-            formState.value.shiftSysId
-          );
-          classDetail.value = resp.data;
-          // console.info('classDetail', classDetail.value);
-
-          // 创建岗位信息
-          if (!formState.value.ruleInfoJobPostVos[activeKey.value]) {
-            jobList.value.forEach((item: any) => {
-              if (item.id === activeKey.value) {
-                formState.value.ruleInfoJobPostVos[item.id] = {
-                  ruleType: 1, // 规则类型：1-顺序轮换 2-固定周期轮换
-                  ruleWorkgroupIds: [null], // 顺序轮换参数
-                  ruleCycleVos: [cloneDeep(ruleCycleVo)], // 周期轮换参数
-                  againRotation: 0, // 是否需要重新轮换: 0-否 1-是
-                  rotationCycle: 1, // 重新轮换周期(天)
-                };
-              }
-            });
-          }
-        }
-      },
-      { deep: true, immediate: true }
-    );
-
-    const ruleTypeChangeHandle = (val: any) => {
-      if (val === 1) {
-        // 顺序轮换
-        if (
-          formState.value.ruleInfoJobPostVos[activeKey.value].ruleWorkgroupIds
-            .length === 0
-        ) {
-          formState.value.ruleInfoJobPostVos[activeKey.value].ruleWorkgroupIds =
-            [null];
-        }
-      } else {
-        // 固定周期轮换
-        if (
-          formState.value.ruleInfoJobPostVos[activeKey.value].ruleCycleVos
-            .length === 0
-        ) {
-          formState.value.ruleInfoJobPostVos[activeKey.value].ruleCycleVos = [
-            cloneDeep(ruleCycleVo),
-          ];
-        }
-      }
-    };
-
-    // 获取班制列表
-    const classList = ref([]);
-    const getClass = async () => {
-      const resp = await workforceApi.getClassList(null);
-      classList.value = resp.data.rows;
-    };
-    getClass();
-
-    // 获取班次职能名称
-    const getshiftDutyName = (id: any) => {
-      return shiftDutyList.filter((item: any) => item.key === id)[0].name;
-    };
-
-    const handleCancel = () => {
-      formState.value = {
-        depId: "", // 部门id
-        shiftSysId: null, // 班制id
-        createUser: userinfo.userName,
-        ruleInfoJobPostVos: {},
-      };
-
-      jobList.value = [];
-      tabActiveKey.value = 0;
-    };
-
-    const handleOk = async () => {
-      // console.info(formState.value);
-      // let jobs: any = [];
-      // Object.keys(formState.value.ruleInfoJobPostVos).forEach((key) => {
-      //   // console.info(formState.value.ruleInfoJobPostVos[key]);
-      //   const obj = formState.value.ruleInfoJobPostVos[key];
-
-      //   if (obj.ruleType === 1) {
-      //     // 顺序轮换
-      //     obj.ruleWorkgroupIds.some((ruleWork: any) => {
-      //       if (!ruleWork) {
-      //         jobs.push({ id: key });
-      //         return true;
-      //       }
-      //     });
-      //   } else if (obj.ruleType === 2) {
-      //     // 固定周期轮换
-      //     obj.ruleCycleVos.some((ruleCycle: any, k: number) => {
-      //       let rc: any = { id: key, val: [] };
-      //       if (!ruleCycle.cycleDuration) {
-      //         // rc.val.push('周期内持续时长不能为空!');
-      //         rc.val.push(`周期${k + 1} 数据错误！`);
-      //         jobs.push(rc);
-      //         return true;
-      //       }
-
-      //       if (ruleCycle.ruleWorkgroupIds.length) {
-      //         if (
-      //           classDetail.value.infos.length !==
-      //           ruleCycle.ruleWorkgroupIds.length
-      //         ) {
-      //           // rc.val.push('班组不能为空!');
-      //           rc.val.push(`周期${k + 1} 数据错误！`);
-      //           jobs.push(rc);
-      //           return true;
-      //         }
-      //         classDetail.value.infos.some((cls: any, key: number) => {
-      //           if (!ruleCycle.ruleWorkgroupIds[key]) {
-      //             rc.val.push(`周期${k + 1} 数据错误！`);
-      //             jobs.push(rc);
-      //             return true;
-      //           }
-      //         });
-      //       } else {
-      //         rc.val.push(`周期${k + 1} 数据错误！`);
-      //         jobs.push(rc);
-      //         return true;
-      //       }
-      //     });
-      //   }
-      // });
-
-      // let result: any = [];
-      // if (jobs.length) {
-      //   jobs.map((obj: any) => {
-      //     const job: any = jobList.value.filter(
-      //       (val: any) => obj.id === val.id,
-      //     );
-
-      //     // console.info(job, job[0].name);
-      //     obj.name = job[0].name;
-      //     if (obj.val) {
-      //       result.push(
-      //         <div>
-      //           {obj.name} {obj.val.toString()}
-      //         </div>,
-      //       );
-      //     } else {
-      //       result.push(<div>{obj.name} 班组不能为空！</div>);
-      //     }
-
-      //     // console.info(result);
-      //   });
-      //   message.error({
-      //     content: (
-      //       <span>
-      //         数据错误
-      //         {result.map((val: any) => val)}
-      //       </span>
-      //     ),
-      //   });
-      //   return;
-      // }
-
-      let resp;
-      if (props.ruleCode) {
-        // 编辑
-        resp = await workforceApi.ruleEdit(props.ruleCode, formState.value);
-      } else {
-        resp = await workforceApi.ruleAdd(formState.value);
-      }
-
-      if (resp && (resp as any).message === "OK") {
-        message.success("保存成功！");
-        isVisible.value = false;
-
-        emit("refresh");
-        handleCancel();
-      }
-    };
-
-    // 顺序轮换
-    const order = () => {
-      const item = formState.value.ruleInfoJobPostVos[activeKey.value];
-      return (
-        <div class="order flex">
-          <div style="width:40%; padding: 6px;">
-            班制
-            <div class="line flex">
-              <div class="left cls">班次</div>
-              <div class="right">班次职能</div>
-            </div>
-            {classDetail.value &&
-              classDetail.value.infos.map((cls: any, index: number) => (
-                <div class="line flex" key={cls.id}>
-                  <div
-                    class="left"
-                    style="width: 200px"
-                  >{`${cls.name}(${cls.startTime}-${cls.endTime})`}</div>
-                  <div class="right">{getshiftDutyName(cls.shiftDuty)}</div>
-                </div>
-              ))}
-          </div>
-
-          <div style="width:50%; padding: 6px;">
-            <a-space>
-              班组
-              <a-tooltip
-                v-slots={{
-                  title: () => "班组可以在系统管理->班组管理中维护",
-                }}
-              >
-                <info-circle-outlined />
-              </a-tooltip>
-              <a-button
-                type="link"
-                v-slots={{
-                  icon: () => <plus-outlined />,
-                }}
-                onClick={() => {
-                  if (
-                    formState.value.ruleInfoJobPostVos[activeKey.value]
-                      .ruleWorkgroupIds.length < 5
-                  ) {
-                    formState.value.ruleInfoJobPostVos[
-                      activeKey.value
-                    ].ruleWorkgroupIds.push(null);
-                  } else {
-                    message.info("最多可添加5个班组！");
-                  }
-                }}
-              >
-                添加
-              </a-button>
-            </a-space>
-
-            {formState.value.ruleInfoJobPostVos[
-              activeKey.value
-            ].ruleWorkgroupIds.map((item: any, index: number) => (
-              <div class="line flex-center">
-                <div class="left">班组{index + 1}</div>
-                <div class="right">
-                  <a-select
-                    allowClear
-                    v-model={[
-                      formState.value.ruleInfoJobPostVos[activeKey.value]
-                        .ruleWorkgroupIds[index],
-                      "value",
-                    ]}
-                    style="width: 80%"
-                  >
-                    {groupList.value &&
-                      groupList.value.map((group: any, idx: number) => (
-                        <a-select-option key={group.id} value={group.id}>
-                          {group.name}
-                        </a-select-option>
-                      ))}
-                  </a-select>
-                  {index > 0 && (
-                    <delete-outlined
-                      style={{ color: "red", marginLeft: "10px" }}
-                      onClick={() => {
-                        formState.value.ruleInfoJobPostVos[
-                          activeKey.value
-                        ].ruleWorkgroupIds.splice(index, 1);
-                      }}
-                    />
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      );
-    };
-
-    // 固定周期轮换
-    const period = () => {
-      const item = formState.value.ruleInfoJobPostVos[activeKey.value];
-      return (
-        <div class="period flex">
-          <div>
-            <a-tabs
-              v-model={[tabActiveKey.value, "activeKey"]}
-              tabPosition="left"
-              animated
-            >
-              {formState.value.ruleInfoJobPostVos[
-                activeKey.value
-              ].ruleCycleVos.map((tab: any, index: number) => (
-                <a-tab-pane key={index} tab={`周期${index + 1}`}></a-tab-pane>
-              ))}
-            </a-tabs>
-            <a-button
-              style="margin-top: 60px"
-              type="link"
-              v-slots={{
-                icon: () => <plus-outlined />,
-              }}
-              onClick={() => {
-                if (
-                  formState.value.ruleInfoJobPostVos[activeKey.value]
-                    .ruleCycleVos.length < 10
-                ) {
-                  formState.value.ruleInfoJobPostVos[
-                    activeKey.value
-                  ].ruleCycleVos.push({ ...ruleCycleVo });
-                } else {
-                  message.info("最多可添加10个周期！");
-                }
-              }}
-            >
-              周期
-            </a-button>
-          </div>
-
-          <div style="flex: 1">
-            <a-form-item label="周期内持续时长" name="cycleDuration">
-              <div class="flex-center">
-                <a-input-number
-                  v-model={[
-                    formState.value.ruleInfoJobPostVos[activeKey.value]
-                      .ruleCycleVos[tabActiveKey.value].cycleDuration,
-                    "value",
-                  ]}
-                  style="width: 200px; margin-right: 10px;"
-                  min="1"
-                  controls={false}
-                />
-                天
-              </div>
-            </a-form-item>
-
-            <div class="line flex">
-              <div class="left" style="width: 240px;">
-                班次
-              </div>
-              <div class="center">班次职能</div>
-              <div class="right">
-                <a-space>
-                  上班班组
-                  <a-tooltip
-                    v-slots={{
-                      title: () => "班组可以在系统管理->班组管理中维护",
-                    }}
-                  >
-                    <info-circle-outlined />
-                  </a-tooltip>
-                </a-space>
-              </div>
-            </div>
-
-            {classDetail.value &&
-              classDetail.value.infos.map((cls: any, index: number) => (
-                <div class="line flex" key={cls.id}>
-                  <div
-                    class="left"
-                    style="width: 240px;"
-                  >{`${cls.name}(${cls.startTime}-${cls.endTime})`}</div>
-                  <div class="center">{getshiftDutyName(cls.shiftDuty)}</div>
-                  <div class="right">
-                    <a-select
-                      allowClear
-                      v-model={[
-                        formState.value.ruleInfoJobPostVos[activeKey.value]
-                          .ruleCycleVos[tabActiveKey.value].ruleWorkgroupIds[
-                          index
-                        ],
-                        "value",
-                      ]}
-                      style="width: 80%"
-                    >
-                      {groupList.value &&
-                        groupList.value.map((group: any, idx: number) => (
-                          <a-select-option key={group.id} value={group.id}>
-                            {group.name}
-                          </a-select-option>
-                        ))}
-                    </a-select>
-                  </div>
-                </div>
-              ))}
-
-            {tabActiveKey.value > 0 && (
-              <a-button
-                style="margin-top: 60px"
-                type="link"
-                danger
-                v-slots={{
-                  icon: () => <delete-outlined />,
-                }}
-                onClick={() => {
-                  formState.value.ruleInfoJobPostVos[
-                    activeKey.value
-                  ].ruleCycleVos.splice(tabActiveKey.value, 1);
-                  tabActiveKey.value = --tabActiveKey.value;
-                }}
-              >
-                删除此周期
-              </a-button>
-            )}
-          </div>
-        </div>
-      );
-    };
-
-    return () => (
-      <a-modal
-        v-model={[isVisible.value, "visible"]}
-        title={props.ruleCode ? "编辑排班规则" : "添加排班规则"}
-        width="800px"
-        onOk={handleOk}
-        onCancel={handleCancel}
-      >
-        <div class="rule">
-          <a-form
-            model={formState.value}
-            ref={formRef}
-            name="basic"
-            labelCol={{ style: { width: "150px" } }}
-            autocomplete="off"
-          >
-            <a-row class="row" gutter={[16, 16]}>
-              <a-col span="12">
-                <a-form-item
-                  label="班组部门"
-                  name="depId"
-                  rules={[{ required: true, message: "不能为空!" }]}
-                >
-                  <a-tree-select
-                    style={{ width: "200px" }}
-                    disabled={props.ruleCode && props.ruleCode.length > 0}
-                    fieldNames={{
-                      label: "name",
-                      value: "id",
-                      children: "subList",
-                    }}
-                    treeData={props.depList}
-                    v-model={[formState.value.depId, "value"]}
-                  ></a-tree-select>
-                </a-form-item>
-              </a-col>
-
-              <a-col span="12">
-                <a-form-item
-                  label="选择班制"
-                  name="shiftSysId"
-                  rules={[{ required: true, message: "不能为空!" }]}
-                >
-                  <a-select
-                    v-model={[formState.value.shiftSysId, "value"]}
-                    style="width: 100%"
-                  >
-                    {classList.value.map((item: any, index: number) => (
-                      <a-select-option key={item.id} value={item.id}>
-                        {item.name}
-                      </a-select-option>
-                    ))}
-                  </a-select>
-                </a-form-item>
-              </a-col>
-
-              {/* {formState.value.depId && jobList.value.length === 0 && (
-                <div class='noJob'>该部门下无岗位信息，无法进行排班</div>
-              )} */}
-
-              {jobList.value && activeKey.value && (
-                <a-col span="24">
-                  <a-tabs v-model={[activeKey.value, "activeKey"]}>
-                    {jobList.value.map((job: any, index: number) => (
-                      <a-tab-pane key={job.id} tab={job.name}></a-tab-pane>
-                    ))}
-                  </a-tabs>
-                </a-col>
-              )}
-
-              {formState.value.shiftSysId &&
-                activeKey.value &&
-                formState.value.ruleInfoJobPostVos[activeKey.value] && (
-                  <div style="width: 100%">
-                    <a-col span="12">
-                      <a-form-item label="规则类型">
-                        <a-select
-                          v-model={[
-                            formState.value.ruleInfoJobPostVos[activeKey.value]
-                              .ruleType,
-                            "value",
-                          ]}
-                          onChange={ruleTypeChangeHandle}
-                          style="width: 100%"
-                        >
-                          {ruleTypeList.map((ruleType) => (
-                            <a-select-option
-                              key={ruleType.key}
-                              value={ruleType.key}
-                            >
-                              {ruleType.name}
-                            </a-select-option>
-                          ))}
-                        </a-select>
-                      </a-form-item>
-                    </a-col>
-
-                    <a-col span="24">
-                      {formState.value.ruleInfoJobPostVos[activeKey.value]
-                        .ruleType &&
-                        activeKey.value &&
-                        (formState.value.ruleInfoJobPostVos[activeKey.value]
-                          .ruleType === 1
-                          ? order()
-                          : period())}
-                    </a-col>
-
-                    {formState.value.ruleInfoJobPostVos[activeKey.value] &&
-                      formState.value.ruleInfoJobPostVos[activeKey.value]
-                        .ruleType &&
-                      activeKey.value && (
-                        <div>
-                          <a-divider />
-
-                          <a-row>
-                            <a-col span="12">
-                              <a-form-item label="是否需要重新轮换">
-                                <a-select
-                                  v-model={[
-                                    formState.value.ruleInfoJobPostVos[
-                                      activeKey.value
-                                    ].againRotation,
-                                    "value",
-                                  ]}
-                                  style="width: 100%"
-                                >
-                                  {againRotationList.map((againRotation) => (
-                                    <a-select-option
-                                      key={againRotation.key}
-                                      value={againRotation.key}
-                                    >
-                                      {againRotation.name}
-                                    </a-select-option>
-                                  ))}
-                                </a-select>
-                              </a-form-item>
-                            </a-col>
-
-                            {formState.value.ruleInfoJobPostVos[
-                              activeKey.value
-                            ] &&
-                              formState.value.ruleInfoJobPostVos[
-                                activeKey.value
-                              ].againRotation === 1 && (
-                                <a-col span="12">
-                                  <a-form-item label="重新轮换周期">
-                                    <a-input-number
-                                      v-model={[
-                                        formState.value.ruleInfoJobPostVos[
-                                          activeKey.value
-                                        ].rotationCycle,
-                                        "value",
-                                      ]}
-                                      style="width: 80%; margin-right: 10px"
-                                      min="1"
-                                      controls={false}
-                                    />
-                                    天
-                                  </a-form-item>
-                                </a-col>
-                              )}
-                          </a-row>
-                        </div>
-                      )}
-                  </div>
-                )}
-            </a-row>
-          </a-form>
-        </div>
-      </a-modal>
-    );
-  },
-});
+import { defineComponent, ref, computed, watch } from "vue";
+import { message } from "ant-design-vue";
+import { cloneDeep } from "lodash";
+
+import workforceApi from "@/api/workforceManager";
+import "../assets/rule.less";
+
+const againRotationList = [
+  { key: 0, name: "否" },
+  { key: 1, name: "是" },
+];
+
+// 班次职能
+const shiftDutyList = [
+  { key: 1, name: "检修班" },
+  { key: 2, name: "生产班" },
+];
+
+const ruleTypeList = [
+  { key: 1, name: "顺序轮换" },
+  { key: 2, name: "固定周期轮换" },
+];
+
+// 周期模板
+const ruleCycleVo = {
+  cycleDuration: null,
+  ruleWorkgroupIds: [],
+};
+
+export default defineComponent({
+  emits: ["update:visible", "refresh"],
+  props: {
+    ruleCode: {
+      type: String,
+      default: null,
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    depList: {
+      type: Array,
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
+    const userinfo = JSON.parse(sessionStorage.getItem("userinfo") as string);
+
+    const isVisible = computed({
+      get() {
+        return props.visible;
+      },
+      set(val) {
+        emit("update:visible", val);
+      },
+    });
+
+    // let cls = { group: '' };
+    const formRef = ref();
+    const formState = ref({
+      depId: "", // 部门id
+      shiftSysId: null, // 班制id
+      createUser: userinfo.userName,
+      ruleInfoJobPostVos: {},
+    } as any);
+
+    watch(
+      [() => props.ruleCode, () => props.visible],
+      async (nVal) => {
+        if (props.ruleCode && props.visible) {
+          const resp = await workforceApi.ruleDetails(props.ruleCode);
+          // console.info('detail', resp);
+          formState.value = resp.data;
+        }
+      },
+      { deep: true, immediate: true }
+    );
+
+    // 岗位列表
+    const jobList = ref([]);
+    // 当前岗位id
+    const activeKey = ref();
+
+    // 班组列表
+    const groupList = ref();
+
+    // 部门改变后重新查询岗位列表
+    watch(
+      () => formState.value.depId,
+      async (nVal, oVal) => {
+        if (oVal && nVal !== oVal) {
+          // 清空规则
+          formState.value.ruleInfoJobPostVos = {};
+        }
+
+        if (formState.value.depId) {
+          const resp = await workforceApi.getPostByDepId(formState.value.depId);
+          if (resp.data.length === 0) {
+            message.error({
+              content: "该部门下无岗位信息，无法进行排班",
+            });
+          }
+
+          jobList.value = resp.data;
+          activeKey.value = resp.data[0].id;
+
+          const resp2 = await workforceApi.getTeamByDepId(
+            formState.value.depId
+          );
+          groupList.value = resp2.data;
+          // console.info('groupList', groupList.value);
+        }
+      },
+      { deep: true, immediate: true }
+    );
+
+    // 周期tab
+    const tabActiveKey = ref(0);
+
+    // 班制详情
+    const classDetail = ref();
+
+    // 修改班制
+    watch(
+      [() => formState.value.shiftSysId, () => activeKey.value],
+      async (nVal, oVal) => {
+        tabActiveKey.value = 0;
+
+        if (oVal[0] && nVal[0] !== oVal[0]) {
+          // 清空规则;
+          formState.value.ruleInfoJobPostVos = {};
+        }
+
+        if (formState.value.shiftSysId) {
+          const resp = await workforceApi.classDetails(
+            formState.value.shiftSysId
+          );
+          classDetail.value = resp.data;
+          // console.info('classDetail', classDetail.value);
+
+          // 创建岗位信息
+          if (!formState.value.ruleInfoJobPostVos[activeKey.value]) {
+            jobList.value.forEach((item: any) => {
+              if (item.id === activeKey.value) {
+                formState.value.ruleInfoJobPostVos[item.id] = {
+                  ruleType: 1, // 规则类型：1-顺序轮换 2-固定周期轮换
+                  ruleWorkgroupIds: [null], // 顺序轮换参数
+                  ruleCycleVos: [cloneDeep(ruleCycleVo)], // 周期轮换参数
+                  againRotation: 0, // 是否需要重新轮换: 0-否 1-是
+                  rotationCycle: 1, // 重新轮换周期(天)
+                };
+              }
+            });
+          }
+        }
+      },
+      { deep: true, immediate: true }
+    );
+
+    const ruleTypeChangeHandle = (val: any) => {
+      if (val === 1) {
+        // 顺序轮换
+        if (
+          formState.value.ruleInfoJobPostVos[activeKey.value].ruleWorkgroupIds
+            .length === 0
+        ) {
+          formState.value.ruleInfoJobPostVos[activeKey.value].ruleWorkgroupIds =
+            [null];
+        }
+      } else {
+        // 固定周期轮换
+        if (
+          formState.value.ruleInfoJobPostVos[activeKey.value].ruleCycleVos
+            .length === 0
+        ) {
+          formState.value.ruleInfoJobPostVos[activeKey.value].ruleCycleVos = [
+            cloneDeep(ruleCycleVo),
+          ];
+        }
+      }
+    };
+
+    // 获取班制列表
+    const classList = ref([]);
+    const getClass = async () => {
+      const resp = await workforceApi.getClassList(null);
+      classList.value = resp.data.rows;
+    };
+    getClass();
+
+    // 获取班次职能名称
+    const getshiftDutyName = (id: any) => {
+      return shiftDutyList.filter((item: any) => item.key === id)[0].name;
+    };
+
+    const handleCancel = () => {
+      formState.value = {
+        depId: "", // 部门id
+        shiftSysId: null, // 班制id
+        createUser: userinfo.userName,
+        ruleInfoJobPostVos: {},
+      };
+
+      jobList.value = [];
+      tabActiveKey.value = 0;
+    };
+
+    const handleOk = async () => {
+      // console.info(formState.value);
+      // let jobs: any = [];
+      // Object.keys(formState.value.ruleInfoJobPostVos).forEach((key) => {
+      //   // console.info(formState.value.ruleInfoJobPostVos[key]);
+      //   const obj = formState.value.ruleInfoJobPostVos[key];
+
+      //   if (obj.ruleType === 1) {
+      //     // 顺序轮换
+      //     obj.ruleWorkgroupIds.some((ruleWork: any) => {
+      //       if (!ruleWork) {
+      //         jobs.push({ id: key });
+      //         return true;
+      //       }
+      //     });
+      //   } else if (obj.ruleType === 2) {
+      //     // 固定周期轮换
+      //     obj.ruleCycleVos.some((ruleCycle: any, k: number) => {
+      //       let rc: any = { id: key, val: [] };
+      //       if (!ruleCycle.cycleDuration) {
+      //         // rc.val.push('周期内持续时长不能为空!');
+      //         rc.val.push(`周期${k + 1} 数据错误！`);
+      //         jobs.push(rc);
+      //         return true;
+      //       }
+
+      //       if (ruleCycle.ruleWorkgroupIds.length) {
+      //         if (
+      //           classDetail.value.infos.length !==
+      //           ruleCycle.ruleWorkgroupIds.length
+      //         ) {
+      //           // rc.val.push('班组不能为空!');
+      //           rc.val.push(`周期${k + 1} 数据错误！`);
+      //           jobs.push(rc);
+      //           return true;
+      //         }
+      //         classDetail.value.infos.some((cls: any, key: number) => {
+      //           if (!ruleCycle.ruleWorkgroupIds[key]) {
+      //             rc.val.push(`周期${k + 1} 数据错误！`);
+      //             jobs.push(rc);
+      //             return true;
+      //           }
+      //         });
+      //       } else {
+      //         rc.val.push(`周期${k + 1} 数据错误！`);
+      //         jobs.push(rc);
+      //         return true;
+      //       }
+      //     });
+      //   }
+      // });
+
+      // let result: any = [];
+      // if (jobs.length) {
+      //   jobs.map((obj: any) => {
+      //     const job: any = jobList.value.filter(
+      //       (val: any) => obj.id === val.id,
+      //     );
+
+      //     // console.info(job, job[0].name);
+      //     obj.name = job[0].name;
+      //     if (obj.val) {
+      //       result.push(
+      //         <div>
+      //           {obj.name} {obj.val.toString()}
+      //         </div>,
+      //       );
+      //     } else {
+      //       result.push(<div>{obj.name} 班组不能为空！</div>);
+      //     }
+
+      //     // console.info(result);
+      //   });
+      //   message.error({
+      //     content: (
+      //       <span>
+      //         数据错误
+      //         {result.map((val: any) => val)}
+      //       </span>
+      //     ),
+      //   });
+      //   return;
+      // }
+
+      let resp;
+      if (props.ruleCode) {
+        // 编辑
+        resp = await workforceApi.ruleEdit(props.ruleCode, formState.value);
+      } else {
+        resp = await workforceApi.ruleAdd(formState.value);
+      }
+
+      if (resp && (resp as any).message === "OK") {
+        message.success("保存成功！");
+        isVisible.value = false;
+
+        emit("refresh");
+        handleCancel();
+      }
+    };
+
+    // 顺序轮换
+    const order = () => {
+      const item = formState.value.ruleInfoJobPostVos[activeKey.value];
+      return (
+        <div class="order flex">
+          <div style="width:40%; padding: 6px;">
+            班制
+            <div class="line flex">
+              <div class="left cls">班次</div>
+              <div class="right">班次职能</div>
+            </div>
+            {classDetail.value &&
+              classDetail.value.infos.map((cls: any, index: number) => (
+                <div class="line flex" key={cls.id}>
+                  <div
+                    class="left"
+                    style="width: 200px"
+                  >{`${cls.name}(${cls.startTime}-${cls.endTime})`}</div>
+                  <div class="right">{getshiftDutyName(cls.shiftDuty)}</div>
+                </div>
+              ))}
+          </div>
+
+          <div style="width:50%; padding: 6px;">
+            <a-space>
+              班组
+              <a-tooltip
+                v-slots={{
+                  title: () => "班组可以在系统管理->班组管理中维护",
+                }}
+              >
+                <info-circle-outlined />
+              </a-tooltip>
+              <a-button
+                type="link"
+                v-slots={{
+                  icon: () => <plus-outlined />,
+                }}
+                onClick={() => {
+                  if (
+                    formState.value.ruleInfoJobPostVos[activeKey.value]
+                      .ruleWorkgroupIds.length < 5
+                  ) {
+                    formState.value.ruleInfoJobPostVos[
+                      activeKey.value
+                    ].ruleWorkgroupIds.push(null);
+                  } else {
+                    message.info("最多可添加5个班组！");
+                  }
+                }}
+              >
+                添加
+              </a-button>
+            </a-space>
+
+            {formState.value.ruleInfoJobPostVos[
+              activeKey.value
+            ].ruleWorkgroupIds.map((item: any, index: number) => (
+              <div class="line flex-center">
+                <div class="left">班组{index + 1}</div>
+                <div class="right">
+                  <a-select
+                    allowClear
+                    v-model={[
+                      formState.value.ruleInfoJobPostVos[activeKey.value]
+                        .ruleWorkgroupIds[index],
+                      "value",
+                    ]}
+                    style="width: 80%"
+                  >
+                    {groupList.value &&
+                      groupList.value.map((group: any, idx: number) => (
+                        <a-select-option key={group.id} value={group.id}>
+                          {group.name}
+                        </a-select-option>
+                      ))}
+                  </a-select>
+                  {index > 0 && (
+                    <delete-outlined
+                      style={{ color: "red", marginLeft: "10px" }}
+                      onClick={() => {
+                        formState.value.ruleInfoJobPostVos[
+                          activeKey.value
+                        ].ruleWorkgroupIds.splice(index, 1);
+                      }}
+                    />
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+    };
+
+    // 固定周期轮换
+    const period = () => {
+      const item = formState.value.ruleInfoJobPostVos[activeKey.value];
+      return (
+        <div class="period flex">
+          <div>
+            <a-tabs
+              v-model={[tabActiveKey.value, "activeKey"]}
+              tabPosition="left"
+              animated
+            >
+              {formState.value.ruleInfoJobPostVos[
+                activeKey.value
+              ].ruleCycleVos.map((tab: any, index: number) => (
+                <a-tab-pane key={index} tab={`周期${index + 1}`}></a-tab-pane>
+              ))}
+            </a-tabs>
+            <a-button
+              style="margin-top: 60px"
+              type="link"
+              v-slots={{
+                icon: () => <plus-outlined />,
+              }}
+              onClick={() => {
+                if (
+                  formState.value.ruleInfoJobPostVos[activeKey.value]
+                    .ruleCycleVos.length < 10
+                ) {
+                  formState.value.ruleInfoJobPostVos[
+                    activeKey.value
+                  ].ruleCycleVos.push({ ...ruleCycleVo });
+                } else {
+                  message.info("最多可添加10个周期！");
+                }
+              }}
+            >
+              周期
+            </a-button>
+          </div>
+
+          <div style="flex: 1">
+            <a-form-item label="周期内持续时长" name="cycleDuration">
+              <div class="flex-center">
+                <a-input-number
+                  v-model={[
+                    formState.value.ruleInfoJobPostVos[activeKey.value]
+                      .ruleCycleVos[tabActiveKey.value].cycleDuration,
+                    "value",
+                  ]}
+                  style="width: 200px; margin-right: 10px;"
+                  min="1"
+                  controls={false}
+                />
+                天
+              </div>
+            </a-form-item>
+
+            <div class="line flex">
+              <div class="left" style="width: 240px;">
+                班次
+              </div>
+              <div class="center">班次职能</div>
+              <div class="right">
+                <a-space>
+                  上班班组
+                  <a-tooltip
+                    v-slots={{
+                      title: () => "班组可以在系统管理->班组管理中维护",
+                    }}
+                  >
+                    <info-circle-outlined />
+                  </a-tooltip>
+                </a-space>
+              </div>
+            </div>
+
+            {classDetail.value &&
+              classDetail.value.infos.map((cls: any, index: number) => (
+                <div class="line flex" key={cls.id}>
+                  <div
+                    class="left"
+                    style="width: 240px;"
+                  >{`${cls.name}(${cls.startTime}-${cls.endTime})`}</div>
+                  <div class="center">{getshiftDutyName(cls.shiftDuty)}</div>
+                  <div class="right">
+                    <a-select
+                      allowClear
+                      v-model={[
+                        formState.value.ruleInfoJobPostVos[activeKey.value]
+                          .ruleCycleVos[tabActiveKey.value].ruleWorkgroupIds[
+                          index
+                        ],
+                        "value",
+                      ]}
+                      style="width: 80%"
+                    >
+                      {groupList.value &&
+                        groupList.value.map((group: any, idx: number) => (
+                          <a-select-option key={group.id} value={group.id}>
+                            {group.name}
+                          </a-select-option>
+                        ))}
+                    </a-select>
+                  </div>
+                </div>
+              ))}
+
+            {tabActiveKey.value > 0 && (
+              <a-button
+                style="margin-top: 60px"
+                type="link"
+                danger
+                v-slots={{
+                  icon: () => <delete-outlined />,
+                }}
+                onClick={() => {
+                  formState.value.ruleInfoJobPostVos[
+                    activeKey.value
+                  ].ruleCycleVos.splice(tabActiveKey.value, 1);
+                  tabActiveKey.value = --tabActiveKey.value;
+                }}
+              >
+                删除此周期
+              </a-button>
+            )}
+          </div>
+        </div>
+      );
+    };
+
+    return () => (
+      <a-modal
+        v-model={[isVisible.value, "visible"]}
+        title={props.ruleCode ? "编辑排班规则" : "添加排班规则"}
+        width="800px"
+        onOk={handleOk}
+        onCancel={handleCancel}
+      >
+        <div class="rule">
+          <a-form
+            model={formState.value}
+            ref={formRef}
+            name="basic"
+            labelCol={{ style: { width: "150px" } }}
+            autocomplete="off"
+          >
+            <a-row class="row" gutter={[16, 16]}>
+              <a-col span="12">
+                <a-form-item
+                  label="班组部门"
+                  name="depId"
+                  rules={[{ required: true, message: "不能为空!" }]}
+                >
+                  <a-tree-select
+                    style={{ width: "200px" }}
+                    disabled={props.ruleCode && props.ruleCode.length > 0}
+                    fieldNames={{
+                      label: "name",
+                      value: "id",
+                      children: "subList",
+                    }}
+                    treeData={props.depList}
+                    v-model={[formState.value.depId, "value"]}
+                  ></a-tree-select>
+                </a-form-item>
+              </a-col>
+
+              <a-col span="12">
+                <a-form-item
+                  label="选择班制"
+                  name="shiftSysId"
+                  rules={[{ required: true, message: "不能为空!" }]}
+                >
+                  <a-select
+                    v-model={[formState.value.shiftSysId, "value"]}
+                    style="width: 100%"
+                  >
+                    {classList.value.map((item: any, index: number) => (
+                      <a-select-option key={item.id} value={item.id}>
+                        {item.name}
+                      </a-select-option>
+                    ))}
+                  </a-select>
+                </a-form-item>
+              </a-col>
+
+              {/* {formState.value.depId && jobList.value.length === 0 && (
+                <div class='noJob'>该部门下无岗位信息，无法进行排班</div>
+              )} */}
+
+              {jobList.value && activeKey.value && (
+                <a-col span="24">
+                  <a-tabs v-model={[activeKey.value, "activeKey"]}>
+                    {jobList.value.map((job: any, index: number) => (
+                      <a-tab-pane key={job.id} tab={job.name}></a-tab-pane>
+                    ))}
+                  </a-tabs>
+                </a-col>
+              )}
+
+              {formState.value.shiftSysId &&
+                activeKey.value &&
+                formState.value.ruleInfoJobPostVos[activeKey.value] && (
+                  <div style="width: 100%">
+                    <a-col span="12">
+                      <a-form-item label="规则类型">
+                        <a-select
+                          v-model={[
+                            formState.value.ruleInfoJobPostVos[activeKey.value]
+                              .ruleType,
+                            "value",
+                          ]}
+                          onChange={ruleTypeChangeHandle}
+                          style="width: 100%"
+                        >
+                          {ruleTypeList.map((ruleType) => (
+                            <a-select-option
+                              key={ruleType.key}
+                              value={ruleType.key}
+                            >
+                              {ruleType.name}
+                            </a-select-option>
+                          ))}
+                        </a-select>
+                      </a-form-item>
+                    </a-col>
+
+                    <a-col span="24">
+                      {formState.value.ruleInfoJobPostVos[activeKey.value]
+                        .ruleType &&
+                        activeKey.value &&
+                        (formState.value.ruleInfoJobPostVos[activeKey.value]
+                          .ruleType === 1
+                          ? order()
+                          : period())}
+                    </a-col>
+
+                    {formState.value.ruleInfoJobPostVos[activeKey.value] &&
+                      formState.value.ruleInfoJobPostVos[activeKey.value]
+                        .ruleType &&
+                      activeKey.value && (
+                        <div>
+                          <a-divider />
+
+                          <a-row>
+                            <a-col span="12">
+                              <a-form-item label="是否需要重新轮换">
+                                <a-select
+                                  v-model={[
+                                    formState.value.ruleInfoJobPostVos[
+                                      activeKey.value
+                                    ].againRotation,
+                                    "value",
+                                  ]}
+                                  style="width: 100%"
+                                >
+                                  {againRotationList.map((againRotation) => (
+                                    <a-select-option
+                                      key={againRotation.key}
+                                      value={againRotation.key}
+                                    >
+                                      {againRotation.name}
+                                    </a-select-option>
+                                  ))}
+                                </a-select>
+                              </a-form-item>
+                            </a-col>
+
+                            {formState.value.ruleInfoJobPostVos[
+                              activeKey.value
+                            ] &&
+                              formState.value.ruleInfoJobPostVos[
+                                activeKey.value
+                              ].againRotation === 1 && (
+                                <a-col span="12">
+                                  <a-form-item label="重新轮换周期">
+                                    <a-input-number
+                                      v-model={[
+                                        formState.value.ruleInfoJobPostVos[
+                                          activeKey.value
+                                        ].rotationCycle,
+                                        "value",
+                                      ]}
+                                      style="width: 80%; margin-right: 10px"
+                                      min="1"
+                                      controls={false}
+                                    />
+                                    天
+                                  </a-form-item>
+                                </a-col>
+                              )}
+                          </a-row>
+                        </div>
+                      )}
+                  </div>
+                )}
+            </a-row>
+          </a-form>
+        </div>
+      </a-modal>
+    );
+  },
+});