update types

src/api/workflow/model/index.ts

@@ -5,7 +5,7 @@ import request from '@/utils/request';
  * @param query
  * @returns {*}
  */
-export const listModel = (query: Object) => {
+export const listModel = (query: object) => {
   return request({
     url: '/workflow/model/list',
     method: 'get',
@@ -18,7 +18,7 @@ export const listModel = (query: Object) => {
  * @param query
  * @returns {*}
  */
-export const addModel = (data: Object) => {
+export const addModel = (data: object) => {
   return request({
     url: '/workflow/model/rest/models',
     method: 'post',
@@ -31,11 +31,11 @@ export const addModel = (data: Object) => {
  * @param {模型id} id
  * @returns {*}
  */
-export function delModel(id: Object) {
+export function delModel(id: object) {
   return request({
     url: '/workflow/model/' + id,
     method: 'delete'
-  })
+  });
 }
 
 /**
@@ -43,7 +43,7 @@ export function delModel(id: Object) {
  * @param {模型id} id
  * @returns {*}
  */
-export const modelDeploy = (id: String) => {
+export const modelDeploy = (id: string) => {
   return request({
     url: `/workflow/model/modelDeploy/${id}`,
     method: 'post'

src/views/workflow/model/design.vue

@@ -6,7 +6,7 @@
   </el-dialog>
 </template>
 
-<script>
+<script lang="ts">
 const baseURL = import.meta.env.VITE_APP_BASE_API;
 import { getToken } from '@/utils/auth';
 export default {

src/views/workflow/model/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
+      <div class="mb-[10px]" v-show="showSearch">
+        <el-card shadow="hover">
           <el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch" label-width="68px">
             <el-form-item label="模型名称" prop="name">
               <el-input v-model="queryParams.name" placeholder="请输入模型名称" clearable @keyup.enter="handleQuery" />
@@ -14,9 +15,10 @@
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
+        </el-card>
       </div>
     </transition>
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -35,7 +37,7 @@
         <el-table-column fixed align="center" prop="name" label="模型名称"></el-table-column>
         <el-table-column align="center" prop="key" label="标识Key"></el-table-column>
         <el-table-column align="center" prop="version" label="版本号" width="90">
-          <template #default="scope"> v{{scope.row.version}}.0</template>
+          <template #default="scope"> v{{ scope.row.version }}.0</template>
         </el-table-column>
         <el-table-column align="center" prop="metaInfo" label="备注说明" min-width="130"></el-table-column>
         <el-table-column align="center" prop="createTime" label="创建时间" width="160"></el-table-column>
@@ -52,9 +54,9 @@
             </el-row>
             <el-row :gutter="10" class="mb8">
               <el-col :span="1.5">
-                <el-button type="text" size="small" icon="el-icon-c-scale-to-original" @click="clickDeploy(scope.row.id,scope.row.key)"
+                <el-button type="text" size="small" icon="el-icon-c-scale-to-original" @click="clickDeploy(scope.row.id, scope.row.key)">
-                  >流程部署</el-button
+                  流程部署
-                >
+                </el-button>
               </el-col>
               <el-col :span="1.5">
                 <el-button type="text" size="small" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
@@ -63,14 +65,14 @@
           </template>
         </el-table-column>
       </el-table>
-      <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
     <!-- 设计流程开始 -->
     <design ref="designModel" :modelId="modelId" />
     <!-- 设计流程结束 -->
     <!-- 添加模型对话框 -->
     <el-dialog v-model="open" v-if="open" title="新增模型" width="650px" append-to-body :close-on-click-modal="false">
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="模型名称：" prop="name">
           <el-input v-model="form.name" maxlength="20" show-word-limit />
         </el-form-item>
@@ -91,155 +93,135 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup name="Model">
 import { listModel, addModel, delModel, modelDeploy } from '@/api/workflow/model';
-import design from './design';
+import Design from "./design.vue";
-export default {
+import { ComponentInternalInstance } from "vue";
-  name: 'Model', // 和对应路由表中配置的name值一致
+
-  components: { design },
+const { proxy } = getCurrentInstance() as ComponentInternalInstance
-  data() {
+
-    return {
+const designModel = ref<InstanceType<typeof Design>>();
-      // 按钮loading
+const formRef = ref(ElForm);
-      buttonLoading: false,
+
-      // 遮罩层
+// 按钮loading
-      loading: true,
+const buttonLoading = ref(false);
-      // 导出遮罩层
+// 遮罩层
-      exportLoading: false,
+const loading = ref(true)
-      // 选中数组
+// 导出遮罩层
-      ids: [],
+const exportLoading = ref(false)
-      // 非单个禁用
+// 选中数组
-      single: true,
+const ids = ref<Array<any>>([])
-      // 非多个禁用
+// 非单个禁用
-      multiple: true,
+const single = ref(true)
-      // 显示搜索条件
+// 非多个禁用
-      showSearch: true,
+const multiple = ref(true)
-      // 总条数
+// 显示搜索条件
-      total: 0,
+const showSearch = ref(true);
-      // 模型定义表格数据
+// 总条数
-      modelList: [],
+const total = ref(0);
-      // 查询参数
+// 模型定义表格数据
-      queryParams: {
+const modelList = ref([]);
+// 查询参数
+const queryParams = ref<Record<string, any>>({
   pageNum: 1,
   pageSize: 10,
   name: undefined,
   key: undefined
-      },
+});
-      modelId: null, //
+const modelId = ref<string>('')
-      //模型表单
+//模型表单
-      form: {},
+const form = ref<Record<string, any>>({})
-      open: false
+const open = ref(false)
-    };
+
-  },
+const rules = ref();
-  created() {
+
-    this.getList();
+onMounted(() => {
-  },
+  getList();
-  methods: {
+});
-    /** 搜索按钮操作 */
+/** 搜索按钮操作 */
-    handleQuery() {
+const handleQuery = () => {
-      this.queryParams.pageNum = 1;
+  queryParams.value.pageNum = 1;
-      this.getList();
+  getList();
-    },
+};
-    /** 重置按钮操作 */
+/** 重置按钮操作 */
-    resetQuery() {
+const resetQuery = () => {
-      this.queryParams = {}
+  queryParams.value = {}
-      this.queryParams.pageNum = 1;
+  queryParams.value.pageNum = 1;
-      this.queryParams.pageSize = 10;
+  queryParams.value.pageSize = 10;
-      this.handleQuery();
+  handleQuery();
-    },
+}
-    // 多选框选中数据
+// 多选框选中数据
-    handleSelectionChange(selection) {
+const handleSelectionChange = (selection: any) => {
-      this.ids = selection.map((item) => item.id);
+  ids.value = selection.map((item: any) => item.id);
-      this.single = selection.length !== 1;
+  single.value = selection.length !== 1;
-      this.multiple = !selection.length;
+  multiple.value = !selection.length;
-    },
+}
-    //分页
+//分页
-    getList() {
+const getList = () => {
-      this.loading = true;
+  loading.value = true;
-      listModel(this.queryParams).then((response) => {
+  listModel(queryParams.value).then((resp) => {
-        this.modelList = response.rows;
+    modelList.value = resp.rows;
-        this.total = response.total;
+    total.value = resp.total;
-        this.loading = false;
+    loading.value = false;
   });
-    },
+}
-    /** 删除按钮操作 */
+/** 删除按钮操作 */
-    handleDelete(row) {
+const handleDelete = async (row: any) => {
-      const ids = row.id || this.ids;
+  const id = row.id || ids;
-      this.$modal
+  await proxy?.$modal.confirm('是否确认删除模型id为"' + id + '"的数据项？');
-        .confirm('是否确认删除模型id为"' + ids + '"的数据项？')
+  loading.value = true;
-        .then(() => {
+  await delModel(id).finally(() => loading.value = false);
-          this.loading = true;
+  getList();
-          return delModel(ids);
+  proxy?.$modal.msgSuccess('删除成功');
-        })
+};
-        .then(() => {
+// 流程部署
-          this.loading = false;
+const clickDeploy = async (id: string, key: string) => {
-          this.getList();
+  await proxy?.$modal.confirm('是否部署模型key为【' + key + '】流程？');
-          this.$modal.msgSuccess('删除成功');
+  loading.value = true;
-        })
+  await modelDeploy(id).finally(() => loading.value = false);
-        .finally(() => {
+  getList();
-          this.loading = false;
+  proxy?.$modal.msgSuccess('部署成功');
-        });
+};
-    },
+const handleAdd = () => {
-    // 流程部署
+  form.value = {};
-    clickDeploy(id, key) {
+  open.value = true;
-      this.$modal
+};
-        .confirm('是否部署模型key为【' + key + '】流程？')
+/** 提交按钮 */
-        .then(() => {
+const submitForm = () => {
-          this.loading = true;
+  formRef.value.validate(async (valid: boolean) => {
-          return modelDeploy(id);
-        })
-        .then(() => {
-          this.loading = false;
-          this.getList();
-          this.$modal.msgSuccess('部署成功');
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    handleAdd() {
-      this.form = {};
-      this.open = true;
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs['form'].validate((valid) => {
     if (valid) {
-          this.buttonLoading = true;
+      buttonLoading.value = true;
-          addModel(this.form).then((response) => {
+      await addModel(form.value);
-            this.$modal.msgSuccess('新增成功');
+      proxy?.$modal.msgSuccess('新增成功');
-            this.open = false;
+      open.value = false;
-            this.getList();
+      getList();
-          });
     }
   });
-    },
+};
-    // 打开设计流程
+// 打开设计流程
-    clickDesign(id) {
+const clickDesign = (id: string) => {
-      this.modelId = id;
+  modelId.value = id;
-      this.$refs.designModel.visible = true;
+  if (designModel.value) {
-    },
+    designModel.value.visible = true;
-    // 关闭设计流程
-    closeBpmn() {
-      this.getList();
-      this.$refs.designModel.visible = false;
-    },
-    handleClose() {
-      this.$confirm('请记得点击保存按钮，确定关闭设计窗口?', '确认关闭', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(() => {
-          this.$refs.designModel.visible = false;
-          // 刷新数据
-          this.getList();
-        })
-        .catch(() => {});
-    },
-    // 导出流程模型
-    clickExportZip(data) {
-      this.$download.zip('/workflow/model/export/zip/' + data.id, data.name + '-' + data.key);
-    }
   }
 };
+// 关闭设计流程
+const closeBpmn = () => {
+  getList();
+  if (designModel.value) {
+    designModel.value.visible = false;
+  }
+};
+const handleClose = async () => {
+  await proxy?.$modal.confirm('请记得点击保存按钮，确定关闭设计窗口?');
+  if (designModel.value) {
+    designModel.value.visible = false;
+  }
+  // 刷新数据
+  getList();
+};
+// 导出流程模型
+const clickExportZip = (data: any) => {
+  proxy?.$download.zip('/workflow/model/export/zip/' + data.id, data.name + '-' + data.key);
+};
 </script>