流程管理添加排序

src/views/system/bpm/category/categoryPopup.vue

@@ -1,36 +1,36 @@
 <!--模型分类的新增编辑弹出框-->
 <template>
-  <el-dialog
+    <el-dialog draggable class="cn-operate-dialog" v-model="machineVisible" :title="title" width="40%">
-      draggable
-      class='cn-operate-dialog'
-      v-model='machineVisible'
-      :title='title'
-      style='width: 415px; height: 350px'
-      top='30vh'
-  >
         <el-scrollbar>
-      <el-form :inline='false' :model='form' label-width='120px' :rules='rules' ref='formRef'>
+            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
-        <el-form-item label='分类名称' prop='name'>
+                <el-form-item label="分类名称" prop="name">
-          <el-input v-model='form.name' placeholder='请输入分类名' clearable />
+                    <el-input v-model="form.name" placeholder="请输入分类名" clearable />
                 </el-form-item>
-        <el-form-item label='分类标识' prop='code'>
+                <el-form-item label="分类标识" prop="code">
-          <el-input v-model='form.code' placeholder='请输入分类标识' clearable />
+                    <el-input v-model="form.code" placeholder="请输入分类标识" clearable />
                 </el-form-item>
-        <el-form-item label='分类描述' prop='description'>
+                <el-form-item label="分类描述" prop="description">
-          <el-input v-model='form.description' placeholder='请输入分类描述' clearable type='textarea'>
+                    <el-input
-          </el-input>
+                        v-model="form.description"
+                        placeholder="请输入分类描述"
+                        clearable
+                        type="textarea"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item label="排序">
+                    <el-input-number style="width: 100%" v-model="form.sort" :min="0" placeholder="请输入排序" />
                 </el-form-item>
             </el-form>
         </el-scrollbar>
         <template #footer>
-            <span class='dialog-footer'>
+            <span class="dialog-footer">
-                <el-button @click='machineVisible = false'>取消</el-button>
+                <el-button @click="machineVisible = false">取消</el-button>
-                <el-button type='primary' @click='submit'>确认</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
             </span>
         </template>
     </el-dialog>
 </template>
-<script lang='ts' setup>
+<script lang="ts" setup>
 import { ref, reactive, inject } from 'vue'
 import { ElMessage } from 'element-plus'
 import TableStore from '@/utils/tableStore'
@@ -46,7 +46,8 @@ const form = reactive({
     id: '',
     name: '',
     code: '',
-  description: ''
+    description: '',
+    sort: 100
 })
 
 //form表单校验规则
@@ -68,6 +69,7 @@ const open = (text: string, data?: any) => {
         for (let key in form) {
             form[key] = ''
         }
+        form.sort=100
     }
     machineVisible.value = true
 }

src/views/system/bpm/category/index.vue

