From 31b52910c1a239bee586bc06e55aee3077094669 Mon Sep 17 00:00:00 2001
From: zmj <1493694146@qq.com>
Date: Sat, 25 May 2024 08:39:31 +0800
Subject: [PATCH] add

---
 .../dialogTable/dialogTableConfig.ts          |  29 ++
 src/views/oa_flow/edit.vue                    | 388 +++++++++++++++++-
 src/views/oa_flow/index.vue                   |  16 +-
 src/views/oa_flow_type/index.vue              |  35 +-
 src/views/oa_schedule/edit.vue                |   3 -
 5 files changed, 445 insertions(+), 26 deletions(-)

diff --git a/src/components/dialogTable/dialogTableConfig.ts b/src/components/dialogTable/dialogTableConfig.ts
index 4225773..ba6d864 100644
--- a/src/components/dialogTable/dialogTableConfig.ts
+++ b/src/components/dialogTable/dialogTableConfig.ts
@@ -1048,3 +1048,32 @@ export const marketing_competitor: Iconfig = {
     { qualifications: "企业资质" },
   ],
 };
+
+import { apiOaFlowTypeLists } from "@/api/oa_flow_type";
+
+export const oa_flow_type: Iconfig = {
+  fetchFn: apiOaFlowTypeLists,
+  dictData: "oa_approve_cate",
+  serchList: [
+    {
+      label: "所属分类",
+      value: "type",
+      select: "oa_approve_cate",
+    },
+    {
+      label: "审批名称",
+      value: "title",
+    },
+    {
+      label: "审批标识",
+      value: "name",
+    },
+  ],
+  tableList: [
+    { type_text: "所属分类" },
+    { title: "审批名称" },
+    { name: "审批标识" },
+    { icon: "图标" },
+    { department_names: "应用部门" },
+  ],
+};
diff --git a/src/views/oa_flow/edit.vue b/src/views/oa_flow/edit.vue
index 16d3360..b8e7bfd 100644
--- a/src/views/oa_flow/edit.vue
+++ b/src/views/oa_flow/edit.vue
@@ -1,12 +1,17 @@
-<template>
+<!-- <template>
     <div class="edit-popup">
-        <popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit" @close="handleClose">
-            <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
+        <popup ref="popupRef" :title="popupTitle" :async="true" width="60vw" @confirm="handleSubmit"
+            @close="handleClose">
+            <el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
                 <el-form-item label="审批流名称" prop="name">
                     <el-input v-model="formData.name" clearable placeholder="请输入审批流名称" />
                 </el-form-item>
                 <el-form-item label="流程类型" prop="check_type">
-                    <el-input v-model="formData.check_type" clearable placeholder="请输入流程类型" />
+                    <el-select v-model="formData.check_type" clearable placeholder="请选择流程类型" class="flex-1">
+                        <el-option label="可回退的审批流" :value="3" />
+                        <el-option label="自由审批流" :value="2" />
+                        <el-option label="固定审批流" :value="1" />
+                    </el-select>
                 </el-form-item>
                 <el-form-item label="应用模块" prop="type">
                     <el-input v-model="formData.type" clearable placeholder="请输入应用模块" />
@@ -14,19 +19,26 @@
                 <el-form-item label="应用审批类型id" prop="flow_cate">
                     <el-input v-model="formData.flow_cate" clearable placeholder="请输入应用审批类型id" />
                 </el-form-item>
-                <el-form-item label="应用部门ID（0为全部）1,2,3" prop="department_ids">
-                    <el-input v-model="formData.department_ids" clearable placeholder="请输入应用部门ID（0为全部）1,2,3" />
+                <el-form-item label="应用部门">
+                    <el-select v-model="formData.department_ids" multiple placeholder="请选择应用部门" class="flex-1">
+                        <el-option :label="item.name" :value="parseInt(item.id)" v-for="item in deptList">
+                        </el-option>
+                    </el-select>
                 </el-form-item>
-                <el-form-item label="抄送人ID" prop="copy_uids">
-                    <el-input v-model="formData.copy_uids" clearable placeholder="请输入抄送人ID" />
+                <el-form-item label="抄送人" prop="copy_uids">
+                    <el-input v-model="formData.copy_names" clearable placeholder="点击选择抄送人" @click="userclick" />
                 </el-form-item>
                 <el-form-item label="流程说明" prop="remark">
-                    <el-input v-model="formData.remark" clearable placeholder="请输入流程说明" />
+                    <el-input v-model="formData.remark" clearable placeholder="请输入流程说明" type="textarea" />
                 </el-form-item>
