hrp-ui-base 1.4.7 → 1.4.8

package/packages/approval-process/packages/flow/form-component/associated-approval-form/README.md

@@ -1,38 +1,38 @@
-## 使用说明
-
-传参
-
-props:
-
-component-type 类型 add 新增 edit 编辑 detail 详情
-
-v-model string[] 关联审批单 id的集合
-
-emits ：
-
-getAssociatedApprovalList  获取审批单详情的list
-
-getAssociatedIds 获取审批单ids集合
-
-直接引用使用即可
-
-## 使用示例
-
-```html
-<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-  <el-form-item label="关联订单" style="width: 100%">
-    <AssociatedApprovalForm v-model="bindArr" component-type="edit" @getAssociatedApprovalList="getAssociatedApprovalList" @getAssociatedIds="getAssociatedIds" ></AssociatedApprovalForm>
-   </el-form-item>
-</el-col>
-
-```
-
-```js
-import AssociatedApprovalForm from '@/views/oa/components/associated-approval-form/index.vue';
-const bindArr = ['RK20240314003','RK20240314006','RK20240316004']
-const getAssociatedApprovalList = () => {
- // 接受到修改后的处理逻辑
-}
-const getAssociatedIds = ()=>{
-}
-```
+## 使用说明
+
+传参
+
+props:
+
+component-type 类型 add 新增 edit 编辑 detail 详情
+
+v-model string[] 关联审批单 id的集合
+
+emits ：
+
+getAssociatedApprovalList  获取审批单详情的list
+
+getAssociatedIds 获取审批单ids集合
+
+直接引用使用即可
+
+## 使用示例
+
+```html
+<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+  <el-form-item label="关联订单" style="width: 100%">
+    <AssociatedApprovalForm v-model="bindArr" component-type="edit" @getAssociatedApprovalList="getAssociatedApprovalList" @getAssociatedIds="getAssociatedIds" ></AssociatedApprovalForm>
+   </el-form-item>
+</el-col>
+
+```
+
+```js
+import AssociatedApprovalForm from '@/views/oa/components/associated-approval-form/index.vue';
+const bindArr = ['RK20240314003','RK20240314006','RK20240316004']
+const getAssociatedApprovalList = () => {
+ // 接受到修改后的处理逻辑
+}
+const getAssociatedIds = ()=>{
+}
+```

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

