Merge branch 'dev' of cloud.wodcloud.com:apaas/apaas-v3-ui into dev

src/assets/css/index.css

@@ -201,6 +201,9 @@ div{
   color: #8890a7;
   line-height: 24px!important;
 }
+.el-tabs__nav-scroll .el-tabs__item {
+  line-height: 40px!important;
+}
 .el-tabs__item:hover {
   color: #687087;
 

src/components/commodity.vue

@@ -119,7 +119,9 @@ export default {
   }),
   computed: {},
   watch: {},
-  methods: {},
+  methods: {
+    handleChange() {}
+  },
   mounted() {}
 };
 </script>

src/components/dialog-action.vue

+<template>
+  <transition name="mask-bg-fade">
+    <el-dialog
+      :visible.sync="show"
+      width="400px"
+      top="25vh"
+      class="user-dialog"
+    >
+      <span slot="title">
+        <b class="iconLeft"></b>
+        <span style=" display: inline-block;vertical-align: middle;">
+          {{ confirmOptions.title || "提示" }}
+        </span>
+      </span>
+      <span>{{ confirmOptions.message || "" }}</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          class="form_c"
+          type="defalut"
+          size="mini"
+          @click="hideModel"
+          >{{ confirmOptions.btnCancelText || "取消" }}</el-button
+        >
+        <el-button
+          class="form_t"
+          type="primary"
+          size="mini"
+          @click="confirmSubmit"
+          >{{ confirmOptions.btnSubmitText || "确定" }}</el-button
+        >
+      </span>
+    </el-dialog>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: "dialogAction",
+  props: {
+    confirmOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+    showModel() {
+      this.show = true;
+    },
+    hideModel() {
+      this.show = false;
+    },
+    confirmSubmit() {
+      typeof this.confirmOptions.confirmSubmit === "function" &&
+        this.confirmOptions.confirmSubmit();
+    },
+  },
+};
+</script>
+<style>
+.el-dialog__header {
+  border-bottom: 1px solid #edf0ff;
+  padding: 20px 20px 16px !important;
+  font-family: "MicrosoftYaHei";
+  font-size: 16px;
+  color: #1d1e20;
+  font-weight: 800;
+}
+.el-dialog__header .iconLeft {
+  width: 4px;
+  height: 16px;
+  background-color: #0367f6;
+  border-radius: 2px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 3px;
+}
+.el-icon-close:before {
+  font-weight: 800 !important;
+}
+.el-dialog__body {
+  padding: 49px 20px !important;
+}
+</style>
+<style scoped>
+.group-dialog.el-dialog__wrapper {
+  width: 100% !important;
+  left: 0 !important;
+  overflow: hidden;
+}
+.user-dialog {
+  overflow: hidden;
+}
+</style>

src/components/servive-step.vue

+<template>
+  <div class="service_step">
+    <div class="step_bg"></div>
+    <ul class="step_items">
+      <li class="step_item">
+        <div class="step_icon">
+            <span>1</span>
+        </div>
+        <p class="step_title">服务申请</p>
+      </li>
+      <li class="step_item">
+        <div class="step_icon">
+            <span>2</span>
+        </div>
+        <p class="step_title">审核确认</p>
+      </li>
+      <li class="step_item">
+        <div class="step_icon">
+            <span>3</span>
+        </div>
+        <p class="step_title">费用支付</p>
+      </li>
+      <li class="step_item">
+        <div class="step_icon">
+            <span>4</span>
+        </div>
+        <p class="step_title">服务获取</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.service_step {
+  position: relative;
+  min-height: 48px;
+}
+.service_step > .step_bg {
+  position: absolute;
+  top: 23px;
+  right: 24px;
+  left: 24px;
+  border: 1px solid #1abc9c;
+}
+.service_step > .step_items {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  text-align: center;
+}
+.service_step .step_item > .step_icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: #1abc9c;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 28px;
+  font-weight: bold;
+  color: #fff;
+}
+.service_step .step_item > .step_title {
+  font-size: 12px;
+  line-height: 24px;
+  color: #1abc9c;
+}
+</style>

src/components/side-nav-bar.vue

