添加打印机设置功能

src/views/main-sidebar.vue

@@ -5,82 +5,133 @@
         :default-active="menuActiveName || 'home'"
         :collapse="sidebarFold"
         :collapseTransition="false"
-        class="site-sidebar__menu">
-      <el-menu-item index="home" @click="$router.push({ name: 'home' })">
+        class="site-sidebar__menu"
+      >
+        <el-menu-item index="home" @click="$router.push({ name: 'home' })">
           <icon-svg name="shuju" class="site-sidebar__menu-icon"></icon-svg>
           <span slot="title">数据中心</span>
         </el-menu-item>
-		<!-- <el-menu-item index="userList" @click="$router.push({ name: 'userList' })">
+        <!-- <el-menu-item index="userList" @click="$router.push({ name: 'userList' })">
 			<icon-svg name="yonghu" class="site-sidebar__menu-icon"></icon-svg>
 			<span slot="title">用户中心</span>
 		</el-menu-item> -->
-		<!-- <el-menu-item index="financeList" @click="$router.push({ name: 'financeList' })">
+        <!-- <el-menu-item index="financeList" @click="$router.push({ name: 'financeList' })">
 			<icon-svg name="caiwu" class="site-sidebar__menu-icon"></icon-svg>
 			<span slot="title">财务中心</span>
 		</el-menu-item> -->
-		<el-menu-item index="merchIncome" @click="$router.push({ name: 'merchIncome' })">
-			<icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
-			<span slot="title">店铺管理</span>
-		</el-menu-item>
-		<el-menu-item index="missionSm" @click="$router.push({ name: 'missionSm' })">
-			<icon-svg name="xiaoxi" class="site-sidebar__menu-icon"></icon-svg>
-			<span slot="title">订单中心</span>
-		</el-menu-item>
-		<!-- <el-menu-item index="shopsListAdminSm" @click="$router.push({ name: 'shopsListAdminSm' })">
+        <el-menu-item
+          index="merchIncome"
+          @click="$router.push({ name: 'merchIncome' })"
+        >
+          <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">店铺管理</span>
+        </el-menu-item>
+        <el-menu-item
+          index="missionSm"
+          @click="$router.push({ name: 'missionSm' })"
+        >
+          <icon-svg name="xiaoxi" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">订单中心</span>
+        </el-menu-item>
+        <!-- <el-menu-item index="shopsListAdminSm" @click="$router.push({ name: 'shopsListAdminSm' })">
 			<icon-svg name="shangpin" class="site-sidebar__menu-icon"></icon-svg>
 			<span slot="title">商品管理</span>
 		</el-menu-item> -->
-		<el-menu-item index="message" @click="$router.push({ name: 'message' })">
-			<icon-svg name="pinglun" class="site-sidebar__menu-icon"></icon-svg>
-			<span slot="title">消息中心</span>
-		</el-menu-item>
-		<el-menu-item index="vueMchat" @click="$router.push({ name: 'vueMchat' })">
-			<icon-svg name="yonghul" class="site-sidebar__menu-icon"></icon-svg>
-			<span slot="title">群聊天</span>
-		</el-menu-item>
-		<el-menu-item index="vueMchatKf" @click="$router.push({ name: 'vueMchatKf' })">
-			<icon-svg name="yonghul" class="site-sidebar__menu-icon"></icon-svg>
-			<span slot="title">客服聊天</span>
-		</el-menu-item>
-		<el-menu-item index="specification" @click="$router.push({ name: 'specification' })">
-			<icon-svg name="fenleilist" class="site-sidebar__menu-icon"></icon-svg>
-			<span slot="title">商品规格</span>
-		</el-menu-item>
-		<el-menu-item index="classifyAdmin" @click="$router.push({ name: 'classifyAdmin' })">
-			<icon-svg name="peizhilb" class="site-sidebar__menu-icon"></icon-svg>
-			<span slot="title">商品分类</span>
-		</el-menu-item>
-		<el-menu-item index="shopsListAdmin" @click="$router.push({ name: 'shopsListAdmin' })">
-			<icon-svg name="renwu" class="site-sidebar__menu-icon"></icon-svg>
-			<span slot="title">商品管理</span>
-		</el-menu-item>
+        <el-menu-item
+          index="message"
+          @click="$router.push({ name: 'message' })"
+        >
+          <icon-svg name="pinglun" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">消息中心</span>
+        </el-menu-item>
+        <el-menu-item
+          index="vueMchat"
+          @click="$router.push({ name: 'vueMchat' })"
+        >
+          <icon-svg name="yonghul" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">群聊天</span>
+        </el-menu-item>
+        <el-menu-item
+          index="vueMchatKf"
+          @click="$router.push({ name: 'vueMchatKf' })"
+        >
+          <icon-svg name="yonghul" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">客服聊天</span>
+        </el-menu-item>
+        <el-menu-item
+          index="specification"
+          @click="$router.push({ name: 'specification' })"
+        >
+          <icon-svg
+            name="fenleilist"
+            class="site-sidebar__menu-icon"
+          ></icon-svg>
+          <span slot="title">商品规格</span>
+        </el-menu-item>
+        <el-menu-item
+          index="classifyAdmin"
+          @click="$router.push({ name: 'classifyAdmin' })"
+        >
+          <icon-svg name="peizhilb" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">商品分类</span>
+        </el-menu-item>
+        <el-menu-item
+          index="shopsListAdmin"
+          @click="$router.push({ name: 'shopsListAdmin' })"
+        >
+          <icon-svg name="renwu" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">商品管理</span>
+        </el-menu-item>
 
