rev:前端界面优化

wms_pro/qd/src/views/wms/flow_manage/act/execution/index.vue

@@ -2,25 +2,37 @@
   <div class="app-container">
     <!--工具栏-->
     <div class="head-container">
-      <el-input
-        v-model="query.search"
-        clearable
-        style="width: 300px"
-        size="mini"
-        placeholder="输入模型名称"
-        prefix-icon="el-icon-search"
-        class="filter-item"
-      />
-      <el-input
-        v-model="query.proc_inst_id"
-        clearable
-        style="width: 300px"
-        size="mini"
-        placeholder="输入实例id"
-        prefix-icon="el-icon-search"
-        class="filter-item"
-      />
-      <rrOperation/>
+      <el-form
+        :inline="true"
+        class="demo-form-inline"
+        label-position="right"
+        label-width="80px"
+        label-suffix=":"
+      >
+        <el-form-item label="模型名称">
+          <el-input
+            v-model="query.search"
+            clearable
+            style="width: 300px"
+            size="mini"
+            placeholder="输入模型名称"
+            prefix-icon="el-icon-search"
+            class="filter-item"
+          />
+        </el-form-item>
+        <el-form-item label="实例ID">
+          <el-input
+            v-model="query.proc_inst_id"
+            clearable
+            style="width: 300px"
+            size="mini"
+            placeholder="输入实例id"
+            prefix-icon="el-icon-search"
+            class="filter-item"
+          />
+        </el-form-item>
+        <rrOperation/>
+      </el-form>
       <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
       <crudOperation :permission="permission"/>
       <!--表单组件-->
@@ -104,7 +116,8 @@
         <el-table-column prop="remark" show-overflow-tooltip show-tooltip-when-overflow label="备注"/>
         <el-table-column prop="form_type" show-overflow-tooltip show-tooltip-when-overflow width="130" label="表单类型"/>
         <el-table-column prop="form_id" show-overflow-tooltip show-tooltip-when-overflow width="130" label="表单id"/>
-        <el-table-column prop="form_data" show-overflow-tooltip show-tooltip-when-overflow width="130" label="表单数据" :formatter="jsonFormat"/>
+        <el-table-column prop="form_data" show-overflow-tooltip show-tooltip-when-overflow width="130" label="表单数据"
+                         :formatter="jsonFormat"/>
         <el-table-column prop="create_id" label="创建人" width="135"/>
         <el-table-column prop="create_time" label="创建时间" width="135"/>
         <el-table-column prop="update_time" label="修改时间" width="135"/>
@@ -121,8 +134,26 @@
               :permission="permission"
               style="display: inline"
             />
-            <el-button slot="right" @click="flowConfirm(scope.row.proc_inst_id)" type="text" icon="el-icon-video-play" size="mini">触发</el-button>
-            <el-button slot="right" @click="viewClick(scope.row)" type="text" icon="el-icon-thumb" size="mini">预览</el-button>
+            <el-popover
+              placement="top"
+              width="180"
+              trigger="click"
+              :value="popoverVisible"
+              @hide="onPopoverHide"
+            >
+              <p>{{ popoverMessage }}</p>
+              <div style="text-align: right; margin: 0">
+                <el-button size="mini" type="text" @click="cancelFlow">取消</el-button>
+                <el-button :loading="triggerLoading" type="primary" size="mini"
+                           @click="confirmFlow(scope.row.proc_inst_id)">确定
+                </el-button>
+              </div>
+              <el-button slot="reference" type="text" icon="el-icon-video-play" size="mini" @click="showPopover">触发
+              </el-button>
+            </el-popover>
+            <!--            <el-button slot="right" @click="flowConfirm(scope.row.proc_inst_id)" type="text" icon="el-icon-video-play" size="mini">触发</el-button>-->
+            <el-button slot="right" @click="viewClick(scope.row)" type="text" icon="el-icon-thumb" size="mini">预览
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -159,7 +190,7 @@ const defaultForm = {
   form_data: null
 }
 export default {
-  dicts: [ "FLOW_STATUS" ],
+  dicts: ["FLOW_STATUS"],
   name: 'Execution',
   components: {pagination, crudOperation, rrOperation, udOperation, ViewCurrentFlowDesigner},
   mixins: [presenter(), header(), form(defaultForm), crud()],
@@ -181,6 +212,9 @@ export default {
       formTypes: [],
       permission: {},
       modelJson: '',
+      popoverMessage: "确定要触发流程吗？",
+      triggerLoading: false,
+      popoverVisible: false,
       statusList: [
         {
           value: "30",
@@ -209,6 +243,23 @@ export default {
       this.form.form_data = JSON.stringify(this.form.form_data)
       return true
     },
+    showPopover() {
+      this.popoverVisible = true;
+    },
+    cancelFlow() {
+      this.popoverVisible = false;
+    },
+    confirmFlow(proc_inst_id) {
+      this.triggerLoading = true;
+      curdExecution.flowConfirm(proc_inst_id).then(res => {
+        this.crud.notify("触发成功", CRUD.NOTIFICATION_TYPE.SUCCESS)
+        this.triggerLoading = false;
+        this.popoverVisible = false;
+      })
+    },
+    onPopoverHide() {
+      this.triggerLoading = false;
+    },
     jsonFormat(row, index) {
       if (row.form_data != null) {
         return JSON.stringify(row.form_data)

wms_pro/qd/src/views/wms/flow_manage/act/model/index.vue

@@ -2,16 +2,26 @@
   <div class="app-container">
     <!--工具栏-->
     <div class="head-container">
-      <el-input
-        v-model="query.search"
-        clearable
-        style="width: 300px"
-        size="mini"
-        placeholder="输入模型名称"
-        prefix-icon="el-icon-search"
-        class="filter-item"
-      />
-      <rrOperation/>
+      <el-form
+        :inline="true"
+        class="demo-form-inline"
+        label-position="right"
+        label-width="80px"
+        label-suffix=":"
+      >
+        <el-form-item label="模型信息">
+          <el-input
+            v-model="query.search"
+            clearable
+            style="width: 300px"
+            size="mini"
+            placeholder="请输入模型名称"
+            prefix-icon="el-icon-search"
+            class="filter-item"
+          />
+        </el-form-item>
+        <rrOperation/>
+      </el-form>
       <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
       <crudOperation :permission="permission"/>
       <!--表单组件-->
@@ -111,12 +121,12 @@
           <template slot-scope="scope">
             <el-button size="mini" type="text" icon="el-icon-edit" @click="crud.toEdit(scope.row)">修改</el-button>
             <el-button size="mini" type="text" icon="el-icon-delete" @click="handdeleted(scope.row)">删除</el-button>
-            <el-dropdown size="mini">
+            <el-dropdown trigger="click" size="mini">
               <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item icon="el-icon-refresh-right"><span @click="publishClick(scope.row)">发布</span></el-dropdown-item>
-                <el-dropdown-item icon="el-icon-key"><span @click="viewClick(scope.row)">预览</span> </el-dropdown-item>
-                <el-dropdown-item icon="el-icon-key"><span @click="handleClick(scope.row)">设计</span></el-dropdown-item>
+                <el-dropdown-item :disabled="publishDisabled(scope.row)" @click.native="publishClick(scope.row)" icon="el-icon-refresh-right"><span>发布</span></el-dropdown-item>
+                <el-dropdown-item icon="el-icon-thumb" @click.native="viewClick(scope.row)"><span>预览</span> </el-dropdown-item>
+                <el-dropdown-item icon="el-icon-set-up" @click.native="handleClick(scope.row)"><span>设计</span></el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </template>