Skip to content

D
dd_school
Commit 2dd039c5 by zhaopanyu
Options

zpy 7.18

parent 2ac67099
Showing with 510 additions and 254 deletions
ruoyi-ui/src/api/smartSchool/logisticsManage/detailsofFundusage.js
import request from "@/utils/request";
//查询列表
export function getListlb(query) {
const { budgetName, purchaseName } = query;
return request({
url: "/purchaseApproval/selectPurchaseList",
url: `/purchaseApproval/selectPurchaseList?budgetName=${budgetName}&purchaseName=${purchaseName}`,
method: "get",
params: query,
});
}
// 查看详情
......
ruoyi-ui/src/api/smartSchool/officialWork/budgetFilling.js
......@@ -40,3 +40,10 @@ export function deleteDepart(id) {
method: "delete",
});
}
// 提交申请
export function submitApply(id) {
return request({
url: "/departmentBudget/submitApply/" + id,
method: "post",
});
}
ruoyi-ui/src/api/smartSchool/personWork/recordingroomAppointment/IdleSituation/index.js
......@@ -18,9 +18,9 @@ export function getAppointmentList(data) {
});
}
// 查询录播室使用情况
export function getstudioUse() {
export function getstudioUse(startTime, studioId) {
return request({
url: "/studioUse/list",
url: "/studioUse/list?startTime=" + startTime + "&studioId=" + studioId,
method: "get",
});
}
ruoyi-ui/src/views/smartSchool/logisticsManage/budgetApproval/index.vue
......@@ -314,23 +314,26 @@ export default {
// 使用页面跳转方法，例如 Vue Router
this.$router.push(detailUrl);
console.log(1222, row.projectName);
},
// 已使用金额操作
handleAmountClick(row) {
console.log('row', row);
this.$router.push({
path: "/logisticsManage/detailsofFundusage",
query: { projectName: row.projectName }
query: {
budgetName: row.budgetName,
purchaseName: row.purchaseName
}
});
},
// 获取列表
getList() {
this.loading = true;
getBudgetList(this.queryForm).then(response => {
this.loading = false;
this.budgetList = response.rows;
console.log(111, this.budgetList);
this.total = response.total;
}).catch(err => {
this.loading = false;
......
ruoyi-ui/src/views/smartSchool/logisticsManage/detailsofFundusage/index.vue
......@@ -12,7 +12,7 @@
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="clockRecordList" stripe>
<el-table :data="clockRecordList" stripe>
<el-table-column label="序号" type="index" width="55" align="center" />
<el-table-column label="标题" align="center" prop="purchaseName" />
<el-table-column label="采购费用-元" align="center" prop="purchaseMoney" />
......@@ -93,12 +93,17 @@ export default {
name: 'detailsofFundusage',
data() {
return {
// 预算项目
budgetName: '',
dialogEditNote: false,
form: {},
// 日期范围
dateRange: [],
// 模糊搜索
queryParams: {},
queryParams: {
purchaseName: "",
budgetName: "",
},
// 加载遮罩
loading: true,
// 记录条数
......@@ -120,14 +125,32 @@ export default {
},
// 目标页面的组件
created() {
const projectName = this.$route.query.projectName;
console.log(111,projectName); // 在控制台中输出 projectName 的值
// const budgetName = this.$route.query.budgetName;
// console.log(this.$route);
// console.log(111, budgetName); // 在控制台中输出 budgetName 的值
},
mounted() {
// const budgetName = this.$route.query.budgetName;
// console.log(this.$route);
// console.log('budgetName', budgetName);
},
methods: {
// 获取列表
getList() {
this.loading = true;
getListlb(this.queryParams).then(response => {
this.budgetName = this.$route.query.budgetName;
this.purchaseName = this.$route.query.purchaseName == undefined ? '' : this.$route.query.purchaseName;
console.log('this.budgetName', this.budgetName);
const query = {
budgetName: this.budgetName,
purchaseName: this.purchaseName
};
getListlb(query).then(response => {
console.log(111, this.budgetName);
this.clockRecordList = response.rows;
console.log(this.clockRecordList);
this.total = response.total;
......
ruoyi-ui/src/views/smartSchool/officialWork/budgetFilling/index.vue
......@@ -20,19 +20,31 @@
<el-table-column label="分管领导" prop="leadershipName" align="center" />
<el-table-column label="备注" prop="remark" align="center" />
<el-table-column label="填报时间" prop="tbTime" align="center" />
<el-table-column label="当前任务" prop="giveMoney" align="center" />
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['system:assets:edit']">修改
</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleLook(scope.row)">查看
</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['system:assets:delete']">删除
</el-button>
<el-table-column label="当前任务" prop="state" align="center">
<template slot-scope="{ row }">
{{ row.state === '0' ? "未提交" :
row.state === '1' ? "分管领导审核" :
row.state === '2' ? "审核通过" :
"审核不通过" }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="200px">
<template slot-scope="scope">
<div v-if="scope.row.state === '0'">
<!-- 未提交状态 -->
<el-button size="mini" type="text" icon="el-icon-s-promotion"
@click="submitApply(scope.row)">提交申请</el-button>
<el-button size="mini" type="text" icon="el-icon-edit"
@click="handleUpdate(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete"
@click="handleDelete(scope.row)">删除</el-button>
</div>
<div v-else>
<!-- 审核中、审核通过、审核不通过状态 -->
<el-button size="mini" type="text" icon="el-icon-search" @click="handleLook(scope.row)">查看</el-button>
</div>
</template>
</el-table-column>>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize"
@pagination="getList" />
......@@ -56,39 +68,38 @@
<el-button class="el-icon-plus" size="mini" @click="addLine()">增加</el-button>
<el-table border :data="xzTable" ref="xzTable" class="xzTable">
<el-table-column label="序号" type="index" align="center" />
<el-table-column prop="xmmc" label="项目名称" width="150" align="center">
<el-table-column prop="projectName" label="项目名称" width="150" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.xmmc" placeholder="请输入内容"></el-input>
<el-input v-model="scope.row.projectName" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
<el-table-column prop="sbzc" label="*申报政策依据、理由及主要内容" width="300" align="center">
<el-table-column prop="content" label="*申报政策依据、理由及主要内容" width="300" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.sbzc" placeholder="请输入内容"></el-input>
<el-input v-model="scope.row.content" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
<el-table-column prop="xmzcmx" label="*项目支出明细" align="center">
<el-table-column prop="projectExpenditures" label="*项目支出明细" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.xmzcmx" placeholder="请输入内容"></el-input>
<el-input v-model="scope.row.projectExpenditures" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
<el-table-column label="是否政府采购" prop="sfzfcg" align="center">
<el-table-column label="是否政府采购" prop="isGovernmentPurchase" align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.sfzfcg" placeholder="请选择" filterable default-first-option
ref="selectInput">
<el-option v-for="option in options" :key="option.userId" :label="option.userName"
:value="option.userId">
</el-option>
<el-select v-model="scope.row.isGovernmentPurchase" placeholder="请选择" filterable
default-first-option ref="selectInput">
<el-option label="是" value="0"></el-option>
<el-option label="否" value="1"></el-option>
</el-select>
</template>
</el-table-column>>
<el-table-column prop="sgje" label="*申请金额" align="center">
<el-table-column prop="applyMoney" label="*申请金额" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.sgje" placeholder="请输入内容"></el-input>
<el-input v-model="scope.row.applyMoney" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
<el-table-column prop="bz" label="备注" align="center">
<el-table-column prop="remark" label="备注" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.bz" placeholder="请输入内容"></el-input>
<el-input v-model="scope.row.remark" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
......@@ -98,12 +109,10 @@
</el-table-column>
</el-table>
<el-row style="margin-top: 15px;margin-left: 20px;">
<el-col :span="14">
<span class="uploadname" style="font-size: 16px;font-weight: bold;">填报人 :
<!-- <img v-if="jlqztp" :src="jlqztp" alt="">
<span v-else>{{ jlmc }}</span> -->
{{ postForm.tbr }}
</span>
</el-col>
<el-col :span="10">
......@@ -118,39 +127,42 @@
<!-- 查看对话框 -->
<el-dialog :title="title" :visible.sync="openLook" width="80%">
<div class="dialog-footer btn">
<el-button class="btnup" @click="cancel">关 闭</el-button>
</div>
<el-form ref="postForm" :model="postForm" :rules="rules" label-width="90px">
<div>
<h2 class="title">{{ year }}年{{ deptName }}科室预算</h2>
<h2 class="title">{{ postForm.year }}年{{ postForm.deptName }}科室预算</h2>
<div style="display: flex;justify-content: flex-end;margin-bottom: 10px;">单位:万元</div>
</div>
<!-- 表格数据 -->
<el-table border :data="lookTable" ref="table" class="lookTable">
<el-table-column label="序号" width="60" type="index" align="center" />
<el-table-column prop="xmmc" label="项目名称" align="center" />
<el-table-column prop="sbzc" label="申报政策依据、理由及主要内容" width="300" align="center" />
<el-table-column label="项目支出明细" prop="xmzcmx" align="center" />
<el-table-column label="是否政府采购" prop="sfzfcg" align="center" width="200" />
<el-table-column label="申请金额" prop="sqje" align="center" width="200" />
<el-table-column label="备注" prop="bz" align="center" width="200" />
<el-table-column prop="projectName" label="项目名称" align="center" />
<el-table-column prop="content" label="申报政策依据、理由及主要内容" width="300" align="center" />
<el-table-column label="项目支出明细" prop="projectExpenditures" align="center" />
<el-table-column label="是否政府采购" prop="isGovernmentPurchase" align="center" width="200" />
<el-table-column label="申请金额" prop="applyMoney" align="center" width="200" />
<el-table-column label="备注" prop="remark" align="center" width="200" />
</el-table>
<el-row style="margin-top: 15px;margin-left: 20px;">
<el-col :span="14">
<span class="uploadname" style="font-size: 16px;font-weight: bold;">填报人:
<!-- <img v-if="jlqztp" :src="jlqztp">
<span v-else>{{ jlmc }}</span> -->
<span class="uploadname" style="font-size: 16px;font-weight: bold;">填报人 :
{{ postForm.tbr }}
</span>
</el-col>
<el-col :span="10">
<span class="uploadname" style="font-size: 16px;font-weight: bold;">分管领导:
<!-- <img v-if="sjqztp" :src="sjqztp">
<!-- <img v-if="sjqztp" :src="sjqztp" alt="">
<span v-else>{{ sjmc }}</span> -->
</span>
</el-col>
</el-row>
</el-form>
</el-dialog>
</div>
</template>
......@@ -160,12 +172,14 @@ import {
editdeBudget,// 修改预算填报
queryDepart,//查看预算填报列表;
getdeBudgetList,//查看本单位预算填报列表;
deleteDepart,//// 删除预算填报
deleteDepart,// 删除预算填报
submitApply,//提交
} from '@/api/smartSchool/officialWork/budgetFilling'
import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getToken } from "@/utils/auth";
import { MessageBox } from "element-ui";
export default {
name: "budgetFilling",
......@@ -174,6 +188,8 @@ export default {
},
data() {
return {
// 填报人
tbr: "",
// 查询表单
queryForm: {
budgetYear: '',// 预算年度
......@@ -251,41 +267,33 @@ export default {
this.getDeptTree();
},
methods: {
/** 增加空行按钮 */
// 新增空行数据
addLine() {
const newLine = {
xh: "",
xmmc: "",
sbzc: "",
xmzcmx: "",
sfzfcg: "",
sbje: "",
bz: "",
}
this.index++
this.xzTable.push(newLine)
projectName: "",
content: "",
projectExpenditures: "",
isGovernmentPurchase: "",
applyMoney: "",
remark: "",
};
this.xzTable.push(newLine);
},
/** 删除空行按钮 */
deleteLine(row) {
console.log('multiple', this.multiple)
console.log('single', this.single)
if (this.multiple == false) {
const ids = row.id || this.ids;
this.$modal
.confirm("是否确认删除当前项数据")
.then(function () {
return delMyTidings(ids);
// 删除空行数据
deleteLine() {
if (this.xzTable.length > 0) {
MessageBox.confirm("是否确认删除本行数据？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
this.xzTable.pop();
})
.catch(() => {
// 用户取消删除操作
});
} else {
this.xzTable.pop()
}
},
// 处理精度
handlePrecision(value, precision = 2) {
......@@ -301,6 +309,7 @@ export default {
getdeBudgetList(this.queryForm).then(response => {
this.loading = false;
this.budgetList = response.rows;
console.log(111, response.rows);
this.total = response.total;
}).catch(err => {
this.loading = false;
......@@ -340,25 +349,55 @@ export default {
// 编辑按钮
handleUpdate(row) {
this.title = '修改预算批复信息';
queryDepart(row.id).then(response => {
this.postForm = response.data;
this.xzTable = response.data.schoolDepartmentBudgetProjectmxList;
this.postForm.tbr = this.$store.state.user.name;
console.log(111, this.postForm.tbr);
this.postForm.year = response.data.year;
this.postForm.deptName = response.data.deptName;
this.open = true;
this.$modal.closeLoading();
}).catch(err => {
this.$modal.closeLoading();
})
},
// 提交按钮
submitApply(row) {
this.$confirm('确认要提交申请?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
submitApply(row.id).then(res => {
if (res.code == 200) {
this.$message({
type: 'success',
message: '提交成功!'
})
this.getList()
}
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消提交'
})
})
},
// 查看按钮
handleLook(row) {
this.title = '修改预算批复信息';
this.$modal.loading('正在加载数据。请稍等...');
queryDepart(row.id).then(response => {
this.postForm = response.data;
this.lookTable = response.data.schoolDepartmentBudgetProjectmxList;
console.log(111, this.lookTable);
this.postForm.tbr = this.$store.state.user.name;
this.postForm.year = response.data.year;
this.postForm.deptName = response.data.deptName;
this.openLook = true;
this.$modal.closeLoading();
}).catch(err => {
this.$modal.closeLoading();
})
},
......@@ -366,6 +405,7 @@ export default {
handleAdd() {
this.reset();
this.open = true;
this.postForm.tbr = this.$store.state.user.name;
this.title = '新增预算批复信息'
},
......@@ -392,7 +432,7 @@ export default {
this.$refs["postForm"].validate(valid => {
if (valid) {
this.$modal.loading('正在上传数据，请稍等...');
if (this.postForm.id != null) {
if (this.postForm.leadershipId != null) {
// 编辑
editdeBudget(this.postForm).then(response => {
this.$modal.closeLoading();
......@@ -404,7 +444,9 @@ export default {
});
} else {
// 新增
adddeBudget(this.postForm).then(response => {
this.$modal.closeLoading();
console.log(this);
this.$modal.msgSuccess("新增成功");
......@@ -421,14 +463,12 @@ export default {
// 重置
reset() {
this.postForm = {
budgetYear: '',// 预算年度
deptId: null,// 部门ID科室
deptName: '',
budgetName: '',// 项目名称
isGov: '',// 是否政府采购
remark: '',// 备注
giveMoney: '',// 批复金额
schoolBudgetDetailsList: []
projectName: "",
content: "",
projectExpenditures: "",
isGovernmentPurchase: "",
applyMoney: "",
remark: "",
}
this.resetForm('postForm');
},
......@@ -534,6 +574,11 @@ export default {
}
.uploadname {
font-size: 16px;
font-weight: bold;
}
.btnup {
margin-left: 12px;
padding: 9px 25px;
......
ruoyi-ui/src/views/smartSchool/personWork/auditoriumReservation/index.vue
......@@ -499,6 +499,32 @@ export default {
this.week = "";
}
},
// 提交按钮
submitApply(row) {
this.$confirm('确认要提交申请?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
submitApply(row.id).then(res => {
if (res.code == 200) {
this.$message({
type: 'success',
message: '提交成功!'
})
this.getList()
}
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消提交'
})
})
},
// 搜索按钮
handleQuery() {
this.throttle(() => {
......
ruoyi-ui/src/views/smartSchool/personWork/recordingroomAppointment /IdleSituation/index.vue
......@@ -35,7 +35,7 @@
<thead>
<tr>
<!-- 表头 -->
<th></th>
<th style="background:none"></th>
<!-- 表格表头日期-->
<th style="background:none;font-size:16px;font-weight:normal" v-for="day in days" :key="day">{{ day }}</th>
</tr>
......@@ -142,10 +142,11 @@ export default {
changeDate() {
this.endTime = moment(this.queryParams.startTime).add(9, 'days')
},
fetchStudioUseData() {
// 调用接口获取录播室占用情况数据
console.log(123654, this.queryParams);
getstudioUse(this.queryParams).then((res) => {
getstudioUse(this.queryParams.startTime, this.queryParams.studioId).then((res) => {
this.studioUseData = res.rows;
console.log(123, this.studioUseData);
});
......
ruoyi-ui/src/views/smartSchool/venueReservation/useRecordingroom/index.vue
<template>
<div class="" style="padding:15px 10px 0 10px">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form-item label="日期" prop="startTime"><el-date-picker v-model="queryParams.startTime" type="daterange"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="请选择录播室" clearable>
</el-date-picker></el-form-item>
<el-form-item label="录播室" prop="roomId">
<el-select v-model="queryParams.roomId" placeholder="请选择录播室" clearable>
<el-option v-for="room in rooms" :key="room.id" :value="room.id" :label="room.name"></el-option>
<div>
<!-- 搜索条件表单 -->
<el-form :model="queryParams" ref="queryParams" size="small" :inline="true" v-show="showSearch">
<el-form-item label="日期" prop="startTime">
<el-date-picker size="small" v-model="queryParams.startTime" type="date" placeholder="开始日期"
value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDate" :picker-options="pickerOptions"
style="margin-right:10px">
</el-date-picker>
<el-date-picker size="small" type="date" v-model="endTime" disabled>
</el-date-picker>
</el-form-item>
<el-form-item prop="studioId" :rules="[{ required: true, message: '请选择录播室', trigger: 'change,blur' }]">
<el-select v-model="queryParams.studioId" placeholder="录播室">
<el-option v-for="item in options" :key="item.id" :label="item.studioName" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-button @click="fetchData">查询</el-button>
<el-button size="mini" type="primary" icon="el-icon-search" @click="fetchData">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form>
<table class="tabstyle" >
<p style="margin: 0 0 0 30px;font-size: 14px">
说明：（1）录播室每天开放上午四节、下午四节、晚上三节。共计每天11节。（2）请提前一天进行预约。（3）预约不可跨天，跨天请进行多次预约</p>
<!-- 录播室占用情况表格 -->
<table style="margin-left: 30px">
<thead>
<tr>
<th></th>
<th v-for="day in days" :key="day">{{ day }}</th>
<!-- 表头 -->
<th style="background:none"></th>
<!-- 表格表头日期-->
<th style="background:none;font-size:16px;font-weight:normal" v-for="day in days" :key="day">{{ day }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(timeSlot, index) in timeSlots" :key="index">
<td>{{ timeSlot }}</td>
<td v-for="(day, dayIndex) in days" :key="dayIndex" :class="{ occupied: isOccupied(day, index) }"
@click="selectTimeSlot(day, index)">
<!-- <td v-for="(day, dayIndex) in days" :key="dayIndex" :class="{-->
<!-- occupied: isOccupied(day, index),-->
<!-- selected: isSelected(day, index),-->
<!-- }" @mousedown="handleMouseDown(day, index)" @mouseup="handleMouseUp(day, index)"-->
<!-- @mouseenter="handleMouseEnter(day, index)" @click="handleCellClick(day, index)">-->
<!-- {{ isOccupied(day, index) ? "占用" : "" }}-->
<!-- </td>-->
<td v-for="(day, dayIndex) in days" :key="dayIndex" :class="{
occupied: isOccupied(day, index),
selected: isSelected(day, index),
}" @click="handleCellClick(day, index)">
{{ isOccupied(day, index) ? "占用" : "" }}
</td>
</tr>
</tbody>
</table>
<!-- 预约录播室 -->
<!-- <el-dialog :visible.sync="dialogVisible" title="预约录播室">
<el-form :model="bookingForm">
<el-form-item label="开始时间">
<el-date-picker
v-model="bookingForm.startTime"
type="datetime"
placeholder="请选择开始时间"
></el-date-picker>
</el-form-item>
<el-form-item label="节次">
<el-checkbox-group v-model="bookingForm.timeSlots">
<el-checkbox
v-for="timeSlot in timeSlots"
:key="timeSlot"
:label="timeSlot"
></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="录播内容">
<el-input
v-model="bookingForm.content"
placeholder="请输入录播内容"
></el-input>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="confirmBooking">确定</el-button>
</div>
</el-dialog> -->
</div>
</template>
<script>
import {
getAppointmentList, // 录播室下拉框列表
addIdle, // 新增录播室预约
getstudioUse, // 查询录播室使用情况
} from "@/api/smartSchool/personWork/recordingroomAppointment/IdleSituation";
import moment from 'moment'
export default {
data() {
return {
showSearch: true, // 显示搜索条件
dialogVisible: false, //预约录播室弹窗
successDialogVisible: false, //预约录播室成功弹窗
//选择日期限制
pickerOptions: {
disabledDate(time) {
//包含今天
// return time.getTime() < Date.now() - 8.64e7;
//不含今天
return time.getTime() < Date.now();
}
},
time: '',
studioUseData: [], // 存储录播室占用情况数据
showSearch: true, // 是否显示搜索条件
successDialogVisible: false, // 预约录播室成功的弹窗是否可见
//弹框表单
form: {
studioContent: ''
},
days: [], // 存储日期的数组
timeSlots: [], // 存储时间段的数组
selectedTimeSlots: [], // 存储已选时间段的数组
isMouseDown: false, // 鼠标按下标志位
startSelection: null, // 选中的开始时间段
endSelection: null, // 选中的结束时间段
options: "",
bookingForm: {
startTime: "",
timeSlots: "",
startTime: "", // 录播开始时间
timeSlots: "", // 预约的时间段
},
queryParams: {
roomId: "",
startTime: "",
studioId: "", // 录播室名称
startTime: "", // 查询的开始时间
},
rooms: [
// 录播室列表
{ id: 1, name: "录播室1" },
{ id: 2, name: "录播室2" },
{ id: 3, name: "录播室3" },
],
//表格占用数据
occupiedData: [],
//弹框标记符
remark: false,
rooms: [], //录播室下拉列表存储
endTime: ''
};
},
created() {
this.queryParams.startTime = moment(new Date()).add(1, 'days').format("YYYY-MM-DD");
this.endTime = moment(this.queryParams.startTime).add(9, 'days')
// 初始化日期和时间段
this.initDays();
this.initTimeSlots();
// 获取录播室下拉框列表
this.getRoomList();
this.fetchStudioUseData();
// this.fetchData();
},
methods: {
// 表格侧面节次循环
changeDate() {
this.endTime = moment(this.queryParams.startTime).add(9, 'days')
},
fetchStudioUseData() {
// 调用接口获取录播室占用情况数据
console.log(123654, this.queryParams);
getstudioUse(this.queryParams.startTime, this.queryParams.studioId).then((res) => {
this.studioUseData = res.rows;
console.log(123, this.studioUseData);
});
},
//表格占用显示
isOccupied(day, index) {
// 判断指定的时间段是否被占用
const occupiedData = this.studioUseData.find((item) => {
// console.log('Array.from(item.useJc)',item.useJc.split(','))
// console.log('Array.from(item.useJc)',index + 1)
return item.useDate === day && item.useJc.split(',').includes((index + 1).toString());
});
return occupiedData ? occupiedData.useUserId : false;
},
//表格点击选中
isSelected(day, index) {
if (this.isOccupied(day, index)) {
return false
} else {
// 检查时间段是否已选中
return this.selectedTimeSlots.some((selectedSlot) => {
// console.log('selectedSlot',selectedSlot)
return selectedSlot.day === day && selectedSlot.index === index;
});
}
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryParams");
this.fetchStudioUseData();
},
// 表单重置
reset() {
this.queryParams = {
startTime: "",
studioName: "",
};
this.resetForm("queryParams");
},
//表格点击事件
handleCellClick(day, index) {
console.log('day', day)
console.log('index', index + 1)
//占用点击不生效
if (this.isOccupied(day, index) && this.selectedTimeSlots.length == 0) {
this.remark = false
return
} else if (this.selectedTimeSlots.length == 0) {
// 处理单元格点击事件，点击第一个
this.selectedTimeSlots.push({ day, index })
this.remark = true
//没有选同一天
} else if (this.selectedTimeSlots[0].day != day) {
this.remark = true
this.$modal.alertWarning("预约不可跨天");
return;
} else {
this.remark = true
//筛选出符合条件的对象
const selectObj = this.selectedTimeSlots.find((item) => {
console.log('find', item.day == day && item.index == index)
return item.day == day && item.index == index
})
console.log('selectObj', selectObj)
if (selectObj != undefined) {
this.remark = true
this.selectedTimeSlots = this.selectedTimeSlots.filter(item => item.index != index)
this.selectedTimeSlots.length == 0 ? this.remark = false : this.selectedTimeSlots
} else {
this.selectedTimeSlots.push({ day, index })
}
}
},
// -----------------------------------------------------
/**录播室下拉框列表*/
getRoomList() {
getAppointmentList({}).then((res) => {
this.options = res.rows;
console.log('res', res)
});
},
initTimeSlots() {
// 初始化时间段
this.timeSlots = [
......@@ -117,127 +229,166 @@ export default {
"第十一节(晚上)",
];
},
// 表格日期循环
//表格头部日期
initDays() {
// 假设从明天开始，获取未来10天的日期
const startDate = new Date();
startDate.setDate(startDate.getDate() + 1);
// const startDate = new Date();
// startDate.setDate(startDate.getDate() + 1);
// console.log('startDate',startDate)
for (let i = 0; i < 10; i++) {
const currentDate = new Date(startDate);
currentDate.setDate(currentDate.getDate() + i);
const formattedDate = this.formatDate(currentDate);
const formattedDate = moment(this.queryParams.startTime).add(i, 'days').format("YYYY-MM-DD");
console.log('formattedDate', formattedDate)
// const currentDate = new Date(startDate);
// currentDate.setDate(currentDate.getDate() + i);
// const formattedDate = this.formatDate(currentDate);
this.days.push(formattedDate);
}
},
formatDate(date) {
// 格式化日期为'YYYY-MM-DD'的形式
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
// formatDate(date) {
// // 格式化日期为'YYYY-MM-DD'的形式
// const year = date.getFullYear();
// const month = String(date.getMonth() + 1).padStart(2, "0");
// const day = String(date.getDate()).padStart(2, "0");
// return `${year}-${month}-${day}`;
// },
// isOccupied(day, index) {
// // 判断指定的时间段是否被占用
// // 这里假设你有一个函数可以根据日期和时间段查询录播室的占用情况
// const isOccupied = false; // 使用你的接口或数据来判断
// return isOccupied;
// },
handleMouseDown(day, index) {
// 处理鼠标按下事件
this.isMouseDown = true;
this.startSelection = { day, index };
this.endSelection = { day, index };
},
// 指定某一天时间段录播室是否被占用
isOccupied(day, index) {
// 判断指定的时间段是否被占用
// 这里假设你有一个函数可以根据日期和时间段查询录播室的占用情况
const isOccupied = false; // 使用你的接口或数据来判断
return isOccupied;
},
// 检查录播室是否被占用
selectTimeSlot(day, index) {
// 选择或取消选择时间段
const selectedSlot = { day, index };
const isSelected = this.isSelected(selectedSlot);
if (isSelected) {
// 如果已选择，则取消选择
this.selectedTimeSlots = this.selectedTimeSlots.filter((slot) => {
return !(
slot.day === selectedSlot.day && slot.index === selectedSlot.index
);
});
handleMouseUp(day, index) {
// 处理鼠标松开事件
this.isMouseDown = false;
this.endSelection = { day, index };
// 根据按下的键盘按键进行选择操作
if (event.ctrlKey) {
// 按住 Ctrl 键进行跨格单选
this.selectedTimeSlots = [this.startSelection];
} else if (event.shiftKey) {
// 按住 Shift 键进行不跨格多选（同一天内）
this.selectedTimeSlots = [];
this.selectMultipleSlots();
} else {
// 如果未选择，则添加选择
this.selectedTimeSlots.push(selectedSlot);
// 单格单选
this.selectedTimeSlots = [this.startSelection];
}
},
isSelected(slot) {
// 检查时间段是否已选择
return this.selectedTimeSlots.some((selectedSlot) => {
return (
selectedSlot.day === slot.day && selectedSlot.index === slot.index
);
});
handleMouseEnter(day, index) {
// 处理鼠标进入单元格事件（用于 Shift 键多选）
if (this.isMouseDown && event.shiftKey) {
this.endSelection = { day, index };
this.selectMultipleSlots();
}
},
//多选事件
selectMultipleSlots() {
// 选择多个时间段（同一天内）
const startDay = this.startSelection.day;
const endDay = this.endSelection.day;
const startIndex = this.startSelection.index;
const endIndex = this.endSelection.index;
const selectedTimeSlots = [];
// 遍历日期范围内的时间段，选择符合条件的时间段
for (
let dayIndex = this.days.indexOf(startDay);
dayIndex <= this.days.indexOf(endDay);
dayIndex++
) {
const day = this.days[dayIndex];
// 对于同一天内的时间段，根据索引范围进行选择
if (
dayIndex === this.days.indexOf(startDay) &&
dayIndex === this.days.indexOf(endDay)
) {
for (let index = startIndex; index <= endIndex; index++) {
selectedTimeSlots.push({ day, index });
}
} else if (dayIndex === this.days.indexOf(startDay)) {
// 对于起始日期，选择从起始索引到最后一个时间段
for (let index = startIndex; index < this.timeSlots.length; index++) {
selectedTimeSlots.push({ day, index });
}
} else if (dayIndex === this.days.indexOf(endDay)) {
// 对于结束日期，选择从第一个时间段到结束索引
for (let index = 0; index <= endIndex; index++) {
selectedTimeSlots.push({ day, index });
}
} else {
// 其他日期完全选择
for (let index = 0; index < this.timeSlots.length; index++) {
selectedTimeSlots.push({ day, index });
}
}
}
this.selectedTimeSlots = selectedTimeSlots;
},
// 查询按钮
fetchData() {
// 预约按钮的点击事件处理程序
// 在这里，你可以处理预约操作，例如弹出对话框来录入录播内容并进行预约操作
// 在这里，你可以处理预约操作，例如弹出对话框来录入录播内容并进行预约
// 预约成功后，你可以根据已选时间段的数据来更新录播室的占用情况
// 提示预约成功等其他操作
console.log("查询成功");
},
// 预约按钮
reserve() {
// 预约按钮的点击事件处理程序
// 在这里，你可以处理预约操作，例如弹出对话框来录入录播内容并进行预约操作
this.successDialogVisible = true;
// 在这里，你可以处理预约操作，例如弹出对话框来录入录播内容并进行预约
// 预约成功后，你可以根据已选时间段的数据来更新录播室的占用情况
// 提示预约成功等其他操作
console.log("预约成功");
},
// 弹窗确定
confirmBooking() {
// 预约按钮的点击事件处理程序
// 在这里，你可以处理预约操作，例如弹出对话框来录入录播内容并进行预约操作
this.successDialogVisible = false;
this.$message({
message: "预约成功",
type: "success",
});
// 在这里，你可以处理预约操作，例如弹出对话框来录入录播内容并进行预约
// 预约成功后，你可以根据已选时间段的数据来更新录播室的占用情况
// 提示预约成功等其他操作
console.log("确定");
this.studioUseData = []
this.fetchStudioUseData()
// this.days = [];
// // 查询按钮的点击事件处理程序
// this.initDays()
// getstudioUse({
// startTime: this.queryParams.startTime,
// studioId: this.queryParams.studioId,
// })
// .then((res) => {
// this.studioUseData = res;
// })
// .then((response) => {
// // console.log(response);
// if (response.code == 200) {
// this.studioUseData = response.rows;
// console.log(222, response.rows);
// }
// });
// // 在这里，你可以发送请求获取录播室占用情况等数据
// console.log("查询成功");
},
},
};
</script>
<style scoped>
.tabstyle {
table {
border-collapse: collapse;
margin-bottom: 15px;
font-size: 16px !important;
margin-top: 20px;
}
.el-form {
margin-top: 20px;
margin-left: 30px;
}
.tabstyle td,
.tabstyle th {
border: 1px solid black;
th,
td {
border: 1px solid #000;
padding: 8px;
position: relative;
text-align: center;
}
.tabstyle input[type="text"] {
border: none;
outline: none;
font-size: inherit;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
/* opacity: 0; */
th {
background-color: #ccc;
}
.occupied {
background-color: #ccc;
color: #000;
cursor: not-allowed;
}
.selected {
background-color: #66b3ff;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment