测试职业技能

src/components/FormUI/nestedListGroup/components/listGroup.vue

@@ -1,49 +1,33 @@
 <template>
   <v-list class="side-box" color="primary">
-    <template v-for="(val, index) in item.items" :key="item?.itemValue? val[item.itemValue] : index">
+    <template v-for="(val, index) in list" :key="option?.itemValue? val[option.itemValue] : index">
       <template v-if="!val.children?.length">
         <v-list-item
           active-class="active"
           color="primary"
-          :title="val[item.itemText || 'label']"
+          :title="val[option.itemText || 'label']"
         >
         </v-list-item>
       </template>
       <v-list-group
         v-else
         color="primary"
-        :prepend-icon="val.icon"
       >
         <template v-slot:activator="{ props }">
-          <v-list-item v-bind="props" :title="val[item.itemText || 'label']"></v-list-item>
+          <v-list-item v-bind="props" :title="val[option.itemText || 'label']"></v-list-item>
         </template>
-        <template v-for="(k, i) in val.children" :key="item?.itemValue? k[item.itemValue] : i">
-          <v-list-item
-            v-if="!k.children?.length"
-            active-class="active"
-            color="primary"
-            :title="k[item.itemText || 'label']"
-          ></v-list-item>
-          <listGroup v-else :item="k"></listGroup>
-        </template>
-        <!-- <v-list-item
-          v-for="(k, i) in val.children"
-          :key="`k_${i}`"
-          color="primary"
-          style="padding-left: 40px;"
-          :title="k[item.itemText || 'label']"
-          :value="k[item.itemValue || 'value']"
-        ></v-list-item> -->
+        <listGroup :list="val.children" :option="option"></listGroup>
       </v-list-group>
     </template>
   </v-list>
 </template>
 
 <script setup>
-import listGroup from './listGroup'
+// import listGroup from './listGroup'
 defineOptions({ name:'nestedListGroup-listGroup'})
-const propsData = defineProps({item: Object})
-const item = propsData.item
+const propsData = defineProps({list: Array, option: Object})
+const list = propsData.list
+const option = propsData.option
 </script>
 <style lang="scss" scoped>
 </style>

src/components/FormUI/nestedListGroup/index.vue

@@ -30,36 +30,7 @@
           @update:modelValue="modelValueUpDate"
         ></v-text-field>
       </template>
-      <listGroup :item="item"></listGroup>
-      <!-- <v-list class="side-box" color="primary">
-        <template v-for="(val, index) in item.items" :key="item?.itemValue? val[item.itemValue] : index">
-          <template v-if="!val.children?.length">
-            <v-list-item
-              active-class="active"
-              color="primary"
-              :title="val[item.itemText || 'label']"
-            >
-            </v-list-item>
-          </template>
-          <v-list-group
-            v-else
-            color="primary"
-            :prepend-icon="val.icon"
-          >
-            <template v-slot:activator="{ props }">
-              <v-list-item v-bind="props" :title="val[item.itemText || 'label']"></v-list-item>
-            </template>
-            <v-list-item
-              v-for="(k, i) in val.children"
-              :key="`k_${i}`"
-              color="primary"
-              style="padding-left: 40px;"
-              :title="k[item.itemText || 'label']"
-              :value="k[item.itemValue || 'value']"
-            ></v-list-item>
-          </v-list-group>
-        </template>
-      </v-list> -->
+      <listGroup :list="item.items" :option="option"></listGroup>
     </v-menu>
   </div>
 </template>
@@ -70,6 +41,7 @@ import { defineEmits, ref } from 'vue';
 defineOptions({ name:'FormUI-nestedListGroup'})
 const propsData = defineProps({item: Object, modelValue: [String, Number]})
 const item = propsData.item
+const option = { ...item, items: [] }
 const value = ref(propsData.modelValue)
 const emit = defineEmits(['update:modelValue', 'change'])
 const modelValueUpDate = (val) => {

src/views/resume/components/vocationalSkills.vue

@@ -50,25 +50,25 @@ const editId = ref(null)
 const skills = [{ label: '英语四级', value: '0' }, { label: '英语六级', value: '1' }, { label: 'office办公软件', value: '2' }]
 
 // const skills = [
-//   { label: '英语四级', value: '0' },
-//   { label: '英语六级', value: '1',
+//   { label: '一级-1', value: '0' },
+//   { label: '财务-1', value: '1',
 //     children: [
 //       { 
-//         label: '2220', value: '49864',
+//         label: '会计-2', value: '22222',
 //         children: [
-//           { label: '33333', value: '33333', }
+//           { label: '注册会计师一级-3', value: '33333', },
+//           { label: '注册会计师二级-3', value: '33334', }
 //         ]
 //       },
-//       { label: '2221', value: '498640' },
+//       { label: '出纳-2', value: '498640' },
 //     ]
 //   },
-//   { label: 'office办公软件', value: '2' }
+//   { label: '其他一级-1', value: '2' }
 // ]
 const formItems = ref({
   options: [
     {
-      type: 'autocomplete',
-      // type: 'nestedListGroup',
+      type: 'nestedListGroup', // nestedListGroup autocomplete
       key: 'skillId',
       value: null,
       default: null,

src/views/resume/index.vue

@@ -46,6 +46,7 @@ import { onMounted } from 'vue';
 const scrollBox = ref()
 
 const comList = [
+  // { path: vocationalSkills, id: 'resumeVocationalSkills', domId: 'vocationalSkills' },
   { path: basicInfo, id: 'resumeBasicInfo', domId: 'basicInfo' }, // domId与items中的id保持一致
   { path: selfEvaluation, id: 'resumeSelfEvaluation', domId: 'selfEvaluation' },
   { path: jobIntention, id: 'resumeJobIntention', domId: 'jobIntention' },