net/shop_template_back
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat 添加配送模板管理，树形穿梭框

Browse Source
This commit is contained in:
lwh 2023-06-17 21:07:56 +08:00
parent c1cde31d77
commit 4daa9c3d57
11 changed files with 866 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -24,8 +24,10 @@
"axios": "^0.27.2",
"countup.js": "^2.1.0",
"echarts": "5.2.2",
"el-tree-transfer": "^2.4.7",
"element-china-area-data": "^6.0.2",
"element-plus": "^2.3.2",
"element-tree-transfer-pro": "^1.0.5",
"file-saver": "2.0.5",
"fuse.js": "6.4.6",
"highlight.js": "^11.5.1",

12
src/api/business/Custom/Regions/region.js
View File

@ -12,6 +12,18 @@ export function regionTreeList(query) {
})
}
/**
* 省市区数据表树形查询列表(二级)
* @param {查询条件} data
*/
export function getSecondRegionTreeList(query) {
return request({
url: '/business/Region/getSecondRegionTreeList',
method: 'get',
params: query
})
}
// 省市区数据表新增或修改
export function addOrUpdateRegion(data) {
return request({

11
src/api/business/LogisticsManage/Deliverys/delivery.js
View File

@ -18,6 +18,17 @@ export function deliveryList(query) {
})
}
// 获取配送模板的配送区域和运费列表
export function getDeliveryRuleList(query) {
return request({
url: '/business/Delivery/getDeliveryRuleList',
method: 'get',
params: query
})
}
// 配送模板新增或修改
export function addOrUpdateDelivery(data) {
return request({

10
src/assets/styles/login.scss
View File

@ -16,6 +16,7 @@
width: 835px;
height: 776px;
z-index: 99;
animation: ani 1.5s;
}
.login-img-box img{
@ -23,6 +24,15 @@
height: 100%;
}
@keyframes ani {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@media (max-width:1200px) {
.login-img-box{
display: none;

226
src/components/TreeTransfer/index.vue Normal file
View File

@ -0,0 +1,226 @@
<template>
<div class="treeTransfer">
<div class="rightTree">
<div class="treeTit">
{{ props.leftTit || "左侧栏：" }}
<div>
<el-link type="primary" @click="toggleSelectAllLeft()">全选 / 取消全选</el-link>
</div>
</div>
<div class="list">
<el-input style="margin-bottom: 10px;" v-model="searchKeyword" :placeholder=props.searchPlaceholder clearable
:change="handleQueryLeft()" />
<el-scrollbar>
<el-tree ref="treeRef" :data="props.fromData" show-checkbox :node-key="props.nodeKey"
highlight-current />
</el-scrollbar>
</div>
</div>
<div class="btnDiv">
<div class="mg10" @click="toRight()">
<el-button :icon="ArrowRight" circle />
</div>
<div class="mg10" @click="toLeft()">
<el-button :icon="ArrowLeft" circle />
</div>
</div>
<div class="leftTree">
<div class="treeTit">
{{ props.rightTit || "右侧栏：" }}
<el-link type="primary" @click="selectAllItems()">全选 / 取消全选</el-link>
</div>
<div class="list leftList">
<el-scrollbar>
<el-checkbox-group v-model="modelGroup">
<div v-for="(item, index) in toData" :key="index">
<el-checkbox :label="item.id">{{ item.label }}</el-checkbox>
</div>
</el-checkbox-group>
</el-scrollbar>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import {
ref,
reactive,
onMounted,
nextTick,
computed,
watch,
} from "vue";
import { ArrowRight, ArrowLeft } from "@element-plus/icons-vue";
import { cloneDeep } from "lodash";
const props = defineProps([
"nodeKey",
"fromData",
"propToData",
"defaultProps",
"leftTit",
"rightTit",
"searchPlaceholder",
]);
const emit = defineEmits(["checkVal"]);
const treeRef = ref();
const searchKeyword = ref('');
//右侧数据
const toData= ref([]);
const modelGroup = ref([]);
onMounted(() => {
if (props.propToData.length > 0) {
toData.value = cloneDeep(props.propToData);
console.log("toData.value: ", toData.value);
treeRef.value.setCheckedKeys([], false);
}
});
watch(
() => props.propToData,
() => {
console.log("那边的传值: ", props.propToData);
toData.value = cloneDeep(props.propToData);
treeRef.value.setCheckedKeys([], false);
}
);
//去右边
const toRight = () => {
const checkNodes = treeRef.value
.getCheckedNodes(false, false)
.filter((fil) => !fil.children);
const newArr = toData.value.concat(checkNodes);
let obj = {};
let peon = newArr.reduce((cur, next) => {
obj[next[props.nodeKey]]
? ""
: (obj[next[props.nodeKey]] = true && cur.push(next));
return cur;
}, []);
toData.value = peon;
treeRef.value.setCheckedKeys([], false);
modelGroup.value = [];
checkVal();
};
//去左边
const toLeft = () => {
for (var i = 0; i < toData.value.length; i++) {
if (modelGroup.value.includes(toData.value[i].id)) {
toData.value.splice(i, 1);
i -= 1;
}
}
checkVal();
};
//返回父组件
const checkVal = () => {
emit("checkVal", toData.value);
};
// 获取所有节点的 key
const getAllKeys = (nodes) => {
const keys = [];
for (const node of nodes) {
keys.push(node[props.nodeKey]);
if (node.children && node.children.length > 0) {
keys.push(...getAllKeys(node.children));
}
}
return keys;
};
// 全选/取消全选按钮点击事件处理
const toggleSelectAllLeft = () => {
const treeInstance = treeRef.value;
if (treeInstance) {
const allKeys = getAllKeys(props.fromData);
const checkedKeys = treeInstance.getCheckedKeys();
const isAllSelected = allKeys.every(key => checkedKeys.includes(key));
const targetKeys = isAllSelected ? [] : allKeys;
treeInstance.setCheckedKeys(targetKeys);
}
};
// 全选按钮的点击事件处理函数
const selectAllItems = () => {
if (modelGroup.value.length === toData.value.length) {
// 如果已经全部选中，则取消选中全部节点
modelGroup.value = [];
} else {
// 否则选中全部节点
modelGroup.value = toData.value.map(item => item.id);
}
};
// 搜索数据源
function handleQueryLeft() {
// selectChild(searchKeyword.value,props.fromData,props.fromData)
}
// 树形搜索
// function selectChild(str, tag, res, parent) {
// for (let item of tag) {
// if (item.label.indexOf(str) !== -1) {
// if (parent) {
// res.push(parent)
// } else {
// res.push(item)
// }
// } else if (item.children && item.children.length) {
// selectChild(str, item.children, res, parent || item)
// }
// }
// }
</script>
<style lang="scss">
.treeTransfer {
display: flex;
justify-content: space-between;
.mg10 {
margin: 10px;
}
.leftTree,
.rightTree {
flex-grow: 1;
width: calc((100% - 60px) / 2);
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
padding-bottom: 20px;
.treeTit {
line-height: 32px;
color: rgba(0, 0, 0, 0.85);
// background: #e3e7ee;
padding: 0 20px;
display: flex;
justify-content: space-between;
}
.list {
height: 500px;
padding: 15px 10px 24px 40px;
}
}
.btnDiv {
width: 60px;
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
}
</style>

32
src/utils/deepCopy.js Normal file
View File

@ -0,0 +1,32 @@
/**
* 实现深克隆---对象/数组
* @param { Array / Object } target 需要复制的数组或对象
*/
export const deepCopy = (target) => {
// 判断拷贝的数据类型
let result
let targetType = _checkedType(target)
if (targetType === 'Object') {
result = {}
} else if (targetType === 'Array') {
result = []
} else {
return target
}
// 遍历目标数据
for (let i in target) {
let value = target[i]
// 判断目标结构里的每一值是否存在对象/数组
if (_checkedType(value) === 'Object' || _checkedType(value) === 'Array') {
result[i] = deepCopy(value)
} else {
result[i] = value
}
}
return result
}
// 定义检测数据类型的功能函数
const _checkedType = (target) => {
return Object.prototype.toString.call(target).slice(8, -1)
}

186
src/views/business/LogisticsManage/Deliverys/components/AddDialog.vue
View File

@ -7,12 +7,12 @@
* @LastEditTime: (2023-06-16)
-->
<template>
<el-dialog v-model="props.modelValue" title="添加配送模板信息" width="900px" @closed="closeDialog" @open="openDialog">
<el-dialog v-model="props.modelValue" title="添加配送模板信息" width="1250px" @closed="closeDialog" @open="openDialog">
<el-form ref="formRef" :model="formData" :rules="rules">
<el-row v-if="userid == 1">
<el-col :lg="12">
<el-row >
<el-col v-if="userid == 1" :lg="12">
<el-form-item :label-width="labelWidth" label="店铺" prop="shopGuid">
<el-input v-model='formData.shopName' disabled type="text" placeholder='点击选择店铺'>
<template #append>
@ -21,23 +21,68 @@
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="模板名称" prop="deliveryName">
<el-input v-model="formData.deliveryName" placeholder="请输入模板名称" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="计费方式" prop="deliveryBillingMethod">
<el-radio-group v-model="formData.deliveryBillingMethod">
<el-radio v-for="item in charging_methods " :key="item.dictValue" :label="parseInt(item.dictValue)">{{
item.dictLabel }}</el-radio>
<el-radio v-for="item in charging_methods " :key="item.dictValue" :label="parseInt(item.dictValue)"
@change="onChangeType">{{
item.dictLabel }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item :label-width="labelWidth + 20" label="配送区域及运费" prop="">
<el-table :data="deliveryRuleDataList" border style="width: 100%">
<el-table-column prop="deliveryRuleRegionText" label="可配送区域" width="350">
<template #default="scope">
<el-row style="width: 100%">
<el-col :span="24">
<div class="mr-5">{{ scope.row.deliveryRuleRegionText }}</div>
</el-col>
</el-row>
<el-row class="deliveryRuleEdit">
<el-link type="primary" style="margin-right: 10px;"
@click="handleDeliveryRuleEdit(scope.row)">编辑</el-link>
<el-link type="primary" @click="handleDeliveryRuleDelete(scope.row)">删除</el-link>
</el-row>
</template>
</el-table-column>
<el-table-column prop="deliveryRuleFirst" :label=deliveryRuleFirstTitle>
<template #default="scope">
<el-input-number v-if="formData.deliveryBillingMethod == 1" v-model.number="scope.row.deliveryRuleFirst" controls-position="right" :min="0" />
<el-input-number v-else v-model.number="scope.row.deliveryRuleFirst" controls-position="right" :min="0" :precision="2"/>
</template>
</el-table-column>
<el-table-column prop="deliveryRuleFirstFee" label=" 运费(元)">
<template #default="scope">
<el-input-number v-model.number="scope.row.deliveryRuleFirstFee" controls-position="right" :min="0" :precision="2" />
</template>
</el-table-column>
<el-table-column prop="deliveryRuleAdditional" :label=deliveryRuleAdditionalTitle>
<template #default="scope">
<el-input-number v-if="formData.deliveryBillingMethod == 1" v-model.number="scope.row.deliveryRuleAdditional" controls-position="right" :min="0" />
<el-input-number v-else v-model.number="scope.row.deliveryRuleAdditional" controls-position="right" :min="0" :precision="2"/>
</template>
</el-table-column>
<el-table-column prop="deliveryRuleAdditionalFee" label="续费(元)">
<template #default="scope">
<el-input-number v-model.number="scope.row.deliveryRuleAdditionalFee" controls-position="right"
:min="0" :precision="2"/>
</template>
</el-table-column>
</el-table>
<el-button style="margin-top: 10px;" plain icon="Location"
@click="hanldeDeliveryRule()">点击添加配送区域及运费</el-button>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="排序" prop="deliverySort">
<el-input-number v-model.number="formData.deliverySort" controls-position="right" :min="0" />
@ -57,16 +102,21 @@
<!-- 选择店铺 -->
<ChooseShopDialog v-model="ChooseShopDialogVisible" :data="ChooseShopDialogRow"></ChooseShopDialog>
<!-- 选择配送区域及运费 -->
<RegionTranser v-model="DeliveryRuleDialogVisible" :data="DeliveryRuleDialogRow" :done="handleAddRegionRule">
</RegionTranser>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import modal from '@/plugins/modal.js'
import useUserStore from '@/store/modules/user'
import { addOrUpdateDelivery } from '@/api/business/LogisticsManage/Deliverys/delivery.js';
import ChooseShopDialog from './ChooseShopDialog.vue';
import RegionTranser from './RegionTranser.vue';
// 打开弹窗时回调
const openDialog = async () => {
@ -75,6 +125,8 @@ const openDialog = async () => {
}
// -业务参数
const userid = useUserStore().userId
// 计费方式字典选项列表
@ -82,8 +134,27 @@ const charging_methods = ref([]);
// 选择店铺弹窗参数
const ChooseShopDialogVisible = ref(false);
const ChooseShopDialogRow = ref({});
// 选择配送区域弹窗参数
const DeliveryRuleDialogVisible = ref(false);
const DeliveryRuleDialogRow = ref({});
// 配送区域和运费参数
const deliveryRuleFirstTitle = ref("首件 (个)")
const deliveryRuleAdditionalTitle = ref("续件 (个)")
const deliveryRuleDataList = ref([
// {
// deliveryRuleRegionText: '北京 天津 河北省 山西省 内蒙古自治区 辽宁省 吉林省 黑龙江省 上海 江苏省 浙江省 安徽省 福建省 江西省 山东省 河南省 湖北省 湖南省 广东省 广西壮族自治区 海南省 重庆 四川省 贵州省 云南省 陕西省 甘肃省 青海省 宁夏回族自治区',
// deliveryRuleFirst: 1,
// deliveryRuleFirstFee: 0,
// deliveryRuleAdditional: 0,
// deliveryRuleAdditionalFee: 0
// },
])
// -业务方法
// 字典获取
async function getcharging_methods() {
await proxy.getDicts('charging_methods').then((res) => {
@ -91,12 +162,75 @@ async function getcharging_methods() {
})
}
// 选择计费方式
const onChangeType = (e) => {
if (e === 1) {
deliveryRuleFirstTitle.value = "首件 (个)"
deliveryRuleAdditionalTitle.value = "续件 (个)"
}
if (e === 2) {
deliveryRuleFirstTitle.value = "首重 (Kg)"
deliveryRuleAdditionalTitle.value = "续重 (Kg)"
}
}
// 打开选择店铺弹窗
const handleChooseShop = () => {
ChooseShopDialogVisible.value = true
ChooseShopDialogRow.value = formData
}
// 打开选择配送区域弹窗
const hanldeDeliveryRule = () => {
formData.deliveryRuleRegion = []
DeliveryRuleDialogVisible.value = true
DeliveryRuleDialogRow.value = formData
}
// 选择配送区域(回调)
const handleAddRegionRule = () => {
let deliveryRuleRegionText = formData.deliveryRuleRegionText
let deliveryRuleRegion = formData.deliveryRuleRegion
// console.log(formData,'添加表单');
let deliveryRuleData = {
deliveryRuleRegionText: deliveryRuleRegionText,
deliveryRuleRegion: deliveryRuleRegion,
deliveryRuleFirst: 1,
deliveryRuleFirstFee: 0,
deliveryRuleAdditional: 0,
deliveryRuleAdditionalFee: 0
}
deliveryRuleDataList.value.push(deliveryRuleData)
}
// 编辑配送区域及运费
const handleDeliveryRuleEdit = (row) => {
DeliveryRuleDialogVisible.value = true
DeliveryRuleDialogRow.value = row
}
// 删除配送区域及运费
const handleDeliveryRuleDelete = (row) => {
ElMessageBox.confirm("是否确认删除？", "系统提示", {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning",
})
.then(() => {
const index = deliveryRuleDataList.value.indexOf(row);
if (index !== -1) {
deliveryRuleDataList.value.splice(index, 1);
}
modal.msgSuccess("删除成功")
})
.catch(() => { })
}
// -基础参数
const labelWidth = 100;
@ -104,6 +238,9 @@ const formRef = ref();
const { proxy } = getCurrentInstance()
const emits = defineEmits(["update:modelValue"]);
const formData = reactive({
deliveryBillingMethod: 1,
deliverySort: 100,
deliveryRuleRegion: []
});
const props = defineProps({
modelValue: Boolean,
@ -115,8 +252,7 @@ const imgData = ref({
// 验证
const rules = reactive({
deliveryGuid: [{ required: true, message: "不能为空", trigger: "blur", type: "number" }],
shopGuid: [{ required: true, message: "店铺guid不能为空", trigger: "blur", type: "number" }],
shopGuid: [{ required: true, message: "店铺不能为空", trigger: "blur"}],
deliveryName: [{ required: true, message: "模板名称不能为空", trigger: "blur" }],
deliveryBillingMethod: [{ required: true, message: "计费方式不能为空", trigger: "blur", type: "number" }],
deliverySort: [{ required: true, message: "排序不能为空", trigger: "blur", type: "number" }],
@ -132,6 +268,18 @@ const handleAddClick = async (formEl) => {
return;
}
if(deliveryRuleDataList.value.length <= 0){
modal.msgError("请添加配送区域及运费")
return
}
deliveryRuleDataList.value.map((item) => {
const transformedRegion = item.deliveryRuleRegion.map((regionItem) => regionItem.id);
item.deliveryRuleRegion = transformedRegion.join(',');
});
formData.deliveryRuleDataList = deliveryRuleDataList.value
// console.log(formData, '表单');
const { code } = await addOrUpdateDelivery(formData);
if (code == 200) {
@ -141,6 +289,12 @@ const handleAddClick = async (formEl) => {
});
};
const closeDialog = () => {
formData.shopName = ""
formData.deliveryRuleRegionText = ""
formData.deliveryRuleRegion = []
formData.deliveryRuleDataList = []
deliveryRuleDataList.value = []
handleResetClick(formRef.value);
props.done();
emits("update:modelValue", false);
@ -149,4 +303,12 @@ const handleResetClick = async (formEl) => {
if (!formEl) return;
formEl.resetFields();
};
</script>
</script>
<style>
.deliveryRuleEdit {
display: flex;
justify-content: right;
}
</style>

134
src/views/business/LogisticsManage/Deliverys/components/DetailDialog.vue
View File

@ -6,46 +6,83 @@
* @LastEditors: (黎文豪)
* @LastEditTime: (2023-06-16)
-->
<template>
<el-dialog v-model="props.modelValue" title="配送模板信息详情" width="900px" @closed="closeDialog" @open="openDialog">
<template>
<el-dialog v-model="props.modelValue" title="配送模板信息详情" width="1250px" @closed="closeDialog" @open="openDialog">
<el-form ref="formRef" :model="formData" :disabled="true">
<el-row :gutter="20">
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="店铺guid" >
<el-input v-model="formData.shopGuid" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="模板名称" >
<el-input v-model="formData.deliveryName" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="计费方式" >
<el-radio-group v-model="formData.deliveryBillingMethod">
<el-radio v-for="item in charging_methods " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="排序" >
<el-input-number v-model.number="formData.deliverySort" controls-position="right" :precision="2" />
</el-form-item>
</el-col>
<el-row >
<el-col v-if="userid == 1" :lg="12">
<el-form-item :label-width="labelWidth" label="店铺" prop="shopGuid">
<el-input v-model='formData.shopName' disabled type="text">
</el-input>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="模板名称" prop="deliveryName">
<el-input v-model="formData.deliveryName" placeholder="请输入模板名称" />
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="计费方式" prop="deliveryBillingMethod">
<el-radio-group v-model="formData.deliveryBillingMethod">
<el-radio v-for="item in charging_methods " :key="item.dictValue" :label="parseInt(item.dictValue)"
>{{
item.dictLabel }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item :label-width="labelWidth + 20" label="配送区域及运费" prop="">
<el-table :data="deliveryRuleDataList" border style="width: 100%">
<el-table-column prop="deliveryRuleRegionText" label="可配送区域" width="350">
<template #default="scope">
<el-row style="width: 100%">
<el-col :span="24">
<div class="mr-5">{{ scope.row.deliveryRuleRegionText }}</div>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column prop="deliveryRuleFirst" :label=deliveryRuleFirstTitle>
<template #default="scope">
<el-input-number v-if="formData.deliveryBillingMethod == 1" v-model.number="scope.row.deliveryRuleFirst"
controls-position="right" :min="0" />
<el-input-number v-else v-model.number="scope.row.deliveryRuleFirst" controls-position="right" :min="0"
:precision="2" />
</template>
</el-table-column>
<el-table-column prop="deliveryRuleFirstFee" label=" 运费(元)">
<template #default="scope">
<el-input-number v-model.number="scope.row.deliveryRuleFirstFee" controls-position="right" :min="0"
:precision="2" />
</template>
</el-table-column>
<el-table-column prop="deliveryRuleAdditional" :label=deliveryRuleAdditionalTitle>
<template #default="scope">
<el-input-number v-if="formData.deliveryBillingMethod == 1"
v-model.number="scope.row.deliveryRuleAdditional" controls-position="right" :min="0" />
<el-input-number v-else v-model.number="scope.row.deliveryRuleAdditional" controls-position="right"
:min="0" :precision="2" />
</template>
</el-table-column>
<el-table-column prop="deliveryRuleAdditionalFee" label="续费(元)">
<template #default="scope">
<el-input-number v-model.number="scope.row.deliveryRuleAdditionalFee" controls-position="right" :min="0"
:precision="2" />
</template>
</el-table-column>
</el-table>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="排序" prop="deliverySort">
<el-input-number v-model.number="formData.deliverySort" controls-position="right" :min="0" />
</el-form-item>
</el-col>
</el-row>
</el-form>
@ -55,11 +92,14 @@
<script setup>
import { ElMessage } from 'element-plus'
import { reactive, ref, watch } from "vue";
import { getDeliveryRuleList } from "@/api/business/LogisticsManage/Deliverys/delivery.js";
import useUserStore from '@/store/modules/user'
// 打开弹窗时回调
const openDialog = async () => {
await getcharging_methods()
await getcharging_methods()
await getdeliveryRuleDataListFun()
}
@ -74,6 +114,18 @@ watch(props, async (v) => {
// 计费方式字典选项列表
const charging_methods = ref([]);
const userid = useUserStore().userId
// 选择配送区域弹窗参数
const DeliveryRuleDialogVisible = ref(false);
const DeliveryRuleDialogRow = ref({});
// 配送区域和运费参数
const deliveryRuleFirstTitle = ref("首件 (个)")
const deliveryRuleAdditionalTitle = ref("续件 (个)")
const deliveryRuleDataList = ref([])
// -业务方法
// 字典获取
async function getcharging_methods() {
@ -82,6 +134,18 @@ async function getcharging_methods() {
})
}
// 获取配送模板的配送区域和运费列表
async function getdeliveryRuleDataListFun() {
getDeliveryRuleList({ deliveryGuid: formData.value.deliveryGuid }).then((res) => {
if (res.code == 200) {
deliveryRuleDataList.value = res.data
deliveryRuleDataList.value.map((item) => {
item.deliveryRuleRegion = item.deliveryRuleRegion == null ? [] : item.deliveryRuleRegion
})
}
})
}
// 基础参数

226
src/views/business/LogisticsManage/Deliverys/components/EditDialog.vue
View File

@ -7,44 +7,89 @@
* @LastEditTime: (2023-06-16)
-->
<template>
<el-dialog v-model="props.modelValue" title="修改配送模板信息" width="900px" @closed="closeDialog" @open="openDialog">
<el-dialog v-model="props.modelValue" title="修改配送模板信息" width="1250px" @closed="closeDialog" @open="openDialog">
<el-form ref="formRef" :model="formData" :rules="rules">
<el-row :gutter="20">
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="店铺guid" prop="shopGuid">
<el-input v-model="formData.shopGuid" placeholder="请输入店铺guid" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="模板名称" prop="deliveryName">
<el-input v-model="formData.deliveryName" placeholder="请输入模板名称" />
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="计费方式" prop="deliveryBillingMethod">
<el-radio-group v-model="formData.deliveryBillingMethod">
<el-radio v-for="item in charging_methods " :key="item.dictValue" :label="parseInt(item.dictValue)">{{item.dictLabel}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="排序" prop="deliverySort">
<el-input-number v-model.number="formData.deliverySort" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-row >
<el-col v-if="userid == 1" :lg="12">
<el-form-item :label-width="labelWidth" label="店铺" prop="shopGuid">
<el-input v-model='formData.shopName' disabled type="text">
</el-input>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="模板名称" prop="deliveryName">
<el-input v-model="formData.deliveryName" placeholder="请输入模板名称" />
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="计费方式" prop="deliveryBillingMethod">
<el-radio-group v-model="formData.deliveryBillingMethod">
<el-radio v-for="item in charging_methods " :key="item.dictValue" :label="parseInt(item.dictValue)"
@change="onChangeType">{{
item.dictLabel }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :lg="24">
<el-form-item :label-width="labelWidth + 20" label="配送区域及运费" prop="">
<el-table :data="deliveryRuleDataList" border style="width: 100%">
<el-table-column prop="deliveryRuleRegionText" label="可配送区域" width="350">
<template #default="scope">
<el-row style="width: 100%">
<el-col :span="24">
<div class="mr-5">{{ scope.row.deliveryRuleRegionText }}</div>
</el-col>
</el-row>
<el-row class="deliveryRuleEdit">
<el-link type="primary" style="margin-right: 10px;"
@click="handleDeliveryRuleEdit(scope.row)">编辑</el-link>
<el-link type="primary" @click="handleDeliveryRuleDelete(scope.row)">删除</el-link>
</el-row>
</template>
</el-table-column>
<el-table-column prop="deliveryRuleFirst" :label=deliveryRuleFirstTitle>
<template #default="scope">
<el-input-number v-if="formData.deliveryBillingMethod == 1"
v-model.number="scope.row.deliveryRuleFirst" controls-position="right" :min="0" />
<el-input-number v-else v-model.number="scope.row.deliveryRuleFirst" controls-position="right" :min="0"
:precision="2" />
</template>
</el-table-column>
<el-table-column prop="deliveryRuleFirstFee" label=" 运费(元)">
<template #default="scope">
<el-input-number v-model.number="scope.row.deliveryRuleFirstFee" controls-position="right" :min="0"
:precision="2" />
</template>
</el-table-column>
<el-table-column prop="deliveryRuleAdditional" :label=deliveryRuleAdditionalTitle>
<template #default="scope">
<el-input-number v-if="formData.deliveryBillingMethod == 1"
v-model.number="scope.row.deliveryRuleAdditional" controls-position="right" :min="0" />
<el-input-number v-else v-model.number="scope.row.deliveryRuleAdditional" controls-position="right"
:min="0" :precision="2" />
</template>
</el-table-column>
<el-table-column prop="deliveryRuleAdditionalFee" label="续费(元)">
<template #default="scope">
<el-input-number v-model.number="scope.row.deliveryRuleAdditionalFee" controls-position="right" :min="0"
:precision="2" />
</template>
</el-table-column>
</el-table>
<el-button style="margin-top: 10px;" plain icon="Location"
@click="hanldeDeliveryRule()">点击添加配送区域及运费</el-button>
</el-form-item>
</el-col>
<el-col :lg="12">
<el-form-item :label-width="labelWidth" label="排序" prop="deliverySort">
<el-input-number v-model.number="formData.deliverySort" controls-position="right" :min="0" />
</el-form-item>
</el-col>
</el-row>
</el-form>
@ -56,19 +101,25 @@
</div>
</template>
</el-dialog>
<!-- 选择配送区域及运费 -->
<RegionTranser v-model="DeliveryRuleDialogVisible" :data="DeliveryRuleDialogRow" :done="handleAddRegionRule">
</RegionTranser>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import modal from '@/plugins/modal.js'
import { reactive, ref, watch } from "vue";
import { addOrUpdateDelivery } from "@/api/business/LogisticsManage/Deliverys/delivery.js";
import useUserStore from '@/store/modules/user'
import { getDeliveryRuleList, addOrUpdateDelivery } from "@/api/business/LogisticsManage/Deliverys/delivery.js";
import RegionTranser from './RegionTranser.vue';
// 打开弹窗时回调
const openDialog = async () => {
await getcharging_methods()
await getcharging_methods()
await getdeliveryRuleDataListFun()
}
const formData = ref({
@ -76,13 +127,25 @@ const formData = ref({
});
watch(props, async (v) => {
formData.value = v.data;
});
// 业务参数
const userid = useUserStore().userId
// 计费方式字典选项列表
const charging_methods = ref([]);
// 选择配送区域弹窗参数
const DeliveryRuleDialogVisible = ref(false);
const DeliveryRuleDialogRow = ref({});
// 配送区域和运费参数
const deliveryRuleFirstTitle = ref("首件 (个)")
const deliveryRuleAdditionalTitle = ref("续件 (个)")
const deliveryRuleDataList = ref([])
// -业务方法
//字典获取
async function getcharging_methods() {
@ -91,6 +154,77 @@ async function getcharging_methods() {
})
}
// 获取配送模板的配送区域和运费列表
async function getdeliveryRuleDataListFun() {
getDeliveryRuleList({ deliveryGuid: formData.value.deliveryGuid }).then((res) => {
if (res.code == 200) {
deliveryRuleDataList.value = res.data
deliveryRuleDataList.value.map((item) => {
item.deliveryRuleRegion = item.deliveryRuleRegion == null ? [] : item.deliveryRuleRegion
})
}
})
}
// 选择计费方式
const onChangeType = (e) => {
if (e === 1) {
deliveryRuleFirstTitle.value = "首件 (个)"
deliveryRuleAdditionalTitle.value = "续件 (个)"
}
if (e === 2) {
deliveryRuleFirstTitle.value = "首重 (Kg)"
deliveryRuleAdditionalTitle.value = "续重 (Kg)"
}
}
// 打开选择配送区域弹窗
const hanldeDeliveryRule = () => {
formData.value.deliveryRuleRegion = []
DeliveryRuleDialogVisible.value = true
DeliveryRuleDialogRow.value = formData.value
}
// 选择配送区域(回调)
const handleAddRegionRule = () => {
let deliveryRuleRegionText = formData.value.deliveryRuleRegionText
let deliveryRuleRegion = formData.value.deliveryRuleRegion
let deliveryRuleData = {
deliveryRuleRegionText: deliveryRuleRegionText,
deliveryRuleRegion: deliveryRuleRegion,
deliveryRuleFirst: 1,
deliveryRuleFirstFee: 0,
deliveryRuleAdditional: 0,
deliveryRuleAdditionalFee: 0,
deliveryGuid: ""
}
deliveryRuleDataList.value.push(deliveryRuleData)
}
// 编辑配送区域及运费
const handleDeliveryRuleEdit = (row) => {
DeliveryRuleDialogVisible.value = true
DeliveryRuleDialogRow.value = row
}
// 删除配送区域及运费
const handleDeliveryRuleDelete = (row) => {
ElMessageBox.confirm("是否确认删除？", "系统提示", {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning",
})
.then(() => {
const index = deliveryRuleDataList.value.indexOf(row);
if (index !== -1) {
deliveryRuleDataList.value.splice(index, 1);
}
modal.msgSuccess("删除成功")
})
.catch(() => { })
}
// -基础参数
@ -110,11 +244,9 @@ const imgData = ref({
// 验证
const rules = reactive({
deliveryGuid: [{ required: true, message: "不能为空", trigger: "blur", type: "number" }],
shopGuid: [{ required: true, message: "店铺guid不能为空", trigger: "blur", type: "number" }],
deliveryName: [{ required: true, message: "模板名称不能为空", trigger: "blur" }],
deliveryBillingMethod: [{ required: true, message: "计费方式不能为空", trigger: "blur", type: "number" }],
deliverySort: [{ required: true, message: "排序不能为空", trigger: "blur", type: "number" }],
deliveryName: [{ required: true, message: "模板名称不能为空", trigger: "blur" }],
deliveryBillingMethod: [{ required: true, message: "计费方式不能为空", trigger: "blur", type: "number" }],
deliverySort: [{ required: true, message: "排序不能为空", trigger: "blur", type: "number" }],
});
// -基础方法
@ -126,6 +258,18 @@ const handleEditClick = async (formEl) => {
return;
}
if (deliveryRuleDataList.value.length <= 0) {
modal.msgError("请添加配送区域及运费")
return
}
deliveryRuleDataList.value.map((item) => {
const transformedRegion = item.deliveryRuleRegion.map((regionItem) => regionItem.id);
item.deliveryRuleRegion = transformedRegion.join(',');
item.deliveryGuid = formData.value.deliveryGuid
});
formData.value.deliveryRuleDataList = deliveryRuleDataList.value
const { code } = await addOrUpdateDelivery(formData.value);
if (code == 200) {

111
src/views/business/LogisticsManage/Deliverys/components/RegionTranser.vue Normal file
View File

@ -0,0 +1,111 @@
<template>
<el-dialog v-model="props.modelValue" title="选择配送区域" width="900px" @closed="closeDialog" @open="openDialog">
<div id="app">
<TreeTransfer ref="treeTransferRef" nodeKey="id" :fromData="transferData" :propToData="props.data.deliveryRuleRegion"
:defaultProps="transferProps" :leftTit="'地区选择：'" :rightTit="'已选择：'" :searchPlaceholder="'地区名称'"
@checkVal="checkVal">
</TreeTransfer>
</div>
<template #footer>
<div key="dialog-footer">
<el-button type="primary" @click="handleSave()">添加</el-button>
<el-button @click="closeDialog()">取消</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { getSecondRegionTreeList } from '@/api/business/Custom/Regions/region.js'
import TreeTransfer from '@/components/TreeTransfer/index'
import { ElMessage } from 'element-plus'
const emits = defineEmits(["update:modelValue"]);
const props = defineProps({
modelValue: Boolean,
data: Object,
done: Function,
});
const formData = ref({
...props.data
});
const transferData = ref([])
const transferValue = ref([])
const transferProps = ref([])
watch(props, (v) => {
// console.log(v.data,'数据');
transferValue.vale = v.data.deliveryRuleRegion.length;
formData.value = v.data
// console.log(transferValue.vale,'回传值');
});
// 打开弹窗时
function openDialog() {
getSecondRegionTreeList().then((res) => {
if (res.code == 200) {
transferData.value = res.data
}
})
}
// -业务参数
// 可配送区域(文字展示)
let deliveryRuleRegionText = ref("");
// 可配送区域(城市id集)
let deliveryRuleRegion = ref("");
// -业务方法
function checkVal(e) {
// console.log(e, '弹窗中的数据');
// 将 id 和 parentName 提取出来并以逗号分隔连接起来
deliveryRuleRegionText.value = e.reduce((text, item) => {
if (text && text.includes(item.parentName)) {
return text;
}
if (text) {
text += ",";
}
return text + item.parentName;
}, "");
deliveryRuleRegion.value = e.map(item => item);
// console.log(deliveryRuleRegionText.value, "可配送区域(文字展示)");
// console.log(deliveryRuleRegion.value, "可配送区域(城市id集)");
}
// 提交
function handleSave() {
if (deliveryRuleRegionText.value !== "") {
formData.value.deliveryRuleRegionText = deliveryRuleRegionText.value
formData.value.deliveryRuleRegion = deliveryRuleRegion.value
if (formData.value.deliveryRuleRegionText != null) {
closeDialog();
props.done()
}
} else {
ElMessage.error("请选择配送区域")
return;
}
}
const closeDialog = () => {
deliveryRuleRegionText.value = ""
deliveryRuleRegion.value = []
emits("update:modelValue", false);
};
</script>

7
src/views/business/LogisticsManage/Deliverys/index.vue
View File

@ -45,18 +45,19 @@
{{ $t('btn.delete') }}
</el-button>
</el-col>
<el-col :span="1.5">
<!-- <el-col :span="1.5">
<el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['business:delivery:export']">
{{ $t('btn.export') }}
</el-button>
</el-col>
</el-col> -->
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- 表格渲染 prop="对应的字段"-->
<el-table v-loading="loading" :data="dataList" ref="tableRef" border highlight-current-row
<el-table v-loading="loading" :data="dataList" ref="tableRef" highlight-current-row
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="deliveryId" label="模板ID" width="100" align="left" />
<el-table-column prop="shopName" label="店铺名称" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="deliveryName" label="模板名称" align="center" :show-overflow-tooltip="true" />