123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218 |
- <template>
- <hc-dialog v-model="isShow" widths="800px" is-table :footer="false" :is-close="false">
- <template #header>
- <div class="hc-flex">
- <div class="hc-flex flex-1">
- <div class="w-60">
- <hc-search-input v-model="searchForm.packageName" placeholder="产品包名" @search="getTableData" />
- </div>
- </div>
- <div class="hc-flex">
- <el-button hc-btn type="primary" @click="addClick">新增</el-button>
- <el-button hc-btn type="danger" @click="delClick">删除</el-button>
- <el-button hc-btn @click="configDialogClose">关闭</el-button>
- </div>
- </div>
- </template>
- <hc-table
- ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading"
- is-check :check-style="{ width: 29 }" :index-style="{ width: 60 }"
- @selection-change="tableCheckChange"
- >
- <template #action="{ row }">
- <el-link type="warning" @click="editRowClick(row)">修改</el-link>
- <el-link v-del-com:[delRowClick]="row" type="danger">删除</el-link>
- </template>
- </hc-table>
- </hc-dialog>
- <!-- 新增/修改 -->
- <hc-dialog v-model="isDialogShow" widths="450px" is-footer-center :title="dialogTitle" @close="dialogClose">
- <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto">
- <el-form-item label="产品包名:" prop="packageName">
- <el-input v-model="formModel.packageName" placeholder="请输入产品包名称" />
- </el-form-item>
- <el-form-item label="菜单列表:" prop="menuIds">
- <el-tree-select
- v-model="formModel.menuIds" :data="menuData" :render-after-expand="false" node-key="id"
- :props="menuTreeProps" multiple show-checkbox clearable block placeholder="请选择菜单列表"
- />
- </el-form-item>
- <el-form-item label="备注:">
- <el-input v-model="formModel.remark" placeholder="请输入备注" />
- </el-form-item>
- </el-form>
- <template #footer>
- <el-button hc-btn @click="dialogClose">取消</el-button>
- <el-button hc-btn type="primary" :loading="submitLoading" @click="dialogSubmit">提交</el-button>
- </template>
- </hc-dialog>
- </template>
- <script setup>
- import { nextTick, ref, watch } from 'vue'
- import { arrToId, formValidate, getArrValue } from 'js-fast-way'
- import { HcDelMsg } from 'hc-vue3-ui'
- import mainApi from '~api/system/tenant-package'
- import menuApi from '~api/system/menu'
- //事件
- const emit = defineEmits(['close'])
- //双向绑定
- // eslint-disable-next-line no-undef
- const isShow = defineModel('modelValue', {
- default: false,
- })
- //搜索表单
- const searchForm = ref({
- packageName: null, current: 1, size: 200,
- })
- //监听显示
- watch(isShow, (val) => {
- if (val) {
- getTableData()
- getMenuTreeApi()
- }
- })
- //表格数据
- const tableRef = ref(null)
- const tableColumn = ref([
- { key: 'packageName', name: '产品包名' },
- { key: 'remark', name: '备注' },
- { key: 'action', name: '操作', width: 100, align: 'center' },
- ])
- //获取表格数据
- const tableLoading = ref(true)
- const tableData = ref([])
- const getTableData = async () => {
- tableData.value = []
- tableLoading.value = true
- const { data } = await mainApi.page(searchForm.value)
- tableData.value = getArrValue(data?.records)
- tableLoading.value = false
- }
- //表格被选择
- const tableCheckKeys = ref([])
- const tableCheckChange = (rows) => {
- tableCheckKeys.value = rows
- }
- //新增/修改 弹窗
- const isDialogShow = ref(false)
- const dialogTitle = ref('')
- //表单
- const formRef = ref(null)
- const formModel = ref({})
- const formRules = {
- packageName: {
- required: true,
- trigger: 'blur',
- message: '请输入产品包名称',
- },
- menuIds: {
- required: true,
- trigger: 'blur',
- message: '请选择菜单',
- },
- }
- //列表
- const menuData = ref([])
- const getMenuTreeApi = async () => {
- const { data } = await menuApi.getMenuTree()
- menuData.value = getArrValue(data)
- }
- //树
- const menuTreeProps = {
- label: 'title',
- }
- //新增
- const addClick = () => {
- dialogTitle.value = '新增产品包'
- formModel.value = {}
- //显示表单弹窗
- nextTick(() => {
- isDialogShow.value = true
- })
- }
- //修改
- const editRowClick = (row) => {
- formModel.value = {}
- dialogTitle.value = '修改产品包'
- formModel.value = { ...row }
- formModel.value.menuIds = row?.menuId?.split(',') ?? []
- //显示表单弹窗
- nextTick(() => {
- isDialogShow.value = true
- })
- }
- //删除
- const delRowClick = async ({ item }, resolve) => {
- const { isRes } = await mainApi.del(item.id)
- resolve() //关闭弹窗
- if (!isRes) return
- window.$message.success('删除成功')
- getTableData().then()
- }
- //批量删除
- const delClick = () => {
- const rows = tableCheckKeys.value
- if (rows.length <= 0) {
- window.$message.warning('请选择要删除的数据')
- return false
- }
- //确认删除
- HcDelMsg(async (resolve) => {
- //发起请求
- const ids = arrToId(rows)
- const { isRes } = await mainApi.del(ids)
- resolve() //关闭弹窗
- if (!isRes) return
- window.$message.success('删除成功')
- getTableData().then()
- })
- }
- //提交表单
- const submitLoading = ref(false)
- const dialogSubmit = async () => {
- const formRes = await formValidate(formRef.value)
- if (!formRes) return false
- submitLoading.value = true
- //处理数据
- const form = formModel.value
- form.menuId = form.menuIds?.join(',') ?? ''
- //发起请求
- const { isRes } = await mainApi.submit(form)
- submitLoading.value = false
- if (!isRes) return
- dialogClose()
- window?.$message?.success('操作成功')
- getTableData().then()
- }
- //关闭弹窗
- const dialogClose = () => {
- isDialogShow.value = false
- submitLoading.value = false
- formModel.value = {}
- }
- //关闭字典配置弹窗
- const configDialogClose = () => {
- isShow.value = false
- tableData.value = []
- emit('close')
- }
- </script>
|