developers
/
vue-fastapi-admin
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

vue2转vue3

master
si@aidatagov.com 2 weeks ago
parent
2b5911c988
commit
02615b0a12
1 changed files with 349 additions and 42 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 389
      vue-fastapi-frontend/src/views/meta/metatask/index.vue

389
vue-fastapi-frontend/src/views/meta/metatask/index.vue
View File

@ -69,7 +69,7 @@
style="width: 240px"
>
<el-option
v-for="dict in dict.type.meta_task_type"
v-for="dict in meta_task_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
@ -237,9 +237,9 @@
:show-overflow-tooltip="true"
width="180"
>
<template slot-scope="scope">
<template #default="scope">
<dict-tag
:options="dict.type.meta_task_type"
:options="meta_task_type"
:value="scope.row.metataskType"
/>
</template>
@ -252,8 +252,9 @@
v-if="columns[3].visible"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
{{ getListNameById(scope.row.dbRCode) }}
<template #default="scope">
{{ getListNameById(scope.row.dbRCode) }}
</template>
</el-table-column>
@ -266,9 +267,9 @@
v-if="columns[4].visible"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<dict-tag
:options="dict.type.meta_task_status"
<template #default="scope">
<dict-tag
:options="meta_task_status"
:value="scope.row.status"
/>
</template>
@ -280,7 +281,7 @@
v-if="columns[5].visible"
width="100"
>
<template slot-scope="scope">
<template #default="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
@ -291,7 +292,7 @@
v-if="columns[6].visible"
width="100"
>
<template slot-scope="scope">
<template #default="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
@ -302,7 +303,7 @@
v-if="columns[7].visible"
width="100"
>
<template slot-scope="scope">
<template #default="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
@ -339,7 +340,9 @@
width="160"
class-name="small-padding fixed-width"
>
<template slot-scope="scope" v-if="scope.row.metataskId !== 1">
<template #default="scope">
<el-button
size="mini"
type="text"
@ -366,7 +369,7 @@
<el-button size="mini" type="text" icon="el-icon-d-arrow-right"
>更多</el-button
>
<el-dropdown-menu slot="dropdown">
<el-dropdown-menu>
<el-dropdown-item
command="handleUp"
icon="el-icon-circle-check"
@ -410,14 +413,14 @@
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</el-row>
<el-dialog :visible.sync="open" width="600px" append-to-body>
<el-dialog v-model="open" width="600px" append-to-body>
<div slot="title">
<el-cascader
v-model="form.metataskType"
@ -448,7 +451,7 @@
style="width: 80%"
>
<el-option
v-for="dict in dict.type.meta_task_acq"
v-for="dict in meta_task_acq"
:key="dict.value"
:label="dict.label"
:value="dict.value"
@ -501,26 +504,7 @@
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>
<el-col :span="24">
<el-form-item label="采集目标" prop="acTarget">
<el-select
v-model="form.acTarget"
placeholder="请选择采集目标"
maxlength="30"
multiple
style="width: 80%"
>
<el-option
v-for="dict in dict.type.meta_task_at"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row> -->
<el-row>
<el-col :span="24">
<el-form-item label="备注">
@ -566,8 +550,8 @@
margin-right: 8px; /* 图标与文本之间的间距 */
}
</style>
<script>
import {
<!-- <script> -->
<!-- import {
listmetatask,
getmetatask,
delmetatask,
@ -579,7 +563,8 @@ import {
dsmetatask
} from "@/api/meta/metatask";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import runDialog from "./runDialog";
import dsDialog from "./dsDialog";
import logDialog from "./logsDialog";
@ -587,7 +572,7 @@ import logDialog from "./logsDialog";
export default {
name: "User",
dicts: ["meta_task_type", "meta_task_acq", "meta_task_status", "meta_task_at"],
components: { runDialog,dsDialog,logDialog },
components: { Treeselect,runDialog,dsDialog,logDialog },
data() {
return {
// 默认激活的标签页
@ -1008,4 +993,326 @@ this.$refs.dsdialog.show(row.dsIds);
},
},
};
</script> -->
<script setup name="MetaTask">
import { ref, reactive, onMounted, watch } from "vue";
import { listmetatask, getmetatask, delmetatask, addmetatask, updatemetatask, downOrUpmetatask, datasourcetree, datasourceall } from "@/api/meta/metatask";
import runDialog from "./runDialog";
import dsDialog from "./dsDialog";
import logDialog from "./logsDialog";
const { proxy } = getCurrentInstance();
const { meta_task_type, meta_task_acq, meta_task_status,meta_task_at } = proxy.useDict("meta_task_type", "meta_task_acq", "meta_task_status", "meta_task_at");
// Component setup
const activeTab = ref("dataSource");
const loading = ref(true);
const ids = ref([]);
const dsIds = ref([]);
const single = ref(true);
const singleOne = ref(true); // Online, Edit, Delete
const singleTwo = ref(true); // Offline, Logs, Scheduling
const multiple = ref(true);
const showSearch = ref(true);
const total = ref(0);
const userList = ref(null);
const title = ref("");
const warningGroupList = ref(undefined);
const environmentList = ref(undefined);
const workerGroupList = ref(undefined);
const defindName = ref("");
const dbResourceOptions = ref(undefined);
const dbRCodeList = ref(undefined);
const dbSCodeList = ref([
{ value: "scheam", label: "scheam" },
{ value: "scheam2", label: "scheam2" }
]);
const metataskTypeOptions = ref([
{ value: "0", label: "元数据采集", children: [{ value: "00", label: "表字段" }, { value: "01", label: "存储过程" }] },
{ value: "1", label: "元数据加工" }
]);
const open = ref(false);
const dbResoursName = ref(undefined);
const clickNode = ref(undefined);
const dateRange = ref([]);
const postOptions = ref([]);
const form = reactive({
metataskId: undefined,
metataskType: "00",
metataskName: undefined,
dbRName: undefined,
dbCode: undefined,
dbName: undefined,
dbRCode: undefined,
dbSName: undefined,
dbSCode: undefined,
remark: undefined,
acquisitionType: "0",
dsId: undefined,
acTarget: "0"
});
const defaultProps = {
children: "children",
label: "name"
};
const selectRowData = ref({});
const dbResourceOldList = ref([]);
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
dbRcode: undefined,
dsId: undefined,
metataskName: undefined,
metataskType: undefined,
dbRCode: undefined
});
const columns = [
{ key: 0, label: `任务ID`, visible: true },
{ key: 1, label: `任务名称`, visible: true },
{ key: 2, label: `任务类型`, visible: true },
{ key: 3, label: `所属数据源`, visible: true },
{ key: 4, label: `状态`, visible: true },
{ key: 5, label: `调度时间`, visible: true },
{ key: 6, label: `创建时间`, visible: true },
{ key: 7, label: `更新时间`, visible: true },
{ key: 8, label: `描述`, visible: true },
{ key: 9, label: `创建人`, visible: true },
{ key: 10, label: `修改人`, visible: true }
];
const chooseRows = ref([]);
const rules = {
metataskName: [
{ required: true, message: "任务名称不能为空", trigger: "blur" },
{ min: 2, max: 20, message: "任务名称长度必须介于 2 和 20 之间", trigger: "blur" }
],
dbSCode: [{ required: true, message: "模式列表不能为空", trigger: "blur" }],
acquisitionType: [{ required: true, message: "采集方式不能为空", trigger: "blur" }],
acTarget: [{ required: true, message: "采集目标不能为空", trigger: "blur" }]
};
// Watcher for dynamic changes
watch(dbResoursName, (val) => {
if (val) {
// Filter the department tree when dbResoursName changes
$refs.tree.filter(val);
}
});
// On mounted
onMounted(() => {
getList();
getDeptTree();
});
// Methods
const handleChangeType = (value) => {
form.metataskType = value[value.length - 1];
if (form.metataskType === '00') form.acTarget = '0';
else if (form.metataskType === '01') form.acTarget = '1';
};
const getList = async () => {
loading.value = true;
const response = await listmetatask(proxy.addDateRange(queryParams, dateRange));
userList.value = response.rows;
total.value = response.total;
loading.value = false;
};
const getDeptTree = async () => {
const response = await datasourceall();
warningGroupList.value = response.data.alertGroups;
environmentList.value = response.data.environment;
workerGroupList.value = response.data.workerGroup;
const treeResponse = await datasourcetree();
if (treeResponse.success && treeResponse.rows.length > 0) {
dbResourceOldList.value = treeResponse.rows;
const childrenList = dbResourceOldList.value.map(element => ({ ...element, parentId: "100" }));
dbResourceOptions.value = [{ id: 100, name: "数据源", parentId: 0, children: childrenList }];
}
};
const getListNameById = async (id) => {
const item = dbResourceOldList.find(item => item.id === id);
return item ? item.name : '';
};
const filterNode = (value, data) => {
if (!value) return true;
return data.name.indexOf(value) !== -1;
};
const handleNodeClick = (data) => {
clickNode.value = data;
queryParams.dbRCode = data.id;
handleQuery();
};
const cancel = () => {
open.value = false;
reset();
};
const reset = () => {
Object.assign(form, {
metataskId: undefined,
metataskType: "00",
metataskName: undefined,
dbRName: undefined,
dbCode: undefined,
dbName: undefined,
dbRCode: clickNode.value?.id,
dbSName: undefined,
dbSCode: undefined,
remark: undefined,
acquisitionType: "0",
dsId: undefined,
acTarget: "0"
});
$refs.form.reset();
};
const getIconClass = (data) => {
if (data.parentId === '0') return 'el-icon-files'; // Folder icon
if (data.parentId === '100') return 'el-icon-coin'; // File icon
return ''; // Default icon
};
const handleQuery = () => {
queryParams.pageNum = 1;
getList();
};
const resetQuery = () => {
dateRange.value = [];
$refs.queryForm.reset();
queryParams.dbRCode = clickNode.value?.id;
$refs.tree.setCurrentKey(null);
handleQuery();
};
const handleSelectionChange = (selection) => {
selectRowData.value = selection[0];
chooseRows.value = selection;
ids.value = selection.map((item) => item.metataskId);
dsIds.value = selection.map((item) => item.dsIds);
singleOne.value = selection.length !== 1 || selectRowData.value.status === "ONLINE";
singleTwo.value = selection.length !== 1 || selectRowData.value.status === "OFFLINE";
single.value = selection.length !== 1;
multiple.value = selection.length === 0;
};
const handleCommand = (command, row) => {
switch (command) {
case "handleUp":
handleUp(row);
break;
case "handleDown":
handleDown(row);
break;
case "handleDS":
handleDS(row);
break;
case "handleRun":
handleRun(row);
break;
case "handleLog":
handleLog(row);
break;
default:
break;
}
};
const handleAdd = () => {
if (!clickNode.value) {
$message.warning("请选择数据源节点!");
return;
}
reset();
open.value = true;
};
const handleUpdate = async (row) => {
reset();
const metataskId = row.metataskId || ids.value;
const response = await getmetatask(metataskId);
Object.assign(form, response.data);
open.value = true;
};
const handleUp = async (row) => {
const metataskIds = String(row.metataskId || ids.value);
await $modal.confirm(`是否确认上线任务编号为"${metataskIds}"的数据项？`);
await downOrUpmetatask(metataskIds, "ONLINE");
getList();
$modal.msgSuccess("上线成功");
};
const handleDown = async (row) => {
const metataskIds = String(row.metataskId || ids.value);
await $modal.confirm(`是否确认下线任务编号为"${metataskIds}"的数据项？`);
await downOrUpmetatask(metataskIds, "OFFLINE");
getList();
$modal.msgSuccess("下线成功");
};
const handleDS = (row) => {
$refs.dsdialog.show(row.dsIds);
};
const handleRun = (row) => {
$refs.rundialog.show(row.dsIds);
};
const handleLog = () => {
defindName.value = `${selectRowData.value.metataskName} - ${selectRowData.value.dsTypes === "0" ? "表字段采集" : "存储过程采集"}`;
$refs.logdialog.show(defindName.value);
};
const submitForm = async () => {
$refs.form.validate(async (valid) => {
if (valid) {
const submitForm = { ...form };
submitForm.dbCode = clickNode.value.type;
submitForm.dbRName = clickNode.value.name;
if (form.metataskId !== undefined) {
await updatemetatask(submitForm);
$modal.msgSuccess("修改成功");
open.value = false;
getList();
} else {
await addmetatask(submitForm);
$modal.msgSuccess("新增成功");
open.value = false;
getList();
}
}
});
};
const handleDelete = async (row) => {
let isDelete = true;
if (row.status === 'ONLINE') {
$modal.msgWarning("请选择下线数据进行删除");
isDelete = false;
}
if (chooseRows.value.length > 0) {
chooseRows.value.forEach(b => {
if (b.status === 'ONLINE') {
$modal.msgWarning("请选择下线数据进行删除");
isDelete = false;
}
});
}
if (isDelete) {
const metataskIds = row.metataskId || ids.value;
const dsidsVo = row.dsIds || dsIds.value;
await $modal.confirm(`是否确认删除任务编号为"${metataskIds}"的数据项？`);
await delmetatask(metataskIds, dsidsVo);
getList();
$modal.msgSuccess("删除成功");
}
};
</script>

Write Preview
Loading…
Cancel
Save