|
|
@@ -1,13 +1,13 @@
|
|
|
<template>
|
|
|
<!-- 列表 -->
|
|
|
- <ContentWrap style="min-height: 400px;border: unset;">
|
|
|
- <div style="position: relative;">
|
|
|
+ <ContentWrap class="Content" style="min-height: 400px;border: unset;">
|
|
|
+ <div style="position: relative;" class="search">
|
|
|
<div style="text-align: right;">
|
|
|
<el-button :icon="Operation" @click="showSearchMore" />
|
|
|
- <el-button v-hasPermi="['sale:merchant:create']" @click="showDialog('新增')">
|
|
|
- <Icon class="mr-5px" icon="ep:plus" />
|
|
|
- 新增
|
|
|
- </el-button>
|
|
|
+ <el-button v-hasPermi="['sale:merchant:create']" @click="showDialog('新增')" v-if="!mobile">
|
|
|
+ <Icon class="mr-5px" icon="ep:plus" />
|
|
|
+ 新增
|
|
|
+ </el-button>
|
|
|
</div>
|
|
|
<div class="searchMore" v-show="searchMoreShow">
|
|
|
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
|
|
@@ -43,38 +43,42 @@
|
|
|
<el-input v-model="queryParams.email" placeholder="请输入邮箱" clearable @keyup.enter="handleQuery" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="服务到期时间" prop="expireTime">
|
|
|
- <el-date-picker v-model="queryParams.expireTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
|
|
|
- start-placeholder="开始日期" end-placeholder="结束日期"
|
|
|
+ <el-date-picker v-model="queryParams.expireTime" style="width: auto;" value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
|
|
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="创建时间" prop="createTime">
|
|
|
- <el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
|
|
|
- start-placeholder="开始日期" end-placeholder="结束日期"
|
|
|
+ <el-date-picker v-model="queryParams.createTime" style="width: auto;" value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
|
|
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button @click="hideSearchMore">
|
|
|
- 收起
|
|
|
- </el-button>
|
|
|
- <el-button @click="resetQuery">
|
|
|
- 重置
|
|
|
- </el-button>
|
|
|
- <el-button @click="handleQuery">
|
|
|
- <Icon icon="ep:search" class="mr-5px" /> 搜索
|
|
|
- </el-button>
|
|
|
- </el-form-item>
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="hideSearchMore">
|
|
|
+ 收起
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="resetQuery">
|
|
|
+ 重置
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="handleQuery">
|
|
|
+ <Icon icon="ep:search" class="mr-5px" /> 搜索
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-row>
|
|
|
- <el-col v-for="(o, index) in list" class="product-card" :key="index" :span="7" @mouseover="handleMouseOver(index)"
|
|
|
- @mouseout="handleMouseOut(index)">
|
|
|
- <el-card @click="showDialog('查看',o)">
|
|
|
+ <el-col v-for="(o, index) in list" class="card" :key="index" :span="7" :xl="7" :lg="7" :md="7" :sm="24" :xs="24"
|
|
|
+ @mouseover="handleMouseOver(index)" @mouseout="handleMouseOut(index)">
|
|
|
+ <el-card @click="showDialog('查看', o)">
|
|
|
<div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;">
|
|
|
<p style="width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-size: 16px;color:#000"
|
|
|
:title="o.name">{{ o.name }}
|
|
|
</p>
|
|
|
- <div @click.stop="showDialog('编辑',o)" v-show="o.showSetting" class="setting"
|
|
|
+ <div @click.stop="showDialog('编辑', o)" v-show="o.showSetting && !mobile" class="setting"
|
|
|
v-hasPermi="['sale:merchant:update']">
|
|
|
<el-icon size="20" color="rgb(220 223 231)">
|
|
|
<Setting />
|
|
|
@@ -106,14 +110,15 @@
|
|
|
<!-- 表单弹窗：添加/修改 -->
|
|
|
<!-- <MerchantForm ref="formRef" @success="getList" /> -->
|
|
|
|
|
|
- <ZxDialog :tabs="tabs" :buttons="buttons" @onButtonClick="handleButtonClick" :isDetail="isDetail" :initialComponent="initialComponent" :dialogTitle="dialogTitle" :id="parentId" v-model="dialogVisible" :openType="openType" />
|
|
|
-
|
|
|
+ <ZxDialog :tabs="tabs" :initialData="initialData" :buttonActions="buttonActions" :isDetail="isDetail"
|
|
|
+ :initialComponent="initialComponent" :dialogTitle="dialogTitle" :id="parentId" v-model="dialogVisible"
|
|
|
+ :openType="openType" />
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import download from '@/utils/download'
|
|
|
import { MerchantApi, MerchantVO } from '@/api/system/sale/merchant'
|
|
|
-import { Setting,Operation } from '@element-plus/icons-vue'
|
|
|
+import { Setting, Operation } from '@element-plus/icons-vue'
|
|
|
+const { currentRoute, push } = useRouter() // 路由跳转
|
|
|
|
|
|
// 从路由中引入store中的app仓库
|
|
|
import { useAppStore } from '@/store/modules/app'
|
|
|
@@ -136,40 +141,117 @@ const tabs = ref([
|
|
|
{ name: 'Finance', label: '财务', component: 'views/system/sale/merchant/components/MerchantFinance' },
|
|
|
{ name: 'Employee', label: '人员', component: 'views/system/sale/merchant/components/MerchantEmployee' },
|
|
|
]);
|
|
|
-
|
|
|
-const buttons = ref([
|
|
|
- { label: '保存', action: 'confirm',type: 'primary' },
|
|
|
-
|
|
|
+const initialData = ref({
|
|
|
+ logo: undefined,
|
|
|
+ id: undefined,
|
|
|
+ name: undefined,
|
|
|
+ status: undefined,
|
|
|
+ description: undefined,
|
|
|
+ contact: undefined,
|
|
|
+ address: undefined,
|
|
|
+ contactNumber: undefined,
|
|
|
+ website: undefined,
|
|
|
+ complaintsHotline: undefined,
|
|
|
+ customerServiceHotline: undefined,
|
|
|
+ email: undefined,
|
|
|
+ businessLicensePicture: undefined,
|
|
|
+ expireTime: undefined
|
|
|
+});
|
|
|
+const addData = JSON.parse(JSON.stringify(initialData.value));
|
|
|
+const updateParentData = (newData) => {
|
|
|
+ initialData.value = newData;
|
|
|
+};
|
|
|
+provide('updateParentData', updateParentData);
|
|
|
+
|
|
|
+// 定义按钮和对应的方法
|
|
|
+const buttonActions = ref([
|
|
|
+ {
|
|
|
+ name: '删除',
|
|
|
+ action: deleteData,
|
|
|
+ type: 'danger',
|
|
|
+ // 如果是增加时不显示
|
|
|
+ isAdd: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '保存',
|
|
|
+ action: saveData,
|
|
|
+ type: 'primary',
|
|
|
+ isAdd: true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 可以根据需要添加更多按钮和方法
|
|
|
]);
|
|
|
-// 操作分发
|
|
|
-const handleButtonClick = (action) => {
|
|
|
- console.log(`Button ${action} clicked`);
|
|
|
- // 根据 action 执行相应操作
|
|
|
- if(action === 'confirm'){
|
|
|
- console.log("父保存")
|
|
|
+
|
|
|
+// 定义保存数据的方法
|
|
|
+async function saveData() {
|
|
|
+ console.log('保存数据', initialData.value);
|
|
|
+ // 实现数据保存的逻辑
|
|
|
+ // 提交请求
|
|
|
+ try {
|
|
|
+ const data = initialData.value as unknown as MerchantApi.MerchantVO
|
|
|
+ if (initialData.value.id == undefined) {
|
|
|
+ await MerchantApi.createMerchant(data)
|
|
|
+ message.success(t('common.createSuccess'))
|
|
|
+ } else {
|
|
|
+ await MerchantApi.updateMerchant(data)
|
|
|
+ message.success(t('common.updateSuccess'))
|
|
|
+ }
|
|
|
+ dialogVisible.value = false
|
|
|
+ // 发送操作成功的事件
|
|
|
+ } finally {
|
|
|
+ getList()
|
|
|
}
|
|
|
-};
|
|
|
+}
|
|
|
+// 定义删除数据的方法
|
|
|
+function deleteData() {
|
|
|
+ // 调用删除
|
|
|
+ handleDelete(initialData.value.id)
|
|
|
+ // 关闭弹窗
|
|
|
+
|
|
|
+}
|
|
|
const initialComponent = 'views/system/sale/merchant/components/MerchantBaseInfo';
|
|
|
const parentId = ref(0);
|
|
|
const dialogVisible = ref(false);
|
|
|
const dialogTitle = ref("")
|
|
|
const isDetail = ref(false);
|
|
|
const openType = ref("")
|
|
|
-function showDialog(opentype: string, row:object) {
|
|
|
+async function showDialog(opentype: string, row: object) {
|
|
|
+
|
|
|
+
|
|
|
// 如果有row的话就是view或者edit
|
|
|
openType.value = opentype;
|
|
|
- if (row != null){
|
|
|
- if (opentype == "查看"){
|
|
|
+ if (row != null) {
|
|
|
+ // 如果row不为null则证明是有数据，即是说是编辑或者查看状态
|
|
|
+ // 获取通过id查到数据再传给子组件
|
|
|
+ initialData.value = await MerchantApi.getMerchant(row.id);
|
|
|
+
|
|
|
+ // 如果是移动端，则进入移动端的页面
|
|
|
+ console.log("ismobile?", mobile.value)
|
|
|
+ if (mobile.value) {
|
|
|
+ push({
|
|
|
+ name: 'MobileDetail', query: {
|
|
|
+ tabs: JSON.stringify(tabs.value),
|
|
|
+ initialComponent: initialComponent.value,
|
|
|
+ id: row.id,
|
|
|
+ initialData: JSON.stringify(initialData.value)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (opentype == "查看") {
|
|
|
+ console.log("查看")
|
|
|
+
|
|
|
isDetail.value = true
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
isDetail.value = false
|
|
|
}
|
|
|
- dialogTitle.value = opentype+"-"+row.name
|
|
|
+ dialogTitle.value = opentype + "-" + row.name
|
|
|
parentId.value = row.id;
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
isDetail.value = false
|
|
|
dialogTitle.value = opentype
|
|
|
parentId.value = 0;
|
|
|
+ initialData.value = addData.value
|
|
|
}
|
|
|
|
|
|
dialogVisible.value = true;
|
|
|
@@ -228,7 +310,6 @@ const getList = async () => {
|
|
|
data.list.forEach(obj => {
|
|
|
obj.showSetting = false;
|
|
|
});
|
|
|
-
|
|
|
list.value = data.list
|
|
|
total.value = data.total
|
|
|
} finally {
|
|
|
@@ -265,23 +346,10 @@ const handleDelete = async (id: number) => {
|
|
|
message.success(t('common.delSuccess'))
|
|
|
// 刷新列表
|
|
|
await getList()
|
|
|
+ dialogVisible.value = false
|
|
|
} catch { }
|
|
|
}
|
|
|
|
|
|
-/** 导出按钮操作 */
|
|
|
-const handleExport = async () => {
|
|
|
- try {
|
|
|
- // 导出的二次确认
|
|
|
- await message.exportConfirm()
|
|
|
- // 发起导出
|
|
|
- exportLoading.value = true
|
|
|
- const data = await MerchantApi.exportMerchant(queryParams)
|
|
|
- download.excel(data, '商户.xls')
|
|
|
- } catch {
|
|
|
- } finally {
|
|
|
- exportLoading.value = false
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
/** 初始化 **/
|
|
|
onMounted(() => {
|
|
|
@@ -289,33 +357,42 @@ onMounted(() => {
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-::v-deep .el-form-item__label {
|
|
|
- width: auto !important;
|
|
|
-}
|
|
|
-</style>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.spu-div {
|
|
|
- position: relative;
|
|
|
- min-height: 400px;
|
|
|
-}
|
|
|
-::v-deep .el-card__body {
|
|
|
- padding: 0;
|
|
|
-}
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+
|
|
|
+
|
|
|
+ .card {
|
|
|
+ margin: 10px 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep(.el-pagination__sizes),
|
|
|
+ ::v-deep(.el-pagination__jump) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .Content {
|
|
|
+ min-height: 100vh !important;
|
|
|
+ }
|
|
|
|
|
|
-::v-deep .parent-tabs .el-tabs__nav-wrap::after {
|
|
|
- position: static !important;
|
|
|
+ ::v-deep(.el-tabs__item) {
|
|
|
+ padding: 0 4px;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
+::v-deep .el-form-item__label {
|
|
|
+ width: auto !important;
|
|
|
}
|
|
|
|
|
|
-::v-deep .parent-tabs .el-tabs__active-bar {
|
|
|
|
|
|
- background-color: unset;
|
|
|
+
|
|
|
+::v-deep .el-card__body {
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
|
|
|
.searchMore {
|
|
|
- text-align: right;
|
|
|
+ text-align: left;
|
|
|
background: #f3f5f8;
|
|
|
padding: 10px;
|
|
|
position: absolute;
|
|
|
@@ -323,7 +400,9 @@ onMounted(() => {
|
|
|
z-index: 111;
|
|
|
box-shadow: 0px 9px 6px rgba(0, 0, 0, 0.2);
|
|
|
|
|
|
-
|
|
|
+ .el-row {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.el-tabs {
|
|
|
@@ -333,8 +412,7 @@ onMounted(() => {
|
|
|
left: 40px;
|
|
|
}
|
|
|
|
|
|
-.product-card {
|
|
|
-
|
|
|
+.card {
|
|
|
font-size: 14px;
|
|
|
margin: 10px;
|
|
|
|
|
|
@@ -370,15 +448,4 @@ onMounted(() => {
|
|
|
margin: unset;
|
|
|
padding: unset;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.spu-table-expand {
|
|
|
- padding-left: 42px;
|
|
|
-
|
|
|
- :deep(.el-form-item__label) {
|
|
|
- width: 82px;
|
|
|
- font-weight: bold;
|
|
|
- color: #99a9bf;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+}</style>
|
RuHu.Xu