xinfeiyue-web/script/drawerTemplate.ejs

<% function handleFormName(name) {
    if (/-/.test(name)) {
        let arrs = name.split("-")
        return arrs.reduce((pre, cur, index) => pre + (index === 0 ? cur : (cur.charAt(0).toUpperCase() + cur.slice(1))), '')
    } else {
        return name
    }
} %>
<template>
    <div>
        <el-drawer
                :title="$route.meta.title"
                direction="rtl"
                size="68%"
                :visible.sync="visible"
                append-to-body
                :before-close="handleClose"
                @close="$emit('update:isShow',false)">
            <section class="drawer-container">
                <el-form class="drawer-container__form" ref="elForm" :model="form" :rules="rules" label-position="top" label-width="120px" size="small">
                    <div class="form-layout">
                        <% data.fields.forEach((field, index) => {
                             switch (field.type) {
                               case 'input': %>
                                 <el-form-item label="<%- field.label %>" prop="<%- field.name %>">
                                   <el-input v-model="form['<%- field.name %>']" clearable placeholder="请填写<%- field.label %>" style="width: 100%;"></el-input>
                                 </el-form-item>
                               <% break
                                  case 'textarea': %>
                                    <el-form-item label="<%- field.label %>" prop="<%- field.name %>">
                                      <el-input v-model="form['<%- field.name %>']" clearable placeholder="请填写<%- field.label %>" type="textarea" :autosize="{ minRows: 2 }" style="width: 100%;"></el-input>
                                    </el-form-item>
                               <% break
                                  case 'richtext': %>
                                    <el-form-item label="<%- field.label %>" prop="<%- field.name %>">
                                      <my-tinymce v-model="form['<%- field.name %>']" clearable placeholder="请填写<%- field.label %>" style="width: 100%;"></my-tinymce>
                                    </el-form-item>
                               <% break
                                  case 'input-number': %>
                                    <el-form-item label="<%- field.label %>" prop="<%- field.name %>">
                                      <el-input-number v-model="form['<%- field.name %>']" clearable placeholder="请填写<%- field.label %>" :precision="2" controls-position="right" style="width: 100%;"></el-input-number>
                                    </el-form-item>
                               <% break
                                 case 'select': %>
                                   <el-form-item label="<%- field.label %>" prop="<%- field.name %>" clearable filterable>
                                     <el-select v-model="form['<%- field.name %>']" clearable placeholder="请填写<%- field.label %>" <%- field.props?.multiple ? 'multiple' : '' %> style="width: 100%;">
                                       <el-option v-for="(option, optionIndex) in <%- field.optionsFrom ? handleFormName(field.optionsFrom) : JSON.stringify(field.optionsParams).replaceAll('"','\'') %>" :key="optionIndex" :label="option['<%- field.optionProps?.label ?? 'label' %>']" :value="option['<%- field.optionProps?.value ?? 'value' %>']"></el-option>
                                     </el-select>
                                   </el-form-item>
                               <% break
                                  case 'date': %>
                                    <el-form-item label="<%- field.label %>" prop="<%- field.name %>" clearable>
                                      <el-date-picker v-model="form['<%- field.name %>']" clearable placeholder="请填写<%- field.label %>" type="<%- field.props.type %>" value-format="<%- field.props.valueFormat ?? 'yyyy-MM-dd' %>" style="width: 100%;"></el-date-picker>
                                    </el-form-item>
                               <% break
                                  case 'switch': %>
                                    <el-form-item label="<%- field.label %>" prop="<%- field.name %>">
                                      <el-switch v-model="form['<%- field.name %>']" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否"></el-switch>
                                    </el-form-item>
                               <% break
                                  case 'tree':
                                    function treeOptions(myfield) {
                                      if (myfield.isOwnOptions) {
                                        if (myfield.optionsHasRoot) {
                                          return `[{ ${myfield.optionProps?.value ?? 'id'}: 0, ${myfield.optionProps?.label ?? 'label'}: '根结点' ,children: tableData }]`
                                        } else {
                                          return 'tableData'
                                        }
                                      } else {
                                        return myfield.optionsFrom ? (myfield.optionsHasRoot ? `[{ ${myfield.optionProps?.value ?? 'id'}: 0, ${myfield.optionProps?.label ?? 'label'}: '根结点' ,children: ${handleFormName(myfield.optionsFrom)} }]` : handleFormName(myfield.optionsFrom)) : myfield.optionsParams
                                      }
                                    } %>
                                    <el-form-item label="<%- field.label %>" prop="<%- field.name %>">
                                      <vxe-tree-select v-model="form['<%- field.name %>']" placeholder="请选择<%- field.label %>" :options="<%- treeOptions(field) %>" clearable :multiple="<%- field.props?.multiple ?? false %>" :option-props="{ value: '<%- field.optionProps?.value ?? 'id' %>', label: '<%- field.optionProps?.label ?? 'label' %>' }" style="width: 100%;"></vxe-tree-select>
                                    </el-form-item>
                               <% break
                                  case 'file': %>
                                    <el-form-item label="<%- field.label %>" prop="<%- field.name %>">
                                        <el-upload :action="action"
                                                   :file-list="form['<%- field.name %>']"
                                                   :headers="{ Authorization: `Bearer ${getToken()}`}"
                                                   accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                                                   multiple
                                                   :limit="<%- field.props.multiple ? 20 : 1 %>"
                                                   :before-upload="uploadBefore"
                                                   :on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, '<%-field.name%>')"
                                                   :on-remove="(file, fileList) => uploadRemove(file, fileList, '<%-field.name%>')"
                                                   :on-error="(err, file, fileList) => uploadError(err, file, fileList, '<%-field.name%>')">
                                            <el-button size="small" type="primary">点击上传</el-button>
                                            <div slot="tip" class="el-upload__tip">文件不超过{{ formatFileSize(uploadSize) }}</div>
                                        </el-upload>
                                    </el-form-item>
                             <% }
                        })%>
                    </div>
                </el-form>

                <div class="drawer-container__footer">
                    <el-button @click="reset">重 置</el-button>
                    <el-button type="primary" @click="submit" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </section>
        </el-drawer>
    </div>
