ShutongInterconnectedChemicalCloudPlatform/src/components/workflow/drwer/approverDrawer.vue

<!--
@ 作者: 秦东
@ 时间: 2023-10-11 09:54:58
@ 备注: 审批人设置
-->
<script lang="ts" setup>
import $func from "@/utils/workflow/index";
import { setTypes, selectModes, selectRanges } from "@/utils/workflow/const";
import { useStore } from "@/store/workflow/index";
import {
  getAllParentNode,
  judgeOptionalNode,
  analysisForm,
  setFlowFormKeyPower,
} from "@/api/workflowapi/index";

import { govthree } from "@/api/opk/opk/api";

import PositionDialog from "@/components/workflow/dialog/positionDialog.vue";
import FormWord from "@/components/workflow/dialog/formWord.vue";
import MatrixPage from "@/components/workflow/dialog/matrix.vue";
import MatrixPageIng from "@/components/workflow/dialog/matrixIng.vue";

import { formTableField } from "@/api/DesignForm/type";
import { gainFormTableField } from "@/api/DesignForm/requestapi";
import { matrixInfo } from "@/api/matrixapi/type";

let props = defineProps({
  nodeConfig: {
    type: Object,
    default: () => ({}),
  },
  directormaxlevel: {
    type: Number,
    default: 4,
  },
  isFormFlow: {
    type: Boolean,
    default: true,
  },
  customerFormKey: {
    type: String,
    default: "",
  },
  formVersion: {
    type: String,
    default: "",
  },
  formData: {
    type: Object,
    default() {
      return {};
    },
  },
});
const flowOrgTree = ref();
const isExecutor = ref(false);
const nodeTitle = ref<string>("审批人设置");
const nodeOptional = ref<any[]>(); //审批线已经存在得节点
const nodeAllVerify = ref<any[]>();
const orgList = ref<any[]>(); //行政组织
const orgProps = {
  value: "id",
  label: "name",
  children: "child",
};

const isLookAll = ref(false);
const isEditAll = ref(false);

let approverConfig = ref<any>({});
let approverVisible = ref(false);
let approverRoleVisible = ref(false);
let appPosistonVisible = ref(false);
let appFormTableVisible = ref(false);
let checkedRoleList = ref<any[]>([]); //角色列表
let checkedPostList = ref<any[]>([]); //岗位列表
let checkedFormList = ref<any[]>([]); //字段列表
let checkedList = ref<any[]>([]);
let store = useStore();
let { setApproverConfig, setApprover } = store;
let approverConfig1 = computed((): any => store.approverConfig1);
let approverDrawer = computed((): any => store.approverDrawer);

const emits = defineEmits<{
  (e: "update:formData", val: any): void;
}>();

let visible = computed({
  get() {
    return approverDrawer.value;
  },
  set() {
    closeDrawer();
  },
});

const formData = computed({
  get() {
    return props.formData;
  },
  set(val: formStruct) {
    emits("update:formData", val);
  },
});

const powerUnitAry = ref<any>({
  nodeKey: "",
  recUnitAry: {
    masterUnitList: [],
    sunUnitList: [],
    unitAllKey: [],
    unitAllState: [],
  },
});

const matrixIsShow = ref(false);

watch(approverConfig1, (val: any) => {
  val.value.attribute = val.value.attribute * 1;
  console.log("directormaxlevel", val.value, val.value.type);
  matrixIsShow.value = false;
  approverConfig.value = val.value;
  if (val.value.type == 3) {
    if (val.value.nodeName != "") {
      nodeTitle.value = val.value.nodeName + "设置";
    } else {
      nodeTitle.value = "执行人设置";
    }
  } else {
    if (val.value.nodeName != "") {
      nodeTitle.value = val.value.nodeName + "设置";
    } else {
      nodeTitle.value = "审批人设置";
    }
    // if(val.settype == 10){
    // let sendOrg = {
    // 		id: 313,
    // 		idstr: "313",
    // 		level: 4,
    // 		all: 1
    // 	}
    // 	govthree(sendOrg)
    // 		.then(({data})=>{
    // 			console.log("监听审批人设置选项",data)
    // 			orgList.value = data
    // 		})
    // }
  }
  isExecutor.value = false;
  // approverConfig.attribute = approverConfig.attribute*1
  if (visible.value) {
    judgeOptionalNode(props.nodeConfig).then((data: any) => {
      if (data.code == 0) {
        let sendData = {
          id: val.value.fromNode,
          allcont: data.data.allcont,
        };
        getAllParentNode(sendData).then((data: any) => {
          if (data.code == 0) {
            nodeOptional.value = data.data.allcont;
            if (data.data.allcont && data.data.allcont.length > 0) {
              data.data.allcont.forEach((item: any) => {
                if (item.type == 3) {
                  isExecutor.value = true;
                  return;
                }
              });
            }
          }
        });
      }
    });
  }
  if (val.value.settype == 9) {
    matrixIsShow.value = true;
    matrixFieldList.value = approverConfig.value.matrix;
  }
});
let changeRange = () => {
  approverConfig.value.nodeUserList = [];
};

