update ui
This commit is contained in:
		
							
								
								
									
										14
									
								
								src/assets/icons/svg/icon-upload.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										14
									
								
								src/assets/icons/svg/icon-upload.svg
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,14 @@
 | 
			
		||||
<?xml version="1.0" encoding="UTF-8"?>
 | 
			
		||||
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 | 
			
		||||
    <title>上传</title>
 | 
			
		||||
    <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.65">
 | 
			
		||||
        <g id="上传_Resources/Button" transform="translate(-12.000000, -9.000000)">
 | 
			
		||||
            <g id="上传" transform="translate(12.000000, 9.000000)">
 | 
			
		||||
                <g id="upload" transform="translate(0.875000, 0.875000)" fill="currentColor" fill-rule="nonzero">
 | 
			
		||||
                    <path d="M5.80371094,0.138085937 C5.8953125,0.046484375 6.01699219,0 6.13867188,0 C6.26035156,0 6.38066406,0.046484375 6.47363281,0.138085937 L8.60371094,2.26953125 C8.78828125,2.45410156 8.78828125,2.75351562 8.60371094,2.93808594 C8.51484375,3.02695312 8.39589844,3.07617188 8.27011719,3.07617188 C8.14433594,3.07617188 8.02539062,3.02695312 7.93652344,2.93808594 L6.61171875,1.61328125 L6.61171875,9.51289062 C6.61171875,9.77402344 6.39980469,9.9859375 6.13867188,9.9859375 C5.87753906,9.9859375 5.665625,9.77402344 5.665625,9.51289062 L5.665625,1.61328125 L4.34082031,2.93808594 C4.15625,3.12265625 3.85683594,3.12265625 3.67363281,2.93808594 C3.4890625,2.75351562 3.4890625,2.45410156 3.67226563,2.26953125 L5.80371094,0.138085937 Z M11.7769531,7.88046875 C11.5158203,7.88046875 11.3039063,8.09238281 11.3039063,8.35351563 L11.3039063,11.025 C11.3039063,11.1794922 11.178125,11.3066406 11.0222656,11.3066406 L1.22636719,11.3066406 C1.071875,11.3066406 0.944726562,11.1808594 0.944726562,11.025 L0.944726562,8.35214844 C0.944726562,8.09101563 0.7328125,7.87910156 0.471679688,7.87910156 C0.210546875,7.87910156 0,8.09238281 0,8.35214844 L0,11.3996094 C0,11.8685547 0.381445313,12.2486328 0.849023437,12.2486328 L11.4009766,12.2486328 C11.8699219,12.2486328 12.25,11.8671875 12.25,11.3996094 L12.25,8.35214844 C12.25,8.09238281 12.0380859,7.88046875 11.7769531,7.88046875 Z" id="Shape"></path>
 | 
			
		||||
                </g>
 | 
			
		||||
                <rect id="Rectangle-49" x="0" y="0" width="14" height="14"></rect>
 | 
			
		||||
            </g>
 | 
			
		||||
        </g>
 | 
			
		||||
    </g>
 | 
			
		||||
</svg>
 | 
			
		||||
| 
		 After Width: | Height: | Size: 2.1 KiB  | 
@@ -83,6 +83,9 @@
 | 
			
		||||
							:on-success="handleUploadSuccess"
 | 
			
		||||
							v-bind="col.bind">
 | 
			
		||||
							<el-button size="mini" :disabled="col.bind?.disabled || false">
 | 
			
		||||
								<svg-icon
 | 
			
		||||
									icon-class="icon-upload"
 | 
			
		||||
									style="color: inherit"></svg-icon>
 | 
			
		||||
								上传文件
 | 
			
		||||
							</el-button>
 | 
			
		||||
							<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
 | 
			
		||||
