Browse Source

提交图片

XMLWAN 4 years ago
parent
commit
cac7583a6d

BIN
src/assets/home/5.png View File


BIN
src/assets/home/template_five.png View File


BIN
src/assets/home/template_seven.png View File


BIN
src/assets/home/template_six.png View File


+ 220 - 173
src/xt_pages/data/printTemplate.vue View File

@@ -1,204 +1,251 @@
1 1
 <template>
2 2
   <div class="main-contain">
3 3
     <div class="position">
4
-      <bread-crumb :crumbs='crumbs'></bread-crumb>
4
+      <bread-crumb :crumbs="crumbs"></bread-crumb>
5 5
     </div>
6
-    <div v-loading="loading"
7
-         element-loading-text="服务器处理数据中,请稍候......."
8
-         element-loading-spinner="el-icon-loading"
9
-         element-loading-background="rgba(0, 0, 0, 0.8)">
10
-
11
-    <div class="app-container" style="text-align: center">
12
-      <p style="margin-top: 10px;margin-bottom: 30px">请选择你需要打印的血液透析护理记录单样式</p>
13
-      <el-row :gutter="20" type="flex" justify="center">
14
-        <el-col :span="6" style="text-align: center">
15
-          <div>
16
-            <el-tooltip class="item" effect="dark" :hide-after='2000' content="点击查看大图" placement="top-start">
17
-              <el-image
18
-                style="width: 200px; height: 200px"
19
-                :src="require('@/assets/home/1.jpg')"
20
-                :preview-src-list="imgs_one"
21
-              ></el-image>
22
-            </el-tooltip>
23
-
24
-          </div>
25
-          <el-radio v-model="radio" label="1" @change="change">模版一</el-radio>
26
-        </el-col>
27
-        <el-col :span="6" style="margin-left: 100px;margin-right: 100px;text-align: center">
28
-          <div>
29
-            <el-tooltip class="item" effect="dark" content="点击查看大图" placement="top-start" :hide-after='2000'>
30
-
31
-              <el-image
32
-                style="width: 200px; height: 200px"
33
-                :src="require('@/assets/home/2.jpg')"
34
-                :preview-src-list="imgs_two"
35
-              ></el-image>
36
-            </el-tooltip>
37
-
38
-          </div>
39
-          <el-radio v-model="radio" label="2" @change="change">模版二</el-radio>
40
-        </el-col>
41
-        <el-col :span="6" style="text-align: center">
42
-          <div class="demo-image__preview">
43
-            <el-tooltip class="item" effect="dark" content="点击查看大图" placement="top-start" :hide-after='2000'>
44
-
45
-              <el-image
46
-                style="width: 200px; height: 200px"
47
-                :src="require('@/assets/home/5.jpg')"
48
-                :preview-src-list="imgs_five"
49
-              ></el-image>
50
-            </el-tooltip>
51
-
52
-          </div>
53
-          <el-radio v-model="radio" label="5" @change="change">模版三</el-radio>
54
-        </el-col>
6
+    <div
7
+      v-loading="loading"
8
+      element-loading-text="服务器处理数据中,请稍候......."
9
+      element-loading-spinner="el-icon-loading"
10
+      element-loading-background="rgba(0, 0, 0, 0.8)"
11
+    >
12
+      <div class="app-container app-print" style="text-align: center">
13
+        <p style="margin-top: 10px;margin-bottom: 30px">
14
+          请选择你需要打印的血液透析护理记录单样式
15
+        </p>
16
+        <el-row :gutter="20" type="flex" justify="center">
55 17
           <el-col :span="6" style="text-align: center">
