另存为模板功能

stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/index.vue

@@ -3,58 +3,84 @@
     class="recipes_aspect_wrapper"
     :style="`height: ${collapse ? 30 : 200}px`"
   >
-    <div class="header">
-      <span class="font_size_style">
-        字体大小：
-        <el-select
-          v-model="mFontSize"
-          size="mini"
-          style="width: 80px"
-          @change="handleOnSizeChange"
-        >
-          <el-option
-            v-for="size in fontSizeOpts"
-            :key="size.value"
-            :label="size.label"
-            :value="size.value"
-          />
-        </el-select>
-      </span>
-      <el-button size="mini" v-if="!recipesId" @click="handleOnBack"
-        >返回</el-button
-      >
-      <el-popover
-        placement="bottom"
-        trigger="click"
-        title="修改审核状态"
-        style="margin-right: 12px"
-        v-hasPermi="['recipes:plan:review']"
-      >
-        <div>
-          <el-button size="mini" type="success" @click="hanldeOnReveiwChange(2)"
-            >审核通过</el-button
+    <div class="header" v-loading="loading">
+      <div class="header_btns">
+        <span>
+          <el-button
+            size="mini"
+            v-if="!!recipesId"
+            type="primary"
+            icon="el-icon-document-copy"
+            @click="handleOnTemplateClick"
           >
-          <el-button size="mini" type="danger" @click="hanldeOnReveiwChange(1)"
-            >未审核通过</el-button
+            另存为模板
+          </el-button>
+        </span>
+        <span>
+          <span class="font_size_style">
+            字体大小：
+            <el-select
+              v-model="mFontSize"
+              size="mini"
+              style="width: 80px"
+              @change="handleOnSizeChange"
+            >
+              <el-option
+                v-for="size in fontSizeOpts"
+                :key="size.value"
+                :label="size.label"
+                :value="size.value"
+              />
+            </el-select>
+          </span>
+          <el-button size="mini" v-if="!recipesId" @click="handleOnBack"
+            >返回</el-button
           >
-        </div>
-        <el-button
-          slot="reference"
-          size="mini"
-          v-if="reviewStatus"
-          :type="reviewStatus === 1 ? 'danger' : 'success'"
-        >
-          {{ reviewStatus === 1 ? "未审核" : "已审核" }}
-        </el-button>
-      </el-popover>
+          <el-popover
+            placement="bottom"
+            trigger="click"
+            title="修改审核状态"
+            style="margin-right: 12px"
+            v-hasPermi="['recipes:plan:review']"
+          >
+            <div>
+              <el-button
+                size="mini"
+                type="success"
+                @click="hanldeOnReveiwChange(2)"
+                >审核通过</el-button
+              >
+              <el-button
+                size="mini"
+                type="danger"
+                @click="hanldeOnReveiwChange(1)"
+                >未审核通过</el-button
+              >
+            </div>
+            <el-button
+              slot="reference"
+              size="mini"
+              v-if="reviewStatus"
+              :type="reviewStatus === 1 ? 'danger' : 'success'"
+            >
+              {{ reviewStatus === 1 ? "未审核" : "已审核" }}
+            </el-button>
+          </el-popover>
+          <el-button
+            v-if="!recipesId"
+            size="mini"
+            type="primary"
+            @click="handleOnSave"
+            >生成食谱</el-button
+          >
+        </span>
+      </div>
       <el-button
-        v-if="!recipesId"
         size="mini"
-        type="primary"
-        @click="handleOnSave"
-        >生成食谱</el-button
+        type="text"
+        @click="handleCollapseClick"
+        class="collapse_btn"
       >
-      <el-button size="mini" type="text" @click="handleCollapseClick">
         {{ `${collapse ? "展开" : "收起"}` }}
         <em
           class="el-icon-arrow-down arrow_icon"
@@ -91,23 +117,29 @@
         width="500px"
       />
     </div>
+    <!-- 模板 -->
+    <TemplateDialog ref="templateRef" @onConfirm="handleOnCopy" />
   </div>
 </template>
 <script>
 import BarChart from "./BarChart";
 import PieChart from "./PieChart";
+import { addRecipesTemplate } from "@/api/custom/recipesTemplate";
 import { createNamespacedHelpers } from "vuex";
 const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
   "recipes"
 );
+import TemplateDialog from "@/components/TemplateDialog";
 export default {
   name: "RecipesAspectCom",
   components: {
     BarChart,
     PieChart,
+    TemplateDialog,
   },
   data() {
     return {
+      loading: false,
       mFontSize: 12,
       fontSizeOpts: [
         { value: 12, label: "12" },
@@ -152,6 +184,29 @@ export default {
     handleOnBack() {
       this.updateStateData({ recipesData: [] });
     },
+    handleOnTemplateClick() {
+      this.$refs.templateRef.showDialog();
+    },
+    handleOnCopy(form) {
+      this.loading = true;
+      addRecipesTemplate(form).then((response) => {
+        if (response.code === 200) {
+          const { planId, id } = response.data;
+          this.saveRecipes({
+            cusId: 0,
+            planId,
+            callback: () => {
+              this.$message.success(`另存为模板「${form.name}」成功`);
+              this.loading = false;
+              window.open(
+                "/recipes/build/" + form.name + "/" + planId + "?temId=" + id,
+                "_blank"
+              );
+            },
+          });
+        }
+      });
+    },
     ...mapActions(["saveRecipes", "updateReviewStatus"]),
     ...mapMutations(["updateStateData", "updateFontSize"]),
   },
@@ -165,6 +220,19 @@ export default {
   .header {
     text-align: right;
     height: 30px;
+    display: flex;
+    align-items: center;
+
+    .header_btns {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex: 1;
+    }
+
+    .collapse_btn {
+      width: 42px;
+    }
 
     .arrow_icon {
       transition: all 0.3s;

stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue

@@ -77,8 +77,9 @@
                   icon="el-icon-delete"
                   class="fun_button"
                   @click="handleOnDelete(scope.row)"
-                  >删除</el-button
                 >
+                  删除
+                </el-button>
               </div>
               <div>
                 <el-button
@@ -87,15 +88,18 @@
                   icon="el-icon-document-copy"
                   class="fun_button"
                   @click="handleOnCopy(scope.row)"
-                  >复制</el-button
                 >
+                  复制
+                </el-button>
                 <el-button
+                  type="primary"
                   size="mini"
                   icon="el-icon-document-copy"
                   class="fun_button"
                   @click="handleOnSetting(scope.row)"
-                  >修改餐类</el-button
                 >
+                  修改餐类
+                </el-button>
               </div>
             </div>
             <div class="pointer_style" slot="reference">

stdiet-ui/src/views/custom/recipesBuild/index.vue

@@ -40,6 +40,8 @@ export default {
     };
   },
   mounted() {
+    this.$store.dispatch("global/init", {});
+    //
     this.init({
       planId: this.planId,
       name: this.name,