需求 ：根据类型，生成不同表单
涉及表单：人事信息 项目信息 实验信息等多个表单
技术涉及：vue-porps antdv
入口文件
判断是由CREAT按钮进入 || 由RowsClick进入
<template>
<ProjectTaskDetail
pageType="project"
:entrance="entrance"
/>
</template>
<script>
import ProjectTaskDetail from '@/components/details/task-details'
export default {
name : 'ProjectDetail' ,
data (){
return {
entrance: '',
}
},
created (){
/* 入口判断 */
let rowsClick = this.$route.params.record
if(rowsClick === undefined){
return this.entrance = false
}else{
return this.entrance = true
}
},
components : {
ProjectTaskDetail
}
}
</script>
组件 【按钮 && 主体】
当entrance为false时，页面数据为空，此时是创建项目，故只保留SUBMIT按钮
当entrance未true时，页面获取数据，此时是修改项目，故去除SUBMIT按钮
代码待优化【此处v-for配合按钮模块化，可以大幅减少代码】
查看完整代码
script
<script>
export default {
name : "TaskDetail" ,
data(){
return{
/* ALL-DATA */
projectData : '',
/* ENTRANCE Copy */
entranceCopy : '',
/* NEW TASK */
taskType : false,
/* LOCK OF DISABLED */
disabled : true,
/* SESSION USER GET */
user : '',
/* DETAILS TABLE TITLE */
title : 'Your ' + this.pageType +' Name',
/* FORM LIST */
form: this.$form.createForm(this, { name: 'dynamic_rule' }),
/* NEW TASK PAGE */
newTaskPage : ''
}
},
props : {
/* DETAILE NAME [DEMO : experiment_detail]*/
pageType: {
type: String,
default() {return null}
},
entrance: {
type: Boolean,
default() {return null}
},
},
created() {
this.entranceCopy = this.entrance
/* ROWCLICK DETAILS DATA */
if(this.$route.params.record !=undefined){
console.log(this.$route.params.record)
console.log(this.pageType)
if(this.entrance == true){
console.log(this.pageType)
let id = {"_id": this.$route.params.record._id}
this.axios({
method: 'post',
url: '/api/'+ this.pageType + '/details',
data : id,
}).then( data => {
console.log(data)
let backData = data.data.data;
sessionStorage.setItem( 'pageTypeData' , JSON.stringify(backData))
this.projectData = JSON.parse(
sessionStorage.getItem( 'pageTypeData' )
)
})
}
}else{
/* SESSION STATUS */
let pageTypeData = JSON.parse(
sessionStorage.getItem('pageTypeData')
)
if(pageTypeData != null){
this.projectData = JSON.parse(
sessionStorage.getItem('pageTypeData')
)
if(this.projectData != null){
this.entranceCopy = true
}
}
}
},
watch: {
},
mounted(){
/* DISABLED STATUS */
switch(this.entrance){
case false :
this.disabled = false
break;
case true :
this.disabled = true
break;
default :
this.disabled = false
}
/* USER INFO GET */
let currentUser = JSON.parse(
sessionStorage.getItem("currentUser")
);
this.user = currentUser.user.basic;
console.log(this.user)
},
methods : {
detailEdit() {
this.disabled = false
this.tableShow.dataEdit = false
this.tableShow.dataSave = true
},
onChange(e) {
console.log(e.target.value)
this.newTaskPage = e.target.value
},
/* ADD NEW TASK */
detailTask() {
/* 优先提示 */
this.$notification.open({
message: 'TIPS',
duration: 3.5,
description:
'Please select the type of new task first, and then follow the prompts to complete the form.',
icon: <a-icon type="smile" style="color: #108ee9" />,
});
this.pageType = 'newTask'
},
/* SUBMIT BTN */
detailSubmit(e) {
this.$notification.open({
message: 'WARNING',
duration: 3.5,
description:
'Uploading information, please do not close the window.',
icon: <a-icon type="info-circle" style="color: #f50" />,
});
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
this.axios({
method: 'post',
url: '/api/'+ this.pageType + '/add',
data : values ,
}).then( data => {
console.log(data)
let status = data.data.status;
let backData = data.data.data;
if(status == 0){
this.$notification.open({
message: 'Successfully',
duration: 3.5,
description:
'The upload is successful, you can now fill in more '+ this.pageType +' information.',
icon: <a-icon type="smile" style="color: #108ee9" />,
});
sessionStorage.setItem( 'pageTypeData' , JSON.stringify(backData))
console.log()
this.projectData = JSON.parse(
sessionStorage.getItem( 'pageTypeData' )
)
console.log(this.projectData)
}else if(status == 1){
this.$notification.open({
message: 'WARNING',
duration: 3.5,
description:
'Duplicate '+ this.pageType +' name, please modify and submit.',
icon: <a-icon type="info-circle" style="color: #f50" />,
});
}else{
this.$notification.open({
message: 'WARNING',
duration: 3.5,
description:
'An unknown error occurred, please try again later or contact the system administrator.',
icon: <a-icon type="info-circle" style="color: #f50" />,
});
}
}).catch( error =>{
this.$notification.open({
message: 'An Error Occurred',
duration: 3.5,
description:
'Please wait a while and try again.',
icon: <a-icon type="info-circle" style="color: #f50" />,
});
});
}
});
},
/* 修改 && 保存 */
detailSave(e) {
this.$notification.open({
message: 'WARNING',
duration: 3.5,
description:
'Uploading information, please do not close the window.',
icon: <a-icon type="info-circle" style="color: #f50" />,
});
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
values["_id"] = this.$route.params.record._id
this.axios({
method: 'post',
url: '/api/'+ this.pageType + '/save',
data : values ,
}).then( data => {
console.log(data)
let status = data.data.status;
let backData = data.data.data;
if(status == 0){
this.$notification.open({
message: 'Successfully',
duration: 3.5,
description:
'The upload is successful, you can now fill in more '+ this.pageType +' information.',
icon: <a-icon type="smile" style="color: #108ee9" />,
});
sessionStorage.setItem( 'pageTypeData' , JSON.stringify(values))
this.projectData = JSON.parse(
sessionStorage.getItem( 'pageTypeData' )
)
console.log(this.projectData)
}else if(status == 1){
this.$notification.open({
message: 'WARNING',
duration: 3.5,
description:
'Duplicate '+ this.pageType +' name, please modify and submit.',
icon: <a-icon type="info-circle" style="color: #f50" />,
});
}else{
this.$notification.open({
message: 'WARNING',
duration: 3.5,
description:
'An unknown error occurred, please try again later or contact the system administrator.',
icon: <a-icon type="info-circle" style="color: #f50" />,
});
}
}).catch( error =>{
});
}
});
},
/* LOCK BTN */
detailLock(e) {
console.log(e.value)
const key = `open${Date.now()}`;
this.$notification.open({
message: 'Warning',
description:
'You are trying to lock an item, please confirm the operation.',
btn: h => {
return h(
'a-button',
{
props: {
type: 'danger',
size: 'small',
},
on: {
click: () => {
let lockStatus = this.projectData.lock
let status = ''
if(lockStatus == false){
status = true
}else{
status = false
}
let data = [{
_id : this.projectData._id ,
status : status ,
}];
let addType = this.taskTypeFoucs
let saveApi = ''
switch(addType) {
/* experiment api */
case 'experiment':
saveApi = '/api/experiment/lock';
break;
/* sample api */
case 'sample':
saveApi = '/api/sample/lock';
break;
/* datanalysis api */
case 'datanalysis':
saveApi = '/api/datanalysis/lock';
/* project save api */
default:
saveApi = '/api/project/lock';
}
this.axios({
method: 'post' ,
url : saveApi ,
data : data
}).then( detailLock => {
console.log(detailLock)
if(detailLock.data.status == 0){
this.$notification.open({
message: 'Successfully',
description:
'The project is successfully locked, and the members participating in the project will receive relevant information prompts after logging in.',
icon: <a-icon type="smile" style="color: #108ee9" />,
});
}else{
this.$notification.open({
message: 'Warning',
description:
'Project lock failed, please try again later.',
});
}
}).catch( error =>{
this.$notification.open({
message: 'An Error Occurred',
description:
'Please wait a while and try again.',
});
});
this.$notification.close(key)
}
},
},
'Sure',
)
},
key,
onClose: close,
});
}
}
}
</script>
接口部分按写了三种方法，一种是最原始的，一种是用Switch做判断，一种是按变量
这个部分可以大批量优化，参照a-button组件封装
数据存入session是暂时防止刷新数据丢失，vuex暂未配置
完整代码
<template>
<div>
<a-form :form="form">
<a-page-header
class="details-header"
@back="() => $router.go(-1)"
:title="title"
>
<!-- BUTTON SHOW FUNCTION -->
<template slot="extra">
<a-form-item>
<span v-if="entranceCopy === false">
<a-button class="button-submit" key="4" type="primary" @click="detailSubmit">
<a-icon type="cloud-upload" />SUBMIT
</a-button>
</span>
<span v-else>
<a-button class="button-newTask" key="7" type="primary" @click="detailTask">
<a-icon type="file-add" />NEW TASK
</a-button>
<a-button class="button-delete" key="6" type="danger">
<a-icon type="delete" />DELETE
</a-button>
<a-button class="button-save" key="5" type="primary" @click="detailSave">
<a-icon type="save" />SAVE
</a-button>
<a-button class="button-edit" key="3" type="primary" @click="detailEdit">
<a-icon type="edit" />EDIT
</a-button>
<!-- <a-button class="button-unlock" key="2">
<a-icon type="unlock" />UNLOCK
</a-button> -->
<a-button class="button-lock" key="1" type="danger" value="lock" @click="detailLock">
<a-icon type="lock" />LOCK
</a-button>
</span>
</a-form-item>
</template>
<!-- 项目 -->
<a-descriptions size="small">
<a-descriptions-item label="Created By">
<a-form-item>
<a-input
class="create-outline"
disabled
v-decorator="[
'created_by',
{
initialValue : user.name
},
]"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="Created Time">
{{projectData.created_time}}
</a-descriptions-item>
</a-descriptions>
</a-page-header>
<!-- 传递页面类型+INFO 即 TITLE -->
<a-descriptions :title="this.pageType.toUpperCase() + ' INFO'" layout="vertical" bordered>
<template v-if="pageType == 'newTask'">
<a-descriptions-item label="TASK TYPE" :span='3'>
<a-radio-group default-value="" button-style="solid" @change="onChange">
<a-radio-button value="newexperiment">
EXPERIMENT
</a-radio-button>
<a-radio-button value="newsample">
SAMPLE
</a-radio-button>
<a-radio-button value="newdatanalysis">
DATA-ANALYSIS
</a-radio-button>
</a-radio-group>
</a-descriptions-item>
<template v-if="newTaskPage == 'newexperiment'">
<a-descriptions-item label="BELONGING PROJECT">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'belonging_project',
{
initialValue : projectData.belonging_project,
},
]"
placeholder="Belonging Project"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="EXPERIMENT NAME">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'experiment_name',
{
initialValue : projectData.experiment_name,
},
]"
placeholder="Experiment Name"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="EXPERIMENT NUMBER">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'experiment_number',
{
initialValue : projectData.experiment_number,
},
]"
placeholder="Experiment Number"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="ASSIGN">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'assign',
{
initialValue : projectData.assign,
},
]"
placeholder="Experiment assign"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="START TIME">
<a-form-item>
<a-date-picker
class="time-style"
show-time
placeholder="Select Time"
:disabled='disabled'
v-decorator="[
'start_time' ,
{
initialValue : projectData.start_time,
},
]"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="LAST OPERATION TIME">
<a-form-item>
<a-input
disabled
v-decorator="[
'last_operation_time',
{
initialValue : projectData.last_operation_time,
}
]"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="STATUS">
<a-select
:disabled="disabled"
:default-value="projectData.status"
v-decorator="['status']"
>
<a-select-option value="Done">
Done
</a-select-option>
<a-select-option value="Abort">
Abort
</a-select-option>
<a-select-option value="Ongoing">
Ongoing
</a-select-option>
<a-select-option value="Suspend">
Suspend
</a-select-option>
<a-select-option value="Normal">
Normal
</a-select-option>
<a-select-option value="Locked">
Locked
</a-select-option>
<a-select-option value="Abandoned">
Abandoned
</a-select-option>
</a-select>
</a-descriptions-item><br><br>
<a-descriptions-item label="NOTES" :span='3'>
<a-form-item>
<a-input
:disabled='disabled'
type="textarea"
v-decorator="['notes',
{initialValue : projectData.notes},
]"
/>
</a-form-item>
</a-descriptions-item>
</template>
<template v-if="newTaskPage == 'newsample'">
<a-descriptions-item label="BELONGING EXPERIMENT">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'experiment_name',
{
initialValue : projectData.experiment_name != undefined ? projectData.experiment_name : '',
},
]"
placeholder="Experiment name"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="Number">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'number',
{
initialValue : projectData.assign,
},
]"
placeholder="Sample Number"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="GROUP">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'group',
{
initialValue : projectData.assign,
},
]"
placeholder="Sample Group"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="SAMPLE NAME">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'sample_name',
{
initialValue : projectData.sample_name,
},
]"
placeholder="Please input sample name"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="SAMPLE TYPE">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'sample_type',
{
initialValue : projectData.sample_type,
},
]"
placeholder="Please input sample type"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="AMOUNT">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'amount',
{
initialValue : projectData.amount,
},
]"
placeholder="Please input sample amount"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="STORAGE WAY">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'storage_way',
{
initialValue : projectData.storage_way,
},
]"
placeholder="Please input sample storage way"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="COLLECT TIME">
<a-form-item>
<a-date-picker
class="time-style"
show-time
placeholder="Select Time"
@change="onChange"
@ok="onOk"
:disabled='disabled'
v-decorator="[
'collect_time' ,
{
initialValue : projectData.start_time,
},
]"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="LAST OPERATION TIME">
<a-form-item>
<a-input
disabled
v-decorator="[
'last_operation_time',
{
initialValue : projectData.last_operation_time,
}
]"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="ASSIGN">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'assign',
{
initialValue : projectData.assign,
},
]"
placeholder="Experiment assign"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="STATUS">
<a-select
:disabled="disabled"
v-decorator="[
'status',
{
rules: [
{
initialValue : projectData.start_time,
},
]
},
]"
>
<a-select-option value="done">
done
</a-select-option>
<a-select-option value="abort">
abort
</a-select-option>
<a-select-option value="ongoing">
ongoing
</a-select-option>
<a-select-option value="suspend">
suspend
</a-select-option>
<a-select-option value="normal">
normal
</a-select-option>
<a-select-option value="locked">
locked
</a-select-option>
<a-select-option value="abandoned">
abandoned
</a-select-option>
</a-select>
</a-descriptions-item><br>
<a-descriptions-item label="NOTES">
<a-form-item>
<a-input
:disabled='disabled'
type="textarea"
v-decorator="['notes',
{initialValue : projectData.notes},
]"
/>
</a-form-item>
</a-descriptions-item>
</template>
<template v-if="newTaskPage == 'newdatanalysis'">
</template>
</template>
<!-- PROJECT MODULE && TEMPLATE -->
<template v-if="pageType == 'project'">
<!-- BEFORE CREATE -->
<a-descriptions-item label="PROJECT NUMBER">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'number',
{initialValue : projectData.number},
]"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="PROJECT NAME">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'project_name',
{
initialValue : projectData.project_name
},
]"
placeholder="Project Name"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="DEPARTMENT">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'department',
{
initialValue : projectData.department,
}
]"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="PROJECT LEADER">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'leader',
{
initialValue : projectData.leader,
},
]"
placeholder="Project Leader"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="PROJECT MANAGER">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'manager',
{
initialValue : projectData.manager,
},
]"
placeholder="Project Manager"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="LAST OPERATION TIME">
<a-form-item>
<a-input
disabled
v-decorator="[
'last_operation_time',
{
initialValue : projectData.last_operation_time,
}
]"
/>
</a-form-item>
</a-descriptions-item>
<!-- CREATED -->
<template v-if="entranceCopy">
<a-descriptions-item label="SHARE INFO">
<a-form-item>
<a-input
:disabled="disabled"
v-decorator="['last_operation_time',
{
initialValue : projectData.last_operation_time
},
]"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="PROJECT START TIME">
<a-form-item>
<a-date-picker
class="time-style"
show-time
placeholder="Select Time"
@change="onChange"
@ok="onOk"
:disabled='disabled'
v-decorator="[
'start_time' ,
{
initialValue : projectData.start_time,
},
]"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="STATUS">
<a-select
:disabled="disabled"
v-decorator="[
'status',
{
rules: [
{
initialValue : projectData.start_time,
},
]
},
]"
>
<a-select-option value="done">
done
</a-select-option>
<a-select-option value="abort">
abort
</a-select-option>
<a-select-option value="ongoing">
ongoing
</a-select-option>
<a-select-option value="suspend">
suspend
</a-select-option>
<a-select-option value="normal">
normal
</a-select-option>
<a-select-option value="locked">
locked
</a-select-option>
<a-select-option value="abandoned">
abandoned
</a-select-option>
</a-select>
</a-descriptions-item>
<a-descriptions-item label="DISCRIPTION">
<a-form-item>
<a-input
type="textarea"
v-decorator="['description',
{initialValue : projectData.description},
]"
/>
</a-form-item>
</a-descriptions-item>
</template>
</template>
<!-- EXPERIMENT MODULE && TEMPLATE -->
<template v-if="pageType == 'experiment'">
<a-descriptions-item label="BELONGING PROJECT">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'belonging_project',
{
initialValue : projectData.belonging_project,
},
]"
placeholder="Belonging Project"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="EXPERIMENT NAME">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'experiment_name',
{
initialValue : projectData.experiment_name,
},
]"
placeholder="Experiment Name"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="EXPERIMENT NUMBER">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'experiment_number',
{
initialValue : projectData.experiment_number,
},
]"
placeholder="Experiment Number"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="ASSIGN">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'assign',
{
initialValue : projectData.assign,
},
]"
placeholder="Experiment assign"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="START TIME">
<a-form-item>
<a-date-picker
class="time-style"
show-time
placeholder="Select Time"
@change="onChange"
@ok="onOk"
:disabled='disabled'
v-decorator="[
'start_time' ,
{
initialValue : projectData.start_time,
},
]"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="LAST OPERATION TIME">
<a-form-item>
<a-input
disabled
v-decorator="[
'last_operation_time',
{
initialValue : projectData.last_operation_time,
}
]"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="STATUS">
<a-select
:disabled="disabled"
:default-value="projectData.status"
v-decorator="['status']"
>
<a-select-option value="Done">
Done
</a-select-option>
<a-select-option value="Abort">
Abort
</a-select-option>
<a-select-option value="Ongoing">
Ongoing
</a-select-option>
<a-select-option value="Suspend">
Suspend
</a-select-option>
<a-select-option value="Normal">
Normal
</a-select-option>
<a-select-option value="Locked">
Locked
</a-select-option>
<a-select-option value="Abandoned">
Abandoned
</a-select-option>
</a-select>
</a-descriptions-item><br><br>
<a-descriptions-item label="NOTES" :span='3'>
<a-form-item>
<a-input
:disabled='disabled'
type="textarea"
v-decorator="['notes',
{initialValue : projectData.notes},
]"
/>
</a-form-item>
</a-descriptions-item>
</template>
<!-- SAMPLE MODULE && TEMPLATE -->
<template v-if="pageType == 'sample'">
<a-descriptions-item label="BELONGING EXPERIMENT">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'experiment_name',
{
initialValue : projectData.experiment_name != undefined ? projectData.experiment_name : '',
},
]"
placeholder="Experiment name"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="Number">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'number',
{
initialValue : projectData.assign,
},
]"
placeholder="Sample Number"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="GROUP">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'group',
{
initialValue : projectData.assign,
},
]"
placeholder="Sample Group"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="SAMPLE NAME">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'sample_name',
{
initialValue : projectData.sample_name,
},
]"
placeholder="Please input sample name"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="SAMPLE TYPE">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'sample_type',
{
initialValue : projectData.sample_type,
},
]"
placeholder="Please input sample type"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="AMOUNT">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'amount',
{
initialValue : projectData.amount,
},
]"
placeholder="Please input sample amount"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="STORAGE WAY">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'storage_way',
{
initialValue : projectData.storage_way,
},
]"
placeholder="Please input sample storage way"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="COLLECT TIME">
<a-form-item>
<a-date-picker
class="time-style"
show-time
placeholder="Select Time"
@change="onChange"
@ok="onOk"
:disabled='disabled'
v-decorator="[
'collect_time' ,
{
initialValue : projectData.start_time,
},
]"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="LAST OPERATION TIME">
<a-form-item>
<a-input
disabled
v-decorator="[
'last_operation_time',
{
initialValue : projectData.last_operation_time,
}
]"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="ASSIGN">
<a-form-item>
<a-input
:disabled='disabled'
v-decorator="[
'assign',
{
initialValue : projectData.assign,
},
]"
placeholder="Experiment assign"
/>
</a-form-item>
</a-descriptions-item>
<a-descriptions-item label="STATUS">
<a-select
:disabled="disabled"
v-decorator="[
'status',
{
rules: [
{
initialValue : projectData.start_time,
},
]
},
]"
>
<a-select-option value="done">
done
</a-select-option>
<a-select-option value="abort">
abort
</a-select-option>
<a-select-option value="ongoing">
ongoing
</a-select-option>
<a-select-option value="suspend">
suspend
</a-select-option>
<a-select-option value="normal">
normal
</a-select-option>
<a-select-option value="locked">
locked
</a-select-option>
<a-select-option value="abandoned">
abandoned
</a-select-option>
</a-select>
</a-descriptions-item><br>
<a-descriptions-item label="NOTES">
<a-form-item>
<a-input
:disabled='disabled'
type="textarea"
v-decorator="['notes',
{initialValue : projectData.notes},
]"
/>
</a-form-item>
</a-descriptions-item>
</template>
</a-descriptions>
</a-form>
</div>
</template>
<script>
export default {
name : "TaskDetail" ,
data(){
return{
/* ALL-DATA */
projectData : '',
/* ENTRANCE Copy */
entranceCopy : '',
/* NEW TASK */
taskType : false,
/* LOCK OF DISABLED */
disabled : true,
/* SESSION USER GET */
user : '',
/* DETAILS TABLE TITLE */
title : 'Your ' + this.pageType +' Name',
/* FORM LIST */
form: this.$form.createForm(this, { name: 'dynamic_rule' }),
/* NEW TASK PAGE */
newTaskPage : ''
}
},
props : {
/* DETAILE NAME [DEMO : experiment_detail]*/
pageType: {
type: String,
default() {return null}
},
entrance: {
type: Boolean,
default() {return null}
},
},
created() {
this.entranceCopy = this.entrance
/* ROWCLICK DETAILS DATA */
if(this.$route.params.record !=undefined){
console.log(this.$route.params.record)
console.log(this.pageType)
if(this.entrance == true){
console.log(this.pageType)
let id = {"_id": this.$route.params.record._id}
this.axios({
method: 'post',
url: '/api/'+ this.pageType + '/details',
data : id,
}).then( data => {
console.log(data)
let backData = data.data.data;
sessionStorage.setItem( 'pageTypeData' , JSON.stringify(backData))
this.projectData = JSON.parse(
sessionStorage.getItem( 'pageTypeData' )
)
})
}
}else{
/* SESSION STATUS */
let pageTypeData = JSON.parse(
sessionStorage.getItem('pageTypeData')
)
if(pageTypeData != null){
this.projectData = JSON.parse(
sessionStorage.getItem('pageTypeData')
)
if(this.projectData != null){
this.entranceCopy = true
}
}
}
},
watch: {
},
mounted(){
/* DISABLED STATUS */
switch(this.entrance){
case false :
this.disabled = false
break;
case true :
this.disabled = true
break;
default :
this.disabled = false
}
/* USER INFO GET */
let currentUser = JSON.parse(
sessionStorage.getItem("currentUser")
);
this.user = currentUser.user.basic;
console.log(this.user)
},
methods : {
detailEdit() {
this.disabled = false
this.tableShow.dataEdit = false
this.tableShow.dataSave = true
},
onChange(e) {
console.log(e.target.value)
this.newTaskPage = e.target.value
},
/* ADD NEW TASK */
detailTask() {
/* 优先提示 */
this.$notification.open({
message: 'TIPS',
duration: 3.5,
description:
'Please select the type of new task first, and then follow the prompts to complete the form.',
icon: <a-icon type="smile" style="color: #108ee9" />,
});
this.pageType = 'newTask'
},
/* SUBMIT BTN */
detailSubmit(e) {
this.$notification.open({
message: 'WARNING',
duration: 3.5,
description:
'Uploading information, please do not close the window.',
icon: <a-icon type="info-circle" style="color: #f50" />,
});
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
this.axios({
method: 'post',
url: '/api/'+ this.pageType + '/add',
data : values ,
}).then( data => {
console.log(data)
let status = data.data.status;
let backData = data.data.data;
if(status == 0){
this.$notification.open({
message: 'Successfully',
duration: 3.5,
description:
'The upload is successful, you can now fill in more '+ this.pageType +' information.',
icon: <a-icon type="smile" style="color: #108ee9" />,
});
sessionStorage.setItem( 'pageTypeData' , JSON.stringify(backData))
console.log()
this.projectData = JSON.parse(
sessionStorage.getItem( 'pageTypeData' )
)
console.log(this.projectData)
}else if(status == 1){
this.$notification.open({
message: 'WARNING',
duration: 3.5,
description:
'Duplicate '+ this.pageType +' name, please modify and submit.',
icon: <a-icon type="info-circle" style="color: #f50" />,
});
}else{
this.$notification.open({
message: 'WARNING',
duration: 3.5,
description:
'An unknown error occurred, please try again later or contact the system administrator.',
icon: <a-icon type="info-circle" style="color: #f50" />,
});
}
}).catch( error =>{
this.$notification.open({
message: 'An Error Occurred',
duration: 3.5,
description:
'Please wait a while and try again.',
icon: <a-icon type="info-circle" style="color: #f50" />,
});
});
}
});
},
/* 修改 && 保存 */
detailSave(e) {
this.$notification.open({
message: 'WARNING',
duration: 3.5,
description:
'Uploading information, please do not close the window.',
icon: <a-icon type="info-circle" style="color: #f50" />,
});
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
values["_id"] = this.$route.params.record._id
this.axios({
method: 'post',
url: '/api/'+ this.pageType + '/save',
data : values ,
}).then( data => {
console.log(data)
let status = data.data.status;
let backData = data.data.data;
if(status == 0){
this.$notification.open({
message: 'Successfully',
duration: 3.5,
description:
'The upload is successful, you can now fill in more '+ this.pageType +' information.',
icon: <a-icon type="smile" style="color: #108ee9" />,
});
sessionStorage.setItem( 'pageTypeData' , JSON.stringify(values))
this.projectData = JSON.parse(
sessionStorage.getItem( 'pageTypeData' )
)
console.log(this.projectData)
}else if(status == 1){
this.$notification.open({
message: 'WARNING',
duration: 3.5,
description:
'Duplicate '+ this.pageType +' name, please modify and submit.',
icon: <a-icon type="info-circle" style="color: #f50" />,
});
}else{
this.$notification.open({
message: 'WARNING',
duration: 3.5,
description:
'An unknown error occurred, please try again later or contact the system administrator.',
icon: <a-icon type="info-circle" style="color: #f50" />,
});
}
}).catch( error =>{
});
}
});
},
/* LOCK BTN */
detailLock(e) {
console.log(e.value)
const key = `open${Date.now()}`;
this.$notification.open({
message: 'Warning',
description:
'You are trying to lock an item, please confirm the operation.',
btn: h => {
return h(
'a-button',
{
props: {
type: 'danger',
size: 'small',
},
on: {
click: () => {
let lockStatus = this.projectData.lock
let status = ''
if(lockStatus == false){
status = true
}else{
status = false
}
let data = [{
_id : this.projectData._id ,
status : status ,
}];
let addType = this.taskTypeFoucs
let saveApi = ''
switch(addType) {
/* experiment api */
case 'experiment':
saveApi = '/api/experiment/lock';
break;
/* sample api */
case 'sample':
saveApi = '/api/sample/lock';
break;
/* datanalysis api */
case 'datanalysis':
saveApi = '/api/datanalysis/lock';
/* project save api */
default:
saveApi = '/api/project/lock';
}
this.axios({
method: 'post' ,
url : saveApi ,
data : data
}).then( detailLock => {
console.log(detailLock)
if(detailLock.data.status == 0){
this.$notification.open({
message: 'Successfully',
description:
'The project is successfully locked, and the members participating in the project will receive relevant information prompts after logging in.',
icon: <a-icon type="smile" style="color: #108ee9" />,
});
}else{
this.$notification.open({
message: 'Warning',
description:
'Project lock failed, please try again later.',
});
}
}).catch( error =>{
this.$notification.open({
message: 'An Error Occurred',
description:
'Please wait a while and try again.',
});
});
this.$notification.close(key)
}
},
},
'Sure',
)
},
key,
onClose: close,
});
}
}
}
</script>
<style scoped lang="less">
@import './css/details.less';
</style>
