feat: liveroomEdit 直播间增/改

package.json

@@ -12,6 +12,7 @@
     "axios": "0.18.1",
     "core-js": "3.6.5",
     "crypto-js": "^4.1.1",
+    "dayjs": "^1.11.9",
     "element-ui": "2.15.7",
     "lodash": "4.17.20",
     "qs": "^6.11.2",

pnpm-lock.yaml

@@ -13,6 +13,9 @@ dependencies:
   crypto-js:
     specifier: ^4.1.1
     version: registry.npmmirror.com/crypto-js@4.1.1
+  dayjs:
+    specifier: ^1.11.9
+    version: registry.npmmirror.com/dayjs@1.11.9
   element-ui:
     specifier: 2.15.7
     version: registry.npmmirror.com/element-ui@2.15.7(vue@2.7.14)

src/avue/form/liveroominfo.ts

@@ -0,0 +1,111 @@
+const image_upload_props = (limit: number = 5, extranote = "") => {
+  return {
+    type: 'upload',
+    listType: 'picture-card',
+    span: 24,
+    accept: 'image/png, image/jpeg',
+    limit: 1,
+    fileSize: limit * 1024,
+    row: true,
+    propsHttp: {
+      res: 'data'
+    },
+    tip: `${extranote}只能上传jpg/png图片，且不超过${limit}MiB（暂时没用）`,
+    action: ''
+  }
+}
+
+export default (isnew: boolean = false) => {
+  return {
+    labelWidth: 100,
+    column: [
+      {
+        label: '直播间名称',
+        prop: 'title',
+        row: true,
+        span: 12,
+        rules: [{ required: true, message: "直播间名称 为必填项" }]
+      }, {
+        label: "分享摘要",
+        prop: "summary",
+        row: true,
+        span: 16,
+      }, {
+        label: "分享图标",
+        prop: "imageShare",
+        ...image_upload_props(1, "建议尺寸：300x300px，"),
+      }, {
+        label: '背景图片',
+        prop: "imageCover",
+        ...image_upload_props(5, "建议尺寸：1080x1920px，"),
+      }, {
+        label: '直播类型',
+        prop: 'videoKind',
+        type: 'radio',
+        span: 8,
+        row: true,
+        dicData: [
+          { value: "vertical", label: "竖屏" },
+          { value: "horizontal", label: "横屏" }
+        ],
+      }, {
+        label: "首页显示",
+        prop: "showInList",
+        type: 'switch',
+        row: true,
+        dicData: [{
+          label: '否',
+          value: false
+        }, {
+          label: '是',
+          value: true
+        }],
+      }, {
+        label: '开始时间',
+        prop: "startTime",
+        type: "datetime",
+        span: 8,
+        row: true,
+        rules: [{ required: true, message: "开始时间不能为空" }]
+      }, {
+        label: "直播间有效期",
+        prop: "hours",
+        type: "number",
+        step: 1,
+        precision: 0,
+        span: 6,
+        row: true,
+        display: isnew,
+        tip: "单位为小时",
+      }, {
+        label: "直播推流地址",
+        prop: "livePushUrl",
+        span: 16,
+        row: true,
+      }, {
+        label: "livePullRtmpUrl",
+        prop: "livePullRtmpUrl",
+        span: 16,
+        row: true,
+      }, {
+        label: "livePullHlsUrl",
+        prop: "livePullHlsUrl",
+        span: 16,
+        row: true,
+      }, {
+        label: "回放视频地址",
+        prop: "replayVideoUrl",
+        span: 16,
+        row: true,
+      }, {
+        label: '描述',
+        prop: 'desc',
+        type: 'textarea',
+        minRows: 3,
+        maxRows: 5,
+        span: 16,
+        row: true,
+      },
+    ]
+  }
+}

src/avue/form/prodinfo.ts

