hrp-ui-base 1.0.1 → 1.0.2

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

@@ -0,0 +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>

package/packages/approval-process/packages/flow/form-component/associated-approval-form/style/curd-area-mobile.scss

@@ -0,0 +1,110 @@
+.associated-approvel-dialog-content-mobile{
+  height:100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 100%;
+  padding:8px 18px;
+}
+.associated-button-box{
+  height: 30px;
+  padding:  0 18px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  .associated-button-cancel{
+    color: #606266;
+  }
+  .associated-button-submit{
+    color: #1989fa;
+  
+  }
+}
+.associated-search-input {
+  width: 100%;
+  margin-bottom: 8px;
+}
+
+.associated-divider {
+  margin-bottom: 8px;
+  margin-top: 8px;
+}
+
+.search-approval-list-box {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+
+  .search-approval-item {
+    width: 100%;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    min-height: 120px;
+    height: auto;
+    padding: 8px;
+    border: 2px solid #fff;
+    border-bottom: 2px solid #F5F7FA;
+    border-radius: 8px;
+    line-height: 14px;
+    cursor: pointer;
+    .search-approval-left {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      img {
+        width: 32px;
+        height: 32px;
+        border-radius: 8px;
+        margin-top: 6px;
+        margin-right: 12px;
+      }
+    }
+
+    .search-approval-item-content {
+      .search-approval-item-form-name {
+        font-size: 14px;
+        margin-top: 8px;
+        color: var(--el-text-color-primary);
+      }
+
+      .search-approval-item-man {
+        color: #606266;
+        font-size: 12px;
+        margin-top: 8px;
+      }
+
+      .search-approval-item-create-time {
+        color: #606266;
+        font-size: 12px;
+        margin-top:6px;
+      }
+
+      .search-approval-item-end-time {
+        color: #606266;
+        font-size: 12px;
+        margin-top: 6px;
+      }
+
+    }
+
+    .search-approval-right {
+      min-width: 80px;
+      text-align: right;
+      margin-top: 8px;
+    }
+  }
+}
+.scroller-area-box{
+  max-height: 430px;
+  overflow: auto;
+}
+.search-approval-item:hover {
+  border: 2px solid #409EFF;
+}

package/packages/approval-process/packages/flow/form-component/associated-approval-form/style/curd-area.scss

@@ -0,0 +1,96 @@
+.rowBarCode {
+  height: auto;
+  max-height: 75px;
+  line-height: 25px;
+  overflow-y: auto;
+}
+
+.associated-search-input {
+  width: 100%;
+  margin-bottom: 8px;
+}
+
+.associated-divider {
+  margin-bottom: 8px;
+  margin-top: 8px;
+}
+
+.search-approval-list-box {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+
+  .search-approval-item {
+    width: 100%;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    min-height: 120px;
+    height: auto;
+    padding: 8px;
+    border: 2px solid var(--custom-theme-fill-7);
+    border-bottom: 2px solid var(--custom-theme-border-4);
+    border-radius: 8px;
+    line-height: 14px;
+    cursor: pointer;
+
+    .search-approval-left {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      img {
+        width: 32px;
+        height: 32px;
+        border-radius: 8px;
+        margin-top: 6px;
+        margin-right: 12px;
+      }
+    }
+
+    .search-approval-item-content {
+      .search-approval-item-form-name {
+        font-size: 14px;
+        margin-top: 8px;
+        color: var(--custom-theme-text-3);
+      }
+
+      .search-approval-item-man {
+        color: var(--custom-theme-text-3);
+        font-size: 12px;
+        margin-top: 8px;
+      }
+
+      .search-approval-item-create-time {
+        color: var(--custom-theme-text-3);
+        font-size: 12px;
+        margin-top: 6px;
+      }
+
+      .search-approval-item-end-time {
+        color: var(--custom-theme-text-3);
+        font-size: 12px;
+        margin-top: 6px;
+      }
+
+    }
+
+    .search-approval-right {
+      min-width: 80px;
+    }
+  }
+}
+
+.scroller-area-box {
+  max-height: 480px;
+  overflow: auto;
+}
+
+.search-approval-item:hover {
+  border: 2px solid #409EFF;
+}

package/packages/approval-process/packages/flow/form-component/associated-approval-form/style/out-put.scss

@@ -0,0 +1,48 @@
+.associated-area-box {
+  width: 100%;
+  height: auto;
+
+  .associated-area {
+
+
+    .associated-order {
+      padding-top: 8px;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      .associated-order-item {
+        width: 100%;
+        margin-bottom: 8px;
+        height: 42px;
+        padding: 0 10px;
+        background-color: var(--el-fill-color);
+        color: #606266;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        height: auto;
+        flex-grow: 1;
+        flex-shrink: 1;
+        border-radius: 7px;
+
+        .associated-order-item-right {
+          min-width: 80px;
+          cursor: default;
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-end;
+        }
+
+      }
+    }
+
+  }
+}
+
+.no-associate {
+  font-size: var(--font-size-body);
+}

package/packages/approval-process/packages/flow/form-component/show-sign.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="flexRowStart">
+    <span>签字：</span>
+    <el-image style="width: 133px; height: 100px; background: #FFFFFF;" :src="src" :preview-src-list="previewSrcList" :fit="fit" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { reactive, ref, onMounted, shallowRef, toRefs, watch } from 'vue';
+const props = defineProps({
+  src: {
+    type: String,
+    require: true,
+  },
+  previewSrcList: {
+    type: [String as any],
+    default: "cover",
+    require: true,
+  },
+  fit: {
+    type: String,
+    default: "contain",
+    require: false,
+  },
+});
+const { src, previewSrcList, fit } = toRefs(props)
+</script>
+<style scoped lang="scss"></style>