fix(device): 设备档案修订弹窗排版与设备工具明细保持一致

吴羡

8 小时以前 b9207ce7e556de0e912d9b104e163d0ad31ee0c0

fix(device): 设备档案修订弹窗排版与设备工具明细保持一致

- 图片卡片改为统一占位图 + 上传按钮条
- 修复无图片时占位图标不显示
- 弹窗底部按钮改为右对齐

 src/views/CNAS/resourceDemand/device/component/files.vue

@@ -173,9 +173,9 @@
      <el-row>
        <el-col :span="7" style="padding-right: 20px;">
          <!-- 图片 -->
          <el-image v-if="editData.imageUpload" class="img" style="width:100%;height: 320px;"
          <el-image class="img" style="width:100%;height: 320px"
            :src="javaApi + '/img/' + editData.imageUpload">
            <template #error><div  class="image-error" style="width: calc(100% - 2px);
            <template #error><div class="image-error" style="width: calc(100% - 2px);
            height: 318px;
            border-radius: 16px;
            display: flex;
@@ -185,18 +185,13 @@
              <lims-icon name="el-icon-picture-outline" style="font-size:60px;color:var(--lims-text-2);"></lims-icon>
            </div></template>
          </el-image>
          <div v-else class="image-error"
            style="width: calc(100% - 2px);height: 320px;border-radius: 16px;display: flex;align-items: center;justify-content: center;border: 1px solid var(--lims-divider);">
            <lims-icon name="el-icon-picture-outline" style="font-size:60px;color:var(--lims-text-2);"></lims-icon>
          </div>
          <!-- 图片上传 -->
          <div style="margin-top: 12px;text-align: center;">
          <div style="border: 1px solid var(--el-border-color);border-radius:4px;height:32px;line-height:32px;display:flex;justify-content: space-around;font-size: 13px;margin-top:12px;">
            <div v-show="editData.imageName" class="picName">{{ editData.imageName }}</div>
            <el-upload :action="action" :on-success="handleSuccessUpImg2" :show-file-list="false"
              accept='image/jpg,image/jpeg,image/png' :headers="uploadHeader" :before-upload="beforeUpload"
              :on-error="onError" ref='upload' class="avatar-uploader">
              <img v-if="editData.imageUpload" :src="javaApi + '/img/' + editData.imageUpload" class="avatar">
              <lims-icon name="el-icon-plus" v-else class="avatar-uploader-icon"></lims-icon>
              :on-error="onError" ref='upload'>
              <el-button link type="primary" style="height:30px;padding-top:8px">上传</el-button>
            </el-upload>
          </div>
        </el-col>
@@ -366,7 +361,7 @@
      </el-form>
      </div>
      <template #footer><span  class="dialog-footer">
        <el-row>
        <el-row justify="end">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm" :loading="upLoad">确 定</el-button>
        </el-row>
@@ -1087,11 +1082,19 @@
  background: var(--el-color-primary, #409eff);
}

.picName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  width: 120px;
}

.el-image {
  position: relative;
}

.el-icon-picture-outline {
.el-image .el-icon-picture-outline {
  position: absolute;
  left: 50%;
  top: 50%;
@@ -1167,33 +1170,6 @@
.check_data,
.check_input {
  flex-grow: 1;
}

.avatar-uploader .el-upload {
  border: 1px dashed #190505;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.device-main {