update ui
This commit is contained in:
parent
074b35b6a6
commit
3e7914ac91
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"
|
:on-success="handleUploadSuccess"
|
||||||
v-bind="col.bind">
|
v-bind="col.bind">
|
||||||
<el-button size="mini" :disabled="col.bind?.disabled || false">
|
<el-button size="mini" :disabled="col.bind?.disabled || false">
|
||||||
|
<svg-icon
|
||||||
|
icon-class="icon-upload"
|
||||||
|
style="color: inherit"></svg-icon>
|
||||||
上传文件
|
上传文件
|
||||||
</el-button>
|
</el-button>
|
||||||
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
|
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
|
||||||
@ -133,7 +136,6 @@ const uploadedFile = {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleDelete() {
|
handleDelete() {
|
||||||
console.log('emit delete event')
|
|
||||||
this.$emit('delete', this.file);
|
this.$emit('delete', this.file);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -220,7 +222,6 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
rows: {
|
rows: {
|
||||||
handler() {
|
handler() {
|
||||||
console.log('watch triggered!');
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.handleOptions('watch');
|
this.handleOptions('watch');
|
||||||
});
|
});
|
||||||
@ -231,6 +232,7 @@ export default {
|
|||||||
dataForm: {
|
dataForm: {
|
||||||
handler(val) {
|
handler(val) {
|
||||||
this.form = JSON.parse(JSON.stringify(val));
|
this.form = JSON.parse(JSON.stringify(val));
|
||||||
|
this.form.files = this.form.files ?? [];
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true,
|
||||||
immediate: true,
|
immediate: true,
|
||||||
@ -368,7 +370,9 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
handleDeleteFile(file) {
|
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);
|
this.$emit('update', this.form);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -18,9 +18,16 @@
|
|||||||
预览
|
预览
|
||||||
</div> -->
|
</div> -->
|
||||||
</section>
|
</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
|
<el-upload
|
||||||
class="equipment-upload"
|
class="equipment-upload"
|
||||||
|
:style="{ marginBottom: isPicMode ? '48px' : '24px' }"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
drag
|
drag
|
||||||
:action="uploadUrl"
|
:action="uploadUrl"
|
||||||
@ -56,7 +63,6 @@
|
|||||||
v-for="(file, index) in files"
|
v-for="(file, index) in files"
|
||||||
:key="file.fileName"
|
:key="file.fileName"
|
||||||
:style="{
|
:style="{
|
||||||
display: index > 3 && !expand ? 'none' : 'block',
|
|
||||||
background: isPicMode
|
background: isPicMode
|
||||||
? `url(${file.fileUrl}) no-repeat`
|
? `url(${file.fileUrl}) no-repeat`
|
||||||
: `url(${defaultBg}) no-repeat`,
|
: `url(${defaultBg}) no-repeat`,
|
||||||
@ -226,7 +232,7 @@ export default {
|
|||||||
clearTimeout(this.updateTimer);
|
clearTimeout(this.updateTimer);
|
||||||
}
|
}
|
||||||
this.updateTimer = setTimeout(() => {
|
this.updateTimer = setTimeout(() => {
|
||||||
console.log('[AssetsUpload] 更新上传列表');
|
// console.log('[AssetsUpload] 更新上传列表');
|
||||||
this.emitFilelist();
|
this.emitFilelist();
|
||||||
clearTimeout(this.updateTimer);
|
clearTimeout(this.updateTimer);
|
||||||
this.updateTimer = null;
|
this.updateTimer = null;
|
||||||
@ -314,7 +320,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
:deep(.equipment-upload) {
|
:deep(.equipment-upload) {
|
||||||
background: #ccc4;
|
|
||||||
.el-upload-dragger {
|
.el-upload-dragger {
|
||||||
width: 188px;
|
width: 188px;
|
||||||
height: 128px;
|
height: 128px;
|
||||||
@ -346,6 +351,10 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.equipment-upload {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
.file-list {
|
.file-list {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
@ -354,13 +363,14 @@ export default {
|
|||||||
// custom
|
// custom
|
||||||
.file-area {
|
.file-area {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(5, 188px);
|
grid-template-columns: repeat(auto-fill, 188px);
|
||||||
grid-auto-rows: 128px;
|
grid-auto-rows: 152px;
|
||||||
gap: 24px 18px;
|
gap: 48px 24px;
|
||||||
place-content: center;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-list__item {
|
.file-list__item {
|
||||||
|
height: 128px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 1px dashed #d9d9d9;
|
border: 1px dashed #d9d9d9;
|
||||||
border-radius: 6px;
|
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>
|
|
@ -105,9 +105,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
||||||
import { getAccessToken } from '@/utils/auth';
|
|
||||||
import EquipmentPics from './components/EquipmentPics';
|
|
||||||
import EquipmentAssets from './components/EquipmentAssets';
|
|
||||||
import EquipmentDrawer from './components/EquipmentDrawer';
|
import EquipmentDrawer from './components/EquipmentDrawer';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
@ -132,6 +129,12 @@ export default {
|
|||||||
return {
|
return {
|
||||||
searchBarKeys: ['name', 'code'],
|
searchBarKeys: ['name', 'code'],
|
||||||
tableBtn: [
|
tableBtn: [
|
||||||
|
this.$auth.hasPermi(`base:equipment:update`)
|
||||||
|
? {
|
||||||
|
type: 'detail',
|
||||||
|
btnName: '详情',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
this.$auth.hasPermi('base:equipment:update')
|
this.$auth.hasPermi('base:equipment:update')
|
||||||
? {
|
? {
|
||||||
type: 'edit',
|
type: 'edit',
|
||||||
@ -144,12 +147,6 @@ export default {
|
|||||||
btnName: '删除',
|
btnName: '删除',
|
||||||
}
|
}
|
||||||
: undefined,
|
: undefined,
|
||||||
this.$auth.hasPermi(`base:equipment:update`)
|
|
||||||
? {
|
|
||||||
type: 'detail',
|
|
||||||
btnName: '详情',
|
|
||||||
}
|
|
||||||
: undefined,
|
|
||||||
].filter((v) => v),
|
].filter((v) => v),
|
||||||
tableProps: [
|
tableProps: [
|
||||||
{
|
{
|
||||||
@ -213,6 +210,13 @@ export default {
|
|||||||
{
|
{
|
||||||
type: 'separate',
|
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' : '',
|
type: this.$auth.hasPermi('base:equipment:create') ? 'button' : '',
|
||||||
btnName: '新增',
|
btnName: '新增',
|
||||||
@ -220,12 +224,6 @@ export default {
|
|||||||
plain: true,
|
plain: true,
|
||||||
color: 'success',
|
color: 'success',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
type: this.$auth.hasPermi('base:equipment:export') ? 'button' : '',
|
|
||||||
btnName: '导出',
|
|
||||||
name: 'export',
|
|
||||||
color: 'warning',
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
rows: [
|
rows: [
|
||||||
[
|
[
|
||||||
|
@ -207,8 +207,6 @@ export default {
|
|||||||
name: undefined,
|
name: undefined,
|
||||||
parentId: undefined,
|
parentId: undefined,
|
||||||
remark: undefined,
|
remark: undefined,
|
||||||
fileNames: [],
|
|
||||||
fileUrls: [],
|
|
||||||
};
|
};
|
||||||
this.resetForm('form');
|
this.resetForm('form');
|
||||||
},
|
},
|
||||||
|
@ -77,7 +77,6 @@ export default {
|
|||||||
label: '设备名称',
|
label: '设备名称',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
width: 128,
|
|
||||||
prop: 'equipmentCode',
|
prop: 'equipmentCode',
|
||||||
label: '设备编码',
|
label: '设备编码',
|
||||||
},
|
},
|
||||||
@ -117,6 +116,7 @@ export default {
|
|||||||
{
|
{
|
||||||
_action: 'params-monitor',
|
_action: 'params-monitor',
|
||||||
label: '操作',
|
label: '操作',
|
||||||
|
width: 56,
|
||||||
subcomponent: {
|
subcomponent: {
|
||||||
props: ['injectData'],
|
props: ['injectData'],
|
||||||
render: function (h) {
|
render: function (h) {
|
||||||
@ -124,10 +124,10 @@ export default {
|
|||||||
return h(
|
return h(
|
||||||
'el-button',
|
'el-button',
|
||||||
{
|
{
|
||||||
|
class: 'iconfont icon-detail',
|
||||||
props: { type: 'text' },
|
props: { type: 'text' },
|
||||||
on: {
|
on: {
|
||||||
click: function () {
|
click: function () {
|
||||||
console.log('inejctdata', _this.injectData);
|
|
||||||
_this.$emit('emitData', {
|
_this.$emit('emitData', {
|
||||||
action: _this.injectData._action,
|
action: _this.injectData._action,
|
||||||
// value: _this.injectData.id,
|
// value: _this.injectData.id,
|
||||||
@ -135,8 +135,8 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
}
|
||||||
'查看详情'
|
// '查看详情'
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -64,6 +64,7 @@ export default {
|
|||||||
name: item.inspectionContent,
|
name: item.inspectionContent,
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barCategoryGap: 12,
|
barCategoryGap: 12,
|
||||||
|
barWidth: 20,
|
||||||
data: [],
|
data: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user