@@ -9,14 +9,16 @@
       <span v-text="title"></span>
     </h3>
     <ul class="side_nav_bar_list">
-      <li
+      <router-link
+        tag="li"
+        active-class="current"
         v-for="(nav, index) in navList"
         :class="{ current: $route.path.indexOf(nav.path) > -1 }"
         :key="'nav' + index"
-        @click="navAction(nav)"
+        :to="nav.path"
       >
         <span v-text="nav.name"></span>
-      </li>
+      </router-link>
     </ul>
   </div>
 </template>
@@ -39,9 +41,6 @@ export default {
     },
   },
   methods: {
-    navAction(nav) {
-      this.$router.push(nav.path);
-    },
     titleAction() {
       if (this.titlePath) {
         this.$router.push(this.titlePath);

src/components/table-um.vue

@@ -115,15 +115,17 @@
             <span v-if="item.type === 'Button'">
               <b v-for="(btn, key) in item.btnList" :key="key">
                 <em
+                  class="action"
                   v-if="btn.label == '分配'||btn.label == '已分配'"
                 >
                   <em v-if="btn.label == '分配'&&scope.row.state == 0"  style="color: #0f2683" @click="handleClick(btn.type, scope.row)">{{ btn.label }}</em>
                   <em v-if="btn.label == '已分配'&&scope.row.state == 1">{{ btn.label }}</em>
                 </em>
                 <em
+                  class="action"
                   v-else
                   :class="btn.type"
-                  style="color: #0f2683"
+                  :style="{color: btn.label=='删除' ? '#830f53' : '#0f2683'}"
                   @click="handleClick(btn.type, scope.row)"
                 >{{ btn.label }}</em>
                 <em v-if="btn.line" style="padding:0 20px;color:#edf0ff">{{ btn.line }}</em>
@@ -601,6 +603,10 @@ export default {
 }
 em {
   font-style: normal;
+  user-select: none;
+}
+em.action {
+  cursor: pointer;
 }
 .ces-table .el-table--mini td,
 .ces-table .el-table--mini th {

src/pages/example_commodity.vue

@@ -2,7 +2,10 @@
   <div class="com_ex">
     <block-radius>
       <h3>按原型大致做了一下，调优等后续</h3>
+
       <Commodity :datas="datas" />
+  
+      <servive-info></servive-info>
     </block-radius>
   </div>
 </template>
@@ -11,10 +14,12 @@
 // @ is an alias to /src
 import Commodity from "@/components/commodity.vue";
 import BlockRadius from "@/components/block-radius";
+import serviveInfo from "@/components/servive-info";
 export default {
   components: {
     Commodity,
-    BlockRadius
+    BlockRadius,
+    serviveInfo,
   },
   data: () => ({
     datas: {
@@ -24,19 +29,18 @@ export default {
       updated: "2020-03-12 18:31:12",
       dataField: "经济建设",
       serviceType: "综合应用服务",
-      resourceSummary:
-        "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
+      resourceSummary: "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
       openLevel: "共享",
       views: "99999",
       numberOfAcquisitions: "99999",
-      specifications:
-        "用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问"
-    }
+      specifications: "用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问",
+    },
   }),
   mounted() {},
-  methods: {}
+  methods: {},
 };
 </script>
+
 <style scoped>
 .com_ex {
   margin-top: 100px;

src/pages/fwgl.vue

 <template>
   <div class="fwgl_container">
-    <side-nav-bar :nav-list="navList" title-path="/fwgl"></side-nav-bar>
+    <side-nav-bar :nav-list="navList" :title-path="navList[0].path"></side-nav-bar>
     <div class="main_container">
       <router-view
         :key="'type_' + $route.params && $route.params.type"

src/pages/fwglList.vue

@@ -8,37 +8,47 @@
       <ces-table
         class="r_yhgl_table"
         size="mini"
+        url="tableData"
+        detailsUrl="/fwgl/servicedetail/"
         :border="false"
         :headers="headers"
-        url="tableData"
         :searchShow="true"
         :autoAdd="false"
-        :isDialog="true"
-        :confirmOptions="confirmOptions"
-        detailsUrl="/fwgl/servicedetail/"
-        @primary-edit="editItem"
-        @sold-out="soldOutItem"
         :emptyText="emptyText"
         :stripe="true"
         :pageSizeShow="true"
         :filterList="filterList"
+        :isIndex="false"
+        @action-delete="deleteItem"
+        @action-edit="editItem"
+        @action-sold-out="soldOutItem"
+        @action-cancel="cancelItem"
+        @action-examine="examineItem"
+        @action-detail="detailItem"
       ></ces-table>
     </div>
+    <dialog-action
+      ref="myConfirm"
+      :confirm-options="confirmOptions"
+    ></dialog-action>
   </div>
 </template>
 
 <script>
 import cesTable from "@/components/table-um";
+import dialogAction from "@/components/dialog-action";
+
 export default {
   data: () => ({
     headers: [],
     url: "",
     detailsUrl: "ss/",
     confirmOptions: {
-      title: "提示", //提示
-      message: "确认删除该条数据？", //""
-      btnCancelText: "取消", //取消
-      btnSubmitText: "确定", //确定
+      title: "",
+      message: "",
+      btnCancelText: "",
+      btnSubmitText: "",
+      item: null,
     },
     emptyText: "暂时没数据",
     filterList: [
@@ -79,55 +89,95 @@ export default {
   }),
   components: {
     cesTable,
+    dialogAction,
   },
   methods: {
+    deleteItem(item) {
+      this.confirmOptions.title = "";
+      this.confirmOptions.message = "是否删除该条服务？";
+      this.confirmOptions.btnCancelText = "";
+      this.confirmOptions.btnSubmitText = "";
+      this.confirmOptions.confirmSubmit = () => {
+        console.log("deleteItem - " + item.name);
+        this.$refs.myConfirm.hideModel();
+      };
+      this.$refs.myConfirm.showModel();
+    },
     editItem(item) {
       this.$router.push("/fwgl/serviceedit/" + item.id);
     },
     soldOutItem(item) {
-      console.log(item);
+      this.confirmOptions.title = "是否删除该条服务？";
+      this.confirmOptions.message =
+        "下架此服务会导致用户被迫暂停对服务的调用，下架前需向超级管理员发送通知，超级管理员通过后此服务将会从服务超市中下架。";
+      this.confirmOptions.btnCancelText = "";
+      this.confirmOptions.btnSubmitText = "发送通知";
+      this.confirmOptions.confirmSubmit = () => {
+        console.log("soldOutItem - " + item.name);
+        this.$refs.myConfirm.hideModel();
+      };
+      this.$refs.myConfirm.showModel();
+    },
+    cancelItem(item) {
+      console.log("cancelItem - " + item.name);
+    },
+    examineItem(item) {
+      console.log("examineItem - " + item.name);
+    },
+    detailItem(item) {
+      console.log("detailItem - " + item.name);
+    },
+    confirmSubmit(item) {
+      console.log(item.name);
     },
   },
   mounted() {
-    this.headers = [];
-
-    this.headers.push(
-      { label: "服务名称", prop: "name", type: "href", align: "left" },
-      { label: "服务url", prop: "date", type: "href", align: "center" },
-      { label: "开放程度", prop: "address", type: "href", align: "center" },
-      { label: "服务描述", prop: "address", type: "href", align: "left" },
-      { label: "注册发布时间", prop: "address", type: "href", align: "center" },
-      { label: "服务类型", prop: "address", type: "href", align: "center" }
-    );
-
     switch (parseInt(this.$route.params.type)) {
       case 0:
-        this.headers.push({
+        this.headers = [
+          { label: "服务名称", prop: "name", type: "href", align: "left" },
+          { label: "服务url", prop: "date", type: "", align: "center" },
+          { label: "开放程度", prop: "address", type: "", align: "center" },
+          { label: "服务描述", prop: "address", type: "", align: "left" },
+          {
+            label: "注册发布时间",
+            prop: "address",
+            type: "",
+            align: "center",
+          },
+          { label: "服务类型", prop: "address", type: "", align: "center" },
+          {
             label: "操作",
             type: "Button",
             align: "center",
             width: 240,
             btnList: [
               {
-              type: "primary-edit",
+                type: "action-edit",
                 label: "编辑",
                 line: "|",
               },
               {
-              type: "sold-out",
+                type: "action-sold-out",
                 label: "申请下架",
                 line: "|",
               },
               {
-              type: "primary-del",
+                type: "action-delete",
                 label: "删除",
               },
             ],
-        });
+          },
+        ];
         break;
       case 1:
-        this.headers.push(
-          { label: "申请状态", prop: "address", type: "href", align: "center" },
+        this.headers = [
+          { label: "服务名称", prop: "name", type: "href", align: "left" },
+          { label: "服务领域", prop: "date", type: "", align: "center" },
+          { label: "开放程度", prop: "address", type: "", align: "center" },
+          { label: "服务描述", prop: "address", type: "", align: "left" },
+          { label: "申请时间", prop: "address", type: "", align: "left" },
+          { label: "服务类型", prop: "address", type: "", align: "center" },
           {
             label: "操作",
             type: "Button",
@@ -135,22 +185,28 @@ export default {
             width: 160,
             btnList: [
               {
-                type: "sold-out",
+                type: "action-cancel",
                 label: "取消",
                 line: "|",
               },
               {
-                type: "primary-del",
+                type: "action-delete",
                 label: "删除",
               },
             ],
-          }
-        );
+          },
+        ];
         break;
       case 2:
-        this.headers.push(
-          { label: "审批时间", prop: "address", type: "href", align: "center" },
-          { label: "审批状态", prop: "address", type: "href", align: "center" },
+        this.headers = [
+          { label: "服务名称", prop: "name", type: "href", align: "left" },
+          { label: "服务领域", prop: "address", type: "", align: "center" },
+          { label: "开放程度", prop: "address", type: "", align: "center" },
+          { label: "请求方式", prop: "address", type: "", align: "center" },
+          { label: "服务描述", prop: "address", type: "", align: "left" },
+          { label: "审批时间", prop: "address", type: "", align: "center" },
+          { label: "服务类型", prop: "address", type: "", align: "center" },
+          { label: "审批状态", prop: "address", type: "", align: "center" },
           {
             label: "操作",
             type: "Button",
@@ -158,17 +214,78 @@ export default {
             width: 160,
             btnList: [
               {
-                type: "sold-out",
+                type: "action-examine",
                 label: "审批",
                 line: "|",
               },
               {
-                type: "primary-del",
+                type: "action-delete",
                 label: "删除",
               },
             ],
-          }
-        );
+          },
+        ];
+        break;
+      case 3:
+        this.headers = [
+          { label: "工作区域", prop: "name", type: "href", align: "left" },
+          { label: "网络环境", prop: "name", type: "", align: "center" },
+          { label: "CPU（核）", prop: "name", type: "", align: "center" },
+          { label: "内存（GB）", prop: "name", type: "", align: "center" },
+          { label: "资源总量（GB）", prop: "name", type: "", align: "center" },
+          { label: "实例数（个）", prop: "name", type: "", align: "center" },
+          { label: "申请时间", prop: "name", type: "", align: "center" },
+          { label: "申请状态", prop: "name", type: "", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            width: 160,
+            btnList: [
+              {
+                type: "action-detail",
+                label: "查看详情",
+              },
+            ],
+          },
+        ];
+        break;
+      default:
+        this.headers = [
+          { label: "服务名称", prop: "name", type: "href", align: "left" },
+          { label: "服务url", prop: "date", type: "", align: "center" },
+          { label: "开放程度", prop: "address", type: "", align: "center" },
+          { label: "服务描述", prop: "address", type: "", align: "left" },
+          {
+            label: "注册发布时间",
+            prop: "address",
+            type: "",
+            align: "center",
+          },
+          { label: "服务类型", prop: "address", type: "", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            width: 160,
+            btnList: [
+              {
+                type: "action-edit",
+                label: "编辑",
+                line: "|",
+              },
+              {
+                type: "action-sold-out",
+                label: "申请下架",
+                line: "|",
+              },
+              {
+                type: "action-delete",
+                label: "删除",
+              },
+            ],
+          },
+        ];
         break;
     }
   },