forked from TALL/tall3-pc-keti
11 changed files with 766 additions and 88 deletions
@ -0,0 +1,295 @@ |
|||
<template> |
|||
<div> |
|||
<a-table |
|||
class="member-list" |
|||
:columns="columns" |
|||
:data-source="dataList" |
|||
:row-class-name="(_record, index) => (index % 2 === 1 ? null : 'table-striped')" |
|||
> |
|||
<template #bodyCell="{ column, text, record }"> |
|||
<div class="flex items-center" v-if="column.key === 'action'"> |
|||
<a-button |
|||
:disabled="record.status === 0 ? false : true" |
|||
class="action-btn edit-btn" |
|||
type="primary" |
|||
@click="showModal(record.id, 'success')" |
|||
> |
|||
通过 |
|||
</a-button> |
|||
<a-button |
|||
:disabled="record.status === 0 ? false : true" |
|||
class="action-btn del-btn" |
|||
type="primary" |
|||
@click="showModal(record.id, 'fail')" |
|||
> |
|||
驳回 |
|||
</a-button> |
|||
<img v-if="record.status === 0" style="width: 28px" src="https://www.tall.wiki/staticrec/experiment/unlock.png" /> |
|||
<img |
|||
v-if="record.status === 1" |
|||
class="cursor-pointer" |
|||
style="width: 28px" |
|||
src="https://www.tall.wiki/staticrec/experiment/locking.png" |
|||
@click="showModal(record.id, 'tips')" |
|||
/> |
|||
<div v-if="record.status === 2" class="status-btn" style="background: #cccccc">审</div> |
|||
<div v-if="record.status === 4" class="status-btn" style="background: #ff5353">驳</div> |
|||
</div> |
|||
|
|||
<template v-else-if="['report', 'course', 'information', 'result', 'sourceCode'].includes(column.dataIndex)"> |
|||
<div style="color: #1890ff">{{ text }}</div> |
|||
</template> |
|||
</template> |
|||
</a-table> |
|||
</div> |
|||
|
|||
<!-- 确定模态框 --> |
|||
<a-modal v-model:visible="success" :closable="false" @ok="handleOk('success')"> |
|||
<div class="modal-title flex items-center"> |
|||
<CheckCircleFilled style="margin-right: 8px; font-size: 18px; color: #52c41a" /> |
|||
<span class="color-3" style="font-size: 18px; font-weight: 600">确定要审核通过该实验交付物吗？</span> |
|||
</div> |
|||
<div class="modal-con color-9" style="padding-left: 24px; margin-top: 16px; font-size: 16px; line-height: 26px"> |
|||
确定通过审核后改实验交付物将被锁定，如需修改需向课题主持人提交解锁请求，通过后即可修改。 |
|||
</div> |
|||
</a-modal> |
|||
|
|||
<!-- 拒绝模态框 --> |
|||
<a-modal v-model:visible="fail" :closable="false" @ok="handleOk('fail')"> |
|||
<div class="modal-title flex items-center"> |
|||
<CloseCircleFilled style="margin-right: 8px; font-size: 18px; color: #ff5353" /> |
|||
<span class="color-3" style="font-size: 18px; font-weight: 600">确定要驳回该实验交付物吗？</span> |
|||
</div> |
|||
<div class="modal-con color-9" style="padding-left: 24px; margin-top: 16px"> |
|||
<div style="margin-bottom: 5px; font-size: 16px; line-height: 26px">驳回原因</div> |
|||
<a-textarea v-model:value="remark1" placeholder="驳回原因" :auto-size="{ minRows: 2, maxRows: 5 }" /> |
|||
</div> |
|||
</a-modal> |
|||
|
|||
<!-- 提示模态框 --> |
|||
<a-modal v-model:visible="tips" :closable="false" @ok="handleOk('tips')"> |
|||
<div class="modal-title flex items-center"> |
|||
<ExclamationCircleFilled style="margin-right: 8px; font-size: 18px; color: #fa8c16" /> |
|||
<span class="color-3" style="font-size: 18px; font-weight: 600">确定要申请解锁该项实验交付物吗？</span> |
|||
</div> |
|||
<div class="modal-con color-9" style="padding-left: 24px; margin-top: 16px"> |
|||
<div style="margin-bottom: 5px; font-size: 16px; line-height: 26px">申请原因</div> |
|||
<a-textarea v-model:value="remark2" placeholder="申请原因" :auto-size="{ minRows: 2, maxRows: 5 }" /> |
|||
</div> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import { queryExperimentation, examineExperimentation, applyUnlock } from 'apis'; |
|||
import { CheckCircleFilled, CloseCircleFilled, ExclamationCircleFilled } from '@ant-design/icons-vue'; |
|||
|
|||
const store = useStore(); |
|||
const projectId = computed(() => store.getters['projects/projectId']); |
|||
const sessionProject = sessionStorage.getItem('project'); |
|||
const success = ref(false); |
|||
const fail = ref(false); |
|||
const tips = ref(false); |
|||
const currId = ref(null); |
|||
const remark1 = ref(null); |
|||
const remark2 = ref(null); |
|||
|
|||
if (sessionProject) { |
|||
const project = JSON.parse(sessionProject); |
|||
store.commit('projects/setProject', project); |
|||
} |
|||
|
|||
const columns = ref([ |
|||
{ |
|||
title: '序号', |
|||
dataIndex: 'indexId', |
|||
key: 'indexId', |
|||
}, |
|||
{ |
|||
title: '实验名称', |
|||
dataIndex: 'name', |
|||
key: 'name', |
|||
}, |
|||
{ |
|||
title: '实验报告', |
|||
dataIndex: 'report', |
|||
key: 'report', |
|||
}, |
|||
{ |
|||
title: '实验过程', |
|||
dataIndex: 'course', |
|||
key: 'course', |
|||
}, |
|||
{ |
|||
title: '实验数据', |
|||
dataIndex: 'information', |
|||
key: 'information', |
|||
}, |
|||
{ |
|||
title: '实验结果', |
|||
dataIndex: 'result', |
|||
key: 'result', |
|||
}, |
|||
{ |
|||
title: '程序代码', |
|||
dataIndex: 'sourceCode', |
|||
key: 'sourceCode', |
|||
}, |
|||
{ |
|||
title: '审核', |
|||
key: 'action', |
|||
dataIndex: 'action', |
|||
}, |
|||
]); |
|||
|
|||
const dataList = ref([]); |
|||
|
|||
getExperimentations(); |
|||
|
|||
// 显示对话框 |
|||
const showModal = (id, tip) => { |
|||
currId.value = id; |
|||
if (tip === 'success') { |
|||
success.value = true; |
|||
} else if (tip === 'fail') { |
|||
fail.value = true; |
|||
} else if (tip === 'tips') { |
|||
tips.value = true; |
|||
} |
|||
}; |
|||
|
|||
// 对话框确认按钮 |
|||
const handleOk = async tip => { |
|||
if (tip === 'success') { |
|||
success.value = false; |
|||
await examine(0); |
|||
} else if (tip === 'fail') { |
|||
fail.value = false; |
|||
await examine(1); |
|||
} else if (tip === 'tips') { |
|||
tips.value = false; |
|||
await toUnlock(); |
|||
} |
|||
}; |
|||
|
|||
async function getExperimentations() { |
|||
try { |
|||
const params = { param: { projectId: projectId.value } }; |
|||
const data = await queryExperimentation(params); |
|||
|
|||
data.forEach((item, index) => { |
|||
item.indexId = index + 1; |
|||
}); |
|||
dataList.value = data; |
|||
} catch (error) { |
|||
console.log('error', error); |
|||
} |
|||
} |
|||
|
|||
// 通过/驳回 |
|||
async function examine(type) { |
|||
try { |
|||
const params = { |
|||
param: { |
|||
id: currId.value, |
|||
type, |
|||
remark: remark1.value ? remark1.value : '', |
|||
}, |
|||
}; |
|||
await examineExperimentation(params); |
|||
getExperimentations(); |
|||
} catch (error) { |
|||
console.log('error', error); |
|||
} |
|||
} |
|||
|
|||
// 解锁申请 |
|||
async function toUnlock() { |
|||
try { |
|||
const params = { |
|||
param: { |
|||
id: currId.value, |
|||
remark: remark2.value ? remark2.value : '', |
|||
}, |
|||
}; |
|||
await applyUnlock(params); |
|||
getExperimentations(); |
|||
} catch (error) { |
|||
console.log('error', error); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.member-list { |
|||
border-radius: 10px 10px 0 0; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
:deep(.table-striped) td { |
|||
background-color: #fafafa; |
|||
} |
|||
|
|||
.action-btn { |
|||
width: 50px !important; |
|||
height: 28px !important; |
|||
font-size: 14px !important; |
|||
padding: 0; |
|||
letter-spacing: 0 !important; |
|||
} |
|||
|
|||
:deep(.ant-table-pagination.ant-pagination) { |
|||
height: 0; |
|||
margin: 0; |
|||
} |
|||
|
|||
.add-btn { |
|||
height: 60px; |
|||
background: #fff; |
|||
padding-left: 36px; |
|||
} |
|||
|
|||
.edit-btn { |
|||
background: #0dc26c; |
|||
border: 0; |
|||
} |
|||
|
|||
.del-btn { |
|||
margin-left: 16px; |
|||
margin-right: 16px; |
|||
background: #ff5353; |
|||
border: 0; |
|||
} |
|||
|
|||
.status-btn { |
|||
width: 28px; |
|||
height: 28px; |
|||
color: #fff; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
line-height: 28px; |
|||
} |
|||
|
|||
:deep(.ant-table-container table > thead > tr:first-child th) { |
|||
min-width: 100px; |
|||
} |
|||
|
|||
:deep(.ant-table-container table > thead > tr:first-child th:first-child) { |
|||
min-width: 70px; |
|||
text-align: center; |
|||
} |
|||
|
|||
:deep(.ant-table-container table > tbody > tr > td:first-child) { |
|||
text-align: center; |
|||
} |
|||
|
|||
:deep(.ant-table-container table > thead > tr:first-child th:last-child) { |
|||
min-width: 160px; |
|||
} |
|||
|
|||
:deep(.ant-btn-primary[disabled]) { |
|||
color: #fff; |
|||
background: #cccccc; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue