<template>
|
<Card>
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>所属实验调度</div>
|
<el-button
|
v-if="isEngineer"
|
@click="showScheduling = true"
|
class="el-icon-plus"
|
type="primary"
|
>
|
选择实验调度</el-button
|
>
|
</div>
|
<Table :data="schedulingData" :total="schedulingTotal" :height="null">
|
<template>
|
<el-table-column
|
prop="planCode"
|
label="所属项目课题方案"
|
></el-table-column>
|
<el-table-column prop="planName" label="实验编号"></el-table-column>
|
<el-table-column prop="planName" label="实验名称"></el-table-column>
|
<el-table-column prop="stage" label="通知时间"></el-table-column>
|
<el-table-column prop="stage" label="实验开始时间"></el-table-column>
|
<el-table-column prop="stage" label="实验结束时间"></el-table-column>
|
<el-table-column prop="stage" label="参加人员"></el-table-column>
|
<el-table-column prop="creator" label="状态"></el-table-column>
|
</template>
|
</Table>
|
<div class="header-title-left" style="margin-top: 38px">
|
<img src="@/assets/public/headercard.png" />
|
<span>基础信息</span>
|
</div>
|
<el-form
|
v-if="!isExperimenter"
|
ref="form"
|
:model="form"
|
:rules="rules"
|
inline
|
label-position="top"
|
>
|
<el-form-item label="取样单编号" prop="sampleCode">
|
<el-input
|
v-model="form.sampleCode"
|
:disabled="!isExperimenter"
|
:placeholder="isExperimenter ? '请输入取样单编号' : '自动生成'"
|
/>
|
</el-form-item>
|
</el-form>
|
<div v-else class="number">取样单编号：213421241</div>
|
<div class="header-title-left" style="margin-top: 38px">
|
<img src="@/assets/public/headercard.png" />
|
<span>取样操作记录</span>
|
<el-button
|
v-if="isEngineer"
|
type="primary"
|
class="el-icon-plus"
|
@click="showAddTime = true"
|
>
|
新增工艺时间
|
</el-button>
|
<el-button
|
type="primary"
|
class="el-icon-plus"
|
@click="showAdditives = !showAdditives"
|
>
|
{{ showAdditives ? "收起辅料详情" : "展开辅料详情" }}
|
</el-button>
|
</div>
|
<Table :data="sampleData" :total="sampleTotal" :height="null">
|
<template>
|
<el-table-column prop="index" label="序号" width="80"></el-table-column>
|
<el-table-column
|
prop="processTime"
|
label="工艺时间"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
prop="sampleName"
|
label="取样名称"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
prop="sampleCode"
|
label="取样样品编号"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
prop="temperature"
|
label="温度"
|
width="150"
|
></el-table-column>
|
<el-table-column prop="ph" label="PH" width="150"></el-table-column>
|
<el-table-column
|
prop="waterAmount"
|
label="加水量"
|
width="150"
|
></el-table-column>
|
<template v-if="showAdditives">
|
<el-table-column
|
prop="additive1"
|
label="加辅1"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
prop="additive2"
|
label="加辅2"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
prop="additive3"
|
label="加辅3"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
prop="additive4"
|
label="加辅4"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
prop="additive5"
|
label="加辅5"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
prop="additive6"
|
label="加辅6"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
prop="additive7"
|
label="加辅7"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
prop="additive8"
|
label="加辅8"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
prop="additive9"
|
label="加辅9"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
prop="additive10"
|
label="加辅10"
|
width="150"
|
></el-table-column>
|
</template>
|
<el-table-column
|
prop="sampleAmount"
|
label="取样量"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
prop="sampleTime"
|
label="取样时间"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
prop="remark"
|
label="拍照"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
prop="operator"
|
label="操作人员"
|
width="150"
|
></el-table-column>
|
<el-table-column
|
v-if="isExperimenter"
|
fixed="right"
|
label="操作"
|
width="150"
|
>
|
<template slot-scope="scope">
|
<el-button type="text" @click="handleEdit(scope.$index, scope.row)"
|
>编辑</el-button
|
>
|
</template>
|
</el-table-column>
|
</template>
|
</Table>
|
<div class="remark-section" v-if="isExperimenter">
|
<el-form :model="form" label-position="top">
|
<el-form-item label="备注">
|
<el-input
|
type="textarea"
|
v-model="form.remark"
|
:rows="4"
|
placeholder="请输入备注信息"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="add-project-footer">
|
<el-button type="primary" class="save-btn" @click="handleSave">保存</el-button>
|
<el-button>存草稿</el-button>
|
</div>
|
<experimentalScheduling :show="showScheduling" />
|
<addTime :show.sync="showAddTime" @confirm="handleAddTime" />
|
<sample-dialog
|
:visible.sync="showSampleDialog"
|
:data="currentSampleData"
|
@submit="handleSampleSubmit"
|
/>
|
<confirm-dialog
|
:visible.sync="showConfirmDialog"
|
:form-data="form"
|
:sample-data="sampleData"
|
@confirm="handleConfirm"
|
/>
|
</Card>
|
</template>
|
|
<script>
|
import experimentalScheduling from "./components/experimental-scheduling.vue";
|
import addTime from "./components/addTime.vue";
|
import SampleDialog from "./components/sampleDialog.vue";
|
import ConfirmDialog from './components/confirmDialog.vue';
|
|
export default {
|
name: "AddConfirmationSheet",
|
components: {
|
experimentalScheduling,
|
addTime,
|
SampleDialog,
|
ConfirmDialog,
|
},
|
props: {},
|
data() {
|
return {
|
showScheduling: false,
|
showAddTime: false,
|
showAdditives: true,
|
showSampleDialog: false,
|
showConfirmDialog: false,
|
currentSampleData: {},
|
currentEditIndex: -1,
|
schedulingData: [], // 实验调度表格数据
|
schedulingTotal: 0,
|
sampleData: [
|
{
|
index: 1,
|
processTime: "2h",
|
sampleName: "样品A",
|
sampleCode: "SP001",
|
temperature: "25℃",
|
ph: "7.0",
|
waterAmount: "500ml",
|
additive1: "10g",
|
additive2: "5g",
|
additive3: "3g",
|
additive4: "",
|
additive5: "",
|
additive6: "",
|
additive7: "",
|
additive8: "",
|
additive9: "",
|
additive10: "",
|
sampleAmount: "100ml",
|
sampleTime: "2024-03-20 10:00:00",
|
remark: "",
|
operator: "张三",
|
},
|
{
|
index: 2,
|
processTime: "4min",
|
sampleName: "样品B",
|
sampleCode: "SP002",
|
temperature: "30℃",
|
ph: "6.5",
|
waterAmount: "300ml",
|
additive1: "8g",
|
additive2: "4g",
|
additive3: "",
|
additive4: "",
|
additive5: "",
|
additive6: "",
|
additive7: "",
|
additive8: "",
|
additive9: "",
|
additive10: "",
|
sampleAmount: "50ml",
|
sampleTime: "2024-03-20 10:30:00",
|
remark: "",
|
operator: "李四",
|
},
|
],
|
sampleTotal: 2,
|
form: {
|
sampleCode: "",
|
remark: "",
|
},
|
rules: {
|
sampleCode: [
|
{ required: true, message: "请输入取样单编号", trigger: "blur" },
|
],
|
},
|
menu: [],
|
userRole: "experimenter", // 用户角色，可以是 'engineer' 或 'experimenter'
|
};
|
},
|
computed: {
|
height() {
|
return this.$baseTableHeight();
|
},
|
isEngineer() {
|
return this.userRole === "engineer";
|
},
|
isExperimenter() {
|
return this.userRole === "experimenter";
|
},
|
},
|
watch: {},
|
created() {},
|
mounted() {},
|
methods: {
|
setSelectedIds(arr, selectKeyList) {
|
function traverse(item) {
|
item.selected = selectKeyList.includes(item.menuId);
|
if (item.children && item.children.length > 0) {
|
item.children.forEach(traverse);
|
}
|
}
|
arr.forEach(traverse);
|
return arr;
|
},
|
onSubmit() {
|
this.$refs["form"].validate((valid) => {
|
if (valid) {
|
if (this.getSelectedIds(this.menu).length == 0) {
|
this.msgwarning("请勾选操作权限");
|
return;
|
}
|
let obj = {
|
...this.form,
|
menuIds: this.getSelectedIds(this.menu),
|
};
|
if (this.$route.query && this.$route.query.roleId) {
|
obj.roleId = this.$route.query.roleId;
|
edit(obj).then(() => {
|
this.msgsuccess("保存成功");
|
this.$router.go(-1);
|
});
|
} else {
|
add(obj).then(() => {
|
this.msgsuccess("保存成功");
|
this.form = {
|
roleName: "",
|
remark: "",
|
};
|
this.menu = [];
|
this.$router.go(-1);
|
});
|
}
|
}
|
});
|
},
|
getSelectedIds(arr) {
|
let result = [];
|
function traverse(item) {
|
if (item.selected) {
|
result.push(item.menuId);
|
}
|
if (item.children && item.children.length > 0) {
|
for (let children of item.children) {
|
traverse(children);
|
}
|
}
|
}
|
|
for (let item of arr) {
|
traverse(item);
|
}
|
return result;
|
},
|
setCheckStatus1(id, status) {
|
//点击第1级
|
if (!status) {
|
this.menu = this.menu.map((item) => {
|
if (item.menuId == id) {
|
item.selected = status;
|
if (item.children.length > 0) {
|
item.children = item.children.map((item1) => {
|
item1.selected = status;
|
if (item1.children.length > 0) {
|
item1.children = item1.children.map((item2) => {
|
item2.selected = status;
|
return { ...item2 };
|
});
|
}
|
return { ...item1 };
|
});
|
}
|
}
|
return { ...item };
|
});
|
} else {
|
this.menu = this.menu.map((item) => {
|
if (item.menuId == id) {
|
item.selected = true;
|
}
|
return { ...item };
|
});
|
}
|
},
|
setCheckStatus2(id, status, aId) {
|
//点击第2级
|
this.menu = this.menu.map((item) => {
|
if (item.menuId == aId) {
|
item.selected = true;
|
if (item.children.length > 0) {
|
item.children = item.children.map((item1) => {
|
if (item1.menuId == id) {
|
item1.selected = status;
|
}
|
return { ...item1 };
|
});
|
}
|
}
|
return { ...item };
|
});
|
},
|
setCheckStatus3(id, status, bId, aId) {
|
//点击第3级
|
this.menu = this.menu.map((item) => {
|
if (item.menuId == aId) {
|
item.selected = true;
|
if (item.children.length > 0) {
|
item.children = item.children.map((item1) => {
|
if (item1.menuId == bId) {
|
item1.selected = true;
|
if (item1.children.length > 0) {
|
item1.children = item1.children.map((item2) => {
|
if (item2.menuId == id) {
|
item2.selected = status;
|
}
|
return { ...item2 };
|
});
|
}
|
}
|
return { ...item1 };
|
});
|
}
|
}
|
return { ...item };
|
});
|
},
|
handleEdit(index, row) {
|
this.currentEditIndex = index;
|
this.currentSampleData = { ...row };
|
this.showSampleDialog = true;
|
},
|
handleSampleSubmit(formData) {
|
if (this.currentEditIndex > -1) {
|
// 更新表格数据
|
this.$set(this.sampleData, this.currentEditIndex, {
|
...this.sampleData[this.currentEditIndex],
|
...formData,
|
});
|
this.currentEditIndex = -1;
|
}
|
this.showSampleDialog = false;
|
},
|
handleDelete(index, row) {
|
this.$confirm("确认删除该记录吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
this.sampleData.splice(index, 1);
|
// 重新计算序号
|
this.sampleData.forEach((item, i) => {
|
item.index = i + 1;
|
});
|
this.$message.success("删除成功");
|
})
|
.catch(() => {});
|
},
|
handleAddTime(processTime) {
|
if (!this.isEngineer) return;
|
const newRow = {
|
index: this.sampleData.length + 1,
|
processTime,
|
sampleName: "",
|
sampleCode: "",
|
temperature: "",
|
ph: "",
|
waterAmount: "",
|
additive1: "",
|
additive2: "",
|
additive3: "",
|
additive4: "",
|
additive5: "",
|
additive6: "",
|
additive7: "",
|
additive8: "",
|
additive9: "",
|
additive10: "",
|
sampleAmount: "",
|
sampleTime: "",
|
remark: "",
|
operator: "",
|
};
|
this.sampleData.push(newRow);
|
this.$message.success("添加工艺时间成功");
|
},
|
handleSave() {
|
if (this.isExperimenter) {
|
this.showConfirmDialog = true;
|
} else {
|
this.submitForm();
|
}
|
},
|
handleConfirm(signature) {
|
this.submitForm(signature);
|
},
|
submitForm(signature = null) {
|
// 在这里实现表单提交逻辑
|
console.log('提交表单数据', { signature });
|
this.$message.success('保存成功');
|
this.showConfirmDialog = false;
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.title_box {
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
font-weight: bold;
|
|
div:first-child {
|
width: 4px;
|
height: 16px;
|
background: #598dec;
|
margin-right: 8px;
|
}
|
}
|
|
.no-data {
|
height: 100%;
|
background-color: #fff;
|
border-radius: 0 0 6px 6px;
|
border-left: 1px solid #e8e8e8;
|
border-right: 1px solid #e8e8e8;
|
border-bottom: 1px solid #e8e8e8;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #909399;
|
font-size: 14px;
|
}
|
|
.add-project-footer {
|
margin-top: 43px;
|
button {
|
width: 220px;
|
}
|
.save-btn {
|
margin-right: 20px;
|
}
|
}
|
|
.el-checkbox {
|
display: flex;
|
align-items: center;
|
}
|
.number{
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 14px;
|
color: rgba(0,0,0,0.88);
|
}
|
|
.row,
|
.header {
|
display: flex;
|
align-items: center;
|
border: 1px solid #e8e8e8;
|
|
.w20 {
|
width: 15%;
|
padding: 8px 20px;
|
}
|
|
.sconed {
|
flex: 1;
|
|
.subpage {
|
.title {
|
border: 1px solid #e8e8e8;
|
border-top: none;
|
border-bottom: none;
|
}
|
|
.two {
|
display: flex;
|
align-items: center;
|
border: 1px solid #e8e8e8;
|
border-top: none;
|
border-right: none;
|
|
.left {
|
width: 200px;
|
padding: 13px 20px;
|
border-right: 1px solid #e8e8e8;
|
}
|
|
.right {
|
display: flex;
|
flex: 1;
|
|
div {
|
padding: 13px 0 13px 20px;
|
}
|
}
|
}
|
|
.two:last-child {
|
border-bottom: none;
|
}
|
|
.btns {
|
display: flex;
|
align-items: center;
|
padding: 0 20px;
|
}
|
}
|
}
|
}
|
|
.header {
|
border-radius: 16px 16px 0 0;
|
background-color: #fafafa;
|
color: #909399;
|
|
.subpage {
|
display: flex;
|
}
|
|
.title {
|
width: 200px;
|
padding: 8px 20px;
|
}
|
}
|
|
.header-title-left {
|
display: flex;
|
align-items: center;
|
gap: 13px;
|
margin-bottom: 20px;
|
|
.el-button {
|
margin-left: 0;
|
}
|
|
img {
|
width: 12px;
|
height: 19px;
|
}
|
|
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;
|
}
|
}
|
span {
|
flex-shrink: 0;
|
font-weight: bold;
|
font-size: 18px;
|
color: #222222;
|
line-height: 27px;
|
font-family: "Source Han Sans CN Bold Bold";
|
}
|
}
|
|
.remark-section {
|
margin-top: 20px;
|
|
.el-form-item {
|
width: 100%;
|
|
.el-textarea {
|
width: 100%;
|
}
|
}
|
}
|
|
.signature-section {
|
margin-top: 26px;
|
}
|
|
.add-group {
|
padding-left: 25px;
|
margin-top: 14px;
|
display: flex;
|
align-items: center;
|
margin-bottom: 19px;
|
|
div {
|
color: #f56c6c;
|
}
|
|
span {
|
font-weight: 500;
|
font-size: 14px;
|
color: #222222;
|
line-height: 21px;
|
margin: 0 32px 0 8px;
|
}
|
}
|
</style>
|
