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

feat：选择部门组件

Browse Source
This commit is contained in:
dzc committed 2025-01-02 10:56:40 +08:00
1 parent cc9090de11
commit 360602eaf8
7 files changed
+193 -150
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/Select/SelectDept.vue
+63
View File
@@ -0,0 +1,63 @@
<template>
<el-tree-select class="w100" v-model="state.selectId" :data="state.options"
@visible-change="(e: boolean) => e && getOptions()"
:props="{ value: 'id', label: 'name', children: 'children' }" clearable check-strictly
:render-after-expand="false" :placeholder="props.placeholder" />
</template>
<script setup lang="ts" name="select-dept">
import { reactive, computed, defineModel, withDefaults, defineProps } from 'vue'
import * as deptApi from "/@/api/admin/dept";
const selectId = defineModel()
export type Props = {
placeholder?: string,
}
const props = withDefaults(defineProps<Props>(), {
placeholder: "请选择",
})
const queryForm = reactive<any>({
name: "",
current: 1,
size: 10,
})
const state = reactive<any>({
loading: true,
selectId: selectId,
options: []
})
watch(selectId, (newVal, oldValue) => {
if (newVal == oldValue) return
state.selectId = newVal
getOptions()
}, { immediate: true })
async function getOptions() {
try {
state.loading = true
const _pa = {
...queryForm
}
const { data } = await deptApi.deptTree()
state.options = data ?? []
} finally {
setTimeout(() => state.loading = false, 500);
}
}
function remoteSearch(params: string) {
if (params != queryForm.name) {
queryForm.name = params
getOptions()
}
}
function clear() {
state.selectId = null
getOptions()
}
</script>
src/components/Select/SelectMerchant.vue
-1
View File
@@ -70,5 +70,4 @@ function clear() {
state.selectId = null
getOptions()
}
</script>
src/components/index.ts
+2
View File
@@ -17,6 +17,7 @@ import PreviewImage from "/@/components/PreviewImage/index.vue"
import SelectUser from '/@/components/Select/SelectUser.vue'
import SelectWalletType from '/@/components/Select/SelectWalletType.vue'
import SelectMerchant from '/@/components/Select/SelectMerchant.vue'
import SelectDept from '/@/components/Select/SelectDept.vue'
// 第三方组件
@@ -56,6 +57,7 @@ export default {
app.component('SelectUser', SelectUser)
app.component('SelectWalletType', SelectWalletType)
app.component('SelectMerchant', SelectMerchant)
app.component('SelectDept', SelectDept)
// 导入全部的elmenet-plus的图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
src/views/canteen/merchantInfo/form.vue
+87 -104
View File
@@ -1,83 +1,73 @@
<template>
<el-dialog :title="form.id ? '编辑' : '新增'" 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-row :gutter="24">
<el-col :span="12" class="mb20">
<el-form-item label="绑定部门" prop="parentId">
<el-tree-select
v-model="form.deptId"
:data="parentData"
:props="{ value: 'id', label: 'name', children: 'children' }"
class="w100"
clearable
check-strictly
:render-after-expand="false"
placeholder="请选择要绑定的部门"
/>
</el-form-item>
</el-col>
<el-dialog :title="form.id ? '编辑' : '新增'" 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-row :gutter="24">
<el-col :span="12" class="mb20">
<el-form-item label="部门" prop="deptId">
<select-dept v-model="form.deptId" placeholder="请选择部门" />
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="商户名" prop="name">
<el-input v-model="form.name" placeholder="请输入商户名"/>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="商户名" prop="name">
<el-input v-model="form.name" placeholder="请输入商户名" />
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="商户类型" prop="merchantType">
<el-col :span="12" class="mb20">
<el-form-item label="商户类型" prop="merchantType">
<el-radio-group v-model="form.merchantType">
<el-radio :label="item.value" v-for="(item, index) in merchant_type" border :key="index">{{ item.label }}
</el-radio>
<el-radio :label="item.value" v-for="(item, index) in merchant_type" border :key="index">{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="商户logo" prop="logo">
<upload-img v-model:imageUrl="form.logo"></upload-img>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="商户logo" prop="logo">
<upload-img v-model:imageUrl="form.logo"></upload-img>
</el-form-item>
</el-col>
<!-- <el-col :span="12" class="mb20">-->
<!-- <el-form-item label="商户收款二维码" prop="collectMoneyCode">-->
<!-- <upload-img v-model:imageUrl="form.collectMoneyCode"></upload-img>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12" class="mb20">-->
<!-- <el-form-item label="商户收款二维码" prop="collectMoneyCode">-->
<!-- <upload-img v-model:imageUrl="form.collectMoneyCode"></upload-img>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="12" class="mb20">
<el-form-item label="轮播图" prop="swiper">
<upload-img v-model:imageUrl="form.swiper"></upload-img>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="轮播图" prop="swiper">
<upload-img v-model:imageUrl="form.swiper"></upload-img>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话"/>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" />
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="营业时间" prop="businessTime">
<el-input v-model="form.businessTime" placeholder="请输入结束营业时间"/>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="营业时间" prop="businessTime">
<el-input v-model="form.businessTime" placeholder="请输入结束营业时间" />
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="店铺地址" prop="address">
<el-input type="textarea" v-model="form.address" placeholder="请输入店铺地址"/>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="店铺地址" prop="address">
<el-input type="textarea" v-model="form.address" placeholder="请输入店铺地址" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<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>
</el-row>
</el-form>
<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>
<script setup lang="ts" name="MerchantInfoDialog">
@@ -85,7 +75,7 @@ import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj } from '/@/api/canteen/merchantInfo'
import { rule } from '/@/utils/validate';
import {deptTree} from "/@/api/admin/dept";
import { deptTree } from "/@/api/admin/dept";
const emit = defineEmits(['refresh']);
// 定义变量内容
@@ -93,30 +83,30 @@ const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
//定义业务变量内容
const parentData = ref<any[]>([]);
// 定义字典
const { merchant_type } = useDict('merchant_type')
// 提交表单数据
const form = reactive({
id:'',
deptId: '',
name: '',
merchantType: '',
logo: '',
collectMoneyCode: '',
swiper: '',
phone: '',
businessTime: '',
address: '',
id: '',
deptId: '',
name: '',
merchantType: '',
logo: '',
collectMoneyCode: '',
swiper: '',
phone: '',
businessTime: '',
address: '',
});
// 定义校验规则
const dataRules = ref({
name: [{required: true, message: '商户名不能为空', trigger: 'blur'}],
merchantType: [{required: true, message: '商户类型(字典，1食堂 2超时)不能为空', trigger: 'blur'}],
logo: [{required: true, message: '商户logog不能为空', trigger: 'blur'}],
swiper: [{required: true, message: '轮播图不能为空', trigger: 'blur'}],
name: [{ required: true, message: '商户名不能为空', trigger: 'blur' }],
merchantType: [{ required: true, message: '商户类型(字典，1食堂 2超时)不能为空', trigger: 'blur' }],
logo: [{ required: true, message: '商户logog不能为空', trigger: 'blur' }],
swiper: [{ required: true, message: '轮播图不能为空', trigger: 'blur' }],
})
// 打开弹窗
@@ -125,32 +115,31 @@ const openDialog = (id: string) => {
form.id = ''
// 重置表单数据
nextTick(() => {
dataFormRef.value?.resetFields();
});
nextTick(() => {
dataFormRef.value?.resetFields();
});
// 获取merchantInfo信息
if (id) {
form.id = id
getmerchantInfoData(id)
}
getDeptData()
};
// 提交
const onSubmit = async () => {
const valid = await dataFormRef.value.validate().catch(() => {});
if (!valid) return false;
const valid = await dataFormRef.value.validate().catch(() => { });
if (!valid) return false;
try {
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 {
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;
}
};
@@ -171,10 +160,4 @@ const getmerchantInfoData = (id: string) => {
defineExpose({
openDialog
});
// 从后端获取菜单信息
const getDeptData = async () => {
deptTree().then((res) => {
parentData.value=res.data;
});
};
</script>
src/views/canteen/merchantInfo/index.vue
+28 -21
View File
@@ -7,39 +7,46 @@
v-auth="'canteen_merchantInfo_add'">
新 增
</el-button>
<el-button plain :disabled="multiple" icon="Delete" type="primary"
v-auth="'canteen_merchantInfo_del'" @click="handleDelete(selectObjs)">
<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'canteen_merchantInfo_del'"
@click="handleDelete(selectObjs)">
删除
</el-button>
<right-toolbar v-model:showSearch="showSearch" :export="'canteen_merchantInfo_export'"
@exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
@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"
<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="deptName" label="部门" show-overflow-tooltip/>
<el-table-column prop="name" label="商户名" show-overflow-tooltip/>
<el-table-column prop="merchantType" label="商户类型" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="merchant_type" :value="scope.row.merchantType"></dict-tag>
</template>
</el-table-column>
<el-table-column prop="logo" label="商户logog" show-overflow-tooltip/>
<el-table-column prop="collectMoneyCode" label="商户收款二维码" show-overflow-tooltip/>
<el-table-column prop="phone" label="联系电话" show-overflow-tooltip/>
<el-table-column prop="businessTime" label="结束营业时间" show-overflow-tooltip/>
<el-table-column prop="address" label="店铺地址" show-overflow-tooltip/>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip/>
<!-- <el-table-column prop="merchantType" label="商户类型" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="merchant_type" :value="scope.row.merchantType"></dict-tag>
</template>
</el-table-column> -->
<el-table-column prop="name" label="商户名" />
<el-table-column prop="logo" label="log">
<template #default="{ row }">
<preview-image :src="row.logo" />
</template>
</el-table-column>
<el-table-column prop="deptName" label="部门" />
<el-table-column prop="collectMoneyCode" label="商户收款二维码" show-overflow-tooltip>
<template #default="{ row }">
<preview-image :src="row.logo" />
</template>
</el-table-column>
<el-table-column prop="phone" label="联系电话" show-overflow-tooltip />
<el-table-column prop="businessTime" label="结束营业时间" show-overflow-tooltip />
<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="'canteen_merchantInfo_edit'"
@click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
<el-button icon="delete" text type="primary" v-auth="'canteen_merchantInfo_del'" @click="handleDelete([scope.row.id])">删除</el-button>
<el-button icon="delete" text type="primary" v-auth="'canteen_merchantInfo_del'"
@click="handleDelete([scope.row.id])">删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -84,7 +91,7 @@ const {
sizeChangeHandle,
sortChangeHandle,
downBlobFile,
tableStyle
tableStyle
} = useTable(state)
// 清空搜索条件
src/views/wallet/wallet-active/form.vue
+12 -23
View File
@@ -1,29 +1,18 @@
<template>
<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
<el-dialog title="开卡" width="30%" 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-row :gutter="24">
<el-col :span="12" class="mb20">
<el-form-item label="用户id" prop="userId">
<select-merchant v-model="form.userId" placeholder="请输入用户id" />
<el-col :span="24" class="mb20">
<el-form-item label="商户" prop="merchantId">
<select-merchant v-model="form.merchantId" placeholder="请选择商户" />
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="钱包id" prop="walletId">
<el-input v-model="form.walletId" placeholder="请输入钱包id" />
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="用户卡号" prop="cardNumber">
<el-input v-model="form.cardNumber" placeholder="请输入用户卡号" />
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="饭卡是否在硬件上激活" prop="isActiveHardware">
<el-input v-model="form.isActiveHardware" placeholder="请输入饭卡是否在硬件上激活" />
<el-col :span="24" class="mb20">
<el-form-item label="生成数量" prop="count">
<el-input-number style="width: 100%" v-model="form.count" :max="200" placeholder="请输入生成数量" :min="0"
controls-position="right" />
</el-form-item>
</el-col>
@@ -54,14 +43,14 @@ const loading = ref(false)
// 提交表单数据
const form = reactive({
id: '',
userId: '',
walletId: '',
cardNumber: '',
isActiveHardware: '',
merchantId: '',
count: '',
});
// 定义校验规则
const dataRules = ref({
merchantId: [{ required: true, message: '请选择商户', trigger: 'change' }],
count: [{ required: true, message: '生成数量不能为空', trigger: 'blur' }],
})
// 打开弹窗
src/views/wallet/wallet-active/index.vue
+1 -1
View File
@@ -5,7 +5,7 @@
<div class="mb8" style="width: 100%">
<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
v-auth="'wallet_walletActive_add'">
新 增
开 卡
</el-button>
<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'wallet_walletActive_del'"
@click="handleDelete(selectObjs)">