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

package.json

@@ -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",

src/api/business/Custom/Regions/region.js

@@ -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({

src/api/business/LogisticsManage/Deliverys/delivery.js

@@ -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({

src/assets/styles/login.scss

@@ -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;

src/components/TreeTransfer/index.vue

@@ -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>

src/utils/deepCopy.js

@@ -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)
+}

src/views/business/LogisticsManage/Deliverys/components/AddDialog.vue

@@ -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-row >
-        <el-col :lg="12">
+        <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)">{{
+              <el-radio v-for="item in  charging_methods " :key="item.dictValue" :label="parseInt(item.dictValue)"
-                item.dictLabel }}</el-radio>
+                @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: "店铺不能为空", trigger: "blur"}],
-  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" }],
@@ -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>

src/views/business/LogisticsManage/Deliverys/components/DetailDialog.vue

@@ -6,46 +6,83 @@
  * @LastEditors: (黎文豪)
  * @LastEditTime: (2023-06-16)
 -->
- <template>
+<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" :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
+      })
+    }
+  })
+}
+
 
 
 // 基础参数

src/views/business/LogisticsManage/Deliverys/components/EditDialog.vue

@@ -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" }],
+  deliveryName: [{ required: true, message: "模板名称不能为空", trigger: "blur" }],
-    shopGuid: [{ required: true, message: "店铺guid不能为空", trigger: "blur", type: "number" }],
+  deliveryBillingMethod: [{ required: true, message: "计费方式不能为空", trigger: "blur", type: "number" }],
-    deliveryName: [{ required: true, message: "模板名称不能为空", trigger: "blur" }],
+  deliverySort: [{ required: true, message: "排序不能为空", trigger: "blur", type: "number" }],
-    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) {

src/views/business/LogisticsManage/Deliverys/components/RegionTranser.vue

@@ -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>

src/views/business/LogisticsManage/Deliverys/index.vue

@@ -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" />