@@ -1,159 +1,159 @@
-<!-- 
- * @description: 关联审批单弹窗组件
- * @fileName: associated-approval-form-dialog.vue 
- * @author: huatuo 
-!-->
-<template>
-
-  <div class="associated-area-box">
-    <div class="associated-area">
-      <!-- <el-button type="primary" style="font-size: 16px;" icon="plus" v-if="props.componentType === 'add' || props.componentType === 'edit'"
-        @click="opneRelativeApprovel" size="large">关联审批单</el-button> -->
-      <el-button type="primary" text bg icon="plus" @click="opneRelativeApprovel"
-        style="font-size: var(--font-size-body)" size="large"
-        v-if="props.componentType === 'add' || props.componentType === 'edit'">关联审批单</el-button>
-
-      <div class="associated-order">
-        <div v-for="(item, index) in chooseDetailList" :key="index" class="associated-order-item">
-          <div class="associated-order-item-left">
-            <el-icon style="margin-right: 10px;" v-if="IsPc()">
-              <Connection />
-            </el-icon>
-            <el-link type="primary" class="associated-order-item-name" @click="gotoRelatedPage(item)">
-              {{ item.createUserName + '发起的' + item.jobName }}
-            </el-link>
-          </div>
-          <div class="associated-order-item-right">
-            <span
-              :style="item.statusCode === 'success' ? { color: '#67C23A' } : item.statusCode === 'fail' ? { color: '#F56C6C' } : { color: '#909399' }"
-              v-if="IsPc()">{{
-          item.statusName
-        }}</span>
-            <el-icon style="margin-left: 10px;cursor: pointer;" @click="deleteItemRow"
-              v-if="props.componentType === 'add' || props.componentType === 'edit'">
-              <Close />
-            </el-icon>
-          </div>
-        </div>
-      </div>
-    </div>
-    <AssociatedApprovalFormPc v-if="IsPc()" ref='associatedApprovalFormPcRef' :chooseDetailList="chooseDetailList"
-      @success="changeChooseDetailList">
-    </AssociatedApprovalFormPc>
-    <AssociatedApprovalFormMobile v-else ref='associatedApprovalFormMobileRef' :chooseDetailList="chooseDetailList"
-      @success="changeChooseDetailList"></AssociatedApprovalFormMobile>
-  </div>
-  <div class="no-associate"
-    v-if="props.componentType == 'detail' && !(chooseDetailList && Array.isArray(chooseDetailList) && chooseDetailList.length > 0)">
-    暂无关联审批单
-  </div>
-</template>
-
-<script setup lang='ts'>
-import { watch, ref, onMounted } from 'vue'
-import AssociatedApprovalFormPc from "./modules/associated-approval-form-pc.vue"
-import AssociatedApprovalFormMobile from './modules/associated-approval-form-mobile.vue'
-import { IsPc } from '../../../utils/getEnv'
-import { Connection, Close } from '@element-plus/icons-vue'
-import { ElMessage } from 'element-plus';
-import type AssociatedApprovalVO from "hrp-ui-base/api/bms/flow/bo/AssociatedApprovalVO";
-import FlowInstanceController from "hrp-ui-base/api/bms/flow/FlowInstanceController";
-// 定义props类型
-interface associatedProps {
-  /** 绑定的审批单id[] */
-  modelValue: string[];
-  /** 当前的类型 add新增 edit编辑 detail详情*/
-  componentType: string;
-  /** 表单数据 */
-  saveFormData?: any,
-}
-const props = defineProps<associatedProps>()
-const emits = defineEmits(['update:modelValue', 'getAssociatedApprovalList', 'getAssociatedIds', 'jumpAddress'])
-
-const chooseDetailList = ref<AssociatedApprovalVO[]>([])
-
-/** 弹窗ref */
-const associatedApprovalFormPcRef = ref()
-/** 移动端ref */
-const associatedApprovalFormMobileRef = ref()
-/** 打开关联审批单 */
-const opneRelativeApprovel = () => {
-  if (IsPc()) {
-    /** pc端 */
-    associatedApprovalFormPcRef.value.open(chooseDetailList.value)
-  } else {
-    /** 移动端 */
-    associatedApprovalFormMobileRef.value.open(chooseDetailList.value)
-  }
-}
-/** 是否请求过详情 */
-const hadRequestDetail = ref<boolean>(false)
-/** 根据ids获取详情,用以展示 */
-const getIdsDetail = async (ids: string[]) => {
-  hadRequestDetail.value = true
-  await FlowInstanceController.selectLinkAssociatedApprovalFormList(ids).then((data) => {
-    if (data.code == 200 && data.res) {
-      chooseDetailList.value = data.res
-
-    } else {
-      chooseDetailList.value = []
-    }
-  })
-}
-/** 由子级修改的chooseDetailList */
-const changeChooseDetailList = (val: AssociatedApprovalVO[]) => {
-  chooseDetailList.value = val
-}
-/** 删除 */
-const deleteItemRow = (index: number) => {
-  chooseDetailList.value.splice(index, 1)
-}
-onMounted(async () => {
-})
-/** 跳转地址 */
-const gotoRelatedPage = (row: AssociatedApprovalVO) => {
-  console.error(row)
-  if (row) {
-    let str = row.approveUrl && row.approveUrl.replace('/:formId', row.formId).replace('/:id', '/' + row.formId)
-    //因为在手机端相同页面路由不跳转，因此在此加一步判断如果是手机端并且同一个页面则更换跳转方式  from jiashu
-    // const path = "/financial-management/medicinal-transactions-expenditure/edit/1794970416197021696";
-    if (str) {
-      if (!IsPc()) {
-        sessionStorage.setItem('saveFormData', JSON.stringify(props.saveFormData))
-      }
-      emits('jumpAddress', {
-        url: str,
-        funSystem: row.funSystem,
-        menuId: row.menuId,
-        menuName: row.menuName,
-        breadcrumbName: row.breadcrumbName,
-      })
-    } else {
-      ElMessage.error('数据参数错误！')
-    }
-  }
-}
-// 编辑或详情时赋予初值
-watch(() => { return props.modelValue }, async () => {
-  if (props.modelValue && (props.componentType == 'edit' || props.componentType == 'detail') && !hadRequestDetail.value) {
-    // 只有编辑情况或者详情的时候才会从外边赋予初值，在这里获得初值后进行逻辑处理
-    await getIdsDetail(props.modelValue)
-  }
-}, { deep: true })
-// 检测chooseDetailList变化时 通知外部同步变化
-watch(() => { return chooseDetailList.value }, () => {
-  emits('getAssociatedApprovalList', chooseDetailList.value)
-  emits('update:modelValue', chooseDetailList.value.map((item) => { return item.formId }))
-  emits('getAssociatedIds', chooseDetailList.value.map((item) => { return item.formId }))
-}, { deep: true })
-
-//清除数组
-const clearList = () => {
-  chooseDetailList.value = []
-}
-defineExpose({ clearList }) // 提供 open 方法，用于打开弹窗
-</script>
-
-<style scoped lang='scss'>
-@use './style/out-put.scss';
+<!-- 
+ * @description: 关联审批单弹窗组件
+ * @fileName: associated-approval-form-dialog.vue 
+ * @author: huatuo 
+!-->
+<template>
+
+  <div class="associated-area-box">
+    <div class="associated-area">
+      <!-- <el-button type="primary" style="font-size: 16px;" icon="plus" v-if="props.componentType === 'add' || props.componentType === 'edit'"
+        @click="opneRelativeApprovel" size="large">关联审批单</el-button> -->
+      <el-button type="primary" text bg icon="plus" @click="opneRelativeApprovel"
+        style="font-size: var(--font-size-body)" size="large"
+        v-if="props.componentType === 'add' || props.componentType === 'edit'">关联审批单</el-button>
+
+      <div class="associated-order">
+        <div v-for="(item, index) in chooseDetailList" :key="index" class="associated-order-item">
+          <div class="associated-order-item-left">
+            <el-icon style="margin-right: 10px;" v-if="IsPc()">
+              <Connection />
+            </el-icon>
+            <el-link type="primary" class="associated-order-item-name" @click="gotoRelatedPage(item)">
+              {{ item.createUserName + '发起的' + item.jobName }}
+            </el-link>
+          </div>
+          <div class="associated-order-item-right">
+            <span
+              :style="item.statusCode === 'success' ? { color: '#67C23A' } : item.statusCode === 'fail' ? { color: '#F56C6C' } : { color: '#909399' }"
+              v-if="IsPc()">{{
+          item.statusName
+        }}</span>
+            <el-icon style="margin-left: 10px;cursor: pointer;" @click="deleteItemRow"
+              v-if="props.componentType === 'add' || props.componentType === 'edit'">
+              <Close />
+            </el-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+    <AssociatedApprovalFormPc v-if="IsPc()" ref='associatedApprovalFormPcRef' :chooseDetailList="chooseDetailList"
+      @success="changeChooseDetailList">
+    </AssociatedApprovalFormPc>
+    <AssociatedApprovalFormMobile v-else ref='associatedApprovalFormMobileRef' :chooseDetailList="chooseDetailList"
+      @success="changeChooseDetailList"></AssociatedApprovalFormMobile>
+  </div>
+  <div class="no-associate"
+    v-if="props.componentType == 'detail' && !(chooseDetailList && Array.isArray(chooseDetailList) && chooseDetailList.length > 0)">
+    暂无关联审批单
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { watch, ref, onMounted } from 'vue'
+import AssociatedApprovalFormPc from "./modules/associated-approval-form-pc.vue"
+import AssociatedApprovalFormMobile from './modules/associated-approval-form-mobile.vue'
+import { IsPc } from '../../../utils/getEnv'
+import { Connection, Close } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus';
+import type AssociatedApprovalVO from "hrp-ui-base/api/bms/flow/bo/AssociatedApprovalVO";
+import FlowInstanceController from "hrp-ui-base/api/bms/flow/FlowInstanceController";
+// 定义props类型
+interface associatedProps {
+  /** 绑定的审批单id[] */
+  modelValue: string[];
+  /** 当前的类型 add新增 edit编辑 detail详情*/
+  componentType: string;
+  /** 表单数据 */
+  saveFormData?: any,
+}
+const props = defineProps<associatedProps>()
+const emits = defineEmits(['update:modelValue', 'getAssociatedApprovalList', 'getAssociatedIds', 'jumpAddress'])
+
+const chooseDetailList = ref<AssociatedApprovalVO[]>([])
+
+/** 弹窗ref */
+const associatedApprovalFormPcRef = ref()
+/** 移动端ref */
+const associatedApprovalFormMobileRef = ref()
+/** 打开关联审批单 */
+const opneRelativeApprovel = () => {
+  if (IsPc()) {
+    /** pc端 */
+    associatedApprovalFormPcRef.value.open(chooseDetailList.value)
+  } else {
+    /** 移动端 */
+    associatedApprovalFormMobileRef.value.open(chooseDetailList.value)
+  }
+}
+/** 是否请求过详情 */
+const hadRequestDetail = ref<boolean>(false)
+/** 根据ids获取详情,用以展示 */
+const getIdsDetail = async (ids: string[]) => {
+  hadRequestDetail.value = true
+  await FlowInstanceController.selectLinkAssociatedApprovalFormList(ids).then((data) => {
+    if (data.code == 200 && data.res) {
+      chooseDetailList.value = data.res
+
+    } else {
+      chooseDetailList.value = []
+    }
+  })
+}
+/** 由子级修改的chooseDetailList */
+const changeChooseDetailList = (val: AssociatedApprovalVO[]) => {
+  chooseDetailList.value = val
+}
+/** 删除 */
+const deleteItemRow = (index: number) => {
+  chooseDetailList.value.splice(index, 1)
+}
+onMounted(async () => {
+})
+/** 跳转地址 */
+const gotoRelatedPage = (row: AssociatedApprovalVO) => {
+  console.error(row)
+  if (row) {
+    let str = row.approveUrl && row.approveUrl.replace('/:formId', row.formId).replace('/:id', '/' + row.formId)
+    //因为在手机端相同页面路由不跳转，因此在此加一步判断如果是手机端并且同一个页面则更换跳转方式  from jiashu
+    // const path = "/financial-management/medicinal-transactions-expenditure/edit/1794970416197021696";
+    if (str) {
+      if (!IsPc()) {
+        sessionStorage.setItem('saveFormData', JSON.stringify(props.saveFormData))
+      }
+      emits('jumpAddress', {
+        url: str,
+        funSystem: row.funSystem,
+        menuId: row.menuId,
+        menuName: row.menuName,
+        breadcrumbName: row.breadcrumbName,
+      })
+    } else {
+      ElMessage.error('数据参数错误！')
+    }
+  }
+}
+// 编辑或详情时赋予初值
+watch(() => { return props.modelValue }, async () => {
+  if (props.modelValue && (props.componentType == 'edit' || props.componentType == 'detail') && !hadRequestDetail.value) {
+    // 只有编辑情况或者详情的时候才会从外边赋予初值，在这里获得初值后进行逻辑处理
+    await getIdsDetail(props.modelValue)
+  }
+}, { deep: true })
+// 检测chooseDetailList变化时 通知外部同步变化
+watch(() => { return chooseDetailList.value }, () => {
+  emits('getAssociatedApprovalList', chooseDetailList.value)
+  emits('update:modelValue', chooseDetailList.value.map((item) => { return item.formId }))
+  emits('getAssociatedIds', chooseDetailList.value.map((item) => { return item.formId }))
+}, { deep: true })
+
+//清除数组
+const clearList = () => {
+  chooseDetailList.value = []
+}
+defineExpose({ clearList }) // 提供 open 方法，用于打开弹窗
+</script>
+
+<style scoped lang='scss'>
+@use './style/out-put.scss';
 </style>