ioc-admin-ui/src/views/dataManagement/templatePopup.vue

<template>
  <el-dialog
    class="mydialog"
    :title="templateTitle"
    :visible.sync="dialogVisible"
    width="500px"
    height="60%"
    :before-close="handleClose"
    center
  >
    <div class="dialog-container">
      <div class="dialog-container-item">
        <div class="left-box">{{ templateType }}模板名称：</div>
        <div class="right-box">
          <el-input style="width: 300px" v-model="formData.name"></el-input>
        </div>
      </div>
      <div class="dialog-container-item">
        <div class="left-box">{{ templateType }}模板格式：</div>
        <div class="right-box">
          <el-select placeholder="请选择报表模板格式" v-model="formData.format">
            <el-option
              v-for="item in temFormatOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="dialog-container-item" v-if="templateType === '报告'">
        <div class="left-box">{{ templateType }}模板类型</div>
        <div class="right-box">
          <el-select
            placeholder="请选择报表模板格式"
            v-model="formData.reportType"
          >
            <el-option
              v-for="item in reportTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="dialog-container-info">
        <div class="left-box">{{ templateType }}模板简介：</div>
        <div class="right-box">
          <el-input
            style="width: 300px"
            type="textarea"
            v-model="formData.introduction"
          ></el-input>
        </div>
      </div>
      <div class="dialog-container-upload">
        <div class="left-box">{{ templateType }}模板上传：</div>
        <div class="right-box">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            :on-remove="handleRemove"
            :accept="'.doc,.docx,.xls,.xlsx,.pdf'"
            :file-list="fileList"
          >
            <el-button slot="trigger"
              ><i class="el-icon-upload"></i> 请将文件拖拽或点击上传</el-button
            >
            <div slot="tip" class="el-upload__tip" style="width: 265px;line-height:20px;">
              仅支持 .doc / .docx / .xls / .xlsx / .pdf 格式的文件
            </div>
          </el-upload>
        </div>
      </div>
      <div class="dialog-container-bottom">
        <el-button class="reset-btn" @click="resetEvent">重置</el-button>
        <el-button class="search-btn" @click="searchEvent">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
/**
 * 添加，编辑模板弹窗 -- 报表配置，报告配置
 */
export default {
  name: "templatePopup",
  props: {
    templateTitle: {
      type: String,
      default: "",
    },
    templateType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      fileList:[],
      dialogVisible: false,
      formData: {
        name: "",
        format: "Excel",
        introduction: "",
        id: "",
        reportType: "",
        templateType: 0,
        file: "",
      },
      temFormatOptions: [
        {
          value: "Word",
          label: "Word",
        },
        {
          value: "Excel",
          label: "Excel",
        },
        {
          value: "PDF",
          label: "PDF",
        },
      ],
      reportTypeOptions: [
        {
          value: "",
          label: "未知",
        },
        {
          value: "年度报告",
          label: "年度报告",
        },
        {
          value: "季度报告",
          label: "季度报告",
        },
        {
          value: "月度报告",
          label: "月度报告",
        },
      ],
    };
  },
  methods: {
    resetEvent() {
      this.formData.name = "";
      this.formData.format = "Excel";
      this.formData.introduction = "";
      this.formData.reportType = "";
      this.formData.file = "";
      this.fileList=[]
    },
    searchEvent() {
      this.$emit("confirmEvent", this.formData);
    },
    handleClose(){
      this.fileList=[]
      this.dialogVisible = false
    },
    beforeUpload(file) {
      const isAllowedSize = file.size / 1024 / 1024 < 10; // 限制文件大小小于10MB
      const isAllowedType = [".doc", ".docx", ".xls", ".xlsx", ".pdf"].includes(
        file.name
          .substring(file.name.lastIndexOf("."), file.name.length)
          .toLowerCase()
      ); // 限制文件格式
      if (!isAllowedSize) {
        this.$message.error("文件大小超过限制");
        return false;
      }
      if (!isAllowedType) {
        this.$message.error("文件格式不支持");
        return false;
      }
      return true;
    },
    handleRemove(file,fileList){
      this.fileList=[]
    },
    handleSuccess(response, file, fileList) {
      this.formData.file = file.raw;
      this.fileList.push(file)
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-dialog__header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid #f2f2f2;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
/deep/.el-dialog__body {
  .dialog-container {
    &-item,
    &-upload,
    &-info {
      margin: 0 auto;
      width: 90%;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      .left-box {
        height: 100%;
        width: 30%;
        font-size: 14px;
        line-height: 27px;
      }
      .right-box {
        height: 100%;
        width: 30%;
      }
    }
    &-item {
      height: 40px;
    }
    &-info {
      height: 60px;
    }
    &-upload {
      height: 95px;
    }
    &-bottom {
      margin: 0 auto;
      width: 60%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .reset-btn,
      .search-btn {
        height: 30px;
        width: 90px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .reset-btn {
        background-color: #b3b3b3;
      }
      .search-btn {
        background-color: #2ea8e6;
      }
    }
  }
}
</style>