rpa
/
eladmin-web

<template>
  <div class="app-container">
    <div style="margin-bottom:10px">
      <el-button type="success" @click="addBtn">新增</el-button>
    </div>
    <!--搜索-->
    <el-form class="mt_15" ref="form" inline size="small">
      <el-form-item label="应用名称">
        <el-input v-model.trim="searchParm.name" clearable placeholder="应用名称"></el-input>
      </el-form-item>
      <el-form-item label="应用id">
        <el-input v-model.trim="searchParm.robotUuid" clearable placeholder="应用id"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="goSearch">搜索</el-button>
        <el-button type="warning" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <!--表格渲染-->
    <el-table
      ref="table"
      border
      size="small"
      :data="list"
      :header-cell-style="{textAlign:'center'}"
      :cell-style="{textAlign:'center'}"
    >
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="应用名称" prop="name" />
      <el-table-column label="应用id" prop="robotUuid" />
      <el-table-column label="任务名称" prop="taskName" />
      <el-table-column label="方法名称" prop="methodName" />
      <el-table-column label="accessKeyId" prop="accessKeyId" />
      <el-table-column label="accessKeySecret" prop="accessKeySecret" />
      <el-table-column label="备注" prop="remark" />
      <el-table-column label="创建时间" prop="createdAt" />
      <el-table-column label="修改时间" prop="updatedAt" />
      <el-table-column label="操作" width="220">
        <template slot-scope="scope">
          <el-button type="info" @click="getBtnById(scope.row.id)">查看</el-button>
          <el-button type="warning" @click="editById(scope.row)">修改</el-button>
          <el-button type="danger" @click="delById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="mt_15">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParm.page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="searchParm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!--新增弹窗-->
    <el-dialog :visible.sync="dialogAddVisible" :title="dialogAddTitle" center width="45%">
      <div class="dialog-content">
        <el-form ref="addParm" size="small" :model="addParm" :rules="rules" label-width="150px">
          <el-form-item label="应用名称" prop="name">
            <el-input v-model.trim="addParm.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="应用ID" prop="robotUuid">
            <el-input v-model.trim="addParm.robotUuid" clearable></el-input>
          </el-form-item>
          <el-form-item label="任务名称" prop="taskName">
            <el-select v-model.trim="addParm.taskName" placeholder="请选择">
              <el-option
                v-for="item in taskList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="accessKeyId" prop="accessKeyId">
            <el-input v-model.trim="addParm.accessKeyId" clearable></el-input>
          </el-form-item>
          <el-form-item label="accessKeySecret" prop="accessKeySecret">
            <el-input v-model.trim="addParm.accessKeySecret" clearable></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model.trim="addParm.remark" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button type="info" @click="sureAddCancle('addParm')">取消</el-button>
        <el-button type="primary" @click="sureAdd('addParm')">确认</el-button>
      </span>
    </el-dialog>

    <!--修改弹窗-->
    <el-dialog :visible.sync="dialogEditVisible" :title="dialogEditTitle" center width="45%">
      <div class="dialog-content">
        <el-form ref="editParm" size="small" :model="editParm" :rules="rules" label-width="150px">
          <el-form-item label="应用名称" prop="name">
            <el-input v-model.trim="editParm.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="应用ID" prop="robotUuid">
            <el-input v-model.trim="editParm.robotUuid" clearable></el-input>
          </el-form-item>
          <el-form-item label="任务名称" prop="taskName">
            <el-select v-model.trim="editParm.taskName" placeholder="请选择">
                <el-option 
                v-for="item in taskList"
                :key="item.id"
                :label="item.name"
                :value="item.name">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="accessKeyId" prop="accessKeyId">
            <el-input v-model.trim="editParm.accessKeyId" clearable></el-input>
          </el-form-item>
          <el-form-item label="accessKeySecret" prop="accessKeySecret">
            <el-input v-model.trim="editParm.accessKeySecret" clearable></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model.trim="editParm.remark" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button type="info" @click="sureEditCancle('editParm')">取消</el-button>
        <el-button type="primary" @click="sureEdit('editParm')">确认</el-button>
      </span>
    </el-dialog>

    <!--详情弹窗-->
    <el-dialog :visible.sync="dialogDetailVisible" :title="dialogDetailTitle" center width="45%">
      <div class="dialog-content">
        <el-form ref="form" size="small" label-width="130px">
          <el-form-item label="应用名称" prop="name">
            <el-input v-model.trim="detailParm.name" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="应用ID" prop="robotUuid">
            <el-input v-model.trim="detailParm.robotUuid" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="任务名称" prop="taskName">
            <el-input v-model.trim="detailParm.taskName" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="方法名称" prop="methodName">
            <el-input v-model.trim="detailParm.methodName" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="accessKeyId" prop="accessKeyId">
            <el-input v-model.trim="detailParm.accessKeyId" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="accessKeySecret" prop="accessKeySecret">
            <el-input v-model.trim="detailParm.accessKeySecret" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model.trim="detailParm.remark" :disabled="true"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getList, add, delById, getById, editById } from "@/api/group/apply";