@@ -1,5 +1,3 @@
-import Vue from "vue"
-
 const number_input_props = (message: string, precision: number = 0, nonzero: boolean = false) => {
   return {
     type: "number",

src/router/index.ts

@@ -42,7 +42,7 @@ export const pages = [
     name: "prodList",
     meta: { title: "产品管理", sidebar: true, icon: "product", isTab: true }
   }, {
-    path: "/prod/product/:id",
+    path: "/prod/product/edit/:id",
     component: _import("modules/prod/prodInfo"),
     name: "prodInfo",
     meta: { title: "产品信息", sidebar: false, icon: "", isTab: false }
@@ -66,6 +66,11 @@ export const pages = [
     component: _import("modules/liveroom/liveroomList"),
     name: "liveroomList",
     meta: { title: "直播间管理", sidebar: true, icon: "broadcast", isTab: true }
+  }, {
+    path: "/liveroom/edit/:id",
+    component: _import("modules/liveroom/liveroomEdit"),
+    name: "liveroomEdit",
+    meta: { title: "直播间信息", sidebar: false, icon: "", isTab: false }
   },
 ]
 

src/views/modules/liveroom/liveroomEdit.vue

@@ -0,0 +1,122 @@
+<template>
+  <avue-form :option="option" v-model="form" @submit="onSubmit" />
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import formOption from "@/avue/form/liveroominfo"
+import { isInteger } from 'lodash'
+import httpx from '@/utils/httpx'
+import dayjs from 'dayjs'
+
+export default Vue.extend({
+  data() {
+    return {
+      form: {
+        title: "",
+        imageShare: [""],
+        imageCover: [""],
+        startTime: "",
+        videoKind: "",
+        livePushUrl: "",
+        livePullRtmpUrl: "",
+        livePullHlsUrl: "",
+        jmessageRoomId: "",
+        replayVideoUrl: "",
+        desc: "",
+        summary: "",
+        showInList: false,
+        hours: 0,
+      },
+      id: 0,
+      new: false,
+    }
+  },
+
+  mounted() {
+    const id_str = this.$route.params.id
+    const id = parseInt(id_str)
+    if (isNaN(id) || !isInteger(id)) {
+      if (id_str === "new") {
+        this.new = true
+      } else {
+        this.notFound()
+      }
+    } else {
+      this.new = false
+      this.id = id
+      this.getRoomInfo(id)
+    }
+  },
+
+  computed: {
+    option() {
+      return formOption(this.new)
+    }
+  },
+
+  methods: {
+    getRoomInfo(id?: number) {
+      id = id || this.id
+      return httpx.post("/rooms/getRoom", { id }).then(({ data }) => {
+        const roominfo = data.roomInfo
+        this.form = {
+          title: roominfo.title,
+          imageShare: [roominfo.imageShare],
+          imageCover: [roominfo.imageCover],
+          startTime: roominfo.startTime,
+          videoKind: roominfo.videoKind,
+          livePushUrl: roominfo.livePushUrl,
+          livePullHlsUrl: roominfo.livePullHlsUrl,
+          livePullRtmpUrl: roominfo.livePullRtmpUrl,
+          jmessageRoomId: roominfo.jmessageRoomId,
+          replayVideoUrl: roominfo.replayVideoUrl,
+          desc: roominfo.desc,
+          summary: roominfo.summary,
+          showInList: roominfo.showInList,
+          hours: roominfo.hours,
+        }
+      }).catch(this.notFound)
+    },
+
+    onSubmit(form: any, done: Function) {
+      const path = this.new ? "/rooms/addLiveRoom" : "/rooms/updateRoom"
+      const postdata = {
+        id: this.new ? undefined : this.id,
+        adminId: this.new ? 0 : undefined,
+        viewCount: this.new ? 0 : undefined,
+        hours: 0,
+        title: form.title,
+        imageShare: form.imageShare[0] || "",
+        imageCover: form.imageCover[0] || "",
+        startTime: dayjs(form.startTime).format("YYYY-MM-DD HH:mm:ss"),
+        livePushUrl: form.livePushUrl,
+        livePullHlsUrl: form.livePullHlsUrl,
+        livePullRtmpUrl: form.livePullRtmpUrl,
+        jmessageRoomId: form.jmessageRoomId,
+        replayVideoUrl: form.replayVideoUrl,
+        videoKind: form.videoKind,
+        desc: form.desc,
+        summary: form.summary,
+        showInList: form.showInList,
+      }
+
+      httpx.post(path, postdata).then((data) => {
+        console.log(data)
+        this.$message({
+          message: '操作成功',
+          type: 'success',
+          duration: 1500
+        })
+        this.$router.back()
+      })
+      done()
+    },
+    notFound() {
+      this.$router.replace("/404")
+    }
+  }
+
+})
+
+</script>

src/views/modules/liveroom/liveroomList-info.vue

@@ -8,7 +8,8 @@
           <el-descriptions-item label="id">{{ item.id }}</el-descriptions-item>
 
           <el-descriptions-item label="状态"><el-tag size="small">{{ item.status }}</el-tag></el-descriptions-item>
-          <el-descriptions-item label="类型"><el-tag size="small">{{ item.videoKind }}</el-tag></el-descriptions-item>
+          <el-descriptions-item label="类型"><el-tag size="small" v-if="item.videoKind">{{ item.videoKind
+            === 'vertical' ? "竖屏" : "横屏" }}</el-tag></el-descriptions-item>
           <el-descriptions-item label="浏览量">{{ item.viewCount }}</el-descriptions-item>
 
           <el-descriptions-item label="开始时间">{{ item.startTime }}</el-descriptions-item>

src/views/modules/liveroom/liveroomList-opbar.vue

@@ -21,11 +21,11 @@
       </el-tooltip>
 
       <el-tooltip effect="dark" content="查看" placement="top" :enterable="false">
-        <el-button type="primary" size="small" @click="$emit('display-detail', { id, index })"><icon-svg
+        <el-button type="success" size="small" @click="$emit('display-detail', { id, index })"><icon-svg
             name="eye" /></el-button>
       </el-tooltip>
       <el-tooltip effect="dark" content="修改" placement="top" :enterable="false">
-        <el-button type="warning" size="small"><icon-svg name="pen" /></el-button>
+        <el-button type="primary" size="small" @click="handleEdit"><icon-svg name="pen" /></el-button>
       </el-tooltip>
       <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
         <el-button type="danger" size="small"><icon-svg name="trashcan" /></el-button>
@@ -53,13 +53,15 @@ export default Vue.extend({
       default: 0,
     }
   },
-  data() {
-    return {
-
+  methods: {
+    handleEdit() {
+      this.$router.push({
+        name: 'liveroomEdit',
+        params: { id: this.id.toString() }
+      })
     }
   }
 })
-
 </script>
 
 <style scoped>

src/views/modules/liveroom/liveroomList.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
     <avue-crud ref="crud" :page="page" :data="dataList" :option="tableOption" @on-load="getDataList">
+      <template slot="menuLeft">
+        <el-button type="primary" icon="el-icon-plus" size="small"
+          @click.stop="$router.push({ name: 'liveroomEdit', params: { id: 'new' } })">新增</el-button>
+      </template>
+
       <template slot-scope="scope" slot="showInList">
         <el-switch :value="scope.row.showInList" />
       </template>

src/views/modules/prod/prodInfo.vue

@@ -129,7 +129,6 @@ export default Vue.extend({
       })
     },
     onSubmit(form: IProdInfo, done: Function) {
-      console.log(form)
       const path = this.new ? "/goods/addGood" : "/goods/updateGood"
       const id_form: { id?: number } = this.new ? {} : { id: this.id }
       const data = Object.assign(form, id_form)
@@ -140,8 +139,6 @@ export default Vue.extend({
       // @ts-ignore
       delete data.title;
 
-      console.log(data)
-
       httpx.post(path, data).then((data) => {
         this.$message({
           message: '操作成功',
@@ -149,8 +146,7 @@ export default Vue.extend({
           duration: 1500
         })
         this.$router.back()
-      })
-      done()
+      }).finally(() => done())
     },
     notFound() {
       this.$router.replace("/404")

src/views/modules/prod/prodList.vue

@@ -90,7 +90,8 @@ export default Vue.extend({
     // 新增 / 修改
     addOrUpdateHandle(id?: number) {
       this.$router.push({
-        path: `/prod/product/${id ? id : "new"}`
+        name: "prodInfo",
+        params: { id: id ? id.toString() : "new" }
       })
     },
     // 条件查询