提交图片

src/xt_pages/data/printTemplate.vue

@@ -1,204 +1,251 @@
 <template>
   <div class="main-contain">
     <div class="position">
-      <bread-crumb :crumbs='crumbs'></bread-crumb>
+      <bread-crumb :crumbs="crumbs"></bread-crumb>
     </div>
-    <div v-loading="loading"
-         element-loading-text="服务器处理数据中，请稍候......."
-         element-loading-spinner="el-icon-loading"
-         element-loading-background="rgba(0, 0, 0, 0.8)">
-
-    <div class="app-container" style="text-align: center">
-      <p style="margin-top: 10px;margin-bottom: 30px">请选择你需要打印的血液透析护理记录单样式</p>
-      <el-row :gutter="20" type="flex" justify="center">
-        <el-col :span="6" style="text-align: center">
-          <div>
-            <el-tooltip class="item" effect="dark" :hide-after='2000' content="点击查看大图" placement="top-start">
-              <el-image
-                style="width: 200px; height: 200px"
-                :src="require('@/assets/home/1.jpg')"
-                :preview-src-list="imgs_one"
-              ></el-image>
-            </el-tooltip>
-
-          </div>
-          <el-radio v-model="radio" label="1" @change="change">模版一</el-radio>
-        </el-col>
-        <el-col :span="6" style="margin-left: 100px;margin-right: 100px;text-align: center">
-          <div>
-            <el-tooltip class="item" effect="dark" content="点击查看大图" placement="top-start" :hide-after='2000'>
-
-              <el-image
-                style="width: 200px; height: 200px"
-                :src="require('@/assets/home/2.jpg')"
-                :preview-src-list="imgs_two"
-              ></el-image>
-            </el-tooltip>
-
-          </div>
-          <el-radio v-model="radio" label="2" @change="change">模版二</el-radio>
-        </el-col>
-        <el-col :span="6" style="text-align: center">
-          <div class="demo-image__preview">
-            <el-tooltip class="item" effect="dark" content="点击查看大图" placement="top-start" :hide-after='2000'>
-
-              <el-image
-                style="width: 200px; height: 200px"
-                :src="require('@/assets/home/5.jpg')"
-                :preview-src-list="imgs_five"
-              ></el-image>
-            </el-tooltip>
-
-          </div>
-          <el-radio v-model="radio" label="5" @change="change">模版三</el-radio>
-        </el-col>
+    <div
+      v-loading="loading"
+      element-loading-text="服务器处理数据中，请稍候......."
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
+      <div class="app-container app-print" style="text-align: center">
+        <p style="margin-top: 10px;margin-bottom: 30px">
+          请选择你需要打印的血液透析护理记录单样式
+        </p>
+        <el-row :gutter="20" type="flex" justify="center">
           <el-col :span="6" style="text-align: center">
-          <div class="demo-image__preview">
-            <el-tooltip class="item" effect="dark" content="点击查看大图" placement="top-start" :hide-after='2000'>
-
-              <el-image
-                style="width: 200px; height: 200px"
-                :src="require('@/assets/home/4.png')"
-                :preview-src-list="imgs_seven"
-              ></el-image>
-            </el-tooltip>
-
-          </div>
-          <el-radio v-model="radio" label="7" @change="change">模版四</el-radio>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20" type="flex"> 
-         <el-col :span="6" style="text-align: center">
-          <div class="demo-image__preview">
-            <el-tooltip class="item" effect="dark" content="点击查看大图" placement="top-start" :hide-after='2000'>
-              <el-image
-                style="width: 200px; height: 200px"
-                :src="require('@/assets/home/5.png')"
-                :preview-src-list="imgs_six"
-              ></el-image>
-            </el-tooltip>
-          </div>
-          <el-radio v-model="radio" label="8" @change="change">模版五</el-radio>
-        </el-col>
+            <div>
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :hide-after="2000"
+                content="点击查看大图"
+                placement="top-start"
+              >
+                <el-image
+                  style="width: 200px; height: 200px"
+                  :src="require('@/assets/home/1.jpg')"
+                  :preview-src-list="imgs_one"
+                ></el-image>
+              </el-tooltip>
+            </div>
+            <el-radio v-model="radio" label="1" @change="change"
+              >模版一</el-radio
+            >
+          </el-col>
+          <el-col
+            :span="6"
+            style="margin-left: 100px;margin-right: 100px;text-align: center"
+          >
+            <div>
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="点击查看大图"
+                placement="top-start"
+                :hide-after="2000"
+              >
+                <el-image
+                  style="width: 200px; height: 200px"
+                  :src="require('@/assets/home/2.jpg')"
+                  :preview-src-list="imgs_two"
+                ></el-image>
+              </el-tooltip>
+            </div>
+            <el-radio v-model="radio" label="2" @change="change"
+              >模版二</el-radio
+            >
+          </el-col>
           <el-col :span="6" style="text-align: center">
