update 设备信息上传
This commit is contained in:
parent
ca0f62b2eb
commit
f60a46ed1d
4
.env.dev
4
.env.dev
@ -12,9 +12,9 @@ ENV = 'development'
|
||||
VUE_APP_TITLE = 产线监控系统
|
||||
|
||||
# 芋道管理系统/开发环境
|
||||
VUE_APP_BASE_API = 'http://192.168.1.49:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.49:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.0.33:48080'
|
||||
VUE_APP_BASE_API = 'http://192.168.0.33:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.188:48080'
|
||||
|
||||
# 路由懒加载
|
||||
|
||||
@ -13,21 +13,31 @@
|
||||
<i class="el-icon-folder" v-else></i>
|
||||
展开
|
||||
</el-button>
|
||||
<div class="preview-btn">
|
||||
<!-- <div class="preview-btn">
|
||||
<i class="el-icon-view"></i>
|
||||
预览
|
||||
</div>
|
||||
</div> -->
|
||||
</section>
|
||||
<section class="file-area">
|
||||
<el-upload class="equipment-upload" drag action="uploadUrl" multiple>
|
||||
<el-upload
|
||||
class="equipment-upload"
|
||||
:disabled="disabled"
|
||||
drag
|
||||
:action="uploadUrl"
|
||||
:headers="headers"
|
||||
multiple
|
||||
:show-file-list="false"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleSuccess">
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">
|
||||
<span>将文件拖到此处或</span>
|
||||
<em>点击上传</em>
|
||||
</div>
|
||||
<div class="el-upload__tip" slot="tip">
|
||||
<!-- 只能上传jpg/png文件，且不超过500kb -->
|
||||
some tips....
|
||||
{{
|
||||
isPicMode ? '仅支持上传 .jpg .png 格式文件, 且' : ''
|
||||
}}文件大小不超过2MB
|
||||
</div>
|
||||
</el-upload>
|
||||
<!-- <div
|
||||
@ -47,23 +57,53 @@
|
||||
:key="file.fileName"
|
||||
:style="{
|
||||
display: index > 3 && !expand ? 'none' : 'block',
|
||||
background: isPicMode ? `url(${file.fileUrl}) no-repeat` : `url(${defaultBg}) no-repeat`,
|
||||
background: isPicMode
|
||||
? `url(${file.fileUrl}) no-repeat`
|
||||
: `url(${defaultBg}) no-repeat`,
|
||||
backgroundSize: isPicMode ? '100% 100%' : '64px',
|
||||
backgroundPosition: isPicMode ? '0% 0%' : 'center',
|
||||
}"
|
||||
:data-name="file.fileName">
|
||||
<i class="el-icon-delete"></i>
|
||||
<el-button
|
||||
v-if="!disabled"
|
||||
type="text"
|
||||
class="el-icon-delete"
|
||||
style="padding: 0"
|
||||
@click="(e) => handleDelete(file)" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAccessToken } from '@/utils/auth';
|
||||
import defaultBg from '../../../../../assets/images/default-file-icon.png';
|
||||
|
||||
function checkSize(file, message) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('上传文件大小不能超过 2MB!');
|
||||
}
|
||||
return isLt2M;
|
||||
}
|
||||
|
||||
function checkPic(file, message) {
|
||||
const isJPG = file.type === 'image/jpeg';
|
||||
const isPNG = file.type === 'image/png';
|
||||
const isPic = isJPG || isPNG;
|
||||
if (!isPic) {
|
||||
message.error('上传图片只能是 JPG/PNG 格式!');
|
||||
}
|
||||
return isPic;
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'AssetsUpload',
|
||||
components: {},
|
||||
model: {
|
||||
prop: 'dataSource',
|
||||
event: 'update',
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
@ -81,70 +121,144 @@ export default {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['update-filelist'],
|
||||
data() {
|
||||
return {
|
||||
defaultBg,
|
||||
expand: false,
|
||||
headers: { Authorization: 'Bearer ' + getAccessToken() }, // 设置上传的请求头部
|
||||
fileList: [],
|
||||
uploadUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload',
|
||||
files: [
|
||||
// 服务器返回的结构
|
||||
{
|
||||
fileName: 'sf.docs',
|
||||
fileType: 'asset',
|
||||
fileUrl:
|
||||
'https://hbimg.b0.upaiyun.com/cc7475787bd08ed926b68eaf53fa1f2c5473259115e3c-gJdObd_fw658',
|
||||
},
|
||||
{
|
||||
fileName: 'sddf.docs',
|
||||
fileType: 'asset',
|
||||
fileUrl: 'https://img0.sc115.com/wm/xqx/pic1/1501xofo4ssolji.jpg',
|
||||
},
|
||||
{
|
||||
fileName: 'jjj.docs',
|
||||
fileType: 'asset',
|
||||
fileUrl:
|
||||
'https://www.mms591.com/www.mms591.com-photo/2013081823/1-130QR34544.jpg',
|
||||
},
|
||||
{
|
||||
fileName: 'asdfasdf.docs',
|
||||
fileType: 'asset',
|
||||
fileUrl:
|
||||
'https://hbimg.b0.upaiyun.com/8f6bced5f2e38d3a021b2c48d5a98dfb6317e3e12c6a0-QmhJ5v_fw658',
|
||||
},
|
||||
{
|
||||
fileName: 'asdkj.docs',
|
||||
fileType: 'asset',
|
||||
fileUrl:
|
||||
'https://www.mms591.com/www.mms591.com-photo/2013013021/1-130130212034.jpg',
|
||||
},
|
||||
{
|
||||
fileName: 'lkasjdf.docs',
|
||||
fileType: 'asset',
|
||||
fileUrl:
|
||||
'https://www.mms591.com/www.mms591.com-photo/2013072122/1-130H1223057.jpg',
|
||||
},
|
||||
{
|
||||
fileName: 'asdf.docs',
|
||||
fileType: 'asset',
|
||||
fileUrl:
|
||||
'https://img.1ppt.com/uploads/allimg/1212/1-1212101ZH5A2.jpg',
|
||||
},
|
||||
{
|
||||
fileName: 'afdffff.docs',
|
||||
fileType: 'asset',
|
||||
fileUrl:
|
||||
'https://www.mms591.com/www.mms591.com-photo/2013051721/1-13051H11945.jpg',
|
||||
},
|
||||
// {
|
||||
// fileName: 'sf.docs',
|
||||
// fileType: 'asset',
|
||||
// fileUrl:
|
||||
// 'https://hbimg.b0.upaiyun.com/cc7475787bd08ed926b68eaf53fa1f2c5473259115e3c-gJdObd_fw658',
|
||||
// },
|
||||
// {
|
||||
// fileName: 'sddf.docs',
|
||||
// fileType: 'asset',
|
||||
// fileUrl: 'https://img0.sc115.com/wm/xqx/pic1/1501xofo4ssolji.jpg',
|
||||
// },
|
||||
// {
|
||||
// fileName: 'jjj.docs',
|
||||
// fileType: 'asset',
|
||||
// fileUrl:
|
||||
// 'https://www.mms591.com/www.mms591.com-photo/2013081823/1-130QR34544.jpg',
|
||||
// },
|
||||
// {
|
||||
// fileName: 'asdfasdf.docs',
|
||||
// fileType: 'asset',
|
||||
// fileUrl:
|
||||
// 'https://hbimg.b0.upaiyun.com/8f6bced5f2e38d3a021b2c48d5a98dfb6317e3e12c6a0-QmhJ5v_fw658',
|
||||
// },
|
||||
// {
|
||||
// fileName: 'asdkj.docs',
|
||||
// fileType: 'asset',
|
||||
// fileUrl:
|
||||
// 'https://www.mms591.com/www.mms591.com-photo/2013013021/1-130130212034.jpg',
|
||||
// },
|
||||
// {
|
||||
// fileName: 'lkasjdf.docs',
|
||||
// fileType: 'asset',
|
||||
// fileUrl:
|
||||
// 'https://www.mms591.com/www.mms591.com-photo/2013072122/1-130H1223057.jpg',
|
||||
// },
|
||||
// {
|
||||
// fileName: 'asdf.docs',
|
||||
// fileType: 'asset',
|
||||
// fileUrl:
|
||||
// 'https://img.1ppt.com/uploads/allimg/1212/1-1212101ZH5A2.jpg',
|
||||
// },
|
||||
// {
|
||||
// fileName: 'afdffff.docs',
|
||||
// fileType: 'asset',
|
||||
// fileUrl:
|
||||
// 'https://www.mms591.com/www.mms591.com-photo/2013051721/1-13051H11945.jpg',
|
||||
// },
|
||||
],
|
||||
updateTimer: null,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
console.log('this.ispicmocde', this.isPicMode);
|
||||
watch: {
|
||||
dataSource: {
|
||||
handler(val) {
|
||||
this.files = JSON.parse(JSON.stringify(val));
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// handle success, per file!
|
||||
handleSuccess(response, file, fileList) {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '上传成功! 点击确认保存上传结果',
|
||||
type: 'success',
|
||||
});
|
||||
if (
|
||||
response == null ||
|
||||
!('data' in response) ||
|
||||
response.data == null ||
|
||||
response.data.trim() == ''
|
||||
) {
|
||||
this.$message.error('上传出错了!');
|
||||
return;
|
||||
}
|
||||
this.files.push({
|
||||
fileName: file.name,
|
||||
fileUrl: response.data,
|
||||
fileType: this.isPicMode ? 1 : 2,
|
||||
});
|
||||
// debugger;
|
||||
|
||||
// 延时更新
|
||||
if (this.updateTimer) {
|
||||
clearTimeout(this.updateTimer);
|
||||
}
|
||||
this.updateTimer = setTimeout(() => {
|
||||
console.log('[AssetsUpload] 更新上传列表');
|
||||
this.emitFilelist();
|
||||
clearTimeout(this.updateTimer);
|
||||
this.updateTimer = null;
|
||||
}, 500);
|
||||
},
|
||||
|
||||
emitFilelist() {
|
||||
this.$emit('update', this.files);
|
||||
},
|
||||
|
||||
handleRemove(file, fileList) {
|
||||
debugger;
|
||||
},
|
||||
|
||||
handleDelete(file) {
|
||||
// fileName fileType 都可能一样，但 fileUrl 一定不一样
|
||||
this.files = this.files.filter((item) => item.fileUrl != file.fileUrl);
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '删除成功! 需点击确认保存删除结果',
|
||||
type: 'success',
|
||||
});
|
||||
this.emitFilelist();
|
||||
},
|
||||
|
||||
beforeUpload(file) {
|
||||
if (this.isPicMode) {
|
||||
return checkPic(file, this.$message) && checkSize(file, this.$message);
|
||||
}
|
||||
return checkSize(file, this.$message);
|
||||
},
|
||||
|
||||
handleUpload() {
|
||||
switch (this.type) {
|
||||
case 'image':
|
||||
@ -223,6 +337,9 @@ export default {
|
||||
}
|
||||
|
||||
.el-upload__tip {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: #d1d1d1;
|
||||
margin: 0 0 12px;
|
||||
transform: translateY(-12px);
|
||||
user-select: none;
|
||||
@ -281,9 +398,10 @@ export default {
|
||||
content: attr(data-name);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -16px;
|
||||
bottom: -26px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
line-height: 2;
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
.default-icon {
|
||||
|
||||
@ -29,15 +29,17 @@
|
||||
<section v-for="(section, index) in sections" :key="section.key">
|
||||
<SmallTitle v-if="index != 0">{{ section.name }}</SmallTitle>
|
||||
|
||||
<div class="form-part" v-if="section.key == 'base'">
|
||||
<div
|
||||
class="form-part"
|
||||
v-if="section.key == 'base'"
|
||||
style="margin-bottom: 32px">
|
||||
<el-skeleton v-if="!showForm" animated />
|
||||
<DialogForm
|
||||
<EquipmentInfoForm
|
||||
key="drawer-dialog-form"
|
||||
v-if="showForm"
|
||||
ref="form"
|
||||
label-position="top"
|
||||
:dataForm="form"
|
||||
:rows="formRows" />
|
||||
:disabled="mode.includes('detail')"
|
||||
:sync-filelist="syncFileListFlag"
|
||||
v-model="form" />
|
||||
</div>
|
||||
|
||||
<div v-if="section.key == 'attrs'" style="margin-top: 12px">
|
||||
@ -74,7 +76,7 @@
|
||||
<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button v-else type="primary" @click="handleCancel">确定</el-button>
|
||||
<el-button v-else type="primary" @click="handleConfirm">确定</el-button>
|
||||
<!-- sections的第二项必须是 属性列表 -->
|
||||
<!-- <el-button
|
||||
v-if="sections[1].allowAdd"
|
||||
@ -107,10 +109,12 @@
|
||||
|
||||
<script>
|
||||
import DialogForm from './DialogForm';
|
||||
import EquipmentInfoForm from './EquipmentInfoForm.vue';
|
||||
|
||||
const SmallTitle = {
|
||||
name: 'SmallTitle',
|
||||
props: ['size'],
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
@ -134,12 +138,13 @@ const SmallTitle = {
|
||||
};
|
||||
|
||||
export default {
|
||||
components: { SmallTitle, DialogForm },
|
||||
components: { SmallTitle, DialogForm, EquipmentInfoForm },
|
||||
props: ['sections', 'mode', 'dataId'], // dataId 作为一个通用的存放id的字段
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
showForm: false,
|
||||
btnLoading: false,
|
||||
total: 0,
|
||||
form: {},
|
||||
list: [],
|
||||
@ -177,6 +182,7 @@ export default {
|
||||
infoQuery: null, // 基本信息的请求
|
||||
attrFormSubmitting: false,
|
||||
attrListLoading: false,
|
||||
syncFileListFlag: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -188,7 +194,7 @@ export default {
|
||||
return {
|
||||
...col,
|
||||
bind: {
|
||||
...col.bind
|
||||
...col.bind,
|
||||
},
|
||||
style: {
|
||||
left: 0,
|
||||
@ -224,6 +230,50 @@ export default {
|
||||
this.$axios(query).then(({ data }) => {
|
||||
if (section.key == 'base') {
|
||||
this.form = data;
|
||||
// this.form = {
|
||||
// code: 'gj',
|
||||
// name: '下片机',
|
||||
// enName: 'unload',
|
||||
// abbr: '',
|
||||
// equipmentTypeId: 21084,
|
||||
// remark: '备注',
|
||||
// id: '1712367395052384257',
|
||||
// createTime: 1697095176000,
|
||||
// enterTime: 0,
|
||||
// productionTime: 0,
|
||||
// files: [
|
||||
// {
|
||||
// fileName: '测试.xlsx',
|
||||
// fileUrl: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0108%2F0f0c6f30j00r5cle9000sc000hs00gtc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
||||
// fileType: 1
|
||||
// },
|
||||
// {
|
||||
// fileName: '测试2.xlsx',
|
||||
// fileUrl: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0415%2F2cd23619j00racb96000kc000hs00hsc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
|
||||
// fileType: 1
|
||||
// },
|
||||
// {
|
||||
// fileName: '测试3.xlsx',
|
||||
// fileUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1fea91a0-d088-409e-b145-e0e61254b28b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700031689&t=2e0fe7d1de7f54adff3007efe133d67c',
|
||||
// fileType: 1
|
||||
// },
|
||||
// {
|
||||
// fileName: '测试4.xlsx',
|
||||
// fileUrl: 'https://pics5.baidu.com/feed/b7003af33a87e950cdfb4b4546eed044faf2b40d.jpeg?token=1d7484cfe4b014dd201f8c8725cab945',
|
||||
// fileType: 2
|
||||
// },
|
||||
// {
|
||||
// fileName: '测试5.xlsx',
|
||||
// fileUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fe3500876-9c46-4b70-8d37-4799520cdd13%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700031689&t=4abc1df930e62730e5361a7d3765e0f2',
|
||||
// fileType: 2
|
||||
// },
|
||||
// ],
|
||||
// tvalue: 0,
|
||||
// processingTime: 0,
|
||||
// manufacturer: '',
|
||||
// spec: '',
|
||||
// description: '描述',
|
||||
// };
|
||||
this.showForm = true;
|
||||
this.infoQuery = query;
|
||||
} else if (section.key == 'attrs') {
|
||||
@ -246,6 +296,24 @@ export default {
|
||||
break;
|
||||
}
|
||||
},
|
||||
async handleConfirm() {
|
||||
this.btnLoading = true;
|
||||
this.syncFileListFlag = Math.random();
|
||||
|
||||
this.$nextTick(async () => {
|
||||
const { code, data } = await this.$axios({
|
||||
url: this.sections[0].urlUpdate,
|
||||
method: 'put',
|
||||
data: this.form,
|
||||
});
|
||||
if (code == 0) {
|
||||
this.$modal.msgSuccess('更新成功');
|
||||
}
|
||||
|
||||
this.btnLoading = false;
|
||||
this.handleCancel();
|
||||
});
|
||||
},
|
||||
|
||||
handleEmitFun(val) {
|
||||
console.log('handleEmitFun', val);
|
||||
@ -288,7 +356,7 @@ export default {
|
||||
|
||||
// 开启编辑
|
||||
toggleEdit() {
|
||||
this.mode = 'edit';
|
||||
this.$emit('update-mode', 'edit');
|
||||
},
|
||||
|
||||
// 新增属性
|
||||
|
||||
337
src/views/core/base/equipment/components/EquipmentInfoForm.vue
Normal file
337
src/views/core/base/equipment/components/EquipmentInfoForm.vue
Normal file
@ -0,0 +1,337 @@
|
||||
<!--
|
||||
filename: dialogForm.vue
|
||||
author: liubin
|
||||
date: 2023-08-15 10:32:36
|
||||
description: 弹窗的表单组件
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
class="equipment-info-form"
|
||||
ref="form"
|
||||
:model="form"
|
||||
label-width="200px"
|
||||
label-position="top"
|
||||
v-loading="formLoading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item
|
||||
label="设备名称"
|
||||
prop="name"
|
||||
:rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入设备名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备编码" prop="code" :rules="[]">
|
||||
<el-input
|
||||
v-model="form.code"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入设备编码"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="英文名称" prop="enName" :rules="[]">
|
||||
<el-input
|
||||
v-model="form.enName"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入英文名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="缩写" prop="abbr" :rules="[]">
|
||||
<el-input
|
||||
v-model="form.abbr"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入名称缩写"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备类型" prop="equipmentTypeId" :rules="[]">
|
||||
<el-select
|
||||
v-model="form.equipmentTypeId"
|
||||
:disabled="disabled"
|
||||
filterable
|
||||
placeholder="请选择设备类型">
|
||||
<el-option
|
||||
v-for="eqType in eqTypeList"
|
||||
:key="eqType.id"
|
||||
:label="eqType.name"
|
||||
:value="eqType.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="备注" prop="remark" :rules="[]">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入备注"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="生产日期" prop="productionTime" :rules="[]">
|
||||
<el-date-picker
|
||||
v-model="form.enterTime"
|
||||
:disabled="disabled"
|
||||
type="datetime"
|
||||
placeholder="请选择生产日期"
|
||||
value-format="timestamp"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="进场日期" prop="enterTime" :rules="[]">
|
||||
<el-date-picker
|
||||
v-model="form.enterTime"
|
||||
:disabled="disabled"
|
||||
type="datetime"
|
||||
placeholder="请选择进场日期"
|
||||
value-format="timestamp"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item
|
||||
label="设备TT值"
|
||||
prop="tvalue"
|
||||
:rules="[
|
||||
{ required: true, message: '不能为空', trigger: 'blur' },
|
||||
{
|
||||
type: 'number',
|
||||
message: '请输入正确的数字值',
|
||||
trigger: 'blur',
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
]">
|
||||
<el-input
|
||||
v-model="form.tvalue"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入设备TT值"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item
|
||||
label="产品加工时间(s)"
|
||||
prop="processingTime"
|
||||
:rules="[
|
||||
{ required: true, message: '不能为空', trigger: 'blur' },
|
||||
{
|
||||
type: 'number',
|
||||
message: '请输入正确的数字值',
|
||||
trigger: 'blur',
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
]">
|
||||
<el-input
|
||||
v-model="form.processingTime"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入产品加工时间"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="制造商" prop="manufacturer" :rules="[]">
|
||||
<el-input
|
||||
v-model="form.manufacturer"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入制造商"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备规格" prop="spec" :rules="[]">
|
||||
<el-input
|
||||
v-model="form.spec"
|
||||
:disabled="disabled"
|
||||
placeholder="请输入设备规格"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<!-- 功能描述 -->
|
||||
<el-col>
|
||||
<el-form-item label="功能描述" prop="description" :rules="[]">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:disabled="disabled"
|
||||
v-model="form.description"
|
||||
placeholder="请填写功能描述"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<!-- 上传资料 -->
|
||||
<el-col>
|
||||
<el-form-item label="上传资料" prop="assets" :rules="[]">
|
||||
<AssetsUpload v-model="form.assets" :disabled="disabled" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<!-- 上传图片 -->
|
||||
<el-col>
|
||||
<el-form-item label="上传图片" prop="pics" :rules="[]">
|
||||
<AssetsUpload
|
||||
:is-pic-mode="true"
|
||||
v-model="form.pics"
|
||||
:disabled="disabled" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AssetsUpload from './AssetsUpload.vue';
|
||||
|
||||
export default {
|
||||
name: 'EquipmentInfoForm',
|
||||
|
||||
model: {
|
||||
prop: 'dataForm',
|
||||
event: 'update',
|
||||
},
|
||||
|
||||
emits: ['update'],
|
||||
|
||||
components: { AssetsUpload },
|
||||
|
||||
props: {
|
||||
dataForm: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
syncFilelist: {
|
||||
type: Number,
|
||||
default: null,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
formLoading: false,
|
||||
form: {
|
||||
name: '',
|
||||
code: '',
|
||||
enName: '',
|
||||
abbr: '',
|
||||
equipmentTypeId: '',
|
||||
remark: '',
|
||||
productionTime: '',
|
||||
enterTime: '',
|
||||
tvalue: '',
|
||||
processingTime: '',
|
||||
manufacturer: '',
|
||||
spec: '',
|
||||
description: '',
|
||||
assets: [],
|
||||
pics: [],
|
||||
},
|
||||
eqTypeList: [],
|
||||
dataLoaded: false,
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
dataForm: {
|
||||
handler(val) {
|
||||
// debugger;
|
||||
this.form = JSON.parse(JSON.stringify(val));
|
||||
this.form.assets =
|
||||
this.form.files?.filter((item) => item.fileType == '2') || [];
|
||||
this.form.pics =
|
||||
this.form.files?.filter((item) => item.fileType == '1') || [];
|
||||
delete this.form.files;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
syncFilelist: {
|
||||
handler(val) {
|
||||
if (val != null) {
|
||||
this.updateForm();
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getEqTypeList();
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateForm() {
|
||||
console.log('update form ==> ');
|
||||
this.form.files = [...this.form.assets, ...this.form.pics];
|
||||
delete this.form.assets;
|
||||
delete this.form.pics;
|
||||
this.$emit('update', this.form);
|
||||
},
|
||||
|
||||
async getEqTypeList() {
|
||||
this.formLoading = true;
|
||||
const { code, data } = await this.$axios(
|
||||
'/base/equipment-type/page?pageNo=1&pageSize=100'
|
||||
);
|
||||
// debugger;
|
||||
if (code == 0) {
|
||||
this.eqTypeList = data.list;
|
||||
}
|
||||
this.formLoading = false;
|
||||
},
|
||||
|
||||
/** 模拟透传 ref */
|
||||
validate(cb) {
|
||||
return this.$refs.form.validate(cb);
|
||||
},
|
||||
resetFields(args) {
|
||||
return this.$refs.form.resetFields(args);
|
||||
},
|
||||
// getCode
|
||||
async getCode(url) {
|
||||
const response = await this.$axios(url);
|
||||
return response.data;
|
||||
},
|
||||
// 上传成功的特殊处理
|
||||
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.$modal.msgSuccess('上传成功');
|
||||
},
|
||||
|
||||
getFileName(fileUrl) {
|
||||
return fileUrl.split('/').pop();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-date-editor,
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -53,6 +53,7 @@
|
||||
v-if="editVisible"
|
||||
ref="drawer"
|
||||
:mode="editMode"
|
||||
@update-mode="editMode = $event"
|
||||
:data-id="form.id"
|
||||
:sections="[
|
||||
{
|
||||
@ -462,6 +463,8 @@ export default {
|
||||
label: '上传资料',
|
||||
fieldName: 'assets',
|
||||
subcomponent: AssetsUpload,
|
||||
prop: 'uploadedAssets',
|
||||
default: [],
|
||||
bind: {
|
||||
'is-pic-mode': false,
|
||||
},
|
||||
@ -474,6 +477,8 @@ export default {
|
||||
label: '上传图片',
|
||||
fieldName: 'images',
|
||||
subcomponent: AssetsUpload,
|
||||
// prop: '',
|
||||
// default: [],
|
||||
bind: {
|
||||
'is-pic-mode': true,
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user