音频管理 资源平台

src/views/music/platform/index.vue

@@ -1,131 +1,167 @@
 <template>
   <div class="app-container">
+    <el-button type="primary" icon="el-icon-plus" size="mini" @click="getDialog()">新增</el-button>
     <!-- 列表 -->
-    <el-table :data="list" v-loading="loading">
+    <el-table :data="tableData" v-loading="loading">
       <el-table-column type="index" label="序号" align="center" />
-      <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="资源平台" prop="name" align="center" />
+      <el-table-column label="音频类型" prop="audioType" align="center" :formatter="audioFormatter" />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <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> -->
+          <el-button type="text" @click="getDialog(scope.row.id)">编辑</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.pageNum"
-      :limit.sync="listForm.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
+      @pagination="getList" />
+
     <!-- 弹窗 -->
-    <el-dialog title="编辑" :visible.sync="dialogVisible" width="500px">
-      <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-dialog :visible.sync="dialogVisible" :title="title" width="500px" :before-close="cancel">
+      <el-form :model="dialogForm" :rules="rules" ref="dialogForm" label-width="100px">
+        <el-form-item label="资源平台：" prop="name">
+          <el-input v-model="dialogForm.name" placeholder="请输入资源平台名称" />
         </el-form-item>
-        <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-form-item label="音频类型：" prop="audioType">
+          <el-select v-model="dialogForm.audioType" multiple placeholder="请选择音频类型">
+            <el-option v-for="item in audioOptions" :key="item.value" :value="item.value.toString()"
+              :label="item.label" />
           </el-select>
         </el-form-item>
+        <el-form-item style="text-align: right;">
+          <el-button @click="cancel">取消</el-button>
+          <el-button type="primary" @click="getSubmit">确定</el-button>
+        </el-form-item>
       </el-form>
-      <div slot="footer">
-        <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";
-
+import { list, create, edit, detail, remove } from '@/api/music/platform'
+import { audioMixin } from '@/mixin/index'
 export default {
+  mixins: [audioMixin],
   data() {
     return {
       // 遮罩层
-      loading: true,
-      // 弹窗
-      dialogVisible: false,
-      // 列表
-      list: [],
-      // 总数
-      total: 0,
-      // 分页表单
-      listForm: {
+      loading: false,
+      // 列表表单
+      form: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 10
       },
+      // 总数
+      total: 0,
+      // 列表
+      tableData: [],
+      // 弹窗
+      dialogVisible: false,
+      title: '',
       // 提交表单
-      form: {},
-      // 表单验证
-      rules: {
-        name: [
-          {
-            required: true,
-            message: "请输入资源平台名称",
-            trigger: "blur",
-          },
-        ],
+      dialogForm: {
+        name: '',
+        audioType: []
       },
-      // 字典
-      isThirdOptions: [
-        {
-          value: 0,
-          label: "猫王",
-        },
-        {
-          value: 1,
-          label: "第三方",
-        },
-      ],
-    };
+      // 校验
+      rules: {
+        name: [{
+          required: true, message: '请输入资源平台名称', trigger: 'blur'
+        }, {
+          max: 20, message: '名称不得超过20个字符', trigger: 'blur'
+        }],
+        audioType: [{
+          required: true, message: '请选择音频类型', trigger: 'change'
+        }]
+      }
+    }
   },
   mounted() {
-    this.getList();
+    this.getList()
   },
   methods: {
     // 列表
     getList() {
-      this.loading = true;
-      getPlatformPage(this.listForm).then((res) => {
+      this.loading = true
+      list(this.form).then(res => {
         if (res.code === 0) {
-          this.list = res.data.records;
-          this.total = res.data.total;
-          this.loading = false;
+          this.tableData = res.data.records
+          this.total = res.data.total
+          this.loading = false
         }
-      });
+      })
+    },
+    // 弹窗
+    getDialog(id) {
+      this.dialogVisible = true
+      if (id) {
+        this.title = '编辑'
+        detail(id).then(res => {
+          if (res.code === 0) {
+            this.dialogForm = res.data
+            if (this.dialogForm.audioType) {
+              this.dialogForm.audioType = res.data.audioType.split(',')
+            }
+          }
+        })
+      } else {
+        this.title = '新增'
+      }
     },
 
-    // 编辑
-    getEdit(row) {
-      this.dialogVisible = true;
-      this.form = row;
+    // 取消
+    cancel() {
+      this.dialogVisible = false
+      this.dialogForm = {}
+      this.$refs.dialogForm.resetFields();
     },
 
     // 确定
     getSubmit() {
-      getplatformEdit(this.form).then((res) => {
-        if (res.code === 0) {
-          this.$message.success("修改成功！");
-          this.dialogVisible = false;
-          this.getList();
+      this.$refs.dialogForm.validate((valid) => {
+        if (valid) {
+          this.dialogForm.audioType = this.dialogForm.audioType.join(',')
+          if (this.dialogForm.id) {
+            edit(this.dialogForm).then(res => {
+              if (res.code === 0) {
+                this.$message.success('编辑成功！')
+                this.dialogVisible = false
+                this.getList()
+              }
+            })
+          } else {
+            create(this.dialogForm).then(res => {
+              if (res.code === 0) {
+                this.$message.success('新增成功！')
+                this.dialogVisible = false
+                this.getList()
+              }
+            })
+          }
+        } else {
+          return false
         }
-      });
+      })
     },
 
-    // 取消
-    getCancel() {
-      this.$refs.form.clearValidate();
-      this.dialogVisible = false;
+    // 删除
+    getDelete(row) {
+      this.$confirm(`是否要删除${row.name}?`, '警告', {
+        type: 'warning'
+      }).then(() => {
+        remove(row.id).then(res => {
+          if (res.code === 0) {
+            this.$message.success('删除成功')
+            this.getList()
+          }
+        })
+      }).catch(() => { })
     },
 
     // 字典翻译
-    isThirdFormatter(row) {
-      return this.selectDictLabel(this.isThirdOptions, row.isThird);
-    },
-  },
+    audioFormatter(row) {
+      return row.audioType ? row.audioType.split(',').map(i => this.selectDictLabel(this.audioOptions, i)).join(',') : '/'
+    }
+  }
 };
 </script>