From 65ce2e4b82f2400493fc55b1a8685bbbc1ba30dd Mon Sep 17 00:00:00 2001 From: cuijian <cuijian@xalxzn.com> Date: 星期二, 24 六月 2025 09:04:44 +0800 Subject: [PATCH] 流程页面样式 --- src/views/flowable/workflow/assignFileStream/AssignFileStreamXq.vue | 389 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 389 insertions(+), 0 deletions(-) diff --git a/src/views/flowable/workflow/assignFileStream/AssignFileStreamXq.vue b/src/views/flowable/workflow/assignFileStream/AssignFileStreamXq.vue new file mode 100644 index 0000000..e74754c --- /dev/null +++ b/src/views/flowable/workflow/assignFileStream/AssignFileStreamXq.vue @@ -0,0 +1,389 @@ +<!-- + Description: 宸ヤ綔娴�-鎸囨淳璁惧璇︽儏椤甸潰 List + Author: 浣滆�� liuyh + Date: 2025-02-27 +--> +<template> + <a-modal + :title="title" + :width="width" + :visible="visible" + :footer="null" + @cancel="handCancel" + > + <a-card :bordered="false"> + <div> + <b>{{ selectShenpiData.description }}</b> + <br> + <br> + <a-tag color="blue"> + 澶勭悊浜� {{ selectShenpiData.assignee }} + </a-tag> + <a-tag color="blue"> + 鍒涘缓鏃堕棿 {{ selectShenpiData.createTime }} + </a-tag> + <br> + <br> + <button @click="fetchAndShowBmp" class="btn-custom">鎵撳紑娴佺▼鍥�</button> + <div v-if="imageSrc"> + <img :src="imageSrc" alt="Fetched Image" /> + </div> + <hr class="shallow-hr"> + </div> + <div> + <b>鎸囨淳璇︽儏</b> + <br> + <a-form :form='form'> + <a-spin :spinning="spinning"> + <a-tabs default-active-key='1' @change='callback'> + <a-tab-pane key='1' tab='鍩烘湰淇℃伅'> + <a-form-model ref='form' :model='tableRowRecord' :rules='validatorRules'> + <a-row> + <a-col :span='span'> + <a-form-model-item label='浜у搧鍚嶇О' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='productName'> + <a-input :disabled='coldisabled' v-model='tableRowRecord.productName'></a-input> + </a-form-model-item> + </a-col> + <a-col :span='span'> + <a-form-model-item label='閮ㄤ欢鍚嶇О' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='componentId'> + <a-input :disabled='coldisabled' v-model='tableRowRecord.componentName'></a-input> + </a-form-model-item> + </a-col> + </a-row> + <a-row> + <a-col :span='span'> + <a-form-model-item label='闆朵欢鍚嶇О' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='partsName'> + <a-input :disabled='coldisabled' v-model='tableRowRecord.partsName'></a-input> + </a-form-model-item> + </a-col> + <a-col :span='span'> + <a-form-model-item label='宸ュ簭鍚嶇О' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='processName'> + <a-input :disabled='coldisabled' v-model='tableRowRecord.processName'></a-input> + </a-form-model-item> + </a-col> + </a-row> + <a-row> + <a-col :span='span'> + <a-form-model-item label='宸ユ鍚嶇О' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='stepName'> + <a-input :disabled='coldisabled' v-model='tableRowRecord.stepName'></a-input> + </a-form-model-item> + </a-col> + <a-col :span='span'> + <a-form-model-item label='璁惧鍚嶇О' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='deviceName'> + <a-input :disabled='coldisabled' v-model='tableRowRecord.deviceName'></a-input> + </a-form-model-item> + </a-col> + </a-row> + <a-row> + <a-col :span='span'> + <a-form-model-item label='鏁版帶绯荤粺绫诲埆' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='deviceManagementCode'> + <a-input :disabled='coldisabled' v-model='tableRowRecord.deviceManagementCode'></a-input> + </a-form-model-item> + </a-col> + <a-col :span='span'> + <a-form-model-item label='鏁版帶绯荤粺绫诲埆' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='deviceManagementName'> + <a-input :disabled='coldisabled' v-model='tableRowRecord.deviceManagementName'></a-input> + </a-form-model-item> + </a-col> + </a-row> + <a-row> + <a-col :span='span'> + <a-form-model-item label='鏂囨。鍚嶇О' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='docName'> + <a-input :disabled='coldisabled' v-model='tableRowRecord.docName'></a-input> + </a-form-model-item> + </a-col> + <a-col :span='span'> + <a-form-model-item label='鏂囨。鐗堟湰' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='version'> + <a-input :disabled='coldisabled' v-model='tableRowRecord.version'></a-input> + </a-form-model-item> + </a-col> + </a-row> + </a-form-model> + </a-tab-pane> + <a-tab-pane key='2' tab='娴佺▼鑺傜偣'> + <a-card> + <a-timeline style="padding:0 1% 0 12%" > + <a-timeline-item color='white' v-for="(item,index1) in hitaskDataSource" :key="index1"> + <div class="bottom"> + <p>澶勭悊浜猴細{{item.assignee_dictText}}</p> + <p v-if="index1 !==0">澶勭悊鏃堕暱锛歿{item.duration}}</p> + <p v-if="item.name !== '鎻愪氦鐢宠'">澶勭悊绫诲瀷锛歿{item.sequenceFlowName}}</p> + <p v-if="item.description != null">澶勭悊鎰忚锛歿{item.description}}</p> + <div class="left_qiu"><span>{{item.taskName}}</span></div> + </div> + </a-timeline-item> + </a-timeline> + </a-card> + </a-tab-pane> + </a-tabs> + </a-spin> + </a-form> + </div> + </a-card> + + + </a-modal> +</template> + +<script> + +import '@assets/less/TableExpand.less' +import { mixinDevice } from '@/utils/mixin' +import { getAction, deleteAction, postAction, downFile, httpAction } from '@api/manage' +export default { + name: 'FlowShenPi', + mixins: [mixinDevice], + props: { + selectShenpiData: { + type: Object, + required: true + } + }, + + data() { + return { + form: this.$form.createForm(this), + span: 12, + span1: 8, + coldisabled: true, + spinning: false, + tableRowRecord: {}, + assignFileStream:{}, + tableDataSource: [], + usageDataSource: [], + hitaskDataSource:[], + bomForm: {}, + approveContent:"", + imageSrc: null, + drawerVisible: true, + labelCol: { + xs: { span: 24 }, + sm: { span: 5 } + }, + wrapperCol: { + xs: { span: 30 }, + sm: { span: 16 } + }, + validatorRules: { + version: { + rules: [ + { required: true, message: '璇疯緭鍏ユ枃妗g増鏈�!'}, + ] + }, + applyUser: { + rules: [ + { required: true, message: '璇烽�夋嫨鐢宠浜�!'}, + ] + }, + approveContent: { + rules: [ + { required: true, message: '璇疯緭鍏ュ鎵规剰瑙�!'}, + ] + }, + docName: { + rules: [ + { required: true, message: '璇疯緭鍏ユ枃妗e悕绉�!'}, + ] + }, + status: { + rules: [ + { required: true, message: '璇烽�夋嫨瀹℃壒鐘舵��!'}, + ] + }, + }, + approveData: {}, + flowData: {}, + title: '璇︽儏椤甸潰', + width: 1000, + visible: false, + // 琛ㄥご + url: { + queryBomDataById: '/nc/activit/selectVoById', + diagramView: '/assign/flow/diagramView', + queryHisTaskList:'/dncFlow/dispatchFile/queryHisTaskList', + approve:"/activit/assign/file/approve", + }, + dictOptions: {}, + superFieldList: [], + workflowSource: [] + } + }, + created() { + }, + computed: {}, + methods: { + callback() { + }, + handCancel() { + this.visible = false + }, + clearTableSource() { + this.tableDataSource = [] + this.usageDataSource = [] + }, + fetchAndShowBmp() { + console.log('flowData----->', this.flowData) + try { + let parm = { + processDefinitionId: this.flowData.processDefinitionId, + processInstanceId:this.flowData.processInstanceId, + TaskDefinitionKey:this.flowData.processDefinitionKey + } + downFile(this.url.diagramView,parm,'get').then((res=>{ + console.log('Pica------>',res) + const urlObject = window.URL.createObjectURL(new Blob([res])) + this.imageSrc = urlObject + })) + } catch (error) { + console.error('Error fetching image blob:', error) + alert('鏃犳硶鍔犺浇鍥剧墖锛岃绋嶅悗鍐嶈瘯銆�') + } + }, + handleQueXiaoTask(){ + this.visible = false + this.routeReload() + }, + submitForm () { + const that = this; + if (!that.assignFileStream.status==null || that.assignFileStream.status===undefined){ + this.$message.warning('璇烽�夋嫨瀹℃壒鐘舵�侊紒') + return false; + } + if (!that.assignFileStream.approveContent==null || that.assignFileStream.approveContent===undefined) { + this.$message.warning('璇疯緭鍏ュ鎵规剰瑙侊紒') + return false; + } + // 瑙﹀彂琛ㄥ崟楠岃瘉 + this.form.validateFields((err, values) => { + if (!err) { + that.confirmLoading = true; + let url=this.url.approve + let method = 'post'; + let flowTaskVo = {} + flowTaskVo.status=that.assignFileStream.status; + flowTaskVo.approveContent =that.assignFileStream.approveContent; + flowTaskVo.comment =that.assignFileStream.approveContent; + flowTaskVo.secretLevel = that.assignFileStream.secretLevel; + flowTaskVo.dataId = this.selectShenpiData.dataId + flowTaskVo.taskId = this.selectShenpiData.id + flowTaskVo.userId = this.selectShenpiData.assignee + flowTaskVo.instanceId = this.selectShenpiData.procInstId + flowTaskVo.targetKey = this.selectShenpiData.taskDefKey + flowTaskVo.values = this.selectShenpiData.variables + flowTaskVo.assignee = this.selectShenpiData.assignee + flowTaskVo.secretLevel = that.assignFileStream.secretLevel; + console.log("琛ㄥ崟鎻愪氦鏁版嵁",flowTaskVo) + httpAction(url,flowTaskVo,method).then((res)=>{ + if(res.success){ + that.$message.success(res.message); + that.$emit('ok'); + }else{ + that.$message.warning(res.message); + } + }).finally(() => { + that.confirmLoading = false; + }) + } + + }) + }, + getAllApproveData(item) { + console.log('selectShenpiData----->', this.selectShenpiData) + console.log('item----->', item) + this.flowData = item + let param = { + 'id': item.dataId + } + let parmhis={ + 'procInstId': item.procInstId + } + getAction(this.url.queryHisTaskList,parmhis).then(res=>{ + this.hitaskDataSource=res.result + getAction(this.url.queryBomDataById, param).then((res => { + if (res.success) { + this.tableRowRecord = res.result + console.log('this.tableRowRecord----->', this.tableRowRecord) + } + })) + }).finally( + this.visible = true, + console.log('this.approveData---->', this.approveData) + ) + } + } +} +</script> +<style scoped> +.shallow-hr { + border: 0; + height: 1px; /* 鍒嗙晫绾跨殑楂樺害 */ + background-color: rgba(0, 0, 0, 0.1); /* 浣跨敤 RGBA 棰滆壊锛屽苟璁剧疆杈冧綆鐨勯�忔槑搴� */ + margin: 20px 0; /* 鍒嗙晫绾夸笂涓嬬殑澶栬竟璺� */ +} +.btn-custom { + background-color: #4CAF50; /* 缁胯壊鑳屾櫙 */ + color: white; /* 鐧借壊鏂囧瓧 */ + border: none; /* 鏃犺竟妗� */ + padding: 5px 15px; /* 鍐呰竟璺� */ + text-align: center; /* 鏂囧瓧灞呬腑 */ + text-decoration: none; /* 鏃犱笅鍒掔嚎 */ + display: inline-block; /* 琛屽唴鍧楀厓绱� */ + font-size: 12px; /* 瀛椾綋澶у皬 */ + margin: 4px 2px; /* 澶栬竟璺� */ + cursor: pointer; /* 榧犳爣鎮仠鏃舵樉绀烘墜鍨� */ + border-radius: 4px; /* 鍦嗚杈规 */ +} + +.bold-large-label { + font-weight: bold; + font-size: 20px; /* 鎴栦綘闇�瑕佺殑浠讳綍澶у皬 */ +} +.left_qiu{ + position: absolute; + left: -74px; + top: 0; + width:54px; + border-radius: 50%; + height:54px; + font-size: 13px; + margin: auto; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + background: #0099ff; + transform: translate(0, 0); +} +/deep/ .ant-timeline-item-tail{ + left: -29px !important; +} +.left_qiu span{ + width: 3em; + display: block; + color: #fff; + text-align: center; +} +.img{ + width: 75%; +} + +.wrap{ + clear: both; + width: 100%; + display: flex; + height: 50px; + border: 1px solid #ccc; + /* background-color: aqua; */ +} +.box{ + width:21%; + height:50px; + border-right: 1px solid #ccc; + line-height: 50px; + /* background: red; */ + text-align:center; + margin: auto; +} + +@import '~@assets/less/common.less'; +</style> \ No newline at end of file -- Gitblit v1.9.3