diff --git a/vue-fastapi-frontend/src/views/meta/metatask/dsDialog.vue b/vue-fastapi-frontend/src/views/meta/metatask/dsDialog.vue
index 420a10b..f0b63a9 100644
--- a/vue-fastapi-frontend/src/views/meta/metatask/dsDialog.vue
+++ b/vue-fastapi-frontend/src/views/meta/metatask/dsDialog.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-dialog title="调度" :visible.sync="visible" width="700px" top="5vh" append-to-body>
-    <el-form ref="form" :model="form" label-width="120px" style="margin: 10px;">
+  <el-dialog title="调度" v-model="visible" width="700px" top="5vh" append-to-body>
+    <el-form ref="formDS" :model="form" label-width="120px" style="margin: 10px;">
       <!-- 日期范围 -->
       <el-row :gutter="20">
         <el-col :span="24">
@@ -95,66 +95,104 @@
     </el-form>
 
     <!-- Footer 按钮 -->
-    <div slot="footer" class="dialog-footer" style="text-align: right;">
-      <el-button @click="visible = false">取 消</el-button>
-      <el-button type="primary" @click="handleds">确 定</el-button>
-    </div>
 
+    <template #footer>
+            <div class="dialog-footer">
+              <el-button type="primary" @click="handleds">确 定</el-button>
+              <el-button @click="visible = false">取 消</el-button>
+            </div>
+         </template>
     <!-- Cron表达式生成器 -->
-    <el-dialog title="Cron表达式生成器" :visible.sync="openCron" append-to-body destroy-on-close class="scrollbar">
-      <crontab @hide="openCron=false" @fill="crontabFill" :expression="expression"></crontab>
-    </el-dialog>
+
+    <el-dialog title="Cron表达式生成器" v-model="openCron" append-to-body destroy-on-close>
+       <crontab ref="crontabRef" @hide="openCron=false" @fill="crontabFill" :expression="expression"></crontab>
+     </el-dialog>
   </el-dialog>
 </template>
 
 <script>
+import { ref, reactive, watch } from "vue";
 import { dsmetatask } from "@/api/meta/metatask";
