feat: 模型/流程图标

src/api/plugin/workflow/model.js

@@ -55,3 +55,11 @@ export const changeCategory = (row) => {
     data: row
   })
 }
+
+export const changeIcon = (row) => {
+  return request({
+    url: `${prefix}/changeIcon`,
+    method: 'post',
+    data: row
+  })
+}

src/views/plugin/workflow/design/model.vue

@@ -48,21 +48,44 @@
                        icon="el-icon-s-promotion"
                        size="small"
                        @click="handleDeploy(row)">部署</el-button>
-            <el-button v-if="permission.wf_design_model_history"
-                       type="text"
-                       size="mini"
-                       icon="el-icon-time"
-                       @click="handleHistory(row)">历史</el-button>
             <el-button v-if="permission.wf_design_model_scope"
                        type="text"
                        size="mini"
-                       icon="el-icon-time"
+                       icon="el-icon-lock"
                        @click="handleScope(row)">权限</el-button>
-            <el-button v-if="permission.wf_design_model_copy"
+            <el-dropdown style="margin-left: 10px;">
+              <el-button size="mini"
+                         type="text">更多操作<i class="el-icon-arrow-down el-icon--right"></i></el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item v-if="permission.wf_design_model_icon"
+                                    @click.native="handleIcon(row)">
+                    <el-button type="text"
+                               size="mini"
+                               icon="el-icon-warning-outline">图标</el-button>
+                  </el-dropdown-item>
+                  <el-dropdown-item v-if="permission.wf_design_model_history"
+                                    @click.native="handleHistory(row)">
+                    <el-button type="text"
+                               size="mini"
+                               icon="el-icon-time">历史</el-button>
+                  </el-dropdown-item>
+                  <el-dropdown-item v-if="permission.wf_design_model_copy"
+                                    @click.native="handleCopy(row)">
+                    <el-button type="text"
+                               size="mini"
+                               icon="el-icon-document-copy">拷贝</el-button>
+                  </el-dropdown-item>
+                  <el-dropdown-item v-if="permission.wf_design_model_delete"
+                                    @click.native="rowDel(row)">
+                    <el-button style="color: #F56C6C;"
                                type="text"
                                size="mini"
-                       icon="el-icon-document-copy"
+                               icon="el-icon-delete">删除</el-button>
-                       @click="handleCopy(row)">拷贝</el-button>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </template>
         </avue-crud>
       </el-main>
@@ -76,6 +99,14 @@
                  @submit="handleDeploySubmit"></avue-form>
     </el-dialog>
 
+    <el-dialog :visible.sync="iconVisible"
+               append-to-body
+               title="上传图标">
+      <avue-form v-model="form"
+                 :option="{column:[{label:'图标',type:'upload',propsHttp:{res:'data',url:'link',name:'originalName'},tip:'建议尺寸：50 * 50',action:'/api/blade-resource/oss/endpoint/put-file',display:true,showFileList:true,prop:'icon',listType:'picture-img',required:true,rules:[{required:true,message:'图标必须填写'}],accept:'image/*'}],}"
+                 @submit="handleIconSubmit"></avue-form>
+    </el-dialog>
+
     <user-option ref="userOption"
                  :user-option="userOption"
                  @submit="handleScopeSubmit"></user-option>
@@ -83,7 +114,7 @@
 </template>
 
 <script>
-import { getList, remove, deploy, changeCategory, getDetail } from "@/api/plugin/workflow/model";
+import { getList, remove, deploy, changeCategory, getDetail, changeIcon } from "@/api/plugin/workflow/model";
 import { getList as scopeList, submit as scopeSubmit } from '@/api/plugin/workflow/model-scope'
 import { tree } from '@/api/plugin/workflow/category';
 
