流程设置查看功能增加

src/views/tasks/components/hc-tasks-user/index.vue

@@ -8,7 +8,7 @@
             <div v-if="fixedData.length <= 0" class="tasks-placeholder">点击这里选择任务</div>
         </div>
         <!-- 选择任务人 -->
-        <HcUserModal v-model="isUserModalShow" :data="fixedData" :datas="dataInfo" @finish="fixedUserFinish" />
+        <HcUserModal v-model="isUserModalShow" :data="fixedData" :datas="dataInfo" :is-view="isView" @finish="fixedUserFinish" @close="closeUserModal" />
     </div>
 </template>
 
@@ -31,17 +31,24 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    isView:{
+        type: Boolean,
+        default: false,
+    },
 })
 
 //事件
-const emit = defineEmits(['change'])
+const emit = defineEmits(['change,close'])
 
 //监听基础数据
 const dataInfo = ref(props.datas)
 watch(() => props.datas, (data) => {
     dataInfo.value = getObjValue(data)
 }, { deep: true, immediate: true })
-
+const isView = ref(props.isView)
+watch(() => props.isView, (data) => {
+    isView.value = data
+}, { deep: true, immediate: true })
 //监听用户数据
 const fixedData = ref(props.data)
 watch(() => props.data, (data) => {
@@ -70,6 +77,12 @@ const fixedUserFinish = (data) => {
     }
     emit('change', arr)
 }
+const closeUserModal = ()=>{
+    emit('close')
+}
+defineExpose({
+    userShowModal,
+})
 </script>
 
 <style lang="scss">

src/views/tasks/components/hc-tasks-user/modules/user-modal.vue

@@ -1,9 +1,9 @@
 <template>
-    <hc-dialog v-model="isShow" ui="hc-tasks-user-modal" widths="1195px" title="选择任务人" @close="modalClose">
+    <hc-dialog v-model="isShow" ui="hc-tasks-user-modal" widths="1195px" title="选择任务人" :footer="!isView" @close="modalClose">
         <div class="card-div-1 h-full w-235px">
             <hc-body scrollbar padding="0">
                 <div class="hc-process-item">
-                    <div class="process setup" @click="processSetupClick">
+                    <div class="process setup" :class="{ disabled: isView }" @click="processSetupClick">
                         <div class="icon hc-flex-center">
                             <i class="i-hugeicons-flowchart-01" />
                         </div>
@@ -22,16 +22,16 @@
                             </div>
                             <div class="input-box">
                                 <div class="width-name">{{ item.name }}</div>
-                                <input v-model="item.name" class="input">
+                                <input v-model="item.name" class="input" :disabled="isView">
                             </div>
-                            <div class="del-icon hc-flex-center" @click="fixedDelClick(item, index)">
+                            <div v-if="!isView" class="del-icon hc-flex-center" @click="fixedDelClick(item, index)">
                                 <i class="i-ri-delete-bin-2-line" />
                             </div>
                         </div>
                     </div>
                 </template>
                 <div class="hc-process-item">
-                    <div class="process add" @click="fixedAddClick">
+                    <div v-if="!isView" class="process add" @click="fixedAddClick">
                         <div class="icon hc-flex-center">
                             <i class="i-iconoir-plus" />
                         </div>
@@ -103,7 +103,7 @@
                             <span>已选择{{ fixedItem?.userList?.length || 0 }}人</span>
                         </template>
                         <template #extra>
-                            <el-button type="warning" size="small" @click="fixedUserSortClick">调整排序</el-button>
+                            <el-button v-if="!isView" type="warning" size="small" @click="fixedUserSortClick">调整排序</el-button>
                         </template>
                         <div class="hc-tasks-user-cur-box" :class="`type-${fixedItem.type}`">
                             <template v-for="(item, index) in fixedItem?.userList" :key="index">
@@ -116,7 +116,7 @@
                             </template>
                         </div>
                         <template #action>
-                            <el-button block size="default" type="success" @click="singleSaveClick">保存</el-button>
+                            <el-button v-if="!isView" block size="default" type="success" @click="singleSaveClick">保存</el-button>
                         </template>
                     </hc-card>
                     <div v-else class="card-empty-no">
@@ -155,6 +155,10 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    isView:{
+        type: Boolean,
+        default: false,
+    },
 })
 
 const emit = defineEmits(['finish', 'close'])
@@ -169,7 +173,10 @@ const dataInfo = ref(props.datas)
 watch(() => props.datas, (data) => {
     dataInfo.value = getObjValue(data)
 }, { deep: true, immediate: true })
