流程管理添加排序

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

@@ -1,36 +1,36 @@
 <!--模型分类的新增编辑弹出框-->
 <template>
-  <el-dialog
-      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-item label='标识名称' prop='name'>
-          <el-input v-model='form.name' placeholder='请输入标识名' clearable />
-        </el-form-item>
-        <el-form-item label='分类key' prop='signKey'>
-          <el-input v-model='form.signKey' placeholder='请输入标识key' clearable />
-        </el-form-item>
-        <el-form-item label='查看表单路径' prop='viewPath'>
-          <el-input v-model='form.viewPath' placeholder='请输入查看表单路径' clearable>
-          </el-input>
-        </el-form-item>
-      </el-form>
-    </el-scrollbar>
-    <template #footer>
-            <span class='dialog-footer'>
-                <el-button @click='machineVisible = false'>取消</el-button>
-                <el-button type='primary' @click='submit'>确认</el-button>
+    <el-dialog draggable class="cn-operate-dialog" v-model="machineVisible" :title="title" width="40%">
+        <el-scrollbar>
+            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
+                <el-form-item label="标识名称" prop="name">
+                    <el-input v-model="form.name" placeholder="请输入标识名" clearable />
+                </el-form-item>
+                <el-form-item label="分类key" prop="signKey">
+                    <el-input v-model="form.signKey" placeholder="请输入标识key" clearable />
+                </el-form-item>
+                <el-form-item label="查看表单路径" prop="viewPath">
+                    <el-input v-model="form.viewPath" placeholder="请输入查看表单路径" clearable></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">
+                <el-button @click="machineVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
             </span>
-    </template>
-  </el-dialog>
+        </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'
@@ -43,59 +43,61 @@ const formRef = ref()
 
 // 注意不要和表单ref的命名冲突
 const form = reactive({
-  id: '',
-  name: '',
-  signKey: '',
-  viewPath: ''
+    id: '',
+    name: '',
+    signKey: '',
+    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' }],
+    name: [{ required: true, message: '标识名不能为空', trigger: 'blur' }],
+    signKey: [{ required: true, message: '标识key不能为空', trigger: 'blur' }],
+    viewPath: [{ required: true, message: '查看表单路径不能为空', trigger: 'blur' }]
 }
 
 const open = (text: string, data?: any) => {
-  title.value = text
-  if (data) {
-    // 表单赋值
-    for (let key in form) {
-      form[key] = data[key]
+    title.value = text
+    if (data) {
+        // 表单赋值
+        for (let key in form) {
+            form[key] = data[key]
+        }
+    } else {
+        resetForm()
+        // 在此处恢复默认表单
+        for (let key in form) {
+            form[key] = ''
+        }
+        form.sort=100
     }
-  } else {
-    resetForm()
-    // 在此处恢复默认表单
-    for (let key in form) {
-      form[key] = ''
-    }
-  }
-  machineVisible.value = true
+    machineVisible.value = true
 }
 
 //重置表单内容
 const resetForm = () => {
-  if (formRef.value) {
-    formRef.value.resetFields()
-  }
+    if (formRef.value) {
+        formRef.value.resetFields()
+    }
 }
 
 /**
  * 提交用户表单数据
  */
 const submit = () => {
-  formRef.value.validate(async (valid: any) => {
-    if (valid) {
-      if (form.id) {
-        await updateSign(form)
-      } else {
-        await addSign(form)
-      }
-      ElMessage.success('保存成功')
-      tableStore.index()
-      machineVisible.value = false
-    }
-  })
+    formRef.value.validate(async (valid: any) => {
+        if (valid) {
+            if (form.id) {
+                await updateSign(form)
+            } else {
+                await addSign(form)
+            }
+            ElMessage.success('保存成功')
+            tableStore.index()
+            machineVisible.value = false
+        }
+    })
 }
 
 defineExpose({ open })
@@ -103,10 +105,10 @@ defineExpose({ open })
 
 <style scoped>
 .el-upload-list__item {
-  transition: none !important;
+    transition: none !important;
 }
 
 .el-select {
-  min-width: 180px;
+    min-width: 180px;
 }
 </style>