|
|
@@ -1,916 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="table-box" style="width: 100%; min-height: 100%; background-color: white">
|
|
|
- <div class="content">
|
|
|
- <div class="contentLeft">
|
|
|
- <!-- 账号绑定模块 -->
|
|
|
- <div class="model">
|
|
|
- <h3 style="font-weight: bold">账号绑定:</h3>
|
|
|
- <el-form :model="storeInfoModel" :rules="rules" label-width="120px" ref="ruleFormRef" class="formBox">
|
|
|
- <el-form-item label="用户:" prop="userAccount">
|
|
|
- <el-select
|
|
|
- v-model="storeInfoModel.userAccount"
|
|
|
- class="m-2"
|
|
|
- placeholder="请选择要绑定的用户"
|
|
|
- size="large"
|
|
|
- :disabled="isDisabled"
|
|
|
- >
|
|
|
- <el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <!-- 商铺信息设置模块 -->
|
|
|
- <div class="model">
|
|
|
- <h3 style="font-weight: bold">商铺信息:</h3>
|
|
|
- <el-form :model="storeInfoModel" ref="ruleFormRef2" :rules="rules" label-width="120px" class="formBox">
|
|
|
- <el-form-item label="商店名称" prop="storeName">
|
|
|
- <el-input
|
|
|
- :disabled="isDisabled"
|
|
|
- maxlength="50"
|
|
|
- v-model="storeInfoModel!.storeName"
|
|
|
- placeholder="请填写商店名称"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="容纳人数" prop="storeCapacity">
|
|
|
- <el-input-number
|
|
|
- type="storeCapacity"
|
|
|
- :disabled="isDisabled"
|
|
|
- v-model="storeInfoModel!.storeCapacity"
|
|
|
- placeholder="容纳人数"
|
|
|
- clearable
|
|
|
- :min="0"
|
|
|
- :max="9999999"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="门店电话" prop="storeTel">
|
|
|
- <el-input
|
|
|
- :disabled="isDisabled"
|
|
|
- v-model="storeInfoModel!.storeTel"
|
|
|
- maxlength="15"
|
|
|
- placeholder="请填写门店电话"
|
|
|
- clearable
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="门店面积" prop="storeArea">
|
|
|
- <el-radio-group :disabled="isDisabled" v-model="storeInfoModel!.storeArea" class="ml-4">
|
|
|
- <el-radio v-for="storeArea in storeAreaList" :value="storeArea.value" :key="storeArea.value">
|
|
|
- {{ storeArea.label }}
|
|
|
- </el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <!-- <el-form-item label="是否连锁" prop="isChain">-->
|
|
|
- <!-- <el-radio-group :disabled="isDisabled" v-model="storeInfoModel!.isChain" class="ml-4">-->
|
|
|
- <!-- <el-radio label="0" :value="0"> 否 </el-radio>-->
|
|
|
- <!-- <el-radio label="1" :value="1"> 是 </el-radio>-->
|
|
|
- <!-- </el-radio-group>-->
|
|
|
- <!-- </el-form-item>-->
|
|
|
- <el-form-item label="详细地址" prop="storeAddress">
|
|
|
- <el-input
|
|
|
- maxlength="100"
|
|
|
- :disabled="isDisabled"
|
|
|
- v-model="storeInfoModel!.storeAddress"
|
|
|
- :rows="2"
|
|
|
- type="textarea"
|
|
|
- placeholder="请输入详细地址"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="行政区域" prop="district">
|
|
|
- <el-cascader :props="props" :disabled="isDisabled" v-model="storeInfoModel!.district" style="width: 100%" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="门店简介" prop="storeBlurb">
|
|
|
- <el-input
|
|
|
- maxlength="100"
|
|
|
- :disabled="isDisabled"
|
|
|
- v-model="storeInfoModel!.storeBlurb"
|
|
|
- :rows="2"
|
|
|
- type="textarea"
|
|
|
- placeholder="请输入门店简介"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="经营板块" prop="businessSection">
|
|
|
- <el-radio-group
|
|
|
- :disabled="isDisabled"
|
|
|
- @change="changeSection"
|
|
|
- v-model="storeInfoModel!.businessSection"
|
|
|
- class="ml-4"
|
|
|
- >
|
|
|
- <el-radio
|
|
|
- v-for="businessSection in businessSectionList"
|
|
|
- :value="businessSection.value"
|
|
|
- :key="businessSection.value"
|
|
|
- >
|
|
|
- {{ businessSection.label }}
|
|
|
- </el-radio>
|
|
|
- </el-radio-group>
|
|
|
- <span v-if="!isDisabled" style="margin-right: 10px">没有相应板块,点击这里</span>
|
|
|
- <el-icon v-if="!isDisabled" style="cursor: pointer" @click="addSection" color="#409EFC" class="no-inherit">
|
|
|
- <Plus />
|
|
|
- </el-icon>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="经营种类" prop="businessTypes">
|
|
|
- <el-checkbox-group :disabled="isDisabled" v-model="storeInfoModel!.businessTypes">
|
|
|
- <el-checkbox v-for="bt in businessTypes" :key="bt.value" :value="bt.value" :label="bt.label">
|
|
|
- {{ bt.label }}
|
|
|
- <el-tooltip
|
|
|
- class="box-item"
|
|
|
- effect="dark"
|
|
|
- content="指射箭、射击、赛车、攀岩、滑翔伞、滑雪滑冰等"
|
|
|
- placement="top"
|
|
|
- >
|
|
|
- <el-icon v-if="bt.label == '休闲运动'" :size="13">
|
|
|
- <QuestionFilled />
|
|
|
- </el-icon>
|
|
|
- </el-tooltip>
|
|
|
- </el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="contentRight">
|
|
|
- <el-form :model="storeInfoModel" ref="ruleFormRef3" :rules="rules" label-width="120px" class="formBox">
|
|
|
- <el-form-item label="门店状态" prop="storeStatus">
|
|
|
- <el-radio-group :disabled="isDisabled" v-model="storeInfoModel!.storeStatus" class="ml-4">
|
|
|
- <el-radio v-for="status in storeStatusList" :value="status.value" :key="status.value">
|
|
|
- {{ status.label }}
|
|
|
- </el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="门店营业状态" prop="businessStatus">
|
|
|
- <el-radio-group :disabled="isDisabled" v-model="storeInfoModel!.businessStatus" class="ml-4">
|
|
|
- <el-radio v-for="status in businessStatusList" :value="status.value" :key="status.value">
|
|
|
- {{ status.label }}
|
|
|
- </el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="经度" prop="storePositionLongitude">
|
|
|
- <el-input disabled v-model="storeInfoModel!.storePositionLongitude" placeholder="请填写经度" clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="纬度" prop="storePositionLatitude">
|
|
|
- <el-input disabled v-model="storeInfoModel!.storePositionLatitude" placeholder="请填写纬度" clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item v-if="!isDisabled" label="经纬度查询">
|
|
|
- <!-- <el-input v-model="addressName" placeholder="请填写地址后点击查询经纬度按钮" clearable />
|
|
|
- <br />
|
|
|
- <el-button type="primary" @click="getLonAndLatByAddressFun">查询经纬度</el-button> -->
|
|
|
-
|
|
|
- <el-select
|
|
|
- v-model="addressName"
|
|
|
- filterable
|
|
|
- placeholder="请输入地址进行查询"
|
|
|
- remote
|
|
|
- reserve-keyword
|
|
|
- :remote-method="getLonAndLat"
|
|
|
- @blur="clearInput"
|
|
|
- @change="selectAddress"
|
|
|
- >
|
|
|
- <el-option v-for="item in addressList" :key="item.id" :label="item.name" :value="item.location">
|
|
|
- <span style="float: left">{{ item.name }}</span>
|
|
|
- <span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">{{ item.district }}</span>
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="店铺到期时间" prop="expirationTime">
|
|
|
- <el-date-picker
|
|
|
- :disabled="isDisabled"
|
|
|
- v-model="storeInfoModel!.expirationTime"
|
|
|
- format="YYYY/MM/DD hh:mm:ss"
|
|
|
- value-format="YYYY-MM-DD h:m:s"
|
|
|
- type="datetime"
|
|
|
- placeholder="请选择店铺到期时间"
|
|
|
- />
|
|
|
- <!-- {{ drawerProps.row!.expirationTime }} -->
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="食品经营许可证到期时间" prop="foodLicenceExpirationTime">
|
|
|
- <el-date-picker
|
|
|
- :disabled="isDisabled"
|
|
|
- v-model="storeInfoModel!.foodLicenceExpirationTime"
|
|
|
- format="YYYY/MM/DD hh:mm:ss"
|
|
|
- value-format="YYYY-MM-DD h:m:s"
|
|
|
- type="datetime"
|
|
|
- placeholder="请选择到期时间"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <!-- <el-form-item label="门店密码" prop="storePass">
|
|
|
- <el-input
|
|
|
- :disabled="isDisabled"
|
|
|
- type="password"
|
|
|
- v-model="storeInfoModel!.storePass"
|
|
|
- placeholder="请填写门店密码"
|
|
|
- clearable
|
|
|
- maxlength="6"
|
|
|
- />
|
|
|
- </el-form-item> -->
|
|
|
- <el-form-item label="营业执照" prop="fileList">
|
|
|
- <template v-if="isDisabled">
|
|
|
- <div
|
|
|
- v-for="(item, idx) in storeInfoModel.fileList"
|
|
|
- :key="item.url || idx"
|
|
|
- style="width: 150px; height: 150px; overflow: hidden; border: 1px solid rgb(0 0 0 / 10%); border-radius: 6px"
|
|
|
- >
|
|
|
- <el-image :src="item.url" style="width: 100%; height: 100%" fit="contain" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <el-upload
|
|
|
- v-else
|
|
|
- v-model:file-list="storeInfoModel!.fileList"
|
|
|
- :action="uploadUrl"
|
|
|
- list-type="picture-card"
|
|
|
- :accept="'.jpg,.png'"
|
|
|
- :limit="1"
|
|
|
- :on-preview="handlePictureCardPreview"
|
|
|
- :on-remove="handleRemove"
|
|
|
- :on-success="handleSuccess"
|
|
|
- :show-file-list="true"
|
|
|
- >
|
|
|
- <el-icon>
|
|
|
- <Plus />
|
|
|
- </el-icon>
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="合同图片" prop="contractImage">
|
|
|
- <div v-if="isDisabled" style="display: flex; gap: 10px">
|
|
|
- <div
|
|
|
- v-for="(item, idx) in storeInfoModel.contractImage"
|
|
|
- :key="item.url || idx"
|
|
|
- style="width: 150px; height: 150px; overflow: hidden; border: 1px solid rgb(0 0 0 / 10%); border-radius: 6px"
|
|
|
- >
|
|
|
- <el-image :src="item.url" style="width: 100%; height: 100%" fit="contain" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-upload
|
|
|
- v-else
|
|
|
- v-model:file-list="storeInfoModel!.contractImage"
|
|
|
- :action="uploadUrl"
|
|
|
- list-type="picture-card"
|
|
|
- :accept="'.jpg,.png'"
|
|
|
- :on-preview="handlePictureCardPreview"
|
|
|
- :on-remove="handleContractRemove"
|
|
|
- :on-success="handleContractSuccess"
|
|
|
- :show-file-list="true"
|
|
|
- >
|
|
|
- <el-icon>
|
|
|
- <Plus />
|
|
|
- </el-icon>
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="食品经营许可证" prop="foodLicenceImage">
|
|
|
- <template v-if="isDisabled">
|
|
|
- <div
|
|
|
- v-for="(item, idx) in storeInfoModel.foodLicenceImage"
|
|
|
- :key="item.url || idx"
|
|
|
- style="width: 150px; height: 150px; overflow: hidden; border: 1px solid rgb(0 0 0 / 10%); border-radius: 6px"
|
|
|
- >
|
|
|
- <el-image :src="item.url" style="width: 100%; height: 100%" fit="contain" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <el-upload
|
|
|
- v-else
|
|
|
- v-model:file-list="storeInfoModel!.foodLicenceImage"
|
|
|
- :action="uploadUrl"
|
|
|
- list-type="picture-card"
|
|
|
- :accept="'.jpg,.png'"
|
|
|
- :on-preview="handlePictureCardPreview"
|
|
|
- :on-remove="handleFoodLicenceRemove"
|
|
|
- :on-success="handleFoodLicenceSuccess"
|
|
|
- :show-file-list="true"
|
|
|
- :limit="1"
|
|
|
- >
|
|
|
- <el-icon>
|
|
|
- <Plus />
|
|
|
- </el-icon>
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
- <!-- <el-form-item label="创建时间" v-if="type !== 'add'">-->
|
|
|
- <!-- <el-date-picker-->
|
|
|
- <!-- :disabled="isDisabled"-->
|
|
|
- <!-- v-model="storeInfoModel!.createdTime"-->
|
|
|
- <!-- format="YYYY/MM/DD hh:mm:ss"-->
|
|
|
- <!-- value-format="YYYY-MM-DD h:m:s"-->
|
|
|
- <!-- type="datetime"-->
|
|
|
- <!-- placeholder="请选择创建时间"-->
|
|
|
- <!-- readonly-->
|
|
|
- <!-- />-->
|
|
|
- <!-- </el-form-item>-->
|
|
|
-
|
|
|
- <!-- <el-form-item label="审核状态" prop="storeApplicationStatus" v-if="type !== 'add'">-->
|
|
|
- <!-- <el-input :disabled="isDisabled" :value="storeApplicationStatusText" readonly placeholder="请填写审核状态" />-->
|
|
|
- <!-- </el-form-item>-->
|
|
|
-
|
|
|
- <el-form-item label="拒绝原因" v-if="type !== 'add' && storeApplicationStatusText === '审核拒绝'">
|
|
|
- <el-input :disabled="isDisabled" :value="storeInfoModel!.reason || '暂无'" readonly placeholder="请填写拒接原因" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="抽成比例" prop="commissionRate">
|
|
|
- <el-input
|
|
|
- maxlength="50"
|
|
|
- :disabled="true"
|
|
|
- v-model="storeInfoModel!.commissionRate"
|
|
|
- placeholder="请填写抽成比例"
|
|
|
- clearable
|
|
|
- type="number"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <!--图片预览-->
|
|
|
- <el-dialog v-model="imagePopupVisible" title="预览" width="30%">
|
|
|
- <el-image style="width: 100%" :src="previewImage" fit="contain" />
|
|
|
- </el-dialog>
|
|
|
- <el-button @click="goBack"> 返回 </el-button>
|
|
|
- <el-button v-if="type != 'show'" type="primary" @click="handleSubmit"> 确定 </el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 新增分类dialog -->
|
|
|
- <el-dialog v-model="addSectionDialogVisible" title="新增经营板块" width="30%" :before-close="closeSection">
|
|
|
- <el-form :model="userAccountModel" label-width="120px">
|
|
|
- <el-form-item label="经营板块名称" prop="storeName">
|
|
|
- <el-input v-model="sectionSectionName" placeholder="请填写经营板块名称" clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="经营类型英文值" prop="storeName">
|
|
|
- <el-input v-model="businessTypeValue" placeholder="请填写经营类型英文值" clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="经营种类" prop="storeName">
|
|
|
- <el-tag
|
|
|
- v-for="tag in sectionSectionTypes"
|
|
|
- :key="tag"
|
|
|
- class="mx-1"
|
|
|
- closable
|
|
|
- :disable-transitions="false"
|
|
|
- @close="handleClose(tag)"
|
|
|
- >
|
|
|
- {{ tag }}
|
|
|
- </el-tag>
|
|
|
- <el-input
|
|
|
- v-if="sectionTypeVisable"
|
|
|
- ref="InputRef"
|
|
|
- v-model="sectionTypeValue"
|
|
|
- class="ml-1 w-20"
|
|
|
- size="small"
|
|
|
- @keyup.enter="handleInputConfirm"
|
|
|
- @blur="handleInputConfirm"
|
|
|
- />
|
|
|
- <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput"> + 新增分类 </el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button @click="closeSection()">取消</el-button>
|
|
|
- <el-button type="primary" @click="addBusinessSectionTypes"> 确定</el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="tsx" name="useProTable">
|
|
|
-import { ref, reactive, computed, onMounted, nextTick } from "vue";
|
|
|
-import { StoreUser } from "@/api/interface";
|
|
|
-import { ElMessage } from "element-plus";
|
|
|
-import ProTable from "@/components/ProTable/index.vue";
|
|
|
-import ImportExcel from "@/components/ImportExcel/index.vue";
|
|
|
-import StoreUserDrawer from "@/views/proTable/components/StoreUserDrawer.vue";
|
|
|
-import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
|
|
-import {
|
|
|
- CirclePlus,
|
|
|
- Delete,
|
|
|
- EditPen,
|
|
|
- Download,
|
|
|
- Upload,
|
|
|
- Refresh,
|
|
|
- Check,
|
|
|
- Close,
|
|
|
- Search,
|
|
|
- QuestionFilled
|
|
|
-} from "@element-plus/icons-vue";
|
|
|
-import {
|
|
|
- getStoreUserList,
|
|
|
- addStoreUser,
|
|
|
- editStoreUser,
|
|
|
- deleteStoreUser,
|
|
|
- resetStoreUserPassWord,
|
|
|
- getStoreAuditStatus,
|
|
|
- getBusinessSection,
|
|
|
- getBusinessSectionTypes,
|
|
|
- getUnboundAccountList,
|
|
|
- addBusinessSectionAndTypes,
|
|
|
- saveStoreInfo,
|
|
|
- getStoreDetail,
|
|
|
- editStoreInfo,
|
|
|
- getInputPrompt,
|
|
|
- getDistrict
|
|
|
-} from "@/api/modules/storeUser";
|
|
|
-import { useHandleData } from "@/hooks/useHandleData";
|
|
|
-import { useRouter, useRoute } from "vue-router";
|
|
|
-import type { UploadProps, UploadUserFile, FormInstance } from "element-plus";
|
|
|
-import { forEach } from "lodash";
|
|
|
-
|
|
|
-const imagePopupVisible = ref(false);
|
|
|
-
|
|
|
-const rules = reactive({
|
|
|
- storeName: [{ required: true, message: "请填写商户名称" }],
|
|
|
- storeContact: [{ required: true, message: "请填写联系人" }],
|
|
|
- name: [{ required: true, message: "请填写联系人" }],
|
|
|
- storePhone: [{ required: true, message: "请填写联系人电话" }],
|
|
|
- phone: [{ required: true, message: "请填写联系人电话" }],
|
|
|
- password: [{ required: true, message: "请填写密码" }],
|
|
|
- payPassword: [{ required: true, message: "请填写支付密码" }],
|
|
|
- storeCapacity: [{ required: true, message: "请填写容纳人数" }],
|
|
|
- storeTel: [{ required: true, message: "请填写门店电话" }],
|
|
|
- isChain: [{ required: true, message: "请选择是否连锁" }],
|
|
|
- storeAddress: [{ required: true, message: "请输入详细地址" }],
|
|
|
- district: [{ required: true, message: "请选择行政区域" }],
|
|
|
- storeBlurb: [{ required: true, message: "请输入门店简介" }],
|
|
|
- storeTypeList: [{ required: true, message: "请选择经营种类" }],
|
|
|
- storeStatus: [{ required: true, message: "请选择门店状态" }],
|
|
|
- businessStatus: [{ required: true, message: "请选择门店营业状态" }],
|
|
|
- storePositionLongitude: [{ required: true, message: "请选择门店经度" }],
|
|
|
- storePositionLatitude: [{ required: true, message: "请选择门店纬度" }],
|
|
|
- expirationTime: [{ required: true, message: "请选择门店到期时间" }],
|
|
|
- foodLicenceExpirationTime: [{ required: true, message: "请选择门店经营许可证到期时间" }],
|
|
|
- storePass: [{ required: true, message: "请输入门店密码" }],
|
|
|
- storeArea: [{ required: true, message: "请选择门店面积" }],
|
|
|
- businessSection: [{ required: true, message: "请选择经营板块" }],
|
|
|
- businessTypes: [{ required: true, message: "请选择经营种类" }],
|
|
|
- userAccount: [{ required: true, message: "请选择用户账号" }],
|
|
|
- fileList: [{ required: true, message: "请上传营业执照" }],
|
|
|
- contractImage: [{ required: true, message: "请上传合同图片" }],
|
|
|
- foodLicenceImage: [{ required: true, message: "请上传食品经营许可证图片" }],
|
|
|
- commissionRate: [{ required: true, message: "请填写抽成比例" }],
|
|
|
- // createdTime: [{ required: true, message: "请选择创建时间" }],
|
|
|
- storeApplicationStatus: [{ required: true, message: "请填写审核状态" }]
|
|
|
- // reason: [{ required: true, message: "请填写拒绝原因" }],
|
|
|
-});
|
|
|
-//文件上传地址
|
|
|
-const uploadUrl = ref(`${import.meta.env.VITE_API_URL_STORE}/file/upload`);
|
|
|
-//行政区域组件
|
|
|
-const props: any = {
|
|
|
- lazy: true,
|
|
|
- async lazyLoad(node, resolve) {
|
|
|
- const { level } = node;
|
|
|
- try {
|
|
|
- let param = { adCode: node.data.adCode ? node.data.adCode : "" };
|
|
|
- // 调用后台接口获取数据
|
|
|
- const response: any = await getDistrict(param as any);
|
|
|
- // 转换数据格式
|
|
|
- const nodes = (response?.data?.districts?.[0]?.districts || []).map((item: any) => ({
|
|
|
- value: item.adcode,
|
|
|
- adCode: item.adcode,
|
|
|
- label: item.name,
|
|
|
- leaf: level >= 2 // 假设最多三级,可以根据实际需求调整
|
|
|
- }));
|
|
|
-
|
|
|
- // 返回数据
|
|
|
- resolve(nodes);
|
|
|
- } catch (error) {
|
|
|
- console.error("获取区域数据失败:", error);
|
|
|
- resolve([]);
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-const fileList = ref<UploadUserFile[]>([]);
|
|
|
-
|
|
|
-const router = useRouter();
|
|
|
-const route = useRoute();
|
|
|
-const InputRef = ref<any>();
|
|
|
-//页面操作列是否禁用
|
|
|
-const isDisabled = ref<boolean>(false);
|
|
|
-//进入页面类型(新增:add,查看:show,编辑:edit)
|
|
|
-//用户账号
|
|
|
-const userAccountModel = ref<any>({ userAccount: "" });
|
|
|
-//新增板块
|
|
|
-const storeSectionModel = ref<any>({ sectionName: "", types: [] });
|
|
|
-//页面展开类型
|
|
|
-const type = ref<string>("");
|
|
|
-//页面id参数
|
|
|
-const id = ref<string>("");
|
|
|
-//地址名称
|
|
|
-const addressName = ref<string>("");
|
|
|
-//查询地址名称
|
|
|
-const queryAddress = ref<string>("");
|
|
|
-//地址集合
|
|
|
-const addressList = ref<any[]>([]);
|
|
|
-
|
|
|
-//商铺信息模块
|
|
|
-const storeInfoModel = ref<any>({
|
|
|
- //店铺名称
|
|
|
- storeName: "",
|
|
|
- //容纳人数
|
|
|
- storeCapacity: "1",
|
|
|
- //门店电话
|
|
|
- storeTel: "",
|
|
|
- //门店面积
|
|
|
- storeArea: 1,
|
|
|
- //是否连锁
|
|
|
- isChain: 1,
|
|
|
- //详细地址
|
|
|
- storeAddress: "",
|
|
|
- //门店简介
|
|
|
- storeBlurb: "",
|
|
|
- //经营板块
|
|
|
- businessSection: "1",
|
|
|
- //经营种类
|
|
|
- businessTypes: [],
|
|
|
- //营业执照
|
|
|
- fileList: [],
|
|
|
- //用户账号id
|
|
|
- userAccount: "",
|
|
|
- //门店状态
|
|
|
- storeStatus: 1,
|
|
|
- //门店营业状态
|
|
|
- businessStatus: 0,
|
|
|
- //行政区域
|
|
|
- district: [],
|
|
|
- // 抽成比例
|
|
|
- commissionRate: "3",
|
|
|
- // 创建时间
|
|
|
- createdTime: "",
|
|
|
- // 审核状态
|
|
|
- storeApplicationStatus: "",
|
|
|
- // 拒绝原因
|
|
|
- reason: ""
|
|
|
-});
|
|
|
-//用户列表
|
|
|
-const userOptions = ref<StoreUser.UserOptions[]>([]);
|
|
|
-//用户经营板块对话框开启标识
|
|
|
-const addSectionDialogVisible = ref<boolean>(false);
|
|
|
-//添加板块类型开启标识
|
|
|
-const sectionTypeVisable = ref<boolean>(false);
|
|
|
-//添加板块类型值
|
|
|
-const sectionTypeValue = ref<string>("");
|
|
|
-//添加板块类型名称
|
|
|
-const sectionSectionName = ref<string>("");
|
|
|
-//添加板块类型英文值
|
|
|
-const businessTypeValue = ref<string>("");
|
|
|
-//添加板块类型名称
|
|
|
-const sectionSectionTypes = ref<string[]>([]);
|
|
|
-//营业执照图片集合
|
|
|
-const videoUrlList = ref<string[]>([]);
|
|
|
-//合同图片集合
|
|
|
-const contractImageList = ref<string[]>([]);
|
|
|
-//合同图片集合
|
|
|
-const foodLicenceImageList = ref<string[]>([]);
|
|
|
-
|
|
|
-// 门店面积列表
|
|
|
-const storeAreaList = ref<any[]>([
|
|
|
- { value: 1, label: "小于20平米" },
|
|
|
- { value: 2, label: "20~50平米" },
|
|
|
- { value: 3, label: "50~100平米" },
|
|
|
- { value: 4, label: "100~300平米" },
|
|
|
- { value: 5, label: "300~500平米" },
|
|
|
- { value: 6, label: "500~1000平米" },
|
|
|
- { value: 7, label: "大于1000平米" }
|
|
|
-]);
|
|
|
-// 经营板块列表
|
|
|
-const businessSectionList = ref<any[]>([]);
|
|
|
-//经营种类列表
|
|
|
-const businessTypes = ref<any[]>([]);
|
|
|
-//获取用户列表
|
|
|
-const getUserOptions = async () => {
|
|
|
- let res: any = await getUnboundAccountList({ id: id.value } as any);
|
|
|
- //todo 此处修改成调用接口
|
|
|
- // let a = { name: "张三", id: 1 };
|
|
|
- // let b = { name: "李四", id: 2 };
|
|
|
- (res?.data || []).forEach((element: any) => {
|
|
|
- let addData = {
|
|
|
- name: `${element.phone}(${element.name ? element.name : "未知"})`,
|
|
|
- id: element.id
|
|
|
- };
|
|
|
- userOptions.value.push(addData);
|
|
|
- });
|
|
|
-};
|
|
|
-// 门店状态列表(0: 禁用,1: 正常)
|
|
|
-const storeStatusList = ref<any[]>([
|
|
|
- { value: 0, label: "禁用" },
|
|
|
- { value: 1, label: "正常" }
|
|
|
-]);
|
|
|
-// 门店营业状态列表
|
|
|
-const businessStatusList = ref<any[]>([
|
|
|
- { value: 0, label: "正常营业" },
|
|
|
- { value: 1, label: "暂停营业" },
|
|
|
- { value: 2, label: "筹建中" },
|
|
|
- { value: 99, label: "永久关门" }
|
|
|
-]);
|
|
|
-//新增经营板块
|
|
|
-const addSection = () => {
|
|
|
- addSectionDialogVisible.value = true;
|
|
|
-};
|
|
|
-//关闭新增经营板块弹窗
|
|
|
-const closeSection = () => {
|
|
|
- sectionSectionName.value = "";
|
|
|
- businessTypeValue.value = "";
|
|
|
- sectionSectionTypes.value = [];
|
|
|
- addSectionDialogVisible.value = false;
|
|
|
-};
|
|
|
-//删除门店经营板块分类
|
|
|
-const handleClose = (tag: string) => {
|
|
|
- storeSectionModel.value.types.splice(storeSectionModel.value.types.indexOf(tag), 1);
|
|
|
-};
|
|
|
-//新增标签
|
|
|
-const handleInputConfirm = () => {
|
|
|
- if (sectionTypeValue.value) {
|
|
|
- sectionSectionTypes.value.push(sectionTypeValue.value);
|
|
|
- }
|
|
|
- sectionTypeVisable.value = false;
|
|
|
- sectionTypeValue.value = "";
|
|
|
-};
|
|
|
-//展示新增标签input
|
|
|
-const showInput = () => {
|
|
|
- sectionTypeVisable.value = true;
|
|
|
- nextTick(() => {
|
|
|
- InputRef.value!.input!.focus();
|
|
|
- });
|
|
|
-};
|
|
|
-//返回上一页
|
|
|
-const goBack = () => {
|
|
|
- router.go(-1);
|
|
|
-};
|
|
|
-const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
|
|
|
- videoUrlList.value = [];
|
|
|
-};
|
|
|
-
|
|
|
-const handleSuccess = (response: any, uploadFile: UploadUserFile) => {
|
|
|
- ElMessage.success("执照上传成功");
|
|
|
- console.log(response);
|
|
|
- if (response.data) {
|
|
|
- videoUrlList.value.push(response.data);
|
|
|
- // videoUrl.value = response.data;
|
|
|
- }
|
|
|
- console.log("videoUrlList.value ===> ", videoUrlList.value);
|
|
|
-};
|
|
|
-
|
|
|
-const handleContractRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
|
|
|
- contractImageList.value = [];
|
|
|
- (uploadFiles || []).forEach((f: any) => {
|
|
|
- if (f.url) contractImageList.value.push(f.url);
|
|
|
- });
|
|
|
- // storeInfoModel.value.contractImageList = storeInfoModel.value.contractImageList.filter(item => item.uid !== uploadFile.uid)
|
|
|
-};
|
|
|
-
|
|
|
-const handleContractSuccess = (response: any, uploadFile: UploadUserFile) => {
|
|
|
- ElMessage.success("合同上传成功");
|
|
|
- if (response.data) {
|
|
|
- contractImageList.value.push(response.data);
|
|
|
- }
|
|
|
- console.log(contractImageList.value);
|
|
|
-};
|
|
|
-
|
|
|
-const handleFoodLicenceSuccess = (response: any, uploadFile: UploadUserFile) => {
|
|
|
- ElMessage.success("食品经营许可上传成功");
|
|
|
- if (response.data) {
|
|
|
- foodLicenceImageList.value.push(response.data);
|
|
|
- }
|
|
|
- console.log(response);
|
|
|
-};
|
|
|
-
|
|
|
-const handleFoodLicenceRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
|
|
|
- foodLicenceImageList.value = [];
|
|
|
- (uploadFiles || []).forEach((item: any) => {
|
|
|
- if (item.url) foodLicenceImageList.value.push(item.url);
|
|
|
- });
|
|
|
- console.log("foodLicenceImageList.value ===> ", foodLicenceImageList.value);
|
|
|
-};
|
|
|
-
|
|
|
-const getBusinessSectionList = async () => {
|
|
|
- let res: any = await getBusinessSection();
|
|
|
- let addData: any[] = [];
|
|
|
- (res?.data || []).forEach((element: any) => {
|
|
|
- addData.push({ value: element.dictId, label: element.dictDetail, parentId: element.parentId });
|
|
|
- });
|
|
|
- //默认 storeInfoModel!.businessSection 为第一个元素
|
|
|
- storeInfoModel.value.businessSection = addData[0].value;
|
|
|
- businessSectionList.value = addData;
|
|
|
- changeSection();
|
|
|
-};
|
|
|
-
|
|
|
-const changeSection = async () => {
|
|
|
- storeInfoModel.value.businessTypes = [];
|
|
|
- //获取经营种类
|
|
|
- const resType: any = await getBusinessSectionTypes({ parentId: storeInfoModel.value.businessSection } as any);
|
|
|
- let addData: any[] = [];
|
|
|
- (resType?.data || []).forEach((element: any) => {
|
|
|
- addData.push({ value: element.dictId, label: element.dictDetail, parentId: element.parentId });
|
|
|
- });
|
|
|
- businessTypes.value = addData;
|
|
|
- if (type.value == "add") {
|
|
|
- storeInfoModel.value.businessTypes = ["0"];
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-const addBusinessSectionTypes = async () => {
|
|
|
- let param = {
|
|
|
- businessSectionName: sectionSectionName.value,
|
|
|
- businessTypeValue: businessTypeValue.value,
|
|
|
- businessTypesList: sectionSectionTypes.value
|
|
|
- };
|
|
|
- let res: any = await addBusinessSectionAndTypes(param as any);
|
|
|
- if (res.code == "200") {
|
|
|
- ElMessage.success("新增成功!");
|
|
|
- addSectionDialogVisible.value = false;
|
|
|
- sectionSectionName.value = "";
|
|
|
- businessTypeValue.value = "";
|
|
|
- sectionSectionTypes.value = [];
|
|
|
- getBusinessSectionList();
|
|
|
- } else {
|
|
|
- ElMessage.error("新增失败!");
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-const getLonAndLat = async (keyword: string) => {
|
|
|
- if (keyword) {
|
|
|
- console.log("地址查询", keyword);
|
|
|
- let param = {
|
|
|
- addressName: keyword
|
|
|
- };
|
|
|
- let res: any = await getInputPrompt(param as any);
|
|
|
- if (res.code == "200") {
|
|
|
- addressList.value = res?.data?.tips || [];
|
|
|
- console.log("res", res);
|
|
|
- } else {
|
|
|
- ElMessage.error("新增失败!");
|
|
|
- }
|
|
|
- } else {
|
|
|
- addressList.value = [];
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-const clearInput = async () => {};
|
|
|
-
|
|
|
-const selectAddress = async (param: any) => {
|
|
|
- console.log("addressName.value", addressName.value);
|
|
|
- let locationList = addressName.value.split(",");
|
|
|
- addressList.value.forEach((item: any) => {
|
|
|
- if (item.location == addressName.value) {
|
|
|
- queryAddress.value = item.name;
|
|
|
- }
|
|
|
- });
|
|
|
- console.log("locationList", locationList);
|
|
|
- storeInfoModel.value.storePositionLongitude = locationList[0];
|
|
|
- storeInfoModel.value.storePositionLatitude = locationList[1];
|
|
|
-};
|
|
|
-
|
|
|
-// const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => {};
|
|
|
-const previewImage = ref("");
|
|
|
-const handlePictureCardPreview = (e: any) => {
|
|
|
- imagePopupVisible.value = true;
|
|
|
- previewImage.value = e.url;
|
|
|
-};
|
|
|
-
|
|
|
-const closeImagePopup = () => {
|
|
|
- imagePopupVisible.value = false;
|
|
|
- previewImage.value = "";
|
|
|
-};
|
|
|
-
|
|
|
-// 提交数据(新增/编辑)
|
|
|
-const ruleFormRef = ref<FormInstance>();
|
|
|
-const ruleFormRef2 = ref<FormInstance>();
|
|
|
-const ruleFormRef3 = ref<FormInstance>();
|
|
|
-const handleSubmit = () => {
|
|
|
- ruleFormRef.value!.validate(async valid => {
|
|
|
- if (!valid) return;
|
|
|
- ruleFormRef2.value!.validate(async valid2 => {
|
|
|
- if (!valid2) return;
|
|
|
- ruleFormRef3.value!.validate(async valid3 => {
|
|
|
- if (!valid3) return;
|
|
|
- if (!storeInfoModel.value.district[0] || !storeInfoModel.value.district[1] || !storeInfoModel.value.district[2]) {
|
|
|
- ElMessage.error("请完整选择行政区域");
|
|
|
- return;
|
|
|
- }
|
|
|
- let param: any = storeInfoModel.value;
|
|
|
- param.queryAddress = queryAddress.value;
|
|
|
- console.log("videoUrlList.value ===> ", videoUrlList.value);
|
|
|
- console.log("storeInfoModel.value ===> ", storeInfoModel.value);
|
|
|
- param.businessLicenseAddress = videoUrlList.value;
|
|
|
- param.contractImageList = handleImageResult(contractImageList.value);
|
|
|
- let arr = handleImageResult(foodLicenceImageList.value);
|
|
|
- param.foodLicenceUrl = arr.length > 0 ? arr[0] : "";
|
|
|
- param.createTime = null;
|
|
|
- param.updatedTime = null;
|
|
|
- param.administrativeRegionProvinceAdcode = storeInfoModel.value.district[0];
|
|
|
- param.administrativeRegionCityAdcode = storeInfoModel.value.district[1];
|
|
|
- param.administrativeRegionDistrictAdcode = storeInfoModel.value.district[2];
|
|
|
- if (type.value == "add") {
|
|
|
- let res = await saveStoreInfo(param);
|
|
|
- if (res.code == "200") {
|
|
|
- ElMessage.success("新增成功");
|
|
|
- router.go(-1);
|
|
|
- } else {
|
|
|
- ElMessage.error("新增失败");
|
|
|
- }
|
|
|
- } else if (type.value == "edit") {
|
|
|
- let res = await editStoreInfo(param);
|
|
|
- if (res.code == "200") {
|
|
|
- ElMessage.success("编辑成功");
|
|
|
- router.go(-1);
|
|
|
- } else {
|
|
|
- ElMessage.error("编辑失败");
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-onMounted(async () => {
|
|
|
- id.value = (route.query.id as string) || "";
|
|
|
- type.value = (route.query.type as string) || "";
|
|
|
- //调用获取用户列表
|
|
|
- getUserOptions();
|
|
|
- //获取商铺经营板块
|
|
|
- await getBusinessSectionList();
|
|
|
- if (type.value != "add") {
|
|
|
- if (type.value == "show") {
|
|
|
- isDisabled.value = true;
|
|
|
- }
|
|
|
- let res: any = await getStoreDetail({ id: id.value } as any);
|
|
|
- storeInfoModel.value = res.data as any;
|
|
|
- storeInfoModel.value.businessSection = storeInfoModel.value.businessSection + "";
|
|
|
- storeInfoModel.value.userAccount = Number(storeInfoModel.value.userAccount);
|
|
|
- await changeSection();
|
|
|
- storeInfoModel.value.businessTypes = storeInfoModel.value.businessTypesList;
|
|
|
- storeInfoModel.value.storePositionLongitude = storeInfoModel.value.storePosition.split(",")[0];
|
|
|
- storeInfoModel.value.storePositionLatitude = storeInfoModel.value.storePosition.split(",")[1];
|
|
|
- let district: any[] = [];
|
|
|
- district[0] = storeInfoModel.value.administrativeRegionProvinceAdcode;
|
|
|
- district[1] = storeInfoModel.value.administrativeRegionCityAdcode;
|
|
|
- district[2] = storeInfoModel.value.administrativeRegionDistrictAdcode;
|
|
|
- storeInfoModel.value.district = district;
|
|
|
- videoUrlList.value = (res.data as any).businessLicenseAddress || [];
|
|
|
- let fileList: any[] = [];
|
|
|
- handleImageParam((res.data as any).businessLicenseAddress || [], fileList);
|
|
|
-
|
|
|
- let contractImageList: any[] = [];
|
|
|
- handleImageParam((res.data as any).contractImageList || [], contractImageList);
|
|
|
-
|
|
|
- let foodLicenceImageList: any[] = [];
|
|
|
- handleImageParam((res.data as any).foodLicenceImageList || [], foodLicenceImageList);
|
|
|
-
|
|
|
- storeInfoModel.value.fileList = fileList;
|
|
|
- storeInfoModel.value.contractImage = contractImageList;
|
|
|
- storeInfoModel.value.contractImageList = contractImageList;
|
|
|
- (contractImageList as any).value = contractImageList as any;
|
|
|
- storeInfoModel.value.foodLicenceImage = foodLicenceImageList;
|
|
|
- storeInfoModel.value.foodLicenceImageList = foodLicenceImageList;
|
|
|
- }
|
|
|
-});
|
|
|
-//图片list 转换为upload 组件的参数
|
|
|
-const handleImageParam = (list: any[], result: any[]) => {
|
|
|
- (list || []).forEach((item: any) => {
|
|
|
- // 使用split方法以'/'为分隔符将URL拆分成数组
|
|
|
- const parts = item.split("/");
|
|
|
- // 取数组的最后一项,即图片名称
|
|
|
- const imageName = parts[parts.length - 1];
|
|
|
- result.push({
|
|
|
- name: imageName,
|
|
|
- percentage: 100,
|
|
|
- url: item
|
|
|
- });
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-const handleImageResult = (list: any[]) => {
|
|
|
- let result: any[] = [];
|
|
|
- (list || []).forEach((item: any) => {
|
|
|
- if (item.uid) {
|
|
|
- result.push(item.url);
|
|
|
- } else {
|
|
|
- result.push(item);
|
|
|
- }
|
|
|
- });
|
|
|
- return result;
|
|
|
-};
|
|
|
-
|
|
|
-// 判断审核状态
|
|
|
-const storeApplicationStatusText = computed(() => {
|
|
|
- const status = storeInfoModel.value.storeApplicationStatus;
|
|
|
- if (status == 0) return "待审核";
|
|
|
- if (status == 1) return "审核通过";
|
|
|
- if (status == 2) return "审核拒绝";
|
|
|
- return "";
|
|
|
-});
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-.content {
|
|
|
- display: flex;
|
|
|
- width: 98%;
|
|
|
- height: 98%;
|
|
|
- margin: auto;
|
|
|
- .contentLeft {
|
|
|
- width: 50%;
|
|
|
- }
|
|
|
- .contentRight {
|
|
|
- width: 50%;
|
|
|
- }
|
|
|
-}
|
|
|
-.model {
|
|
|
- margin-bottom: 50px;
|
|
|
-}
|
|
|
-.formBox {
|
|
|
- width: 70%;
|
|
|
-}
|
|
|
-.table-box {
|
|
|
- height: auto !important;
|
|
|
-}
|
|
|
-</style>
|