</template>

<script>
  import { save, show } from "@/api/<%- data.originalName %>/<%- data.originalName %>";
  import axios from "axios";
  import { getToken } from "@/utils/auth";
  import { uploadSize } from "@/settings";
  import { formatFileSize } from "@/utils";

  export default {
  name: "<%- data.name %>Drawer",
  props: {
    isShow: {
      type: Boolean,
      default: false,
      required: true
    },
    <% for (let index in data.fields) {
         let field = data.fields[index]
         if (field.optionsFrom) { %>
           <%- handleFormName(field.optionsFrom) %> : {
             type: Array,
             default: () => []
           },
         <% }
         if (field.type === 'tree' && !field.optionsFrom) { %>
    tableData: {
      type: Array,
      default: () => []
    },
    <% }
         } %>
  },
  data() {
    return {
      uploadSize,
      action: process.env.VUE_APP_UPLOAD_API,
      loading: false,
      visible: false,
      form: {
        <% for (let index in data.fields){ %>
          <%- data.fields[index].name %>: <%- JSON.stringify(data.fields[index].defaultValue) ?? "''" %>,
        <% } %>
      },
      rules: {
          <% let rulesFields = data.fields.filter(i => i.hasOwnProperty('rules'))
                  for (let index in rulesFields){ %>
          <%- rulesFields[index].name %>: [
              <% rulesFields[index].rules.forEach(rule => {
              if (rule.hasOwnProperty('required')) { %>
          {
            required: true,
            message: '<%-rulesFields[index].label%>'+'必填'
          },
              <% } else if (rule.hasOwnProperty('pattern')) { %>
          {
            validator: (rule, value, callback) => {
              if (<%-rule.pattern%>.test(value)) {
                callback()
              } else {
                callback(new Error('<%-rulesFields[index].label%>'+'验证失败'))
              }
            },
            message: '<%-rulesFields[index].label%>'+'验证失败'
          },
              <% }
              })%>
        ],
          <% } %>
      },
    }
  },
  watch: {
    isShow(newVal) {
      this.visible = newVal
    },
    visible(newVal) {
      this.$emit('update:isShow', newVal)
    },
  },
  methods: {
    uploadBefore(file) {
      if (file.size > uploadSize) {
        this.$message({
          type: "warning",
          message: `上传图片大小超过${formatFileSize(uploadSize)}！`,
        });
        return false;
      }
      window.$_uploading = true
    },
    uploadSuccess(response, file, fileList, fieldName) {
      window.$_uploading = false
      fileList.forEach((file) => {
        if (file.response?.data && !file.response?.code) {
          file.response = file.response.data;
        }
      });
      this.form[fieldName] = fileList
    },
    uploadRemove(file, fileList, fieldName) {
      this.form[fieldName] = fileList
    },
    uploadError(err, file, fileList, fieldName) {
      window.$_uploading = false
      this.form[fieldName] = fileList
      this.$message({
        type: "warning",
        message: err,
      });
    },
    formatFileSize,
    getToken,
    handleClose(done) {
      this.$confirm('确定关闭窗口？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    reset() {
      this.form = {
          <% for (let index in data.fields){ %>
          <%- data.fields[index].name %>: <%- JSON.stringify(data.fields[index].defaultValue) ?? "''" %>,
          <% } %>
      }
      this.$refs['elForm'].resetFields()
    },
    submit() {
      if (window.$_uploading) {
        this.$message.warning("文件正在上传中")
        return
      }
      <% for (let index in data.fields){
           if (data.fields[index].type === 'file') {
             if (data.fields[index].props?.multiple) {
      %>
             this.form['<%- data.fields[index].name %>'] = this.form['<%- data.fields[index].name %>'].map(i => i.response?.id).filter(i => i)
          <% } else { %>
             this.form['<%- data.fields[index].name %>'] = this.form['<%- data.fields[index].name %>'][0]?.response?.id ?? ''

          <% }
          }
      } %>
      this.$refs['elForm'].validate(async valid => {
        if (valid) {
          this.loading = true
          try {
            await save(this.form)
            this.$message.success('新增成功')
            this.$emit('refresh')
            this.$emit('update:isShow', false)
            this.loading = false
            this.reset()
          } catch (err) {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.span2 {
  grid-column: span 2;
}
::v-deep .el-form-item > * {
  max-width: 100%;
}
.form-layout {
  display: grid;
  grid-gap: 2%;
  grid-template-columns: repeat(<%- data.options?.columns ?? 2 %>, 1fr);
}
.drawer-container {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;

  &__form {
    flex: 1;
    overflow-y: scroll;
  }
  &__footer {
    margin-top: 20px;
    display: flex;
  }
}
</style>