-          <div class="demo-image__preview">
-            <el-tooltip class="item" effect="dark" content="点击查看大图" placement="top-start" :hide-after='2000'>
-              <el-image
-                style="width: 200px; height: 200px;"
-                :src="require('@/assets/home/template_six.png')"
-                :preview-src-list="imgs_eight"
-              ></el-image>
-            </el-tooltip>
-          </div>
-          <el-radio v-model="radio" label="6" @change="change">模版六</el-radio>
-        </el-col>
-      </el-row>
-    </div>
+            <div class="demo-image__preview">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="点击查看大图"
+                placement="top-start"
+                :hide-after="2000"
+              >
+                <el-image
+                  style="width: 200px; height: 200px"
+                  :src="require('@/assets/home/5.jpg')"
+                  :preview-src-list="imgs_five"
+                ></el-image>
+              </el-tooltip>
+            </div>
+            <el-radio v-model="radio" label="5" @change="change"
+              >模版三</el-radio
+            >
+          </el-col>
+          <el-col :span="6" style="text-align: center">
+            <div class="demo-image__preview">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="点击查看大图"
+                placement="top-start"
+                :hide-after="2000"
+              >
+                <el-image
+                  style="width: 200px; height: 200px"
+                  :src="require('@/assets/home/4.png')"
+                  :preview-src-list="imgs_seven"
+                ></el-image>
+              </el-tooltip>
+            </div>
+            <el-radio v-model="radio" label="7" @change="change"
+              >模版四</el-radio
+            >
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" type="flex">
+          <el-col :span="6" style="text-align: center">
+            <div class="demo-image__preview">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="点击查看大图"
+                placement="top-start"
+                :hide-after="2000"
+              >
+                <el-image
+                  style="width: 200px; height: 200px;margin-left:-60px"
+                  :src="require('@/assets/home/5.png')"
+                  :preview-src-list="imgs_six"
+                ></el-image>
+              </el-tooltip>
+            </div>
+            <el-radio
+              v-model="radio"
+              label="8"
+              @change="change"
+              style="margin-left:-60px"
+              >模版五</el-radio
+            >
+          </el-col>
+          <el-col :span="6" style="text-align: center">
+            <div class="demo-image__preview">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="点击查看大图"
+                placement="top-start"
+                :hide-after="2000"
+              >
+                <el-image
+                  style="width: 200px; height: 200px;margin-left:30px"
+                  :src="require('@/assets/home/template_six.png')"
+                  :preview-src-list="imgs_eight"
+                ></el-image>
+              </el-tooltip>
+            </div>
+            <el-radio v-model="radio" label="6" @change="change"
+              >模版六</el-radio
+            >
+          </el-col>
+        </el-row>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-  import BreadCrumb from '@/xt_pages/components/bread-crumb'
-  import { getPrintTemplate, postPrintTemplate } from '@/api/data'
-  import store from '@/store'
+import BreadCrumb from "@/xt_pages/components/bread-crumb";
+import { getPrintTemplate, postPrintTemplate } from "@/api/data";
+import store from "@/store";
 
 export default {
-    name: 'printTemplate',
-    components: { BreadCrumb },
-    data() {
-      return {
-        crumbs: [
-          { path: false, name: '系统管理' },
-          { path: 'data/print', name: '打印模版' }
-        ],
-        imgUrl_One: require('@/assets/home/1.jpg'),
-        imgUrl_Two: require('@/assets/home/2.jpg'),
-        imgUrl_Five: require('@/assets/home/5.jpg'),
-
-        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-        imgs_one: [
-          // 'https://images.shengws.com/template_one.jpg'
-          'https://images.shengws.com/fangji.jpg'
-        ],
-        imgs_two: [
-          'https://images.shengws.com/template_two.jpg'
-
-        ],
-        imgs_five: [
-          'https://images.shengws.com/template_five.jpg'
-        ],
-        imgs_seven: [
-          'http://images.shengws.com/7.png'
-        ],
-        imgs_six: [
-          'https://images.shengws.com/5.png'
-        ],
-        imgs_eight: [
-          'https://images.shengws.com/template_six.png'
-        ],
-        delay: 500,
-        radio: 0,
-        tempRadio: 0,
-        loading: false
-
-      }
-    }, methods: {
-      change: function(val) {
-        console.log('val是什么', val)
-        this.$confirm('是否切换模版', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'info'
-        }).then(() => {
-          this.loading = true
+  name: "printTemplate",
+  components: { BreadCrumb },
+  data() {
+    return {
+      crumbs: [
+        { path: false, name: "系统管理" },
+        { path: "data/print", name: "打印模版" }
+      ],
+      imgUrl_One: require("@/assets/home/1.jpg"),
+      imgUrl_Two: require("@/assets/home/2.jpg"),
+      imgUrl_Five: require("@/assets/home/5.jpg"),
+
+      url:
+        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+      imgs_one: [
+        // 'https://images.shengws.com/template_one.jpg'
+        "https://images.shengws.com/fangji.jpg"
+      ],
+      imgs_two: ["https://images.shengws.com/template_two.jpg"],
+      imgs_five: ["https://images.shengws.com/template_five.jpg"],
+      imgs_seven: ["http://images.shengws.com/7.png"],
+      imgs_six: ["https://images.shengws.com/5.png"],
+      imgs_eight: ["https://images.shengws.com/template_six.png"],
+      delay: 500,
+      radio: 0,
+      tempRadio: 0,
+      loading: false
+    };
+  },
+  methods: {
+    change: function(val) {
+      console.log("val是什么", val);
+      this.$confirm("是否切换模版", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "info"
+      })
+        .then(() => {
+          this.loading = true;
           postPrintTemplate(val).then(response => {
             if (response.data.state == 1) {
-              var template_id = response.data.data.template_id
-              this.radio = template_id.toString()
-              this.tempRadio = template_id.toString()
+              var template_id = response.data.data.template_id;
+              this.radio = template_id.toString();
+              this.tempRadio = template_id.toString();
               // 同步
-              this.loading = false
+              this.loading = false;
 
               // store.dispatch("updateAllFiledConfigList", response.data.data.fileds).then(() => {});
               this.$message({
-                type: 'success',
-                message: '切换成功'
-              })
+                type: "success",
+                message: "切换成功"
+              });
             }
-          })
-        }).catch(() => {
-          this.radio = this.tempRadio
+          });
         })
-      }
-    }, created() {
-      getPrintTemplate().then(response => {
-        if (response.data.state == 0) {
-          this.$message.error(response.data.msg)
-          return false
-        } else {
-          var template = response.data.data.template
-          this.radio = template.template_id.toString()
-          this.tempRadio = template.template_id.toString()
-        }
-      })
+        .catch(() => {
+          this.radio = this.tempRadio;
+        });
     }
+  },
+  created() {
+    getPrintTemplate().then(response => {
+      if (response.data.state == 0) {
+        this.$message.error(response.data.msg);
+        return false;
+      } else {
+        var template = response.data.data.template;
+        this.radio = template.template_id.toString();
+        this.tempRadio = template.template_id.toString();
+      }
+    });
   }
+};
 </script>
 
 <style scoped>
-  .el-row {
-    margin-bottom: 20px;
+.el-row {
+  margin-bottom: 20px;
 
-  &
-  :last-child {
+  & :last-child {
     margin-bottom: 0;
   }
-
-  }
-  .el-col {
-    border-radius: 4px;
+}
+.el-col {
+  border-radius: 4px;
+}
+</style>
+<style lang="scss">
+.app-print {
+  .el-radio__label {
+    padding-left: 10px;
   }
-
-
+}
 </style>