feat: 标准查新支持删除并补充查新信息

吴羡

3 天以前 bb0e99f8cd27dd6cbe60db96d0e985aebd6e45ed

 src/views/CNAS/process/method/standardNoveltyRetrieval/component/FormDialog.vue

@@ -1,47 +1,75 @@
<template>
  <div>
    <el-dialog v-model="formDia" title="新增" width="80%" @close="closeDia">
      <el-form ref="form" :model="form" :rules="formRules" label-width="auto">
        <el-button size="small" type="primary" @click="addBtn">添加一条</el-button>
    <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">
            <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="12">
              <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="8">
              <el-form-item :prop="`taskRel.${index}.remark`" :rules="{required: false,message: '请选择备注',trigger: 'change',}" label="备注：">
                <el-select v-model="items.remark" :prop="`taskRel.${index}.remark`"
                           :rules="{required: false,message: '请选择备注',trigger: 'change',}"
                           clearable size="small">
                  <el-option :value="0" label="作废"></el-option>
                  <el-option :value="1" label="替换"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button v-if="index !== 0" circle :icon="$icon('el-icon-delete')" size="small" type="danger" @click="deleteHeaderRow(index)"></el-button>
            </el-col>
            <el-col :span="24">
              <el-divider></el-divider>
            </el-col>
          <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="12">
                <el-form-item :prop="`taskRel.${index}.searchNewTime`" label="查新时间：">
                  <el-date-picker v-model="items.searchNewTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                                  format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" size="small"
                                  style="width: 100%;"></el-date-picker>
                </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="24">
                <el-form-item :prop="`taskRel.${index}.searchNewResult`" label="查新结果：">
                  <el-input v-model="items.searchNewResult" type="textarea" :rows="2" 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 v-if="items.searchNewSource === 3" :span="24">
                <el-form-item :prop="`taskRel.${index}.searchNewWebsite`"
                              :rules="{required: true, message: '请填写具体网址或网站名称', trigger: 'blur'}"
                              label="来源网址/网站名称：">
                  <el-input v-model="items.searchNewWebsite" size="small" placeholder="请输入具体网址或网站名称"></el-input>
                </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">
@@ -54,6 +82,7 @@

<script>
import { addMethodSearchNew } from '@/api/cnas/process/method/standardNoveltyRetrieval'
import useUserStore from '@/store/modules/user'

export default {
  name: 'FormDialog',
@@ -68,6 +97,9 @@
          {
            newMethodName: '',
            newStandardNo: '',
            searchNewTime: '',
            searchNewResult: '',
            searchNewWebsite: '',
            searchNewSource: '',
            remark: '',
          }
@@ -78,6 +110,12 @@
      info: {},
    };
  },
  computed: {
    currentUserName() {
      const user = useUserStore()
      return user.nickName || user.name || user.userName
    }
  },
  // 方法集合
  methods: {
    openDia (row) {
@@ -85,7 +123,7 @@
    },
    // 添加一条
    addBtn() {
      this.form.taskRel.push({ newMethodName: '', newStandardNo:'', searchNewSource: '', remark: ''});
      this.form.taskRel.push({ newMethodName: '', newStandardNo:'', searchNewTime: '', searchNewResult: '', searchNewWebsite: '', searchNewSource: '', remark: ''});
    },
    // 删除一条
    deleteHeaderRow (index) {
@@ -95,7 +133,11 @@
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.editLoad = true
          addMethodSearchNew(this.form.taskRel).then(res => {
          const records = this.form.taskRel.map(item => ({
            ...item,
            searchNewWebsite: item.searchNewSource === 3 ? item.searchNewWebsite : null
          }))
          addMethodSearchNew(records).then(res => {
            this.editLoad = false
            this.$message.success('操作成功')
            this.closeDia()
@@ -120,10 +162,70 @@

<style scoped>
.form-info {
  display: inline-block;
  max-height: 42em;
  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;
}