2022-02-22

imcs-ui/src/components/zuihou/imgUpload.vue

@@ -1,343 +1,343 @@
-<template>
-  <div>
-    <el-upload
-      :accept="accept"
-      :action="action"
-      :auto-upload="autoUpload"
-      :before-upload="beforeUpload"
-      :class="{ limit: showUploadBtn }"
-      :data="fileOtherData"
-      :file-list="imgFileList"
-      :headers="headers"
-      :limit="limit"
-      :multiple="multiple"
-      :on-change="handleChange"
-      :on-error="handleError"
-      :on-exceed="handleExceed"
-      :on-remove="handleRemove"
-      :ref="uploadRef"
-      :show-file-list="showFileList"
-      class="avatar-uploader"
-      list-type="picture-card"
-    >
-      <img :src="imageUrl" class="avatar" v-if="imageUrl" />
-      <i class="el-icon-plus" v-else />
-    </el-upload>
-    <el-dialog :visible.sync="dialogVisible">
-      <img :src="dialogImageUrl" alt width="100%" />
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import db from "@/utils/localstorage";
-import commonApi from "@/api/Common.js";
-import {Base64} from 'js-base64';
-export default {
-  props: {
-    uploadRef: {
-      type: String,
-      default: "file1"
-    },
-    // 是否多选
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    // 是否自动上传
-    autoUpload: {
-      type: Boolean,
-      default: false
-    },
-    // 是否显示上传列表
-    showFileList: {
-      type: Boolean,
-      default: true
-    },
-    // 最大允许上传个数
-    limit: {
-      type: Number,
-      default: null
-    },
-    // 允许上传的文件类型
-    accept: {
-      type: String,
-      default: "image/jpeg, image/gif, image/png, image/bmp"
-    },
-    // 允许上传的文件大小 单位：字节
-    acceptSize: {
-      type: Number,
-      default: null
-    },
-    // 默认额外上传数据
-    fileOtherData: {
-      type: Object,
-      default: function() {
-        return {
-          bizId: "",
-          bizType: "",
-          isSingle: false
-        };
-      }
-    }
-  },
-  data() {
-    return {
-      imageUrl: "",
-      dialogImageUrl: "",
-      dialogVisible: false,
-      disabled: true,
-      // 默认附件列表
-      imgFileList: [],
-      // 删除附件列表
-      removeFileAry: [],
-      // 新增附件列表
-      addFileAry: [],
-      // 是否上传失败
-      isUploadError: false,
-      fileLength: 0,
-      action: `${process.env.VUE_APP_BASE_API}/file/attachment/upload`
-    };
-  },
-  computed: {
-    showUploadBtn() {
-      return (
-        this.showFileList &&
-        this.addFileAry.length + this.imgFileList.length === this.limit
-      );
-    },
-    headers() {
-      return {
-        token: 'Bearer ' + db.get("TOKEN", ""),
-        tenant: db.get("TENANT", "") || "",
-        Authorization: `Basic ${Base64.encode(`${process.env.VUE_APP_CLIENT_ID}:${process.env.VUE_APP_CLIENT_SECRET}`)}`
-      };
-    }
-  },
-  methods: {
-    // 附件初始化
-    init({ bizId, bizType, imageUrl, isSingle, isDetail }) {
-      const vm = this;
-      vm.fileOtherData.bizId = bizId;
-      vm.fileOtherData.bizType = bizType;
-      vm.fileOtherData.isSingle = isSingle || false;
-      // vm.imgFileList = []
-      vm.imgFileList.length = 0;
-      vm.removeFileAry = [];
-      vm.addFileAry = [];
-      vm.imageUrl = imageUrl;
-      vm.isUploadError = false;
-      if (isDetail) {
-        vm.getAttachment();
-      }
-    },
-    // 附件上传前触发
-    beforeUpload() {
-      const vm = this;
-      vm.$store.state.hasLoading = true;
-    },
-    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
-    handleChange(file, fileList) {
-      const vm = this;
-      if (file.response) {
-        if (file.response.isSuccess) {
-          const remoteFile = file.response.data;
-          vm.fileOtherData.bizId = remoteFile.bizId;
-          vm.imageUrl = remoteFile.url;
-          vm.$emit("setId", remoteFile.bizId, remoteFile.url);
-        } else {
-          vm.$message.error(file.response.msg);
-          vm.isUploadError = false;
-        }
-      } else {
-        if (vm.acceptSize) {
-          const isLtAcceptSize = file.size > vm.acceptSize;
-          if (isLtAcceptSize) {
-            setTimeout(() => {
-              vm.$message.error(
-                "只能上传" +
-                  vm.renderSize(vm.acceptSize) +
-                  "的文件!已为您过滤文件：" +
-                  file.name
-              );
-            }, 10);
-
-            fileList.forEach((item, index) => {
-              if (item.uid === file.uid) {
-                fileList.splice(index, 1);
-              }
-            });
-          } else {
-            if (!vm.isUploadError) {
-              vm.addFileAry.push(file.name);
-            }
-            vm.isUploadError = false;
-          }
-        }
-      }
-      vm.$store.state.hasLoading = false;
-    },
-    renderSize(value) {
-      if (null == value || value == "") {
-        return "0 B";
-      }
-      const unitArr = new Array(
-        "B",
-        "KB",
-        "MB",
-        "GB",
-        "TB",
-        "PB",
-        "EB",
-        "ZB",
-        "YB"
-      );
-      let index = 0;
-      let srcsize = parseFloat(value);
-      index = Math.floor(Math.log(srcsize) / Math.log(1024));
-      let size = srcsize / Math.pow(1024, index);
-      size = size.toFixed(2);
-      if (unitArr[index]) {
-        return size + unitArr[index];
-      }
-      return "文件太大";
-    },
-    // 附件上传失败
-    handleError() {
-      const vm = this;
-      vm.$message.error("附件上传失败，请重试");
-      vm.isUploadError = true;
-      vm.$store.state.hasLoading = false;
-      if (!vm.showFileList) {
-        vm.imageUrl = "";
-      }
-    },
-    // 查询附件
-    async getAttachment() {
-      const vm = this;
-      const res = await commonApi.getAttachment({
-        bizIds: vm.fileOtherData.bizId,
-        bizTypes: vm.fileOtherData.bizType
-      });
-      if (res.status === 200) {
-        if (res.data.code === 0) {
-          if (res.data.data.length > 0) {
-            let data = res.data.data[0].list;
-            data.map(item => {
-              item.name = item.submittedFileName;
-              if (!vm.showFileList) {
-                vm.imageUrl = item.url;
-              }
-            });
-            vm.imgFileList = data;
-            vm.$emit("fileLengthVaild", vm.imgFileList.length);
-          }
-        }
-      }
-    },
-    // 删除附件回调
-    handleRemove(file) {
-      const vm = this;
-      if (file.bizId) {
-        vm.removeFileAry.push(file.id);
-        vm.imgFileList.map((item, index) => {
-          if (item.bizId === file.bizId) {
-            vm.imgFileList.splice(index, 1);
-            return false;
-          }
-        });
-      } else {
-        vm.addFileAry.map((item, index) => {
-          if (item === file.name) {
-            vm.addFileAry.splice(index, 1);
-            return false;
-          }
-        });
-      }
-    },
-    // 文件超出个数限制时的钩子
-    handleExceed() {
-      const vm = this;
-      vm.$message("当前最多允许上传" + vm.limit + "张图片");
-    },
-    // 返回附件新增及删除数组长度
-    handleBack() {
-      const vm = this;
-      return {
-        addLength: vm.addFileAry.length,
-        removeLength: vm.removeFileAry.length
-      };
-    },
-    // 服务器删除附件
-    async deleteAttachment() {
-      const vm = this;
-      const res = await commonApi.deleteAttachment({
-        ids: vm.removeFileAry
-      });
-      if (res.status === 200) {
-        if (res.data.code !== 0) {
-          vm.$message(res.data.msg);
-        }
-      }
-    },
-    // 附件上传服务器触发方法
-    submitFile(bizId, bizType, isSingle) {
-      const vm = this;
-      vm.fileOtherData.bizId = bizId;
-      vm.fileOtherData.bizType = bizType;
-      vm.fileOtherData.isSingle = isSingle;
-      if (!vm.showFileList) {
-        const length = vm.$refs[vm.uploadRef].uploadFiles.length - 1;
-        vm.$refs[vm.uploadRef].uploadFiles = [
-          vm.$refs[vm.uploadRef].uploadFiles[length]
-        ];
-        vm.imgFileList.map(item => {
-          vm.removeFileAry.push(item.id);
-        });
-        if (vm.imgFileList.length > 0) {
-          vm.deleteAttachment();
-        }
-      }
-      vm.$refs[vm.uploadRef].submit();
-      vm.$store.state.hasLoading = false;
-      vm.addFileAry = [];
-    },
-    // 服务器删除附件
-    async deleteAttachmentByIds(ids) {
-      const vm = this;
-      const res = await commonApi.deleteAttachment({
-        ids: ids
-      });
-      if (res.status === 200) {
-        if (res.data.code !== 0) {
-          vm.$message(res.data.msg);
-        } else {
-          vm.removeFileAry = [];
-        }
-      }
-    }
-  }
-};
-</script>
-<style lang="scss" scoped>
-.avatar {
-  width: 100%;
-  height: 100%;
-}
-/deep/.el-form-item__content {
-  line-height: 0;
-}
-/deep/.el-upload-list--picture-card .el-upload-list__item {
-  margin: 0 8px 0 0;
-}
-/deep/.el-upload--picture-card,
-/deep/.el-upload-list--picture-card .el-upload-list__item {
-  width: 128px;
-  height: 128px;
-}
-.limit {
-  /deep/.el-upload--picture-card {
-    display: none;
-  }
-}
-</style>
+<template>
+  <div>
+    <el-upload
+      :accept="accept"
+      :action="action"
+      :auto-upload="autoUpload"
+      :before-upload="beforeUpload"
+      :class="{ limit: showUploadBtn }"
+      :data="fileOtherData"
+      :file-list="imgFileList"
+      :headers="headers"
+      :limit="limit"
+      :multiple="multiple"
+      :on-change="handleChange"
+      :on-error="handleError"
+      :on-exceed="handleExceed"
+      :on-remove="handleRemove"
+      :ref="uploadRef"
+      :show-file-list="showFileList"
+      class="avatar-uploader"
+      list-type="picture-card"
+    >
+      <img :src="imageUrl" class="avatar" v-if="imageUrl" />
+      <i class="el-icon-plus" v-else />
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img :src="dialogImageUrl" alt width="100%" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import db from "@/utils/localstorage";
+import commonApi from "@/api/Common.js";
+import {Base64} from 'js-base64';
+export default {
+  props: {
+    uploadRef: {
+      type: String,
+      default: "file1"
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    // 是否自动上传
+    autoUpload: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示上传列表
+    showFileList: {
+      type: Boolean,
+      default: true
+    },
+    // 最大允许上传个数
+    limit: {
+      type: Number,
+      default: null
+    },
+    // 允许上传的文件类型
+    accept: {
+      type: String,
+      default: "image/jpeg, image/gif, image/png, image/bmp"
+    },
+    // 允许上传的文件大小 单位：字节
+    acceptSize: {
+      type: Number,
+      default: null
+    },
+    // 默认额外上传数据
+    fileOtherData: {
+      type: Object,
+      default: function() {
+        return {
+          bizId: "",
+          bizType: "",
+          isSingle: false
+        };
+      }
+    }
+  },
+  data() {
+    return {
+      imageUrl: "",
+      dialogImageUrl: "",
+      dialogVisible: false,
+      disabled: true,
+      // 默认附件列表
+      imgFileList: [],
+      // 删除附件列表
+      removeFileAry: [],
+      // 新增附件列表
+      addFileAry: [],
+      // 是否上传失败
+      isUploadError: false,
+      fileLength: 0,
+      action: `${process.env.VUE_APP_BASE_API}/file/attachment/upload`
+    };
+  },
+  computed: {
+    showUploadBtn() {
+      return (
+        this.showFileList &&
+        this.addFileAry.length + this.imgFileList.length === this.limit
+      );
+    },
+    headers() {
+      return {
+        token: 'Bearer ' + db.get("TOKEN", ""),
+        tenant: db.get("TENANT", "") || "",
+        Authorization: `Basic ${Base64.encode(`${process.env.VUE_APP_CLIENT_ID}:${process.env.VUE_APP_CLIENT_SECRET}`)}`
+      };
+    }
+  },
+  methods: {
+    // 附件初始化
+    init({ bizId, bizType, imageUrl, isSingle, isDetail }) {
+      const vm = this;
+      vm.fileOtherData.bizId = bizId;
+      vm.fileOtherData.bizType = bizType;
+      vm.fileOtherData.isSingle = isSingle || false;
+      // vm.imgFileList = []
+      vm.imgFileList.length = 0;
+      vm.removeFileAry = [];
+      vm.addFileAry = [];
+      vm.imageUrl = imageUrl;
+      vm.isUploadError = false;
+      if (isDetail) {
+        vm.getAttachment();
+      }
+    },
+    // 附件上传前触发
+    beforeUpload() {
+      const vm = this;
+      vm.$store.state.hasLoading = true;
+    },
+    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+    handleChange(file, fileList) {
+      const vm = this;
+      if (file.response) {
+        if (file.response.isSuccess) {
+          const remoteFile = file.response.data;
+          vm.fileOtherData.bizId = remoteFile.bizId;
+          vm.imageUrl = remoteFile.url;
+          vm.$emit("setId", remoteFile.bizId, remoteFile.url,  remoteFile);
+        } else {
+          vm.$message.error(file.response.msg);
+          vm.isUploadError = false;
+        }
+      } else {
+        if (vm.acceptSize) {
+          const isLtAcceptSize = file.size > vm.acceptSize;
+          if (isLtAcceptSize) {
+            setTimeout(() => {
+              vm.$message.error(
+                "只能上传" +
+                  vm.renderSize(vm.acceptSize) +
+                  "的文件!已为您过滤文件：" +
+                  file.name
+              );
+            }, 10);
+
+            fileList.forEach((item, index) => {
+              if (item.uid === file.uid) {
+                fileList.splice(index, 1);
+              }
+            });
+          } else {
+            if (!vm.isUploadError) {
+              vm.addFileAry.push(file.name);
+            }
+            vm.isUploadError = false;
+          }
+        }
+      }
+      vm.$store.state.hasLoading = false;
+    },
+    renderSize(value) {
+      if (null == value || value == "") {
+        return "0 B";
+      }
+      const unitArr = new Array(
+        "B",
+        "KB",
+        "MB",
+        "GB",
+        "TB",
+        "PB",
+        "EB",
+        "ZB",
+        "YB"
+      );
+      let index = 0;
+      let srcsize = parseFloat(value);
+      index = Math.floor(Math.log(srcsize) / Math.log(1024));
+      let size = srcsize / Math.pow(1024, index);
+      size = size.toFixed(2);
+      if (unitArr[index]) {
+        return size + unitArr[index];
+      }
+      return "文件太大";
+    },
+    // 附件上传失败
+    handleError() {
+      const vm = this;
+      vm.$message.error("附件上传失败，请重试");
+      vm.isUploadError = true;
+      vm.$store.state.hasLoading = false;
+      if (!vm.showFileList) {
+        vm.imageUrl = "";
+      }
+    },
+    // 查询附件
+    async getAttachment() {
+      const vm = this;
+      const res = await commonApi.getAttachment({
+        bizIds: vm.fileOtherData.bizId,
+        bizTypes: vm.fileOtherData.bizType
+      });
+      if (res.status === 200) {
+        if (res.data.code === 0) {
+          if (res.data.data.length > 0) {
+            let data = res.data.data[0].list;
+            data.map(item => {
+              item.name = item.submittedFileName;
+              if (!vm.showFileList) {
+                vm.imageUrl = item.url;
+              }
+            });
+            vm.imgFileList = data;
+            vm.$emit("fileLengthVaild", vm.imgFileList.length);
+          }
+        }
+      }
+    },
+    // 删除附件回调
+    handleRemove(file) {
+      const vm = this;
+      if (file.bizId) {
+        vm.removeFileAry.push(file.id);
+        vm.imgFileList.map((item, index) => {
+          if (item.bizId === file.bizId) {
+            vm.imgFileList.splice(index, 1);
+            return false;
+          }
+        });
+      } else {
+        vm.addFileAry.map((item, index) => {
+          if (item === file.name) {
+            vm.addFileAry.splice(index, 1);
+            return false;
+          }
+        });
+      }
+    },
+    // 文件超出个数限制时的钩子
+    handleExceed() {
+      const vm = this;
+      vm.$message("当前最多允许上传" + vm.limit + "张图片");
+    },
+    // 返回附件新增及删除数组长度
+    handleBack() {
+      const vm = this;
+      return {
+        addLength: vm.addFileAry.length,
+        removeLength: vm.removeFileAry.length
+      };
+    },
+    // 服务器删除附件
+    async deleteAttachment() {
+      const vm = this;
+      const res = await commonApi.deleteAttachment({
+        ids: vm.removeFileAry
+      });
+      if (res.status === 200) {
+        if (res.data.code !== 0) {
+          vm.$message(res.data.msg);
+        }
+      }
+    },
+    // 附件上传服务器触发方法
+    submitFile(bizId, bizType, isSingle) {
+      const vm = this;
+      vm.fileOtherData.bizId = bizId;
+      vm.fileOtherData.bizType = bizType;
+      vm.fileOtherData.isSingle = isSingle;
+      if (!vm.showFileList) {
+        const length = vm.$refs[vm.uploadRef].uploadFiles.length - 1;
+        vm.$refs[vm.uploadRef].uploadFiles = [
+          vm.$refs[vm.uploadRef].uploadFiles[length]
+        ];
+        vm.imgFileList.map(item => {
+          vm.removeFileAry.push(item.id);
+        });
+        if (vm.imgFileList.length > 0) {
+          vm.deleteAttachment();
+        }
+      }
+      vm.$refs[vm.uploadRef].submit();
+      vm.$store.state.hasLoading = false;
+      vm.addFileAry = [];
+    },
+    // 服务器删除附件
+    async deleteAttachmentByIds(ids) {
+      const vm = this;
+      const res = await commonApi.deleteAttachment({
+        ids: ids
+      });
+      if (res.status === 200) {
+        if (res.data.code !== 0) {
+          vm.$message(res.data.msg);
+        } else {
+          vm.removeFileAry = [];
+        }
+      }
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.avatar {
+  width: 100%;
+  height: 100%;
+}
+/deep/.el-form-item__content {
+  line-height: 0;
+}
+/deep/.el-upload-list--picture-card .el-upload-list__item {
+  margin: 0 8px 0 0;
+}
+/deep/.el-upload--picture-card,
+/deep/.el-upload-list--picture-card .el-upload-list__item {
+  width: 128px;
+  height: 128px;
+}
+.limit {
+  /deep/.el-upload--picture-card {
+    display: none;
+  }
+}
+</style>

imcs-ui/src/views/zuihou/resourceProductMgr/areaMgr/components/Edit.vue

@@ -1,282 +1,338 @@
-<template>
-  <el-dialog 
-  	:close-on-click-modal="false" 
-  	:close-on-press-escape="false" 
-  	:title="title" 
-  	:append-to-body="true"
-  	:visible.sync="isVisible" 
-  	:width="width" 
-  	top="50px"
-  >
-    <el-form ref="form" :model="tenant" :rules="rules" label-position="right" label-width="130px">
-      <el-form-item :label='$t("resource.table.area.name")+"："' prop="name">
-          <el-input v-model="tenant.name" :placeholder='$t("common.pleaseEnter")'/>
-      </el-form-item>
-      <el-form-item :label='$t("resource.table.area.status")' prop="status">
-        <template>
-				  <el-radio v-model="tenant.status" label="1">{{$t("common.status.valid")}}</el-radio>
-				  <el-radio v-model="tenant.status" label="0">{{$t("common.status.invalid")}}</el-radio>
-				</template>
-      </el-form-item>
-      <el-form-item :label='$t("resource.table.area.layoutMap")+"："' prop="layoutMap">          
-          <fileUpload :acceptSize="5*1024*1024" :auto-upload="false" :limit="1" :fileOtherData="this.fileData" @fileLengthVaild="fileLengthVaild" @setId="setIdAndSubmit" ref="fileRef">              
-              <el-button size="small" slot="trigger" type="primary" >选取文件</el-button>              
-              <div class="el-upload__tip" slot="tip">文件不超过5MB</div>
-          </fileUpload>
-          <div class="img-wrapper" v-if="tenant.imgUrl" style="margin:5px;">
-	          		<el-image :src="tenant.imgUrl" fit="cover" />
-	        </div> 
-      </el-form-item>
-      <el-form-item :label='$t("resource.table.area.remark")+"："' prop="remark">
-      	<el-input v-model="tenant.remark" type="textarea" :rows="3" style="width: 100%;"/>
-      </el-form-item>
-    </el-form>
-    <div slot="footer" class="dialog-footer">
-      <el-button plain type="warning" @click="isVisible = false">{{ $t('common.cancel') }}</el-button>
-      <el-button plain type="primary" :disabled="confirmDisabled" @click="submitForm" v-loading.fullscreen.lock="loading">{{ $t('common.confirm') }}</el-button>
-    </div>
-  </el-dialog>
-</template>
-<script>
-// 【区域管理】-API
-import areaMgrApi from "@/api/resourceProductMgr/areaMgr"
-import fileUpload from "@/components/zuihou/fileUpload"
-import elDragDialog from '@/directive/el-drag-dialog'
-
-export default {
-  name: 'TenantEdit',
-  directives: {elDragDialog, fileUpload},
-  components: { fileUpload },
-  props: {
-    dialogVisible: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  data () {
-    return {
-      type: 'add',
-      loading: false,
-      tenant: this.initTenant(),      
-      screenWidth: 0,
-      width: this.initWidth(),
-      accept: "image/jpeg, image/gif, image/png",
-      fileLength: 0,
-      fileId: "",
-      fileData: {},
-      formData: {},
-      confirmDisabled: false,
-      dicts:{
-        NATION: {}
-      },
-      roles: [],
-      rules: {
-        name: [
-        	{ required: true, message: this.$t("rules.require"), trigger: 'blur' }
-        ],
-        fileLength: {          
-          required: true,
-          trigger: "change",
-          validator: (rule, value, callback) => {
-            const vm = this;
-            if (vm.fileLength === 0) {
-              callback(new Error("请上传文件"))
-            } else if (vm.fileLength > 1) {
-              callback(new Error("一次性只能上传1个文件"))
-            } else {
-              callback()
-            }
-          }
-        }
-      }
-    }
-  },
-  computed: {
-    isVisible: {
-      get () {
-        return this.dialogVisible
-      },
-      set () {
-        this.close()
-        this.reset()
-      }
-    }
-  },
-  mounted () {
-    window.onresize = () => {
-      return (() => {
-        this.width = this.initWidth()
-      })()
-    } 
-  },
-  methods: {
-    initTenant () {
-      return {
-        id: '',
-        name: '',
-        layoutMap: '',
-        status: '1',
-        remark:'',
-      }
-    },
-    initWidth () {
-      this.screenWidth = document.body.clientWidth
-      if (this.screenWidth < 991) {
-        return '90%'
-      } else if (this.screenWidth < 1400) {
-        return '45%'
-      } else {
-        return '800px'
-      }
-    },
-    // 附件长度校验
-    fileLengthVaild (data) {
-      const vm = this;
-      vm.fileLength = data || 0;
-    },
-    setTenant (val, dicts) {
-    	if(val){        
-    		this.tenant = { ...val }        
-    	}
-      // 字典表
-      this.dicts = dicts     
-    },
-    setFileData (val) {
-    	if(val){        
-    		this.fileData = { ...val }        
-    	}
-      this.fileData.bizType = "TRAY"
-      this.fileData.isSingle = true
-    },
-    close () {
-      this.$emit('close')
-    },
-    reset () {
-      // 先清除校验，再清除表单，不然有奇怪的bug
-      this.$refs.form.clearValidate()
-      this.$refs.form.resetFields()
-      this.tenant = this.initTenant()
-      this.$refs.fileRef.init({
-        id: "",
-        bizId: "",
-        bizType: "",
-      })
-    },
-    setIdAndSubmit (isUploadCompleted, res) {
-      if (isUploadCompleted) {
-        this.loading = false
-        this.confirmDisabled = false
-        this.isVisible = false
-        this.$message({
-          message: this.$t('tips.createSuccess'),
-          type: 'success'
-        })        
-        this.$emit('success') 
-        this.tenant.layoutMap = res.data.id
-        this.formData = JSON.parse(localStorage.getItem("formData"))        
-        this.formData.layoutMap = res.data.id
-        if (this.type === 'add') {            
-            this.save(this.formData)
-          } else {
-            this.update(this.formData)
-        }
-        localStorage.removeItem("formData");
-      }      
-    },
-    editSubmit () {      
-      this.disabled = true
-      this.loading = true
-      let id =  this.tenant.layoutMap!=null? this.tenant.layoutMap: ""
-      this.$refs.fileRef.submitFile(id, this.tenant.id, 'TRAY')
-    },
-    submitForm () {
-      this.$refs.form.validate((valid) => {
-        if (valid) {          
-          this.formData = this.tenant 
-          localStorage.setItem("formData", JSON.stringify(this.formData));         
-          this.confirmDisabled = true
-          this.editSubmit()
-          // 后续提交处理          
-        } else {
-          return false
-        }
-      })
-    },
-    save (formData) {
-      areaMgrApi.save(formData)
-        .then((response) => {
-          const res = response.data
-          if (res.isSuccess) {
-            this.isVisible = false
-            this.$message({
-              message: this.$t('tips.createSuccess'),
-              type: 'success'
-            })
-            // 通知列表
-	          this.$emit("success");
-	          // 通知列表-并关闭弹出框
-	          this.$emit("close");
-          }
-        }).finally(() => {
-          this.confirmDisabled = false
-          return true
-        })
-    },
-    update (formData) {
-      areaMgrApi.update(formData)
-        .then((response) => {
-          const res = response.data
-          if (res.isSuccess) {
-            this.isVisible = false
-            this.$message({
-              message: this.$t('tips.updateSuccess'),
-              type: 'success'
-            })
-            // 通知列表
-	          this.$emit("success")
-	          // 通知列表-并关闭弹出框
-	          this.$emit("close")
-          }
-        }).finally(() => {
-          this.confirmDisabled = false
-          return true
-        })
-    }
-
-  }
-}
-</script>
-<style lang="scss" >
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  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: 100px;
-  height: 100px;
-  line-height: 100px;
-  text-align: center;
-}
-.avatar {
-  width: 100px;
-  height: 100px;
-  display: block;
-}
-.checkUsed{
-	display: inline-block;
-	margin-left: 10px;
-	color: #1890ff;
-}
-</style>
+<template>
+  <el-dialog 
+  	:close-on-click-modal="false" 
+  	:close-on-press-escape="false" 
+  	:title="title" 
+  	:append-to-body="true"
+  	:visible.sync="isVisible" 
+  	:width="width" 
+  	top="50px"
+  >
+    <el-form ref="form" :model="tenant" :rules="rules" label-position="right" label-width="130px">
+      <el-form-item :label='$t("resource.table.area.name")+"："' prop="name">
+          <el-input v-model="tenant.name" :placeholder='$t("common.pleaseEnter")'/>
+      </el-form-item>
+      <el-form-item :label='$t("resource.table.area.status")' prop="status">
+        <template>
+				  <el-radio v-model="tenant.status" label="1">{{$t("common.status.valid")}}</el-radio>
+				  <el-radio v-model="tenant.status" label="0">{{$t("common.status.invalid")}}</el-radio>
+				</template>
+      </el-form-item>
+      <el-form-item :label='$t("resource.table.area.layoutMap")+"："' prop="layoutMap">
+        <imgUpload
+          :accept="accept"
+          :acceptSize="5 * 1024 * 1024"
+          :auto-upload="true"
+          :data="tenant.layoutMap"
+          :file-list="imgFileList"
+          :show-file-list="false"
+          :fileOtherData="imgFileData"
+          :limit="1"
+          @setId="setIdAndSubmit"
+          list-type="picture-card"
+          ref="imgFileRef"
+        >
+          <i class="el-icon-plus" />
+        </imgUpload>
+      </el-form-item>
+      <!--<el-form-item :label='$t("resource.table.area.layoutMap")+"："' prop="layoutMap">          
+          <fileUpload :acceptSize="5*1024*1024" :auto-upload="false" :limit="1" :fileOtherData="fileData" @fileLengthVaild="fileLengthVaild" @setId="setIdAndSubmit" ref="fileRef">              
+              <el-button size="small" slot="trigger" type="primary" >选取文件</el-button>              
+              <div class="el-upload__tip" slot="tip">文件不超过5MB</div>
+          </fileUpload>
+          <div class="img-wrapper" v-if="tenant.imgUrl" style="margin:5px;">
+	          		<el-image :src="tenant.imgUrl" fit="cover" />
+	        </div> 
+      </el-form-item>-->
+      <el-form-item :label='$t("resource.table.area.remark")+"："' prop="remark">
+      	<el-input v-model="tenant.remark" type="textarea" :rows="3" style="width: 100%;"/>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button plain type="warning" @click="isVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button plain type="primary" :disabled="confirmDisabled" @click="submitForm" v-loading.fullscreen.lock="loading">{{ $t('common.confirm') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+// 【区域管理】-API
+import areaMgrApi from "@/api/resourceProductMgr/areaMgr";
+// 图片上传-组件
+import imgUpload from "@/components/zuihou/imgUpload";
+import fileUpload from "@/components/zuihou/fileUpload"
+import elDragDialog from '@/directive/el-drag-dialog'
+
+export default {
+  name: 'TenantEdit',
+  directives: {elDragDialog, fileUpload},
+  components: { fileUpload, imgUpload },
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      type: 'add',
+      loading: false,
+      tenant: this.initTenant(),      
+      screenWidth: 0,
+      width: this.initWidth(),
+      accept: "image/jpeg, image/gif, image/png",
+      fileLength: 0,
+      fileId: "",
+      fileData: {},
+      formData: {},
+      imgFileList: [],  // 图片集合
+      imgFileData: {
+        bizId: "",
+        bizType: "AREA_LINE"
+      },
+      // 图片文件总数
+      imgFileTotal: 0,
+      // 上传成功数
+      successNum: 0,
+      confirmDisabled: false,
+      dicts:{
+        NATION: {}
+      },
+      roles: [],
+      rules: {
+        name: [
+        	{ required: true, message: this.$t("rules.require"), trigger: 'blur' }
+        ],
+        fileLength: {          
+          required: true,
+          trigger: "change",
+          validator: (rule, value, callback) => {
+            const vm = this;
+            if (vm.fileLength === 0) {
+              callback(new Error("请上传文件"))
+            } else if (vm.fileLength > 1) {
+              callback(new Error("一次性只能上传1个文件"))
+            } else {
+              callback()
+            }
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    isVisible: {
+      get () {
+        return this.dialogVisible
+      },
+      set () {
+        this.close()
+        this.reset()
+      }
+    }
+  },
+  mounted () {
+    window.onresize = () => {
+      return (() => {
+        this.width = this.initWidth()
+      })()
+    } 
+  },
+  methods: {
+    initTenant () {
+      return {
+        id: '',
+        name: '',
+        layoutMap: '',
+        status: '1',
+        remark:'',
+      }
+    },
+    initWidth () {
+      this.screenWidth = document.body.clientWidth
+      if (this.screenWidth < 991) {
+        return '90%'
+      } else if (this.screenWidth < 1400) {
+        return '45%'
+      } else {
+        return '800px'
+      }
+    },
+    // 附件长度校验
+    fileLengthVaild (data) {
+      const vm = this;
+      vm.fileLength = data || 0;
+    },
+    setTenant (val, dicts) {
+    	if(val){        
+    		this.tenant = { ...val }   
+    		// 附件显示
+    		this.imgFileList = [{url: val.imgUrl}];
+    	}
+      // 字典表
+      this.dicts = dicts     
+    },
+    setFileData (val) {
+    	if(val){        
+    		this.fileData = { ...val }        
+    	}
+      this.fileData.bizType = "TRAY"
+      this.fileData.isSingle = true
+    },
+    close () {
+      this.$emit('close')
+    },
+    reset () {
+      // 先清除校验，再清除表单，不然有奇怪的bug
+      this.$refs.form.clearValidate()
+      this.$refs.form.resetFields()
+      this.tenant = this.initTenant()
+      /*this.$refs.fileRef.init({
+        id: "",
+        bizId: "",
+        bizType: "",
+      })*/
+    },
+    
+    // 圖片上传后，回调-函数
+    setIdAndSubmit(bizId, url, fileData) {
+    	// console.log("dddddd== ", fileData)
+      const vm = this;
+      vm.successNum += 1;
+      vm.imgFileData.bizId = bizId;
+      vm.tenant.layoutMap = fileData.id;
+
+      if (vm.successNum === vm.imgFileTotal) {
+        vm.$store.state.hasLoading = false;
+      }
+    },
+    
+    setIdAndSubmit_v1 (isUploadCompleted, res) {
+    	console.log("附件的上传数据 == ", res);
+      if (isUploadCompleted) {
+        /*this.loading = false
+        this.confirmDisabled = false
+        this.isVisible = false*/
+        this.$message({
+          message: this.$t('tips.createSuccess'),
+          type: 'success'
+        })        
+        // this.$emit('success') 
+        this.tenant.layoutMap = res.data.id
+        /*this.formData = JSON.parse(localStorage.getItem("formData"))        
+        this.formData.layoutMap = res.data.id
+        if (this.type === 'add') {            
+            this.save(this.formData)
+          } else {
+            this.update(this.formData)
+        }*/
+        // localStorage.removeItem("formData");
+      }      
+    },
+    
+    editSubmit () {      
+      this.disabled = true
+      this.loading = true
+      //let id =  this.tenant.layoutMap!=null? this.tenant.layoutMap: ""
+      // this.$refs.fileRef.submitFile(id, this.tenant.id, 'TRAY')
+      // console.log("22222222222222");
+      if(this.type == 'add') {
+      	 this.save(this.tenant);
+      } else {
+      	this.update(this.tenant);
+      }
+    },
+    submitForm () {
+    	// console.log("00000000000000000000000");
+      this.$refs.form.validate((valid) => {
+        if (valid) {          
+        	// console.log("11111111111111111");
+          // this.formData = this.tenant 
+          // localStorage.setItem("formData", JSON.stringify(this.formData));         
+          this.confirmDisabled = true
+          this.editSubmit()
+          // 后续提交处理          
+        } else {
+          return false
+        }
+      })
+    },
+    save (formData) {
+      areaMgrApi.save(formData)
+        .then((response) => {
+          const res = response.data
+          if (res.isSuccess) {
+            this.isVisible = false
+            this.$message({
+              message: this.$t('tips.createSuccess'),
+              type: 'success'
+            })
+            // 通知列表
+	          this.$emit("success");
+	          // 通知列表-并关闭弹出框
+	          this.$emit("close");
+          }
+        }).finally(() => {
+        	this.loading = false;
+          this.confirmDisabled = false
+          return true
+        })
+    },
+    update (formData) {
+      areaMgrApi.update(formData)
+        .then((response) => {
+          const res = response.data
+          if (res.isSuccess) {
+            this.isVisible = false
+            this.$message({
+              message: this.$t('tips.updateSuccess'),
+              type: 'success'
+            })
+            // 通知列表
+	          this.$emit("success")
+	          // 通知列表-并关闭弹出框
+	          this.$emit("close")
+          }
+        }).finally(() => {
+        	this.loading = false;
+          this.confirmDisabled = false
+          return true
+        })
+    }
+
+  }
+}
+</script>
+<style lang="scss" >
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  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: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+}
+.avatar {
+  width: 100px;
+  height: 100px;
+  display: block;
+}
+.checkUsed{
+	display: inline-block;
+	margin-left: 10px;
+	color: #1890ff;
+}
+</style>