主播列表 接口对接

src/views/music/anchor/index.vue

@@ -3,90 +3,196 @@
     <!-- 搜索 -->
     <el-form inline label-width="100px" size="mini">
       <el-form-item label="资源平台：">
-        <el-select placeholder="请选择资源平台">
-          <el-option></el-option>
+        <el-select v-model="listForm.platformId" placeholder="请选择资源平台">
+          <el-option v-for="item in platformOptions" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </el-form-item>
       <el-form-item label="主播名称：">
-        <el-input placeholder="请输入主播名称"></el-input>
+        <el-input v-model="listForm.nickname" placeholder="请输入主播名称"></el-input>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
         <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
-        <el-button type="primary" icon="el-icon-plus" plain @click="getDetail()">新增</el-button>
+        <el-button type="primary" icon="el-icon-plus" plain @click="getDialog()">新增</el-button>
       </el-form-item>
     </el-form>
     <!-- 列表 -->
-    <el-table :data="tableData">
+    <el-table :data="tableData" v-loading="loading">
       <el-table-column prop="id" label="主播ID" align="center" />
-      <el-table-column prop="name" label="主播名称" align="center" />
-      <el-table-column prop="img" label="主播头像" align="center"></el-table-column>
-      <el-table-column prop="platform" label="资源平台" align="center" />
+      <el-table-column prop="nickname" label="主播名称" align="center" />
+      <el-table-column prop="img" label="主播头像" align="center" width="100px">
+        <template slot-scope="scope">
+          <el-image :src="scope.row.avatar" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="platformName" label="资源平台" align="center" />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getDetail(scope.row.id, 0)">查看</el-button>
-          <el-button type="text" @click="getDetail(scope.row.id, 1)">编辑</el-button>
-          <el-button type="delete">删除</el-button>
+          <el-button type="text" @click="getDialog(scope.row, '查看')">查看</el-button>
+          <el-button v-if="scope.row.platformName !== '蜻蜓' && scope.row.platformName !== 'qq音乐'" type="text"
+            @click="getDialog(scope.row, '编辑')">编辑</el-button>
+          <el-button type="delete" @click="getDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
+    <!-- 分页 -->
+    <!-- 分页 -->
+    <pagination v-show="total>0" :total="total" :page.sync="listForm.pageIndex"
+      :limit.sync="listForm.pageSize" @pagination="getList" />
     <!-- 弹窗 -->
-    <el-dialog title="新增" :visible.sync="dialogVisible" width="600px">
-      <el-form label-width="100px">
+    <el-dialog :title="title" :visible.sync="dialogVisible" width="600px">
+      <el-form :model="submitForm" ref="submitForm" label-width="100px" :disabled="title === '查看'">
         <el-row>
           <el-col :span="12">
             <el-form-item label="主播头像：">
-              <imageUpload />
+              <Upload :url="submitForm.avatar" @success="getUpload" @delete="getUpload"
+                :disabled="title === '查看'" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="主播名称：">
-              <el-input placeholder="请输入主播名称" />
+              <el-input v-model="submitForm.nickname" placeholder="请输入主播名称" />
             </el-form-item>
             <el-form-item label="资源平台：">
-              <el-select placeholder="请选择资源平台">
-                <el-option></el-option>
+              <el-select v-model="submitForm.platformId" placeholder="请选择资源平台">
+                <el-option v-for="item in platformOptions" :key="item.id" :label="item.name" :value="item.id"
+                  :disabled="item.disabled" />
               </el-select>
             </el-form-item>
           </el-col>
         </el-row>
         <el-form-item label="主播简介：">
-          <el-input type="textarea" placeholder="请输入主播简介" rows="4"></el-input>
+          <el-input v-model="submitForm.description" type="textarea" placeholder="请输入主播简介" rows="4">
+          </el-input>
         </el-form-item>
       </el-form>
       <div slot="footer">
-        <el-button @click="getCancel">取消</el-button>
-        <el-button type="primary" @click="getSubmit">确定</el-button>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button v-show="title !== '查看'" type="primary" @click="getSubmit">确定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import imageUpload from "@/components/Upload/index";
+import { getPlatformPage } from '@/api/music/platform'
+import { getPage, getAdd, getEdit, getDetail, getDelete } from '@/api/music/anchor'
+import Upload from "@/components/Upload/index";
 export default {
   components: {
-    imageUpload,
+    Upload,
   },
   data() {
     return {
+      // 遮罩层
+      loading: false,
+      // 表单
+      listForm: {
+        pageIndex: 1,
+        pageSize: 10
+      },
+      total: 0,
       // 列表
-      tableData: [
-        {
-          id: 1,
-          name: "德云社",
-          img: "",
-          platform: "官方电台",
-        },
-      ],
-      //   弹窗
+      tableData: [],
+      // 弹窗
       dialogVisible: false,
+      title: '',
+      // 表单
+      submitForm: {},
+      // 资源平台
+      platformOptions: [],
     };
   },
+  async mounted() {
+    // 资源平台列表
+    getPlatformPage({
+      pageIndex: 1,
+      pageSize: 100
+    }).then(res => {
+      if (res.code === 0) {
+        this.platformOptions = res.data.records
+        this.platformOptions.find(i => i.name === '蜻蜓').disabled = true
+        this.platformOptions.find(i => i.name === 'qq音乐').disabled = true
+      }
+    })
+
+    await this.getList()
+  },
   methods: {
-    getDetail() {
+    getList() {
+      this.loading = true
+      getPage(this.listForm).then(res => {
+        if (res.code === 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+          this.loading = false
+        }
+      })
+    },
+
+    // 打开弹窗
+    getDialog(e, key) {
       this.dialogVisible = true;
+      key ? this.title = key : [this.title = '新增', this.submitForm = {}]
+      if (e) {
+        getDetail({ id: e.id }).then(res => {
+          if (res.code === 0) {
+            this.submitForm = res.data
+          }
+        })
+      }
+    },
+
+    // 搜索
+    getSearch() {
+      this.listForm.pageIndex = 1
+      this.getList()
+    },
+
+    // 重置
+    getRefresh() {
+      this.listForm = {
+        pageIndex: 1,
+        pageSize: 10
+      }
+      this.getList()
+    },
+
+    // 上传
+    getUpload(e) {
+      this.submitForm.avatar = e.file
+    },
+
+    // 删除
+    getDelete(row){
+      getDelete({id: row.id}).then(res => {
+        if(res.code === 0){
+          this.$message.success('删除成功！')
+          this.getList()
+        }
+      })
     },
+
+    // 确定
+    getSubmit() {
+      if (this.title === '新增') {
+        getAdd(this.submitForm).then(res => {
+          if (res.code === 0) {
+            this.$message.success('新增成功！')
+            this.dialogVisible = false
+            this.getList()
+          }
+        })
+      } else {
+        getEdit(this.submitForm).then(res => {
+          if (res.code === 0) {
+            this.$message.success('修改成功！')
+            this.dialogVisible = false
+            this.getList()
+          }
+        })
+      }
+    }
   },
 };
 </script>