资源平台 接口对接

src/views/music/platform/index.vue

@@ -1,64 +1,131 @@
 <template>
   <div class="app-container">
     <!-- 列表 -->
-    <el-table :data="tableData">
+    <el-table :data="list" v-loading="loading">
       <el-table-column type="index" label="序号" align="center" />
-      <el-table-column prop="platform" label="资源平台" align="center"></el-table-column>
-      <el-table-column prop="type" label="平台类型" align="center"></el-table-column>
+      <el-table-column prop="name" label="资源平台" align="center"></el-table-column>
+      <el-table-column prop="isThird" label="平台类型" align="center" :formatter="isThirdFormatter" />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" :disabled="scope.row.type !== '猫王'" @click="getEdit(scope.row)">编辑</el-button>
-          <el-button type="delete" :disabled="scope.row.type !== '猫王'">删除</el-button>
+          <el-button type="text" :disabled="scope.row.isThird !== 0" @click="getEdit(scope.row)">编辑</el-button>
+          <!-- <el-button type="delete" :disabled="scope.row.status !== 2">删除</el-button> -->
         </template>
       </el-table-column>
     </el-table>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="listForm.pageNum"
+      :limit.sync="listForm.pageSize"
+      @pagination="getList"
+    />
     <!-- 弹窗 -->
     <el-dialog title="编辑" :visible.sync="dialogVisible" width="500px">
-      <el-form :model="form" label-width="100px">
-        <el-form-item prop="platform" label="资源平台：">
-          <el-input v-model="form.platform" placeholder="请输入资源平台" />
+      <el-form :model="form" ref="form" :rules="rules" label-width="100px">
+        <el-form-item prop="name" label="资源平台：">
+          <el-input v-model="form.name" placeholder="请输入资源平台名称" />
         </el-form-item>
-        <el-form-item prop="type" label="平台类型：">
-          <el-input v-model="form.type" disabled />
+        <el-form-item prop="status" label="平台类型：">
+          <el-select v-model="form.isThird" disabled>
+            <el-option v-for="item in isThirdOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
         </el-form-item>
       </el-form>
       <div slot="footer">
-        <el-button>取消</el-button>
-        <el-button type="primary">确定</el-button>
+        <el-button @click="getCancel">取消</el-button>
+        <el-button type="primary" @click="getSubmit">确定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import { getPlatformPage, getplatformEdit } from "@/api/music/platform";
+
 export default {
   data() {
     return {
+      // 遮罩层
+      loading: true,
+      // 弹窗
+      dialogVisible: false,
       // 列表
-      tableData: [
+      list: [],
+      // 总数
+      total: 0,
+      // 分页表单
+      listForm: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      // 提交表单
+      form: {},
+      // 表单验证
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入资源平台名称",
+            trigger: "blur",
+          },
+        ],
+      },
+      // 字典
+      isThirdOptions: [
         {
-          platform: "QQ音乐",
-          type: "第三方",
+          value: 0,
+          label: "猫王",
         },
         {
-          platform: "猫王官方",
-          type: "猫王",
+          value: 1,
+          label: "第三方",
         },
       ],
-      //   弹窗
-      dialogVisible: false,
-      form: {
-        platform: "",
-        type: "猫王",
-      },
     };
   },
-  mounted() {},
+  mounted() {
+    this.getList();
+  },
   methods: {
+    // 列表
+    getList() {
+      this.loading = true;
+      getPlatformPage(this.listForm).then((res) => {
+        if (res.code === 0) {
+          this.list = res.data.records;
+          this.total = res.data.total;
+          this.loading = false;
+        }
+      });
+    },
+
+    // 编辑
     getEdit(row) {
       this.dialogVisible = true;
       this.form = row;
     },
+
+    // 确定
+    getSubmit() {
+      getplatformEdit(this.form).then((res) => {
+        if (res.code === 0) {
+          this.$message.success("修改成功！");
+          this.dialogVisible = false;
+          this.getList();
+        }
+      });
+    },
+
+    // 取消
+    getCancel() {
+      this.$refs.form.clearValidate();
+      this.dialogVisible = false;
+    },
+
+    // 字典翻译
+    isThirdFormatter(row) {
+      return this.selectDictLabel(this.isThirdOptions, row.isThird);
+    },
   },
 };
 </script>