|
|
@@ -1,15 +1,147 @@
|
|
|
<template>
|
|
|
- <el-drawer v-model="drawer" title="I am the title" :direction="direction">
|
|
|
- <span>Hi, there!</span>
|
|
|
+ <el-drawer v-model="visibleDialog" title="审批流程" :direction="direction" size="900" @close="handleCancel">
|
|
|
+ <LeTable
|
|
|
+ ref="tableRef"
|
|
|
+ v-model:searchParams="tableOpts.searchParams"
|
|
|
+ v-bind="tableOpts"
|
|
|
+ v-model:curRow="tableOpts.curRow"
|
|
|
+ v-model:checked-options="checkedColumns"
|
|
|
+ :columns="activeColumns"
|
|
|
+ >
|
|
|
+ <template #statusSlot="scope">
|
|
|
+ <status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
|
|
|
+ <status-indicator v-else pulse type="danger"></status-indicator>
|
|
|
+ </template>
|
|
|
+ </LeTable>
|
|
|
</el-drawer>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref } from 'vue'
|
|
|
+import app from '@/api/system/app'
|
|
|
+import { computed, defineEmits, defineProps, nextTick, ref } from 'vue'
|
|
|
+import { useTablePage } from '@/hooks/useTablePage'
|
|
|
|
|
|
-const drawer = ref(false)
|
|
|
const direction = ref('rtl')
|
|
|
|
|
|
+const myProps = defineProps({
|
|
|
+ modelValue: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ userIds: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 同步值
|
|
|
+const $myEmit = defineEmits(['update:modelValue', 'successFn'])
|
|
|
+
|
|
|
+
|
|
|
+// 关闭按钮
|
|
|
+const closeDrawer = () => {
|
|
|
+ $myEmit('successFn')
|
|
|
+ $myEmit('update:modelValue', false)
|
|
|
+}
|
|
|
+
|
|
|
+// table列表数据请求
|
|
|
+const queryList = async () => {
|
|
|
+ const { options, searchParams } = tableOpts
|
|
|
+ options.loading = true
|
|
|
+ try {
|
|
|
+ const { records: list, total } = await app.appPageApi(searchParams)
|
|
|
+ tableOpts.total = total
|
|
|
+ tableOpts.list = list
|
|
|
+ } catch {
|
|
|
+ console.log('获取列表数据失败')
|
|
|
+ tableOpts.total = 0
|
|
|
+ tableOpts.list = []
|
|
|
+ options.loading = false // 更改加载中的 loading值
|
|
|
+ } finally {
|
|
|
+ options.loading = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// table 参数
|
|
|
+const columns = [
|
|
|
+ {
|
|
|
+ prop: 'identification',
|
|
|
+ label: '处理人',
|
|
|
+ minWidth: 80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'name',
|
|
|
+ label: '转交人',
|
|
|
+ minWidth: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'secretKey',
|
|
|
+ label: '原处理人',
|
|
|
+ minWidth: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'sort',
|
|
|
+ label: '任务类型',
|
|
|
+ minWidth: 80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'sort1',
|
|
|
+ label: '节点名称',
|
|
|
+ minWidth: 80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'sort2',
|
|
|
+ label: '任务状态',
|
|
|
+ minWidth: 80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'sort3',
|
|
|
+ label: '接收时间',
|
|
|
+ minWidth: 80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'sort4',
|
|
|
+ label: '捎话',
|
|
|
+ minWidth: 80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'sort5',
|
|
|
+ label: '审批意见',
|
|
|
+ minWidth: 80
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
|
|
|
+ {
|
|
|
+ options: {
|
|
|
+ showIndex: false,
|
|
|
+ multipleSelect: false
|
|
|
+ },
|
|
|
+ // 需要展示的列
|
|
|
+ columns,
|
|
|
+ // 控制列配置
|
|
|
+ columnsConfig: {
|
|
|
+ columns
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ queryList,
|
|
|
+ fetchImmediate: false
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
+nextTick(() => {
|
|
|
+ queryList()
|
|
|
+})
|
|
|
+
|
|
|
+const visibleDialog = computed({
|
|
|
+ get() {
|
|
|
+ return myProps.modelValue
|
|
|
+ },
|
|
|
+ set(val) {
|
|
|
+ $myEmit('update:modelValue', val)
|
|
|
+ }
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped></style>
|
luoyali