huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

权限控制

milestone-20250913-现金管理
ZhangYong 2 weeks ago
parent
09d55d3ac0
commit
5ff3493269
1 changed files with 262 additions and 242 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 504
      src/views/moneyManage/receiveDetail/receiveDetail.vue

504
src/views/moneyManage/receiveDetail/receiveDetail.vue
View File

@ -8,33 +8,33 @@
<el-input placeholder="请输入精网号" style="width:10vw;" clearable></el-input>
</div>
<div class="rowItem">
<text style="width: 4vw;">客户姓名</text>
<el-text style="width: 4vw;">客户姓名</el-text>
<el-input placeholder="请输入客户姓名" style="width:10vw;" clearable></el-input>
</div>
<div class="rowItem">
<text style="width: 4vw;">所属地区</text>
<el-text style="width: 4vw;">所属地区</el-text>
<el-select placeholder="请选择所属地区" style="width:10vw;" clearable></el-select>
</div>
<div class="rowItem">
<text style="width: 4vw;">订单状态</text>
<el-text style="width: 4vw;">订单状态</el-text>
<el-select placeholder="请选择订单状态" style="width: 10vw;" clearable></el-select>
</div>
<div class="rowItem">
<text style="width: 4vw;">支付方式</text>
<el-text style="width: 4vw;">支付方式</el-text>
<el-select placeholder="请选择支付方式" style="width: 10vw;" clearable></el-select>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="rowItem">
<text style="width: 4vw;">活动名称</text>
<el-text style="width: 4vw;">活动名称</el-text>
<el-select placeholdert="请选择活动方式" style="width: 10vw;" clearable></el-select>
</div>
<div class="rowItem">
<text style="width: 4vw;">产品名称</text>
<el-text style="width: 4vw;">产品名称</el-text>
<el-select placeholder="请选择产品名称" style="width: 10vw;" clearable></el-select>
</div>
<div class="rowItem" style="width: 30vw">
<text style="width: 4vw; margin-left: 0.5vw;">付款时间</text>
<el-text style="width: 4vw; margin-left: 0.5vw;">付款时间</el-text>
<el-date-picker v-model="getTime" type="datetimerange" range-separator="至"
start-placeholder="起始时间" end-placeholder="结束时间" style="width: 22vw; "
@change="handleDatePickerChange" :default-time="defaultTime"
@ -47,6 +47,8 @@
<el-button type="success">重置</el-button>
<el-button type="primary">导出excel</el-button>
<el-button type="primary" style="background-color: #5870FF;">导出列表</el-button>
<el-button type="primary" @click="checkKefu">切换客服</el-button>
<el-button type="success" @click="checkCaiwu">切换财务</el-button>
</div>
</div>
</el-card>
@ -56,7 +58,7 @@
<div class="card2">
<el-card>
<div class="btns">
<div class="tabs">
<div class="tabs" v-if="caiwu">
<el-button-group>
<el-button class="btnItem"
:style="{ backgroundColor: activeTab === 'wait' ? '#2741DE' : '#E5EBFE', color: activeTab === 'wait' ? 'white' : '#666' }"
@ -76,7 +78,7 @@
</el-button-group>
</div>
<div class="btnAdd">
<el-button @click="openAddForm" type="success">添加收款</el-button>
<el-button @click="openAddForm" type="success" v-if="kefu">添加收款</el-button>
</div>
</div>
@ -116,8 +118,15 @@
</el-table-column>
<el-table-column prop="" label="备注" width="150px" show-overflow-tooltip>
</el-table-column>
<el-table-column fixed="right" prop="adminName" label="订单状态" width="100px" />
<el-table-column fixed="right" prop="rejectReason" label="操作" width="100px" />
<el-table-column v-if="kefu" fixed="right" prop="orderStatus" label="订单状态" width="100px" />
<el-table-column fixed="right" label="操作" width="100px" v-if="activeTab != 'reject'">
<template #default=scope>
<span v-if="kefu && scope.row.orderStatus == '已通过'" style="color: #FA5A1E;">退款</span>
<span v-else-if="kefu && scope.row.orderStatus == '已撤回'" style="color: #2741DE;">编辑</span>
<span v-else-if="activeTab == 'wait'&& !kefu" style="color: #2741DE;">审核</span>
<span v-else-if="activeTab == 'pass'&& !kefu" style="color: #2741DE;">编辑</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination">
@ -183,268 +192,279 @@
</el-dialog>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
import API from '@/util/http.js'
//==================== 标签切换 =========================
const activeTab = ref('wait')
const navigateTo = (tab) => {
if (tab === 'wait') {
activeTab.value = 'wait'
} else if (tab === 'pass') {
activeTab.value = 'pass'
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
import API from '@/util/http.js'
//==================== 标签切换 =========================
const activeTab = ref('wait')
const navigateTo = (tab) => {
if (tab === 'wait') {
activeTab.value = 'wait'
} else if (tab === 'pass') {
activeTab.value = 'pass'
}
else if (tab === 'reject') {
activeTab.value = 'reject'
}
}
else if (tab === 'reject') {
activeTab.value = 'reject'
const kefu = ref(true)
const caiwu = ref(true)
const checkKefu = () => {
kefu.value = true
caiwu.value = false
}
}
//================= 客服新增弹窗 ==================
const addFormData = ref({
})
const addFormisible = ref(false)
const uploadRef = ref()
const openAddForm = () => {
addFormisible.value = true
}
const closeAddForm = () => {
addFormisible.value = false
addFormData.value = {}
}
const handleImgSuccess = (response, uploadFile) => {
try {
console.log('11', response)
addFormData.value.imageUrl = response.data.url
console.log('22', response.data.url)
} catch (error) {
console.log('报错信息', error)
ElMessage.error(response.msg || '图片上传失败')
const checkCaiwu = () => {
kefu.value = false
caiwu.value = true
}
}
const handelImgErr = (err) => {
console.log(err);
addFormData.value.imageUrl = null
ElMessage.error("图片上传失败")
}
const beforeUpload = (rawFile) => {
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
ElMessage.error('图片必须是jpg或png类型!')
return false
} else if (rawFile.size / 1024 / 1024 > 1) {
ElMessage.error('图片大小不能超过 1MB!')
return false
//================= 客服新增弹窗 ==================
const addFormData = ref({
})
const addFormisible = ref(false)
const uploadRef = ref()
const openAddForm = () => {
addFormisible.value = true
}
return true
}
const handleImageChange = (file) => {
uploadRef.value.submit()
}
const customUpload = async (options) => {
try {
const formData = new FormData()
formData.append('file', options.file)
const response = await API({
url: 'https://api.homilychart.com/hljw/api/aws/upload',
method: 'POST',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
if (response.code === 200 && response.data) {
handleImgSuccess(response, options.file)
ElMessage.success(response.msg || '上传成功')
} else {
options.onError(response)
ElMessage.error(response.msg || '上传失败')
}
} catch (error) {
console.error('上传错误:', error)
ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`)
const closeAddForm = () => {
addFormisible.value = false
addFormData.value = {}
}
}
//========================分页相关==================
const pageInfo = ref({
pageSize: 10,
pageNum: 1
})
const total = ref(0)
const tableData = [
{
jwcode: 'HW2023001',
name: '张三',
market: '北京',
activity: '春季促销活动',
rateName: '黄金投资产品A',
money: '人民币',
permanentGold: '5000.00',
freeGold: '银行转账',
remark: '2023-03-15 10:30:00',
voucher: 'https://example.com/images/voucher1.jpg',
adminName: '已支付',
rejectReason: '无',
},
{
jwcode: 'HW2023002',
name: '李四',
market: '上海',
activity: '夏日特惠活动',
rateName: '白银理财产品B',
money: '人民币',
permanentGold: '3000.00',
freeGold: '支付宝',
remark: '2023-06-20 14:15:00',
voucher: 'https://example.com/images/voucher2.jpg',
adminName: '已支付',
rejectReason: '无',
},
{
jwcode: 'HW2023003',
name: '王五',
market: '广州',
activity: '秋季回馈活动',
rateName: '铂金收藏产品C',
money: '美元',
permanentGold: '1000.00',
freeGold: '微信支付',
remark: '2023-09-10 09:20:00',
voucher: '',
adminName: '待支付',
rejectReason: '无',
},
{
jwcode: 'HW2023004',
name: '赵六',
market: '深圳',
activity: '冬季感恩活动',
rateName: '钻石尊享产品D',
money: '欧元',
permanentGold: '2000.00',
freeGold: '信用卡',
remark: '2023-12-05 16:40:00',
voucher: 'https://example.com/images/voucher4.jpg',
adminName: '已支付',
rejectReason: '无',
},
{
jwcode: 'HW2023005',
name: '孙七',
market: '成都',
activity: '周年庆典活动',
rateName: '翡翠投资产品E',
money: '人民币',
permanentGold: '8000.00',
freeGold: '银行转账',
remark: '2024-01-20 11:10:00',
voucher: '',
adminName: '已驳回',
rejectReason: '支付金额有误',
const handleImgSuccess = (response, uploadFile) => {
try {
console.log('11', response)
addFormData.value.imageUrl = response.data.url
console.log('22', response.data.url)
} catch (error) {
console.log('报错信息', error)
ElMessage.error(response.msg || '图片上传失败')
}
}
];
</script>
<style scoped lang="scss">
.content {
height: 100%;
width: 83vw;
.card1 {
width: 100%;
const handelImgErr = (err) => {
console.log(err);
addFormData.value.imageUrl = null
ElMessage.error("图片上传失败")
}
const beforeUpload = (rawFile) => {
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
ElMessage.error('图片必须是jpg或png类型!')
return false
} else if (rawFile.size / 1024 / 1024 > 1) {
ElMessage.error('图片大小不能超过 1MB!')
return false
}
return true
}
const handleImageChange = (file) => {
uploadRef.value.submit()
}
.row {
height: 4vh;
width: 80vw;
display: flex;
min-height: 40px;
const customUpload = async (options) => {
try {
const formData = new FormData()
formData.append('file', options.file)
.rowItem {
display: flex;
width: 15vw;
align-items: center;
justify-content: center;
margin-right: 0.5vw;
const response = await API({
url: 'https://api.homilychart.com/hljw/api/aws/upload',
method: 'POST',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
if (response.code === 200 && response.data) {
handleImgSuccess(response, options.file)
ElMessage.success(response.msg || '上传成功')
} else {
options.onError(response)
ElMessage.error(response.msg || '上传失败')
}
} catch (error) {
console.error('上传错误:', error)
ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`)
}
}
//========================分页相关==================
const pageInfo = ref({
pageSize: 10,
pageNum: 1
})
const total = ref(0)
const tableData = [
{
jwcode: 'HW2023001',
name: '张三',
market: '北京',
activity: '春季促销活动',
rateName: '黄金投资产品A',
money: '人民币',
permanentGold: '5000.00',
freeGold: '银行转账',
remark: '2023-03-15 10:30:00',
voucher: 'https://example.com/images/voucher1.jpg',
orderStatus: '待审核',
},
{
jwcode: 'HW2023002',
name: '李四',
market: '上海',
activity: '夏日特惠活动',
rateName: '白银理财产品B',
money: '人民币',
permanentGold: '3000.00',
freeGold: '支付宝',
remark: '2023-06-20 14:15:00',
voucher: 'https://example.com/images/voucher2.jpg',
orderStatus: '已通过',
},
{
jwcode: 'HW2023003',
name: '王五',
market: '广州',
activity: '秋季回馈活动',
rateName: '铂金收藏产品C',
money: '美元',
permanentGold: '1000.00',
freeGold: '微信支付',
remark: '2023-09-10 09:20:00',
voucher: '',
orderStatus: '已撤回',
},
{
jwcode: 'HW2023004',
name: '赵六',
market: '深圳',
activity: '冬季感恩活动',
rateName: '钻石尊享产品D',
money: '欧元',
permanentGold: '2000.00',
freeGold: '信用卡',
remark: '2023-12-05 16:40:00',
voucher: 'https://example.com/images/voucher4.jpg',
orderStatus: '已驳回',
rejectReason: '无',
},
{
jwcode: 'HW2023005',
name: '孙七',
market: '成都',
activity: '周年庆典活动',
rateName: '翡翠投资产品E',
money: '人民币',
permanentGold: '8000.00',
freeGold: '银行转账',
remark: '2024-01-20 11:10:00',
voucher: '',
orderStatus: '已驳回',
}
];
</script>
<style scoped lang="scss">
.content {
height: 100%;
width: 83vw;
.buttons {
.card1 {
width: 100%;
.row {
height: 4vh;
width: 80vw;
display: flex;
justify-content: center;
align-items: center;
margin-left: 10px;
min-height: 40px;
.rowItem {
display: flex;
width: 15vw;
align-items: center;
justify-content: center;
margin-right: 0.5vw;
}
.buttons {
display: flex;
justify-content: center;
align-items: center;
margin-left: 10px;
}
}
}
}
.card2 {
width: 100%;
.card2 {
width: 100%;
margin-top: 2vh;
margin-top: 2vh;
.btns {
display: flex;
align-items: center;
justify-content: space-between;
.tabs{
min-width: 300px;
.btnItem {
margin-left: 10px;
border-radius: 5px;
}
}
.btnAdd {
flex: 1;
justify-content: flex-end;
margin-right: 1vw;
.btns {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
.tabs {
min-width: 300px;
.btnItem {
margin-left: 10px;
border-radius: 5px;
}
}
.btnAdd {
margin-right: 5vw;
padding-left: 10px;
}
}
}
.table {
margin: 10px 3vw;
border-radius: 20px;
}
.table {
margin: 10px 3vw;
border-radius: 20px;
}
.pagination {
margin-top: 10px;
padding: 10px 10px;
.pagination {
margin-top: 10px;
padding: 10px 10px;
}
}
}
:deep(.adddialog) {
min-width: 450px;
background-color: #F3FAFE !important;
:deep(.adddialog) {
min-width: 450px;
background-color: #F3FAFE !important;
margin-top: 10vh;
.addForm {
padding: 0 3vw 1vh 1vw;
.addForm {
padding: 0 3vw 1vh 1vw;
.el-date-editor {
display: flex;
flex: 1;
.el-date-editor {
display: flex;
flex: 1;
}
}
}
.dialog-footer {
display: flex;
justify-content: center;
padding-bottom: 1.5vh;
.dialog-footer {
display: flex;
justify-content: center;
padding-bottom: 1.5vh;
}
}
}
:deep(.adddialog .el-form-item__label) {
min-width: 80px;
width: auto;
font-weight: 800;
padding-bottom: 15px;
:deep(.adddialog .el-form-item__label) {
min-width: 80px;
width: auto;
font-weight: 800;
padding-bottom: 15px;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save