56
-          <div class="demo-image__preview">
57
-            <el-tooltip class="item" effect="dark" content="点击查看大图" placement="top-start" :hide-after='2000'>
58
-
59
-              <el-image
60
-                style="width: 200px; height: 200px"
61
-                :src="require('@/assets/home/4.png')"
62
-                :preview-src-list="imgs_seven"
63
-              ></el-image>
64
-            </el-tooltip>
65
-
66
-          </div>
67
-          <el-radio v-model="radio" label="7" @change="change">模版四</el-radio>
68
-        </el-col>
69
-      </el-row>
70
-      <el-row :gutter="20" type="flex"> 
71
-         <el-col :span="6" style="text-align: center">
72
-          <div class="demo-image__preview">
73
-            <el-tooltip class="item" effect="dark" content="点击查看大图" placement="top-start" :hide-after='2000'>
74
-              <el-image
75
-                style="width: 200px; height: 200px"
76
-                :src="require('@/assets/home/5.png')"
77
-                :preview-src-list="imgs_six"
78
-              ></el-image>
79
-            </el-tooltip>
80
-          </div>
81
-          <el-radio v-model="radio" label="8" @change="change">模版五</el-radio>
82
-        </el-col>
18
+            <div>
19
+              <el-tooltip
20
+                class="item"
21
+                effect="dark"
22
+                :hide-after="2000"
23
+                content="点击查看大图"
24
+                placement="top-start"
25
+              >
26
+                <el-image
27
+                  style="width: 200px; height: 200px"
28
+                  :src="require('@/assets/home/1.jpg')"
29
+                  :preview-src-list="imgs_one"
30
+                ></el-image>
31
+              </el-tooltip>
32
+            </div>
33
+            <el-radio v-model="radio" label="1" @change="change"
34
+              >模版一</el-radio
35
+            >
36
+          </el-col>
37
+          <el-col
38
+            :span="6"
39
+            style="margin-left: 100px;margin-right: 100px;text-align: center"
40
+          >
41
+            <div>
42
+              <el-tooltip
43
+                class="item"
44
+                effect="dark"
45
+                content="点击查看大图"
46
+                placement="top-start"
47
+                :hide-after="2000"
48
+              >
49
+                <el-image
50
+                  style="width: 200px; height: 200px"
51
+                  :src="require('@/assets/home/2.jpg')"
52
+                  :preview-src-list="imgs_two"
53
+                ></el-image>
54
+              </el-tooltip>
55
+            </div>
56
+            <el-radio v-model="radio" label="2" @change="change"
57
+              >模版二</el-radio
58
+            >
59
+          </el-col>
83 60
           <el-col :span="6" style="text-align: center">
84
-          <div class="demo-image__preview">
85
-            <el-tooltip class="item" effect="dark" content="点击查看大图" placement="top-start" :hide-after='2000'>
86
-              <el-image
87
-                style="width: 200px; height: 200px;"
88
-                :src="require('@/assets/home/template_six.png')"
89
-                :preview-src-list="imgs_eight"
90
-              ></el-image>
91
-            </el-tooltip>
92
-          </div>
93
-          <el-radio v-model="radio" label="6" @change="change">模版六</el-radio>
94
-        </el-col>
95
-      </el-row>
96
-    </div>
61
+            <div class="demo-image__preview">
62
+              <el-tooltip
63
+                class="item"
64
+                effect="dark"
65
+                content="点击查看大图"
66
+                placement="top-start"
67
+                :hide-after="2000"
68
+              >
69
+                <el-image
70
+                  style="width: 200px; height: 200px"
71
+                  :src="require('@/assets/home/5.jpg')"
72
+                  :preview-src-list="imgs_five"
73
+                ></el-image>
74
+              </el-tooltip>
75
+            </div>
76
+            <el-radio v-model="radio" label="5" @change="change"
77
+              >模版三</el-radio
78
+            >
79
+          </el-col>
80
+          <el-col :span="6" style="text-align: center">
81
+            <div class="demo-image__preview">
82
+              <el-tooltip
83
+                class="item"
84
+                effect="dark"
85
+                content="点击查看大图"
86
+                placement="top-start"
87
+                :hide-after="2000"
88
+              >
89
+                <el-image
90
+                  style="width: 200px; height: 200px"
91
+                  :src="require('@/assets/home/4.png')"
92
+                  :preview-src-list="imgs_seven"
93
+                ></el-image>
94
+              </el-tooltip>
95
+            </div>
96
+            <el-radio v-model="radio" label="7" @change="change"
97
+              >模版四</el-radio
98
+            >
99
+          </el-col>
100
+        </el-row>
101
+        <el-row :gutter="20" type="flex">
102
+          <el-col :span="6" style="text-align: center">
103
+            <div class="demo-image__preview">
104
+              <el-tooltip
105
+                class="item"
106
+                effect="dark"
107
+                content="点击查看大图"
108
+                placement="top-start"
109
+                :hide-after="2000"
110
+              >
111
+                <el-image
112
+                  style="width: 200px; height: 200px;margin-left:-60px"
113
+                  :src="require('@/assets/home/5.png')"
114
+                  :preview-src-list="imgs_six"
115
+                ></el-image>
116
+              </el-tooltip>
117
+            </div>
118
+            <el-radio
119
+              v-model="radio"
120
+              label="8"
121
+              @change="change"
122
+              style="margin-left:-60px"
123
+              >模版五</el-radio
124
+            >
125
+          </el-col>
126
+          <el-col :span="6" style="text-align: center">
127
+            <div class="demo-image__preview">
128
+              <el-tooltip
129
+                class="item"
130
+                effect="dark"
131
+                content="点击查看大图"
132
+                placement="top-start"
133
+                :hide-after="2000"
134
+              >
135
+                <el-image
136
+                  style="width: 200px; height: 200px;margin-left:30px"
137
+                  :src="require('@/assets/home/template_six.png')"
138
+                  :preview-src-list="imgs_eight"
139
+                ></el-image>
140
+              </el-tooltip>
141
+            </div>
142
+            <el-radio v-model="radio" label="6" @change="change"
143
+              >模版六</el-radio
144
+            >
145
+          </el-col>
146
+        </el-row>
147
+      </div>
97 148
     </div>
