「新規/タスクの編集」をクリックすると、アクションの内容を追加、削除、または変更できるページにジャンプします。
実現したい機能を図に示す
「新規」をクリックすると、ジャンプするページは次のとおりです。
編集をクリックすると、クリックした項目の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>