This commit is contained in:
parent
f4104a97ab
commit
dcb7454386
|
|
@ -15,6 +15,12 @@
|
|||
"test:ci": "npm run lint && npm run test:unit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fullcalendar/core": "^6.1.15",
|
||||
"@fullcalendar/daygrid": "^6.1.15",
|
||||
"@fullcalendar/interaction": "^6.1.15",
|
||||
"@fullcalendar/list": "^6.1.15",
|
||||
"@fullcalendar/timegrid": "^6.1.15",
|
||||
"@fullcalendar/vue": "^6.1.15",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^1.0.2",
|
||||
"axios": "0.18.1",
|
||||
|
|
@ -30,6 +36,7 @@
|
|||
"js-cookie": "2.2.0",
|
||||
"jsonlint": "1.6.3",
|
||||
"jszip": "3.2.1",
|
||||
"moment": "^2.30.1",
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "2.4.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
//直播间列表
|
||||
export function liveroom() {
|
||||
return request({
|
||||
url: '/admin/liveroom/index',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 排班列表
|
||||
export function roomWorks(live_room_id) {
|
||||
return request({
|
||||
url: '/admin/liveroom/roomWorks',
|
||||
method: 'get',
|
||||
params: { live_room_id }
|
||||
})
|
||||
}
|
||||
// 可排班主播列表
|
||||
export function availableZhubo(params) {
|
||||
return request({
|
||||
url: '/admin/liveroom/availableZhubo',
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// 编辑直播间
|
||||
export function saveProducts(data) {
|
||||
return request({
|
||||
url: '/admin/liveroom/saveProducts',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
// 保存排班信息
|
||||
export function saveRoomWorks(data) {
|
||||
return request({
|
||||
url: '/admin/liveroom/saveRoomWorks',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import Vue from 'vue'
|
|||
import Cookies from 'js-cookie'
|
||||
|
||||
import 'normalize.css/normalize.css' // a modern alternative to CSS resets
|
||||
|
||||
import consts from '@/utils/consts'
|
||||
import Element from 'element-ui'
|
||||
import './styles/element-variables.scss'
|
||||
// import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖
|
||||
|
|
@ -36,7 +36,7 @@ if (process.env.NODE_ENV === 'production') {
|
|||
const { mockXHR } = require('../mock')
|
||||
mockXHR()
|
||||
}
|
||||
|
||||
Vue.prototype.$consts = consts
|
||||
Vue.use(Element, {
|
||||
size: Cookies.get('size') || 'medium' // set element-ui default size
|
||||
// locale: enLang // 如果使用中文，无需设置，请删除
|
||||
|
|
|
|||
|
|
@ -103,6 +103,15 @@ export const asyncRoutes = [
|
|||
roles: ['admin']
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'scheduling',
|
||||
component: () => import('@/views/scheduling/index'),
|
||||
name: 'scheduling',
|
||||
meta: {
|
||||
title: '直播排班',
|
||||
roles: ['admin']
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'onlines',
|
||||
component: () => import('@/views/onlines/online.vue'),
|
||||
|
|
|
|||
|
|
@ -1,28 +1,56 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
|
||||
<div class="filter-container">
|
||||
<el-input v-model="listQuery.username" placeholder="用户名" style="width: 200px; margin-right: 10px;"
|
||||
class="filter-item" />
|
||||
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">
|
||||
<el-input
|
||||
v-model="listQuery.username"
|
||||
placeholder="用户名"
|
||||
style="width: 200px; margin-right: 10px"
|
||||
class="filter-item"
|
||||
/>
|
||||
<el-button
|
||||
class="filter-item"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
@click="getList"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
|
||||
<el-button class="filter-item" type="primary" icon="el-icon-circle-plus" @click="onAdd">
|
||||
添加主播排班
|
||||
<el-button
|
||||
class="filter-item"
|
||||
type="primary"
|
||||
icon="el-icon-circle-plus"
|
||||
@click="onAdd"
|
||||
>
|
||||
添加主播
|
||||
</el-button>
|
||||
|
||||
</div>
|
||||
|
||||
<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
|
||||
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="list"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column align="center" fixed label="操作" width="220">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="danger" @click="onDel(scope.row)" size="small" icon="el-icon-delete-solid">
|
||||
<el-button
|
||||
type="danger"
|
||||
@click="onDel(scope.row)"
|
||||
size="small"
|
||||
icon="el-icon-delete-solid"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
|
||||
<el-button type="primary" @click="onSave(scope.row)" size="small" icon="el-icon-edit">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="onAdd(scope.row)"
|
||||
size="small"
|
||||
icon="el-icon-edit"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
</template>
|
||||
|
|
@ -36,191 +64,236 @@
|
|||
|
||||
<el-table-column align="center" label="用户名" width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.admin.username }}</span>
|
||||
<span>{{ scope.row.username }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="姓名" width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.admin.name }}</span>
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- <el-table-column align="center" width="100px" label="头像">
|
||||
<el-table-column align="center" label="手机号" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-avatar :size="50" :src="scope.row.admin.avatar"></el-avatar>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
|
||||
<el-table-column align="center" label="排班时间">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.start| parseTime('{y}-{m}-{d} {h}:{i}') }} - {{ scope.row.end| parseTime('{y}-{m}-{d} {h}:{i}') }}
|
||||
<span>{{ scope.row.mobile }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="岗位" width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.type == 2 ? "主播" : "中控" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column align="center" label="排班时间">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.start | parseTime("{y}-{m}-{d} {h}:{i}") }} -
|
||||
{{ scope.row.end | parseTime("{y}-{m}-{d} {h}:{i}") }}
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
|
||||
<el-table-column align="center" label="平台">
|
||||
<!-- <el-table-column align="center" label="平台">
|
||||
<template slot-scope="scope">
|
||||
<template v-for="i in scope.row.os">
|
||||
{{ oss[i] }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
|
||||
<el-table-column align="center" label="订单数">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.orders }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="直播时长">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.work_time }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="订单金额">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.total/100 }}
|
||||
{{ scope.row.total }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="140px" align="center" label="创建时间">
|
||||
<!-- <el-table-column width="140px" align="center" label="创建时间">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.create_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
||||
<span>{{
|
||||
scope.row.create_time | parseTime("{y}-{m}-{d} {h}:{i}")
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="140px" align="center" label="修改时间">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.update_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
||||
<span>{{
|
||||
scope.row.update_time | parseTime("{y}-{m}-{d} {h}:{i}")
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.page"
|
||||
:limit.sync="listQuery.limit"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<!--
|
||||
<el-dialog title="修改排班" :visible.sync="dialogWork">
|
||||
<el-form label-width="120px" :model="item">
|
||||
|
||||
<el-form-item label="上班时间">
|
||||
<el-date-picker
|
||||
v-model="item.date"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期">
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="渠道">
|
||||
<el-checkbox-group v-model="item.oss">
|
||||
<el-checkbox v-for="(v,i,k) in oss" :label="i" :key="k">{{v}}</el-checkbox>
|
||||
<el-checkbox v-for="(v, i, k) in oss" :label="i" :key="k">{{
|
||||
v
|
||||
}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="onSave()">保 存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-dialog> -->
|
||||
|
||||
<el-dialog title="主播排班表" :visible.sync="dialogCreate">
|
||||
<el-form label-width="120px">
|
||||
<el-row v-for="an in anchors" :key="an.id" style="margin-bottom: 10px;">
|
||||
<el-col :span="2">{{ an.name }}</el-col>
|
||||
<el-col :span="14">
|
||||
<el-date-picker
|
||||
v-model="an.times"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
:default-time="['07:00:00', '23:59:59']"
|
||||
style="width:90%"
|
||||
end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-checkbox-group v-model="an.os">
|
||||
<el-checkbox v-for="(v,i,k) in oss" :label="i" :key="k">{{v}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog :title="title" :visible.sync="dialogCreate">
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input placeholder="用户名" v-model="form.username"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input placeholder="姓名" v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="mobile">
|
||||
<el-input placeholder="请输入手机号" v-model="form.mobile"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio :label="2">主播</el-radio>
|
||||
<el-radio :label="3">中控</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" v-loading="loading" @click="onSaves()">保 存</el-button>
|
||||
<el-button type="primary" v-loading="loading" @click="onSaves(form)"
|
||||
>保 存</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
|
||||
|
||||
export default {
|
||||
name: 'Works',
|
||||
name: "Works",
|
||||
components: { Pagination },
|
||||
data() {
|
||||
return {
|
||||
oss: {},
|
||||
list: null,
|
||||
title: "",
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
loading: false,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
limit: 20,
|
||||
},
|
||||
form: {
|
||||
username: "",
|
||||
name: "",
|
||||
mobile: "",
|
||||
type: 2,
|
||||
},
|
||||
dialogWork: false,
|
||||
dialogCreate: false,
|
||||
item: {},
|
||||
anchors: []
|
||||
}
|
||||
anchors: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.$axios.get('/admin/work/index', { params: this.listQuery }).then(response => {
|
||||
this.list = response.data.data
|
||||
this.total = response.data.total
|
||||
this.oss = response.ext.oss
|
||||
this.listLoading = false
|
||||
}).catch(err => {
|
||||
})
|
||||
this.$axios
|
||||
.get("/admin/liveroom/zhuboStatistics", { params: this.listQuery })
|
||||
.then((response) => {
|
||||
this.list = response.data.data;
|
||||
this.total = response.data.total;
|
||||
this.listLoading = false;
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
onDel(item) {
|
||||
this.$axios.post('/admin/work/del', {id: item.id}).then(res => {
|
||||
this.dialogVisible = false
|
||||
this.getList()
|
||||
}).catch(err => {
|
||||
|
||||
})
|
||||
this.$axios
|
||||
.post("/admin/work/del", { id: item.id })
|
||||
.then((res) => {
|
||||
this.dialogVisible = false;
|
||||
this.getList();
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
onSave(from) {
|
||||
if(from) {
|
||||
this.$set(from,'date',[new Date(from.start), new Date(from.end)]);
|
||||
this.item = from;
|
||||
this.item.os = from.os+'';
|
||||
this.dialogWork = true;
|
||||
return
|
||||
}
|
||||
this.$axios.post('/admin/work/save', this.item).then(response => {
|
||||
this.dialogWork = false
|
||||
this.getList()
|
||||
}).catch(err => {
|
||||
})
|
||||
},
|
||||
onAdd() {
|
||||
this.$axios.get('/admin/work/anchor').then((res) => {
|
||||
this.anchors = res.data || []
|
||||
this.dialogCreate = true
|
||||
}).catch(err=>{
|
||||
|
||||
})
|
||||
// onSave(from) {
|
||||
// if (from) {
|
||||
// this.$set(from, "date", [new Date(from.start), new Date(from.end)]);
|
||||
// this.item = from;
|
||||
// this.item.os = from.os + "";
|
||||
// this.dialogWork = true;
|
||||
// return;
|
||||
// }
|
||||
// this.$axios
|
||||
// .post("/admin/work/save", this.item)
|
||||
// .then((response) => {
|
||||
// this.dialogWork = false;
|
||||
// this.getList();
|
||||
// })
|
||||
// .catch((err) => {});
|
||||
// },
|
||||
onAdd(item) {
|
||||
// this.anchors = res.data || [];
|
||||
this.dialogCreate = true;
|
||||
this.$nextTick((res) => {
|
||||
this.$refs["form"].resetFields();
|
||||
this.title = item.id ? "编辑" : "添加";
|
||||
this.form = item.id
|
||||
? { ...item }
|
||||
: {
|
||||
username: "",
|
||||
name: "",
|
||||
mobile: "",
|
||||
type: 2,
|
||||
};
|
||||
});
|
||||
},
|
||||
onSaves() {
|
||||
if(this.loading) return
|
||||
this.loading = true
|
||||
this.$axios.post('/admin/work/save2', this.anchors).then(res => {
|
||||
this.dialogCreate = false
|
||||
this.loading = false
|
||||
}).catch(err=> {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$axios
|
||||
.post("/admin/admin/save", this.form)
|
||||
.then((response) => {
|
||||
this.$message({
|
||||
message: "成功",
|
||||
type: "success",
|
||||
});
|
||||
this.dialogCreate = false;
|
||||
this.getList();
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,279 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="scheduling_head">
|
||||
<div class="head_lable">产品编号:</div>
|
||||
<div
|
||||
class="scheduling_tab"
|
||||
@click="handleClick(index)"
|
||||
:key="index"
|
||||
:class="activeName == item.id ? 'active' : ''"
|
||||
v-for="(item, index) in liveroomList"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<el-button type="primary" style="margin-left: 210px" @click="handleEdit"
|
||||
>编辑</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="scheduling_tab_pana">
|
||||
<div class="table-list" v-for="item in roomWorksList">
|
||||
<div class="table-list_item">
|
||||
<div class="tit">
|
||||
{{ item.date }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-list_item">
|
||||
<div class="tit">
|
||||
{{ item.date_name
|
||||
}}<i
|
||||
@click="handleAdds('', item.date)"
|
||||
class="el-icon-circle-plus"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-list-box" v-for="it in item.work">
|
||||
<div class="border" @dblclick="handleAdds(it, item.date)">
|
||||
<div style="margin-bottom: 10px">
|
||||
AM {{ extractTime(it.start) }}~{{ extractTime(it.end) }}
|
||||
</div>
|
||||
<div>主播：{{ it.zhubo.name }}</div>
|
||||
<div>中控：{{ it.zhongkong.name }}</div>
|
||||
<div>路线：{{ it.route ? it.route : "无" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<liveroom-update
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
@update="saveProducts"
|
||||
></liveroom-update>
|
||||
<roomWorksUpdate
|
||||
v-if="roomVisible"
|
||||
ref="roomUpdate"
|
||||
:title="title"
|
||||
@update="saveRoomWorks"
|
||||
></roomWorksUpdate>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
liveroom,
|
||||
roomWorks,
|
||||
availableZhubo,
|
||||
saveProducts,
|
||||
saveRoomWorks,
|
||||
} from "@/api/scheduling";
|
||||
import liveroomUpdate from "./liveroom-update.vue";
|
||||
import roomWorksUpdate from "./room-works";
|
||||
export default {
|
||||
name: "Scheduling",
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
activeName: "",
|
||||
listLoading: true,
|
||||
title: "添加排班",
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
title: "",
|
||||
status: "",
|
||||
},
|
||||
total: 0,
|
||||
dialogVisible: false,
|
||||
dialogType: "new",
|
||||
liveroomList: [],
|
||||
roomWorksList: [],
|
||||
product_ids: "",
|
||||
live_room_id: "",
|
||||
addOrUpdateVisible: false,
|
||||
roomVisible: false,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
liveroomUpdate,
|
||||
roomWorksUpdate,
|
||||
},
|
||||
async mounted() {
|
||||
await this.liveroom();
|
||||
this.roomWorks();
|
||||
},
|
||||
methods: {
|
||||
extractTime(dateTimeStr) {
|
||||
// 定义正则表达式来匹配时间部分
|
||||
const regex = /^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/;
|
||||
const match = dateTimeStr.match(regex);
|
||||
|
||||
if (!match) {
|
||||
throw new Error("不匹配");
|
||||
}
|
||||
|
||||
// 提取时间部分
|
||||
return `${match[4]}:${match[5]}:${match[6]}`;
|
||||
},
|
||||
isCurrentTimeAfter(startTimeStr) {
|
||||
// 将开始时间字符串转换为Date对象
|
||||
const startTime = new Date(startTimeStr);
|
||||
|
||||
// 获取当前时间
|
||||
const currentTime = new Date();
|
||||
|
||||
// 比较当前时间和开始时间
|
||||
return currentTime >= startTime;
|
||||
},
|
||||
// 直播间列表
|
||||
async liveroom() {
|
||||
try {
|
||||
let { data } = await liveroom();
|
||||
this.liveroomList = data;
|
||||
this.activeName = this.liveroomList[0].id + "";
|
||||
this.live_room_id = this.liveroomList[0].id;
|
||||
this.product_ids = this.liveroomList[0].product_ids;
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
// 排班列表
|
||||
async roomWorks() {
|
||||
try {
|
||||
let { data } = await roomWorks(this.live_room_id);
|
||||
this.roomWorksList = data;
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
// tab切换
|
||||
handleClick(i) {
|
||||
let { id, product_ids } = this.liveroomList[i];
|
||||
this.live_room_id = id;
|
||||
this.product_ids = product_ids;
|
||||
this.activeName = id + "";
|
||||
this.roomWorks();
|
||||
},
|
||||
// 编辑直播间
|
||||
handleEdit() {
|
||||
this.addOrUpdateVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs["addOrUpdate"].init(this.live_room_id, this.product_ids);
|
||||
});
|
||||
},
|
||||
// 添加排班
|
||||
handleAdds(form, date) {
|
||||
console.log(form);
|
||||
|
||||
this.title = form.id ? "编辑排班" : "添加排班";
|
||||
if (form.id && this.isCurrentTimeAfter(form.start)) {
|
||||
return this.$message.error("当前时间无法编辑");
|
||||
}
|
||||
this.roomVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs["roomUpdate"].init(this.live_room_id, { ...form }, date);
|
||||
});
|
||||
},
|
||||
saveProducts(form) {
|
||||
this.liveroom();
|
||||
saveProducts(form).then((res) => {
|
||||
this.$message({
|
||||
message: "直播间编辑成功",
|
||||
type: "success",
|
||||
});
|
||||
});
|
||||
},
|
||||
saveRoomWorks(form) {
|
||||
saveRoomWorks(form).then((res) => {
|
||||
this.roomWorks();
|
||||
this.$message({
|
||||
message: "添加排班成功",
|
||||
type: "success",
|
||||
});
|
||||
});
|
||||
},
|
||||
handleAdd() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
position: relative;
|
||||
padding-bottom: 60px; /* 分页条的高度 */
|
||||
}
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
display: none;
|
||||
}
|
||||
.filter-container,
|
||||
.el-table {
|
||||
padding-bottom: 5px; /* 分页条的高度，以避免内容重叠 */
|
||||
}
|
||||
::v-deep .el-row {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.head_lable {
|
||||
font-size: 14px;
|
||||
color: #3d3d3d;
|
||||
font-weight: 700;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.scheduling_head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.scheduling_tab {
|
||||
display: inline-block;
|
||||
padding: 12px 28px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #e2e2e2;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
& + .scheduling_tab {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
border-color: #1269ff;
|
||||
}
|
||||
.el-icon-circle-plus {
|
||||
color: #367af0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.scheduling_tab_pana {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// align-items: center;
|
||||
.table-list {
|
||||
flex-basis: 14.3%;
|
||||
.table-list_item {
|
||||
height: 56px;
|
||||
background: #e4ecff;
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #d7ddeb;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
.tit {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
.table-list-box {
|
||||
padding: 15px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
border: 1px solid #d7ddeb;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
.border {
|
||||
padding: 13px;
|
||||
background: #367af0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
title="编辑直播间"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item label="直播间id" prop="product_ids">
|
||||
<el-input v-model="form.product_ids"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="handleEdit">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
product_ids: "",
|
||||
live_room_id: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init(live_room_id, product_ids) {
|
||||
this.dialogVisible = true;
|
||||
this.form.product_ids = product_ids;
|
||||
this.form.live_room_id = live_room_id;
|
||||
console.log(this.form);
|
||||
},
|
||||
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
handleEdit() {
|
||||
this.dialogVisible = false;
|
||||
this.$emit("update", this.form);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form :rules="rules" ref="form" :model="form" label-width="80px">
|
||||
<el-form-item label="直播间" prop="live_room_id">
|
||||
<el-select v-model="form.live_room_id" placeholder="请选择直播间">
|
||||
<el-option
|
||||
v-for="item in liveroomList"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="开始时间" prop="start">
|
||||
<el-date-picker
|
||||
@change="handleDate"
|
||||
v-model="form.start"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="end">
|
||||
<el-date-picker
|
||||
v-model="form.end"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
type="datetime"
|
||||
@change="handleDate"
|
||||
placeholder="选择日期时间"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="时间">
|
||||
<el-time-select
|
||||
placeholder="起始时间"
|
||||
v-model="startTime"
|
||||
:picker-options="{
|
||||
start: '08:00',
|
||||
step: '00:15',
|
||||
end: '24:00',
|
||||
}"
|
||||
>
|
||||
</el-time-select>
|
||||
<el-time-select
|
||||
placeholder="结束时间"
|
||||
@change="handleDate"
|
||||
v-model="endTime"
|
||||
:picker-options="{
|
||||
start: '08:00',
|
||||
step: '00:15',
|
||||
end: '24:00',
|
||||
minTime: startTime,
|
||||
}"
|
||||
>
|
||||
</el-time-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="主播" prop="zhubo_id">
|
||||
<el-select v-model="form.zhubo_id" placeholder="请选择主播">
|
||||
<el-option
|
||||
v-for="item in zhuboList"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
:disabled="item.disabled"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="中控" prop="zhongkong_id">
|
||||
<el-select v-model="form.zhongkong_id" placeholder="请选择中控">
|
||||
<el-option
|
||||
v-for="item in zhongkongList"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
:disabled="item.disabled"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="路线">
|
||||
<el-input v-model="form.route"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="handleEdit">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { availableZhubo, liveroom } from "@/api/scheduling";
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "添加排班",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
form: {
|
||||
live_room_id: "",
|
||||
start: "",
|
||||
end: "",
|
||||
zhubo_id: "",
|
||||
zhongkong_id: "",
|
||||
route: "",
|
||||
},
|
||||
zhuboList: [],
|
||||
zhongkongList: [],
|
||||
liveroomList: [],
|
||||
dayDate: "",
|
||||
rules: {
|
||||
live_room_id: [
|
||||
{ required: true, message: "请选择直播间", trigger: "change" },
|
||||
],
|
||||
zhongkong_id: [
|
||||
{ required: true, message: "请选择中控", trigger: "change" },
|
||||
],
|
||||
zhubo_id: [
|
||||
{ required: true, message: "请选择主播", trigger: "change" },
|
||||
],
|
||||
// date: [{ required: true, message: "请选择时间", trigger: "change" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
form: function () {
|
||||
this.handleDate();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
extractTime(dateTimeStr) {
|
||||
// 定义正则表达式来匹配时间部分
|
||||
const regex = /^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/;
|
||||
const match = dateTimeStr.match(regex);
|
||||
|
||||
if (!match) {
|
||||
throw new Error("不匹配");
|
||||
}
|
||||
|
||||
// 提取时间部分
|
||||
return `${match[4]}:${match[5]}`;
|
||||
},
|
||||
init(live_room_id, form, date) {
|
||||
this.dialogVisible = true;
|
||||
this.$nextTick((res) => {
|
||||
this.$refs["form"].resetFields();
|
||||
this.dayDate = date;
|
||||
this.form = !!form.id
|
||||
? form
|
||||
: {
|
||||
live_room_id: "",
|
||||
start: "",
|
||||
end: "",
|
||||
zhubo_id: "",
|
||||
zhongkong_id: "",
|
||||
};
|
||||
this.form.live_room_id = live_room_id;
|
||||
this.startTime = form.id ? this.extractTime(this.form.start) : "";
|
||||
this.endTime = form.id ? this.extractTime(this.form.end) : "";
|
||||
console.log(this.startTime);
|
||||
console.log(this.endTime);
|
||||
});
|
||||
this.liveroom();
|
||||
},
|
||||
// 直播间列表
|
||||
async liveroom() {
|
||||
try {
|
||||
let { data } = await liveroom();
|
||||
this.liveroomList = data;
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
handleDate() {
|
||||
this.form.end = `${this.dayDate} ${this.endTime}:00`;
|
||||
this.form.start = `${this.dayDate} ${this.startTime}:00`;
|
||||
if (this.form.end && this.form.start) {
|
||||
availableZhubo({ ...this.form, type: 2 }).then((res) => {
|
||||
this.zhuboList = res.data;
|
||||
});
|
||||
availableZhubo({ ...this.form, type: 3 }).then((res) => {
|
||||
this.zhongkongList = res.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
handleEdit() {
|
||||
// this.form.end = `${this.dayDate} ${this.startTime}:00`;
|
||||
// this.form.start = `${this.dayDate} ${this.endTime}:00`;
|
||||
this.dialogVisible = false;
|
||||
this.$emit("update", this.form);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
@ -38,8 +38,8 @@ module.exports = {
|
|||
},
|
||||
proxy: {
|
||||
'/dev-api': { // 接口地址 以 api开头的都走下面的配置
|
||||
target: 'https://www.szjinao.cn', // 代理目标地址为后端服务器地址 127.0.0.1 192.168.1.2
|
||||
// target: 'http://192.168.0.6:8787', // 代理目标地址为后端服务器地址 127.0.0.1 192.168.1.2
|
||||
// target: 'https://www.szjinao.cn', // 代理目标地址为后端服务器地址 127.0.0.1 192.168.1.2
|
||||
target: 'http://192.168.0.100:8787', // 代理目标地址为后端服务器地址 127.0.0.1 192.168.1.2
|
||||
ws: true, // 是否支持 websocket 请求 支持
|
||||
changeOrigin: true, // 是否启用跨域
|
||||
pathRewrite: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue