add 文件上传

This commit is contained in:
lb 2023-02-02 14:45:40 +08:00
vanhempi 6063f40606
commit cb3e47a45e
4 muutettua tiedostoa jossa 70 lisäystä ja 5 poistoa

Näytä tiedosto

@ -46,6 +46,19 @@
:disabled="detailMode"
/>
<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">
<!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO后续可能会根据业务需求创建新的版本 -->
<component
@ -76,6 +89,7 @@
<script>
import { pick as __pick } from "@/utils/filters";
import Cookies from 'js-cookie'
function reConstructTreeData(listObj) {
const entry = [];
@ -112,7 +126,8 @@ export default {
const dataForm = {};
this.configs.form.rows.forEach((row) => {
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)
col.fetchData().then(({ data: res }) => {
@ -148,7 +163,7 @@ export default {
col.options.splice(0);
}
return col
return col;
});
}
});
@ -164,6 +179,13 @@ export default {
created() {
// console.log('[dialog] created!!! wouldn\'t create again...')
},
computed: {
uploadHeaders() {
return {
token: Cookies.get('token') || ''
}
}
},
methods: {
/** utitilities */
showButton(operate) {
@ -213,7 +235,7 @@ export default {
if (res && res.code === 0) {
const dataFormKeys = Object.keys(this.dataForm);
console.log("keys ===> ", dataFormKeys);
// console.log('data form keys: ', dataFormKeys, pick(res.data, dataFormKeys))
this.dataForm = __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() {
// this.resetForm();
this.selfVisible = false;

Näytä tiedosto

@ -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')
])
}
}

Näytä tiedosto

@ -94,7 +94,7 @@ export default function () {
],
// [{ textarea: true, label: "描述信息", prop: "description", 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: [
{ name: "add", label: "保存", type: "primary", permission: "pms:equipmentType:save", showOnEdit: false },

Näytä tiedosto

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