机构扩展界面优化

src/views/system/dept/extend.vue

@@ -679,20 +679,10 @@
       </div>
     </DialogCom>
     <div slot="footer" class="dialog-footer" style="height: 50px"></div>
-    <DialogCom
-      :title="openTitle"
-      :visible.sync="openVisible"
-      width="200px"
-      append-to-body
-    >
-      <div class="demo-image__preview" >
-        <el-image
-          :src="openUrl"
-          :preview-src-list="srcList"
-        >
-        </el-image>
-      </div>
-    </DialogCom>
+    <el-image-viewer 
+        v-if="imageViewer"
+        :on-close="closeImgViewer"
+        :url-list="srcList"/>
   </div>
 </template>
 
@@ -746,7 +736,9 @@ export default {
     "property_situation",
   ],
   props: [],
-  components: {},
+  components: {
+    'el-image-viewer':() => import('element-ui/packages/image/src/image-viewer')
+  },
   data() {
     let formatRule = function (rule, value, callback) {
       console.log(value, "value");
@@ -758,6 +750,7 @@ export default {
     };
     return {
       reqmsg: false,
+      imageViewer:false,
       //表单验证
       rules: {
         type: [{ required: true, message: "请选择机构类型", trigger: "blur" }],
@@ -968,6 +961,10 @@ export default {
   },
   mounted() {},
   methods: {
+    closeImgViewer(){
+      this.imageViewer = false;
+      this.srcList = [];
+    },
     isreq(rule, value, callback) {
       if (this.reqmsg) {
         callback(new Error("证书为必填项"));
@@ -999,12 +996,11 @@ export default {
     },
     downBusiness(file) {
       let array = file.split(",");
-      console.log(array);
       this.openTitle = "证书";
       this.openUrl = array[0];
       this.srcList = array;
-
       this.openVisible = true;
+      this.imageViewer = true;
 
       // for (let i = 0; i < array.length; i++) {
       //   window.open(array[i]);