一个传入省市区ID的级联框

news2024/12/23 6:39:58

省市区ID

  • 功能
  • edit页面(主要)
  • script逻辑
  • 如何拿到当前级联下所有ID数组
  • 长ID数组是如何回显的 (1)
  • 长ID数组是如何回显的 (2)

功能

选择第一层传第一层下的所有 id 数组,选择第二层传递第二层以及第二层下的所有 id 数组

edit页面(主要)

编辑页的一个 Table,包含 change 事件,较为重要

<a-col :xs="24" :sm="24" :md="24" :lg="24" v-if="formState.areaType === 2">
            <a @click="handleAddArea()">添加地区</a>
            <a-table :dataSource="localList" :columns="columns" :pagination="false">
              <template #area="{ record }">
                <a-cascader
                  :options="regionDataPlus"
                  v-model:value="record.area"
                  @change="(idl, options) => regionChange(record, idl, options)"
                  :fieldNames="{ label: 'name', value: 'id', children: 'children' }"
                  style="width: 100%"
                  placeholder="请选择地区"
                  change-on-select
                  ref="regionRef"
                />
              </template>
              <template #firstunitAreaPrice="{ record }">
                <a-input-number v-model:value="record.firstunitAreaPrice"></a-input-number>
              </template>
              <template #continueunitAreaPrice="{ record }">
                <a-input-number v-model:value="record.continueunitAreaPrice"></a-input-number>
              </template>
              <template #handle="{ record, index }">
                <div style="display: flex">
                  <!-- <a @click="handleAddArea()">添加地区</a> -->
                  <a style="margin-left: 10px" @click="handleDeleteArea(index)">删除</a>
                </div>
              </template>
            </a-table>
          </a-col>

script逻辑

算是重写了一遍 = =

<script setup>
import lodash from 'lodash'
import { reactive, defineProps, ref, onMounted } from 'vue'
import { v4 as uuidv4 } from 'uuid'
import { GetEdit, DoEdit } from '@/api/module/WDShip'
import { GetAllList } from '@/api/module/WDArea'
import { message, Modal } from 'ant-design-vue'
// 这是之前引入的省市区级联,用的antd级联js,后来要获取接口的,已弃用
// import { regionDataPlus } from 'element-china-area-data'
const props = defineProps(['editVisible', 'lineId'])
// 弹窗状态
let editVisible = ref(false)
editVisible.value = props.editVisible
// 地区,快递费等表格数据
let localList = ref([])
// 选择区域下拉框级联数据
let regionDataPlus = ref([])
// 只选中父级节点的所有id列表
let allIdList = ref([])
// area的拷贝
let areaCopy = ref([])
let formState = reactive({})
let infoData = reactive({})
// 确认
const handleConfirm = () => {
  // 这边确认防止areaCopy为[],因为area copy的 localList,所以当不change时areaCopy为空
  if (areaCopy.value.length < 1) {
    areaCopy.value = localList.value
  }
  formState.areaFee = JSON.stringify(areaCopy.value)
  DoEdit(formState).then(res => {
    if (res.code == 0) {
      emit('editFun', false, true)
      message.success(res.msg)
    } else {
      message.error(res.msg)
    }
  })
}

// 删除地址
const handleDeleteArea = index => {
  if (localList.value.length > 1) {
    localList.value.splice(index, 1)
    areaCopy.value = lodash.cloneDeep(localList.value)
    areaCopy.value.forEach(item => {
      if (record.id === item.id) {
        item.area = allIdList.value
      }
    })
  }
}
// 添加地址
const handleAddArea = () => {
  // localList.value.push(JSON.parse(JSON.stringify(item)))
  localList.value.push({
    id: uuidv4(),
    area: '',
    defaultArea: '',
    areaParentName: '',
    firstunitAreaPrice: 0,
    continueunitAreaPrice: 0
  })
}
const columns = [
  { title: '选择地区', dataIndex: 'area', key: 'area', slots: { customRender: 'area' } },
  {
    title: '首重费用',
    dataIndex: 'firstunitAreaPrice',
    key: 'firstunitAreaPrice',
    slots: { customRender: 'firstunitAreaPrice' }
  },
  {
    title: '续重费用',
    dataIndex: 'continueunitAreaPrice',
    key: 'continueunitAreaPrice',
    slots: { customRender: 'continueunitAreaPrice' }
  },
  { title: '操作', dataIndex: 'handle', key: 'handle', slots: { customRender: 'handle' } }
]
// 获取详情
const getEdit = () => {
  GetEdit({ id: props.lineId }).then(res => {
    Object.assign(infoData, res.data)
    Object.assign(formState, res.data.model)
    // areaFeeList = res.data.model
    if (res.data.model.areaFeeObj.length > 0) {
      res.data.model.areaFeeObj.forEach(item => {
        if (item.defaultArea.length > 0) {
          item.area = item.defaultArea
        }
      })
    }

    localList.value = res.data.model.areaFeeObj
  })
}

