新增页面上传图片功能

imcs-bt-admin/imcs-bt-admin/src/views/zuihou/internetCenter/productionResourcesMgr/components/Edit.vue

@@ -36,6 +36,21 @@
 				</el-select>
 		</template>
       </el-form-item>
+	  <el-form-item label="主图：" prop="imgUrl">
+        <imgUpload
+          :accept="accept"
+          :acceptSize="100 * 1024 * 1024"
+          :auto-upload="true"
+          :data="tenant.imgUrl"
+          :file-list="imgFileList"
+          :show-file-list="false"
+          @setId="setIdAndSubmit"
+          list-type="picture-card"
+          ref="imgFileRef"
+        >
+          <i class="el-icon-plus" />
+        </imgUpload>
+      </el-form-item>	  
 	  <el-form-item label="区域：" prop="areaId">      	
 		<el-cascader 
             size="medium"
@@ -110,6 +125,8 @@
 </template>
 <script>
 import commonApi from '@/api/Common.js'
+// 上传图片组件
+import imgUpload from "@/components/zuihou/imgUpload";
 import db from '@/utils/localstorage'
 // 【生产资源API】-对象
 import productionResourcesMgrApi from "@/api/enterpriseMgr/productionResourcesMgr"
@@ -130,7 +147,7 @@ import {regionData} from 'element-china-area-data'
 
 export default {
   name: 'TenantEdit',
-  components: { SelectTable },
+  components: { SelectTable, imgUpload },
   props: {
     dialogVisible: {
       type: Boolean,
@@ -143,7 +160,14 @@ export default {
   },
   data () {
     return {
+	    accept: "image/jpeg, image/gif, image/png",  // 限制上传图片的类型
+    	imgFileList: [],  // 图片集合
     	selectTableVisible: false,
+		imgFileData: {
+		  bizId: "",
+		  bizType: "MODEL"
+		},
+		imgFileTotal: 0,
     	options: [],
 	  orgTree: [],
       org: this.initOrg(),	
@@ -270,6 +294,7 @@ export default {
 		placeId: '',
 		tenantId: '',
         ip: '',
+		imgUrl: '',
         port: '',
         status: '1',
         remark: '',
@@ -316,9 +341,46 @@ export default {
       this.dicts = dicts;
       // 获取【模型数据】
   		this.getModuleList();
+		
+	  const vm = this; 	
+	  this.imgFileData.bizId = this.tenant.id
+      this.$nextTick(() => {
+        this.$refs.imgFileRef.init({
+          bizId: vm.tenant["id"],
+          bizType: vm.imgFileData.bizType,
+          imageUrl: vm.myAvatar(vm.tenant["imgUrl"]),
+          isSingle: true,
+          isDetail: false
+        });
+      });
     },
     close () {
       this.$emit('close')
+    },
+	setIdAndSubmit(bizId, pic) {
+      const vm = this;
+      vm.successNum += 1;
+      vm.imgFileData.bizId = bizId;
+      vm.tenant.imgUrl = pic;
+      vm.tenant.id = bizId;
+
+      if (vm.successNum === vm.imgFileTotal) {
+        vm.$store.state.hasLoading = false;
+      }
+    },
+	// 初始化，上传图片的数据
+    myAvatar(avatar) {
+      if (!avatar) {
+      	// 默认显示的图片
+        //return require(`@/assets/avatar/default.jpg`);
+        return "";
+      } else {
+        if (avatar.startsWith("http://") || avatar.startsWith("https://")) {
+          return avatar;
+        } else {
+          return require(`@/assets/avatar/${avatar}`);
+        }
+      }
     },
     submitForm () {
       this.$refs.form.validate((valid) => {