-import Crontab from '@/components/Crontab';
+import Crontab from '@/components/Crontab'
 
 export default {
   components: { Crontab },
-  props: [
-    "processDefinitionCode",
-    "warningGroupList",
-    "environmentList",
-    "workerGroupList"
-  ],
-  data() {
-    return {
-      visible: false, // 弹窗显示状态
-      expression: "", // 传入的表达式
-      openCron: false, // Cron生成器弹窗状态
-      dateRange: [], // 日期范围字段
-      form: {
-        processDefinitionCode: undefined,
-        warningGroupId: undefined,
-        environmentCode: undefined,
-        workerGroup: undefined,
-        crontab: "",
-      },
-    };
+  props: {
+    processDefinitionCode: String,
+    warningGroupList: Array,
+    environmentList: Array,
+    workerGroupList: Array
   },
-  methods: {
-    show(ids) {
-      this.form.processDefinitionCode = Number(this.processDefinitionCode[0]);
-      this.visible = true;
-    },
-    handleShowCron() {
-      this.expression = this.form.crontab;
-      this.openCron = true;
-    },
-    crontabFill(value) {
-      this.form.crontab = value;
-    },
-    handleds() {
-      dsmetatask(this.addDateRange(this.form, this.dateRange)).then((response) => {
+  setup(props) {
+    // Reactive state with `reactive` and `ref`
+    const visible = ref(false);
+    const openCron = ref(false);
+    const expression = ref("");
+    const dateRange = ref([]);
+    const form = reactive({
+      processDefinitionCode: undefined,
+      warningGroupId: undefined,
+      environmentCode: undefined,
+      workerGroup: undefined,
+      crontab: "",
+    });
+
+
+    // Watch for changes in props to update internal state if necessary
+    watch(() => props.processDefinitionCode, (newVal) => {
+      form.processDefinitionCode = Number(newVal[0]);
+    });
+
+    // Methods
+    const show = (ids) => {
+   
+      form.processDefinitionCode = Number(ids[0]);
+      visible.value = true;
+
+    };
+
+    const handleShowCron = () => {
+      expression.value = form.crontab;
+      openCron.value = true;
+    };
+
+    const crontabFill = (value) => {
+      form.crontab = value;
+
+    };
+
+    const handleds = () => {
+      dsmetatask(addDateRange(form, dateRange.value)).then((response) => {
         if (response.success) {
-          this.visible = false;
+          visible.value = false;
           this.$modal.msgSuccess("运行成功");
         }
       });
-    },
-  },
+    };
+
+    // Helper function to add the date range to the form
+    const addDateRange = (form, dateRange) => {
+      return {
+        ...form,
+        beginTime: dateRange[0],
+        endTime: dateRange[1],
+      };
+    };
+
+    // Return the state and methods to the template
+    return {
+      visible,
+      openCron,
+      expression,
+      dateRange,
+      form,
+      show,
+      handleShowCron,
+      crontabFill,
+      handleds,
+      addDateRange,
+    };
+  }
 };
 </script>
 
diff --git a/vue-fastapi-frontend/src/views/meta/metatask/index.vue b/vue-fastapi-frontend/src/views/meta/metatask/index.vue
index 6ec873c..dccf96b 100644
--- a/vue-fastapi-frontend/src/views/meta/metatask/index.vue
+++ b/vue-fastapi-frontend/src/views/meta/metatask/index.vue
@@ -12,7 +12,7 @@
                 placeholder="请输入数据源"
                 clearable
                 size="small"
-                prefix-icon="el-icon-search"
+                prefix-icon="search"
                 style="margin-bottom: 20px"
               />
             </div>
@@ -29,7 +29,7 @@
                 @node-click="handleNodeClick"
               >
               <template #default="{ node, data }">
-      <span class="custom-tree-node">
+              <span class="custom-tree-node">
         <i :class="getIconClass(data)"></i>
         <span>{{ data.name }}</span>
       </span>
@@ -58,7 +58,7 @@
               placeholder="请输入任务名称"
               clearable
               style="width: 240px"
-              @keyup.enter.native="handleQuery"
+          
             />
           </el-form-item>
           <el-form-item label="任务类型" prop="metataskType">
@@ -90,12 +90,12 @@
           <el-form-item>
             <el-button
               type="primary"
-              icon="el-icon-search"
-              size="mini"
+              icon="search"
+              
               @click="handleQuery"
               >搜索</el-button
             >
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+            <el-button icon="refresh"  @click="resetQuery"
               >重置</el-button
             >
           </el-form-item>
@@ -106,8 +106,7 @@
             <el-button
               type="primary"
               plain
-              icon="el-icon-plus"
-              size="mini"
+              icon="plus"
               @click="handleAdd"
               v-hasPermi="['meta:metatask:add']"
               >新建任务</el-button
@@ -117,8 +116,8 @@
             <el-button
               type="success"
               plain
-              icon="el-icon-edit"
-              size="mini"
+              icon="edit"
+              
               :disabled="singleOne"
               @click="handleUpdate"
               v-hasPermi="['meta:metatask:edit']"
@@ -129,8 +128,7 @@
             <el-button
               type="success"
               plain
-              icon="el-icon-top"
-              size="mini"
+              icon="top"
               :disabled="singleOne"
               @click="handleUp"
               v-hasPermi="['meta:metatask:up']"
@@ -141,8 +139,8 @@
             <el-button
               type="danger"
               plain
-              icon="el-icon-bottom"
-              size="mini"
+              icon="bottom"
+              
               :disabled="singleTwo"
               @click="handleDown"
               v-hasPermi="['meta:metatask:down']"
@@ -153,8 +151,7 @@
             <el-button
               type="success"
               plain
-              icon="el-icon-time"
-              size="mini"
+              icon="AlarmClock"
               :disabled="singleTwo"
               @click="handleDS"
               v-hasPermi="['meta:metatask:ds']"
@@ -165,8 +162,8 @@
             <el-button
               type="success"
               plain
-              icon="el-icon-video-play"
-              size="mini"
+              icon="video-play"
+              
               :disabled="singleTwo"
               @click="handleRun"
               v-hasPermi="['meta:metatask:run']"
@@ -177,8 +174,8 @@
             <el-button
               type="success"
               plain
-              icon="el-icon-edit"
-              size="mini"
+              icon="edit"
+              
               :disabled="single"
               @click="handleLog"
               v-hasPermi="['meta:metatask:log']"
@@ -189,8 +186,8 @@
             <el-button
               type="danger"
               plain
-              icon="el-icon-delete"
-              size="mini"
+              icon="delete"
+              
               :disabled="multiple"
               @click="handleDelete"
               v-hasPermi="['meta:metatask:delete']"
@@ -198,11 +195,9 @@
             >
           </el-col>
 
-          <right-toolbar
-            :showSearch.sync="showSearch"
-            @queryTable="getList"
-            :columns="columns"
-          ></right-toolbar>
+   
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+
         </el-row>
 
         <el-table
@@ -211,14 +206,6 @@
           @selection-change="handleSelectionChange"
         >
           <el-table-column type="selection" width="50" align="center" />
-          <!-- <el-table-column
-            label="任务ID"
-            align="center"
-            key="metataskId"
-            prop="metataskId"
-            v-if="columns[0].visible"
-            width="80"
-          /> -->
           <el-table-column
             label="任务名称"
             align="center"
@@ -235,7 +222,7 @@
             prop="metataskType"
             v-if="columns[2].visible"
             :show-overflow-tooltip="true"
-             width="180"
+            width="180"
           >
             <template #default="scope">
               <dict-tag
@@ -251,14 +238,11 @@
             prop="dbRCode"
             v-if="columns[3].visible"
             :show-overflow-tooltip="true"
-          >
-     
+          >    
             <template #default="scope">
               {{ getListNameById(scope.row.dbRCode) }}
-
             </template>
           </el-table-column>
-       
           <el-table-column
             label="状态"
             align="center"
@@ -337,76 +321,89 @@
           <el-table-column
             label="操作"
             align="center"
-            width="160"
+            width="200"
             class-name="small-padding fixed-width"
           >
         
-          <template #default="scope">
+          <template #default="{ row }">
+  <el-button 
+    link 
+    type="primary" 
+    :disabled="row.status === 'ONLINE'" 
+    icon="Edit" 
+    @click="handleUpdate(row)" 
+    v-hasPermi="['meta:metatask:edit']"
+  >
+    修改
+  </el-button>
+
+  <el-button 
+    link 
+    type="primary" 
+    icon="Delete" 
+    :disabled="row.status === 'ONLINE'" 
+    @click="handleDelete(row)" 
+    v-hasPermi="['meta:metatask:delete']"
+  >
+    删除
+  </el-button>
+
+  <el-dropdown 
+    link 
+    @command="(command) => handleCommand(command, row)" 
+    v-hasPermi="['system:user:resetPwd', 'meta:metatask:edit']"
+  >
+    <el-button link type="primary" icon="d-arrow-right">
+      更多
+    </el-button>
+    <el-dropdown-menu>
+      <el-dropdown-item 
+        command="handleUp"
+        icon="circle-check"
+        :disabled="row.status === 'ONLINE'" 
+        v-hasPermi="['meta:metatask:up']"
+      >
+        上线
+      </el-dropdown-item>
+      
+      <el-dropdown-item 
+        command="handleDown"
+        icon="circle-check"
+        :disabled="row.status === 'OFFLINE'" 
+        v-hasPermi="['meta:metatask:down']"
+      >
+        下线
+      </el-dropdown-item>
+
+      <el-dropdown-item 
+        command="handleDS"
+        icon="circle-check"
+        :disabled="row.status === 'OFFLINE'" 
+        v-hasPermi="['meta:metatask:ds']"
+      >
+        调度
+      </el-dropdown-item>
+
+      <el-dropdown-item 
+        command="handleRun"
+        icon="circle-check"
+        :disabled="row.status === 'OFFLINE'" 
+        v-hasPermi="['meta:metatask:run']"
+      >
+        运行
+      </el-dropdown-item>
+
+      <el-dropdown-item 
+        command="handleLog"
+        icon="circle-check"
+        v-hasPermi="['meta:metatask:log']"
+      >
+        日志
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
 
-              <el-button
-                size="mini"
-                type="text"
-                :disabled="scope.row.status === 'ONLINE'"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-                v-hasPermi="['meta:metatask:edit']"
-                >修改</el-button
-              >
-              <el-button
-                size="mini"
-                type="text"
-                :disabled="scope.row.status === 'ONLINE'"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-                v-hasPermi="['meta:metatask:delete']"
-                >删除</el-button
-              >
-              <el-dropdown
-                size="mini"
-                @command="(command) => handleCommand(command, scope.row)"
-                v-hasPermi="['system:user:resetPwd', 'meta:metatask:edit']"
-              >
-                <el-button size="mini" type="text" icon="el-icon-d-arrow-right"
-                  >更多</el-button
-                >
-                <el-dropdown-menu>
-                  <el-dropdown-item
-                    command="handleUp"
-                    icon="el-icon-circle-check"
-                    :disabled="scope.row.status === 'ONLINE'"
-                    v-hasPermi="['meta:metatask:up']"
-                    >上线</el-dropdown-item
-                  >
-                  <el-dropdown-item
-                    command="handleDown"
-                    icon="el-icon-circle-check"
-                    :disabled="scope.row.status === 'OFFLINE'"
-                    v-hasPermi="['meta:metatask:down']"
-                    >下线</el-dropdown-item
-                  >
-                  <el-dropdown-item
-                    command="handleDS"
-                    icon="el-icon-circle-check"
-                    :disabled="scope.row.status === 'OFFLINE'"
-                    v-hasPermi="['meta:metatask:ds']"
-                    >调度</el-dropdown-item
-                  >
-                  <el-dropdown-item
-                    command="handleRun"
-                    icon="el-icon-circle-check"
-                    :disabled="scope.row.status === 'OFFLINE'"
-                    v-hasPermi="['meta:metatask:run']"
-                    >运行</el-dropdown-item
-                  >
-                  <el-dropdown-item
-                    command="handleLog"
-                    icon="el-icon-circle-check"
-                    v-hasPermi="['meta:metatask:log']"
-                    >日志</el-dropdown-item
-                  >
-                </el-dropdown-menu>
-              </el-dropdown>
-            </template>
           </el-table-column>
         </el-table>
 
@@ -421,14 +418,15 @@
     </el-row>
 
     <el-dialog v-model="open" width="600px" append-to-body>
-      <div slot="title">
-        <el-cascader
-    v-model="form.metataskType"
-    :options="metataskTypeOptions"
-    :props="{ expandTrigger: 'hover' }"
-    @change="handleChangeType"></el-cascader>
-      </div>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <template #title>
+      <el-cascader
+        v-model="form.metataskType"
+        :options="metataskTypeOptions"
+        :props="{ expandTrigger: 'hover' }"
+        @change="handleChangeType"
+      ></el-cascader>
+    </template>
+      <el-form ref="taskForm" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :span="24">
             <el-form-item label="任务名称" prop="metataskName">
@@ -518,10 +516,13 @@
           </el-col>
         </el-row>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
+      
+      <template #footer>
+            <div class="dialog-footer">
+              <el-button type="primary" @click="submitForm">确 定</el-button>
+              <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
     </el-dialog>
     <run-dialog ref="rundialog"
      :warningGroupList="warningGroupList"
@@ -550,450 +551,6 @@
   margin-right: 8px; /* 图标与文本之间的间距 */
 }
 </style>
-<!-- <script> -->
-<!-- import {
-  listmetatask,
-  getmetatask,
-  delmetatask,
-  addmetatask,
-  updatemetatask,
-  downOrUpmetatask,
-  datasourcetree,
-  datasourceall,
-  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";
-
-export default {
-  name: "User",
-  dicts: ["meta_task_type", "meta_task_acq", "meta_task_status", "meta_task_at"],
-  components: { Treeselect,runDialog,dsDialog,logDialog  },
-  data() {
-    return {
-      // 默认激活的标签页
-      activeTab: "dataSource",
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      dsIds: [],
-      // 非单个禁用
-      single: true,
-      singleOne: true,//上线 编辑 删除
-      singleTwo: true,//下线 日志 调度
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 用户表格数据
-      userList: null,
-      // 弹出层标题
-      title: "",
-      warningGroupList:undefined,
-      environmentList:undefined,
-      workerGroupList:undefined,
-      defindName:"",
-      // 部门树选项
-      dbResourceOptions: undefined,
-      //数据源
-      dbRCodeList: undefined,
-      //模式列表
-      dbSCodeList: [
-        {
-          value: "scheam",
-          label: "scheam",
-        },
-        {
-          value: "scheam2",
-          label: "scheam2",
-        },
-      ],
-      //任务类型树
-      metataskTypeOptions:[
-      {value: '0', label: "元数据采集", 
-        children:[
-        {value: '00', label: "表字段"},
-        {value: '01', label: "存储过程"}
-        ]
-      },
-      {value: '1', label: "元数据加工"}
-
-      ],
-      // 是否显示弹出层
-      open: false,
-      // 部门名称
-      dbResoursName: undefined,
-      //左侧点击的数据源
-      clickNode: undefined,
-      // 日期范围
-      dateRange: [],
-      // 岗位选项
-      postOptions: [],
-
-      // 表单参数
-      form: {},
-      defaultProps: {
-        children: "children",
-        label: "name",
-      },
-      selectRowData:{},
-      dbResourceOldList:[],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        dbRcode: undefined,
-        dsId: undefined,
-        metataskName: undefined,
-        metataskType: undefined,
-        dbRCode: undefined,
-      },
-      // 列信息
-      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 },
-      ],
-      chooseRows:[],//选中行
-      // 表单校验
-      rules: {
-        metataskName: [
-          { required: true, message: "任务名称不能为空", trigger: "blur" },
-          {
-            min: 2,
-            max: 20,
-            message: "任务名称长度必须介于 2 和 20 之间",
-            trigger: "blur",
-          },
-        ],
-        // dbCode: [
-        //   { required: true, message: "数据库不能为空", trigger: "blur" },
-        // ],
-        dbSCode: [
-          { required: true, message: "模式列表不能为空", trigger: "blur" },
-        ],
-        acquisitionType: [
-          { required: true, message: "采集方式不能为空", trigger: "blur" },
-        ],
-        acTarget: [
-          { required: true, message: "采集目标不能为空", trigger: "blur" },
-        ],
-      },
-    };
-  },
-  watch: {
-    // 根据名称筛选部门树
-    dbResoursName(val) {
-      this.$refs.tree.filter(val);
-    },
-  },
-  created() {
-    this.getList();
-    this.getDeptTree();
-  },
-  methods: {
-    handleChangeType(value) {
-      this.form.metataskType = value[value.length - 1];
-      if(this.form.metataskType=='00'){
-        this.form.acTarget='0'
-      }else if(this.form.metataskType=='01'){
-        this.form.acTarget='1'
-      }
-      },
-    /** 查询用户列表 */
-    getList() {
-      this.loading = true;
-      listmetatask(this.addDateRange(this.queryParams, this.dateRange)).then(
-        (response) => {
-          this.userList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        }
-      );
-    },
-    getListNameById(id) {
-      const item = this.dbResourceOldList.find(item => item.id === id);
-      return item ? item.name : '';
-    },
-    /** 查询部门下拉树结构 */
-    getDeptTree() {
-      datasourceall().then((response)=>{
-        this.warningGroupList=response.data.alertGroups,
-        this.environmentList=response.data.environment,
-        this.workerGroupList=response.data.workerGroup
-
-        
-      })
-     datasourcetree().then(
-        (response) => {
-        if(response.success&&response.rows.length>0){
-        this.dbResourceOldList=response.rows
-        let  childrenList=[]
-        this.dbResourceOldList.forEach(element => {
-          childrenList.push({...element,parentId:"100"})
-        });
-        this.dbResourceOptions = [
-        {
-          id: 100,
-          name: "数据源",
-          parentId: 0,
-          children: childrenList
-        }
-        ]
-  
-    }
-    })
-  },
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.name.indexOf(value) !== -1;
-    },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.clickNode = data;
-      this.queryParams.dbRCode = data.id;
-      this.handleQuery();
-    },
-
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        metataskId: undefined,
-        metataskType: "00",
-        metataskName: undefined,
-        dbRName: undefined,
-        dbCode: undefined,
-        dbName: undefined,
-        dbRCode: this.clickNode.id,
-        dbSName: undefined,
-        dbSCode: undefined,
-        remark: undefined,
-        acquisitionType: "0",
-        dsId: undefined,
-        acTarget:"0"
-      };
-      this.resetForm("form");
-    },
-    getIconClass(data) {
-      // 根据数据返回相应的图标类名
-      if (data.parentId == '0') {
-        return 'el-icon-files'; // 文件夹图标
-      } else if (data.parentId == '100') {
-        return 'el-icon-coin'; // 文件图标
-      } else {
-        return ''; // 默认无图标
-      }
-  },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.queryParams.dbRCode = this.clickNode.id;
-      this.$refs.tree.setCurrentKey(null);
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.selectRowData=selection[0]
-      console.log(this.selectRowData,"dddddddddddd")
-      this.chooseRows=selection
-      this.ids = selection.map((item) => item.metataskId);
-      this.dsIds = selection.map((item) => item.dsIds);
-      this.singleOne = selection.length != 1||this.selectRowData.status=="ONLINE";
-      this.singleTwo = selection.length != 1||this.selectRowData.status=="OFFLINE";
-      this.single = selection.length != 1;
-      this.multiple = !selection.length;
-    },
-    // 更多操作触发
-    handleCommand(command, row) {
-      switch (command) {
-        case "handleUp":
-          this.handleUp(row);
-          break;
-          case "handleDown":
-          this.handleDown(row);
-          break;
-          case "handleDS":
-          this.handleDS(row);
-          break;
-          case "handleRun":
-          this.handleRun(row);
-          break;
-        case "handleLog":
-          this.handleLog(row);
-          break;
-        default:
-          break;
-      }
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      if(this.clickNode==undefined||this.clickNode==null){
-        this.$message.warning("请选择数据源节点!")
-        return
-      }
-  
-
-      this.reset();
-      // getmetatask().then(response => {
-
-      this.open = true;
-      // });
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const metataskId = row.metataskId || this.ids;
-      getmetatask(metataskId).then((response) => {
-        this.form = response.data;
-        // this.form.acTarget=response.data.acTarget.split(',');
-        this.open = true;
-      });
-    },
-    // 上线操作
-    handleUp(row) {
-      const metataskIds = String(row.metataskId||this.ids)
-      this.$modal
-        .confirm('是否确认上线任务编号为"' + metataskIds + '"的数据项？')
-        .then(function () {
-          return downOrUpmetatask(metataskIds,"ONLINE");
-        })
-        .then(() => {
-          this.getList();
-          this.$modal.msgSuccess("上线成功");
-        })
-        .catch(() => {});
-    },
-
-    // 下线操作
-    handleDown(row) {
-      const metataskIds = String(row.metataskId||this.ids)
-      this.$modal
-        .confirm('是否确认下线任务编号为"' + metataskIds + '"的数据项？')
-        .then(function () {
-          return downOrUpmetatask(metataskIds,"OFFLINE");
-        })
-        .then(() => {
-          this.getList();
-          this.$modal.msgSuccess("下线成功");
-        })
-        .catch(() => {});
-    },
-    // 调度操作
-
-   handleDS(row) {
-
-    
-this.$refs.dsdialog.show(row.dsIds);
-
-
-},
-    // 运行
-    handleRun(row) {
-
-    
-      this.$refs.rundialog.show(row.dsIds);
-
-
-    },
-        // 运行
-        handleLog(row) {
-
-    this.defindName=this.selectRowData.metataskName+(this.selectRowData.dsTypes=="0"?"-表字段采集":"-存储过程采集")
-    console.log(this.defindName,"defindName")
-    this.$refs.logdialog.show(this.defindName);
-
-
-},
-    /** 提交按钮 */
-    submitForm: function () {
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-          var submitForm ={...this.form}
-           submitForm.dbCode=this.clickNode.type
-           submitForm.dbRName=this.clickNode.name
-          // submitForm.acTarget=this.form.acTarget.join(',')
-       
-          if (this.form.metataskId != undefined) {
-            updatemetatask(submitForm).then((response) => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addmetatask(submitForm).then((response) => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      var isDlete=true
-      if (row.status === 'ONLINE') {
-        this.$modal.msgWarning("请选择下线数据进行删除");
-        isDlete=false
-        
-      }
-      if(this.chooseRows.length>0){
-
-        this.chooseRows.forEach(b=>{
-          if (b.status === 'ONLINE') {
-            this.$modal.msgWarning("请选择下线数据进行删除");
-            isDlete=false
-
-      }
-
-        })
-      }
-      if(isDlete){
-      const metataskIds = row.metataskId || this.ids;
-      const dsidsVo = row.dsIds || this.dsIds;
-
-      this.$modal
-        .confirm('是否确认删除任务编号为"' + metataskIds + '"的数据项？')
-        .then(function () {
-          return delmetatask(metataskIds,dsidsVo);
-        })
-        .then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        })
-        .catch(() => {});
-    }
-  },
-  },
-};
-</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";
@@ -1035,8 +592,9 @@ const dbResoursName = ref(undefined);
 const clickNode = ref(undefined);
 const dateRange = ref([]);
 const postOptions = ref([]);