-                <el-form-item label="流程数据序列化" prop="flow_list">
-                    <el-input v-model="formData.flow_list" clearable placeholder="请输入流程数据序列化" />
+                <el-form-item label="审批流程" prop="flow_list">
+                    <el-input v-model="formData.flow_list" clearable placeholder="审批流程" />
                 </el-form-item>
             </el-form>
+            <div v-if="showDialog">
+                <personnelselector ref="personnel" @confirm="submituser" type="2">
+                </personnelselector>
+            </div>
         </popup>
     </div>
 </template>
@@ -41,13 +53,16 @@ defineProps({
     dictData: {
         type: Object as PropType<Record<string, any[]>>,
         default: () => ({})
-    }
+    },
+    deptList: Array
+
 })
 const emit = defineEmits(['success', 'close'])
 const formRef = shallowRef<FormInstance>()
 const popupRef = shallowRef<InstanceType<typeof Popup>>()
 const mode = ref('add')
-
+const showDialog = ref(false)
+const personnel = ref(null)
 
 // 弹窗标题
 const popupTitle = computed(() => {
@@ -63,10 +78,26 @@ const formData = reactive({
     flow_cate: '',
     department_ids: '',
     copy_uids: '',
+    copy_names: '',
     remark: '',
     flow_list: '',
 })
 
+const userclick = async () => {
+    showDialog.value = true
+    await nextTick()
+    personnel.value.open()
+}
+
+const submituser = (e: any) => {
+    formData.copy_uids = e.map((item: any) => {
+        return item.id
+    }).join(',')
+    formData.copy_names = e.map((item: any) => {
+        return item.name
+    }).join(',')
+    showDialog.value = false
+}
 
 // 表单验证
 const formRules = reactive<any>({
@@ -92,13 +123,13 @@ const formRules = reactive<any>({
     }],
     department_ids: [{
         required: true,
-        message: '请输入应用部门ID（0为全部）1,2,3',
+        message: '请输入应用部门ID',
         trigger: ['blur']
     }],
     copy_uids: [{
         required: true,
-        message: '请输入抄送人ID',
-        trigger: ['blur']
+        message: '请选择抄送人',
+        trigger: ['change']
     }],
     remark: [{
         required: true,
@@ -116,6 +147,7 @@ const setFormData = async (data: Record<any, any>) => {
             formData[key] = data[key]
         }
     }
+    formData.department_ids = formData.department_ids.split(",").map(Number);
 
 
 }
@@ -132,6 +164,7 @@ const getDetail = async (row: Record<string, any>) => {
 const handleSubmit = async () => {
     await formRef.value?.validate()
     const data = { ...formData, }
+    data.department_ids = data.department_ids.join(",");
     mode.value == 'edit'
         ? await apiOaFlowEdit(data)
         : await apiOaFlowAdd(data)
@@ -157,4 +190,327 @@ defineExpose({
     setFormData,
     getDetail
 })
+</script> -->
+
+<template>
+    <div class="edit-popup">
+        <popup ref="popupRef" :title="popupTitle" :async="true" width="80vw" @confirm="handleSubmit"
+            @close="handleClose">
+            <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
+                <el-row>
+                    <el-col :span="8">
+                        <el-form-item label="审批流程名称" prop="name">
+                            <el-input v-model="formData.name" clearable placeholder="请输入审批流程名称" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="应用模块" prop="type">
+                            <el-select v-model="formData.type" clearable placeholder="请选择所属分类" class="flex-1">
+                                <el-option v-for="item in dictData.oa_approve_cate" :key="item.value" :label="item.name"
+                                    :value="parseInt(item.value)" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="应用审批类型">
+                            <el-input :disabled="!formData.type" @click="showDialog = true"
+                                v-model="formData.flow_cate_name" clearable placeholder="点击选择应用审批类型" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="应用部门">
+                            <el-select v-model="formData.department_ids" multiple placeholder="请选择应用部门" class="flex-1">
+                                <el-option :label="item.name" :value="parseInt(item.id)" v-for="item in deptList">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="16">
+                        <el-form-item label="流程说明" prop="remark">
+                            <el-input v-model="formData.remark" clearable type="textarea" placeholder="请输入流程说明" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="流程类型" prop="check_type" clearable :style="{ width: '100%' }">
+                            <el-radio-group v-model="formData.check_type" @change="checkTypeFn">
+                                <el-radio :label="1">固定审批</el-radio>
+                                <el-radio :label="2">自由审批人</el-radio>
+                                <el-radio :label="3">可回退审批 </el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <p v-if="formData.check_type == 1">
+                    <el-row v-for="(item, index) in formData.flow_list">
+                        <el-col :span="8">
+                            <el-form-item label="审批流程类型">
+                                <el-select v-model="item.flow_type" clearable placeholder="请选择流程类型" class="flex-1">
+                                    <el-option label="当前部门负责人" :value="1" />
+                                    <el-option label="上一级部门负责人" :value="2" />
+                                    <el-option label="指定人员(多人或签)" :value="3" />
+                                    <el-option label="指定人员(多人会签)" :value="4" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" v-if="item.flow_type == '3' || item.flow_type == '4'">
+                            <el-form-item label="指定人员">
+                                <el-tag v-for="(tag, i) in item.flow_uids" @close="item.flow_user.splice(i, 1)"
+                                    :key="tag.id" class="mx-1" closable>
+                                    {{ tag.name }}
+                                </el-tag>
+                                <el-button type="primary" @click="openDialog(index)">
+                                    选择人员
+                                </el-button>
+                                <el-button @click="formData.flow_list.splice(index, 1)" class="ml-[5px]">
+                                    删除
+                                </el-button>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-col :span="24">
+                        <el-form-item>
+                            <el-button type="primary" @click="handAdd">其他联系人</el-button>
+                        </el-form-item>
+                    </el-col>
+                </p>
+                <el-row v-if="formData.check_type == 2">
+                    <el-col :span="12">
+                        <el-form-item label="">
+                            <span>无需审批</span>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <p v-if="formData.check_type == 3">
+                    <el-row v-for="(item, index) in formData.flow_list">
+                        <el-col :span="8">
+                            <el-form-item label="审批流程">
+                                <el-input v-model="item.flow_name" clearable placeholder="请输入流程名称">
+                                </el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="指定人员">
+                                <el-tag v-for="(tag, i) in item.flow_uids" @close="item.flow_user.splice(i, 1)"
+                                    :key="tag.id" class="mx-1" closable>
+                                    {{ tag.name }}
+                                </el-tag>
+                                <el-button type="primary" @click="openDialog(index)">
+                                    选择人员
+                                </el-button>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="4">
+                            <el-button @click="formData.flow_list.splice(index, 1)">
+                                删除
+                            </el-button>
+                        </el-col>
+                    </el-row>
+                    <el-col :span="24">
+                        <el-form-item>
+                            <el-button type="primary" @click="handAdd">其他联系人</el-button>
+                        </el-form-item>
+                    </el-col>
+                </p>
+
+                <el-form-item label="抄送人" prop="copy_unames">
+                    <el-tag v-for="(tag, index) in formData.copy_uids" @close="formData.copy_uids.splice(index, 1)"
+                        :key="tag.id" class="mx-1" closable>
+                        {{ tag.name }}
+                    </el-tag>
+                    <el-button type="primary" @click="openDialog(-1)">
+                        选择人员
+                    </el-button>
+                </el-form-item>
+            </el-form>
+        </popup>
+        <el-dialog v-if="showDialog" v-model="showDialog" title="选择应用审批类型" width="70%">
+            <dialogTable :config="oa_flow_type" @customEvent="customEvent" :query="{ type: formData.type }">
+            </dialogTable>
+        </el-dialog>
+        <personnelSelector v-if="showDiolg" ref="personnel" @confirm="submituser" />
+    </div>
+</template>
+
+<script lang="ts" setup name="flowEdit">
+import type { FormInstance } from "element-plus";
+import Popup from "@/components/popup/index.vue";
+import { apiFlowAdd, apiFlowEdit } from "@/api/flow";
+import { apiFlowTypeLists } from '@/api/flow_type'
+import personnelSelector from '@/components/personnelselector/index.vue'
+import { ref } from "vue"
+import type { PropType } from "vue";
+import { oa_flow_type } from "@/components/dialogTable/dialogTableConfig.ts"
+import { apiOaFlowAdd, apiOaFlowEdit, apiOaFlowDetail } from '@/api/oa_flow'
+
+
+defineProps({
+    dictData: {
+        type: Object as PropType<Record<string, any[]>>,
+        default: () => ({}),
+    },
+    deptList: Array
+
+});
+
+const personnel = ref('')
+const emit = defineEmits(["success", "close"]);
+const formRef = shallowRef<FormInstance>();
+const popupRef = shallowRef<InstanceType<typeof Popup>>();
+const mode = ref("add");
+const showDiolg = ref(false)
+const showDialog = ref(false)
+
+// 弹窗标题
+const popupTitle = computed(() => {
+    return mode.value == "edit" ? "编辑审批流程表" : "新增审批流程表";
+});
+
+// 表单数据
+const formData = reactive({
+    id: "",
+    name: "",
+    department_ids: "",
+    type: '',
+    check_type: 0,
+    flow_cate: "",
+    flow_cate_name: "",
+    remark: "",
+    flow_list: [
+        {
+            "flow_type": 0,
+            "flow_uids": "",
+            "flow_name": ""
+        },
+
+    ],
+    copy_uids: [],
+});
+
+const customEvent = (e) => {
+    console.log(e)
+    formData.flow_cate = e.id
+    formData.flow_cate_name = e.title
+    showDialog.value = false
+}
+
+const handAdd = () => {
+    formData.flow_list.push(
+        {
+            "flow_type": '',
+            "flow_uids": "",
+            "flow_name": ""
+        },
+    )
+}
+
+
+// 获取对应审批类型
+const flowTypeList = reactive([])
+
+const getFlowTypeList = async () => {
+    if (!formData.flow_type) return
+    let res = await apiFlowTypeLists({
+        type: formData.flow_type,
+        status: 2
+    })
+    Object.assign(flowTypeList, res.lists)
+}
+
+
+//单选框改变时清空单选下的表单数据
+const checkTypeFn = () => {
+    formData.flow_list = [
+        {
+            "flow_type": '',
+            "flow_uids": "",
+            "flow_name": ""
+        },
+    ]
+};
+
+// 表单验证
+const formRules = reactive<any>({});
+
+const setRules = () => {
+    let ruleList = ['name', 'check_type', 'type', 'flow_cate', 'remark', 'copy_uids']
+    ruleList.forEach(item => {
+        formRules[item] = {
+            required: true,
+            message: "请输入审批流程名称",
+            trigger: ["blur"]
+        }
+    })
+}
+setRules()
+
+// 获取详情
+const setFormData = async (data: Record<any, any>) => {
+    for (const key in formData) {
+        if (data[key] != null && data[key] != undefined) {
+            //@ts-ignore
+            formData[key] = data[key];
+        }
+    }
+    await getFlowTypeList()
+    formData.check_type = Number(formData.check_type)
+    formData.flow_type = Number(formData.flow_type)
+};
+
+
+// 提交按钮
+const handleSubmit = async () => {
+    await formRef.value?.validate();
+
+    let data = { ...formData }
+    data.department_ids = data.department_ids.join(",")
+    data.copy_uids = formData.copy_uids.map(item => item.id).join(',')
+    data.flow_list.forEach(item => {
+        if (Array.isArray(item.flow_uids)) {
+            item.flow_uids = item.flow_uids.map(item => item.id).join(',')
+        }
+    })
+    mode.value == "edit"
+        ? await apiOaFlowEdit(data)
+        : await apiOaFlowAdd(data);
+    popupRef.value?.close();
+    emit("success");
+};
+
+const submituser = (e) => {
+    if (selectIndex == -1) {
+        formData.copy_uids = e.map(item => ({ id: item.id, name: item.name }))
+    } else {
+        formData.flow_list[selectIndex].flow_uids = e.map(item => ({ id: item.id, name: item.name }))
+    }
+    showDiolg.value = false
+}
+
+const clearFlowUser = (index) => {
+    formData.flow_list[index].flow_user = []
+}
+
+//打开弹窗
+const open = (type = "add") => {
+    mode.value = type;
+    popupRef.value?.open();
+};
+
+// 关闭回调
+const handleClose = () => {
+    emit("close");
+};
+
+// selectIndex为-1时为抄送选择抄送人员,其余为指定人员所在的flow_list的下标
+let selectIndex: nmber;
+const openDialog = async (index) => {
+    showDiolg.value = true
+    await nextTick()
+    personnel.value?.open()
+    selectIndex = index
+}
+
+defineExpose({
+    open,
+    setFormData,
+});
 </script>
diff --git a/src/views/oa_flow/index.vue b/src/views/oa_flow/index.vue
index e26b2fc..a6322f0 100644
--- a/src/views/oa_flow/index.vue
+++ b/src/views/oa_flow/index.vue
@@ -41,7 +41,8 @@
                     <el-table-column label="流程数据序列化" prop="flow_list" show-overflow-tooltip />
                     <el-table-column label="操作" width="120" fixed="right">
                         <template #default="{ row }">
-                            <el-button v-perms="['works.bgsp.oa_flow/edit']" type="primary" link @click="handleEdit(row)">
+                            <el-button v-perms="['works.bgsp.oa_flow/edit']" type="primary" link
+                                @click="handleEdit(row)">
                                 编辑
                             </el-button>
                             <el-button v-perms="['works.bgsp.oa_flow/delete']" type="danger" link
@@ -56,7 +57,8 @@
                 <pagination v-model="pager" @change="getLists" />
             </div>
         </el-card>
-        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
+        <edit-popup v-if="showEdit" ref="editRef" :deptList="deptList" :dict-data="dictData" @success="getLists"
+            @close="showEdit = false" />
     </div>
 </template>
 
@@ -67,6 +69,7 @@ import { apiOaFlowLists, apiOaFlowDelete } from '@/api/oa_flow'
 import { timeFormat } from '@/utils/util'
 import feedback from '@/utils/feedback'
 import EditPopup from './edit.vue'
+import { deptLists } from "@/api/org/department";
 
 const editRef = shallowRef<InstanceType<typeof EditPopup>>()
 // 是否显示编辑框
@@ -89,7 +92,7 @@ const handleSelectionChange = (val: any[]) => {
 }
 
 // 获取字典数据
-const { dictData } = useDictData('')
+const { dictData } = useDictData('oa_approve_cate')
 
 // 分页相关
 const { pager, getLists, resetParams, resetPage } = usePaging({
@@ -119,6 +122,11 @@ const handleDelete = async (id: number | any[]) => {
     getLists()
 }
 
+const deptList = ref([])
+const getDeptList = async () => {
+    const res = await deptLists()
+    deptList.value = res.lists
+}
+getDeptList()
 getLists()
 </script>
-
diff --git a/src/views/oa_flow_type/index.vue b/src/views/oa_flow_type/index.vue
index f812710..b887b2d 100644
--- a/src/views/oa_flow_type/index.vue
+++ b/src/views/oa_flow_type/index.vue
@@ -3,7 +3,10 @@
         <el-card class="!border-none mb-4" shadow="never">
             <el-form class="mb-[-16px]" :model="queryParams" inline>
                 <el-form-item label="所属分类" prop="type">
-                    <el-input class="w-[280px]" v-model="queryParams.type" clearable placeholder="请输入所属分类" />
+                    <el-select v-model="queryParams.type" clearable placeholder="请选择所属分类" class="flex-1">
+                        <el-option v-for="item in dictData.oa_approve_cate" :key="item.value" :label="item.name"
+                            :value="parseInt(item.value)" />
+                    </el-select>
                 </el-form-item>
                 <el-form-item label="审批名称" prop="title">
                     <el-input class="w-[280px]" v-model="queryParams.title" clearable placeholder="请输入审批名称" />
@@ -34,7 +37,15 @@
                     <el-table-column label="所属分类" prop="type_text" show-overflow-tooltip />
                     <el-table-column label="审批名称" prop="title" show-overflow-tooltip />
                     <el-table-column label="审批标识" prop="name" show-overflow-tooltip />
-                    <el-table-column label="图标" prop="icon" show-overflow-tooltip />
+                    <el-table-column label="图标" prop="icon" show-overflow-tooltip>
+                        <template #default="{ row, $index }">
+                            <el-icon :size="20" :id="'test' + $index">
+                                <Edit />
+                                <!-- {{ 'test' + $index"}} -->
+                                <!-- {{ 'test' + $index }} -->
+                            </el-icon>
+                        </template>
+                    </el-table-column>
                     <el-table-column label="应用部门" prop="department_names" show-overflow-tooltip>
                         <template #default="{ row }">
                             {{ row.department_names }}
@@ -127,7 +138,25 @@ const getDeptList = async () => {
     const res = await deptLists()
     deptList.value = res.lists
 }
+
+const coverIcon = () => {
+
+
+    let dom = document.getElementById('test0')
+    dom.innerHTML = ' <Loading />'
+    console.log(dom)
+
+}
+
+
+onMounted(() => {
+    setTimeout(() => {
+        // coverIcon()
+    }, 2000)
+
+})
+
+
 getDeptList()
 getLists()
 </script>
-
diff --git a/src/views/oa_schedule/edit.vue b/src/views/oa_schedule/edit.vue
index d9c5289..6842fa9 100644
--- a/src/views/oa_schedule/edit.vue
+++ b/src/views/oa_schedule/edit.vue
@@ -138,9 +138,6 @@ const setFormData = async (data: Record<any, any>) => {
 
 
 
-
-
-
 const getDetail = async (row: Record<string, any>) => {
     const data = await apiOaScheduleDetail({
         id: row.id