lb #46
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}`"
|
: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', // 上传有关的headers,url都是固定的
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
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>
|
||||||
|
@ -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 = '修改设备类型';
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user