<template>
|
<div>
|
<el-dialog v-model="formDia" title="新增" width="800px" @close="closeDia">
|
<el-form ref="form" :model="form" :rules="formRules" label-width="120px">
|
<div class="form-info">
|
<div v-for="(items,index) in form.taskRel" :key="index" class="record-block">
|
<div class="record-head">
|
<span class="record-title">
|
<span class="record-index">{{ index + 1 }}</span>
|
查新记录
|
</span>
|
<el-button v-if="index !== 0" link type="danger" :icon="$icon('el-icon-delete')"
|
@click="deleteHeaderRow(index)">删除本条</el-button>
|
</div>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item :prop="`taskRel.${index}.methodName`" :rules="{required: true, message: '请填写标准名称',trigger: 'blur',}" label="标准名称：">
|
<el-input v-model="items.methodName" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :prop="`taskRel.${index}.standardNo`" :rules="{required: true,message: '请填写标准号',trigger: 'blur',}" label="标准号：">
|
<el-input v-model="items.standardNo" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :prop="`taskRel.${index}.fileNo`" :rules="{required: true,message: '请填写文件编号',trigger: 'blur',}" label="文件编号：">
|
<el-input v-model="items.fileNo" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :prop="`taskRel.${index}.searchNewTime`" :rules="{required: true,message: '请选择查新日期',trigger: 'change',}" label="查新日期：">
|
<el-date-picker v-model="items.searchNewTime" type="date" value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD" placeholder="请选择日期" size="small"
|
style="width: 100%;" @change="refreshDefaultNextSearchDate(items)"></el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="下次查新日期：">
|
<el-input v-if="isSearchRetired(items.searchNewResult)" model-value="不适用" size="small" disabled />
|
<el-date-picker v-else v-model="items.nextSearchDate" type="date" value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD" placeholder="默认三个月后，可修改" size="small"
|
style="width: 100%;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="查新人：">
|
<el-input :model-value="currentUserName" size="small" disabled></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :prop="`taskRel.${index}.searchNewResult`" :rules="{required: true,message: '请选择查新结果',trigger: 'change',}" label="查新结果：">
|
<el-select v-model="items.searchNewResult" placeholder="请选择" style="width: 100%"
|
@change="handleSearchResultChange(items)">
|
<el-option v-for="result in searchResultOptions" :key="result" :label="result" :value="result" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item :prop="`taskRel.${index}.searchNewSource`" :rules="{required: true,message: '请选择查新记录来源',trigger: 'change',}" label="查新记录来源：">
|
<el-radio-group v-model="items.searchNewSource">
|
<el-radio v-for="source in searchSourceOptions" :key="source.value" :value="source.value">{{ source.label }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col v-if="items.searchNewSource === 3" :span="24">
|
<el-form-item :prop="`taskRel.${index}.searchNewWebsite`"
|
label="其他来源名称：">
|
<el-input v-model="items.searchNewWebsite" size="small" placeholder="选填，无需填写网址"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col v-if="items.searchNewResult === '已修订/有新版本替代'" :span="12">
|
<el-form-item :prop="`taskRel.${index}.newMethodName`" :rules="{required: true,message: '请填写新标准名称',trigger: 'blur',}" label="新标准名称：">
|
<el-input v-model="items.newMethodName" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col v-if="items.searchNewResult === '已修订/有新版本替代'" :span="12">
|
<el-form-item :prop="`taskRel.${index}.newStandardNo`" :rules="{required: true,message: '请填写新标准号',trigger: 'blur',}" label="新标准号：">
|
<el-input v-model="items.newStandardNo" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<div class="add-btn-wrap">
|
<el-button class="add-btn" @click="addBtn">添加一条</el-button>
|
</div>
|
</el-form>
|
<template #footer><span class="dialog-footer">
|
<el-button @click="closeDia">取 消</el-button>
|
<el-button :loading="editLoad" type="primary" @click="handleEdit">提 交</el-button>
|
</span></template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { addMethodSearchNew } from '@/api/cnas/process/method/standardNoveltyRetrieval'
|
import useUserStore from '@/store/modules/user'
|
import { calculateNextSearchDate, isSearchRetired, searchResultOptions, searchSourceOptions } from '../options'
|
|
export default {
|
name: 'FormDialog',
|
// import 引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
// 这里存放数据
|
return {
|
formDia: false,
|
searchResultOptions,
|
searchSourceOptions,
|
form: {
|
taskRel: [
|
{
|
methodName: '',
|
standardNo: '',
|
fileNo: '',
|
searchNewTime: '',
|
nextSearchDate: '',
|
searchNewResult: '',
|
searchNewWebsite: '',
|
searchNewSource: '',
|
newMethodName: '',
|
newStandardNo: '',
|
}
|
]
|
},
|
formRules: {},
|
editLoad: false,
|
info: {},
|
};
|
},
|
computed: {
|
currentUserName() {
|
const user = useUserStore()
|
return user.nickName || user.name || user.userName
|
}
|
},
|
// 方法集合
|
methods: {
|
isSearchRetired,
|
openDia (row) {
|
this.formDia = true
|
},
|
// 添加一条
|
addBtn() {
|
this.form.taskRel.push({ methodName: '', standardNo: '', fileNo: '', searchNewTime: '',
|
nextSearchDate: '', searchNewResult: '', searchNewWebsite: '', searchNewSource: '',
|
newMethodName: '', newStandardNo: '' });
|
},
|
refreshDefaultNextSearchDate(item) {
|
item.nextSearchDate = isSearchRetired(item.searchNewResult) ? null
|
: calculateNextSearchDate(item.searchNewTime)
|
},
|
handleSearchResultChange(item) {
|
if (isSearchRetired(item.searchNewResult)) {
|
item.nextSearchDate = null
|
} else if (!item.nextSearchDate) {
|
this.refreshDefaultNextSearchDate(item)
|
}
|
},
|
// 删除一条
|
deleteHeaderRow (index) {
|
this.form.taskRel.splice(index, 1);
|
},
|
handleEdit () {
|
this.$refs['form'].validate((valid) => {
|
if (valid) {
|
this.editLoad = true
|
const records = this.form.taskRel.map(item => ({
|
...item,
|
searchNewTime: `${item.searchNewTime} 00:00:00`,
|
searchNewWebsite: item.searchNewSource === 3 ? item.searchNewWebsite : null,
|
newMethodName: item.searchNewResult === '已修订/有新版本替代' ? item.newMethodName : null,
|
newStandardNo: item.searchNewResult === '已修订/有新版本替代' ? item.newStandardNo : null
|
}))
|
addMethodSearchNew(records).then(res => {
|
this.editLoad = false
|
this.$message.success('操作成功')
|
this.closeDia()
|
}).catch(err => {
|
console.log('err---', err);
|
this.editLoad = false
|
})
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
closeDia () {
|
this.$refs.form.resetFields();
|
this.formDia = false
|
this.$emit('closeDia');
|
},
|
}
|
};
|
</script>
|
|
<style scoped>
|
.form-info {
|
max-height: 52vh;
|
overflow-y: auto;
|
padding-right: 4px;
|
}
|
|
.record-block {
|
background: #fafafa;
|
border: 1px solid #ebeef5;
|
border-radius: 6px;
|
padding: 14px 16px 0;
|
margin-bottom: 14px;
|
}
|
|
.record-head {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding-bottom: 10px;
|
margin-bottom: 14px;
|
border-bottom: 1px dashed #e4e7ed;
|
}
|
|
.record-title {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
font-size: 14px;
|
font-weight: 600;
|
color: var(--el-text-color-primary);
|
}
|
|
.record-index {
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background: var(--el-color-primary);
|
color: #fff;
|
font-size: 12px;
|
}
|
|
.add-btn-wrap {
|
margin-top: 4px;
|
}
|
|
.add-btn {
|
width: 100%;
|
color: var(--el-color-primary);
|
border: 1px dashed var(--el-color-primary);
|
background: transparent;
|
}
|
|
.add-btn:hover {
|
color: var(--el-color-primary);
|
border-color: var(--el-color-primary);
|
background: var(--el-color-primary-light-9);
|
}
|
|
:deep(.record-block .el-form-item) {
|
margin-bottom: 16px;
|
}
|
|
:deep(.el-dialog) {
|
margin: 6vh auto 50px !important;
|
}
|
</style>
|
