1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
| import { h, resolveComponent } from 'vue';
| import modelBody from "./vSellOrderImg/vSellOrderImgModelBody.vue"
| let extension = {
| components: {//动态扩充组件或组件路径
| gridHeader: '',
| gridBody: {
| render() {
| return h(resolveComponent('el-alert'), {
| type: "success",
| style: { 'margin-bottom': '12px' },
| 'show-icon': false,
| closable: false,
| }, '点击新建、编辑弹出框，可以对明细表进行上传文件或者图片操作，见vSellOrderImg.js')
| }
| },
| gridFooter: '',
| modelHeader: "",
| //点击上传图片的弹出框
| modelBody: modelBody,
| modelFooter: "",
| },
| text: "一对一从表编辑上传图片",
| methods: {
| onInit() {
| },
| onInited() {
| this.height = this.height - 56;
| //获取图片位置，在图片后面加一个上传按钮,这里只是演示随便找的一个字段存图片
| let _index = this.detailOptions.columns.findIndex(x => { return x.field == 'Remark' });
|
| //这里只是演示，实际操作在代码生成器table显示类型设置为图片后这里就不用操作了
| //代码生成器中编辑行号设置为0，不要设置为大于0的数据
| this.detailOptions.columns[_index].edit = null;
| this.detailOptions.columns[_index].type = 'img';
| this.detailOptions.columns[_index].title = '图片';
|
| //从表动态添加一列(上传图片列),生成上传图片、与删除图片操作
| this.detailOptions.columns.splice(_index, 0, {
| field: "随便写",
| title: "上传图片",
| width: 150,
| align: "center",
| render: (h, { row, column, index }) => {
| //下面所有需要显示的信息都从row里面取出来
| return h(
| "div", { style: { color: '#0c83ff', 'font-size': '13px', cursor: 'pointer' } },
| [
| h(
| "i", {
| style: { 'margin-right': '10px' },
| class:['el-icon-upload'],
| onClick: (e) => {
| e.stopPropagation();
| //记住当前操作的明细表行数据
| //如果原来有图片,上传图片界面把原来的图片也显示出来
| let fileInfo = (row.Remark || '').split(",").filter(x => { return x }).map(img => {
| //(生成文件格式) fileInfo格式参数，见volupload组件
| return { path: img, name: "" };
| })
| this.$refs.modelBody.open(fileInfo, row)
| }
| }, [], '上传图片'
| ),
| h('i', {
| class: ['el-icon-delete'], onClick: (e) => {
| e.stopPropagation(); row.Remark = ''
| }
| }, '删除图片')
| ])
| },
| })
| }
| }
| };
| export default extension;
|
|
