模型表单优化

src/views/pqs/supervise/interfere/components/undocumented/addForm.vue

@@ -798,7 +798,7 @@ const defaultProps = {
 const nonlinearDeviceTypeList = ref('')
 //获取登陆用户姓名和部门
 const adminInfo = useAdminInfo()
-console.log(adminInfo.$state, '打印登陆用户新信息')
+// console.log(adminInfo.$state, '打印登陆用户新信息')
 const resetForm = () => {
     form.value = {
         reporter: '', //填报人  1

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

@@ -1,34 +1,34 @@
 <!--流程模型管理界面-->
 <template>
-    <div class="default-main">
-        <TableHeader>
-            <template v-slot:select>
-                <!--                <el-form-item label='用户'>-->
-                <!--                    <el-select v-model='tableStore.table.params.userId' filterable clearable>-->
-                <!--                        <el-option-->
-                <!--                            v-for='item in userListData'-->
-                <!--                            :key='item.id'-->
-                <!--                            :label='item.userName'-->
-                <!--                            :value='item.id'-->
-                <!--                        />-->
-                <!--                    </el-select>-->
-                <!--                </el-form-item>-->
-            </template>
-            <template v-slot:operation>
-                <el-button type="primary" @click="add" class="ml10" :icon="Plus">新增模型</el-button>
-            </template>
-        </TableHeader>
-        <!--表格-->
-        <Table ref="tableRef" isGroup></Table>
-        <model-popup ref="modelPopup" />
-        <!-- 弹窗：表单详情 -->
-        <el-dialog title="表单详情" v-model="formDetailVisible" width="800">
-            <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
-        </el-dialog>
-    </div>
+  <div class='default-main'>
+    <TableHeader>
+      <template v-slot:select>
+        <!--                <el-form-item label='用户'>-->
+        <!--                    <el-select v-model='tableStore.table.params.userId' filterable clearable>-->
+        <!--                        <el-option-->
+        <!--                            v-for='item in userListData'-->
+        <!--                            :key='item.id'-->
+        <!--                            :label='item.userName'-->
+        <!--                            :value='item.id'-->
+        <!--                        />-->
+        <!--                    </el-select>-->
+        <!--                </el-form-item>-->
+      </template>
+      <template v-slot:operation>
+        <el-button type='primary' @click='add' class='ml10' :icon='Plus'>新增模型</el-button>
+      </template>
+    </TableHeader>
+    <!--表格-->
+    <Table ref='tableRef' isGroup></Table>
+    <model-popup ref='modelPopup' />
+    <!-- 弹窗：表单详情 -->
+    <el-dialog title='表单详情' v-model='formDetailVisible' width='800'>
+      <form-create :rule='formDetailPreview.rule' :option='formDetailPreview.option' />
+    </el-dialog>
+  </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { Plus } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import TableStore from '@/utils/tableStore'
@@ -36,193 +36,233 @@ 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 { sgUserList } from '@/api/advance-boot/sgGroven/sgUser'
-import { deleteSgScheme } from '@/api/advance-boot/sgGroven/sgScheme'
 import ModelPopup from '@/views/system/bpm/model/modelPopup.vue'
-import { deployModel } from '@/api/bpm-boot/model'
+import { deleteModel, deployModel } from '@/api/bpm-boot/model'
 import { getById } from '@/api/bpm-boot/form'
 import { setConfAndFields2 } from '@/utils/formCreate'
+import { getSignSimpleList } from '@/api/bpm-boot/sign'
 
 defineOptions({
-    name: 'governSchemeHistory'
+  name: 'governSchemeHistory'
 })
 
 const { push } = useRouter()
 const modelPopup = ref()
 
 const tableStore = new TableStore({
-    url: '/bpm-boot/bpm/model/list',
-    method: 'POST',
-    column: [
-        { title: '序号', type: 'seq', width: 80 },
-        { title: '模型标识', field: 'key', width: 160 },
-        { title: '模型名称', field: 'name', width: 160 },
-        { title: '流程分类', field: 'categoryName', width: 150 },
-        { title: '表单信息', field: 'formName', width: 170, },
-        {
-            title: '创建时间',
-            field: 'createTime',
-            width: 150
-        },
-        {
-            title: '最新部署的流程定义',
-            children: [
-                { title: '模型版本', width: '150', field: 'processDefinition.version' },
-                {
-                    title: '激活状态',
-                    width: '150',
-                    field: 'processDefinition.suspensionState',
-                    render: 'switch',
-                    activeValue: '1',
-                    inactiveValue: '0',
-                    onChangeField: (row: any, value) => {
-                        console.log(row, 444123, value)
-                        value == 0 ? (value = 1) : (value = 0)
-                    }
-                    // custom: {
-                    //     2: 'danger',
-                    //     1: 'success'
-                    // },
-                    // replaceValue: {
-                    //     2: '关闭',
-                    //     1: '开启'
-                    // }
-                },
-                { title: '部署时间', width: '150', field: 'processDefinition.deploymentTime' }
-            ]
-        },
-        {
-            title: '操作',
-            align: 'center',
-            minWidth: '200',
-            render: 'buttons',
-            fixed: 'right',
-            buttons: [
-                {
-                    name: 'productSetting',
-                    title: '设计流程',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-                    click: row => {
-                        handleDesign(row.id)
-                    }
-                },
-                {
-                    name: 'productSetting',
-                    title: '部署流程',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-                    click: row => {
-                        handleDeployConfirm(row.id)
-                    }
-                },
-                {
-                    name: 'productSetting',
-                    title: '表单预览',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-                    click: row => {
-                        handleFormDetail(row.formId)
-                    }
-                },
-                {
-                    name: 'update',
-                    title: '删除',
-                    type: 'danger',
-                    icon: 'el-icon-Delete',
-                    render: 'confirmButton',
-                    popconfirm: {
-                        confirmButtonText: '确认',
-                        cancelButtonText: '取消',
-                        confirmButtonType: 'danger',
-                        title: '确定删除吗？'
-                    },
-                    click: row => {
-                        deleteSgScheme(row.id).then(res => {
-                            ElMessage.success('删除成功')
-                            tableStore.index()
-                        })
-                    }
-                }
-            ]
+  url: '/bpm-boot/bpm/model/list',
+  method: 'POST',
+  column: [
+    { title: '序号', type: 'seq', width: 80 },
+    { title: '模型标识', field: 'key', width: 160 },
+    { title: '模型名称', field: 'name', width: 160 },
+    { title: '流程分类', field: 'categoryName', width: 150 },
+    {
+      title: '表单信息', field: 'formName', width: 170,
+      formatter: (obj: any) => {
+        const formType = obj.row.formType
+        if (formType == 20) {
+          return getFormNameByViewPath(obj.row.formCustomViewPath)
+        } else {
+          return obj.row.formName
         }
-    ],
-    beforeSearchFun: () => {
-        if (tableStore.table.params.addr) {
-            tableStore.table.params.addrStrOption = tableStore.table.params.addr.map(tempArray => tempArray.join('/'))
-        }
-        for (let key in tableStore.table.params) {
-            if (tableStore.table.params[key] === '') {
-                delete tableStore.table.params[key]
+      }
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      width: 150
+    },
+    {
+      title: '最新部署的流程定义',
+      children: [
+        {
+          title: '模型版本',
+          width: '150',
+          field: 'processDefinition.version',
+          type: 'html',
+          formatter: (obj: any) => {
+            if (obj.row.processDefinition) {
+              const val = obj.row.processDefinition.version
+              return `<a href='javascript:void(0);'  style='color: #409EFF;text-decoration: none'>v${val}</a>`
+            } else {
+              return '未部署'
             }
+          }
+        },
+        {
+          title: '激活状态',
+          width: '150',
+          field: 'processDefinition.suspensionState',
+          // render: 'switch',
+          // activeValue: '1',
+          // inactiveValue: '0',
+          // onChangeField: (row: any, value) => {
+          //     console.log(row, 444123, value)
+          //     value == 0 ? (value = 1) : (value = 0)
+          // }
+          render: 'tag',
+          custom: {
+            2: 'danger',
+            1: 'success'
+          },
+          replaceValue: {
+            2: '关闭',
+            1: '开启'
+          }
+        },
+        { title: '部署时间', width: '150', field: 'processDefinition.deploymentTime' }
+      ]
+    },
+    {
+      title: '操作',
+      align: 'center',
+      minWidth: '200',
+      render: 'buttons',
+      fixed: 'right',
+      buttons: [
+        {
+          name: 'productSetting',
+          title: '设计流程',
+          type: 'primary',
+          icon: 'el-icon-EditPen',
+          render: 'basicButton',
+          click: row => {
+            handleDesign(row.id)
+          }
+        },
+        {
+          name: 'productSetting',
+          title: '部署流程',
+          type: 'primary',
+          icon: 'el-icon-EditPen',
+          render: 'basicButton',
+          click: row => {
+            handleDeployConfirm(row.id)
+          }
+        },
+        {
+          name: 'productSetting',
+          title: '表单预览',
+          type: 'primary',
+          icon: 'el-icon-EditPen',
+          render: 'basicButton',
+          click: row => {
+            handleFormDetail(row.formId)
+          }
+        },
+        {
+          name: 'update',
+          title: '删除',
+          type: 'danger',
+          icon: 'el-icon-Delete',
+          render: 'confirmButton',
+          popconfirm: {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            confirmButtonType: 'danger',
+            title: '确定删除吗？'
+          },
+          click: row => {
+            deleteModel(row.id).then(res => {
+              ElMessage.success('删除成功')
+              tableStore.index()
+            })
+          }
         }
+      ]
     }
+  ],
+  beforeSearchFun: () => {
+    if (tableStore.table.params.addr) {
+      tableStore.table.params.addrStrOption = tableStore.table.params.addr.map(tempArray => tempArray.join('/'))
+    }
+    for (let key in tableStore.table.params) {
+      if (tableStore.table.params[key] === '') {
+        delete tableStore.table.params[key]
+      }
+    }
+  }
 })
+const flowInfo = ref()
 
-onMounted(() => {
-    // 加载数据
-    tableStore.index()
+onMounted(async () => {
+  // 加载数据
+  tableStore.index()
+  //加载流程标识
+ await getSignSimpleList().then(res => {
+    flowInfo.value = res.data
+  })
 })
 tableStore.table.params.userId = ''
 
 provide('tableStore', tableStore)
 
+
+//获取流程标识的名称
+const getFormNameByViewPath =  (viewPath: string) => {
+  const nameItem = flowInfo.value.filter(item => item.viewPath == viewPath)
+  if (nameItem.length > 0) {
+    return nameItem[0].name
+  } else {
+    return ''
+  }
+}
+
 //新增用户信息
 const add = () => {
-    modelPopup.value.open('新增流程模型')
+  modelPopup.value.open('新增流程模型')
 }
 
 /** 设计流程 */
 const handleDesign = (rowId: string) => {
-    push({
-        name: 'BpmModelEditor',
-        query: {
-            modelId: rowId
-        }
-    })
+  push({
+    name: 'BpmModelEditor',
+    query: {
+      modelId: rowId
+    }
+  })
 }
 
 /** 发布流程 */
 const handleDeployConfirm = (rowId: string) => {
-    try {
-        // 删除的二次确认
-        ElMessageBox.confirm('是否部署该流程?', '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            draggable: true,
-            type: 'warning'
+  try {
+    // 删除的二次确认
+    ElMessageBox.confirm('是否部署该流程?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      draggable: true,
+      type: 'warning'
+    }).then(() => {
+          handleDeploy(rowId)
         })
-            .then(() => {
-                handleDeploy(rowId)
-            })
-            .catch(() => {})
-    } catch {}
+        .catch(() => {
+        })
+  } catch {
+  }
 }
 
 const handleDeploy = async (rowId: string) => {
-    // 发起部署
-    await deployModel(rowId)
-    ElMessage.success('部署成功')
-    tableStore.index()
+  // 发起部署
+  await deployModel(rowId)
+  ElMessage.success('部署成功')
+  tableStore.index()
 }
 
 /** 流程表单的详情按钮操作 */
 const formDetailVisible = ref(false)
 const formDetailPreview = ref({
-    rule: [],
-    option: {}
+  rule: [],
+  option: {}
 })
 
 const handleFormDetail = async (formId: string) => {
-    // 设置表单
-    await getById(formId).then(res => {
-        const data = res.data
-        setConfAndFields2(formDetailPreview, data.conf, data.fields)
-        // 弹窗打开
-        formDetailVisible.value = true
-    })
+  // 设置表单
+  await getById(formId).then(res => {
+    const data = res.data
+    setConfAndFields2(formDetailPreview, data.conf, data.fields)
+    // 弹窗打开
+    formDetailVisible.value = true
+  })
 }
 </script>

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

@@ -4,8 +4,8 @@
     <el-scrollbar>
       <el-form :inline='false' :model='formData' label-width='120px' :rules='rules' ref='formRef'>
 
-        <el-form-item label='表单类型' prop='formType'>
-          <el-radio-group v-model='formData.formType'>
+        <el-form-item label='表单类型' prop='formType' >
+          <el-radio-group v-model='formData.formType' :disabled='!!formData.id'>
             <el-radio border label='20'>业务表单</el-radio>
             <el-radio border label='10'>流程表单</el-radio>
           </el-radio-group>
@@ -40,7 +40,7 @@
         <!--          <UploadImg v-model='formData.icon' :limit='1' height='128px' width='128px' />-->
         <!--        </el-form-item>-->
 
-        <el-form-item label='流程标识' prop='key'>
+        <el-form-item label='流程标识' prop='key' v-if='formData.formType == 20'>
           <el-select v-model='formData.key' clearable style='width: 100%' @change='changeSign'>
             <el-option
                 v-for='item in flowInfo'
@@ -50,10 +50,13 @@
                 placeholder='请选择流程标识'
             />
           </el-select>
-
         </el-form-item>
 
-        <el-form-item label='流程表单' prop='formId' v-if='formData.formType == "10"'>
+        <el-form-item label='流程标识' prop='key' v-else>
+          <el-input v-model='formData.key'  />
+        </el-form-item>
+
+        <el-form-item label='流程表单' prop='formId' v-if='formData.formType == 10'>
           <el-select v-model='formData.formId' clearable style='width: 100%'>
             <el-option
                 v-for='form in formList'
@@ -112,7 +115,7 @@ const formData = reactive({
   category: '',
   icon: '',
   description: '',
-  formType: '20',
+  formType: 20,
   formCustomCreatePath: '',
   formCustomViewPath: '',
   formId: ''
@@ -157,7 +160,7 @@ const open = async (text: string, data?: any) => {
       formData[key] = ''
     }
     //随机一个key给该模型
-    formData.formType = '20'
+    formData.formType = 20
   }
   dialogVisible.value = true
 }