vue3更改

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>
 

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> 
+</style>

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;
     },