measure/src/components/hc-tasks-user/modules/process-modal.vue

<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>
                    <template v-if="flowTaskTypeData.length > 0">
                        <el-option v-for="item in flowTaskTypeData" :key="item.value" :label="item.label" :value="item.value" />
                    </template>
                    <el-option v-else label="普通流程" :value="1" />
                </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" @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 confirmClick = async () => {
    const list = deepClone(tableData.value)
    emit('finish', list)
    modalClose()
}

//关闭窗口
const modalClose = () => {
    isShow.value = false
    emit('close')
}
</script>