@@ -133,7 +136,6 @@ const uploadedFile = {
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		handleDelete() {
 | 
			
		||||
			console.log('emit delete event')
 | 
			
		||||
			this.$emit('delete', this.file);
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
@@ -220,7 +222,6 @@ export default {
 | 
			
		||||
	watch: {
 | 
			
		||||
		rows: {
 | 
			
		||||
			handler() {
 | 
			
		||||
				console.log('watch triggered!');
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.handleOptions('watch');
 | 
			
		||||
				});
 | 
			
		||||
@@ -369,7 +370,9 @@ export default {
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		handleDeleteFile(file) {
 | 
			
		||||
			this.form.files = this.form.files.filter(item => item.fileUrl != file.fileUrl);
 | 
			
		||||
			this.form.files = this.form.files.filter(
 | 
			
		||||
				(item) => item.fileUrl != file.fileUrl
 | 
			
		||||
			);
 | 
			
		||||
			this.$emit('update', this.form);
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
 
 | 
			
		||||
@@ -18,7 +18,13 @@
 | 
			
		||||
				预览
 | 
			
		||||
			</div> -->
 | 
			
		||||
		</section>
 | 
			
		||||
		<section class="file-area">
 | 
			
		||||
		<section
 | 
			
		||||
			class="file-area"
 | 
			
		||||
			:style="{
 | 
			
		||||
				height: expand ? 'auto' : isPicMode ? '180px' : '152px',
 | 
			
		||||
				gap: isPicMode ? '0 24px' : '24px',
 | 
			
		||||
				gridAutoRows: isPicMode ? '180px' : '152px',
 | 
			
		||||
			}">
 | 
			
		||||
			<el-upload
 | 
			
		||||
				class="equipment-upload"
 | 
			
		||||
				:disabled="disabled"
 | 
			
		||||
@@ -56,7 +62,6 @@
 | 
			
		||||
				v-for="(file, index) in files"
 | 
			
		||||
				:key="file.fileName"
 | 
			
		||||
				:style="{
 | 
			
		||||
					display: index > 3 && !expand ? 'none' : 'block',
 | 
			
		||||
					background: isPicMode
 | 
			
		||||
						? `url(${file.fileUrl}) no-repeat`
 | 
			
		||||
						: `url(${defaultBg}) no-repeat`,
 | 
			
		||||
@@ -226,7 +231,7 @@ export default {
 | 
			
		||||
				clearTimeout(this.updateTimer);
 | 
			
		||||
			}
 | 
			
		||||
			this.updateTimer = setTimeout(() => {
 | 
			
		||||
				console.log('[AssetsUpload] 更新上传列表');
 | 
			
		||||
				// console.log('[AssetsUpload] 更新上传列表');
 | 
			
		||||
				this.emitFilelist();
 | 
			
		||||
				clearTimeout(this.updateTimer);
 | 
			
		||||
				this.updateTimer = null;
 | 
			
		||||
@@ -314,7 +319,6 @@ export default {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
:deep(.equipment-upload) {
 | 
			
		||||
	background: #ccc4;
 | 
			
		||||
	.el-upload-dragger {
 | 
			
		||||
		width: 188px;
 | 
			
		||||
		height: 128px;
 | 
			
		||||
@@ -346,6 +350,10 @@ export default {
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.equipment-upload {
 | 
			
		||||
	margin-bottom: 24px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.file-list {
 | 
			
		||||
	padding: 12px;
 | 
			
		||||
	border: 1px solid #ccc;
 | 
			
		||||
@@ -354,13 +362,14 @@ export default {
 | 
			
		||||
// custom
 | 
			
		||||
.file-area {
 | 
			
		||||
	display: grid;
 | 
			
		||||
	grid-template-columns: repeat(5, 188px);
 | 
			
		||||
	grid-auto-rows: 128px;
 | 
			
		||||
	gap: 24px 18px;
 | 
			
		||||
	place-content: center;
 | 
			
		||||
	grid-template-columns: repeat(auto-fill, 188px);
 | 
			
		||||
	grid-auto-rows: 152px;
 | 
			
		||||
	gap: 48px 24px;
 | 
			
		||||
	overflow: hidden;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.file-list__item {
 | 
			
		||||
	height: 128px;
 | 
			
		||||
	background-color: #fff;
 | 
			
		||||
	border: 1px dashed #d9d9d9;
 | 
			
		||||
	border-radius: 6px;
 | 
			
		||||
 
 | 
			
		||||
@@ -1,32 +0,0 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
    filename: EquipmentAssets.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2023-08-22 11:11:18
 | 
			
		||||
    description: 设备资产
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
    <div class="equipment-assets"></div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
export default {
 | 
			
		||||
    name: "EquipmentAssets",
 | 
			
		||||
    components: {},
 | 
			
		||||
    props: {},
 | 
			
		||||
    data() {
 | 
			
		||||
        return {}
 | 
			
		||||
    },
 | 
			
		||||
    computed: {},
 | 
			
		||||
    methods: {},
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.equipment-assets {
 | 
			
		||||
    background: #f1f1f1;
 | 
			
		||||
    padding: 12px;
 | 
			
		||||
    min-height: 128px;
 | 
			
		||||
    margin-top: 8px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
@@ -1,111 +0,0 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
    filename: EquipmentPics.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2023-08-18 16:29:39
 | 
			
		||||
    description: 
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="equipment-pics">
 | 
			
		||||
		<div v-for="(url, idx) in images" :key="url">
 | 
			
		||||
			<img :src="url" :alt="url" />
 | 
			
		||||
			<figure class="big-img" :style="inlineStyle">
 | 
			
		||||
				<img :src="url" :alt="url" />
 | 
			
		||||
				<figcaption>{{ desc[idx] }}</figcaption>
 | 
			
		||||
			</figure>
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'EquipmentPics',
 | 
			
		||||
	components: {},
 | 
			
		||||
	props: {
 | 
			
		||||
		inlineStyle: {
 | 
			
		||||
			type: Object,
 | 
			
		||||
			default: () => ({}),
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			desc: [
 | 
			
		||||
				'车间设备 - 1',
 | 
			
		||||
				'车间设备 - 2',
 | 
			
		||||
				'车间设备 - 3',
 | 
			
		||||
				'车间设备 - 4',
 | 
			
		||||
				'车间设备 - 5',
 | 
			
		||||
				'车间设备 - 6',
 | 
			
		||||
				'车间设备 - 7',
 | 
			
		||||
				'车间设备 - 8',
 | 
			
		||||
				'车间设备 - 9',
 | 
			
		||||
				'车间设备 - 10',
 | 
			
		||||
				'车间设备 - 11',
 | 
			
		||||
				'车间设备 - 12',
 | 
			
		||||
			],
 | 
			
		||||
			images: Array(10)
 | 
			
		||||
				.fill(1)
 | 
			
		||||
				.map((_, index) => require(`../assets/eq${index + 1}.jpg`)),
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	methods: {},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.equipment-pics {
 | 
			
		||||
	// background: #cfcfcf;
 | 
			
		||||
	padding: 12px;
 | 
			
		||||
	// margin: 8px;
 | 
			
		||||
	display: flex;
 | 
			
		||||
	overflow-x: auto;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.equipment-pics > div {
 | 
			
		||||
	height: 100px;
 | 
			
		||||
	position: relative;
 | 
			
		||||
	cursor: pointer;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.equipment-pics > div:not(:last-child) {
 | 
			
		||||
	margin-right: 12px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.equipment-pics > div > img {
 | 
			
		||||
	height: 95%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.equipment-pics > div > figure {
 | 
			
		||||
	display: none;
 | 
			
		||||
	position: fixed;
 | 
			
		||||
	// inset: 0;
 | 
			
		||||
	// margin: auto;
 | 
			
		||||
	top: 0;
 | 
			
		||||
	right: 0;
 | 
			
		||||
	// width: 640px;
 | 
			
		||||
	// height: 480px;
 | 
			
		||||
	background: #000;
 | 
			
		||||
	overflow: hidden;
 | 
			
		||||
	padding: 8px 8px 0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.equipment-pics > div:hover > figure {
 | 
			
		||||
	margin: 0;
 | 
			
		||||
	display: flex;
 | 
			
		||||
	flex-direction: column;
 | 
			
		||||
	align-items: center;
 | 
			
		||||
	justify-content: center;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.equipment-pics > div > figure > img {
 | 
			
		||||
	flex: 1;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.equipment-pics > div > figure > figcaption {
 | 
			
		||||
	height: 24px;
 | 
			
		||||
	margin-top: 8px;
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	line-height: 1;
 | 
			
		||||
	color: #fff;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
@@ -129,6 +129,12 @@ export default {
 | 
			
		||||
		return {
 | 
			
		||||
			searchBarKeys: ['name', 'code'],
 | 
			
		||||
			tableBtn: [
 | 
			
		||||
				this.$auth.hasPermi(`base:equipment:update`)
 | 
			
		||||
					? {
 | 
			
		||||
							type: 'detail',
 | 
			
		||||
							btnName: '详情',
 | 
			
		||||
					  }
 | 
			
		||||
					: undefined,
 | 
			
		||||
				this.$auth.hasPermi('base:equipment:update')
 | 
			
		||||
					? {
 | 
			
		||||
							type: 'edit',
 | 
			
		||||
@@ -141,12 +147,6 @@ export default {
 | 
			
		||||
							btnName: '删除',
 | 
			
		||||
					  }
 | 
			
		||||
					: undefined,
 | 
			
		||||
				this.$auth.hasPermi(`base:equipment:update`)
 | 
			
		||||
					? {
 | 
			
		||||
							type: 'detail',
 | 
			
		||||
							btnName: '详情',
 | 
			
		||||
					  }
 | 
			
		||||
					: undefined,
 | 
			
		||||
			].filter((v) => v),
 | 
			
		||||
			tableProps: [
 | 
			
		||||
				{
 | 
			
		||||
@@ -210,6 +210,13 @@ export default {
 | 
			
		||||
				{
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: this.$auth.hasPermi('base:equipment:export') ? 'button' : '',
 | 
			
		||||
					btnName: '导出',
 | 
			
		||||
					name: 'export',
 | 
			
		||||
					plain: true,
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: this.$auth.hasPermi('base:equipment:create') ? 'button' : '',
 | 
			
		||||
					btnName: '新增',
 | 
			
		||||
@@ -217,12 +224,6 @@ export default {
 | 
			
		||||
					plain: true,
 | 
			
		||||
					color: 'success',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: this.$auth.hasPermi('base:equipment:export') ? 'button' : '',
 | 
			
		||||
					btnName: '导出',
 | 
			
		||||
					name: 'export',
 | 
			
		||||
					color: 'warning',
 | 
			
		||||
				},
 | 
			
		||||
			],
 | 
			
		||||
			rows: [
 | 
			
		||||
				[
 | 
			
		||||
 
 | 
			
		||||
@@ -207,8 +207,6 @@ export default {
 | 
			
		||||
				name: undefined,
 | 
			
		||||
				parentId: undefined,
 | 
			
		||||
				remark: undefined,
 | 
			
		||||
				fileNames: [],
 | 
			
		||||
				fileUrls: [],
 | 
			
		||||
			};
 | 
			
		||||
			this.resetForm('form');
 | 
			
		||||
		},
 | 
			
		||||
 
 | 
			
		||||
@@ -117,6 +117,7 @@ export default {
 | 
			
		||||
				{
 | 
			
		||||
					_action: 'params-monitor',
 | 
			
		||||
					label: '操作',
 | 
			
		||||
					width: 56,
 | 
			
		||||
					subcomponent: {
 | 
			
		||||
						props: ['injectData'],
 | 
			
		||||
						render: function (h) {
 | 
			
		||||
@@ -124,10 +125,10 @@ export default {
 | 
			
		||||
							return h(
 | 
			
		||||
								'el-button',
 | 
			
		||||
								{
 | 
			
		||||
									class: 'iconfont icon-detail',
 | 
			
		||||
									props: { type: 'text' },
 | 
			
		||||
									on: {
 | 
			
		||||
										click: function () {
 | 
			
		||||
											console.log('inejctdata', _this.injectData);
 | 
			
		||||
											_this.$emit('emitData', {
 | 
			
		||||
												action: _this.injectData._action,
 | 
			
		||||
												// value: _this.injectData.id,
 | 
			
		||||
@@ -135,8 +136,8 @@ export default {
 | 
			
		||||
											});
 | 
			
		||||
										},
 | 
			
		||||
									},
 | 
			
		||||
								},
 | 
			
		||||
								'查看详情'
 | 
			
		||||
								}
 | 
			
		||||
								// '查看详情'
 | 
			
		||||
							);
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
 
 | 
			
		||||
@@ -64,6 +64,7 @@ export default {
 | 
			
		||||
				name: item.inspectionContent,
 | 
			
		||||
				type: 'bar',
 | 
			
		||||
				barCategoryGap: 12,
 | 
			
		||||
				barWidth: 20,
 | 
			
		||||
				data: [],
 | 
			
		||||
			};
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user