// 获取省市区
const getLocalData = () => {
  GetAllList({}).then(res => {
    let map = {}
    let result = []
    if (!Array.isArray(res.data)) {
      return []
    }
    res.data.forEach(item => {
      map[item.id] = item
    })
    res.data.forEach(item => {
      let parent = map[item.parentId]
      if (parent) {
        ;(parent.children || (parent.children = [])).push(item)
      } else {
        result.push(item)
      }
    })
    regionDataPlus.value = result
  })
}

// 城市Change
// 选择第一层传第一层下的所有id,选择第二层传递第二层以及第二层下的所有id
const regionChange = (record, idl, options) => {
  let filterIdList = []
  let firstIdList = []
  filterIdList = []
  if (idl.length === 1) {
    if (options[0].children) {
      filterIdList.push(...options[0].children.filter(item => item.id).map(item => item.id))
      options[0].children.forEach(district => {
        if (district.children) {
          district.children.forEach(item => {
            filterIdList.push(item.id)
          })
        }
      })
    }
    firstIdList = filterIdList[0]
    allIdList.value = filterIdList
  } else if (idl.length === 2) {
    filterIdList.push(...firstIdList, ...options[1].children.filter(item => item.id).map(item => item.id))
    allIdList.value = filterIdList
  } else {
    allIdList.value = idl
  }
  // 当选择的时候,因为areaCopy.value是深拷贝对象,这里的意思是,areaCopy.value 改变不会影响到 localList
  areaCopy.value = lodash.cloneDeep(localList.value)
  areaCopy.value.forEach(item => {
    if (record.id === item.id) {
      item.area = allIdList.value
    }
  })
  // localList.value 只保留 3个ID
  // areaCopy.value 为全部ID,当层级选到第三个恢复为正常的3ID
  areaCopy.value.forEach(aid => {
    if (aid.id === record.id) {
      aid.defaultArea = record.area
    }
  })
}

const emit = defineEmits(['editFun'])
// 取消
const handleCancle = () => {
  emit('editFun', false)
}
onMounted(() => {
  getEdit()
  getLocalData()
})
</script>

如何拿到当前级联下所有ID数组

// 城市Change
// 选择第一层传第一层下的所有id,选择第二层传递第二层以及第二层下的所有id
const regionChange = (record, idl, options) => {
  let filterIdList = []
  let firstIdList = []
  filterIdList = []
  if (idl.length === 1) {
    if (options[0].children) {
      filterIdList.push(...options[0].children.filter(item => item.id).map(item => item.id))
      options[0].children.forEach(district => {
        if (district.children) {
          district.children.forEach(item => {
            filterIdList.push(item.id)
          })
        }
      })
    }
    firstIdList = filterIdList[0]
    allIdList.value = filterIdList
  } else if (idl.length === 2) {
    filterIdList.push(...firstIdList, ...options[1].children.filter(item => item.id).map(item => item.id))
    allIdList.value = filterIdList
  } else {
    allIdList.value = idl
  }
  // 当选择的时候,因为areaCopy.value是深拷贝对象,这里的意思是,areaCopy.value 改变不会影响到 localList
  areaCopy.value = lodash.cloneDeep(localList.value)
  areaCopy.value.forEach(item => {
    if (record.id === item.id) {
      item.area = allIdList.value
    }
  })
  // localList.value 只保留 3个ID
  // areaCopy.value 为全部ID,当层级选到第三个恢复为正常的3ID
  areaCopy.value.forEach(aid => {
    if (aid.id === record.id) {
      aid.defaultArea = record.area
    }
  })
}

长ID数组是如何回显的 (1)

