wangyifang
/
yikangyang-web
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
master
xy 1 year ago
parent 52d3b79473
commit 711b49b64d
4 changed files with 218 additions and 132 deletions
Show Stats Download Patch File Download Diff File

2
src/main.js
Unescape View File

@ -56,6 +56,8 @@ import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
import domZIndex from 'dom-zindex'
domZIndex.setCurrent(2000)
Vue.use(VxeUI)
Vue.use(VxeUITable)

3
src/settings.js
Unescape View File

@ -12,5 +12,6 @@ module.exports = {
* @type {boolean} true | false
* @description Whether show the logo in sidebar
*/
sidebarLogo: true
sidebarLogo: true,
uploadSize: 20 * 1024 * 1024,
}

12
src/utils/index.js
Unescape View File

@ -171,3 +171,15 @@ export function debounce(func, delay) {
}
}
export function formatFileSize(size) {
if (size < 1024 * 1024) {
const temp = size / 1024;
return temp.toFixed(2) + "KB";
} else if (size < 1024 * 1024 * 1024) {
const temp = size / (1024 * 1024);
return temp.toFixed(2) + "MB";
} else {
const temp = size / (1024 * 1024 * 1024);
return temp.toFixed(2) + "GB";
}
}

333
src/views/site/site.vue
Unescape View File

