tt/vue3-element-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 系统管理页面重构和ts类型声明优化

Browse Source 
Former-commit-id: 40263bbb072596ada41ef33d9170841e7e66cd01
This commit is contained in:
郝先瑞
2022-06-15 00:48:17 +08:00
parent 928ba2dbd8
commit 321b584f9f
116 changed files with 1692 additions and 1485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/ums/member/index.vue → src/views/index.vue
View File

@@ -1,7 +1,6 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'member'
name: 'member',
};
</script>
@@ -11,7 +10,7 @@ import { ElTable } from 'element-plus';
import { Search, Refresh } from '@element-plus/icons-vue';
import { listMemebersPage } from '@/api/ums/member';
import { MemberQueryParam, MemberItem } from '@/types';
import { MemberQueryParam, MemberItem } from '@/types/api/ums/member';
const state = reactive({
// 遮罩层
@@ -25,9 +24,9 @@ const state = reactive({
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
} as MemberQueryParam,
memberList: [] as MemberItem[]
memberList: [] as MemberItem[],
});
const { loading, queryParams, memberList, total } = toRefs(state);
@@ -45,7 +44,7 @@ function resetQuery() {
state.queryParams = {
pageNum: 1,
pageSize: 10,
nickName: ''
nickName: '',
};
handleQuery();
}

27
src/views/lab/seata/index.vue
View File

@@ -1,7 +1,7 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'seata'
name: 'seata',
};
</script>
@@ -14,42 +14,42 @@ import {
RefreshLeft,
Right,
CircleCheckFilled,
CircleCloseFilled
CircleCloseFilled,
} from '@element-plus/icons-vue';
import { payOrder, getSeataData, resetSeataData } from '@/api/lab/seata';
import { ElMessage, ElMessageBox } from 'element-plus';
import { SeataFormData } from '@/types';
import { SeataFormData } from '@/types/api/lab/seata';
const state = reactive({
// 保留改变前数据
cacheSeataData: {
status: undefined,
stockNum: undefined,
balance: undefined
balance: undefined,
},
seataData: {
orderInfo: {
orderSn: undefined,
status: undefined
status: undefined,
},
stockInfo: {
name: undefined,
picUrl: undefined,
stockNum: undefined
stockNum: undefined,
},
accountInfo: {
nickName: undefined,
avatarUrl: undefined,
balance: undefined
}
balance: undefined,
},
},
loading: false,
submitData: {
openTx: true, // 是否开启事务
orderEx: true // 订单修改异常
} as SeataFormData
orderEx: true, // 订单修改异常
} as SeataFormData,
});
const { cacheSeataData, seataData, loading, submitData } = toRefs(state);
@@ -73,7 +73,7 @@ function handleOrderPay() {
{
confirmButtonText: '重置数据',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
}
)
.then(() => {
@@ -92,7 +92,7 @@ function handleOrderPay() {
cacheSeataData.value = {
status: seataData.value.orderInfo.status,
stockNum: seataData.value.stockInfo.stockNum,
balance: seataData.value.accountInfo.balance
balance: seataData.value.accountInfo.balance,
};
loadData();
});
@@ -129,7 +129,7 @@ function handleDataReset() {
cacheSeataData.value = {
status: undefined,
stockNum: undefined,
balance: undefined
balance: undefined,
};
loadData();
});
@@ -367,6 +367,7 @@ onMounted(() => {
<style lang="scss" scoped>
.card-panel__col {
margin-bottom: 12px;
.el-link {
font-size: 16px;
margin-right: 8px;

16
src/views/login/index.vue
View File

@@ -61,7 +61,7 @@
<!-- 验证码 -->
<el-form-item prop="code">
<span class="svg-container">
<svg-icon icon-class="validCode" />
<svg-icon icon-class="valid_code" />
</span>
<el-input
v-model="loginForm.code"
@@ -119,7 +119,7 @@ import useStore from '@/store';
// API依赖
import { getCaptcha } from '@/api/login';
import { useRoute } from 'vue-router';
import { LoginFormData } from '@/types';
import { LoginFormData } from '@/types/api/system/login';
const { user } = useStore();
const route = useRoute();
@@ -133,11 +133,13 @@ const state = reactive({
username: 'admin',
password: '123456',
code: '',
uuid: ''
uuid: '',
} as LoginFormData,
loginRules: {
username: [{ required: true, trigger: 'blur' }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
password: [
{ required: true, trigger: 'blur', validator: validatePassword },
],
},
loading: false,
passwordType: 'password',
@@ -146,7 +148,7 @@ const state = reactive({
capslockTooltipDisabled: true,
otherQuery: {},
clientHeight: document.documentElement.clientHeight,
showCopyright: true
showCopyright: true,
});
function validatePassword(rule: any, value: any, callback: any) {
@@ -164,7 +166,7 @@ const {
passwordType,
captchaBase64,
capslockTooltipDisabled,
showCopyright
showCopyright,
} = toRefs(state);
function checkCapslock(e: any) {
@@ -223,7 +225,7 @@ watch(
}
},
{
immediate: true
immediate: true,
}
);

25
src/views/oms/order/index.vue
View File

@@ -1,14 +1,15 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'order'
name: 'order',
};
</script>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { ElForm } from 'element-plus';
import { Dialog, Order, OrderQueryParam } from '@/types';
import { Order, OrderQueryParam } from '@/types/api/oms/order';
import { Dialog } from '@/types/common';
import { listOrderPages, getOrderDetail } from '@/api/oms/order';
import { Search, Refresh } from '@element-plus/icons-vue';
@@ -17,7 +18,7 @@ const queryFormRef = ref(ElForm);
const orderSourceMap = {
1: '微信小程序',
2: 'APP',
3: 'PC'
3: 'PC',
};
const orderStatusMap = {
@@ -31,13 +32,13 @@ const orderStatusMap = {
401: '已发货',
501: '用户收货',
502: '系统收货',
901: '已完成'
901: '已完成',
};
const payTypeMap = {
1: '支付宝',
2: '微信',
3: '会员余额'
3: '会员余额',
};
const state = reactive({
@@ -45,16 +46,16 @@ const state = reactive({
ids: [],
single: true,
multiple: true,
dateRange: [],
dateRange: [] as any,
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
} as OrderQueryParam,
orderList: [] as Order[],
total: 0,
dialog: {
title: '订单详情',
visible: false
visible: false,
} as Dialog,
dialogVisible: false,
orderDetail: {
@@ -73,14 +74,14 @@ const state = reactive({
skuPrice: undefined,
couponPrice: undefined,
freightPrice: undefined,
orderPrice: undefined
orderPrice: undefined,
},
member: {},
orderItems: []
orderItems: [],
},
orderSourceMap,
orderStatusMap,
payTypeMap
payTypeMap,
});
const { loading, queryParams, orderList, total, dateRange } = toRefs(state);

30
src/views/pms/brand/index.vue
View File

@@ -1,7 +1,6 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'brand'
name: 'brand',
};
</script>
@@ -9,13 +8,18 @@ export default {
import { onMounted, reactive, ref, toRefs } from 'vue';
import { ElForm, ElTable, ElMessage, ElMessageBox } from 'element-plus';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { BrandFormData, BrandItem, BrandQueryParam, Dialog } from '@/types';
import {
BrandFormData,
BrandItem,
BrandQueryParam,
} from '@/types/api/pms/brand';
import { Dialog } from '@/types/common';
import {
listBrandPages,
getBrandFormDetail,
updateBrand,
addBrand,
deleteBrands
deleteBrands,
} from '@/api/pms/brand';
import SingleUpload from '@/components/Upload/SingleUpload.vue';
@@ -32,7 +36,7 @@ const state = reactive({
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
} as BrandQueryParam,
brandList: [] as BrandItem[],
total: 0,
@@ -43,10 +47,10 @@ const state = reactive({
{
required: true,
message: '请输入品牌名称',
trigger: 'blur'
}
]
}
trigger: 'blur',
},
],
},
});
const {
@@ -57,7 +61,7 @@ const {
total,
dialog,
formData,
rules
rules,
} = toRefs(state);
function handleQuery() {
@@ -83,14 +87,14 @@ function handleSelectionChange(selection: any) {
function handleAdd() {
state.dialog = {
title: '添加品牌',
visible: true
visible: true,
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改品牌',
visible: true
visible: true,
};
const brandId = row.id || state.ids;
getBrandFormDetail(brandId).then(({ data }) => {
@@ -137,7 +141,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
})
.then(() => {
deleteBrands(ids).then(() => {

40
src/views/pms/category/components/Attribute.vue
View File

@@ -67,7 +67,7 @@ import { ElMessage } from 'element-plus';
const props = defineProps({
attributeType: {
type: Number,
default: 1
default: 1,
},
category: {
type: Object,
@@ -75,10 +75,10 @@ const props = defineProps({
return {
id: undefined,
name: '',
childrenLen: 0
childrenLen: 0,
};
}
}
},
},
});
const attributeTypeName = computed(() =>
@@ -100,17 +100,17 @@ const state = reactive({
attributes: [
{
id: undefined,
name: ''
}
]
name: '',
},
],
},
rules: {
attribute: {
name: [
{ required: true, validator: attributeNameValidator, trigger: 'blur' }
]
}
}
{ required: true, validator: attributeNameValidator, trigger: 'blur' },
],
},
},
});
const { formData, rules } = toRefs(state);
@@ -122,8 +122,8 @@ watch(
if (categoryId) {
listAttributes({
categoryId: categoryId,
type: props.attributeType
}).then(response => {
type: props.attributeType,
}).then((response) => {
const { data } = response;
if (data && data.length > 0) {
state.formData.attributes = response.data;
@@ -131,8 +131,8 @@ watch(
state.formData.attributes = [
{
id: undefined,
name: ''
}
name: '',
},
];
}
});
@@ -140,8 +140,8 @@ watch(
state.formData.attributes = [
{
id: undefined,
name: ''
}
name: '',
},
];
}
}
@@ -150,7 +150,7 @@ watch(
function handleAdd() {
state.formData.attributes.push({
id: undefined,
name: ''
name: '',
});
}
@@ -159,8 +159,8 @@ function handleDelete(index: number) {
state.formData.attributes = [
{
id: undefined,
name: ''
}
name: '',
},
];
return;
}

35
src/views/pms/category/components/Category.vue
View File

@@ -111,7 +111,7 @@ import {
listCategories,
addCategory,
updateCategory,
deleteCategories
deleteCategories,
} from '@/api/pms/category';
import { Plus, Edit, Delete, Picture } from '@element-plus/icons-vue';
import SingleUpload from '@/components/Upload/SingleUpload.vue';
@@ -136,30 +136,30 @@ const state = reactive({
level: undefined,
iconUrl: undefined,
visible: 1,
sort: 100
sort: 100,
},
rules: {
parentId: [
{
required: true,
message: '请选择上级分类',
trigger: 'blur'
}
trigger: 'blur',
},
],
name: [
{
required: true,
message: '请输入分类名称',
trigger: 'blur'
}
]
trigger: 'blur',
},
],
},
dialog: {
title: '',
visible: false
visible: false,
},
parent: {} as any,
current: {} as any
current: {} as any,
});
const { loading, categoryOptions, formData, rules, dialog, parent } =
@@ -167,15 +167,15 @@ const { loading, categoryOptions, formData, rules, dialog, parent } =
function handleQuery() {
state.loading = true;
listCategories(state.queryParam).then(response => {
listCategories(state.queryParam).then((response) => {
state.categoryOptions = [
{
id: 0,
name: '全部分类',
parentId: 0,
level: 0,
children: response.data
}
children: response.data,
},
];
state.loading = false;
});
@@ -188,7 +188,7 @@ function handleNodeClick(row: any) {
state.parent = {
id: parentNode.key,
name: parentNode.label,
level: row.level
level: row.level,
};
state.current = JSON.parse(JSON.stringify(row));
emit('categoryClick', row);
@@ -197,14 +197,14 @@ function handleNodeClick(row: any) {
function handleAdd(row: any) {
state.dialog = {
title: '新增商品分类',
visible: true
visible: true,
};
if (row.id != null) {
// 行点击新增
state.parent = {
id: row.id,
name: row.name,
level: row.level
level: row.level,
};
}
}
@@ -213,7 +213,7 @@ function handleUpdate(row: any) {
handleNodeClick(row);
state.dialog = {
title: '修改商品分类',
visible: true
visible: true,
};
Object.assign(state.formData, state.current);
}
@@ -229,6 +229,7 @@ function submitForm() {
});
} else {
const parentCategory = state.parent as any;
console.log('parent', parentCategory);
state.formData.parentId = parentCategory.id;
state.formData.level = parentCategory.level + 1;
@@ -247,7 +248,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
}).then(() => {
deleteCategories(ids).then(() => {
ElMessage.success('删除成功');

10
src/views/pms/category/index.vue
View File

@@ -1,7 +1,7 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'category'
name: 'category',
};
</script>
@@ -16,8 +16,8 @@ const state = reactive({
category: {
id: undefined,
name: '',
childrenLen: 0
}
childrenLen: 0,
},
});
const { category } = toRefs(state);
@@ -27,13 +27,13 @@ function handleCategoryClick(categoryRow: any) {
state.category = {
id: categoryRow.id,
name: categoryRow.name,
childrenLen: categoryRow.children.length
childrenLen: categoryRow.children.length,
};
} else {
state.category = {
id: undefined,
name: '',
childrenLen: 0
childrenLen: 0,
};
}
}

18
src/views/pms/goods/components/GoodsAttribute.vue
View File

@@ -89,20 +89,20 @@ const dataFormRef = ref(ElForm);
const props = defineProps({
modelValue: {
type: Object,
default: () => {}
}
default: () => {},
},
});
const goodsInfo: any = computed({
get: () => props.modelValue,
set: value => {
set: (value) => {
emit('update:modelValue', value);
}
},
});
watch(
() => goodsInfo.value.categoryId,
newVal => {
(newVal) => {
// 商品编辑不加载分类下的属性
const goodsId = goodsInfo.value.id;
if (goodsId) {
@@ -111,7 +111,7 @@ watch(
// 商品新增加载默认分类下的属性
if (newVal) {
// type=2 商品分类下的属性
listAttributes({ categoryId: newVal, type: 2 }).then(response => {
listAttributes({ categoryId: newVal, type: 2 }).then((response) => {
const attrList = response.data;
if (attrList && attrList.length > 0) {
goodsInfo.value.attrList = attrList;
@@ -125,15 +125,15 @@ watch(
},
{
immediate: true,
deep: true
deep: true,
}
);
const state = reactive({
rules: {
name: [{ required: true, message: '请填写属性名称', trigger: 'blur' }],
value: [{ required: true, message: '请填写属性值', trigger: 'blur' }]
}
value: [{ required: true, message: '请填写属性值', trigger: 'blur' }],
},
});
const { rules } = toRefs(state);

12
src/views/pms/goods/components/GoodsCategory.vue
View File

@@ -48,26 +48,26 @@ const emit = defineEmits(['next', 'update:modelValue']);
const props = defineProps({
modelValue: {
type: Object,
default: () => {}
}
default: () => {},
},
});
const goodsInfo: any = computed({
get: () => props.modelValue,
set: value => {
set: (value) => {
emit('update:modelValue', value);
}
},
});
const state = reactive({
categoryOptions: [],
pathLabels: []
pathLabels: [],
});
const { categoryOptions, pathLabels } = toRefs(state);
function loadData() {
listCascadeCategories().then(response => {
listCascadeCategories().then((response) => {
state.categoryOptions = response.data;
if (goodsInfo.value.id) {
nextTick(() => {

32
src/views/pms/goods/components/GoodsInfo.vue
View File

@@ -53,7 +53,10 @@
<single-upload v-model="item.url" :show-close="true" />
<div v-if="item.url">
<el-link type="danger" class="button" v-if="item.main == true"
<el-link
type="danger"
class="button"
v-if="item.main == true"
>商品主图</el-link
>
<el-link
@@ -61,8 +64,7 @@
class="button"
v-else
@click="changeMainPicture(index)"
>设为主图</el-link
>
>设为主图</el-link>
</div>
<div v-else>
@@ -103,15 +105,15 @@ const dataFormRef = ref(ElForm);
const props = defineProps({
modelValue: {
type: Object,
default: () => {}
}
default: () => {},
},
});
const goodsInfo: any = computed({
get: () => props.modelValue,
set: value => {
set: (value) => {
emit('update:modelValue', value);
}
},
});
const state = reactive({
@@ -122,14 +124,14 @@ const state = reactive({
{ url: undefined, main: false },
{ url: undefined, main: false },
{ url: undefined, main: false },
{ url: undefined, main: false }
{ url: undefined, main: false },
] as Array<any>,
rules: {
name: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
originPrice: [{ required: true, message: '请填写原价', trigger: 'blur' }],
price: [{ required: true, message: '请填写现价', trigger: 'blur' }],
brandId: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }]
}
brandId: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }],
},
});
const { brandOptions, pictures, rules } = toRefs(state);
@@ -142,7 +144,7 @@ function loadData() {
if (goodsId) {
const mainPicUrl = goodsInfo.value.picUrl;
if (mainPicUrl) {
state.pictures.filter(item => item.main)[0].url = mainPicUrl;
state.pictures.filter((item) => item.main)[0].url = mainPicUrl;
}
const subPicUrls = goodsInfo.value.subPicUrls;
if (subPicUrls && subPicUrls.length > 0) {
@@ -175,14 +177,14 @@ function handleNext() {
if (valid) {
// 商品图片
const mainPicUrl = state.pictures
.filter(item => item.main == true && item.url)
.map(item => item.url);
.filter((item) => item.main == true && item.url)
.map((item) => item.url);
if (mainPicUrl && mainPicUrl.length > 0) {
goodsInfo.value.picUrl = mainPicUrl[0];
}
const subPicUrl = state.pictures
.filter(item => item.main == false && item.url)
.map(item => item.url);
.filter((item) => item.main == false && item.url)
.map((item) => item.url);
if (subPicUrl && subPicUrl.length > 0) {
goodsInfo.value.subPicUrls = subPicUrl;
}

52
src/views/pms/goods/components/GoodsStock.vue
View File

@@ -187,7 +187,7 @@ import {
reactive,
ref,
toRefs,
watch
watch,
} from 'vue';
import { useRouter } from 'vue-router';
import { Plus, Minus } from '@element-plus/icons-vue';
@@ -216,39 +216,41 @@ const props = defineProps({
type: Object,
default: () => {
return {};
}
}
},
},
});
const goodsInfo: any = computed({
get: () => props.modelValue,
set: value => {
set: (value) => {
emit('update:modelValue', value);
}
},
});
const state = reactive({
specForm: {
specList: [] as any[]
specList: [] as any[],
},
skuForm: {
skuList: [] as any[]
skuList: [] as any[],
},
// 规格项表格标题
specTitles: [] as any[],
rules: {
spec: {
name: [{ required: true, message: '请输入规格名称', trigger: 'blur' }],
value: [{ required: true, message: '请输入规格值', trigger: 'blur' }]
value: [{ required: true, message: '请输入规格值', trigger: 'blur' }],
},
sku: {
skuSn: [{ required: true, message: '请输入商品编号', trigger: 'blur' }],
price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
stockNum: [{ required: true, message: '请输入商品库存', trigger: 'blur' }]
}
stockNum: [
{ required: true, message: '请输入商品库存', trigger: 'blur' },
],
},
},
colors: ['', 'success', 'warning', 'danger'],
tagInputs: [{ value: undefined, visible: false }] // 规格值标签临时值和显隐控制
tagInputs: [{ value: undefined, visible: false }], // 规格值标签临时值和显隐控制
});
const { specForm, skuForm, specTitles, rules, colors, tagInputs } =
@@ -256,7 +258,7 @@ const { specForm, skuForm, specTitles, rules, colors, tagInputs } =
watch(
() => goodsInfo.value.categoryId,
newVal => {
(newVal) => {
// 商品编辑不加载分类下的规格
const goodsId = goodsInfo.value.id;
if (goodsId) {
@@ -264,13 +266,13 @@ watch(
}
if (newVal) {
// type=1 商品分类下的规格
listAttributes({ categoryId: newVal, type: 1 }).then(response => {
listAttributes({ categoryId: newVal, type: 1 }).then((response) => {
const specList = response.data;
if (specList && specList.length > 0) {
specList.forEach((item: any) => {
state.specForm.specList.push({
name: item.name,
values: []
values: [],
});
});
loadData();
@@ -280,7 +282,7 @@ watch(
},
{
immediate: true,
deep: true
deep: true,
}
);
@@ -297,14 +299,14 @@ function loadData() {
(state.specForm.specList[specIndex] as any).values.push({
id: specItem.id,
value: specItem.value,
picUrl: specItem.picUrl
picUrl: specItem.picUrl,
});
} else {
state.specForm.specList.push({
name: specItem.name,
values: [
{ id: specItem.id, value: specItem.value, picUrl: specItem.picUrl }
]
{ id: specItem.id, value: specItem.value, picUrl: specItem.picUrl },
],
});
}
});
@@ -388,7 +390,7 @@ function generateSkuList() {
const specList = JSON.parse(
JSON.stringify(
state.specForm.specList.filter(
item => item.values && item.values.length > 0
(item) => item.values && item.values.length > 0
)
)
); // 深拷贝，取有属性的规格项，否则笛卡尔积运算得到的SKU列表值为空
@@ -527,11 +529,11 @@ function handleSpecValueInput(rowIndex: any) {
}, 0);
state.specForm.specList[rowIndex].values[specValues.length] = {
value: currSpecValue,
id: 'tid_' + (rowIndex + 1) + '_' + ++maxSpecValueIndex
id: 'tid_' + (rowIndex + 1) + '_' + ++maxSpecValueIndex,
};
} else {
state.specForm.specList[rowIndex].values = [
{ value: currSpecValue, id: 'tid_' + (rowIndex + 1) + '_1' }
{ value: currSpecValue, id: 'tid_' + (rowIndex + 1) + '_1' },
];
}
}
@@ -549,7 +551,7 @@ function handleSpecValueInput(rowIndex: any) {
const objectSpanMethod = ({ rowIndex, columnIndex }: any) => {
let mergeRows = [1, 1, 1]; // 分别对应规格1、规格2、规格3列合并的行数
const specLen = state.specForm.specList.filter(
item => item.values && item.values.length > 0
(item) => item.values && item.values.length > 0
).length;
if (specLen == 2) {
const values_len_2 = state.specForm.specList[1].values
@@ -600,7 +602,7 @@ function submitForm() {
delete submitsData.skuList;
let specList = [] as any[];
state.specForm.specList.forEach(item => {
state.specForm.specList.forEach((item) => {
item.values.forEach((value: any) => {
value.name = item.name;
});
@@ -626,7 +628,7 @@ function submitForm() {
ElNotification({
title: '提示',
message: '编辑商品成功',
type: 'success'
type: 'success',
});
});
} else {
@@ -636,7 +638,7 @@ function submitForm() {
ElNotification({
title: '提示',
message: '新增商品成功',
type: 'success'
type: 'success',
});
});
}

8
src/views/pms/goods/detail.vue
View File

@@ -53,7 +53,7 @@ import GoodsStock from './components/GoodsStock.vue';
import { getGoodsDetail } from '@/api/pms/goods';
import { useRoute } from 'vue-router';
import { GoodsDetail } from '@/types';
import { GoodsDetail } from '@/types/api/pms/goods';
const route = useRoute();
@@ -64,8 +64,8 @@ const state = reactive({
album: [],
attrList: [],
specList: [],
skuList: []
} as GoodsDetail
skuList: [],
} as GoodsDetail,
});
const { loaded, active, goodsInfo } = toRefs(state);
@@ -74,7 +74,7 @@ function loadData() {
const goodsId = route.query.goodsId as string;
if (goodsId) {
getGoodsDetail(goodsId).then(response => {
getGoodsDetail(goodsId).then((response) => {
state.goodsInfo = response.data;
state.goodsInfo.originPrice = (state.goodsInfo.originPrice as any) / 100;
state.goodsInfo.price = (state.goodsInfo.price as any) / 100;

24
src/views/pms/goods/index.vue
View File

@@ -1,7 +1,7 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'goods'
name: 'goods',
};
</script>
@@ -16,11 +16,11 @@ import {
Edit,
Refresh,
Delete,
View
View,
} from '@element-plus/icons-vue';
import { listGoodsPages, deleteGoods } from '@/api/pms/goods';
import { listPageGoods, deleteGoods } from '@/api/pms/goods';
import { listCascadeCategories } from '@/api/pms/category';
import { GoodsItem, GoodsQueryParam } from '@/types';
import { GoodsItem, GoodsQueryParam } from '@/types/api/pms/goods';
import { moneyFormatter } from '@/utils/filter';
const dataTableRef = ref(ElTable);
@@ -38,12 +38,12 @@ const state = reactive({
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
} as GoodsQueryParam,
goodsList: [] as GoodsItem[],
categoryOptions: [],
goodDetail: undefined,
dialogVisible: false
dialogVisible: false,
});
const {
@@ -54,12 +54,12 @@ const {
categoryOptions,
goodDetail,
total,
dialogVisible
dialogVisible,
} = toRefs(state);
function handleQuery() {
state.loading = true;
listGoodsPages(state.queryParams).then(({ data }) => {
listPageGoods(state.queryParams).then(({ data }) => {
state.goodsList = data.list;
state.total = data.total;
state.loading = false;
@@ -71,7 +71,7 @@ function resetQuery() {
pageNum: 1,
pageSize: 10,
name: undefined,
categoryId: undefined
categoryId: undefined,
};
handleQuery();
}
@@ -88,7 +88,7 @@ function handleAdd() {
function handleUpdate(row: any) {
router.push({
path: 'goods-detail',
query: { goodsId: row.id, categoryId: row.categoryId }
query: { goodsId: row.id, categoryId: row.categoryId },
});
}
@@ -97,7 +97,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('是否确认删除选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
})
.then(function () {
return deleteGoods(ids);
@@ -119,7 +119,7 @@ function handleSelectionChange(selection: any) {
}
onMounted(() => {
listCascadeCategories({}).then(response => {
listCascadeCategories({}).then((response) => {
state.categoryOptions = ref(response.data);
});
handleQuery();

32
src/views/sms/advert/index.vue
View File

@@ -1,7 +1,6 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'advert'
name: 'advert',
};
</script>
@@ -11,13 +10,18 @@ import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import SingleUpload from '@/components/Upload/SingleUpload.vue';
import {
listAdvertPages,
listAdvertsPage,
getAdvertFormDetail,
updateAdvert,
addAdvert,
deleteAdverts
deleteAdverts,
} from '@/api/sms/advert';
import { AdvertFormData, AdvertItem, AdvertQueryParam, Dialog } from '@/types';
import { Dialog } from '@/types/common';
import {
AdvertFormData,
AdvertItem,
AdvertQueryParam,
} from '@/types/api/sms/advert';
const queryFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
@@ -36,14 +40,14 @@ const state = reactive({
dialog: {} as Dialog,
formData: {
status: 1,
sort: 100
sort: 100,
} as AdvertFormData,
rules: {
title: [{ required: true, message: '请输入广告名称', trigger: 'blur' }],
beginTime: [{ required: true, message: '请填写开始时间', trigger: 'blur' }],
endTime: [{ required: true, message: '请填写结束时间', trigger: 'blur' }],
picUrl: [{ required: true, message: '请上传广告图片', trigger: 'blur' }]
}
picUrl: [{ required: true, message: '请上传广告图片', trigger: 'blur' }],
},
});
const {
@@ -54,12 +58,12 @@ const {
total,
dialog,
formData,
rules
rules,
} = toRefs(state);
function handleQuery() {
state.loading = true;
listAdvertPages(state.queryParams).then(({ data }) => {
listAdvertsPage(state.queryParams).then(({ data }) => {
state.advertList = data.list;
state.total = data.total;
state.loading = false;
@@ -80,17 +84,17 @@ function handleSelectionChange(selection: any) {
function handleAdd() {
state.dialog = {
title: '添加广告',
visible: true
visible: true,
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改广告',
visible: true
visible: true,
};
const advertId = row.id || state.ids;
getAdvertFormDetail(advertId).then(response => {
getAdvertFormDetail(advertId).then((response) => {
state.formData = response.data;
});
}
@@ -127,7 +131,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
})
.then(() => {
deleteAdverts(ids).then(() => {

196
src/views/system/role/components/Role.vue → src/views/sms/coupon/index.vue
View File

@@ -1,25 +1,28 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'role'
name: 'advert',
};
</script>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import {
listRolePages,
updateRole,
getRoleFormDetail,
addRole,
deleteRoles
} from '@/api/system/role';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { RoleFormData, RoleItem, RoleQueryParam } from '@/types';
import {
listCouponsPage,
getCouponFormDetail,
updateCoupon,
addCoupon,
deleteCoupons,
} from '@/api/sms/coupon';
import { Dialog } from '@/types/common';
import {
CouponItem,
CouponQueryParam,
CouponFormData,
} from '@/types/api/sms/coupon';
const emit = defineEmits(['roleClick']);
const queryFormRef = ref(ElForm);
const queryFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
const state = reactive({
@@ -30,39 +33,38 @@ const state = reactive({
single: true,
// 非多个禁用
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
} as RoleQueryParam,
roleList: [] as RoleItem[],
queryParams: { pageNum: 1, pageSize: 10 } as CouponQueryParam,
couponList: [] as CouponItem[],
total: 0,
dialog: {
title: '',
visible: false
},
formData: {} as RoleFormData,
dialog: {} as Dialog,
formData: {
id: undefined,
name: '',
type: '',
} as CouponFormData,
rules: {
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }]
}
title: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }],
beginTime: [{ required: true, message: '请填写开始时间', trigger: 'blur' }],
endTime: [{ required: true, message: '请填写结束时间', trigger: 'blur' }],
picUrl: [{ required: true, message: '请上传优惠券图片', trigger: 'blur' }],
},
});
const {
loading,
multiple,
queryParams,
roleList,
couponList,
total,
dialog,
formData,
rules
rules,
} = toRefs(state);
function handleQuery() {
emit('roleClick', {});
state.loading = true;
listRolePages(state.queryParams).then(({ data }) => {
state.roleList = data.list;
listCouponsPage(state.queryParams).then(({ data }) => {
state.couponList = data.list;
state.total = data.total;
state.loading = false;
});
@@ -79,39 +81,36 @@ function handleSelectionChange(selection: any) {
state.multiple = !selection.length;
}
function handleRowClick(row: any) {
emit('roleClick', row);
}
function handleAdd() {
state.dialog = {
title: '添加角色',
visible: true
title: '添加优惠券',
visible: true,
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改角色',
visible: true
title: '修改优惠券',
visible: true,
};
const roleId = row.id || state.ids;
getRoleFormDetail(roleId).then(({ data }) => {
state.formData = data;
const advertId = row.id || state.ids;
getCouponFormDetail(advertId).then((response) => {
state.formData = response.data;
});
}
function submitForm() {
dataFormRef.value.validate((valid: any) => {
if (valid) {
if (state.formData.id) {
updateRole(state.formData.id as any, state.formData).then(() => {
const avertId = state.formData.id;
if (avertId) {
updateCoupon(avertId, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addRole(state.formData).then(() => {
addCoupon(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
@@ -121,12 +120,10 @@ function submitForm() {
});
}
/**
* 重置表单
*/
function cancel() {
state.dialog.visible = false;
state.formData.id = undefined;
dataFormRef.value.resetFields();
state.dialog.visible = false;
}
function handleDelete(row: any) {
@@ -134,10 +131,10 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
})
.then(() => {
deleteRoles(ids).then(() => {
deleteCoupons(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
@@ -167,15 +164,14 @@ onMounted(() => {
>
</el-form-item>
<el-form-item prop="name">
<el-form-item prop="title">
<el-input
v-model="queryParams.name"
placeholder="角色名称"
v-model="queryParams.status"
placeholder="优惠券标题"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
@@ -184,20 +180,38 @@ onMounted(() => {
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
ref="dataTableRef"
v-loading="loading"
:data="roleList"
:data="couponList"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
highlight-current-row
border
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色名称" prop="name" />
<el-table-column label="角色编码" prop="code" />
<el-table-column label="操作" align="center" width="120">
<el-table-column type="selection" min-width="5" align="center" />
<el-table-column type="index" label="序号" width="80" align="center" />
<el-table-column prop="title" min-width="100" label="优惠券标题" />
<el-table-column label="优惠券图片" width="100">
<template #default="scope">
<el-popover placement="right" :width="400" trigger="hover">
<img :src="scope.row.picUrl" width="400" height="400" />
<template #reference>
<img
:src="scope.row.picUrl"
style="max-height: 60px; max-width: 60px"
/>
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="beginTime" label="开始时间" width="150" />
<el-table-column prop="endTime" label="结束时间" width="150" />
<el-table-column prop="status" label="状态" width="100">
<template #default="scope">
<el-tag v-if="scope.row.status === 1" type="success">开启</el-tag>
<el-tag v-else type="info">关闭</el-tag>
</template>
</el-table-column>
<el-table-column prop="sort" label="排序" width="80" />
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button
type="primary"
@@ -227,41 +241,53 @@ onMounted(() => {
/>
<!-- 表单弹窗 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
@close="cancel"
width="450px"
>
<el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form-item label="角色名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入角色名称" />
<!-- <el-form-item label="优惠券标题" prop="title">
<el-input v-model="formData.title" />
</el-form-item>
<el-form-item label="角色编码" prop="code">
<el-input v-model="formData.code" placeholder="请输入角色编码" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
controls-position="right"
:min="0"
style="width: 100px"
<el-form-item label="有效期" prop="beginTime">
<el-date-picker
v-model="formData.beginTime"
placeholder="开始时间"
value-format="YYYY-MM-DD"
/>
~
<el-date-picker
v-model="formData.endTime"
placeholder="结束时间"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item label="状态">
<el-form-item label="优惠券图片" prop="picUrl">
<single-upload v-model="formData.picUrl" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input v-model="formData.sort" style="width: 200px" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">停用</el-radio>
<el-radio :label="1">开启</el-radio>
<el-radio :label="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="跳转链接" prop="url">
<el-input v-model="formData.url" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="formData.remark" />
</el-form-item> -->
</el-form>
<template #footer>
@@ -273,5 +299,3 @@ onMounted(() => {
</el-dialog>
</div>
</template>
<style lang="scss" scoped></style>

40
src/views/system/client/index.vue
View File

@@ -1,7 +1,7 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'client'
name: 'client',
};
</script>
@@ -11,12 +11,18 @@ import {
getClientFormDetial,
addClient,
updateClient,
deleteClients
deleteClients,
} from '@/api/system/client';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { onMounted, reactive, getCurrentInstance, ref, toRefs } from 'vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { ClientFormData, ClientItem, ClientQueryParam, Option } from '@/types';
import {
ClientFormData,
ClientItem,
ClientQueryParam,
} from '@/types/api/system/client';
import { Option } from '@/types/common';
const { proxy }: any = getCurrentInstance();
const queryFormRef = ref(ElForm);
@@ -31,21 +37,23 @@ const state = reactive({
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
} as ClientQueryParam,
clientList: [] as ClientItem[],
total: 0,
dialog: {
title: '',
visible: false,
type: 'create'
type: 'create',
},
formData: {} as ClientFormData,
rules: {
clientId: [{ required: true, message: '客户端ID不能为空', trigger: 'blur' }]
clientId: [
{ required: true, message: '客户端ID不能为空', trigger: 'blur' },
],
},
authorizedGrantTypesOptions: [] as Option[],
checkedAuthorizedGrantTypes: [] as string[]
checkedAuthorizedGrantTypes: [] as string[],
});
const {
@@ -59,7 +67,7 @@ const {
formData,
rules,
authorizedGrantTypesOptions,
checkedAuthorizedGrantTypes
checkedAuthorizedGrantTypes,
} = toRefs(state);
function handleQuery() {
@@ -82,14 +90,14 @@ function handleSelectionChange(selection: any) {
}
function handleAdd() {
proxy.$listDictsByCode('grant_type').then((response: any) => {
proxy.$getDictItemsByTypeCode('grant_type').then((response: any) => {
state.authorizedGrantTypesOptions = response.data;
});
state.dialog = {
title: '添加客户端',
visible: true,
type: 'create'
type: 'create',
};
}
@@ -97,11 +105,11 @@ function handleUpdate(row: any) {
state.dialog = {
title: '修改客户端',
visible: true,
type: 'edit'
type: 'edit',
};
const clientId = row.clientId || ids;
proxy.$listDictsByCode('grant_type').then((res: any) => {
proxy.$getDictItemsByTypeCode('grant_type').then((res: any) => {
state.authorizedGrantTypesOptions = res.data;
getClientFormDetial(clientId).then(({ data }) => {
@@ -149,7 +157,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
})
.then(() => {
deleteClients(clientIds).then(() => {
@@ -182,10 +190,10 @@ onMounted(() => {
>
</el-form-item>
<el-form-item prop="clientId">
<el-form-item>
<el-input
v-model="queryParams.clientId"
placeholder="输入客户端ID"
v-model="queryParams.keywords"
placeholder="客户端ID"
clearable
style="width: 240px"
@keyup.enter="handleQuery"

36
src/views/system/dept/index.vue
View File

@@ -1,7 +1,6 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'dept'
name: 'dept',
};
</script>
@@ -11,12 +10,12 @@ import { onMounted, reactive, ref, toRefs } from 'vue';
// API依赖
import {
getDeptDetail,
getDeptForrmData,
deleteDept,
updateDept,
addDept,
listSelectDepartments,
listTableDepartments
listDepartments,
} from '@/api/system/dept';
// 组件依赖
@@ -26,9 +25,8 @@ import {
DeptFormData,
DeptItem,
DeptQueryParam,
Dialog,
Option
} from '@/types';
} from '@/types/api/system/dept';
import { Dialog, Option } from '@/types/common';
// DOM元素的引用声明定义
const queryFormRef = ref(ElForm);
@@ -51,16 +49,16 @@ const state = reactive({
// 表单数据
formData: {
sort: 1,
status: 1
status: 1,
} as DeptFormData,
// 表单参数校验
rules: {
parentId: [
{ required: true, message: '上级部门不能为空', trigger: 'blur' }
{ required: true, message: '上级部门不能为空', trigger: 'blur' },
],
name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }]
}
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
},
});
const {
@@ -71,7 +69,7 @@ const {
queryParams,
formData,
rules,
dialog
dialog,
} = toRefs(state);
/**
@@ -79,7 +77,7 @@ const {
*/
function handleQuery() {
state.loading = true;
listTableDepartments(state.queryParams).then(({ data }) => {
listDepartments(state.queryParams).then(({ data }) => {
state.deptList = data;
state.loading = false;
});
@@ -103,11 +101,11 @@ function handleSelectionChange(selection: any) {
*/
async function loadDeptData() {
const deptOptions: any[] = [];
listSelectDepartments().then(response => {
listSelectDepartments().then((response) => {
const rootDeptOption = {
value: '0',
label: '顶级部门',
children: response.data
children: response.data,
};
deptOptions.push(rootDeptOption);
state.deptOptions = deptOptions;
@@ -123,7 +121,7 @@ function handleAdd(row: any) {
state.formData.parentId = row.id;
state.dialog = {
title: '添加部门',
visible: true
visible: true,
};
}
@@ -135,9 +133,9 @@ async function handleUpdate(row: any) {
const deptId = row.id || state.ids;
state.dialog = {
title: '修改部门',
visible: true
visible: true,
};
getDeptDetail(deptId).then((response: any) => {
getDeptForrmData(deptId).then((response: any) => {
state.formData = response.data;
});
}
@@ -175,7 +173,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
})
.then(() => {
deleteDept(ids)

376
src/views/system/dict/components/DictItem.vue
View File

@@ -1,3 +1,188 @@
<script lang="ts">
export default {
name: 'dictItem',
};
</script>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, watch } from 'vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import {
DictItem,
DictItemFormData,
DictItemQueryParam,
} from '@/types/api/system/dict';
import { Dialog } from '@/types/common';
import {
listPageDictItems,
getDictItemData,
addDictItem,
updateDictItem,
deleteDictItems,
} from '@/api/system/dict';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
const props = defineProps({
typeCode: {
type: String,
default: () => {
return '';
},
},
typeName: {
type: String,
default: () => {
return '';
},
},
});
watch(
() => props.typeCode,
(value) => {
state.queryParams.typeCode = value;
state.formData.typeCode = value;
handleQuery();
}
);
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const state = reactive({
loading: true,
// 选中ID数组
ids: [] as number[],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
total: 0,
queryParams: { pageNum: 1, pageSize: 10 } as DictItemQueryParam,
dictItemList: [] as DictItem[],
dialog: { visible: false } as Dialog,
formData: {
typeCode: props.typeCode,
typeName: props.typeName,
status: 1,
sort: 1,
} as DictItemFormData,
rules: {
name: [{ required: true, message: '请输入字典项名称', trigger: 'blur' }],
value: [{ required: true, message: '请输入字典项值', trigger: 'blur' }],
},
localDictCode: props.typeCode,
localDictName: props.typeName,
});
const {
loading,
multiple,
queryParams,
dictItemList,
dialog,
formData,
rules,
total,
} = toRefs(state);
function handleQuery() {
if (state.queryParams.typeCode) {
state.loading = true;
listPageDictItems(state.queryParams).then(({ data }) => {
state.dictItemList = data.list;
state.total = data.total;
state.loading = false;
});
} else {
state.dictItemList = [];
state.total = 0;
state.queryParams.pageNum = 1;
state.loading = false;
}
}
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
function handleAdd() {
if (!state.formData.typeCode) {
ElMessage.warning('请选择字典类型后添加数据项');
return;
}
state.dialog = {
title: '添加字典数据项',
visible: true,
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改字典数据项',
visible: true,
};
const id = row.id || state.ids;
getDictItemData(id).then(({ data }) => {
state.formData = data;
});
}
function submitForm() {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateDictItem(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addDictItem(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
}
function cancel() {
state.dialog.visible = false;
state.formData.id = undefined;
dataFormRef.value.resetFields();
}
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteDictItems(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
}
onMounted(() => {
handleQuery();
});
</script>
<template>
<div class="app-container">
<!-- 搜索表单 -->
@@ -86,12 +271,15 @@
:rules="rules"
label-width="100px"
>
<el-form-item label="字典名称"> </el-form-item>
<el-form-item label="字典项名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入字典项名称" />
<el-form-item label="字典类型名称">{{ typeName }}</el-form-item>
<el-form-item label="数据项名称" prop="name">
<el-input
v-model="formData.name"
placeholder="请输入字典数据项名称"
/>
</el-form-item>
<el-form-item label="字典项值" prop="value">
<el-input v-model="formData.value" placeholder="请输入字典项值" />
<el-form-item label="数据项值" prop="value">
<el-input v-model="formData.value" placeholder="请输入字典数据项值" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
@@ -120,181 +308,3 @@
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, watch } from 'vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import {
Dialog,
DictItem,
DictItemFormData,
DictItemQueryParam
} from '@/types';
import {
listDictItemPages,
getDictItemDetail,
addDictItem,
updateDictItem,
deleteDictItem
} from '@/api/system/dict';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
const props = defineProps({
dictCode: {
type: String,
default: () => {
return '';
}
},
dictName: {
type: String,
default: () => {
return '';
}
}
});
watch(
() => props.dictCode,
value => {
state.queryParams.dictCode = value;
state.formData.dictCode = value;
handleQuery();
}
);
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const state = reactive({
loading: true,
// 选中ID数组
ids: [] as number[],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
total: 0,
queryParams: { pageNum: 1, pageSize: 10 } as DictItemQueryParam,
dictItemList: [] as DictItem[],
dialog: { visible: false } as Dialog,
formData: {
dictCode: props.dictCode,
dictName: props.dictName,
status: 1,
sort: 1
} as DictItemFormData,
rules: {
name: [{ required: true, message: '请输入字典项名称', trigger: 'blur' }],
value: [{ required: true, message: '请输入字典项值', trigger: 'blur' }]
},
localDictCode: props.dictCode,
localDictName: props.dictName
});
const {
loading,
multiple,
queryParams,
dictItemList,
dialog,
formData,
rules,
total
} = toRefs(state);
function handleQuery() {
if (state.queryParams.dictCode) {
state.loading = true;
listDictItemPages(state.queryParams).then(({ data }) => {
state.dictItemList = data.list;
state.total = data.total;
state.loading = false;
});
} else {
state.dictItemList = [];
state.total = 0;
state.queryParams.pageNum = 1;
state.loading = false;
}
}
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
function handleAdd() {
if (!state.formData.dictCode) {
ElMessage.warning('请选择字典后添加数据项');
return;
}
state.dialog = {
title: '添加字典项',
visible: true
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改字典项',
visible: true
};
const id = row.id || state.ids;
getDictItemDetail(id).then(({ data }) => {
state.formData = data;
});
}
function submitForm() {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateDictItem(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addDictItem(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
}
function cancel() {
state.dialog.visible = false;
state.formData.id = undefined;
dataFormRef.value.resetFields();
}
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteDictItem(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
}
onMounted(() => {
handleQuery();
});
</script>

47
src/views/system/dict/components/Dict.vue → src/views/system/dict/components/DictType.vue
View File

@@ -1,7 +1,6 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'dict'
name: 'dictType',
};
</script>
@@ -132,15 +131,21 @@ export default {
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import {
listDictPages,
getDictFormDetail,
addDict,
updateDict,
deleteDict
listPageDictTypes,
getDictFormData,
addDictType,
updateDictType,
deleteDictTypes,
} from '@/api/system/dict';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { Dialog, Dict, DictFormData, DictQueryParam } from '@/types';
import { Dialog } from '@/types/common';
import {
Dict,
DictFormTypeData,
DictQueryParam,
} from '@/types/api/system/dict';
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
@@ -157,18 +162,18 @@ const state = reactive({
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
} as DictQueryParam,
dictList: [] as Dict[],
total: 0,
dialog: { visible: false } as Dialog,
formData: {
status: 1
} as DictFormData,
status: 1,
} as DictFormTypeData,
rules: {
name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }]
}
code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }],
},
});
const { total, dialog, loading, dictList, formData, rules, queryParams } =
@@ -177,7 +182,7 @@ const { total, dialog, loading, dictList, formData, rules, queryParams } =
function handleQuery() {
emit('dictClick', null);
state.loading = true;
listDictPages(state.queryParams).then(({ data }) => {
listPageDictTypes(state.queryParams).then(({ data }) => {
state.dictList = data.list;
state.total = data.total;
state.loading = false;
@@ -198,17 +203,17 @@ function handleSelectionChange(selection: any) {
function handleAdd() {
state.dialog = {
title: '添加字典',
visible: true
visible: true,
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改字典',
visible: true
visible: true,
};
const id = row.id || state.ids;
getDictFormDetail(id).then(({ data }) => {
getDictFormData(id).then(({ data }) => {
state.formData = data;
});
}
@@ -217,13 +222,13 @@ function submitForm() {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateDict(state.formData.id, state.formData).then(() => {
updateDictType(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addDict(state.formData).then(() => {
addDictType(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
@@ -244,10 +249,10 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
})
.then(() => {
deleteDict(ids).then(() => {
deleteDictTypes(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});

65
src/views/system/dict/index.vue
View File

@@ -1,56 +1,55 @@
<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue';
import DictType from './components/DictType.vue';
import DictItem from './components/DictItem.vue';
import { reactive, toRefs } from 'vue';
const state = reactive({
typeCode: '',
typeName: '',
});
const { typeCode, typeName } = toRefs(state);
const handleDictTypeClick = (row: any) => {
if (row) {
state.typeName = row.name;
state.typeCode = row.code;
} else {
state.typeName = '';
state.typeCode = '';
}
};
</script>
<template>
<div class="app-container">
<el-row :gutter="10">
<el-col :span="12" :xs="24">
<el-card class="box-card">
<template #header>
<svg-icon color="#333" icon-class="education" />
字典列表
<svg-icon icon-class="dict" />
字典类型
</template>
<!-- 字典列表子组件 -->
<dict @dictClick="handleDictClick" />
<dict-type @dictClick="handleDictTypeClick" />
</el-card>
</el-col>
<el-col :span="12" :xs="24">
<el-card class="box-card">
<template #header>
<svg-icon color="#333" icon-class="dict" />
<svg-icon icon-class="dict_item" />
<span style="margin: 0 5px">字典数据项</span>
<el-tag type="success" v-if="dictCode" size="small">{{
dictName
<el-tag type="success" v-if="typeCode" size="small">{{
typeName
}}</el-tag>
<el-tag type="warning" v-else size="small">未选择字典</el-tag>
</template>
<!-- 字典项组件 -->
<dict-item :dictName="dictName" :dictCode="dictCode" />
<dict-item :typeName="typeName" :typeCode="typeCode" />
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue';
import Dict from './components/Dict.vue';
import DictItem from './components/DictItem.vue';
import { reactive, toRefs } from 'vue';
const state = reactive({
dictCode: '',
dictName: '' // 字典名称，用于字典项组件回显
});
const { dictCode, dictName } = toRefs(state);
const handleDictClick = (dictRow: any) => {
if (dictRow) {
state.dictName = dictRow.name;
state.dictCode = dictRow.code;
} else {
state.dictName = '';
state.dictCode = '';
}
};
</script>

34
src/views/system/menu/components/Menu.vue
View File

@@ -170,7 +170,7 @@
@click="iconSelectVisible = true"
>
<template #prefix>
<svg-icon :icon-class="formData.icon" style="margin: auto" />
<svg-icon :icon-class="formData.icon" />
</template>
</el-input>
</template>
@@ -220,21 +220,21 @@ import { reactive, ref, onMounted, toRefs } from 'vue';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox, ElPopover } from 'element-plus';
import { Dialog, Option } from '@/types/common';
import {
Dialog,
Option,
MenuFormData,
MenuItem,
MenuQueryParam
} from '@/types';
MenuQueryParam,
} from '@/types/api/system/menu';
// API 依赖
import {
listTableMenus,
listMenus,
getMenuDetail,
listSelectMenus,
addMenu,
deleteMenus,
updateMenu
updateMenu,
} from '@/api/system/menu';
import SvgIcon from '@/components/SvgIcon/index.vue';
@@ -262,7 +262,7 @@ const state = reactive({
visible: 1,
sort: 1,
component: 'Layout',
type: 'MENU'
type: 'MENU',
} as MenuFormData,
rules: {
parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
@@ -270,8 +270,8 @@ const state = reactive({
type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
component: [
{ required: true, message: '请输入组件完整路径', trigger: 'blur' }
]
{ required: true, message: '请输入组件完整路径', trigger: 'blur' },
],
},
menuOptions: [] as Option[],
currentRow: undefined,
@@ -279,8 +279,8 @@ const state = reactive({
iconSelectVisible: false,
cacheData: {
menuType: '',
menuPath: ''
}
menuPath: '',
},
});
const {
@@ -292,7 +292,7 @@ const {
rules,
menuOptions,
iconSelectVisible,
cacheData
cacheData,
} = toRefs(state);
/**
@@ -302,7 +302,7 @@ function handleQuery() {
// 重置父组件
emit('menuClick', null);
state.loading = true;
listTableMenus(state.queryParams).then(({ data }) => {
listMenus(state.queryParams).then(({ data }) => {
state.menuList = data;
state.loading = false;
});
@@ -338,7 +338,7 @@ async function handleAdd(row: any) {
await loadMenuData();
state.dialog = {
title: '添加菜单',
visible: true
visible: true,
};
if (row.id) {
// 行点击新增
@@ -368,7 +368,7 @@ async function handleUpdate(row: any) {
await loadMenuData();
state.dialog = {
title: '修改菜单',
visible: true
visible: true,
};
const id = row.id || state.ids;
getMenuDetail(id).then(({ data }) => {
@@ -417,7 +417,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
})
.then(() => {
deleteMenus(ids).then(() => {

45
src/views/system/menu/components/Perm.vue
View File

@@ -5,7 +5,7 @@ import {
reactive,
ref,
getCurrentInstance,
toRefs
toRefs,
} from 'vue';
import {
@@ -13,18 +13,18 @@ import {
getPermFormDetail,
addPerm,
updatePerm,
deletePerms
deletePerms,
} from '@/api/system/perm';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { Dialog, Option } from '@/types/common';
import {
Dialog,
PermFormData,
PermItem,
PermQueryParam,
Option
} from '@/types';
} from '@/types/api/system/perm';
const { proxy }: any = getCurrentInstance();
@@ -34,13 +34,15 @@ const dataFormRef = ref(ElForm);
const props = defineProps({
menuId: {
type: String,
default: () => {}
}
default: () => {
return '';
},
},
});
watch(
() => props.menuId,
value => {
(value) => {
state.queryParams.menuId = value;
handleQuery();
}
@@ -56,26 +58,26 @@ const state = reactive({
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
} as PermQueryParam,
permList: [] as PermItem[],
total: 0,
dialog: {
visible: false
visible: false,
} as Dialog,
formData: {} as PermFormData,
rules: {
name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
perm: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],
method: [{ required: true, message: '请选择请求方式', trigger: 'blur' }]
method: [{ required: true, message: '请选择请求方式', trigger: 'blur' }],
},
microServiceOptions: [] as Option[],
requestMethodOptions: [] as Option[],
urlPerm: {
requestMethod: '',
serviceName: '',
requestPath: ''
}
requestPath: '',
},
});
const {
@@ -89,7 +91,7 @@ const {
microServiceOptions,
requestMethodOptions,
urlPerm,
queryParams
queryParams,
} = toRefs(state);
function handleQuery() {
@@ -123,11 +125,11 @@ function handleSelectionChange(selection: any) {
* 加载字典数据
*/
function loadDictOptions() {
proxy.$listDictsByCode('micro_service').then((response: any) => {
proxy.$getDictItemsByTypeCode('micro_service').then((response: any) => {
state.microServiceOptions = response.data;
});
proxy.$listDictsByCode('request_method').then((response: any) => {
proxy.$getDictItemsByTypeCode('request_method').then((response: any) => {
state.requestMethodOptions = response.data;
});
}
@@ -136,7 +138,7 @@ function handleAdd() {
loadDictOptions();
state.dialog = {
title: '添加权限',
visible: true
visible: true,
};
}
@@ -144,10 +146,10 @@ function handleUpdate(row: any) {
loadDictOptions();
state.dialog = {
title: '修改权限',
visible: true
visible: true,
};
const id = row.id || state.ids;
getPermFormDetail(id).then(response => {
getPermFormDetail(id).then((response) => {
const { data } = response;
state.formData = data;
if (data && data.urlPerm) {
@@ -169,6 +171,7 @@ function submitForm() {
dataFormRef.value.validate((isValid: any) => {
if (isValid) {
// 接口权限和按钮权限必填其一
console.log(state.urlPerm.requestPath, state.formData.btnPerm);
if (!(state.urlPerm.requestPath || state.formData.btnPerm)) {
ElMessage.warning('请至少填写一种权限');
return false;
@@ -217,7 +220,7 @@ function resetForm() {
state.urlPerm = {
requestMethod: '',
serviceName: '',
requestPath: ''
requestPath: '',
};
}
@@ -231,7 +234,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
})
.then(() => {
deletePerms(ids).then(() => {

6
src/views/system/menu/index.vue
View File

@@ -4,7 +4,7 @@
<el-col :span="10" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="menu" />
<svg-icon icon-class="menu" />
菜单列表
</template>
<menu-table @menuClick="handleMenuClick" />
@@ -13,7 +13,7 @@
<el-col :span="14" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="perm" />
<svg-icon icon-class="perm" />
<span style="margin: 0 5px">权限列表</span>
<el-tag type="success" v-if="menuId" size="small">{{
menuName
@@ -38,7 +38,7 @@ import { reactive, toRefs } from 'vue';
const state = reactive({
menuId: undefined,
menuName: ''
menuName: '',
});
const { menuId, menuName } = toRefs(state);

128
src/views/system/role/components/Menu.vue
View File

@@ -1,128 +0,0 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'cmenu'
};
</script>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue';
import { listSelectMenus } from '@/api/system/menu';
import { listRoleMenuIds, updateRoleMenu } from '@/api/system/role';
import { ElTree, ElMessage } from 'element-plus';
import { Switch, Position } from '@element-plus/icons-vue';
import { Option } from '@/types';
const emit = defineEmits(['menuClick']);
const props = defineProps({
role: {
type: Object,
default: () => {}
}
});
const menuRef = ref(ElTree); // 属性名必须和元素的ref属性值一致
watch(
() => props.role.id,
newVal => {
if (newVal) {
state.checkStrictly = true;
// 获取角色拥有的的菜单ID
listRoleMenuIds(newVal).then(({ data }) => {
menuRef.value.setCheckedKeys(data);
state.checkStrictly = false;
});
}
}
);
const state = reactive({
expandedKeys: [], // 展开的节点
menuOptions: [] as Option[],
checkStrictly: false,
isExpandAll: true,
refreshTree: true
});
const { expandedKeys, menuOptions, checkStrictly, isExpandAll, refreshTree } =
toRefs(state);
/**
* 加载菜单树
*/
async function loadMenuData() {
await listSelectMenus().then(({ data }) => {
state.menuOptions = data;
});
}
function handleNodeClick(node: any) {
emit('menuClick', node);
}
/**
* 展开/收缩
*/
function toggleExpandAll() {
state.refreshTree = false;
state.isExpandAll = !state.isExpandAll;
nextTick(() => {
state.refreshTree = true;
});
}
/**
* 保存角色菜单
*/
function handleSubmit() {
const checkedMenuIds = menuRef.value
.getCheckedNodes(false, true)
.map((node: any) => node.value);
updateRoleMenu(props.role.id, checkedMenuIds).then(() => {
ElMessage.success('提交成功');
});
}
onMounted(() => {
loadMenuData();
});
</script>
<template>
<div class="app-container">
<el-row>
<el-col :span="12">
<el-button plain :icon="Switch" @click="toggleExpandAll"
>展开/折叠</el-button
>
</el-col>
<el-col :span="12" style="text-align: right">
<el-button type="primary" :icon="Position" @click="handleSubmit"
>提交</el-button
>
</el-col>
</el-row>
<el-tree
class="menu-tree"
ref="menuRef"
v-if="refreshTree"
:default-expanded-keys="expandedKeys"
:default-expand-all="isExpandAll"
:data="menuOptions"
show-checkbox
node-key="value"
empty-text="加载菜单中..."
:check-strictly="checkStrictly"
highlight-current
@node-click="handleNodeClick"
/>
</div>
</template>
<style lang="scss" scoped>
.menu-tree {
margin-top: 10px;
}
</style>

162
src/views/system/role/components/Perm.vue
View File

@@ -1,162 +0,0 @@
<template>
<div class="perm-container">
<div v-if="permissionOptions.length > 0">
<el-row>
<el-col :span="12">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>全选
</el-checkbox>
</el-col>
<el-col :span="12" style="text-align: right">
<el-button type="primary" :icon="Position" @click="handleSubmit"
>提交</el-button
>
</el-col>
</el-row>
<el-row>
<el-col
:span="8"
v-for="item in permissionOptions"
style="margin-top: 20px"
:key="item.id"
>
<el-checkbox
border
v-model="item.checked"
:label="item.id"
:key="item.id"
@change="handleCheckedPermChange"
>
{{ item.name }}
</el-checkbox>
</el-col>
</el-row>
</div>
<div style="text-align: center" v-else>
<el-empty
:description="
!role
? '请选择角色'
: !menu
? '请选择菜单'
: '暂无数据，您可在【菜单管理】配置权限数据'
"
></el-empty>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, toRefs, watch } from 'vue';
import { listPerms } from '@/api/system/perm';
import { listRolePerms, saveRolePerms } from '@/api/system/role';
import { ElMessage } from 'element-plus';
import { Position } from '@element-plus/icons-vue';
import { PermQueryParam } from '@/types';
const props = defineProps({
role: {
type: Object,
default: () => {
return {};
}
},
menu: {
type: Object,
default: () => {
return {};
}
}
});
watch(
() => props.menu.id,
value => {
if (value) {
loadData();
}
}
);
const state = reactive({
loading: false,
permissionOptions: [] as Array<any>,
isIndeterminate: true,
checkAll: false,
checkedPerms: []
});
const { permissionOptions, isIndeterminate, checkAll } = toRefs(state);
function handleCheckAllChange(checked: any) {
state.isIndeterminate = false;
if (checked) {
state.permissionOptions.map(item => (item.checked = true));
} else {
// 全不选
state.permissionOptions.map(item => (item.checked = false));
}
}
function handleCheckedPermChange() {
const checkedCount = state.permissionOptions.filter(
item => item.checked
).length;
state.checkAll = checkedCount === state.permissionOptions.length;
state.isIndeterminate =
checkedCount > 0 && checkedCount < state.permissionOptions.length;
}
function loadData() {
if (!props.menu.id) {
resetData();
return false;
}
state.loading = true;
const params = { menuId: props.menu.id } as PermQueryParam;
listPerms(params).then(({ data }) => {
state.permissionOptions = data;
listRolePerms(props.role.id, props.menu.id).then(response => {
const checkedPermIds = response.data;
state.permissionOptions.map((item: any) => {
if (checkedPermIds.includes(item.id)) {
item.checked = true;
} else {
state.checkAll = false;
}
});
state.loading = false;
});
});
}
function handleSubmit() {
const checkedPermIds = state.permissionOptions
.filter(item => item.checked)
.map(item => item.id);
saveRolePerms(props.role.id, props.menu.id, checkedPermIds).then(() => {
ElMessage.success('提交成功');
});
}
function resetData() {
state.permissionOptions = [];
state.isIndeterminate = true;
state.checkAll = false;
}
onMounted(() => {
loadData();
});
</script>
<style scoped>
.perm-container {
width: 100%;
}
</style>

542
src/views/system/role/index.vue
View File

@@ -1,116 +1,462 @@
<script lang="ts">
export default {
name: 'role',
};
</script>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, toRefs } from 'vue';
import {
listPageRoles,
updateRole,
getRoleFormDetail,
addRole,
deleteRoles,
getRoleResourceIds,
updateRoleResource,
} from '@/api/system/role';
import { getResource } from '@/api/system/menu';
import { ElForm, ElMessage, ElMessageBox, ElTree } from 'element-plus';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import {
RoleFormData,
RoleItem,
RoleQueryParam,
} from '@/types/api/system/role';
import SvgIcon from '@/components/SvgIcon/index.vue';
const emit = defineEmits(['roleClick']);
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const resourceRef = ref(ElTree);
const state = reactive({
loading: true,
// 选中ID数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10,
} as RoleQueryParam,
roleList: [] as RoleItem[],
total: 0,
dialog: {
title: '',
visible: false,
},
formData: {} as RoleFormData,
rules: {
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
},
resourceDialogVisible: false,
menuOptions: [] as any[],
permOptions: [] as any[],
checkStrictly: false,
permGroupList: [],
checkedRole: {
id: '',
name: '',
}, // 选中的角色
});
const {
loading,
multiple,
queryParams,
roleList,
total,
dialog,
formData,
rules,
resourceDialogVisible,
menuOptions,
permOptions,
checkedRole,
checkStrictly,
} = toRefs(state);
function handleQuery() {
emit('roleClick', {});
state.loading = true;
listPageRoles(state.queryParams).then(({ data }) => {
state.roleList = data.list;
state.total = data.total;
state.loading = false;
});
}
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
function handleRowClick(row: any) {
emit('roleClick', row);
}
function handleAdd() {
state.dialog = {
title: '添加角色',
visible: true,
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改角色',
visible: true,
};
const roleId = row.id || state.ids;
getRoleFormDetail(roleId).then(({ data }) => {
state.formData = data;
});
}
function submitFormData() {
dataFormRef.value.validate((valid: any) => {
if (valid) {
if (state.formData.id) {
updateRole(state.formData.id as any, state.formData).then(() => {
ElMessage.success('修改成功');
cancel();
handleQuery();
});
} else {
addRole(state.formData).then(() => {
cancel();
ElMessage.success('新增成功');
handleQuery();
});
}
}
});
}
/**
* 弹窗关闭
*/
function cancel() {
state.dialog.visible = false;
dataFormRef.value.resetFields();
}
/**
* 删除
*/
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteRoles(ids).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
}
/**
* 分配资源权限
*/
function handleResourceAssign(row: RoleItem) {
resourceDialogVisible.value = true;
permOptions.value.map((item) => (item.checked = false));
const roleId: any = row.id;
checkedRole.value = {
id: roleId,
name: row.name,
};
//资源下拉数据
getResource().then((response) => {
checkStrictly.value = true; // 父子节点不互相关联
state.menuOptions = response.data.menus;
state.permOptions = response.data.perms;
// 获取角色拥有的资源数据进行勾选
getRoleResourceIds(roleId).then((res) => {
const checkedMenuIds = res.data.menuIds;
const checkedPermIds = res.data.permIds;
nextTick(() => {
resourceRef.value.setCheckedKeys(checkedMenuIds);
permOptions.value.forEach((perm) => {
if (checkedPermIds.includes(perm.value)) {
perm.checked = true;
} else {
perm.checked = false;
}
});
});
checkStrictly.value = false; // 父子节点互相关联
});
});
}
/**
* 提交资源权限
*/
function handleRoleResourceSubmit() {
const checkedMenuIds: any[] = resourceRef.value
.getCheckedNodes(false, true)
.map((node: any) => node.value);
const checkedPermIds = state.permOptions
.filter((item) => item.checked)
.map((item) => item.value);
const roleResourceData = {
menuIds: checkedMenuIds,
permIds: checkedPermIds,
};
updateRoleResource(checkedRole.value.id, roleResourceData).then((res) => {
ElMessage.success('修改成功');
state.resourceDialogVisible = false;
handleQuery();
});
}
// 取消资源分配
function cancelResourceAssign() {
state.resourceDialogVisible = false;
}
onMounted(() => {
handleQuery();
});
</script>
<template>
<div class="app-container">
<el-row :gutter="10">
<el-col :span="10" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="role" />
角色列表
</template>
<Role ref="role" @roleClick="handleRoleClick" />
</el-card>
</el-col>
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-form-item>
<el-col :span="6" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="menu" />
<span style="margin: 0 5px">菜单分配</span>
<el-tag type="success" v-if="role.id">
<svg-icon color="green" icon-class="role" />
{{ role.name }}
</el-tag>
<el-tag type="warning" v-else size="small">请选择角色</el-tag>
</template>
<Menus ref="menu" @menuClick="handleMenuClick" :role="role" />
</el-card>
</el-col>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="角色名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-col :span="8" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
ref="dataTableRef"
v-loading="loading"
:data="roleList"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
highlight-current-row
border
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色名称" prop="name" />
<el-table-column label="角色编码" prop="code" />
<el-table-column label="操作" align="center" width="200">
<template #default="scope">
<el-button
type="primary"
circle
plain
@click.stop="handleResourceAssign(scope.row)"
>
<svg-icon icon-class="perm" />
<span style="margin: 0 5px">权限分配</span>
</el-button>
<el-tag type="success" style="margin: 0 5px 0 0" v-if="role.id">
<svg-icon color="green" icon-class="role" />
{{ role.name }}
</el-tag>
<el-tag
type="warning"
style="margin: 0 5px 0 0"
v-else
size="small"
>
请选择角色</el-tag
>
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<el-tag type="success" v-if="menu.id" size="small">
<svg-icon icon-class="menu" />
{{ menu.name }}
</el-tag>
<el-tag type="warning" v-else size="small"> 请选择菜单</el-tag>
<!-- 分页工具条 -->
<pagination
v-if="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<!-- 表单弹窗 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
width="500px"
destroy-on-close
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form-item label="角色名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入角色名称" />
</el-form-item>
<el-form-item label="角色编码" prop="code">
<el-input v-model="formData.code" placeholder="请输入角色编码" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
controls-position="right"
:min="0"
style="width: 100px"
/>
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitFormData">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
<el-dialog
:title="'【' + checkedRole.name + '】资源权限'"
v-model="resourceDialogVisible"
width="1000px"
>
<el-scrollbar max-height="600px">
<el-tree
ref="resourceRef"
node-key="value"
show-checkbox
:data="menuOptions"
:default-expand-all="true"
>
<template #default="{ node, data }">
<div v-if="data.isPerm == true" class="resource-tree-node">
<div class="resource-tree-node__content">
<el-checkbox
v-for="perm in permOptions.filter(
(perm) => perm.parentId == data.permPid
)"
:key="perm.value"
:label="perm.value"
v-model="perm.checked"
border
size="small"
>{{ perm.label }}</el-checkbox
>
</div>
</div>
<span v-else>{{ node.label }}</span>
</template>
<perm ref="perm" :menu="menu" :role="role" />
</el-card>
</el-col>
</el-row>
</el-tree>
</el-scrollbar>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleRoleResourceSubmit"
>确 定</el-button
>
<el-button @click="cancelResourceAssign">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import SvgIcon from '@/components/SvgIcon/index.vue';
<style lang="scss">
.resource-tree-node {
width: 100%;
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
margin-left: -28px !important;
import Role from './components/Role.vue';
import Menus from './components/Menu.vue';
import Perm from './components/Perm.vue';
const state = reactive({
role: {
id: undefined,
name: ''
},
menu: {
id: undefined,
name: ''
&__content {
display: flex;
flex-wrap: wrap;
}
});
.el-checkbox--default {
background-color: transparent !important;
}
}
.el-tree-node__content {
height: auto !important;
}
const { role, menu } = toRefs(state);
function handleRoleClick(roleRow: any) {
if (roleRow) {
state.role = {
id: roleRow.id,
name: roleRow.name
};
} else {
state.role = {
id: undefined,
name: ''
};
.el-checkbox-group {
display: flex;
flex-wrap: wrap;
&:hover {
background-color: var(--el-tree-node-hover-bg-color);
}
&:active {
background-color: var(--el-tree-node-hover-bg-color);
}
}
function handleMenuClick(menuRow: any) {
if (!state.role.id) {
ElMessage.warning('请选择角色');
return false;
}
if (menuRow) {
state.menu = {
id: menuRow.value,
name: menuRow.label
};
} else {
state.menu = {
id: undefined,
name: ''
};
}
.el-checkbox.el-checkbox--small {
margin: 5px;
z-index: 999;
background: #fff;
}
</script>
<style scoped></style>
</style>

98
src/views/system/user/index.vue
View File

@@ -1,7 +1,6 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'user'
name: 'user',
};
</script>
@@ -13,23 +12,23 @@ import {
watchEffect,
onMounted,
getCurrentInstance,
toRefs
toRefs,
} from 'vue';
// 导入API
import {
listUsersPage,
getUserDetail,
getUserFormData,
deleteUsers,
addUser,
updateUser,
updateUserPart,
downloadTemplate,
exportUser,
importUser
importUser,
} from '@/api/system/user';
import { listSelectDepartments } from '@/api/system/dept';
import { listRoles } from '@/api/system/role';
import { listSelectRoles } from '@/api/system/role';
// 组件依赖
import {
@@ -37,7 +36,7 @@ import {
ElMessageBox,
ElTree,
ElForm,
UploadFile
UploadFile,
} from 'element-plus';
import {
Search,
@@ -48,17 +47,16 @@ import {
Lock,
Download,
Top,
UploadFilled
UploadFilled,
} from '@element-plus/icons-vue';
import {
UserItem,
UserQueryParam,
UserFormData,
Option,
RoleItem,
Dialog,
UserImportFormData
} from '@/types';
UserImportFormData,
} from '@/types/api/system/user';
import { Option, Dialog } from '@/types/common';
// DOM元素的引用声明定义 ，变量名和DOM的ref属性值一致
const deptTreeRef = ref(ElTree); // 部门树
@@ -83,7 +81,7 @@ const state = reactive({
userList: [] as UserItem[],
// 弹窗属性
dialog: {
visible: false
visible: false,
} as Dialog,
deptName: undefined,
// 部门树选项
@@ -92,47 +90,47 @@ const state = reactive({
// 性别状态字典
genderOptions: [] as any[],
// 角色选项
roleOptions: [] as RoleItem[],
roleOptions: [] as Option[],
// 表单参数
formData: {
status: 1
status: 1,
} as UserFormData,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10
pageSize: 10,
} as UserQueryParam,
// 表单校验
rules: {
username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
nickname: [
{ required: true, message: '用户昵称不能为空', trigger: 'blur' }
{ required: true, message: '用户昵称不能为空', trigger: 'blur' },
],
deptId: [{ required: true, message: '归属部门不能为空', trigger: 'blur' }],
deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }],
email: [
{
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: '请输入正确的邮箱地址',
trigger: 'blur'
}
trigger: 'blur',
},
],
mobile: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur'
}
]
trigger: 'blur',
},
],
},
importDialog: {
title: '用户导出',
visible: false
visible: false,
} as Dialog,
importFormData: {} as UserImportFormData,
excelFile: undefined as any,
excelFilelist: [] as File[]
excelFilelist: [] as File[],
});
const {
@@ -149,7 +147,7 @@ const {
roleOptions,
importDialog,
importFormData,
excelFilelist
excelFilelist,
} = toRefs(state);
/**
@@ -160,7 +158,7 @@ watchEffect(
deptTreeRef.value.filter(state.deptName);
},
{
flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
flush: 'post', // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
}
);
@@ -186,7 +184,7 @@ function handleDeptNodeClick(data: { [key: string]: any }) {
* 加载角色数据
*/
async function loadRoleOptions() {
listRoles().then(response => {
listSelectRoles().then((response) => {
state.roleOptions = response.data;
});
}
@@ -202,7 +200,7 @@ function handleStatusChange(row: { [key: string]: any }) {
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
}
)
.then(() => {
@@ -254,7 +252,7 @@ function resetPassword(row: { [key: string]: any }) {
'重置密码',
{
confirmButtonText: '确定',
cancelButtonText: '取消'
cancelButtonText: '取消',
}
)
.then(({ value }) => {
@@ -263,7 +261,7 @@ function resetPassword(row: { [key: string]: any }) {
return false;
}
updateUserPart(row.id, {
password: value
password: value,
}).then(() => {
ElMessage.success('修改成功，新密码是：' + value);
});
@@ -279,7 +277,7 @@ async function handleAdd() {
await loadRoleOptions();
state.dialog = {
title: '添加用户',
visible: true
visible: true,
};
}
@@ -292,9 +290,9 @@ async function handleUpdate(row: { [key: string]: any }) {
await loadRoleOptions();
state.dialog = {
title: '修改用户',
visible: true
visible: true,
};
getUserDetail(userId).then(({ data }) => {
getUserFormData(userId).then(({ data }) => {
state.formData = data;
});
}
@@ -334,7 +332,7 @@ function handleDelete(row: { [key: string]: any }) {
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
}
)
.then(function () {
@@ -359,7 +357,7 @@ function cancel() {
* 加载部门
*/
async function loadDeptOptions() {
listSelectDepartments().then(response => {
listSelectDepartments().then((response) => {
state.deptOptions = response.data;
});
}
@@ -368,18 +366,18 @@ async function loadDeptOptions() {
* 加载性别字典
*/
function loadGenderOptions() {
proxy.$listDictsByCode('gender').then((response: any) => {
proxy.$getDictItemsByTypeCode('gender').then((response: any) => {
state.genderOptions = response?.data;
});
}
/**
* 下载用户导入模板
* 下载导入模板
*/
function handleDownloadTemplate() {
downloadTemplate().then((response: any) => {
const blob = new Blob([response.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
});
const a = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 下载链接
@@ -395,7 +393,7 @@ function handleDownloadTemplate() {
}
/**
* 导入用户表单弹窗
* 显示导入弹窗
*/
async function showImportDialog() {
await loadDeptOptions();
@@ -431,7 +429,7 @@ function submitImportForm() {
const deptId = state.importFormData.deptId;
const roleIds = state.importFormData.roleIds.join(',');
importUser(deptId, roleIds, state.excelFile).then(response => {
importUser(deptId, roleIds, state.excelFile).then((response) => {
ElMessage.success(response.data);
closeImportDialog();
handleQuery();
@@ -456,7 +454,7 @@ function closeImportDialog() {
function handleExport() {
exportUser(queryParams.value).then((response: any) => {
const blob = new Blob([response.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
});
const a = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 下载的链接
@@ -617,7 +615,7 @@ onMounted(() => {
/>
<el-table-column label="用户昵称" align="center" prop="nickname" />
<el-table-column label="性别" align="center" prop="gender" />
<el-table-column label="性别" align="center" prop="genderLabel" />
<el-table-column label="部门" align="center" prop="deptName" />
<el-table-column
@@ -754,9 +752,9 @@ onMounted(() => {
<el-select v-model="formData.roleIds" multiple placeholder="请选择">
<el-option
v-for="item in roleOptions"
:key="item.id"
:label="item.name"
:value="item.id"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
@@ -800,9 +798,9 @@ onMounted(() => {
>
<el-option
v-for="item in roleOptions"
:key="item.id"
:label="item.name"
:value="item.id"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>