小需求

src/components/common/select-area/strict-area.vue

@@ -0,0 +1,74 @@
+<template>
+  <t-cascader
+    v-model="selected"
+    :options="options"
+    :clearable="clearable"
+    :placeholder="placeholder"
+    check-strictly
+    @change="onChange"
+  >
+  </t-cascader>
+</template>
+
+<script setup name="SelectArea">
+import { ref, watch } from 'vue';
+import { buildData } from './area';
+
+let selected = ref('');
+const emit = defineEmits(['change']);
+const props = defineProps({
+  level: { type: Number, default: 3 },
+  clearable: { type: Boolean, default: true },
+  disabled: { type: Boolean, default: false },
+  placeholder: { type: String, default: '请选择' },
+});
+
+let options = ref([]);
+let areaCodeMap = {};
+
+const getAreaStrArr = (arr, parentNode) => {
+  for (let i = 0; i < arr.length; i++) {
+    let item = arr[i];
+    item.parentLabels = parentNode
+      ? [...parentNode.parentLabels, parentNode.label]
+      : [];
+    if (item.children) {
+      getAreaStrArr(item.children, item);
+    }
+  }
+  return arr;
+};
+
+let _options = [];
+const getChooseLabels = (val, arr = _options) => {
+  for (let i = 0; i < arr.length; i++) {
+    let item = arr[i];
+    if (item.value == val) {
+      return [...item.parentLabels, item.label];
+    }
+    if (item.children) {
+      let result = getChooseLabels(val, item.children);
+      if (result) {
+        return result;
+      }
+    }
+  }
+};
+const initData = () => {
+  const data = buildData(props.level);
+  options.value = data.areaData;
+  _options = getAreaStrArr(options.value);
+  console.log('_options', _options);
+  areaCodeMap = data.areaCodeMap;
+};
+initData();
+
+const getVal = (list) => {
+  if (!list.length) return ['', '', ''].slice(0, props.level);
+  return list.map((item) => areaCodeMap[item]);
+};
+
+const onChange = (val) => {
+  emit('change', getChooseLabels(val));
+};
+</script>

src/components/global/robot/index.vue

@@ -1,12 +1,19 @@
 <template>
   <div class="robot" v-if="canShow">
-    <t-tooltip content="试试点我提问~" theme="light">
-      <img
+    <!-- <t-tooltip content="试试点我提问~" theme="light"> -->
+    <div
+      class="robot-img-box"
+      v-drag
+      title="试试点我提问~"
+      @click="visible = !visible"
+    >
+      <!-- <img
         class="robot-img"
         src="../../../assets/imgs/jiqiren.png"
         @click="visible = !visible"
-      />
-    </t-tooltip>
+      /> -->
+    </div>
+    <!-- </t-tooltip> -->
     <t-dialog v-model:visible="visible" :footer="false" width="800">
       <iframe
         src="https://qmth.echo-isoftstone.com/visitors-ui/pc"
@@ -15,6 +22,18 @@
       ></iframe>
     </t-dialog>
   </div>
+  <!-- <div
+    v-drag
+    style="
+      position: fixed;
+      z-index: 1000;
+      background: red;
+      width: 100px;
+      height: 100px;
+      left: 200px;
+      top: 100px;
+    "
+  ></div> -->
 </template>
 
 <script setup name="Robot">
@@ -30,7 +49,7 @@ const canShow = computed(() => {
 
 <style lang="less" scoped>
 .robot {
-  .robot-img {
+  .robot-img-box {
     position: fixed;
     width: 80px;
     height: 80px;
@@ -38,6 +57,8 @@ const canShow = computed(() => {
     bottom: 20px;
     z-index: 300;
     cursor: pointer;
+    background: url(../../../assets/imgs/jiqiren.png) 0 0 no-repeat;
+    background-size: 100% 100%;
   }
 }
 </style>

src/directives/drag.js

@@ -0,0 +1,25 @@
+function startDrag(event) {
+  const el = event.target;
+  const dx = event.clientX - el.offsetLeft;
+  const dy = event.clientY - el.offsetTop;
+
+  function doDrag(e) {
+    el.style.left = e.clientX - dx + 'px';
+    el.style.top = e.clientY - dy + 'px';
+  }
+  function stopDrag() {
+    document.removeEventListener('mousemove', doDrag);
+    document.removeEventListener('mouseup', stopDrag);
+  }
+  document.addEventListener('mousemove', doDrag);
+  document.addEventListener('mouseup', stopDrag);
+}
+const drag = (el, binding) => {
+  el.addEventListener('mousedown', startDrag);
+};
+
+export default {
+  mounted(el, binding) {
+    drag(el, binding);
+  },
+};

src/directives/index.js

@@ -1,9 +1,11 @@
 import copy from './copy';
 import perm from './perm';
+import drag from './drag';
 
 export default {
   install(Vue) {
     Vue.directive('copy', copy);
     Vue.directive('perm', perm);
+    Vue.directive('drag', drag);
   },
 };

src/views/resource-guard/person-guard/person-allocate/index.vue

@@ -16,11 +16,7 @@
         ></select-service-unit>
       </template>
       <template #area>
-        <select-area
-          v-model="areaInfo"
-          value-type="full"
-          @change="areaChange"
-        ></select-area>
+        <strict-area v-model="areaInfo" @change="areaChange"></strict-area>
       </template>
     </SearchForm>
     <div class="flex-1 page-wrap">