-
+const isView = ref(props.isView)
+watch(() => props.isView, (data) => {
+    isView.value = data
+}, { deep: true, immediate: true })
 //监听数据
 const fixedData = ref([])
 watch(() => props.data, (data) => {
@@ -219,6 +226,8 @@ const getProcessIcon = (item) => {
 
 //流程类型切换
 const fixedTypeClick = (item) => {
+    if (isView.value) return
+
     item.type = item.type === 1 ? 2 : 1
 }
 
@@ -497,4 +506,16 @@ const modalClose = () => {
     flex: 1;
     min-width: 205px;
 }
+/* 添加禁用状态样式 */
+.disabled {
+    cursor: not-allowed !important;  /* 鼠标变为禁止样式 */
+    opacity: 0.6;  /* 降低透明度表示禁用 */
+    pointer-events: none;  /* 阻止鼠标事件穿透 */
+}
+
+/* 针对删除图标和添加按钮的额外样式调整 */
+.del-icon.disabled,
+.process.add.disabled {
+    filter: grayscale(100%);  /* 转为灰度进一步表示禁用 */
+}
 </style>

src/views/tasks/flow.vue

@@ -13,8 +13,10 @@
             <template #extra>
                 <el-alert :closable="false" title="同一合同段内，只需要设置重复岗位的流程即可，其他任务岗位，系统将自动推送，无需创建更多任务流" type="error" />
             </template>
-            <hc-table ref="tableListRef" :column="tableListColumn" :datas="tableListData" :loading="tableLoading" is-new :index-style="{ width: 60 }">
+            <hc-table ref="tableListRef" :column="tableListColumn" :datas="tableListData" :loading="tableLoading" is-new>
                 <template #action="{ row }">
+                    <el-button plain size="small" type="primary" :disabled="!row.deletedIs" @click="handleTableView(row)">查看</el-button>
+                 
                     <hc-tooltip keys="tasks_flow_edit">
                         <el-button plain size="small" type="primary" :disabled="!row.deletedIs" @click="handleTableEdit(row)">编辑</el-button>
                     </hc-tooltip>
@@ -84,6 +86,18 @@
                 </el-button>
             </template>
         </hc-new-dialog>
+        <!-- 查看流程弹窗 -->
+         
+        <hc-new-dialog v-model="viewModal" :title="`${flowFormData.id ? '编辑' : '新增'}流程`" widths="40rem">
+            <el-form
+                ref="formFlowRef" class="p-4" :model="flowFormData" :rules="formFlowRules" label-width="auto"
+                size="large"
+            >
+                <el-form-item label="选择任务人" prop="fixedBranchList">
+                    <HcTasksUser ref="viewPeopleRef" :data="flowFormData.fixedBranchList" :datas="fixedData" ui="w-full" :is-view="true" @change="flowFormChange" @close="flowClose" />
+                </el-form-item>
+            </el-form>
+        </hc-new-dialog>
     </div>
 </template>
 
@@ -126,7 +140,7 @@ const tableListRef = ref(null)
 const tableListColumn = ref([
     { key: 'fixedFlowName', name: '流程名称' },
     { key: 'linkUserJoinString', name: '流程详情' },
-    { key: 'action', name: '操作', width: '200', align: 'center' },
+    { key: 'action', name: '操作', width: '250', align: 'center' },
 ])
 
 const getTableData = async () => {
@@ -193,6 +207,24 @@ const handleTableEdit = async (row) => {
     }
     showEditModal.value = true
     getFlowDetail().then()
+}
+const handleTableView = async (row) => {
+    
+     changeId.value = row.id
+    fixedData.value = {
+        id: row.id,
+        projectId: projectId.value,
+        contractId: contractId.value,
+    }
+
+    getFlowDetail().then()
+    viewModal.value = true
+    await nextTick()
+    viewPeopleRef.value.userShowModal()
+   
+    
+
+
 }
 
 const getFlowDetail = async () => {
@@ -213,6 +245,8 @@ const getFlowDetail = async () => {
 
 //新增编辑数据
 const showEditModal = ref(false)
+const viewModal = ref(false)
+const viewPeopleRef = ref(null)
 const formFlowRef = ref(null)
 const flowFormData = ref({ id: '', fixedName: '', fixedBranchList: [] })
 const formFlowRules = {
@@ -232,6 +266,11 @@ const formFlowRules = {
 const flowFormChange = (data) => {
     flowFormData.value.fixedBranchList = getArrValue(data)
 }
+const flowClose = ()=>{
+    if (viewModal.value) {
+       viewModal.value = false
+    }
+}
 
 //提交保存
 const sevaLoading = ref(false)