-		<el-menu-item index="pingjiaList" @click="$router.push({ name: 'pingjiaList' })">
-			<icon-svg name="order" class="site-sidebar__menu-icon"></icon-svg>
-			<span slot="title">店铺评价</span>
-		</el-menu-item>
-		<el-menu-item index="coupon" @click="$router.push({ name: 'coupon' })">
-			<icon-svg name="leibie" class="site-sidebar__menu-icon"></icon-svg>
-			<span slot="title">店铺优惠券</span>
-		</el-menu-item>
-		<el-menu-item index="couponList" @click="$router.push({ name: 'couponList' })">
-			<icon-svg name="order" class="site-sidebar__menu-icon"></icon-svg>
-			<span slot="title">优惠券领取列表</span>
-		</el-menu-item>
+        <el-menu-item
+          index="pingjiaList"
+          @click="$router.push({ name: 'pingjiaList' })"
+        >
+          <icon-svg name="order" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">店铺评价</span>
+        </el-menu-item>
+        <el-menu-item index="coupon" @click="$router.push({ name: 'coupon' })">
+          <icon-svg name="leibie" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">店铺优惠券</span>
+        </el-menu-item>
+        <el-menu-item
+          index="couponList"
+          @click="$router.push({ name: 'couponList' })"
+        >
+          <icon-svg name="order" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">优惠券领取列表</span>
+        </el-menu-item>
 
-		<el-menu-item index="activity" @click="$router.push({ name: 'activity' })">
-			<icon-svg name="shangpin" class="site-sidebar__menu-icon"></icon-svg>
-			<span slot="title">店铺活动</span>
-		</el-menu-item>
-    <el-menu-item index="huodongList" @click="$router.push({ name: 'huodongList' })">
-			<icon-svg name="order" class="site-sidebar__menu-icon"></icon-svg>
-			<span slot="title">活动参与记录</span>
-		</el-menu-item>
-    <el-menu-item index="duanxinlist" @click="$router.push({ name: 'duanxinlist' })">
-			<icon-svg name="order" class="site-sidebar__menu-icon"></icon-svg>
-			<span slot="title">短信记录</span>
-		</el-menu-item>
-		 <!-- <el-menu-item index="userList" @click="$router.push({ name: 'userList' })">
+        <el-menu-item
+          index="activity"
+          @click="$router.push({ name: 'activity' })"
+        >
+          <icon-svg name="shangpin" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">店铺活动</span>
+        </el-menu-item>
+        <el-menu-item
+          index="huodongList"
+          @click="$router.push({ name: 'huodongList' })"
+        >
+          <icon-svg name="order" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">活动参与记录</span>
+        </el-menu-item>
+        <el-menu-item
+          index="duanxinlist"
+          @click="$router.push({ name: 'duanxinlist' })"
+        >
+          <icon-svg name="order" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">短信记录</span>
+        </el-menu-item>
+
+        <el-menu-item
+          index="printSet"
+          @click="$router.push({ name: 'printSet' })"
+        >
+          <icon-svg name="order" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">打印配置</span>
+        </el-menu-item>
+        <!-- <el-menu-item index="userList" @click="$router.push({ name: 'userList' })">
 			<icon-svg name="yonghul" class="site-sidebar__menu-icon"></icon-svg>
 			<span slot="title">用户中心</span>
 		</el-menu-item>