//权限矩阵
const matrixList = ref<any[]>();
const matrixCont = ref<any>();
const matrixFieldList = ref<matrixInfo>();

const changeType = (val: any) => {
  matrixIsShow.value = false;
  approverConfig.value.nodeUserList = [];
  approverConfig.value.examineMode = 1;
  approverConfig.value.noHanderAction = 2;
  if (val == 2) {
    approverConfig.value.directorLevel = 1;
  } else if (val == 4) {
    approverConfig.value.selectMode = 1;
    approverConfig.value.selectRange = 1;
  } else if (val == 7) {
    approverConfig.value.examineEndDirectorLevel = 1;
  } else if (val == 9) {
    matrixIsShow.value = true;
    matrixFieldList.value = approverConfig.value.matrix;
  }
};
const addApprover = () => {
  approverVisible.value = true;
  checkedList.value = approverConfig.value.nodeUserList;
};
const addRoleApprover = () => {
  approverRoleVisible.value = true;
  checkedRoleList.value = approverConfig.value.nodeUserList;
};
const addApproverPost = () => {
  appPosistonVisible.value = true;
  checkedPostList.value = approverConfig.value.nodeUserList;
};
const surePostApprover = (data: any) => {
  appPosistonVisible.value = false;
  approverConfig.value.nodeUserList = data;
};
const sureApprover = (data: any) => {
  approverConfig.value.nodeUserList = data;
  approverVisible.value = false;
};
const sureRoleApprover = (data: any) => {
  approverConfig.value.nodeUserList = data;
  approverRoleVisible.value = false;
};
const saveApprover = () => {
  approverConfig.value.error = !$func.setApproverStr(approverConfig.value);
  setApproverConfig({
    value: approverConfig.value,
    flag: true,
    id: approverConfig1.value.id,
  });
  let powerAry = [];
  if (
    powerUnitAry.value.recUnitAry.masterUnitList &&
    powerUnitAry.value.recUnitAry.masterUnitList.length > 0
  ) {
    powerUnitAry.value.recUnitAry.masterUnitList.forEach((item: any) => {
      powerAry.push(item);
    });
  }
  if (
    powerUnitAry.value.recUnitAry.sunUnitList &&
    powerUnitAry.value.recUnitAry.sunUnitList.length > 0
  ) {
    powerUnitAry.value.recUnitAry.sunUnitList.forEach((item: any) => {
      if (item.masterUnitList && item.masterUnitList.length > 0) {
        item.masterUnitList.forEach((itemSun: any) => {
          // powerAry.push(item)
          if (!powerAry.includes(itemSun)) {
            powerAry.push(itemSun);
          }
        });
      }
    });
  }
  // console.log("正确",formData.value)
  if (formData.value.purview) {
    // console.log("正确")
    let isNew = true;
    formData.value.purview.forEach((item: any) => {
      // console.log("正确---->",item.nodeKey)
      if (item.nodeKey == approverConfig1.value.value.nodeNumber) {
        item.powerAry = powerAry;
        item.apiSetup = apiSetup;
        isNew = false;
      }
    });
    if (isNew) {
      formData.value.purview.push({
        nodeKey: approverConfig1.value.value.nodeNumber,
        powerAry: powerAry,
        apiSetup: apiSetup,
      });
    }
  } else {
    formData.value.purview = [
      {
        nodeKey: approverConfig1.value.value.nodeNumber,
        powerAry: powerAry,
        apiSetup: apiSetup,
      },
    ];
  }
  let sendInfo: any = {
    formKey: props.customerFormKey.toString(),
    formVersion: props.formVersion.toString(),
    formData: JSON.stringify(formData.value),
    formPower: JSON.stringify(formData.value.purview),
  };
  // console.log("sendInfo",sendInfo)
  setFlowFormKeyPower(sendInfo);
  closeDrawer();
};
const closeDrawer = () => {
  setApprover(false);
  isExecutor.value = false;
};
//判断审批设置是否显示
const isShowRatify = (id: number) => {
  if (id == 8) {
    return props.isFormFlow;
  } else {
    return true;
  }
};

