服务管理编辑提示

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/table-um.vue

@@ -116,7 +116,7 @@
               <b v-for="(btn, key) in item.btnList" :key="key">
                 <em
                   :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>

src/pages/fwgl.vue

@@ -75,7 +75,7 @@ export default {
         name: "云资源管理",
         path: "/fwgl/list/9/云资源管理",
       },
-    ].filter((nav) => nav.level === this.userLevel);
+    ];
 
     this.$router.push(this.navList[0].path);
   },

src/pages/fwglList.vue

@@ -13,9 +13,8 @@
         url="tableData"
         :searchShow="true"
         :autoAdd="false"
-        :isDialog="true"
-        :confirmOptions="confirmOptions"
         detailsUrl="/fwgl/servicedetail/"
+        @primary-del="deleteItem"
         @primary-edit="editItem"
         @sold-out="soldOutItem"
         :emptyText="emptyText"
@@ -24,21 +23,28 @@
         :filterList="filterList"
       ></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,13 +85,37 @@ 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();
+    },
+    confirmSubmit(item) {
+      console.log(item.name);
     },
   },
   mounted() {