byte-sailing-new/src/views/process/dealWith/index.vue

<template>
	<div class="tenant">
		<!-- <Banner /> -->
		<div class="content">
			<byTable
				:source="sourceList.data"
				:pagination="sourceList.pagination"
				:config="config"
				:loading="loading"
				highlight-current-row
				:selectConfig="selectConfig"
				:table-events="{
					//element talbe事件都能传
					select: select,
				}"
				@get-list="getList"
			>
				<template #slotName="{ item }">
					{{ item.createTime }}
				</template>
			</byTable>
		</div>
		<el-dialog
			:title="modalType == 'add' ? '新增' : '编辑'"
			v-model="dialogVisible"
			width="400"
			v-loading="loading"
		>
			<byForm
				:formConfig="formConfig"
				:formOption="formOption"
				v-model="formData.data"
				:rules="rules"
				ref="byform"
			>
			</byForm>
			<template #footer>
				<el-button @click="dialogVisible = false" size="large"
					>取 消</el-button
				>
				<el-button
					type="primary"
					@click="submitForm('byform')"
					size="large"
					:loading="submitLoading"
				>
					确 定
				</el-button>
			</template>
		</el-dialog>
	</div>
</template>
    
  <script setup>
/* eslint-disable vue/no-unused-components */
import { ElMessage, ElMessageBox } from 'element-plus'
import byTable from '@/components/byTable/index'
import byForm from '@/components/byForm/index'
import { computed, defineComponent, ref } from 'vue'
const loading = ref(false)
const submitLoading = ref(false)
const dictCommonModal = ref(false)
const sourceList = ref({
	data: [],
	pagination: {
		total: 3,
		pageNum: 1,
		pageSize: 10,
        status:1,
	},
})
let dialogVisible = ref(false)
let roomDialogVisible = ref(false)
let modalType = ref('add')
let rules = ref({
	classifyName: [
		{ required: true, message: '请输入功能模块', trigger: 'blur' },
	],
	flowKey: [{ required: true, message: '请输入流程标识', trigger: 'blur' }],
	flowName: [{ required: true, message: '请输入流程名称', trigger: 'blur' }],
})
const { proxy } = getCurrentInstance()
const selectConfig = computed(() => {
	return [
        {
			label: '流程类型',
			prop: 'flowInfoId',
			data: [],
		},
		{
			label: '流程状态',
			prop: 'status',
			data: [
				{
					label: '待处理',
					value: '1',
				},
				{
					label: '已发起',
					value: '2',
				},
                {
                    label: '已处理',
                    value: '3',
                },
			],
		},
	]
})
const config = computed(() => {
	return [
		{
			attrs: {
				label: '流程类型',
				prop: 'flowName',
			},
		},
		{
			attrs: {
				label: '流程标题',
				prop: 'title',
			},
		},

		{
			attrs: {
				label: '处理类型',
				width: 100,
				prop: 'status',
			},
			render(status) {
				return status == 0 || status == 1 ? '待处理' : status == 2 ? '已通过' : '已驳回'
			},
		},
		{
			attrs: {
				label: '发起人',
				prop: 'createUserName',
			},
		},
		{
			attrs: {
				label: '发起时间',
				prop: 'createTime',
			},
		},
		{
			attrs: {
				label: '操作',
				width: '200',
				align: 'right',
			},
			// 渲染 el-button，一般用在最后一列。
			renderHTML(row) {
				return [
					{
                        attrs: {
                            label: row.status == 0 || row.status == 1 ? '办理' : '查看',
                            type: 'primary',
                            text: true,
                            bg: true,
                            disabled: false,
                        },
                        el: 'button',
                        click() {
							if(row.status != 1 && row.status != 0) {
								proxy.$router.push({
									path: "/platform_manage/process/processApproval",
									query: {
										flowKey: row.flowKey,
										id: row.id,
										processType:20,
										version:row.version
									},
								});
								return
							}
							proxy.post('flowExample/getApprovalRecord',{id:row.id}).then(res=>{
								if(res.recordList.length > 0) {
									let data = res.recordList.filter(item => item.status === 2)
									let nodeType= 0
									if (data && data.length > 0) {
										nodeType = data[0].nodeType
									}
									proxy.$router.push({
										path: "/platform_manage/process/processApproval",
										query: {
											flowKey: row.flowKey,
											id: row.id,
											processType:nodeType == 1 ? 30 : 10,
											version:row.version
										},
									});
								}
							})
                        },
                    } 
						
				]
			},
		},
	]
})
let dtlData = reactive({
	data: {},
})
let formData = reactive({
	data: {},
	treeData: [],
})
const formOption = reactive({
	inline: true,
	labelWidth: 100,
	itemWidth: 100,
	rules: [],
})
const byform = ref(null)
const treeData = ref([])
const formConfig = computed(() => {
	return [
		{
			type: 'input',
			prop: 'classifyName',
			label: '功能模块',
		},
		{
			type: 'input',
			prop: 'flowKey',
			label: '流程标识',
			isHide: modalType.value == 'edit',
		},
		{
			type: 'input',
			prop: 'flowName',
			label: '流程名称',
		},
	]
})