98 149
   </div>
99 150
 </template>
100 151
 
101 152
 <script>
102
-  import BreadCrumb from '@/xt_pages/components/bread-crumb'
103
-  import { getPrintTemplate, postPrintTemplate } from '@/api/data'
104
-  import store from '@/store'
153
+import BreadCrumb from "@/xt_pages/components/bread-crumb";
154
+import { getPrintTemplate, postPrintTemplate } from "@/api/data";
155
+import store from "@/store";
105 156
 
106 157
 export default {
107
-    name: 'printTemplate',
108
-    components: { BreadCrumb },
109
-    data() {
110
-      return {
111
-        crumbs: [
112
-          { path: false, name: '系统管理' },
113
-          { path: 'data/print', name: '打印模版' }
114
-        ],
115
-        imgUrl_One: require('@/assets/home/1.jpg'),
116
-        imgUrl_Two: require('@/assets/home/2.jpg'),
117
-        imgUrl_Five: require('@/assets/home/5.jpg'),
118
-
119
-        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
120
-        imgs_one: [
121
-          // 'https://images.shengws.com/template_one.jpg'
122
-          'https://images.shengws.com/fangji.jpg'
123
-        ],
124
-        imgs_two: [
125
-          'https://images.shengws.com/template_two.jpg'
126
-
127
-        ],
128
-        imgs_five: [
129
-          'https://images.shengws.com/template_five.jpg'
130
-        ],
131
-        imgs_seven: [
132
-          'http://images.shengws.com/7.png'
133
-        ],
134
-        imgs_six: [
135
-          'https://images.shengws.com/5.png'
136
-        ],
137
-        imgs_eight: [
138
-          'https://images.shengws.com/template_six.png'
139
-        ],
140
-        delay: 500,
141
-        radio: 0,
142
-        tempRadio: 0,
143
-        loading: false
144
-
145
-      }
146
-    }, methods: {
147
-      change: function(val) {
148
-        console.log('val是什么', val)
149
-        this.$confirm('是否切换模版', '提示', {
150
-          confirmButtonText: '确定',
151
-          cancelButtonText: '取消',
152
-          type: 'info'
153
-        }).then(() => {
154
-          this.loading = true
158
+  name: "printTemplate",
159
+  components: { BreadCrumb },
160
+  data() {
161
+    return {
162
+      crumbs: [
163
+        { path: false, name: "系统管理" },
164
+        { path: "data/print", name: "打印模版" }
165
+      ],
166
+      imgUrl_One: require("@/assets/home/1.jpg"),
167
+      imgUrl_Two: require("@/assets/home/2.jpg"),
168
+      imgUrl_Five: require("@/assets/home/5.jpg"),
169
+
170
+      url:
171
+        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
172
+      imgs_one: [
173
+        // 'https://images.shengws.com/template_one.jpg'
174
+        "https://images.shengws.com/fangji.jpg"
175
+      ],
176
+      imgs_two: ["https://images.shengws.com/template_two.jpg"],
177
+      imgs_five: ["https://images.shengws.com/template_five.jpg"],
178
+      imgs_seven: ["http://images.shengws.com/7.png"],
179
+      imgs_six: ["https://images.shengws.com/5.png"],
180
+      imgs_eight: ["https://images.shengws.com/template_six.png"],
181
+      delay: 500,
182
+      radio: 0,
183
+      tempRadio: 0,
184
+      loading: false
185
+    };
186
+  },
187
+  methods: {
188
+    change: function(val) {
189
+      console.log("val是什么", val);
190
+      this.$confirm("是否切换模版", "提示", {
191
+        confirmButtonText: "确定",
192
+        cancelButtonText: "取消",
193
+        type: "info"
194
+      })
195
+        .then(() => {
196
+          this.loading = true;
155 197
           postPrintTemplate(val).then(response => {
156 198
             if (response.data.state == 1) {
157
-              var template_id = response.data.data.template_id
158
-              this.radio = template_id.toString()
159
-              this.tempRadio = template_id.toString()
199
+              var template_id = response.data.data.template_id;
200
+              this.radio = template_id.toString();
201
+              this.tempRadio = template_id.toString();
160 202
               // 同步
161
-              this.loading = false
203
+              this.loading = false;
162 204
 
163 205
               // store.dispatch("updateAllFiledConfigList", response.data.data.fileds).then(() => {});
164 206
               this.$message({
165
-                type: 'success',
166
-                message: '切换成功'
167
-              })
207
+                type: "success",
208
+                message: "切换成功"
209
+              });
168 210
             }
169
-          })
170
-        }).catch(() => {
171
-          this.radio = this.tempRadio
211
+          });
172 212
         })
173
-      }
174
-    }, created() {
175
-      getPrintTemplate().then(response => {
176
-        if (response.data.state == 0) {
177
-          this.$message.error(response.data.msg)
178
-          return false
179
-        } else {
180
-          var template = response.data.data.template
181
-          this.radio = template.template_id.toString()
182
-          this.tempRadio = template.template_id.toString()
183
-        }
184
-      })
213
+        .catch(() => {
214
+          this.radio = this.tempRadio;
215
+        });
185 216
     }
217
+  },
218
+  created() {
219
+    getPrintTemplate().then(response => {
220
+      if (response.data.state == 0) {
221
+        this.$message.error(response.data.msg);
222
+        return false;
223
+      } else {
224
+        var template = response.data.data.template;
225
+        this.radio = template.template_id.toString();
226
+        this.tempRadio = template.template_id.toString();
227
+      }
228
+    });
186 229
   }
230
+};
187 231
 </script>
188 232
 
189 233
 <style scoped>
190
-  .el-row {
191
-    margin-bottom: 20px;
234
+.el-row {
235
+  margin-bottom: 20px;
192 236
 
193
-  &
194
-  :last-child {
237
+  & :last-child {
195 238
     margin-bottom: 0;
196 239
   }
197
-
198
-  }
199
-  .el-col {
200
-    border-radius: 4px;
240
+}
241
+.el-col {
242
+  border-radius: 4px;
243
+}
244
+</style>
245
+<style lang="scss">
246
+.app-print {
247
+  .el-radio__label {
248
+    padding-left: 10px;
201 249
   }
202
-
203
-
250
+}
204 251
 </style>