lb #46

Merged
g7hoo merged 3 commits from lb into test 2023-10-17 08:38:27 +08:00
3 changed files with 182 additions and 63 deletions
Showing only changes of commit 32cbf9076f - Show all commits

BIN
src/assets/images/tuple.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 944 B

View File

@ -48,23 +48,6 @@
:placeholder="`请选择${col.label}`" :placeholder="`请选择${col.label}`"
value-format="timestamp" value-format="timestamp"
v-bind="col.bind"></el-date-picker> 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 <el-switch
v-if="col.switch" v-if="col.switch"
v-model="form[col.prop]" v-model="form[col.prop]"
@ -76,6 +59,43 @@
:key="col.key" :key="col.key"
:is="col.subcomponent" :is="col.subcomponent"
:inlineStyle="col.style"></component> :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-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -83,6 +103,9 @@
</template> </template>
<script> <script>
import { getAccessToken } from '@/utils/auth';
import tupleImg from '@/assets/images/tuple.png';
/** /**
* 找到最长的label * 找到最长的label
* @param {*} options * @param {*} options
@ -101,6 +124,48 @@ function findMaxLabelWidth(rows) {
return max; 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 { export default {
name: 'DialogForm', name: 'DialogForm',
model: { model: {
@ -108,7 +173,7 @@ export default {
event: 'update', event: 'update',
}, },
emits: ['update'], emits: ['update'],
components: {}, components: { uploadedFile },
props: { props: {
rows: { rows: {
type: Array, type: Array,
@ -133,10 +198,14 @@ export default {
}, },
data() { data() {
return { return {
uploadOpen: false,
form: {},
formLoading: true, formLoading: true,
optionListOf: {}, optionListOf: {},
uploadedFileList: [], uploadedFileList: [],
dataLoaded: false, dataLoaded: false,
uploadHeaders: { Authorization: 'Bearer ' + getAccessToken() },
uploadUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // headersurl
}; };
}, },
computed: { computed: {
@ -146,16 +215,6 @@ export default {
return max * 20; return max * 20;
// return max * 20 + 'px'; // 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: { watch: {
rows: { rows: {
@ -168,6 +227,13 @@ export default {
deep: true, deep: true,
immediate: false, immediate: false,
}, },
dataForm: {
handler(val) {
this.form = JSON.parse(JSON.stringify(val));
},
deep: true,
immediate: true,
},
}, },
mounted() { mounted() {
// options // options
@ -283,23 +349,27 @@ export default {
beforeUpload() {}, beforeUpload() {},
// bind // bind
handleUploadSuccess(response, file, fileList) { handleUploadSuccess(response, file, fileList) {
console.log( this.form.files.push({
'[dialogForm:handleUploadSuccess]', fileName: file.name,
response, fileUrl: response.data,
file, fileType: 2,
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.$modal.msgSuccess('上传成功'); this.$modal.msgSuccess('上传成功');
this.$emit('update', this.form);
}, },
getFileName(fileUrl) { getFileName(fileUrl) {
return fileUrl.split('/').pop(); 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> </script>
@ -309,4 +379,52 @@ export default {
.el-select { .el-select {
width: 100%; 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> </style>

View File

@ -37,22 +37,7 @@
@close="cancel" @close="cancel"
@cancel="cancel" @cancel="cancel"
@confirm="submitForm"> @confirm="submitForm">
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" /> <DialogForm v-if="open" ref="form" v-model="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>
</base-dialog> </base-dialog>
</div> </div>
</template> </template>
@ -70,7 +55,7 @@ import {
exportEquipmentTypeExcel, exportEquipmentTypeExcel,
} from '@/api/base/equipmentType'; } from '@/api/base/equipmentType';
import { getAccessToken } from '@/utils/auth'; // import { getAccessToken } from '@/utils/auth';
export default { export default {
name: 'EquipmentType', name: 'EquipmentType',
@ -164,15 +149,13 @@ export default {
prop: 'parentId', prop: 'parentId',
url: '/base/equipment-type/page?pageNo=1&pageSize=100', url: '/base/equipment-type/page?pageNo=1&pageSize=100',
}, },
{},
],
[
{ {
upload: true, upload: true,
label: '上传资料', label: '上传资料',
prop: 'uploadFiles', prop: 'files',
url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', //
bind: {
headers: { Authorization: 'Bearer ' + getAccessToken() },
'show-file-list': false,
},
}, },
], ],
[{ input: true, label: '备注', prop: 'remark' }], [{ input: true, label: '备注', prop: 'remark' }],
@ -251,7 +234,25 @@ export default {
const id = row.id; const id = row.id;
getEquipmentType(id).then((response) => { getEquipmentType(id).then((response) => {
this.form = response.data; 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.open = true;
this.title = '修改设备类型'; this.title = '修改设备类型';
}); });