From 3e78b8a8267841dcc9a990d8558735d1f8c3159e Mon Sep 17 00:00:00 2001
From: XaoLi717 <144221124+XaoLi717@users.noreply.github.com>
Date: Mon, 11 Nov 2024 10:14:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E8=AE=AE=E5=AE=A4=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/remaining.ts    |  24 ++++
 src/views/Home/hsgl/HsglCreate.vue | 200 +++++++++++++++++++++++++++++
 src/views/Home/hsgl/HsglDetail.vue | 157 ++++++++++++++++++++++
 src/views/Home/hsgl/HsglForm.vue   |  15 ++-
 src/views/Home/hsgl/index.vue      |  98 ++++++++------
 5 files changed, 447 insertions(+), 47 deletions(-)
 create mode 100644 src/views/Home/hsgl/HsglCreate.vue
 create mode 100644 src/views/Home/hsgl/HsglDetail.vue

diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 3614909..456759d 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -736,6 +736,30 @@ const remainingRouter: AppRouteRecordRaw[] = [
           activeMenu: '/Home/jbgl/Jbglflow'
         }
       },
+      {
+        path: 'hsgl/HsglCreate',
+        component: () => import('@/views/Home/hsgl/HsglCreate.vue'),
+        name: 'HsglCreate',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '发起会议室管理流程',
+          activeMenu: '/Home/hsgl/Hsglflow'
+        }
+      },
+      {
+        path: 'hsgl/HsglDetail',
+        component: () => import('@/views/Home/hsgl/HsglDetail.vue'),
+        name: 'HsglDetail',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '查看会议室管理流程',
+          activeMenu: '/Home/hsgl/Hsglflow'
+        }
+      },
     ]
   },
 ]
