[pig框架实战] 手撕视频管理发布平台[07] - 修改视频属性

最新推荐文章于 2024-03-16 22:34:30 发布

夜猫逐梦

最新推荐文章于 2024-03-16 22:34:30 发布

阅读量2.1k

点赞数

分类专栏： # pig框架学习和实战文章标签：音视频前端 elementui

本文链接：https://blog.csdn.net/kinghzking/article/details/122227134

版权

pig框架学习和实战专栏收录该内容

12 篇文章 13 订阅

订阅专栏

文章目录

修改视频属性-视频号标记、抖音标记等

pig使用的是myhabits-plus框架，会自动生成单表（pig_myvideos.myvideos）的增删改查。所以我们只需要实现前端的修改请求即可。

创建修改标记的switch按钮

图例一


          <el-table-column
            prop="myFlagShipinhao"
            header-align="center"
            align="center"
            label="视频号标记"
          >
            <template scope="scope">
              <el-switch
                v-model="scope.row.myFlagShipinhao"
                @change="onChageMyFlagShipinhao(scope.row)"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
              <br>
              <el-button
                style="margin: 5px 5px"
                @click="FabuShipinhao(scope.row)"
                >发布</el-button
              >
            </template>
          </el-table-column>

添加处理函数

这里其实调用的就是pig框架生成的putObj接口，其中myFlagShipinhao 已经被修改过了，直接提交即可。row.myFlagShipinhao = row.myFlagShipinhao + 0;这个语句是因为el-switch默认值为boolean的，修改:active-value="1" :inactive-value="0"后即可删除该转换语句了。
在这里插入图片描述

    // 修改视频号标记
    onChageMyFlagShipinhao(row) {
      // row.myFlagShipinhao = row.myFlagShipinhao + 0;
      console.log(row);
      putObj(row)
        .then((data) => {
          this.$notify.success("修改成功");
        })
        .catch(() => {
          this.$notify.success("异常");
        });
    },

其实onChageMyFlagShipinhao函数就是标准的修改属性对象的函数，所有修改标记的函数都可以使用者一个函数。

修改视频属性-标题、标签

pig框架本身创建了一个叫myvideos-form.vue的对话框页面，用于增加/修改数据，但是对于单表元素过多的情况，会有大量的元素需要展示，而我们的任务是只调整标题、标签，所以我们要创建一份简单的修改数据的代码。

创建修改属性“对话框”

在这里，我们保留原有逻辑，重新拷贝一份myvideos-form.vue文件，重命名为myvideos-form-simple.vue。

删除多余的字段，只保留如下图中的五项字段，并修改dataRule。
在这里插入图片描述

其他代码不需要调整即可实现：初始化对话框（init函数），提交表单的效果（dataFormSubmit函数）。

使用新的“对话框”

引入模块、初始化组件。


import TableFormSimple from "./myvideos-form-simple";

  components: {
    TableForm,
    TableFormSimple
  },

创建组件

      <!-- 弹窗, 修改Simple -->
      <table-form-simple
        v-if="addOrUpdateSimpleVisible"
        ref="addOrUpdateSimple"
        @refreshDataList="getDataList"
      ></table-form-simple>

操作列中使用新的组件显示

<el-table-column header-align="center" align="center" label="操作">
  <template slot-scope="scope">
    <el-button
      v-if="permissions.myvideos_myvideos_edit"
      type="text"
      size="small"
      icon="el-icon-edit"
      @click="addOrUpdateSimpleHandle(scope.row)"
      >=修改=</el-button
    >
  </template>
</el-table-column>