fix 高校接口对接

src/components/CommonPage/ProSearch2.vue

@@ -0,0 +1,83 @@
+<!-- 显示 4 列的搜索表单, 操作按钮所在的 el-col 自动计算 offset 保证一直靠右 -->
+<template>
+  <pro-form
+    class="search-form"
+    ref="proFormRef"
+    :model="form"
+    :items="items"
+    @updateValue="setFieldValue"
+    :grid="{ span: gridSpan }"
+    :rowProps="{ gutter: 12 }"
+    :footer="true"
+    :footer-props="{ labelWidth: '0px' }"
+    :footer-col-props="{
+      span: gridSpan,
+      offset: (gridNumber - (items.length % gridNumber) - 1) * gridSpan
+    }"
+  >
+    <template #footer>
+      <div class="flex-1 flex items-center justify-end">
+        <el-button style="width: 80px" type="primary" @click="search"
+          >查询</el-button
+        >
+        <el-button style="width: 80px" type="info" @click="reset"
+          >重置</el-button
+        >
+      </div>
+    </template>
+  </pro-form>
+</template>
+
+<script setup>
+  import { ref, computed } from 'vue';
+  import { useFormData } from '@/utils/use-form-data';
+  import ProForm from '@/components/ProForm/index.vue';
+  import { ArrowDown, ArrowUp } from '@/components/icons';
+  /** 列数 */
+  const gridNumber = 6;
+  /** 列数转为 el-col 的 span 值 */
+  const gridSpan = 24 / gridNumber;
+
+  const emit = defineEmits(['search']);
+  /** 表单实例 */
+  const proFormRef = ref(null);
+
+  const props = defineProps({
+    items: {
+      // 表单项
+      type: Array,
+      default: () => []
+    },
+    initKeys: {
+      // 初始化时需要显示的字段
+      type: Object,
+      default: () => ({})
+    }
+  });
+
+  /** 表单数据 */
+  const [form, resetFields, assignFields, setFieldValue] = useFormData({
+    ...props.initKeys
+  });
+
+  /** 搜索 */
+  const search = () => {
+    emit('search', { ...form });
+  };
+
+  function setData(data) {
+    Object.keys(data).forEach((key) => {
+      setFieldValue(key, data[key]);
+    });
+  }
+
+  /** 重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+
+  defineExpose({
+    setData
+  });
+</script>

src/components/CommonPage/SimpleForm.vue

@@ -24,24 +24,23 @@
   const props = defineProps({
     items: {
       type: Array,
-      default() {
-        return [];
-      }
-    },
-    initKeys: {
-      type: Object,
-      default() {
-        return {};
-      }
+      default: () => []
     },
     gird: {
       type: Number,
       default: 24
     }
   });
-  const [form, resetFields, assignFields, setFieldValue] = useFormData(
-    props.initKeys
+  let initKeys = [];
+  watch(
+    () => props.items,
+    (values) => {
+      initKeys = values.map((item) => item.prop);
+    },
+    { deep: true,immediate: true }
   );
+
+  const [form, resetFields, assignFields, setFieldValue] = useFormData();
   /** 提交表单 */
   const submitForm = () => {
     return new Promise((resolve, reject) => {
@@ -63,9 +62,21 @@
     });
   };
 
+  function setData(data) {
+    console.log('setData', initKeys)
+
+    Object.keys(data).forEach((key) => {
+      if (initKeys.includes(key)) {
+        setFieldValue(key, data[key]);
+      }
+    });
+    console.log(data, form, 'setData');
+  }
+
   defineExpose({
     resetFields,
     assignFields,
+    setData,
     submitForm,
     resetForm
   });

src/components/CommonPage/SimpleFormModal.vue

@@ -38,9 +38,6 @@
   /** 关闭弹窗 */
   const handleCancel = () => {
     visible.value = false;
-    nextTick(() => {
-      formRef.value?.resetForm();
-    });
   };
 
   const form = ref({});
@@ -48,8 +45,9 @@
   const handleOpen = (data) => {
     visible.value = true;
     nextTick(() => {
+      formRef.value?.resetForm();
       form.value = data;
-      formRef.value?.assignFields(data);
+      formRef.value?.setData(data);
     });
   };
 

src/styles/index.scss

