Skip to content

E
exhibition_backstage
提交 ad0972e3 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

完成首页展览及文物数量统计页面

上级 b945d895
隐藏空白字符变更
内嵌 并排
正在显示 包含 813 行增加 和 387 行删除
src/api/culturalRelic.js
浏览文件 @ ad0972e3
......@@ -39,3 +39,13 @@ export function deleteCultralRelic(data) {
data
})
}
// 获取文物数量统计
export function getCulturalRelicStatistic(params) {
return request({
url: '/bizStatistic/getCulturalRelicStatistic',
method: 'get',
params
})
}
src/api/display.js
浏览文件 @ ad0972e3
......@@ -39,3 +39,12 @@ export function deleteDisplay(data) {
data
})
}
// 获取展览数量统计
export function getExhibitionStatistic(params) {
return request({
url: '/bizStatistic/getExhibitionStatistic',
method: 'get',
params
})
}
\ No newline at end of file
src/api/user.js
浏览文件 @ ad0972e3
......@@ -15,6 +15,7 @@ export function login(data) {
data
})
}
export function getInfo(token) {
return request({
url: '/sys/user',
......@@ -68,6 +69,24 @@ export function getUserList(data) {
}
// 增加用户
export function addUser(data) {
return request({
url: 'sys/user',
method: 'post',
data
})
}
// 修改用户信息
export function upadateUser(data) {
return request({
url: 'sys/user',
method: 'put',
data
})
}
// 以用户行为统计排序分页查询资源
export function getListByPageSort(data) {
return request({
......
src/api/vitual.js
浏览文件 @ ad0972e3
......@@ -42,3 +42,11 @@ export function getVirtualListById(data) {
})
}
// 获取展览数量统计
export function getVirtualStatistic(params) {
return request({
url: '/bizStatistic/getVirtualStatistic',
method: 'get',
params
})
}
\ No newline at end of file
src/components/Echarts/index.vue
浏览文件 @ ad0972e3
<template>
<div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>
<script>
// import tdTheme from './theme.json' // 引入默认主题
<div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>
<script>
// import tdTheme from './theme.json' // 引入默认主题
import resizeMixins from "@/utils/resizeMixin";
// import '../map/fujian.js'
// import '../map/fujian.js'
export default {
name: 'echart',
mixins: [resizeMixins],
......@@ -29,38 +29,44 @@
},
options: {
type: Object,
default: ()=>({})
default: () => ({})
}
},
data () {
data() {
return {
chart: null
}
},
watch: {
options: {
handler (options) {
handler(options) {
// 设置true清空echart缓存
this.chart.setOption(options, true)
},
deep: true
}
},
mounted () {
// this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
mounted() {
// this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
this.initChart();
},
methods: {
initChart () {
initChart() {
// 初始化echart
this.dispose()
this.chart = this.$echarts.init(this.$el)
this.$emit('myCharts', this.chart) // 把实例丢出来
this.chart.setOption(this.options, true)
},
// 销毁
dispose() {
if (this.chart) {
this.chart.dispose()
}
}
}
}
</script>
<style>
</style>
\ No newline at end of file
</script>
<style>
</style>
\ No newline at end of file
src/views/culturalRelic/components/InfoEditDialog.vue
浏览文件 @ ad0972e3
......@@ -240,7 +240,7 @@
<div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" :loading="loading"
>确定<i class="el-icon-right" style="margin-left: 5px"></i
>确定<i class="el-icon-s-promotion" style="margin-left: 5px"></i
></el-button>
</div>
</div>
......
src/views/display/components/InfoEditDialog.vue
浏览文件 @ ad0972e3
......@@ -223,7 +223,7 @@
<div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" :disabled="loading"
>发布<i class="el-icon-right" style="margin-left: 5px"></i
>发布<i class="el-icon-s-promotion" style="margin-left: 5px"></i
></el-button>
</div>
</el-dialog>
......
src/views/home/components/CombinationChart/index.vue 0 → 100644
浏览文件 @ ad0972e3
<!-- -->
<template>
<div style="height: 400px;width: 100%;">
<Echart ref="Echart" :options="options" height='100%' width="100%" v-if="options"></Echart>
</div>
</template>
<script>
import Echart from '@/components/Echarts' //引入echatrs组件
export default {
name: 'CombinationChart',
components: {
Echart
},
props: {
pieData: {
type: Array,
default: () => []///[{name:'name',value:0}]
}
},
data() {
return {
options: null
}
},
watch: {
pieData: function () {
this.getOptions()
}
},
mounted() {
setTimeout(() => {
this.getOptions()
}, 300);
},
methods: {
getOptions() {
var pie_color = ['#32D790', '#F4B561', '#7080DB', '#DF7A90',
'#3CC4EF', '#EF7F3C', '#EF3C81', '#0DBF8C', '#2F73C0', '#C55E18', '#C899FF', '#C6D727',
'#FF688F', '#87A0DC', '#00D9F7', '#A24EED'
];
var legendList = [];
// var pieData = [{
// name: 'A 农、林、牧、渔业',
// value: 290
// }, {
// name: 'G 交通运输、仓储和邮政业',
// value: 450
// }, {
// name: 'H 住宿和餐饮业',
// value: 120
// }, {
// name: 'I 信息传输、软件和信息技术服务业',
// value: 288
// },];
let pieData = this.pieData || []
for (var i = 0; i < pieData.length; i++) {
if (pieData[i]) {
legendList.push(pieData[i].name);
}
}
this.options = {
color: pie_color,
title: {
show: false,
text: '',
textStyle: {
color: '#333333',
fontSize: 16,
},
},
tooltip:{},
grid: {
show: false,
left: '2%',
right: '50%',
bottom: 0,
top: '2%',
containLabel: true
},
legend: {
bottom: '4%',
right: '10%',
orient: 'vertical',
width: 540,
height: 240,
padding: [14, 20],
backgroundColor: 'rgba(236,246,255,0.30)',
borderWidth: 1,
borderColor: '#E7F2FB',
borderRadius: 4,
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: '#333333',
fontSize: 12,
},
data: legendList,
},
xAxis: {
type: 'value',
gridIndex: 0,
name: '个',
nameTextStyle: {
color: '#9B9B9B',
fontSize: 14
},
axisLabel: {
color: '#727272',
fontSize: 14,
},
axisLine: {
show: true,
lineStyle: {
color: '#333333',
opacity: 0.35,
}
},
axisTick: {
show: true,
inside: true,
lineStyle: {
color: '#333333',
opacity: 0.35,
}
},
splitLine: {
show: false
}
},
yAxis: {
type: 'category',
gridIndex: 0,
data: legendList,
inverse: true,
axisLabel: {
color: '#727272',
fontSize: 14,
},
axisLine: {
show: true,
lineStyle: {
color: '#333333',
opacity: 0.35,
}
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
series: [{
name: '展览数量',
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
data: pieData,
label: {
show: true,
position: 'right',
color: '#4A4A4A',
fontSize: 14,
},
barWidth: 20,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x1: 0,
y1: 1,
colorStops: [{
offset: 0,
color: '#FF9A91'
}, {
offset: 1,
color: '#F8B44F'
}],
global: false
},
barBorderRadius: [0, 10, 10, 0]
}
}, {
type: 'pie',
radius: ['10%', '36%'],
center: ['75%', '30%'],
data: pieData,
hoverAnimation: false,
label: {
show: true,
position: 'outside',
formatter: '{b}：{d}%',
},
zlevel: 2
}, {
// name: '外圈',
type: 'pie',
radius: ['36%', '37.5%'],
center: ['75%', '30%'],
hoverAnimation: false,
itemStyle: {
color: 'rgb(21 132 214 / 0.1)',
},
emphasis: {
itemStyle: {
color: 'rgb(21 132 214 / 0.1)'
}
},
labelLine: {
show: false
},
data: [{
value: 1
}],
zlevel: 1
}, {
// name: '内圈',
type: 'pie',
radius: ['8.5%', '10%'],
center: ['75%', '30%'],
hoverAnimation: false,
itemStyle: {
color: 'rgb(21 132 214 / 0.1)',
},
emphasis: {
itemStyle: {
color: 'rgb(21 132 214 / 0.1)'
}
},
labelLine: {
show: false
},
data: [{
value: 1
}],
zlevel: 1
}]
}
}
},
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/views/home/components/CustomTitle/index.vue 0 → 100644
浏览文件 @ ad0972e3
<template>
<div class="custom-title">
<div class="divider"></div>
<div class="title">{{ title }}</div>
</div>
</template>
<script>
export default {
name: "CustomTitle",
props: {
title: {
type: String,
default: "",
},
},
};
</script>
<style lang="scss" scoped>
.custom-title {
display: flex;
align-items: center;
.divider {
width: 4px;
height: 18px;
background-color: #409eff;
margin-right: 8px;
}
.title {
font-size: 16px;
font-weight: bold;
color: #333;
}
}
</style>
\ No newline at end of file
src/views/home/index.vue
浏览文件 @ ad0972e3
......@@ -4,7 +4,9 @@
<el-tab-pane label="用户行为数据统计" name="behavior">
<el-card>
<div slot="header" class="clearfix">
<div style="float: left;font-weight: bold;">点击率Top20</div>
<div style="float: left;">
<CustomTitle title="综合点击率Top20" />
</div>
</div>
<div style="height: 500px;">
<Echart :options="allOptions" id="可选" height='100%' width="100%" v-if="allOptions"></Echart>
......@@ -12,7 +14,9 @@
</el-card>
<el-card style="margin-top: 20px;">
<div slot="header" class="clearfix">
<div style="float: left;font-weight: bold;">各类排名Top5</div>
<div style="float: left;font-weight: bold;">
<CustomTitle title="各类排名Top5" />
</div>
</div>
<el-row>
......@@ -42,7 +46,9 @@
</el-card>
<el-card class="box-card" style="margin-top: 20px;">
<div slot="header" class="clearfix">
<div style="float: left;font-weight: bold;">精品展数据统计</div>
<div style="float: left;font-weight: bold;">
<CustomTitle title="精品展数据统计" />
</div>
<el-radio-group v-model="currentSortPage" style="float: right;">
<el-radio :label="2">展览</el-radio>
<el-radio :label="1">文物</el-radio>
......@@ -58,66 +64,43 @@
</el-pagination>
</el-card>
</el-tab-pane>
<el-tab-pane label="展览数据统计" name="amount">
<h3>展览数据</h3>
<el-row :gutter="16">
<el-col :span="24">
<el-card>
<div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
<div>展览数量统计
</div>
<el-radio-group v-model="radio" style="float: right;">
<el-radio :label="1">按地区</el-radio>
<el-radio :label="2">按博物馆</el-radio>
<el-radio :label="3">按类型</el-radio>
</el-radio-group>
</div>
展览数量统计饼图
</el-card>
</el-col>
<!-- <el-col :span="12">
<el-card>
<div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
<div>展览类别统计</div>
<el-radio-group v-model="radio" style="float: right;">
<el-radio :label="1">按类型</el-radio>
</el-radio-group>
</div>
展览类别统计饼图
</el-card>
</el-col> -->
</el-row>
<h3>文物数据</h3>
<el-row :gutter="16">
<el-col :span="24">
<el-card>
<div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
<div>文物数量统计
</div>
<el-radio-group v-model="radio" style="float: right;">
<el-radio :label="1">按地区</el-radio>
<el-radio :label="2">按博物馆</el-radio>
<el-radio :label="3">按类型</el-radio>
<el-radio :label="4">按年代</el-radio>
</el-radio-group>
</div>
文物数量统计饼图
</el-card>
</el-col>
<!-- <el-col :span="12">
<el-card>
<div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
<div>文物类别统计</div>
<el-radio-group v-model="radio" style="float: right;">
<el-radio :label="1">按类型</el-radio>
<el-radio :label="2">按年代</el-radio>
</el-radio-group>
</div>
文物类别统计饼图
</el-card>
</el-col> -->
</el-row>
<el-tab-pane label="展览及文物数量统计" name="amount">
<!-- <h3>展览数据</h3> -->
<el-card>
<div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
<CustomTitle title="展览数量统计" />
<el-radio-group v-model="displayRadio" style="float: right;">
<el-radio :label="1">按地区</el-radio>
<el-radio :label="2">按博物馆</el-radio>
<el-radio :label="3">按类型</el-radio>
</el-radio-group>
</div>
<CombinationChart ref="displayChart" v-if="activeName=='amount'" :pieData="displayAmountData" />
</el-card>
<el-card style="margin-top:20px ;">
<div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
<CustomTitle title="文物数量统计" />
<el-radio-group v-model="crRadio" style="float: right;">
<el-radio :label="1">按地区</el-radio>
<el-radio :label="2">按博物馆</el-radio>
<el-radio :label="3">按类型</el-radio>
<el-radio :label="4">按年代</el-radio>
</el-radio-group>
</div>
<CombinationChart ref="crChart" v-if="activeName=='amount'" :pieData="crAmountData" />
</el-card>
<el-card style="margin-top:20px ;">
<div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
<CustomTitle title="虚拟展厅数量统计" />
<el-radio-group v-model="virtualRadio" style="float: right;">
<el-radio :label="1">按地区</el-radio>
<el-radio :label="2">按博物馆</el-radio>
</el-radio-group>
</div>
<CombinationChart ref="virtualChart" v-if="activeName=='amount'" :pieData="virtualAmountData" />
</el-card>
</el-tab-pane>
</el-tabs>
</div>
......@@ -129,10 +112,16 @@
import { title } from "./config";
import Echart from '@/components/Echarts' //引入echatrs组件
import { getListByPageSort, getBarMap } from '@/api/user'
import { getCulturalRelicStatistic } from '@/api/culturalRelic'
import { getExhibitionStatistic } from '@/api/display'
import { getVirtualStatistic } from '@/api/vitual'
import CombinationChart from './components/CombinationChart'
import CustomTitle from './components/CustomTitle'
export default {
name: 'Home',
components: {
TablePage, Echart,
TablePage, Echart, CombinationChart, CustomTitle
},
computed: {
...mapGetters([
......@@ -155,54 +144,59 @@
data() {
return {
activeName: 'behavior',
radio: 1,
displayRadio: 1,
crRadio: 1,
virtualRadio: 1,
list: {
records: [
{
name: '神秘贵州',
unit: '贵州省地质博物馆',
regionName: '贵阳市',
dj: 100,
dz: 8,
sc: 7
},
{
name: '夜郎的疑问',
unit: '黔西南州博物馆',
regionName: '黔西南州',
dj: 99,
dz: 6,
sc: 7
},
{
name: '四渡赤水',
unit: '遵义博物馆',
regionName: '遵义市',
dj: 96,
dz: 4,
sc: 9
}
]
],
current: 1,
size: 10
},
allOptions: null,
displayOptions: null,
crOptions: null,
virtualOptions: null,
currentSortPage: 2,//1-文物；2-展览；3-虚拟展厅；4-精品展览，0-所有。默认0
displayAmountData: null,
crAmountData: null,
virtualAmountData: null,
}
},
watch: {
currentSortPage(value) {
this.currentSortPage = value
this.loadListByPageSort()
}
},
activeName(value) {
if (value == 'amount') {
if (this.displayPieData == null) {
this.getDisplayAmountData()
}
if (this.crAmountData == null) {
this.getCrAmountData()
}
if (this.crAmountData == null) {
this.getVirtualAmountData()
}
}
},
displayRadio() {
this.getDisplayAmountData()
},
crRadio() {
this.getCrAmountData()
},
virtualRadio() {
this.getVirtualAmountData()
},
},
mounted() {
this.getBehaviorData()
this.loadListByPageSort()
// this.getBarData()
},
methods: {
// 获取行为数据统计图数据
async getBehaviorData() {
var pie_color = ['#00A5B9', '#FFD71D', '#F76464', '#56A3FF', '#32D790', '#F4B561', '#7080DB', '#DF7A90',
'#3CC4EF', '#EF7F3C', '#EF3C81', '#0DBF8C', '#2F73C0', '#C55E18', '#C899FF', '#C6D727',
......@@ -253,11 +247,6 @@
virtualSource.push(obj)
})
console.log('crSource', crSource);
console.log('displaySource', displaySource);
console.log('virtualSource', virtualSource);
for (var i = 0; i < barListAll.length; i++) {
legendList.push(barListAll[i].name);
}
......@@ -600,7 +589,7 @@
},
// 加载下方点击量明细
// 获取行为数据明细
async loadListByPageSort() {
const params = {
type: this.currentSortPage
......@@ -633,9 +622,35 @@
// console.log(111, res);
},
async getBarData() {
let res = await getBarMap()
console.log(res);
// 获取展览数量统计图数据
async getDisplayAmountData() {
const params = {
statisticWord: this.displayRadio
}
let res = await getExhibitionStatistic(params)
let data = res.data.exhibitionByRegion || res.data.exhibitionByDept || res.data.exhibitionByType
this.displayAmountData = data || []
},
// 获取文物数量统计图数据
async getCrAmountData() {
const params = {
statisticWord: this.crRadio
}
let res = await getCulturalRelicStatistic(params)
let data = res.data.culturalByRegion || res.data.culturalByDept || res.data.culturalByType || res.data.culturalByYears
this.crAmountData = data || []
},
// 获取虚拟展览数量统计统计图数据
async getVirtualAmountData() {
const params = {
statisticWord: this.virtualRadio
}
let res = await getVirtualStatistic(params)
// console.log(res);
let data = res.data.virtualByRegion || res.data.virtualByDept
this.virtualAmountData = data || []
},
// 改变页容量
......@@ -658,4 +673,14 @@
.home {
padding: 16px;
}
.el-tabs--card {
height: calc(100vh - 110px);
/* overflow-y: auto; */
}
.el-tab-pane {
height: calc(100vh - 110px);
overflow-y: auto;
}
</style>
\ No newline at end of file
src/views/literature/components/InfoEditDialog.vue
浏览文件 @ ad0972e3
......@@ -73,7 +73,7 @@
<div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit"
>确定<i class="el-icon-right" style="margin-left: 5px"></i
>确定<i class="el-icon-s-promotion" style="margin-left: 5px"></i
></el-button>
</div>
</el-dialog>
......
src/views/museum/components/InfoEditDialog.vue
浏览文件 @ ad0972e3
......@@ -92,7 +92,7 @@
<div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit"
>确定<i class="el-icon-right" style="margin-left: 5px"></i
>确定<i class="el-icon-s-promotion" style="margin-left: 5px"></i
></el-button>
</div>
</el-dialog>
......
src/views/role/components/InfoEditDialog.vue
浏览文件 @ ad0972e3
......@@ -73,11 +73,11 @@
<div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit"
>确定<i class="el-icon-right" style="margin-left: 5px"></i
>确定<i class="el-icon-s-promotion" style="margin-left: 5px"></i
></el-button>
</div>
</el-dialog>
</template>
</template>
<script>
import { addLiterature, editLiterature } from "@/api/literature";
......@@ -159,18 +159,11 @@ export default {
},
async handleSubmit() {
// debugger
// console.log(this.dialogForm);
// return
let params = JSON.parse(JSON.stringify(this.dialogForm));
// 回填文件
let file = this.$refs.pdf.getFiles();
let formData = new FormData();
// console.log("file", file);
// return
// debugger;
if (file[0].status == "ready") {
// debugger;
formData.append("files", file[0].raw);
let upLoadRes = await uploadFile(formData);
if (upLoadRes.code == 0) {
......
src/views/user/components/InfoEditDialog.vue
浏览文件 @ ad0972e3
......@@ -49,18 +49,16 @@
<el-form-item label="所属部门" :label-width="formLabelWidth">
<el-cascader
style="width: 100%"
v-model="dialogForm.deptId"
v-model="dialogForm.deptNo"
:options="orgTreeData"
:props="optionProps"
placeholder="请选择所属部门"
:key="deptId"
>
</el-cascader>
</el-form-item>
<el-form-item label="状态" :label-width="formLabelWidth">
<el-form-item label="是否启用" :label-width="formLabelWidth">
<el-switch v-model="status"> </el-switch>
</el-form-item>
</el-form>
</div>
<div class="dialog-footer">
......@@ -73,7 +71,7 @@
</template>
<script>
import { addLiterature, editLiterature } from "@/api/literature";
import { addUser, upadateUser } from "@/api/user";
import ManualUploader from "@/components/Uploader/ManualUploader.vue";
import { mapGetters } from "vuex";
import { uploadFile } from "@/utils/file";
......@@ -91,18 +89,18 @@ export default {
type: Object,
default: () => ({}),
},
orgTreeData:{
type: Object,
orgTreeData: {
type: Array,
default: () => [],
}
},
},
computed: {
...mapGetters(["userInfo"]),
title() {
if (this.dialogForm.literatureId) {
return "修改文献";
if (this.dialogForm.id) {
return "修改用户信息";
} else {
return "添加文献";
return "添加用户";
}
},
},
......@@ -110,16 +108,11 @@ export default {
form: {
handler: function (value) {
let that = this;
that.dialogForm = JSON.parse(JSON.stringify(value));
// 编辑状态
if (that.dialogForm.literatureId) {
if (that.dialogForm.id) {
// 回填状态
that.status = Boolean(Number(that.dialogForm.status));
// 回填文件
if (that.dialogForm.files) {
that.files = that.dialogForm.files;
}
}
},
immediate: true,
......@@ -132,14 +125,108 @@ export default {
deep: true,
immediate: true,
},
// orgTreeData(value){
// console.log(1111,value);
// }
},
data() {
var validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else {
var pattern =
/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,30}$/;
if (!pattern.test(value)) {
callback(
new Error(
"密码长度至少8位，至少含数字,大写字母,小写字母,特殊符其中三种"
)
);
}
callback();
}
};
var validateUserName = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入账号"));
} else {
var pattern = /^[0-9a-zA-Z|_]{4,20}$/g;
if (!pattern.test(value)) {
callback(new Error("账号长度4-20个字符，只能包括字母、数字、下划线"));
} else {
const formData = new FormData();
formData.append("userName", value);
checkUserName(formData)
.then((res) => {
if (res.code == "0") {
callback();
} else {
callback(res.msg);
}
})
.catch((err) => {
console.error(err);
});
}
}
};
var validatePhone = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入手机号"));
} else {
var pattern = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
if (!pattern.test(value)) {
callback(new Error("请输入合法手机号/电话号"));
} else {
const formData = new FormData();
formData.append("phone", value);
checkPhone(formData)
.then((res) => {
console.log(res);
if (res.code == "0") {
callback();
} else {
callback(res.msg);
}
})
.catch((err) => {
console.error(err);
});
}
}
};
return {
dialogForm: {},
formLabelWidth: "100px",
status: false,
files: [], //文献文件
dialogVisible: false,
optionProps: {
value: "id",
label: "label",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
rules: {
username: [
{ validator: validateUserName, trigger: "blur", required: true },
],
phone: [{ validator: validatePhone, trigger: "blur", required: true }],
nickName: [
{ required: true, message: "请输入昵称", trigger: "blur" },
{
pattern: /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
message:
"昵称长度2~10位，只能包含中文、英文大小写、数字及下划线，不能以下划线开头或结尾",
trigger: "blur",
},
],
password: [
{ validator: validatePass, trigger: "blur", required: true },
],
},
};
},
methods: {
......@@ -157,30 +244,18 @@ export default {
async handleSubmit() {
let params = JSON.parse(JSON.stringify(this.dialogForm));
// 回填文件
let file = this.$refs.pdf.getFiles();
let formData = new FormData();
if (file[0].status == "ready") {
formData.append("files", file[0].raw);
let upLoadRes = await uploadFile(formData);
if (upLoadRes.code == 0) {
params.pdfFile = upLoadRes.data[0].fileId;
} else {
this.$message.error("上传失败！:" + upLoadRes.data.msg);
}
} else if (file[0].status == "success") {
params.pdfFile = file[0].fileId;
}
// 修改状态
params.status = this.status ? 1 : 0;
if (params.literatureId) {
let res = await editLiterature(params);
console.log(22, params);
return;
if (params.id) {
let res = await upadateUser(params);
if (res.code == 0) {
this.$message.success("修改成功！");
this.reload();
}
} else {
let res = await addLiterature(params);
let res = await addUser(params);
if (res.code == 0) {
this.$message.success("添加成功！");
this.reload();
......
src/views/user/config.js
浏览文件 @ ad0972e3
export const title = [{
prop: "username",
label: "账号",
columnAlign: 'center',
},
{
prop: "nickName",
label: "昵称",
columnAlign: 'center',
},
{
prop: "deptName",
label: "所属部门",
columnAlign: 'center',
},
{
prop: "phone",
label: "手机号",
columnAlign: 'center',
},
{
prop: "status",
label: "状态",
columnAlign: 'center',
isStatus: true,
width: 100
},
prop: "username",
label: "账号",
columnAlign: 'center',
},
{
prop: "nickName",
label: "昵称",
columnAlign: 'center',
},
{
prop: "realName",
label: "真实姓名",
columnAlign: 'center',
},
// {
// prop: "sex",
// label: "性别",
// columnAlign: 'center',
// },
{
prop: "deptName",
label: "所属部门",
columnAlign: 'center',
showOverFlowToolTip: true
},
{
prop: "phone",
label: "手机号",
columnAlign: 'center',
},
{
prop: "status",
label: "状态",
columnAlign: 'center',
isStatus: true,
},
]
export const operates = {
operate: true,
label: "操作",
width: "260px",
minwidth: "220px",
width: "190px",
titleAlign: "center",
columnAlign: "center",
}
......
src/views/user/index.vue
浏览文件 @ ad0972e3
<!-- -->
<template>
<div class="users app-container">
<el-row :gutter="16">
<el-col :span="4">
<el-tree
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick"
default-expand-all
:expand-on-click-node="false"
></el-tree>
<el-col :span="6">
<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" default-expand-all
:expand-on-click-node="false"></el-tree>
</el-col>
<el-col :span="20">
<el-col :span="18">
<div class="top-bar">
<SearchBar :config="searchConfig" @search="search" @reset="reset" />
<el-button
type="primary"
@click.native="handleOperation({ type: 'add' })"
icon="el-icon-s-promotion"
>
新增</el-button
>
<el-button type="primary" @click.native="handleOperation({ type: 'add' })" icon="el-icon-s-promotion">
新增</el-button>
</div>
<TablePage
:data="list.records"
:tableTitle="tableTitle"
:operates="tableOperates"
>
<TablePage :data="list.records" :tableTitle="tableTitle" :operates="tableOperates">
<template v-slot:status="data">
<el-popconfirm
:title="getStatusTitle(data.scope.status)"
@onConfirm="handleChangeStatus(data.scope)"
>
<el-switch
slot="reference"
:value="Boolean(Number(data.scope.status))"
></el-switch>
<el-popconfirm :title="getStatusTitle(data.scope.status)" @onConfirm="handleChangeStatus(data.scope)">
<el-switch slot="reference" :value="Boolean(Number(data.scope.status))"></el-switch>
</el-popconfirm>
</template>
<template v-slot:operates="scope">
<TableOperation
:operations="tableOperations"
:rawData="scope.scope.row"
@handleOperation="handleOperation"
>
<TableOperation :operations="tableOperations" :rawData="scope.scope.row" @handleOperation="handleOperation">
</TableOperation>
</template>
</TablePage>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[10, 20, 40, 50]"
:page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="Number(list.current)" :page-sizes="[10, 20, 40, 50]" :page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper" :total="Number(list.total)" class="pagination">
</el-pagination>
</el-col>
</el-row>
<InfoEditDialog
:visible="dialogVisible"
:form="form"
:orgTreeData="treeData"
@handleClose="handleClose"
@refresh="loadData"
/>
<InfoEditDialog :visible="dialogVisible" :form="form" :orgTreeData="treeData" @handleClose="handleClose"
@refresh="loadListData" />
</div>
</template>
<script>
import TablePage from "@/components/Table/TablePage.vue";
import TableOperation from "@/components/Table/TableOperation.vue";
import SearchBar from "@/components/SearchBar";
import { title, operates, operations } from "./config";
import { getDeptTree, getUserList } from "@/api/user";
export default {
components: {
TablePage,
TableOperation,
SearchBar,
// InfoEditDialog,
},
computed: {
tableTitle() {
return title;
import TablePage from "@/components/Table/TablePage.vue";
import TableOperation from "@/components/Table/TableOperation.vue";
import SearchBar from "@/components/SearchBar";
import { title, operates, operations } from "./config";
import { getDeptTree, getUserList } from "@/api/user";
import InfoEditDialog from "./components/InfoEditDialog.vue";
export default {
components: {
TablePage,
TableOperation,
SearchBar,
InfoEditDialog,
},
tableOperates() {
return operates;
},
tableOperations() {
return operations;
},
},
data() {
return {
treeData: [],
defaultProps: {
children: "children",
label: "label",
computed: {
tableTitle() {
return title;
},
list: {
records: [],
size: 10,
current: 1,
total: 0,
tableOperates() {
return operates;
},
searchConfig: [
{
prop: "username",
type: "input",
label: "用户名",
},
{
prop: "nickName",
type: "input",
label: "昵称",
},
],
currentDeptNo: null,
form: {
username: "", //用户名
nickname: "", //昵称
password: "", //密码
phone: "", //手机号
realName: "", //真实姓名
deptNo: "",
tableOperations() {
return operations;
},
};
},
mounted() {
this.loadTreeData();
},
methods: {
// 加载树结构数据
async loadTreeData() {
const res = await getDeptTree();
console.log(111, res);
if (res.code == 0) {
this.treeData = res.data;
this.currentDeptNo = this.treeData[0].deptNo;
this.loadListData();
}
},
// 加载表格数据
async loadListData() {
var params = {
page: this.list.current,
limit: this.list.size,
deptNo: this.currentDeptNo,
};
const res = await getUserList(params);
if (res.code == 0) {
this.list = res.data;
getStatusTitle(status) {
return (status) => {
if (status) {
return '是否确定要弃用？'
} else {
return '是否确定要启用？'
}
}
}
},
async search(form) {
var params = {
page: this.list.current,
limit: this.list.size,
deptNo: this.currentDeptNo,
...form,
data() {
return {
treeData: [],
defaultProps: {
children: "children",
label: "label",
},
list: {
records: [],
size: 10,
current: 1,
total: 0,
},
searchConfig: [
{
prop: "username",
type: "input",
label: "用户名",
},
{
prop: "nickName",
type: "input",
label: "昵称",
},
],
currentDeptNo: null,
form: {
username: "", //用户名
nickname: "", //昵称
password: "", //密码
phone: "", //手机号
realName: "", //真实姓名
deptNo: "",
// sex:1,//1-男性 2-女性
status: 0,//启用状态
},
dialogVisible: false
};
const res = await getUserList(params);
if (res.code == 0) {
this.list = res.data;
}
},
reset() {
this.loadListData();
mounted() {
this.loadTreeData();
},
methods: {
// 加载树结构数据
async loadTreeData() {
const res = await getDeptTree();
console.log(111, res);
if (res.code == 0) {
this.treeData = res.data;
this.currentDeptNo = this.treeData[0].deptNo;
this.loadListData();
}
},
// 加载表格数据
async loadListData() {
var params = {
page: this.list.current,
limit: this.list.size,
deptNo: this.currentDeptNo,
};
const res = await getUserList(params);
if (res.code == 0) {
this.list = res.data;
}
},
handleNodeClick(e) {
console.log(e);
const { deptNo } = e;
this.currentDeptNo = deptNo;
this.loadListData();
},
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadListData();
},
async search(form) {
var params = {
page: this.list.current,
limit: this.list.size,
deptNo: this.currentDeptNo,
...form,
};
const res = await getUserList(params);
if (res.code == 0) {
this.list = res.data;
}
},
reset() {
this.loadListData();
},
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadListData();
},
handleNodeClick(e) {
const { deptNo } = e;
this.currentDeptNo = deptNo;
this.loadListData();
},
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadListData();
},
async handleOperation(value, row) {
console.log("handleOperation", value, row);
switch (value.type) {
case "add":
this.dialogVisible = true;
break;
case "edit":
// this.form = row;
this.dialogVisible = true;
break;
case "delete":
// let deleteRes = await deleteLt([row.literatureId]);
// if (deleteRes.code == 0) {
// this.$message.success("删除成功！");
// this.loadData();
// }
break;
}
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadListData();
},
async handleOperation(value, row) {
console.log("handleOperation", value, row);
switch (value.type) {
case "add":
this.dialogVisible = true;
break;
case "edit":
this.form = row;
this.dialogVisible = true;
break;
case "delete":
// let deleteRes = await deleteLt([row.literatureId]);
// if (deleteRes.code == 0) {
// this.$message.success("删除成功！");
// this.loadData();
// }
break;
}
},
handleClose() {
this.dialogVisible = false;
this.form = {
status: 0,
};
},
},
},
};
};
</script>
<style lang="scss" scoped>
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.top-bar {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 10px;
}
.pagination {
margin: 16px;
}
.pagination {
margin: 16px;
}
.el-button {
margin-bottom: 22px;
}
.el-button {
margin-bottom: 22px;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论