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

init

Browse Source
master
xy 2 years 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 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table' import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css' import 'vxe-table/lib/style.css'
import domZIndex from 'dom-zindex'
domZIndex.setCurrent(2000)
Vue.use(VxeUI) Vue.use(VxeUI)
Vue.use(VxeUITable) Vue.use(VxeUITable)

3
src/settings.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save