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 023f029cd7
commit 990c7b4ed7
1 changed files with 330 additions and 328 deletions
Show Stats Download Patch File Download Diff File

658
src/views/OrderRefund/OrderRefund.vue
Unescape View File

@ -1,377 +1,379 @@
<template> <template>
<div> <div>
<el-card shadow="never" style="margin-top: 20px;"> <el-card shadow="never" style="margin-top: 20px;">
<template #header> <template #header>
<slot name="header"> <slot name="header">
<vxe-toolbar :export="isHasAuth('export')" :print="isHasAuth('print')" custom ref="toolbar"> <vxe-toolbar ref="toolbar" :export="isHasAuth('export')" :print="isHasAuth('print')" custom>
<template #buttons> <template #buttons>
<el-button <el-button
v-if="isHasAuth('create')" v-if="isHasAuth('create')"
icon="el-icon-plus" icon="el-icon-plus"
type="primary" type="primary"
size="small" size="small"
@click="isShowAdd = true" @click="isShowAdd = true"
>新增</el-button >新增</el-button>
> <el-button
<el-button v-if="isHasAuth('search')"
v-if="isHasAuth('search')" icon="el-icon-search"
icon="el-icon-search" type="primary"
type="primary" plain
plain size="small"
size="small" @click="getList"
@click="getList" >搜索</el-button>
>搜索</el-button
>
</template>
</vxe-toolbar>
</slot>
</template> </template>
</vxe-toolbar>
</slot>
</template>
<vxe-table <vxe-table
ref="table" ref="table"
stripe stripe
style="margin-top: 10px" style="margin-top: 10px"
:loading="loading" :loading="loading"
:height="tableHeight" :height="tableHeight"
keep-source keep-source
show-overflow show-overflow
:menu-config="{ :menu-config="{
className: 'my-menus', className: 'my-menus',
body: { body: {
options: [ options: [
[ [
{ code: 'copy', name: '复制', prefixConfig: { icon: 'vxe-icon-copy' }, suffixConfig: { content: 'Ctrl+C' } }, { code: 'copy', name: '复制', prefixConfig: { icon: 'vxe-icon-copy' }, suffixConfig: { content: 'Ctrl+C' } },
{ code: 'remove', name: '删除', prefixConfig: { icon: 'vxe-icon-delete-fill', className: 'color-red' } } { code: 'remove', name: '删除', prefixConfig: { icon: 'vxe-icon-delete-fill', className: 'color-red' } }
], ],
] ]
} }
}" }"
@menu-click="contextMenuClickEvent" :row-config="{ isCurrent: true, isHover: true }"
:row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }"
:column-config="{ resizable: true }" :export-config="{}"
:export-config="{}" :edit-rules="validRules"
:edit-rules="validRules" :edit-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"
> @menu-click="contextMenuClickEvent"
<vxe-column type="seq" width="58" align="center" /> >
<vxe-column type="seq" width="58" align="center" />
<vxe-column field="no" title="退款编号" width="180" align="center" />
<vxe-column field="order.no" title="订单编号" width="180" align="center" />
<vxe-column
align="center" <vxe-column
field="status" align="center"
width="180" field="status"
title="状态" width="180"
:edit-render="{ name: 'VxeSelect', options: [{'value':0,'label':'未退款'},{'value':1,'label':'退款成功'},{'value':2,'label':'退款失败'}], props: { multiple: false }, optionProps: { value: 'value', label: 'label' } }" title="状态"
/> :edit-render="{ name: 'VxeSelect', options: [{'value':0,'label':'未退款'},{'value':1,'label':'退款成功'},{'value':2,'label':'退款失败'}], props: { multiple: false }, optionProps: { value: 'value', label: 'label' } }"
/>
<vxe-column field="operate" header-align="center" title="操作" min-width="220">
<template #default="{ row }"> <vxe-column field="created_at" title="创建时间" width="180" align="center" />
<template v-if="isActiveStatus(row)">
<el-button size="small" type="primary" @click="saveRowEvent(row)" <vxe-column field="operate" header-align="center" title="操作" min-width="220">
>保存</el-button <template #default="{ row }">
> <template v-if="isActiveStatus(row)">
<el-button <el-button
size="small" size="small"
type="primary" type="primary"
plain @click="saveRowEvent(row)"
@click="cancelRowEvent(row)" >保存</el-button>
>取消</el-button <el-button
> size="small"
</template> type="primary"
<template v-else> plain
<el-button v-if="isHasAuth('detail')" size="small" type="primary" plain @click="detail(row)" @click="cancelRowEvent(row)"
>查看</el-button >取消</el-button>
> </template>
<el-button v-if="isHasAuth('edit')" size="small" type="warning" @click="editRowEvent(row)" <template v-else>
>编辑</el-button <el-button
> v-if="isHasAuth('detail')"
<el-button size="small"
v-if="isHasAuth('delete')" type="primary"
size="small" plain
type="danger" @click="detail(row)"
@click="destroyRowEvent(row)" >查看</el-button>
>删除</el-button <el-button
> v-if="isHasAuth('edit')"
</template> size="small"
</template> type="warning"
</vxe-column> @click="editRowEvent(row)"
</vxe-table> >编辑</el-button>
<el-button
v-if="isHasAuth('delete')"
size="small"
type="danger"
@click="destroyRowEvent(row)"
>删除</el-button>
</template>
</template>
</vxe-column>
</vxe-table>
<el-pagination
<el-pagination style="margin-top: 10px;display: flex;justify-content: flex-end;"
style="margin-top: 10px;display: flex;justify-content: flex-end;" :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>
<AddOrderRefund </el-card>
ref="AddOrderRefund"
<AddOrderRefund
:is-show.sync="isShowAdd" ref="AddOrderRefund"
@refresh="getList"
/> :is-show.sync="isShowAdd"
<ShowOrderRefund @refresh="getList"
ref="ShowOrderRefund" />
<ShowOrderRefund
:is-show.sync="isShowDetail" ref="ShowOrderRefund"
/>
:is-show.sync="isShowDetail"
</div> />
</div>
</template> </template>
<script> <script>
import VxeUI from "vxe-pc-ui"; import VxeUI from 'vxe-pc-ui'
import { authMixin } from "@/mixin/authMixin" import { authMixin } from '@/mixin/authMixin'
import { uploadSize } from "@/settings"; import { uploadSize } from '@/settings'
import { deepCopy } from "@/utils"; import { deepCopy } from '@/utils'
import { destroy, index, save } from "@/api/order-refund/order-refund"; import { destroy, index, save } from '@/api/order-refund/order-refund'
import AddOrderRefund from "./components/AddOrderRefund.vue"; import AddOrderRefund from './components/AddOrderRefund.vue'
import ShowOrderRefund from "./components/ShowOrderRefund.vue"; import ShowOrderRefund from './components/ShowOrderRefund.vue'
import axios from "axios"; import axios from 'axios'
import { getToken } from "@/utils/auth"; import { getToken } from '@/utils/auth'
export default { export default {
name: "OrderRefund", name: 'OrderRefund',
mixins: [authMixin], components: {
components: {
AddOrderRefund,
AddOrderRefund, ShowOrderRefund
ShowOrderRefund, },
}, mixins: [authMixin],
data() { data() {
return { return {
uploadSize, uploadSize,
examineKey: 0, examineKey: 0,
isShowAdd: false, isShowAdd: false,
isShowDetail: false, isShowDetail: false,
loading: false,
tableHeight: 400,
select: {
page: 1,
page_size: 20,
keyword: '',
show_relation: ['order']
loading: false,
tableHeight: 400,
select: {
page: 1,
page_size: 20,
keyword: '',
show_relation: [],
},
total: 0,
allAlign: null,
tableData: [],
form: {
id: '',
status: '',
},
validRules: {
}, },
total: 0,
allAlign: null,
tableData: [],
form: {
id: '',
status: ''
};
},
computed: {
isActiveStatus() {
return function (row) {
if (this.$refs["table"]) {
return this.$refs["table"].isEditByRow(row);
}
};
}, },
isHasAuth() { validRules: {
return function (auth) {
return this.auths_auth_mixin.indexOf(auth) !== -1 }
}
},
computed: {
isActiveStatus() {
return function(row) {
if (this.$refs['table']) {
return this.$refs['table'].isEditByRow(row)
} }
} }
}, },
created() { isHasAuth() {
return function(auth) {
this.getList(); return this.auths_auth_mixin.indexOf(auth) !== -1
}, }
mounted() { }
this.bindToolbar() },
this.calcTableHeight() created() {
this.getList()
},
mounted() {
this.bindToolbar()
this.calcTableHeight()
},
methods: {
calcTableHeight() {
const clientHeight = document.documentElement.clientHeight
const cardTitle = document.querySelector('.el-card__header')?.getBoundingClientRect()?.height
const search = document.querySelector('.vxe-toolbar')?.getBoundingClientRect()?.height
const paginationHeight = (document.querySelector('.el-pagination')?.getBoundingClientRect()?.height ?? 0) + 10 // 分页的高度
const topHeight = 50 // 页面 头部
const padding = 80
const margin = 20
this.tableHeight =
clientHeight - cardTitle - search - paginationHeight - topHeight - padding - margin
}, },
methods: { contextMenuClickEvent({ menu, row, column }) {
calcTableHeight() { switch (menu.code) {
let clientHeight = document.documentElement.clientHeight; case 'copy':
let cardTitle = document.querySelector(".el-card__header")?.getBoundingClientRect()?.height; // 示例
let search = document.querySelector(".vxe-toolbar")?.getBoundingClientRect()?.height; if (row && column) {
let paginationHeight = (document.querySelector(".el-pagination")?.getBoundingClientRect()?.height ?? 0) + 10; //分页的高度 if (VxeUI.clipboard.copy(row[column.field])) {
let topHeight = 50; //页面 头部 this.$message.success('已复制到剪贴板！')
let padding = 80;
let margin = 20;
this.tableHeight =
clientHeight - cardTitle - search - paginationHeight - topHeight - padding - margin;
},
contextMenuClickEvent ({ menu, row, column }) {
switch (menu.code) {
case 'copy':
// 示例
if (row && column) {
if (VxeUI.clipboard.copy(row[column.field])) {
this.$message.success('已复制到剪贴板！')
}
}
break
case 'remove':
if (row && column) {
this.destroyRowEvent(row)
}
default:
}
},
async detail (row) {
await this.$refs["ShowOrderRefund"].getDetail(row.id)
this.isShowDetail = true
},
uploadMethod(file) {
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) {
return {
response: response.data,
name: response.data.original_name,
url: response.data.url
} }
} else {
this.$message.error("上传失败")
} }
}).catch(_ => { break
window.$_uploading = false case 'remove':
}) if (row && column) {
}, this.destroyRowEvent(row)
bindToolbar() {
this.$nextTick(() => {
if (this.$refs["table"] && this.$refs["toolbar"]) {
this.$refs["table"].connect(this.$refs["toolbar"]);
} }
}); default:
}, }
},
async detail(row) {
await this.$refs['ShowOrderRefund'].getDetail(row.id)
this.isShowDetail = true
},
editRowEvent(row) { uploadMethod(file) {
if (this.$refs["table"]) { const formData = new FormData()
this.$refs["table"].setEditRow(row); formData.append('file', file)
window.$_uploading = true
return axios.post(process.env.VUE_APP_UPLOAD_API, formData, {
headers: {
Authorization: `Bearer ${getToken()}`
} }
}, }).then((response) => {
cancelRowEvent(row) { window.$_uploading = false
if (this.$refs["table"]) { if (response.status === 200 && !response.data.code) {
this.$refs["table"].clearEdit().then(() => { return {
// 还原行数据 response: response.data,
this.$refs["table"].revertData(row); name: response.data.original_name,
}); url: response.data.url
}
} else {
this.$message.error('上传失败')
} }
}, }).catch(_ => {
window.$_uploading = false
async getList() { })
this.loading = true; },
try { bindToolbar() {
const res = await index(this.select, false); this.$nextTick(() => {
this.tableData = res.data; if (this.$refs['table'] && this.$refs['toolbar']) {
this.total = res.total; this.$refs['table'].connect(this.$refs['toolbar'])
this.loading = false;
} catch (err) {
console.error(err);
this.loading = false;
} }
}, })
},
async saveRowEvent(row) { editRowEvent(row) {
if (window.$_uploading) { if (this.$refs['table']) {
this.$message.warning("文件正在上传中") this.$refs['table'].setEditRow(row)
return }
} },
try { cancelRowEvent(row) {
const errMap = await this.$refs["table"].validate(); if (this.$refs['table']) {
if (errMap) { this.$refs['table'].clearEdit().then(() => {
throw new Error(errMap); // 还原行数据
} this.$refs['table'].revertData(row)
await this.$confirm("确认保存？", "提示", { })
confirmButtonText: "确认", }
cancelButtonText: "取消", },
});
await this.$refs["table"].clearEdit(); async getList() {
let form = deepCopy(this.form); this.loading = true
for (const key in form) { try {
form[key] = row[key]; const res = await index(this.select, false)
} this.tableData = res.data
this.total = res.total
this.loading = true; this.loading = false
await save(form, false); } catch (err) {
await this.getList(); console.error(err)
this.loading = false; this.loading = false
} catch (err) { }
this.loading = false; },
async saveRowEvent(row) {
if (window.$_uploading) {
this.$message.warning('文件正在上传中')
return
}
try {
const errMap = await this.$refs['table'].validate()
if (errMap) {
throw new Error(errMap)
} }
}, await this.$confirm('确认保存？', '提示', {
async destroyRowEvent(row) { confirmButtonText: '确认',
try { cancelButtonText: '取消'
await this.$confirm("确认删除？", "提示", { })
confirmButtonText: "确认", await this.$refs['table'].clearEdit()
cancelButtonText: "取消", const form = deepCopy(this.form)
}); for (const key in form) {
this.loading = true; form[key] = row[key]
if (row.id) {
await destroy({
id: row.id,
},false);
await this.getList();
} else {
console.log(row);
this.tableData.splice(
this.tableData.findIndex((i) => i._X_ROW_KEY === row._X_ROW_KEY),
1
);
}
this.loading = false;
} catch (err) {
this.loading = false;
} }
},
this.loading = true
await save(form, false)
await this.getList()
this.loading = false
} catch (err) {
this.loading = false
}
}, },
}; async destroyRowEvent(row) {
try {
await this.$confirm('确认删除？', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消'
})
this.loading = true
if (row.id) {
await destroy({
id: row.id
}, false)
await this.getList()
} else {
console.log(row)
this.tableData.splice(
this.tableData.findIndex((i) => i._X_ROW_KEY === row._X_ROW_KEY),
1
)
}
this.loading = false
} catch (err) {
this.loading = false
}
}
}
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

Write Preview
Loading…
Cancel
Save