add 文件上传

This commit is contained in:
lb 2023-02-02 14:45:40 +08:00
parent 6063f40606
commit cb3e47a45e
4 changed files with 70 additions and 5 deletions

View File

@ -46,6 +46,19 @@
:disabled="detailMode" :disabled="detailMode"
/> />
<el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" /> <el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
<el-upload
v-if="col.upload"
:key="'upload_' + Math.random()"
:action="col.actionUrl"
:file-list="col.fileList"
:disabled="detailMode || !dataForm.id"
:on-change="handleUploadChange"
v-bind="col.elparams"
:headers="uploadHeaders"
>
<el-button type="primary" size="small">选择文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件且不超过500kb</div>
</el-upload>
<div class="" v-if="col.component" style="margin: 42px 0 0"> <div class="" v-if="col.component" style="margin: 42px 0 0">
<!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO后续可能会根据业务需求创建新的版本 --> <!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO后续可能会根据业务需求创建新的版本 -->
<component <component
@ -76,6 +89,7 @@
<script> <script>
import { pick as __pick } from "@/utils/filters"; import { pick as __pick } from "@/utils/filters";
import Cookies from 'js-cookie'
function reConstructTreeData(listObj) { function reConstructTreeData(listObj) {
const entry = []; const entry = [];
@ -112,7 +126,8 @@ export default {
const dataForm = {}; const dataForm = {};
this.configs.form.rows.forEach((row) => { this.configs.form.rows.forEach((row) => {
row.forEach((col) => { row.forEach((col) => {
dataForm[col.prop] = col.default ?? null; if (col.upload) dataForm[col.prop] = col.default ?? [];
else dataForm[col.prop] = col.default ?? null;
if (col.fetchData) if (col.fetchData)
col.fetchData().then(({ data: res }) => { col.fetchData().then(({ data: res }) => {
@ -148,7 +163,7 @@ export default {
col.options.splice(0); col.options.splice(0);
} }
return col return col;
}); });
} }
}); });
@ -164,6 +179,13 @@ export default {
created() { created() {
// console.log('[dialog] created!!! wouldn\'t create again...') // console.log('[dialog] created!!! wouldn\'t create again...')
}, },
computed: {
uploadHeaders() {
return {
token: Cookies.get('token') || ''
}
}
},
methods: { methods: {
/** utitilities */ /** utitilities */
showButton(operate) { showButton(operate) {
@ -213,7 +235,7 @@ export default {
if (res && res.code === 0) { if (res && res.code === 0) {
const dataFormKeys = Object.keys(this.dataForm); const dataFormKeys = Object.keys(this.dataForm);
console.log("keys ===> ", dataFormKeys); console.log("keys ===> ", dataFormKeys);
// console.log('data form keys: ', dataFormKeys, pick(res.data, dataFormKeys)) // console.log('data form keys: ', dataFormKeys, pick(res.data, dataFormKeys))
this.dataForm = __pick(res.data, dataFormKeys); this.dataForm = __pick(res.data, dataFormKeys);
console.log("pick(res.data, dataFormKeys) ===> ", __pick(res.data, dataFormKeys)); console.log("pick(res.data, dataFormKeys) ===> ", __pick(res.data, dataFormKeys));
@ -297,6 +319,10 @@ export default {
} }
}, },
handleUploadChange(file, fileList) {
console.log('[Upload] handleUploadChange...', file, fileList)
},
handleClose() { handleClose() {
// this.resetForm(); // this.resetForm();
this.selfVisible = false; this.selfVisible = false;

View File

@ -0,0 +1,39 @@
export default {
name: 'UploadComponent',
props: {
existingFiles: {
type: Array,
default: () => [ /** { }, { }, ... */]
},
typeCode: {
type: String,
default: '' // 文件类型编码
},
bind: { // element-ui 的 props
type: Object,
default: () => ({})
}
},
data() {
return {
}
},
computed: {
fileList: {
set(list) { },
get() {
// TODO计划要根据 existingFiles 来过滤
return []
}
}
},
methods: {
},
render: function (h) {
return h('el-upload', { props: { action: this.bind.action ?? '#', 'file-list': this.fileList } }, [
h('el-button', { props: { size: 'small', type: 'primary' } }, '选择文件'),
h('div', { slot: 'tip', 'class': 'el-upload__tip' }, '只能上传jpg/png文件且不超过500kb')
])
}
}

View File

@ -94,7 +94,7 @@ export default function () {
], ],
// [{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }], // [{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }],
[{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }], [{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
[{ upload: true, label: "上传资料", prop: "upload", elparams: null }], [{ upload: true, actionUrl: window.SITE_CONFIG['apiURL'] + '/pms/equipmentTypeFile', label: "上传资料", fileList:[], prop: "upload", elparams: null }],
], ],
operations: [ operations: [
{ name: "add", label: "保存", type: "primary", permission: "pms:equipmentType:save", showOnEdit: false }, { name: "add", label: "保存", type: "primary", permission: "pms:equipmentType:save", showOnEdit: false },

View File

@ -7,7 +7,7 @@ import initConfig from './config';
import ListViewWithHead from '@/views/atomViews/ListViewWithHead.vue'; import ListViewWithHead from '@/views/atomViews/ListViewWithHead.vue';
export default { export default {
name: 'ProductionLineView', name: 'EquipmentTypeView',
components: { ListViewWithHead }, components: { ListViewWithHead },
provide() { provide() {
return { return {