更新
This commit is contained in:
324
src/views/areavisual/overview/components/add-or-updata.vue
Normal file
324
src/views/areavisual/overview/components/add-or-updata.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2026-01-15 09:16:36
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-form
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
label-width="80px">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<i class="el-icon-s-grid" style="color: #fff"></i>
|
||||
</div>
|
||||
<div class="stat-title">库位信息</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ lineInfo.lineEdgeLibraryCode }}</div>
|
||||
<div class="stat-label">{{ lineInfo.lineEdgeLibraryName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="物料" prop="materialId">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dataForm.materialId"
|
||||
filterable
|
||||
@change="setMaterial"
|
||||
placeholder="请选择物料">
|
||||
<el-option
|
||||
v-for="item in productArr"
|
||||
:key="item.id"
|
||||
:label="
|
||||
item.materialCode +
|
||||
'-' +
|
||||
item.materialName +
|
||||
'-' +
|
||||
item.material
|
||||
"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="本盘长度" prop="cableLength">
|
||||
<el-input-number
|
||||
v-model="dataForm.cableLength"
|
||||
:min="0"
|
||||
:precision="2"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备" prop="equipmentId">
|
||||
<el-select
|
||||
v-model="dataForm.equipmentId"
|
||||
@change="setEquipment"
|
||||
placeholder="请选择绞体">
|
||||
<el-option
|
||||
v-for="item in options1"
|
||||
:key="item.id"
|
||||
:label="item.equipmentName"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="应用套号" prop="suite">
|
||||
<el-select v-model="dataForm.suite" placeholder="请选择应用套号">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<span v-if="dataForm.suite == 2">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="选择套号" prop="time">
|
||||
<el-date-picker
|
||||
v-model="dataForm.time"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="date"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="" prop="productionLine">
|
||||
<el-select v-model="dataForm.productionLine">
|
||||
<el-option
|
||||
v-for="item in options3"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="" prop="numb">
|
||||
<el-select v-model="dataForm.numb">
|
||||
<el-option
|
||||
v-for="item in options4"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</span>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicAdd from '@/mixins/basic-add';
|
||||
import { getAllProductPage } from '@/api/ssdl/product&recipe';
|
||||
import {
|
||||
QKLineEdgeLibrary,
|
||||
getEquipmentPage,
|
||||
} from '@/api/areavisual/lineEdgeLibrary';
|
||||
import { parseTime } from '@/filter/code-filter';
|
||||
|
||||
export default {
|
||||
mixins: [basicAdd],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
createURL: QKLineEdgeLibrary,
|
||||
},
|
||||
dataForm: {
|
||||
id: undefined,
|
||||
materialId: undefined,
|
||||
materialName: undefined,
|
||||
materialCode: undefined,
|
||||
material: undefined,
|
||||
cableLength: undefined,
|
||||
equipmentId: undefined,
|
||||
equipmentName: undefined,
|
||||
suite: undefined, //是否成套
|
||||
suiteCode: undefined, //套号
|
||||
time: this.parseTime(new Date(), '{y}-{m}-{d}'),
|
||||
productionLine: undefined,
|
||||
numb: undefined,
|
||||
},
|
||||
lineInfo: {},
|
||||
productArr: [],
|
||||
options1: [],
|
||||
options2: [
|
||||
{
|
||||
value: 2,
|
||||
label: '是',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '否',
|
||||
},
|
||||
],
|
||||
options3: [
|
||||
{
|
||||
value: '6#',
|
||||
label: '6#',
|
||||
},
|
||||
{
|
||||
value: '7#',
|
||||
label: '7#',
|
||||
},
|
||||
{
|
||||
value: '8#',
|
||||
label: '8#',
|
||||
},
|
||||
],
|
||||
options4: [
|
||||
{
|
||||
value: 0,
|
||||
label: '0',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '1',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '2',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '3',
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '4',
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
label: '5',
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '6',
|
||||
},
|
||||
],
|
||||
dataRule: {
|
||||
materialId: [
|
||||
{ required: true, message: '物料不能为空', trigger: 'change' },
|
||||
],
|
||||
time: [{ required: true, message: '不能为空', trigger: 'change' }],
|
||||
productionLine: [
|
||||
{ required: true, message: '不能为空', trigger: 'change' },
|
||||
],
|
||||
numb: [{ required: true, message: '不能为空', trigger: 'change' }],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showLine(val) {
|
||||
getAllProductPage().then((res) => {
|
||||
this.productArr = res.data;
|
||||
});
|
||||
getEquipmentPage({ pageNo: 1, pageSize: 100, equipmentType: 2 }).then(
|
||||
(res) => {
|
||||
this.options1 = res.data.list;
|
||||
}
|
||||
);
|
||||
this.lineInfo = { ...val };
|
||||
},
|
||||
setMaterial() {
|
||||
const data = this.productArr.find(
|
||||
(i) => i.id === this.dataForm.materialId
|
||||
);
|
||||
this.dataForm.materialName = data.materialName;
|
||||
this.dataForm.material = data.material;
|
||||
this.dataForm.materialCode = data.materialCode;
|
||||
},
|
||||
setEquipment() {
|
||||
const data = this.options1.find(
|
||||
(i) => i.id === this.dataForm.equipmentId
|
||||
);
|
||||
this.dataForm.equipmentName = data.equipmentName;
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
if (this.dataForm.suite == 2) {
|
||||
this.dataForm.suiteCode =
|
||||
this.dataForm.time +
|
||||
'-' +
|
||||
this.dataForm.productionLine +
|
||||
'-' +
|
||||
this.dataForm.numb;
|
||||
}
|
||||
QKLineEdgeLibrary({
|
||||
...this.lineInfo,
|
||||
...this.dataForm,
|
||||
lineEdgeLibraryState: 1,
|
||||
id: this.lineInfo.id,
|
||||
}).then((response) => {
|
||||
this.$modal.msgSuccess('操作成功');
|
||||
this.visible = false;
|
||||
this.$emit('refreshDataList');
|
||||
});
|
||||
return;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stat-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid;
|
||||
border-color: #1a56db;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* .stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
} */
|
||||
.stat-title {
|
||||
margin: 0 10px;
|
||||
color: #0051ff;
|
||||
font-size: 20px;
|
||||
}
|
||||
.stat-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 12px;
|
||||
margin-right: 15px;
|
||||
background: linear-gradient(to right, #1a56db, #0d47a1);
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: #1a56db;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user