这里配合级联的change,若级联没有change,那么提交后areaCopy.value就会为[],如何解决的areaCopy.value为[]?

// 确认
const handleConfirm = () => {
  // 这边确认防止areaCopy为[],因为area copy的 localList,所以当不change时areaCopy为空
  if (areaCopy.value.length < 1) {
    areaCopy.value = localList.value
  }
  formState.areaFee = JSON.stringify(areaCopy.value)
  DoEdit(formState).then(res => {
    if (res.code == 0) {
      emit('editFun', false, true)
      message.success(res.msg)
    } else {
      message.error(res.msg)
    }
  })
}

长ID数组是如何回显的 (2)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1553670.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Dynamo设置按链接视图显示

Hello大家好&#xff01;我是九哥~ 先来看一段视频&#xff1a; Dynamo设置链接视图 相信用Revit的小伙伴都用到过这个功能&#xff0c;就是在链接Revit模型时&#xff0c;为了便于出图&#xff0c;我们经常需要将链接模型从“按主体视图”改为“按链接视图”&#xff0c;这样能…

buy me a btc 使用数字货币进行打赏赞助

最近在调研使用加密货币打赏的平台&#xff0c;发现idatariver平台 https://idatariver.com 推出的buymeabtc功能刚好符合使用场景&#xff0c;下图为平台的演示项目, 演示项目入口 https://buymeabtc.com/idatariver 特点 不少人都听说过buymeacoffee&#xff0c;可以在上面发…

BabySQL【2019极客大挑战】

知识点&#xff1a; 功能分析 登录界面一般是 where username and password 可以从username出手&#xff0c;注释掉and语句单引号闭合绕过 通过测试和报错信息发现是一个单引号读取输入可以单引号闭合绕过关键字过滤 or and 过滤 || &&替换双写绕过select from wher…

【学习笔记】java项目—苍穹外卖day01

文章目录 苍穹外卖-day01课程内容1. 软件开发整体介绍1.1 软件开发流程1.2 角色分工1.3 软件环境 2. 苍穹外卖项目介绍2.1 项目介绍2.2 产品原型2.3 技术选型 3. 开发环境搭建3.1 前端环境搭建3.2 后端环境搭建3.2.1 熟悉项目结构3.2.2 Git版本控制3.2.3 数据库环境搭建3.2.4 前…

基于单片机环境监测温湿度PM2.5系统设计

**单片机设计介绍&#xff0c;基于单片机环境监测温湿度PM2.5系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机环境监测温湿度PM2.5系统是一个集成了传感器技术、单片机控制以及数据处理与显示功能的综合性系统…

30-3 越权漏洞 - 水平越权(横向越权)

环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 一、定义 攻击者可以访问和操作与其拥有同级权限的用户资源。 示例: 学生A在教务系统上正常只能修改自己的作业内容,但由于不合理的权限校验规则等原因,学生A可以修改学生B的内…

五种免费的Python开发环境及具体下载网址

五种免费的Python开发环境及具体下载网址 目录 五种免费的Python开发环境及具体下载网址1.Anaconda2.PyCharm Community Edition3.Visual Studio Code4.Jupyter Notebook5. WinPython Python编程可选择不同的开发工具环境进行&#xff0c;本文介绍五种常用的&#xff0c;读者可…

R语言使用dietaryindex包计算NHANES数据多种营养指数(2)

健康饮食指数 (HEI) 是评估一组食物是否符合美国人膳食指南 (DGA) 的指标。Dietindex包提供用户友好的简化方法&#xff0c;将饮食摄入数据标准化为基于指数的饮食模式&#xff0c;从而能够评估流行病学和临床研究中对这些模式的遵守情况&#xff0c;从而促进精准营养。 该软件…

WhatsApp封号怎么办?看看原因与解封方法

相信各位小伙伴已经发现&#xff0c;WhatsApp新一轮风控已经启动&#xff0c;不少小伙伴已经受到封号潮的冲击。无论是老号还是新号都难以幸免。为了防止WhatsApp客户数据和聊天信息的丢失&#xff0c;针对封号的防封攻略请收藏&#xff01; 一、WhatsApp被封的8个原因 1、被过…

编译与链接(想了解编译与链接,那么看这一篇就足够了!)

