yikangyang-web/script/showTemplate.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
                @close="$emit('update:isShow',false)">
            <section class="drawer-container">
                <el-descriptions class="drawer-container__desc" size="small" border ref="elDesc" :column="<%- data.options?.columns ?? 2 %>" direction="vertical" :labelStyle="{ 'font-weight': '500', 'font-size': '15px' }">
                    <% data.fields.forEach((field, index) => {
                            switch (field.type) {
                    case 'input': %>
                    <el-descriptions-item label="<%- field.label %>">
                        {{ form['<%- field.name %>'] }}
                    </el-descriptions-item>
                    <% break
                    case 'textarea':
                    %>
                    <el-descriptions-item label="<%- field.label %>" span="2">
                        <div v-html="form['<%- field.name %>']"></div>
                    </el-descriptions-item>
                    <% break
                    case 'richtext':
                    %>
                    <el-descriptions-item label="<%- field.label %>" span="2">
                        {{ form['<%- field.name %>'] }}
                    </el-descriptions-item>
                    <% break
                    case 'input-number':
                    %>
                    <el-descriptions-item label="<%- field.label %>">
                        {{ typeof form['<%- field.name %>'] === 'number' ? form['<%- field.name %>'].toFixed(2) : form['<%- field.name %>'] }}
                    </el-descriptions-item>
                    <% break
                    case 'select':
                    %>
                    <el-descriptions-item label="<%- field.label %>">
                        {{ <%- field.optionsFrom ? handleFormName(field.optionsFrom) : JSON.stringify(field.optionsParams).replaceAll('"','\'') %>.find(i => i['<%- field.optionProps?.value ?? 'value' %>'] === form['<%- field.name %>']) ? <%- field.optionsFrom ? handleFormName(field.optionsFrom) : JSON.stringify(field.optionsParams).replaceAll('"','\'') %>.find(i => i['<%- field.optionProps?.value ?? 'value' %>'] === form['<%- field.name %>'])['<%- field.optionProps?.label ?? 'label' %>'] : '' }}
                    </el-descriptions-item>
                    <% break
                    case 'date':
                    %>
                    <el-descriptions-item label="<%- field.label %>">
                        {{ form['<%- field.name %>'] }}
                    </el-descriptions-item>
                    <% break
                    case 'switch':
                    %>
                    <el-descriptions-item label="<%- field.label %>">
                        {{ form['<%- field.name %>'] ? '是' : '否' }}
                    </el-descriptions-item>
                    <% break
                    case 'file': %>
                    <el-form-item label="<%- field.label %>" prop="<%- field.name %>">
                        <el-upload
                          :file-list="form['<%- field.name %>']"
                          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">
                        </el-upload>
                    </el-form-item>
                    <% break
                    }
                    })%>
                </el-descriptions>
            </section>
        </el-drawer>
    </div>
</template>

<script>
  import { show } from "@/api/<%- data.originalName %>/<%- data.originalName %>";

  export default {
    name: "<%- data.name %>Show",
    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: () => []
  },
  <% }
  }%>
  },
  data() {
    return {
      loading: false,
      visible: false,
      form: {
      <% for (let index in data.fields){ %>
      <%- data.fields[index].name %>: <%- JSON.stringify(data.fields[index].defaultValue) ?? "''" %>,
      <% } %>
  },
  }
  },
  watch: {
    isShow(newVal) {
      this.visible = newVal
    },
    visible(newVal) {
      this.$emit('update:isShow', newVal)
    },
  },
  methods: {
    async getDetail(id) {
      try {
        const detail = await show({
          id
        })
        for (let key in this.form) {
          if (detail.hasOwnProperty(key)) {
            this.form[key] = detail[key]
          }
        }
      } catch (err) {
        console.error(err)
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .span2 {
    grid-column: span 2;
  }
  ::v-deep .el-form-item > * {
    max-width: 100%;
  }
  .drawer-container {
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;

    & > * {
      flex: 1;
    }
  }
</style>