<template>
|
<div class="app-container">
|
<div class="search">
|
<span></span>
|
<div class="btn">
|
<el-button type="primary" size="small" @click="openAdd" v-if="planState == 0">新增</el-button>
|
<el-button type="primary" size="small" @click="isEdit = true" v-if="planState == 0">编辑</el-button>
|
<el-button type="primary" size="small" @click="save" :loading="saveLoading" v-if="planState == 0">保存</el-button>
|
<el-button size="small" @click="goback">返回</el-button>
|
</div>
|
</div>
|
<el-table :data="tableData" style="width: 100%">
|
<el-table-column prop="inspectionItem" label="检测项" width="180">
|
<template slot-scope="scope">
|
<span>{{ scope.row.inspectionItem }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="standard" label="测试标准" width="180">
|
<template slot-scope="scope">
|
<el-select v-model="scope.row.standard" placeholder="请选择" v-if="isEdit" size="small">
|
<el-option v-for="item in codeList" :key="item.id" :label="item.label" :value="item.standard">
|
</el-option>
|
</el-select>
|
<span v-else>{{ scope.row.standard }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="frequency" label="频次">
|
<template slot-scope="scope">
|
<el-select v-model="scope.row.frequency" placeholder="请选择" v-if="isEdit" size="small">
|
<el-option v-for="item in dict.type.planned_frequency" :key="item.value" :label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<dict-tag v-else :options="dict.type.planned_frequency" :value="scope.row.frequency" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="remark" label="备注">
|
<template slot-scope="scope">
|
<el-input size="small" placeholder="请输入" v-model="scope.row.remark" v-if="isEdit">
|
</el-input>
|
<span v-else>{{ scope.row.remark }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" width="100" v-if="planState == 0">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="handleDelete(scope.row)" style="color: red;">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-dialog title="新增" :visible.sync="addDia" width="500px">
|
<el-form :model="addForm" ref="addForm" :rules="addRules" label-position="right" label-width="120px">
|
<el-form-item label="检验项" prop="name">
|
<el-select v-model="addForm.name" placeholder="请选择" size="small" style="width: 100%;">
|
<el-option v-for="item in itemList" :key="item.id" :label="item.inspectionItem"
|
:value="item.inspectionItem">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="测试标准" prop="standard">
|
<el-select v-model="addForm.standard" placeholder="请选择" size="small" style="width: 100%;">
|
<el-option v-for="item in codeList" :key="item.id" :label="item.label" :value="item.standard">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="频次" prop="frequency">
|
<el-select v-model="addForm.frequency" placeholder="请选择" size="small" style="width: 100%;">
|
<el-option v-for="item in dict.type.planned_frequency" :key="item.value" :label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input size="small" placeholder="请输入" v-model="addForm.remark">
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="addDia = false">取 消</el-button>
|
<el-button type="primary" @click="submitProduct('addForm')">确 认</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { selectProductItem, itemList, codeList, addOrUpdateItem, deleteItem, materialItem, materialCodeList } from "@/api/business/reliabilityPlan";
|
|
export default {
|
dicts: ["planned_frequency"],
|
data() {
|
return {
|
tableData: [],
|
codeList: [],//标准列表
|
isEdit: false,
|
saveLoading: false,
|
addForm: {},
|
addRules: {
|
name: [{ required: true, message: "请输入检验项", trigger: "blur" }],
|
},
|
addDia: false,
|
itemList: [],//检验项列表
|
planId: null,//主计划表id
|
planType: null,//主计划表类型
|
planState: null,//主计划表审核状态
|
}
|
},
|
mounted() {
|
const { id, type, state } = this.$route.query
|
this.planId = id;
|
this.planType = type;
|
this.planState = state;
|
this.getTableData();
|
this.getItemList();
|
this.getCodeList();
|
},
|
methods: {
|
getTableData() {
|
selectProductItem({
|
rePlanId: this.planId,
|
type: this.planType
|
}).then(res => {
|
if (res.code === 200) {
|
this.tableData = res.data || [];
|
}
|
}).catch(err => {
|
console.error('获取数据失败:', err);
|
});
|
},
|
|
// 获取检验项列表
|
getItemList() {
|
const api = this.planType === '成品' ? itemList : materialItem;
|
api({ rePlanId: this.planId }).then(res => {
|
if (res.code === 200) {
|
this.itemList = res.data.map(item => ({
|
label: item.inspectionItem,
|
value: item.id,
|
inspectionItem: item.inspectionItem
|
})) || [];
|
}
|
}).catch(err => {
|
console.error('获取检验项列表失败:', err);
|
});
|
},
|
|
// 获取测试标准列表
|
getCodeList() {
|
const api = this.planType === '成品' ? codeList : materialCodeList;
|
api({ rePlanId: this.planId }).then(res => {
|
if (res.code === 200) {
|
this.codeList = res.data ? res.data.map(item => ({
|
label: item.standard,
|
value: item.id,
|
standard: item.standard
|
})) : [];
|
}
|
}).catch(err => {
|
console.error('获取测试标准列表失败:', err);
|
});
|
},
|
// 删除
|
handleDelete(row) {
|
this.$modal.confirm('是否确认删除该检验项？').then(() => {
|
deleteItem({ id: row.id }).then(res => {
|
if (res.code === 200) {
|
this.$message.success('删除成功');
|
this.getTableData();
|
}
|
}).catch(err => {
|
console.error('删除失败:', err);
|
});
|
}).catch(() => { });
|
},
|
// 保存
|
save() {
|
this.saveLoading = true;
|
const promises = this.tableData.map(item => {
|
const params = {
|
id: item.id,
|
rePlanId: this.planId,
|
inspectionItem: item.inspectionItem,
|
standard: item.standard,
|
frequency: item.frequency,
|
remark: item.remark,
|
type: this.planType
|
};
|
return addOrUpdateItem(params);
|
});
|
|
Promise.all(promises)
|
.then(responses => {
|
if (responses.every(res => res.code === 200)) {
|
this.$message.success('保存成功');
|
this.isEdit = false;
|
this.getTableData();
|
}
|
})
|
.catch(err => {
|
console.error('保存失败:', err);
|
this.$message.error('保存失败');
|
})
|
.finally(() => {
|
this.saveLoading = false;
|
});
|
},
|
goback() {
|
this.$tab.closePage();
|
},
|
openAdd() {
|
this.addForm = {}
|
this.addDia = true;
|
},
|
submitProduct(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
const params = {
|
rePlanId: this.planId,
|
inspectionItem: this.addForm.name,
|
standard: this.addForm.standard,
|
frequency: this.addForm.frequency,
|
remark: this.addForm.remark,
|
type: this.planType
|
}
|
addOrUpdateItem(params).then(res => {
|
if (res.code === 200) {
|
this.$message.success('保存成功');
|
this.addDia = false;
|
this.getTableData();
|
}
|
}).catch(err => {
|
console.error('保存失败:', err);
|
});
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.search {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 16px;
|
}
|
</style>
|
