supermarkpp/src/views/papers/Index.vue

<style lang="scss">

</style>
<template>
  <section class="content">
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><a href="/">试卷管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>试卷模板</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form :model="queryParams" label-width="80px" class="filter-form" :inine="true">
      <el-row>
        <el-col :span="4">
          <el-form-item label="名称" size="mini">
            <el-input v-model="queryParams.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="10" style="margin-left: 10px">
            <el-button type="primary" @click="getData" size="mini">筛选</el-button>
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table v-loading="loading" :data="list" style="width: 100%; margin-top: 10px" height="50vh">
      <el-table-column align="center" prop="name" label="名称" />
      <!-- <el-table-column align="center" prop="subject" label="科目" />
      <el-table-column align="center" prop="size" label="尺寸" /> -->
      <el-table-column align="center" prop="imgNum" label="页数" />
      <el-table-column align="center" prop="ctime" label="创建时间" />
      <el-table-column align="center" prop="date" label="操作" width="320">
        <template slot-scope="scope">
            <el-button @click="edit(scope.row.id)" size="mini" type="primary">编辑</el-button>
          <el-button @click="cutpaper(scope.row.id)" size="mini" type="warning">试卷分隔</el-button>
          <el-button @click="del(scope.row.id)" size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Page ref="pageButton" :current="form.page" :page_size="form.page_size" :total="total" @pageChange="gopage" />
    <!-- 新增/编辑 -->
    <el-dialog title="新增试卷模板" :visible.sync="open" width="50%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="试卷名称" prop="name">
          <el-input clearable v-model="form.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="试卷科目" prop="role">
          <el-select v-model="form.subject" placeholder="请选择科目" filterable>
            <el-option v-for="item in $const.subjectList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="试卷尺寸" prop="parent_id">
          <el-select v-model="form.size" placeholder="请输入尺寸" clearable filterable size="mini">
            <el-option v-for="item in $const.paperSizeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="试卷图片" prop>
          <el-upload
            class="upload-demo"
            action="/api/admin/uploadfile"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 第二步 -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
  import Page from "../../components/Page";
  import Cropper from 'cropperjs'
  import 'cropperjs/dist/cropper.css'
  export default {
    components: {
      Page,
    },
    data() {
      return {
        loading: false,
        queryParams: {
          page: 1,
        },
        form: {},
        form1: {},
        form2: {},
        list: [{}, {}],
        total: 0,
        title: "新增用户",
        open: false,
        doctorList: [],
        rules: {},
        stepNum: 1,
        fileList:[]
      };
    },
    methods: {
      del(id) {
        this.$confirm("确认删除?", "提示", {
          type: "warning",
        }).then(() => {
          this.$api
            .delPaperInfo({
              id: id,
            })
            .then((res) => {
              if (!res.data.code) {
                this.msgSuccess("删除成功");
                this.getData();
              } else {
                this.$msgError(res.data.message);
              }
            });
        });
      },
      gopage(size) {
        if (size) {
          this.queryParams.page_size = size;
        }
        this.queryParams.page = this.$refs.pageButton.page;
        this.getData();
      },
      getData() {
        this.loading = true;
        this.$api.getPapersList(this.queryParams).then((res) => {
          this.list = res.data.data.list;
          this.total = res.data.data.total;
          this.loading = false;
        });

        this.$api
          .getDoctorsSearchList({})
          .then((res) => {
            this.doctorList = res.data.data;
            this.$set(this.doctorList, res.data.data);
            // this.loading = false;
          });
      },
      handleAdd() {
        this.open = true;
        this.title = "新增医生";
        this.form = {};
        // this.initCropper();
      },
      handleSuccess(res){
        this.fileList.push({"name":res.data.name,"url":res.data.url})
      },
      handleRemove(file,fileList){
        console.log(file,fileList,22222222222)
        this.fileList = fileList
      },
      edit(id) {
        this.fileList = [];
        this.$api.getPaperInfo({id:id}).then(res=>{
          this.form = res.data.data;
          let imgs = res.data.data.imgs?JSON.parse(res.data.data.imgs):[];
          imgs.forEach((item,index)=>{
            this.fileList.push({"name":item,"url":item})
          })
          this.open = true;
        })
      },
      cutpaper(id) {
        this.title = "编辑医生";
        this.$router.push({path:"/papertpl/cutpaper",query:{id:id}})
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate((valid) => {
          let imgs = [];
          this.fileList.forEach((item,index)=>{
            imgs.push(item.url)
          })
          this.form.imgs = JSON.stringify(imgs)
          if (valid) {
            if (this.form.id != null) {
              this.$api.editPaperInfo(this.form).then((res) => {
                if (res.data.code == 0) {
                  this.msgSuccess("成功!");
                  this.open = false;
                  this.getData();
                } else {
                  this.msgError(res.data.message);
                }
              });
            } else {
              this.$api.addPaperInfo(this.form).then((res) => {
                if (res.data.code == 0) {
                  this.msgSuccess("成功!");
                  this.open = false;
                  this.getData();
                } else {
                  this.msgError(res.data.message);
                }
              });
            }
          }
        });
      },
      initCropper() {
        let that = this;
        this.$nextTick(function () {
          let imgObj = this.$refs.image;
          that.myCropper = new Cropper(imgObj, {
            viewMode: 0,
            dragMode: "crop",
            autoCrop: false,
            initialAspectRatio: 1,
            // aspectRatio: 1,
            preview: '.before',
            background: false,
            autoCropArea: 0.6,
            zoomOnWheel: true,
            cropBoxResizable:true,
            movable:true,
            ready: function () {
              // self.croppable = true;
              // this.cropperCutImg = this.cropper.getCroppedCanvas({ width: 1310 }).toDataURL("image/jpeg")
              // console.log(this.cropperCutImg,333333333)
              document.addEventListener('keydown',function(e){
                console.log(555555555)
                console.log(e)
                if(e.keyCode==32){
                  console.log(44444444)
                  that.myCropper.setDragMode("move");
                }
              })
              document.addEventListener('keyup',function(e){
                if(e.keyCode==32){
                  that.myCropper.setDragMode("crop");
                  // that.myCropper.clear()
                }
              })
            },
            cropstart:function(e){
            },
            cropend:function(e){
              let cropData = that.myCropper.getCropBoxData();
              that.myCropper.clear()
            },
            crop(){
              let cropData = that.myCropper.getCropBoxData();
            }
          })
        })
      }
    },
    created() {
      this.getData();

    },
    mounted() {
      this.initCropper();
    }
  };
</script>