diff --git a/src/views/Home/hsgl/HsglCreate.vue b/src/views/Home/hsgl/HsglCreate.vue
new file mode 100644
index 0000000..f0caee7
--- /dev/null
+++ b/src/views/Home/hsgl/HsglCreate.vue
@@ -0,0 +1,200 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <span style="font-size: 16px">创建会议室管理流程</span>
+    </template>
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="标题" prop="title">
+        <el-input v-model="formData.title" placeholder="请输入标题" />
+      </el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="会议室类型" prop="roomType">
+            <el-select v-model="formData.roomType" placeholder="请选择会议室类型">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.HSGL_TYPE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="使用状态" prop="roomStatus">
+            <el-select v-model="formData.roomStatus" placeholder="请选择会议室类型">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.HSGL_STATUS)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="会议室名" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入会议室名" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="会议室地址" prop="location">
+            <el-input v-model="formData.location" placeholder="请输入会议室地址" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="会议室大小" prop="roomMax">
+            <el-input v-model="formData.roomMax" placeholder="请输入会议室大小" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="容纳人数" prop="capacity">
+            <el-input v-model.number="formData.capacity" placeholder="请输入容纳人数" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="管理员" prop="manager">
+            <el-input v-model="formData.manager" placeholder="请输入会议室管理员" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="会议室设备" prop="facilities">
+            <el-input v-model="formData.facilities" placeholder="请输入会议室设备" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="会议室照片" prop="photo">
+        <UploadImg v-model="formData.photo" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+<template #footer>
+  <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+</template>
+  </el-card>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { HsglApi, HsglVO } from '@/api/home/hsgl'
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as UserApi from '@/api/system/user'
+import {useTagsViewStore} from "@/store/modules/tagsView";
+
+/** 会议室管理 表单 */
+defineOptions({ name: 'HsglCreate' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+// const dialogVisible = ref(false) // 弹窗的是否展示
+// const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+// const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  title: undefined,
+  name: undefined,
+  location: undefined,
+  roomType: undefined,
+  manager: undefined,
+  roomMax: undefined,
+  capacity: undefined,
+  facilities: undefined,
+  roomStatus: undefined,
+  photo: undefined,
+  remark: undefined,
+  status: undefined,
+  userId: undefined,
+  processInstanceId: undefined,
+})
+
+// 指定审批人
+const { delView } = useTagsViewStore()//视图操作
+const { push, currentRoute } = useRouter()
+const processDefineKey = 'hsgl-001' // 流程定义 Key
+const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表
+const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
+const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
+const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
+const userList = ref<any[]>([]) // 用户列表
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 校验指定审批人++
+  if(startUserSelectTasks.value?.length > 0){
+    await startUserSelectAssigneesFormRef.value.validate()
+  }
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as HsglVO
+
+    if(startUserSelectTasks.value?.length > 0){
+      data.startUserSelectAssignees = startUserSelectAssignees.value
+    }
+
+    await HsglApi.createHsgl(data)
+    message.success(t('common.createSuccess'))
+    delView(unref(currentRoute))
+    await push({name: 'Hsgl'})
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 初始化 */
+onMounted(async () => {
+  const processDefinitionDetail = await DefinitionApi.getProcessDefinition(
+    undefined,
+    processDefineKey
+  )
+  if (!processDefinitionDetail) {
+    message.error('车辆管理流程模型未配置，请检查！')
+    return
+  }
+  startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
+  // 设置指定审批人
+  if (startUserSelectTasks.value?.length > 0) {
+    // 设置校验规则
+    for (const userTask of startUserSelectTasks.value) {
+      startUserSelectAssignees.value[userTask.id] = []
+      startUserSelectAssigneesFormRules.value[userTask.id] = [
+        { required: true, message: '请选择审批人', trigger: 'blur' }
+      ]
+    }
+
+    // 加载用户列表
+    userList.value = await UserApi.getSimpleUserList()
+  }
+})
+
+const formRules = reactive({
+  title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '会议室名不能为空', trigger: 'blur' }],
+  location: [{ required: true, message: '会议室地址不能为空', trigger: 'blur' }],
+  roomType: [{ required: true, message: '会议室类型不能为空', trigger: 'change' }],
+  manager: [{ required: true, message: '会议室管理员不能为空', trigger: 'blur' }],
+  capacity: [{ type: 'number', message: '容纳人数是数字', trigger: 'blur' }],
+  roomStatus: [{ required: true, message: '使用状态不能为空', trigger: 'blur' }],
+})
+
+const formRef = ref() // 表单 Ref
+
+</script>
diff --git a/src/views/Home/hsgl/HsglDetail.vue b/src/views/Home/hsgl/HsglDetail.vue
new file mode 100644
index 0000000..b6ed3e7
--- /dev/null
+++ b/src/views/Home/hsgl/HsglDetail.vue
@@ -0,0 +1,157 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <span style="font-size: 16px">会议室管理流程</span>
+    </template>
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="标题" prop="title">
+        <el-input v-model="formData.title" placeholder="请输入标题" disabled  />
+      </el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="会议室类型" prop="roomType">
+            <el-select v-model="formData.roomType" placeholder="请选择会议室类型" disabled>
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.HSGL_TYPE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+                disabled
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="使用状态" prop="roomStatus">
+            <el-select v-model="formData.roomStatus" placeholder="请选择会议室类型" disabled>
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.HSGL_STATUS)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+                disabled
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="会议室名" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入会议室名" disabled  />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="会议室地址" prop="location">
+            <el-input v-model="formData.location" placeholder="请输入会议室地址" disabled  />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="会议室大小" prop="roomMax">
+            <el-input v-model="formData.roomMax" placeholder="请输入会议室大小" disabled  />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="容纳人数" prop="capacity">
+            <el-input v-model="formData.capacity" placeholder="请输入容纳人数" disabled  />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="管理员" prop="manager">
+            <el-input v-model="formData.manager" placeholder="请输入会议室管理员" disabled  />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="会议室设备" prop="facilities">
+            <el-input v-model="formData.facilities" placeholder="请输入会议室设备" disabled  />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="会议室照片" prop="photo">
+        <UploadImg v-model="formData.photo" disabled  />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" disabled  />
+      </el-form-item>
+    </el-form>
+<template #footer>
+</template>
+  </el-card>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { HsglApi } from '@/api/home/hsgl'
+import {propTypes} from "@/utils/propTypes";
+
+/** 会议室管理 表单 */
+defineOptions({ name: 'HsglDetail' })
+
+// const { t } = useI18n() // 国际化
+// const message = useMessage() // 消息弹窗
+//
+// const dialogVisible = ref(false) // 弹窗的是否展示
+// const dialogTitle = ref('') // 弹窗的标题
+// const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: undefined,
+  title: undefined,
+  name: undefined,
+  location: undefined,
+  roomType: undefined,
+  manager: undefined,
+  roomMax: undefined,
+  capacity: undefined,
+  facilities: undefined,
+  roomStatus: undefined,
+  photo: undefined,
+  remark: undefined,
+  status: undefined,
+  userId: undefined,
+  processInstanceId: undefined,
+})
+
+//流程
+const { query } = useRoute() // 查询参数
+const props = defineProps({
+  id: propTypes.number.def(undefined)
+})
+const detailLoading = ref(false) // 表单的加载中
+const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号
+/** 获得数据 */
+const getInfo = async () => {
+  detailLoading.value = true
+  try {
+    formData.value = await HsglApi.getHsgl(props.id || queryId)
+    //这里可能会收到两种方式传过来的数据
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+const formRules = reactive({
+  title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '会议室名不能为空', trigger: 'blur' }],
+  location: [{ required: true, message: '会议室地址不能为空', trigger: 'blur' }],
+  roomType: [{ required: true, message: '会议室类型不能为空', trigger: 'change' }],
+  manager: [{ required: true, message: '会议室管理员不能为空', trigger: 'blur' }],
+  roomStatus: [{ required: true, message: '使用状态不能为空', trigger: 'blur' }],
+})
+const formRef = ref() // 表单 Ref
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+onMounted(async ()=>{
+  await getInfo()
+})
+</script>
diff --git a/src/views/Home/hsgl/HsglForm.vue b/src/views/Home/hsgl/HsglForm.vue
index 477a234..1fbec23 100644
--- a/src/views/Home/hsgl/HsglForm.vue
+++ b/src/views/Home/hsgl/HsglForm.vue
@@ -1,6 +1,8 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible"
-          style="width: 80%;">
+  <el-card>
+    <template #header>
+      <span style="font-size: 16px">创建会议室管理流程</span>
+    </template>
     <el-form
       ref="formRef"
       :model="formData"