@@ -100,15 +151,15 @@
 			<icon-svg name="renwu" class="site-sidebar__menu-icon"></icon-svg>
 			<span slot="title">任务配置</span>
 		</el-menu-item> -->
-		<!-- <el-menu-item index="missionsye" @click="$router.push({ name: 'missionsye' })">
+        <!-- <el-menu-item index="missionsye" @click="$router.push({ name: 'missionsye' })">
 			<icon-svg name="pingtai" class="site-sidebar__menu-icon"></icon-svg>
 			<span slot="title">系统任务</span>
 		</el-menu-item> -->
-		<!-- <el-menu-item index="materialsList" @click="$router.push({ name: 'materialsList' })">
+        <!-- <el-menu-item index="materialsList" @click="$router.push({ name: 'materialsList' })">
 			<icon-svg name="xinxi" class="site-sidebar__menu-icon"></icon-svg>
 			<span slot="title">好物圈</span>
 		</el-menu-item> -->
-		<!-- <el-menu-item index="bannerList" @click="$router.push({ name: 'bannerList' })">
+        <!-- <el-menu-item index="bannerList" @click="$router.push({ name: 'bannerList' })">
 			<icon-svg name="shangpin" class="site-sidebar__menu-icon"></icon-svg>
 			<span slot="title">商城配置</span>
 		</el-menu-item>
@@ -128,78 +179,101 @@
 </template>
 
 <script>