@@ -114,12 +145,19 @@ export default {
         viewBtn: false,
         addBtn: false,
         editBtn: false,
+        delBtn: false,
         selection: true,
         dialogType: 'drawer',
         align: 'center',
         searchMenuSpan: 6,
-        menuWidth: 350,
+        menuWidth: 280,
         column: [
+          {
+            label: "图标",
+            prop: "icon",
+            type: 'upload',
+            width: 80
+          },
           {
             label: "模型key",
             prop: "modelKey",
@@ -176,7 +214,8 @@ export default {
           label: 'name',
           value: 'id'
         }
-      }
+      },
+      iconVisible: false,
     };
   },
   computed: {
@@ -201,6 +240,19 @@ export default {
     this.getCategoryList()
   },
   methods: {
+    handleIcon(row) {
+      this.form = { id: row.id, icon: row.icon }
+      this.iconVisible = true
+    },
+    handleIconSubmit() {
+      const { id, icon } = this.form
+      changeIcon({ id, icon }).then(() => {
+        const row = this.data.find(d => d.id == id)
+        if (row) row.icon = icon
+        this.$message.success('设置图标成功')
+        this.iconVisible = false
+      })
+    },
     handleCopy(row) {
       getDetail(row.id).then(res => {
         const { xml } = res.data.data
@@ -279,6 +331,7 @@ export default {
     },
     handleDeploy(row) {
       this.form.id = row.id
+      this.form.category = row.categoryId
       this.categoryVisible = true
     },
     handleDesign(row) {
@@ -372,5 +425,11 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
+/deep/ .avue-crud__img {
+  img {
+    width: 32px;
+    height: 32px;
+  }
+}
 </style>

src/views/plugin/workflow/process/components/start/grid.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="grid"
+       :class="['animated fadeIn']">
+    <!-- search -->
+    <el-row>
+      <el-form inline
+               label-suffix=":"
+               label-position="left">
+        <el-form-item label="流程名称">
+          <el-input placeholder="请输入流程名称"
+                    v-model="form.name"
+                    size="mini"
+                    clearable></el-input>
+        </el-form-item>
+        <el-form-item label="流程标识">
+          <el-input placeholder="请输入流程标识"
+                    v-model="form.key"
+                    size="mini"
+                    clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary"
+                     size="mini"
+                     icon="el-icon-search"
+                     @click="$emit('search', form)">搜索</el-button>
+          <el-button size="mini"
+                     icon="el-icon-delete"
+                     @click="$emit('reset')">清空</el-button>
+          <el-button size="mini"
+                     circle
+                     icon="el-icon-s-data"
+                     @click="$emit('mode', 'list')"></el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-row :gutter="20"
+            v-if="data.length > 0">
+      <el-col :xs="24"
+              :sm="12"
+              :md="6"
+              :lg="6"
+              :xl="6"
+              v-for="(item, index) in data"
+              :key="index"
+              class="grid-col">
+        <el-card shadow="hover"
+                 :body-style="{padding: '10px 20px'}"
+                 @click.native="$emit('route', item)">
+          <div class="grid-item">
+            <img :src="item.icon || require('../../../assets/img/icon-default.png')"
+                 class="icon">
+            <div class="info">
+              <div class="name txt-cut">{{item.name}}：v{{item.version}}</div>
+              <div class="key txt-cut">{{item.key}}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row v-else>
+      <avue-empty style="margin-top: 20%;"
+                  desc="没有可发起的流程"></avue-empty>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: Array,
+    form: Object
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.txt-cut {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.grid {
+  padding: 0 15px;
+  height: calc(100vh - 165px);
+  overflow: hidden scroll;
+  &-col {
+    margin-bottom: 16px;
+  }
+  .el-card {
+    border-radius: 14px;
+    &:hover {
+      border-color: #388ef8;
+    }
+  }
+
+  &-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    .icon {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      margin-right: 8px;
+    }
+    .info {
+      margin-left: 10px;
+      flex: 1;
+      .name {
+        color: #388ef8;
+        font-size: 15px;
+        margin-bottom: 4px;
+      }
+      .key {
+        font-size: 13px;
+        color: #999;
+      }
+    }
+  }
+}
+</style>

src/views/plugin/workflow/process/start.vue

@@ -7,7 +7,9 @@
                    @node-click="nodeClick"></avue-tree>
       </el-aside>
       <el-main style="margin-left: 10px;">
-        <avue-crud :option="option"
+        <template v-if="mode == 'list'">
+          <avue-crud :class="['animated fadeIn']"
+                     :option="option"
                      :table-loading="loading"
                      :data="data"
                      :page.sync="page"
@@ -18,8 +20,7 @@
                      @selection-change="selectionChange"
                      @current-change="currentChange"
                      @size-change="sizeChange"
-                   @refresh-change="onLoad(page, query)"
+                     @refresh-change="onLoad(page, query)">
-                   @on-load="onLoad">
             <template #menuLeft
                       v-if="isDev">
               <el-tag type="warning"
@@ -27,6 +28,12 @@
                       size="medium"><i class="el-icon-warning"></i> 部署的流程不显示？请查看使用文档或到 模型设计 中配置权限。
               </el-tag>
             </template>
+            <template #menuRight>
+              <el-button size="mini"
+                         circle
+                         icon="el-icon-menu"
+                         @click="handleChangeMode('grid')"></el-button>
+            </template>
             <template slot="menu"
                       slot-scope="{row}">
               <el-button v-if="permission.wf_process_start_flow"
@@ -36,6 +43,14 @@
                          @click="dynamicRoute(row, 'start')">发起</el-button>
             </template>
           </avue-crud>
+        </template>
+        <wf-start-grid v-else-if="mode == 'grid'"
+                       :data="data"
+                       :form="query"
+                       @route="dynamicRoute($event, 'start')"
+                       @mode="handleChangeMode"
+                       @search="searchChange"
+                       @reset="searchReset"></wf-start-grid>
       </el-main>
     </el-container>
   </basic-container>
@@ -48,11 +63,14 @@ import { tree } from '@/api/plugin/workflow/category';
 import { mapGetters } from "vuex";
 
 import exForm from '../mixins/ex-form'
+import WfStartGrid from './components/start/grid.vue'
 
 export default {
   mixins: [exForm],
+  components: { WfStartGrid },
   data() {
     return {
+      mode: 'list',
       form: {},
       query: {},
       loading: true,
@@ -77,6 +95,12 @@ export default {
         searchMenuSpan: 6,
         searchSize: 'mini',
         column: [
+           {
+            label: "图标",
+            prop: "icon",
+            type: 'upload',
+            width: 80
+          },
           {
             label: "流程名称",
             prop: "name",
@@ -156,7 +180,17 @@ export default {
   mounted() {
     this.getCategoryList()
   },
+  created() {
+    this.handleChangeMode(localStorage.getItem("wf-start-mode") || 'list')
+  },
   methods: {
+    handleChangeMode(mode) {
+      localStorage.setItem("wf-start-mode", mode)
+      this.mode = mode
+      if (this.mode == 'grid') this.page.pageSize = 9999
+      else this.page.pageSize = 10
+      this.onLoad(this.page, this.query)
+    },
     getCategoryList() {
       tree().then(res => {
         const data = res.data.data
@@ -205,5 +239,11 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
+/deep/ .avue-crud__img {
+  img {
+    width: 32px;
+    height: 32px;
+  }
+}
 </style>