From 360602eaf8c90a5e023e9f92475a2c50901f607c Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Thu, 2 Jan 2025 10:56:40 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E9=80=89=E6=8B=A9=E9=83=A8?=
 =?UTF-8?q?=E9=97=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Select/SelectDept.vue     |  63 ++++++++
 src/components/Select/SelectMerchant.vue |   1 -
 src/components/index.ts                  |   2 +
 src/views/canteen/merchantInfo/form.vue  | 191 +++++++++++------------
 src/views/canteen/merchantInfo/index.vue |  49 +++---
 src/views/wallet/wallet-active/form.vue  |  35 ++---
 src/views/wallet/wallet-active/index.vue |   2 +-
 7 files changed, 193 insertions(+), 150 deletions(-)
 create mode 100644 src/components/Select/SelectDept.vue

diff --git a/src/components/Select/SelectDept.vue b/src/components/Select/SelectDept.vue
new file mode 100644
index 0000000..21b898d
--- /dev/null
+++ b/src/components/Select/SelectDept.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/Select/SelectMerchant.vue b/src/components/Select/SelectMerchant.vue
index 00403b1..830dc08 100644
--- a/src/components/Select/SelectMerchant.vue
+++ b/src/components/Select/SelectMerchant.vue
@@ -70,5 +70,4 @@ function clear() {
     state.selectId = null
     getOptions()
 }
-
 </script>
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index 98eb687..5ee5408 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -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)) {
diff --git a/src/views/canteen/merchantInfo/form.vue b/src/views/canteen/merchantInfo/form.vue
index 36dd031..09f4476 100644
--- a/src/views/canteen/merchantInfo/form.vue
+++ b/src/views/canteen/merchantInfo/form.vue
@@ -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>
diff --git a/src/views/canteen/merchantInfo/index.vue b/src/views/canteen/merchantInfo/index.vue
index befebb6..44c85f5 100644
--- a/src/views/canteen/merchantInfo/index.vue
+++ b/src/views/canteen/merchantInfo/index.vue
@@ -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)
 
 // 清空搜索条件
diff --git a/src/views/wallet/wallet-active/form.vue b/src/views/wallet/wallet-active/form.vue
index e56fa6d..17e8e34 100644
--- a/src/views/wallet/wallet-active/form.vue
+++ b/src/views/wallet/wallet-active/form.vue
@@ -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' }],
 })
 
 // 打开弹窗
diff --git a/src/views/wallet/wallet-active/index.vue b/src/views/wallet/wallet-active/index.vue
index 7a3e1a0..bce5ea9 100644
--- a/src/views/wallet/wallet-active/index.vue
+++ b/src/views/wallet/wallet-active/index.vue
@@ -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)">