@ -1,161 +1,197 @@
<template>
<div>
<vxe-toolbar export print ref="toolbar">
<template #buttons>
<el-button
icon="el-icon-plus"
type="primary"
size="small"
@click="isShowAdd = true"
>新增</el-button
>
<el-button
icon="el-icon-search"
type="primary"
plain
size="small"
@click="getList"
>搜索</el-button
>
<el-card shadow="never" style="margin-top: 20px;">
<template #header>
<slot name="header">
<div>
<Icon :icon="$route.meta.icon"></Icon>
<span style="font-weight: 600;letter-spacing: 1px;padding-left: 10px;">{{ $route.meta.title }}</span>
</div>
</slot>
</template>
</vxe-toolbar>
<vxe-table
ref="table"
stripe
style="margin-top: 10px"
:loading="loading"
keep-source
show-overflow
:column-config="{ resizable: true }"
:edit-rules="validRules"
:edit-config="{
<vxe-toolbar export print custom ref="toolbar">
<template #buttons>
<el-button
v-if="isHasAuth('create')"
icon="el-icon-plus"
type="primary"
size="small"
@click="isShowAdd = true"
>新增</el-button
>
<el-button
v-if="isHasAuth('search')"
icon="el-icon-search"
type="primary"
plain
size="small"
@click="getList"
>搜索</el-button
>
</template>
</vxe-toolbar>
<vxe-table
ref="table"
stripe
style="margin-top: 10px"
:loading="loading"
:height="tableHeight"
keep-source
show-overflow
:column-config="{ resizable: true }"
:edit-rules="validRules"
:export-config="{}"
:edit-config="{
trigger: 'manual',
mode: 'row',
showStatus: true,
isHover: true,
autoClear: false,
}"
:align="allAlign"
:data="tableData"
>
<vxe-column type="seq" width="58" align="center" />
<vxe-column
field="name"
width="160"
title="名称"
:edit-render="{ name: 'input', attrs: { type: 'text' } }"
/>
<vxe-column
field="status"
width="140"
title="状态"
:edit-render="{ name: 'VxeSelect', options: [{ name: '是', value: 1 },{ name: '否', value: 0 }] }"
/>
<vxe-column
field="content"
width="160"
title="内容"
:edit-render="{ name: 'input', attrs: { type: 'text' } }"
/>
<vxe-column
field="sort"
width="160"
title="排序"
:edit-render="{ name: 'input', attrs: { type: 'number' } }"
/>
<vxe-column field="operate" title="操作" min-width="220">
<template #default="{ row }">
<template v-if="isActiveStatus(row)">
<el-button size="small" type="primary" @click="saveRowEvent(row)"
>保存</el-button
>
<el-button
size="small"
type="primary"
plain
@click="cancelRowEvent(row)"
>取消</el-button
>
</template>
<template v-else>
<el-button size="small" type="warning" @click="editRowEvent(row)"
>编辑</el-button
>
<el-button
size="small"
type="danger"
@click="destroyRowEvent(row)"
>删除</el-button
>
:align="allAlign"
:data="tableData"
>
<vxe-column type="seq" width="58" align="center" />
<vxe-column
field="name"
width="160"
title="名称"
:edit-render="{ name: 'input', attrs: { type: 'text' } }"
/>
<vxe-column
field="status"
width="140"
title="状态"
:edit-render="{ name: 'VxeSelect', options: [{ label: '是', value: 1 },{ label: '否', value: 0 }] }"
/>
<vxe-column
field="content"
width="160"
title="内容"
:edit-render="{ name: 'input', attrs: { type: 'text' } }"
/>
<vxe-column
field="sort"
width="160"
title="排序"
:edit-render="{ name: 'input', attrs: { type: 'number' } }"
/>
<vxe-column field="operate" title="操作" min-width="220">
<template #default="{ row }">
<template v-if="isActiveStatus(row)">
<el-button size="small" type="primary" @click="saveRowEvent(row)"
>保存</el-button
>
<el-button
size="small"
type="primary"
plain
@click="cancelRowEvent(row)"
>取消</el-button
>
</template>
<template v-else>
<el-button v-if="isHasAuth('detail')" size="small" type="primary" plain @click="detail(row)"
>查看</el-button
>
<el-button v-if="isHasAuth('edit')" size="small" type="warning" @click="editRowEvent(row)"
>编辑</el-button
>
<el-button
v-if="isHasAuth('delete')"
size="small"
type="danger"
@click="destroyRowEvent(row)"
>删除</el-button
>
</template>
</template>
</template>
</vxe-column>
</vxe-table>
<el-pagination
style="margin-top: 10px"
:current-page.sync="select.page"
:page-sizes="[20, 30, 40, 50]"
:page-size.sync="select.page_size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="
</vxe-column>
</vxe-table>
<el-pagination
style="margin-top: 10px"
:current-page.sync="select.page"
:page-sizes="[20, 30, 40, 50]"
:page-size.sync="select.page_size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="
(e) => {
select.page_size = e;
select.page = 1;
getList();
}
"
@current-change="
@current-change="
(e) => {
select.page = e;
getList();
}
"
/>
</el-card>
<AddSite
ref="AddSite"
:is-show.sync="isShowAdd"
@refresh="getList"
/>
<ShowSite
ref="ShowSite"
:is-show.sync="isShowDetail"
/>
<!-- <AddSite-->
<!-- ref="AddSite"-->
<!-- :rooms="rooms"-->
<!-- :is-show.sync="isShowAdd"-->
<!-- @refresh="getList"-->
<!-- />-->
</div>
</template>
<script>
import { deepCopy } from "@/utils";
import Icon from "@/layout/components/Sidebar/Item.vue"
import { authMixin } from "@/mixin/authMixin"
import { uploadSize } from "@/settings";
import { deepCopy, formatFileSize } from "@/utils";
import { destroy, index, save } from "@/api/site/site";
// import AddMeeting from "./components/AddSite.vue";
import AddSite from "./components/AddSite.vue";
import ShowSite from "./components/ShowSite.vue";
import axios from "axios";
import { getToken } from "@/utils/auth";
export default {
name: "Site",
mixins: [authMixin],
components: {
//AddMeeting
Icon,
AddSite,
ShowSite,
},
data() {
return {
uploadSize,
examineKey: 0,
isShowAdd: false,
isShowDetail: false,
loading: false,
tableHeight: 400,
select: {
page: 1,
page_size: 20,
@ -166,16 +202,19 @@
tableData: [],
validRules: {},
form: {
name: "",
status: "",
content: "",
sort: 0,
id: '',
name: '',
status: 1,
content: '',
sort: '',
},
};
},
computed: {
@ -186,22 +225,49 @@
}
};
},
isHasAuth() {
return function (auth) {
return this.auths_auth_mixin.indexOf(auth) !== -1
}
}
},
created() {
this.getList();
},
mounted() {
this.bindToolbar()
this.calcTableHeight()
},
methods: {
calcTableHeight() {
let clientHeight = document.documentElement.clientHeight;
let cardTitle = document.querySelector(".el-card__header")?.getBoundingClientRect()?.height;
let search = document.querySelector(".vxe-toolbar")?.getBoundingClientRect()?.height;
let paginationHeight = (document.querySelector(".el-pagination")?.getBoundingClientRect()?.height ?? 0) + 10; //分页的高度
let topHeight = 50; //页面 头部
let padding = 80;
let margin = 20;
this.tableHeight =
clientHeight - cardTitle - search - paginationHeight - topHeight - padding - margin;
},
async detail (row) {
await this.$refs["ShowSite"].getDetail(row.id)
this.isShowDetail = true
},
uploadMethod(file, row, fieldName) {
const formData = new FormData()
formData.append('file', file)
window.$_uploading = true
return axios.post(process.env.VUE_APP_UPLOAD_API, formData, {
headers: {
Authorization: `Bearer ${getToken()}`,
}
}).then((response) => {
window.$_uploading = false
if (response.status === 200 && !response.data.code) {
if (!(this.form[fieldName] instanceof Array)) {
this.form[fieldName] = []
@ -214,6 +280,8 @@
} else {
this.$message.error("上传失败")
}
}).catch(err => {
window.$_uploading = false
})
},
bindToolbar() {
@ -241,7 +309,7 @@
async getList() {
this.loading = true;
try {
const res = await index(this.select);
const res = await index(this.select, false);
this.tableData = res.data;
this.total = res.total;
this.loading = false;
@ -252,6 +320,10 @@
},
async saveRowEvent(row) {
if (window.$_uploading) {
this.$message.warning("文件正在上传中")
return
}
try {
const errMap = await this.$refs["table"].validate();
if (errMap) {
@ -267,7 +339,6 @@
form[key] = row[key];
}
this.loading = true;
// TODO: 如果有附件初始值赋值一下
await save(form);
await this.getList();
this.loading = false;

Write Preview
Loading…
Cancel
Save