|
@@ -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>
|