feat: 机型机号树关联

src/components/TreeFilter/index.vue

@@ -11,7 +11,7 @@
         :node-key="id"
         :data="multiple ? treeData : treeAllData"
         :show-checkbox="multiple"
-        :check-strictly="false"
+        :check-strictly="checkStrictly"
         :current-node-key="!multiple ? selected : ''"
         :highlight-current="!multiple"
         :expand-on-click-node="false"
@@ -46,12 +46,14 @@ interface TreeFilterProps {
   label?: string // 显示的label ==> 非必传，默认为 “label”
   multiple?: boolean // 是否为多选 ==> 非必传，默认为 false
   defaultValue?: any // 默认选中的值 ==> 非必传
+  checkStrictly?: boolean
   isAll?: boolean // 是否显示全部选项 ==> 非必传
 }
 const props = withDefaults(defineProps<TreeFilterProps>(), {
   id: 'id',
   label: 'label',
   multiple: false,
+  checkStrictly: false,
   isAll: true
 })
 

src/views/als/dataImport/index.vue

@@ -1,32 +1,35 @@
 <template>
-  <div class="table-box">
-    <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listDataImportApi">
-      <!-- 表格 header 按钮 -->
-      <template #tableHeader="scope">
-        <el-button type="primary" v-auth="['als:dataImport:add']" @click="openDialog(1, '数据导入信息新增')"> 导入 </el-button>
-        <el-button
-          type="danger"
-          v-auth="['als:dataImport:remove']"
-          icon="Delete"
-          plain
-          :disabled="!scope.isSelected"
-          @click="batchDelete(scope.selectedListIds)"
-        >
-          批量删除
-        </el-button>
-      </template>
-      <!-- 表格操作 -->
-      <template #operation="scope">
-        <el-button type="primary" link icon="View" v-auth="['als:dataImport:query']" @click="openDialog(3, '数据导入信息查看', scope.row)">
-          查看
-        </el-button>
-        <el-button type="primary" link icon="EditPen" v-auth="['als:dataImport:edit']" @click="openDialog(2, '数据导入信息编辑', scope.row)">
-          编辑
-        </el-button>
-        <el-button type="primary" link icon="Delete" v-auth="['als:dataImport:remove']" @click="deleteDataImport(scope.row)"> 删除 </el-button>
-      </template>
-    </ProTable>
-    <FormDialog ref="formDialogRef" :items-options="itemsOptions" :model="model" />
+  <div class="main-box">
+    <TreeFilter title="机型机号列表" :is-all="false" :check-strictly="true" :data="treeFilterData" :default-value="'0'" @change="changeTreeFilter" />
+    <div class="table-box">
+      <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listDataImportApi" :init-param="initParam">
+        <!-- 表格 header 按钮 -->
+        <template #tableHeader="scope">
+          <el-button type="primary" v-auth="['als:dataImport:add']" @click="openDialog(1, '数据导入信息新增')"> 导入 </el-button>
+          <el-button
+            type="danger"
+            v-auth="['als:dataImport:remove']"
+            icon="Delete"
+            plain
+            :disabled="!scope.isSelected"
+            @click="batchDelete(scope.selectedListIds)"
+          >
+            批量删除
+          </el-button>
+        </template>
+        <!-- 表格操作 -->
+        <template #operation="scope">
+          <el-button type="primary" link icon="View" v-auth="['als:dataImport:query']" @click="openDialog(3, '数据导入信息查看', scope.row)">
+            查看
+          </el-button>
+          <el-button type="primary" link icon="EditPen" v-auth="['als:dataImport:edit']" @click="openDialog(2, '数据导入信息编辑', scope.row)">
+            编辑
+          </el-button>
+          <el-button type="primary" link icon="Delete" v-auth="['als:dataImport:remove']" @click="deleteDataImport(scope.row)"> 删除 </el-button>
+        </template>
+      </ProTable>
+      <FormDialog ref="formDialogRef" :items-options="itemsOptions" :model="model" />
+    </div>
   </div>
 </template>
 
@@ -35,13 +38,36 @@ import { useHandleData } from '@/hooks/useHandleData'
 import FormDialog from '@/components/FormDialog/index.vue'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import { listDataImportApi, delDataImportApi, addDataImportApi, updateDataImportApi, getDataImportApi } from '@/api/modules/als/dataImport'
+import { treeSelectApi } from '@/api/modules/als/aircraft'
 const { proxy } = getCurrentInstance() as ComponentInternalInstance
 const { sys_common_status, common_type } = toRefs<any>(proxy?.useDict('sys_common_status', 'common_type'))
-
+onMounted(() => {
+  getTreeFilter()
+})
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
 // 表单model
 const model = ref({})
+let initParam = reactive({ aircraftId: '' })
+let treeFilterData = ref<any>([])
+let treeOptions = ref<any>([])
+const getTreeFilter = async () => {
+  const { data } = await treeSelectApi()
+  treeOptions.value = data
+  treeFilterData.value.push({
+    id: '0',
+    label: '所有机型',
+    parentId: '',
+    children: data
+  })
+}
+
+// 树形筛选切换
+const changeTreeFilter = (val: string) => {
+  proTable.value!.pageable.pageNum = 1
+  initParam.aircraftId = val === '0' ? '' : val
+}
+
 // 删除数据导入信息信息
 const deleteDataImport = async (params: any) => {
   await useHandleData(delDataImportApi, params.id, '删除【' + params.id + '】数据导入信息')
@@ -92,7 +118,7 @@ const columns = reactive<ColumnProps<any>[]>([
     tag: true,
     enum: common_type,
     search: {
-      el: 'tree-select'
+      el: 'select'
     }
   },
   {
@@ -106,9 +132,6 @@ const columns = reactive<ColumnProps<any>[]>([
   {
     prop: 'aircraftNo',
     label: '机号',
-    search: {
-      el: 'input'
-    },
     width: 120
   },
   {
@@ -116,7 +139,7 @@ const columns = reactive<ColumnProps<any>[]>([
     label: '飞行日期',
     search: {
       el: 'date-picker',
-      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
+      props: { type: 'date', valueFormat: 'YYYY-MM-DD' }
     },
     width: 120
   },
@@ -166,19 +189,22 @@ const setItemsOptions = () => {
       }
     },
     {
-      label: '架次号',
-      prop: 'sortieNo',
-      rules: [{ required: true, message: '架次号不能为空', trigger: 'blur' }],
+      label: '机号',
+      prop: 'aircraftId',
+      rules: [{ required: true, message: '机号不能为空', trigger: 'blur' }],
       compOptions: {
-        placeholder: '请输入架次号'
+        elTagName: 'tree-select',
+        enum: treeOptions.value,
+        valueKey: 'id',
+        placeholder: '请输入机号'
       }
     },
     {
-      label: '机号',
-      prop: 'aircraftNo',
-      rules: [{ required: true, message: '机号不能为空', trigger: 'blur' }],
+      label: '架次号',
+      prop: 'sortieNo',
+      rules: [{ required: true, message: '架次号不能为空', trigger: 'blur' }],
       compOptions: {
-        placeholder: '请输入机号'
+        placeholder: '请输入架次号'
       }
     },
     {