初始化
This commit is contained in:
hezhidong
@@ -0,0 +1,73 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// get获取列表
|
||||
export function getOrders (params) {
|
||||
return request({
|
||||
url: '/calendar/dayInfo/select/showCalendard',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
// 新增
|
||||
export function postAddOrders (data) {
|
||||
return request({
|
||||
url: '/calendar/dayInfo/insert',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 修改
|
||||
export function postUpdateOrders (data) {
|
||||
return request({
|
||||
url: '/calendar/dayInfo/update',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 删除
|
||||
export function deleteOrders (id) {
|
||||
return request({
|
||||
url: `/calendar/dayInfo/delete/${id}`,
|
||||
method: 'delete',
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 新增周
|
||||
export function postAddWeek (data) {
|
||||
return request({
|
||||
url: '/weekinfo/insert',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// get获取周次列表
|
||||
export function getWeek (params) {
|
||||
return request({
|
||||
url: '/weekinfo/select/term',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
// 获取所对应的年、周、时间字典
|
||||
export function getTerm (){
|
||||
return request({
|
||||
url: '/calendar/weekinfo/select/term',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
// 获取组织架构
|
||||
export function getOrganization (superId){
|
||||
return request({
|
||||
url: `/user-dept/user/dept/${superId}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="newlyClick" type="primary" size="mini" icon="el-icon-plus"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button @click="resetClick" type="info" size="mini" icon="iconfont icon-biaodan"
|
||||
>重置</el-button
|
||||
>
|
||||
<el-button @click="searchClick" type="warning" size="mini" icon="el-icon-search"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-input
|
||||
v-if="false"
|
||||
v-model="searchData"
|
||||
size="mini"
|
||||
style="width: 20%"
|
||||
placeholder="请输入搜索的关键字"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonHead",
|
||||
data() {
|
||||
return {
|
||||
searchData: "",
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
newlyClick() {
|
||||
// 在此处调用父组件传入的方法叫父组件做事情
|
||||
this.$emit("newly-data");
|
||||
},
|
||||
resetClick() {
|
||||
this.$emit("reset-data");
|
||||
},
|
||||
searchClick() {
|
||||
this.$emit("search-data", this.searchData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<el-table
|
||||
border
|
||||
:header-cell-style="{
|
||||
background: '#f5f7fa',
|
||||
}"
|
||||
:data="tableData"
|
||||
style="width: 100%; margin-top: 20px"
|
||||
height="650"
|
||||
size="mini"
|
||||
>
|
||||
<el-table-column
|
||||
v-if="column.label !== 'id' && column.label != '校区id'"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
:min-width="column.minWidth"
|
||||
></el-table-column>
|
||||
<el-table-column prop="zip" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-popconfirm @confirm="handleDelete(scope.row)" :title="'确定要删除？'">
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
name: "CommonTables",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
console.log("this.columns");
|
||||
console.log(this.columns);
|
||||
for (let i = 0; i < this.columns.length; i++) {
|
||||
console.log(this.columns[i].width);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row.id);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
console.log(row);
|
||||
this.editFunc(row);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
minWidth: column.minWidth ? column.minWidth : "",
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.s {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,562 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<div style="display: flex">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-button
|
||||
@click="handleImport"
|
||||
style="margin-left: 10px"
|
||||
type="info"
|
||||
plain
|
||||
icon="el-icon-upload2"
|
||||
size="mini"
|
||||
>导入</el-button
|
||||
>
|
||||
</div>
|
||||
<el-form :model="form" size="mini" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="校区名称">
|
||||
<el-select
|
||||
v-model="query.school"
|
||||
placeholder="请选择校区"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in schoolArr"
|
||||
:label="item.name"
|
||||
:value="item.deptId"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="年份" prop="yyyy">
|
||||
<el-date-picker
|
||||
size="mini"
|
||||
v-model="query.yyyy"
|
||||
type="year"
|
||||
value-format="yyyy"
|
||||
placeholder="请选择年份"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="学期" prop="campus">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="query.campus"
|
||||
placeholder="请选择学期"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option label="春期" value="春期"></el-option>
|
||||
<el-option label="秋期" value="秋期"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="周" prop="week">
|
||||
<el-input
|
||||
size="mini"
|
||||
type="number"
|
||||
v-model="query.week"
|
||||
clearable
|
||||
placeholder="请输入第几周"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="日期" prop="day">
|
||||
<el-date-picker
|
||||
v-model="query.day"
|
||||
type="date"
|
||||
size="mini"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="参与人" prop="principal">
|
||||
<el-input
|
||||
size="mini"
|
||||
v-model="query.principal"
|
||||
placeholder="请输入参与人"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="负责人" prop="participant">
|
||||
<el-input
|
||||
size="mini"
|
||||
v-model="query.participant"
|
||||
placeholder="请输入负责人"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTables
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTables>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="80px"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<el-form-item label="校区" prop="school">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="form.school"
|
||||
placeholder="请选择校区"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in schoolArr"
|
||||
:label="item.name"
|
||||
:value="item.deptId"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="年份" prop="yyyy">
|
||||
<el-date-picker
|
||||
size="mini"
|
||||
v-model="form.yyyy"
|
||||
type="year"
|
||||
value-format="yyyy"
|
||||
placeholder="请选择年份"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="学期" prop="campus">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="form.campus"
|
||||
placeholder="请选择学期"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option label="春期" value="春期"></el-option>
|
||||
<el-option label="秋期" value="秋期"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="周" prop="week">
|
||||
<el-input
|
||||
size="mini"
|
||||
type="number"
|
||||
v-model="form.week"
|
||||
placeholder="请输入第几周"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期" prop="day">
|
||||
<el-date-picker
|
||||
v-model="form.day"
|
||||
type="date"
|
||||
size="mini"
|
||||
placeholder="选择日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="工作内容" prop="workInfo">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="form.workInfo"
|
||||
placeholder="请输入工作内容"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="参与人" prop="principal">
|
||||
<el-input
|
||||
size="mini"
|
||||
v-model="form.principal"
|
||||
placeholder="请输入参与人"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="participant">
|
||||
<el-input
|
||||
size="mini"
|
||||
v-model="form.participant"
|
||||
placeholder="请输入负责人"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input size="mini" v-model="form.remark" placeholder="请输入备注"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 导入对话框 -->
|
||||
<el-dialog
|
||||
:title="upload.title"
|
||||
:visible.sync="upload.open"
|
||||
width="400px"
|
||||
append-to-body
|
||||
>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:limit="1"
|
||||
accept=".xlsx, .xls"
|
||||
name="multipartFile"
|
||||
:headers="upload.headers"
|
||||
:action="upload.url + '?updateSupport=' + upload.updateSupport"
|
||||
:disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:auto-upload="false"
|
||||
drag
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip text-center" slot="tip">
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
style="font-size: 12px; vertical-align: baseline"
|
||||
><a
|
||||
:href="$store.state.campusCalendarTempentUrl + '/calendar/dayInfo/getExcel'"
|
||||
>下载模板</a
|
||||
>
|
||||
</el-link>
|
||||
</div>
|
||||
</el-upload>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||||
<el-button @click="upload.open = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonTables from "./components/CommonTables.vue";
|
||||
import {
|
||||
postAddOrders,
|
||||
getOrders,
|
||||
postUpdateOrders,
|
||||
deleteOrders,
|
||||
getOrganization,
|
||||
} from "./api";
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
var validates = (rule, value, callback) => {
|
||||
console.log(value);
|
||||
if (value <= 0 || value == null) {
|
||||
callback(new Error("最小值为1"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
form: {
|
||||
school: null, // 校区
|
||||
campus: null, // 春秋期
|
||||
yyyy: null, // 年
|
||||
week: null, // 周
|
||||
day: null, // 开始时间
|
||||
workInfo: null, // 工作内容
|
||||
principal: null, // 参与人
|
||||
participant: null, //负责人
|
||||
remark: null, // 备注
|
||||
},
|
||||
schoolArr: [], // 校区
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
},
|
||||
{
|
||||
label: "校区id",
|
||||
prop: "school",
|
||||
},
|
||||
{
|
||||
label: "校区名称",
|
||||
prop: "schoolName",
|
||||
},
|
||||
{
|
||||
label: "春/秋期",
|
||||
prop: "campus",
|
||||
},
|
||||
{
|
||||
label: "年",
|
||||
prop: "yyyy",
|
||||
},
|
||||
{
|
||||
label: "周",
|
||||
prop: "week",
|
||||
},
|
||||
{
|
||||
label: "工作内容",
|
||||
prop: "workInfo",
|
||||
minWidth: "200",
|
||||
},
|
||||
{
|
||||
label: "参与人",
|
||||
prop: "principal",
|
||||
},
|
||||
{
|
||||
label: "负责人",
|
||||
prop: "participant",
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "remark",
|
||||
minWidth: "150",
|
||||
},
|
||||
{
|
||||
label: "日期",
|
||||
prop: "day",
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
school: null, // 校区
|
||||
campus: null, // 春秋期
|
||||
yyyy: null, // 年
|
||||
week: null, // 周
|
||||
day: null, // 时间
|
||||
principal: null, // 参与人
|
||||
participant: null, //负责人
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: "新增", // 弹出层按钮
|
||||
rules: {
|
||||
school: [{ required: true, message: "请选择校区", trigger: "change" }],
|
||||
campus: [{ required: true, message: "请选择学期", trigger: "blur" }],
|
||||
yyyy: [{ required: true, message: "请选择年份", trigger: "blur" }],
|
||||
week: [{ required: true, validator: validates, trigger: "change" }],
|
||||
day: [{ required: true, message: "请选择开始日期", trigger: "blur" }],
|
||||
workInfo: [{ required: true, message: "请输入工作内容", trigger: "blur" }],
|
||||
principal: [{ required: true, message: "请输入参与人", trigger: "blur" }],
|
||||
participant: [{ required: true, message: "请输入负责人", trigger: "blur" }],
|
||||
},
|
||||
upload: {
|
||||
// 是否显示弹出层（行事历导入）
|
||||
open: false,
|
||||
// 弹出层标题（行事历导入）
|
||||
title: "",
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 是否更新已经存在的部门数据
|
||||
updateSupport: 0,
|
||||
// 设置上传的请求头部
|
||||
headers: this.$store.state.uploadHeader,
|
||||
// 上传的地址
|
||||
url: process.env.VUE_APP_BASE_API + "/calendar/dayInfo/uploadExcel",
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
CommonTables,
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
// {“yyyy”，”campus”，”day”，”week”，”workInfo”，”principal”，”participant”，”remark”}
|
||||
getOrganization(0).then((res) => {
|
||||
console.log(res);
|
||||
this.schoolArr = res.data;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/** 导入按钮操作 */
|
||||
handleImport() {
|
||||
this.upload.title = "兴趣班导入";
|
||||
this.upload.open = true;
|
||||
},
|
||||
// 文件上传中处理
|
||||
handleFileUploadProgress(event, file, fileList) {
|
||||
this.upload.isUploading = true;
|
||||
},
|
||||
// 文件上传成功处理
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
this.upload.open = false;
|
||||
this.upload.isUploading = false;
|
||||
this.$refs.upload.clearFiles();
|
||||
this.$alert(
|
||||
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
||||
response.msg +
|
||||
"</div>",
|
||||
"导入结果",
|
||||
{ dangerouslyUseHTMLString: true }
|
||||
);
|
||||
this.getList();
|
||||
},
|
||||
// 提交上传文件
|
||||
submitFileForm() {
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
// 点击确定提交
|
||||
onClickSubmit() {
|
||||
console.log(this.form);
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
let obj = { ...this.form };
|
||||
if (this.title == "新增行事历") {
|
||||
postAddOrders(obj).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.getList();
|
||||
this.resetForm();
|
||||
this.message();
|
||||
this.isVisible = false;
|
||||
} else if (res.code == 300) {
|
||||
this.message(res.msg, "error");
|
||||
} else {
|
||||
this.message("新增失败", "error");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
postUpdateOrders(obj).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.getList();
|
||||
this.resetForm();
|
||||
this.message("修改成功");
|
||||
this.isVisible = false;
|
||||
} else if (res.code == 300) {
|
||||
this.message(res.msg, "error");
|
||||
} else {
|
||||
this.message("修改失败", "error");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = "新增行事历";
|
||||
this.resetForm();
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
campus: null, // 春秋期
|
||||
yyyy: null, // 年
|
||||
week: null, // 周
|
||||
day: null, // 时间
|
||||
principal: null, // 参与人
|
||||
participant: null, //负责人
|
||||
};
|
||||
this.getList();
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
school: null,
|
||||
campus: null, // 春秋期
|
||||
yyyy: null, // 年
|
||||
week: null, // 周
|
||||
day: null, // 天
|
||||
workInfo: null, // 工作内容
|
||||
principal: null, // 参与人
|
||||
participant: null, //负责人
|
||||
remark: null, // 备注
|
||||
};
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.query.pageNum = 1;
|
||||
this.query.pageSize = 10;
|
||||
this.getList();
|
||||
},
|
||||
// 获取数据
|
||||
getList() {
|
||||
getOrders(this.query).then((res) => {
|
||||
console.log(res);
|
||||
this.data = res.data.list.map((item) => {
|
||||
// item.day = this.formatDate(item.day)
|
||||
return item;
|
||||
});
|
||||
this.total = res.data.total;
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
deleteData(id) {
|
||||
console.log("------------------------------------------");
|
||||
console.log(id);
|
||||
deleteOrders(id).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.message("删除成功");
|
||||
this.getList();
|
||||
} else {
|
||||
this.message("删除失败", "error");
|
||||
}
|
||||
});
|
||||
},
|
||||
// 编辑
|
||||
editData(item) {
|
||||
this.isVisible = true;
|
||||
this.title = "修改行事历";
|
||||
this.resetForm();
|
||||
this.form = item;
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum) {
|
||||
console.log("点击切换页数" + pageNum);
|
||||
this.query.pageNum = pageNum;
|
||||
this.getList();
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize) {
|
||||
this.pageSize = pageSize;
|
||||
this.query.pageSize = pageSize;
|
||||
this.getList();
|
||||
console.log(pageSize);
|
||||
},
|
||||
message(message = "新增成功", type = "success") {
|
||||
// type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
html::v-deep.stretchNone {
|
||||
.el-textarea__inner {
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<el-form :model="form" size="mini" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="校区">
|
||||
<el-select
|
||||
v-model="form.teacherName"
|
||||
placeholder="请选择校区"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option label="城西校园" value="1"></el-option>
|
||||
<el-option label="城北校区" value="2"></el-option>
|
||||
<el-option label="龙马潭校区区" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="发生时期">
|
||||
<el-select
|
||||
v-model="form.className"
|
||||
placeholder="请选择发生时期"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option label="春季" value="春季"></el-option>
|
||||
<el-option label="秋季" value="秋季"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="负责人">
|
||||
<el-select v-model="value2" placeholder="请选择校区" clearable class="w100">
|
||||
<el-option label="张三" value="1"></el-option>
|
||||
<el-option label="李四" value="2"></el-option>
|
||||
<el-option label="王麻子" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="参与人">
|
||||
<el-select v-model="value6" placeholder="请选择校区" clearable class="w100">
|
||||
<el-option label="张三" value="1"></el-option>
|
||||
<el-option label="李四" value="2"></el-option>
|
||||
<el-option label="王麻子" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="日期">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
v-model="value6"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTables
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTables>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="demo-ruleForm">
|
||||
<el-form-item label="学期" prop="campus">
|
||||
<el-select
|
||||
v-model="form.campus"
|
||||
placeholder="请选择学期"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option label="春季" value="春季"></el-option>
|
||||
<el-option label="秋季" value="秋季"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="年份" prop="yyyy">
|
||||
<el-date-picker
|
||||
v-model="form.yyyy"
|
||||
type="year"
|
||||
value-format="yyyy"
|
||||
placeholder="请选择年份">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="周" prop="week" >
|
||||
<el-input size="mini" v-model="form.week" placeholder="请输入周" type="number"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期" prop="date" >
|
||||
<el-date-picker
|
||||
v-model="form.date"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postAddWeek, getWeek, putOrders } from './api'
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
campus: null, // 春秋期
|
||||
yyyy: null, // 年
|
||||
week: null, // 周
|
||||
date: null, // 开始时间和结束时间
|
||||
},
|
||||
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
},
|
||||
{
|
||||
label: "春/秋期",
|
||||
prop: "campus",
|
||||
},
|
||||
{
|
||||
label: "年",
|
||||
prop: "yyyy",
|
||||
},
|
||||
{
|
||||
label: "周",
|
||||
prop: "week",
|
||||
},
|
||||
|
||||
{
|
||||
label: "开始时间",
|
||||
prop: "startTime",
|
||||
},
|
||||
{
|
||||
label: "结束时间",
|
||||
prop: "endTime",
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: '新增', // 弹出层按钮
|
||||
rules: {
|
||||
campus: [
|
||||
{ required: true, message: '请选择学期', trigger: 'blur' },
|
||||
],
|
||||
yyyy: [
|
||||
{ required: true, message: '请选择年份', trigger: 'blur' },
|
||||
],
|
||||
week: [
|
||||
{ required: true, message: '请选择第几周', trigger: 'blur' },
|
||||
],
|
||||
date: [
|
||||
{ required: true, message: '请选择日期', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList()
|
||||
// {“yyyy”，”campus”，”day”，”week”，”workInfo”，”principal”，”participant”，”remark”}
|
||||
let obj = {
|
||||
campus: null, // 春秋期
|
||||
yyyy: null, // 年
|
||||
week: null, // 周
|
||||
date: null, // 开始时间和结束时间
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let obj = { ...this.form }
|
||||
obj.startTime = this.form.date[0]
|
||||
obj.endTime = this.form.date[1]
|
||||
postAddWeek(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
|
||||
}else{
|
||||
this.message('新增失败', 'error')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
campus: null, // 春秋期
|
||||
yyyy: null, // 年
|
||||
week: null, // 周
|
||||
date: null, // 开始结束时间
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getWeek(this.query).then( res =>{
|
||||
console.log(res)
|
||||
this.data = res.data.map(item =>{
|
||||
return item
|
||||
})
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(item) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(item)
|
||||
// putOrders().then(res =>{
|
||||
|
||||
// })
|
||||
},
|
||||
// 编辑
|
||||
editData() {
|
||||
this.isVisible = true;
|
||||
this.title = '修改'
|
||||
this.resetForm()
|
||||
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum){
|
||||
console.log( '点击切换页数' +pageNum)
|
||||
this.query.pageNum = pageNum
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize){
|
||||
this.pageSize = pageSize
|
||||
this.query.pageSize = pageSize
|
||||
this.getList()
|
||||
console.log(pageSize)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
if(type == 'success'){
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
html::v-deep.stretchNone{
|
||||
.el-textarea__inner{
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,370 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<el-form :model="form" size="mini" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="校区">
|
||||
<el-select
|
||||
v-model="form.teacherName"
|
||||
placeholder="请选择校区"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option label="城西校园" value="1"></el-option>
|
||||
<el-option label="城北校区" value="2"></el-option>
|
||||
<el-option label="龙马潭校区区" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="发生时期">
|
||||
<el-select
|
||||
v-model="form.className"
|
||||
placeholder="请选择发生时期"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option label="春季" value="春季"></el-option>
|
||||
<el-option label="秋季" value="秋季"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="负责人">
|
||||
<el-select v-model="value2" placeholder="请选择校区" clearable class="w100">
|
||||
<el-option label="张三" value="1"></el-option>
|
||||
<el-option label="李四" value="2"></el-option>
|
||||
<el-option label="王麻子" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="参与人">
|
||||
<el-select v-model="value6" placeholder="请选择校区" clearable class="w100">
|
||||
<el-option label="张三" value="1"></el-option>
|
||||
<el-option label="李四" value="2"></el-option>
|
||||
<el-option label="王麻子" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="日期">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
v-model="value6"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTables
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTables>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="demo-ruleForm">
|
||||
<el-form-item label="学期" prop="campus">
|
||||
<el-select
|
||||
v-model="form.campus"
|
||||
placeholder="请选择学期"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option label="春季" value="春季"></el-option>
|
||||
<el-option label="秋季" value="秋季"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="年份" prop="yyyy">
|
||||
<el-date-picker
|
||||
v-model="form.yyyy"
|
||||
type="year"
|
||||
placeholder="请选择年份">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="周" prop="week" >
|
||||
<el-date-picker
|
||||
v-model="form.week"
|
||||
type="week"
|
||||
placeholder="请选择第几周">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始日期" prop="day" >
|
||||
<el-date-picker
|
||||
v-model="form.day"
|
||||
type="date"
|
||||
placeholder="选择开始日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="工作内容" prop="workInfo">
|
||||
<el-input type="textarea" v-model="form.workInfo" placeholder="请输入工作内容"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="参与人" prop="principal">
|
||||
<el-input size="mini" v-model="form.principal" placeholder="请输入参与人"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="participant">
|
||||
<el-input size="mini" v-model="form.participant" placeholder="请输入负责人"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input size="mini" v-model="form.remark" placeholder="请输入备注"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postAddOrders, getOrders, putOrders } from './api'
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
campus: null, // 春秋期
|
||||
yyyy: null, // 年
|
||||
week: null, // 周
|
||||
day: null, // 开始时间
|
||||
workInfo: null, // 工作内容
|
||||
principal: null, // 参与人
|
||||
participant: null, //负责人
|
||||
remark: null, // 备注
|
||||
},
|
||||
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
},
|
||||
{
|
||||
label: "春/秋期",
|
||||
prop: "campus",
|
||||
},
|
||||
{
|
||||
label: "年",
|
||||
prop: "yyyy",
|
||||
},
|
||||
{
|
||||
label: "周",
|
||||
prop: "week",
|
||||
},
|
||||
{
|
||||
label: "工作内容",
|
||||
prop: "workInfo",
|
||||
},
|
||||
{
|
||||
label: "参与人",
|
||||
prop: "principal",
|
||||
},
|
||||
{
|
||||
label: "负责人",
|
||||
prop: "participant",
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "remark",
|
||||
},
|
||||
{
|
||||
label: "开始",
|
||||
prop: "startTime",
|
||||
},
|
||||
{
|
||||
label: "结束时间",
|
||||
prop: "endTime",
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: '新增', // 弹出层按钮
|
||||
rules: {
|
||||
campus: [
|
||||
{ required: true, message: '请选择学期', trigger: 'blur' },
|
||||
],
|
||||
yyyy: [
|
||||
{ required: true, message: '请选择年份', trigger: 'blur' },
|
||||
],
|
||||
week: [
|
||||
{ required: true, message: '请选择第几周', trigger: 'blur' },
|
||||
],
|
||||
day: [
|
||||
{ required: true, message: '请选择开始日期', trigger: 'blur' },
|
||||
],
|
||||
workInfo: [
|
||||
{ required: true, message: '请输入工作内容', trigger: 'blur' },
|
||||
],
|
||||
principal: [
|
||||
{ required: true, message: '请输入参与人', trigger: 'blur' },
|
||||
],
|
||||
participant: [
|
||||
{ required: true, message: '请输入负责人', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList()
|
||||
// {“yyyy”，”campus”，”day”，”week”，”workInfo”，”principal”，”participant”，”remark”}
|
||||
let obj = {
|
||||
campus: null, // 春秋期
|
||||
yyyy: null, // 年
|
||||
week: null, // 周
|
||||
day: null, // 开始时间
|
||||
workInfo: null, // 工作内容
|
||||
principal: null, // 参与人
|
||||
participant: null, //负责人
|
||||
remark: null, // 备注
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let obj = { ...this.form }
|
||||
let startTime = new Date(this.form.startTime)
|
||||
let endTime = new Date(this.form.endTime)
|
||||
obj.startTime = startTime
|
||||
obj.endTime = endTime
|
||||
console.log(startTime)
|
||||
console.log(endTime)
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
|
||||
}else{
|
||||
this.message('新增失败', 'error')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
campus: null, // 春秋期
|
||||
yyyy: null, // 年
|
||||
week: null, // 周
|
||||
day: null, // 开始时间
|
||||
workInfo: null, // 工作内容
|
||||
principal: null, // 参与人
|
||||
participant: null, //负责人
|
||||
remark: null, // 备注
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getOrders(this.query).then( res =>{
|
||||
console.log(res)
|
||||
this.data = res.data.map(item =>{
|
||||
return item
|
||||
})
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(item) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(item)
|
||||
// putOrders().then(res =>{
|
||||
|
||||
// })
|
||||
},
|
||||
// 编辑
|
||||
editData() {
|
||||
this.isVisible = true;
|
||||
this.title = '修改'
|
||||
this.resetForm()
|
||||
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum){
|
||||
console.log( '点击切换页数' +pageNum)
|
||||
this.query.pageNum = pageNum
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize){
|
||||
this.pageSize = pageSize
|
||||
this.query.pageSize = pageSize
|
||||
this.getList()
|
||||
console.log(pageSize)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
html::v-deep.stretchNone{
|
||||
.el-textarea__inner{
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
export default [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
{
|
||||
label: "teacherId",
|
||||
prop: "teacherId",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "classDate",
|
||||
prop: "classDate",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "date",
|
||||
prop: "date",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
{
|
||||
label: "weeks",
|
||||
prop: "weeks",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "classDays",
|
||||
prop: "classDays",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "任课老师",
|
||||
prop: "teacherName",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "课程名称",
|
||||
prop: "className",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "上课教室",
|
||||
prop: "classRoom",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "上课时间",
|
||||
prop: "time",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "最大报名人数",
|
||||
prop: "maxNum",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "现在报名人数",
|
||||
prop: "nowNum",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "报名开始时间",
|
||||
prop: "startTime",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "报名结束时间",
|
||||
prop: "endTime",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "课程开始日期",
|
||||
prop: "classStartDate",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "课程结束日期",
|
||||
prop: "classEndDate",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "课程图片",
|
||||
prop: "classImg",
|
||||
type: "image",
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
type: "signUp",
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,881 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<div style="display: flex">
|
||||
<CommonHead
|
||||
@newly-data="fetchDataNewlyAdded"
|
||||
@reset-data="reset"
|
||||
@search-data="search"
|
||||
></CommonHead>
|
||||
<!-- newly-data新增事件 -->
|
||||
<!-- reset-data重置表单内容 -->
|
||||
<!-- search-data搜索事件，接收被搜索的内容 -->
|
||||
<el-button
|
||||
@click="handleImport"
|
||||
style="margin-left: 10px"
|
||||
type="info"
|
||||
plain
|
||||
icon="el-icon-upload2"
|
||||
size="mini"
|
||||
>导入</el-button
|
||||
>
|
||||
</div>
|
||||
<el-form
|
||||
:model="searchFormDatass"
|
||||
size="mini"
|
||||
label-width="100px"
|
||||
class="mt35 mb35"
|
||||
>
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="任课教师">
|
||||
<el-select
|
||||
filterable
|
||||
v-model="searchFormDatass.teacherId"
|
||||
placeholder="请选择任课教师"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="(items, index) in teacher"
|
||||
:key="index"
|
||||
:label="items.name"
|
||||
:value="items.userId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="课程名称">
|
||||
<el-input
|
||||
v-model="searchFormDatass.className"
|
||||
placeholder="请输入课程名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="上课教室">
|
||||
<el-input
|
||||
v-model="searchFormDatass.classRoom"
|
||||
placeholder="请输入课程名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="最大报名人数">
|
||||
<el-input
|
||||
type="number"
|
||||
v-model="searchFormDatass.maxNum"
|
||||
placeholder="请输入最大报名人数"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="现在报名人数">
|
||||
<el-input
|
||||
type="number"
|
||||
v-model="searchFormDatass.nowNum"
|
||||
placeholder="请输入现在报名人数"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="状态">
|
||||
<el-select
|
||||
filterable
|
||||
v-model="searchFormDatass.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option label="报名中" value="0"></el-option>
|
||||
<el-option label="报名已结束" value="1"></el-option>
|
||||
<el-option label="已删除" value="2"></el-option>
|
||||
<el-option label="课程已结束" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb20">
|
||||
<el-form-item label="报名日期">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
class="w100"
|
||||
v-model="searchFormDatass.date"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col ::xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb20">
|
||||
<el-form-item label="课程日期">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
class="w100"
|
||||
v-model="searchFormDatass.classDate"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<!-- 表格数据 -->
|
||||
|
||||
<InterestClassTabes
|
||||
class="box-card"
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:upload-func="uploadBut"
|
||||
:registered-func="registeredStudentsBtn"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
v-loading="loadingIST"
|
||||
></InterestClassTabes>
|
||||
<!-- 分页器 -->
|
||||
<el-pagination
|
||||
style="margin-top: 10px"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
:current-page="1"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
:page-size="10"
|
||||
:pager-count="7"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
<el-dialog
|
||||
:before-close="handleClose"
|
||||
:title="formData.id ? '修改兴趣班' : '添加兴趣班'"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
>
|
||||
<el-form
|
||||
:rules="rules"
|
||||
:model="formData"
|
||||
label-width="100px"
|
||||
size="mini"
|
||||
ref="ruleForm"
|
||||
>
|
||||
<el-form-item label="任课教师" prop="teacherId">
|
||||
<el-select
|
||||
filterable
|
||||
v-model="formData.teacherId"
|
||||
placeholder="请选择任课教师"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="(items, index) in teacher"
|
||||
:key="index"
|
||||
:label="items.name"
|
||||
:value="items.userId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="课程名称" prop="className">
|
||||
<el-input v-model="formData.className" placeholder="请输入课程名称"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="上课教室" prop="classRoom">
|
||||
<el-input v-model="formData.classRoom" placeholder="请输入上课教室"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="报名人数" prop="maxNum">
|
||||
<el-input
|
||||
type="number"
|
||||
v-model="formData.maxNum"
|
||||
placeholder="请输入最大报名人数"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="报名日期" prop="date">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
v-model="formData.date"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="上课时间" prop="time">
|
||||
<el-time-picker
|
||||
value-format="HH:mm"
|
||||
v-model="formData.time"
|
||||
placeholder="任意时间点"
|
||||
>
|
||||
</el-time-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="时间模式" prop="timeClass">
|
||||
<div @change="selectLongMode" style="display: inline-block">
|
||||
<el-radio v-model="radio" label="1">长期日期</el-radio>
|
||||
</div>
|
||||
<div @change="selectSelected" style="display: inline-block; margin-left: 20px">
|
||||
<el-radio v-model="radio" label="2">选定日期</el-radio>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="课程日期" prop="classDate" v-if="radio == '1'">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
v-model="formData.classDate"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="固定周次" prop="weeks" v-if="radio == '1'">
|
||||
<el-checkbox-group v-model="formData.weeks">
|
||||
<el-checkbox
|
||||
v-for="(item, index) in weeksData"
|
||||
:key="index"
|
||||
:label="item.value"
|
||||
>{{ item.weeksday }}</el-checkbox
|
||||
>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="固定日期" prop="classDays" v-if="radio == '2'">
|
||||
<el-date-picker
|
||||
type="dates"
|
||||
v-model="formData.classDays"
|
||||
placeholder="选择一个或多个日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="图片上传" prop="classImg">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="$store.state.imgUrl"
|
||||
:headers="$store.state.uploadHeader"
|
||||
:show-file-list="false"
|
||||
name="img"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
>
|
||||
<img v-if="formData.classImg" :src="formData.classImg" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon clss"></i>
|
||||
<div slot="tip" class="el-upload__tip">
|
||||
只能上传jpg/png/gif/jpeg文件，且不超过500kb
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeAdd">取 消</el-button>
|
||||
<el-button type="primary" @click="addInterestClass('ruleForm')">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!-- 导入对话框 -->
|
||||
<el-dialog
|
||||
:title="upload.title"
|
||||
:visible.sync="upload.open"
|
||||
width="400px"
|
||||
append-to-body
|
||||
>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
name="multipartFile"
|
||||
:limit="1"
|
||||
accept=".xlsx, .xls"
|
||||
:headers="upload.headers"
|
||||
:action="upload.url"
|
||||
:disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:on-error="failedToUploadCourse"
|
||||
:auto-upload="false"
|
||||
drag
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip text-center" slot="tip">
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
style="font-size: 12px; vertical-align: baseline"
|
||||
><a
|
||||
:href="
|
||||
$store.state.campusCalendarTempentUrl + '/interestclass/course/getExcel'
|
||||
"
|
||||
>下载模板</a
|
||||
>
|
||||
</el-link>
|
||||
</div>
|
||||
</el-upload>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||||
<el-button @click="upload.open = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 导入学生对话框 -->
|
||||
<el-dialog
|
||||
:title="uploadStudents.title"
|
||||
:visible.sync="uploadStudents.open"
|
||||
width="400px"
|
||||
append-to-body
|
||||
>
|
||||
<el-upload
|
||||
ref="uploadStudents"
|
||||
name="multipartFile"
|
||||
:limit="1"
|
||||
accept=".xlsx, .xls"
|
||||
:headers="uploadStudents.headers"
|
||||
:action="uploadStudents.url"
|
||||
:disabled="uploadStudents.isUploading"
|
||||
:on-progress="handleFileUploadProgressStudents"
|
||||
:on-success="handleFileSuccessStudents"
|
||||
:on-error="failedToUploadStudent"
|
||||
:auto-upload="false"
|
||||
drag
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip text-center" slot="tip">
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
style="font-size: 12px; vertical-align: baseline"
|
||||
><a
|
||||
:href="
|
||||
$store.state.campusCalendarTempentUrl + '/interestclass/enroll/getExcel'
|
||||
"
|
||||
>下载模板</a
|
||||
>
|
||||
</el-link>
|
||||
</div>
|
||||
</el-upload>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitFileFormStudents">确 定</el-button>
|
||||
<el-button @click="uploadStudents.open = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 查看班级报名的学生列表 -->
|
||||
<el-dialog title="已报名学生列表" :visible.sync="enrollmentStudentData.open">
|
||||
<div v-loading="loadingST">
|
||||
<InterestClassTabesSt
|
||||
:delete-func="deleteDataS"
|
||||
:edit-func="editDataS"
|
||||
:columns="columnsST"
|
||||
:data="enrollmentStudentData.data"
|
||||
></InterestClassTabesSt>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InterestClassTabes from "../components/InterestClassTabes.vue";
|
||||
import {
|
||||
getListOfInterestClasses,
|
||||
requestAddInterestClass,
|
||||
requestDeleteInterestClass,
|
||||
requestObtainAListOfTeacherNames,
|
||||
reqObtainAListOfRegisteredStudents,
|
||||
} from "../api.js";
|
||||
import InterestClassTabesSt from "../components/InterestClassTabesSt.vue";
|
||||
import columns from "./columns";
|
||||
import columnsST from "./listOfRegisteredStudents";
|
||||
import { Session } from "@/utils/storage";
|
||||
export default {
|
||||
name: "InterestClassEntry",
|
||||
components: {
|
||||
InterestClassTabes,
|
||||
InterestClassTabesSt,
|
||||
},
|
||||
data() {
|
||||
// 自定义表单验证
|
||||
var validates = (rule, value, callback) => {
|
||||
if (value <= 0 || value == null) {
|
||||
callback(new Error("最小值为1"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var timeRules = (rule, value, callback) => {
|
||||
if (this.radio == "") {
|
||||
callback(new Error("请选择时间模式"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
// 单选
|
||||
radio: "1",
|
||||
radiobt1: false,
|
||||
radiobt2: false,
|
||||
// 星期
|
||||
weeksData: [
|
||||
{ weeksday: "星期天", value: "1" },
|
||||
{ weeksday: "星期一", value: "2" },
|
||||
{ weeksday: "星期二", value: "3" },
|
||||
{ weeksday: "星期三", value: "4" },
|
||||
{ weeksday: "星期四", value: "5" },
|
||||
{ weeksday: "星期五", value: "6" },
|
||||
{ weeksday: "星期六", value: "7" },
|
||||
],
|
||||
dialogVisible: false,
|
||||
// 初始值
|
||||
formData: {
|
||||
classEndDate: null,
|
||||
classImg: null,
|
||||
className: null,
|
||||
classRoom: null,
|
||||
classDate: [],
|
||||
date: [],
|
||||
endTime: null,
|
||||
maxNum: null,
|
||||
nowNum: null,
|
||||
startTime: null,
|
||||
status: null,
|
||||
teacherId: null,
|
||||
teacherName: null,
|
||||
classDays: null,
|
||||
weeks: [],
|
||||
time: null,
|
||||
},
|
||||
// 搜索初始值
|
||||
searchFormDatass: {
|
||||
className: null,
|
||||
classRoom: null,
|
||||
classDate: [],
|
||||
date: [],
|
||||
maxNum: null,
|
||||
nowNum: null,
|
||||
status: null,
|
||||
teacherId: null,
|
||||
teacherName: null,
|
||||
},
|
||||
|
||||
// 对话框表单验证
|
||||
rules: {
|
||||
teacherId: [{ required: true, message: "请选择任课教师", trigger: "change" }],
|
||||
className: [{ required: true, message: "请输入课程名称", trigger: "change" }],
|
||||
classRoom: [{ required: true, message: "请输入上课教室", trigger: "change" }],
|
||||
maxNum: [{ required: true, validator: validates, trigger: "change" }],
|
||||
classImg: [{ required: true, message: "请选择图片上传", trigger: "change" }],
|
||||
time: [{ required: true, message: "请选择上课时间", trigger: "change" }],
|
||||
date: [{ required: true, message: "请选择报名日期", trigger: "change" }],
|
||||
classDate: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择课程日期",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
classDays: [{ required: true, message: "请选择固定日期", trigger: "change" }],
|
||||
timeClass: [{ required: true, validator: timeRules, trigger: "change" }],
|
||||
},
|
||||
// 表格行
|
||||
columns,
|
||||
columnsST,
|
||||
// 表格数据
|
||||
data: [],
|
||||
loadingIST: false,
|
||||
|
||||
// 分页数据总条数
|
||||
total: 10,
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
},
|
||||
// 老师列表
|
||||
teacher: [],
|
||||
//上传课程
|
||||
upload: {
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 是否更新已经存在的部门数据
|
||||
updateSupport: 0,
|
||||
// 设置上传的请求头部
|
||||
headers: { Authorization: "Bearer " + "getToken()" },
|
||||
// 上传的地址
|
||||
url: process.env.VUE_APP_BASE_API + "/interestclass/course/uploadExcel",
|
||||
},
|
||||
//上传学生
|
||||
uploadStudents: {
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 是否更新已经存在的部门数据
|
||||
updateSupport: 0,
|
||||
// 设置上传的请求头部
|
||||
headers: { Authorization: "Bearer " + "getToken()" },
|
||||
// 上传的地址
|
||||
url: process.env.VUE_APP_BASE_API + "/interestclass/enroll/uploadExcel",
|
||||
},
|
||||
// 报名学生数据
|
||||
enrollmentStudentData: {
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 学生列表数据
|
||||
data: [],
|
||||
},
|
||||
loadingST: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selectLongMode() {
|
||||
this.formData.weeks = [];
|
||||
console.log("-----");
|
||||
this.radiobt1 = true;
|
||||
this.formData.classDays = null;
|
||||
this.formData.classDays = null;
|
||||
},
|
||||
selectSelected() {
|
||||
this.radiobt2 = true;
|
||||
this.formData.classDate = null;
|
||||
this.formData.classDays = null;
|
||||
this.formData.weeks = [];
|
||||
},
|
||||
getStoageUserTk() {
|
||||
console.log(Session.get("token"));
|
||||
return Session.get("token");
|
||||
},
|
||||
fetchDataNewlyAdded() {
|
||||
this.dialogVisible = true;
|
||||
// 清除数据
|
||||
this.formData = {
|
||||
classImg: "",
|
||||
weeks: [],
|
||||
};
|
||||
this.radiobt1 = false;
|
||||
this.radiobt2 = false;
|
||||
this.radio = "";
|
||||
},
|
||||
uploadBut(row) {
|
||||
this.uploadStudents.url = this.uploadStudents.url + "?id=" + row.id;
|
||||
this.uploadStudents.title = "报名学生导入";
|
||||
this.uploadStudents.open = true;
|
||||
},
|
||||
search() {
|
||||
this.getInterstList();
|
||||
},
|
||||
reset() {
|
||||
this.bus.$emit("onCurrentContextmenuClick", {
|
||||
id: 0,
|
||||
path: this.$route.path,
|
||||
});
|
||||
},
|
||||
/** 导入按钮操作 */
|
||||
handleImport() {
|
||||
this.upload.title = "兴趣班导入";
|
||||
this.upload.open = true;
|
||||
},
|
||||
// 删除兴趣班
|
||||
async deleteData(id) {
|
||||
let result = await requestDeleteInterestClass(id);
|
||||
if (result.code == 200) {
|
||||
this.getInterstList();
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
} else {
|
||||
this.$message.error("删除失败");
|
||||
}
|
||||
},
|
||||
// 修改兴趣班
|
||||
editData(row) {
|
||||
console.log(row);
|
||||
if (row.weeks) {
|
||||
this.radio = "1";
|
||||
} else {
|
||||
this.radio = "2";
|
||||
}
|
||||
this.dialogVisible = true;
|
||||
delete row.startTime;
|
||||
delete row.endTime;
|
||||
delete row.classStartDate;
|
||||
delete row.classEndDate;
|
||||
if (!row.weeks) {
|
||||
row.weeks = [];
|
||||
let result = row;
|
||||
this.formData = { ...result };
|
||||
} else {
|
||||
this.formData = { ...row };
|
||||
}
|
||||
},
|
||||
// 获取教师列表姓名
|
||||
async obtainingTeacherLis() {
|
||||
let result = await requestObtainAListOfTeacherNames();
|
||||
if (result.code == 200) {
|
||||
this.teacher = result.data;
|
||||
}
|
||||
},
|
||||
// 提交上传文件
|
||||
submitFileForm() {
|
||||
this.upload.headers.Authorization = this.getStoageUserTk();
|
||||
console.log("88888888888888888");
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
// 提交上传学生文件
|
||||
submitFileFormStudents() {
|
||||
this.uploadStudents.headers.Authorization = this.getStoageUserTk();
|
||||
this.$refs.uploadStudents.submit();
|
||||
},
|
||||
|
||||
// 文件上传中处理
|
||||
handleFileUploadProgress(event, file, fileList) {
|
||||
this.upload.isUploading = true;
|
||||
},
|
||||
// 文件上传学生中处理
|
||||
handleFileUploadProgressStudents(event, file, fileList) {
|
||||
this.uploadStudents.isUploading = true;
|
||||
},
|
||||
// 上传课程失败
|
||||
failedToUploadCourse(response, file, fileList) {
|
||||
this.upload.open = false;
|
||||
this.upload.isUploading = false;
|
||||
this.$alert(
|
||||
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
||||
response.msg +
|
||||
"</div>",
|
||||
"导入结果",
|
||||
{ dangerouslyUseHTMLString: true }
|
||||
);
|
||||
},
|
||||
// 上传学生失败
|
||||
failedToUploadStudent() {
|
||||
this.uploadStudents.open = false;
|
||||
this.uploadStudents.isUploading = false;
|
||||
this.$alert(
|
||||
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
||||
response.msg +
|
||||
"</div>",
|
||||
"导入结果",
|
||||
{ dangerouslyUseHTMLString: true }
|
||||
);
|
||||
},
|
||||
// 文件上传学生成功处理
|
||||
handleFileSuccessStudents(response, file, fileList) {
|
||||
this.uploadStudents.open = false;
|
||||
this.uploadStudents.isUploading = false;
|
||||
this.$refs.uploadStudents.clearFiles();
|
||||
this.$alert(
|
||||
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
||||
response.msg +
|
||||
"</div>",
|
||||
"导入结果",
|
||||
{ dangerouslyUseHTMLString: true }
|
||||
);
|
||||
this.getInterstList();
|
||||
},
|
||||
// 文件上传成功处理
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
this.upload.open = false;
|
||||
this.upload.isUploading = false;
|
||||
this.$refs.upload.clearFiles();
|
||||
this.$alert(
|
||||
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
||||
response.msg +
|
||||
"</div>",
|
||||
"导入结果",
|
||||
{ dangerouslyUseHTMLString: true }
|
||||
);
|
||||
this.getInterstList();
|
||||
},
|
||||
//获取兴趣班列表
|
||||
async getInterstList() {
|
||||
this.loadingST = true;
|
||||
let result = await getListOfInterestClasses(
|
||||
this.pagination.pageNum,
|
||||
this.pagination.pageSize,
|
||||
this.searchFormDatass
|
||||
);
|
||||
if (result.code == 200) {
|
||||
this.loadingST = false;
|
||||
this.total = result.total;
|
||||
this.data = result.data;
|
||||
this.data.forEach((element) => {
|
||||
element.startTime = this.formatDate(element.startTime, "-", "year");
|
||||
element.endTime = this.formatDate(element.endTime, "-", "year");
|
||||
element.classEndDate = this.formatDate(element.classEndDate, "-", "year");
|
||||
element.classStartDate = this.formatDate(element.classStartDate, "-", "year");
|
||||
});
|
||||
} else {
|
||||
this.loadingST = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
this.loadingST = false;
|
||||
},
|
||||
//上传图片方法和回调
|
||||
handleAvatarSuccess(res, file) {
|
||||
this.formData.classImg = res.data;
|
||||
},
|
||||
// 上传之前的回调
|
||||
beforeAvatarUpload(file) {
|
||||
// 获取文件的后缀
|
||||
const suffix = file.name.substring(file.name.lastIndexOf(".") + 1);
|
||||
// 判断文件的大小
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
let accept = "jpg/png/gif/jpeg";
|
||||
const isLtType = accept.indexOf(suffix) >= 0;
|
||||
if (!isLtType) {
|
||||
this.$message.error("上传头像图片只能是jpg/png/gif/jpeg格式!");
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||||
}
|
||||
return isLtType && isLt2M;
|
||||
},
|
||||
// 添加兴趣班
|
||||
addInterestClass() {
|
||||
this.$refs.ruleForm.validate(async (success) => {
|
||||
if (success) {
|
||||
this.dialogVisible = false;
|
||||
let result = await requestAddInterestClass(this.formData);
|
||||
if (result.code == 200) {
|
||||
this.$message({
|
||||
message: this.formData.id ? "修改成功" : "添加成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getInterstList();
|
||||
this.formData = {};
|
||||
this.formData.weeks = [];
|
||||
} else {
|
||||
this.$message.error("添加失败");
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 查看报名了的学生
|
||||
registeredStudentsBtn(id) {
|
||||
console.log(id);
|
||||
this.enrollmentStudentData.open = true;
|
||||
this.getObtainStudentList(id);
|
||||
},
|
||||
// 获取已报名学生列表
|
||||
async getObtainStudentList(id) {
|
||||
this.loadingST = true;
|
||||
let res = await reqObtainAListOfRegisteredStudents(id);
|
||||
try {
|
||||
if (res.code == 200) {
|
||||
this.enrollmentStudentData.data = res.data;
|
||||
this.loadingST = false;
|
||||
} else {
|
||||
this.loadingST = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loadingST = false;
|
||||
this.$message.error("网络错误" + error);
|
||||
}
|
||||
},
|
||||
closeAdd() {
|
||||
this.dialogVisible = false;
|
||||
this.formData = {};
|
||||
this.radiobt1 = false;
|
||||
this.radiobt2 = false;
|
||||
this.radio = "";
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm("确认关闭？")
|
||||
.then((_) => {
|
||||
done();
|
||||
this.formData = {};
|
||||
})
|
||||
.catch((_) => {});
|
||||
},
|
||||
currentChange(val) {
|
||||
this.pagination.pageNum = val;
|
||||
this.getInterstList();
|
||||
},
|
||||
sizeChange(val) {
|
||||
this.pagination.pageSize = val;
|
||||
this.getInterstList();
|
||||
},
|
||||
changeRadio2() {
|
||||
this.radiobt2 = true;
|
||||
},
|
||||
// 学生表格里的删除
|
||||
deleteDataS() {},
|
||||
// 学生表格里的编辑
|
||||
editDataS() {},
|
||||
},
|
||||
mounted() {
|
||||
this.obtainingTeacherLis();
|
||||
this.getInterstList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.el-textarea .el-textarea__inner {
|
||||
resize: none;
|
||||
}
|
||||
.box-card {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.clss {
|
||||
border: 4px dashed #d9d9d9 !important;
|
||||
}
|
||||
.avatar-uploader .el-upload {
|
||||
border: 4px dashed #d9d9d9 !important;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,21 @@
|
||||
export default [
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "name",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
{
|
||||
label: "班级",
|
||||
prop: "className",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
label: "头像",
|
||||
prop: "avatar",
|
||||
type: "image",
|
||||
},
|
||||
|
||||
]
|
||||
@@ -0,0 +1,88 @@
|
||||
export let columns = [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "任课老师",
|
||||
prop: "teacherName",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "课程名称",
|
||||
prop: "className",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "上课教室",
|
||||
prop: "classRoom",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
{
|
||||
label: "应到",
|
||||
prop: "arrive",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "实到",
|
||||
prop: "trueArrive",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "上课日期",
|
||||
prop: "nowDay",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
{
|
||||
label: "课程图片",
|
||||
prop: "classImg",
|
||||
type: "image",
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
type: "signUp",
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
label: "备注",
|
||||
prop: "note",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
||||
export let classStuInfoColumns = [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "学生姓名",
|
||||
prop: "name",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "考勤状态",
|
||||
prop: "status",
|
||||
type: "signUp",
|
||||
},
|
||||
{
|
||||
label: "头像",
|
||||
prop: "avatar",
|
||||
type: "image",
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "note",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
]
|
||||
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<CommonHead
|
||||
@newly-data="fetchDataNewlyAdded"
|
||||
@reset-data="reset"
|
||||
@search-data="search"
|
||||
></CommonHead>
|
||||
<el-form :model="fromData" size="mini" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker
|
||||
class="w100"
|
||||
v-model="fromData.date"
|
||||
align="right"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="状态">
|
||||
<el-select
|
||||
filterable
|
||||
placeholder="请选择状态"
|
||||
v-model="fromData.status"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option label="未点名" value="0"></el-option>
|
||||
<el-option label="已点名" value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<InterestClassTabesTd
|
||||
v-loading="loading"
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></InterestClassTabesTd>
|
||||
</el-card>
|
||||
|
||||
<!-- 对话框 -->
|
||||
<el-dialog title="班级详情" :visible.sync="dialogTableVisible">
|
||||
<InterestClassTabesSt
|
||||
v-loading="loadings"
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="classStuInfoColumns"
|
||||
:data="stData"
|
||||
></InterestClassTabesSt>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InterestClassTabesTd from "../components/InterestClassTabesTd.vue";
|
||||
import InterestClassTabesSt from "../components/InterestClassTabesSt.vue";
|
||||
import { columns, classStuInfoColumns } from "./columns";
|
||||
import { requestGetTodaysInterestClass, requestClassDetails } from "../api.js";
|
||||
export default {
|
||||
name: "InterestCourseManagement",
|
||||
data() {
|
||||
return {
|
||||
dialogTableVisible: false,
|
||||
fromData: {
|
||||
date: null,
|
||||
},
|
||||
columns,
|
||||
classStuInfoColumns,
|
||||
data: [],
|
||||
stData: [
|
||||
{
|
||||
avatar: undefined,
|
||||
classInfoId: 0,
|
||||
id: 0,
|
||||
name: "string",
|
||||
note: "string",
|
||||
status: 0,
|
||||
studentId: "string",
|
||||
},
|
||||
],
|
||||
loading: false,
|
||||
loadings: false,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
InterestClassTabesTd,
|
||||
InterestClassTabesSt,
|
||||
},
|
||||
methods: {
|
||||
// 新增按钮
|
||||
fetchDataNewlyAdded() {
|
||||
this.$message("该板块暂时无法添加");
|
||||
},
|
||||
// 重置
|
||||
reset() {
|
||||
this.bus.$emit("onCurrentContextmenuClick", {
|
||||
id: 0,
|
||||
path: this.$route.path,
|
||||
});
|
||||
},
|
||||
// 搜索
|
||||
search() {
|
||||
this.getTodaysInterestClass();
|
||||
},
|
||||
// 表格里的删除
|
||||
deleteData() {},
|
||||
// 详情编辑
|
||||
async editData(row) {
|
||||
this.loadings = true;
|
||||
let result = await requestClassDetails(row.id);
|
||||
if (result.code == 200) {
|
||||
this.loadings = false;
|
||||
console.log("获取到了");
|
||||
this.stData = result.data.classStudentInfoVos;
|
||||
}
|
||||
this.loadings = false;
|
||||
this.dialogTableVisible = true;
|
||||
},
|
||||
|
||||
// 获取兴趣班点名班级
|
||||
async getTodaysInterestClass() {
|
||||
this.loading = true;
|
||||
console.log(this.fromData.date);
|
||||
let result = await requestGetTodaysInterestClass(this.fromData);
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
this.data = result.data;
|
||||
this.data.forEach((element) => {
|
||||
element.nowDay = this.formatDate(element.nowDay, "-", "year");
|
||||
});
|
||||
} else {
|
||||
this.loading = false;
|
||||
console.log("失败");
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getTodaysInterestClass();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,51 @@
|
||||
export let columns = [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "课程名称",
|
||||
prop: "className",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "老师姓名",
|
||||
prop: "teacherName",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "上课日期",
|
||||
prop: "nowDay",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
{
|
||||
label: "学生姓名",
|
||||
prop: "name",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
type: "signUp",
|
||||
},
|
||||
|
||||
{
|
||||
label: "班级",
|
||||
prop: "classes",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "头像",
|
||||
prop: "avatar",
|
||||
type: "image",
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "note",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<CommonHead
|
||||
@newly-data="fetchDataNewlyAdded"
|
||||
@reset-data="reset"
|
||||
@search-data="search"
|
||||
></CommonHead>
|
||||
<el-form :model="fromData" size="mini" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb20">
|
||||
<el-form-item label="日期范围">
|
||||
<div class="block">
|
||||
<el-date-picker
|
||||
class="w100"
|
||||
v-model="fromData.date"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="状态">
|
||||
<el-select
|
||||
filterable
|
||||
placeholder="请选择状态"
|
||||
v-model="fromData.status"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option label="迟到" value="1"></el-option>
|
||||
<el-option label="旷课" value="2"></el-option>
|
||||
<el-option label="请假" value="3"></el-option>
|
||||
<el-option label="早退" value="4"></el-option>
|
||||
<el-option label="未点名" :value="-1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<CommonTablesImg
|
||||
v-loading="loading"
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTablesImg>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { columns } from "./columns";
|
||||
import { Message } from "element-ui";
|
||||
import { reqObtainAListOfAbnormalStudents } from "../api.js";
|
||||
import { formatDate } from "@/com";
|
||||
export default {
|
||||
name: "abnormalStudentManagement",
|
||||
data() {
|
||||
return {
|
||||
fromData: {
|
||||
date: [],
|
||||
status: null,
|
||||
},
|
||||
columns,
|
||||
data: [],
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 新增按钮
|
||||
fetchDataNewlyAdded() {
|
||||
this.$message("该板块暂时无法添加");
|
||||
},
|
||||
// 重置
|
||||
reset() {
|
||||
this.bus.$emit("onCurrentContextmenuClick", {
|
||||
id: 0,
|
||||
path: this.$route.path,
|
||||
});
|
||||
},
|
||||
// 搜索
|
||||
search() {
|
||||
this.getTodaysInterestClass();
|
||||
},
|
||||
|
||||
// 获取兴趣班点名班级
|
||||
async getTodaysInterestClass() {
|
||||
this.loading = true;
|
||||
let result = await reqObtainAListOfAbnormalStudents(this.fromData);
|
||||
if (result.code == 200) {
|
||||
let arr = result.data;
|
||||
arr.forEach((element) => {
|
||||
element.nowDay = formatDate(element.nowDay, "-");
|
||||
});
|
||||
this.loading = false;
|
||||
this.data = result.data;
|
||||
} else {
|
||||
this.loading = false;
|
||||
console.log("失败");
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
// 删除
|
||||
deleteData(id) {
|
||||
Message.error("该模块不支持被删除或者修改");
|
||||
},
|
||||
// 编辑
|
||||
editData(item) {
|
||||
Message.error("该模块不支持被删除或者修改");
|
||||
console.log(item + "---------------");
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getTodaysInterestClass();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,71 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 获取兴趣班列表
|
||||
export const getListOfInterestClasses = (pageNum,pageSize,data={}) => request({
|
||||
url: `/interestclass/course/get?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method: 'get',
|
||||
params:data
|
||||
})
|
||||
|
||||
|
||||
// 添加兴趣班
|
||||
export const requestAddInterestClass = (data) => {
|
||||
if(data.id){
|
||||
return request({
|
||||
url: '/interestclass/course/update',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}else{
|
||||
return request({
|
||||
url: '/interestclass/course/add',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
// 删除兴趣班
|
||||
export const requestDeleteInterestClass = (id) => request({
|
||||
url: `/interestclass/course/delete?id=${id}`,
|
||||
method: 'put',
|
||||
})
|
||||
|
||||
|
||||
// 获取某一天的兴趣班列表
|
||||
export const requestGetTodaysInterestClass = (params) => request({
|
||||
url: `/interestclass/classInfo/getToday`,
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
|
||||
|
||||
// 获取某一天的兴趣班列表
|
||||
export const requestClassDetails = (id) => request({
|
||||
url: `/interestclass/classStuInfo/get?id=${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
// 获取取老师姓名列表
|
||||
export const requestObtainAListOfTeacherNames = () => request({
|
||||
url: `/interestclass/course/getTeacher`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
// 获取根据范围获取异常学生列表列表
|
||||
export const reqObtainAListOfAbnormalStudents = (params) => request({
|
||||
url: `/interestclass/classInfo/getBadStu`,
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
|
||||
// 查看已经报名的学生列表
|
||||
export const reqObtainAListOfRegisteredStudents = (id) => request({
|
||||
url: `/interestclass/enroll/getEnrollInfo?id=${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-table :data="tableData" style="width: 100%" height="650" size="mini">
|
||||
<el-table-column
|
||||
v-if="
|
||||
column.label !== 'id' &&
|
||||
column.label !== 'teacherId' &&
|
||||
column.label !== 'weeks' &&
|
||||
column.label !== 'classDays' &&
|
||||
column.label !== 'classDate' &&
|
||||
column.label !== 'date'
|
||||
"
|
||||
align="left"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="column.type === 'text'"> {{ scope.row[column.prop] }}</span>
|
||||
<div v-else-if="column.type === 'signUp'">
|
||||
<el-tag size="small" v-if="scope.row[column.prop] == 0">报名中</el-tag>
|
||||
<el-tag size="small" type="success" v-else-if="scope.row[column.prop] == 1"
|
||||
>报名已结束</el-tag
|
||||
>
|
||||
<el-tag size="small" type="danger" v-else-if="scope.row[column.prop] == 2"
|
||||
>已删除</el-tag
|
||||
>
|
||||
<el-tag size="small" type="warning" v-else-if="scope.row[column.prop] == 3"
|
||||
>课程已结束</el-tag
|
||||
>
|
||||
</div>
|
||||
<div v-else-if="column.type === 'image'">
|
||||
<img style="width: 200px; height: 60px" :src="scope.row[column.prop]" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="left" label="操作" width="280">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleUpload(scope.row)"
|
||||
class="el-icon-upload2"
|
||||
type="text"
|
||||
size="small"
|
||||
>上传</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="handleRegistered(scope.row)"
|
||||
class="el-icon-view"
|
||||
type="text"
|
||||
size="small"
|
||||
>报名学生</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-popconfirm
|
||||
@confirm="handleDelete(scope.row)"
|
||||
:title="'确定要删除' + scope.row.className + '吗？'"
|
||||
>
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonTablesImg",
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
uploadFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
registeredFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
name: "CommonTables",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row.id);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
this.editFunc(row);
|
||||
},
|
||||
handleUpload(row) {
|
||||
this.uploadFunc(row);
|
||||
},
|
||||
handleRegistered(row) {
|
||||
this.registeredFunc(row.id);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
type: column.type,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-table :data="tableData" style="width: 100%" height="650" size="mini">
|
||||
<el-table-column
|
||||
v-if="column.label !== 'id'"
|
||||
align="left"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="column.type === 'text'"> {{ scope.row[column.prop] }}</span>
|
||||
<div v-else-if="column.type === 'signUp'">
|
||||
<el-tag type="success" v-if="scope.row[column.prop] == 0">已到</el-tag>
|
||||
<el-tag type="warning" v-else-if="scope.row[column.prop] == 1">迟到</el-tag>
|
||||
<el-tag type="danger" v-else-if="scope.row[column.prop] == 2">未到</el-tag>
|
||||
</div>
|
||||
<div v-else-if="column.type === 'image'">
|
||||
<img style="width: 100px; height: 100px" :src="scope.row[column.prop]" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column v-if="false" align="left" fixed="right" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="false"
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>详情</el-button
|
||||
>
|
||||
<el-popconfirm
|
||||
v-if="false"
|
||||
@confirm="handleDelete(scope.row)"
|
||||
:title="'确定要删除吗？'"
|
||||
>
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonTablesImg",
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
name: "CommonTables",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row.id);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
this.editFunc(row);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
type: column.type,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-table :data="tableData" style="width: 100%" height="650" size="mini">
|
||||
<el-table-column
|
||||
v-if="column.label !== 'id'"
|
||||
align="left"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="column.type === 'text'"> {{ scope.row[column.prop] }}</span>
|
||||
<div v-else-if="column.type === 'signUp'">
|
||||
<el-tag size="small" type="danger" v-if="scope.row[column.prop] == 0"
|
||||
>未点名</el-tag
|
||||
>
|
||||
<el-tag size="small" type="success" v-else-if="scope.row[column.prop] == 1"
|
||||
>已点名</el-tag
|
||||
>
|
||||
</div>
|
||||
<div v-else-if="column.type === 'image'">
|
||||
<img style="width: 200px; height: 60px" :src="scope.row[column.prop]" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="left" fixed="right" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>详情</el-button
|
||||
>
|
||||
<el-popconfirm
|
||||
v-if="false"
|
||||
@confirm="handleDelete(scope.row)"
|
||||
:title="'确定要删除' + scope.row.teacherName + '吗？'"
|
||||
>
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonTablesImg",
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
name: "CommonTables",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row.id);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
this.editFunc(row);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
type: column.type,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,53 @@
|
||||
import request from '@/utils/request'
|
||||
// get获取列表
|
||||
export function getOrders (params) {
|
||||
return request({
|
||||
url: '/meetingAct/info/get',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
// 新增
|
||||
export function postAddOrders (data) {
|
||||
return request({
|
||||
url: '/meetingAct/info/add',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 修改
|
||||
export function putOrders (data) {
|
||||
return request({
|
||||
url: '/meetingAct/info/update',
|
||||
method: 'put',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function deleteOrders (id) {
|
||||
return request({
|
||||
url: '/meetingAct/info/delete',
|
||||
method: 'delete',
|
||||
params:{
|
||||
id
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 获取审批人
|
||||
export function getApprover () {
|
||||
return request({
|
||||
url: '/meetingAct/info/getTeacher',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
// 查询班级列表
|
||||
export function getClass() {
|
||||
return request({
|
||||
url: '/meetingAct/moral/moral/evaluableGradeAndClassList',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<el-table
|
||||
border
|
||||
:header-cell-style="{
|
||||
background: '#f5f7fa',
|
||||
}"
|
||||
:data="tableData"
|
||||
style="width: 100%; margin-top: 20px"
|
||||
height="650"
|
||||
size="mini"
|
||||
>
|
||||
<el-table-column
|
||||
v-if="
|
||||
column.label !== 'id' &&
|
||||
column.label !== '审批人Id' &&
|
||||
column.label !== '抄送人Id'
|
||||
"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="column.type === 'text'"> {{ scope.row[column.prop] }}</span>
|
||||
<div v-else-if="column.type === 'image'">
|
||||
<img style="width: 200px; height: 100px" :src="scope.row[column.prop]" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-popconfirm @confirm="handleDelete(scope.row)" :title="'确定要删除吗？'">
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonTablesImg",
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row.id);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
console.log(row);
|
||||
this.editFunc(row);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
type: column.type,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
|
||||
|
||||
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTablesImg
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTablesImg>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="功能室名称" prop="roomName">
|
||||
<el-input size="mini" v-model="form.roomName" placeholder="请输入功能室名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="功能室容量" prop="roomCapacity">
|
||||
<el-input size="mini" type="number" v-model="form.roomCapacity" placeholder="请输入功能室容量（人）"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="功能室图片" prop="roomPicture">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="$store.state.imgUrl"
|
||||
:headers="$store.state.uploadHeader"
|
||||
:show-file-list="false"
|
||||
name="img"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload">
|
||||
<img v-if="form.roomPicture" :src="form.roomPicture" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon clss"></i>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="位置信息" prop="desc" >
|
||||
<el-input size="mini" v-model="form.desc"></el-input>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="审批人" prop="userId">
|
||||
<el-select size="mini" v-model="form.userId" placeholder="请选择审批人" multiple clearable >
|
||||
<el-option
|
||||
v-for="item in approverArr"
|
||||
:key="item.userId"
|
||||
:label="item.name"
|
||||
:value="item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="抄送人" prop="notifier">
|
||||
<el-select size="mini" v-model="form.notifier" placeholder="请选择抄送人" multiple clearable >
|
||||
<el-option
|
||||
v-for="item in approverArr"
|
||||
:key="item.userId"
|
||||
:label="item.name"
|
||||
:value="item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonTablesImg from './components/CommonTablesImg.vue'
|
||||
import { postAddOrders, getOrders, putOrders, getApprover, deleteOrders } from './api'
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
roomName: null, // 名称
|
||||
roomCapacity: null, // 容量
|
||||
roomPicture: null, // 功能室图片
|
||||
desc: null, // 功能室位置信息
|
||||
userId: [], // 审批人列表
|
||||
notifier: [], // 抄送人列表
|
||||
groups: 1, // 0-功能室 1-功能室
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "功能室名称",
|
||||
prop: "roomName",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "功能室容量（人)",
|
||||
prop: "roomCapacity",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "功能室图片",
|
||||
prop: "roomPicture",
|
||||
type: 'image'
|
||||
},
|
||||
{
|
||||
label: "功能室位置信息",
|
||||
prop: "desc",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "审批人Id",
|
||||
prop: "userId",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "审批人",
|
||||
prop: "userVos",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "抄送人Id",
|
||||
prop: "notifier",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "抄送人",
|
||||
prop: "notifierVos",
|
||||
type: 'text'
|
||||
|
||||
}
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
groups: 1, // 0 是功能室
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: '新增', // 弹出层按钮
|
||||
approverArr: [], // 审批人列表
|
||||
rules: {
|
||||
roomName: [
|
||||
{ required: true, message: '请输入功能室名称', trigger: 'blur' },
|
||||
],
|
||||
roomCapacity: [
|
||||
{ required: true, message: '请输入功能室容量', trigger: 'blur' },
|
||||
],
|
||||
roomPicture: [
|
||||
{ required: true, message: '请上传功能室图片', trigger: 'blur' },
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: '请输入功能室位置信息', trigger: 'blur' },
|
||||
],
|
||||
userId: [
|
||||
{ required: true, message: '请选择审批人', trigger: 'change' },
|
||||
],
|
||||
notifier: [
|
||||
{ required: true, message: '请选择抄送人', trigger: 'change' },
|
||||
|
||||
], // 抄送人列表
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
getApprover().then(res =>{
|
||||
this.approverArr = res.data
|
||||
})
|
||||
this.getList()
|
||||
},
|
||||
components:{
|
||||
CommonTablesImg
|
||||
},
|
||||
methods:{
|
||||
// 上传成功回调地址
|
||||
handleAvatarSuccess(res, file) {
|
||||
console.log(res.data)
|
||||
// this.form.roomPicture = URL.createObjectURL(file.raw);
|
||||
this.form.roomPicture = res.data;
|
||||
},
|
||||
// 限制图片
|
||||
beforeAvatarUpload(file) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图片大小不能超过 2MB!');
|
||||
}
|
||||
return isLt2M;
|
||||
},
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
let obj = { ...this.form }
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
if(this.form.id){ // 有id说明是修改
|
||||
console.log('进入的修改')
|
||||
delete obj.userVos
|
||||
delete obj.notifierVos
|
||||
putOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message('修改成功！')
|
||||
this.isVisible = false;
|
||||
}else{
|
||||
this.message(res.msg, 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
this.message(err.msg, 'error')
|
||||
})
|
||||
}else{ // 新增
|
||||
console.log('进入的新增')
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
}else{
|
||||
this.message((err.msg ? err.msg : '新增失败'), 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
console.log(err.msg)
|
||||
this.message((err.msg ? err.msg : '新增失败'), 'error')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增功能室'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
groups: 1
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
roomName: null, // 名称
|
||||
roomCapacity: null, // 容量
|
||||
roomPicture: null, // 功能室图片
|
||||
desc: null, // 功能室位置信息
|
||||
userId: [], // 审批人列表
|
||||
notifier: [], // 抄送人
|
||||
groups: 1, // 0-功能室 1-功能室
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.query.pageNum = 1
|
||||
this.query.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getOrders(this.query).then( res =>{
|
||||
this.data = res.data.map(item =>{
|
||||
let str = ''
|
||||
let notifierVosStr = ''
|
||||
if(item.userVos){
|
||||
item.userVos.forEach((it,ix) => {
|
||||
if(ix == 0){
|
||||
str = it.name
|
||||
}else{
|
||||
str = str +','+ it.name
|
||||
}
|
||||
});
|
||||
}
|
||||
if(item.notifierVos){
|
||||
item.notifierVos.forEach((it,ix) => {
|
||||
if(ix == 0){
|
||||
notifierVosStr = it.name
|
||||
}else{
|
||||
notifierVosStr = notifierVosStr +','+ it.name
|
||||
}
|
||||
});
|
||||
item.notifierVos = notifierVosStr
|
||||
}
|
||||
item.userVos = str
|
||||
return item
|
||||
|
||||
})
|
||||
console.log(this.data)
|
||||
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(id) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(id)
|
||||
deleteOrders(id).then(res =>{
|
||||
this.getList()
|
||||
if(res.code == 200){
|
||||
this.message(res.msg)
|
||||
}else{
|
||||
this.message(res.msg, 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
this.message(err.data.msg, 'error')
|
||||
})
|
||||
},
|
||||
// 编辑
|
||||
editData(item) {
|
||||
this.isVisible = true;
|
||||
this.title = '修改功能室'
|
||||
this.resetForm()
|
||||
this.form = { ...item }
|
||||
this.form.groups = 1
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum){
|
||||
console.log( '点击切换页数' +pageNum)
|
||||
this.query.pageNum = pageNum
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize){
|
||||
this.pageSize = pageSize
|
||||
this.query.pageSize = pageSize
|
||||
this.getList()
|
||||
console.log(pageSize)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.clss {
|
||||
border: 4px dashed #d9d9d9 !important;
|
||||
}
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,53 @@
|
||||
import request from '@/utils/request'
|
||||
// get获取列表
|
||||
export function getOrders (params) {
|
||||
return request({
|
||||
url: '/meetingAct/info/get',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
// 新增
|
||||
export function postAddOrders (data) {
|
||||
return request({
|
||||
url: '/meetingAct/info/add',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 修改
|
||||
export function putOrders (data) {
|
||||
return request({
|
||||
url: '/meetingAct/info/update',
|
||||
method: 'put',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function deleteOrders (id) {
|
||||
return request({
|
||||
url: '/meetingAct/info/delete',
|
||||
method: 'delete',
|
||||
params:{
|
||||
id
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 获取审批人
|
||||
export function getApprover () {
|
||||
return request({
|
||||
url: '/meetingAct/info/getTeacher',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
// 查询班级列表
|
||||
export function getClass() {
|
||||
return request({
|
||||
url: '/meetingAct/moral/moral/evaluableGradeAndClassList',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<el-table
|
||||
border
|
||||
:header-cell-style="{
|
||||
background: '#f5f7fa',
|
||||
}"
|
||||
:data="tableData"
|
||||
style="width: 100%; margin-top: 20px"
|
||||
height="650"
|
||||
size="mini"
|
||||
>
|
||||
<el-table-column
|
||||
v-if="
|
||||
column.label !== 'id' &&
|
||||
column.label !== '审批人Id' &&
|
||||
column.label !== '抄送人Id'
|
||||
"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="column.type === 'text'"> {{ scope.row[column.prop] }}</span>
|
||||
<div v-else-if="column.type === 'image'">
|
||||
<img style="width: 200px; height: 100px" :src="scope.row[column.prop]" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column fixed="right" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-popconfirm @confirm="handleDelete(scope.row)" :title="'确定要删除吗？'">
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonTablesImg",
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row.id);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
console.log(row);
|
||||
this.editFunc(row);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
type: column.type,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
|
||||
|
||||
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTablesImg
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTablesImg>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="会议室名称" prop="roomName">
|
||||
<el-input size="mini" v-model="form.roomName" placeholder="请输入会议室名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室容量" prop="roomCapacity">
|
||||
<el-input size="mini" type="number" v-model="form.roomCapacity" placeholder="请输入会议室容量（人）"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室图片" prop="roomPicture">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="$store.state.imgUrl"
|
||||
:headers="$store.state.uploadHeader"
|
||||
:show-file-list="false"
|
||||
name="img"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload">
|
||||
<img v-if="form.roomPicture" :src="form.roomPicture" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon clss"></i>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="位置信息" prop="desc" >
|
||||
<el-input size="mini" v-model="form.desc" placeholder="请输入会议室位置信息"></el-input>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="审批人" prop="userId">
|
||||
<el-select size="mini" v-model="form.userId" placeholder="请选择审批人" multiple clearable >
|
||||
<el-option
|
||||
v-for="item in approverArr"
|
||||
:key="item.userId"
|
||||
:label="item.name"
|
||||
:value="item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="抄送人" prop="notifier">
|
||||
<el-select size="mini" v-model="form.notifier" placeholder="请选择抄送人" multiple clearable >
|
||||
<el-option
|
||||
v-for="item in approverArr"
|
||||
:key="item.userId"
|
||||
:label="item.name"
|
||||
:value="item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonTablesImg from './components/CommonTablesImg.vue'
|
||||
import { postAddOrders, getOrders, putOrders, getApprover, deleteOrders } from './api'
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
var validates = (rule, value, callback) => {
|
||||
console.log(value)
|
||||
if (value <= 0 || value == null) {
|
||||
callback(new Error("最小值为1"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
form: {
|
||||
roomName: null, // 名称
|
||||
roomCapacity: null, // 容量
|
||||
roomPicture: null, // 会议室图片
|
||||
desc: null, // 会议室位置信息
|
||||
userId: [], // 审批人列表
|
||||
notifier: [], // 抄送人
|
||||
groups: 0, // 0-会议室 1-功能室
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "会议室名称",
|
||||
prop: "roomName",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "会议室容量（人)",
|
||||
prop: "roomCapacity",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "会议室图片",
|
||||
prop: "roomPicture",
|
||||
type: 'image'
|
||||
},
|
||||
{
|
||||
label: "会议室位置信息",
|
||||
prop: "desc",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "审批人Id",
|
||||
prop: "userId",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "审批人",
|
||||
prop: "userVos",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "抄送人Id",
|
||||
prop: "notifier",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "抄送人",
|
||||
prop: "notifierVos",
|
||||
type: 'text'
|
||||
|
||||
}
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
groups: 0, // 0 是会议室
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: '新增', // 弹出层按钮
|
||||
approverArr: [], // 审批人列表
|
||||
rules: {
|
||||
roomName: [
|
||||
{ required: true, message: '请输入会议室名称', trigger: 'blur' },
|
||||
],
|
||||
roomCapacity: [
|
||||
{ required: true, validator: validates, trigger: 'blur' },
|
||||
],
|
||||
roomPicture: [
|
||||
{ required: true, message: '请上传会议室图片', trigger: 'blur' },
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: '请输入会议室位置信息', trigger: 'blur' },
|
||||
],
|
||||
userId: [
|
||||
{ required: true, message: '请选择审批人', trigger: 'change' },
|
||||
],
|
||||
notifier: [
|
||||
{ required: true, message: '请选择抄送人', trigger: 'change' },
|
||||
], // 抄送人
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
getApprover().then(res =>{
|
||||
this.approverArr = res.data
|
||||
})
|
||||
this.getList()
|
||||
},
|
||||
components:{
|
||||
CommonTablesImg
|
||||
},
|
||||
methods:{
|
||||
// 上传成功回调地址
|
||||
handleAvatarSuccess(res, file) {
|
||||
console.log(res.data)
|
||||
// this.form.roomPicture = URL.createObjectURL(file.raw);
|
||||
this.form.roomPicture = res.data;
|
||||
},
|
||||
// 限制图片
|
||||
beforeAvatarUpload(file) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图片大小不能超过 2MB!');
|
||||
}
|
||||
return isLt2M;
|
||||
},
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
let obj = { ...this.form }
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
if(this.form.id){ // 有id说明是修改
|
||||
console.log('进入的修改')
|
||||
delete obj.userVos
|
||||
delete obj.notifierVos
|
||||
putOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message('修改成功！')
|
||||
this.isVisible = false;
|
||||
}else{
|
||||
this.message(res.msg ? res.msg : '失败', 'error')
|
||||
|
||||
}
|
||||
}).catch(err =>{
|
||||
this.message(err.msg ? err.msg : '失败', 'error')
|
||||
|
||||
})
|
||||
}else{ // 新增
|
||||
console.log('进入的新增')
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
}else{
|
||||
this.message((res.msg ? res.msg : '新增失败'), 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
console.log(err.msg)
|
||||
this.message((err.msg ? err.msg : '新增失败'), 'error')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
groups: 0
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
roomName: null, // 名称
|
||||
roomCapacity: null, // 容量
|
||||
roomPicture: null, // 会议室图片
|
||||
desc: null, // 会议室位置信息
|
||||
userId: [], // 审批人列表
|
||||
notifier: [], // 抄送人
|
||||
groups: 0, // 0-会议室 1-功能室
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.query.pageNum = 1
|
||||
this.query.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getOrders(this.query).then( res =>{
|
||||
this.data = res.data.map(item =>{
|
||||
let str = ''
|
||||
let notifierVosStr = ''
|
||||
if(item.userVos){
|
||||
item.userVos.forEach((it,ix) => {
|
||||
if(ix == 0){
|
||||
str = it.name
|
||||
}else{
|
||||
str = str +','+ it.name
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
if(item.notifierVos){
|
||||
item.notifierVos.forEach((it,ix) => {
|
||||
if(ix == 0){
|
||||
notifierVosStr = it.name
|
||||
}else{
|
||||
notifierVosStr = notifierVosStr +','+ it.name
|
||||
}
|
||||
});
|
||||
item.notifierVos = notifierVosStr
|
||||
}
|
||||
|
||||
item.userVos = str
|
||||
return item
|
||||
})
|
||||
console.log(this.data)
|
||||
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(id) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(id)
|
||||
deleteOrders(id).then(res =>{
|
||||
this.getList()
|
||||
if(res.code == 200){
|
||||
this.message(res.msg)
|
||||
}else{
|
||||
this.message(res.data.msg ? res.data.msg : '失败', 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
this.message(err.data.msg ? err.data.msg : '失败', 'error')
|
||||
})
|
||||
},
|
||||
// 编辑
|
||||
editData(item) {
|
||||
this.isVisible = true;
|
||||
this.title = '修改'
|
||||
this.resetForm()
|
||||
this.form = { ...item }
|
||||
this.form.groups = 0
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum){
|
||||
console.log( '点击切换页数' +pageNum)
|
||||
this.query.pageNum = pageNum
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize){
|
||||
this.pageSize = pageSize
|
||||
this.query.pageSize = pageSize
|
||||
this.getList()
|
||||
console.log(pageSize)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.clss {
|
||||
border: 4px dashed #d9d9d9 !important;
|
||||
}
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,352 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
|
||||
|
||||
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTablesImg
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTablesImg>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="会议室标题" prop="roomName">
|
||||
<el-input size="mini" v-model="form.roomName" placeholder="请输入会议室标题"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室容量" prop="roomCapacity">
|
||||
<el-input size="mini" type="number" v-model="form.roomCapacity" placeholder="请输入会议室容量（人）"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="会议室图片" prop="roomPicture">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="$store.state.imgUrl"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload">
|
||||
<img v-if="form.roomPicture" :src="form.roomPicture" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon clss"></i>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="位置信息" prop="desc" >
|
||||
<el-input size="mini" v-model="form.desc"></el-input>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="审批人" prop="userId">
|
||||
<el-select size="mini" v-model="form.userId" placeholder="请选择审批人" multiple clearable >
|
||||
<el-option
|
||||
v-for="item in approverArr"
|
||||
:key="item.userId"
|
||||
:label="item.name"
|
||||
:value="item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonTablesImg from './components/CommonTablesImg.vue'
|
||||
import { postAddOrders, getOrders, putOrders, getApprover, deleteOrders } from './api'
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
roomName: null, // 名称
|
||||
roomCapacity: null, // 容量
|
||||
roomPicture: null, // 会议室图片
|
||||
desc: null, // 会议室位置信息
|
||||
userId: [], // 审批人列表
|
||||
groups: 0, // 0-会议室 1-功能室
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "会议室名称",
|
||||
prop: "roomName",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "会议室容量（人)",
|
||||
prop: "roomCapacity",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "会议室图片",
|
||||
prop: "roomPicture",
|
||||
type: 'image'
|
||||
},
|
||||
{
|
||||
label: "会议室位置信息",
|
||||
prop: "desc",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "审批人Id",
|
||||
prop: "userId",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "审批人",
|
||||
prop: "userVos",
|
||||
type: 'text'
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
groups: 0, // 0 是会议室
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: '新增', // 弹出层按钮
|
||||
approverArr: [], // 审批人列表
|
||||
rules: {
|
||||
roomName: [
|
||||
{ required: true, message: '请输入会议室标题', trigger: 'blur' },
|
||||
],
|
||||
roomCapacity: [
|
||||
{ required: true, message: '请输入会议室容量', trigger: 'blur' },
|
||||
],
|
||||
roomPicture: [
|
||||
{ required: true, message: '请上传会议室图片', trigger: 'blur' },
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: '请输入会议室位置信息', trigger: 'blur' },
|
||||
],
|
||||
userId: [
|
||||
{ required: true, message: '请选择审批人', trigger: 'change' },
|
||||
],
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
getApprover().then(res =>{
|
||||
this.approverArr = res.data
|
||||
})
|
||||
this.getList()
|
||||
},
|
||||
components:{
|
||||
CommonTablesImg
|
||||
},
|
||||
methods:{
|
||||
// 上传成功回调地址
|
||||
handleAvatarSuccess(res, file) {
|
||||
console.log(res.data)
|
||||
// this.form.roomPicture = URL.createObjectURL(file.raw);
|
||||
this.form.roomPicture = res.data;
|
||||
},
|
||||
// 限制图片
|
||||
beforeAvatarUpload(file) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图片大小不能超过 2MB!');
|
||||
}
|
||||
return isLt2M;
|
||||
},
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
let obj = { ...this.form }
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
if(this.form.id){ // 有id说明是修改
|
||||
console.log('进入的修改')
|
||||
delete obj.userVos
|
||||
putOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message('修改成功！')
|
||||
this.isVisible = false;
|
||||
}else{
|
||||
this.message(res.msg, 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
this.message(err.msg, 'error')
|
||||
})
|
||||
}else{ // 新增
|
||||
console.log('进入的新增')
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
}else{
|
||||
this.message((err.msg ? err.msg : '修改失败'), 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
console.log(err.msg)
|
||||
this.message((err.msg ? err.msg : '修改失败'), 'error')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
groups: 0
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
roomName: null, // 名称
|
||||
roomCapacity: null, // 容量
|
||||
roomPicture: null, // 会议室图片
|
||||
desc: null, // 会议室位置信息
|
||||
userId: [], // 审批人列表
|
||||
groups: 0, // 0-会议室 1-功能室
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.query.pageNum = 1
|
||||
this.query.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getOrders(this.query).then( res =>{
|
||||
this.data = res.data.map(item =>{
|
||||
let str = ''
|
||||
item.userVos.forEach((it,ix) => {
|
||||
if(ix == 0){
|
||||
str = it.name
|
||||
}else{
|
||||
str = str +','+ it.name
|
||||
}
|
||||
});
|
||||
|
||||
item.userVos = str
|
||||
return item
|
||||
|
||||
})
|
||||
console.log(this.data)
|
||||
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(id) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(id)
|
||||
deleteOrders(id).then(res =>{
|
||||
this.getList()
|
||||
if(res.code == 200){
|
||||
this.message(res.msg)
|
||||
}else{
|
||||
this.message(res.msg, 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
this.message(err.data.msg, 'error')
|
||||
})
|
||||
},
|
||||
// 编辑
|
||||
editData(item) {
|
||||
this.isVisible = true;
|
||||
this.title = '修改'
|
||||
this.resetForm()
|
||||
this.form = { ...item }
|
||||
this.form.groups = 0
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum){
|
||||
console.log( '点击切换页数' +pageNum)
|
||||
this.query.pageNum = pageNum
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize){
|
||||
this.pageSize = pageSize
|
||||
this.query.pageSize = pageSize
|
||||
this.getList()
|
||||
console.log(pageSize)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.clss {
|
||||
border: 4px dashed #d9d9d9 !important;
|
||||
}
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
|
||||
|
||||
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTablesImg
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTablesImg>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="功能室标题" prop="roomName">
|
||||
<el-input size="mini" v-model="form.roomName" placeholder="请输入功能室标题"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="功能室容量" prop="roomCapacity">
|
||||
<el-input size="mini" type="number" v-model="form.roomCapacity" placeholder="请输入功能室容量（人）"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="功能室图片" prop="roomPicture">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="$store.state.imgUrl"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload">
|
||||
<img v-if="form.roomPicture" :src="form.roomPicture" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon clss"></i>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="位置信息" prop="desc" >
|
||||
<el-input size="mini" v-model="form.desc"></el-input>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="审批人" prop="userId">
|
||||
<el-select size="mini" v-model="form.userId" placeholder="请选择审批人" multiple clearable >
|
||||
<el-option
|
||||
v-for="item in approverArr"
|
||||
:key="item.userId"
|
||||
:label="item.name"
|
||||
:value="item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonTablesImg from './components/CommonTablesImg.vue'
|
||||
import { postAddOrders, getOrders, putOrders, getApprover, deleteOrders } from './api'
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
roomName: null, // 名称
|
||||
roomCapacity: null, // 容量
|
||||
roomPicture: null, // 功能室图片
|
||||
desc: null, // 功能室位置信息
|
||||
userId: [], // 审批人列表
|
||||
groups: 1, // 0-功能室 1-功能室
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "功能室名称",
|
||||
prop: "roomName",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "功能室容量（人)",
|
||||
prop: "roomCapacity",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "功能室图片",
|
||||
prop: "roomPicture",
|
||||
type: 'image'
|
||||
},
|
||||
{
|
||||
label: "功能室位置信息",
|
||||
prop: "desc",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "审批人Id",
|
||||
prop: "userId",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "审批人",
|
||||
prop: "userVos",
|
||||
type: 'text'
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
groups: 1, // 0 是功能室
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: '新增', // 弹出层按钮
|
||||
approverArr: [], // 审批人列表
|
||||
rules: {
|
||||
roomName: [
|
||||
{ required: true, message: '请输入功能室标题', trigger: 'blur' },
|
||||
],
|
||||
roomCapacity: [
|
||||
{ required: true, message: '请输入功能室容量', trigger: 'blur' },
|
||||
],
|
||||
roomPicture: [
|
||||
{ required: true, message: '请上传功能室图片', trigger: 'blur' },
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: '请输入功能室位置信息', trigger: 'blur' },
|
||||
],
|
||||
userId: [
|
||||
{ required: true, message: '请选择审批人', trigger: 'change' },
|
||||
],
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
getApprover().then(res =>{
|
||||
this.approverArr = res.data
|
||||
})
|
||||
this.getList()
|
||||
},
|
||||
components:{
|
||||
CommonTablesImg
|
||||
},
|
||||
methods:{
|
||||
// 上传成功回调地址
|
||||
handleAvatarSuccess(res, file) {
|
||||
console.log(res.data)
|
||||
// this.form.roomPicture = URL.createObjectURL(file.raw);
|
||||
this.form.roomPicture = res.data;
|
||||
},
|
||||
// 限制图片
|
||||
beforeAvatarUpload(file) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图片大小不能超过 2MB!');
|
||||
}
|
||||
return isLt2M;
|
||||
},
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
let obj = { ...this.form }
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
if(this.form.id){ // 有id说明是修改
|
||||
console.log('进入的修改')
|
||||
delete obj.userVos
|
||||
putOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message('修改成功！')
|
||||
this.isVisible = false;
|
||||
}else{
|
||||
this.message(res.msg, 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
this.message(err.msg, 'error')
|
||||
})
|
||||
}else{ // 新增
|
||||
console.log('进入的新增')
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
}else{
|
||||
this.message((err.msg ? err.msg : '修改失败'), 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
console.log(err.msg)
|
||||
this.message((err.msg ? err.msg : '修改失败'), 'error')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增功能室'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
groups: 1
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
roomName: null, // 名称
|
||||
roomCapacity: null, // 容量
|
||||
roomPicture: null, // 功能室图片
|
||||
desc: null, // 功能室位置信息
|
||||
userId: [], // 审批人列表
|
||||
groups: 1, // 0-功能室 1-功能室
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.query.pageNum = 1
|
||||
this.query.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getOrders(this.query).then( res =>{
|
||||
this.data = res.data.map(item =>{
|
||||
let str = ''
|
||||
item.userVos.forEach((it,ix) => {
|
||||
if(ix == 0){
|
||||
str = it.name
|
||||
}else{
|
||||
str = str +','+ it.name
|
||||
}
|
||||
});
|
||||
|
||||
item.userVos = str
|
||||
return item
|
||||
|
||||
})
|
||||
console.log(this.data)
|
||||
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(id) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(id)
|
||||
deleteOrders(id).then(res =>{
|
||||
this.getList()
|
||||
if(res.code == 200){
|
||||
this.message(res.msg)
|
||||
}else{
|
||||
this.message(res.msg, 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
this.message(err.data.msg, 'error')
|
||||
})
|
||||
},
|
||||
// 编辑
|
||||
editData(item) {
|
||||
this.isVisible = true;
|
||||
this.title = '修改功能室'
|
||||
this.resetForm()
|
||||
this.form = { ...item }
|
||||
this.form.groups = 1
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum){
|
||||
console.log( '点击切换页数' +pageNum)
|
||||
this.query.pageNum = pageNum
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize){
|
||||
this.pageSize = pageSize
|
||||
this.query.pageSize = pageSize
|
||||
this.getList()
|
||||
console.log(pageSize)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.clss {
|
||||
border: 4px dashed #d9d9d9 !important;
|
||||
}
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTables
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTables>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="demo-ruleForm">
|
||||
<el-form-item label="缴费标题" prop="subject">
|
||||
<el-input size="mini" v-model="form.subject"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费金额" prop="money">
|
||||
<el-input size="mini" type="number" v-model="form.money"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker
|
||||
v-model="form.startTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择开始时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime" >
|
||||
<el-date-picker
|
||||
v-model="form.endTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择结束时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费说明" prop="explain">
|
||||
<el-input size="mini" v-model="form.explain"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postAddOrders, getOrders, putOrders } from './api'
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
subject: null, // 缴费标题
|
||||
money: null, // 金额
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
},
|
||||
{
|
||||
label: "金额",
|
||||
prop: "money",
|
||||
},
|
||||
{
|
||||
label: "缴费标题",
|
||||
prop: "subject",
|
||||
},
|
||||
{
|
||||
label: "缴费说明",
|
||||
prop: "explain",
|
||||
},
|
||||
{
|
||||
label: "开始时间",
|
||||
prop: "startTime",
|
||||
},
|
||||
{
|
||||
label: "结束时间",
|
||||
prop: "endTime",
|
||||
},
|
||||
{
|
||||
label: "状态", // 0-缴费中 1-缴费结束 2-删除
|
||||
prop: "status",
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: '新增', // 弹出层按钮
|
||||
rules: {
|
||||
subject: [
|
||||
{ required: true, message: '请输入缴费标题', trigger: 'blur' },
|
||||
],
|
||||
money: [
|
||||
{ required: true, message: '请输入缴费金额', trigger: 'blur' },
|
||||
],
|
||||
explain: [
|
||||
{ required: true, message: '请输入缴费说明', trigger: 'blur' },
|
||||
],
|
||||
startTime: [
|
||||
{ required: true, message: '请输入开始时间', trigger: 'blur' },
|
||||
],
|
||||
endTime: [
|
||||
{ required: true, message: '请输入结束时间', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList()
|
||||
},
|
||||
methods:{
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
let obj = { ...this.form }
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
}else{
|
||||
this.message(res.msg, 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
this.message(err.data.msg, 'error')
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
money: null, // 金额
|
||||
subject: null, // 缴费标题
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.query.pageNum = 1
|
||||
this.query.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getOrders(this.query).then( res =>{
|
||||
console.log(res)
|
||||
this.data = res.data.map(item =>{
|
||||
return item
|
||||
})
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(item) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(item)
|
||||
deleteOrders().then(res =>{
|
||||
if(res.code == 200){
|
||||
|
||||
}else{
|
||||
this.message(res.msg, 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
this.message(err.data.msg, 'error')
|
||||
})
|
||||
},
|
||||
// 编辑
|
||||
editData() {
|
||||
this.isVisible = true;
|
||||
this.title = '修改'
|
||||
this.resetForm()
|
||||
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum){
|
||||
console.log( '点击切换页数' +pageNum)
|
||||
this.query.pageNum = pageNum
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize){
|
||||
this.pageSize = pageSize
|
||||
this.query.pageSize = pageSize
|
||||
this.getList()
|
||||
console.log(pageSize)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,53 @@
|
||||
import request from '@/utils/request'
|
||||
// get获取列表
|
||||
export function getOrders (params) {
|
||||
return request({
|
||||
url: '/info/get',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
// 新增
|
||||
export function postAddOrders (data) {
|
||||
return request({
|
||||
url: '/info/add',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 修改
|
||||
export function putOrders (data) {
|
||||
return request({
|
||||
url: '/info/update',
|
||||
method: 'put',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function deleteOrders (id) {
|
||||
return request({
|
||||
url: '/info/delete',
|
||||
method: 'delete',
|
||||
params:{
|
||||
id
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 获取审批人
|
||||
export function getApprover () {
|
||||
return request({
|
||||
url: '/info/getTeacher',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
// 查询班级列表
|
||||
export function getClass() {
|
||||
return request({
|
||||
url: '/moral/moral/evaluableGradeAndClassList',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-table :data="tableData" style="width: 100%" height="650" size="mini">
|
||||
<el-table-column
|
||||
v-if="column.label !== 'id' && column.label !== '审批人Id'"
|
||||
align="center"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="column.type === 'text'"> {{ scope.row[column.prop] }}</span>
|
||||
<div v-else-if="column.type === 'image'">
|
||||
<img style="width: 200px; height: 100px" :src="scope.row[column.prop]" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" fixed="right" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-popconfirm
|
||||
@confirm="handleDelete(scope.row)"
|
||||
:title="'确定要删除吗？'"
|
||||
>
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonTablesImg",
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row.id);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
console.log(row);
|
||||
this.editFunc(row);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
type: column.type,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,359 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
|
||||
|
||||
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTablesImg
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTablesImg>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm">
|
||||
<el-form-item label="功能室名称" prop="roomName">
|
||||
<el-input size="mini" v-model="form.roomName" placeholder="请输入功能室名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="功能室容量" prop="roomCapacity">
|
||||
<el-input size="mini" type="number" v-model="form.roomCapacity" placeholder="请输入功能室容量（人）"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="功能室图片" prop="roomPicture">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="$store.state.imgUrl"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload">
|
||||
<img v-if="form.roomPicture" :src="form.roomPicture" class="avatar">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon clss"></i>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="位置信息" prop="desc" >
|
||||
<el-input size="mini" v-model="form.desc" placeholder="请输入功能室位置信息"></el-input>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="审批人" prop="userId">
|
||||
<el-select size="mini" v-model="form.userId" placeholder="请选择审批人" multiple clearable >
|
||||
<el-option
|
||||
v-for="item in approverArr"
|
||||
:key="item.userId"
|
||||
:label="item.name"
|
||||
:value="item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonTablesImg from './components/CommonTablesImg.vue'
|
||||
import { postAddOrders, getOrders, putOrders, getApprover, deleteOrders } from './api'
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
var validates = (rule, value, callback) => {
|
||||
console.log(value)
|
||||
if (value <= 0 || value == null) {
|
||||
callback(new Error("最小值为1"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
form: {
|
||||
roomName: null, // 名称
|
||||
roomCapacity: null, // 容量
|
||||
roomPicture: null, // 功能室图片
|
||||
desc: null, // 功能室位置信息
|
||||
userId: [], // 审批人列表
|
||||
groups: 1, // 0-功能室 1-功能室
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "功能室名称",
|
||||
prop: "roomName",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "功能室容量（人)",
|
||||
prop: "roomCapacity",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "功能室图片",
|
||||
prop: "roomPicture",
|
||||
type: 'image'
|
||||
},
|
||||
{
|
||||
label: "功能室位置信息",
|
||||
prop: "desc",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "审批人Id",
|
||||
prop: "userId",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "审批人",
|
||||
prop: "userVos",
|
||||
type: 'text'
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
groups: 1, // 0 是功能室
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: '新增', // 弹出层按钮
|
||||
approverArr: [], // 审批人列表
|
||||
rules: {
|
||||
roomName: [
|
||||
{ required: true, message: '请输入功能室名称', trigger: 'blur' },
|
||||
],
|
||||
roomCapacity: [
|
||||
{ required: true,validator: validates, trigger: 'blur' },
|
||||
],
|
||||
roomPicture: [
|
||||
{ required: true, message: '请上传功能室图片', trigger: 'blur' },
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: '请输入功能室位置信息', trigger: 'blur' },
|
||||
],
|
||||
userId: [
|
||||
{ required: true, message: '请选择审批人', trigger: 'change' },
|
||||
],
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
getApprover().then(res =>{
|
||||
this.approverArr = res.data
|
||||
})
|
||||
this.getList()
|
||||
},
|
||||
components:{
|
||||
CommonTablesImg
|
||||
},
|
||||
methods:{
|
||||
// 上传成功回调地址
|
||||
handleAvatarSuccess(res, file) {
|
||||
console.log(res.data)
|
||||
// this.form.roomPicture = URL.createObjectURL(file.raw);
|
||||
this.form.roomPicture = res.data;
|
||||
},
|
||||
// 限制图片
|
||||
beforeAvatarUpload(file) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传图片大小不能超过 2MB!');
|
||||
}
|
||||
return isLt2M;
|
||||
},
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
let obj = { ...this.form }
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
if(this.form.id){ // 有id说明是修改
|
||||
console.log('进入的修改')
|
||||
delete obj.userVos
|
||||
putOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message('修改成功！')
|
||||
this.isVisible = false;
|
||||
}else{
|
||||
this.message(res.msg, 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
this.message(err.msg, 'error')
|
||||
})
|
||||
}else{ // 新增
|
||||
console.log('进入的新增')
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
}else{
|
||||
this.message((err.msg ? err.msg : '修改失败'), 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
console.log(err.msg)
|
||||
this.message((err.msg ? err.msg : '修改失败'), 'error')
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增功能室'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
groups: 1
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
roomName: null, // 名称
|
||||
roomCapacity: null, // 容量
|
||||
roomPicture: null, // 功能室图片
|
||||
desc: null, // 功能室位置信息
|
||||
userId: [], // 审批人列表
|
||||
groups: 1, // 0-功能室 1-功能室
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.query.pageNum = 1
|
||||
this.query.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getOrders(this.query).then( res =>{
|
||||
this.data = res.data.map(item =>{
|
||||
let str = ''
|
||||
item.userVos.forEach((it,ix) => {
|
||||
if(ix == 0){
|
||||
str = it.name
|
||||
}else{
|
||||
str = str +','+ it.name
|
||||
}
|
||||
});
|
||||
|
||||
item.userVos = str
|
||||
return item
|
||||
|
||||
})
|
||||
console.log(this.data)
|
||||
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(id) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(id)
|
||||
deleteOrders(id).then(res =>{
|
||||
this.getList()
|
||||
if(res.code == 200){
|
||||
this.message(res.msg)
|
||||
}else{
|
||||
this.message(res.msg, 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
this.message(err.data.msg, 'error')
|
||||
})
|
||||
},
|
||||
// 编辑
|
||||
editData(item) {
|
||||
this.isVisible = true;
|
||||
this.title = '修改功能室'
|
||||
this.resetForm()
|
||||
this.form = { ...item }
|
||||
this.form.groups = 1
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum){
|
||||
console.log( '点击切换页数' +pageNum)
|
||||
this.query.pageNum = pageNum
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize){
|
||||
this.pageSize = pageSize
|
||||
this.query.pageSize = pageSize
|
||||
this.getList()
|
||||
console.log(pageSize)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.clss {
|
||||
border: 4px dashed #d9d9d9 !important;
|
||||
}
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
import request from '../../../utils/request'
|
||||
// get获取列表
|
||||
export function getOrders (params) {
|
||||
return request({
|
||||
url: '/schoolpay/orders/get',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
// 新增
|
||||
export function postAddOrders (data) {
|
||||
return request({
|
||||
url: '/schoolpay/orders/add',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function deleteOrders (id) {
|
||||
return request({
|
||||
url: '/schoolpay/orders/delete',
|
||||
method: 'put',
|
||||
params:{
|
||||
id
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 查看订单缴费详情
|
||||
export function getUserOrders (orderId) {
|
||||
return request({
|
||||
url: '/schoolpay/userOrders/get',
|
||||
method: 'get',
|
||||
params:{
|
||||
orderId
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 查看订单未交费人员
|
||||
export function getNoOrders (orderId) {
|
||||
return request({
|
||||
url: '/schoolpay/userOrders/getNoOrders',
|
||||
method: 'get',
|
||||
params:{
|
||||
orderId
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 查看缴费标题字典
|
||||
export function getSubject () {
|
||||
return request({
|
||||
url: '/schoolpay/orders/getSub',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
// 获取组织架构
|
||||
export function getOrganization (superId){
|
||||
return request({
|
||||
url: `/user-dept/user/dept/${superId}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-table :data="tableData" style="width: 100%" height="650" size="mini">
|
||||
<el-table-column
|
||||
v-if="column.label !== 'id'"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
></el-table-column>
|
||||
<el-table-column fixed="right" prop="zip" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>编辑</el-button
|
||||
> -->
|
||||
<el-button
|
||||
@click="handleDetail(scope.row)"
|
||||
type="text"
|
||||
size="small"
|
||||
>缴费情况</el-button
|
||||
>
|
||||
<el-popconfirm
|
||||
@confirm="handleDelete(scope.row)"
|
||||
:title="'确定要删除吗？'"
|
||||
>
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
detailFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
name: "CommonTables",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
console.log(row);
|
||||
// 调用触发父组件的函数叫他发请求删除元素，重新获取数据 id
|
||||
// this.deleteFunc(id);
|
||||
this.deleteFunc(row);
|
||||
const index = this.tableData.indexOf(row); // 找到要删除的数据项在数组中的索引
|
||||
this.tableData.splice(index, 1); // 使用splice方法从数组中删除该数据项
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
console.log(row);
|
||||
this.editFunc(row);
|
||||
},
|
||||
// 详情事件
|
||||
handleDetail(row) {
|
||||
// console.log(row);
|
||||
this.detailFunc(row);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.s {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
|
||||
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="校区名称" prop="schoolId">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="query.schoolId"
|
||||
placeholder="请选择校区"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in schoolArr"
|
||||
:label="item.name"
|
||||
:value="item.deptId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-row :gutter="35"> -->
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="缴费标题" prop="subject">
|
||||
<el-input size="mini" v-model="query.subject"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="缴费金额" prop="money">
|
||||
<el-input size="mini" type="number" v-model="query.money"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="开始时间" prop="date">
|
||||
<el-date-picker
|
||||
v-model="query.date"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择开始时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTables
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:detail-func="detailData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTables>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="demo-ruleForm">
|
||||
<el-form-item label="校区名称" prop="schoolId">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="form.schoolId"
|
||||
placeholder="请选择校区"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in schoolArr"
|
||||
:label="item.name"
|
||||
:value="item.deptId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费标题" prop="subject">
|
||||
<el-input size="mini" v-model="form.subject"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费金额" prop="money">
|
||||
<el-input size="mini" type="number" v-model="form.money"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker
|
||||
v-model="form.startTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择开始时间"
|
||||
@change="onChangeStartTime"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime" >
|
||||
<el-date-picker
|
||||
v-model="form.endTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择结束时间"
|
||||
@change="onChangeEndTime"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费说明" prop="explain">
|
||||
<el-input size="mini" v-model="form.explain"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="缴费详细" :visible.sync="isVisible1" width="30%">
|
||||
<div class="big-box">
|
||||
<h3>已缴费名单</h3>
|
||||
<div v-if="userArr.length" class="dialog-box">
|
||||
<div v-for="(item, index) in userArr" class="" :key="index">{{item.name}}</div>
|
||||
</div>
|
||||
<div v-else class="dialog-box">
|
||||
暂无缴费名单
|
||||
</div>
|
||||
<h3>未缴费名单</h3>
|
||||
<div v-if="noUserArr.length" class="dialog-box">
|
||||
<div v-for="(item, index) in noUserArr" class="" :key="index">{{item.name}}</div>
|
||||
</div>
|
||||
<div v-else class="dialog-box">
|
||||
暂无缴费名单
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible1 = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="isVisible1 = false">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postAddOrders, getOrders, deleteOrders, getUserOrders, getNoOrders, getOrganization } from './api'
|
||||
import CommonTables from './components/CommonTables.vue'
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
subject: null, // 缴费标题 .
|
||||
schoolId: null, // 校区
|
||||
money: null, // 金额
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
},
|
||||
{
|
||||
label: "校区名称",
|
||||
prop: "schoolName",
|
||||
},
|
||||
{
|
||||
label: "缴费标题",
|
||||
prop: "subject",
|
||||
},
|
||||
{
|
||||
label: "缴费金额",
|
||||
prop: "money",
|
||||
},
|
||||
{
|
||||
label: "缴费说明",
|
||||
prop: "explain",
|
||||
},
|
||||
{
|
||||
label: "开始时间",
|
||||
prop: "startTime",
|
||||
},
|
||||
{
|
||||
label: "结束时间",
|
||||
prop: "endTime",
|
||||
},
|
||||
{
|
||||
label: "状态", // 0-缴费中 1-缴费结束 2-删除
|
||||
prop: "status",
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
schoolId: null,
|
||||
subject: null, // 缴费标题
|
||||
money: null, // 金额
|
||||
explain: null, // 缴费说明
|
||||
date: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
isVisible1: false,// 详情状态
|
||||
title: '新增', // 弹出层按钮
|
||||
rules: {
|
||||
subject: [
|
||||
{ required: true, message: '请输入缴费标题', trigger: 'blur' },
|
||||
],
|
||||
money: [
|
||||
{ required: true, message: '请输入缴费金额', trigger: 'blur' },
|
||||
],
|
||||
schoolId: [
|
||||
{ required: true, message: '请选择校区', trigger: 'change' },
|
||||
],
|
||||
explain: [
|
||||
{ required: true, message: '请输入缴费说明', trigger: 'blur' },
|
||||
],
|
||||
startTime: [
|
||||
{ required: true, message: '请输入开始时间', trigger: 'blur' },
|
||||
],
|
||||
endTime: [
|
||||
{ required: true, message: '请输入结束时间', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
statusArr: ['缴费中', '缴费结束', '删除'],
|
||||
userArr: [], // 已缴费人员
|
||||
noUserArr: [], // 未交费人员
|
||||
schoolArr: [], //
|
||||
}
|
||||
},
|
||||
components:{
|
||||
CommonTables
|
||||
},
|
||||
created(){
|
||||
this.getList()
|
||||
getOrganization(0).then((res) => {
|
||||
console.log(res);
|
||||
this.schoolArr = res.data;
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let obj = { ...this.form }
|
||||
let startTime = new Date(this.form.startTime)
|
||||
let endTime = new Date(this.form.endTime)
|
||||
obj.startTime = startTime
|
||||
obj.endTime = endTime
|
||||
console.log(startTime)
|
||||
console.log(endTime)
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
|
||||
}else{
|
||||
this.message('新增失败', 'error')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击开始时间比较
|
||||
onChangeStartTime() {
|
||||
// startTime: null, // 开始时间
|
||||
// endTime: null, // 结束时间
|
||||
let start = (new Date(this.form.startTime)).getTime()
|
||||
let end = (new Date(this.form.endTime)).getTime()
|
||||
if(this.form.endTime){
|
||||
if(start > end){
|
||||
this.message('开始时间不能大于结束时间','error')
|
||||
this.form.startTime = null
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 点击结束时间比较
|
||||
onChangeEndTime() {
|
||||
let start = (new Date(this.form.startTime)).getTime()
|
||||
let end = (new Date(this.form.endTime)).getTime()
|
||||
console.log(start)
|
||||
console.log(end)
|
||||
if(this.form.startTime){
|
||||
console.log('--------------')
|
||||
if(start > end){
|
||||
console.log('++++++++++++')
|
||||
this.message('开始时间不能大于结束时间','error')
|
||||
|
||||
this.form.endTime = null
|
||||
}
|
||||
}
|
||||
},
|
||||
// 查看详情
|
||||
detailData(row) {
|
||||
console.log(row)
|
||||
console.log('-----------------')
|
||||
this.isVisible1 = true
|
||||
this.userArr.push('张三返回')
|
||||
// for( let i = 0; i < 100; i++){
|
||||
// this.userArr.push({name: '张三返回'})
|
||||
// }
|
||||
// for( let i = 0; i < 100; i++){
|
||||
// this.noUserArr.push({name: '张三返回'})
|
||||
// }
|
||||
getUserOrders(row.id).then( res =>{
|
||||
console.log(res)
|
||||
this.userArr = res.data
|
||||
|
||||
})
|
||||
getNoOrders(row.id).then(res =>{
|
||||
this.noUserArr = res.data
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
schoolId: null, //
|
||||
subject: null, // 缴费标题
|
||||
money: null, // 金额
|
||||
explain: null, // 缴费说明
|
||||
date: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
this.getList()
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
money: null, // 金额
|
||||
subject: null, // 缴费标题
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
schoolId: null, // 校区
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
// console.log("搜索了", rew);
|
||||
this.query.pageNum = 1
|
||||
this.query.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getOrders(this.query).then( res =>{
|
||||
console.log(res)
|
||||
this.data = res.data.map(item =>{
|
||||
item.status = this.statusArr[item.status]
|
||||
item.startTime = this.formatDate(item.startTime)
|
||||
item.endTime = this.formatDate(item.endTime)
|
||||
return item
|
||||
})
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(item) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(item)
|
||||
deleteOrders(item.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.message('删除成功！')
|
||||
}else{
|
||||
this.message('删除失败！', 'error')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 编辑
|
||||
editData() {
|
||||
this.isVisible = true;
|
||||
this.title = '修改'
|
||||
this.resetForm()
|
||||
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum){
|
||||
console.log( '点击切换页数' +pageNum)
|
||||
this.query.pageNum = pageNum
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize){
|
||||
console.log( '点击了每页页数' +pageSize)
|
||||
this.query.pageSize = pageSize
|
||||
this.getList()
|
||||
console.log(pageSize)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.big-box{
|
||||
|
||||
}
|
||||
.dialog-box{
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-height: 200px;
|
||||
// min-height: 50px;
|
||||
padding: 20px 0 40px;
|
||||
overflow: auto;
|
||||
div{
|
||||
padding: 5px 5px;
|
||||
box-sizing: border-box;
|
||||
// height: 40px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTables
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTables>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="demo-ruleForm">
|
||||
<el-form-item label="缴费标题" prop="subject">
|
||||
<el-input size="mini" v-model="form.subject"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费金额" prop="money">
|
||||
<el-input size="mini" type="number" v-model="form.money"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker
|
||||
v-model="form.startTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择开始时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime" >
|
||||
<el-date-picker
|
||||
v-model="form.endTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择结束时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费说明" prop="explain">
|
||||
<el-input size="mini" v-model="form.explain"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postAddOrders, getOrders, putOrders } from './api'
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
subject: null, // 缴费标题
|
||||
money: null, // 金额
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
},
|
||||
{
|
||||
label: "金额",
|
||||
prop: "money",
|
||||
},
|
||||
{
|
||||
label: "缴费标题",
|
||||
prop: "subject",
|
||||
},
|
||||
{
|
||||
label: "缴费说明",
|
||||
prop: "explain",
|
||||
},
|
||||
{
|
||||
label: "开始时间",
|
||||
prop: "startTime",
|
||||
},
|
||||
{
|
||||
label: "结束时间",
|
||||
prop: "endTime",
|
||||
},
|
||||
{
|
||||
label: "状态", // 0-缴费中 1-缴费结束 2-删除
|
||||
prop: "status",
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: '新增', // 弹出层按钮
|
||||
rules: {
|
||||
subject: [
|
||||
{ required: true, message: '请输入缴费标题', trigger: 'blur' },
|
||||
],
|
||||
money: [
|
||||
{ required: true, message: '请输入缴费金额', trigger: 'blur' },
|
||||
],
|
||||
explain: [
|
||||
{ required: true, message: '请输入缴费说明', trigger: 'blur' },
|
||||
],
|
||||
startTime: [
|
||||
{ required: true, message: '请输入开始时间', trigger: 'blur' },
|
||||
],
|
||||
endTime: [
|
||||
{ required: true, message: '请输入结束时间', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList()
|
||||
},
|
||||
methods:{
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
let obj = { ...this.form }
|
||||
let startTime = new Date(this.form.startTime)
|
||||
let endTime = new Date(this.form.endTime)
|
||||
obj.startTime = startTime
|
||||
obj.endTime = endTime
|
||||
console.log(startTime)
|
||||
console.log(endTime)
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
|
||||
}else{
|
||||
this.message('新增失败', 'error')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
money: null, // 金额
|
||||
subject: null, // 缴费标题
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.query.pageNum = 1
|
||||
this.query.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getOrders(this.query).then( res =>{
|
||||
console.log(res)
|
||||
this.data = res.data.map(item =>{
|
||||
return item
|
||||
})
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(item) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(item)
|
||||
// putOrders().then(res =>{
|
||||
|
||||
// })
|
||||
},
|
||||
// 编辑
|
||||
editData() {
|
||||
this.isVisible = true;
|
||||
this.title = '修改'
|
||||
this.resetForm()
|
||||
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum){
|
||||
console.log( '点击切换页数' +pageNum)
|
||||
this.query.pageNum = pageNum
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize){
|
||||
this.pageSize = pageSize
|
||||
this.query.pageSize = pageSize
|
||||
this.getList()
|
||||
console.log(pageSize)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,55 @@
|
||||
import request from '../../../utils/request'
|
||||
// 新增订单
|
||||
export function postAddOrders (data) {
|
||||
return request({
|
||||
url: '/schoolpay/orders/add',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
// get获取列表
|
||||
export function getOrders (params) {
|
||||
return request({
|
||||
url: '/schoolpay/orders/get',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
// 删除订单
|
||||
export function putOrders (id) {
|
||||
return request({
|
||||
url: '/schoolpay/orders/delete',
|
||||
method: 'put',
|
||||
params:{
|
||||
id
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 查看订单缴费详情
|
||||
export function getUserOrders (orderId) {
|
||||
return request({
|
||||
url: '/schoolpay/userOrders/get',
|
||||
method: 'get',
|
||||
params:{
|
||||
orderId
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 查看订单缴费详情
|
||||
export function getUserOrders1 (params) {
|
||||
return request({
|
||||
url: '/schoolpay/userOrders/get',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
// 查看缴费标题字典
|
||||
export function getSubject () {
|
||||
return request({
|
||||
url: '/schoolpay/orders/getSub',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="resetClick" type="info" size="mini" icon="iconfont icon-biaodan"
|
||||
>重置</el-button
|
||||
>
|
||||
<el-button @click="searchClick" type="warning" size="mini" icon="el-icon-search"
|
||||
>搜索</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonHead",
|
||||
data() {
|
||||
return {
|
||||
searchData: "",
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
newlyClick() {
|
||||
// 在此处调用父组件传入的方法叫父组件做事情
|
||||
this.$emit("newly-data");
|
||||
},
|
||||
resetClick() {
|
||||
this.$emit("reset-data");
|
||||
},
|
||||
searchClick() {
|
||||
this.$emit("search-data", this.searchData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-table :data="tableData" style="width: 100%" height="650" size="mini">
|
||||
<el-table-column
|
||||
v-if="column.label !== 'id'"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
detailFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
name: "CommonTables",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
console.log(row);
|
||||
// 调用触发父组件的函数叫他发请求删除元素，重新获取数据 id
|
||||
// this.deleteFunc(id);
|
||||
this.deleteFunc(row);
|
||||
const index = this.tableData.indexOf(row); // 找到要删除的数据项在数组中的索引
|
||||
this.tableData.splice(index, 1); // 使用splice方法从数组中删除该数据项
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
console.log(row);
|
||||
this.editFunc(row);
|
||||
},
|
||||
// 详情事件
|
||||
handleDetail(row) {
|
||||
// console.log(row);
|
||||
this.detailFunc(row);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.s {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,333 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="缴费标题">
|
||||
<el-select
|
||||
v-model="query.orderId"
|
||||
placeholder="请选择缴费标题"
|
||||
clearable
|
||||
class="w100"
|
||||
filterable
|
||||
>
|
||||
<el-option v-for="(item, index) in subjectArr" :key="index" :label="item.subject" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="缴费金额">
|
||||
<el-input v-model="query.totalAmount" placeholder="请输入缴费金额" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="缴费时间">
|
||||
<el-date-picker
|
||||
v-model="query.orderTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择缴费时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="手机号码">
|
||||
<el-input type="number" v-model="query.mobile" placeholder="请输入手机号码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="用户姓名">
|
||||
<el-input v-model="query.name" placeholder="请输入用户姓名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="支付宝订单号">
|
||||
<el-input v-model="query.tradeNo" placeholder="请输入支付宝订单号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTables
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTables>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="demo-ruleForm">
|
||||
<el-form-item label="缴费标题" prop="subject">
|
||||
<el-input size="mini" v-model="form.subject"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费金额" prop="money">
|
||||
<el-input size="mini" type="number" v-model="form.money"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker
|
||||
v-model="form.startTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择开始时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime" >
|
||||
<el-date-picker
|
||||
v-model="form.endTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择结束时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费说明" prop="explain">
|
||||
<el-input size="mini" v-model="form.explain"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postAddOrders, getOrders, putOrders, getSubject, getUserOrders1 } from './api'
|
||||
import CommonTables from './components/CommonTables.vue'
|
||||
import CommonHead from './components/CommonHead.vue'
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
subject: null, // 缴费标题
|
||||
money: null, // 金额
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
},
|
||||
{
|
||||
label: "缴费标题",
|
||||
prop: "subject",
|
||||
},
|
||||
{
|
||||
label: "缴费说明",
|
||||
prop: "explain",
|
||||
},
|
||||
{
|
||||
label: "订单号",
|
||||
prop: "outTradeNo",
|
||||
},
|
||||
{
|
||||
label: "金额",
|
||||
prop: "totalAmount",
|
||||
},
|
||||
{
|
||||
label: "缴费时间",
|
||||
prop: "orderTime",
|
||||
},
|
||||
{
|
||||
label: "用户姓名",
|
||||
prop: "name",
|
||||
},
|
||||
{
|
||||
label: "手机号码",
|
||||
prop: "mobile",
|
||||
},
|
||||
{
|
||||
label: "支付宝订单号",
|
||||
prop: "tradeNo",
|
||||
},
|
||||
{
|
||||
label: "系统付款状态",
|
||||
prop: "status",
|
||||
},
|
||||
{
|
||||
label: "支付宝付款状态",
|
||||
prop: "tradeStatus",
|
||||
},
|
||||
{
|
||||
label: "系统付款金额",
|
||||
prop: "buyerPayAmount",
|
||||
},
|
||||
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
orderId: null,
|
||||
totalAmount: null, // 缴费金额
|
||||
orderTime: null, // 缴费时间
|
||||
mobile: null, // 手机号码
|
||||
name: null, // 用户姓名
|
||||
tradeNo:null, // 支付宝订单号
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: '新增', // 弹出层按钮
|
||||
rules: {
|
||||
subject: [
|
||||
{ required: true, message: '请输入缴费标题', trigger: 'blur' },
|
||||
],
|
||||
money: [
|
||||
{ required: true, message: '请输入缴费金额', trigger: 'blur' },
|
||||
],
|
||||
explain: [
|
||||
{ required: true, message: '请输入缴费说明', trigger: 'blur' },
|
||||
],
|
||||
startTime: [
|
||||
{ required: true, message: '请输入开始时间', trigger: 'blur' },
|
||||
],
|
||||
endTime: [
|
||||
{ required: true, message: '请输入结束时间', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
statusArr: ['待缴费', '缴费成功', '缴费失败'],
|
||||
subjectArr: [], // 字典
|
||||
}
|
||||
},
|
||||
components:{
|
||||
CommonTables,
|
||||
CommonHead
|
||||
},
|
||||
created(){
|
||||
this.getList()
|
||||
getSubject().then(res =>{
|
||||
console.log(res)
|
||||
this.subjectArr = res.data
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let obj = { ...this.form }
|
||||
let startTime = new Date(this.form.startTime)
|
||||
let endTime = new Date(this.form.endTime)
|
||||
obj.startTime = startTime
|
||||
obj.endTime = endTime
|
||||
console.log(startTime)
|
||||
console.log(endTime)
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
|
||||
}else{
|
||||
this.message('新增失败', 'error')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
money: null, // 金额
|
||||
subject: null, // 缴费标题
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getUserOrders1(this.query).then( res =>{
|
||||
console.log(res)
|
||||
this.data = res.data.map(item =>{
|
||||
item.status = this.statusArr[item.status]
|
||||
item.orderTime = this.formatDate(item.orderTime)
|
||||
return item
|
||||
})
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(item) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(item)
|
||||
// putOrders().then(res =>{
|
||||
|
||||
// })
|
||||
},
|
||||
// 编辑
|
||||
editData() {
|
||||
this.isVisible = true;
|
||||
this.title = '修改'
|
||||
this.resetForm()
|
||||
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum){
|
||||
console.log( '点击切换页数' +pageNum)
|
||||
this.query.pageNum = pageNum
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize){
|
||||
this.pageSize = pageSize
|
||||
this.query.pageSize = pageSize
|
||||
this.getList()
|
||||
console.log(pageSize)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
if(type == 'success'){
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,53 @@
|
||||
export default [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "发件人",
|
||||
prop: "userName",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "信件内容",
|
||||
prop: "details",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "时间",
|
||||
prop: "mailTime",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
{
|
||||
label: "联系方式",
|
||||
prop: "phone",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "是否匿名",
|
||||
prop: "sender",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "处理状态",
|
||||
prop: "disposeState",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "反馈内容",
|
||||
prop: "backDispose",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "image",
|
||||
prop: "img",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "是否公开",
|
||||
prop: "openState",
|
||||
type: "text",
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,455 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover">
|
||||
<MailboxAllCommonHead
|
||||
@newly-data="deleteAllSelections"
|
||||
@reset-data="reset"
|
||||
@search-data="search"
|
||||
/>
|
||||
<!-- newly-data删除所选事件 -->
|
||||
<!-- reset-data重置表单内容 -->
|
||||
<!-- search-data搜索事件，接收被搜索的内容 -->
|
||||
<el-form
|
||||
:model="searchFormDatass"
|
||||
size="mini"
|
||||
label-width="100px"
|
||||
class="mt35 mb35"
|
||||
>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker
|
||||
v-model="searchFormDatass.mailTime"
|
||||
class="w100"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="匿名状态">
|
||||
<el-select
|
||||
v-model="searchFormDatass.sender"
|
||||
placeholder="请选择匿名状态"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option label="匿名" value="1"></el-option>
|
||||
<el-option label="不匿名" value="0"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="公开状态">
|
||||
<el-select
|
||||
v-model="searchFormDatass.openState"
|
||||
placeholder="请选择公开状态"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option label="公开" value="1"></el-option>
|
||||
<el-option label="不公开" value="0"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="处理状态">
|
||||
<el-select
|
||||
v-model="searchFormDatass.disposeState"
|
||||
placeholder="请选择处理状态"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option label="已处理" value="1"></el-option>
|
||||
<el-option label="未查看" value="2"></el-option>
|
||||
<el-option label="已查看" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="联系方式">
|
||||
<el-input
|
||||
v-model="searchFormDatass.phone"
|
||||
placeholder="请输入联系方式"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<PrinciTablesImg
|
||||
v-loading="loading"
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
@selectFunc="deleteAllSelection"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></PrinciTablesImg>
|
||||
<!-- 对话框 -->
|
||||
<el-dialog width="30%" :visible.sync="isVisible" title="处理信箱">
|
||||
<el-form
|
||||
ref="ruleForm"
|
||||
:rules="rules"
|
||||
:model="form"
|
||||
label-width="80px"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<el-form-item label="发件人" prop="userName">
|
||||
<el-input
|
||||
v-model="form.userName"
|
||||
size="mini"
|
||||
placeholder="发件人已匿名"
|
||||
:disabled="true"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="信件内容" prop="details">
|
||||
<el-input
|
||||
v-model="form.details"
|
||||
size="mini"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
:disabled="true"
|
||||
placeholder="信件内容为空"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间" prop="mailTime">
|
||||
<el-input
|
||||
v-model="form.mailTime"
|
||||
size="mini"
|
||||
placeholder="发布时间"
|
||||
:disabled="true"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="联系方式" prop="phone">
|
||||
<el-input
|
||||
v-model="form.phone"
|
||||
size="mini"
|
||||
type="number"
|
||||
:disabled="true"
|
||||
placeholder="联系方式"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片">
|
||||
<div class="images demo-image__preview">
|
||||
<el-image
|
||||
v-for="(item, index) in form.img"
|
||||
:key="index"
|
||||
style="width: 100px; height: 100px"
|
||||
:src="item"
|
||||
:preview-src-list="srcList"
|
||||
>
|
||||
<div slot="error" class="image-slot">未上传图片</div>
|
||||
</el-image>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="反馈" prop="backDispose">
|
||||
<el-input
|
||||
v-model="form.backDispose"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="请输入反馈内容"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否公开" prop="openState">
|
||||
<el-select
|
||||
v-model="form.openState"
|
||||
size="mini"
|
||||
placeholder="请选择是否公开"
|
||||
clearable
|
||||
>
|
||||
<el-option label="不公开" value="0"></el-option>
|
||||
<el-option label="公开" value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isVisible = false" size="mini">取 消</el-button>
|
||||
<el-button @click="modifyLetterStatus" size="mini" type="primary">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 分页器 -->
|
||||
<el-pagination
|
||||
style="margin-top: 10px"
|
||||
:current-page="1"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="10"
|
||||
:pager-count="7"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PrinciTablesImg from "../components/PrinciTablesImg.vue";
|
||||
import MailboxAllCommonHead from "../components/MailboxAllCommonHead.vue";
|
||||
import columns from "./columns.js";
|
||||
import {
|
||||
rqGetAListOfLetters,
|
||||
rqmodifyMailboxList,
|
||||
batchDeletion,
|
||||
individualDeletion,
|
||||
} from "../api.js";
|
||||
|
||||
export default {
|
||||
name: "LetterList",
|
||||
components: { PrinciTablesImg, MailboxAllCommonHead },
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
userName: null, //发件人
|
||||
details: null, // 信件内容
|
||||
mailTime: null, // 时间
|
||||
img: [], // 图片
|
||||
phone: null, // 联系方式
|
||||
sender: null, // 匿不匿名
|
||||
disposeState: null, // 处理状态
|
||||
backDispose: null, // 反馈内容
|
||||
openState: null, //是否公开
|
||||
},
|
||||
// 搜索
|
||||
searchFormDatass: {
|
||||
mailTime: null, // 时间
|
||||
phone: null, // 联系方式
|
||||
sender: null, // 匿不匿名
|
||||
disposeState: null, // 处理状态
|
||||
openState: null, //是否公开
|
||||
},
|
||||
// 分页数据总条数
|
||||
total: 10,
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
},
|
||||
loading: false,
|
||||
columns,
|
||||
data: [],
|
||||
// 弹出层
|
||||
isVisible: false,
|
||||
// 图片
|
||||
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
||||
srcList: [
|
||||
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
||||
],
|
||||
// 表单验证
|
||||
rules: {
|
||||
backDispose: [{ required: true, message: "请输入反馈内容", trigger: "change" }],
|
||||
openState: [{ required: true, message: "请选择是否公开", trigger: "change" }],
|
||||
disposeState: [{ required: true, message: "请选择处理状态", trigger: "change" }],
|
||||
},
|
||||
// 全选数组
|
||||
allArry: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getAListOfLetters();
|
||||
},
|
||||
methods: {
|
||||
// 重置按钮
|
||||
reset() {
|
||||
this.bus.$emit("onCurrentContextmenuClick", {
|
||||
id: 0,
|
||||
path: this.$route.path,
|
||||
});
|
||||
},
|
||||
// 获取信件列表
|
||||
async getAListOfLetters() {
|
||||
this.loading = true;
|
||||
let result = await rqGetAListOfLetters(
|
||||
this.pagination.pageNum,
|
||||
this.pagination.pageSize,
|
||||
this.searchFormDatass
|
||||
);
|
||||
console.log(result.data);
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
this.total = result.data.total;
|
||||
this.data = result.data.list.map((element) => {
|
||||
element.mailTime = this.formatDate(element.mailTime, "-", "year");
|
||||
element.sender == 1 ? (element.sender = "匿名") : element.sender;
|
||||
element.sender == 0 ? (element.sender = "不匿名") : element.sender;
|
||||
element.disposeState == 0
|
||||
? (element.disposeState = "未处理")
|
||||
: element.disposeState;
|
||||
element.disposeState == 1
|
||||
? (element.disposeState = "已处理")
|
||||
: element.disposeState;
|
||||
element.disposeState == 2
|
||||
? (element.disposeState = "未查看")
|
||||
: element.disposeState;
|
||||
element.disposeState == 3
|
||||
? (element.disposeState = "已查看")
|
||||
: element.disposeState;
|
||||
element.openState == 1 ? (element.openState = "公开") : element.openState;
|
||||
element.openState == 0 ? (element.openState = "不公开") : element.openState;
|
||||
// 处理后端传过来的字符串数组
|
||||
// 移除方括号
|
||||
const trimmedStr = element.img.slice(1, -1);
|
||||
// 分割字符串为多个子字符串
|
||||
const substrings = trimmedStr.split(",");
|
||||
// 去除子字符串中的空格，并构建新数组
|
||||
const result = substrings.map((substring) => substring.trim());
|
||||
element.img = result;
|
||||
return element;
|
||||
});
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 点击分页器页码
|
||||
currentChange(val) {
|
||||
this.pagination.pageNum = val;
|
||||
this.getAListOfLetters();
|
||||
},
|
||||
// 点击显示条数
|
||||
sizeChange(val) {
|
||||
this.pagination.pageSize = val;
|
||||
this.getAListOfLetters();
|
||||
},
|
||||
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.getAListOfLetters();
|
||||
},
|
||||
|
||||
// 单个删除
|
||||
async deleteData(item) {
|
||||
let result = await individualDeletion(item);
|
||||
if (result.code == 200) {
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getAListOfLetters();
|
||||
} else {
|
||||
this.$message.error("删除失败");
|
||||
}
|
||||
},
|
||||
// 删除全选按钮
|
||||
async deleteAllSelections() {
|
||||
// 把传过来的数据处理成只有id的数组
|
||||
let idArray = this.allArry.map((item) => item.id);
|
||||
console.log(idArray);
|
||||
let str = idArray.join(",");
|
||||
let result = await batchDeletion(str);
|
||||
if (result.code == 200) {
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getAListOfLetters();
|
||||
} else {
|
||||
this.$message.error("删除失败");
|
||||
}
|
||||
},
|
||||
// 把子组件传过来的用户选择的列表存到父组件
|
||||
deleteAllSelection(val) {
|
||||
this.allArry = val;
|
||||
},
|
||||
// 编辑
|
||||
async editData(row) {
|
||||
console.log(row);
|
||||
this.srcList = row.img;
|
||||
this.isVisible = true;
|
||||
this.form = { ...row };
|
||||
let clonedObject = JSON.parse(JSON.stringify(this.form));
|
||||
// 1、已处理 2、未查看 3、已查看
|
||||
if (clonedObject.disposeState == "未查看") {
|
||||
clonedObject.disposeState = "已查看";
|
||||
}
|
||||
this.see(clonedObject);
|
||||
},
|
||||
// 点击确定查看
|
||||
async see(clonedObject) {
|
||||
let that = clonedObject;
|
||||
for (let key in that) {
|
||||
if (key == "sender" && that[key] == "匿名") {
|
||||
that[key] = 1;
|
||||
} else if (key == "sender" && that[key] == "不匿名") {
|
||||
that[key] = 0;
|
||||
} else if (key == "disposeState" && that[key] == "已处理") {
|
||||
that[key] = 1;
|
||||
} else if (key == "disposeState" && that[key] == "未查看") {
|
||||
that[key] = 2;
|
||||
} else if (key == "disposeState" && that[key] == "已查看") {
|
||||
that[key] = 3;
|
||||
} else if (key == "openState" && that[key] == "公开") {
|
||||
that[key] = 1;
|
||||
} else if (key == "openState" && that[key] == "不公开") {
|
||||
that[key] = 0;
|
||||
}
|
||||
}
|
||||
that.img = JSON.stringify(that.img);
|
||||
let result = await rqmodifyMailboxList(that);
|
||||
if (result.code == 200) {
|
||||
this.getAListOfLetters();
|
||||
} else {
|
||||
console.log("网络错误");
|
||||
}
|
||||
},
|
||||
// 确定修改信件状态
|
||||
async modifyLetterStatus() {
|
||||
this.$refs.ruleForm.validate(async (success) => {
|
||||
if (success) {
|
||||
this.form.disposeState = "已处理";
|
||||
let that = this.form;
|
||||
for (let key in that) {
|
||||
if (key == "sender" && that[key] == "匿名") {
|
||||
that[key] = 1;
|
||||
} else if (key == "sender" && that[key] == "不匿名") {
|
||||
that[key] = 0;
|
||||
} else if (key == "disposeState" && that[key] == "已处理") {
|
||||
that[key] = 1;
|
||||
} else if (key == "disposeState" && that[key] == "未查看") {
|
||||
that[key] = 2;
|
||||
} else if (key == "disposeState" && that[key] == "已查看") {
|
||||
that[key] = 3;
|
||||
} else if (key == "openState" && that[key] == "公开") {
|
||||
that[key] = 1;
|
||||
} else if (key == "openState" && that[key] == "不公开") {
|
||||
that[key] = 0;
|
||||
}
|
||||
}
|
||||
this.isVisible = false;
|
||||
that.img = JSON.stringify(that.img);
|
||||
let result = await rqmodifyMailboxList(that);
|
||||
if (result.code == 200) {
|
||||
this.$message({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getAListOfLetters();
|
||||
} else {
|
||||
this.$message.error("修改失败");
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-image {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
export let columns = [
|
||||
{
|
||||
label: "userId",
|
||||
prop: "userId",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "userName",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
@@ -0,0 +1,170 @@
|
||||
.home {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.home-card-more {
|
||||
float: right;
|
||||
padding: 3px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.home-card-time {
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
width: 130px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.user-item {
|
||||
height: 198px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-item-left {
|
||||
width: 100px;
|
||||
height: 130px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.user-item-right {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
.right-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
.right-l-v {
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
.right-label {
|
||||
color: var(--prev-color-text-regular);
|
||||
width: 40px;
|
||||
}
|
||||
.right-value {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.info {
|
||||
height: 198px;
|
||||
.info-scroll {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.info-ul {
|
||||
list-style: none;
|
||||
.info-item {
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
color: var(--prev-color-text-regular);
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
&:hover {
|
||||
color: var(--prev-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
.info-item-left {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.info-item-right {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-recommend-row {
|
||||
.home-recommend {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
color: var(--prev-color-text-white);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
i {
|
||||
right: 0px !important;
|
||||
bottom: 0px !important;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
font-size: 70px;
|
||||
transform: rotate(-30deg);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
.home-recommend-auto {
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5%;
|
||||
.home-recommend-msg {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.charts {
|
||||
width: 100%;
|
||||
height: 282.6px;
|
||||
display: flex;
|
||||
padding: 12px 15px;
|
||||
.charts-left {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.charts-right {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.home-charts {
|
||||
height: 282.6px;
|
||||
.home-charts-item {
|
||||
background-color: var(--prev-bg-main-color);
|
||||
padding: 19px 15px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:hover {
|
||||
.home-charts-item-right {
|
||||
i {
|
||||
transform: rotate(45deg);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-charts-item-left {
|
||||
flex: 1;
|
||||
.home-charts-item-title {
|
||||
font-size: 13px;
|
||||
}
|
||||
.home-charts-item-num {
|
||||
font-size: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.home-charts-item-right {
|
||||
i {
|
||||
font-size: 20px;
|
||||
padding: 8px;
|
||||
border-radius: 100%;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<!-- charts -->
|
||||
<el-row :gutter="15" class="mt15">
|
||||
<el-col :md="24" :lg="8" :xl="8" class="mb15">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>今年信件占比</span>
|
||||
</div>
|
||||
<div class="charts">
|
||||
<div class="charts-right">
|
||||
<div ref="homeStockRef" class="h100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :md="24" :lg="16" :xl="16" class="mb15">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>信件数据分析</span>
|
||||
</div>
|
||||
<div class="charts">
|
||||
<div class="charts-left mr7">
|
||||
<div ref="homeLaboratoryRef" class="h100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-card class="box-card">
|
||||
<el-button @click="addResponsiblePerson" type="primary" icon="el-icon-plus"
|
||||
>添加负责人</el-button
|
||||
>
|
||||
<PersonInCharge
|
||||
v-loading="loading"
|
||||
:delete-func="deleteData"
|
||||
:columns="columns"
|
||||
:data="listOfResponsiblePersonnel"
|
||||
></PersonInCharge>
|
||||
<!-- 添加负责人对话框 -->
|
||||
<el-dialog
|
||||
title="添加负责人"
|
||||
:visible.sync="dialogVisible"
|
||||
width="20%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item label="请选择老师" label-width="100px">
|
||||
<el-select v-model="form.teacherId" placeholder="请选择老师">
|
||||
<el-option
|
||||
v-for="(ion, index) in teacherList"
|
||||
:key="index"
|
||||
:label="ion.name"
|
||||
:value="ion.userId"
|
||||
></el-option> </el-select
|
||||
></el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="addOwnerButton">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { columns } from "./columns";
|
||||
import { Message } from "element-ui";
|
||||
import PersonInCharge from "../components/PersonInCharge.vue";
|
||||
import {
|
||||
rqQieChartInformation,
|
||||
getLineChartData,
|
||||
getTeacherInformation,
|
||||
rqaddResponsiblePerson,
|
||||
getTheListOfExistingResponsiblePersons,
|
||||
cancelResponsiblePerson,
|
||||
} from "../api.js";
|
||||
export default {
|
||||
name: "ResponsiblePersonManagement",
|
||||
data() {
|
||||
return {
|
||||
global: {
|
||||
homeChartOne: null,
|
||||
homeChartTwo: null,
|
||||
homeCharThree: null,
|
||||
dispose: [null, "", undefined],
|
||||
},
|
||||
|
||||
dialogVisible: false,
|
||||
|
||||
columns,
|
||||
charts: {
|
||||
theme: "",
|
||||
bgColor: "",
|
||||
},
|
||||
// 饼图数据
|
||||
pieChartData: [],
|
||||
// 折线图数据
|
||||
lineChartDatas: [],
|
||||
// 折线图左侧年份数据
|
||||
yearData: [],
|
||||
// 添加老师的信息
|
||||
form: {
|
||||
teacherId: null,
|
||||
},
|
||||
loading: false,
|
||||
// 教师列表
|
||||
teacherList: [],
|
||||
// 负责人列表
|
||||
listOfResponsiblePersonnel: [],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
PersonInCharge,
|
||||
},
|
||||
created() {
|
||||
this.obtainTheListOfResponsiblePersons();
|
||||
this.obtainTeacherListData();
|
||||
this.lineChartData();
|
||||
this.obtainPieChartInformation();
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 库存作业
|
||||
initHomeStock() {
|
||||
console.log(this.pieChartData);
|
||||
if (!this.global.dispose.some((b) => b === this.global.homeChartOne))
|
||||
this.global.homeChartOne.dispose();
|
||||
this.global.homeChartOne = echarts.init(this.$refs.homeStockRef, this.charts.theme);
|
||||
const option = {
|
||||
backgroundColor: this.charts.bgColor,
|
||||
grid: {
|
||||
top: 50,
|
||||
right: 20,
|
||||
bottom: 30,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
left: "center",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "信件占比",
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: "#fff",
|
||||
borderWidth: 2,
|
||||
},
|
||||
data: this.pieChartData,
|
||||
top: 30,
|
||||
},
|
||||
],
|
||||
};
|
||||
this.global.homeChartOne.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
this.global.homeChartOne.resize();
|
||||
});
|
||||
},
|
||||
initHomeLaboratory() {
|
||||
if (!this.global.dispose.some((b) => b === this.global.homeChartTwo))
|
||||
this.global.homeChartTwo.dispose();
|
||||
this.global.homeChartTwo = echarts.init(
|
||||
this.$refs.homeLaboratoryRef,
|
||||
this.charts.theme
|
||||
);
|
||||
const option = {
|
||||
backgroundColor: this.charts.bgColor,
|
||||
grid: {
|
||||
top: 50,
|
||||
right: 20,
|
||||
bottom: 30,
|
||||
left: 30,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: this.yearData,
|
||||
right: 13,
|
||||
},
|
||||
xAxis: {
|
||||
data: [
|
||||
"一月",
|
||||
"二月",
|
||||
"三月",
|
||||
"四月",
|
||||
"五月",
|
||||
"六月",
|
||||
"七月",
|
||||
"八月",
|
||||
"九月",
|
||||
"十月",
|
||||
"十一月",
|
||||
"十二月",
|
||||
],
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "信件",
|
||||
},
|
||||
],
|
||||
series: this.lineChartDatas,
|
||||
};
|
||||
this.global.homeChartTwo.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
this.global.homeChartTwo.resize();
|
||||
});
|
||||
},
|
||||
// 取消负责人
|
||||
async deleteData(row) {
|
||||
try {
|
||||
let res = await cancelResponsiblePerson(row.userId);
|
||||
if (res.code == 200) {
|
||||
this.obtainTheListOfResponsiblePersons();
|
||||
Message.success("负责人已取消");
|
||||
} else {
|
||||
Message.error("网络错误");
|
||||
}
|
||||
} catch (error) {
|
||||
Message.error("网络错误");
|
||||
}
|
||||
},
|
||||
|
||||
// 获取饼状图信息
|
||||
async obtainPieChartInformation() {
|
||||
let res = await rqQieChartInformation();
|
||||
if (res.code == 200) {
|
||||
const newArray = res.data.map((item) => {
|
||||
let roleName;
|
||||
switch (item.roleId) {
|
||||
case 0:
|
||||
roleName = "学生发送";
|
||||
break;
|
||||
case 1:
|
||||
roleName = "教职工发送";
|
||||
break;
|
||||
case 2:
|
||||
roleName = "教师发送";
|
||||
break;
|
||||
default:
|
||||
roleName = "";
|
||||
}
|
||||
return { numid: item.numid, name: roleName };
|
||||
});
|
||||
const newArrays = newArray.map((item) => {
|
||||
return { value: item.numid, name: item.name };
|
||||
});
|
||||
this.pieChartData = newArrays;
|
||||
this.initHomeStock();
|
||||
}
|
||||
},
|
||||
// 折线图
|
||||
async lineChartData() {
|
||||
let result = await getLineChartData();
|
||||
if (result.code == 200) {
|
||||
let array = result.data;
|
||||
const newProperty = "type";
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
array[i][newProperty] = "line";
|
||||
}
|
||||
this.lineChartDatas = array;
|
||||
const newArray = array.map((item) => item.name);
|
||||
this.yearData = newArray;
|
||||
this.initHomeLaboratory();
|
||||
}
|
||||
},
|
||||
// 获取教师人员名单
|
||||
async obtainTeacherListData() {
|
||||
try {
|
||||
let result = await getTeacherInformation();
|
||||
if (result.code == 200) {
|
||||
this.teacherList = result.data;
|
||||
}
|
||||
} catch (error) {
|
||||
Message.error("网络错误");
|
||||
}
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm("确认关闭？")
|
||||
.then((_) => {
|
||||
done();
|
||||
})
|
||||
.catch((_) => {});
|
||||
},
|
||||
// 添加负责人
|
||||
addResponsiblePerson() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 确认添加负责人
|
||||
async addOwnerButton() {
|
||||
try {
|
||||
let result = await rqaddResponsiblePerson(this.form.teacherId);
|
||||
if (result.code == 200) {
|
||||
this.dialogVisible = false;
|
||||
this.obtainTheListOfResponsiblePersons();
|
||||
Message.success("添加成功");
|
||||
} else if (result.code == 201) {
|
||||
Message.error(result.msg);
|
||||
} else {
|
||||
Message.error("网络错误");
|
||||
}
|
||||
} catch (error) {
|
||||
Message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 获取负责人列表
|
||||
async obtainTheListOfResponsiblePersons() {
|
||||
this.loading = true;
|
||||
try {
|
||||
let result = await getTheListOfExistingResponsiblePersons();
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
this.listOfResponsiblePersonnel = result.data;
|
||||
} else {
|
||||
this.loading = false;
|
||||
Message.error("网络错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
Message.error("网络错误");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
@@ -0,0 +1,76 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 获取信件列表
|
||||
export const rqGetAListOfLetters = (pageNum,pageSize,data={}) => request({
|
||||
url: `/schoolmail/mailList/select/all?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method: 'get',
|
||||
params:data
|
||||
})
|
||||
|
||||
|
||||
// 获取信件列表
|
||||
export const rqmodifyMailboxList = (data) => request({
|
||||
url: `/schoolmail/mailList/update`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
|
||||
// 批量删除
|
||||
export const batchDeletion = (url) => request({
|
||||
url: `/schoolmail/mailList/delBatch?ids=${url}`,
|
||||
method: 'delete',
|
||||
|
||||
})
|
||||
|
||||
|
||||
// 单个删除
|
||||
export const individualDeletion = (id) => request({
|
||||
url: `/schoolmail/mailList/delete/id?id=${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
|
||||
// 获取饼状图信息
|
||||
export const rqQieChartInformation = (id) => request({
|
||||
url: `/schoolmail/mailList/query/roleNum`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
// 获取饼状图信息
|
||||
export const getLineChartData = (id) => request({
|
||||
url: `/schoolmail/mailList/query/MailNum`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 获取教师信息
|
||||
export const getTeacherInformation = () => request({
|
||||
url: `/schoolmail/LetterMan/getTeacher`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
|
||||
// 查询现有负责人列表
|
||||
export const getTheListOfExistingResponsiblePersons = () => request({
|
||||
url: `/schoolmail/LetterMan/query/letterMan`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
|
||||
// 添加负责人
|
||||
export const rqaddResponsiblePerson = (id) => request({
|
||||
url: `/schoolmail/LetterMan/addLetterMan?userid=${id}`,
|
||||
method: 'post',
|
||||
})
|
||||
|
||||
|
||||
// 取消负责人
|
||||
export const cancelResponsiblePerson = (id) => request({
|
||||
url: `/schoolmail/LetterMan/update?userId=${id}`,
|
||||
method: 'post',
|
||||
})
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="newlyClick" type="danger" size="mini" icon="el-icon-delete"
|
||||
>删除所选信件</el-button
|
||||
>
|
||||
<el-button @click="resetClick" type="info" size="mini" icon="iconfont icon-biaodan"
|
||||
>重置</el-button
|
||||
>
|
||||
<el-button @click="searchClick" type="warning" size="mini" icon="el-icon-search"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-input
|
||||
v-if="false"
|
||||
v-model="searchData"
|
||||
size="mini"
|
||||
style="width: 20%"
|
||||
placeholder="请输入搜索的关键字"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MailboxAllCommonHead",
|
||||
data() {
|
||||
return {
|
||||
searchData: "",
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
newlyClick() {
|
||||
// 在此处调用父组件传入的方法叫父组件做事情
|
||||
this.$emit("newly-data");
|
||||
},
|
||||
resetClick() {
|
||||
this.$emit("reset-data");
|
||||
},
|
||||
searchClick() {
|
||||
this.$emit("search-data", this.searchData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<el-table
|
||||
border
|
||||
:header-cell-style="{
|
||||
background: '#f5f7fa',
|
||||
}"
|
||||
:data="tableData"
|
||||
style="width: 100%; margin-top: 20px"
|
||||
height="650"
|
||||
size="mini"
|
||||
>
|
||||
<el-table-column
|
||||
v-if="column.label !== 'userId'"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="column.type === 'text'"> {{ scope.row[column.prop] }}</span>
|
||||
<div v-else-if="column.type === 'image'">
|
||||
<img style="width: 200px; height: 100px" :src="scope.row[column.prop]" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column fixed="right" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-popconfirm
|
||||
@confirm="handleDelete(scope.row)"
|
||||
:title="'确定要取消' + scope.row.userName"
|
||||
>
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>取消负责人</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "PersonInCharge",
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
type: column.type,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-table
|
||||
border
|
||||
:header-cell-style="{
|
||||
background: '#f5f7fa',
|
||||
}"
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="tableData"
|
||||
style="width: 100%; margin-top: 20px"
|
||||
height="650"
|
||||
size="mini"
|
||||
>
|
||||
<el-table-column type="selection" width="50"> </el-table-column>
|
||||
<el-table-column
|
||||
v-if="column.label !== 'id' && column.label !== 'image'"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="column.type === 'text'"> {{ scope.row[column.prop] }}</span>
|
||||
<div v-else-if="column.type === 'image'"></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>处理回复</el-button
|
||||
>
|
||||
<el-popconfirm @confirm="handleDelete(scope.row)" :title="'确定要删除吗？'">
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonTablesImg",
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
selectFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
name: "CommonTables",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row.id);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
this.editFunc(row);
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
console.log(val);
|
||||
this.$emit("selectFunc", val);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
type: column.type,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,53 @@
|
||||
import request from '@/utils/request'
|
||||
// get获取列表
|
||||
export function getOrders (params) {
|
||||
return request({
|
||||
url: '/user-dept/user/visitor/list',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
// 新增
|
||||
export function postAddOrders (data) {
|
||||
return request({
|
||||
url: '/meetingAct/info/add',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 修改
|
||||
export function putOrders (data) {
|
||||
return request({
|
||||
url: '/meetingAct/info/update',
|
||||
method: 'put',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function deleteOrders (id) {
|
||||
return request({
|
||||
url: '/meetingAct/info/delete',
|
||||
method: 'delete',
|
||||
params:{
|
||||
id
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 获取审批人
|
||||
export function getApprover () {
|
||||
return request({
|
||||
url: '/meetingAct/info/getTeacher',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
// 查询班级列表
|
||||
export function getClass() {
|
||||
return request({
|
||||
url: '/meetingAct/moral/moral/evaluableGradeAndClassList',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="resetClick" type="info" size="mini" icon="iconfont icon-biaodan"
|
||||
>重置</el-button
|
||||
>
|
||||
<el-button @click="searchClick" type="warning" size="mini" icon="el-icon-search"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-input
|
||||
v-if="false"
|
||||
v-model="searchData"
|
||||
size="mini"
|
||||
style="width: 20%"
|
||||
placeholder="请输入搜索的关键字"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonHead",
|
||||
data() {
|
||||
return {
|
||||
searchData: "",
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
newlyClick() {
|
||||
// 在此处调用父组件传入的方法叫父组件做事情
|
||||
this.$emit("newly-data");
|
||||
},
|
||||
resetClick() {
|
||||
this.$emit("reset-data");
|
||||
},
|
||||
searchClick() {
|
||||
this.$emit("search-data", this.searchData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-table :data="tableData" style="width: 100%" height="650" size="mini">
|
||||
<el-table-column
|
||||
v-if="
|
||||
column.label !== 'id' &&
|
||||
column.label !== '审批人Id' &&
|
||||
column.label !== '抄送人Id'
|
||||
"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
:min-width="column.minWidth"
|
||||
width="auto"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="column.type === 'text'"> {{ scope.row[column.prop] }}</span>
|
||||
<div v-else-if="column.type === 'image'">
|
||||
<img style="width: 100px; height: 100px" :src="scope.row[column.prop]" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- <el-table-column align="center" fixed="right" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-popconfirm
|
||||
@confirm="handleDelete(scope.row)"
|
||||
:title="'确定要删除吗？'"
|
||||
>
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonTablesImg",
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row.id);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
console.log(row);
|
||||
this.editFunc(row);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
type: column.type,
|
||||
minWidth: column.minWidth ? column.minWidth : "",
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-form :model="query" size="small" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="到访时间">
|
||||
<el-date-picker type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" v-model="datePicker" placeholder="请选择查询时间" clearable></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTablesImg
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTablesImg>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:current="query.current"
|
||||
:size="query.size"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="demo-ruleForm">
|
||||
<el-form-item label="缴费标题" prop="subject">
|
||||
<el-input size="mini" v-model="form.subject"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费金额" prop="money">
|
||||
<el-input size="mini" type="number" v-model="form.money"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker
|
||||
v-model="form.startTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择开始时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime" >
|
||||
<el-date-picker
|
||||
v-model="form.endTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择结束时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费说明" prop="explain">
|
||||
<el-input size="mini" v-model="form.explain"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postAddOrders, getOrders, putOrders } from './api'
|
||||
import CommonHead from './components/CommonHead.vue'
|
||||
import CommonTablesImg from './components/CommonTablesImg.vue'
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
subject: null, // 缴费标题
|
||||
money: null, // 金额
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "班主任",
|
||||
prop: "adviserName",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "班级",
|
||||
prop: "className",
|
||||
type: 'text'
|
||||
},
|
||||
|
||||
{
|
||||
label: "到访人",
|
||||
prop: "guardianName",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "到访人照片",
|
||||
prop: "faceImg",
|
||||
type: 'image'
|
||||
},
|
||||
{
|
||||
label: "到访时间",
|
||||
prop: "visitorTime",
|
||||
type: 'text'
|
||||
|
||||
},
|
||||
// {
|
||||
// label: "创建时间",
|
||||
// prop: "createTime",
|
||||
// },
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "到访说明",
|
||||
prop: "description",
|
||||
type: 'text',
|
||||
minWidth: '150'
|
||||
|
||||
}
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: '新增', // 弹出层按钮
|
||||
rules: {
|
||||
subject: [
|
||||
{ required: true, message: '请输入缴费标题', trigger: 'blur' },
|
||||
],
|
||||
money: [
|
||||
{ required: true, message: '请输入缴费金额', trigger: 'blur' },
|
||||
],
|
||||
explain: [
|
||||
{ required: true, message: '请输入缴费说明', trigger: 'blur' },
|
||||
],
|
||||
startTime: [
|
||||
{ required: true, message: '请输入开始时间', trigger: 'blur' },
|
||||
],
|
||||
endTime: [
|
||||
{ required: true, message: '请输入结束时间', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
statusEnum:{
|
||||
start: '开始',
|
||||
terminate: '结束',
|
||||
agree:'同意',
|
||||
refuse: '拒绝',
|
||||
},
|
||||
datePicker: null, // 搜索日期
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CommonHead,
|
||||
CommonTablesImg
|
||||
},
|
||||
created(){
|
||||
this.getList()
|
||||
},
|
||||
methods:{
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
let obj = { ...this.form }
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
}else{
|
||||
this.message(res.msg, 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
this.message(err.data.msg, 'error')
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
}
|
||||
this.datePicker = null
|
||||
this.getList()
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
money: null, // 金额
|
||||
subject: null, // 缴费标题
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.query.current = 1
|
||||
this.query.size = 10
|
||||
console.log(this.datePicker)
|
||||
this.query.startTime = this.datePicker[0]
|
||||
this.query.endTime = this.datePicker[1]
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getOrders(this.query).then( res =>{
|
||||
console.log(res)
|
||||
this.data = res.data.records.map(item =>{
|
||||
item.status = this.statusEnum[item.status]
|
||||
item.faceImg ? item.faceImg = JSON.parse(item.faceImg)[0] : item.faceImg
|
||||
return item
|
||||
})
|
||||
this.total = res.data.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(item) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(item)
|
||||
deleteOrders().then(res =>{
|
||||
if(res.code == 200){
|
||||
|
||||
}else{
|
||||
this.message(res.msg, 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
this.message(err.data.msg, 'error')
|
||||
})
|
||||
},
|
||||
// 编辑
|
||||
editData() {
|
||||
this.isVisible = true;
|
||||
this.title = '修改'
|
||||
this.resetForm()
|
||||
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(current){
|
||||
console.log( '点击切换页数' +current)
|
||||
this.query.current = current
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(size){
|
||||
this.size = size
|
||||
this.query.size = size
|
||||
this.getList()
|
||||
console.log(size)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,29 @@
|
||||
export default [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "username",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "进出类型",
|
||||
prop: "deviceLabel",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "图像",
|
||||
prop: "pictureUrl",
|
||||
type: "image",
|
||||
},
|
||||
|
||||
{
|
||||
label: "时间",
|
||||
prop: "createTime",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
]
|
||||
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover">
|
||||
<CommonHead
|
||||
@search-data="searchForm"
|
||||
@reset-data="reset"
|
||||
@newly-data="add"
|
||||
></CommonHead>
|
||||
<!-- newly-data删除所选事件 -->
|
||||
<!-- reset-data重置表单内容 -->
|
||||
<!-- search-data搜索事件，接收被搜索的内容 -->
|
||||
<el-form size="mini" label-width="100px" class="mt35 mb35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="日期范围选择">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<CommonTablesImg
|
||||
v-loading="loading"
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="attendanceData"
|
||||
></CommonTablesImg>
|
||||
|
||||
<Pagination
|
||||
:total="total"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import columns from "./columns";
|
||||
import { rqObtainingSafetyAttendanceTeachers } from "../api";
|
||||
export default {
|
||||
name: "AttendanceForm",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
userName: null, // 用户名
|
||||
contactInformation: null, //联系方式
|
||||
},
|
||||
columns,
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
dateRange: ["", ""],
|
||||
total: 0, // 总页数,
|
||||
// 考勤表单数据
|
||||
attendanceData: [],
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getAttendanceFormData();
|
||||
},
|
||||
methods: {
|
||||
// 添加
|
||||
add() {
|
||||
this.$message("考勤数据无法添加");
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
this.bus.$emit("onCurrentContextmenuClick", {
|
||||
id: 0,
|
||||
path: this.$route.path,
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
deleteData(id) {
|
||||
this.$message("考勤数据暂时无法删除");
|
||||
},
|
||||
// 编辑
|
||||
editData(item) {
|
||||
this.$message("考勤数据暂时无法被编辑");
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(val) {
|
||||
this.query.pageNum = val;
|
||||
this.getAttendanceFormData();
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(val) {
|
||||
this.query.pageSize = val;
|
||||
this.getAttendanceFormData();
|
||||
},
|
||||
// 搜索按钮
|
||||
searchForm() {
|
||||
this.getAttendanceFormData();
|
||||
},
|
||||
// 获取表单数据
|
||||
async getAttendanceFormData() {
|
||||
try {
|
||||
this.loading = true;
|
||||
let result = await rqObtainingSafetyAttendanceTeachers(
|
||||
this.query.pageNum,
|
||||
this.query.pageSize,
|
||||
this.dateRange[0],
|
||||
this.dateRange[1]
|
||||
);
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
this.attendanceData = result.data.records;
|
||||
this.total = result.data.total;
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,18 @@
|
||||
export default [
|
||||
{
|
||||
label: "deptId",
|
||||
prop: "deptId",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "ruleIds",
|
||||
prop: "ruleIds",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "校区/学段/年级/班级",
|
||||
prop: "name",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
]
|
||||
+114
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<el-table
|
||||
border
|
||||
:header-cell-style="{
|
||||
background: '#f5f7fa',
|
||||
}"
|
||||
:data="tableData"
|
||||
style="width: 100%; margin-top: 20px"
|
||||
height="650"
|
||||
size="mini"
|
||||
>
|
||||
<el-table-column
|
||||
v-if="column.label !== 'deptId' && column.label !== 'ruleIds'"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ scope.row[column.prop] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="280">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleRegistered(scope.row)"
|
||||
class="el-icon-view"
|
||||
type="text"
|
||||
size="small"
|
||||
>考勤规则</el-button
|
||||
>
|
||||
|
||||
<el-popconfirm @confirm="handleDelete(scope.row)" :title="'确定要删除吗？'">
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonTablesImg",
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
|
||||
registeredFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
name: "CommonTables",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row.id);
|
||||
},
|
||||
|
||||
handleRegistered(row) {
|
||||
this.registeredFunc(row);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
type: column.type,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,470 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover">
|
||||
<CommonHead
|
||||
@search-data="searchForm"
|
||||
@reset-data="reset"
|
||||
@newly-data="add"
|
||||
></CommonHead>
|
||||
<!-- newly-data删除所选事件 -->
|
||||
<!-- reset-data重置表单内容 -->
|
||||
<!-- search-data搜索事件，接收被搜索的内容 -->
|
||||
<el-form size="mini" label-width="100px" class="mt35 mb35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="查询学段">
|
||||
<el-select
|
||||
v-model="form.campusDid"
|
||||
placeholder="请选择校区查询学段"
|
||||
filterable
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in formCampusData"
|
||||
:key="index"
|
||||
@click.native="select(item)"
|
||||
:label="item.name"
|
||||
:value="item.deptId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="查询年级">
|
||||
<el-select
|
||||
v-model="form.academicStageDid"
|
||||
placeholder="请选择学段查询年级"
|
||||
filterable
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in fromStageData"
|
||||
:key="index"
|
||||
@click.native="selectStage(item)"
|
||||
:label="item.name"
|
||||
:value="item.deptId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="查询班级">
|
||||
<el-select
|
||||
v-model="form.GradeDid"
|
||||
placeholder="请选择年级查询班级"
|
||||
filterable
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in fromGradeData"
|
||||
:key="index"
|
||||
@click.native="selectGrade(item)"
|
||||
:label="item.name"
|
||||
:value="item.deptId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<InterestClassTabes
|
||||
v-loading="loading"
|
||||
:delete-func="deleteData"
|
||||
:columns="columns"
|
||||
:data="campusData"
|
||||
:registered-func="check"
|
||||
></InterestClassTabes>
|
||||
|
||||
<Pagination
|
||||
:total="total"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 对话框 -->
|
||||
|
||||
<el-dialog
|
||||
title="考勤规则"
|
||||
:visible.sync="dialogVisible"
|
||||
width="35%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form label-position="right" label-width="150px">
|
||||
<el-button
|
||||
@click="addATimePeriod"
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
>添加规则</el-button
|
||||
>
|
||||
|
||||
<el-form-item label="请输入到校时间">
|
||||
<el-time-picker
|
||||
value-format="HH:mm:ss"
|
||||
size="mini"
|
||||
arrow-control
|
||||
v-model="stit.startTime"
|
||||
placeholder="请输入到校时间"
|
||||
>
|
||||
</el-time-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if="rulesList.length > 0"
|
||||
label="请选择时间范围"
|
||||
v-for="(ionc, index) in rulesList"
|
||||
:key="index"
|
||||
>
|
||||
<el-time-picker
|
||||
value-format="HH:mm:ss"
|
||||
size="mini"
|
||||
arrow-control
|
||||
v-model="rulesList[index].startTime"
|
||||
placeholder="起始时间"
|
||||
>
|
||||
</el-time-picker>
|
||||
<el-time-picker
|
||||
value-format="HH:mm:ss"
|
||||
size="mini"
|
||||
arrow-control
|
||||
v-model="rulesList[index].endTime"
|
||||
placeholder="结束时间"
|
||||
>
|
||||
</el-time-picker>
|
||||
<el-button
|
||||
style="margin-left: 10px"
|
||||
@click="deleteRule(ionc)"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
circle
|
||||
></el-button>
|
||||
<div>
|
||||
<el-checkbox v-model="rulesList[index].checkedEnter">进校</el-checkbox>
|
||||
<el-checkbox v-model="rulesList[index].checkedExit">出校</el-checkbox>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false" size="mini">取 消</el-button>
|
||||
<el-button type="primary" size="mini" @click="confirmSettingRules"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import columns from "./columns";
|
||||
import {
|
||||
rqAttendanceRuleData,
|
||||
rqSetOrModifyAttendanceRules,
|
||||
rqviewRuleDetails,
|
||||
} from "../api";
|
||||
import InterestClassTabes from "./components/InterestClassTabes";
|
||||
export default {
|
||||
name: "roleManagement",
|
||||
data() {
|
||||
return {
|
||||
checkList: [
|
||||
{ id: 1, value: false, label: "进校" },
|
||||
{ id: 2, value: false, label: "出校" },
|
||||
],
|
||||
|
||||
form: {
|
||||
campusDid: "",
|
||||
academicStageDid: "",
|
||||
GradeDid: "",
|
||||
},
|
||||
//下拉框校区数据
|
||||
formCampusData: [],
|
||||
//下拉框学段数据
|
||||
fromStageData: [],
|
||||
//下拉框年级数据
|
||||
fromGradeData: [],
|
||||
columns,
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
// 规则列表
|
||||
|
||||
loading: false,
|
||||
total: 0, // 总页数,
|
||||
campusData: [], //校区数据，
|
||||
dialogVisible: false,
|
||||
modifyRuleData: {
|
||||
// 部门id
|
||||
deptId: null,
|
||||
rules: [],
|
||||
},
|
||||
|
||||
rulesList: [],
|
||||
|
||||
// 第一个绑定的值到校时间
|
||||
stit: { startTime: "", endTime: "", flag: 4 },
|
||||
};
|
||||
},
|
||||
components: {
|
||||
InterestClassTabes,
|
||||
},
|
||||
created() {
|
||||
this.getCampusRuleData();
|
||||
},
|
||||
methods: {
|
||||
// 删除
|
||||
deleteData(id) {
|
||||
this.$message("删除组织请联系组织管理员");
|
||||
},
|
||||
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum) {
|
||||
console.log("点击切换页数" + pageNum);
|
||||
this.query.pageNum = pageNum;
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize) {
|
||||
this.pageSize = pageSize;
|
||||
this.query.pageSize = pageSize;
|
||||
console.log(pageSize);
|
||||
},
|
||||
// 获取校区规则数据
|
||||
async getCampusRuleData() {
|
||||
try {
|
||||
this.loading = true;
|
||||
let result = await rqAttendanceRuleData(0);
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
this.campusData = result.data;
|
||||
this.formCampusData = result.data;
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 根据校区depId查学段
|
||||
async select(val) {
|
||||
try {
|
||||
this.loading = true;
|
||||
let dpId = val.deptId;
|
||||
let result = await rqAttendanceRuleData(dpId);
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
this.campusData = result.data;
|
||||
this.fromStageData = result.data;
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 根据学段depId查年级
|
||||
async selectStage(val) {
|
||||
try {
|
||||
this.loading = true;
|
||||
let dpId = val.deptId;
|
||||
let result = await rqAttendanceRuleData(dpId);
|
||||
if (result.code == 200) {
|
||||
this.campusData = result.data;
|
||||
this.fromGradeData = result.data;
|
||||
this.loading = false;
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 根据年级查班级
|
||||
async selectGrade(val) {
|
||||
try {
|
||||
this.loading = true;
|
||||
let dpId = val.deptId;
|
||||
let result = await rqAttendanceRuleData(dpId);
|
||||
if (result.code == 200) {
|
||||
this.campusData = result.data;
|
||||
this.loading = false;
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
searchForm() {
|
||||
this.$message("请选择下拉框搜索");
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
this.bus.$emit("onCurrentContextmenuClick", {
|
||||
id: 0,
|
||||
path: this.$route.path,
|
||||
});
|
||||
},
|
||||
// 添加
|
||||
add() {
|
||||
this.$message("新增组织请联系组织管理员");
|
||||
},
|
||||
// 查看
|
||||
async check(item) {
|
||||
let { deptId, ruleIds } = item;
|
||||
console.log(item);
|
||||
this.rulesList = [];
|
||||
this.dialogVisible = true;
|
||||
this.modifyRuleData.rules = [];
|
||||
(this.stit = { startTime: "", endTime: "", flag: 4 }),
|
||||
(this.modifyRuleData.deptId = deptId);
|
||||
console.log(item);
|
||||
const FlagEnum = {
|
||||
// 进
|
||||
INTO: 0,
|
||||
// 出
|
||||
OUT: 1,
|
||||
// 到校时间
|
||||
MORNING: 2,
|
||||
};
|
||||
console.log(ruleIds);
|
||||
this.dialogVisible = true;
|
||||
try {
|
||||
let result = await rqviewRuleDetails(ruleIds);
|
||||
if (result.code == 200) {
|
||||
let dataRes = result.data;
|
||||
|
||||
dataRes.forEach((itmese, index) => {
|
||||
itmese.checkedEnter = "";
|
||||
itmese.checkedExit = "";
|
||||
// 进
|
||||
let enter = this.decryption(FlagEnum.INTO, itmese.flag);
|
||||
let Exit = this.decryption(FlagEnum.OUT, itmese.flag);
|
||||
console.log(enter);
|
||||
console.log(Exit);
|
||||
console.log(itmese);
|
||||
itmese.checkedEnter = enter;
|
||||
itmese.checkedExit = Exit;
|
||||
// console.log(itmese);
|
||||
});
|
||||
dataRes.forEach((itmese, index) => {
|
||||
if (itmese.flag == 4) {
|
||||
this.stit.startTime = itmese.startTime;
|
||||
if (itmese.id) {
|
||||
this.stit.id = itmese.id;
|
||||
}
|
||||
|
||||
result.data.splice(index, 1);
|
||||
}
|
||||
});
|
||||
|
||||
console.log(dataRes);
|
||||
this.rulesList = dataRes;
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm("确认关闭？")
|
||||
.then((_) => {
|
||||
done();
|
||||
})
|
||||
.catch((_) => {});
|
||||
},
|
||||
|
||||
// 确定设置规则
|
||||
async confirmSettingRules() {
|
||||
if (this.stit.startTime) {
|
||||
const FlagEnum = {
|
||||
// 进
|
||||
INTO: 0,
|
||||
// 出
|
||||
OUT: 1,
|
||||
// 到校时间
|
||||
MORNING: 2,
|
||||
};
|
||||
this.rulesList.forEach((item, index) => {
|
||||
let res = this.encryption(FlagEnum.INTO, item.checkedEnter, item.flag);
|
||||
let result = this.encryption(FlagEnum.OUT, item.checkedExit, res);
|
||||
item.flag = result;
|
||||
delete item.checkedEnter;
|
||||
delete item.checkedExit;
|
||||
delete item.faId;
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
this.rulesList.unshift(this.stit);
|
||||
|
||||
this.modifyRuleData.rules = this.rulesList;
|
||||
console.log(this.modifyRuleData);
|
||||
try {
|
||||
let res = await rqSetOrModifyAttendanceRules(this.modifyRuleData);
|
||||
console.log(res);
|
||||
if (res.code == 200) {
|
||||
this.$message.success("设置成功");
|
||||
this.getCampusRuleData();
|
||||
} else {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} else {
|
||||
this.$message.warning("请设置到校时间");
|
||||
}
|
||||
},
|
||||
// 添加一个时间段
|
||||
addATimePeriod() {
|
||||
let it = {
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
flag: 0,
|
||||
checkedEnter: false,
|
||||
checkedExit: false,
|
||||
};
|
||||
let num = Math.floor(Math.random() * 1000);
|
||||
it.faId = num;
|
||||
this.rulesList.push(it);
|
||||
},
|
||||
// 删除一个时间段
|
||||
deleteRule(items) {
|
||||
console.log(items);
|
||||
let myArray = this.rulesList.filter(function (item) {
|
||||
return item.faId !== items.faId;
|
||||
});
|
||||
this.rulesList = myArray;
|
||||
},
|
||||
//加密
|
||||
encryption(flagEnum, bool, flag) {
|
||||
let bitValue = 1 << flagEnum;
|
||||
flag = bool ? flag | bitValue : flag & ~bitValue;
|
||||
return flag;
|
||||
},
|
||||
// 解密
|
||||
decryption(flagEnum, flag) {
|
||||
let bitValue = 1 << flagEnum;
|
||||
return (flag & bitValue) == bitValue;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,27 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 获取当前用户老师可查看的考勤表单
|
||||
export const rqObtainingSafetyAttendanceTeachers = (current,size,startTime,endTime) => request({
|
||||
url: `/attendance/equipment/entranceLog/all?current=${current}&size=${size}&startTime=${startTime}&endTime=${endTime}`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
// 获取考勤规则数据
|
||||
export const rqAttendanceRuleData = (superId) => request({
|
||||
url: `/user-dept/user/dept/${superId}`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
|
||||
// 设置或修改考勤规则
|
||||
export const rqSetOrModifyAttendanceRules = (data) => request({
|
||||
url: `/user-dept/user/rule`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
|
||||
// 使用id查询规则详情
|
||||
export const rqviewRuleDetails= (id) => request({
|
||||
url: `/user-dept/user/rule?ids=${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
@@ -0,0 +1,32 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 获取设备数据列表
|
||||
export const rqGetDeviceList = (current,size) => request({
|
||||
url: `/attendance/equipment/worksDevice?current=${current}&size=${size}`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
|
||||
// 添加或者修改
|
||||
export const rqAddOrModifyDevice = (data) => {
|
||||
if(data.deviceId){
|
||||
return request({
|
||||
url: '/attendance/equipment/worksDevice',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}else{
|
||||
return request({
|
||||
url: '/attendance/equipment/worksDevice',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 删除
|
||||
export const rqDeleteDevice = (id) => request({
|
||||
url: `/attendance/equipment/worksDevice/${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
@@ -0,0 +1,52 @@
|
||||
export default [
|
||||
{
|
||||
label: "设备id",
|
||||
prop: "deviceId",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "账号名称",
|
||||
prop: "username",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
{
|
||||
label: "设备名称",
|
||||
prop: "deviceName",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "用户名",
|
||||
prop: "username",
|
||||
type: "image",
|
||||
},
|
||||
{
|
||||
label: "密码",
|
||||
prop: "password",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
label: "设备标签",
|
||||
prop: "deviceLabel",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "设备地址",
|
||||
prop: "deviceUrl",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "设备状态",
|
||||
prop: "deviceStatus",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
{
|
||||
label: "设备物理地址",
|
||||
prop: "macAddress",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
]
|
||||
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover">
|
||||
<CommonHead
|
||||
@search-data="searchForm"
|
||||
@reset-data="reset"
|
||||
@newly-data="add"
|
||||
></CommonHead>
|
||||
<!-- newly-data删除所选事件 -->
|
||||
<!-- reset-data重置表单内容 -->
|
||||
<!-- search-data搜索事件，接收被搜索的内容 -->
|
||||
</el-card>
|
||||
|
||||
<CommonTables
|
||||
v-loading="loading"
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="equipmentList"
|
||||
></CommonTables>
|
||||
|
||||
<Pagination
|
||||
:total="total"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 对话框 -->
|
||||
<el-dialog
|
||||
:title="from.deviceId ? '修改设备' : '新增设备'"
|
||||
:visible.sync="dialogVisible"
|
||||
width="20%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
:rules="rules"
|
||||
label-position="right"
|
||||
ref="ruleForm"
|
||||
label-width="80px"
|
||||
:model="from"
|
||||
>
|
||||
<el-form-item size="mini" label="设备名称" label-width="100x" prop="deviceName">
|
||||
<el-input
|
||||
v-model="from.deviceName"
|
||||
placeholder="请输入设备名称"
|
||||
class="w100"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item size="mini" label="设备地址" label-width="100x" prop="deviceUrl">
|
||||
<el-input
|
||||
v-model="from.deviceUrl"
|
||||
placeholder="请输入设备地址"
|
||||
class="w100"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="mini"
|
||||
label="设备物理地址"
|
||||
label-width="100x"
|
||||
prop="macAddress"
|
||||
>
|
||||
<el-input
|
||||
v-model="from.macAddress"
|
||||
placeholder="请输入设备物理地址"
|
||||
class="w100"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="设备账号名称" label-width="100x" prop="username">
|
||||
<el-input
|
||||
v-model="from.username"
|
||||
placeholder="请输入设备账号名称"
|
||||
class="w100"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="设备账号密码" label-width="100x" prop="password">
|
||||
<el-input
|
||||
v-model="from.password"
|
||||
placeholder="请输入设备账号密码"
|
||||
class="w100"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false" size="mini">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmSettingRules" size="mini"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import columns from "./columns";
|
||||
import { rqGetDeviceList, rqAddOrModifyDevice, rqDeleteDevice } from "./api";
|
||||
import { formatDate } from "@/com/index";
|
||||
|
||||
export default {
|
||||
name: "attendanceMachineEquipmentManagement",
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
total: 0,
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
loading: false,
|
||||
equipmentList: [],
|
||||
dialogVisible: false,
|
||||
from: {
|
||||
// 设备名称
|
||||
deviceName: "",
|
||||
|
||||
// 设备地址
|
||||
deviceUrl: "",
|
||||
// 设备物理地址
|
||||
macAddress: "",
|
||||
// 设备账号
|
||||
username: "",
|
||||
// 设备密码
|
||||
password: "",
|
||||
},
|
||||
// 对话框表单验证
|
||||
rules: {
|
||||
deviceName: [{ required: true, message: "请输入设备名称", trigger: "change" }],
|
||||
|
||||
deviceUrl: [{ required: true, message: "请输入设备地址", trigger: "change" }],
|
||||
macAddress: [{ required: true, message: "请输入设备物理", trigger: "change" }],
|
||||
username: [{ required: true, message: "请输入设备账号名称", trigger: "change" }],
|
||||
password: [{ required: true, message: "请输入设备密码", trigger: "change" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getAttendanceFormData();
|
||||
},
|
||||
methods: {
|
||||
// 搜索按钮
|
||||
searchForm() {
|
||||
this.$message("正在搜索");
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
this.bus.$emit("onCurrentContextmenuClick", {
|
||||
id: 0,
|
||||
path: this.$route.path,
|
||||
});
|
||||
},
|
||||
// 添加
|
||||
add() {
|
||||
console.log(888);
|
||||
this.dialogVisible = true;
|
||||
// 清除数据
|
||||
this.from = {
|
||||
// 设备名称
|
||||
deviceName: "",
|
||||
|
||||
// 设备地址
|
||||
deviceUrl: "",
|
||||
// 设备物理地址
|
||||
macAddress: "",
|
||||
// 设备账号
|
||||
username: "",
|
||||
// 设备密码
|
||||
password: "",
|
||||
};
|
||||
},
|
||||
// 删除
|
||||
async deleteData(row) {
|
||||
console.log(row.deviceId);
|
||||
let res = await rqDeleteDevice(row.deviceId);
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getAttendanceFormData();
|
||||
} else {
|
||||
this.$message({
|
||||
message: "删除失败",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
console.log(row);
|
||||
},
|
||||
// 编辑
|
||||
editData(item) {
|
||||
console.log(item);
|
||||
this.dialogVisible = true;
|
||||
this.from = { ...item };
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(val) {
|
||||
this.query.pageNum = val;
|
||||
this.getAttendanceFormData();
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(val) {
|
||||
this.query.pageSize = val;
|
||||
this.getAttendanceFormData();
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm("确认关闭？")
|
||||
.then((_) => {
|
||||
done();
|
||||
})
|
||||
.catch((_) => {});
|
||||
},
|
||||
// 获取设备列表
|
||||
async getAttendanceFormData() {
|
||||
try {
|
||||
this.loading = true;
|
||||
let result = await rqGetDeviceList(this.query.pageNum, this.query.pageSize);
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
let arr = result.data.records;
|
||||
arr.forEach((item, index) => {
|
||||
item.createTime = formatDate(item.createTime, "-");
|
||||
item.updateTime = formatDate(item.updateTime, "-");
|
||||
});
|
||||
this.equipmentList = arr;
|
||||
this.total = result.data.total;
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 确认新增或者修改按钮
|
||||
confirmSettingRules() {
|
||||
this.$refs.ruleForm.validate(async (success) => {
|
||||
if (success) {
|
||||
this.dialogVisible = false;
|
||||
delete this.from.createTime;
|
||||
delete this.from.updateTime;
|
||||
let result = await rqAddOrModifyDevice(this.from);
|
||||
if (result.code == 200) {
|
||||
this.$message({
|
||||
message: this.from.deviceId ? "修改成功" : "添加成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getAttendanceFormData();
|
||||
this.from = {};
|
||||
} else {
|
||||
this.$message.error("添加失败");
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,32 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 获取设备数据列表
|
||||
export const rqGetDeviceList = (current,size) => request({
|
||||
url: `/attendance/equipment/device?current=${current}&size=${size}`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
|
||||
// 添加或者修改
|
||||
export const rqAddOrModifyDevice = (data) => {
|
||||
if(data.deviceId){
|
||||
return request({
|
||||
url: '/attendance/equipment/device',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}else{
|
||||
return request({
|
||||
url: '/attendance/equipment/device',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 删除
|
||||
export const rqDeleteDevice = (id) => request({
|
||||
url: `/attendance/equipment/device/${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
@@ -0,0 +1,52 @@
|
||||
export default [
|
||||
{
|
||||
label: "设备id",
|
||||
prop: "deviceId",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "账号名称",
|
||||
prop: "username",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
{
|
||||
label: "设备名称",
|
||||
prop: "deviceName",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "用户名",
|
||||
prop: "username",
|
||||
type: "image",
|
||||
},
|
||||
{
|
||||
label: "密码",
|
||||
prop: "password",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
label: "设备标签",
|
||||
prop: "deviceLabel",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "设备地址",
|
||||
prop: "deviceUrl",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "设备状态",
|
||||
prop: "deviceStatus",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
{
|
||||
label: "设备物理地址",
|
||||
prop: "macAddress",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
]
|
||||
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover">
|
||||
<CommonHead
|
||||
@search-data="searchForm"
|
||||
@reset-data="reset"
|
||||
@newly-data="add"
|
||||
></CommonHead>
|
||||
<!-- newly-data删除所选事件 -->
|
||||
<!-- reset-data重置表单内容 -->
|
||||
<!-- search-data搜索事件，接收被搜索的内容 -->
|
||||
</el-card>
|
||||
|
||||
<CommonTables
|
||||
v-loading="loading"
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="equipmentList"
|
||||
></CommonTables>
|
||||
|
||||
<Pagination
|
||||
:total="total"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 对话框 -->
|
||||
<el-dialog
|
||||
:title="from.deviceId ? '修改设备' : '新增设备'"
|
||||
:visible.sync="dialogVisible"
|
||||
width="20%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
:rules="rules"
|
||||
label-position="right"
|
||||
ref="ruleForm"
|
||||
label-width="80px"
|
||||
:model="from"
|
||||
>
|
||||
<el-form-item size="mini" label="设备名称" label-width="100x" prop="deviceName">
|
||||
<el-input
|
||||
v-model="from.deviceName"
|
||||
placeholder="请输入设备名称"
|
||||
class="w100"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="设备标签" label-width="100x" prop="deviceLabel">
|
||||
<el-radio v-model="from.deviceLabel" label="进">进</el-radio>
|
||||
<el-radio v-model="from.deviceLabel" label="出">出</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item size="mini" label="设备地址" label-width="100x" prop="deviceUrl">
|
||||
<el-input
|
||||
v-model="from.deviceUrl"
|
||||
placeholder="请输入设备地址"
|
||||
class="w100"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
size="mini"
|
||||
label="设备物理地址"
|
||||
label-width="100x"
|
||||
prop="macAddress"
|
||||
>
|
||||
<el-input
|
||||
v-model="from.macAddress"
|
||||
placeholder="请输入设备物理地址"
|
||||
class="w100"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="设备账号名称" label-width="100x" prop="username">
|
||||
<el-input
|
||||
v-model="from.username"
|
||||
placeholder="请输入设备账号名称"
|
||||
class="w100"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="设备账号密码" label-width="100x" prop="password">
|
||||
<el-input
|
||||
v-model="from.password"
|
||||
placeholder="请输入设备账号密码"
|
||||
class="w100"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false" size="mini">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmSettingRules" size="mini"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import columns from "./columns";
|
||||
import { rqGetDeviceList, rqAddOrModifyDevice, rqDeleteDevice } from "./api";
|
||||
import { formatDate } from "@/com/index";
|
||||
|
||||
export default {
|
||||
name: "deviceManagement",
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
total: 0,
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
loading: false,
|
||||
equipmentList: [],
|
||||
dialogVisible: false,
|
||||
from: {
|
||||
// 设备名称
|
||||
deviceName: "",
|
||||
// 设备标签
|
||||
deviceLabel: "",
|
||||
// 设备地址
|
||||
deviceUrl: "",
|
||||
// 设备物理地址
|
||||
macAddress: "",
|
||||
// 设备账号
|
||||
username: "",
|
||||
// 设备密码
|
||||
password: "",
|
||||
},
|
||||
// 对话框表单验证
|
||||
rules: {
|
||||
deviceName: [{ required: true, message: "请输入设备名称", trigger: "change" }],
|
||||
deviceLabel: [{ required: true, message: "请选择设备标签", trigger: "change" }],
|
||||
deviceUrl: [{ required: true, message: "请输入设备地址", trigger: "change" }],
|
||||
macAddress: [{ required: true, message: "请输入设备物理", trigger: "change" }],
|
||||
username: [{ required: true, message: "请输入设备账号名称", trigger: "change" }],
|
||||
password: [{ required: true, message: "请输入设备密码", trigger: "change" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getAttendanceFormData();
|
||||
},
|
||||
methods: {
|
||||
// 搜索按钮
|
||||
searchForm() {
|
||||
this.$message("正在搜索");
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
this.bus.$emit("onCurrentContextmenuClick", {
|
||||
id: 0,
|
||||
path: this.$route.path,
|
||||
});
|
||||
},
|
||||
// 添加
|
||||
add() {
|
||||
console.log(888);
|
||||
this.dialogVisible = true;
|
||||
// 清除数据
|
||||
this.from = {
|
||||
// 设备名称
|
||||
deviceName: "",
|
||||
// 设备标签
|
||||
deviceLabel: "",
|
||||
// 设备地址
|
||||
deviceUrl: "",
|
||||
// 设备物理地址
|
||||
macAddress: "",
|
||||
// 设备账号
|
||||
username: "",
|
||||
// 设备密码
|
||||
password: "",
|
||||
};
|
||||
},
|
||||
// 删除
|
||||
async deleteData(row) {
|
||||
console.log(row.deviceId);
|
||||
let res = await rqDeleteDevice(row.deviceId);
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getAttendanceFormData();
|
||||
} else {
|
||||
this.$message({
|
||||
message: "删除失败",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
console.log(row);
|
||||
},
|
||||
// 编辑
|
||||
editData(item) {
|
||||
console.log(item);
|
||||
this.dialogVisible = true;
|
||||
this.from = { ...item };
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(val) {
|
||||
this.query.pageNum = val;
|
||||
this.getAttendanceFormData();
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(val) {
|
||||
this.query.pageSize = val;
|
||||
this.getAttendanceFormData();
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm("确认关闭？")
|
||||
.then((_) => {
|
||||
done();
|
||||
})
|
||||
.catch((_) => {});
|
||||
},
|
||||
// 获取设备列表
|
||||
async getAttendanceFormData() {
|
||||
try {
|
||||
this.loading = true;
|
||||
let result = await rqGetDeviceList(this.query.pageNum, this.query.pageSize);
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
let arr = result.data.records;
|
||||
arr.forEach((item, index) => {
|
||||
item.createTime = formatDate(item.createTime, "-");
|
||||
item.updateTime = formatDate(item.updateTime, "-");
|
||||
});
|
||||
this.equipmentList = arr;
|
||||
this.total = result.data.total;
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 确认新增或者修改按钮
|
||||
confirmSettingRules() {
|
||||
this.$refs.ruleForm.validate(async (success) => {
|
||||
if (success) {
|
||||
this.dialogVisible = false;
|
||||
delete this.from.createTime;
|
||||
delete this.from.updateTime;
|
||||
let result = await rqAddOrModifyDevice(this.from);
|
||||
if (result.code == 200) {
|
||||
this.$message({
|
||||
message: this.from.deviceId ? "修改成功" : "添加成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getAttendanceFormData();
|
||||
this.from = {};
|
||||
} else {
|
||||
this.$message.error("添加失败");
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="error">
|
||||
<div class="error-flex">
|
||||
<div class="left">
|
||||
<div class="left-item">
|
||||
<div class="left-item-animation left-item-num">401</div>
|
||||
<div class="left-item-animation left-item-title">{{ $t('message.noAccess.accessTitle') }}</div>
|
||||
<div class="left-item-animation left-item-msg">{{ $t('message.noAccess.accessMsg') }}</div>
|
||||
<div class="left-item-animation left-item-btn">
|
||||
<el-button type="primary" round @click="onSetAuth">{{ $t('message.noAccess.accessBtn') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img src="https://i.hd-r.cn/2cf0d2e192660eec23eb9d0655753e7d.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Session } from '@/utils/storage';
|
||||
export default {
|
||||
name: 'noAuth',
|
||||
methods: {
|
||||
// 重新授权
|
||||
onSetAuth() {
|
||||
// 清除缓存/token等
|
||||
Session.clear();
|
||||
// 使用 reload 时，不需要调用 resetRoute() 重置路由
|
||||
window.location.reload();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.error {
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
.error-flex {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
height: 350px;
|
||||
width: 900px;
|
||||
.left {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
.left-item {
|
||||
.left-item-animation {
|
||||
opacity: 0;
|
||||
animation-name: error-num;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.left-item-num {
|
||||
color: #d6e0f6;
|
||||
font-size: 55px;
|
||||
}
|
||||
.left-item-title {
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
margin: 15px 0 5px 0;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.left-item-msg {
|
||||
color: #c0bebe;
|
||||
font-size: 12px;
|
||||
margin-bottom: 30px;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.left-item-btn {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
opacity: 0;
|
||||
animation-name: error-img;
|
||||
animation-duration: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div class="error">
|
||||
<div class="error-flex">
|
||||
<div class="left">
|
||||
<div class="left-item">
|
||||
<div class="left-item-animation left-item-num">404</div>
|
||||
<div class="left-item-animation left-item-title">{{ $t('message.notFound.foundTitle') }}</div>
|
||||
<div class="left-item-animation left-item-msg">{{ $t('message.notFound.foundMsg') }}</div>
|
||||
<div class="left-item-animation left-item-btn">
|
||||
<el-button type="primary" round @click="onGoHome">{{ $t('message.notFound.foundBtn') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img src="https://i.hd-r.cn/1a0d90a6c1e8b0184c7299dda713effd.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'noFound',
|
||||
methods: {
|
||||
// 去首页
|
||||
onGoHome() {
|
||||
this.$router.push('/');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.error {
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
.error-flex {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
height: 350px;
|
||||
width: 900px;
|
||||
.left {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
.left-item {
|
||||
.left-item-animation {
|
||||
opacity: 0;
|
||||
animation-name: error-num;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.left-item-num {
|
||||
color: #d6e0f6;
|
||||
font-size: 55px;
|
||||
}
|
||||
.left-item-title {
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
margin: 15px 0 5px 0;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.left-item-msg {
|
||||
color: #c0bebe;
|
||||
font-size: 12px;
|
||||
margin-bottom: 30px;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.left-item-btn {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
opacity: 0;
|
||||
animation-name: error-img;
|
||||
animation-duration: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// // 获取设备数据列表
|
||||
// export const rqGetDeviceList = (current,size) => request({
|
||||
// url: `/attendance/equipment/device?current=${current}&size=${size}`,
|
||||
// method: 'get',
|
||||
// })
|
||||
|
||||
|
||||
// // 添加或者修改
|
||||
// export const rqAddOrModifyDevice = (data) => {
|
||||
// if(data.deviceId){
|
||||
// return request({
|
||||
// url: '/attendance/equipment/device',
|
||||
// method: 'put',
|
||||
// data
|
||||
// })
|
||||
// }else{
|
||||
// return request({
|
||||
// url: '/attendance/equipment/device',
|
||||
// method: 'post',
|
||||
// data
|
||||
// })
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// // 删除
|
||||
// export const rqDeleteDevice = (id) => request({
|
||||
// url: `/attendance/equipment/device/${id}`,
|
||||
// method: 'delete',
|
||||
// })
|
||||
|
||||
|
||||
// 获取设备数据列表
|
||||
export const rqObtainDepartmentList = () => request({
|
||||
url: `/user-dept/user/companyDept/tree`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
// 获取设备数据列表
|
||||
export const rqObtainsAListOfDepartmentUsers = (deptId) => request({
|
||||
url: `/user-dept/user/company/dept/${deptId}`,
|
||||
method: 'get',
|
||||
})
|
||||
// 上传教职工头像
|
||||
export const rqUploadStaffAvatars = (userid) => request({
|
||||
url: `/file/upload/face?useFace=true&userid=${userid}`,
|
||||
method: 'post',
|
||||
})
|
||||
|
||||
|
||||
// 上传教职工头像
|
||||
export const rqSynchronizePinContacts = () => request({
|
||||
url: `/user-dept/user/companyDept/synchronization`,
|
||||
method: 'get',
|
||||
})
|
||||
@@ -0,0 +1,19 @@
|
||||
export default [
|
||||
{
|
||||
label: "角色标识",
|
||||
prop: "userid",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "角色名称",
|
||||
prop: "name",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "人脸",
|
||||
prop: "faceImg",
|
||||
type: "image",
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
@@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="hover">
|
||||
<div style="display: flex">
|
||||
<CommonHead
|
||||
@search-data="searchForm"
|
||||
@reset-data="reset"
|
||||
@newly-data="add"
|
||||
></CommonHead>
|
||||
<el-button
|
||||
style="margin-left: 10px"
|
||||
size="mini"
|
||||
type="success"
|
||||
icon="el-icon-star-off"
|
||||
@click="synchronizePinContacts"
|
||||
:loading="butLoading"
|
||||
>同步到钉钉</el-button
|
||||
>
|
||||
</div>
|
||||
</el-card>
|
||||
<div>
|
||||
<div style="margin-top: 10px">
|
||||
<el-card>
|
||||
<el-tree
|
||||
:data="departmentList"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
></el-tree>
|
||||
</el-card>
|
||||
</div>
|
||||
<div>
|
||||
<CommonTablesImg
|
||||
v-loading="loading"
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="departmentUserList"
|
||||
></CommonTablesImg>
|
||||
<!-- <Pagination
|
||||
:total="total"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="编辑"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form :model="formData" label-width="100px" size="mini" ref="ruleForm">
|
||||
<el-form-item label="头像上传">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="url"
|
||||
:headers="$store.state.uploadHeader"
|
||||
:show-file-list="false"
|
||||
name="img"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
>
|
||||
<img v-if="formData.faceImg" :src="formData.faceImg" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon clss"></i>
|
||||
<div slot="tip" class="el-upload__tip">
|
||||
只能上传jpg/png/gif/jpeg文件，且不超过500kb
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import columns from "./columns";
|
||||
import {
|
||||
rqObtainDepartmentList,
|
||||
rqObtainsAListOfDepartmentUsers,
|
||||
rqSynchronizePinContacts,
|
||||
} from "./api";
|
||||
export default {
|
||||
name: "facultyInformation",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
columns,
|
||||
|
||||
total: 0,
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
// 部门列表
|
||||
departmentList: [],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "name",
|
||||
},
|
||||
// 部门用户信息
|
||||
departmentUserList: [],
|
||||
loading: false,
|
||||
dialogVisible: false,
|
||||
formData: { faceImg: "", userid: "" },
|
||||
deptId: "1",
|
||||
|
||||
url: "https://hxhl.lzyyj.com/prod-api/file/upload/teacher/face?userid",
|
||||
butLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 搜索按钮
|
||||
searchForm() {
|
||||
this.$message("暂无搜索项");
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
this.bus.$emit("onCurrentContextmenuClick", {
|
||||
id: 0,
|
||||
path: this.$route.path,
|
||||
});
|
||||
},
|
||||
// 添加
|
||||
add() {
|
||||
this.$message("角色新增请联系钉钉后台管理员");
|
||||
},
|
||||
// 删除
|
||||
async deleteData(row) {
|
||||
this.$message("该角色暂时无法删除");
|
||||
},
|
||||
// 编辑
|
||||
async editData(item) {
|
||||
this.url = "https://hxhl.lzyyj.com/prod-api/file/upload/teacher/face?userid";
|
||||
this.formData.userid = item.userid;
|
||||
this.url = this.url + `=${item.userid}`;
|
||||
console.log(this.url);
|
||||
this.dialogVisible = true;
|
||||
this.formData.faceImg = item.faceImg;
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(val) {
|
||||
this.query.pageNum = val;
|
||||
// this.getAttendanceFormData();
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(val) {
|
||||
this.query.pageSize = val;
|
||||
// this.getAttendanceFormData();
|
||||
},
|
||||
// 获取部们列表
|
||||
async obtainDepartmentList() {
|
||||
try {
|
||||
let res = await rqObtainDepartmentList();
|
||||
if (res.code == 200) {
|
||||
this.departmentList = res.data;
|
||||
} else {
|
||||
this.$message({
|
||||
message: "服务器错误",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message({
|
||||
message: "网络错误",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
},
|
||||
// 获取部们人员列表
|
||||
async obtainAListOfDepartmentPersonnel(id) {
|
||||
try {
|
||||
this.loading = true;
|
||||
let res = await rqObtainsAListOfDepartmentUsers(id);
|
||||
if (res.code == 200) {
|
||||
this.loading = false;
|
||||
this.departmentUserList = res.data;
|
||||
console.log(res);
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message({
|
||||
message: "服务器错误",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message({
|
||||
message: "网络错误",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
},
|
||||
// 点击节点时候的回调
|
||||
handleNodeClick(data) {
|
||||
this.deptId = data.deptId;
|
||||
this.obtainAListOfDepartmentPersonnel(data.deptId);
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm("确认关闭？")
|
||||
.then((_) => {
|
||||
done();
|
||||
})
|
||||
.catch((_) => {});
|
||||
},
|
||||
//上传图片方法和回调
|
||||
handleAvatarSuccess(res, file) {
|
||||
console.log(221);
|
||||
console.log(res);
|
||||
if (res.code == 200) {
|
||||
this.formData.faceImg = res.data;
|
||||
setTimeout(() => {
|
||||
this.obtainAListOfDepartmentPersonnel(this.deptId);
|
||||
}, 2000);
|
||||
|
||||
this.$message({
|
||||
message: "上传成功",
|
||||
type: "success",
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: "上传失败",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
},
|
||||
// 上传之前的回调
|
||||
beforeAvatarUpload(file) {
|
||||
this.$message({
|
||||
message: "上传加载中...",
|
||||
});
|
||||
// 获取文件的后缀
|
||||
const suffix = file.name.substring(file.name.lastIndexOf(".") + 1);
|
||||
// 判断文件的大小
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
let accept = "jpg/png/gif/jpeg";
|
||||
const isLtType = accept.indexOf(suffix) >= 0;
|
||||
if (!isLtType) {
|
||||
this.$message.error("上传头像图片只能是jpg/png/gif/jpeg格式!");
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||||
}
|
||||
return isLtType && isLt2M;
|
||||
},
|
||||
// 同步钉钉通讯录
|
||||
async synchronizePinContacts() {
|
||||
try {
|
||||
this.butLoading = true;
|
||||
let res = await rqSynchronizePinContacts();
|
||||
if (res.code == 200) {
|
||||
this.butLoading = false;
|
||||
this.$message({
|
||||
message: "同步成功",
|
||||
type: "success",
|
||||
});
|
||||
} else {
|
||||
this.butLoading = false;
|
||||
this.$message({
|
||||
message: "同步成失败",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
this.butLoading = false;
|
||||
this.$message({
|
||||
message: "网络错误",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.obtainDepartmentList();
|
||||
this.obtainAListOfDepartmentPersonnel(1);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.el-textarea .el-textarea__inner {
|
||||
resize: none;
|
||||
}
|
||||
.box-card {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.clss {
|
||||
border: 4px dashed #d9d9d9 !important;
|
||||
}
|
||||
.avatar-uploader .el-upload {
|
||||
border: 4px dashed #d9d9d9 !important;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,7 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 获取动态分组
|
||||
export const rqGetDynamicGrouping = () => request({
|
||||
url: `/growthAlbum/forms/getModList`,
|
||||
method: 'get',
|
||||
})
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<InformationTableComponent
|
||||
style="margin-top: 10px"
|
||||
v-for="(item, index) in dynamicGroupingData"
|
||||
:key="index"
|
||||
:topId="item.modId"
|
||||
:titles="item.label"
|
||||
:levels="item.level"
|
||||
></InformationTableComponent>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { rqGetDynamicGrouping } from "./api";
|
||||
import InformationTableComponent from "../informationTableComponent/index.vue";
|
||||
|
||||
export default {
|
||||
name: "informationTableComponent",
|
||||
data() {
|
||||
return {
|
||||
// 配置数据
|
||||
dynamicGroupingData: [],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
InformationTableComponent,
|
||||
},
|
||||
created() {
|
||||
this.getDynamicGrouping();
|
||||
},
|
||||
methods: {
|
||||
// 获取动态分组
|
||||
async getDynamicGrouping() {
|
||||
try {
|
||||
let res = await rqGetDynamicGrouping();
|
||||
if (res.code == 200) {
|
||||
this.dynamicGroupingData = res.data;
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,53 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 获取获取表单控件
|
||||
export const rqGetFormControl = () => request({
|
||||
url: `/growthAlbum/forms/getType`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
// 获取动态数据分组列表
|
||||
export const rqObtainDynamicDataGroupingList = () => request({
|
||||
url: `/growthAlbum/forms/getMod`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
// 新增控件
|
||||
export const rqAddControl = (data) => request({
|
||||
url: `/growthAlbum/forms/add`,
|
||||
method: 'Post',
|
||||
data
|
||||
})
|
||||
// 删除控件
|
||||
export const rqDeleteControl = (id) => request({
|
||||
url: `/growthAlbum/forms/delete?id=${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
// 新增控件选项
|
||||
export const rqAddControlOptions = (data) => request({
|
||||
url: `/growthAlbum/forms/addChild`,
|
||||
method: 'Post',
|
||||
data
|
||||
})
|
||||
|
||||
// 删除控件选项
|
||||
export const rqDeleteControlOptions = (id) => request({
|
||||
url: `/growthAlbum/forms/deleteChild?id=${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
// 勾选
|
||||
export const rqCheckConfiguration = (type,value) => request({
|
||||
url: `/growthAlbum/forms/check?${type}=${value}`,
|
||||
method: 'post',
|
||||
})
|
||||
// 添加最外层的配置
|
||||
export const rqFirstLayerConfiguration = (data) => request({
|
||||
url: `/growthAlbum/forms/addMod`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
// 删除控件
|
||||
export const rqDeleteFirstLayerConfiguration = (id) => request({
|
||||
url: `/growthAlbum/forms/deleteMod?modId=${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
@@ -0,0 +1,489 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 树形 -->
|
||||
<el-card class="box-card">
|
||||
<el-button
|
||||
style="margin-bottom: 10px"
|
||||
@click="add"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
>添加</el-button
|
||||
>
|
||||
<div class="custom-tree-container">
|
||||
<div class="block">
|
||||
<el-tree
|
||||
ref="treeOne"
|
||||
:data="treeData"
|
||||
show-checkbox
|
||||
node-key="oid"
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
@check="handleCheckChangeOne"
|
||||
:props="treeProps"
|
||||
>
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span>{{ node.label }}</span>
|
||||
<el-tag
|
||||
style="margin-left: 20px"
|
||||
v-if="data.type"
|
||||
type="success"
|
||||
size="mini"
|
||||
>{{ data.type }}</el-tag
|
||||
>
|
||||
<!-- <el-tag size="mini"> {{ node }}</el-tag> -->
|
||||
<span style="margin-left: 600px">
|
||||
<el-button type="text" size="mini" @click="() => append(data)">
|
||||
添加配置
|
||||
</el-button>
|
||||
<el-button type="text" size="mini" @click="() => remove(node, data)">
|
||||
删除配置
|
||||
</el-button>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- 弹窗 -->
|
||||
<el-drawer
|
||||
title="添加配置项"
|
||||
:before-close="handleClose"
|
||||
:visible.sync="dialog"
|
||||
direction="rtl"
|
||||
custom-class="demo-drawer"
|
||||
ref="drawer"
|
||||
>
|
||||
<div class="demo-drawer__content" style="margin-top: 50px">
|
||||
<el-form :model="form">
|
||||
<el-form-item v-if="inputType" label="配置名称" :label-width="formLabelWidth">
|
||||
<el-input
|
||||
style="width: 80%"
|
||||
v-model="form.label"
|
||||
placeholder="请输入配置名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="inputType" label="表单类型" :label-width="formLabelWidth">
|
||||
<el-select
|
||||
style="width: 80%"
|
||||
v-model="form.formId"
|
||||
placeholder="请选择配置表单类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in fromDateCf"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="!inputType" label="请输入选项" label-width="90px">
|
||||
<el-input
|
||||
style="width: 80%"
|
||||
v-model="configurationItem"
|
||||
placeholder="请输入选项"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="demo-drawer__footer">
|
||||
<el-button @click="cancelForm" style="width: 15vw">取 消</el-button>
|
||||
<el-button
|
||||
v-if="inputType"
|
||||
style="width: 15vw"
|
||||
type="primary"
|
||||
@click="$refs.drawer.closeDrawer()"
|
||||
:loading="loading"
|
||||
>{{ loading ? "提交中 ..." : "确 定" }}</el-button
|
||||
>
|
||||
<el-button
|
||||
v-else
|
||||
style="width: 15vw"
|
||||
@click="addConfigurationOptions"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
>添加</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
<!-- 新增对话框第一层 -->
|
||||
<el-dialog
|
||||
title="添加配置"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="closeIn"
|
||||
>
|
||||
<el-form ref="form" :model="firstLayerIncrease">
|
||||
<el-form-item size="mini" label="配置名称" label-width="80px">
|
||||
<el-input
|
||||
placeholder="请输入配置名称"
|
||||
v-model="firstLayerIncrease.label"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="设置范围" label-width="80px">
|
||||
<el-select
|
||||
style="width: 80%"
|
||||
v-model="firstLayerIncrease.level"
|
||||
placeholder="请选择设置范围"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in levelList"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.level"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmAdding">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
rqGetFormControl,
|
||||
rqObtainDynamicDataGroupingList,
|
||||
rqAddControl,
|
||||
rqDeleteControl,
|
||||
rqAddControlOptions,
|
||||
rqDeleteControlOptions,
|
||||
rqCheckConfiguration,
|
||||
rqFirstLayerConfiguration,
|
||||
rqDeleteFirstLayerConfiguration,
|
||||
} from "./api";
|
||||
export default {
|
||||
name: "dataItemConfiguration",
|
||||
data() {
|
||||
return {
|
||||
//最外层对话框
|
||||
dialogVisible: false,
|
||||
// 是否显示输入类型
|
||||
inputType: true,
|
||||
dialog: false,
|
||||
loading: false,
|
||||
// 收集配置项
|
||||
configurationItem: "",
|
||||
// 控件收集表单
|
||||
form: {
|
||||
modId: "",
|
||||
label: "",
|
||||
formId: "",
|
||||
children: [],
|
||||
sort: 1,
|
||||
},
|
||||
// 配置选项表单类型数据
|
||||
fromDateCf: [],
|
||||
formLabelWidth: "80px",
|
||||
|
||||
treeProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
checked: "checked", // 设置用于勾选状态的属性名
|
||||
},
|
||||
// 树数据
|
||||
treeData: [],
|
||||
firstLayerIncrease: { label: "", level: null },
|
||||
//等级列表 全校 班级 学生
|
||||
levelList: [
|
||||
{ label: "全校", level: 1 },
|
||||
{ label: "班级", level: 2 },
|
||||
{ label: "学生", level: 3 },
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.obtainDynamicDataGroupingList();
|
||||
this.getFormControl();
|
||||
},
|
||||
methods: {
|
||||
handleClose(done) {
|
||||
this.$confirm("确认关闭？")
|
||||
.then((_) => {
|
||||
done();
|
||||
})
|
||||
.catch((_) => {});
|
||||
},
|
||||
// 树形
|
||||
append(data) {
|
||||
console.log(data);
|
||||
if (data.children) {
|
||||
// 判断他是否有children
|
||||
if (data.formId) {
|
||||
// 判断他是否有id
|
||||
if (data.formId == 5 || data.formId == 6) {
|
||||
// 如果有id则进行判断
|
||||
// 添加单选框获取多选框项走这里
|
||||
console.log(data);
|
||||
this.inputType = false;
|
||||
this.configurationItem = "";
|
||||
this.form.formId = data.formId;
|
||||
this.form.label = data.label;
|
||||
this.form.modId = "";
|
||||
this.dialog = true;
|
||||
console.log(data.id);
|
||||
this.form.modId = data.id;
|
||||
const randomNumber = Math.floor(Math.random() * 1000);
|
||||
this.form.sort = randomNumber;
|
||||
} else {
|
||||
this.$notify({
|
||||
title: "消息",
|
||||
message: "该组无法继续添加子类1",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// 添加组件走这里
|
||||
this.form.formId = "";
|
||||
this.form.label = "";
|
||||
this.form.modId = "";
|
||||
this.dialog = true;
|
||||
console.log(data.modId);
|
||||
this.form.modId = data.modId;
|
||||
const randomNumber = Math.floor(Math.random() * 1000);
|
||||
this.form.sort = randomNumber;
|
||||
}
|
||||
} else {
|
||||
this.$notify({
|
||||
title: "消息",
|
||||
message: "该组无法继续添加子类",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async remove(node, data) {
|
||||
if (data.modId) {
|
||||
try {
|
||||
let result = await rqDeleteFirstLayerConfiguration(data.modId);
|
||||
if (result.code == 200) {
|
||||
this.$message.success("数据项删除成功");
|
||||
this.obtainDynamicDataGroupingList();
|
||||
} else if (result.code == 403) {
|
||||
this.$message.warning(result.msg);
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} else {
|
||||
if (data.children) {
|
||||
// 删除组件项
|
||||
try {
|
||||
let result = await rqDeleteControl(data.id);
|
||||
if (result.code == 200) {
|
||||
this.$message.success("数据项删除成功");
|
||||
this.obtainDynamicDataGroupingList();
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} else {
|
||||
// 删除组件多选或者单选项
|
||||
try {
|
||||
let res = await rqDeleteControlOptions(data.childrenId);
|
||||
if (res.code == 200) {
|
||||
this.$message.success("删除成功");
|
||||
this.obtainDynamicDataGroupingList();
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 选择后触发事件
|
||||
async handleCheckChangeOne(checkedNodes) {
|
||||
if (checkedNodes.modId) {
|
||||
try {
|
||||
let result = await rqCheckConfiguration("modId", checkedNodes.modId);
|
||||
if (result.code == 200) {
|
||||
this.obtainDynamicDataGroupingList();
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} else if (checkedNodes.id) {
|
||||
try {
|
||||
let result = await rqCheckConfiguration("id", checkedNodes.id);
|
||||
if (result.code == 200) {
|
||||
this.obtainDynamicDataGroupingList();
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
let result = await rqCheckConfiguration("childrenId", checkedNodes.childrenId);
|
||||
if (result.code == 200) {
|
||||
this.obtainDynamicDataGroupingList();
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
handleClose(done) {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.$confirm(this.inputType ? "确定要提交表单吗？" : "确定添加吗")
|
||||
.then((_) => {
|
||||
if (this.inputType) {
|
||||
if (this.form.formId && this.form.label) {
|
||||
this.loading = true;
|
||||
this.timer = setTimeout(async () => {
|
||||
done();
|
||||
try {
|
||||
let result = await rqAddControl(this.form);
|
||||
if (result.code == 200) {
|
||||
this.obtainDynamicDataGroupingList();
|
||||
|
||||
this.$message.success("添加成功");
|
||||
this.inputType = true;
|
||||
} else {
|
||||
this.$message.error(result.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
// 动画关闭需要一定的时间
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 400);
|
||||
}, 1000);
|
||||
} else {
|
||||
this.$message.warning("请填写完整信息提交");
|
||||
}
|
||||
} else {
|
||||
this.addConfigurationOptions();
|
||||
}
|
||||
})
|
||||
.catch((_) => {});
|
||||
},
|
||||
cancelForm() {
|
||||
this.inputType = true;
|
||||
this.loading = false;
|
||||
this.dialog = false;
|
||||
clearTimeout(this.timer);
|
||||
},
|
||||
|
||||
// 获取表单控件
|
||||
async getFormControl() {
|
||||
try {
|
||||
let result = await rqGetFormControl();
|
||||
if (result.code == 200) {
|
||||
this.fromDateCf = result.data;
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 获取动态数据分组列表
|
||||
async obtainDynamicDataGroupingList() {
|
||||
try {
|
||||
let result = await rqObtainDynamicDataGroupingList();
|
||||
if (result.code == 200) {
|
||||
this.treeData = result.data;
|
||||
this.$refs.treeOne.setCheckedKeys(result.list);
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
|
||||
// 添加配置选项
|
||||
async addConfigurationOptions() {
|
||||
if (this.configurationItem) {
|
||||
let classOpitons = {
|
||||
parentId: this.form.modId,
|
||||
label: this.configurationItem,
|
||||
type: "success",
|
||||
};
|
||||
try {
|
||||
let result = await rqAddControlOptions(classOpitons);
|
||||
if (result.code == 200) {
|
||||
this.$message.success("添加成功");
|
||||
this.obtainDynamicDataGroupingList();
|
||||
this.dialog = false;
|
||||
this.inputType = true;
|
||||
} else {
|
||||
this.dialog = false;
|
||||
this.inputType = true;
|
||||
|
||||
this.$message.error(result.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
this.dialog = false;
|
||||
this.inputType = true;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} else {
|
||||
this.$message.warning("请填写后添加");
|
||||
}
|
||||
},
|
||||
add() {
|
||||
(this.firstLayerIncrease = { label: "", level: null }), (this.dialogVisible = true);
|
||||
},
|
||||
async confirmAdding() {
|
||||
if (this.firstLayerIncrease.label) {
|
||||
try {
|
||||
let res = await rqFirstLayerConfiguration(this.firstLayerIncrease);
|
||||
if (res.code == 200) {
|
||||
this.obtainDynamicDataGroupingList();
|
||||
this.$message.success("添加成功");
|
||||
this.dialogVisible = false;
|
||||
} else {
|
||||
this.dialogVisible = false;
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
this.dialogVisible = false;
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
} else {
|
||||
this.$message.warning("请填写完整信息提交");
|
||||
}
|
||||
},
|
||||
closeIn(done) {
|
||||
this.$confirm("确认关闭？")
|
||||
.then((_) => {
|
||||
done();
|
||||
})
|
||||
.catch((_) => {});
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-drawer__footer {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 获取动态分组
|
||||
export const rqGetDynamicGrouping = () => request({
|
||||
url: `/growthAlbum/forms/getModList`,
|
||||
method: 'get',
|
||||
})
|
||||
// 获取动态控件
|
||||
export const rqGetDynamicControls = (id) => request({
|
||||
url: `/growthAlbum/forms/get?modId=${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
// 获取学期
|
||||
export const rqGetSemester = () => request({
|
||||
url: `/growthAlbum/baseInfo/getDuring`,
|
||||
method: 'get',
|
||||
})
|
||||
// 通过班级id获取学生信息
|
||||
export const rqObtainingStudentInformation = (classId) => request({
|
||||
url: `/growthAlbum/result/getStudentInfo?classId=${classId}`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
|
||||
// 添加或者修改
|
||||
export const submitFormRequest = (data) => {
|
||||
if(data.id){
|
||||
return request({
|
||||
url: '/growthAlbum/result/update',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}else{
|
||||
return request({
|
||||
url: `/growthAlbum/result/add`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 请求标题
|
||||
export const rqGetTitle = (id) => request({
|
||||
url: `/growthAlbum/result/getTitle?modId=${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
|
||||
// 获取表结构popo列表数据
|
||||
export const rqGetStructureList = (modId,pageNum,pageSize,userId="",classId="",during="") => request({
|
||||
url: `/growthAlbum/result/get?modId=${modId}&pageNum=${pageNum}&pageSize=${pageSize}&userId=${userId}&classId=${classId}&during=${during}`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
// 获取班级列表
|
||||
export const rqGetClassList = (id = 0) => request({
|
||||
url: `/growthAlbum/result/getClassInfo?id=${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
|
||||
// 删除表结构popo列表数据
|
||||
export const rqDelStructureList = (id) => request({
|
||||
url: `/growthAlbum/result/delete?id=${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
+121
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-table :data="tableData" style="width: 100%" height="650" size="mini">
|
||||
<el-table-column
|
||||
v-if="column.label !== 'id'"
|
||||
align="center"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="column.type === 'text'"> {{ scope.row[column.prop] }}</span>
|
||||
<div v-else-if="column.type === 'signUp'">
|
||||
<el-tag size="small" v-if="scope.row[column.prop] == 0">已到</el-tag>
|
||||
<el-tag size="small" type="success" v-else-if="scope.row[column.prop] == 1"
|
||||
>迟到</el-tag
|
||||
>
|
||||
<el-tag size="small" type="danger" v-else-if="scope.row[column.prop] == 2"
|
||||
>旷课</el-tag
|
||||
>
|
||||
<el-tag size="small" type="warning" v-else-if="scope.row[column.prop] == 3"
|
||||
>请假</el-tag
|
||||
>
|
||||
<el-tag size="small" type="warning" v-else-if="scope.row[column.prop] == 4"
|
||||
>早退</el-tag
|
||||
>
|
||||
</div>
|
||||
<div v-else-if="column.type === 'image'">
|
||||
<img style="width: 200px; height: 100px" :src="scope.row[column.prop]" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="false"
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-popconfirm @confirm="handleDelete(scope.row)" :title="'确定要删除吗？'">
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonTablesImg",
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
console.log(row);
|
||||
this.editFunc(row);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
type: column.type,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,975 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-card shadow="always">
|
||||
<div style="display: flex">
|
||||
<CommonHead
|
||||
@newly-data="fetchDataNewlyAdded"
|
||||
@reset-data="reset"
|
||||
@search-data="search"
|
||||
></CommonHead>
|
||||
<!-- newly-data新增事件 -->
|
||||
<!-- reset-data重置表单内容 -->
|
||||
<!-- search-data搜索事件，接收被搜索的内容 -->
|
||||
<el-button
|
||||
@click="handleImport"
|
||||
style="margin-left: 10px"
|
||||
type="info"
|
||||
plain
|
||||
icon="el-icon-upload2"
|
||||
size="mini"
|
||||
>导入</el-button
|
||||
>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<!-- 标题 -->
|
||||
<div>
|
||||
<h2 v-if="levels == 1" style="margin-top: 20px">
|
||||
{{ titles }}
|
||||
<h2 style="font-size: 12px">所属范围全校</h2>
|
||||
</h2>
|
||||
<h2 v-else-if="levels == 2" style="margin-top: 20px">
|
||||
{{ titles }}
|
||||
<h2 style="font-size: 12px">所属范围班级</h2>
|
||||
</h2>
|
||||
<h2 v-else-if="levels == 3" style="margin-top: 20px">
|
||||
{{ titles }}
|
||||
<h2 style="font-size: 12px">所属范围学生</h2>
|
||||
</h2>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<el-form
|
||||
v-if="levels == 1"
|
||||
ref="form"
|
||||
style="margin-top: 30px"
|
||||
:model="searchData"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="按学期搜索" label-width="100px">
|
||||
<el-select
|
||||
size="mini"
|
||||
filterable
|
||||
v-model="searchData.value"
|
||||
placeholder="请选择学期"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in semester"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form
|
||||
v-if="levels == 2"
|
||||
ref="form"
|
||||
style="margin-top: 30px"
|
||||
:model="searchData"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="按班级搜索" label-width="100px">
|
||||
<el-select
|
||||
size="mini"
|
||||
filterable
|
||||
v-model="searchData.value"
|
||||
placeholder="请选择班级"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in listOfOptions"
|
||||
:key="index"
|
||||
:label="item.classId"
|
||||
:value="item.deptId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form
|
||||
v-if="levels == 3"
|
||||
ref="form"
|
||||
style="margin-top: 30px"
|
||||
:model="searchData"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="按学生搜索" label-width="100px">
|
||||
<el-select
|
||||
size="mini"
|
||||
filterable
|
||||
v-model="searchData.value"
|
||||
placeholder="请选择学生"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in listOfOptions"
|
||||
:key="index"
|
||||
:label="item.userId"
|
||||
:value="item.studentId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- 对话框 -->
|
||||
<el-dialog
|
||||
title="新增"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500px"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form ref="ruleForm" :rules="rules" :model="form" label-width="80px">
|
||||
<el-form-item size="mini" label="请选择学期" label-width="100px" prop="during">
|
||||
<el-select v-model="form.during" placeholder="请选择学期">
|
||||
<el-option
|
||||
@click.native="selectCampus()"
|
||||
v-for="(ion, index) in semester"
|
||||
:key="index"
|
||||
:label="ion.name"
|
||||
:value="ion.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if="!(levels == 1)"
|
||||
size="mini"
|
||||
label="请选择校区"
|
||||
label-width="100px"
|
||||
prop="campusID"
|
||||
>
|
||||
<el-select v-model="campusIds" placeholder="请选择校区查询学段">
|
||||
<el-option
|
||||
@click.native="selectACampusToSearchForStudentSegments(itm.deptId)"
|
||||
v-for="(itm, index) in shList"
|
||||
:key="index"
|
||||
:label="itm.deptName"
|
||||
:value="itm.deptId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if="!(levels == 1)"
|
||||
size="mini"
|
||||
label="请选择学段"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-select v-model="stageS" placeholder="请选择学段查询年级">
|
||||
<el-option
|
||||
@click.native="selectASegmentToSearchForAClass(itm.deptId)"
|
||||
v-for="(itm, index) in academicStageList"
|
||||
:key="index"
|
||||
:label="itm.deptName"
|
||||
:value="itm.deptId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if="!(levels == 1)"
|
||||
size="mini"
|
||||
label="请选择年级"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-select v-model="gradeS" placeholder="请选择年级查询班级">
|
||||
<el-option
|
||||
@click.native="queryClassesBasedOnAcademicStage(itm.deptId)"
|
||||
v-for="(itm, index) in gradeList"
|
||||
:key="index"
|
||||
:label="itm.deptName"
|
||||
:value="itm.deptId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if="!(levels == 1)"
|
||||
size="mini"
|
||||
label="请选择班级"
|
||||
label-width="100px"
|
||||
prop="classId"
|
||||
>
|
||||
<el-select v-model="form.classId" placeholder="请选择班级查询学生">
|
||||
<el-option
|
||||
@click.native="getObtainingStudentInformation(itm.deptId)"
|
||||
v-for="(itm, index) in classList"
|
||||
:key="index"
|
||||
:label="itm.deptName"
|
||||
:value="itm.deptId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if="!(levels == 1) && !(levels == 2)"
|
||||
size="mini"
|
||||
label="请选择学生"
|
||||
label-width="100px"
|
||||
prop="userId"
|
||||
>
|
||||
<el-select v-model="form.userId" placeholder="请选择学生">
|
||||
<el-option
|
||||
@click.native="selectingStudents()"
|
||||
v-for="(itm, index) in studentLis"
|
||||
:key="index"
|
||||
:label="itm.name"
|
||||
:value="itm.userid"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-for="(icon, index) in controlData"
|
||||
:key="index"
|
||||
v-if="icon.formId == 2"
|
||||
size="mini"
|
||||
:label="icon.label"
|
||||
>
|
||||
<el-input
|
||||
v-model="icon.vm"
|
||||
@input="inputContentTriggering"
|
||||
placeholder="请输入内容"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-for="(icon, index) in controlData"
|
||||
:key="index"
|
||||
v-if="icon.formId == 1"
|
||||
size="mini"
|
||||
:label="icon.label"
|
||||
>
|
||||
<el-date-picker
|
||||
@change="inputContentTriggering"
|
||||
v-model="icon.vm"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-for="(icon, index) in controlData"
|
||||
:key="index"
|
||||
v-if="icon.formId == 3"
|
||||
size="mini"
|
||||
:label="icon.label"
|
||||
>
|
||||
<el-input
|
||||
@input="inputContentTriggering"
|
||||
type="textarea"
|
||||
autosize
|
||||
placeholder="请输入内容"
|
||||
v-model="icon.vm"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-for="(icon, index) in controlData"
|
||||
:key="index"
|
||||
v-if="icon.formId == 4"
|
||||
size="mini"
|
||||
:label="icon.label"
|
||||
>
|
||||
<el-input
|
||||
type="number"
|
||||
@input="inputContentTriggering"
|
||||
autosize
|
||||
placeholder="请输入内容"
|
||||
v-model="icon.vm"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-for="(icon, index) in controlData"
|
||||
:key="index"
|
||||
v-if="icon.formId == 5"
|
||||
size="mini"
|
||||
:label="icon.label"
|
||||
>
|
||||
<el-select v-model="icon.vm" placeholder="请选择">
|
||||
<el-option
|
||||
@click.native="inputContentTriggering"
|
||||
v-for="(item, index) in icon.children"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.childrenId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-for="(icon, index) in controlData"
|
||||
:key="index"
|
||||
v-if="icon.formId == 6"
|
||||
size="mini"
|
||||
:label="icon.label"
|
||||
>
|
||||
<el-checkbox-group v-model="icon.vm">
|
||||
<el-checkbox
|
||||
@change="inputContentTriggering"
|
||||
v-for="(ion, index) in icon.children"
|
||||
:key="index"
|
||||
:label="ion.childrenId"
|
||||
>{{ ion.label }}</el-checkbox
|
||||
>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-progress
|
||||
:percentage="progress"
|
||||
status="success"
|
||||
style="margin-top: 10px; margin-left: 10px"
|
||||
></el-progress>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmSubmissionOfForm">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<InterestClassTabes
|
||||
v-loading="loading"
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="dataForm"
|
||||
></InterestClassTabes>
|
||||
</div>
|
||||
<!-- 导入对话框 -->
|
||||
<el-dialog
|
||||
:title="upload.title"
|
||||
:visible.sync="upload.open"
|
||||
width="400px"
|
||||
append-to-body
|
||||
>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
name="file"
|
||||
:limit="1"
|
||||
accept=".xlsx, .xls"
|
||||
:headers="upload.headers"
|
||||
:action="upload.url"
|
||||
:disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:on-error="failedToUploadCourse"
|
||||
:auto-upload="false"
|
||||
drag
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip text-center" slot="tip">
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
style="font-size: 12px; vertical-align: baseline"
|
||||
><a
|
||||
:href="
|
||||
$store.state.campusCalendarTempentUrl +
|
||||
`/growthAlbum/result/getExcelMod?modId=${this.topId}`
|
||||
"
|
||||
>下载模板</a
|
||||
>
|
||||
</el-link>
|
||||
</div>
|
||||
</el-upload>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||||
<el-button @click="upload.open = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
rqGetDynamicGrouping,
|
||||
rqGetDynamicControls,
|
||||
rqGetSemester,
|
||||
rqObtainingStudentInformation,
|
||||
submitFormRequest,
|
||||
rqGetStructureList,
|
||||
rqGetTitle,
|
||||
rqGetClassList,
|
||||
rqDelStructureList,
|
||||
} from "./api";
|
||||
import { Session } from "@/utils/storage";
|
||||
import InterestClassTabes from "./components/InterestClassTabes.vue";
|
||||
export default {
|
||||
name: "informationTableComponent",
|
||||
props: ["topId", "titles", "levels"],
|
||||
components: {
|
||||
InterestClassTabes,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 搜索数据
|
||||
searchData: {
|
||||
value: "",
|
||||
},
|
||||
// 表单验证
|
||||
rules: {
|
||||
during: [{ required: true, message: "请选择内容", trigger: "blur" }],
|
||||
userId: [{ required: true, message: "请选择内容", trigger: "blur" }],
|
||||
classId: [{ required: true, message: "请选择内容", trigger: "blur" }],
|
||||
},
|
||||
total: 0,
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
// 学生的id
|
||||
userId: "",
|
||||
// modeID
|
||||
key: null,
|
||||
// 传过去的值
|
||||
result: {
|
||||
// key:oid value:绑定的值
|
||||
123: "vm",
|
||||
456: "vm",
|
||||
},
|
||||
// 学期id
|
||||
during: "",
|
||||
// 班级id
|
||||
classId: "",
|
||||
},
|
||||
// 配置数据
|
||||
dynamicGroupingData: [],
|
||||
// 控件数据
|
||||
controlData: [],
|
||||
// 学期列表
|
||||
semester: [],
|
||||
// 学生列表
|
||||
studentLis: [],
|
||||
// 班级列表
|
||||
classList: [],
|
||||
// 校区列表
|
||||
shList: [],
|
||||
// 年级
|
||||
gradeList: [],
|
||||
// 学段列表
|
||||
academicStageList: [],
|
||||
// 表标题结构
|
||||
columns: [],
|
||||
// 表数据
|
||||
dataForm: [],
|
||||
loading: false,
|
||||
//批量上传信息
|
||||
upload: {
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 是否更新已经存在的部门数据
|
||||
updateSupport: 0,
|
||||
// 设置上传的请求头部
|
||||
headers: { Authorization: "Bearer " + "getToken()" },
|
||||
// 上传的地址
|
||||
url:
|
||||
process.env.VUE_APP_BASE_API + `/growthAlbum/result/upload?modId=${this.topId}`,
|
||||
},
|
||||
// 选项列表
|
||||
listOfOptions: [],
|
||||
campusIds: "",
|
||||
stageS: "",
|
||||
classIds: "",
|
||||
gradeS: "",
|
||||
progress: 0,
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getSemester();
|
||||
this.getDynamicGrouping();
|
||||
this.getClassList();
|
||||
},
|
||||
methods: {
|
||||
// 新增
|
||||
fetchDataNewlyAdded() {
|
||||
this.controlData.forEach((icon, index) => {
|
||||
if (icon.formId === 6) {
|
||||
icon.vm = [];
|
||||
} else {
|
||||
icon.vm = "";
|
||||
}
|
||||
});
|
||||
this.campusIds = "";
|
||||
this.stageS = "";
|
||||
this.classIds = "";
|
||||
this.gradeS = "";
|
||||
this.form.userId = null;
|
||||
// 学生列表
|
||||
this.studentLis = [];
|
||||
// 班级列表
|
||||
this.classList = [];
|
||||
// 年级
|
||||
this.gradeList = [];
|
||||
// 学段列表
|
||||
this.academicStageList = [];
|
||||
this.form.key = null;
|
||||
this.form.result = {};
|
||||
this.form.during = null;
|
||||
this.form.key = this.topId;
|
||||
this.form.classId = "";
|
||||
this.progress = 0;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 重置
|
||||
reset() {
|
||||
this.bus.$emit("onCurrentContextmenuClick", {
|
||||
id: 0,
|
||||
path: this.$route.path,
|
||||
});
|
||||
},
|
||||
//
|
||||
search() {
|
||||
// 查学期
|
||||
if (this.levels == 1) {
|
||||
let vl = "";
|
||||
this.getStructureList(
|
||||
this.topId,
|
||||
this.query.pageNum,
|
||||
this.query.pageSize,
|
||||
vl,
|
||||
vl,
|
||||
this.searchData.value
|
||||
);
|
||||
// 查班级
|
||||
} else if (this.levels == 2) {
|
||||
let vl = "";
|
||||
this.getStructureList(
|
||||
this.topId,
|
||||
this.query.pageNum,
|
||||
this.query.pageSize,
|
||||
vl,
|
||||
this.searchData.value,
|
||||
vl
|
||||
);
|
||||
} else {
|
||||
console.log(this.searchData.value);
|
||||
let vl = "";
|
||||
this.getStructureList(
|
||||
this.topId,
|
||||
this.query.pageNum,
|
||||
this.query.pageSize,
|
||||
this.searchData.value,
|
||||
vl,
|
||||
vl
|
||||
);
|
||||
}
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm("确认关闭？")
|
||||
.then((_) => {
|
||||
done();
|
||||
})
|
||||
.catch((_) => {});
|
||||
},
|
||||
// 获取动态分组
|
||||
async getDynamicGrouping() {
|
||||
try {
|
||||
let res = await rqGetDynamicGrouping();
|
||||
if (res.code == 200) {
|
||||
this.dynamicGroupingData = res.data;
|
||||
// this.dynamicGroupingData.map((itme, index) => {});
|
||||
// 获取动态控件
|
||||
this.getDynamicControls(this.topId);
|
||||
console.log(this.topId);
|
||||
// 获取数据
|
||||
this.getStructureList(this.topId, this.query.pageNum, this.query.pageSize);
|
||||
// 获取结构
|
||||
this.getTitle(this.topId);
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 获取动态控件
|
||||
async getDynamicControls(id) {
|
||||
try {
|
||||
let res = await rqGetDynamicControls(id);
|
||||
if (res.code == 200) {
|
||||
const modifiedArray = res.data.map((obj) => {
|
||||
if (obj.formId === 6) {
|
||||
return { ...obj, vm: JSON.parse(obj.vm) };
|
||||
} else {
|
||||
return obj;
|
||||
}
|
||||
});
|
||||
this.controlData = modifiedArray;
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 获取学期
|
||||
async getSemester() {
|
||||
try {
|
||||
let res = await rqGetSemester();
|
||||
if (res.code == 200) {
|
||||
this.semester = res.data;
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
|
||||
// 选了班级id获取学生
|
||||
async getObtainingStudentInformation(id) {
|
||||
this.updateProgress();
|
||||
this.form.userId = "";
|
||||
console.log(555);
|
||||
try {
|
||||
let res = await rqObtainingStudentInformation(id);
|
||||
if (res.code == 200) {
|
||||
this.studentLis = res.data;
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 查询校区
|
||||
async getClassList() {
|
||||
try {
|
||||
let res = await rqGetClassList();
|
||||
if (res.code == 200) {
|
||||
this.shList = res.data;
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 选择学生
|
||||
selectingStudents() {
|
||||
this.updateProgress();
|
||||
},
|
||||
// 选择校区
|
||||
selectCampus() {
|
||||
this.updateProgress();
|
||||
},
|
||||
// 选择校区查询学段
|
||||
async selectACampusToSearchForStudentSegments(shDeptId) {
|
||||
this.updateProgress();
|
||||
// 学段
|
||||
this.stageS = "";
|
||||
// 班级
|
||||
this.classIds = "";
|
||||
// 年级
|
||||
this.gradeS = "";
|
||||
this.form.userId = "";
|
||||
this.form.classId = "";
|
||||
try {
|
||||
let res = await rqGetClassList(shDeptId);
|
||||
if (res.code == 200) {
|
||||
this.academicStageList = res.data;
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 选择学段查询年级
|
||||
async selectASegmentToSearchForAClass(academicStageID) {
|
||||
this.updateProgress();
|
||||
// 班级
|
||||
this.form.classId = "";
|
||||
// 年级
|
||||
this.gradeS = "";
|
||||
this.form.userId = "";
|
||||
try {
|
||||
let res = await rqGetClassList(academicStageID);
|
||||
if (res.code == 200) {
|
||||
this.gradeList = res.data;
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 根据年级查询班级
|
||||
async queryClassesBasedOnAcademicStage(academicStageID) {
|
||||
this.updateProgress();
|
||||
// 班级
|
||||
this.classIds = "";
|
||||
this.form.userId = "";
|
||||
this.form.classId = "";
|
||||
try {
|
||||
let res = await rqGetClassList(academicStageID);
|
||||
if (res.code == 200) {
|
||||
this.classList = res.data;
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 确定提交
|
||||
async confirmSubmissionOfForm() {
|
||||
this.$refs.ruleForm.validate(async (success) => {
|
||||
if (success) {
|
||||
let arr = this.controlData;
|
||||
const result = {};
|
||||
arr.forEach((item) => {
|
||||
if (item.vm !== null) {
|
||||
result[item.oid] = item.vm;
|
||||
}
|
||||
});
|
||||
let newJson = JSON.stringify(result);
|
||||
// console.log("result:", result);
|
||||
this.form.result = newJson;
|
||||
try {
|
||||
let res = await submitFormRequest(this.form);
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
message: this.form.id ? "修改成功" : "添加成功",
|
||||
type: "success",
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
this.getStructureList(this.topId, this.query.pageNum, this.query.pageSize);
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
} catch (error) {
|
||||
this.dialogVisible = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取表结构popo列表数据
|
||||
async getStructureList(id, pageNum, pageSize, userId, classId, during) {
|
||||
this.loading = true;
|
||||
try {
|
||||
let result = await rqGetStructureList(
|
||||
id,
|
||||
pageNum,
|
||||
pageSize,
|
||||
userId,
|
||||
classId,
|
||||
during
|
||||
);
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
this.total = result.total;
|
||||
this.dataForm = result.data;
|
||||
if (!(userId || classId || during)) {
|
||||
this.listOfOptions = result.data;
|
||||
}
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 获取标题
|
||||
async getTitle(id) {
|
||||
this.loading = true;
|
||||
try {
|
||||
let result = await rqGetTitle(id);
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
this.columns = result.data;
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 删除数据表结构
|
||||
async deleteData(row) {
|
||||
try {
|
||||
let res = await rqDelStructureList(row.id);
|
||||
if (res.code == 200) {
|
||||
this.getStructureList(this.topId, this.query.pageNum, this.query.pageSize);
|
||||
this.$message.success("删除成功");
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
editData(row) {
|
||||
this.dialogVisible = true;
|
||||
this.form = { ...row };
|
||||
},
|
||||
// 导入
|
||||
/** 导入按钮操作 */
|
||||
handleImport() {
|
||||
this.upload.title = "导入";
|
||||
this.upload.open = true;
|
||||
},
|
||||
// 文件上传成功处理
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
this.upload.open = false;
|
||||
this.upload.isUploading = false;
|
||||
this.$refs.upload.clearFiles();
|
||||
this.$alert(
|
||||
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
||||
response.msg +
|
||||
"</div>",
|
||||
"导入结果",
|
||||
{ dangerouslyUseHTMLString: true }
|
||||
);
|
||||
this.getStructureList(this.topId, this.query.pageNum, this.query.pageSize);
|
||||
},
|
||||
// 上传课程失败
|
||||
failedToUploadCourse(response, file, fileList) {
|
||||
this.upload.open = false;
|
||||
this.upload.isUploading = false;
|
||||
this.$alert(
|
||||
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
||||
response.msg +
|
||||
"</div>",
|
||||
"导入结果",
|
||||
{ dangerouslyUseHTMLString: true }
|
||||
);
|
||||
},
|
||||
// 文件上传中处理
|
||||
handleFileUploadProgress(event, file, fileList) {
|
||||
this.upload.isUploading = true;
|
||||
},
|
||||
// 提交上传文件
|
||||
submitFileForm() {
|
||||
this.upload.headers.Authorization = this.getStoageUserTk();
|
||||
console.log("88888888888888888");
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
getStoageUserTk() {
|
||||
// console.log(sessionStorage.getItem("smart-campus:token") + "4444444444444");
|
||||
// return sessionStorage.getItem("smart-campus:token");
|
||||
console.log(Session.get("token"));
|
||||
return Session.get("token");
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(val) {
|
||||
this.query.pageNum = val;
|
||||
this.getStructureList(this.topId, this.query.pageNum, this.query.pageSize);
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(val) {
|
||||
this.query.pageSize = val;
|
||||
this.getStructureList(this.topId, this.query.pageNum, this.query.pageSize);
|
||||
},
|
||||
// 计算百分比
|
||||
updateProgress() {
|
||||
// 输入框数量
|
||||
let number = this.controlData.length;
|
||||
// 计算已经填写内容的输入框数量
|
||||
let filledInputs = 0;
|
||||
if (this.levels == 1) {
|
||||
number = number + 1;
|
||||
console.log(111111);
|
||||
let arr = [this.form.during];
|
||||
arr.forEach((item) => {
|
||||
item && filledInputs + 1;
|
||||
});
|
||||
console.log(arr);
|
||||
if (this.form.during) filledInputs++;
|
||||
} else if (this.levels == 2) {
|
||||
number = number + 5;
|
||||
let arr = [
|
||||
this.form.during,
|
||||
this.campusIds,
|
||||
this.stageS,
|
||||
this.form.classId,
|
||||
this.gradeS,
|
||||
];
|
||||
arr.forEach((item) => {
|
||||
item && filledInputs + 1;
|
||||
});
|
||||
console.log(arr);
|
||||
if (this.form.during) filledInputs++;
|
||||
if (this.campusIds) filledInputs++;
|
||||
if (this.stageS) filledInputs++;
|
||||
if (this.gradeS) filledInputs++;
|
||||
if (this.form.classId) filledInputs++;
|
||||
} else if (this.levels == 3) {
|
||||
number = number + 6;
|
||||
let arr = [
|
||||
this.form.during,
|
||||
this.campusIds,
|
||||
this.stageS,
|
||||
this.form.classId,
|
||||
this.form.userId,
|
||||
this.gradeS,
|
||||
];
|
||||
arr.forEach((item) => {
|
||||
item && filledInputs + 1;
|
||||
});
|
||||
console.log(arr);
|
||||
if (this.form.during) filledInputs++;
|
||||
if (this.campusIds) filledInputs++;
|
||||
if (this.stageS) filledInputs++;
|
||||
if (this.gradeS) filledInputs++;
|
||||
if (this.form.classId) filledInputs++;
|
||||
if (this.form.userId) filledInputs++;
|
||||
}
|
||||
|
||||
this.controlData.forEach((item) => {
|
||||
item.vm && filledInputs++;
|
||||
});
|
||||
// 计算进度百分比
|
||||
console.log(number);
|
||||
console.log(filledInputs);
|
||||
this.progress = (filledInputs / number) * 100;
|
||||
console.log(this.progress);
|
||||
},
|
||||
inputContentTriggering() {
|
||||
this.updateProgress();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.levels);
|
||||
console.log(this.topId + 22);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
s {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,20 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 获取基础校级班级学生图片
|
||||
export const rqGetPictures = (type) => request({
|
||||
url: `/growthAlbum/image/list?type=${type}`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
// 上传图片
|
||||
export const rqUploadImages = (data) => request({
|
||||
url: `/growthAlbum/image/group/save`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
|
||||
// 删除图片
|
||||
export const rqDeletePicture = (id) => request({
|
||||
url: `/growthAlbum/image/delImages?imageItemIds=${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="always" class="top">
|
||||
<h3>学校图片</h3>
|
||||
<el-upload
|
||||
name="img"
|
||||
:headers="$store.state.uploadHeader"
|
||||
:action="$store.state.imgUrl"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:file-list="schoolLevelImages"
|
||||
:on-change="changeUploadST"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<img width="100%" :src="dialogImageUrl" alt="" />
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
<el-card shadow="always" class="top">
|
||||
<h3>班级图片</h3>
|
||||
<el-upload
|
||||
name="img"
|
||||
:headers="$store.state.uploadHeader"
|
||||
:action="$store.state.imgUrl"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:file-list="classImages"
|
||||
:on-change="changeUploadCS"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<img width="100%" :src="dialogImageUrl" alt="" />
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
<el-card shadow="always" class="top">
|
||||
<h3>学生图片</h3>
|
||||
<el-upload
|
||||
name="img"
|
||||
:headers="$store.state.uploadHeader"
|
||||
:action="$store.state.imgUrl"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:file-list="studentImages"
|
||||
:on-change="changeUploadSt"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<img width="100%" :src="dialogImageUrl" alt="" />
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
<YUploadImg ref="YUploadImgref" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import YUploadImg from "@/components/YUploadImg/index.vue";
|
||||
import { rqGetPictures, rqUploadImages, rqDeletePicture } from "./api";
|
||||
export default {
|
||||
name: "pictureSetConfiguration",
|
||||
components: { YUploadImg },
|
||||
data() {
|
||||
return {
|
||||
dialogImageUrl: "",
|
||||
dialogVisible: false,
|
||||
// 校级图片
|
||||
schoolLevelImages: [],
|
||||
// 班级图片
|
||||
classImages: [],
|
||||
// 学生图片
|
||||
studentImages: [],
|
||||
// 上传的数据
|
||||
form: {
|
||||
files: [],
|
||||
type: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getSchoolLevelImages();
|
||||
this.getClassImages();
|
||||
this.getStudentImages();
|
||||
},
|
||||
methods: {
|
||||
async handleRemove(file, fileList) {
|
||||
try {
|
||||
console.log(file);
|
||||
let result = await rqDeletePicture(file.id);
|
||||
if (result.code == 200) {
|
||||
this.$message.success("删除成功");
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 获取校级图片
|
||||
async getSchoolLevelImages() {
|
||||
let type = "SCHOOL";
|
||||
try {
|
||||
let res = await rqGetPictures(type);
|
||||
if (res.code == 200) {
|
||||
const modifiedArray = res.data[0].imageList.map((obj) => {
|
||||
const { imageUrl, ...rest } = obj;
|
||||
return { url: imageUrl, ...rest };
|
||||
});
|
||||
|
||||
this.schoolLevelImages = modifiedArray;
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
//班级图片
|
||||
async getClassImages() {
|
||||
let type = "CLAZZ";
|
||||
try {
|
||||
let res = await rqGetPictures(type);
|
||||
if (res.code == 200) {
|
||||
const modifiedArray = res.data[0].imageList.map((obj) => {
|
||||
const { imageUrl, ...rest } = obj;
|
||||
return { url: imageUrl, ...rest };
|
||||
});
|
||||
this.classImages = modifiedArray;
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
//学生图片
|
||||
async getStudentImages() {
|
||||
let type = "STUDENT";
|
||||
try {
|
||||
let res = await rqGetPictures(type);
|
||||
if (res.code == 200) {
|
||||
const modifiedArray = res.data[0].imageList.map((obj) => {
|
||||
const { imageUrl, ...rest } = obj;
|
||||
return { url: imageUrl, ...rest };
|
||||
});
|
||||
this.studentImages = modifiedArray;
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
|
||||
// 上传之前的回调
|
||||
beforeAvatarUpload(file) {
|
||||
// 获取文件的后缀
|
||||
const suffix = file.name.substring(file.name.lastIndexOf(".") + 1);
|
||||
// 判断文件的大小
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
let accept = "jpg/png/gif/jpeg";
|
||||
const isLtType = accept.indexOf(suffix) >= 0;
|
||||
if (!isLtType) {
|
||||
this.$message.error("上传图片只能是jpg/png/gif/jpeg格式!");
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error("上传图片大小不能超过 2MB!");
|
||||
}
|
||||
return isLtType && isLt2M;
|
||||
},
|
||||
// 上传
|
||||
async Upload() {
|
||||
let json = "";
|
||||
let newJson = JSON.stringify(this.form);
|
||||
json = newJson;
|
||||
try {
|
||||
let result = await rqUploadImages(json);
|
||||
if (result.code == 200) {
|
||||
this.$message.success("新增成功");
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
|
||||
changeUploadST(file) {
|
||||
let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
|
||||
const isJPG = testmsg === "jpg";
|
||||
const isJPEG = testmsg === "jpeg";
|
||||
const isPNG = testmsg === "png";
|
||||
if (!isJPG && !isPNG && !isJPEG) {
|
||||
this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
let type = "SCHOOL";
|
||||
//一下操作是赋值给组件那边的
|
||||
this.$refs.YUploadImgref.form.type = type;
|
||||
this.$refs.YUploadImgref.option.img = file.url;
|
||||
this.$refs.YUploadImgref.option.name = file.name;
|
||||
this.$refs.YUploadImgref.dialogVisible = true;
|
||||
});
|
||||
},
|
||||
changeUploadCS(file) {
|
||||
let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
|
||||
const isJPG = testmsg === "jpg";
|
||||
const isJPEG = testmsg === "jpeg";
|
||||
const isPNG = testmsg === "png";
|
||||
if (!isJPG && !isPNG && !isJPEG) {
|
||||
this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
let type = "CLAZZ";
|
||||
//一下操作是赋值给组件那边的
|
||||
this.$refs.YUploadImgref.form.type = type;
|
||||
this.$refs.YUploadImgref.option.img = file.url;
|
||||
this.$refs.YUploadImgref.option.name = file.name;
|
||||
this.$refs.YUploadImgref.dialogVisible = true;
|
||||
});
|
||||
},
|
||||
changeUploadSt(file) {
|
||||
let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
|
||||
const isJPG = testmsg === "jpg";
|
||||
const isJPEG = testmsg === "jpeg";
|
||||
const isPNG = testmsg === "png";
|
||||
if (!isJPG && !isPNG && !isJPEG) {
|
||||
this.$message.error("上传图片只能是 JPG/JPEG 或 PNG 格式!");
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
let type = "STUDENT";
|
||||
//一下操作是赋值给组件那边的
|
||||
this.$refs.YUploadImgref.form.type = type;
|
||||
this.$refs.YUploadImgref.option.img = file.url;
|
||||
this.$refs.YUploadImgref.option.name = file.name;
|
||||
this.$refs.YUploadImgref.dialogVisible = true;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.top {
|
||||
margin-top: 30px;
|
||||
}
|
||||
/* 测试 */
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 获取基础校级班级学生图片
|
||||
export const rqGetPictures = (type) => request({
|
||||
url: `/growthAlbum/image/list?type=${type}`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
// 上传图片
|
||||
export const rqUploadImages = (data) => request({
|
||||
url: `/growthAlbum/image/group/save`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
|
||||
// 删除图片
|
||||
export const rqDeletePicture = (id) => request({
|
||||
url: `/growthAlbum/image/delImages?imageItemIds=${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
// 删除组
|
||||
export const rqDeleteGroup = (id) => request({
|
||||
url: `/growthAlbum/image/delGroups?imageGroupIds=${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
@@ -0,0 +1,20 @@
|
||||
export default [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "日期",
|
||||
prop: "date",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
{
|
||||
label: "内容描述",
|
||||
prop: "text",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
@@ -0,0 +1,332 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="hover">
|
||||
<CommonHead
|
||||
@search-data="searchForm"
|
||||
@reset-data="reset"
|
||||
@newly-data="add"
|
||||
></CommonHead>
|
||||
<!-- newly-data删除所选事件 -->
|
||||
<!-- reset-data重置表单内容 -->
|
||||
<!-- search-data搜索事件，接收被搜索的内容 -->
|
||||
</el-card>
|
||||
|
||||
<CommonTables
|
||||
style="margin-top: 10px"
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="List"
|
||||
></CommonTables>
|
||||
|
||||
<!-- 对话框 -->
|
||||
<el-dialog
|
||||
width="30%"
|
||||
:visible.sync="isVisible"
|
||||
:before-close="handleClose"
|
||||
title="管理画册"
|
||||
>
|
||||
<el-form
|
||||
ref="ruleForm"
|
||||
:rules="rules"
|
||||
:model="form"
|
||||
label-width="80px"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<el-form-item label="请选择日期" size="mini" prop="date" label-width="120px">
|
||||
<el-date-picker
|
||||
v-model="form.date"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="请输入内容" prop="text" label-width="120px">
|
||||
<el-input type="textarea" rows="3" placeholder="请输入内容" v-model="form.text">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传图片" prop="files" label-width="120px">
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
:action="$store.state.imgUrl"
|
||||
list-type="picture-card"
|
||||
name="img"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:file-list="schoolLevelImages"
|
||||
>
|
||||
<!-- <img v-if="form.files.length > 0" :src="form.files[0]" class="avatar" /> -->
|
||||
<!-- <i v-else class="el-icon-plus avatar-uploader-icon clss"></i> -->
|
||||
<i class="el-icon-plus avatar-uploader-icon clss"></i>
|
||||
<div slot="tip" class="el-upload__tip">
|
||||
只能上传jpg/png/gif/jpeg文件，且不超过500kb
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel" size="mini">取 消</el-button>
|
||||
<el-button @click="modifyLetterStatus" size="mini" type="primary">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 分页器 -->
|
||||
<!-- <el-pagination
|
||||
style="margin-top: 10px"
|
||||
:current-page="1"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="10"
|
||||
:pager-count="7"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
>
|
||||
</el-pagination>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<img width="100%" :src="dialogImageUrl" alt="" />
|
||||
</el-dialog> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import columns from "./columns";
|
||||
import { rqGetPictures, rqUploadImages, rqDeletePicture, rqDeleteGroup } from "./api";
|
||||
export default {
|
||||
name: "schoolAlbumManagement",
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
List: [],
|
||||
// 弹出层
|
||||
isVisible: false,
|
||||
form: {
|
||||
type: "SCHOOL",
|
||||
text: "", //内容描述
|
||||
date: null, // 时间
|
||||
files: [], // 图片
|
||||
},
|
||||
// 表单验证
|
||||
rules: {
|
||||
date: [{ required: true, message: "请选择日期", trigger: "change" }],
|
||||
text: [{ required: true, message: "请填写内容", trigger: "change" }],
|
||||
},
|
||||
srcList: [
|
||||
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
||||
],
|
||||
// 分页数据总条数
|
||||
total: 10,
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
},
|
||||
dialogImageUrl: "",
|
||||
dialogVisible: false,
|
||||
// 校级图片
|
||||
schoolLevelImages: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getSchoolLevelImages();
|
||||
},
|
||||
methods: {
|
||||
// 搜索按钮
|
||||
searchForm() {
|
||||
this.$message("正在搜索");
|
||||
},
|
||||
// 删除
|
||||
async deleteData(row) {
|
||||
console.log("------------------------------------------");
|
||||
console.log(row);
|
||||
try {
|
||||
let result = await rqDeleteGroup(row.id);
|
||||
if (result.code == 200) {
|
||||
this.$message.success("删除成功");
|
||||
this.getSchoolLevelImages();
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 编辑
|
||||
editData(item) {
|
||||
this.isVisible = true;
|
||||
const result = this.List.find((items) => items.id === item.id);
|
||||
console.log(item);
|
||||
console.log(result);
|
||||
this.form.imageGroupId = result.id;
|
||||
console.log(this.form);
|
||||
this.form.text = result.text;
|
||||
this.form.date = result.date;
|
||||
this.schoolLevelImages = result.imageList.map((item) => ({
|
||||
url: item.imageUrl,
|
||||
id: item.id,
|
||||
}));
|
||||
|
||||
// this.form.files.push(this.schoolLevelImages.url);
|
||||
// this.schoolLevelImages.forEach((item) => {
|
||||
// this.form.files.push(item.url);
|
||||
// });
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
this.bus.$emit("onCurrentContextmenuClick", {
|
||||
id: 0,
|
||||
path: this.$route.path,
|
||||
});
|
||||
},
|
||||
add() {
|
||||
this.form.files = [];
|
||||
(this.form.text = ""), (this.form.date = null);
|
||||
setTimeout(() => {
|
||||
// 调用 el-upload 组件的 clearFiles 方法
|
||||
this.$refs.uploadRef.clearFiles();
|
||||
}, 10);
|
||||
this.isVisible = true;
|
||||
},
|
||||
// 确定新增或者编辑
|
||||
modifyLetterStatus() {
|
||||
this.$refs.ruleForm.validate(async (success) => {
|
||||
if (success) {
|
||||
this.isVisible = false;
|
||||
let result = await rqUploadImages(this.form);
|
||||
if (result.code == 200) {
|
||||
this.$message({
|
||||
message: this.form.imageGroupId ? "修改成功" : "添加成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getSchoolLevelImages();
|
||||
this.form = {
|
||||
type: "SCHOOL",
|
||||
text: "", //内容描述
|
||||
date: null, // 时间
|
||||
files: [], // 图片
|
||||
};
|
||||
} else if (result.code == 500) {
|
||||
if (this.form.imageGroupId) {
|
||||
return;
|
||||
} else {
|
||||
this.$message({
|
||||
message: result.msg,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.form.imageGroupId ? "修改失败" : "添加失败",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击分页器页码
|
||||
currentChange(val) {
|
||||
this.pagination.pageNum = val;
|
||||
},
|
||||
// 点击显示条数
|
||||
sizeChange(val) {
|
||||
this.pagination.pageSize = val;
|
||||
},
|
||||
//上传图片方法和回调
|
||||
handleAvatarSuccess(res, file) {
|
||||
console.log(res.data);
|
||||
this.form.files.push(res.data);
|
||||
},
|
||||
// 上传之前的回调
|
||||
beforeAvatarUpload(file) {
|
||||
// 获取文件的后缀
|
||||
const suffix = file.name.substring(file.name.lastIndexOf(".") + 1);
|
||||
// 判断文件的大小
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
let accept = "jpg/png/gif/jpeg";
|
||||
const isLtType = accept.indexOf(suffix) >= 0;
|
||||
if (!isLtType) {
|
||||
this.$message.error("上传头像图片只能是jpg/png/gif/jpeg格式!");
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||||
}
|
||||
return isLtType && isLt2M;
|
||||
},
|
||||
async handleRemove(file, fileList) {
|
||||
if (file.id) {
|
||||
try {
|
||||
let result = await rqDeletePicture(file.id);
|
||||
if (result.code == 200) {
|
||||
this.$message.success("删除成功");
|
||||
this.getSchoolLevelImages();
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 使用 findIndex 方法查找目标值的索引
|
||||
console.log(file);
|
||||
const index = this.form.files.findIndex((value) =>
|
||||
value === file.response ? file.response : file.url
|
||||
);
|
||||
console.log(index);
|
||||
// 如果找到匹配的值，将其从数组中删除
|
||||
if (index !== -1) {
|
||||
console.log(55);
|
||||
this.form.files.splice(index, 1);
|
||||
}
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
this.dialogImageUrl = file.url;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 获取校级图片
|
||||
async getSchoolLevelImages() {
|
||||
let type = "SCHOOL";
|
||||
try {
|
||||
let res = await rqGetPictures(type);
|
||||
if (res.code == 200) {
|
||||
this.List = res.data[0].imageGroupList;
|
||||
this.List.forEach((item) => {
|
||||
item.date = this.formatDate(item.date, "-", "year");
|
||||
});
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm("确认关闭？")
|
||||
.then((_) => {
|
||||
this.form.files = [];
|
||||
done();
|
||||
})
|
||||
.catch((_) => {});
|
||||
},
|
||||
cancel() {
|
||||
this.form.files = [];
|
||||
this.isVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 4px dashed #d9d9d9 !important;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-table :data="tableData" style="width: 100%" height="650" size="mini">
|
||||
<el-table-column
|
||||
v-if="column.label !== 'id'"
|
||||
align="center"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="column.type === 'text'"> {{ scope.row[column.prop] }}</span>
|
||||
<div v-else-if="column.type === 'status'">
|
||||
<el-tag size="small" type="success" v-if="scope.row[column.prop] == 1"
|
||||
>开启</el-tag
|
||||
>
|
||||
<el-tag size="small" type="danger" v-else-if="scope.row[column.prop] == 0"
|
||||
>关闭</el-tag
|
||||
>
|
||||
</div>
|
||||
<div v-else-if="column.type === 'image'">
|
||||
<img style="width: 200px; height: 100px" :src="scope.row[column.prop]" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-popconfirm @confirm="handleDelete(scope.row)" :title="'确定要删除吗？'">
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "TablesRules",
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
console.log(row);
|
||||
this.editFunc(row);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
type: column.type,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,38 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
|
||||
// 获取规则列表没有分页
|
||||
export const rqGetRuleList = (pageNum,pageSize) => request({
|
||||
url: `/growthAlbum/rules/get?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
// 添加兴趣班
|
||||
export const rqAModifyOrAddRules = (data) => {
|
||||
if(data.id){
|
||||
return request({
|
||||
url: '/growthAlbum/rules/update',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}else{
|
||||
return request({
|
||||
url: '/growthAlbum/rules/add',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//删除规则
|
||||
export const rqDeleteRules = (id) => request({
|
||||
url: `/growthAlbum/rules/delete/?id=${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
|
||||
// 获取动态分组
|
||||
export const rqGetDynamicGrouping = () => request({
|
||||
url: `/growthAlbum/forms/getModList`,
|
||||
method: 'get',
|
||||
})
|
||||
@@ -0,0 +1,35 @@
|
||||
export default [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "学生成绩",
|
||||
prop: "modName",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
{
|
||||
label: "起始值",
|
||||
prop: "startNum",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "结束值",
|
||||
prop: "endNum",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
label: "描述",
|
||||
prop: "conversion",
|
||||
type: "text",
|
||||
},
|
||||
|
||||
{
|
||||
label: "是否开启",
|
||||
prop: "status",
|
||||
type: "status",
|
||||
},
|
||||
|
||||
]
|
||||
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover">
|
||||
<CommonHead
|
||||
@search-data="searchForm"
|
||||
@reset-data="reset"
|
||||
@newly-data="add"
|
||||
></CommonHead>
|
||||
<!-- newly-data删除所选事件 -->
|
||||
<!-- reset-data重置表单内容 -->
|
||||
<!-- search-data搜索事件，接收被搜索的内容 -->
|
||||
</el-card>
|
||||
|
||||
<TablesRules
|
||||
v-loading="loading"
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="ruleList"
|
||||
></TablesRules>
|
||||
|
||||
<Pagination
|
||||
:total="total"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 对话框 -->
|
||||
<el-dialog
|
||||
:title="form.id ? '修改规则' : '新增规则'"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
:rules="rules"
|
||||
label-position="right"
|
||||
ref="ruleForm"
|
||||
label-width="80px"
|
||||
:model="form"
|
||||
>
|
||||
<el-form-item size="mini" label="选择设置范围" prop="modId" label-width="120px">
|
||||
<div class="block">
|
||||
<el-select v-model="form.modId" placeholder="请选择设置范围">
|
||||
<el-option
|
||||
v-for="(item, index) in dynamicGroupingData"
|
||||
:label="item.label"
|
||||
:value="item.modId"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="起始值" prop="startNum">
|
||||
<div class="block">
|
||||
<el-slider v-model="form.startNum" :max="200" show-input> </el-slider>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="结束值" prop="endNum">
|
||||
<div class="block">
|
||||
<el-slider v-model="form.endNum" :max="200" show-input> </el-slider>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="描述" prop="conversion">
|
||||
<el-input v-model="form.conversion" placeholder="请选择输入描述内容"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="95px" size="mini" label="是否开启" prop="status">
|
||||
<el-radio v-model="form.status" :label="1">开启</el-radio>
|
||||
<el-radio v-model="form.status" :label="0">关闭</el-radio>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false" size="mini">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmSettingRules" size="mini"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import columns from "./columns";
|
||||
import TablesRules from "./TablesRules";
|
||||
import {
|
||||
rqGetRuleList,
|
||||
rqAModifyOrAddRules,
|
||||
rqDeleteRules,
|
||||
rqGetDynamicGrouping,
|
||||
} from "./api";
|
||||
|
||||
export default {
|
||||
name: "setScoreRules",
|
||||
components: { TablesRules },
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
total: 0,
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
loading: false,
|
||||
ruleList: [],
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
// 范围id
|
||||
modId: null,
|
||||
// 起始值
|
||||
startNum: 0,
|
||||
// 结束值
|
||||
endNum: 0,
|
||||
// 描述
|
||||
conversion: "",
|
||||
// 是否开启
|
||||
status: "",
|
||||
},
|
||||
// modid
|
||||
dynamicGroupingData: [],
|
||||
// 对话框表单验证
|
||||
rules: {
|
||||
modId: [{ required: true, message: "请选择设置范围", trigger: "change" }],
|
||||
startNum: [{ required: true, message: "请输入起始值", trigger: "change" }],
|
||||
endNum: [{ required: true, message: "请输入结束值", trigger: "change" }],
|
||||
conversion: [{ required: true, message: "请输入描述", trigger: "change" }],
|
||||
status: [{ required: true, message: "请选择是否开启", trigger: "change" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getRuleList();
|
||||
this.getDynamicGrouping();
|
||||
console.log(555);
|
||||
},
|
||||
methods: {
|
||||
// 搜索按钮
|
||||
searchForm() {
|
||||
this.$message("正在搜索");
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
this.bus.$emit("onCurrentContextmenuClick", {
|
||||
id: 0,
|
||||
path: this.$route.path,
|
||||
});
|
||||
},
|
||||
// 添加
|
||||
add() {
|
||||
console.log(888);
|
||||
this.dialogVisible = true;
|
||||
// 清除数据
|
||||
this.form = {
|
||||
// 范围id
|
||||
modId: null,
|
||||
// 起始值
|
||||
startNum: 0,
|
||||
// 结束值
|
||||
endNum: 0,
|
||||
// 描述
|
||||
conversion: "",
|
||||
// 是否开启
|
||||
status: "",
|
||||
};
|
||||
},
|
||||
// 删除
|
||||
async deleteData(row) {
|
||||
console.log(row.id);
|
||||
let res = await rqDeleteRules(row.id);
|
||||
if (res.code == 200) {
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getRuleList();
|
||||
} else {
|
||||
this.$message({
|
||||
message: "删除失败",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
console.log(row);
|
||||
},
|
||||
// 编辑
|
||||
editData(item) {
|
||||
this.dialogVisible = true;
|
||||
this.form = { ...item };
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(val) {
|
||||
this.query.pageNum = val;
|
||||
this.getRuleList();
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(val) {
|
||||
this.query.pageSize = val;
|
||||
this.getRuleList();
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm("确认关闭？")
|
||||
.then((_) => {
|
||||
done();
|
||||
})
|
||||
.catch((_) => {});
|
||||
},
|
||||
// 获取规则列表
|
||||
async getRuleList() {
|
||||
try {
|
||||
this.loading = true;
|
||||
let result = await rqGetRuleList(this.query.pageNum, this.query.pageSize); //做了分页
|
||||
// let result = await rqGetRuleList();
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
|
||||
this.ruleList = result.data;
|
||||
this.total = result.total;
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 确认新增或者修改按钮
|
||||
confirmSettingRules() {
|
||||
this.$refs.ruleForm.validate(async (success) => {
|
||||
if (success) {
|
||||
this.dialogVisible = false;
|
||||
let result = await rqAModifyOrAddRules(this.form);
|
||||
if (result.code == 200) {
|
||||
this.$message({
|
||||
message: this.form.id ? "修改成功" : "添加成功",
|
||||
type: "success",
|
||||
});
|
||||
this.getRuleList();
|
||||
this.form = {};
|
||||
} else {
|
||||
this.$message.error("添加失败");
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取动态分组
|
||||
async getDynamicGrouping() {
|
||||
try {
|
||||
let res = await rqGetDynamicGrouping();
|
||||
if (res.code == 200) {
|
||||
this.dynamicGroupingData = res.data;
|
||||
} else {
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,193 @@
|
||||
.home {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.home .home-card-more {
|
||||
float: right;
|
||||
padding: 3px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.home .home-card-time {
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
width: 130px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.home .user-item {
|
||||
height: 198px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.home .user-item .user-item-left {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.home .user-item .user-item-left img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.home .user-item .user-item-right {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.home .user-item .user-item-right .right-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.home .user-item .user-item-right .right-l-v {
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.home .user-item .user-item-right .right-l-v .right-label {
|
||||
color: var(--prev-color-text-regular);
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.home .user-item .user-item-right .right-l-v .right-value {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.home .info {
|
||||
height: 198px;
|
||||
}
|
||||
|
||||
.home .info .info-scroll {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.home .info .info-scroll .info-ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.home .info .info-scroll .info-ul .info-item {
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
color: var(--prev-color-text-regular);
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.home .info .info-scroll .info-ul .info-item:hover {
|
||||
color: var(--prev-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.home .info .info-scroll .info-ul .info-item .info-item-left {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.home .info .info-scroll .info-ul .info-item .info-item-right {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.home .home-recommend-row .home-recommend {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
color: var(--prev-color-text-white);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.home .home-recommend-row .home-recommend:hover i {
|
||||
right: 0px !important;
|
||||
bottom: 0px !important;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
|
||||
.home .home-recommend-row .home-recommend i {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
font-size: 70px;
|
||||
transform: rotate(-30deg);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
|
||||
.home .home-recommend-row .home-recommend .home-recommend-auto {
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5%;
|
||||
}
|
||||
|
||||
.home .home-recommend-row .home-recommend .home-recommend-auto .home-recommend-msg {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.home .charts {
|
||||
width: 100%;
|
||||
height: 282.6px;
|
||||
display: flex;
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.home .charts .charts-left {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.home .charts .charts-right {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.home .home-charts {
|
||||
height: 282.6px;
|
||||
}
|
||||
|
||||
.home .home-charts .home-charts-item {
|
||||
background-color: var(--prev-bg-main-color);
|
||||
padding: 19px 15px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.home .home-charts .home-charts-item:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.home .home-charts .home-charts-item:hover .home-charts-item-right i {
|
||||
transform: rotate(45deg);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
|
||||
.home .home-charts .home-charts-item .home-charts-item-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.home .home-charts .home-charts-item .home-charts-item-left .home-charts-item-title {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.home .home-charts .home-charts-item .home-charts-item-left .home-charts-item-num {
|
||||
font-size: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.home .home-charts .home-charts-item .home-charts-item-right i {
|
||||
font-size: 20px;
|
||||
padding: 8px;
|
||||
border-radius: 100%;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
.home{width:100%;overflow:hidden}.home .home-card-more{float:right;padding:3px 0;font-size:13px}.home .home-card-time{float:right;font-size:13px;width:130px;margin-top:-4px}.home .user-item{height:198px;display:flex;align-items:center}.home .user-item .user-item-left{width:130px;height:130px;border-radius:4px;overflow:hidden}.home .user-item .user-item-left img{width:100%;height:100%}.home .user-item .user-item-right{flex:1;padding:15px}.home .user-item .user-item-right .right-title{font-size:20px}.home .user-item .user-item-right .right-l-v{font-size:13px;display:flex}.home .user-item .user-item-right .right-l-v .right-label{color:var(--prev-color-text-regular);width:40px}.home .user-item .user-item-right .right-l-v .right-value{flex:1}.home .info{height:198px}.home .info .info-scroll{height:100%;overflow:hidden}.home .info .info-scroll .info-ul{list-style:none}.home .info .info-scroll .info-ul .info-item{display:flex;font-size:13px;color:var(--prev-color-text-regular);height:28px;line-height:28px}.home .info .info-scroll .info-ul .info-item:hover{color:var(--prev-color-primary);cursor:pointer}.home .info .info-scroll .info-ul .info-item .info-item-left{flex:1;flex-shrink:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.home .info .info-scroll .info-ul .info-item .info-item-right{width:60px;text-align:right}.home .home-recommend-row .home-recommend{position:relative;height:100px;color:var(--prev-color-text-white);border-radius:4px;overflow:hidden;cursor:pointer}.home .home-recommend-row .home-recommend:hover i{right:0px !important;bottom:0px !important;transition:all ease 0.3s}.home .home-recommend-row .home-recommend i{position:absolute;right:-10px;bottom:-10px;font-size:70px;transform:rotate(-30deg);transition:all ease 0.3s}.home .home-recommend-row .home-recommend .home-recommend-auto{padding:15px;position:absolute;left:0;top:5%}.home .home-recommend-row .home-recommend .home-recommend-auto .home-recommend-msg{font-size:12px;margin-top:10px}.home .charts{width:100%;height:282.6px;display:flex;padding:12px 15px}.home .charts .charts-left{flex:1;height:100%}.home .charts .charts-right{flex:1;height:100%}.home .home-charts{height:282.6px}.home .home-charts .home-charts-item{background-color:var(--prev-bg-main-color);padding:19px 15px;border-radius:2px;display:flex;align-items:center;margin-bottom:12px;cursor:pointer}.home .home-charts .home-charts-item:last-of-type{margin-bottom:0}.home .home-charts .home-charts-item:hover .home-charts-item-right i{transform:rotate(45deg);transition:all ease 0.3s}.home .home-charts .home-charts-item .home-charts-item-left{flex:1}.home .home-charts .home-charts-item .home-charts-item-left .home-charts-item-title{font-size:13px}.home .home-charts .home-charts-item .home-charts-item-left .home-charts-item-num{font-size:20px;margin-top:5px}.home .home-charts .home-charts-item .home-charts-item-right i{font-size:20px;padding:8px;border-radius:100%;transition:all ease 0.3s}
|
||||
@@ -0,0 +1,170 @@
|
||||
.home {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.home-card-more {
|
||||
float: right;
|
||||
padding: 3px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.home-card-time {
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
width: 130px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.user-item {
|
||||
height: 198px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-item-left {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.user-item-right {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
.right-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
.right-l-v {
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
.right-label {
|
||||
color: var(--prev-color-text-regular);
|
||||
width: 40px;
|
||||
}
|
||||
.right-value {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.info {
|
||||
height: 198px;
|
||||
.info-scroll {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.info-ul {
|
||||
list-style: none;
|
||||
.info-item {
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
color: var(--prev-color-text-regular);
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
&:hover {
|
||||
color: var(--prev-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
.info-item-left {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.info-item-right {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-recommend-row {
|
||||
.home-recommend {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
color: var(--prev-color-text-white);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
i {
|
||||
right: 0px !important;
|
||||
bottom: 0px !important;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
font-size: 70px;
|
||||
transform: rotate(-30deg);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
.home-recommend-auto {
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5%;
|
||||
.home-recommend-msg {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.charts {
|
||||
width: 100%;
|
||||
height: 282.6px;
|
||||
display: flex;
|
||||
padding: 12px 15px;
|
||||
.charts-left {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.charts-right {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.home-charts {
|
||||
height: 282.6px;
|
||||
.home-charts-item {
|
||||
background-color: var(--prev-bg-main-color);
|
||||
padding: 19px 15px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:hover {
|
||||
.home-charts-item-right {
|
||||
i {
|
||||
transform: rotate(45deg);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-charts-item-left {
|
||||
flex: 1;
|
||||
.home-charts-item-title {
|
||||
font-size: 13px;
|
||||
}
|
||||
.home-charts-item-num {
|
||||
font-size: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.home-charts-item-right {
|
||||
i {
|
||||
font-size: 20px;
|
||||
padding: 8px;
|
||||
border-radius: 100%;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<!-- 用户信息 -->
|
||||
<el-row :gutter="15">
|
||||
<el-col :md="24" :lg="24" :xl="24" class="mb15">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>{{ $t("message.card.title1") }}</span>
|
||||
</div>
|
||||
<div class="user-item">
|
||||
<div class="user-item-left">
|
||||
<img :src="userInformation.avatar" />
|
||||
</div>
|
||||
<div class="user-item-right overflow">
|
||||
<el-row>
|
||||
<el-col :span="24" class="right-title mb15 one-text-overflow"
|
||||
>{{ currentTime }}，{{ userInformation.name }}，{{ dailyMessage }}
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-col :xs="12" :sm="12" :md="8" class="right-l-v">
|
||||
<div class="right-label">昵称：</div>
|
||||
<div class="right-value">{{ userInformation.name }}</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="16" class="right-l-v">
|
||||
<div class="right-label">身份：</div>
|
||||
<div class="right-value">
|
||||
{{ identity }}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mt5">
|
||||
<el-col :xs="12" :sm="12" :md="8" class="right-l-v">
|
||||
<div class="right-label one-text-overflow">电话：</div>
|
||||
<div class="right-value one-text-overflow">
|
||||
{{ userInformation.mobile }}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mt15">
|
||||
<el-button size="small" icon="el-icon-edit-outline"
|
||||
>修改信息
|
||||
</el-button>
|
||||
<el-button size="small" icon="el-icon-position" type="primary"
|
||||
>发布活动</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- 消息通知 -->
|
||||
<!-- <el-col :md="24" :lg="8" :xl="8" class="mb15">
|
||||
<el-card shadow="hover">
|
||||
<div slot="header">
|
||||
<span>{{ $t("message.card.title2") }}</span>
|
||||
<el-button class="home-card-more" type="text" @click="onOpenGitee">{{
|
||||
$t("message.card.title3")
|
||||
}}</el-button>
|
||||
</div>
|
||||
<div class="info">
|
||||
<Scroll
|
||||
:data="newsInfoList"
|
||||
class="info-scroll"
|
||||
:class-option="optionSingleHeight"
|
||||
>
|
||||
<ul class="info-ul">
|
||||
<li
|
||||
v-for="(v, k) in newsInfoList"
|
||||
:key="k"
|
||||
class="info-item"
|
||||
@click="onNewsInfoListClick(v)"
|
||||
>
|
||||
<div class="info-item-left" v-text="v.title"></div>
|
||||
<div class="info-item-right" v-text="v.date"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</Scroll>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Scroll from "vue-seamless-scroll";
|
||||
import { Session } from "@/utils/storage";
|
||||
import { formatAxis, formatDate } from "@/utils/formatTime";
|
||||
import { newsInfoList, dailyMessage } from "./mock";
|
||||
import { useLoginApi } from "@/api/login";
|
||||
const LoginApi = useLoginApi();
|
||||
export default {
|
||||
name: "home",
|
||||
components: { Scroll },
|
||||
data() {
|
||||
return {
|
||||
newsInfoList,
|
||||
userInfo: {},
|
||||
dailyMessage: {},
|
||||
// 返回的用户信息
|
||||
userInformation: {
|
||||
roleList: [{ name: "" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.requestToObtainUserInformations();
|
||||
this.initDailyMessage();
|
||||
},
|
||||
computed: {
|
||||
currentTime() {
|
||||
return formatAxis(new Date());
|
||||
},
|
||||
identity() {
|
||||
return this.userInformation.roleList[0].name;
|
||||
},
|
||||
optionSingleHeight() {
|
||||
return {
|
||||
singleHeight: 28,
|
||||
limitMoveNum: 8,
|
||||
waitTime: 2000,
|
||||
};
|
||||
},
|
||||
getUserInfos() {
|
||||
return Session.get("setUserInfosDD");
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 随机语录
|
||||
initDailyMessage() {
|
||||
this.dailyMessage = dailyMessage[Math.floor(Math.random() * dailyMessage.length)];
|
||||
},
|
||||
|
||||
// 消息通知当前项点击
|
||||
onNewsInfoListClick(v) {
|
||||
window.open(v.link);
|
||||
},
|
||||
// 跳转到 gitee
|
||||
onOpenGitee() {
|
||||
window.open("https://www.baidu.com/");
|
||||
},
|
||||
// 获取登录信息
|
||||
async requestToObtainUserInformations() {
|
||||
try {
|
||||
let res = await LoginApi.requestToObtainUserInformation();
|
||||
console.log(res.data);
|
||||
this.userInformation = res.data;
|
||||
// 存储钉钉用户信息到浏览器缓存
|
||||
Session.set("userInfoDD", res.data);
|
||||
} catch (error) {
|
||||
Message.error("获取信息失败");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
|
||||
export const newsInfoList = [
|
||||
{
|
||||
title: '[发布]IT智能化及网络安全交付专家',
|
||||
date: '02/28',
|
||||
link: 'https://www.baidu.com/',
|
||||
},
|
||||
{
|
||||
title: '[发布]IT智能化及网络安全交付专家',
|
||||
date: '02/28',
|
||||
link: 'https://www.baidu.com/',
|
||||
},
|
||||
{
|
||||
title: '[发布]IT智能化及网络安全交付专家',
|
||||
date: '02/28',
|
||||
link: 'https://www.baidu.com/',
|
||||
},
|
||||
{
|
||||
title: '[发布]IT智能化及网络安全交付专家',
|
||||
date: '02/28',
|
||||
link: 'https://www.baidu.com/',
|
||||
},
|
||||
{
|
||||
title: '[发布]IT智能化及网络安全交付专家',
|
||||
date: '02/28',
|
||||
link: 'https://www.baidu.com/',
|
||||
},
|
||||
{
|
||||
title: '[发布]IT智能化及网络安全交付专家',
|
||||
date: '02/28',
|
||||
link: 'https://www.baidu.com/',
|
||||
},
|
||||
{
|
||||
title: '[发布]IT智能化及网络安全交付专家',
|
||||
date: '02/28',
|
||||
link: 'https://www.baidu.com/',
|
||||
},
|
||||
{
|
||||
title: '[发布]IT智能化及网络安全交付专家',
|
||||
date: '02/28',
|
||||
link: 'https://www.baidu.com/',
|
||||
},
|
||||
{
|
||||
title: '[发布]IT智能化及网络安全交付专家',
|
||||
date: '02/28',
|
||||
link: 'https://www.baidu.com/',
|
||||
},
|
||||
{
|
||||
title: '[发布]IT智能化及网络安全交付专家',
|
||||
date: '02/28',
|
||||
link: 'https://www.baidu.com/',
|
||||
},
|
||||
{
|
||||
title: '[发布]IT智能化及网络安全交付专家',
|
||||
date: '02/28',
|
||||
link: 'https://www.baidu.com/',
|
||||
},
|
||||
{
|
||||
title: '[发布]IT智能化及网络安全交付专家',
|
||||
date: '02/28',
|
||||
link: 'https://www.baidu.com/',
|
||||
},
|
||||
{
|
||||
title: '[发布]IT智能化及网络安全交付专家',
|
||||
date: '02/28',
|
||||
link: 'https://www.baidu.com/',
|
||||
},
|
||||
{
|
||||
title: '[发布]IT智能化及网络安全交付专家',
|
||||
date: '02/28',
|
||||
link: 'https://www.baidu.com/',
|
||||
},
|
||||
];
|
||||
|
||||
export const dailyMessage = [
|
||||
'祝你开心每一天！',
|
||||
'忙碌了一周，停一停脚步！',
|
||||
'世间美好，与你环环相扣！',
|
||||
'永远相信美好的事情即将发生！',
|
||||
'每一天，遇见更好的自己！',
|
||||
'保持热爱，奔赴山海！',
|
||||
'生活明朗，万物可爱！',
|
||||
'愿每一天醒来都是美好的开始！',
|
||||
'没有希望的地方，就没有奋斗！',
|
||||
'我最珍贵的时光都行走在路上！',
|
||||
'成功，往往住在失败的隔壁！',
|
||||
'人只要不失去方向，就不会失去自己！',
|
||||
'每条堵住的路，都有一个出口！',
|
||||
'没有谁能击垮你，除非你自甘堕落！',
|
||||
'微笑着的人并非没有痛苦！',
|
||||
'生活变的再糟糕，也不妨碍我变得更好！',
|
||||
'你要悄悄努力，然后惊艳众人！',
|
||||
];
|
||||
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div class="login-weaper">
|
||||
<div class="login-left">
|
||||
<div class="login-time">{{ time.txt }}</div>
|
||||
<div class="login-left-box">
|
||||
<div>
|
||||
<!-- <div class="logo">{{ getThemeConfig.globalViceTitle }}</div> -->
|
||||
<div class="logo">数字校园教育管理平台</div>
|
||||
<!-- <h2 class="title">{{ getThemeConfig.globalViceDes }}</h2> -->
|
||||
<h2 class="title">数字校园</h2>
|
||||
<div class="msg">
|
||||
<div class="msg-author">
|
||||
<span>{{ quotations.name }}</span>
|
||||
<span>{{ quotations.comeFrom }}</span>
|
||||
</div>
|
||||
<div class="msg-txt">{{ quotations.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-right">
|
||||
<div class="login-main">
|
||||
<!-- <h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4> -->
|
||||
<h4 class="login-title">数字校园教育管理平台</h4>
|
||||
<h5>请使用钉钉小程序扫码登录</h5>
|
||||
<div
|
||||
v-loading="loading"
|
||||
id="self_defined_element"
|
||||
class="self-defined-classname"
|
||||
></div>
|
||||
<div>版本:v2.2</div>
|
||||
<!-- 第三方登录友情链接 -->
|
||||
<!-- <div class="login-menu">
|
||||
<a href="javascript:;">{{ $t("message.login.link.one1") }}</a>
|
||||
<a href="javascript:;">{{ $t("message.login.link.one2") }}</a>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vue-particles">
|
||||
<vue-particles
|
||||
color="#dedede"
|
||||
shapeType="star"
|
||||
linesColor="#dedede"
|
||||
hoverMode="grab"
|
||||
clickMode="push"
|
||||
style="height: 100%"
|
||||
></vue-particles>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Session } from "@/utils/storage";
|
||||
import { formatDate, formatAxis } from "@/utils/formatTime";
|
||||
import { PrevLoading } from "@/utils/loading.js";
|
||||
import { quotationsList } from "./mock";
|
||||
import { useLoginApi } from "@/api/login";
|
||||
import { Message } from "element-ui";
|
||||
import dd from "dingtalk-jsapi";
|
||||
const LoginApi = useLoginApi();
|
||||
|
||||
export default {
|
||||
name: "login",
|
||||
data() {
|
||||
return {
|
||||
quotationsList,
|
||||
quotations: {},
|
||||
isView: false,
|
||||
submit: {
|
||||
loading: false,
|
||||
},
|
||||
ruleForm: {
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
code: "",
|
||||
uuid: "",
|
||||
},
|
||||
codeUrl: "",
|
||||
time: {
|
||||
txt: "",
|
||||
fun: null,
|
||||
},
|
||||
// 验证码开关
|
||||
captchaEnabled: true,
|
||||
|
||||
loading: true,
|
||||
access_token: "",
|
||||
userInformation: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 获取当前时间
|
||||
currentTime() {
|
||||
return formatAxis(new Date());
|
||||
},
|
||||
// 获取布局配置信息
|
||||
getThemeConfig() {
|
||||
return this.$store.state.themeConfig.themeConfig;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.initTime();
|
||||
},
|
||||
mounted() {
|
||||
this.ddlogin();
|
||||
this.initRandomQuotations();
|
||||
const _this = this;
|
||||
// dd.ready参数为回调函数，在环境准备就绪时触发，jsapi的调用需要保证在该回调函数触发后调用，否则无效。
|
||||
// 加上判断条件
|
||||
if (dd.env.platform != "notInDingTalk") {
|
||||
// 说明不是钉钉打开
|
||||
// 钉钉登录
|
||||
dd.runtime.permission.requestAuthCode({
|
||||
corpId: "dingibrrfjews8im0ois",
|
||||
onSuccess: (res) => {
|
||||
_this.loginToObtain(res.code);
|
||||
},
|
||||
onFail: function (err) {},
|
||||
});
|
||||
} else {
|
||||
console.log("不是钉钉打开");
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 2500);
|
||||
},
|
||||
methods: {
|
||||
// 随机语录
|
||||
initRandomQuotations() {
|
||||
this.quotations = this.quotationsList[
|
||||
Math.floor(Math.random() * this.quotationsList.length)
|
||||
];
|
||||
},
|
||||
|
||||
// 初始化左上角时间显示
|
||||
initTime() {
|
||||
this.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ");
|
||||
this.time.fun = setInterval(() => {
|
||||
this.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ");
|
||||
}, 1000);
|
||||
},
|
||||
// 获取thken登录
|
||||
async loginToObtain(authCode) {
|
||||
PrevLoading.start();
|
||||
try {
|
||||
let resultIoc = await LoginApi.loginToObtain(authCode);
|
||||
this.access_token = resultIoc.token_type + " " + resultIoc.access_token;
|
||||
Session.set("token", this.access_token);
|
||||
resultIoc.access_token && this.submitForm();
|
||||
} catch (error) {
|
||||
PrevLoading.done();
|
||||
Message.error("不是该组织成员");
|
||||
}
|
||||
},
|
||||
// 获取带thken获取用户信息
|
||||
async requestToObtainUserInformation() {
|
||||
try {
|
||||
let res = await LoginApi.requestToObtainUserInformation();
|
||||
this.userInformation = res.data;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
submitForm() {
|
||||
setTimeout(() => {
|
||||
let defaultRoles = [];
|
||||
let defaultAuthBtnList = [];
|
||||
// admin 页面权限标识，对应路由 meta.roles
|
||||
let adminRoles = ["admin"];
|
||||
// admin 按钮权限标识
|
||||
let adminAuthBtnList = ["btn.add", "btn.del", "btn.edit", "btn.link"];
|
||||
// common 页面权限标识，对应路由 meta.roles
|
||||
let testAuthPageList = ["common"];
|
||||
// test 按钮权限标识
|
||||
let testAuthBtnList = ["btn.add", "btn.link"];
|
||||
if (this.ruleForm.userName === "admin") {
|
||||
defaultRoles = adminRoles;
|
||||
defaultAuthBtnList = adminAuthBtnList;
|
||||
} else {
|
||||
defaultRoles = testAuthPageList;
|
||||
defaultAuthBtnList = testAuthBtnList;
|
||||
}
|
||||
const userInfos = {
|
||||
userName: this.ruleForm.userName === "admin" ? "admin" : "admin",
|
||||
photo:
|
||||
this.ruleForm.userName === "admin"
|
||||
? "https://img0.baidu.com/it/u=1833472230,3849481738&fm=253&fmt=auto?w=200&h=200"
|
||||
: "https://img2.baidu.com/it/u=2187913762,2708298335&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
|
||||
time: new Date().getTime(),
|
||||
roles: defaultRoles,
|
||||
authBtnList: defaultAuthBtnList,
|
||||
};
|
||||
this.requestToObtainUserInformation();
|
||||
setTimeout(() => {
|
||||
console.log(this.userInformation);
|
||||
// 存储 token 到浏览器缓存
|
||||
Session.set("token", this.access_token);
|
||||
// 存储用户信息到浏览器缓存
|
||||
Session.set("userInfo", userInfos);
|
||||
// 存储钉钉用户信息到浏览器缓存
|
||||
Session.set("userInfoDD", this.userInformation);
|
||||
// 存储用户信息到vuex
|
||||
this.$store.dispatch("userInfos/setUserInfos", userInfos);
|
||||
// 存储用户信息到钉钉vuex
|
||||
this.$store.dispatch("userInfos/setUserInfosDD", this.userInformation);
|
||||
this.$router.push("/");
|
||||
}, 3000);
|
||||
setTimeout(() => {
|
||||
this.$message.success(
|
||||
`${this.currentTime}，${this.$t("message.login.signInText")}`
|
||||
);
|
||||
}, 300);
|
||||
}, 300);
|
||||
},
|
||||
// 扫码登录
|
||||
ddlogin() {
|
||||
// STEP3：在需要的时候，调用 window.DTFrameLogin 方法构造登录二维码，并处理登录成功或失败的回调。
|
||||
window.DTFrameLogin(
|
||||
{
|
||||
id: "self_defined_element",
|
||||
width: 300,
|
||||
height: 300,
|
||||
},
|
||||
{
|
||||
redirect_uri: encodeURIComponent("http://localhost:9999/#/login"),
|
||||
// redirect_uri: encodeURIComponent("https://hxhl.lzyyj.com/#/login"),
|
||||
client_id: "dingxei2cpv2pfq9rmhx",
|
||||
scope: "openid",
|
||||
response_type: "code",
|
||||
state: "xxxxxxxxx",
|
||||
prompt: "consent",
|
||||
},
|
||||
(loginResult) => {
|
||||
const { redirectUrl, authCode, state } = loginResult;
|
||||
// 这里可以直接进行重定向
|
||||
// window.location.href = redirectUrl;
|
||||
this.loginToObtain(authCode);
|
||||
// 也可以在不跳转页面的情况下，使用code进行授权
|
||||
},
|
||||
(errorMsg) => {
|
||||
// 这里一般需要展示登录失败的具体原因
|
||||
alert(`Login Error: ${errorMsg}`);
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.time.fun);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
/* STEP2：指定这个包裹容器元素的CSS样式，尤其注意宽高的设置 */
|
||||
.self-defined-classname {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
.login {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
position: relative;
|
||||
.vue-particles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
ellipse at top left,
|
||||
rgba(105, 155, 200, 1) 0%,
|
||||
rgba(181, 197, 216, 1) 57%
|
||||
);
|
||||
}
|
||||
.login-weaper {
|
||||
margin: auto;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border: none;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
.login-left {
|
||||
width: 491px;
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
color: var(--prev-color-text-white);
|
||||
position: relative;
|
||||
background-color: var(--prev-color-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
.login-time {
|
||||
width: 100%;
|
||||
color: var(--prev-color-text-white);
|
||||
opacity: 0.9;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.login-left-box {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 80px 45px;
|
||||
.logo {
|
||||
font-size: 22px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.title {
|
||||
color: var(--prev-color-text-white);
|
||||
font-weight: 300;
|
||||
letter-spacing: 2px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.msg {
|
||||
color: var(--prev-color-text-white);
|
||||
font-size: 13px;
|
||||
margin-top: 35px;
|
||||
.msg-author {
|
||||
opacity: 0.6;
|
||||
span:last-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
.msg-txt {
|
||||
margin-top: 15px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-right {
|
||||
width: 491px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
background-color: var(--prev-bg-white);
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
.login-main {
|
||||
margin: 0 auto;
|
||||
width: 70%;
|
||||
.login-title {
|
||||
color: var(--prev-color-text-primary);
|
||||
margin-bottom: 40px;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
.login-form {
|
||||
margin: 10px 0;
|
||||
i {
|
||||
color: var(--prev-color-text-primary);
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 20px !important;
|
||||
.login-code {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin: 0 0 0 10px;
|
||||
user-select: none;
|
||||
.login-code-img {
|
||||
margin-top: 2px;
|
||||
width: 100px;
|
||||
height: 38px;
|
||||
border: 1px solid var(--prev-border-color-base);
|
||||
color: var(--prev-color-text-primary);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 5px;
|
||||
line-height: 38px;
|
||||
text-indent: 5px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.2s;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
border-color: var(--prev-border-color-hover);
|
||||
transition: all ease 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-submit {
|
||||
width: 100%;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-menu {
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
a {
|
||||
color: var(--prev-color-text-secondary);
|
||||
font-size: 12px;
|
||||
margin: 0 8px;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: var(--prev-color-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,38 @@
|
||||
export const quotationsList = [
|
||||
{
|
||||
name: '颜渊',
|
||||
comeFrom: '论语',
|
||||
content:
|
||||
'自己不喜欢的，就不要强加给别人。饥寒是自己不喜欢的，不要把它强加给别人；耻辱是自己不喜欢的，也不要把它强加给别人。将心比心，推己及人，从自己的利与害想到对别人的利与害，多替别人着想，这是终生应该奉行的原则。',
|
||||
},
|
||||
{
|
||||
name: '荀子',
|
||||
comeFrom: '劝学',
|
||||
content:
|
||||
'木料经过木工用墨线（木工用具）划直线加工以后，就变直了；金属物品在磨刀石上磨砺后，就能锋利。人经过学习磨练，自我反省，就会变得聪慧明智，不犯错误，也越来越坚强。',
|
||||
},
|
||||
{
|
||||
name: '里仁',
|
||||
comeFrom: '论语',
|
||||
content:
|
||||
'见到贤人，就应该想着向他学习；看见不贤的人，便应该自己反省，对不如自己的人喜欢讥笑、轻视，因而沾沾自喜；对比自己强的人喜欢贬低，甚至嫉妒、畏惧退缩，害怕与他们交往：这都是不正确的态度。',
|
||||
},
|
||||
{
|
||||
name: '述而',
|
||||
comeFrom: '论语',
|
||||
content:
|
||||
'君子心地平坦宽广，小人却经常局促忧愁。君子襟怀坦白，安贫乐业，与人为善，知足常乐，所以能坦荡荡。小人欲念太多，患得患失，忧心忡忡，怨天尤人，局促不安，所以常心怀戚戚。',
|
||||
},
|
||||
{
|
||||
name: '老子',
|
||||
comeFrom: '第六十四章',
|
||||
content:
|
||||
'千里遥远的路程是从脚下第一步开始的。任何事情的成功都是从头开始，从小到大逐渐积累的。万事开头难，没有个开头就不会有结果。任何事情都要从一点一滴的小事开始做起。',
|
||||
},
|
||||
{
|
||||
name: '朱熹',
|
||||
comeFrom: '训学斋规',
|
||||
content:
|
||||
'读书有三到，谓心到，眼到，口到。心不在此，则眼看不仔细，心眼既不专一，却只漫浪诵读，决不能记，久也不能久也。三到之中，心到最急，心既到矣，眼口岂不到乎？',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,69 @@
|
||||
import request from '@/utils/request'
|
||||
// get获取列表
|
||||
export function getOrders (params) {
|
||||
return request({
|
||||
url: '/moral/moral/listConfig',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
// 新增
|
||||
export function postAddOrders (data) {
|
||||
return request({
|
||||
url: '/moral/moral/saveConfig',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 修改
|
||||
export function putOrders (data) {
|
||||
return request({
|
||||
url: '/meetingAct/info/update',
|
||||
method: 'put',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function deleteOrders (id) {
|
||||
return request({
|
||||
url: '/meetingAct/info/delete',
|
||||
method: 'delete',
|
||||
params:{
|
||||
id
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function deleteData (id) {
|
||||
return request({
|
||||
url: `/moral/moral/deleteConfig?configIds=${id}`,
|
||||
method: 'get',
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// 获取审批人
|
||||
export function getApprover () {
|
||||
return request({
|
||||
url: '/meetingAct/info/getTeacher',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
// 查询班级列表
|
||||
export function getClass() {
|
||||
return request({
|
||||
url: '/moral/moral/evaluableGradeAndClassList',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
// 查询德育评价班级列表
|
||||
export function getMoraClass(superId) {
|
||||
return request({
|
||||
url: '/user-dept/user/dept/class',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-table :data="tableData" style="width: 100%" height="650" size="mini">
|
||||
<el-table-column
|
||||
v-if="
|
||||
column.label !== 'id' &&
|
||||
column.label !== 'targetRangeIds' &&
|
||||
column.label !== 'copyToUserIds' &&
|
||||
column.label !== 'evaluateUserIds'
|
||||
"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
:min-width="column.minWidth"
|
||||
></el-table-column>
|
||||
<el-table-column fixed="right" prop="zip" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-popconfirm @confirm="handleDelete(scope.row)" :title="'确定要删除？'">
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
name: "CommonTables",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
console.log("this.columns");
|
||||
console.log(this.columns);
|
||||
for (let i = 0; i < this.columns.length; i++) {
|
||||
console.log(this.columns[i].width);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row.id);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
console.log(row);
|
||||
this.editFunc(row);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
minWidth: column.minWidth ? column.minWidth : "",
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.s {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<!-- <el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form> -->
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTables
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTables>
|
||||
<!-- <Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/> -->
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="80px"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<el-form-item label="配置名称" prop="name">
|
||||
<el-input size="mini" v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="评价人" prop="evaluateUserIds">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="form.evaluateUserIds"
|
||||
placeholder="请选择评价人"
|
||||
multiple
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in approverArr"
|
||||
:key="item.userId"
|
||||
:label="item.name"
|
||||
:value="item.userId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="班级范围" prop="targetRangeIds">
|
||||
<el-cascader
|
||||
size="mini"
|
||||
@change="onChangeSelectTargetRange"
|
||||
:options="gradeArr"
|
||||
v-model="selectTargetRange"
|
||||
:clearable = "true"
|
||||
:props="{ multiple: true}"
|
||||
collapse-tags
|
||||
clearable></el-cascader>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="班级范围" prop="targetRangeIds">
|
||||
<treeselect
|
||||
size="mini"
|
||||
v-model="form.targetRangeIds"
|
||||
:options="options"
|
||||
:multiple="true"
|
||||
placeholder="请选择班级范围"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="班级范围">
|
||||
<el-cascader
|
||||
:options="options"
|
||||
:props="props"
|
||||
collapse-tags
|
||||
clearable></el-cascader>
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item label="抄送人" prop="copyToUserIds">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="form.copyToUserIds"
|
||||
placeholder="请选择抄送人"
|
||||
multiple
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in approverArr"
|
||||
:key="item.userId"
|
||||
:label="item.name"
|
||||
:value="item.userId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input size="mini" v-model="form.remark"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonTables from "./components/CommonTables.vue";
|
||||
import {
|
||||
postAddOrders,
|
||||
getOrders,
|
||||
putOrders,
|
||||
getApprover,
|
||||
getMoraClass,
|
||||
getClass,
|
||||
deleteData,
|
||||
} from "./api";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
components: {
|
||||
Treeselect,
|
||||
CommonTables,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: null, // 配置名称
|
||||
evaluateUserIds: null, // 评价人ID列表
|
||||
targetRangeIds: null, // 班级范围列表
|
||||
copyToUserIds: null, // 抄送领导列表
|
||||
remark: null, // 备注
|
||||
},
|
||||
props: { multiple: true },
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
},
|
||||
{
|
||||
label: "配置名称",
|
||||
prop: "name",
|
||||
},
|
||||
{
|
||||
label: "evaluateUserIds",
|
||||
prop: "evaluateUserIds",
|
||||
},
|
||||
{
|
||||
label: "评价人列表",
|
||||
prop: "evaluateUsereNameStr",
|
||||
},
|
||||
|
||||
{
|
||||
label: "targetRangeIds",
|
||||
prop: "targetRangeIds",
|
||||
},
|
||||
{
|
||||
label: "班级范围列表",
|
||||
prop: "targetRangeNameStr",
|
||||
},
|
||||
|
||||
{
|
||||
label: "copyToUserIds",
|
||||
prop: "copyToUserIds",
|
||||
},
|
||||
{
|
||||
label: "抄送领导列表",
|
||||
prop: "copyToUserNameStr",
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "remark",
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 50,
|
||||
},
|
||||
// total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: "新增", // 弹出层按钮
|
||||
rules: {
|
||||
name: [{ required: true, message: "请输入配置名称", trigger: "blur" }],
|
||||
evaluateUserIds: [{ required: true, message: "请选择评价人", trigger: "blur" }],
|
||||
targetRangeIds: [{ required: true, message: "请选择班级范围", trigger: "blur" }],
|
||||
copyToUserIds: [{ required: true, message: "请选择抄送领导", trigger: "blur" }],
|
||||
remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
|
||||
},
|
||||
approverArr: [], // 评价人抄送人列表
|
||||
gradeArr: [], // 年级
|
||||
selectTargetRange: null, // 班级范围
|
||||
// options: []
|
||||
options: [
|
||||
{
|
||||
id: "a",
|
||||
label: "a",
|
||||
children: [
|
||||
{
|
||||
id: "aa",
|
||||
label: "aa",
|
||||
},
|
||||
{
|
||||
id: "ab",
|
||||
label: "ab",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "b",
|
||||
label: "b",
|
||||
},
|
||||
{
|
||||
id: "c",
|
||||
label: "c",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getdata();
|
||||
|
||||
// 获取抄送人
|
||||
getApprover().then((res) => {
|
||||
this.approverArr = res.data;
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
onChangeSelectTargetRange(value) {
|
||||
// console.log(value)
|
||||
let arr = [];
|
||||
value.forEach((item, index) => {
|
||||
console.log(item);
|
||||
arr.push(item[item.length - 1]);
|
||||
});
|
||||
this.form.targetRangeIds = arr;
|
||||
},
|
||||
// 获取数据
|
||||
getdata() {
|
||||
getMoraClass().then((res) => {
|
||||
this.options = res.data.map((item) => {
|
||||
let obj = {
|
||||
id: item.deptId,
|
||||
label: item.deptName,
|
||||
children: [],
|
||||
};
|
||||
obj.children = item.children.map((it) => {
|
||||
let childrenobj = {
|
||||
id: it.deptId,
|
||||
label: it.deptName,
|
||||
};
|
||||
return childrenobj;
|
||||
});
|
||||
return obj;
|
||||
});
|
||||
console.log("this.gradeArr");
|
||||
console.log(this.options);
|
||||
});
|
||||
},
|
||||
// 点击确定提交
|
||||
onClickSubmit() {
|
||||
console.log(this.form);
|
||||
let obj = { ...this.form };
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
postAddOrders(obj)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.getList();
|
||||
this.resetForm();
|
||||
this.message();
|
||||
this.isVisible = false;
|
||||
} else {
|
||||
this.message(res.msg, "error");
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.message(err.data.msg, "error");
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = "新增";
|
||||
this.resetForm();
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
this.getList();
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
name: null, // 配置名称
|
||||
evaluateUserIds: null, // 评价人ID列表
|
||||
targetRangeIds: null, // 班级范围列表
|
||||
copyToUserIds: null, // 抄送领导列表
|
||||
remark: null, // 备注
|
||||
};
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.query.pageNum = 1;
|
||||
this.query.pageSize = 10;
|
||||
this.getList();
|
||||
},
|
||||
// 获取数据
|
||||
getList() {
|
||||
getOrders(this.query).then((res) => {
|
||||
console.log(res);
|
||||
this.data = res.data.map((item) => {
|
||||
// 处理抄送人
|
||||
if (item.copyToUserList && item.copyToUserList.length != 0) {
|
||||
let str = "";
|
||||
item.copyToUserList.forEach((it, ix) => {
|
||||
if (!ix) {
|
||||
str = it.name;
|
||||
} else {
|
||||
str = str + "," + it.name;
|
||||
}
|
||||
});
|
||||
item.copyToUserNameStr = str;
|
||||
}
|
||||
// 班级范围列表
|
||||
if (item.targetRangeList && item.targetRangeList.length != 0) {
|
||||
let str = "";
|
||||
item.targetRangeList.forEach((it, ix) => {
|
||||
if (!ix) {
|
||||
str = it.deptName;
|
||||
} else {
|
||||
str = str + "," + it.deptName;
|
||||
}
|
||||
});
|
||||
item.targetRangeNameStr = str;
|
||||
}
|
||||
// 评价人列表
|
||||
if (item.evaluateUserList && item.evaluateUserList.length != 0) {
|
||||
let str = "";
|
||||
item.evaluateUserList.forEach((it, ix) => {
|
||||
if (!ix) {
|
||||
str = it.name;
|
||||
} else {
|
||||
str = str + "," + it.name;
|
||||
}
|
||||
});
|
||||
item.evaluateUsereNameStr = str;
|
||||
}
|
||||
|
||||
return item;
|
||||
});
|
||||
// this.total = res.total
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
deleteData(row) {
|
||||
console.log(row);
|
||||
deleteData(row)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.getList();
|
||||
this.message(res.msg);
|
||||
} else {
|
||||
this.message(res.msg, "error");
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.message(err.data.msg, "error");
|
||||
});
|
||||
},
|
||||
// 编辑
|
||||
editData(item) {
|
||||
this.isVisible = true;
|
||||
this.title = "修改";
|
||||
this.resetForm();
|
||||
this.form = { ...item };
|
||||
// if(item.copyToUserIds){
|
||||
// this.form.copyToUserIds = JSON.parse(item.copyToUserIds).map( item =>{
|
||||
// return item.toString()
|
||||
// })
|
||||
// this.form.evaluateUserIds = JSON.parse(item.evaluateUserIds).map( item =>{
|
||||
// return item.toString()
|
||||
// })
|
||||
// }
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum) {
|
||||
console.log("点击切换页数" + pageNum);
|
||||
this.query.pageNum = pageNum;
|
||||
this.getList();
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize) {
|
||||
this.pageSize = pageSize;
|
||||
this.query.pageSize = pageSize;
|
||||
this.getList();
|
||||
console.log(pageSize);
|
||||
},
|
||||
message(message = "新增成功", type = "success") {
|
||||
// type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .treeselect-main {
|
||||
// width: 204px;
|
||||
// line-height: 28px;
|
||||
// .vue-treeselect__placeholder {
|
||||
// line-height: 28px;
|
||||
// }
|
||||
// .vue-treeselect__control {
|
||||
// height: 28px !important;
|
||||
// }
|
||||
// }
|
||||
.vueTreeSelectMini .vue-treeselect__control {
|
||||
height: 26px !important;
|
||||
}
|
||||
.vue-treeselect__multi-value {
|
||||
height: 26px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
import request from '@/utils/request'
|
||||
// get获取列表
|
||||
export function getOrders (params) {
|
||||
return request({
|
||||
url: '/moral/moral/listScore',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
// 新增
|
||||
export function postAddOrders (data) {
|
||||
return request({
|
||||
url: '/moral/moral/saveScore',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function deleteOrders (id) {
|
||||
return request({
|
||||
url: '/orders/delete',
|
||||
method: 'put',
|
||||
params:{
|
||||
id
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 查看订单缴费详情
|
||||
export function getUserOrders (orderId) {
|
||||
return request({
|
||||
url: '/userOrders/get',
|
||||
method: 'get',
|
||||
params:{
|
||||
orderId
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 查询班级列表
|
||||
export function getClass() {
|
||||
return request({
|
||||
url: '/moral/moral/evaluableGradeAndClassList',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
+112
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-table :data="tableData" style="width: 100%" height="650" size="mini">
|
||||
<el-table-column
|
||||
v-if="column.label !== 'id'"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
:min-width="column.minWidth"
|
||||
></el-table-column>
|
||||
<el-table-column prop="zip" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<!-- <el-popconfirm
|
||||
@confirm="handleDelete(scope.row)"
|
||||
:title="'确定要删除？'"
|
||||
>
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
name: "CommonTables",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
console.log("this.columns");
|
||||
console.log(this.columns);
|
||||
for (let i = 0; i < this.columns.length; i++) {
|
||||
console.log(this.columns[i].width);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row.id);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
console.log(row);
|
||||
this.editFunc(row);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
minWidth: column.minWidth ? column.minWidth : "",
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.s {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,491 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="日期" prop="date">
|
||||
<el-date-picker
|
||||
v-model="query.date"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="年级" prop="gradeId">
|
||||
<el-select
|
||||
@change="onChangeQueryGrade"
|
||||
v-model="query.gradeId"
|
||||
placeholder="请选择年级"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in gradeArr"
|
||||
:key="item.deptId"
|
||||
:label="item.deptName"
|
||||
:value="item.deptId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="班级" prop="classId">
|
||||
<el-select label="班级" v-model="query.classId" placeholder="请选择班级">
|
||||
<el-option
|
||||
v-for="item in queryClassArr"
|
||||
:key="item.deptId"
|
||||
:label="item.deptName"
|
||||
:value="item.deptId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTables
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTables>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<el-form-item label="日期" prop="date">
|
||||
<el-date-picker
|
||||
v-model="form.date"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择日期"
|
||||
:disabled="title == '修改德育评价'"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="年级" prop="gradeId">
|
||||
<el-select
|
||||
@change="onChangeGrade"
|
||||
v-model="form.gradeId"
|
||||
placeholder="请选择年级"
|
||||
:disabled="title == '修改德育评价'"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in gradeArr"
|
||||
:key="item.deptId"
|
||||
:label="item.deptName"
|
||||
:value="item.deptId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="班级" prop="classId">
|
||||
<el-select
|
||||
@change="onChangeClass"
|
||||
@focus="onFocusClass"
|
||||
label="班级"
|
||||
v-model="form.classId"
|
||||
placeholder="请选择班级"
|
||||
:disabled="title == '修改德育评价'"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classArr"
|
||||
:key="item.deptId"
|
||||
:label="item.deptName"
|
||||
:value="item.deptId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="晨检评分" prop="score01">
|
||||
<el-radio-group v-model="form.score01">
|
||||
<el-radio :label="3">优</el-radio>
|
||||
<el-radio :label="1">良</el-radio>
|
||||
<el-radio :label="-2">差</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="晨检备注" prop="remark01">
|
||||
<el-input
|
||||
size="mini"
|
||||
type="textarea"
|
||||
v-model="form.remark01"
|
||||
placeholder="请输入晨检评分备注"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="午检评分" prop="score02">
|
||||
<el-radio-group v-model="form.score02">
|
||||
<el-radio :label="3">优</el-radio>
|
||||
<el-radio :label="1">良</el-radio>
|
||||
<el-radio :label="-2">差</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="午检备注" prop="remark02">
|
||||
<el-input
|
||||
size="mini"
|
||||
type="textarea"
|
||||
v-model="form.remark02"
|
||||
placeholder="请输入午检评分备注"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="课间操评分" prop="score03">
|
||||
<el-radio-group v-model="form.score03">
|
||||
<el-radio :label="3">优</el-radio>
|
||||
<el-radio :label="1">良</el-radio>
|
||||
<el-radio :label="-2">差</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="课间操备注" prop="remark03">
|
||||
<el-input
|
||||
size="mini"
|
||||
type="textarea"
|
||||
v-model="form.remark03"
|
||||
placeholder="请输入课间操评分备注"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonTables from "./components/CommonTables.vue";
|
||||
import { postAddOrders, getOrders, putOrders, getClass } from "./api";
|
||||
export default {
|
||||
name: "moralEducationManagement",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
date: null, // 日期
|
||||
gradeId: null, // 年级
|
||||
classId: null, // 班级ID
|
||||
score01: null, // 01项评分
|
||||
remark01: null, // 01项打分备注
|
||||
score02: null, // 02项评分
|
||||
remark02: null, // 02项打分备注
|
||||
score03: null, // 03项评分
|
||||
remark03: null, // 03项打分备注
|
||||
// score: null, // 总分
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
},
|
||||
{
|
||||
label: "日期",
|
||||
prop: "date",
|
||||
},
|
||||
{
|
||||
label: "班级Id",
|
||||
prop: "classId",
|
||||
},
|
||||
{
|
||||
label: "班级",
|
||||
prop: "className",
|
||||
},
|
||||
{
|
||||
label: "班主任",
|
||||
prop: "leader",
|
||||
},
|
||||
{
|
||||
label: "晨检评分",
|
||||
prop: "score01",
|
||||
},
|
||||
{
|
||||
label: "晨检备注",
|
||||
prop: "remark01",
|
||||
minWidth: "150",
|
||||
},
|
||||
{
|
||||
label: "午检评分",
|
||||
prop: "score02",
|
||||
},
|
||||
{
|
||||
label: "午检备注",
|
||||
prop: "remark02",
|
||||
minWidth: "150",
|
||||
},
|
||||
{
|
||||
label: "课间操评分",
|
||||
prop: "score03",
|
||||
},
|
||||
{
|
||||
label: "课间操备注",
|
||||
prop: "remark03",
|
||||
minWidth: "150",
|
||||
},
|
||||
{
|
||||
label: "总分",
|
||||
prop: "score",
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
date: null, // 日期
|
||||
gradeId: null, // 年级
|
||||
classId: null, // 班级ID
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: "新增", // 弹出层按钮
|
||||
rules: {
|
||||
date: [{ required: true, message: "请选择日期", trigger: "blur" }],
|
||||
gradeId: [{ required: true, message: "请选择年级", trigger: "blur" }],
|
||||
classId: [{ required: true, message: "请选择班级", trigger: "blur" }],
|
||||
score01: [{ required: true, message: "请输入晨检评分", trigger: "blur" }],
|
||||
remark01: [{ required: true, message: "请输入晨检评分备注", trigger: "blur" }],
|
||||
score02: [{ required: true, message: "请输入晨检评分备注", trigger: "blur" }],
|
||||
remark02: [{ required: true, message: "请输入午检评分备注", trigger: "blur" }],
|
||||
score03: [{ required: true, message: "请输入课间操评分", trigger: "blur" }],
|
||||
remark03: [{ required: true, message: "请输入课间操评分备注", trigger: "blur" }],
|
||||
},
|
||||
gradeArr: [], // 年级列表
|
||||
classArr: [], // 班级列表
|
||||
queryClassArr: [], // 班级列表
|
||||
queryAllClassArr: [], // 班级列表不变
|
||||
};
|
||||
},
|
||||
components: {
|
||||
CommonTables,
|
||||
},
|
||||
created() {
|
||||
// 年级
|
||||
getClass().then((res) => {
|
||||
this.gradeArr = res.data;
|
||||
res.data.forEach((item, index) => {
|
||||
// 将年级班级所有拆分出来
|
||||
if (index == 0) {
|
||||
this.queryClassArr = item.children;
|
||||
} else {
|
||||
this.queryClassArr = [...this.queryClassArr, ...item.children];
|
||||
}
|
||||
});
|
||||
this.queryAllClassArr = this.queryClassArr;
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 点击查询年级
|
||||
onChangeQueryGrade(id) {
|
||||
if (this.query.classId) {
|
||||
this.query.classId = null;
|
||||
}
|
||||
this.gradeArr.forEach((item) => {
|
||||
if (item.deptId == id) {
|
||||
this.queryClassArr = item.children;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击了年级
|
||||
onChangeGrade(id) {
|
||||
if (this.form.classId) {
|
||||
this.form.classId = null;
|
||||
}
|
||||
console.log(id);
|
||||
// 点击年级 清空班级
|
||||
this.classArr = [];
|
||||
this.gradeArr.forEach((item) => {
|
||||
if (item.deptId == id) {
|
||||
this.classArr = item.children;
|
||||
}
|
||||
});
|
||||
},
|
||||
onFocusClass() {
|
||||
if (!this.form.gradeId) {
|
||||
// 说明未选年级
|
||||
this.message("请先选择年级", "error");
|
||||
}
|
||||
},
|
||||
// 点击了班级
|
||||
onChangeClass(id) {
|
||||
this.form.classId = id;
|
||||
},
|
||||
|
||||
// 点击确定提交
|
||||
onClickSubmit() {
|
||||
console.log(this.form);
|
||||
let obj = { ...this.form };
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.id) {
|
||||
// 有id说明是修改
|
||||
postAddOrders(obj)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.getList();
|
||||
this.resetForm();
|
||||
this.message("修改成功");
|
||||
this.isVisible = false;
|
||||
} else {
|
||||
this.message(res.msg, "error");
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
this.message(err.msg, "error");
|
||||
});
|
||||
} else {
|
||||
// 新增
|
||||
postAddOrders(obj)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.getList();
|
||||
this.resetForm();
|
||||
this.message();
|
||||
this.isVisible = false;
|
||||
} else {
|
||||
this.message(res.msg, "error");
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
this.message(err.msg, "error");
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = "新增德育评价";
|
||||
this.resetForm();
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
date: null, // 日期
|
||||
gradeId: null, // 年级
|
||||
classId: null, // 班级ID
|
||||
};
|
||||
this.queryClassArr = this.queryAllClassArr;
|
||||
this.getList();
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
date: null, // 日期
|
||||
gradeId: null, // 年级
|
||||
classId: null, // 班级ID
|
||||
score01: null, // 01项评分
|
||||
remark01: null, // 01项打分备注
|
||||
score02: null, // 02项评分
|
||||
remark02: null, // 02项打分备注
|
||||
score03: null, // 03项评分
|
||||
remark03: null, // 03项打分备注
|
||||
};
|
||||
this.classArr = [];
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.query.pageNum = 1;
|
||||
this.query.pageSize = 10;
|
||||
this.getList();
|
||||
},
|
||||
// 获取数据
|
||||
getList() {
|
||||
getOrders(this.query).then((res) => {
|
||||
console.log(res);
|
||||
this.data = res.rows.map((item) => {
|
||||
item.leader = item.classInfo.leader;
|
||||
item.className = item.classInfo.deptName;
|
||||
return item;
|
||||
});
|
||||
this.total = res.total;
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
deleteData(item) {
|
||||
console.log("------------------------------------------");
|
||||
console.log(item);
|
||||
// putOrders().then(res =>{
|
||||
|
||||
// })
|
||||
},
|
||||
// 编辑
|
||||
editData(item) {
|
||||
this.title = "修改德育评价";
|
||||
this.resetForm();
|
||||
this.form = { ...item };
|
||||
this.form.classId = this.form.classId;
|
||||
this.gradeArr.forEach((item) => {
|
||||
if (item.children) {
|
||||
item.children.forEach((it) => {
|
||||
if (it.deptId == this.form.classId) {
|
||||
this.form.gradeId = item.deptId;
|
||||
let classId = it.deptId;
|
||||
this.onChangeGrade(item.deptId);
|
||||
this.form.classId = classId;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
this.isVisible = true;
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum) {
|
||||
console.log("点击切换页数" + pageNum);
|
||||
this.query.pageNum = pageNum;
|
||||
this.getList();
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize) {
|
||||
this.pageSize = pageSize;
|
||||
this.query.pageSize = pageSize;
|
||||
this.getList();
|
||||
console.log(pageSize);
|
||||
},
|
||||
message(message = "新增成功", type = "success") {
|
||||
// type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
html::v-deep.stretchNone {
|
||||
.el-textarea__inner {
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTables
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTables>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="demo-ruleForm">
|
||||
<el-form-item label="缴费标题" prop="subject">
|
||||
<el-input size="mini" v-model="form.subject"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费金额" prop="money">
|
||||
<el-input size="mini" type="number" v-model="form.money"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker
|
||||
v-model="form.startTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择开始时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime" >
|
||||
<el-date-picker
|
||||
v-model="form.endTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择结束时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费说明" prop="explain">
|
||||
<el-input size="mini" v-model="form.explain"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postAddOrders, getOrders, putOrders } from './api'
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
subject: null, // 缴费标题
|
||||
money: null, // 金额
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
},
|
||||
{
|
||||
label: "金额",
|
||||
prop: "money",
|
||||
},
|
||||
{
|
||||
label: "缴费标题",
|
||||
prop: "subject",
|
||||
},
|
||||
{
|
||||
label: "缴费说明",
|
||||
prop: "explain",
|
||||
},
|
||||
{
|
||||
label: "开始时间",
|
||||
prop: "startTime",
|
||||
},
|
||||
{
|
||||
label: "结束时间",
|
||||
prop: "endTime",
|
||||
},
|
||||
{
|
||||
label: "状态", // 0-缴费中 1-缴费结束 2-删除
|
||||
prop: "status",
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: '新增', // 弹出层按钮
|
||||
rules: {
|
||||
subject: [
|
||||
{ required: true, message: '请输入缴费标题', trigger: 'blur' },
|
||||
],
|
||||
money: [
|
||||
{ required: true, message: '请输入缴费金额', trigger: 'blur' },
|
||||
],
|
||||
explain: [
|
||||
{ required: true, message: '请输入缴费说明', trigger: 'blur' },
|
||||
],
|
||||
startTime: [
|
||||
{ required: true, message: '请输入开始时间', trigger: 'blur' },
|
||||
],
|
||||
endTime: [
|
||||
{ required: true, message: '请输入结束时间', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList()
|
||||
},
|
||||
methods:{
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
let obj = { ...this.form }
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
}else{
|
||||
this.message('新增失败', 'error')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
money: null, // 金额
|
||||
subject: null, // 缴费标题
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.query.pageNum = 1
|
||||
this.query.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getOrders(this.query).then( res =>{
|
||||
console.log(res)
|
||||
this.data = res.data.map(item =>{
|
||||
return item
|
||||
})
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(item) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(item)
|
||||
// putOrders().then(res =>{
|
||||
|
||||
// })
|
||||
},
|
||||
// 编辑
|
||||
editData() {
|
||||
this.isVisible = true;
|
||||
this.title = '修改'
|
||||
this.resetForm()
|
||||
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum){
|
||||
console.log( '点击切换页数' +pageNum)
|
||||
this.query.pageNum = pageNum
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize){
|
||||
this.pageSize = pageSize
|
||||
this.query.pageSize = pageSize
|
||||
this.getList()
|
||||
console.log(pageSize)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,61 @@
|
||||
import request from '@/utils/request'
|
||||
// get获取列表
|
||||
export function getOrders (params) {
|
||||
return request({
|
||||
url: '/user/monitor/list',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
// 新增
|
||||
export function postAddOrders (data) {
|
||||
return request({
|
||||
url: '/meetingAct/info/add',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 修改
|
||||
export function putOrders (data) {
|
||||
return request({
|
||||
url: '/meetingAct/info/update',
|
||||
method: 'put',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function deleteOrders (id) {
|
||||
return request({
|
||||
url: '/meetingAct/info/delete',
|
||||
method: 'delete',
|
||||
params:{
|
||||
id
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 获取审批人
|
||||
export function getApprover () {
|
||||
return request({
|
||||
url: '/meetingAct/info/getTeacher',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
// 查询班级列表
|
||||
export function getClass() {
|
||||
return request({
|
||||
url: '/meetingAct/moral/moral/evaluableGradeAndClassList',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
// 获取详情
|
||||
export function getMonitorId(id){
|
||||
return request({
|
||||
method: "get",
|
||||
url: `/user/monitor/${id}`,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <el-button @click="newlyClick" type="primary" size="mini" icon="el-icon-plus"
|
||||
>新增</el-button
|
||||
> -->
|
||||
<el-button @click="resetClick" type="primary" size="mini" icon="iconfont icon-biaodan"
|
||||
>刷新</el-button
|
||||
>
|
||||
<!-- <el-button @click="searchClick" type="warning" size="mini" icon="el-icon-search"
|
||||
>搜索</el-button
|
||||
> -->
|
||||
<el-input
|
||||
v-if="false"
|
||||
v-model="searchData"
|
||||
size="mini"
|
||||
style="width: 20%"
|
||||
placeholder="请输入搜索的关键字"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonHead",
|
||||
data() {
|
||||
return {
|
||||
searchData: "",
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
newlyClick() {
|
||||
// 在此处调用父组件传入的方法叫父组件做事情
|
||||
this.$emit("newly-data");
|
||||
},
|
||||
resetClick() {
|
||||
this.$emit("reset-data");
|
||||
},
|
||||
searchClick() {
|
||||
this.$emit("search-data", this.searchData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-table :data="tableData" style="width: 100%" height="650" size="mini">
|
||||
<el-table-column
|
||||
v-if="column.label !== 'monitorId'"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
></el-table-column>
|
||||
<el-table-column prop="zip" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>查看缺勤</el-button
|
||||
>
|
||||
<!-- <el-popconfirm @confirm="handleDelete(scope.row)" :title="'确定要删除吗？'">
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
name: "CommonTables",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
this.deleteFunc(row.id);
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
console.log(row);
|
||||
this.editFunc(row);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.s {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user