数字组件和五级联动组件

ruoyi-web/src/api/home.js

@@ -238,3 +238,10 @@ export function getOrderOrgResult(query) {
     params: query
   })
 }
+export const countryDeptList = (query) => {
+  return request({
+    url: '/system/jlDept/getList',
+    method: 'get',
+    params: query
+  })
+}

ruoyi-web/src/components/Number/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <el-input v-model="valueNumber" :disabled="disabled" :placeholder="'请输入'+placeholder" @input="handleChange(valueNumber)" clearable/>
+  </div>
+</template>
+<script>
+  export default {
+    name: "Number",
+    model: {
+      prop: 'value',
+      event: 'changeValue'
+    },
+    props: {
+      //绑定值
+      value: {
+        type: [Number,String],
+        default: "",
+      },
+      // 占位文本
+      placeholder:{
+        type: String,
+        default: "",
+      },
+      //最小值
+      min:{
+        type:Number,
+        require:false
+      },
+      //最大值
+      max:{
+        type:Number,
+        require:false
+      },
+      //保留的小数位数
+      precision:{
+        type:Number,
+        default: 0,
+      },
+      //是否禁用
+      disabled:{
+        type:Boolean,
+        default: false,
+      }
+    },
+    data() {
+      return {
+        valueNumber:this.value,
+      }
+    },
+    computed:{
+    },
+    watch: {
+      value: {
+         handler(newName, oldName) {
+           this.valueNumber=newName;
+        },
+        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
+        immediate: true,
+        deep:true,
+      }
+    },
+    methods: {
+      handleChange(value){
+        // 保留整数清除非数字的字符
+        if(this.precision>0){
+          // 根据位数动态的保留小数位数
+          this.valueNumber = this.valueNumber.replace(/[^\d.]/g,"") //清除非 数字和小数点的字符
+          let dd="";
+          for (let i = 0; i < this.precision; i++) {
+            dd+='\\d'
+          }
+          let evald=eval('/^(\\-)*(\\d+)\\.('+dd+').*$/')
+          this.valueNumber = this.valueNumber.replace(evald,'$1$2.$3'); //保留小数
+        }else {
+          this.valueNumber = this.valueNumber.replace(/[^\d]/g,"") //清除非数字的字符
+        }
+        this.valueNumber = this.valueNumber.replace(/\.{2,}/g,".") //清除第二个小数点
+        this.valueNumber = this.valueNumber.replace(/^\./g,""); //验证第一个字符是数字而不是字符
+        this.valueNumber = this.valueNumber.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
+
+        if(this.max)//根据最大值判断可输入的最大长度
+        {
+          let lenght=parseInt(this.max).toString().length;
+          this.valueNumber = this.valueNumber.indexOf(".") > 0? this.valueNumber.split(".")[0].substring(0, lenght) + "." + this.valueNumber.split(".")[1]: this.valueNumber.substring(0, lenght); //限制只能输入6位正整数
+        }
+
+        if(this.min&&this.valueNumber<this.min)
+        {
+          this.valueNumber=this.min;
+          this.$modal.msgWarning(this.placeholder+"不能小于"+this.min);
+        }
+        if(this.max&&this.valueNumber>this.max)
+        {
+          this.valueNumber=this.max;
+          this.$modal.msgWarning(this.placeholder+"不能超过"+this.max);
+        }
+        this.$emit('changeValue', this.valueNumber);
+      }
+    },
+    created() {
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

ruoyi-web/src/components/RegionCascaderSelect/index.vue

@@ -0,0 +1,164 @@
+<template>
+<!--  v-if 解决数据回显问题-->
+  <el-cascader v-if="show" :disabled="disabled" ref="cascader" v-model="cascaderValue" :props="props" v-bind="options" @change="handleChange"></el-cascader>
+</template>
+<script>
+
+import {countryDeptList} from "@/api/home";
+
+export default {
+  name: 'regionCascaderSelect',
+  model: {
+    prop: 'value',
+    event: 'changeValue'
+  },
+  props: {
+    //回显数据
+    value: {
+      type: [Array, String, Object],
+      default: () => []
+    },
+    valueProp: {
+      type: String,
+      default: 'code'
+    },
+    disabled:{
+      type: Boolean,
+      default: false,
+    },
+    //是否严格的遵守父子节点不互相关联  true:可以选择任意一级。flase:选择最后一级
+    checkStrictly: {
+      type: Boolean,
+      default: true,
+    },
+    opts: {
+      type: Object,
+      default: () => ({})
+    },
+    //选中节点的数据
+    checked: {
+      type: Object,
+      default: null
+    },
+    endLevel: {
+      type: [Number, String],
+      default: 4
+    },
+    startLevel: {
+      type: [Number, String],
+      default: 0
+    },
+  },
+  watch: {
+    checkStrictly(newVal){
+      this.props.checkStrictly = newVal;
+    },
+    value:{
+      handler(newVal, oldVal){
+        if (this.isCascaderValueChange){
+          this.isCascaderValueChange = false;
+          return;
+        }
+        // console.log('newVal --> ', newVal);
+        this.setCascaderValue(newVal);
+      },
+      immediate: true,  //刷新加载 立马触发一次handler
+      deep: true
+    }
+  },
+  mounted(){
+    let defaultOpts = {
+      placeholder: '请选择所属区划',
+      'popper-class': 'cascader-popper region-cascader',
+      clearable: true
+    };
+    this.options = {
+      ...defaultOpts,
+      ...this.opts
+    };
+    this.props.checkStrictly = this.checkStrictly;
+  },
+  data(){
+    return {
+      options: {},
+      show: true, //为了解决数据回显问题引入
+      cascaderValue: [],//级联组件的值
+      isCascaderValueChange: false,//是否为级联组件主动触发的change事件
+    }
+  },
+  computed: {
+    props(){
+      return {
+        lazy: true,
+        checkStrictly: true,
+        lazyLoad: async (node, resolve) => {
+          const { level } = node;
+          let levelData=0;
+          let params='';
+          if(level === 0)
+          {
+              params = { parentId: "479a446fce894740b373f9c4b356daac"}
+          }else
+          {
+            params={parentId: node.data.nodeData.id};
+          }
+          // let params = level === 0 ? '' : {parentId: node.data.nodeData.id};
+          let response= await countryDeptList(params);
+          let code = response.code;
+          let data = response.data || response.rows;
+          if (code !== 200) {
+            this.$message.error('获取行政区划数据失败！');
+            resolve([]);
+            return;
+          }
+          let res = data.map(item => {
+            let value = String(item[this.valueProp]);
+            let disabled = level < this.startLevel;
+            let endLevel =  this.endLevel;
+            return {
+              disabled,
+              label: item.name,
+              value,
+              leaf: level >= endLevel,
+              nodeData: item
+            }
+          });
+          resolve(res);
+        },
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    handleChange(value){
+      this.isCascaderValueChange = true;
+      this.$emit('changeValue', value);
+      //将被选中的节点的信息传递出去 👇
+      let checkedNode = this.$refs.cascader.getCheckedNodes();
+      checkedNode = checkedNode.length > 0 ? checkedNode[0]['data']['nodeData'] : null;
+      this.$emit('update:checked', checkedNode);
+      //将被选中的节点的全部信息传递出去 👇
+      this.$emit('nodeData', this.$refs.cascader.getCheckedNodes());
+    },
+    setCascaderValue(newVal){
+      this.show = false;
+      let values = newVal || [];
+      if (typeof values === 'string') {
+        //如果赋值是 json 格式
+        values = JSON.parse(values);
+      }
+      this.cascaderValue = [...values];
+      this.$nextTick(() => {
+        this.show = true;
+      });
+    },
+    getCheckedNodes(){
+      return this.$refs.cascader.getCheckedNodes();
+    },
+  }
+}
+</script>
+<style lang="scss">
+
+</style>

ruoyi-web/src/main.js

@@ -19,6 +19,10 @@ import FileUpload from "@/components/FileUpload"
 import ImageUpload from "@/components/ImageUpload"
 // 图片预览组件
 import ImagePreview from "@/components/ImagePreview"
+//数字组件
+import Number from '@/components/Number'
+// 五级级联组件
+import RegionCascaderSelect from '@/components/RegionCascaderSelect'
 import Org_tree from '@/components/Org_tree'
 import OrgTreeSel from "@/components/OrgTreeSel"
 import OrgTreeSelEmbed from "@/components/OrgTreeSelEmbed"
@@ -41,6 +45,8 @@ app.component('ImagePreview', ImagePreview)
 app.component('OrgTreeSel', OrgTreeSel)
 app.component('OrgTreeSelEmbed', OrgTreeSelEmbed)
 app.component('Pagination', Pagination)
+app.component('Number', Number)
+app.component('RegionCascaderSelect', RegionCascaderSelect)
 app.use(Org_tree)
 app.use(store)
 app.use(plugins)