hrp-ui-base 1.4.7 → 1.4.9

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

@@ -1,314 +1,314 @@
-<!-- 
- * @description: 关联审批单弹窗组件pc端
- * @fileName: associated-approval-form-pc.vue 
- * @author: huatuo 
-!-->
-<template>
-  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="85%" size="default" style="min-width: 1100px"
-    class="associated-approvel-dialog-box" top="4vh">
-    <div class="associated-approvel-dialog-content" v-loading="formLoading">
-      <el-tabs v-model="searchBo.approvalTypeCode" class="demo-tabs" @tab-change="changeTabType" stretch>
-        <el-tab-pane label="我审批的" name="Approver"></el-tab-pane>
-        <el-tab-pane label="我发起的" name="Create"></el-tab-pane>
-        <el-tab-pane label="抄送我的" name="Ccto"></el-tab-pane>
-      </el-tabs>
-      <el-input v-model="searchBo.keyWord" placeholder="搜索名字、标题、表单id" class="associated-search-input"
-        @input="getListOne" clearable>
-      </el-input>
-      <div class="flexRowStart">
-        审批类型：
-        <el-select v-model="searchBo.jobName" filterable 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">
-        <div class="search-approval-list-box">
-          <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>
-        </div>
-        <div style="display: flex; justify-content: flex-end">
-          <el-pagination style="padding-top: 30px" background layout="total, sizes, prev, pager, next, jumper"
-            :page-sizes="[10, 20, 30, 40, 50, 100]" :total="tableTotal" v-model:page-size="searchBo.pageSize"
-            v-model:current-page="searchBo.pageNum" @current-change="getList" @size-change="getList" />
-        </div>
-        <div>当前选中的数据</div>
-        <el-table :data="currentDataList" stripe v-loading="formLoading" 
-          @select="selectHandler" @select-all="selectHandler" border style="width: 100%" ref="tableRef"
-          row-key="formId">
-          <el-table-column type="index" label="序号" align="center" width="70px" />
-          <el-table-column prop="jobName" label="审批单名称" align="center">
-            <template #default="{ row }">
-              <el-tooltip effect="dark" placement="top" :content="row.createUserName + '发起的' + row.jobName"
-                :show-after="500">
-                <div class="table-cell-text">
-                  <span>{{ row.createUserName + '发起的' + row.jobName }}</span>
-                </div>
-              </el-tooltip>
-            </template>
-          </el-table-column>
-          <el-table-column prop="createTime" label="创建时间" align="center">
-            <template #default="{ row }">
-              <el-tooltip effect="dark" placement="top" :content="row.createTime" :show-after="500">
-                <div class="table-cell-text">
-                  <span>{{ row.createTime }}</span>
-                </div>
-              </el-tooltip>
-            </template>
-          </el-table-column>
-          <el-table-column prop="finishTime" label="结束时间" align="center">
-            <template #default="{ row }">
-              <el-tooltip effect="dark" placement="top" :content="row.finishTime" :show-after="500">
-                <div class="table-cell-text">
-                  <span>{{ row.finishTime }}</span>
-                </div>
-              </el-tooltip>
-            </template>
-          </el-table-column>
-          <el-table-column prop="statusName" label="审批状态" align="center">
-            <template #default="{ row }">
-              <el-tooltip effect="dark" placement="top" :content="row.statusName" :show-after="500">
-                <div class="table-cell-text">
-                  <span>{{ row.statusName }}</span>
-                </div>
-              </el-tooltip>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" align="center" width="180"
-            v-hasPermi="['material-management/base-information/goods-sort-edit', 'material-management/base-information/goods-sort-delete']">
-
-            <template #default="{ row, $index }">
-              <el-button link type="danger" @click="deleteProcessOrder(row, $index)">删除</el-button>
-            </template>
-          </el-table-column>
-
-        </el-table>
-      </div>
-    </div>
-    <template #footer>
-      <template v-if="formType != 'detail'">
-        <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="dialogVisible = false" :disabled="formLoading">取 消</el-button>
-      </template>
-    </template>
-  </el-dialog>
-
-</template>
-<script lang="ts" name="associatedApprovalFormPc" setup>
-import { ref, reactive } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
-import moment from "moment/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 () => {
-  tableData.value = []
-  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;
-            }
-          }
-        }
-      }
-    }
-  })
-}
-/** 获取可供选择的数据列表 */
-const getListOne = debounce(async () => {
-  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;
-            }
-          }
-        }
-      }
-    }
-  })
-}, 1000)
-/** 当前用户选中数据列表 */
-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.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: 关联审批单弹窗组件pc端
+ * @fileName: associated-approval-form-pc.vue 
+ * @author: huatuo 
+!-->
+<template>
+  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="85%" size="default" style="min-width: 1100px"
+    class="associated-approvel-dialog-box" top="4vh">
+    <div class="associated-approvel-dialog-content" v-loading="formLoading">
+      <el-tabs v-model="searchBo.approvalTypeCode" class="demo-tabs" @tab-change="changeTabType" stretch>
+        <el-tab-pane label="我审批的" name="Approver"></el-tab-pane>
+        <el-tab-pane label="我发起的" name="Create"></el-tab-pane>
+        <el-tab-pane label="抄送我的" name="Ccto"></el-tab-pane>
+      </el-tabs>
+      <el-input v-model="searchBo.keyWord" placeholder="搜索名字、标题、表单id" class="associated-search-input"
+        @input="getListOne" clearable>
+      </el-input>
+      <div class="flexRowStart">
+        审批类型：
+        <el-select v-model="searchBo.jobName" filterable 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">
+        <div class="search-approval-list-box">
+          <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>
+        </div>
+        <div style="display: flex; justify-content: flex-end">
+          <el-pagination style="padding-top: 30px" background layout="total, sizes, prev, pager, next, jumper"
+            :page-sizes="[10, 20, 30, 40, 50, 100]" :total="tableTotal" v-model:page-size="searchBo.pageSize"
+            v-model:current-page="searchBo.pageNum" @current-change="getList" @size-change="getList" />
+        </div>
+        <div>当前选中的数据</div>
+        <el-table :data="currentDataList" stripe v-loading="formLoading" 
+          @select="selectHandler" @select-all="selectHandler" border style="width: 100%" ref="tableRef"
+          row-key="formId">
+          <el-table-column type="index" label="序号" align="center" width="70px" />
+          <el-table-column prop="jobName" label="审批单名称" align="center">
+            <template #default="{ row }">
+              <el-tooltip effect="dark" placement="top" :content="row.createUserName + '发起的' + row.jobName"
+                :show-after="500">
+                <div class="table-cell-text">
+                  <span>{{ row.createUserName + '发起的' + row.jobName }}</span>
+                </div>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column prop="createTime" label="创建时间" align="center">
+            <template #default="{ row }">
+              <el-tooltip effect="dark" placement="top" :content="row.createTime" :show-after="500">
+                <div class="table-cell-text">
+                  <span>{{ row.createTime }}</span>
+                </div>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column prop="finishTime" label="结束时间" align="center">
+            <template #default="{ row }">
+              <el-tooltip effect="dark" placement="top" :content="row.finishTime" :show-after="500">
+                <div class="table-cell-text">
+                  <span>{{ row.finishTime }}</span>
+                </div>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column prop="statusName" label="审批状态" align="center">
+            <template #default="{ row }">
+              <el-tooltip effect="dark" placement="top" :content="row.statusName" :show-after="500">
+                <div class="table-cell-text">
+                  <span>{{ row.statusName }}</span>
+                </div>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="180"
+            v-hasPermi="['material-management/base-information/goods-sort-edit', 'material-management/base-information/goods-sort-delete']">
+
+            <template #default="{ row, $index }">
+              <el-button link type="danger" @click="deleteProcessOrder(row, $index)">删除</el-button>
+            </template>
+          </el-table-column>
+
+        </el-table>
+      </div>
+    </div>
+    <template #footer>
+      <template v-if="formType != 'detail'">
+        <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="dialogVisible = false" :disabled="formLoading">取 消</el-button>
+      </template>
+    </template>
+  </el-dialog>
+
+</template>
+<script lang="ts" name="associatedApprovalFormPc" setup>
+import { ref, reactive } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import moment from "moment/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 () => {
+  tableData.value = []
+  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;
+            }
+          }
+        }
+      }
+    }
+  })
+}
+/** 获取可供选择的数据列表 */
+const getListOne = debounce(async () => {
+  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;
+            }
+          }
+        }
+      }
+    }
+  })
+}, 1000)
+/** 当前用户选中数据列表 */
+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.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>