|
|
|
|
@ -5,6 +5,21 @@ |
|
|
|
|
:table-loading="loading" @row-update="rowUpdate" @row-save="rowSave" @search-change="searchChange" |
|
|
|
|
@search-reset="searchReset" :page.sync="page"> |
|
|
|
|
</avue-crud> |
|
|
|
|
<template slot="picture" slot-scope="scope"> |
|
|
|
|
<el-upload |
|
|
|
|
class="avatar-uploader" |
|
|
|
|
action="/api/upload" |
|
|
|
|
:show-file-list="false" |
|
|
|
|
list-type="picture-card" |
|
|
|
|
:on-success="(res, file) => handleUploadSuccess(res, file, scope)" |
|
|
|
|
:before-upload="beforeUpload" |
|
|
|
|
:on-preview="handlePreview" |
|
|
|
|
:headers="uploadHeaders" |
|
|
|
|
> |
|
|
|
|
<img v-if="scope.row.picture" :src="scope.row.picture" class="avatar" style="width:100%;height:100%;object-fit:contain;" /> |
|
|
|
|
<i v-else class="el-icon-plus"></i> |
|
|
|
|
</el-upload> |
|
|
|
|
</template> |
|
|
|
|
</basic-container> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
@ -13,7 +28,10 @@ import { getList, add, remove, update, getCode } from "@/api/materials/list"; |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
form: { imageUrl: "" }, |
|
|
|
|
form: { |
|
|
|
|
imageUrl: "", |
|
|
|
|
picture: "" // 用于存储接口返回的图片地址 |
|
|
|
|
}, |
|
|
|
|
selectionList: [], |
|
|
|
|
query: {}, |
|
|
|
|
loading: true, |
|
|
|
|
@ -98,30 +116,45 @@ export default { |
|
|
|
|
{ |
|
|
|
|
label: '图片', |
|
|
|
|
prop: 'picture', |
|
|
|
|
type: 'upload', |
|
|
|
|
headerAlign: "center", |
|
|
|
|
align: "center", |
|
|
|
|
loadText: "图片上传中，请稍等", |
|
|
|
|
span: 12, |
|
|
|
|
// propsHttp: { //配置请求接口返回的数据结构 |
|
|
|
|
// url: 'picture', //路径地址 |
|
|
|
|
// name: 'name', //图片名称 |
|
|
|
|
// res: 'data' //返回数据层级结构 |
|
|
|
|
// }, |
|
|
|
|
tip: "只能上传jpg/png文件", |
|
|
|
|
slot: true, // 使用自定义插槽 |
|
|
|
|
add: true, // 新增时显示 |
|
|
|
|
edit: true, // 编辑时显示 |
|
|
|
|
view: true, // 查看时显示 |
|
|
|
|
rules: [{ |
|
|
|
|
required: true, |
|
|
|
|
message: "请上传图片", |
|
|
|
|
trigger: "change", |
|
|
|
|
}], |
|
|
|
|
formatter: (row, column) => { |
|
|
|
|
const value = row.picture; |
|
|
|
|
if (value === null || value === undefined || value === "") { |
|
|
|
|
return "无" |
|
|
|
|
} |
|
|
|
|
return value; |
|
|
|
|
} |
|
|
|
|
trigger: "change" |
|
|
|
|
}] |
|
|
|
|
}, |
|
|
|
|
// { |
|
|
|
|
// label: '图片', |
|
|
|
|
// prop: 'picture', |
|
|
|
|
// type: 'upload', |
|
|
|
|
// headerAlign: "center", |
|
|
|
|
// align: "center", |
|
|
|
|
// loadText: "图片上传中，请稍等", |
|
|
|
|
// span: 12, |
|
|
|
|
// // propsHttp: { //配置请求接口返回的数据结构 |
|
|
|
|
// // url: 'picture', //路径地址 |
|
|
|
|
// // name: 'name', //图片名称 |
|
|
|
|
// // res: 'data' //返回数据层级结构 |
|
|
|
|
// // }, |
|
|
|
|
// tip: "只能上传jpg/png文件", |
|
|
|
|
// rules: [{ |
|
|
|
|
// required: true, |
|
|
|
|
// message: "请上传图片", |
|
|
|
|
// trigger: "change", |
|
|
|
|
// }], |
|
|
|
|
// formatter: (row, column) => { |
|
|
|
|
// const value = row.picture; |
|
|
|
|
// if (value === null || value === undefined || value === "") { |
|
|
|
|
// return "无" |
|
|
|
|
// } |
|
|
|
|
// return value; |
|
|
|
|
// } |
|
|
|
|
// }, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
data: [], |
|
|
|
|
@ -135,6 +168,7 @@ export default { |
|
|
|
|
this.fetchMaterialCode(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
|
|
|
|
|
fetchMaterialCode() { |
|
|
|
|
getCode() |
|
|
|
|
.then((res) => { |
|
|
|
|
|
taozi
4 months ago