<template>
|
<Card>
|
<el-form
|
ref="form"
|
:model="form"
|
:rules="rules"
|
inline
|
label-position="top"
|
>
|
|
|
|
|
|
<div class="header-title" style="margin-bottom: 38px">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>所属实验调度</div>
|
</div>
|
<el-button type="primary" class="el-icon-plus" @click="handleAddTask">选择实验调度</el-button>
|
</div>
|
|
<Table :data="taskTableData" :total="0" :height="null" class="rwuTable">
|
<el-table-column prop="index" label="所属项目课题方案" width="200"></el-table-column>
|
<el-table-column prop="sampleCode" label="实验编号"></el-table-column>
|
<el-table-column prop="testData" label="实验名称"></el-table-column>
|
<el-table-column prop="testData" label="通知时间"></el-table-column>
|
<el-table-column prop="testData" label="实验开始时间"></el-table-column>
|
<el-table-column prop="testData" label="实验结束时间"></el-table-column>
|
<el-table-column prop="testData" label="参加人员"></el-table-column>
|
<el-table-column prop="testData" label="状态"></el-table-column>
|
</Table>
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>本次检验结果总表</div>
|
</div>
|
</div>
|
<div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<span>本次检验结果</span>
|
</div>
|
</div>
|
|
<div class="add-project-footer">
|
<el-button type="primary" class="save-btn">发送</el-button>
|
<el-button>存草稿</el-button>
|
</div>
|
</el-form>
|
<!-- 添加检测数据弹窗 -->
|
<add-dialog
|
ref="addDialog"
|
:visible.sync="dialogVisible"
|
@success="handleTaskSubmit"
|
/>
|
</Card>
|
</template>
|
|
<script>
|
import AddDialog from './components/addDialog.vue'
|
import moment from 'moment'
|
|
export default {
|
name: "AddProject",
|
components: {
|
AddDialog
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
isEdit: false,
|
currentEditIndex: -1,
|
form: {
|
recordNo: '',
|
testItemName: '',
|
testItemNo: '',
|
testMethodName: '',
|
testMethodNo: ''
|
},
|
rules: {
|
recordNo: [{ required: true, message: "请输入原始检验记录编号", trigger: "blur" }],
|
testItemName: [{ required: true, message: "请输入检测项名字", trigger: "blur" }],
|
testItemNo: [{ required: true, message: "请输入检测项编号", trigger: "blur" }],
|
testMethodName: [{ required: true, message: "请输入检测方法名字", trigger: "blur" }],
|
testMethodNo: [{ required: true, message: "请输入检测方法编号", trigger: "blur" }]
|
},
|
taskTableData: []
|
};
|
},
|
methods: {
|
handleAddTask() {
|
this.isEdit = false;
|
this.currentEditIndex = -1;
|
this.dialogVisible = true;
|
},
|
handleEditTask(row) {
|
this.isEdit = true;
|
this.currentEditIndex = this.taskTableData.findIndex(item => item === row);
|
|
const editData = {
|
sampleCode: row.sampleCode,
|
testData: row.testData,
|
testTypes: [],
|
photos: [],
|
spectrums: []
|
};
|
|
if (row.photos && row.photos.length > 0) {
|
editData.testTypes.push('photo');
|
editData.photos = row.photos.map(photo => ({
|
name: photo.name,
|
url: photo.url,
|
raw: null
|
}));
|
}
|
if (row.spectrums && row.spectrums.length > 0) {
|
editData.testTypes.push('spectrum');
|
editData.spectrums = row.spectrums.map(spectrum => ({
|
name: spectrum.name,
|
url: spectrum.url,
|
raw: null
|
}));
|
}
|
|
this.$nextTick(() => {
|
this.dialogVisible = true;
|
this.$refs.addDialog.setFormData(editData);
|
});
|
},
|
handleDeleteTask(row) {
|
this.$confirm("确认删除该检测数据吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
const index = this.taskTableData.findIndex((item) => item === row);
|
if (index > -1) {
|
const item = this.taskTableData[index];
|
if (item.photos) {
|
item.photos.forEach(photo => {
|
if (photo.url.startsWith('blob:')) {
|
URL.revokeObjectURL(photo.url);
|
}
|
});
|
}
|
if (item.spectrums) {
|
item.spectrums.forEach(spectrum => {
|
if (spectrum.url.startsWith('blob:')) {
|
URL.revokeObjectURL(spectrum.url);
|
}
|
});
|
}
|
|
this.taskTableData.splice(index, 1);
|
this.$message.success("删除成功");
|
}
|
})
|
.catch(() => {});
|
},
|
handleTaskSubmit(formData) {
|
const photos = formData.photos.map(file => ({
|
name: file.name,
|
url: file.url || URL.createObjectURL(file.raw)
|
}));
|
|
const spectrums = formData.spectrums.map(file => ({
|
name: file.name,
|
url: file.url || URL.createObjectURL(file.raw)
|
}));
|
|
const newData = {
|
sampleCode: formData.sampleCode,
|
testData: formData.testData,
|
testResult: '',
|
photos,
|
spectrums,
|
createTime: this.isEdit ? this.taskTableData[this.currentEditIndex].createTime : moment().format('YYYY-MM-DD HH:mm:ss')
|
};
|
|
if (this.isEdit && this.currentEditIndex > -1) {
|
const oldData = this.taskTableData[this.currentEditIndex];
|
if (oldData.photos) {
|
oldData.photos.forEach(photo => {
|
if (photo.url.startsWith('blob:') && !photos.find(p => p.url === photo.url)) {
|
URL.revokeObjectURL(photo.url);
|
}
|
});
|
}
|
if (oldData.spectrums) {
|
oldData.spectrums.forEach(spectrum => {
|
if (spectrum.url.startsWith('blob:') && !spectrums.find(s => s.url === spectrum.url)) {
|
URL.revokeObjectURL(spectrum.url);
|
}
|
});
|
}
|
|
this.taskTableData.splice(this.currentEditIndex, 1, newData);
|
this.$message.success('更新成功');
|
} else {
|
this.taskTableData.push(newData);
|
this.$message.success('添加成功');
|
}
|
|
this.dialogVisible = false;
|
this.isEdit = false;
|
this.currentEditIndex = -1;
|
},
|
getPhotoUrls(photos) {
|
return photos.map(photo => photo.url);
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="less">
|
.el-form--inline .el-form-item {
|
margin-right: 83px;
|
}
|
|
.header-title {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
gap: 13px;
|
margin-top: 38px;
|
|
.header-title-left {
|
display: flex;
|
align-items: center;
|
gap: 13px;
|
|
img {
|
width: 12px;
|
height: 19px;
|
}
|
|
span {
|
flex-shrink: 0;
|
font-weight: bold;
|
font-size: 18px;
|
color: #222222;
|
line-height: 27px;
|
font-family: "Source Han Sans CN Bold Bold";
|
}
|
div {
|
flex-shrink: 0;
|
font-weight: bold;
|
font-size: 18px;
|
color: #222222;
|
line-height: 27px;
|
font-family: "Source Han Sans CN Bold Bold";
|
|
&:before {
|
content: "*";
|
color: #f56c6c;
|
margin-right: 4px;
|
}
|
}
|
}
|
}
|
|
.rwuTable {
|
width: 85%;
|
padding-left: 40px;
|
}
|
|
.add-project-footer {
|
margin-top: 43px;
|
|
button {
|
width: 220px;
|
}
|
|
.save-btn {
|
margin-right: 20px;
|
}
|
}
|
|
.image-preview {
|
display: flex;
|
gap: 8px;
|
flex-wrap: wrap;
|
|
.preview-image {
|
width: 50px;
|
height: 50px;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
|
.image-slot {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
width: 100%;
|
height: 100%;
|
background: #f5f7fa;
|
color: #909399;
|
}
|
}
|
|
.spectrum-link {
|
display: block;
|
margin-bottom: 5px;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
</style>
|
