<template>
|
<div>
|
<Card>
|
<div class="header-title" style="width: 100%;">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>所属项目组</div>
|
</div>
|
<div class="header-title-right" v-if="!isDetail">
|
<el-button @click="showChoose = true" class="el-icon-circle-plus-outline" type="primary">
|
选择项目组</el-button>
|
</div>
|
</div>
|
<Table :height="null" :data="tableData" :queryForm="queryForm" :total="0">
|
<template>
|
<el-table-column prop="teamName" label="项目组名称" />
|
<el-table-column prop="personCharge" label="项目负责人" />
|
<el-table-column prop="staffName" label="项目组成员">
|
<template #default="{ row }">
|
<span>{{row.staffs.map(item => item.nickName).join(',')}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="创建时间" />
|
</template>
|
</Table>
|
<el-form ref="form" :model="form" :rules="rules" inline label-position="top" style="margin-top: 38px">
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item prop="itemName" label="检测项名称">
|
<el-input v-model="form.itemName" style="width: 100%;" placeholder="请输入检测项名称" :disabled="isDetail" />
|
</el-form-item>
|
<el-form-item prop="itemCode" label="检测项编号" style="margin-left: 100px;">
|
<el-input v-model="form.itemCode" style="width: 100%;" placeholder="请输入检测项编号" :disabled="isDetail" />
|
</el-form-item>
|
</el-col>
|
|
</el-row>
|
|
<div class="notice">备注内容</div>
|
|
<div prop="remark" style="margin-top: 18px">
|
<el-input v-model="form.remark" type="textarea" :rows="4" style="width: 100%;" placeholder="请输入备注内容" :disabled="isDetail" />
|
</div>
|
|
<div class="notice" style="margin: 18px 0;" v-if="isDetail">报告列表</div>
|
|
<div class="table-setting" v-if="isDetail">
|
<div class="flex a-center">
|
<div class="table-title" :class="{ active: currentType === 'list' }" @click="handleTypeChange('list')">
|
项目检测项、检验包列表
|
</div>
|
<div class="table-tit" :class="{ active: currentType === 'draft' }" @click="handleTypeChange('draft')">
|
草稿箱
|
</div>
|
</div>
|
</div>
|
|
<Table :data="reportTableData" :total="reportTotal" row-key="id" :height="null" @handlePageChange="handlePageChange" @handleSizeChange="handleSizeChange"
|
v-if="isDetail">
|
<el-table-column prop="reportContent" label="报告内容">
|
<template #default="{ row }">
|
<span>{{ getReportContentText(row.reportContent) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="developPerson" label="制订人" />
|
<el-table-column prop="developDate" label="制订日期" />
|
<el-table-column prop="auditPersonId" label="审批人" />
|
<el-table-column prop="auditTime" label="审批时间" />
|
<el-table-column prop="status" label="状态">
|
<template #default="{ row }">
|
<el-tag v-if="row.status == 1" type="info" color="#fff">待审核</el-tag>
|
<el-tag v-if="row.status == 2" type="success" color="#fff">已通过</el-tag>
|
<el-tag v-if="row.status == 3" type="danger">已驳回</el-tag>
|
<el-tag v-if="row.status == 4" type="danger">已撤销</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="age" label="操作">
|
<template #default="{ row }">
|
<template v-if="row.status === 2">
|
<el-button type="text" @click="handleReportDetail(row)">详情</el-button>
|
</template>
|
<template v-else-if="row.status === 1">
|
<el-button type="text" @click="handleRevokeApproval(row)">撤销审批</el-button>
|
</template>
|
<template v-else-if="row.status === 3">
|
<el-button type="text" @click="handleReportDetail(row)">详情</el-button>
|
<el-button type="text" @click="handleWithdraw(row)">编辑</el-button>
|
<el-button type="text" @click="handleDelete(row)">删除</el-button>
|
</template>
|
</template>
|
</el-table-column>
|
</Table>
|
|
<div class="end-btn" style="margin-top: 38px" v-if="!isDetail">
|
<el-button type="primary" @click="submit">发送</el-button>
|
<el-button type="default" @click="saveDraft">存草稿</el-button>
|
</div>
|
</el-form>
|
</Card>
|
<chooseProject @submit="getProjectData" :show="showChoose" @close="showChoose = false"></chooseProject>
|
<!-- 删除确认弹窗 -->
|
<ShowDelConfirm
|
:title="changeStatusTitle"
|
:tip="changeStatusTip"
|
:show="changeStatus"
|
@close="changeStatus = false"
|
@confirm="handleChangeStatusConfirm"
|
/>
|
</div>
|
|
</template>
|
<script>
|
import { Card } from 'element-ui';
|
import AiEditor from '@/components/AiEditor'
|
import chooseProject from '@/components/chooseProject'
|
import ShowDelConfirm from "@/components/showDelConfirm/index.vue";
|
import {addData, editData, getDetail} from './service'
|
|
export default {
|
components: {
|
AiEditor,
|
chooseProject,ShowDelConfirm
|
},
|
data() {
|
return {
|
isEdit: false,
|
isDetail: false,
|
currentType: 'list', // 当前显示类型：list-列表，draft-草稿箱
|
expandRowKeys: [],
|
reportTableData: [],
|
reportTotal: 0,
|
form: {
|
id: "",
|
itemCode: "",
|
itemName: "",
|
remark: "",
|
status: -1,
|
teamId: ""
|
},
|
tableData: [],
|
fileList: [], // 附件列表
|
showChoose: false,
|
rules: {
|
itemName: [
|
{ required: true, message: '请输入检测项名称', trigger: 'blur' }
|
],
|
itemCode: [
|
{ required: true, message: '请输入检测项编号', trigger: 'blur' }
|
]
|
},
|
queryForm: {},
|
changeStatus: false,
|
changeStatusTitle: '',
|
changeStatusTip: '',
|
currentRow: null,
|
currentAction: '' // 'revoke' 或 'delete'
|
}
|
},
|
mounted() {
|
if (this.$route.query.id) {
|
if (this.$route.query.type === 'detail') {
|
this.isDetail = true
|
} else if (this.$route.query.type === 'edit') {
|
this.isEdit = true
|
}
|
this.getDetail()
|
}
|
},
|
methods: {
|
getDetail() {
|
getDetail(this.$route.query.id).then(res => {
|
if (res) {
|
this.form = res
|
if (res.projectTeamVO) {
|
this.tableData = [{
|
...res.projectTeamVO,
|
}]
|
}
|
if(res.qaTestItemReportList.length > 0){
|
this.reportTableData = res.qaTestItemReportList
|
}
|
} else {
|
this.$message.error(res.msg || '获取详情失败')
|
}
|
}).catch(err => {
|
console.error('获取详情失败:', err)
|
this.$message.error('获取详情失败')
|
})
|
},
|
getProjectData(data) {
|
this.tableData = [data]
|
this.form.teamId = data.id
|
this.$forceUpdate()
|
this.showChoose = false
|
},
|
submit() {
|
if (this.tableData.length === 0) {
|
this.$message.error('请选择项目组')
|
return
|
}
|
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
const data = {
|
...this.form,
|
status: 1 // 已提交状态
|
}
|
const request = this.isEdit ? editData(data) : addData(data)
|
request.then(res => {
|
if (res.code === 200) {
|
this.$message.success(this.isEdit ? '修改成功' : '提交成功')
|
this.$router.push('/chemistQa/projectTesting')
|
} else {
|
this.$message.error(res.msg || (this.isEdit ? '修改失败' : '提交失败'))
|
}
|
}).catch(err => {
|
console.error(this.isEdit ? '修改失败:' : '提交失败:', err)
|
this.$message.error(this.isEdit ? '修改失败' : '提交失败')
|
})
|
}
|
})
|
},
|
saveDraft() {
|
if (this.tableData.length === 0) {
|
this.$message.error('请选择项目组')
|
return
|
}
|
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
const data = {
|
...this.form,
|
status: -1 // 草稿箱状态
|
}
|
const request = this.isEdit ? editData(data) : addData(data)
|
request.then(res => {
|
if (res.code === 200) {
|
this.$message.success(this.isEdit ? '修改成功' : '保存成功')
|
this.$router.push('/chemistQa/projectTesting')
|
} else {
|
this.$message.error(res.msg || (this.isEdit ? '修改失败' : '保存失败'))
|
}
|
}).catch(err => {
|
console.error(this.isEdit ? '修改失败:' : '保存失败:', err)
|
this.$message.error(this.isEdit ? '修改失败' : '保存失败')
|
})
|
}
|
})
|
},
|
handleTypeChange(type) {
|
this.currentType = type;
|
this.getReportList();
|
},
|
handleReportRowClick(row, column, event) {
|
if (column.label === '操作') return
|
if (this.expandRowKeys.includes(row.id)) {
|
this.expandRowKeys = this.expandRowKeys.filter(key => key !== row.id);
|
} else {
|
this.expandRowKeys.push(row.id);
|
}
|
},
|
handleReportDetail(row) {
|
// 处理报告详情
|
this.$router.push({
|
path: '/chemistQa/projectTesting/add',
|
query: {
|
id: row.id,
|
type: 'detail'
|
}
|
})
|
},
|
getReportList() {
|
// 获取报告列表数据
|
// TODO: 调用接口获取数据
|
},
|
handleRevokeApproval(row) {
|
this.currentRow = row;
|
this.currentAction = 'revoke';
|
this.changeStatusTitle = '确认要撤销这条审批吗？';
|
this.changeStatusTip = '撤销后工艺工程师将无法收到此条审批信息';
|
this.changeStatus = true;
|
},
|
handleWithdraw(row) {
|
this.$confirm('确认撤回该记录吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
// TODO: 调用撤回接口
|
this.$message.success('撤回成功')
|
}).catch(() => {
|
this.$message.info('已取消撤回')
|
})
|
},
|
handleDelete(row) {
|
this.currentRow = row;
|
this.currentAction = 'delete';
|
this.changeStatusTitle = '确认要删除这条记录吗？';
|
this.changeStatusTip = '删除后记录将无法找回';
|
this.changeStatus = true;
|
},
|
handleChangeStatusConfirm() {
|
if (this.currentAction === 'revoke') {
|
// TODO: 调用撤销审批接口
|
this.$message.success('撤销审批成功');
|
} else if (this.currentAction === 'delete') {
|
// TODO: 调用删除接口
|
this.$message.success('删除成功');
|
}
|
this.changeStatus = false;
|
this.currentRow = null;
|
this.currentAction = '';
|
// 刷新列表
|
this.getReportList();
|
},
|
getReportContentText(value) {
|
const contentMap = {
|
'1': '国家标准',
|
'2': '分析方法开发',
|
'3': '方法验证报告',
|
'4': '方法确认',
|
'5': '操作规程',
|
'6': '方法转移记录清单'
|
};
|
return contentMap[value] || value;
|
}
|
}
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
.notice{
|
flex-shrink: 0;
|
font-weight: bold;
|
font-size: 18px;
|
color: #222222;
|
line-height: 27px;
|
font-family: "Source Han Sans CN Bold Bold";
|
}
|
.header-title {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
margin-bottom: 20px;
|
gap: 13px;
|
|
.header-title-left {
|
display: flex;
|
align-items: center;
|
gap: 13px;
|
margin-top: 38px;
|
|
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";
|
}
|
}
|
|
.header-title-left :first-child {
|
margin-top: 0;
|
}
|
}
|
|
.header-title:first-child {
|
.header-title-left {
|
margin-top: 0;
|
}
|
}
|
|
.end-btn{
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
|
button{
|
width: 180px;
|
height: 36px;
|
// background: #409EFF;
|
}
|
}
|
|
.table-setting {
|
display: flex;
|
padding-bottom: 20px;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.flex {
|
display: flex;
|
align-items: center;
|
}
|
|
.table-title {
|
width: 220px;
|
height: 50px;
|
background: #fafafc;
|
border-radius: 8px 8px 0px 0px;
|
border: 1px solid #dcdfe6;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: bold;
|
font-size: 18px;
|
color: #606266;
|
line-height: 27px;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
|
&.active {
|
color: #049c9a;
|
background: #ffffff;
|
border: 1px solid #049c9a;
|
}
|
}
|
|
.table-tit {
|
width: 166px;
|
height: 50px;
|
background: #fafafc;
|
border-radius: 8px 8px 0px 0px;
|
border: 1px solid #dcdfe6;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: bold;
|
font-size: 18px;
|
color: #606266;
|
line-height: 27px;
|
margin-left: 16px;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
|
&.active {
|
color: #049c9a;
|
background: #ffffff;
|
border: 1px solid #049c9a;
|
}
|
}
|
|
.expand-box {
|
padding: 20px;
|
background: linear-gradient(180deg, #049C9A 0%, #0ACBCA 100%);
|
border-radius: 20px;
|
|
&-title {
|
font-weight: 500;
|
font-size: 16px;
|
color: #FFFFFF;
|
line-height: 24px;
|
margin-bottom: 20px;
|
}
|
}
|
</style>
|
