zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'biz-pc-cloud/master'

Browse Source
This commit is contained in:
ctw committed 2025-01-12 21:58:41 +08:00
2 parents 33d90c45b0 cd86ae5521
commit de2c93c4c8
25 files changed
+2954 -2454
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.env.development
+10 -2
View File
@@ -8,16 +8,24 @@ VITE_OPEN = true
ENV = 'development' ENV = 'development'
# ADMIN 服务地址 # ADMIN 服务地址
VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/ # 线上 # VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/ # 线上
# VITE_ADMIN_PROXY_PATH = http://pjcloud.center.takin.cc/ # VITE_ADMIN_PROXY_PATH = http://pjcloud.center.takin.cc/
# VITE_ADMIN_PROXY_PATH = http://localhost:9999/ # VITE_ADMIN_PROXY_PATH = http://localhost:9999/
<<<<<<< HEAD
# VITE_ADMIN_PROXY_PATH = http://192.168.101.29:9999/ # 邓-本地 # VITE_ADMIN_PROXY_PATH = http://192.168.101.29:9999/ # 邓-本地
=======
VITE_ADMIN_PROXY_PATH = http://192.168.101.29:9999/ # 邓-本地
>>>>>>> biz-pc-cloud/master
# 图片访问基础地址 # 图片访问基础地址
VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api # 线上 # VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api # 线上
# VITE_IMAGE_BASE_PATH = http://pjcloud.center.takin.cc # VITE_IMAGE_BASE_PATH = http://pjcloud.center.takin.cc
# VITE_IMAGE_BASE_PATH = http://localhost:9999 # VITE_IMAGE_BASE_PATH = http://localhost:9999
<<<<<<< HEAD
# VITE_IMAGE_BASE_PATH = http://192.168.101.29:9999 # 邓-本地 # VITE_IMAGE_BASE_PATH = http://192.168.101.29:9999 # 邓-本地
=======
VITE_IMAGE_BASE_PATH = http://192.168.101.29:9999 # 邓-本地
>>>>>>> biz-pc-cloud/master
# 代码生成服务地址 # 代码生成服务地址
VITE_GEN_PROXY_PATH = http://192.168.110.156:5003 VITE_GEN_PROXY_PATH = http://192.168.110.156:5003
src/api/wallet/wallet-active.ts
+42 -35
View File
@@ -1,57 +1,64 @@
import request from "/@/utils/request" import request from "/@/utils/request"
export function refreshAvatar(query?: Object) {
return request({
url: "/wallet/wallet-active/refresh-avatar",
method: "get",
params: query,
})
}
export function fastCreateCard(data?: Object) { export function fastCreateCard(data?: Object) {
return request({ return request({
url: '/wallet/wallet-active/fast-create-card', url: "/wallet/wallet-active/fast-create-card",
method: 'post', method: "post",
data data,
}) })
} }
export function pageJoin(query?: Object) { export function pageJoin(query?: Object) {
return request({ return request({
url: '/wallet/wallet-active/page-join', url: "/wallet/wallet-active/page-join",
method: 'get', method: "get",
params: query params: query,
}) })
} }
export function fetchList(query?: Object) { export function fetchList(query?: Object) {
return request({ return request({
url: '/wallet/wallet-active/page', url: "/wallet/wallet-active/page",
method: 'get', method: "get",
params: query params: query,
}) })
} }
export function addObj(obj?: Object) { export function addObj(obj?: Object) {
return request({ return request({
url: '/wallet/wallet-active', url: "/wallet/wallet-active",
method: 'post', method: "post",
data: obj data: obj,
}) })
} }
export function getObj(id?: string) { export function getObj(id?: string) {
return request({ return request({
url: '/wallet/wallet-active/' + id, url: "/wallet/wallet-active/" + id,
method: 'get' method: "get",
}) })
} }
export function delObjs(ids?: Object) { export function delObjs(ids?: Object) {
return request({ return request({
url: '/wallet/wallet-active', url: "/wallet/wallet-active",
method: 'delete', method: "delete",
data: ids data: ids,
}) })
} }
export function putObj(obj?: Object) { export function putObj(obj?: Object) {
return request({ return request({
url: '/wallet/wallet-active', url: "/wallet/wallet-active",
method: 'put', method: "put",
data: obj data: obj,
}) })
} }
src/api/wallet/wallet-recharge-apply.ts
+37 -31
View File
@@ -1,50 +1,56 @@
import request from "/@/utils/request" import request from "/@/utils/request"
export function pageJoin(query?: Object) { export function apply(query?: Object) {
return request({ return request({
url: '/wallet/wallet-recharge-apply/page-join', url: "/wallet/wallet-recharge-apply/apply",
method: 'get', method: "get",
params: query params: query,
}) })
} }
export function pageJoin(query?: Object) {
return request({
url: "/wallet/wallet-recharge-apply/page-join",
method: "get",
params: query,
})
}
export function fetchList(query?: Object) { export function fetchList(query?: Object) {
return request({ return request({
url: '/wallet/wallet-recharge-apply/page', url: "/wallet/wallet-recharge-apply/page",
method: 'get', method: "get",
params: query params: query,
}) })
} }
export function addObj(obj?: Object) { export function addObj(obj?: Object) {
return request({ return request({
url: '/wallet/wallet-recharge-apply', url: "/wallet/wallet-recharge-apply",
method: 'post', method: "post",
data: obj data: obj,
}) })
} }
export function getObj(id?: string) { export function getObj(id?: string) {
return request({ return request({
url: '/wallet/wallet-recharge-apply/' + id, url: "/wallet/wallet-recharge-apply/" + id,
method: 'get' method: "get",
}) })
} }
export function delObjs(ids?: Object) { export function delObjs(ids?: Object) {
return request({ return request({
url: '/wallet/wallet-recharge-apply', url: "/wallet/wallet-recharge-apply",
method: 'delete', method: "delete",
data: ids data: ids,
}) })
} }
export function putObj(obj?: Object) { export function putObj(obj?: Object) {
return request({ return request({
url: '/wallet/wallet-recharge-apply', url: "/wallet/wallet-recharge-apply",
method: 'put', method: "put",
data: obj data: obj,
}) })
} }
src/components/OrgSelector/employeesDialog.vue
+160 -148
View File
@@ -1,179 +1,191 @@
<template> <template>
<el-dialog :title="$t('orgSelecotr.select') + $t(`orgSelecotr.${props.type}`)" v-model="visibleDialog" :width="600" append-to-body class="promoter_person"> <el-dialog
<div class="person_body clear"> :title="$t('orgSelecotr.select') + $t(`orgSelecotr.${props.type}`)"
<div class="person_tree l"> v-model="visibleDialog"
<selectBox ref="selectBoxRef" :selectSelf="selectSelf" :list="list" :multiple="multiple" :width="600"
v-model:selectedList="selectedList" :type="type"/> append-to-body
</div> class="promoter_person"
<selectResult :total="total" @del="delList" :list="resList"/> >
</div> <div class="person_body clear">
<template #footer> <div class="person_tree l">
<el-button @click="$emit('update:visible', false)">{{ $t('common.cancelButtonText') }}</el-button> <selectBox
<el-button type="primary" @click="saveDialog">{{ $t('common.confirmButtonText') }}</el-button> ref="selectBoxRef"
</template> :selectSelf="selectSelf"
</el-dialog> :list="list"
:multiple="multiple"
v-model:selectedList="selectedList"
:type="type"
/>
</div>
<selectResult :total="total" @del="delList" :list="resList" />
</div>
<template #footer>
<el-button @click="$emit('update:visible', false)">{{ $t("common.cancelButtonText") }}</el-button>
<el-button type="primary" @click="saveDialog">{{ $t("common.confirmButtonText") }}</el-button>
</template>
</el-dialog>
</template> </template>
<script setup> <script setup>
import selectBox from './selectBox.vue'; import selectBox from "./selectBox.vue"
import selectResult from './selectResult.vue'; import selectResult from "./selectResult.vue"
import {computed, watch, ref, onMounted} from 'vue'; import { computed, watch, ref, onMounted } from "vue"
import {departments, searchVal} from './common'; import { departments, searchVal } from "./common"
import other from '/@/utils/other'; import other from "/@/utils/other"
import {useI18n} from "vue-i18n"; import { useI18n } from "vue-i18n"
const selectBoxRef = ref(); const selectBoxRef = ref()
let props = defineProps({ let props = defineProps({
visible: { visible: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
data: { data: {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
type: { type: {
type: String, type: String,
default: 'user', default: "user",
}, },
multiple: { multiple: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
selectSelf: { selectSelf: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
}); })
//已选择的集合 //已选择的集合
let selectedList = ref([]); let selectedList = ref([])
let emits = defineEmits(['update:visible', 'change']); let emits = defineEmits(["update:visible", "change"])
let visibleDialog = computed({ let visibleDialog = computed({
get() { get() {
return props.visible; return props.visible
}, },
set() { set() {
closeDialog(); closeDialog()
}, },
}); })
const isChecked = (id, type) => { const isChecked = (id, type) => {
return selectedList.value.filter((res) => res.id === id && res.type === type).length > 0; return selectedList.value.filter((res) => res.id === id && res.type === type).length > 0
}; }
let list = computed(() => { let list = computed(() => {
let value = departments.value; let value = departments.value
return [ return [
{ {
type: 'dept', type: "dept",
data: value === undefined ? [] : value.childDepartments, data: value === undefined ? [] : value.childDepartments,
}, },
{ {
type: 'role', type: "role",
data: value === undefined ? [] : value.roleList, data: value === undefined ? [] : value.roleList,
}, },
{ {
type: 'user', type: "user",
data: value === undefined ? [] : value.employees, data: value === undefined ? [] : value.employees,
change: (item) => { change: (item) => {
if (!isChecked(item.id, item.type)) { if (!isChecked(item.id, item.type)) {
if (!props.multiple) { if (!props.multiple) {
//单选 //单选
selectedList.value = []; selectedList.value = []
} }
selectedList.value.push(item); selectedList.value.push(item)
} else { } else {
selectedList.value = selectedList.value.filter((res) => !(res.id === item.id && res.type === item.type)); selectedList.value = selectedList.value.filter((res) => !(res.id === item.id && res.type === item.type))
} }
}, },
}, },
]; ]
}); })
let resList = computed(() => { let resList = computed(() => {
let userData = selectedList.value.filter((res) => res.type === 'user'); let userData = selectedList.value.filter((res) => res.type === "user")
let deptData = selectedList.value.filter((res) => res.type === 'dept'); let deptData = selectedList.value.filter((res) => res.type === "dept")
let roleData = selectedList.value.filter((res) => res.type === 'role'); let roleData = selectedList.value.filter((res) => res.type === "role")
let data = [ let data = [
{ {
type: 'user', type: "user",
data: userData, data: userData,
cancel: (item) => { cancel: (item) => {
item.selected = false; item.selected = false
selectBoxRef.value.changeEvent(item); selectBoxRef.value.changeEvent(item)
}, },
}, },
]; ]
if (props.type === 'org' || props.type === 'dept') { if (props.type === "org" || props.type === "dept") {
data.unshift({ data.unshift({
type: 'dept', type: "dept",
data: deptData, data: deptData,
cancel: (item) => { cancel: (item) => {
item.selected = false; item.selected = false
selectBoxRef.value.changeEvent(item); selectBoxRef.value.changeEvent(item)
}, },
}); })
} }
if (props.type === 'role') { if (props.type === "role") {
data.unshift({ data.unshift({
type: 'role', type: "role",
data: roleData, data: roleData,
cancel: (item) => { cancel: (item) => {
item.selected = false; item.selected = false
selectBoxRef.value.changeEvent(item); selectBoxRef.value.changeEvent(item)
}, },
}); })
} }
return data; return data
}); })
watch( watch(
() => props.visible, () => props.visible,
(val) => { (val) => {
if (val) { if (val) {
selectedList.value = props.data; selectedList.value = props.data
searchVal.value = ''; searchVal.value = ""
} }
} },
); )
const closeDialog = () => { const closeDialog = () => {
emits('update:visible', false); emits("update:visible", false)
}; }
let total = computed(() => { let total = computed(() => {
let v = departments.value; let v = departments.value
if (!v) { if (!v) {
return 0; return 0
} }
return selectedList.value.length; return selectedList.value.length
}); })
const {proxy} = getCurrentInstance(); const { proxy } = getCurrentInstance()
let saveDialog = () => { let saveDialog = () => {
const v = selectedList.value; const v = selectedList.value
let checkedList = other.deepClone(v).map((item) => ({ let checkedList = other.deepClone(v).map((item) => ({
type: item.type, type: item.type,
id: item.id, id: item.id,
name: item.name, name: item.name,
avatar: item.avatar, avatar: item.avatar,
})); }))
emits('change', checkedList); emits("change", checkedList)
//selectedList.value=[] //selectedList.value=[]
}; }
const delList = () => { const delList = () => {
for (const item of other.deepClone(selectedList.value)) { for (const item of other.deepClone(selectedList.value)) {
item.selected = false; item.selected = false
selectBoxRef.value.changeEvent(item); selectBoxRef.value.changeEvent(item)
} }
selectedList.value = []; selectedList.value = []
}; }
</script> </script>
<style scoped> <style scoped>
@import './dialog.css'; @import "./dialog.css";
</style> </style>
src/components/OrgSelector/selectBox.vue
+212 -206
View File
@@ -1,291 +1,297 @@
<template> <template>
<div> <div>
<el-input <el-input
v-model="searchVal" v-model="searchVal"
class="w-50 m-2" class="w-50 m-2"
style="width: 100%" style="width: 100%"
v-if="type === 'user'" v-if="type === 'user'"
:placeholder="$t('orgSelecotr.search')" :placeholder="$t('orgSelecotr.search')"
@input="getDebounceData($event)" @input="getDebounceData($event)"
:prefix-icon="Search" :prefix-icon="Search"
/> />
<p class="ellipsis tree_nav" v-if="!searchVal && type !== 'role'"> <p class="ellipsis tree_nav" v-if="!searchVal && type !== 'role'">
<span @click="queryData(0)" class="ellipsis">根节点</span> <span @click="queryData(0)" class="ellipsis">根节点</span>
<span v-for="(item, index) in departments.titleDepartments" class="ellipsis" :key="index + 'a'" @click="queryData(item.id)">{{ <span
item.name v-for="(item, index) in departments.titleDepartments"
}}</span> class="ellipsis"
</p> :key="index + 'a'"
@click="queryData(item.id)"
>{{ item.name }}</span
>
</p>
<ul class="select-box"> <ul class="select-box">
<template v-for="(elem, i) in dataList" :key="i"> <template v-for="(elem, i) in dataList" :key="i">
<template v-if="elem.type === 'role'"> <template v-if="elem.type === 'role'">
<li v-for="item in elem.data" :key="item.id"> <li v-for="item in elem.data" :key="item.id">
<el-checkbox v-model="item.selected" @change="changeEvent(item)" :disabled="item.status === 0"> <el-checkbox v-model="item.selected" @change="changeEvent(item)" :disabled="item.status === 0">
<div style="display: flex; flex-direction: row"> <div style="display: flex; flex-direction: row">
<div class="f11"> <div class="f11">
<el-icon style="font-size: 20px"> <el-icon style="font-size: 20px">
<Share /> <Share />
</el-icon> </el-icon>
</div> </div>
<div class="f12">{{ item.name }}</div> <div class="f12">{{ item.name }}</div>
</div> </div>
</el-checkbox> </el-checkbox>
</li> </li>
</template> </template>
<template v-if="elem.type === 'dept' && (type === 'org' || type === 'dept' || type === 'user')"> <template v-if="elem.type === 'dept' && (type === 'org' || type === 'dept' || type === 'user')">
<li v-for="item in elem.data" :key="item.id"> <li v-for="item in elem.data" :key="item.id">
<div style="display: flex; flex-direction: row"> <div style="display: flex; flex-direction: row">
<div class="d11"> <div class="d11">
<el-checkbox v-model="item.selected" @change="changeEvent(item)" :disabled="!(type === 'org' || type === 'dept') || item.status == 0"> <el-checkbox
<div style="display: flex; flex-direction: row"> v-model="item.selected"
<div class="f11"> @change="changeEvent(item)"
<el-icon style="font-size: 20px"> :disabled="!(type === 'org' || type === 'dept') || item.status == 0"
<Grid /> >
</el-icon> <div style="display: flex; flex-direction: row">
</div> <div class="f11">
<div class="f12">{{ item.name }}</div> <el-icon style="font-size: 20px">
</div> <Grid />
</el-checkbox> </el-icon>
</div> </div>
<div class="d22" @click="queryData(item.id)">下级</div> <div class="f12">{{ item.name }}</div>
</div> </div>
</li> </el-checkbox>
</template> </div>
<template v-if="elem.type === 'user' && (type === 'org' || type === 'user')"> <div class="d22" @click="queryData(item.id)">下级</div>
<li v-for="item in elem.data" :key="item.id" class="check_box"> </div>
<el-checkbox </li>
v-model="item.selected" </template>
:disabled="item.status === 0 || (!selectSelf && currentUserId === item.id)" <template v-if="elem.type === 'user' && (type === 'org' || type === 'user')">
@change="changeEvent(item)" <li v-for="item in elem.data" :key="item.id" class="check_box">
> <el-checkbox
<div style="display: flex; flex-direction: row"> v-model="item.selected"
<div class="f11"> :disabled="item.status === 0 || (!selectSelf && currentUserId === item.id)"
<upload-img v-model:image-url="item.avatar" disabled width="20px" height="20px"/> @change="changeEvent(item)"
</div> >
<div class="f12">{{ item.name }}</div> <div style="display: flex; flex-direction: row">
</div> <div class="f11">
</el-checkbox> <preview-image width="20px" height="20px" :src="item.avatar" />
</li> </div>
</template> <div class="f12">{{ item.name }}</div>
</template> </div>
</ul> </el-checkbox>
</div> </li>
</template>
</template>
</ul>
</div>
</template> </template>
<script setup> <script setup>
import {useUserInfo} from '/@/stores/userInfo'; import { useUserInfo } from "/@/stores/userInfo"
import {departments, getDebounceData, getDepartmentList, searchVal} from './common'; import { departments, getDebounceData, getDepartmentList, searchVal } from "./common"
import other from '/@/utils/other'; import other from "/@/utils/other"
import UploadImg from "/@/components/Upload/Image.vue"; import UploadImg from "/@/components/Upload/Image.vue"
import {Grid, Search, Share} from '@element-plus/icons-vue'; import { Grid, Search, Share } from "@element-plus/icons-vue"
var props = defineProps({ var props = defineProps({
selectedList: { selectedList: {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
type: { type: {
type: String, type: String,
default: 'org', default: "org",
}, },
multiple: { multiple: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
selectSelf: { selectSelf: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
}); })
const currentUserId = computed(() => { const currentUserId = computed(() => {
return useUserInfo().userInfos.user.userId; return useUserInfo().userInfos.user.userId
}); })
const queryData = (pid) => { const queryData = (pid) => {
getDepartmentList(pid, props.type).then((res) => { getDepartmentList(pid, props.type).then((res) => {
let selectedList = props.selectedList; let selectedList = props.selectedList
for (const it of dataList.value) { for (const it of dataList.value) {
for (const item of it.data) { for (const item of it.data) {
item.selected = selectedList.filter((res) => res.id === item.id && res.type === item.type).length > 0; item.selected = selectedList.filter((res) => res.id === item.id && res.type === item.type).length > 0
} }
} }
}); })
}; }
let deptList = computed(() => { let deptList = computed(() => {
return departments.value.childDepartments; return departments.value.childDepartments
}); })
let userList = computed(() => { let userList = computed(() => {
return departments.value.employees; return departments.value.employees
}); })
let roleList = computed(() => { let roleList = computed(() => {
return departments.value.roleList; return departments.value.roleList
}); })
const dataList = computed(() => { const dataList = computed(() => {
return [ return [
{ {
type: 'dept', type: "dept",
data: deptList.value, data: deptList.value,
}, },
{ {
type: 'user', type: "user",
data: userList.value, data: userList.value,
}, },
{ {
type: 'role', type: "role",
data: roleList.value, data: roleList.value,
} },
]; ]
}); })
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance()
let emits = defineEmits(["update:selectedList"])
let emits = defineEmits(['update:selectedList']);
onMounted(() => { onMounted(() => {
queryData(0); queryData(0)
}); })
const changeEvent = (e) => { const changeEvent = (e) => {
let selectedList = other.deepClone(props.selectedList); let selectedList = other.deepClone(props.selectedList)
if (e.selected) { if (e.selected) {
if (!props.multiple) { if (!props.multiple) {
userList.value.forEach((res) => (res.selected = false)); userList.value.forEach((res) => (res.selected = false))
selectedList = []; selectedList = []
} }
e.selected = true; e.selected = true
selectedList.push(e); selectedList.push(e)
} else { } else {
for (const it of dataList.value) { for (const it of dataList.value) {
let filter = it.data.filter((res) => res.id === e.id && res.type === e.type); let filter = it.data.filter((res) => res.id === e.id && res.type === e.type)
if (filter.length > 0) { if (filter.length > 0) {
filter[0].selected = false; filter[0].selected = false
} }
} }
selectedList = selectedList.filter((res) => !(res.id === e.id && res.type === e.type)); selectedList = selectedList.filter((res) => !(res.id === e.id && res.type === e.type))
} }
emits('update:selectedList', selectedList); emits("update:selectedList", selectedList)
}; }
const refreshData = () => { const refreshData = () => {
let selectedList = props.selectedList; let selectedList = props.selectedList
for (var it of dataList.value) { for (var it of dataList.value) {
for (var item of it.data) { for (var item of it.data) {
var b = selectedList.filter((res) => res.id === item.id && res.type === item.type).length > 0; var b = selectedList.filter((res) => res.id === item.id && res.type === item.type).length > 0
item.selected = b; item.selected = b
} }
} }
}; }
defineExpose({ queryData, changeEvent, refreshData }); defineExpose({ queryData, changeEvent, refreshData })
watch( watch(
() => props.selectedList, () => props.selectedList,
(val) => { (val) => {
refreshData(); refreshData()
} },
); )
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import './dialog.css'; @import "./dialog.css";
.select-box { .select-box {
height: 420px; height: 420px;
overflow-y: auto; overflow-y: auto;
li { li {
padding: 5px 0; padding: 5px 0;
} }
} }
.radio_box a, .radio_box a,
.check_box a { .check_box a {
font-size: 12px; font-size: 12px;
position: relative; position: relative;
padding-left: 20px; padding-left: 20px;
margin-right: 30px; margin-right: 30px;
cursor: pointer; cursor: pointer;
color: #333; color: #333;
white-space: pre; white-space: pre;
} }
.check_box.not a:hover { .check_box.not a:hover {
color: #333; color: #333;
} }
.check_box.not a::before, .check_box.not a::before,
.check_box.not a:hover::before { .check_box.not a:hover::before {
border: none; border: none;
} }
.check_box.not.active { .check_box.not.active {
background: #f3f3f3; background: #f3f3f3;
} }
.radio_box a:hover::before, .radio_box a:hover::before,
.check_box a:hover::before { .check_box a:hover::before {
border: 1px solid #46a6fe; border: 1px solid #46a6fe;
} }
.radio_box a::before, .radio_box a::before,
.check_box a::before { .check_box a::before {
position: absolute; position: absolute;
width: 14px; width: 14px;
height: 14px; height: 14px;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
border-radius: 2px; border-radius: 2px;
left: 0; left: 0;
top: 1px; top: 1px;
content: ''; content: "";
} }
.radio_box a::before { .radio_box a::before {
border-radius: 50%; border-radius: 50%;
} }
.check-dot.active::after, .check-dot.active::after,
.radio_box a.active::after, .radio_box a.active::after,
.check_box a.active::after { .check_box a.active::after {
position: absolute; position: absolute;
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
top: 3px; top: 3px;
left: 3px; left: 3px;
content: ''; content: "";
} }
.radio_box a.active::after { .radio_box a.active::after {
background: #46a6fe; background: #46a6fe;
} }
.check_box a.active::after { .check_box a.active::after {
background: url(./assets/check_box.png) no-repeat center; background: url(./assets/check_box.png) no-repeat center;
} }
.f11 { .f11 {
width: 30px; width: 30px;
} }
.f12 { .f12 {
width: calc(100% - 30px); width: calc(100% - 30px);
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
} }
.d11 { .d11 {
width: calc(100% - 30px); width: calc(100% - 30px);
} }
.d22 { .d22 {
width: 30px; width: 30px;
line-height: 41px; line-height: 41px;
cursor: pointer; cursor: pointer;
} }
</style> </style>
src/components/OrgSelector/selectResult.vue
+6 -6
View File
@@ -46,7 +46,7 @@
<li v-for="item in data" :key="item.id"> <li v-for="item in data" :key="item.id">
<div style="display: flex; flex-direction: row"> <div style="display: flex; flex-direction: row">
<div class="f11"> <div class="f11">
<upload-img v-model:image-url="item.avatar" disabled width="20px" height="20px" /> <preview-image width="20px" height="20px" :src="item.avatar" />
</div> </div>
<div class="f12">{{ item.name }}</div> <div class="f12">{{ item.name }}</div>
<div class="f13"> <div class="f13">
@@ -60,8 +60,8 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { CircleClose, Grid, Share } from '@element-plus/icons-vue'; import { CircleClose, Grid, Share } from "@element-plus/icons-vue"
import UploadImg from '/@/components/Upload/Image.vue'; import UploadImg from "/@/components/Upload/Image.vue"
defineProps({ defineProps({
total: { total: {
@@ -70,10 +70,10 @@ defineProps({
}, },
list: { list: {
type: Array, type: Array,
default: () => [{ type: 'role', data, cancel }], default: () => [{ type: "role", data, cancel }],
}, },
}); })
let emits = defineEmits(['del']); let emits = defineEmits(["del"])
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
src/utils/formatMoney.ts
+6 -6
View File
@@ -3,10 +3,10 @@
* @param price * @param price
* @returns * @returns
*/ */
export function displayPrice(price: any, suffix: string = "元") { export function displayPrice(price: any, suffix: string = "元", fixed = 1) {
if (typeof price === 'undefined') return '0.0' + suffix if (typeof price === "undefined") return "0.0" + suffix
const parsedNumber = typeof price === 'string' ? parseFloat(price) : price const parsedNumber = typeof price === "string" ? parseFloat(price) : price
return (parsedNumber / 100.0).toFixed(1) + suffix return (parsedNumber / 100.0).toFixed(fixed) + suffix
} }
/** /**
@@ -15,7 +15,7 @@ export function displayPrice(price: any, suffix: string = "元") {
* @returns * @returns
*/ */
export const storePrice = (num: number | string | undefined) => { export const storePrice = (num: number | string | undefined) => {
if (typeof num === 'undefined') return 0 if (typeof num === "undefined") return 0
const parsedNumber = typeof num === 'string' ? parseFloat(num) : num const parsedNumber = typeof num === "string" ? parseFloat(num) : num
return Math.round(parsedNumber * 100) return Math.round(parsedNumber * 100)
} }
src/views/admin/system/user/face-manage.vue
+114 -108
View File
@@ -1,56 +1,61 @@
<template> <template>
<div class="system-user-dialog-container"> <div class="system-user-dialog-container">
<el-dialog :close-on-click-modal="false" title="人脸管理" draggable v-model="dialogVisible"> <el-dialog :close-on-click-modal="false" title="人脸管理" draggable v-model="dialogVisible">
<el-button icon="folder-add" type="primary" @click="addFace"> <el-button icon="folder-add" type="primary" @click="addFace"> 新增 </el-button>
新增 <div class="h-4" />
</el-button> <el-table
<div class="h-4" /> v-loading="state.loading"
<el-table v-loading="state.loading" :data="state.dataList" row-key="userId" border :data="state.dataList"
:cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"> row-key="userId"
<el-table-column prop="username" align="center" label="用户名" /> border
<el-table-column prop="date" align="center" label="人脸"> :cell-style="tableStyle.cellStyle"
<template #default="{ row }"> :header-cell-style="tableStyle.headerCellStyle"
<preview-image :src="row.faceImg" /> >
</template> <el-table-column prop="username" align="center" label="用户名" />
</el-table-column> <el-table-column prop="date" align="center" label="人脸">
<el-table-column prop="address" align="center" label="操作"> <template #default="{ row }">
<template #default="{ row }"> <preview-image :src="row.faceImg" />
<el-button link type="primary" @click="editFace(row)"> </template>
<Icon icon="ep:edit" />修改 </el-table-column>
</el-button> <el-table-column prop="address" align="center" label="操作">
<el-button link type="danger" @click="delFace(row)"> <template #default="{ row }">
删除 <el-button link type="primary" @click="editFace(row)"> <Icon icon="ep:edit" />修改 </el-button>
</el-button> <el-button link type="danger" @click="delFace(row)"> 删除 </el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<template #footer> <template #footer>
<el-button @click="submitForm" type="primary">确 定</el-button> <el-button @click="submitForm" type="primary">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
</template> </template>
</el-dialog> </el-dialog>
<el-dialog v-model="uploadDialogVisible" :close-on-click-modal="false" :title="faceUploadTitle" width="30%" <el-dialog
@close="uploadDialogClone"> v-model="uploadDialogVisible"
<el-form v-loading="formLoading" ref="formRef" :model="formData" :rules="formRules" label-width="80px"> :close-on-click-modal="false"
<el-form-item label="人脸" prop="uploadFace"> :title="faceUploadTitle"
<upload-img v-model:image-url="formData.uploadFace" /> width="30%"
</el-form-item> @close="uploadDialogClone"
</el-form> >
<template #footer> <el-form v-loading="formLoading" ref="formRef" :model="formData" :rules="formRules" label-width="80px">
<el-button @click="submitFace" type="primary" :disabled="formLoading">确 定</el-button> <el-form-item label="人脸" prop="uploadFace">
<el-button @click="uploadDialogVisible = false">取 消</el-button> <upload-img v-model:image-url="formData.uploadFace" />
</template> </el-form-item>
</el-dialog> </el-form>
</div> <template #footer>
<el-button @click="submitFace" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="uploadDialogVisible = false">取 消</el-button>
</template>
</el-dialog>
</div>
</template> </template>
<script lang="ts" setup name="face-manage"> <script lang="ts" setup name="face-manage">
import { BasicTableProps, useTable } from '/@/hooks/table'; import { BasicTableProps, useTable } from "/@/hooks/table"
import * as userFaceApi from "/@/api/admin/userFace" import * as userFaceApi from "/@/api/admin/userFace"
import { useMessage } from '/@/hooks/message'; import { useMessage } from "/@/hooks/message"
// 定义刷新表格emit // 定义刷新表格emit
const emit = defineEmits(['refresh']); const emit = defineEmits(["refresh"])
// 定义变量内容 // 定义变量内容
const formRef = ref() const formRef = ref()
@@ -64,100 +69,101 @@ const formLoading = ref(false)
const faceTableLoading = ref(false) const faceTableLoading = ref(false)
const formData = ref<any>({ const formData = ref<any>({
id: undefined, id: undefined,
uploadFace: undefined, uploadFace: undefined,
}) })
const detailId = ref<any>(null) const detailId = ref<any>(null)
// 定义表格查询、后台调用的API // 定义表格查询、后台调用的API
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: { queryForm: {
deptId: '', deptId: "",
username: '', username: "",
phone: '', phone: "",
}, },
pageList: userFaceApi.pageJoin, pageList: userFaceApi.pageJoin,
}); })
const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state); const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state)
const formRules = reactive({ const formRules = reactive({
uploadFace: [{ required: true, message: '请上传人脸', trigger: 'blur' }], uploadFace: [{ required: true, message: "请上传人脸", trigger: "blur" }],
}) })
const submitForm = async () => { const submitForm = async () => {
dialogVisible.value = false dialogVisible.value = false
emit('refresh') emit("refresh")
} }
const addFace = (row: any) => { const addFace = (row: any) => {
faceUploadTitle.value = "上传人脸" faceUploadTitle.value = "上传人脸"
formData.value.uploadFace = "" formData.value.uploadFace = ""
uploadDialogVisible.value = true uploadDialogVisible.value = true
} }
const editFace = (row: any) => { const editFace = (row: any) => {
faceUploadTitle.value = "修改人脸" faceUploadTitle.value = "修改人脸"
formData.value.id = row.id formData.value.id = row.id
formData.value.uploadFace = row.faceImg formData.value.uploadFace = row.faceImg
uploadDialogVisible.value = true uploadDialogVisible.value = true
} }
const delFace = async (row: any) => { const delFace = async (row: any) => {
try { try {
await useMessage().delConfirm('是否删除人脸?') await useMessage().delConfirm("是否删除人脸?")
userFaceApi.delObjs(row.id) userFaceApi.delObjs([row.id])
useMessage().success("删除成功") useMessage().success("删除成功")
getDataList() getDataList()
} catch (error) { } catch (error) {
console.log(error); console.log(error)
} }
} }
const openDialog = async (id: number) => { const openDialog = async (id: number) => {
if (!id) return; if (!id) return
dialogVisible.value = true dialogVisible.value = true
resetForm() resetForm()
detailId.value = id detailId.value = id
getDataList() state.queryForm.userId = id
getDataList()
} }
const submitFace = async () => { const submitFace = async () => {
if (!formRef) return if (!formRef) return
const valid = await formRef.value.validate() const valid = await formRef.value.validate()
if (!valid) return if (!valid) return
formLoading.value = true formLoading.value = true
const pa: any = { const pa: any = {
userId: detailId.value, userId: detailId.value,
faceImg: formData.value.uploadFace, faceImg: formData.value.uploadFace,
} }
if (faceUploadTitle.value == "修改人脸") { if (faceUploadTitle.value == "修改人脸") {
pa.id = formData.value.id pa.id = formData.value.id
} }
try { try {
const fc = faceUploadTitle.value == "上传人脸" ? userFaceApi.addObj : userFaceApi.putObj const fc = faceUploadTitle.value == "上传人脸" ? userFaceApi.addObj : userFaceApi.putObj
await fc(pa) await fc(pa)
useMessage().success("操作成功") useMessage().success("操作成功")
uploadDialogClone() uploadDialogClone()
getDataList() getDataList()
} catch (error) { } catch (error) {
console.log(error); console.log(error)
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
} }
const uploadDialogClone = () => { const uploadDialogClone = () => {
uploadDialogVisible.value = false uploadDialogVisible.value = false
resetForm() resetForm()
} }
const resetForm = () => { const resetForm = () => {
formData.value = { formData.value = {
id: undefined, id: undefined,
uploadFace: undefined, uploadFace: undefined,
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }
defineExpose({ openDialog }) defineExpose({ openDialog })
src/views/admin/system/user/form.vue
+136 -121
View File
@@ -1,19 +1,25 @@
<template> <template>
<div class="system-user-dialog-container"> <div class="system-user-dialog-container">
<el-dialog :close-on-click-modal="false" :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')" <el-dialog
draggable v-model="visible"> :close-on-click-modal="false"
:title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')"
draggable
v-model="visible"
>
<el-form :model="dataForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading"> <el-form :model="dataForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
<el-form-item :label="$t('sysuser.username')" prop="username"> <el-form-item :label="$t('sysuser.username')" prop="username">
<el-input :disabled="dataForm.userId !== ''" placeholder="请输入用户名" <el-input
v-model="dataForm.username"></el-input> :disabled="dataForm.userId !== ''"
placeholder="请输入用户名"
v-model="dataForm.username"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
<el-form-item :label="$t('sysuser.password')" prop="password"> <el-form-item :label="$t('sysuser.password')" prop="password">
<el-input clearable placeholder="请输入密码" type="password" <el-input clearable placeholder="请输入密码" type="password" v-model="dataForm.password"></el-input>
v-model="dataForm.password"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
@@ -29,24 +35,28 @@
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
<el-form-item :label="$t('sysuser.role')" prop="role"> <el-form-item :label="$t('sysuser.role')" prop="role">
<el-select clearable multiple placeholder="请选择角色" v-model="dataForm.role"> <el-select clearable multiple placeholder="请选择角色" v-model="dataForm.role">
<el-option :key="item.roleId" :label="item.roleName" :value="item.roleId" <el-option :key="item.roleId" :label="item.roleName" :value="item.roleId" v-for="item in roleData" />
v-for="item in roleData" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
<el-form-item :label="$t('sysuser.post')" prop="post"> <el-form-item :label="$t('sysuser.post')" prop="post">
<el-select clearable multiple placeholder="请选择岗位" v-model="dataForm.post"> <el-select clearable multiple placeholder="请选择岗位" v-model="dataForm.post">
<el-option :key="item.postId" :label="item.postName" :value="item.postId" <el-option :key="item.postId" :label="item.postName" :value="item.postId" v-for="item in postData" />
v-for="item in postData" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
<el-form-item :label="$t('sysuser.dept')" prop="deptId"> <el-form-item :label="$t('sysuser.dept')" prop="deptId">
<el-tree-select :data="deptData" <el-tree-select
:props="{ value: 'id', label: 'name', children: 'children' }" check-strictly :data="deptData"
class="w100" clearable placeholder="请选择所属部门" v-model="dataForm.deptId"> :props="{ value: 'id', label: 'name', children: 'children' }"
check-strictly
class="w100"
clearable
placeholder="请选择所属部门"
v-model="dataForm.deptId"
>
</el-tree-select> </el-tree-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@@ -64,8 +74,9 @@
<el-col :span="12" class="mb20"> <el-col :span="12" class="mb20">
<el-form-item :label="$t('sysuser.lockFlag')" prop="lockFlag"> <el-form-item :label="$t('sysuser.lockFlag')" prop="lockFlag">
<el-radio-group v-model="dataForm.lockFlag"> <el-radio-group v-model="dataForm.lockFlag">
<el-radio :key="index" :label="item.value" border v-for="(item, index) in lock_flag">{{ <el-radio :key="index" :label="item.value" border v-for="(item, index) in lock_flag"
item.label }} </el-radio> >{{ item.label }}
</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
@@ -73,9 +84,10 @@
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button> <el-button @click="visible = false">{{ $t("common.cancelButtonText") }}</el-button>
<el-button @click="onSubmit" type="primary" :disabled="loading">{{ $t('common.confirmButtonText') <el-button @click="onSubmit" type="primary" :disabled="loading">{{
}}</el-button> $t("common.confirmButtonText")
}}</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
@@ -83,155 +95,158 @@
</template> </template>
<script lang="ts" name="systemUserDialog" setup> <script lang="ts" name="systemUserDialog" setup>
import { addObj, getObj, putObj, validatePhone, validateUsername } from '/@/api/admin/user'; import { addObj, getObj, putObj, validatePhone, validateUsername } from "/@/api/admin/user"
import { list as roleList } from '/@/api/admin/role'; import { list as roleList } from "/@/api/admin/role"
import { list as postList } from '/@/api/admin/post'; import { list as postList } from "/@/api/admin/post"
import { deptTree } from '/@/api/admin/dept'; import { deptTree } from "/@/api/admin/dept"
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
import { useI18n } from 'vue-i18n'; import { useI18n } from "vue-i18n"
import { useMessage } from '/@/hooks/message'; import { useMessage } from "/@/hooks/message"
import { rule } from '/@/utils/validate'; import { rule } from "/@/utils/validate"
const { t } = useI18n(); const { t } = useI18n()
// 定义刷新表格emit // 定义刷新表格emit
const emit = defineEmits(['refresh']); const emit = defineEmits(["refresh"])
// @ts-ignore // @ts-ignore
const { lock_flag } = useDict('lock_flag'); const { lock_flag } = useDict("lock_flag")
// 定义变量内容 // 定义变量内容
const dataFormRef = ref(); const dataFormRef = ref()
const visible = ref(false); const visible = ref(false)
const deptData = ref<any[]>([]); const deptData = ref<any[]>([])
const roleData = ref<any[]>([]); const roleData = ref<any[]>([])
const postData = ref<any[]>([]); const postData = ref<any[]>([])
const loading = ref(false); const loading = ref(false)
const props = defineProps({ const props = defineProps({
deptId: { deptId: {
type: String, type: String,
default: '', default: "",
} },
}); })
const dataForm = reactive({ const dataForm = reactive({
userId: '', userId: "",
username: '', username: "",
password: '' as String | undefined, password: "" as String | undefined,
salt: '', salt: "",
wxOpenid: '', wxOpenid: "",
qqOpenid: '', qqOpenid: "",
lockFlag: '0', lockFlag: "0",
phone: '' as String | undefined, phone: "" as String | undefined,
deptId: '', deptId: "",
roleList: [], roleList: [],
postList: [], postList: [],
nickname: '', nickname: "",
name: '', name: "",
email: '', email: "",
post: [] as string[], post: [] as string[],
role: [] as string[], role: [] as string[],
}); })
const dataRules = ref({ const dataRules = ref({
// 用户名校验，不能为空 、长度 5-20、不能和已有数据重复 // 用户名校验，不能为空 、长度 5-20、不能和已有数据重复
username: [ username: [
{ required: true, message: '用户名不能为空', trigger: 'blur' }, { required: true, message: "用户名不能为空", trigger: "blur" },
{ min: 5, max: 20, message: '用户名称长度必须介于 5 和 20 之间', trigger: 'blur' }, { min: 5, max: 20, message: "用户名称长度必须介于 5 和 20 之间", trigger: "blur" },
{ {
validator: (rule: any, value: any, callback: any) => { validator: (rule: any, value: any, callback: any) => {
validateUsername(rule, value, callback, dataForm.userId !== ''); validateUsername(rule, value, callback, dataForm.userId !== "")
}, },
trigger: 'blur', trigger: "blur",
}, },
], ],
password: [ password: [
{ required: true, message: '密码不能为空', trigger: 'blur' }, { required: true, message: "密码不能为空", trigger: "blur" },
{ {
min: 6, min: 6,
max: 20, max: 20,
message: '用户密码长度必须介于 5 和 20 之间', message: "用户密码长度必须介于 5 和 20 之间",
trigger: 'blur', trigger: "blur",
}, },
], ],
// 姓名校验，不能为空、只能是中文 // 姓名校验，不能为空、只能是中文
name: [ name: [
{ validator: rule.overLength, trigger: 'blur' }, { validator: rule.overLength, trigger: "blur" },
{ required: true, message: '姓名不能为空', trigger: 'blur' }, { required: true, message: "姓名不能为空", trigger: "blur" },
{ validator: rule.chinese, trigger: 'blur' }, { validator: rule.chinese, trigger: "blur" },
], ],
deptId: [{ required: true, message: '部门不能为空', trigger: 'blur' }], deptId: [{ required: true, message: "部门不能为空", trigger: "blur" }],
role: [{ required: true, message: '角色不能为空', trigger: 'blur' }], role: [{ required: true, message: "角色不能为空", trigger: "blur" }],
post: [{ required: true, message: '岗位不能为空', trigger: 'blur' }], // post: [{ required: true, message: '岗位不能为空', trigger: 'blur' }],
// 手机号校验，不能为空、新增的时不能重复校验 // 手机号校验，不能为空、新增的时不能重复校验
phone: [ phone: [
{ required: true, message: '手机号不能为空', trigger: 'blur' }, { required: true, message: "手机号不能为空", trigger: "blur" },
{ validator: rule.validatePhone, trigger: 'blur' }, { validator: rule.validatePhone, trigger: "blur" },
{ {
validator: (rule: any, value: any, callback: any) => { validator: (rule: any, value: any, callback: any) => {
validatePhone(rule, value, callback, dataForm.userId !== ''); validatePhone(rule, value, callback, dataForm.userId !== "")
}, },
trigger: 'blur', trigger: "blur",
}, },
], ],
email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }, { validator: rule.overLength, trigger: 'blur' }], email: [
lockFlag: [{ required: true, message: '状态不能为空', trigger: 'blur' }], { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] },
}); { validator: rule.overLength, trigger: "blur" },
],
lockFlag: [{ required: true, message: "状态不能为空", trigger: "blur" }],
})
// 打开弹窗 // 打开弹窗
const openDialog = async (id: string) => { const openDialog = async (id: string) => {
visible.value = true; visible.value = true
dataForm.userId = ''; dataForm.userId = ""
// 重置表单数据 // 重置表单数据
nextTick(() => { nextTick(() => {
dataFormRef.value?.resetFields(); dataFormRef.value?.resetFields()
}); })
// 修改获取用户信息 // 修改获取用户信息
if (id) { if (id) {
dataForm.userId = id; dataForm.userId = id
await getUserData(id); await getUserData(id)
dataForm.password = '******'; dataForm.password = "******"
} }
// 加载使用的数据 // 加载使用的数据
getDeptData(); getDeptData()
getPostData(); getPostData()
getRoleData(); getRoleData()
}; }
// 提交 // 提交
const onSubmit = async () => { const onSubmit = async () => {
const valid = await dataFormRef.value.validate().catch(() => { }); const valid = await dataFormRef.value.validate().catch(() => {})
if (!valid) return false; if (!valid) return false
try { try {
const { userId, phone, password } = dataForm; const { userId, phone, password } = dataForm
if (userId) { if (userId) {
// 清除占位符，避免提交错误的数据 // 清除占位符，避免提交错误的数据
if (phone?.includes('*')) dataForm.phone = undefined; if (phone?.includes("*")) dataForm.phone = undefined
if (password?.includes('******')) dataForm.password = undefined; if (password?.includes("******")) dataForm.password = undefined
loading.value = true; loading.value = true
await putObj(dataForm); await putObj(dataForm)
useMessage().success(t('common.editSuccessText')); useMessage().success(t("common.editSuccessText"))
visible.value = false; // 关闭弹窗 visible.value = false // 关闭弹窗
emit('refresh'); emit("refresh")
} else { } else {
loading.value = true; loading.value = true
await addObj(dataForm); await addObj(dataForm)
useMessage().success(t('common.addSuccessText')); useMessage().success(t("common.addSuccessText"))
visible.value = false; // 关闭弹窗 visible.value = false // 关闭弹窗
emit('refresh'); emit("refresh")
} }
} catch (error: any) { } catch (error: any) {
useMessage().error(error.msg); useMessage().error(error.msg)
} finally { } finally {
loading.value = false; loading.value = false
} }
}; }
/** /**
* 从服务器获取用户数据 * 从服务器获取用户数据
@@ -242,57 +257,57 @@ const onSubmit = async () => {
*/ */
const getUserData = async (id: string) => { const getUserData = async (id: string) => {
try { try {
loading.value = true; loading.value = true
const { data } = await getObj(id); const { data } = await getObj(id)
Object.assign(dataForm, data); Object.assign(dataForm, data)
if (data.roleList) { if (data.roleList) {
dataForm.role = data.roleList.map((item) => item.roleId); dataForm.role = data.roleList.map((item) => item.roleId)
} }
if (data.postList) { if (data.postList) {
dataForm.post = data.postList.map((item) => item.postId); dataForm.post = data.postList.map((item) => item.postId)
} }
} catch (err: any) { } catch (err: any) {
useMessage().error(err.msg); useMessage().error(err.msg)
} finally { } finally {
loading.value = false; loading.value = false
} }
}; }
// 初始化部门数据 // 初始化部门数据
const getDeptData = () => { const getDeptData = () => {
// 获取部门数据 // 获取部门数据
deptTree().then((res) => { deptTree().then((res) => {
deptData.value = res.data; deptData.value = res.data
// 默认选择在树中选中的部门 // 默认选择在树中选中的部门
if (!dataForm.userId) { if (!dataForm.userId) {
dataForm.deptId = props.deptId; dataForm.deptId = props.deptId
} }
}); })
}; }
// 岗位数据 // 岗位数据
const getPostData = () => { const getPostData = () => {
postList().then((res) => { postList().then((res) => {
postData.value = res.data; postData.value = res.data
// 默认选择第一个 // 默认选择第一个
if (!dataForm.userId) { if (!dataForm.userId) {
dataForm.post = [res.data[0].postId]; dataForm.post = [res.data[0].postId]
} }
}); })
}; }
// 角色数据 // 角色数据
const getRoleData = () => { const getRoleData = () => {
roleList().then((res) => { roleList().then((res) => {
roleData.value = res.data; roleData.value = res.data
// 默认选择第一个 // 默认选择第一个
if (!dataForm.userId) { if (!dataForm.userId) {
dataForm.role = [res.data[0].roleId]; dataForm.role = [res.data[0].roleId]
} }
}); })
}; }
// 暴露变量 // 暴露变量
defineExpose({ defineExpose({
openDialog, openDialog,
}); })
</script> </script>
src/views/admin/system/user/index.vue
+170 -116
View File
@@ -4,13 +4,23 @@
<pane size="15"> <pane size="15">
<div class="layout-padding-auto layout-padding-view"> <div class="layout-padding-auto layout-padding-view">
<el-scrollbar> <el-scrollbar>
<query-tree :placeholder="$t('common.queryDeptTip')" :query="deptData.queryList" <query-tree
:show-expand="true" @node-click="handleNodeClick"> :placeholder="$t('common.queryDeptTip')"
:query="deptData.queryList"
:show-expand="true"
@node-click="handleNodeClick"
>
<!-- 没有数据权限提示 --> <!-- 没有数据权限提示 -->
<template #default="{ node, data }"> <template #default="{ node, data }">
<el-tooltip v-if="data.isLock" class="item" effect="dark" <el-tooltip
:content="$t('sysuser.noDataScopeTip')" placement="right-start"> v-if="data.isLock"
<span>{{ node.label }} class="item"
effect="dark"
:content="$t('sysuser.noDataScopeTip')"
placement="right-start"
>
<span
>{{ node.label }}
<SvgIcon name="ele-Lock" /> <SvgIcon name="ele-Lock" />
</span> </span>
</el-tooltip> </el-tooltip>
@@ -25,68 +35,97 @@
<el-row v-show="showSearch"> <el-row v-show="showSearch">
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList"> <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-form-item :label="$t('sysuser.username')" prop="username"> <el-form-item :label="$t('sysuser.username')" prop="username">
<el-input v-model="state.queryForm.username" <el-input v-model="state.queryForm.username" :placeholder="$t('sysuser.inputUsernameTip')" clearable />
:placeholder="$t('sysuser.inputUsernameTip')" clearable />
</el-form-item> </el-form-item>
<el-form-item :label="$t('sysuser.phone')" prop="phone"> <el-form-item :label="$t('sysuser.phone')" prop="phone">
<el-input v-model="state.queryForm.phone" :placeholder="$t('sysuser.inputPhoneTip')" <el-input v-model="state.queryForm.phone" :placeholder="$t('sysuser.inputPhoneTip')" clearable />
clearable />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn') <el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
}}</el-button> <el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-row> </el-row>
<el-row> <el-row>
<div class="mb8" style="width: 100%"> <div class="mb8" style="width: 100%">
<el-button v-auth="'sys_user_add'" icon="folder-add" type="primary" <el-button v-auth="'sys_user_add'" icon="folder-add" type="primary" @click="userDialogRef.openDialog()">
@click="userDialogRef.openDialog()"> {{ $t("common.addBtn") }}
{{ $t('common.addBtn') }}
</el-button> </el-button>
<el-button plain v-auth="'sys_user_add'" class="ml10" icon="upload-filled" type="primary" <el-button
@click="excelUploadRef.show()"> plain
{{ $t('common.importBtn') }} v-auth="'sys_user_add'"
class="ml10"
icon="upload-filled"
type="primary"
@click="excelUploadRef.show()"
>
{{ $t("common.importBtn") }}
</el-button> </el-button>
<el-button plain v-auth="'sys_user_del'" :disabled="multiple" class="ml10" icon="Delete" <el-button
type="primary" @click="handleDelete(selectObjs)"> plain
{{ $t('common.delBtn') }} v-auth="'sys_user_del'"
:disabled="multiple"
class="ml10"
icon="Delete"
type="primary"
@click="handleDelete(selectObjs)"
>
{{ $t("common.delBtn") }}
</el-button> </el-button>
<right-toolbar v-model:showSearch="showSearch" :export="'sys_user_export'" <right-toolbar
@exportExcel="exportExcel" @queryTable="getDataList" class="ml10 mr20" v-model:showSearch="showSearch"
style="float: right" /> :export="'sys_user_export'"
@exportExcel="exportExcel"
@queryTable="getDataList"
class="ml10 mr20"
style="float: right"
/>
</div> </div>
</el-row> </el-row>
<el-table v-loading="state.loading" :data="state.dataList" @selection-change="handleSelectionChange" <el-table
row-key="userId" border :cell-style="tableStyle.cellStyle" v-loading="state.loading"
:header-cell-style="tableStyle.headerCellStyle"> :data="state.dataList"
@selection-change="handleSelectionChange"
row-key="userId"
border
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
>
<el-table-column :selectable="handleSelectable" type="selection" width="40" /> <el-table-column :selectable="handleSelectable" type="selection" width="40" />
<el-table-column :label="$t('sysuser.index')" type="index" width="60" fixed="left" /> <el-table-column :label="$t('sysuser.index')" type="index" width="60" fixed="left" />
<el-table-column :label="$t('sysuser.username')" prop="username" fixed="left" <el-table-column
show-overflow-tooltip></el-table-column> :label="$t('sysuser.username')"
<el-table-column :label="$t('sysuser.name')" prop="name" prop="username"
show-overflow-tooltip></el-table-column> fixed="left"
<el-table-column :label="$t('sysuser.phone')" prop="phone" show-overflow-tooltip
show-overflow-tooltip></el-table-column> ></el-table-column>
<el-table-column :label="$t('sysuser.name')" prop="name" show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('sysuser.phone')" prop="phone" show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('sysuser.post')" show-overflow-tooltip> <el-table-column :label="$t('sysuser.post')" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
<el-tag v-for="(item, index) in scope.row.postList" :key="index">{{ item.postName <el-tag v-for="(item, index) in scope.row.postList" :key="index">{{ item.postName }}</el-tag>
}}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('sysuser.role')" show-overflow-tooltip> <el-table-column :label="$t('sysuser.role')" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
<el-tag v-for="(item, index) in scope.row.roleList" :key="index">{{ item.roleName <el-tag v-for="(item, index) in scope.row.roleList" :key="index">{{ item.roleName }}</el-tag>
}}</el-tag> </template>
</el-table-column>
<el-table-column width="80" label="人脸">
<template #default="{ row }">
<preview-image :src="row.faceImgs" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('sysuser.lockFlag')" show-overflow-tooltip> <el-table-column :label="$t('sysuser.lockFlag')" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
<el-switch v-model="scope.row.lockFlag" @change="changeSwitch(scope.row)" <el-switch
active-value="0" inactive-value="9"></el-switch> v-model="scope.row.lockFlag"
@change="changeSwitch(scope.row)"
active-value="0"
inactive-value="9"
></el-switch>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('common.action')" width="300" fixed="right"> <el-table-column :label="$t('common.action')" width="300" fixed="right">
@@ -95,29 +134,40 @@
<!-- 重置密码 --> <!-- 重置密码 -->
<popover-input v-model="inputPassword" @confirm="changePassword(scope.row)"> <popover-input v-model="inputPassword" @confirm="changePassword(scope.row)">
<template #default> <template #default>
<el-button v-auth="'sys_user_edit'" icon="RefreshLeft" text type="primary" <el-button v-auth="'sys_user_edit'" icon="RefreshLeft" text type="primary" class="mr-4">
class="mr-4"> {{ $t("sysuser.passwordBtn") }}
{{ $t('sysuser.passwordBtn') }}
</el-button> </el-button>
</template> </template>
</popover-input> </popover-input>
<!-- 修改信息 --> <!-- 修改信息 -->
<el-button v-auth="'sys_user_edit'" icon="edit-pen" text type="primary" <el-button
@click="userDialogRef.openDialog(scope.row.userId)"> v-auth="'sys_user_edit'"
{{ $t('common.editBtn') }} icon="edit-pen"
text
type="primary"
@click="userDialogRef.openDialog(scope.row.userId)"
>
{{ $t("common.editBtn") }}
</el-button> </el-button>
<!-- 人脸管理 --> <!-- 人脸管理 -->
<el-button icon="User" text type="primary" <el-button icon="User" text type="primary" @click="faceManageRef.openDialog(scope.row.userId)">
@click="faceManageRef.openDialog(scope.row.userId)">
人脸管理 人脸管理
</el-button> </el-button>
<!-- 删除用户 --> <!-- 删除用户 -->
<el-tooltip :content="$t('sysuser.deleteDisabledTip')" <el-tooltip
:disabled="scope.row.userId !== '1'" placement="top"> :content="$t('sysuser.deleteDisabledTip')"
:disabled="scope.row.userId !== '1'"
placement="top"
>
<span style="margin-left: 12px"> <span style="margin-left: 12px">
<el-button icon="delete" v-auth="'sys_user_del'" <el-button
:disabled="scope.row.username === 'admin'" text type="primary" icon="delete"
@click="handleDelete([scope.row.userId])">{{ $t('common.delBtn') }} v-auth="'sys_user_del'"
:disabled="scope.row.username === 'admin'"
text
type="primary"
@click="handleDelete([scope.row.userId])"
>{{ $t("common.delBtn") }}
</el-button> </el-button>
</span> </span>
</el-tooltip> </el-tooltip>
@@ -125,8 +175,7 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-bind="state.pagination" @current-change="currentChangeHandle" <pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle">
@size-change="sizeChangeHandle">
</pagination> </pagination>
</div> </div>
</pane> </pane>
@@ -136,126 +185,131 @@
<face-manage ref="faceManageRef" @refresh="getDataList(false)" /> <face-manage ref="faceManageRef" @refresh="getDataList(false)" />
<upload-excel ref="excelUploadRef" :title="$t('sysuser.importUserTip')" <upload-excel
temp-url="/admin/sys-file/local/file/user.xlsx" url="/admin/user/import" @refreshDataList="getDataList" /> ref="excelUploadRef"
:title="$t('sysuser.importUserTip')"
temp-url="/admin/sys-file/local/file/user.xlsx"
url="/admin/user/import-face"
@refreshDataList="getDataList"
/>
</div> </div>
</template> </template>
<script lang="ts" name="systemUser" setup> <script lang="ts" name="systemUser" setup>
import { delObj, pageList, putObj } from '/@/api/admin/user'; import { delObj, pageList, putObj } from "/@/api/admin/user"
import { deptTree } from '/@/api/admin/dept'; import { deptTree } from "/@/api/admin/dept"
import { BasicTableProps, useTable } from '/@/hooks/table'; import { BasicTableProps, useTable } from "/@/hooks/table"
import { useMessage, useMessageBox } from '/@/hooks/message'; import { useMessage, useMessageBox } from "/@/hooks/message"
import { useI18n } from 'vue-i18n'; import { useI18n } from "vue-i18n"
// 动态引入组件 // 动态引入组件
const UserForm = defineAsyncComponent(() => import('./form.vue')); const UserForm = defineAsyncComponent(() => import("./form.vue"))
const FaceManage = defineAsyncComponent(() => import('./face-manage.vue')); const FaceManage = defineAsyncComponent(() => import("./face-manage.vue"))
const QueryTree = defineAsyncComponent(() => import('/@/components/QueryTree/index.vue')); const QueryTree = defineAsyncComponent(() => import("/@/components/QueryTree/index.vue"))
const PopoverInput = defineAsyncComponent(() => import('/@/components/PopoverInput/index.vue')); const PopoverInput = defineAsyncComponent(() => import("/@/components/PopoverInput/index.vue"))
const { t } = useI18n(); const { t } = useI18n()
// 定义变量内容 // 定义变量内容
const userDialogRef = ref(); const userDialogRef = ref()
const faceManageRef = ref(); const faceManageRef = ref()
const excelUploadRef = ref(); const excelUploadRef = ref()
const queryRef = ref(); const queryRef = ref()
const showSearch = ref(true); const showSearch = ref(true)
const inputPassword = ref(); const inputPassword = ref()
// 多选rows // 多选rows
const selectObjs = ref([]) as any; const selectObjs = ref([]) as any
// 是否可以多选 // 是否可以多选
const multiple = ref(true); const multiple = ref(true)
// 定义表格查询、后台调用的API // 定义表格查询、后台调用的API
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: { queryForm: {
deptId: '', deptId: "",
username: '', username: "",
phone: '', phone: "",
}, },
pageList: pageList, pageList: pageList,
}); })
const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state); const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state)
// 部门树使用的数据 // 部门树使用的数据
const deptData = reactive({ const deptData = reactive({
queryList: (name: String) => { queryList: (name: String) => {
return deptTree({ return deptTree({
deptName: name, deptName: name,
}); })
}, },
}); })
// 清空搜索条件 // 清空搜索条件
const resetQuery = () => { const resetQuery = () => {
queryRef.value?.resetFields(); queryRef.value?.resetFields()
state.queryForm.deptId = ''; state.queryForm.deptId = ""
getDataList(); getDataList()
}; }
// 点击树 // 点击树
const handleNodeClick = (e: any) => { const handleNodeClick = (e: any) => {
state.queryForm.deptId = e.id; state.queryForm.deptId = e.id
getDataList(); getDataList()
}; }
// 导出excel // 导出excel
const exportExcel = () => { const exportExcel = () => {
downBlobFile('/admin/user/export', Object.assign(state.queryForm, { ids: selectObjs }), 'users.xlsx'); downBlobFile("/admin/user/export", Object.assign(state.queryForm, { ids: selectObjs }), "users.xlsx")
}; }
// 是否可以多选 // 是否可以多选
const handleSelectable = (row: any) => { const handleSelectable = (row: any) => {
return row.username !== 'admin'; return row.username !== "admin"
}; }
// 多选事件 // 多选事件
const handleSelectionChange = (objs: { userId: string }[]) => { const handleSelectionChange = (objs: { userId: string }[]) => {
selectObjs.value = objs.map(({ userId }) => userId); selectObjs.value = objs.map(({ userId }) => userId)
multiple.value = !objs.length; multiple.value = !objs.length
}; }
// 删除操作 // 删除操作
const handleDelete = async (ids: string[]) => { const handleDelete = async (ids: string[]) => {
try { try {
await useMessageBox().confirm(t('common.delConfirmText')); await useMessageBox().confirm(t("common.delConfirmText"))
} catch { } catch {
return; return
} }
try { try {
await delObj(ids); await delObj(ids)
getDataList(); getDataList()
useMessage().success(t('common.delSuccessText')); useMessage().success(t("common.delSuccessText"))
} catch (err: any) { } catch (err: any) {
useMessage().error(err.msg); useMessage().error(err.msg)
} }
}; }
//表格内开关 (用户状态) //表格内开关 (用户状态)
const changeSwitch = async (row: any) => { const changeSwitch = async (row: any) => {
// 不修改密码 // 不修改密码
row.password = undefined; row.password = undefined
row.phone = undefined; row.phone = undefined
await putObj(row); await putObj(row)
useMessage().success(t('common.optSuccessText')); useMessage().success(t("common.optSuccessText"))
getDataList(); getDataList()
}; }
//修改用户密码 //修改用户密码
const changePassword = async (row: any) => { const changePassword = async (row: any) => {
if (!inputPassword.value || inputPassword.value.length < 6 || inputPassword.value.length > 20) { if (!inputPassword.value || inputPassword.value.length < 6 || inputPassword.value.length > 20) {
useMessage().error(t('sysuser.inputPasswordTip')); useMessage().error(t("sysuser.inputPasswordTip"))
return; return
} }
row.phone = undefined; row.phone = undefined
row.password = inputPassword.value; row.password = inputPassword.value
await putObj(row); await putObj(row)
useMessage().success(t('common.optSuccessText')); useMessage().success(t("common.optSuccessText"))
getDataList(); getDataList()
}; }
</script> </script>
src/views/flow/form/tools/FlowNodeFormat.vue
+39 -11
View File
@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import selectShow from '/@/components/OrgSelector/index.vue'; import selectShow from "/@/components/OrgSelector/index.vue"
let props = defineProps({ let props = defineProps({
nodeUser: { nodeUser: {
@@ -14,10 +14,10 @@ let props = defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
}); })
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance()
import { Check, Plus, Refresh } from '@element-plus/icons-vue'; import { Check, Plus, Refresh } from "@element-plus/icons-vue"
</script> </script>
<template> <template>
@@ -43,7 +43,10 @@ import { Check, Plus, Refresh } from '@element-plus/icons-vue';
</p> </p>
</template> </template>
<!-- 渲染用户头像列表--> <!-- 渲染用户头像列表-->
<div v-if="node.userVoList && node.userVoList.length > 0" style="display: flex; flex-direction: row; flex-wrap: wrap"> <div
v-if="node.userVoList && node.userVoList.length > 0"
style="display: flex; flex-direction: row; flex-wrap: wrap"
>
<div <div
class="box-card" class="box-card"
v-for="(item1, index1) in node.userVoList" v-for="(item1, index1) in node.userVoList"
@@ -54,9 +57,17 @@ import { Check, Plus, Refresh } from '@element-plus/icons-vue';
<div style="overflow: hidden"> <div style="overflow: hidden">
<div class="d1"> <div class="d1">
<div> <div>
<upload-img v-model:image-url="item1.avatar" width="30px" height="30px"></upload-img> <preview-image :src="item1.avatar" />
</div> </div>
<div style="font-size: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center"> <div
style="
font-size: 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
"
>
{{ item1.name }} {{ item1.name }}
</div> </div>
</div> </div>
@@ -76,7 +87,10 @@ import { Check, Plus, Refresh } from '@element-plus/icons-vue';
</div> </div>
<div style="height: 40px; line-height: 40px; font-size: 10px">(添加了评论) {{ item1.showTime }}</div> <div style="height: 40px; line-height: 40px; font-size: 10px">(添加了评论) {{ item1.showTime }}</div>
</div> </div>
<div class="box-card" style="margin-bottom: 10px; padding: 5px; background-color: var(--el-fill-color-light)"> <div
class="box-card"
style="margin-bottom: 10px; padding: 5px; background-color: var(--el-fill-color-light)"
>
{{ item1.approveDesc }} {{ item1.approveDesc }}
</div> </div>
</template> </template>
@@ -84,14 +98,28 @@ import { Check, Plus, Refresh } from '@element-plus/icons-vue';
<!-- 选择用户--> <!-- 选择用户-->
<template v-if="node.selectUser"> <template v-if="node.selectUser">
<select-show :disabled="disableSelect" v-model:orgList="nodeUser[node.id]" type="user" :multiple="node.multiple"></select-show> <select-show
:disabled="disableSelect"
v-model:orgList="nodeUser[node.id]"
type="user"
:multiple="node.multiple"
></select-show>
</template> </template>
<el-tabs v-if="node.branch.length > 0" type="border-card"> <el-tabs v-if="node.branch.length > 0" type="border-card">
<el-tab-pane v-for="(node1, index1) in node.branch" :label="'分支' + (index1 + 1)" :name="index1 + ''" :key="index1"> <el-tab-pane
v-for="(node1, index1) in node.branch"
:label="'分支' + (index1 + 1)"
:name="index1 + ''"
:key="index1"
>
<template v-if="node1.placeholder && node1.placeholder.length > 0">[{{ node1.placeholder }}]</template> <template v-if="node1.placeholder && node1.placeholder.length > 0">[{{ node1.placeholder }}]</template>
<div style="padding: 0px 5px"> <div style="padding: 0px 5px">
<flow-node-format :node-user="nodeUser" :disableSelect="disableSelect" :row="node1.children"></flow-node-format> <flow-node-format
:node-user="nodeUser"
:disableSelect="disableSelect"
:row="node1.children"
></flow-node-format>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
src/views/hard/hard-after-sale/order-refund.vue
+250 -231
View File
@@ -1,284 +1,303 @@
<template> <template>
<div class="layout-padding"> <div class="layout-padding">
<div v-loading="loading" class="layout-padding-auto layout-padding-view" style="overflow: scroll !important;"> <div v-loading="loading" class="layout-padding-auto layout-padding-view" style="overflow: scroll !important">
<el-descriptions :column="3" border title="订单信息"> <el-descriptions :column="3" border title="订单信息">
<el-descriptions-item :span="3" label="订单号: "> <el-descriptions-item :span="3" label="订单号: ">
{{ globalData.detail.id }} {{ globalData.detail.id }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="订单类型: "> <el-descriptions-item label="订单类型: ">
<dict-tag :options="hard_order_type" :value="globalData.detail.orderType" /> <dict-tag :options="hard_order_type" :value="globalData.detail.orderType" />
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="付款方式: "> <el-descriptions-item label="付款方式: ">
<dict-tag :options="hard_pay_type" :value="globalData.detail.payType" /> <dict-tag :options="hard_pay_type" :value="globalData.detail.payType" />
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="订单状态: "> <el-descriptions-item label="订单状态: ">
<dict-tag :options="hard_order_status" :value="globalData.detail.orderStatus" /> <dict-tag :options="hard_order_status" :value="globalData.detail.orderStatus" />
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="商户: "> <el-descriptions-item label="商户: ">
<span> {{ globalData.detail.merchantName }}</span> <span> {{ globalData.detail.merchantName }}</span>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="设备名: "> <el-descriptions-item label="设备名: ">
<span> {{ globalData.detail.hardName }}</span> <span> {{ globalData.detail.hardName }}</span>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="设备类型: "> <el-descriptions-item label="设备类型: ">
<span> {{ globalData.detail.hardType }}</span> <span> {{ globalData.detail.hardType }}</span>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="商品总价: "> <el-descriptions-item label="商品总价: ">
<span class="color-success"> <span class="color-success">
{{ displayPrice(globalData.detail.totalPrice) }} {{ displayPrice(globalData.detail.totalPrice) }}
</span> </span>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="额外支付: "> <el-descriptions-item label="额外支付: ">
<span class="color-danger"> <span class="color-danger">
{{ displayPrice(globalData.detail.extraPrice) }} {{ displayPrice(globalData.detail.extraPrice) }}
</span> </span>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="实际支付: "> <el-descriptions-item label="实际支付: ">
<span class="color-primary"> <span class="color-primary">
{{ displayPrice(globalData.detail.payPrice) }} {{ displayPrice(globalData.detail.payPrice) }}
</span> </span>
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<el-descriptions :column="1" title="商品信息"> <el-descriptions :column="1" title="商品信息">
<el-descriptions-item labelClassName="no-colon"> <el-descriptions-item labelClassName="no-colon">
<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle" <el-table
:header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle"> :data="state.dataList"
<el-table-column label="商品名" align="center" prop="productName" /> v-loading="state.loading"
<el-table-column label="商品图片" align="center" prop="code"> border
<template #default="{ row }"> :cell-style="tableStyle.cellStyle"
<preview-image v-if="row.productPic" :src="row.productPic" /> :header-cell-style="tableStyle.headerCellStyle"
</template> @sort-change="sortChangeHandle"
</el-table-column> >
<el-table-column label="商品价格" align="center" prop="ticketId"> <el-table-column label="商品名" align="center" prop="productName" />
<template #default="{ row }"> <el-table-column label="商品图片" align="center" prop="code">
<span>{{ displayPrice(row.productPrice) }}</span> <template #default="{ row }">
</template> <preview-image v-if="row.productPic" :src="row.productPic" />
</el-table-column> </template>
<el-table-column label="商品数量" align="center" prop="productCount" /> </el-table-column>
<el-table-column label="商品总额" align="center" prop="totalPrice"> <el-table-column label="商品价格" align="center" prop="ticketId">
<template #default="{ row }"> <template #default="{ row }">
<span>{{ displayPrice(row.totalPrice) }}</span> <span>{{ displayPrice(row.productPrice) }}</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> <el-table-column label="商品数量" align="center" prop="productCount" />
</el-descriptions-item> <el-table-column label="商品总额" align="center" prop="totalPrice">
</el-descriptions> <template #default="{ row }">
<span>{{ displayPrice(row.totalPrice) }}</span>
</template>
</el-table-column>
</el-table>
</el-descriptions-item>
</el-descriptions>
<!-- 退款状态 --> <!-- 退款状态 -->
<el-descriptions v-if="globalData.afterSaleData.id" :column="2" border title="退款状态"> <el-descriptions v-if="globalData.afterSaleData.id" :column="2" border title="退款状态">
<el-descriptions-item :column="1" label="退款状态: "> <el-descriptions-item :column="1" label="退款状态: ">
<dict-tag :options="hard_sale_status" :value="globalData.afterSaleData.status" /> <dict-tag :options="hard_sale_status" :value="globalData.afterSaleData.status" />
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item :column="1" <el-descriptions-item
v-if="globalData.type == 'apply' && globalData.afterSaleData.status == 10" label="操作: " :column="1"
label-class-name="no-colon"> v-if="globalData.type == 'apply' && globalData.afterSaleData.status == 10"
<div class="flex justify-evenly"> label="操作: "
<el-button type="primary" @click="agree"> label-class-name="no-colon"
同意售后 >
</el-button> <div class="flex justify-evenly">
<el-button type="danger" @click="refundRejectRef.openDialog(globalData.detail.id)"> <el-button type="primary" @click="agree"> 同意售后 </el-button>
拒绝售后 <el-button type="danger" @click="refundRejectRef.openDialog(globalData.detail.id)"> 拒绝售后 </el-button>
</el-button> </div>
</div> </el-descriptions-item>
</el-descriptions-item> </el-descriptions>
</el-descriptions>
<el-descriptions v-if="globalData.afterSaleData.id" border title="售后信息"> <el-descriptions v-if="globalData.afterSaleData.id" border title="售后信息">
<el-descriptions-item :span="3" label="退款编号: "> <el-descriptions-item :span="3" label="退款编号: ">
{{ globalData.afterSaleData.no }} {{ globalData.afterSaleData.no }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="售后类型: "> <el-descriptions-item label="售后类型: ">
<dict-tag :options="hard_after_sale_type" :value="globalData.afterSaleData.type" /> <dict-tag :options="hard_after_sale_type" :value="globalData.afterSaleData.type" />
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="售后方式: "> <el-descriptions-item label="售后方式: ">
<dict-tag :options="hard_after_sale_way" :value="globalData.afterSaleData.way" /> <dict-tag :options="hard_after_sale_way" :value="globalData.afterSaleData.way" />
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="退款金额: "> <el-descriptions-item label="退款金额: ">
{{ displayPrice(globalData.afterSaleData.refundPrice) }} {{ displayPrice(globalData.afterSaleData.refundPrice) }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="退款原因: "> <el-descriptions-item label="退款原因: ">
{{ globalData.afterSaleData.applyReason }} {{ globalData.afterSaleData.applyReason }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="补充描述: "> <el-descriptions-item label="补充描述: ">
{{ globalData.afterSaleData.applyDescription }} {{ globalData.afterSaleData.applyDescription }}
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<el-descriptions v-if="globalData.log && globalData.log.length" title="售后日志"> <el-descriptions v-if="globalData.log && globalData.log.length" title="售后日志">
<el-descriptions-item labelClassName="no-colon"> <el-descriptions-item labelClassName="no-colon">
<el-timeline> <el-timeline>
<el-timeline-item v-for="v in globalData.log" :key="v.id" :timestamp="v.createTime" <el-timeline-item v-for="v in globalData.log" :key="v.id" :timestamp="v.createTime" placement="top">
placement="top"> <div class="el-timeline-right-content">
<div class="el-timeline-right-content"> <span>{{ v.content }}</span>
<span>{{ v.content }}</span> </div>
</div> </el-timeline-item>
</el-timeline-item> </el-timeline>
</el-timeline> </el-descriptions-item>
</el-descriptions-item> </el-descriptions>
</el-descriptions> </div>
</div>
<refund-reject-form ref="refundRejectRef" @refresh="getDetail" /> <refund-reject-form ref="refundRejectRef" @refresh="getDetail" />
</div> </div>
</template> </template>
<script setup lang="ts" name="order-refund"> <script setup lang="ts" name="order-refund">
import { BasicTableProps, useTable } from "/@/hooks/table"; import { BasicTableProps, useTable } from "/@/hooks/table"
import { useMessage, useMessageBox } from "/@/hooks/message"; import { useMessage, useMessageBox } from "/@/hooks/message"
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
import * as hardOrder from "/@/api/hard/hard-order"; import * as hardOrder from "/@/api/hard/hard-order"
import * as hardCar from "/@/api/hard/hard-car"; import * as hardCar from "/@/api/hard/hard-car"
import * as hardAfterSaleApi from '/@/api/hard/hard-after-sale' import * as hardAfterSaleApi from "/@/api/hard/hard-after-sale"
import { displayPrice } from "/@/utils/formatMoney" import { displayPrice } from "/@/utils/formatMoney"
import { ElLoading } from 'element-plus' import { ElLoading } from "element-plus"
// 引入组件 // 引入组件
const RefundRejectForm = defineAsyncComponent(() => import('./refund-reject.vue')); const RefundRejectForm = defineAsyncComponent(() => import("./refund-reject.vue"))
// 定义查询字典 // 定义查询字典
const { hard_pay_type, hard_order_type, hard_order_status, hard_after_sale_way, hard_after_sale_type, hard_sale_status } = useDict("hard_pay_type", "hard_order_type", "hard_order_status", "hard_after_sale_way", "hard_after_sale_type", "hard_sale_status") const {
hard_pay_type,
hard_order_type,
hard_order_status,
hard_after_sale_way,
hard_after_sale_type,
hard_sale_status,
} = useDict(
"hard_pay_type",
"hard_order_type",
"hard_order_status",
"hard_after_sale_way",
"hard_after_sale_type",
"hard_sale_status",
)
const { query } = useRoute() const { query } = useRoute()
const refundRejectRef = ref() const refundRejectRef = ref()
const loading = ref(false) const loading = ref(false)
const globalData = reactive<any>({ const globalData = reactive<any>({
type: "", type: "",
detail: {}, detail: {},
afterSaleData: {}, afterSaleData: {},
log: [] log: [],
}) })
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
createdIsNeed: false, createdIsNeed: false,
queryForm: {}, queryForm: {},
pagination: { pagination: {
size: 100, size: 100,
}, },
pageList: hardCar.getCarByOrderId pageList: hardCar.getCarByOrderId,
}) })
// table hook // table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state) const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } =
useTable(state)
onMounted(async () => { onMounted(async () => {
const type = query.type as unknown as any const type = query.type as unknown as any
if (type) { if (type) {
globalData.type = type globalData.type = type
} }
await getDetail() await getDetail()
}) })
const agree = async () => { const agree = async () => {
let loading: any = null let loading: any = null
try { try {
await useMessage().delConfirm("是否同意售后？") await useMessage().delConfirm("是否同意售后？")
loading = ElLoading.service({ loading = ElLoading.service({
lock: true, lock: true,
text: '提交中', text: "提交中",
background: 'rgba(0, 0, 0, 0.7)', background: "rgba(0, 0, 0, 0.7)",
}) })
await hardAfterSaleApi.agree({ id: globalData.afterSaleData.id }) await hardAfterSaleApi.agree({ id: globalData.afterSaleData.id })
await getDetail() await getDetail()
} finally { } finally {
setTimeout(() => loading.close(), 1000) setTimeout(() => loading.close(), 1000)
} }
} }
const getDetail = async () => { const getDetail = async () => {
const id = query.id as unknown as any const id = query.id as unknown as any
if (!id) return if (!id) return
state.queryForm.orderId = id state.queryForm.orderId = id
const { data: orderData } = await hardOrder.getObj(id) const { data: orderData } = await hardOrder.getObj(id)
globalData.detail = orderData globalData.detail = orderData
getDataList() getDataList()
const { data: afterSaleData } = await hardAfterSaleApi.detailByOrderId({ orderId: id }) const { data: afterSaleData } = await hardAfterSaleApi.detailByOrderId({ orderId: id })
if (afterSaleData && afterSaleData.id) { if (afterSaleData && afterSaleData.id) {
globalData.afterSaleData = afterSaleData globalData.afterSaleData = afterSaleData
const { data: log } = await hardAfterSaleApi.history({ id: afterSaleData.id }) const { data: log } = await hardAfterSaleApi.history({ id: afterSaleData.id })
globalData.log = log globalData.log = log
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.el-descriptions) { :deep(.el-descriptions) {
&:not(:nth-child(1)) { &:not(:nth-child(1)) {
margin-top: 20px; margin-top: 20px;
} }
.el-descriptions__title { .el-descriptions__title {
display: flex; display: flex;
align-items: center; align-items: center;
&::before { &::before {
display: inline-block; display: inline-block;
width: 3px; width: 3px;
height: 20px; height: 20px;
margin-right: 10px; margin-right: 10px;
background-color: #409eff; background-color: #409eff;
content: ''; content: "";
} }
} }
.el-descriptions-item__container { .el-descriptions-item__container {
margin: 0 10px; margin: 0 10px;
.no-colon { .no-colon {
margin: 0; margin: 0;
&::after { &::after {
content: ''; content: "";
} }
} }
} }
} }
// 时间线样式调整 // 时间线样式调整
:deep(.el-timeline) { :deep(.el-timeline) {
margin: 10px 0 0 160px; margin: 10px 0 0 160px;
.el-timeline-item__wrapper { .el-timeline-item__wrapper {
position: relative; position: relative;
top: -20px; top: -20px;
.el-timeline-item__timestamp { .el-timeline-item__timestamp {
position: absolute !important; position: absolute !important;
top: 10px; top: 10px;
left: -150px; left: -150px;
} }
} }
.el-timeline-right-content { .el-timeline-right-content {
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 30px; min-height: 30px;
padding: 10px; padding: 10px;
background-color: #409eff; background-color: #409eff;
&::before { &::before {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 13px; left: 13px;
border-color: transparent #409eff transparent transparent; border-color: transparent #409eff transparent transparent;
border-style: solid; border-style: solid;
border-width: 8px; border-width: 8px;
content: ''; content: "";
} }
} }
.el-timeline-item__node { .el-timeline-item__node {
position: absolute; position: absolute;
left: -5px; left: -5px;
top: -50%; top: -50%;
transform: translateY(100%); transform: translateY(100%);
display: flex; display: flex;
width: 20px; width: 20px;
height: 20px; height: 20px;
font-size: 10px; font-size: 10px;
background: #409eff; background: #409eff;
border-radius: 50%; border-radius: 50%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
} }
</style> </style>
src/views/hard/hard-manager/face-form.vue
+79 -82
View File
@@ -1,114 +1,111 @@
<template> <template>
<el-dialog title="人脸sdk设置" width="30%" v-model="visible" :close-on-click-modal="false" draggable> <el-dialog title="人脸sdk设置" width="40%" v-model="visible" :close-on-click-modal="false" draggable>
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px" <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px" v-loading="loading">
v-loading="loading"> <el-row :gutter="24">
<el-row :gutter="24"> <el-col :span="24" class="mb20">
<el-form-item label="人脸appId" prop="faceAppId">
<el-input v-model="form.faceAppId" placeholder="请输入人脸appId" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="人脸appId" prop="faceAppId"> <el-form-item label="人脸sdkKey" prop="faceSdkKey">
<el-input v-model="form.faceAppId" placeholder="请输入人脸appId" /> <el-input v-model="form.faceSdkKey" placeholder="请输入人脸sdkKey" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="人脸sdkKey" prop="faceSdkKey"> <el-form-item label="人脸activeKey" prop="faceActiveKey">
<el-input v-model="form.faceSdkKey" placeholder="请输入人脸sdkKey" /> <el-input v-model="form.faceActiveKey" placeholder="请输入人脸activeKey" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<el-col :span="24" class="mb20"> </el-form>
<el-form-item label="人脸activeKey" prop="faceActiveKey"> <template #footer>
<el-input v-model="form.faceActiveKey" placeholder="请输入人脸activeKey" /> <span class="dialog-footer">
</el-form-item> <el-button @click="visible = false">取消</el-button>
</el-col> <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
</span>
</el-row> </template>
</el-form> </el-dialog>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
</span>
</template>
</el-dialog>
</template> </template>
<script setup lang="ts" name="face-form"> <script setup lang="ts" name="face-form">
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
import { useMessage } from "/@/hooks/message"; import { useMessage } from "/@/hooks/message"
import { getObj, addObj, putObj } from '/@/api/hard/hard-manager' import { getObj, addObj, putObj } from "/@/api/hard/hard-manager"
import { rule } from '/@/utils/validate'; import { rule } from "/@/utils/validate"
const emit = defineEmits(['refresh']); const emit = defineEmits(["refresh"])
// 定义变量内容 // 定义变量内容
const dataFormRef = ref(); const dataFormRef = ref()
const visible = ref(false) const visible = ref(false)
const loading = ref(false) const loading = ref(false)
// 提交表单数据 // 提交表单数据
const form = reactive<any>({ const form = reactive<any>({
id: undefined, id: undefined,
faceAppId: undefined, faceAppId: undefined,
faceSdkKey: undefined, faceSdkKey: undefined,
faceActiveKey: undefined, faceActiveKey: undefined,
}); })
// 定义校验规则 // 定义校验规则
const dataRules = ref({ const dataRules = ref({
faceAppId: [{ required: true, message: '请输入人脸appId', trigger: 'blur' }], faceAppId: [{ required: true, message: "请输入人脸appId", trigger: "blur" }],
faceSdkKey: [{ required: true, message: '请输入人脸sdkKey', trigger: 'blur' }], faceSdkKey: [{ required: true, message: "请输入人脸sdkKey", trigger: "blur" }],
faceActiveKey: [{ required: true, message: '请输入人脸activeKey', trigger: 'blur' }], faceActiveKey: [{ required: true, message: "请输入人脸activeKey", trigger: "blur" }],
}) })
// 打开弹窗 // 打开弹窗
const openDialog = (id: string) => { const openDialog = (id: string) => {
visible.value = true visible.value = true
form.id = '' form.id = ""
// 重置表单数据 // 重置表单数据
nextTick(() => { nextTick(() => {
dataFormRef.value?.resetFields(); dataFormRef.value?.resetFields()
}); })
// 获取hardManager信息 // 获取hardManager信息
if (id) { if (id) {
form.id = id form.id = id
gethardManagerData(id) gethardManagerData(id)
} }
}; }
// 提交 // 提交
const onSubmit = async () => { const onSubmit = async () => {
const valid = await dataFormRef.value.validate().catch(() => { }); const valid = await dataFormRef.value.validate().catch(() => {})
if (!valid) return false; if (!valid) return false
try {
loading.value = true;
form.id ? await putObj(form) : await addObj(form);
useMessage().success(form.id ? '修改成功' : '添加成功');
visible.value = false;
emit('refresh');
} catch (err: any) {
useMessage().error(err.msg);
} finally {
loading.value = false;
}
};
try {
loading.value = true
form.id ? await putObj(form) : await addObj(form)
useMessage().success(form.id ? "修改成功" : "添加成功")
visible.value = false
emit("refresh")
} catch (err: any) {
useMessage().error(err.msg)
} finally {
loading.value = false
}
}
// 初始化表单数据 // 初始化表单数据
const gethardManagerData = (id: string) => { const gethardManagerData = (id: string) => {
// 获取数据 // 获取数据
loading.value = true loading.value = true
getObj(id).then((res: any) => { getObj(id)
Object.assign(form, res.data) .then((res: any) => {
}).finally(() => { Object.assign(form, res.data)
loading.value = false })
}) .finally(() => {
}; loading.value = false
})
}
// 暴露变量 // 暴露变量
defineExpose({ defineExpose({
openDialog openDialog,
}); })
</script> </script>
src/views/hard/hard-manager/form.vue
+80 -81
View File
@@ -1,115 +1,114 @@
<template> <template>
<el-dialog :title="form.id ? '编辑' : '新增'" width="30%" v-model="visible" :close-on-click-modal="false" draggable> <el-dialog :title="form.id ? '编辑' : '新增'" width="40%" v-model="visible" :close-on-click-modal="false" draggable>
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading"> <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="24" class="mb20">
<el-form-item label="设备名" prop="name">
<el-input v-model="form.name" placeholder="请输入设备名" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="设备名" prop="name"> <el-form-item label="商户" prop="merchantId">
<el-input v-model="form.name" placeholder="请输入设备名" /> <select-mch v-model="form.merchantId" placeholder="请选择商户" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="商户" prop="merchantId"> <el-form-item label="设备类型" prop="type">
<select-mch v-model="form.merchantId" placeholder="请选择商户" /> <dict-select v-model="form.type" dict-code="hard_type" clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<el-col :span="24" class="mb20"> </el-form>
<el-form-item label="设备类型" prop="type"> <template #footer>
<dict-select v-model="form.type" dict-code="hard_type" clearable /> <span class="dialog-footer">
</el-form-item> <el-button @click="visible = false">取消</el-button>
</el-col> <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
</span>
</el-row> </template>
</el-form> </el-dialog>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
</span>
</template>
</el-dialog>
</template> </template>
<script setup lang="ts" name="HardManagerDialog"> <script setup lang="ts" name="HardManagerDialog">
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
import { useMessage } from "/@/hooks/message"; import { useMessage } from "/@/hooks/message"
import { getObj, addObj, putObj } from '/@/api/hard/hard-manager' import { getObj, addObj, putObj } from "/@/api/hard/hard-manager"
import { rule } from '/@/utils/validate'; import { rule } from "/@/utils/validate"
const emit = defineEmits(['refresh']); const emit = defineEmits(["refresh"])
// 定义变量内容 // 定义变量内容
const dataFormRef = ref(); const dataFormRef = ref()
const visible = ref(false) const visible = ref(false)
const loading = ref(false) const loading = ref(false)
// 定义字典 // 定义字典
// 提交表单数据 // 提交表单数据
const form = reactive({ const form = reactive({
id: '', id: "",
merchantId: '', merchantId: "",
deptId: '', deptId: "",
name: '', name: "",
type: '', type: "",
}); })
// 定义校验规则 // 定义校验规则
const dataRules = ref({ const dataRules = ref({
name: [{ required: true, message: '设备名不能为空', trigger: 'blur' }], name: [{ required: true, message: "设备名不能为空", trigger: "blur" }],
merchantId: [{ required: true, message: '商户不能为空', trigger: 'change' }], merchantId: [{ required: true, message: "商户不能为空", trigger: "change" }],
type: [{ required: true, message: '设备类型不能为空', trigger: 'change' }], type: [{ required: true, message: "设备类型不能为空", trigger: "change" }],
}) })
// 打开弹窗 // 打开弹窗
const openDialog = (id: string) => { const openDialog = (id: string) => {
visible.value = true visible.value = true
form.id = '' form.id = ""
// 重置表单数据 // 重置表单数据
nextTick(() => { nextTick(() => {
dataFormRef.value?.resetFields(); dataFormRef.value?.resetFields()
}); })
// 获取hardManager信息 // 获取hardManager信息
if (id) { if (id) {
form.id = id form.id = id
gethardManagerData(id) gethardManagerData(id)
} }
}; }
// 提交 // 提交
const onSubmit = async () => { const onSubmit = async () => {
const valid = await dataFormRef.value.validate().catch(() => { }); const valid = await dataFormRef.value.validate().catch(() => {})
if (!valid) return false; if (!valid) return false
try {
loading.value = true;
form.id ? await putObj(form) : await addObj(form);
useMessage().success(form.id ? '修改成功' : '添加成功');
visible.value = false;
emit('refresh');
} catch (err: any) {
useMessage().error(err.msg);
} finally {
loading.value = false;
}
};
try {
loading.value = true
form.id ? await putObj(form) : await addObj(form)
useMessage().success(form.id ? "修改成功" : "添加成功")
visible.value = false
emit("refresh")
} catch (err: any) {
useMessage().error(err.msg)
} finally {
loading.value = false
}
}
// 初始化表单数据 // 初始化表单数据
const gethardManagerData = (id: string) => { const gethardManagerData = (id: string) => {
// 获取数据 // 获取数据
loading.value = true loading.value = true
getObj(id).then((res: any) => { getObj(id)
Object.assign(form, res.data) .then((res: any) => {
}).finally(() => { Object.assign(form, res.data)
loading.value = false })
}) .finally(() => {
}; loading.value = false
})
}
// 暴露变量 // 暴露变量
defineExpose({ defineExpose({
openDialog openDialog,
}); })
</script> </script>
src/views/hard/hard-manager/index.vue
+163 -132
View File
@@ -1,104 +1,141 @@
<template> <template>
<div class="layout-padding"> <div class="layout-padding">
<div class="layout-padding-auto layout-padding-view"> <div class="layout-padding-auto layout-padding-view">
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList"> <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="4"> <el-col :span="4">
<el-form-item class="w100" label="设备名" prop="name"> <el-form-item class="w100" label="设备名" prop="name">
<el-input v-model="state.queryForm.name" placeholder="设备名" /> <el-input v-model="state.queryForm.name" placeholder="设备名" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item class="w100" label="设备类型" prop="type"> <el-form-item class="w100" label="设备类型" prop="type">
<dict-select v-model="state.queryForm.type" dict-code="hard_type" /> <dict-select v-model="state.queryForm.type" dict-code="hard_type" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item class="w100" label="商户" prop="merchantIds"> <el-form-item class="w100" label="商户" prop="merchantIds">
<select-mch v-model="state.queryForm.merchantIds" /> <select-mch v-model="state.queryForm.merchantIds" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-form-item> <el-form-item>
<el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn') <el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
}}</el-button> <el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button> </el-form-item>
</el-form-item> </el-row>
</el-row> </el-form>
</el-form> <el-row>
<el-row> <div class="mb8" style="width: 100%">
<div class="mb8" style="width: 100%"> <el-button
<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" icon="folder-add"
v-auth="'hard_hardManager_add'"> type="primary"
新 增 class="ml10"
</el-button> @click="formDialogRef.openDialog()"
<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'hard_hardManager_del'" v-auth="'hard_hardManager_add'"
@click="handleDelete(selectObjs)"> >
删除 新 增
</el-button> </el-button>
<right-toolbar v-model:showSearch="showSearch" :export="'hard_hardManager_export'" @exportExcel="exportExcel" <el-button
class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar> plain
</div> :disabled="multiple"
</el-row> icon="Delete"
<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle" type="primary"
:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle" v-auth="'hard_hardManager_del'"
@sort-change="sortChangeHandle"> @click="handleDelete(selectObjs)"
<el-table-column type="selection" width="40" align="center" /> >
<el-table-column type="index" label="#" width="40" /> 删除
<el-table-column prop="name" label="设备名" /> </el-button>
<el-table-column prop="type" label="设备类型"> <right-toolbar
<template #default="{ row }"> v-model:showSearch="showSearch"
<dict-tag :options="hard_type" :value="row.type" /> :export="'hard_hardManager_export'"
</template> @exportExcel="exportExcel"
</el-table-column> class="ml10 mr20"
<el-table-column prop="merchantName" label="商户" /> style="float: right"
<el-table-column prop="deptName" label="部门" /> @queryTable="getDataList"
<el-table-column prop="uniqueCode" label="设备唯一编号" /> ></right-toolbar>
<el-table-column prop="mainTopic" width="200" label="topic" /> </div>
<el-table-column prop="isTakeFood" width="200" label="是否为当前商户的取餐机器"> </el-row>
<template #default="{ row }"> <el-table
<el-switch v-if="row.type == 1" :loading="switchTakeFoodLoading" active-text="是" inactive-text="否" :data="state.dataList"
active-value="1" inactive-value="0" v-model="row.isTakeFood" @change="changeTakeFood($event, row)" /> v-loading="state.loading"
<div v-else>只有食堂需要设置</div> border
</template> :cell-style="tableStyle.cellStyle"
</el-table-column> :header-cell-style="tableStyle.headerCellStyle"
<el-table-column prop="createTime" width="200" label="创建时间" /> @selection-change="selectionChangHandle"
<el-table-column label="操作" fixed="right" width="400"> @sort-change="sortChangeHandle"
<template #default="{ row }"> >
<el-button icon="edit-pen" text type="primary" v-auth="'hard_hardManager_edit'" <el-table-column type="selection" width="40" align="center" />
@click="formDialogRef.openDialog(row.id)">编辑</el-button> <el-table-column type="index" label="#" width="40" />
<el-button icon="TrendCharts" link type="primary" @click="mqformDialogRef.openDialog(row.id)"> <el-table-column prop="name" width="200" label="设备名" />
mq设置 <el-table-column prop="type" width="100" label="设备类型">
</el-button> <template #default="{ row }">
<el-button icon="SetUp" link type="primary" @click="faceFormDialogRef.openDialog(row.id)"> <dict-tag :options="hard_type" :value="row.type" />
人脸sdk设置 </template>
</el-button> </el-table-column>
<el-button icon="delete" text type="primary" v-auth="'hard_hardManager_del'" <el-table-column prop="merchantName" width="100" label="商户" />
@click="handleDelete([row.id])">删除</el-button> <el-table-column prop="deptName" width="100" label="部门" />
</template> <el-table-column prop="uniqueCode" width="200" label="设备唯一编号" />
</el-table-column> <el-table-column prop="mainTopic" width="350" label="topic" />
</el-table> <el-table-column prop="isTakeFood" width="200" label="是否为当前商户的取餐机器">
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" /> <template #default="{ row }">
</div> <el-switch
v-if="row.type == 1"
:loading="switchTakeFoodLoading"
active-text="是"
inactive-text="否"
active-value="1"
inactive-value="0"
v-model="row.isTakeFood"
@change="changeTakeFood($event, row)"
/>
<div v-else>只有超市需要设置</div>
</template>
</el-table-column>
<el-table-column prop="createTime" width="200" label="创建时间" />
<el-table-column label="操作" fixed="right" width="400">
<template #default="{ row }">
<el-button
icon="edit-pen"
text
type="primary"
v-auth="'hard_hardManager_edit'"
@click="formDialogRef.openDialog(row.id)"
>编辑</el-button
>
<el-button icon="TrendCharts" link type="primary" @click="mqformDialogRef.openDialog(row.id)">
mq设置
</el-button>
<el-button icon="SetUp" link type="primary" @click="faceFormDialogRef.openDialog(row.id)">
人脸sdk设置
</el-button>
<el-button icon="delete" text type="primary" v-auth="'hard_hardManager_del'" @click="handleDelete([row.id])"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</div>
<!-- 编辑、新增 --> <!-- 编辑、新增 -->
<form-dialog ref="formDialogRef" @refresh="getDataList(false)" /> <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
<face-form-dialog ref="faceFormDialogRef" @refresh="getDataList(false)" /> <face-form-dialog ref="faceFormDialogRef" @refresh="getDataList(false)" />
<mq-form-dialog ref="mqformDialogRef" @refresh="getDataList(false)" /> <mq-form-dialog ref="mqformDialogRef" @refresh="getDataList(false)" />
</div> </div>
</template> </template>
<script setup lang="ts" name="systemHardManager"> <script setup lang="ts" name="systemHardManager">
import { BasicTableProps, useTable } from "/@/hooks/table"; import { BasicTableProps, useTable } from "/@/hooks/table"
import * as hardManageApi from '/@/api/hard/hard-manager' import * as hardManageApi from "/@/api/hard/hard-manager"
import { useMessage, useMessageBox } from "/@/hooks/message"; import { useMessage, useMessageBox } from "/@/hooks/message"
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
// 引入组件 // 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue')); const FormDialog = defineAsyncComponent(() => import("./form.vue"))
const FaceFormDialog = defineAsyncComponent(() => import('./face-form.vue')); const FaceFormDialog = defineAsyncComponent(() => import("./face-form.vue"))
const MqFormDialog = defineAsyncComponent(() => import('./mq-form.vue')); const MqFormDialog = defineAsyncComponent(() => import("./mq-form.vue"))
// 定义查询字典 // 定义查询字典
const { hard_type } = useDict('hard_type') const { hard_type } = useDict("hard_type")
// 定义变量内容 // 定义变量内容
const formDialogRef = ref() const formDialogRef = ref()
const faceFormDialogRef = ref() const faceFormDialogRef = ref()
@@ -112,64 +149,58 @@ const selectObjs = ref([]) as any
const multiple = ref(true) const multiple = ref(true)
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {}, queryForm: {},
pageList: hardManageApi.pageJoin pageList: hardManageApi.pageJoin,
}) })
// table hook // table hook
const { const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } =
getDataList, useTable(state)
currentChangeHandle,
sizeChangeHandle,
sortChangeHandle,
downBlobFile,
tableStyle
} = useTable(state)
// 清空搜索条件 // 清空搜索条件
const resetQuery = () => { const resetQuery = () => {
// 清空搜索条件 // 清空搜索条件
queryRef.value?.resetFields() queryRef.value?.resetFields()
// 清空多选 // 清空多选
selectObjs.value = [] selectObjs.value = []
getDataList() getDataList()
} }
const changeTakeFood = async (e: any, row: any) => { const changeTakeFood = async (e: any, row: any) => {
switchTakeFoodLoading.value = true switchTakeFoodLoading.value = true
try { try {
await hardManageApi.putObj({ id: row.id, isTakeFood: e }) await hardManageApi.putObj({ id: row.id, isTakeFood: e })
getDataList() getDataList()
} finally { } finally {
switchTakeFoodLoading.value = false switchTakeFoodLoading.value = false
} }
} }
// 导出excel // 导出excel
const exportExcel = () => { const exportExcel = () => {
downBlobFile('/hard/hardManager/export', Object.assign(state.queryForm, { ids: selectObjs }), 'hardManager.xlsx') downBlobFile("/hard/hardManager/export", Object.assign(state.queryForm, { ids: selectObjs }), "hardManager.xlsx")
} }
// 多选事件 // 多选事件
const selectionChangHandle = (objs: { id: string }[]) => { const selectionChangHandle = (objs: { id: string }[]) => {
selectObjs.value = objs.map(({ id }) => id); selectObjs.value = objs.map(({ id }) => id)
multiple.value = !objs.length; multiple.value = !objs.length
}; }
// 删除操作 // 删除操作
const handleDelete = async (ids: string[]) => { const handleDelete = async (ids: string[]) => {
try { try {
await useMessageBox().confirm('此操作将永久删除'); await useMessageBox().confirm("此操作将永久删除")
} catch { } catch {
return; return
} }
try { try {
await hardManageApi.delObjs(ids); await hardManageApi.delObjs(ids)
getDataList(); getDataList()
useMessage().success('删除成功'); useMessage().success("删除成功")
} catch (err: any) { } catch (err: any) {
useMessage().error(err.msg); useMessage().error(err.msg)
} }
}; }
</script> </script>
src/views/hard/hard-manager/mq-form.vue
+106 -108
View File
@@ -1,144 +1,142 @@
<template> <template>
<el-dialog title="mq设置" width="30%" v-model="visible" :close-on-click-modal="false" draggable> <el-dialog title="mq设置" width="40%" v-model="visible" :close-on-click-modal="false" draggable>
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
v-loading="loading"> <el-row :gutter="24">
<el-row :gutter="24"> <el-col :span="24" class="mb20">
<el-form-item label="连接id" prop="mqClientId">
<el-input disabled v-model="form.mqClientId" placeholder="待同步" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="连接id" prop="mqClientId"> <el-form-item label="mac地址" prop="macAddress">
<el-input disabled v-model="form.mqClientId" placeholder="待同步" /> <el-input disabled v-model="form.macAddress" placeholder="待同步" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="mac地址" prop="macAddress"> <el-form-item label="topic" prop="mainTopic">
<el-input disabled v-model="form.macAddress" placeholder="待同步" /> <el-input disabled v-model="form.mainTopic" placeholder="待同步" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="topic" prop="mainTopic"> <el-form-item label="mq地址" prop="mqSocketAddress">
<el-input disabled v-model="form.mainTopic" placeholder="待同步" /> <el-input v-model="form.mqSocketAddress" placeholder="请输入mq地址" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="mq地址" prop="mqSocketAddress"> <el-form-item label="mq端口" prop="mqSocketPort">
<el-input v-model="form.mqSocketAddress" placeholder="请输入mq地址" /> <el-input v-model="form.mqSocketPort" placeholder="请输入mq端口" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="mq端口" prop="mqSocketPort"> <el-form-item label="mq用户名" prop="mqUsername">
<el-input v-model="form.mqSocketPort" placeholder="请输入mq端口" /> <el-input disabled v-model="form.mqUsername" placeholder="请输入mq用户名" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="mq用户名" prop="mqUsername"> <el-form-item label="mq密码" prop="mqPassword">
<el-input disabled v-model="form.mqUsername" placeholder="请输入mq用户名" /> <el-input v-model="form.mqPassword" placeholder="请输入mq密码" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<el-col :span="24" class="mb20"> </el-form>
<el-form-item label="mq密码" prop="mqPassword"> <template #footer>
<el-input v-model="form.mqPassword" placeholder="请输入mq密码" /> <span class="dialog-footer">
</el-form-item> <el-button @click="visible = false">取消</el-button>
</el-col> <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
</el-row> </span>
</el-form> </template>
<template #footer> </el-dialog>
<span class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
</span>
</template>
</el-dialog>
</template> </template>
<script setup lang="ts" name="mq-form"> <script setup lang="ts" name="mq-form">
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
import { useMessage } from "/@/hooks/message"; import { useMessage } from "/@/hooks/message"
import { getObj, addObj, putObj } from '/@/api/hard/hard-manager' import { getObj, addObj, putObj } from "/@/api/hard/hard-manager"
import { rule } from '/@/utils/validate'; import { rule } from "/@/utils/validate"
const emit = defineEmits(['refresh']); const emit = defineEmits(["refresh"])
// 定义变量内容 // 定义变量内容
const dataFormRef = ref(); const dataFormRef = ref()
const visible = ref(false) const visible = ref(false)
const loading = ref(false) const loading = ref(false)
// 提交表单数据 // 提交表单数据
const form = reactive<any>({ const form = reactive<any>({
id: undefined, id: undefined,
name: undefined, name: undefined,
type: undefined, type: undefined,
merchantId: undefined, merchantId: undefined,
mqClientId: undefined, mqClientId: undefined,
macAddress: undefined, macAddress: undefined,
mainTopic: undefined, mainTopic: undefined,
mqSocketAddress: undefined, mqSocketAddress: undefined,
mqSocketPort: undefined, mqSocketPort: undefined,
mqUsername: undefined, mqUsername: undefined,
mqPassword: undefined, mqPassword: undefined,
mqSyncCount: undefined mqSyncCount: undefined,
}); })
// 定义校验规则 // 定义校验规则
const dataRules = ref({ const dataRules = ref({
mqSocketAddress: [{ required: true, message: 'mq地址', trigger: 'blur' }], mqSocketAddress: [{ required: true, message: "mq地址", trigger: "blur" }],
mqSocketPort: [{ required: true, message: 'mq端口', trigger: 'blur' }], mqSocketPort: [{ required: true, message: "mq端口", trigger: "blur" }],
}) })
// 打开弹窗 // 打开弹窗
const openDialog = (id: string) => { const openDialog = (id: string) => {
visible.value = true visible.value = true
form.id = '' form.id = ""
// 重置表单数据 // 重置表单数据
nextTick(() => { nextTick(() => {
dataFormRef.value?.resetFields(); dataFormRef.value?.resetFields()
}); })
// 获取hardManager信息 // 获取hardManager信息
if (id) { if (id) {
form.id = id form.id = id
gethardManagerData(id) gethardManagerData(id)
} }
}; }
// 提交 // 提交
const onSubmit = async () => { const onSubmit = async () => {
const valid = await dataFormRef.value.validate().catch(() => { }); const valid = await dataFormRef.value.validate().catch(() => {})
if (!valid) return false; if (!valid) return false
try {
loading.value = true;
form.id ? await putObj(form) : await addObj(form);
useMessage().success(form.id ? '修改成功' : '添加成功');
visible.value = false;
emit('refresh');
} catch (err: any) {
useMessage().error(err.msg);
} finally {
loading.value = false;
}
};
try {
loading.value = true
form.id ? await putObj(form) : await addObj(form)
useMessage().success(form.id ? "修改成功" : "添加成功")
visible.value = false
emit("refresh")
} catch (err: any) {
useMessage().error(err.msg)
} finally {
loading.value = false
}
}
// 初始化表单数据 // 初始化表单数据
const gethardManagerData = (id: string) => { const gethardManagerData = (id: string) => {
// 获取数据 // 获取数据
loading.value = true loading.value = true
getObj(id).then((res: any) => { getObj(id)
Object.assign(form, res.data) .then((res: any) => {
}).finally(() => { Object.assign(form, res.data)
loading.value = false })
}) .finally(() => {
}; loading.value = false
})
}
// 暴露变量 // 暴露变量
defineExpose({ defineExpose({
openDialog openDialog,
}); })
</script> </script>
src/views/hard/hard-order/index.vue
+288 -214
View File
@@ -1,176 +1,230 @@
<template> <template>
<div class="layout-padding"> <div class="layout-padding">
<div class="layout-padding-auto layout-padding-view"> <div class="layout-padding-auto layout-padding-view">
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList"> <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="4"> <el-col :span="4">
<el-form-item class="w100" label="用户" prop="userIds"> <el-form-item class="w100" label="用户" prop="userIds">
<select-user v-model="state.queryForm.userIds" /> <select-user v-model="state.queryForm.userIds" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item class="w100" label="商户" prop="mchIds"> <el-form-item class="w100" label="商户" prop="mchIds">
<select-mch v-model="state.queryForm.mchIds" /> <select-mch v-model="state.queryForm.mchIds" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item class="w100" label="创建时间" prop="payTimeList"> <el-form-item class="w100" label="创建时间" prop="payTimeList">
<el-date-picker v-model="state.queryForm.payTimeList" value-format="YYYY-MM-DD" type="daterange" /> <el-date-picker v-model="state.queryForm.payTimeList" value-format="YYYY-MM-DD" type="daterange" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-form-item> <el-form-item>
<el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn') <el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
}}</el-button> <el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button> </el-form-item>
</el-form-item> </el-row>
</el-row> </el-form>
</el-form> <el-tabs v-if="tabList && tabList.length" v-model="activeName" @tab-click="handleClick">
<el-tabs v-if="tabList && tabList.length" v-model="activeName" @tab-click="handleClick"> <div v-for="v in tabList" :key="v.value">
<div v-for="(v) in tabList" :key="v.value"> <el-tab-pane :label="v.label" :name="v.value">
<el-tab-pane :label="v.label" :name="v.value"> <div></div>
<div></div> </el-tab-pane>
</el-tab-pane> </div>
</div> </el-tabs>
</el-tabs> <el-table
<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle" :data="state.dataList"
:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle" v-loading="state.loading"
@sort-change="sortChangeHandle"> border
<el-table-column type="selection" width="40" align="center" /> :cell-style="tableStyle.cellStyle"
<el-table-column type="index" label="#" width="50" /> :header-cell-style="tableStyle.headerCellStyle"
<el-table-column prop="username" label="用户" /> @selection-change="selectionChangHandle"
<el-table-column prop="userAvatar" label="头像"> @sort-change="sortChangeHandle"
<template #default="{ row }"> >
<preview-image :src="row.userAvatar" /> <el-table-column type="selection" width="40" align="center" />
</template> <el-table-column type="index" label="#" width="50" />
</el-table-column> <el-table-column prop="username" width="100" label="用户" />
<el-table-column prop="userMobile" width="120" label="手机号" /> <el-table-column prop="userAvatar" width="100" label="头像">
<el-table-column width="200px" label="设备信息"> <template #default="{ row }">
<template #default="{ row }"> <preview-image :src="row.userAvatar" />
<div class="status"> </template>
<span>商户</span> </el-table-column>
<span> <el-table-column prop="userMobile" width="120" label="手机号" />
{{ row.merchantName }} <el-table-column width="200px" label="商品简要信息">
</span> <template #default="{ row }">
</div> <div class="desc">
<div class="status"> <span>商品</span>
<span>设备名</span> <span>
<span> {{ row.productDesc }}
{{ row.hardName }} </span>
</span> </div>
</div> <div class="status" v-if="row.hourType">
<div class="status"> <span>用餐时间段</span>
<span>设备类型</span> <span>
<span> <dict-tag :options="daily_menu" :value="row.hourType" />
{{ row.hardType }} </span>
</span> </div>
</div> </template>
</template> </el-table-column>
</el-table-column> <el-table-column width="250px" label="设备信息">
<el-table-column width="250px" label="订单信息"> <template #default="{ row }">
<template #default="{ row }"> <div class="status">
<div class="status"> <span>商户</span>
<span>订单类型</span> <span>
<span> {{ row.merchantName }}
<dict-tag :options="hard_order_type" :value="row.orderType" /> </span>
</span> </div>
</div> <div class="status">
<div class="status"> <span>设备名</span>
<span>支付方式</span> <span>
<span> {{ row.hardName }}
<dict-tag :options="hard_pay_type" :value="row.payType" /> </span>
</span> </div>
</div> <div class="status">
<div class="status"> <span>设备类型</span>
<span>订单状态</span> <span>
<span> <dict-tag :options="hard_type" :value="row.hardType" />
<dict-tag :options="hard_order_status" :value="row.orderStatus" /> </span>
</span> </div>
</div> </template>
</template> </el-table-column>
</el-table-column> <el-table-column width="250px" label="订单信息">
<el-table-column width="200px" label="付款信息"> <template #default="{ row }">
<template #default="{ row }"> <div class="status">
<div class="status"> <span>订单类型</span>
<span>商品总价</span> <span>
<span class="color-success"> <dict-tag :options="hard_order_type" :value="row.orderType" />
{{ displayPrice(row.totalPrice) }} </span>
</span> </div>
</div> <div class="status">
<div class="status"> <span>支付方式</span>
<span>额外支付</span> <span>
<span class="color-danger"> <dict-tag :options="hard_pay_type" :value="row.payType" />
{{ displayPrice(row.extraPrice) }} </span>
</span> </div>
</div> <div class="status">
<div class="status"> <span>订单状态</span>
<span>实际支付</span> <span>
<span class="color-primary"> <dict-tag :options="hard_order_status" :value="row.orderStatus" />
{{ displayPrice(row.payPrice) }} </span>
</span> </div>
</div> </template>
</template> </el-table-column>
</el-table-column> <el-table-column width="200px" label="付款信息">
<el-table-column width="270px" label="退款信息"> <template #default="{ row }">
<template #default="{ row }"> <div class="status">
<div class="status"> <span>商品总价</span>
<span>退款金额</span> <span class="color-success">
<span class="color-success"> {{ displayPrice(row.totalPrice) }}
{{ displayPrice(row.refundPrice) }} </span>
</span> </div>
</div> <div class="status">
<div class="status"> <span>额外支付</span>
<span>退款状态</span> <span class="color-danger">
<span class="color-success"> {{ displayPrice(row.extraPrice) }}
<dict-tag :options="hard_refund_status" :value="row.refundStatus" /> </span>
</span> </div>
</div> <div class="status">
<div class="status"> <span>实际支付</span>
<span>退款时间</span> <span class="color-primary">
<span> {{ displayPrice(row.payPrice) }}
{{ row.refundTime }} </span>
</span> </div>
</div> </template>
</template> </el-table-column>
</el-table-column> <el-table-column width="270px" label="退款信息">
<el-table-column label="支付时间" align="center" prop="payTime" width="180px" /> <template #default="{ row }">
<el-table-column label="操作" width="200"> <div v-if="row.payRefundId">
<template #default="{ row }"> <div class="status">
<el-button icon="ShoppingCartFull" text type="primary" <span>退款金额</span>
@click="shopCarDialogRef.openDialog(row.id)">购物车</el-button> <span class="color-success">
<el-button icon="InfoFilled" link type="primary" @click="doRefund(row)"> {{ displayPrice(row.refundPrice) }}
详情 </span>
</el-button> </div>
<el-button v-if="false" icon="edit-pen" text type="primary" v-auth="'hard_hardwareOrder_edit'" <div class="status">
@click="formDialogRef.openDialog(row.id)">编辑</el-button> <span>退款状态</span>
<el-button v-if="false" icon="delete" text type="primary" v-auth="'hard_hardwareOrder_del'" <span class="color-success">
@click="handleDelete([row.id])">删除</el-button> <dict-tag :options="hard_refund_status" :value="row.refundStatus" />
</template> </span>
</el-table-column> </div>
</el-table> <div class="status">
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" /> <span>退款时间</span>
</div> <span>
<!-- 编辑、新增 --> {{ row.refundTime }}
<form-dialog ref="formDialogRef" @refresh="getDataList(false)" /> </span>
<shop-car ref="shopCarDialogRef" /> </div>
</div> </div>
</template>
</el-table-column>
<el-table-column label="支付时间" align="center" prop="payTime" width="250px">
<template #default="{ row }">
<div class="status">
<span>创建时间</span>
<span>{{ row.createTime }} </span>
</div>
<div class="status">
<span>支付时间</span>
<span>{{ row.payTime }} </span>
</div>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template #default="{ row }">
<el-button icon="ShoppingCartFull" text type="primary" @click="shopCarDialogRef.openDialog(row.id)"
>购物车</el-button
>
<el-button icon="InfoFilled" link type="primary" @click="doRefund(row)"> 详情 </el-button>
<el-button
v-if="false"
icon="edit-pen"
text
type="primary"
v-auth="'hard_hardwareOrder_edit'"
@click="formDialogRef.openDialog(row.id)"
>编辑</el-button
>
<el-button
v-if="false"
icon="delete"
text
type="primary"
v-auth="'hard_hardwareOrder_del'"
@click="handleDelete([row.id])"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</div>
<!-- 编辑、新增 -->
<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
<shop-car ref="shopCarDialogRef" />
</div>
</template> </template>
<script setup lang="ts" name="systemHardwareOrder"> <script setup lang="ts" name="systemHardwareOrder">
import { BasicTableProps, useTable } from "/@/hooks/table"; import { BasicTableProps, useTable } from "/@/hooks/table"
import * as hardOrder from "/@/api/hard/hard-order"; import * as hardOrder from "/@/api/hard/hard-order"
import * as hardCar from "/@/api/hard/hard-car"; import * as hardCar from "/@/api/hard/hard-car"
import { getDicts } from '/@/api/admin/dict'; import { getDicts } from "/@/api/admin/dict"
import { useMessage, useMessageBox } from "/@/hooks/message"; import { useMessage, useMessageBox } from "/@/hooks/message"
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
import { displayPrice } from "/@/utils/formatMoney" import { displayPrice } from "/@/utils/formatMoney"
const { push } = useRouter() const { push } = useRouter()
// 引入组件 // 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue')); const FormDialog = defineAsyncComponent(() => import("./form.vue"))
const ShopCar = defineAsyncComponent(() => import('../components/shop-car.vue')); const ShopCar = defineAsyncComponent(() => import("../components/shop-car.vue"))
// 定义查询字典 // 定义查询字典
const { hard_pay_type, hard_order_type, hard_order_status, hard_type, hard_refund_status } = useDict("hard_pay_type", "hard_order_type", "hard_order_status", "hard_type", "hard_refund_status") const { hard_pay_type, hard_order_type, hard_order_status, hard_type, hard_refund_status, daily_menu } = useDict(
"hard_pay_type",
"hard_order_type",
"hard_order_status",
"hard_type",
"hard_refund_status",
"daily_menu",
)
// 定义变量内容 // 定义变量内容
const formDialogRef = ref() const formDialogRef = ref()
const shopCarDialogRef = ref() const shopCarDialogRef = ref()
@@ -184,90 +238,110 @@ const selectObjs = ref([]) as any
const multiple = ref(true) const multiple = ref(true)
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {}, queryForm: {},
pageList: hardOrder.pageJoin pageList: hardOrder.pageJoin,
}) })
// table hook // table hook
const { const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } =
getDataList, useTable(state)
currentChangeHandle,
sizeChangeHandle,
sortChangeHandle,
downBlobFile,
tableStyle
} = useTable(state)
onMounted(async () => { onMounted(async () => {
const { data } = await getDicts("hard_order_type") const { data } = await getDicts("hard_order_type")
data.unshift({ label: '全部', value: null }) data.unshift({ label: "全部", value: null })
tabList.value = data tabList.value = data
}) })
// 清空搜索条件 // 清空搜索条件
const resetQuery = () => { const resetQuery = () => {
// 清空搜索条件 // 清空搜索条件
queryRef.value?.resetFields() queryRef.value?.resetFields()
// 清空多选 // 清空多选
selectObjs.value = [] selectObjs.value = []
getDataList() getDataList()
} }
const handleClick = (e: any) => { const handleClick = (e: any) => {
state.queryForm.orderType = tabList.value[e.index].value state.queryForm.orderType = tabList.value[e.index].value
getDataList() getDataList()
} }
const doRefund = (row: any) => { const doRefund = (row: any) => {
push({ path: '/hard/hard-after-sale/order-refund', query: { id: row.id, type: "view" } }) push({ path: "/hard/hard-after-sale/order-refund", query: { id: row.id, type: "view" } })
} }
// 导出excel // 导出excel
const exportExcel = () => { const exportExcel = () => {
downBlobFile('/hard/hardwareOrder/export', Object.assign(state.queryForm, { ids: selectObjs }), 'hardwareOrder.xlsx') downBlobFile("/hard/hardwareOrder/export", Object.assign(state.queryForm, { ids: selectObjs }), "hardwareOrder.xlsx")
} }
// 多选事件 // 多选事件
const selectionChangHandle = (objs: { id: string }[]) => { const selectionChangHandle = (objs: { id: string }[]) => {
selectObjs.value = objs.map(({ id }) => id); selectObjs.value = objs.map(({ id }) => id)
multiple.value = !objs.length; multiple.value = !objs.length
}; }
// 删除操作 // 删除操作
const handleDelete = async (ids: string[]) => { const handleDelete = async (ids: string[]) => {
try { try {
await useMessageBox().confirm('此操作将永久删除'); await useMessageBox().confirm("此操作将永久删除")
} catch { } catch {
return; return
} }
try { try {
await hardOrder.delObjs(ids); await hardOrder.delObjs(ids)
getDataList(); getDataList()
useMessage().success('删除成功'); useMessage().success("删除成功")
} catch (err: any) { } catch (err: any) {
useMessage().error(err.msg); useMessage().error(err.msg)
} }
}; }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.desc {
display: flex;
align-items: center;
margin-bottom: 2px;
span {
display: inline-block;
}
span:nth-child(1) {
min-width: 60px;
max-width: 100px;
text-align: left;
}
span:nth-child(2) {
flex: 1;
min-width: 50px;
}
}
.status { .status {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 2px; margin-bottom: 2px;
span { span {
display: inline-block; display: inline-block;
} }
span:nth-child(1) { span:nth-child(1) {
width: 100px; min-width: 60px;
text-align: left; max-width: 100px;
} text-align: left;
}
span:nth-child(2) { span:nth-child(2) {
flex: 1; flex: 1;
} min-width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }
</style> </style>
src/views/wallet/mch-manage/index.vue
+135 -107
View File
@@ -1,87 +1,121 @@
<template> <template>
<div class="layout-padding"> <div class="layout-padding">
<div class="layout-padding-auto layout-padding-view"> <div class="layout-padding-auto layout-padding-view">
<el-row> <el-row>
<div class="mb8" style="width: 100%"> <div class="mb8" style="width: 100%">
<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" <el-button
v-auth="'wallet_mchManage_add'"> icon="folder-add"
新 增 type="primary"
</el-button> class="ml10"
<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'wallet_mchManage_del'" @click="formDialogRef.openDialog()"
@click="handleDelete(selectObjs)"> v-auth="'wallet_mchManage_add'"
删除 >
</el-button> 新 增
<right-toolbar v-model:showSearch="showSearch" :export="'wallet_mchManage_export'" @exportExcel="exportExcel" </el-button>
class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar> <el-button
</div> plain
</el-row> :disabled="multiple"
<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle" icon="Delete"
:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle" type="primary"
@sort-change="sortChangeHandle"> v-auth="'wallet_mchManage_del'"
<el-table-column type="selection" width="40" align="center" /> @click="handleDelete(selectObjs)"
<el-table-column type="index" label="#" width="40" /> >
<el-table-column prop="name" label="商户名" /> 删除
<el-table-column prop="logoPic" label="log"> </el-button>
<template #default="{ row }"> <right-toolbar
<preview-image :src="row.logoPic" /> v-model:showSearch="showSearch"
</template> :export="'wallet_mchManage_export'"
</el-table-column> @exportExcel="exportExcel"
<el-table-column prop="collectionCode" label="商户收款二维码" show-overflow-tooltip> class="ml10 mr20"
<template #default="{ row }"> style="float: right"
<preview-image :src="row.collectionCode" /> @queryTable="getDataList"
</template> ></right-toolbar>
</el-table-column> </div>
<el-table-column prop="merchantType" label="商户类型" show-overflow-tooltip> </el-row>
<template #default="{ row }"> <el-table
<div class="flex justify-center items-center"> :data="state.dataList"
<div v-for="(v, i) in row.types.split(',')" :key="i" class="mr-1"> v-loading="state.loading"
<dict-tag :options="merchant_type" :value="v" /> border
</div> :cell-style="tableStyle.cellStyle"
</div> :header-cell-style="tableStyle.headerCellStyle"
</template> @selection-change="selectionChangHandle"
</el-table-column> @sort-change="sortChangeHandle"
<el-table-column prop="deptName" label="部门" /> >
<el-table-column prop="phone" label="联系电话" show-overflow-tooltip /> <el-table-column type="selection" width="40" align="center" />
<el-table-column prop="businessTime" label="结束营业时间" show-overflow-tooltip> <el-table-column type="index" label="#" width="40" />
<template #default="{ row }"> <el-table-column prop="name" label="商户名" />
<div> <el-table-column prop="logoPic" label="log">
<span>{{ row.jobStartTime }}</span> <template #default="{ row }">
<span class="mx-1">-</span> <preview-image :src="row.logoPic" />
<span>{{ row.jobStartTime }}</span> </template>
</div> </el-table-column>
</template> <el-table-column prop="collectionCode" width="80" label="商户收款二维码" show-overflow-tooltip>
</el-table-column> <template #default="{ row }">
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip /> <preview-image :src="row.collectionCode" />
<el-table-column label="操作" width="150"> </template>
<template #default="scope"> </el-table-column>
<el-button icon="edit-pen" text type="primary" v-auth="'wallet_mchManage_edit'" <el-table-column prop="merchantType" label="商户类型" show-overflow-tooltip>
@click="formDialogRef.openDialog(scope.row.id)">编辑</el-button> <template #default="{ row }">
<el-button icon="delete" text type="primary" v-auth="'wallet_mchManage_del'" <div class="flex justify-center items-center">
@click="handleDelete([scope.row.id])">删除</el-button> <div v-for="(v, i) in row.types.split(',')" :key="i" class="mr-1">
</template> <dict-tag :options="merchant_type" :value="v" />
</el-table-column> </div>
</el-table> </div>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" /> </template>
</div> </el-table-column>
<el-table-column prop="deptName" label="部门" />
<el-table-column prop="phone" label="联系电话" show-overflow-tooltip />
<el-table-column prop="businessTime" label="结束营业时间" show-overflow-tooltip>
<template #default="{ row }">
<div>
<span>{{ row.jobStartTime }}</span>
<span class="mx-1">-</span>
<span>{{ row.jobStartTime }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip />
<el-table-column label="操作" width="150">
<template #default="scope">
<el-button
icon="edit-pen"
text
type="primary"
v-auth="'wallet_mchManage_edit'"
@click="formDialogRef.openDialog(scope.row.id)"
>编辑</el-button
>
<el-button
icon="delete"
text
type="primary"
v-auth="'wallet_mchManage_del'"
@click="handleDelete([scope.row.id])"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</div>
<!-- 编辑、新增 --> <!-- 编辑、新增 -->
<form-dialog ref="formDialogRef" @refresh="getDataList(false)" /> <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
</div>
</div>
</template> </template>
<script setup lang="ts" name="MchManage"> <script setup lang="ts" name="MchManage">
import { BasicTableProps, useTable } from "/@/hooks/table"; import { BasicTableProps, useTable } from "/@/hooks/table"
import { pageJoin, delObjs } from '/@/api/wallet/mch-manage' import { pageJoin, delObjs } from "/@/api/wallet/mch-manage"
import { useMessage, useMessageBox } from "/@/hooks/message"; import { useMessage, useMessageBox } from "/@/hooks/message"
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
import { parseDate } from '/@/utils/formatTime' import { parseDate } from "/@/utils/formatTime"
// 引入组件 // 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue')); const FormDialog = defineAsyncComponent(() => import("./form.vue"))
// 定义查询字典 // 定义查询字典
const { merchant_type } = useDict('merchant_type') const { merchant_type } = useDict("merchant_type")
// 定义变量内容 // 定义变量内容
const formDialogRef = ref() const formDialogRef = ref()
// 搜索变量 // 搜索变量
@@ -92,54 +126,48 @@ const selectObjs = ref([]) as any
const multiple = ref(true) const multiple = ref(true)
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {}, queryForm: {},
pageList: pageJoin pageList: pageJoin,
}) })
// table hook // table hook
const { const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } =
getDataList, useTable(state)
currentChangeHandle,
sizeChangeHandle,
sortChangeHandle,
downBlobFile,
tableStyle
} = useTable(state)
// 清空搜索条件 // 清空搜索条件
const resetQuery = () => { const resetQuery = () => {
// 清空搜索条件 // 清空搜索条件
queryRef.value?.resetFields() queryRef.value?.resetFields()
// 清空多选 // 清空多选
selectObjs.value = [] selectObjs.value = []
getDataList() getDataList()
} }
// 导出excel // 导出excel
const exportExcel = () => { const exportExcel = () => {
downBlobFile('/canteen/merchantInfo/export', Object.assign(state.queryForm, { ids: selectObjs }), 'merchantInfo.xlsx') downBlobFile("/canteen/merchantInfo/export", Object.assign(state.queryForm, { ids: selectObjs }), "merchantInfo.xlsx")
} }
// 多选事件 // 多选事件
const selectionChangHandle = (objs: { id: string }[]) => { const selectionChangHandle = (objs: { id: string }[]) => {
selectObjs.value = objs.map(({ id }) => id); selectObjs.value = objs.map(({ id }) => id)
multiple.value = !objs.length; multiple.value = !objs.length
}; }
// 删除操作 // 删除操作
const handleDelete = async (ids: string[]) => { const handleDelete = async (ids: string[]) => {
try { try {
await useMessageBox().confirm('此操作将永久删除'); await useMessageBox().confirm("此操作将永久删除")
} catch { } catch {
return; return
} }
try { try {
await delObjs(ids); await delObjs(ids)
getDataList(); getDataList()
useMessage().success('删除成功'); useMessage().success("删除成功")
} catch (err: any) { } catch (err: any) {
useMessage().error(err.msg); useMessage().error(err.msg)
} }
}; }
</script> </script>
src/views/wallet/wallet-active/index.vue
+162 -110
View File
@@ -1,90 +1,132 @@
<template> <template>
<div class="layout-padding"> <div class="layout-padding">
<div class="layout-padding-auto layout-padding-view"> <div class="layout-padding-auto layout-padding-view">
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-row :gutter="24">
<el-col :span="4">
<el-form-item class="w100" label="用户" prop="userIds">
<select-user v-model="state.queryForm.userIds" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item class="w100" label="是否激活" prop="isActiveHardware">
<dict-select v-model="state.queryForm.isActiveHardware" dict-code="yes_no_type" placeholder="是否激活" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item class="w100" label="卡号" prop="cardNumber">
<el-input v-model="state.queryForm.cardNumber" placeholder="饭卡卡号" clearable />
</el-form-item>
</el-col>
<el-form-item>
<el-button icon="Search" type="primary" @click="getDataList">
{{ $t("common.queryBtn") }}
</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
</el-form-item>
</el-row>
</el-form>
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList"> <el-row>
<el-row :gutter="24"> <div class="mb8" style="width: 100%">
<el-col :span="4"> <el-button
<el-form-item class="w100" label="用户" prop="userIds"> icon="folder-add"
<select-user v-model="state.queryForm.userIds" /> type="primary"
</el-form-item> class="ml10"
</el-col> @click="formDialogRef.openDialog()"
<el-col :span="4"> v-auth="'wallet_walletActive_add'"
<el-form-item class="w100" label="是否激活" prop="isActiveHardware"> >
<dict-select v-model="state.queryForm.isActiveHardware" dict-code="yes_no_type" placeholder="是否激活" /> 开 卡
</el-form-item> </el-button>
</el-col> <el-button
<el-col :span="4"> plain
<el-form-item class="w100" label="卡号" prop="cardNumber"> :disabled="multiple"
<el-input v-model="state.queryForm.cardNumber" placeholder="饭卡卡号" clearable /> icon="Delete"
</el-form-item> type="primary"
</el-col> v-auth="'wallet_walletActive_del'"
<el-form-item> @click="handleDelete(selectObjs)"
<el-button icon="Search" type="primary" @click="getDataList"> >
{{ $t('common.queryBtn') }} 删除
</el-button> </el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button> <right-toolbar
</el-form-item> v-model:showSearch="showSearch"
</el-row> :export="'wallet_walletActive_export'"
</el-form> @exportExcel="exportExcel"
class="ml10 mr20"
style="float: right"
@queryTable="getDataList"
></right-toolbar>
</div>
</el-row>
<el-table
:data="state.dataList"
v-loading="state.loading"
border
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
@selection-change="selectionChangHandle"
@sort-change="sortChangeHandle"
>
<el-table-column type="selection" width="40" align="center" />
<el-table-column type="index" label="#" width="40" />
<el-table-column prop="usernaem" label="用户" show-overflow-tooltip />
<el-table-column prop="deptName" label="部门" show-overflow-tooltip />
<el-table-column prop="merchantName" label="商户" show-overflow-tooltip />
<el-table-column prop="cardNumber" label="用户卡号" show-overflow-tooltip />
<el-table-column prop="isActiveHardware" label="是否激活" show-overflow-tooltip>
<template #default="{ row }">
<dict-tag :options="yes_no_type" :value="row.isActiveHardware" />
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template #default="{ row }">
<el-button
v-if="row.isActiveHardware == 1"
icon="Postcard"
text
type="primary"
@click="doRefreshAvatar(row)"
>重新激活</el-button
>
<el-button
v-if="false"
icon="edit-pen"
text
type="primary"
v-auth="'wallet_walletActive_edit'"
@click="formDialogRef.openDialog(row.id)"
>编辑</el-button
>
<el-button
icon="delete"
text
type="primary"
v-auth="'wallet_walletActive_del'"
@click="handleDelete([row.id])"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</div>
<el-row> <!-- 编辑、新增 -->
<div class="mb8" style="width: 100%"> <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" </div>
v-auth="'wallet_walletActive_add'">
开 卡
</el-button>
<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'wallet_walletActive_del'"
@click="handleDelete(selectObjs)">
删除
</el-button>
<right-toolbar v-model:showSearch="showSearch" :export="'wallet_walletActive_export'"
@exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
@queryTable="getDataList"></right-toolbar>
</div>
</el-row>
<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
@sort-change="sortChangeHandle">
<el-table-column type="selection" width="40" align="center" />
<el-table-column type="index" label="#" width="40" />
<el-table-column prop="usernaem" label="用户" show-overflow-tooltip />
<el-table-column prop="deptName" label="部门" show-overflow-tooltip />
<el-table-column prop="merchantName" label="商户" show-overflow-tooltip />
<el-table-column prop="cardNumber" label="用户卡号" show-overflow-tooltip />
<el-table-column prop="isActiveHardware" label="是否激活" show-overflow-tooltip>
<template #default="{ row }">
<dict-tag :options="yes_no_type" :value="row.isActiveHardware" />
</template>
</el-table-column>
<el-table-column label="操作" width="150">
<template #default="scope">
<el-button v-if="false" icon="edit-pen" text type="primary" v-auth="'wallet_walletActive_edit'"
@click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
<el-button icon="delete" text type="primary" v-auth="'wallet_walletActive_del'"
@click="handleDelete([scope.row.id])">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</div>
<!-- 编辑、新增 -->
<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
</div>
</template> </template>
<script setup lang="ts" name="systemWalletActive"> <script setup lang="ts" name="systemWalletActive">
import { BasicTableProps, useTable } from "/@/hooks/table"; import { BasicTableProps, useTable } from "/@/hooks/table"
import { fetchList, pageJoin, delObjs } from "/@/api/wallet/wallet-active"; import { refreshAvatar, pageJoin, delObjs } from "/@/api/wallet/wallet-active"
import { useMessage, useMessageBox } from "/@/hooks/message"; import { useMessage, useMessageBox } from "/@/hooks/message"
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
import { ElLoading } from "element-plus"
// 引入组件 // 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue')); const FormDialog = defineAsyncComponent(() => import("./form.vue"))
// 定义查询字典 // 定义查询字典
const { wallet_type, yes_no_type } = useDict('wallet_type', 'yes_no_type'); const { wallet_type, yes_no_type } = useDict("wallet_type", "yes_no_type")
// 定义变量内容 // 定义变量内容
const formDialogRef = ref() const formDialogRef = ref()
// 搜索变量 // 搜索变量
@@ -95,54 +137,64 @@ const selectObjs = ref([]) as any
const multiple = ref(true) const multiple = ref(true)
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {}, queryForm: {},
pageList: pageJoin pageList: pageJoin,
}) })
// table hook // table hook
const { const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } =
getDataList, useTable(state)
currentChangeHandle,
sizeChangeHandle,
sortChangeHandle,
downBlobFile,
tableStyle
} = useTable(state)
// 清空搜索条件 // 清空搜索条件
const resetQuery = () => { const resetQuery = () => {
// 清空搜索条件 // 清空搜索条件
queryRef.value?.resetFields() queryRef.value?.resetFields()
// 清空多选 // 清空多选
selectObjs.value = [] selectObjs.value = []
getDataList() getDataList()
} }
// 导出excel // 导出excel
const exportExcel = () => { const exportExcel = () => {
downBlobFile('/wallet/walletActive/export', Object.assign(state.queryForm, { ids: selectObjs }), 'walletActive.xlsx') downBlobFile("/wallet/walletActive/export", Object.assign(state.queryForm, { ids: selectObjs }), "walletActive.xlsx")
} }
// 多选事件 // 多选事件
const selectionChangHandle = (objs: { id: string }[]) => { const selectionChangHandle = (objs: { id: string }[]) => {
selectObjs.value = objs.map(({ id }) => id); selectObjs.value = objs.map(({ id }) => id)
multiple.value = !objs.length; multiple.value = !objs.length
}; }
const doRefreshAvatar = async (row: any) => {
let loading: any = null
try {
await useMessage().delConfirm("是否重新进行激活")
loading = ElLoading.service({
lock: true,
text: "提交中",
background: "rgba(0, 0, 0, 0.7)",
})
await refreshAvatar({ id: row.id })
getDataList()
} finally {
setTimeout(() => loading.close(), 1000)
}
}
// 删除操作 // 删除操作
const handleDelete = async (ids: string[]) => { const handleDelete = async (ids: string[]) => {
try { try {
await useMessageBox().confirm('此操作将永久删除'); await useMessageBox().confirm("此操作将永久删除")
} catch { } catch {
return; return
} }
try { try {
await delObjs(ids); await delObjs(ids)
getDataList(); getDataList()
useMessage().success('删除成功'); useMessage().success("删除成功")
} catch (err: any) { } catch (err: any) {
useMessage().error(err.msg); useMessage().error(err.msg)
} }
}; }
</script> </script>
src/views/wallet/wallet-foreign/index.vue
+139 -116
View File
@@ -1,93 +1,119 @@
<template> <template>
<div class="layout-padding"> <div class="layout-padding">
<div class="layout-padding-auto layout-padding-view"> <div class="layout-padding-auto layout-padding-view">
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList"> <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="4"> <el-col :span="4">
<el-form-item class="w100" label="用户" prop="userIds"> <el-form-item class="w100" label="用户" prop="userIds">
<select-user v-model="state.queryForm.userIds" /> <select-user v-model="state.queryForm.userIds" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-form-item> <el-form-item>
<el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn') <el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
}}</el-button> <el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button> </el-form-item>
</el-form-item> </el-row>
</el-row> </el-form>
</el-form> <el-row>
<el-row> <div class="mb8" style="width: 100%">
<div class="mb8" style="width: 100%"> <el-button
<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" icon="folder-add"
v-auth="'wallet_walletForeign_add'"> type="primary"
申 请 class="ml10"
</el-button> @click="formDialogRef.openDialog()"
<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'wallet_walletForeign_del'" v-auth="'wallet_walletForeign_add'"
@click="handleDelete(selectObjs)"> >
删除 申 请
</el-button> </el-button>
<right-toolbar v-model:showSearch="showSearch" :export="'wallet_walletForeign_export'" <el-button
@exportExcel="exportExcel" class="ml10 mr20" style="float: right;" plain
@queryTable="getDataList"></right-toolbar> :disabled="multiple"
</div> icon="Delete"
</el-row> type="primary"
<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle" v-auth="'wallet_walletForeign_del'"
:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle" @click="handleDelete(selectObjs)"
@sort-change="sortChangeHandle"> >
<el-table-column type="selection" width="40" align="center" /> 删除
<el-table-column type="index" label="#" width="40" /> </el-button>
<el-table-column prop="username" label="申请人" /> <right-toolbar
<el-table-column prop="deptName" label="部门" /> v-model:showSearch="showSearch"
<el-table-column prop="applyStartTime" label="申请使用时间"> :export="'wallet_walletForeign_export'"
<template #default="{ row }"> @exportExcel="exportExcel"
<span>{{ row.applyStartTime }}</span> class="ml10 mr20"
<span class="mx-1">-</span> style="float: right"
<span>{{ row.applyEndTime }}</span> @queryTable="getDataList"
</template> ></right-toolbar>
</el-table-column> </div>
<el-table-column prop="count" label="申请数量" /> </el-row>
<el-table-column prop="useCount" label="使用数量" /> <el-table
<el-table-column prop="processStatus" label="审核状态"> :data="state.dataList"
<template #default="{ row }"> v-loading="state.loading"
<el-tag v-if="row.processStatus == 1" type="success">进行中</el-tag> border
<el-tag v-else>已结束</el-tag> :cell-style="tableStyle.cellStyle"
</template> :header-cell-style="tableStyle.headerCellStyle"
</el-table-column> @selection-change="selectionChangHandle"
<el-table-column prop="createTime" label="创建时间" /> @sort-change="sortChangeHandle"
<el-table-column label="操作" width="200"> >
<template #default="{ row }"> <el-table-column type="selection" width="40" align="center" />
<el-button icon="InfoFilled" text type="primary" @click="codeUseTableRef.openDialog(row.id)"> <el-table-column type="index" label="#" width="40" />
使用情况 <el-table-column prop="username" label="申请人" />
</el-button> <el-table-column prop="deptName" label="部门" />
<el-button icon="Promotion" text type="primary" v-auth="'admin_walletStride_del'" @click="doInfo(row)"> <el-table-column prop="applyStartTime" label="申请使用时间">
查看审批 <template #default="{ row }">
</el-button> <span>{{ row.applyStartTime }}</span>
<el-button v-if="false" icon="delete" text type="primary" v-auth="'wallet_walletForeign_del'" <span class="mx-1">-</span>
@click="handleDelete([row.id])"> <span>{{ row.applyEndTime }}</span>
删除 </template>
</el-button> </el-table-column>
</template> <el-table-column prop="count" label="申请数量" />
</el-table-column> <el-table-column prop="useCount" label="使用数量" />
</el-table> <el-table-column prop="processStatus" label="审核状态">
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" /> <template #default="{ row }">
</div> <dict-tag :options="check_status" :value="row.processStatus" />
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" />
<el-table-column label="操作" width="200">
<template #default="{ row }">
<el-button icon="InfoFilled" text type="primary" @click="codeUseTableRef.openDialog(row.id)">
使用情况
</el-button>
<el-button icon="Promotion" text type="primary" v-auth="'admin_walletStride_del'" @click="doInfo(row)">
查看审批
</el-button>
<el-button
v-if="false"
icon="delete"
text
type="primary"
v-auth="'wallet_walletForeign_del'"
@click="handleDelete([row.id])"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</div>
<!-- 编辑、新增 --> <!-- 编辑、新增 -->
<form-dialog ref="formDialogRef" @refresh="getDataList(false)" /> <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
<code-use-table ref="codeUseTableRef" /> <code-use-table ref="codeUseTableRef" />
</div> </div>
</template> </template>
<script setup lang="ts" name="systemWalletForeign"> <script setup lang="ts" name="systemWalletForeign">
import { BasicTableProps, useTable } from "/@/hooks/table"; import { BasicTableProps, useTable } from "/@/hooks/table"
import { fetchList, pageJoin, delObjs } from "/@/api/wallet/wallet-foreign"; import { fetchList, pageJoin, delObjs } from "/@/api/wallet/wallet-foreign"
import { useMessage, useMessageBox } from "/@/hooks/message"; import { useMessage, useMessageBox } from "/@/hooks/message"
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
// 引入组件 // 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue')); const FormDialog = defineAsyncComponent(() => import("./form.vue"))
const CodeUseTable = defineAsyncComponent(() => import('../components/code-use-table.vue')); const CodeUseTable = defineAsyncComponent(() => import("../components/code-use-table.vue"))
// 定义查询字典 // 定义查询字典
const { check_status } = useDict("check_status")
// 定义变量内容 // 定义变量内容
const formDialogRef = ref() const formDialogRef = ref()
const codeUseTableRef = ref() const codeUseTableRef = ref()
@@ -101,59 +127,56 @@ const multiple = ref(true)
const { push } = useRouter() const { push } = useRouter()
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {}, queryForm: {},
pageList: pageJoin pageList: pageJoin,
}) })
// table hook // table hook
const { const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } =
getDataList, useTable(state)
currentChangeHandle,
sizeChangeHandle,
sortChangeHandle,
downBlobFile,
tableStyle
} = useTable(state)
// 清空搜索条件 // 清空搜索条件
const resetQuery = () => { const resetQuery = () => {
// 清空搜索条件 // 清空搜索条件
queryRef.value?.resetFields() queryRef.value?.resetFields()
// 清空多选 // 清空多选
selectObjs.value = [] selectObjs.value = []
getDataList() getDataList()
} }
const doInfo = (row: any) => { const doInfo = (row: any) => {
push({ path: '/flow/task/started', query: { id: row.id } }) push({ path: "/flow/task/started", query: { id: row.id } })
} }
// 导出excel // 导出excel
const exportExcel = () => { const exportExcel = () => {
downBlobFile('/wallet/walletForeign/export', Object.assign(state.queryForm, { ids: selectObjs }), 'walletForeign.xlsx') downBlobFile(
"/wallet/walletForeign/export",
Object.assign(state.queryForm, { ids: selectObjs }),
"walletForeign.xlsx",
)
} }
// 多选事件 // 多选事件
const selectionChangHandle = (objs: { id: string }[]) => { const selectionChangHandle = (objs: { id: string }[]) => {
selectObjs.value = objs.map(({ id }) => id); selectObjs.value = objs.map(({ id }) => id)
multiple.value = !objs.length; multiple.value = !objs.length
}; }
// 删除操作 // 删除操作
const handleDelete = async (ids: string[]) => { const handleDelete = async (ids: string[]) => {
try { try {
await useMessageBox().confirm('此操作将永久删除'); await useMessageBox().confirm("此操作将永久删除")
} catch { } catch {
return; return
} }
try { try {
await delObjs(ids); await delObjs(ids)
getDataList(); getDataList()
useMessage().success('删除成功'); useMessage().success("删除成功")
} catch (err: any) { } catch (err: any) {
useMessage().error(err.msg); useMessage().error(err.msg)
} }
}; }
</script> </script>
src/views/wallet/wallet-manage/index.vue
+153 -131
View File
@@ -1,110 +1,138 @@
<template> <template>
<div class="layout-padding"> <div class="layout-padding">
<div class="layout-padding-auto layout-padding-view"> <div class="layout-padding-auto layout-padding-view">
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList"> <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="4"> <el-col :span="4">
<el-form-item class="w100" label="用户" prop="userIds"> <el-form-item class="w100" label="用户" prop="userIds">
<select-user v-model="state.queryForm.userIds" /> <select-user v-model="state.queryForm.userIds" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item class="w100" label="饭卡卡号" prop="cardNumber"> <el-form-item class="w100" label="饭卡卡号" prop="cardNumber">
<el-input v-model="state.queryForm.cardNumber" placeholder="饭卡卡号" clearable /> <el-input v-model="state.queryForm.cardNumber" placeholder="饭卡卡号" clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-form-item> <el-form-item>
<el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn') <el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
}}</el-button> <el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button> </el-form-item>
</el-form-item> </el-row>
</el-row> </el-form>
</el-form> <el-row>
<el-row> <div class="mb8" style="width: 100%">
<div class="mb8" style="width: 100%"> <el-button
<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'wallet_walletManage_del'" plain
@click="handleDelete(selectObjs)"> :disabled="multiple"
删除 icon="Delete"
</el-button> type="primary"
<right-toolbar v-model:showSearch="showSearch" :export="'wallet_walletManage_export'" v-auth="'wallet_walletManage_del'"
@exportExcel="exportExcel" class="ml10 mr20" style="float: right;" @click="handleDelete(selectObjs)"
@queryTable="getDataList"></right-toolbar> >
</div> 删除
</el-row> </el-button>
<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle" <right-toolbar
:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle" v-model:showSearch="showSearch"
@sort-change="sortChangeHandle"> :export="'wallet_walletManage_export'"
<el-table-column type="selection" width="40" align="center" /> @exportExcel="exportExcel"
<el-table-column type="index" label="#" width="40" /> class="ml10 mr20"
<el-table-column prop="username" label="用户" show-overflow-tooltip /> style="float: right"
<el-table-column prop="userAvatar" label="头像" show-overflow-tooltip> @queryTable="getDataList"
<template #default="{ row }"> ></right-toolbar>
<preview-image :src="row.userAvatar" /> </div>
</template> </el-row>
</el-table-column> <el-table
<el-table-column prop="userMobile" width="120" label="手机号" show-overflow-tooltip /> :data="state.dataList"
<el-table-column prop="deptName" label="部门" show-overflow-tooltip /> v-loading="state.loading"
<el-table-column prop="walletTypeUniqueCode" width="200" label="饭卡类型"> border
<template #default="{ row }"> :cell-style="tableStyle.cellStyle"
<div class="flex items-center justify-center"> :header-cell-style="tableStyle.headerCellStyle"
<div class="color-primary">{{ row.walletTypeName }}</div> @selection-change="selectionChangHandle"
<div class="flex items-center just ml5"> @sort-change="sortChangeHandle"
<dict-tag :options="wallet_type" :value="row.walletTypeUniqueCode" /> >
</div> <el-table-column type="selection" width="40" align="center" />
</div> <el-table-column type="index" label="#" width="40" />
</template> <el-table-column prop="username" width="100" label="用户" />
</el-table-column> <el-table-column prop="userAvatar" width="80" label="头像">
<el-table-column prop="cardNumber" label="饭卡卡号" show-overflow-tooltip /> <template #default="{ row }">
<el-table-column prop="balance" label="余额" show-overflow-tooltip> <preview-image :src="row.userAvatar" />
<template #default="{ row }"> </template>
<div class="color-primary">{{ displayPrice(row.balance) }}</div> </el-table-column>
</template> <el-table-column prop="userMobile" width="120" label="手机号" />
</el-table-column> <el-table-column prop="deptName" label="部门" width="200" />
<el-table-column prop="totalExpense" label="累计支出" show-overflow-tooltip> <el-table-column prop="walletTypeUniqueCode" width="200" label="饭卡类型">
<template #default="{ row }"> <template #default="{ row }">
<div class="color-danger">{{ displayPrice(row.totalExpense) }}</div> <div class="flex items-center justify-center">
</template> <div class="color-primary">{{ row.walletTypeName }}</div>
</el-table-column> <div class="flex items-center just ml5">
<el-table-column prop="totalRecharge" label="累计充值" show-overflow-tooltip> <dict-tag :options="wallet_type" :value="row.walletTypeUniqueCode" />
<template #default="{ row }"> </div>
<div class="color-success">{{ displayPrice(row.totalRecharge) }}</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="isFreeze" width="120" label="是否冻结饭卡" show-overflow-tooltip> <el-table-column prop="cardNumber" width="150" label="饭卡卡号" />
<template #default="{ row }"> <el-table-column prop="balance" width="100" label="余额">
<dict-tag :options="yes_no_type" :value="row.isFreeze" /> <template #default="{ row }">
</template> <div class="color-primary">{{ displayPrice(row.balance) }}</div>
</el-table-column> </template>
<el-table-column prop="activeBindStatus" width="120" label="饭卡绑定状态" show-overflow-tooltip /> </el-table-column>
<el-table-column prop="createTime" width="200" label="创建时间" show-overflow-tooltip /> <el-table-column prop="totalExpense" width="100" label="累计支出">
<el-table-column label="操作" fixed="right" width="200"> <template #default="{ row }">
<template #default="{ row }"> <div class="color-danger">{{ displayPrice(row.totalExpense) }}</div>
<el-button icon="InfoFilled" text type="primary" v-auth="'wallet_walletManage_edit'" </template>
@click="formDialogRef.openDialog(row.id)">详情</el-button> </el-table-column>
<el-button icon="Money" text type="primary" v-auth="'wallet_walletManage_edit'" <el-table-column prop="totalRecharge" width="100" label="累计充值">
@click="changeBalanceRef.openDialog(row.userId, row.id)">充值/扣款</el-button> <template #default="{ row }">
</template> <div class="color-success">{{ displayPrice(row.totalRecharge) }}</div>
</el-table-column> </template>
</el-table> </el-table-column>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" /> <el-table-column prop="isFreeze" width="120" label="是否冻结饭卡">
</div> <template #default="{ row }">
<transaction-list ref="formDialogRef" @refresh="getDataList(false)" /> <dict-tag :options="yes_no_type" :value="row.isFreeze" />
<change-balance ref="changeBalanceRef" @refresh="getDataList(false)" /> </template>
</div> </el-table-column>
<el-table-column prop="activeBindStatus" width="120" label="饭卡绑定状态" />
<el-table-column prop="createTime" width="200" label="创建时间" />
<el-table-column label="操作" fixed="right" width="200">
<template #default="{ row }">
<el-button
icon="InfoFilled"
text
type="primary"
v-auth="'wallet_walletManage_edit'"
@click="formDialogRef.openDialog(row.id)"
>详情</el-button
>
<el-button
icon="Money"
text
type="primary"
v-auth="'wallet_walletManage_edit'"
@click="changeBalanceRef.openDialog(row.userId, row.id)"
>充值/扣款</el-button
>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</div>
<transaction-list ref="formDialogRef" @refresh="getDataList(false)" />
<change-balance ref="changeBalanceRef" @refresh="getDataList(false)" />
</div>
</template> </template>
<script setup lang="ts" name="systemWalletManage"> <script setup lang="ts" name="systemWalletManage">
import { BasicTableProps, useTable } from "/@/hooks/table"; import { BasicTableProps, useTable } from "/@/hooks/table"
import { fetchList, fetchListJoin, delObjs } from '/@/api/wallet/wallet-manage' import { fetchList, fetchListJoin, delObjs } from "/@/api/wallet/wallet-manage"
import { useMessage, useMessageBox } from "/@/hooks/message"; import { useMessage, useMessageBox } from "/@/hooks/message"
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
import { displayPrice } from "/@/utils/formatMoney" import { displayPrice } from "/@/utils/formatMoney"
// 引入组件 // 引入组件
const TransactionList = defineAsyncComponent(() => import('./transaction-list.vue')); const TransactionList = defineAsyncComponent(() => import("./transaction-list.vue"))
const ChangeBalance = defineAsyncComponent(() => import('./change-balance.vue')); const ChangeBalance = defineAsyncComponent(() => import("./change-balance.vue"))
// 定义查询字典 // 定义查询字典
const { wallet_type, yes_no_type } = useDict('wallet_type', 'yes_no_type'); const { wallet_type, yes_no_type } = useDict("wallet_type", "yes_no_type")
// 定义变量内容 // 定义变量内容
const formDialogRef = ref() const formDialogRef = ref()
const changeBalanceRef = ref() const changeBalanceRef = ref()
@@ -116,54 +144,48 @@ const selectObjs = ref([]) as any
const multiple = ref(true) const multiple = ref(true)
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {}, queryForm: {},
pageList: fetchListJoin pageList: fetchListJoin,
}) })
// table hook // table hook
const { const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } =
getDataList, useTable(state)
currentChangeHandle,
sizeChangeHandle,
sortChangeHandle,
downBlobFile,
tableStyle
} = useTable(state)
// 清空搜索条件 // 清空搜索条件
const resetQuery = () => { const resetQuery = () => {
// 清空搜索条件 // 清空搜索条件
queryRef.value?.resetFields() queryRef.value?.resetFields()
// 清空多选 // 清空多选
selectObjs.value = [] selectObjs.value = []
getDataList() getDataList()
} }
// 导出excel // 导出excel
const exportExcel = () => { const exportExcel = () => {
downBlobFile('/wallet/walletManage/export', Object.assign(state.queryForm, { ids: selectObjs }), 'walletManage.xlsx') downBlobFile("/wallet/walletManage/export", Object.assign(state.queryForm, { ids: selectObjs }), "walletManage.xlsx")
} }
// 多选事件 // 多选事件
const selectionChangHandle = (objs: { id: string }[]) => { const selectionChangHandle = (objs: { id: string }[]) => {
selectObjs.value = objs.map(({ id }) => id); selectObjs.value = objs.map(({ id }) => id)
multiple.value = !objs.length; multiple.value = !objs.length
}; }
// 删除操作 // 删除操作
const handleDelete = async (ids: string[]) => { const handleDelete = async (ids: string[]) => {
try { try {
await useMessageBox().confirm('此操作将永久删除'); await useMessageBox().confirm("此操作将永久删除")
} catch { } catch {
return; return
} }
try { try {
await delObjs(ids); await delObjs(ids)
getDataList(); getDataList()
useMessage().success('删除成功'); useMessage().success("删除成功")
} catch (err: any) { } catch (err: any) {
useMessage().error(err.msg); useMessage().error(err.msg)
} }
}; }
</script> </script>
src/views/wallet/wallet-manage/transaction-list.vue
+45 -50
View File
@@ -1,33 +1,38 @@
<template> <template>
<el-dialog title="钱包余额明细" v-model="visible" :close-on-click-modal="false" draggable> <el-dialog title="钱包余额明细" v-model="visible" width="60%" :close-on-click-modal="false" draggable>
<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle" <el-table
:header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle"> :data="state.dataList"
<el-table-column align="center" width="200" label="编号" prop="id" /> v-loading="state.loading"
<el-table-column align="center" width="200" label="钱包编号" prop="walletId" /> border
<el-table-column align="center" label="交易类型" prop="title" /> :cell-style="tableStyle.cellStyle"
<el-table-column align="center" label="交易金额" prop="price"> :header-cell-style="tableStyle.headerCellStyle"
<template #default="{ row }"> {{ displayPrice(row.price) }} </template> @sort-change="sortChangeHandle"
</el-table-column> >
<el-table-column align="center" label="钱包余额" prop="balance"> <el-table-column align="center" width="200" label="编号" prop="id" />
<template #default="{ row }"> {{ displayPrice(row.balance) }} </template> <el-table-column align="center" width="200" label="钱包编号" prop="walletId" />
</el-table-column> <el-table-column align="center" width="200" label="交易类型" prop="title" />
<el-table-column align="center" label="交易时间" prop="createTime" width="180px" /> <el-table-column align="center" label="交易金额" prop="price">
</el-table> <template #default="{ row }"> {{ displayPrice(row.price) }} </template>
<template #footer> </el-table-column>
<Pagination v-model:limit="state.queryForm.pageSize" v-model:page="state.queryForm.pageNo" :total="total" <el-table-column align="center" label="钱包余额" prop="balance">
@pagination="getDataList" /> <template #default="{ row }"> {{ displayPrice(row.balance) }} </template>
</template> </el-table-column>
</el-dialog> <el-table-column align="center" label="交易时间" prop="createTime" width="180px" />
</el-table>
<template #footer>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</template>
</el-dialog>
</template> </template>
<script setup lang="ts" name="WalletManageDialog"> <script setup lang="ts" name="WalletManageDialog">
import { BasicTableProps, useTable } from "/@/hooks/table"; import { BasicTableProps, useTable } from "/@/hooks/table"
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
import { useMessage } from "/@/hooks/message"; import { useMessage } from "/@/hooks/message"
import * as walletTransactionApi from '/@/api/wallet/wallet-transaction' import * as walletTransactionApi from "/@/api/wallet/wallet-transaction"
import { rule } from '/@/utils/validate'; import { rule } from "/@/utils/validate"
import { displayPrice } from "/@/utils/formatMoney" import { displayPrice } from "/@/utils/formatMoney"
const emit = defineEmits(['refresh']); const emit = defineEmits(["refresh"])
// 定义变量内容 // 定义变量内容
const visible = ref(false) const visible = ref(false)
@@ -35,39 +40,29 @@ const loading = ref(false)
// 定义字典 // 定义字典
// 提交表单数据 // 提交表单数据
const form = reactive({ const form = reactive({})
});
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
pagination: { size: 5, }, queryForm: {},
queryForm: {}, pageList: walletTransactionApi.pageJoin,
pageList: walletTransactionApi.pageJoin
}) })
// table hook // table hook
const { const { getDataList, total, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } =
getDataList, useTable(state)
currentChangeHandle,
sizeChangeHandle,
sortChangeHandle,
downBlobFile,
tableStyle
} = useTable(state)
// 打开弹窗 // 打开弹窗
const openDialog = (id: string) => { const openDialog = (id: string) => {
visible.value = true visible.value = true
form.id = '' form.id = ""
if (id) { if (id) {
state.queryForm.walletId = id state.queryForm.walletId = id
state.dataList = [] state.dataList = []
getDataList() getDataList()
} }
}; }
// 暴露变量 // 暴露变量
defineExpose({ defineExpose({
openDialog openDialog,
}); })
</script> </script>
src/views/wallet/wallet-recharge-apply/index.vue
+191 -120
View File
@@ -1,101 +1,157 @@
<template> <template>
<div class="layout-padding"> <div class="layout-padding">
<div class="layout-padding-auto layout-padding-view"> <div class="layout-padding-auto layout-padding-view">
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList"> <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="4"> <el-col :span="4">
<el-form-item class="w100" label="用户" prop="userIds"> <el-form-item class="w100" label="用户" prop="userIds">
<select-user v-model="state.queryForm.userIds" placeholder="用户" /> <select-user v-model="state.queryForm.userIds" placeholder="用户" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item class="w100" label="饭卡类型" prop="walletTypeId"> <el-form-item class="w100" label="饭卡类型" prop="walletTypeId">
<select-wallet-type v-model="state.queryForm.walletTypeId" placeholder="饭卡类型" clearable /> <select-wallet-type v-model="state.queryForm.walletTypeId" placeholder="饭卡类型" clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-form-item> <el-form-item>
<el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn') <el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
}}</el-button> <el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button> </el-form-item>
</el-form-item> </el-row>
</el-row> </el-form>
</el-form> <el-row>
<el-row> <div class="mb8" style="width: 100%">
<div class="mb8" style="width: 100%"> <el-button
<el-button icon="folder-add" type="primary" class="ml10" @click="uploadExcelRef.show()" icon="folder-add"
v-auth="'wallet_walletRechargeApply_add'"> type="primary"
导 入 class="ml10"
</el-button> @click="uploadExcelRef.show()"
<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'wallet_walletRechargeApply_del'" v-auth="'wallet_walletRechargeApply_add'"
@click="handleDelete(selectObjs)"> >
删除 导 入
</el-button> </el-button>
<right-toolbar v-model:showSearch="showSearch" :export="'wallet_walletRechargeApply_export'" <el-button
@exportExcel="exportExcel" class="ml10 mr20" style="float: right;" plain
@queryTable="getDataList"></right-toolbar> :disabled="multiple"
</div> icon="Delete"
</el-row> type="primary"
<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle" v-auth="'wallet_walletRechargeApply_del'"
:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle" @click="handleDelete(selectObjs)"
@sort-change="sortChangeHandle"> >
<el-table-column type="selection" width="40" align="center" /> 删除
<el-table-column type="index" label="#" width="40" /> </el-button>
<el-table-column prop="username" label="申请人" show-overflow-tooltip /> <right-toolbar
<el-table-column prop="bizType" label="充值类型" show-overflow-tooltip> v-model:showSearch="showSearch"
<template #default="{ row }"> :export="'wallet_walletRechargeApply_export'"
<dict-tag :options="wallet_biz_recharge" :value="row.bizType" /> @exportExcel="exportExcel"
</template> class="ml10 mr20"
</el-table-column> style="float: right"
<el-table-column prop="walletTypeId" widht="150" label="饭卡类型" show-overflow-tooltip> @queryTable="getDataList"
<template #default="{ row }"> ></right-toolbar>
<div class="flex items-center justify-center"> </div>
<div class="color-primary">{{ row.walletTypeName }}</div> </el-row>
<div class="flex items-center just ml5"> <el-table
<dict-tag :options="wallet_type" :value="row.uniqueCode" /> :data="state.dataList"
</div> v-loading="state.loading"
</div> border
</template> :cell-style="tableStyle.cellStyle"
</el-table-column> :header-cell-style="tableStyle.headerCellStyle"
<el-table-column prop="deptName" label="部门" show-overflow-tooltip /> @selection-change="selectionChangHandle"
<el-table-column prop="importTime" label="充值时间" show-overflow-tooltip /> @sort-change="sortChangeHandle"
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip /> >
<el-table-column label="操作" width="300"> <el-table-column type="selection" width="40" align="center" />
<template #default="scope"> <el-table-column type="index" label="#" width="40" />
<el-button icon="Document" text type="primary" v-auth="'wallet_walletRechargeApply_edit'" <el-table-column prop="username" label="申请人" show-overflow-tooltip />
@click="doInfo(scope.row)">数据</el-button> <el-table-column prop="bizType" label="充值类型" show-overflow-tooltip>
<el-button icon="Connection" text type="primary" v-auth="'wallet_walletRechargeApply_edit'" <template #default="{ row }">
@click="formDialogRef.openDialog(scope.row.id)">申请</el-button> <dict-tag :options="wallet_biz_recharge" :value="row.bizType" />
<el-button icon="edit-pen" text type="primary" v-auth="'wallet_walletRechargeApply_edit'" </template>
@click="formDialogRef.openDialog(scope.row.id)">编辑</el-button> </el-table-column>
<el-button icon="delete" text type="primary" v-auth="'wallet_walletRechargeApply_del'" <el-table-column prop="walletTypeId" widht="150" label="饭卡类型" show-overflow-tooltip>
@click="handleDelete([scope.row.id])">删除</el-button> <template #default="{ row }">
</template> <div class="flex items-center justify-center">
</el-table-column> <div class="color-primary">{{ row.walletTypeName }}</div>
</el-table> <div class="flex items-center just ml5">
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" /> <dict-tag :options="wallet_type" :value="row.uniqueCode" />
</div> </div>
</div>
</template>
</el-table-column>
<el-table-column prop="deptName" label="部门" show-overflow-tooltip />
<el-table-column prop="importTime" label="充值时间" show-overflow-tooltip />
<el-table-column prop="processStatus" label="审核状态">
<template #default="{ row }">
<dict-tag :options="check_status" :value="row.processStatus" />
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip />
<el-table-column label="操作" width="300">
<template #default="{ row }">
<el-button
icon="Document"
text
type="primary"
v-auth="'wallet_walletRechargeApply_edit'"
@click="doInfo(row)"
>数据</el-button
>
<!-- v-if="!row.processId" -->
<el-button
icon="Connection"
text
type="primary"
v-auth="'wallet_walletRechargeApply_edit'"
@click="doApply(row)"
>申请</el-button
>
<el-button
icon="edit-pen"
text
type="primary"
v-auth="'wallet_walletRechargeApply_edit'"
@click="formDialogRef.openDialog(row.id)"
>编辑</el-button
>
<el-button
icon="delete"
text
type="primary"
v-auth="'wallet_walletRechargeApply_del'"
@click="handleDelete([row.id])"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</div>
<!-- 编辑、新增 --> <!-- 编辑、新增 -->
<form-dialog ref="formDialogRef" @refresh="getDataList(false)" /> <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
<upload-excel ref="uploadExcelRef" title="用户信息导入" url="/wallet/wallet-recharge-apply/read-excel" <upload-excel
temp-url="/admin/sys-file/local/file/wallet_recharge.xlsx" @refreshDataList="getDataList(false)" /> ref="uploadExcelRef"
</div> title="用户信息导入"
url="/wallet/wallet-recharge-apply/read-excel"
temp-url="/admin/sys-file/local/file/wallet_recharge.xlsx"
@refreshDataList="getDataList(false)"
/>
</div>
</template> </template>
<script setup lang="ts" name="systemWalletRechargeApply"> <script setup lang="ts" name="systemWalletRechargeApply">
import { BasicTableProps, useTable } from "/@/hooks/table"; import { BasicTableProps, useTable } from "/@/hooks/table"
import * as walletRechargeApplyApi from "/@/api/wallet/wallet-recharge-apply"; import * as walletRechargeApplyApi from "/@/api/wallet/wallet-recharge-apply"
import { useMessage, useMessageBox } from "/@/hooks/message"; import { useMessage, useMessageBox } from "/@/hooks/message"
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
import { ElLoading } from "element-plus"
const { push } = useRouter() const { push } = useRouter()
// 引入组件 // 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue')); const FormDialog = defineAsyncComponent(() => import("./form.vue"))
// 定义查询字典 // 定义查询字典
const { wallet_biz_recharge, wallet_type } = useDict('wallet_biz_recharge', 'wallet_type'); const { wallet_biz_recharge, wallet_type, check_status } = useDict("wallet_biz_recharge", "wallet_type", "check_status")
// 定义变量内容 // 定义变量内容
const formDialogRef = ref() const formDialogRef = ref()
const uploadExcelRef = ref() const uploadExcelRef = ref()
@@ -107,58 +163,73 @@ const selectObjs = ref([]) as any
const multiple = ref(true) const multiple = ref(true)
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {}, queryForm: {},
pageList: walletRechargeApplyApi.pageJoin pageList: walletRechargeApplyApi.pageJoin,
}) })
// table hook // table hook
const { const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } =
getDataList, useTable(state)
currentChangeHandle,
sizeChangeHandle,
sortChangeHandle,
downBlobFile,
tableStyle
} = useTable(state)
// 清空搜索条件 // 清空搜索条件
const resetQuery = () => { const resetQuery = () => {
// 清空搜索条件 // 清空搜索条件
queryRef.value?.resetFields() queryRef.value?.resetFields()
// 清空多选 // 清空多选
selectObjs.value = [] selectObjs.value = []
getDataList() getDataList()
} }
// 导出excel // 导出excel
const exportExcel = () => { const exportExcel = () => {
downBlobFile('/wallet/walletRechargeApply/export', Object.assign(state.queryForm, { ids: selectObjs }), 'walletRechargeApply.xlsx') downBlobFile(
"/wallet/walletRechargeApply/export",
Object.assign(state.queryForm, { ids: selectObjs }),
"walletRechargeApply.xlsx",
)
}
const doApply = async (row: any) => {
let loading: any = null
try {
await useMessage().delConfirm("是否提交审批")
loading = ElLoading.service({
lock: true,
text: "提交中",
background: "rgba(0, 0, 0, 0.7)",
})
await walletRechargeApplyApi.apply({ id: row.id })
useMessage().success("提交成功")
getDataList()
} finally {
setTimeout(() => loading.close(), 500)
}
} }
// 多选事件 // 多选事件
const selectionChangHandle = (objs: { id: string }[]) => { const selectionChangHandle = (objs: { id: string }[]) => {
selectObjs.value = objs.map(({ id }) => id); selectObjs.value = objs.map(({ id }) => id)
multiple.value = !objs.length; multiple.value = !objs.length
}; }
const doInfo = (row: any) => { const doInfo = (row: any) => {
push({ path: '/wallet/wallet-recharge-apply/preview-excel', query: { id: row.id } }) push({ path: "/wallet/wallet-recharge-apply/preview-excel", query: { id: row.id } })
} }
// 删除操作 // 删除操作
const handleDelete = async (ids: string[]) => { const handleDelete = async (ids: string[]) => {
try { try {
await useMessageBox().confirm('此操作将永久删除'); await useMessageBox().confirm("此操作将永久删除")
} catch { } catch {
return; return
} }
try { try {
await walletRechargeApplyApi.delObjs(ids); await walletRechargeApplyApi.delObjs(ids)
getDataList(); getDataList()
useMessage().success('删除成功'); useMessage().success("删除成功")
} catch (err: any) { } catch (err: any) {
useMessage().error(err.msg); useMessage().error(err.msg)
} }
}; }
</script> </script>
src/views/wallet/wallet-setting/components/extra-price/index.vue
+95 -75
View File
@@ -1,99 +1,119 @@
<template> <template>
<div class="w100"> <div class="w100">
<div class="layout-padding-auto layout-padding-view"> <div class="layout-padding-auto layout-padding-view">
<div class="flex justify-center flex-col"> <div class="flex justify-center flex-col">
<div> <div>
<el-form ref="dataFormRef" label-width="120px" :model="form" :rules="dataRules" formDialogRef <el-form
v-loading="loading"> ref="dataFormRef"
<el-row :gutter="24"> label-width="120px"
<el-col :span="24" class="mb20"> :model="form"
<el-form-item label="每一餐的上限" prop="payAmountEnable"> :rules="dataRules"
<el-switch active-value="1" inactive-value="0" v-model="form.payAmountEnable" formDialogRef
active-text="开启" inactive-text="关闭" inline-prompt /> v-loading="loading"
</el-form-item> >
</el-col> <el-row :gutter="24">
<el-col :span="24" class="mb20"> <el-col :span="24" class="mb20">
<el-form-item label="每一餐的上限" prop="payAmountMealLimit"> <el-form-item label="每一餐的上限" prop="payAmountEnable">
<el-input style="width: 300px;" type="number" v-model="form.payAmountMealLimit" <el-switch
placeholder="请输入上限金额"> active-value="1"
<template #append>元</template> inactive-value="0"
</el-input> v-model="form.payAmountEnable"
</el-form-item> active-text="开启"
</el-col> inactive-text="关闭"
<el-col :span="24" class="mb20"> inline-prompt
<el-form-item label="倍数" prop="payAmountMealTimes"> />
<el-input style="width: 300px;" type="number" v-model="form.payAmountMealTimes" </el-form-item>
placeholder="请输入倍数"> </el-col>
<template #append>倍</template> <el-col :span="24" class="mb20">
</el-input> <el-form-item label="每一餐的上限" prop="payAmountMealLimit">
</el-form-item> <el-input
</el-col> style="width: 300px"
</el-row> type="number"
</el-form> v-model="form.payAmountMealLimit"
<div class="flex items-center"> placeholder="请输入上限金额"
<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button> >
</div> <template #append>元</template>
</div> </el-input>
</div> </el-form-item>
</div> </el-col>
</div> <el-col :span="24" class="mb20">
<el-form-item label="倍数" prop="payAmountMealTimes">
<el-input
style="width: 300px"
type="number"
v-model="form.payAmountMealTimes"
placeholder="请输入倍数"
>
<template #append>倍</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="flex items-center">
<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script setup lang="ts" name="extra-price"> <script setup lang="ts" name="extra-price">
import { storePrice } from "/@/utils/formatMoney" import { storePrice, displayPrice } from "/@/utils/formatMoney"
import { useMessage } from "/@/hooks/message" import { useMessage } from "/@/hooks/message"
import { getObj, putObj } from "/@/api/wallet/wallet-setting" import { getObj, putObj } from "/@/api/wallet/wallet-setting"
// 定义变量内容 // 定义变量内容
const dataFormRef = ref(); const dataFormRef = ref()
const loading = ref(false) const loading = ref(false)
// 提交表单数据 // 提交表单数据
const form = reactive({ const form = reactive({
id: undefined, id: undefined,
payAmountEnable: undefined, payAmountEnable: undefined,
payAmountMealLimit: undefined, payAmountMealLimit: undefined,
payAmountMealTimes: undefined, payAmountMealTimes: undefined,
}); })
// 定义校验规则 // 定义校验规则
const dataRules = ref({ const dataRules = ref({
payAmountEnable: [{ required: true, message: '请选择是否开启每一餐的上限', trigger: 'change' }], payAmountEnable: [{ required: true, message: "请选择是否开启每一餐的上限", trigger: "change" }],
payAmountMealLimit: [{ required: true, message: '请输入上限金额', trigger: 'blur' }], payAmountMealLimit: [{ required: true, message: "请输入上限金额", trigger: "blur" }],
payAmountMealTimes: [{ required: true, message: '请输入倍数', trigger: 'blur' }], payAmountMealTimes: [{ required: true, message: "请输入倍数", trigger: "blur" }],
}) })
onMounted(() => { onMounted(() => {
getwalletRechargePackageData('1') getwalletRechargePackageData("1")
}) })
// 提交 // 提交
const onSubmit = async () => { const onSubmit = async () => {
const valid = await dataFormRef.value.validate().catch(() => { }); const valid = await dataFormRef.value.validate().catch(() => {})
if (!valid) return false; if (!valid) return false
try {
loading.value = true;
const pa = {
...form,
payPrice: storePrice(form.payAmountMealLimit),
}
await putObj(pa)
useMessage().success('修改成功');
} catch (err: any) {
useMessage().error(err.msg);
} finally {
loading.value = false;
}
};
try {
loading.value = true
const pa = {
...form,
payAmountMealLimit: storePrice(form.payAmountMealLimit),
}
await putObj(pa)
useMessage().success("修改成功")
} catch (err: any) {
useMessage().error(err.msg)
} finally {
loading.value = false
}
}
// 初始化表单数据 // 初始化表单数据
const getwalletRechargePackageData = (id: string) => { const getwalletRechargePackageData = (id: string) => {
// 获取数据 // 获取数据
loading.value = true loading.value = true
getObj(id).then((res: any) => { getObj(id)
Object.assign(form, res.data) .then((res: any) => {
}).finally(() => { Object.assign(form, res.data, { payAmountMealLimit: displayPrice(res.data.payAmountMealLimit, "", 0) })
loading.value = false })
}) .finally(() => {
}; loading.value = false
})
}
</script> </script>
src/views/wallet/wallet-stride/index.vue
+136 -107
View File
@@ -1,87 +1,122 @@
<template> <template>
<div class="layout-padding"> <div class="layout-padding">
<div class="layout-padding-auto layout-padding-view"> <div class="layout-padding-auto layout-padding-view">
<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList"> <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="4"> <el-col :span="4">
<el-form-item class="w100" label="用户" prop="userIds"> <el-form-item class="w100" label="用户" prop="userIds">
<select-user v-model="state.queryForm.userIds" /> <select-user v-model="state.queryForm.userIds" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-form-item> <el-form-item>
<el-button icon="Search" type="primary" @click="getDataList">{{ $t('common.queryBtn') <el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
}}</el-button> <el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button> </el-form-item>
</el-form-item> </el-row>
</el-row> </el-form>
</el-form> <el-row>
<el-row> <div class="mb8" style="width: 100%">
<div class="mb8" style="width: 100%"> <el-button
<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" icon="folder-add"
v-auth="'admin_walletStride_add'"> type="primary"
申 请 class="ml10"
</el-button> @click="formDialogRef.openDialog()"
<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'admin_walletStride_del'" v-auth="'admin_walletStride_add'"
@click="handleDelete(selectObjs)"> >
删除 申 请
</el-button> </el-button>
<right-toolbar v-model:showSearch="showSearch" :export="'admin_walletStride_export'" <el-button
@exportExcel="exportExcel" class="ml10 mr20" style="float: right;" plain
@queryTable="getDataList"></right-toolbar> :disabled="multiple"
</div> icon="Delete"
</el-row> type="primary"
<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle" v-auth="'admin_walletStride_del'"
:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle" @click="handleDelete(selectObjs)"
@sort-change="sortChangeHandle"> >
<el-table-column type="selection" width="40" align="center" /> 删除
<el-table-column type="index" label="#" width="40" /> </el-button>
<el-table-column prop="username" label="申请人" /> <right-toolbar
<el-table-column prop="deptName" label="部门" /> v-model:showSearch="showSearch"
<el-table-column prop="count" label="申请数量" /> :export="'admin_walletStride_export'"
<el-table-column prop="useCount" label="使用数量" /> @exportExcel="exportExcel"
<el-table-column prop="processStatus" label="审核状态"> class="ml10 mr20"
<template #default="{ row }"> style="float: right"
<dict-tag :options="check_status" :value="row.processStatus" /> @queryTable="getDataList"
</template> ></right-toolbar>
</el-table-column> </div>
<el-table-column prop="createTime" label="创建时间" /> </el-row>
<el-table-column label="操作" width="200"> <el-table
<template #default="{ row }"> :data="state.dataList"
<el-button v-if="false" icon="edit-pen" text type="primary" v-auth="'admin_walletStride_edit'" v-loading="state.loading"
@click="formDialogRef.openDialog(row.id)">编辑</el-button> border
<el-button v-if="false" icon="delete" text type="primary" v-auth="'admin_walletStride_del'" :cell-style="tableStyle.cellStyle"
@click="handleDelete([row.id])">删除</el-button> :header-cell-style="tableStyle.headerCellStyle"
<el-button icon="InfoFilled" text type="primary" @click="codeUseTableRef.openDialog(row.id)"> @selection-change="selectionChangHandle"
使用情况 @sort-change="sortChangeHandle"
</el-button> >
<el-button icon="Promotion" text type="primary" v-auth="'admin_walletStride_del'" @click="doInfo(row)"> <el-table-column type="selection" width="40" align="center" />
查看审批 <el-table-column type="index" label="#" width="40" />
</el-button> <el-table-column prop="username" label="申请人" />
</template> <el-table-column prop="deptName" label="部门" />
</el-table-column> <el-table-column prop="count" label="申请数量" />
</el-table> <el-table-column prop="useCount" label="使用数量" />
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" /> <el-table-column prop="processStatus" label="审核状态">
</div> <template #default="{ row }">
<dict-tag :options="check_status" :value="row.processStatus" />
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" />
<el-table-column label="操作" width="200">
<template #default="{ row }">
<el-button
v-if="false"
icon="edit-pen"
text
type="primary"
v-auth="'admin_walletStride_edit'"
@click="formDialogRef.openDialog(row.id)"
>编辑</el-button
>
<el-button
v-if="false"
icon="delete"
text
type="primary"
v-auth="'admin_walletStride_del'"
@click="handleDelete([row.id])"
>删除</el-button
>
<el-button icon="InfoFilled" text type="primary" @click="codeUseTableRef.openDialog(row.id)">
使用情况
</el-button>
<el-button icon="Promotion" text type="primary" v-auth="'admin_walletStride_del'" @click="doInfo(row)">
查看审批
</el-button>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</div>
<!-- 编辑、新增 --> <!-- 编辑、新增 -->
<form-dialog ref="formDialogRef" @refresh="getDataList(false)" /> <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
<code-use-table ref="codeUseTableRef" /> <code-use-table ref="codeUseTableRef" />
</div> </div>
</template> </template>
<script setup lang="ts" name="systemWalletStride"> <script setup lang="ts" name="systemWalletStride">
import { BasicTableProps, useTable } from "/@/hooks/table"; import { BasicTableProps, useTable } from "/@/hooks/table"
import { fetchList, delObjs, pageJoin } from "/@/api/wallet/wallet-stride"; import { fetchList, delObjs, pageJoin } from "/@/api/wallet/wallet-stride"
import { useMessage, useMessageBox } from "/@/hooks/message"; import { useMessage, useMessageBox } from "/@/hooks/message"
import { useDict } from '/@/hooks/dict'; import { useDict } from "/@/hooks/dict"
const { push } = useRouter() const { push } = useRouter()
// 引入组件 // 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue')); const FormDialog = defineAsyncComponent(() => import("./form.vue"))
const CodeUseTable = defineAsyncComponent(() => import('../components/code-use-table.vue')); const CodeUseTable = defineAsyncComponent(() => import("../components/code-use-table.vue"))
// 定义查询字典 // 定义查询字典
const { check_status, yes_no_type } = useDict('check_status', 'yes_no_type'); const { check_status, yes_no_type } = useDict("check_status", "yes_no_type")
// 定义变量内容 // 定义变量内容
const formDialogRef = ref() const formDialogRef = ref()
const codeUseTableRef = ref() const codeUseTableRef = ref()
@@ -93,58 +128,52 @@ const selectObjs = ref([]) as any
const multiple = ref(true) const multiple = ref(true)
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {}, queryForm: {},
pageList: pageJoin pageList: pageJoin,
}) })
// table hook // table hook
const { const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } =
getDataList, useTable(state)
currentChangeHandle,
sizeChangeHandle,
sortChangeHandle,
downBlobFile,
tableStyle
} = useTable(state)
// 清空搜索条件 // 清空搜索条件
const resetQuery = () => { const resetQuery = () => {
// 清空搜索条件 // 清空搜索条件
queryRef.value?.resetFields() queryRef.value?.resetFields()
// 清空多选 // 清空多选
selectObjs.value = [] selectObjs.value = []
getDataList() getDataList()
} }
const doInfo = (row: any) => { const doInfo = (row: any) => {
push({ path: '/flow/task/started', query: { id: row.id } }) push({ path: "/flow/task/started", query: { id: row.id } })
} }
// 导出excel // 导出excel
const exportExcel = () => { const exportExcel = () => {
downBlobFile('/admin/walletStride/export', Object.assign(state.queryForm, { ids: selectObjs }), 'walletStride.xlsx') downBlobFile("/admin/walletStride/export", Object.assign(state.queryForm, { ids: selectObjs }), "walletStride.xlsx")
} }
// 多选事件 // 多选事件
const selectionChangHandle = (objs: { id: string }[]) => { const selectionChangHandle = (objs: { id: string }[]) => {
selectObjs.value = objs.map(({ id }) => id); selectObjs.value = objs.map(({ id }) => id)
multiple.value = !objs.length; multiple.value = !objs.length
}; }
// 删除操作 // 删除操作
const handleDelete = async (ids: string[]) => { const handleDelete = async (ids: string[]) => {
try { try {
await useMessageBox().confirm('此操作将永久删除'); await useMessageBox().confirm("此操作将永久删除")
} catch { } catch {
return; return
} }
try { try {
await delObjs(ids); await delObjs(ids)
getDataList(); getDataList()
useMessage().success('删除成功'); useMessage().success("删除成功")
} catch (err: any) { } catch (err: any) {
useMessage().error(err.msg); useMessage().error(err.msg)
} }
}; }
</script> </script>