export default {
  //	数据
  data() {
    return {
      taskList: [
        {
          id: 1,
          name: "demoTask"
        },
        {
          id: 2,
          name: "clickFarmTask"
        }, {
        	id: 3,
        	name: "clickFarmSuppleMentTask"
        }
      ],
      searchParm: {
        page: 1,
        pageSize: 10,
        sort: "created_at",
        order: "desc",
        name: null,
        robotUuid: null,
        remark: null
      },
      total: 0,
      list: [],
      dialogAddVisible: false,
      dialogAddTitle: "新增",
      dialogDetailVisible: false,
      dialogDetailTitle: "详情",
      dialogEditVisible: false,
      dialogEditTitle: "修改",
      dialogImportVisible: false,
      dialogImportTitle: "导入",
      addParm: {
        id: null,
        name: null,
        robotUuid: null,
        taskName: null,
        methodName: null,
        accessKeyId: null,
        accessKeySecret: null,
        remark: null
      },
      detailParm: {
        id: null,
        name: null,
        robotUuid: null,
        taskName: null,
        methodName: null,
        accessKeyId: null,
        accessKeySecret: null,
        remark: null
      },
      editParm: {
        id: null,
        name: null,
        robotUuid: null,
        taskName: null,
        methodName: null,
        accessKeyId: null,
        accessKeySecret: null,
        remark: null
      },
      rules: {
        name: [{ required: true, message: "请输入应用名称", trigger: "blur" }],
        robotUuid: [
          { required: true, message: "请输入应用id", trigger: "blur" }
        ],
        taskName: [
          { required: true, message: "请输入任务名称", trigger: "blur" }
        ],
        methodName: [
          { required: true, message: "请输入方法名称", trigger: "blur" }
        ],
        accessKeyId: [
          { required: true, message: "请输入accessKeyId", trigger: "blur" }
        ],
        accessKeySecret: [
          { required: true, message: "请输入accessKeySecret", trigger: "blur" }
        ],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }]
      }
    };
  },
  // 调用
  created() {
    this.goSearch();
  },
  //方法
  methods: {
    //重置
    resetForm() {
      this.searchParm.name = null;
      this.searchParm.robotUuid = null;
      this.searchParm.remark = null;
      this.goSearch();
    },
    //	查询
    goSearch() {
      this.searchParm.page = 1;
      this.getDataList();
    },
    // 新增
    addBtn() {
      this.addParm = {
        id: null,
        name: null,
        robotUuid: null,
        taskName: null,
        methodName: null,
        accessKeyId: null,
        accessKeySecret: null,
        remark: null
      };
      this.dialogAddTitle = "新增";
      this.dialogAddVisible = true;
      this.$refs.addParm.clearValidate();
    },
    //	根据id删除
    delById(id) {
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delById({ id })
            .then(res => {
              if (res.code == 200) {
                this.$message.success("删除成功!");
                this.getDataList();
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message.info("取消删除");
        });
    },
    //	修改
    editById(data) {
    	this.$refs.editParm.clearValidate();
      getById({ id: data.id })
        .then(res => {
          if (res.code == 200) {
            this.editParm.id = res.data.id;
            this.editParm.name = res.data.name;
            this.editParm.robotUuid = res.data.robotUuid;
            this.editParm.taskName = res.data.taskName;
            this.editParm.accessKeyId = res.data.accessKeyId;
            this.editParm.accessKeySecret = res.data.accessKeySecret;
            this.editParm.remark = res.data.remark;
            this.dialogEditVisible = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 确认修改
    sureEdit(editParm) {
      editById(this.editParm)
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            this.dialogEditVisible = false;
            this.$message.success("修改成功!");
            this.getDataList();
          } else if (res.code == -1) {
            this.$message.warning(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    sureEdit(editParm) {
    	this.dialogEditVisible=flase
			this.$refs.editParm.clearValidate();
    },
    // 确认新增
    sureAdd(addParm) {
      add(this.addParm)
        .then(res => {
          if (res.code == 200) {
            this.dialogAddVisible = false;
            this.$message.success("新增成功!");
            this.getDataList();
          } else if (res.code == -1) {
            this.$message.warning(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    sureAdd(addParm) {
    	this.dialogAddVisible=flase
			this.$refs.addParm.clearValidate();
    },
    // 查看根据id
    getBtnById(id) {
      getById({ id })
        .then(res => {
          if (res.code == 200) {
            this.detailParm.id = res.data.id;
            this.detailParm.name = res.data.name;
            this.detailParm.robotUuid = res.data.robotUuid;
            this.detailParm.taskName = res.data.taskName;
            this.detailParm.methodName = res.data.methodName;
            this.detailParm.accessKeyId = res.data.accessKeyId;
            this.detailParm.accessKeySecret = res.data.accessKeySecret;
            this.detailParm.remark = res.data.remark;
            this.dialogDetailVisible = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 分页获取表格数据
    getDataList() {
      getList(this.searchParm)
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            console.log(res);
            this.list = res.data.list;
            this.total = res.data.total;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //	分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchParm.pageSize = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.searchParm.page = val;
      this.getDataList();
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>