//字段
const formTableField = () => {
  appFormTableVisible.value = true;
  checkedFormList.value = approverConfig.value.nodeUserList;
};
const sureFormTableApprover = (data: any) => {
  approverConfig.value.nodeUserList = data;
  appFormTableVisible.value = false;
};

//更新审批人设置
const updateMatrix = (val: any) => {
  approverConfig.value.matrix = val;
  console.log("值改变-222--->", approverConfig.value);
};

const formTableFielding = reactive<formTableField>({});
/**
@ 作者: 秦东
@ 时间: 2024-03-13 08:24:54
@ 功能: 解析表单
*/
const jieForm = () => {
  // console.log("nodeKey:approverConfig1.nodeNumber",approverConfig1.value.value.nodeNumber);
  analysisForm({
    nodeKey: approverConfig1.value.value.nodeNumber,
    nodeJson: JSON.stringify(formData.value),
  }).then((data) => {
    if (data.code == 0) {
      powerUnitAry.value = data.data;
    }
  });

  if (props.customerFormKey != "") {
    gainFormTableField({ id: props.customerFormKey.toString() }).then((data) => {
      // console.log('解析表单--->',data)
      formTableFielding.masterTable = data.data.masterTable;
      formTableFielding.sunTable = data.data.sunTable;
    });
  }
};

watch(
  () => visible.value,
  (val: boolean) => {
    if (val) {
      jieForm();
    }
  }
);
const nodeSetUp = ref("first");

/**
@ 作者: 秦东
@ 时间: 2024-07-25 15:43:09
@ 功能: 选择情况
*/
const editOpenOrClose = (val: any) => {
  if (powerUnitAry.value.recUnitAry.masterUnitList) {
    powerUnitAry.value.recUnitAry.masterUnitList.forEach((item: any) => {
      item.isEdit = val;
    });
  }
};
const lookOpenOrClose = (val: boolean) => {
  if (powerUnitAry.value.recUnitAry.masterUnitList) {
    powerUnitAry.value.recUnitAry.masterUnitList.forEach((item: any) => {
      item.isLook = val;
      if (!val) {
        item.isEdit = val;
        isEditAll.value = val;
      }
    });
  }
};
/**
@ 作者: 秦东
@ 时间: 2024-07-25 16:09:18
@ 功能: 操作单一可见
*/
const oneLookSet = (val: any) => {
  if (!val.isLook) {
    val.isEdit = val;
    isEditAll.value = val;
  }
  if (powerUnitAry.value.recUnitAry.masterUnitList) {
    let lookAll = 0;
    powerUnitAry.value.recUnitAry.masterUnitList.forEach((item: any) => {
      if (item.isLook) {
        lookAll++;
      }
    });
    if (lookAll != powerUnitAry.value.recUnitAry.masterUnitList.length) {
      isLookAll.value = false;
    } else {
      isLookAll.value = true;
    }
  }
};
/**
@ 作者: 秦东
@ 时间: 2024-07-25 16:17:32
@ 功能: 操作单一可编辑
*/
const oneEditSet = (val: any) => {
  if (powerUnitAry.value.recUnitAry.masterUnitList) {
    let lookAll = 0;
    powerUnitAry.value.recUnitAry.masterUnitList.forEach((item: any) => {
      if (item.isEdit) {
        lookAll++;
      }
    });
    if (lookAll != powerUnitAry.value.recUnitAry.masterUnitList.length) {
      isEditAll.value = false;
    } else {
      isEditAll.value = true;
    }
  }
};

