Files
yudao-dev/src/views/areavisual/overview/components/add-or-updata.vue
2026-01-16 11:09:32 +08:00

325 lines
6.9 KiB
Vue

<!--
* @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>