| | |
| | | <div class="search_form"> |
| | | <div> |
| | | <span class="search_title">程序名:</span> |
| | | <el-input |
| | | v-model="searchForm.programName" |
| | | style="width: 240px" |
| | | placeholder="请输入程序名搜索" |
| | | @change="handleQuery" |
| | | clearable |
| | | :prefix-icon="Search" |
| | | /> |
| | | <el-input v-model="searchForm.programName" |
| | | style="width: 240px" |
| | | placeholder="请输入程序名搜索" |
| | | @change="handleQuery" |
| | | clearable |
| | | :prefix-icon="Search" /> |
| | | <span class="search_title ml10">执行状态:</span> |
| | | <el-select v-model="searchForm.status" clearable @change="handleQuery" style="width: 240px"> |
| | | <el-option label="运行中" :value="'running'" /> |
| | | <el-option label="已停止" :value="'stopped'" /> |
| | | <el-option label="异常" :value="'error'" /> |
| | | <el-select v-model="searchForm.status" |
| | | clearable |
| | | @change="handleQuery" |
| | | style="width: 240px"> |
| | | <el-option label="运行中" |
| | | :value="'running'" /> |
| | | <el-option label="已停止" |
| | | :value="'stopped'" /> |
| | | <el-option label="异常" |
| | | :value="'error'" /> |
| | | </el-select> |
| | | <el-button type="primary" @click="handleQuery" style="margin-left: 10px"> |
| | | <el-button type="primary" |
| | | @click="handleQuery" |
| | | style="margin-left: 10px"> |
| | | 搜索 |
| | | </el-button> |
| | | </div> |
| | | <div> |
| | | <el-button @click="handleExport" style="margin-right: 10px">导出</el-button> |
| | | <el-button type="primary" @click="openForm('add')">新增</el-button> |
| | | <el-button type="danger" plain @click="handleDelete">删除</el-button> |
| | | <el-button @click="handleExport" |
| | | style="margin-right: 10px">导出</el-button> |
| | | <el-button type="primary" |
| | | @click="openForm('add')">新增</el-button> |
| | | <el-button type="danger" |
| | | plain |
| | | @click="handleDelete">删除</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="table_list"> |
| | | <PIMTable |
| | | rowKey="id" |
| | | :column="tableColumn" |
| | | :tableData="tableData" |
| | | :page="page" |
| | | :isSelection="true" |
| | | @selection-change="handleSelectionChange" |
| | | :tableLoading="tableLoading" |
| | | @pagination="pagination" |
| | | :total="page.total" |
| | | ></PIMTable> |
| | | <PIMTable rowKey="id" |
| | | :column="tableColumn" |
| | | :tableData="tableData" |
| | | :page="page" |
| | | :isSelection="true" |
| | | @selection-change="handleSelectionChange" |
| | | :tableLoading="tableLoading" |
| | | @pagination="pagination" |
| | | :total="page.total"></PIMTable> |
| | | </div> |
| | | |
| | | <!-- RPA表单弹窗 --> |
| | | <el-dialog |
| | | v-model="dialogVisible" |
| | | :title="dialogTitle" |
| | | width="500px" |
| | | :close-on-click-modal="false" |
| | | > |
| | | <el-form |
| | | ref="formRef" |
| | | :model="form" |
| | | :rules="rules" |
| | | label-width="100px" |
| | | > |
| | | <el-form-item label="程序名" prop="programName"> |
| | | <el-input |
| | | v-model="form.programName" |
| | | placeholder="请输入程序名" |
| | | clearable |
| | | /> |
| | | <el-dialog v-model="dialogVisible" |
| | | :title="dialogTitle" |
| | | width="500px" |
| | | :close-on-click-modal="false"> |
| | | <el-form ref="formRef" |
| | | :model="form" |
| | | :rules="rules" |
| | | label-width="100px"> |
| | | <el-form-item label="程序名" |
| | | prop="programName"> |
| | | <el-input v-model="form.programName" |
| | | placeholder="请输入程序名" |
| | | clearable /> |
| | | </el-form-item> |
| | | <el-form-item label="执行状态" prop="status"> |
| | | <el-select v-model="form.status" placeholder="请选择执行状态" style="width: 100%"> |
| | | <el-option label="运行中" value="running" /> |
| | | <el-option label="已停止" value="stopped" /> |
| | | <el-option label="异常" value="error" /> |
| | | <el-form-item label="执行状态" |
| | | prop="status"> |
| | | <el-select v-model="form.status" |
| | | placeholder="请选择执行状态" |
| | | style="width: 100%"> |
| | | <el-option label="运行中" |
| | | value="running" /> |
| | | <el-option label="已停止" |
| | | value="stopped" /> |
| | | <el-option label="异常" |
| | | value="error" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="描述" prop="description"> |
| | | <el-input |
| | | v-model="form.description" |
| | | type="textarea" |
| | | :rows="3" |
| | | placeholder="请输入RPA程序描述" |
| | | clearable |
| | | /> |
| | | <el-form-item label="描述" |
| | | prop="description"> |
| | | <el-input v-model="form.description" |
| | | type="textarea" |
| | | :rows="3" |
| | | placeholder="请输入RPA程序描述" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button type="primary" |
| | | @click="submitForm">确定</el-button> |
| | | <el-button @click="dialogVisible = false">取消</el-button> |
| | | <el-button type="primary" @click="submitForm">确定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { Search } from "@element-plus/icons-vue"; |
| | | import { onMounted, ref, reactive, toRefs, getCurrentInstance } 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: { |
| | | programName: "", |
| | | status: "", |
| | | }, |
| | | form: { |
| | | programName: "", |
| | | status: "", |
| | | description: "" |
| | | }, |
| | | dialogVisible: false, |
| | | dialogTitle: "", |
| | | dialogType: "add", |
| | | tableLoading: false, |
| | | page: { |
| | | current: 1, |
| | | size: 20, |
| | | total: 0, |
| | | }, |
| | | tableData: [], |
| | | }); |
| | | |
| | | const { searchForm, form, dialogVisible, dialogTitle, dialogType, selectedIds, tableLoading, page, tableData } = toRefs(data); |
| | | |
| | | // 表单引用 |
| | | const formRef = ref(); |
| | | // 选择的行数据 |
| | | const selectedRows = ref([]); |
| | | |
| | | // 表单验证规则 |
| | | const rules = { |
| | | programName: [ |
| | | { required: true, message: "请输入程序名", trigger: "blur" } |
| | | ], |
| | | status: [ |
| | | { required: true, message: "请选择执行状态", trigger: "change" } |
| | | ] |
| | | }; |
| | | |
| | | // 表格列配置 |
| | | const tableColumn = ref([ |
| | | { |
| | | label: "程序名", |
| | | prop: "programName", |
| | | // width: 200, |
| | | }, |
| | | { |
| | | label: "执行状态", |
| | | prop: "status", |
| | | dataType: "tag", |
| | | // width: 120, |
| | | formatData: (params) => { |
| | | const statusMap = { |
| | | running: "运行中", |
| | | stopped: "已停止", |
| | | error: "异常" |
| | | }; |
| | | return statusMap[params] || params; |
| | | import { Search } from "@element-plus/icons-vue"; |
| | | import { onMounted, ref, reactive, toRefs, getCurrentInstance } 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: { |
| | | programName: "", |
| | | status: "", |
| | | }, |
| | | formatType: (params) => { |
| | | const typeMap = { |
| | | running: "success", |
| | | stopped: "info", |
| | | error: "danger" |
| | | }; |
| | | return typeMap[params] || "info"; |
| | | } |
| | | }, |
| | | { |
| | | label: "描述", |
| | | prop: "description", |
| | | // width: 300, |
| | | showOverflowTooltip: true, |
| | | }, |
| | | { |
| | | label: "创建时间", |
| | | prop: "createTime", |
| | | // width: 180, |
| | | }, |
| | | { |
| | | dataType: "action", |
| | | label: "操作", |
| | | align: "center", |
| | | fixed: "right", |
| | | width: 150, |
| | | operation: [ |
| | | { |
| | | name: "编辑", |
| | | type: "text", |
| | | clickFun: (row) => { |
| | | openForm("edit", row); |
| | | } |
| | | form: { |
| | | programName: "", |
| | | status: "", |
| | | description: "", |
| | | }, |
| | | dialogVisible: false, |
| | | dialogTitle: "", |
| | | dialogType: "add", |
| | | tableLoading: false, |
| | | page: { |
| | | current: 1, |
| | | size: 20, |
| | | total: 0, |
| | | }, |
| | | tableData: [], |
| | | }); |
| | | |
| | | const { |
| | | searchForm, |
| | | form, |
| | | dialogVisible, |
| | | dialogTitle, |
| | | dialogType, |
| | | selectedIds, |
| | | tableLoading, |
| | | page, |
| | | tableData, |
| | | } = toRefs(data); |
| | | |
| | | // 表单引用 |
| | | const formRef = ref(); |
| | | // 选择的行数据 |
| | | const selectedRows = ref([]); |
| | | |
| | | // 表单验证规则 |
| | | const rules = { |
| | | programName: [{ required: true, message: "请输入程序名", trigger: "blur" }], |
| | | status: [{ required: true, message: "请选择执行状态", trigger: "change" }], |
| | | }; |
| | | |
| | | // 表格列配置 |
| | | const tableColumn = ref([ |
| | | { |
| | | label: "程序名", |
| | | prop: "programName", |
| | | // width: 200, |
| | | }, |
| | | { |
| | | label: "执行状态", |
| | | prop: "status", |
| | | dataType: "tag", |
| | | // width: 120, |
| | | formatData: params => { |
| | | const statusMap = { |
| | | running: "运行中", |
| | | stopped: "已停止", |
| | | error: "异常", |
| | | }; |
| | | return statusMap[params] || params; |
| | | }, |
| | | // { |
| | | // name: "开始", |
| | | // type: "text", |
| | | // clickFun: (row) => { |
| | | // handleStart(row); |
| | | // }, |
| | | // disabled: (row) => row.status !== 'stopped' |
| | | // }, |
| | | // { |
| | | // name: "停止", |
| | | // type: "text", |
| | | // clickFun: (row) => { |
| | | // handleStop(row); |
| | | // }, |
| | | // disabled: (row) => row.status === 'stopped' |
| | | // } |
| | | ] |
| | | } |
| | | ]); |
| | | |
| | | |
| | | // 生命周期 |
| | | onMounted(() => { |
| | | getList(); |
| | | }); |
| | | |
| | | // 查询数据 |
| | | const handleQuery = () => { |
| | | // page.value.current = 1; |
| | | getList(); |
| | | }; |
| | | |
| | | const getList = () => { |
| | | tableLoading.value = true; |
| | | listRpa({...page.value, ...searchForm.value}) |
| | | .then(res => { |
| | | tableLoading.value = false; |
| | | tableData.value = res.data.records |
| | | page.total = res.data.total; |
| | | }).catch(err => { |
| | | tableLoading.value = false; |
| | | }) |
| | | }; |
| | | |
| | | // 分页处理 |
| | | const pagination = (obj) => { |
| | | page.value.current = obj.page; |
| | | page.value.size = obj.limit; |
| | | handleQuery(); |
| | | }; |
| | | |
| | | // 选择变化处理 |
| | | const handleSelectionChange = (selection) => { |
| | | selectedRows.value = selection; |
| | | }; |
| | | |
| | | // 打开表单 |
| | | const openForm = (type, row) => { |
| | | dialogType.value = type; |
| | | dialogVisible.value = true; |
| | | |
| | | if (type === "add") { |
| | | dialogTitle.value = "添加RPA"; |
| | | } else { |
| | | dialogTitle.value = "编辑RPA"; |
| | | form.value = { ...row }; |
| | | } |
| | | }; |
| | | |
| | | // 提交表单 |
| | | const submitForm = async () => { |
| | | if (!formRef.value) return; |
| | | |
| | | try { |
| | | await formRef.value.validate(); |
| | | |
| | | if (dialogType.value === "add") { |
| | | // 添加新RPA |
| | | addRpa({...form.value}).then(res => { |
| | | if(res.code == 200){ |
| | | ElMessage.success("添加成功"); |
| | | form.value = { |
| | | programName: "", |
| | | status: "", |
| | | description: "" |
| | | formatType: params => { |
| | | const typeMap = { |
| | | running: "success", |
| | | stopped: "info", |
| | | error: "danger", |
| | | }; |
| | | return typeMap[params] || "info"; |
| | | }, |
| | | }, |
| | | { |
| | | label: "描述", |
| | | prop: "description", |
| | | // width: 300, |
| | | showOverflowTooltip: true, |
| | | }, |
| | | { |
| | | label: "创建时间", |
| | | prop: "createTime", |
| | | // width: 180, |
| | | }, |
| | | { |
| | | dataType: "action", |
| | | label: "操作", |
| | | align: "center", |
| | | fixed: "right", |
| | | width: 150, |
| | | operation: [ |
| | | { |
| | | name: "编辑", |
| | | type: "text", |
| | | clickFun: row => { |
| | | openForm("edit", row); |
| | | }, |
| | | dialogVisible.value = false; |
| | | getList(); |
| | | } |
| | | }).catch(err => { |
| | | ElMessage.error(err.msg); |
| | | }, |
| | | // { |
| | | // name: "开始", |
| | | // type: "text", |
| | | // clickFun: (row) => { |
| | | // handleStart(row); |
| | | // }, |
| | | // disabled: (row) => row.status !== 'stopped' |
| | | // }, |
| | | // { |
| | | // name: "停止", |
| | | // type: "text", |
| | | // clickFun: (row) => { |
| | | // handleStop(row); |
| | | // }, |
| | | // disabled: (row) => row.status === 'stopped' |
| | | // } |
| | | ], |
| | | }, |
| | | ]); |
| | | |
| | | // 生命周期 |
| | | onMounted(() => { |
| | | getList(); |
| | | }); |
| | | |
| | | // 查询数据 |
| | | const handleQuery = () => { |
| | | // page.value.current = 1; |
| | | getList(); |
| | | }; |
| | | |
| | | const getList = () => { |
| | | tableLoading.value = true; |
| | | listRpa({ ...page.value, ...searchForm.value }) |
| | | .then(res => { |
| | | tableLoading.value = false; |
| | | tableData.value = res.data.records; |
| | | page.total = res.data.total; |
| | | }) |
| | | .catch(err => { |
| | | tableLoading.value = false; |
| | | }); |
| | | }; |
| | | |
| | | // 分页处理 |
| | | const pagination = obj => { |
| | | page.value.current = obj.page; |
| | | page.value.size = obj.limit; |
| | | handleQuery(); |
| | | }; |
| | | |
| | | // 选择变化处理 |
| | | const handleSelectionChange = selection => { |
| | | selectedRows.value = selection; |
| | | }; |
| | | |
| | | // 打开表单 |
| | | const openForm = (type, row) => { |
| | | dialogType.value = type; |
| | | dialogVisible.value = true; |
| | | |
| | | if (type === "add") { |
| | | dialogTitle.value = "添加RPA"; |
| | | } else { |
| | | // 编辑RPA |
| | | updateRpa({...form.value}).then(res => { |
| | | if(res.code == 200){ |
| | | ElMessage.success("更新成功"); |
| | | dialogVisible.value = false; |
| | | getList(); |
| | | } |
| | | }).catch(err => { |
| | | ElMessage.error(err.msg); |
| | | }) |
| | | dialogTitle.value = "编辑RPA"; |
| | | form.value = { ...row }; |
| | | } |
| | | } catch (error) { |
| | | console.error("表单验证失败:", error); |
| | | } |
| | | }; |
| | | }; |
| | | |
| | | // 开始RPA |
| | | const handleStart = (row) => { |
| | | ElMessageBox.confirm(`确定要启动RPA程序"${row.programName}"吗?`, "提示", { |
| | | confirmButtonText: "确认", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }).then(() => { |
| | | row.status = "running"; |
| | | ElMessage.success("RPA启动成功"); |
| | | getList(); |
| | | }).catch(() => { |
| | | // 用户取消 |
| | | }); |
| | | }; |
| | | // 提交表单 |
| | | const submitForm = async () => { |
| | | if (!formRef.value) return; |
| | | |
| | | // 停止RPA |
| | | const handleStop = (row) => { |
| | | ElMessageBox.confirm(`确定要停止RPA程序"${row.programName}"吗?`, "提示", { |
| | | confirmButtonText: "确认", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }).then(() => { |
| | | row.status = "stopped"; |
| | | ElMessage.success("RPA停止成功"); |
| | | getList(); |
| | | }).catch(() => { |
| | | // 用户取消 |
| | | }); |
| | | }; |
| | | try { |
| | | await formRef.value.validate(); |
| | | |
| | | // 删除RPA |
| | | const handleDelete = () => { |
| | | let ids = []; |
| | | 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) => { |
| | | if(res.code == 200){ |
| | | ElMessage.success("删除成功"); |
| | | getList(); |
| | | } |
| | | }).catch(err => { |
| | | ElMessage.error(err.msg); |
| | | }) |
| | | }) |
| | | .catch(() => { |
| | | proxy.$modal.msg("已取消"); |
| | | }); |
| | | }; |
| | | if (dialogType.value === "add") { |
| | | // 添加新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 |
| | | updateRpa({ ...form.value }) |
| | | .then(res => { |
| | | if (res.code == 200) { |
| | | ElMessage.success("更新成功"); |
| | | dialogVisible.value = false; |
| | | getList(); |
| | | } |
| | | }) |
| | | .catch(err => { |
| | | ElMessage.error(err.msg); |
| | | }); |
| | | } |
| | | } catch (error) { |
| | | console.error("表单验证失败:", error); |
| | | } |
| | | }; |
| | | |
| | | // 导出功能 |
| | | const { proxy } = getCurrentInstance() |
| | | const handleExport = () => { |
| | | proxy.download('/rpaProcessAutomation/export', { ...searchForm.value }, 'RPA管理.xlsx') |
| | | } |
| | | // 开始RPA |
| | | const handleStart = row => { |
| | | ElMessageBox.confirm(`确定要启动RPA程序"${row.programName}"吗?`, "提示", { |
| | | confirmButtonText: "确认", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | row.status = "running"; |
| | | ElMessage.success("RPA启动成功"); |
| | | getList(); |
| | | }) |
| | | .catch(() => { |
| | | // 用户取消 |
| | | }); |
| | | }; |
| | | |
| | | // 停止RPA |
| | | const handleStop = row => { |
| | | ElMessageBox.confirm(`确定要停止RPA程序"${row.programName}"吗?`, "提示", { |
| | | confirmButtonText: "确认", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | row.status = "stopped"; |
| | | ElMessage.success("RPA停止成功"); |
| | | getList(); |
| | | }) |
| | | .catch(() => { |
| | | // 用户取消 |
| | | }); |
| | | }; |
| | | |
| | | // 删除RPA |
| | | const handleDelete = () => { |
| | | let ids = []; |
| | | 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 => { |
| | | if (res.code == 200) { |
| | | ElMessage.success("删除成功"); |
| | | getList(); |
| | | } |
| | | }) |
| | | .catch(err => { |
| | | ElMessage.error(err.msg); |
| | | }); |
| | | }) |
| | | .catch(() => { |
| | | proxy.$modal.msg("已取消"); |
| | | }); |
| | | }; |
| | | |
| | | // 导出功能 |
| | | const { proxy } = getCurrentInstance(); |
| | | const handleExport = () => { |
| | | proxy.download( |
| | | "/rpaProcessAutomation/export", |
| | | { ...searchForm.value }, |
| | | "RPA管理.xlsx" |
| | | ); |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped></style> |