@@ -145,6 +145,23 @@ body {
 
 //搜索况下时间选择框的样式
 .search-form {
+  .el-form-item {
+    margin-bottom: 12px;
+    position: relative;
+
+    .el-form-item__label {
+      position: absolute;
+      top: -16px;
+      right: 12px;
+      font-size: 14px;
+      display: inline-block;
+      z-index: 2;
+      height: 22px;
+      padding: 0;
+      width: fit-content !important;
+      background-color: #ffffff;
+    }
+  }
 
   .el-date-editor.el-input,
   .el-date-editor.el-input__wrapper {

src/views/data/universities/components/universities-edit.vue

@@ -89,8 +89,12 @@
     formData.value = Object.assign(formData.value, data || {});
     getProviceList().then((res) => {
       provinceList.value = res.data.data;
-      console.log(provinceList.value, 'formData');
     });
+    if (data && data.provinceId) {
+      getProviceList(data.provinceId).then((res) => {
+        cityList.value = res.data.data;
+      });
+    }
     editRef.value?.handleOpen(data);
   }
 

src/views/data/universities/components/universities-search.vue

@@ -1,63 +1,93 @@
 <!-- 搜索表单 -->
 <template>
   <ele-card :body-style="{ paddingBottom: '8px' }">
-    <ProSearch :columns="columns" v-model:form="form" ref="searchRef">
-      <el-col :span="6" style="min-width: 160px">
-        <el-button style="width: 80px" type="primary" plain @click="search"
-          >查询</el-button
-        >
-        <el-button style="width: 80px" type="info" @click="reset"
-          >重置</el-button
-        >
-      </el-col>
-    </ProSearch>
+    <ProSearch
+      :items="formItems"
+      ref="searchRef"
+      @search="search"
+      :initKeys="initKeys"
+    ></ProSearch>
   </ele-card>
 </template>
 
 <script setup>
   import { reactive, ref, defineEmits } from 'vue';
-  import { useFormData } from '@/utils/use-form-data';
-  import ProSearch from '@/components/CommonPage/ProSearch.vue';
-
+  import ProSearch from '@/components/CommonPage/ProSearch2.vue';
+  
+  let { proxy } = getCurrentInstance();
   const emit = defineEmits(['search']);
-  const columns = reactive([
-    { tag: 'el-input', label: '学校名称', prop: 'bookName', span: 4 },
-    { tag: 'el-input', label: '省份', prop: 'code', span: 4 },
-    {
-      tag: 'el-input',
-      label: '所在市',
-      prop: 'senderAddress',
-      span: 4
-    },
-    { tag: 'el-input', label: '办学层次', prop: 'userName', span: 4 },
-    { tag: 'el-input', label: '主管部门', prop: 'userName', span: 4 },
-    {
-      tag: 'el-select',
-      label: '标记',
-      prop: 'receivingWarehouse',
-      span: 4
-    },
-  ]);
+  const provinceList = ref([]);
+  const cityList = ref([]);
+  const formItems = computed(() => {
+    return [
+      { type: 'input', label: '学校名称', prop: 'schoolName' },
+      {
+        type: 'select',
+        label: '省份',
+        prop: 'provinceId',
+        options: provinceList.value.map((d) => {
+          return { label: d.district, value: d.id };
+        }),
+        props: {
+          filterable: true,
+          onChange: (val) => {
+            searchRef.value?.setData({ cityId: '' });
+            getProviceList(val).then((res) => {
+              cityList.value = res.data.data;
+            });
+          }
+        }
+      },
+      {
+        type: 'select',
+        label: '所在市',
+        prop: 'cityId',
+        options: cityList.value.map((d) => {
+          return { label: d.district, value: d.id };
+        }),
+        props: {
+          filterable: true
+        }
+      },
+      {
+        type: 'dictSelect',
+        label: '办学层次',
+        prop: 'schoolLevel',
+        props: {
+          code: 'school_level'
+        }
+      },
+      { type: 'input', label: '主管部门', prop: 'departmentName' },
+      {
+        type: 'dictSelect',
+        label: '标记',
+        prop: 'shcoolTag',
+        props: {
+          code: 'school_tag'
+        }
+      }
+    ];
+  });
 
-  const initKeys = {};
-  for (let i = 0; i < columns.length; i++) {
-    initKeys[columns[i].prop] = '';
+  function getProviceList(id = 1) {
+    return proxy.$http.get(`/baseinfo/districtInfo/findInfo/${id}`);
   }
+  getProviceList().then((res) => {
+    provinceList.value = res.data.data;
+  });
 
-  /** 表单数据 */
-  const [form, resetFields] = useFormData({
-    ...initKeys
+  const initKeys = reactive({
+    schoolName: '',
+    provinceId: '',
+    cityId: '',
+    schoolLevel: '',
+    departmentName: '',
+    shcoolTag: ''
   });
 
   const searchRef = ref(null);
   /** 搜索 */
-  const search = () => {
-    emit('search', { ...form });
-  };
-
-  /** 重置 */
-  const reset = () => {
-    resetFields();
-    search();
+  const search = (data) => {
+    emit('search', { ...data });
   };
 </script>

src/views/data/universities/index.vue

@@ -181,8 +181,8 @@
   });
 
   //刷新表格
-  function reload() {
-    pageRef.value?.reload();
+  function reload(where) {
+    pageRef.value?.reload(where);
   }
 
   //批量删除