vue2转vue3

vue-fastapi-frontend/src/views/meta/metatask/index.vue

@@ -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,7 +252,8 @@
             v-if="columns[3].visible"
             :show-overflow-tooltip="true"
           >
-          <template slot-scope="scope">
+     
+            <template #default="scope">
               {{ getListNameById(scope.row.dbRCode) }}
 
             </template>
@@ -266,9 +267,9 @@
             v-if="columns[4].visible"
             :show-overflow-tooltip="true"
           >
-            <template slot-scope="scope">
+          <template #default="scope">
                           <dict-tag
-                :options="dict.type.meta_task_status"
+                :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"
+          v-model:page="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize"
+          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>
+<!-- <script> -->
-import {
+<!-- 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>
+