流程标识管理功能新增

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

@@ -0,0 +1,120 @@
+<!--流程分类页面-->
+<template>
+  <div class='default-main'>
+    <TableHeader>
+      <template v-slot:select>
+        <el-form-item label='标识名称'>
+          <el-input
+              v-model='tableStore.table.params.name'
+              clearable
+              placeholder='请输入名称'
+          />
+        </el-form-item>
+        <el-form-item label='标识key'>
+          <el-input
+              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>
+      </template>
+    </TableHeader>
+    <!--表格-->
+    <Table ref='tableRef'></Table>
+    <!--弹出框-->
+    <sign-popup ref='signPopup' />
+  </div>
+</template>
+
+<script setup lang='ts'>
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { onMounted, provide, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import SignPopup from '@/views/system/bpm/sign/signPopup.vue'
+import { deleteSign } from '@/api/bpm-boot/sign'
+
+defineOptions({
+  name: 'bpmSign'
+})
+
+const { push } = useRouter()
+const signPopup = ref()
+
+const tableStore = new TableStore({
+  url: '/bpm-boot/bpmSign/list',
+  method: 'POST',
+  column: [
+    { title: '序号', type: 'seq', width: 80 },
+    { title: '标识名称', field: 'name', minWidth: 130 },
+    { title: '标识key', field: 'signKey', minWidth: 130 },
+    { title: '表单查看地址', field: 'viewPath', minWidth: 200 },
+    { title: '创建时间', field: 'createTime', minWidth: 170 },
+    {
+      title: '操作',
+      align: 'center',
+      minWidth: '150',
+      fixed: 'right',
+      render: 'buttons',
+      buttons: [
+        {
+          name: 'update',
+          title: '编辑',
+          type: 'primary',
+          icon: 'el-icon-EditPen',
+          render: 'basicButton',
+          click: row => {
+            signPopup.value.open('修改流程标识', row)
+          }
+        },
+        {
+          name: 'update',
+          title: '删除',
+          type: 'danger',
+          icon: 'el-icon-Delete',
+          render: 'confirmButton',
+          popconfirm: {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            confirmButtonType: 'danger',
+            title: '确定删除吗？'
+          },
+          click: row => {
+            deleteSign(row.id).then(res => {
+              ElMessage.success('删除成功')
+              tableStore.index()
+            })
+          }
+        }
+      ]
+    }
+  ],
+  beforeSearchFun: () => {
+    for (let key in tableStore.table.params) {
+      if (tableStore.table.params[key] === '') {
+        delete tableStore.table.params[key]
+      }
+    }
+
+  }
+})
+
+onMounted(() => {
+  // 加载数据
+  tableStore.index()
+})
+tableStore.table.params.name = ''
+tableStore.table.params.signKey = ''
+provide('tableStore', tableStore)
+
+const add = () => {
+  signPopup.value.open('新增流程标识')
+}
+
+</script>

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

@@ -0,0 +1,112 @@
+<!--模型分类的新增编辑弹出框-->
+<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>
+            </span>
+    </template>
+  </el-dialog>
+</template>
+<script lang='ts' setup>
+import { ref, reactive, inject } from 'vue'
+import { ElMessage } from 'element-plus'
+import TableStore from '@/utils/tableStore'
+import { addSign, updateSign } from '@/api/bpm-boot/sign'
+
+const tableStore = inject('tableStore') as TableStore
+const machineVisible = ref(false)
+const title = ref('')
+const formRef = ref()
+
+// 注意不要和表单ref的命名冲突
+const form = reactive({
+  id: '',
+  name: '',
+  signKey: '',
+  viewPath: ''
+})
+
+//form表单校验规则
+const rules = {
+  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]
+    }
+  } else {
+    resetForm()
+    // 在此处恢复默认表单
+    for (let key in form) {
+      form[key] = ''
+    }
+  }
+  machineVisible.value = true
+}
+
+//重置表单内容
+const resetForm = () => {
+  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
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped>
+.el-upload-list__item {
+  transition: none !important;
+}
+
+.el-select {
+  min-width: 180px;
+}
+</style>