| | |
| | | <script setup> |
| | | import {Search} from "@element-plus/icons-vue"; |
| | | import {reactive} from "vue"; |
| | | import {reactive, computed} from "vue"; |
| | | import {useRouter} from "vue-router" |
| | | import { useI18n } from 'vue-i18n' |
| | | const { t } = useI18n() |
| | | let language = ref(localStorage.getItem('lang') || 'zh') |
| | | import { useI18n } from 'vue-i18n' |
| | | const { t } = useI18n() |
| | | let language = ref(localStorage.getItem('lang') || 'zh') |
| | | const router = useRouter() |
| | | const add = ref(false) |
| | | const adda = ref(false) |
| | | import request from "@/utils/request" |
| | | import { ref, onMounted } from "vue"; |
| | | // import { ref } from 'vue' |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | // import LanguageMixin from './lang/LanguageMixin' |
| | | const selectedProjectNoa = ref(null); // 当前选中的角色 |
| | | // const options = ref<any[]>([]); // 下拉选项列表 |
| | | const name = ref(''); |
| | | const name = ref(''); |
| | | const tableData = ref([]) |
| | | const options = ref([]) |
| | | const selectedOptions = ref([]) |
| | | // 定义级联选择器的属性 |
| | | const cascaderProps = { |
| | | value: 'id', |
| | | label: 'menuName', |
| | | multiple: true |
| | | }; |
| | | const slot = ref('') |
| | | |
| | | const titleSelectJsona = ref({ |
| | | processType: [], |
| | | |
| | | }) |
| | | onMounted(() => { |
| | | fetchOptionsa(''); |
| | |
| | | tableData.value = response.data |
| | | // titleSelectJsona.value.processTypea = response.data.menuList; |
| | | // options.value = response.data.menuList |
| | | console.log(response.data); |
| | | |
| | | } else { |
| | | ElMessage.warning(response.data); |
| | | } |
| | |
| | | console.error('Error fetching options:', error); |
| | | } |
| | | }; |
| | | // 计算属性检查表单是否有效 |
| | | const isFormValid = computed(() => { |
| | | return name.value.trim() !== '' && |
| | | selectedOptions.value && |
| | | selectedOptions.value.length > 0; |
| | | }); |
| | | // 添加 |
| | | const getTableRow = async () => { |
| | | try { |
| | |
| | | if (!parentIdMap[id]) { |
| | | menuList.push({ |
| | | id: id, |
| | | parentId: 0, // 通常,顶级项的parentId可能是null或特定的根ID,这里设为0可能是个特殊用途 |
| | | parentId: 0, |
| | | children: [] |
| | | }); |
| | | parentIdMap[id] = menuList[menuList.length - 1]; // 更新映射 |
| | |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | }); |
| | | const dataToSend = { |
| | | name: name.value, |
| | | menuList: menuList |
| | | }; |
| | | }; |
| | | const response = await request.post('/loadGlass/sys/role/saveRole', dataToSend); |
| | | if (response.code == 200) { |
| | | ElMessage.success(response.message); |
| | |
| | | console.error(error); |
| | | } |
| | | }; |
| | | function handleEdit(row) { |
| | | function handleEdit(row) { |
| | | name.value = row.name; |
| | | adda.value = true; |
| | | window.localStorage.setItem('ids', row.id); |
| | |
| | | } |
| | | if (selectedOptions.value !== topLevelItems) { |
| | | selectedOptions.value = topLevelItems; |
| | | } |
| | | console.log(topLevelItems); |
| | | } |
| | | // selectedOptions.value = topLevelItems; |
| | | const topLevelItemsWithChildren = topLevelItems; // 包含顶级菜单项及其子菜单项的数组 |
| | | let selectedPath = []; |
| | |
| | | } |
| | | } |
| | | } |
| | | console.log(selectedPath); |
| | | selectedOptions.value = selectedPath; |
| | | } |
| | | // 编辑 |
| | |
| | | let ids = window.localStorage.getItem('ids') |
| | | try { |
| | | let menuList = []; |
| | | let parentIdMap = {}; // 用于存储已经添加的父项 |
| | | let parentIdMap = {}; // 用于存储已经添加的父项 |
| | | selectedOptions.value.forEach(array => { |
| | | if (array.length >= 2) { |
| | | let id = array[0]; |
| | |
| | | if (!parentIdMap[id]) { |
| | | menuList.push({ |
| | | id: id, |
| | | parentId: 0, // 通常,顶级项的parentId可能是null或特定的根ID,这里设为0可能是个特殊用途 |
| | | parentId: 0, |
| | | children: [] |
| | | }); |
| | | parentIdMap[id] = menuList[menuList.length - 1]; // 更新映射 |
| | |
| | | type: 'warning', |
| | | } |
| | | ); |
| | | if (confirmResult === 'confirm') { |
| | | // 用户点击了“是”,现在调用删除接口 |
| | | if (confirmResult === 'confirm') { |
| | | const response = await request.post("/loadGlass/sys/role/delete",[row.id]) |
| | | if (response.code === 200) { |
| | | ElMessage.success(response.message); |
| | | fetchOptionsa() |
| | | } else { |
| | | // 删除失败,您可以处理错误或显示错误信息给用户 |
| | | } else { |
| | | ElMessage.error(response.message); |
| | | // alert('删除失败:' + deleteResponse.message); |
| | | } |
| | | } |
| | | } catch (error) { |
| | | // 处理可能出现的错误,比如 ElMessageBox 抛出的异常等 |
| | | } catch (error) { |
| | | console.error('发生错误:', error); |
| | | } |
| | | }; |
| | | request.get("/loadGlass/sys/menu/nav").then((res) => { |
| | | if (res.code == 200) { |
| | | console.log(res.data); |
| | | options.value = res.data.tree |
| | | console.log( options.value); |
| | | } else { |
| | | ElMessage.warning(res.msg) |
| | | } |
| | | }); |
| | | </script> |
| | | |
| | | <template> |
| | | <div> |
| | | <el-button type="primary" style="margin-top: 10px;margin-left: 10px;" size="mini" id="searchButton" @click="add = true">{{ $t('delivery.addrole') }}</el-button> |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading"> |
| | | <el-button type="primary" style="margin-top: 10px;margin-left: 10px;" id="searchButton" @click="add = true">{{ $t('delivery.addrole') }}</el-button> |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;"> |
| | | <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;"> |
| | | <el-table height="500" ref="table" |
| | | @selection-change="handleSelectionChange" |
| | | <el-table height="750" ref="table" |
| | | :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> |
| | | <el-table-column prop="name" align="center" :label="$t('delivery.role')" min-width="180" /> |
| | | <el-table-column fixed="right" :label="$t('delivery.operate')" align="center" width="200"> |
| | | <template #default="scope"> |
| | | <el-button size="mini" type="text" plain @click="handleEdit(scope.row)">{{ $t('delivery.edit') }}</el-button> |
| | | <el-button size="mini" type="text" plain @click="opena(scope.row)">{{ $t('delivery.delete') }}</el-button> |
| | | <el-button type="text" plain @click="handleEdit(scope.row)">{{ $t('delivery.edit') }}</el-button> |
| | | <el-button type="text" plain @click="opena(scope.row)">{{ $t('delivery.delete') }}</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | </div> |
| | | <el-dialog v-model="add" top="23vh" width="37%" :title="$t('productStock.addusername')" > |
| | | <div style="margin-left: -50px;margin-top: 10px;margin-bottom: 10px;"> |
| | | <el-form ref="formRef" size="mini" label-width="150px"> |
| | | <el-form ref="formRef" label-width="150px"> |
| | | <el-form label-width="100px" label-position="right"> |
| | | <el-row style="margin-top: -15px;margin-bottom: -2px;"> |
| | | <el-col :span="6"> |
| | | <div id="dt" style="font-size: 15px;"> |
| | | <div> |
| | | <el-form-item :label="$t('delivery.rolea')" :required="true" style="width: 25vw"> |
| | | <el-input :placeholder="$t('delivery.inrole')" v-model="name" autocomplete="off" /> |
| | | <el-input :placeholder="$t('delivery.inrole')" v-model="name" autocomplete="off" :class="{ 'is-required': !name }" style="width: 350px"/> |
| | | </el-form-item></div></div> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <el-form-item :label="$t('delivery.choice')" :required="true" style="width: 25vw;"> |
| | | <el-cascader |
| | | v-model="selectedOptions" |
| | | :class="{ 'is-required': !selectedOptions || selectedOptions.length === 0 }" |
| | | :placeholder="$t('delivery.inchoice')" |
| | | :props="cascaderProps" |
| | | :options="options" |
| | | style="width: 330px" |
| | | style="width: 350px" |
| | | clearable /> |
| | | </el-form-item></div></div> |
| | | </el-col> |
| | |
| | | </div> |
| | | <template #footer> |
| | | <div id="dialog-footer"> |
| | | <el-button type="primary" @click="getTableRow"> |
| | | <el-button type="primary" @click="getTableRow" :disabled="!isFormValid"> |
| | | {{ $t('delivery.sure') }} |
| | | </el-button> |
| | | <el-button @click="closeDialog"> {{ $t('delivery.cancel') }}</el-button> |
| | |
| | | </el-dialog> |
| | | <el-dialog v-model="adda" top="23vh" width="37%" :title="$t('delivery.editrole')"> |
| | | <div style="margin-left: -50px;margin-top: 10px;margin-bottom: 10px;"> |
| | | <el-form ref="formRef" size="mini" label-width="150px"> |
| | | <el-form ref="formRef" label-width="150px"> |
| | | <el-form label-width="100px" label-position="right"> |
| | | <el-row style="margin-top: -15px;margin-bottom: -2px;"> |
| | | <el-col :span="6"> |
| | | <div id="dt" style="font-size: 15px;"> |
| | | <div> |
| | | <el-form-item :label="$t('delivery.rolea')" :required="true" style="width: 25vw"> |
| | | <el-input :placeholder="$t('delivery.inrole')" v-model="name" autocomplete="off" /> |
| | | <el-input :placeholder="$t('delivery.inrole')" v-model="name" autocomplete="off" :class="{ 'is-required': !name }" style="width: 350px"/> |
| | | </el-form-item></div></div> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <el-form-item :label="$t('delivery.choice')" :required="true" style="width: 25vw;"> |
| | | <el-cascader |
| | | v-model="selectedOptions" |
| | | :class="{ 'is-required': !selectedOptions || selectedOptions.length === 0 }" |
| | | :placeholder="$t('delivery.inchoice')" |
| | | :props="cascaderProps" |
| | | :options="options" |
| | | style="width: 330px" |
| | | style="width: 350px" |
| | | clearable /> |
| | | </el-form-item></div></div> |
| | | </el-col> |
| | |
| | | </div> |
| | | <template #footer> |
| | | <div id="dialog-footer"> |
| | | <el-button type="primary" @click="getTableRowa"> |
| | | <el-button type="primary" @click="getTableRowa" :disabled="!isFormValid"> |
| | | {{ $t('delivery.sure') }} |
| | | </el-button> |
| | | <el-button @click="closeDialoga">{{ $t('delivery.cancel') }}</el-button> |
| | |
| | | </template> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <style scoped> |
| | | |
| | | #dt { display:block; float:left;line-height: 20px;margin-left: 100px;} |
| | | #dta { display:block; float:left;line-height: 20px;margin-left: 80%;} |
| | | #dialog-footer{ |