设备模块业务完善及前序页面优化

吴羡

13 小时以前 c6e96cdb8b1cfb51e9a45bf86c38d1353e983127

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

@@ -1,10 +1,18 @@
<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">
          <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>
@@ -15,7 +23,7 @@
                <el-input v-model="items.newStandardNo" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <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>
@@ -25,23 +33,19 @@
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-col :span="12">
              <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-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-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>
            </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">
@@ -120,10 +124,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;
}