初步完成添加藏品功能

src/views/holding/holding0_Dialog.vue

@@ -26,14 +26,16 @@
             placeholder="请选择"
             style="width: 100%"
           >
-            <el-option v-for="item in numType" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            <el-option
+              v-for="item in numType"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="藏品编号：">
-          <el-input
-            v-model="ruleForm.control"
-            placeholder="请输入"
-          ></el-input>
+          <el-input v-model="ruleForm.num" placeholder="请输入"></el-input>
         </el-form-item>
       </div>
       <div class="row">
@@ -54,7 +56,12 @@
             placeholder="请选择"
             style="width: 100%"
           >
-            <el-option v-for="item in objectType" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            <el-option
+              v-for="item in objectType"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="文物级别：">
@@ -71,36 +78,44 @@
           </el-select>
         </el-form-item>
       </div>
-        <div class="row">
-          <el-form-item label="文物质地：">
-            <el-select
-              v-model="ruleForm.textureType"
-              placeholder="质地类型"
-              style="width: 100%"
-            >
-              <el-option label="单一质地" :value="0"></el-option>
-              <el-option label="复合质地" :value="1"></el-option>
-            </el-select>
-          </el-form-item>
-                    <el-input
-                    style="margin:0 20px"
-            v-model="ruleForm.textureCategory"
-            placeholder="质地类别"
+      <div class="row">
+        <el-form-item label="文物质地：">
+          <el-select
+            v-model="ruleForm.textureType"
+            placeholder="质地类型"
+            style="width: 100%"
+          >
+            <el-option label="单一质地" :value="0"></el-option>
+            <el-option label="复合质地" :value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-input
+          style="margin: 0 20px"
+          v-model="ruleForm.textureCategory"
+          placeholder="质地类别"
+        ></el-input>
+        <el-input v-model="ruleForm.texture" placeholder="质地"></el-input>
+      </div>
+      <div class="row">
+        <el-form-item label="外形尺寸：" prop="length">
+          <el-input
+            v-model="ruleForm.length"
+            placeholder="长（cm）"
+            style="width: 30%"
+          ></el-input>
+          <el-input
+            v-model="ruleForm.width"
+            placeholder="宽（cm）"
+            style="width: 30%; margin: 0 20px"
           ></el-input>
-                      <el-input
-            v-model="ruleForm.texture"
-            placeholder="质地"
+          <el-input
+            v-model="ruleForm.height"
+            placeholder="高（cm）"
+            style="width: 30%"
           ></el-input>
-
-        </div>
-        <div class="row">
-          <el-form-item label="外形尺寸：" prop="length">
-          <el-input v-model="ruleForm.length" placeholder="长（cm）" style="width:30%"></el-input>
-          <el-input v-model="ruleForm.width" placeholder="宽（cm）" style="width:30%;margin:0 20px"></el-input>
-          <el-input v-model="ruleForm.height" placeholder="高（cm）" style="width:30%"></el-input>
-          </el-form-item>
-        </div>
-        <div class="row">
+        </el-form-item>
+      </div>
+      <div class="row">
         <el-form-item label="完残程度：">
           <el-select
             v-model="ruleForm.integrity"
@@ -112,7 +127,7 @@
             <el-option label="残缺" :value="-1"></el-option>
           </el-select>
         </el-form-item>
-                <el-form-item label="保存状态：">
+        <el-form-item label="保存状态：">
           <el-select
             v-model="ruleForm.repair"
             placeholder="请选择"
@@ -124,8 +139,7 @@
             <el-option label="不需修复" :value="0"></el-option>
           </el-select>
         </el-form-item>
-
-        </div>
+      </div>
       <div class="row">
         <el-form-item label="数量类型：">
           <el-select
@@ -139,23 +153,22 @@
         </el-form-item>
         <el-form-item label="具体数量：">
           <el-input
-            v-model="ruleForm.countOnly"
+            v-model="ruleForm.amount"
             placeholder="请输入"
           ></el-input>
         </el-form-item>
       </div>
 
       <div class="row">
-                  <el-form-item label="质量范围：">
-            <el-select
-              v-model="ruleForm.qualityScope"
-              placeholder="请选择"
-              style="width: 100%"
-            >
-              <el-option label="单一质地" :value="0"></el-option>
-              <el-option label="复合质地" :value="1"></el-option>
-            </el-select>
-          </el-form-item>
+        <el-form-item label="质量范围：">
+          <el-select
+            v-model="ruleForm.qualityScope"
+            placeholder="请选择"
+            style="width: 100%"
+          >
+            <el-option v-for="item in qualityRange" :key="item" :label="item" :value="item"></el-option>
+          </el-select>
+        </el-form-item>
 
         <el-form-item label="具体质量：">
           <el-input v-model="ruleForm.quality" placeholder="请输入"></el-input>
@@ -169,14 +182,15 @@
             placeholder="请选择"
             style="width: 100%"
           >
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
+            <el-option v-for="item in checkInScope" :key="item" :label="item" :value="item"></el-option>
           </el-select>
         </el-form-item>
-                <el-form-item label="入藏年度：">
-          <el-input v-model="ruleForm.checkInYear" placeholder="请输入"></el-input>
+        <el-form-item label="入藏年度：">
+          <el-input
+            v-model="ruleForm.checkInYear"
+            placeholder="请输入"
+          ></el-input>
         </el-form-item>
-
       </div>
       <!-- 图片和附件 -->
       <!-- <el-form-item label="藏品图片：">
