<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 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 } from "vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import PIMTable from "@/components/PIMTable/PIMTable.vue";
|
|
// 响应式数据
|
const data = reactive({
|
searchForm: {
|
programName: "",
|
status: "",
|
},
|
form: {
|
id: "",
|
programName: "",
|
status: "stopped",
|
description: "",
|
createTime: "",
|
},
|
dialogVisible: false,
|
dialogTitle: "",
|
dialogType: "add",
|
selectedIds: [],
|
tableLoading: false,
|
page: {
|
current: 1,
|
size: 100,
|
total: 0,
|
},
|
tableData: [],
|
});
|
|
const { searchForm, form, dialogVisible, dialogTitle, dialogType, selectedIds, tableLoading, page, tableData } = toRefs(data);
|
|
// 表单引用
|
const formRef = 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: 230,
|
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'
|
}
|
]
|
}
|
]);
|
|
// 模拟数据
|
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(() => {
|
getList();
|
});
|
|
// 查询数据
|
const handleQuery = () => {
|
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;
|
tableLoading.value = false;
|
}, 500);
|
};
|
|
// 分页处理
|
const pagination = (obj) => {
|
page.value.current = obj.page;
|
page.value.size = obj.limit;
|
handleQuery();
|
};
|
|
// 选择变化处理
|
const handleSelectionChange = (selection) => {
|
selectedIds.value = selection.map(item => item.id);
|
};
|
|
// 打开表单
|
const openForm = (type, row) => {
|
dialogType.value = type;
|
dialogVisible.value = true;
|
|
if (type === "add") {
|
dialogTitle.value = "添加RPA";
|
form.value = {
|
id: "",
|
programName: "",
|
status: "stopped",
|
description: "",
|
createTime: "",
|
};
|
} else {
|
dialogTitle.value = "编辑RPA";
|
form.value = { ...row };
|
}
|
};
|
|
// 提交表单
|
const submitForm = async () => {
|
if (!formRef.value) return;
|
|
try {
|
await formRef.value.validate();
|
|
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添加成功");
|
} else {
|
// 编辑RPA
|
const index = mockData.findIndex(item => item.id === form.value.id);
|
if (index !== -1) {
|
mockData[index] = { ...form.value };
|
ElMessage.success("RPA更新成功");
|
}
|
}
|
|
dialogVisible.value = false;
|
getList();
|
} 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 (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(() => {
|
// 用户取消
|
});
|
};
|
</script>
|
|
<style scoped></style>
|
