Merge branch 'master' of https://gitee.com/xiaopubao/aizuda-web-vue3

src/components/FormCreateDesigner/FcDesigner.vue

@@ -23,7 +23,7 @@
 					<el-header class="_fc-m-tools" height="45">
 						<slot name="handle"></slot>
 						<el-button size="small" @click="setJson">导入JSON</el-button>
-						<el-button size="small" type="primary" @click="showJson" v-if="false">生成JSON</el-button>
+						<el-button size="small" type="primary" @click="showJson">生成JSON</el-button>
 						<el-button size="small" type="primary" @click="saveAsForm">暂存表单</el-button>
 						<el-button type="primary" plain round size="small" @click="previewFc"
 						><i class="fc-icon icon-preview"></i> {{ t('designer.preview') }}
@@ -1001,8 +1001,8 @@ export default defineComponent({
 			onOk() {
 				if (data.err) return
 				const json = data.editor.getValue()
-				let val = JSON.parse(json)
-				if (data.type === 3) {
+        let val = JSON.parse(json)
+        if (data.type === 3) {
 					if (!Array.isArray(val)) {
 						data.err = true
 						return
@@ -1022,7 +1022,16 @@ export default defineComponent({
 				data.value = methods.getRule()
 				let val = JSON.parse(JSON.stringify(data.value))
 				vm.emit('export-json', val)
-			}
+			},
+      // 初始化
+      initForm(json) {
+        // todo 这里需要针对json为空做处理
+        try {
+          methods.setRule(formCreate.parseJson(json))
+        } catch (e) {
+          console.log(e);
+        }
+      }
 		}
 		data.dragForm.rule = methods.makeDragRule(methods.makeChildren(data.children))
 

src/store/modules/flow.ts

@@ -68,6 +68,10 @@ export const useFlowStore = defineStore({
 		// 表单信息
 		setProcessForm(value: any) {
 			this.processForm = value
+		},
+		// 流程设计
+		setModelContent(value: any) {
+			this.modelContent = value
 		}
 	},
 	persist: true

src/views/approve/pendingClaim/detail.vue

@@ -39,37 +39,77 @@
 
 				<!--审批流-->
 				<el-timeline>
-					<el-timeline-item timestamp="2018/4/12" placement="top">
-						<el-card>
-							<h4>Update Github template</h4>
-							<p>Tom committed 2018/4/12 20:46</p>
-						</el-card>
+					<el-timeline-item timestamp="提交" placement="top" type="success" :icon="Check">
+						<!-- 审批完成 -->
+						<div class="timeline-box flex-1">
+							<div class="flex flex-align-center">
+								<div class="timeline-box-user flex-1">
+									<span class="name">爱丽丝</span>
+									<div v-if="false" class="comment">
+										<div class="comment-content">同意</div>
+									</div>
+								</div>
+								<span class="timeline-box-date">2018/4/12 20:46</span>
+							</div>
+						</div>
 					</el-timeline-item>
-					<el-timeline-item timestamp="2018/4/3" placement="top">
-						<el-card>
-							<h4>Update Github template</h4>
-							<p>Tom committed 2018/4/3 20:46</p>
-						</el-card>
+
+					<el-timeline-item timestamp="审批" placement="top" type="success" :icon="Check">
+						<div class="timeline-box flex-1">
+							<div class="flex flex-align-center">
+								<div class="timeline-box-user flex-1">
+									<span class="name">罗小胖</span>
+									<div class="comment">
+										<div class="comment-content">同意</div>
+									</div>
+								</div>
+								<span class="timeline-box-date">2018/4/12 20:46</span>
+							</div>
+						</div>
 					</el-timeline-item>
-					<el-timeline-item timestamp="2018/4/2" placement="top">
-						<el-card>
-							<h4>Update Github template</h4>
-							<p>Tom committed 2018/4/2 20:46</p>
-						</el-card>
+
+					<el-timeline-item timestamp="抄送" placement="top" type="success" :icon="Check">
+						<div class="timeline-box flex-1">
+							<div class="flex flex-align-center">
+								<div v-if="false" class="timeline-box-user flex-1">
+									<span class="name">罗小胖</span>
+									<div class="comment">
+										<div class="comment-content">同意</div>
+									</div>
+								</div>
+								<el-space wrap>
+									<el-avatar> 路飞 </el-avatar>
+									<el-avatar> 红发 </el-avatar>
+									<el-avatar> 娜美 </el-avatar>
+								</el-space>
+
+								<span class="timeline-box-date">2018/4/12 20:46</span>
+							</div>
+						</div>
 					</el-timeline-item>
 				</el-timeline>
-
 			</div>
 			<div class="flow-actions">
-				<el-button :icon="ChatLineSquare">评论</el-button>
+				<el-button :icon="ChatLineSquare" @click="openComment">评论</el-button>
 			</div>
 		</div>
+
+		<LeFormConfigDialog
+			v-if="visible"
+			ref="dialogCommentRef"
+			v-model="visible"
+			title="评论审批"
+			width="600px"
+			:form-data="activeData"
+			:form-options="formOptions"
+			@submit="submitHandler"
+		/>
 	</el-drawer>
 </template>
 
 <script setup>
 import { computed, ref } from 'vue'
-import { ChatLineSquare } from '@element-plus/icons-vue'
+import { ChatLineSquare, Check } from '@element-plus/icons-vue'
 
 const direction = ref('rtl')
 const myProps = defineProps({
@@ -83,6 +123,9 @@ const myProps = defineProps({
 	}
 })
 
+const visible = ref(false) // 弹窗显示隐藏
+const activeData = ref({})
+
 // 同步值
 const $myEmit = defineEmits(['update:modelValue', 'successFn'])
 
@@ -104,6 +147,34 @@ const visibleDialog = computed({
 		$myEmit('update:modelValue', val)
 	}
 })
+
+const formsDialog = [
+	{
+		prop: 'username',
+		label: '评论',
+		itemType: 'input',
+		placeholder: '请输入评论',
+		rules: [{ required: true, message: '请输入评论', trigger: 'blur' }]
+	}
+]
+
+const formOptions = computed(() => {
+	return {
+		forms: formsDialog,
+		labelWidth: 120,
+		span: 30,
+		formConfig: {
+			showCancelBtn: true,
+			submitLoading: false
+		}
+	}
+})
+
+const submitHandler = () => {}
+
+const openComment = () => {
+  visible.value = !visible.value
+}
 </script>
 
 <style scoped lang="scss">
@@ -192,4 +263,41 @@ const visibleDialog = computed({
 	border-top: 1px solid rgba(229, 230, 235, 1);
 	padding: 0 20px;
 }
+
+// 时间线样式
+.timeline-box {
+	&-user {
+		.name {
+			color: #1d2129;
+			font-weight: 400;
+		}
+		.comment {
+			width: 100%;
+			-webkit-user-select: none;
+			user-select: none;
+			margin: 4px 0 16px;
+			padding: 8px 16px;
+			border-radius: 4px;
+			background-color: #f8f8fa;
+			.comment-content {
+				font-weight: 500;
+				color: #1d2129;
+			}
+		}
+	}
+	&-date {
+		margin-left: 10px;
+		left: 0;
+		padding-right: 16px;
+		text-align: right;
+		transform: translate(-100%);
+		position: absolute;
+		top: 0;
+		box-sizing: border-box;
+		max-width: 100px;
+		color: #86909c;
+		font-size: 12px;
+		line-height: 1.667;
+	}
+}
 </style>

src/views/flow/create/components/BasicInfo.vue

@@ -147,22 +147,23 @@ const getGroupList = async () => {
 }
 
 const initBaseicInfEv = item => {
-	item = {
-		processId: '1728240012964925441',
-		processForm:
-			'[{"type":"input","field":"userName","title":"输入框","info":"","$required":false,"_fc_drag_tag":"input","hidden":false,"display":true}]',
-		processKey: '003key',
-		processName: '003名称',
-		processIcon: 'https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/iconLib/v5/cart.svg',
-		categoryId: '1725778939021541378',
-		remark: '003说明',
-		useScope: 1,
-		processActorList: [{ actorId: '1705067852272607233', actorName: 'lanceJiang', actorType: 0 }],
-		processPermissionList: [{ userId: '1705067852272607233', userName: 'lanceJiang', operateApproval: 0, operateOwner: 0, operateData: 0 }]
-	}
-	const { processForm, ...rest } = item
+	// item = {
+	// 	processId: '1728240012964925441',
+	// 	processForm:yu
+	// 		'[{"type":"input","field":"userName","title":"输入框","info":"","$required":false,"_fc_drag_tag":"input","hidden":false,"display":true}]',
+	// 	processKey: '003key',
+	// 	processName: '003名称',
+	// 	processIcon: 'https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/iconLib/v5/cart.svg',
+	// 	categoryId: '1725778939021541378',
+	// 	remark: '003说明',
+	// 	useScope: 1,
+	// 	processActorList: [{ actorId: '1705067852272607233', actorName: 'lanceJiang', actorType: 0 }],
+	// 	processPermissionList: [{ userId: '1705067852272607233', userName: 'lanceJiang', operateApproval: 0, operateOwner: 0, operateData: 0 }]
+	// }
+	const { processForm, modelContent, ...rest } = item
 	flowInfo.value = rest
 	flowStore.setProcessForm(processForm)
+	flowStore.setModelContent(modelContent)
 	// updateRemoteCache()
 	flowProcessId.value = queryObj.value.id // 赋值流程id
 	if (item.useScope === 1) {
@@ -241,9 +242,7 @@ const bindCacheEvt = () => {
 // 根据id获取详情
 const getCurrentProcessDetailEv = id => {
 	process.processDetailApi(id).then(res => {
-		const { processForm, ...rest } = res
-		initBaseicInfEv(rest)
-		// flowStore.setProcessForm(processForm)
+		initBaseicInfEv(res)
 	})
 }
 

src/views/flow/create/components/FlowDesign.vue

@@ -1,6 +1,11 @@
 <script setup name="FlowDesign">
-import { reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import ScWorkflow from '@/components/scWorkflow'
+import process from '@/api/flow/process'
+import useFlowStore from '@/store/modules/flow'
+import { storeToRefs } from 'pinia'
+import { useRoute } from 'vue-router'
+const route = useRoute()
 
 defineProps({
 	label: {
@@ -10,8 +15,11 @@ defineProps({
 		type: String
 	}
 })
+
+const flowStore = useFlowStore()
+const { flowProcessId, basicInfo, processForm, modelContent } = storeToRefs(flowStore)
 const formRef = ref()
-const form = reactive({
+let form = ref({
 	// "name": "请假审批",
 	processConfig: {
 		nodeName: '发起人',
@@ -22,7 +30,7 @@ const form = reactive({
 const validate = () => {
 	return new Promise(resolve => {
 		// return new Promise((resolve, reject) => {
-		resolve(form)
+		resolve(form.value)
 		/*formRef.value.validate((valid, errObj) => {
 			if (valid) {
 				console.error('valid 成功')
@@ -35,9 +43,39 @@ const validate = () => {
 		})*/
 	})
 }
+
+// 接口保存审批流程
+const saveDesign = async jsonStr => {
+	try {
+		const params = {
+			processId: flowProcessId.value,
+			processForm: processForm.value,
+			...basicInfo.value,
+			modelContent: JSON.stringify(jsonStr)
+		}
+		const res = await process.progressCreateApi(params)
+		flowProcessId.value = res
+	} catch (e) {
+		console.log(e)
+	}
+}
+
+// 当前是否是编辑
+const queryObj = computed(() => route.query)
+
+onMounted(() => {
+	if (queryObj.value.id) {
+		console.log(modelContent.value, '===');
+		const _val = JSON.parse(modelContent.value)
+		form.value = Object.assign(_val, {})
+		console.log(form.value);
+	}
+})
+
 defineExpose({
 	formRef,
-	validate
+	validate,
+	saveDesign
 })
 </script>
 

src/views/flow/create/components/FormDesign.vue

@@ -32,8 +32,7 @@ const queryObj = computed(() => route.query)
 
 onMounted(() => {
 	if (queryObj.value.id) {
-		console.log('processForm.value');
-		// 	designer.value.initForm(processForm.value || [])
+		designer.value.initForm(processForm.value || [])
 	}
 })
 </script>

src/views/flow/create/index.vue

@@ -21,7 +21,7 @@
 				</div>
 			</div>
 			<div class="create-approval-header-right">
-				<el-button v-if="false" @click="saveHandler">暂存</el-button>
+				<el-button @click="saveHandler">暂存</el-button>
 				<el-button type="primary" @click="submitHandler">发布</el-button>
 			</div>
 		</div>
@@ -79,6 +79,11 @@ const saveHandler = () => {
 	// 基础信息
 	// 表单设计
 	// 流程设计
+	if (activeName.value === '流程设计') {
+		dyncComponent.value.validate().then(res => {
+			dyncComponent.value.saveDesign(res)
+		})
+	}
 	// 扩展设置
 }