hrp-ui-base 1.4.7 → 1.4.8

package/packages/approval-process/packages/flow/form-component/associated-approval-form/modules/associated-approval-form-mobile.vue

@@ -1,297 +1,297 @@
-<!-- 
- * @description: 关联审批单弹窗组件移动端
- * @fileName: associated-approval-form-mobile.vue 
- * @author: huatuo 
-!-->
-<template>
-  <van-popup v-model:show="dialogVisible" position="bottom" :style="{ height: '90%' }" >
-    <div class="associated-approvel-dialog-content-mobile">
-      <div class="associated-button-box">
-        <div class="associated-button-cancel" @click="dialogVisible = false">取消</div>
-        <!-- @vue-ignore -->
-        <div class="associated-button-submit" @click="submitForm">确认</div>
-      </div>
-      <van-tabs v-model:active="searchBo.approvalTypeCode" class="demo-tabs" @change="changeTabType"  style="margin-bottom: 8px">
-        <van-tab title="我审批的" name="Approver"></van-tab>
-        <van-tab title="我发起的" name="Create"></van-tab>
-        <van-tab title="抄送我的" name="Ccto"></van-tab>
-      </van-tabs>
-      <el-input v-model="searchBo.keyWord" placeholder="搜索名字、标题、表单id" class="associated-search-input" @input="getListOne"
-        clearable>
-      </el-input>
-      <div class="flexRowStart" v-if="false">
-        审批类型：
-        <el-select v-model="searchBo.jobName" placeholder="请选择" style="width: 240px" clearable @change="getList">
-          <el-option v-for="item in jobList" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
-      </div>
-      <el-divider class="associated-divider" />
-      <div class="scroller-area-box" v-loading="formLoading">
-        <div class="search-approval-list-box">
-          <van-pull-refresh v-model="formLoading" @refresh="getList">
-            <van-list v-model:loading="formLoading" :finished="tableTotal <= searchBo.pageSize * searchBo.pageNum"
-              finished-text="没有更多了" @load="loadMoreList">
-              <div class="search-approval-item" v-for="(item, index) in tableData" :key="item.formId"
-                @click="addItemToCheck(item, index)">
-                <div class="search-approval-left">
-                  <el-checkbox v-model="item.checked" label="" size="large" @click.prevent="" />
-                  <img :src="item.avatar || defaultAvatar" :alt="item.createUserName">
-                  <div class="search-approval-item-content">
-                    <div class="search-approval-item-form-name">
-                      {{ item.createUserName + '发起的' + item.jobName }}
-                    </div>
-                    <div class="search-approval-item-man">
-                      {{ '发起人：' + (item.createUserName || '-') }}
-                    </div>
-                    <div class="search-approval-item-create-time">
-                      {{ '创建时间：' + (item.createTime || '-') }}
-                    </div>
-
-                    <div class="search-approval-item-end-time">
-                      {{ '结束时间：' + (item.finishTime || '-') }}
-                    </div>
-                  </div>
-                </div>
-                <div class="search-approval-right">
-                  <span
-                    :style="item.statusCode === 'success' ? { color: '#67C23A' } : item.statusCode === 'fail' ? { color: '#F56C6C' } : { color: '#909399' }">
-                    {{ item.statusName }}
-                  </span>
-                </div>
-
-              </div>
-            </van-list>
-          </van-pull-refresh>
-        </div>
-      </div>
-    </div>
-  </van-popup>
-</template>
-<script lang="ts" name="associatedApprovalFormPc" setup>
-import { ref,  } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
-import moment from "moment";
-import throttle from '../../../../utils/throttle'
-import type AssociatedApprovalBO from "hrp-ui-base/api/bms/flow/bo/AssociatedApprovalBO";
-import type AssociatedApprovalVO from "hrp-ui-base/api/bms/flow/bo/AssociatedApprovalVO";
-import type SystemVO from "hrp-ui-base/api/bms/flow/bo/SystemVO";
-import FlowInstanceController from "hrp-ui-base/api/bms/flow/FlowInstanceController";
-import FlowSheetController from "hrp-ui-base/api/bms/flow/FlowSheetController";
-import { debounce } from "lodash";
-import defaultAvatar from '../../associated-approval-form/assets/avatar.svg'
-
-const props = defineProps(['chooseDetailList'])
-/** 成功回调向上传输选中的数据 */
-const emits = defineEmits(['success'])
-/** 个人信息 */
-const dialogVisible = ref(false); // 弹窗的是否展示
-const dialogTitle = ref(""); // 弹窗的标题
-const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref(""); // add - 新增； edit - 修改 ； detail - 详情
-
-const formRef = ref(); // 表单 Ref
-/** 分页总数 */
-const tableTotal = ref<number>(0)
-const searchBo = ref<AssociatedApprovalBO>({
-  approvalTypeCode: 'Create',
-  jobName: '',
-  statusCode: 'success',
-  keyWord: '',
-  pageSize: 10,
-  pageNum: 1,
-})
-/** 分页数据 */
-const tableData = ref<AssociatedApprovalVO[]>([])
-/** 请求来的数据的分页 */
-const tableRef = ref()
-/** 获取可供选择的数据列表 */
-const getList = async () => {
-  formLoading.value = true
-  searchBo.value.pageSize = 10
-  searchBo.value.pageNum = 1
-
-  await FlowInstanceController.selectAssociatedApprovalFormList(searchBo.value).then((data) => {
-    if (data.code == 200 && data.res) {
-      tableData.value = data.res.records
-      tableTotal.value = data.res.total
-      searchBo.value.pageSize = data.res.size
-      searchBo.value.pageNum = data.res.current
-
-      if (currentDataList.value.length > 0) {
-        for (let i = 0; i < tableData.value.length; i++) {
-          for (let j = 0; j < currentDataList.value.length; j++) {
-            if (tableData.value[i].formId === currentDataList.value[j].formId) {
-              tableData.value[i].checked = true
-              break;
-            }
-          }
-        }
-      }
-    }
-  }).finally(() => {
-    formLoading.value = false
-  })
-}
-/** 搜索可供选择的数据列表 */
-const getListOne = debounce(async () => {
-  formLoading.value = true
-  searchBo.value.pageSize = 10
-  searchBo.value.pageNum = 1
-
-  await FlowInstanceController.selectAssociatedApprovalFormList(searchBo.value).then((data) => {
-    if (data.code == 200 && data.res) {
-      tableData.value = data.res.records
-      tableTotal.value = data.res.total
-      searchBo.value.pageSize = data.res.size
-      searchBo.value.pageNum = data.res.current
-
-      if (currentDataList.value.length > 0) {
-        for (let i = 0; i < tableData.value.length; i++) {
-          for (let j = 0; j < currentDataList.value.length; j++) {
-            if (tableData.value[i].formId === currentDataList.value[j].formId) {
-              tableData.value[i].checked = true
-              break;
-            }
-          }
-        }
-      }
-    }
-  }).finally(() => {
-    formLoading.value = false
-  })
-},1000)
-/** 下拉加载更多 */
-const loadMoreList = async()=>{
-  searchBo.value.pageNum += 1
-  formLoading.value = true
-  await FlowInstanceController.selectAssociatedApprovalFormList(searchBo.value).then((data) => {
-    if (data.code == 200 && data.res) {
-      console.log(searchBo.value.pageNum)
-      tableData.value.push(...data.res.records)
-      tableTotal.value = data.res.total
-      searchBo.value.pageSize = data.res.size 
-      searchBo.value.pageNum = data.res.current
-
-      if (currentDataList.value.length > 0) {
-        for (let i = 0; i < tableData.value.length; i++) {
-          for (let j = 0; j < currentDataList.value.length; j++) {
-            if (tableData.value[i].formId === currentDataList.value[j].formId) {
-              tableData.value[i].checked = true
-              break;
-            }
-          }
-        }
-      }
-    }
-  }).finally(() => {
-    formLoading.value = false
-  })
-}
-/** 当前用户选中数据列表 */
-const currentDataList = ref<AssociatedApprovalVO[]>([])
-/** 打开弹窗 */
-const open = async (rows: AssociatedApprovalVO[]) => {
-  dialogVisible.value = true;
-  dialogTitle.value = "关联审批单";
-  resetForm();
-  if (rows && Array.isArray(rows) && rows.length > 0) {
-    currentDataList.value = JSON.parse(JSON.stringify(rows))
-  } else {
-    currentDataList.value = [];
-  }
-  formLoading.value = true
-  getJobNameList()
-  await getList();
-  formLoading.value = false
-};
-/** 提交表单 */
-const submitForm = new throttle().use(async () => {
-  // 校验表单
-  formLoading.value = true;
-  emits('success', currentDataList.value)
-  dialogVisible.value = false
-  formLoading.value = false;
-
-}, 2000, true);
-
-/** 重置表单 */
-const resetForm = () => {
-
-  formRef.value?.resetFields();
-};
-
-
-/** 切换上方tabs */
-const changeTabType = async (type: string) => {
-  formLoading.value = true;
-  searchBo.value.approvalTypeCode = type
-  await getList();
-  formLoading.value = false;
-}
-
-// table函数
-const selectList = ref<AssociatedApprovalVO[]>([])
-// 选择某条入库单
-const selectHandler = (selection: AssociatedApprovalVO[], row: AssociatedApprovalVO) => {
-  selectList.value = selection
-}
-
-
-/** 获取所有应用列表 */
-const jobList = ref<SystemVO[] >([])
-const getJobNameList = async () => {
-  await FlowSheetController.selectFlowSheetList().then((data) => {
-    if (data.code === 200 && data.res) {
-      jobList.value = data.res;
-    } else {
-      jobList.value = [];
-    }
-  });
-};
-/** 删除审批单 */
-const deleteProcessOrder = (row: AssociatedApprovalVO, index: number) => {
-  let tableAimIndex = tableData.value.findIndex((item) => { return item.formId === row.formId })
-  if (tableAimIndex > -1) {
-    tableData.value[tableAimIndex].checked = false
-  }
-  currentDataList.value.splice(index, 1)
-}
-/** 选中、反选 审批单 */
-const addItemToCheck = (item: AssociatedApprovalVO, index: number) => {
-  if (item.checked) {
-    item.checked = false;
-    let indexOfChecked = currentDataList.value.findIndex((i) => {
-      return i.formId === item.formId
-    });
-    currentDataList.value.splice(indexOfChecked, 1)
-  } else {
-    item.checked = true;
-    currentDataList.value.push(item);
-  }
-}
-// 导出方法
-defineExpose({ open }); // 提供 open 方法，用于打开弹窗
-</script>
-
-<style scoped lang="scss">
-@use '../style/curd-area-mobile.scss';
-</style>
-
-<style lang="scss">
-.associated-approvel-dialog-box {
-  .el-form-item {
-    margin-bottom: 18px;
-  }
-
-  .el-dialog__body {
-    height: auto;
-    max-height: 700px;
-    overflow-y: auto;
-  }
-
-  .el-form-item__content {
-    width: 100%;
-    margin-left: 0 !important;
-  }
-}
-</style>
+<!-- 
+ * @description: 关联审批单弹窗组件移动端
+ * @fileName: associated-approval-form-mobile.vue 
+ * @author: huatuo 
+!-->
+<template>
+  <van-popup v-model:show="dialogVisible" position="bottom" :style="{ height: '90%' }" >
+    <div class="associated-approvel-dialog-content-mobile">
+      <div class="associated-button-box">
+        <div class="associated-button-cancel" @click="dialogVisible = false">取消</div>
+        <!-- @vue-ignore -->
+        <div class="associated-button-submit" @click="submitForm">确认</div>
+      </div>
+      <van-tabs v-model:active="searchBo.approvalTypeCode" class="demo-tabs" @change="changeTabType"  style="margin-bottom: 8px">
+        <van-tab title="我审批的" name="Approver"></van-tab>
+        <van-tab title="我发起的" name="Create"></van-tab>
+        <van-tab title="抄送我的" name="Ccto"></van-tab>
+      </van-tabs>
+      <el-input v-model="searchBo.keyWord" placeholder="搜索名字、标题、表单id" class="associated-search-input" @input="getListOne"
+        clearable>
+      </el-input>
+      <div class="flexRowStart" v-if="false">
+        审批类型：
+        <el-select v-model="searchBo.jobName" placeholder="请选择" style="width: 240px" clearable @change="getList">
+          <el-option v-for="item in jobList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </div>
+      <el-divider class="associated-divider" />
+      <div class="scroller-area-box" v-loading="formLoading">
+        <div class="search-approval-list-box">
+          <van-pull-refresh v-model="formLoading" @refresh="getList">
+            <van-list v-model:loading="formLoading" :finished="tableTotal <= searchBo.pageSize * searchBo.pageNum"
+              finished-text="没有更多了" @load="loadMoreList">
+              <div class="search-approval-item" v-for="(item, index) in tableData" :key="item.formId"
+                @click="addItemToCheck(item, index)">
+                <div class="search-approval-left">
+                  <el-checkbox v-model="item.checked" label="" size="large" @click.prevent="" />
+                  <img :src="item.avatar || defaultAvatar" :alt="item.createUserName">
+                  <div class="search-approval-item-content">
+                    <div class="search-approval-item-form-name">
+                      {{ item.createUserName + '发起的' + item.jobName }}
+                    </div>
+                    <div class="search-approval-item-man">
+                      {{ '发起人：' + (item.createUserName || '-') }}
+                    </div>
+                    <div class="search-approval-item-create-time">
+                      {{ '创建时间：' + (item.createTime || '-') }}
+                    </div>
+
+                    <div class="search-approval-item-end-time">
+                      {{ '结束时间：' + (item.finishTime || '-') }}
+                    </div>
+                  </div>
+                </div>
+                <div class="search-approval-right">
+                  <span
+                    :style="item.statusCode === 'success' ? { color: '#67C23A' } : item.statusCode === 'fail' ? { color: '#F56C6C' } : { color: '#909399' }">
+                    {{ item.statusName }}
+                  </span>
+                </div>
+
+              </div>
+            </van-list>
+          </van-pull-refresh>
+        </div>
+      </div>
+    </div>
+  </van-popup>
+</template>
+<script lang="ts" name="associatedApprovalFormPc" setup>
+import { ref,  } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import moment from "moment";
+import throttle from '../../../../utils/throttle'
+import type AssociatedApprovalBO from "hrp-ui-base/api/bms/flow/bo/AssociatedApprovalBO";
+import type AssociatedApprovalVO from "hrp-ui-base/api/bms/flow/bo/AssociatedApprovalVO";
+import type SystemVO from "hrp-ui-base/api/bms/flow/bo/SystemVO";
+import FlowInstanceController from "hrp-ui-base/api/bms/flow/FlowInstanceController";
+import FlowSheetController from "hrp-ui-base/api/bms/flow/FlowSheetController";
+import { debounce } from "lodash";
+import defaultAvatar from '../../associated-approval-form/assets/avatar.svg'
+
+const props = defineProps(['chooseDetailList'])
+/** 成功回调向上传输选中的数据 */
+const emits = defineEmits(['success'])
+/** 个人信息 */
+const dialogVisible = ref(false); // 弹窗的是否展示
+const dialogTitle = ref(""); // 弹窗的标题
+const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref(""); // add - 新增； edit - 修改 ； detail - 详情
+
+const formRef = ref(); // 表单 Ref
+/** 分页总数 */
+const tableTotal = ref<number>(0)
+const searchBo = ref<AssociatedApprovalBO>({
+  approvalTypeCode: 'Create',
+  jobName: '',
+  statusCode: 'success',
+  keyWord: '',
+  pageSize: 10,
+  pageNum: 1,
+})
+/** 分页数据 */
+const tableData = ref<AssociatedApprovalVO[]>([])
+/** 请求来的数据的分页 */
+const tableRef = ref()
+/** 获取可供选择的数据列表 */
+const getList = async () => {
+  formLoading.value = true
+  searchBo.value.pageSize = 10
+  searchBo.value.pageNum = 1
+
+  await FlowInstanceController.selectAssociatedApprovalFormList(searchBo.value).then((data) => {
+    if (data.code == 200 && data.res) {
+      tableData.value = data.res.records
+      tableTotal.value = data.res.total
+      searchBo.value.pageSize = data.res.size
+      searchBo.value.pageNum = data.res.current
+
+      if (currentDataList.value.length > 0) {
+        for (let i = 0; i < tableData.value.length; i++) {
+          for (let j = 0; j < currentDataList.value.length; j++) {
+            if (tableData.value[i].formId === currentDataList.value[j].formId) {
+              tableData.value[i].checked = true
+              break;
+            }
+          }
+        }
+      }
+    }
+  }).finally(() => {
+    formLoading.value = false
+  })
+}
+/** 搜索可供选择的数据列表 */
+const getListOne = debounce(async () => {
+  formLoading.value = true
+  searchBo.value.pageSize = 10
+  searchBo.value.pageNum = 1
+
+  await FlowInstanceController.selectAssociatedApprovalFormList(searchBo.value).then((data) => {
+    if (data.code == 200 && data.res) {
+      tableData.value = data.res.records
+      tableTotal.value = data.res.total
+      searchBo.value.pageSize = data.res.size
+      searchBo.value.pageNum = data.res.current
+
+      if (currentDataList.value.length > 0) {
+        for (let i = 0; i < tableData.value.length; i++) {
+          for (let j = 0; j < currentDataList.value.length; j++) {
+            if (tableData.value[i].formId === currentDataList.value[j].formId) {
+              tableData.value[i].checked = true
+              break;
+            }
+          }
+        }
+      }
+    }
+  }).finally(() => {
+    formLoading.value = false
+  })
+},1000)
+/** 下拉加载更多 */
+const loadMoreList = async()=>{
+  searchBo.value.pageNum += 1
+  formLoading.value = true
+  await FlowInstanceController.selectAssociatedApprovalFormList(searchBo.value).then((data) => {
+    if (data.code == 200 && data.res) {
+      console.log(searchBo.value.pageNum)
+      tableData.value.push(...data.res.records)
+      tableTotal.value = data.res.total
+      searchBo.value.pageSize = data.res.size 
+      searchBo.value.pageNum = data.res.current
+
+      if (currentDataList.value.length > 0) {
+        for (let i = 0; i < tableData.value.length; i++) {
+          for (let j = 0; j < currentDataList.value.length; j++) {
+            if (tableData.value[i].formId === currentDataList.value[j].formId) {
+              tableData.value[i].checked = true
+              break;
+            }
+          }
+        }
+      }
+    }
+  }).finally(() => {
+    formLoading.value = false
+  })
+}
+/** 当前用户选中数据列表 */
+const currentDataList = ref<AssociatedApprovalVO[]>([])
+/** 打开弹窗 */
+const open = async (rows: AssociatedApprovalVO[]) => {
+  dialogVisible.value = true;
+  dialogTitle.value = "关联审批单";
+  resetForm();
+  if (rows && Array.isArray(rows) && rows.length > 0) {
+    currentDataList.value = JSON.parse(JSON.stringify(rows))
+  } else {
+    currentDataList.value = [];
+  }
+  formLoading.value = true
+  getJobNameList()
+  await getList();
+  formLoading.value = false
+};
+/** 提交表单 */
+const submitForm = new throttle().use(async () => {
+  // 校验表单
+  formLoading.value = true;
+  emits('success', currentDataList.value)
+  dialogVisible.value = false
+  formLoading.value = false;
+
+}, 2000, true);
+
+/** 重置表单 */
+const resetForm = () => {
+
+  formRef.value?.resetFields();
+};
+
+
+/** 切换上方tabs */
+const changeTabType = async (type: string) => {
+  formLoading.value = true;
+  searchBo.value.approvalTypeCode = type
+  await getList();
+  formLoading.value = false;
+}
+
+// table函数
+const selectList = ref<AssociatedApprovalVO[]>([])
+// 选择某条入库单
+const selectHandler = (selection: AssociatedApprovalVO[], row: AssociatedApprovalVO) => {
+  selectList.value = selection
+}
+
+
+/** 获取所有应用列表 */
+const jobList = ref<SystemVO[] >([])
+const getJobNameList = async () => {
+  await FlowSheetController.selectFlowSheetList().then((data) => {
+    if (data.code === 200 && data.res) {
+      jobList.value = data.res;
+    } else {
+      jobList.value = [];
+    }
+  });
+};
+/** 删除审批单 */
+const deleteProcessOrder = (row: AssociatedApprovalVO, index: number) => {
+  let tableAimIndex = tableData.value.findIndex((item) => { return item.formId === row.formId })
+  if (tableAimIndex > -1) {
+    tableData.value[tableAimIndex].checked = false
+  }
+  currentDataList.value.splice(index, 1)
+}
+/** 选中、反选 审批单 */
+const addItemToCheck = (item: AssociatedApprovalVO, index: number) => {
+  if (item.checked) {
+    item.checked = false;
+    let indexOfChecked = currentDataList.value.findIndex((i) => {
+      return i.formId === item.formId
+    });
+    currentDataList.value.splice(indexOfChecked, 1)
+  } else {
+    item.checked = true;
+    currentDataList.value.push(item);
+  }
+}
+// 导出方法
+defineExpose({ open }); // 提供 open 方法，用于打开弹窗
+</script>
+
+<style scoped lang="scss">
+@use '../style/curd-area-mobile.scss';
+</style>
+
+<style lang="scss">
+.associated-approvel-dialog-box {
+  .el-form-item {
+    margin-bottom: 18px;
+  }
+
+  .el-dialog__body {
+    height: auto;
+    max-height: 700px;
+    overflow-y: auto;
+  }
+
+  .el-form-item__content {
+    width: 100%;
+    margin-left: 0 !important;
+  }
+}
+</style>