//监听审批人设置选项
watch(
  () => approverConfig.value.settype,
  (val: any) => {
    // console.log("监听审批人设置选项",approverConfig.value)
    switch (val) {
      case 10:
        let sendOrg = {
          id: 313,
          idstr: "313",
          level: 4,
          all: 1,
        };
        govthree(sendOrg).then(({ data }) => {
          // console.log("监听审批人设置选项",data)
          orgList.value = data;
          nextTick(() => {
            setOrgTree(approverConfig.value.orgList);
          });
        });
        break;

      default:
        break;
    }
  },
  {
    deep: true,
  }
);
/**
@ 作者: 秦东
@ 时间: 2024-08-08 15:54:07
@ 功能: 选中的哪个行政组织
*/
const handleNodeClickOrg = (data: any, threePickAry: any) => {
  console.log("选中的哪个行政组织----data------->", data);
  console.log("选中的哪个行政组织----checked------->", threePickAry);
  console.log(
    "选中的哪个行政组织----halfCheckedKeys------->",
    threePickAry.halfCheckedKeys
  );
  console.log("选中的哪个行政组织----checkedKeys------->", threePickAry.checkedKeys);
  if (
    threePickAry.halfCheckedKeys &&
    Array.isArray(threePickAry.halfCheckedKeys) &&
    threePickAry.halfCheckedKeys.length > 0
  ) {
    if (
      threePickAry.checkedKeys &&
      Array.isArray(threePickAry.checkedKeys) &&
      threePickAry.checkedKeys.length > 0
    ) {
      approverConfig.value.orgList = threePickAry.checkedKeys;
      console.log("选中的哪个行政组织----1------->", approverConfig.value.orgList);
    } else {
      approverConfig.value.orgList = [];
      console.log("选中的哪个行政组织----2------->", approverConfig.value.orgList);
    }
  } else {
    if (
      threePickAry.checkedKeys &&
      Array.isArray(threePickAry.checkedKeys) &&
      threePickAry.checkedKeys.length > 0
    ) {
      if (data.level <= 3) {
        threePickAry.checkedKeys = threePickAry.checkedKeys.filter(
          (item) => item !== data.id
        );
      }
      approverConfig.value.orgList = threePickAry.checkedKeys;
      console.log("选中的哪个行政组织----3------->", approverConfig.value.orgList);
    } else {
      approverConfig.value.orgList = [];
      console.log("选中的哪个行政组织----4------->", approverConfig.value.orgList);
    }
  }
  // if(approverConfig.value.orgList && Array.isArray(approverConfig.value.orgList)){

  // 	if(threePickAry.halfCheckedKeys && Array.isArray(threePickAry.halfCheckedKeys) && threePickAry.halfCheckedKeys.length > 0){

  // 	}else{

  // 		if(threePickAry.checkedKeys && Array.isArray(threePickAry.checkedKeys) && threePickAry.checkedKeys.length > 0){
  // 			threePickAry.checkedKeys = threePickAry.checkedKeys.filter(item => item !== data.id);
  // 			approverConfig.value.orgList=threePickAry.checkedKeys
  // 		}
  // 	}

  // 	if(checked){
  // 		if(!approverConfig.value.orgList.includes(data.id)){
  // 			approverConfig.value.orgList.push(data.id)
  // 		}
  // 	}else{
  // 		console.log("选中的哪个行政组织----1------->",Array.isArray(approverConfig.value.orgList),approverConfig.value.orgList.length > 0)
  // 		if(Array.isArray(approverConfig.value.orgList) && approverConfig.value.orgList.length > 0){
  // 			approverConfig.value.orgList = approverConfig.value.orgList.filter(item => item !== data.id);
  // 		}
  // 	}
  // }else{
  // 	if(threePickAry.halfCheckedKeys && Array.isArray(threePickAry.halfCheckedKeys) && threePickAry.halfCheckedKeys.length > 0){
  // 		approverConfig.value.orgList=threePickAry.checkedKeys
  // 	}else{
  // 		if(threePickAry.checkedKeys && Array.isArray(threePickAry.checkedKeys) && threePickAry.checkedKeys.length > 0){
  // 			threePickAry.checkedKeys = threePickAry.checkedKeys.filter(item => item !== data.id);
  // 			approverConfig.value.orgList=threePickAry.checkedKeys
  // 		}
  // 	}
  // }
  console.log(
    "选中的哪个行政组织----approverConfig.value.orgList------->",
    approverConfig.value.orgList
  );
};

// watch(()=>approverConfig.value.orgList,(val:any)=>{
// 	setOrgTree(val)
// },{
// 	deep:true
// })

/**
@ 作者: 秦东
@ 时间: 2024-08-08 16:07:49
@ 功能: 设置选项
*/
const setOrgTree = (val: any) => {
  console.log("设置选项", val);
  if (Array.isArray(val)) {
    flowOrgTree.value!.setCheckedKeys(val, true);
  } else {
    flowOrgTree.value!.setCheckedKeys([val], true);
  }
};