-const form = reactive({
-  metataskId: undefined,
+
+const data = reactive({
+  form: { metataskId: undefined,
   metataskType: "00",
   metataskName: undefined,
   dbRName: undefined,
@@ -1048,15 +606,8 @@ const form = reactive({
   remark: undefined,
   acquisitionType: "0",
   dsId: undefined,
-  acTarget: "0"
-});
-const defaultProps = {
-  children: "children",
-  label: "name"
-};
-const selectRowData = ref({});
-const dbResourceOldList = ref([]);
-const queryParams = reactive({
+  acTarget: "0"},
+  queryParams: {
   pageNum: 1,
   pageSize: 10,
   dbRcode: undefined,
@@ -1064,7 +615,26 @@ const queryParams = reactive({
   metataskName: undefined,
   metataskType: undefined,
   dbRCode: undefined
+  },
+  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" }]
+  }
 });
+
+const { queryParams, form, rules } = toRefs(data);
+const defaultProps = {
+  children: "children",
+  label: "name"
+};
+const selectRowData = ref({});
+const dbResourceOldList = ref([]);
+
 const columns = [
   { key: 0, label: `任务ID`, visible: true },
   { key: 1, label: `任务名称`, visible: true },
@@ -1079,21 +649,13 @@ const columns = [
   { 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);
+    proxy.tree.filter(val);
   }
 });
 
@@ -1132,9 +694,10 @@ const getDeptTree = async () => {
   }
 };
 
-const getListNameById = async (id) => {
-  const item = dbResourceOldList.find(item => item.id === id);
-  return item ? item.name : '';
+const getListNameById =  (id) => {
+  const item = dbResourceOldList.value.find(item => item.id == id);
+  return item!=null ? item.name : '';
+
 };
 
 const filterNode = (value, data) => {
@@ -1154,7 +717,7 @@ const cancel = () => {
 };
 
 const reset = () => {
-  Object.assign(form, {
+  form.value= {
     metataskId: undefined,
     metataskType: "00",
     metataskName: undefined,
@@ -1168,14 +731,16 @@ const reset = () => {
     acquisitionType: "0",
     dsId: undefined,
     acTarget: "0"
-  });
-  $refs.form.reset();
+  };
+
+  proxy.resetForm("taskForm");
 };
 
 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
+  let icon=""
+  if (data.parentId == '0') icon= 'Monitor'; 
+  if (data.parentId == '100') icon= 'Coin'; 
+  return icon; 
 };
 
 const handleQuery = () => {
@@ -1185,9 +750,9 @@ const handleQuery = () => {
 
 const resetQuery = () => {
   dateRange.value = [];
-  $refs.queryForm.reset();
+  proxy.queryForm.reset();
   queryParams.dbRCode = clickNode.value?.id;
-  $refs.tree.setCurrentKey(null);
+  proxy.tree.setCurrentKey(null);
   handleQuery();
 };
 
@@ -1237,53 +802,64 @@ const handleUpdate = async (row) => {
   reset();
   const metataskId = row.metataskId || ids.value;
   const response = await getmetatask(metataskId);
-  Object.assign(form, response.data);
+  form.value = response.data;
   open.value = true;
+
+ 
 };
 
 const handleUp = async (row) => {
   const metataskIds = String(row.metataskId || ids.value);
-  await $modal.confirm(`是否确认上线任务编号为"${metataskIds}"的数据项？`);
+  await proxy.$modal.confirm(`是否确认上线任务编号为"${metataskIds}"的数据项？`);
   await downOrUpmetatask(metataskIds, "ONLINE");
   getList();
-  $modal.msgSuccess("上线成功");
+  proxy.$modal.msgSuccess("上线成功");
 };
 
 const handleDown = async (row) => {
   const metataskIds = String(row.metataskId || ids.value);
-  await $modal.confirm(`是否确认下线任务编号为"${metataskIds}"的数据项？`);
+  await proxy.$modal.confirm(`是否确认下线任务编号为"${metataskIds}"的数据项？`);
   await downOrUpmetatask(metataskIds, "OFFLINE");
   getList();
-  $modal.msgSuccess("下线成功");
+  proxy.$modal.msgSuccess("下线成功");
 };
-
+const dsdialog = ref(null);
+const rundialog = ref(null);
+const logdialog = ref(null);
 const handleDS = (row) => {
-  $refs.dsdialog.show(row.dsIds);
+  if (dsdialog.value) {
+    dsdialog.value.show(dsIds.value); // Pass ids or any required data
+      }
 };
 
 const handleRun = (row) => {
-  $refs.rundialog.show(row.dsIds);
+  rundialog.value.show(dsIds.value);
 };
 
 const handleLog = () => {
-  defindName.value = `${selectRowData.value.metataskName} - ${selectRowData.value.dsTypes === "0" ? "表字段采集" : "存储过程采集"}`;
-  $refs.logdialog.show(defindName.value);
+  defindName.value = `${selectRowData.value.metataskName}-${selectRowData.value.dsTypes === "0" ? "表字段采集" : "存储过程采集"}`;
+
+  if (logdialog.value) {
+    logdialog.value.show(defindName.value);
+      }
+
 };
 
 const submitForm = async () => {
-  $refs.form.validate(async (valid) => {
+
+    proxy.$refs["taskForm"].validate(async (valid) => {
     if (valid) {
-      const submitForm = { ...form };
+      const submitForm = { ...form.value };
       submitForm.dbCode = clickNode.value.type;
       submitForm.dbRName = clickNode.value.name;
       if (form.metataskId !== undefined) {
         await updatemetatask(submitForm);
-        $modal.msgSuccess("修改成功");
+        proxy.$modal.msgSuccess("修改成功");
         open.value = false;
         getList();
       } else {
         await addmetatask(submitForm);
-        $modal.msgSuccess("新增成功");
+        proxy.$modal.msgSuccess("新增成功");
         open.value = false;
         getList();
       }
@@ -1294,13 +870,13 @@ const submitForm = async () => {
 const handleDelete = async (row) => {
   let isDelete = true;
   if (row.status === 'ONLINE') {
-    $modal.msgWarning("请选择下线数据进行删除");
+    proxy.$modal.msgWarning("请选择下线数据进行删除");
     isDelete = false;
   }
   if (chooseRows.value.length > 0) {
     chooseRows.value.forEach(b => {
       if (b.status === 'ONLINE') {
-        $modal.msgWarning("请选择下线数据进行删除");
+        proxy.$modal.msgWarning("请选择下线数据进行删除");
         isDelete = false;
       }
     });
@@ -1308,10 +884,10 @@ const handleDelete = async (row) => {
   if (isDelete) {
     const metataskIds = row.metataskId || ids.value;
     const dsidsVo = row.dsIds || dsIds.value;
-    await $modal.confirm(`是否确认删除任务编号为"${metataskIds}"的数据项？`);
+    await proxy.$modal.confirm(`是否确认删除任务编号为"${metataskIds}"的数据项？`);
     await delmetatask(metataskIds, dsidsVo);
     getList();
-    $modal.msgSuccess("删除成功");
+    proxy.$modal.msgSuccess("删除成功");
   }
 };
 </script>
diff --git a/vue-fastapi-frontend/src/views/meta/metatask/logsDialog.vue b/vue-fastapi-frontend/src/views/meta/metatask/logsDialog.vue
index 3360563..515ae65 100644
--- a/vue-fastapi-frontend/src/views/meta/metatask/logsDialog.vue
+++ b/vue-fastapi-frontend/src/views/meta/metatask/logsDialog.vue
@@ -1,38 +1,43 @@
 <template>
-  <el-dialog  :visible.sync="visible" width="80%" top="5vh" append-to-body>
-    <div style="display: flex; flex-direction: column; gap: 10px;">
+  <el-dialog v-model="visible" width="80%" top="5vh" append-to-body>
 
+    <div style="display: flex; flex-direction: column; gap: 10px;">
       <!-- 第一部分：实例表格（带分页） -->
       <el-card shadow="hover">
-        <div slot="header" class="clearfix">
-          <span>实例列表</span>
-        </div>
+        <template v-slot:header>
+          <div class="clearfix">
+            <span>实例列表</span>
+          </div>
+        </template>
+
         <el-table
           :data="instances"
           border
           style="width: 100%"
           @row-click="handleFirstRowClick"
-          :height="350" 
+          :height="350"
         >
           <el-table-column prop="id" label="实例ID" width="100" />
           <el-table-column prop="name" label="实例名称" />
-          <el-table-column prop="state" label="状态" width="100" >
-            <template slot-scope="scope">
+          <el-table-column prop="state" label="状态" width="100">
+            <template v-slot:default="scope">
               <dict-tag
-                :options="dict.type.meta_instance_status"
+                :options="meta_instance_status"
                 :value="scope.row.state"
               />
             </template>
-            </el-table-column>          <el-table-column prop="startTime" label="开始时间" width="200" />
+          </el-table-column>
+          <el-table-column prop="startTime" label="开始时间" width="200" />
           <el-table-column prop="endTime" label="结束时间" width="200" />
           <el-table-column prop="duration" label="运行时长" width="80" />
         </el-table>
+
         <el-pagination
           background
           layout="prev, pager, next"
           :total="total"
           :page-size="pageSize"
-          :current-page.sync="currentPage"
+          :current-page="currentPage"
           @current-change="fetchInstances"
           style="margin-top: 10px; text-align: right;"
         />
@@ -40,34 +45,39 @@
 
       <!-- 第二部分：任务节点表格 -->
       <el-card shadow="hover">
-        <div slot="header" class="clearfix">
-          <span>任务节点</span>
-        </div>
+        <template v-slot:header>
+          <div class="clearfix">
+            <span>任务节点</span>
+          </div>
+        </template>
+
         <el-table
-          :data="taskNodes"
+          :data="taskNodesData"
           border
           style="width: 100%"
           @row-click="handleSecondRowClick"
-          :height="300" 
+          :height="300"
         >
-          <el-table-column prop="name" label="节点名称"/>
+          <el-table-column prop="name" label="节点名称" />
           <el-table-column prop="taskType" label="任务类型" />
-          <el-table-column prop="state" label="状态" width="100" >
-            <template slot-scope="scope">
+          <el-table-column prop="state" label="状态" width="100">
+            <template v-slot:default="scope">
               <dict-tag
-                :options="dict.type.meta_instance_status"
+                :options="meta_instance_status"
                 :value="scope.row.state"
               />
             </template>
-            </el-table-column>
+          </el-table-column>
         </el-table>
       </el-card>
 
       <!-- 第三部分：日志内容 -->
       <el-card shadow="hover">
-        <div slot="header" class="clearfix">
-          <span>日志详情</span>
-        </div>
+        <template v-slot:header>
+          <div class="clearfix">
+            <span>日志详情</span>
+          </div>
+        </template>
         <el-input
           type="textarea"
           v-model="logDetailsContent"
@@ -81,53 +91,61 @@
   </el-dialog>
 </template>
 
-<script>
+<script setup>
 import { listInstances, taskNodes, logDetails } from "@/api/meta/metatask";
+import { ref } from "vue";
+const { proxy } = getCurrentInstance();
+const { meta_instance_status} = proxy.useDict("meta_instance_status");
+// Define props
+const props = defineProps({
+  defindName: String, // Assuming defindName is a string, you can adjust based on actual type
+});
 
-export default {
-  props: ["defindName"],
-  dicts:["meta_instance_status"],
-  data() {
-    return {
-      visible: false, // 弹窗显示状态
-      instances: [], // 第一个表格数据
-      total: 0, // 数据总数，用于分页
-      pageSize: 10, // 每页条数
-      currentPage: 1, // 当前页码
-      taskNodes: [], // 第二个表格数据
-      logDetailsContent: "", // 第三部分的日志内容
-    };
-  },
-  methods: {
-    // 显示弹窗并加载实例数据
-    show(defindName) {
-      this.visible = true;
-      this.fetchInstances(defindName);
-    },
-    // 获取第一个表格数据
-    fetchInstances(defindName) {
-      listInstances({ page_num: this.currentPage, page_size: this.pageSize, searchVal: defindName }).then((response) => {
-        console.log(response, "response");
-        this.instances = response.rows;
-        this.total = response.total;
-      });
-    },
-    // 点击第一个表格行获取任务节点数据
-    handleFirstRowClick(row) {
-      taskNodes(row.id).then((response) => {
-        this.taskNodes = response.rows;
-      });
-    },
-    // 点击第二个表格行获取日志详情
-    handleSecondRowClick(row) {
-      logDetails(row.id).then((response) => {
-        this.logDetailsContent = response.data;
-      });
-    },
+// Define reactive state
+const visible = ref(false); //弹窗显示状态
+const instances = ref([]); // 第一个表格数据
+const total = ref(0); // 数据总数，用于分页
+const pageSize = ref(10); // 每页条数
+const currentPage = ref(1); // 当前页码
+const taskNodesData = ref([]); // 第二个表格数据
+const logDetailsContent = ref(""); // 第三部分的日志内容
+
+defineExpose({
+  show(name) {
+  visible.value = true;
+  console.log(visible.value,name, "visible");
+  fetchInstances(name);
   },
+});
+// Fetch first table data
+const fetchInstances = (defindName) => {
+  listInstances({
+    page_num: currentPage.value,
+    page_size: pageSize.value,
+    searchVal: defindName,
+  }).then((response) => {
+    console.log(response, "response");
+    instances.value = response.rows;
+    total.value = response.total;
+  });
+};
+
+// Handle row click in the first table and fetch task node data
+const handleFirstRowClick = (row) => {
+  taskNodes(row.id).then((response) => {
+    taskNodesData.value = response.rows;
+  });
+};
+
+// Handle row click in the second table and fetch log details
+const handleSecondRowClick = (row) => {
+  logDetails(row.id).then((response) => {
+    logDetailsContent.value = response.data;
+  });
 };
 </script>
 
+
 <style scoped>
 /* 添加全局间距和样式优化 */
 .el-card {
@@ -137,4 +155,4 @@ export default {
   font-weight: bold;
   font-size: 17px;
 }
-</style> 
\ No newline at end of file
+</style>
diff --git a/vue-fastapi-frontend/src/views/meta/metatask/runDialog.vue b/vue-fastapi-frontend/src/views/meta/metatask/runDialog.vue
index 99a96c2..a97c520 100644
--- a/vue-fastapi-frontend/src/views/meta/metatask/runDialog.vue
+++ b/vue-fastapi-frontend/src/views/meta/metatask/runDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 运行 -->
-  <el-dialog title="运行" :visible.sync="visible" width="500px" top="5vh" append-to-body>
+  <el-dialog title="运行" v-model="visible" width="500px" top="5vh" append-to-body>
     <el-form ref="form" :model="form" label-width="120px" class="dialog-form">
       <!-- Worker分组 -->
       <el-row :gutter="20">
@@ -52,10 +52,13 @@
     </el-form>
 
     <!-- Footer 按钮 -->
-    <div slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取 消</el-button>
-      <el-button type="primary" @click="handleRun">确 定</el-button>
-    </div>
+
+    <template #footer>
+            <div class="dialog-footer">
+              <el-button type="primary" @click="handleRun">确 定</el-button>
+              <el-button @click="visible = false">取 消</el-button>
+            </div>
+         </template>
   </el-dialog>
 </template>
 
@@ -77,6 +80,7 @@ export default {
   },
   methods: {
     show(ids) {
+   
       this.form.processDefinitionCode = Number(this.processDefinitionCode[0]);
       this.visible = true;
     },