|
|
@@ -1,216 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-dialog v-model="drawerVisible" :destroy-on-close="true" size="650px" :title="`${drawerProps.title}账号`">
|
|
|
- <el-form
|
|
|
- ref="ruleFormRef"
|
|
|
- label-width="100px"
|
|
|
- label-suffix=" :"
|
|
|
- :rules="rules"
|
|
|
- :disabled="drawerProps.isView"
|
|
|
- :model="drawerProps.row"
|
|
|
- :hide-required-asterisk="drawerProps.isView"
|
|
|
- >
|
|
|
- <!-- <span>商铺管理员信息:</span> -->
|
|
|
- <el-form-item label="联系人" prop="storeContact">
|
|
|
- <el-input v-model="drawerProps.row!.storeContact" placeholder="请填写联系人" clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="联系人电话" prop="storePhone">
|
|
|
- <el-input v-model="drawerProps.row!.storePhone" placeholder="请填写联系人电话" clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="身份证号" prop="idCard">
|
|
|
- <el-input v-model="drawerProps.row!.idCard" placeholder="请填写联系人身份证号" clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="密码" prop="password">
|
|
|
- <el-input type="password" v-model="drawerProps.row!.password" placeholder="请填写密码" clearable />
|
|
|
- </el-form-item>
|
|
|
- <!-- <br />
|
|
|
- <span>商铺信息:</span>
|
|
|
- <el-form-item label="商店名称" prop="storeName">
|
|
|
- <el-input v-model="drawerProps.row!.storeName" placeholder="请填写商店名称" clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="容纳人数" prop="storeCapacity">
|
|
|
- <el-input-number
|
|
|
- type="storeCapacity"
|
|
|
- v-model="drawerProps.row!.storeCapacity"
|
|
|
- placeholder="容纳人数"
|
|
|
- clearable
|
|
|
- :min="0"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="门店电话" prop="storeTel">
|
|
|
- <el-input v-model="drawerProps.row!.storeTel" placeholder="请填写门店电话" clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="门店面积" prop="storeArea">
|
|
|
- <el-radio-group v-model="drawerProps.row!.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 v-model="drawerProps.row!.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 v-model="drawerProps.row!.storeAddress" :rows="2" type="textarea" placeholder="请输入详细地址" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="门店简介" prop="storeBlurb">
|
|
|
- <el-input v-model="drawerProps.row!.storeBlurb" :rows="2" type="textarea" placeholder="请输入门店简介" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="经营种类" prop="storeTypeList">
|
|
|
- <el-checkbox-group v-model="drawerProps.row!.storeTypeList">
|
|
|
- <el-checkbox v-for="type in storeTypeList" :key="type.value" :value="type.value">
|
|
|
- {{ type.label }}
|
|
|
- </el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="门店状态" prop="storeStatus">
|
|
|
- <el-radio-group v-model="drawerProps.row!.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 v-model="drawerProps.row!.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 v-model="drawerProps.row!.storePositionLongitude" placeholder="请填写经度" clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="纬度" prop="storePositionLatitude">
|
|
|
- <el-input v-model="drawerProps.row!.storePositionLatitude" placeholder="请填写纬度" clearable />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="到期时间" prop="expirationTime">
|
|
|
- <el-date-picker
|
|
|
- v-model="drawerProps.row!.expirationTime"
|
|
|
- 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 type="password" v-model="drawerProps.row!.storePass" placeholder="请填写门店密码" clearable />
|
|
|
- </el-form-item> -->
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <el-button @click="drawerVisible = false"> 取消 </el-button>
|
|
|
- <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit"> 确定 </el-button>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts" name="UserDrawer">
|
|
|
-import { ref, reactive } from "vue";
|
|
|
-import { ElMessage, FormInstance } from "element-plus";
|
|
|
-import { StoreUser } from "@/api/interface";
|
|
|
-
|
|
|
-// 门店面积列表
|
|
|
-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: "500~1000平米" },
|
|
|
- { value: 6, label: "大于1000平米" }
|
|
|
-]);
|
|
|
-
|
|
|
-// 门店类型列表
|
|
|
-const storeTypeList = ref<any[]>([
|
|
|
- { value: "1", label: "中餐" },
|
|
|
- { value: "2", label: "烧烤" },
|
|
|
- { value: "3", label: "饮品" },
|
|
|
- { value: "4", label: "甜点" },
|
|
|
- { value: "5", label: "火锅" },
|
|
|
- { value: "6", label: "宵夜" },
|
|
|
- { value: "7", label: "西餐" },
|
|
|
- { value: "8", label: "轻食" },
|
|
|
- { value: "9", label: "水果" }
|
|
|
-]);
|
|
|
-
|
|
|
-// 门店状态列表
|
|
|
-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 rules = reactive({
|
|
|
- storeName: [{ required: true, message: "请填写商户名称" }],
|
|
|
- storeContact: [{ required: true, message: "请填写联系人" }],
|
|
|
- storePhone: [{ required: true, message: "请填写联系人电话" }],
|
|
|
- password: [{ required: true, message: "请填写密码" }],
|
|
|
- storeCapacity: [{ required: true, message: "请填写容纳人数" }],
|
|
|
- storeTel: [{ required: true, message: "请填写门店电话" }],
|
|
|
- isChain: [{ required: true, message: "请选择是否连锁" }],
|
|
|
- storeAddress: [{ 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: "请选择门店到期时间" }],
|
|
|
- storePass: [{ required: true, message: "请输入门店密码" }],
|
|
|
- storeArea: [{ required: true, message: "请选择门店面积" }]
|
|
|
-});
|
|
|
-
|
|
|
-interface DrawerProps {
|
|
|
- title: string;
|
|
|
- isView: boolean;
|
|
|
- row: Partial<StoreUser.ResStoreUserList>;
|
|
|
- api?: (params: any) => Promise<any>;
|
|
|
- getTableList?: () => void;
|
|
|
-}
|
|
|
-
|
|
|
-const drawerVisible = ref(false);
|
|
|
-const drawerProps = ref<DrawerProps>({
|
|
|
- isView: false,
|
|
|
- title: "",
|
|
|
- row: {}
|
|
|
-});
|
|
|
-
|
|
|
-// 接收父组件传过来的参数
|
|
|
-const acceptParams = (params: DrawerProps) => {
|
|
|
- if (params.row.updatedTime) {
|
|
|
- delete params.row.updatedTime;
|
|
|
- }
|
|
|
- if (params.row.createTime) {
|
|
|
- delete params.row.createTime;
|
|
|
- }
|
|
|
- drawerProps.value = params;
|
|
|
- drawerVisible.value = true;
|
|
|
-};
|
|
|
-
|
|
|
-// 提交数据(新增/编辑)
|
|
|
-const ruleFormRef = ref<FormInstance>();
|
|
|
-const handleSubmit = () => {
|
|
|
- ruleFormRef.value!.validate(async valid => {
|
|
|
- if (!valid) return;
|
|
|
- try {
|
|
|
- await drawerProps.value.api!(drawerProps.value.row);
|
|
|
- ElMessage.success({ message: `${drawerProps.value.title}用户成功!` });
|
|
|
- drawerProps.value.getTableList!();
|
|
|
- drawerVisible.value = false;
|
|
|
- } catch (error) {
|
|
|
- console.log(error);
|
|
|
- }
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-defineExpose({
|
|
|
- acceptParams
|
|
|
-});
|
|
|
-</script>
|