404 lines
9.4 KiB
Vue
404 lines
9.4 KiB
Vue
<!--
|
|
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="12">
|
|
<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="12">
|
|
<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="12">
|
|
<el-form-item label="所在区域" prop="location">
|
|
<el-input
|
|
v-model="form.location"
|
|
:disabled="disabled"
|
|
placeholder="请输入所在区域"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="负责人" prop="responsiblePeopleId">
|
|
<el-select
|
|
v-model="form.responsiblePeopleId"
|
|
:disabled="disabled"
|
|
placeholder="请输入负责人">
|
|
<el-option
|
|
v-for="rp in rpList"
|
|
:key="rp.id"
|
|
:label="rp.name"
|
|
:value="rp.id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<!-- <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="[
|
|
{ required: true, message: '设备类型不能为空', trigger: 'blur' },
|
|
]">
|
|
<el-select
|
|
v-model="form.equipmentTypeId"
|
|
:disabled="disabled"
|
|
filterable
|
|
placeholder="请选择设备类型">
|
|
<el-option
|
|
v-for="eqType in rpList"
|
|
: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="预计生产时间(min/天)"
|
|
prop="workTime"
|
|
:rules="[
|
|
{
|
|
required: true,
|
|
message: '预计生产时间不能为空',
|
|
trigger: 'blur',
|
|
},
|
|
{
|
|
type: 'number',
|
|
message: '请输入正确的数字值',
|
|
trigger: 'blur',
|
|
transform: (val) => Number(val),
|
|
},
|
|
]">
|
|
<el-input
|
|
v-model="form.workTime"
|
|
:disabled="disabled"
|
|
placeholder="请输入预计生产时间"></el-input>
|
|
</el-form-item>
|
|
</el-col> -->
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col v-if="isFireEquipment" :span="12">
|
|
<el-form-item label="有效期至" prop="dueDate" :rules="[]">
|
|
<el-date-picker
|
|
v-model="form.dueDate"
|
|
: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="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: '设备TT值不能为空', 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="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>
|
|
<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,
|
|
},
|
|
isFireEquipment: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
formLoading: false,
|
|
form: {
|
|
name: '',
|
|
code: '',
|
|
enName: '',
|
|
abbr: '',
|
|
equipmentTypeId: '',
|
|
remark: '',
|
|
productionTime: '',
|
|
workTime: '',
|
|
enterTime: '',
|
|
tvalue: '',
|
|
processingTime: '',
|
|
manufacturer: '',
|
|
spec: '',
|
|
description: '',
|
|
assets: [],
|
|
pics: [],
|
|
dueDate: ''
|
|
},
|
|
rpList: [],
|
|
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.getRpList();
|
|
},
|
|
|
|
methods: {
|
|
updateForm() {
|
|
this.form.files = [...this.form.assets, ...this.form.pics];
|
|
delete this.form.assets;
|
|
delete this.form.pics;
|
|
this.$emit('update', this.form);
|
|
},
|
|
|
|
async getRpList() {
|
|
this.formLoading = true;
|
|
const { code, data } = await this.$axios(
|
|
'/base/core-worker/listAll'
|
|
);
|
|
// debugger;
|
|
if (code == 0) {
|
|
this.rpList = data;
|
|
}
|
|
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) {
|
|
// 保存原始文件名
|
|
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>
|