<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}.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 :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-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 :value="0">标准网</el-radio>
|
<el-radio :value="1">委托情报</el-radio>
|
<el-radio :value="2">标准数</el-radio>
|
<el-radio :value="3">其他</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :prop="`taskRel.${index}.remark`" :rules="{required: false,message: '请选择备注',trigger: 'change',}" label="备注：">
|
<el-select v-model="items.remark" clearable size="small" style="width: 100%;">
|
<el-option :value="0" label="作废"></el-option>
|
<el-option :value="1" label="替换"></el-option>
|
</el-select>
|
</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'
|
|
export default {
|
name: 'FormDialog',
|
// import 引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
// 这里存放数据
|
return {
|
formDia: false,
|
form: {
|
taskRel: [
|
{
|
newMethodName: '',
|
newStandardNo: '',
|
searchNewSource: '',
|
remark: '',
|
}
|
]
|
},
|
formRules: {},
|
editLoad: false,
|
info: {},
|
};
|
},
|
// 方法集合
|
methods: {
|
openDia (row) {
|
this.formDia = true
|
},
|
// 添加一条
|
addBtn() {
|
this.form.taskRel.push({ newMethodName: '', newStandardNo:'', searchNewSource: '', remark: ''});
|
},
|
// 删除一条
|
deleteHeaderRow (index) {
|
this.form.taskRel.splice(index, 1);
|
},
|
handleEdit () {
|
this.$refs['form'].validate((valid) => {
|
if (valid) {
|
this.editLoad = true
|
addMethodSearchNew(this.form.taskRel).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>
|
