|
@@ -0,0 +1,126 @@
|
|
|
+<template>
|
|
|
+ <hc-dialog v-model="isShow" ui="hc-tasks-user-process-modal" widths="800px" title="流程设置" @close="modalClose">
|
|
|
+ <hc-table
|
|
|
+ ref="tableRef" :column="tableColumn" :datas="tableData" ui="hc-tasks-process-drop-table"
|
|
|
+ is-row-drop quick-sort is-sort @row-drop="rowDropTap" @row-sort="rowSortTap"
|
|
|
+ >
|
|
|
+ <template #name="{ row }">
|
|
|
+ <hc-table-input v-model="row.name" size="small" />
|
|
|
+ </template>
|
|
|
+ <template #flowTaskType="{ row }">
|
|
|
+ <el-select v-model="row.flowTaskType" size="small" filterable block>
|
|
|
+ <el-option v-for="item in flowTaskTypeData" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template #type="{ row }">
|
|
|
+ <el-select v-model="row.type" size="small" filterable block>
|
|
|
+ <el-option label="流程审批" :value="1" />
|
|
|
+ <el-option label="平行审批" :value="2" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template #action="{ row, index }">
|
|
|
+ <el-link type="danger" @click="delRowClick(row, index)">删除</el-link>
|
|
|
+ </template>
|
|
|
+ </hc-table>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="modalClose">取消</el-button>
|
|
|
+ <el-button type="primary" :loading="confirmLoading" @click="confirmClick">确定</el-button>
|
|
|
+ </template>
|
|
|
+ </hc-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { nextTick, ref, watch } from 'vue'
|
|
|
+import { HcDelMsg } from 'hc-vue3-ui'
|
|
|
+import { deepClone, getArrValue } from 'js-fast-way'
|
|
|
+import { getDictionaryData } from '~uti/tools'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ data: {
|
|
|
+ type: Array,
|
|
|
+ default: () => ([]),
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+const emit = defineEmits(['finish', 'close'])
|
|
|
+
|
|
|
+//双向绑定
|
|
|
+const isShow = defineModel('modelValue', {
|
|
|
+ default: false,
|
|
|
+})
|
|
|
+
|
|
|
+//监听数据
|
|
|
+const fixedData = ref([])
|
|
|
+watch(() => props.data, (data) => {
|
|
|
+ const res = getArrValue(data)
|
|
|
+ fixedData.value = deepClone(res)
|
|
|
+}, { deep: true, immediate: true })
|
|
|
+
|
|
|
+watch(isShow, (val) => {
|
|
|
+ if (val) setInitData()
|
|
|
+})
|
|
|
+
|
|
|
+//表格
|
|
|
+const tableRef = ref(null)
|
|
|
+const tableColumn = [
|
|
|
+ { key: 'name', name: '名称' },
|
|
|
+ { key: 'flowTaskType', name: '流程类型', width: 120 },
|
|
|
+ { key: 'type', name: '审批类型', width: 120 },
|
|
|
+ { key: 'action', name: '操作', width: 70, align: 'center' },
|
|
|
+]
|
|
|
+const tableData = ref([])
|
|
|
+
|
|
|
+//初始化
|
|
|
+const setInitData = async () => {
|
|
|
+ await nextTick()
|
|
|
+ tableData.value = getArrValue(fixedData.value)
|
|
|
+ getFlowTaskTypeData().then()
|
|
|
+}
|
|
|
+
|
|
|
+//获取流程类型
|
|
|
+const flowTaskTypeData = ref([])
|
|
|
+const getFlowTaskTypeData = async () => {
|
|
|
+ flowTaskTypeData.value = await getDictionaryData('flow_task_type', true)
|
|
|
+}
|
|
|
+
|
|
|
+//删除数据
|
|
|
+const delRowClick = (item, index) => {
|
|
|
+ HcDelMsg({
|
|
|
+ title: '确认删除任务流程?',
|
|
|
+ text: `确认是否需要删除【${item.name}】?`,
|
|
|
+ }, (resolve) => {
|
|
|
+ tableData.value?.splice(index, 1)
|
|
|
+ resolve()
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 行拖拽
|
|
|
+const rowDropTap = async (rows) => {
|
|
|
+ // 先清空,否则排序会异常
|
|
|
+ tableData.value = []
|
|
|
+ await nextTick()
|
|
|
+ tableRef.value?.setData(rows)
|
|
|
+}
|
|
|
+
|
|
|
+// 点击排序
|
|
|
+const rowSortTap = async (rows) => {
|
|
|
+ // 先清空,否则排序会异常
|
|
|
+ tableData.value = []
|
|
|
+ await nextTick()
|
|
|
+ tableData.value = rows
|
|
|
+}
|
|
|
+
|
|
|
+//确定选择
|
|
|
+const confirmLoading = ref(false)
|
|
|
+const confirmClick = async () => {
|
|
|
+ const list = deepClone(tableData.value)
|
|
|
+ emit('finish', list)
|
|
|
+ modalClose()
|
|
|
+}
|
|
|
+
|
|
|
+//关闭窗口
|
|
|
+const modalClose = () => {
|
|
|
+ isShow.value = false
|
|
|
+ emit('close')
|
|
|
+}
|
|
|
+</script>
|