elizebeth/src/xt_pages/data/printTemplate/schedulePrint.vue

<template>
  <div>
    <div
      v-loading="loading"
      element-loading-text="服务器处理数据中，请稍候......."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <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
              @click="imgClick('https://kuyi.shengws.com/tempSchedule1.jpg')"
          >
              <el-tooltip
              class="item"
              effect="dark"
              :hide-after="2000"
              content="点击查看大图"
              placement="top-start"
              >
            
              <el-image
                  style="width: 200px; height: 200px"
                  :src="require('@/assets/home/111.jpg')"
              ></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: 50px;margin-right: 50px;text-align: center"
        >
        <div
            @click="imgClick('https://kuyi.shengws.com/tempSchedule2.jpg')"

        >
            <el-tooltip
            class="item"
            effect="dark"
            content="点击查看大图"
            placement="top-start"
            :hide-after="2000"
            >
          

            <el-image
                style="width: 200px; height: 200px"
                :src="require('@/assets/home/222.jpg')"
            ></el-image>
            </el-tooltip>
        </div>
        <el-radio v-model="radio" label="2" @change="change">模版二</el-radio
        >
        </el-col>

        <el-col
        :span="6"
        style="margin-right: 50px;text-align: center"
        >
        <div
          @click="imgClick('https://kuyi.shengws.com/tempSchedule2.jpg')"
        >
            <el-tooltip
            class="item"
            effect="dark"
            content="点击查看大图"
            placement="top-start"
            :hide-after="2000"
            >
            <el-image
                style="width: 200px; height: 200px"
                :src="require('@/assets/home/222.jpg')"
            ></el-image>
            </el-tooltip>
        </div>
        <el-radio v-model="radio" label="3" @change="change">模版三</el-radio
        >
        </el-col>

        <el-col
          :span="6"
          style="text-align: center"
          >
          <!-- margin-left: 100px;margin-right: 100px; -->
          <div
            @click="imgClick('https://kuyi.shengws.com/tempSchedule2.jpg')"
          >
              <el-tooltip
              class="item"
              effect="dark"
              content="点击查看大图"
              placement="top-start"
              :hide-after="2000"
              >
              <el-image
                  style="width: 200px; height: 200px"
                  :src="require('@/assets/home/222.jpg')"
              ></el-image>
              </el-tooltip>
          </div>
          <el-radio v-model="radio" label="4" @change="change">模版四</el-radio>
        </el-col>
      </el-row>
      <el-row>
        <el-col
          :span="6"
          style="text-align: center"
          >
          <div
            @click="imgClick('https://kuyi.shengws.com/tempSchedule2.jpg')"
          >
              <el-tooltip
              class="item"
              effect="dark"
              content="点击查看大图"
              placement="top-start"
              :hide-after="2000"
              >
              <el-image
                  style="width: 200px; height: 200px"
                  :src="require('@/assets/home/222.jpg')"
              ></el-image>
              </el-tooltip>
          </div>
          <el-radio v-model="radio" label="5" @change="change">模版五</el-radio>
        </el-col>
      </el-row>
   
      <el-image-viewer
        v-if="showViewer"
        :on-close="closeViewer"
        :url-list="imgs"
      ></el-image-viewer>

    </div>
  </div>
</template>

<script>
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { getScheduleTemplate, postScheduleTemplate } from "@/api/schedule";
import store from "@/store";

export default {
  name: "printTemplate",
  components: { ElImageViewer, BreadCrumb },
  data() {
    return {
      showViewer:false,
      crumbs: [
        { path: false, name: "管理中心" },
        { path: "data/print", name: "打印模版" }
      ],
      imgUrl_One: require("@/assets/home/111.jpg"),
      imgUrl_Two: require("@/assets/home/222.jpg"),
   

      imgs:[],

      imgs_one: ["https://kuyi.shengws.com/template1.png"],
      imgs_two: ["https://kuyi.shengws.com/template2.png"],
      delay: 500,
      radio: 0,
      tempRadio: 0,
      loading: false
    };
  },
  methods: {
    imgClick(val){
      this.imgs = []
      this.imgs.push(val)
      this.showViewer = true

    },
    closeViewer() {
      this.showViewer = false
    },
    change: function(val) {
       var params = {
            template_id:val
        }
     postScheduleTemplate(params).then(response=>{
         if(response.data.state == 1){
            var template = response.data.data.template
            this.$message.success("保存成功!")
            this.getlist()
         }   
      })
    },
    getlist(){
       getScheduleTemplate().then(response=>{
          if(response.data.state == 1){
            var template = response.data.data.template
            console.log("template222222",template)
            if(template.template_id == 0){
               this.radio = "1"
            }
            if(template.template_id!=0){
               this.radio = template.template_id.toString()
            }
           
          }
       })
    }
  },
  created() {
    this.getlist()
  }
};
</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>