<template>
|
<div class="app-container">
|
<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"
|
/>
|
<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>
|
<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>
|
</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>
|
</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-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-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>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="submitForm">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</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;
|
},
|
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);
|
}
|
},
|
// {
|
// 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: ""
|
},
|
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);
|
}
|
};
|
|
// 开始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>
|
