|
|
<% 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>
|
|
|
<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>
|
