test #47
BIN
src/assets/images/tuple.png
Normal file
BIN
src/assets/images/tuple.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 944 B |
@ -48,23 +48,6 @@
|
||||
:placeholder="`请选择${col.label}`"
|
||||
value-format="timestamp"
|
||||
v-bind="col.bind"></el-date-picker>
|
||||
<el-upload
|
||||
class="upload-in-dialog"
|
||||
v-if="col.upload"
|
||||
:file-list="uploadedFileList"
|
||||
:action="col.url"
|
||||
:on-success="handleUploadSuccess"
|
||||
v-bind="col.bind">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="col.bind?.disabled || false">
|
||||
点击上传
|
||||
</el-button>
|
||||
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
|
||||
{{ col.uploadTips || '只能上传jpg/png文件，大小不超过2MB' }}
|
||||
</div>
|
||||
</el-upload>
|
||||
<el-switch
|
||||
v-if="col.switch"
|
||||
v-model="form[col.prop]"
|
||||
@ -76,6 +59,43 @@
|
||||
:key="col.key"
|
||||
:is="col.subcomponent"
|
||||
:inlineStyle="col.style"></component>
|
||||
|
||||
<div
|
||||
class="upload-area"
|
||||
:class="uploadOpen ? '' : 'height-48'"
|
||||
ref="uploadArea"
|
||||
v-if="col.upload">
|
||||
<span class="close-icon" :class="uploadOpen ? 'open' : ''">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-arrow-right"
|
||||
@click="handleFilesOpen" />
|
||||
</span>
|
||||
<!-- :file-list="uploadedFileList" -->
|
||||
<el-upload
|
||||
class="upload-in-dialog"
|
||||
v-if="col.upload"
|
||||
:action="uploadUrl"
|
||||
:headers="uploadHeaders"
|
||||
:show-file-list="false"
|
||||
icon="el-icon-upload2"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleUploadSuccess"
|
||||
v-bind="col.bind">
|
||||
<el-button size="mini" :disabled="col.bind?.disabled || false">
|
||||
上传文件
|
||||
</el-button>
|
||||
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
|
||||
{{ col.uploadTips || '只能上传jpg/png文件, 大小不超过2MB' }}
|
||||
</div>
|
||||
</el-upload>
|
||||
|
||||
<uploadedFile
|
||||
class="file"
|
||||
v-for="file in form[col.prop] || []"
|
||||
:file="file"
|
||||
@delete="handleDeleteFile(file)" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -83,6 +103,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAccessToken } from '@/utils/auth';
|
||||
import tupleImg from '@/assets/images/tuple.png';
|
||||
|
||||
/**
|
||||
* 找到最长的label
|
||||
* @param {*} options
|
||||
@ -101,6 +124,48 @@ function findMaxLabelWidth(rows) {
|
||||
return max;
|
||||
}
|
||||
|
||||
const uploadedFile = {
|
||||
name: 'UploadedFile',
|
||||
props: ['file'],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
handleDelete() {
|
||||
console.log('emit delete event')
|
||||
this.$emit('delete', this.file);
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
render: function (h) {
|
||||
return (
|
||||
<div
|
||||
title={this.file.fileName}
|
||||
style={{
|
||||
background: `url(${tupleImg}) no-repeat`,
|
||||
backgroundSize: '14px',
|
||||
backgroundPosition: '0 55%',
|
||||
paddingLeft: '20px',
|
||||
paddingRight: '24px',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
cursor: 'pointer',
|
||||
display: 'inline-block',
|
||||
}}>
|
||||
{this.file.fileName}
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-close"
|
||||
style="float: right; position: relative; top: 2px; left: 8px; z-index: 100"
|
||||
class="dialog__upload_component__close"
|
||||
onClick={this.handleDelete}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'DialogForm',
|
||||
model: {
|
||||
@ -108,7 +173,7 @@ export default {
|
||||
event: 'update',
|
||||
},
|
||||
emits: ['update'],
|
||||
components: {},
|
||||
components: { uploadedFile },
|
||||
props: {
|
||||
rows: {
|
||||
type: Array,
|
||||
@ -133,10 +198,14 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadOpen: false,
|
||||
form: {},
|
||||
formLoading: true,
|
||||
optionListOf: {},
|
||||
uploadedFileList: [],
|
||||
dataLoaded: false,
|
||||
uploadHeaders: { Authorization: 'Bearer ' + getAccessToken() },
|
||||
uploadUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 上传有关的headers，url都是固定的
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -146,16 +215,6 @@ export default {
|
||||
return max * 20;
|
||||
// return max * 20 + 'px';
|
||||
},
|
||||
form: {
|
||||
get() {
|
||||
// if (this.dataLoaded) return this.dataForm;
|
||||
// else return {}
|
||||
return this.dataForm;
|
||||
},
|
||||
set(val) {
|
||||
console.log('set form', val);
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
rows: {
|
||||
@ -168,6 +227,13 @@ export default {
|
||||
deep: true,
|
||||
immediate: false,
|
||||
},
|
||||
dataForm: {
|
||||
handler(val) {
|
||||
this.form = JSON.parse(JSON.stringify(val));
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 处理 options
|
||||
@ -283,23 +349,27 @@ export default {
|
||||
beforeUpload() {},
|
||||
// 上传前的验证规则可通过 bind 属性传入
|
||||
handleUploadSuccess(response, file, fileList) {
|
||||
console.log(
|
||||
'[dialogForm:handleUploadSuccess]',
|
||||
response,
|
||||
file,
|
||||
fileList,
|
||||
this.form
|
||||
);
|
||||
// 保存原始文件名
|
||||
if ('fileNames' in this.form) this.form.fileNames.push(file.name);
|
||||
// 保存完整地址
|
||||
if ('fileUrls' in this.form) this.form.fileUrls.push(response.data);
|
||||
this.form.files.push({
|
||||
fileName: file.name,
|
||||
fileUrl: response.data,
|
||||
fileType: 2,
|
||||
});
|
||||
this.$modal.msgSuccess('上传成功');
|
||||
this.$emit('update', this.form);
|
||||
},
|
||||
|
||||
getFileName(fileUrl) {
|
||||
return fileUrl.split('/').pop();
|
||||
},
|
||||
|
||||
handleFilesOpen() {
|
||||
this.uploadOpen = !this.uploadOpen;
|
||||
},
|
||||
|
||||
handleDeleteFile(file) {
|
||||
this.form.files = this.form.files.filter(item => item.fileUrl != file.fileUrl);
|
||||
this.$emit('update', this.form);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -309,4 +379,52 @@ export default {
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
// background: #ccc;
|
||||
// display: grid;
|
||||
// grid-auto-rows: 34px;
|
||||
// grid-template-columns: repeat(6, minmax(32px, max-content));
|
||||
// gap: 8px;
|
||||
// align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: height 0.3s ease-out;
|
||||
}
|
||||
|
||||
.upload-in-dialog {
|
||||
// display: inline-block;
|
||||
margin-right: 24px;
|
||||
// background: #ccc;
|
||||
position: relative;
|
||||
// top: -13px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
// background: #ccc;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 12px;
|
||||
z-index: 100;
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
.close-icon.open {
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.dialog__upload_component__close {
|
||||
color: #ccc;
|
||||
}
|
||||
.dialog__upload_component__close:hover {
|
||||
/* color: #777; */
|
||||
color: red;
|
||||
}
|
||||
|
||||
.height-48 {
|
||||
height: 35px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -37,22 +37,7 @@
|
||||
@close="cancel"
|
||||
@cancel="cancel"
|
||||
@confirm="submitForm">
|
||||
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
|
||||
<div style="padding: 12px; background: #ccc">
|
||||
<h3>文件列表</h3>
|
||||
<hr />
|
||||
<ul>
|
||||
<li v-for="item in form.fileUrls" :key="item">
|
||||
{{ JSON.stringify(item) }}
|
||||
</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<ul>
|
||||
<li v-for="item in form.fileNames" :key="item">
|
||||
{{ JSON.stringify(item) }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" />
|
||||
</base-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@ -70,7 +55,7 @@ import {
|
||||
exportEquipmentTypeExcel,
|
||||
} from '@/api/base/equipmentType';
|
||||
|
||||
import { getAccessToken } from '@/utils/auth';
|
||||
// import { getAccessToken } from '@/utils/auth';
|
||||
|
||||
export default {
|
||||
name: 'EquipmentType',
|
||||
@ -164,15 +149,13 @@ export default {
|
||||
prop: 'parentId',
|
||||
url: '/base/equipment-type/page?pageNo=1&pageSize=100',
|
||||
},
|
||||
{},
|
||||
],
|
||||
[
|
||||
{
|
||||
upload: true,
|
||||
label: '上传资料',
|
||||
prop: 'uploadFiles',
|
||||
url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
|
||||
bind: {
|
||||
headers: { Authorization: 'Bearer ' + getAccessToken() },
|
||||
'show-file-list': false,
|
||||
},
|
||||
prop: 'files',
|
||||
},
|
||||
],
|
||||
[{ input: true, label: '备注', prop: 'remark' }],
|
||||
@ -251,7 +234,25 @@ export default {
|
||||
const id = row.id;
|
||||
getEquipmentType(id).then((response) => {
|
||||
this.form = response.data;
|
||||
debugger;
|
||||
// this.form = {
|
||||
// code: 'SBLX20230925184444000041',
|
||||
// name: '测试131',
|
||||
// remark: '测试可删除',
|
||||
// id: '1706258479729336322',
|
||||
// files: [
|
||||
// { fileName: '1.png', fileUrl: '', fileType: 2 },
|
||||
// { fileName: '1.asdfaslkjfkasdf.png', fileUrl: '', fileType: 2 },
|
||||
// { fileName: '2.txt', fileUrl: '', fileType: 2 },
|
||||
// { fileName: '1.rar', fileUrl: '', fileType: 2 },
|
||||
// { fileName: '1.kkk', fileUrl: '', fileType: 2 },
|
||||
// { fileName: 'test.file', fileUrl: '', fileType: 2 },
|
||||
// { fileName: '222', fileUrl: '', fileType: 2 },
|
||||
// { fileName: 'g', fileUrl: '', fileType: 2 },
|
||||
// ],
|
||||
// createTime: 1695638697000,
|
||||
// parentId: '1701869972319584257',
|
||||
// };
|
||||
// debugger;
|
||||
this.open = true;
|
||||
this.title = '修改设备类型';
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user