123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581 |
- <template>
- <div class="pageWrap bgc">
- <div class="aside-box">
- <el-aside width="200px" style="height: 100%">
- <el-container style="height: 100%">
- <el-header>
- <el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable style="margin-top: 10px" />
- </el-header>
- <el-main style="flex-basis: 100%; padding: 0px">
- <el-tree
- ref="treeRef"
- class="menu-tree"
- :data="treeData"
- node-key="id"
- :current-node-key="''"
- :highlight-current="true"
- :expand-on-click-node="false"
- :props="{ label: 'name', children: 'children' }"
- default-expand-all
- :filter-node-method="filterNode"
- @node-click="leftTreeClick"
- >
- <template #default="{ node, data }">
- <span class="custom-tree-node">
- <span class="label">{{ node.label }}</span>
- <span v-if="false" class="code">{{ data.code }}</span>
- <span class="do">
- <el-icon @click.stop="addHandler('table')"><Plus /></el-icon>
- <el-icon @click.stop="dicEdit(data)"><Edit /></el-icon>
- <el-icon @click.stop="dictDel(node, data)"><Delete /></el-icon>
- </span>
- </span>
- </template>
- </el-tree>
- </el-main>
- <el-footer style="height: 51px">
- <el-button type="primary" style="width: 100%" @click="addHandler('tree')">
- <el-icon>
- <Plus />
- </el-icon>
- 表单分类
- </el-button>
- </el-footer>
- </el-container>
- </el-aside>
- </div>
- <div class="content-warp flex-column-page-wrap">
- <!-- 公用搜索组件 -->
- <LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"></LeSearchForm>
- <!-- LeTable 组件使用 -->
- <LeTable
- ref="tableRef"
- v-model:searchParams="tableOpts.searchParams"
- v-bind="tableOpts"
- v-model:curRow="tableOpts.curRow"
- v-model:checked-options="checkedColumns"
- :columns="activeColumns"
- >
- <template #toolLeft>
- <el-button type="primary" @click="addHandler('tableTemplate')">
- <el-icon class="btn-icon">
- <Plus />
- </el-icon>
- </el-button>
- <el-button type="danger" :disabled="curSelectionRows.length === 0" @click="batch_del">
- <el-icon class="btn-icon">
- <Delete />
- </el-icon>
- </el-button>
- </template>
- <template #filterAvatarSlot="scope">
- <el-avatar :src="scope.row.avatar" size="small"></el-avatar>
- </template>
- <template #statusSlot="{ row }">
- <status-indicator pulse :type="row.status === 1 ? 'success' : 'danger'"></status-indicator>
- </template>
- <template #actionSlot="{ row }">
- <div style="display: flex; align-items: center; justify-content: flex-end">
- <!--设计表单才有-->
- <template v-if="row.type === 0">
- <el-tooltip content="设计" placement="bottom" effect="light">
- <el-icon class="ibt0" @click="designTemplateEv(row)">
- <Money />
- </el-icon>
- </el-tooltip>
- <el-divider direction="vertical"></el-divider>
- </template>
- <el-tooltip content="编辑" placement="bottom" effect="light">
- <el-icon class="ibt0" @click="tableTemplateEdit(row)">
- <Edit />
- </el-icon>
- </el-tooltip>
- <el-divider direction="vertical"></el-divider>
- <el-popconfirm title="确定删除吗?" @confirm="deleteTemplateItem([row.id])">
- <template #reference>
- <el-icon class="ibt0">
- <Delete />
- </el-icon>
- </template>
- </el-popconfirm>
- </div>
- </template>
- </LeTable>
- </div>
- <LeFormConfigDialog
- v-if="visible"
- ref="dialogDictRef"
- v-model="visible"
- :title="`${isCreate ? '新增' : '编辑'}表单分类`"
- width="600px"
- :form-data="activeData"
- :form-options="formOptions"
- @submit="submitHandler"
- />
- <LeFormConfigDialog
- v-if="visibleTemplate"
- ref="dialogTemplateRef"
- v-model="visibleTemplate"
- :title="`${isCreate ? '新增' : '编辑'}表单模板`"
- width="600px"
- :form-data="activeDataTemplate"
- :form-options="formTemplateOptions"
- @submit="submitTemplateHandler"
- />
- <!-- 表单设计Dialog -->
- <design-form ref="designForm" v-model="visibleDesignForm" :record="recordObject" @success-fn="queryList"></design-form>
- </div>
- </template>
- <script lang="tsx" setup>
- import formCategory from '@/api/flow/formcategory'
- import formtemplate from '@/api/flow/formtemplate'
- import { computed, nextTick, ref, watch } from 'vue'
- import { ElMessage, ElTree, ElMessageBox } from 'element-plus'
- import { useTablePage } from '@/hooks/useTablePage'
- // import { Plus, Delete, Edit } from '@element-plus/icons-vue'
- import StatusIndicator from '@/components/StatusIndicator/index.vue'
- import DesignForm from './designForm.vue'
- import { statusOptions, templateForms, typeOptions, typeOptions_config } from './data.tsx'
- const visible = ref(false) // 弹窗显示隐藏
- const visibleTemplate = ref(false) // 弹窗显示隐藏
- const visibleDesignForm = ref(false) // 弹窗显示隐藏
- const isCreate = ref(true)
- const activeData = ref({})
- const recordObject = ref({})
- const activeDataTemplate = ref({})
- const current_mode = ref('') // 当前模式 (tree | table)
- const formsDialog = [
- {
- prop: 'pid',
- label: '所属分类',
- itemType: 'select',
- filterable: true,
- options: [],
- rules: [{ required: true, message: '请选择所属分类', trigger: 'blur' }]
- },
- {
- prop: 'name',
- label: '分类名称',
- itemType: 'input',
- rules: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
- },
- {
- prop: 'status',
- label: '状态',
- itemType: 'switch',
- activeText: '正常',
- inactiveText: '禁用'
- },
- {
- prop: 'sort',
- label: '排序',
- itemType: 'inputNumber',
- rules: [{ required: true, message: '请输入排序', trigger: 'blur' }]
- },
- {
- prop: 'remark',
- label: '备注',
- itemType: 'input'
- }
- ]
- // 新增的表单 和 编辑的表单
- const formOptions = computed(() => {
- let tempForm = []
- if (current_mode.value === 'tree') {
- for (let i in formsDialog) {
- let fd = formsDialog[i]
- if (fd.prop == 'pid') {
- continue
- }
- tempForm.push(fd)
- }
- } else {
- tempForm = formsDialog
- }
- return {
- forms: tempForm,
- labelWidth: 120,
- span: 30,
- showResetBtn: true,
- formConfig: {
- showCancelBtn: true,
- submitLoading: false
- }
- }
- })
- const showGroupLoading = ref(false)
- const groupFilterText = ref('')
- const treeRef = ref<InstanceType<typeof ElTree>>()
- // 新增的表单模板 和 编辑的表单模板
- const formTemplateOptions = computed(() => {
- return {
- forms: templateForms,
- labelWidth: 120,
- span: 30,
- showResetBtn: true,
- formConfig: {
- showCancelBtn: true,
- submitLoading: false
- }
- }
- })
- const filterNode = (value: string, data: Tree) => {
- if (!value) return true
- return data.name.includes(value)
- }
- const treeData = ref([])
- // 将树形结构扁平化
- const treeForArr = data => {
- const flattened = []
- for (const item of data) {
- flattened.push(item)
- if (item.children && item.children.length > 0) {
- flattened.push(...treeForArr(item.children))
- }
- }
- return flattened
- }
- // 获取左侧菜单数据
- const getGroup = async () => {
- showGroupLoading.value = true
- let data = await formCategory.formCategoryListTreeApi({})
- if (data) {
- formOptions.value.forms[0].options = treeForArr(data).map(item => {
- return { value: item.id, label: item.name }
- })
- formTemplateOptions.value.forms[0].options = treeForArr(data).map(item => {
- return { value: item.id, label: item.name }
- })
- showGroupLoading.value = false
- treeData.value = [{ id: '', name: '所有', children: data }]
- // treeData.value = data
- }
- }
- // 左侧菜单点击
- const leftTreeClick = data => {
- searchData.value = { ...searchData.value, formCategoryId: data.id ? data.id : null }
- }
- // 表格搜索条件
- const forms = ref([
- {
- prop: 'name',
- label: '名称:',
- itemType: 'input',
- placeholder: '请输入名称'
- },
- {
- prop: 'type',
- label: '类型:',
- itemType: 'select',
- placeholder: '请选择类型',
- options: typeOptions
- },
- {
- prop: 'status',
- label: '状态:',
- itemType: 'select',
- placeholder: '请选择状态',
- options: statusOptions
- }
- ])
- // table列表数据请求
- const queryList = async () => {
- const { options, searchParams } = tableOpts
- options.loading = true
- try {
- const { records: list, total } = await formtemplate.formTemplatePageApi(searchParams)
- tableOpts.total = total
- tableOpts.list = list
- } catch {
- tableOpts.total = 0
- tableOpts.list = []
- } finally {
- options.loading = false
- }
- }
- // table 参数
- const columns = [
- {
- prop: 'name',
- label: '模板名称',
- minWidth: 80
- },
- {
- prop: 'code',
- label: '编码',
- minWidth: 150
- },
- {
- prop: 'type',
- label: '类型',
- minWidth: 100,
- formatter: (row, column, cellValue) => {
- return typeOptions_config[cellValue] || '-'
- }
- },
- {
- prop: 'status',
- label: '状态',
- minWidth: 50,
- slots: {
- default: 'statusSlot'
- }
- },
- {
- prop: 'remark',
- label: '备注',
- minWidth: 100
- },
- {
- prop: 'sort',
- label: '排序',
- minWidth: 50
- },
- {
- prop: 'action',
- label: '操作',
- width: 100,
- fixed: 'right',
- slots: {
- default: 'actionSlot'
- }
- }
- ]
- const { searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows, updateParams } = useTablePage(
- {
- options: {
- showIndex: false
- },
- // 需要展示的列
- columns,
- // 控制列配置
- columnsConfig: {
- columns
- }
- },
- {
- queryList,
- fetchImmediate: false
- }
- )
- // 删除
- const deleteItem = async ids => {
- await formCategory.formCategoryDeleteApi(ids)
- if (current_mode.value === 'tree') {
- getGroup()
- }
- updateParams()
- ElMessage.success(`删除成功~`)
- }
- // 单个删除
- const table_del = row => {
- deleteItem([row.id])
- }
- //批量删除
- const batch_del = () => {
- const ids = curSelectionRows.value.map(item => item.id) // 多选数据
- ElMessageBox.confirm('是否删除选中数据?', '提示', {
- confirmButtonText: '确认',
- cancelButtonText: '取消',
- type: 'error',
- buttonSize: 'default'
- }).then(() => {
- deleteTemplateItem(ids)
- })
- }
- const table_edit = async row => {
- isCreate.value = false
- activeData.value = { ...row, status: row.status ? true : false }
- visible.value = true
- }
- const tableTemplateEdit = async row => {
- isCreate.value = false
- activeDataTemplate.value = { ...row, status: row.status ? true : false }
- visibleTemplate.value = true
- }
- const designTemplateEv = async row => {
- recordObject.value = { ...row }
- visibleDesignForm.value = true
- }
- const deleteTemplateItem = async ids => {
- await formtemplate.formTemplateDeleteApi(ids)
- updateParams()
- ElMessage.success(`删除成功~`)
- }
- // 弹窗事件
- const submitHandler = async params => {
- try {
- formOptions.value.formConfig.submitLoading = true
- console.log('------activeData----', activeData.value)
- params.status = params.status ? 1 : 0
- if (activeData.value.id) {
- params.id = activeData.value.id
- } else {
- params.pid = 0
- }
- await formCategory.formCategoryAddOrEditSaveApi(params)
- ElMessage.success(`${isCreate.value ? '新增' : '修改'}成功~`)
- visible.value = false
- getGroup()
- // updateParams()
- } finally {
- formOptions.value.formConfig.submitLoading = false
- }
- }
- // 模板弹窗
- const submitTemplateHandler = async params => {
- try {
- formTemplateOptions.value.formConfig.submitLoading = true
- params.status = params.status ? 1 : 0
- console.log('------activeDataTemplate-----', activeDataTemplate)
- params.id = activeDataTemplate.value.id ? activeDataTemplate.value.id : null
- await formtemplate.formTemplateAddOrEditSaveApi(params)
- ElMessage.success(`${isCreate.value ? '新增' : '修改'}成功~`)
- visibleTemplate.value = false
- updateParams()
- } finally {
- formTemplateOptions.value.formConfig.submitLoading = false
- }
- }
- const addHandler = mode => {
- isCreate.value = true
- if (mode !== 'tableTemplate') {
- activeData.value = {
- status: true
- }
- visible.value = true
- current_mode.value = mode
- } else {
- activeDataTemplate.value = {
- // 设计表单
- type: 0,
- status: true
- }
- visibleTemplate.value = true
- }
- }
- // 删除左侧树
- const dictDel = (node, data) => {
- current_mode.value = 'tree'
- ElMessageBox.confirm(`确定删除 ${data.name} 项吗?`, '提示')
- .then(async () => {
- // try {
- deleteItem([data.id])
- // } catch (e) {
- // ElMessage.error(`删除失败~`)
- // }
- })
- .catch(() => {})
- }
- const dicEdit = data => {
- current_mode.value = data.pid !== '0' ? 'table' : 'tree'
- table_edit(data)
- }
- nextTick(() => {
- getGroup()
- queryList()
- })
- watch(groupFilterText, val => {
- treeRef.value!.filter(val)
- })
- watch(
- treeData.value,
- val => {
- formOptions.value.forms[0].options = treeForArr(val).map(item => {
- return { value: item.id, label: item.name }
- })
- formTemplateOptions.value.forms[0].options = treeForArr(val).map(item => {
- return { value: item.id, label: item.name }
- })
- },
- { immediate: true }
- )
- </script>
- <style scoped lang="scss">
- // 表单的树结构样式
- :deep(.menu-tree) {
- .el-tree-node {
- //&:first-child {
- // .custom-tree-node {
- // .do {
- // display: none !important;
- // }
- // }
- //}
- }
- }
- .custom-tree-node {
- display: flex;
- flex: 1;
- align-items: center;
- justify-content: space-between;
- font-size: 14px;
- padding-right: 24px;
- height: 100%;
- }
- .custom-tree-node .code {
- font-size: 12px;
- color: #999;
- }
- .custom-tree-node {
- .do {
- display: none;
- }
- }
- .custom-tree-node .do i {
- margin-left: 3px;
- color: #999;
- padding: 3px;
- font-size: 20px;
- }
- .custom-tree-node .do i:hover {
- color: #333;
- }
- .custom-tree-node {
- &:hover {
- .code {
- display: none;
- }
- }
- }
- .custom-tree-node:hover .do {
- display: inline-block;
- }
- </style>
|