前言&#xff1a;在我们练习编程的时候&#xff0c;我们只需要将代码写入、运行&#xff0c;就可以得到计算之后的结果了&#xff0c;但是你有没有想过&#xff0c;为什么就可以得到计算之后的结果呢&#xff0c;它的底层又到底是什么呢&#xff1f; ✨✨✨这里是秋刀鱼不做梦的…

算法之美:B+树原理、应用及Mysql索引底层原理剖析

B树的一种变种形式&#xff0c;B树上的叶子结点存储关键字以及相应记录的地址&#xff0c;同等存储空间下比B-Tree存储更多Key。非叶子节点不对关键字记录的指针进行保存&#xff0c;只进行数据索引 , 树的层级会更少 , 所有叶子节点都在同一层, 叶子节点的关键字从小到大有序排…

安装uim-ui插件不成功,成功解决

安装&#xff1a;这种安装&#xff0c;umi4 不支持&#xff0c;只有umi3才支持。而我发现官网现在默认使用的umi4。 yarn add umijs/preset-ui -D 解决&#xff1a;更改umi版本重新安装umi3 npm i ant-design/pro-cli3.1.0 -g #使用umi3 (指定umi3版本) pro create user-ce…

伪原创文章生成软件:自媒体文章写作好神器

自媒体的红利时代&#xff0c;许多人都纷纷参于其中&#xff0c;而文章写作是做自媒体的基本技能&#xff0c;但是随着技术的发展&#xff0c;如今&#xff0c;既使不会写作能力一样可以做起自媒体&#xff0c;方法就是利用伪原创文章生成软件来做内容的输出&#xff0c;其实伪…

【Vue3进阶】- 第2学堂小商城实战课程前言

该教程为进阶教程&#xff0c;如果你还不了解Vue3的基础知识&#xff0c;可以先前往Vue3基础教程&#xff0c;从入门到实战。 学习时遇到的任何疑问都欢迎在相应课文页面下方的问答区进行提问哦 我能学到什么&#xff1f; 编程写法千千万&#xff0c;实现需求是第一。 教程中…

如何在 Ubuntu 安装桌面环境

在 Ubuntu 上安装不同的桌面环境 如果你正在使用官方的 Ubuntu 发行版&#xff0c;它运行在 GNOME 上&#xff0c;那么你可以很容易地从默认的包管理器安装其他流行的桌面环境&#xff08;DE&#xff09;。让我们开始吧… 在 Ubuntu 上安装 KDE Plasma 如果你正在使用 GNOME…

8.6 循环神经网络的简洁实现

每个步长共用参数 加载数据 虽然 8.5节 对了解循环神经网络的实现方式具有指导意义&#xff0c;但并不方便。 本节将展示如何使用深度学习框架的高级API提供的函数更有效地实现相同的语言模型。 我们仍然从读取时光机器数据集开始。 import torch from torch import nn from…

面向对象:继承

文章目录 一、什么叫继承&#xff1f;二、单继承三、多继承3.1多继承的各种情况3.1.1一般情况3.1.1特殊情况&#xff08;菱形继承&#xff09; 四、菱形继承引发的问题4.1 问题1:数据冗余4.2 问题2:二义性&#xff08;无法确定到底是访问哪个&#xff09; 五、虚拟继承解决菱形…

PXE批量装centos7系统

1.环境准备&#xff1a; yum -y install tftp-server xinetd #安装并启用 TFTP 服务 #修改TFTP服务的配置文件 vim /etc/xinetd.d/tftp protocol udp # TFTP默认使用UDP协议 wait no # no表示客户机可以多台一起连接&…

JavaScript高级 —— 学习(一)

目录 一、作用域 &#xff08;一&#xff09;局部作用域 1.函数作用域 2.块作用域 &#xff08;二&#xff09;全局作用域 二、垃圾回收机制 GC &#xff08;一&#xff09;生命周期 1.内存分配 2.内存使用 3.内存回收 4.特殊情况——内存泄漏&#xff1a; 注意&…

【MySQL】数据库--表操作

目录 一、创建表 二、查看表 三、修改表 1. 添加字段--add 2.修改表名--rename to 3.修改列名--change 4.修改字段的数据类型--modify 5.删除字段&#xff08;列&#xff09;--drop 四、删除表 一、创建表 create [temporary]table[if not exists]table_name [([colu…