feat: 更新demo示例

Author: BoBoooooo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.8.6-6",
+  "version": "0.8.6-8",
   "author": "BoBo<[email protected]>",
   "main": "lib/ProCrud.umd.min.js",
   "files": [

src/component/crud-table/src/CrudTable.vue

@@ -640,6 +640,7 @@ export default defineComponent({
   background: white;
   padding: 10px;
   position: relative;
+  width: 100%;
   h4 {
     margin: 2px 30px 0px 0px;
     padding-left: 15px;

src/component/form-designer/src/components/AvatarUpload/AvatarUpload.vue

@@ -21,7 +21,7 @@
     :show-file-list="false"
     :on-success="handleAvatarSuccess"
   >
-    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+    <img v-if="hasImage" :src="imageUrl" class="avatar" />
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
   </el-upload>
 </template>
@@ -35,7 +35,8 @@ export default {
   },
   data() {
     return {
-      imageUrl: this.value,
+      hasImage: false,
+      prefix: window.__HOST__URL__ + window.__PREFIX__URL__,
     };
   },
   props: {
@@ -57,20 +58,27 @@ export default {
       default: false,
     },
   },
+  created() {
+    if (this.value) {
+      this.hasImage = true;
+    }
+  },
   computed: {
+    imageUrl() {
+      return this.prefix + this.value;
+    },
     action() {
-      const __GLOBAL__URL__ = window.__HOST__URL__ + window.__PREFIX__URL__;
-      return __GLOBAL__URL__ + this.widget.options.uploadUrl;
+      return this.prefix + this.widget.options.uploadUrl;
     },
     headers() {
       return { Authorization: sessionStorage.getItem('token') };
     },
   },
   methods: {
     handleAvatarSuccess(res, file) {
-      const __GLOBAL__URL__ = window.__HOST__URL__ + window.__PREFIX__URL__;
-      this.imageUrl = URL.createObjectURL(file.raw);
-      this.$emit('change', __GLOBAL__URL__ + res.data);
+      // this.imageUrl = URL.createObjectURL(file.raw);
+      this.hasImage = true;
+      this.$emit('change', res.data);
     },
     beforeUpload() {
       // 只读时禁止上传
@@ -88,6 +96,7 @@ export default {
   border-radius: 6px;
   cursor: pointer;
   position: relative;
+  margin: 0 auto;
   overflow: hidden;
 }
 .avatar-uploader .el-upload:hover {

src/component/form-designer/src/styles/table-form.scss

@@ -44,6 +44,8 @@
             height: 100%;
             margin-left: 0px !important;
             flex: 1;
+            display: flex;
+            align-items: center;
             padding: 10px 0;
             .el-checkbox-group{
               padding-left:10px;
@@ -52,9 +54,6 @@
                 border:none;
               }
             }
-            .el-select,.el-input{
-              height:100%;
-            }
             input,
             textarea {
               border: none;

src/demo/component/PersonCrudTable.vue

@@ -8,9 +8,14 @@
 <template>
   <CrudTable ref="table" tableName="person" tableTitle="员工管理" fullHeight orderCondition="timestamp desc" :visibleList="visibleList" v-bind="$attrs" v-on="$listeners">
     <template #columnFormatter="{row,prop}">
-      <el-tag v-if="prop === 'jobno'">{{ row.jobno }}</el-tag>
-      <span v-if="prop === 'personname'"><i class="el-icon el-icon-user" style="color: red"></i>{{ row.personname }}</span>
-    </template>
+        <el-tag v-if="prop === 'jobno'">{{ row.jobno }}</el-tag>
+        <span v-if="prop === 'personname'"><i class="el-icon el-icon-user" style="color: red"></i>{{ row.personname }}</span>
+        <el-image style="width: 50px; height: 50px" fit="fill" v-if="prop === 'avatar'" :src="getAvatarUrl(row)" :preview-src-list="[getAvatarUrl(row)]">
+          <div slot="error" style="height: 100%">
+            <div class="error"><i class="el-icon-picture-outline"></i></div>
+          </div>
+        </el-image>
+      </template>
     <template #btnCustom="{row}">
       <el-button size="mini" @click="getRowData(row)">自定义</el-button>
     </template>
@@ -30,5 +35,21 @@ export default class PersonTable extends Vue {
   getRowData(row) {
     this.$alert(JSON.stringify(row));
   }
+
+  getAvatarUrl(row) {
+    return window.__HOST__URL__ + row.avatar;
+  }
 }
 </script>
+<style lang="scss" scoped>
+.error {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  color: #909399;
+  font-size: 30px;
+}
+</style>

src/demo/component/PersonProTable.vue

@@ -7,10 +7,15 @@
 
 <template>
   <ProTable ref="table" :request="request" :columns="columns" tableTitle="员工管理" fullHeight orderCondition="timestamp desc" v-bind="$attrs" v-on="$listeners">
-    <template #columnFormatter="{row,prop}">
-      <el-tag v-if="prop === 'jobno'">{{ row.jobno }}</el-tag>
-      <span v-if="prop === 'personname'"><i class="el-icon el-icon-user" style="color: red"></i>{{ row.personname }}</span>
-    </template>
+     <template #columnFormatter="{row,prop}">
+        <el-tag v-if="prop === 'jobno'">{{ row.jobno }}</el-tag>
+        <span v-if="prop === 'personname'"><i class="el-icon el-icon-user" style="color: red"></i>{{ row.personname }}</span>
+        <el-image style="width: 50px; height: 50px" fit="fill" v-if="prop === 'avatar'" :src="getAvatarUrl(row)" :preview-src-list="[getAvatarUrl(row)]">
+          <div slot="error" style="height: 100%">
+            <div class="error"><i class="el-icon-picture-outline"></i></div>
+          </div>
+        </el-image>
+      </template>
   </ProTable>
 </template>
 
@@ -23,29 +28,38 @@ import { Vue, Component, Prop } from 'vue-property-decorator';
 })
 export default class PersonProTable extends Vue {
   columns = {
-    name: 'person',
-    position: '人员信息列表',
     columns: [
+      {
+        prop: 'avatar',
+        label: '照片',
+        align: 'center',
+        headerAlign: 'center',
+        showOverflowTooltip: true,
+        minWidth: 140,
+        sortable: 'custom',
+        searchable: true,
+        slotName: 'columnFormatter',
+      },
       {
         prop: 'jobno',
         label: '工号',
-        minWidth: 140,
+        minWidth: '100',
         align: 'center',
         headerAlign: 'center',
         showOverflowTooltip: true,
         sortable: 'custom',
-        slotName: '',
+        slotName: 'columnFormatter',
         searchable: true,
       },
       {
         prop: 'personname',
         label: '姓名',
-        minWidth: 140,
+        minWidth: '70',
         align: 'center',
         headerAlign: 'center',
         showOverflowTooltip: true,
         sortable: 'custom',
-        slotName: '',
+        slotName: 'columnFormatter',
         searchable: true,
       },
       {
@@ -62,7 +76,7 @@ export default class PersonProTable extends Vue {
       {
         prop: 'deptname',
         label: '所在部门',
-        minWidth: 140,
+        minWidth: '100',
         align: 'center',
         headerAlign: 'center',
         showOverflowTooltip: true,
@@ -73,7 +87,7 @@ export default class PersonProTable extends Vue {
       {
         prop: 'post',
         label: '岗位',
-        minWidth: 140,
+        minWidth: '100',
         align: 'center',
         headerAlign: 'center',
         showOverflowTooltip: true,
@@ -84,7 +98,7 @@ export default class PersonProTable extends Vue {
       {
         prop: 'level',
         label: '职级',
-        minWidth: 140,
+        minWidth: '100',
         align: 'center',
         headerAlign: 'center',
         showOverflowTooltip: true,
@@ -104,6 +118,8 @@ export default class PersonProTable extends Vue {
         searchable: true,
       },
     ],
+    name: 'person',
+    position: '员工管理',
   }
 
   async request(axiosParams: Params): Promise<DataSource> {
@@ -113,5 +129,21 @@ export default class PersonProTable extends Vue {
       total: res.data.total,
     };
   }
+
+  getAvatarUrl(row) {
+    return window.__HOST__URL__ + row.avatar;
+  }
 }
 </script>
+<style lang="scss" scoped>
+.error {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  color: #909399;
+  font-size: 30px;
+}
+</style>