mhy

xichongSys/src/views/Core/KtTable.vue

@@ -10,6 +10,20 @@
         :fixed="column.fixed" :key="column.prop" :type="column.type" :formatter="column.formatter"
         :sortable="column.sortable==null?true:column.sortable">
       </el-table-column>
+      <el-table-column
+        v-if="showSeal"
+        label="签章">
+        <template slot-scope="scope">
+          <el-popover
+            v-if="scope.row.sealStr !== null && scope.row.sealStr != ''"
+            placement="left"
+            title=""
+            trigger="hover">
+            <img slot="reference" :src="'data:image/jpg;base64,' + scope.row.sealStr" height="50px" width="50px" class="head_pic">
+            <img :src="'data:image/jpg;base64,' + scope.row.sealStr" height="200px" width="200px" class="head_pic"/>
+          </el-popover>
+        </template>
+      </el-table-column>
       <el-table-column :label="$t('action.operation')" width="185" fixed="right" v-if="showOperation" header-align="center" align="center">
         <template slot-scope="scope">
           <kt-button v-if="scope.row.name!=='admin'" icon="fa fa-edit" :label="$t('action.edit')" :perms="permsEdit" :size="size" @click="handleEdit(scope.$index, scope.row)" style="float: left"/>
@@ -94,7 +108,11 @@ export default {
     showBatchDelete: {  // 是否显示操作组件
       type: Boolean,
       default: true
-    }
+    },
+    showSeal: {  // 是否显示操作组件
+      type: Boolean,
+      default: false
+    },
   },
   data() {
     return {

xichongSys/src/views/Sys/Role.vue

@@ -17,7 +17,7 @@
 	<!--表格内容栏-->
 	<kt-table :height="220" permsEdit="sys:role:edit" permsDelete="sys:role:delete" :highlightCurrentRow="true" :stripe="false"
 		:data="pageResult" :columns="columns" :showBatchDelete="false" @handleCurrentChange="handleRoleSelectChange"
-		@findPage="findPage" @handleEdit="handleEdit" @handleDelete="handleDelete">
+		@findPage="findPage" @handleEdit="handleEdit" @handleDelete="handleDelete" :showSeal="true">
 	</kt-table>
 	<!-- </el-col> -->
 	<!--新增编辑界面-->
@@ -29,10 +29,32 @@
 			<el-form-item label="角色名" prop="name">
 				<el-input v-model="dataForm.name" auto-complete="off"></el-input>
 			</el-form-item>
-			<el-form-item label="备注 " prop="remark">
+			<el-form-item label="备注" prop="remark">
 				<el-input v-model="dataForm.remark" auto-complete="off" type="textarea"></el-input>
 			</el-form-item>
-
+      <el-form-item label="签章" prop="seal" align="left">
+        <el-popover
+          v-if="dataForm.sealStr !== null && dataForm.sealStr != ''"
+          placement="left"
+          title=""
+          trigger="hover">
+          <img slot="reference" :src="'data:image/jpg;base64,' + dataForm.sealStr" height="50px" width="50px" class="head_pic">
+          <img :src="'data:image/jpg;base64,' + dataForm.sealStr" height="200px" width="200px" class="head_pic"/>
+        </el-popover>
+        <el-upload
+          align="left"
+          class="upload-demo"
+          ref="upload"
+          action=""
+          accept=".png,.jpg"
+          :on-change="changeSeal"
+          :limit="1"
+          :file-list="sealUrl"
+          :auto-upload="false">
+          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
+        </el-upload>
+      </el-form-item>
 		</el-form>
 		<div slot="footer" class="dialog-footer">
 			<el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
@@ -84,7 +106,8 @@ export default {
 				{prop:"name", label:"角色名", minWidth:120},
 				{prop:"remark", label:"备注", minWidth:120},
 				{prop:"createBy", label:"创建人", minWidth:120},
-				{prop:"createTime", label:"创建时间", minWidth:120, formatter:this.dateFormat}
+        {prop:"createTime", label:"创建时间", minWidth:120, formatter:this.dateFormat},
+        // {prop:"seal", label:"签章", minWidth:120}
 				// {prop:"lastUpdateBy", label:"更新人", minWidth:100},
 				// {prop:"lastUpdateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}
 			],
@@ -103,7 +126,9 @@ export default {
 			dataForm: {
 				id: 0,
 				name: '',
-				remark: ''
+				remark: '',
+        seal: '',
+        sealStr: ''
 			},
 			selectRole: {},
 			menuData: [],
@@ -115,7 +140,10 @@ export default {
 			defaultProps: {
 				children: 'children',
 				label: 'name'
-			}
+			},
+      sealUrl: [],
+      sealVisible: false,
+      imageUrl: '',
 		}
 	},
 	methods: {
@@ -156,7 +184,8 @@ export default {
 				if (valid) {
 					this.$confirm('确认提交吗？', '提示', {}).then(() => {
 						this.editLoading = true
-						let params = Object.assign({}, this.dataForm)
+            console.log(this.dataForm);
+            let params = Object.assign({}, this.dataForm)
 						this.$api.role.save(params).then((res) => {
 							this.editLoading = false
 							if(res.code == 200) {
@@ -270,8 +299,32 @@ export default {
 		// 时间格式化
       	dateFormat: function (row, column, cellValue, index){
           	return format(row[column.property])
-      	}
-
+      	},
+    changeSeal(file) {
+		  var This = this;
+		  this.sealUrl.length = 0;
+		  this.sealUrl.push(file);
+      if (this.sealUrl.length > 0) {
+        var aa;
+        aa = this.convertImageToBase64();
+        console.log(aa);
+        console.log(this.dataForm);
+      }
+    },
+    convertImageToBase64() {
+		  var This = this;
+		  var base64;
+		  let reader = new FileReader();
+		  reader.readAsDataURL(this.sealUrl[0].raw);
+		  reader.onload = function (e) {
+		    console.log(this.result.substring(this.result.indexOf(",") + 1));
+		    base64 =  this.result.substring(this.result.indexOf(",") + 1);
+		    This.sealUrl[0] = this.result.substring(this.result.indexOf(",") + 1);
+      }
+      console.log(This.sealUrl[0]);
+      console.log(base64);
+      return base64;
+    }
 	},
 	mounted() {
 	}
@@ -289,4 +342,28 @@ export default {
 	color: rgb(20, 89, 121);
 
 }
+
+  .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: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
 </style>