Branch_d40a2540
yujialong 2 years ago
parent d5f8a827dd
commit 16206af273
  1. BIN
      src/assets/img/product/1.png
  2. BIN
      src/assets/img/product/2.png
  3. BIN
      src/assets/img/product/3.png
  4. BIN
      src/assets/img/product/4.png
  5. BIN
      src/assets/img/product/5.png
  6. 1191
      src/pages/product/list/index.vue
  7. 922
      src/pages/product/show/index.vue
  8. 1447
      src/pages/project/add/index.vue
  9. 884
      src/pages/project/list/index.vue
  10. 203
      src/pages/station/list/index.vue
  11. 1703
      src/pages/station/preview/index.vue

Binary file not shown.

After

Width:  |  Height:  |  Size: 667 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 451 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 581 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 490 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 585 B

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

@ -1,55 +1,58 @@
<template>
<div>
<el-card v-if="showBack" shadow="hover" class="m-b-20">
<el-page-header content="实验项目管理" @back="goBack"></el-page-header>
</el-card>
<div class="page">
<h6 class="p-title">筛选</h6>
<div class="tool mul">
<ul class="filter">
<li>
<label>创建人</label>
<el-select v-model="queryData.founder" placeholder="请选择创建人" @change="founderChange">
<el-option
v-for="(item,index) in founderList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</li>
<li>
<label>状态</label>
<el-select v-model="queryData.state" clearable placeholder="请选择状态" @change="initData">
<el-option
v-for="(item,index) in stateList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</li>
<li>
<label>权限</label>
<el-select v-model="queryData.permissions" placeholder="请选择" @change="initData">
<el-option
v-for="item in permissionsList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</li>
<li>
<label>课程</label>
<el-cascader
v-model="cid"
:options="curs"
:props="{ checkStrictly: true, value: 'id' }"
popper-class="course-cas"
@expand-change="curChange"
@change="curChange"></el-cascader>
<!-- <el-select v-model="queryData.cid" @change="courseChange">
<div>
<el-card v-if="showBack"
shadow="hover"
class="m-b-20">
<el-page-header content="实验项目管理"
@back="goBack"></el-page-header>
</el-card>
<div class="page">
<h6 class="p-title">筛选</h6>
<div class="tool mul">
<ul class="filter">
<li>
<label>创建人</label>
<el-select v-model="queryData.founder"
placeholder="请选择创建人"
@change="founderChange">
<el-option v-for="(item,index) in founderList"
:key="index"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</li>
<li>
<label>状态</label>
<el-select v-model="queryData.state"
clearable
placeholder="请选择状态"
@change="initData">
<el-option v-for="(item,index) in stateList"
:key="index"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</li>
<li>
<label>权限</label>
<el-select v-model="queryData.permissions"
placeholder="请选择"
@change="initData">
<el-option v-for="item in permissionsList"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</li>
<li>
<label>课程</label>
<el-cascader v-model="cid"
:options="curs"
:props="{ checkStrictly: true, value: 'id' }"
popper-class="course-cas"
@expand-change="curChange"
@change="curChange"></el-cascader>
<!-- <el-select v-model="queryData.cid" @change="courseChange">
<el-option
v-for="item in curriculumList"
:key="item.cid"
@ -57,8 +60,8 @@
:value="item.cid">
</el-option>
</el-select> -->
</li>
<!-- <li>
</li>
<!-- <li>
<label>系统</label>
<el-select v-model="systemId" placeholder="请选择" @change="initData">
<el-option
@ -69,388 +72,437 @@
></el-option>
</el-select>
</li> -->
<li>
<el-input placeholder="请输入项目名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input>
</li>
</ul>
<div>
<el-button v-auth type="info" @click="add">新增项目</el-button>
<el-button v-auth type="primary" @click="delAllData">批量删除</el-button>
</div>
</div>
<li>
<el-input placeholder="请输入项目名称"
prefix-icon="el-icon-search"
v-model="keyword"
clearable></el-input>
</li>
</ul>
<div>
<el-button v-auth
type="info"
@click="add">新增项目</el-button>
<el-button v-auth
type="primary"
@click="delAllData">批量删除</el-button>
</div>
</div>
<el-table :data="listData" class="table" ref="table" stripe header-align="center"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" :selectable="disabledSelection"></el-table-column>
<el-table-column type="index" width="100" label="序号" align="center">
<template slot-scope="scope">{{ scope.$index + (page - 1) * pageSize + 1 }}</template>
</el-table-column>
<el-table-column prop="projectName" label="实验项目名称" min-width="400" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="founder" label="创建人" min-width="150" align="center">
<template slot-scope="scope">
{{ founderKeys[scope.row.founder] }}
</template>
</el-table-column>
<el-table-column label="权限" min-width="120" align="center">
<template slot-scope="scope">
{{ permissionsKeys[scope.row.permissions] }}
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" min-width="150" align="center"></el-table-column>
<el-table-column prop="status" label="状态" min-width="100" align="center">
<template slot-scope="scope">
{{ stateKeys[scope.row.state] }}
</template>
</el-table-column>
<el-table-column label="操作" width="300" align="center">
<template slot-scope="scope">
<el-button type="text" @click="edit(scope.row, 1)">查看</el-button>
<el-button v-if="scope.row.founder && (roleName.includes('超级') || roleName === scope.row.roleName || (roleName === '管理员' && !scope.row.roleName.includes('超级')))" type="text" @click="edit(scope.row)">编辑</el-button>
<el-button v-if="scope.row.founder && (roleName.includes('超级') || roleName === scope.row.roleName || (roleName === '管理员' && !scope.row.roleName.includes('超级')))" type="text" @click="handleDelete(scope.row.projectId)">删除</el-button>
<el-button v-auth type="text" @click="copyData(scope.row.projectId)">复制</el-button>
<el-switch
v-auth="'禁用'"
v-if="scope.row.state"
v-model="scope.row.ccupationlabOpen"
:active-text="scope.row.ccupationlabOpen ? '关闭' : '启用'"
:active-value="0"
:inactive-value="1"
style="margin: 0 10px 0 10px"
@change="switchOff(scope.row)"
></el-switch>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background @current-change="handleCurrentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
</div>
<el-table :data="listData"
class="table"
ref="table"
stripe
header-align="center"
@selection-change="handleSelectionChange">
<el-table-column type="selection"
width="55"
align="center"
:selectable="disabledSelection"></el-table-column>
<el-table-column type="index"
width="100"
label="序号"
align="center">
<template slot-scope="scope">{{ scope.$index + (page - 1) * pageSize + 1 }}</template>
</el-table-column>
<el-table-column prop="projectName"
label="实验项目名称"
min-width="400"
align="center"
show-overflow-tooltip></el-table-column>
<el-table-column prop="founder"
label="创建人"
min-width="150"
align="center">
<template slot-scope="scope">
{{ founderKeys[scope.row.founder] }}
</template>
</el-table-column>
<el-table-column label="权限"
min-width="120"
align="center">
<template slot-scope="scope">
{{ permissionsKeys[scope.row.permissions] }}
</template>
</el-table-column>
<el-table-column prop="createTime"
label="创建时间"
min-width="150"
align="center"></el-table-column>
<el-table-column prop="status"
label="状态"
min-width="100"
align="center">
<template slot-scope="scope">
{{ stateKeys[scope.row.state] }}
</template>
</el-table-column>
<el-table-column label="操作"
width="300"
align="center">
<template slot-scope="scope">
<el-button type="text"
@click="edit(scope.row, 1)">查看</el-button>
<el-button v-if="scope.row.founder && (roleName.includes('超级') || roleName === scope.row.roleName || (roleName === '管理员' && !scope.row.roleName.includes('超级')))"
type="text"
@click="edit(scope.row)">编辑</el-button>
<el-button v-if="scope.row.founder && (roleName.includes('超级') || roleName === scope.row.roleName || (roleName === '管理员' && !scope.row.roleName.includes('超级')))"
type="text"
@click="handleDelete(scope.row.projectId)">删除</el-button>
<el-button v-auth
type="text"
@click="copyData(scope.row.projectId)">复制</el-button>
<el-switch v-auth="'禁用'"
v-if="scope.row.state"
v-model="scope.row.ccupationlabOpen"
:active-text="scope.row.ccupationlabOpen ? '关闭' : '启用'"
:active-value="0"
:inactive-value="1"
style="margin: 0 10px 0 10px"
@change="switchOff(scope.row)"></el-switch>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background
@current-change="handleCurrentChange"
:current-page="page"
layout="total, prev, pager, next"
:total="total"></el-pagination>
</div>
<el-dialog title="复制" :visible.sync="copyVisible" width="24%" center :close-on-click-modal="false">
<el-form>
<el-form-item>
<!--前端不用做名称判重了@change='projectNameExistis'-->
<el-input placeholder="请输入项目名称" v-model="projectName"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="copyVisible = false"> </el-button>
<el-button type="primary" @click="copySubmit"> </el-button>
</span>
</el-dialog>
</div>
<el-dialog title="复制"
:visible.sync="copyVisible"
width="24%"
center
:close-on-click-modal="false">
<el-form>
<el-form-item>
<!--前端不用做名称判重了@change='projectNameExistis'-->
<el-input placeholder="请输入项目名称"
v-model="projectName"></el-input>
</el-form-item>
</el-form>
<span slot="footer"
class="dialog-footer">
<el-button @click="copyVisible = false"> </el-button>
<el-button type="primary"
@click="copySubmit"> </el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
import util from "@/libs/util";
export default {
data() {
return {
showBack: Boolean(this.$route.query.show),
cid: [],
curs: [],
systemId: "",
systemList: [],
systemListAll: [],
curriculumId: '',
curriculumList: [],
queryData: {
platformId: 1, // :1 :3
founder: +this.$route.query.founder || 2, // (0: 1: 2:)
state: "", // (0:稿 1:)
permissions: "", // (0: 1: 2:)
cid: ''
},
keyword: "",
status: "",
listData: [],
total: 0,
permissionsList: [
{
value: "",
label: "不限"
}, {
value: 0,
label: "练习"
}, {
value: 1,
label: "考核"
}, {
value: 2,
label: "竞赛"
}
],
permissionsKeys: {
0: "练习",
1: "考核",
2: "竞赛"
},
founderList: [
{
value: 2,
label: "全部"
}, {
value: 0,
label: "系统"
}, {
value: 1,
label: "老师"
}
],
founderKeys: {
0: "系统",
1: "老师"
},
stateList: [
{
value: "",
label: "不限"
}, {
value: 0,
label: "草稿箱"
}, {
value: 1,
label: "已发布"
}
],
stateKeys: {
0: "草稿箱",
1: "已发布"
},
page: +this.$route.query.page || 1,
pageSize: 10,
multipleSelection: [],
copyVisible: false,
projectName: "",
currentRow: {}, //
listDataAll: [],
isFirst: true
};
data () {
return {
showBack: Boolean(this.$route.query.show),
cid: [],
curs: [],
systemId: "",
systemList: [],
systemListAll: [],
curriculumId: '',
curriculumList: [],
queryData: {
platformId: 1, // :1 :3
founder: +this.$route.query.founder || 2, // (0: 1: 2:)
state: "", // (0:稿 1:)
permissions: "", // (0: 1: 2:)
cid: ''
},
keyword: "",
status: "",
listData: [],
total: 0,
permissionsList: [
{
value: "",
label: "不限"
}, {
value: 0,
label: "练习"
}, {
value: 1,
label: "考核"
}, {
value: 2,
label: "竞赛"
}
],
permissionsKeys: {
0: "练习",
1: "考核",
2: "竞赛"
},
founderList: [
{
value: 2,
label: "全部"
}, {
value: 0,
label: "系统"
}, {
value: 1,
label: "老师"
}
],
founderKeys: {
0: "系统",
1: "老师"
},
stateList: [
{
value: "",
label: "不限"
}, {
value: 0,
label: "草稿箱"
}, {
value: 1,
label: "已发布"
}
],
stateKeys: {
0: "草稿箱",
1: "已发布"
},
page: +this.$route.query.page || 1,
pageSize: 10,
multipleSelection: [],
copyVisible: false,
projectName: "",
currentRow: {}, //
listDataAll: [],
isFirst: true
};
},
computed: {
...mapState("user", [
"userId", "roleId", 'roleName'
]),
...mapState("project", [
"lastSystemId",
"assFields",
"queryDataStatus",
])
},
watch: {
keyword: function (val) {
clearTimeout(this.searchTimer);
this.searchTimer = setTimeout(() => {
this.initData();
}, 500);
},
computed: {
...mapState("user", [
"userId", "roleId", 'roleName'
]),
...mapState("project", [
"lastSystemId",
"assFields",
"queryDataStatus",
])
queryData: {
handler: function (newVal) {
this.setQueryStatus({ ...newVal })
},
deep: true
}
},
mounted () {
this.getSystemData()
this.getData()
if (this.queryDataStatus.platformId) {
this.queryData = this.queryDataStatus
}
},
methods: {
...mapActions("project", [
"setSystemId"
]),
...mapMutations({
setQueryStatus: "project/SET_QUERYDATASTATUS"
}),
getData () {
this.setSystemId(this.systemId);
if (this.isFirst) this.page = +this.$route.query.page || 1
let data = {
...this.queryData,
projectName: this.keyword,
pageNum: this.page,
pageSize: this.pageSize,
systemId: this.systemId
};
this.$post(this.api.queryProjectManage, data).then(res => {
this.isFirst = false
this.listData = res.data.records;
this.total = res.data.total;
}).catch(err => {
});
},
watch: {
keyword: function(val) {
clearTimeout(this.searchTimer);
this.searchTimer = setTimeout(() => {
this.initData();
}, 500);
},
queryData: {
handler: function(newVal) {
this.setQueryStatus({...newVal})
},
deep: true
//
getSystemData () {
this.$get(this.api.getSystemIdBySchool).then(({ data }) => {
this.systemListAll = data
this.getschoolCourse()
}).catch(err => { })
},
//
getschoolCourse () {
this.$get(this.api.getSchoolEffectiveCourse).then(({ data }) => {
this.curriculumList = data
const { cid } = this.queryData
if (data.length) {
this.cid = [cid || data[0].cid]
const all = this.systemListAll
data.map(e => {
e.id = e.cid
e.label = e.curriculumName
e.children = all.filter(n => e.systemId.split(',').includes(n.id + '')) //
})
this.curs = data
this.curChange(this.cid)
}
}).catch(err => { })
},
//
curChange (val) {
const cid = val[0]
if (val.length === 1) {
//
this.cid = [cid, this.curs.find(e => e.id === cid).children[0].id]
}
this.queryData.cid = cid
this.systemId = this.cid[1]
this.initData()
},
mounted() {
this.getSystemData()
this.getData()
if(this.queryDataStatus.platformId) {
this.queryData = this.queryDataStatus
//
founderChange (val) {
this.$router.push({
path: 'list',
query: {
...this.$route.query,
founder: val
}
})
this.initData()
},
initData () {
this.page = 1;
this.getData();
},
disabledSelection (row, index) { //
const roleName = this.roleName
if (row.founder && (roleName.includes('超级') || roleName === row.roleName || (roleName === '管理员' && !row.roleName.includes('超级')))) return true
return false
},
handleCurrentChange (val) { //
this.page = val;
// this.$router.push({
// path: '/project/list',
// query: {
// ...this.$route.query,
// page: val
// }
// })
this.getData();
},
add () { //
this.setSystemId(this.systemId);
this.$router.push(`/project/add?founder=${this.queryData.founder}`);
},
edit (row, show) { //
this.setSystemId(row.systemId);
this.$router.push(`/project/add?projectId=${row.projectId}&founder=${this.queryData.founder}${show ? `&show=1` : ''}`);
},
handleSelectionChange (val) { //
this.multipleSelection = val;
},
delAllData () { //
if (this.multipleSelection.length) {
let ids = this.multipleSelection.map(item => {
return item.projectId;
});
let strIds = ids.toString();
this.handleDelete(strIds);
} else {
util.errorMsg("请先选择项目");
}
},
methods: {
...mapActions("project", [
"setSystemId"
]),
...mapMutations({
setQueryStatus: "project/SET_QUERYDATASTATUS"
}),
getData() {
this.setSystemId(this.systemId);
if (this.isFirst) this.page = +this.$route.query.page || 1
let data = {
...this.queryData,
projectName: this.keyword,
pageNum: this.page,
pageSize: this.pageSize,
systemId: this.systemId
};
this.$post(this.api.queryProjectManage, data).then(res => {
this.isFirst = false
this.listData = res.data.records;
this.total = res.data.total;
}).catch(err => {
});
},
//
getSystemData() {
this.$get(this.api.getSystemIdBySchool).then(({ data }) => {
this.systemListAll = data
this.getschoolCourse()
}).catch(err => {})
},
//
getschoolCourse() {
this.$get(this.api.getSchoolEffectiveCourse).then(({ data }) => {
this.curriculumList = data
const { cid } = this.queryData
if (data.length) {
this.cid = [cid || data[0].cid]
const all = this.systemListAll
data.map(e => {
e.id = e.cid
e.label = e.curriculumName
e.children = all.filter(n => e.systemId.split(',').includes(n.id + '')) //
})
this.curs = data
this.curChange(this.cid)
}
}).catch(err => {})
},
//
curChange(val) {
const cid = val[0]
if (val.length === 1) {
//
this.cid = [cid, this.curs.find(e => e.id === cid).children[0].id]
handleDelete (ids) { //
this.$confirm("确定要删除吗?", "提示", {
type: "warning"
}).then(() => {
this.$post(`${this.api.deleteProjectManage}?projectIds=${ids}&platformId=${this.queryData.platformId}`).then(res => {
util.successMsg("删除成功");
this.$refs.table.clearSelection()
this.getData();
}).catch(err => {
console.log(err);
});
}).catch(() => {
this.$message.info("已取消删除");
});
},
switchOff (row) { //
this.$get(`${this.api.updateIsOpen}?isOpen=${row.ccupationlabOpen}&projectId=${row.projectId}&platformId=${this.queryData.platformId}`).then(res => {
util.successMsg("更新启用状态成功");
this.getData();
}).catch(err => {
console.log(err);
});
},
projectNameExistis () { //
if (this.projectName) {
this.$post(this.api.queryNameIsExist, { projectName: this.projectName }).then(res => {
if (res.status === 200) {
this.projectNameRepeat = false;
}
this.queryData.cid = cid
this.systemId = this.cid[1]
this.initData()
},
//
founderChange(val) {
this.$router.push({
path: 'list',
query: {
...this.$route.query,
founder: val
}
})
this.initData()
},
initData() {
this.page = 1;
this.getData();
},
disabledSelection(row, index) { //
const roleName = this.roleName
if (row.founder && (roleName.includes('超级') || roleName === row.roleName || (roleName === '管理员' && !row.roleName.includes('超级')))) return true
return false
},
handleCurrentChange(val) { //
this.page = val;
// this.$router.push({
// path: '/project/list',
// query: {
// ...this.$route.query,
// page: val
// }
// })
this.getData();
},
add() { //
this.setSystemId(this.systemId);
this.$router.push(`/project/add?founder=${this.queryData.founder}`);
},
edit(row, show) { //
this.setSystemId(row.systemId);
this.$router.push(`/project/add?projectId=${row.projectId}&founder=${this.queryData.founder}${show ? `&show=1` : ''}`);
},
handleSelectionChange(val) { //
this.multipleSelection = val;
},
delAllData() { //
if (this.multipleSelection.length) {
let ids = this.multipleSelection.map(item => {
return item.projectId;
});
let strIds = ids.toString();
this.handleDelete(strIds);
} else {
util.errorMsg("请先选择项目");
}
},
handleDelete(ids) { //
this.$confirm("确定要删除吗?", "提示", {
type: "warning"
}).then(() => {
this.$post(`${this.api.deleteProjectManage}?projectIds=${ids}&platformId=${this.queryData.platformId}`).then(res => {
util.successMsg("删除成功");
this.$refs.table.clearSelection()
this.getData();
}).catch(err => {
console.log(err);
});
}).catch(() => {
this.$message.info("已取消删除");
});
},
switchOff(row) { //
this.$get(`${this.api.updateIsOpen}?isOpen=${row.ccupationlabOpen}&projectId=${row.projectId}&platformId=${this.queryData.platformId}`).then(res => {
util.successMsg("更新启用状态成功");
this.getData();
}).catch(err => {
console.log(err);
});
},
projectNameExistis() { //
if (this.projectName) {
this.$post(this.api.queryNameIsExist, { projectName: this.projectName }).then(res => {
if (res.status === 200) {
this.projectNameRepeat = false;
}
}).catch(err => {
this.projectNameRepeat = true;
});
} else {
this.projectNameRepeat = false;
}
},
copyData(projectId) { // id
this.copyVisible = true;
this.$get(`${this.api.getProjectDetail}?projectId=${projectId}`).then(res => {
this.projectName = res.projectManage.projectName;
this.currentRow = {
projectManage: res.projectManage,
projectJudgmentList: res.projectJudgmentVos
};
}).catch(err => {
console.log(err);
});
},
copySubmit() {
if (!this.projectName) {
util.warningMsg("请输入项目名称");
return;
}
;
if (this.projectNameRepeat) {
util.warningMsg("该项目名称已存在");
return;
}
this.currentRow.projectManage.projectName = this.projectName;
this.currentRow.projectManage.projectId = "";
this.currentRow.projectManage.founder = 1
this.currentRow.projectJudgmentList.forEach(i => {
i.projectId = "";
});
this.$post(`${this.api.copyProjectManage}`, this.currentRow).then(res => {
this.initData();
util.successMsg("复制实验项目成功");
this.copyVisible = false;
}).catch(err => {
console.log(err);
});
},
goBack() { //
this.$router.back();
}
}).catch(err => {
this.projectNameRepeat = true;
});
} else {
this.projectNameRepeat = false;
}
},
copyData (projectId) { // id
this.copyVisible = true;
this.$get(`${this.api.getProjectDetail}?projectId=${projectId}`).then(res => {
this.projectName = res.projectManage.projectName;
this.currentRow = {
projectManage: res.projectManage,
projectJudgmentList: res.projectJudgmentVos
};
}).catch(err => {
console.log(err);
});
},
copySubmit () {
if (!this.projectName) {
util.warningMsg("请输入项目名称");
return;
}
;
if (this.projectNameRepeat) {
util.warningMsg("该项目名称已存在");
return;
}
this.currentRow.projectManage.projectName = this.projectName;
this.currentRow.projectManage.projectId = "";
this.currentRow.projectManage.founder = 1
this.currentRow.projectJudgmentList.forEach(i => {
i.projectId = "";
});
this.$post(`${this.api.copyProjectManage}`, this.currentRow).then(res => {
this.initData();
util.successMsg("复制实验项目成功");
this.copyVisible = false;
}).catch(err => {
console.log(err);
});
},
goBack () { //
this.$router.back();
}
}
};
</script>
<style lang="scss" scoped>
</style>

@ -1,89 +1,104 @@
<template>
<!-- 实验台 -->
<div class="wrap">
<div class="search">
<h6>创新实验智能教学</h6>
<div class="input" v-auth="'搜索'">
<img src="@/assets/img/search.png" alt="">
<input type="text" placeholder="请输入关键词" v-model="keyword">
</div>
<!-- 实验台 -->
<div class="wrap">
<div class="search">
<h6>创新实验智能教学</h6>
<div class="input"
v-auth="'搜索'">
<img src="@/assets/img/search.png"
alt="">
<input type="text"
placeholder="请输入关键词"
v-model="keyword">
</div>
</div>
<div class="station">
<div class="inner">
<div class="tab">
<a class="item"
v-for="(item, i) in tabs"
:key="i"
:class="{active: item.id == active}"
@click="tabChange(item)">{{ item.name }}</a>
</div>
<div class="station">
<div class="inner">
<div class="tab">
<a class="item" v-for="(item, i) in tabs" :key="i" :class="{active: item.id == active}" @click="tabChange(item)">{{ item.name }}</a>
</div>
<div class="curs">
<template v-if="curriculumList.length">
<template v-for="(item,index) in curriculumList">
<div class="item" :title="item.curriculumName" @click="goPreview(item)" :key="index" v-if="!keyword || item.curriculumName.includes(keyword)">
<img :src="item.coverUrl" alt="">
<div class="bottom">
<p class="text"><span>{{ item.goodsName || item.curriculumName }}</span></p>
<a>进入实验</a>
</div>
</div>
</template>
</template>
<div class="empty flex-1" v-else>
<div>
<img src="@/assets/img/none.png" alt="">
<p>暂无数据</p>
<div class="curs">
<template v-if="curriculumList.length">
<template v-for="(item,index) in curriculumList">
<div class="item"
:title="item.curriculumName"
@click="goPreview(item)"
:key="index"
v-if="!keyword || item.curriculumName.includes(keyword)">
<img :src="item.coverUrl"
alt="">
<div class="bottom">
<p class="text"><span>{{ item.goodsName || item.curriculumName }}</span></p>
<a>进入实验</a>
</div>
</div>
</template>
</template>
<div class="empty flex-1"
v-else>
<div>
<img src="@/assets/img/none.png"
alt="">
<p>暂无数据</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "backstage",
data() {
return {
keyword: "",
active: 0,
tabs: [
{
id: 0,
name: '实验课程'
},
{
id: 1,
name: '最近使用'
}
],
curriculumList: []
name: "backstage",
data () {
return {
keyword: "",
active: 0,
tabs: [
{
id: 0,
name: '实验课程'
},
{
id: 1,
name: '最近使用'
}
],
curriculumList: []
}
},
mounted () {
this.getschoolCourse();
},
methods: {
getschoolCourse () { //
this.active ?
this.$post(this.api.recentUse, {
pageNum: 1,
pageSize: 100
}).then(({ page }) => {
this.curriculumList = page.records
}).catch(err => { }) :
this.$get(this.api.schoolCourse).then(res => {
this.curriculumList = res.data;
}).catch(err => {
console.log(err);
});
},
mounted() {
this.getschoolCourse();
goPreview (item) {
this.$router.push(`/station/preview?courseId=${item.cid}&curriculumName=${item.curriculumName}&mallId=${item.mallId || ''}&admin=1`);
},
methods: {
getschoolCourse() { //
this.active ?
this.$post(this.api.recentUse, {
pageNum: 1,
pageSize: 100
}).then(({ page }) => {
this.curriculumList = page.records
}).catch(err => {}) :
this.$get(this.api.schoolCourse).then(res => {
this.curriculumList = res.data;
}).catch(err => {
console.log(err);
});
},
goPreview(item) {
this.$router.push(`/station/preview?courseId=${item.cid}&curriculumName=${item.curriculumName}&mallId=${item.mallId || ''}`);
},
// tab
tabChange(item) {
this.active = item.id
this.getschoolCourse()
},
}
// tab
tabChange (item) {
this.active = item.id
this.getschoolCourse()
},
}
};
</script>
@ -138,18 +153,18 @@ export default {
border-bottom: 3px solid transparent;
cursor: pointer;
&.active {
color: #007EFF;
border-color: #007EFF;
color: #007eff;
border-color: #007eff;
}
}
}
.station {
min-height: calc(100vh - 520px);
background: url(../../../assets/img/station1.png) (top left)/auto no-repeat,
url(../../../assets/img/station2.png) bottom right/auto no-repeat;
background: url(../../../assets/img/station1.png) (top left) / auto no-repeat,
url(../../../assets/img/station2.png) bottom right/auto no-repeat;
.inner {
width: 1072px;
margin: 0 auto;
width: 1072px;
margin: 0 auto;
}
.curs {
display: flex;
@ -166,7 +181,7 @@ export default {
border-radius: 8px;
cursor: pointer;
&:hover {
opacity: .9;
opacity: 0.9;
}
img {
width: 215px;
@ -197,26 +212,26 @@ export default {
padding: 0 8px;
line-height: 28px;
font-size: 14px;
color: #7A7A7A;
color: #7a7a7a;
border-radius: 20px;
border: 1px solid #DADADA;
border: 1px solid #dadada;
}
}
}
}
.empty{
display: flex;
justify-content: center;
align-items: center;
padding: 50px 0;
text-align: center;
img{
width: 471px;
}
p{
margin-top: 40px;
font-size: 18px;
color: rgba(0, 0, 0, 0.25);
}
.empty {
display: flex;
justify-content: center;
align-items: center;
padding: 50px 0;
text-align: center;
img {
width: 471px;
}
p {
margin-top: 40px;
font-size: 18px;
color: rgba(0, 0, 0, 0.25);
}
}
</style>

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save