参数配置分页

src/views/attendance/business-trip/index.vue

@@ -66,6 +66,7 @@ import {useRouter} from 'vue-router'
 import {getTokenHeader} from "~src/api/request/header";
 import businessApi from '~api/attendance/business-trip.js';
 import {getArrValue} from "js-fast-way"
+import {getProjectList, getDictInfo} from "~api/other";
 const router = useRouter()
 onMounted(()=>{
   getTableData()
@@ -98,6 +99,7 @@ const peopleoption=ref([
     {name: '张三', key: '1'},
     {name: '李四', key: '2'},
 ])
+
 //分页被点击
 const pageChange = ({current, size}) => {
     searchForm.value.current = current

src/views/attendance/business-trip/info.vue

@@ -12,50 +12,54 @@
                               <el-form-item label="出差事由：" prop="tripDesc">
                                   <el-input v-model="formModel.tripDesc"/>
                               </el-form-item>
-                              <HcCardItem :title="'行程'+ Number(index+1) " class="mt-2 hc-card-item-box" v-for="(item,index) in journeyList" ui="hac-bg-grey">
-                                    <el-form-item label="交通工具" prop="trafficType">
-                                      <el-select v-model="formModel.trafficType" block clearable placeholder="请选择交通工具">
-                                          <el-option v-for="item in trafficType" :label="item.name" :value="item.key"/>
-                                      </el-select>
-                                  </el-form-item>
-                                  <el-form-item label="单程往返" prop="isSingletonType">
-                                      <el-select v-model="formModel.isSingletonType" block clearable placeholder="请选择">
-                                          <el-option v-for="item in wayType" :label="item.name" :value="item.key"/>
-                                      </el-select>
-                                  </el-form-item>
-                                  <el-form-item label="出发城市" prop="startCity">
-                                    <el-select v-model="formModel.startCity" block clearable placeholder="请选择出发城市">
-                                          <el-option v-for="item in cityType" :label="item.name" :value="item.key"/>
-                                      </el-select>
-                                  </el-form-item>
-                                  <el-form-item label="目的城市" prop="endCity">
-                                    <el-select v-model="formModel.endCity" block clearable placeholder="请选择目的城市">
-                                          <el-option v-for="item in cityType" :label="item.name" :value="item.key"/>
-                                      </el-select>
-                                  </el-form-item>
-                                  <el-form-item label="开始时间">
-                                    <el-date-picker
-                                        v-model="formModel.startDate"
-                                        type="date"
-                                        placeholder="请选择开始时间"
-                                        style="width: 100%;"
-                                        format="YYYY-MM-DD"
-                                         value-format="YYYY-MM-DD"  
-                                    />
-                                  </el-form-item>
-                                  <el-form-item label="结束时间">
-                                    <el-date-picker
-                                        v-model="formModel.endDate"
-                                        type="date"
-                                        placeholder="请选择结束时间"
-                                        style="width: 100%;"
-                                        format="YYYY-MM-DD" 
-                                        value-format="YYYY-MM-DD"  
-                                    />
-                                  </el-form-item>
-                                  <el-form-item label="时长" prop="duration">
-                                      <el-input v-model="formModel.duration"/>
-                                  </el-form-item>
+                              <HcCardItem :title="'行程'+ Number(index+1) " class="mt-2 hc-card-item-box" v-for="(item,index) in formModel.journeyList" ui="hac-bg-grey">
+                        
+                                    <el-form :ref="(el) => setFormItemRefs(el, index)" :model="item" :rules="formItemRules" label-position="left" size="large">
+                                            <el-form-item label="交通工具" prop="trafficType">
+                                                <el-select v-model="item.trafficType" block clearable placeholder="请选择">
+                                                    <el-option v-for="item in trafficTypeData" :label="item.dictName" :value="item.dictValue"/>
+                                                </el-select>
+                                            </el-form-item>
+                                            <el-form-item label="单程往返" prop="isSingletonType">
+                                                <el-select v-model="item.isSingletonType" block clearable placeholder="请选择">
+                                                    <el-option v-for="item in wayType" :label="item.name" :value="item.key"/>
+                                                </el-select>
+                                            </el-form-item>
+                                            <el-form-item label="出发城市" prop="startCity">
+                                                <el-select v-model="item.startCity" block clearable placeholder="请选择出发城市">
+                                                    <el-option v-for="item in cityType" :label="item.name" :value="item.key"/>
+                                                </el-select>
+                                            </el-form-item>
+                                            <el-form-item label="目的城市" prop="endCity">
+                                                <el-select v-model="item.endCity" block clearable placeholder="请选择目的城市">
+                                                    <el-option v-for="item in cityType" :label="item.name" :value="item.key"/>
+                                                </el-select>
+                                            </el-form-item>
+                                            <el-form-item label="开始时间">
+                                                <el-date-picker
+                                                    v-model="item.startDate"
+                                                    type="date"
+                                                    placeholder="请选择开始时间"
+                                                    style="width: 100%;"
+                                                    format="YYYY-MM-DD"
+                                                    value-format="YYYY-MM-DD"  
+                                                />
+                                            </el-form-item>
+                                            <el-form-item label="结束时间">
+                                                <el-date-picker
+                                                    v-model="item.endDate"
+                                                    type="date"
+                                                    placeholder="请选择结束时间"
+                                                    style="width: 100%;"
+                                                    format="YYYY-MM-DD" 
+                                                    value-format="YYYY-MM-DD"  
+                                                />
+                                            </el-form-item>
+                                            <el-form-item label="时长" prop="duration">
+                                                <el-input v-model="item.duration"/>
+                                            </el-form-item>
+                               
+                            </el-form>
                                   <span class="tip ml-8">时长将自动计入考勤统计</span>
                                   <!-- <template #extra>
                                         <el-button type="primary" size="small"  @click="addJourney(item,index)">
@@ -67,7 +71,12 @@
                                             <span>删除行程</span>
                                         </el-button>
                                     </template> -->
-                                
+                                    <template #extra>
+                                        <el-button type="danger" size="small" @click="delJourney(index)" v-if="index > 0">
+                                            <HcIcon name="delete-bin"/>
+                                            <span>删除行程</span>
+                                        </el-button>
+                                    </template>
                               </HcCardItem>
                               <div  class="mt-16" style="margin-bottom: 40px;">
                                 <el-divider content-position="right" border-style="dashed">
@@ -100,8 +109,8 @@
                                         </el-select>
                               </el-form-item>
                               <el-form-item label="所属项目" prop="projectId" placeholder="请选择同行人">
-                                        <el-select v-model="formModel.projectId" block clearable placeholder="请选择交通工具">
-                                          <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
+                                        <el-select v-model="formModel.projectId" block clearable placeholder="请选择">
+                                          <el-option v-for="item in projectType" :label="item.projectName" :value="item.projectId"/>
                                       </el-select>
                               </el-form-item>
                               <el-form-item label="关联预算计划" prop="key">
@@ -132,7 +141,7 @@
                     </el-scrollbar>
                 </div>
                 <div class="action">
-                    <el-button type="warning" hc-btn>
+                    <el-button type="warning" hc-btn @clicl="saveClick" :loading="saveLoading">
                         <HcIcon name="draft"/>
                         <span>暂存草稿</span>
                     </el-button>
@@ -164,6 +173,8 @@
 <script setup>
 import {ref, onActivated} from "vue";
 import {useRoute, useRouter} from 'vue-router'
+import {getProjectList, getDictInfo} from "~api/other";
+import {arrIndex, deepClone, formValidate, getArrValue} from "js-fast-way";
 
 const router = useRouter()
 const useRoutes = useRoute()
@@ -176,18 +187,81 @@ const dataId = ref(useRoutes?.query?.id ?? '')
 onActivated(() => {
   dataType.value = useRoutes?.query?.type ?? 'view'
   dataId.value = useRoutes?.query?.id ?? ''
+  getTrafficType()
+  getProjectData()
 })
 const journeyList=ref([
   {},
 
 ])
+//行程表单
+const formItemRules = {
+    isSingletonType: {
+      required: true,
+      trigger: 'blur',
+      message: "请选择单程往返"
+  },
+  trafficType: {
+      required: true,
+      trigger: 'blur',
+      message: "请选择交通工具"
+  },
+  startCity: {
+      required: true,
+      trigger: 'blur',
+      message: "请选择出发城市"
+  },
+  endCity: {
+      required: true,
+      trigger: 'blur',
+      message: "请选择目的城市"
+  },
+  startDate: {
+      required: true,
+      trigger: 'blur',
+      message: "请选择开始时间"
+  },
+  endDate: {
+      required: true,
+      trigger: 'blur',
+      message: "请选择结束时间"
+  },
+  duration: {
+      required: true,
+      trigger: 'blur',
+      message: "请输入时长"
+  },
+  durationAll:{
+    required: true,
+      trigger: 'blur',
+      message: "请输入天数"
+  },
+}
+const formRefs = ref([])
+const setFormItemRefs = (el, index) => {
+    if (el) {
+        let indexs = arrIndex(formRefs.value, 'index', index)
+        if (indexs !== -1) {
+            formRefs.value[index].ref = el
+        } else {
+            formRefs.value.push({index: index, ref: el});
+        }
+    }
+}
+
+//获取表单的ref
+const getFormRef = async (index) => {
+    const indexs = arrIndex(formRefs.value, 'index', index)
+    return formRefs.value[indexs].ref
+}
+
 //增加行程addJourney
 const addJourney=(item,index)=>{
-  journeyList.value.push({})
+   formModel.value?.journeyList.push({})
 }
 const delJourney=(item,index)=>{
     console.log(index,'index');
-    journeyList.value.splice(index, 1)
+    formModel?.value.journeyList.splice(index, 1)
 }
 //单程往返
 const wayType = ref([
@@ -196,12 +270,19 @@ const wayType = ref([
  
 ])
 //交通工具
-const trafficType=ref([
-  {name: '汽车', key: '1'},
-  {name: '动车', key: '2'},
-  {name: '飞机', key: '3'},
-  {name: '轮船', key: '4'},
+const trafficTypeData=ref([
+
 ])
+//交通类型字典
+const getTrafficType= async () => {
+    const {error, code, data} = await getDictInfo('traffic_type')
+    //判断状态
+    if (!error && code === 200) {
+        trafficTypeData.value = getArrValue(data)
+    } else {
+        trafficTypeData.value = []
+    }
+}
 //出发城市cityType
 const cityType=ref([
   {name: '北京', key: '1'},
@@ -211,12 +292,20 @@ const cityType=ref([
 ])
 //项目类型
 const projectType = ref([
-  {name: '项目1', key: '1'},
-  {name: '项目11', key: '2'},
-  {name: '项目2', key: '3'},
-  {name: '项目3+软件', key: '4'},
-  {name: '项目1+软件', key: '5'},
+
 ])
+
+//获取项目数据
+
+const getProjectData = async () => {
+    const {error, code, data} = await getProjectList()
+    //判断状态
+    if (!error && code === 200) {
+        projectType.value = getArrValue(data)
+    } else {
+        projectType.value = []
+    }
+}
 //同行人
 const partneroptions = ref([
   {name: '小黄', key: '1'},
@@ -236,54 +325,23 @@ const contractType = ref([
 
 //顶部表单数据
 const formRef = ref(null)
-const formModel = ref({})
+const formModel = ref({
+    journeyList:[{}]
+})
 const formRules = {
     tripDesc: {
       required: true,
       trigger: 'blur',
       message: "请输入项出差事由"
   },
-  isSingletonType: {
-      required: true,
-      trigger: 'blur',
-      message: "请选择单程往返"
-  },
-  startCity: {
-      required: true,
-      trigger: 'blur',
-      message: "请选择出发城市"
-  },
-  endCity: {
-      required: true,
-      trigger: 'blur',
-      message: "请选择目的城市"
-  },
-  startDate: {
-      required: true,
-      trigger: 'blur',
-      message: "请选择开始时间"
-  },
-  endDate: {
-      required: true,
-      trigger: 'blur',
-      message: "请选择结束时间"
-  },
-  duration: {
-      required: true,
-      trigger: 'blur',
-      message: "请输入时长"
-  },
-  durationAll:{
-    required: true,
-      trigger: 'blur',
-      message: "请输入天数"
-  },
+ 
   projectId: {
       required: true,
       trigger: 'blur',
       message: "请选择项目"
   },
 
+
 }
 
 
@@ -340,8 +398,25 @@ const tableBudgetData = ref([
     {id: 3, key1: 'xxxx'},
     {id: 4, key1: 'xxxx'},
 ])
-const saveClick=()=>{
-    console.log('提交',formModel.value);
+const saveLoading=ref(false)
+const saveClick=async()=>{
+    // console.log('提交',formModel.value);
+    const res = await formValidate(formRef.value)
+    if (!res) return false;
+    //处理明细表单效验
+    saveLoading.value = true
+    const form = formModel.value.journeyList
+    for (let i = 0; i < form.length; i++) {
+        const refs = await getFormRef(i)
+        const res = await formValidate(refs)
+        if (!res) {
+            saveLoading.value = false
+            return
+        }else{
+            console.log(formModel.value,'11111');
+        }
+    }
+    //发起请求
 }
 </script>
 

src/views/system/components/tab-other.vue

@@ -42,7 +42,10 @@
                 <el-button size="small" type="primary" @click="configModalclick(row)">字典配置</el-button>
                 
             </template>
-        </HcTable>
+      </HcTable>
+      <template #action>
+            <HcPages :pages="searchForm" @change="pageChange"></HcPages>
+        </template>
 
         <!-- 新增编辑一级字典 -->
         <HcDialog bgColor="#ffffff" isToBody  :show="codeModal" :title="codeModalTitle" @close="codeModalClose"  widths="62rem"  @save="saveparentClick">
@@ -246,11 +249,21 @@ onMounted(() => {
 })
 //搜索表单
 const searchForm = ref({
+  
+    current: 1, size: 20,total:0
 })
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
 const tableLoaing=ref(false)
 const getTableData=async()=>{
     tableLoaing.value=true
     const { error, code, data,msg } = await getParentList({
+        current:searchForm.value.current,
+        size:searchForm.value.size,
         type:tabsType.value,
         code:searchForm.value?.code||'',
         dictName:searchForm.value?.dictName||'',
@@ -259,6 +272,8 @@ const getTableData=async()=>{
     tableLoaing.value=false
     if (!error && code === 200) {
         tableData.value = getArrValue(data['records'])
+        searchForm.value.total=data['total']
+      
     } 
     else {
         tableData.value =[]