确认按钮在左边

zhangwencui

6 天以前 5333935ae59999c47653122a669f4326f0173c1c

 src/views/collaborativeApproval/rpaManagement/index.vue

@@ -3,33 +3,42 @@
    <div class="search_form">
      <div>
        <span class="search_title">程序名：</span>
        <el-input
          v-model="searchForm.programName"
        <el-input v-model="searchForm.programName"
          style="width: 240px"
          placeholder="请输入程序名搜索"
          @change="handleQuery"
          clearable
          :prefix-icon="Search"
        />
                  :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"
      <PIMTable rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
@@ -37,51 +46,50 @@
        @selection-change="handleSelectionChange"
        :tableLoading="tableLoading"
        @pagination="pagination"
        :total="page.total"
      ></PIMTable>
                :total="page.total"></PIMTable>
    </div>

    <!-- RPA表单弹窗 -->
    <el-dialog
      v-model="dialogVisible"
    <el-dialog v-model="dialogVisible"
      :title="dialogTitle"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="formRef"
               :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"
               label-width="100px">
        <el-form-item label="程序名"
                      prop="programName">
          <el-input v-model="form.programName"
            placeholder="请输入程序名"
            clearable
          />
                    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"
        <el-form-item label="描述"
                      prop="description">
          <el-input v-model="form.description"
            type="textarea"
            :rows="3"
            placeholder="请输入RPA程序描述"
            clearable
          />
                    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>
@@ -93,7 +101,13 @@
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";
  import {
    listRpa,
    addRpa,
    updateRpa,
    delRpa,
    delRpaBatch,
  } from "@/api/collaborativeApproval/rpaManagement.js";
// 响应式数据
const data = reactive({
  searchForm: {
@@ -103,7 +117,7 @@
  form: {
    programName: "",
    status: "",
    description: ""
      description: "",
  },
  dialogVisible: false,
  dialogTitle: "",
@@ -117,7 +131,17 @@
  tableData: [],
});

const { searchForm, form, dialogVisible, dialogTitle, dialogType, selectedIds, tableLoading, page, tableData } = toRefs(data);
  const {
    searchForm,
    form,
    dialogVisible,
    dialogTitle,
    dialogType,
    selectedIds,
    tableLoading,
    page,
    tableData,
  } = toRefs(data);

// 表单引用
const formRef = ref();
@@ -126,12 +150,8 @@

// 表单验证规则
const rules = {
  programName: [
    { required: true, message: "请输入程序名", trigger: "blur" }
  ],
  status: [
    { required: true, message: "请选择执行状态", trigger: "change" }
  ]
    programName: [{ required: true, message: "请输入程序名", trigger: "blur" }],
    status: [{ required: true, message: "请选择执行状态", trigger: "change" }],
};

// 表格列配置
@@ -146,22 +166,22 @@
    prop: "status",
    dataType: "tag",
    // width: 120,
    formatData: (params) => {
      formatData: params => {
      const statusMap = {
        running: "运行中",
        stopped: "已停止",
        error: "异常"
          error: "异常",
      };
      return statusMap[params] || params;
    },
    formatType: (params) => {
      formatType: params => {
      const typeMap = {
        running: "success",
        stopped: "info",
        error: "danger"
          error: "danger",
      };
      return typeMap[params] || "info";
    }
      },
  },
  {
    label: "描述",
@@ -184,9 +204,9 @@
      {
        name: "编辑",
        type: "text",
        clickFun: (row) => {
          clickFun: row => {
          openForm("edit", row);
        }
          },
      },
      // {
      //   name: "开始",
@@ -204,10 +224,9 @@
      //   },
      //   disabled: (row) => row.status === 'stopped'
      // }
    ]
  }
      ],
    },
]);


// 生命周期
onMounted(() => {
@@ -225,22 +244,23 @@
  listRpa({...page.value, ...searchForm.value})
  .then(res => {
    tableLoading.value = false;
    tableData.value = res.data.records
        tableData.value = res.data.records;
    page.total = res.data.total;
  }).catch(err => {
    tableLoading.value = false;
  })
      .catch(err => {
        tableLoading.value = false;
      });
};

// 分页处理
const pagination = (obj) => {
  const pagination = obj => {
  page.value.current = obj.page;
  page.value.size = obj.limit;
  handleQuery();
};

// 选择变化处理
const handleSelectionChange = (selection) => {
  const handleSelectionChange = selection => {
  selectedRows.value = selection;
};

@@ -266,31 +286,35 @@

    if (dialogType.value === "add") {
      // 添加新RPA
      addRpa({...form.value}).then(res => {
        addRpa({ ...form.value })
          .then(res => {
        if(res.code == 200){
          ElMessage.success("添加成功");
            form.value = {
              (form.value = {
            programName: "",
            status: "",
            description: ""
          },
          dialogVisible.value = false;
                description: "",
              }),
                (dialogVisible.value = false);
          getList();
        }
      }).catch(err => {
        ElMessage.error(err.msg);
      })
          .catch(err => {
            ElMessage.error(err.msg);
          });
    } else {
      // 编辑RPA
      updateRpa({...form.value}).then(res => {
        updateRpa({ ...form.value })
          .then(res => {
        if(res.code == 200){
          ElMessage.success("更新成功");
          dialogVisible.value = false;
          getList();
        }
      }).catch(err => {
        ElMessage.error(err.msg);
      })
          .catch(err => {
            ElMessage.error(err.msg);
          });
    }
  } catch (error) {
    console.error("表单验证失败:", error);
@@ -298,31 +322,35 @@
};

// 开始RPA
const handleStart = (row) => {
  const handleStart = row => {
  ElMessageBox.confirm(`确定要启动RPA程序"${row.programName}"吗？`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    })
      .then(() => {
    row.status = "running";
    ElMessage.success("RPA启动成功");
    getList();
  }).catch(() => {
      })
      .catch(() => {
    // 用户取消
  });
};

// 停止RPA
const handleStop = (row) => {
  const handleStop = row => {
  ElMessageBox.confirm(`确定要停止RPA程序"${row.programName}"吗？`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    })
      .then(() => {
    row.status = "stopped";
    ElMessage.success("RPA停止成功");
    getList();
  }).catch(() => {
      })
      .catch(() => {
    // 用户取消
  });
};
@@ -331,7 +359,7 @@
const handleDelete = () => {
  let ids = [];
   if (selectedRows.value.length > 0) {
      ids = selectedRows.value.map((item) => item.id);
      ids = selectedRows.value.map(item => item.id);
   } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
@@ -342,14 +370,16 @@
      type: "warning",
   })
   .then(() => {
      delRpa(ids).then((res) => {
        delRpa(ids)
          .then(res => {
            if(res.code == 200){
               ElMessage.success("删除成功");
               getList();
            }
         }).catch(err => {
            ElMessage.error(err.msg);
         })
          .catch(err => {
            ElMessage.error(err.msg);
          });
   })
   .catch(() => {
      proxy.$modal.msg("已取消");
@@ -357,10 +387,14 @@
};

// 导出功能
const { proxy } = getCurrentInstance()
  const { proxy } = getCurrentInstance();
const handleExport = () => {
  proxy.download('/rpaProcessAutomation/export', { ...searchForm.value }, 'RPA管理.xlsx')
}
    proxy.download(
      "/rpaProcessAutomation/export",
      { ...searchForm.value },
      "RPA管理.xlsx"
    );
  };
</script>

<style scoped></style>