@@ -49,6 +49,7 @@ const tableStore = new TableStore({
     { title: '分类标识', field: 'code', minWidth: 130 },
     { title: '分类描述', field: 'description', minWidth: 170 },
     { title: '创建时间', field: 'createTime', minWidth: 170 },
+    { title: '排序', field: 'sort', width: 170 },
     {
       title: '操作',
       align: 'center',

src/views/system/bpm/form/editor/index.vue

@@ -13,8 +13,7 @@
     </content-wrap>
 
     <!-- 表单保存的弹窗 -->
-    <el-dialog v-model='dialogVisible' title='保存表单' class='cn-operate-dialog' style='width: 415px;height: 350px'
+    <el-dialog v-model='dialogVisible' title='保存表单' class='cn-operate-dialog' width="40%">
-               top='30vh'>
       <el-scrollbar>
         <el-form ref='formRef' :model='formData' :rules='formRules' label-width='80px'>
           <el-form-item label='表单名' prop='name'>
@@ -34,6 +33,9 @@
           <el-form-item label='备注' prop='remark'>
             <el-input v-model='formData.remark' placeholder='请输入备注' type='textarea' />
           </el-form-item>
+          <el-form-item label="排序">
+                    <el-input-number style="width: 100%" v-model="formData.sort" :min="0" placeholder="请输入排序" />
+          </el-form-item>
         </el-form>
       </el-scrollbar>
       <template #footer>
@@ -83,7 +85,8 @@ const formLoading = ref(false) // 表单的加载中：提交的按钮禁用
 const formData = ref({
   name: '',
   status: 1,
-  remark: ''
+  remark: '',
+  sort:100,
 })
 const formRules = reactive({
   name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],

src/views/system/bpm/form/index.vue

@@ -64,6 +64,7 @@ const tableStore = new TableStore({
                 1: '开启',
             }
         },
+        { title: '排序', field: 'sort', width: 170 },
         {
             title: '操作',
             align: 'center',

src/views/system/bpm/model/modelPopup.vue

@@ -1,6 +1,6 @@
 <template>
     <el-dialog draggable class='cn-operate-dialog' v-model='dialogVisible' :title='title'
-               style='max-width: 450px;height: 450px'>
+            width="40%">
         <el-scrollbar>
             <el-form :inline='false' :model='formData' label-width='120px' :rules='rules' ref='formRef'>
 

src/views/system/bpm/sign/index.vue

@@ -1,35 +1,27 @@
 <!--流程分类页面-->
 <template>
-  <div class='default-main'>
+    <div class="default-main">
         <TableHeader>
             <template v-slot:select>
-        <el-form-item label='标识名称'>
+                <el-form-item label="标识名称">
-          <el-input
+                    <el-input v-model="tableStore.table.params.name" clearable placeholder="请输入名称" />
-              v-model='tableStore.table.params.name'
-              clearable
-              placeholder='请输入名称'
-          />
                 </el-form-item>
-        <el-form-item label='标识key'>
+                <el-form-item label="标识key">
-          <el-input
+                    <el-input v-model="tableStore.table.params.signKey" clearable placeholder="请输入key" />
-              v-model='tableStore.table.params.signKey'
-              clearable
-              placeholder='请输入key'
-          />
                 </el-form-item>
             </template>
             <template v-slot:operation>
-        <el-button type='primary' class='ml10' @click='add' :icon='Plus'>新增</el-button>
+                <el-button type="primary" class="ml10" @click="add" :icon="Plus">新增</el-button>
             </template>
         </TableHeader>
         <!--表格-->
-    <Table ref='tableRef'></Table>
+        <Table ref="tableRef"></Table>
         <!--弹出框-->
-    <sign-popup ref='signPopup' />
+        <sign-popup ref="signPopup" />
     </div>
 </template>
 
-<script setup lang='ts'>
+<script setup lang="ts">
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
@@ -56,6 +48,7 @@ const tableStore = new TableStore({
         { title: '标识key', field: 'signKey', minWidth: 130 },
         { title: '表单查看地址', field: 'viewPath', minWidth: 200 },
         { title: '创建时间', field: 'createTime', minWidth: 170 },
+        { title: '排序', field: 'sort', width: 170 },
         {
             title: '操作',
             align: 'center',
@@ -101,7 +94,6 @@ const tableStore = new TableStore({
                 delete tableStore.table.params[key]
             }
         }
-
     }
 })
 
@@ -116,5 +108,4 @@ provide('tableStore', tableStore)
 const add = () => {
     signPopup.value.open('新增流程标识')
 }
-
 </script>

src/views/system/bpm/sign/signPopup.vue

@@ -1,36 +1,36 @@
 <!--模型分类的新增编辑弹出框-->
 <template>
-  <el-dialog
+    <el-dialog draggable class="cn-operate-dialog" v-model="machineVisible" :title="title" width="40%">
-      draggable
-      class='cn-operate-dialog'
-      v-model='machineVisible'
-      :title='title'
-      style='width: 415px; height: 350px'
-      top='30vh'
-  >
         <el-scrollbar>
-      <el-form :inline='false' :model='form' label-width='120px' :rules='rules' ref='formRef'>
+            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
-        <el-form-item label='标识名称' prop='name'>
+                <el-form-item label="标识名称" prop="name">
-          <el-input v-model='form.name' placeholder='请输入标识名' clearable />
+                    <el-input v-model="form.name" placeholder="请输入标识名" clearable />
                 </el-form-item>
-        <el-form-item label='分类key' prop='signKey'>
+                <el-form-item label="分类key" prop="signKey">
-          <el-input v-model='form.signKey' placeholder='请输入标识key' clearable />
+                    <el-input v-model="form.signKey" placeholder="请输入标识key" clearable />
                 </el-form-item>
-        <el-form-item label='查看表单路径' prop='viewPath'>
+                <el-form-item label="查看表单路径" prop="viewPath">
-          <el-input v-model='form.viewPath' placeholder='请输入查看表单路径' clearable>
+                    <el-input v-model="form.viewPath" placeholder="请输入查看表单路径" clearable></el-input>
-          </el-input>
+                </el-form-item>
+                <el-form-item label="排序">
+                    <el-input-number
+                        style="width: 100%"
+                        v-model="form.sort"
+                        :min="0"
+                        placeholder="请输入排序"
+                    />
                 </el-form-item>
             </el-form>
         </el-scrollbar>
         <template #footer>
-            <span class='dialog-footer'>
+            <span class="dialog-footer">
-                <el-button @click='machineVisible = false'>取消</el-button>
+                <el-button @click="machineVisible = false">取消</el-button>
-                <el-button type='primary' @click='submit'>确认</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
             </span>
         </template>
     </el-dialog>
 </template>
-<script lang='ts' setup>
+<script lang="ts" setup>
 import { ref, reactive, inject } from 'vue'
 import { ElMessage } from 'element-plus'
 import TableStore from '@/utils/tableStore'
@@ -46,14 +46,15 @@ const form = reactive({
     id: '',
     name: '',
     signKey: '',
-  viewPath: ''
+    viewPath: '',
+    sort:100,
 })
 
 //form表单校验规则
 const rules = {
     name: [{ required: true, message: '标识名不能为空', trigger: 'blur' }],
     signKey: [{ required: true, message: '标识key不能为空', trigger: 'blur' }],
-  viewPath: [{ required: true, message: '查看表单路径不能为空', trigger: 'blur' }],
+    viewPath: [{ required: true, message: '查看表单路径不能为空', trigger: 'blur' }]
 }
 
 const open = (text: string, data?: any) => {
@@ -69,6 +70,7 @@ const open = (text: string, data?: any) => {
         for (let key in form) {
             form[key] = ''
         }
+        form.sort=100
     }
     machineVisible.value = true
 }