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

style: 全局代码格式化

Browse Source 
Former-commit-id: bb50c8419b8fcdeb48c93fce9f399d901e8f5a52
This commit is contained in:
郝先瑞
2022-05-04 15:02:33 +08:00
parent e563bc340c
commit 11f02c0254
136 changed files with 11147 additions and 9780 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,97 +1,112 @@
<template>
<div class="component-container">
<div class="component-container__main">
<el-cascader-panel ref="categoryRef" :options="categoryOptions" v-model="goodsInfo.categoryId"
:props="{ emitPath: false }" @change="handleCategoryChange" />
<div style="margin-top: 20px">
<el-link type="info" :underline="false" v-show="pathLabels.length > 0">您选择的商品分类:</el-link>
<el-link type="danger" :underline="false" v-for="(item, index) in pathLabels" :key="index"
style="margin-left: 5px">
{{ item }}
<CaretRight v-show="index < pathLabels.length - 1" style="width: 1em; height:1em;margin-left: 5px" />
</el-link>
</div>
</div>
<div class="component-container__footer">
<el-button type="primary" @click="handleNext">下一步，填写商品信息</el-button>
</div>
</div>
<div class="component-container">
<div class="component-container__main">
<el-cascader-panel
ref="categoryRef"
:options="categoryOptions"
v-model="goodsInfo.categoryId"
:props="{ emitPath: false }"
@change="handleCategoryChange"
/>
<div style="margin-top: 20px">
<el-link type="info" :underline="false" v-show="pathLabels.length > 0"
>您选择的商品分类:</el-link
>
<el-link
type="danger"
:underline="false"
v-for="(item, index) in pathLabels"
:key="index"
style="margin-left: 5px"
>
{{ item }}
<CaretRight
v-show="index < pathLabels.length - 1"
style="width: 1em; height: 1em; margin-left: 5px"
/>
</el-link>
</div>
</div>
<div class="component-container__footer">
<el-button type="primary" @click="handleNext"
>下一步，填写商品信息</el-button
>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, nextTick, reactive, ref, toRefs } from "vue";
import { ElCascaderPanel, ElMessage } from "element-plus";
import { onMounted, nextTick, reactive, ref, toRefs } from 'vue';
import { ElCascaderPanel, ElMessage } from 'element-plus';
import { CaretRight } from '@element-plus/icons-vue';
// API 引用
import { listCascadeCategories } from "@/api/pms/category";
import { computed } from "@vue/reactivity";
import { listCascadeCategories } from '@/api/pms/category';
import { computed } from '@vue/reactivity';
const emit = defineEmits(['next', "update:modelValue"])
const emit = defineEmits(['next', 'update:modelValue']);
const props = defineProps({
modelValue: {
type: Object,
default: () => { }
}
})
modelValue: {
type: Object,
default: () => {}
}
});
const goodsInfo: any = computed({
get: () => props.modelValue,
set: (value) => {
emit('update:modelValue', value)
}
})
get: () => props.modelValue,
set: value => {
emit('update:modelValue', value);
}
});
const state = reactive({
categoryOptions: [],
pathLabels: []
})
categoryOptions: [],
pathLabels: []
});
const { categoryOptions, pathLabels } = toRefs(state)
const { categoryOptions, pathLabels } = toRefs(state);
function loadData() {
listCascadeCategories().then(response => {
state.categoryOptions = response.data
if (goodsInfo.value.id) {
nextTick(() => {
handleCategoryChange()
})
}
})
listCascadeCategories().then(response => {
state.categoryOptions = response.data;
if (goodsInfo.value.id) {
nextTick(() => {
handleCategoryChange();
});
}
});
}
const categoryRef = ref(ElCascaderPanel)
const categoryRef = ref(ElCascaderPanel);
function handleCategoryChange() {
const checkNode = categoryRef.value.getCheckedNodes()[0]
state.pathLabels = checkNode.pathLabels // 商品分类选择层级提示
goodsInfo.value.categoryId = checkNode.value
const checkNode = categoryRef.value.getCheckedNodes()[0];
state.pathLabels = checkNode.pathLabels; // 商品分类选择层级提示
goodsInfo.value.categoryId = checkNode.value;
}
function handleNext() {
if (!goodsInfo.value.categoryId) {
ElMessage.warning('请选择商品分类')
return false
}
emit('next')
if (!goodsInfo.value.categoryId) {
ElMessage.warning('请选择商品分类');
return false;
}
emit('next');
}
onMounted(() => {
loadData()
})
loadData();
});
</script>
<style lang="scss" scoped>
.component-container {
&__main {
margin: 20px auto
}
&__main {
margin: 20px auto;
}
&__footer {
position: fixed;
bottom: 20px;
right: 20px;
}
&__footer {
position: fixed;
bottom: 20px;
right: 20px;
}
}
</style>