串联功能

stdiet-ui/src/components/RecipesPlanDrawer/index.vue

@@ -6,19 +6,60 @@
     @closed="handleOnClosed"
     size="40%"
   >
-    <div class="app-container">
+    <div class="app-container recipes_plan_drawer_wrapper">
       <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
           <el-button
+            v-if="cusOutId"
             type="primary"
-            icon="el-icon-plus"
+            icon="el-icon-share"
             size="mini"
-            @click="handleInnerOpen"
+            class="copyBtn"
+            :data-clipboard-text="copyValue"
+            @click="handleOnRecipesLinkClick"
+            >客户食谱链接
+          </el-button>
+
+          <el-button icon="el-icon-view" size="mini" @click="handleInnerOpen"
             >查看暂停记录
           </el-button>
         </el-col>
       </el-row>
 
+      <el-table :data="planList" v-loading="planLoading" height="90%">
+        <el-table-column label="审核状态" align="center" width="80">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.reviewStatus ? 'success' : 'danger'">{{
+              `${scope.row.reviewStatus ? "已审核" : "未审核"}`
+            }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="计划" align="center">
+          <template slot-scope="scope">
+            {{ `第${scope.row.startNumDay} 至 ${scope.row.endNumDay}天` }}
+          </template>
+        </el-table-column>
+        <el-table-column label="日期" align="center">
+          <template slot-scope="scope">
+            {{ `${scope.row.startDate} 至 ${scope.row.endDate}` }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="120">
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              :icon="
+                scope.row.recipesId ? 'el-icon-edit' : 'el-icon-edit-outline'
+              "
+              @click="handleOnRecipesEditClick(scope.row)"
+            >
+              {{ `${scope.row.recipesId ? "编辑" : "制作"}` }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 暂停记录抽屉 -->
       <el-drawer
         :title="innerTitle"
         :append-to-body="true"
@@ -34,7 +75,7 @@
                 icon="el-icon-plus"
                 size="mini"
                 @click="handleInnerOpen"
-                >查看暂停记录
+                >增加暂停记录
               </el-button>
             </el-col>
           </el-row>
@@ -44,6 +85,8 @@
   </el-drawer>
 </template>
 <script>
+import Clipboard from "clipboard";
+import { listRecipesPlanByCusId } from "@/api/custom/recipesPlan";
 export default {
   name: "RecipesPlanDrawer",
   data() {
@@ -52,25 +95,59 @@ export default {
       innerVisible: false,
       title: "",
       innerTitle: "",
+      cusOutId: "",
+      copyValue: "",
+      planLoading: false,
+      planList: [],
     };
   },
   methods: {
     showDrawer(data) {
+      // console.log(data);
       this.data = data;
       if (!this.data) {
         return;
       }
       this.visible = true;
       this.title = `「${this.data.name}」食谱计划`;
+      this.planLoading = true;
+      listRecipesPlanByCusId(data.id).then((response) => {
+        this.planList = response.data;
+        this.cusOutId = response.data.reduce((str, cur) => {
+          if (!str && cur.recipesId) {
+            str = cur.outId;
+          }
+          return str;
+        }, "");
+        console.log(this.planList);
+        this.planLoading = false;
+      });
     },
     handleOnClosed() {
       this.data = undefined;
+      this.cusOutId = "";
     },
     handleInnerOpen() {
       this.innerVisible = true;
       this.innerTitle = `「${this.data.name}」暂停记录`;
     },
+    handleOnRecipesLinkClick() {
+      this.copyValue =
+        window.location.origin.replace("manage", "sign") +
+        "/recipes/detail/" +
+        this.cusOutId;
+      new Clipboard(".copyBtn");
+      this.$message({
+        message: "拷贝成功",
+        type: "success",
+      });
+    },
     handleOnInnerClosed() {},
+    handleOnRecipesEditClick(data) {
+      // console.log(data);
+      const { id, name } = this.data;
+      window.open("/recipes/build/" + name + "/" + id, "_blank");
+    },
   },
 };
 </script>
@@ -78,4 +155,8 @@ export default {
 /deep/ :focus {
   outline: 0;
 }
+
+.recipes_plan_drawer_wrapper {
+  height: calc(100vh - 77px);
+}
 </style>