等待后台上传头像接口

src/module/main/components/dev_show.vue

@@ -1,19 +1,33 @@
 <template>
   <div id="cloud-balance">
     <div class="table">
-      <el-table v-if="tableData.length"
+      <el-table
+        v-if="tableData.length"
         height="100%"
         border
         style="width: 100%"
         :data="tableData"
-        :row-class-name="tableRowClassName">
-        <el-table-column v-for="(prop, index) of tableProps" :key="index"
+        :row-class-name="tableRowClassName"
+      >
+        <el-table-column
+          v-for="(prop, index) of tableProps"
+          :key="index"
           :prop="prop"
           align="center"
-          :label="tableHeaders[index]">
+          :label="tableHeaders[index]"
+        >
           <template slot-scope="scope">
-            <el-button type="text" v-if="prop === 'uid'" @click="clickUID(scope.row)">{{scope.row[prop]}}</el-button>
-            <img v-else-if="prop === 'url'" :src="scope.row[prop]" alt="url" style="display: block; width: 100px; height: 80px;">
+            <el-button
+              type="text"
+              v-if="prop === 'uid'"
+              @click="clickUID(scope.row)"
+            >{{scope.row[prop]}}</el-button>
+            <img
+              v-else-if="prop === 'url'"
+              :src="scope.row[prop]"
+              alt="url"
+              style="display: block; width: 100px; height: 80px;"
+            >
             <section class="ctrls" v-else-if="prop === 'ctrls'">
               <el-button type="text" @click="clickEdit(scope.row)">编辑</el-button>
               <el-button type="text" @click="clickDel(scope.row)">删除</el-button>
@@ -28,12 +42,45 @@
       :current-page.sync="currentPage"
       :page-size="20"
       layout="total, prev, pager, next"
-      :total="totalCount">
-    </el-pagination>
+      :total="totalCount"
+    ></el-pagination>
+    <el-dialog title="添加展示" :visible.sync="centerDialogVisible" width="50%" center>
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="UID" prop="uid">
+          <el-input type="number" v-model="ruleForm.uid" :disabled="isEdit"></el-input>
+        </el-form-item>
+        <el-form-item label="排序" prop="order">
+          <el-input type="number" v-model="ruleForm.order"></el-input>
+        </el-form-item>
+        <el-form-item label="配图" prop="url">
+          <el-upload
+            class="avatar-uploader"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img v-if="imageUrl" :src="imageUrl" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="centerDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+
 const tableHeaders = [
   'ID',
   '昵称',
@@ -54,6 +101,24 @@ const tableProps = [
 export default {
   data() {
     return {
+      imageUrl: '',
+      // 是否是编辑入口
+      isEdit: false,
+      ruleForm: {
+        uid: '',
+        order: 0,
+        url: '',
+      },
+      rules: {
+        uid: [
+          { required: true, message: '请填写开发者ID', trigger: 'blur' },
+        ],
+        url: [
+          { type: 'string', required: true, message: '请上传配图', trigger: 'change' }
+        ],
+      },
+      // 弹框
+      centerDialogVisible: false,
       // 数据总条目
       totalCount: 0,
       currentPage: 1,
@@ -69,6 +134,21 @@ export default {
     this.getTableData()
   },
   methods: {
+    handleAvatarSuccess(res, file) {
+      this.imageUrl = URL.createObjectURL(file.raw);
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if(!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
+      }
+      if(!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!');
+      }
+      return isJPG && isLt2M;
+    },
     // 点击删除
     clickDel(i) {
       const id = i.id
@@ -93,14 +173,15 @@ export default {
     },
     // 点击编辑
     clickEdit(i) {
-
+      this.isEdit = true
+      this.centerDialogVisible = true
     },
     // 点击用户
     clickUID(i) {
       window.open(i.seo_uri)
     },
     // 根据状态显示图表样式
-    tableRowClassName({row, rowIndex}) {
+    tableRowClassName({ row, rowIndex }) {
       let className = ''
       if(row.p_status_name === '已结算') className = 'success-row'
       return className
@@ -130,6 +211,28 @@ export default {
   .table {
     height: calc(100% - 40px);
   }
+  .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>