gaoluyang
6 天以前 71a9eef518f2f2f1a1eb2fb90f2eb8ab7b155bc8
src/views/collaborativeApproval/rpaManagement/index.vue
@@ -3,84 +3,93 @@
    <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 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>
@@ -88,268 +97,304 @@
</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";
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) => {
            proxy.$modal.msgSuccess("删除成功");
            getList();
         })
   })
   .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);
    }
  };
  // 开始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>