-  import SubMenu from './main-sidebar-sub-menu'
-  import { isURL } from '@/utils/validate'
-  export default {
-    data () {
-      return {
-        dynamicMenuRoutes: []
+import SubMenu from "./main-sidebar-sub-menu";
+import { isURL } from "@/utils/validate";
+export default {
+  data() {
+    return {
+      dynamicMenuRoutes: []
+    };
+  },
+  components: {
+    SubMenu
+  },
+  computed: {
+    sidebarLayoutSkin: {
+      get() {
+        return this.$store.state.common.sidebarLayoutSkin;
       }
     },
-    components: {
-      SubMenu
+    sidebarFold: {
+      get() {
+        return this.$store.state.common.sidebarFold;
+      }
     },
-    computed: {
-      sidebarLayoutSkin: {
-        get () { return this.$store.state.common.sidebarLayoutSkin }
+    menuList: {
+      get() {
+        return this.$store.state.common.menuList;
       },
-      sidebarFold: {
-        get () { return this.$store.state.common.sidebarFold }
-      },
-      menuList: {
-        get () { return this.$store.state.common.menuList },
-        set (val) { this.$store.commit('common/updateMenuList', val) }
-      },
-      menuActiveName: {
-        get () { return this.$store.state.common.menuActiveName },
-        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
-      },
-      mainTabs: {
-        get () { return this.$store.state.common.mainTabs },
-        set (val) { this.$store.commit('common/updateMainTabs', val) }
-      },
-      mainTabsActiveName: {
-        get () { return this.$store.state.common.mainTabsActiveName },
-        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
+      set(val) {
+        this.$store.commit("common/updateMenuList", val);
       }
     },
-    watch: {
-      $route: 'routeHandle'
+    menuActiveName: {
+      get() {
+        return this.$store.state.common.menuActiveName;
+      },
+      set(val) {
+        this.$store.commit("common/updateMenuActiveName", val);
+      }
     },
-    created () {
-      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
-      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
-      this.routeHandle(this.$route)
+    mainTabs: {
+      get() {
+        return this.$store.state.common.mainTabs;
+      },
+      set(val) {
+        this.$store.commit("common/updateMainTabs", val);
+      }
     },
-    methods: {
-      // 路由操作
-      routeHandle (route) {
-        if (route.meta.isTab) {
-          // tab选中, 不存在先添加
-          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
-          if (!tab) {
-            if (route.meta.isDynamic) {
-              route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
-              if (!route) {
-                return console.error('未能找到可用标签页!')
-              }
-            }
-            tab = {
-              menuId: route.meta.menuId || route.name,
-              name: route.name,
-              title: route.meta.title,
-              type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
-              iframeUrl: route.meta.iframeUrl || '',
-              params: route.params,
-              query: route.query
+    mainTabsActiveName: {
+      get() {
+        return this.$store.state.common.mainTabsActiveName;
+      },
+      set(val) {
+        this.$store.commit("common/updateMainTabsActiveName", val);
+      }
+    }
+  },
+  watch: {
+    $route: "routeHandle"
+  },
+  created() {
+    this.menuList = JSON.parse(sessionStorage.getItem("menuList") || "[]");
+    this.dynamicMenuRoutes = JSON.parse(
+      sessionStorage.getItem("dynamicMenuRoutes") || "[]"
+    );
+    this.routeHandle(this.$route);
+  },
+  methods: {
+    // 路由操作
+    routeHandle(route) {
+      if (route.meta.isTab) {
+        // tab选中, 不存在先添加
+        var tab = this.mainTabs.filter(item => item.name === route.name)[0];
+        if (!tab) {
+          if (route.meta.isDynamic) {
+            route = this.dynamicMenuRoutes.filter(
+              item => item.name === route.name
+            )[0];
+            if (!route) {
+              return console.error("未能找到可用标签页!");
             }
-            this.mainTabs = this.mainTabs.concat(tab)
           }
-          this.menuActiveName = tab.menuId + ''
-          this.mainTabsActiveName = tab.name
+          tab = {
+            menuId: route.meta.menuId || route.name,
+            name: route.name,
+            title: route.meta.title,
+            type: isURL(route.meta.iframeUrl) ? "iframe" : "module",
+            iframeUrl: route.meta.iframeUrl || "",
+            params: route.params,
+            query: route.query
+          };
+          this.mainTabs = this.mainTabs.concat(tab);
         }
-
+        this.menuActiveName = tab.menuId + "";
+        this.mainTabsActiveName = tab.name;
       }
     }
   }
+};
 </script>

src/views/main.vue

@@ -3,11 +3,15 @@
     class="site-wrapper"
     :class="{ 'site-sidebar--fold': sidebarFold }"
     v-loading.fullscreen.lock="loading"
-    element-loading-text="拼命加载中">
+    element-loading-text="拼命加载中"
+  >
     <template v-if="!loading">
       <main-navbar />
-	  <main-sidebar />
-      <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
+      <main-sidebar />
+      <div
+        class="site-content__wrapper"
+        :style="{ 'min-height': documentClientHeight + 'px' }"
+      >
         <main-content v-if="!$store.state.common.contentIsNeedRefresh" />
       </div>
     </template>
@@ -15,79 +19,93 @@
 </template>
 
 <script>
-  import MainNavbar from './main-navbar'
-  import MainSidebar from './main-sidebar'
-  import MainContent from './main-content'
-  export default {
-    provide () {
-      return {
-        // 刷新
-        refresh () {
-          this.$store.commit('common/updateContentIsNeedRefresh', true)
-          this.$nextTick(() => {
-            this.$store.commit('common/updateContentIsNeedRefresh', false)
-          })
-        }
+import MainNavbar from "./main-navbar";
+import MainSidebar from "./main-sidebar";
+import MainContent from "./main-content";
+export default {
+  provide() {
+    return {
+      // 刷新
+      refresh() {
+        this.$store.commit("common/updateContentIsNeedRefresh", true);
+        this.$nextTick(() => {
+          this.$store.commit("common/updateContentIsNeedRefresh", false);
+        });
       }
-    },
-    data () {
-      return {
-        loading: true
+    };
+  },
+  data() {
+    return {
+      loading: true
+    };
+  },
+  components: {
+    MainNavbar,
+    MainSidebar,
+    MainContent
+  },
+  computed: {
+    documentClientHeight: {
+      get() {
+        return this.$store.state.common.documentClientHeight;
+      },
+      set(val) {
+        this.$store.commit("common/updateDocumentClientHeight", val);
       }
     },
-    components: {
-      MainNavbar,
-      MainSidebar,
-      MainContent
+    sidebarFold: {
+      get() {
+        return this.$store.state.common.sidebarFold;
+      }
     },
-    computed: {
-      documentClientHeight: {
-        get () { return this.$store.state.common.documentClientHeight },
-        set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
-      },
-      sidebarFold: {
-        get () { return this.$store.state.common.sidebarFold }
-      },
-      userId: {
-        get () { return this.$store.state.user.id },
-        set (val) { this.$store.commit('user/updateId', val) }
+    userId: {
+      get() {
+        return this.$store.state.user.id;
       },
-      userName: {
-        get () { return this.$store.state.user.name },
-        set (val) { this.$store.commit('user/updateName', val) }
+      set(val) {
+        this.$store.commit("user/updateId", val);
       }
     },
-    created () {
-      this.getUserInfo()
-    },
-    mounted () {
-      this.resetDocumentClientHeight()
-    },
-    methods: {
-      // 重置窗口可视高度
-      resetDocumentClientHeight () {
-        this.documentClientHeight = document.documentElement['clientHeight']
-        window.onresize = () => {
-          this.documentClientHeight = document.documentElement['clientHeight']
-        }
+    userName: {
+      get() {
+        return this.$store.state.user.name;
       },
-      // 获取当前管理员信息
-      getUserInfo () {
-        this.$http({
-          url: this.$http.adornUrl('/sys/user/info'),
-          method: 'get',
-          params: this.$http.adornParams()
-        }).then(({data}) => {
-          if (data && data.code === 0) {
-            this.loading = false
-            this.userId = data.user.userId
-            this.userName = data.user.username
-            this.$cookie.set('userId', data.user.userId)
-			this.$cookie.set('shopId', data.user.shopList[0].shopId)
-			this.$cookie.set('shopDel', JSON.stringify(data.user.shopList[0]))
-          }
-        })
+      set(val) {
+        this.$store.commit("user/updateName", val);
       }
     }
+  },
+  created() {
+    this.getUserInfo();
+  },
+  mounted() {
+    this.resetDocumentClientHeight();
+  },
+  methods: {
+    // 重置窗口可视高度
+    resetDocumentClientHeight() {
+      this.documentClientHeight = document.documentElement["clientHeight"];
+      window.onresize = () => {
+        this.documentClientHeight = document.documentElement["clientHeight"];
+      };
+    },
+    // 获取当前管理员信息
+    getUserInfo() {
+      this.$http({
+        url: this.$http.adornUrl("/sys/user/info"),
+        method: "get",
+        params: this.$http.adornParams()
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.loading = false;
+          this.userId = data.user.userId;
+          this.userName = data.user.username;
+          this.$cookie.set("userId", data.user.userId);
+          this.$cookie.set("shopId", data.user.shopList[0].shopId);
+          this.$cookie.set("shopDel", JSON.stringify(data.user.shopList[0]));
+        }
+      });
+    }
   }
+};
 </script>

src/views/shopsList/printSet.vue

@@ -0,0 +1,580 @@
+<template>
+  <div>
+    <div class="body">
+      <!-- 左边预览效果 -->
+      <div class="body_left">
+        <div class="left_title">预览效果</div>
+
+        <el-card class="left_card" v-if="list1">
+          <!-- 基本信息区域 -->
+          <div
+            v-for="(item, index) in list1.details"
+            :key="item.id + 'list1'"
+            class="card_box"
+            :style="
+              `fontSize:${
+                list1.types[index].wordSize == 2 ? 20 : 16
+              }px;fontWeight:${list1.types[index].isBlod == 1 ? 'bold' : '400'}`
+            "
+          >
+            <div v-if="item.isCheck == 0">
+              {{ item.printName }}
+              <span v-if="item.printName == '订单号'">:xxxxxxxxx</span>
+              <span v-if="item.printName == '订单类型'">:xxxxxxxxx</span>
+            </div>
+          </div>
+
+          <hr />
+
+          <!-- 商品信息区域 -->
+          <div class="card_table">
+            <div
+              class="table_box"
+              v-for="item in list2.details.filter(
+                ele => ele.printName != '备注'
+              )"
+              :key="item.id"
+              :style="
+                `fontSize:${
+                  list2.types.find(ele => ele.printName == item.printName)
+                    .wordSize == 2
+                    ? 20
+                    : 16
+                }px;fontWeight:${
+                  list2.types.find(ele => ele.printName == item.printName)
+                    .isBlod == 1
+                    ? 'bold'
+                    : '400'
+                }`
+              "
+            >
+              <div v-if="item.printName != '备注' && item.isCheck == 0">
+                {{ item.printName }}
+              </div>
+            </div>
+          </div>
+          <hr />
+          <div class="card_table">
+            <div
+              class="table_box"
+              v-for="item in list2.details.filter(
+                ele => ele.printName != '备注'
+              )"
+              :key="item.id"
+              :style="
+                `fontSize:${
+                  list2.types.find(ele => ele.printName == item.printName)
+                    .wordSize == 2
+                    ? 20
+                    : 16
+                }px;fontWeight:${
+                  list2.types.find(ele => ele.printName == item.printName)
+                    .isBlod == 1
+                    ? 'bold'
+                    : '400'
+                }`
+              "
+            >
+              <div v-if="item.printName != '备注' && item.isCheck == 0">
+                xx
+              </div>
+            </div>
+          </div>
+          <hr />
+          <div
+            class="card_box2"
+            :style="
+              `fontSize:${
+                list2.types.find(ele => ele.printName == '备注').wordSize == 2
+                  ? 20
+                  : 16
+              }px;fontWeight:${
+                list2.types.find(ele => ele.printName == '备注').isBlod == 1
+                  ? 'bold'
+                  : '400'
+              }`
+            "
+          >
+            备注
+          </div>
+
+          <hr />
+
+          <!-- 支付信息区域 -->
+          <div
+            v-for="(item, index) in list3.details"
+            :key="item.id"
+            class="card_box2"
+            :style="
+              `fontSize:${
+                list3.types[index].wordSize == 2 ? 20 : 16
+              }px;fontWeight:${list3.types[index].isBlod == 1 ? 'bold' : '400'}`
+            "
+          >
+            <div v-if="item.isCheck == 0">{{ item.printName }}：xx</div>
+          </div>
+
+          <hr />
+
+          <!-- 用户信息区域 -->
+          <div
+            v-for="(item, index) in list4.details"
+            :key="item.id"
+            class="card_box2"
+            :style="
+              `fontSize:${
+                list4.types[index].wordSize == 2 ? 20 : 16
+              }px;fontWeight:${list4.types[index].isBlod == 1 ? 'bold' : '400'}`
+            "
+          >
+            <div v-if="item.isCheck == 0">{{ item.printName }}：xxx</div>
+          </div>
+        </el-card>
+      </div>
+
+      <!-- 编辑区域 -->
+      <div class="body_right">
+        <div class="right_title">
+          小票编辑
+          <el-button size="mini" type="primary" @click="handleAdd"
+            >添加打印信息</el-button
+          >
+        </div>
+
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane
+            v-for="item in modelDatas"
+            :key="item.id"
+            :label="item.name"
+            :name="item.name"
+          >
+            <div class="title">
+              <div class="dot"></div>
+              <div class="title_text">基本信息</div>
+              <div class="title_desc">
+                （{{ defaultMsg }}为小票必须展示的信息）
+              </div>
+            </div>
+
+            <div class="check_box">
+              <el-checkbox
+                v-for="ele in item.details"
+                :key="ele.id"
+                :value="ele.isCheck == 0"
+                :disabled="
+                  ele.printName == '平台名称' ||
+                    ele.printName == '店铺名' ||
+                    ele.printName == '订单号' ||
+                    ele.printName == '商品名称' ||
+                    ele.printName == '单价' ||
+                    ele.printName == '数量' ||
+                    ele.printName == '备注' ||
+                    ele.printName == '打包费' ||
+                    ele.printName == '商品费' ||
+                    ele.printName == '优惠券' ||
+                    ele.printName == '跑腿费' ||
+                    ele.printName == '优惠活动' ||
+                    ele.printName == '合计' ||
+                    ele.printName == '姓名' ||
+                    ele.printName == '电话号' ||
+                    ele.printName == '地址' ||
+                    ele.printName == '订餐时间'
+                "
+                @change="changeType($event, ele)"
+              >
+                {{ ele.printName }}
+              </el-checkbox>
+            </div>
+
+            <div class="title">
+              <div class="dot"></div>
+              <div class="title_text">自定义样式</div>
+            </div>
+
+            <div v-for="element in item.types" :key="element.id">
+              <div class="radio_box">{{ element.printName }}</div>
+              <div class="radio_list">
+                打印字号：
+                <el-radio-group v-model="element.wordSize">
+                  <el-radio :label="1">正常</el-radio>
+                  <el-radio :label="2">放大</el-radio>
+                </el-radio-group>
+              </div>
+
+              <div class="radio_list">
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;字体：
+                <el-radio-group v-model="element.isBlod">
+                  <el-radio :label="0">正常</el-radio>
+                  <el-radio :label="1">加粗</el-radio>
+                </el-radio-group>
+              </div>
+              <hr />
+            </div>
+
+            <div class="btn">
+              <el-button size="mini" type="primary" @click="handleSave"
+                >保存</el-button
+              >
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+
+    <!-- 添加打印信息弹窗区域 -->
+    <el-dialog
+      title="添加打印信息"
+      :close-on-click-modal="false"
+      :visible.sync="centerDialogVisible"
+      width="36%"
+      center
+    >
+      <div>
+        <el-form :model="form" :rules="rules" ref="ruleForm">
+          <el-form-item
+            prop="typeId"
+            label="打印信息类型："
+            :label-width="formLabelWidth"
+          >
+            <el-select
+              v-model="form.typeId"
+              placeholder="请选择打印信息类型"
+              style="width: 270px;"
+            >
+              <el-option
+                v-for="item in form.typesList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            prop="printName"
+            label="打印信息名称："
+            :label-width="formLabelWidth"
+          >
+            <el-input
+              v-model="form.printName"
+              autocomplete="off"
+              placeholder="请输入打印信息名称"
+              style="width: 270px;"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            prop="printField"
+            label="打印信息字段名："
+            :label-width="formLabelWidth"
+          >
+            <el-input
+              v-model="form.printField"
+              autocomplete="off"
+              placeholder="请输入打印信息字段名"
+              style="width: 270px;"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="centerDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleConfirm('ruleForm')"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    let checkPrintField = (rule, value, callback) => {
+      let reg = /^[a-zA-Z_]+$/;
+      let flag = reg.test(value);
+      if (flag) {
+        callback();
+      } else {
+        callback(new Error("只能输入英文字母和下划线"));
+      }
+    };
+    return {
+      // 店铺id
+      shopId: "",
+      // 打印数据id
+      printId: "",
+      // 当前激活选项卡
+      activeName: "",
+      // 小票模板数据
+      modelDatas: [],
+      defaultMsg: "平台名称、店铺名、订单号",
+      // 弹窗显示隐藏控制
+      centerDialogVisible: false,
+      // 弹窗数据
+      form: {
+        typeId: "",
+        typesList: [],
+        printField: "",
+        printName: ""
+      },
+      formLabelWidth: "150px",
+      rules: {
+        typeId: [
+          { required: true, message: "请选择打印信息类型", trigger: "change" }
+        ],
+        printName: [
+          { required: true, message: "请输入打印信息名称", trigger: "change" }
+        ],
+        printField: [
+          {
+            required: true,
+            message: "请输入打印信息字段名",
+            trigger: "change"
+          },
+          { validator: checkPrintField, trigger: "change" }
+        ]
+      }
+    };
+  },
+  mounted() {
+    this.shopId = this.$cookie.get("shopId");
+
+    if (this.shopId) {
+      // 根据店铺ID获取小票模板数据
+      this.getModelDatas();
+    } else {
+      this.$message.error("店铺id不存在");
+    }
+  },
+  computed: {
+    // 基本信息
+    list1() {
+      return this.modelDatas.find(ele => ele.name == "基本信息");
+    },
+    // 商品信息
+    list2() {
+      return this.modelDatas.find(ele => ele.name == "商品信息");
+    },
+    // 支付信息
+    list3() {
+      return this.modelDatas.find(ele => ele.name == "支付信息");
+    },
+    // 用户信息
+    list4() {
+      return this.modelDatas.find(ele => ele.name == "用户信息");
+    }
+  },
+  methods: {
+    // 根据店铺ID获取小票模板数据
+    async getModelDatas() {
+      const res = await this.$http({
+        url: this.$http.adornUrl("/admin/printInfo/getPrintModelData"),
+        params: this.$http.adornParams({
+          shopId: this.shopId
+        })
+      });
+      // console.log(res);
+      if (res.data.code == 0) {
+        this.printId = res.data.data.id;
+        this.modelDatas = res.data.data.modelDatas;
+        this.activeName = this.modelDatas[0].name;
+        console.log(this.modelDatas);
+      }
+    },
+    // 添加打印信息按钮回调
+    handleAdd() {
+      this.centerDialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs.ruleForm.resetFields();
+      });
+      // 获取打印信息类型下拉列表
+      this.getTypesList();
+    },
+    // 获取打印信息类型下拉列表
+    async getTypesList() {
+      const res = await this.$http({
+        url: this.$http.adornUrl("/admin/printInfo/getPrintDropList")
+      });
+      // console.log(res);
+      if (res.data.code == 0) {
+        this.form.typesList = res.data.data;
+      }
+    },
+    // 弹窗确定按钮回调
+    handleConfirm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.handleAddReq();
+        }
+      });
+    },
+    // 添加打印信息请求
+    async handleAddReq() {
+      // console.log(this.form);
+      const res = await this.$http({
+        url: this.$http.adornUrl("/admin/printInfo/insertPrintInfo"),
+        method: "post",
+        data: this.$http.adornParams({
+          printField: this.form.printField,
+          printName: this.form.printName,
+          typeId: this.form.typeId,
+          typeName: this.form.typesList[this.form.typeId].name
+        })
+      });
+      console.log(res);
+      if (res.data.code == 0) {
+        this.centerDialogVisible = false;
+        this.$message.success("添加成功");
+        this.getModelDatas();
+      }
+    },
+    // 保存按钮回调
+    async handleSave() {
+      const res = await this.$http({
+        url: this.$http.adornUrl(
+          this.printId
+            ? "/admin/printInfo/updatePrintModelData"
+            : "/admin/printInfo/insertPrintModelData"
+        ),
+        method: "post",
+        data: this.$http.adornParams({
+          id: this.printId,
+          modelDatas: this.modelDatas,
+          shopId: this.shopId
+        })
+      });
+      // console.log(res);
+      if (res.data.code == 0) {
+        this.$message.success("保存成功");
+      }
+    },
+    // 选项卡切换回调
+    handleClick(tab) {
+      // console.log(tab);
+      if (tab._props.label == "基本信息") {
+        this.defaultMsg = "平台名称、店铺名、订单号";
+      } else if (tab._props.label == "商品信息") {
+        this.defaultMsg = "商品名称、单价、数量、备注";
+      } else if (tab._props.label == "支付信息") {
+        this.defaultMsg = "打包费、商品费、优惠券、跑腿费、优惠活动和合计";
+      } else if (tab._props.label == "用户信息") {
+        this.defaultMsg = "姓名、电话号、地址 、订餐时间";
+      }
+    },
+    // 基本信息切换回调
+    changeType(e, ele) {
+      if (e) {
+        ele.isCheck = 0;
+      } else {
+        ele.isCheck = 1;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.body {
+  display: flex;
+  justify-content: space-around;
+  padding: 0 50px;
+
+  .body_left {
+    width: 400px;
+
+    .left_title {
+      margin-bottom: 16px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #000;
+    }
+
+    .left_card {
+      display: flex;
+      justify-content: center;
+      font-size: 16px;
+
+      .card_box {
+        margin-bottom: 10px;
+        width: 350px;
+      }
+
+      .card_box2 {
+        margin-bottom: 10px;
+      }
+
+      .card_table {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        .table_box {
+          flex: 1;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  .body_right {
+    width: 500px;
+
+    .right_title {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 16px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #000;
+    }
+
+    .title {
+      display: flex;
+      align-items: center;
+      height: 34px;
+      background-color: #edf1f7;
+
+      .dot {
+        margin: 0 7px 0 14px;
+        width: 10px;
+        height: 10px;
+        background-color: #0061ff;
+      }
+
+      .title_text {
+        font-size: 16px;
+        font-weight: bold;
+      }
+
+      .title_desc {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 12px;
+      }
+    }
+
+    .check_box {
+      margin: 15px 0;
+      line-height: 30px;
+    }
+
+    .radio_box {
+      margin-top: 13px;
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .radio_list {
+      margin-top: 12px;
+      font-size: 16px;
+    }
+
+    .btn {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 20px;
+    }
+  }
+}
+</style>