From 5e2d6023365c1f75be501ecb391e3856d4f1b973 Mon Sep 17 00:00:00 2001
From: ssc <273702440@qq.com>
Date: Mon, 21 Mar 2022 16:13:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A8=A1=E5=9E=8B/=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/plugin/workflow/model.js              |   8 ++
 .../workflow/assets/img/icon-default.png      | Bin 0 -> 451 bytes
 src/views/plugin/workflow/design/model.vue    |  89 ++++++++++---
 .../process/components/start/grid.vue         | 124 ++++++++++++++++++
 src/views/plugin/workflow/process/start.vue   | 102 +++++++++-----
 5 files changed, 277 insertions(+), 46 deletions(-)
 create mode 100644 src/views/plugin/workflow/assets/img/icon-default.png
 create mode 100644 src/views/plugin/workflow/process/components/start/grid.vue

diff --git a/src/api/plugin/workflow/model.js b/src/api/plugin/workflow/model.js
index 32ef060..11aad26 100644
--- a/src/api/plugin/workflow/model.js
+++ b/src/api/plugin/workflow/model.js
@@ -54,4 +54,12 @@ export const changeCategory = (row) => {
     method: 'post',
     data: row
   })
+}
+
+export const changeIcon = (row) => {
+  return request({
+    url: `${prefix}/changeIcon`,
+    method: 'post',
+    data: row
+  })
 }
\ No newline at end of file
diff --git a/src/views/plugin/workflow/assets/img/icon-default.png b/src/views/plugin/workflow/assets/img/icon-default.png
new file mode 100644
index 0000000000000000000000000000000000000000..88a10e9090134b4d091ce697fa875a779925835e
GIT binary patch
literal 451
zcmV;!0X+VRP)<h;3K|Lk000e1NJLTq0024w0024&0{{R3)@8aH0000&P)t-s=<)tI
zj``i|{!g3wU#0p)mHE!&{<hZrnZ^8Qsrta%{i4eJkiq<^&i#nH`**VYf42Hqp!#sG
z`_<?E$KU<1()>p8jEw*Q0X#`WK~zY`?Ul`zgCGn>`4WPFf1u<0zv@^zUCgP3>Z%Lx
zs;BWvj7c;%H{Z^f0oz?MdlW9XBq%VQRwMrSxvsiX+Qya$uY{dlKGuhlrbl6W)JyzF
zqO*YXj}kM$qcLj$5U6cZ27-J3jIjtMfu*emV17FxW}un#1cakp7}#{P12R<tqCc*M
zxN6yb<It&AJ_fIfIxEeiA4`l-f8U}6%?~hYDTy-NKves)9`r3$4LbG4YAdZ5)tHku
z7}n||N0sUKUf(pmm7I<)NdP2~`m8(bYKwKzUTa}Kn2IM=HKDS4owU@ss-mU#c(POy
zR(hBg>>M@Y$|cYn-4%ZnnV3VT@20*ZvrdEi_h*{ShfIK^*AX;^6Q9axOP%dJ46|jt
t?S7T9$S=ZX&M@xh2_QM_so&guFTXbf2u?Ju5J><4002ovPDHLkV1h6{-XZ`1

literal 0
HcmV?d00001

diff --git a/src/views/plugin/workflow/design/model.vue b/src/views/plugin/workflow/design/model.vue
index a062432..b382eb0 100644
--- a/src/views/plugin/workflow/design/model.vue
+++ b/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"
-                       type="text"
-                       size="mini"
-                       icon="el-icon-document-copy"
-                       @click="handleCopy(row)">拷贝</el-button>
+            <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-delete">删除</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>
diff --git a/src/views/plugin/workflow/process/components/start/grid.vue b/src/views/plugin/workflow/process/components/start/grid.vue
new file mode 100644
index 0000000..df3def4
--- /dev/null
+++ b/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>
diff --git a/src/views/plugin/workflow/process/start.vue b/src/views/plugin/workflow/process/start.vue
index fa0bb90..d79887c 100644
--- a/src/views/plugin/workflow/process/start.vue
+++ b/src/views/plugin/workflow/process/start.vue
@@ -7,35 +7,50 @@
                    @node-click="nodeClick"></avue-tree>
       </el-aside>
       <el-main style="margin-left: 10px;">
-        <avue-crud :option="option"
-                   :table-loading="loading"
-                   :data="data"
-                   :page.sync="page"
-                   :permission="permissionList"
-                   v-model="form"
-                   @search-change="searchChange"
-                   @search-reset="searchReset"
-                   @selection-change="selectionChange"
-                   @current-change="currentChange"
-                   @size-change="sizeChange"
-                   @refresh-change="onLoad(page, query)"
-                   @on-load="onLoad">
-          <template #menuLeft
-                    v-if="isDev">
-            <el-tag type="warning"
-                    effect="dark"
-                    size="medium"><i class="el-icon-warning"></i> 部署的流程不显示？请查看使用文档或到 模型设计 中配置权限。
-            </el-tag>
-          </template>
-          <template slot="menu"
-                    slot-scope="{row}">
-            <el-button v-if="permission.wf_process_start_flow"
-                       type="text"
-                       size="small"
-                       icon="el-icon-video-play"
-                       @click="dynamicRoute(row, 'start')">发起</el-button>
-          </template>
-        </avue-crud>
+        <template v-if="mode == 'list'">
+          <avue-crud :class="['animated fadeIn']"
+                     :option="option"
+                     :table-loading="loading"
+                     :data="data"
+                     :page.sync="page"
+                     :permission="permissionList"
+                     v-model="form"
+                     @search-change="searchChange"
+                     @search-reset="searchReset"
+                     @selection-change="selectionChange"
+                     @current-change="currentChange"
+                     @size-change="sizeChange"
+                     @refresh-change="onLoad(page, query)">
+            <template #menuLeft
+                      v-if="isDev">
+              <el-tag type="warning"
+                      effect="dark"
+                      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"
+                         type="text"
+                         size="small"
+                         icon="el-icon-video-play"
+                         @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>
+<style lang="scss" scoped>
+/deep/ .avue-crud__img {
+  img {
+    width: 32px;
+    height: 32px;
+  }
+}
+</style>
\ No newline at end of file