b2894lxlx/guofu-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化网站导航模块

Browse Source
This commit is contained in:
赵忠林
2024-08-23 22:28:24 +08:00
parent 1d81fa9270
commit 13832d9de0
964 changed files with 90774 additions and 31362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

613
modules/views/bak/school/components/merchantEdit.vue Normal file
View File

@@ -0,0 +1,613 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
:width="1000"
:visible="visible"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑场馆' : '添加场馆'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
:wrapper-col="
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="场馆图标" name="image">
<SelectFile
:placeholder="`请选择图片`"
:limit="1"
:data="images"
@done="chooseImage"
@del="onDeleteItem"
/>
</a-form-item>
<a-form-item label="场馆名称" name="merchantName">
<a-input
allow-clear
:maxlength="100"
placeholder="xxx场馆"
v-model:value="form.merchantName"
/>
</a-form-item>
<a-form-item label="场馆电话" name="phone">
<a-input
allow-clear
:maxlength="11"
placeholder="请输入场馆电话"
v-model:value="form.phone"
/>
</a-form-item>
<a-form-item label="负责人姓名" name="realName">
<a-input
allow-clear
:maxlength="100"
placeholder="请输入场馆负责人姓名"
v-model:value="form.realName"
/>
</a-form-item>
<a-form-item label="场馆类型" name="shopType">
<SelectMerchantType
:placeholder="`请选择场馆类型`"
v-model:value="form.shopType"
@done="chooseShopType"
/>
</a-form-item>
<a-form-item label="项目类型" name="itemType">
<ItemTypeForm v-model:value="select" />
<!-- <DictSelect-->
<!-- dict-code="ItemType"-->
<!-- :placeholder="`请选择项目类型`"-->
<!-- style="width: 120px"-->
<!-- v-model:value="form.itemType"-->
<!-- />-->
</a-form-item>
<a-form-item label="营业时间" name="businessTime">
<!-- <a-time-picker-->
<!-- v-model:value="form.timePeriod1"-->
<!-- format="HH:mm"-->
<!-- valueFormat="HH:mm"-->
<!-- />-->
<!-- - -->
<!-- <a-time-picker-->
<!-- v-model:value="form.timePeriod2"-->
<!-- format="HH:mm"-->
<!-- valueFormat="HH:mm"-->
<!-- />-->
<a-input
allow-clear
:maxlength="100"
placeholder="请选择营业时间"
v-model:value="form.businessTime"
/>
</a-form-item>
<a-form-item label="所属行业" name="category">
<industry-select
v-model:value="form.category"
valueField="label"
placeholder="请选择所属行业"
class="ele-fluid"
@change="onIndustry"
/>
</a-form-item>
<a-form-item label="场馆坐标" name="lngAndLat">
<div class="flex-sb">
<a-input
allow-clear
placeholder="请选择所在位置"
v-model:value="form.lngAndLat"
disabled
/>
<a-button
class="ele-btn-icon"
style="margin-left: 10px"
@click="openMapPicker"
>
打开地图位置选择器
</a-button>
</div>
</a-form-item>
<a-form-item label="场馆地址" name="address">
<a-input
allow-clear
:maxlength="100"
placeholder="请输入场馆地址"
v-model:value="form.address"
/>
</a-form-item>
<a-form-item label="每小时价格" name="price">
<a-input-number
:step="1"
:max="1000000"
:min="0.0"
:precision="2"
class="ele-fluid"
placeholder="请输入每小时价格"
v-model:value="form.price"
/>
</a-form-item>
<!-- <a-form-item label="手续费(%)" name="commission">-->
<!-- <a-input-number-->
<!-- :step="1"-->
<!-- :max="100"-->
<!-- :min="0.0"-->
<!-- :precision="2"-->
<!-- class="ele-fluid"-->
<!-- placeholder="请输入手续费"-->
<!-- v-model:value="form.commission"-->
<!-- />-->
<!-- </a-form-item>-->
<a-form-item label="关键字" name="keywords">
<a-select
v-model:value="form.keywords"
mode="tags"
placeholder="输入关键词后回车"
/>
</a-form-item>
<a-form-item label="场馆图片" name="files">
<SelectFile
:placeholder="`请选择图片`"
:limit="9"
:data="files"
@done="chooseFiles"
@del="onDeleteFiles"
/>
</a-form-item>
<a-form-item label="场馆介绍" name="content">
<!-- 编辑器 -->
<tinymce-editor
ref="editorRef"
class="content"
v-model:value="content"
:disabled="disabled"
:init="config"
placeholder="请输入场馆介绍内容"
/>
</a-form-item>
<a-form-item label="是否自营" name="ownStore">
<a-switch
checked-children="是"
un-checked-children="否"
:checked="form.ownStore === 1"
@update:checked="updateOwnStore"
/>
</a-form-item>
<a-form-item label="是否推荐" name="recommend">
<a-switch
checked-children="是"
un-checked-children="否"
:checked="form.recommend === 1"
@update:checked="updateRecommend"
/>
</a-form-item>
<a-form-item label="是否需要审核" name="goodsReview">
<a-switch
checked-children="是"
un-checked-children="否"
:checked="form.goodsReview === 1"
@update:checked="updateGoodsReview"
/>
</a-form-item>
<a-form-item label="状态" name="status">
<a-radio-group v-model:value="form.status">
<a-radio :value="0">显示</a-radio>
<a-radio :value="1">隐藏</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="排序号" name="sortNumber">
<a-input-number
:min="0"
:max="9999"
class="ele-fluid"
placeholder="请输入排序号"
v-model:value="form.sortNumber"
/>
</a-form-item>
<a-form-item label="备注" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入描述"
v-model:value="form.comments"
/>
</a-form-item>
</a-form>
</ele-modal>
<!-- 地图位置选择弹窗 -->
<ele-map-picker
:need-city="true"
:dark-mode="darkMode"
v-model:visible="showMap"
:center="[108.374959, 22.767024]"
:search-type="1"
:zoom="12"
@done="onDone"
/>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject, uuid } from 'ele-admin-pro';
import { addMerchant, listMerchant, updateMerchant } from "@/api/shop/merchant";
import { Merchant } from '@/api/shop/merchant/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FormInstance } from 'ant-design-vue/es/form';
import { FileRecord } from '@/api/system/file/model';
import { MerchantType } from '@/api/shop/merchantType/model';
import ItemTypeForm from './itemType.vue'
import { CenterPoint } from 'ele-admin-pro/es/ele-map-picker/types';
import { listRoles } from '@/api/system/role';
import TinymceEditor from '@/components/TinymceEditor/index.vue';
import { uploadOss } from '@/api/system/file';
import { Item } from "@/api/booking/item/model";
import { listItem } from "@/api/booking/item";
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive, darkMode } = storeToRefs(themeStore);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Merchant | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
const images = ref<ItemType[]>([]);
const files = ref<ItemType[]>([]);
const disabled = ref(false);
// 编辑器内容，双向绑定
const content = ref<any>('');
// 是否显示地图选择弹窗
const showMap = ref(false);
const select = ref<Item[]>([]);
// 用户信息
const form = reactive<Merchant>({
merchantId: undefined,
merchantName: undefined,
image: undefined,
phone: undefined,
realName: undefined,
shopType: undefined,
itemType: undefined,
category: undefined,
province: '',
city: '',
region: '',
address: '',
lngAndLat: '',
price: 0,
commission: 0,
keywords: undefined,
files: undefined,
businessTime: undefined,
content: '',
timePeriod1: undefined,
timePeriod2: undefined,
ownStore: undefined,
recommend: undefined,
goodsReview: 1,
comments: '',
adminUrl: '',
status: 0,
sortNumber: 100,
roleId: undefined,
roleName: '',
tenantId: undefined
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
merchantName: [
{
required: true,
type: 'string',
message: '请填写场馆名称',
trigger: 'blur'
}
],
category: [
{
required: true,
type: 'string',
message: '请填写场馆分类',
trigger: 'blur'
}
],
lngAndLat: [
{
required: true,
type: 'string',
message: '请填写场馆坐标',
trigger: 'blur'
}
],
businessTime: [
{
required: true,
type: 'string',
message: '请填营业时间',
trigger: 'blur'
}
],
realName: [
{
required: true,
type: 'string',
message: '请填写场馆姓名',
trigger: 'blur'
}
],
shopType: [
{
required: true,
type: 'string',
message: '请选择店铺类型',
trigger: 'blur'
}
],
phone: [
{
required: true,
message: '请输入场馆电话',
trigger: 'blur'
}
]
});
const chooseShopType = (data: MerchantType) => {
form.shopType = data.name;
};
const chooseImage = (data: FileRecord) => {
images.value.push({
uid: data.id,
url: data.path,
status: 'done'
});
form.image = data.path;
};
const onDeleteItem = (index: number) => {
images.value.splice(index, 1);
form.image = '';
};
const chooseFiles = (data: FileRecord) => {
files.value.push({
uid: data.id,
url: data.path,
status: 'done'
});
};
/* 打开位置选择 */
const openMapPicker = () => {
showMap.value = true;
};
/* 地图选择后回调 */
const onDone = (location: CenterPoint) => {
// city.value = [
// `${location.city?.province}`,
// `${location.city?.city}`,
// `${location.city?.district}`
// ];
form.province = `${location.city?.province}`;
form.city = `${location.city?.city}`;
form.region = `${location.city?.district}`;
form.address = `${location.address}`;
form.lngAndLat = `${location.lng},${location.lat}`;
showMap.value = false;
};
const onDeleteFiles = (index: number) => {
files.value.splice(index, 1);
};
const updateOwnStore = (value: boolean) => {
form.ownStore = value ? 1 : 0;
};
const updateRecommend = (value: boolean) => {
form.recommend = value ? 1 : 0;
};
const updateGoodsReview = (value: boolean) => {
form.goodsReview = value ? 1 : 0;
};
const onIndustry = (item: any) => {
form.category = item[0] + '/' + item[1];
};
const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
const config = ref({
height: 450,
images_upload_handler: (blobInfo, success, error) => {
const file = blobInfo.blob();
const formData = new FormData();
formData.append('file', file, file.name);
uploadOss(file)
.then((res) => {
success(res.path);
})
.catch((msg) => {
error(msg);
});
},
// 自定义文件上传(这里使用把选择的文件转成 blob 演示)
file_picker_callback: (callback: any, _value: any, meta: any) => {
const input = document.createElement('input');
input.setAttribute('type', 'file');
// 设定文件可选类型
if (meta.filetype === 'image') {
input.setAttribute('accept', 'image/*');
} else if (meta.filetype === 'media') {
input.setAttribute('accept', 'video/*,.pdf');
}
input.onchange = () => {
const file = input.files?.[0];
if (!file) {
return;
}
if (meta.filetype === 'media') {
if (file.size / 1024 / 1024 > 200) {
editorRef.value?.alert({ content: '大小不能超过 200MB' });
return;
}
if (file.type.startsWith('application/pdf')) {
uploadOss(file).then((res) => {
const addPath = `<a href="${res.downloadUrl}" target="_blank">${res.name}</a>`;
content.value = content.value + addPath;
});
return;
}
if (!file.type.startsWith('video/')) {
editorRef.value?.alert({ content: '只能选择视频文件' });
return;
}
uploadOss(file).then((res) => {
callback(res.path);
});
}
// const reader = new FileReader();
// reader.onload = (e) => {
// if (e.target?.result != null) {
// const blob = new Blob([e.target.result], { type: file.type });
// callback(URL.createObjectURL(blob));
// }
// };
// reader.readAsArrayBuffer(file);
};
input.click();
}
});
const { resetFields } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const formData = {
...form,
content: content.value,
keywords: JSON.stringify(form.keywords),
files: JSON.stringify(files.value),
itemType: select.value?.map((d) => d.id).join(',')
};
const saveOrUpdate = isUpdate.value ? updateMerchant : addMerchant;
saveOrUpdate(formData)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
images.value = [];
files.value = [];
select.value = [];
content.value = '';
if (props.data) {
isUpdate.value = true;
assignObject(form, props.data);
if (form.content) {
content.value = form.content;
}
if (props.data.image) {
images.value.push({
uid: uuid(),
url: props.data.image,
status: 'done'
});
}
if (props.data.files) {
const arr = JSON.parse(props.data.files);
arr.map((item) => {
files.value.push({
uid: uuid(),
url: item.url,
status: 'done'
});
});
}
if (props.data.keywords) {
form.keywords = JSON.parse(props.data.keywords);
}
if (props.data.itemType) {
listItem({ ids: props.data.itemType }).then((list) => {
select.value = list;
});
}
} else {
isUpdate.value = false;
}
// 获取场馆管理员的roleId
listRoles({ roleCode: 'merchant' }).then((res) => {
form.roleId = res[0].roleId;
form.roleName = res[0].roleName;
form.tenantId = Number(localStorage.getItem('TenantId'));
});
} else {
content.value = '';
resetFields();
}
},
{ immediate: true }
);
</script>
<style lang="less" scoped>
.flex-sb {
display: flex;
justify-content: space-between;
}
</style>