From 53a2f5996aaa5dcdc1cf6f4c3104ae38425e2b01 Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Sat, 8 Aug 2020 15:27:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E7=AE=A1=E7=90=86=E4=B8=8A?=
 =?UTF-8?q?=E4=B8=8B=E6=9E=B6=E8=A7=84=E5=88=99=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/index.css                      |  10 +-
 src/components/apass-table.vue                | 151 ++++++++++-
 .../process-management/designer/index.vue     | 248 +++++++++++++++++-
 src/pages/workbench/fwgl/fwglList.vue         |  19 +-
 4 files changed, 406 insertions(+), 22 deletions(-)

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index dbcd2f7..6772c5e 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -609,10 +609,14 @@ width: 620px!important;
   color: #999;
   cursor: not-allowed;
 }
+.apass_table .row_action .disabled.hide {
+  opacity: 0;
+  cursor: auto;
+}
 .apass_table .row_action .interval_line {
-    font-size: 14px;
-    color: #dde4ff;
-    margin: 0 20px;
+  font-size: 14px;
+  color: #dde4ff;
+  margin: 0 20px;
 }
 .apass_table .border-active td {
   padding: 10px 0;
diff --git a/src/components/apass-table.vue b/src/components/apass-table.vue
index 74988ca..cfdbada 100644
--- a/src/components/apass-table.vue
+++ b/src/components/apass-table.vue
@@ -25,6 +25,7 @@
               <span
                 v-if="v.disabledRule && v.disabledRule(scope.row)"
                 class="btn disabled"
+                :class="{ hide: v.disableHide }"
                 :key="'btn_' + index + '_' + i"
                 v-text="v.getLabel ? v.getLabel(scope.row) : v.label"
               >
@@ -42,8 +43,24 @@
                 v-if="i < item.actionList.length - 1"
                 class="interval_line"
                 :key="'line_' + index + '_' + i"
-                >|</span
               >
+                |
+              </span>
+            </template>
+            <template v-if="item.moreActionList">
+              <span
+                class="interval_line"
+                v-if="item.actionList && item.actionList.length > 0"
+              >
+                |
+              </span>
+              <a
+                class="btn"
+                @mouseenter="mouseenter($event, item.moreActionList, scope.row)"
+                @mouseleave="mouseleave"
+              >
+                更多
+              </a>
             </template>
           </div>
           <div v-else-if="item.type === 'button'" class="row_action">
@@ -94,7 +111,7 @@
                 tag_flag_arr[scope.$index] == 0 &&
                   scope.row[item.prop].length > 2
               "
-              @click.stop="change_tag(scope.$index, 1)"
+              @click.stop="changeTag(scope.$index, 1)"
             ></div>
             <div
               class="tagclo btn_up"
@@ -102,7 +119,7 @@
                 tag_flag_arr[scope.$index] == 1 &&
                   scope.row[item.prop].length > 2
               "
-              @click.stop="change_tag(scope.$index, 0)"
+              @click.stop="changeTag(scope.$index, 0)"
             ></div>
           </div>
           <div v-else-if="item.type === 'chart'" class="charts">
@@ -115,16 +132,32 @@
                 :styles="item.prop == 'cpu' ? spCurveStyles2 : spCurveStyles3"
               />
             </sparkline>
-            <span class="use" v-if="item.prop == 'cpu'&&scope.row.cpu_use"
+            <span class="use" v-if="item.prop == 'cpu' && scope.row.cpu_use"
               >{{ scope.row["cpu_use"] }}.00mm</span
             >
-            <span class="use" :style="scope.row[item.prop].length?{}:{right:'25px',bottom:'8px'}" v-if="item.prop == 'cpu'&&!scope.row.cpu_use"
+            <span
+              class="use"
+              :style="
+                scope.row[item.prop].length
+                  ? {}
+                  : { right: '25px', bottom: '8px' }
+              "
+              v-if="item.prop == 'cpu' && !scope.row.cpu_use"
               >0mm</span
             >
-            <span class="use" v-if="item.prop == 'mermoy'&&scope.row.memory_use"
+            <span
+              class="use"
+              v-if="item.prop == 'mermoy' && scope.row.memory_use"
               >{{ scope.row["memory_use"] }}Mi</span
             >
-            <span class="use" :style="scope.row[item.prop].length?{}:{right:'25px',bottom:'8px'}" v-if="item.prop == 'mermoy'&&!scope.row.memory_use"
+            <span
+              class="use"
+              :style="
+                scope.row[item.prop].length
+                  ? {}
+                  : { right: '25px', bottom: '8px' }
+              "
+              v-if="item.prop == 'mermoy' && !scope.row.memory_use"
               >0Mi</span
             >
           </div>
@@ -210,6 +243,22 @@
         </template>
       </el-table-column>
     </el-table>
+
+    <ul
+      ref="moreActionList"
+      class="more_action_list"
+      :style="moreActionStyle"
+      @mouseenter="enterMoreActionList"
+      @mouseleave="leaveMoreActionList"
+      v-show="showMoreActionList"
+    >
+      <li
+        v-for="(item, index) in moreActionList"
+        :key="'more_' + index"
+        @click="item.callback"
+        v-text="item.label"
+      ></li>
+    </ul>
   </div>
 </template>
 
@@ -257,6 +306,12 @@ export default {
         strokeOpacity: 0,
         strokeDasharray: "2, 2",
       },
+      moreActionList: [],
+      showMoreActionList: false,
+      moreActionStyle: {
+        top: 0,
+        left: 0,
+      },
     };
   },
   mounted() {
@@ -266,7 +321,7 @@ export default {
     );
   },
   methods: {
-    change_tag(index, val) {
+    changeTag(index, val) {
       this.$set(this.tag_flag_arr, index, val);
     },
     sortChange(value) {
@@ -278,6 +333,42 @@ export default {
     getPercent(num) {
       return Math.round(num * 100) + "%";
     },
+    mouseenter($event, moreActionList, row) {
+      let _self = this;
+
+      _self.moreActionList = [];
+      _self.showMoreActionList = true;
+      _self.moreActionList = moreActionList.map((item) => ({
+        id: row.id,
+        label: item.label,
+        callback() {
+          _self.showMoreActionList = false;
+          _self.moreActionList = [];
+
+          item.callback && item.callback(row);
+        },
+      }));
+
+      _self.$nextTick(() => {
+        let targetInfo = $event.target.getBoundingClientRect();
+        let containerInfo = _self.$refs.moreActionList.getBoundingClientRect();
+
+        _self.moreActionStyle = {
+          top: targetInfo.y + targetInfo.height + 15 + "px",
+          left:
+            targetInfo.x - (containerInfo.width - targetInfo.width) / 2 + "px",
+        };
+      });
+    },
+    mouseleave() {
+      this.showMoreActionList = false;
+    },
+    enterMoreActionList() {
+      this.showMoreActionList = true;
+    },
+    leaveMoreActionList() {
+      this.showMoreActionList = false;
+    },
   },
 };
 </script>
@@ -389,4 +480,48 @@ export default {
 .selected_icon.selected > span {
   display: block;
 }
+.more_action_list {
+  position: fixed;
+}
+.more_action_list > li {
+  padding: 5px 20px;
+  background-color: #0f2683;
+  font-size: 12px;
+  line-height: 20px;
+  color: #fff;
+  cursor: pointer;
+  position: relative;
+}
+.more_action_list > li:first-child {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+.more_action_list > li:first-child::before {
+  content: "";
+  position: absolute;
+  top: -14px;
+  right: calc(50% - 14px);
+  width: 28px;
+  height: 14px;
+}
+.more_action_list > li:first-child::after {
+  content: "";
+  position: absolute;
+  top: -14px;
+  right: calc(50% - 7px);
+  border-top: 0 solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 14px solid #0f2683;
+  border-left: 7px solid transparent;
+}
+.more_action_list > li:last-child {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.more_action_list > li:hover {
+  background-color: #3f4f9c;
+}
+.more_action_list > li:first-child:hover::after {
+  border-bottom: 14px solid #3f4f9c;
+}
 </style>
diff --git a/src/pages/workbench/component-center/process-management/designer/index.vue b/src/pages/workbench/component-center/process-management/designer/index.vue
index 1faa7b9..2b31315 100644
--- a/src/pages/workbench/component-center/process-management/designer/index.vue
+++ b/src/pages/workbench/component-center/process-management/designer/index.vue
@@ -1,5 +1,249 @@
 <template>
-  <div>
-    list
+  <div class="process-designer-container">
+    <apass-list
+      ref="list"
+      search-placeholder="请输入关键字"
+      :list-filter="filterList"
+      :list-header="listHeader"
+      :list-data="listData"
+      :list-total="listTotal"
+      @list-action="init"
+      :list-padding-left="40"
+    >
+      <el-button type="primary" slot="header-left" @click="addNewProcess">
+        新建流程
+      </el-button>
+
+      <el-breadcrumb separator="/" slot="breadcrumb">
+        <el-breadcrumb-item>
+          在线组件工具
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>
+          流程设计
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>
+          流程管理
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+    </apass-list>
+
+    <apass-dialog
+      ref="dialog"
+      :title="dialogInfo.title"
+      :msg="dialogInfo.msg"
+      :submit="dialogInfo.submit"
+    ></apass-dialog>
   </div>
 </template>
+
+<script>
+import helper from "@/services/helper.js";
+import apassList from "@/components/apass-list";
+import apassDialog from "@/components/apass-dialog";
+
+export default {
+  components: {
+    apassList,
+    apassDialog,
+  },
+  data: () => ({
+    filterList: [
+      {
+        name: "服务领域",
+      },
+      {
+        name: "工作区域",
+      },
+      {
+        name: "流程状态",
+      },
+    ],
+    listHeader: [],
+    listData: [],
+    listTotal: 0,
+    dialogInfo: {
+      msg: "",
+      submit: null,
+    },
+    tempFilter: null,
+  }),
+  methods: {
+    init(filter) {
+      console.log(filter);
+      this.tempFilter = filter;
+
+      this.listTotal = 3;
+      this.listData = [
+        {
+          id: "WF00000001",
+          name: "保安资格申请流程",
+          sectors_name: "经济建设",
+          create_time: "2021-01-01T00:00:00Z",
+          state: "0",
+        },
+        {
+          id: "WF00000002",
+          name: "保安考试流程",
+          sectors_name: "经济建设",
+          create_time: "2021-01-01T00:00:00Z",
+          state: "1",
+        },
+        {
+          id: "WF00000003",
+          name: "申请材料审核流程",
+          sectors_name: "经济建设",
+          create_time: "2021-01-01T00:00:00Z",
+          state: "2",
+        },
+      ];
+    },
+    initFilter() {
+      Promise.all([
+        this.$http.get("/apaas/service/v3/service/manager/servtype"),
+        this.$http.get("/apaas/service/v3/service/manager/servarea"),
+      ])
+        .then((response) => {
+          let filterList = response.map((item) => {
+            return {
+              name: item.body.data[0].type_name,
+              prop: item.body.data[0].type_code,
+              data: item.body.data.map((v) => ({
+                name: v.name,
+                value: v.id,
+              })),
+            };
+          });
+
+          this.filterList = [
+            ...filterList,
+            {
+              name: "流程状态",
+              prop: "state",
+              data: [
+                {
+                  name: "已发布",
+                  value: 2,
+                },
+                {
+                  name: "已部署",
+                  value: 1,
+                },
+                {
+                  name: "未部署",
+                  value: 0,
+                },
+              ],
+            },
+          ];
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    refresh() {
+      this.init(this.tempFilter);
+    },
+    addNewProcess() {
+      console.log("addNewProcess");
+    },
+    detailItem(item) {
+      this.$router.push(`/progress/designer/detail/${item.id}`);
+    },
+    publishItem(item) {
+      console.log(item);
+    },
+    editItem(item) {
+      console.log(item);
+    },
+    canceldeployItem(item) {
+      console.log(item);
+    },
+    copyItem(item) {
+      console.log(item);
+    },
+    deleteItem(item) {
+      console.log(item);
+    },
+  },
+  created() {
+    this.initFilter();
+    this.listHeader = [
+      {
+        label: "流程编号",
+        prop: "id",
+        width: 180,
+      },
+      {
+        label: "流程名称",
+        prop: "name",
+        type: "button",
+        callback: this.detailItem,
+      },
+      {
+        label: "服务领域",
+        prop: "sectors_name",
+        align: "center",
+        width: 240,
+      },
+      {
+        label: "创建时间",
+        prop: "create_time",
+        getText(item) {
+          return helper.dateStringTransform(item.create_time || "");
+        },
+        align: "center",
+        width: 180,
+      },
+      {
+        label: "状态",
+        prop: "state",
+        getText(item) {
+          return ["未部署", "已部署", "已发布"][item.state || 0];
+        },
+        align: "center",
+        width: 180,
+      },
+      {
+        label: "操作",
+        type: "buttons",
+        align: "center",
+        width: 300,
+        actionList: [
+          {
+            label: "发布",
+            callback: this.publishItem,
+            disableHide: true,
+            disabledRule(item) {
+              return item.state == 2;
+            },
+          },
+          {
+            label: "编辑",
+            callback: this.editItem,
+          },
+        ],
+        moreActionList: [
+          {
+            label: "取消部署",
+            callback: this.canceldeployItem,
+          },
+          {
+            label: "复制",
+            callback: this.copyItem,
+          },
+          {
+            label: "删除",
+            callback: this.deleteItem,
+          },
+        ],
+      },
+    ];
+  },
+};
+</script>
+
+<style scoped>
+.process-designer-container {
+  height: 100%;
+}
+</style>
diff --git a/src/pages/workbench/fwgl/fwglList.vue b/src/pages/workbench/fwgl/fwglList.vue
index cbcd6d4..ecf1c69 100644
--- a/src/pages/workbench/fwgl/fwglList.vue
+++ b/src/pages/workbench/fwgl/fwglList.vue
@@ -1059,21 +1059,22 @@ export default {
                     return "上架";
                   } else if (item.state == 1 || item.state == 3) {
                     return "下架";
-                  } else {
-                    return "-";
                   }
                 },
                 callback(item) {
-                  if (item.state == 2) {
-                    return _self.soldUpItem(item);
+                  if (item.state == 0) {
+                    return null; // 已下架，上架的操作需要普通用户申请
+                  } else
+                  if (item.state == 1) {
+                    return _self.soldOutItem(item); // 已上架，超管用户可以直接下架
+                  } else if (item.state == 2) {
+                    return _self.soldUpItem(item); // 上架审核中，超管用户可以直接上架
                   } else if (item.state == 3) {
-                    return _self.soldOutItem(item);
-                  } else {
-                    return null;
+                    return _self.soldOutItem(item); // 下架审核中，超管用户可以直接下架
                   }
                 },
                 disabledRule(item) {
-                  return item.state == 0 || item.state == 1;
+                  return item.state == 0;
                 },
               },
               {
@@ -1084,7 +1085,7 @@ export default {
                   // 只有非下架状态可以删除（已上架，下架审核中）
                   return item.state == 1 || item.state == 3;
                 },
-              },
+              }, // ["已下架", "已上架", "上架审核中", "下架审核中"]
             ],
           },
         ];
-- 
2.26.0