xt_vue/src/xt_pages/data/printTemplate.vue

<template>
  <div class="main-contain">
    <div class="position">
      <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>
          <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="5" 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:5px
                :src="require('@/assets/home/4.png')"
                :preview-src-list="imgs_seven"
              ></el-image>
            </el-tooltip>
          </div>
          <el-radio v-model="radio" label="8" @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'

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'
        ],
        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()
              // 同步
              this.loading = false

              // store.dispatch("updateAllFiledConfigList", response.data.data.fileds).then(() => {});
              this.$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()
        }
      })
    }
  }
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }


</style>