| | |
| | | import { onMounted, ref, reactive, toRefs } from "vue"; |
| | | import { ElMessage, ElMessageBox } from "element-plus"; |
| | | import PIMTable from "@/components/PIMTable/PIMTable.vue"; |
| | | |
| | | import {listRpa, addRpa, updateRpa, delRpa, delRpaBatch} from "@/api/collaborativeApproval/rpaManagement.js"; |
| | | // 响应式数据 |
| | | const data = reactive({ |
| | | searchForm: { |
| | |
| | | status: "", |
| | | }, |
| | | form: { |
| | | id: "", |
| | | programName: "", |
| | | status: "stopped", |
| | | description: "", |
| | | createTime: "", |
| | | status: "", |
| | | description: "" |
| | | }, |
| | | dialogVisible: false, |
| | | dialogTitle: "", |
| | | dialogType: "add", |
| | | selectedIds: [], |
| | | tableLoading: false, |
| | | page: { |
| | | current: 1, |
| | | size: 100, |
| | | size: 20, |
| | | total: 0, |
| | | }, |
| | | tableData: [], |
| | |
| | | |
| | | // 表单引用 |
| | | const formRef = ref(); |
| | | // 选择的行数据 |
| | | const selectedRows = ref([]); |
| | | |
| | | // 表单验证规则 |
| | | const rules = { |
| | |
| | | label: "操作", |
| | | align: "center", |
| | | fixed: "right", |
| | | width: 230, |
| | | width: 150, |
| | | operation: [ |
| | | { |
| | | name: "编辑", |
| | |
| | | openForm("edit", row); |
| | | } |
| | | }, |
| | | { |
| | | name: "开始", |
| | | type: "text", |
| | | clickFun: (row) => { |
| | | handleStart(row); |
| | | }, |
| | | disabled: (row) => row.status !== 'stopped' |
| | | }, |
| | | { |
| | | name: "停止", |
| | | type: "text", |
| | | clickFun: (row) => { |
| | | handleStop(row); |
| | | }, |
| | | disabled: (row) => row.status === 'stopped' |
| | | } |
| | | // { |
| | | // name: "开始", |
| | | // type: "text", |
| | | // clickFun: (row) => { |
| | | // handleStart(row); |
| | | // }, |
| | | // disabled: (row) => row.status !== 'stopped' |
| | | // }, |
| | | // { |
| | | // name: "停止", |
| | | // type: "text", |
| | | // clickFun: (row) => { |
| | | // handleStop(row); |
| | | // }, |
| | | // disabled: (row) => row.status === 'stopped' |
| | | // } |
| | | ] |
| | | } |
| | | ]); |
| | | |
| | | // 模拟数据 |
| | | const mockData = [ |
| | | { |
| | | id: "1", |
| | | programName: "订单处理RPA", |
| | | status: "running", |
| | | description: "自动处理客户订单,包括验证、分配和确认", |
| | | createTime: "2024-01-15 10:30:00" |
| | | }, |
| | | { |
| | | id: "2", |
| | | programName: "库存同步RPA", |
| | | status: "stopped", |
| | | description: "同步多个仓库的库存数据,确保数据一致性", |
| | | createTime: "2024-01-14 15:20:00" |
| | | }, |
| | | { |
| | | id: "3", |
| | | programName: "报表生成RPA", |
| | | status: "error", |
| | | description: "自动生成每日销售报表和库存报表", |
| | | createTime: "2024-01-13 09:15:00" |
| | | } |
| | | ]; |
| | | |
| | | // 生命周期 |
| | | onMounted(() => { |
| | |
| | | |
| | | // 查询数据 |
| | | const handleQuery = () => { |
| | | page.value.current = 1; |
| | | // page.value.current = 1; |
| | | getList(); |
| | | }; |
| | | |
| | | const getList = () => { |
| | | tableLoading.value = true; |
| | | |
| | | // 模拟API调用延迟 |
| | | setTimeout(() => { |
| | | let filteredData = [...mockData]; |
| | | |
| | | // 根据搜索条件过滤数据 |
| | | if (searchForm.value.programName) { |
| | | filteredData = filteredData.filter(item => |
| | | item.programName.toLowerCase().includes(searchForm.value.programName.toLowerCase()) |
| | | ); |
| | | } |
| | | |
| | | if (searchForm.value.status) { |
| | | filteredData = filteredData.filter(item => item.status === searchForm.value.status); |
| | | } |
| | | |
| | | tableData.value = filteredData; |
| | | page.value.total = filteredData.length; |
| | | listRpa({...page.value, ...searchForm.value}) |
| | | .then(res => { |
| | | tableLoading.value = false; |
| | | }, 500); |
| | | tableData.value = res.data.records |
| | | page.total = res.data.total; |
| | | }).catch(err => { |
| | | tableLoading.value = false; |
| | | }) |
| | | }; |
| | | |
| | | // 分页处理 |
| | |
| | | |
| | | // 选择变化处理 |
| | | const handleSelectionChange = (selection) => { |
| | | selectedIds.value = selection.map(item => item.id); |
| | | selectedRows.value = selection; |
| | | }; |
| | | |
| | | // 打开表单 |
| | |
| | | |
| | | if (type === "add") { |
| | | dialogTitle.value = "添加RPA"; |
| | | form.value = { |
| | | id: "", |
| | | programName: "", |
| | | status: "stopped", |
| | | description: "", |
| | | createTime: "", |
| | | }; |
| | | } else { |
| | | dialogTitle.value = "编辑RPA"; |
| | | form.value = { ...row }; |
| | |
| | | |
| | | if (dialogType.value === "add") { |
| | | // 添加新RPA |
| | | const newRPA = { |
| | | id: Date.now().toString(), |
| | | programName: form.value.programName, |
| | | status: form.value.status, |
| | | description: form.value.description, |
| | | createTime: new Date().toLocaleString(), |
| | | }; |
| | | |
| | | mockData.unshift(newRPA); |
| | | ElMessage.success("RPA添加成功"); |
| | | addRpa({...form.value}).then(res => { |
| | | if(res.code == 200){ |
| | | ElMessage.success("添加成功"); |
| | | form.value = { |
| | | programName: "", |
| | | status: "", |
| | | description: "" |
| | | }, |
| | | dialogVisible.value = false; |
| | | getList(); |
| | | } |
| | | }).catch(err => { |
| | | ElMessage.error(err.msg); |
| | | }) |
| | | } else { |
| | | // 编辑RPA |
| | | const index = mockData.findIndex(item => item.id === form.value.id); |
| | | if (index !== -1) { |
| | | mockData[index] = { ...form.value }; |
| | | ElMessage.success("RPA更新成功"); |
| | | } |
| | | updateRpa({...form.value}).then(res => { |
| | | if(res.code == 200){ |
| | | ElMessage.success("更新成功"); |
| | | dialogVisible.value = false; |
| | | getList(); |
| | | } |
| | | }).catch(err => { |
| | | ElMessage.error(err.msg); |
| | | }) |
| | | } |
| | | |
| | | dialogVisible.value = false; |
| | | getList(); |
| | | } catch (error) { |
| | | console.error("表单验证失败:", error); |
| | | } |
| | |
| | | // 删除RPA |
| | | const handleDelete = () => { |
| | | let ids = []; |
| | | if (selectedIds.value.length > 0) { |
| | | ids = selectedIds.value.map((item) => item.id); |
| | | } else { |
| | | ElMessage.warning("请选择要删除的RPA"); |
| | | return; |
| | | } |
| | | |
| | | ElMessageBox.confirm("选中的内容将被删除,是否确认删除?", "删除", { |
| | | confirmButtonText: "确认", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }).then(() => { |
| | | // 从模拟数据中删除选中的项 |
| | | ids.forEach(id => { |
| | | const index = mockData.findIndex(item => item.id === id); |
| | | if (index !== -1) { |
| | | mockData.splice(index, 1); |
| | | } |
| | | }); |
| | | |
| | | ElMessage.success("删除成功"); |
| | | selectedIds.value = []; |
| | | getList(); |
| | | }).catch(() => { |
| | | // 用户取消 |
| | | }); |
| | | if (selectedRows.value.length > 0) { |
| | | ids = selectedRows.value.map((item) => item.id); |
| | | } else { |
| | | proxy.$modal.msgWarning("请选择数据"); |
| | | return; |
| | | } |
| | | ElMessageBox.confirm("选中的内容将被删除,是否确认删除?", "删除提示", { |
| | | confirmButtonText: "确认", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | delRpa(ids).then((res) => { |
| | | proxy.$modal.msgSuccess("删除成功"); |
| | | getList(); |
| | | }) |
| | | }) |
| | | .catch(() => { |
| | | proxy.$modal.msg("已取消"); |
| | | }); |
| | | }; |
| | | </script> |
| | | |