@@ -83,11 +85,10 @@
         <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
       </el-form-item>
     </el-form>
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
+<template #footer>
+  <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+</template>
+  </el-card>
 </template>
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
diff --git a/src/views/Home/hsgl/index.vue b/src/views/Home/hsgl/index.vue
index 0964377..8a0568f 100644
--- a/src/views/Home/hsgl/index.vue
+++ b/src/views/Home/hsgl/index.vue
@@ -151,15 +151,15 @@
 <!--      </el-form-item>-->
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['home:hsgl:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button><el-button
+        type="success"
+        plain
+        @click="handleCreate()"
+        :loading="exportLoading"
+        v-hasPermi="['home:clgl:export']"
+      >
+        <Icon icon="ep:download" class="mr-5px" /> 发起流程
+      </el-button>
         <el-button
           type="success"
           plain
@@ -203,7 +203,11 @@
 <!--        :preview-src-list="[scope.row.photo]"-->
       </el-table-column>
 <!--      <el-table-column label="备注" align="center" prop="remark" />-->
-<!--      <el-table-column label="审批状态" align="center" prop="status" />-->
+      <el-table-column label="审批状态" align="center" prop="status" >
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
 <!--      <el-table-column label="申请人id" align="center" prop="userId" />-->
 <!--      <el-table-column label="流程实例的编号" align="center" prop="processInstanceId" />-->
 <!--      <el-table-column-->
@@ -216,20 +220,20 @@
       <el-table-column label="操作" align="center">
         <template #default="scope">
           <el-button
+            v-hasPermi="['home:clgl:update']"
             link
             type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['home:hsgl:update']"
+            @click="handleDetail(scope.row)"
           >
-            编辑
+            详情
           </el-button>
           <el-button
+            v-hasPermi="['home:clgl:update']"
             link
             type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['home:hsgl:delete']"
+            @click="handleProcessDetail(scope.row)"
           >
-            删除
+            进度
           </el-button>
         </template>
       </el-table-column>
@@ -242,9 +246,6 @@
       @pagination="getList"
     />
   </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <HsglForm ref="formRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
@@ -253,6 +254,8 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { HsglApi, HsglVO } from '@/api/home/hsgl'
 import HsglForm from './HsglForm.vue'
+import * as LeaveApi from '@/api/bpm/leave'
+import router from "@/router";
 
 /** 会议室管理 列表 */
 defineOptions({ name: 'Hsgl' })
@@ -286,6 +289,40 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 
+/**发起操作 Hsgl */
+const handleCreate = () => {
+  router.push({ name: 'HsglCreate' })
+}
+
+
+/** 详情操作 */
+const handleDetail = (row: LeaveApi.LeaveVO) => {
+  router.push({
+    name: 'HsglDetail',
+    query: {
+      id: row.id
+    }
+  })
+}
+
+/** 审批进度 */
+const handleProcessDetail = (row) => {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstanceId
+    }
+  })
+}
+
+// fix: 列表不刷新的问题。
+watch(
+  () => router.currentRoute.value,
+  () => {
+    getList()
+  }
+)
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -310,25 +347,6 @@ const resetQuery = () => {
   handleQuery()
 }
 
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (id: number) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await HsglApi.deleteHsgl(id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {
@@ -345,7 +363,7 @@ const handleExport = async () => {
 }
 
 /** 初始化 **/
-onMounted(() => {
-  getList()
+onMounted(async () => {
+  await getList()
 })
 </script>