Vue_New/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 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>
              <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="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-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"-->
              <!--&gt;-->
                <!--<el-image-->
                  <!--style="width: 200px; height: 200px;margin-left:30px"-->
                  <!--:src="require('@/assets/home/template_ten.jpg')"-->
                  <!--:preview-src-list="imgs_ten"-->
                <!--&gt;</el-image>-->
              <!--</el-tooltip>-->
            <!--</div>-->
            <!--<el-radio v-model="radio" label="10" @change="change"-->
            <!--&gt;模版十</el-radio-->
            <!--&gt;-->
          <!--</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"),


      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"],
      imgs_ten: ["https://kuyi.shengws.com/template_ten.jpg"],

      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>
<style lang="scss">
.app-print {
  .el-radio__label {
    padding-left: 10px;
  }
}
</style>