111

src/components/global/ChooseImg.vue

+<template>
+  <div class="ChooseImg">
+    <el-row style="border: 1px solid rgb(227, 227, 227);">
+          <el-col :span="6" style="border-right: 1px solid rgb(227, 227, 227);">
+               <el-button style="margin-top: 12px;margin-left: 5%;" type="primary" size="small">添加分组</el-button>
+               <div style="margin:20px 0">    
+                    <el-input v-model="val" style="width:90%;margin:0 5%" placeholder="请输入分类名称搜索" size="small"></el-input>
+               </div>
+               <div class="el-scrollbar" style="height: 450px; width: 100%;">
+                   <div class="el-scrollbar__wrap" style="margin-bottom: -8px; margin-right: -8px;">
+                       <div class="el-scrollbar__view">
+                            <li  class="el-menu-item" style="padding-left: 10px;padding-right: 10px;">
+                               <i class="el-icon-tickets"></i> 
+                               <span>全部</span>
+                            </li> 
+                            <li v-for="item in 9" class="el-menu-item" style="padding-left: 10px;padding-right: 10px;">
+                                <div flex="dir:left box:last">
+                                    <el-col :span="18" style="overflow: hidden; text-overflow: ellipsis;">
+                                        <i class="el-icon-tickets"></i> 
+                                        <span>羊肚菌</span>
+                                    </el-col> 
+                                    <el-col class="blue" :span="6">
+                                        <span>编辑</span> | <span>删除</span>
+                                    </el-col>
+                                </div>
+                            </li>
+                        </div>
+                    </div>
+                </div>
+          </el-col>
+          <el-col :span="18">
+                <div style="margin-top: 10px;margin-left: 20px;" class="appendInput">
+                    <el-input size="small" style="width:250px" placeholder="请输入内容" v-model="val">
+                        <el-button slot="append" icon="el-icon-search"></el-button>
+                    </el-input>
+                </div>
+                <div class="basefix app-attachment-list">
+                    <div class="app-attachment-item app-attachment-upload">
+                        <div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 100px;">
+                            <i class="el-icon-upload"></i> 
+                            <input type="file" accept="image/*" multiple="multiple" style="display: none;">
+                        </div>
+                    </div>
+                    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
+                        <div class="el-tooltip item app-attachment-item" >
+                            <img src="https://cdnimg.iotweixin.com/uploads/mall1285/20200422/58aac71950e2d86e6d7138484a3f7f7e.jpg" class="app-attachment-img" style="width: 100px; height: 100px;"> 
+                            <div class="app-attachment-name">微信图片_20200422125658.jpg</div>
+                        </div> 
+                    </el-tooltip>
+                    
+                </div>
+                <div>
+                    <el-pagination style="text-align:right"
+                    background
+                    :current-page="currentPage4"
+                    @current-change="handleCurrentChange"
+                    :page-size="msg.pageSize"
+                    layout="prev, pager, next,jumper"
+                    :total="total">
+                    </el-pagination>
+                </div>
+          </el-col>
+      </el-row>
+      <div style="margin-top:20px;text-align:right">
+        <el-button size="small" type="primary" @click="changeState = false">选定</el-button>
+      </div>
+    
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChooseImg',
+  data(){
+    return{
+        val:'',
+        Id:'',
+        currentPage4:1,
+        msg:{
+                pageIndex:1,
+                pageSize:15,
+            },
+        total:0,
+    }
+  },
+  created(){
+      
+  },
+  mounted(){
+    
+  },
+  methods:{
+    InitData(id){
+        this.Id=id;
+        this.msg.Id=id;   
+        // this.getOperation();
+        // this.getDataInfo();
+    },
+    handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        // this.getList();
+    },
+    
+  },
+}
+</script>
+
+<style>
+.ChooseImg .app-attachment-name {
+    color: #666666;
+    margin-top: 5px;
+    font-size: 13px;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+}
+.ChooseImg .app-attachment-item .app-attachment-img {
+    display: block;
+}
+.ChooseImg .app-attachment-upload i {
+    font-size: 30px;
+    color: #909399;
+}
+.ChooseImg .app-attachment-item {
+    display: inline-block;
+    cursor: pointer;
+    position: relative;
+    float: left;
+    width: 120px;
+    height: 140px;
+    margin: 7.5px;
+    text-align: center;
+    padding: 10px 10px 0;
+}
+.ChooseImg .app-attachment-upload {
+    box-shadow: none;
+    border: 1px dashed #b2b6bd;
+    height: 100px;
+    width: 100px;
+    margin: 17.5px;
+    padding: 0;
+}
+.ChooseImg .app-attachment-list{
+    padding: 5px;
+}
+.ChooseImg .appendInput .el-input__inner{
+    border-right: none;
+
+}
+.ChooseImg .appendInput .el-input-group__append{
+    background-color: #fff!important;
+    border-left: none;
+    padding: 0 15px;
+}
+</style>

src/main.js

@@ -9,6 +9,9 @@ import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);
 
+import commonUtils from './assets/utils/commonUtils'
+Vue.commonUtils = Vue.prototype.$commonUtils=commonUtils
+
 Vue.config.productionTip = false
 Vue.http = Vue.prototype.$http = axios
 Vue.use(ajaxPlug)