@@ -218,19 +232,31 @@
         </el-dialog>
       </el-form-item> -->
 
-            <el-form-item label="展示封面：">
-               <Cropper
-                  :width="512"
-                  :height="512"
-                  :fixed-number="[1,1]"
-                  :uploadUrl = "'/exhibition/upload'"
-                  :img="form.pic"
-                  @clearImg="form.pic=''"
-                  @subUploadSucceed="getShopImages"
-              />
-              <span class="wwtxt" style="color:#C0C4CC">建议上传512*512的png格式图片</span>
-            </el-form-item>
-
+      <el-form-item label="藏品图片：">
+        <el-upload
+          class="avatar-uploader"
+          action="http://192.168.0.135:8004/cms/goods/uploadImg"
+          :headers="{
+            token,
+          }"
+          :show-file-list="false"
+          :before-upload="beforefileIdsUpload"
+          :on-success="upload_fileIds_success"
+        >
+          <div v-if="ruleForm.fileIds" class="imgdiv">
+            <img
+              style="width: 100%; height: 100%"
+              :src="'http://192.168.0.135:8004' + ruleForm.fileIds"
+            />
+            <i
+              class="el-icon-circle-close"
+              @click.stop="ruleForm.fileIds = ''"
+            ></i>
+          </div>
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+        <span>支持上传jpg，png格式，最大10M</span>
+      </el-form-item>
       <el-form-item label="上传附件：">
         <el-select v-model="uploading" placeholder="请选择">
           <el-option label="高清图片" value="GQpicture"></el-option>
@@ -283,11 +309,12 @@ export default {
   },
   data () {
     return {
+      token: '',
       ruleForm: {
         age: '', // 年代
         amount: '', // 数量
         amountType: 0, // 数量类型， 0：单件， 1：一套多件
-        checkInScope: '', // 入藏时间范围
+        checkInScope: '2001至今', // 入藏时间范围
         checkInYear: '', // 入藏年底
         dirCode: 'daliCK', // 目录码
         fileIds: '', // 图片类型使用，文件id, 多个以逗号分隔
@@ -303,7 +330,7 @@ export default {
         numTypeId: 2, // 编号类型Id
         primitiveName: '', // 原名
         quality: '', // 具体质量
-        qualityScope: '', // 质量范围
+        qualityScope: '0.01-1kg', // 质量范围
         registerNum: '', // 总登记号
         repair: 3, // 保存状态（修复状态）， 0：不需修复， 1：需要修复，2：继续修复， 3：已修复
         texture: '', // 质地
@@ -311,11 +338,10 @@ export default {
         textureType: 0, // 质地类型，前端输入, 0:单一质地， 1：复活质地
         thumb: '', // 缩略图url
         width: '', // 宽
-        control: '', //
-        category: 1, //
-        countOnly: '', //
-        scope: '' //
+        category: 1 //
       },
+      checkInScope: ['1949.10.1前', '1949.10.1-1965', '1966-1976', '1977-2000', '2001至今'], // 入藏时间范围
+      qualityRange: ['<0.01kg', '0.01-1kg', '1-50kg', '50-100kg', '100-1000kg', '>1000kg'], // 质量范围
       objectType: [], // 文物类型
       numType: [], // 文物编号类型
       rules: {
@@ -350,6 +376,38 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 上传图片
+    beforefileIdsUpload (file) {
+      // console.log(1111, file)
+      // 限制图片大小和格式
+      const sizeOk = file.size / 1024 / 1024 < 10
+      const typeOk = file.type === 'image/png' || file.type === 'image/jpeg'
+
+      return new Promise((resolve, reject) => {
+        if (!typeOk) {
+          this.$message.error('照片格式有误！')
+          reject(file)
+        } else if (!sizeOk) {
+          this.$message.error('照片大小超过10M！')
+          reject(file)
+        } else {
+          this.$message.success('上传成功')
+          resolve(file)
+        }
+      })
+      // if (file.type !== 'image/png' || file.type !== 'image/jpeg') {
+      //   this.$message.error('图片格式不对')
+      // } else if (file.size / 1024 / 1024 > 10) {
+      //   this.$message.error('图片大小超过10M')
+      // } else {
+      //   this.loading = true
+      //   this.$message.success('上传成功')
+      // }
+    },
+    upload_fileIds_success (data) {
+      this.loading = false
+      this.ruleForm.fileIds = data.data.filePath
+    },
     // 点击确定
     async btnOK () {
       console.log(this.ruleForm)
@@ -359,23 +417,12 @@ export default {
     // 点击取消
     cancel () {
       this.$emit('update:dialogFormVisible', false)
-    },
-    // 上传文件和图片
-    onSuccess (response, file, fileList) {
-      console.log('文件上传成功', file, fileList)
-    },
-    handleRemove (file) {
-      console.log(111111, file)
-    },
-    handlePictureCardPreview (file) {
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
-    },
-    handleDownload (file) {
-      console.log(222222222, file)
     }
   },
-  created () {},
+  created () {
+    // 获取用户token
+    this.token = localStorage.getItem('daliCK_token')
+  },
   async mounted () {
     // 获取文物编号类型
     const res = await getGoodsNumType()
@@ -412,4 +459,30 @@ export default {
     border: 3px solid #ccc;
   }
 }
+/deep/.el-upload {
+  border: 1px dashed #000;
+}
+.avatar-uploader .el-upload {
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+/deep/.el-icon-circle-close {
+  font-size: 20px;
+}
+.imgdiv {
+  max-width: 400px;
+}
 </style>