const apiSetup = reactive<any>({
  title: [],
  library: [],
});
/**
@ 作者: 秦东
@ 时间: 2025-04-10 08:12:21
@ 功能: 知识库
*/
const libraryList = ref([
  {
    label: "法律法规",
    value: 1,
  },
  {
    label: "安全环保",
    value: 2,
  },
  {
    label: "员工守则",
    value: 3,
  },
]);
</script>
<template>
  <el-drawer
    v-model="visible"
    :append-to-body="true"
    :title="nodeTitle"
    class="set_promoter"
    :show-close="false"
    :size="550"
    :before-close="closeDrawer"
  >
    <div class="demo-drawer__content">
      <!--审批人设置主体-->
      <div class="drawer_content">
        <el-tabs v-model="nodeSetUp" class="demo-tabs">
          <el-tab-pane name="first">
            <template #label>
              <span class="wordKeyCss">属性设置</span>
            </template>
            <!-- <el-divider content-position="left">节点属性</el-divider> -->
            <div class="approver_content">
              <el-radio-group
                v-model="approverConfig.settype"
                class="clear"
                @change="changeType"
              >
                <template v-for="{ value, label } in setTypes" :key="value">
                  <el-radio
                    v-if="isShowRatify(value)"
                    :label="value"
                    style="width: auto"
                    >{{ label }}</el-radio
                  >
                </template>
              </el-radio-group>
            </div>
            <!--指定成员-->
            <el-divider v-if="approverConfig.settype == 1" content-position="left"
              >指定成员</el-divider
            >
            <div v-if="approverConfig.settype == 1" class="approver_manager">
              <el-button type="primary" @click="addApprover">添加/修改成员</el-button>
              <p class="selected_list">
                <el-tag
                  v-for="(item, index) in approverConfig.nodeUserList"
                  :key="index"
                  closable
                  type="info"
                  effect="plain"
                  class="tag_us"
                  @close="$func.removeEle(approverConfig.nodeUserList, item, 'targetId')"
                  >{{ item.name }}</el-tag
                >
                <el-tag
                  v-if="approverConfig.nodeUserList.length != 0"
                  type="danger"
                  effect="dark"
                  @click="approverConfig.nodeUserList = []"
                  >清除</el-tag
                >
              </p>
            </div>
            <!--主管-->
            <el-divider v-if="approverConfig.settype == 2" content-position="left"
              >主管</el-divider
            >
            <div v-if="approverConfig.settype == 2" class="approver_manager">
              <p>
                <el-row :gutter="10">
                  <el-col v-if="isExecutor" :span="6">
                    <select v-model="approverConfig.attribute" style="width: 100%">
                      <option value="1">发起人</option>
                      <option value="2">执行人</option>
                    </select>
                  </el-col>
                  <el-col :span="18">
                    <select v-model="approverConfig.directorLevel">
                      <option
                        v-for="item in props.directormaxlevel"
                        :key="item"
                        :value="item"
                      >
                        {{ item == 1 ? "直接" : "第" + item + "级" }}主管
                      </option>
                    </select>
                  </el-col>
                </el-row>
              </p>
              <p class="tip">找不到主管时，由上级主管代审批</p>
            </div>
            <!--行政岗位-->
            <el-divider v-if="approverConfig.settype == 3" content-position="left"
              >指定行政岗位</el-divider
            >
            <div v-if="approverConfig.settype == 3" class="approver_manager">
              <el-row>
                <el-col :span="18">
                  <el-button type="primary" @click="addApproverPost"
                    >添加/修改行政岗位</el-button
                  >
                </el-col>
                <el-col :span="6">
                  <select
                    v-if="isExecutor"
                    v-model="approverConfig.attribute"
                    style="width: 100%"
                  >
                    <option value="1">发起人</option>
                    <option value="2">执行人</option>
                  </select>
                </el-col>
              </el-row>
              <p class="selected_list">
                <el-tag
                  v-for="(item, index) in approverConfig.nodeUserList"
                  :key="index"
                  closable
                  type="info"
                  effect="plain"
                  class="tag_us"
                  @close="$func.removeEle(approverConfig.nodeUserList, item, 'targetId')"
                  >{{ item.name }}</el-tag
                >
                <el-tag
                  v-if="approverConfig.nodeUserList.length != 0"
                  type="danger"
                  effect="dark"
                  @click="approverConfig.nodeUserList = []"
                  >清除</el-tag
                >
              </p>
            </div>
            <!--发起人自选-->
            <el-divider v-if="approverConfig.settype == 4" content-position="left"
              >发起人自选</el-divider
            >
            <div v-show="approverConfig.settype == 4" class="approver_self_select">
              <el-radio-group v-model="approverConfig.selectMode" style="width: 100%">
                <el-radio
                  v-for="{ value, label } in selectModes"
                  :key="value"
                  :label="value"
                  >{{ label }}</el-radio
                >
              </el-radio-group>
              <h3>选择范围</h3>
              <el-radio-group
                v-model="approverConfig.selectRange"
                style="width: 100%"
                @change="changeRange"
              >
                <el-radio
                  v-for="{ value, label } in selectRanges"
                  :key="value"
                  :label="value"
                  >{{ label }}</el-radio
                >
              </el-radio-group>
              <template
                v-if="approverConfig.selectRange == 2 || approverConfig.selectRange == 3"
              >
                <el-button
                  v-if="approverConfig.selectRange == 2"
                  type="primary"
                  @click="addApprover"
                  >添加/修改成员</el-button
                >
                <el-button v-else type="primary" @click="addRoleApprover"
                  >添加/修改角色</el-button
                >
                <p class="selected_list">
                  <el-tag
                    v-for="(item, index) in approverConfig.nodeUserList"
                    :key="index"
                    closable
                    type="info"
                    effect="plain"
                    class="tag_us"
                    @close="
                      $func.removeEle(approverConfig.nodeUserList, item, 'targetId')
                    "
                    >{{ item.name }}</el-tag
                  >
                  <el-tag
                    v-if="
                      approverConfig.nodeUserList.length != 0 &&
                      approverConfig.selectRange != 1
                    "
                    type="danger"
                    effect="dark"
                    @click="approverConfig.nodeUserList = []"
                    >清除</el-tag
                  >
                </p>
              </template>
            </div>
            <!--发起人自己-->
            <el-divider v-if="approverConfig.settype == 5" content-position="left"
              >发起人自选</el-divider
            >
            <div v-if="approverConfig.settype == 5" class="approver_self">
              <p>该审批节点设置“发起人自己”后，审批人默认为发起人</p>
            </div>
            <!--连续多级主管-->
            <el-divider v-if="approverConfig.settype == 6" content-position="left"
              >连续多级主管</el-divider
            >
            <div v-if="approverConfig.settype == 6" class="approver_manager">
              <p style="padding-bottom: 20px">
                <el-row :gutter="10">
                  <el-col v-if="isExecutor" :span="6">
                    <select v-model="approverConfig.attribute" style="width: 100%">
                      <option value="1">发起人</option>
                      <option value="2">执行人</option>
                    </select>
                  </el-col>
                  <el-col :span="10">
                    <select v-model="approverConfig.examineEndDirectorLevel">
                      <option
                        v-for="item in props.directormaxlevel"
                        :key="item"
                        :value="item"
                      >
                        {{ item == 1 ? "直接" : "第" + item + "级" }}主管
                      </option>
                    </select>
                  </el-col>
                </el-row>
              </p>
            </div>
            <!--指定审批节点为本节点设置审批人-->
            <el-divider v-if="approverConfig.settype == 7" content-position="left"
              >可选节点列表</el-divider
            >
            <div v-if="approverConfig.settype == 7" class="approver_manager">
              <p>可选节点列表</p>
              <el-radio-group v-model="approverConfig.customNode" class="clear">
                <el-radio label="beginnode">发起人</el-radio>
                <el-radio
                  v-for="item in nodeOptional"
                  :key="item.nodeNumber"
                  :label="item.nodeNumber"
                  class="nodeGroupRadio"
                  >{{ item.nodeName }}（编号：{{ item.nodeNumber }}）</el-radio
                >
              </el-radio-group>
            </div>
            <!--根据关联表单设置指定审批字段-->
            <el-divider v-if="approverConfig.settype == 8" content-position="left"
              >指定审批字段</el-divider
            >
            <div v-if="approverConfig.settype == 8" class="approver_manager">
              <el-button type="primary" @click="formTableField"
                >添加/修改审批字段</el-button
              >
              <p class="selected_list">
                <el-tag
                  v-for="(item, index) in approverConfig.nodeUserList"
                  :key="index"
                  closable
                  type="info"
                  effect="plain"
                  class="tag_us"
                  @close="$func.removeEle(approverConfig.nodeUserList, item, 'targetId')"
                  >{{ item.name }}</el-tag
                >
                <el-tag
                  v-if="approverConfig.nodeUserList.length != 0"
                  type="danger"
                  effect="dark"
                  @click="approverConfig.nodeUserList = []"
                  >清除</el-tag
                >
              </p>
            </div>
            <!--权限矩阵-->
            <div v-if="approverConfig.settype == 9" class="approver_manager">
              <select
                v-if="isExecutor"
                v-model="approverConfig.attribute"
                style="width: 100%"
              >
                <option value="1">发起人</option>
                <option value="2">执行人</option>
              </select>
            </div>
            <el-divider v-if="approverConfig.settype == 10" content-position="left"
              >指定部门负责人</el-divider
            >
            <div v-if="approverConfig.settype == 10" class="approver_manager">
              <el-button type="primary" @click="setOrgTree(102)">设置行政组织</el-button>
              <el-tree-v2
                ref="flowOrgTree"
                style="border: 1px solid #ccc"
                :data="orgList"
                :props="orgProps"
                :height="300"
                node-key="id"
                show-checkbox
                :check-strictly="false"
                :highlight-current="true"
                :expand-on-click-node="false"
                :check-on-click-node="true"
                @check="handleNodeClickOrg"
              />
            </div>
            <!-- <MatrixPage
              v-if="approverConfig.settype == 9"
              v-model:isshow="matrixIsShow"
              :data="matrixFieldList"
              @change="updateMatrix"
            /> -->
            <MatrixPageIng
              v-if="approverConfig.settype == 9"
              v-model:data="approverConfig"
            />
            <!--补充审批信息-->
            <el-divider
              v-if="
                (approverConfig.settype == 1 && approverConfig.nodeUserList.length > 1) ||
                approverConfig.settype == 2 ||
                approverConfig.settype == 6 ||
                (approverConfig.settype == 4 && approverConfig.selectMode == 2) ||
                approverConfig.settype == 8 ||
                approverConfig.settype == 9 ||
                approverConfig.settype == 10
              "
              content-position="left"
              >多人审批时采用的审批方式</el-divider
            >
            <div
              v-if="
                (approverConfig.settype == 1 && approverConfig.nodeUserList.length > 1) ||
                approverConfig.settype == 2 ||
                approverConfig.settype == 6 ||
                (approverConfig.settype == 4 && approverConfig.selectMode == 2) ||
                approverConfig.settype == 8 ||
                approverConfig.settype == 9 ||
                approverConfig.settype == 10
              "
              class="approver_some"
            >
              <el-radio-group v-model="approverConfig.examineMode" class="clear">
                <el-radio :label="1">依次审批</el-radio>
                <el-radio v-if="approverConfig.settype != 2" :label="2"
                  >会签(须所有审批人同意)</el-radio
                >
                <el-radio v-if="approverConfig.settype != 2" :label="3"
                  >或签(有一位审批人同意即可)</el-radio
                >
              </el-radio-group>
            </div>
            <el-divider
              v-if="
                approverConfig.settype == 2 ||
                approverConfig.settype == 6 ||
                approverConfig.settype == 9 ||
                approverConfig.settype == 10
              "
              content-position="left"
              >审批人为空时</el-divider
            >
            <div
              v-if="
                approverConfig.settype == 2 ||
                approverConfig.settype == 6 ||
                approverConfig.settype == 9 ||
                approverConfig.settype == 10
              "
              class="approver_some"
            >
              <el-radio-group v-model="approverConfig.noHanderAction" class="clear">
                <el-radio :label="1">自动审批通过/不允许发起</el-radio>
                <br />
                <el-radio :label="2">转交给审核管理员</el-radio>
              </el-radio-group>
            </div>
            <el-divider content-position="left">退回设置</el-divider>
            <div class="approver_some">
              <el-radio-group v-model="approverConfig.sendBackNode" class="clear">
                <el-radio label="beginnode">发起人</el-radio>
                <el-radio
                  v-for="item in nodeOptional"
                  :key="item.nodeNumber"
                  :label="item.nodeNumber"
                  >{{ item.nodeName }}（编号：{{ item.nodeNumber }}）</el-radio
                >
              </el-radio-group>
            </div>
          </el-tab-pane>
          <el-tab-pane name="second">
            <template #label>
              <span class="wordKeyCss">操作权限</span>
            </template>
            <!-- <el-divider content-position="left">操作权限</el-divider> -->
            <div class="info_box">
              <div class="table_name">
                <el-text class="mx-1" type="primary">主表</el-text>
              </div>
              <el-table
                v-if="powerUnitAry.recUnitAry.masterUnitList"
                :data="powerUnitAry.recUnitAry.masterUnitList"
                size="small"
                style="width: 100%; --el-table-border-color: none"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
                class="customer-no-border-table"
              >
                <el-table-column prop="name" label="字段" />
                <el-table-column align="center" width="80">
                  <template #header>
                    <el-checkbox
                      v-model="isLookAll"
                      label=""
                      @change="lookOpenOrClose"
                    />可见
                  </template>
                  <template #default="scope">
                    <el-checkbox
                      v-model="scope.row.isLook"
                      label=""
                      @change="oneLookSet(scope.row)"
                    />
                  </template>
                </el-table-column>
                <el-table-column align="center" width="120">
                  <template #header>
                    <el-checkbox
                      v-model="isEditAll"
                      label=""
                      @change="editOpenOrClose"
                    />可编辑
                  </template>
                  <template #default="scope">
                    <el-checkbox
                      v-model="scope.row.isEdit"
                      label=""
                      @change="oneEditSet(scope.row)"
                    />
                  </template>
                </el-table-column>
              </el-table>
              <el-row
                v-if="powerUnitAry.recUnitAry.sunUnitList"
                v-for="(item, index) in powerUnitAry.recUnitAry.sunUnitList"
                :key="index"
              >
                <el-col :span="24" class="table_name"
                  ><el-text class="mx-1" type="primary">{{ item.name }}</el-text
                  >子表</el-col
                >
                <el-col :span="24">
                  <el-table
                    v-if="item.masterUnitList"
                    :data="item.masterUnitList"
                    size="small"
                    style="width: 100%; --el-table-border-color: none"
                    :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
                  >
                    <el-table-column prop="name" label="字段" />
                    <el-table-column label="可见" align="center" width="80">
                      <template #default="scope">
                        <el-checkbox v-model="scope.row.isLook" label="" />
                      </template>
                    </el-table-column>
                    <el-table-column label="可编辑" align="center" width="80">
                      <template #default="scope">
                        <el-checkbox v-model="scope.row.isEdit" label="" />
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane name="helpInstructions">
            <template #label>
              <span class="wordKeyCss">帮助说明</span>
            </template>
            <div class="info_box">
              <QuillEditor v-model="approverConfig.helpTips" height="400px" />
              <el-divider content-position="left">AI触发条件设置</el-divider>
              <el-form :model="apiSetup" label-width="auto">
                <el-form-item label="触发字段">
                  <el-select
                    v-model="apiSetup.title"
                    multiple
                    collapse-tags
                    placeholder="请选择触发字段"
                  >
                    <el-option
                      v-for="oItem in formTableFielding.masterTable"
                      :key="oItem.field"
                      :label="oItem.label"
                      :value="oItem.field"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="采用的知识库">
                  <el-select
                    v-model="apiSetup.library"
                    multiple
                    collapse-tags
                    placeholder="请选择采用的知识库"
                  >
                    <el-option
                      v-for="lItem in libraryList"
                      :key="lItem.value"
                      :label="lItem.label"
                      :value="lItem.value"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="saveApprover">确 定</el-button>
        <el-button @click="closeDrawer">取 消</el-button>
      </div>
      <!--选择成员-->
      <employees-dialog
        v-model:visible="approverVisible"
        :data="checkedList"
        @change="sureApprover"
      />
      <!--选择角色-->
      <role-dialog
        v-model:visible="approverRoleVisible"
        :data="checkedRoleList"
        @change="sureRoleApprover"
      />
      <!--选择岗位-->
      <PositionDialog
        v-model:visible="appPosistonVisible"
        :data="checkedPostList"
        @change="surePostApprover"
      />
      <!--表单字段-->
      <FormWord
        v-model:visible="appFormTableVisible"
        :data="checkedFormList"
        :formid="props.customerFormKey"
        :formtype="1"
        @change="sureFormTableApprover"
      />
    </div>
  </el-drawer>