const flowJump = (row,type) => {
    proxy.post('/flowProcess/jump', {flowId:row.id,handleType:type,version:row.version,data:{}}).then((message) => {
        console.log(message)
        if(message){
            ElMessage.success('操作成功')
            getList()
        }
    })
}

const getFlowType = () => {
    proxy
        .post('/flowExample/getFlowType')
            .then((message) => {
                console.log(message)
                selectConfig.value[0].data = message.map((item) => {
                    return {
                        label: item.flowName,
                        value: item.id,
                    }
                })
            })
        
}
getFlowType()
const getUrlObj = {
    1:'/flowExample/getToBeProcessedPage',
    2:'/flowExample/getHaveInitiatedPage',
    3:'/flowExample/getProcessedPage',
}
const getList = async (req) => {
	sourceList.value.pagination = { ...sourceList.value.pagination, ...req }
	loading.value = true
	proxy
		.post( getUrlObj[sourceList.value.pagination.status], sourceList.value.pagination)
		.then((message) => {
			console.log(message)
			sourceList.value.data = message.rows
			sourceList.value.pagination.total = message.total
			setTimeout(() => {
				loading.value = false
			}, 200)
		})
}

const openModal = () => {
	dialogVisible.value = true
	modalType.value = 'add'
	formData.data = {}
}
const selection = ref({
	data: [],
})
const select = (_selection, row) => {
	selection.value.data = _selection
	console.log(_selection.length)
}

const tree = ref(null)
const submitTree = () => {
	proxy
		.post('/tenantInfo/bindingMenu', {
			tenantId: selection.value.data[0].tenantId,
			menuIdList: tree.value.getCheckedKeys(),
		})
		.then((res) => {
			ElMessage({
				message: '保存成功',
				type: 'success',
			})
			roomDialogVisible.value = false
		})
}

const submitForm = () => {
	byform.value.handleSubmit((valid) => {
		submitLoading.value = true
		proxy
			.post('/flowInfo/' + modalType.value, formData.data)
			.then((res) => {
				ElMessage({
					message: modalType.value == 'add' ? '添加成功' : '编辑成功',
					type: 'success',
				})
				dialogVisible.value = false
				submitLoading.value = false
				getList()
			})
	})
}

const getDtl = (row) => {
	formData.data = { ...row }
	modalType.value = 'edit'
	dialogVisible.value = true
}

const changeStatus = (row) => {
	modalType.value = 'edit'
	proxy
		.post('/flowInfo/edit', { ...row, status: row.status === 0 ? 1 : 0 })
		.then((res) => {
			ElMessage({
				message: '操作成功',
				type: 'success',
			})
			getList()
		})
}

getList()
</script>
    
  <style lang="scss" scoped>
.tenant {
	padding: 20px;
}
</style>