element-ui通过点击的按钮向表格中添加对应的内容

点击新建/编辑任务跳转到一个页面，在页面中对动作内容进行增删改。

要实现的功能如图

点击新建时，跳转到的页面为

 点击编辑时，携带点击项的id跳到编辑页面，显示该任务id里面已经包含的动作

<!-- 添加动作 -->
        <div class="add">
          <div>
            添加动作
            <el-tooltip
              effect="light"
              content="点击右侧按钮添加动作"
              placement="right"
            >
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
          <div class="button">
            <el-button @click="restart()">+重启动作</el-button>
            <el-button @click="uninstall()">+卸载动作</el-button>
            <el-button @click="install()">+安装动作</el-button>
            <el-button @click="reported()">+上报动作</el-button>
          </div>
        </div>
        <!-- 表格 -->
        <div class="table">
          <el-scrollbar>
            <el-table
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
              >
              </el-table-column>

              <el-table-column
                prop="actionType"
                label="类型"
                width="60"
                align="center"
              >
                <template v-slot="scope">
                  <span v-if="scope.row.actionContent.id === 'restart'"
                    >重启</span
                  >
                  <span v-if="scope.row.actionContent.id === 'uninstall'"
                    >卸载</span
                  >
                  <span v-if="scope.row.actionContent.id === 'install'"
                    >安装</span
                  >
                  <span v-if="scope.row.actionContent.id === 'reported'"
                    >上报</span
                  >
                </template>
              </el-table-column>
              <el-table-column prop="actionContent" label="动作" align="left">
                <template v-slot="scope">
                  <el-select
                    v-if="scope.row.actionContent.id === 'uninstall'"
                    v-model="scope.row.actionContent.packageName"
                    placeholder="请选择"
                    style="width: 194px"
                  >
                    <el-option
                      v-for="item in packageList"
                      :key="item.id"
                      :label="item.packageName"
                      :value="item.packageName"
                    />
                  </el-select>
                  <span v-if="scope.row.actionContent.id === 'restart'"
                    >重启设备</span
                  >
                  <el-select
                    v-if="scope.row.actionContent.id === 'install'"
                    v-model="scope.row.actionContent.downloadUrl"
                    placeholder="请选择"
                    style="width: 194px"
                  >
                    <el-option
                      v-for="item in appList"
                      :key="item.id"
                      :label="item.appName"
                      :value="item.downloadUrl"
                    />
                  </el-select>
                  <div v-if="scope.row.actionContent.id === 'reported'">
                    <span>通过</span>
                    <el-select
                      v-model="scope.row.actionContent.packageName"
                      placeholder="请选择"
                      style="width: 194px"
                    >
                      <el-option
                        v-for="item in packageList"
                        :key="item.id"
                        :label="item.packageName"
                        :value="item.packageName"
                      />
                    </el-select>
                    <span>上报</span>
                    <el-select
                      v-model="scope.row.actionContent.deviceType"
                      placeholder="请选择"
                      collapse-tags
                      collapse-tags-tooltip
                      multiple
                      style="width: 194px"
                    >
                      <el-option
                        v-for="item in deviceTypeList"
                        :key="item.type"
                        :label="item.tname"
                        :value="item.type"
                      />
                    </el-select>
                    <span>类型到</span>
                    <el-select
                      v-model="scope.row.actionContent.orgCode"
                      placeholder="请选择"
                      style="width: 194px"
                    >
                      <el-option
                        v-for="item in orgList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="120">
                <template #default="scope">
                  <el-button link @click="handleDelete(scope.row, scope.$index)"
                    ><el-icon :size="15"> <Delete /> </el-icon
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-scrollbar>
        </div>

 <script setup>   
import { useRoute, useRouter } from "vue-router";

let route = useRoute();
let router = useRouter(); 

const tableData = ref([]);

const pageName = ref("");
const id = ref("");
onMounted(() => {
  getPageName();
  getList();
});
function getPageName() {
  if (route.query.name == "新建") {
    pageName.value = "新建";
    id.value = "undefined";
  } else {
    pageName.value = "编辑";
    id.value = route.query.id;
  }
}

// 根据id获取任务详情
function getList() {
  if (pageName.value == "编辑") {
    let data = {
      id: id.value,
    };
    taskResult(data).then((res) => {
      taskName.value = res.data.taskName;
      tableData.value = res.data.opsActions.map((item) => {
        item.actionContent = JSON.parse(item.actionContent);
        if (item.actionContent.id == "reported") {
          let datas = {
            page: 1,
            pageSize: 100,
          };
          bagSearch(datas).then((res) => {
            packageList.value = res.data.items;
          });
          // 获取所有设备类型
          getType().then((res) => {
            deviceTypeList.value = res.data;
          });
          // 获取所有机构
          getOrg({ param: "" }).then((res) => {
            orgList.value = res.data;
          });
        }
        if (item.actionContent.id == "install") {
          appLibrarySearch({ page: 1, pageSize: 100 }).then((res) => {
            appList.value = res.data.items;
          });
        }
        if (item.actionContent.id == "uninstall") {
          let datas = {
            page: 1,
            pageSize: 100,
          };
          bagSearch(datas).then((res) => {
            packageList.value = res.data.items;
          });
        }
        return item;
      });
    });
  } else return;
}


// 点击重启

function restart() {

  tableData.value.push({

    actionType: "重启",
    //以下所有actionContent里面包含的内容，都是需要传给后端的。前端获取用户选择的select框的内容，存到tableData里，传给后端
    actionContent: { id: "restart" },

  });

}

// 点击安装

const appName = ref("");

const appList = ref("");

function install() {

  // 获取所有的app

  appLibrarySearch({ page: 1, pageSize: 100 }).then((res) => {

    appList.value = res.data.items;

  });

  tableData.value.push({

    actionType: "安装",

    actionContent: { id: "install", downloadUrl: "" },

  });

}

// 点击卸载

const packageName = ref("");

const packageList = ref("");



function uninstall() {

  let datas = {

    page: 1,

    pageSize: 100,

  };

  bagSearch(datas).then((res) => {

    packageList.value = res.data.items;

  });

  tableData.value.push({

    actionType: "卸载",

    actionContent: { id: "uninstall", packageName: "" },

  });

}

// 点击上报

const deviceTypeList = ref("");

const deviceName = ref("");

const orgList = ref("");

const orgName = ref("");

const reportPackage = ref("");

function reported() {

  // 获取所有的packagename

  let datas = {

    page: 1,

    pageSize: 100,

  };

  bagSearch(datas).then((res) => {

    packageList.value = res.data.items;

  });

  // 获取所有设备类型

  getType().then((res) => {

    deviceTypeList.value = res.data;

  });

  // 获取所有机构

  getOrg({ param: "" }).then((res) => {

    orgList.value = res.data;

  });



  tableData.value.push({

    actionType: "上报",

    actionContent: {

      id: "reported",

      deviceType: "",

      orgCode: "",

      packageName: reportPackage.value,

    },

  });

}

</script>