</template>
<style lang="scss" scoped>
.approver_some .el-radio-group {
  display: block;
}
.approver_manager .el-radio-group {
  display: block;
}

.approver_some .el-radio {
  display: block;
}
.set_promoter {
  .approver_content {
    padding-bottom: 10px;
    border-bottom: 0px solid #f2f2f2;
    .el-radio {
      width: auto;
    }
  }
  .approver_manager,
  .approver_self_select,
  .approver_some,
  .approver_self {
    border-top: 0px solid #f2f2f2;
  }
  .approver_self_select,
  .approver_content {
    .el-button {
      margin-bottom: 20px;
    }
  }
  .approver_content,
  .approver_some,
  .approver_self_select {
    .el-radio-group {
      display: unset;
    }
    .el-radio {
      width: 27%;
      margin-bottom: 20px;
      height: 16px;
    }
  }
  .approver_manager p {
    line-height: 32px;
  }
  .approver_manager select {
    width: 420px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
  }
  .approver_manager p.tip {
    margin: 10px 0 22px 0;
    font-size: 12px;
    line-height: 16px;
    color: #f8642d;
  }
  .approver_self {
    padding: 28px 20px;
  }
  .approver_self_select,
  .approver_manager,
  .approver_content,
  .approver_some {
    padding: 20px 20px 20px 20px;
  }
  .approver_manager p:first-of-type,
  .approver_some p {
    line-height: 19px;
    font-size: 14px;
    margin-bottom: 14px;
  }
  .approver_self_select h3 {
    margin: 5px 0 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
  }
}
.selected_list {
  margin: 0;
  line-height: 0;
  .tag_us {
    margin-right: 10px;
  }
  span {
    margin-top: 10px;
  }
  a {
    margin-top: 15px;
  }
}
.info_box {
  padding: 0 20px;
}
.wordKeyCss {
  padding: 0 20px;
}
</style>